.expandable {

    transition: all 250ms ease-in-out;

}



.expandable .expand-bar {

    position: absolute;

    display: block;

    left: 0px;

    bottom: 0px;

    background-color: white;

    width: 100%;

    cursor: pointer;

    text-decoration: none;

    font-weight: 500;

    box-sizing: border-box;

    padding-left: 10px;

    padding-right: 30px;

    font-size: 16px;

    line-height: 20px;

	background-color: transparent;

	padding:5px 10px;

	font-weight:700;

	color:#424242;

	text-align:center;

}



.expandable .expand-bar span.more

{

	display:block;

	border:solid 2px #4b3423;

	width:200px;

	margin:auto;

	padding:10px 0;

	color:#414141;

	position:relative;

	z-index:99;

	-webkit-border-radius: 6px;

border-radius: 6px;

}

.expandable .expand-bar span.less

{

	display:block;

	border:solid 2px #4b3423;

	width:200px;

	margin:auto;

	padding:10px 0;

	color:#414141;

	position:relative;

	z-index:99;

	z-index:99;

	-webkit-border-radius: 6px;

border-radius: 6px;

background-color:#fff;

}



.expandable .expand-bar::before {

    position: absolute;

    width: 100%;

    height:150px;

	bottom:-20px;

    left: 0px;

    display: block;

	opacity:1;

    content: "";

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+54,1+100 */

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */



}

.expanded .expand-bar

{



}

.expanded .expand-bar::before {

	

		display:none;

	}

.expandable .expand-bar i {

    transition: all 250ms ease-in-out;

    position: absolute;

    width: 20px;

    height: 20px;

    display: block;

    top: 50%;

    right: 10px;

    margin-top: -10px;

    transform: rotate(-90deg);

}

.expandable.expanded

{

	padding-bottom:40px;

}

.expandable.expanded .expand-bar i {

    transform: rotate(90deg);

}



.expandable .expand-bar i::before, .expandable .expand-bar i::after {

    position: absolute;

    width: 10px;

    height: 1px;

    background: #1d1d1d;

    content: "";

    left: 5px;

}



.expandable .expand-bar i::before {

    transform: rotate(45deg);

    top: 13px;

}



.expandable .expand-bar i::after {

    transform: rotate(-45deg);

    top: 6px;

}