﻿/***** BEGIN RESET *****/
@import url("https://use.typekit.net/eeo0wxo.css");
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 {

}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}

h1, h2, h3 {
	font-family: 'pulpo', serif;
}

#home p, footer p, #about p, #parts p, #services p, #thankyou p {
	font-family: 'synthese', sans-serif;
	line-height: 30px;
	font-size: 18px;
}

hr{border:#000 1px solid;}

/*--- Heros ---------------------*/
.home-hero {
	background: url("../siteart/home-hero.jpg");
	background-size: cover;
	background-position: center;
	height: 960px;
	background-color: #000;
}

.home-hero .wrapper {padding-top: 265px;}

.home-hero p {
	font-size: 20px;
	font-weight: 500;
	color: #fff;
	margin-top: 15px;
	margin-bottom: 60px;
	max-width: 450px;
}

#about .inner-hero {
	background: url("../siteart/about-hero.jpg");
	background-size: cover;
	background-position: center;
	height: 330px;
	position: relative;
	z-index: 1;
	background-color: #000;
}

#service .inner-hero {
	background: url("../siteart/services-hero.jpg");
	background-size: cover;
	background-position: center;
	height: 330px;
	position: relative;
	z-index: 1;
	background-color: #000;
}

#parts .inner-hero {
	background: url("../siteart/parts-hero.jpg");
	background-size: cover;
	background-position: center;
	height: 330px;
	position: relative;
	z-index: 1;
	background-color: #000;
}

#thankyou .inner-hero {
	background: url("../siteart/thankyou-hero.jpg");
	background-size: cover;
	background-position: center;
	height: 330px;
	position: relative;
	z-index: 1;
	background-color: #000;
}

.inner-hero-inventory {
	background: url("../siteart/inventory-hero.jpg");
	background-size: cover;
	background-position: center;
	height: 330px;
	position: relative;
	z-index: 1;
	background-color: #000;
}

.inner-hero .heading-lg, .inner-hero-inventory .heading-lg {position:absolute;bottom:30px;}

/*---BODY--------------------------------*/

/*---- .col-3 ----*/

.col-3 {
	gap: 20px;
	justify-content: space-around;
	align-items: center;
}

.col-3 .img-height {
	max-width: 520px;
	width: 100%;
	height: 240px;
	position: relative;
	background: #942924;
}

.col-3 .img-height img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .4s ease-out; 
}

.col-3 .heading-mdsm {
	position: absolute;
	bottom: 25px;
	left: 30px;
	color: #fff;
}

.col-3 .img-height:hover img {opacity: .2;}

/*---- .center-txt ----*/

.center-txt {background: #333;}

.center-txt .heading-md, .center-txt p {
	color: #fff;
	text-align: center;
}

.center-txt p {margin-top: 15px; margin-bottom: 60px;}

.center-txt .wrapper {
	max-width: 840px;
	margin: 0 auto;
	padding-bottom: 80px;
}

.center-txt .flex {
	gap: 15px;
	justify-content: center;
	flex-wrap: wrap;
}

/*--------SLIDER-LEFT--------------------*/

.img-slider {overflow: hidden;}

.img-slider .hero-slide-wrap {
	position: relative;
	width: 100%;
    max-width: 1935px;
	display: flex;
	justify-content: flex-end;
	right: -340px;
}

.products-image {
	position: relative;
	max-width: 625px;
	height: 360px;
	width: 100%;
}

.products-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.img-slider .slide-hero {
	width: 100%;
	height: 100%;
}

.img-slider .slide-hero div {max-height: 380px;}

.img-slider .slick-slide {
	margin-left: 10px; 
	margin-right: 10px;
}

.slick-next:before {
	font-family: "Font Awesome 5 Free" !important;
    content: "\f061" !important;
    color: #fff !important;
    font-size: 35px !important;
    font-weight: 600;
	background: #942924;
	padding: 15px;
	transition: all .4s ease-out;
	border: solid #942924 2px!important;
}

.slick-next:hover:before, .slick-prev:hover:before {
	background: none!important;
	border: solid #fff 2px!important;
}

.slick-prev:before {
	font-family: "Font Awesome 5 Free" !important;
    content: "\f060" !important;
    color: #fff !important;
    font-size: 35px !important;
    font-weight: 600;
	background: #942924;
	padding: 15px;
	transition: all .4s ease-out;
	border: solid #942924 2px!important;
}

/*---- .img-left ----*/

.img-left {
	align-items: center;
}

.img-left > div:last-child {
	width: 100%;
	max-width: 500px;
}

.img-left .img-height {
	max-width: 960px;
	width: 100%;
	padding-right: 100px;
}

.img-left .heading-md {color: #333;}

.img-left .heading-md > a {
	margin-left: 100px;
	color: #333;
}

.img-left .heading-md > a i {transition: all .4s ease-out;}

.img-left .heading-md > a i:hover {
	-webkit-transform: translateX(20px);
    transform: translateX(20px);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    cursor: pointer;
	color: #942924!important;
}

.img-left .contact-info {margin-top: 50px;}

.img-left .contact-info > div:nth-child(2) {
	margin-bottom: 40px;
	margin-top: 40px;
}

.img-left .contact-info a i {color: #942924!important; margin-right: 15px;}

.img-left .contact-info a {
	color: #333;
	font-family: 'synthese', sans-serif;
	font-size: 18px;
}

.img-left .contact-info a:hover, .img-left .contact-info a:hover i {text-decoration: underline;}

/*---- .brands ----*/
/*--------BRANDS SLIDER--------------------*/

.brands {
	background: url("../siteart/brands-background.jpg");
    background-size: cover;
    background-position: center;
    background-color: #333;
}

.brands .heading-md {text-align: center; color: #fff;padding-top: 80px;}

.brands .hero-slide-wrap {
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
}

.brands .brands-logo-image {
	position: relative;
	overflow: hidden;
	background: #fff;
	width: 100%;
    max-width: 1600px;
    height: 180px!important;
	padding: 1px 10px;
	box-sizing: border-box;
	transition: .4s ease;
}

.brands .brands-logo-image:hover {transform: translateY(-10%);}

.brands .brands-logo-image > a > img {
	display: block;
	width: 100%;
	height: 100%;
	object-position: center;
	object-fit: contain;
}

.brands .slide-brands {
	height: 100%;
	padding-top: 30px;
	padding-bottom: 80px;
}

.brands .slide-brands div {height: 100%;}

.brands .slide-brands .slick-slide {
	margin-left: 10px;
	margin-right: 10px;
}

/*---PAGES--------------------------------*/

/*---- About ----*/
#about .center-txt {background: #fff; max-width: 850px; margin: 0 auto!important;}
#about .center-txt .heading-md, #about .center-txt p {color: #333;}
#about .btn-red-lg {display: block!important; margin: 0 auto!important;}
#about .btn-red-lg:hover {border: solid #333 2px;color: #333;}

.img-left-inner {background: #333;}
.img-left-inner .heading-md, .img-left-inner p {color: #fff;}
.img-left-inner p {margin-top: 15px;margin-bottom: 50px;}
.img-left-inner .flex {justify-content: space-between; align-items: center;}
.img-left-inner .img-height {max-width: 800px; width: 100%; height: 520px;margin-right: 70px;}
.img-left-inner .img-height img {width: 100%; height: 100%; object-fit: cover;}

/*--------FORM STYLES--------------------*/
#parts .img-left-inner .img-height {max-width: 850px; width: 100%; height: 400px;margin-right: 70px;}
#parts .parts-form .btn-red:hover, #service .service-form .btn-red:hover {border: solid #333 2px;color: #333;}
#service .service-form {padding-bottom: 0!important;}

/*---- Parts, Service ----*/

#parts .img-left {padding-top: 0!important;}

.form-all .heading-md {color: #333;}

.form-all p {
	margin: 15px auto 30px;;
	max-width: 735px;
	width: 100%;
	color: #333;
}

.form-all .heading-sm {text-align: left;margin-bottom: 15px; margin-top: 40px; color: #333;}

.form-all {
	box-sizing: border-box;
	max-width: 1100px; 
	width: 100%;
	margin: 0 auto 100px;
	text-align: center;
}

 .label {
	color: #333;
	font-family: 'synthese', sans-serif;
	text-align: left!important;
	font-weight: 500;
}

.label-row {margin-bottom: 15px;}


.flex-form {
	width: 100%;
	max-width: 1205px;
	padding: 15px;
	margin: 52px auto;
}

.flex-row {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
}

.form-half select, .form-full select {
	display: inline-block;
    padding: 15px;
    width: 100%;
    border: none;
    background: #E3E3E3;
    font-family: 'synthese', sans-serif;
    box-sizing: border-box;
}

.form-half {
	display: inline-block;
	width: calc(50% - 8px);
	margin: 15px 15px 15px 0;
}

.form-half input {
	padding: 15px;
	width: 100%;
	border: none;
	background: #E3E3E3;
	font-family: 'synthese', sans-serif;
	box-sizing: border-box;
}

.form-2nd-row {margin-right: 0;}

.form-full textarea {
	width: 100%;
	padding: 15px;
	border: none;
	background: #E3E3E3;
	box-sizing: border-box;
	margin-bottom: -8px;
	font-family: 'synthese', sans-serif;
}

.form-full {margin: 15px 0 30px 0;}

/*--------Captcha--------------------*/

.include-captcha{display:none;}

#submit-btn {float: right;}

.CaptchaWhatsThisPanel > a, .CaptchaMessagePanel {
	color: #222;
	font-family: 'synthese', sans-serif;
}

.CaptchaPanel {text-align: right!important;}

.captcha-button {float: right;}

/*---- ThankYou ----*/
#thankyou .heading-lg {color: #333;}
#thankyou p {margin-top: 15px; margin-bottom: 50px; max-width: 800px; width: 100%;}
#thankyou .btn-red:hover {border: solid #333 2px;color: #333;}

/*-------- FOOTER STYLES ----------------*/
footer{background: #333333; padding: 80px 0 60px;}
.footer-content .img-height {background: #fff; padding: 5px 10px;}
.footer-content .img-height img {width: 230px;}
.footer-content {justify-content: space-between;align-items: flex-start;}
.footer-content p {color: #fff;font-weight:700; margin-bottom: 30px;}
.footer-content a {color: #fff;font-family: 'synthese', sans-serif;font-weight: 400!important;font-size: 18px;}
.footer-content a:hover {text-decoration: underline;}
.footer-content li {margin-bottom: 20px;}
.footer-content li i {margin-right: 20px;}
.footer-content .flex > div:last-child {margin-left: 160px;}

/*---- CLASS STYLES ----*/

.wrapper {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

.flex {
	display: flex;
}

.bg-sm {padding-top: 80px!important; padding-bottom: 80px!important;}
.bg-lg {padding-top: 100px!important; padding-bottom: 100px!important;}

.btn-white {
	display: inline-block;
	color: #333;
	background: #fff;
	width: 240px;
	padding: 13px;
	font-family: 'synthese', sans-serif;
	font-size: 25px;
	font-weight: 700;
	text-align: center;
	transition: all .4s ease-out;
	border: solid #fff 2px;
}

.btn-white:hover, .btn-red:hover, .btn-red-lg:hover {
	border: solid #fff 2px;
	background: none;
	color: #fff;
}

.btn-red {
	display: inline-block;
	color: #fff;
	background: #942924;
	width: 195px;
	padding: 13px;
	font-family: 'synthese', sans-serif;
	font-size: 25px;
	font-weight: 700;
	text-align: center;
	transition: all .4s ease-out;
	border: solid #942924 2px;
}

.btn-red-lg {
	display: inline-block;
	color: #fff;
	background: #942924;
	width: 240px;
	padding: 13px;
	font-family: 'synthese', sans-serif;
	font-size: 25px;
	font-weight: 700;
	text-align: center;
	transition: all .4s ease-out;
	border: solid #942924 2px;
}

/*---- headings ----*/
.heading-lg {
	font-size: 80px;
	font-weight: 600;
	line-height: 85px;
	color: #fff;
}

.heading-lg span {
	font-size: 40px;
	color: #fff;
	font-weight: 400;
}

.heading-md {
	font-weight: 600;
	font-size: 50px;
}

.heading-mdsm {
	font-weight: 600;
	font-size: 40px;
}
.heading-sm {
	font-weight: 600;
	font-size: 35px;
}


/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.listing-prices__retail-price, .list-top-section .list-listings-count, .list-content .price-container .price {color: #942924!important;}
.list-container-flexrow .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet, .view-listing-details-link, .list-content .list-error-container .info button:not(.login-button) {background: #942924!important;}
.view-listing-details-link, .list-container-flexrow .view-listing-details-link, .detail__cta-buttons > button {transition: all .4s ease-out;}
.view-listing-details-link:hover, .list-container-flexrow .view-listing-details-link:hover, .detail__cta-buttons > button:hover {background: #fff!important; color: #333!important;border: solid #333 2px;}

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1640px) {
	.img-slider .hero-slide-wrap {right: -200px;}
}

@media only screen and (max-width: 1050px) {
	.img-left .img-height {padding-right: 20px;}
}

@media only screen and (max-width: 1000px) {
	.col-3 {flex-wrap: wrap;}
	.col-3 .img-height {max-width: 100%;height: 150px;}
	.footer-content .flex > div:last-child {margin-left: 60px;}
}

@media only screen and (max-width: 950px) {
	.img-left {flex-direction: column; align-items: flex-start;}
	.img-left .img-height {padding-right: 0;padding-bottom: 40px;}
	.img-left-inner .flex {flex-direction: column;}
	.img-left-inner .img-height, #parts .img-left-inner .img-height {margin-right: 0; margin-bottom: 40px; margin-top: 80px; max-width: 950px;}
	.img-left-inner .flex > div:last-child {margin-bottom: 80px;} 
}

@media only screen and (max-width: 860px) {
	.footer-content {flex-direction: column;}
	.footer-content .flex {margin-top: 40px;}
}

@media only screen and (max-width: 750px) {
	.heading-lg {font-size:50px; line-height: 60px;}
	.heading-lg span {font-size: 30px;}
	.heading-md {font-size: 35px;}
	.heading-mdsm {font-size: 30px;}
	.home-hero {height: 600px;}
	.home-hero .wrapper {padding-top: 150px;}
	.heading-sm {font-size: 25px;}
}

@media only screen and (max-width: 730px) {
	.img-slider .hero-slide-wrap {right: 0px;}
	.slick-prev, .slick-next {display: none;}
	.products-image {max-width: 700px;}
}

@media only screen and (max-width: 600px) {
	.footer-content .flex {flex-direction: column;}
	.footer-content .flex > div:last-child {margin-left: 0; margin-top: 30px;}
}

@media only screen and (max-width: 500px) {
	.img-left .heading-md > a {margin-left: 30px;}
	.img-left-inner .img-height, #parts .img-left-inner .img-height {height: 200px;}
}

@media only screen and (max-width: 450px) {
	.footer-content a {font-size: 16px;}
}

@media only screen and (max-width: 440px) {
	.home-hero {height: 650px;}
	.flex-row {flex-direction: column;}
	.form-half {width: 100%;}
}

@media only screen and (max-width: 370px) {
	.img-left .heading-md > a {display: flex;margin-left: 0;}
}

@media only screen and (max-width: 350px) {
	.home-hero {height: 700px;}
	.heading-lg {font-size: 45px; line-height: 55px;}
}



