:root {
  --color1: #03a3da;
  --color2: #edf6fc;
  --color3: #84c041;
  --color4: #f0f9f0;
  --fontColor: #212529;
  --fontFamily1: "Naste", Helvetica, Arial, sans-serif;
  --bodyFontSize: 15px;
  --h1Size: 48px;
  --h2Size: 40px;
  --h3Size: 22px;
  --h4Size: 18px;
  --h5Size: 25px;
  --maxWidth: 1580px;
  --space5: 5px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space25: 25px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 10px;
}

body {font-family: var(--fontFamily1); font-weight: normal; color: var(--fontColor); background: #FFF; font-size: 16px; line-height: 1.85em;}
::selection {background: var(--color3); color: #FFF;}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: var(--borderRadius1); font-size: 16px; color: var(--fontColor); padding: 10px 15px;}

.formulier_text, .formulier_textarea {margin: 10px 0;}

.breadcrumbs {display: none;}

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: 500; color: var(--color3); line-height: 1.35em; margin: 0 0 0.5em 0;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size:var(--h1Size); color: var(--fontColor); line-height: 1.15em;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size:var(--h2Size); color: var(--fontColor); }
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size:var(--h3Size);}
h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {font-size:var(--h4Size); margin-bottom:0; font-weight: normal; *text-transform: uppercase;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size:var(--h5Size); color: #999; font-weight: lighter;}
  
a.logo {margin: auto 0; outline: 0; z-index: 2; position: relative; transition: all .3s ease}
a.logo img {width: 240px; margin: 0; transition: .3s all ease;}

a.knop, .button, a.button, button {position: relative; font-family: var(--fontFamily1); background-color: var(--color3); color: #FFF; border: 1px solid var(--color3); font-size: 16px; padding: 15px 30px; cursor: pointer; line-height: 1; text-decoration: none !important; font-weight: normal; border-radius: 25px;}

a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--color1); border-color: var(--color1);}

a.knop.wit {color:var(--color3) !important; background-color: #fff !important;}

.bovenkantHolder {position: sticky; top: 0; border: 0; transition: all .3s ease}
.bovenkantHolder .bovenkant {padding:30px; box-sizing: border-box;}
.bovenkantHolder .bovenkant .art-menu li a .t {font-size: 16px; font-weight: 500; color:var(--fontColor)}
.bovenkantHolder .bovenkant .art-menu li a .t:hover, .bovenkantHolder .bovenkant .art-menu li a.active .t {color: var(--color3) !important;}

.bovenkantHolder .bovenkant .art-menu li a .t.conversie {background-color: var(--color3); color: #FFF !important; padding: 15px 25px 12px 25px; border-radius: 25px; line-height: 1; margin-left: 30px;}
.bovenkantHolder .bovenkant .art-menu li a:hover .t.conversie {background-color: var(--color1);}

.bovenkantHolder .bovenkant .headerTelefoon {display: none;}

.extrabovenkantHolder {background-color:var(--color3)}
.extrabovenkantHolder .extrabovenkant .usp {margin-right: auto; margin-left:auto; display: flex; color:#fff; padding: 8px 0; gap: 40px; line-height: 1.1em;}
.extrabovenkantHolder .extrabovenkant .usp > div {font-size: 14px; display: flex; align-items: center; gap: 10px;}
.extrabovenkantHolder .extrabovenkant .usp > div::before {content: "\f00c"; font-family: "Font Awesome 5 Pro";  font-size: 15px; font-weight: normal; color: var(--color4);}

.bovenkantHolder.scrolled .logo img {opacity:1;}
.bovenkantHolder.scrolled {height:105px; box-shadow: 0 .25rem 1.5rem 0 #00000026;}
.bovenkantHolder.scrolled .art-menu li a .t {color:var(--fontColor) !important}
/* .bovenkantHolder.scrolled .bovenkant .art-menu li a .t:hover, .bovenkantHolder.scrolled .bovenkant .art-menu li a.active .t {color: var(--color3) !important;} */
.HeaderExtra {
    position: absolute;
    bottom: 50px;
    z-index: 12;
    width: 400px;
    right:50px;
    /* filter: brightness(2); */
    opacity: 1;
    pointer-events: none;
    height:auto;
    visibility: visible;
}
.HeaderExtra .lijst.certificaten {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}


.art-Sheet {padding: 50px 30px;}
.vak .inhoud {padding: 50px 30px;}

.vak.grijs {background: var(--color2);}
.vak.blauw {background: var(--color1);}
.vak.groen {background: var(--color3);}
.vak.zwart {background: var(--fontColor);}
.vak:is(.blauw, .groen, .zwart), .vak:is(.blauw, .groen, .zwart) :is(a, a:hover, .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5) {color: #FFF;}

.tekstWit, .tekstWit :is(a, a:hover, .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5) {color: #FFF;}
.tekstWit input[type="checkbox"]::before {color:#fff;}


.vak.metFoto  {padding:0;}
.vak.metFoto .grid-2x {position: relative; gap:0; align-items: center;}
.vak.metFoto .tekst {padding: 100px; box-sizing: border-box; align-content: center; padding-right: max(calc((100vw - var(--maxWidth)) / 2 + 30px), 30px);}
.vak.metFoto .tekst h2 {position: relative;}
.vak.metFoto .afbeelding {box-sizing: border-box; line-height:0; height:100%; background-size: cover; background-position: center; min-height:500px;}
.vak.metFoto div[class*="grid"] .afbeelding img {height: 100% !important; object-fit: cover;}

.logoOnderkant::after {content:""; position: absolute; width:300px; height:300px; top:100%; left:50%; transform:translate(-50%, -50%); background: url("/skin/images/beeldmerk.svg")  no-repeat center center; background-size: contain; z-index: 2; *pointer-events: none; box-shadow: 0 0 200px rgba(0,0,0,.5); border-radius: 50%; *border:5px solid #fff; background-color:#fff; text-align: center; line-height: 0; transition: all .3s ease; transform-origin: center center;}
.logoOnderkant:hover::after {transform:translate(-50%, -50%) scale(1.1);}
.formulier.widget label.checkbox {background:rgba(0,0,0,.1); padding:10px 15px; border-radius: 50px; display: inline-block; line-height: 1em; margin:5px;}
.formulier.widget label.checkbox:has(input[type="checkbox"]:checked) {background: var(--color3); }

img.full {max-width: unset; width: 100% !important;}

.vak.metFoto.rechts .afbeelding {order: 2; }
.vak.metFoto.rechts .tekst {padding-right: 100px; padding-left: max(calc((100vw - var(--maxWidth)) / 2 + 30px), 30px);}

.vak.rechtsBlauw {}
.vak.rechtsBlauw .grid-2x>div:nth-child(2) {background-color: var(--color1); padding:var(--space30); border-radius: var(--borderRadius1);}
.vak.rechtsBlauw::before  {width:50%; content:""; position: absolute; top:0; left:50%; bottom:0; background: var(--color1);}
.formulier_holder {position: relative; z-index: 1;}

.vak .inhoud {}
.vak .inhoud .CMSMenu1ul        {opacity:0; max-height: 0;}
.vak .inhoud .knopHouder {text-align:center;}
.vak .inhoud.actief .CMSMenu1ul {columns: 3; column-gap: 30px; position: relative; opacity: 1; max-height: unset;}
.vak .inhoud.actief .knopHouder {display: none;}



/* .CMSMenu1ul {overflow:hidden; transition: all .3s ease; max-height:20px; padding-top:100px !important;} */
/* .vak.groen:has(.CMSMenu1ul) .CMSMenu1ul:hover {height: auto; max-height: unset; padding-top:130px !important;} */

.grid-2x.midden {align-items: center;}
div.grid-2x {gap:var(--space100);}

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(--borderRadius1);}

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: var(--color3); left: 0; top:0; position: absolute }
ul.vinkjes li:empty {display: none;}
/* .groen ul.vinkjes li::before {color: #000;} */

.pageFooterHolder {background: var(--color1);}
.pageFooterHolder .pageFooter {padding: 50px 30px;}
.pageFooterHolder .pageFooter .h2 {font-size: 22px;}
.pageFooterHolder .pageFooter ul {list-style: none; padding: 0; margin: 0;}
.pageFooterHolder .pageFooter ul.sitemap2ul {display: none;}
.pageFooterHolder .pageFooter a {text-decoration: none !important; opacity: 1;}
.pageFooterHolder .pageFooter a:hover {opacity: .5;}

a.offerteMobiel {display: none;}
@media screen and (min-width: 901px) {a.knop.offerteMobiel {display: none !important;}}

a.whatsAppButton {background:#BE9F56; color:#fff; padding:15px; background-color:#49E76F; position: fixed; right:20px; bottom:20px; z-index: 15; border-radius: 100%; aspect-ratio: 1; line-height: 1em;; box-shadow: 0 5px 15px rgba(0,0,0,0.3); box-sizing:border-box; transition: all .3s ease;}
a.whatsAppButton img {width:100%; height:auto;}
a.whatsAppButton:hover {background-color: var(--color1);}

@media screen and (max-width: 1380px) {
  .bovenkantHolder .bovenkant .art-menu li a .t {font-size: 15px; padding: 10px 5px;}
}

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


  :root {  
    --bodyFontSize: 15px;
    --h1Size: 36px;
    --h2Size: 28px;
    --h3Size: 18px;
    --h5Size: 12px;

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

  
  a.logo img {width: 160px;}
  .bovenkantHolder .bovenkant {padding:20px;}
  .bovenkantHolder.scrolled {height: 84px;}

  .HeaderExtra {max-width: 330px; right:50%; transform: translateX(50%);}

  .resMenuHolder {top:80px; padding:40px; border-radius: var(--borderRadius1); box-sizing: border-box; max-width: 90%; background-color:var(--color3); height: calc(100vh - 100px) !important;}
  .resMenuHolder.open {left:5%;}
  .openklapper {width: 30%; padding: 12px; color: #fff;}

  .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {background: #fff; border-radius: 70px; padding: 10px 12px; line-height: 1em; position: absolute; right: 20px; top: 21px; text-align: center; }
  .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop.open {color:#fff; background: var(--color3);}
  .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop.open i {transform:rotate(180deg);}
  .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop i {font-size:18px; width: 16px; transition: all .3s ease;} 
  .resMenublokinhoud .resMenuItem a {border:0; color:#fff; font-size:17px;}
  .resMenublokinhoud .resMenuItem.active > a {color:#fff; font-weight: bold;}

  .bovenkantHolder .bovenkant .headerTelefoon {display: block; font-size: 17px; margin-right: 55px; margin-top: 9px;}
  .bovenkantHolder.scrolled .bovenkant .headerTelefoon {color: #000 !important;}

  .vak {padding: 0;}
  .art-Sheet, section .inhoud, .vak .inhoud {padding: 30px;}
  .vak.rechtsBlauw::before {display: none;}

  a.offerteMobiel {display: block; padding: 13px 20px; right: 20px; z-index: 15;}
  .vak .inhoud.actief .CMSMenu1ul {columns:1; text-align: center;}
  .extrabovenkantHolder .extrabovenkant .usp div:nth-child(2), .extrabovenkantHolder .extrabovenkant .usp div:nth-child(3) {display: none;}
}