.main-menu, .header__region { display: none; } @media (min-width: 666px) { .main-menu, .header__region { display: block; } } .mobile-nav { font-family: Futura, "Century Gothic", AppleGothic, sans-serif; position: absolute; right: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; z-index: 20; pointer-events: none; } @media (min-width: 666px) { .mobile-nav { display: none; } } .js-nav-open .mobile-nav { position: fixed; } .mobile-nav__cover { position: absolute; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.2); opacity: 0; } .js-nav-open .mobile-nav__cover { opacity: 1; pointer-events: auto; } .mobile-nav__toggle { display: block; position: absolute; top: 10px; right: 10px; padding: 6px 29px 4px 4px; z-index: 22; text-decoration: none; font-weight: bold; line-height: 1; border: 1px solid #cccccc; border-radius: 3px; color: #000; pointer-events: auto; } @media (min-width: 666px) { .mobile-nav__toggle { display: none; } } .js-nav-open .mobile-nav__toggle { color: #fff; } .mobile-nav__toggle::after { position: absolute; content: ''; margin-left: 5px; width: 20px; height: 20px; border-top: 12px double #000; border-bottom: 4px solid #000; } .js-nav-open .mobile-nav__toggle::after { border-color: #fff; } .mobile-nav__sheet { background-color: #333333; width: 90vw; height: 100vh; padding: 2rem; transform: translateX(100vw); z-index: 21; } .mobile-nav__sheet a { color: #fff; text-decoration: none; } .mobile-nav__sheet a:hover, .mobile-nav__sheet a:focus { color: #fff; } .js-nav-open .mobile-nav__sheet { pointer-events: auto; box-shadow: -10px 0 10px -10px #333333; transform: translateX(10vw); } .mobile-nav__navbar { display: flex; flex-direction: column; padding: 0; margin: 0; } .mobile-nav__navbar li { list-style-type: none; margin: .4rem 0; } .mobile-nav__cover, .mobile-nav__toggle, .mobile-nav__toggle::after, .mobile-nav__sheet { transition: all 130ms ease-in; } .js-nav-open .mobile-nav__cover, .js-nav-open .mobile-nav__toggle, .js-nav-open .mobile-nav__toggle::after, .js-nav-open .mobile-nav__sheet { transition: all 330ms ease-out; } /*# sourceMappingURL=mobile.css.map */