﻿/***** BEGIN RESET *****/
@import url("https://use.typekit.net/dls2yir.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 --------*/
:root {
  --red: #E12D2D;
  --dark-grey: #2F2F2F;
  --grey: #F3F2F2;
}

/***** 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;
}

h1, h2, h3 {
	font-family: 'address-sans-pro', sans-serif;
}

#home p, #thankyou p, #service p, #contact p, header a, .col-3 .contact-card a, #parts p  {
	font-family: 'figtree', sans-serif;
	font-size: 20px;
	line-height: 35px;
	color: var(--dark-grey);
}

/*-------- BODY STYLES --------*/

body {

}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

/*--- HERO STYLES ---------------------*/
.home-hero {
	background: url("/siteart/home-hero.jpg") no-repeat;
	background-position: center;
	background-size: cover;
	height: auto;
	background-color: var(--dark-grey);
}
.home-hero > div {background-color: rgba(47, 47, 47, 0.75);}
.home-hero .wrapper {padding-top: 150px; padding-bottom: 150px;}
.home-hero .btn-top {display: flex; justify-content: center; margin-top: 70px!important;}

.home-hero .img-height {max-width: 500px; margin: 0 auto; }
.home-hero .img-height img {max-width: 500px;width: 100%;}

.home-hero .heading-lg {font-size:100px!important; font-weight: 700px!important; line-height: 100px!important; margin-top: 40px; margin-bottom: 15px;}

.center-line {background: var(--dark-grey); padding-top: 20px; padding-bottom: 20px;}
.center-line .heading-lg {font-weight: 400!important; font-size: 60px!important;line-height: 70px;}
.center-line .heading-lg span {font-weight: 700!important;}

.h1-span-bottom {
	font-size: 30px!important; 
	font-weight: 400!important; 
	text-align: center; 
	font-family: 'ballinger', sans-serif!important; 
	color: #fff!important; 
	line-height: 40px!important;
}


#service .inner-hero {
	background: url("/siteart/service-hero.jpg") no-repeat;
	background-position: center;
	background-size: cover;
	background-color: var(--dark-grey);
	height: auto;
}

#contact .inner-hero {
	background: url("/siteart/contact-hero.jpg") no-repeat;
	background-position: center;
	background-size: cover;
	background-color: var(--dark-grey);
	height: auto;
}

#parts .inner-hero {
	background: url("/siteart/parts-hero.jpg") no-repeat;
	background-position: center;
	background-size: cover;
	background-color: var(--dark-grey);
	height: auto;
}

#thankyou .inner-hero > div {background-color: var(--grey)!important;}

.inner-hero > div {background-color: rgba(47, 47, 47, 0.75);}

.inner-hero .wrapper  {padding-top: 130px!important; padding-bottom: 130px!important;}
.inner-hero .wrapper div {display: flex; justify-content: center; align-items: center;}
.inner-hero a {margin-top: 15px; color: #fff;transition: all .4s ease-out; font-family: 'address-sans-pro', sans-serif; font-size: 20px;}
.inner-hero a:hover {color: var(--red);}
.inner-hero a i {margin-right: 15px; margin-bottom: -1px;}

/*---BODY--------------------------------*/
/*---img-right---*/
.img-right > .flex {justify-content: space-between; align-items: center;}
.img-right {background: var(--grey); padding-top: 130px!important; padding-bottom: 130px!important;}
.img-right .wrapper > div:first-child {max-width: 770px; margin-right: 50px;}

.img-right .inv-links .img-height {
	position: relative;
	background: var(--dark-grey);
	max-width: 450px;
	width: 100%;
	height: 300px;
	border-radius: 10px;
	transition: all .4s ease-out;
}
.img-right .inv-links .img-top {max-width: 920px!important; width: 100%; margin-bottom: 20px;min-width: 660px;}
.img-right .inv-links img {opacity: .2; object-fit: cover; width: 100%; height: 100%;border-radius: 10px;}
.img-right .inv-links .img-height:hover {background: var(--red);}
.img-right .inv-links .flex {gap: 20px;}

.img-right .heading-mdsm {position: absolute; left: 30px; bottom:20px; }

/*---center-txt---*/
.center-txt {background: linear-gradient(to bottom, #F3F2F2 50%, #fff 50%); padding: 0 30px;}
.center-txt .img-height {position: relative; background: var(--dark-grey); max-width: 100%; height: 730px;}
.center-txt .img-height img {width: 100%; height: 100%; object-fit: cover; opacity: .6;}
.center-txt .center-content {
	position: absolute;
	left: 0;
	right: 0;
	top: 30%;
	padding: 0 15px;
}

.center-txt p {color: #fff!important; text-align: center; max-width: 1110px; margin: 0 auto;}
.center-txt .heading-md {color: #fff!important; text-align: center; max-width: 1110px; margin: 0 auto 30px;}
.center-txt .btn-top {display: flex; justify-content: center;}

/*---img-left---*/
.img-left {padding: 30px; gap: 30px;}
.img-left .img-height {width: 100%; max-width: 1000px;}
.img-left .grey-box {background: var(--grey); padding: 100px 90px; width: 100%; max-width: 725px; min-width: 360px;}
.img-left li {margin-top: 40px;}
.img-left li a {font-size: 20px; color: var(--dark-grey);font-family: 'figtree', sans-serif;}
.img-left li a:hover {text-decoration: underline;}
.img-left li i {color: var(--red)!important; margin-right: 20px;}

/*---center-a---*/
.center-a {background: url("/siteart/contact-background.jpg") no-repeat; background-position: center; background-size: cover; background-color: var(--dark-grey);}
.center-a .wrapper {padding-top: 80px!important; padding-bottom: 80px!important;}
.center-a h2 {color: #fff; text-transform: uppercase; letter-spacing: 4px; font-size: 20px; font-weight: 500; margin-bottom: 20px; text-align: center;}
.center-a a {color: #fff; font-size: 100px;font-family: 'address-sans-pro', sans-serif; font-weight: 700; display: flex; justify-content: center;}
.center-a a:hover {text-decoration: underline;}

/*--------PAGE STYLES--------------------*/
/*---thankyou---*/
#thankyou p {max-width: 700px; text-align: center; margin: 0 auto;}
#thankyou .inner-hero {background: var(--grey);}
#thankyou .heading-lg {margin-bottom: 40px; color: var(--dark-grey)!important;}
#thankyou .inner-hero a {color: #fff!important;}

/*---service---*/
#service .img-right .wrapper > div:first-child p a {color: var(--red); font-weight: 700;}
#service .img-right .wrapper > div:first-child p a:hover {text-decoration: underline;}
#service .img-right .img-height-inner {max-width: 920px; width: 100%; height: 750px;}
#service .img-right .img-height-inner img {width: 100%; height: 100%; object-fit: cover;}
#service .img-right .wrapper > div:first-child {width: 100%;}

/*---service---*/
#parts .img-right .wrapper > div:first-child p a {color: var(--red); font-weight: 700;}
#parts .img-right .wrapper > div:first-child p a:hover {text-decoration: underline;}
#parts .img-right .img-height-inner {max-width: 920px; width: 100%; height: 600px;}
#parts .img-right .img-height-inner img {width: 100%; height: 100%; object-fit: cover;}
#parts .img-right .wrapper > div:first-child {max-width: 770px;}

/*---contact---*/
.col-3 .grey-bg {margin: 0 30px 30px; background: var(--grey);}
.col-3 .flex {justify-content: center; align-items: center; gap: 30px; padding: 130px 30px!important;}
.col-3 .contact-card {background: #fff; max-width: 550px; width: 100%;}
.col-3 .contact-card > div {padding: 80px 15px;}
.col-3 .contact-card i {font-size: 40px; display: flex; justify-content: center; margin-bottom: 15px; color: var(--red);}
.col-3 .contact-card .heading-mdsm {text-align: center; color: var(--dark-grey); margin-bottom: 30px;}
.col-3 .contact-card > div > div {margin: 0 auto; text-align: center;}
.col-3 .contact-card a:hover {text-decoration: underline;}
.col-3 .img-height {width: 100%; height: 400px;}

/*--------FORM STYLES--------------------*/
.form-all .heading-md {margin-bottom: 10px; }
.form-all p {max-width: 750px; margin: 15px auto 40px;}

.form-all {
	box-sizing: border-box;
	max-width: 1200px!important; 
	width: 100%;
	margin: 0 auto 100px!important;
	text-align: center;
	padding-top: 130px!important;padding-bottom: 130px!important;
}

 .label {
	font-family: 'figtree', sans-serif;
	text-align: left!important;
	font-weight: 500;
	font-size: 19px;
}

.label-row {margin-bottom: 15px;color: var(--dark-grey);}

.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 {
	display: inline-block;
	width: calc(50% - 8px);
	margin: 15px 15px 15px 0;
}

.form-half input {
	padding: 15px;
	width: 100%;
	font-family: 'figtree', sans-serif;
	box-sizing: border-box;
	background: var(--grey);
	font-size: 20px;
	color: var(--dark-grey);
	border: none;
}

.form-2nd-row {margin-right: 0;}

.form-full-sm {
	display: inline-block;
	width: 100%;
	margin: 15px 0;
}

.form-full-sm input {
	padding: 15px;
	width: 100%;
	border: none;
	background: var(--grey);
	font-family: 'figtree', sans-serif;
	box-sizing: border-box;
	color: var(--dark-grey);
	font-size: 20px;
}

.form-full textarea {
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	margin-bottom: -8px;
	font-family: 'figtree', sans-serif;
	background: var(--grey);
	font-size: 20px;
	color: var(--dark-grey);
	border: none;
}

.form-full {margin: 15px 0 30px 0;}

input::placeholder, textarea::placeholder {color: var(--dark-blue);}
select {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

/*--------Captcha--------------------*/

.include-captcha{display:none;}
#submit-btn {float: right;}
.CaptchaWhatsThisPanel > a:hover {text-decoration: underline;}
.CaptchaWhatsThisPanel > a, .CaptchaMessagePanel {color: var(--dark-grey);font-family: 'figtree', sans-serif;}
.CaptchaPanel {text-align: right!important;}
.captcha-button {float: right;}



/*-------- FOOTER STYLES ----------------*/
.my-site-footer {background: var(--dark-grey);}
.my-site-footer .wrapper {padding-top: 80px!important; padding-bottom: 80px!important;}
.my-site-footer .img-height img {max-width: 300px; width: 100%;}
.my-site-footer .footer-links {justify-content: space-between; align-items: center;}
.my-site-footer .footer-links ul {gap: 60px;}
.my-site-footer .footer-links li a {font-weight: 700;}
.my-site-footer .footer-links li a, .my-site-footer .footer-contact a {
	color: #fff;
	font-family: 'figtree', sans-serif; 
	font-size: 20px; 
	transition: all .4s ease-out;
}
.my-site-footer .footer-links li a:hover, .my-site-footer .footer-contact a:hover {color: var(--red);}
.my-site-footer .footer-contact {margin-top: 60px; margin-bottom: 40px;}
.my-site-footer .footer-contact a i {color: var(--red); margin-left: 30px;}
.my-site-footer .footer-contact {gap: 60px;}

/*-------- UNIVERSAL STYLES ----------------*/
.wrapper {
	padding: 0 15px; 
	margin: 0 auto;
	max-width: 1830px;
}

.flex {display: flex;}

.btn-top {margin-top: 60px;}

.p-top {margin-top: 20px;}

/*---Headings---*/
.heading-lg {font-size: 105px; font-weight: 700; color: #fff; line-height: 110px;text-align: center;}
.heading-md {font-size: 70px; font-weight: 700; color: var(--dark-grey); margin-bottom: 30px;}
.heading-mdsm {font-size: 40px; font-weight: 700; color: #fff;}

.h2-span {font-size: 30px; font-weight: 400!important;}
.h3-span {font-size: 20px; letter-spacing: 3px; font-weight: 400!important;}

/*---Buttons---*/

.btn-red, .btn-red-light {
	display: inline-block;
	color: #fff;
	background: var(--red);
	width: 200px;
	padding: 18px 0;
	font-family: 'address-sans-pro', sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	transition: all .4s ease-out;
	border-radius: 10px;
	border: none;
}

.btn-red:hover {background: var(--dark-grey);}
.btn-red-light:hover {background: #fff; color: var(--dark-grey);}

.btn-bottom{ margin: 30px 0px 30px 0px;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.list-content .price-container .price, .list-top-section .list-listings-count, .listing-prices__retail-price, .parts-list-content .error-message, .parts-list-content .parts-title-and-breadcrumbs .parts-listings-count {color: var(--red)!important;}

.faceted-search-content .selected-facets-container .selected-facet {background: var(--red)!important;}

.list-container-flexrow .view-listing-details-link, .view-listing-details-link, .list-content .list-error-container .info button:not(.login-button) {background: var(--red)!important; transition: all .4s ease-out;}
.list-container-flexrow .view-listing-details-link:hover, .view-listing-details-link:hover, .dealer-contact__button:hover, .contact-bar-btn:hover, .list-content .list-error-container .info button:not(.login-button):hover {background: var(--dark-grey)!important;}

.dealer-contact__phone p a, .dealer-contact__videochat, .dealer-contact__phone .dealer-contact__icon, .dealer-contact__videochat .dealer-contact__icon {color: var(--dark-grey)!important;}


/*---------- RESPONSIVE STYLES ----------*/


@media only screen and (max-width: 1280px) {
	#parts .img-right > .flex {flex-wrap: nowrap;}
	#parts .img-right .wrapper > div:first-child {margin-right: 30px; margin-bottom: 0;}
	.img-right > .flex {flex-wrap: wrap;}
	.img-right .wrapper > div:first-child {margin-bottom: 60px; margin-right: 0;}
	.img-right .inv-links {width: 100%;}
	.img-right .inv-links .img-top {max-width: 1300px!important; min-width: 10px!important;}
	.img-right .inv-links .img-height {max-width: 700px;}
	#service .img-right .img-height-inner {max-width: 1200px;height: 350px;}
}

@media only screen and (max-width: 1130px) {
	.col-3 .flex {flex-direction: column;}
	.my-site-footer .footer-links {flex-direction: column;}
	.my-site-footer .img-height {margin-bottom: 50px;}
	.my-site-footer .footer-contact, .my-site-footer .footer-btn {justify-content: center; display: flex;}
}

@media only screen and (max-width: 1000px) {
	.center-txt .center-content {top: 25%;}
	.img-left .grey-box {padding: 60px 50px;}
}

@media only screen and (max-width: 800px) {
	.center-a a {font-size: 70px;}
	#parts .img-right > .flex {flex-wrap: wrap;}
	#parts .img-right .wrapper > div:first-child {margin-right: 0px; margin-bottom: 60px;}
	#parts .img-right .img-height-inner {height: 350px;}
	.my-site-footer .footer-links ul, .my-site-footer .footer-contact {flex-direction: column; justify-content: center; align-items: center;}
	.my-site-footer .footer-contact {gap: 40px;}
	.my-site-footer .footer-links ul {gap: 25px;}
}

@media only screen and (max-width: 730px) {
	.heading-lg {font-size: 55px; line-height: 60px;}
	.heading-md {font-size: 50px;}
	.heading-mdsm {font-size: 30px;}
	.home-hero .heading-lg {font-size: 60px!important; line-height: 70px!important;}
	.center-line .heading-lg {font-size: 50px!important; line-height: 60px;}
	.home-hero .btn-top {margin-top: 45px!important;}
	.h2-span {font-size: 25px;}
	.center-txt {padding: 0 15px;}
	.img-left {padding: 15px; gap: 15px; flex-wrap: wrap;}
	.img-left .img-height {height: 200px;}
	.img-left .grey-box {min-width: 100px;}
	.col-3 .grey-bg {margin: 0 15px 15px;}
	.col-3 .flex {padding: 80px 15px !important;}
}

@media only screen and (max-width: 650px) {
	.home-hero .wrapper, .form-all {padding-top: 80px!important; padding-bottom: 80px!important;}
}

@media only screen and (max-width: 600px) {
	.center-txt .center-content {top: 15%;}
	.flex-row {flex-directin: column;}
	.form-half {width: 100%; margin: 15px 0;}
	.inner-hero .wrapper {padding-top: 100px!important; padding-bottom: 100px!important;}
}

@media only screen and (max-width: 580px) {
	.img-right .inv-links .flex {flex-wrap: wrap;}
	.img-right .inv-links .img-height {height: 150px;}
	.center-line .heading-lg {font-size: 45px!important; line-height: 55px;}
}

@media only screen and (max-width: 550px) {
	.img-right {padding-top: 80px!important; padding-bottom: 80px!important;}
	.img-left .grey-box {padding: 50px 15px;}
	.center-a a {font-size: 45px;}
	.col-3 .img-height {height: 300px;}

}

@media only screen and (max-width: 420px) {
	.center-txt .center-content {top: 10%;}
	.img-left li a {font-size: 18px;}
	.col-3 .contact-card a {font-size: 18px!important;}
	.col-3 .contact-card > div {padding: 50px 15px;}
	.h1-span-bottom {font-size: 25px!important; line-height: 35px!important; }
}

@media only screen and (max-width: 390px) {
	.heading-lg {font-size: 48px; line-height: 58px;}
	.img-left li i {margin-right:10px;}
	.home-hero .heading-lg {font-size: 55px!important; line-height: 65px!important;}
}

@media only screen and (max-width: 370px) {
	.heading-md {font-size: 45px;}
	.center-txt .img-height {height: 800px;}
	.my-site-footer .footer-contact a i {margin-left: 10px;}
	.my-site-footer .footer-contact a {font-size: 18px;}
	.center-a a {font-size: 38px;}
	.col-3 .contact-card a {font-size: 17px!important;}
}

@media only screen and (max-width: 350px) {
	.heading-lg {font-size: 44px; line-height: 54px;}
	.img-left li a {font-size: 17px;}
	.col-3 .grey-bg {margin: 0 0 15px 0;}
	.center-line .heading-lg {font-size: 40px!important; line-height: 50px;}
}

@media only screen and (max-width: 338px) {
	.center-txt .center-content {top: 5%;}
	.center-txt .img-height {height: 900px;}
}