/* ==========================

  .header

============================*/

.header {
  position: relative;
}

.header,
.header__bg,
.header__sitesearchcontainer {
  height: 220px;
}

.header .nav,
.header .header__bgbar,
.header .header__logolink
.header .header__logocontainer svg, {
  transition: transform .3s;
}

.header svg {
  overflow: hidden;
  vertical-align: middle;
}

/* ==================================

  Header background / header topbar

====================================*/


.header__bgbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header__bgbar,
.header__topbar {
  z-index: 1000;
}

.mobileheader-bg {
  fill: #232387;
}

.header__bgbar svg {
  position: absolute;
  top: -26px;
  right: -246px;
}

.header__bgbar svg polygon {
  fill: #232387;
}

.header__bgbar--2 svg {
  opacity: .5;
}

.header__topbar {
  position: fixed;
  height: 40px;
  left: 0;
  right: 0;
  top: 0;
}

.header__bgbar,
.header__topbar {
  z-index: 1000;
}

.header__topbar > .container {
  position: relative;
}

.header__topbar-container {
  pointer-events: none;
}

.header__topbar-container-contrast {
  display: none;
  position: absolute;
  top: -36px;
  right: -65px;
  background: no-repeat url(https://www.hengelo.nl/designs/internet/images/header-bg-dark.svg);
  width: 3555px;
  height: 162px;
}

.header__topbar>.container>.row {
  background: #fff;
  height: 40px;
  z-index: 10;
}

.header__topbar-white-bg {
  pointer-events: auto;
  position: relative;
}

.header__toplinks > * {
  margin-left: 40px;
}

.header__logocontainer svg {
  position: absolute;
  top: -37px;
  left: -1463px;
  z-index: -1;
  pointer-events: none;
}

.header-logo-container {
  fill: #fff;
}

.header__logolink {
  position: absolute;
  top: 21px;
  left: 33px;
  z-index: 1;
}

.header .header__logoimg {
  transition: height .3s;
}

.header__logoimg {
  height: 86px;
}

.header__toplinks > * {
  margin-left: 40px;
}

.header__topbar-white-bg::after {
  content: '';
  position: absolute;
  top: -41px;
  right: -70px;
  height: 80px;
  width: 80px;
  transform: skew(-60deg);
  background: #fff;
  z-index: -1;
}

/* ==================================

  Header navigation

====================================*/

.nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 89px;
}

.nav__bottombar {
  position: absolute;
  bottom: 0;
  right: 0;
  background: no-repeat url(https://www.hengelo.nl/designs/internet/images/nav-bottom-bar.svg);
  width: 799px;
  height: 6px;
}

.nav__mainmenu {
  width: 100%;
}

.nav__mainmenu>.container {
  padding-left: 35px;
  padding-right: 10px;
}

.nav__mainmenulinks {
  pointer-events: none;
  transform: translateY(10px);
}

.nav__menuhoveritem.enable-transition {
  transition: left .3s, width .3s;
}

.nav__menuhoveritem--mover {
  width: 0;
  visibility: visible;
  transform: translate(14px, -24px) skew(-60deg);
}

.nav__menuhoveritem {
  position: absolute;
  top: 100%;
  left: -79px;
  background: #B9975B;
  height: 17px;
  display: inline-block;
  z-index: 5;
  width: calc(100% + 66px);
  transform: translate(0, -19px) skew(-60deg);
  visibility: hidden;
  pointer-events: none;
}

.nav__mainmenulink--selected {
  color: #B9975B;
}

.nav__mainmenulink {
  font-family: Viga,sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.07px;
  pointer-events: auto;
  color: #fff;
  transition: color .3s;
  position: relative;
  margin: 0 0 5px;
  padding: 0 0 25px;
}

.nav__mainmenulink:first-of-type .nav__menuhoveritem {
  left: -60px;
  width: calc(100% + 46px);
  transform: translate(0, -19px) skew(-60deg);
}

.nav__menuhoveritem {
  position: absolute;
  top: 100%;
  left: -79px;
  background: #B9975B;
  height: 17px;
  display: inline-block;
  z-index: 5;
  width: calc(100% + 66px);
  transform: translate(0, -19px) skew(-60deg);
  visibility: hidden;
  pointer-events: none;
}

.nav__mainmenulink:after {
  content: '';
  position: absolute;
  left: calc(100% + 20px);
  top: 2px;
  width: 2px;
  background: #fff;
  height: 40px;
  transform: skew(-60deg);
  pointer-events: none;
  transition: background .3s;
}

.nav__mainmenulink--selected:after {
  background: #B9975B;
}

.nav__menuhoveritem--mover {
  width: 0;
  visibility: visible;
  transform: translate(14px, -24px) skew(-60deg);
}

.nav__mainmenulink:last-of-type:after {
  display: none;
}

.nav__mainmenulink:hover {
  color: #B9975B;
}

/* ==========================

  Mobile header

============================*/

.header .c-mobileheader {
  position: relative;
}

.header .c-mobileheader__bgbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  mix-blend-mode: multiply;
  z-index: 1000;
}

.header .c-mobileheader__bg {
  position: absolute;
  top: 0;
  right: 0;
}

.header .c-mobileheader__menucontainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
}
.header .c-mobileheader__menuelements {
  position: absolute;
  top: 0;
  right: 0;
  padding: 19px 25px 0 0;
}

.header .c-mobileheader__menuelements a {
  color: #fff;
  text-decoration: none;
  padding: 8px;
}

.mobilemenu__logocontainer {
  position: fixed;
  top: -28px;
  left: calc(100vw - 274px);
  z-index: 4000;
  transition: left .3s;
}

.header .c-mobileheader__menulabel--menu {
  position: relative;
  top: 1px;
}

.header .c-mobileheader__menulabel {
  margin-top: 5px;
}

/* ==========================

  Header components

============================*/

.arrowdownstroke {
  stroke: #322b94;
}

.languageselector {
  position: relative;
  cursor: pointer;
  color: #10069F;
}

.languageselector__otherlanguages {
  box-shadow: 0 2px 30px 0 rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 35px;
  left: -3px;
  background: #fff;
  transition: opacity .3s, transform .3s;
  transform: translateY(-5px);
  padding: 5px 7px;
  background: #F1F6FF;
}

.languageselector {
  position: relative;
  cursor: pointer;
  color: #10069F;
}

.header-search-icon {
  stroke: #322B94;
}

.sitesearch {
  position: absolute;
  top: 352px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================

  Responsive breakpoints

============================*/

@media (min-width: 992px) {
  .sitesearch {
    top: calc(50% - 25px + 72.5px);
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 768px) {
  .sitesearch {
    top: 270px;
  }
}

@media (max-width: 1199.98px), not all, not all {
  .nav__mainmenulink {
    font-size: 17px;
    margin-left: 35px;
    margin-bottom: 0;
    white-space: nowrap;
  }
  
  .nav__bottombar, .nav__menuhoveritem {
    display: none;
  }
  
  .nav__mainmenulink::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .header,
  .header__bg,
  html.enable-site-search .header,
  html.enable-site-search .header__bg {
    height: 150px;
    min-height: 150px;
  }
}