/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&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;
}


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

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

body {
  font-family: "Noto Sans Thai", sans-serif;
  box-sizing:border-box;
	font-weight:400;
  line-height: 1.5;
  font-style: normal;
  overflow-x: hidden;
}

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

.flex {display:flex;}

hr{border:#000 1px solid;}

button,a {cursor:pointer;}

h1,h2,h3,h4,h5,h6,.inventory-header  { font-family: "Sofia Sans Condensed", sans-serif;text-transform:uppercase;}

/*--- BUTTON STYLES ---------------------*/
div.black-button a,a.black-button button{background: #000;color: #FF7C06;width: 100%;padding: 7px;border-radius: 10px;display: flex;align-items: center;gap: 14px; font-family: "Sofia Sans Condensed", sans-serif;font-weight:800;font-size: clamp(1.0625rem, 1.022rem + 0.2027vw, 1.25rem);border:none;transition:.3s;}

div.black-button a:hover,a.black-button button:hover {background:#fff;color:#000;}

a.orange-button,input.orange-button.form {width:100%;}
input.orange-button.form {padding:20px 0 !important;}
a.orange-button button,input.orange-button.form{background: #FF7C06;border: unset;padding: 0 0 0  20px;width: 100%;display: flex;justify-content: space-between;align-items: center;font-size: clamp(1.0625rem, 1.022rem + 0.2027vw, 1.25rem); font-family: "Sofia Sans Condensed", sans-serif;text-transform:uppercase;font-weight:800;border-radius:10px;color:#000;transition:.3s;}


a.orange-button button:hover,input.orange-button.form:hover,.collapsible:hover {background:#FFB15E;}

.collapsible {
background: #FF7C06;border: unset;padding: 0 0 0  20px;width: 100%;display: flex;justify-content: space-between;align-items: center;font-size: clamp(1.0625rem, 1.022rem + 0.2027vw, 1.25rem); font-family: "Sofia Sans Condensed", sans-serif;text-transform:uppercase;font-weight:800;border-radius:10px;color:#000;padding:3%;margin-top:2%;justify-content: center;transition:.3s;}

.button-content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}

.arrow {background: #FF8C11;padding: 20px 10px;width: 100%;font-size: 20px;max-width: 90px;border-radius: 0 10px 10px 0;}

.button.flex {gap: 10px;}

.header-numbers .black-button {width: 100%;max-width: 190px;}

span.phone-icon {color: #000;padding: 3px 10px;background: #FF7C06;border-radius: 5px 0 0 5px;}
/*--- HEADER STYLES ---------------------*/
header {}

.hero{background:url("../siteart/hero.webp");background-repeat: no-repeat;width:100%;height:900px;background-size: cover;background-position: 0 100%;}

.hero-overlay .button.flex {display: flex;max-width: 58%;gap: 10px;margin-top: 32px;}
.hero-overlay .button.flex .arrow{max-width: 50px;padding: 17px 10px;}

.sub-hero{background:url("../siteart/hero.webp");background-repeat: no-repeat;width:100%;height:600px;background-size: cover;background-position: 0 70%;}


.hero-overlay {background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.6),rgba(0,0,0,.7));height: inherit;display: flex;flex-direction: column;justify-content: center;color:#fff;box-sizing: border-box;}
.hero-overlay .content {margin-left:8%;}

.hero-overlay .content h1,.inventory-header  {border-left: 16px #FF7C06 solid;line-height: 1;padding-left: 23px;font-weight:800;}

.inventory-header {font-size: clamp(2.125rem, 1.098rem + 5.1351vw, 6.875rem);}
.hero-overlay .content h1{font-size: clamp(2.125rem, 1.098rem + 5.1351vw, 6.875rem);}
.sub-hero .hero-overlay .content {margin-top: 80px;}
/*---BODY--------------------------------*/


/*---ABOUT STYLES--------------------------------*/

.who-we-are .wrapper.flex {width: 90%;margin: 0 auto;align-items: center;justify-content: space-between;padding: 80px 0;}
.who-we-are .sec-1 {width: 40%;}
.who-we-are .sec-1 h2{font-size: clamp(1.875rem, 1.6047rem + 1.3514vw, 3.125rem);margin-bottom: 10px;font-weight:800;}

.who-we-are .sec-1 .content {border-left: 7px #FF7C06 solid;line-height: 1;padding-left: 8px;font-weight: 800;}

.who-we-are .sec-1 p{margin-bottom:20px;}
.who-we-are .sec-2 {width: 100%;max-width:50%;height: 420px;margin:unset;}
.who-we-are .sec-2 img{width: 100%;height: 100%;object-fit: cover;object-position: 0 40%;gap: 20px;}

.get-in-touch .sec-2 .button.flex {width: 100%;justify-content: center;max-width: 100%;gap: 0;padding-top: 20px;}

.get-in-touch a.black-button {width: 100%;padding: 8px;}
.get-in-touch a.black-button span.phone-icon {padding: 12px;}
/*---CONTACT STYLES--------------------------------*/

.contact .wrapper.flex {width: 90%;margin: 0 auto;align-items: center;justify-content: space-between;padding: 7% 0;}
.contact .sec-1 {width: 50%;background: #FF7C06;padding: 7% 2%;border-radius:10px;}
.contact .sec-1 .content {width: 90%;margin: 0 auto;}
.contact .sec-1 h2{font-size: clamp(1.5625rem, 1.2247rem + 1.6892vw, 3.125rem);margin-bottom:10px;}
.contact .sec-1 .button.flex {flex-direction: column;gap: 10px;}
.contact .sec-1 ul li a{color:#000;}
.contact .sec-2 {width: 50%;height: 420px;}
.map {text-align:center;border-radius:10px;}
.sub-hero .contact .wrapper.flex {padding: 3% 0;}
.content  .header.flex {justify-content: space-between;align-items:center;}
.social.flex {font-size: 25px;gap: 10px;}
.social.flex a{color: #000;}

/*--------GET IN TOUCH--------------------*/
.get-in-touch .wrapper.flex {justify-content: space-between;background: #FF7C06;}
.get-in-touch .sec-1.skew {width: 100%;max-width: 43%;clip-path: polygon(0 0, 81% 0, 100% 100%, 0% 100%);background: #FF8C11;display: flex;justify-content: center;padding: 40px 0;
}
.get-in-touch .sec-1.skew img{text-align: center;display: flex;justify-content: center;margin-right: 13%;}
.sec-2 {width: 90%;max-width: 40%;display: flex;flex-direction: column;align-items: center;justify-content: center;;margin:0 auto;}
.sec-2 h2{font-size: clamp(1.875rem, 1.6186rem + 1.2821vw, 3.125rem);font-weight:800;}
/*--------FORM STYLES--------------------*/
input#CaptchaAnswer {border:solid 1px !important;}
.formfield input,.formfield textarea,.formfield select {box-sizing:border-box;width:100%;border:solid #000 2px;}

.formfield {width:100%;}

.form.flex {gap:15px;}

.formfield input,.formfield select {padding:12px 10px;border-radius:5px;}
.formfield textarea {padding: 24px 10px;border:solid #000 2px;border-radius:5px;}
.message.formfield {padding-top: 13px;}

/*-------- THANK YOU STYLES ----------------*/
.who-we-are.thankyou .wrapper.flex{padding: 7% 0 !important;}

/*-------- FOOTER STYLES ----------------*/
.footer {display: flex;width: 100%;justify-content: space-around;padding:3% 0;align-items: center;}
.footer-categories {width: 100%;max-width: 50%;}
.footer-categories .wrapper.flex {flex-direction:column;}
.foot-top ul,.contact-icons ul{display: flex;flex-direction: row;}
.foot-top ul {gap: 20px;width: 100%;}
.foot-top ul li,.foot-bottom p,.foot-bottom ul li{font-family: "Noto Sans Thai", sans-serif;text-transform:uppercase;font-weight:700;}
.foot-top ul li a,.foot-bottom ul li a{color:#000;transition:.3s;}

.foot-top ul li a:hover, .foot-bottom ul li a:hover {
				box-shadow:inset 0 -5px 0 0 #000;}

.foot-top,.foot-bottom {display:flex;flex-direction:row;justify-content: space-between;}
.foot-bottom {border-top:solid #000;padding-top:10px;}
.foot-top{padding-bottom:10px;}

.contact-icons {max-width: 160px;width: 100%;}

.footer-logo {width:100%;max-width:240px;}
.footer-logo img{width:100%;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.view-listing-details-link {color:#000 !important;background:#FF8C11 !important;}
.column3.left ul li a,.linking-container h4{color:#000 !important;}
.ground-bcrumbs {padding-top: 40px !important;}

.calc-button-wrapper button,.detail__machine-location a, .dealer-contact__details_right-col a,.dealer-contact__details a,.dealer-contact__videochat, .dealer-contact__button  {color:#000 !important;}

.detail__breadcrumbs{padding:30px 0 !important;}
/*---------- RESPONSIVE STYLES ----------*/


@media only screen and (max-width: 1600px) {
	.foot-top ul {gap: 10px;}
	.footer-categories {max-width: 60%;}
}

@media only screen and (max-width: 1500px) {
	.hero-overlay .button.flex {max-width: 65%;}
	div.black-button a {font-size: 16px;}
	.header-numbers .black-button {max-width: 160px;}
}


@media only screen and (max-width: 1580px) {
	.get-in-touch .wrapper.flex .sec-2 {max-width: 51%;}
	.get-in-touch .sec-1.skew img {width: 100%;object-fit: contain;}
	.get-in-touch .sec-1.skew img {margin-right:unset;}
}


@media only screen and (max-width: 1350px) {
	.who-we-are .wrapper.flex {gap: 60px;}
	.who-we-are .sec-1 {width: 50%;}
	.who-we-are .sec-2 {max-width: 50%;}
	.who-we-are .sec-2 img{object-position: 72%;}
}

@media only screen and (max-width: 1200px) {
	.get-in-touch .sec-1.skew {max-width: 100%;clip-path: unset;}
	.get-in-touch .wrapper.flex .sec-2 {max-width: 90%;}
	.get-in-touch .sec-2 {width: 100%;padding: 40px 0;}
	.get-in-touch .wrapper.flex {flex-direction: column-reverse;}
}

@media only screen and (max-width: 1160px) {
	.footer {display: flex;width: 100%;justify-content: space-around;padding: 3% 0;align-items: center;flex-direction: column;}
	.footer {gap: 40px;}
	.footer-categories {max-width: 90%;}
	.contact-icons ul {width:100%;gap:24px;}
}
	
@media only screen and (max-width: 1100px) {
	.who-we-are .sec-2 {display:none;}
	.who-we-are .sec-1 {width: 100%;}
	.get-in-touch .sec-2 {max-width: 90%;}
	.get-in-touch .sec-2 .button.flex {max-width:100%;}
	div.black-button a, a.black-button button {font-size:16px;}
	.contact .wrapper.flex {flex-direction: column;gap: 50px;}
	.contact .sec-1 {width: 100%;}
	.contact .sec-2 {width:100%;max-width: 100%;height:unset;}
	.form {width: 100%;}
	
}


@media only screen and (max-width: 900px) {
.get-in-touch .sec-1.skew img {width: 100%;max-width: 550px;}
	.hero-overlay .button.flex {max-width: 90%;flex-direction: column;}	
	.foot-top,.foot-bottom {flex-direction: column;gap: 11px;}
}


@media only screen and (max-width: 700px) {
	.hero .hero-overlay .content {top: 210px;position: relative;margin-left:unset;}
	.hero .hero-overlay .content h1{margin-left: 8%;margin-bottom: 30px;}
	.hero .hero-overlay .button.flex{margin: 0 auto;}
	.get-in-touch .sec-2 .button.flex,.who-we-are.thankyou .button.flex {flex-direction: column;}
	.contact .sec-1 h2 {margin-bottom:unset;}
	.content .header.flex {margin-bottom: 30px;align-items: center;justify-content: space-between;}
	.header.flex {flex-direction:column;}
	.get-in-touch a.black-button {padding: 8px 0;}
	.hero {height: 440px;}
	.sub-hero {height: 310px;}
	.who-we-are .wrapper.flex {width: 90%;margin: 0 auto;align-items: center;justify-content: space-between;
   padding: 220px 0 80px;}
	.hero-overlay .button.flex .arrow {max-width: 60px;padding: 6% 10px;}
	.foot-top ul {gap: 11px;flex-wrap: wrap;}
	.form {flex-direction: column;}
	.hero-overlay {background: #0008;background-image:unset;}
}


@media only screen and (max-width: 500px) {
	.foot-top ul {flex-direction: column;margin-bottom:20px;}
	.contact-icons ul {flex-direction:row;}
	.who-we-are .wrapper.flex {padding: 140px 0 80px;}
	.hero .hero-overlay .content {top: 140px;}
}