/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&family=Open+Sans:wght@800&display=swap');

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:'Arimo', sans-serif;

}
h1, h2, h3, h4{font-family:'open sans', sans-serif; font-weight:800;}

a.blue-btn{font-size:15px; font-weight:700; color:#fff; text-decoration:none; display:inline-block; text-align:center; margin-right:10px; margin-top:5px; padding:24px 0; width:180px; background-color:#282f5b; border-radius:15px; transition:.3s ease;}

a.blue-btn:hover, a.blue-btn2:hover{transform:scaleX(90%); box-shadow:3px 3px 6px rgba(0,0,0,.5);}

a.blue-btn2{ transition:.3s ease; font-size:15px; font-weight:700; color:#fff; text-decoration:none; display:inline-block; float:right; text-align:center; margin-right:10px; padding:24px 0; width:180px; background-color:#282f5b; border-radius:15px;}


/*--- HEADER STYLES ---------------------*/
header{width:100%; background-color:#d4d4d4;}
.head-wrapper{width:90%; margin:0 auto;}
.top-wrapper{width:100%; display:flex; flex-direction:row; justify-content:space-between; padding:5px 0 2px 0; border-bottom:1px solid #4b4b4b;}
.nav-wrapper{display:flex; flex-direction:row; justify-content: space-between; width:100%; padding:10px  0;}
.logo{max-width:160px;}
.logo img{width:100%;}
.top-left{padding:10px 0; }
.top-left a{text-decoration:none; font-size:15px; color:#000; padding-right:20px;}
.top-left a:hover{border-bottom: 1px solid #282f5b;}
.top-left a span{font-weight:600;}
.number a, .number-mobile a{display:flex; flex-direction:row; text-decoration:none; padding:20px 0; font-size:15px;}
.number-left i{font-size:20px; color:#fff; padding:15px; box-sizing:border-box; border-radius:10px; background-color:#282f5b; transition:.8s ease-in-out; }
.number a:hover i, .number-mobile a:hover i{transform:rotateY(360deg);}
.number-right{padding-left:20px; color:#000; padding-top:5px;}
.number-right span{font-weight:700; }
.number-mobile{display:none;}
/*---BODY--------------------------------*/
.hero{width:100%; display:flex; flex-direction:row; background-color:#d4d4d4; }
.hero-left{width:40%; padding:7% 2% 3% 5%;}
.hero-left h1{font-weight:800; font-size:70px; color:#282f5b; line-height:60px;}
.hero-left p{padding:40px 0 80px 0; font-size:16px; width:80%; }

.hero-right{width:60%;}
.hero-right img{width:100%;}

/*--------Quick links---------------*/
.ql-row{display:flex; flex-direction:row; padding:20px 0; width:90%; margin:50px auto;}
.ql-container, .ql, .about, .ql-about{width:50%; box-sizing:border-box;}
.ql-container{display:flex; flex-direction:row;}
.ql{position:relative; box-sizing:border-box; margin:15px; transition:.3s ease;}
.ql{box-shadow:3px 3px 15px rgba(0,0,0,.4); border-radius:25px; margin:10px; }
.ql a{text-decoration:none;}
.ql a img{width:100%; object-fit:cover; height:300px; border-top-left-radius:25px; border-top-right-radius:25px;}
.circle{margin:0 auto; bottom:17%; border-radius:50%!important; border:solid 1px #000; background-color:#fff; padding:2px; box-sizing:border-box; width:100px; height:100px; left:0px; right:0px; position:absolute;}
.circle img{transition:1s ease; object-fit:contain!important; margin:0 auto; left:0px; right:0px; bottom:21%; width:100%!important; height:100%!important; border-radius:none!important;}
.ql a p{padding:60px 0 40px 0; text-align:center; font-weight:800; font-size:22px; font-family:'open sans', sans-serif; text-transform:uppercase; color:#000;}
.ql-about{padding:70px 20px 20px 40px ;}
.ql-about h2{font-size:40px; font-weight:800; line-height:35px; color:#4b4b4b; padding-bottom:80px;}
.ql-about p{padding-bottom:15px;}
.about{background: #d4d4d4; padding:5% 4% 4% 3%; box-sizing:border-box; margin:20px; border-radius:25px;}
.about h3{font-size:36px;line-height:35px; padding-bottom:20px;}
.about p{line-height:24px; padding-bottom:40px; font-weight:500;}
.about p.top{padding:0!important;}
.ql:hover .circle img{transform:rotateY(360deg);}
.ql:hover{transform:scaleY(105%); box-shadow:3px 3px 6px rgba(0,0,0,.5);}
/*-------------Slideshow------------------*/
.slideshow{max-width:100%; position:relative;}
.slider-back{position:relative;}
.slider-back img{height:100%; width:100%;z-index:-10;}


.cycle-pager{position:absolute; color:#fff; bottom: 5px; margin: 0 auto; left:0px; right:0px; z-index:200; font-size:50px;width:120px;}
.cycle-pager-active{color:#282f5b;}
.cycle-pager:hover{cursor: pointer;}



.search-row{display:flex; flex-direction:row;justify-content:flex-start;}
.top-right input[type="text"]{width:100%;padding:8px 7px!important;box-sizing:border-box; border: solid 1px #4b4b4b; border-radius:10px!important; background-color:transparent!important;}
.top-right input[type="submit"]{float:right;width:50px; margin: 0 auto;margin-top:-23px; border:none!important; background-color:transparent;height:45px!important;}
.top-right ::placeholder{color:#4b4b4b;}

.top-right input[type="submit"]{background: url("../siteart/magnifying.png") no-repeat; background-size:25px;background-position: center; transition:.3s ease;}
.top-right input[type="submit"]:hover{background:url("../siteart/magnifying-grey.png")no-repeat; background-size:28px;background-position: center; cursor:pointer;}


/*---------Contact Home--------------*/
.home-contact{width:90%; margin:0 auto; padding:20px 0 100px 0;}
.home-contact-wrapper{display:flex; flex-direction:row; width:100%;}
.home-contact-left{padding-left:10px;}
.home-contact-right{padding-top:50px;}
.home-contact-left, .home-contact-right{width:50%; box-sizing:border-box;}
.home-contact-top h4{font-size:40px; padding-bottom:10px;}
.home-contact-top p{padding-bottom:60px;}
.home-contact-top p.top{padding:0!important; font-weight:600;}

.icon a{display:flex; flex-direction:row; text-decoration:none; padding:10px 0; font-size:15px;}
.icon-left i{font-size:30px; color:#fff; padding:22px; box-sizing:border-box; border-radius:10px; background-color:#282f5b; transition:.8s ease-in-out; }
.icon-right{padding-left:20px; color:#000; padding-top:10px; font-size:17px; }
.icon-right span{font-weight:700; }
.icon a:hover i{transform:rotateY(360deg);}

/*--------FORM STYLES--------------------*/
.form-width{width:100%; margin: 0 auto; padding:25px 45px; box-sizing:border-box; box-shadow:3px 3px 6px rgba(0,0,0,.3); border-radius:25px;}
.flex-form{width:100%;text-align: left;margin: 0 auto;flex-direction: row;justify-content: flex-start;align-items: flex-start;font-size: 15px;}
#formpage input, select {padding:18px 16px;border: 1px solid #ccc;color: #777!important;border-radius:15px; font-size: 14px;margin-top: 5px;}
.flex-row{display:flex;flex-direction:row;width:100%;}
#formpage {width:100%;vertical-align: top;display:inline-block;text-align:left;padding: 30px 0px 20px 0;}
.form-half{width:50%;display: inline-block;vertical-align: middle;margin:0 5px;}
.form-whole{width:100%;display:block;vertical-align:middle;margin: 0 5px;}
.row-input{display:flex; flex-direction:row;}
input[type="text"], input[type="email"], input[type="date"], select, input[type="phone"]{width:100%;box-sizing:border-box;}

input[type="button"],
input[type="submit"] {
	-webkit-appearance: none;
}
#formpage textarea {box-sizing:border-box;padding: 15px 16px;border: 1px solid #ccc!important;color: #000;font-size: 16px;background: #fff;width: 100%;height: 100px;border-radius:15px;margin-top:10px;}
#formpage textarea:focus{border: 1px solid #ccc; border-radius:2px} 

#formpage input.submit-button, #formpage input.submit-button:focus, #submit-btn button{background:#282f5b; color:#ffffff;padding:24px 0;text-decoration:none;transition:ease-in .3s;width: 180px;border:none;height:auto; text-transform:uppercase; font-size:15px; font-weight:700; margin: 0 auto; border-radius:15px;}

#formpage input.submit-button:hover, #submit-btn button:hover{transform:scaleX(90%); box-shadow:3px 3px 6px rgba(0,0,0,.5);}

.submit-button, #submit-btn{padding:10px 0px 10px 0px;position:relative;width:100%;text-align:center;}

.captcha-button{width:180px; margin:0 auto;}
.include-captcha{display:none;}
#formpage input.submit-button{color:#fff!important;}



/*---Contact Page----------*/
.page-top h1{font-size:35px; text-transform:uppercase;  width:100%; margin:0 auto; padding:50px 0; color:#282f5b; text-align:center; background:linear-gradient(#d4d4d4 70%, transparent);}


.icon-row{display:flex; flex-direction:row; width:90%; margin:0 auto; justify-content:space-around; padding:50px 0; flex-wrap:wrap;}
.icon-contact{min-width:150px; margin:0 auto; padding:15px 0;}
.icon-contact-left i{font-size:40px; color:#fff; padding:26px; box-sizing:border-box; border-radius:10px; background-color:#282f5b; transition:.8s ease-in-out; }
.icon-contact-right{color:#000; padding-top:20px; font-size:17px; }
.icon-contact-right span{font-weight:700; }
.icon-contact a i{margin:0 auto;}
.icon-contact a, .icon-contact{text-decoration:none; text-align:center;}
.icon-contact a:hover i{transform:rotateY(360deg);}
.contact-form{width:90%; margin:0 auto; padding-bottom:60px;}
.contact-form h2{text-align:center; font-size:25px; padding:40px 0;}

/*-------Thank you--------------*/
.thankyou{width:90%; margin:0 auto; padding:100px 0; text-align:center;}
.thankyou i{font-size:50px; color:#fff; background-color:#282f5b; border-radius:50%; padding:30px; max-width:50px; margin:0 auto; padding-bottom:20px; display:block;}
.thankyou p{padding-bottom:60px;}

/*-------- FOOTER STYLES ----------------*/
footer{width:100%; background-color:#d4d4d4; padding:100px 0;}
.footer{width:90%; margin:0 auto; display:flex; flex-direction:row;}
.foot-col{width:25%;}
.foot-col p{font-size:20px; font-weight:800; padding-bottom:20px;}
.foot-col ul li{font-size:16px; line-height:30px; }
.foot-col ul li a{text-decoration:none; color:#000; transition:.3s ease;}
.foot-col img{max-width:180px;}
.foot-col p.notice{font-size:14px; font-weight:400; color:#3E3E3E;}
p.notice a{color:#000; text-decoration:none;}

.foot-col a:hover{border-bottom:2px solid #282f5b;}
/*----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: #282f5b!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: #282f5b !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: #d4d4d4 !important;
    color: #000 !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: 1650px) {
	.hero-left p{padding:30px 0 60px 0;}
	.hero-left{padding:4% 2% 2% 4%;}
	.ql a img{height:250px;}
	.ql{height:360px;}
	.ql-about h2{font-size:36px; padding-bottom:50px}
	.ql-about{padding:40px 20px 20px 30px;}
	
}

@media only screen and (max-width: 1250px) {	
	.hero-left h1{font-size:55px; line-height:45px;}
	.hero-left p{font-size:14px; padding:20px 0 40px 0;}
	a.blue-btn, a.blue-btn2{padding:18px 0; width:150px; font-size:14px;}
	.ql-row{flex-wrap:wrap;}
	.ql-container, .about{width:80%; margin:0 auto;}
	.home-contact-wrapper{flex-direction:column;}
	.home-contact-left, .home-contact-right{width:100%;}
}

@media only screen and (max-width: 1150px) {	
	.hero{flex-direction:column;}
	.hero-left, .hero-right{width:100%; box-sizing:border-box;}
	.ql-container, .about{width:100%;}
	.footer{flex-wrap:wrap;}
	.foot-col{width:240px; padding-top:20px;}
	.number{display:none; }
	.number-mobile{display:block; margin:0 auto;width:200px; }
	.nav-wrapper{flex-direction:column; width:100%;}
	.logo{margin:0 auto;}
	.head-wrapper{width:100%;}
	.top-right{display:none;}
	.ql-row{margin:0 auto;}
}

@media only screen and (max-width: 800px) {	
	.flex-row{flex-direction:column;}
	.form-half, .form-whole{width:98%;}
	.about{padding:25px 20px;}
}
@media only screen and (max-width: 680px) {
	.ql-container, .about{flex-direction:column; width:80%; margin: 0 auto;}
	.ql, .ql-about{width:95%;}
	.top-wrapper{display:none;}
	.hero-left h1{font-size:45px; line-height:35px;}
	.ql-about h2{font-size:30px; line-height:25px;}
	.about h3{font-size:30px; }
	.form-width{padding:15px;}
	.contact-form{width:95%;}
	.thankyou i{font-size:40px; padding:25px;}
	.thankyou h1{font-size:30px; line-height:28px;}
}

@media only screen and (max-width: 480px) {
	.ql-container, .about{width:100%;}
	.foot-col{width:100%;}
	.hero-left h1{font-size:40px;}
	.about h3{font-size:26px;}
	.about p{font-size:14px;}
	.ql a p{font-size:18px;}
	.home-contact-top h4{font-size:34px;}
	.page-top h1{font-size:30px; box-sizing:border-box; padding:50px 10px;}
	
}