body,html{width:100%;height:100%; background:#000;}
body,html,a,li,ol,ul,p,h1,h2,h3,h4,h5,h6,p,b,strong,em,i,img,
address,main,nav,header,footer,section,aside,
form,fieldset,input,textarea,select{margin:0;padding:0;}
.fullsize{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	display:block;
	overflow:hidden;	
}
.maintool{
	background:#161616 url(images/bg.jpg) center center no-repeat;
	background-size: 100% 100%;
	overflow:hidden;
	/*during launch*/
}
.blackscreen{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	z-index:700;	
	background: #000;
}

.intro{
	text-align:center;
	position:absolute;
	z-index:800;
	background:url(images/images_CN/placeholder_noplay--Wlogo.jpg) center center no-repeat;
	background-size:100% auto;
}
.intro .no-video,
.intro video{
	z-index:1;
	position:relative;	
	margin:0 auto;
	width:100%;	
	max-height:100%;
	display:inline-block;
	opacity:1;
}
.intro .no-video{
	max-width:100%;	
	width:auto;
}

.widescreen .intro{
	background-size:auto 100%;
}

.start{
	position:absolute;	
	left:50%;
	bottom:8%;
	width: 220px;
	margin-left:-110px;
	z-index:4;
	cursor:pointer;
	display:none;
}


nav .gas_btn{
	-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;	
}

.anim{
	-webkit-transition: all ease-out .4s;
	-moz-transition: all ease-out .4s;
	-ms-transition: all ease-out .4s;
	-o-transition:all ease-out .4s;
	transition: all ease-out .4s;	
}

.grid_circles img{ /*1920 x 1780 */
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-890px;
	margin-left:-960px;	
}
.grid_circles{
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
}


.grid{ /* Figure out how far off center this is, then position the big circles the same way.   356 is half, so its [54] pixels heighter than center    */
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-410px;
	margin-left:-670px;
	height:712px;
	width:1340px;
}
.thegrid{
	position:absolute;
	top:0;
	left:0;	
	z-index:7;
	width:100%;
}
.gas{
	position:absolute;
	top:0;
	left:0;		
	z-index:4;
	display:none;
	width:100%;
}
.medium{
	z-index:5;
}
.low{
	z-index:6;
}



.sim-icon{
	bottom:-206px;	
	/*height:189px;*/
	position:absolute;
	left:0;
	width:100%;
}

.close{
	position:absolute;
	top:2.5%;
	right:4.5%;
	cursor:pointer;
	z-index:49;
}	

nav{
	position:absolute;
	top:0;
	height:100%;
	z-index:40;
	width:227px;
}
nav .shadow{
	position:absolute;	
	z-index:1;
	top:0;
	height:100%;
	width:500px;
}
.sensitivity-nav{
	right:0;
}
.gas-nav{
	left:0;
}
.sensitivity-nav .shadow{
	right:0;
	background:url(images/shadow_rightSide.png) no-repeat;
	background-size:100% 100%;
}
.gas-nav .shadow{
	left:0;
	background:url(images/shadow_leftSide.png) no-repeat;
	background-size:100% 100%;
}
nav .bottom, nav .top{
	width:12px;	
	background-size:100% 100%;	
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
}
nav .bottom{
	background-image:url(images/navsideBottom2.png);
	top:50%;
	height:50%;
}
nav .top{
	background-image:url(images/navsideTop2.png);
	top:0;
	height:50%;
}
.sensitivity-nav .bottom, .sensitivity-nav .top{
	right:0;
}
nav .main{
	width:227px;
	height:618px;
	position:absolute;
	top:50%;	
	z-index:3;	
}
.sensitivity-nav .main{
	/* background: url(images/sensitivityNav_main.png) no-repeat; */
	background: url(images/images_CN/sensitivityNav_main.png) no-repeat;
	margin-top:-309px; /* Adjust this so it's not vertical center, not supposed to be*/
}
.sensitivity-nav .horiztext{
	width:154px;
	height:12px;
	bottom:-27px;
	display:block;
	position:absolute;
	left:30px;
	background: url(images/images_CN/horizontalText.png) no-repeat;
}
.gas-nav .main{
	height:555px;
	/* background: url(images/gasNav_main4.png) no-repeat; */
	background: url(images/images_CN/gasNav_main4.png) no-repeat;
	margin-top:-276px; /* Adjust this so it's not vertical center, not supposed to be*/
}


.gas_btn,
.sens_btn{
	display:block;
	margin:16px auto 17px;
	width:195px;
	height:20px;
	padding:19px 0;
	padding:13px 0;
	cursor:pointer;
	background:rgba(218,218,218,0);	
}
nav .heptane{ margin-top: 94px; }
.gas_btn:hover, .sens_btn:hover{
	background:rgba(218,218,218,.1);	
}
.gas_btn-active, .gas_btn-active:hover,
.sens_btn-active, .sens_btn-active:hover{
	background:rgba(218,218,218,1);	
}
.gas_btn span, .sens_btn span{
	display:block;
	width:195px;
	height:20px;
	background: center center no-repeat;
}
/* nav .heptane span{	background-image: url(images/gasname_heptane.png);} */
nav .heptane span{	background-image: url(images/images_CN/gasname_heptane.png);}
nav .methane span{	background-image: url(images/images_CN/gasname_methane.png);}
nav .methanol span{	background-image: url(images/images_CN/gasname_methanol.png);}
nav .propane span{	background-image: url(images/images_CN/gasname_propane.png);}
nav .ethane span{	background-image: url(images/images_CN/gasname_ethane.png);}
nav .methylatedSpirit span{	background-image: url(images/images_CN/gasname_methylated_spirit.png);}
nav .butane span{	background-image: url(images/images_CN/gasname_butane.png);}
nav .hydrogen span{	background-image: url(images/images_CN/gasname_hydrogen.png);}

.sens_btn{
	margin:42px auto 84px 72px;
	width:125px;
	height:20px;
	padding:19px 0;	
}
.sens_btn span{
	width:125px;
}
nav .viewAll{
	margin-top:80px;
	margin-bottom:60px;
}
nav .viewAll span{	background-image: url(images/images_CN/sensitivitybtns_viewall.png);}
nav .high span{	background-image: url(images/images_CN/sensitivitybtns_high.png);}
nav .medium span{	background-image: url(images/images_CN/sensitivitybtns_medium.png);}
nav .low span{	background-image: url(images/images_CN/sensitivitybtns_low.png);}

@media (max-width: 1800px){
	.close{
		top:1.5%;
		right:3.5%;
		height:24px;
		width:24px;
	}	
}
@media (max-height:580px) and (min-width: 1040px){
 
.widescreen .intro{
	background-position:center -50px ;
	background-size:auto 110%;
}


}
@media (max-height:580px){
	.no-video-vers .start{
		bottom: 7%;
		width: 160px;
		margin-left: -80px;
	}	
}
@media (max-height:600px) and (min-width: 1230px){
	nav{
		background-size:100% 100%;
	}
} 