/***** 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=Barlow+Condensed: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=Barlow: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=Caveat:wght@400..700&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: #fff; 
    color: #000;
    text-shadow: none;
}
::selection {
    background: #fff;
    color: #000;
    text-shadow: none;
}


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

body {
  box-sizing: border-box; 
  font-family: "Barlow", sans-serif;
  line-height: 1.8;
  background:#FFFAF5;
  font-weight:500;
}

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

hr{border:#000 1px solid;}

/*--- FONT STYLES ---------------------*/
h1,h2,h3,h4,h5,h6 {font-family: "Barlow Condensed", sans-serif;text-transform:uppercase;}

.script-text { font-family: "Caveat", cursive;text-transform:uppercase;margin-bottom:unset;}
.sec-heading h2{font-size: clamp(2.125rem, 1.8697rem + 1.2766vw, 3.625rem);}

.sec-heading p {margin-bottom:unset !important;}

.red-line {border-left: solid red 3px;padding-left: 12px;}

span.large-text {text-transform: uppercase;font-weight: 800;}

.sec-heading {line-height: 1;margin-bottom: 10px;}
.sec-heading h1 {font-size: clamp(1.5625rem, 1.2382rem + 1.6216vw, 3.0625rem);}
.search-top h2 {font-weight: 500 !important;font-size: clamp(1.25rem, 0.9797rem + 1.3514vw, 2.5rem);}
.overlay-content h2 {font-size: clamp(1.875rem, 1.6047rem + 1.3514vw, 3.125rem);;}
span.script-text {font-size: clamp(1.125rem, 1.0304rem + 0.473vw, 1.5625rem);}
#two-sections  p{margin-bottom:30px}
.overlay-content h2 {font-size: clamp(1.875rem, 1.6047rem + 1.3514vw, 3.125rem);}
span.inv-title {font-family: "Barlow Condensed", sans-serif;text-transform:uppercase;font-weight:600;padding: 0 10px;}


.sub-overlay h1{margin-left: 80px;font-size: clamp(1.5625rem, 1.1902rem + 1.8617vw, 3.75rem);}

/*--- HEADER STYLES ---------------------*/
header {}
.hero-image img {width: 100%;object-fit: cover;height: 730px;object-position: 0 -12px;}

.banner {background:#1B1B1B;text-align:center;color:#fff;padding:20px 0 ;text-transform:uppercase;font-weight:600;font-size: clamp(1.0625rem, 1.0306rem + 0.1596vw, 1.25rem);font-family: "Barlow", sans-serif;}

.image-banner {background-image:url("/siteart/hydraulic-hose-banner-cropped.jpg"); background-size:cover; background-color:black;text-align:center;color:#fff;text-transform:uppercase;font-weight:600;font-size:32px; font-family: "Barlow", sans-serif; padding:75px 75px; background-repeat: no-repeat;text-align: center; background-position: center; }



.scrolling-wrap {width: 83%;}
#main-hero {position:relative;}

#sub-hero .hero-image {position:relative;overflow:hidden;}

.sub-overlay {position: absolute;width: 100%;height: 98%;background: #393a3ca3;color: #fff;display: flex;align-items: center;}

#sub-hero .hero-image img {width: 100%;object-fit: cover;height: 310px;object-position: 0 50%;}
#full-width.contact-form {padding:50px 0;}

/*--- SEARCH STYLES ---------------------*/
form.search-bottom {display: flex;justify-content: space-between;gap: 20px;align-items: center;}
.search-top {display:flex;justify-content: space-around;justify-content: space-between;color: #fff;align-items: center;}

.search-input {width:100%}
.search-input select,.search-input input {width: 100%;padding: 10px 10px;border-radius: 10px;}

.search {position: absolute;right: 5%;width: 100%;max-width: 89%;background: #7F3238;padding: 40px 10px;border-radius: 20px;  z-index: 999; bottom:-180px;}

.search .wrapper {width: 90%;margin: 0 auto;display: flex;flex-direction: column;gap: 30px;}


div#two-sections {padding: 40px 0;}

form.search-bottom{width: 100%;}
form.search-bottom .search-input select,form.search-bottom .search-input input{padding: 16px 10px;text-transform:uppercase;font-family: "Barlow Condensed", sans-serif;font-weight:700;font-size:18px;color:#000;box-sizing: border-box;border: unset;}
.column3.last {width: 100%;max-width: 140px;}
.column3.last button {padding: 14px 10px;width: 100%;max-width: 150px;border-radius: 10px;background:#fff;font-size:25px;color:#7F3238;transition:.3s;border:3px solid #7F3238;}

.section-1 .wrapper div {width:100%;}
/*---BODY--------------------------------*/

/*---BUTTONS--------------------------------*/
.button-flex {display:flex;margin-top: 50px;gap: 30px;}
.white-button button,input.white-button {background: #fff;padding: 19px 0;width: 100%;max-width: 400px;color:#7F3238;text-transform:uppercase;font-size:23px;border-radius:10px;font-weight:800;font-family: "Barlow Condensed", sans-serif;transition:.3s;border:3px solid #7F3238;}

a.white-button button:hover,a.white-button button:active,a.white-button button:focus,input.white-button:hover, input.white-button:active,input.white-button:focus,.collapsible:hover ,.collapsible:active,.collapsible:focus ,.button-flex.contact .white-button button:hover,.button-flex.contact .white-button button:active,.button-flex.contact .white-button button:focus,.column3.last button:hover,.column3.last button:active,.column3.last button:focus{border:3px solid #fff;background:#fff4;color:#fff;}

a.white-button {width: 100%;max-width: 270px;}

.button-flex.contact {flex-direction: column;gap: 20px;}
.button-flex.contact a.white-button{width: 100%;max-width: 100%;}
.button-flex.contact .white-button button {background: #fff;padding: 19px 40px;width: 100%;max-width: 100%;color: #7F3238;text-transform: uppercase;font-size: clamp(1.125rem, 1.0574rem + 0.3378vw, 1.4375rem);text-align: left;border-radius: 10px;font-weight: 800;font-family: "Barlow Condensed", sans-serif;border:3px solid #7F3238;}

.button-flex.contact i {margin-right:20%;}

/*---SECTIONS------------------*/
#two-sections .wrapper.flex {display:flex;justify-content: center;gap: 21px;width: 100%;}
.section-1 {display: flex;justify-content: center;padding: 5% 0;
    color: #fff;
    background: #7F3238;
    border-radius: 20px;
    width: 47%;}

.section-1 .wrapper{width: calc(40% - -294px);display: flex;align-items: center;}
.section-2 iframe {border-radius:20px;}
.section-2 {width: 45%;}
.section-2 img {width: 100%;height:100%;object-fit: cover;border-radius:20px;}

#full-width {display: flex;flex-direction: column;width: 94%;margin: 0 auto;position: relative;margin-bottom: 70px;align-items: center;background: #4E171B;color: #fff;border-radius: 30px;}

label p {font-family: "Barlow Condensed", sans-serif;text-transform:uppercase;font-weight:600;font-size:18px;}

.overlay {position: absolute;width: 100%;height: 100%;background:#393a3cde;color: #fff;border-radius: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;transition:.3s;}
.overlay-content {text-align:center;}
div#two-sections.sub-page {padding:40px 0 20px!important;}

.line {max-width:300px;height: 170px;font-size: 88px;font-weight: 200;}
#main-hero {margin-bottom: -9px;}

div#two-sections.home {padding-top:90px;}
div#full-width.hydraulics {overflow:hidden;}
/*---INVENTORY CATEGORIES --------------*/

.category-flex .wrapper.flex a:hover .overlay,.category-flex .wrapper.flex a:active .overlay,.category-flex .wrapper.flex a:focus .overlay{background:#4e171b75;}
.category-flex .wrapper.flex a:hover .inv-icon,.category-flex .wrapper.flex a:active .inv-icon,.category-flex .wrapper.flex a:focus .inv-icon {max-width: 180px;background:#4E171B;}


.scrolling-wrap {width: 83%; }
.inventory-categories .wrapper.flex {width: 100%;margin: 0 auto;display: flex;justify-content: center;flex-direction: column;align-items: center;padding-top: 60px;}
.category-flex .wrapper.flex {display: flex;flex-direction: row !important;gap: 10px;}
.cat-image {border-radius: 20px;width: 100%;max-width: 740px;object-size: 100%;overflow: hidden;height: 419px;}
.inventory-categories {margin-top:150px;}


.inv-cat {width: 96%;position:relative;overflow:hidden;}
.inv-cat .overlay{position: absolute;width: 100%;height: 100%;background: #393a3ca3;border-radius: 20px;}
.inv-content {color: #ffff;font-size: clamp(1.25rem, 1.1149rem + 0.6757vw, 1.875rem);display: flex;justify-content: center;align-items: flex-end;height: 76%;}

.inv-icon {position: absolute;z-index: 1;padding: 20px 0;background: #7F3238;border-radius: 20px 0;max-width: 130px;width: 100%;display: flex;justify-content: center;transition:.3s}

.cat-image {border-radius: 20px;width: 100%;max-width: 520px;object-size: 100%;overflow: hidden;height: 479px;}

.cat-image img{object-fit: cover;object-position: -110px 0px;width: calc(200% - 330px);height: 480px;}

.inv-content hr {border: none !important;height: 7px;background-color: #F22735 !important;width: 100%;max-width: 50px;}
.ground-bcrumbs {padding: 30px;}
.inv-center {display: flex;align-items: center;height: 70px;}
.category-flex .wrapper.flex a {display: flex;justify-content: center;width: 39%;}

button.border-white {background: transparent;border: #fff solid;color: #fff;width: 60%;height: 52px;text-transform: uppercase;font-weight: 700;font-family: "Barlow Condensed", sans-serif;font-size: 19px;}

/*animation element*/

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms 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*/


/*--------SEARCH STYLES--------------------*/

/*--------FORM STYLES--------------------*/
.form.flex {display: flex;justify-content: center;justify-content: space-between;gap: 40px;}

.formfield {box-sizing: border-box;width: 100%;padding: 10px 0;margin-bottom: 10px;}

.form.flex input,.form.flex textarea {box-sizing:border-box;width:100%;padding: 20px 10px;border: unset;border-radius: 10px;}
textarea#Message {height: 140px;font-family: "Barlow", sans-serif;font-weight:600;}

.message.formfield {display: flex;flex-direction: column;}
form.contact {padding: 10px 0px;width: 80%;margin: 0 auto;}


.collapsible {background: #fff;padding: 19px 0;width: 100%;max-width: 400px;color:#7F3238;text-transform:uppercase;font-size:23px;border-radius:10px;font-weight:800;font-family: "Barlow Condensed", sans-serif;margin-top: 30px;transition:.3s;border:3px solid #7F3238;}


.content {
  display: none;
  overflow: hidden;
  padding:50px 0;
}

input#CaptchaAnswer {padding: 10px 0 !important;width: 100% !important;}

.CaptchaPanel {text-align: left !important;}
.CaptchaMessagePanel,.CaptchaWhatsThisPanel a {font-size: 16px;color:#fff !important;}

/*-------- FOOTER STYLES ----------------*/
footer{}
.scrolling-wrap-footer iframe{width:100% !important;line-height:unset;}
.scrolling-wrap-footer {line-height: 0 !important;}
.footer {background:#4E171B;display: flex;flex-direction: column;align-items: center;color: #fff;padding: 50px 0; }
.footer-links ul {display:flex;justify-content:center;gap:40px;}

.footer-links ul li a{color:#fff;text-transform:uppercase;font-family: "Barlow Condensed", sans-serif;font-size:20px;font-weight:600;}

.footer-bottom .wrapper.flex {display: flex;justify-content: space-between;align-items: center;}

.footer-links {width: 50%;padding-bottom: 13px;}

.footer-bottom {padding: 13px 0;border-top: 4px solid #fff;width: 50%;}
.footer-bottom {text-transform:uppercase;font-weight:700;font-family: "Barlow Condensed", sans-serif;}
.social-icons i {color:#fff;}
.social-icons {display:flex;gap:20px;font-size:25px;}

/*----SLIDESHOW----*/
.cycle-slideshow{width: 100%;object-fit: cover;height: 730px;object-position: 0 -12px; display:block; position:relative; overflow: hidden;}
.cycle-slideshow img{width: 100%;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.linking-container a,.linking-container h4 {color: #000 !important;}

.linking-buttons a.active,.faceted-search-content .selected-facets-container .selected-facet,.list-container-flexrow .view-listing-details-link,.list-redesign .widget-container .listing-widgets .shipping a,.list-content .listing-widgets .Currency a{background:#4E171B!important;color:#fff !important;}
ul.breadcrumbs__list {padding-top: 60px;}




/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1600px) {
	.scrolling-wrap {width: 90%;}
	.inventory-categories .wrapper.flex {width: 97%;}
}

@media only screen and (max-width: 1660px) {
	#full-width {width: 100%;border-radius:unset;margin-bottom: 30px;}
	.overlay {border-radius:unset;}
}


@media only screen and (max-width: 1500px) {
	.footer-links {width: 90%;}
	.footer-bottom {width: 90%;}
	#full-width {display: flex;flex-direction: column;width: 100%;margin: 0 auto;position: relative;margin-bottom: 70px;align-items: center;background: #4E171B;color: #fff;border-radius: unset;overflow: hidden;}
	.overlay {border-radius: unset;}
}


@media only screen and (max-width: 1420px) {
	.section-1 .wrapper {width: calc(40% - -224px);}
	.hero-image img {object-position:unset;}
}


@media only screen and (max-width: 1200px) {
	#sub-hero .hero-image img {height: 220px;}
}

@media only screen and (max-width: 1170px) {
	.cycle-slideshow{height: 664px;}
}


@media only screen and (max-width: 1122px) {
	.category-flex .wrapper.flex {flex-direction:column !important;}
	.cat-image img {object-fit: cover;object-position: unset;width: 100%;height: 480px;}
	.cat-image {max-width: 100%;}
	.inv-cat {width: 100%;}
	.category-flex .wrapper.flex a {width: 100%;}
}

@media only screen and (max-width: 1104px) {
#two-sections .wrapper.flex	{flex-direction: column;align-items: center;}
	.section-1,.section-2 {width: 90%;}
	.section-1 .wrapper  {width: calc(60% - -224px);}
}

@media only screen and (max-width: 1000px) {
	form.search-bottom {flex-direction: column;}
	.scrolling-wrap {width: 100%;}
	.search {position: relative;top: 0;right: 0;width: 100%;max-width: 100%;background: #7F3238;padding: 40px 0;border-radius: unset;top: -9px;}
	.hero-image img {width: 100%;object-fit: cover;height: unset;object-position: unset;}
	
	.scrolling-wrap {padding-top:unset !important;}
	.inventory-categories .wrapper.flex {padding-top:unset;}
	.inventory-categories .wrapper.flex {gap:30px;}
	#main-hero {margin-bottom: -100px;}
}

@media only screen and (max-width: 1000px) {
	.search {top:-117px;}
}


@media only screen and (max-width: 920px) {
	.cycle-slideshow {height:430px;}
	
}
	

@media only screen and (max-width: 900px) {
	.inventory-categories {width:100%;margin: 0 auto;}
	.section-1 {padding: 15% 0;}
	.section-1 .wrapper {width: calc(30% - -354px);}
	#full-width {margin-bottom: 33px;}
	.search-top {flex-direction: column;}
	.sub-overlay {justify-content: center;}
	.sub-overlay h1 {margin-left:unset;}
	
}



@media only screen and (max-width: 800px) {
	.footer-links ul {display: flex;justify-content: center;gap: 20px;align-items: center;margin-bottom: 8px;flex-wrap: wrap;}
	.footer-bottom .wrapper.flex {display: flex;justify-content: space-between;flex-direction: column;align-items: center;text-align: center;gap: 30px;}
	.footer-bottom {padding: 23px 0 0;}
	.image-banner {font-size:25px;}
}

@media only screen and (max-width: 700px) {
	.inv-cat {width: 95%;}
	.section-1 .wrapper {width: calc(30% - -284px);}
	.column3.last {max-width: 100%;}
	.column3.last button,.white-button button {max-width: 100%;}
	a.white-button {max-width: 100%;}
	.overlay-content {width: 80%;}
	.section-2 img {display:none;}
	
}

@media only screen and (max-width: 630px) {
	#main-hero {margin-bottom:-90px}
	.cycle-slideshow {height:300px;}
}

@media only screen and (max-width: 500px) {
	.form.flex {flex-direction: column;gap: 0;}
	.section-1 .wrapper {width: calc(30% - -234px);}
	.button-flex.contact .white-button button {padding: 19px 10px;}
	.button-flex.contact i {margin-right: 7%;}
	.button-flex {flex-direction:column;gap: 17px;}
	.button-flex a.white-button {max-width:100%;}
	.overlay-content {width: 90%;}
	.section-1,.section-2{width: 95%;}
}

@media only screen and (max-width: 420px) {
	.footer-links ul {flex-direction: column;}
}



@media only screen and (max-width: 400px) {
	.button-flex {flex-direction: column;}
	.section-1 .wrapper {width: calc(30% - -160px);}
	#full-width {height: 340px;}
	#full-width.contact-form {height:100%;}
	#full-width img {object-position: 0 0px;width: 1720px;object-fit: cover;}
}