.toggle-button{position:absolute;top:8px;right:15px;padding:9px 10px;margin:8px 15px 8px 0;height:40px;width:55px;cursor:pointer;z-index:4}.bar{background-color:#fff;display:block;width:100%;height:2px;border:0;-webkit-transition:all .35s ease;transition:all .35s ease}.bar+.bar{margin-top:10px}.middle{top:11px}.bottom{top:22px}.toggle-button:hover{opacity:.7}.toggle-active .bar{background-color:#fff}.toggle-active .top{-webkit-transform:translateY(12px) translateX(0) rotate(45deg)}.toggle-active .middle{opacity:0}.toggle-active .bottom{-webkit-transform:translateY(-12px) translateX(0) rotate(-45deg)}.overlay{position:fixed;background-image:linear-gradient(120deg,#002636fb 40%,#11485f 100%);top:0;left:0;width:100%;height:0;visibility:hidden;opacity:0;-webkit-transition:opacity .35s,visibility .35s,height .35s;display:flex;align-items:center;justify-content:center;z-index:3}.nav-active{opacity:1;visibility:visible;height:100%}.overlay ul{display:block;position:relative;top:0;left:0;font-size:25px;font-weight:200;text-align:center;list-style:none;padding:0}.overlay ul li{display:block}.overlay ul li a{color:#87a7b5;text-decoration:none;display:block;padding:15px;line-height:inherit}.overlay ul li a:hover{color:#fff;letter-spacing:2px}