:root {
  --color1: #19A2A4;
  --color2: #E08318;
  --color3: #0b7e7f;
  --color4: #f5f5f5;
  --color5: #0a8a8b;

  --fontColor1: #000000;
  --fontColor2: #FFFFFF;
  --fontFamily1: "Open Sans", Helvetica,Arial,Sans-Serif;
  --fontFamily2: "Open Sans Condensed", Helvetica,Arial,Sans-Serif;
  --bodyFontSize: 16px;
  --h1Size: 70px;
  --h2Size: 40px;
  --h3Size: 29px;
  --h4Size: 24px;
  --h5Size: 16px;

  --borderColor1: #d5d8dc;
  --borderRadius1: 999px;

  --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;
}

.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: #FFF; overflow-x: hidden; position: relative;}

.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(--borderRadius4); font-size: var(--bodyFontSize); font-weight: 300; color: var(--fontColor1); padding: var(--space15); border: none;  background-color: var(--color4);}

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


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

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover  {font-size: var(--h1Size); color: var(--_fontColor1); font-weight: 700;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover  {font-size: var(--h2Size); color: var(--_fontColor2); font-weight: 700;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover  {font-size: var(--h3Size); color: var(--_fontColor1); font-weight: 700;}
h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover  {font-size: var(--h4Size); color: var(--_fontColor1); font-weight: 700;}
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, h5 strong, h6 strong {color: var(--color2);}

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

.vak ul {padding-left: 0; list-style: none;}
.vak ul li {position: relative; padding-left: .9em;}
.vak ul li::before {position: absolute; left: 0; color: var(--color1); font-family: "Font Awesome 5 Pro"; content: "\f111"; font-weight: 900; font-size: 0.5em;}

.vak ul.vinkjes {padding-left: 0; list-style: none;}
.vak ul.vinkjes li {position: relative; padding-left: 1.5em;}
.vak ul.vinkjes li::before {position: absolute; left: 0; color: var(--color1); font-family: "Font Awesome 5 Pro"; content: "\f00c"; font-size: 1em;}


a.knop, .knop, .button, a.button, button.knop {padding: var(--space15) var(--space20); background-color: var(--color2); color: var(--fontColor2) !important; font-family: var(--fontFamily1); font-weight: 600; border-radius: 0; font-size: var(--bodyFontSize); width: fit-content;}
a.knop:hover, .knop:hover, .button:hover, a.button:hover, button.knop:hover {color: var(--fontColor2); text-decoration: none; filter: brightness(115%);}
a.knop.color1, .knop.color1, .button.color1, a.button.color1, button.knop.color1 {background-color: var(--color1);}

p a, li a {color: var(--color1) !important; text-decoration: none !important;}
p a:hover, li a:hover {text-decoration: underline !important;}


.extrabovenkantHolder {background-color: var(--color1); color: var(--fontColor2); font-size: 14px;}
.extrabovenkantHolder a {color: var(--fontColor2) !important; text-decoration: none; font-size: 14px;}
.extrabovenkantHolder .extrabovenkant {align-items: center; padding: var(--space10) var(--space30);}
.extrabovenkantHolder .extrabovenkant .usp {display: flex; gap: var(--space30);}
.extrabovenkantHolder .extrabovenkant .knop.support {margin-left: auto; padding: var(--space10); font-variant: var(--space15);}

.bovenkantHolder {border: 0; font-size: var(--bodyFontSize); position: sticky; top: 0; box-shadow: 0 0 20px rgba(0, 0, 0, .05);}
.bovenkantHolder .bovenkant {padding: var(--space20) var(--space30);  transition: all 0.3s ease;}
.bovenkantHolder .bovenkant .art-menu li a {text-decoration: none !important; font-weight: normal;}
.bovenkantHolder .bovenkant .art-menu li a .t { font-size: 18px; transition: all 0.3s ease;}
.bovenkantHolder .bovenkant .art-menu li a .t:hover, .bovenkantHolder .bovenkant .art-menu li a.active .t {color: var(--color1);}

.bovenkantHolder .bovenkant .art-menu li:hover > ul::after {content: ""; height: var(--space40); top: calc(-1 * var(--space40)); left: 0; right: 0; width: 100%; position: absolute; }
.bovenkantHolder .bovenkant .art-menu li:hover > ul {border: none; padding: var(--space10); top: calc(100% + var(--space40)); left: -5px;}
.bovenkantHolder .bovenkant .art-menu li:hover > ul::before {content: none;}
.bovenkantHolder .bovenkant .art-menu li:hover > ul li a {border: none; color: var(--fontColor1) !important; transition: all 0.3s ease;}
.bovenkantHolder .bovenkant .art-menu li:hover > ul li a.active, .bovenkantHolder .bovenkant .art-menu li:hover > ul li a:hover {color: var(--color1) !important; background-color: transparent;}
.bovenkantHolder .bovenkant .art-menu li:hover > ul li a::before {content: none;}


.resMenuHolder                                            {box-sizing: border-box; padding: 15px 20px; top: 0; min-height: 100dvh;}
.resMenucategorieknop                                     {color: #000; z-index: 3;}
.resMenublokinhoud                                        {padding-top: 10px;}
.resMenublokinhoud .resMenuItem a                         {font-size: 20px; border-bottom:0; font-family: var(--fontFamily1); font-weight: 600; color: var(--fontColor1) !important; text-decoration: none; font-size: var(--bodyFontSize);}
.resMenublokinhoud .resMenuItem a:hover                   {color: var(--color1) !important; text-decoration: none !important;}
.resMenublokinhoud .resMenuItem:has(div.openklapper) a    {width: fit-content; z-index: 1; position: relative;}
.resMenublokinhoud .resMenuItem.active>a                  {color: var(--color1) !important;}
.resMenublokinhoud .resMenuItem.active>div.openklapper    {color: var(--color1);}
.resMenuItemHolder                                        {transition: all .3s ease;}
.resMenuItemHolder.openklapper                            {max-height: 300px !important;}
.openklapper                                              {top: 2px; transition: all .3s ease;}
.openklapper::before                                      {transition: all .3s ease;}


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

a.logo img {width: 220px; transition: all 0.3s ease;}


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


.vak {--_backgroundColor: transparent; --_fontColor2: var(--color1); --_fontColor1: var(--fontColor1); background-color: var(--_backgroundColor); color: var(--_fontColor1);}
.vak .inhoud {max-width: var(--maxWidth); padding: var(--space80) var(--space30); position: relative; box-sizing: border-box;}

.vak.color1  {--_backgroundColor: var(--color1); --_fontColor1: var(--fontColor2); --_fontColor2: var(--fontColor2);}
.vak.color2  {--_backgroundColor: var(--color2); --_fontColor1: var(--fontColor2); --_fontColor2: var(--fontColor2);}
.vak.color3  {--_backgroundColor: var(--color3); --_fontColor1: var(--fontColor2); --_fontColor2: var(--fontColor2);}
.vak.color4  {--_backgroundColor: var(--color4);}


ul.contact {padding: 0;}
ul.contact li {margin-bottom: 20px; padding-left: 1.5em; display: flex;}
ul.contact li::before {display: block;}
ul li.adres::before {content: "\f3c5"; font-family: "Font Awesome 5 Pro"; font-weight: 900; color: #f1962d; margin-right: 10px; font-size: var(--bodyFontSize);}
ul li.telefoon::before {content: "\f879"; font-family: "Font Awesome 5 Pro"; font-weight: 900; color: #f1962d; margin-right: 10px; font-size: var(--bodyFontSize);}
ul li.email::before {content: "\f0e0"; font-family: "Font Awesome 5 Pro"; font-weight: 900; color: #f1962d; margin-right: 10px; font-size: var(--bodyFontSize);}
ul li.adres::marker, ul li.telefoon::marker, ul li.email::marker {content: none;}

table, td, th {border: 1px solid var(--borderColor1);}
td, th {padding: var(--space10); text-align: left;}

.afbeeldingOverlay {display: grid; grid-template-columns: 1fr 1fr 1fr; height: fit-content;}
.afbeeldingOverlay img {display: block; width: 100%; height: auto;}

.afbeeldingOverlay img:nth-of-type(1) {grid-area: 1 / 1 / 1 / 3; width: 100% !important;}
.afbeeldingOverlay img:nth-of-type(2) {grid-area: 1 / 2 / 1 / 4; border: 4px solid #fff; width: 65% !important; margin: auto 35% var(--space20) auto;}


.pageFooterHolder {background-color: var(--color5);}
.pageFooterHolder .pageFooter {max-width: var(--maxWidth); padding: var(--space60) var(--space30) var(--space60);}
.pageFooterHolder .pageFooter .grid-4x {gap: var(--space50); grid-template-columns: 1fr 1fr 1fr 1fr;}
.pageFooterHolder .pageFooter .h4 {color: rgba(255, 255, 255, 0.7);}
.pageFooterHolder .pageFooter ul:has(.STPMenu1li) {list-style: none; padding: 0; }
.pageFooterHolder .pageFooter ul .STPMenu1li a {font-weight: 400; font-size: var(--bodyFontSize);}
.pageFooterHolder .pageFooter ul.sitemap2ul {display: none;}
.pageFooterHolder .pageFooter ul li {padding: 0;}

.pageFooterHolder a {color: var(--fontColor2) !important; text-decoration: none;}
.pageFooterHolder a:hover {text-decoration: underline;}

.pageFooterKnoppenHolder .pageFooterKnoppen {max-width: var(--maxWidth); padding: var(--space30); justify-content: center;}
/* .pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {display: none;} */
.pageFooterKnoppenHolder {background-color: var(--color3); border-top: 1px solid #FFFFFF24;}
.pageFooterKnoppenHolder a {color: var(--fontColor2) !important; text-decoration: none;}
.pageFooterKnoppenHolder a:hover {text-decoration: underline;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1; color: #ffffff80;}


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: 1300px) {
  :root {
    --bodyFontSize: 16px;
    --h1Size: 50px;
    --h2Size: 27px;
    --h3Size: 20px;
    --h4Size: 18px;
    --h5Size: 16px;
  } 
}


@media screen and (max-width: 1000px) {
.pageFooterHolder .pageFooter .grid-4x {gap: var(--space50); grid-template-columns: 1fr 1fr;}
}

@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;
  } 
  
  .extrabovenkantHolder {display: none;}

  .bovenkantHolder.scrolled .bovenkant a.logo img {width: 130px;}
  a.logo img {width: 130px; transition: all 0.3s ease;}

  .grid-2x {grid-template-columns: 1fr !important; gap: var(--space30) !important;}
  .pageFooterHolder .pageFooter .grid-4x {gap: var(--space50); grid-template-columns: 1fr;}
}