:root {
  --color1: #f47321;
  --color2: #174368;
  --color3: #042743;
  --fontColor: #666666;
  --fontFamily1: "Open Sans", Helvetica, Arial, sans-serif;
  --bodyFontSize: 15px;
  --h1Size: 35px;
  --h2Size: 25px;
  --h3Size: 18px;
  --h5Size: 16px;
  --maxWidth: 1580px;
  --textSmall: 1000px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 5px;
}  

body {font-family: var(--fontFamily1); font-weight: 300; color: var(--fontColor); background: #FFF; 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: var(--borderRadius1); background: #FFF; color: #666; padding: 12px 10px;}

li::marker {color: var(--color1);}

.breadcrumbs {display: none;}

main {background:url("/skin/images/q.png") no-repeat 80% top #f1f1f1;}
.art-Sheet .art-sidebar1 {width: 380px; padding-right:40px;}
.art-Sheet .art-sidebar1 .art-Block {margin: 0; background: #fff; padding: 30px; box-sizing: border-box; border-radius: var(--borderRadius1);}
.art-Sheet .art-sidebar1 .art-Block .h2 {margin: 0;}

.CMSMenuLink1li, .CMSMenuLink1liSel {font-family: var(--fontFamily1) !important; color: var(--fontColor) !important; font-size: 14px; border-bottom: 1px solid #ddd; padding: 10px 5px; display: flex; align-items: center; gap: 30px;}
.CMSMenuLink1li::after, .CMSMenuLink1liSel::after {content: "\f105"; font-family: "Font Awesome 5 Pro"; margin: auto 0 auto auto; font-size: 16px;}
.CMSMenuLink1liSel, .CMSMenuLink1liSel::after {color: var(--color1) !important; font-weight: normal !important; font-weight: bold !important;}

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: normal; color: var(--color2); 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);}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); color: #08224E;}

/* ul {padding-left: 0;} */

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

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 {mix-blend-mode: multiply}

a.knop, .button, a.button, button {position: relative; font-family: var(--fontFamily1); background-color: var(--color1); margin-bottom: 0.5em; color: #FFF; border: 0; font-size: 15px; padding: 15px 25px; cursor: pointer; line-height: 1; text-decoration: none !important; font-weight: 500; border-radius: var(--borderRadius1);}
a.knop::after {content: "\f105"; font-family: "Font Awesome 5 Pro"; margin-left: 10px; vertical-align: middle;}

a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--color2);}

h1 + p {font-size:18px; line-height: 1.85em; color:var(--color2);} 
h5 + p {font-size:18px; line-height: 1.85em; color:var(--color2);}

.bovenkantHolder {position: sticky; top: 0; border: 0; border-bottom: 0; box-shadow: 0 0 20px rgba(0,0,0,.05);}
.bovenkantHolder .bovenkant {min-height: 100px;}
.bovenkantHolder .bovenkant .art-menu {display: flex; gap: 35px;}
.bovenkantHolder .bovenkant .art-menu li a .t {font-family: var(--fontFamily1); color: var(--color2); padding: 10px 0;}
.bovenkantHolder .bovenkant .art-menu li a .t:hover, .bovenkantHolder .bovenkant .art-menu li a.active .t {color: var(--color1);}

.art-menu > li > a:has(.kol2) + ul {columns: 2; gap:20px; }

.art-menu > li > ul {top:60px !important; border:0; padding:20px; font-size:15px; font-weight: 400; color:var(--fontColor); box-shadow:0 10px 20px rgba(0,0,0,.2); left:unset; right:-40px;}
.art-menu ul:before {border:0; left:0; top:-30px; right:0; height:30px; z-index:2; display: block; width: auto;}
.art-menu ul li:nth-last-child(2) a {}
.art-menu ul li a {color: var(--fontColor); width:unset; min-width:260px;}
.art-menu ul li li a {opacity: .7;}
.art-menu ul li a.active {color:var(--color1); font-weight: 600;}

.art-menu li li > ul {display:none!important; position: relative; top:unset !important; border: 0; left: unset !important; box-shadow: none; font-size: 14px; margin-left: 30px; top:unset; visibility: visible; opacity:1;}
.art-menu li li > ul ul {display: none !important;}
.art-menu ul li li a::before {display: none;}



section .inhoud, .vak .inhoud {padding: 60px 30px;}
.vak.wit {background:#fff;}

.grid-3x.home > div {background: #FFF; padding: 30px; border-radius: var(--borderRadius1);}

.tekst-met-voordelen {display: grid; grid-template-columns: 1fr 400px; gap:40px;}
.voordelen a.knop {width: 100%; box-sizing: border-box; display: block; text-align: center;}
.voordelen .sticky {position: sticky; top: 130px; background: #fff; padding: 30px; border-radius: var(--borderRadius1);}
.voordelen p:last-of-type {margin-bottom: 0;}
.voordelen img {mix-blend-mode: multiply; margin: 20px 0 0 0;}
.voordelen ul {list-style: none; padding-left: 20px; margin: 10px 0 15px; position: relative;}
.voordelen ul li {line-height: 1.75em; margin-bottom: 0.3em;}
.voordelen ul li:before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; position: absolute; color: var(--color1); left: 0px; padding: 0;}

.pageFooterHolder {background: var(--color3);}
.pageFooterHolder .pageFooter {color: #9496b8; font-size: 13px; padding-top:60px; padding-bottom:60px;}
.pageFooterHolder .pageFooter a {color: #9496b8; text-decoration: none;}
.pageFooterHolder .pageFooter .h2 {font-size: 18px;}

.pageFooterKnoppenHolder {background: #02192b;}
.pageFooterKnoppenHolder .pageFooterKnoppen {color: #9496b8; font-size: 13px; padding:20px 30px;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1;}

.uniekeForm {background: #fff;padding: 50px;box-sizing: border-box;border-radius: var(--borderRadius1);max-width: 800px;margin: 0 auto;}
.uniekeForm a.knopVersturen {float: right; margin: 20px 0 0 0;}


/* Test verbeteringen */
.bovenkantHolder .bovenkant .art-menu li a .t {    font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;}
h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-weight: 800;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-weight: 800;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-weight: 700;}



/* Sitemap naar 1 lijst */
.sitemap1 {}
.sitemap1ul > li {float:none; width:100%;}

@media screen and (max-width: 900px) {
  :root {  
    --h1Size: 30px;
    --h2Size: 25px;
    --h5Size: 20px;
 
    --space10: 10px;
    --space15: 15px;
    --space20: 10px;
    --space30: 20px;
    --space40: 20px;
    --space50: 25px;
    --space80: 40px;
    --space100: 50px;
 }

  a.logo img {width: 170px;}

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

  .tekst-met-voordelen {grid-template-columns: 1fr;}
}