@font-face {
    font-family : Effra-Light;
    src : url(fonts/effra-light.woff);
}

body{
	background: #000 center center fixed;
	background-size:130% auto;
	font-family: Effra-Light, Arial;
	margin:0;
	overflow: hidden;
}
body.portrait{
	background:#000 center center;
	background-size:auto 120%;
}
#bgStaticBlock{
	height:100%;
	width:100%;
	position:relative;
	z-index:0;	
}
.filter,
.filters_container,
.filters_container img,
#helpScreen,
.helpScreenVR,
.menu-VRcont,
#splashScreen,
#OrientationWarning,
#PutOnGoggles,
#sizeWarning,
#LoadingResources{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	display:block;  
}

.audio{
	
}
.hotSpotContent{
	display:none;	
}
/* Orientation Warning Screen, Not absolutely necessary, but helpful to know it's doable*/
#sizeWarning,
#OrientationWarning,
#PutOnGoggles,
#LoadingResources{
	z-index:1; 
	display:none;
}
#sizeWarning{
	background:#000;
	z-index:3000;
}
#sizeWarning h1{
	color:#fff;
	font-size:20px;
	padding:20px 18%;
	width:64%; 
	text-align:center;
	max-width:100%;
}
#LoadingResources{
	background:rgba(0,0,0,.4);
}
#LoadingResources h1{
	font-size:100px;
	font-weight:300;
	display:none;	
}
#OrientationWarning h1,
#LoadingResources h1{
	color:#fff;
	width:50%; 
	padding:30% 25%;
	text-align:center;
}
#OrientationWarning h1{
	width:70%; 
	padding:25% 15%;	
	font-size:25px;
}
#PutOnGoggles h2,
#OrientationWarning h1 small{
	display:block;
	font-size:16px;
}
#PutOnGoggles{
	background:#000;
	z-index:3000;
}
#PutOnGoggles h2{
	font-size:24px;
	padding:30px 0;
	text-align:center;
	color:#fff;	
	display:block;
}
#PutOnGoggles h2 .main{
	width:300px;
	margin: auto auto;	
}
#PutOnGoggles h2 small{
	font-size:18px;
	line-height:22px;
	display:block;
	padding:0 20px;
	max-width:480px;
	margin:5px auto;
}
#PutOnGoggles h2 img{
	height:70px;
	display:block;
	margin:18px auto;	
}
.info_overlay{
	position:absolute;
	width:88%;
	padding:21px 7% 21px 5%;
	top:0;
	left:0;  
	display:block;
	background: rgba(255,255,255,.8);
	z-index:900;
	text-align:left;
	cursor:pointer;
}
.info_overlay .txt{
	font-size:16px; 
	color:#000; 
	min-height:20px;
	padding-right:60px;
	display:block;
}

.info_overlay .x{
	position:absolute;
	right:30px;
	top:21px;
	height:27px;
	width:27px;
	background: url(images/closeInfo.png) no-repeat;
	background-size: 27px 27px;
}
.info_overlay{display:none;}
.vr-tip .info_overlay .x{
	display:none;
}
.vr-tip .info_overlay{
	width:90%; 
	padding:21px 5% 21px 5%;
}

#splashScreen{
	z-index:500;
	background:rgba(0,0,0,.85);
}
#helpScreen,
.helpScreenVR{
	background: rgba(0,0,0,.8);
	color:#fff;
	z-index: 902;
	cursor:pointer;
	display:none;
}
.sect{
	max-width:300px;
	text-align:right;
	float:right;
	clear: both;
	margin-bottom:45px;
}
.sect h2{
	font-weight:500;text-transform:uppercase;font-size:18px;
}
.sect p{
	font-size:16px;color:#b9b9b8;font-weight:400px;
}

.helpScreenVR{
	z-index: 200;
}
#helpScreen .inner{
	padding:30px 4%;
	width:92%;
}
.helpScreenVR .inner{
	width:1060px;
	position:absolute;
	left:50%;
	margin-left:-530px;
	height:160px;
	top:50%;
	margin-top:-80px;	
}
.helpScreenVR .sect{
	width:180px;
	margin:0 14px;
	text-align:center;
	clear: none;
    float: left;
	display:block;
	height:160px;
}
.helpScreenVR .sect h2{
	font-size:13px;
	margin: 4px 0 2px;
	padding:0;
}
.helpScreenVR .sect p{
	font-size:11px;
	padding: 0;
    margin: 2px 0;
}
.helpScreenVR .homeHelpBTN{
	margin-top:60px;	
}

.continueBtn{
	font-size:13px;
	lin-height:20px;
	height:20px;
	padding:10px;
	border:1px solid #fff;
	text-transform:uppercase;
	text-align:center;
	display:block;
	width:120px;
	margin-top:50px;
}

.intro{
	max-width:1080px;
	width:92%;
	height:400px;
	position:relative;
	margin: 0 auto;
	padding:28px 0;
}
.attrlogos{
	width:100%;
	height:41px;
	background: url(images/logos_Transitions.svg) center center no-repeat;
	margin-top:30px;
	position:relative;
	text-align:center;
}
.tr_lnk,
.dv_lnk{
	position:absolute;
	width:50%;
	height:100%;
	display:block;
	border:none;
	outline:none;
	top:0;	
}
.dv_lnk{
	left:0;
	display:none;
}
.tr_lnk{
	left:55%;
}
.attrlogos .fb-share-button{
	margin-top:48px;
}
.twitter-button-static{
	text-indent:-5000px;
	display:inline-block;
	text-align:left;
	height:20px;
	width:60px;
	background: url(images/tweetButton.png) no-repeat;
	background-size:100% auto;
	margin-right:20px;
	margin-top:5px;
}
.twitter-button-static:hover{
	opacity:.9;	
}
.twitter-tweet-button{
	margin-top:5px;
}

h1{
	margin:0;
}
h1 img{
	max-width:100%;	
	max-height:200px;
}
.intro p{
	color:#828181;
	color:#fff;
	font-family: Effra-Light, Arial;
	font-style: normal;
	font-weight: 400;
	max-width:660px;
	font-size:14px;
	margin:0;
	padding:5px 0 55px;
	width:100%;
}
.vrBtn,
.exploreBtn{
	font-family: Effra-Light, Arial;
	font-style: normal;
	font-weight: 300; /* This should be serving Gotham Light. So, I need one new font. */
	text-transform:uppercase;
	text-align:center; 
	display:block;
	float:left;
	color:#fff;
	width:110px;
	height:13px;
	line-height:13px;
	padding: 22px;
	padding-top: 25px !important;
	font-size:16px;
	border:1px solid #e7e7e7; /* inner border 1px solid #868584 (box shadow?)*/
	cursor:pointer;
	background:rgba(255,255,255,0);
	margin-right:8px;
	letter-spacing: 0.6px;
}
.vrBtn{
	height: 22px;
	padding: 13px 22px;	
	font-size:16px;
	line-height:15px;
}
.vrBtn:hover,
.exploreBtn:hover{
	background:rgba(231,231,231,1);
	color:#2c2b2b;
}
.startButtons{
	height:58px;	
}

.anim{
	-webkit-transition: all ease-out .2s;
	-moz-transition: all ease-out .2s;
	-ms-transition: all ease-out .2s;
	-o-transition:all ease-out .2s;
	transition: all ease-out .2s;
}


.activityBar{ position:absolute;bottom:0;height: 100%; width:100% }
.condition-menu{ 
	position:absolute;
	top:0;left:0;
	width:92%;
	height:88%;
	padding:6% 4%;
	background: rgba(0,0,0,.85);
	z-index:900;
	display:none;
}
.condition-menu .mainrow .btn{
	display:block;
	color:#a09f99;
	/*height:22px;*/
	padding:10px 0;
	cursor:pointer;
	font-weight: 300;
	text-transform: uppercase;
	text-align:right;
	font-size: 17px;
	letter-spacing:1.2px;
}
.condition-menu span{
	display: inline-block;
	padding-bottom:4px;
}
.condition-menu .active span{
	padding-bottom:3px;
	border-bottom:1px solid #a09f99;
}
.exitmenu{
	position:absolute; 
	bottom:20px; 
	right:4%;
	height:30px;
	width:30px;	
	cursor:pointer;
}
.returnhome{
	position:absolute; 
	bottom:20px; 
	right:4%;
	margin-right:50px;
	height:30px;
	width:30px;	
	cursor:pointer;
}
.returnhome img,
.menubutton img,
.exitmenu img{
	width:100%;	
}
.helpbutton, .menubutton, .homebutton, .volumebutton{
	position:absolute;
	bottom:0;
	z-index:901;
	cursor:pointer;
}
.helpbutton{
	right:50%;
	margin-right:0;
	width:60px;
	height:60px; 
	background:#2b2b2b url(images/graphic_helpBtn.png) center center no-repeat;
	display:block;
}
.homebutton{
	right:50%;
	margin-right:-60px;
	height:60px;
	width:60px;
	display:block;
	background:rgba(0,0,0,.7) url("images/home_icon.png") no-repeat scroll center center;
	background-size:45px 45px;
}
.volumebutton{
	right:50%;
	margin-right:-120px;
	height:60px;
	width:60px;
	display:block;
	background:rgba(0,0,0,.3) url("images/soundOn.png") no-repeat scroll center center;
	background-size:39px 36px;	
}
.volumeoff{
	background-image:url("images/soundOff.png");	
}
.menubutton{
	right:50%;
	height:20px;
	width:30px;
	margin-right:60px;
	padding:20px 15px;
	background:rgba(231,231,231,.75);
	display:block;
}



.menu-VRcont{ display:none; }
.vr-condition-menu{ position:absolute;left:50%;top:57%;margin-top:-30px;margin-left:-350px;width:700px;height:40px;padding:10px 15px;z-index:38;text-align:center; background: rgba(0,0,0,.8); border-radius:80px;font-size:11px; }
.vr-condition-menu .btn{ display:inline-block;width:14%;margin:0 .8%;color:#fff;text-transform:uppercase;height:40px;overflow:hidden; }
.vr-condition-menu .shorter{width:10%;}
.vr-condition-menu .btn span{display:block; line-height:14px;height:28px; padding:6px 0;}
.vr-condition-menu .single span{height:14px; padding:13px 0;}
/*.vr-condition-menu .btn{ display:inline-block;width:11%;height:32px;line-height:16px;padding: 5px 2%;margin:0 1%;color:#fff;text-transform:uppercase; }
.vr-condition-menu .mainrow .single{height:20px;line-height:20px;padding: 10px 2%;}*/
.vr-condition-menu .centerSelection{position:absolute;top:0;height:40px;border:1px solid #eee;background:rgba(255,0,0,.2);width:60px; }
/*.vr-condition-menu .btnFocused{ color:#89bd1b;}*/
.vr-condition-menu .btnFocused span{ border-bottom:1px solid #fff;}

.filters_container img,
.filters_container{display:none;}
.filters_container img{
 	z-index:199; 
}
#sceneFiltersLeft .filters_container img,
#sceneFiltersRight .filters_container img{
	z-index:38;	
}
.filters_container .presbyopia{
	width:auto;
	max-width:100%;
	max-height:100%;
	top:auto;
	bottom:0;
	left:auto;
	right:0;
}  
.presbyPhoneCon{
	width:100%;
	height:100%;	
	position:absolute;
	bottom:0;
	right:0;
	z-index: 196;
}
.presbyPhoneWindow{
	position:absolute;
	top:41.61%;
	left:38%;
	width:20.8333%;
	height:36.305%;
	overflow:hidden;
}
.presbyPhoneCon .presbyPhoneWindow img{
	width:1500px;
	height:750px;	
	max-height:none;
	max-width:none;
	bottom:auto;
	right:auto;
}
.phoneScene{
	position:relative;
	width:100%;
	height:100%;
	z-index:2;	
}

.desktop-only{
	display:none;
}
.vr-only{ 
	display:none;	
}
.vrScene .vr-only{
	display:block;	
}
.vrScene .not-vr,
.vrScene .desktop-only, .vrScene .mobile-only{
	display:none;
}

.fb_iframe_widget span,
.fb_iframe_widget iframe{
	min-height:20px !important;
	min-width:80px !important; 	
}
.also-p p{
	color:#fff;margin-top:20px;
}

/* If it's too small display the sizeWarning screen */
@media (max-width: 300px) {
	#sizeWarning{	display:block;}
}
@media (max-height: 220px) {
	#sizeWarning{	display:block;}
}
@media (max-width: 400px) and (max-height: 336px){
	#sizeWarning{	display:block;}
}
@media (max-width: 460px) and (max-height: 245px){
	#sizeWarning{	display:block;}
}




/* Default 960 view is for min-height:700px;*/
@media (max-width: 380px){
	.vrBtn,.exploreBtn{padding-left:12px;padding-right:12px;margin-right:2px;}
	.vrBtn{margin-right:0;/*float:right;*/}
}
@media (max-width: 720px){
	.filters_container .presbyopia{
		height:auto;
		max-height: none;
	}
	.also-p p{padding:0;}
}


@media (max-height: 630px){
	.attrlogos{ margin-top:0; }
}
@media (max-height: 410px){
	.attrlogos{ width:280px;}
}
@media (max-height: 520px){
	.attrlogos{ max-width:240px; height:36px; background-size: 100% auto;}
}
@media (max-height:680px) and (max-width:720px){
	.attrlogos{ position:relative; }
}
@media (min-width: 960px) and (min-height: 690px){
	.attrlogos{ position:absolute;bottom:88px;right:0;width:280px; }
}
@media (max-width: 632px) and (max-height:340px){
	.attrlogos{ width:44%; min-width: 160px; background-size:100%; }
}


/* This setting is for landscape mobile.*/
@media (min-width: 340px) and (max-height:450px){
	
}

@media (max-width: 790px) and (max-height:458px){
	/*.sect{height:240px;max-width:240px;margin:0 14px;text-align:left;float:left;clear:none;} display:inline-block; */
	.sect{ width:30%;margin:0 2% 0 1%;clear:none;float:left;text-align:left; }
}
@media (min-width: 660px) and (max-height:700px){
	.intro p{ font-size:15px;padding-bottom:30px; }
}
@media (max-width: 660px) and (min-height:500px){
	.intro{ padding-top:70px; }
}
@media (max-height:730px){
	.sect{ margin-bottom:18px; }
	.sect h2{ margin:6px 0 2px;padding:0; }
	
	.sect img{ height:30px;}
	#helpScreen .exitmenu{ right:4%;bottom:10px;}
	#helpScreen .returnhome{ bottom:10px; }
}
@media (max-height:420px) and (max-width: 350px){
	.sect{ margin-left:0.5%;margin-right:0.5%;width:32%; }
	.sect h2{font-size:14px;}
}



/* FOR VERY SMALL SCREENS */
@media (max-height: 620px){
	h1 img { max-height: 170px;}
}
@media (max-height: 560px){
	.also-p p{ padding-top: 5px;margin-top: 10px; clear: both;}
	.intro p{ padding-bottom:10px; }
	.startButtons { height:50px;}
	.intro{ padding:18px 0;}
}
@media (max-height: 530px){
	h1 img{ max-height:160px; }
	.intro p{ font-size:14px; padding-bottom:15px; }
	.intro{ height:300px; }
	 
	.sect p{ font-size:14px; margin:4px 0; }
	.sect img{ height:26px;}
	.change img{ height:20px;}
	.sect{ max-height:180px;}
	.condition-menu .mainrow .btn{ padding:6px 0; }
}

@media (max-height: 530px) and (max-width:620px){
	.vrBtn, .exploreBtn{ padding:8px 10px;font-size:14px;height:30px;}
	.exploreBtn{ line-height:33px;}
	
	.vrBtn, .exploreBtn{ font-size: 12px;width: 90px; padding:6px 4px;}
	.exploreBtn{margin-right:4px;}
	.startButtons { top:108px;}	
	.also-p p{margin-top: 8px;}
}

@media (max-height: 340px) and (min-width:400px){
	.intro{ width: 96%; /*padding: 168px 0 0;*/}
	h1 img { max-height:90px;max-width:100%;}
	h1{ position:absolute;top:15px;left:0;max-width: 45%;}
	.introP{ position:absolute;top:15px;right:0;width:45%;}	
	.intro p{ padding-top:0;font-size: 12px; line-height: 14px;}
	.startButtons { position:absolute;top:130px;}
	.attrlogos{  position:absolute; right:0; bottom:5px; }
	.intro{ height: 190px;}
	.also-p p{ position:absolute; right:0; bottom:40px; width:45%; }
}
@media (max-height: 450px) and (max-width:330px){
	.intro p { font-size: 12px;line-height:14px;}
	.intro h1 img { height: 90px; margin-bottom:-5px;}
	.attrlogos{ bottom:0; /* width:180px; height:30px; background-size: 100% auto;*/}
}
@media (min-width: 330px) and (max-height:440px){
	h1 img {    max-height: 100px; }
	.intro p {  font-size: 13px;}
	.also-p p {   margin-top: 0;padding-bottom: 5px;}
}
@media (max-height: 350px){
	.condition-menu .mainrow .btn{  padding: 2px 0; }
	.exitmenu{height:22px;width:22px; bottom: 10px;}
}
@media (max-width: 460px) and (max-height: 380px){
	.intro { height: 220px;}
}

@media (min-width: 628px) and (max-height: 340px){
	.attrlogos{right:5%;}
	.intro {   height: 180px;}

}


@media (min-height: 520px) and (min-width:520px){
	.intro{ padding-top:50px;}
	.intro p{ font-size:16px;} 
	h1{ padding:12px 0;}
	.also-p p{padding-bottom:6px;}
}
@media (min-height: 520px){
	.condition-menu .mainrow .btn{font-size:22px;line-height:19px;height:auto; padding: 17px 0;}	
}
@media (min-height: 680px){
	.intro{ height:550px; }
}
@media (min-height: 790px){
	.intro{ padding-top:88px;padding-bottom:88px;height:570px;}
	h1 img{ max-height:300px;height:auto;}
}
@media (min-height: 830px){
	.intro{ padding-top:150px;} 
}
@media (min-width: 960px) and (min-height: 330px){
	.intro{ padding-left:110px;width:84%;}
}


@media (min-width: 800px){
	.vrBtn{ display:none; }
	.desktop-only{	display:block;}
	.mobile-only{	display:none;}
}
/*@media (max-width: 500px) and (min-height: 360px){
	body{ background-size:auto 100%;}
}
@media (min-width: 900px){
	body{ background-size:170% auto;}
}
@media (min-width: 1140 px) and (max-height: 700px){
	body{ background-size:110% auto;}
}*/


@media (min-width: 790px){
	.sect{height:240px;max-width:240px;margin:0 14px;text-align:left;float:left;clear:none;}/* display:inline-block; */
	#helpScreen .inner{ text-align:center; padding:0 0;position:absolute;top:50%;left:50%;margin-top:-120px;width:780px;margin-left: -390px; }
	#helpScreen .exitmenu{ display: block; bottom: 40px; right: 40px;}
	#helpScreen .returnhome{ bottom:40px;}
}

@media (min-width: 900px){
	.activityBar {height:80px;}
	.exitmenu, .menubutton{display:none;}
	
	.condition-menu{ height:100%;width:100%;z-index:900; display:block;padding:0;}
	.mainrow{ padding:0 80px 0 0;}
	.condition-menu .mainrow .btn{float:left;width: 13.3%;padding:19px 0.5%;padding-top:25px !important;height:42px;text-align:center;color:#fff;font-size:12px;}
	.condition-menu .mainrow .shorter{width: 10.2%;}
	.condition-menu .mainrow .single{height:28px;padding: 26px 2%;padding-top: 32px !important;}
	.condition-menu span{text-align:center;}
		
	.helpbutton{
		right:0;
		bottom:80px;
		margin-right:0;
		height:80px;
		width:80px;
	}
	.homebutton{
		bottom:0;
		right:0;
		margin-right:0;
		height:80px;
		width:80px;
		background-color:transparent;
		background-size:auto auto;
	}
	.volumebutton{
		bottom:160px;
		height:80px;
		width:80px;
		right:0;
		margin-right:0;	
	}
	.menubutton{
		bottom:160px;
		right:0;
		margin-right:0;
		height:30px;
		width:40px;
		padding:25px 20px;
	}
}

@media (max-width: 899px){
	.condition-menu .mainrow .btn br{ display:none; }
}
@media (min-width: 1080px){
	.condition-menu .mainrow .btn{ font-size:14px; }
}
@media (min-width: 1400px){
	.condition-menu .mainrow .btn{ font-size:16px; }
} 

/*
//////////////////////////////////
//ORIGINAL TEST STYLES, RETAIN ONLY AS NECESSARY.
//////////////////////////////////
*/

#webglviewer {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  cursor:pointer;
  z-index:1;
}
canvas{
  width: 100%;
  height: 100%;
}
#tour_layer1, #tour_layer2{
  width: 100%;
  height: 100%;
  position:absolute;
  z-index:2;	
}
.target,
.displayBox, .displayBox2{
  position:absolute;
  left:10%;
  top:20%;
  z-index:40;
  display:block;
  height:80px;
  width:200px;
  max-width:70%;
  border:3px solid #fff;
  background:transparent;
  padding:15px;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  font-family:Arial, Helvetica, sans-serif;	
}
.displayBox2{
	top:5%;
	height:40px;
	padding:2px;
	width:500px;
	font-size:16px;
	color:#FF9999;
	z-index:41;
}
.target{
  left:50%;
  top:50%;
  height:50px;
  width:50px;
  margin-left:-26px;
  margin-top:-26px;
  padding:0;
  border-radius:100%;
  border:1px solid rgba(255,255,255,.25);  
  display:none;
  z-index:240;
}
.targetR{
  left:75%;
  /*left: 77%;
  left: 75.85%;*/
}
.targetL{
  left:25%;
  /*left:22.5%;
  left:22.25%;*/
}
.target .crosshair{
	margin:9px auto;
	height:32px;
	width:32px;
	border-radius:100%;
	border:1px solid rgba(255,255,255,.5);
	display:block;
	opacity:.81;
}
.delayCirc{
	display:none;
	position:relative;
	height:100%;
	width:100%;
	overflow:hidden;
	border-radius:100%;
}
.progbar{
	position:absolute;
	bottom:0;
	height:0%;
	width:100%;  
	display:block;
	background:rgba(255,255,255,.8);
}



@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotatingrev /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes rotatingrev {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes scaleloopa {
    0%   {top:0;left:0;width:100%;height:100%;}
    28%  {top:-5%;left:-5%;width:110%;height:110%;}
    63%  {top:5%;left:5%;width:90%;height:90%;}
    100% {top:0;left:0;width:100%;height:100%;}
}

@keyframes scaleloopb {
    0%   {top:5%;left:5%;width:90%;height:90%;opacity:1;}
    28%  {top:0;left:0;width:100%;height:100%;opacity:.8;}
    100% {top:5%;left:5%;width:90%;height:90%;opacity:1;}
}

@keyframes scaleloopc {
    0%   {top:-2.5%;left:-2.5%;width:105%;height:105%;}
    63%  {top:0;left:0;width:100%;height:100%;}
    100% {top:-2.5%;left:-2.5%;width:105%;height:105%;}
}

.scaleAnimA {
  -webkit-animation: scaleloopa 4s linear infinite;
  -moz-animation: scaleloopa 4s linear infinite;
  -ms-animation: scaleloopa 4s linear infinite;
  -o-animation: scaleloopa 4s linear infinite;
  animation: scaleloopa 4s linear infinite;
}
.scaleAnimB {
  -webkit-animation: scaleloopb 7s linear infinite;
  -moz-animation: scaleloopb 7s linear infinite;
  -ms-animation: scaleloopb 7s linear infinite;
  -o-animation: scaleloopb 7s linear infinite;
  animation: scaleloopb 7s linear infinite;
}
.scaleAnimC {
  -webkit-animation: scaleloopc 4s linear infinite;
  -moz-animation: scaleloopc 4s linear infinite;
  -ms-animation: scaleloopc 4s linear infinite;
  -o-animation: scaleloopc 4s linear infinite;
  animation: scaleloopc 4s linear infinite;
}


.rotatingrev {
  -webkit-animation: rotatingrev 28s linear infinite;
  -moz-animation: rotatingrev 28s linear infinite;
  -ms-animation: rotatingrev 28s linear infinite;
  -o-animation: rotatingrev 28s linear infinite;
  animation: rotatingrev 28s linear infinite;
}
.rotating {
  -webkit-animation: rotating 22s linear infinite;
  -moz-animation: rotating 22s linear infinite;
  -ms-animation: rotating 22s linear infinite;
  -o-animation: rotating 22s linear infinite;
  animation: rotating 22s linear infinite;
}
.filters_container .image_dist, .filters_container .color_dist{
	height:60%;
	width:50%;
	top:20%;
	left:25%;
}
.filters_container .image_dist2,
.filters_container .image_dist3,
.filters_container .image_dist4,
.filters_container .image_dist5,
.filters_container .image_dist6,
.filters_container .image_dist7{
	display:none;
}
@media screen and (orientation:portrait) {
 .VRrunning #OrientationWarning{
	display:block;
	opacity:1;
	z-index:1000;  
	background:#000;
  }
}
@media (orientation:portrait) {
 .VRrunning #OrientationWarning{
	display:block;
	opacity:1;
	z-index:1000;  
	background:#000;
  }
}
.VRrunning.orPortrait #OrientationWarning,
.VRrunning.portrait #OrientationWarning{
	display:block;
	opacity:1;
	z-index:1000;  
	background:#000;
}

.vr-controls,.non-vr-controls{display:none;}

.vr-controls .left-half,
.vr-controls .right-half{
	position:absolute;
	top:0;	
	width:50%;
	height:100%;
	overflow:hidden;
}
.vr-controls .left-half{
	left:0;
}
.vr-controls .right-half{
	left:50%;
}

@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-moz-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-o-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
.uil-ripple-css {
  background: none;
  position: absolute;
  top:40px;
  right:40px;
  width: 200px;
  height: 200px;
}
.uil-ripple-css div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 50%;
  border-width: 12px;
  border-style: solid;
  -webkit-animation: uil-ripple 2s ease-out infinite;
  animation: uil-ripple 2s ease-out infinite;
}
.uil-ripple-css div:nth-of-type(1) {
  border-color: #d1d1d1;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.uil-ripple-css div:nth-of-type(2) {
  border-color: #ffffff;
}