@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
@import url(../fonts/stylesheet.css);

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
html{font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
input[type="text"],input[type="submit"], select, textarea, button{-webkit-appearance:none;}

body{margin:0px; padding:0px; font-family:'proxima_novalight', Arial, Helvetica, sans-serif; font-size:12px;
background:url(../images/main.jpg) no-repeat center top; background-size:cover;}
h1, h2, h3, h4, h5, h6, p, form, input, ul, li{padding:0px; margin:0px; font-weight:normal;}
p{line-height:16px}
ul,ol,li {list-style:none;}
input, select, textarea{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000;}
a{text-decoration:none; outline:none;}
a:hover{text-decoration:none; outline:none;}
a img{border:0px; outline:none;}
.clear{clear:both; font-size:0px; height:0px; line-height:0px; display:block;}
.fleft{float:left;}
.fright{float:right;}

/* ======================================== Wrapper Styles ============================================ */
.wrapper{width:100%;}
/* ======================================== Header Styles ============================================ */
.logo{width:500px; background:url(../images/overlay.png) repeat left top; padding:20px 0; text-align:center; position:absolute;
left:0; top:30%; margin:-112px 0 0;}


/* ======================================== Footer Styles ============================================ */
.footer{width:100%; position:absolute; bottom:0; left:0; background:url(../images/overlay.png) repeat left top; padding:15px 0 7px;}
.container{width:1000px; margin:0px auto;}

.footer .contact{float:left; width:33%;}
.footer ul{float:left; width:33%; padding:10px 0 0;}
.footer li{float:left; width:100%; padding:5px 0 0;}
.footer li img{float:left; margin:0 10px 0 0;}
.footer li span{font:300 24px 'proxima_novalight'; color:#000000; line-height:41px; float:left; width:70%;}
.footer li a{color:#000000;}



/* ============== RESPONSIVE CSS =============== */
@media only screen and (min-width:1020px) and (max-width: 1220px) {
	body{background-size:auto;}
}
@media only screen and (min-width:750px) and (max-width: 1020px) {
	body{background-size:auto;}
	.container{width:750px;}	
}
@media only screen and (max-width: 750px) {
	body{background-size:auto; height:100%;}
	.container{width:500px;}	
	.footer ul{width:62%; float:right; padding:0;} 
	.footer li span{font-size:18px; line-height:30px;}	
	
	html{height:100%;}
	.wrapper{min-height:600px; position:relative; height:100%;}
}
@media only screen and (max-width: 520px){
	.container{width:300px;}	
	.logo{width:250px; padding:10px;}
	.footer .contact{float:left; width:100%;}
	.footer ul{width:100%;}
}