/***** BEGIN RESET *****/

* {
    background:transparent;
    border:0;
    margin:0;
    padding:0;
    font-family:'ralewaymedium', Arial, sans-serif;
}
ol, ul {list-style: none;}
.clear {clear: both; height:0px; margin:0;}

/***** END RESET *****/

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on October 12, 2016 */
@font-face {
    font-family: 'ralewaymedium';
    src: url('../webfonts/raleway-medium-webfont.eot');
    src: url('../webfonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/raleway-medium-webfont.woff2') format('woff2'),
         url('../webfonts/raleway-medium-webfont.woff') format('woff'),
         url('../webfonts/raleway-medium-webfont.ttf') format('truetype'),
         url('../webfonts/raleway-medium-webfont.svg#ralewaymedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on October 12, 2016 */
@font-face {
    font-family: 'ralewaybold';
    src: url('../webfonts/raleway-bold-webfont.eot');
    src: url('../webfonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/raleway-bold-webfont.woff2') format('woff2'),
         url('../webfonts/raleway-bold-webfont.woff') format('woff'),
         url('../webfonts/raleway-bold-webfont.ttf') format('truetype'),
         url('../webfonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on October 12, 2016 */
@font-face {
    font-family: 'ralewayblack';
    src: url('../webfonts/raleway-black-webfont.eot');
    src: url('../webfonts/raleway-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/raleway-black-webfont.woff2') format('woff2'),
         url('../webfonts/raleway-black-webfont.woff') format('woff'),
         url('../webfonts/raleway-black-webfont.ttf') format('truetype'),
         url('../webfonts/raleway-black-webfont.svg#ralewayblack') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
	color:#000;
	font-size:18px;
	font-weight:normal;
	font-family: 'ralewaymedium';
	background:url('../siteart/layout/bg.jpg') no-repeat top center;
	background-size:cover;
	background-attachment:fixed;
	-webkit-text-size-adjust: none;
}

.wrap {width:96%; margin:0 auto; max-width:1230px;}

.show-tablet {display:none;}

.top-30 {margin-top:30px;}
.bottom-30 {margin-bottom:30px;}

.col2 {width:48%; float:left; margin-right:4%;}
.col2:nth-of-type(2) {margin-right:0;}

.show-768 {display:none;}


/*********** typography styles **/

p {margin-bottom:18px;}
.no-margin {margin:0 !important;}

.lt-green {color:#019b01;}
.dk-green {color:#017501;}
.black {color:#000;}
.white {color:#fff;}
.red {color:#ff0000;}

a {color:#019b01; text-decoration:underline;}
a:hover {color:#017501; text-decoration:none;}

strong {font-weight:normal; font-family: 'ralewaybold';}

.center-text {text-align:center;}
.sm-text {font-size:12px;}

h1 {
	color:#01ad01;
	font-size:28px;
	font-family: 'ralewaybold';
	font-weight:normal;
	margin-bottom:14px;
}

h2 {
	color:#01ad01;
	font-size:26px;
	font-family: 'ralewaybold';
	font-weight:normal;
	margin-bottom:12px;
}

h4 {
	color:#000;
	font-size:18px;
	font-family: 'ralewaybold';
	font-weight:normal;
	margin-bottom:3px;
}

h5 {
	color:#000;
	font-size:20px;
	font-family: 'ralewaybold';
	font-weight:normal;
	margin-bottom:3px;
}

h6 {
	color:#000;
	font-size:16px;
	font-family: 'ralewaymedium';
	font-weight:normal;
	margin-bottom:10px;
}

ul.list {list-style:disc; margin:0 0 18px 18px;}
ul.list li {list-style:disc;}

a.grn-btn {
	width:96%;
	display:block;
	max-width:400px;
	color:#fff;
	font-size:16px;
	font-family: 'ralewaybold';
	text-decoration:none;
	padding:5px 2%;
	text-align:center;
	background:#01ad01;
	margin:0 auto;
}
a.grn-btn:hover {background:#017501;}



/*********** header styles **/

header {width:100%; margin-bottom:50px;}

.logo {
	width:13.5%;
	display:block;
	margin:0 43.25%;
	position:absolute;
	z-index:9;
	top:10px;
	left:0;
}
.logo img {width:100%; height:auto; max-width:184px; display:block; margin:0 auto;}




/*********** nav styles **/

nav {background:#019b01; width:100%; z-index:3; margin-top:44px;}
nav ul {width:40%; float:left;}
nav ul.lt-side {margin-right:10%; text-align:right;}
nav ul.rt-side {margin-left:10%; text-align:left;}
nav li {position:relative; display:inline-block; zoom:1; *display:inline;}
nav.navigation li a:link, nav.navigation li a:active, nav.navigation li a:visited {
	color:#fff;
	font-size:15px;
	text-transform:uppercase;
	font-family: 'ralewaybold';
	font-weight:normal;
	display:block;
	text-decoration:none;
	padding:0 9px;
	line-height:40px;
}
nav.navigation li a:hover {background:#017501;}



/*********** content styles **/

.boxes {width:100%; display:block;}
.boxes a {
	width:23.5%;
	width:calc(23.5% - 20px);
	border:10px #017501 solid;
	float:left;
	margin-right:2%;
	display:block;
	text-align:center;
	height:277px;
	text-decoration:none;
}
.boxes a:hover {
	width:23.5%;
	width:calc(23.5% - 4px);
	border:2px #019b01 solid;
	height:293px;
}
.boxes a:nth-of-type(4) {margin-right:0%;}
.boxes a span {text-transform:uppercase; color:#fff; font-size:24px; padding-top:125px; display:block; font-family: 'ralewayblack';}
.boxes a:hover span {padding-top:133px;}

.boxes a.trucks {background:url('../siteart/boxes/trucks.jpg') no-repeat center; background-size:cover;}
.boxes a.trailers {background:url('../siteart/boxes/trailers.jpg') no-repeat center; background-size:cover;}
.boxes a.construction {background:url('../siteart/boxes/construction.jpg') no-repeat center; background-size:cover;}
.boxes a.services {background:url('../siteart/boxes/services.jpg') no-repeat center; background-size:cover;}
.boxes a.trucks:hover {background:url('../siteart/boxes/trucks-hover.jpg') no-repeat center; background-size:cover;}
.boxes a.trailers:hover {background:url('../siteart/boxes/trailers-hover.jpg') no-repeat center; background-size:cover;}
.boxes a.construction:hover {background:url('../siteart/boxes/construction-hover.jpg') no-repeat center; background-size:cover;}
.boxes a.services:hover {background:url('../siteart/boxes/services-hover.jpg') no-repeat center; background-size:cover;}

article {width:100%; background:url('../siteart/layout/90-white.png') repeat; padding:30px 0;}
article.lg-pad {width:calc(100% - 13%); padding:30px 6.5%;}
article.norm-pad {width:calc(100% - 6%); padding:30px 3%;}

.end-cap {width:1%; float:left; display:block; background:#01ad01; height:90px;}
.scroll-frame {
	width:98%;
	height:90px;
	float:left;
	overflow:hidden;
	display:block;
	background:#01ad01;
}
.scroll-frame iframe {width:100%; display:block; background:#01ad01; height:90px;}

.search-box {width:94%; background:url('../siteart/layout/90-white.png') repeat; padding:30px 3%;}
.quarter-btn {
	width:23.5%;
	margin:0 2% 10px 0;
	display:block;
	float:left;
	font-size:16px;
	background:#01ad01;
	text-align:center;
	padding:5px 0;
	color:#fff;
	font-family: 'ralewaybold';
}
.quarter-btn:nth-of-type(4) {margin-right:0;}
.quarter-btn.selected, .quarter-btn:hover {background:#017501;}

.inv {width:100%; display:block;}
.inv iframe {width:100%; background:#fff; height:2100px;}

.cycle-slideshow {width:100%; display:block; overflow:hidden; position:relative;}
.cycle-slideshow img {width:100%; height:auto; position:absolute; top:0; left:0;}
/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 2%; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 40px; width: 12px; height: 12px; 
    display: inline-block; color: #000; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #01ad01;}
.cycle-pager > * { cursor: pointer;}

.service-box {width:31.33333%; float:left; margin:0 2% 5px 0;}
.service-box:nth-of-type(4), .service-box:nth-of-type(7) {clear:left;}
.service-box img {
	width:100%;
	width:calc(100% - 4px);
	height:auto;
	border:2px #017501 solid;
	max-width:362px;
	margin-bottom:7px;
	display:block;
}

.contact-info {width:100%;}
.loc-map {width:100%;}
.loc-map iframe {width:100%; height:300px; display:block;}

.table {width:100%; display:block; margin-bottom:25px;}
.table .row {width:100%;}
.table .row:after {content:""; display:block; clear:both;}
.table .row.header {background:#01ad01; color:#fff;}
.table .row.on {background:#e6e6e6;}
.table .col3 {width:10.5%; margin:0 1%; float:left; padding:3px 0;}
.table .col4 {width:14.66666%; margin:0 1%; float:left; padding:3px 0;}
.table .col6 {width:23%; margin:0 1%; float:left; padding:3px 0;}
.table .col8 {width:31.33333%; margin:0 1%; float:left; padding:3px 0;}
.table .col12 {width:48%; margin:0 1%; float:left; padding:3px 0;}
.table .col24 {width:98%; margin:0 1%; padding:3px 0;}

.hero {width:100%; display:block; text-align:center; margin-bottom:15px;}
.hero img {
	width:100%;
	width:calc(100% - 4px);
	border:2px #000 solid;
	height:auto;
	max-width:700px;
	display:block;
	margin:0 auto;
}




/*********** footer styles **/

.foot {width:100%; display:block; margin-top:30px;}

.foot-logo {width:100%; display:block;}
.foot-logo img {width:100%; height:auto; max-width:110px; display:block; margin:0 auto;}

footer {
	background:#01ad01;
	display:block;
	color:#fff;
	font-size:14px;
	text-align:center;
	padding:15px 0;
	font-family: 'ralewaybold';
}

.loc {font-family: 'ralewaybold';}
.loc img {width:4%; height:auto; max-width:17px; vertical-align:middle;}
.phone {font-family: 'ralewaybold'; width:20%; display:inline-block; zoom:1; *display:inline; margin-top:5px;}
.phone img {width:5%; height:auto; max-width:17px; vertical-align:middle;}

a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-size:10px; color:#fff;}
a.footerlink:hover {text-decoration:none; color:#fff;}

.footertext {font-size:10px; color:#fff;}
.smallfootertext {display:none;}

.divfooter {width:100%; text-align:center; margin:15px auto 0 auto;}



/*********** form styles **/

#formpage .row {width:100%; display:block;}
#formpage .row:after {content:""; display:block; clear:both;}

#formpage .col2 {width:49%; float:left; margin-right:2%;}
#formpage .col2:nth-of-type(even) {margin-right:0%;}

#formpage .col4 {width:23.5%; float:left; margin-right:2%;}
#formpage .col4:nth-of-type(4) {margin-right:0%;}
#formpage .col8 {width:48.6%; float:left; margin-right:2.5%;}
#formpage .col8:nth-of-type(2) {margin-right:0%;}
#formpage .col-full {width:100%;}

#formpage label {display:block; margin-bottom:3px;}

#formpage input {
	width:100%;
	width:calc(100% - 12px);
	padding:6px 5px;
	border:1px solid #8e8d8d;
	color:#8e8d8d;
	font-size:12px;
	margin-bottom:10px;
	-webkit-border-radius:0;
}

#formpage textarea {
	width:100%;
	width:calc(100% - 12px);
	padding:6px 5px;
	border:1px solid #8e8d8d;
	color:#8e8d8d;
	font-size:12px;
	margin-bottom:10px;
	height:120px;
	-webkit-border-radius:0;
}

 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {
	width:100%;
	width:calc(100% - 2px);
	border:1px solid #8e8d8d;
	color:#8e8d8d;
	vertical-align:middle;
	font-size:12px;
	line-height:normal;
	padding:5px;
	-webkit-border-radius:0;
	margin-bottom:10px;
}


#formpage input.checkbox {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:13px;
    height:13px;
    display:inline;
    background-color:#fff;
 }

#formpage input.radio {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:15px;
    height:15px;
    display:inline;
 }




/* focus states of various types of fields */

#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {
	background:#8e8d8d; 
	color:#FFF;
	border:1px solid #16598d;
	outline-style:none;
}
#formpage input.radio:focus,
#formpage input.checkbox:focus {
	background:none; 
	border:0;
	outline-style:none;
}
 



#formpage input.button,
#formpage input.button:focus {
    width:100%; 
    margin:0;
    padding:5px 0;
    background:#01ad01;
	border:0;
	font-family: 'ralewaybold';
    font-size:16px;
	line-height:16px;
	font-weight:bold;
    color:#fff;
	-webkit-appearance: none;
}
#formpage input.button:hover {
	background:#017501;
	color:#fff;
}
 


/* for plain text next to an input field, if not using a table structure */
#formpage label.basic {
    color:#212121;
    font-size:13px;
    text-align:left;
}
#formpage label.checkbox {
  /*  color:#212121;*/
    font-size:13px;
    text-align:left;
    display:inline;
    padding:0;
}
 

/*control the Captcha */

.CaptchaPanel {
	margin:0 0 5px 0 !important;
	padding:0 0 0 0 !important;
	text-align: center;
	line-height:normal !important;
}

.CaptchaImagePanel {
	margin:0 0 0 0;
	padding:0 0 0 0;
}
.CaptchaImagePanel img {width:100%; height:auto; max-width:180px;}

.CaptchaMessagePanel {
	padding:0 0 0 0 !important;
	margin:0 0 0 0 !important;
	font-weight:normal !important;
	font-size:12px;
	line-height:14px;
}

.CaptchaAnswerPanel {
	margin:0 0 0 0;
	padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 0 0;
	padding:8px 0 8px 0 !important;
}
.CaptchaWhatsThisPanel a {color:#000; font-size:12px;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}








/*********** responsive styles **/
@media screen and (max-width:1300px) {
	nav.navigation li a:link, nav.navigation li a:active, nav.navigation li a:visited {font-size:13px;}
}
@media screen and (max-width:1160px) {
	.logo {width:16%; margin:0 42%;}
	
	nav.navigation li a:link, nav.navigation li a:active, nav.navigation li a:visited {font-size:12px; padding:0 6px;}
	
	.boxes a {
		width:23.5%;
		width:calc(23.5% - 20px);
		height:227px;
	}
	.boxes a:hover {
		width:23.5%;
		width:calc(23.5% - 4px);
		height:243px;
	}
	.boxes a span {font-size:20px; padding-top:100px;}
	.boxes a:hover span {padding-top:108px;}
	
	.loc img {width:3%;}
	.phone img {width:6%;}
	
}


@media screen and (max-width:1024px) {
	.show-tablet {display:block;}
	.hide-tablet {display:none;}
	
	body {font-size:16px;}
	p {margin-bottom:16px;}
	
	h1 {font-size:24px;}
	h2 {font-size:22px; margin-bottom:10px;}
	h6 {font-size:14px; margin-bottom:8px;}
	
	.logo {width:20%; margin:0 40%;}
	
	nav {margin-top:34px;}
	#simple-menu {
		float:left;
		background:url('../siteart/layout/mobile-nav-icon.png') no-repeat center center;
		height:40px;
		width:40px;
		display:block;
		cursor:pointer;
	}
	
	.boxes a span {font-size:18px;}
	
	#formpage label, .quarter-btn {font-size:14px;}
	#formpage input.button,
	#formpage input.button:focus {
		font-size:14px; line-height:14px;}
	
	.phone img {width:8%;}
}


@media screen and (max-width:768px) {
	.show-768 {display:block;}
	
	.top-30 {margin-top:15px;}
	.bottom-30 {margin-bottom:15px;}
	
	.col2 {width:100%; margin-right:0%;}
	
	.logo {width:24%; margin:0 38%;}
	
	.boxes a {
		width:49%;
		width:calc(49% - 20px);
		height:180px;
		margin-bottom:10px;
	}
	.boxes a:hover {
		width:49%;
		width:calc(49% - 4px);
		height:196px;
	}
	.boxes a:nth-of-type(2) {margin-right:0%;}
	.boxes a span {padding-top:85px;}
	.boxes a:hover span {padding-top:93px;}
	
	article {padding:15px 0;}
	article.lg-pad {padding:15px 6.5%;}
	.search-box, article.norm-pad {padding:15px 3%;}
	
	.service-box {width:48%;}
	.service-box:nth-of-type(4), .service-box:nth-of-type(7) {clear:none;}
	.service-box:nth-of-type(odd) {clear:left;}
	
	.contact-info {margin-top:25px;}
	
	.table {width:100%; overflow-x: scroll;}
	.table .row {min-width:750px;}
	
	.foot {margin-top:15px;}
	
}


@media screen and (max-width:640px) {
	body {font-size:14px;}
	p {margin-bottom:14px;}
	
	.logo {width:28%; margin:0 36%;}
	
	.quarter-btn {width:49%;}
	.quarter-btn:nth-of-type(2) {margin-right:0;}
	#formpage .col4 {width:49%;}
	#formpage .col4:nth-of-type(2) {margin-right:0%;}
	
	.phone {width:30%;}
	
}


@media screen and (max-width:480px) {
	h1 {font-size:20px;}
	h2 {font-size:20px; margin-bottom:8px;}
	h4, h5 {font-size:16px;}
	
	header {margin-bottom:40px;}
	.logo {width:32%; margin:0 34%;}
	nav {margin-top:24px;}
	
	.service-box {width:100%; margin:0 0% 5px 0;}
	
	#formpage .col2, #formpage .col4, #formpage .col8 {width:100%; margin-right:0%;}
}


@media screen and (max-width:375px) {
	.logo {width:40%; margin:0 30%;}
	
	.boxes a {height:100px; width:100%; margin-right:0%; width:calc(100% - 20px);}
	.boxes a:hover {height:116px; width:calc(100% - 4px);}
	.boxes a span {padding-top:40px;}
	.boxes a:hover span {padding-top:48px;}
	
	.loc img {width:4%;}
	.phone {width:100%;}
}


@media screen and (max-width:320px) {
	.logo {width:50%; margin:0 25%;}
}