:root {
  --kleur1: #007aeb;
  --kleur2: #000;
  --font1: "Work Sans", Helvetica, Arial, Sans-Serif;
  --font2: "Work Sans", Helvetica, Arial, Sans-Serif;
}

/* Font */
body {font-family: var(--font2), Helvetica, Arial, Sans-Serif; font-size:15px;}

h1, h2, .h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
  font-family: var(--font1), Helvetica, Arial, Sans-Serif;
  letter-spacing: -0.03em;
  font-weight: 900;
}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size:40px;}
h1:after    {content:""; display:inline-block; margin-left:5px; width:10px; height:10px; background-color:#000; font-size:200%; border-radius:30px;}

.HeaderHolder {overflow: hidden; max-height:80vh}
.liquid-slide-sjabloon .inhoud        {background: transparent; padding:0; max-width:none; top:50%; transform:translateY(-50%); bottom: 0;}
.liquid-slide-sjabloon .inhoud h1     {font-size:60px; color:#000; line-height:1.2em;}
.liquid-slide-sjabloon .inhoud h2     {font-size:50px; color:#fff; line-height:1.2em; margin-bottom:30px;}
.liquid-slide-sjabloon .inhoud h5     {font-size:30px; color:#fff; line-height:1.2em; margin-bottom:30px;}

/* .liquid-slide-sjabloon .inhoud h2::after {content:"."; color:var(--blauw); font-size:200%;} */
.liquid-slide-sjabloon .inhoud h2::after {content:""; display:inline-block; margin-left:10px; width:20px; height:20px; background-color:var(--blauw); font-size:200%; border-radius:30px;}

table.lijst td.knoppenHouder a .tekst::before {border-color: #6da0b3 transparent;}

a.logo img {width: 240px; padding:10px 0;}
a.logo {position: absolute; *top: 0; z-index: 23;}


.bovenkantHolder {border: unset;}
.bovenkantHolder .bovenkant {min-height: 100px;}

.art-menu li {margin-left:20px;}
.art-menu li a .t {color: #000; font-size: 16px; font-weight: 100; padding:5px 0; text-transform: lowercase;}
.art-menu li a.active .t {font-weight: bold; color:#000}

.art-menu li a .t::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #000; transition: all .3s ease; }
.art-menu li a:hover .t::before, .art-menu li a.active .t::before { width: 100%; }

.pageFooterHolder {background: #1d1d1d;}

a.knop, .button, a.button, button {font-family: inherit; background: var(--kleur1); font-size: 15px; padding: 15px 20px; border-radius: 4px;  line-height: 1; font-weight: 700; text-decoration: none !important;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--kleur2);}

.max900 {margin-left: auto; margin-right: auto; max-width: 900px;}
.max700 {margin-left: auto; margin-right: auto; max-width: 700px;}

.gdBerichten            {display:grid; grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:30px;}
.gbBericht              {padding: 30px; box-sizing: border-box; background: #fff; border: 1px solid #eee; float: left; width: 100%; margin:0; border-radius: 5px; box-shadow: 0 3px 15px rgba(0,0,0,.05); transition: all .3s ease; float:none;}
.gbBericht:hover        {box-shadow: 0 3px 20px rgba(0,0,0,.15);}
#gb_A {text-align: center;}

#gbHolder {margin-left:auto; margin-right:auto; max-width:600px; text-align: left;}

.vak {padding: 30px 0;}
.vak.blauw {background-color: var(--kleur1);}
.vak.blauw div {filter: invert();}

.resMenuHolder {top:100%;}
.resMenublokinhoud .resMenuItem a {font-size: 18px; font-weight: 900; color:#000;}


.vak.hoeHetWerktHouder .inhoud  {padding-top:0;}
.hoeHetWerktHouder   {margin-top:-200px; z-index: 1;}

.hoeWerktHet         {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:0;}
.hoeWerktHet .stap   {box-shadow: 0 0 50px rgba(0,0,0,.1); padding:40px; background-color: #fff; transition: all .3s ease; position: relative}
.hoeWerktHet .stap .nummer  {font-size: 20px; color:#999;}
.hoeWerktHet .stap .titel   {font-size: 26px; margin-bottom: 20px; font-weight: bold;}
.hoeWerktHet .stap .uitleg  {}

.hoeWerktHet .stap::after {position: absolute; color:#ccc; content:"\f545"; font-family:"Font Awesome 5 Pro" ; padding:20px; display:block; bottom:0; right:0; font-size:30px; font-weight: 100;}
.hoeWerktHet .stap:nth-child(2)::after {content:"\f1ec"}
.hoeWerktHet .stap:nth-child(3)::after {content:"\f2b5"}
.hoeWerktHet .stap:nth-child(4)::after {content:"\f135"}

.hoeWerktHet .stap:hover {background-color: var(--kleur1); color:#fff;}
.hoeWerktHet .stap:hover .nummer {color:#fff;}
.hoeWerktHet .stap:hover .titel {color:#fff;}
.hoeWerktHet .stap:hover::after {color:#fff;}



@media screen and (max-width: 1050px) {
  .liquid-slide-sjabloon {flex-direction: column;}
  .liquid-slide-sjabloon .plaatje,
  .liquid-slide-sjabloon .inhoud {width: 100%;}

  /* .liquid-slide-sjabloon .inhoud h2 { font-size: 18px; margin: 1em 0 10px 0;} */
}


@media screen and (max-width: 900px) {
  .liquid-slide-sjabloon .inhoud {background-color: var(--blauw); padding:20px;}
  .liquid-slide-sjabloon .inhoud h2 {font-size: 22px;}
  .liquid-slide-sjabloon .inhoud a.knop.groot {color:var(--blauw); background-color:#fff; padding: 13px 18px; font-size:inherit}
  .liquid-slide-sjabloon .inhoud p:last-of-type {margin-bottom:0;}

  a.logo img {width: 140px;}
  .bovenkantHolder .bovenkant {min-height: 70px;}
}