@import url("css/reset.css");
@import url("css/font-awesome.css");

html,body {margin:0; 	padding:0; height:100%; font-size: 14px;  
			font-family: 'Roboto', sans-serif;	
			background: #0d5f7e;
			color: #f0f0f0;
}
/**LAYOUT**/

#container {	min-height:100%; position:relative;}
#header-main {height: 95px; }
#content {padding:0px; padding-bottom:170px; /*Height of the footer */}
footer {position:absolute; bottom:0; width:100%; padding: 0px 0; height:130px; /* Height of the footer */ margin-bottom: 30px;}
.inner {width: 960px; margin: 0 auto;}

/****** Header  ****/
#header-main h1{margin: 0; line-height: 57px; float: left; margin: 14px 0;}
#header-main h2 {margin: 0; float: right; font-size: 1em; margin: 14px 0;}
#header-main h2 span {font-size: 1.5em;}

#banner {height: 150px; background: #fff; border-top: 5px solid #fff;
			background: url(img/banner.jpg) center center no-repeat; background-size: cover; border-bottom: 120px solid #fff;}
#logo {width: 100%; height: 0; padding-bottom: 27%; background: url(img/logo.png) center center no-repeat; background-size: cover;}
#content {position: relative; top: -105px;}

#water {line-height: 76px; font-size: 3em; float: left; margin: 0; margin-left: 10%;}
#specialist {float: right; width: 30%; margin-right: 10%; font-size: 1.3em;}
#content #specialist li {margin: 1px 0;}

#bullets { text-transform: uppercase; font-size: 1.8em; margin-top: 0; margin-bottom: 10px;}
#bullets span {display: block; float: left; width:30%; text-align: center;}

#bullets span.bullet {width: 5%;}
#tagline {font-size: 1.5em; text-align: center; clear: both; padding-top: .25em;}
#commitment {font-size: 1.3em; line-height: 1.2em; }
#about {margin: 1em 0;}
#about p {width: 48%; padding-right: 2%; float: left;}
#products {padding: 10px; padding-left: 420px; background: #43839b url(img/warehouse.png) 10px 10px no-repeat;
		 height: 305px;-webkit-border-top-left-radius: 30px;
		-webkit-border-bottom-right-radius: 30px;
		-moz-border-radius-topleft: 30px;
		-moz-border-radius-bottomright: 30px;
		border-top-left-radius: 30px;
		border-bottom-right-radius: 30px;}
#more {padding: 10px; padding-left: 420px; margin-top: 10px;
		background: #43839b url(img/test.png) 10px 10px no-repeat;
		 height: 200px;-webkit-border-top-left-radius: 30px;
		-webkit-border-bottom-right-radius: 30px;
		-moz-border-radius-topleft: 30px;
		-moz-border-radius-bottomright: 30px;
		border-top-left-radius: 30px;
		border-bottom-right-radius: 30px;}	
#final {padding: 10px;  padding-left: 30px; margin-top: 10px;
		background: #43839b ;
		 -webkit-border-top-left-radius: 30px;
		-webkit-border-bottom-right-radius: 30px;
		-moz-border-radius-topleft: 30px;
		-moz-border-radius-bottomright: 30px;
		border-top-left-radius: 30px;
		border-bottom-right-radius: 30px;}	

#vendors, #industries {width: 50%; float: left;}
#content h2 {clear: both;}
#content h2:first-child {margin-top: 0;} 
#content ul {margin: 0; padding: 0;}
#content li {margin: 3px 0; margin-left: 5%;}
#products li, #vendors li {width: 45%; float: left;}
#industries {border-right: 5px solid #0d5f7e; margin-right: 5%;
			width: 40%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#vendors {width: 100%;}
#vendors li {width: 25%; font-size: 1.2em;}

/****** Footer  ****/
footer {background: #0a485f;}
#map {position: relative; width: auto; float: left;}
#maplink {position: absolute; right: 0; bottom: 20px; background: #fff; color: #0a485f; font-weight: bold; padding: 5px 10px; font-size: 1.3em;}
/*Forms*/
#contact-area {width: 40%; padding: 0 5%; float: right;}
#contact-area input, #contact-area textarea {padding: 2px; width: 100%; margin: 0px 0px 10px 0px;border: 2px solid #ccc;}
#contact-area textarea {height: 50px;}
#contact-area textarea:focus, #contact-area input:focus {border: 2px solid #900;}
#contact-area input.submit-button {width: 100px;float: right;}
#contact-area label {padding-top: 5px;}
#contact-area h2 {line-height: 40px;}
#contact-area h2 a {float: right;}

#p-address {font-size: 20px; width: 50%; float: left;}
#p-phone {font-size: 34px; line-height: 1em; width: 50%; float: left; text-align: right;}
.fax {font-size: 16px; display: block; line-height: 1.7em;}
#social {float: right; margin-left: 50px;}

/**GENERAL CLASSES **/

a{color: #f0f0f0;}
a:visited{color: #f0f0f0;}
a:hover{color: #fff ;}
a.graphic {text-indent: -9999px; display: block;}

a.tele, a.tele:hover, a.tele:visited {cursor: default; color:#f0f0f0; text-decoration: none;}

em{ font-style: italic; }

h1,h2,h3,h4,h5,h6{font-weight: 400; margin: 15px 0;}

.hide { display: none; }

p{line-height: 1.25em; font-size: 1em; margin: 10px 0 0 0; padding: 0;}

/* self-clear floats */
.group:after, #primary nav:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.mobile {display: none;}

/* Media queries */

@media screen and (max-width: 985px) {
.inner {width: 600px;}
.mobile {display: block;}
.pipe {display: none;}
#header-main {height: auto;}
#header-main h1{line-height: 1em; float: none; margin: 14px 0 0; font-size: 1em;}
#header-main h2 {float: none; margin: 0 0 14px;}
#header-main h2 span {font-size: 1.5em;}
#banner {display: none;}

#about p {width: 100%; padding-right: 0%; float: left; margin: 1em 0;}

#products {background: #43839b; padding-left: 10px; height: auto;}

#water {line-height: 1.2em; font-size: 3em; float: none; margin: 0; margin-left: 0; text-align: center;}
#specialist {float: none; width: 100%; margin-right: 0; text-align: center; list-style-type: none;}

#content {position: relative; top: 0px;}
#p-phone {font-size: 24px;}
}

@media screen and (max-width: 620px) {
.inner {width: 96%; margin: 0 2%;}

#bullets {font-size: 1.6em; margin-top: 0;}
#bullets span {display: block; float: left; width:100%; text-align: center;}
#bullets span.bullet {display: none;}

#water {line-height: 1.2em; font-size: 2em;}



#products {background: #43839b; padding-left: 10px; height: auto;}
#final {height: auto;}
#vendors {width: 100%; float: left; margin-top: 1em;}
#industries {border-right: 0; margin-right: 0; width: 100%;}
footer {position: static;height: auto; margin-top: 1em; padding-bottom: 2em;}
#p-address, #p-phone {width: 100%;}
#p-phone {text-align: left; font-size: 30px;}
#p-phone img {width: 40px; height: 40px; margin-left: 0;}
#content {padding-bottom: 0;}
#vendors li {width: 100%; font-size: 1.2em;}

}