:root {
	font-size: 62.5%;
	--black: #222026;
	--white: #fbf9f9;
	--offwhite: #efece6;
	--green: #30bba5;
	--yellow: #f3c67e;
	--blue: #00576f;
	--red: #e55a65;

	/*font sizes*/
	--huge: 7rem;
	--big: 4rem;
	--heading: 2.4rem;
	--subheading: 2.2rem;
	--subsubheading: 1.8rem;
	--dft: 1.6rem;
	--small: 1.4rem;
	--tiny: 1rem;

	--h1: 2.4rem;
	--h2: 2.2rem;
	--h3a:2.0rem;
	--h3: 1.8rem;
	--h4: 1.6rem;
	--h5: 1.4rem;
	--h6: 1rem;

	--light-font: 'lato', sans-serif;
	--default-font: 'Poppins', sans-serif;
	--heading-font: 'Montserrat', sans-serif;

	/* nav */
	--nav-height: 68px;
	--desktop-nav-height: 160px;
	--collapsed-nav-height: 14px;
	--collapsed-top: calc(var(--collapsed-nav-height) - var(--nav-height));
	--collapsed-top-desktop: calc(var(--collapsed-nav-height) - var(--desktop-nav-height));
}

body{
	font-family: var(--default-font);
	margin:0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6,b{
	font-family: var(--heading-font);
}

.in-dom{
	width: 90vw;
	height: 90vh;
	margin: auto;
	border: 1px solid black;
}

.vr-btn{
	display: block;
	margin: auto;
	position: relative;
}
#VRButton{
	background: #555 !important;
	bottom: auto !important;
}
.vr-canvas{
	background: #000;
	height: 100vh !important;

}
button{
	padding: 20px 30px;

}



/*font*/

.hamburger {
	color: var(--white);
}

.nav-list {
	color: var(--offwhite);
	text-transform: uppercase;
	font-size: var(--huge);
	line-height: var(--huge);
}


.nav-item-link {
	font-weight: bold;	
}


/*display*/
.nav-wrapper {
	display: flex;
	height: var(--nav-height);
	justify-content: space-between;
	flex-direction: row;
	align-items: stretch;
}

.img-nav-link {
	display: inline-flex;
	width: calc(100% - var(--nav-height));
	height: var(--nav-height);
	align-content: center;
	align-items: center;
	background: var(--offwhite);
	transition: width 0.1s;
}

.hamburger {
	display: block;
	width: var(--nav-height);
	height: 100%;
	background: var(--green) !important;
}

.collapsed .img-nav-link {
	transition: width 0;
}

.collapsed .hamburger {
	width: 100%;
}

.collapsed .img-nav-link, .collapse .subnav-wrapper {
	width: 50%;
}

.subnav-wrapper {
	z-index: 1;
}

.img-nav.logo {
	max-width: 30px;
	padding: 0 10px;
	box-sizing: content-box;
}

.img-nav.wordmark {
	max-width: 150px;
	height: 28px;
}

.nav-list, .nav-item {
	margin: 0;
	padding: 0;
}

.nav-list {
	padding-top: 20px;
}

.nav-item {
	display: block;
}

.nav-list {
	position: absolute;
	top: -100vh;
	transition: top 0.5s;
	transition-timing-function: cubic-bezier(0.79, 0.11, 0.37, 0.85);
	background: var(--green);
	width: 100%;
	height: calc(100vh - var(--nav-height));
	left: 0;
	display: block;
	overflow: scroll;
}

.nav-list.open {
	top: var(--nav-height);
}

.header-cart-btn, .nav-item-link {
	display: block;
	text-align: right;
	padding-right: 30px;
}


.hamburger:after{
	content: ' ';
	background-image: url(/resources/icons/hamburger.svg);
	display: block;
	width: 68px;
	height: 68px;
	position: absolute;
	top: 0;
	left: 0;
	background-size: 28px;
	background-repeat: no-repeat;
	background-position: center;
}

.hamburger.open:after{
	background-image: url(/resources/icons/close.svg);
}

.hamburger, .img-nav-link {
	position: relative;
	z-index: 2;
}

.header-nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1000;
	transform: translateY(0);
	will-change: transform;
	transition: transform 0.5s, background-color 0.5s;
	background-color: var(--green);
}

.header-nav.collapsed {
	transform: translateY(var(--collapsed-top));
}
.header-nav-list{
	overflow: hidden;
}

.collapse .img-nav-link {
	background: var(--white);
}

.collapse .img-nav-link, .collapse .hamburger {
	z-index: -1;
}

.nav-item-link:hover{
	background: var(--black);
	color: var(--offwhite) !important;
}

@media all and (max-width: 768px){
	img.logo{
		height: 100%;
	}
}

@media all and (min-width: 769px){
	img.logo{
		height: 0;
	}

	.header-nav{
		/*position: static;*/
	}
	.header-nav.collapse{
		transform: translateY(var(--collapsed-top-desktop));
		background-color: var(--green);
	}
	.collapse .img-nav-link, .collapse .subnav-wrapper{
		width: auto;
	}
	.nav-wrapper{
		height: auto;
		flex-direction: column;
		align-items: center;
	}
	.img-nav-link{
		margin: 30px 30px 15px;
		background: var(--white);
	}

	.img-nav-link{
		width: 200px;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.img-nav-link:hover .wordmark{
		display: block;
		max-width: 100%;
		height: 60px;
	}
	.img-nav-link:hover .logo{
		display: none;
	}
	
	.img-nav-link .wordmark{
		display: none;
	}

	.img-nav.logo{
		max-width: 60px;
		width: 100%;
	}
	.hamburger{
		display: none !important;
	}
	.nav-list{
		position: relative;
		top: auto;
		background: inherit;
		height: auto;
		display: flex;
		font-size: var(--dft);
		line-height: var(--dft);
		font-family: var(--default-font);
		padding-top: 0;
	}
	.nav-item-link{
		color: #4d4d4d;
		padding: 15px;
		margin-bottom: 10px;
	}
	.nav-item-link:hover{
		background: inherit;
		color: #4d4d4d !important;
		text-decoration: underline;
	}
	.header-cart{
		display: none;
	}
}