.page-header {
  position: fixed;
  top: 0;
  z-index: 999;
}



.topbar-logo {
  display: flex;
  grid-column: 4 / span 4;
  grid-row: 1 / span 1;
  margin-block: max(0.9375rem, 0.78125vw);
}



.topbar-logo img {
  width: max(3.75rem, 5.2083333333vw);
  height: auto;
}




.header-nav {
  grid-column: 8 / span 4;
  grid-row: 1 / span 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}



.header-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  font-size: max(0.875rem, 0.7291666666vw);
  text-transform: uppercase;
  font-weight: 500;
  gap: 1em;
}



.header-nav a {
  color: var(--white);
}



.burger {

  display: none;

  grid-column: 8 / span 6;

  justify-self: flex-end;

  align-self: center;

  grid-row: 1 / span 1;

  height: 1.5rem;

  width: 2rem;

  position: relative;

  appearance: none;

  background: none;

  border: none;

  padding: 0;

}



.burgerline {

  position: absolute;

  width: 100%;

  height: 2px;

  background-color: var(--white);

  transition: 0.3s ease;

  transform-origin: center;

}



.burgerline.top {

  top: 0;

}



.burgerline.bot {

  bottom: 0;

}



.burgerline.mid {

  bottom: 50%;

  transform: translateY(50%);

}



.menu-open .burgerline.top {

  top: 50%;

  transform: translateY(-50%) rotate(135deg);

}



.menu-open .burgerline.bot {

  bottom: 50%;

  transform: translateY(50%) rotate(-135deg);

}



.menu-open .burgerline.mid {

  width: 0;

}



.page-header::after {

  content: "";

  opacity: 0.5;

  background-color: var(--black);

  grid-column: 1 / span 14;

  grid-row: 1 / span 1;

  z-index: -1;

}



.quick-nav {

  position: fixed;

  right: 0;

  bottom: 10vh;

  z-index: 999;

}



.page-template-black-bg-page .quick-nav {

  display: none;

}



.quick-nav ul {

  display: flex;

  flex-direction: column;

  list-style-type: none;

  margin: 0;

  padding: 0;

  gap: 0.5em;

}



.quick-nav li {

  transform: rotate(180deg);

}



.quicknav-menu-item {

  writing-mode: vertical-lr;

}



.quicknav-menu-item:hover {

  transform: none;

}



@media (max-width: 1399.98px) {

  .topbar-logo {

    grid-column: 3 / span 5;

  }



  .header-nav {

    grid-column: 8 / span 5;

  }

}



@media (max-width: 1199.98px) {

  .topbar-logo {

    grid-column: 2 / span 6;

  }



  .header-nav {

    grid-column: 8 / span 6;

  }

}



@media (max-width: 991.98px) {

  .burger {

    display: flex;

  }



  .header-nav {

    width: 100%;

    position: absolute;

    grid-column: 1 / span 14;

    top: calc(

      max(3.75rem, 5.2083333333vw) * 8 / 15 + 2 * max(0.9375rem, 0.78125vw)

    );

    justify-content: center;

    display: grid;

    grid-template-rows: 0fr;

    overflow: hidden;

    transition: grid-template-rows 0.4s;

  }



  .menu-open .header-nav {

    grid-template-rows: 1fr;

  }



  .header-nav ul {

    flex-direction: column;

    min-height: 0;

  }



  .menu-open .header-nav ul:first-child {

    margin-top: var(--grid-gap);

  }



  .menu-open .header-nav ul:last-child {

    margin-bottom: var(--grid-gap);

  }

  

  .header-nav::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: var(--black);

    opacity: 0.5;

    z-index: -1;

  }

}