@font-face {
  font-family: 'Neue Machina';
  src: url('../fonts/PPNeueMachina-PlainThin.woff2') format('woff2'), url('../fonts/PPNeueMachina-PlainThin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('../fonts/PPNeueMachina-PlainUltralight.woff2') format('woff2'), url('../fonts/PPNeueMachina-PlainUltralight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('../fonts/PPNeueMachina-PlainSemibold.woff2') format('woff2'), url('../fonts/PPNeueMachina-PlainSemibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('../fonts/PPNeueMachina-PlainBold.woff2') format('woff2'), url('../fonts/PPNeueMachina-PlainBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('../fonts/PPNeueMachina-PlainLight.woff2') format('woff2'), url('../fonts/PPNeueMachina-PlainLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('../fonts/PPNeueMachina-PlainMedium.woff2') format('woff2'), url('../fonts/PPNeueMachina-PlainMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('../fonts/PPNeueMachina-PlainRegular.woff2') format('woff2'), url('../fonts/PPNeueMachina-PlainRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('../fonts/PPNeueMachina-PlainBlack.woff2') format('woff2'), url('../fonts/PPNeueMachina-PlainBlack.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('../fonts/PPNeueMachina-PlainUltrabold.woff2') format('woff2'), url('../fonts/PPNeueMachina-PlainUltrabold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
body {
  color: #332945;
  line-height: 1.1;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
}
body {
  background: #F8F8F4;
  font-family: 'Neue Machina';
  font-size: 24px;
  overflow: auto;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1600px) {
  .container {
    max-width: 1588px;
  }
}
@media (min-width: 992px) {
  .wrapper {
    margin-top: -148px;
  }
}
.page-content {
  height: 500vh;
}
.page-content .page-content-inner {
  z-index: 10;
}
.page-content .page-content-inner .container {
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}
.page-content .page-content-inner .container .content {
  font-size: 64px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.28px;
}
.page-content .page-content-inner .container .content .image-animate-container {
  position: relative;
  display: inline-block;
  width: 88px;
  height: 55px;
  vertical-align: middle;
}
.page-content .page-content-inner .container .content .image-animate-container img {
  position: absolute;
  inset: 0;
  width: 88px;
  height: 55px;
  object-fit: cover;
  pointer-events: none;
}
.navbar {
  padding: 30px 0;
  top: 0;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99;
}
@media (min-width: 992px) {
  .navbar {
    padding: 30px 0;
    top: 0;
    margin-top: 40px;
    position: sticky;
  }
}
.navbar .container {
  padding: 0 15px;
}
.navbar .logo {
  padding: 0;
  margin: 0;
  width: 170px;
}
.navbar .logo img.alternative {
  display: none;
}
.navbar .navbar-toggler {
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.navbar .navbar-toggler:focus {
  box-shadow: unset;
}
.navbar .navbar-toggler .navbar-toggler-icon {
  position: relative;
  height: 17px;
  width: 36px;
}
.navbar .navbar-toggler .navbar-toggler-icon:after,
.navbar .navbar-toggler .navbar-toggler-icon:before {
  background: #332945;
  content: '';
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  right: 0;
}
.navbar .navbar-toggler .navbar-toggler-icon:after {
  top: 0;
}
.navbar .navbar-toggler .navbar-toggler-icon:before {
  bottom: 0;
}
@media (min-width: 1200px) {
  .navbar .navbar-collapse {
    justify-content: center;
    margin-right: 170px;
  }
}
.navbar .navbar-collapse .nav-item a.nav-link {
  padding: 12px 0;
  font-size: 16px;
  color: #332945;
}
@media (min-width: 992px) {
  .navbar .navbar-collapse .nav-item a.nav-link {
    padding: 12px 24px;
  }
}
.navbar .navbar-collapse .nav-item.dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
}
.navbar .navbar-collapse .nav-item.dropdown .dropdown-toggle:after {
  border: 0;
  background-image: url("../images/arrow.svg");
  background-size: contain;
  width: 10px;
  margin-left: 7px;
  height: 10px;
}
.navbar .navbar-collapse .nav-item.dropdown .dropdown-menu {
  background: #F8F8F4;
  border: unset;
  border-radius: 0;
}
.navbar .navbar-collapse .nav-item.dropdown .dropdown-menu a.dropdown-item {
  padding: 6px 12px;
}
@media (min-width: 992px) {
  .navbar .navbar-collapse .nav-item.dropdown .dropdown-menu a.dropdown-item {
    padding: 6px 24px;
  }
}
.navbar .navbar-collapse .nav-item.dropdown .dropdown-menu a.dropdown-item:hover {
  background: unset;
}
.navbar.light .logo img {
  display: none;
}
.navbar.light .logo img.alternative {
  display: block;
}
.navbar.light .navbar-toggler .navbar-toggler-icon:after,
.navbar.light .navbar-toggler .navbar-toggler-icon:before {
  background: #F8F8F4;
}
.navbar.light .navbar-collapse .nav-item a.nav-link {
  color: #F8F8F4;
}
.navbar.light .navbar-collapse .nav-item.dropdown .dropdown-toggle:after {
  background-image: url("../images/arrow-white.svg");
}
.navbar.light .navbar-collapse .nav-item.dropdown .dropdown-menu {
  background: #332945;
}
.navbar.light .navbar-collapse .nav-item.dropdown .dropdown-menu a.dropdown-item {
  color: #F8F8F4;
}
.headers .header {
  min-height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: end;
  -ms-align-items: end;
  align-items: end;
  padding: 70px;
  position: relative;
}
.headers .header .background {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.headers .header .content {
  width: 100%;
  font-size: 24px;
  color: #332945;
  z-index: 2;
}
.headers .header .content h1 {
  font-size: 126px;
  line-height: 1;
  font-weight: 600;
  width: 100%;
}
.headers .header .content h1 span {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: end;
  -ms-justify-content: end;
  justify-content: end;
  text-align: right;
}
.headers .header .content h1 span:before {
  content: '';
  width: 133px;
  height: 10px;
  background: #332945;
  margin-right: 35px;
  display: inline-block;
}
.headers .header.mouse-over {
  background: #005452;
  --mx: -1000px;
  --my: -1000px;
  --size: 520px;
  --frames: 8;
}
.headers .header.mouse-over .background {
  -webkit-mask-image: url("../images/pixel_blob_sprite.svg"), radial-gradient(#000 98%, transparent 100%);
  mask-image: url("../images/pixel_blob_sprite.svg"), radial-gradient(#000 98%, transparent 100%);
  -webkit-mask-size: calc(var(--size) * var(--frames)) var(--size), var(--size) var(--size);
  mask-size: calc(var(--size) * var(--frames)) var(--size), var(--size) var(--size);
  /* startpositie: frame 0 precies onder de muis */
  -webkit-mask-position: calc((var(--mx) - var(--size) / 2) + 0px) calc(var(--my) - var(--size) / 2), calc(var(--mx) - var(--size) / 2) calc(var(--my) - var(--size) / 2);
  mask-position: calc((var(--mx) - var(--size) / 2) + 0px) calc(var(--my) - var(--size) / 2), calc(var(--mx) - var(--size) / 2) calc(var(--my) - var(--size) / 2);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  image-rendering: pixelated;
  animation: sprite-frames 1.2s steps(7) infinite alternate;
}
@keyframes sprite-frames {
  from {
    -webkit-mask-position: calc((var(--mx) - var(--size) / 2) + 0px) calc(var(--my) - var(--size) / 2), calc(var(--mx) - var(--size) / 2) calc(var(--my) - var(--size) / 2);
    mask-position: calc((var(--mx) - var(--size) / 2) + 0px) calc(var(--my) - var(--size) / 2), calc(var(--mx) - var(--size) / 2) calc(var(--my) - var(--size) / 2);
  }
  to {
    -webkit-mask-position: calc((var(--mx) - var(--size) / 2) + var(--sheetShift)) calc(var(--my) - var(--size) / 2), calc(var(--mx) - var(--size) / 2) calc(var(--my) - var(--size) / 2);
    mask-position: calc((var(--mx) - var(--size) / 2) + var(--sheetShift)) calc(var(--my) - var(--size) / 2), calc(var(--mx) - var(--size) / 2) calc(var(--my) - var(--size) / 2);
  }
}
.headers .header.mouse-over .content {
  color: #F8F8F4;
}
.headers .header.mouse-over .content h1 span:before {
  background: #F8F8F4;
}
.stories {
  background: #CFD6CC;
}
.stories .stories-inner .container {
  padding: 150px 0;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}
.stories .stories-inner .container h4 {
  font-size: 32px;
}
.stories .stories-inner .container .story-header {
  position: absolute;
  top: 180px;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.stories .stories-inner .container .story-header h3 {
  font-size: 93px;
  line-height: 1;
  margin-bottom: 20px;
}
.stories .stories-inner .container .arrows {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  gap: 25px;
  position: absolute;
  top: 290px;
  left: 0;
}
.stories .stories-inner .container .arrows img {
  width: 110px;
}
.stories .stories-inner .container .story-content {
  width: 550px;
  position: absolute;
  top: 490px;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
.stories .stories-inner .container .story-content h3 {
  font-size: 56px;
}
.stories .stories-inner .container .link {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: end;
  -ms-align-items: end;
  align-items: end;
}
.stories .great-balls-of-fire {
  position: absolute;
  right: -14vh;
  top: 0;
  transform: rotate(45deg);
}
.stories .great-balls-of-fire .ball {
  width: 60vh;
  height: 60vh;
  border-radius: 100%;
  background: #333;
  mix-blend-mode: multiply;
}
.stories .great-balls-of-fire .ball.yellow {
  background: #EBEB7D;
}
.stories .great-balls-of-fire .ball.green {
  background: #005452;
  margin-bottom: -20vh;
}
.textsliders {
  overflow: hidden;
}
.textsliders .textslider {
  padding: 400px 0;
}
.textsliders .textslider .second p {
  text-align: right;
}
.textsliders .textslider p {
  color: #404D91;
  font-size: 240px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  will-change: transform;
}
/*# sourceMappingURL=main.css.map */