:root {
--color1: #de9b35;
--color2: #e8ecef;
--color3: #fbefda;
--color4: #efd6d5;
--color5: #F9F7F6;
--color6: #d68f8f;
--fontColor: #333;
--fontFamily1: "Roboto Mono", Helvetica, Arial, sans-serif;
--bodyFontSize: 15px;
--h1Size: 48px;
--h2Size: 30px;
--space10: 10px;
--space15: 15px;
--space20: 20px;
--space30: 30px;
--space40: 40px;
--space50: 50px;
--space80: 80px;
--space100: 100px;
--borderRadius1: 5px;
}

body {font-family: "Roboto Mono", Helvetica, Arial, sans-serif; background: #f7f7f7; color: #333; font-size: var(--bodyFontSize);}

::selection {background:var(--color1);}

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); font-weight: bold; color: var(--color1); line-height: 1.35em; margin: 0 0 0.5em 0;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {color: #000; font-size: var(--h1Size); font-weight: bold;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {color: var(--color1); font-size: var(--h2Size); font-weight: 500;}

.siteHolder {max-width: 1800px; margin: 0 auto; background: #FFF;}

.art-menu li a {margin: 20px;}
.art-menu li a .t { font-family: "Roboto Mono", Helvetica, Arial, sans-serif; border-bottom: 2px solid transparent; color: #FFFFFF; letter-spacing: .2em; font-weight: bold; text-transform: uppercase; padding: 10px 0;}
.art-menu li a .t:hover, .art-menu li a.active .t {color: #FFF; border-bottom: 2px solid #FFF;}
.art-menu li a .t.conversie {border: 2px solid #FFF; padding: 18px;}
.art-menu li a .t.conversie:hover {background: #FFF; color: #000;}

.bovenkantHolder {border: 0; height: 0;}
.bovenkantHolder .bovenkant .art-menu ul {border-radius: var(--borderRadius1); padding: 10px; box-sizing: border-box;}
.bovenkantHolder .bovenkant .art-menu ul li a {border-bottom: 0; margin: 0; padding: 10px; font-size: 14px; line-height: normal; text-transform: uppercase; font-weight: bold; letter-spacing: .1em;}
.bovenkantHolder .bovenkant .art-menu ul li a::before {display: none;}
.bovenkantHolder .bovenkant .art-menu ul li a.active {color: var(--color1);}
.bovenkantHolder .bovenkant .art-menu ul li a:hover {background-color: var(--color3); color: var(--color1);}

a.logo {margin: auto 0; outline: 0; z-index: 2;}
a.logo img {width: 250px; margin: 0;}

.liquid-slide-sjabloon .plaatje::after {content: ""; background: url(images/wave.svg); width: 100%; position: absolute; background-size: contain; bottom: -1px; height: 100%; display: block; background-position: bottom center; background-repeat: no-repeat;}
.liquid-slide-sjabloon .inhoud {top: 30%; background: unset; padding: 0;}
.liquid-slide-sjabloon .inhoud h2 {font-size: 48px;}
.liquid-slide-sjabloon .inhoud h2::before {display: none;}
.liquid-slide-sjabloon .inhoud p {font-size: 20px; line-height: 2em;}
.liquid-slide-sjabloon .plaatje video {width: 100%;}
.liquid-slide-sjabloon .plaatje::before {content: ""; top: 0; right: 0; height: 240px; width: 100%; position: absolute; pointer-events: none; background-image: linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.75) 100%,rgba(0,0,0,.65) 100%);}

a.knop, .button, a.button, button {border: 2px solid #000; line-height: 1; background: transparent; font-family: "Roboto Mono", Helvetica, Arial, Sans-Serif; font-size: 15px; font-weight: bold; color: #000; letter-spacing: .2em; padding: 18px; border-radius: 0; text-transform: uppercase;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: #000; color: #FFF;}
a.knop.wit {border-color: #FFF; color: #FFF;}
a.knop.wit:hover {background: #FFF; color: #000;}

section .inhoud, .vak .inhoud {padding: 80px 30px;}

.max900 {max-width: 900px; margin-left: auto; margin-right: auto;}
.inhoud.max1200 {max-width: 1200px; margin-left: auto; margin-right: auto;}

div[class*="grid"] {gap: 100px;}
div[class*="grid"].midden {align-items: center;}

.pageFooterHolder {background: var(--color5);}
.pageFooterHolder .pageFooter, .pageFooterHolder .pageFooter a {color: #000; font-size: 14px; text-decoration: none;}
.pageFooter h2, .pageFooter .h2 {color: var(--color1); font-size: 20px;}
.pageFooterKnoppenHolder {background: #FFF; border-top: 1px solid #E6E6E6;}
.pageFooterKnoppenHolder .pageFooterKnoppen {color: #000; font-size: 11px;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1;}

.art-sidebar1 .art-Block {position: sticky; top:50px;}
.inhoudsopgave {box-shadow: 10px 50px 30px -20px rgba(48,63,77,0.10); background: var(--color4); padding: 30px; box-sizing: border-box; position: relative; overflow: hidden; border-radius: 10px;}
.inhoudsopgave .titel {font-weight: bold; font-size:22px;}
.inhoudsopgave ul {padding-left: 20px;}
.inhoudsopgave li {cursor: pointer; transition: all .3s ease; margin: 10px 0;}
.inhoudsopgave li:hover {color: var(--color1);}

.leesMeerHouder.gesloten {overflow: hidden; transition: all .3s ease; position: relative; z-index: 10; max-height: 0; height: auto; opacity: 1; clear:both;}
.leesMeerHouder.open {max-height: 100vh; overflow: hidden;}
.tonenKnop {margin: 1em 0 2em; transition: all .3s ease; cursor: pointer;}

blockquote {display: block; font-size: 20px; margin: 0px 0px 20px 20px; border-radius: 10px; color: #fff; width: 30%; float: right; position: relative; padding: 20px; background:var(--color6);}
blockquote::before, blockquote::after {display: none;}
blockquote.rond {display: flex; flex-direction: column; min-height: 200px; justify-content: center; border-radius: 600px; width: 200px;}
blockquote a {color:#fff !important;}

.blokOpmerking {background: var(--color4); padding: 40px; margin-bottom: 2em; border-radius: 10px;}
.blokOpmerking p:last-of-type {margin-bottom:0;}

img.half.rechts-50 {margin-left: -10%; left: 15%; position: relative; box-shadow: 30px 30px var(--color6);}
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: 10px;}
img.rond {border-radius: 900px;}
.backFoto {box-shadow: 30px 30px var(--color6); border-radius: var(--borderRadius1);}
img.rechts, img.volledig {border-radius: var(--borderRadius1);}

.resMenuHolder {top: 100%; background: var(--color4);}
.resMenublokinhoud .resMenuItem.active > a {color: var(--color1);}
.resMenublokinhoud .resMenuItem a {border: 0; font-size: 16px;}
.resMenuItem .laag1 a {font-size: 13px;}
.resMenuItem .laag2 a {font-size: 11px;}

.aanmeldenInschrijven {padding: 30px; background-color: var(--color4); border-radius: var(--borderRadius1); position: relative;}

.formulier_textarea {margin: 5px 0;}

.Taalkeuze_vlaggen.dropdownTaal {line-height: 50px; height: 55px;}
.Taalkeuze_vlaggen.dropdownTaal ul {border-radius: 0; border: 2px solid #FFF; max-height: 52px;}
.Taalkeuze_vlaggen ul li {padding: 0 10px;}
.Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving {color: #FFF; font-size: 16px; font-weight: bold; text-transform: uppercase; font-family: "Roboto Mono", Helvetica, Arial, sans-serif;}
.Taalkeuze_vlaggen ul li .afbeelding {display: none;}
.Taalkeuze_vlaggen.dropdownTaal.open ul {background: unset; box-shadow: unset;}
.Taalkeuze_vlaggen.dropdownTaal ul li.actief .omschrijving::after {font-size: 12px;}

.uniekeForm {max-width: 700px; margin: 0 auto; padding: 30px; background: var(--color4);}
.uniekeForm h1 {color: var(--color1); font-size: 30px;}
.uniekeForm a.knopVersturen {float: right; margin: 20px 0 0 0;}


@media screen and (max-width: 1500px) {

  img.half.rechts-50 {left: 0; margin-left: 30px;} 

}


@media screen and (max-width: 1300px) {

  img.half.rechts-50 {left: 0; margin-left: 30px;} 

}



@media screen and (max-width: 1200px) {

  .blok .links, .blok .rechts {padding: 40px;}

  .art-menu li a {margin: 10px;}

  .liquid-slide-sjabloon .sliderWrapper {max-width: 1000px;}

}


@media screen and (max-width: 1000px) {

  .liquid-slide-sjabloon .sliderWrapper {max-width: 900px;}

}

@media screen and (max-width: 900px) {

  :root{
    --h1Size: 48px;
    --h2Size: 26px;

    --space10: 10px;
    --space15: 12px;
    --space20: 15px;
    --space30: 20px;
    --space40: 30px;
    --space50: 40px;
    --space80: 60px;
    --space100: 80px;
  }

  .bovenkantHolder {height: 70px !important; background: var(--color1);}
  .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {color: #FFF;}
  .bovenkantHolder .bovenkant > .Taalkeuze_vlaggen.dropdownTaal {display: none;}

  .vak {padding: 0;}
  section .inhoud, .vak .inhoud {padding: 15px;}

  .liquid-slide-sjabloon .inhoud {padding: 20px; box-sizing: border-box; background: var(--color1)}
  .liquid-slide-sjabloon .inhoud h2 {font-size: var(--h2Size);}
  .liquid-slide-sjabloon .inhoud p {font-size: 15px;}
  .liquid-slide-sjabloon .plaatje::before, .liquid-slide-sjabloon .plaatje::after {display: none;}

  a.logo img {width: 150px;}

  div[class*="grid"] {gap: 30px;}

  .Taalkeuze_vlaggen.dropdownTaal ul {border: 0; max-height: unset; display: flex;}
  .Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving {color: #000; opacity: .3;}
  .Taalkeuze_vlaggen.dropdownTaal ul li.actief .omschrijving {opacity: 1; color: var(--color1);}
  .Taalkeuze_vlaggen.dropdownTaal ul li.actief .omschrijving::after {display: none;}

}