/* transparent header */
.header--primary .header-inner {
  transition: height 0.1s linear 0s;
}

.header-transparent {
  --header-height: 110px;
  --header-bg: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0) 100%);
  --header-box-shadow: none;
  --site-name-link-clr: var(--clr-white);
  --site-name-link-active-clr: var(--clr-yellow-orange);
  --header-links-clr: var(--clr-white);
  --header-links-active-clr: var(--clr-yellow-orange);
  --dropdown-link-clr: var(--clr-gray-dark);
  --dropdown-arrow: url(/themes/custom/gff/components/header/css/../img/white_dropdown_arrow.svg);
  --header-text-clr: var(--clr-white);
  --header-white-logo: url(/themes/custom/gff/components/header/css/../img/GFF_Logo_white.svg);
}

html[lang="fr"] .header-transparent {
  --header-white-logo: url(/themes/custom/gff/components/header/css/../img/GFF_French_logo_white.svg);
}

.header-transparent .logo {
  position: relative;
}

.header-transparent .logo img {
  opacity: 0;
}

.header-transparent .logo:after {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--header-white-logo) no-repeat center center transparent;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  max-width: calc(100% - 12px);
  background-size: 100%;
}

.header-transparent.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--clr-white);
}