/*** HUISSTIJL ***/
@import url(styleVars.css);

* {  
  box-sizing: border-box;
  font-family: 'Poppins', 'sans-serif';
}

html {
  overflow-x: hidden;
}

body {
  --link-color: var(--prim-color-01);
  --button-color: var(--text-color-01);
  --button-bg-color: var(--prim-color-01);
  --button-bg-nl-color: var(--prim-color-01);
  --button-bg-en-color: var(--sec-color-02);
  --content-padding-left: 300px;
  --content-max-width: min(calc(100vw - 300px), 1035px);
  --slogan-max-height: min(calc(100vh * 2 / 3), 680px);
  --font-size-2: 54px;
  --font-size-3: 36px;
  --font-size-4: 18px;
  --maatje-form-color: var(--text-color-01);
  --maatje-form-color-submit: var(--text-color-01);
  --maatje-form-button-color: var(--prim-color-01);
  --maatje-form-button-bg-color: var(--sec-color-07);
  --maatje-form-bg-color: var(--prim-color-01);
  --maatje-form-bg-submit: var(--sec-color-02);
  margin: 0;
  padding: 0;
  display: grid;
  grid-row-gap: 102px;
  color: var(--text-color-01);
  cursor: url(mcursor.svg) 12 -3, auto;
}

.hidden {
  display: none;
}

.container {
  display: grid;
  grid-template-rows: auto;
  grid-gap: 102px;
  padding: 0 0 0 var(--content-padding-left);
  max-width: 1299px;
}

.container.nieuwsitem {
  color: var(--text-color-02);
}

.container > div {
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

.container #inter {
  color: var(--text-color-02);
}

/*** TITELS ***/

h2 { 
  font-size: var(--font-size-2);
  margin: 0;
  line-height: 51px;
}

h3 { 
  font-size: var(--font-size-3);
  line-height: 42px;
  margin: 9px 0;
}

h3 > a {
  color: inherit;
}

h4 {
  font-size: var(--font-size-4);
  margin: 0;
}

/*** DETAILS SUMMARY ***/
summary {
  font-size: var(--font-size-4);
  font-weight: bold;
  cursor: pointer;
  position: relative;
  padding: 0 0 0 21px;
  list-style: none;
  margin: 18px 0 0 0;
  cursor: url(handcursor.svg), auto;
  transition: margin 750ms ease-out;
}
details[open] summary {
  margin: 18px 0;
}

details p {
  font-size: 0.51rem;
  transition: font-size 750ms ease-out;
}

details[open] p {
  font-size: inherit;
}
summary::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 0;
}
details[open] summary::before {
  content: '-';
}

/*** BUTTONS ***/
a {
  text-decoration: none;
  color: var(--link-color);
  cursor: url(handcursor.svg), auto;
}

button, 
input[type="button"],
input[type="submit"],
a.button {
  display: inline-block;
  color: var(--button-color);
  border-radius: 18px;
  height: 36px;
  line-height: 36px;
  width: 210px;
  font-size: 18px;
  font-weight: bold;
  background-size: 18px;
  background-repeat: no-repeat;
  background-color: var(--button-bg-color);
  border: 1px solid transparent;
  text-align: left;
  padding: 0 15px;
  margin: 12px 0;
}

a:hover {
  color: var(--prim-color-02) !important;
}

a.button.lang, 
a.button ~ a.button {
  margin-left: 12px;
}

#inter br + a.button {
  margin-left: 0;
}

a.button.lang {
  display: none;
  width: 36px;
  text-align: center;
  float: right;
  padding: 0;
}

a.button.lang.nl {
  background-color: var(--button-bg-nl-color);
}

a.button.lang.en {
  background-color: var(--button-bg-en-color);
}

a.button.info {
  color: var(--sec-color-02);
  background-color: var(--sec-color-07);
}

a.button.aanmelden {
  position: absolute;
  bottom: 30px;
  right: 30px;
  color: var(--sec-color-02);
  background-color: var(--sec-color-07);
}

a.button.doen {
  text-align: center;
}

a.button.doneren{
  background-color: var(--sec-color-02);
  border: 1px var(--sec-color-02);
  text-align: left;
  padding: 0 0 0 30px;
  background-image: url(down-arrow.svg);
  background-position: right 15px bottom 50%;
}

a.button.meer{
  background-image: url(arrow_blue.svg);
  background-position: right 15px bottom 50%;
}

/*** SLOGAN ***/
.slogan p {
  font-family: 'Nanum Pen Script', Regular;
  font-size: 65px;
  line-height: 51px;
  margin: 0;

}
/*** HEADER ***/
#header {
  display: grid;
  grid-template-columns: 260px auto;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0 0 0 var(--content-padding-left);
  max-width: 1304px;
  background: linear-gradient(to bottom, #fff 54px, transparent 60px) no-repeat;
}
img {
  max-width: 100%;
}
#header img {
  background-color: transparent;
}

/*** ZOEKEN ***/
#header form {
  min-width: 103px;
}
#header form input {
  width: 75px;
  border: inset 1px var(--sec-color-04);
  color: var(--sec-color-02);
  font-size: var(--font-size-04);
  padding: 0 .5rem;
  border-radius: 30px;
  --link-color: var(--sec-color-02);
  float: left;
}

#header form input:focus {
  width: min(240px,50vw);
  position: absolute;
  z-index: 10;
  right: 30px;
  outline: 1px solid var(--prim-color-01);
  border: none;
}

#header form button {
  width: 21px;
  height: 27px;
  background-color: transparent;
  background-image: url(magnifying-glass.svg);
  background-position: right .2rem;
  background-repeat: no-repeat;
  background-size: 18px;
  float: right;
  padding: 0;
  margin: 0 .2rem;
  cursor: url(handcursor.svg), auto;
}

#nav {
  background-color: var(--sec-color-07);
}
#header img {
  width: 100%;
  transition: width 1s;
}

#header.scroll img {
  width: 50%;
}

#nav {
  margin: 0;
  padding: 10px 5px 0 0;
  display: flex;
  gap: 18px;
  list-style: none;
  justify-content: space-between;
  height: fit-content;
}
#nav li a {
  color: var(--sec-color-02);
  text-decoration: none;
}
#nav li a.active {
  color: var(--link-color);
}
#nav li a:hover {
  color: var(--sec-color-03);
}

/*** INTRO: KINDKAART & NIEUWSINTRO ***/
.container .intro {
  display: grid;
  grid-template-columns: 603px 1fr;
  grid-column-gap: 0;
  margin: -78px 0 0 0;
}

.container .intro .tekst {
  max-width: 603px;
  padding: 30px;
  border-radius: 12px 12px;
  margin: 0;
  z-index: 1;
  box-shadow: var(--box-shadow-01);
  min-height: 240px;
}

.container .intro .beeld img {
  position: absolute;
  right: 0;
}

.nieuwsitem .intro .beeld img {
  left: auto;
  right: 0;
  width: 408px;
}

.container #kindKaart .tekst {
  background-color: var(--sec-color-05);
  min-height: 630px;
}

.container #kindKaart .tekst a.button {
  text-align: center;
}

.container #nieuwsIntro .tekst {
  background-color: var(--prim-color-01);
}

.container #nieuwsIntro .button.nl {
  color: var(--prim-color-01);
  background-color: var(--sec-color-07);
}

.container #nieuwsIntro .tekst p {
  margin-right: 111px;
}

.container .intro ul {
  margin: 18px 0;
  padding: 0 18px; 
}

.container .intro .slogan,
.container .intro .beeld {
  margin: -114px 0 0 -342px;
}
.container .intro .slogan { 
  display: grid;
  justify-content: end; 
  padding: 0 36px;
}

#kindKaart .slogan {
  height: var(--slogan-max-height);
  background-image: url(home01.webp);
  background-color: var(--prim-color-02);
  background-repeat: no-repeat;
}

#inter .tekst { 
  position: relative;
  background-color: var(--sec-color-02);
  color: var(--text-color-01);
  margin: 0 0 30px 0;
  min-height: 240px;
}

#inter .tekst .button.lang.en { 
  color: var(--text-color-02);
  background-color: var(--sec-color-07);
}

#nieuwsIntro .beeld,
#inter .beeld {
  --beeld-height: 309px;
  position: relative;
  background-color: var(--sec-color-05);
  height: var(--beeld-height);
  overflow: clip;
}

#inter > *:not(.intro, .beeld) {
  max-width: min(90vw, 603px);
}

#nieuwsIntro .beeld {
  background-color: var(--sec-color-02);
}

.container .intro .slogan p {
  margin: auto 0;
  max-width: 320px;
}

/*** CIJFERS ***/
#cijfers {
  display: grid;
  grid-template-columns: repeat(3, min(calc((90vw - 60px) / 3),309px));
  grid-gap: 30px;
  overflow-x: auto;
}

#cijfers > div {
  padding: 24px;
  border-radius: 30px;
  box-shadow: var(--box-shadow-01);
  display: grid;
  grid-template-rows: 108px auto;
  align-items: end;
  margin: 0 0 18px 0;
}

#cijfers > div:nth-child(1) {
  background-color: var(--prim-color-02);
}

#cijfers > div:nth-child(2) {
  background-color: var(--prim-color-01);
}                                  

#cijfers > div:nth-child(3) {
  background-color: var(--sec-color-02);
} 

#cijfers h2 {
  font-size: 108px;
  line-height: 108px;
}

#cijfers p {
  font-size: 30px;
  margin: 0;
}

#cijfers .sterren {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  justify-content: space-between;
}

#cijfers .sterren img {
  width: min(39px, calc(20% - 12px));
  margin: 30px 6px;
  padding: 0;
}

/*** OVER VITALIS ***/
#overVitalis{
  display: grid;
  grid-template-columns: 48% 48%;
  grid-column-gap: 4%;
  color: var(--text-color-02);
}

#overVitalis .slogan {
  margin: 0;
  padding: 36px;
  height: 403px;
  vertical-align: bottom;
  display: table-cell;
  color: var(--text-color-01);
  background-color: var(--sec-color-02);
  background-image: url(home02.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 438px;
}

#overVitalis > div:nth-child(1){
  background-color: var(--sec-color-03);
  height: 602px;
  margin-top: 300px;
  background-image: url(home03.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#overVitalis h2 {
  margin: 80px 0 0 -118px;
}

/*** VERHALEN***/
.verhalen {
  display: grid;
  grid-template-rows: auto;
  max-width: var(--content-max-width);
}

.verhalen h2 {
  color: var(--text-color-02);
  margin: 0 0 27px 0;
}

div.verhaal {
  display: grid;
  width: 100%;
  grid-template-columns: 40% auto;
  margin: 0 0 36px 0;
}

div.verhaal:nth-of-type(even):not(#laatstenieuws) {
  grid-template-columns: auto 40%;
}

div.verhaal .tekst {
  margin: 50px 0 0 0;
  display: grid;
  grid-template-rows: min-content auto 51px;
  height: 570px;
  border-radius: 12px 12px;
  z-index: 1;
  padding: 27px;
  box-shadow: var(--box-shadow-01);
}

div.verhaal .beeldje{
  margin: 0 0 0 -150px;
  height: 500px;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

div.verhaal:nth-of-type(even):not(#laatstenieuws) .beeldje {
  margin: 0 -150px 0 0;
  transform: scaleX(-1);

}

/*** VERHALEN MAATJES ***/
#verhalenMaatjes div.verhaal:nth-of-type(3n+1) .tekst{
  background-color: var(--sec-color-05);
}

#verhalenMaatjes div.verhaal:nth-of-type(3n+2) .tekst{
  background-color: var(--prim-color-02);
}

#laatstenieuws.verhaal .tekst, 
#verhalenMaatjes div.verhaal:nth-of-type(3n+3) .tekst{
  background-color: var(--prim-color-01);
}

#verhalenMaatjes div.verhaal:nth-of-type(3n+1) .beeldje {
  background-color: var(--prim-color-01);
}

#verhalenMaatjes div.verhaal:nth-of-type(3n+2) .beeldje {
  background-color: var(--sec-color-02);
}

#laatstenieuws.verhaal .beeldje, 
#verhalenMaatjes div.verhaal:nth-of-type(3n+3) .beeldje {
  background-color: var(--sec-color-03);
}

#laatstenieuws.verhaal .beeldje {
  background-size: cover;
}

#laatstenieuws.verhaal a.button.meer,
#verhalenMaatjes div.verhaal:nth-of-type(3) a.button.meer{
  background-color: var(--sec-color-02);
}

/*** PAGINA KLEUR OPTIES ***/
body.KN01 #inter .tekst {
}

body.VM01 #inter .beeld {
  background-color: var(--prim-color-01);
}

body.VM02 #inter .beeld {
  background-color: var(--sec-color-02);
}

body.VM03 #inter .beeld {
  background-color: var(--sec-color-03);
}

body.VM04 #inter .beeld {
  background-color: var(--sec-color-02);
}

body.VM01 #inter .tekst {
  background-color: var(--sec-color-05);
}

body.VM02 #inter .tekst {
  background-color: var(--prim-color-02);
}

body.VM03 #inter .tekst {
  --button-bg-nl-color: var(--sec-color-03);
  background-color: var(--prim-color-01);
}

body.VM04 #inter .tekst {
  --button-bg-color: var(--sec-color-02);
  --link-color: var(--text-color-02);
  background-color: var(--prim-color-01);
}

body.VM04 #inter .button.nl {
  color: var(--prim-color-01);
  background-color: var(--sec-color-07);
}

body.VM04 #inter .button.lang.en { 
  color: var(--sec-color-07);
  background-color: var(--text-color-02);
}

body.VK01 #inter .beeld {
  background-color: var(--prim-color-02);
}

body.VK01 #inter .tekst {
  background-color: var(--sec-color-05);
}

body.VK02 #inter .beeld {
  background-color: var(--sec-color-03);
}

body.VK02 #inter .tekst {
  background-color: var(--prim-color-01);
}

/*** VERHALEN KINDEREN ***/
#verhalenKinderen div.verhaal:nth-of-type(odd) .tekst{
  background-color: var(--sec-color-05);
}

#verhalenKinderen div.verhaal:nth-of-type(even) .tekst{
  background-color: var(--prim-color-01);
}

#verhalenKinderen div.verhaal:nth-of-type(odd) .beeldje{
  background-color: var(--prim-color-02);
}

#verhalenKinderen div.verhaal:nth-of-type(even) .beeldje {
  background-color: var(--sec-color-06);
}

#verhalenKinderen div.verhaal:nth-of-type(even) a.button.meer{
  background-color: var(--sec-color-02);
}

/*** DONATIES ***/
#donaties{
  background-color: var(--sec-color-02);
  border-radius: 12px 12px;
  margin: 0 20px;
  padding: 0 0 81px var(--content-padding-left);
}  

#donaties > div {
  display: grid;
  grid-template-columns: auto 40%; 
  grid-column-gap: 4%;
  max-width: calc(var(--content-max-width) - 40px); 
}  

#donaties .slogan {
  background-color: var(--prim-color-01);
  height: var(--slogan-max-height);
  max-width: 497px;
  margin: -84px 0 0 0;
  box-shadow: var(--box-shadow-01);
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#donaties .tekst {
  padding: 27px;
  margin: 0;
  max-width: 399px;
}

#donaties .tekst h2{ 
  font-size: 72px;
  margin: 0;
}

#donaties .doneren {
  background-color: var(--prim-color-01);
}

/*** PARTNERS ***/
#partners {
  padding: 0 0 0 var(--content-padding-left);
  color: var(--sec-color-02);
}

#partners ul {
  display: flex;
  align-items: center;
  padding: 0;
  width: calc(100vw - 60px);
  overflow-x: hidden;
  margin-left: calc(20px - var(--content-padding-left));
  list-style: none;
}

#partners ul.left:hover::before,
#partners ul:hover::after {
  position: absolute;
  background-color: var(--prim-color-01);
  color: var(--sec-color-07);
  font-size: 12em;
  z-index: 10;
  opacity: .6;
  width: 150px;
}
#partners ul.left:hover::before {
  content: '<';
}

#partners ul:hover::after {
  right: 20px;
  content: '>';
  text-align: right;
}

#partners ul li {
  flex: 0 1 192px;
  padding: 21px;
  min-width: 192px;
}

#partners ul li img {
  max-width: 150px;
}

#partners a.button {
  margin: 0 auto;
  text-align: center;
}

/*** FOOTER ***/
#footer{
  background-color: var(--prim-color-01); 
  border-radius: 12px 12px 0px 0px;
  margin: 0 20px;
  padding: 30px var(--content-padding-left) 15px var(--content-padding-left);
  display: grid;
  grid-template-columns: 48% 48%; 
  grid-column-gap: 4%;
  color: var(--text-color-01);
  color: var(--text-color-01);
  --link-color: var(--text-color-01);
}
#footer > div {
  padding: 0 15px;
  margin: 0;
}

#footer .links ul {
  list-style: none;
  padding: initial;
}

#footer .links img {
  width: 45px;
  margin: 0 21px 0 0;
}

/*** FORMULIER ***/

::placeholder {
  color: var(--link-color);
  opacity: 0.7;
}

[disabled]::placeholder {
  color: #555;
}

form {
  margin: 0;
  clear: both;
}

form fieldset {
  border: none;
}

form fieldset legend { 
  font-size: var(--font-size-2);
  font-weight: bold;
  margin: 0;
}

form .entry { 
  margin: 15px 0 0 0;
} max-width

form .entry input[disabled] {
  background-color: #FFFFFFAA;
}

form .entry select, 
form .entry textarea, 
form .entry input:not([type]), 
form .entry input[type="email"], 
form .entry input[type="tel"], 
form .entry input[type="text"]{
  border-radius: 30px 30px;
  height: 35px;
  border: 1px solid var(--sec-color-07); 
  padding-left: 12px;
  width: 100%;
  margin: 0;
}

form td select, 
form td textarea, 
form td input:not([type]), 
form td input[type="text"]{
  border-radius: 12px 12px;
  height: auto;
  border: 1px solid var(--sec-color-07); 
  padding-left: 3px;
  width: 100%;
  margin: 0;
}


form .entry textarea {
  height: 105px;
  padding: 7px 21px;
}

form input[type="button"],
form input[type="submit"] {
  float: right;
  text-align: center;
}

.gui-switch {
  --thumb-size: 2rem;
  --thumb: hsl(0, 0%, 100%);
  --thumb-highlight: hsla(0, 0%, 0%, 0.25);
  --track-size: calc(var(--thumb-size) * 2);
  --track-padding: 2px;
  --track-inactive: #FFFFFF55; 
  --track-active: hsl(0deg 0% 100%);
  --thumb-color-highlight: var(--thumb-highlight);
  --track-color-inactive: var(--track-inactive);
  --track-color-active: var(--track-active);
  --thumb-color-active: var(--sec-color-05); 
  --thumb-color-inactive: var(--sec-color-04); 
  --isLTR: 1;
  display: flex;
  margin: 0;
  align-items: center;
  gap: 2ch;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

}
.gui-switch > input{ 
  --thumb-position: 0%;
  padding: var(--track-padding);
  background: var(--track-color-inactive);
  inline-size: var(--track-size);
  block-size: var(--thumb-size);
  border-radius: var(--track-size);
  appearance: none;
  pointer-events: none;
  touch-action: pan-y;
  border: none;
  outline-offset: 5px;
  box-sizing: content-box;
  flex-shrink: 0;
  display: grid;
  align-items: center;
  grid: [track] 1fr/[track] 1fr;
  transition: background-color .25s ease; 
  -webkit-appearance: none;
}
.gui-switch > input::before {
  --highlight-size: 0;
  content: "";
  cursor: pointer;
  pointer-events: auto;
  grid-area: track;
  inline-size: var(--thumb-size);
  block-size: var(--thumb-size);
  background: var(--thumb-color-inactive);
  box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
  border-radius: 50%;
  transform: translateX(var(--thumb-position));
}
.gui-switch > input:checked {
  background: var(--track-color-active);
  --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
}
.gui-switch > input:checked::before {
  background: var(--thumb-color-active);
}

/*** NIEUWS ***/
/*** LIJST ***/
.lijst {
  display: flex;
  justify-content: space-between;
  max-width: var(--content-max-width);
}

.lijst > div {
  display: grid;
  grid-template-rows: 170px 150px auto 70px;
  height: 630px;
  width: 321px;
  min-width: 321px;
  box-shadow:  var(--box-shadow-01);
  padding: 0;
  color: var(--sec-color-02);
  margin: 0 0 30px 0;
}

.lijst > div .header {
  background-size: cover;
  background-position: center 33%;
  background-repeat: no-repeat;
  margin: 0 0 20px;
}

.lijst > div:nth-child(1) .header {
  background-color: var(--sec-color-02);
}

.lijst > div:nth-child(2) .header {
  background-color: var(--prim-color-02);
}

.lijst > div:nth-child(3) .header {
  background-color: var(--prim-color-01);
}

.lijst h3,
.lijst p {
  margin: 0 20px;
  overflow: clip;
  text-overflow: ellipsis;
}
.lijst H3 {
  line-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.lijst a {
  margin: 0 auto;
}


/*** ZOEKEN ***/
.gallery {
  display: flex;
  overflow-x: auto;
  width: min(1000px, 100vw);
}

.gallery figure {
  margin: 1rem;
  box-shadow: var(--box-shadow-01);
  display: flex;
  align-items: center;
}

.gallery a img {
  max-width: 150px;
  margin: 0;
}

#inter .body table {
  width: 100%;
}

#inter .body.zoeken table th:nth-child(1)  {
  text-align: left;
}

#inter .body.zoeken table th:nth-child(2)  {
  width: 120px;
  text-align: right;
}

#inter .body.zoeken table td:nth-child(2)  {
  text-align: right;
}


#laatstenieuws.verhaal {
  max-width: var(--content-max-width);
  margin: 0;
}

#map-canvas {
  min-width: 50vw;
  min-height: 33vh;
}

#medewerkers {
  display: flex;
  width: 1035px;
  overflow-x: auto;
  flex-direction: row;
  flex-wrap: wrap;
}

#medewerkers figure {
  flex: 0 0 min(80vw, 321px);
  box-shadow: var(--box-shadow-01);
  margin: 24px min(5vw, 36px) 24px 0;
  padding: 318px 0 0 0;
  min-height: 630px;
  height: auto;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-basis: calc(33.3% - 36px);
}

#medewerkers figure figcaption {
  padding: 12px;
  background-color: #FFF;
}
#medewerkers figure figcaption h5 {
  margin: 5px 0;
}

#medewerkers figure figcaption p:first-of-type {
  font-style: italic;
}

#medewerkers figure figcaption p {
  margin: 3px 0 0 0;
  font-size: smaller;
}

#medewerkers footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
#medewerkers a {
  display: inline-block;
  width: 27px;
  height: 27px;
  line-height: 27px;
  padding: 0 0 0 30px;
  background-size: contain;
  flex: 0 0 27px;
  color: var(--prim-color-01);
  background-repeat: no-repeat;
  font-size: smaller;
  white-space: nowrap;
}

#medewerkers a.email {
  background-image: url(emailIcon.svg);
}

#medewerkers a.phone {
  background-image: url(phoneIcon.svg);
}

body.oproepen:has(#verhalenKinderen) #inter {
  margin-bottom: -102px;
}

/*** TYPE MAATJE ***/
body.TM01 #inter form {
  color: var(--maatje-form-color);
  background-color: var(--maatje-form-bg-color);
  border-radius: 12px 12px;
  box-shadow: var(--box-shadow-01);
  padding: 0;
  margin: 0 0 15px 0;
}

body.TM01 #inter form legend {
  font-size: 16px;
}

body.TM01 #inter form #colorWheel {
  height: 120px;
  width: 120px;
  cursor: pointer;
  border-radius: 60px;
  box-shadow: var(--box-shadow-01);
}

body.TM01 #inter form #colorWheel:hover {
  filter: brightness(1.1); /* Subtle brightness increase on hover */
} 

body.TM01 #inter form #colorMessage {
  margin-top: 10px;
}

body.TM01 #inter form input[type="button"] {
  color: var(--maatje-form-button-color);
  background-color: var(--maatje-form-button-bg-color);
}

body.TM01 #inter form .previousnext input {
  float: left;
}

body.TM01 #inter form .previousnext input:last-child {
  float: right;
}

body.TM01 #inter form input[type="submit"] {
  display: none;
  color: var(--maatje-form-color-submit);
  background-color: var(--maatje-form-bg-submit);
}

body.TM01 #inter form input[type="submit"].show {
  display: inline;
}

/*** RESPONSIVE ***/
@media (max-width: 1536px) {
  #kindKaart .slogan {
    background-size: cover;
  }
}

@media (max-width: 1280px) {
  body {
    --content-padding-left: 10vw;
    --content-max-width: calc(100vw - 15px);
  }
  #nav {
    gap: min(3%, 26px);
    font-size: smaller;
  }

  #cijfers {
    grid-template-columns: repeat(3, min(81vw, 315px));
  }

  #kindKaart .slogan {
    position: absolute;
    right: 0;
    min-height: 396px;
    width: calc(100vw - var(--content-padding-left) - 260px);
    padding: 0;
    justify-items: end;
  }

}

@media (max-width: 768px) 
{
  a.button.lang {
    display: none;
  }
  /*** VARS ***/
  body {
    --content-padding-left: 5px;
    --content-max-width: 100vw;
    --font-size-2: 36px;
    --font-size-3: 27px;
    grid-gap: 51px;
  }

  /*** HEADER ***/
  #header {
    justify-content: space-between;
    background-color: var(--sec-color-07);
  }

  #header img {
    height: 63px;
    width: auto;
    margin: 0;
  }

  #nav {
    display: block;
    padding: 0 12px;
    margin: 0;
  }

  #nav::before {
    display: block;
    color: var(--sec-color-02);
    content: "\2630";
    font-size: 36px;
    cursor: pointer;
  }

  #nav li {
    display: none;
  }

  #nav.active {
    position: absolute;
    box-shadow: var(--box-shadow-01);
    width: 90vw;
    top: 0;
    right: 0;
    display: block;
    background-color: #FFF;
    padding: 0 12px;
    z-index: 10;
    border-radius: 12px;
    animation: shoMenu 0.5s ease-in;
  }

  #nav.active::before {
    transform: rotate(90deg);
    color: var(--prim-color-01);
    float: right;
  }

  #nav.active li {
    display: block;
    font-size: larger;
    padding: 0;
  }

  #nav.active li a {
    display: inline-block;
    padding: 12px;
    width: 100%;
  }

  #nav.active li form {
    display: none;
  }

  #kindKaart .tekst h2 {
    margin-top: -174px;
  }

  @keyframes shoMenu {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .container {
    padding: 0 0 0 var(--content-padding-left);
    grid-gap: 51px;
    max-width: var(--content-max-width);
  }

  .container > div {
    max-width: calc(var(--content-max-width) - var(--content-padding-left));
  }

  /*** CONTENT ***/
  .container #inter .tekst {
    min-width: 350px;
    margin: 150px 0 0 0;
  }

  .nieuws .container .intro .tekst, 
  .team .container #inter .tekst {
    margin: 30px 0 0 0;
  }

  .container .intro .beeld img {
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    max-height: none;
    height: auto;
  }
  .container.nieuwsitem .beeld img {
    top: -25%;
  }
  /** HOME PAGE **/
  .container .intro {
    position: relative;
    display: block;
    margin: -72px 0 0 0;
  }

  .container .slogan {
    float: left;
  }

  .container .slogan p {
    visibility: hidden;
  }

  a.button:not(.lang,.meer) {
    width: min(162px, calc(50% - 12px));
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: nowrap;
  }

  .container .tekst a.button.more + a.button.more {
    margin: 0 0 0 12px;
  }

  #inter {
    display: block;
  }

  body.oproepen #inter {
    margin-bottom: -15px;
  }

  .container .intro .tekst {
    min-height: 135px;
    margin-top: 90px;
    padding: 15px;
  }

  body #nieuwsIntro .beeld, 
  body #inter.intro .beeld {
    position: absolute;
    top: 0;
    left: -5px;
    z-index: -1;
    margin: 0;
    width: 100vw;
    overflow-y: clip;
    background-color: inherit;
  }

  #inter .body {
    overflow-x: hidden;
  }

  .intro .tekst, 
  #inter .tekst {
    min-height: 135px;
  }

  #kindKaart .slogan {
    top: 120px;
    z-index: -1;
    width: calc(100vw - var(--content-padding-left));
    display: inline-block;
    padding: 0;
    background-size: contain;
    background-position: top;
  }

  .container .intro .slogan p {
    font-size: 42px;
    line-height: 42px;
    margin: 30px auto;
    text-align: center;
  }

  .container #kindKaart .tekst {
    margin: 210px 0 0 0;
    min-height: auto;
  }

  #overVitalis {
    display: block;
  }

  #overVitalis > div:nth-child(1) {
    display: none;
  }

  #overVitalis > div {
    width:100%;
  }

  #overVitalis .slogan {
    height: 180px;
    padding: 18px;
    background-size: 327px;
    background-position: center -38px;
    background-color: inherit;
    width: 100%;
  }

  #overVitalis h2 {
    clear: both;
    margin:0;
  }

  div.verhaal {
    position: relative;
    display: block;
  }

  #verhalenMaatjes, #verhalenKinderen {
    max-width: 100%;
  }

  div.verhaal .tekst {
    margin: 150px 0 0 0;
    height: auto;
  }

  div.verhaal .beeldje {
    position: absolute;
    top: 0;
    left: calc( 0px - var(--content-padding-left));
    width: 100vw;
    margin: 0;
    z-index: -1;
    background-size: contain;
    background-color: transparent !important;
  }

  #verhalenMaatjes div.verhaal:nth-of-type(2) .tekst, 
  #verhalenKinderen div.verhaal:nth-of-type(2) .tekst {
    margin: 150px var(--content-padding-left) 0 calc(0px - var(--content-padding-left));
  }

  #donaties {
    width: var(--content-max-width);
    margin: 0;
  }

  #donaties > div {
    grid-template-columns: 320px auto; 
  }

  #donaties .slogan {
    max-height: 270px;
    margin: -60px 0 0 0;
  }

  #donaties .tekst h2 {
    font-size: 51px;
  }

  #donaties > div {
    grid-template-columns: auto; 
  }

  /*** NIEUWS ***/
  .lijst {
    gap: 36px;
    overflow-x: auto;
  }

  #laatstenieuws .beeldje {
    background-position-y: 50%;
  }
  /*** TEAM ***/

  body .scroll-dots {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    min-width: 30vw;
    margin: 0 auto;
  }

  .scroll-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--sec-color-01);
  }

  .scroll-dot.active {
    width: 7px;
    height: 7px;
    background-color: var(--prim-color-01);
  }

  #medewerkers {
    width: var(--content-max-width);
    flex-wrap: nowrap;
  }

  #medewerkers figure {
    flex-basis: 75vw;
  }

  #partners ul {
    overflow-x: scroll;
  }
  #partners ul::before,
  #partners ul::after {
    display: none;
  }

  #footer {
    display: block;
    margin: 0;
  }

  #footer .links p:has(> a) {
    display: flex;
    justify-content: space-between;
  }
  #footer .links p a img {
    margin: 0;
  }
}