@import url("https://fonts.googleapis.com/css2?family=Anton&family=Roboto: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; }

/*---PLEASE MAKE CSS CHANGES IN STYLES.SCSS FILE, CHANGES MADE IN CSS FILE WILL BE OVERRIDDEN ----*/
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; }

/*---PLEASE MAKE CSS CHANGES IN STYLES.SCSS FILE, CHANGES MADE IN CSS FILE WILL BE OVERRIDDEN ----*/
/*-------- 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; }

/*---PLEASE MAKE CSS CHANGES IN STYLES.SCSS FILE, CHANGES MADE IN CSS FILE WILL BE OVERRIDDEN ----*/
/*---These are Variables. They are being used in place of the hex color easily changes site colors but updating these variables----*/
/*----These are Mixins. They work similarly to variables and are plugged in using @include in place of the CSS----*/
/*-------- BODY STYLES --------*/
* { box-sizing: border-box; }

body { font-family: "Roboto", sans-serif; }

h1, h2, h3, h4, h5 { font-family: "Anton", sans-serif; }

a { text-decoration: none !important; }

.black-tags { padding: 11px 18px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: solid 1px #fff; border-radius: 5px; background: #000; color: #fff; font-size: 14px; font-weight: 500; }

.black-btn i { color: #fff; padding-right: 5px; font-size: 14px; }

.white-btn i { color: #000; padding-right: 5px; font-size: 14px; }

.black-btn { padding: 11px 18px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: solid 1px #fff; border-radius: 5px; background: #000; color: #fff; font-size: 14px; font-weight: 500; }
.black-btn .mask2 { position: relative; padding: 0; height: 20px; overflow: hidden; display: inline-block; }
.black-btn .mask2 .link-container2 { transition: transform 0.4s ease; }
.black-btn .mask2 .link-container2 .title2 { display: block; font-size: 14px; color: #fff; line-height: 20px; transition: transform 0.4s ease; }
.black-btn .mask2 .link-container2 .link-title1 { transform-origin: right center; }
.black-btn .mask2 .link-title2 { transform-origin: left center; transform: rotate(20deg); }

.white-btn { padding: 11px 18px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: solid 1px #000; border-radius: 5px; background: #fff; color: #000; font-size: 14px; font-weight: 500; }
.white-btn .mask2 { position: relative; padding: 0; height: 20px; overflow: hidden; display: inline-block; }
.white-btn .mask2 .link-container2 { transition: transform 0.4s ease; }
.white-btn .mask2 .link-container2 .title2 { display: block; font-size: 14px; color: #000; line-height: 20px; transition: transform 0.4s ease; }
.white-btn .mask2 .link-container2 .link-title1 { transform-origin: right center; }
.white-btn .mask2 .link-title2 { transform-origin: left center; transform: rotate(20deg); }

.white-btn:hover .link-container2, .black-btn:hover .link-container2 { transform: translateY(-20px); }

.white-btn:hover .link-title1, .black-btn:hover .link-title1 { transform: rotate(20deg); }

.white-btn:hover .link-title2, .black-btn:hover .link-title2 { transform: rotate(0); }

/*--- HEADER STYLES ---------------------*/
header { width: 100%; box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.15); }

.header { max-width: 1400px; margin: 0 auto; width: 100%; padding: 10px; box-sizing: border-box; display: flex; flex-direction: row; justify-content: space-between; padding: 10px; }

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

.head-btns { padding-top: 15px; }

/*--------Hero---------*/
.hero { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; }

.hero-text { width: 50%; padding: 7% 2% 4% 13%; }
.hero-text h1 { font-size: 60px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 65px; }
@media only screen and (max-width: 900px) { .hero-text h1 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .hero-text h1 { font-size: 35px; line-height: 40px; } }
.hero-text h2 { font-family: "Roboto", sans-serif; font-weight: 400; font-size: 25px; padding: 20px 0; }
.hero-text p { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #000; padding-bottom: 30px; }

.hero-img { width: 50%; }
.hero-img img { width: 100%; height: 650px; object-fit: cover; border-radius: 25px 0 0 25px; }

/*----Home----*/
.wrap { max-width: 1400px; margin: 0 auto; width: 100%; padding: 10px; box-sizing: border-box; padding: 5% 10px; }

.heading { width: 100%; text-align: center; }
.heading h2 { font-size: 60px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 65px; }
@media only screen and (max-width: 900px) { .heading h2 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .heading h2 { font-size: 35px; line-height: 40px; } }
.heading p { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #000; max-width: 750px; margin: 0 auto; padding: 20px 0; }

.qls { display: flex; flex-direction: row; justify-content: flex-start; gap: 15px; padding: 30px 0; }
.qls img { width: 100%; height: 200px; object-fit: cover; }
.qls a { width: calc(25% - 8px); transition: .3s ease; box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1); }
.qls h3 { clip-path: polygon(50% 0, 56% 15%, 100% 15%, 100% 100%, 0 100%, 0 15%, 45% 15%); transition: .3s ease; font-size: 25px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 30px; background: #fff; margin-top: -15px; padding: 30px 10px 20px 10px; }
.qls a:hover { transform: translateY(-5px); }
.qls a:hover h3 { background: #f1f1f1; }

.black-back { width: 100%; background: #000; position: relative; }
.black-back .bins { position: absolute; z-index: 0; left: 20px; bottom: 10px; opacity: .1; }

.pat-back { width: 100%; background: url("/siteart/texture.jpg"); }

.brands { display: flex; flex-direction: row; justify-content: flex-start; z-index: 50; position: relative; }

.brands-text { width: 50%; padding: 3% 3% 3% 0; }
.brands-text h2 { font-size: 60px; font-weight: 400; color: #fff; text-transform: uppercase; line-height: 65px; }
@media only screen and (max-width: 900px) { .brands-text h2 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .brands-text h2 { font-size: 35px; line-height: 40px; } }
.brands-text p { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #fff; padding: 30px 0; }

.brands-logos { width: 50%; gap: 10px; display: flex; flex-direction: column; }
.brands-logos a { width: 100%; display: flex; align-content: center; justify-content: center; padding: 5px; background: #fff; border-radius: 5px; }
.brands-logos a img { width: 100%; max-width: 350px; height: 120px; object-fit: contain; margin: 0 auto; }
.brands-logos a:hover { box-shadow: inset 4px 0px 6px 2px rgba(0, 0, 0, 0.3); }

.proj-top { display: flex; flex-direction: row; justify-content: space-between; }
.proj-top a { height: 45px; display: flex; align-self: flex-end; }

.proj-left { width: calc(100% - 200px); }
.proj-left h2 { font-size: 60px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 65px; }
@media only screen and (max-width: 900px) { .proj-left h2 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .proj-left h2 { font-size: 35px; line-height: 40px; } }
.proj-left h1 { font-size: 60px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 65px; }
@media only screen and (max-width: 900px) { .proj-left h1 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .proj-left h1 { font-size: 35px; line-height: 40px; } }
.proj-left p { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #000; padding: 30px 0 0; }

.projects { flex-wrap: wrap; padding-top: 4%; display: flex; flex-direction: row; justify-content: flex-start; gap: 30px; }
.projects a { width: calc(50% - 15px); background: #fff; transition: .3s ease; box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1); border-radius: 25px; /*--.tags-wrap{padding:25px; transition:.3s ease; border-radius:0 0 25px 25px; background:#fff; @include flex(row, space-between);
	i{ color:#000; border:solid 1px #000; @include icon; align-self:flex-end;}
}--*/ }
.projects a img { width: 100%; height: 450px; border-radius: 25px 25px 0 0; object-fit: cover; }
.projects a h3 { font-size: 25px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 30px; padding: 15px; }
.projects a:hover { transform: translateY(-5px); }
.projects a:hover .tags-wrap { background: #f1f1f1; }

.tags { display: flex; flex-direction: row; justify-content: flex-start; max-width: 500px; width: calc(100% - 60px); flex-wrap: wrap; gap: 10px; }
.tags p { height: 40px; }

.faq h2 { font-size: 60px; font-weight: 400; color: #fff; text-transform: uppercase; line-height: 65px; padding-bottom: 30px; }
@media only screen and (max-width: 900px) { .faq h2 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .faq h2 { font-size: 35px; line-height: 40px; } }

.accordion { color: #fff; margin: 5px 0; cursor: pointer; padding: 25px; font-size: 16px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; display: flex; justify-content: space-between; background: linear-gradient(#444, #222); border-bottom: 1px solid #000; font-family: 'Oswald', sans-serif; }

.panel { padding: 0px 10px; background-color: #fff; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

.panel p { padding: 25px 10px; }

.panel ol { padding: 25px 10px; }
.panel ol li { margin-left: 15px; }

.contact { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; }

.contact-left { width: 50%; padding: 3% 35px 0 0; }
.contact-left h2 { font-size: 60px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 65px; }
@media only screen and (max-width: 900px) { .contact-left h2 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .contact-left h2 { font-size: 35px; line-height: 40px; } }
.contact-left h1 { font-size: 60px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 65px; }
@media only screen and (max-width: 900px) { .contact-left h1 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .contact-left h1 { font-size: 35px; line-height: 40px; } }
.contact-left p { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #000; padding: 20px 0; }

.contact-right { width: 50%; padding: 30px; border-radius: 15px; box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1); background: #fff; }
.contact-right h3 { font-size: 20px; font-family: "Roboto", sans-serif; font-weight: 600; margin: 5px; }

.cont-link { display: flex; flex-direction: row; justify-content: flex-start; padding: 5px 0; }
.cont-link i { display: flex; font-size: 16px; flex-wrap: wrap; width: 50px; height: 50px; border-radius: 50%; justify-content: center; align-content: center; background: #000; border-radius: 50%; color: #fff; font-size: 14px; }
.cont-link p { font-size: 18px; font-weight: 600; padding: 10px 10px 10px 20px; }

/*---------Pages----------*/
.bread { max-width: 1400px; margin: 0 auto; width: 100%; padding: 10px; box-sizing: border-box; padding: 30px 10px 10px; }
.bread p { color: #000; font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #000; }
.bread p a { color: #000; }
.bread p a:hover { text-decoration: underline; }

.page-top { max-width: 1400px; margin: 0 auto; width: 100%; padding: 10px; box-sizing: border-box; padding: 10px; margin-bottom: 40px; position: relative; }

.page-top img { width: 100%; height: 700px; object-fit: cover; }

.page-text { position: absolute; left: 25px; right: 25px; max-width: 1000px; bottom: 30px; display: inline-block; padding: 40px; background: #fff; }
.page-text h1 { font-size: 60px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 65px; }
@media only screen and (max-width: 900px) { .page-text h1 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .page-text h1 { font-size: 35px; line-height: 40px; } }
.page-text p { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #000; padding: 10px 0; }

.whys { display: flex; flex-direction: row; justify-content: center; gap: 15px; padding-top: 40px; flex-wrap: wrap; }
.whys .why { width: calc(33.33% - 10px); padding: 25px; box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1); border-radius: 5px; }
.whys .why i { font-size: 50px; }
.whys .why p { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #000; }

.serv-boxes { display: flex; flex-direction: row; justify-content: flex-start; padding-top: 4%; flex-wrap: wrap; }
.serv-boxes .serv-box { width: 33.33%; padding: 20px 60px 60px; background: #fff; }
.serv-boxes .serv-box img { width: 120px; }
.serv-boxes .serv-box h2 { font-size: 60px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 65px; padding: 30px 0; }
@media only screen and (max-width: 900px) { .serv-boxes .serv-box h2 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .serv-boxes .serv-box h2 { font-size: 35px; line-height: 40px; } }
.serv-boxes .serv-box p { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #333; padding-bottom: 10px; }
.serv-boxes .serv-box ul { padding-left: 15px; }
.serv-boxes .serv-box ul li { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #444; }
.serv-boxes .serv-box:nth-of-type(even) { background: #f5f5f5; }

.about-boxes { display: flex; flex-direction: row; justify-content: flex-start; padding-bottom: 8%; flex-wrap: wrap; }
.about-boxes .about-box { width: 50%; padding: 20px 60px 60px; background: #fff; }
.about-boxes .about-box h2 { font-size: 60px; font-weight: 400; color: #000; text-transform: uppercase; line-height: 65px; padding: 30px 0; }
@media only screen and (max-width: 900px) { .about-boxes .about-box h2 { font-size: 45px; line-height: 50px; } }
@media only screen and (max-width: 500px) { .about-boxes .about-box h2 { font-size: 35px; line-height: 40px; } }
.about-boxes .about-box p { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #333; padding-bottom: 10px; }
.about-boxes .gray { background: #f5f5f5; }

#gal_container img { height: 450px; }

/*--------FORM STYLES--------------------*/
#formpage { width: 100%; vertical-align: top; display: inline-block; text-align: left; }
#formpage label { margin: 5px; padding: 10px 0 5px 0; font-size: 14px; }
#formpage input, #formpage select { padding: 14px; border: solid 1px #222; color: #777 !important; font-size: 14px; background: #fff; }
#formpage input[type="text"], #formpage input[type="email"], #formpage input[type="date"], #formpage select, #formpage input[type="phone"] { width: 100%; box-sizing: border-box; }
#formpage textarea { font-family: 'Arial', sans-serif; border: solid 1px #222; box-sizing: border-box; color: #000; background: #fff; width: 100%; height: 100px; border-radius: 2px; padding: 14px; color: #777 !important; font-size: 14px; background: #fff; }
#formpage textarea:focus { border: 1px solid #ccc; border-radius: 2px; }

.flex-form { width: 100%; text-align: left; margin: 0 auto; flex-direction: row; justify-content: flex-start; align-items: flex-start; font-size: 15px; }

.flex-row { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; }

.form-whole { width: calc(100% - 10px); display: block; vertical-align: middle; margin: 5px; }

.form-half { width: calc(50% - 10px); display: inline-block; vertical-align: middle; margin: 2px 5px; }

.form-third { width: calc(33.33% - 10px); display: inline-block; vertical-align: middle; margin: 2px 5px; }

#formpage .submit-button, #submit-btn button { padding: 11px 18px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: solid 1px #fff; border-radius: 5px; background: #000; color: #fff; font-size: 14px; font-weight: 500; text-transform: uppercase; }

#formpage input.submit-button:hover, #submit-btn button:hover { transition: ease-out .3s; cursor: pointer; background: #333; }

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

.captcha-button { display: inline-flex; }

#formpage input.submit-button { color: #fff !important; }

.CaptchaPanel { text-align: left !important; }

.include-captcha { display: none; }

/*-------- FOOTER STYLES ----------------*/
.footer { max-width: 1400px; margin: 0 auto; width: 100%; padding: 10px; box-sizing: border-box; padding: 2% 10px; }

.top-footer { width: 100%; padding-bottom: 15px; border-bottom: solid 1px #fff; display: flex; flex-direction: row; justify-content: space-between; gap: 10px; }
.top-footer a { max-width: 300px; padding: 15px; color: #fff; display: flex; flex-direction: row; justify-content: flex-start; }
.top-footer a i { font-size: 35px; color: #fff; }
.top-footer a p { padding-left: 10px; color: #fff; font-size: 14px; font-weight: 400; }
.top-footer a p span { font-weight: 800; font-size: 20px; }

.bottom-footer { padding: 60px 0; width: 100%; display: flex; flex-direction: row; justify-content: space-between; }

.left-footer { width: 100%; max-width: 250px; }
.left-footer img { margin: 0 auto; display: block; }
.left-footer a { display: flex; justify-content: center; }
.left-footer i { text-align: center; margin-top: 15px; justify-content: center; display: flex; font-size: 16px; flex-wrap: wrap; width: 50px; height: 50px; justify-content: center; align-content: center; color: #000; background: #fff; }

.right-footer { display: flex; flex-direction: row; justify-content: flex-end; gap: 15px; }
.right-footer ul { min-width: 100px; padding: 0 20px; }
.right-footer ul li a { color: #fff; font-weight: 400; font-size: 14px; line-height: 30px; }
.right-footer ul li a:hover { text-decoration: underline !important; }

.copy { padding: 10px 0; border-top: solid 1px #fff; }
.copy p { color: #fff; font-size: 14px; font-weight: 400; }

/*----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: #000 !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: #000 !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: #333 !important; color: #fff !important; }

.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; }

.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; }

/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1500px) { .hero-text { padding: 7% 2% 4% 3%; } }
@media only screen and (max-width: 1350px) { .head-btns { display: none; }
  .serv-boxes .serv-box { width: 50%; } }
@media only screen and (max-width: 1250px) { .projects a img { height: 350px; } }
@media only screen and (max-width: 1100px) { .hero { flex-direction: column; }
  .hero-text { width: 100%; padding: 40px 10px; }
  .hero-img { width: 100%; }
  .hero-img img { height: 400px; border-radius: 0 0 25px 25px; }
  .qls { flex-wrap: wrap; }
  .qls a { width: calc(50% - 8px); } }
@media only screen and (max-width: 1000px) { .brands { flex-direction: column; }
  .brands-text { width: 100%; padding: 30px 0; }
  .brands-logos { width: 100%; }
  .black-back .bins { display: none; }
  .projects { flex-direction: column; gap: 20px; }
  .projects a { width: 100%; }
  .top-footer { flex-wrap: wrap; }
  .top-footer a { width: calc(50% - 15px); max-width: none; } }
@media only screen and (max-width: 900px) { .contact { flex-direction: column; }
  .contact-left { width: 100%; padding: 30px 0; }
  .contact-right { width: 98%; margin: 0 auto; }
  .serv-boxes .serv-box { width: 100%; } }
@media only screen and (max-width: 800px) { .bottom-footer { flex-direction: column; }
  .left-footer { max-width: none; }
  .right-footer { width: 100%; justify-content: center; padding-top: 25px; }
  .right-footer ul li { text-align: center; }
  .whys .why { width: calc(50% - 10px); } }
@media only screen and (max-width: 700px) { .proj-top { flex-direction: column; justify-content: flex-start; }
  .proj-left { width: 100%; }
  .proj-top a { align-self: flex-start; margin-top: 10px; }
  .page-text { position: relative; left: 0; right: 0; bottom: 0; padding: 40px 10px; }
  .page-top img { height: 400px; }
  .wrap { padding: 40px 10px; } }
@media only screen and (max-width: 600px) { .hero-text h2 { font-size: 20px; }
  .hero-img img { height: 320px; }
  .qls a { width: 100%; }
  .projects a img { height: 300px; }
  .top-footer a { width: 100%; padding: 15px 0; }
  .page-top img { height: 320px; }
  .whys .why { width: 100%; } }
@media only screen and (max-width: 500px) { .brands-logos a img { max-width: 250px; height: 100px; }
  .top-footer a i { font-size: 30px; }
  .page-top img { height: 280px; }
  .serv-boxes .serv-box { padding: 20px 30px; } }
@media only screen and (max-width: 430px) { .qls a img { height: 160px; }
  .projects a img { height: 250px; }
  .page-top img { height: 240px; }
  .whys .why { padding: 15px; }
  .whys .why i { font-size: 40px; } }
@media only screen and (max-width: 380px) { .right-footer { flex-wrap: wrap; }
  .right-footer ul { width: 100%; padding: 0; }
  .contact-right { padding: 15px; }
  .accordion { padding: 15px; } }