.hero {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

.head {
  position: relative;
  height: 100%;
  width: 100%;
}

#herohead {
  z-index: 2;
}


#background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

#beamervideo {
  opacity: 0;
}

#overlay {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

#reflect {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  opacity: 1;
}

#kozijn {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

#dark {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .h-md-100 { height: 100vh; }
}
.btn-round { border-radius: 30px; }
.bg-indigo { background: indigo; }
.text-cyan { color: #35bdff; }

/* ------------------------------------------------------------------
   Responsive correcties (sitebreed, home.css wordt in base.html geladen)
   ------------------------------------------------------------------ */

/* Vangnet: een afbeelding of video met vaste width-attributen mag nooit
   breder worden dan zijn kolom. Zonder dit schoof de homepage op mobiel
   horizontaal mee, omdat de hero-video op 1280px stond. */
img,
video,
iframe,
table {
  max-width: 100%;
}

/* De menubalk klapt pas op xl om. Tussen 1200px en 1400px pasten de zeven
   menu-items plus calculatorknop niet meer naast elkaar: het item brak over
   twee regels en de balk werd 91px hoog, terwijl de pagina's met 70px
   rekenen. Iets minder ruimte per item houdt dat weg, ook als er ooit een
   menu-item bijkomt. */
.navbar-expand-xl .navbar-nav .nav-link {
  white-space: nowrap;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .navbar-expand-xl .btn-group.dropdown {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
}