/*
Theme Name: www.carolinaharvestrax.com
Theme URI: https://sandhills.com
Author: Sandhills
Author URI: https://sandhills.com
Description: Sandhills default template.
Version: 1.0
Text Domain: sandhills
Tags: Sandhills default
*/

/*--------------------------------------------------------------
## Primary Styles
--------------------------------------------------------------*/

/* RESET */

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;} img{max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;}


/* FRAMEWORK */

*{box-sizing: border-box;}
html, body{font-family: 'Lato', sans-serif; -webkit-text-size-adjust: none} 
html {scroll-behavior: smooth;}
body {overflow-x: hidden; line-height: 1.7;}
::-moz-selection{background: #b3c618; color: #000; text-shadow: none} ::selection{background: #b3c618; color: #000; text-shadow: none;}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  /*margin: 0; /* 2 */
}
button,
input { /* 1 */
  overflow: visible;
}
button,
select { /* 1 */
  text-transform: none;
}
select,
button,
[type="button"],
[type="reset"],
[type="submit"],
[type="date"] {
  -webkit-appearance: button;
}

.align-right {text-align: right;}
.white {color: #fff;}
.lightgray-bg {background: #f4f4f4;}
.center {text-align: center;}
.red {color: #ee3823;}

.content-width {margin: 0 auto; width: 95%; max-width: 1700px; padding: 0 1em 1em;}
.flex-wrapper {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}

a {text-decoration: none; color: inherit; transition: all .2s ease-in-out;} a:hover{color: inherit;}
a#cta-btn button, input.btn-success {color: #076400; background: #fcc81d; padding: 1em 5%; border: 1px solid transparent; cursor: pointer; font-weight: 800; transition: 0.2s ease-in; margin-top: 1.5em; width: 100%; max-width: 300px; border-radius: 0; line-height: 1.3; text-transform: normal;}
a#cta-btn button:hover, input.btn-success:hover {background: #076400; color: #fcc81d;}

a#cta-btn2 button {color: #157e43; background: none; padding: 1em 5%; border: 1px solid #157e43; cursor: pointer; font-weight: 800; transition: 0.2s ease-in; margin-top: 1.5em; width: 100%; max-width: 300px; border-radius: 0; line-height: 1.3; text-transform: normal;}
a#cta-btn2 button:hover {border: 1px solid #076400; color: #076400;}

a.back-link {color: #b3c618; display: block; margin-bottom: 1em;}
a.back-link:hover {color: #000; transition: .3s ease-in-out all;}

.inv-ctas {width: 95%; max-width: 1700px; display: flex; justify-content: center; align-items: center; margin: 5px auto 0;}
.inv-ctas a {width: calc(33.33% - 1em); margin: .5em;}
.inv-ctas a button {width: 100%; border: 1px solid #000; outline: none; background: transparent; color: #000; padding: .75em; text-transform: uppercase; font-weight: 600;}
.inv-ctas a button.green {border: 1px solid #000; outline: none; background: #b3c618; color: #000; padding: .75em;}
.inv-ctas a:hover button {background: #242424; color: #fff; transition: .3s ease-in-out all;}


/*  HEADER
-------------------------*/

.hdr-wrapper {width: 95%; margin: 0 auto; max-width: 1700px; display: inline-flex; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 10;}
#main-logo img {width: 100%; height: auto; max-width: 300px;}
.hdr-manus {width: 80%; display: flex; justify-content: space-between; align-items: center; text-align: right; margin: 1.35em 0; padding-right: .5em;}
.hdr-manus a {width: calc(14.3% - .5em)!important; margin: .25em!important;}
.hdr-manus img {width: 100%; height: auto; max-width: 145px; margin: 0 auto;}

.home-hdr {width: 100%; display: flex; justify-content: space-between; box-sizing: border-box;}
.home-hdr h1 {display: block; font-weight: 900; font-size: 20px; text-transform: uppercase; padding: 1em 2em; color: #ee3823; width: 100%; text-align: center;}
.home-hdr h1 span {color: #333; font-weight: 400; display: block;}
.hdr-left {width: 75%; box-sizing: border-box;}
.hdr-right {width: 25%; box-sizing: border-box; display: flex; justify-content: center; flex-direction: row-reverse;}
.mobile-logos {width: 70%; box-sizing: border-box; display: none;}


.hdr-contact {width: 100%; background: #242424; padding: .75em 1em; font-weight: 600; display: none; justify-content: space-between; align-items: center; color: #fff; text-transform: uppercase; font-size: 13px; text-align: center;}
.hdr-contact a {color: #fff; font-weight: 600; font-size: 13px; margin: 0 1.5vw;}
.hdr-contact .html-render-content.html-grid-container {display: flex!important; justify-content: space-between; align-items: center;}


/*  OTHER STYLES
-------------------------*/
.content-width h1 {font-size: 32px; display: block; padding: 1em 0!important;}
.content-width h2 {font-size: 24px; display: block; margin-bottom: .5em;}
.content-width p a {font-weight: 600; color: #b3c618;}
.content-width .contactForm {padding-bottom: 2em;}

.post-container-homepage-btns {width: 95%; max-width: 1700px; margin: 1.5em auto!important;}
.prevButton-container-homepage-btns, .nextButton-container-homepage-btns {display: none!important;}
a.homepage-btn {width: calc(100% - 1em); margin: .5em; border: 3px solid #b3c618; color: #000; display: flex; justify-content: flex-start; align-items: center; padding: 1em; text-transform: uppercase; line-height: 1.1; text-align: left;}
a.homepage-btn icon {font-size: 30px; margin-right: .5em; display: block; color: #f15341!important;}
a.homepage-btn p span {display: block; font-size: 16px;}
a.homepage-btn p {font-size: 20px; font-weight: 600; word-break: normal;}
a.homepage-btn:hover {transition: .3s ease-in-out all; background: #f4f4f4;}


a.brand-btn {padding: 1.5em 1em; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%;}
a.brand-btn p {display: block; font-weight: 500; font-size: 16px;}
a.brand-btn img {width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto 1em;}
.border-our-showroom-brands:hover {border-color: #b3c618!important;}
.prevButton-container-category-btns, .nextButton-container-category-btns {display: none!important;}
.zoom-btn {display: flex; justify-content: center; align-items: center; overflow: hidden; box-sizing: border-box; position: relative;}
.zoom-btn img {width: 100%; height: auto; max-width: none; aspect-ratio: 4 / 2; object-fit: cover; position: relative; z-index: 2;}
.zoom-btn p {position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; right: 0; color: #fff; text-transform: uppercase; font-weight: 800; font-size: 20px; display: flex; justify-content: center; height: 100%; align-items: center; background: rgba(0,0,0,.25);}
.zoom-btn:hover p {background: rgba(0,0,0,.5); transition: .2s ease-in-out all;}


/* The overlay label that initially shows */
.zoom-btn .no-show {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: rgba(0, 0, 0, 0.25); /* adjust for your design */
  color: #fff;                    /* adjust for your design */
  transform: translateY(0);
  transition: transform 250ms ease;
  pointer-events: none; /* user shouldn't interact with this layer */
}

/* Hidden box initially */
.zoom-btn .categorysliderbox {
  width: 100%;
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  pointer-events: none;  /* disabled until shown */
  transition: opacity 200ms ease;
  overflow: auto;        /* scroll if content is taller than the box */
  display: flex; 
  flex-wrap: wrap; 
  flex-direction: column; 
  align-items: flex-start; 
  height: 100%;
  margin: 0;
  font-size: 18px;
  padding: 10px;
}

.zoom-btn .categorysliderbox p {color: #fff; font-weight: 700; text-transform: uppercase; display: block; margin: 0 0 10px; position: relative; background: none; height: auto;}

.zoom-btn .categorysliderbox a {color: #fff; font-size: 14px; font-weight: 600; line-height: 1; margin-bottom: 6px;}
.zoom-btn .categorysliderbox a:hover {color: #3d8d28; transition: .3s ease-in-out all;}

/* Visible state toggled by JS */
.zoom-btn.is-open .no-show {
  transform: translateY(-100%);
}

.zoom-btn.is-open .categorysliderbox {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0,0,0,.85); 
}


.option-wrapper {display: flex; justify-content: center; align-items: center; padding: 2em;}
.option-left {width: 50%; padding-right: 5%;}
.option-left img {width: 100%; height: auto; max-width: 300px;}
.option-right {width: 50%; text-align: left;}
.option-right a {font-weight: 700; color: #b3c618;}

.resources-wrapper {width: 100%; align-items: flex-start; flex-wrap: wrap;}
.resources-wrapper .col-md-4.sh-col-md-4 {width: calc(33.33% - 2em); margin: 1em;}
.resources-wrapper button {width: 100%; background: #b3c618; color: #000; border: none; outline: none; cursor: pointer; padding: 1em; font-weight: 500; font-size: 16px; margin-bottom: 5px; text-align: left;}
.resources-wrapper button:hover {transition: .3s ease-in-out all; background: #242424; color: #fff; padding: 1em 1em 1em 1.5em;}


/*  FOOTER
-------------------------*/
.ftr-wrapper {width: 100%; background: #242424; color: #fff; padding: 2em; text-transform: uppercase; font-weight: 600;}
.ftr-wrapper h4 {text-transform: uppercase; color: #b3c618; font-weight: 600; display: block; margin-bottom: .5em; font-size: 18px;}
.ftr-wrapper p {font-size: 14px; line-height: 1.8;}



/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media screen and (max-width : 1350px) {		
	.zoom-btn img {aspect-ratio: 3 / 2;}
}
/* Medium Devices, Desktops */
@media screen and (max-width : 1180px) {
	.hdr-contact {display: flex; justify-content: center; box-sizing: border-box; margin: 0 auto;}
	.hdr-wrapper {width: 100%; justify-content: center;}
	.hdr-right, .hdr-left {width: 100%;}
	.home-hdr {flex-wrap: wrap;}
	.hdr-manus {display: none;}
	.mobile-logos {display: block;}
	a#main-logo {margin: .5em auto;}
	a#main-logo img {margin: 0 auto; display: block;}
	.resources-wrapper .col-md-4.sh-col-md-4 {width: calc(50% - 2em);}
}
/* Medium Devices, Desktops */
@media screen and (min-width : 900px) {
	
}
/* Small Devices, Tablets */
@media screen and (max-width : 767px) {
	.align-right, .ftr-wrapper {text-align: center;}
	.ftr-wrapper {font-size: 14px;}
	.ftr-wrapper p {margin-bottom: 1.5em;}
	.ftr-wrapper p.align-right {margin-bottom: 0;}
	
	.hdr-right {flex-direction: column-reverse;}
	.mobile-logos {width: 100%;}
	
	.resources-wrapper .col-md-4.sh-col-md-4 {width: calc(100% - 2em);}
}
/* Extra Small Devices, Phones */ 
@media screen and (max-width : 480px) {
	.option-wrapper {flex-direction: column;}
	.option-left {width: 100%; padding-right: 0; padding-bottom: 1em;}
	.option-right {width: 100%; text-align: center;}
	.option-right h2 {font-size: 20px;}
	.hdr-contact a {display: block;}
}