@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

.card{
    overflow:hidden;
    font-family:"Open Sans", sans-serif;
    color:#FF4200;
    width:480px;
    height:300px;
    display:border-box;
    position:absolute;
    background:#F5F5F5;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
    box-shadow: 0px 30px 30px -20px rgba(0,0,0,0.2);
    transition:all .4s cubic-bezier(1,.4,.4,1)
}
.card > .setting{
    font-size:.75em;
    color:#f6f6f6;
    position:absolute;
    right:15px;
    top:15px;
}
.card > .setting >.fa:first-child{
    margin-bottom:15px;
}
.card > .setting >.fa:hover{opacity:1;}
.card > .setting >.fa{
    display:block;
    cursor:pointer;
    opacity:.85;
    transition:all .2s ease-in-out
}
.card > .setting >.fa.active{color:red;opacity:1}
.card > .image{
    width:100%;
    height:80%;
    background: linear-gradient(rgba(255,255,255,0) 50%, rgba(252,252,252,0) 50%, rgba(246,246,246,1) 90%), url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Firma_vertical_Universidad_de_Costa_Rica.svg/1200px-Firma_vertical_Universidad_de_Costa_Rica.svg.png) ;
    background-size:cover;
    background-position:center center;
}
.card .description{padding:0 3%;}
.card .description h4, .description h5{margin:0; padding:0;}
.card .description > div{display:inline-block;width:26%; margin:0 3%;}
.card .description .sub{color:#aaa}
.card .description h4{
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
.card .long-description{
    opacity:0;
    transition:all .5s ease-in-out;
    margin-top:0em;
    padding:0 6%;
}
.card.expand{
    width:100vw;
    height:100vh;
    overflow-y: scroll;
}
.card.expand > .setting{font-size:1.3em}
.card.expand .long-description{margin-top:2em;opacity:1;}

.card-img-overlay-own{
    position: absolute;
    bottom: 0;
    padding: 1rem;
}