div {
	box-sizing: border-box;
}

body,
html {
	height: 100%;
	margin: 0;
	padding: 0;

}

body {
	background: #000;
}


#container {
	z-index: 5;
	width: 100%;
	text-align: center;
	overflow: hidden;
}

#curtains {
	z-index: 5;
}


#curtains-top {
	z-index:0;
	position: fixed;
	width: 100vw;
	height: 6vh;
	top: 0;
	border: 0.2em solid black;
	background: linear-gradient(to right,
		#a9030a 0%, #a9030a 2%, #5b0f0f 4%,
		#a9030a 6%, #a9030a 8%, #5b0f0f 10%,
		#a9030a 12%,#a9030a 14%,#5b0f0f 16%,
		#a9030a 18%,#a9030a 20%,#5b0f0f 22%,
		#a9030a 24%,#a9030a 26%,#5b0f0f 28%,
		#a9030a 30%,#a9030a 32%,#5b0f0f 34%,
		#a9030a 36%,#a9030a 38%,#5b0f0f 40%,
		#a9030a 42%,#a9030a 44%,#5b0f0f 46%,
		#a9030a 48%,#a9030a 50%,#5b0f0f 52%,
		#a9030a 54%,#a9030a 56%,#5b0f0f 58%,
		#a9030a 60%,#a9030a 62%,#5b0f0f 64%,
		#a9030a 68%,#a9030a 70%,#5b0f0f 72%,
		#a9030a 74%,#a9030a 76%,#5b0f0f 78%,
		#a9030a 80%,#a9030a 82%,#5b0f0f 84%,
		#a9030a 86%,#a9030a 88%,#5b0f0f 90%,
		#a9030a 92%,#a9030a 94%,#5b0f0f 96%,
		#a9030a 98%);
}


.inner {
	background: rgb(255,255,255);
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
}

#stage {
	z-index: 0;
	overflow: hidden;
	background: rgb(21,21,21);
	position: absolute;
	bottom: 0;
	height: 300px;
	left: 0;
	width: 100%;
	#clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%);
	clip-path: polygon(25% 70%, 75% 70%, 100% 100%, 0% 100%);
	background: rgb(0,0,0);
	background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(32,32,32,1) 50%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(32,32,32,1) 50%, rgba(0,0,0,1) 100%);
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(32,32,32,1) 50%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); 
}
#sidel {
	z-index: 0;
	background: rgb(12,12,12);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	clip-path: polygon(0 0, 50% 5%, 50% 100%, 0% 100%);
	background: rgb(10,10,10);
	background: -moz-linear-gradient(270deg, rgba(10,10,10,1) 0%, rgba(32,32,32,1) 100%);
	background: -webkit-linear-gradient(270deg, rgba(10,10,10,1) 0%, rgba(32,32,32,1) 100%);
	background: linear-gradient(270deg, rgba(10,10,10,1) 0%, rgba(32,32,32,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0a0a0a",endColorstr="#202020",GradientType=1);
}
#sider {
	z-index: 0;
	background: rgb(12,12,12);
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 50%;
	clip-path: polygon(50% 5%, 50% 100%, 100% 100%, 100% 0);
	background: rgb(10,10,10);
	background: -moz-linear-gradient(90deg, rgba(10,10,10,1) 0%, rgba(32,32,32,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(10,10,10,1) 0%, rgba(32,32,32,1) 100%);
	background: linear-gradient(90deg, rgba(10,10,10,1) 0%, rgba(32,32,32,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0a0a0a",endColorstr="#202020",GradientType=1); 
}





#overlay {
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
}

#overlay > div {
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 1em;
	min-width: 90%;
	font-size: 20pt;
	border: 5px solid #111;
	border-radius: 10px;
	background: rgb(255,255,255);
	background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,244,194,1) 100%);
	background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,244,194,1) 100%);
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,244,194,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#fff4c2",GradientType=1); 
}


@media screen and (min-width: 639px) {
	#overlay > div {
		display: none;
	}
}
@media screen and (max-width: 639px) {
	* {
		background-color: rgba(0,0,0,0.75);
	}
}


@keyframes finalFadeIn {
	from {
	opacity:0;
	}
	to {
	opacity:1;
	}
}
@-webkit-keyframes finalFadeIn {
	from {
	opacity:0;
	}
	to {
	opacity:1;
	}
}



#final {
	position: absolute;
	z-index: 101;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
	opacity: 0;
}

#final > div {
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 2em;
	min-width: 90%;
	font-size: 20pt;
	border: 5px solid #111;
	border-radius: 10px;
	background: rgb(255,255,255);
	background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,244,194,1) 100%);
	background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,244,194,1) 100%);
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,244,194,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#fff4c2",GradientType=1);
}

#final a:link,
#final a:visited,
#final a:hover,
#final a:active {
	color: #0000ee;
	text-decoration: none;
	background-color: #fff;
}

#audioPopup {
	z-index: 1;
	position: fixed;
	bottom: 10%;
	width: 100%;
	text-align: center;
	left: 50%;
	-moz-animation: btnFade 3s ease-in 6s forwards;
	-webkit-animation: btnFade 3s ease-in 6s forwards;
	-o-animation: btnFade 3s ease-in 6s forwards;
	animation: btnFade 3s ease-in 6s forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity:1;
}
#audioPopup > div {
	background-color: #fff;
	width: 200px;
	border: 3px solid #222;
	border-radius: 5px;
	color: #000;
	padding: 1em;
	vertical-align: middle;
	text-align: center;
	transform: translate(-50%, 0);
}

@keyframes btnFade {
	to {
	opacity:0;
	}
}
@-webkit-keyframes btnFade {
	to {
	opacity:0;
	}
}







#scene {
	position: fixed;
	top: 10%;
	right: 12%;
	bottom: 12%;
	left: 12%;
	overflow: hidden;
	height: auto;
	z-index: 0;
	border: 10px solid rgba(10,10,10,0.2);
	background: rgb(32,32,32);
	background: -moz-radial-gradient(circle, rgba(32,32,32,1) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-radial-gradient(circle, rgba(32,32,32,1) 0%, rgba(0,0,0,1) 100%);
	background: radial-gradient(circle, rgba(32,32,32,1) 0%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#202020",endColorstr="#000000",GradientType=1);
	object-fit: cover;
}


.video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

video {
	width: 100%;
	height: auto;
	max-height: 100%;
	background-size: cover;
	object-fit: cover;
}


.curtain {
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	-o-animation-play-state:paused;
	animation-play-state:paused;
}