Уникальный вид материалов 2 колонки для uCoz

<div class="zornura">
<div class="krusem invert">
<a href="$ENTRY_URL$">
<img alt="$TITLE$" src="$IMG_URL1$">
</a>
<ul class="vertunam">
<li><a href="$CATEGORY_URL$" rel="category tag">$CATEGORY_NAME$</a></li></ul>
<div class="vtulaber">
<a href="$ENTRY_URL$">
<h3>$TITLE$</h3>
<div class="tugamires">
  <i class="fa fa-clock-o" aria-hidden="true"></i>
  <time datetime="$DATE$">$DATE$</time><span style='padding-left:10px;'></span><i class="fa fa-download"></i>  
<span>Загрузок: $LOADS$</span><span style='padding-left:10px;'></span><i class="fa fa-comments-o" aria-hidden="true"></i> <span>($COMMENTS_NUM$)</span><span style='padding-left:10px;'></span><i class="fa fa-eye" aria-hidden="true"></i>  
<span>Просмотров: $READS$</span>
  </div>
  </a>
  </div>
  </div>
</div>

.zornura:nth-child(3n){margin:0 0 20px 0;}
@media only screen and (max-width: 940px) {  
  .zornura {width:48%!important; margin: 0 0 20px 0;} .evid:nth-child(2n){margin: 0 0 20px 0 !important;} .evid:nth-child(2n){margin: 0 0 20px 0;}  
}  
@media screen and (max-width: 640px) {  
  .zornura {width:auto !important;margin: 0 0 20px 0 !important;float:none !important;}  
}

.zornura {width: 48%;float: left;height: 357px;overflow: hidden;position: relative;margin-bottom: 10px;border: 2px solid #7b8290;margin: 3px 1px 10px 10px;border-radius: 5px;box-shadow: 0px 4px 10px rgba(224, 213, 213, 0.31), 0px 20px 10px 18px rgba(144, 138, 138, 0);}
.krusem {margin-left: 4px;overflow: hidden;height: 100%;position: relative;margin: 0px 0% 20px 0px;}
.krusem > a {position: relative;height: 100%;display: block;}
.krusem:hover > a:before {background:rgba(0,0,0,0.3);}
.zornura img { height: 100%; max-width: none; position: absolute; left: -9999px; right: -9999px; margin: auto; }
.vertunam { position: absolute; top: 10px; right: 10px; z-index: 99; margin: 0; padding: 0; }
.vertunam li { display: inline-block; }
.vertunam li { list-style: none; }
.vertunam li a {display: block;background: #3e48d8;color: #F0F0F0;font-size: 11px;padding: 4px 6px;border-radius: 2px;line-height: 1;}
.vertunam li a:hover {background:#1a84af;}
.vtulaber {position: absolute;bottom: 0;left: 0;right: 0;color: #FFF;z-index: 2;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 25%, rgba(0,0,0,0.6) 100%);background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0, 0, 0, 0.62) 25%,rgba(0, 0, 0, 0.67) 100%);background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.6) 25%,rgb(0, 0, 0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 );}
.vtulaber > a {color: #FFF;padding: 25px 25px 15px;display: block;margin: 10px 0px 0px 0px;}
.vtulaber h3 {font-size: 21px;text-transform: capitalize;color: #f5f5f5;margin-bottom: 0;font-weight: 500;text-shadow: 1px 1px 8px rgba(29, 27, 27, 0.84);position: relative;transition: all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;font-family: 'PT Sans';padding: 3px 0px;margin-left: -3px;}
.vtulaber h3:after { content: ""; position: absolute; height: 2px; margin-top: -2px; background: #24a5ee; top: 100%; left: 0; width: 0; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
.krusem:hover .vtulaber h3:after{width:100%;}
.tugamires {font-size: 12px;color: #F6F6F6;margin-top: 8px;}
.tugamires .fa {margin-right: 1px;font-size: 1em;}

/*Podcerkivanie*/  
a:link {text-decoration:none;}

.invert img {
-webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.53, 0.4);
-moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.07, 0.94);
-o-transition: all 1s cubic-bezier(0.48, 0.41, 0.25, 1);
-ms-transition: all 1s cubic-bezier(0.25, -0.09, 0.25, 1);
transition: all 1s cubic-bezier(0.25, 0.1, 0.2, 0.94);}
.invert img:hover {
-webkit-filter: invert(100%); }