﻿/*===================== 
	Color information
	
	- Deep Red #93191c;
	-
	-
	-
		 
=======================*/
/*===================== 
	CSS reset/normalize 
=======================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	@Font-Face 
=======================*/


/*===================== 
	base styles 
=======================*/

html {
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
	}

body {
	font-family: 'Montserrat', sans-serif;
	background: #333;
    margin: 0;
	padding:0;
	}

svg:not(:root) {overflow: hidden;/*reset*/}
	
.clear { clear: both;}

img { border: 0;} 
	
/*===================== 
	typography 
=======================*/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}
	h1 {font-size: 24px; padding: 2% 0;}
	h2 {font-size:28px; padding: 1% 0 2% 0;}
	h3 {}
	h4 {}
	h5 {}
	h6 {}

p {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	padding: 0 0 1% 0;
	}

.bold {font-weight: bold;}
.white{color:#fff;}
.center{text-align: center;}

/*===================== 
	link styles 
=======================*/

a:focus {outline: thin dotted;/*reset*/}
	
a,
a:link, 
a:visited, 
a:active {
	outline: 0;/*reset*/
    color: #000000; 
    text-decoration:none;
	}
	a:hover  {
		outline: 0;/*reset*/
		text-decoration: none;
		color: #ccc;
		}  

/*===================== 
	header styles 
=======================*/

header {width: 100%; background: #fff; display: block;}

#top_bar{
	width:100%;
	background:#93191c;
	text-align: right;
}
#top_bar p{
	color:#fff;
	display: inline;
	line-height: 30px;
	padding:0 0 0 20px;
}
#top_bar a{
	color:#fff !important;
}

div.phone{
	float:right;
	width:50%;
	text-align: right;
	font-size:30px;
	padding:3% 4% 2% 0;
	font-weight: 700;
}

img.main_logo{float:left; display: block; padding:2% 0 1% 4%;}

#top_bar p.pad-right{padding-right:4%;}

/*===================== 
	nav styles 
=======================*/

/***** Start of primary nav ******/
#menu-button{display: none;}
nav.mobile { display:none;}

nav.primary {
	padding:0 3% 0 0;
	display:block;
	margin:0;
	max-width: 1000px;
	position:relative;
	float: right;
	}
	nav.primary ul {
		margin:0; 
		padding:0;
		}
		nav.primary ul li {
			display:inline-block;
			margin:0;
			list-style-type:none; 
			}
			nav.primary ul li a {
				color:#000;
				font-size:18px;
				text-decoration:none;
				border-top: 4px solid #fff;
				padding:5px 24px 10px 24px;
				display:block;
				margin:0;
				text-transform:uppercase;
				-webkit-transition:.4s ease-in;  
				-moz-transition:.2s ease-in;  
				-o-transition:.2s ease-in;  
				transition:.2s ease-in;	
				font-weight:600;
				}	
			nav.primary ul li a:hover {
				border-top: 4px solid #93191c;
				}
			/* Appearance of the sub-level links */
			nav.primary ul li li a { 
				font-size:16px;
				line-height:16px;
				padding:10px 0;
				color:#fff;
				background: #181818;
				text-align:center;
				border-right:none;
				border-left:none;
				border-bottom: #fff solid 1px;
				border-top:none;
			}
			/* Appearance of the sub-level links on hover */
			nav.primary ul li li a:hover { 
				border-top:none;
				background:#93191c;
			}
/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
nav.primary ul ul {
    display: none;
    position: absolute; 
}
nav.primary ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
nav.primary ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 100;
	width:330px;
}
nav.primary ul ul li {
    float: none; 
	width: 230px;
    position: relative;
    margin:0;
}
/******** End of primary Nav ***************/

/*===================== 
	content styles 
=======================*/

/********* Grid and hover effect ************/
.grid {
	position: relative;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0;
	width: 25%;
	max-height:294px;
	background: #000;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	width: 100%;
	height:100%;
	opacity: 1;
}
.grid figure figcaption {
	font-size: 20px;
	z-index:1100;
	position:relative;
	background:rgba(0,0,0,.6);
	display:block;
	height:100%;
	width:100%;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
	-moz-transition: all .5s ease; /* Firefox */
	-ms-transition: all .5s ease; /* IE 9 */
	-o-transition: all .5s ease; /* Opera */
	transition: all .5s ease;
}
.grid figure:hover figcaption{
	opacity:0;
	visibility:hidden;
}

/*
.grid figure figcaption {
	padding: 1%;
	color: #fff;
	font-size: 30px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}*/

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
	letter-spacing: 1px;
	font-size: 30px;
	color:#fff;
	padding:25% 0 0 0;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 75%;
	color:#fff;
}

/*---------------*/
/***** Romeo *****/
/*---------------*/

figure.effect-romeo {
	/*-webkit-perspective: 1000px;
	perspective: 1000px;*/
}

figure.effect-romeo img {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,0,300px);
	transform: translate3d(0,0,300px);
}

figure.effect-romeo:hover img {
	opacity: 0.8;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
/*
figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 1px;
	background: #fff;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

figure.effect-romeo:hover figcaption::before {
	opacity: 0.5;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
	transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure.effect-romeo:hover figcaption::after {
	opacity: 0.5;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
	transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure.effect-romeo h2,
figure.effect-romeo p {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-romeo h2 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure.effect-romeo p {
	padding: 0;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure.effect-romeo:hover h2 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure.effect-romeo:hover p {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}*/


/*===================== 
	slideshow styles 
=======================*/
.banner img{width:100%;}


/*===================== 
	form styles 
=======================*/
form.search{
	width:100%;
	box-sizing: border-box;
}
form.search select{
	width:100%;
	padding:9px 10px;
	box-sizing: border-box;
	display: inline-block;
}
form.search input, form.search textarea{
	width:100%;
	padding: 9px 10px;
	box-sizing: border-box;
	display: inline-block;
	font-family:inherit;
}

form.search input.searchButton{
	width:50%;
	display: block;
	margin: 30px auto 20px auto;
	background: #93191c;
	color:#fff;
	font-size: 21px;
	font-weight:bold;
	border:none;
}

form.search input.searchButton:hover{
	cursor: pointer;
	background: #000;
	color:#fff;
}

form.search input::-webkit-input-placeholder, form.search textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000;
}
form.search input::-moz-placeholder, form.search textarea::-moz-input-placeholder { /* Firefox 19+ */
  color: #000;
}
form.search input:-ms-input-placeholder, form.search textarea::-mx-input-placeholder { /* IE 10+ */
  color: #000;
}
form.search input:-moz-placeholder, form.search textarea:-moz-placeholder { /* Firefox 18- */
  color: #000;
  opacity: 1;
}
form.search input::placeholder, form.search textarea::placeholder{
	color: #000;
    opacity: 1;
}

.agfilter, .consfilter, .truckfilter {
    width: 31%;
    margin: 1%;
    display: inline-block;
	background: #333;
	border:none;
	color:#fff;
	font-weight: 400;
	font-size: 16px;
	padding: 8px 0;
}
.agfilter:hover, .consfilter:hover, .truckfilter:hover {
	background: #93191c;
	cursor: pointer;
}
.agselected, .consselected, .truckselected{
	background: #93191c;
	color:#fff;
}

/*===================== 
	layout styles 
=======================*/

.wrap {
	width: 100%;
	margin: 0;
	background:#fff;
	}
.page_wrap {
	width: 100%;
	margin: 0;
	border-top: 4px solid #93191c;
	background:#fff;
	}
.search_wrap{
	width:100%;
	background: #fff;
}
.cta-buttons{
	width:100%;
	margin:-4px 0 0 0;
	padding:0;
}
.container {
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
	padding:2%;
	}

.container_page {
	margin: 0 auto;
	box-sizing: border-box;
	padding:2%;
	}
	
.col-1-6 { width: 16%; box-sizing:border-box;}
.col-1-5 { width: 20%; box-sizing:border-box;}
.col-1-4 { width: 23.2%; box-sizing:border-box;float: left; margin: 10px 8px;}
.col-1-3 { width: 33%; box-sizing:border-box;}
.col-1-2 { width: 48%; box-sizing:border-box; float: left; margin: 10px 8px;}
.col-2-3 { width: 65%; box-sizing:border-box;}
.col-3-4 { width: 74%; box-sizing:border-box; float: left; margin: 10px 8px;}
.col-4-4 { width: 98%; box-sizing:border-box; float: left; margin: 10px 8px;}

.flex{
	display: flex;
	width:100%;
}
.left-half-home{
	background: #93191c;
	box-sizing: border-box;
	margin: auto;
	width:50%;
	height: 480px;
	padding:5% 8% 0 8%;
}
.right-half-home{
	margin: auto;
	width:50%;
	height: 480px;
}
.right-half-home iframe{
	width:100% !important;
}

/*
===================== 
	footer styles 
=======================
*/

footer {
	margin: 0;
	width: 100%;
	background: #333;
	}
	
a.footerlink:link,
a.footerlink:visited, 
a.footerlink:active {
	text-decoration: none; 
	font-size:13px;
	color: #ababaa;
	}
	a.footerlink:hover {
		text-decoration:none; 
		font-size:13px;
		color: #ababaa;
		}

.footertext {
	font-size:13px; 
	color:#ababaa;
	}

.smallfootertext {
	font-size:10px; 
	color:#ababaa;
	}

.divfooter {
	max-width:630px; 
	text-align:center; 
	margin:0 auto;
	padding:1% 0;
	color:#ababaa;
	}

/*========================== 
	  search styles 
============================

/*----------DETAILED SEARCH----------------------------*/

.detailed-search-wrap {
	background: #fff;
	padding: 60px 0;
	

}

.detailed-search-wrap .content {
	width: 85%;
	margin: 0 auto;
}

.detailed-form {
	margin: auto;
}
.clear {
	clear: both;
}
.detailed-row {
	margin: 15px auto;
	font-size: 18px;
	display: flex;
	align-items: center;
}
.column3 {
	width: 33%; justify-content: flex-start; margin: 3px;
}.column4 {
	width: 33%; justify-content: flex-start; margin: 3px;
}

.detailed-search input[type='submit'] {
	font-size: 16px;
	background: #93191c;
	padding: 15px 0;
	width: 100%;
	color: #fff;
	border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	outline: none;
	border: none;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-webkit-border-radius: 0;
	-webkit-appearance: none;
	border-radius: 0;

}
.detailed-search input[type='submit']:hover{
	background:#522b1c;
	cursor: pointer;
	
}
.detailed-search input[type='text'] {
	width: 100%;
	margin: 2px 0;
	padding: 0 8px;
	font-size: 15px;
	height: 40px;
	background-color: #f9f9f9;
	border: 1px solid #bebebe;
	box-sizing: border-box;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.detailed-search-wrap h3 span {
	color: #d7d7d7;
}

.detailed-search-wrap main {
  width:100%;
  padding: 50px;
  margin: 0 auto;
}

.detailed-search-wrap section {
  display: none;
}

.detailed-search-wrap label {
  display: inline-block;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

.detailed-search-wrap label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

/*label[for*='1']:before { content: '\f1cb'; }
label[for*='2']:before { content: '\f17d'; }
label[for*='3']:before { content: '\f16b'; }
label[for*='4']:before { content: '\f1a9'; }*/

.detailed-search-wrap label:hover {
  color: #888;
  cursor: pointer;
}

.detailed-search-wrap input:checked + .detailed-search-wrap label {
  color: #818181;
  border: 1px solid #ddd;
  border-top: 2px solid #93191c;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}


/* NOUI SLIDER */
.detailed-search-wrap .hp-slider .example-val {padding: 5px 0;}
.detailed-search-wrap .noUi-target{position: relative; direction: ltr}
.detailed-search-wrap .noUi-origin{position: absolute; right: 0; top: 0; left: 0; bottom: 0; border-radius: 2px}
.detailed-search-wrap .noUi-handle{position: relative; z-index: 1}
.detailed-search-wrap .noUi-marker, .detailed-search-wrap .noUi-pips, .detailed-search-wrap .noUi-tooltip, .detailed-search-wrap .noUi-value{position: absolute}
.detailed-search-wrap .noUi-horizontal{height: 12px; z-index: 0}
.detailed-search-wrap .noUi-horizontal .noUi-handle{width: 25px; height: 21px; left: -13px; top: -6px}
.detailed-search-wrap .noUi-background{background: #ccc;}
.detailed-search-wrap .noUi-connect{background: #fff !important; border: 1px #000 solid;}
.detailed-search-wrap .noUi-target{width: calc(95% - 15px); margin: 15px auto 0 auto;}
.detailed-search-wrap .noUi-handle{background: #93191c !important; border: 1px solid #ccc; border-radius: 3px;}
.detailed-search-wrap .noUi-handle:after, .detailed-search-wrap .noUi-handle:before{content: ""; display: block; position: absolute; height: 12px; width: 1px; background: #E8E7E6; left: 10px; top: 3px}
.detailed-search-wrap .noUi-handle:after{left: 12px}
.detailed-search-wrap .noUi-pips-horizontal{padding: 5px 0; height: 10px; top: 100%; left: 0; width: 100%}
.detailed-search-wrap .noUi-marker-horizontal.noUi-marker{margin-left: -1px; width: 1px; height: 5px; background: #777;}
.detailed-search-wrap .example-val{font-size: 12px; font-weight: 600; color: #000;} .detailed-search-wrap .example-val span{font-weight: 400;}

.detailed-search-wrap #slider-price-value-lower:before, .detailed-search-wrap #slider-price-value-upper:before{content: '$'; padding-right: 2px}


/*========================== 
	  Inv styles 
============================*/

#inv{padding: 5% 0;}
#inv *:not(.fa):not(.far):not(.fas):not(.fab):not(.material-icons){font-family: bahnschrift, urw-din, sans-serif!important;} /* Reset font, ignore icons */

.listing-top-right a, .lower-detail-data-left button, .send-email-btn, .media-buttons a, .media-buttons button, .faceted-search, .listing-dealer-info a, .view-listing-details-link, .main-detail-data .contact-options a, .fin-calc-btn-mobile, .selected-facet, .page-nav, .apply-button, .back-button, .calculator-btn, .mobile-done-button {
    -moz-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
}


.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label input {margin: 2px 3px 3px 4px;}
.faceted-text-input-searchType .search-type input[type=checkbox], .faceted-text-input-searchType .search-type  input[type=radio] {margin: 0px 3px 0px 6px;}


.bread-crumbs-heading .return-links .return-links-link span, #no-compare-listings, .bread-crumbs-heading .return-links .return-links-link i {color:#93191c !important;}
.view-listing-details-link{color: white !important;}

.hosted-content .attachment-search .search-checkboxes label .row {margin-left:0 !important;margin-right:0 !important;margin-bottom:0px !important;}

.view-listing-details-link, .selected-facet, .view-listing-details-link, .buy-now-link, .check-availability-link, .email-seller-link, .offer-btn, .buy-btn, .dealer-phone-mobile, .offer-btn-mobile, .send-email-btn-mobile, .send-wholesale-email-btn-mobile, .fin-calc-btn-mobile, .mobile-breadcrumb, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button, .dealer-btns-bottom a {background:#93191c !important;}

.selected-facet, .dealer-phone-mobile, .offer-btn, .offer-btn-mobile, .fin-calc-btn-mobile, .send-wholesale-email-btn-mobile, .send-email-btn-mobile, .buy-now-link, .view-listing-details-link, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button{border: solid 1px #93191c !important; transition: ease all 0.2s !important;}

.selected-facet:hover, .dealer-phone-mobile:hover, .offer-btn:hover, .offer-btn-mobile:hover, .fin-calc-btn-mobile:hover, .send-wholesale-email-btn-mobile:hover, .send-email-btn-mobile:hover, .buy-now-link:hover, .view-listing-details-link:hover, .main-detail-data .contact-options a:hover, button.g-recaptcha.button:hover, .page-nav:hover, .apply-button:hover, .mobile-done-button:hover, .dealer-btns-bottom a:hover {background: #fff !important; color: #93191c !important;}

.check-availability-link, .email-seller-link, .video-chat-link, .faceted-search, .faceted-show-all-btn, .cs-btns a, .calculator-btn {background: #000 !important; border: solid 1px #000 !important; transition: ease all 0.2s !important;}
.check-availability-link:hover, .email-seller-link:hover, .video-chat-link:hover, .faceted-search:hover, .faceted-show-all-btn:hover, .cs-btns a:hover, .calculator-btn:hover {background: #fff !important; color: #000 !important;}

.list-content .list-title .list-listings-count, .list-content .list-main-section .list-container .list-listing .listing-top .listing-top-left .listing-main-stats .price, #parts-content .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count, #inv .error-message, #inv .info, .detail-content .detail-main-body .main-detail-data .detail-price, .detail-content .search-results, .list-content .list-top-section .listing-option-bar .list-listings-count, .detail-price, .compare-price, .compare-title {color: #000 !important;}
 
/* heading */
.list-content .list-title .list-title-text, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title, .main-detail-data .detail-title, .parts-title-text {
	padding-left: 4px; 
}

.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label, .part-detail-additional-data .data-label, .part-detail-content .detail-contact-bar {background: #000 !important;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .list-page-nav, .contact-options a {background: #000 !important;}
.list-main-section .contact-options a {border: #000 solid 1px !important; transition: ease all 0.2s !important;}
.list-main-section .contact-options a:hover {background: transparent !important; color: #000!important;}

.detail-content .dealer-info .phone-and-email .send-email-btn, .list-content .list-listing-mobile .dealer-phone-container a, .back-button {border-color: #000!important; color: #000!important;}

.material-icons, .collapsible-content a {color:#fff!important;}

#parts-content .parts-bottom-section .parts-list-view .parts-list-content .parts-listing-container .parts-listing-column .parts-button.view-details {background-color: #000!important;}

.detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile{margin-right:0!important;}

.detail-content .detail-main-body .main-detail-data .details-fin-calc .detail-btn-calc{height: 48px !important; box-sizing: border-box;}


/*========================== 
	  Responsive styles 
============================*/
@media screen and (max-width: 1260px)  {
	
	.grid figure h2 {padding: 15% 0 0 0; font-size: 24px;}
	.flex{
		display: block;
		width:100%;

	}
	.left-half-home{
		box-sizing: border-box;
		margin: auto;
		width:100%;
		height: auto;
		padding:5% 8% 5% 8%;
	}
	.right-half-home{
		margin: auto;
		width:100%;
		height: 150px;
	}
	
	nav.primary ul li a {
		font-size:16px;
		padding:5px 10px 10px 10px;
	}

}

@media screen and (max-width: 1070px)  {
	
	.agfilter, .consfilter, .truckfilter {width: 46%;}
	.col-3-4 { width: 95%;}
	.col-1-4 { width: 46%;}
}

@media screen and (max-width: 820px)  {
	
	.grid figure h2 {padding: 18% 0 0 0; font-size: 24px;}
	.grid figure {width: 50%; max-height: 294px;}
	
	nav.primary ul li a {
		font-size:14px;
		padding:5px 16px 10px 16px;
	}
}

@media screen and (max-width: 760px)  {

	/*==============================
		Mobile Nav Styles			
	================================*/	
	nav.primary{display:none;}
	#menu-button{ 
		width: 100%;
		display: block;
		font-size: 24px;
		position: relative;
		text-align: center;
		line-height:60px; 
		z-index: 2000; /* needs to be lower than nav.mobile, adjust as needed */
		background: #93191c;
		}
		#menu-button a{
			 color:#FFFFFF;
			 text-decoration: none;
			 padding:0;
			 font-weight:normal;
		  }
	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		left: -250px;
		width: 250px;
		height: 100%;
		background: #333;
		z-index: 3000; /* needs to be higher than #menu-button, adjust as needed */
		overflow:auto;
	}
	/* MENU HEADER SOCIAL MEDIA */
		nav.mobile .social-media {
			position: relative;
			text-decoration: none;
			display: inline-block;
			font-size:16px;
			word-spacing:13px;
			padding:0 0 0 15px;
			color: #ccc !important;
		}

		nav.mobile .social-media a:link, nav.mobile .social-media a:visited {color:#ccc; text-decoration:none;}
		nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:#fff; text-decoration:underline;}

	/* MENU HEADER STYLES */
	nav.mobile .mobile_top {
		position: relative;
		display:block;
		padding: 0;
		margin:15px 0 10px 0;
		color: #999;
		font-size: 18px;
		font-weight: 400;
	}

	/* MENU CLOSE 'X' BUTTON */
	nav.mobile .menu-toggle {
		position: absolute;
		padding: 3px 8px 3px;
		font-family: Arial, sans-serif;
		font-size:24px;
		font-weight: bold;
		line-height: 1;
		background: #222;
		color: #999;
		text-decoration: none;
		top:-4px;
		right:13px;
	}
	nav.mobile .menu-toggle:hover { /* Menu close button on hoveer */
		color: #fff;
	}

	/* MENU LIST STYLE */
	nav.mobile ul {
		list-style: none;
		font-weight: 300;
		margin:0;
		padding:0;
	}
	nav.mobile ul li {
		border-top: 1px solid #454545;
		border-bottom: 1px solid #151515;
		position:relative;
	}

	/* FIRST LEVEL */
	nav.mobile ul li a {
		position: relative;
		display: block;
		font-size:15px;
		padding: 10px;
		color: #fff;
		text-decoration: none;
		border-left:4px #333 solid;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	nav.mobile ul li a:hover {
		background:rgba(45,45,45,0.5); 
		color: #fff; 
		border-left:4px #C8102E solid; /* border highlight - Change to fit match site colors */
	}

	/* SECOND LEVEL */
	nav.mobile ul li li:last-child {border:none;}
	nav.mobile ul li li a {
		background: #444;
		position: relative;
		display: block;
		padding: 10px 10px 10px 15px;
		border-left:4px #444 solid;
		color: #ccc;
		text-decoration: none;
	}
	nav.mobile ul li li a:hover {background:rgba(65,65,65,0.5);}

	/* THIRD LEVEL */
	nav.mobile ul li li li:last-child {border:none;}
	nav.mobile ul li li li a {
		background: #555;
		position: relative;
		display: block;
		padding: 10px 10px 10px 25px;
		color: #ccc;
		text-decoration: none;
		border-left:4px #555 solid;
	}
	nav.mobile ul li li li a:hover {background:rgba(85,85,85,0.5);}

	nav.mobile ul li .click{/* dropdown menu idicator arrow be sure to include this image with your image files */ 
		position:absolute;
		display:block;
		cursor:pointer;
		z-index: 12399994;
		top:0;
		right:0;
		width:auto;
		height:auto;
		padding: 17px 20px;
		color:#fff;

	}
	.nav-footer {color:#fff; position:relative; text-align:center; font-size:14px; line-height:16px; padding:15px 0;}

	/* FONT AWESOME ICONS */
	nav.mobile ul li a i{
		width:25px;
		padding:8px 3px;
		margin:0 6px 0 0;
		text-align:center;
		background:#292929;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	nav.mobile ul li .fa-chevron-down {color:#999;}
	
	.banner img{display:none;}
	#top_bar{ display: none; }

	div.phone{
		float:none;
		width:100%;
		text-align: center;
		font-size:26px;
		padding:0 0 2% 0;
		font-weight: 700;
	}

	img.main_logo{float:none; display: block; padding:2% 0 1% 0; margin:auto;}
	.cta-buttons{margin:0;}
	
	.detailed-row {
	display: block;
}
.column3 {
	width: 100%; 
}.column4 {
	width: 100%; padding-bottom: 30px; 
}
}

@media screen and (max-width: 460px)  {
	.grid figure {width: 100%; max-height: 294px;}
	
	.agfilter, .consfilter, .truckfilter {width: 95%;}
	.col-1-4 { width: 95%;}
}
