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

/*------------------------------------------------*/
/*------------------------------------------------*/


#outerdiv1, #outerdiv2, #outerdiv3 {
	z-index: -99;
	transition: opacity 0.5 ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
	}
#outerdivReel {
	z-index: 39;
	/*transition: opacity 0.5 ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;*/
	}
.outerwrapper {
	position:absolute;
	width: 90%;
	height: 100%;
	left: 5%;
	margin-left: 0px;
	top: 33%;
	margin-top: -20px;
	
	overflow-y: visible;
	}
.outerwrapperPast {
	position:absolute;
	width: 90%;
	height: 100%;
	left: 5%;
	margin-left: 0px;
	top: 12%;
	margin-top: 160px;
	opacity: 0;
	overflow-y: visible;
	}
.wrapper {
	position:absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	margin-top: 0;
	left: 0;
	padding-bottom: 20px;
	margin-left: 0px;
	max-width: 900px;
	}
.videocontent {
	width:100%;
	max-width: 900px;
	margin-bottom: 20px;
	}

.hidetwo {
opacity: 0;
pointer-events: none;
		  animation: fadeOut ease 0.3s;
  -webkit-animation: fadeOut ease 0.3s;
  -moz-animation: fadeOut ease 0.3s;
  -o-animation: fadeOut ease 0.3s;
  -ms-animation: fadeOut ease 0.3s;	
}

.seetwo {
	opacity: 1;
	pointer-events: all;	
	  animation: fadeIn ease 0.3s;
  -webkit-animation: fadeIn ease 0.3s;
  -moz-animation: fadeIn ease 0.3s;
  -o-animation: fadeIn ease 0.3s;
  -ms-animation: fadeIn ease 0.3s;
	}
	
	@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

/*@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}
}*/




	@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

/*@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}
}*/





#videowhiteback {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	margin-top:0px;
	left: 0px;
	margin-left: 0px;
	background-color:rgba(255,255,255, 1);
	z-index: 1;
	/*transition: opacity 0.3 ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;*/
	}	
	
.greybandM {
position: fixed;
	top: 0px;
	 left: 0px;
	width: 100%;
	height: 63px;
	background-color: rgba(0,0,0,0.3);
}




/*...............................................................*/
@media only screen and (min-width: 667px) {
	
.outerwrapper {

	width: 56%;
	height: 100%;
	min-width: 300px;
	max-width: 420px;
	left: 20%;
	margin-left: -30px;
	top: 12%;
	margin-top: 20px;

	}
.outerwrapperPast {
	width: 56%;
	height: 100%;
	min-width: 300px;
	max-width: 420px;
	left: 20%;
	margin-left: -60px;
	top: 10%;
	margin-top: 60px;
	opacity: 0;
	}
.wrapper {
	position:absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	margin-top: 0;
	left: 0;
	padding-bottom: 20px;
	margin-left: 0px;
	max-width: 900px;
	}
.greybandM {
	height: 49px;
}
	
		
}/* width 667*/



/*...............................................................*/
@media only screen and (min-width: 768px) {


@media  (min-height: 480px) {
	

.outerwrapper {

	width: 55%;
	left: 0px;
	margin-left: 310px;
	min-width: 430px;
	max-width: 630px;
	top: 10%;
	margin-top: 145px;

	}
.outerwrapperPast {
	width: 55%;
	left: 0px;
	margin-left: 310px;
	min-width: 430px;
	max-width: 630px;
	top: 8%;
	margin-top: 175px;
	opacity: 0;
	}

.wrapper {
	position:absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	margin-top: 0;
	left: 0;
	padding-bottom: 20px;
	margin-left: 0px;
	max-width: 900px;
	}
	
.greybandM {
	visibility: hidden;
}
	
}/*480 height*/
	
	
	
@media  (min-height: 720px) {
	
.outerwrapper {

	width: 55%;
	left: 0px;
	margin-left: 310px;
	min-width: 430px;
	max-width: 700px;
	top: 10%;
	margin-top: 145px;

	}
.outerwrapperPast {
	width: 55%;
	left: 0px;
	margin-left: 310px;
	min-width: 430px;
	max-width: 700px;
	top: 7%;
	margin-top: 193px;
	opacity: 0;
	}
	}/*720 height*/
	
}/*768 width*/



/*...............................................................*/	

@media only screen and (min-width: 1024px) {
.outerwrapper {

	width: 56%;
	height: 100%;
	min-width: 300px;
	max-width: 420px;
	left: 20%;
	margin-left: -30px;
	top: 12%;
	margin-top: 20px;

	}
.outerwrapperPast {
	width: 56%;
	height: 100%;
	min-width: 300px;
	max-width: 420px;
	left: 20%;
	margin-left: -30px;
	top: 10%;
	margin-top: 60px;
	opacity: 0;
	}

	
	@media (min-height: 480px) {
	.outerwrapper {

	width: 40%;
	left: 0px;

	margin-left: 310px;
	min-width: 480px;
	max-width: 780px;
	top: 20%;
	margin-top: 65px;

	}
.outerwrapperPast {
	width: 40%;
	left: 0px;
	margin-left: 310px;
	min-width: 480px;
	max-width: 780px;
	top: 12%;
	margin-top: 150px;
	opacity: 0;
	}
		
	}/*height 480*/
	
@media (min-height: 667px) {
.outerwrapper {
	width: 60%;
	left: 0px;
	margin-left: 310px;
	min-width: 600px;
	max-width: 760px;
	top: 21%;
	margin-top: 40px;

	}
.outerwrapperPast {
	width: 60%;
	left: 0px;
	margin-left: 310px;
	min-width: 600px;
	max-width: 760px;
	top: 20%;
	margin-top: 75px;
	opacity: 0;
	}
	}/*height 520*/
	
/*...............................................................*/	
	}/* width 1024*/

/*...............................................................*/