/* ************* */
/*   ALGEMEEN   */
/* *********** */

:root {
  --achtergrond: #212121;
  --tekstkleur: #f0f8ff;
  --lichtgrijs: rgb(177, 177, 177);
  --accent: rgb(238, 208, 108);
}


.achtergrond.foto.afsluiter, .achtergrond.foto.opener { position: relative;}
.body-wrapper {padding-top: 5rem!important;}

@media only screen and (max-width: 600px) {
  .body-wrapper {padding-top: 0rem!important;}
}


#scrolly {
  position: relative;
  margin: 0 auto;
}

article {
  position: relative;
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
}

figure {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: 100%;
  margin: 0;
  z-index: 0;
  padding: 0 !important;
  overflow: hidden;
}

#iframer img {
  margin: 0 auto;
  width: 100%;
  max-width: 760px;
  position: absolute;
  top: 4em;
  opacity: 0;
  margin-left: 0;
  left: 0;
  right: 0;
  text-align: center;
}

figure img.hi,
figure img.hi.bye.hi,
figure img.hi.bye.hi.bye.hi,
figure img.hi.bye.hi.bye.hi.bye.hi {
  -webkit-animation: fade-in 2s cubic-bezier(0, 1, 1, 1) both;
  animation: fade-in 2s cubic-bezier(0, 1, 1, 1) both;
}

figure img.hi.bye,
figure img.hi.bye.hi.bye,
figure img.hi.bye.hi.bye.hi.bye {
  -webkit-animation: gone 1s cubic-bezier(0, 1, 1, 1) both;
  animation: gone 1s cubic-bezier(0, 1, 1, 1) both;
  opacity: 0 !important;
}

figure img.hi.fadetoback {
  -webkit-animation: darker 1s cubic-bezier(0, 1, 1, 1) both;
  animation: darker 1s cubic-bezier(0, 1, 1, 1) both;
  opacity: 0.5 !important;
}

.step {
  margin: 0 auto;
  font-size: 1rem;
  width: 80%;
  max-width: 450px;
  margin-bottom: 60vh;
  padding: 0.7em;
  border-radius: 5px;
}

.step:first-child {
  margin-top: 0vh !important;
}

.step.afsluiter:first-child {
  margin-top: 20vh !important;
}

.step.shorty:first-child {
  margin-top: 0vh !important;
}

.step:last-child {
  margin-bottom: 20vh !important;
}

.step.shorty:last-child {
  margin-bottom: 0vh !important;
}

.step p {
  text-align: left;
  font-size: 1.4rem;
  font-family: arnhem-blond, Georgia, serif !important;
  padding: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0.5em !important;
}

.step img {
  margin-top: 10px;
  max-width: 100% !important;
}

.afl.container h2 {
  font-size: 4em !important;
  font-weight: 400 !important;
  text-align: center;
  color: var(--accent) !important;
}

.afl.container h2 span {
  font-size: 0.6em;
  display: block;
  color: var(--tekstkleur) !important;
  margin-top: -0.5em;
}

div#subtitles,
div#subtitles2,
div#subtitles3,
div#subtitles4 {
  color: grey;
  font-size: 1.6em;
  text-align: center;
}

/* Hide the input */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.check-trail {
  display: flex;
  align-items: center;
  width: 3.6em;
  height: 2em;
  background: rgb(238, 208, 108);
  border-radius: 2.5em;
  transition: all 0.5s ease;
  cursor: pointer;
}

.check-handler {
  display: flex;
  margin-left: 0.5em;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  background: rgb(255, 229, 143);
  border-radius: 50%;
  transition: all 0.5s ease;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.check-handler:before {
  content: "\00D7";
  color: white;
  font-size: 1em;
  font-weight: bold;
}

input[type="checkbox"]:checked + .check-trail {
  background: #16a085;
}

input[type="checkbox"]:checked + .check-trail .check-handler {
  margin-left: 50%;
  background: #1abc9c;
}

input[type="checkbox"]:checked + .check-trail .check-handler::before {
  content: "\2714";
}

.achtergrond.foto.opener::before {
  content: "";
  background-image: url(assets/aanslag22-kleinst.jpg);
  filter: blur(10px) grayscale(1);
  -webkit-filter: blur(10px) grayscale(1);
  -moz-filter: blur(10px) grayscale(1);
  -o-filter: blur(10px) grayscale(1);
  -ms-filter: blur(10px) grayscale(1);
  background-size: cover;
  background-position: top right;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.2;
}

.start_scroll.hi {
  -webkit-animation: starttitel 3s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
  animation: starttitel 3s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
  margin-top: 2em;
}

.start_titel.hi {
  -webkit-animation: starttitel 3s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
  animation: starttitel 3s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
}

.achtergrond.foto.opener.hi::before,
.achtergrond.foto.afsluiter.hi::before {
  -webkit-animation: start 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
  animation: start 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
}

.bye {
  -webkit-animation: gone 1s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
  animation: gone 1s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
}

.achtergrond.foto.afsluiter, .achtergrond.foto.opener {
  position: relative;
}

.achtergrond.foto.afsluiter::before {
  content: "";
  background-image: url(assets/04839743.jpg);
  filter: blur(10px) grayscale(1);
  -webkit-filter: blur(10px) grayscale(1);
  -moz-filter: blur(10px) grayscale(1);
  -o-filter: blur(10px) grayscale(1);
  -ms-filter: blur(10px) grayscale(1);
  background-size: cover;
  background-position: top right;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.2;
}

.names {
  opacity: 0;
}

.names.hi {
  -webkit-animation: starttitel 1s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
  animation: starttitel 1s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
}

.names.hi.bye {
  -webkit-animation: gone 1s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
  animation: gone 1s cubic-bezier(0.17, 0.67, 0.83, 0.67) both;
}

.achtergrond.foto.uniekenaam2 {
  background-image: url(assets/zaventem2.jpg);
}

.achtergrond.foto.uniekenaam3 {
  background-image: url(assets/AP_20160322_BKKS505.jpg);
}

body > main {
  color: var(--tekstkleur) !important;
  background-color: var(--achtergrond);
}

main {
  background-color: var(--achtergrond) !important;
  color: var(--tekstkleur);
}

.DS2020-overhead__header .label-text {
  color: var(--accent) !important;
}

a:link,
a,
a:hover {
  color: var(--accent) !important;
}

blockquote {
  color: var(--accent);
  border-top: 1px solid var(--accent);
}

.is-small p,
.DS2020-container__inner,
.credits {
  opacity: 0.87;
}

.is-950 {
  margin: 0px auto;
  padding: 0;
  width: 100%;
  max-width: 950px;
}

.is-950 img {
  margin: 0px auto;
  padding: 20px 0 0 0;
  width: 100%;
  max-width: 950px;
}

.site-logo img,
.logo img {
  background-color: var(--achtergrond) !important;
}

.DS2020-headline.DS2020-headline--feature {
  color: var(--tekstkleur) !important;
}

.DS2020-introduction.DS2020-introduction--feature {
  margin-bottom: 1em;
}

.DS2020-storyimage__caption {
  color: var(--lichtgrijs);
  font-family: Libre Franklin, Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 3em;
}

.DS2020-storyimage__caption.linkje {
  text-align: right;
  opacity: 0.87;
  margin-top: -85px;
  margin-bottom: 80px;
}

.DS2020-timestamp {
  color: var(--lichtgrijs);
}

.teaserke {
  border: 1px solid var(--lichtgrijs);
  background-color: var(--achtergrond);
  padding: 1em;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  font-family: "Libre Franklin", Helvetica, Arial, sans-serif;
  font-size: 1rem !important;
}

.teaserke .info {
  padding: 5px;
}

#question1 span {
  font-weight: 600;
  font-size: 1rem;
}

div.is-small img {
  margin: 2em auto !important;
}

lottie-player#firstLottie,
lottie-player#secondLottie,
lottie-player#thirdLottie {
  width: 170px;
  height: 150px;
}

.hold.left,
.center.center {
  text-align: left !important;
}

.auteurbox {
  margin: 0 0 1em 0;
}

video {
  filter: sepia(0.9);
  opacity: 0.9;
  mix-blend-mode: luminosity;
}

.fl.cen {
  display: flex;
  justify-content: center;
}

#kopke {
  text-align: center;
  margin-top: 2em;
  font-family: Libre Franklin, Helvetica, Arial, sans-serif;
  font-size: 0.8em;
}

.avatar {
  width: 100px;
  border-radius: 50%;
  margin: 1em auto;
}

div#knopkesblok {
  border: 1px solid white;
  padding: 25px;
  background-color: #00000050;
  font-family: "Libre Franklin", Arial, sans-serif;
  font-size: 1.1rem;
}

.DS2020-header.DS2020-overhead__header {
  font-size: 1.2rem !important;
  padding-bottom: 10px;
  font-weight: 600;
}

.tekstnaam {
  font-weight: 600;
  color: white;
}

.tijdlijn-tekst p {
  margin-block-end: 0 !important;
  margin-block-start: 0 !important;
  font-size: 1rem;
  font-family: Libre Franklin, Helvetica, Arial, sans-serif;
  text-align: left;
}

.tijdlijn-uur {
  font-weight: 600;
  font-size: 1.1rem !important;
  color: var(--accent);
}

.step.shorty {
  margin-top: 50vh !important;
  margin-bottom: 0vh !important;
  opacity: 0;
}

/* *********** */
/*   MOBIEL   */
/* ********* */

@media only screen and (max-width: 768px) {
  .step {
    margin-bottom: 85vh;
    width: 80%;
  }

  .step:first-of-type {
    margin-top: 20vh;
  }

  .step:first-child {
    margin-top: 10vh !important;
  }

  .step p {
    font-size: 1.2rem;
  }

  .step div {
    padding: 1rem;
  }

  .achtergrond {
    margin-top: 50px;
  }

  .DS2020-container__inner {
    padding: 30px;
  }

  .step:last-child {
    margin-bottom: 20vh !important;
  }

  .step p {
    width: 100%;
    font-family: arnhem-bold, Georgia, serif !important;
    font-size: 1.5rem;
    padding: 1rem 0 0 0;
  }

  .step {
    margin-bottom: 95vh;
  }

  #scrolly figure {
    top: 20%!important;
  }

  #scrolly {
    padding: 0 10px;
  }

  .witnascrolly {
    margin-top: 0px !important;
  }

  .achtergrond.witnascrolly {
    margin-top: 0px !important;
  }

  .article__body {
    margin-top: -70px;
  }

  #iframer {
    max-width: 100%;
    max-height: 70vh !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .step div {
    padding: 0;
    line-height: 1.3;
    font-size: 1.1rem;
  }

  .off-canvas__wrap {
    margin-top: 4.3em !important;
  }

  .scroll-icon-container {
    display: block;
    margin-top: 2em;
  }

  .achtergrond.foto.opener::before {
    background-image: url(assets/BELLINblg.jpg);
  }

  .achtergrond.foto.afsluiter::before {
    background-image: url(https://img.nieuwsblad.be/2AU9wivtEimFfWLeo5zkNbEOBAA=/960x640/smart/https%3A%2F%2Fstatic.nieuwsblad.be%2FAssets%2FImages_Upload%2F2021%2F03%2F23%2F12%2Fd9ea184c-1831-4c94-a7e0-f75bc063a246.jpg);
    background-position: top left;
  }

  lottie-player#firstLottie,
  lottie-player#secondLottie,
  lottie-player#thirdLottie {
    width: 120px;
    height: 120px;
  }

  .achtergrond.foto .DS2020-container__inner.mobiletop,
  .achtergrond.video .DS2020-container__inner.mobiletop {
    margin-top: 0px !important;
  }

  .achtergrond.foto .DS2020-container__inner.mobiletop,
  .achtergrond.video .DS2020-container__inner.mobiletop {
    margin-top: 0px !important;
  }

  div#knopkesblok {
    font-size: 1rem !important;
  }

  div#subtitles,
  div#subtitles2,
  div#subtitles3,
  div#subtitles4 {
    font-size: 1.3em !important;
    line-height: 1.3;
  }

  div#subtitles3 {
    margin-top: 1em;
  }

  .afl.container h2 {
    font-size: 3em !important;
  }

  .afl.container h2 span {
    font-size: 0.6em;
  }

  .avatar {
    width: 80px !important;
  }

  #iframer {
    min-height: 70vh !important;
  }

  #iframer img {
    top: 8.5em !important;
  }

  .tijdlijn-tekst p {
    font-size: 0.8rem!important;
  }

  p.tijdlijn-uur span, p.tijdlijn-uur {
    font-size: 1.5rem !important;
    font-family: "arnhem-blond", Georgia, serif!important;
  }

  p.tijdlijn-count #tijdlijn-timeframe2, p.tijdlijn-count #tijdlijn-timeframe {font-size: 0.9rem!important;margin-top:0.5em;}


  div.is-small img {
    margin-bottom: 2em !important;
  }

  .step.afsluiter:first-child {
    margin-top: 10vh !important;
  }

  #g-kaart-bxl-Artboard_1 .g-pstyle2 {
    transform: translate(-2rem, -450%);
  }

  #g-kaart-bxl-Artboard_1 .g-pstyle0 {
    font-size: 12px !important;
  }

  #spot-zav {
    max-width: 100px !important;
    word-wrap: break-word !important;
    white-space: initial !important;
    transform: translateY(-1rem) !important;
  }

  .social-media img {
    width: 15% !important;
  }

  .social-media {
    margin-bottom: 0rem !important;
  }

  .achtergrond.minderwit {
    margin-top: 0px !important;
    padding-top: 0px;
  }

  .body-wrapper {
    padding-top: 0rem !important;
  }
}

/* ************ */
/*   DESKTOP   */
/* ********** */

@media only screen and (min-width: 769px) {
  .scroll-icon-container {
    margin-top: 4em;
  }

  .afl.container h2 {
    text-align: left;
  }

  .container.top {
    margin-top: -3em !important;
  }

  .witnascrolly {
    margin-top: 0px !important;
    z-index: 999 !important;
  }

  .theme-live .breadcrumb {
    display: none;
  }

  .step {
    font-size: 1.5em;
  }

  .step p {
    width: 100%;
    font-family: arnhem-bold, Georgia, serif !important;
    font-size: 1.5rem;
    padding: 1rem 0 0 0;
  }

  .step div {
    padding: 0;
    line-height: 1.3;
    font-size: 1.1rem;
  }

  .ntm {
    max-width: 997px;
    margin: 0 auto !important;
  }

  .main-container {
    max-width: 100%;
  }

  #scrolly {
    margin-top: 100px;
  }

  #scrolly figure {
    top: 20% !important;
}

  #iframer {
    height: 80vh !important;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
}

@media only screen and (min-width: 600px) {
  .DS2020-headline.DS2020-headline--feature {
    width: 550px;
  }
}

/* ************** */
/*   KEYFRAMES   */
/* ************ */

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes start {
  0% {
    opacity: 0.2;
    filter: blur(10px) grayscale(1);
    -webkit-filter: blur(10px) grayscale(1);
    -moz-filter: blur(10px) grayscale(1);
    -o-filter: blur(10px) grayscale(1);
    -ms-filter: blur(10px) grayscale(1);
  }

  100% {
    opacity: 0.6;
    filter: blur(2px) grayscale(1);
    -webkit-filter: blur(2px) grayscale(1);
    -moz-filter: blur(2px) grayscale(1);
    -o-filter: blur(2px) grayscale(1);
    -ms-filter: blur(2px) grayscale(1);
  }
}

@keyframes start {
  0% {
    opacity: 0.2;
    filter: blur(10px) grayscale(1);
    -webkit-filter: blur(10px) grayscale(1);
    -moz-filter: blur(10px) grayscale(1);
    -o-filter: blur(10px) grayscale(1);
    -ms-filter: blur(10px) grayscale(1);
  }

  100% {
    opacity: 0.6;
    filter: blur(2px) grayscale(1);
    -webkit-filter: blur(2px) grayscale(1);
    -moz-filter: blur(2px) grayscale(1);
    -o-filter: blur(2px) grayscale(1);
    -ms-filter: blur(2px) grayscale(1);
  }
}

@-webkit-keyframes starttitel {
  0% {
    opacity: 0;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
  }

  100% {
    opacity: 0.7;
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
  }
}

@keyframes starttitel {
  0% {
    opacity: 0;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
  }

  100% {
    opacity: 07;
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
  }
}

@-webkit-keyframes darker {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.7;
  }
}

@keyframes darker {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.7;
  }
}

@-webkit-keyframes gone {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes gone {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* AI2HTML KAART */

#g-kaart-bxl-box,
#g-kaart-bxl-box .g-artboard {
  margin: 0 auto;
}

#g-kaart-bxl-box p {
  margin: 0;
}

#g-kaart-bxl-box .g-aiAbs {
  position: absolute;
}

#g-kaart-bxl-box .g-aiImg {
  position: absolute;
  top: 0;
  display: block;
  width: 100% !important;
}

#g-kaart-bxl-box .g-aiSymbol {
  position: absolute;
  box-sizing: border-box;
}

#g-kaart-bxl-box .g-aiPointText p {
  white-space: nowrap;
}

#g-kaart-bxl-Artboard_1 {
  position: relative;
  overflow: hidden;
}

#g-kaart-bxl-Artboard_1 p {
  font-family: Libre Franklin, arial, helvetica, sans-serif;
  line-height: 14px;
  height: auto;
  filter: alpha(opacity=100);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  letter-spacing: 0em;
  font-size: 12px;
  text-align: left;
  color: rgb(255, 255, 255);
  text-transform: none;
  padding-bottom: 0;
  padding-top: 0;
  mix-blend-mode: normal;
  font-style: normal;
  position: static;
}

#g-kaart-bxl-Artboard_1 .g-pstyle0 {
  font-weight: 700;
  height: 14px;
  font-size: 14px;
}

#g-kaart-bxl-Artboard_1 .g-pstyle1 {
  height: 14px;
}

#g-kaart-bxl-Artboard_1 .g-pstyle2 {
  font-weight: 500;
  line-height: 17px;
  height: 17px;
  filter: alpha(opacity=83);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=83);
  opacity: 0.63;
  letter-spacing: 0.2em;
  font-size: 16px;
  color: rgb(240, 248, 255);
}