﻿/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address, img {  
    display: block;  
} 

/*-------- COLORS --------
blue: #0178b1;
dark blue: #064c78;
yellow: #fff200;
*/

/***** END RESET *****/

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES ---------------------------------------*/

body {font-family: 'Montserrat', sans-serif !important; font-size:15px; line-height: 26px; -webkit-text-size-adjust:none; background: #fff; color: #064c78;overflow-x:hidden !important;}
h1 { font-size: 32px; color:#0178b1; padding-bottom: 15px; text-align:center; line-height: 40px;}
h2 {font-size: 22px; text-align:center;color:#064c78;}
h3 {font-size:35px; color: #0178b1; font-weight: 700; text-align: center;}
h3 a{ color: #0178b1;}
h4{ font-size: 20px; text-transform: uppercase; color: #064c78; font-weight: 700;}
h5{ font-size: 18px;color: #0178b1; font-weight: 700; padding-bottom: 8px;}
a:link, a:visited, a:active {text-decoration:none;}
a:hover { color:#0178b1;}
strong { font-size:16px;}

hr{ border: 1px solid #0178b1; width:35%;}

#right{float: right;}
.left{text-align:left;}

/*-------- HEADER STYLES -------------------------------------*/
.header {width: 100%; background-color:#0178b1;}
.header-inner{ width: 98%;}
.header-inner p{ text-align: right; color: #fff;  font-size: 14px; padding: 8px 0px 8px 30px; display: inline-block; float:right;}
.header-inner img{width: 38px; display: inline-block; float:right; padding: 5px 0px 5px 25px;}
.header-inner a{color:#fff;}
.logo img {position: absolute; z-index: 9999; left: 12%; width: 100%; max-width:218px;}


/*-------- LAYOUT STYLES ---------------------------------------*/

.cycle-slideshow{width: 100%;}
.cycle-slideshow img{width: 100%; }

.wrapper { width: 100%; margin: 0 auto; background: #f3f3f3;}
.wrapper-inner {padding: 30px 0px; width: 80%; margin: 0 auto;}
.wrapper-inner p { text-align: center; margin: 0 auto; padding: 5px 0px;}
.wrapper-inner p a{color: #064c78;}
#pageimage{width: 100%;}
.two-cols {
	width: 48%;
	padding: 20px 0px;
	display: inline-block;
	vertical-align: top;
	text-align:center;
	float: left;
}
.two-cols a {color: #0178b1;}
.two-cols a:hover {text-decoration: underline;}
.two-cols img{display: inline-block; width: 38px;}

.three-cols {
	width: 25%;
	max-width: 100%;
	display: inline-block;
	vertical-align: top;
	padding: 15px 20px 10px 0px;
}
.three-cols img {max-width: 100%; height: auto; margin: 0 auto;}

#buttons{ color:#fff; border: 2px solid #fff; padding: 8px 14px;}
#buttons:hover{color:#0178b1; border: 2px solid #fff; background:#fff;}

#button{ color:#0178b1; border: 2px solid #0178b1; padding: 8px 14px; background: #f3f3f3; width:120px; font-size: 15px; font-family: 'Montserrat', sans-serif;}
#button:hover{color:#f3f3f3; border: 2px solid #fff; background:#0178b1;}
 
.feature{
	background:url(../siteart/feature.jpg);
	width:100%;
	height: 360px;
	color: #fff;
	border-top: 3px solid #fff200;
}

.feature-inner {
	padding: 3% 0px; 
	width: 80%; 
	margin: 0 auto;
}
.feature p{color:#fff; text-align: center; margin: 0 auto; padding: 8px 0px; font-size: 17px;}
.feature h1{color:#fff; padding: 10px 0px;}

.half{float:left; display:inline-block; width:45%; padding:30px 22px 40px 0px;}
.gallery img{display: inline-block; width:100%; max-width:291px; max-height: 164px;}

.quote-landing {display:flex; flex-direction:column; justify-content: center; align-items: center;}
a.specificbtn {
	color: #0178b1;
    border: 2px solid #0178b1;
    padding: 8px 14px;
    background: #f3f3f3;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
	text-decoration: none;
}
a.specificbtn:hover {
	color: #f3f3f3;
    border: 2px solid #fff;
    background: #0178b1;
	text-decoration: none;
}

/*-------- QUICK LINK IMAGES --------------------------------------------*/
 .quicklinks-text{
	position:absolute;
	text-align:center;
	display:block;
	width: 100%;
	color:#fff;
	font-size:22px;
	line-height: 25px;
	top:38%;
}
.quicklinks-text a{color:#fff;}
.quicklinks-text strong{font-weight:700; font-size: 22px;}
#quicklinks{
	position:relative;
	display:inline-block;
	width: 100%;
	max-width: 16.666667%;
	height:246px;
	margin: 0px -4px -8px 0px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover; 
	background-size: cover;
	-webkit-transition:all .3s ease;
	-ms-transition:all .3s ease;
	transition:all .3s ease;
}
#quicklinks:hover {
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
}
.straight{background:#000 url(../siteart/quick-links/straight.jpg) center center no-repeat;}
.straight:hover{background:#000 url(../siteart/quick-links/straight-on.jpg) center center no-repeat; }
.drop-in{background:#000 url(../siteart/quick-links/drop-in.jpg) center center no-repeat;}
.drop-in:hover{background:#000 url(../siteart/quick-links/drop-in-on.jpg) center center no-repeat; }
.flatbed{background:#000 url(../siteart/quick-links/flatbed.jpg) center center no-repeat;}
.flatbed:hover{background:#000 url(../siteart/quick-links/flatbed-on.jpg) center center no-repeat;}
.chassis{background:#000 url(../siteart/quick-links/chassis.jpg) center center no-repeat;}
.chassis:hover{background:#000 url(../siteart/quick-links/chassis-on.jpg) center center no-repeat; }
.intermodal-fiftythree{background:#000 url(../siteart/quick-links/intermodal-53.jpg) center center no-repeat;}
.intermodal-fiftythree:hover{background:#000 url(../siteart/quick-links/intermodal-53-on.jpg) center center no-repeat; }
.high-axle{background:#000 url(../siteart/quick-links/high-axle.jpg) center center no-repeat;}
.high-axle:hover{background:#000 url(../siteart/quick-links/high-axle-on.jpg) center center no-repeat; }
.intermodal-chassis{background:#000 url(../siteart/quick-links/intermodal-chassis.jpg) center center no-repeat;}
.intermodal-chassis:hover{background:#000 url(../siteart/quick-links/intermodal-chassis-on.jpg) center center no-repeat; }

/*--------------------------------- SCROLLING INVENTORY  --------------------------*/

.scrolling{ width:99.9%; height:92px; }
.banner {
	width:100%;
	height:92px;
	overflow:hidden;
	background: #fff;
	padding: 11px 0px 17px 0px;
	
}


/*------------------------ FRAMELESS STYLES --------------------------*/

.hosted-content .listings-wrapper .bold, .hosted-content .listings-wrapper .italic, .hosted-content .listings-wrapper h2, .hosted-content .listings-detail-wrapper .bold, .hosted-content .listings-detail-wrapper .italic, .hosted-content .listings-detail-wrapper h2, .hosted-content .listings-drilldown-wrapper .bold, .hosted-content .listings-drilldown-wrapper .italic, .hosted-content .listings-drilldown-wrapper h2 {font-family: 'Montserrat', sans-serif;  !important;} /* Font for Inventory to match rest of website */
.hosted-content{font-family: 'Montserrat', sans-serif;  !important;}
.hosted-content h1{ text-align: left !important; font-family: 'Montserrat' !important;}

.hosted-content h2 {color: #0178b1 !important;font-family: 'Montserrat' !important;}  /* Featured Listings/General Listings */
.hosted-content h3 {color: #064c78 !important; font-size:28px !important;font-family: 'Montserrat' !important;}
.hosted-content .listings-wrapper .listings-list .listing-banner h2{font-family: 'Montserrat' !important; line-height: 1em !important;}
.hosted-content .listings-wrapper .listings-list .category-banner h3{ font-size: 28px !important;font-family: 'Montserrat' !important; line-height:1.5em !important;}
.hosted-content .listings-wrapper .listings-list .listing-banner {background: none !important;} /* Featured Listings/General Listings Background */
.hosted-content .listings-wrapper .sort-box {background: none !important;} /* Background for Sort Order */

.listing-name a:link, .listing-name a:visited, .listing-name a:active {color: #0178b1;} /*Inventory Title Link Colors */
.listing-name a:hover {color: #0178b1;}

.hosted-content input[type='submit'], .hosted-content button[type='submit'], .hosted-content .btn, .hosted-content .button {background: #0178b1 !important;} /* View Details button */
.hosted-content .btn:hover, .hosted-content .button:hover {background: #064c78 !important;} /* View Details Button */


/*----------------------- FOOTER STYLES ---------------------------------*/

.footer-contact {width:100%; background: #0178b1; margin:0 auto; padding:20px 0;}

#footer-inner{width: 80%; margin: 0 auto; text-align:center; color:#fff;}

.footer-col{ display: inline-block; width: 30%; text-align:left; vertical-align:middle;}
.footer-col h1{ color:#fff; text-align:left;}
.footer-col a{color:#fff;}

footer {background:#064c78; padding:20px 0;}
#footercontent {width:80%; margin:0 auto; color:#fff;}

.footerleft {float:left;color: #fff; vertical-align: middle;}
.footerleft a{color:#fff;}
.footerleft a:hover{ text-decoration: underline;}
.footerright {float:right; text-align: right; font-size: 13px; line-height:15px; vertical-align: middle; }
.footerright a{color:#fff;}
.footerright a:hover{text-decoration: underline;}


/*------------------- FORM -------------------------------------*/
#formpage {vertical-align:top;}
#formpage div {vertical-align:top; padding:3px 5px;}

#formpage input {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}
#formpage textarea {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}

 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {border:1px solid #8e8d8d; color:#8e8d8d; vertical-align:middle; font-size:12px; line-height:normal; padding:5px; width:91%;}
#formpage input  {width:90%;}
#formpage input.larger  {width:90%;}
#formpage textarea {width:90%; height:85px;}

/* focus states of various types of fields */
#formpage input:focus,#formpage textarea:focus,#formpage select:focus {background:#FFF;  color:#000; border:1px solid #fbb714; 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:91.5%; margin:0; padding:5px 0; background:#fbb714 url('../siteart/submit_btn.jpg') repeat-x; border:2px #fbb714 solid; font-size:16px; font-weight:bold; color:#fff;}
#formpage input.button:hover {
	background:#background: #fbb714; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fbb714, #FBC951); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fbb714, #FBC951); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fbb714, #FBC951); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fbb714, #FBC951); /* Standard syntax */ 
	color:#fff text-shadow:none; border:2px #fbb714 solid;}

/*control the Captcha */
.captcha {width:99%; margin:0;}
.CaptchaPanel {margin:0 0 0 0 !important; padding:0 0 0 0 !important; text-align: left !important; line-height:normal !important;}
.CaptchaImagePanel {margin:0 0 0 0; padding:0 0 0 0;}
.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;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}  

/*---------------------------*/

/*-------- RESPONSIVE STYLES --------*/

@media screen and (max-width: 1300px) {
.logo img{left: 2%; top: 7px; width:18%;}
h3{line-height:40px;}


}

@media screen and (max-width: 1260px) {
	
	
}

@media screen and (max-width: 1200px) and (min-width: 650px) {


.footer-col{width:45%; padding: 10px 0px;}
}

@media screen and (max-width: 1024px){
.footerleft{float:none; text-align:center; font-size:14px;}
.footerright{float:none; text-align:center; padding-top: 20px;}
	
	#quicklinks{max-width: 100%; height: 350px;}
}

@media screen and (max-width: 818px){
.three-cols {width: 90%; text-align:left;}	
}

@media screen and (max-width: 750px) {
	.feature { height: 450px; }
}

@media screen and (max-width: 649px){
.header-inner p{ line-height: 18px;}

.two-cols{width: 90%; text-align:center; float:none;}
.half{width:100%; float:none; padding: 20px 0px;}
.gallery img{ width: 95%; max-width: 100%; max-height:100%;}
.gallery{ text-align:center; float:none;}


.feature h1{font-size:30px; line-height:30px;}
.footer-col{width:95%; padding: 10px 0px;}

}

@media screen and (max-width: 468px) {
	.feature { height: 550px; }
}

@media screen and (max-width: 414px){
.logo img{ width: 25%;}
	.feature { height: 650px; }

}
@media screen and (max-width: 320px){
.header-inner{ padding-top:18px; text-align:center;}
.header-inner p{ line-height: 10px; font-size: 13px;}
	
.logo img{ width: 35%;}

}
