/* ------------------------------------------------ MENU DESK ------------------------------------------------ */

#menuDesk {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 1em;
    left: 0;
    z-index: 998;

    .container-fluid {
        display: flex;
        align-content: center;
        justify-content: space-between;
    }

    .link {
        display: flex;
        align-items: center;
        text-transform: uppercase;
    }

    .logo {
      width: 80px;
    }
}

#menuDesk .link .menu {
    border-radius: 100px;
    border: solid 1px var(--verde);
    padding: 15px 15px 10px;
    margin-right: 15px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6.3px);
    -webkit-backdrop-filter: blur(6.3px);

    a {
        padding: 0 15px;

        &:hover {
            color: var(--neon);
        }
    }
}

#menuDesk a.cont-menu {
    border-radius: 100px;
    border: solid 1px var(--verde);
    padding: 15px 35px 10px;
    margin-right: 15px;
    color: white;
    background: var(--verde);
    -webkit-box-shadow: 0px 0px 10px 0px var(--grigio-chiaro); 
    box-shadow: 0px 0px 10px 0px var(--grigio-chiaro);

    &:hover {
        background: var(--neon);
        border: solid 1px var(--neon);
        color: var(--verde);
    }
}


.liquid-glass {
  position: relative;
  isolation: isolate;
  border-radius: 100%;
}

.liquid-glass:focus {
  outline: none;
  border-radius: 100%;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 100%;
}

.liquid-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  filter: url(#glass-distortion);
  -webkit-filter: url(#glass-distortion);
  border-radius: 100%;
}

.menu a.active {
  font-weight: bold;
}

.lang-switcher {
  border-radius: 100px;
  border: solid 1px var(--verde);
  padding: 15px 15px 10px;
  margin-right: 15px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6.3px);
  -webkit-backdrop-filter: blur(6.3px);
  display: flex;

  a {
    padding: 0 5px;

    &:hover {
        color: var(--neon);
    }
  }
  
  li {
    list-style: none;
  }
}

/* ------------------------------------------------ MENU SM ------------------------------------------------ */

#menuSm {
  position: fixed;
  width: 100%;
  top: 20px;
  z-index: 999;
}

.barra-menu-sm {
  display: flex;
  justify-content: space-between;
  align-items: center;

  img {
    width: 55px;
  }

  a.cta-std {
    color: white;
    background: var(--verde);
    -webkit-box-shadow: 0px 0px 10px 0px var(--grigio-chiaro); 
    box-shadow: 0px 0px 10px 0px var(--grigio-chiaro);
    padding: 7px 20px 3px;
  }
}

.barra-menu-sm .burger {
  border: solid 1px var(--verde);
  padding: 10px 12px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6.3px);
  -webkit-backdrop-filter: blur(6.3px);

  span {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--verde);
    margin: 2px 0;
  }
}

.menu-aperto {
  width: 100%;
  height: 100vh;
  background: var(--grigio-chiaro);
  position: fixed;
  z-index: 998;
  padding-top: 125px;
  top: -120%;
  transition: all .5s cubic-bezier(.215, .61, .355, 1);

  .link-menu {
    display: block;
    font-size: 1.8em;
    padding-left: 25px;
    padding-bottom: 15px;
  }

  .video-wireframe {
    width: 100%;
    height: auto;
    position: absolute;
    top: -5%;
    left: 0;
    mix-blend-mode: multiply;
    opacity: .1;

    video {
      width: 200%;
      height: 100%;
      object-fit: cover;
    }
  }

  .pallini {
    justify-content: start;
    padding: 5px 25px;
  }

  .coll-menu {
    position: relative;
    z-index: 1;
  }
}

.menu-aperto--open {
  top: 0;
}