@font-face {
  font-family: 'Object Sans';
  src: url('fonts/objectsans-heavy-webfont.woff2') format('woff2'),
      url('fonts/objectsans-heavy-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Object Sans';
  src: url('fonts/objectsans-regular-webfont.woff2') format('woff2'),
      url('fonts/objectsans-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color1: #EC6525;
  --color2: #0c1d37;
  --color3: #f8fafc;

  --fontColor1: #0c1d37;
  --fontColor2: #f8fafc;
  --fontColor3: #8C95AF;
  --fontFamily1: "Object Sans", Helvetica,Arial,Sans-Serif;
  --bodyFontSize: 18px;
  --h1Size: 60px;
  --h2Size: 40px;
  --h3Size: 22px;

  --borderColor1: #8790A9;
  --borderRadius1: 5px;
  --borderRadius2: 10px;

  --maxWidth: 1580px;
  --textSmall: 600px;

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

  --leftFr: 1fr;
  --rightFr: 1fr;

  text-underline-offset: 0.3em;
}

@view-transition {
  navigation: auto;
}

.art-Sheet {max-width: none; padding: 0 !important;}
.art-Sheet .art-sidebar1 {display: none;}

body {font-family: var(--fontFamily1); color: var(--fontColor1); font-size: var(--bodyFontSize); line-height: 1.6em; background-color: var(--color3); overflow-x: hidden !important; position: relative; font-weight: 300;}

.breadcrumbs {display: none;}

textarea, input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"] {border-radius: var(--borderRadius1); font-size: var(--bodyFontSize); font-weight: 300; color: var(--fontColor1); padding: var(--space15); border: none; background-color: var(--color3); border: 1px solid var(--borderColor1);}

textarea, input.verplicht, textarea.verplicht {max-width: 100%; min-width: 100%; background-color: var(--color3);}


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); color: var(--fontColor1); margin: 0 0 0.5em 0; line-height: 1.15em; text-wrap: balance;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover  {font-size: var(--h1Size); color: var(--fontColor1); font-weight: 600;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover  {font-size: var(--h2Size); color: var(--fontColor1); font-weight: 600;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover  {font-size: var(--h3Size); color: var(--fontColor1); font-weight: 600;}
h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover  {font-size: var(--h4Size); color: var(--fontColor1); font-weight: 600;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover  {font-size: var(--h5Size); font-weight: 400; color: var(--fontColor1);}
h6, .h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover  {font-size: var(--h4Size); font-weight: 600; color: var(--color2);}

h1 + div, h2 + div, h3 + div, h4 + div, h5 + div, h6 + div, p + div {padding-top: 1em;}

h1 strong, h2 strong, h3 strong, h4 strong {font-weight: 700;}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, .h1 strong, .h2 strong, .h3 strong, .h4 strong, .h5 strong, .h6 strong {color: var(--color1);}

p.licht {color: var(--fontColor3);}

p strong {font-weight: 600;}

div + p {margin-top: 1em;}


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: "\f058"; font-family: "Font Awesome 5 Pro"; margin-right: 5px; color: var(--color1); left: 0; top:0; position: absolute }
ul.vinkjes li:empty {display: none;}


a.knop, .knop, .button, a.button, button {--_buttonColor: var(--color1); background-color: var(--_buttonColor); color: var(--_fontColor); border: 1px solid var(--_buttonColor); font-size: var(--bodyFontSize); padding: var(--space15) var(--space20); border-radius: var(--borderRadius1); font-family: var(--fontFamily1); text-decoration: none; cursor: pointer; transition: all 0.3s ease; width: fit-content; position: relative;}
a.knop:hover, .knop:hover, .button:hover, a.button:hover, button:hover { background-color: transparent; color: var(--_buttonColor); border-color: var(--_buttonColor); }

.knop.pijltje::after, .button.pijltje::after, button.pijltje::after {content: "\f061"; font-family: 'Font Awesome 5 Pro'; font-size: 16px; margin-left: 0.75em;}

.knop.outline, .button.outline, button.outline { background-color: transparent; color: var(--_buttonColor); border-color: var(--_buttonColor); }
.knop.outline:hover, .button.outline:hover, button.outline:hover { background-color: var(--_buttonColor); color: var(--_fontColor);}

a.knop.color1, .knop.color1, .button.color1, a.button.color1, button.color1 {--_buttonColor: var(--color1); --_fontColor: var(--fontColor2);}
a.knop.color2, .knop.color2, .button.color2, a.button.color2, button.color2 {--_buttonColor: var(--color2); --_fontColor: var(--fontColor2);}
a.knop.color3, .knop.color3, .button.color3, a.button.color3, button.color3 {--_buttonColor: var(--color3); --_fontColor: var(--fontColor1);}

.knop + .knop {margin-left: 1em;}

a.extern {color: var(--color1); text-decoration: none; position: relative;}
a.extern:hover {text-decoration: underline;}
a.extern::after {content: "\f061"; font-family: "Font Awesome 5 Pro"; font-size: 16px; margin-left: 0.75em;}

a.logo img {width: 85px; /* Was 125px */ transition: all 0.3s ease;}

.bovenkantHolder {position: sticky; top: 0; border: 0; transition: all 0.3s ease;}
.bovenkantHolder .bovenkant {padding: 20px 30px;}
.bovenkantHolder .bovenkant .art-menu li a .t {color: var(--fontColor1); font-size: 18px; position: relative; transition: all 0.3s ease;}
.bovenkantHolder .bovenkant .art-menu li a .t::after {content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; width: 0px; height: 2px; background-color: var(--color1); border-radius: 10px; transition: all 0.3s ease;}
.bovenkantHolder .bovenkant .art-menu li a:hover .t::after, .bovenkantHolder .bovenkant .art-menu li a.active .t::after {width: calc(100% - 16px);}

.bovenkantHolder.scrolled .bovenkant a.logo img {width: 85px;}


.resMenuHolder {background-color: var(--color3); top: 100%;}
.resMenublokinhoud {padding: 20px;}
.resMenublokinhoud .resMenuItem a {border-bottom: none; font-size: 16px; transition: all 0.3s ease;}
.resMenublokinhoud .resMenuItem.active a {color: var(--color1);}
.resMenublokinhoud .resMenuItem:hover a {color: var(--color1); opacity: 1;}


.vak .inhoud {padding: var(--space60) var(--space30);}

.inhoud.max1200 {max-width: 1200px; margin-left: auto; margin-right: auto;}

.vak.color1 {background-color: var(--color1);}
.vak.color2 {background-color: var(--color2); color: var(--fontColor2);}
.vak.color2 h2, .vak.color2 h3, .vak.color2 h5 {color: var(--fontColor2);}
.vak.color3 {background-color: #fff;}


.blok {padding: var(--space30); border-radius: var(--borderRadius2); background-color: var(--color3);}
.blok.color1 {background-color: var(--color1);}
.blok.color2 {background-color: var(--color2);}
.blok.color3 {background-color: #FFF;}


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


.pageFooterHolder {background-color: var(--color2); padding-top: 45px;}
.pageFooterHolder .pageFooter {color: var(--fontColor2); border-top: 1px solid #354577; border-bottom: 1px solid #354577; padding: 45px var(--space30) var(--space30) var(--space30);}
.pageFooterHolder .pageFooter .h3 {color: var(--fontColor2);}
.pageFooterHolder .pageFooter a {opacity: 0.9; text-decoration: none; transition: all 0.3s ease;}
.pageFooterHolder .pageFooter a:hover {opacity: 1; text-decoration: none; color: var(--color1);}
.pageFooterHolder .pageFooter ul:has(.STPMenu1li) {list-style: none; padding: 0;}
.pageFooterHolder .pageFooter p, .pageFooterHolder .pageFooter ul li.STPMenu1li  {margin-bottom: 0.5em;}

.pageFooterKnoppenHolder {background-color: var(--color2);}
.pageFooterKnoppenHolder .pageFooterKnoppen {order: -1;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {order: 1; margin: auto 0 auto auto; display: flex; gap: var(--space10);}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {opacity: 0.75;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a {opacity: 0.75;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a:hover {opacity: 1;}


.privacyMelding {max-width: 600px; border-radius: var(--borderRadius1); background: var(--color2);}
.privacyMelding .inhoud {padding-bottom: 0; color: var(--fontColor2);}
.privacyMelding .inhoud .titel {color: var(--fontColor2);}
.privacyMelding .inhoud .titel::before {content: "\f563"; color: var(--fontColor2);}
.privacyMelding .knoppen {background: unset; padding-top: 0;}
.privacyMelding .knoppen a.knop {background: #fff; color: var(--fontColor1); border-color: #FFF;}
.privacyMelding .knoppen a.knop.akkoord {background: var(--color1); color: #fff; border-color: var(--color1);}

.privacyMelding .knoppen a.knop:hover {background: var(--color3); color: var(--fontColor1);}


div[class*="grid"].center {align-items: center;}
div.grid-2x {grid-template-columns: var(--leftFr) var(--rightFr); gap: var(--space50);}
div[class*="grid"].left2Fr {--leftFr: 2fr;}
div[class*="grid"].right2Fr {--rightFr: 2fr;}
div[class*="grid"].left3Fr {--leftFr: 3fr;}
div[class*="grid"].right3Fr {--rightFr: 3fr;}

@media screen and (max-width: 900px) {
  :root {
    --bodyFontSize: 16px;
    --h1Size: 35px;
    --h2Size: 27px;
    --h3Size: 20px;
    --h4Size: 18px;
    --h5Size: 16px;

    --space5: 5px;
    --space10: 10px;
    --space15: 10px;
    --space20: 10px;
    --space25: 15px;
    --space30: 20px;
    --space40: 20px;
    --space50: 20px;
    --space60: 30px;
    --space80: 30px;
    --space100: 30px;
    --space200: 50px;
  } 

  a.logo img {width: 55px; /* Was 75px */}
  .bovenkantHolder.scrolled .bovenkant a.logo img {width: 55px;}

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

@media screen and (max-width: 680px) {
  .pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {margin: unset; margin-top: 10px;}
}