/* ==========================================================================
   1. set fonts
   	  - font names
   2. set global style
      - body/font/reset a
   3. identify color used
   ========================================================================== */
html , body { height:100%; min-height:100%; -webkit-font-smoothing:antialiased; font-size: 14px; background: url('../img/bg.jpg') no-repeat center center; }
.loading { position:fixed; width:100%; height:100%; overflow:hidden; background:#fff url('../img/loading.gif') no-repeat center; z-index:999999; }
.ease { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }
.loader { position:relative; overflow:hidden; background:#fff url('../img/loading.gif') no-repeat center center; }
.cf:before,.cf:after {content: " "; /* 1 */display: table; /* 2 */}.cf:after {clear: both;}  .cf {*zoom: 1;}
.rel{position: relative;}
body *{color: #fff;}
header{position: absolute;
top: 0;
left: 15px;
width: 10%;
z-index: 1;
height: 100%;
background-color: rgba(255,255,255,.5);}
h2{font-size: 2em;}
#main-container{position: relative; height: 100%;}
#main-container > .inner{background-color: #000;position: absolute;width: 100%;left: 0; top: 15%;height: 350px;padding: 50px 0;}
p{font-family: 'Merriweather'; color: #e6b741;}
.logo img{margin-top: 25px;}
.logo p{text-align: center; color: #fff;}
.contact{position: absolute;bottom: 0;left: 10px;width: 100%;}
ul{list-style: none;text-align: center; }
ul li{display: inline-block; padding: 0 10px;}

@media all and (max-width: 1200px) and (min-width:991px) {
  .logo img{
    width: 100%;
  }
}
@media (max-width: 990px){
	body{font-size: 12px;}
	.logo{
		text-align: center;
	}
	#main-container > .inner{
		padding:0;
	}
	.as h2{
		text-align: center;
	}
	p{
		text-align: center;
	}
}
@media (max-width: 480px){
	#main-container > .inner{
		top:5%;
		height: 400px;
	}
	.logo img{
    	width: 100%;
  	}
  	ul{
  		padding:0px;
  	}
}