.mix-filter{list-style:none;margin:0 0 20px 0;padding:0;}
.mix-filter li{color:#555;cursor:pointer;padding:6px 15px;margin-right:2px;margin-bottom:5px;background:#eee;display:inline-block;}
.mix-filter li:hover,
.mix-filter li.active{color:#fff;background:#0da3e2;}
.mix-grid .mix{opacity:0;display:none;}
.mix-grid .mix{position:relative;overflow:hidden;margin-bottom:15px;}
.mix-grid .mix .mix-inner{position:relative;width:100%;}
.mix-grid .mix .mix-details{color:#fff;width:100%;height:100%;bottom:-100%;text-align:center;position:absolute;background:#5ca2c0;transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;}
.mix-grid .mix:hover .mix-details{bottom:0;transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;}
.mix-grid .mix .mix-details h4{color:#fff;margin-top:30px;}
.mix-grid .mix .mix-details p{padding:0 30px;}
.mix-grid .mix .mix-details i{color:#b6bdbf;font-size:14px;}
.mix-grid .mix a.mix-link,
.mix-grid .mix a.mix-preview{color:#555;display:block;cursor:pointer;margin-top:10px;position:absolute;padding:6px 9px;background:#fff;}
.mix-grid .mix a.mix-preview{left:50%;top:40%;margin-left:5px;}
.mix-grid .mix a.mix-link{right:50%;top:40%;margin-right:5px;}
.mix-grid .mix a.mix-link:hover,
.mix-grid .mix a.mix-preview:hover{color:#fff;padding:6px 9px;text-decoration:none;}
.mix-grid .mix a.mix-link:hover i,
.mix-grid .mix a.mix-preview:hover i{color:#000;}
@media (min-width:992px){.mix-grid .mix.col-md-6.col-sm-6 .mix-details{height:50%;}
}
@media (min-width:768px) and (max-width:991px){.mix-grid .mix a.mix-link,
.mix-grid .mix a.mix-preview{margin-top:5px;}
}