*,
*:after,
*:before {
  box-sizing: border-box;
  word-wrap: break-word;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body,
html {
  font-family: sans-serif;
  margin: 0;
  width: 100%;
}

html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body > header {
  background: var(--color0);
  box-shadow: 2px 2px 2px 1px rgba(0,0,0,.1);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 50px;
  margin-bottom: 20px;
  padding: 0 5%;
  position: fixed;
  width: 100%;
  top: 0px;
}

body > header menu menu span {
  display: block;
}

body > header nav menu menuitem + menuitem {
    padding: 0 15px;
}

body > header nav menu menuitem:hover {
    background-color: var(--color4);
}

body > header menu menuitem > .heading {
	font-weight: bold;
	font-size: 14px;
	text-align: center !important;
	background-color: var(--color2);
	color: var(--color3);
	padding-bottom: 0px;
	height: 30px;
	line-height: 30px;
	padding: 0px;
}

body > header input[type="checkbox"],
body > header input[type="reset"] {
  display: none !important;
}

body > header > nav span { cursor: default; }

body > header nav,
body > header nav nav {
  font-size: 14px;
  height: 100vh;
  position: absolute;
  top: 0;
  transition: transform .15s ease-in-out;
  width: 300px;
  z-index: 999;
}

body > header nav.left-navigation,
body > header nav.left-navigation nav {
  background: var(--color1);
  left: 0;
  transform: translateX(-300px);
}

body > header nav.right-navigation,
body > header nav.right-navigation nav {
  background: #F6EA53;
  right: 0;
  transform: translateX(300px);
}

body > header nav > main,
body > header nav nav > main {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  background-color: var(--color3);
}

body > header nav label {
  cursor: pointer;
  font-weight: normal;
  margin: 0;
}
body > header nav label:focus { outline: none; }

body > header nav label.menu-close,
body > header nav label.menu-toggle {
  display: block;
  height: 50px;
  line-height: 0;
  padding: 0;
  position: absolute;
  text-indent: -9999px;
  width: 50px;
}

body > header nav.left-navigation label.menu-close,
body > header nav.left-navigation label.menu-toggle {
  background: var(--color0h);
  right: -50px;
}

body > header nav.right-navigation label.menu-close,
body > header nav.right-navigation label.menu-toggle {
  background: #F6EA53;
  right: 300px;
}

body > header nav label.menu-close>span:after,
body > header nav label.menu-close>span:before,
body > header nav label.menu-toggle>span,
body > header nav label.menu-toggle>span:after,
body > header nav label.menu-toggle>span:before {
  background: white;
  display: block;
  height: 3px;
  pointer-events: none;
  transition: transform .4s ease-in-out,background-color .4s ease-in-out 0s;
  width: 20px;
}

body > header nav label.menu-close>span,
body > header nav label.menu-toggle>span {
  display: block;
  margin-left: 15px;
  margin-top: 50%;
  position: relative;
}

body > header nav label.menu-close>span:after,
body > header nav label.menu-close>span:before,
body > header nav label.menu-toggle>span:after,
body > header nav label.menu-toggle>span:before {
  content: "";
  position: absolute;
  transform: rotate(0) translateY(0);
}

body > header nav label.menu-close {
  margin-top: 52px;
  opacity: 0;
  transition: all .4s ease-in;
}

body > header nav label.menu-close>span:after {
  transform: rotate(45deg);
}
body > header nav label.menu-close>span:before {
  transform: rotate(-45deg);
}

body > header nav label.menu-toggle { margin-top: 0px; }

body > header nav label.menu-toggle>span:after {
  transform: translateY(6px);
}
body > header nav label.menu-toggle>span:before {
  transform: translateY(-6px);
}

body > header nav menu {
  margin: 0;
  padding: 0;
}
body > header nav menu menuitem {
  display: block;
  list-style: none;
}

body > header nav menu menuitem + menuitem {
	padding: 0 15px;
}

body > header nav menu menuitem > a,
body > header nav menu menuitem > label,
body > header nav menu menuitem > span {
	display: block;
	line-height: 30px;
	padding: 15px 0;
	text-decoration: none;
}

body > header nav.left-navigation menu menuitem > a,
body > header nav.left-navigation menu menuitem > label,
body > header nav.left-navigation menu menuitem > span {
	text-align: left;
	cursor: pointer;
}

body > header nav.right-navigation menu menuitem > a,
body > header nav.right-navigation menu menuitem > label,
body > header nav.right-navigation menu menuitem > span {
	text-align: right;
}

body > header nav menu menuitem > label:after {
	display: block;
	font-size: 150%;
}
body > header nav.left-navigation menu menuitem > label:after {
	content: "\f054";
	float: right;
	font: normal normal normal 14px/2 FontAwesome;
	color: var(--color1);
}
body > header nav.right-navigation menu menuitem > label:after {
	content: "\00AB";
	float: left;
}

body > header nav nav label.menu-toggle,
body > header nav nav label.menu-toggle>span,
body > header nav nav label.menu-toggle>span:after,
body > header nav nav label.menu-toggle>span:before { background: none !important; }

body > header input[type="checkbox"]:checked ~ nav { transform: translateX(0); }

body > header input[type="checkbox"]:checked ~ nav label.menu-close {
	opacity: 1;
}

body > header input[type="checkbox"]:checked ~ nav label.menu-toggle > span:after,
body > header input[type="checkbox"]:checked ~ nav label.menu-toggle > span:before {
	width: 14px;
}

body > header input[type="checkbox"]:checked ~ nav.left-navigation label.menu-toggle > span:after {
	transform: rotate(-45deg) translateY(-4px) translateX(4px);
}

body > header input[type="checkbox"]:checked ~ nav.left-navigation label.menu-toggle > span:before {
	transform: rotate(45deg) translateY(4px) translateX(4px);
}

body > header input[type="checkbox"]:checked ~ nav.right-navigation label.menu-toggle > span:after {
	transform: rotate(45deg) translateY(-8px) translateX(2px);
}
body > header input[type="checkbox"]:checked ~ nav.right-navigation label.menu-toggle > span:before {
  transform: rotate(-45deg) translateY(8px) translateX(2px);
}

body > main {
	margin: 0 5vw;
}

@media (max-width:60em) {
  h2 { padding: 0.5em 0; }
}

@media (min-width:40em) {
  html{ font-size: 130%; }
}

@media (min-width:60em) {
  html { font-size: 135%; }
  h1 { font-size: 280%; }
}

@media (min-width:100em) {
  h1 { font-size:300%; }
}

@media (min-width:160em) {
  html { font-size: 160% }
  h1 {
    font-size: 320%;
    padding: 1.75em 0 .8em 0;
  }
}