.video-list-thumbs {
}
 .video-list-thumbs>li {
     margin-bottom: 12px;
}
 .video-list-thumbs>li:last-child {
}
 .video-list-thumbs>li>a {
     display: block;
     position: relative;
     background-color: #111;
     color: #fff;
     padding: 8px;
     border-radius: 3px transition:all 500ms ease-in-out;
     border-radius: 4px 
}
 .video-list-thumbs>li>a:hover {
     box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
     text-decoration: none 
}
 .video-list-thumbs h2 {
     bottom: 0;
     font-size: 14px;
     height: 33px;
     margin: 8px 0 0;
}
 .video-list-thumbs .fa-play-circle-o {
     font-size: 60px;
     opacity: 0.6;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
     transition: all 500ms ease-in-out;
}
 .video-list-thumbs>li>a:hover .fa-play-circle-o {
     color: #fff;
     opacity: 1;
     text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
 .video-list-thumbs .duration {
     background-color: rgba(0, 0, 0, 0.4);
     border-radius: 2px;
     color: #fff;
     font-size: 11px;
     font-weight: bold;
     line-height: 13px;
     padding: 2px 3px 1px;
     position: absolute;
     transition: all 500ms ease;
}
 .video-list-thumbs>li>a:hover .duration {
     background-color: #000;
}
 .img-responsive {
     max-width: 100%;
     max-height: 100px;
}
 @media screen and (min-width: 576px) {
}
 @media screen and (min-width: 768px) {
     .img-responsive {
         max-width: 100%;
         max-height: 100%;
    }
}
 @media screen and (min-width: 992px) {
}
 @media screen and (min-width: 1200px) {
}