/* --------------------------------- *\

	Header

\* --------------------------------- */
.header {
  --logo-height: 3.125rem;
  --color-active: var(--color-white);
  --nav-text-color: var(--color-black);
  --nav-text-size: .9rem;
  --nav-line-height: 1rem;
  --nav-item-margin: 2.5rem;
  width: 100%;
  height: var(--header-height);
  padding: 0 var(--header-padding);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--color-black);
}
.header--bg {
  --color-active: var(--color-white);
  background: var(--color-main);
  border-bottom: 0;
}
.header__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* --------------------------------- *\

	Logo

\* --------------------------------- */
.logo {
  width: auto;
  height: var(--logo-height);
  position: absolute;
  top: calc((var(--header-height) - var(--logo-height)) / 2);
  left: var(--header-padding);
}
.logo > img {
  display: block;
  width: auto;
  height: 100%;
}

/* --------------------------------- *\

	Navigation

\* --------------------------------- */
.nav {
  font-size: var(--nav-text-size);
  line-height: var(--nav-line-height);
  margin-left: auto;
  display: flex;
  font-weight: var(--bold);
}
.nav__item {
  position: relative;
}
.nav__item__link {
  color: var(--nav-text-color);
  text-decoration: none;
  position: relative;
}
.nav__item__link--active {
  color: var(--color-active);
}
.nav__item__link > svg {
  display: none;
}
.nav__item + .nav__item {
  margin-left: var(--nav-item-margin);
}

@media (pointer: fine) {
  a.nav__item__link:hover {
    color: var(--color-active);
  }
}
/* --------------------------------- *\

	Submenu

\* --------------------------------- */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  border-top: 1rem solid transparent;
  --submenu-bg: var(--color-black);
  --submenu-text-color: var(--color-white);
  --submenu-active: var(--color-main);
}
.submenu--cols {
  columns: 2;
  column-gap: 0;
}
.submenu__content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  border-radius: var(--border-radius);
  position: relative;
}
.submenu__item {
  background: var(--submenu-bg);
  white-space: nowrap;
  text-decoration: none;
  color: var(--submenu-text-color);
  padding: 0.85rem 1.25rem;
  width: 100%;
  font-weight: 400;
  font-size: 0.8rem;
  border-top: 1px solid rgba(225, 196, 45, 0.25);
}
.submenu__item--active {
  color: var(--submenu-active);
}
.submenu__item--back {
  display: none;
}
.submenu__item:empty {
  background: var(--submenu-text-color);
  height: 1px;
  width: 100%;
}

@media (pointer: fine) {
  .nav__item:hover .submenu {
    display: block;
  }
  a.submenu__item:hover {
    color: var(--color-black);
    background: var(--submenu-active);
  }
}
@media (pointer: coarse) {
  .nav__item--show .submenu {
    display: block;
  }
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 567px) {
  .nav__item--submenu .nav__item__link {
    padding-right: 2.25em;
  }
  .nav__item--submenu .nav__item__link > svg {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 1.25em;
    height: 1.25em;
    fill: var(--color-black);
  }
  .nav__item--submenu .nav__item__link--active > svg {
    fill: var(--color-white);
  }
  .nav__item--show {
    position: static;
  }
  .nav__item--show .submenu {
    --submenu-text-color: var(--color-black);
    --submenu-active: var(--color-white);
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: calc(100vh - var(--header-padding) * 2 - var(--header-open-margin) * 2);
    padding-top: 2rem;
    border: 0;
    overflow: auto;
  }
  .nav__item--show .submenu__item {
    width: 100%;
    text-align: left;
    background: transparent;
    white-space: wrap;
    font-weight: var(--bold);
    font-size: var(--nav-text-size);
    line-height: var(--nav-line-height);
    border-top: 0;
    padding: 0;
  }
  .nav__item--show .submenu__item--back {
    display: flex;
    align-items: center;
  }
  .nav__item--show .submenu__item--back > svg {
    width: 1.25em;
    height: 1.25em;
    margin-right: 1em;
    transform: rotate(-180deg);
    fill: var(--color-black);
  }
  .nav__item--show .submenu__item + .submenu__item {
    margin-top: var(--nav-item-margin);
  }
  .nav__item--show .submenu--cols {
    columns: auto;
  }
}
/* --------------------------------- *\

	Language

\* --------------------------------- */
.lang {
  display: flex;
  font-size: 0.8rem;
  line-height: var(--nav-line-height);
  margin-left: 3rem;
  font-weight: var(--bold);
}
.lang .nav__item__link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.lang .nav__item__link > svg {
  width: 1.25em;
  height: 1.25em;
  margin-left: 0.5em;
  display: block;
}
.lang .submenu__item > span:nth-child(1) {
  display: none;
}

@media (pointer: fine) {
  .lang .nav__item__link:hover {
    color: var(--color-active);
  }
  .lang .nav__item__link:hover > svg {
    fill: var(--color-active);
  }
}
@media (pointer: coarse) {
  .lang--show .submenu {
    display: block;
  }
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 567px) {
  .lang .nav__item__link {
    display: none;
  }
  .lang .submenu {
    display: block;
    position: static;
  }
  .lang .submenu__content {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background: transparent;
    margin-top: 0;
    gap: 2.75rem;
  }
  .lang .submenu__item {
    color: var(--color-black);
    padding: 0;
    width: auto;
    font-weight: 700;
    font-size: var(--nav-text-size);
    background: transparent;
  }
  .lang .submenu__item--active {
    color: var(--color-active);
  }
  .lang .submenu__item > span:nth-child(1) {
    display: block;
    text-transform: uppercase;
  }
  .lang .submenu__item > span:nth-child(2) {
    display: none;
  }
  .lang .submenu__item + .submenu__item {
    border-top: 0;
  }
}
/* --------------------------------- *\

	Certificates

\* --------------------------------- */
.certificates {
  display: flex;
  margin-left: 3rem;
}
.certificates:empty {
  display: none;
}
.certificates > div {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.certificates > div + div {
  margin-left: 1rem;
}
.certificates > div svg {
  fill: var(--color-black);
}
.certificates > div svg, .certificates > div a {
  width: 100%;
  height: 100%;
  display: block;
}

@media (pointer: fine) {
  .certificates a:hover svg {
    fill: var(--color-white);
  }
}
/* --------------------------------- *\

	Some update on landscape

\* --------------------------------- */
@media (min-width: 568px) and (max-width: 1023px) and (orientation: landscape) {
  .header {
    --logo-height: 2.5rem;
    --nav-item-margin: 2.15rem;
  }
}
/* --------------------------------- *\

	Mobile menu

\* --------------------------------- */
@media (max-width: 767px) and (orientation: portrait), (max-width: 567px) {
  .nav {
    display: none;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    align-items: flex-start;
    position: relative;
    width: 100%;
  }
  .nav__item {
    width: 100%;
  }
  .nav__item + .nav__item {
    margin-left: 0;
    margin-top: var(--nav-item-margin);
  }
  .nav--slide {
    transform: translateX(-100%);
  }
  .nav--slide ~ .lang, .nav--slide ~ .social, .nav--slide ~ .certificates {
    transform: translateX(-100%);
  }
  .lang {
    display: none;
    margin-left: 0;
    margin-top: 3rem;
    font-size: var(--nav-text-size);
    width: 100%;
    justify-content: center;
  }
  .lang__item + .lang__item {
    margin-left: var(--margin-large);
  }
  .certificates {
    display: none;
    margin-left: 0;
    margin-top: 3rem;
    width: 100%;
    justify-content: center;
  }
  .certificates > div {
    width: 5rem;
    height: 5rem;
  }
  .header {
    --header-open-margin: calc(var(--header-height) + 2rem);
  }
  .header--open {
    width: 100%;
    height: 100%;
    background: var(--color-main);
    --nav-text-size: 1.75rem;
    --nav-line-height: 1.75rem;
    --nav-item-margin: 2.5rem;
  }
  .header--open .header__content {
    flex-direction: column;
    justify-content: flex-start;
    margin-top: var(--header-open-margin);
  }
  .header--open .nav,
  .header--open .lang,
  .header--open .social,
  .header--open .certificates {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
}
/* --------------------------------- *\

	Hamburger

\* --------------------------------- */
.hamburger {
  padding: 0 0;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}
.hamburger:hover {
  opacity: 1;
}
.hamburger.is-active:hover {
  opacity: 1;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: var(--color-black);
}

.hamburger-box {
  width: 2.75rem;
  height: 2.1rem;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: calc(0.2rem / -2);
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 2.75rem;
  height: 0.2rem;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}
.hamburger-inner::before {
  top: -0.95rem;
}
.hamburger-inner::after {
  bottom: -0.95rem;
}

/*
 * Spin
 */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger {
  --hamburger-color: var(--color-black);
  display: none;
  outline: 0;
  position: absolute;
  right: var(--header-padding);
  top: 2rem;
  z-index: 802;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  background-color: var(--hamburger-color);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 567px) {
  .hamburger {
    display: block;
  }
}
@media print {
  .hamburger {
    display: none;
  }
}

/*# sourceMappingURL=--8-1-header.css.map */