/*
* Dark Green - #49502F
* Green - #81C672
* Sand - #C6CE47
* Cream - #E4E8B8
* White - #FEFFE8
*/

/* @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,700;1,400&display=swap'); */

html, body {
	margin: 0; padding: 0;
	width:100%; height: 100%;
}
body {
	font-family: "Newsreader";
	letter-spacing: 1px;
	font-size: 1.1em;
	color: #49502F;
	overflow-x: hidden;
}


p, ul { line-height: 1.6em }
a { text-decoration: none; color: #49502F; }
a:hover { color: #81C672 }
a.inactive { pointer-events: none; cursor: default; }
.button {
	background: #49502F;
	display: inline-block;
	padding: 20px 30px;
	color: #E4E8B8;
	border: 2px solid #E4E8B8;
	text-transform: uppercase;
	font-family: "Copperplate";
	cursor: pointer;
}
.button.dispensary-shop-button { margin-bottom: 20px }
.button:hover, .button:focus {
	color: #81C672;
	border-color: #81C672;
	outline: none;
}

a, .button, input, #merchandise .product img, header #banner, header nav, header #menu-icon, #email-close
{ transition: all 300ms }
#logo img
{ transition: all 1000ms }



/* ========== HEADER ========== */
header {
	width: 100%; height: 80%;
	background: center center no-repeat url('images/bg-sepia4.jpg');
	background-size: cover;
	text-align: center;
	background-color: #49502F;
	overflow-x: hidden;
}
#index header { height: 100% }
#story header { background-image: url('images/bg-sepia5.jpg');/*  background-position-y: 50px; */ }
#products header { background-image: url('images/bg-sepia2.jpg');/*  background-position-y: 130px; */ }
#contact header { background-image: url('images/bg-sepia3.jpg'); /* background-position-y: 100px; */ }
#cultivation header { background-image: url('images/bg-sepia6.jpg'); /* background-position-y: 100px; */ }
#dispensary header { background-image: url('images/bg-sepia7.jpg'); /* background-position-y: 100px; */ }
#dispensary2 header { background-image: url('images/bg-sepia8.jpg'); /* background-position-y: 100px; */ }
header .video-wrapper {
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0; bottom: 0;
	height: 100%;
	overflow-x: hidden;
}
header .video-bg {
	position: absolute; left: 0; top: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}
header .video-bg.desktop { display: block; }
header .video-bg.mobile { display: none; }
header #logo {
	display: inline-block;
	/* margin-bottom: 25px; */
	position: relative; z-index: 100;
	float: left;
}
#logo img {
	/* height: 60px; */
	width: 120px;
}
.scrolling #logo img {
	/* height: 30px; */

}
header #banner {
	position: fixed; width: 100%; height: 40px; z-index: 10;
	background: #E4E8B8;
	padding: 20px 0 20px;
	transition: all 1000ms;
	overflow-y: hidden;
	border-bottom: 2px solid #49502F;
}
/* .scrolling header #banner { height: 30px; } */
header #banner .section-inner { height: 100%; position: relative; }
header nav {
	position: absolute; top: 0; right: 0;
	line-height: 40px;
}
/* .scrolling header nav { line-height: 30px; } */
nav a {
	font-family: "Copperplate";
	font-size: 14px;
	letter-spacing: 0px;
	margin: 0 0 0 30px;
}
nav a.current { border-bottom: 2px solid #49502F; color: #49502F; }
.masthead-text { position: absolute; top: 40%; width: 100%; }
#index .masthead-text { top: 70% }
header #menu-icon { display: none }
header #menu-icon:hover { filter: hue-rotate(28deg) brightness(220%) }
nav a.button { margin-top: 20px; }

/* MENU RIGHT ALIGN */
/* .header-inner {
	max-width: 1000px;
	margin: 0 auto;
}
header nav {
	text-align: right;
}
header nav a {
	margin: 0 0 0 30px;
}
header #logo {
	position: absolute; left: 0;
} */




/* ========== GLOBAL STYLES ========== */
.wrapper { background: #E4E8B8; text-align: center; }
.bg-dark { background: #49502F; color: #E4E8B8; }
.bg-dark a { color: #E4E8B8 }
.bg-dark a:hover { color: #81C672 }

h1 {
	text-align: center;
	color: #E4E8B8;
	font-size: 4em;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	letter-spacing: 3px;
}
h2 { font-size: 2.4em; font-weight: 500; margin: 10px 0 40px; }
h3 { font-size: 2em; font-weight: 500; }
h4 { font-size: 1.6em; font-weight: 500; }
section { padding: 50px 0; }
.section-inner {
	max-width: 1000px; width: 95% !important;
	margin: 0 auto;
}
section ul { list-style: square }









/* ========== AGE VERIFICATION ========== */
#age-verification {
	display: none;
	position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100;
	background: rgba(73,80,47,0.95);
	color: #E4E8B8;
	text-align: center;
}
#age-verification.showing { display: block }
#age-verification .section-inner {
	position: absolute; top: 50%; left: 5%;
	width: 90%; max-width: 90%;
	margin-top: -120px;
}
#age-verification p { margin-bottom: 40px; }







/* ========== SECTIONS ========== */

section.icon-stats div {
	display: inline-block;
	width: 25%;
	position: relative;
	vertical-align: top;
}
section.icon-stats div:first-child { margin-left: 0; margin-top: 0; }
section.icon-stats div:last-child { margin-right: 0; margin-bottom: 0; }
section.icon-stats h4 { letter-spacing: 0; margin: 20px 0 0 0; }
section.icon-stats p { padding: 10px 10px 0 10px; font-size: 1.1em; }

section.testimonial p { font-size: 2.1em; font-style: italic; }
#story .testimonial p { font-size: 1.6em; }
/* section.testimonial p::first-letter { font-size: 2em; } */

section.img-right { min-height: 500px; text-align: left; }
section.img-right img { width: 45%; float: right; border: solid 5px #E4E8B8; margin-left: 10px; }
section.img-right h2 { padding: 80px 0 0 }
section.img-right p { padding: 0 0 25px 0 }

section.columns .col {
	width: 33%;
	display: inline-block;
	vertical-align: top;
}
section.columns .col p { padding: 0 20px }
section img { max-width: 100%; }

section.contact nav.social { margin: 30px 0 }
section.contact nav.social a { margin: 0 15px }
section.contact nav.social a:hover { filter: hue-rotate(28deg) brightness(220%) }

img#timeline { display: block; margin: 50px auto 0; }










/* ========== MERCHANDISE ========== */

#merchandise .col {
	padding: 30px 0 10px
}
#merchandise .col h4 { margin: 20px 0 0 0 }
#merchandise .col h5 { margin: 10px 0 20px 0 }
#merchandise .product img {
	border: 5px solid transparent;
	background: #E4E8B8;
}
#merchandise .product:hover img {
	border-color: #C6CE47;
}









/* ========== FORMS ========== */
form input[type=text], form input[type=email], form textarea {
	width: 400px;
	padding: 15px 15px;
	margin: 10px 0 30px;
	font-size: 14px;
	font-family: Newsreader;
	/* text-align: center; */
	/* background: white; */
	background: rgba(228, 232, 184, 0.1);
	border: none;
	border-bottom: 3px solid rgb(228, 232, 184);
	color: #E4E8B8;
}
form textarea { min-height: 200px; }
/* form input[type=text]::placeholder, form input[type=email]::placeholder, form textarea::placeholder { color: rgba(73,80,47,0.3) } */
form input[type=text]:focus, form input[type=email]:focus, form textarea:focus {
	outline: none;
	border-color: #C6CE47;
}
form .button {
	font-size: 1em;
	margin: 0 0 50px 0;
	cursor: pointer;
}
#submit.hide { display: none; }

#email-popup {
	display: none;
	position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000;
	background: rgba(73, 80, 47, 0.95);
}
#email-popup.showing { display: block; }
#email-popup-inner {
	position: absolute;
	left: 5%; top: 5%; right: 5%; bottom: 5%;
	/* background: #E4E8B8; */
	/* box-shadow: 0 5px 20px rgba(73, 80, 47, 1); */
}
#email-close {
	position: absolute; right: 20px; top: 20px; z-index: 1000;
	background: rgba(73, 80, 47, 1);
	padding: 10px;
	border: 3px solid #E4E8B8;
	cursor: pointer;
}
#email-close:hover { opacity: 0.75; }





/* ========== FOOTER ========== */
footer { text-align: center; padding: 50px 0; }
footer nav { padding: 40px 0 20px }
footer nav a { color: #E4E8B8; margin: 0 10px; }
footer h4 { margin: 40px 0 0 0  }
nav.social a:hover { filter: hue-rotate(35deg) brightness(75%) saturate(220%) }
/* --- TRIPADVISER --- */
#TA_rated54 {
	display: inline-block;
	margin: 20px 0 0 0;
}
.opening-hours { font-size: 0.9em; }




/* ========== SCREENS UNDER 1050px ========== */
@media only screen and (max-width: 1050px) {
	
	/* header { height: 62%; } */
	/* header #banner { padding: 20px 0; height: 145px; } */
	/* header #logo { margin-bottom: 0 } */
	/* header #logo img { width: 200px } */
	header #menu-icon {
		display: inline-block;
		position: relative; z-index: 100;
		float: right;
		/* margin-top: 10px; */
	}
	.scrolling header #menu-icon { margin-top: 0px; }
	.scrolling header #menu-icon img { height: 30px; width: 30px;  }
	header.menu-showing #banner {
		position: fixed;
		top: 0; bottom: 0;
		width: 100%; height: 100%;
	}
	header nav { 
		opacity: 0;
		transition: all 500ms;
		width: 100%;
		top: 85px;
	}
	.scrolling header nav { top: 50px; }
	header nav a {
		display: block;
		/* padding: 20px 0; */
		font-size: 1.4em;
		margin-left: 0;
		line-height: 60px;
	}
	header.menu-showing nav { opacity: 1 }
	header.menu-showing { background-color: #E7E5DD }
	header nav a.current { border: none; color: #81C672 !important; }
	section.testimonial p { font-size: 2em }
	section.testimonial small { display: block }
	
}






/* ========== SCREENS UNDER 850px ========== */
@media only screen and (max-width: 850px) {

	section.img-right h2, section.img-left h2 { text-align: center; margin-top: 30px; padding: 0; }
	section.img-right, section.img-left { text-align: center }
	section.img-right img, section.img-left img { float: none; width: 80%; }
	section.testimonial p { font-size: 1.8em }
	section.columns .col {
		width: 45%;
	}
	
}






/* ========== SCREENS UNDER 650px ========== */
@media only screen and (max-width: 650px) {
	
	#story header { background-position-y: 20px; }
	#products header { background-position-y: 20px; }
	#contact header { background-position-y: 20px; }
	
	footer nav.main a { display: block; padding: 10px 0; }
	.masthead-text h1 { font-size: 3em; letter-spacing: 2px; }
	.masthead-text { margin-top: -20px }
	section.testimonial p { font-size: 1.5em; }
	section.icon-stats h4 { margin: 10px 0 0 0; }
	section.icon-stats, section.icon-stats .section-inner { width: 100%; position: relative; display: block; }
	section.icon-stats div {
		display: block;
		width: 100%;
		margin: 50px 0;
	}
	section.icon-stats h4 { margin: 10px 0 0 0; }
	section.columns .col {
		display: block;
		width: 100%;
		margin: 30px 0;
	}
	section.icon-stats h4 { margin: 10px 0 0 0; }
	
	header .video-bg.desktop { display: none; }
	header .video-bg.mobile { display: block; }

}






/* ========== SCREENS UNDER 460px ========== */
@media only screen and (max-width: 460px) {

	#story header { background-position-y: 40px; }
	#products header { background-position-y: 40px; }
	#contact header { background-position-y: 40px; }
	
	.masthead-text h1 { font-size: 2em; letter-spacing: 2px; }
	.masthead-text h2 { font-size: 1.2em; margin-bottom: 20px; }

}