@charset "UTF-8";

/* RESET */
* {margin:0; padding: 0; border: 0; outline: 0; background: transparent;}
 
:root {
	--white:#fff;	
	--nearwhite: #f6f6f6;
	--offwhite:#d9d9d9;	
		
	--csred:#d1192d;
	--csyellow:#edcf58;

	--raytekorange:#e28614;
	
	--lightgray: #e2e2e2;
	--gray:#dbdbdb;
	
	--offblack: #282828;
	--nearblack: #131313;	
	--black: #000;
}


/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
html {scroll-behavior: smooth;}
body {font-size:100%; font-family: "tablet-gothic", sans-serif !important; background:var(--white);}

::selection {color:var(--white); background:var(--csred);}
::-moz-selection {color:var(--white); background:var(--csred);}

.clear {clear: both;}

/* HEADERS */
/*Remove or simplify font-weight and font-height */
h1, h2, h3, h4 ,h5 ,h6 {line-height: normal;}
h1 {font-size:26px; font-weight:normal;}
h2 {font-size:28px; font-weight:700;}
h3 {font-size:20px; font-weight:normal;}
h4 {font-size:18px; font-weight:normal;}
h5 {font-size:16px; font-weight:normal;}
h6 {font-size:14px; font-weight:normal;}

/* LINKS */
a{transition:.5s ease-in;}
a:link, a:visited {color:inherit; text-decoration:none;}
a:hover, a:active {color:inherit; text-decoration:underline;}

a[href^="tel:"] {color:inherit;  text-decoration: none;}
a[href^="tel:"]:hover {text-decoration:underline;}

/* IMAGES */
img {display:block;}

/* TEXT EMPHASIS */
em {font-style:italic;}
strong {font-weight: 700;}




/*  COL-TAINERS
------------------------------------------------*/
.col-tainer {position:relative; z-index:1; display:flex; flex-flow:row wrap; gap:2%;}

.col-1-1 {width:100%; margin:0;}
.col-1-2 {width:49%; margin:0 auto;}
.col-1-3 {width:32.3%; margin:0;}
.col-2-3 {width:65.6%; margin:0 auto;}

.col-img img{width:auto; max-width:100%; height:100%; /*aspect-ratio: 1.78 / 1;*/ object-fit: cover; object-position:50% 50%;}

/*.col-center {align-items:center;}*/


/*  BUTTONS
------------------------------------------------*/
a.solid-button {position:relative; display:inline-block; margin:5px; padding:18px 25px; line-height:1; font-weight:400; color:var(--white); border-radius:1px; background:var(--csred);}
a.solid-button:hover {text-decoration:none; background:var(--offblack); transform: scale(1.05);}

a.solid-alt {font-weight:700; color:var(--white); background:var(--nearblack);}
a.solid-alt:hover {text-decoration:none; color:var(--nearwhite);}

a.raytek-button {font-weight:700; color:var(--black); background:var(--raytekorange);}

a.outline-button {position:relative; display:inline-block; margin:5px; padding:18px 25px; line-height:1; font-weight:400; color:var(--csred); border:2px var(--csred) solid; border-radius:4px; background:transparent;}
a.outline-button:hover {text-decoration:none; color:var(--nearblack); border:2px var(--nearblack) solid; transform: scale(1.05);}

a.outline-alt {color:var(--white); border:2px var(--white) solid;}
a.outline-alt:hover {color:var(--csred); border:2px var(--csred) solid;}



/* HEADER ANNOUNCEMENT BANNER
------------------------------------------------*/	
.head-announce {padding:8px 25px; font-size:23px; text-align:center; background:var(--csyellow);}
.head-announce a {padding:10px; font-size:18px;}

/* HEADER TOP
------------------------------------------------*/	
.head-top {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:8px 4.5%; font-size:23px; text-align:center; background:var(--csyellow);}

.head-search {width:80%; margin:0 auto;}

.head-cart {margin:0 0 0 auto;}


/* HEADER
------------------------------------------------*/	
.global-header {display:flex; flex-flow:row wrap; align-items:center; gap:3%; padding:25px 4.5%; background:var(--nearblack);}	
	

/* LOGO
------------------------------------------------*/	
.logo {font-size:30px; line-height:1; font-variation-settings: 'wght' 800, 'wdth' 100; text-transform:uppercase;  color:var(--white); font-family: "bananas-variable",sans-serif;}	
.logo a:hover {text-decoration:none; color:var(--offwhite);}


/*  NAVIGATION
------------------------------------------------*/
#menu-button{display:none;}
nav.mobile {display:none;}
nav.primary {z-index:500; position:relative; margin:0 auto 0 0; padding:0;}
nav.primary ul {display:flex; flex-flow:row; align-items:center; gap:3%; margin:0; padding:0;}
nav.primary ul li {margin:0; padding:0; list-style-type:none;}
nav.primary ul li a {display:block; margin:0 4px; padding:12px 10px; font-size:20px; line-height:1; text-align:center; text-decoration:none; color:var(--offwhite); cursor:pointer; transition:.5s ease-in;}	
nav.primary ul li a:hover {color:var(--white);}

nav.primary ul li li {width: auto;}
nav.primary ul li li a {padding:10px 5px; font-size: 18px; line-height:1.2; font-weight: 600; text-transform: none; text-align: left; color:var(--darkgray);}
nav.primary ul li li a:hover {padding-right:0; padding-left:10px; color:var(--darkgray); background: transparent;}
nav.primary ul li li a::before {content:""; position:absolute; z-index:5; opacity:0; top:15px; left:-3px; width:4px; height:13px; background:var(--csred);transition: .5s ease-in-out;}
nav.primary ul li li a:hover::before {opacity: 1;}

nav.primary ul ul {display: none; position: absolute; min-width:200px; padding:12px 15px; background:var(--nearwhite); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); }
nav.primary ul ul ul {position: absolute; left: 100%; top:0;}
nav.primary ul li:hover>ul {display: block; z-index: 100; animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
nav.primary ul ul li {display: block; float: none; position: relative; margin: 0; padding-right: 15px;}



/* HEADER PHONE BUTTON
------------------------------------------------*/	
a.phone-button {margin:0;}


/*  HERO
------------------------------------------------*/
.hero {
	position:relative; display:flex; justify-content: space-between; gap:25px; padding:calc(3.5% + 20px) 5% calc(3.5% + 35px);
	background:var(--offblack) url("/siteart/hero/chopped-corn-stalks.jpg") no-repeat center; background-size:cover;
}
.hero::after {content:''; position:absolute; z-index: 0; top:0; left:0; width:100%; height:100%; opacity:.6; background:var(--offblack); background-blend-mode: screen;}

.hero h1 {position:relative; z-index: 2; box-sizing:border-box; max-width:850px; margin-top: calc(1.5% + 2vh); line-height:1; text-transform: uppercase; text-align:right; color:var(--white);}
.hero h1 strong {display: inline-block; margin-top:15px; font-size:calc(1vw + 35px); line-height:1; font-weight:800;}
.hero h1 span {font-size:calc(1vw + 25px); line-height:1.3; font-weight:700; font-style: italic; }

.hero .hero-search {box-sizing:border-box; position:relative; z-index: 2; width:90%; max-width: 490px; padding:30px; color:var(--white); border-radius:17px; background:var(--offblack);}
.hero .hero-search .search-heading {font-size:38px; line-height:1; font-weight:800; text-transform: uppercase;}
.hero .hero-search p {margin-bottom:20px; font-size:20px; line-height: 1.3;}
.hero .hero-search a {display:block; text-align:center; text-decoration: underline;}

.hero .hero-search-form {}


/*  PARTS BANNER
------------------------------------------------*/
.parts-banner {
	display:flex; flex-flow:row wrap; align-items:center; justify-content:center; gap:25px;
	padding:50px 3%; font-size:23px; text-align:center; color:var(--white); background:var(--offblack);
}
.parts-banner .banner-title {font-size:26px;}
.parts-banner a {font-size:20px;}





.parts-showcase {position:relative;}
.parts-showcase .cycle-slideshow {position:relative; width: 100%;}

.parts-item {position:relative !important; display:block; box-sizing:border-box !important; max-width:250px !important; margin:5px; padding:12px; text-align:center; background:var(--nearwhite);}
.parts-item a {display:flex !important; flex-flow: column wrap;}
.parts-item a:hover {text-decoration:none;}

.parts-item.parts-new {position:relative !important;}
.parts-item.parts-new::before {content:"New"; position: absolute; top:10px; left:18px; z-index: 5; padding:8px 10px; font-size:13px; font-weight:300; letter-spacing:1px; color:var(--white);background: var(--csred); transform: rotate(-8deg);}

.parts-item.parts-used {position:relative !important;}
.parts-item.parts-used::before {content:"Used"; position: absolute; top:10px; left:10px; z-index: 5; padding:8px 10px; font-size:13px; font-weight:300; letter-spacing:1px; color:var(--white); background: var(--black); transform: rotate(-8deg);}

.parts-item .parts-image {display:block; box-sizing:border-box; margin-bottom:5px; width: 100%;}
.parts-item .parts-image img {position:relative; z-index:1; width:100%; margin:0 auto;}
.parts-item .parts-title {display:inline-block; font-size:18px; color:var(--black);}
.parts-item .parts-cat {display:block; font-size:14px; font-style:italic;}
.parts-item .parts-price {display:block; margin:10px 0; font-weight:700; text-transform: capitalize; color:var(--csred)}
.parts-item .parts-desc {font-size:16px; font-weight: 300; /*white-space: normal !important;*/ text-align: center;

white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 225px;
}





/*  PRODUCT BRAND
------------------------------------------------*/
.product-brand {display:flex; flex-flow:row wrap; align-items: flex-start; justify-content:center; margin:calc(4% + 35px) auto calc(5% + 45px);}
.product-brand:nth-of-type(odd) {flex-flow:row-reverse wrap;}

.product-brand .product-photo {width:40%; border-radius:2px; background:var(--nearwhite);}
.product-brand .product-photo img {max-width:100%; /*margin-bottom:-50px;*/}

.product-brand .product-body {flex:.75; margin:0 calc(2.5% + 20px) 35px calc(2.5% + 20px);}
.product-brand .product-body p {margin-bottom:20px; font-size:22px; line-height:32px; font-weight:300;}

.product-brand .product-logo {margin-bottom:25px;}
.product-brand .product-logo img {max-width:100%;}


/*  SCROLLING INVENTORY
------------------------------------------------*/
.scrolling-wrap {width:100%; height:90px; overflow:hidden;}
.scrollinginv {width:100%; height:90px;}




/*  QUICK lINKS
------------------------------------------------*/
.quick-link-banner {
	display:flex; flex-flow:row wrap; align-content: center; justify-content: space-around;
	padding:40px 0; border-top:1px var(--lightgray) solid; border-bottom:1px var(--lightgray) solid; background:#fcf8f8;
}

.quick-link-banner a {position:relative; flex:.25; margin:35px auto; padding:0 25px; font-size:20px; font-weight:600; text-transform:uppercase; text-align:center; color:var(--csred); border-right:2px var(--lightgray) solid;}
.quick-link-banner a::after {content:'';  position:absolute; z-index:1; bottom:0; right:-2px; width:2px; height:33%; background:var(--csred); transition:1.2s all; }

.quick-link-banner a:hover {text-decoration:none; color:var(--nearblack);}
.quick-link-banner a:hover::after {height:100%;}

.quick-link-banner a:last-of-type {border:0;}
.quick-link-banner a:last-of-type::after {content:none;}

.quick-link-banner .fa-solid {margin-bottom:20px; font-size:33px;}





/*  PRODUCTS SHOWCASE - SLIDER
------------------------------------------------*/
.product-showcase {position: relative; width:100%; max-width:1360px; margin:calc(3.5% + 20px) auto calc(3.5% + 35px);}

.product-showcase .prev, .product-showcase .next {position:absolute;  z-index:5; top:50%; transform: translatey(-50%); display:block; width:60px; height:60px; margin:0; line-height:60px; text-align:center; border:4px var(--white) solid; border-radius:50%; background:var(--black); cursor:pointer;}

.product-showcase .prev {left:-35px;}
.product-showcase .next {right:-35px;}
.product-showcase .prev::after {content: "\f104"; position:relative; z-index:2; font-size:33px; color:var(--white); font-family: FontAwesome;}
.product-showcase .next::after {content: "\f105"; position:relative; z-index:2; font-size:33px; color:var(--white); font-family: FontAwesome;}

.product-showcase .cycle-slideshow {position:relative; z-index:1; width:100%; margin:0; padding:0; box-sizing: border-box;}
.product-showcase .cycle-slideshow img {width:100%;}



/*  SERVICES
------------------------------------------------*/
.services-home {display:flex; flex-flow:row wrap; align-content: center; margin: calc(1.5% + 35px) auto; background:var(--nearwhite);}

.services-home .services-intro {flex:1; padding:calc(3% + 25px) 8.5%;}
.services-home .services-intro h2 {margin-bottom: 12px; font-size: 33px;}
.services-home .services-intro p {font-size:20px; line-height:32px;}

.services-home .services-highlight {display:flex; flex-flow:column; justify-content:center; width:100%; max-width:365px; padding:calc(3% + 25px) 0; background:var(--offwhite);}
.services-home .services-highlight ul {display:flex; flex-flow:column; justify-content:space-evenly; list-style:none; height:100%; margin:0; padding:0;}
.services-home .services-highlight ul li {position:relative; margin:20px 40px 20px 0; font-size:21px; font-weight:300; text-align:right; border-right:4px transparent solid; transition: .5s ease-in-out;}
.services-home .services-highlight ul li:hover {position:relative;font-weight:500;  letter-spacing:.5px; }
.services-home .services-highlight ul li:hover::after {content:""; position:absolute; z-index:5; top:50%; transform: translatey(-50%); right:-44px; width:4px; height:100%; background:var(--csred);}


/*  SERVICES BANNER
------------------------------------------------*/
.services-banner {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; gap:25px; padding:50px 3%; text-align:center; color:var(--white); background:var(--csred);}
.services-banner .banner-title {font-size:40px; line-height:1.1;}
.services-banner a {font-size:20px;}


/*  COMPANY INTRO
------------------------------------------------*/
.company-intro {display:flex; flex-flow:row wrap; justify-content:center; gap:3.5%; margin: calc(4% + 35px) auto calc(5% + 45px);}
.company-profile {width:33%;}
.company-profile img{width:auto; max-width:100%; height:100%; aspect-ratio: 1.44 / 1; object-fit: cover; object-position:33% 50%;}
.company-bio {flex:.65}
.company-bio h2 {font-size:38px;}
.company-bio p {font-size:20px; line-height:32px;}


/*  BREADCRUMBS
------------------------------------------------*/
.bread-nav {display:flex; gap:10px; margin: 0 auto; padding:20px 5%; background:var(--nearwhite);}
.bread-nav p,
.bread-nav p a {font-size: 16px; line-height:1; color:var(--offblack);}


/*  INV MAIN
------------------------------------------------*/
.inv-main {padding:calc(35px + 1.5%) 5%;}


/*  SUB MAIN
------------------------------------------------*/
.sub-main {box-sizing:border-box; width:100%; margin: 0 auto; padding:calc(35px + 1.5%) 5%;}
.sub-main.nearwhite-main {background:var(--nearwhite);} 
.sub-main.red-main {color:var(--white); background:var(--csred);} 
.sub-main.black-main {color:var(--white); background:var(--nearblack);} 
.sub-main.red-main h2,
.sub-main.black-main h2,
.sub-main.red-main h3,
.sub-main.black-main h3 {color:var(--white);}

.sub-main h1 {margin-bottom:35px; font-size:33px; text-transform: uppercase; font-weight:700;}
.sub-main h2 {margin-bottom: 20px; font-size:25px; text-transform:capitalize; font-weight:700; color:var(--csred);}
.sub-main h3 {margin-top: 30px; margin-bottom: 20px; font-size:23px; font-weight:700; color:var(--offblack);}
.sub-main h4 {margin-bottom: 20px; font-size:26px; font-weight:700; color:var(--csred);}

.sub-main p {margin-bottom: 20px;font-size: 20px; line-height:28px; font-weight:300;}
.sub-main p a {font-weight:600; color:inherit !important;}
.sub-main p a:hover {text-decoration:none;}

.sub-main ul,
.sub-main ol {margin-left:15px; font-size: 20px; line-height:33px; list-style:inside;}



/*  CONTACT ITEMS ICONS
------------------------------------------------*/
.contact-items {/*width:45%;*/ margin:25px 0 25px 15px; font-size:20px; line-height:1.25;}
.contact-items a{position:relative; display:inline-block; margin:20px 0 20px 65px; font-size:20px; font-weight:800;  word-break: break-all;}
.contact-items a span {font-size:16px; font-weight:500;}
.contact-items a:hover {color:var(--nearblack);}

.contact-items a[href^="tel:"] {position:relative;}
.contact-items a[href^="tel:"]::before {
	content: "\f095"; position: absolute; z-index:2; top:0; left:-75px; width:55px; height:55px; border-radius:50%; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--csred); background:var(--offwhite); font-family: FontAwesome; 
}

.contact-items a[href^="mailto:"] {position:relative; }
.contact-items a[href^="mailto:"]::before {
	content: "\40"; position: absolute; z-index:2; top:0; left:-75px; width:55px; height:55px; border-radius:50%; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--csred); background:var(--offwhite); font-family: FontAwesome;
}

.contact-items a[href^="fax:"] {position:relative;}
.contact-items a[href^="fax:"]::before {
	content: "\f1ac"; position: absolute; z-index:2; top:0; left:-75px; width:55px; height:55px; border-radius:50%; transition:1.2s all;   
	font-size:30px; line-height:55px;  text-align: center; color:var(--csred); background:var(--offwhite); font-family: FontAwesome;
}

.contact-items a[aria-label="Location"] {position:relative;}
.contact-items a[aria-label="Location"]::before {
	content: "\f3c5"; position: absolute; z-index:2; top:0;left:-75px; width:55px; height:55px; border-radius:50%; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--csred); background:var(--offwhite); font-family: FontAwesome;
}

.contact-items a[aria-label="Facebook"] {position:relative;}
.contact-items a[aria-label="Facebook"]::before {
	content: "\f39e"; position: absolute; z-index:2; top:0; left:-75px; width:55px; height:55px; border-radius:50%; transition:1.2s all;  	
	font-size:30px; line-height:55px;  text-align: center; color:var(--csred); background:var(--offwhite); font-family: FontAwesome;
}

.contact-items a:hover::before {background:var(--degreen);}



/*  FOOTER
------------------------------------------------*/
.global-footer {padding:110px 9%; color:var(--white); background:var(--nearblack) url('/siteart/metal-background-pattern.jpg') no-repeat center; background-blend-mode: soft-light; background-size: cover;}

.global-footer .foot-body {display:flex; flex-flow:row; align-items:flex-start; justify-content:space-between; gap:3%;}

.global-footer .foot-heading {position:relative;margin-bottom:36px; font-size:24px; font-weight: 700; text-transform: uppercase;}
.global-footer .foot-heading::after {content:'';  position:absolute; z-index: 0; bottom:-12px; left:0; width:80%; max-width:56px; height:5px; background:var(--csred);}

.global-footer .foot-bio {flex:.63;}
.global-footer .foot-bio p {font-size:20px; line-height:33px;}

.global-footer .foot-brands {display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-start; gap:15px; margin-top:15px;}
.global-footer .foot-brands img {display:inline-block; max-height:27px;}

.global-footer .foot-nav ul {list-style:none;}
.global-footer .foot-nav ul li a {display:inline-block; margin:10px 0;  padding:9px 0; font-size:22px; line-height:1; }

.global-footer .foot-contact{font-size:22px; line-height:1.25;}
.global-footer .foot-contact a{position:relative;  display:inline-block; margin:25px 0 25px 55px; font-weight:400;}
.global-footer .foot-contact a:hover {color:var(--offwhite);}

.global-footer .foot-contact a[href^="tel:"] {position:relative;}
.global-footer .foot-contact a[href^="tel:"]::before {
	content: "\f4ad"; position: absolute; z-index:2; top:-2px; left:-50px; transition:1.2s all;  
	font-size:30px;  text-align: center; color:var(--white); font-family: FontAwesome;
}

.global-footer .foot-contact a[target="_blank"] {position:relative;}
.global-footer .foot-contact a[target="_blank"]::before {
	content: "\f689"; position: absolute; z-index:2; top:10px; left:-50px; transition:1.2s all;  	
	font-size:30px; text-align: center; color:var(--white); font-family: FontAwesome;
}

.global-footer .foot-contact a[aria-label="Facebook"] {position:relative;}
.global-footer .foot-contact a[aria-label="Facebook"]::before {
	content: "\f09a"; position: absolute; z-index:2; top:-3px; left:-46px;transition:1.2s all;  	
	font-size:30px; text-align: center; color:var(--white); font-family: FontAwesome;
}

.global-footer .foot-contact a:hover::before {color:var(--csred);}

.foot-copyright {padding:25px;font-size:16px; font-style:italic; font-weight:400; text-align:center;}
.foot-copyright b{font-weight:600;}

.shopify-buy__btn--cart-checkout {color:#fff!important; padding:10px!important;}

/************************************************ Responsive Styles **/

@media screen and (max-width: 1450px) {
	nav.primary ul {gap:2%;}
	nav.primary ul li a {padding:12px 8px; font-size:18px;}
	
	.product-showcase {max-width: calc(95% - 30px);}
	.product-showcase .prev, .product-showcase .next {width:40px; height:40px; line-height:40px; border:2px var(--white) solid;}
	.product-showcase .prev {left:-15px;}
	.product-showcase .next {right:-15px;}
	.product-showcase .prev::after, 
	.product-showcase .next::after {font-size:22px;}
	
	.global-footer .foot-bio {flex:1;}
}

@media screen and (max-width: 1250px) {
	nav.primary{display:none;}
	#menu-button{display:block; position: relative; z-index:400; margin:0  0 0 auto;}
	#menu-button a{font-size:20px; line-height:1;  text-decoration: none; padding:0; color:#fff; cursor:pointer; }
	
	nav.mobile ul li a .fa{
		width:25px;
		font-weight:100;
		padding:8px 3px;
		margin:0 0 0 5px;
		text-align:center;
		background:#292929;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	
	nav.mobile ul li .fa-chevron-down {position:absolute; right:8px; margin:18px 0 0 0; color:var(--portred);}

	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		right: -285px;
		width: 285px;
		height: 100%;
		z-index: 500;
		overflow:auto;
		padding-bottom:40px;
		background: rgb(255,255,255);
		background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%);		
	}
	
	/* MENU HEADER SOCIAL MEDIA */
	nav.mobile .social-media {
		position: absolute;
		text-decoration: none;
		vertical-align: top;
		z-index:9999;
		display: inline-block;
		
		top: 15px;
		left: 15px;
		font-size:16px;
		word-spacing:13px;
		color:var(--nearblack) !important;
	}
	
	nav.mobile .social-media a {color:var(--nearblack); text-decoration:none; cursor:pointer;}
	nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:var(--portred);}
	
	/* MENU HEADER STYLES */
	nav.mobile .menu-header {	
		color: var(--nearblack);
		padding: 23px 0;
		position: relative;
		font-size: 18px;
	}			
		
	/* MENU CLOSE 'X' BUTTON */
	nav.mobile .menu-toggle {position: absolute; top: 8px; right: 10px; padding: 6px 9px 5px; display: inline-block; font-weight: 700; font-size: 18px; line-height: 1; color: var(--nearwhite); text-decoration: none; vertical-align: top; cursor:pointer; background: var(--nearblack); font-family: Arial, sans-serif;}
	nav.mobile .menu-toggle:hover {color: #fff;}
	
	/* MENU LIST STYLE */
	nav.mobile ul {list-style: none; font-weight: 300; margin:0; padding:0;}
	nav.mobile ul li {color: #999; font-size:15px;}
	
	/* FIRST LEVEL */
	nav.mobile ul li a {
		color:var(--nearblack);
		position: relative;
		display: block;
		font-size:16px;
		font-weight:700;
		text-align:left;
		text-decoration: none;
		text-transform: uppercase;
		padding: 15px 35px 15px 20px;
		cursor:pointer;
		transition:.5s ease;	
	}
	nav.mobile ul li a:hover {background:rgba(45,45,45,0.5); color: #fff; border-left:4px var(--portred) solid;}
	
	/* SECOND LEVEL */
	nav.mobile ul li li a {padding: 15px 10px 15px 15px; font-size:16px; font-weight:500;background: #cdcdcd; text-transform: none;}
	nav.mobile ul li li a:hover {background:rgba(55,55,55,0.5);}
	
	/* THIRD LEVEL */
	nav.mobile ul li li li a {font-weight:400; background: #dfdfdf;}
	nav.mobile ul li li li a:hover {background:rgba(65,65,65,0.5);}	
	
	
	.global-footer .foot-body {flex-flow:row wrap; gap:45px;}
	.global-footer .foot-bio,
	.global-footer .foot-contact {flex:auto; width: 100%;}
	.global-footer .foot-nav {width:45%;}	
}

@media screen and (max-width: 1024px) {
	.col-tainer {flex-flow: column wrap; gap: 35px;}
	.col-1-2,
	.col-1-3,
	.col-2-3 {width:auto;}
	
	.col-img img {width:100%; max-width:none; margin:0 auto; aspect-ratio:auto;}
	
	.hero {flex-flow:column-reverse;}
	.hero .hero-search {max-width:none; margin:0 auto;}
	.hero h1 {margin-top:15px; text-align:center;}
	
	.product-brand {flex-flow: column wrap;}
	.product-brand:nth-of-type(odd) {flex-flow:column wrap;}

	.product-brand .product-photo {order:2; width: auto; max-width:90%; margin:0 auto;}
	.product-brand .product-body {order:1; flex:1;}
	
	.services-home {display:flex; flex-flow:column wrap; align-content: center;}
	.services-home .services-highlight {max-width: none;}
	.services-home .services-highlight ul li {margin:5px 40px 5px calc(12% + 20px); text-align:left;}
	
	.company-intro {flex-flow:column-reverse wrap; gap:40px; margin:calc(4% + 35px) 5% calc(5% + 45px) 5%;}
	.company-profile {width:100%; margin:0 auto;}
	.company-profile img {width:100%; max-width:none; margin:0 auto; aspect-ratio:auto;}
}

@media screen and (max-width: 768px) {
	.global-header {gap:5%; padding:25px 0 25px 4.5%;}
	.global-header a.phone-button::before {content: "\f2a0"; position:relative; z-index:2; font-size:20px; text-align:center; color:var(--white); font-family: FontAwesome;}
	.global-header a.phone-button {padding:12px 15px;}
	.global-header a.phone-button span{display:none;}
	.hero {background:var(--offblack) url("/siteart/hero/chopped-corn-stalks-mobile.jpg") no-repeat center; background-size:cover;}
		
	.quick-link-banner a {flex:calc(50% - 52px);}
	.quick-link-banner a:nth-child(even) {border:0;}
	.quick-link-banner a:nth-child(even)::after {content:none;}
	
	.global-footer {background:var(--nearblack) url('/siteart/metal-background-pattern-mobile.jpg') no-repeat center; background-blend-mode: soft-light; background-size: cover;}
}

@media screen and (max-width: 400px){
	.global-header {justify-content:space-between; padding:25px 3%;}
	.logo {order:1;font-size:25px;}
	#menu-button {order:3; margin:0 auto; width: 100%; text-align: center;}
	.global-header a.phone-button {order:2;}
	
	.hero .hero-search {width:95%;}
		
	.quick-link-banner a {flex:calc(100% - 52px); border-right:0;}
	.quick-link-banner a::after {content:none;}
	
	.product-showcase .prev, .product-showcase .next {display:none;}
	.services-home .services-intro {padding: calc(3% + 25px) 6.5%;}
}