:root {
  --color1: #003062;
  --color2: #ED9F2D;
  --color3: #F2F4F7;
  --color4: #E6EFF4;
  --color6: #003a55;
  --fontColor: #606060;
  --fontFamily1: "Open Sans", Helvetica, Arial, sans-serif;
  --fontFamily2: "Playfair Display", Helvetica, Arial, sans-serif;
  --bodyFontSize: 16px;
  --h1Size: 75px;
  --h2Size: 40px;
  --h3Size: 27px;
  --h4Size: 16px;
  --h5Size: 20px;
  --maxWidth: 1480px;
  --space5: 5px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space25: 25px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 5px;
  --borderRadius2: 25px;
  --leftFr: 1fr;
  --rightFr: 1fr;
}

body {font-family: var(--fontFamily1); font-weight: normal; color: var(--fontColor); background: #FFF; font-size: var(--bodyFontSize); line-height: 1.95em; overflow-x: hidden;}
::selection {background: var(--color1); 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_holder.onboarding {background-color: var(--color3); padding: var(--space50);}
.formulier_holder.onboarding h2, .formulier_holder.onboarding h3  {margin-top:30px;}
.formulier_holder.onboarding .formulier.widget table:first-child h3 {margin-top:0px;}

.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(--fontFamily2); font-weight: 700; 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 {font-size: var(--h1Size);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size);}
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); font-family: var(--fontFamily1); text-transform: uppercase; font-weight: normal; letter-spacing: 0.25em;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-weight: normal; color: #999;}

h2 strong {font-weight: bold; color: var(--color2);}

h4 + h1 {margin-top: -0.25em; margin-bottom: 0.35em;}

a.telefoon {text-decoration: none;}
a.mail {text-decoration: none;}
a.telefoon::before {content: "\f879"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: var(--color2);}
a.mail::before {content: "\f0e0"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: var(--color2);}

blockquote {display: block; margin: 0px 0px var(--space40) var(--space40); width: 30%; float: right; text-align: left; position: relative; padding: var(--space100) var(--space50) var(--space50) var(--space50); background: var(--color3); width: 500px; box-sizing: border-box;}
blockquote::before {content: ""; position: absolute; left: 0; bottom: 0; top: unset; background: var(--color2); width: 3px; height: 70%;}
blockquote::after {display: none;}
blockquote h3 {margin: 0;}

.max700 blockquote {width: 100%; float: unset; margin: var(--space40) 0; padding: var(--space50);}

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

a.knop, .button, a.button, button {font-family: inherit; font-size: var(--bodyFontSize); padding: 18px 30px; border-radius: var(--borderRadius2); background: var(--color1); line-height: 1; font-weight: 500; text-decoration: none !important; text-transform: uppercase; letter-spacing: 0.06em;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--color1);}

a.knop.twee {background: var(--color2);}

a.knop.terug {margin: var(--space20) auto 0 0; background: unset; color: var(--color2); padding: 10px 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--color2); font-size: 15px;}
a.knop.terug::after {display: none;}

.melding {text-align: center; padding: var(--space20); box-sizing: border-box; display: flex; background: var(--color3);}
.melding img {margin: auto;}

.extrabovenkantHolder {position: relative; background: var(--color1);}
.extrabovenkantHolder .extrabovenkant {position: relative; display: flex ; padding: 11px var(--space30); max-width: var(--maxWidth); margin: 0 auto; box-sizing: border-box; font-size: 14px;}

.extrabovenkantHolder .extrabovenkant ul {list-style: none; margin: auto 0 auto auto; padding: 0; display: flex; gap: var(--space20);}
.extrabovenkantHolder .extrabovenkant ul li a {text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 13px; color: #FFF;}
.extrabovenkantHolder .extrabovenkant ul li a.inloggen {color: var(--color2);}
.extrabovenkantHolder .extrabovenkant ul li a.inloggen::before {content: "\f007"; font-family: "Font Awesome 5 Pro"; margin-right: var(--space10); font-weight: normal;}
.extrabovenkantHolder .extrabovenkant ul li a:hover {opacity: .6;}

.bovenkantHolder {position: sticky; top: 0; border: 0; box-shadow: 0 0 20px rgba(0,0,0,.1);}
.bovenkantHolder .bovenkant {min-height: 95px; max-width: var(--maxWidth);}

.bovenkantHolder .bovenkant .art-menu {position: static; display: flex; gap: var(--space30); align-items: center;}
.bovenkantHolder .bovenkant .art-menu li {position: static;}
.bovenkantHolder .bovenkant .art-menu li a .t {color: var(--color1); padding: 0;}
.bovenkantHolder .bovenkant .art-menu li a.active .t, .bovenkantHolder .bovenkant .art-menu li a .t:hover {color: var(--color2);}

.bovenkantHolder .bovenkant .art-menu li.hoverMenuActief .t::after {font-size: 12px; content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: normal; margin: auto auto auto 5px; color: var(--fontColor);}
.bovenkantHolder .bovenkant .art-menu li.hoverMenuActief > a {position: relative;}
.bovenkantHolder .bovenkant .art-menu li.hoverMenuActief > a:hover::after {content: ""; position: absolute; left:-200px; right:-100px; height: 40px; padding: 0; box-sizing: border-box;}

.bovenkantHolder .bovenkant .art-menu li a .t.conversie {padding: 18px 30px; border-radius: var(--borderRadius2); background: var(--color2); font-weight: 500; color: #FFF; text-align: center; text-transform: uppercase; letter-spacing: 0.06em;}
.bovenkantHolder .bovenkant .art-menu li a .t.conversie:hover {background-color: var(--color1);}

.art-Sheet {max-width: var(--maxWidth); padding: var(--space100) var(--space30);}

section .inhoud, .vak .inhoud {max-width: var(--maxWidth); padding: var(--space100) var(--space30);}

.vak {position: relative;}
.vak.lichtblauw {background: var(--color3);}

.vak.boven-lichtblauw-50::after {content: ""; position: absolute; background: var(--color3); width: 100%; left: 0; right: 0; height: 50%; top: 0; z-index: -1;}

.vak.links-geleLijn::before {content: ""; position: absolute; left: 0; top: 0; background: var(--color2); width: 3px; height: 70%;}
.vak.rechts-blauweRand::after {content: ""; position: absolute; right: 0; top: 0; bottom: 0; background: var(--color1); width: 80px; height: 100%;}

.inhoud.max700 {max-width: 700px;}
.inhoud.max900 {max-width: 900px;}
.inhoud.max1000 {max-width: 1000px;}

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

/* ul en li's met dunne horizontale streepjes ervoor */
.vak .inhoud ul {list-style: none; padding-left:50px; position: relative;}
.vak .inhoud li {margin:0.5em 0; line-height: 1.6em;}
.vak .inhoud li::before {content: ""; position: absolute; width: 24px; height: 2px; left:10px; background: var(--color2); display: inline-block; transform:translateY(11px);}

.vak .grid-2x > .color1 {
  padding:var(--space50); background-color: var(--color1); color:#fff;
  h1, h2, h3, h4, h5 {color:#fff;}
  a.knopVersturen {background-color:#fff; color: var(--color1);}
}


.grid-2x {grid-template-columns: var(--leftFr) var(--rightFr);}

div[class*="grid"] {gap: var(--space30);}

div[class*="grid"].left-2fr {--leftFr: 2fr;}
div[class*="grid"].right-2fr {--rightFr: 2fr;}
div[class*="grid"].left-3fr {--leftFr: 3fr;}
div[class*="grid"].right-3fr {--rightFr: 3fr;}
div[class*="grid"].left-4fr {--leftFr: 4fr;}
div[class*="grid"].right-4fr {--rightFr: 4fr;}

div[class*="grid"].gap-50 {gap: var(--space50);}
div[class*="grid"].gap-80 {gap: var(--space80);}
div[class*="grid"].gap-100 {gap: var(--space100);}

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

div[class*="grid"].count > div {position: relative; counter-increment: section;}
div[class*="grid"].count > div p:last-of-type { margin: 0;}
div[class*="grid"].count > div::after {content: counter(section, decimal-leading-zero) "."; display: block; font-size: var(--h2Size); color: var(--color1); font-weight: 600; opacity: .1; text-align: right;}

p.intro {font-size: 20px; line-height: 1.85em;}

.blok {background: var(--color3); padding: var(--space80) var(--space100); box-sizing: border-box; font-size: 20px; line-height: 1.85em;}

.blok.blauw {background: var(--color1); color: #B3C1D0;}
.blok.blauw h2 {color: #FFF;}

footer {overflow: hidden; width: 100%;}
.pageFooterHolder {position: relative; background: var(--color1);}
.pageFooterHolder::before {content: ""; position: absolute; right: 0; top: -3px; background: var(--color2); width: 60%; height: 3px; z-index: 1;}
.pageFooterHolder::after {content: ""; position: absolute; background: url(/skin/images/footer.png) no-repeat right bottom; width: 566px; height: 268px; display: block; background-position: right; right: -10%; bottom: 0; pointer-events: none;}

.pageFooterHolder .pageFooter {max-width: var(--maxWidth); padding: var(--space80) var(--space30); color: #B3C1D0;}
.pageFooterHolder .pageFooter .h2 {font-size: var(--h3Size);}
.pageFooterHolder .pageFooter h2 {font-size: 34px;}
.pageFooterHolder .pageFooter a {text-decoration: none; color: #B3C1D0;}
.pageFooterHolder .pageFooter a.knop {color: #FFF;}

.pageFooterHolder .pageFooter .grid-3x {grid-template-columns: 1fr 1fr 1fr;}

.pageFooterHolder .pageFooter ul {margin: 0 0 1em 0; padding: 0; list-style: none;}
.pageFooterHolder .pageFooter ul li {padding: 0; padding-left: 35px; position: relative; display: flex; align-items: center;}
.pageFooterHolder .pageFooter ul li::before {content: ""; background: url(/skin/images/arrow.svg); height: 8px; width: 26px; background-size: contain; position: absolute; left: 0; background-repeat: no-repeat;}

.pageFooterHolder .pageFooter hr {opacity: 0.4; background-image: linear-gradient(180deg, #FFFFFF 0%, #003062 100%);}

.pageFooterKnoppenHolder {background: #002954;}
.pageFooterKnoppenHolder .pageFooterKnoppen {max-width: var(--maxWidth); color: var(--fontColor); padding: var(--space20) var(--space30); color: #B3C1D0;}
.pageFooterKnoppenHolder .pageFooterKnoppen .seperator {opacity: 0; margin: 0 5px;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1;}

.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {color: var(--color2);}

.resMenuHolder {background-color: var(--color3); box-sizing: border-box; top: 100%; padding: 30px 10px;}
.resMenublokinhoud .resMenuItem a {border-bottom: 0; color: var(--fontColor); font-size: 15px;}
.resMenublokinhoud .laag1 .resMenuItem a {font-size: 12px; padding: 5px 30px;}
.resMenublokinhoud .resMenuItem.active > a {color: var(--color2);}
.openklapper {top: 2px; transition: all .3s ease;}

.hoverMenu {background-color:unset; left: 0; right: 0; width: 100%; max-width: var(--maxWidth); overflow: unset; margin: 0 auto; border-radius: 0; box-shadow: unset; transform: unset; top: 100%; display: grid; grid-template-columns: 2fr 3fr;}
.hoverMenu::after {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--color3); z-index: -1; backdrop-filter: blur(10px);}
.hoverMenu.actief {opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0px); z-index: 11; }

.hoverMenu .categorie {position: relative; padding: 0; display: flex; flex-direction: column;}
.hoverMenu .categorie::before {background: var(--color1); content: ""; top: 0; bottom: 0; right: 0; width: 50vw; position: absolute;}

.hoverMenu .categorie blockquote {position: relative; margin: auto 0; z-index: 1; color: #FFF; text-align: left; padding: var(--space30); box-sizing: border-box; float: unset; background: unset; width: unset;}
.hoverMenu .categorie blockquote::after {
    content: "\201D";
    font-family: var(--fontFamily2);
    position: absolute;
    bottom: 0;
    right: 45%;
    left: unset;
    border: 0;
    height: unset;
    width: unset;
    background: unset;
    font-size: 100px;
    font-weight: 100;
    opacity: .1;
    display: block;
    transform: scale(8);
    transform-origin: top;
}

.hoverMenu .categorie blockquote h3 {color: #FFF; font-size: 50px;}
.hoverMenu .categorie blockquote span {font-size: 14px; letter-spacing: 0.25em; color: #B3C1D0; text-transform: uppercase; position: relative; display: flex; gap: var(--space20); align-items: center; margin: var(--space30) 0 0 0;}
.hoverMenu .categorie blockquote span::before {content: ""; position: relative; width: 50px; height: 2px; background: #FFF;}

.hoverMenu .categorie blockquote::before {display: none;}

.hoverMenu .kolommen {display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: var(--space40); box-sizing: border-box;}
.hoverMenu .kolommen .kolom {position: relative; width: 100%; counter-increment: section; cursor: pointer; background-color: var(--color3); padding: var(--space30); box-sizing: border-box; border-radius: var(--borderRadius1); transition: all .3s ease;}
.hoverMenu .kolommen .kolom::after {content: counter(section, decimal-leading-zero) "."; display: block; font-size: var(--h2Size); color: var(--color1); font-weight: 600; opacity: .1; position: absolute; right:20px; bottom:20px;}

.hoverMenu .kolommen .kolom .titel a {font-family: var(--fontFamily2); color:var(--color1); font-weight: bold; font-size: var(--h3Size); text-decoration: none; line-height: 1.35em; margin: 0 0 0.5em 0;}
.hoverMenu .kolommen .kolom:hover .titel a {color: var(--color2);}
.hoverMenu .kolommen .kolom:hover {color: var(--color1);}
.hoverMenu .kolommen .kolom:hover {background:#fff;}

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: 900px) {
  :root {
    --h1Size: 35px;
    --h2Size: 25px;
    --h3Size: 18px;
    --h5Size: 18px;
    --space5: 5px;
    --space10: 5px;
    --space15: 10px;
    --space20: 10px;
    --space25: 10px;
    --space30: 20px;
    --space40: 20px;
    --space50: 20px;
    --space80: 30px;
    --space100: 30px;
  } 
  
  a.logo img {width: 200px;}

  .bovenkantHolder .bovenkant {min-height: unset;}

  .vak {padding: 0;}

  .pageFooterHolder .pageFooter .grid-3x {grid-template-columns: 1fr;}

}