/* Corners (em)
------------------------------ */

.corners { position: relative; overflow: hidden; }
.corners em.tl, .corners em.tr, .corners em.bl, .corners em.br { position: absolute; font-size: 1px; }

.corners-2 em.tl, .corners-2 em.tr, .corners-2 em.bl, .corners-2 em.br { width: 4px; height: 4px; background-image: url(images/corners/corners-2.png); }
	.corners-2 em.tl { left: -2px; top: -2px; } .corners-2 em.tr { right: -2px; top: -2px; } .corners-2 em.bl { left: -2px; bottom: -2px; } .corners-2 em.br { right: -2px; bottom: -2px; }
.corners-3 em.tl, .corners-3 em.tr, .corners-3 em.bl, .corners-3 em.br { width: 6px; height: 6px; background: url(images/corners/corners-3.png); }
	.corners-3 em.tl { left: -3px; top: -3px; } .corners-3 em.tr { right: -3px; top: -3px; } .corners-3 em.bl { left: -3px; bottom: -3px; } .corners-3 em.br { right: -3px; bottom: -3px; }
.corners-4 em.tl, .corners-4 em.tr, .corners-4 em.bl, .corners-4 em.br { width: 8px; height: 8px; background: url(images/corners/corners-4.png); }
	.corners-4 em.tl { left: -4px; top: -4px; } .corners-4 em.tr { right: -4px; top: -4px; } .corners-4 em.bl { left: -4px; bottom: -4px; } .corners-4 em.br { right: -4px; bottom: -4px; }
.corners-5 em.tl, .corners-5 em.tr, .corners-5 em.bl, .corners-5 em.br { width: 10px; height: 10px; background: url(images/corners/corners-5.png); }
	.corners-5 em.tl { left: -5px; top: -5px; } .corners-5 em.tr { right: -5px; top: -5px; } .corners-5 em.bl { left: -5px; bottom: -5px; } .corners-5 em.br { right: -5px; bottom: -5px; }
.corners-6 em.tl, .corners-6 em.tr, .corners-6 em.bl, .corners-6 em.br { width: 12px; height: 12px; background: url(images/corners/corners-6.png); }
	.corners-6 em.tl { left: -6px; top: -6px; } .corners-6 em.tr { right: -6px; top: -6px; } .corners-6 em.bl { left: -6px; bottom: -6px; } .corners-6 em.br { right: -6px; bottom: -6px; }
.corners-7 em.tl, .corners-7 em.tr, .corners-7 em.bl, .corners-7 em.br { width: 14px; height: 14px; background: url(images/corners/corners-7.png); }
	.corners-7 em.tl { left: -7px; top: -7px; } .corners-7 em.tr { right: -7px; top: -7px; } .corners-7 em.bl { left: -7px; bottom: -7px; } .corners-7 em.br { right: -7px; bottom: -7px; }
.corners-8 em.tl, .corners-8 em.tr, .corners-8 em.bl, .corners-8 em.br { width: 16px; height: 16px; background: url(images/corners/corners-8.png); }
	.corners-8 em.tl { left: -8px; top: -8px; } .corners-8 em.tr { right: -8px; top: -8px; } .corners-8 em.bl { left: -8px; bottom: -8px; } .corners-8 em.br { right: -8px; bottom: -8px; }
.corners-9 em.tl, .corners-9 em.tr, .corners-9 em.bl, .corners-9 em.br { width: 18px; height: 18px; background: url(images/corners/corners-9.png); }
	.corners-9 em.tl { left: -9px; top: -9px; } .corners-9 em.tr { right: -9px; top: -9px; } .corners-9 em.bl { left: -9px; bottom: -9px; } .corners-9 em.br { right: -9px; bottom: -9px; }
.corners-10 em.tl, .corners-10 em.tr, .corners-10 em.bl, .corners-10 em.br { width: 20px; height: 20px; background: url(images/corners/corners-10.png); }
	.corners-10 em.tl { left: -10px; top: -10px; } .corners-10 em.tr { right: -10px; top: -10px; } .corners-10 em.bl { left: -10px; bottom: -10px; } .corners-10 em.br { right: -10px; bottom: -10px; }

.corners-2i em.tl, .corners-2i em.tr, .corners-2i em.bl, .corners-2i em.br { width: 4px; height: 4px; background-image: url(images/corners/invert/corners-2.gif); }
	.corners-2i em.tl { left: -2px; top: -2px; } .corners-2i em.tr { right: -2px; top: -2px; } .corners-2i em.bl { left: -2px; bottom: -2px; } .corners-2i em.br { right: -2px; bottom: -2px; }
.corners-3i em.tl, .corners-3i em.tr, .corners-3i em.bl, .corners-3i em.br { width: 6px; height: 6px; background: url(images/corners/invert/corners-3.gif); }
	.corners-3i em.tl { left: -3px; top: -3px; } .corners-3i em.tr { right: -3px; top: -3px; } .corners-3i em.bl { left: -3px; bottom: -3px; } .corners-3i em.br { right: -3px; bottom: -3px; }
.corners-4i em.tl, .corners-4i em.tr, .corners-4i em.bl, .corners-4i em.br { width: 8px; height: 8px; background: url(images/corners/invert/corners-4.gif); }
	.corners-4i em.tl { left: -4px; top: -4px; } .corners-4i em.tr { right: -4px; top: -4px; } .corners-4i em.bl { left: -4px; bottom: -4px; } .corners-4i em.br { right: -4px; bottom: -4px; }
.corners-5i em.tl, .corners-5i em.tr, .corners-5i em.bl, .corners-5i em.br { width: 10px; height: 10px; background: url(images/corners/invert/corners-5.gif); }
	.corners-5i em.tl { left: -5px; top: -5px; } .corners-5i em.tr { right: -5px; top: -5px; } .corners-5i em.bl { left: -5px; bottom: -5px; } .corners-5i em.br { right: -5px; bottom: -5px; }
.corners-6i em.tl, .corners-6i em.tr, .corners-6i em.bl, .corners-6i em.br { width: 12px; height: 12px; background: url(images/corners/invert/corners-6.gif); }
	.corners-6i em.tl { left: -6px; top: -6px; } .corners-6i em.tr { right: -6px; top: -6px; } .corners-6i em.bl { left: -6px; bottom: -6px; } .corners-6i em.br { right: -6px; bottom: -6px; }
.corners-7i em.tl, .corners-7i em.tr, .corners-7i em.bl, .corners-7i em.br { width: 14px; height: 14px; background: url(images/corners/invert/corners-7.gif); }
	.corners-7i em.tl { left: -7px; top: -7px; } .corners-7i em.tr { right: -7px; top: -7px; } .corners-7i em.bl { left: -7px; bottom: -7px; } .corners-7i em.br { right: -7px; bottom: -7px; }
.corners-8i em.tl, .corners-8i em.tr, .corners-8i em.bl, .corners-8i em.br { width: 16px; height: 16px; background: url(images/corners/invert/corners-8.gif); }
	.corners-8i em.tl { left: -8px; top: -8px; } .corners-8i em.tr { right: -8px; top: -8px; } .corners-8i em.bl { left: -8px; bottom: -8px; } .corners-8i em.br { right: -8px; bottom: -8px; }
.corners-9i em.tl, .corners-9i em.tr, .corners-9i em.bl, .corners-9i em.br { width: 18px; height: 18px; background: url(images/corners/invert/corners-9.gif); }
	.corners-9i em.tl { left: -9px; top: -9px; } .corners-9i em.tr { right: -9px; top: -9px; } .corners-9i em.bl { left: -9px; bottom: -9px; } .corners-9i em.br { right: -9px; bottom: -9px; }
.corners-10i em.tl, .corners-10i em.tr, .corners-10i em.bl, .corners-10i em.br { width: 20px; height: 20px; background: url(images/corners/invert/corners-10.gif); }
	.corners-10i em.tl { left: -10px; top: -10px; } .corners-10i em.tr { right: -10px; top: -10px; } .corners-10i em.bl { left: -10px; bottom: -10px; } .corners-10i em.br { right: -10px; bottom: -10px; }<link rel="stylesheet" type="text/css" href="/usr/templates/_pr_ext.css" /><div class="demo" title="Внимание! Это демо версия!">DEMO</div>
<!--reklama-->

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script-->
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-3927128035772323",
          enable_page_level_ads: true
     });
</script>

<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3927128035772323" crossorigin="anonymous"></script> -->

<div class="sp_old">
<h2 class="hidden"><a href="/links/">Реклама спонсоров</a></h2><!--399370392950--><div id='0TaS_399370392950'></div></div>
<!--/reklama-->


/* Corners (em)
------------------------------ */

.corners { position: relative; overflow: hidden; }
.corners em.tl, .corners em.tr, .corners em.bl, .corners em.br { position: absolute; font-size: 1px; }

.corners-2 em.tl, .corners-2 em.tr, .corners-2 em.bl, .corners-2 em.br { width: 4px; height: 4px; background-image: url(images/corners/corners-2.png); }
	.corners-2 em.tl { left: -2px; top: -2px; } .corners-2 em.tr { right: -2px; top: -2px; } .corners-2 em.bl { left: -2px; bottom: -2px; } .corners-2 em.br { right: -2px; bottom: -2px; }
.corners-3 em.tl, .corners-3 em.tr, .corners-3 em.bl, .corners-3 em.br { width: 6px; height: 6px; background: url(images/corners/corners-3.png); }
	.corners-3 em.tl { left: -3px; top: -3px; } .corners-3 em.tr { right: -3px; top: -3px; } .corners-3 em.bl { left: -3px; bottom: -3px; } .corners-3 em.br { right: -3px; bottom: -3px; }
.corners-4 em.tl, .corners-4 em.tr, .corners-4 em.bl, .corners-4 em.br { width: 8px; height: 8px; background: url(images/corners/corners-4.png); }
	.corners-4 em.tl { left: -4px; top: -4px; } .corners-4 em.tr { right: -4px; top: -4px; } .corners-4 em.bl { left: -4px; bottom: -4px; } .corners-4 em.br { right: -4px; bottom: -4px; }
.corners-5 em.tl, .corners-5 em.tr, .corners-5 em.bl, .corners-5 em.br { width: 10px; height: 10px; background: url(images/corners/corners-5.png); }
	.corners-5 em.tl { left: -5px; top: -5px; } .corners-5 em.tr { right: -5px; top: -5px; } .corners-5 em.bl { left: -5px; bottom: -5px; } .corners-5 em.br { right: -5px; bottom: -5px; }
.corners-6 em.tl, .corners-6 em.tr, .corners-6 em.bl, .corners-6 em.br { width: 12px; height: 12px; background: url(images/corners/corners-6.png); }
	.corners-6 em.tl { left: -6px; top: -6px; } .corners-6 em.tr { right: -6px; top: -6px; } .corners-6 em.bl { left: -6px; bottom: -6px; } .corners-6 em.br { right: -6px; bottom: -6px; }
.corners-7 em.tl, .corners-7 em.tr, .corners-7 em.bl, .corners-7 em.br { width: 14px; height: 14px; background: url(images/corners/corners-7.png); }
	.corners-7 em.tl { left: -7px; top: -7px; } .corners-7 em.tr { right: -7px; top: -7px; } .corners-7 em.bl { left: -7px; bottom: -7px; } .corners-7 em.br { right: -7px; bottom: -7px; }
.corners-8 em.tl, .corners-8 em.tr, .corners-8 em.bl, .corners-8 em.br { width: 16px; height: 16px; background: url(images/corners/corners-8.png); }
	.corners-8 em.tl { left: -8px; top: -8px; } .corners-8 em.tr { right: -8px; top: -8px; } .corners-8 em.bl { left: -8px; bottom: -8px; } .corners-8 em.br { right: -8px; bottom: -8px; }
.corners-9 em.tl, .corners-9 em.tr, .corners-9 em.bl, .corners-9 em.br { width: 18px; height: 18px; background: url(images/corners/corners-9.png); }
	.corners-9 em.tl { left: -9px; top: -9px; } .corners-9 em.tr { right: -9px; top: -9px; } .corners-9 em.bl { left: -9px; bottom: -9px; } .corners-9 em.br { right: -9px; bottom: -9px; }
.corners-10 em.tl, .corners-10 em.tr, .corners-10 em.bl, .corners-10 em.br { width: 20px; height: 20px; background: url(images/corners/corners-10.png); }
	.corners-10 em.tl { left: -10px; top: -10px; } .corners-10 em.tr { right: -10px; top: -10px; } .corners-10 em.bl { left: -10px; bottom: -10px; } .corners-10 em.br { right: -10px; bottom: -10px; }

.corners-2i em.tl, .corners-2i em.tr, .corners-2i em.bl, .corners-2i em.br { width: 4px; height: 4px; background-image: url(images/corners/invert/corners-2.gif); }
	.corners-2i em.tl { left: -2px; top: -2px; } .corners-2i em.tr { right: -2px; top: -2px; } .corners-2i em.bl { left: -2px; bottom: -2px; } .corners-2i em.br { right: -2px; bottom: -2px; }
.corners-3i em.tl, .corners-3i em.tr, .corners-3i em.bl, .corners-3i em.br { width: 6px; height: 6px; background: url(images/corners/invert/corners-3.gif); }
	.corners-3i em.tl { left: -3px; top: -3px; } .corners-3i em.tr { right: -3px; top: -3px; } .corners-3i em.bl { left: -3px; bottom: -3px; } .corners-3i em.br { right: -3px; bottom: -3px; }
.corners-4i em.tl, .corners-4i em.tr, .corners-4i em.bl, .corners-4i em.br { width: 8px; height: 8px; background: url(images/corners/invert/corners-4.gif); }
	.corners-4i em.tl { left: -4px; top: -4px; } .corners-4i em.tr { right: -4px; top: -4px; } .corners-4i em.bl { left: -4px; bottom: -4px; } .corners-4i em.br { right: -4px; bottom: -4px; }
.corners-5i em.tl, .corners-5i em.tr, .corners-5i em.bl, .corners-5i em.br { width: 10px; height: 10px; background: url(images/corners/invert/corners-5.gif); }
	.corners-5i em.tl { left: -5px; top: -5px; } .corners-5i em.tr { right: -5px; top: -5px; } .corners-5i em.bl { left: -5px; bottom: -5px; } .corners-5i em.br { right: -5px; bottom: -5px; }
.corners-6i em.tl, .corners-6i em.tr, .corners-6i em.bl, .corners-6i em.br { width: 12px; height: 12px; background: url(images/corners/invert/corners-6.gif); }
	.corners-6i em.tl { left: -6px; top: -6px; } .corners-6i em.tr { right: -6px; top: -6px; } .corners-6i em.bl { left: -6px; bottom: -6px; } .corners-6i em.br { right: -6px; bottom: -6px; }
.corners-7i em.tl, .corners-7i em.tr, .corners-7i em.bl, .corners-7i em.br { width: 14px; height: 14px; background: url(images/corners/invert/corners-7.gif); }
	.corners-7i em.tl { left: -7px; top: -7px; } .corners-7i em.tr { right: -7px; top: -7px; } .corners-7i em.bl { left: -7px; bottom: -7px; } .corners-7i em.br { right: -7px; bottom: -7px; }
.corners-8i em.tl, .corners-8i em.tr, .corners-8i em.bl, .corners-8i em.br { width: 16px; height: 16px; background: url(images/corners/invert/corners-8.gif); }
	.corners-8i em.tl { left: -8px; top: -8px; } .corners-8i em.tr { right: -8px; top: -8px; } .corners-8i em.bl { left: -8px; bottom: -8px; } .corners-8i em.br { right: -8px; bottom: -8px; }
.corners-9i em.tl, .corners-9i em.tr, .corners-9i em.bl, .corners-9i em.br { width: 18px; height: 18px; background: url(images/corners/invert/corners-9.gif); }
	.corners-9i em.tl { left: -9px; top: -9px; } .corners-9i em.tr { right: -9px; top: -9px; } .corners-9i em.bl { left: -9px; bottom: -9px; } .corners-9i em.br { right: -9px; bottom: -9px; }
.corners-10i em.tl, .corners-10i em.tr, .corners-10i em.bl, .corners-10i em.br { width: 20px; height: 20px; background: url(images/corners/invert/corners-10.gif); }
	.corners-10i em.tl { left: -10px; top: -10px; } .corners-10i em.tr { right: -10px; top: -10px; } .corners-10i em.bl { left: -10px; bottom: -10px; } .corners-10i em.br { right: -10px; bottom: -10px; }
<style>
	.portfolio li.good a {
	}
	.portfolio li.good a:before {
/*		--thumbnail: attr(data-img);*/
/*		content: var(--thumbnail);*/
		content: '';
		background-image: var(--thumbnail);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		height: 20vh;
		widht: 100%;
		display: block;
	}
/*	
	.portfolio li a[data-img]:before {
		content: attr(data-img);
		background-image: attr(data-img);
		background-repeat: no-repeat;
		background-size: cover;
		widht: 100%;
		padding: 20vh 20vh 20px 20px;
		display: block;
	}
*/
	.portfolio {
 		display: grid; 
  		grid-template-columns: 20% 20% 20% 20%;  
  		grid-column-gap: 5%;
  	}
	.portfolio li {
		list-style: none;
		margin-bottom: 2em;
/*		height: 20vh;*/
/*		width: 20%;*/
	}
	.portfolio li:not(.good) {
		display: none !important;
	}
</style>
<ul class="portfolio">

</ul>