﻿/***** 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 {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}



.left{float:left;}
.right{float:right;}
.flex{display: flex; align-items: flex-start;}
/*-------- BODY STYLES --------*/

body {
	background: #000;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/
header {}




/*---BODY--------------------------------*/
.show-md{display: none;}

.no-line-height{line-height: 0;}

/* SLIDES */
.slide-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 400;
	font-family: 'Roboto Condensed', sans-serif;
	pointer-events: none;
}
.slide-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 400;
	font-family: 'Roboto Condensed', sans-serif;
	pointer-events: none;
}
.slide-overlay:before{
    content: '';
    left: 0;
    right: 90%;
    background: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;	
}
.slide-overlay:after{
    content: '';
    left: 0;
    right: 81%;
    background: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    transform: skewX(-9deg);
}
#tagline-banner{
	background: #c0252c;
    color: #fff;
    width: 30%;
    text-align: left;
    padding: 10px;
    position: relative;
    margin-top: 6%;
    height: 208px;
}
#tagline-banner h1{
	font-weight: 400;
	font-size: 48px;
	line-height: 48px;
	margin-left: 20%;
	white-space: nowrap;
		position: absolute;
	right: -10px;
}
#tagline-banner h1:after{
	content: '';
    right: -24px;
    position: absolute;
    top: -10px;
    bottom: 0;
    border-color: transparent transparent transparent #c0252c;
    border-style: solid;
    border-width: 0px 0 227px 34px;
    height: 0px;
    width: 0px;
	z-index: -1;
	
}
#tagline-banner .extra-big-text{   
	font-size: 130px;
    font-weight: 900;
	line-height: 100px;
}

/* BANNER */

.banner{
	background: #c0252c;
}
.banner .heading-lg{
	font-size: 60px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color: #fff;
	text-align: center;
	padding: 10px;
}


/* BODY */

.bg-texture {
	background: url("/siteart/bg-truck.jpg") center center;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
}
.bg-black{background: #000;}

.vpad {padding-top: 6%; padding-bottom: 6%;}
.pad-top{padding-top: 6%;}
.wrapper{
	max-width: 1100px;
	padding: 15px;
	margin: 0 auto;
	display: block;
}

.heading{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 30px;
	font-weight: 700;
	margin-left: 18px;
}
.heading:before {
	content: '';
    width: 8px;
    height: 22px;
    background: #000;
    position: absolute;
    transform: skewX(-10deg) translate(-15px, 7px);
    -webkit-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

.bg-black .heading, .bg-black a{
	color: #fff!important;
}
.bg-black p{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #fff;
}
.bg-black .heading:before {
	background: #fff!important;
}

.heading-lg{
	font-size: 60px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color: #fff;
}

.flex{display: flex;}
.flex-wrap{flex-wrap: wrap;}

.col50{width: calc(50% - 45px); margin-right: 45px;}


.bg-texture p{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 30px;
}

.bg-texture p, .bg-texture .heading, .bg-texture .heading-lg, .bg-texture a{
		color: #000!important;
}

.bg-texture a[href^="tel:"]{
	font-weight: 700;
}

a.cta-btn, button.cta-btn{
    background: #c0252c;
    color: #fff !important;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 0 15px 0 30px;
    line-height: 48px;
    display: block;
    width: 250px;
	cursor: pointer;
	text-align: left;
	border: none;
	-moz-appearance: none;
	-o-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	transition: all ease 0.2s;
}
.cta-btn:hover{padding-left: 40px; padding-right: 5px;}
.cta-btn:hover:before{
	width: 10px;
    transform: skewX(-10deg) translate(-15px, 18px);
}
a.cta-btn:before, button.cta-btn:before {
    content: '';
    width: 5px;
    height: 10px;
    background: #fff;
    position: absolute;
    transform: skewX(-10deg) translate(-6px, 18px);
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

/* PARTS & SERVICE */

#service-logos{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
}
#service-logos a{
	width: 20%;
}
#service-logos a img{
	max-width: 100%;
	display: block;
	margin: 0 auto;
}


/*--------FORM STYLES--------------------*/


#contact-form label{
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 0 15px 0 13px;
    line-height: 24px;
    display: block;
	text-align: left;
	border: none;
	-moz-appearance: none;
	-o-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	text-transform: uppercase;
	margin-top: 15px; 
}
#contact-form label:before {
    content: '';
    width: 5px;
    height: 10px;
    background: #fff;
    position: absolute;
	transform: skewX(-10deg) translate(-10px, 6px);
    -webkit-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

#contact-form input{
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
}

#contact-form textarea{
	width: 100%;
	resize: vertical;
	padding: 8px;
	height: 100px;
	box-sizing: border-box;
}

#contact-form .CaptchaPanel{
	font-family: 'Roboto', sans-serif!important;
	    font-size: 14px!important;
	line-height: 24px!important;
	color: #fff!important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
#contact-form .CaptchaAnswerPanel{
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 9px;
}
#contact-form .CaptchaMessagePanel{font-weight: normal!important;}

#contact-form .CaptchaImagePanel {
    padding: 19px 5px 10px 5px;
}

#contact-form .CaptchaWhatsThisPanel a{
	color: #fff;
}



/*-------- FOOTER STYLES ----------------*/
footer{}

#footer-text{background: #000; padding: 15px; display:flex; flex-wrap: wrap; justify-content: space-between;}
#footer-text a, #footer-text p{color: rgba(255,255,255,0.5)!important; font-family: 'Roboto',sans-serif; font-size: 12px; line-height: 24px;}




/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.scrolling-wrap{height: 90px; overflow: hidden;}


#inv{padding: 5% 0; background: #fff;}
#inv *:not(.loading-spinner):not(.loader){border-radius: 0!important;}
#inv *:not(.fa):not(.far):not(.fas):not(.fab):not(.material-icons){font-family: 'Roboto', sans-serif!important;} /* Reset font, ignore icons */


.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;}

.hosted-content .attachment-search .search-checkboxes label .row {margin-left:0 !important;margin-right:0 !important;margin-bottom:0px !important;}

.list-content .list-main-section .list-container .list-listing .listing-top-right .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet, .list-content .list-listing-mobile .view-listing-details-link, .list-content .list-listing-mobile .buy-now-link, .list-content .list-listing-mobile .check-availability-link, .list-content .list-listing-mobile .email-seller-link, .detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn, .detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile, .detail-content-mobile .detail-main-body .main-detail-data .offer-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-wholesale-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .fin-calc-btn-mobile, .mobile-breadcrumb, .main-detail-data .contact-options a {background:#c0252c !important;}

.list-content .list-main-section .list-container .list-listing .listing-top-right .buy-now-link, .list-content .list-main-section .list-container .list-listing .listing-top-right .check-availability-link, .list-content .list-main-section .list-container .list-listing .listing-top-right .email-seller-link, .list-content .list-main-section .list-container .list-listing .listing-top-right .video-chat-link, .faceted-search, .faceted-show-all-btn {background: #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 {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, .faceted-search-content .mobile-done-button-container .mobile-done-button, .list-page-nav {background: #000 !important;}

.detail-content .dealer-info .phone-and-email .send-email-btn {border-color: #000!important; color: #000!important;}

.material-icons {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;}


/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (min-width: 1680px) {
	.cycle-slideshow{
		height: 730px;
		overflow: hidden;
	}
	.cycle-slideshow img{
		transform: translate(0, -6%);
	}
}

@media only screen and (max-width: 1430px) {
	
	#tagline-banner{
		width: 35%;
	}
	.cycle-slideshow img.offset{margin-left: 5%;}
	.cycle-slideshow{overflow: hidden;}
}
@media only screen and (max-width: 1100px) {
	
	#tagline-banner{
		width: 45%;
	}
	.cycle-slideshow img.offset{margin-left: 10%;}
}


@media only screen and (max-width: 845px) {
	
	.show-md{display: block;}
	#home-banner{background: #000;}
	.banner.show-md h2{text-align: left !important; font-size: 48px;}
	.slide-overlay{display: none;}	
	.cycle-slideshow img.offset{margin-left: 0%;}
	
	.vpad{ padding-top: 50px; padding-bottom: 50px;}
	.pad-top{ padding-top: 50px;}
	
	.heading-lg{font-size: 24px;}
	
	.col50{width: 100%; margin-right: 0;}
	
	.heading,  .banner .heading-lg{font-size: 24px;}
	.heading:before {
		width: 8px;
		height: 18px;
		transform: skewX(-10deg) translate(-15px, 5px);
	}
	
	#service-logos{justify-content: flex-start;}
	#service-logos a{
		width: 50%;
	}

}
@media only screen and (max-width: 600px) {
	.banner.show-md h2{font-size: 24px;}
	a.cta-btn, button.cta-btn{width: 100%; box-sizing: border-box;}
	#maps iframe{height: 200px;}
	#service-logos a{
		width: 100%;
		margin: -20px 0;
	}
	#service-logos a img{
		max-width: 50%;
	}
}






