/***** BEGIN 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; } 
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; } 
/***** END RESET *****/
::-moz-selection { background: #000;  color: #fff; text-shadow: none; } 
::selection { background: #000; color: #fff; text-shadow: none; }
/* Clearfix */
.cf { *zoom: 1; }
.cf:before, .cf:after { content: " "; display: table; } 
.cf:after { clear: both; } 

/*-------- BODY STYLES --------*/
body {

}

a:link, a:visited, a:active, a:hover { text-decoration: none; }
hr { border: #000 1px solid; }
div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, i, ol, ul, li, form, label, :before, :after { box-sizing: border-box; }

/*--- HEADER STYLES ---------------------*/
header {  }

.cactus-header {
	position: relative; z-index: 1004; width: 100%; 
	display: flex; flex-direction: column; align-items: stretch; 
	box-shadow: 0 0 12px rgba(0, 0, 0, .25); 
}
.header-header {
	position: relative; background: #ede47b; padding: 0 max(24px, calc(50% - 750px)); height: 152px; 
	display: flex; justify-content: space-between; align-items: flex-end; 
}
.header-header img { width: auto; height: 100%; padding-top: 10px; object-fit: contain; object-position: 0% 100%; }
.header-right {
	height: 100%; padding: 12px 0 20px 0; 
	display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; 
}
.header-right span, .header-right a { color: #000; text-align: right; }
.cactus-header .companyname { font-size: 52px; }
.header-right *:not(.companyname) { font-size: 24px; }
.header-right a:hover { color: #303030; text-decoration: underline; }
.header-right .horiz-sect { justify-content: flex-end; column-gap: 60px; }
.nav-div { 
	position: relative; z-index: 3; background: #000; height: 52px; padding: 0 max(0px, calc(50% - 550px)); 
	display: flex; justify-content: center; align-items: stretch; 
}

/* Site Colors: 
	
	Yellow: #ede47b; rgba(237, 228, 123, 1); 

	Purple1: #667194; rgba(102, 113, 148, 1); 
	Purple2: #4a5570; rgba(74, 85, 112, 1); 
	Purple3: #374054; rgba(55, 64, 84, 1); 
*/
/*---BODY--------------------------------*/
.invisilink {
	font-family: inherit; font-size: inherit; font-weight: inherit; 
	line-height: inherit; letter-spacing: inherit; color: inherit; display: inline; 
	transition: .25s ease all; 
}
a.invisilink:hover { color: #374054; text-decoration: underline; }

/* Text / Titles / Paragraphs / <h1><h2><h3><h4> / <p> */
.txt-default, .content-sect p, 
.btnclass, .title, .inv-btn span, .foot-nav a, #menu-button a span, 
label, input, select, textarea, button {
	font-family: 'darkmode-on', sans-serif; font-weight: 500; color: #000; 
}

.title, .inv-btn span {
	font-size: 32px; font-weight: 900; text-transform: uppercase; line-height: 1.25; 
}

.companyname, .company-link {
	font-family: 'arial-narrow', sans-serif; transition: .25s ease all; 
}
.companyname { font-weight: 900; }

/* buttons / links / <a> / ctas */
.btnclass {
	position: relative; padding: 12px 36px; background: #667194; color: #fff; 
	box-shadow: 0 2px 12px rgba(0, 0, 0, .25); border-radius: 6px; 
	display: flex; justify-content: center; align-items: center; 
	text-align: center; font-weight: 800; letter-spacing: -.2px; text-transform: uppercase; 
	transition: .25s ease all; 
}
.btnclass.btn-yellow { background: #ede47b; color: #000; }
.btnclass:hover { background: #374054; color: #fff; letter-spacing: 1.25px; padding: 12px 24px; }
.btnclass.btn-yellow:hover { background: #101010; color: #fff; }

/* sections */
.content-sect {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; row-gap: 6px; 
}
.content-sect.center-style { align-items: center; }

.content-sect p { width: 100%; margin-bottom: 8px; }

.horiz-sect {
	width: 100%; 
	display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; column-gap: 24px; row-gap: 6px; 
}
.horiz-sect.center-style, .content-sect.center-style .horiz-sect { justify-content: center; }

.mission {
	positioN: relative; width: 100%; padding: 60px max(4%, calc(50% - 900px)); 
	display: flex; align-items: center; 
}
.mission .content-sect { width: 50%; }
.mission .missionimg { position: relative; width: 50%; }

.missionimg img {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
	object-fit: cover; object-position: center; 
}

.mission-imgbg {
	position: relative; width: 100%; background: #f0f0f0; padding: 120px max(4%, calc(50% - 900px)); min-height: 500px; 
}
.mission-imgbg:before, .mission-imgbg:after {
	position: absolute; content: ""; top: 0; left: 0; height: 100%; 
	clip-path: polygon(0% 0%, 100% 0%, min(85%, calc(100% - 180px)) 100%, 0% 100%); 
}
.mission-imgbg:before {
	z-index: 2; width: 69%; 
	background-image: linear-gradient(90deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .4) 100%); 	
}
.mission-imgbg:after {
	z-index: 3; width: 72.5%; background: rgba(255, 255, 255, .3); 
}
.mission-imgbg > img {
	position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; 
	object-fit: cover; object-position: center; 
}
.mission-imgbg > *:not(img) { position: relative; z-index: 5; }
.mission-imgbg > *:not(img):not(.btnclass) { width: 57%; }

/* Homepage - default.htm */
.homepage {}

.hero {
	position: relative; width: 100%; padding: 120px max(4%, calc(50% - 900px)); min-height: 650px; 
	background: #667194; 
	display: flex; justify-content: flex-start; align-items: center; 
}
.hero:before, .hero:after {
	position: absolute; content: ""; left: 0; background: rgba(0, 0, 0, .25); 
}
.hero:before {
	top: 50px; width: 100%; height: calc(100% - 50px); 
	clip-path: polygon(0% 0%, 100% 75%, 100% 100%, 0% 100%); 
}
.hero:after {
	top: 0; width: 69%; height: 100%; 
	clip-path: polygon(0% 0%, 100% 0%, 82% 100%, 0% 100%); 
}
.hero img {
	position: absolute; z-index: 3; bottom: 0; right: max(0px, calc(50% - 1200px)); 
	width: auto; max-width: 70%; height: calc(100% - 24px); 
	object-fit: contain; object-position: 100% 100%; 
}
.hero-overlay { position: relative; z-index: 4; width: 550px; }
.hero-overlay p { width: min(82%, 500px); }
.hero-overlay .title, .hero-overlay p, .hero-overlay p a { color: #fff; }
.hero-overlay p a.invisilink:hover { color: #ddd; }

.inv-btns-sect {
	position: relative; z-index: 2; width: 100%; padding: 42px max(4%, calc(50% - 1200px)); 
	display: flex; flex-direction: column; align-items: center; row-gap: 28px; 
}
.inv-btns-sect .title { text-align: center; }
.inv-btns-holder { 
	position: relative; width: 100%; 
	display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: stretch; 
	column-gap: 7px; row-gap: 7px; 
}

.inv-btn {
	position: relative; width: calc(25% - 5.4px); padding: 20px 12px; min-height: 180px; background: #000; 
	display: flex; justify-content: center; align-items: center; 
}
.inv-btn img {
	position: absolute; z-index: 1; opacity: .65; top: 0; left: 0; width: 100%; height: 100%; 
	object-fit: cover; object-position: center; transition: .15s ease all; 
}
.inv-btn span { 
	position: relative; z-index: 2; text-align: center; font-size: 22px; 
	color: #fff; text-shadow: 1px 1px 0 #000, 0 0 20px #000; 
	transition: .15s ease all; 
}

a.inv-btn:hover img { opacity: 1; transition: .25s ease all; }
a.inv-btn:hover span { letter-spacing: 1.5px; transition: .25s ease all; }

.force-opacity80 { opacity: .8!important; }
a.inv-btn:hover .force-opacity80 { opacity: 1.25!important; }

/* subpages */
.subpage { 
	width: 100%; position: relative; 
	display: flex; flex-direction: column; align-items: center; 
}

.subhero {
	position: relative; width: 100%; 
}

.subhero {
	position: relative; width: 100%; padding: 60px max(4%, calc(50% - 900px)); 
	background: #667194; 
	display: flex; justify-content: flex-start; align-items: center; 
}
.subhero:before {
	position: absolute; content: ""; left: 0; background: rgba(0, 0, 0, .25); 
	bottom: 0; width: 100%; height: calc(100% - 50px); 
	clip-path: polygon(0% 0%, 100% 60%, 100% 100%, 0% 100%); 
}
.subhero img {
	position: absolute; z-index: 3; bottom: 0; right: max(0px, calc(50% - 1200px)); 
	width: auto; max-width: 50%; height: calc(100% - 8px); 
	object-fit: contain; object-position: 100% 100%; 
}
.subhero .hero-overlay { width: 70%!important; }
.subhero .hero-overlay p { width: 80%!important; }

/* about.htm */
.aboutpage {}

/* contact.htm */
.contactpage {}

.contactinf { padding: 60px max(5vw, calc(50vw - 600px)); align-items: center; background: #ebebeb; }
.contactinf h1, .contactinf p { text-align: center; }
.contactinf .horiz-sect { justify-content: center; }
.contactinf .company-link {  color: #000;
	font-size: 24px; text-align: center; 
	display: flex; justify-content: center; align-items: center; 
	position: relative; padding: 12px 36px; 
	transition: .25s ease all; 
}
.contactinf a.company-link:hover { color: #fff; text-decoration: underline; background: #374054; }

/* thank-you.htm */
.thankyoupage {}

/* recommended styles */
.center-style, .center-style .title, .center-style p, 
.title.center-style, p.center-style { text-align: center; }

.width100 { width: 100%; }

/* forced styles */
.txt-bold { font-weight: 800!important; }

.force-margb0 { margin-bottom: 0!important; }

/*-------- FORM STYLES now located in formstyles.css --------------------*/


/*-------- FOOTER STYLES ----------------*/
footer {  }

.cactus-footer {
	position: relative; z-index: 5; width: 100%; background: #4a5570; 
	padding: 0 max(4%, calc(50% - 800px)); 
	box-shadow: 0 0 12px rgba(0, 0, 0, .25); border-bottom: 12px solid #000; 
	display: flex; justify-content: center; align-items: stretch; row-gap: 40px; 
}
.foot-nav {
	position: absolute; z-index: 2; top: 0; left: max(calc(4% - 12px), calc(50% - 800px)); height: 100%; 
	padding: 16px 0; 
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.foot-nav a {
	color: #fff; text-align: left; text-transform: uppercase; padding: 4px 12px; 
	display: flex; justify-content: flex-start; align-items: center; 
	transition: .25s ease all; 
}
.foot-soc {
	position: relative; z-index: 3; padding: 20px 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 10px; 
}
.foot-soc .companyname { font-size: 36px; }
.foot-soc span:not(.companyname), .foot-soc a { font-size: 24px; }
.foot-soc span, .foot-soc a { color: #fff; text-align: center; }
.cactus-footer a:hover { color: #ddd; text-decoration: underline; }
.foot-logo {
	position: absolute; z-index: 2; top: 0; right: max(4%, calc(50% - 800px)); 
	padding-top: 20px; padding-left: 12px; width: 300px; height: 100%; 
	object-fit: contain; object-position: 100% 100%; 
}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.inv-foot-spacer { width: 100%; height: 90px; background: #000; }

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

@media only screen and (min-width: 1751px) {		/* MIND THE MIN-WIDTH */
	.hero:before { top: 0; height: 100%; clip-path: polygon(0% 0%, 10% 0%, 100% 75%, 100% 100%, 0% 100%); }
	.hero:after { width: 74%; }
}

@media only screen and (max-width: 1500px) {
	.hero { min-height: 600px; }
	.hero img { max-width: 66%; }
}

@media only screen and (max-width: 1350px) {
	.title { font-size: 30px; }
	
	.hero { min-height: 520px; }
	.hero-overlay { width: 510px; }
	
	.inv-btns-sect { padding-left: 2%; padding-right: 2%; }
}

@media only screen and (max-width: 1250px) {
	.title { font-size: 28px; }
	
	.hero-overlay { width: min(50%, 480px); }
}

@media only screen and (max-width: 1200px) {
	.header-header { height: 130px; }
	.header-header img { padding-top: 5px; }
	.header-right { padding: 8px 0 14px 0; }
	.cactus-header .companyname { font-size: 46px; }
	
	.mission-imgbg { min-height: unset; }
	.mission-imgbg:before, .mission-imgbg:after { clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%); }
	.mission-imgbg:before { width: 95%; }
	.mission-imgbg:after { width: 99%; }
	.mission-imgbg >*:not(img):not(.btnclass) { width: 88%; }
	
	.hero { min-height: unset; padding: 100px 3%; }
	.hero img { max-width: 60%; }
	
	.cactus-footer { padding-bottom: 200px; }
	.foot-nav, .foot-logo { top: unset; bottom: 0; }
	.foot-nav { height: 220px; }
	.foot-logo { height: 180px; }
}

@media only screen and (max-width: 1100px) {
	.inv-btn { width: calc(33.333333% - 4.8px); }
	.inv-btn span { font-size: 20px; }
}

@media only screen and (max-width: 1050px) {
	.hero { padding: 50px 5% 430px 5%; }
	.hero:before { top: unset; bottom: 0; height: calc(100% - 160px); clip-path: polygon(0% 0%, 100% 50%, 100% 100%, 0% 100%); }
	.hero:after { clip-path: none; width: 100%; }
	.hero-overlay, .hero-overlay p { width: 100%; }
	.hero img { max-width: unset; width: 100%; height: 420px; }
}

/* switch to mobile nav */
@media only screen and (max-width: 1000px) {
	.nav-div { height: 50px; }
}

@media only screen and (max-width: 950px) {
	.header-header { height: 110px; }
	.header-right { padding: 4px 0 12px 0; }
	.cactus-header .companyname { font-size: 40px; }
	.header-right .horiz-sect { column-gap: 32px; }
	.header-right *:not(.companyname) { font-size: 21px; }
}

@media only screen and (max-width: 900px) {
	.hero { padding-bottom: 370px; }
	.hero img { height: 360px; }
}

@media only screen and (max-width: 850px) {
	.inv-btn { width: calc(50% - 4px); min-height: 140px; }
}

@media only screen and (max-width: 820px) {
	.header-header { height: 100px; }
	.header-right { padding: 8px 0 14px 0; }
	.cactus-header .companyname { font-size: 34px; }
	.header-right .horiz-sect { column-gap: 28px; }
}

@media only screen and (max-width: 800px) {
	.mission-imgbg { padding-top: 80px; padding-bottom: 80px; }
	.mission-imgbg:before, .mission-imgbg:after { width: 100%; clip-path: none; background: rgba(255, 255, 255, .75); background-image: none; }
	.mission-imgbg:after { display: none!important; }
	.mission-imgbg >*:not(img):not(.btnclass) { width: 100%; }

	.hero:before { height: calc(100% - 240px); clip-path: polygon(0% 0%, 100% 35%, 100% 100%, 0% 100%); }
	
	.contactinf .company-link { padding: 12px; }
	
	.cactus-footer { padding-top: 40px; padding-bottom: 160px; flex-direction: column; align-items: center; }
	.foot-soc { order: 1; padding: 0; }
	.foot-nav { height: unset; bottom: unset; left: unset; position: relative; order: 2; align-items: center; padding: 0; }
	.foot-nav a { justify-content: center; text-align: center; min-height: 40px; }
	.foot-logo { width: 100%; height: 140px; padding-top: 0; }
}

/* switch to full mobile header */
@media only screen and (max-width: 700px) {
	.hide700 { display: none!important; }
	
	.cactus-header { border-bottom: 4px solid #000; }
	.header-header { height: unset; flex-direction: column-reverse; padding: 0 2%; row-gap: 8px; }
	.header-header img { max-width: 45%; height: 80px; padding-top: 0; margin-right: auto; }
	.header-right { flex-direction: column-reverse; align-items: center; width: 100%; padding: 0; }
	.header-right span, .header-right a { text-align: center; }
	.header-right a { width: 100%; height: 40px; display: flex; justify-content: center; align-items: center; }
	.header-right .horiz-sect { justify-content: center; }
	.cactus-header .companyname { font-size: 32px; }
	.nav-div { background: none; width: min(50%, 120px); height: 80px; position: absolute; bottom: 0; right: 0; }
	
	.hero { padding-bottom: 300px; }
	.hero img { height: 280px; }
}

@media only screen and (max-width: 650px) {
	.inv-btn { min-height: 110px; }
	.inv-btn span { font-size: 18px; }
	
	.foot-soc .companyname { font-size: 30px; }
}

@media only screen and (min-width: 501px) {		/* MIND THE MIN-WIDTH */
	.show500 { display: none!important; }
}

@media only screen and (max-width: 500px) {
	.header-header { row-gap: 4px; }
	.cactus-header .companyname { line-height: 40px; }
}

@media only screen and (max-width: 420px) {
	.hero { padding-bottom: 260px; }
}

@media only screen and (max-width: 380px) {
	.hero { padding-bottom: 240px; }
}

@media only screen and (max-width: 350px) {
	.inv-btn { width: 100%; min-height: 80px; }
	.inv-btn span { font-size: 16px; }
}

@media only screen and (max-width: 320px) {
	.cactus-header .companyname { font-size: 24px; line-height: 28px; }
	
	.hero { padding-bottom: 200px; }
}

@media only screen and (max-width: 200px) {
	.hero { padding-bottom: 140px; }
}