#hero {
  position: relative;
  z-index: 1;
}

#navigation {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: #ffffffbb !important;
  display: flex;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  z-index: 10000;

  transform: translateY(80vh);
  opacity: 0;

  box-shadow: none;
}

#navigation.visible {
  opacity: 1;
  transform: translateY(calc(100vh - 100px));
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

#navigation.sticky {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	background-color: #ffffffbb !important;
}

#colibri .h-navigation_sticky .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a,
#colibri .h-navigation_sticky.style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a {
    color: #000000 !important; /* nero */
}

#colibri .h-navigation_sticky .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a:hover,
#colibri .h-navigation_sticky.style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a:hover {
    color: #ff88ff !important;
}

#colibri .h-navigation_sticky .style-2, #colibri .h-navigation_sticky.style-2 {
    background-color: #ffffffbb !important;
}
#colibri .style-10-offscreen, #colibri .style-38-offscreen {
    background-color: #ffeeeecf
}
#offcanvas-wrapper-306-h10 .colibri-menu a {
  font-family: 'Poppins', sans-serif; /* Sostituisci 'NomeFont' con il font desiderato */
}