#drawer-toggle {
  display: none;
opacity: 0;
position: absolute;
z-index: 11;
}

label.drawer-toggle-label { 
display: block;
background: none; width: 60px; height: 3.75rem; 
position: fixed; 
right: 0;
top: 0;
z-index: 11;
}

.line { 
position: absolute; 
left: 9px;
height: 3px; width: 42px; 
background-color: rgba(17,17,17, 1); border-radius: 2px;
display: block; 
transition: 0.5s; 
transform-origin: center; 
}

.line:nth-child(1) { top: 15px; }
.line:nth-child(2) { top: 27px; }
.line:nth-child(3) { top: 39px; }

#drawer-toggle:checked ~ .drawer-toggle-label .line:nth-child(1){
transform: translateY(12px) rotate(45deg);
}

#drawer-toggle:checked ~ .drawer-toggle-label .line:nth-child(2){
opacity:0;
}

#drawer-toggle:checked ~ .drawer-toggle-label .line:nth-child(3){
transform: translateY(-12px) rotate(-45deg);
}

#drawer-toggle:checked ~ .drawer-toggle-label {
color: rgba(255,255,255, 1);
right: 0;
}


#drawer {
list-style-type: none;
left: calc(50% - calc(33.333% / 2));
overflow: hidden;
transition: all .5s linear .125s;
}

#drawer li {
height: calc(calc(100vh - 3.75rem) / 4);
}

#drawer a {
color: rgba(255,255,255, 1);
display: block;
font-size: 1.75rem;
font-weight: bold;
padding: calc(calc(calc(calc(100vh - 3.75rem) / 4) - 1.75rem) / 2) .5rem;
text-decoration: none;
text-transform: uppercase;
}

#drawer a:hover {
color: rgba(255,0,0, 1);
}

#drawer,
.drawer_left,
.drawer_right {
background-color: rgba(0,0,0, .69);
height: 0%;
width: 33.333%;
margin: 0;
padding: 0;
position: fixed;
top: 3.75rem;
text-align: center;
z-index: 11;
}

.drawer_left {
left: 0;
transition: all .5s linear 0s;
}

.drawer_right {
right: 0;
transition: all .5s linear .25s;
}

#drawer-toggle:checked ~ #drawer,
#drawer-toggle:checked ~ .drawer_left,
#drawer-toggle:checked ~ .drawer_right {
height: 100%;
}

#drawer-toggle:checked ~ header *,
#drawer-toggle:checked ~ section *,
#drawer-toggle:checked ~ footer *,
#drawer-toggle:checked ~ .parallax-bgimg-2 * {
filter: blur(.5rem);
-webkit-filter: blur(.5rem);
}

#drawer-toggle-label,
#drawer-toggle:checked ~ .drawer-toggle-label {
transition: all .5s linear 0s;
}

#drawer-toggle:checked ~ #drawer {
transition: all .5s linear .125s;
}

#drawer-toggle:checked ~ .drawer_left {
transition: all .5s linear 0s;
}

#drawer-toggle:checked ~ .drawer_right {
transition: all .5s linear .25s;
}


@media all and (max-width: 480px) {
#drawer {
  left: 25%;
  width: 50%;
}

.drawer_left,
.drawer_right {
  width: 25%;
}

#drawer li {
  height: calc(calc(100vh - 3.75rem) / 4.5);
}

#drawer a {
font-size: 1.5rem;
}
}