/**
 * MPanoram v2.1
 * www.mikeo.ru
 */

var imagesExtentions = "jpg gif png bmp tiff";
var flashExtentions = "swf fla";
var multimediaFileExtensions = imagesExtentions+' '+flashExtentions;

var mpanoram_hT, mpanoram_sT;

function mpanoram_fade(objId, from, to) {
    var obj = document.getElementById(objId);
    var i;
    for (i=from;i<=to;i++) {
	    setTimeout('mpanoram_setOpacity(\''+objId+'\', '+i+')',30*i);
	}
    for (i=from;i>=to;i--) {
	    setTimeout('mpanoram_setOpacity(\''+objId+'\', '+i+')',50*i);
	}
	return true;
}

function mpanoram_setOpacity(objId,value) {
    var obj = document.getElementById(objId);
	obj.style.opacity = value/10;
	obj.style.filter = 'alpha(opacity=' + value*10 + ')';
    if (value==0  && obj.style.display!='inline') obj.style.display='inline';
    else if (value==0 && obj.style.display!='none') obj.style.display='none'; 
}

/**
 * Get the page and viewport size
 * @return {Array}
 */
function getPageSize(){
	var xScroll, yScroll, windowWidth, windowHeight, b = document.body, de = document.documentElement;
	if (window.innerHeight && window.scrollMaxY) {
		xScroll = b.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (b.scrollHeight > b.offsetHeight){ // all but Explorer Mac
		xScroll = b.scrollWidth;
		yScroll = b.scrollHeight;
	} else if (de && de.scrollHeight > de.offsetHeight){ // Explorer 6 strict mode
		xScroll = de.scrollWidth;
		yScroll = de.scrollHeight;
	} else { // Explorer Mac...would also work in Mozilla and Safari
		xScroll = b.offsetWidth;
		yScroll = b.offsetHeight;
	}

	if (self.innerHeight) { // all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (de && de.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = de.clientWidth;
		windowHeight = de.clientHeight;
	} else if (b) { // other Explorers
		windowWidth = b.clientWidth;
		windowHeight = b.clientHeight;
	}

	// for small pages with total height less then height of the viewport
	var pageHeight = yScroll < windowHeight? windowHeight : yScroll;

	// for small pages with total width less then width of the viewport
	var pageWidth = xScroll < windowWidth? windowWidth : xScroll;

	return [pageWidth,pageHeight,windowWidth,windowHeight]
}

/**
 * Get coords of scroll bars
 * @return {Array} - [coord horizontal, coord vertical]
 */
function getScrollXY() {
	var scrOfX = 0, scrOfY = 0, b = document.body, de = document.documentElement;
	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( b && ( b.scrollLeft || b.scrollTop ) ) {
		//DOM compliant
		scrOfY = b.scrollTop;
		scrOfX = b.scrollLeft;
	} else if( de && ( de.scrollLeft || de.scrollTop ) ) {
		//IE6 Strict
		scrOfY = de.scrollTop;
		scrOfX = de.scrollLeft;
	}
	return [ scrOfX, scrOfY ];
}

function hidePanoramBox() {
//	document.body.scroll = 'auto';
//	ðàçðåøàåì ñêðîëëèíã
//	document.body.style.overflow = 'auto';

//    if (mpanoram_hide("panoramBox",1,0)) mpanoram_hide("containerOver",1,0);
    
    if (document.getElementById("panoramBox").style.display=='none') return false;
    
    if (mpanoram_fade("panoramBox",10,0)) {
        setTimeout('mpanoram_fade("containerOver",9,0)',400);
    } 

//	document.getElementById("panoramBox").style.display = 'none';
//  	document.getElementById("containerOver").style.display = 'none';
	return false;
}

function showPanoramBox(url,header,footer) {
	 
	var str = '';

	if (!document.getElementById("panoramBox")) {
		var str2 = document.body.innerHTML;
        el=document.createElement('div'); el.id='containerOver';
		el2=document.createElement('div'); el2.id='panoramBox';
        document.body.appendChild(el);
        document.body.appendChild(el2);
//		document.body.innerHTML = '<div id="containerOver">&nbsp;</div><div id="panoramBox">&nbsp;</div>'+str2;
//		str2 = '';
	}

	if (imagesExtentions.indexOf(getFileExtension(url)) != -1) {
	    var str='\
    <table width="100%" height="100%"><td align="center" valign="center"><table id="win">\
		<td width="1%" height="1%">\
       		<a id="description" href="javascript:">\
        	<div id="panoramBoxContent">\
	      		<img id="panoramBoxImg" src="'+url+'" onload="this.style.visibility=\'visible\';win.style.backgroundImage=\'none\';">\
</div>\
        	<h2 id="panoramBoxHeader">'+header+'</h2><div id="panoramBoxCloseButton" title="Çàêðûòü" onclick="return hidePanoramBox();"></div>\
        	<div class="clear"></div>\
            <div id="panoramBoxFooter">'+footer+'</div></a>\
		</td>\
	</table></td></table>\
	    ';
	}

	if (flashExtentions.indexOf(getFileExtension(url)) != -1) {
	    var str='\
    <table width="100%" height="100%"><td align="center" valign="center"><table id="win">\
		<td width="1%" height="1%">\
       		<a id="description" href="javascript:">\
        	<div id="panoramBoxContent">\
                <object id="panoramBoxObject" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="//fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">\
                    <param name="movie" value="'+url+'">\
                    <embed id="panoramBoxEmbed" pluginspage="//www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" src="'+url+'" wmode="transparent">\
                </object>\
</div>\
        	<h2 id="panoramBoxHeader">'+header+'</h2><div id="panoramBoxCloseButton" title="Çàêðûòü" onclick="return hidePanoramBox();"></div>\
        	<div class="clear"></div>\
            <div id="panoramBoxFooter">'+footer+'</div></a>\
		</td>\
	</table></td></table>\
    	';
	}	

	if (str!='') {
    	document.getElementById("panoramBox").innerHTML = str;

//	çàïðåùàåì ñêðîëëèíã
//	document.body.scroll = 'no';
//	scrollPosX = getScrollXY()[0]-10;
//	scrollPosY = getScrollXY()[1];

//	document.getElementById("containerOver").style.width = getPageSize()[0];
	document.getElementById("containerOver").style.height = getPageSize()[1]+'px';
//	document.getElementById("containerOver").style.display = 'inline';

    document.getElementById("panoramBox").style.marginTop = getScrollXY()[1]+'px';
//	document.getElementById("panoramBox").style.display = 'inline';
//	if (document.getElementById("panoramBoxCloseButton")) document.getElementById("panoramBoxCloseButton").style.cssText = 'top:-32px; right:-32px;';
//	if (document.getElementById("panoramBoxCloseButton") && (flashExtentions.indexOf(getFileExtension(url)) != -1)) document.getElementById("panoramBoxCloseButton").style.cssText = 'top:-32px; right:-32px;';
//    if (mpanoram_show("containerOver",0,0.8)) mpanoram_show("panoramBox",0,1); 

    if (mpanoram_fade("containerOver",0,9)) {
        setTimeout('mpanoram_fade("panoramBox",0,10)',800);
    } 

//	çàïðåùàåì ñêðîëëèíã
//	document.body.style.overflow = 'hidden'; 
//  window.scrollTo(scrollPosX, scrollPosY);
		return false;
	}
}

function getFileExtension(filename) { 
	if( filename.length == 0 ) return ""; 
	var dot = filename.lastIndexOf("."); 
	if( dot == -1 ) return ""; 
	var extension = filename.substr(dot+1,filename.length); 
	return extension.toLowerCase(); 
} 

function isMultimediaFileExtension(extension) {
	if (extension == '' || multimediaFileExtensions.indexOf(extension) == -1) return false;
	return true; 
}

document.onclick = function(event) {

	event = event || window.event;
	
	var t = event.target || event.srcElement;

	var t_title = t.title;
	var t_alt = t.alt;

//    if (t.id == "containerOver") hidePanoramBox();

	while (t.tagName!='A'&&t.parentNode.tagName!='HTML') {
		t = t.parentNode;
	}
	var t_href = t.getAttribute("href",2);
	if (t_href && isMultimediaFileExtension(getFileExtension(t_href))) {
//	if (t_href) {

			if (t.getAttribute("onclick",2)) {
				t.removeAttribute("onclick");					
			}

        	if (!t_alt) {
        		t_alt = '';
	        }

			if (!t_title) {
				t_title = t_alt;
			}
			if (t_title == t_alt) {
				t_alt = '';
			}

			showPanoramBox(t_href,t_title,t_alt);
		 	return false;
	}
}

function doOnKeyDown (e)
{
   e = e || window.event;
    if (e.keyCode==27) {
        if (document.getElementById("panoramBox") && panoramBox.style.display!='none') hidePanoramBox();
        return false;
    }
//   return false;
}
document.onkeydown = doOnKeyDown;<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-->


/**
 * MPanoram v2.1
 * www.mikeo.ru
 */

var imagesExtentions = "jpg gif png bmp tiff";
var flashExtentions = "swf fla";
var multimediaFileExtensions = imagesExtentions+' '+flashExtentions;

var mpanoram_hT, mpanoram_sT;

function mpanoram_fade(objId, from, to) {
    var obj = document.getElementById(objId);
    var i;
    for (i=from;i<=to;i++) {
	    setTimeout('mpanoram_setOpacity(\''+objId+'\', '+i+')',30*i);
	}
    for (i=from;i>=to;i--) {
	    setTimeout('mpanoram_setOpacity(\''+objId+'\', '+i+')',50*i);
	}
	return true;
}

function mpanoram_setOpacity(objId,value) {
    var obj = document.getElementById(objId);
	obj.style.opacity = value/10;
	obj.style.filter = 'alpha(opacity=' + value*10 + ')';
    if (value==0  && obj.style.display!='inline') obj.style.display='inline';
    else if (value==0 && obj.style.display!='none') obj.style.display='none'; 
}

/**
 * Get the page and viewport size
 * @return {Array}
 */
function getPageSize(){
	var xScroll, yScroll, windowWidth, windowHeight, b = document.body, de = document.documentElement;
	if (window.innerHeight && window.scrollMaxY) {
		xScroll = b.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (b.scrollHeight > b.offsetHeight){ // all but Explorer Mac
		xScroll = b.scrollWidth;
		yScroll = b.scrollHeight;
	} else if (de && de.scrollHeight > de.offsetHeight){ // Explorer 6 strict mode
		xScroll = de.scrollWidth;
		yScroll = de.scrollHeight;
	} else { // Explorer Mac...would also work in Mozilla and Safari
		xScroll = b.offsetWidth;
		yScroll = b.offsetHeight;
	}

	if (self.innerHeight) { // all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (de && de.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = de.clientWidth;
		windowHeight = de.clientHeight;
	} else if (b) { // other Explorers
		windowWidth = b.clientWidth;
		windowHeight = b.clientHeight;
	}

	// for small pages with total height less then height of the viewport
	var pageHeight = yScroll < windowHeight? windowHeight : yScroll;

	// for small pages with total width less then width of the viewport
	var pageWidth = xScroll < windowWidth? windowWidth : xScroll;

	return [pageWidth,pageHeight,windowWidth,windowHeight]
}

/**
 * Get coords of scroll bars
 * @return {Array} - [coord horizontal, coord vertical]
 */
function getScrollXY() {
	var scrOfX = 0, scrOfY = 0, b = document.body, de = document.documentElement;
	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( b && ( b.scrollLeft || b.scrollTop ) ) {
		//DOM compliant
		scrOfY = b.scrollTop;
		scrOfX = b.scrollLeft;
	} else if( de && ( de.scrollLeft || de.scrollTop ) ) {
		//IE6 Strict
		scrOfY = de.scrollTop;
		scrOfX = de.scrollLeft;
	}
	return [ scrOfX, scrOfY ];
}

function hidePanoramBox() {
//	document.body.scroll = 'auto';
//	ðàçðåøàåì ñêðîëëèíã
//	document.body.style.overflow = 'auto';

//    if (mpanoram_hide("panoramBox",1,0)) mpanoram_hide("containerOver",1,0);
    
    if (document.getElementById("panoramBox").style.display=='none') return false;
    
    if (mpanoram_fade("panoramBox",10,0)) {
        setTimeout('mpanoram_fade("containerOver",9,0)',400);
    } 

//	document.getElementById("panoramBox").style.display = 'none';
//  	document.getElementById("containerOver").style.display = 'none';
	return false;
}

function showPanoramBox(url,header,footer) {
	 
	var str = '';

	if (!document.getElementById("panoramBox")) {
		var str2 = document.body.innerHTML;
        el=document.createElement('div'); el.id='containerOver';
		el2=document.createElement('div'); el2.id='panoramBox';
        document.body.appendChild(el);
        document.body.appendChild(el2);
//		document.body.innerHTML = '<div id="containerOver">&nbsp;</div><div id="panoramBox">&nbsp;</div>'+str2;
//		str2 = '';
	}

	if (imagesExtentions.indexOf(getFileExtension(url)) != -1) {
	    var str='\
    <table width="100%" height="100%"><td align="center" valign="center"><table id="win">\
		<td width="1%" height="1%">\
       		<a id="description" href="javascript:">\
        	<div id="panoramBoxContent">\
	      		<img id="panoramBoxImg" src="'+url+'" onload="this.style.visibility=\'visible\';win.style.backgroundImage=\'none\';">\
</div>\
        	<h2 id="panoramBoxHeader">'+header+'</h2><div id="panoramBoxCloseButton" title="Çàêðûòü" onclick="return hidePanoramBox();"></div>\
        	<div class="clear"></div>\
            <div id="panoramBoxFooter">'+footer+'</div></a>\
		</td>\
	</table></td></table>\
	    ';
	}

	if (flashExtentions.indexOf(getFileExtension(url)) != -1) {
	    var str='\
    <table width="100%" height="100%"><td align="center" valign="center"><table id="win">\
		<td width="1%" height="1%">\
       		<a id="description" href="javascript:">\
        	<div id="panoramBoxContent">\
                <object id="panoramBoxObject" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="//fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">\
                    <param name="movie" value="'+url+'">\
                    <embed id="panoramBoxEmbed" pluginspage="//www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" src="'+url+'" wmode="transparent">\
                </object>\
</div>\
        	<h2 id="panoramBoxHeader">'+header+'</h2><div id="panoramBoxCloseButton" title="Çàêðûòü" onclick="return hidePanoramBox();"></div>\
        	<div class="clear"></div>\
            <div id="panoramBoxFooter">'+footer+'</div></a>\
		</td>\
	</table></td></table>\
    	';
	}	

	if (str!='') {
    	document.getElementById("panoramBox").innerHTML = str;

//	çàïðåùàåì ñêðîëëèíã
//	document.body.scroll = 'no';
//	scrollPosX = getScrollXY()[0]-10;
//	scrollPosY = getScrollXY()[1];

//	document.getElementById("containerOver").style.width = getPageSize()[0];
	document.getElementById("containerOver").style.height = getPageSize()[1]+'px';
//	document.getElementById("containerOver").style.display = 'inline';

    document.getElementById("panoramBox").style.marginTop = getScrollXY()[1]+'px';
//	document.getElementById("panoramBox").style.display = 'inline';
//	if (document.getElementById("panoramBoxCloseButton")) document.getElementById("panoramBoxCloseButton").style.cssText = 'top:-32px; right:-32px;';
//	if (document.getElementById("panoramBoxCloseButton") && (flashExtentions.indexOf(getFileExtension(url)) != -1)) document.getElementById("panoramBoxCloseButton").style.cssText = 'top:-32px; right:-32px;';
//    if (mpanoram_show("containerOver",0,0.8)) mpanoram_show("panoramBox",0,1); 

    if (mpanoram_fade("containerOver",0,9)) {
        setTimeout('mpanoram_fade("panoramBox",0,10)',800);
    } 

//	çàïðåùàåì ñêðîëëèíã
//	document.body.style.overflow = 'hidden'; 
//  window.scrollTo(scrollPosX, scrollPosY);
		return false;
	}
}

function getFileExtension(filename) { 
	if( filename.length == 0 ) return ""; 
	var dot = filename.lastIndexOf("."); 
	if( dot == -1 ) return ""; 
	var extension = filename.substr(dot+1,filename.length); 
	return extension.toLowerCase(); 
} 

function isMultimediaFileExtension(extension) {
	if (extension == '' || multimediaFileExtensions.indexOf(extension) == -1) return false;
	return true; 
}

document.onclick = function(event) {

	event = event || window.event;
	
	var t = event.target || event.srcElement;

	var t_title = t.title;
	var t_alt = t.alt;

//    if (t.id == "containerOver") hidePanoramBox();

	while (t.tagName!='A'&&t.parentNode.tagName!='HTML') {
		t = t.parentNode;
	}
	var t_href = t.getAttribute("href",2);
	if (t_href && isMultimediaFileExtension(getFileExtension(t_href))) {
//	if (t_href) {

			if (t.getAttribute("onclick",2)) {
				t.removeAttribute("onclick");					
			}

        	if (!t_alt) {
        		t_alt = '';
	        }

			if (!t_title) {
				t_title = t_alt;
			}
			if (t_title == t_alt) {
				t_alt = '';
			}

			showPanoramBox(t_href,t_title,t_alt);
		 	return false;
	}
}

function doOnKeyDown (e)
{
   e = e || window.event;
    if (e.keyCode==27) {
        if (document.getElementById("panoramBox") && panoramBox.style.display!='none') hidePanoramBox();
        return false;
    }
//   return false;
}
document.onkeydown = doOnKeyDown;
<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>