.nav-button-container {
    /* position: fixed; */
    /* height: calc(9vh + 2px); */
    /* display: grid; */
    /* align-items: center; */
    width: 50px;
    /* padding-right: 2.5%; */
    cursor: pointer;
    z-index: 100;
    overflow: visible;
    transition: opacity 0.25s ease;
}

.second-logo{
    padding-left: 2.5vw;
}

.nav-button{
    overflow: visible;
    display: grid;
    height: 40px;
    align-items: space-between;
    pointer-events: auto;
}

.nav-menu-container{
    height: 100vh;
    width: 97.5vw;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 99;
    display: grid;
    justify-content: flex-end;
    align-items: baseline;
}

.nav-button-container:hover {
    opacity: 0.8;
}
.nav-button-container.buttonactive .nav-top {
    transform: translateY(13.5px) translateX(0) rotate(45deg);
}
.nav-button-container.buttonactive .nav-middle {
    opacity: 0;
}
.nav-button-container.buttonactive .nav-bottom {
    transform: translateY(-13.5px) translateX(0) rotate(-45deg);
}
.nav-top, .nav-middle, .nav-bottom {
    border: none;
    height: 8px;
    /* position: absolute; */
    /* top: 0; */
    transition: all 0.35s ease;
    cursor: pointer;
}

.burger-line{
    background: #5c5751;
}

#burger-menu{
    height: 80%;
    min-height: 15px;
    max-height:25px;
    display: grid;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

.minisite-nav-top, .minisite-nav-middle, .minisite-nav-bottom {
    background: #fed000;
    border: none;
    height: 3px;
    width: 25px;
    transition: all 0.35s ease;
}

.minisite-nav-contact{
    background: #d5d5d5;
    box-shadow: 2px 2px #000304;
}

.minisite-nav-completed{
    background: #2dd1c8;
    box-shadow: 2px 2px #000304;
}


.minisite-nav-development{
    background: #f1da04;
}

.minisite-nav-prod{
    background: #fed000;
}

.dead{
    display: none;
}

.disappear{
    pointer-events: none;
   opacity: 0;
  }

.nav-menu{
    font-family: ModernDos;
    font-weight: bold;
    padding: 0 20px;
    margin-top: 9vh;
    transform: translateX(105%);
    background-color: #dfd2c9;
    color: #5c534e;
    text-align: center;
    /* opacity: 0; */
    transition: all 0.35s ease;
    z-index: 99;
    pointer-events: auto;
    font-size: 1.3em;
    }

    .logo-nav-item{
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .nav-menu-item:nth-child(6){
        padding-top: 15px;
    }

.nav-menu-projects-list{
    /* height: 36vh; */
    display: grid;
    align-content: space-between;
    padding-bottom: 15px;
    padding-top: 7.5px;
}

.nav-menu-item, .nav-menu-item-project{
    display: flex;
    /* justify-content: right; */
    align-items: center;
    /* font-size: 6vh; */
    overflow: hidden;
}

.nav-menu-item, .menu-projects, .nav-menu-item-project a{
    opacity: 0;
}

.nav-menu-item a, .menu-projects, .nav-menu-item-project a{
    padding: 1px 5px;
    transition: all 0.35s ease;
    text-decoration: none;
    color: #5c534e;
    text-transform: uppercase;
}

.nav-menu-item-project{
    padding: 2px 0;
}

.nav-menu-item-project a{
    padding: 3px 5px;
}

.nav-menu-item:last-of-type{
   padding: 25px 0;
}


.nav-menu-item a:hover, .nav-menu-item-project a:hover{
    color: #fdd207;
    background-color: #1e1c1d;
    cursor: pointer;
}

.nav-menu-item-project{
    border-bottom: 2px solid #bdb0aa;
    font-size:1.6em
}

.menu-border-top{
    border-top: 2px solid #bdb0aa;
}


.nav-menu.open {
    opacity: 1;
    transform: translateX(0);
}
/* .nav-menu.open .nav-menu-item a{
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.35s;
} */

.nav-menu.open .nav-menu-item:nth-child(1) {
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.35s;
}

.nav-menu.open .menu-projects{
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.35s;
}

.nav-menu.open .nav-menu-item:nth-child(1) {
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.35s;
}
.nav-menu.open .nav-menu-item:nth-child(2) {
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.35s;
}

.nav-menu.open .nav-menu-in-development{
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.45s;
}
.nav-menu.open .nav-menu-in-production{
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.55s;
}
.nav-menu.open .nav-menu-completed{
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.65s;
}

.nav-menu.open .nav-menu-item:nth-child(6) {
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.75s;
}
.nav-menu.open .nav-menu-item:nth-child(7) {
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.85s;
}
.nav-menu.open .nav-menu-item:nth-child(8) {
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.9s;
}
.nav-menu.open .nav-menu-item:nth-child(9) {
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.95s;
}
.nav-menu.open .nav-menu-item:nth-child(10) {
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 1s;
}
.nav-menu.open .nav-menu-item:nth-child(11) {
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 1.05s;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
   }
    100% {
        opacity: 1;
   }
}

@media(max-width: 800px) {



    @keyframes fadeUp {
        0% {
            opacity: 1;
       }
        100% {
            opacity: 1;
       }
    }
    
    .blink-home-logo{
        min-width: 80vw;
        max-width: 90vw;
    }

    .nav-menu-container{
        width: 100vw;
        height: 100%;
        max-height: 100%;
        max-height: -webkit-fill-available;
    }

    .nav-menu {
        width: 100vw;
        padding: 0;
    }

    .home-header{
        height: calc(9vh + 20px);
    }

    .nav-menu{
        height: 100%;
        margin-top: 0;
    display: grid;
    align-items: space-evenly;
        }

        .menu-projects{
            opacity: 1;
        }

        .menu-projects:after{
            content: ":";
        }

        .nav-menu-item, .nav-menu-item-project{
            opacity: 1;
            /* max-height: 0; */
            border-bottom: 4px solid #bdb0aa;
            transition: all 0s ease;
        }

        .nav-menu.open .nav-menu-item, .nav-menu.open .nav-menu-item-project, .nav-menu-item-project a{
            /* max-height: calc(9vh - 4px); */
            opacity: 1;
        }

        .nav-menu-in-production:before, .nav-menu-in-development:before, .nav-menu-completed:before {
            content: "-";
          }

          .nav-menu-completed:before{
            padding-right: 5px;
          }
          

        .nav-menu.open .nav-menu-item:last-of-type{
            border-bottom: none;
        }

        .home-header{
            align-items: center;
        }

        .nav-menu.open {
            opacity: 1;
            max-height: 100%;
            height: 100%;
            max-height: -webkit-fill-available;
        }

        .nav-menu.open .model-webgl{
          pointer-events: none;
        }
        .nav-menu-item:last-of-type, .logo-nav-item, .nav-menu-item:nth-child(6) {
            padding: 0;
            padding-left: 10px;
         }

         .nav-menu-item-project a {
            padding-left: 15px;
         }
         .nav-menu-item {
            padding-left: 10px;
            font-size: 1.35em;
         }

    .nav-menu-item-project{
    font-size: 1.35em;
    }
    .nav-top, .nav-middle, .nav-bottom {
        border: none;
        height: 5px;
    }

    .nav-button-container {
        width: 35px;
    }
    .nav-button{
        height: 30px;
    }

    .menu-border-top{
        border-top: 0;
    }

    
    .nav-button-container:hover {
        /* opacity: 0.8; */
    }
    .nav-button-container.buttonactive .nav-top {
        transform: translateY(10px) translateX(0) rotate(45deg);
    }
    .nav-button-container.buttonactive .nav-middle {
        opacity: 0;
    }
    .nav-button-container.buttonactive .nav-bottom {
        transform: translateY(-10px) translateX(0) rotate(-45deg);
    }
}

@media(min-width: 801px) {

    /* contact MENU */

    .contact-hamburger-menu{
        background-color: #c1c1c1;
        border: 3px solid #030206;
    }
    
    .contact-hamburger-menu.open{
        transform: translateX(-10%);
    }
    
    .contact-hamburger-menu .nav-menu-item-project{
        border-bottom: 3px solid #030206;
    }
    .contact-hamburger-menu .menu-border-top{
        border-top: 3px solid #030206;
    }
    
    .contact-hamburger-menu a, .contact-hamburger-menu .menu-projects{
        color: #030206;
    }
    .contact-hamburger-menu a:hover{
        background: none;
        color: #d5d5d5;
        text-shadow: 2px 2px #030206;
    }

    
    /* IN PROD MENU */

    .in-prod-hamburger-menu{
        background-color: #000304;
        border: 2px solid #fed000;
        border-right: none;
    }
    
    .in-prod-hamburger-menu .nav-menu-item-project{
        border-bottom: 2px solid #fed000;
    }
    .in-prod-hamburger-menu .menu-border-top{
        border-top: 2px solid #fed000;
    }
    
    .in-prod-hamburger-menu a, .in-prod-hamburger-menu .menu-projects{
        color: #fed000;
    }

    .in-prod-hamburger-menu a:hover{
        color: #000304;
        background: #fed000;
    }

    /* COMPLETED MENU */

    .completed-hamburger-menu{
        background-color: #000304;
        border: 2px solid #00f5f8;
    }
    
    .completed-hamburger-menu .nav-menu-item-project{
        border-bottom: 2px dotted white;
    }
    .completed-hamburger-menu .menu-border-top{
        border-top: 2px dotted white;
    }
    
    .completed-hamburger-menu a{
        color: white;
    }
    .completed-hamburger-menu .nav-menu-in-production{
        color: #ffff00;
    }
    .completed-hamburger-menu .nav-menu-in-development{
        color: #00eb00;
    }
    
    .completed-hamburger-menu .nav-menu-completed{
        color: #d90201;
    }
    .completed-hamburger-menu .nav-menu-contact{
        color: #00f5f8;
    }
    
    .completed-hamburger-menu .menu-projects{
        color: #f902e7;
    }

    .completed-hamburger-menu a:hover{
        color: #000304;
        background: #00eb00;
    }



    

    /* IN DEV MENU */

    .in-dev-hamburger-menu{
        background-color: #02018c;
        border: 2px solid #f1da04;
        box-shadow: 0 0 0 -5px, 15px 20px 0 4px black;
    }
    
    .in-dev-hamburger-menu.open{
        transform: translateX(-6%);
    }
    
    .in-dev-hamburger-menu .nav-menu-item-project{
        border-bottom: 2px solid #fed000;
    }
    .in-dev-hamburger-menu .menu-border-top{
        border-top: 2px solid #fed000;
    }
    
    .in-dev-hamburger-menu a, .in-dev-hamburger-menu .menu-projects{
        color: #f1da04;
    }
    .in-dev-hamburger-menu a:hover{
        color: #02018a;
        background: #33c438;
    }
    .in-dev-hamburger-menu a::first-letter, .in-dev-hamburger-menu .menu-projects::first-letter{
        color: #be1517;
    }
}