.nav_unactive { display: none; }

nav {
    position: fixed; z-index: 100; top: 0px; left: 0px;
    height: 100%; width: 100%;
    background: rgba(255, 255, 255, 0.95);
    overflow: hidden;
}

nav ul {
    width: 100%;
    list-style-type: none;
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

nav ul li, nav ul li a { 
    display: block;
}

nav ul li a {
    font-size: 2.4em; 
    text-decoration: none;
    padding: var(--main-gap); 
    opacity: 0;
    transition: all 0.3s ease-in;
    color: #666;
}

nav ul li a#mm_1 { transition-delay: 0.3s; }
nav ul li a#mm_2 { transition-delay: 0.4s; }
nav ul li a#mm_3 { transition-delay: 0.5s; }
nav ul li a#mm_4 { transition-delay: 0.6s; }
nav ul li a#mm_5 { transition-delay: 0.7s; }
nav ul li a#mm_6 { transition-delay: 0.8s; }

.nav_active ul li a {
    opacity: 1;
}

@media only screen and (min-width: 960px) {
    nav ul li:hover {  background: #f1f1f1; }
}

@media only screen and (max-width: 960px) {
    nav ul li a {
        font-size: 2em; 
        padding: var(--main-gap-half); 
    }
}

#menu_displayer {
    position: absolute; z-index: 120; top: 50%; right: var(--main-gap);
    transform: translateY(-50%);
}

#menu_displayer a { display: block; height: 28px; width: 28px; position: relative; }

#menu_displayer a svg { 
    width: 28px; height: 4px; position: absolute; left: 0px; z-index: 121; 
    fill: #ccc;
    transition: all 0.3s ease-in;
}

#menu_burger_top { top: 0px; }
#menu_burger_middle { top: 50%; margin-top: -2px; }
#menu_burger_bottom { bottom: 0px; }

.menu_display_active #menu_burger_top { top: 50%; margin-top: -2px; transform: rotate(-45deg); }
.menu_display_active #menu_burger_middle { opacity: 0; }
.menu_display_active #menu_burger_bottom { top: 50%; margin-top: -2px; transform: rotate(45deg); }