html.noscroll { overflow:hidden; }
#lightboxoverlay { position:fixed; top:0; left:0; width:100%;
	height:100%; background-color:rgba(0,0,0,0.8); z-index:1000;
	opacity:0; transition:opacity 0.5s; }
#lightboxpopup { position:absolute; top:50%; left:50%;
	max-width:1000px; transform:translate(-50%,-50%); width:auto;
	background-color:black; box-shadow:0 0 10px black; }
#lightboxoverlay.hidden { display:none; }
#lightboxoverlay.open { opacity:1; }
#lightboxoverlay .close { position:absolute; width:30px;
	height:30px; cursor:pointer; z-index:1003; }
#lightboxoverlay > .close { top:10px; right:10px; }
#lightboxpopup .close { display:none; }
#lightboxoverlay .close:before,
#lightboxoverlay .close:after { display:block; content:"";
	width:30px; height:2px; background-color:white;
	position:absolute; top:50%; left:0; margin-top:-1px; }
#lightboxoverlay .close:before { transform:rotate(45deg); }
#lightboxoverlay .close:after { transform:rotate(-45deg); }

#lightboxpopup .videocontent { position:relative; height:0;
	width:100vw; padding-bottom:44.53%; z-index:1002; }
#lightboxpopup .videocontent iframe { position:absolute; top:0;
	left:0; width:100%; height:100%; border:none; }
#lightboxpopup img.imagecontent { display:block; width:auto;
	height:auto; max-width:100vw; max-height:80vh;
	max-height:calc(100vh - 100px); }

#lightboxoverlay.html { overflow-y:auto; }
#lightboxoverlay.html #lightboxwrapper { box-sizing:border-box;
	padding:50px 0; }
#lightboxoverlay.html #lightboxpopup { position:relative;
	top:auto; left:auto; transform:none; margin:0 auto; }
#lightboxpopup .htmlcontent { padding:20px; width:100vw;
	max-width:100%; box-sizing:border-box; }

@media (min-width:1000px) {
	#lightboxoverlay > .close { display:none; }
	#lightboxpopup .close { display:block; top:-35px; right:0; }
	#lightboxpopup .videocontent { width:1000px; }
	#lightboxpopup img.imagecontent { max-width:1000px; }
}