.mosaic-container {clear: both; margin: 25px 0 0 0; min-height: 200px;}
.mosaic-wrapper {position: relative; width: 100%; height: 550px; margin: 0; background: #fff;}

.mosaic-item {position: absolute; left: 0; top: 0; overflow: hidden; cursor:pointer;}
.mosaic-item .mosaic-item-img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; background-position: center;}

.mosaic-item .mosaic-item-border {position: absolute; width: 100%; height: 100%; border: solid 4px #fff; background: linear-gradient(to bottom, transparent 20%, #000);}
.mosaic-item .mosaic-item-border.bl {border-left: none;}
.mosaic-item .mosaic-item-border.bt {border-top: none;}
.mosaic-item .mosaic-item-border.br {border-right: none;}
.mosaic-item .mosaic-item-border.bb {border-bottom: none;}

.mosaic-item-content {position: absolute; z-index: 9999; left: 20px; right: 20px; bottom: 20px; color: #fff;}
.mosaic-item-content .subtitle {font-size: 14px; font-weight: bold;}
.mosaic-item-content .title {margin: 5px 0 0 0; font-size: 40px; line-height: 33px; color: #FFF;}
.mosaic-item-content .description {margin: 10px 0 0 0; padding: 0; font-size: 13px; max-height: 54px; overflow: hidden;}
.mosaic-item-content .description p {margin: 0; padding: 0;}
.mosaic-item-content .description.disabled {display: none;}

.mosaic-item.medium .mosaic-item-content {left: 15px; right: 15px; bottom: 10px;}
.mosaic-item.medium .mosaic-item-content .subtitle {font-size: 12px;}
.mosaic-item.medium .mosaic-item-content .title {font-size: 30px; line-height: 25px;}

.mosaic-item.small .mosaic-item-content {left: 10px; right: 10px; bottom: 8px;}
.mosaic-item.small .mosaic-item-content .subtitle {font-size: 10px;}
.mosaic-item.small .mosaic-item-content .title {font-size: 20px; line-height: 17px;}
.mosaic-item.small .mosaic-item-content .description {max-height: 36px;}

/* animations */
.mosaic-item .mosaic-item-img {-webkit-animation: fadein 2s; -moz-animation: fadein 2s; -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s;}
.mosaic-item .mosaic-item-content .description {-webkit-animation: fadein 0.5s; -moz-animation: fadein 0.5s; -ms-animation: fadein 0.5s; -o-animation: fadein 0.5s; animation: fadein 0.5s;}

/* hover */
.mosaic-item:hover .mosaic-item-border {background: linear-gradient(to bottom, transparent 1%, #000);}
.mosaic-item:hover .mosaic-item-content .description {display: block;}
.mosaic-item.small:hover .mosaic-item-content .subtitle {display: none;}

@keyframes fadein {from{ opacity: 0; } to{ opacity: 1; }}
@-moz-keyframes fadein {from{ opacity: 0; } to{ opacity: 1; }}
@-webkit-keyframes fadein {from{ opacity: 0; } to{ opacity: 1; }}
@-ms-keyframes fadein {from{ opacity: 0; } to{ opacity: 1; }}
@-o-keyframes fadein {from{ opacity: 0; } to{ opacity: 1; }}