@charset "utf-8";
/* CSS Document */

#VidWrapper{
	
	margin-top: 40px;
	background-image: url("../../assets/img/FeltBackground.fw.png");
	background-repeat: repeat;
	max-height: 800px;
	border: solid 3px yellow;
}

#player {
		margin-top: 0px;
    	float:left;
    	padding:1em 1em .5em;
		height: 732px;
		background-repeat: repeat;
		min-width: 1080px;
		min-height: 732px;
	}
    video {
    	width:100%;
    	height:88%;
		background-repeat: repeat;
    }
	
	/*#video1{
		margin-top: -65px;
	}*/

	/*#videoelement{
		margin-top: -45px;
		z-index: 5000;
	}*/

.classUpperBck{
	color: white;
	font-size: 26px;
	margin-top: -90px;
}

.classUpperText{
	color: white;
	font-size: 26px;
	margin-top: 40px;
}


/*Curtain ==================================================================================*/	
		
	#rnOuter {
	  filter: brightness(100%);
	  overflow: hidden;
	  position: relative;
	  margin-top: -1px;
	  height: 660px;
	  border-left: inset 3px Black;
	  border-right: inset 3px Black;
	  border-bottom: inset 2px Black;
	  background-color: black;
	}

	#rnInner {
	  width: 120%;
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  margin: auto;
	  transform-style: preserve-3d;
	  transition: transform 6s ease;
	  transform-origin: -120% top;
	}

	.rxWorld{
	max-height: 800px;
	padding-left: 30px;
	padding-right: 30px;
	
	}
	
	.rnUnit {
	  width: 10%;
	  height: 800px;
	  background: repeating-linear-gradient(to left, hsl(0, 80%, 50%) 4vw, hsl(0, 80%, 30%) 8vw, hsl(0, 80%, 70%) 10vw);
	  background-size: 100% 100%;
	  display: inline-block;
	  transform-origin: 0 0%;
	  transform: rotate(3deg);
	  -webkit-animation: rnUnit 2s ease infinite;
			  animation: rnUnit 2s ease infinite;
	}
	@-webkit-keyframes rnUnit {
	  50% {
		transform: rotate(-3deg);
	  }
	}
	@keyframes rnUnit {
	  50% {
		transform: rotate(-3deg);
	  }
	}
	.rnUnit:nth-child(1) {
	  -webkit-animation-delay: -0.1s;
			  animation-delay: -0.1s;
	}
	.rnUnit:nth-child(2) {
	  -webkit-animation-delay: -0.2s;
			  animation-delay: -0.2s;
	}
	.rnUnit:nth-child(3) {
	  -webkit-animation-delay: -0.3s;
			  animation-delay: -0.3s;
	}
	.rnUnit:nth-child(4) {
	  -webkit-animation-delay: -0.4s;
			  animation-delay: -0.4s;
	}
	.rnUnit:nth-child(5) {
	  -webkit-animation-delay: -0.5s;
			  animation-delay: -0.5s;
	}
	.rnUnit:nth-child(6) {
	  -webkit-animation-delay: -0.6s;
			  animation-delay: -0.6s;
	}
	.rnUnit:nth-child(7) {
	  -webkit-animation-delay: -0.7s;
			  animation-delay: -0.7s;
	}
	.rnUnit:nth-child(8) {
	  -webkit-animation-delay: -0.8s;
			  animation-delay: -0.8s;
	}
	.rnUnit:nth-child(9) {
	  -webkit-animation-delay: -0.9s;
			  animation-delay: -0.9s;
	}
	.rnUnit:nth-child(10) {
	  -webkit-animation-delay: -1s;
			  animation-delay: -1s;
	}
	.aoTable {
	  display: table;
	  width: 100%;
	  height: 750px;
	  text-align: center;
	}

	#aoTableCell {
	  
	  display: table-cell;
	  vertical-align: middle;
	  transition: color 3s ease;

	}
	#rnOuter:active #rnInner {
	  transform-origin: -120% top;
	  transform: scaleX(0);
	}
	#rnOuter:active #aoTableCell {
	  color: white;
	}
	
/*========================================================================
1200
========================================================================*/

@media (max-width: 1400px) {

#videoelement {
			margin-top: -80px;
		    max-height: 640px;
			}
	
		#VidWrapper{
			min-height: 800px;
		
		}	
	
		
		

.classUpperBck{
	color: white;
	font-size: 26px;
	margin-top: -90px;
}
		
}	
/*============================================================*/	
@media (max-width: 1200px) {
	
		#videoelement {
			margin-top: -80px;
			}
	
		#VidWrapper{
			min-height: 721px;
		
		}	
	
		#rnOuter{
			max-height: 540px;
		}
	
		#rxWorld{
			max-height: 540px;
		}	
	
		.classUpperBck{
			margin-top: 20px;
			padding-bottom: 60px;
			
		}
}	
/*============================================================*/

@media (max-width: 992px) {
	
	.rxWorld{
			min-width: 691px;
		}	
	
	#VidWrapper{
		min-width: 691px;
		margin-left: -80px;
		}	
	
	#rnOuter{
			min-width: 620px;
		}
}
/*============================================================*/

@media (max-width: 768px) { 
	
	.rxWorld{
			min-width: 651px;
		}	
	
	#VidWrapper{
		min-width: 651px;
		margin-left: -134px;
		}	
	
	#rnOuter{
			min-width: 520px;
		}
}
/*============================================================*/

@media (max-width: 670px) { 
	
	.rxWorld{
			min-width: 551px;
		}	
	
	#VidWrapper{
		min-width: 551px;
		margin-left: -82px;
		}	
	
	#rnOuter{
			min-width: 420px;
		}
	
}
/*============================================================*/
@media (max-width: 576px) { 
	
	.rxWorld{
			min-width: 551px;
		}	
	
	#VidWrapper{
		min-width: 551px;
		margin-left: -10px;
		}	
	
	#rnOuter{
			min-width: 420px;
		}
	
}