.menu-wrap, .mobile-menu { display: none; }


@media only screen and (max-width: 900px) {

    .hero-nav { display: none; }

    .menu-wrap { display: flex; position: fixed; top: 0; left: 0; z-index: 10; }
    .menu-wrap .toggler { position: absolute; top: 0; right: 0px; z-index: 12; cursor: pointer; width: 60px; height: 60px; opacity: 0; }
    .menu-wrap .hamburger { position: absolute; top: 0; right: 0px; z-index: 11; cursor: pointer; width: 60px; height: 60px; padding: 3px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #D4BA71; }

    /* Hamburger Line */
    .menu-wrap .hamburger { padding: 1px;  }
    .menu-wrap .hamburger > div { position: relative; width: 24px; height: 3px; background-color: black; display: flex; align-items: center; justify-content: center; transition: all, .5s; }
    .menu-wrap .hamburger > div:before,
    .menu-wrap .hamburger > div:after { content: ''; position: absolute; z-index: 1; top: -8px; width: 100%; height: 3px; background: inherit; }
    .menu-wrap .hamburger > div:after { top: 8px; }

    .menu-wrap .toggler:checked + .hamburger > div { transform: rotate(132deg); }

    /* Turn Lines into 'X' */  
    .menu-wrap .toggler:checked + .hamburger > div:before,
    .menu-wrap .toggler:checked + .hamburger > div:after { top: 0; transform: rotate(90deg); }

    /* Show Menu */
    .menu-wrap .toggler:checked ~ .mobile-menu { visibility: visible; }

    .menu-wrap .toggler:checked ~ .mobile-menu > div { transform: scale(1); transition-duration: 0.7s; height: 200vw; }
    .menu-wrap .toggler:checked ~ .mobile-menu > div > div { opacity: 1; transition:  opacity 0.4s ease 0.4s; }

    .menu-wrap .mobile-menu {  top: 0;  right: 0; width: 100%; height: 100%; visibility: hidden; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .menu-wrap .mobile-menu > div { background-color: #0F0F0F; transform: scale(0); transition: all 0.6s ease; width: 100vw; height: 0vw;  display: flex; flex: none; align-items: flex-start; justify-content: center; }
    .menu-wrap .mobile-menu > div > div { text-align: center; max-width: 90vw; max-height: 100vh; } 

    .nav-menu { display: flex; flex-direction: column; justify-content: space-around; align-items: center; min-height: 400px; }

    .hero-nav-item { color: rgb(228, 228, 228); }

    .active { border-bottom: 3px solid white; }


}