* { box-sizing: border-box; }

button, input, optgroup, elect, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;}


/******************************** TYPOGRAPHY  ********************************/

body { font-size: 100%; font-family: Helvetica, "Helvetica Neue", Arial; color: #666; }

a { text-decoration: none; font-weight: bold; }

ul, ol { list-style: none; padding:0;}
dt {margin-top: 10px;}

h1,h2,h3,h4,h5,h6 { 
    font-family: Impact, "Helvetica Neue Condensed Black", Haettenschweiler, "Avenir Next Heavy", "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
    line-height: normal; 
    margin: 0 0;
    color: #136;
    font-weight: 400;
    font-size: 2em;
    text-transform: uppercase;
}

/***** page headings ****/
h1 { font-size: 3.5em; border: none; background: #136; text-align: center; color:#9AB413;}

/***** first p title ****/
h2 span { display:block; font-size: 0.75em; font-weight: 400; border-bottom: solid #666 1px; }

/***** sub headings ****/
h3 { font-size: 1.5em; margin-top: 0;}

.homepage h3 { font-size: 3em;}

/***** slider headings ****/
h4 {}

/***** footer headings ****/
h5 { color: #fff; font-size: 24px;}

h6 {font-size: 1.25em;}

hr {margin: 10% 0;}

.main {line-height: 1.5em; }



/*************************  SLIDERS  *****************************/

.flexslider {border:none;margin:0; z-index: 1; max-height:100vh; overflow:hidden;}

.homepage .flexslider, .homepage .slides { transform: rotate3d(0,0,1,180deg); }


.flex-caption {position: absolute; bottom: 25%; right: 0; font-size: 2.5em; background-color: rgba(0,0,0,0.5); padding: 10px 10% 10px 10px; margin:0; color: white;}

.caption-left {right:auto; left:0; padding: 10px 10px 20px 10%;}
.caption-right {left:auto; right:0; padding: 10px 10% 20px 10px;}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}


@keyframes slideInLeft {
    0% { opacity: 0; transform: translateX(-2000px); }
  100% { transform: translateX(0); }
}

.slideInLeft { animation-name: slideInLeft; }


@keyframes slideInRight {
    0% { opacity: 0; transform: translateX(2000px); }
  100% { transform: translateX(0); }
}

.slideInRight { animation-name: slideInRight; }








/******************************** HEADER  ********************************/


header {
    background-image: url(img/sky.jpg);
    background-size: cover;
    width: 100%;
    overflow: visible;
    margin: -10px auto 0;
}

.homepage header, #sonic2 header {position: absolute;background-image: none;background: rgba(0,0,0,0.5);}


.logobar {
    margin: 10px auto;
    padding: 5px 10px;
    position: relative;
    overflow: hidden;
    z-index: 10;
    text-align: center;
}

#logo {
    padding: 7px;
    width: 300px;
    float: left;
}

.callnow {
    float: right;
    text-align: center;
    margin: 30px auto 0px auto;
    font-size: 28px;
    line-height: normal;
    color: white;
    font-weight: 400;
    text-shadow: rgba(0,0,0,0.99) 1px 1px 3px;
}

.callnow span {
    display: block;
    color: #9AB413 !important;
    font-size: 1.3em;
    font-weight: bold;
}

img#safe {height:100px;}




/******************************** NAV  ********************************/

header {  z-index: 100;}

nav {
    background: rgba(255,255,255,0.9);
    width: 100%;
    padding: 0px;
    margin: 10px 0 0 0;
    overflow: visible;
    clear: both;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

nav > ul {
    max-width: 1600px;
    list-style: none;
    display: flex;
	flex-wrap: wrap;
    position: relative;
    margin: 0 auto -3px;
    text-align: center;
    justify-content: space-around;
}

nav > ul > li {  }

nav ul li:hover { background: rgba(255,255,255,0.8); }

nav ul li a { display:block; margin:0; padding: 7px 20px; color: #666; text-transform: uppercase; text-align: center;}

nav ul li a span { display:block; font-size: 1.3em; color: #333; margin:0; }

nav ul li a.active {background-color: white; }

/*** subnav  ***/

nav ul ul { display: none; position: absolute; list-style: none; top: 100%; background: rgba(255,255,255,0.8); }

nav ul li:hover > ul { display: block;  z-index: 5555;}

nav ul ul li { float: none; border-top: 1px solid #999; position: relative; }

nav ul ul li a { display: block; padding: 10px 10px; }

nav ul ul li a:hover { background: rgba(255,255,255,0.8); }




.main { 
    max-width: 1400px; 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
    background-color: white;
    padding: 5% 15px 50px;
}

aside { width: 400px; }


/******************************** HOMEPAGE  ********************************/



#truck { width: 100%; display:block; }
#headline { width: 100%; display:block; margin-bottom: 0px;}


/***  WIDGETS  ***/
.widget {display: block;/* float: left; */}
.widget li { padding: 5px 0;  border-bottom: dotted #999 1px;}




#intro {
    width: 60%;
    float: left;
    padding-right: 3%;
    margin-bottom: 90px;
}


#specialties {
    width: 40%;
    margin-bottom: 55px;
    float: left;
    padding: 2%;
    background-color: #eee;
}

#specialties ul, ul.specialties {
    padding-left: 0;
    column-count:2;
}


#whyus, #clients, #testimonials { width: 30%;}

#whyus { float:right;  margin: 0 5% 0 0; background: #eee; padding: 20px; border: solid 2px #136; border-radius: 15px;}

#whyus h4 { text-align: center;}

#whyus li {
    border-bottom: none;
    font-size: 1.4em;
    line-height: 1.2em;
    padding-left: 30px;

}

#whyus li:before {
    content: '>';
    font-size: 1.2em;
    color: #9AB413;
    margin-left: -1em;
}


#clients { margin: 0 5% 0 0; }




/*** TESTIMONIAL ***/

#testimonials {
	position: relative;
	overflow: hidden; 
	width:100%;
	background-image: url("img/slide5@2xb.jpg");
	min-height: 800px;
	background-size: cover;
	background-position: bottom;
	}

.testimonial {
    position: relative;
    border-radius: 5px;
    background-color: #eee;
    text-shadow: 0 1px 0 #aaa;
    font-style: italic;
    font-family: Georgia, serif;
    margin: 5% 2.5%;
    padding: 15px 10px 5px 35px;
    width: 45%;
}



.testimonial:before, .testimonial:after {
    position: absolute;
    content: "\201C";
    font-style: normal;
    font-size: 80px;
    line-height: 1;
}

.testimonial:before { top: 0; left: 2px;}
.testimonial:after { right: 3px;  bottom: -.5em; content: "\201D";}





/*************************** SERVICES  **********************************/

#services {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 20px 5px;
    justify-content: space-between;
}


.aservice {
    vertical-align: top;
    text-align: center;
    width: 16%;
    font-size: 14px;
    background-color: #fff;
}

.aservice img {
    display: block;
    width: 100%;
}


.aservice h2 {
    background-color: #fff;
    margin: 0;
    font-size: 16px;
    padding: 5px 4px;
    border-bottom: none;
}

.aservice p {
	padding: 0px 5px;
	margin: 0;
	line-height: 1.35em;
	}


/***** new services style  ****/
#services {background-color: #113366;}
.aservice {background-color: #fff;color: black;/* box-shadow: 0 0 6px #999; */}
.aservice h2 {background-color: #fff;color: #9AB413;}





/******************************** INSIDE PAGES  ********************************/



article,aside { display: table-cell; vertical-align: top; padding: 0 20px; line-height: 1.5em; }
article ul { list-style: disc; padding-left: 20px;}
article ul li { padding: 5px 0; }


aside img, aside .videocontainer, .bodyimage { margin-top: 25px; border: 5px white solid; box-shadow: 1px 1px 5px black; max-width: 360px;}
aside p {font-size: 1em;}


/*** zoom cursor for naturescape article on water wells page ***/
img#naturescape { cursor: zoom-in; }

.callout {background-color: #eee; color: #9AB413; font-style: italic; font-size: 1.5em; padding: 10px; border: dotted 2px #999;}

#charles {background-color: #eeeeee;}
#award {float: right;}


/******************************** FOOTER  ********************************/



#questions { width:100%;background: #9AB413;text-align: center;/* margin-top: 80px; */}
#questions p {max-width: 1600px; margin: 0 auto; padding: 20px; font-size: 2em; color: #000;}



footer {
    width: 100%;
    margin: 0px auto 0 auto;
    padding: 10px;
    position: relative;
    overflow: hidden;
    background-color: #136;
    color: #fff;
    clear: both;
}

#footerbar {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: top;
}


footer a, footer strong {
    color: #9AB413;
}



#address, #locations, #footerlinks, #footerform {
    width: 25%;
    min-width: 150px;
    padding: 20px;
    vertical-align: top;
}
#locations {width: 40%;}


#footerlogo { width: 130px;}
#address { font-size: 1.2em; margin-right: 0; }

footer .phone {color: #9AB413; font-size: 1.5em;}
footer .emails{ font-size: 0.75em;}
footer #fax {font-size: 0.75em; }
#locations { font-size: 12px; }

#footerlinks li { line-height: 2em; }


#footerform label { display: block; margin-top: 5px; }
#footerform ol { list-style: none; }
#footerform li { margin-bottom: 7px; border: none; }
#footerform textarea { height: 4em; width: 100%; color:#000; }
#footerform input {width: 100%; color:#000;}
#footerform button { background-color: #9AB413; border: none; height: 1.5em; padding: 2px 15px; border-radius: 10px; }

#footerform .msg {background:#ddd; color:red; font-size: 12px; padding: 3px 5px; border-radius: 7px;}
#footerform input.error{border: solid 1px red;}
#footerform a.hide {background-color:#ccc; padding: 5px; color: black; font-size:16px; border: solid 1px #999; display: block; float: right;}
#footerform .msg li{padding: 0; margin:0; border:none;}
#footerform .success {color: green; font-size: 16px; font-weight: bold; padding: 9px 4px; overflow: hidden; position: relative; }

.noshow {display:none;}








/******************************** MEDIA QUERIES  ********************************/


@media  (max-width: 1000px) {
	.callnow {font-size: 20px;}
    header { background-color: #136; background-image: url(img/sky.jpg) !important; position: relative !important;}
    img#safe {height: 90px; margin-top: 5%;}
    nav { font-size: 10px; }
    nav ul li a {padding: 7px;}
    h1 {font-size: 2.7em;}
    .homepage h2 { font-size: 15px; }
	.homepage h3 { font-size: 2.5rem; }
    .aservice h2 {font-size: 15px;}
    .aservice p {height: 10em;}
	aside img {width: 250px;}
    #whyus li {font-size: 1em;}
    #address .phone {font-size: 1.2em;}
    .homepagedirt .maincontent {background: transparent url(img/borehole-sm.jpg) repeat-y 95% !important;}
    .flex-caption {font-size: 1.5em; padding: 5px 10% 5px 10px;}
	#safe {display:none;}
}


@media  (max-width: 767px) {
    nav ul li {width: 33.33333333%; border: #bbbbbb 1px solid;}
	nav ul li:first-child {display: none;}
    h1 {font-size: 2.5em;}
    #specialties {clear: both; width:100%;}
    #intro {width:100%; float: none;}
    .aservice {width: 48% !important; float: none; text-align: center;width: 50%; margin: 10px 0;}
    .aservice h2 {font-size: 14px;}
    .aservice p {height: 7em;}
    #whyus { float: none; margin:0 auto; width:auto;}
    #whyus ul {margin:0 auto;}
    #clients { width: 45%}
    #testimonials {clear:left;width: 100%; background-image: none;}
    footer .widget {width: 100% !important; margin: 20px 0; text-align: center;}
    #locations strong {display: block;}
    #footerlinks {clear:left;}
    #footerlinks li {border: none;}
    article,aside { display: block; padding: 20px;}
    aside img { width:100%; max-width:100%;}
    .flex-caption {font-size: 1.4em; }
    #specialties h4 {font-size: 1.5em;}
    #footerbar {flex-direction: column;}
	.testimonial { float:none; width:90%; margin: 20px auto; }
	 #logo {margin:10px auto 0; width: 300px; float:none;}
    .logobar {float: none; margin:0 auto; text-align: center;}
    .callnow { display: block; float: none; clear: left; font-size: 1.2em; margin-top:0;}
    #award {width: 200px;}
}


@media  (max-width: 650px) {

    .flex-caption {font-size: 0.8em; padding: 4px 10% 4px 10px; }
    h1 {font-size: 1.7em;}
    .aservice {}
    .aservice p{height: auto;padding-bottom: 5px;line-height: 1.3em;}
    .callout { width:100%; margin:0;}
    article,aside {padding: 0;}
	#questions {font-size: 1em;}
}


@media  (max-width: 320px) {
    .callnow {font-size: 1.2em; margin-top: 15px;}
    nav ul li {width: 50%;}
    h4 {font-size: 1.7em;}


    #whyus {width: 100%;}
    #clients {width: 100%; margin-top: 20px;}

}



@media  (min-width: 1024px) {
    #directpush article img {float:left; margin-right: 10px;}

}