@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600&display=swap');
@import "nav.css";

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

:root{

}
 
html {
	padding: 0px;
	margin: 0px;
	border: 0px;
	scroll-behavior: smooth;
}

body {
	padding: 0px;
	margin: 0px;
	border: 0px;
	font-size: 100%;
	max-width: 100%;
	min-height: 100%;
	background-color: white;
	color: black;
	font-family: Poppins;
	font-weight: 400;
}

body p{
	line-height: 1.8em;	
}

h1 {
	margin: 0 0 1em 0;
	line-height: 1em;
	font-size: clamp(2em, 5vw, 3em);
	color: rgb(67,71,77);
	font-weight: normal;
}

h2 {
	margin: 0;
	font-size: 2em;
	color: black;
	line-height: 1em;
}

h1 + h2 {
	margin-bottom: 1em;
}

h3{
	text-align: center;
	font-size: 1.6em;
	text-decoration: underline;
}

p + h1{
	margin-top: 1em;
}

img {vertical-align: top;}

a{
	color: rgb(197,158,0);
}
a.button{
	display: inline-block;
	background-color: rgba(223,208,169,1.00);
	color: white;
	font-size: 1.6em;
	font-weight: bold;
	padding: .8em 1.5em;
	line-height: 1.1em;
	margin: 1em 0 0 0;
	max-width: 100%;
	text-decoration: none;
}

input,
textarea,
select{
	outline: none;
}
option{color: black;font-size: 1.1em;}
option[disabled]{display: none;}
select:invalid{color: rgb(200,200,200); font-size: 0.9em; padding: 0 0 0 3px; height: 2.2em;}

p{margin-top: 0;}

section{
	padding: clamp(3em, 6.667vw , 8em) 1em;
}


.tbl{display: table}
.tr{display: table-row}
.td{display: table-cell; vertical-align: top;}


/*---------------- HEADER -----------------------------------------*/

.menubar-title{
	display: none;
}

.title{
	position: sticky;
	top: 0;
	background-color: rgba(66,71,77,1.00);
	color: white;
	text-align: center;
	padding: 2.2em 1em;
	z-index: 3;
}

.title img,
.title div,
.title ul{
	vertical-align: middle;
}

.social{
	display: inline-block;
}
.social hr{
	display: inline-block;
	padding: 0;
	margin: 0 1em;
	width: 2px;
	height: 1.8em;
	background-color: white;
	border: none;
	vertical-align: middle;
	filter: sepia(1) brightness(0.8) hue-rotate(-25deg) saturate(4.5);
}
.social a{
	display: inline-block;
	width: 2.5em;
	text-align: center;
}
.social img{
	vertical-align: middle;
	height: clamp(1em, 2vw, 1.5em);
	width: clamp(1.2em, 2vw, 1.75em);
	filter: saturate(0) brightness(3.2) sepia(0.7);
}


/*---------------------------- FOOTER ------------------------------*/

.footer{
	background-color: rgba(66,71,77,1.00);
	text-align: center;
	padding: 10em 1em 8em 1em;
	position: relative;
}
.footer h2{
	color:rgba(219,204,168,1.00);
	font-size: 250%;
	text-transform: uppercase;
	letter-spacing: .2em;
	font-style: normal;
	margin: 0.6em 1em 1em 1em;
	font-size: clamp(1em, 8vw, 250%);
}
.footer > img{
	max-width: calc(100% - 2em);
}
.footer .social{
	margin-bottom: 10em;
}
.footer .social img{
	filter: saturate(0) brightness(3.5);
	width: clamp(1.2em, 5vw, 2.2em);
	height: clamp(1.2em, 5vw, 2.2em);
}
.footer .social hr{
	filter: saturate(0) brightness(3.5);
	height: clamp(1.2em, 5vw, 2.2em);
}

.copyright{
	color: white;
	font-size: 0.7em;
	text-align: center;
	padding: 0.6em 1.2em;
}
.copyright a{
	color: rgb(197,158,0);
	text-decoration:none;
}

.rand-img{
	width: 100px;
	height: auto;
	position: absolute;
	bottom: 1em;
	right: 1em;
}


/*------------SITE SPECIFIC STYLES --------------------------------*/

.corner-float-wrapper{
	display: flex;
	clear: both;
}
.br-float{
	float: right;
	position: relative;
	height: 100%;
	display: flex;
	align-items: flex-end;
	shape-outside: inset(calc(100% - 1em - clamp(150px, 15vw, 300px) / 0.75) 0 0 0);
	padding-left: 1em;
}
.br-float > img {
	width: clamp(150px, 15vw, 300px);
}

.section-container{
	background-color: rgba(255,255,255,1);
	backdrop-filter: blur(20px);
	width: 1400px;
	max-width: calc(100% - 2em);
	margin: 0 auto;
	padding: 2em;
	padding: clamp(1em, 3.333vw, 4em);
	font-size: clamp(0.7em, 2.857vw, 1em);
}

.emphasized{
	font-size: 1.4em;
	line-height: 1.4em;
	color: rgba(185,172,132,1.00);
	font-style: italic;
	text-align: center;
	margin: 0 auto 1em auto;
}

.img-left{
	float: left;
	margin: 0 2em 1em 0;
	max-width: calc(100% - 1em - clamp(150px, 15vw, 300px) / 0.75);
}

.notice{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.75);
	animation: fadenotice 2s 5s forwards;
	display: flex;
	align-items: center;
	justify-content:  center;
}
.notice>div{
	position: absolute;
	width: 800px;
	max-width: calc(100% - 2em);
	background-color: white;
	padding: 2em;
	border-radius: 0.5em;
	box-shadow: 0 0 1em black;
	color: black;
	border: 0.8em solid rgba(224,208,169,1.00);
}
.notice h2{
	margin-bottom: 1em;
}

@keyframes fadenotice{
	0%{opacity: 1; left: 0;}
	99%{opacity: 0; left: 0;}
	100%{opacity: 0; left: -105%;}
}

/* -------------------- HOME ------------------------ */

.hero{
	position: relative;
}
.hero > img{
	width: 100%;
	height: auto;
}
.hero .text-container{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.hero .text-container img{
	max-width: calc(100% - 2em);
}

.hero h2{
	color:rgba(219,204,168,1.00);
	font-size: clamp(1.6em, 4vw, 260%);
	text-transform: uppercase;
	letter-spacing: .4em;
	font-style: normal;
	margin: 0.6em 0 1em 0;
	word-spacing: 0.5em;
	padding-left: 0.5em;
	line-height: 1.4em;
}



.freebie{
	background-image: url("../images/freebie-back.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}
.freebie h1{
	margin-bottom: 1em;
}
.freebie iframe{
	display: inline-block;
	width: 1400px;
	max-width: calc(100vw - 2em);
	margin: 0 auto;
	height: calc(.5625 * (100vw - 2em));
	max-height: 788px;
}



.upcoming{
	position: relative;
	background-image: url("../images/export-back.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}
.upcoming h1{
	font-size: clamp(2em, 5vw, 3em);
	color: rgb(214,196,146);
	margin-bottom: 1em;
	font-weight: normal;
}
.upcoming .tbl{
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0 2em;
	font-size: clamp(0.7em, 1.778vw, 1em);
}
.upcoming .td{
	border: 5px solid rgba(224,208,169,1.00);
	border-width: 5px 0 5px 5px;
	height: 8rem;
	vertical-align: middle;
	padding: 0 1rem;
	text-transform: uppercase;
	line-height: 1.1em;
}
.upcoming .td:last-of-type{
	border-width: 5px;
}
.upcoming .td:nth-of-type(1){
	background-color: rgba(255,255,255,1.00);
	font-weight: bold;
}
.upcoming .td:nth-of-type(2){
	background-color: rgba(244,238,222,1.00);
	font-weight: bold;
	font-size: 2.1em;
	text-transform: uppercase;
}
.upcoming .td:nth-of-type(3){
	background-color: rgba(244,238,222,1.00);
	border-width: 5px 0 5px 0;
}
.upcoming .td:nth-of-type(4){
	background-color: rgba(255,255,255,1.00);
}
.upcoming .td:nth-of-type(5){
	background-color: rgba(224,208,169,1.00);
	color: white;
	font-weight: bold;
	font-size: 1.7em;

}
.upcoming .td:nth-of-type(5) a{
	text-decoration: none;
	color: white;
}


.divider{
	text-align: center;
	background-color: rgba(214,211,211,1.00);
	padding: 5em 1em;
}
.divider > *{
	display: inline-block;
	vertical-align: middle;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	font-size: clamp(1em, 2vw, 2em);
}
.divider > img{
	filter: brightness(0.65);
	width: clamp(300px, 40vw, 900px);
	height: auto;
	margin-right: 2vw;
}



.email-signin{
	background-image: url("../images/mailing-list-back.jpg");
	background-position: center;
	background-size: cover;
}
.email-signin h1{
	margin-bottom: 1em;
	text-align: center;
}
.email-signin p{
	font-size: clamp(1em, 2vw, 1.6em);
	font-weight: 600;
	color: rgba(66,71,78,1.00);
	width: 1000px;
	max-width: calc(100% - 2em);
	margin: 0 auto;
	line-height: 1.4em;
	text-align: center;
}
.email-signin form{
	width: 1000px;
	max-width: calc(100% - 2em);	
	margin: 2em auto 0 auto;
	font-size: clamp(1em, 2vw, 1.6em);
}
.email-signin form .inpField{
	border-radius: 0.65em;
}
.email-signin form input{
	padding: 0.6em 1.5em!important;
	border-radius: 0.65em;
}
.email-signin form input[type='submit']{
	width: 100%;
	background-color: rgba(212,195,144,1.00);
	margin: 0;
}
.email-signin form .g-recaptcha{
	text-align: center!important;
}

.sig-alternate{
	color: white;
	font-size: min(16vw, 7em);
	font-weight: 200;
	letter-spacing: 0.1em;
	line-height: 1em;
	text-transform: uppercase;
}

.email-captcha .bgm-captcha-container{
	max-width: 20em;
	margin: 0 auto;
	display: block;
}

/* ------------------ UPCOMING PAGE ---------------------------- */

section.dates{
	background-image: url("../images/dates-back.jpg");
	background-position: center;
	background-size: cover;
	padding: 5em 0;
}


/* ------------------ STORE PAGE ---------------------------- */

section.store{
	background-image: url("../images/store-back.jpg");
	background-position: center;
	background-size: cover;
	padding: 5em 0;
}

section.store h1{
	font-size: 2.5em;
	font-weight: bold;
	line-height: 1.4em;
	margin-bottom: 0;
}
section.store h2{
	font-size: 1.6em;
	font-weight: normal;
}

/* ------------------ ABOUT PAGE ---------------------------- */

section.about{
	background-image: url("../images/about-back.jpg");
	background-position: center;
	background-size: cover;
	padding: 5em 0;
}

.venue-list{
	max-width: 35em;
	width: 100%;
	text-align: center;
	margin: 1em auto;
	list-style-type: none;
}
.venue-list > li{}

.img-container{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	flex-wrap: wrap;
}
.img-container > div{
	flex: 0 1 410px;
}
.img-container > div > img{
	width: 100%;
	height: auto;
}

/* ------------------ STORE PAGE ---------------------------- */

section.freebies{
	background-image: url("../images/freebies-back.jpg");
	background-position: center;
	background-size: cover;
	padding: 5em 0;
}

#vidDetails h2{
	text-align: center;
}
#vidDetails h2 + p{
	margin-top: 1em;
}

.BGM-vidFeature-container{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}


/* ------------------ TESTIMONIAL PAGE ---------------------------- */

section.testimonials{
	background-image: url("../images/testimonial-back.jpg");
	background-position: center;
	background-size: cover;
	padding: 5em 0;
}



/* -------------------- DEFAULT OVERRIDES -------------------- */

.BGM-reviewBox {
    color: #222222;
    line-height: 150%;
    border: none;
    width: 100%;
    margin: 0;
    padding: 3em;
	color:rgba(66,71,77,1.00)
}

.BGM-reviewBox:nth-of-type(odd){
	background-image: linear-gradient(90deg,white 25%,rgba(66,71,77,0.15) 75%);
}
.BGM-reviewBox:nth-of-type(even) {
    background-image: linear-gradient(90deg,rgba(235,235,215, 0.8) 25% ,white 75%);
}

.anon-login{display: none;}


/* ---------------- MEDIA QUERY STYLES ------------------------ */



@media only screen and (max-width: 1580px) {
}


@media only screen and (max-width: 1450px) {
}

@media only screen and (max-width: 1350px) {
}

@media only screen and (max-width: 1300px) {
}

@media only screen and (max-width: 1250px) {

}

@media only screen and (max-width: 1150px) {
}


@media only screen and (max-width: 1050px) {

}

@media only screen and (max-width: 1000px) {
}

@media only screen and (max-width: 900px){
}



@media only screen and (orientation: portrait),
only screen and (max-aspect-ratio: 1),
only screen and (max-width: 800px) {

	
	body{
		padding-top: 40px;
	}
	.title .social hr{
		display: block;
		height: 2px;
		width: 100%;
		margin: 0.5em 0;
	}
	.title{
		height: 100vh;
		width: 280px;
		padding-top: 60px;
		position: fixed;
		top: 0;
		left: 0;
		transform: translateX(-300px);
		transition: transform 0.5s;
		box-shadow: 0 0 1em black;
	}
	#nav_switch:checked + label + header{
		transform: translateX(0);
	}

	.menubar-title{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		height: 40px;
		line-height: 40px;
		width: 100%;
		background-color: black;
		z-index: 3;
		color: white;
		padding-left: 1em;
	}
	
	ul.nav > li > a{
		text-align: center;
	}
	
	.divider{
		padding: 3em 1em;
	}
	.divider > *{
		display: block;
		vertical-align: middle;
		font-size: clamp(1.4em, 4vw, 2em);
	}
	.divider > img{
		width: 500px;
		max-width: calc(100% - 0em);
		margin-right: 0;
		margin: 0.5em auto -0.5em auto;
	}
	
	.hero > img{
		height: 600px;
		max-height: 100vh;
		object-fit: cover;
		object-position: center;
	}

}



@media only screen and (max-width: 800px) {
}

@media only screen and (max-width: 700px){
	
	.upcoming .tr:nth-last-of-type(n + 2){
		margin-bottom: 2em;
	}
	
	.upcoming .tbl,
	.upcoming .tr,
	.upcoming .td:first-of-type,
	.upcoming .td:last-of-type{
		display: block;
		border-spacing: 0;
		height: auto;
		padding: 0.5em 1em;
	}
	.upcoming .td{
		border-width: 5px;
	}
	.upcoming .td:nth-of-type(2){
		padding: 0.5em;
		border-width: 0 0 0 5px;
		height: auto;
		width: 100%;
	}
	.upcoming .td:nth-of-type(3){
		padding: 0.5em;
		border-width: 0 5px 0 0;
		height: auto;
		width: 100%;
		white-space: nowrap;
	}
}


@media only screen and (max-width: 600px){
	.br-float{display: none}
	.img-left{float: none; width: 100%; margin: 0 0 1em 0; max-width: none;}
}


@media only screen and (max-width: 550px){
}

@media only screen and (max-width: 350px){
	.g-recaptcha {
		 margin: 1em -1.5em;
	}
}