﻿/***** BEGIN RESET *****/
@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");
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&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;
}

a,button {cursor:pointer;}

/*-------- ANIMATION STYLES --------*/

/*animation element*/

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 700ms linear;
  -webkit-transition: all 700ms linear;
  -o-transition: all 700ms linear;
  transition: all 700ms 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);
}
/*animation slide left styled for testimonials*/

.animation-element.slide-left.testimonial {
  float: left;
  width: 47%;
  margin: 0% 1.5% 3% 1.5%;
  background: #F5F5F5;
  padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-left.testimonial .right{
  float: left;
}
/*-------- BODY STYLES --------*/

body {
overflow-x: hidden;
box-sizing: border-box;
font-family: "Cairo", sans-serif;
line-height:1.6;
position:relative;
}

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;}

.flex {display:flex;}


a.red-button button {background: #AA0000;border: unset;color: #fff;padding: 20px 0;width: 100%;max-width: 500px; text-transform:uppercase;font-weight:600;font-size:16px;transition:.3s;}


a.red-button button:hover {background:#5E0001;}

.red-button button {background: #AA0000;border: unset;color: #fff;padding: 20px 0;width: 100%;max-width: 500px; text-transform:uppercase;font-weight:600;font-size:16px;}
a.red-button  {width:100%;max-width: 500px;}

/*--- HEADER STYLES ---------------------*/
header {}
.hero-header img {max-width: 100%;width: 100%;height: 900px;
    object-fit: cover;}
.site-header {display: flex;background: #000;align-items: center;position: relative;}

.subhero-header img {    max-width: 100%;
    width: 100%;
    height: 540px;
    object-fit: cover;
    object-position: 0 67%;}

/*---BODY--------------------------------*/
.floating-background.sub-page {top: -24px !important;margin-bottom: -24px !important;}

.floating-background {position: relative;width: 97%;margin: 0 auto;top: -37px;background: #fff;box-shadow: 0 5px 25px #0003;margin-bottom: -36px; z-index: 1;}
.floating-background.home {position: relative;width: 97%;margin: 0 auto;top: 0;background: #fff;box-shadow: unset; z-index: 1;}

.two-section {width: 90%;margin: 0 auto;display: flex;justify-content: space-between;padding: 70px 0 6%;align-items: center;}
.two-section.benefit {align-items: start;}
.section-content.text {width: 100%;}
.section-content {width: 74%;margin-bottom: 30px;}
.section-content h1 {font-size: clamp(1.5625rem, 1.3497rem + 1.0638vw, 2.8125rem);}
.section-content.flex {width: 45%;}

.section-content p {margin-bottom:15px;}

/*---Inventory Categories--------------------*/
.inv-cat {position: relative;line-height:0;margin:0;transition:.3s;}

.inv-cat:hover .overlay{background: #0008;} 
.inv-cat:hover .overlay-content button {max-width: 200px;}

.inventory-wrap {display: flex;justify-content: center;repeat:no-repeat;flex-wrap: wrap;}
.inventory-wrap {padding: 60px 0;gap: 20px;}
.overlay {background: #0005;position: absolute;top: 0;width: 100%;display: flex;height: 100%;align-items: end;padding-left: -1%;transition:.3s;}

.overlay-content {    
	padding-bottom: 30px;
    padding-left: 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;}

.gray-background {    background: #CCCCCC;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 12%;
    top: 5%;}

.icons-social {display: flex;align-items: center;color: #fff !important;gap:30px;}

.icons-social i{color:#fff;font-size: 40px;}

.overlay-content p {font-size: clamp(1.0625rem, 0.9471rem + 0.5769vw, 1.625rem);text-transform:uppercase;font-weight:700;margin-bottom:8px;}


.overlay-content button {border: 3px solid #fff;background: unset;color: #fff; padding: 10px 0;width: 100%;max-width: 216px;display: flex;justify-content: center;font-size: 17px; text-transform: uppercase;gap: 10px;transition:.3s;}


img.background-image {width:100%;}

/*---About Section--------------------*/
.about-content {width: 50%;height: 600px;background: rgba(170,0,0,0.8);display: flex;align-items: center;color: #fff;}
.about-content div {width:60%;margin: 0 auto;}
.about-image {background: url("../siteart/about-photo.png");background-repeat: no-repeat;background-size: cover;background-color:#000;}
.button.flex {width: 100%;}
.about-content h1 {font-size: clamp(1.25rem, 1.0372rem + 1.0638vw, 2.5rem);}


/*---Service Section--------------------*/
.service-photos {display:flex;width:100%;justify-content: space-between;}
.service-photos img {width:100%;max-width:300px;}
.service-contact h2 {font-size: clamp(1.3125rem, 1.0465rem + 1.3298vw, 2.875rem);}
.service-contact p {font-size: clamp(1rem, 0.9468rem + 0.266vw, 1.3125rem);}
.service-information a {color:#fff;}
.service-information a,.service-location a {margin-bottom: 4px;}
.service-location h3 {font-size: clamp(1.1875rem, 1.0811rem + 0.5319vw, 1.8125rem);}
.service-location .flex{margin-top: 4px;}
.service-contact .button.flex a {max-width:unset;}
.two-section.service-info {    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 70px 0;
    background: #AA0000;
    color: #fff;}


.two-section.service {padding: 5% 0 4%;}
.two-section.service .flex.wrapper {display: flex;flex-direction: column ;}
.service-photos img {width: 100%;max-width: 24%;margin-top: 40px;}
.service-links {display: flex;flex-direction: column;justify-content: center;}
.service-information {display: flex;gap: 50px;}
.service-contact {line-height: 1.2;}

/*---Brand Categories--------------------*/
.brand:hover img {transform:scale(.9)}
.brand img {transition:.3s;}

.brand {box-shadow: 0 0px 2px #0004;padding: 2% 0;display: flex;justify-content: center;}
.brands .flex {flex-wrap:wrap;justify-content: center;gap: 8px;padding-top: 20px;}
.button.flex {padding-top: 20px;gap: 20px;}

.button.flex button {border:unset;background: #fff;padding: 20px 0;width: 100%;font-size: 16px;text-transform:uppercase;font-weight:600;color:#000;transition:.3s;}

.button.flex button:hover {background:#B5B5B5}

.button.flex a {;width:100%;max-width:500px;}

.brands {width: 80%;display: flex;flex-direction: column;align-items: center;gap: 30px;}

.one-section.brands .section-header .wrapper{width:90%;margin:0 auto;}
.one-section.brands .section-header .wrapper h1{font-size: clamp(1.375rem, 1.2686rem + 0.5319vw, 2rem);}

.one-section.brands {padding-bottom: 6%;padding-top:0;}
.one-section.brands .section-header {text-align: center;width: 100%;margin: 0 auto;padding: 60px 0;margin-bottom: 50px;background: #AA0000;color: #fff;font-weight:700;}

.two-section.brand-section {align-items: center;}

.section-content h2 {font-size: clamp(1.25rem, 1.1436rem + 0.5319vw, 1.875rem);margin-bottom:10px;}

.one-section {padding: 110px 0;}
.one-section .flex.wrapper {display: flex;flex-wrap: wrap;width:90%;margin: 0 auto;justify-content: center;gap: 42px;}
.section-header {text-align: center;width: 90%;margin: 0 auto;padding-bottom: 50px;}

.brands .flex.wrapper a {width: 100%;max-width: 30%;}

.two-section.brand-section {gap: 6%;}

.two-section.brand-section .section-content{width: 60%;}

.sub-page .one-section.brands {width: 100%;}

/*---LOCATION STYLES--------------------*/
.two-section.location .flex.wrapper {display: flex;width: 50%;background: #AA0000;color: #fff;padding: 30px 70px;}
.two-section.location .flex.wrapper .section-content.text {width: 100%;display: flex;flex-direction: column;align-items: center;text-align: left;}
.two-section.location {width: 100%;align-items:center;margin-bottom:unset !important;}
.two-section.location .flex.wrapper .section-content.text .contact.flex {justify-content: center;width:100%;}
.two-section.location .contact-flex{width: 90%;margin: 0 auto;
    /* text-align: center; */}
.two-section.location p {margin-bottom:10px;font-weight:600;}

.two-section.location .section-content {margin-bottom:unset;}
/*---Social Media--------------------*/
.social-media {background: #000;color: #fff;padding: 40px 0;margin-top: 20px;}
.social-media .wrapper.flex {width:90%;justify-content: space-between;margin:0 auto;}
.social-media .header {text-transform:uppercase;font-size: clamp(1.25rem, 1.1436rem + 0.5319vw, 1.875rem);font-weight:600;font-family: "Roboto Condensed", sans-serif;display:flex;gap:20px;width: 100%;}



.facebook-content h3{font-size: clamp(1.5625rem, 1.5093rem + 0.266vw, 1.875rem);}

/*---VIDEO STYLES--------------------*/
video {height: auto;width:100%;max-width:400px;max-height:500px;}
video.horizontal {height:unset;}
.one-section.brands.videos .flex.wrapper {align-items: flex-start;}


/*---FACEBOOK STYLES--------------------*/
.two-section.facebook {padding: 0;}
.two-section.facebook .wrapper.flex {align-items:center;}
.facebook-content {width: 70%;margin: 0 auto;}
.facebook-posts {width: 50%;display: flex;justify-content: center;align-items: center;}
.two-section.facebook {width: 100%;display: flex;justify-content: space-between;align-items: center;background: #AA0000;margin: 20px auto;color:#fff;}
.facebook-posts {background:#fff; }
/*---BLOGS STYLES--------------------*/
.section-content.blogs {width:100% !important;}


/*---- COLLAPSIBLE -----*/
/* Style the button that is used to open and close the collapsible content */
.collapsible,input.red-button-2.form {
  background-color: #fff;
  color: #AA0000;
  cursor: pointer;
  margin-top:30px;
  padding: 18px;
  width: 100%;
  max-width:400px;
  border: none;
  text-transform:uppercase;
  text-align: center;
  outline: none;
  font-size: 16px;
	font-weight:600;
}

.collapsible h3 {margin-top:30px;}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
    display: none;
    overflow: hidden;
    background-color: #AA0000;
    color: #fff;
    text-align: left;
    padding-top: 40px;
}


/*--------PARTS PAGE STYLES--------------------*/
.one-section.form {background:#CCCCCC;padding: 50px 0;}
.section-heading {width: 90%;padding: 0 5% 1%;}
.section-content.flex {flex-direction: column;gap: 10px;}
.section-content.flex a.red-button button,.section-content.flex  a.red-button,.dropdown.red-button button{max-width:100%;}
.two-section.parts {padding: 70px 0 0;}

.one-section.form .section-heading p {    text-transform: uppercase;
    font-weight: 800;
    font-size: 27px;}

.gallery-heading h2 {font-size: clamp(1.125rem, 0.9973rem + 0.6383vw, 1.875rem);}
span.red-bold {font-size:16px;font-weight:800;margin-bottom:20px;color:#AA0000;}
.gallery-heading {margin-bottom: 9px;line-height: 1.2;}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  position: relative;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: relative;
  bottom: 0;
  border: 3px solid #f1f1f1;
}

/*
 Add styles to the form container 
.form-container {
  max-width: 300px;
  padding: 10px;
}
*/

#myForm {display:none;}

.two-section.parts .flex.wrapper {width: 66%;}
/*--------CAREER STYLES--------------------*/

.triangle {     width: 0;
    height: 0;
    border-top: 55px solid transparent;
    border-left: 50px solid #AA0000;
    border-bottom: 55px solid transparent;}

span.bold-text {font-size: 24px;}


.two-section.contact {flex-direction: column;}
.job-options {    display: flex;
    padding: 0 0;
    gap: 40px;
    align-content: flex-start;
    width: 100%;flex-wrap: wrap;
	margin:30px auto;}

.job-cat {      
	box-shadow: 0 0 5px #0005;
    padding: 20px 0;
    width: 100%;
	max-width: 48%;
    display: flex;
    align-items: center;
    gap: 50px;}

.two-section.benefit {flex-direction: column;}
.benefits-flex {display: flex;flex-wrap: wrap;}
.benefits-flex {display: flex;flex-wrap: wrap;justify-content: start;gap: 10px;margin-top: 20px;}

.benefit-cat {width: 100%;max-width: 402px;padding: 20px 0px;text-align: center;
    background: #AA0000;
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;}

.two-section.benefit p {text-align: left;font-size:19px;font-weight:700;margin-top:30px;}
.two-section.benefit a {color:#AA0000;}

.benefits-title h2 {font-size:40px;}
div.two-section.benefit div.section-heading.contact {    background: #AA0000;
    padding: 50px 0 90px;
    width: 100%;
    color: #fff;
    flex-direction: column;}

.career-button {width: 100%;margin-top: 30px;}
.career-button a.red-button button{max-width:unset;}


/*--------FINANCE PAGE STYLES--------------------*/
.finance-image {width: 27%;}
.finance-image img{width: 100%;transition:.3s;}

.finance-image:hover img {transform:scale(.8);}

.finance-width {width: 50%;}
.finance.flex {justify-content: start;gap: 30px;}
.finance {display: flex;justify-content: space-around;align-items: center;padding-bottom: 1%;}
.section-content.finance {width:unset;}

.finance-options {    display: flex;
    padding: 0 0;
    gap: 40px;
    align-content: flex-start;
    width: 100%;flex-wrap: wrap;
	margin:30px auto;}

.finance-cat {      
	box-shadow: 0 0 5px #0005;
    padding: 39px 0;
    width: 100%;
	max-width: 48%;
    display: flex;
    align-items: center;}

.finance-flex {display: flex;align-items: center;justify-content: center;gap: 40px;}

.two-section.contact.finance {padding-bottom: 6%;}

/*--------CONTACT PAGE STYLES--------------------*/
.section-heading.contact {background:#AA0000;width:100%;color:#fff;flex-direction: column;padding: 5% 0;}
.social a i{color:#AA0000;font-size:25px;}
.contact.flex {justify-content: start;gap:30px;}
.two-section.contact {align-items: start;}
.two-section.benefit {padding: 70px 0 2%;}


/*--------FORM STYLES--------------------*/
.form-wrapper {width: 90%;margin: 0 auto;display: flex;flex-direction: column;}

.formfield {gap: 20px;}
.formfield input,.formfield select,.formfield textarea, .long-input input {padding:20px;border:unset;margin-bottom: 16px;box-sizing:border-box;width: 100%;}

label {text-align: left;}

form#myInput {text-align: center;width:90%;margin: 0 auto;}
.one-section.form input#keyword {width: 100%;padding: 15px 10px;border:none;box-sizing: border-box;}
.formfield div {width: 100%;}

.one-section.form button#Submit {top: 123px;}

button#Submit {    position: absolute;
    border: none;
    background: none;
    top: 43%;
    right: 6%;
    font-size: 17px;}

.formfield {display: flex;justify-content: center;}

.dropbtn {
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition:.3s;
}

.dropdown i {color:#2e6e35;}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus,input.red-button-2.form:hover {
  background:#B5B5B5;
  color:#000;
}
input.red-button-2.form {transition:.3s;}

.dropdown-content-header {background:gray}

/* The search field */



#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  border: none;
}

/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
#myInput i {color:#2e6e35;font-size:20px;}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: flex;
    gap: 11px;
}

.social-header {display:flex;gap:10px;}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: relative;
    padding: 80px 0;
  background-color:#AA0000;
  color:#fff;
    width: 100%;
    left: 0;
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}



/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


#myDropdown a {
  opacity: 1;
  transition: opacity 0.3s ease;
}

#myDropdown a.hidden {
  opacity: 0;
  pointer-events: none;
}

form.contact-form {width: 100%;}

.CaptchaPanel {text-align: left !important;}
.CaptchaWhatsThisPanel a {color:#fff;}



.search-header .dropdown-content { 
    background-color: #868686;padding: 40px 0;}

.search-header input#keyword {width: 100%;border: none;padding:  10px;box-sizing: border-box;}
.search-header button#Submit {color: #000 !important;}
#myInput i {color:#000;}
.header-socials .dropdown i {color:#fff !important;font-size: 20px;}
.header-socials button.dropbtn {background:unset !important;}

textarea {font-family: "Cairo", sans-serif;}
/*-------- FOOTER STYLES ----------------*/


footer{background:#000;}
.footer i {color:#fff;}
iframe.scrolling {width: 100%;}
.scrolling-wrap {height: 80px;}

.map img {width: 90%;max-width: 820px;}
.footer .two-section .wrapper.flex {flex-direction:column;align-items: center;gap: 30px;}
.footer .two-section .wrapper.flex p, .footer .two-section .wrapper.flex a{color:#fff;}
span.title-text {font-size: clamp(1.25rem, 1.1436rem + 0.5319vw, 1.875rem);text-transform:uppercase;font-weight:800;font-family: "Roboto Condensed", sans-serif;}
span.large-text {text-transform:uppercase;font-family: "Roboto Condensed", sans-serif;}
.contact-information {flex: 2;border-left: 4px solid #fff;}
.flex.icons {margin-top: 10px;gap: 7px;font-size: 20px;}

i.fa-solid.fa-clock {margin-top: 5px;margin-right: 4px;}

.large-text {font-size: 600;font-size: 20px;font-weight: 800;padding-bottom: 30px !important;}

span.footer-bold {font-weight: 900;}

.footer .two-section .wrapper.flex {flex: 3;}

.footer-bottom {background:#AA0000;padding:2% 0;}
.footer-bottom .wrapper.flex  ul{display:flex;flex-direction:row;justify-content: center;width: 100%;gap: 3%;flex-wrap: wrap;}
.footer-bottom .wrapper.flex  ul li a{color:#fff;font-size:16px;text-transform:uppercase;font-weight:800;font-family: "Roboto Condensed", sans-serif;}
.footer li {color:#fff;margin-bottom: 5px;}
.footer-cat {width: 50%;}

.absolute-buttons {position: fixed;right: 0;bottom: 9vh;text-align: right;z-index: 4;}

.text-hover.mobile {display:none;}

.text-hover button {border-radius:40px;color:#fff;background:#AA0000;padding:20px 30px;border:unset;font-size:16px;font-weight:600;margin-bottom:10px;box-shadow:0 5px 5px #0003;}

.parts-hover button {border-radius:40px;color:#fff;background:#AA0000;padding:20px 30px;border:unset;font-size:16px;font-weight:600;box-shadow:0 5px 5px #0003;}


.flex.time {flex-direction: column;}

/*----THANK YOU STYLES ----*/
.two-section.thank-you {padding: 7% 0;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.container.cf {padding-top: 6% !Important;}

.section-content.inventory-flex {flex-direction: row;display: flex;margin-top: 6%;justify-content: center;width: 100%;gap: 50px;}
button.selected-facet.ts-button {background: #AA0000 !important;color: #fff !important;}

.list-content .linking-container .column3 ul li a {color:#000 !important;}

.list-content .listing-widgets .Currency a,.list-redesign .widget-container .listing-widgets .shipping a,.list-container-flexrow .view-listing-details-link {background:#AA0000 !important;color:#fff !important;}

/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1454px) {
	.one-section.form button#Submit {top: 119px;right: 6%;}
	.overlay-content p {font-size:18px;}
	.overlay-content {padding-left: 6%;padding-bottom: 4%;}
	.section-content {width: 90%;}
}
@media only screen and (max-width: 1400px) {
	.gray-background {height: 8%;top: 4%;}
	.inventory-wrap {flex-wrap:nowrap;width:90%;margin:0 auto;}
}

@media only screen and (max-width: 1200px) {
	.text-hover.mobile {display:block;}
}

@media only screen and (max-width: 1200px) {
	div#inventory-wrapper {padding-top: 70px;}
}


@media only screen and (max-width: 1120px) {
	.inventory-wrap {flex-wrap: wrap;}
}

@media only screen and (max-width: 1120px) {
	.two-section.service-info {flex-direction:column;align-items:center;gap: 52px;}
	.finance-cat {max-width:unset !important;}
	.service-contact {width: 90%;text-align: center;}
	.service-information {display: flex;gap: 50px;width: 90%;justify-content: space-evenly;}
}

@media only screen and (max-width: 1100px) {
	.one-section.form button#Submit {top: 116px;right: 6%;}
	.gray-background {display:none;}
	.list-top-section .list-bcrumbs-and-title .ground-bcrumbs {padding-top: 30px;}
}
	
@media only screen and (max-width: 1020px) {
	.two-section.location {width: 100%;align-items: center;flex-direction: column;}
	.two-section.location .flex.wrapper {display: flex;padding: 30px 0;width:100%;}
	.two-section.location .contact-flex {text-align: center;}
}
	
@media only screen and (max-width: 1000px) {
	.section-content {width: 90%;}
	.job-cat,.benefit-cat {max-width: 90%;margin: 0 auto;}
	.about-content {width: 100%;}
	.about-content div {width: 90%;margin: 0 auto;}
	.footer-bottom .wrapper.flex ul {display: flex;flex-direction: row;justify-content: center;width: 100%;gap: 5% 30px;flex-wrap: wrap;text-align: left;}
	.contact-information {flex: unset;border-left: unset;border-bottom: 3px solid white; width: 100%;}
	.footer-cat {width: 90%;}
	.footer .two-section .wrapper.flex {margin-bottom: 40px;}
	.job-cat {width:90%;margin:0 auto;}
	.footer .two-section {flex-direction: column-reverse;gap:30px;}
	.two-section.brand-section {flex-direction: column-reverse;}
	.two-section.brand-section .section-content {width: 90%;}
	.brands {width: 100%;}
	.sub-page .one-section.brands .flex.wrapper a {max-width: 47%;}
	
	.inv-cat {width: 90%;}
	.inv-cat img {width:100%;}
	.inv-cat .overlay-content img {width:unset;}
	.finance.flex {width: 90%;margin:0 auto;line-height:1.1;}
	.section-content.inventory-flex {margin-top: 100px;}
	.two-section {flex-direction: column-reverse;padding: 70px 0 6%;gap: 30px;}
	.section-content.flex {width: 100%;}
	.two-section.facebook {flex-direction: column;}
	.two-section.facebook .wrapper.flex {padding: 40px 0 0;}
	.facebook-posts {padding: 30px 0;width: 100%;}
}


@media only screen and (max-width: 900px) {
	.brand {padding: 2% 31px;}
	.brands.flex {flex-direction: column;}
	.brands .flex.wrapper a {width: 100%;max-width: 100%;}
	.brands .flex.wrapper {width: 90%;}
	.list-top-section .list-bcrumbs-and-title .ground-bcrumbs, .body-content {padding-top: 50px;}
}


@media only screen and (max-width: 750px) {
	.sub-page .one-section.brands .flex.wrapper a {max-width:90%}
	.one-section .flex.wrapper {gap: 22px;}
}


@media only screen and (max-width: 700px) {
	.social-media .wrapper.flex {flex-direction: column;align-items: center;gap: 40px;}
	.formfield {flex-direction: column;gap:unset;}
	.collapsible, input.red-button-2.form {max-width: 100%;margin-top: 10px;}
	.about-content {height: 710px;}
	.service-photos {flex-direction: column;align-items: center;}
	.service-photos img {width: 100%;max-width: 100%;margin-top: 10px;}
	.finance-flex {flex-direction: column;align-items: start;gap: 20px;margin: 0 auto;width: 80%;}
	.finance-width {width: 90%;}
	.finance-image {width: 37%;}
	.finance-cat {flex-direction: column;padding: 0 0 39px;}
	.triangle {width: 0;height: 0;border-top: 55px solid transparent;border-left: 50px solid #AA0000;border-bottom: 55px solid transparent;
    transform: rotate(90deg);position:relative;top: -30px;}
	.job-cat {flex-direction: column;padding: 0 0 20px;gap:0;text-align: center;
	}
	.two-section.service .flex.wrapper .section-content {padding-bottom: 30px;}
	.section-content.parts {width: 100%;margin: 0 auto;margin: 0 auto 30px;}
	.hero-header img {height: 450px;}
	.social-media img {display:none;}
	.social-media .wrapper.flex {gap: 12px;}
	.contact{display: flex;justify-content: space-around;width: 100% !important;align-items: start;flex-direction: column;padding-bottom: 1%;}
	.contact.flex {align-items: start;gap:unset;margin-bottom: 10px;}
	.section-content {    width: 90%;
    margin: 0 auto;}
	.subhero-header img {height: 270px;}
	.two-section.parts .flex.wrapper{width: 90%;}
	.triangle {margin-bottom: -40px;}
	.finance-flex {text-align: center;align-items: center;}
	.one-section.form button#Submit {top: 112px;right: 4%;}
	.footer-bottom {padding: 7% 7%;}
	.footer-bottom .wrapper.flex ul {flex-direction: column;gap: 10px;}
	.two-section.facebook .wrapper.flex {gap: 4%;flex-direction: column;}
	.facebook-content  {width: 90%;margin-bottom:30px;}
	.social-media .header {justify-content: center;}
}


@media only screen and (max-width: 640px) {
}

@media only screen and (max-width: 500px) {
	.button.flex {flex-direction:column;}
	.service-information {display: flex;gap: 30px;width: 90%;justify-content: space-evenly;flex-direction: column;}
	.two-section,.two-section.service {padding: 70px 0 16%;}
	form.contact-form {width: 90%;}
	.one-section.brands .section-header .wrapper h1 {margin-bottom:10px;}
}

@media only screen and (max-width: 500px) {
	.section-content.inventory-flex {width: 90%;gap: 10px;flex-direction: column;}
	.finance-image {width: 60%;}
}

@media only screen and (max-width: 430px) {
	.one-section.form button#Submit {top: 151px;right: 7%;}
	.gallery-heading.margin-top {margin-top:20px;}
}






