/* --------------------- Fonts --------------------- */
p{
  font-weight: 200;
}

/* --------------------- Algemeen --------------------- */

.title-sticky{
    position: sticky;
  }
.sticky{
    position: sticky;
    top: 0 !important;
}

  html {
    scroll-behavior: smooth;
  }
  
  .w-webflow-badge{
    display: none !important;
  }
  
  @keyframes header {
    0%   {height: calc( 100vh)}
    50%  {height: calc( 100vh)}
    75%  {height: calc( 85vh)}
    100% {height: calc( 85vh)}
  }

  @keyframes header-foto {
    0%   {margin-top: calc(100vh - 120px)}
    50%  {margin-top: calc(100vh - 120px)}
    75%  {margin-top: calc(85vh - 120px)}
    100% {margin-top: calc(85vh - 120px)}
  }



/* --------------------- Laad scherm --------------------- */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0; /* Start met een lage opaciteit */
  visibility: hidden; /* Verberg de inhoud totdat het laadscherm verdwijnt */
  animation: loading-animation 2.5s ease-in-out forwards;
}

@keyframes loading-animation {
  0% {
    opacity: 0;
    transform: translateY(100%); /* Begin onderaan het scherm */
  }
  20% {
    opacity: 1;
    transform: translateY(0%); /* Na 40% van de animatie, volledig zichtbaar en op dezelfde positie */
  }
  80% {
    opacity: 1;
    transform: translateY(0%); /* Blijf 1 seconde staan */
  }
  100% {
    opacity: 0;
    transform: translateY(-100%); /* Eindig bovenaan het scherm */
    visibility: visible; /* Maak de inhoud zichtbaar zodra het laadscherm verdwijnt */
  }
}

/* --------------------- BG change --------------------- */

#bg-black {
    background-color: white;
    color: black !important;
    transition: background-color 0.5s ease; /* Duur en animatiestijl */
}

#bg-black.zwart {
    background-color: #121212 !important;
    color: white;
}


@media screen and (max-width: 991px) {
body {
    font-size: 1em !important;
}
}