@font-face {
  font-family: 'Nunito';
  src: url(Fonts/Nunito-Light.ttf)
}

@font-face {
  font-family: 'poppins';
  src: url(Fonts/Poppins-SemiBold.ttf)
}

@font-face {
  font-family: 'hvl';
  src: url(Fonts/hvl.ttf)
}

* a {
  text-decoration: none;
  color: black;
}

body {
  box-sizing: border-box;
  background-color: #FFFFFF;
  /*height: 1000px;*/
  font-family: 'Nunito';
  font-size: 18px;
  width: 100%;
}

html, body {
  margin: 0;
  
}



.page {
  width: 100%;
  display: block;
  
}

.header {
  display: flex;
  
  justify-content: center;
  padding-bottom: 15px;
  max-width: 95%;
  padding-left: 3%;
  padding-right: 3%;
  padding-top: 50px;
  
}

.menu-container {
  display: flex;
  min-height: 100%;
  width: 95vw;
  
  justify-content: center;
  
  align-items: center;
  /*margin-left: -450px;*/
  
  /*justify-content: space-around;*/
  /*width: 100%;*/

}

.logo a {
  text-decoration: none;
}

.logo a:link {
  text-decoration: none;
  outline: none;
  color: black;

}

.logo a:visited {
  text-decoration: none;
  outline: none;
  color: black;
}



.menu {
  display: flex;
  flex-wrap: wrap;
  /*padding-right: 50px;*/
  
  padding-left: 5%;
  padding-right: 5%;
  width: 100%;
  align-items: flex-end;
  font-size: 1.2rem;
  margin-top: 20px;
  justify-content: flex-end;
  overflow: hidden;
  
  
 
}



.menu a:link, .footerMenuBox a:link {
  text-decoration:none;
  outline:none;
  /*color: #151538;*/
  color: black;
  transition: color, 0.5s;
}

.menu a:visited, .footerMenuBox a:visited {
  text-decoration:none;
  outline:none;
  color: black;

}

.menu a:hover, .footerMenuBox a:hover {
  color: #6E795B;
  
}



.index a::after, .over-ons a::after, .specialisaties a::after, .groepslessen-en-workshops a::after, .praktische-info a::after, .contact a::after, .kinovate-at-work a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #000;
    transition: width .3s;
}



.index, .afspraak, .specialisaties, .over-ons, .praktische-info, .groepslessen-en-workshops, .contact, .bedrijven, .kinovate-at-work {
  /* border-right: 1px solid #151538; */
  padding: 5px 10px 5px 10px;
}

.afspraak:hover, .inschrijvenKnopBabymassage:hover, .kinovateatwork-aanbod-button {
  background-color: #c1d4c8;
}

.nieuws {
  padding: 5px 10px 5px 10px;
}

.afspraak, .inschrijvenKnopBabymassage  {
  background-color: #f6b718;
  transition: background-color, 0.4s;
  border-radius: 20px;
  padding: 15px 10px 15px 10px;
  margin-left: 10px;
  color: #fffcf4;
  font-weight: 400;
  min-width: 150px;
}

.afspraak a:link, .afspraak a:visited  {
  color: black;
  text-decoration:none;
  outline:none;
}




.logo {
  height: auto;
  padding: 10px 0px 0px 10px;
  width: auto;
}

.logo img {
  max-height:100px;
  width: auto;
  margin-left: 10px;
}

.logo p {
  font-size:60px;
  margin: auto;
  text-align: center;
  margin-left: -10px;
  color: #dd8000;
}

.rightSpace {
  display: flex;
  justify-content: flex-start;
  width: 15%;
  
}



.welkom {


  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 700px;
  margin-bottom: 300px;
  margin-top: 50px;
  
}

.welkom-foto {

  width: auto;
  height: auto;
  /*margin: auto;*/
  background-color: white;
  position: absolute;
  z-index:2;
  top: 70px;

  left: 160px;
}

.welkom-foto img {
  max-height: 700px;
  max-width: 100%;

}

.welkom-tekst {

  /*width: auto;*/
  /*margin: 0 auto 0 -350px;*/
  background-color: #f6b718;
  position: absolute;
  z-index: 1;
  left: 440px;
  min-height: 500px;
  height: auto;
  margin-bottom: 100px;
  max-width: 50%;
  top: 0;
  color: white;
  padding-bottom: 70px;
}

.welkom-tekst-vak {
  max-width: 90%;
  height: auto;
}

.welkom-tekst e {
  font-size: 40px;
}

.welkom-tekst p {
  margin: 40px 50px 0 150px;
  font-size: 20px;
  text-align: left;
}





.teamBalkBox {
  max-width: 80%;
  min-width: 80%;
  display: flex;
  margin: auto;
  margin-top: 100px;
  align-items: flex-end;
  margin-bottom: 50px;
  
  }



.teamBalk {
  width: 80%;
  background-color: #f6b718; 
  height: 20px;
  margin-bottom: 5px;
}

.teamBalkTekst {
  width: 20%;
  text-align: left;
  margin-left: 50px;
  font-size: 1.5rem;
  font-weight: 400;
}

.groepslessenbalk {
  width: 70%;
}

.groepslessenbalktekst {
  width: 30%;
}

.overOnsFotoBox {
  display: flex;
  min-width: 100%;
  height: 550px;
  
  margin-top: 200px;
  justify-content: space-evenly;
  position: relative;
  max-width: 100%;
  
  
}

.maak-een-afspraak-div {
    display: flex;
    justify-content: center;
    margin: auto;
}



.overOnsGeelVlak {
  position: absolute;
  height: 300px;
  min-width: 150px;
  z-index: 0;
  background-color: #f6b718;
  left: -150px;
  bottom: 0;
}

.overOnsGeelVlak2 {
  position: absolute;
  height: 300px;
  min-width: 150px;
  z-index: 0;
  background-color: #f6b718;
  right: -20px;
  bottom: -20px;
}

.overOnsGroenVlak2 {
  position: absolute;
  height: 300px;
  min-width: 150px;
  z-index: 0;
  background-color: #c4ceb6;
  right: -20px;
  top: -30px;
}

.overOnsFotoBrigitteBox, .overOnsFotoSarahBox, .overOnsFotoYoniBox, .overOnsFotoJelleBox {
  height: 400px;
  
  min-width: 25%;
  position: relative;
  z-index: 1;
 }

.overOnsFotoBrigitteBox img, .overOnsFotoSarahBox img, .overOnsFotoYoniBox img, .overOnsFotoJelleBox img {
  height: 400px;
  
  position: absolute;
  z-index: 1;
 
}

.overOnsGroenVlak {
  min-width: 430px;
  top: -100px;
  height: 300px;
  
  background-color: #c4ceb6;
  position: absolute;
  left: -65px;
  z-index: 0;
}



.overOnsTekstBox {
  display: flex;
  min-width: 90%;
  width: 100%;
  background-color: #fffbf0;
  margin: auto;
  font-size: 20px;
  padding-bottom: 200px;
  padding-top: 150px;
  position: relative;
  height: auto;
  justify-content: space-evenly
}

.overOnsTekstBox h1 {
  font-size: 30px;
}

.overOnsTekstBrigitte, .overOnsTekstSarah, .overOnsTekstYoni, .overOnsTekstJelle  {
  
  text-align: left;
  padding-top: 100px; 
  min-width: 370px;
  z-index: 1;
  
}

.overOnstekstBrigitte h1, .overOnsTekstSarah h1, .overOnsTekstYoni h1, .overOnsTekstJelle h1 {
  padding-top: 50px;
}

.overOnsTekstBrigitte {
  padding-left: -50px;
  z-index: 2;
}







.over-brigitte {
  margin-left: 30px;
}

.div-foto-tekst-brigitte {
  display:flex;
  width: 100%;
}

.foto-brigitte-groot img {
  height: 500px;
  margin: 50px;
}

.foto-yoni-groot img {
  height: 500px;
  margin: 50px;
}

.tekst-brigitte-groot {
  margin-top: 130px;
  max-width: 30%;
  font-size: 20px;
}

.tekst-brigitte-groot em, .opleidingen-brigitte em {
  font-style: normal;
  font-size: 25px;
  font-weight: 600;
  color: #A7BFAF;
  padding-bottom: 20px;
}

.div-opleidingen-brigitte {
  display:flex;
}

.opleidingen-brigitte-foto img {
  height: 540px;
  margin: 50px 0 0 0;
}

.opleidingen-brigitte {
  width: 50%;
  height: 500px;
  margin: 50px 0 50px 50px;
  background-color: #F3F6F4;
  padding: 20px;
}

.over-sarah {
  margin-left: 30px;
  
}

.div-foto-tekst-sarah {
  display:flex;
  width: 100%;
  margin-bottom: 100px;
}

.foto-sarah-groot img {
  height: 500px;
  margin: 50px;
  padding-left: 200px;
  padding-top: 135px;
}

.foto-sarah-groot2 img {
  height: 520px;
  margin: 50px;
}

.tekst-sarah-groot {
  margin-top: 130px;
  max-width: 40%;
  font-size: 20px;
  margin-left: 50px;
}

.tekst-sarah-groot em, .opleidingen-sarah em {
  font-style: normal;
  font-size: 25px;
  font-weight: 600;
  color: #A7BFAF;
  padding-bottom: 20px;
}

.div-opleidingen-sarah {
  display:flex;
}

.opleidingen-sarah-foto img {
  height: 540px;
  margin: 50px 0 0 0;
}

.opleidingen-sarah {
  width: 50%;
  height: 500px;
  margin: 50px 0 50px 200px;
  background-color: #F3F6F4;
  padding: 20px;
  padding-bottom: 0px;
  font-size: 20px;
}

.tegels h1 {

  width: 100%;
  text-align: center;
  margin-top: 50px;
  font-size: 1.5rem;

}

.tegels {
  display:flex;
  margin-left: auto;
  margin-right: auto;
  gap: 30px;
  width: 70%;
  margin-top: 50px;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #fffcf4;
  font-size: 1.3rem;
}

.tegels-specialisaties {
  display:flex;
  margin-left: auto;
  margin-right: auto;
  gap: 30px;
  width: 60%;
  margin-top: 50px;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #fffcf4;
  font-size: 1.3rem;
}

.tegel {
  height: 350px;
  width: 350px;
  /*border: 1px solid black;*/
  /*border-radius: 10px;*/
  
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: box-shadow 0.2s;
  }



.tegelBox {
  background-color: #fffcf4;
  min-width: 99vw;
  margin-top: 50px;
  margin-bottom: 100px;
  padding-bottom: 50px;
}

.tegel:hover {
  box-shadow: 2px 2px 6px 2px rgba(0,0,0,.15);


}

.tegel p {
  margin: 10px;
  margin-top: -20px;
  text-align: center;
}

.tegels a:link, .tegels a:visited {
  text-decoration:none;
  outline:none;
  color: black;
}

.tegels a:hover {
  color: #3f3f75;

}

.tegels-specialisaties .tegel img {
  max-width: 80%;
  margin: auto;
  
}

.lege-tegel {
  height: 150px;
  width: 352px;

}

.praktische-info-kolommen {
  display:flex;
  gap: 70px;
}


.intakeGeelVlak {
  background-color: #f6b718;
  position: absolute;
  z-index: 0;
  
  left: -50px;
  top: -50px;
  min-height: 300px;
  min-width: 300px;
}

.intakeTekst, .kostprijsTekst, .afspraak-makenTekst, .annulerenTekst {
  position: relative;
  z-index: 1;
  background-color: #fffcf4;
  padding: 50px;
  padding-left: 100px;
}

.kostprijsGroenVlak {
  background-color: #c4ceb6;
  z-index: 0;
  position: absolute;
  left: -50px;
  top: -50px;
  min-height: 400px;
  min-width: 600px;
}

.afspraakGeelVlak {
  background-color: #f6b718;
  z-index: 1;
  position: absolute;
  right: -100px;
  top: 100px;
  min-height: 400px;
  min-width: 600px;
  
}

.intake, .kostprijs, .afspraak-maken, .annuleren {
  width: 600px;
  margin: auto;
  margin-bottom: 100px;
  padding-left: 50px;
  margin-top: 150px;
  position: relative;
  z-index: 1;
  
}

.intake, .afspraak-maken {
  margin-left: 20%;
}

.kostprijs, .annuleren {
  margin-left: 50%;
}

.intake p, .kostprijs p, .afspraak-maken p, .annuleren p {
  line-height: 30px;
  font-size: 20px;
}

.praktische-info-kader {
  margin-left: 50px;
  margin-top: 50px;
  background-color: #EDD2BC;
  padding: 20px;
  width: 80%;
}

.annuleren {
  padding-bottom: 100px;
  margin-bottom: 100px;
}

.annulerenGroenVlak {
  background-color: #c4ceb6;
  z-index: 1;
  position: absolute;
  left: -20px;
  top: 200px;
  min-height: 170px;
  min-width: 270px;
}

.content {
  display:flex;
  width: 100%;
  flex-direction: column;
  
}

.content-contact {
  display:flex;
  width: 100%;
  align-items: center;
  margin-bottom: 200px;
  flex-direction: column;
}

.contact-kader {

  width: 50%;
  margin-top: 2%;
  text-align: center;
  margin-bottom: 10%;

}

.openingsuren, .contactgegevens {
  min-width: 50%;
  
  margin:0;
  padding: 0;
}

.contactgegevens p {
  padding-top: 73px;
}

.contact-kolommen {
  

  display:flex;
  
  /*width: 70%;*/
  justify-content: center;
  text-align: left;
}



.tegels img {
  max-width: 80%;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.verticalflex {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verticalflex h1 {
  font-size: 1.6rem;
  color: #A7BFAF;
  font-weight: 800;
  margin: auto;
  margin-top: 40px;
}

.specialisatie-kader {
  width: 80%;
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: auto;
  margin: 20px;
  margin-bottom:250px;
  
  margin-top: 100px;
  position: relative;
  
  
  
}

.specialisatie-fotokader {
  width: 300px;
  min-width: 300px;
  position: relative;
  z-index: 1;
  height: auto;
  
}

.orthofoto1 {
  min-width: 300px;
  position: relative;
  
  
}

.orthofoto1 img {
  z-index: 1;
  position: relative;
  width: 300px;
  
}

.ortho-kleurkader-1 {
  background-color: #f6b718;
  width: 200px;
  height: 200px;
  position: absolute;
  left: -50px;
  top: 370px;
  
  z-index: 0;
}

.rugschoolfoto1 {
  margin-top: 5%;
}

.rugschoolfoto2 {
  margin-top: 5%;
}

.rugschoolkader {
  margin-bottom: 80px;
}

.corestabilityfoto1 {
  margin-top: 5%;
}

.corestabilityfoto2 {
  margin-top: 5%;
}

.corestabilitykader {
  
}

.babymassagefoto1 {
  margin-top: 5%;
}

.babymassagefoto2 {
  margin-top: 5%;
}

.babymassagekader {
  margin-bottom: 0;
}

.posterchronischepijn {
  margin-top: 5%;
  height: 652px;
  border: 1px solid black;
}

.fitmomfoto {
  margin-top: 5%;
}

@keyframes fade-in {
  from {opacity: 0%;}
  to {opacity: 100%;}
}
.specialisatie-fotokader img {
  width: 100%;
  animation-name: fade-in;
  animation-duration: 2.5s;
  position: absolute;
}

.specialisatie-tekstkader {
  min-width: 300px;
  max-width: 50%;
  margin-top: 50px;
  text-align: left;
  animation-name: fade-in;
  animation-duration: 2.5s;
  position: relative;
  z-index: 1;
  align-self: start;
  padding-left: 50px;
  padding-right: 50px;
}

.specialisatie-tekstkader a:hover {
  text-decoration: underline;
}

.hyper-kader {
  width: 80vw;
  display: flex;
  justify-content: center;
  gap: 80px;
  margin: 20px;
  position: relative;
  
}

.hyper-tekstkader {
  width: 40%;
  text-align: justify;
  padding-top: 75px;
  animation-name: fade-in;
  animation-duration: 2.5s;
}

.hyper-fotokader {
  width: 300px;
  position: relative;
  z-index: 1;
}

.hyper-fotokader img {
  margin-top: 100px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.footer {
  display: flex;
  justify-content: space-evenly;
  padding-top: 30px;
  font-size: 1rem;
  width: 100%;
  background-color: #f6b718;
  color: white;
  font-size: 20px;
  padding-bottom: 50px;
  margin-top: 100px;
}

.footer h3 {
  margin-bottom: 10;
  padding: 0;
}



.followUsBox img {
  max-width: 20px;
  margin-right: 5px;
}

.followUsBox h3 {
  margin-bottom: 15px;
}



.footer a:link, .footer a:hover, .footer a:visited {
  text-decoration: none;
  color: white;
}

.aanpakBox, .behandelBox {
  
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #fffbf0;
  min-height: 500px;
  padding: 50px 100px 50px 100px;
  width: 95%;
  position: relative;
}

.aanpakTekstvak, .behandelTekstvak {
  width: 45%;
  background-color: #c4ceb6;
  padding-left: 100px;
  padding-top: 70px;
  padding-bottom: 70px;
  
  color: #fffcf4;
 
  
}

.aanpakTekstvak {
  position: absolute;
  padding-right: 120px;
  left: 5%;
  top: -70px;
  height: 350px;
}

.aanpakTekstvak p, .aanpakTekstvak h2 {
  padding-right: 50px;
}

.aanpakFotovak {
  left: 55%;
  top: 50px;
}

h2 {
  font-size: 35px;
}

.aanpakFotovak, .behandelFotovak {
  max-width: 45%;
  height: 100%;
  
  position: absolute;
}

.aanpakFotovak img, .behandelFotovak img {
  
  
  max-height: 800px;
  
}

.aanpakFotovak img {
  max-height: 500px;
}

.aanpakTekstvak .afspraak, .behandelTekstvak .afspraak {
  max-width: 80px;
  margin: 0;
}



.behandelBox {
   
  
  justify-content: center;
  padding-top: 300px;
  padding-bottom: 300px;
  background-color: #ffffff;
  max-width: 95%;
  
}

.behandelTekstvak .afspraak {
  background-color: #f6b718;
  min-width: 150px;
  text-align: center;
  position: absolute;
}

.inschrijvenKnopBabymassage {
  background-color: #f6b718;
  min-width: 150px;
  text-align: center;
  margin-top: 50px;
}

.white {
  background-color: #fffcf4;
}

.behandelTekstvak h2 {
  color: #f6b718;
  font-size: 50px;
  font-weight:900;
}

.behandelTekstvak p {
  color: black;
  text-align: justify;
}

.behandelKleurvlak {
  position: relative;
  min-width: 400px;
  min-height: 500px;
  background-color: #f6b718;
  left: -200px;
  top: -100px;
  z-index: 1;
}

.behandelTekstvak {
  background-color: #ffffff;
  max-height: 500px;
  max-width: 400px;
  position: relative;
  left: -180px;
  padding-left: 100px;
  
}

.behandelFotovak {
  
  position: relative;
  z-index: 2;
  
}



.groepslessenBox .aanpakTekstvak .afspraak {
  min-width: 150px;
}

.overOnsKnop {
  background-color: #fffcf4;
  min-width: 150px;
  text-align: center;
}

.fadeIn {
  
  opacity: 0;
  transform: scale(1.2);
}

.element-animation {
  opacity: 0;
}

.element-animation.element-show {
  opacity: 1;
  transition: opacity 1s;
}



.ortho-kleurkader-2 {
  background-color: #c4ceb6;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 150px;;
  top:-50px;
  
  z-index: 0;
}



.manuele-kleurkader-1 {
  background-color: #f6b718;
  min-width: 200px;
  min-height: 200px;
  position: absolute;
  left: -50px;
  top: -50px;
  
  z-index: 0;
}



.manuele-kleurkader-2 {
  background-color: #c4ceb6;
  min-width: 200px;
  min-height: 200px;
  position: absolute;
  right: -50px;
  top:-50px;
  
  z-index: 0;
}

.myo-kleurkader-1 {
  background-color: #f6b718;
  min-width: 200px;
  min-height: 200px;
  position: absolute;
  left: -50px;
  top: 110px;
  
  z-index: 0;
}

.myo-kleurkader-2 {
  background-color: #c4ceb6;
  min-width: 200px;
  min-height: 200px;
  position: absolute;
  right: -50px;
  top:-50px;
  
  z-index: 0;
}

.prenatale-kleurkader-1 {
  background-color: #f6b718;
  min-width: 200px;
  min-height: 200px;
  position: absolute;
  left: -50px;
  top: 50px;
  
  z-index: 0;
}

.prenatale-kleurkader-2 {
  background-color: #c4ceb6;
  min-width: 200px;
  min-height: 200px;
  position: absolute;
  right: -60px;
  top:-50px;
  
  z-index: 0;
}

.hyper-kleurkader-1 {
  background-color: #f6b718;
  min-width: 150px;
  min-height: 150px;
  position: absolute;
  left: -50px;
  top: 200px;
  
  z-index: 0;
}

.kaak-kleurkader-1 {
  background-color: #f6b718;
  min-width: 200px;
  min-height: 200px;
  position: absolute;
  left: -50px;
  top: 20px;
  
  z-index: 0;
}

.rugschool-kleurkader-1 {
  background-color: #f6b718;
  min-width: 150px;
  min-height: 150px;
  position: absolute;
  left: -50px;
  top: -50px;
  
  z-index: 0;
}

.rugschool-kleurkader-2 {
  background-color: #c4ceb6;
  min-width: 150px;
  min-height: 150px;
  position: absolute;
  right: -50px;
  top: -50px;
  
  z-index: 0;
}

.core-kleurkader-1 {
  background-color: #f6b718;
  min-width: 150px;
  min-height: 150px;
  position: absolute;
  left: -50px;
  top: -50px;
  
  z-index: 0;
}

.core-kleurkader-2 {
  background-color: #c4ceb6;
  min-width: 150px;
  min-height: 150px;
  position: absolute;
  right: -50px;
  top: -50px;
  
  z-index: 0;
}

.kaak-foto img {
  margin-top: 75px;
}

.align-top {
  margin: 0;
  padding: 0;
}

.align-top p {
  margin:0;
  margin-bottom: 20px;
}


.bedrijven-top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 50px;
  flex-direction: column;
}

.bedrijven-deel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  
  padding: 100px;
  gap: 50px;
}

.bedrijven-foto {
  min-width: 50%;
  display: flex;
  justify-content: center;
}

.bedrijven-foto img{
  max-width: 600px;
}

.ontdek-hoe {
  max-width: 200px;
}

.banner {
  position: absolute;
  top: 200px;
  z-index: -1;
}

.kinovateatwork-titel {
  margin: auto;
  margin-top: 100px;
  font-size: 40;

}



.kinovateatwork-subtitel {
  margin: auto;
  margin-top: -20px;
  width: 900px;
  text-align: center;
  margin-bottom: 20px;
}

.kinovateatwork-aanbod-button 
 {
  background-color: #f6b718;
  transition: background-color, 0.4s;
  border-radius: 20px;
  padding: 15px 10px 15px 10px;
  margin-left: 10px;
  color: #fffcf4;
  font-weight: 400;
  min-width: 150px;
  max-width: 200px;
  margin: auto;
}

.bedrijf-in-topvorm-box {
  display: flex;
  margin: auto;
  margin-top: 200px;
  gap: 200px;
  width: 100%;
  
  justify-content: center;
  
}

.bedrijf-in-topvorm-tekst {
  width: 480px;
  
  
}

.movebox {
  width: 550px;
}

.bedrijf-in-topvorm-tekst h1 {
  font-size: 50;
  
}



.bedrijf-in-topvorm-image-box {
  position: relative;
  
  display: flex;
  justify-content: center;
  width: 500px;
}

.bedrijf-in-topvorm-image-box img {
  position: absolute;
  max-width: 300px;
  margin-top: 50px;
  
    
  
}



.moveboximage img {
  width: 500px;
  max-width: 500px;
  
}

.topvorm-kleurkader {
  background-color: #f6b718;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 150px;
    top:30px;
    
    z-index: 0;
}

.moveboxkleurkader {
  width: 350px;
  left: 40px;
  top: 50px;
  height: 250px;
}
.tijd-voor-verandering-box {
  display: flex;
  justify-content: center;
  margin: auto;
  margin-top: 300px;
  background-color: #f6b718;
  width: 100%
}



.tijd-voor-verandering-image {
  width: 50%;
  display: flex;
  justify-content: center;
  
}

.tijd-voor-verandering-tekst {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px;
}


.tijd-voor-verandering-tekst h1 {
  font-size: 50;
}




.oplossing-tekst-box {
  position: relative;
}


.oplossing-box {
  display: flex;
  justify-content: center;
  margin: auto;
  margin-top: 300px;
  gap: 300px;
  width: 80%
}

.oplossing-kleurkader {
  background-color: #f6b718;
  width: 300px;
  height: 500px;
  position: absolute;
  left: -60px;
  top:-60px;
  z-index: 0;
}

.oplossing-tekst h1 {
  font-size: 50;
  margin-top: 0px;
}

.oplossing-tekst {
  width: 500px;
  position: relative;
  z-index: 1;
  background-color: white;
  padding: 30px;
  
}

.oplossing-aanbod-button h3 {
  
  color: #f6b718
}

.aanbod-box {
  display: flex;
  justify-content: center;
  margin: auto;
  margin-top: 200px;
  flex-direction: column;
  gap: 100px;
  width: 80%
}

.aanbod-titel {
   text-align: center;
}

.aanbod-titel h1 {
  font-size: 50;
}

.aanbod-workshop-box {
  display: flex;
  width: 80%;
  flex-direction: row;
  gap: 100px;
}



.aanbod-workshop-box-1 {
  width: 300px;
  text-align: center;
  
}

.aanbod-workshop-box-1 h3 {
  margin-top: 100px;
}

.aanbod-workshop-box-1 img {
  width: 300px;
  position: relative;
  z-index: 1;
}

.aanbod-workshop-imagebox {
  position: relative;
  
}

.aanbod-workshop-kleurkader {
  position: absolute;
  width: 300px;
  height: 300px;
  top: -30px;
  left: -30px;
  background-color:#f6b718;
  z-index: 0;
}

.aanbod-workshop-imagebox2 {
  position: relative;
  
}

.aanbod-workshop-kleurkader2 {
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -30px;
  right: -30px;
  background-color:#f6b718;
  z-index: 0;
}

.werkwijze-box {
  display: flex;
  justify-content: center;
  margin: auto;
  margin-top: 200px;
  flex-direction: row;
  gap: 300px;
  width: 80%
}

.werkwijze-box * {
  
}

.werkwijze-titel {
  width: 500px;
}

.werkwijze-titel h1 {
  font-size: 50;
}

.werkwijze-stap-box h4 {
  font-size: 25;
  margin-bottom: -13px;
}

.werkwijze-stappenplan-box {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 30px;
}

.werkwijze-stap-box {
  display: flex;
  border-radius: 20px;
  background-color: white;
  box-shadow: 5px 5px 8px darkgrey;
  z-index: 1;
  padding: 10px;
}

.werkwijze-stap-nummer {
  margin-top: auto;
  margin-bottom: auto;
  padding: 10px;
  background-color: #f6b718;
  border-radius: 25px;
  width: 25px;
  text-align: center;
  color: white;
  z-index: 1;
  
}

.werkwijze-stap-tekst {
  margin-left: 20px;
  z-index: 1;
}

.werkwijze-kleurkader {
  background-color: #f6b718;
  
  width: 200px;
  height: 780px;
  position: absolute;
  right: -50px;
  top: -50px;
  z-index: 0;
}

.topvorm-box {
  text-align: center;
  
  background-color: #f6b718;
  width: 100%;
  margin: auto;
  margin-top: 300px;
  height: 350px;
}

.topvorm-box h1 {
  font-size: 50;
  margin-bottom: 50px;
}

.topvorm-box h1 {
  margin-top: 100px;
}
.contacteer-ons-button {
  background-color: white;
  width: 200px;
  margin: auto;
  padding: 10px;
  border-radius: 20px;
}

.atwork-contact-box {
  display: flex;
  width: 0%;
  justify-content: center;
  margin: auto;
  

}

.contacteer-tekst {
  background-color: darkblue;
  color: white;
  padding: 20px;
  padding-top: 100px;
  padding-left: 100px;
  width: 30%;
  
}

.contact-form {
  width: 70%;
  

}

.kinovateatworkcontent p {
  font-size: larger;
  
    
}

.kinovateatworkcontent h1, .kinovateatworkcontent h2, .kinovateatworkcontent h3 {
  font-family: 'poppins';
}

/* Keep the Google Maps embed inside its container at any screen width;
   the <iframe> in contact.html still has width="600" height="450" as
   HTML attributes, which this overrides. */
.googlemapskader iframe {
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 800px) {
  
  .content > * {
    position: static;
    
  }

  .body {
    max-width: 100%;
    
  }

  
  .content {
    max-width: 100%;
    width: 100%;
  }

  .page {
    max-width: 100vw;
  }
  
  .behandelBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    max-width: 100%;
    height: auto;
    padding: 0;
    
    
  }


  .welkom {
    margin-bottom: 50px;
  }
  .aanpakBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;  
    max-width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    height: auto;
    
    margin: 0;
    margin-bottom: 100px;
  }

  .aanpakTekstvak {
    
    max-width: 100%;
    width: 90%;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 20px;
    position: static;
    margin-bottom: 50px;
  }

  .aanpakFotovak {
    
    max-width: 100%;
    
    
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    
  }

  .aanpakFotovak img {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .content, .welkom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
  }

  

  .welkom-tekst-vak {
    margin-bottom: 30px;
    width: 100%;
    max-width: 100%;
  }

  .welkom-tekst {
    height: auto;
    
  }

  .welkom-tekst p {
    margin: 20px;;
    font-size: 20px;
    text-align: justify;
  }

  .behandelFotovak {
    position: static;
    max-height: auto;
    max-width: 100%;
    justify-content: center;
  }

  .behandelKleurvlak {
    display: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    height: 0;
  }

  .behandelTekstvak {
    position: static;
    width: auto;
    height: auto;
    max-height: auto;
    padding: 0;
    margin: 0;
    margin-bottom: 100px;
  }

  .aanpakFotovak {
    position: static;
    margin: 0;
    padding: 0;
  }

  .groepslessenBox {
    
    position: static;
    height: auto;
    min-width: 100%;
    margin: 0;
    padding: 0;
  }
  

  .header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .menu-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    padding: 0;
  }

  .menu {
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: nowrap;
    flex-direction: column;
    max-width: 100%;
    padding: 0;
  }

  .rightSpace {
    width: 40%;
    justify-content: center;
    align-items: center;

  }

  .contact {
    margin: 0;
  }

  .welkom-foto {

    width: auto;
    height: auto;
    margin: auto;
    background-color: white;
    position: static;
    margin-bottom: 100px;
  }

  .welkom-tekst {

    /*width: auto;*/
    /*margin: 0 auto 0 -350px;*/
    background-color: #f6b718;
    position: static;
    
    height: auto;
    
    max-width: 100%;
    padding: 15px;
    color: white;
  }

  .welkom-tekst-vak {
    
  }

  .afspraak {
    min-width: 200px;
    text-align: center;
    margin-top: 20px;
  }

  .footer {
    max-width: 100%;
    flex-direction: column;
    
    align-items: center;
    
  }


  .footer > * {
    min-width: 80%;
  }

  .teamBalkBox {
    max-width: 90%;
    min-width: 90%;
    margin-top: 50px;
    flex-direction: column;
    align-items: center;
  }

  .teamBalk, .groepslessenbalk {
    width: 90%;
    max-width: 90%;
  }
  .teamBalkTekst, .groepslessenbalktekst {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
  }

  .overOnsGeelVlak, .overOnsGeelVlak2, .overOnsGroenVlak, .overOnsGroenVlak2 {
    display: none;
  }

  

  
  .overOnsFotoBrigitteBox, .overOnsFotoSarahBox, .overOnsFotoYoniBox, .overOnsFotoJelleBox {
    margin: 0 auto;
    padding: 0;
    max-width: 90%;
    max-height: 350px;
  }

  .overOnsFotoBrigitteBox img, .overOnsFotoSarahBox img, .overOnsFotoYoniBox img, .overOnsFotoJelleBox img {
    max-height: 350px;
    left: 50%;
    transform: translateX(-50%);
  }


  
  

  .overOnsTekstBox {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    background-color: white;
    
    
    padding:0;
  }

  .overOnsTekstBrigitte, .overOnsTekstSarah, .overOnsTekstJelle, .overOnsTekstYoni {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    margin: 0;
    margin-bottom: 150px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }

  .intakeGeelVlak, .kostprijsGroenVlak, .afspraakGeelVlak, .annulerenGroenVlak {
    display: none;
  }

  .intake, .kostprijs, .afspraak-maken, .annuleren {
    box-sizing: border-box;
    margin: 0;
    position: static;
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 50px;
  }

  .contact-kader {
    max-width: 100%;
    min-width: 100%;
    

  }

  .contact-kolommen {
    flex-direction: column;
  }

  .openingsuren, .contactgegevens {
    margin-left: 50px;
  }

  .googlemapskader {
    max-width: 100%;
    width: 100%;
  }

  .div-foto-tekst-brigitte {
    flex-direction: column;
    position: static;
    margin: 0;
  }

  .tekst-brigitte-groot {
    position: static;
    margin: 0;
    
    padding: 0;
    padding-top: 20px;
    min-width: 100%;
    
  }

  .tekst-brigitte-groot em, .tekst-brigitte-groot p {
    margin: 20px;
  }

  .over-brigitte {
    position: static;
    margin-left: 0;
    
    min-width: 100%;
    max-width: 100%;

  }

  .div-opleidingen-brigitte {
    flex-direction: column;
    max-width: 100%;
    margin: 0;
  }

  .opleidingen-brigitte {
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    
    padding: 0;
    height: auto;
    padding-top: 20px;
  }

  .opleidingen-brigitte em, .opleidingen-brigitte p {
    margin: 20px;

  }

  

  .foto-brigitte-groot {
    position: static;
    margin: 0;
    margin-bottom: 50px;
  }

  .foto-brigitte-groot img {
    margin: 0;
    max-width: 100%;
    height: auto;
  }

  .foto-yoni-groot {
    position: static;
    margin: 0;
    margin-bottom: 50px;
  }

  .foto-yoni-groot img {
    margin: 0;
    max-width: 100%;
    height: auto;
  }






  .div-foto-tekst-sarah {
    flex-direction: column;
    position: static;
    margin: 0;
    max-width: 100%;
  }

  .tekst-sarah-groot {
    position: static;
    margin: 0;
    
    padding: 0;
    padding-top: 20px;
    min-width: 100%;
    
  }

  .tekst-sarah-groot em, .tekst-sarah-groot p {
    margin: 20px;
  }

  .over-sarah {
    position: static;
    margin-left: 0;
    
    min-width: 100%;
    max-width: 100%;

  }

  .div-opleidingen-sarah {
    flex-direction: column;
    max-width: 100%;
    margin: 0;
  }

  .opleidingen-sarah {
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    
    padding: 0;
    height: auto;
    padding-top: 20px;
  }

  .opleidingen-sarah em, .opleidingen-sarah p {
    margin: 20px;

  }

  

  .foto-sarah-groot, .foto-sarah-groot2 {
    position: static;
    margin: 0;
    margin-bottom: 50px;
    max-width: 100%;

  }

  .foto-sarah-groot img, .foto-sarah-groot2 img {
    margin: 0;
    max-width: 100%;
    height: auto;
    
    padding: 0;
  }

  .ortho-kleurkader-1, .ortho-kleurkader-2 {
    display: none;
  }

  .specialisatie-kader, .hyper-kader {
    flex-direction: column;
    margin: 0;
    margin-top: 50px;
    
  }

  .specialisatie-fotokader, .hyper-fotokader {
    min-width: 100%;
    max-width: 100%;
    
  }

  .specialisatie-fotokader img {
    position: relative;
  }

  .specialisatie-tekstkader, .hyper-tekstkader {
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .specialisatie-tekstkader h1 {
    text-align: left;
  }

  .manuele-kleurkader-1, .manuele-kleurkader-2, .myo-kleurkader-1, .myo-kleurkader-2, .prenatale-kleurkader-1, .prenatale-kleurkader-2, .hyper-kleurkader-1, .kaak-kleurkader-1,
   .rugschool-kleurkader-1, .rugschool-kleurkader-2, .core-kleurkader-1, .core-kleurkader-2 {
    display: none;
  }

  .myotitle {
    margin-left: 50px;
  }

  .lezingtitle h1 {
    margin-left: 30px;
    margin-right: 20px;
    max-width: 100%;
    font-size: 22;
  }

  .element-animation {
    opacity: 1;
  }
  
  .kinovateatwork-titel {
    margin-top: 30px;
    font-size: 22;
  }

  .kinovateatwork-subtitel {
    max-width: 400px;
    font-size: 16;
  }

  .bedrijf-in-topvorm-box, .tijd-voor-verandering-box, .oplossing-box, .aanbod-box, .aanbod-workshop-box, .werkwijze-box, .topvorm-box {
    flex-direction: column;
    gap: 30px;
    
    height: 700px;
    justify-content: start;
  }

  .aanbod-box {
    height: 3500px;
    margin-bottom: 10px;
  }

  .aanbod-workshop-box-1 {
    margin-bottom: 150px;
    width: 100%;
    max-width: 400px;
  }

  .aanbod-workshop-box-1 img {
    max-width: 100%;
    width: auto;
    height: auto;
  }

  .bedrijf-in-topvorm-tekst, .tijd-voor-verandering-tekst-p, .oplossing-tekst, .oplossing-tekst-box, .aanbod-box, .werkwijze-box  {
    text-align: center;
    max-width: 400px;
  }

  .kinovateatworkcontent h1 {
    font-size: 40;
  }

  

  .kinovateatworkcontent * {
    max-width: 100%;

  }

  .bedrijf-in-topvorm-image-box {
    width: 100%;
    max-width: 400px;
  }

  .moveboximage img {
    width: 100%;
    max-width: 300px;
  }

  .oplossing-kleurkader, .topvorm-kleurkader, .werkwijze-kleurkader, .aanbod-workshop-kleurkader, .aanbod-workshop-kleurkader2 {
    display: none;
  }

  .tijd-voor-verandering-image {
    display: none;

  }

  .tijd-voor-verandering-box {
    height: 600px
  }

  
  .tijd-voor-verandering-tekst, .oplossing-tekst, .aanbod-workshop-box, .werkwijze-box {
    margin-left: 0px;
    width: 100%;
    max-width: 400px;
    padding: 0;

    text-align: center;
  }

  .oplossing-box, .aanbod-box, .werkwijze-box {
    margin-left: 0;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }

  .werkwijze-box {
    height: 1000px;
  }

  .tegels, .tegels-specialisaties {
    width: 90%;
    gap: 20px;
  }

  .tegel {
    width: 100%;
    max-width: 340px;
    height: auto;
    padding-bottom: 20px;
  }


  
  
 
}