/* CSS Document */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}

input[type=text],input[type=button],input[type=submit],input[type=password],select{vertical-align:middle}
.clear {
    clear: both; /* Verhindert dat elementen aan de linker- of rechterkant drijven */
	width:100%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.mx_logged_in .block-top img,.mx_logged_in .block-top {
    max-width: 400px;
    border-radius: 6px;
    display: block;
    margin-left: auto;
    margin-right: 0;
}

/* lettertype */
.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}
/* einde lettertpe */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/*fix voor iframe demo*/
body, html {
width: 1px;
min-width: 100%;
*width: 100%;
background-color:#fff !important;
}
html {
  scroll-behavior: smooth;
}

html.mx_logged_in {
margin-top:0 !important;
}

.mx_logged_in #topwrapper, .mx_logged_in #menu{
top:52px;
}

.mx_logged_in #menu .container-bar {
top: 69px;
}


body {
margin:0;
padding:0;
color: #000000;
line-height: 1.450;
}
body, p, td, td p {
	 font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
    font-size: 18px;
    color: #666;
     line-height: 1.5em;
     -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



h1, h2, h3, h4, h5, h6, p, ul {
margin:0;
padding-bottom:20px;color: #333;
	

}

h1 {
    color: #101f2d;
	font-size: clamp(1.2rem, 1.8vw, 1.575rem);
    line-height: clamp(1.2, 2, 1.5); /* Line-height zonder eenheden */
    
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-top: 0px;
}

h2 {
  color: #101f2d;
 font-size: clamp(1.2rem, 1.8vw, 1.375rem);
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.375rem); /* ±19px → 22px */
}
	
}

h1::before {
content: "";
display: block;
width: 100px;
height: 5px;
margin: 0 0 30px 0;
/*background: rgb(31,24,58);
background:
	linear-gradient(
90deg
,rgba(16,31,45,.79) 25%,rgba(29,154,221,.79) 50%,rgba(125,103,65,.79));*/

}

h1[style*="center"]:before {
margin: 0 auto 30px auto;
}

h1[style*="right"]:before {
margin: 0 0 30px auto;
}

a:active, a:focus { 
outline: 0; 
} 

a{
color:#8e3e9d;
text-decoration:none;
transition: all 0.8s ease;
}

a:hover {
color:#8e3e9d;
}

input[type=text], input[type=email],input[type=button],input[type=submit],input[type=password], textarea {
-webkit-appearance: none;

line-height:36px;
padding:0 10px;
border: solid 1px #DDDDDD;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}

select{
border: solid 1px #DDDDDD;
height:36px;
padding:0 10px;
}

textarea {
line-height:20px;
padding: 10px;
resize: none;
}
.geplaatst {
	    position: absolute;
    right: 0;
    bottom: 10px;

}
.logobalk {
  padding: 40px 0; }

.logobalk h3 {
  font-size: 42px;
  line-height: 41px;
  color: #1d1d1b;
  margin-bottom: 29px;
  column-span: all;
  border-left: solid 5px #c12022;
  padding-left: 20px;
  font-weight: 300; }

.tel-link {
    position: relative; /* Positionering voor het icoon */
    padding-left: 25px; /* Ruimte voor het icoon */
    text-decoration: none; /* Verwijder onderstreping */
    color: #000; /* Kleur van de tekst */
}

.tel-link::before {
   
    font-family: 'Line Awesome'; /* Zorg ervoor dat Line Awesome is geladen */
    position: absolute; /* Absoluut ten opzichte van de link */
    left: 5px; /* Plaatsing van het icoon */
    top: 50%; /* Verticale uitlijning */
    transform: translateY(-50%); /* Centreren van het icoon */
    font-size: 16px; /* Pas de grootte van het icoon aan */
}

.buttonlook {
	  font-size: 18px;
  font-weight: bold;
  background-color: #2895ce; /* blauw naambord */
  color: white;
  border: none;
  padding: 10px 20px;
  position: relative;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;

  /* overgang voor hover effecten */
  transition: all 0.3s ease;
	
}
.button {
  font-size: 18px;
  font-weight: bold;
  background-color: #2895ce; /* blauw naambord */
  color: white;
  border: none;
  padding: 10px 20px;
  position: relative;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;

  /* overgang voor hover effecten */
  transition: all 0.3s ease;
}

.button::before, .buttonlook::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  border: 1px solid white; /* dun wit lijntje */
  border-radius: 4px; /* iets kleiner dan de buitenradius */
  pointer-events: none; /* zorgt dat het niet klikt */
  transition: all 0.3s ease; /* animatie voor het lijntje */
}

/* Hover effect */
.button:hover {
  background-color: #1f6fa3; /* iets donkerder blauw */
  transform: translateY(-2px); /* lichte “lift” */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
}

.button:hover::before {
  border-color: #c7d72e; 
}



.buttonbl, input[type=submit] {
display:inline-block;
color:#FFFFFF;
background-color:#94c11f;
padding:10px 17px;

text-transform:uppercase;
font-size:15px;
font-family: Arial, Helvetica, sans-serif;
font-weight:600;
transition: all 0.8s ease;
}

input[type=submit] {
cursor:pointer;
border:none;
line-height:20px;
}

input[type=button] {
cursor:pointer;
}

.button.outline {


	    background-color: #b3a58c;
    color: #fff;
    padding: 8px 15px;
    border: solid 2px #b3a58c;
}

.buttonbl:after {
content:"\f061";
font-family:'Line Awesome Free';
padding-left:6px;
position:relative;
top:0;
}
a.buttonbl:hover, input[type=submit]:hover {
color:#FFFFFF!important;
background-color:#8e3e9d;
}

/*.button:after {
content:"\f061";
font-family:'Line Awesome Free';
padding-left:6px;
position:relative;
top:0;
}*/

a.button:hover, input[type=submit]:hover {
color:#FFFFFF!important;
background-color:#8e3e9d;
}

.button.outline:hover {
color:#FFFFFF!important;
background-color:#8e3e9d;
	border:solid 2px #8e3e9d;
}

/* Basisstijl voor de lijst */
#tekstvak ul {
    list-style-type: none; /* Verwijder de standaard opsommingstekens */
    padding: 0; /* Verwijder padding */
    margin: 0; /* Verwijder margin */
}

/* Stijl voor de lijstitems */
#tekstvak ul li {
    position: relative; /* Vereist voor de positionering van het pseudo-element */
    padding-left: 30px; /* Ruimte voor het grote vinkje */
    margin-bottom: 13px; /* Ruimte tussen de lijstitems */
}

/* Pseudo-element voor het vinkje */
#tekstvak ul li::before {
    content: "✔"; /* Unicode voor een vinkje */
    position: absolute; /* Absolute positionering */
    left: 0; /* Plaats het vinkje aan de linkerkant */
    font-size: 26px; /* Grotere iconen */
    color: #94c11f; /* Kies een kleur voor het vinkje */
    line-height: 1; /* Zorgt ervoor dat het vinkje goed uitgelijnd is */
}


#tekstvak img[style*="left"], #tekstvak img[align="left"] { margin: 0 20px 10px 0; }
#tekstvak img[style*="right"], #tekstvak img[align="right"] { margin: 0 0 10px 20px; }

#tekstvak img {
max-width:100%;
height:auto;
}

/* Tekstvak vervolg */
#tekstvak-vervolg {
   
    margin-bottom: 20px;
    width: 100%; 
    padding: 30px 5% 10px;

    box-sizing: border-box;
    font-size: 16px;
    font-family: Arial, sans-serif;
    outline: none;
   }

/* Lijsten in tekstvak-vervolg */
#tekstvak-vervolg ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#tekstvak-vervolg ul li {
    position: relative;
    padding-left: 30px;
   
}

#tekstvak-vervolg ul li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    font-size: 22px;
    color: #0b72af; /* andere kleur vinkje dan #tekstvak */
    line-height: 1;
}

/* Afbeeldingen netjes uitlijnen */
#tekstvak-vervolg img[style*="left"], #tekstvak-vervolg img[align="left"] { 
    margin: 0 20px 10px 0; 
}
#tekstvak-vervolg img[style*="right"], #tekstvak-vervolg img[align="right"] { 
    margin: 0 0 10px 20px; 
}

#tekstvak-vervolg img {
    max-width: 100%;
    height: auto;
}



.small {width:75% !important; margin:0 auto;}

td {
vertical-align:top;
	    padding: 2px;
}

ul.tick {
list-style-type:none;
padding-left:0;
}

ul.tick li:before {
content:"\f058";
 font-family:'Line Awesome Free';
font-size: 24px;
padding-right:8px;
 background: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
top:2px;
}

p[style*="left"] {
font-family: 'PT Serif', serif;
font-style: italic;
font-size:18px;
}

#topwrapper .container {align-items: inherit;}
.container {
      width: 100%;
    max-width: 1400px;
    margin: auto;
    position: relative;	
	
}




/* banner */
.banner-container {
    background-image: url("../images/banner-logopedietop.jpg"); /* Voeg hier het pad naar je foto toe */
    height: auto;
    min-height: 25vw;
    max-height: 722px;
    width: 100%;
    max-width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
	z-index:1;
	 border-bottom: 15px solid;
  border-image: linear-gradient(to right, #d9cedb 0%, #8e3e9d 33.33%, #7eaec4 33.33%, #2895ce 66.66%, #cdd392 66.66%, #c7d72e 100%) 1;
}

.banner-container-volg {
    position: relative;
    height: 375px;
    width: 100%;
    background: url("../images/banner-vervolg.webp") center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1480px;
    margin: 0 auto;
    overflow: hidden;
	    border-bottom: 15px solid;
    border-image: linear-gradient(to right, #d9cedb 0%, #8e3e9d 33.33%, #7eaec4 33.33%, #2895ce 66.66%, #cdd392 66.66%, #c7d72e 100%) 1;
}

.banner-container-volg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #7eaec4 0%, transparent 15%, transparent 85%, #7eaec4 100%)
    z-index: 0;
}


.banner-container-volg .tekst {
    display: flex;
    justify-content: center; /* Centreert horizontaal */
    align-items: center; /* Centreert verticaal */
    text-align: center; /* Zorgt ervoor dat de tekst binnen de div gecentreerd is */
}

.banner-container-volg .banner-content h1 {
    margin: 0; /* Verwijder standaardmarges */
    color: #fff; /* Aanpassing voor zichtbaarheid */
}
.banner-container-volg .banner-content {
  
    min-height: inherit;
    padding: 90px 0 80px;
    
}


.banner-content {
    z-index: 5;
    padding: 27px 0;
    text-align: center;
    color: #fff; /* Pas de tekstkleur aan indien nodig */
}
.banner-content h1 { text-align: center; color:#fff;     	 font-size: clamp(40px, 2vw, 60px); 
    line-height: clamp(1.2, 2, 1.5); /* Line-height zonder eenheden */ 
	
}
.banner-content  a {font-size:24px;}
.banner-content p {text-align: center; color:#fff; font-size:24px;}


.buttonbl {
    font-size: 18px;
    background-color: #0b72af;
    border-width: 0px !important;
    border-color: #94c11f;
    border-radius: 50px;
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
}

.buttonbl:hover {
    color: #ffffff !important;
    background-color: #0b72af;
    border-color: #0b72af !important;
}

.button2 {
    font-size: 18px;
    background-color: #94c11f;
    border-width: 0px !important;
    border-color: #94c11f;
    border-radius: 50px;
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
      position: absolute;
    bottom: 10px;
    display: block;
    padding: 10px;
    color: #fff;
}

.button2:hover {
    color: #ffffff !important;
    background-color: #a4c847;
    border-color: #a4c847 !important;
}

.button3 {
    font-size: 18px;
    background-color: #0b72af;
    border-width: 0px !important;
    border-color: #0b72af;
    border-radius: 50px;
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    position: absolute;
    bottom: 0px;
    left: 0;
    display: inline-table;
    padding: 10px;
    color: #fff;
    right: 0;
    margin: 0 auto;
}

.button3:hover {
    color: #ffffff !important;
    background-color: #a4c847;
    border-color: #a4c847 !important;
}




@media only screen and (min-width: 1350px) {
    .banner-content {
        padding: 27px 0;
    }
}

@media (min-width: 981px) {
    .banner-content {
        padding: 2% 0;
    }
}
.top-bar span, .top-bar h1 {

    color: #666;
  padding: 15px;
  text-align: center;
  font-size: 28px;
	line-height: 32px;
  font-weight: bold;
}
/* Roze balk full width */
.top-bar {
box-shadow: 0px 5px 7px rgb(0 0 0 / 25%);
   color: #666;    


  padding: 15px;
  text-align: center;
  font-size: 28px;
	line-height: 32px;
  font-weight: bold;
  width: 100%;
	margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    /* border-top-width: 2px !important; */
    border-right-width: 2px !important;
    border-bottom-width: 2px !important;
    border-left-width: 2px !important;
    /* padding-top: 60px !important; */
    /* padding-bottom: 60px !important; */
    border-left-color: #fff !important;
    border-left-style: solid !important;
    border-right-color: #fff !important;
    border-right-style: solid !important;
    border-top-color: #fff !important;
    border-top-style: solid !important;
    border-bottom-color: #fff !important;
    border-bottom-style: solid !important;
    /* border-radius: 10px !important;*/
}


/* Flexbox blokken */
.blocks-plaatsen, .blocks-hulp, .blocks-team {max-width:1200px;margin: 0 auto;background: none !important;}



.blocks-top, .blocks-plaatsen, .blocks-hulp {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  
  gap: 20px;                    
/*background: linear-gradient(to right, #c7d72e, #9cb205);*/
	    width: 100%;
	padding:25px;
	max-width: 1200px;
    margin: 0 auto;
}

/* Klikbare blokjes */
.blocks-hulp {    margin-top: 12px;}
.blocks-hulp .block-top  {flex: 1 1 calc((100% - (20px * 5)) / 6);
    overflow: inherit;
    margin-top: 25px;
    }
.blocks-hulp .block-top p {bottom: 10px;}  
.blocks-plaatsen .block-top {flex: 1 1 calc((100% - (20px * 2)) / 3); border-radius:8px;}
.blocks-plaatsen .block-top p {background-color:#2895ce; bottom:10px;}
.blocks-plaatsen .block-top img {border-radius:8px;}

.blocks-team .block-top {flex: 1 1 calc((100% - (20px * 3)) / 4); }
.blocks-team .block-top p {background-color:#2895ce; }
.blocks-team .block-top img {}

.blocks-team .block-top {
  flex: 0 0 calc((100% - (20px * 3)) / 4); /* 4 blokken per rij, vaste breedte */
  box-sizing: border-box;
}

.blocks-team {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


.block-top {
  flex: 1 1 calc((100% - (20px * 5)) / 6); 
  text-align: center;
  text-decoration: none;
  color: #000;
  background:rgba(255, 255, 255, 0.5);
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; /* nodig voor absoluut positioneren van <p> */
  overflow: hidden; /* voorkomt dat tekst buiten de blok komt */
  border-radius: 50%;
}

.block-top img {
  width: 100%;
  border-radius: 6px;
  display: block;
  margin-left: auto;   /* afbeelding naar rechts */
  margin-right: 0;
border-radius: 50%;
}


.block-top p {
  position: absolute;
  bottom: 20px; /* afstand van onderkant */
  left: 10px;   /* afstand van linkerkant */
  right: 10px;  /* optioneel, zodat het label niet te breed wordt */
  background-color:#9cb205;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  margin: 0;
  font-weight: bold;
  text-align: center;
}

/* Hover effect */
.block-top:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
@media (max-width: 992px) {
  .blocks-plaatsen .block-top,
  .block-top {
    flex: 1 1 calc((100% - (20px * 2)) / 3); /* 3 per rij */
  }
	 .blocks-team .block-top {
    flex: 0 0 calc((100% - (20px * 2)) / 3); /* 3 per rij */
  }
}

@media (max-width: 768px) {
  .blocks-plaatsen .block-top,
  .block-top {
    flex: 1 1 calc((100% - 20px) / 2); /* 2 per rij */
  }
		 .blocks-team .block-top {
    flex: 0 0 calc((100% - (20px * 1)) / 2); /* 3 per rij */
  }
}

@media (max-width: 520px) {
  .blocks-plaatsen .block-top,
  .block-top {
    flex: 1 1 calc((100% - 20px) / 2); /* 2 per rij */
  }
	.block-top p {
    position: absolute;
    font-size: 15px;
	}
	 .blocks-team .block-top {
    flex: 0 0 calc((100% - 20px) / 1); /* 2 per rij */
  }
}

.divider {border-top:solid 0px;border-image: linear-gradient(to right, #8e3e9d 0%, #8e3e9d 33.33%, #2895ce 33.33%, #2895ce 66.66%, #c7d72e 66.66%, #c7d72e 100%) 1; padding:20px;}
/* Container */



.review-container { 
    border: solid 10px rgba(255, 255, 255, 0.5);
    position: relative;
    width: 100%;
    margin: 40px auto;
    overflow: hidden;
    background: #d9cedb;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.review-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 10px; /* Ruimte tussen reviews */
}

.review {
    flex: 0 0 100%; /* Wordt via JS aangepast */
    padding: 15px;
    background-color: #461254;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 165px;
    box-sizing: border-box;
}


.review .quote { font-size: 16px; line-height: 1.4; }
.review .name { margin-top: auto; font-size: 13px; color: #fff; font-weight: bold; }

.controls { margin-top: 15px; display: flex; justify-content: center; gap: 15px; }
.controls button { background: none; border: none; font-size: 22px; cursor: pointer; }

.bullets {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.bullets .bullet {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
}
.bullets .bullet.active { background: #fff; }

/* Responsive */
@media (max-width: 900px) { .review { flex: 0 0 100%; } }
@media (max-width: 600px) { .review { flex: 0 0 100%; } }




.tekst{
    width: 80%;
    max-width: 1080px;
    margin: auto;
    position: relative;
	color:#fff;
	  
}

/*tekstveld**/

#tekstvak {
	text-align: center;
    margin-bottom: 20px;
    width: 100%; /* 100% breedte van het tekstvak */
    padding: 0 5% 10px;

    box-sizing: border-box; /* Zorgt ervoor dat padding niet de totale breedte beïnvloedt */
    font-size: 16px; /* Lettergrootte van de tekst */
    font-family: Arial, sans-serif; /* Lettertype */
    outline: none; /* Verwijdert de standaard focusrand */
}
.stripes {border-bottom:dotted 4px #0b72af;}
hr  {border-bottom: dotted 4px #0b72af;
    display: block;
    height: 0;
    margin: 1em 0;
    /* padding: 0; */
    /* width: 100%; */
    border-top: none;}
/* einde tekstveld**/


.container {
    display: flex;                /* Gebruik flexbox voor het plaatsen van de blokken */
    justify-content: space-between; /* Zorgt voor ruimte tussen de blokken */
      
	   
}
.container-calendar {
    display: inherit;             
    max-width: 1080px;
    margin: auto;
    position: relative;
      
	   
}

.block {
    width: 50%;                  /* Breedte van de blokken (45% voor ruimte tussen) */
 	background-color: #eeeeee;
    
    padding-right: 40px; 
    padding-bottom: 40px ;
    padding-left: 40px; 
}
.container:empty {
    padding: 0;
}

.block.empty:empty {
    padding: 0;
    background-color: transparent;
}
.block img {width:100%; height:auto;}
.empty {background-color:transparent;}

.empty ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.empty ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 13px;
}

.empty ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    font-size: 26px;
    color: #94c11f;
    line-height: 1;
}

.block-icon {
    display: block;       
    margin: 0 auto 10px;        
    max-width: 100px;          
	transition: opacity 0.3s ease, transform 0.3s ease; 
	filter: invert(87%) sepia(22%) saturate(7197%) hue-rotate(28deg) brightness(98%) contrast(76%);
}

p {
   
    margin: 0;                   /* Verwijdert standaard marges */
}

.blue-block {
	width:100%;
     font-size: 18px;
    line-height: 1.4em;
    background-image: linear-gradient(90deg, #32a0bb 0%, #004f9f 100%);
    padding-top: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 40px !important;
	margin-bottom:40px;
	margin-top:40px;
}
.blue-block span {
	ontent: "“";
    font-size: 82px;
    color: #94c11f;
    text-align: center;
    width: 100%;
    display: block;
}

.blue-block p {
    color: white;                /* Witte tekstkleur */
    margin: 0;                   /* Verwijdert standaard marges */
}
.blue-block h3 {color:#fff;}
/* drie blokken */

/*.grey {
	background: linear-gradient(to right, #2895ce, #0061b9);
	width:100%;
}
.paars {
	background: linear-gradient(to right, #8e3e9d, #441452);
}
.groen {
	background: linear-gradient(to right, #c7d72e, #9cb205);
	width:100%;
}*/

.grey {
	background: linear-gradient(to right, #e8f0fb);
	width: 100%;
}

.paars {
	background: linear-gradient(to right, #f0e6f2);
}

.groen {
	background: linear-gradient(to right, #fcfdf3, #f8fae8);
	width: 100%;
}





.grijs {background-color:#d9cedb} /*#eee9e6;*/
.grey .container {  
   }
.grey .container-calendar {
    gap: 0px;
    padding: 80px 20px;
}

.white{
	background-color:#fff;
	width:100%;
}
.white .container {    gap: 0px;
    padding: 60px 20px 20px;}


/* Container stijl */
.container-tekstblokken {
	padding:40px 0;
    display: flex; /* Gebruik flexbox */
    flex-wrap: wrap; /* Zorg ervoor dat de blokken op een nieuwe regel komen als er geen ruimte is */
    gap: 20px; /* Ruimte tussen de blokken */
       width: 80%;
    max-width: 1080px;
    margin: auto;
    position: relative;
}

/* Stijl voor de tekstblokken */
.tekstblok {
    flex: 1 1 calc(33% - 20px); /* Elk blok neemt 50% van de breedte van de container in min de gap */
    background-color: #fff; /* Achtergrondkleur (optie) */
    padding: 20px; /* Padding binnen elk blok */
   box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.14);
 
}
.tekstblok h3 {
	    font-size: 22px;
    background-color: #0b72af;
    padding: 15px;
    color: #fff;
}

/* Container met een lichtgrijze achtergrond en blokken links, rechts */

.container-links-rechts {
    transition: max-height 0.3s ease;
    overflow: hidden; /* Verberg content als de max-height is bereikt */
}

.container-links-rechts.collapsed {
    max-height: 60px;
}


.container-links-rechts {
    width: 80%;
    max-width: 1080px;
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Ruimte tussen de rijen */
    margin: 0 auto; /* Centreer de container */
}

.container-links-rechts .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Zorgt ervoor dat de items aan de bovenkant zijn uitgelijnd */
    gap: 40px; /* Ruimte tussen de blokken */
}

.container-links-rechts .block {
    flex: 1; /* Laat elk blok evenveel ruimte innemen */
    display: flex;
    flex-direction: column; /* Zorgt ervoor dat de inhoud onder elkaar staat */
    justify-content: flex-start; /* Zorgt ervoor dat de inhoud bovenaan begint */
    box-shadow: inherit;
    padding: 10px; /* Optionele padding binnen de blokken */
	background-color:transparent;
}

.text-left, .text-right {
    text-align: left; /* Uitlijning van de tekst naar links */
}

.image-right img, .image-left img {
       max-width: 100%;
    height: auto;
    object-fit: cover; /* Zorgt ervoor dat de afbeelding binnen de afmetingen past */
   
}

.image-left {
    order: -1; /* Plaatst de afbeelding links */
}

.image-right {
    text-align: left; /* Zorgt ervoor dat de tekst aan de linkerkant wordt uitgelijnd */
}

.text-right {
    text-align: left; /* Zorgt ervoor dat de tekst aan de linkerkant wordt uitgelijnd */
}

/* Extra marges voor paragrafen en koppen voor beter leesbaarheid */
p, h2 {
    margin: 5px 0; /* Ruimte tussen de elementen */
}






/* Container voor de footer */
.footer-container {
	border-top: 15px solid;
    border-image: linear-gradient(to right, #d9cedb 0%, #8e3e9d 33.33%, #7eaec4 33.33%, #2895ce 66.66%, #cdd392 66.66%, #c7d72e 100%) 1;
  background: linear-gradient(to right, #012a5c, #023b7e, #001f3f);

    padding: 20px; /* Padding rondom de container */
    color: white; /* Tekstkleur */
}

/* Flex-container voor de inhoud */
.footer-content {
    display: flex; /* Gebruik flexbox om de blokken naast elkaar te plaatsen */
    justify-content: space-between; /* Zorgt voor ruimte tussen de blokken */
    max-width: 1400px; /* Maximale breedte van de container */
    margin: 0 auto; /* Centreer de container */
    gap: 20px; /* Voeg ruimte toe tussen de blokken */
}

/* Styling voor elk blok */
.footer-block {
    flex: 1; /* Laat de blokken evenveel ruimte innemen */
    padding: 10px; /* Padding binnen elk blok */
    /* Optionele achtergrondkleur voor elk blok */
    border-radius: 5px; /* Optionele afgeronde hoeken */
	color:#fff;
}

.footer-block h3 {
    margin-top: 0; /* Verwijder de standaard marge boven de kop */
	color:#fff;
}

.footer-block p {
    margin: 5px 0; /* Stel marges voor paragrafen in */
	color:#fff;
}

.footer-block p a, .footer-block a {color:#fff;}
.footer-block p a:hover, .footer-block a:hover {color:#c7d72e;}
.footer-block ul {
    list-style: disc;       /* Zorgt dat de bullets zichtbaar zijn */
    padding-left: 20px;     /* Ruimte voor de bullets */
}

.footer-block ul li {
    color: #ffffff;         /* Witte tekst */
}

/* Witte bullets */
.footer-block ul li::marker {
    color: #ffffff;
}

.footer-block table {
    border-collapse: collapse; /* Geen dubbele lijnen tussen cellen */
}

.footer-block td {
    padding: 5px 10px;         /* Ruimte tussen icoon en tekst */
    vertical-align: middle;    /* Verticaal centreren van icoon en tekst */
}

.footer-block a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.footer-block a img {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

/* maatwerk isotope*/

#options {
padding-bottom:30px;
text-align:center;
}

#options button {
margin: 0 10px 15px 0px;
    font-size: 16px;
}

#options button:hover {
text-decoration:none;
border-bottom:solid 1px #807b75;
}


/* Actieve/gekozen knop */
#options button.is-checked {
  background-color: #c7d72e; /* zelfde als hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border-bottom: solid 1px #aca49e; /* behoud jouw bestaande regel */
}

/* Binnenlijntje in actieve toestand */
#options button.is-checked::before {
  border-color: #fff; /* zelfde stijl als hover */
}

.grid-sizer {
    width: 19%; /* blijft hetzelfde */
}

.gutter-sizer {
    width: 1%; /* blijft hetzelfde */
}

.list_category_item, .project {
    float: left;
	width:19%;
     margin-bottom: 30px;
    text-align: center;
    text-decoration: none;
    color: #000;
    background: #bfd7e2;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   
    overflow: hidden;
}
.grid {
 
}

.list_category_item, .project {
    
  
}



.project {
width:100%;
margin-bottom:10px;
}

.project img {
width:100%;
height:auto;
display:block;
}

.list_category_item .label, .project .label {
position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
        background-color: #2895ce;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    margin: 0;
    font-weight: bold;
    text-align: center;

}

.list_category_item:hover .label, .project:hover .label {
background-color:#aca49e;
}


.locatie-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* ruimte tussen blokken */
	padding:25px;
}
.locatie-blok .button {
  display: block;
  width: 100%;               /* knop over de hele breedte */
  text-align: center;
  padding: 10px;
  background-color: #0077b5;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
.locatie-blok img {    width: 100%;
    max-height: 300px !important;
    max-width: 300px !important;}
.locatie-blok {
  flex: 1 1 calc(33.333% - 20px);
  box-sizing: border-box;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  border: solid 9px #bfd7e2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  display: flex;             /* FLEX toevoegen */
  flex-direction: column;    /* alles onder elkaar */
}
.locatie-blok .bottom-wrapper {
  margin-top: auto;          /* duwt de knop naar beneden */
}

/* Spacing binnen elk locatie-blok */
.locatie-blok p {
  margin: 0;   
	padding: 0;
}

.locatie-blok h2 {
  margin: 15px 0 8px 0;  
	padding-bottom:5px;
}
.locatie-blok h3 {
  margin: 15px 0 8px 0;  
	padding-bottom:5px;
}

.locatie-blok button {
  margin: 10px 0;       
}

.locatie-blok #tags {
  margin-bottom: 10px;  
}

/* Responsive onder elkaar op mobiel */
@media (max-width: 768px) {
  .locatie-blok {
    flex: 1 1 100%;
  }
}



#project-desc {
float:left;
width:40%;
padding-right:30px;
}

#project-desc #tags {
margin-bottom:20px;
}

#project-desc #tags span {
position:relative;
display:inline-block;
padding:8px 9px 7px 3px;
color:#FFFFFF;
background-color: #CCCCCC;
font-size:13px;
line-height:13px;
text-transform:uppercase;
-webkit-border-radius: 0 7px 7px 0;
-moz-border-radius:  0 7px 7px 0;
-khtml-border-radius:  0 7px 7px 0;
border-radius:  0 7px 7px 0;
margin-bottom:10px;
margin-left:14px;
margin-right:7px;
}

#project-desc #tags span:after {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(204, 204, 204, 0);
border-right-color: #CCCCCC;
border-width: 13px;
margin-top: -13px;
}

#project-desc #tags span::before {
content:"\2022";
border-right: solid 2px #FFFFFF;
padding-right: 8px;
margin-right: 8px;
font-weight:bold;
}

#project-images {
float:left;
width:60%;
margin-bottom:30px;
}

#project-slider {
border: solid 5px #FFFFFF;
}

#project-slider img {
border:none;
}

#project-slider .flex-direction-nav .flex-prev {
    left: -5px !important;
	background-color:#524e49;
	opacity: 1;
text-align:center;
}

#project-slider .flex-direction-nav .flex-next {
right: -5px !important;
	background-color:#524e49;
	opacity: 1;
text-align:center;
}

#project-slider .flex-direction-nav a::before {
	color:#FFFFFF;
	text-shadow:none;
	font-size:36px;
	line-height:40px;
	opacity:0.7;
}

#project-slider .flex-direction-nav a:hover::before {
opacity:1;
}

#project-home {
max-width:1240px;
margin:0 auto;
padding:0 10px 20px 10px;
}

#projectwrapper h5 {
text-align:center;
}

#project-home img {
border:solid 10px #FFFFFF;
}

.project .label {
left:0;
}

/* Footer wrapper */
.copyright-wrapper {
  background-color: #ccc;
  color: #000;
  padding: 10px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* Container voor max-width en centreren */
.copyright-wrapper .container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Alleen copyright-tekst in flex */
.copyright-txt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 5px; /* ruimte tussen copyright en design-by */
}

.copyright-txt a {
  color: #000;
  text-decoration: none;
}

.copyright-txt a:hover {
  text-decoration: underline;
}

/* Design-by regel onder copyright */
.design-by {
  font-size: 13px;
  opacity: 0.9;
  display: block; /* belangrijk: zorgt dat het onder de copyright staat */
 
}

.design-by a {
  color: #000;
  text-decoration: none;
}

.design-by a:hover {
  text-decoration: underline;
}