@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

* {margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {margin:0; padding:0; font-family: 'Lato', sans-serif;}

header {background:#dddddd; width:100%; height:auto; float:left; margin:0; padding:45px 5% 0; position:fixed; top:0; left:0; z-index:1000;}
#logo {width:50%; height:auto; float:left; margin:0; padding:0 0 0 5%;}
#logo img {max-width:100%; height:auto;}
#headContact {width:50%; height:auto; float:left; margin:0; padding:15px 0 0; text-align:right; color:#000; font-size:16px; font-weight:700; text-transform:uppercase;}
#headContact a {color:#000; text-decoration:none;}
nav {background:#6d6d6d; width:100%; height:auto; float:left; margin:42px 0 -50px; padding:40px 0; text-align:center; font-size:15px; font-weight:700; text-transform:uppercase;}
nav ul {float:none; list-style:none;}
nav li {display:inline-block;}
nav li+li {margin-left:20px;}
nav a {display:inline-block; color:#FFF; text-decoration:none;}
nav a:hover {color:#18d7f3;}
#spacer {width:100%; height:191px; float:left; margin:0;}

#heading {background:url(../images/bg-mainPic.jpg) center center; background-size:cover; width:100%; height:auto; float:left; margin:0; padding:170px 5% 135px; text-align:center;
	color:#FFF; font-size:50px; font-weight:900; text-transform:uppercase; text-shadow:0 3px 5px rgba(0,0,0,.8); border-bottom:5px solid #25a9e0;}
	
#headingCC {background:url(../images/bg-calfcatcher.jpg) center center; background-size:cover; width:100%; height:auto; float:left; margin:0; padding:170px 5% 135px; text-align:center;
	color:#FFF; font-size:25px; font-weight:900; text-transform:uppercase; text-shadow:0 3px 5px rgba(0,0,0,.8); border-bottom:5px solid #25a9e0;}
#heading h1 {font-size:50px;}
#contentArea {background:#dddddd; width:100%; height:auto; float:left; margin:0; padding:70px 5%; color:#3d4245; font-size:20px;}
#contentArea h2 {font-size:35px; font-weight:700; margin:0 0 30px;}
#contentArea p {margin:0 0 30px;}
#contentArea td {vertical-align:top;}
#contentArea img {max-width:100%; height:auto;}

#mainPic {background:url(../images/bg-mainPic.jpg) center center; background-size:cover; width:100%; height:auto; float:left; margin:0; padding:235px 5%; text-align:center;
	color:#FFF; font-size:50px; font-weight:900; text-transform:uppercase; text-shadow:0 3px 5px rgba(0,0,0,.8);}

#clientText {background:#25aae1; width:100%; height:auto; float:left; margin:0; padding:50px 5%; text-align:center; color:#FFF; font-size:35px; font-weight:700; text-transform:uppercase;}
#clientLogos {background:#FFF; width:100%; height:auto; float:left; margin:0; padding:30px 10%; position:relative;}
#clientLogos .cycle-slideshow {width:100%; height:auto; float:left; margin:0;}
#clientLogos .cycle-slideshow img {margin:0 30px;}
#prev, #next {position:absolute; top:50%; margin-top:-25px; z-index:100;}
#prev {left:5%;}
#next {right:5%;}
#prev:hover, #next:hover {cursor:pointer;}

#products {background:url(../images/bg-products.jpg) top center no-repeat #c3c3c3; width:100%; height:auto; float:left; margin:0; padding:50px 5% 70px;}
#products h2 {font-size:35px; font-weight:700; margin:0 0 35px; text-transform:uppercase; text-align:center;}
#tease {background:#3e3e3e; width:23%; height:auto; float:left; margin:0 1%; overflow:hidden; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;}
#tease:hover {background:#25aae1; cursor:pointer;}
#teasePic {width:100%; height:240px; float:left; margin:0 0 20px;}
.erosion {background:url(../images/bg-erosion.jpg) center center; background-size:cover;}
.entrances {background:url(../images/bg-entrances.jpg) center center; background-size:cover;}
.pipe {background:url(../images/bg-pipe.jpg) center center; background-size:cover;}
.containment {background:url(../images/bg-containment.jpg) center center; background-size:cover;}
#tease p {color:#FFF; font-size:15px; text-align:center; margin:0 0 20px; text-transform:uppercase;}

#contact {width:100%; height:auto; float:left; margin:0; padding:50px 5% 60px;
background: rgba(28,199,237,1);
background: -moz-linear-gradient(left, rgba(28,199,237,1) 0%, rgba(37,169,225,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(28,199,237,1)), color-stop(100%, rgba(37,169,225,1)));
background: -webkit-linear-gradient(left, rgba(28,199,237,1) 0%, rgba(37,169,225,1) 100%);
background: -o-linear-gradient(left, rgba(28,199,237,1) 0%, rgba(37,169,225,1) 100%);
background: -ms-linear-gradient(left, rgba(28,199,237,1) 0%, rgba(37,169,225,1) 100%);
background: linear-gradient(to right, rgba(28,199,237,1) 0%, rgba(37,169,225,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1cc7ed', endColorstr='#25a9e1', GradientType=1 );}
#contact h2 {color:#FFF; font-size:45px; font-weight:900; margin:0 0 30px; text-align:center; text-transform:uppercase;}
#contact h3 {font-size:20px; font-weight:400; margin:0 0 30px; text-align:center;}
#contact p {margin:0 0 15px;}
#contact strong {font-weight:700; padding:0 5px;}
#contact span {margin-left:30px;}
#contact a {color:#000; text-decoration:none;}
#contact a:hover {color:#FFF;}
#contact td {vertical-align:top;}
#contact td:nth-child(3) {width:300px;}
#contact input, #contact textarea {background:#dbdbdb; border:none; font-family: 'Lato', sans-serif; font-size:14px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -webkit-appearance: none;}
#contact input.input {width:90%; height:40px; padding:8px 2%;}
#contact textarea {width:90%; height:151px; padding:8px 2%;}
#contact input.btn {background:#0e688d; width:100%; height:58px; margin:15px 0 0; color:#FFF; font-size:20px; text-transform:uppercase;}

footer {background:#393f43; width:100%; height:auto; float:left; margin:0; padding:55px 5%; text-align:center; color:#18d7f3; font-size:20px; text-transform:uppercase;}
footer a {color:#898e90; text-decoration:none; margin:0 0 0 20px;}
footer a:hover {color:#FFF;}

.responsive-nav-icon::before, .responsive-nav-close::before {color: #FFF; content: "\f0c9"; font-family: "Font Awesome 5 Free"; font-size: 22px; font-weight:900; position: relative;}
.responsive-nav-close::before {color: #FFF; content: "\f00d"; font-size: 18px;}
.responsive-nav-icon {background: #6d6d6d; line-height: normal; padding: 5px 8px 4px; top: 1%; right: 1%;}
.responsive-nav-icon:hover, .responsive-nav-close:hover {opacity: .7;}
.responsive-nav-close {top: 10px; right: 10px;}
.responsive-nav-icon, .responsive-nav-close {cursor: pointer; display: none;}
#overlay {background: 0 0 rgba(0, 0, 0, 0.1); display: none; height: 100%; position: fixed; top: 0; left: 0; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 100%; z-index: 990;}
	
@media only screen and (max-width: 1330px) {
	.responsive-nav-icon {display: block; position: fixed; z-index: 999;}
	.responsive-nav-close {display: block; position: absolute; z-index: 1;}
	nav {background:#6d6d6d); height: 100%; padding: 20px 5%; margin:0; position: fixed; top: 0; left: -400px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;
		-ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 0; text-align:center;}
	nav a, nav a:visited, nav a:hover {color:#FFF; text-decoration:none; padding:10px 0 !important; display:block;}
	nav ul, nav li {margin:0; padding:0;}
	nav li {border-bottom:1px solid #FFF;}
	nav li+li {margin-left:0px;}
	nav li.last {border-bottom:0px; padding-bottom:60px;}
	nav.slide-in {left: 0; overflow-y: scroll; width: 100%; z-index: 1000;}	
	nav .menu-item {display: block;}
}
@media screen and (min-width:1150px) and (max-width:1330px) {
	header {position:relative; padding:30px 5%;}
	#logo {padding:0;}
	#spacer {display:none;}
	#mainPic {padding:175px 5%;}
	#heading {padding:120px 5%;}
	#heading h1 {font-size:40px;}
	#contentArea {padding:30px 5% 0;}
	#contentArea td {width:100% !important; display:block !important; float:left !important; text-align:center;}
}
@media screen and (min-width:660px) and (max-width:1149px) {
	header {position:relative; padding:30px 5%;}
	#logo {width:100%; text-align:center; padding:0;}
	#headContact {width:100%; text-align:center;}
	#spacer {display:none;}
	#mainPic {padding:125px 5%; font-size:40px;}
	#clientText {padding:30px 5%; font-size:25px;}
	#products {padding:50px 5% 40px;}
	#tease {width:44%; margin:0 3% 30px;}
	#contact {padding:30px 5%;}
	#contact h2 {color:#FFF; font-size:30px;}
	#contact span {display:inline-block; margin:0 15px;}
	#contact td {width:100% !important; display:block !important; float:left !important;}
	#contact input.btn {background:#0e688d; width:94%;}
	footer {padding:30px 5%;}
	#heading {padding:75px 5%;}
	#heading h1 {font-size:40px;}
	#contentArea {padding:30px 5% 0;}
	#contentArea td {width:100% !important; display:block !important; float:left !important; text-align:center;}
}
@media screen and (max-width:659px) {
	header {position:relative; padding:30px 5%;}
	#logo {width:100%; text-align:center; padding:0;}
	#logo img {max-width:95%;}
	#headContact {width:100%; text-align:center; font-size:14px;}
	#spacer {display:none;}
	#mainPic {padding:75px 5%; font-size:20px;}
	#clientText {padding:30px 5%; font-size:20px;}
	#clientLogos .cycle-slideshow img {margin:0 10px; max-height:75px; width:auto;}
	#products {padding:50px 5% 10px;}
	#products h2 {font-size:24px;}
	#tease {width:100%; margin:0 0 30px;}
	#contact {padding:30px 5%;}
	#contact h2 {color:#FFF; font-size:20px;}
	#contact h3 {font-size:15px;}
	#contact span {display:inline-block; margin:0 15px;}
	#contact td {width:100% !important; display:block !important; float:left !important;}
	#contact input.btn {background:#0e688d; width:94%;}
	.g-recaptcha {transform:scale(0.90);transform-origin:0;-webkit-transform:scale(0.90);transform:scale(0.90);-webkit-transform-origin:0 0;transform-origin:0 0;}
	footer {padding:30px 5%; font-size:18px;}
	footer a {display:block; margin:0;}
	#heading {padding:50px 5%;}
	#headingCC {padding:50px 5%;}
	#heading h1 {font-size:24px;}
	#contentArea {padding:30px 5% 0;}
	#contentArea td {width:100% !important; display:block !important; float:left !important; text-align:center;}
}