nav{
   position: fixed;
   top:0px;
   left: 50%;
   transform:  translate(-50%);
   width: 100%;
   max-width: var(--max-larghezza);
   margin: auto;
   z-index: 99;
   background: linear-gradient(to bottom, rgb(94 96 94) 0%,rgba(14,14,14,1) 100%);
   box-shadow: 0px 2px 13px 0px #f18e4187;
}

.menu-toast{ display: none;}

.nav-header{
   width: 100%;
   margin: auto;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   /*background: var(--menu-background-color);*/
   color: var(--menu-text-color);
}

.nav-header div{
   margin: 5px 10px;
}

.menu-logo-large, .menu-logo-small{
   font-size: var(--menu-font-h1);
   font-weight: 200;
}
.menu-logo-large{ display: block;}
.menu-logo-small{ display: none; margin-bottom: 0;}

.nav-header .menu-toast{ display: none;}

.nav-header .menu-ico{
  width: 40%;
  display: flex;
  align-items: center;
  color: var(--icon-color);
  justify-content: space-around;
}

.nav-header div:nth-child(3) i{
   font-size: var(--menu-font-h1);
   padding: 10px;
   cursor: pointer;
   transition: 0.5s all cubic-bezier(0.55, 0.09, 0.68, 0.53);
}

.nav-header div:nth-child(3) i:hover{
   animation: anima-ico infinite 0.3s;
   color: var(--text-hover);
   filter: blur(2px);
   
}

.user-ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 0px 16px 3px;
}


@keyframes anima-ico{
   0%{ transform: skewX(5deg);}
   50%{ transform: skewX(0deg);}
   100%{ transform: skewX(-5deg);}
}
   
nav ul{
   /* flex-container */
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
   justify-content: space-around;
   line-height: calc(var(--dimensione-carattere) + 4px);
   margin: 0;
   /*background: var(--menu-background-color);*/
   box-shadow: inset 0px -7px 14px -6px #4c3904;
}
nav ul li:first-child{ display: none;}

nav ul li{
   position: relative;
   list-style:none;
   font-size: var(--menu-font-h2);
   color: var(--menu-text-color);
   margin: 10px;
   text-align: center;
   padding: 0px 10px;
}

.menu-submenu{
   display: none;
   background: var(--text-hover);
   width: 100%;
   max-width: calc(var(--max-larghezza) - 100px);
   height: 150px;
   margin:auto;
}

nav ul li div:nth-child(2){
   height: 10px;
   width: 100%;
   filter: blur(0px);
   transition: all .5s linear;
}

nav ul li:hover{
   cursor: pointer;
   color: var(--text-hover);
   margin: 10px;
}

nav ul li:hover div:nth-child(2){
   filter: blur(2px);
   background: var(--text-hover);
}


/* MEDIA QUERY */
@media screen and (max-width: 800px){
   .nav-header .menu-ico { width: 50%; }
}

@media screen and (max-width: 600px){
   .nav-header{
      box-shadow: inset 0px -7px 14px -6px #4c3904;
   }
   .nav-header .menu-toast{
      display: block;
      font-size: var(--menu-font-h1);
      font-weight: 300;
      cursor: pointer;
      z-index: 999;
   }
   
   .nav-header .menu-toast .ts-open{display: block;}
   .nav-header .menu-toast .ts-close{display: none; color: #000;}
   
   .menu-logo-large{ display: none;}
   .menu-logo-small{ display: block; margin-bottom: 50px;}
   
   nav ul{
      display: block;
      position: fixed;
      top:0px;
      left: -600px;
      background: linear-gradient(to bottom, #6d6d6d 0%,#0e0e0e 100%);
      line-height: calc(var(--menu-font-size) + 4px);
      width: 100%;
      height: 100vh;
      transition: all .5s ease-out;
   }
   
   nav ul li:first-child {
      display: block;
      margin-top: 60px;
   }
   
   nav ul li {
      color: var(--menu-text-color);
      text-align: left;
   }
   
   nav ul li div:nth-child(2) {
      height: 6px;
      width: 90%;
   }
   nav h2{ font-size: 28px;}
   .menu-submenu{
      display: none;
      background: yellow;
      width: 100%;
      height: 150px;
   }
   
}
@media screen and (max-width: 400px){
   .nav-header .menu-ico { width: 70%; }
}