/**************************************************************************/
/********************************** LEREN *********************************/
/**************************************************************************/

/********** SUCCESS **********/
.success > h2 { padding-left: 40px; }
.kolommen { display: flex; justify-content: space-between; }
.kolom-links { width: 45%; padding-left: 40px; }
.kolom-rechts { display: flex; flex-wrap: wrap; justify-content: space-around; width: 40%; height: 440px; background-color: #0B3279; border-radius: 60px 0px 0px 0px; padding: 90px 30px 30px 30px; }
.kolom-rechts > h2 { width: 100%; color: white; font-size: 21px; font-weight: 500; }
.kolom-rechts > .links, .kolom-rechts > .rechts { width: 42%; height: 32%; }
.blok1, .blok2, .blok3 { display: flex; margin-block: 20px; }
p.tekst { padding-left: 0;  }
.tekst { padding-inline: 20px;  }
.tekst > h2 { font-size: 16px; font-weight: 600; }
.tekst > h1 { padding-bottom: 0; font-size: 18px; }
.icon { margin-right: 10px;  }
.gemarkeerd-oranje { color: #FF9015; }
.gemarkeerd-paars { color: #5B2D86; }
.gemarkeerd-blauw { color: #027BC7; }
.procent-tekst { color: white; font-weight: bold; font-size: 24px; }
.procent { color: #41B3E0; font-size: 40px; font-weight: bold; }
.links { border-right: 4px dotted #41B3E0; }

/********** VIDEO **********/
.video { position: relative; }
.video > h2 { padding-bottom: 30px; }
#play-leren-video { position: absolute; width: 100%; border-radius: 0px 0px 40px 0px; overflow: hidden; }
#play-leren-video:hover { cursor: pointer; }
.video > embed { width: 100%; height: 602px; }

/********** TEAM **********/
.team-bg { background: linear-gradient(90deg, #FFFFFF 50%, #fafafa 50%); }
.team { display: flex; gap: 80px; background-color: #fafafa; padding-block: 40px;  }
.titel-bg { background: linear-gradient(90deg, #FFFFFF 50%, #0B3279 50%);  }
.titel { background-color: #0B3279; border-radius: 60px 0px 0px 0px; }
.titel > h2 { color: white; padding-block: 20px; padding-left: 40px; }
.medewerker { width: 25%; height: fit-content; padding-left: 40px; }
.medewerker > img { width: 100%; object-fit: cover; overflow: hidden; border-radius: 0px 0px 40px 0px; }
.medewerker > h2 { font-size: 24px; padding-block: 10px; }
.medewerker > h1 { color:#414042; }
.team-kolommen { display: flex; background-color: #fafafa; border-radius: 0px 0px 0px 60px; padding-bottom: 80px; }
.team-kolom-links, .team-kolom-rechts { width: 50%; padding-left: 40px; }

/********** PIJLERS **********/
.pijlers-bg { background: linear-gradient(90deg, #FFFFFF 50%, #0B3279 50%); }
.pijlers { background-color: #0B3279; padding-left: 55px; border-radius: 100px 0px 0px 0px; }
.pijlers > h2 { padding-top: 50px; color: white; font-size: 42px; }
.pijlers > p { width: 60%; color: #41B3E0; padding-bottom: 40px; }
.pijlers > img { width: 100%; padding-right: 20px; }
.pijlers-blokken { display: flex; gap: 70px; padding-right: 20px; }
.pijlers-blok { width: 20%; color: white; padding-bottom: 60px; }
.pijlers-blok > h2 { color: white; padding-block: 20px; font-size: 18px; height: 60px; font-weight: 500; padding-bottom: 15px; text-transform: uppercase; }
.pijlers-blok > h1 { margin-top: auto; height: 35px; font-size: 14px; font-weight: bold; text-transform: uppercase; }
.opsomming { padding-block: 5px; font-size: 14px; font-weight: bold; }
.opsommingen { display: flex; flex-wrap: wrap; }
.opsommingen > div { display: flex; width: 100%; }
.checkmark { font-size: 24px; }
.checkmark-rood { color:#C8102E; }
.checkmark-blauw { color:#41B3E0; }
.checkmark-geel { color:#FF9015; }
.checkmark-paars { color:#5B2D86; }

/********** TRAINING **********/
.training { display: flex; justify-content: space-between; flex-wrap: wrap; }
.training > h2, .training > p { width: 100%; }
.opsomming-kolom { width: 40%; }
.afbeelding-kolom { width: 50%; margin-block: auto; }
.afbeelding-kolom > img { width: 100%; }
.opsomming-tekst > h2 { font-size: 24px; padding-bottom: 20px; }
.opsomming1, .opsomming2, .opsomming3, .opsomming4 { font-size: 14px; }
.opsomming1 > span, .opsomming2 > span, .opsomming3 > span, .opsomming4 > span { font-weight: bold; white-space: nowrap; }
.hoofd-opsomming1, .hoofd-opsomming2, .hoofd-opsomming3 { padding-top: 40px; display: flex; }
.rondje { margin-right: 30px; }
.vulling-oranje { background-color: #FF9015; border-radius: 100px; width: 20px; height: 20px; margin-top: 5px; }
.vulling-paars { background-color: #5B2D86; border-radius: 100px; width: 20px; height: 20px; margin-top: 5px; }
.vulling-blauw { background-color: #41B3E0; border-radius: 100px; width: 20px; height: 20px; margin-top: 5px; }
.copyright-training { color: #6D6E71; padding-top: 80px; }
/*------------------------------------------------------------------------*/


/**************************************************************************/
/******************************* RESPONSIVE *******************************/
/**************************************************************************/
@media screen and (max-width: 1180px) { 
    .video > embed { height: 50vw !important; }
    .pijlers-blokken { gap: 0; flex-wrap: wrap; }
    .pijlers-blok { width: 50%; }
    .pijlers > img { width: 90%; }
    .team-kolommen { flex-wrap: wrap; }
    .team-kolom-links, .team-kolom-rechts { width: 100%; padding-right: 20px; }
    .team-kolom-rechts { margin-top: 30px; }
    .team { padding-right: 20px; }
}

@media screen and (max-width: 922px) { 
    .medewerker { width: 40%; }
    .pijlers > .gemarkeerd { width: 80%; }
}

@media screen and (max-width: 860px) {  
    .kolommen { flex-wrap: wrap; }
    .kolom-links, .kolom-rechts { width: 100%; }
    .success.container { padding-inline: 0; }
    .kolom-links, .success > h2 { padding-inline: 5%; }
}
@media screen and (max-width: 768px) { 
    .opsomming-kolom, .afbeelding-kolom { width: 100%; }
}

@media screen and (max-width: 640px) { 
    .pijlers-blok { width: 100%; }
    .pijlers-blok > h2 { height: 40px; }
}

@media screen and (max-width: 575px) { 
    .medewerker { width: 100%; }
    .team { flex-wrap: wrap; }
    .pijlers, .team-kolommen, .team, .titel > h2 { padding-left: 5%; }
	.team { gap: 40px; }
    .hoofd-opsomming1, .hoofd-opsomming2, .hoofd-opsomming3 { flex-wrap: wrap; justify-content: center; }
    .rondje { margin-right: 0; margin-bottom: 10px; }
	.kolom-rechts { padding: 5%; padding-top: 20px; padding-bottom: 30px; }
	.medewerker, .team-kolom-links, .team-kolom-rechts { padding-left: 0; }
	.team-kolommen { padding-bottom: 40px; }
	.tekst { padding-inline: 0; padding-left: 20px; padding-right: 0; }

}

@media screen and (max-width: 410px) { 
    .opsomming-tekst > h2 { font-size: 16px; }
    .kolom-rechts { flex-wrap: wrap; height: auto; }
    .kolom-rechts > .links, .kolom-rechts > .rechts { width: 100%; }
    .kolom-rechts > .links { border-right: none; padding-block: 30px; height: auto; }
}
/*------------------------------------------------------------------------*/