/*--MAIN CONTENT CONFIG--*/
html body {
	background:#000000;
	width:100%;
	height:100%;
	font-family:Lato;
}

#main-container{

	background-image:url(http://humancalibration.com/images/HC-back.jpg);
	background-size:100% ;
	width:1000px;
	margin:0 auto 0 auto;	
	overflow:hidden;
	
}


/*--PRELOAD SCREEN CONFIG--*/


#preload-screen{
	/*--display:none;--*/
	position:fixed;
	width:100%;
	height:100%;
	background:#000000;	
	top:0;
	left:0;
}


#preload-wrap{
	
	display:block;
	width:100%;	
	height:140px;
	margin: auto;
 	position: absolute;
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
}


#preload-logo{
 	background:url(http://humancalibration.com/images/HC-newlogo.png);
	background-repeat:no-repeat;	
	background-size:100% 100%;
 	width:450px;
	height:115px;
	display:block;
	margin:0 auto 40px auto;		
}

#preload{
	background:url(http://humancalibration.com/images/716.gif);
	background-repeat:no-repeat;	
	background-size:100% 100%;
	width:100px;
	height:32px;
	display:block;
	margin:0 auto;	
	
}

/*--HEADER CONFIG--*/
header{
	height:auto;
	width:100%;	
}

#header-content-wrapper{
	display:block;
	height:100%;
	width:100%;	
	background:#000000;
	opacity:0.8;
	padding:20px 0 0px 0;	
	margin: 0 0 ;
}



#logo{
	display:block;	
	background:url(http://humancalibration.com/images/HC-newlogo.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	width:490px;
	height:115px;
	display:block;
	margin: 0 auto;
}

#logo-ref{
	width:490px;
	height:115px;
	display:block;
	margin: 0 auto;
	
}

#main-nav{
	width:630px;
	margin: 0 auto;	
	padding: 30px 0 0 0;
	display:block;
}


 ul li {
	display: inline-block;	
	font-size: 16px;
	padding:0 0 5px 22px ;

}

 ul li a{
	display:block;	
	text-align:center;
	text-decoration:none;
	color:#DADADA;
	display:block;
	border-bottom:2px solid #000000;
}

 ul li a:hover{
	border-bottom:2px solid #5EBCAC;	
	text-shadow: 0px 0px 10px #ffffff;
	color:#ffffff;
}




 ul li:hover ul{
        display: block; 
    }

 ul li a.active{
	border-bottom:2px solid #5EBCAC;
	color:#ffffff;
}

a{	color:#DADADA;}	
a.hover{color:#ffffff;}

/*--TOP GRAPHS + EYES--*/

.top-graphs{
	position:absolute;
	left:50%;	
	margin:30px 0 20px -190px;
}

.eyes{
	position:absolute;
	left:17%;	
	margin:0 0;
}



#graph-change{
	width:100%;
	
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  10%  { opacity:0; }
  50%  { opacity:0; }
  60%  { opacity:1; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  10%  { opacity:0; }
  50%  { opacity:0; }
  60%  { opacity:1; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  10%  { opacity:0; }
  50%  { opacity:0; }
  60%  { opacity:1; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  10%  { opacity:0; }
  50%  { opacity:0; }
  60%  { opacity:1; }
  100% { opacity:1; }
}
#top-graph-2 {
   -webkit-animation: flickerAnimation 12s infinite;
   -moz-animation: flickerAnimation 12s infinite;
   -o-animation: flickerAnimation 12s infinite;
    animation: flickerAnimation 12s infinite;
}

#eyes1 {
   -webkit-animation: flickerAnimation 12s infinite;
   -moz-animation: flickerAnimation 12s infinite;
   -o-animation: flickerAnimation 12s infinite;
    animation: flickerAnimation 12s infinite;
}


/*--SLIDER CONFIG--*/
#slider{
	padding-top:290px;
	width:100%;
	height:340px;
}


.slide h1{
	background:#000000;
	width:440px;
	opacity:0.8;
	color:#5EBCAC;
	padding:15px;
	border-radius: 10px;
	margin:0 auto;
	font-size:36px;
	text-align:center;
	display:block;
}

.slide #slide3 h1{
	color:#ffffff;	
}


/*--TEXT AREA CONFIG--*/
.text-area-wrapper{
	width:100%;
}

.text-area{
	float:left;
	width:60%;
	margin: 20px auto;
	background:#000000;
	opacity:0.8;
	color:#5EBCAC;
	font-size:18px;
	padding:20px;
	line-height:21px;

}

.text-area-full{
	float:left;
	width:80%;
	margin: 20px 7%;
	background:#000000;
	opacity:0.8;
	color:#5EBCAC;
	font-size:18px;
	padding:20px;
	line-height:21px;

}

h2.text-area{
font-size:30px;	
text-align:center;
width:100%;
margin: 30px auto ;
}

.spacer{
	display:block;
	height:150px;
	opacity:0;
	clear:both;
	
}
/*--IMAGE SIDEBAR--*/	

.side-text{
	margin: 20px auto;
	background:#000000;
	opacity:0.8;
	font-size:18px;
	padding:20px;
	line-height:18px;
	color:#ffffff;
	
}

#side-bar-slider{
	float:right;	
	width:300px;
}

#slide-ul li{
	width:100%;	
}
.side-pic{
	opacity:0.9;	
	display:block;
	width:auto;
	margin: 20px auto;
}

/*--VIDEO CONFIG--*/


#video-wrapper{
width:100%;
height:auto;
}
#youtube{
	display:block;
	width:70%;
	height:400px;
	margin: 20px 15%;
	
}

/*--FOOTER CONFIG--*/

footer{
	
	display:block;
	width:100%;
	height:200px;
	color:#BCBCBC;
	font-family:Lato;	
}

#top-footer-wrap{
	width:100%;
	opacity:0.8;
}

#top-footer{
	width:20%;
	margin:0 auto;
	text-align:center;	
	line-height:20px;
}

#footer-left{
	width:470px;
	display:block;
	margin: 10px auto;
}


#footer-left a{
	
	text-decoration:none;
	color:#A1A1A1;
	
}

#footer-left a:hover{
	text-decoration:none;
	color:#E3E3E3;
	
}


footer{ margin-bottom:30px!important;}