html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

html, body {
margin:0;
padding:0;
scroll-behavior: smooth;
}
.top {
position:relative;/* fallback for absolutely placed child*/
position:-webkit-sticky;
position:sticky;
top:0;
background: #222;
width:100vw;
margin:auto;
text-align:center;
}
.toggle {
display:none;
}
.nav {
display:flex;
}
.nav a {
flex:1 0 0;
background:#ffb500;
color:#222;
text-decoration:none;
padding:1em;
transition:all .4s ease;
text-transform:uppercase;
font-family: 'metrobmedium', sans-serif;
font-size: 17px;
line-height:1;
}
.nav a:hover {
background:#333;
color:#ffaa00;
}
/* hamburger menu */
.toggle {
position: absolute;
z-index:99;
top: 10px;
left: 10px;
background: transparent;
padding: 0;
margin: 0;
cursor: pointer;
outline: none;
width: 30px;
height: 21px;
border: none;
border-top: 3px solid #ffaa00;
border-bottom: 3px solid #ffaa00;
text-decoration: none;
color: #ffaa00;
outline: 0;
}
.toggle:before, .toggle:after {
content: "";
display: block;
width: 30px;
height: 3px;
top: 6px;
left: 0;
background: #ffaa00;
position: absolute;
}
.toggle, .toggle:before, .toggle:after {
transition: all 0.3s ease;
transform: rotate(0deg);
}
.open .toggle {
border-color: transparent;
}
.open .toggle:before {
transform: rotate(45deg);
}
.open .toggle:after {
transform: rotate(-45deg);
}
section {
width:100%;
margin:0 auto;
max-width:1280px;
clear:both;
margin-bottom:8vh;
}
#hem {
margin-bottom:0;
}
section:nth-child(odd) {
}
h2 {
margin:1rem 0;
}
@media screen and (max-width:800px) {
.toggle {
display:block;
}
.top:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2.5em;
background:#333;
z-index:98;
}
.top {
padding:2.5em 0 0
}
.nav {
display:flex;
position:absolute;
left:0;
right:0;
top:2.5em;
flex-wrap:wrap;
transform:translateY(-100%);
opacity:0;
transition:all 1s ease;
}
.nav > a {
flex:1 0 100%;
font-size:20px;
border-bottom:1px solid #333;
}
.open .nav {
display:flex;
transform:translateY(0%);
opacity:1;
}
}
@font-face {
font-family: 'metroblack';
src: url('fonts/metropolis-black-webfont.woff2') format('woff2'),
url('fonts/metropolis-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'metromedium';
src: url('fonts/metropolis-medium-webfont.woff2') format('woff2'),
url('fonts/metropolis-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'metrolight';
src: url('fonts/metropolis-light-webfont.woff2') format('woff2'),
url('fonts/metropolis-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}