#nav-drawer{text-align:right;padding:1em;width:80px;box-sizing:border-box}.nav-unshown{display:none}#nav-open{display:inline-block;width:45px;height:45px;vertical-align:middle}#nav-open span,#nav-open span:before,#nav-open span:after{position:absolute;height:3px;width:45px;background:#fff;color:#fff;display:block;content:'';cursor:pointer}#nav-open span:before{bottom:-10px}#nav-open span:after{bottom:-20px;line-height:220%;content:'MENU'}#nav-close{display:none;position:fixed;z-index:99;top:0;left:0;width:100%;height:100%;background:#333;opacity:0;transition:.3s ease-in-out}#nav-content{overflow:auto;position:fixed;top:0;left:0;z-index:9999;width:55%;height:100%;background:#333;transition:.3s ease-in-out;-webkit-transform:translateX(-105%);transform:translateX(-105%)}@media screen and (min-width:768px){#nav-content{width:40%}}#nav-input:checked ~ #nav-close {display:block;opacity:.5}#nav-input:checked ~ #nav-content {-webkit-transform:translateX(0%);transform:translateX(0%);box-shadow:6px 0 25px rgba(0,0,0,.15)}ul.head-nav-area,ul.lower-nav-area{display:flex;flex-direction:column;justify-content:center;margin:0 5%;padding:0}ul.head-nav-area li,ul.lower-nav-area li{text-align:center;padding:1em 1em;border-bottom:#fff 1px solid}@media screen and (min-width:768px){ul.head-nav-area li,ul.lower-nav-area li{padding:2em 1em}}ul.head-nav-area li a,ul.lower-nav-area li a{font-size:120%;color:#fff}