:root {
  --color1: #004b84;
  --color2: #44a12a;
  --color3: #d40036;
  --color4: #f08900;
  --color5: #80a5c2;
  --color6: #a2d095;
  --color7: #ea809b;
  --color8: #f9d099;

  --fontFamily1: urw-din, sans-serif;
  --fontColor1: #000000;
  --fontColor2: #FFFFFF;
  --bodyFontSize: 18px;
  --h1Size: 40px;
  --h2Size: 36px;
  --h3Size: 22px;
  --h5Size: 22px;

  --borderColor1: #ccc;
  --borderRadius1: 75px;
  --borderRadius2: 30px;
  --borderRadius3: 20px;
  --borderRadius4: 10px;

  --maxWidth: 1600px;
  --textSmall: 650px;
  --space5: 5px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space25: 25px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --space200: 200px;
  --leftFr: 1fr;
  --rightFr: 1fr;

  text-underline-offset: 0.3em;
}

@view-transition {
  navigation: auto;
}

body {font-family: var(--fontFamily1); font-weight: 300; color: var(--fontColor1); font-size: var(--bodyFontSize); line-height: 1.6em; background-color: #FFF; overflow-x: hidden; position: relative;}

.art-Sheet {max-width: var(--maxWidth);}
.art-Sheet .art-content .breadcrumbs {display: none;}
.art-Sheet:has(.vak) {max-width: none; padding: 0 !important;}
.art-sidebar1 {display: none !important;}


textarea, input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"] {border-radius: var(--borderRadius4); font-size: var(--bodyFontSize); font-weight: 300; color: var(--fontColor1); padding: var(--space15); border: none; background-color: #f4f4f4;}
textarea {max-width: 100%; min-width: 100%;}
input.verplicht, textarea.verplicht{background-position: right 20px top 10px; background-size: 6px;}

.uploadHolder {border-radius: var(--borderRadius4); border: none; padding: 0; overflow: hidden; height: fit-content;}
.uploadHolder div:has(input) {width: 100%;}
.uploadHolder input {padding: var(--space20) var(--space25); box-sizing: border-box; background-color: #f4f4f4; max-width: unset; width: 100%; min-height: 55px;}
.uploadHolder ul {padding: var(--space20) var(--space25);}


.customForm .widget {display: grid; grid-template-columns: 1fr 1fr; gap:var(--space5) var(--space20); align-items: end;}
.customForm .widget .textarea {grid-column:  1 / -1;}
.customForm .widget table:has(.opmaak) {grid-column: 1 / -1; padding-top: var(--space15);}
.customForm .widget .opmaak {font-weight: 600;}
.customForm .widget .formulierVersturen {width: fit-content; height: fit-content; margin-left: auto; grid-column: 2/3;} 


h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,
h2, .h2, h3, .h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-family: var(--fontFamily1); color: var(--fontColor1); margin: 0 0 0.5em 0; line-height: 1.15em; text-wrap-style: balance;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover  {font-size: var(--h1Size); font-weight: 600;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover  {font-size: var(--h2Size); font-weight: 600;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover  {font-size: var(--h3Size); font-weight: 400;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover  {font-size: var(--h5Size);}

h1 + div, h2 + div, h3 + div, h4 + div, h5 + div, h6 + div, p + div {margin-top: 1em;}

div + p {margin-top: 1em;}


a.knop, .knop, .button, a.button, button.knop {--_buttonColor: var(--color1); background-color: var(--_buttonColor); --_buttonHoverColor: var(--color5); 
  font-size: var(--bodyFontSize); padding: var(--space15) var(--space30); border-radius: var(--borderRadius1); color: var(--fontColor2) !important; border: 2px solid transparent; margin-bottom: var(--space5); transition: all 0.3s ease;}

a.knop:hover, .knop:hover, .button:hover, a.button:hover, button.knop:hover {background-color: var(--_buttonHoverColor); color: var(--_buttonColor) !important; text-decoration: underline;}

a.knop.color1, .knop.color1, .button.color1, a.button.color1, button.color1 {--_buttonColor: var(--color1); --_buttonHoverColor: var(--color5);}
a.knop.color2, .knop.color2, .button.color2, a.button.color2, button.color2 {--_buttonColor: var(--color2); --_buttonHoverColor: var(--color6);}
a.knop.color3, .knop.color3, .button.color3, a.button.color3, button.color3 {--_buttonColor: var(--color3); --_buttonHoverColor: var(--color7);}
a.knop.color4, .knop.color4, .button.color4, a.button.color4, button.color4 {--_buttonColor: var(--color4); --_buttonHoverColor: var(--color8);}
a.knop.color5, .knop.color5, .button.color5, a.button.color5, button.color5 {--_buttonColor: var(--color5); --_buttonHoverColor: var(--color1);}
a.knop.color6, .knop.color6, .button.color6, a.button.color6, button.color6 {--_buttonColor: var(--color6); --_buttonHoverColor: var(--color2);}
a.knop.color7, .knop.color7, .button.color7, a.button.color7, button.color7 {--_buttonColor: var(--color7); --_buttonHoverColor: var(--color3);}
a.knop.color8, .knop.color8, .button.color8, a.button.color8, button.color8 {--_buttonColor: var(--color8); --_buttonHoverColor: var(--color4);}

.knop + .knop {margin-left: 1em;}
.knop + a {margin-left: 1em;}

a.knop.download::before, .knop.download::before, .button.download::before, a.button.download::before, button.knop.download::before {content: "\f56d"; font-family: "Font Awesome 5 Pro"; margin-right: 0.5em;}

.bovenkantHolder {background: transparent; border: none; box-shadow: none; position: sticky; top: 20px; padding: 0 var(--space30); z-index: 1000; box-sizing: border-box; margin: 0 auto; height: 0;}
.bovenkantHolder .bovenkant {background-color: #FFF; border-radius: var(--borderRadius3); padding: 10px; box-sizing: border-box; box-shadow: 0 0 16px 0 rgba(0,0,0,0.25); max-width: var(--maxWidth);}
.bovenkantHolder .bovenkant a.logo {padding: var(--space15) var(--space25); margin: 0; align-content: center;}
.bovenkantHolder .bovenkant a.logo img {margin: auto; filter: invert(1);}
.bovenkantHolder .bovenkant .art-nav {margin: 0 0 0 auto; padding: var(--space15) var(--space25); border-radius: calc(var(--borderRadius3) - 5px); display: flex; position: relative;}
.bovenkantHolder .bovenkant .art-nav nav {margin: auto;}
.bovenkantHolder .bovenkant .art-nav .art-menu {display: flex; gap: var(--space20); flex-wrap: wrap; align-items: center; height: 100%;}
.bovenkantHolder .bovenkant .art-nav .art-menu li {position: relative;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t {padding: 0; color: var(--fontColor1); position: relative; padding: var(--space10) 0; font-size: inherit; transition: all 0.3s ease;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a.active .t, .bovenkantHolder .bovenkant .art-nav .art-menu li a .t:hover {opacity: 0.7; text-decoration: underline;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t.conversie  {background-color: var(--color2); font-size: var(--bodyFontSize); padding: var(--space15) var(--space30); border-radius: var(--borderRadius1); color: var(--fontColor2); border: 2px solid transparent; margin-bottom: var(--space5); transition: all 0.3s ease;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a.active .t.conversie, .bovenkantHolder .bovenkant .art-nav .art-menu li a .t.conversie:hover {background-color: var(--color6); color: var(--color2); text-decoration: underline; opacity: 1;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t:hover::before {content: ""; background-color: transparent; height: 40px; min-width: 200%; position: absolute; bottom: -40px; left: -50%; right: -50%; pointer-events: all;}

.hoverMenu {border-radius: var(--borderRadius2); box-shadow: 0 5px 15px rgba(0,0,0,0.1); background: #fff; padding: 0; left: unset; right: -140px; width:706px; overflow: visible;}
.hoverMenu {display: grid; grid-template-columns: 3fr 2fr; align-items: center;}
.hoverMenu::before {content: ""; position: absolute; top: -30px; height: 40px; left: 0; right: 0; width: 100%; background: transparent;}
.hoverMenu.open {transform: translateY(34px); opacity: 1; pointer-events: auto; visibility: visible;}
.hoverMenu .categorie {padding:var(--space30); background: var(--_backgroundColor); color:#fff; border-radius: var(--borderRadius2); height:100%; box-sizing: border-box;}
.hoverMenu .categorie h2 {font-size:32px; color:#fff; line-height:1.2em; margin-bottom:20px;}
.hoverMenu .categorie a.knop {padding:15px 30px; display: inline-block; width: auto; color:var(--color1); background-color: #fff;}
.hoverMenu .kolommen        {display:grid; grid-template-columns: 1fr; gap:10px; margin:0; padding:30px; align-items: center;}
.hoverMenu .kolommen .kolom {width: auto;}
.hoverMenu .kolommen .kolom a {color: var(--_buttonColor); white-space: nowrap; padding:10px 30px; border-radius:50px; display: block; background-color: var(--color9); text-decoration: none !important;}
.hoverMenu .kolommen .kolom .titel.active a, .hoverMenu .kolommen .kolom a:hover {background-color: var(--_buttonColor); color:#fff;}

.resMenuHolder {background-color: #fff; top: calc(70px - var(--borderRadius2)); left: 0; right: 0; border-radius: 0 0 var(--borderRadius2) var(--borderRadius2); transition: 0.3s all ease; margin: 0 auto; transform: scaleY(0); transform-origin: top; padding: 20px; box-sizing: border-box; max-width: calc(100% - var(--space30) - var(--space30)); opacity: 0; height: 0px; overflow: hidden;}
.resMenuHolder.open {height: auto !important; transform: scaleY(1); padding: 20px; opacity: 1;}

.resMenublokinhoud .resMenuItem a                     {border-bottom: none; color: var(--fontColor1); font-size: var(--bodyFontSize); width: fit-content; z-index: 1; position: relative;}
.resMenublokinhoud .resMenuItem .openklapper          {color: var(--fontColor1); z-index: 2;}
.resMenublokinhoud .resMenuItem .openklapper.open     {z-index: 0;}
.resMenublokinhoud .resMenuItem.active .openklapper   {color: var(--color1);}
.resMenublokinhoud .resMenuItem.active > a            {color: var(--color1);}


.bovenkantHolder .bovenkant .art-nav .art-menu li:has(a .t.color1) .hoverMenu {--_backgroundColor: var(--color5); --_buttonColor: var(--color1);}
.bovenkantHolder .bovenkant .art-nav .art-menu li:has(a .t.color2) .hoverMenu {--_backgroundColor: var(--color6); --_buttonColor: var(--color2);}
.bovenkantHolder .bovenkant .art-nav .art-menu li:has(a .t.color3) .hoverMenu {--_backgroundColor: var(--color7); --_buttonColor: var(--color3);}
.bovenkantHolder .bovenkant .art-nav .art-menu li:has(a .t.color4) .hoverMenu {--_backgroundColor: var(--color8); --_buttonColor: var(--color4);}


.max700 {max-width: 700px !important;}
.max900 {max-width: 900px !important;}
.max1100 {max-width: 1100px !important;}
.max1300 {max-width: 1300px !important;}

img.volledig, img.links-20, img.links-30, img.links-40, img.links-50, img.links-60, img.links-70, img.links-80, img.rechts-20, img.rechts-30, img.rechts-40, img.rechts-50, img.rechts-60, img.rechts-70, img.rechts-80{border-radius: var(--borderRadius2);}

.vak {padding: 0 var(--space30);}

.vak .inhoud {max-width: var(--maxWidth); padding:var(--space50); position: relative; box-sizing: border-box; border-radius: var(--borderRadius2);}

.vak.links .inhoud::after {content: ""; background-color: var(--_backgroundColor); width: 100%; height: 100%; position: absolute; top: 0; left: calc(-100% + var(--borderRadius2)); z-index: -1;}
.vak.rechts .inhoud::after {content: ""; background-color: var(--_backgroundColor); width: 100%; height: 100%; position: absolute; top: 0; right: calc(-100% + var(--borderRadius2)); z-index: -1;}

.vak .inhoud .grid-2x .slider {margin-right: calc((75dvw - 100% - var(--space50) + 25px) * -1);}
.vak .inhoud .grid-2x:has(.slider) {gap: var(--space100);}

.vak .inhoud {--_backgroundColor: transparent; --_fontColor: var(--fontColor1); background-color: var(--_backgroundColor); color: var(--_fontColor);}
.vak .inhoud h1, .vak .inhoud h2, .vak .inhoud h3, 
.vak .inhoud h4, .vak .inhoud h5, .vak .inhoud h6, .vak .inhoud a {color: var(--_fontColor);}

.vak.color1 .inhoud {--_backgroundColor: var(--color1); --_fontColor: var(--fontColor2);}
.vak.color2 .inhoud {--_backgroundColor: var(--color2); --_fontColor: var(--fontColor2);}
.vak.color3 .inhoud {--_backgroundColor: var(--color3); --_fontColor: var(--fontColor2);}
.vak.color4 .inhoud {--_backgroundColor: var(--color4); --_fontColor: var(--fontColor2);}
.vak.color5 .inhoud {--_backgroundColor: var(--color5); --_fontColor: var(--fontColor2);}
.vak.color6 .inhoud {--_backgroundColor: var(--color6); --_fontColor: var(--fontColor2);}
.vak.color7 .inhoud {--_backgroundColor: var(--color7); --_fontColor: var(--fontColor2);}
.vak.color8 .inhoud {--_backgroundColor: var(--color8); --_fontColor: var(--fontColor1);}

div.vak[class*="color"]:first-child, div.vak[class*="color"] + div.vak[class*="color"] {margin-top: var(--space50);}


.vak .inhoud:has(.blok) {padding-left: 0; padding-right: 0;}

.vak .inhoud .blok {--_backgroundColor: #FFFFFF; --_fontColor: var(--fontColor1); background-color: var(--_backgroundColor); color: var(--_fontColor);
  padding: var(--space50); border-radius: var(--borderRadius2); align-content: center; height: 100%; box-sizing: border-box;}

.vak .inhoud .blok .inhoud h1, .vak .inhoud .blok .inhoud h2, .vak .inhoud .blok .inhoud h3, 
.vak .inhoud .blok .inhoud h4, .vak .inhoud .blok .inhoud h5, .vak .inhoud .blok .inhoud h6 {color: var(--_fontColor);}

.vak .inhoud .blok.color1  {--_backgroundColor: var(--color1); --_fontColor: var(--fontColor2);}
.vak .inhoud .blok.color2  {--_backgroundColor: var(--color2); --_fontColor: var(--fontColor2);}
.vak .inhoud .blok.color3  {--_backgroundColor: var(--color3); --_fontColor: var(--fontColor2);}
.vak .inhoud .blok.color4  {--_backgroundColor: var(--color4); --_fontColor: var(--fontColor2);}
.vak .inhoud .blok.color5  {--_backgroundColor: var(--color5); --_fontColor: var(--fontColor2);}
.vak .inhoud .blok.color6  {--_backgroundColor: var(--color6); --_fontColor: var(--fontColor2);}
.vak .inhoud .blok.color7  {--_backgroundColor: var(--color7); --_fontColor: var(--fontColor2);}
.vak .inhoud .blok.color8  {--_backgroundColor: var(--color8); --_fontColor: var(--fontColor2);}



table.tabel {border-spacing: 0; text-align: center;}
table.tabel th  {padding:12px 15px; font-family: var(--fontfamily1); text-align: center;}
table.tabel td  {padding:8px 15px; border-bottom:1px solid #ddd; vertical-align: center; line-height: 1.35em;}
table.tabel td strong {display: block;}
table.tabel td:first-of-type, table.tabel th:first-of-type {font-weight: bold; text-align: left;}
table.tabel tr       td {transition: all .3s ease}
table.tabel tr:hover td {background: #f4f4f4;}
table.tabel p {margin:0;}



.beschikbaarheidKlas {display: grid; grid-template-columns: repeat(auto-fill,minmax(min(150px, 100%),1fr)); gap: 10px;}
.beschikbaarheidKlas .klas {display: flex; flex-direction: column; gap: 5px; align-items: center; width: 100%;}
.beschikbaarheidKlas .klas .waarde {color: transparent; background-color: gray; width: 100%; border-radius: var(--borderRadius4); transition: all 0.3s ease;}
.beschikbaarheidKlas .klas.beschikbaar .waarde {background-color: var(--color2);}
.beschikbaarheidKlas .klas.nietBeschikbaar .waarde {background-color: var(--color3);}
.beschikbaarheidKlas .klas:hover .waarde {filter: brightness(0.9);}

.beschikbaarheidSchool tr:first-child td   {text-align: center; width: calc(100% / 8); min-width: 100px;}
.beschikbaarheidSchool td.beschikbaar       {background: var(--color2); color:rgba(0,0,0,.0); border-radius: var(--borderRadius4);}
.beschikbaarheidSchool td.nietBeschikbaar   {background: var(--color3); color:rgba(0,0,0,.0); border-radius: var(--borderRadius4);}
.beschikbaarheidSchool tr:last-child td:hover       {filter: brightness(.9);}


div[class*="grid"].center {align-items: center;}
div.grid-2x {grid-template-columns: var(--leftFr) var(--rightFr); gap: var(--space50);}
div[class*="grid"].left2Fr {--leftFr: 2fr;}
div[class*="grid"].right2Fr {--rightFr: 2fr;}
div[class*="grid"].left3Fr {--leftFr: 3fr;}
div[class*="grid"].right3Fr {--rightFr: 3fr;}



.pageFooterHolder {background-color: var(--color6); width: 100%; border-radius: var(--borderRadius1) 0 0 0; margin-top: var(--space50);}
.pageFooterHolder .pageFooter {width: 100%; max-width: var(--maxWidth); padding: var(--space50); padding-bottom: 0;}

.pageFooterHolder .pageFooter ul:has(.STPMenu1li) {list-style: none; padding: 0;}
.pageFooterHolder .pageFooter ul.sitemap2ul {display: none;}
.pageFooterHolder .pageFooter .h2 {color: #FFF;}
.pageFooterHolder .pageFooter .STPMenu1li a {text-decoration: none; color:#FFF;}
.pageFooterHolder .pageFooter .STPMenu1li a:hover {text-decoration: underline; color: rgba(255,255,255,.8);}
.pageFooterHolder .pageFooter a {text-decoration: underline; color:#FFF;}
.pageFooterHolder .pageFooter a:hover {text-decoration: none; color: rgba(255,255,255,.8);}
.pageFooterHolder .pageFooter a.knop {text-decoration: none;}
.pageFooterHolder .pageFooter a.knop:hover {text-decoration: underline;}

.pageFooterKnoppenHolder {max-width: var(--maxWidth); margin: auto; background-color: transparent;}
.pageFooterKnoppenHolder .pageFooterKnoppen {display: flex; padding: var(--space50); margin: 0; max-width: unset;}
.pageFooterKnoppenHolder .pageFooterKnoppen a {color: rgba(255, 255, 255, .8); text-decoration: none; }
.pageFooterKnoppenHolder .pageFooterKnoppen a:hover {text-decoration: underline; color: #FFFFFF;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {margin: auto auto auto 0; display: flex; gap: var(--space20);}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {display: none;}


@media screen and (max-width: 900px) {
  :root {
    --bodyFontSize: 16px;
    --h1Size: 35px;
    --h2Size: 25px;
    --h3Size: 18px;
    --h5Size: 18px;

    --borderRadius1: 50px;
    --borderRadius2: 15px;
    --borderRadius3: 10px;
    --borderRadius4: 5px;

    --space5: 5px;
    --space10: 10px;
    --space15: 10px;
    --space20: 10px;
    --space25: 15px;
    --space30: 20px;
    --space40: 20px;
    --space50: 20px;
    --space80: 30px;
    --space100: 30px;
    --space200: 50px;
  }

  .art-nav {display: none !important;}

  div.grid-2x, div.grid-3x {grid-template-columns: 1fr;}
  
  .customForm .widget {display: flex; flex-direction: column; align-items: unset;}

  .pageFooterHolder {padding-top: var(--borderRadius1);}

}