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;
	display:none;
}

.intro{
	text-align:center;
	position:absolute;
	z-index:800;
	background:url(images/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:-15px;
	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.topnav{
	height:70px;
	width:100%;
	background:#000;
	font-family: 'Bebas Neue', Calibri, sans-serif;
	text-transform:uppercase;
	color:#fff;
}
nav.topnav .msalogo{
	position:absolute;
	left:50px;
	top:10px;
	height:50px;
	width:97px;
	background:url(images/msalogo.jpg) no-repeat;
}


.topnav .center-content{
	font-size:22px;
	color:#565656;
	width:770px;
	margin:15px auto;
	position:relative;
	line-height:25px;
	letter-spacing:1.1px;
}
.topnav .center-content small{
	font-size:22px;
	position:relative;
	top:-5px;
}
.topnav .dropdown .curr,
.topnav .center-content em{
	font-style:normal;
	font-size:32px;
	color:#fff;
}
.topnav .center-content em{
	padding-right:25px;
	line-height:45px;
}
.topnav .dropdown{
	width:220px;
	position:absolute;
	right:0;
	top:0;
	cursor:pointer;
}
.topnav .dropdown .curr{
	display:block;
	overflow:hidden;
	height:32px;
	border:3px solid #009946;
	padding:5px 18px;
	padding-right:48px;
	background: url(images/dropdownarrow.jpg) 95% center no-repeat;
	line-height:35px;
	font-size:32px;
	font-size:23px;
}

.topnav .dropdown ul{
	background:#009946;
	color:#fff;
	display:none;
}
.topnav .dropdown:hover ul{
	display:block;
}
.topnav .dropdown ul li{
	display:block;
	text-transform:uppercase;
	font-size:18px;
	padding:4px 22px;
	line-height:18px;
	letter-spacing:0.3px;
}
.topnav .dropdown ul li:hover{
	background:black;
}
.topnav .dropdown ul li a{
	display:block;
}

.sensitivity-nav2{
	position:absolute;	
	z-index:1;
	left:3%;
	bottom:0;
	top:auto;
	height:120px;
	width:300px;
	color:#a0a0a0;
	font-family: 'Bebas Neue', Calibri, sans-serif;
	text-transform:uppercase;
}
.sensitivity-nav2 .view{
	position:relative;
	display:block;
	padding-top:20px;
}
.sensitivity-nav2 h4{
	padding-bottom:20px;
	width:100%;
	text-align:center;
	display:block;
	font-weight:normal;
	font-size:18px;
	cursor:pointer;
}
.sensitivity-nav2 .view .sens_btn{
	position:absolute;
	display:block;
	width:100px;
	height:24px;
	background:yellow;
}
.sensitivity-nav2 .view .high{
	left:0;
	background:#f16a1f;
	border-radius:12px 0  0  12px;
}
.sensitivity-nav2 .view .medium{
	left:100px;
	background:#fada3f;
}
.sensitivity-nav2 .view .low{
	left:200px;
	background:#17983f;
	border-radius: 0  12px 12px 0 ;
}
.sensitivity-nav2 .sens_btn span{
	position:absolute;
	top:-45px;
	color:#666;
	background:none;
	text-align:center;
	padding:15px 0;
	display:block;
	width:100%;
	font-size:18px;
}
.sensitivity-nav a{
	
}
.sensitivity-nav2 .horiztxt{
	color:#a0a0a0;
	position:absolute;
	right:-200px;
	width:180px;
	top:68px;
	font-size:12px;
	letter-spacing:1.1px;
}




/* OLD GAS Nav.

.sensitivity-nav{
	right:0; 
	
	display:none;
}
.gas-nav{
	left:0;
	display:none;
}
.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 .shadow{
	position:absolute;	
	z-index:1;
	top:0;
	height:100%;
	width:500px;
}


nav .main{
	width:227px;
	height:618px;
	position:absolute;
	top:50%;	
	z-index:3;	
}
.sensitivity-nav .main{
	background: url(images/sensitivityNav_main.png) no-repeat;
	margin-top:-309px; 
}
.sensitivity-nav .horiztext{
	width:154px;
	height:12px;
	bottom:-27px;
	display:block;
	position:absolute;
	left:30px;
	background: url(images/horizontalText.png) no-repeat;
}
.gas-nav .main{
	height:555px;
	background: url(images/gasNav_main4.png) no-repeat;
	margin-top:-276px; 
}

.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 .methane span{	background-image: url(images/gasname_methane.png);}
nav .methanol span{	background-image: url(images/gasname_methanol.png);}
nav .propane span{	background-image: url(images/gasname_propane.png);}
nav .ethane span{	background-image: url(images/gasname_ethane.png);}
nav .methylatedSpirit span{	background-image: url(images/gasname_methylated_spirit.png);}
nav .butane span{	background-image: url(images/gasname_butane.png);}
nav .hydrogen span{	background-image: url(images/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/sensitivitybtns_viewall.png);}
nav .high span{	background-image: url(images/sensitivitybtns_high.png);}
nav .medium span{	background-image: url(images/sensitivitybtns_medium.png);}
nav .low span{	background-image: url(images/sensitivitybtns_low.png);}

*/

@media (max-width: 1080px){
	.topnav .center-content{
		width: 300px;
		margin: 10px auto;
		padding-left:90px;
	}
	.topnav .center-content em{
		display:block;
		font-size:32px;
		line-height: 35px;
	}
	.topnav .center-content small{
		font-size:20px;
	}
	.topnav .dropdown .curr{
		background-color:#000;
	}
	.topnav .dropdown{
		position:static;
	}
	nav.topnav .msalogo{
		position: absolute;
		left: 5px;
		top: 10px;
		height: 36px;
		width: 68px;
		background-size: auto;
		background-size: auto 100%;
	}
	.sensitivity-nav2 .horiztxt{
		position:static;
		padding-top: 30px;
		text-align: center;
		width: 100%;
	}
}


@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%;
	}
}