html.noscroll { overflow:hidden; }
#lightboxoverlay { position:fixed; top:0; left:0; width:100%;
	height:100%; background-color:rgba(0,0,0,0.5); 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:56.25%; z-index:1002; }
#lightboxpopup .videocontent video,
#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; }

#lightboxoverlay.iframe #lightboxpopup { width:90%; }
#lightboxpopup .iframecontent { height:90vh; }
#lightboxpopup iframe { border:none; width:100%; height:100%; }

#lightboxspinner { width:30px; height:30px; border:3px solid white;
	border-radius:30px; margin:30px auto; border-top-color:transparent;
	border-right-color:transparent; animation-name:lightboxspinner;
	animation-duration:1s; animation-iteration-count: infinite;
	animation-timing-function:linear; }
@keyframes lightboxspinner {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(359deg);
	}
}


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