/**************************************************************************/
/***************************** PRODUCTIVITEIT *****************************/
/**************************************************************************/

/********** TECH **********/
.tech { display: flex; justify-content: space-between; }
.tech-video > embed { width: 100%; height: 301px; vertical-align: middle; }
.tech-video { position: relative; }
#play-tech-video { position: absolute; width: 100%; height: 301px; border-radius: 0px 0px 40px 0px; overflow: hidden; }
#play-tech-video:hover { cursor: pointer; }
/* .tech-video, .kolom-tekst { width: 49%; } */
.kolom-tekst { padding-left: 40px; }

/********** SUPPORT **********/
.support-bg { background: linear-gradient(90deg, #FFFFFF 50%, #0B3279 50%); }
.support { background-color: #0B3279; border-radius: 60px 0px 0px 60px; padding-bottom: 60px; }
.support > h2 { color: white; padding-top: 40px; padding-left: 40px; }

.tekst-blok-blauw { border-left: 2px solid #6CC3E4; border-right: 2px solid #6CC3E4; border-bottom: 2px solid #6CC3E4; border-radius: 0px 0px 80px 0px; }
.tekst-blok-blauw-donker { border-left: 2px solid white; border-right: 2px solid white; border-bottom: 2px solid white; border-radius: 0px 0px 80px 0px; }
.tekst-blok-rood { border-left: 2px solid #D2435A; border-right: 2px solid #D2435A; border-bottom: 2px solid #D2435A; border-radius: 0px 0px 80px 0px; }
.tekst-blok-oranje { border-left: 2px solid #FF9015; border-right: 2px solid #FF9015; border-bottom: 2px solid #FF9015; border-radius: 0px 0px 80px 0px; }
.tekst-blok-paars { border-left: 2px solid #5B2D86; border-right: 2px solid #5B2D86; border-bottom: 2px solid #5B2D86; border-radius: 0px 0px 80px 0px; }
.tekst-blok1, .tekst-blok2, .tekst-blok3, .tekst-blok4, .tekst-blok5 { opacity: 0; height: 0px; overflow: hidden; transition: all linear .3s; }
.tekst-blok1.active, .tekst-blok2.active, .tekst-blok3.active, .tekst-blok4.active, .tekst-blok5.active { 
    height: 150px; transition: all linear .3s; padding-inline: 80px; padding-block: 60px; opacity: 1; }
.blok-titel { padding-bottom: 40px; }
.blok1:hover, .blok2:hover, .blok3:hover, .blok4:hover, .blok5:hover { cursor: pointer; }
.lead-gen, .win-it, .sell-it, .business { margin-block: 30px; }
.blok-titel, .lead-gen > h2, .win-it > h2, .sell-it > h2, .business > h2, .career > h2 { color: white; background-color: #41B3E0; border-radius: 0px 40px 0px 0px; overflow: hidden; }
.win-it > h2 { background-color: #0B3279; border: 1px solid white; }
.sell-it > h2 { background-color: #C8102E; }
.business > h2 { background-color: #FF9015; }
.career > h2 { background-color: #5B2D86; }
.lead-gen > h2, .win-it > h2, .sell-it > h2, .business > h2, .career > h2 { padding-left: 10px; }
.lead-gen, .win-it, .sell-it, .business, .career { background-color: white; border-radius: 0px 40px 80px 0px; margin-left: 40px; }
.blok-rij-blauw { display: flex; color: white; padding-left: 3px; border-left: 2px solid #6CC3E4; border-right: 2px solid #6CC3E4; }
.blok-rij-rood { display: flex; color: white; padding-left: 3px; border-left: 2px solid #C8102E; border-right: 2px solid #C8102E; }
.blok-rij-oranje { display: flex; color: white; padding-left: 3px; border-left: 2px solid #FF9015; border-right: 2px solid #FF9015; }
.blok-rij-paars { display: flex; color: white; padding-left: 3px; border-left: 2px solid #5B2D86; border-right: 2px solid #5B2D86; }

.blok1 > h1, .blok2 > h1, .blok3 > h1, .blok4 > h1, .blok5 > h1 { padding-inline: 100px; padding-block: 20px; font-size: 18px; font-weight: 600; text-align: center; }
.blok-rij-blauw > .blok1 > h1, .blok-rij-blauw > .blok2 > h1, .blok-rij-blauw > .blok3 > h1, .blok-rij-blauw > .blok4 > h1, .blok-rij-blauw > .blok5 > h1 { padding-block: 30px; padding-inline: 104px; height: 50%; align-content: center; }
.blok-rij-rood > .blok1 > h1, .blok-rij-rood > .blok2 > h1, .blok-rij-rood > .blok3 > h1, .blok-rij-rood > .blok4 > h1, .blok-rij-rood > .blok5 > h1 { padding-inline: 91px; }

.tekst-rij-blauw > div > div > h1 { color: #027BC7; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-bottom: 30px; }
.tekst-rij-blauw-donker > div > div > h1 { color: #062150; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-bottom: 30px;  }
.tekst-rij-rood > div > div > h1 { color: #C8102E; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-bottom: 30px;  }
.tekst-rij-oranje > div > div > h1 { color: #FF9015; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-bottom: 30px;  }
.tekst-rij-paars > div > div > h1 { color: #33194B; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-bottom: 30px;  }

.blok-rij-blauw > .blok1 { font-weight: 600; background-color: #6CC3E4; border: 4px solid white; border-radius: 0px 0px 40px 0px; z-index: 5; /*min-width: 50%;*/ }
.blok-rij-blauw > .blok2 { position: relative; font-weight: 600; color: #00558A; background-color: #99D3EA; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-40px); z-index: 4; /*min-width: 52%;*/ }
.blok-rij-blauw > .blok3 { position: relative; font-weight: 600; color: #00558A; background-color: #C0E0ED; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-80px); padding-left: 11px; z-index: 3; }
.blok-rij-blauw > .blok4 { position: relative; font-weight: 600; color: #00558A; background-color: #DFEBF0; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-120px); padding-left: 11px; z-index: 2; }
.blok-rij-blauw > .blok5 { position: relative; font-weight: 600; color: #00558A; background-color: #F2F2F2; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-160px); padding-left: 11px; z-index: 1; }

.blok-rij-blauw-donker { display: flex; color: white; padding-left: 3px; border-left: 2px solid white; border-right: 2px solid white; }
.blok-rij-blauw-donker > .blok1 { font-weight: 600; background-color: #3F5E94; border: 4px solid white; border-radius: 0px 0px 40px 0px; z-index: 5; }
.blok-rij-blauw-donker > .blok2 { position: relative; font-weight: 600; color: #062150; background-color: #90A1BE; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-40px); padding-left: 11px; z-index: 4; }
.blok-rij-blauw-donker > .blok3 { position: relative; font-weight: 600; color: #062150; background-color: #B1BCCF; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-80px); padding-left: 11px; z-index: 3; }
.blok-rij-blauw-donker > .blok4 { position: relative; font-weight: 600; color: #062150; background-color: #DADEE5; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-120px); padding-left: 10px; z-index: 2; }
.blok-rij-blauw-donker > .blok5 { position: relative; font-weight: 600; color: #062150; background-color: #F2F2F2; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-160px); padding-left: 11px; z-index: 1; }
.blok-rij-blauw-donker > .blok5 > h1 { padding-inline: 60px; }

.blok-rij-rood > .blok1 { font-weight: 600; background-color: #D2435A; border: 4px solid white; border-radius: 0px 0px 40px 0px; z-index: 5; }
.blok-rij-rood > .blok2 { position: relative; font-weight: 600; color: #81002B; background-color: #E1929E; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-40px); padding-left: 40px; z-index: 4; }
.blok-rij-rood > .blok3 { position: relative; font-weight: 600; color: #81002B; background-color: #E7B2BA; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-80px); padding-left: 40px; z-index: 3; }
.blok-rij-rood > .blok4 { position: relative; font-weight: 600; color: #81002B; background-color: #EEDADD; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-120px); padding-left: 38px; z-index: 2; }
.blok-rij-rood > .blok5 { position: relative; font-weight: 600; color: #81002B; background-color: #F2F2F2; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-160px); padding-left: 40px; z-index: 1; }
.blok-rij-rood > .blok5 > h1 { padding-inline: 53px; }

.blok-rij-oranje > .blok1 > h1, .blok-rij-oranje > .blok2 > h1, .blok-rij-oranje > .blok3 > h1, .blok-rij-oranje > .blok4 > h1, .blok-rij-oranje > .blok5 > h1 { padding-inline: 49px; height: 50%; align-content: center; }
.blok-rij-oranje > .blok1 { font-weight: 600; background-color: #FCA647; border: 4px solid white; border-radius: 0px 0px 40px 0px; z-index: 5; min-width: 32%; }
.blok-rij-oranje > .blok2 { position: relative; font-weight: 600; color: #8C2F00; background-color: #F8C993; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-40px); padding-left: 40px; z-index: 4; min-width: 32%; }
.blok-rij-oranje > .blok3 { position: relative; font-weight: 600; color: #8C2F00; background-color: #F6D7B3; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-80px); padding-left: 40px; z-index: 3; min-width: 33.6%; }
.blok-rij-oranje > .blok4 { position: relative; font-weight: 600; color: #8C2F00; background-color: #F3E8DB; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-120px); padding-left: 40px; z-index: 2; }
.blok-rij-oranje > .blok5 { position: relative; font-weight: 600; color: #8C2F00; background-color: #F2F2F2; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-160px); padding-left: 40px; z-index: 1; }

.blok-rij-paars > .blok1 { font-weight: 600; background-color: #A68FBC; border: 4px solid white; border-radius: 0px 0px 40px 0px; z-index: 5; }
.blok-rij-paars > .blok2 { position: relative; font-weight: 600; color: #33194B; background-color: #C7BAD4; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-52px); padding-left: 40px; z-index: 4; }
.blok-rij-paars > .blok3 { position: relative; font-weight: 600; color: #33194B; background-color: #E2DDE7; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-100px); padding-left: 40px; z-index: 3; }
.blok-rij-paars > .blok4 { position: relative; font-weight: 600; color: #33194B; background-color: #E2DDE7; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-150px); padding-left: 40px; z-index: 2; }
.blok-rij-paars > .blok5 { position: relative; font-weight: 600; color: #33194B; background-color: #F2F2F2; border: 4px solid white; border-radius: 0px 0px 40px 0px; transform: translateX(-200px); padding-left: 38px; z-index: 1; }
.blok-rij-paars > .blok1 > h1, .blok-rij-paars > .blok2 > h1, .blok-rij-paars > .blok3 > h1, .blok-rij-paars > .blok4 > h1, .blok-rij-paars > .blok5 > h1 { padding-inline: 62px; height: 50%; align-content: center; }

.mobileVersion { display: none; }
.support-mobile { padding-left: 0; padding-inline: 5%; }
.lead-gen-mobile, .win-it-mobile, .sell-it-mobile, .business-mobile, .career-mobile { border-radius: 0px 40px 0px 0px; }
/* .lead-gen > h2 { padding-inline: 5%; } */
.sub-titel { padding-inline: 5%; border-bottom: 3px solid white; }
.blok1-blauw > .sub-titel, .blok2-blauw > .sub-titel, .blok3-blauw > .sub-titel, .blok4-blauw > .sub-titel, .blok5-blauw > .sub-titel
{ background-color: #99D2EA; }
.blok1-donkerblauw > .sub-titel, .blok2-donkerblauw > .sub-titel, .blok3-donkerblauw > .sub-titel, .blok4-donkerblauw > .sub-titel, .blok5-donkerblauw > .sub-titel
{ background-color: #90A1BE; }
.blok1-rood > .sub-titel, .blok2-rood > .sub-titel, .blok3-rood > .sub-titel, .blok4-rood > .sub-titel, .blok5-rood > .sub-titel
{ background-color: #E1929E; }
.blok1-oranje > .sub-titel, .blok2-oranje > .sub-titel, .blok3-oranje > .sub-titel, .blok4-oranje > .sub-titel, .blok5-oranje > .sub-titel
{ background-color: #F8C993; }
.blok1-paars > .sub-titel, .blok2-paars > .sub-titel, .blok3-paars > .sub-titel, .blok4-paars > .sub-titel, .blok5-paars > .sub-titel
{ background-color: #C7BAD4; }
.sub-titel > h2 { font-weight: normal; font-size: 16px; padding-block: 10px; }
.blok1-donkerblauw > .sub-titel > h2, .blok2-donkerblauw > .sub-titel > h2, .blok3-donkerblauw > .sub-titel > h2, .blok4-donkerblauw > .sub-titel > h2, .blok5-donkerblauw > .sub-titel > h2,
.blok1-donkerblauw > .content > .gemarkeerd, .blok2-donkerblauw > .content > .gemarkeerd, .blok3-donkerblauw > .content > .gemarkeerd, .blok4-donkerblauw > .content > .gemarkeerd, .blok5-donkerblauw > .content > .gemarkeerd
{ color: #062150; }
.blok1-donkerblauw > .sub-titel > h2, .blok2-donkerblauw > .sub-titel > h2, .blok3-donkerblauw > .sub-titel > h2, .blok4-donkerblauw > .sub-titel > h2, .blok5-donkerblauw > .sub-titel > h2
{ color: #5B2D86; }
.blok1-rood > .content > .gemarkeerd, .blok2-rood > .content > .gemarkeerd, .blok3-rood > .content > .gemarkeerd, .blok4-rood > .content > .gemarkeerd, .blok5-rood > .content > .gemarkeerd
{ color: #c8102e; }
.blok1-oranje > .content > .gemarkeerd, .blok2-oranje > .content > .gemarkeerd, .blok3-oranje > .content > .gemarkeerd, .blok4-oranje > .content > .gemarkeerd, .blok5-oranje > .content > .gemarkeerd
{ color: #ff9015; }
.blok1-paars > .content > .gemarkeerd, .blok2-paars > .content > .gemarkeerd, .blok3-paars > .content > .gemarkeerd, .blok4-paars > .content > .gemarkeerd, .blok5-paars > .content > .gemarkeerd
{ color: #33194b; }
.blok1-rood > .sub-titel > h2, .blok2-rood > .sub-titel > h2, .blok3-rood > .sub-titel > h2, .blok4-rood > .sub-titel > h2, .blok5-rood > .sub-titel > h2
{ color: #81002B; }
.blok1-oranje > .sub-titel > h2, .blok2-oranje > .sub-titel > h2, .blok3-oranje > .sub-titel > h2, .blok4-oranje > .sub-titel > h2, .blok5-oranje > .sub-titel > h2
{ color: #8C2F00; }
.sub-titel:hover { cursor: pointer; }
.content { height: 0px; overflow: hidden; transition: all .2s linear; }
.content.active { height: auto; padding: 30px; transition: all .2s linear; }

/*------------------------------------------------------------------------*/


/**************************************************************************/
/******************************* RESPONSIVE *******************************/
/**************************************************************************/
@media screen and (max-width: 1195px) { 
    .desktopVersion { display: none; }
    .mobileVersion { display: block; margin-left: 5%; }
	
}

@media screen and (max-width: 990px) { 
    .quote { flex-wrap: wrap !important; }
    .quote-links, .quote-rechts { width: 100%; }
}

@media screen and (max-width: 860px) { 
    .tech { flex-wrap: wrap; }
    .tech-video > embed, #play-tech-video { height: 50vw; }
    .tech-video, .kolom-tekst { width: 100%; }
    .kolom-tekst { margin-top: 30px; }
}


@media screen and (max-width: 567px) {
	.kolom-tekst { padding-left: 0; }
	.mobileVersion { margin-left: 0; }
	.support > h2 { padding-left: 0; padding-top: 20px;  }
	.support { padding-bottom: 20px; }
	.lead-gen, .win-it, .sell-it, .business, .career { margin-left: 0; }

}

@media screen and (max-width: 450px) { 
    .pagename { font-size: 32px; }
    .blok-titel, .lead-gen > h2, .win-it > h2, .sell-it > h2, .business > h2, .career > h2 { font-size: 20px; }
    .career > h2 { font-size: 16px; }
}

/*------------------------------------------------------------------------*/