/*
    Title: Readmore
    Author: Os2
*/

.readmore:before{content:"Read more"; font-family: 'Cabin', sans-serif; font-size: 15px}
.readmore.open:before {content:"Read less"; font-family: 'Cabin', sans-serif; font-size: 15px}

.readmore{position:relative}
.readmore, .readmore:after{height: 150px; overflow:hidden}
.readmore:after, .readmore:before{position:absolute}
.readmore:after{content:""; background: -moz-linear-gradient(top, rgba(242,242,242,0) 0%, rgba(242,242,242,0.98) 60%, rgba(242,242,242,1) 61%, rgba(242,242,242,1) 100%);
    background: -webkit-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(242,242,242,0.98) 60%,rgba(242,242,242,1) 61%,rgba(242,242,242,1) 100%);
    background: linear-gradient(to bottom, rgba(242,242,242,0) 0%,rgba(242,242,242,0.98) 60%,rgba(242,242,242,1) 61%,rgba(242,242,242,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f2f2', endColorstr='#f2f2f2',GradientType=0 )}
.readmore:after{content:""; font-family:Cabin; line-height: 60px; text-indent: 85px; display:flex; align-items:flex-end; justify-content: center; color:#3F7BDA; bottom: 0; z-index: 1; width: 100%; height: 100px;}
.readmore.open{height:auto; padding-bottom:50px}
.readmore.open:after{content:""; font-family: 'Lato', sans-serif; height:50px}
.readmore:before{cursor: pointer; text-indent:-20px; font-size:15px; width:230px; z-index:2; padding-bottom:30px; height:auto; color:#333; margin:auto; display: inline-block; left:0; right:0; bottom:10px; padding:10px; text-transform: uppercase; text-align:center}

@media screen and (min-width:768px){
    .readmore, .readmore:after{height:auto}
    .readmore:after, .readmore:before{display:none}
}