<div class="vid-n">
<div class="vid-n2">
<img src="$IMG_URL1$" alt="$TITLE$">
<ul class="vid-d">
<li><i class="fa fa-cloud-download" aria-hidden="true"> $LOADS$</i></li>
<li><i class="fa fa-eye" aria-hidden="true"> $READS$</i></li>
<li><i class="fa fa-comments-o" aria-hidden="true"> $COMMENTS_NUM$</i></li>
</ul>
<div class="vid-descr">
<div class="vid-title">
<?if($RATING$)?><center><div class="vid-rating"><?$RSTARS$('30','http://src.ucoz.net/img/stars/12/30.png','1','float')?></div></center><?endif?>
<a href="$ENTRY_URL$"><h4>$TITLE$</h4></a>
</div>
</div>
</div>
</div>

.vid-n {width: 33%; float: left; height: 360px; overflow: hidden; position: relative; margin-bottom: 5px;}
.vid-n2 {margin-left: 4px;overflow: hidden;height: 100%;position: relative;margin: 0 2% 20px 0;border: solid 2px #6b6a6a;border-radius: 5px;}
.vid-n2:hover > a:before {background:rgba(10, 10, 10, 0.71);}
.vid-n img {height: 100%;max-width: none;position: absolute;left: -9999px;right: -9999px;margin: auto;}
.vid-descr {position: absolute;bottom: 0;left: 0;right: 0;color: #634e4e;z-index: 2;background-color: #312d2d;padding: 0 10px 10px 10px;border-radius: 5px;}
.vid-descr > a { color: #25c5d4; padding: 25px 25px 15px; display: block; }
.vid-descr h4 {font-size: 15px;color: #c9fffe;position: relative;font-weight: bold;}
.vid-descr h4:after { content: ""; position: absolute; height: 4px; margin-top: 2px; background: #ee3b24; top: 100%; left: 0; width: 0; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
.vid-descr::before {display: block;content: "";width: 0;height: 0;border-color: rgba(255, 255, 255, 0);border-style: solid;border-width: 20px 300px;border-left-color: #312d2d;position: absolute;bottom: 100%;left: 0;margin-bottom: -20px;}
.vid-d { position: absolute; top: 10px; right: 10px; z-index: 99; margin: 0; padding: 0; }
.vid-d li { display: inline-block; }
.vid-d li { list-style: none; }
.vid-d li i {display: block;background: rgb(23, 21, 21);color: #ffffff;font-size: 13px;padding: 3px 5px;border-radius: 20px;-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.68), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255, 255, 255, 0.19) 0px 0px 0px 1px;-moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;box-shadow: inset 0px 1px 0px rgba(218, 218, 218, 0.78), rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(255, 255, 255, 0.22) 0px 0px 0px 1px;}
.vid-d li a:hover {background:#291c1a;}
.vid-rating {padding: 0 0 10px 0;}

@media only screen and (max-width: 940px) {
.vid-n {width: 33%;}
}
@media screen and (max-width: 640px) {
.vid-n {width: 48%;}
}

@media screen and (max-width: 480px) {
.vid-n {width: 100%; float:none;}
}