﻿/***** 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; } 
.clear{clear:both;}

/*-------- BODY STYLES --------*/
html { scroll-behavior: smooth; }
body { font-family: 'segoe-ui', sans-serif!important; font-weight: 400; line-height: 1.2; color: #000; }

a:link, a:visited, a:active, a:hover { text-decoration: none; }
hr { border: #000 1px solid; }
header, footer, section, main, 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 {}

.aria-skip { position: relative; width: 0px; height: 0px; display: flex; font-size: 0px; opacity: 0; }

.cgm-header, header.cgm-header { z-index: 1004; width: 100%; padding: 0 max(20px, calc(50% - 580px)); background: #fff; border-bottom: 1px solid #bbb; display: flex; justify-content: space-between; align-items: center; }
.cgm-header, header.cgm-header, .nav-div { position: relative; height: 81px; }
.header-logo, .header-logo img { height: 45px; }
.header-logo { margin: 0 10px; }
.header-logo img { width: min(70vw, 150px); max-width: 70vw; object-fit: contain; object-position: center; }
.nav-div { z-index: 5; display: flex; justify-content: center; align-items: stretch; }
.invsearch { position: relative; z-index: 3; width: 211px; padding: 0 10px; display: flex; }
.invsearch form, .invsearch form input[type="text"] { position: relative; width: 100%; height: 42px!important; }
.invsearch form input[type="text"] { padding: 12px 38px 12px 11.2px; border: 1px solid #000; outline: none!important; border-radius: 21px; color: #000; box-sizing: border-box; }
.invsearch form button[type="submit"] { position: absolute; top: 0; right: 0; width: 50px; height: 100%; border-top-right-radius: 21px; border-bottom-right-radius: 21px; background: none!important; border: none!important; outline: none!important; display: flex; justify-content: center; align-items: center; color: #aaa; font-size: 14px; cursor: pointer; box-sizing: border-box; }
.invsearch form button[type="submit"]:hover { color: #000; }

/***** Start of primary nav ******/
#menu-button { display: none; }

nav.primary { position: relative; width: 100%; padding: 0; margin: 0; display: flex; justify-content: flex-end; align-items: stretch; }
nav.primary ul { position: relative; width: 100%; padding: 0; margin: 0; display: flex; justify-content: flex-end; align-items: stretch; }
nav.primary ul li { position: relative; padding: 0; margin: 0; list-style-type: none; display: flex; align-items: stretch; }
nav.primary ul li a { font-size: 16px;position: relative; width: 100%; display: flex; align-items: center; text-decoration:none; text-transform: uppercase; cursor: pointer; margin: 0; transition: .2s ease all; }	
nav.primary ul li a:hover { color: #bbb; }

/******** End of primary Nav ***************/

/* Site Colors: 
	
	Teal: #0db4ac; 
*/
/*---BODY--------------------------------*/


/* forced styles */
.txt-bold, .foot-locs { font-weight: 900!important; }

.txt-upper, .foot-locs, .foot-nav { text-transform: uppercase!important; }

/*-------- FOOTER STYLES ----------------*/
footer {}

.cgm-footer, footer.cgm-footer { position: relative; width: 100%; padding: 60px 2.5% 120px 2.5%; background: #0db4ac; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; row-gap: 20px; }
.cgm-footer a, .cgm-footer p { color: #fff; text-align: center; transition: .15s ease all; }
.cgm-footer a:hover { color: #000; }
.footer-logo, .footer-logo img { width: min(300px, 85vw); }
.footer-logo { margin-bottom: 32px; }
.footer-logo img { filter: brightness(0) invert(1); height: auto; object-fit: contain; object-position: center; }
.foot-locs, .foot-nav { position: relative; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; }
.foot-locs a, .foot-nav a { position: relative; display: flex; justify-content: center; align-items: center; min-width: 50px; min-height: 30px; }
.foot-locs { margin-bottom: 8px; }
.foot-nav { column-gap: 8px; }
.foot-nav a { padding: 4px 12px; }
.foot-copyright { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; line-height: 1.4; }

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/


/* AT styles */
.list.listing { display: flex!important; }

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1150px) {
	nav.primary ul li a { font-size: 15px; padding: 0 12px!important; }
	.invsearch { width: 20%; }
}

@media only screen and (max-width: 1040px) {
	nav.primary ul li a { padding: 0 8px!important; }
}

@media only screen and (max-width: 1020px) {
	.footer-logo img { width: max(150px, min(300px, 28.5vw)); }
}

@media only screen and (max-width: 980px) {
	nav.primary ul li a { font-size: 14px; padding: 0 7px!important; }
}

@media screen and (min-width: 922px) {	/* MIND THE MIN-WIDTH */
	nav.primary ul li a { justify-content: center; text-align: center; padding: 0 16px; color: #111; }
}

/* switch to mobile nav */
@media only screen and (max-width: 921px) {
	.cgm-header, header.cgm-header { justify-content: center; }
	.nav-div { position: absolute; top: 0; right: 0; width: 100%; justify-content: flex-end; pointer-events: none; }
	.invsearch { display: none!important; }
	
	nav.primary { display:none; } 
	#menu-button { position: relative; display: flex; justify-content: flex-end; align-items: stretch; z-index: 400; }
	#menu-button a { color: #0db4ac; pointer-events: all; font-size: 20px; padding: 0 5vw;position: relative; display: flex; justify-content: center; align-items: center; column-gap: 12px; cursor: pointer; text-decoration: none; transition: .15s ease all; }
	#menu-button a:hover { color: #bbb; }
	#menu-button a.open i:before { content: "\f00d"; }
	nav.primary.open { pointer-events: all; display: flex; position: absolute; top: 100%; right: 0; width: 100%; background: #fff; border-bottom: 1px solid #bbb; }
	nav.primary ul { list-style: none; padding: 0; margin: 0; position: relative; display: flex; flex-direction: column; align-items: stretch; }
	nav.primary ul li { position:relative; }
	nav.primary ul li a { padding: 0 20px;justify-content:flex-start; min-height: 44px; color: #334155;text-align: left; }
	nav.primary ul li a:hover { color: #045cb4; background: #f0f5fa; }
	
	.foot-nav { flex-direction: column; }
}

@media only screen and (max-width: 544px) {
	.footer-logo img { width: min(300px, 85vw); }
}



