/**************************************************************************/
/******************************* GEMEENSCHAP ******************************/
/**************************************************************************/

/********** VIDEOS **********/
.video1, .video2 { display: flex; justify-content: space-between; }
.video1-links, .video2-rechts { position: relative; }
.video1-links > embed, .video2-rechts > embed { width: 100%; height: 280px; vertical-align: middle; }
.video1-rechts { padding-left: 40px; }
/* .video1-links, .video1-rechts, .video2-links, .video2-rechts { width: 48%; } */
/* .video1, .video2 { margin-block: 80px; } */
#play-gemeenschap-video_1, #play-gemeenschap-video_2  { position: absolute; width: 100%; height: 280px; border-radius: 0px 0px 40px 0px; overflow: hidden; }
#play-gemeenschap-video_1:hover, #play-gemeenschap-video_2:hover { cursor: pointer; }

/********** VOORSPOEDIG **********/
.voorspoedig { display: flex; justify-content: space-between; }
.voorspoedig-image, .voorspoedig-content { width: 48%; }
.voorspoedig-image > img { width: 100%; border-radius: 0px 0px 40px 0px; overflow: hidden; }
.voorspoedig-url { margin-top: 60px; border-top: 2px solid #027BC7; }
.voorspoedig-url > a > p { color: #027BC7; text-transform: uppercase; font-weight: bold; padding-top: 5px; }

/********** SLIDER **********/
.profiel { display: flex; justify-content: center; }
.profiel-foto { width: 25%; text-align: end; }
.profiel-foto > img { width: 60%; }
.slider-quote { padding-block: 40px; 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: #0B3279; font-size: 20px; font-weight: bold; }
.slideshow-container {
  position: relative;
  padding: 20px;
  border-radius: 0px 20px 0px 0px;
  color: #6D6E71;
  height: 380px;
}
.mySlides { display: none; width: 65%; margin-inline: auto; }
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #0B3279;
  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} }
.slide4 { display: flex; }
.slide4-image { width: 48%; }
.slide4-content { width: 50%; }
.slide4-content { margin-block: auto; }
.slide4-content > .tekst { font-size: 16px; }
.slide4-content > .gemarkeerd { font-size: 18px; }
.slide4-content > h2 { font-size: 34px; }
.slide4-image > img { width: 100%; }
.tekst > a { text-decoration: underline; }

/********** BRAND **********/
.merk-bg { background: linear-gradient(90deg, #FFFFFF 50%, #0B3279 50%); }
.merk {  background-color: #0B3279; border-radius: 60px 0px 0px 60px; padding-top: 40px; padding-bottom: 20px; }
.merk-kolommen { display: flex; justify-content: space-between; padding-left: 40px; }
.merk-image { padding-left: 40px; }
.merk-kolom-links, .merk-kolom-rechts { width: 48%; margin-top: 20px; }
.merk-kolom-links { padding-right: 20px; }
.merk-kolom-rechts { padding-left: 20px; }
.merk-kolom-links > h2, .merk-kolom-rechts > h2 { color: #41B3E0; padding-block: 10px; }
.merk-kolom-links > p, .merk-kolom-rechts > p { color: white; padding-bottom: 20px; }
.merk-kolom-links { border-right: 4px dotted #41B3E0; }
.merk-image { --video-aspect-ratio: 1.77777; aspect-ratio: 1.77777; }
.merk-image > img { width: 100%; }
/*------------------------------------------------------------------------*/

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

@media screen and (max-width: 922px) { 
  .video1 { flex-wrap: wrap; }
  .video2 { flex-wrap: wrap-reverse; } 
  .video1-links > embed, #play-gemeenschap-video_1, .video2-rechts > embed, #play-gemeenschap-video_2 { width: 100%; height: 50vw; }
  .video1-links, .video1-rechts, .video2-links, .video2-rechts { width: 100%; }
  .voorspoedig { flex-wrap: wrap; }
  .voorspoedig-image, .voorspoedig-content { width: 100%; }
  .voorspoedig-url { text-align: center; }
  .slideshow-container { display: none; }
}

@media screen and (max-width: 567px) {
	.video1-rechts { padding-left: 0; }
}


@media screen and (max-width: 530px) { 
  .pagename { font-size: 40px; }
}

@media screen and (max-width: 450px) { 
  .merk-kolommen { flex-wrap: wrap; padding-left: 0; padding-right: 0; padding-inline: 5%; }
  .merk-image { padding-left: 0; padding-right: 0; padding-inline: 5%; }
  .merk-kolom-links { border-right: none; }
  .merk-kolom-links, .merk-kolom-rechts { width: 100%; padding: 0; }
}

@media screen and (max-width: 375px) { 
  .pagename { font-size: 34px; }
}

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