:root {
	--yellow: #dbdc95;
	--black: #0f0f0f;
	--grey: #60625e;
	--white: #fffff;
}
* {
	font-size: 0;
	margin: 0;
	padding: 0;
	text-decoration: none;
}
html {
	background-color: var(--white);
	color: var(--black);
}
body {
	position: relative;
	width: 100vw;
	padding-top: 200px;
	background-color: var(--white);
}
header {
	position: fixed;
	top: 0;
	background-color: var(--white);
	width: calc(100vw - 80px);
	padding: 30px 40px;
	z-index: 2;
}
header #logo-wrap {
	text-align: center;
}
header #gold-leaf {
	width: 50px;
	z-index: 10;
}
header #logo {
	max-width: 125px;
	z-index: 10;
}
header .left {
	position: absolute;
	top: 30px;
	left: 40px;
	display: none;
}
header .right {
	position: absolute;
	top: 0px;
	right: 40px;
}
header .left, header .right {
}

header .left a, header .right a {
	font-family: "mr-eaves-sans", sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 18px;
	color: var(--black);
	letter-spacing: .05em;
}

#hero {
	margin-top: calc(50vh - 250px);
	margin-left: 10%;
	margin-right: 10%;
	text-align: center;
}
#hero .subtitle {
	display: block;
	font-size: 14px;
}
#hero .title {
	display: block;
	padding-top: 16px;
	font-size: 42px;
}
#hero .subtitle, #hero .title {
	font-family: "mr-eaves-sans", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: white;
}

@media only screen and (max-width: 1000px) {
#hero {
	margin-top: calc(50vh - 300px);
}	
	
}
@media only screen and (max-height: 780px) {
#hero {
	margin-top: calc(50vh - 350px);
}	
	
}