header{padding:10px;background-color:#f3dd49}#nav-drawer{position:relative}.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:#555;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:#000;opacity:0;transition:.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:#fff;transition:.3s ease-in-out;-webkit-transform:translateX(-105%);transform:translateX(-105%)}#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)}.header-logo-menu{display:flex;display:-moz-flex;display:-o-flex;display:-webkit-flex;display:-ms-flex;flex-direction:row;-moz-flex-direction:row;-o-flex-direction:row;-webkit-flex-direction:row;-ms-flex-direction:row}.logo-area{text-align:center;margin:auto}