@font-face {
    font-family: 'akkuratbd';
    src: url('akkurat/Akkurat-Bold.ttf') format('truetype'),
		 url('akkurat/Akkurat-Bold.woff') format('woff');
        ;
    font-weight: normal;
    font-style: normal;
}

/* FADE IN LEFT HAMBURGER SLIDE STARTS HERE */
.burger {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes fadeInLeft {
0% { opacity: 0;
-webkit-transform: translateX(50px); }
100% { opacity: 1;
-webkit-transform: translateX(0); }
}
@keyframes fadeInLeft {
0% { opacity: 0;
transform: translateX(50px); }
100% { opacity: 1;
transform: translateX(0); }
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft; }
/* FADE IN LEFT HAMBURGER SLIDE ENDS HERE */

input { display: none; }

/* HAMBURGER LINES START */
.open {
background-color: #000000;
width: 24px;
height: 4px;
display: block;
border-radius: 2px;
cursor: default;
position: relative;
top: 8px;
}

.open:before {
  content: "";
  background-color: #000000;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: -8px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.open:after {
  content: "";
  background-color: #000000;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: 4px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}
/* HAMBURGER LINES END */

.menuOpen {
width: 24px;
height: 20px;
display: block;
padding: 25px 0px 25px 25px;
cursor: default;
float: right;
margin-top: 29px;
/* SECTION BELOW PREVENTS FLASH-HIGHLIGHTS ON TAPPED ITEMS */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	outline: none !important;
/* SECTION ABOVE PREVENTS FLASH-HIGHLIGHTS ON TAPPED ITEMS */
}

.menuOpen:hover .open:before { top: -9px; }
.menuOpen:hover .open:after { top: 5px; }

.menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #8dc63f;
}

.menu label {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-size: 100%;
cursor: default;
}

.menu .menuContent {
position: relative;
top: 30%;
width: 90%;
font-size: 20pt;
line-height: 30pt;
text-align: left;
padding: 0px 0px 20px 0px;
margin: -100px auto 0px auto;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.menu ul li a {
  display: block;
  color: #ffffff;
  text-decoration: none;
font-family: 'akkuratbd', sans-serif;
  padding: 15px 0 15px 0;
cursor: default;
/* SECTION BELOW PREVENTS FLASH-HIGHLIGHTS ON TAPPED ITEMS */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	outline: none !important;
/* SECTION ABOVE PREVENTS FLASH-HIGHLIGHTS ON TAPPED ITEMS */
}

.menuEffects {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.menuEffects ul {
  transform: translateY(0%);
  transition: all 0.5s;
}

#menuToggle:checked ~ .menuEffects {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}

#menuToggle:checked ~ .menuEffects ul { opacity: 1; }
#menuToggle:checked ~ .menuOpen .open { background-color: transparent; }

#menuToggle:checked ~ .menuOpen .open:before {
  content: "";
  background-color: #ffffff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:checked ~ .menuOpen .open:after {
  content: "";
  background-color: #ffffff;
  transform: rotate(-45deg);
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:not(:checked) ~ .menuEffects ul { transform: translateY(-30%); }