/**********************************************************
 * OVERZICHT MAAKBOXEN
 **********************************************************/

.aanbod-col-1 {
  width: 65%;
  float: left;
}

.aanbod-col-2 {
  width: 30%;
  float: right;
}

.overzicht-link-wat-zijn {
  float: right;
  font-size: min(2.5vw, 24px);
  font-weight: normal;
  color: var(--mot-black);
  text-align: center;
}

.overzicht-intro img {
  margin-top: -40px;
}

h2 {
  margin-top: 0;
}

.overzicht {
  clear: both;
  width: 100%;
}

.maakboxen-contact {
  clear: both;
}

.overzicht-maakboxen,
.overzicht-techkwadraat-tegels,
.overzicht-dds {
  padding-top: 32px;
}

.overzicht-maakboxen a,
.overzicht-techkwadraat-tegels a,
.overzicht-inschrijvingen a {
  color: var(--mot-black);
}

.overzicht-maakboxen a,
.overzicht-techkwadraat-tegels a {
  display: contents;
}

.overzicht-maakboxen h2,
.overzicht-techkwadraat-tegels h2 {
  margin-left: 1.5%;
}

.overzicht-inschrijvingen {
  margin-top: 6px;
  height: 78px;
  position: relative;
  white-space: nowrap;
  padding-top: 20px;
}

.overzicht-inschrijvingen:hover {
  height: 180px;
}

.overzicht-inschrijvingen-ioR2 {
  left: 40%;
}

.overzicht-inschrijvingen-ioR1 {
  left: 20%;
}

.overzicht-inschrijvingen-ioL0 {
  left: 0%;
}

.overzicht-inschrijvingen-ioL1 {
  left: -20%;
}

.overzicht-inschrijvingen-ioL2 {
  left: -40%;
}

.overzicht-inschrijvingen-ioL3 {
  left: -60%;
}

.overzicht-inschrijvingen-ioL4 {
  left: -80%;
}

.overzicht-inschrijvingen-ioL5 {
  left: -100%;
}

.overzicht-inschrijvingen-ioL6 {
  left: -120%;
}

.overzicht-inschrijvingen-ioL7 {
  left: -140%;
}

.overzicht-inschrijvingen-ioL8 {
  left: -160%;
}

.overzicht-inschrijvingen-ioL9 {
  left: -180%;
}

.overzicht-inschrijvingen-ioL10 {
  left: -200%;
}

.overzicht-inschrijvingen-ioL11 {
  left: -220%;
}

.overzicht-inschrijvingen-ioL12 {
  left: -240%;
}

.overzicht-inschrijvingen-ioL13 {
  left: -260%;
}

.overzicht-inschrijvingen-ioL14 {
  left: -280%;
}

.overzicht-inschrijvingen-ioL15 {
  left: -300%;
}

.overzicht-inschrijvingen-ioL16 {
  left: -320%;
}

.overzicht-inschrijvingen-ioL17 {
  left: -340%;
}

.overzicht-inschrijvingen-ioL18 {
  left: -360%;
}

.overzicht-inschrijvingen-ioL19 {
  left: -380%;
}

.overzicht-inschrijvingen-ioL20 {
  left: -400%;
}

.overzicht-inschrijvingen-ioL21 {
  left: -420%;
}

.overzicht-inschrijvingen-ioL22 {
  left: -440%;
}

.overzicht-inschrijvingen-ioL23 {
  left: -460%;
}

.overzicht-inschrijvingen-ioL24 {
  left: -480%;
}

.overzicht-inschrijvingen-ioL25 {
  left: -500%;
}

.overzicht-inschrijvingen-ioL26 {
  left: -520%;
}

.overzicht-inschrijvingen-ioL27 {
  left: -540%;
}

.overzicht-inschrijvingen-ioL28 {
  left: -560%;
}

.overzicht-inschrijvingen-ioL29 {
  left: -580%;
}

.overzicht-maakbox,
.overzicht-techkwadraat,
.overzicht-dd {
  padding: 0;
  width: 30%;
  height: 300px;
  font-weight: normal;
  margin: 0 1.5% 3%;
  box-shadow: 0 0 0 1px var(--mot-black);
  position: relative;
  float: left;
}

.overzicht-techkwadraat {
  height: 420px;
}

.overzicht-maakbox-expired,
.overzicht-maakbox-pending,
.overzicht-maakbox-disabled {
  opacity: 0.6;
}

.overzicht-maakbox-live:hover {
  box-shadow: 0 0 5px 5px var(--mot-black);
}

.overzicht-inschrijvingen,
.overzicht-inschrijvingen .overzicht-maakbox-tekst,
.overzicht-inschrijvingen .overzicht-maakbox-titel {
  transition: all 0.5s ease 0.1s;
}

.overzicht-inschrijvingen .overzicht-maakbox {
  font-size: 12px;
  width: 17%;
  height: 72px;
  transition: height 0.5s ease 0.1s;
  display: inline-block;
  white-space: normal;
  float: none;
}

.overzicht-inschrijvingen:hover .overzicht-maakbox {
  height: 174px;
}

.overzicht-maakbox h3,
.overzicht-techkwadraat h3,
.overzicht-dd h3 {
  margin: 0;
  font-size: 15px;
}

.overzicht-inschrijvingen .overzicht-maakbox h3 {
  font-size: 13px;
}

.overzicht-maakbox-huidig {
  position: absolute;
  width: 100%;
  top: -18px;
  z-index: 80;
}

.overzicht-maakbox-huidig img {
  width: 40px;
  margin: auto;
}

.overzicht-maakbox-balk {
  height: 18px;
  background: var(--mot-color);
}

.overzicht-koopbox-balk {
  height: 18px;
  background: repeating-linear-gradient(
    45deg,
    var(--mot-color),
    var(--mot-color) 10px,
    var(--mot-black) 10px,
    var(--mot-black) 13px
  );
  text-align: center;
}

.overzicht-vakantiebox-balk {
  height: 18px;
  background: repeating-linear-gradient(
    135deg,
    var(--mot-color),
    var(--mot-color) 10px,
    var(--mot-white) 10px,
    var(--mot-white) 13px
  );
  text-align: center;
}

.overzicht-techkwadraat-balk {
  height: 18px;
  background: var(--crp-color);
}

.overzicht-dd-balk {
  height: 18px;
  background: var(--ddz-color);
}

.vakantiebox-tagline {
  font-size: 18px;
  font-style: italic;
  line-height: 25px;
}

.vakantiebox-tagline .overzicht-vakantiebox-balk {
  height: 24px;
}

.vakantiebox-tagline-tekst {
  display: inline-block;
  padding: 0 10px;
  background: var(--mot-color);
  color: var(--mot-white);
  font-weight: bold;
}

.vakantiebox-praktisch-meer {
  background: var(--mot-color);
  margin: 20px 0;
  padding: 20px 30px;
  float: left;
  max-width: 60%;
  box-sizing: border-box;
}

.vakantiebox-praktisch-meer h4 {
  margin: 0;
}

.vakantiebox-praktisch-meer a {
  color: var(--mot-white);
}

.content-vakantieboxen .h3 {
  clear: left;
}

.overzicht-maakbox-titel,
.overzicht-techkwadraat-titel,
.overzicht-dd-titel {
  font-weight: bold;
  padding: 4px 4.5% 8px;
  height: 32px;
  background: var(--mot-white);
}

.overzicht-inschrijvingen:hover .overzicht-maakbox-titel {
  height: 48px;
}

.overzicht-inschrijvingen .overzicht-maakbox-tekst {
  font-size: 0;
  height: 0px;
  transition: all 0.4s ease 0.2s;
}

.overzicht-inschrijvingen:hover .overzicht-maakbox-tekst {
  font-size: 11px;
  height: 30px;
  transition-delay: 0.1s;
}

.overzicht-inschrijvingen .overzicht-maakbox-thumb img {
  width: 100%;
  max-height: 0;
  transition: all 0.4s ease 0.2s;
}

.overzicht-inschrijvingen:hover .overzicht-maakbox-thumb img {
  max-height: 166px;
  transition-delay: 0.1s;
}

.overzicht-maakbox-tekst,
.overzicht-techkwadraat-tekst,
.overzicht-dd-tekst {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background: var(--mot-white);
  padding: 0 4.5% 8px;
  height: 100px;
  font-size: 13px;
}

.overzicht-maakbox-thumb,
.overzicht-techkwadraat-thumb,
.overzicht-dd-thumb {
  width: 100%;
  height: auto;
}

.overzicht-maakbox-thumb img,
.overzicht-techkwadraat-thumb img,
.overzicht-dd-thumb img {
  z-index: -5;
  position: absolute;
  bottom: 0px;
}

.edutheek-catalogus {
  margin-top: 24px;
}

#checkbox-wilAbonnement {
  width: 20px;
  height: 20px;
}

.content-edutheek .contact-wilAbonnement,
.content-edutheek .contact-grootteAbonnement {
  display: inline-block;
}

.content-edutheek .contact-wilAbonnement::after {
  content: "van:";
}

.content-edutheek .contact-grootteAbonnement label {
  display: none;
}

.mrb-video {
  width: 50%;
  float: right;
  margin-left: 16px;
  margin-top: 32px;
}

.mrb-leerlijnen {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 16px;
  margin-bottom: 32px;
}

.mrb-leerlijn {
  flex: 1 0 120px;
  padding: 10px;
  border-radius: 20px;
  background-color: var(--mrb-color);
  color: var(--mot-white);
  font-size: 110%;
  position: relative;
  overflow: hidden;
}

.mrb-leerlijn h4 {
  margin: 0;
  font-size: 125%;
}

.mrb-leerlijn-tekst {
  margin-bottom: 200px;
}

.mrb-leerlijn-thumb img {
  position: absolute;
  left: 0;
  bottom: 0;
}

.contact-bestellingDD {
  margin-bottom: 20px;
}

.bestellingDD-item {
  display: inline-block;
  width: 256px;
}

.bestellingDD-item label {
  display: inline-block;
  width: 80px;
}

.bestellingDD-item select {
  display: inline-block;
  width: 60px;
}

/**********************************************************
 * OVERZICHT - NO SIDEBAR
 **********************************************************/

@media screen and (max-width: 840px) {
  .overzicht-maakbox {
  }

  .mrb-leerlijn {
    flex-basis: 250px;
  }

  .mrb-leerlijn-tekst {
    margin: 0;
  }

  .mrb-leerlijn-thumb img {
    position: relative;
  }
}

/**********************************************************
 * OVERZICHT - MOBILE
 **********************************************************/

@media screen and (max-width: 640px) {
  .overzicht-maakbox, .overzicht-techkwadraat {
    width: 42%;
    height: 300px;
    margin: 0 4% 8%;
  }

  .overzicht-inschrijvingen .overzicht-maakbox {
    margin: 0 1.5% 3%;
  }

  .overzicht-inschrijvingen .overzicht-maakbox h3 {
    font-size: 2vw;
  }

  .overzicht-intro img {
    margin-top: -6.25vw;
    margin-left: 0;
  }

  .vakantiebox-praktisch-meer {
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .overzicht-maakbox, .overzicht-techkwadraat {
    width: 90%;
    height: auto;
  }

  .overzicht-maakbox-tekst, .overzicht-techkwadraat-tekst {
    margin-bottom: -24px;
  }

  .overzicht-maakbox-thumb img, .overzicht-techkwadraat-thumb img {
    position: relative;
    bottom: -4px;
  }

  .overzicht-inschrijvingen .overzicht-maakbox h3 {
    font-size: 9.6px;
  }

  .vakantiebox-tagline {
    font-size: 14px;
  }
}