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

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

* {margin:0; padding:0;}
body {background:#002d56; margin:0; padding:0; font-family: 'Roboto', sans-serif;}

header {background:#002d56; width:90%; height:auto; float:left; margin:0; padding:15px 5%; position:fixed; top:0; left:0; z-index:500;}
#logo {width:30%; height:auto; float:left; margin:0;}
#logo img {max-width:100%; height:auto;}
nav {width:70%; height:auto; float:left; margin:0; font-size:14px; font-weight:500;}
nav ul {float:right; list-style:none;}
nav li {float:left; display:inline-block;}
nav a {display:inline-block; padding:13px 12px; border:1px solid #002d56; color:#FFF; text-decoration:none; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;}
nav li.last a {border:1px solid #82b1ff;}
nav a:hover {background:#82b1ff;}
#spacer {width:100%; height:80px; float:left; margin:0;}

#heading {background:url(../images/bg-heading.jpg) center center; background-size:cover; width:90%; height:auto; float:left; margin:0; padding:200px 5%; text-align:center; color:#FFF; font-size:50px; font-weight:300; 
	text-transform:uppercase;}
#contentArea {background:#FFF; width:90%; height:auto; float:left; margin:0; padding:80px 5% 60px; font-size:16px; font-weight:300;}
#contentArea h1 {color:#002d56; font-size:30px; margin:0 0 30px;}
#contentArea h2 {color:#002d56; font-size:26px; margin:0 0 30px;}
#contentArea p {margin:0 0 30px;}
#contentArea ul, #contentArea ol {margin:0 0 30px 40px;}
#contentArea hr {background:#002d56; height:2px; border:none; margin:0 0 30px;}
#contentArea .left {float:left; margin:0 40px 40px 0;}
#contentArea .right {float:right; margin:0 0 40px 40px;}
#contentArea a {color:#002d56; text-decoration:underline;}
#contentArea a:Hover {text-decoration:none;}
#contentArea img {max-width:100%; height:auto;}

#sliderWrap {width:100%; height:auto; float:left; margin:0; text-align:center; color:#FFF; font-size:20px; font-weight:500; position:relative;}
#sliderWrap h1 {font-size:60px; font-weight:300; margin:0 0 25px;}
#sliderWrap p {text-transform:uppercase;}
#sliderWrap a {display:inline-block; color:#FFF; text-decoration:none; padding:25px 50px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; border:1px solid #82b1ff;}
#sliderWrap a:hover {background:#82b1ff;}
#sliderWrap .cycle-slideshow div {width:90%; height:auto; float:left; margin:0; padding:330px 5%;}
#slide01 {background:url(../images/slide02.jpg) center center; background-size:cover;}
#slide02 {background:url(../images/slide02.jpg) center center; background-size:cover;}
#slide03 {background:url(../images/slide02.jpg) center center; background-size:cover;}
.cycle-pager {text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 30px; overflow: hidden;}
.cycle-pager span {font-family: arial; font-size: 50px; width: 10px; height: 10px; display: inline-block; background: #234163; color: #234163; cursor: pointer; border-radius:50%; margin:0 3px; overflow:hidden;}
.cycle-pager span.cycle-pager-active {background: #82b1ff; color: #82b1ff;}
.cycle-pager > * { cursor: pointer;}

#assn {background:#FFF; width:90%; height:auto; float:left; margin:0; padding:60px 5%; border-bottom:1px solid #002d56;}
#assn img {margin:0 3px; height:100px;}

#about {background:#FFF; width:80%; height:auto; float:left; margin:0; padding:80px 10%; text-align:center; color:#616161; font-size:16px; font-weight:300;}
#about h1 {background:url(../images/bg-abouth1.jpg) bottom center no-repeat; color:#234163; font-size:36px; font-weight:300; margin:0 0 25px; padding:0 0 25px;}
#about p {margin:0 0 15px;}
#about strong {color:#002d56; font-weight:500;}

#services {background:#002d56; width:70%; height:auto; float:left; margin:0; padding:80px 15%; color:#FFF; font-size:16px; font-weight:300;}
#services h1 {color:#82b1ff; font-size:36px; font-weight:300; margin:0 0 80px; text-align:center;}
#services h2 {color:#82b1ff; font-size:20px; font-weight:300; margin:0;}
#services p {margin:0 0 40px;}
#services td {vertical-align:middle; padding-bottom:40px;}
#services td:nth-child(1) {width:100px;}
#servLeft {width:59%; height:auto; float:left; margin:0;}
#servRight {width:39%; height:auto; float:left; margin:0 0 0 2%;}

#safety {background:#FFF; width:80%; height:auto; float:left; margin:0; padding:80px 10%; text-align:center; font-size:16px; font-weight:300;}
#safety h1 {background:url(../images/bg-abouth1.jpg) bottom center no-repeat; color:#234163; font-size:36px; font-weight:300; margin:0 0 25px; padding:0 0 25px;}
#safety p {margin:0 0 15px;}
#safety strong {color:#002d56; font-weight:500;}
#safety a {display:inline-block; color:#234163; font-weight:500; text-decoration:none; padding:20px 40px; margin:30px 0 0; text-transform:uppercase; border:1px solid #82b1ff;
	 transition: all 0.5s ease; -webkit-transition: all 0.5s ease; border:1px solid #82b1ff;}
#safety a:hover {background:#82b1ff;}

#sandxWrap {background:#f0f0f0; width:90%; height:auto; float:left; margin:auto; padding:80px 5%; color:#234163; font-size:16px; font-weight:300; text-align:center;}
#sandxWrap h1 {background:url(../images/bg-abouth1.jpg) bottom center no-repeat; font-size:36px; font-weight:300; margin:0 0 25px; padding:0 0 25px;}
#sandxWrap h2 {font-size:20px; font-weight:500; margin:0 0 15px;}
#sandxWrap h3 {font-size:24px; font-weight:300; margin:0 0 25px;}
#sandxWrap a {display:inline-block; color:#234163; font-weight:500; text-decoration:none; padding:20px 40px; margin:30px 0 0; text-transform:uppercase; border:1px solid #82b1ff;
	 transition: all 0.5s ease; -webkit-transition: all 0.5s ease; border:1px solid #82b1ff;}
#sandxWrap a:hover {background:#82b1ff;}
#sandPic {width:98%; height:200px; float:left; margin:0 3px 10px 7px; }
.sandx {background:url(../images/bg-sandx.jpg) bottom center; background-size:cover;}
.superloop {background:url(../images/bg-superloop.jpg) center center; background-size:cover;}
#sandx {width:50%; height:auto; float:left; margin:0; padding:0;}
#superl {width:50%; height:auto; float:left; margin:0; padding:0;}

#contact {background:#234163; width:70%; height:auto; float:left; margin:0; padding:80px 15% 60px;}
#contact h1 {background:url(../images/bg-contacth1.jpg) bottom center no-repeat; color:#82b1ff; font-size:36px; font-weight:300; margin:0 0 25px; padding:0 0 25px; text-align:center;}
#contact p {margin:0 0 21px;}
#contact table {margin:50px 0 0;}
#contact td {vertical-align:top;}
#contact td:nth-child(3) {width:300px;}
#contact input, #contact textarea {font-family: 'Roboto', sans-serif; font-size:16px; border:1px solid #8096ab; -moz-border-radius: 0px; -webkit-border-radius: 0px; -webkit-appearance: none;}
#contact input.input {width:90%; height:16px; padding:7px 2%;}
#contact textarea {width:90%; height:122px; padding:7px 2%;}
#contact input.btn {background:#002d56; width:100%; height:40px; margin:20px 0 0; text-transform:uppercase; color:#FFF; border:1px solid #82b1ff; cursor:pointer;}

#emp {width:100%; height:auto; float:left; margin:0;}
#emp h1 {background:url(../images/bg-contacth1.jpg) bottom center no-repeat; color:#82b1ff; font-size:36px; font-weight:300; margin:0 0 25px; padding:0 0 25px; text-align:center;}
#emp p {margin:0 0 21px;}
#emp td {vertical-align:top; padding:10px;}
#emp td:nth-child(3) {width:300px;}
#emp input, #emp textarea {font-family: 'Roboto', sans-serif; font-size:16px; border:1px solid #8096ab; -moz-border-radius: 0px; -webkit-border-radius: 0px; -webkit-appearance: none;}
#emp input.input {width:100%; height:16px; padding:10px 0;}
#emp textarea {width:90%; height:122px;}
#emp input.btn {background:#002d56; width:100%; height:40px; margin:20px 0 0; text-transform:uppercase; color:#FFF; border:1px solid #82b1ff; cursor:pointer;}


#maps {background:#002d56; width:90%; height:auto; float:left; margin:0; padding:80px 5%; color:#FFF; font-size:16px; font-weight:300;}
#maps td {width:16.66%; vertical-align:top;}
#maps iframe {width:95%; height:210px; margin:0 0 15px;}
#maps h1 {color:#82b1ff; font-size:20px; font-weight:300; margin:0 0 15px;}
#maps p {margin:0 0 10px;}
#maps a {color:#FFF; text-decoration:none;}

footer {background:#002d56; width:90%; height:auto; float:left; margin:0; padding:40px 5% 30px; text-align:center; color:#3a5674; font-size:16px; font-weight:300;}
footer a {color:#82b1ff; text-decoration:none; margin:0 0 0 15px;}
footer p {margin:0 0 10px;}
footer p.small {font-size:12px;}

.responsive-nav-icon::before, .responsive-nav-close::before {color: #002d56; content: "\f0c9"; font-family: FontAwesome; font-size: 22px; position: relative;}
.responsive-nav-close::before {color: #FFF; content: "\f00d"; font-size: 18px;}
.responsive-nav-icon {background: #82b1ff; 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: 910px) {
	.responsive-nav-icon {display: block; position: fixed; z-index: 999;}
	.responsive-nav-close {display: block; position: absolute; z-index: 1;}
	nav {background:#002d56; height: 100%; padding: 20px 5%; 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; border:0px solid #002d56;}
	nav ul, nav li {margin:0; padding:0; float:none;}
	nav li {border-bottom:1px solid #FFF;}
	nav li.last a {background:#82b1ff; border:1px solid #82b1ff;}
	nav li.last {border-bottom:0px; padding-bottom:60px;}
	nav.slide-in {left: 0; overflow-y: scroll; width: 90%; z-index: 1000;}	
	nav .menu-item {display: block;}
}
@media screen and (min-width:910px) and (max-width:1170px) {
	#assn {width:90%; padding:30px 5%;}
	#sliderWrap .cycle-slideshow div {padding:200px 5%;}
	#sliderWrap h1 br {display:none;}
	#about {width:90%; padding:40px 5%;}
	#services {width:90%; padding:40px 5% 20px;}
	#services h1 {margin:0 0 40px;}
	#safety {width:90%; padding:40px 5%;}
	#sandxWrap {padding:40px 5%;}
	#contact {width:90%; padding:40px 5% 20px;}
	#maps {padding:30px 5%;}
	#maps td {width:50%; display:block !important; float:left !important; padding:10px 0;}
	#heading {padding:100px 5%;}
	#contentArea {padding:40px 5% 10px;}
	#contentArea table {width:100% !important;}
}
@media screen and (min-width:600px) and (max-width:909px) {
	header {position:relative; z-index:4000;}
	#logo {width:100%; text-align:center;}
	#spacer {display:none;}
	#assn {width:90%; padding:30px 5%;}
	#assn img {height:75px; width:auto; margin:0 5px;}
	#sliderWrap .cycle-slideshow div {padding:100px 5%;}
	#sliderWrap h1 {font-size:40px;}
	#sliderWrap h1 br {display:none;}
	#about {width:90%; padding:40px 5%;}
	#services {width:90%; padding:40px 5% 20px;}
	#services h1 {margin:0 0 40px;}
	#servLeft {width:100%;}
	#servRight {width:100%; margin:0;}
	#services td {padding-bottom:20px;}
	#safety {width:90%; padding:40px 5%;}
	#sandxWrap {padding:40px 5%;}
	#sandxWrap span {display:inline-block;}
	#sandxWrap h1 {font-size:30px;}
	#sandx, #sandl {width:100%;}
	#superl {width:100%; margin:20px 0;}
	.superloop {background:url(../images/bg-superloop.jpg) center center; background-size:cover;}
	#contact {width:90%; padding:40px 5% 20px;}
	#contact td {width:100% !important; display:block !important; float:left !important;}
	#contact input.btn {width:94%;}
	#maps {padding:30px 5%;}
	#maps td {width:50%; display:block !important; float:left !important; padding:10px 0;}
	footer a {display:inline-block;}
	#heading {padding:80px 5%; font-size:30px;}
	#contentArea {padding:40px 5% 10px;}
	#contentArea h1 {font-size:26px;}
	#contentArea h2 {font-size:22px;}
	#contentArea table {width:100% !important;}
	#contentArea td {width:100% !important; display:block !important; float:left !important;}
	#contentArea iframe {display:block !important; float:none !important; margin:0 0 20px !important;}
	#contentArea img {display:block !important; float:none !important; margin:0 0 20px !important;}
	#contentArea img.safe {display:inline-block !important; float:none !important; margin:0 !important;}
}
@media screen and (max-width:599px) {
	header {position:relative; z-index:4000;}
	#logo {width:100%; text-align:center;}
	#spacer {display:none;}
	#assn {width:100%; padding:20px 0;}
	#assn img {height:50px; width:auto; margin:0 5px;}
	#sliderWrap {font-size:16px;}
	#sliderWrap .cycle-slideshow div {padding:50px 5%;}
	#sliderWrap h1 {font-size:26px;}
	#sliderWrap h1 br {display:none;}
	#sliderWrap a {padding:15px 20px;}
	#about {width:90%; padding:40px 5%;}
	#services {width:90%; padding:40px 5% 20px;}
	#services h1 {margin:0 0 40px;}
	#servLeft {width:100%;}
	#servRight {width:100%; margin:0;}
	#services td {padding-bottom:20px;}
	#safety {width:90%; padding:40px 5%;}
	#sandxWrap {padding:40px 5%;}
	#sandxWrap span {display:inline-block;}
	#sandxWrap h1 {font-size:26px;}
	#sandx, #sandl {width:100%;}
	#superl {width:100%; margin:20px 0;}
	.superloop {background:url(../images/bg-superloop.jpg) center center; background-size:cover;}
	#contact {width:90%; padding:40px 5% 20px;}
	#contact td {width:100% !important; display:block !important; float:left !important;}
	#contact input.btn {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;}
	#maps {padding:30px 5%;}
	#maps td {width:100%; display:block !important; float:left !important; padding:10px 0;}
	footer a {display:inline-block; margin:0 8px;}
	footer span {display:block;}
	#heading {padding:40px 5%; font-size:30px;}
	#contentArea {padding:40px 5% 10px;}
	#contentArea h1 {font-size:26px;}
	#contentArea h2 {font-size:22px;}
	#contentArea table {width:100% !important;}
	#contentArea td {width:100% !important; display:block !important; float:left !important;}
	#contentArea iframe {display:block !important; float:none !important; margin:0 0 20px !important; width:100%;}
	#contentArea img {display:block !important; float:none !important; margin:0 0 20px !important;}
	#contentArea img.safe {display:inline-block !important; float:none !important; margin:0 !important;}
}