.nav-container,.scroll{position:fixed;top:0;width:100%}.nav-container{background-color:transparent;transition:all .5s ease-out;z-index:11}.scroll{background-color:var(--darkgray);transition:all .3s ease-in;border-bottom:1px solid var(--lightgray);box-shadow:0 1px 8px #223055;z-index:20}.navbar{display:grid;grid-template-columns:110px auto;align-items:center;height:60px;width:90%;max-width:1260px}.navbar-logo{cursor:pointer;filter:drop-shadow(1px 1px 2px var(--darkgray));width:110px;margin:0;transform:translateY(-3px)}.nav-menu{display:grid;grid-template-columns:auto;grid-template-rows:auto 1fr auto;background-color:var(--darkgray);margin:0;width:100%;height:100%;position:fixed;top:60px;left:-100%;opacity:0;transition:all .5s ease-out;align-items:center}.nav-menu ul{display:flex;flex-direction:column;grid-row:2/3;justify-content:center;margin-top:-120px;width:100%}.nav-menu ul li{font-size:1.2em;width:100%}.nav-menu.active{left:0;opacity:1;transition:all .5 ease}.nav-links{color:var(--offwhite);text-decoration:none;font-size:1em;position:relative;transition:all .2s ease-out;text-shadow:1px 1px 2px var(--darkgray);text-align:center;line-height:60px;width:100%;display:block}.nav-links:hover{background-color:var(--onbeatblue);color:var(--white);transition:all .4s ease-out}#mobile-menu{position:absolute;top:10%;right:5%;transform:translate(5%,50%)}.menu-toggle .bar{display:block;width:25px;height:2px;margin:5px auto;transition:all .3s ease-in-out;background:var(--white);cursor:pointer;box-shadow:1px 1px 2px var(--darkgray)}.menu-toggle:hover{cursor:pointer}#mobile-menu.is-active .bar:nth-child(3){opacity:0}#mobile-menu.is-active .bar:nth-child(2){transform:translateY(6.5px) rotate(45deg)}#mobile-menu.is-active .bar:nth-child(4){transform:translateY(-6.5px) rotate(-45deg)}.underline:hover::before{opacity:0}@media screen and (min-width:889px){.menu-toggle .bar{display:none}.navbar{width:90%}.nav-menu,.nav-menu ul{align-items:center;margin:0}.nav-menu{display:block;background-color:transparent;width:auto;height:auto;position:static;opacity:1;transition:all .5s ease-out}.nav-menu ul{display:flex;flex-direction:row;justify-content:flex-end}.nav-menu ul li{font-size:1em;width:auto}.nav-menu ul li a{margin:.75rem 0 .75rem 3rem}.nav-links{position:relative;line-height:1.6em;width:auto}.nav-links:hover,.scroll .nav-links:hover{background-color:transparent;color:var(--white)}.scroll .nav-links:hover{color:var(--onbeatblue)}.nav-links-btn{background-color:var(--darkgray);padding:3px 16px;border:1px solid transparent;border-radius:25px;color:var(--offwhite);transition:all .3s ease-out;transform:translateY(-1.5px);text-shadow:none}.nav-links-btn:hover,.scroll .nav-links-btn:hover{padding:3px 16px;background-color:transparent;transform:translateY(-1.5px)}.nav-links-btn:hover{border:solid 1px var(--offwhite);transition:all .3s ease-out;box-shadow:0 0 .2em var(--lightgray);color:var(--white)}.scroll .nav-links-btn{background-color:var(--onbeatblue);padding:3px 16px;border:1px solid transparent;border-radius:25px;transform:translateY(-1.5px)}.scroll .nav-links-btn:hover{border:solid 1px var(--onbeatblue);box-shadow:0 0 .5em var(--darkblue)}.underline::before{content:"";position:absolute;width:100%;max-width:100px;height:1px;bottom:0;left:0;background-color:#fff;opacity:0;box-shadow:1px 1px 2px var(--darkgray);transition:all .3s ease-out}.underline:hover::before{opacity:1;transition:all .3s ease-out}.nav-menu ul li a:hover,.scroll .nav-links-btn,.scroll .nav-links-btn:hover{color:var(--white);transition:all .3s ease-out}}