.collarette-topbar {
  height: 88px;
  background: #fff !important;
  border-bottom: 1px solid #e8e8e8;
}
.collarette-topbar #header-container { padding: 0 4vw; }
.collarette-topbar #logo {
  position: absolute;
  top: 50%;
  left: 50%;
  float: none;
  transform: translate(-50%, -50%);
}
.collarette-topbar #logo img { height: 43px; }
.collarette-topbar #header-container #logo img.black-logo { opacity: 1 !important; }
.collarette-topbar #header-container #logo img.white-logo { opacity: 0 !important; }
.collarette-topbar .button-wrap.right.menu {
  position: absolute;
  top: 50%;
  left: 4vw;
  right: auto;
  float: none;
  transform: translateY(-50%);
}
.collarette-topbar .button-wrap.menu .icon-wrap,
.collarette-topbar #burger-wrapper { width: 48px; height: 48px; }
.collarette-topbar .button-wrap.menu .button-text { display: none; }
.collarette-topbar #burger-wrapper {
  float: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.collarette-topbar .burger-lines #menu-burger { width: 20px; }
.collarette-topbar #header-container #menu-burger span { background: #181818 !important; }
.collarette-topbar .topbar-actions {
  position: absolute;
  top: 50%;
  right: 4vw;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 11;
  pointer-events: auto;
}
.collarette-topbar .topbar-actions a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 44px;
  color: #181818;
  border-radius: 50%;
  transition: background-color .2s ease;
}
.collarette-topbar .topbar-actions a:hover,
.collarette-topbar .topbar-actions a:focus-visible { background: #eee; }
.collarette-topbar .topbar-actions svg { width: 17px; height: 17px; }
.collarette-topbar nav,
.collarette-topbar nav.open {
  position: fixed;
  top: 88px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 88px) !important;
  background: #171717 !important;
}
.collarette-topbar .nav-height { height: 100%; max-height: 100%; }
.collarette-topbar .flexnav li a {
  font-size: clamp(27px, 3.5vw, 49px) !important;
  line-height: 1.25 !important;
}
.collarette-topbar .language-switcher { justify-content: center; margin: 22px 0 0; }
.collarette-topbar .language-switcher .flag-link { width: 42px; height: 42px; }
.collarette-topbar .language-switcher .flag-icon { font-size: 17px; }
.collarette-topbar ~ #content-scroll #hero-image-wrapper { top: 88px; height: calc(100vh - 88px) !important; }

#hero-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
#hero-preview-video.is-playing { opacity: 1; }

@media (max-width: 640px) {
  .collarette-topbar { height: 68px; }
  .collarette-topbar #logo,
  .collarette-topbar #logo a { min-width: 0 !important; height: 25px !important; }
  .collarette-topbar #logo img.black-logo,
  .collarette-topbar #logo img.white-logo { height: 25px !important; min-width: 0 !important; }
  .collarette-topbar .button-wrap.right.menu { left: 12px; }
  .collarette-topbar .topbar-actions { right: 10px; }
  .collarette-topbar .topbar-actions a { width: 36px; height: 42px; }
  .collarette-topbar .topbar-actions svg { width: 16px; height: 16px; }
  .collarette-topbar nav,
  .collarette-topbar nav.open { top: 68px; height: calc(100vh - 68px) !important; }
  .collarette-topbar .flexnav li a { font-size: 29px; }
  .collarette-topbar ~ #content-scroll #hero-image-wrapper { top: 68px; height: calc(100vh - 68px) !important; }
}
@media (max-width: 360px) {
  .collarette-topbar #logo,
  .collarette-topbar #logo a,
  .collarette-topbar #logo img.black-logo,
  .collarette-topbar #logo img.white-logo { height: 23px !important; }
  .collarette-topbar .topbar-actions { right: 6px; }
  .collarette-topbar .topbar-actions a { width: 32px; }
}