/***** 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 {  }

.yes-header {
	position: relative; z-index: 1004; width: 100%; padding: 20px max(32px, calc(50% - 900px)); background: #000; 
	display: flex; justify-content: space-between; align-items: center; 
}
.yes-topheader {
	height: 50px; 
	display: flex; justify-content: center; align-items: stretch; 
}
.header-col {
	display: flex; flex-direction: row; align-items: center; 
}
.header-logo-div { width: 250px; justify-content: flex-start; }
.header-logo-div img {
	width: min(100%, 250px, 70vw); height: auto; object-fit: contain; object-position: center; 
}
.header-soc { justify-content: space-evenly; flex-grow: 1; }
.header-right { justify-content: flex-end; }

/* Site Colors: 
	
	
*/
/*---BODY--------------------------------*/
/* Text / Titles / Paragraphs / <h1><h2><h3><h4> / <p> */
.title, .subtitle, .txt-default, .listed, .inv-box, .yes-topheader a, .header-soc a, nav.mobile ul li a, .foot-col a {
	font-family: 'kanit', sans-serif; text-align: left; letter-spacing: .25px; 
}

.txt-default {
	font-size: 15px; color: #fff; 
}

.title, .subtitle {
	text-transform: uppercase; color: #fff; 
}

.title {
	font-size: 30px; font-weight: 500;
}

.subtitle {
	font-size: 22px; font-weight: 400;
}

/* buttons / links / <a> / ctas */
.btnclass {
	position: relative; padding: 13px 36px; border-radius: 32px; 
	display: flex; justify-content: center; align-items: center; 
	font-family: 'kanit', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; 
	background: #f7c117; color: #000; transition: .3s ease all; 
}
.btnclass:hover { opacity: .8; }

.listed, .foot-col a, .yes-topheader a, .header-soc a, nav.mobile ul li a {
	position: relative; padding: 6px; 
	display: flex; justify-content: center; align-items: center; 
	font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; 
	color: #fff; transition: .3s ease all; 
}
.listed i, .header-soc a i, .yes-topheader a i, .foot-col a i, nav.mobile ul li a i { 
	color: #f7c117; margin-right: 8px; transition: .3s ease all; 
}
.listed:hover, .header-soc a:hover, .yes-topheader a:hover, .foot-col a:hover, nav.mobile ul li a:hover { 
	color: #f7c117; 
}
.listed:hover i, .header-soc a:hover i, .yes-topheader a:hover i, .foot-col a:hover i, nav.mobile ul li a:hover i { 
	color: #fff; 
}

.titled-link {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; 
}
.titled-link, .titled-link .title, .titled-link i { transition: .2s ease all; }
.titled-link .title, .titled-link .subtitle, .titled-link i { text-shadow: 1px 1px 0 #000; }
.titled-link .subtitle {}
.titled-link div {
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center; 
}
.titled-link .title { display: inline; }
.titled-link i { display: inline; font-size: 28px; color: #f7c117; margin-left: 16px; }
a.titled-link:hover .title { color: #f7c117; transition: .35s ease all; }
a.titled-link:hover i { margin-left: 32px; transition: .35s ease all; }

.invisilink {
	font-family: 'kanit', sans-serif; font-size: inherit; font-weight: inherit; 
	line-height: inherit; letter-spacing: inherit; color: inherit; display: inline; 
}

/*  */
.wide-divider { 
	width: 100%; height: 0px; 
	display: flex; 
}

/* Homepage - default.htm */
.homepage {
	position: relative; width: 100%; padding: 32px max(32px, calc(50% - 900px)); 
	display: flex; align-items: stretch; column-gap: 16px; row-gap: 32px; 
	background: #202020; background-image: url('/siteart/bg-diamond-plate.jpg'); 
	background-size: 24px; background-position: 0% 0%; background-repeat: repeat; 
}

.home-col {
	width: calc(50% - 8px); filter: drop-shadow(0 2px 12px #000); 
	display: flex; flex-direction: column; align-items: stretch; row-gap: 36px; 
}
.mat-col .inv-box { 
	width: 100%; 
	align-items: flex-end; 
}
.yes-invs-holder {
	width: 100%; 
	display: flex; flex-direction: row; align-items: stretch; column-gap: 16px; row-gap: 16px; 
}
.yes-col .inv-box { 
	width: calc(50% - 8px); 
	justify-content: center; align-items: center; 
}
.yes-col a.inv-box:hover { background: #f7c117; }

.inv-box { 
	position: relative; flex-grow: 1; height: 500px; background: #000; 
	display: flex; 
	transition: .3s ease all; 
}
.inv-box:after, .inv-box img {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}
.inv-box:after {
	z-index: 2; content: ""; 
	background: linear-gradient(70deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .4) 10%, rgba(0, 0, 0, 0) 100%); 
}
.inv-box img {
	z-index: 1; object-fit: cover; object-position: center; opacity: .6; 
}
.inv-box > *:not(img) { position: relative; z-index: 3; }

.inv-box span, .inv-box a { text-shadow: 1px 1px 0 #000, 0 0 12px #000; }

.mat-col-col { 
	width: 50%; padding: 12px; 
	display: flex; flex-direction: column; align-items: stretch; 
}
.mat-col .inv-box a { font-size: 19px; padding: 4px 8px; }

.yes-col .inv-box span { 
	font-size: 36px; font-weight: 500; text-align: center; color: #fff; padding: 0 8px; 
	transition: .3s ease all; 
}

.mat-col-col a, .foot-nav a { 
	position: relative; color: #fff; 
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center; 
	transition: .2s ease all; 
}
.mat-col-col a:after, .foot-nav a:after { 
	position: relative; content: "\f178"; width: 24px; margin-left: -16px; opacity: 0; color: #f7c117; 
	font-family: 'Font Awesome 6 Free', icon; font-weight: 900; font-size: 15px; 
	display: flex; justify-content: center; align-items: center; 
	transition: .2s ease all; 
}
.mat-col-col a:hover, .foot-nav a:hover { color: #f7c117; }
.mat-col-col a:hover:after, .foot-nav a:hover:after { 
	opacity: 1; transition: .35s ease all; 
}
.mat-col-col a:hover:after { margin-left: 8px; }

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

.txt-yellow, .foot-nav a.txt-yellow { color: #f7c117; }

/* forced styles */

/*--------FORM STYLES--------------------*/

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

.yes-footer {
	position: relative; width: 100%; padding: 50px max(8%, calc(50% - 900px)) 70px max(8%, calc(50% - 900px)); background: #000; 
	display: flex; justify-content: space-between; align-items: center; row-gap: 50px; 
}
.yes-footer:after {
	position: absolute; content: ""; z-index: 2; bottom: 0; left: 0; width: 100%; height: 20px; background: #f7c117; 
	clip-path: polygon(0% 100%, 50% 0%, 100% 100%); 
}
.foot-col {
	position: relative; z-index: 3; 
	display: flex; flex-direction: column; justify-content: center; 
}
.foot-nav, .foot-soc-soc { align-items: flex-start; }
.foot-nav a:after { margin-right: 28px; }
.foot-nav a:hover:after { margin-left: 12px; margin-right: 0; }
.foot-soc { align-items: center; }
.foot-logo-div { align-items: flex-end; width: min(100%, 220px, 70vw); }
.foot-logo-div a { padding: 0; width: min(100%, 220px, 70vw); }
.foot-logo-div img {
	width: min(100%, 220px, 70vw); height: auto; object-fit: contain; object-position: center; 
}

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

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

@media only screen and (max-width: 1450px) {
	.yes-col .inv-box span { font-size: 32px; }
}

@media only screen and (max-width: 1400px) {
	.listed, .foot-col a, .yes-topheader a, .header-soc a { font-size: 16px; }
}

@media only screen and (max-width: 1350px) {
	.header-soc { padding-left: 8px; padding-right: 8px; }
	
	.yes-col .inv-box span { font-size: 28px; }
	
	.yes-footer { padding-left: 5%; padding-right: 5%; }
}

@media only screen and (max-width: 1300px) {
	.header-soc a { font-size: 15px; }
}

@media only screen and (max-width: 1200px) {
	.yes-header { padding-left: 1.5%; padding-right: 1.5%; }
	.header-soc a { font-size: 14px; }
	
	.home-col { row-gap: 20px; }
	.yes-col .inv-box span { font-size: 28px; }
	
	.yes-footer { padding-left: 3%; padding-right: 3%; }
}

/* desktop only */
@media only screen and (min-width: 1151px) {
	.yes-topheader { display: none!important; }
	.mobile-nav-div { display: none!important; }
}

/* switch to mobile nav */
@media only screen and (max-width: 1150px) {
	.header-soc, .header-right { display: none!important; }
	
	.homepage { flex-direction: column-reverse; }
	.home-col { width: 100%; }
	.inv-box { height: 280px; }
	.mat-col-col { padding-top: 10px; padding-bottom: 11px; }
	.mat-col .inv-box a { padding-top: 5px; padding-bottom: 5px; }
}

@media only screen and (min-width: 751px) and (max-width: 1150px) {
	.header-logo-div { order: 1; }
	.yes-topheader { order: 2; }
	.mobile-nav-div { order: 3; }
}

@media only screen and (max-width: 1000px) {
	.title { font-size: 25px; }
	.subtitle { font-size: 20px; }
	
	.yes-footer { flex-wrap: wrap; }
	.foot-soc { order: 1; }
	.foot-logo-div { order: 2; }
	.foot-nav { order: 3; width: 100%; align-items: center; }
	.foot-nav a { text-align: center; }
	.foot-nav a, .foot-soc a { min-height: 50px; }
	.foot-nav a:after, .foot-nav a:hover:after { margin-right: 0; }
}

@media only screen and (max-width: 750px) {
	.yes-header { flex-wrap: wrap; padding-top: 0; padding-bottom: 8px; }
	.yes-topheader, .yes-topheader a { width: 100%; }
}

@media only screen and (max-width: 650px) {
	.yes-invs-holder { flex-direction: column; }
	.yes-col .inv-box { width: 100%; height: 200px; }
	.yes-col .inv-box span { font-size: 24px; }
	.mat-col .inv-box { height: unset; flex-direction: column; }
	.mat-col-col { width: 100%; }
	.mat-col-tall { padding-top: 12px; padding-bottom: 0; }
	.mat-col-small { padding-top: 0; }
	
	.yes-footer { flex-direction: column; }
	.foot-soc, .foot-soc-soc, .foot-logo-div { align-items: center; }
	.foot-soc a { text-align: center; }
}

@media only screen and (max-width: 500px) {
	
	.titled-link div { display: inline; }
	
	.homepage { padding-left: 3%; padding-right: 3%; }
	
	.yes-col .inv-box { height: 180px; }
}

@media only screen and (max-width: 450px) {
	.header-logo-div { width: 100%; }
	.header-logo-div img { width: min(80vw, 200px); }
	.mobile-nav-div { width: 100%; display: flex; justify-content: stretch; }
}

@media only screen and (max-width: 300px) {
	.header-logo-div img { width: 90vw; }
}