:root {
  --color1: #729886;
  --color2: #b66255;
  --color3: #c5af4d;
  --fontColor: #FFF;
  --fontFamily1: "Londrina Solid", Helvetica, Arial, sans-serif;
  --fontFamily2: "Open Sans", Helvetica, Arial, sans-serif;
  --bodyFontSize: 15px;
  --h1Size: 42px;
  --h2Size: 30px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
}


body {font-family: var(--fontFamily2); font-weight: normal; background: #000; color: var(--fontColor); font-size: var(--bodyFontSize); line-height: 1.85em; overflow: hidden;}

::selection {background: #000; color: #FFF;}

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(--fontColor); font-weight: bold;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size:var(--h1Size);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size);}

a:link {color: var(--fontColor);}

a.knop, .button, a.button, button {font-family: var(--fontFamily1); font-size: 16px; padding: 20px; border-radius: 0; background: #fff; line-height: 1; font-weight: bold; text-decoration: none !important; color: #000; border: 2px solid #000;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: #000; color: #FFF;}

.breadcrumbs {display: none;}

a.logo img {width: 120px;}

.bovenkantHolder {position: sticky; top: 0; border: 0; box-shadow: unset; background: transparent; height: 0;}
.bovenkantHolder .bovenkant {max-width: 100%;}

.HeaderHolder {width: 100%;}

#art-main {position: absolute; right: 0; top: 0; bottom: 0; background: var(--color1); width: 33.333%;}
.art-Sheet {max-width: 1300px; margin: 0 auto; padding: 150px 30px 30px 30px; height: calc(100vh - 60px); overflow-y: scroll;}

.bovenkantHolder .bovenkant .art-nav .art-menu {display: flex; gap: 40px; align-items: center;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t {padding: 0; font-weight: normal; font-size: 22px; font-family: var(--fontFamily1); color: var(--fontColor);}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t::before {content: ""; display: block; position: absolute; bottom: -10px; left: 0; width: 0; height: 2px; background-color: #FFF; transition: all .3s ease;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a:hover .t::before, .bovenkantHolder .bovenkant .art-nav .art-menu li a.active .t::before {width: 100%;}

.bovenkantHolder .bovenkant .art-nav .art-menu li a:hover .t.dagbesteding {color:var(--color1);}
.bovenkantHolder .bovenkant .art-nav .art-menu li a:hover .t.naschoolse {color:var(--color2);}
.bovenkantHolder .bovenkant .art-nav .art-menu li a:hover .t.coachen {color:var(--color3);}

.bovenkantHolder .bovenkant .art-nav .art-menu li.home a::before {content: "\f4c9"; font-family: "Font Awesome 5 Pro"; color: var(--fontColor); font-size: 25px; cursor: pointer;}
.bovenkantHolder .bovenkant .art-nav .art-menu li.home a .t {display: none;}


.bovenkantHolder .bovenkant .art-nav .art-menu > .art-Block {margin-bottom: unset;}
.bovenkantHolder .bovenkant .art-nav .art-menu > .art-Block .h2 {display: none;}

.bovenkantHolder .bovenkant .art-nav .art-menu > .art-Block > ul {visibility: unset; opacity: 1; border: 0; position: relative; transition: unset; background: unset; box-shadow: unset; left: unset; top: unset; display: flex; gap: 40px; align-items: center;}
.bovenkantHolder .bovenkant .art-nav .art-menu > .art-Block > ul li a {padding: 0; font-weight: normal; border: 0; width: unset; font-size: 22px; font-family: var(--fontFamily1); color: var(--fontColor) !important;}
.bovenkantHolder .bovenkant .art-nav .art-menu > .art-Block > ul li a::before {content: ""; display: block; position: absolute; bottom: 0; margin: 0; left: 0; width: 0; height: 2px; background-color: #FFF; transition: all .3s ease;}
.bovenkantHolder .bovenkant .art-nav .art-menu > .art-Block > ul li a:hover::before {width: 100%;}
.bovenkantHolder .bovenkant .art-nav .art-menu > .art-Block > ul li a:hover {background: unset;}

.bovenkantHolder .bovenkant .art-nav .art-menu > .art-Block > ul::before {display: none;}

.bovenkantHolder .bovenkant .resMenubalkinhoud a {color: var(--fontColor); font-size: 30px;}

.resMenuHolder::before {position: fixed; top: 0; left: 0; bottom: 0; right: 0; content: ""; display: block; background: -moz-linear-gradient(top,rgba(0,0,0,.32) 0%,rgba(0,0,0,.65) 100%); background: -webkit-linear-gradient(top,rgba(0,0,0,.32) 0%,rgba(0,0,0,.65) 100%); background: linear-gradient(to bottom,rgba(0,0,0,.32) 0%,rgba(0,0,0,.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52000000',endColorstr='#a6000000',GradientType=0); }
.resMenuHolder {pointer-events: none; left: 0; padding: 0; position: fixed; bottom: 0; opacity: 0; left: -110%; transition: opacity .3s ease,bottom .3s ease; width: 100%; z-index: 22; top: unset; background: unset; height: auto !important; text-align: right; max-width: 100%;}
.resMenuHolder.open {opacity: 1; left: 0; bottom: 50px; pointer-events: auto;}
.resMenubloktitel {display: none;}
.resMenublokinhoud .resMenuItem a {border-bottom: 0; font-size: 24px; padding: 10px 15px; text-transform: uppercase; font-weight: 900; font-family: var(--fontFamily1); color: #FFF;}
.resMenublokinhoud .resMenuItem.active > a {color:var(--color1);}

.resMenuItem .laag1 a {padding: 5px; padding-right: 30px; font-size: 18px; font-weight: normal;}

.openklapper::before {display: none;}

blockquote {color: var(--fontColor); margin: 50px 0;}

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

  #art-main {width: 50%;}

}


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

    :root {  
    --h1Size: 30px;
    --h2Size: 24px;
  
    --space10: 10px;
    --space15: 15px;
    --space20: 10px;
    --space30: 20px;
    --space40: 20px;
    --space50: 25px;
    --space80: 40px;
    --space100: 50px;
  }

  body {overflow: unset;}

  a.logo img {width: 80px;}

  #art-main {width: 100%; position: relative;}
  .art-Sheet {padding: 30px; height: unset; overflow: unset;}

  .lijst.slider .liquid-slide-sjabloon .plaatje .videoWrapper::before {display: none;}

  .resMenuItem.active .resMenuItemHolder {max-height: 1000px;}

}