.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: 18px;
        font-style: italic;
        font-family: 'FontAwesome';
        /*text-transform: uppercase;*/
        line-height: 20px;
        text-align: center;
    }

    .expandable .expand-bar:hover {
        /*font-style: italic;*/
        /*font-weight :510;*/
        color: black;
    }
    .expandable .expand-bar::before {
        position: absolute;
        width: 100%;
        height: 70px;
        top: -70px;
        left: 0px;
        display: block;
        content: "";
        background: rgba(237,237,237,0);
        background: -moz-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237,237,237,0)), color-stop(100%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
        background: -webkit-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
        background: linear-gradient(to bottom, rgba(237,237,237,0) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff', GradientType=0 );
    }

.hide-before-shadow::before{
    display: none!important;
}


.expandable .expand-bar i {
    transition: all 250ms ease-in-out;
    /*position: absolute;*/
    width: 20px;
    height: 20px;
    display: inline-block;
    top: 50%;
    /*right: 10px;*/
    margin-top: -10px;
    margin-bottom: -5px;
    margin-inline : 10px;
    transform: rotate(-90deg);
}

.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;
}