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


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

    .hero-nav { display: none; }

    .topbar { display: none; }

    .menu-wrap { display: flex; position: fixed; top: 0; left: 0; z-index: 12; width: 100%; background-color: white; min-height: 80px; }
    .logo-wrapper-mobile { position: absolute; top: 18px; left: 0px; }
    .logo-wrapper-mobile h2 { color: black; text-align: left; font-size: 23px; }
    .mobile-menu-phone { display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 30px; right: 0%; left: 15%; }
    .mobile-menu-phone img { height: 24px; width: auto; margin-right: 5px; }
    .mobile-menu-phone p { font-size: 14px; }
    .menu-wrap .toggler { position: absolute; top: 11px; right: 0px; z-index: 12; cursor: pointer; width: 60px; height: 60px; opacity: 0; }
    .menu-wrap .hamburger { position: absolute; top: 11px; 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: #00000000; }

    /* Hamburger Line */
    .menu-wrap .hamburger { padding: 1px;  }
    .menu-wrap .hamburger > div { position: relative; width: 24px; height: 3px; background-color: rgb(0, 0, 0); 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: white; transform: scale(0); transition: all 0.6s ease; width: 100vw; height: 0vw;  display: flex; flex: none; align-items: flex-start; padding-top: 10px; 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; }
    .mobile-menu .nav-item { color: black; }
    .hero-nav-item { color: white; }

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


}