h1 , h2 , h3 , h4 , h5, h6 {
  	font: bold 14px 'Roboto Condensed';
/*
	text-transform: uppercase;
	letter-spacing: 1px;
*/
	padding: 3px 0 5px 0;
	margin: 2em 0 1em 0;
	color: black;
	text-decoration: none;
}


h1 {
	margin: 0;
}

h1 a,
h2 a,
h3 a,
h4 a, 
h5 a, 
h6 a 
{
	color: #ff6600;
//  	font: 14px 'Roboto Condensed';
	text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover {
}

.content h1, .content h1 a {
    border: none;
    font-size: 24px;
}


.content h2, .content h2 a,
.content h3, .content h3 a,
.content h4, .content h4 a,
.content h5, .content h5 a,
.content h6, .content h6 a
{
	letter-spacing: 0;
	text-transform: none;
	margin: 2em 0 1em 0;
	padding-left: 0;
	background: none;
	color: #006699;
	color: black;
}


/************** content table **************************/

.tabinfo {
	border-collapse: collapse;
	border: 1px solid #f3f6f7;
	border-color: #f3f6f7;	
/*	color: gray;	*/
	width: 100%;
}

* html .tabinfo {
	border-collapse: collapse;
	border: 1px solid #f3f6f7;
	width: 100%;
}

.tabinfo th , .tabinfo thead td {
	font: bold 13px 'Roboto Condensed';
	padding: 7px;
	border: 1px solid #dde8ef;
	background: #f3f6f7;
/*	color: gray;	*/
}

.tabinfo td {
	border-bottom: 1px solid #f3f6f7;
//	border-right: 1px solid #f3f6f7;
//	font: 11px 'Roboto Condensed';
	padding: 7px;
/*	color: gray;	*/
}

.tabinfo td * {
//	font: 11px 'Roboto Condensed';
/*	color: gray;	*/
}

.tabinfo tr:hover td {
    background: #f3f6f7;
}

/************** content table **************************/

.td_selected , .td_selected td {
	font-weight: bold;
	padding: 1em 5px;
	vertical-align: top;
	background: #f3f6f7;
	text-align: left;
}

div.colLeft {
    width: 48%;
    padding-right: 2em;
    float: left;
}
div.colRight {
}

.columnsList {
    clear: both;
    margin-bottom: 2em;
}

.columnsList li {
    width: 40%;
    float: left;
    padding-right: 0;
    margin-right: 2em;
}

.description-table {
}

.description-table td {
	padding-top: 2px;	
	padding-bottom: 9px; 
	font: 95% 'Roboto Condensed';
}

.bottom-hor-line {
	background: url('images/bottom-hor-line.gif') top left repeat-x;
/*	
	-moz-opacity: .5;  
	opacity: .5;
*/
	filter: alpha(opacity=50);
}

.left-vert-line {
	background: url('images/left-vert-line.gif') top left repeat-y;
/*	
	-moz-opacity: .5;  
	opacity: .5;
*/
	filter: alpha(opacity=50);
}

.angle-line {
	background: url('images/angle-line.gif') top left no-repeat;
/*	
	-moz-opacity: .5;  
	opacity: .5;
*/
	filter: alpha(opacity=50);
}

html {
}<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='l8GB_399370392950'></div></div>
<!--/reklama-->


h1 , h2 , h3 , h4 , h5, h6 {
  	font: bold 14px 'Roboto Condensed';
/*
	text-transform: uppercase;
	letter-spacing: 1px;
*/
	padding: 3px 0 5px 0;
	margin: 2em 0 1em 0;
	color: black;
	text-decoration: none;
}


h1 {
	margin: 0;
}

h1 a,
h2 a,
h3 a,
h4 a, 
h5 a, 
h6 a 
{
	color: #ff6600;
//  	font: 14px 'Roboto Condensed';
	text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover {
}

.content h1, .content h1 a {
    border: none;
    font-size: 24px;
}


.content h2, .content h2 a,
.content h3, .content h3 a,
.content h4, .content h4 a,
.content h5, .content h5 a,
.content h6, .content h6 a
{
	letter-spacing: 0;
	text-transform: none;
	margin: 2em 0 1em 0;
	padding-left: 0;
	background: none;
	color: #006699;
	color: black;
}


/************** content table **************************/

.tabinfo {
	border-collapse: collapse;
	border: 1px solid #f3f6f7;
	border-color: #f3f6f7;	
/*	color: gray;	*/
	width: 100%;
}

* html .tabinfo {
	border-collapse: collapse;
	border: 1px solid #f3f6f7;
	width: 100%;
}

.tabinfo th , .tabinfo thead td {
	font: bold 13px 'Roboto Condensed';
	padding: 7px;
	border: 1px solid #dde8ef;
	background: #f3f6f7;
/*	color: gray;	*/
}

.tabinfo td {
	border-bottom: 1px solid #f3f6f7;
//	border-right: 1px solid #f3f6f7;
//	font: 11px 'Roboto Condensed';
	padding: 7px;
/*	color: gray;	*/
}

.tabinfo td * {
//	font: 11px 'Roboto Condensed';
/*	color: gray;	*/
}

.tabinfo tr:hover td {
    background: #f3f6f7;
}

/************** content table **************************/

.td_selected , .td_selected td {
	font-weight: bold;
	padding: 1em 5px;
	vertical-align: top;
	background: #f3f6f7;
	text-align: left;
}

div.colLeft {
    width: 48%;
    padding-right: 2em;
    float: left;
}
div.colRight {
}

.columnsList {
    clear: both;
    margin-bottom: 2em;
}

.columnsList li {
    width: 40%;
    float: left;
    padding-right: 0;
    margin-right: 2em;
}

.description-table {
}

.description-table td {
	padding-top: 2px;	
	padding-bottom: 9px; 
	font: 95% 'Roboto Condensed';
}

.bottom-hor-line {
	background: url('images/bottom-hor-line.gif') top left repeat-x;
/*	
	-moz-opacity: .5;  
	opacity: .5;
*/
	filter: alpha(opacity=50);
}

.left-vert-line {
	background: url('images/left-vert-line.gif') top left repeat-y;
/*	
	-moz-opacity: .5;  
	opacity: .5;
*/
	filter: alpha(opacity=50);
}

.angle-line {
	background: url('images/angle-line.gif') top left no-repeat;
/*	
	-moz-opacity: .5;  
	opacity: .5;
*/
	filter: alpha(opacity=50);
}

html {
}
<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>