﻿/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans: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=Sarala:wght@400;700&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: #EC0002; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #EC0002;
    color: #fff;
    text-shadow: none;
}



/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {
font-family: "Sarala", sans-serif;
color:#fff;
font-style:normal;
line-height:1.8;
overflow-x:hidden;
box-sizing:border-box;
background:url("../siteart/background-texture.webp");
background-color:#000;
background-size: cover;
}

.flex {display:flex;}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}

button,a {cursor:pointer;}

hr{border:#000 1px solid;}
h1,h2,h3,h4,h5,h6,.title,button {font-family: "Fira Sans", sans-serif;text-transform:uppercase;}
/*--- HEADER STYLES ---------------------*/
header {}




/*---BUTTONS--------------------------------*/

a.border-button {width:100%;}
a.red-button {width:100%;}

a.border-button button {width:100%;border:solid 3px #fff;padding:20px;background:unset;color:#fff;margin-top:15px;font-size:17px;font-weight:600;transition:.3s;}

a.red-button button, button.red-button {width:100%;border:unset;padding:15px;background:#EC0002;color:#fff;margin-top:30px;font-size:17px;font-weight:600;transition:.3s;}

a.red-button button:hover, button.red-button:hover {background:#fff;color:#000;}

a.border-button button:hover {background:#fff;color:#000;}


/*---BODY--------------------------------*/

.main-hero {background:url("../siteart/hero-image.webp");width:100%;height: 823px;background-color:#000;background-repeat:no-repeat;background-size: cover;background-position: 0 100%;position:relative;box-sizing: border-box;}

.sub-hero {background:url("../siteart/hero-image.webp");width:100%;height: 370px;background-color:#000;background-repeat:no-repeat;background-size: cover;background-position: 0 100%;position:relative;box-sizing: border-box;}

.hero-content {position: relative;left: 5%;color: #fff;width: 100%;line-height: 1;max-width: 63%;}

.hero-content p {font-size: clamp(1.25rem, 0.9797rem + 1.3514vw, 2.5rem);}
.hero-content h1 {font-size: clamp(1.4375rem, 0.8699rem + 2.8378vw, 4.0625rem);;}

.sub-hero .hero-overlay.inventory .hero-content  span.inv-title{font-size: clamp(1.4375rem, 0.8699rem + 2.8378vw, 4.0625rem);font-family: "Fira Sans", sans-serif;text-transform:uppercase;font-weight: 600;}

.hero-content .button.flex{width: 100%;max-width: 60%;gap: 10px;}

.hero-overlay {background: #0006;height: 100%;display: flex;align-items: center;position: relative;box-sizing: border-box;}

.gradient {    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));width: 100%;height: 16%;position: absolute;bottom: 0px;}


/*--------FORM STYLES--------------------*/
.formfield {width: 100%;}
.form.flex {gap: 33px;}
.formfield input,.formfield select,.formfield textarea {width:100%;padding:15px 10px;box-sizing:border-box;margin-bottom: 20px;}
.formfield textarea {font-family: "Sarala", sans-serif;}
/*--------CATEGORY STYLES--------------------*/

.categories .wrapper.flex {justify-content: space-between;width: 90%;margin: 0 auto;padding-bottom: 60px;}

.borders {display:flex;justify-content: center;flex-direction:column;align-items:center;border-top: solid;border-left: solid;border-right: solid;padding: 11% 3% 2%;object-fit:cover;}

.borders img{width: 100%;max-width: 25%;height:100%;margin-bottom: 25px;transition:.3s;}


.cat {width:100%;max-width: 32%;}
.borders .title {font-size: clamp(1.125rem, 0.9628rem + 0.8108vw, 1.875rem);font-weight:600;}

.cat:hover .borders img {transform:scale(1.1)}


/*--------ABOUT STYLES--------------------*/
.introduction .wrapper.flex {width:90%;margin:0 auto;border-top:solid 3px #fff;justify-content: space-between;align-items:center;padding:6% 0;}

span.red.title {color:#EC0002;font-size: clamp(1.0625rem, 0.9949rem + 0.3378vw, 1.375rem);font-weight:500;line-height:1;}

.photo-flex {display: flex;gap: 10px;}
.two-photos.flex {flex-direction: column;gap: 10px;}

.introduction h2 {font-size: clamp(1.875rem, 1.4696rem + 2.027vw, 3.75rem);line-height:1;margin-bottom:10px;}

.introduction .sec-1 {width: 36%;}
.introduction .sec-2 {width: 50%;}
.main-photo {width: 100%;}
.main-photo img {width:100%;object-fit:cover;height: 100%;}
.two-photos.flex {width:100%;height: 100%;max-width: 41%;}
.two-photos.flex img {width:100%;height: 100%;object-fit: cover;}


/*--------CURRENCY STYLES--------------------*/
.currency .wrapper.flex {width:90%;margin:0 auto;justify-content: space-between;border: solid;align-items: center;}

.currency .sec-1 {background:#fff;width:100%;max-width: 37%;display: flex;justify-content: center;padding: 9% 0;}

.currency .sec-2{width:100%;max-width: 41%;margin:0 auto;}
.currency .sec-2 h2{font-size: clamp(1.1875rem, 0.8896rem + 1.4894vw, 2.9375rem);}

section.currency {padding-bottom: 130px;}

.contact-form {width:100%;max-width:90%;margin:48px auto 0;}
.contact-form h2{font-size: clamp(1.25rem, 1.0338rem + 1.0811vw, 2.25rem);}

.currency img {width: 100%;max-width: 60%;height: 100%;}

/*--------CONTACT STYLES--------------------*/
.contact .wrapper.flex {width:90%;margin:30px auto 0;border: solid;align-items: center;justify-content: center;}

.paragraph-title {padding: 40px 0 5px;font-family: "Fira Sans", sans-serif;font-weight:600;text-transform:uppercase;}

.contact .sec-1 {width: 100%;display: flex;justify-content: center;padding: 1% 13px;max-width: 51%;border-left: 4px solid;}

.contact .sec-2{width:100%;max-width: 32%;margin:0 auto;}
.contact .sec-2 h2{font-size: clamp(1.4375rem, 1.1132rem + 1.6216vw, 2.9375rem);margin-bottom: 20px;}

section.contact {padding-bottom: 130px;}

.contact ul li {margin-bottom: 12px;}
.contact ul li a {color:#fff;font-size:18px;transition:.3s;}

.contact ul li a:hover {color:#EC0002;}

.contact ul li a i,.red {color:#EC0002;}

.map {width: 100%;max-width: 90%;margin: 0 auto;margin-top: 31px;}

.contact .formfield p {color:#fff;}

/*--------CONSIGNMENTS STYLES--------------------*/
.consignments .wrapper.flex {width:90%;margin:0 auto;align-items: center;justify-content: center;color:#fff;}

.consignments .formfield p {color:#fff;}

.consignments .sec-1 {background:#fff;width:100%;display: flex;justify-content: center;padding: 5% 13px;max-width: 51%;}

.consignments .sec-2{width:100%;max-width: 32%;margin:0 auto;}
.consignments .sec-2 h2{font-size: clamp(1.6875rem, 1.4172rem + 1.3514vw, 2.9375rem);}

section.consignments {padding-bottom: 130px;}

.map {width: 100%;max-width: 90%;margin: 0 auto;margin-top: 31px;}
.consignments .wrapper.flex form {width:100%;}

.consignments button.red-button {width:100%;max-width:100%;margin:0 auto;}

.consignment-content {width: 100%;max-width: 90%;margin: 40px auto 30px;}

.consignments h2 {font-size: clamp(1.25rem, 0.9797rem + 1.3514vw, 2.5rem);}

.consignments div#captcha {text-align: center;}

span.consignment-header {font-size: clamp(1.1875rem, 1.0389rem + 0.7432vw, 1.875rem);padding:30px 0;}

/*--------CONTACT STYLES--------------------*/

.formfield p {color:#000;}


/*--------THANK YOU STYLES--------------------*/

.thankyou .wrapper.flex {width:90%;margin:0 auto;justify-content: space-between;align-items:center;padding:6% 0;}


.thankyou h2 {font-size: clamp(1.25rem, 0.7095rem + 2.7027vw, 3.75rem);line-height:1;margin-bottom:10px;}

.thankyou .sec-1 {width: 50%;}
.thankyou .sec-2 {width: 40%;}

/*-------- FOOTER STYLES ----------------*/
.footer {width: 100%;background: #000;display: flex;align-items:center;}

.footer a {color:#fff;font-weight:600;transition:.3s;}
.footer a:hover {color:#EC0002;}

.footer li {margin-bottom:5px;}

span.footer-title {font-weight:800;text-transform:uppercase;font-size: clamp(1.125rem, 1.0304rem + 0.473vw, 1.5625rem);font-family: "Fira Sans", sans-serif;}

.footer-logo {width: 100%;max-width: 38%;background:#fff;display: flex;align-items: center;justify-content: center;padding: 3% 0;}

.footer-logo img {width:100%;height:100%;max-width: 280px;}

.footer-categories {display: flex;width: 100%;max-width: 60%;justify-content: center;gap: 13%;align-items: start;}

.footer-cat i {color:#EC0002;}




/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/


.options-popper-btn {color:#fff !important;}


.list-top-section .list-bcrumbs-and-title .ground-bcrumbs {padding-top: 50px;}


div#filters,.listing-card-grid.listing-data-selector,.ts-modal-content,.show-closest-first,.bottom-region,span.section-title-text,.media-buttons {color: #000 !important;}
.detail__breadcrumbs,.linking-container h4, .column3.left ul li a {color:#fff !important;}

.calc-button-wrapper button, nav.breadcrumbs ul li a,.breadcrumbs__link, button.detail__search-results, select#retail-currency {
color:#fff !important;}

nav.breadcrumbs {padding: 30px 0;}

a.view-listing-details-link.des-view-listingDetails.template-branded-button {background:#EC0002 !important;}

ul.MuiPagination-ul li button,.options-popper-div button{color:#000 !important;}
 option.currency-selector-option, .list-redesign .list-container-flexrow .list-listing-card-wrapper .listing-card-mobile .right-area .price-contain .price, p.listing-category, span.spec-label, .list-redesign .list-container-flexrow .list-listing-card-wrapper .listing-card-mobile .right-area .specs-container .spec-value, .list-redesign .specs-container .specs-button{color:#000 !important;}

.detail__title-container button.options-popper-btn{color: #fff !important;}





/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1830px) {
	.contact .sec-1 {max-width: 35%;}
	.contact .sec-2 {max-width: 45%;margin: 0 auto;}
}

@media only screen and (max-width: 1400px) {
	.currency .sec-1 {max-width: 32%;padding: 13% 0;}
	.currency .sec-2 {max-width: 53%;}
	.currency .sec-1 img {max-width: 57%;height:100%;}
	.hero-content .button.flex {max-width: 90%;}
}

@media only screen and (max-width: 1300px) {
	.footer-categories {display: flex;width: 100%;max-width: 90%;justify-content: center;gap: 6%;align-items: start;
    margin: 0 auto;}
	.footer-logo img {max-width: 60%;}
}

@media only screen and (max-width: 1232px) {
	.categories .wrapper.flex {flex-wrap:wrap;gap: 30px;}
	.cat {max-width: 30%;}
	.main-hero {height: 697px;}
	a.border-button button {font-size: 16px;}
}

@media only screen and (max-width: 1000px) {
	.contact .wrapper.flex {flex-direction:column;}
	.contact .sec-2 {max-width: 90%;padding: 10% 0 5%;margin-bottom: 20px;border-bottom: solid #fff;}
	.contact .sec-1 {border-left:unset;max-width:90%;padding: 1% 33px 5%;}
	.introduction .wrapper.flex {gap:90px;}
	.introduction .wrapper.flex,.thankyou .wrapper.flex {flex-direction: column;gap: 40px;padding: 7% 0;}
	.introduction .sec-1,.introduction .sec-2,.thankyou .sec-1,.thankyou .sec-2{width: 100%;max-width:100%;}
	
/*	.borders img {max-width: 14%;padding: 2% 3% 2%;margin-bottom: 0px;}*/
	.currency .sec-2  {width:90%;max-width:90%;}
	section.introduction .sec-1  a.red-button button,	.currency .sec-2  a.red-button button {margin-top: 20px;}
	.currency .sec-1  img {width:100%;max-width: 46%;}
	.currency .sec-2  {padding:13% 0;}
	.currency .wrapper.flex {flex-direction: column-reverse;}
	.currency .sec-1 {max-width: 100%;}
	.hero-content {max-width: 90%;margin:0 auto;left:0;top: -40px;}
	.hero-content .button.flex {max-width: 100%;}
	.main-hero {height:467px;}
	
	.footer {flex-direction: column;gap: 40px;}
	.footer-logo img {max-width: 27%;}
	.footer-logo {max-width: 100%;}
	.footer-categories {flex-direction: row;max-width: 80%;gap: 20px;justify-content: space-between;}
}


@media only screen and (max-width: 900px) {
	.cat {max-width: 100%;}
	.borders img {max-width: 19%;}
	.borders {padding: 6% 3% 2%;}
}


@media only screen and (max-width: 800px) {
	.cat {max-width: 100%;}
	.hero-content .button.flex {max-width: 100%;}
	.borders {padding: 5% 3% 1%;}
	.form.flex {flex-direction: column;gap: 0;}
	.main-hero {height: 617px;background-position: 66% 0;}
	.footer-categories {flex-direction: column;padding: 30px 0;}
	.footer-logo img {max-width: 40%;}
}

@media only screen and (max-width: 600px) {	
	.hero-content .button.flex {flex-direction: column;width:100%;}
	.sub-hero {height: 220px;}
	.sub-hero .hero-content {top: 0;}
	.hero-content {top: -70px;}
	.hero-content p {margin-bottom: 9px;}
	.hero-content h1 {line-height: 1.1;}
	.hero-content .button.flex {margin-top:30px;}
	a.red-button button {margin-top:unset;}
}

@media only screen and (max-width: 500px) {

	.borders img {max-width: 24%;padding: 2% 3% 2%;object-fit:contain;}
	.footer-logo img {max-width: 170px;}
	section.currency {padding-bottom: 60px;}
	.main-hero {background-position: 66% 0;}
}


@media only screen and (max-width: 400px) {
	.sub-hero {height: 220px;}
	.sub-hero .hero-content {top: 0px;}
	.borders img {margin-bottom: 5px;padding: 2% 3% 2%;max-width: 34%;}
}






