/**************************************************************************/
/****************************** FLEXIBILITEIT *****************************/
/**************************************************************************/


/********** CORNERSTONE **********/
.cornerstones { margin-top: 0; }
.video { display: flex; margin-top: 0; position: relative; }
#play-corner-video { position: absolute; width: 100%; height: 280px; border-radius: 0px 0px 40px 0px; overflow: hidden; }
#play-corner-video:hover { cursor: pointer; }
.corner-links { width: 50%; position: relative; }
.corner-rechts { padding-left: 40px; } 
.corner-links > embed { width: 100%; height: 280px; vertical-align: middle; }
.branding { display: flex; }
.branding-links { width: 45%; padding-inline: 40px; }
.branding-links > .gemarkeerd { font-size: 18px; }
.branding-rechts { width: 55%; height: 300px; text-align: center; padding: 60px 30px 60px 40px; background-color: var(--main-txt-color); border-radius: 60px 60px 60px 60px;}
.branding-rechts > h1 { font-size: 32px; font-weight: bold; line-height: 43px; color: white; }
.branding-rechts > .gemarkeerd { color: #41B3E0; font-size: 18px; font-weight: bold; line-height: 23px; margin-top: 20px; }
.classic-powered { display: flex; justify-content: space-evenly; margin-top: 40px;  }

/********** POWERED **********/
.powered-bg { background: linear-gradient(90deg, #FFFFFF 50%, #DFE6EB 50%); margin-top: 0; }
.powered { background: #DFE6EB; border-radius: 0px 0px 0px 60px; }
.powered > h2 { color: #414042; display: block; margin-bottom: 20px; padding-left: 40px; padding-top: 40px; }
.powered-boven { display: flex; margin-block: 30px; padding-left: 40px; }
.boven-links { width: 40%; border-right: 2px dotted #5B2D86; padding-right: 10px; }
.boven-links > .gemarkeerd, .boven-rechts > .gemarkeerd { color: #746B99; padding-top: 0; }
.boven-rechts { padding-left: 20px; }
.opsomming { padding-bottom: 10px; font-size: 14px; font-weight: 600; }
.checkmark { color: #5B2D86; font-size: 24px; font-weight: bold; line-height: 20px; }
.profiel { display: flex; justify-content: center; }
.profiel-foto { width: 25%; text-align: end; }
.profiel-foto > img { width: 90px; }
.slider-quote { padding-block: 40px; font-style: italic; line-height: 30px; font-size: 24px; text-align: center; }
.info { padding-left: 20px; margin-block: auto; }
.naam-slider, .functie-slider, .keuze-slider { font-weight: 500; }
.naam-slider { color: black; }
.slideshow-container {
  position: relative;
  padding: 20px;
  margin-left: 40px;
  background-color: #FFFFFF;
  box-shadow: 0px 11px 20px 0px #B6C6D2;
  border-radius: 0px 20px 0px 0px;
  color: #6D6E71;
  height: 400px;
}
.cards { padding-left: 40px; }
.mySlides { display: none; width: 54%; margin-inline: auto; }
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #6D6E71;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next { right: 0; border-radius: 3px 0 0 3px; }
.fade { animation-name: fade; animation-duration: 1.5s; }
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
.cards-row { display: flex; justify-content: space-between; margin-top: 20px; }
.flip-card { background-color: transparent; width: 32%; height: 200px; perspective: 1000px; }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 0px 0px 40px 0px;
  background-color: #FFFFFF;
  box-shadow: 0px 11px 20px 0px #B6C6D2;
}
.flip-card-front > img, .flip-card-back > img { width: 90%; }
.flip-card-back { transform: rotateY(180deg); }

/********** CLASSIC **********/
.classic-bg { background: linear-gradient(90deg, #FFFFFF 50%, #0B3279 50%); margin-bottom: 0; }
.classic-bg .cards-row { margin-left: 40px; }
.classic { background: #0B3279; border-radius: 60px 0px 0px 0px; padding-bottom: 40px; }
.classic-boven { display: flex; margin-block: 30px; padding-left: 40px; }
.classic > h2 { color: white; display: block; margin-bottom: 20px; padding-left: 40px; padding-top: 40px; }
.boven-links-classic { border-color: #41B3E0; }
.boven-links > .gemarkeerd-classic, .boven-rechts > .gemarkeerd-classic { color: #41B3E0; padding-top: 0; }
.tekst-classic, .opsomming-classic { color: white; }
.checkmark-classic { color: #C8102E; }
.card-classic { width: 32%; background-color: #FFFFFF; border-radius: 0px 0px 40px 0px; }
.card-classic > img { width: 100%; }

/********** SERVICES **********/
.services { margin-bottom: 120px; } 
.services h2 { padding-left: 40px; }
.service-row { display: flex; justify-content: space-between; margin-top: 30px; padding-left: 40px; }
.service-blok { width: 30%; }
.service-blok > img { width: 100%; border-radius: 0px 0px 40px 0px; overflow: hidden; object-fit: cover; height: 200px; }
.service-blok > h1 { color: #027BC7; text-transform: uppercase; font-weight: bold; padding-block: 20px; }
.flexknop { display: flex; flex-wrap: wrap; min-height: 50%; }
.flexknop > a { margin-top: auto; }
.lees-meer { color: var(--main-txt-color); font-weight: bold; font-size: 18px; }
/*------------------------------------------------------------------------*/


/**************************************************************************/
/******************************* RESPONSIVE *******************************/
/**************************************************************************/
@media screen and (max-width: 1200px) { 
	.powered, .classic { margin-inline: 5%;  }
}


@media screen and (max-width: 1180px) {
	.branding { padding-inline: 0 !important; margin-left: 5%;}
	.branding-rechts { border-radius: 60px 0px 0px 60px; }
}



@media screen and (max-width: 860px) { 
  .video { flex-wrap: wrap; padding-inline: 0; padding-right: 5%; }
  .corner-links, .corner-rechts { width: 100%; }
  .corner-links { text-align: center; }
  .corner-rechts { padding-left: 0; }
  #play-corner-video, .corner-links > embed { width: 100%; height: 50vw; }
  .branding { flex-wrap: wrap; padding-inline: 0; } 
  .branding-links, .branding-rechts { width: 100%; }
  .branding-links { padding-right: 0; }
  .branding-rechts { margin-top: 30px; }
  .powered-boven, .classic-boven { flex-wrap: wrap; }
  .powered-boven > .boven-links, .powered-boven > .boven-rechts { width: 100%; }
  .classic-boven > .boven-links, .classic-boven > .boven-rechts { width: 100%; }
  .powered-boven > .boven-links { border-right: none; }
  .powered-boven > .boven-rechts { padding-left: 0; margin-top: 30px; }
  .classic-boven > .boven-links { border-right: none; }
  .classic-boven > .boven-rechts { padding-left: 0; margin-top: 30px; }
  .slideshow-container { display: none; }
  .cards-row, .service-row { flex-wrap: wrap; }
  .service-blok { width: 100%; margin-bottom: 65px; }
  .flexknop > a { margin-top: 0; padding-top: 0; }
	.cornerstones { padding-left: 5%; }
	.branding { margin-left: 0; }
	.branding-links { padding-inline: 0 !important; padding-right: 5% !important; }
	.service-row, .services h2 { padding-left: 0; }
}

@media screen and (max-width: 768px) { 
  .flip-card, .card-classic { width: 60%; height: 30vw; }
  .card-classic { margin-top: 20px; height: 22vw;  }
}

@media screen and (max-width: 640px) { 
  .classic-powered { flex-wrap: wrap; }
  .classic-powered > img { margin-bottom: 30px; }
  .branding-rechts { height: unset; }
  .flip-card, .flip-card-front, .flip-card-back, .card-classic { width: 100%; height: 33vw; }
  .flip-card-front > img, .flip-card-back > img { width: 80%; }
  .flip-card { margin-top: 20px; }
  .card-classic { height: 33vw; }
}

@media screen and (max-width: 575px) { 
	.video { padding-inline: 5%; }
  .branding-links { padding-inline: 5% !important; }
  .powered { padding: 0; padding-block: 40px; margin-inline: 0; margin-right: 5%; }
	.cornerstones { padding-left: 0; }
	.powered > h2, .powered-boven, .cards, .classic > h2, .classic-boven { padding-left: 5% }
	.classic-bg .cards-row { margin-left: 5%; }
	.classic { margin-inline: 0; margin-right: 5%; }
}

@media screen and (max-width: 375px) {
  .services > h2 { font-size: 24px; }
  .flexknop { margin-bottom: 20px; }
}




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