/*
* Houdoe Flex v1.1
* Copyright 2024, Hans Vorstenbosch
* www.houdoe.nl
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Reset/clearing
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Tables
- Spacing
- Houdoebar
- Brand
- Menu
- Tekstblokken
- Pakketten
- Testimonials
- Portfolio
- Utilities
- Allerlei

*/

/* Reset/clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.container:after,
.row::before,
.row::after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
	flex-flow: row wrap;	
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.flex-item {
  max-width: 700px; /* Pas dit aan naar de gewenste breedte */
  width: 100%;
  padding: 0 3rem 3rem 3rem; /* Voeg eventueel wat padding toe om de tekst te centreren */
}

.pagina .flex-item {
  max-width: 600px; /* Pas dit aan naar de gewenste breedte */
  width: 100%;
  padding: 0 3rem 1rem 3rem; /* Voeg eventueel wat padding toe om de tekst te centreren */
}

.col, .col1 {
  flex-basis: 50%;
  padding: 1rem 3rem 1rem 3rem;
  flex: 300px;
}

.col2 {
  flex-basis: 50%;
  padding: 1rem 3rem 1rem 6rem;
  flex: 400px;
  order: 1;
}

/* Correctie voor grote schermen*/
@media (max-width: 768px) {
.col2  {
	order: -1;
}
}

.col-breed {
  flex: 0 0 66%; /* Kolom neemt 65% van de rij in beslag */
  padding: 1rem 2rem 1rem 5rem;
  box-sizing: border-box;
}

.col-smal {
  flex: 1 1 30%; /* Neemt 30% van de breedte in beslag */
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Zorgt ervoor dat de inhoud wordt verdeeld */
  text-align: center;
  height: 100%; /* Zorgt ervoor dat de kolom dezelfde hoogte heeft als de andere kolommen */
}

/* Responsief ontwerp voor kleinere schermen */
@media (max-width: 768px) {
  .col-breed,
  .col-smal,
  .col-medium {
    flex: 1 1 100%; /* Beide kolommen nemen de volledige breedte in op kleine schermen */
    padding: 1rem;
  }
}

.col-smal img {
  max-width: 100%; /* Afbeelding vult container indien nodig */
  height: auto;
  max-height: 100%; /* Limiteer de hoogte voor consistente uitlijning */
  margin: 40px 0;
}

.image-container, .image-container1, .image-container2 {
  flex-basis: 50%;
  margin: 0 !important;
  padding: 0 !important;
  flex: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container2  {
  order: 1;
}

/* Correctie voor grote schermen*/
@media (max-width: 768px) {
.image-container2  {
	order: -1;
}
}

.image-container img , .image-container1 img, .image-container2 img{
  display: block;
  max-width: 80%;
  height: auto;
  align-content: center;
}

.kader {
	background-color: #76a584;
	color: #fff;
	padding: 10px 30px 20px 20px;
	border:1px solid #ccc;
	border-radius: 10px;
	margin: 40px 0 0 0;
	font-size: 85%;
 -webkit-box-shadow: 7px 7px 7px 0 rgba(0,0,0,.2);
  -moz-box-shadow: 7px 7px 7px 0 rgba(0,0,0,.2);
  box-shadow: 7px 7px 7px 0 rgba(0,0,0,.2);
}

.kader2 {
	background-color: #76a584;
	color: #fff;
	padding: 10px 30px 20px 30px;
	border:1px solid #ccc;
	border-radius: 10px;
	margin: 40px 0 0 0;
	font-size: 85%;
 -webkit-box-shadow: 7px 7px 7px 0 rgba(0,0,0,.2);
  -moz-box-shadow: 7px 7px 7px 0 rgba(0,0,0,.2);
  box-shadow: 7px 7px 7px 0 rgba(0,0,0,.2);
}




/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Houdoe
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  background-color: #fff;
  font-size: 1.7em;
  line-height: 1.8;
  letter-spacing: 0.02em;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
  color: #fff; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 400; }
h1 { font-size: 2.2rem;}
h2 { font-size: 1.1rem;}
h3 { font-size: 1rem;}
h4 { font-size: 0.8rem;}
h5 { font-size: 0.4rem;}
h6 { font-size: 0.2rem;}

/* Larger than phablet */
@media (min-width: 800px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.2rem; }
  h4 { font-size: 1rem; }
  h5 { font-size: 0,8rem; }
  h6 { font-size: 0.6rem; }
}

h1 {
	font-size: 1.8em;
  text-shadow: 1px 1px #333333;
	color:#fff;
	margin: 0;
	padding: 80px 10px 20px 0;
	line-height: 1.4;
	font-weight: 700;
}

/* Correctie voor grote schermen*/
@media (min-width: 550px) {
h1 {
	font-size: 3.5em;
	margin: 80px 0 0 0;
	line-height: 1.3;
}}

.pagina h1 {
	padding: 0 0 20px 0;
	margin: 20px 0 0 0;	
	font-size: 2em;
}

.big-image-aanmelden h1 {
	margin: 0;
	padding: 0;
}

.decktekst {
	color:#fff;
  text-shadow: 1px 1px #333333;
	padding: 0 0 30px 0;
	font-size: 1em;
	font-weight: 700;
}

/* Correctie voor grote schermen*/
@media (min-width: 550px) {
.decktekst  {
	padding: 0 0 30px 0;
	font-size: 1.2em;
}
}

h2 {
	font-size:1.8em;
	font-weight: 700;
	color:#fff;
	padding: 20px 0 10px 0;
}

.inleiding h2 {
	padding: 20px 0 10px 0;
	text-align: left;
	color: #544590;
}

.pagina h2 {
	padding: 20px 0 10px 0;
	text-align: left;
	color: #544590;
}

.werkwijze h2, .prijzen h2 {
	color: #242b39;
}

h3 {
	font-size:1.3em;
	font-weight: 700;
	color:#fff;
	padding: 20px 0 10px 0;
}

.pakketten-container h3, .stap h3 {
	font-size:1.6em;
	font-weight: 700;
	color:#fff;
    margin-bottom: 1rem;
	padding: 10px 0 5px 0;
    display: block;
    position: relative;
}

.pakketten-container h3::after, .stap h3::after  {
    content: "";
    position: absolute;
    left: 0;
	right: 0;
    bottom: 0;
    height: 2px;
    width: 95%;
	background-color: #cf5884;
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a, a:focus, a:visited {
  color: #544590;
  text-decoration:underline;	
  font-weight: normal;}
a:hover {
  color: #81b337; }


.balk-onder a, .balk-onder a:focus, .balk-onder a:visited {
  color: #fff;
  text-decoration:underline;	
  font-weight: normal;}
.balk-onder a:hover {
  color: #81b337; }


.kader2 a, .kader2 a:focus, .kader2 a:visited {
  color: #fff;
  text-decoration:underline;	
  font-weight: normal;}
.kader2 a:hover {
  color: #544590; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  background-color: #81b337;
  border: 0.1rem solid #81b337;
  border-radius: .4rem;
  color: #fff !important;
  cursor: pointer;
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  height: 3.8rem;
  letter-spacing: .1rem;
  line-height: 3.8rem;
  padding: 0 2.5rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.button:focus, .button:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
  background-color: #91c24d;
  border-color: #91c24d;
  color: #fff !important;
  outline: 0;
}

.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline {
  background-color: transparent;
  color: #fff;
}

.button.button-outline:focus, .button.button-outline:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type='button'].button-outline:focus,
input[type='button'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus,
input[type='submit'].button-outline:hover {
  background-color: #81b337;
  border-color: #81b337;
  color: #fff;
}

.button.button-custom,
button.button-custom,
input[type='button'].button-custom,
input[type='reset'].button-custom,
input[type='submit'].button-custom {
  background-color: #91c24d;
  border-color: #91c24d;
  color: #fff !important;
}

.button.button-custom:focus, .button.button-custom:hover,
button.button-custom:focus,
button.button-custom:hover,
input[type='button'].button-custom:focus,
input[type='button'].button-custom:hover,
input[type='reset'].button-custom:focus,
input[type='reset'].button-custom:hover,
input[type='submit'].button-custom:focus,
input[type='submit'].button-custom:hover {
  background-color: #81b337;
  border-color: #81b337;
  color: #fff !important;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
	background-color: #f6f6f6;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 160px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
label .wh {  
  font-weight: 300; 
}
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


.contactformulier {
	padding-top: 5px;
	color: #000;
}

/* Tegen ongewenste berichten*/
.lieverniet { display:none;}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: disc; 
  list-style-position: outside; /* Zorgt dat de bullet buiten de tekst staat */
  padding-left: 1.5em; /* Zorgt dat er ruimte is voor de bullet */
}

ul li {
  text-indent: -.1em; /* Laat de eerste regel terugspringen naar links */
  padding-left: .1em; /* Laat de rest van de tekst op de juiste plaats beginnen */
}

li {
  margin-bottom: 15px; }

.pakket li::marker {
	color: #cf5884;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Houdoebar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.houdoebar {
	right: 0;
	left: 0;
	z-index: 1030;
	padding: 0 40px 0 90px;
	color: #fff;
	background-color: #644429;	
}

.houdoebar{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);font-weight:300}
.houdoebar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.5rem 1rem}

.houdoebar a, .houdoebar a:focus, .houdoebar a:visited {
	text-decoration:none;
	color: #fff;
}


/* Brand
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.brand {
	font-size: 2rem;
    font-family: 'Poppins', sans-serif;}

.brand a, .brand a:focus, .brand a:visited {
    font-family: 'Poppins', sans-serif;	
	font-size: 14px!important;
	font-weight: 700;
	text-decoration:none;
	color: #f1f2eb;
}

/* Correction for large screens */
@media (min-width: 550px) {
.brand a, .brand a:focus, .brand a:visited {
	font-size: 18px!important;
}}

.logo {
	padding: 5px 0 0 0;
}

/* Menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
  background: #fff;
  padding: 20px 20px 10px 25px;
}

/* Correction for large screens */
@media (min-width: 550px) {
nav {
  padding: 20px 20px 0 25px;}}

nav ul {
	margin-bottom: 0;
}

nav a, nav a:visited {
  color: #544590 !important;
	font-weight: 700;
  text-decoration: none !important;
}

nav a:focus, nav a:hover {
  color: #91c24d !important;
	font-weight: 700;
  text-decoration: none !important;
}

.menu,
.submenu {
  list-style-type: none;
  z-index: 1000;
}

.brand {
  padding: 0 10px 0 0;
}
.item {
  padding: 15px 10px 10px 10px;
}
.item.button {
  padding: 9px 5px;	
}
.item:not(.button-custom) a {
	padding-top: 5px !important;
}
.item .button.button-custom{
  padding: 0 10px 0 10px !important;
}
.item:not(.button) a:hover,
.item a:hover::after {
  color: #ccc;
}


/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.menu li a {
  display: block;
  padding: 0 5px 0 5px;
}
.menu li.subitem a {
  padding: 15px;
}
.toggle {
  order: 1;
  font-size: 20px;
}
.item.button {
  order: 2;
}
.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
}
.button.secondary {
  /* divider between buttons and menu links */
  border-bottom: 1px #444 solid;
}
/* Submenu up from mobile screens */
.submenu {
  display: none;
}
.submenu-active .submenu {
  display: block;
}
.has-submenu i {
  font-size: 12px;
}
.has-submenu > a::after {
  font-family: "Font Awesome 5 Free";
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  content: "\f078";
  color: #544590;
  padding-left: 5px;
}
.subitem a {
  padding: 10px 15px;
}
.submenu-active {
  background-color: #f6f6f6;
  border-radius: 3px;
}

/* Tablet menu */
@media all and (min-width: 700px) {
  .menu {
    justify-content: center;
  }
  .brand {
    flex: 1;
	padding:  10px 0 0 25px;
  }
  .item.button {
    width: auto;
    order: 1;
    display: block;
  }
  .toggle {
    flex: 1;
    text-align: right;
    order: 2;
  }
  /* Button up from tablet screen */
  .menu li.button a {
    padding: 10px 15px;
    margin: 5px 0;
  }
  .button a {
    background: #0080ff;
    border: 1px royalblue solid;
  }
  .button.secondary {
    border: 0;
  }
  .button.secondary a {
    background: transparent;
    border: 1px #0080ff solid;
  }
  .button a:hover {
    text-decoration: none;
  }
  .button:not(.secondary) a:hover {
    background: royalblue;
    border-color: darkblue;
  }
}
/* Desktop menu */
@media all and (min-width: 960px) {
  .menu {
    align-items: flex-start;
    flex-wrap: nowrap;
    background: none;
  }
  .brand {
    order: 0;
	padding:  15px 0 0 25px;
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
  }
  .button {
    order: 2;
  }
  .submenu-active .submenu {
    display: block;
    position: absolute;
    right: 0;
    top: 40px;
    background: #f6f6f6;
  }
  .toggle {
    display: none;
  }
  .submenu-active {
    border-radius: 0;
  }
}

/* Tekstblokken
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wit {
	padding: 30px 0 30px 0;
	background-color: #fff;
	color: #000;
}

/* Correction for large screens */
@media (min-width: 550px) {
	.wit {padding: 40px 80px 100px 80px}
}

.inleiding {
	padding: 30px 0 30px 0;
	background-color: #f6f6f6;
	color: #242b39;	
}

/* Correction for large screens */
@media (min-width: 550px) {
	.inleiding {padding: 100px 60px 100px 0}
}

.ook {
	padding: 20px 0 30px 0;
	background-color: #f6f6f6;
	color: #242b39;	
}

.ookcontact {
	padding: 20px 0 30px 0;
	background-color: #f6f6f6;
	color: #242b39;
	font-size: 90%;
}

/* Correction for large screens */
@media (min-width: 550px) {
	.ook {padding: 40px 80px 100px 80px}
}

@media (min-width: 550px) {
	.ookcontact {padding: 40px 40px 100px 40px}
}

.ook2 {
	padding: 20px 0 30px 0;
	background-color: #fff;
	color: #242b39;	
}

/* Correction for large screens */
@media (min-width: 550px) {
	.ook2 {padding: 40px 80px 100px 80px}
}

.webdesign {
	padding: 30px 0 0 0;
	background-color: #f6f6f6;
	color: #242b39;
	font-size: 80%;
	text-align: center;
}

.webdesign a, .webdesign a:focus, .webdesign a:visited {
	text-decoration:none;
	color: #242b39;
}

.video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


.paginatekst {
	max-width: 600px;
	color:#333333;
}

.paginatekst h2 {
	color:#333333;
}
	
.content-blocks {
	padding: 30px 0 80px 0;
	background-color: #343e4f;
}

/* Correction for large screens */
@media (min-width: 550px) {
.content-blocks {
	padding: 60px 0 40px 40px;
	color: #fff;
}}

.autisme {
	background-color: #327652;
	color: #fff;
	padding: 30px 0 30px 0;
}

/* Correction for large screens */
@media (min-width: 550px) {
.autisme {
	padding: 40px 0 40px 80px;
	color: #fff;
}}

.intro {
	color: #fff;
	padding: 30px 0 30px 0;
}

/* Correction for large screens */
@media (min-width: 550px) {
.intro {
	padding: 40px 0 40px 40px;
	color: #fff;
}}

.missie {
	background-color: #327652;
	color: #fff;
	padding: 30px 0 30px 0;
}

/* Correction for large screens */
@media (min-width: 550px) {
.missie {
	padding: 60px 0 20px 80px;
	color: #fff;
}}

.professioneel {
	background-color: #f6f6f6;
}

/* Correction for large screens */
@media (min-width: 550px) {
.professioneel {
	padding: 60px 0 100px 80px;
}}

.wachtlijst {
	background-color: #76518d;
	padding: 30px 30px 30px 30px;
}

.wachtlijst a {
	color: #fff;
}

/* Correction for large screens */
@media (min-width: 550px) {
.wachtlijst {
	padding: 80px 80px 60px 80px;
}}

.werkwijze-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 2rem 0 2rem;
	margin-bottom: 20px;
}

.stap {
    background-color: #333333;
	color: #f6f6f6;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1.5rem 1rem 2.5rem 3rem;
    width: 275px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 80%;
}

/* Correction for large screens */
@media (min-width: 350px) {
.stap {
	width: 325px;
}}

.stap p {
	margin: 20px 0 10px 0;
}

.padje-boven {
	padding-top: 100px;
}

.pakket-maatwerk {
	background-color: #333333;
	color: #fff;
	padding: 30px 0 30px 0;
}

/* Correction for large screens */
@media (min-width: 550px) {
.pakket-maatwerk {
	padding: 60px 0 0 80px;
	color: #fff;
}}

.prijzen {
	background-color: #f6f6f6;
	color: #fff;
}

/* Correction for large screens */
@media (min-width: 550px) {
.prijzen {
	padding: 60px 0 40px 80px;
	color: #fff;
}}

.prijs {
	font-size: 1.6em;
	padding: 5px 0 10px 0;
}

.maand {
	font-size: 60%;
	padding-left: 5px;
}

.kleinelettertjes {
	color: #242b39;
	font-size: 80%;
	padding-top: 15px;
}

.kleiner {
	font-size: 2.5rem;
}

.referenties {
	background-color: #494949;
	color: #fff;
}

/* Correction for large screens */
@media (min-width: 550px) {
.referenties {
	padding: 60px 0 40px 80px;
	color: #fff;
}}

.portfolio {
	background-color: #333333;
	color: #fff;
}

/* Correction for large screens */
@media (min-width: 550px) {
.portfolio {
	padding: 60px 0 40px 80px;
	color: #fff;
}}

.contact {
	padding: 60px 0 60px 10px;
	background-color: #494949;
	color: #fff;
}

/* Correction for large screens */
@media (min-width: 550px) {
.contact {
	padding: 60px 0 120px 0;
}}

.balk-onder {
	padding: 30px 0 40px 0;
	background-color: #76518d;
	color: #fff;
	font-size: 90%;
}

/* Correction for large screens */
@media (min-width: 550px) {
.balk-onder {
	padding: 30px 0 40px 30px;
}}



/* Pakketten
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.professioneel-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 2rem 0 2rem;
	margin-bottom: 20px;
}

.pakket {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem 1rem 1rem 1rem;
    width: 275px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 80%;
}

/* Correction for large screens */
@media (min-width: 350px) {
.pakket {
	width: 325px;
}}

.pakket p {
	margin-bottom: 10px;
}


.meest-gekozen {
    background-color: #242b39;
    position: relative;
}

.meest-gekozen .label {
    background-color: #81b337;
    border-radius: 0 5px 5px 0;
    color: #fff;
    font-size: 1rem;
    right: 0;
    padding: 2px 5px;
    position: absolute;
    top: -1px;
}

@media (max-width: 960px) {
    .pakketten-container {
        flex-direction: column;
    }
}


/* testimonials
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.quotes-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 40px 2rem 8rem 2rem;
}

.quote {
    background-color: #f0f0f0;
	color: #000;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem 0 1rem 0 ;
    width: 285px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Correction for large screens */
@media (min-width: 350px) {
.quote {
	width: 325px;
}}

.quote blockquote {
    quotes: "“" "”";
}

.quote p {
    font-size: 1.4rem;
    line-height: 1.5;
}

.quote p::before {
    content: open-quote;
    font-size: 2rem;
    line-height: 0.1em;
    vertical-align: -0.4em;
    margin-right: 0.25em;
}

.quote p::after {
    content: open-quote;
    font-size: 2rem;
    line-height: 0.1em;
    vertical-align: -0.4em;
    margin-left: 0.25em;
}

p.no-quote::before, p.no-quote::after  {
	content: none;
}

.namen {
	font-size: 1.3rem;
}

.klant-info {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

.klant-info img {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    object-fit: cover;
    margin-right: 1rem;
}

.klant-info strong {
    display: block;
    font-size: 1.4rem;
}

.klant-info p {
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 960px) {
    .quotes-container {
        flex-direction: column;
    }
}

/* Portfolio
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.portfolio-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 3rem 12rem 3rem;
}

.portfolio-item {
    display: block;
    width: calc(33.333% - 1rem);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.portfolio-item img {
    width: 95%;
    height: auto;
    display: block;
    object-fit: cover;
	padding-bottom: 20px;
}

@media (max-width: 768px) {
    .portfolio-item {
        width: calc(50% - 2rem);
    }
}

@media (max-width: 480px) {
    .portfolio-item {
        width: 95%;
    }
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Allerlei
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.big-image {
	min-height: 400px;
	background-color:#735b90;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Correctie voor grote schermen*/
@media (min-width: 550px) {
.big-image {
	min-height: 500px;
	background-size: cover;
	background-image:url("../img/coverphoto.png");
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}}

.big-image-bedankt {
	min-height: 500px;
	background-size: cover;
	background-image:url("../img/coverphoto-bedankt.png");
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;	
}

.big-image-ook {
	min-height: 550px;
	background-size: cover;
	background-image:url("../img/coverphoto-ook-ook.png");
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;	
}

/* Correctie voor grote schermen*/
@media (min-width: 550px) {
.big-image-ook {
	min-height: 425px;
	}}
	

.big-image-diensten {
	min-height: 350px;
	background-size: cover;
	background-image:url("../img/coverphoto-ook-wonen.png");
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;	
}

.big-image-individueel {
	min-height: 350px;
	background-size: cover;
	background-image:url("../img/coverphoto-ook-individueel.png");
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;	
}

.big-image-ouderbegeleiding {
	min-height: 350px;
	background-size: cover;
	background-image:url("../img/coverphoto-ook-ouderbegeleiding.png");
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;	
}

.big-image-dagbesteding {
	min-height: 380px;
	background-size: cover;
	background-image:url("../img/coverphoto-ook-dagbesteding.png");
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;	
}

.big-image-gezinscoaching {
	min-height: 400px;
	background-size: cover;
	background-image:url("../img/coverphoto-ook-gezinscoaching.png");
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;	
}

.big-image-digitaal {
	min-height: 350px;
	background-size: cover;
	background-image:url("../img/coverphoto-ook-digitaal.png");
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;	
}

.big-image-aanmelden {
    min-height: 100px;
    background-color: #764e8e !important;
}

@media (max-width: 768px) {
    .big-image-aanmelden {
        background-color: #764e8e !important; /* Zorg dat de kleur niet verandert */
    }
}	

/* Correctie voor grote schermen*/
@media (min-width: 550px) {
.big-image, .big-image-bedankt, .big-image-webmaster {
	min-height: 650px;
	background-position: center;
	padding-left: 35px;}
}

.big-image p, .big-image-bedankt p, .big-image-webmaster p {
	margin: 0;
}

.overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 2;	
}

/* Correctie voor grote schermen*/
@media (min-width: 550px) {
.overlay {
	padding-left: 35px;}
}

.kopje {
	padding-left: 40px;	
}

.lucht {
	padding: 40px 20px 80px 20px;
}

/* Correctie voor grote schermen*/
@media (min-width: 550px) {
.lucht {
	padding: 40px 40px 40px 40px;
	}
}

.center {
	text-align: center;
}

/* Uitklappen van tekst*/
.text {
	display:none;
	margin-top: 40px;
	font-size: 90%;
 }

.expand {
	text-decoration:underline;
	cursor:hand;
	cursor:pointer;
	color:#f6f6f6;
}


/* CSS for the interactive map */
.flex-box-1-3 {
  display: flex;
}

.component-block {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
}

.component-interactive-map {
  text-align: center;
}

.component-title {
  font-size: 1.5em;
}

.interactive-map {
  position: relative;
}

/* CSS for provinces */
.province {
  cursor: pointer;
  fill: #b2b2b2;
  stroke: #fff;
  stroke-width: 0.5;
}

.province:hover {
  fill: #8c8c8c;
}

.component-interactive-map .interactive-map svg .provinces-lifted,.component-interactive-map .interactive-map svg .municipalities-lifted{transition:all .25s cubic-bezier(0.5,1,1,1) 0s,opacity .275s cubic-bezier(0.2,0.7,0.25,1) .3s,transform .825s cubic-bezier(0.2,0.7,0.25,1) .3s;transform-origin:50% 50%}.component-interactive-map .interactive-map svg .provinces-lifted{transform:translateZ(-30px)}.component-interactive-map .interactive-map svg .municipalities-lifted{transform:translateZ(52px);filter:drop-shadow(2px 14px 10px rgba(0,0,0,0))}.component-interactive-map:hover svg .municipality,.component-interactive-map:hover svg .province{pointer-events:all}.component-interactive-map:hover svg .provinces-lifted,.component-interactive-map:hover svg .municipalities-lifted{transition:all .25s cubic-bezier(0.5,1,1,1) 0s,opacity .275s cubic-bezier(0.2,0.7,0.25,1) 0s,transform .55s cubic-bezier(0.2,0.7,0.25,1) 0s}.component-interactive-map:hover svg .provinces-lifted{transform:translateZ(-30px) rotateY(20deg) rotateX(15deg)}

.component-interactive-map .interactive-map svg .region{transition:.25s cubic-bezier(0.5,1,1,1);transition-property:fill;fill:#ee7f00;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}.component-interactive-map .interactive-map svg .municipality,.component-interactive-map .interactive-map svg .province{pointer-events:none;cursor:default}.component-interactive-map .interactive-map svg .municipality:hover .region,.component-interactive-map .interactive-map svg .province:hover .region{fill:#fab260}

.component-interactive-map .interactive-map svg{z-index:1;transform:translate(0,19);padding-top:27px;overflow:visible}.component-interactive-map .interactive-map svg .region{transition:.25s cubic-bezier(0.5,1,1,1);transition-property:fill;fill:#ee7f00;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}.component-interactive-map .interactive-map svg .municipality,.component-interactive-map .interactive-map svg .province{pointer-events:none;cursor:default}.component-interactive-map .interactive-map svg .municipality:hover .region,.component-interactive-map .interactive-map svg .province:hover .region{fill:#fab260}.component-interactive-map .interactive-map svg .municipality[href],.component-interactive-map .interactive-map svg .province[href]{cursor:pointer}.component-interactive-map .interactive-map svg .provinces-lifted,.component-interactive-map .interactive-map svg .municipalities-lifted{transition:all .25s cubic-bezier(0.5,1,1,1) 0s,opacity .275s cubic-bezier(0.2,0.7,0.25,1) .3s,transform .825s cubic-bezier(0.2,0.7,0.25,1) .3s;transform-origin:50% 50%}.component-interactive-map .interactive-map svg .provinces-lifted{transform:translateZ(-30px)}.component-interactive-map .interactive-map svg .municipalities-lifted{transform:translateZ(52px);filter:drop-shadow(2px 14px 10px rgba(0,0,0,0))}.component-interactive-map:hover svg .municipality,.component-interactive-map:hover svg .province{pointer-events:all}.component-interactive-map:hover svg .provinces-lifted,.component-interactive-map:hover svg .municipalities-lifted{transition:all .25s cubic-bezier(0.5,1,1,1) 0s,opacity .275s cubic-bezier(0.2,0.7,0.25,1) 0s,transform .55s cubic-bezier(0.2,0.7,0.25,1) 0s}.component-interactive-map:hover svg .provinces-lifted{transform:translateZ(-30px) rotateY(20deg) rotateX(15deg)}.component-interactive-map:hover svg .municipalities-lifted{transform:translateZ(50px) translateX(30px) translateY(-45px) rotateY(20deg) rotateX(15deg);filter:drop-shadow(2px 14px 10px rgba(0,0,0,0.2))}.label{font-size:87.5%;font-weight:700;border-radius:10px}


.form .tooltip-trigger{position:absolute;top:0;right:.66667rem}@media print,screen and (min-width:64em){.form .tooltip-trigger{right:1rem}}.tooltip.dropdown-pane{border:0}

.tooltip{position:absolute;top:calc(100% + 0.44444rem);z-index:1200;max-width:8.88889rem;padding:.66667rem;border-radius:20px;background-color:#fff;font-size:87.5%;color:#173432}.tooltip::before{position:absolute}.tooltip.bottom::before{display:block;width:0;height:0;border-style:solid;border-width:.44444rem;content:'';border-top-width:0;border-color:transparent transparent #fff;bottom:100%}.tooltip.bottom.align-center::before{left:50%;transform:translateX(-50%)}.tooltip.top::before{display:block;width:0;height:0;border-style:solid;border-width:.44444rem;content:'';border-bottom-width:0;border-color:#fff transparent transparent;top:100%;bottom:auto}.tooltip.top.align-center::before{left:50%;transform:translateX(-50%)}.tooltip.left::before{display:block;width:0;height:0;border-style:solid;border-width:.44444rem;content:'';border-right-width:0;border-color:transparent transparent transparent #fff;left:100%}.tooltip.left.align-center::before{bottom:auto;top:50%;transform:translateY(-50%)}.tooltip.right::before{display:block;width:0;height:0;border-style:solid;border-width:.44444rem;content:'';border-left-width:0;border-color:transparent #fff transparent transparent;right:100%;left:auto}.tooltip.right.align-center::before{bottom:auto;top:50%;transform:translateY(-50%)}.tooltip.align-top::before{bottom:auto;top:10%}.tooltip.align-bottom::before{bottom:10%;top:auto}.tooltip.align-left::before{left:10%;right:auto}.tooltip.align-right::before{left:auto;right:10%}.tooltip-trigger{width:1rem;height:1rem;background:rgba(35,41,41,0.1);border:0;border-radius:50%;color:#fff;cursor:help;position:relative;font-size:14px}.tooltip-trigger .icon::before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Public Sans",sans-serif;content:"?"}

.tooltip{transition:.25s cubic-bezier(0.5,1,1,1);transition-property:opacity;opacity:0;visibility:hidden;box-shadow:0 1.1px 1.1px rgba(0,0,0,0.014),0 3px 3px rgba(0,0,0,0.02),0 7.2px 7.2px rgba(0,0,0,0.026),0 24px 24px rgba(0,0,0,0.04);font-family:"PT Sans Narrow",sans-serif;pointer-events:none}.tooltip[data-is-active='true'],.tooltip.is-open{opacity:1;visibility:visible}


/* CSS for municipalities */
.municipality {
  cursor: pointer;
  fill: #66c2a5;
  stroke: #fff;
  stroke-width: 0.5;
}

.municipality:hover {
  fill: #389476;
}

/* Tooltip show/hide animation */
.tooltip-show {
  opacity: 1;
}