/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://media.sandhills.com/CDN/CSS/Font-Awesome/7.0.0/webfonts/fa-brands-400.woff2");
@import url("https://media.sandhills.com/CDN/CSS/Font-Awesome/7.0.0/css/all.min.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;
}

* {box-sizing: border-box !important;}

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

button,a {cursor:pointer;}

/*-------- BODY STYLES --------*/

body {
font-family: "Barlow", sans-serif;
font-style: normal;
overflow-x: hidden;
line-height: 1.5;
box-sizing: border-box;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

h1,h2,h3,h4,h5,h6 {font-family: "Roboto Condensed", sans-serif;text-transform:uppercase;}

h2 {font-size: clamp(1.5625rem, 1.3497rem + 1.0638vw, 2.8125rem);}
.sub-hero {line-height: 0;}
/*--- HEADER STYLES ---------------------*/
header {}

video {object-fit: cover !important;}
.site-header {display: flex;align-items: center;padding: 30px 0;background: #000;}

/*---BODY--------------------------------*/
/* Style the button that is used to open and close the collapsible content */

.heading.flex {color: #fff;display: flex;align-items: center;padding: 0 4% 3%;gap: 29px;}
.heading.flex h1 {font-size: clamp(1.5625rem, 1.1902rem + 1.8617vw, 3.75rem);}
.heading.flex i {font-size: clamp(1.5625rem, 1.1902rem + 1.8617vw, 3.75rem);color:#FFC20F;}
/*---COLLAPSIBLE-----------*/
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}
.show-more.yellow-button {
    background: #FFC20F;
    color: #000 !important;
	font-family: "Roboto Condensed", sans-serif;
    padding: 19px 40px !important;
    width: 100%;
    max-width: 680px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-size: 20px;
    margin: 50px auto 0;
    outline: unset;
    border: unset;
    display: flex;
    justify-content: center;
}

.active, .collapsible:hover {
  background-color: #555;
}

.hide-part{
    display: none;
}
.show-part{
    display: block;
}


.inv-section {
  background-color: #000;
  width: 100%;
  position: relative;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #0009;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.inv-section:hover .img-overlay{
  width: 100%;
}

.inv-section:hover .text{
  width: calc(100% - 50px);
}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: ease-in-out .5s;
    color: #fff;
    text-align: left;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    width: 900px;
    padding-left: 20px;
    border-left: solid #fff 6px;
    line-height: .6 !important;
    height: 90px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

span.large-text {font-size: 30px;font-family: "Roboto Condensed", sans-serif;text-transform:uppercase;}
span.small-text {font-size:20px;font-family: "Roboto Condensed", sans-serif;font-weight:500;}

.yellow-overlay {background: #FFC20F;opacity: 80%;position: absolute;width: 100%;height: 100%;transition:.3s}

.inv-all-cat {display: flex;justify-content: center;gap: 4px 16px;flex-wrap: wrap;}

.inventory-flex {display: flex;flex-direction: column;align-items: center;}
.inv-all-cat {width:100% !important;}
.inv-section img {width:100%;}

.inventory-image,.inv-all-cat,.inv-cat {line-height: 0;}
.inventory-image img {width: 100%;}

.all-inventory {width: 100%;max-width:91.5%;position:relative;overflow: hidden;margin-bottom: 14px;}

.inv-cat {width: 100%;max-width: 30%;margin-bottom: 10px;}
section#dropdown {background: #000;padding: 61px 0;margin-bottom: 60px;}
.heading.flex {color: #fff;}

.yellow-overlay .inv-content  {
    position: absolute;
    top: 36%;
    left: 2%;
	opacity:100% !important;
    color: #000;
    text-align: left;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    width: 480px;
    padding-left: 20px;
    border-left: solid #000 6px;
    line-height: 1;
    height: 90px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}


.yellow-overlay:hover {background:#0009;opacity:100%;}
.yellow-overlay:hover .inv-content {color:#fff; border-color:#fff; }



/*--- HOME ABOUT US-----------*/

section#about-us {background: url("../siteart/about-us.png");height: 590px;background-repeat: no-repeat;background-size: cover;background-position: 0 -60px;background-color:#000;overflow: hidden;margin-bottom: 60px;}
.black-overlay {background: #000;opacity: 85%;}
.about-content {color: #fff;}

.about-content {      
	position: relative;
    width: 51%;
    padding: 8.2% 0px 12.2% 7%;
    overflow: hidden;
    display: flex;}

.about-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 80%;
    background-color: #000;
    transform: skewX(10deg);
    transform-origin: bottom left;
    /* z-index: -1; */
}

.about-content .button-flex{
	padding-top: 40px;
	gap:20px;
    display: flex;
    justify-content: space-between;
}

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

span.bold {font-weight: 700;}
.button-flex {margin-top: 20px;}
.button-flex a {width: 100%;}

button.yellow-button,input.yellow-button {background: #FFC20F;color: #000 !important;padding: 11px 0% !important;width: 100%;font-weight:800;text-transform:uppercase;border: unset;}

.white-text {position: relative;z-index: 1;width: 58%;}

button.yellow-button:hover,input.yellow-button:hover,.active, .collapsible:hover {background:#fff; transition:.3s;}

.white-text h2{font-size: clamp(1.5625rem, 1.1902rem + 1.8617vw, 3.75rem);margin-bottom:2px;}

/*--------CONTACT US STYLES--------------------*/
.collapsible {background: #FFC20F;color: #000 !important;padding: 12px 0 !important;width: 100%;font-weight:800;text-transform:uppercase;
margin-top:10px;text-align:center;}



.content {
  display: none;
  overflow: hidden;
  padding-top:20px;
}

.contact.social-flex h1{font-size: 40px;;}
.contact-cat {color:#fff;width: 100%;}

.contact.social-flex i{color: #FFC20F;font-size: 24px;display: flex;align-items: center;}

.contact-buttons {display: flex;justify-content: space-between;padding-top: 30px;flex-direction: column;gap: 15px;width: 100%;max-width: 680px;}

.contact-cat a {color: #000;z-index: 900;font-family: "Roboto Condensed", sans-serif;}

#contact-us {background:#000;color:#fff;padding: 8% 0;}
#contact-us > .wrapper.flex {display: flex;justify-content: center;width: 90%;margin: 0 auto;flex-direction: row-reverse;}
.contact-info .wrapper.flex {display:flex;flex-direction:column !important;margin:unset !important;}
.contact.social-flex {display: flex;align-items: center;gap: 39px;}
#contact-us form{padding-left: 60px;}
.social {display: flex;gap: 6px;}
.contact-cat i {margin-right: 8px;}

/*--------ABOUT PAGE STYLES--------------------*/
.sub-hero.image {background: url("../siteart/sub-hero.png");width: 100%;height: 170px;background-repeat: no-repeat;background-size: cover;overflow:hidden;}
.hero-overlay {background: rgba(0,0,0,0.65);width: 100%;height: 100%;color: #fff;display: flex;align-items: center;justify-content: center;}
.hero-overlay h1{font-size: clamp(1.875rem, 1.6622rem + 1.0638vw, 3.125rem);}
.about-image img {max-width: 570px;padding-left: 70px;}

#about-us-page {background:#000;color:#fff;padding: 8% 0;}
#about-us-page > .wrapper.flex {display: flex;justify-content: center;width: 90%;margin: 0 auto;flex-direction: row-reverse;}
/*--------PARTS PAGE STYLES--------------------*/
.gears i{font-size: clamp(3.75rem, 2.3989rem + 6.7553vw, 11.6875rem);}

.contact-info {border-right: 6px solid #FFC20F;padding-right: 60px;width: 50%;display: flex;justify-content: center;flex-direction: column;}
.gears {width: unset;}

#our-parts {background:#000;color:#fff;padding: 8% 0;}
#our-parts > .wrapper.flex {display: flex;justify-content: center;margin: 0 auto;flex-direction: row;width: 70%;align-items: center;gap: 160px;}
.part-info .wrapper.flex {display:flex;flex-direction:column !important;margin:unset !important;}
.contact.social-flex {display: flex;align-items: center;gap: 39px;}
#our-parts form{padding-left: 60px;}
.social {display: flex;gap: 6px;}
.contact-cat i {margin-right: 8px;}

/*--- SALES PAGE STYLES -----------*/
#sales-page {background: #fff;
    color: #fff;
    padding: 2% 0;
    display: flex;
    flex-wrap: wrap;
    width: 97%;
    margin: 0 auto;}
#sales-page > .wrapper.flex {display: flex;justify-content: space-around;width: 49%;margin: 0 auto;flex-direction: row; background: #000;align-items: center;padding: 48px 33px;width: 43%;}
.sales-intro {background: #000;color: #fff;padding: 120px 29px;text-align: center;}
.sales-intro .wrapper {width: 90%; margin: 0 auto;}
.contact-info .wrapper.flex {display:flex;flex-direction:column !important;margin:unset !important;}
.contact.social-flex {display: flex;align-items: center;gap: 39px;}
#sales-page form{padding-left: 60px;}
.social {display: flex;gap: 6px;}
.contact-cat i {margin-right: 8px;}
.sales-header .contact.social-flex {display: flex;align-items: center;gap: 9px;}
.sales-header .contact.social-flex i{font-size: 44px;}
#sales-page .gears {width: unset;}
#sales-page .contact-buttons{display: flex;justify-content: space-between;padding-top: 15px;gap: 10px;width: 100%;flex-direction: column; max-width: 680px;}

.sales-cat {width: 100%;width: 60%;}
.sales-header h2 {font-size:30px;}
/*--------FORM STYLES--------------------*/
form {width: 60%;}
.formfield {width:100%;}
.form.flex {display: flex;flex-direction: column;}
.form .wrapper.flex {display:flex;}
.formfield input, .formfield select,textarea {box-sizing:border-box;width:100%;padding:15px 10px;}
.form.flex .wrapper-flex {display: flex;justify-content: space-between;gap: 30px;padding-bottom: 20px;}
div#formpage {width: 100%;}
.CaptchaPanel {margin: 10px 0px;text-align: left !important;padding: 10px;}
.CaptchaWhatsThisPanel a {color:#fff;}

/*-------- THANK YOU STYLES ----------------*/
#thankyou-page {background:#000;color:#fff;padding: 8% 0;}
#thankyou-page > .wrapper.flex {display: flex;justify-content: center;width: 90%;margin: 0 auto;flex-direction: row-reverse;}

/*-------- FOOTER STYLES ----------------*/
footer{}
.footer {display: flex;background:#000;color:#fff;align-items: center;padding: 90px 0;}
.footer-links {display: flex;}
ul.nav-flex {display:flex;gap: 34px;}
ul.nav-flex li a{text-transform:uppercase;}
.footer-cat {width: 20%;}
.footer-cat ul li a{color:#fff;font-size: 17px;font-weight:500;font-family: "Barlow", sans-serif !important;}
.footer-cat ul li {margin-bottom:5px;}

.footer-logo {flex: 1;margin: 0 auto;text-align: center;padding: 40px 0;}

.footer-logo img{width:100%; max-width:300px;}

.footer-cat.last {width:25%;}
.social-flex {margin-top:10px;}
.social-flex i{color:#FFC20F;font-size:20px;}
.footer-links {flex: 3;display: flex;justify-content: start;border-left: #FFC20F solid 6px;align-items: start;gap: 10%;padding-left: 60px;}
.footer-links p {font-size:25px;font-weight:700;font-family: "Roboto Condensed", sans-serif;text-transform:uppercase;margin-bottom:10px;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.ground-bcrumbs,.detail__breadcrumbs {padding-top: 30px !important;}
.faceted-search-content .selected-facets-container .selected-facet,.view-listing-details-link,.linking-buttons a.active {background:#FFC20F !important;color:#000 !important;}
.list-content .listing-widgets .Currency a,.list-redesign .widget-container .listing-widgets .shipping a,.listing-widgets-detail .Currency a {color:#fff !important;background:#000 !important;}
.column3.left ul li a{color:#000 !important;}

.sub-hero.image-parts {background: url("../siteart/parts-hero-3.jpg");width: 100%;height: 170px;background-repeat: no-repeat;background-size: cover;overflow:hidden;}


/*---------- RESPONSIVE STYLES ----------*/


@media only screen and (max-width: 1790px) {
	.footer-cat {width: 35%;}
	.footer-links {gap: 20px;padding-left: 37px;flex: 4;}
	
}

@media only screen and (min-width: 1780px) {
	.footer-logo {margin: 0 30px;}

}

@media only screen and (min-width: 1600px) {
	.white-text {position: relative;z-index: 1;width: 78%;}

}

@media only screen and (max-width: 1500px) {
	.about-image img {max-width: 440px;padding-left: 70px;padding-left: 40px;}

}



@media only screen and (max-width: 1294px) {
	.footer-cat.last {width: 31%;}
	
}

@media only screen and (max-width: 1220px) {
	.form.flex .wrapper-flex {flex-direction: column;gap: 15px;}
	span.large-text {font-size: 22px;}
	span.small-text {font-size: 17px;}
}


@media only screen and (max-width: 1200px) {
	.footer-cat {width: 36%;}
	.contact-info {padding-right: 30px;}
	.contact-info {width: 70%;}
	
}

@media only screen and (max-width: 1124px) {
	.about-content {width: 77%;}
	section#about-us {height: auto !important;}
	.footer-cat.last {width: 81%;}
.footer {flex-direction: column-reverse;}
	.footer-links {flex-direction: row;border-left:none;    flex: 3;
    display: flex;justify-content: space-evenly;border-bottom: #FFC20F solid 3px;align-items: center;padding-bottom: 30px;}
	.footer-cat {width: 90%;}
	.footer-links {gap: 40px;width: 90%;padding-left:unset;}
	.footer-cat ul li a {font-size: 16px;}
	
}

@media only screen and (max-width: 1100px) {
	.about-content {width: 77%;}
	section#about-us,section#thankyou-page {height: auto !important;}
	#about-us-page > .wrapper.flex,	#thankyou-page > .wrapper.flex {flex-direction: column-reverse;align-items: center;}
	#about-us-page .contact-info,#thankyou-page .contact-info {flex-direction: column-reverse;width: 100%;border-right: unset;border-bottom: 6px solid #FFC20F;padding-bottom: 30px;padding-right:unset;}
	.about-image img {max-width: 100%;padding-top:30px;padding-left: unset;}
	#our-parts > .wrapper.flex {width:90%;}
	
	span.large-text {font-size: 20px;}
	span.small-text {font-size: 16px;}
}

@media only screen and (max-width: 1000px) {
	#sales-page > .wrapper.flex {width: 63%;}
	
}
@media only screen and (max-width: 940px) {
	.inv-section span.large-text {font-size: clamp(1.75rem, 1.7287rem + 0.1064vw, 1.875rem);}
	.yellow-overlay .large-text {font-size: clamp(1.25rem, 0.3026rem + 4.7368vw, 2.375rem);}
	.yellow-overlay .small-text {font-size: clamp(1.125rem, 0.7566rem + 1.8421vw, 1.5625rem);}
	.inv-cat {width: 100%;max-width: 90%;margin-bottom: 10px;}
	.inventory-image {height:210px;}
	.inv-cat,.all-inventory {max-width: 94%;}
	.inventory-image {height:100%;}	
	.inventory-image img {width:1180px;}
	.yellow-overlay .inv-content {left: 5%;width: unset;}
	.inv-section span.large-text {font-size: clamp(1.25rem, 0.7237rem + 2.6316vw, 1.875rem);line-height: 1.2;}
	.yellow-overlay .large-text {font-size: clamp(1.25rem, 0.3026rem + 4.7368vw, 2.375rem);}
	.yellow-overlay .small-text {font-size: clamp(1.125rem, 0.7566rem + 1.8421vw, 1.5625rem);}
	.yellow-overlay .inv-content {top: 28%;}
	.inv-section span.small-text {font-size: 17px;}
}

@media only screen and (max-width: 900px) {
	#contact-us > .wrapper.flex {flex-direction:column-reverse;}
	#contact-us form {padding-left:unset;}
	.contact-info {padding-right:unset;border-bottom: 6px solid #FFC20F;border-right:unset;width: 100%;}
	div#formpage {padding-top: 46px;}
	.contact.social-flex {padding-bottom: 17px;}
	.contact-info {padding-bottom:40px;}
	form {width: 100%;}
	.all-inventory {max-width: 93.5%;height: 210px;}
	.inventory-image img {width: 1380px;}
	.button-flex {margin-top: 30px;}
	.contact-buttons {flex-direction: column;gap: 10px;max-width:unset;}
	video {height: 100% !important;}
	ul.nav-flex {gap: 30px;}
	section#about-us,section#dropdown {margin-bottom: 28px;}
	.about-image {display: none;}
	#thankyou-page .contact-info,#about-us-page .contact-info {border-bottom: none !important;padding:none;}
	.show-more.yellow-button {width: 90%;}
	.formfield input, .formfield select, textarea {padding: 15px 10px;}
}


@media only screen and (max-width: 800px) {
	#our-parts > .wrapper.flex {flex-direction: column !important;  gap: 23px;}
	.footer-links {flex-direction: column !important;}
	#our-parts .gears {width: 100%;text-align: center;}
	#our-parts .contact-header {text-align: center;}
	#our-parts .contact.social-flex {display: unset;}
}

@media only screen and (max-width: 700px) {
	
	.footer-cat.last {width: 90%;}
	
	.about-content::before {transform: unset;}
	.about-content {width: 100%;padding: 8.2% 0px;}
	.white-text {width: 90%;padding: 40px 0;margin: 0 auto;}
	.about-content.animation-element.slide-left.in-view {display: block;}
	#sales-page > .wrapper.flex {flex-direction: column;width: 90%;text-align:center;}
	.sales-cat {width: 90%;}
	.sales-header .contact.social-flex {display:block;}
	#sales-page .contact-buttons {max-width: unset;}
	#sales-page > .wrapper.flex {padding: 28px 11px;}
	#sales-page {padding: 8% 0;}
}


@media only screen and (max-width: 600px) {
	.form.flex .wrapper-flex {display: flex;justify-content: space-between;gap: 20px;padding-bottom: 20px;flex-direction: column;}
	.formfield input, .formfield select, textarea {box-sizing: border-box;width: 100%;padding: 25px 10px;}
}



@media only screen and (max-width: 500px) {
	.button-flex {flex-direction:column;gap: 20px;}
	.inv-section .img-overlay { width:100%;}
	.contact.social-flex {padding-bottom: 17px;flex-direction: column;align-items: start;gap: 4px;}
	.contact.social-flex i {font-size: 19px;}
	.text {width: 290px;left: 163px;}
}