@import “variables”; @import “mixins”;

nav-drawer {

display: none;
position: relative;
@include smartphone() {
    display: flex;
    align-items: flex-end;
}

}

.nav-unshown {

display: none;

}

nav-open {

display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;

}

nav-open span, nav-open span:before, nav-open span:after {

position: absolute;
height: 3px;
width: 25px;
border-radius: 3px;
background: #fff;
display: block;
content: "";
cursor: pointer;

} nav-open span:before {

bottom: -8px;

} nav-open span:after {

bottom: -16px;

}

nav-close {

display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: 0.3s ease-in-out;

}

nav-content {

overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 90%;
max-width: 330px;
height: 100%;
background: $color-background;
transition: 0.3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);

}

nav-input:checked ~ nav-close {

display: block;
opacity: 0.5;

}

nav-input:checked ~ nav-content {

-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);

}