﻿/***** 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:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; }

/*-------- BODY STYLES --------*/
body {

}

a:link, a:visited, a:active { text-decoration: none; } 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 {  }

.bills-header {
	position: relative; z-index: 1004; padding: 0px max(max(0px, calc(2vw - 20px)), calc(50% - 1000px)) 0px max(2vw, calc(50% - 1000px)); background-image: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .4) 30%, rgba(0, 0, 0, 0) 100%); 
	display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; margin-bottom: -137px; 
}
.header-logo { filter: drop-shadow(1px 1px 0 #000) drop-shadow(0 0 16px #000) drop-shadow(0 0 24px #000); margin-top: 12px; }
.header-logo img { width: auto; height: 120px; object-fit: contain; object-position: 0% 50%; }
.header-right { 
	display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; 
	filter: drop-shadow(1px 1px 0 #000) drop-shadow(0 0 16px #000) drop-shadow(0 0 24px #000); 
}
.header-soc, .nav-div { display: flex; flex-direction: row; justify-content: flex-end; align-items: stretch; }
.header-soc { column-gap: 8px; height: 50px; }
.header-soc a { color: #d4cfc9; padding: 0 20px; font-size: 16px; }
.header-soc a:hover { color: #fff!important; }
.nav-div { height: 70px; padding-right: 24px; }

/* Site Colors: 
	Lightest Green: #e0f3ea; 
							--> Logo Green: #25a867; rgba(37, 168, 103, 1); <--
	Darker Green: #145b38; rgba(20, 91, 56, 1); 
	Darkest Green: #0c3a23; 

	Lightest Brown: #d4cfc9; 
							--> Lighter Brown: #553f28; <--
	Darker Brown: #2f1500; 
	Darkest Brown: #1c0d00; 
*/
/*---BODY--------------------------------*/
/* Text / Titles / Paragraphs / <h1><h2><h3><h4> / <p> */
.txt-default, .content-sect p {
	font-family: 'darkmode-off', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; 
	text-align: left; letter-spacing: .2px; color: #2f1500; 
}

.title {
	font-family: 'kranto-display-semicondensed', sans-serif; font-weight: 800; line-height: 1.3; font-style: italic; 
	text-align: left; letter-spacing: .2px; color: #2f1500; position: relative; 
}
h1.title, .lg-title, h2.lg-title, h3.lg-title, h4.lg-title { font-size: 42px; }
h2.title, h3.title, .med-title, h1.med-title, h3.med-title, h4.med-title { font-size: 36px; }
h4.title, .sm-title, h1.sm-title, h2.sm-title, h3.sm-title, h4.sm-title { font-size: 24px; }

.title.underlined { padding-bottom: 4px; } 
.title.underlined:after { 
	position: absolute; content: ""; bottom: 0; left: calc(0px - 24px); width: min(calc(100% + 48px), 94vw); 
	height: 2px; background: #2f1500; 
}

.title.center-style.underlined { text-align: center; }

/* buttons / links / <a> / ctas */
.btnclass {
	position: relative; padding: 10px 34px; background: #145b38; color: #fff; 
	display: flex; justify-content: center; align-items: center; 
	font-family: 'kranto-display-semicondensed', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; 
	letter-spacing: 1.3px; text-transform: uppercase; font-style: italic; text-shadow: 1px 1px 0 rgba(0, 0, 0, .4); 
	box-shadow: 0 2px 16px rgba(0, 0, 0, .2); transition: .35s ease all; 
}
a.btnclass:hover, button.btnclass:hover, input.btnclass:hover .btnclass.hvr-yes:hover { background: #0c3a23; letter-spacing: 2.5px; }
.btnclass.btn-brown { background: #553f28; }
a.btnclass.btn-brown:hover, button.btnclass.btn-brown:hover, input.btnclass.btn-brown:hover .btnclass.btn-brown.hvr-yes:hover { background: #2f1500; }

.listed {
	display: flex; justify-content: center; align-items: center; 
	font-family: 'kranto-display-semicondensed', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; 
	color: #145b38; letter-spacing: .5px; transition: .35s ease all; 
}
.listed i { width: 22px; text-align: center; margin-right: 10px; }
.listed span { display: inline; }
a.listed:hover, a.titled-listed:hover .listed { color: #0c3a23; }

.titled-listed {
	position: relative; 
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; row-gap: 4px; 
}
.titled-listed .title { 
	font-family: 'kranto-display-semicondensed', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; 
	font-style: italic; text-align: left; letter-spacing: .2px; text-transform: uppercase; color: #2f1500; 
}
.titled-listed .listed { padding: 12px; }

.invisilink {
	font-family: inherit; font-size: inherit; font-weight: inherit; 
	line-height: inherit; letter-spacing: inherit; color: inherit; display: inline; 
}

/* sections */
.content-sect, .subhero { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; row-gap: 16px; }
.content-sect.center-style { align-items: center; justify-content: center; }

.content-sect .title, .content-sect p { width: 100%; }
.content-sect .title { margin-bottom: 8px; }
.content-sect p { width: 100%; }

.content-sect:not(.center-style) .title.underlined:after { width: calc(100% + 24px); }

.horiz-sect { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; column-gap: 24px; row-gap: 24px; }
.horiz-sect.center-style, .content-sect.center-style .horiz-sect { justify-content: center; }

.mission {
	position: relative; width: 100%; padding: 50px max(40px, calc(50% - 1000px)); 
	display: flex; align-items: center; row-gap: 50px; 
}
.mission .content-sect, .mission .missionimg, .mission .map-div, .mission .mission-slider { position: relative; width: 50%; }
.mission > div:first-of-type { width: calc(50% - 60px); margin-right: 60px; }
.mission .content-sect { padding-left: 24px; }

.missionimg, .mission-slider, .mission-slider .slick-list, .mission-slider .slick-track, .map-div iframe { height: 400px; }

.missionimg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.mission-slider { overflow: hidden; }
.mission-slider img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.map-div iframe { margin-bottom: 0; }

/* Homepage - default.htm */
.hero, .subhero {
	position: relative; width: 100%; padding: 240px max(8%, calc(50% - 800px)); background: #000; 
}
.hero:before, .hero:after {
	position: absolute; z-index: 2; content: ""; left: 0; 
}
.hero:before { top: 0; width: 40%; height: 100%; background-image: linear-gradient(90deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 100%); }
.hero:after { bottom: 0; width: 100%; height: 25%; background-image: linear-gradient(0deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, 0) 100%); }
.hero > img, .subhero > img {
	position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; 
	object-fit: cover; object-position: center; 
}
.hero > *:not(img), .subhero > *:not(img) { position: relative; z-index: 3; }

.hero .hero-overlay { filter: drop-shadow(0 0 24px #000); }

.hero .title, .subhero .title, .hero p, .subhero p { color: #fff; text-shadow: 1px 1px 0 #000, 0 0 20px #000; }
.hero p { font-size: 18px; font-weight: 600; max-width: 400px; }

.hero .inv-btns-sect { position: absolute; bottom: 0; left: 0; padding-bottom: 24px; }

.inv-btns-sect {
	width: 100%; padding-left: max(2.5%, calc(50% - 950px)); padding-right: max(2.5%, calc(50% - 950px)); 
	display: flex; justify-content: center; align-items: stretch; 
}
.inv-btn {
	position: relative; width: 33.333333%; padding: 26px 20px; margin: 14px; 
	display: flex; justify-content: flex-start; align-items: center; 
	background: rgba(20, 91, 56, .5); border: 4px solid #25a867; transition: .35s ease all; 
}
.inv-btn:after {
	position: absolute; z-index: 2; content: ""; top: 0; left: 0; width: 100%; height: 100%; 
	background: #21975d; opacity: .62; transition: .35s ease all; 
}
.inv-btn img {
	position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; 
	object-fit: cover; object-position: 100% 50%; filter: brightness(.98); transition: .35s ease all; 
}
.inv-btn .title { 
	position: relative; z-index: 3; 
	font-size: 27px; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 16px #145b38, 0 0 24px #000; 
	text-transform: uppercase; letter-spacing: 2px; transition: .35s ease all; 
}
a.inv-btn:hover { background: rgba(20, 91, 56, 1); }
a.inv-btn:hover:after { opacity: 0; }
a.inv-btn:hover img { filter: brightness(.9); }

.homepage {}

/* subpages */
.subhero { position: relative; width: 100%; padding-bottom: 40px; }

.subpages { width: 100%; position: relative; display: flex; }

/* about-us.htm */
.aboutpage {}

/* recommended styles */
.bg-lgreen { background: #e0f3ea; }

.center-style, .center-style .title, .center-style .subtitle, .center-style p, 
.title.center-style, .subtitle.center-style, p.center-style { text-align: center; }

/* forced styles */
.txt-bold, .listed.txt-bold, .listed .txt-bold { font-weight: 800!important; }

/*--------FORM STYLES--------------------*/


/*-------- FOOTER STYLES ----------------*/
footer {  }

.bills-footer {
	display: flex; flex-direction: column; align-items: stretch; 
}
.scrolling-sect {
	position: relative; background: #d4cfc9; padding: 70px 0; 
	display: flex; flex-direction: column; align-items: center; row-gap: 24px; 
}
.scrolling-sect .title { margin: 0 5%; }
.scrolling-inv-wrapper { 
	position: relative; width: 100%; height: 90px; box-sizing: content-box; border-bottom: 12px solid #2f1500; overflow: hidden; 
}
.scrolling-inv-wrapper iframe { width: 100%; }
.foot-main { 
	background: #2f1500; padding: 50px max(7%, calc(50% - 900px)) 40px max(7%, calc(50% - 900px)); 
	display: flex; flex-direction: column; align-items: center; row-gap: 50px; 
}
.foot-logo-soc { 
	width: min(100%, 1600px); margin: 0 auto; 
	display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; row-gap: 36px; 
}
.foot-logo img { width: auto; height: 120px; object-fit: contain; object-position: center; }
.foot-soc { 
	width: min(calc(100% - 400px), 940px); padding: 12px 40px; background: #145b38; box-shadow: 0 2px 16px #000; 
	display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; row-gap: 24px; 
}
.foot-soc .titled-listed .title { color: #d4cfc9; }
.foot-soc .listed { color: #fff; }
.foot-soc .titled-listed:hover .listed { opacity: .8; color: #fff; }
.foot-nav { 
	display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 12px; 
}
.foot-nav a {
	position: relative; padding: 12px 36px; color: #fff; 
	display: flex; justify-content: center; align-items: center; 
	font-family: 'kranto-display-semicondensed', sans-serif; font-size: 17px; font-weight: 700; line-height: 1.3; 
	letter-spacing: .5px; text-align: center; transition: .35s ease all; 
}
.foot-nav a:hover { opacity: .8; }
.foot-copyright {
	background: #1c0d00; padding: 16px 5%; 
	display: flex; justify-content: center; align-items: center; 
}
.foot-copyright p { font-size: 14px; color: #d4cfc9; text-align: center; }
.foot-copyright p a.invisilink:hover { color: #fff; }

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.inv-foot-spacer { width: 100%; height: 100px; background: #1c0d00; }

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (min-width: 1751px) {
	.missionimg, .mission-slider, .mission-slider .slick-list, .mission-slider .slick-track { height: 500px; }
	.map-div iframe { height: 450px; }
}

@media only screen and (max-width: 1510px) {
	.foot-nav a { padding-left: 32px; padding-right: 32px; }
}

@media only screen and (min-width: 1501px) {
	.missionimg, .mission-slider, .mission-slider .slick-list, .mission-slider .slick-track { height: 450px; }
}

@media only screen and (max-width: 1500px) {
	.foot-soc { padding-left: 32px; padding-right: 32px; }
}

@media only screen and (max-width: 1450px) {
	.foot-main { padding-left: 3.5%; padding-right: 3.5%; }
	.foot-nav { column-gap: .7vw; }
}

@media only screen and (max-width: 1400px) {
	.foot-nav a { padding-left: 28px; padding-right: 28px; }
}

@media only screen and (max-width: 1300px) {
	.nav-div { padding-right: 4px; }
	
	h1.title, .lg-title, h2.lg-title, h3.lg-title, h4.lg-title { font-size: 40px; }
	h2.title, h3.title, .med-title, h1.med-title, h3.med-title, h4.med-title { font-size: 32px; }
	h4.title, .sm-title, h1.sm-title, h2.sm-title, h3.sm-title, h4.sm-title { font-size: 22px; }
	
	.title.underlined:after { height: 1px; }
	
	.inv-btn { margin: 10px; }
	.inv-btn .title { font-size: 24px; }
	
	.foot-logo img { height: 108px; }
	.foot-soc { width: calc(100% - 360px); }
	.foot-nav { column-gap: 0; }
}

@media only screen and (max-width: 1260px) {
	.foot-nav { width: min(100%, 800px); }
}

@media only screen and (max-width: 1250px) {
	.bills-header { margin-bottom: -125px; }
	.header-logo img { height: 108px; }
	.nav-div { height: 64px; }
	
	.mission { padding-left: 24px; padding-right: 24px; }
	.mission > div:first-of-type { width: calc(50% - 40px); margin-right: 40px; }
	
	.hero { padding-top: 200px; }
	
	.foot-logo-soc { flex-direction: column; align-items: center; }
	.foot-soc { width: min(100%, 850px); height: 120px; }
}

@media only screen and (max-width: 1200px) {
	h2.title, h3.title, .med-title, h1.med-title, h3.med-title, h4.med-title { font-size: 28px; }
}

/* switch to mobile nav */
@media only screen and (max-width: 1150px) {
	.mission { flex-direction: column; padding-left: 5%; padding-right: 5%; }
	.mission > div { width: 100%!important; margin-right: 0!important; }
	.mission > .content-sect { padding-right: 24px; }
	.mission > .content-sect .title.underlined:after { width: calc(100% + 48px); }
	
	.inv-btn { margin: 8px; }
	
	.aboutpage.mission { flex-direction: column-reverse; }
}

@media only screen and (max-width: 1120px) {
	.hide1120 { display: none!important; }
	
	.bills-header { background-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .6) 60%, rgba(0, 0, 0, 0) 100%); }
	.header-soc { column-gap: 0; }
	
	.subhero { padding-top: 180px; padding-bottom: 24px; }
}

@media only screen and (max-width: 1050px) {
	.inv-btn .title { font-size: 20px; }
	
	.hero { padding-bottom: 200px; }
}

@media only screen and (max-width: 1020px) {
	.foot-nav { width: min(100%, 750px); }
	.foot-nav a { padding-left: 24px; padding-right: 24px; }
}

@media only screen and (max-width: 880px) {
	.hide880 { display: none!important; }
}

@media only screen and (max-width: 800px) {
	.hero { padding-bottom: 550px; }
	.hero:after { bottom: 350px; height: 240px; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }
	.hero > img { height: calc(100% - 350px); }
	.inv-btns-sect { flex-direction: column; align-items: center; }
	.inv-btn { width: 82%; min-height: 135px; padding: 32px 24px; margin: 6px 0; }
	.inv-btn .title { font-size: 24px; }
	.inv-btn img { width: 80%; }
}

@media only screen and (max-width: 850px) {
	.foot-soc { flex-direction: column; width: unset; height: unset; padding-top: 20px; padding-bottom: 20px; }
}

@media only screen and (max-width: 800px) {
	.hero, .subhero { padding-left: 5%; padding-right: 5%; }
}

@media only screen and (max-width: 750px) {
	.hide750 { display: none!important; }
	
	.bills-header { margin-bottom: -105px; }
	.header-logo { margin-top: 8px; }
	.header-logo img { height: 92px; }
	.header-soc { display: none!important; }
	.nav-div { height: 104px; }
	
	h1.title, .lg-title, h2.lg-title, h3.lg-title, h4.lg-title { font-size: 36px; }
	h2.title, h3.title, .med-title, h1.med-title, h3.med-title, h4.med-title { font-size: 24px; }
	h4.title, .sm-title, h1.sm-title, h2.sm-title, h3.sm-title, h4.sm-title { font-size: 20px; }
	
	.mission > .content-sect { padding-left: 0; padding-right: 0; }
	.mission > .content-sect .title.underlined:after { width: calc(100% + 24px); left: -12px; }
	
	.hero > img, .subhero > img { filter: brightness(.9); }
	.hero-overlay, .subhero { align-items: center; }
	.hero-overlay .title, .hero-overlay p, .subhero .title, .subhero p { text-align: center; }
}

@media only screen and (max-width: 700px) {
	.inv-btns-sect { padding-left: 5%; padding-right: 5%; }
	.inv-btn { width: 100%; }
}

@media only screen and (max-width: 650px) {
	h1.title, .lg-title, h2.lg-title, h3.lg-title, h4.lg-title { font-size: 32px; }
	
	.foot-nav { flex-direction: column; }
}

@media only screen and (max-width: 600px) {
	.hero { padding-bottom: 500px; }
	.hero > img { height: calc(100% - 250px); }
	.hero:after { bottom: 250px; }
	.inv-btn { padding: 26px 20px; min-height: 120px; }
	.inv-btn .title { font-size: 22px; }
}

@media only screen and (max-width: 500px) {
	.missionimg, .mission-slider, .mission-slider .slick-list, .mission-slider .slick-track, .map-div iframe { height: 350px; }
}

@media only screen and (max-width: 450px) {
	.header-logo img { max-width: calc(88vw - 124px); }
	
	.btnclass { width: 100%!important; margin-left: auto!important; margin-right: auto!important; padding-left: 16px; padding-right: 16px; }
	
	.mission > .content-sect .title.underlined:after { width: 100%; left: 0; }
	
	.inv-btn img { width: 100%; }
	
	.foot-logo img { max-width: 80vw; }
	.foot-soc { padding-left: 5%; padding-right: 5%; width: 107%; margin-left: -3.5%; margin-right: -3.5%; }
	.foot-nav a { width: 100%; padding: 14px 0; }
}

@media only screen and (max-width: 400px) {
	.btnclass { padding-left: 8px; padding-right: 8px; }
	
	.missionimg, .mission-slider, .mission-slider .slick-list, .mission-slider .slick-track, .map-div iframe { height: 300px; }
}

@media only screen and (max-width: 380px) {
	.mission-slider { margin-bottom: 64px; overflow: visible; }
}

@media only screen and (min-width: 351px) {
	.show350 { display: none!important; }
}

@media only screen and (max-width: 340px) {
	.hero { padding-bottom: 450px; }
	.inv-btn .title { font-size: 18px; }
}






