/* :root {
  --kleur1: #d7df21;
  --kleur2: #262262;
  --kleur3: #f8f8f8;
  --fontkleur: #262262;
  --font-family1: "Lora", serif;
  --font-family2: "Montserrat", sans-serif;
  --max-width: 1580px;
  --text-small: 700px;
  --padding-30: 30px;
}

 */
:root {
  --color1: #d7df21;
  --color2: #262262;
  --color3: #f8f8f8;
  --fontColor: #262262;
  --fontFamily1: "Lora", serif;
  --fontFamily2: "Montserrat", sans-serif;
  --bodyFontSize: 17px;
  --h1Size: 60px;
  --h2Size: 45px;
  --h3Size: 24px;
  --h4Size: 14px;
  --h5Size: 24px;
  --maxWidth: 1580px;
  --textSmall: 700px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
}


body {font-family: var(--fontFamily1); font-weight: 300; color: var(--fontColor); background: var(--color3); font-size: var(--bodyFontSize); line-height: 1.85em;}

::selection {background: var(--color1); color: #FFF;}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: 0; border: 0; background: #FFF; color: #666; border-radius:5px; padding-left:15px; padding-right:20px;}

input[type="checkbox"]::before,
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {color: var(--color1); font-size: 15px;}

select {border: 1px solid var(--color1); color: var(--fontColor); border-radius: 0;}
.breadcrumbs {display: none;}

.art-Sheet {min-height: 200px;}

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: 600; color: var(--color1);}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size); font-family: var(--fontFamily2);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size); font-family: var(--fontFamily2);}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size); font-family: var(--fontFamily2); color: var(--color2);}
h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {font-size: var(--h4Size); font-family: var(--fontFamily2); font-weight: 100; text-transform: uppercase; }
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-family: var(--fontFamily1); color:var(--fontColor); margin:1em 0; font-weight: normal;}


h1 em, .h1 em {font-family: var(--fontFamily1); font-weight: normal;}
h2 em, .h2 em {font-family: var(--fontFamily1); font-weight: normal;}
h3 em, .h3 em {font-family: var(--fontFamily1); font-weight: normal;}

.grid-2x h2, .grid-2x .h2, .grid-2x h2 a, .grid-2x h2 a:link, .grid-2x h2 a:visited, .grid-2x h2 a:hover {font-size: 28px;}
.grid-3x {grid-template-columns: 1fr 1fr 1fr;}
.grid-4x {grid-template-columns: 1fr 1fr 1fr 1fr;}

.grid-3x .wit {}

/* [class*="grid-"] > div {padding: var(--space30); box-sizing: border-box; position: relative;} */

[class*="grid-"] > div > .afbeelding {text-align: center; background:#f4f4f4}
[class*="grid-"] > div > .tekst {padding: var(--space30);}
[class*="grid-"] > div.wit,
[class*="grid-"].wit > div  {background-color: #fff;}



h2 + h5 {margin:1em 0;}

h5:empty {display: none;}

a, a:link, a:visited, a.visited, a:hover, a.hover {color: inherit;}

a.logo {margin: auto 0; outline: 0;}
a.logo img {width: 195px; margin: 0;}

a.knop, .button, a.button, button {position: relative; font-family: var(--fontFamily2); background-color: var(--color1); color: var(--color2); border: 0; font-size: 15px; letter-spacing: .07em; text-transform: uppercase; padding: 25px 30px; border-radius: 100px; line-height: 1; font-weight:bold; text-decoration: none !important; z-index: 1;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--color2); color: var(--color1);}

a.knop.blauw {background: var(--color2); color:#fff;}
a.knop + a.knop {margin-left: 15px;}

.bovenkantHolder {border: 0; position: sticky; top: 0; z-index: 20; box-shadow: 0px 0px 30px 0px rgba(0,0,0,.2); background: var(--color3);}

.bovenkantHolder .bovenkant .art-nav .art-menu {display: flex; gap:30px; font-family: var(--fontFamily2);}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t {white-space: nowrap; font-size: 13px;  color: var(--color2); padding: 15px 0; font-weight: normal; letter-spacing: .07em; text-transform: uppercase;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t:hover,
.bovenkantHolder .bovenkant .art-nav .art-menu li a.active .t {opacity:.5}

.art-menu ul {top: 45px; background: var(--color2); transition: .3s all ease; border: 0; padding: 20px; display: flex; flex-direction: column; gap: 10px;}
.art-menu li:hover > ul {top:57px;}
.art-menu ul li a {border-bottom: 0; color: #FFF; transition: .3s all ease; padding: 0; font-size:14px; text-transform: uppercase; width:250px;}
.art-menu ul li a.active {background-color: unset; color: var(--color1);}
.art-menu ul li a:hover {background: unset; opacity: .5;}
.art-menu ul li a::before, .art-menu ul::before {display: none;}

.art-menu ul:before { border: 0; left: 0; top: -15px; right: 0; height: 15px; z-index: 2; display: block; width: auto; *background:#f00;}



.vak.wit {background: #FFF;}
.vak.blauw {background: var(--color2);}
.vak.groen {background: var(--color1);}

.vak.blauw .inhoud, .vak.groen .inhoud,
.vak.blauw .inhoud h2, .vak.groen .inhoud h2, .vak.blauw .inhoud h3, .vak.groen .inhoud h3, .vak.blauw .inhoud h5, .vak.groen .inhoud h5 {color: #FFF;}

.vak.blauw .inhoud h3 a {color:var(--color1);}

.vak.groen p {color:var(--color2)}
.vak.groen a.knop {color:#fff;}
.vak.groen a.knop:hover {color:var(--color1);}

section .inhoud, .vak .inhoud {padding: 100px 30px;}
section .inhoud.max900, .vak .inhoud.max900 {max-width: 900px;}
section .inhoud.max700, .vak .inhoud.max700 {max-width: 700px;}

.vak .inhoud + .inhoud {padding-top:0;}

.vak + .lijstenCategorieen { margin-top: 30px;}

.vak.schermVullend {min-height:calc(100vh - 70px); display: flex; align-items: center;}

.text-small {max-width: var(--textSmall); margin-left: auto; margin-right: auto;}

.pageFooterHolder {background: var(--color2); }
.pageFooterHolder .pageFooter {padding-top:60px; padding-bottom:60px;}
.pageFooterKnoppenHolder {background: #181455; padding: 20px 0;}
.pageFooter h2, .pageFooter .h2 {font-size: 20px;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {display: flex; gap:30px; opacity:.5}
.pageFooterKnoppenHolder a {text-decoration: none; transition: all .3s ease}
.pageFooterKnoppenHolder a:hover {opacity:.5;}

.pageFooter ul      {margin:0; padding:0;}
.pageFooter ul li   {list-style: none;}
.pageFooter ul ul   {display: none;}

.pageFooterHolder p + .h2 {margin-top:40px;}
.pageFooterHolder .formulierVersturen a.button { display: block; border-radius: 5px; color: var(--fontColor) !important; margin-top:0;}

.resMenuHolder {top: 100%; max-width: 100%; background: var(--color3);}
.resMenublokinhoud {padding: 20px; box-sizing: border-box;}
.resMenublokinhoud .resMenuItem a {border: 0; white-space: nowrap; font-family: var(--fontFamily2); padding: 12px 15px; font-size: 13px; color: var(--color2); font-weight: normal; letter-spacing: .07em; text-transform: uppercase;}
.resMenublokinhoud .resMenuItemHolder.laag1 {background: var(--color2); margin: 0 10px;}
.resMenublokinhoud .resMenuItemHolder.laag1.open {padding: 15px;}
.resMenublokinhoud .resMenuItemHolder.laag1 a {color: #FFF; opacity: .5; padding: 10px;}

.openklapper::before {font-size: 14px; top: -2px;}

.grid-2x.padding-50 > div {padding:50px;}

a.telefoon, a.website, a.mail, a.klant {text-decoration: none; *display: block;}
a.telefoon:hover, a.website:hover, a.mail:hover, a.klant:hover  {color:var(--color1)}
a.telefoon::before, a.website::before, a.mail::before, a.klant::before {font-family: "Font Awesome 5 Pro"; font-weight: light; margin-right: 20px; font-size: inherit; color: var(--color1);}
a.telefoon::before  {content: "\f879";}
a.website::before   {content: "\f0ac";}
a.mail::before      {content: "\f0e0";}
a.klant::before     {content: "\f007";}

ul.vinkjes { list-style: none; padding: 0 .5em 0 .5em; margin: 0 auto 1em auto;}
ul.vinkjes li {padding: 0 0 0 1.5em; position: relative; margin: .6em 0 .6em; line-height: 1.5em; text-align: left;}
ul.vinkjes li::before { content: "\f00c"; font-weight: 700; font-family: "Font Awesome 5 Pro"; margin-right: 5px; color: #3ece8e; left: 0; top: 1px; position: absolute }
ul.vinkjes li:empty { display: none}

ul.vinkjes.groter {font-size:20px; text-underline-offset: 0.3em;}
ul.vinkjes.groter li::before {color: var(--color1); content:"\f054";}

ul.vinkjes.type2 {padding: 0.5em .5em 0 .5em;}
ul.vinkjes.type2 li {font-weight: 400; font-size:20px;}
ul.vinkjes.type2 li::before {content: "\f00c"; font-weight: 100; font-size:24px; font-family: "Font Awesome 5 Pro"; margin-right: 10px; color: var(--fontColor); left: 0; top: -2px; position: absolute; display:flex; aspect-ratio: 1/1;}


.klantenomgevingHolder {display: grid; gap: 30px; max-width: 900px; margin: 50px auto;}
.klantenomgevingHolder > div {background: rgba(255,255,255,.2); padding: 30px; box-sizing: border-box; text-align: center; color: #FFF;}
.klantenomgevingHolder > div h3 {color: #FFF;}

@media screen and (max-width: 1360px) {
  .bovenkantHolder .bovenkant .art-nav .art-menu {gap:15px;}
}

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

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

  .vak {padding: 0;}
  .art-Sheet, section .inhoud, .vak .inhoud {padding: 20px;}

  .bovenkantHolder::before, .bovenkantHolder::after {display: none;}
  .bovenkantHolder .bovenkant {min-height: 50px; flex-direction: unset;}

  a.logo img {width: 190px;}

  a.knop, .button, a.button, button {padding: 15px; font-size: 14px;}

  .grid-2x.padding-50 > div {padding: 20px;}
  .grid-3x {grid-template-columns: 1fr;}
  .grid-4x {grid-template-columns: 1fr 1fr;}

  .pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {display: block;}
  .pageFooterKnoppenHolder .pageFooterKnoppen .copyright {text-align: center; margin: 10px 0 0 0;}

}
 
@media screen and (max-width: 680px) {
  :root {
    --padding-30: 20px;
  }

  .grid-4x {grid-template-columns: 1fr;}
  
}