﻿/***** 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 --------*/
html { scroll-behavior: smooth; }
body {}

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; }

.elk-header, header.elk-header { position: relative; z-index: 1004; width: 100%; display: flex; flex-direction: column; align-items: stretch; }
.header-main { position: relative; z-index: 2; padding: 0 max(3.5%, calc(50vw - 1000px)) 0 max(0px, calc(3.5% - 60px), calc(50vw - 1000px)); background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .175); display: flex; justify-content: space-between; align-items: stretch; }

.header-logo, .header-logo img { width: 250px; height: 120px; }
.header-logo { display: flex; justify-content: center; align-items: center; }
.header-logo img { padding: 4px 20px 8px 20px; object-fit: contain; object-position: center; opacity: 1; transition: .15s ease all; }
a.header-logo:hover img { opacity: .8; transition: .35s ease all; }

.nav-div { position: relative; z-index: 5; margin-right: auto; display: flex; justify-content: flex-start; align-items: stretch; }

.header-right { margin-left: auto; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* toggled inventory search */
.search-is-open i { font-size: 20px; }
.search-is-open i:before { content: "\f00d"; }

#toggled-search-sect-parent { position: absolute; z-index: 1; top: 100%; right: max(calc(3.5% - 28px), 20px, calc(50vw - 1028px)); width: min(100%, 310px); padding: 20px 12px; display: flex; justify-content: center; align-items: center; background: var(--lgray); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
#toggled-search-sect-parent form { display: flex; justify-content: center; align-items: center; }
#toggled-search-sect-parent form input[type="text"] { width: 260px; height: 50px; color: #000; font-family: 'paralucent', sans-serif; font-size: 15px; padding: 8px 20px; box-sizing: border-box; background: #fff; border: 1px solid var(--mgray); outline: none!important; border-radius: 25px; }
#toggled-search-sect-parent form input[type="text"]:focus { border-color: #777; outline: none!important; }
#toggled-search-sect-parent form button[type="submit"] { position: relative; margin-left: -50px; width: 50px; height: 50px; border-radius: 26px; border: none; }
#toggled-search-sect-parent form button[type="submit"]:hover { background: var(--lorange); color: #fff; }

/* Site Colors: */
:root {
	--orange: #ec5d22; 	/* 	var(--orange); 	 */
	--lorange: #ec5d22; /* 	var(--lorange);  */
	--dorange: #ce4b12; /* 	var(--dorange);  */
	--lgray: #f4f4f4; 	/* 	var(--lgray); 	 */
	--mgray: #bbb; 		/* 	var(--mgray); 	 */
}
/*---BODY--------------------------------*/
.invisilink, a, p a { 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, a:hover, p a:hover { color: var(--lorange); text-decoration: underline; }
.darkmode a.invisilink:hover, a.invisilink.darkmode:hover, a:hover, p a:hover { color: var(--lorange); }

/* Text / Titles / Paragraphs / <h1><h2><h3><h4> / <p> */

.elkpage { font-family: 'paralucent', sans-serif; font-size: 17px; font-weight: 300; line-height: 1.7; letter-spacing: .6px; }

.txt-sm { font-size: 15px; line-height: 1.4; }

.title, .title-lg, .title-med, .title-sm { font-family: 'paralucent', sans-serif; font-weight: 400; line-height: 1.15; width: 100%; text-transform: uppercase; }

.title-lg, .title.title-lg { font-size: 54px; }
.title-med, .title.title-med { font-size: 26px; }
.title, .title-sm, .title.title-sm { font-size: 24px; }

.overline, .underline { position: relative; }
.overline:before, .underline:before { position: absolute; pointer-events: none; content: ""; background: var(--lorange); width: 60px; height: 5px; left: 0; }

.overline.ta-c:before, .underline.ta-c:before { left: 50%; transform: translateX(-50%); }

.overline:before { top: -14px; }

.underline:before { bottom: -14px; }

/* buttons / links / <a> / ctas */
.btnclass { position: relative; min-width: 50px; min-height: 50px; background: #000; color: #fff; text-shadow: none; font-size: 16px; line-height: 1.2; display: flex; justify-content: center; align-items: center; column-gap: 14px; cursor: pointer; transition: .35s ease all; text-decoration: none; }

.btnclass:not(.btn-oline-orange) { padding: 8px 22px; font-size: 17px; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; }
.btnclass:not(.btn-oline-orange):after { position: relative; margin-left: 6px; font-family: 'Font Awesome 6 Free', icon; font-weight: 900; content: "\f105"; font-size: 15px; }

.btnclass:hover, .darkmode .btnclass:hover, .shadowed .btnclass:hover { background: var(--lorange); color: #fff; text-shadow: none; text-decoration: none; }

.btn-white, .btnclass.btn-white { background: var(--lgray); color: #000; }

.btn-oline-orange, .btnclass.btn-oline-orange { text-align: center; padding: 8px 20px; font-weight: 600; letter-spacing: .25px; background: none; color: #000; border: 2px solid var(--lorange); width: 256px; }
.btn-oline-orange:hover, .btnclass.btn-oline-orange:hover { background: var(--lorange); color: #000; border-color: var(--lorange); }

.icon-link { position: relative; min-width: 50px; min-height: 50px; color: #000; text-shadow: none; font-size: 18px; display: flex; justify-content: center; align-items: center; column-gap: 14px; cursor: pointer; transition: .2s ease all; text-decoration: none!important; }
.icon-link i { font-size: 26px; }

a.icon-link:hover { color: var(--lorange); }

.icon-bubble { background: var(--dorange); color: #fff; border-radius: 20px; position: relative; min-width: 40px; min-height: 40px; text-shadow: none; font-size: 16px; display: flex; justify-content: center; align-items: center; column-gap: 14px; cursor: pointer; transition: .2s ease all; text-decoration: none!important; }
.icon-bubble i { font-size: 16px; }
a.icon-bubble:hover { background: var(--lorange); color: #fff; }

.bubble-black, .icon-bubble.bubble-black { background: #000; color: #fff; }
a.bubble-black:hover, a.icon-bubble.bubble-black:hover { background: var(--lorange); color: #fff; }

/* sections */
.f-row { display: flex; flex-direction: row; }
.f-col { display: flex; flex-direction: column; align-items: flex-start; }

.f-wrap, .fw-w { flex-wrap: wrap; }

.jc-c { justify-content: center; }
.jc-fs { justify-content: flex-start; }
.jc-sb { justify-content: space-between; }

.ai-c { align-items: center; }
.ai-fe { align-items: flex-end; }
.ai-fs { align-items: flex-start; }
.ai-s { align-items: stretch; }

.ac-c { align-content: center; }

img.img-contain { object-fit: contain; }

.mission .missionimg img.img-contain { position: relative; width: 100%; height: auto; max-height: 600px; object-fit: contain; }

/* Homepage - default.htm */
.homepage, .subpage { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.homepage {}

.hero { position: relative; width: 100%; padding: 80px max(3.5%, calc(50vw - 1000px)) 170px; background: #000; display: flex; justify-content: flex-start; align-items: center; }
.hero:before, .hero:after { position: absolute; content: ""; background: var(--lgray); height: 110px; bottom: -1px; right: 0; }
.homepage .hero, .hero.homepage { padding-top: 130px; padding-bottom: 240px; }
/*.homepage .hero:before, .hero.homepage:before, .homepage .hero:after, .hero.homepage:after { height: 120px; }*/
.hero:before { z-index: 2; opacity: .5; width: 25%; clip-path: polygon(0% 100%, 100% 0%, 100% 100%); }
.hero:after { z-index: 3; opacity: 1; width: 100%; clip-path: polygon(0% 0%, 100% 100%, 0% 100%); }

.hero > img, .bg-img > img { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero > img { opacity: .7;}

.hero-overlay { position: relative; z-index: 5; }

.inv-cats-holder { position: relative; width: min(100%, 1500px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 36px; }

.inv-cat { position: relative; width: calc(33.333333% - 24px); max-width: 360px; padding: 36px 32px; background: var(--lgray); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; text-align: center; transition: .2s ease all; border: 1px solid var(--lgray); }

.fill-link { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; }

.inv-cat .fill-link { border-radius: 4px; }

.inv-cat .inv-cat-top { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; pointer-events: none; }
.inv-cat .title { color: #000; transition: .2s ease all; }
.inv-cat .title, .inv-cat .txt-sm { pointer-events: none; }
.inv-cat .title a, .inv-cat .txt-sm a { pointer-events: all; }

.inv-cat .inv-cat-bottom { position: relative; z-index: 2; background: #000; display: flex; pointer-events: none; }

.inv-cat img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: center; transition: .2s ease all; }

.inv-cat .hover-txt { position: absolute; z-index: 2; opacity: 0; padding: 12px; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; width: 100%; height: 100%; text-shadow: 0 0 10px rgba(0, 0, 0, .5); text-transform: uppercase; transition: .2s ease all; font-size: 17px; letter-spacing: .25px; }
.inv-cat .hover-txt:after { position: relative; margin-left: 6px; font-family: 'Font Awesome 6 Free', icon; font-weight: 900; content: "\f105"; font-size: 15px; }

.inv-cat:hover { background: #fbfbfb; border-color: var(--mgray); /*box-shadow: 0 2px 8px rgba(0, 0, 0, .2);*/ transition: .3s ease all; }
.inv-cat:hover img { filter: brightness(.3); transition: .3s ease all; }
.inv-cat:hover .title { color: var(--lorange); transition: .3s ease all; }
.inv-cat:hover .hover-txt { /*color: var(--lorange);*/ opacity: 1; transition: .3s ease all; }
.hover-txt:hover { transition: .2s ease all; }

/* subpages */
.subpage {}

/* contact.htm */
.contactpage {}

.lg-map, .width100 { width: 100%; }

.sm-locs-holder { position: relative; width: 100%; margin-top: 12px; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 32px; }

.sm-loc { width: min(50%, 400px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 24px; }

.sm-loc a:hover { text-decoration: none; }

/* locations.htm */
.locationspage {}

.indilocs-holder { position: relative; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }

.indiloc { position: relative; width: min(100%, 1400px); padding: 40px 6%; display: flex; justify-content: center; align-items: flex-start; border-bottom: 1px solid var(--mgray); }
.indiloc:first-child { padding-top: 0; }

.indiloc .map-div { position: relative; width: 50%; height: 320px; }

.map-div iframe { width: 100%; height: 100%; background: var(--lgray); border: 1px solid var(--lgray); border-radius: 4px; }

.indiloc-content { position: relative; width: 50%; padding: 40px 0 40px 6%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; text-align: center; }
.indiloc-content a:hover { text-decoration: none; }

#contactForm, #Somerset, #Friedens { scroll-margin-top: 60px; }
#Somerset {}
#Friedens {}

/* thank-you.htm */
.thankyoupage {}

/* recommended styles */
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-l { text-align: left; }

.txt-white, 
.darkmode, 
.shadowed { color: #fff; }

.shadowed { color: #fff; filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .5)); }

.txt-orange { color: var(--orange); }
.txt-lorange { color: var(--lorange); }
.txt-dorange { color: var(--dorange); }
.txt-lgray { color: var(--lgray); }
.txt-mgray { color: var(--mgray); }
.txt-black { color: #000; }

.bg-orange { background: var(--orange); }
.bg-lorange { background: var(--lorange); }
.bg-dorange { background: var(--dorange); }
.bg-lgray { background: var(--lgray); }
.bg-mgray { background: var(--mgray); }
.bg-white { background: #fff; }
.bg-black { background: #000; }

.bora-sm { border-radius: 4px; }

.bg-img { position: relative; }
.bg-img > *:not(img), .z3 { position: relative; z-index: 3; }

.width50 { width: 50%; }
.width100 { width: 100%; }

.padtb-20 { padding-top: 20px; padding-bottom: 20px; }
.padtb-40 { padding-top: 40px; padding-bottom: 40px; }
.padtb-50 { padding-top: 50px; padding-bottom: 50px; }
.padtb-70 { padding-top: 70px; padding-bottom: 70px; }

.padt-70 { padding-top: 70px; }

.padlr-norm { padding-left: max(3.5vw, calc(50vw - 1000px)); padding-right: max(3.5vw, calc(50vw - 1000px)); }

.margtb-12 { margin-top: 12px; margin-bottom: 12px; }

.margt-neg40 { margin-top: -40px; }
.margt-60 { margin-top: 60px; }
.margt-70 { margin-top: 70px; }

.margb-neg40 { margin-bottom: -40px; }
.margb-neg16 { margin-bottom: -16px; }
.margb-16 { margin-bottom: 16px; }
.margb-20 { margin-bottom: 20px; }
.margb-40 { margin-bottom: 40px; }
.margb-60 { margin-bottom: 60px; }
.margb-70 { margin-bottom: 70px; }

.marglr-auto { margin-left: auto; margin-right: auto; }

.gap-5, .gap5 { gap: 5px; }
.gap-24 { gap: 24px; }

.colgap-5 { column-gap: 5px; }
.colgap-24 { column-gap: 24px; }
.colgap-60 { column-gap: 60px; }
.colgap-lg { column-gap: min(200px, 10vw); }

.rowgap-16 { row-gap: 16px; }
.rowgap-24 { row-gap: 24px; }
.rowgap-24 { row-gap: 24px; }
.rowgap-32 { row-gap: 32px; }
.rowgap-40 { row-gap: 40px; }
.rowgap-50 { row-gap: 50px; }

/* forced styles */
.txt-reg { font-weight: 300!important; }
.txt-semibold { font-weight: 400!important; }
.txt-bold { font-weight: 600!important; }

.force-bora-0 { border-radius: 0!important; }

.force-colgap-0 { column-gap: 0!important; }
.force-rowgap-0 { row-gap: 0!important; }

/*-------- FOOTER STYLES ----------------*/
footer {}

.elk-footer, footer.elk-footer { position: relative; width: 100%; background: var(--lgray); display: flex; flex-direction: column; align-items: stretch; }

.foot-logo-sect { position: relative; width: 100%; background: #fff; padding: 66px max(5%, calc(50vw - 800px)); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.foot-logo-sect:before, .foot-logo-sect:after { position: absolute; content: ""; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; }
.foot-logo-sect:before { z-index: 1; background: var(--mgray); width: 92%; height: 2px; top: 57%; }
.foot-logo-sect:after { z-index: 2; background: #fff; width: 620px; height: 100%; top: 50%; }
.foot-logo-sect > * { position: relative; z-index: 3; }

.foot-logo, .foot-logo img { width: 300px; height: auto; }
.foot-logo { display: flex; justify-content: center; align-items: center; }
.foot-logo img { object-fit: contain; object-position: center; opacity: 1; transition: .15s ease all; }
a.foot-logo:hover img { opacity: .7; transition: .35s ease all; }

.foot-main-sect { position: relative; width: 100%; padding: 70px max(9%, calc(50vw - 1000px)); display: flex; align-items: flex-start; }

.foot-half { width: 50%; gap: 10px; }

.foot-follow, .foot-loc { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }

.foot-follow {}

.foot-soc-media { margin-left: -8px; margin-bottom: 8px; }

.foot-contact { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
.foot-contact .title { margin-bottom: 12px; }
.foot-contact a:hover { text-decoration: none; }

.foot-loc { width: calc(50% - 5px); gap: 28px; padding-right: 24px; padding-bottom: 1em;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.inv-foot-spacer { display: flex; width: 100%; height: 80px; background: var(--lgray); }

/* AT styles */
.list.listing { display: flex!important; }

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (min-width: 2001px) {	/* MIND THE MIN-WIDTH */
	
}

@media only screen and (max-width: 1500px) {
	.title-lg, .title.title-lg { font-size: 50px; }
	
	.foot-logo-sect { padding-top: 50px; padding-bottom: 50px; }
	.foot-logo, .foot-logo img { width: 260px; }
	.foot-logo-sect:after { width: 550px; }
}

@media only screen and (max-width: 1450px) {
	.foot-main-sect { padding: 60px 5%; }
}

@media only screen and (max-width: 1350px) {
	.header-logo, .header-logo img { width: 220px; height: 100px; }
	.header-logo img { padding: 2px 20px 7px 20px }
	
	.inv-cats-holder { gap: 28px; }
	.inv-cat { max-width: 350px; padding: 32px 28px; }
}

@media only screen and (max-width: 1300px) {
	.hero { padding-bottom: 150px; }
	.homepage .hero, .hero.homepage { padding-bottom: 210px; }
	.hero:before, .hero:after { height: 90px; }
}

@media only screen and (max-width: 1250px) {
	.title-lg, .title.title-lg { font-size: 46px; }
	.title-med, .title.title-med { font-size: 24px; }
	.title, .title-sm, .title.title-sm { font-size: 22px; }
	
	.txt-sm { font-size: 14px; }
	
	.inv-cats-holder { gap: 20px; }
	
	.foot-logo-sect:before { width: 94%; }
	.foot-logo-sect:after { width: 450px; }
	.foot-contact { justify-content: space-between; }
	.foot-loc { width: 45%; }
}

@media only screen and (max-width: 1200px) {
	.hero:before { width: 30%; }
	
	.indiloc { padding-left: 0; padding-right: 0; }
	.indiloc-content { padding: 24px 5%; }
}

@media only screen and (max-width: 1150px) {
	.header-logo, .header-logo img { width: 200px; }
	
	.foot-logo-sect { padding-top: 40px; padding-bottom: 40px; }
	.foot-logo, .foot-logo img { width: 240px; }
	.foot-logo-sect:after { width: 420px; }
}

@media only screen and (max-width: 1120px) {
	.foot-follow { width: 40%; }
	.foot-contact { width: 60%; }
}

@media only screen and (max-width: 1050px) {
	.inv-cats-holder { gap: 28px; }
	.inv-cat { width: calc(50% - 40px); max-width: 370px; }
}

/* switch to mobile nav */
@media only screen and (max-width: 1000px) {
	.header-main { padding-right: 0; }
	.header-right { order: 2; margin: 0 0 0 auto; gap: 12px; }
	.nav-div { order: 3; margin: 0; }
	#toggled-search-sect-parent { right: 8px; }
	
	.title-med, .title.title-med { font-size: 21px; }
	.title, .title-sm, .title.title-sm { font-size: 19px; }
	
	.inv-cats-holder { gap: 20px; }
}

@media only screen and (max-width: 950px) {
	.foot-main-sect { flex-direction: column; gap: 50px; }
	.foot-follow, .foot-soc-media, .foot-contact { width: 100%; }
	.foot-follow { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
	.foot-soc-media { justify-content: center; margin-left: 0; }
	.foot-loc { align-items: center; padding-right: 0;}
	.foot-half .title, .foot-half a { text-align: center; }
}

@media only screen and (max-width: 900px) {
	.indiloc { flex-direction: column-reverse; align-items: center; }
	.indiloc-content { padding: 0 0 40px 0; width: 100%; }
	.indiloc .map-div { width: 100%; height: 300px; }
	
	.foot-follow .btn-oline-orange { width: calc(33.333333% - 7px); }
}

@media only screen and (max-width: 820px) {
	.foot-follow { flex-direction: column; align-items: center; }
	.foot-follow .btn-oline-orange { width: min(256px, 100%); }
	.foot-loc { width: 100%;}
}

@media only screen and (max-width: 800px) {
	.hero { padding-top: 60px; padding-bottom: 100px; }
	.hero, .hero-overlay { justify-content: center; }
	.hero-overlay *:not(.btnclass) { text-align: center; }
	.hero-overlay .overline:before { left: 50%; transform: translateX(-50%); }
	
	.inv-cats-holder { gap: 16px; }
	.inv-cat { width: calc(50% - 20px); max-width: 370px; }
	
	.foot-logo-sect { padding-top: 32px; padding-bottom: 32px; }
	.foot-logo, .foot-logo img { width: 200px; }
	.foot-logo-sect:after { width: 280px; }
}

@media only screen and (max-width: 780px) {
	.inv-cat { padding: 28px 24px; }
}

@media only screen and (max-width: 750px) {
	.sm-locs-holder { flex-direction: column; }
	.sm-loc { width: 100%; }
}

@media only screen and (max-width: 650px) {
	
}

@media only screen and (max-width: 620px) {
	.inv-cats-holder { gap: 20px; }
	.inv-cat { width: 100%; max-width: min(400px, 90%); }
	.inv-cat img { aspect-ratio: 5 / 3.25; }
}

@media only screen and (max-width: 600px) {
	.sm-locs-holder { flex-direction: column; }
	.sm-loc { width: 100%; }
}

@media only screen and (max-width: 550px) {
	.foot-logo-sect { padding-top: 24px; padding-bottom: 24px; }
	.foot-logo, .foot-logo img { width: min(180px, 75vw); }
	.foot-logo-sect:after { width: min(220px, 80vw); }
}

@media only screen and (max-width: 500px) {
	.homepage .hero, .hero.homepage { padding-top: 100px; padding-bottom: 160px; }
}

@media only screen and (max-width: 380px) {
	.hide380 { display: none!important; }
	
	.header-logo, .header-logo img { width: min(180px, calc(100vw - 80px)); height: 100px; }
	.header-logo img { padding: 2px 4vw 7px 4vw; }
	
	.inv-cats-holder { gap: 14px; }
	.inv-cat { max-width: 100%; padding: 24px 12px; }
}

@media only screen and (max-width: 320px) {
	.hide320 { display: none!important; }
}

@media only screen and (max-width: 300px) {
	.hide300 { display: none!important; }
	
	.btnclass { width: 100%; margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; }
}






