#nav_container{
    z-index: 3;
    padding: 1em 0;
    position: absolute;
    width: 100%;
    background-color: rgb(0, 0, 0, .05);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;

}

  #nav_container.visible {
    transform: translateY(0);
    opacity: 1;
  }

  #nav_container.hidden {
    transform: translateY(-100%);
    opacity: 0;
  }

  #nav_container.fixed {
    position: fixed;
    animation: slide-down 0.5s ease-in-out;
  }

    @keyframes slide-down {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }

/* NAV STACK*/
#nav_stack{
    font-size: 2em;
    display: none;
}
#nav_stack:hover{
    color: var(--yellow);
}

/* NAV LOGO */
#nav_logo{
    width: 85%;
}

/* NAV MENU */
#nav_box__menu{
    gap: 3em;
}
#nav_box__menu>.active {
  color: var(--yellow);
}


#nav_box__menu>li{
    text-transform: uppercase;
    font-weight: 700;
    transition: .25s;
}
#nav_box__menu>li:hover{
    color: var(--yellow);
}

/* NAV CONFIG */
#nav_box__config{
    gap: 1em;
}
#nav_box__config>li>select{
    border: none;
    text-transform: uppercase;
    font-weight: 700;
}
#nav_box__config>li>button{
    border: 0.15em solid white;
    text-transform: uppercase;
    font-weight: 700;
    padding: 1em 2.5em;
    border-radius: 5em;
}

/* MEDIAQUERY */
@media (max-width: 1150px){

    #nav_stack{
      display: block;
    }
    #nav_box__menu, #nav_box__config {
     display: none;
    }
    #nav_box__menu.show{
        position: absolute;
        display: flex;
        flex-flow: column;
        align-items: center;
        top: 100%;
        right: 0%;
        width: 100%;
        background-color: black;
    }
    #nav_box__menu.show>li>select{
        border: none;
        text-transform: uppercase;
        font-weight: 700;
    }
  
    #nav_box__menu.show>li>button{
        border: 0.25em solid white;
        text-transform: uppercase;
        font-weight: 700;
        padding: 1em 2.5em;
    }
    #nav_box__menu {
      gap: 0;
     }
     #nav_box__menu>li {
      text-align: center;
      width: 100%;
     }
     #nav_box__menu>li>a {
      width: 100%;
      padding: 1em 0;
     }
     #nav_box__menu>li:nth-child(6) {
      padding: 1em 0;
     }
     #nav_box__menu>li:nth-child(7) {
      padding: 1em 0;
     } 
     #nav_box__menu>li:nth-child(8) {
      padding: 1em 0;
     }
    
}


/* MEDIAQUERY */
@media (0px <= width <=200px) {
   #nav_box{
    justify-content: center;
    gap: 1.5em;
   }
}

/* MEDIAQUERY */
@media (0px <= width <=600px) {
 
  /* NAV LOGO */
#nav_logo{
  width: 55%;
}
}