:root {
  --color1: #1285A3;
  --color2: #505050;
  --color3: #909090;
  --fontColor: #000;
  --fontFamily1: 'custom-font' ,'montserrat', sans-serif;
  --fontFamily2: 'inter', sans-serif;
  --bodyFontSize: 17px;
  --h1Size: 54px;
  --h2Size: 45px;
  --h3Size: 31px;
  --h4Size: 17px;
  --h5Size: 15px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 22px;
  --borderRadius2: 9999px;
}

@view-transition {
  navigation: auto;
}

body    {font-family: var(--fontFamily2); font-size: var(--bodyFontSize); font-weight: 400; color: var(--color2);}
a       {text-underline-offset: 0.2em; text-decoration-thickness: 1px !important;}
a:hover {text-underline-offset: 0.25em; text-decoration: underline;}

.breadcrumbs {display: none;}

.art-Sheet {max-width: none; padding: 0 !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(--font1); font-weight: bold; color: var(--fontColor); margin: 0 0 0.5em 0;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size); line-height: 1em; font-family: var(--fontFamily1); font-weight: 700;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size); font-family: var(--fontFamily1); font-weight: 700;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size); font-family: var(--fontFamily1); font-weight: normal;}
h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {font-size: var(--h4Size); font-family: var(--fontFamily1); font-weight: 200;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-weight: normal; color: var(--color1);}


strong, b                                                    {color: var(--color1);}
a, a:link, a:visited, a.visited, a:hover, a.hover            {color: inherit;}
a.knop, .button, a.button, button                            {padding: var(--space10) var(--space20); background-color: #1285A3; font-family: var(--font2); font-weight: 600; color: #fff; border-radius: var(--borderRadius2); border: 2px solid var(--color1); text-decoration: none;}
a.knop:hover, .button:hover, a.button:hover, button:hover    {background-color: transparent; color: var(--fontColor);}

.bovenkantHolder                                                                                            {background: var(--color1); border: 0; position: sticky; top: 0;}
.bovenkantHolder .bovenkant                                                                                 {min-height: 100px;}
.bovenkantHolder .bovenkant .art-menu li a .t                                                               {color: #FFF; font-family: var(--fontFamily1); font-size: 17px; font-weight: 700; text-transform: uppercase; padding: 20px 15px;}
.bovenkantHolder .bovenkant .art-menu li a .t.conversion                                                    {background-color: var(--color2); color: #FFF; padding: 15px 30px; cursor: pointer; line-height: 1; border-radius: 30px;}
.bovenkantHolder .bovenkant .art-menu li a.active .t, .bovenkantHolder .bovenkant .art-menu li a:hover .t   {opacity: .5;}
.bovenkantHolder .bovenkant .art-menu li a.active .t.conversion                                             {opacity: 1;}

.HeaderHolder                       {position: relative; margin-bottom: var(--space100);}
.HeaderHolder::after                {content: ""; background: url(/skin/images/mask-header.svg) no-repeat; position: absolute; bottom: 8px; left: 0; right: 0; width: 100%; aspect-ratio: 1600/166; background-size: cover; }
.HeaderHolder img.header-afbeelding {width: 100%; max-height: 650px; height: 100%; object-fit: cover; filter: grayscale(1); }
.HeaderHolder .header-text          {width: 100%; height: 100%; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space30); box-sizing: border-box;}
.HeaderHolder .header-text img      {width: 80%; max-width: 700px;}

.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {color: #FFF;}
.resMenuHolder                                                        {background-color:#fff; box-sizing: border-box; padding: var(--space50); height: 100vh;}
.resMenublokinhoud .resMenuItem a                                     {border-bottom:0;}
.resMenublokinhoud .resMenuItem.active>a                              {color: var(--color1)}
.openklapper                                                          {transition: all .3s ease;}

.pageFooterHolder                                                         {background: url(/skin/images/mask-footer.svg) no-repeat; background-size: cover; margin-top: var(--space100); padding-top: 200px;}
.pageFooterKnoppenHolder                                                  {background-color: var(--color1);}
.pageFooterHolder .logo-footer img                                        {width: 100%; max-width: 300px;}
.pageFooterHolder .menu-info                                              {display: flex; flex-direction: column; align-items: end;}
.pageFooterHolder .menu-info ul                                           {list-style: none; display: flex; padding: 0;}
.pageFooterHolder .menu-info ul .STPMenu1li .STPMenuLink1li               {color: #FFF; font-family: var(--fontFamily1); font-size: 17px; font-weight: 700; text-transform: uppercase; margin: 20px 15px; text-decoration: none;}
.pageFooterHolder .menu-info ul .STPMenu1li .STPMenuLink1li:hover         {opacity: 0.5;}
.pageFooterHolder .menu-info ul .STPMenu1li .STPMenuLink1li:last-of-type  {padding-right: 0;}
.pageFooterHolder .menu-info ul .STPMenu1li .STPMenuLink1li:first-of-type {padding-left: 0;}

.formulier_holder.custom-form                        {width: 100%; max-width: 500px;}
.formulier_holder.custom-form label                  {font-size: 17px; font-family: var(--fontFamily1); font-weight: 700;}
.formulier_holder.custom-form input                  {max-width: 500px; border-radius: var(--borderRadius2); border: 1px solid var(--color3); padding: var(--space10) var(--space20); margin: var(--space10) 0 var(--space20) 0; color: var(--fontColor);}
.formulier_holder.custom-form input.verplicht        {background-position: 97%}
.formulier_holder.custom-form select                 {max-width: 500px; width: 100%; border-radius: var(--borderRadius2); border: 1px solid var(--color3); padding: var(--space10) var(--space20); margin: var(--space10) 0 var(--space20) 0;}
.formulier_holder.custom-form input::placeholder     {color: var(--color3);}
.formulier_holder.custom-form .formulier_textarea    {max-width: 500px; width: 100%; border-radius: 22px; border: 1px solid var(--color3); padding: var(--space10) var(--space20); margin: var(--space10) 0 var(--space20) 0;}

.vak                                  {margin-bottom: var(--space100); padding: var(--space50) ;}
.vak.kleur1                           {background-color: var(--color1);}
.vak .inhoud.grid-2x                  {width: 100%; max-width: 1200px;}

.vak .inhoud .rechts                  {display: flex; flex-direction: column; align-items: end;}
.vak .inhoud .rechts h2               {width: 100%; max-width: 500px;}
.vak .inhoud .text                    {max-width: 500px;}

.max500                               {max-width: 500px;}

h2 {margin-bottom: var(--space10);}

.cirkel                               {background-color: var(--color1); border-radius: var(--borderRadius2); aspect-ratio:1/1; width: 300px; height: 300px; padding: var(--space20); display: flex; flex-direction: column; align-items: center; justify-content: center;}
.cirkel p                             {color: #fff; width: fit-content;}

.inhoud.grid-2x .afbeelding img       {width: 100%; max-width: 300px;}

.inhoud.logos                         {text-align: center;}
.inhoud.logos h2                      {color: #fff; text-transform: uppercase; margin-bottom: var(--space30);}

.inhoud.max1200                       {max-width: 1200px;}

@media screen and (max-width: 900px) {
  :root{
    --bodyFontSize: 15px;
    --h1Size: 35px;
    --h2Size: 30px;
    --h3Size: 20px;
    --h4Size: 15px;
    --h5Size: 12px;

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

  .cirkel {width: 250px; height: 250px;}
}

@media screen and (max-width: 819px) {
  .inhoud.grid-2x .rechts {align-items: center;}
  .pageFooterHolder .menu-info {align-items: baseline;}
  .pageFooterHolder .menu-info ul .STPMenu1li .STPMenuLink1li {font-size: 12px;}
}

@media screen and (max-width: 500px) {
  .pageFooterHolder .menu-info ul {flex-direction: column;}  
}

@font-face {
  font-family: custom-font;
  src: url(/skin/customFont/customFont.otf);
}