:root {
  --orange: #f86913;
  --orange-hover: #c4530f;
  --dark-blue: #1f1646;
  --dark-blue-hover: #0c081c;
  --light-blue: #00afe0;
  --light-blue-hover: #0087ad;
  --dark-grey: #746e8c;
  --medium-grey: #d2d0da;
  --light-grey: #f3f3f3;
  --sectionPadding: 2em;
}

body {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: var(--dark-grey);
  --bs-gutter-x: 1.5rem;
  /* --bs-offcanvas-padding-x : 50px;  */
}

.container {
  width: calc(100% - var(--bs-gutter-x));
}

.navbar-toggler.collapsed {
  color: var(--orange);
}

.navbar-toggler {
  box-shadow: none;
  color: var(--light-blue);
  font-size: 3em;
  border: none;
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none;
}

.errorMessage h1 {
  font-size: 4.5em;
  color: var(--dark-blue)
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  :root {
    --sectionPadding: 4em;
  }

  .container {
    width: 100%);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  :root {
    --sectionPadding: 5em;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* body.school.ozhw-groen-college {
  --orange: #84bf63;
  --orange-hover: #608c48;
  --dark-blue: #1f1646;
  --light-blue: #40ae38;
  --light-blue-hover: #0087ad;
  --sectionPadding: 5em;
}

body.school.gemini-college-lekkerkerk section.ApplyOpen .ApplyOpenHolder,
body.school.ozhw-groen-college section.ApplyOpen .ApplyOpenHolder {
  background-color: var(--dark-blue);
}

body.school.t-nokkenwiel {
  --orange: #00afe0;
  --orange-hover: #0091B9;
  --light-blue: #ab4391;
  --light-blue-hover: #97397F;
}

body.school.het-palet {
  --orange: #fdc104;
  --orange-hover: #f28b18;
  --light-blue: #D62322;
  --light-blue-hover: #b41a32;
}

body.school.de-zeppelin {
  --orange: #fe660d;
  --orange-hover: #DD5608;
  --light-blue: #6e96c5;
  --light-blue-hover: #597BA2;
}

body.school.de-driehoek {
  --orange: #ef7d1d;
  --orange-hover: #D46B15;
  --light-blue: #5d92cd;
  --light-blue-hover: #597BA2;
}

body.school.de-draaimolen {
  --orange: #3e7dc0;
  --orange-hover: #3269A4;
  --light-blue: #f6822b;
  --light-blue-hover: #DF7422;
}

body.school.kjs {
  --orange: #62bded;
  --orange-hover: #0b7ed4;
  --light-blue: #ffce0a;
  --light-blue-hover: #ff8e00;
}

body.school.de-duivelhoek {
  --orange: #73cc34;
  --orange-hover: #0da642;
  --light-blue: #81bfe7;
  --light-blue-hover: #338FC4;
}

body.school.binnenstebuiten {
  --orange: #73cc34;
  --orange-hover: #0da642;
  --light-blue: #81bfe7;
  --light-blue-hover: #338FC4;
}

body.school.de-dolfijn {
  --orange: #176aa7;
  --orange-hover: #115F96;
  --light-blue: #8dc770;
  --light-blue-hover: #77A85F;
}

body.school.walburg-college {
  --orange: #a2d45e;
  --orange-hover: #779949;
  --dark-blue: #1f1646;
  --light-blue: #3dbee3;
  --light-blue-hover: #2b7c93;
}

body.school.gemini-college-ridderkerk {
  --orange: #00a4e7;
  --orange-hover: #00638b;
  --dark-blue: #1f1646;
  --light-blue: #87c600;
  --light-blue-hover: #507501;
}

body.school.gemini-college-lekkerkerk {
  --orange: #e924d5;
  --orange-hover: #b51ca6;
  --dark-blue: #1f1646;
  --light-blue: #5e0696;
  --light-blue-hover: #3e0363;
  --sectionPadding: 5em;
}

body.school.máximacollege {
  --orange: #d71016;
  --orange-hover: #890c10;
  --dark-blue: #1f1646;
  --light-blue: #8ab625;
  --light-blue-hover: #5b771c;
}

body.school.loket-zwijndrechtse-waard {
  --orange: #44b194;
  --orange-hover: #2f6f5e;
  --dark-blue: #1f1646;
  --light-blue: #ed86b5;
  --light-blue-hover: #915671;
}

body.school.dalton-lyceum-barendrecht {
  --orange: #ff7900;
  --orange-hover: #c15c00;
  --dark-blue: #1f1646;
  --light-blue: #00364c;
  --light-blue-hover: #001923;
}

body.school.willem-de-zwijger-college {
  --orange: #3eb1c8;

--orange-hover: #2d7d8d;

--dark-blue: #1f1646;

--light-blue: #500778;

--light-blue-hover: #2e0445;
}
body.school.focus-beroepsacademie {
  --orange: #ee257d;

--orange-hover: #a71a58;

--dark-blue: #1f1646;

--light-blue: #0092b7;

--light-blue-hover: #014f63;
}
body.school.loket-zwijndrechtse-waard {} */

body.school svg .orange path,
body.school svg .orange circle {
  fill: var(--orange);
}

body.school svg .dark-blue path,
body.school svg .dark-blue circle {
  fill: var(--dark-blue);
}

body.school svg .light-blue path,
body.school svg .light-blue circle {
  fill: var(--light-blue);
}

blockquote {
  margin-top: 50px;
  position: relative;
  border-radius: 1.5em;
  background-color: var(--light-grey);
  padding: 1em 2em;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}

blockquote::before {
  content: url('data:image/svg+xml;charset=UTF-8,<svg width="100%" height="100%" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.13674,0,0,1.13674,-21.3568,-32.6329)"><circle cx="36.382" cy="46.302" r="16.714" style="fill:rgb(248, 105, 19);"/></g><g transform="matrix(0.830075,0,0,-0.830075,22.9922,-19.0135)"><path d="M-13.525,-40.89C-13.365,-38.963 -12.321,-38 -10.395,-38L-8.649,-38C-7.766,-38 -7.094,-38.201 -6.632,-38.602C-6.171,-39.003 -5.94,-39.545 -5.94,-40.227C-5.94,-40.589 -6,-40.99 -6.12,-41.431L-10.214,-54.013C-10.696,-55.338 -11.539,-56 -12.743,-56C-13.385,-56 -13.856,-55.789 -14.157,-55.368C-14.458,-54.946 -14.569,-54.334 -14.488,-53.532L-13.525,-40.89ZM-0.281,-40.89C-0.08,-38.963 0.963,-38 2.849,-38L4.595,-38C5.478,-38 6.15,-38.191 6.612,-38.572C7.074,-38.953 7.304,-39.485 7.304,-40.167C7.304,-40.569 7.224,-40.99 7.064,-41.431L2.97,-54.013C2.488,-55.338 1.645,-56 0.441,-56C-0.843,-56 -1.425,-55.157 -1.304,-53.472L-0.281,-40.89Z" style="fill:white;fill-rule:nonzero;"/></g></svg>');
  display: block;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  /* Pas de grootte van de SVG aan */
  height: auto;
}

blockquote::before circle {
  fill: var(--orange);
}

/*
<svg>
<g class="stories-dot">
									<circle cx="150" cy="250" r="24" />
								</g>
								<g transform="matrix(1,0,0,-1,153.604,202.5)">
									<path d="M-14.522,-40.807C-14.417,-39.546 -13.983,-38.618 -13.3,-37.988C-12.617,-37.356 -11.657,-37 -10.395,-37L-8.649,-37C-7.473,-37 -6.591,-37.313 -5.976,-37.847C-5.298,-38.437 -4.94,-39.225 -4.94,-40.227C-4.94,-40.667 -5.009,-41.157 -5.162,-41.718L-9.268,-54.339L-9.274,-54.355C-9.928,-56.152 -11.109,-57 -12.743,-57C-13.764,-57 -14.492,-56.619 -14.971,-55.949C-15.384,-55.371 -15.592,-54.544 -15.485,-53.446L-14.522,-40.81L-14.522,-40.807ZM-1.276,-40.786C-1.145,-39.535 -0.704,-38.613 -0.026,-37.988C0.66,-37.355 1.61,-37 2.849,-37L4.595,-37C5.763,-37 6.639,-37.297 7.249,-37.801C7.937,-38.369 8.304,-39.151 8.304,-40.167C8.304,-40.671 8.209,-41.201 8.01,-41.754L3.915,-54.339L3.91,-54.355C3.256,-56.152 2.075,-57 0.441,-57C-0.369,-57 -0.989,-56.752 -1.445,-56.326C-2.048,-55.764 -2.402,-54.807 -2.301,-53.395L-1.277,-40.797L-1.276,-40.786Z" style="fill:white;" />
								</g>
</svg>
*/
.card-image-container {
  position: relative;
  display: inline-block;
  /* Zorg ervoor dat de container alleen zo groot is als de inhoud */
}

.card-background-image {
  display: block;
  /* Verwijdert eventuele whitespace rond de afbeelding */
  width: 100%;
  /* Pas aan voor gewenste grootte */
  height: 100%;
  border-radius: 2em 2em 0 0;
  object-fit: cover;
  object-position: top center;
  background: var(--light-blue);
  /*	background: #FFF;*/
}

.ervaringsverhalen .card-background-image {
  object-fit: scale-down;
  object-position: top center;
}

.card-overlay-svg {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  /* Pas de grootte van de SVG aan */
  height: auto;
  pointer-events: none;
  /* Zorg ervoor dat de SVG geen muisinteracties blokkeert */
}

.bg-light {
  --bs-light-rgb: 243, 243, 243;
  /* --bs-bg-opacity: .5; */
}

.bg-dark-blue {
  background-color: var(--dark-blue);
  color: #FFF;
}

.card.card-orange .stories-bg {
  fill: var(--orange);
}

.card .stories-img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: auto 260px;
}

.card h3 {
  font-size: 1.5em;
}

main {
  /*  padding-top: 80px;*/
}

/* BREADCRUMB */
.breadcrumb-item,
.breadcrumb-item a {
  text-decoration: none;
  font-size: 0.9em;
  color: var(--medium-grey);
}
.breadcrumb-item {
  font-weight: bold;
}
.breadcrumb-item a{
  font-weight: normal;
}
.breadcrumb-item a:HOVER{
  color: var(--light-blue);
}
.breadcrumb-item + .breadcrumb-item{
  padding-left:0.25em;
}
.breadcrumb-item +.breadcrumb-item::before{
  padding-right:0.25em;
  color: var(--medium-grey);
}

.btn {
  border-radius: 0.75em;
  font-weight: 600;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.5rem;
  margin-bottom: calc(var(--bs-gutter-x) / 2);
}

.btn-group .btn,
.input-group .btn {
  margin-bottom: 0;
}

.btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--orange);
  --bs-btn-border-color: var(--orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--orange-hover);
  --bs-btn-hover-border-color: var(--orange-hover);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--orange-hover);
  --bs-btn-active-border-color: var(--orange-hover);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--orange);
  --bs-btn-disabled-border-color: var(--orange);
}

.btn.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--light-blue);
  --bs-btn-border-color: var(--light-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--light-blue-hover);
  --bs-btn-hover-border-color: var(--light-blue-hover);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--light-blue)99;
  --bs-btn-active-border-color: var(--light-blue-hover);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--light-blue);
  --bs-btn-disabled-border-color: var(--light-blue);
}

.btn-dark-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dark-blue);
  --bs-btn-border-color: var(--dark-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dark-blue-hover);
  --bs-btn-hover-border-color: var(--dark-blue-hover);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--dark-blue)99;
  --bs-btn-active-border-color: var(--dark-blue-hover);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--dark-blue);
  --bs-btn-disabled-border-color: var(--dark-blue);
}

.card {
  --bs-border-radius: 40px;
  --bs-card-spacer-y: 2em;
  --bs-card-spacer-x: 2em;
}

.card.card-horizontal {
  border-radius: 2em;
  border: none;
  color: #FFF;
}

.card.card-horizontal svg {
  height: 100%;
  /* Past zich aan aan de hoogte van de parent */
  width: auto;
  /* Houdt de aspect ratio intact */
  display: block;
  /* Verwijdert ongewenste inline ruimte */
}

.card.card-horizontal svg path {
  fill: var(--dark-blue);
}

.card.card-horizontal.card-light-grey svg path {
  fill: var(--light-grey);
}

.card.card-horizontal.card-light-blue {
  background: var(--light-blue);
  border: none;
}

.card.card-horizontal.card-light-blue .halfRound {
  fill: var(--light-blue);
}

.card.card-horizontal.card-dark-blue .halfRound {
  fill: var(--dark-blue);
}

.card.card-horizontal.card-orange .halfRound {
  fill: var(--orange);
}

.card.card-horizontal.card-light-blue .btn {
  background-color: var(--orange);
  border-color: var(--orange);
  color: #FFFFFF;
}

.card.card-horizontal.card-dark-blue {
  background: var(--dark-blue);
  border: none;
}

.card.card-horizontal.card-dark-blue .stories-bottom {
  fill: var(--dark-blue);
}

.card.card-horizontal.card-dark-blue .btn {
  /* background-color: var(--light-blue);
  border-color: var(--light-blue);
  color: #FFFFFF; */
}

.card.card-horizontal.card-orange {
  background: var(--orange);
}

.card.card-horizontal.card-light-grey {
  background: var(--light-grey);
}

.card.card-horizontal.card-light-grey .text-holder {
  color: var(--dark-blue)
}

.card.card-horizontal .text-holder h4 {
  font-weight: 700;
}

.card.card-horizontal.card-orange .btn {
  /* background-color: var(--dark-blue);
  border-color: var(--dark-blue);
  color: #FFFFFF; */
}

.card.card-horizontal .text-holder {
  padding: 2em 0 2em 2em;
}

.card.card-horizontal .text-holder p {
  font-size: 0.9em;
}

.card.card-horizontal .text-holder p:last-of-type {
  margin-bottom: 0;
}

.card.card-horizontal .bg-holder {
  display: flex;
  align-items: stretch;
  /* Zorgt ervoor dat kinderen de volledige hoogte nemen */
  height: auto;
  /* Parent past zich aan aan de inhoud */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
  border-radius: 0 2em 2em 0;
  padding: 0;
}

/* header */
.mainLogo {
  height: 80px;
  width: auto;
}

#navbarNav {
  --bs-navbar-nav-link-padding-x: 1em;
}

#offcanvasMenu {
  max-width: 75vw
}

.offcanvas-header,
.offcanvas-body,
.offcanvas-footer {
  padding-left: var(--bs-gutter-x);
  padding-right: var(--bs-gutter-x);
}

.offcanvas-footer {
  padding-bottom: var(--bs-gutter-x);
}

.offcanvas-footer a {
  color: var(--dark-grey);
  text-decoration: none;
}

.offcanvas-footer a:HOVER {
  color: var(--light-blue);
}

.nav-item .nav-link {
  font-weight: 700;
  margin-left: 1em;
}

.offcanvas-body .nav-item .nav-link {
  font-weight: 700;
  margin-left: 0;
}

.nav-item .nav-link.active {
  color: var(--light-blue);
}

header .nav-item:last-of-type .nav-link {
  background: var(--orange);
  border-radius: .5em;
  border: solid 2px var(--orange);
  padding: 0.4em 1em 0.4em 1em;
  color: #FFF;
}

header .nav-item:last-of-type .nav-link.active {
  background: #FFF;
  color: var(--orange);
  /*	color: var(--light-blue);*/
}

header+section:first-of-type {
  margin-top: 80px;
}

.half-container {
  /* background-color: #00000011; */
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}

/* glider overrules */
.glider-contain {
  width: calc(100% + var(--bs-gutter-x)/2) !important;
}

.glider-track {
  margin-left: calc(var(--bs-gutter-x) / -2) !important;
  margin-right: calc(var(--bs-gutter-x) / -2) !important;
}

.glider-slide {
  margin-left: calc(var(--bs-gutter-x) / 2);
  margin-right: calc(var(--bs-gutter-x) / 2);
}

/* hero */
.hero {
  min-height: 400px;
  position: relative;
}

.hero h1 {
  font-weight: 700;
  font-size: 3.5em;
  line-height: 4rem;
  margin-top: 0.5em;
  color: var(--dark-blue);
}

.hero p {
  margin: 2rem 0;
}

.hero .HeroHeaderBG {
  width: 100%;
  height: auto;
  z-index: -1;
  max-height: 650px;
}

/* .hero .HeroHeaderBG {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(50% + 100px);
	height: auto;
	z-index: -1;
} */
.heroImgHolder {
  padding: 50px 0 50px 50px;
}

#heroBallsImg {
  width: 100%;
  height: 100%;
  padding: 0 0 50px 60px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  .hero h1 {
    font-size: 4em;
    line-height: 4rem;
  }

  .hero .HeroHeaderBG {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50%);
    height: auto;
    z-index: -1;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .hero h1 {
    font-size: 6.5em;
    line-height: 7rem;
  }

  .heroTextHolder {
    min-height: calc(30vw);
    max-height: 660px;
  }

  body.school .hero h1 {
    font-size: 5em;
    line-height: 5rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

.svgBallOrange {
  fill: var(--orange);
}

.svgBallLightBlue {
  fill: var(--light-blue);
}

.svgBallDarkBlue {
  fill: var(--dark-blue);
}

ul.iconList {
  padding: 0;
  list-style: none;
}

.iconList li {
  display: inline-block;
}

.iconCircle i.bi {
  display: inline-block;
  text-align: center;
  width: 32px;
  line-height: 32px;
  border-radius: 50%;
}

.iconCircle i.bi-linkedin {
  color: #FFF;
  background-color: #1f1646;
}

.iconCircle i.bi-instagram {
  color: #FFF;
  background-color: #f86913;
}

.iconCircle i.bi-facebook {
  color: #FFF;
  background-color: #00afe0;
}

.iconCircle i.bi-youtube {
  color: #FFF;
  background-color: #1f1646;
}

section.callToActionStandaard {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  .ctaHolder h2 {
    font-size: 2.5em;
    font-weight: 600;
    margin-bottom: .5em;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  .ctaHolder h2 {
    font-size: 4em;
    font-weight: 600;
    margin-bottom: .75em;
  }

  .ctaHolder .ctaText {
    padding-bottom: 3em;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

.ctaHolder {
  --bs-border-radius: 40px;
  color: #FFFFFF;
  border-radius: var(--bs-border-radius);
  background-color: var(--light-blue);
}

.ctaHolder .ctaText {
  padding: 3em;
  padding-bottom: 0;
}

.ctaHolder .ctaText .btn {
  margin-bottom: .75em;
  width: 100%;
}

.ctaHolder .ctaImage {
  border-radius: 0 2em 2em 0;
  background-position: left center, 2px center;
  background-size: auto 105%, auto 100%;
  background-repeat: no-repeat, no-repeat;
}

.ctaHolder .ctaImageHorizontal {
  border-radius: 0 0 2em 2em;
  height: 60vw;
  background-position: center top, center 2px;
  background-size: 100%, cover;
  background-repeat: no-repeat, no-repeat;
}

.ctaHolder svg path {
  fill: #00afe0
}

section.sectionContactForm {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  .contactFormHolder {
    background-color: var(--light-blue);
    width: 100%;
    min-height: 300px;
    border-radius: 2em;
    padding: 3em;
    margin-bottom: 2em;
  }

  .form-control.form-noshow{
    width:1px;
    display: inline-block;
    padding: 0;
    margin:0;
    border:none;
    opacity: 0;
  }

  h2 {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 3.5em
  }

  .form-label {
    color: #FFFFFF;
    font-weight: 700;
  }

  .form-label sup {
    color: #F00;
  }

  .form-control {
    color: #FFF;
    font-size: 0.9em;
    background-color: #FFFFFF66;
    border: none;
  }

  ::placeholder {
    color: #FFFFFF;
    opacity: 1;
    /* Firefox */
  }

  ::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: #FFFFFF;
  }
}

/* Selecteer een <li> dat een <a> met mailto: bevat */
ul:has(li.emailIcon),
ul:has(li.adressIcon),
ul:has(li.waIcon),
ul:has(li.phoneIcon) {
  position: relative;
  padding-left: 2.5rem;
}

ul:has(li.emailIcon) li::before,
ul:has(li.adressIcon) li::before,
ul:has(li.adressIcon) li::before,
ul:has(li.waIcon) li::before {
  display: block;
  position: absolute;
  left: 0;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  margin-top: -0.25rem;
  line-height: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  text-align: center;
  vertical-align: -.125em;
  color: #FFF;
}

li.emailIcon {
  list-style: none;
  margin-bottom: 1rem;
}

li.emailIcon a {
  text-decoration: none;
  color: var(--dark-grey);
}

li.emailIcon a:HOVER {
  color: var(--light-blue);
}

li.emailIcon::before {
  content: "\F32F";
  background-color: var(--orange);
}

li.phoneIcon {
  list-style: none;
  margin-bottom: 1rem;
}

li.phoneIcon a {
  text-decoration: none;
  color: var(--dark-grey);
}

li.phoneIcon a:HOVER {
  color: var(--light-blue);
}

li.phoneIcon::before {
  content: "\F5B4";
  background-color: var(--dark-blue);
}

li.addressIcon {
  list-style: none;
  margin-bottom: 1rem;
}

li.addressIcon::before {
  content: "\F3E7";
  background-color: var(--light-blue);
}

ul.noBg {
  padding-left: 2rem !important;
}

ul.noBg li {
  margin-bottom: 0.5em;
}

ul.noBg li::before {
  display: block;
  position: absolute;
  content: " ";
  margin-top: -0.25rem;
  left: 0;
  width: 2rem;
  height: 2rem;
  background-color: transparent;
  color: var(--dark-grey) !important;
  background-color: transparent !important;
}

ul.noBg li.addressIcon::before {
  content: "\F3E7";
}

ul.noBg li.phoneIcon::before {
  content: "\F5B4";
}

ul.noBg li.emailIcon::before {
  content: "\F32F";
}

ul.noBg li.waIcon::before {
  content: "\F618";
}

/* applyProcess */
section.applyProcess {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);
}

section.applyProcess .stripe {
  flex: 1 0 0%;
  background-color: #F00;
  max-width: 50px;
  height: 100%;
}

section.applyProcess .step1,
section.applyProcess .step2,
section.applyProcess .step3,
section.applyProcess .step4,
section.applyProcess .step5 {
  background-color: #eeeeee;
  border-radius: 2em;
  padding: 2em;
  height: 100%;
  color: #FFF;
}

section.applyProcess .applyProcessHeader h2 {
  font-weight: 700;
  color: var(--dark-blue);
  font-size: 2.5em;
  margin-bottom: 1em;
}

section.applyProcess .applyProcessHeader h4 {
  font-weight: 700;
  color: var(--orange);
}

section.applyProcess h5 {
  font-size: 0.9em;
}

section.applyProcess h3 {
  font-size: 1.5em;
}

section.applyProcess p {
  font-size: 1em;
}

section.applyProcess .step4,
section.applyProcess .step1 {
  background-color: var(--dark-blue);

  h5 {
    color: var(--light-blue);
  }
}

section.applyProcess .step2,
section.applyProcess .step5 {
  background-color: var(--orange);

  h5 {
    color: var(--dark-blue);
  }
}

section.applyProcess .step3 {
  background-color: var(--light-blue);

  h5 {
    color: var(--orange);
  }
}

/* ApplyOpenHolder */


#file-chosen, #file-chosen-motivatie {
  color: #FFFFFF66;
  font-size: 90%;
}


/*sectionFAQ*/
section.sectionFAQ {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  h2.sectionTitle {
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
    margin-bottom: 1em;
  }

  .accordion-item {
    margin-top: 1em;
    border-radius: 1em !important;
    background-color: #F3F3F3;
    border: none;
  }

  .accordion-button:not(.collapsed) {
    box-shadow: none;
  }

  .accordion-item h2 button {
    font-weight: bold;
    background-color: #F3F3F3;
    border-radius: 1em !important;
  }

  .accordion-body {
    border: none;
    border-radius: 0 0 1em 1em !important;
  }
}

/* Tamplate generalPage */
body.generalPage {
  .hero h1 {
    font-size: 4em;
    line-height: 5rem;
  }

  section.hero.generiek {
    min-height: calc(50vw * 0.70);
  }

  section.hero.generiek.lang {
    min-height: 440px;
  }

  .HeroHeaderSmallBG {
    width: 100%;
    height: auto;
  }
}

/* Template vacaturepagina */
body.vacature {
  .VacatureHeader {
    position: relative;
    
  }


form:invalid label[for="fileInput"]+input[type="file"]:invalid {
      color: red; /* Of een andere gewenste stijl */
  }

  .VacatureHeader svg.VacatureHeaderBG {
    position: absolute;
    top: 0;
    right: 0;
    width: 650px;
    height: auto;
    z-index: -1;
  }

  .VacatureHeader h1 {
    font-weight: 700;
    font-size: 2.5em;
    color: var(--dark-blue)
  }

  .VacatureHeader h4 {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--light-blue);
  }

  .VacatureHeaderProperty {
    color: var(--dark-grey);
    font-size: 80%;
    display: block;
  }

  .VacatureContent h3 {
    font-weight: 700;
    color: var(--dark-blue);
  }

  .VacatureContent h4{
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--dark-blue);
  }
  .VacatureContent p{
    margin-bottom: 2rem;
  }
  .VacatureContent  p:has(+ ul) {
      margin-bottom: .5em;
      /* font-weight: 700; */
  }


  .VacatureContent .ankeilerVacature {
    color: #FFF !important;
  }
  .VacatureContent .ankeilerVacature h3,
  .VacatureContent .ankeilerVacature h4 {
    color: #FFF !important;
  }

  ul li::marker {
    color: var(--orange); /* Verander de kleur van de stippen */
    /* font-size: 1.2em;
    content: "✔ ";  */
}

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  body.vacature .VacatureHeader h1 {
    font-size: 4em;
  }

  body.vacature .VacatureHeader h4 {
    font-size: 1.5em;
  }

  body.vacature .VacatureHeaderProperty {
    display: inline-block;
    font-size: 90%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body.vacature .VacatureHeader {
    min-height: 450px;
  }
  body.vacature .VacatureHeader h1 {
    font-size: 5em;
  }


  body.vacature .VacatureHeaderProperty {
    font-size: 100%;
  }

  body.generalPage {
    .HeroHeaderSmallBG {
      position: absolute;
      top: 0;
      right: 0;
      width: calc(50%);
      height: auto;
      z-index: -1;
    }
  }
}

/* Template ervaringsverhalen */
body.ervaringsverhalen {
  section.quoteSection .row.contentRow {
    --bs-gutter-x: 5rem;
  }

  .card-overlay-svg path {
    fill: var(--light-grey)
  }

  .card-orange .card-background-image {
    background-color: var(--orange);
  }

  .card-orange .card-body {
    background-color: var(--light-grey);
  }

  .card .card-body {
    padding: 2.5rem;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  }

  .card.bg-dark-blue h3,
  .card.bg-dark-blue p {
    color: #FFF;
  }

  blockquote p {
    margin-bottom: 0;
    color: var(--dark-blue);
  }

  p {
    margin-bottom: 2em;
  }

  h1 {
    font-weight: 700;
    font-size: 2.5em;
    color: var(--dark-blue);
  }

  h4 {
    font-weight: 700;
    font-size: 1.5em;
    color: var(--light-blue);
  }

  h3 {
    font-weight: 700;
    font-size: 1.5em;
    color: var(--dark-blue);
  }

  .StoriesHeader {
    position: relative;
  }

  .StoriesHeader svg.StoriesHeaderBG {
    position: absolute;
    top: 0;
    right: 0;
    width: 90%;
    height: auto;
    z-index: -1;
    display: none;
    /* opacity: 0.25; */
  }

  .card-sollicitatie .btn {
    margin-bottom: 0;
  }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  body.ervaringsverhalen {
    .StoriesHeader svg.StoriesHeaderBG {
      width: 60%;
      /* opacity: 1; */
      display: block;
    }
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body.ervaringsverhalen {
    h1 {
      font-weight: 700;
      font-size: 4em;
      color: var(--dark-blue);
    }

    .StoriesHeader {
      min-height: 450px;
    }

    .StoriesHeader svg.StoriesHeaderBG {
      width: 44%;
      opacity: 1;
    }
  }
}

/*sectionScholen*/
section.sectionScholen {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  .card {
    border-radius: var(--bs-border-radius);
    border: none;
    color: #FFF;
  }

  .schoologoHolder {
    background: #FFF;
    position: absolute;
    right: 0;
    top: 1.5em;
    width: auto;
    height: auto;
    padding-right: .75em;
    padding-left: .75em;
    border-radius: .75em 0 0 .75em;
  }

  .card svg {
    height: 100%;
    /* Past zich aan aan de hoogte van de parent */
    width: auto;
    /* Houdt de aspect ratio intact */
    display: block;
    /* Verwijdert ongewenste inline ruimte */
  }

  .card.card-light-blue {
    background: var(--light-blue);
    border: none;
  }

  .card.card-light-blue .halfRound {
    fill: var(--light-blue);
  }

  .card.card-dark-blue .halfRound {
    fill: var(--dark-blue);
  }

  .card.card-orange .halfRound {
    fill: var(--orange);
  }

  .card.card-light-blue .btn {
    background-color: var(--orange);
    border-color: var(--orange);
    color: #FFFFFF;
  }

  .card.card-dark-blue {
    background: var(--dark-blue);
    border: none;
  }

  .card.card-dark-blue .stories-bottom {
    fill: var(--dark-blue);
  }

  .card.card-dark-blue .btn {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
    color: #FFFFFF;
  }

  .card.card-orange {
    background: var(--orange);
  }

  .card.card-orange .btn {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    color: #FFFFFF;
  }

  .bg-holder-horizontal {
    position: relative;
    background-position: bottom center;
    background-size: cover;
    width: 100%;
    height: 60vw;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius)
  }

  .bg-holder-horizontal svg {
    max-width: 100% !important;
    height: auto !important;
    position: absolute;
    top: 0
  }

  .text-holder {
    padding: 2em 0 2em 2em;
  }

  .text-holder p {
    font-size: 0.9em;
  }

  .bg-holder {
    display: flex;
    align-items: stretch;
    /* Zorgt ervoor dat kinderen de volledige hoogte nemen */
    height: auto;
    /* Parent past zich aan aan de inhoud */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 0 2em 2em 0;
    padding: 0;
  }

  .bgBottomImageHorizontal {
    border-radius: 0 0 2em 2em;
    height: 60vw;
    background-position: center top, center 2px;
    background-size: 100%, cover;
    background-repeat: no-repeat, no-repeat;
  }

  h2 {
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
  }

  h4 {
    font-weight: 700;
    font-size: 1.5em;
    /*		color: var(--orange);*/
  }
}

svg .logoImageSvg{
width:300px;
}

/*sectionStories*/
section.sectionStories {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  .stories-text p {
    /*		padding-right: 3em;*/
  }

  .card {
    text-align: center;
    border-radius: 2em;
    background-color: #F3F3F3;
    border: none;
  }

  .card.card-light-blue path {
    fill: var(--light-grey);
  }

  .card-img-top {
    border-radius: 2em 2em 0 0;
    border: none;
  }

  .card-body {
    padding-bottom: 0;
  }

  .card-footer:last-child {
    border: none;
    background-color: #F3F3F3;
    border-radius: 0 0 2em 2em;
  }

  .card-body h5 {
    color: var(--orange);
    font-size: 1em;
    font-weight: 700
  }

  .card-body p:first-of-type {
    font-weight: 700;
  }

  .card-body p:last-of-type {
    font-size: 0.9em;
  }

  .card.card-orange .stories-bg {
    fill: var(--orange);
  }

  .card.card-orange .stories-dot circle {
    fill: var(--dark-blue);
  }

  .card.card-light-blue .stories-bg {
    fill: var(--light-blue);
  }

  .card.card-light-blue .stories-dot circle {
    fill: var(--orange);
  }

  .card.card-dark-blue .stories-bg {
    fill: var(--dark-blue);
  }

  .card.card-dark-blue .stories-dot circle {
    fill: var(--light-blue);
  }

  .stories-img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 260px;
  }

  h2 {
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
  }
}

/*sectionSlidingCards*/
section.sectionSlidingCards {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  .card {
    margin-left: 12px;
    margin-right: 12px;
    text-align: center;
    border-radius: 2em;
    border: none;
  }

  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .glider-contain {
      margin-left: -12px;
      margin-right: -12px;
      width: calc(100% + 24px);
    }
  }

  /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
  @media (min-width: 768px) {}

  .card.card-light-blue {
    background: var(--light-blue);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, var(--light-blue) 20%, var(--light-blue) 100%);
    border: none;
  }

  .card.card-light-blue .stories-bottom {
    fill: var(--light-blue);
  }

  .card.card-light-blue .btn {
    background-color: var(--orange);
    color: #FFFFFF;
  }

  .card.card-dark-blue {
    background: var(--dark-blue);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, var(--dark-blue) 20%, var(--dark-blue) 100%);
    border: none;
  }

  .card.card-dark-blue .stories-bottom {
    fill: var(--dark-blue);
  }

  .card.card-dark-blue .btn {
    background-color: var(--light-blue);
    color: #FFFFFF;
  }

  .card.card-orange {
    background: var(--orange);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, var(--orange) 20%, var(--orange) 100%);
  }

  .card.card-orange .btn {
    background-color: var(--dark-blue);
    color: #FFFFFF;
  }

  .card.card-orange .btn {
    background-color: var(--dark-blue);
    color: #FFFFFF;
  }

  .card.card-orange .stories-bottom {
    fill: var(--orange);
  }

  .card-img-top {
    border-radius: 2em 2em 0 0;
    border: none;
  }

  .card-footer:last-child {
    color: #FFFFFF;
    border: none;
    background: none;
    border-radius: 0 0 2em 2em;
  }

  .card-body {
    color: #FFFFFF;
  }

  .card-body h4 {
    font-size: 1.2em;
    color: #FFFFFF;
  }

  h2 {
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
    margin-bottom: 1rem;
  }

  h4 {
    font-weight: 700;
    font-size: 1.5em;
    color: var(--orange);
  }

  .slidingcards-top p,
  .slidingcards-bottom p {
    padding-left: 7vw;
    padding-right: 7vw;
  }

  .stories-img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
  }

  .glider-next,
  .glider-prev {
    top: calc(50% - 20px);
    background: #F3F3F3;
    color: var(--dark-blue);
    font-size: 24px;
    border-radius: .25em;
    width: 40px;
    height: 40px;
    line-height: 20px;
  }

  .glider-next {
    right: -7px;
  }

  .glider-prev {
    left: -7px;
  }
}

/*sectionSlidingInfo*/
section.sectionSlidingInfo {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  .card {
    margin-left: calc(var(--bs-gutter-x) / 2);
    margin-right: calc(var(--bs-gutter-x) / 2);
    border-radius: 2em;
    border: none;
    color: #FFFFFF;
  }

  .card svg {
    height: 100%;
    max-height: 250px;
  }

  .card.card-light-blue {
    background: var(--light-blue);
    background: linear-gradient(90deg, var(--light-blue) 0%, var(--light-blue) 70%, #FFFFFF 70%, #FFFFFF 100%);
    border: none;
  }

  .card.card-light-blue path {
    fill: var(--light-blue);
  }

  .card.card-light-blue .stories-bottom {
    fill: var(--light-blue);
  }

  .card.card-light-blue .btn {
    background-color: var(--orange);
    color: #FFFFFF;
  }

  .card.card-dark-blue {
    background: var(--dark-blue);
    background: linear-gradient(90deg, var(--dark-blue) 0%, var(--dark-blue) 70%, #FFFFFF 70%, #FFFFFF 100%);
    border: none;
  }

  .card.card-dark-blue path {
    fill: var(--dark-blue);
  }

  .card.card-dark-blue .btn {
    background-color: var(--light-blue);
    color: #FFFFFF;
  }

  .card.card-orange {
    background: var(--orange);
    background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 70%, #FFFFFF 70%, #FFFFFF 100%);
  }

  .card.card-orange path {
    fill: var(--orange);
  }

  .card.card-orange .btn {
    background-color: var(--dark-blue);
    color: #FFFFFF;
  }

  .card.card-orange .btn {
    background-color: var(--dark-blue);
    color: #FFFFFF;
    border-color: var(--dark-blue);
  }

  .card.card-orange .stories-bottom {
    fill: var(--orange);
  }

  .bg-holder {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    border-radius: 0 2em 2em 0;
    padding: 0;
  }

  .text-holder {
    padding: 2em;
    font-size: 90%;
  }

  .card h4 {
    font-size: 1.2em;
    color: #FFFFFF;
  }

  h2 {
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
  }

  h4 {
    font-weight: 700;
    font-size: 1.5em;
    color: var(--orange);
  }

  .slidinginfo-top,
  .slidinginfo-bottom {
    padding-bottom: 3em;
  }

  .glider-next,
  .glider-prev {
    top: calc(50% - 20px);
    background: #F3F3F3;
    color: var(--dark-blue);
    font-size: 24px;
    border-radius: .25em;
    width: 40px;
    height: 40px;
    line-height: 20px;
  }

  .glider-next {
    right: -var(--bs-gutter-x);
  }

  .glider-prev {
    left: -var(--bs-gutter-x);
  }
}

section.sectionSlidingInfoText {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  .card {
    /* margin-left: 1.5em;
		margin-right: 1.5em; */
    border-radius: 2em;
    border: none;
    color: #FFFFFF;
  }

  .card svg {
    /* height: 100%;
		max-height: 300px; */
  }

  .card.card-light-blue {
    background: var(--light-blue);
    background: linear-gradient(90deg, var(--light-blue) 0%, var(--light-blue) 70%, #FFFFFF 70%, #FFFFFF 100%);
    border: none;
  }

  .card.card-light-blue path {
    fill: var(--light-blue);
  }

  .card.card-light-blue .stories-bottom {
    fill: var(--light-blue);
  }

  .card.card-light-blue .btn {
    background-color: var(--orange);
    color: #FFFFFF;
  }

  .card.card-dark-blue {
    background: var(--dark-blue);
    background: linear-gradient(90deg, var(--dark-blue) 0%, var(--dark-blue) 70%, #FFFFFF 70%, #FFFFFF 100%);
    border: none;
  }

  .card.card-dark-blue path {
    fill: var(--dark-blue);
  }

  .card.card-dark-blue .btn {
    background-color: var(--light-blue);
    color: #FFFFFF;
  }

  .card.card-orange {
    background: var(--orange);
    background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 70%, #FFFFFF 70%, #FFFFFF 100%);
  }

  .card.card-orange path {
    fill: var(--orange);
  }

  .card.card-orange .btn {
    background-color: var(--dark-blue);
    color: #FFFFFF;
  }

  .card.card-orange .btn {
    background-color: var(--dark-blue);
    color: #FFFFFF;
  }

  .card.card-orange .stories-bottom {
    fill: var(--orange);
  }

  .bg-holder {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    border-radius: 0 2em 2em 0;
    padding: 0;
  }

  .text-holder {
    padding: 2em;
  }

  .text-holder-text {
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .card h4 {
    font-size: 1.2em;
    color: #FFFFFF;
  }

  h2 {
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
  }

  h4 {
    font-weight: 700;
    font-size: 1.5em;
    color: var(--orange);
  }

  .slidinginfo-top,
  .slidinginfo-bottom {
    padding-bottom: 3em;
  }

  .glider-next,
  .glider-prev {
    top: calc(50% - 20px);
    background: #F3F3F3;
    color: var(--dark-blue);
    font-size: 24px;
    border-radius: .25em;
    width: 40px;
    height: 40px;
    line-height: 20px;
  }

  .glider-next {
    right: -10px;
  }

  .glider-prev {
    left: -var(--bs-gutter-x);
  }
}

section.sectionGridCards {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  .card-image-container {
    position: relative;
    display: inline-block;
    /* Zorg ervoor dat de container alleen zo groot is als de inhoud */
  }

  .card-background-image {
    display: block;
    /* Verwijdert eventuele whitespace rond de afbeelding */
    width: 100%;
    /* Pas aan voor gewenste grootte */
    height: 100%;
    border-radius: 2em 2em 0 0;
    object-fit: cover;
    object-position: top center;
    background: var(--light-blue);
    /*	background: #FFF;*/
  }

  .card-overlay-svg {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    /* Pas de grootte van de SVG aan */
    height: auto;
    pointer-events: none;
    /* Zorg ervoor dat de SVG geen muisinteracties blokkeert */
  }

  .card.card-orange .card-background-image {
    background: var(--dark-blue);
  }

  .card.card-light-blue .card-background-image {
    background: var(--orange);
  }

  .card.card-dark-blue .card-background-image {
    background: var(--light-blue);
  }

  .card {
    text-align: center;
    border-radius: 2em;
    border: none;
    width: 100%;
  }

  .card.card-light-blue {
    background: var(--light-blue);
    /*		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, var(--light-blue) 20%, var(--light-blue) 100%);*/
    border: none;
  }

  .card.card-light-blue .stories-bottom {
    fill: var(--light-blue);
  }

  .card.card-light-blue .btn {
    background-color: var(--orange);
    border-color: var(--orange);
    color: #FFFFFF;
  }

  .card.card-dark-blue {
    background: var(--dark-blue);
    /*		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, var(--dark-blue) 20%, var(--dark-blue) 100%);*/
    border: none;
  }

  .card.card-dark-blue .stories-bottom {
    fill: var(--dark-blue);
  }

  .card.card-dark-blue .btn {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
    color: #FFFFFF;
  }

  .card.card-orange {
    background: var(--orange);
    /*		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, var(--orange) 20%, var(--orange) 100%);*/
  }

  .card.card-orange .btn {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    color: #FFFFFF;
  }

  .card.card-orange .stories-bottom {
    fill: var(--orange);
  }

  .card-img-top {
    border-radius: 2em 2em 0 0;
    border: none;
  }

  .card-footer:last-child {
    color: #FFFFFF;
    border: none;
    background: none;
    border-radius: 0 0 2em 2em;
  }

  .card-body {
    color: #FFFFFF;
  }

  .card-body h4 {
    font-size: 1.2em;
    color: #FFFFFF;
  }

  h2 {
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
  }

  h4 {
    font-weight: 700;
    font-size: 1.5em;
    color: var(--orange);
  }

  .gridcards-top {
    margin-bottom: 3em;
  }

  .gridcards-top p {
    padding-left: 8vw;
    padding-right: 8vw;
  }

  .sectionGridCardsMore {
    padding-top: 1em;
  }

  .stories-img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
  }
}

/*sectionRoundImageText*/
section.sectionRoundImageText+section.sectionRoundImageText {
  padding-top: 0;
}
section.sectionRoundImageText {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  .mirrored svg {
    transform: scaleX(-1);
  }

  .bg-holder {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 0 2em 2em 0;
    padding: 0;
  }

  h2 {
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
  }

  h4 {
    font-weight: 700;
    font-size: 1.5em;
    color: var(--orange);
  }

  svg .orange circle,
  svg .orange path {
    fill: var(--orange) !important;
  }

  svg .light-blue circle,
  svg .light-blue path {
    fill: var(--light-blue) !important;
  }

  svg .dark-blue circle,
  svg .dark-blue path {
    fill: var(--dark-blue) !important;
  }
}

/*sectionImageText*/
section.sectionImageText {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  h2 {
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
  }

  h4 {
    font-weight: 700;
    font-size: 1.5em;
    color: var(--orange);
  }
}

.btn.btn-form {
  color: #FFF;
  font-size: 0.9em;
  background-color: #FFFFFF66;
  border-radius: var(--bs-border-radius);
  padding:  0.375rem 1rem;
  border: none;
}

section.ApplyOpen .ApplyOpenHolder {
  background-color: var(--light-blue);
  width: 100%;
  min-height: 300px;
  border-radius: 2em;
  padding: 3em;
}

section.ApplyOpen {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  h2 {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 3.5em
  }

  .form-label {
    color: #FFFFFF;
    font-weight: 700;
  }

  .form-label sup {
    color: #F00;
  }

  .form-control {
    color: #FFF;
    font-size: 0.9em;
    font-weight: 700;
    background-color: #FFFFFF66;
    border: none;
  }

  ::placeholder {
    color: #FFFFFF99;
    opacity: 1;
    font-weight: 400;
    /* Firefox */
  }

  ::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: #FFFFFF99;
    font-weight: 400;
  }
}

section.VacatureContent {
  .card.card-dark-blue {
    --bs-card-bg: var(--dark-blue);
    color: #FFF;
  }

  .card.card-orange {
    border: none;
  }

  .card.card-orange .stories-bg {
    fill: var(--orange);
  }

  .card.card-orange .card-body {
    background: #F3F3F3;
    border-radius: 0 0 2em 2em;
    color: var(--dark-blue);
  }

  .stories-img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 260px;
  }
}

section.SectionVacaturesAsync {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);

  h2 {
    text-align: center;
    font-weight: 700;
    font-size: 3.5em;
    color: var(--dark-blue);
    margin-bottom: 3rem;
  }

  .form-control,
  .form-select {
    border: none;
    background-color: var(--light-grey)
  }

  .vacatureGrid h6 {
    font-size: 1em;
    color: var(--orange);
    font-weight: 700;
  }

  .vacatureGrid h4 {
    font-size: 1.2em;
    color: var(--dark-blue);
    font-weight: 700;
  }

  .vacatureGrid .vacatureHolder:nth-child(3n+1) .btn.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dark-blue);
    --bs-btn-border-color: var(--dark-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dark-blue-hover);
    --bs-btn-hover-border-color: var(--dark-blue-hover);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dark-blue)99;
    --bs-btn-active-border-color: var(--dark-blue-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dark-blue);
    --bs-btn-disabled-border-color: var(--dark-blue);
  }

  .vacatureGrid .vacatureHolder:nth-child(3n+2) .btn.btn-primary {}

  .vacatureGrid .vacatureHolder:nth-child(3n) .btn.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--light-blue);
    --bs-btn-border-color: var(--light-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--light-blue-hover);
    --bs-btn-hover-border-color: var(--light-blue-hover);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--light-blue)99;
    --bs-btn-active-border-color: var(--light-blue-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--light-blue);
    --bs-btn-disabled-border-color: var(--light-blue);
  }

  .vacatureGrid .card-footer {
    background: none;
    border: none;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  }

  .vacatureEigenschappen {
    color: #666;
    font-size: 0.9em;
  }
}

footer {
  background-image: linear-gradient(180deg, #FFFFFF 70px, #F3F3F3 70px, #F3F3F3 100%);
  /* background:#F00; */
  background-size: auto;
  background-repeat: no-repeat;
  color: var(--dark-grey);
  width: 100%;
  padding-top: 120px;

  /* .footerOpener{
	height:120px;
} */
  h3 {
    font-weight: bold;
    color: var(--dark-blue);
  }

  .nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.15rem;
  }

  .nav-item .nav-link {
    margin-left: 0;
    color: var(--dark-grey);
    font-weight: 400;
  }

  .footerImageHolder {
    position: relative;
  }

  .footerImage {
    position: absolute;
    right: 0;
    /* top: 120px; */
    width: 150px;
    height: auto;
    /*	z-index: ;  Zorg ervoor dat de SVG als achtergrond dient */
  }

  svg .orange circle {
    fill: var(--orange) !important
  }

  svg .light-blue circle {
    fill: var(--light-blue) !important
  }

  svg .dark-blue circle {
    fill: var(--dark-blue) !important
  }

  .footerCloser {
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .footerCloser a {
    color: var(--dark-grey);
    text-decoration: none;
  }

  .footerCloser a:HOVER {
    text-decoration: underline;
  }
}

footer .footerContent {
  width: 100%;
  min-height: 265px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  .half-container {
    max-width: 720x;
  }

  section.applyProcess .applyProcessHeader h2 {
    font-size: 4em;
    margin-bottom: 1.5em;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  footer .footerImage {
    position: absolute;
    right: 0;
    top: -200px;
    width: 350px;
    height: 600px;
    /*	z-index: ;  Zorg ervoor dat de SVG als achtergrond dient */
  }

  .half-container {
    max-width: 480px;
  }

  .col-lg-5 .half-container {
    max-width: calc(0.91666667 * 480px);
  }

  /*	width: 41.66666667%;*/
  .ctaHolder .ctaText {
    padding: 4em 5.5em;
  }

  .ctaHolder .ctaText .btn {
    width: auto;
    margin-bottom: 0;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .half-container {
    max-width: 570px;
  }

  .col-lg-5 .half-container {
    max-width: calc(0.91666667 * 570px);
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .half-container {
    max-width: 660px;
  }

  .col-lg-5 .half-container {
    max-width: calc(0.91666667 * 660px);
  }
}

@media (min-width: 1400px) {
  /*
	.half-container {
		max-width: 775px;
	}

	.container{
		max-width: 1550px;
	}

		.col-lg-5 .half-container {
		max-width: calc( 0.91666667 * 775px);
	}
*/
}