:root {
  --color1: #004F8F;
  --color2: #E6E8EC;
  --color3: #424242;
  --fontColor: #424242;
  --borderColor: ;
  --fontFamily1: 'bangers', sans-serif;
  --fontFamily2: 'poppins', sans-serif;
  --fontFamily3: 'Rubik', sans-serif;
  --bodyFontSize: 17px;
  --h1Size: 89px;
  --h2Size: 48px;
  --h3Size: 35px;
  --h4Size: ;
  --h5Size: 20px;
  --h6Size: ;
  --maxWidth: 1580px;
  --textSmall: 640px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space25: 25px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space60: 60px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 5px;
  --borderRadius2: ;
  --boxShadowWindow: ;
  --leftFr: 1fr;
  --rightFr: 1fr;
  }

@view-transition {
  navigation: auto;
}

.art-Sheet      {max-width: none !important; padding: 0 !important;}
.breadcrumbs    {display: none;}
  
body {font-size: var(--bodyFontSize); font-family: var(--fontFamily2); overflow-x: hidden; color: var(--fontColor); font-weight: 200; line-height: 1.7em;}


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 {margin: 0 0 var(--space20) 0;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size); font-family: var(--fontFamily1); font-weight: 400; line-height: normal; color: #FFF;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size); font-weight: 800; color: var(--color1); font-family: var(--fontFamily3); line-height: 1.2;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size); font-family: var(--fontFamily3);}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); margin-bottom: 5px; text-transform: uppercase; font-weight: 300; color: var(--fontColor); font-family: var(--fontFamily3);}

.bangers                                                      {font-family: var(--fontFamily1);}

a.knop, .button, a.button, button                             {background-color: var(--color1); color: #fff; padding: var(--space20) var(--space60) var(--space20) var(--space30); position: relative; font-weight: 400; font-size: 25px; font-family: var(--fontFamily1); border-radius: var(--borderRadius1); margin: var(--space10) 0;}
a.knop.wit, .button.wit, a.button.wit, button.wit             {background-color: #FFF; color: var(--color1);}
a.knop::after, .button::after, a.button::after, button::after {content: "\f178"; font-family: 'Font Awesome 5 Pro'; position: absolute; right: var(--space30); top: 50%; transform: translateY(-50%); pointer-events: none; transition: all 300ms;}

a.knop:hover::after, .button:hover::after, a.button:hover::after, button:hover::after     {right: 20px;}


.extrabovenkant                                                 {display: none !important;}
.bovenkantHolder                                                {background: var(--color1); border: 0; position: sticky; top: 0; transition: all 300ms ease; z-index: 20;}
.bovenkantHolder.scrolled                                       {height: 115px;}
.bovenkantHolder .bovenkant                                     {min-height: 115px;}
.bovenkantHolder .bovenkant .logo                               {width: 75px; height: 75px;}
.bovenkantHolder .bovenkant .art-nav                            {width: 100%;}
.bovenkantHolder .bovenkant .art-menu                           {width: 100%; position: relative; text-align: center;}
.bovenkantHolder .bovenkant .art-menu li                        {margin: auto auto;}
.bovenkantHolder .bovenkant .art-menu li ul                     {display: none;}
.bovenkantHolder .bovenkant .art-menu li a .t                   {color: #FFF; font-family: var(--font-family1); font-size: 16px; font-weight: 600; padding: 0 var(--space20); text-transform: uppercase;}
.bovenkantHolder .bovenkant .art-menu li a.active .t            {opacity: 0.7;}
.bovenkantHolder .bovenkant .art-menu li:last-of-type           {position: absolute; right: 0; transform: translateY(-6px);}
.bovenkantHolder .bovenkant .art-menu li a .t.conversie         {background-color: #fff; color: var(--color1); padding: var(--space15) var(--space25); cursor: pointer; line-height: 1; border-radius: 999px;}
.bovenkantHolder .bovenkant .art-menu li a.active .t.conversie  {opacity: 1;}

.resMenuHolder                              {background-color:var(--color2); box-sizing: border-box; padding:30px;}
.resMenucategorieknop                       {color: #FFF; z-index: 3;}
.resMenucategorieknop:hover                 {color: #FFF;}
.resMenublokinhoud .resMenuItem a           {font-size:18px; border-bottom:0; font-family: var(--font-family1);}
.resMenublokinhoud .laag1 .resMenuItem a    {font-size: 16px;}
.resMenublokinhoud .resMenuItem.active>a    {color: var(--color1)}
.openklapper                                {top:2px; transition: all .3s ease;}

.scrollDown                                 {position: absolute; left: 0; right: 0; z-index: 1; bottom: 0; padding: 30px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; pointer-events: none;}
.scrollDown .pijl                           {margin: 5px auto; height: 30px; width: 2px; background: #FFF; cursor: pointer; -webkit-animation: scrollen 1.5s infinite; animation: scrollen 1.5s infinite;}
.scrollDown span                            {font-size: 14px; font-weight: 500; color: #fff; cursor: pointer; font-family: var(--fontFamily2);}

@keyframes scrollen {
  0%    { transform: translateY(-20px); opacity: 0; }
  50%   { opacity: 1; }
  100%  { transform: translateY(0); opacity: 0; }
}


/* .pageFooterHolder {z-index: 2; background-color: #002C4F;} 
.pageFooterHolder .pageFooter {padding: var(--space100) var(--space30); font-size: var(--bodyFontSize);}
.pageFooterHolder .pageFooter ul {list-style: none; padding: 0; margin-top: 0;}
.pageFooterHolder .pageFooter ul li ul {display: none;}
.pageFooterHolder .pageFooter ul a {text-decoration: none; color: #FFF;}
.pageFooterHolder .pageFooter .contact {display: flex;}
.pageFooterHolder .pageFooter .contact .contact-info {margin: 0 0 auto auto;}

.pageFooterHolder .pageFooter a.telefoon, .pageFooterHolder .pageFooter a.mail  {text-decoration: none; color: #FFF;}
.pageFooterHolder .pageFooter a.telefoon::before, .pageFooterHolder .pageFooter a.mail::before {color: #FFF;}

.pageFooterKnoppenHolder {background-color: #000; padding: var(--space30);} */


.pageFooterHolder {z-index: 2; background-color: transparent;} 
.pageFooterHolder .pageFooter {padding: var(--space100) var(--space30) var(--space50) var(--space30); font-size: var(--bodyFontSize);}
.pageFooterHolder .pageFooter h3 {color: #FFF; margin-left: -1px;}
.pageFooterHolder .pageFooter ul {list-style: none; padding: 0; margin-top: 0;}
.pageFooterHolder .pageFooter ul li:first-of-type {display: none;}
.pageFooterHolder .pageFooter ul li ul {display: none;}
.pageFooterHolder .pageFooter ul a {text-decoration: none; color: #FFF;}
.pageFooterHolder .pageFooter ul a:hover {opacity: 0.7;}

.pageFooterKnoppenHolder {background-color: transparent; padding: 0 var(--space30) var(--space100) var(--space30); z-index: 2;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {margin: 0 var(--space10); }
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1;}

footer {position: relative;  background-color: #002C4F; z-index: 10;}
footer .footerLogo {position: absolute; bottom: 0; right: 0; opacity: 0.8; width: 100%; height: 100%; display: flex;}
footer .footerLogo img {margin: auto 0 0 auto; max-width: 80%; width: 600px;}


.textSmall        {max-width: var(--textSmall);}

textarea, input[type="text"], input[type="password"], 
input[type="email"], input[type="tel"], input[type="number"]    {border-radius: var(--borderRadius1); border: 0; background-color: #FFF; color: var(--fontColor); padding: var(--space20) var(--space25);}
input:focus, textarea:focus                                     {color: var(--fontColor) !important}
.formulier_text                                                 {margin: var(--space25) 0;}
.formulierVersturen                                             {display: flex;}
a.knop.rechts                                                   {margin: var(--space25) 0 auto auto; background-color: #FFF; color: var(--color1);}


.vak                                                                {padding: var(--space100) var(--space30);} 
.vak .inhoud                                                        {padding: var(--space30) var(--space20);}
.vak .inhoud.volledig                                               {max-width: none; padding: 0;}
.vak:has(.grid-2x .tekst)                                           {margin: -25px 0;}
.vak:has(.grid-2x .tekst) + .vak:has(.grid-2x .tekst)               {margin-top: 100px;}
.vak.kaart                                                          {padding: 0; line-height:0; margin-top:0;}

.vak .inhoud .grid-2x .tekst                                        {position: relative; height: auto; width: 100%; padding: var(--space100) var(--space30); box-sizing: border-box; z-index: 1; display: flex;}
.vak .inhoud .grid-2x .tekst::after                                 {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; background-repeat: no-repeat; background-size: contain;}
.vak .inhoud .grid-2x .tekst.links::after                           {transform: translateX(99%); background-position: left; transform:translate3d(99%, 0px, 0px) scale(1.003);}
.vak .inhoud .grid-2x .tekst.rechts::after                          {transform: translateX(-99%); background-position: right; transform:translate3d(-99%, 0px, 0px) scale(1.003);}
.vak .inhoud .grid-2x .informatie                                   {max-width: calc(var(--maxWidth) / 2  - var(--space50)); box-sizing: border-box; width: 100%;}
.vak .inhoud .grid-2x .tekst.rechts .informatie                     {margin: auto 0 auto auto;}    

.vak .inhoud .grid-2x.right2Fr .informatie                          {margin: auto auto !important; padding-right: 90px;}

.vak .inhoud .grid-2x .afbeelding .informatie.links                 {margin: auto var(--space50) auto auto; }
.vak .inhoud .grid-2x .afbeelding .informatie                       {padding: 75px 60px 75px 0; max-width: calc(var(--maxWidth) / 2  - 70px); line-height: 1.85em; z-index: 2; position: relative;}
.vak .inhoud .grid-2x .afbeelding .informatie p                     {max-width: 600px;}
.vak .inhoud .grid-2x .afbeelding .informatie .contact-info div i   {margin-right: var(--space15); color: var(--color1);}
.vak .inhoud .grid-2x .afbeelding .informatie .contact-info div a   {text-decoration: none !important; color: var(--fontColor);}

.vak .inhoud .grid-2x .tekst.links .informatie                      {margin: auto 0 auto auto; padding-right: var(--space80); padding-left: 5px;}
.vak .inhoud .grid-2x .tekst.rechts .informatie                     {margin: auto auto auto 0; padding-left: var(--space80); padding-right: var(--space20);}
.vak .inhoud .grid-2x .afbeelding                                   {line-height: 0; margin: var(--space25) 0 var(--space25) 0; overflow: hidden; position: relative; min-height: 600px; background-color: var(--color2);}
.vak .inhoud .grid-2x .afbeelding img                               {position: absolute; bottom: 0; min-width: 100%; min-height: 100%; object-fit: cover;}

.vak .inhoud .grid-2x .foto-erover                                  {position: absolute; bottom: 0; left: 50%; transform: translateX(-75%); height: 500px; z-index: 2; line-height: 0;}
.vak .inhoud .grid-2x .foto-erover img                              {height: 100% !important; width: auto !important;}

.vak:has(.grid-2x .tekst)                                           {background-color: transparent !important; padding: unset !important; width: 100vw; }
div.grid-2x:has(.tekst)                                             {grid-gap: 0px !important; overflow: hidden;}

.vak.blauw .tekst                                                         {background-color: var(--color1);}
.vak.blauw .links::after                                                  {background: url(/skin/images/hoek-rechts-blauw.svg);}
.vak.blauw .rechts::after                                                 {background: url(/skin/images/hoek-links-blauw.svg);}
.vak.blauw h1, .vak.blauw h2, .vak.blauw h3, .vak.blauw h5, .vak.blauw p  {color: #fff;}
.vak.blauw .knop                                                          {background-color: #FFF; color: var(--color1);}

.vak.lichtblauw .tekst                                                    {background-color: var(--color2);}
.vak.lichtblauw .links::after                                             {background: url(/skin/images/hoek-rechts-lichtblauw.svg);}
.vak.lichtblauw .rechts::after                                            {background: url(/skin/images/hoek-links-lichtblauw.svg);}
.lichtblauw h1, .lichtblauw h2, .lichtblauw h3                            {color: var(--color1) !important;}
.lichtblauw p, .lichtblauw h5                                             {color: var(--fontColor) !important;}

.vak.wit .tekst                                                           {background-color: #fff;}
.vak.wit .links::after                                                    {background: url(/skin/images/hoek-rechts-wit.svg);}
.vak.wit .rechts::after                                                   {background: url(/skin/images/hoek-links-wit.svg);}
.vak.wit h1, .vak.wit h2, .vak.wit h3                                     {color: var(--color1);}
.vak.wit p, .vak.wit h5                                                   {color: var(--fontColor);}

.vak.grijs .tekst                                                         {background-color: var(--color3);}
.vak.grijs .links::after                                                  {background: url(/skin/images/hoek-rechts-grijs.svg);}
.vak.grijs .rechts::after                                                 {background: url(/skin/images/hoek-links-grijs.svg);}
.vak.grijs h1, .vak.grijs h2, .vak.grijs h3, .vak.grijs h5, .vak.grijs p  {color: #fff;}
.vak.grijs .knop                                                          {background-color: #FFF; color: var(--color1);}

.vak.blauw                                                                {background-color: var(--color1);}
.vak.lichtblauw                                                           {background-color: var(--color2);}
.vak.grijs                                                                {background-color: var(--color3);}

.logogrid .grid-2x img                                                    {margin: auto var(--space30) auto auto;}

.vak .inhoud li                 {color: var(--color2); list-style-type: "\f111"; font-weight: 900; font-family: 'Font Awesome 5 Pro'; margin-left: var(--space10); padding-left: var(--space15);}
.vak .inhoud li p               {color: #FFF; font-weight: 300; font-family: var(--fontFamily2); margin-bottom: 0;}

.vak.lichtblauw .inhoud li      {color: var(--color1);}
.vak.lichtblauw .inhoud li p    {color: var(--fontColor);}

.vak.grijs .inhoud li           {color: #FFF;}
.vak.grijs .inhoud li p         {color: #FFF;}


a.telefoon, a.mail  {text-decoration: none; color: var(--fontColor);}
.telefoon::before   {content: "\f879"; font-family: "Font Awesome 5 Pro"; color: var(--color1); font-weight: 400; margin-right: var(--space15); font-size: inherit;}
.mail::before       {content: "\f0e0"; font-family: "Font Awesome 5 Pro"; color: var(--color1); font-weight: 400; margin-right: var(--space15); font-size: inherit;}
div.locatie::before {content: "\f3c5"; font-family: "Font Awesome 5 Pro"; color: var(--color1); font-weight: 400; font-size: inherit; padding: 0 2px; position: absolute; top:0;}
div.locatie         {position: relative; margin-top: var(--space15);}
div.locatie p       {margin-left: 33px;}


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


.flickity-nav {display: flex; gap: var(--space30); align-items: center; width: 100%; max-width: var(--maxWidth); justify-content: end;}
.flickity-nav > div {position: relative; display: flex; gap: var(--space10); margin-right: var(--space60); margin-top: var(--space15);}

.flickity-nav > div .flickity-button {position: relative; opacity: 1; background: unset; border: 1px solid var(--color3); border-radius: 100%; width: 50px; height: 50px; padding: 0; left: 0; right: 0; top: 0; bottom: 0; transform: unset; color: var(--color1); margin: 0;}
.flickity-nav > div .flickity-button:hover {background: var(--color1); border-color: var(--color1); color: var(--color2);}

.flickity-nav > div .flickity-button .flickity-button-icon {display: none;}

.flickity-nav > div .flickity-button::before {content: "\f178"; font-family: "Font Awesome 5 Pro"; font-size: 30px; font-weight: 400;}
.flickity-nav > div .flickity-button.previous::before {content: "\f177";}
.flickity-nav > div .flickity-button::after {content: "";}


.vak .inhoud .lijstenCategorieen ul {display: flex; padding: 0; width: fit-content;  margin: 0 auto var(--space50) auto; flex-wrap: wrap;}
.vak .inhoud .lijstenCategorieen li {list-style: none; margin: 0; padding: 15px 25px; font-family: var(--font-family1); font-size: 16px; font-weight: 600; border-radius: 9999px; line-height: normal;}
.vak .inhoud .lijstenCategorieen li.actief{background-color: var(--color1);}
.vak .inhoud .lijstenCategorieen li a {text-decoration: none; color: var(--fontColor);}
.vak .inhoud .lijstenCategorieen li.actief a {color: #FFF;}

@media screen and (max-width: 1580px) {
  .vak .inhoud .grid-2x .afbeelding .informatie.links {margin-left: var(--space30);}
}

@media screen and (max-width: 1230px) {
  .pageFooterHolder .pageFooter .contact .contact-info {margin: 0 auto auto 0;}
}

@media screen and (max-width: 1200px) {
  .bovenkantHolder .bovenkant .art-menu {text-align: end;}
  .bovenkantHolder .bovenkant .art-menu li:last-of-type {position: unset; transform: unset;}
}


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

    --space10: 5px;
    --space15: 5px;
    --space20: 10px;
    --space25: 10px;
    --space30: 15px;
    --space40: 20px;
    --space50: 25px;
    --space60: 30px;
    --space80: 35px;
    --space100: 50px;    
  }
  .vak .inhoud {padding: var(--space30) var(--space30);}

  a.knop, .button, a.button, button {font-size: 12px;}
  .HeaderHolder .headerAchtergrond .inhoud a.knop {font-size: 20px;}
  .HeaderHolder .headerAchtergrond img.fotoRechts{display: none;}

  .vak .inhoud .grid-2x .tekst .informatie          {padding-right: var(--space30);}
  .vak .inhoud .grid-2x .foto-erover                  {display: none;}

  .flickity-nav > div {margin-right: var(--space30);}
}


@media screen and (max-width: 680px) {
  .pageFooterHolder {margin-top: unset;}


  div[class*="geenPaddingTop"] {margin-top: 0 !important;}

  .vak .inhoud .grid-2x .tekst::after               {left: -1px; width: calc(100% + 2px);}
  .vak .inhoud .grid-2x .tekst.links::after         {transform: translateY(99%); background-position: top;  }
  .vak .inhoud .grid-2x .tekst.rechts::after        {transform: translateY(-99%); background-position: bottom; }
  .vak .inhoud .grid-2x .tekst .informatie          {max-width: 90%; margin: auto auto !important;}
  .vak .inhoud .grid-2x .afbeelding                   {margin: 0 0; min-height: 300px;}

  .vak.blauw .links::after                            {background: url(/skin/images/hoek-onder-blauw.svg);}
  .vak.blauw .rechts::after                           {background: url(/skin/images/hoek-boven-blauw.svg);}
  .vak.lichtblauw .links::after                       {background: url(/skin/images/hoek-onder-lichtblauw.svg);}
  .vak.lichtblauw .rechts::after                      {background: url(/skin/images/hoek-boven-lichtblauw.svg);}
  .vak.wit .links::after                              {background: url(/skin/images/hoek-onder-wit.svg);}
  .vak.wit .rechts::after                             {background: url(/skin/images/hoek-boven-wit.svg);}
  .vak.grijs .links::after                            {background: url(/skin/images/hoek-onder-grijs.svg);}
  .vak.grijs .rechts::after                           {background: url(/skin/images/hoek-boven-grijs.svg);}

  .logogrid .grid-2x {grid-template-columns: var(--leftFr) var(--rightFr) !important;}
  .logogrid .grid-2x img {margin: auto auto;}
}