/**************************************************************************/
/******************************** PRESTATIE *******************************/
/**************************************************************************/

/********** SUCCESS **********/
.success-boven, .success-onder { display: flex; }
.success-video { width: 50%; }
.success-onder { margin-top: 30px; }
.success-video > embed { width: 100%; height: 280px; vertical-align: middle; }
.success-video { position: relative; }
#play-success-video { position: absolute; width: 100%; height: 280px; border-radius: 0px 0px 40px 0px; overflow: hidden; }
#play-success-video:hover { cursor: pointer; }
.success-rechts { padding-left: 40px; }
.kolom-links, .kolom-rechts { display: flex; padding-left: 40px; }
.inhoud { padding-inline: 20px; }
.inhoud > h1 { font-size: 24px; }
.svg-img { margin-block: auto; }

/********** STRATREGY **********/
.strategy-bg { background: linear-gradient(90deg, #FFFFFF 50%, #0B3279 50%); margin-bottom: 0;  }
.strategy { background-color: #0B3279; border-radius: 60px 0px 0px 0px; padding-bottom: 40px; height: 975px; }
.strategy-boven > h2 { color: white; padding-top: 40px; padding-left: 40px; }
.strategy-boven > p { font-size: 26px; padding-right: 20px; padding-left: 40px; }
.strategy-onder { display: flex; justify-content: space-between; color: white; padding-left: 40px; }
.oranje, .blauw, .paars { width: 30%; align-self: start; margin-top: 30px; }
.oranje { background: linear-gradient(180deg, #FF9015 50%, #FFFFFF 50%); border-radius: 0px 56px 0px 0px; }
.blok-header { font-size: 24px; font-weight: 500; }
.blauw { background: linear-gradient(180deg, #41B3E0 50%, #FFFFFF 50%);  border-radius: 0px 56px 0px 0px; }
.paars { background: linear-gradient(180deg, #5B2D86 50%, #FFFFFF 50%);  border-radius: 0px 56px 0px 0px; }
.oranje > h1, .blauw > h1, .paars > h1 { padding: 30px 30px 20px 30px; font-size: 24px; color: white; font-weight: bold; width: 49.8%; }
.blok2, .blok3, .blok4 { background-color: white; }
.blok1-top, .blok2-top, .blok3-top, .blok4-top { display: flex; background-color: white; padding: 30px;  }
.blok1-top { border-radius: 0px 56px 0px 0px; }
.blok2-top, .blok3-top, .blok4-top { border-radius: 0px 56px 0px 0px; border-top: 2px solid rgba(168, 168, 168, 0.521); }
.blok1-top:hover, .blok2-top:hover, .blok3-top:hover, .blok4:hover { cursor: pointer; }
.blok1-top > h1, .blok2-top > h1, .blok3-top > h1, .blok4-top > h1 { width: 90%; }
.blok1-bottom, .blok2-bottom, .blok3-bottom, .blok4-bottom { background-color: white; color: black; }
.oranje > .blok1 > .blok1-top > h1, .oranje > .blok2 > .blok2-top > h1, .oranje > .blok3 > .blok3-top > h1
{ color: #FF9015; font-size: 20px; font-weight: 500; }
.blauw > .blok1 > .blok1-top > h1, .blauw > .blok2 > .blok2-top > h1, .blauw > .blok3 > .blok3-top > h1, .blauw > .blok4 .blok4-top > h1
{ color: #41B3E0; font-size: 20px; font-weight: 500;}
.paars > .blok1 > .blok1-top > h1, .paars > .blok2 > .blok2-top > h1, .paars > .blok3 > .blok3-top > h1, .paars > .blok4 .blok4-top > h1
{ color: #5B2D86; ; font-size: 20px; font-weight: 500; }
.blok-tekst { padding: 30px; font-size: 14px; }

.oranje > .blok1 > .blok1-top > .arrow, .oranje > .blok2 > .blok2-top > .arrow, .oranje > .blok3 > .blok3-top > .arrow 
{ color: #FF9015; }
.blauw > .blok1 > .blok1-top > .arrow, .blauw > .blok2 > .blok2-top > .arrow, .blauw > .blok3 > .blok3-top > .arrow, .blauw > .blok4 > .blok4-top > .arrow
{ color: #41B3E0; }
.paars > .blok1 > .blok1-top > .arrow, .paars > .blok2 > .blok2-top > .arrow, .paars > .blok3 > .blok3-top > .arrow, .paars > .blok4 > .blok4-top > .arrow
{ color: #5B2D86; }

.blok1-bottom, .blok2-bottom, .blok3-bottom, .blok4-bottom { overflow: hidden; max-height: 0px; transition: all .25s linear; }

.oranje-blok1-bottom.active, .oranje-blok2-bottom.active, .oranje-blok3-bottom.active,
.blauw-blok1-bottom.active, .blauw-blok2-bottom.active, .blauw-blok3-bottom.active, .blauw-blok4-bottom.active,
.paars-blok1-bottom.active, .paars-blok2-bottom.active, .paars-blok3-bottom.active, .paars-blok4-bottom.active
{ max-height: 480px; transition: all 0.5s linear; }

/********** TEAM **********/
.team-bg { background: linear-gradient(90deg, #FFFFFF 40%, #fafafa 40%); margin-top: 0;; }
.team { background: #fafafa; padding-block: 50px; border-radius: 0px 0px 0px 60px;  }
.corner { position: absolute; left: 40px; }
.team > h2 { padding-top: 10px; padding-left: 60px; }
.medewerker-teamleider { display: flex; justify-content: center; padding-right: 80px; }
.info-teamleider { display: flex; margin-inline: auto; }
.teamleider-foto { display: flex; justify-content: end; }
.teamleider-foto > img { width: 60%; border-radius: 0px 0px 40px 0px; overflow: hidden; }
.foto-teamleider > h1 { color: var(--main-txt-color); text-transform: uppercase; font-weight: 500; padding-block: 5px; }
.foto-teamleider > h1, .foto-teamleider > p { width: 72%; text-align: end; }
.foto-teamleider > p { width: 94%; }
h2.prestatie, h2.service { width: 100%; color: #027BC7; text-transform: uppercase; line-height: 34px; font-size: 36px; font-weight: bold; padding-block: 40px; }
h2.service { color: #5B2D86; }
.prestatie-team, .service-team { display: flex; flex-wrap: wrap; justify-content: space-between; }
.medewerker { width: 30%; margin-block: 20px; }
.medewerker > img { width: 100%; border-radius: 0px 0px 40px 0px; overflow: hidden; }
.medewerker > h1 { color: #027BC7; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-block: 10px ;}
.medewerker > p { color: #414042; font-size: 14px; }
.medewerker-empty { width: 30%; height: 0; } 
.service-team > .medewerker > h1 { color: #5B2D86; }
.teamleider, .prestatie-team, .service-team, .medewerker-teamleider { padding-left: 40px; }
/*------------------------------------------------------------------------*/


/**************************************************************************/
/******************************* RESPONSIVE *******************************/
/**************************************************************************/

@media screen and (max-width: 1180px) { 
	.strategy-bg { margin-left: 5%; padding-right: 5%; }
}



@media screen and (max-width: 985px) { 
	.strategy { height: unset; }
    .strategy-onder { flex-wrap: wrap; }
    .oranje, .blauw, .paars { width: 100%; }
    .teamleider-foto { justify-content: center; }
}

@media screen and (max-width: 860px) { 
    .success-boven { flex-wrap: wrap; }
    .success-video, .success-video > embed, .success-rechts { width: 100%; }
    .success-video > embed, #play-success-video { height: 50vw;  }
    .foto-teamleider > h1, .foto-teamleider > p { width: 100%; text-align: center; }
    .medewerker { width: 40%; }
    .teamleider-foto > img { width: 100%; }
}

@media screen and (max-width: 640px) {  
    .success-onder { flex-wrap: wrap; }
    .kolom-links, .kolom-rechts { width: 100%; }
}

@media screen and (max-width: 575px) { 
    .strategy, .teamleider, .prestatie-team, .service-team, .medewerker-teamleider { padding-left: 5%; }
	.corner { left: 5%; }
	.team > h2 { padding-left: 40px; }
	.team { padding-right: 5%; }
	.success-rechts, .kolom-links, .kolom-rechts { padding-left: 0; }
	.strategy-bg { margin-left: 0; }
	.strategy-boven > h2, .strategy-boven > p, .strategy-onder { padding-left: 0; }
	.strategy-boven > h2 { padding-top: 20px; }
}

@media screen and (max-width: 450px) { 
    .medewerker { width: 100%; }
    .strategy-boven > p { line-height: 30px; }
    .oranje-blok3-bottom.active { max-height: 900px; }
    .oranje > h1, .blauw > h1, .paars > h1 { font-size: 20px; }
    .oranje > .blok1 > .blok1-top > .arrow, .oranje > .blok2 > .blok2-top > .arrow, .oranje > .blok3 > .blok3-top > .arrow { padding-left: 10px; }
  }
  /*------------------------------------------------------------------------*/