﻿/***** BEGIN RESET *****/
/*--------import font------------*/

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;
}

/*-------- BODY STYLES --------*/

body {
	font-family:'Arial', sans-serif;
}
a{text-decoration:none;}

.blue-btn{width:180px; padding:16px; transition:.3s ease; box-sizing:border-box; display:block; text-align:center; color:#fff; background:#0a4c8a; border-radius:20px;}
.blue-btn:hover{background:#000;}
/*--- HEADER STYLES ---------------------*/
.header-wrapper{width:100%; background:#fff; border-bottom:5px solid #e7901a;}
header{max-width:1160px; margin:0 auto; padding:0 15px; box-sizing:border-box; display:flex; flex-direction:row; justify-content: space-between;}
.logo{max-width:300px; width:100%; padding:15px 0 0 24px;}
.logo img{width:100%;}
.header-right{width:calc(100% - 300px);}
.header-top{display:flex; flex-direction:row; margin:15px 0 5px; justify-content: flex-end; width:100%;}
.header-top p{color:#000; font-size:14px;}
.header-top p a{color:#000; font-size:14px; padding:10px; box-sizing:border-box;}
.header-top p a:before{content: "\00BB"; padding-right:2px;}
/*---BODY--------------------------------*/
.hero{width:100%; height:700px; display:flex; flex-direction:row;}
.hero a{width:calc(25% - 4px); transition:.8s ease; border:solid 2px #fff; position:relative;}
.hero a img{width:100%; transition:.8s ease; height:100%; object-fit:cover; filter:brightness(.6); object-position:center center;}
.hero a h1, .hero a h2{position:absolute; font-size:40px; line-height:40px; text-transform:uppercase; text-shadow:1px 1px 3px rgba(0,0,0,1); z-index:100; color:#fff; width:100%; height:100%; display:flex; text-align:center; align-items:center; top:0; left:0; right:0; margin:0 auto; max-width:300px;}
.hero a:hover {width:40%;}
.hero a:hover img{filter:brightness(.9);}

.page-content{max-width:1160px; margin:0 auto; width:100%; padding:60px 15px; box-sizing:border-box;}
.page-content h3 span{font-size:22px; color:#0a4c8a; text-transform:uppercase;}
.page-content h3{font-size:38px; color:#000; text-transform:uppercase;}
.page-content p{padding:30px 0; line-height:24px; font-size:16px; }

.icon-text{padding:20px 0;}
.icon-row{display:flex; flex-direction:row; justify-content: flex-start;}
.icon-row img{max-width:60px; height:60px; background:#e7901a; margin-bottom:10px; padding:10px; box-sizing:border-box; border-radius:50%; margin-right:40px;}
.icon-row p{padding:15px 0; font-size:18px; font-weight:600; text-transform:uppercase;}
.page-content a{margin-top:40px;}

.mobile-wrap{display:none;}

/*------------Showrooms-------------------*/
.page-background{background:url("/siteart/bg.jpg") no-repeat; background-size:cover;}
.page-width{width:100%; max-width:1160px; margin:0 auto; padding:80px 10px; box-sizing:border-box;}
.page-container{width:100%; padding:40px 30px; box-sizing:border-box; background:#fff;}
.page-container h1{font-size:30px; text-transform:uppercase; color:#000; font-weight:600; padding-bottom:20px;}
.page-container ul li{list-style:none; font-weight:600; line-height:24px;}
.page-container p{font-size:16px; line-height:24px;}

.brand-wrapper{max-width:1160px; margin:0 auto; width:100%; padding-bottom:40px;}
.brand{width:calc(100% - 20px); margin:10px; padding:40px; box-sizing:border-box; background:rgba(255,255,255,.7); display:flex; flex-direction:row;}
.brand img{width:100%; max-width:200px; object-fit:contain;}
.brand a{margin:20px 0; width:180px; height:50px;}
.brand-text{width:calc(100% - 400px); padding:0 20px; box-sizing:border-box;}
.brand-text h2{font-size:24px; text-transform:uppercase; padding-bottom:10px;}
.brand-text p{font-size:15px; line-height:20px;}

/*  scrolling inventory
------------------------------------------------*/
.scrolling-wrap {
    width:100%;
    height:90px;
    overflow:hidden;
}
 
.scrolling{
    width:100%;
    height:92px;
}


/*-------- FOOTER STYLES ----------------*/
.footer-top{width:100%; background:#e7e8e9;}
.footer-width{max-width:1160px; width:100%; margin:0 auto; display:flex; flex-direction:row;}
.footer-top-left{width:50%;}
.footer-top-right{width:50%;}
.footer-top-left a{margin-right:3%; float:left; margin-top:20px; font-size:12px; color:#000; padding:0 0 17px 0;}
.footer-top-right a{float:left; font-size:12px; line-height:20px; color:#000; padding:0px; margin:18px 0 15px 14px;}
.footer-arrow a:before{content: "\00BB"; padding-right:2px;}
.socials a{margin:13px 7px 0 7px!important;}

.foot-col{width:18%; padding:15px 5px; box-sizing:border-box;}
.foot-col a.bold{color:#666667; font-weight:700; font-size:12px; line-height:12px;}
.foot-col ul {padding-left:15px;}
.foot-col ul li{list-style:none; line-height:13px;}
.foot-col ul li a{color:#666; font-size:12px;}







/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .buy-now-link,
.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .check-availability-link,
.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .email-seller-link,
.body-wrapper>div:not(.detail-wrapper) .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .apply-button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .apply-button,
.body-wrapper>div:not(.detail-wrapper) button.page-nav {
    background: #0a4c8a !important;
    color: #fff !important;
}

.body-wrapper>div:not(.detail-wrapper) .view-listing-details-link,
.body-wrapper>div:not(.detail-wrapper) .contact-options a,
.body-wrapper>div:not(.detail-wrapper) .fin-calc-mobile>a,
.body-wrapper>div:not(.detail-wrapper) button.g-recaptcha.button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .apply-button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .nuf-button,
.body-wrapper>div:not(.detail-wrapper) .list-error-container .info button,
.body-wrapper>div:not(.detail-wrapper) .mobile-done-button-container .mobile-done-button,
.body-wrapper>div:not(.detail-wrapper) a.buy-btn.gtm-buynow.des-buy-now,
.body-wrapper>div:not(.detail-wrapper) a.buy-btn.des-buy-now,
.body-wrapper>div:not(.detail-wrapper) button.selected-facet.ts-button,
.body-wrapper>div:not(.detail-wrapper) .detail-contact-bar .contact-bar-btn {
    background: #0a4c8a !important;
    color: #fff !important;
}

.body-wrapper>div:not(.detail-wrapper) .view-listing-details-link:hover,
.body-wrapper>div:not(.detail-wrapper) .contact-options a:hover,
.body-wrapper>div:not(.detail-wrapper) .fin-calc-mobile>a:hover,
.body-wrapper>div:not(.detail-wrapper) button.g-recaptcha.button:hover,
.body-wrapper>div:not(.detail-wrapper) .email-seller-link:hover,
.body-wrapper>div:not(.detail-wrapper) .mc-nav-controls .mc-icon-navarrow span,
.body-wrapper>div:not(.detail-wrapper) a.buy-btn.gtm-buynow.des-buy-now:hover,
.body-wrapper>div:not(.detail-wrapper) a.buy-btn.des-buy-now:hover,
.body-wrapper>div:not(.detail-wrapper) .detail-contact-bar .contact-bar-btn:hover {
    background: #e7901a !important;
    color: #fff !important;
    /*----Border----*/
}

.body-wrapper>div:not(.detail-wrapper) .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .back-button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .back-button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .back-button,
.body-wrapper>div:not(.detail-wrapper) .parts-listing-container .mobile-parts-detail-container .dealer-phone-container a {
    color: #000 !important;
    border: 1px solid #000 !important;
    /*-----------------------OTHER TEXT STYLES-----------------------*/
    /*----Page Title----*/
}

.body-wrapper>div:not(.detail-wrapper) .list-title .list-title-text,
.body-wrapper>div:not(.detail-wrapper) .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-title-text span,
.body-wrapper>div:not(.detail-wrapper) .title-media-buttons-heading h1 {
    color: #000 !important;
    line-height: 28px !important;
}

.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .listing-dealer-info .dealer-name,
.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .fin-calc,
.body-wrapper>div:not(.detail-wrapper) .list-listing-mobile .listing-dealer-info .spec-value,
.body-wrapper>div:not(.detail-wrapper) .fin-calc,
.body-wrapper>div:not(.detail-wrapper) .fin-calc p,
.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-error .info,
.body-wrapper>div:not(.detail-wrapper) .parts-bottom-section .parts-list-view .parts-list-content .error-message,
.body-wrapper>div:not(.detail-wrapper) .info,
.body-wrapper>div:not(.detail-wrapper) .list-title .list-listings-count,
.body-wrapper>div:not(.detail-wrapper) .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count,
.body-wrapper>div:not(.detail-wrapper) .list-top-section .listing-option-bar .list-listings-count,
.body-wrapper>div:not(.detail-wrapper) span.part-list-price.bold,
.body-wrapper>div:not(.detail-wrapper) .dealer-company-header,
.body-wrapper>div:not(.detail-wrapper) .dealer-info h3,
.body-wrapper>div:not(.detail-wrapper) .listing-description-text,
.body-wrapper>div:not(.detail-wrapper) .paging-container .list-page-number,
.body-wrapper>div:not(.detail-wrapper) .paging-container .page-number,
.body-wrapper>div:not(.detail-wrapper) .listing-main-stats .price,
.body-wrapper>div:not(.detail-wrapper) .list-container-flexrow .price-container .price,
.body-wrapper>div:not(.detail-wrapper) h2.listing-portion-title,
.body-wrapper>div:not(.detail-wrapper) .list-listing-mobile .price-container .price,
.body-wrapper>div:not(.detail-wrapper) .compare-listings-container .compare-container .comp-header-img .comp-title-close-cont .compare-title,
.body-wrapper>div:not(.detail-wrapper) .compare-listings-container .compare-container .compare-price,
.body-wrapper>div:not(.detail-wrapper) .rent-title,
.body-wrapper>div:not(.detail-wrapper) .rent-title-details,
.body-wrapper>div:not(.detail-wrapper) span.list-title-text,
.body-wrapper>div:not(.detail-wrapper) a.search-results-link,
.body-wrapper>div:not(.detail-wrapper) h3.listing-portion-title {
    color: #000 !important;
}

.body-wrapper>div:not(.detail-wrapper) .mobile-option-bar .mobile-option-bar-filter,
.body-wrapper>div:not(.detail-wrapper) span.listing-prices__retail-price,
.body-wrapper>div:not(.detail-wrapper) span.parts-listings-count {
    color: #000 !important;
    /*-----------------------MEDIA QUERIES-----------------------*/
}






/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1400px) {
	.hero{height:550px;}
	.hero a h1, .hero a h2{font-size:32px; line-height:32px; justify-content:center;}
	
}

@media only screen and (max-width: 1150px) {
	header{flex-wrap:wrap;}
	.header-right{width:100%;}
	.hero{flex-direction:column; height:auto;}
	.hero a{height:220px; width:calc(100% - 4px);}
	.hero a h2, .hero a h1{font-size:40px; line-height:40px;}
	
}
@media only screen and (max-width: 1000px) {	
	.footer-top-left{display:none;}
	.footer-top-right{width:100%; display:flex; justify-content: flex-end;}
}

@media only screen and (max-width: 850px) {
	.mobile-wrap{width:100%; position:relative; margin-bottom:60px;}
	.mobile-wrap a.rentals{max-width:200px; margin:0 auto; padding:10px; font-size:14px; text-align:center; display:block; border-radius:20px; background:#0a4c8a; color:#fff; font-weight:700;}
	.logo{margin:0 auto; padding:15px 0 0 0;}
	.header-top{margin:15px 0 20px;}
	.mobile-wrap{display:block;}
	.brand{flex-direction:column;}
	.brand img, .brand a{margin:0 auto;}
	.brand-text{width:100%; text-align:center; padding:20px 0;}
	
}
@media only screen and (max-width: 768px) {	
	footer{display:none;}
	.footer-top-right, .footer-arrow, .socials{justify-content: center; flex-direction:column; display:flex; width:100%; text-align:center;}
	.socials{margin:18px 0 15px 0;}
	
}

@media only screen and (max-width: 600px) {
	.hero a {height:200px;}
	.hero a h1, .hero a h2{font-size:32px; line-height:32px;}
	.page-content h3 span{font-size:18px;}
	.page-content h3{font-size:30px;}
	.brand{padding:20px;}
}

@media only screen and (max-width: 380px) {
	.hero a {height:180px;}
	.hero a h1, .hero a h2{font-size:28px; line-height:28px;}
	.icon-row img{margin-right:10px;}
	.icon-row p{font-size:16px;}
	a.rentals{margin-left:10px!important;}
}



