:root {
  --color1: #EF4723;
  --color2: #0B5115;
  --color3: #8E62A3;
  --color4: #FFBA00;  
  --color5: #F48335;
  --color6: #00486E;
  --color7: #F0EADC;
  --color8: #6D8A4A;
  --color9: #6D8A4A;
  --fontColor1: #071b2b;
  --borderColor1: rgba(0,0,0,.2);
  --fontFamily1: "Inter", Helvetica, Arial, sans-serif;
  --fontFamily2: "Anth", Helvetica, Arial, sans-serif;
  --bodyFontSize: 16px;
  --h1Size: 60px;
  --h2Size: 45px;
  --h3Size: 26px;
  --h5Size: 14px;
  --maxWidth: 1560px;
  --textSmall: 600px;
  --space5: 5px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space25: 25px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --space200: 200px;
  --borderRadius1: 3px;
  --borderRadius2: 5px;
  --leftFr: 1fr;
  --rightFr: 1fr;
  text-underline-offset: 0.3em;
}
.liquid-slide-sjabloon .inhoud h1 {font-size: 45px;}

body {font-family: var(--fontFamily1); font-weight: normal; color: var(--fontColor2); background: #fbf7f0; font-size: var(--bodyFontSize); line-height: 1.95em; overflow-y: scroll !important;}
::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); font-size: 16px; color: var(--fontColor2); padding: 10px 15px; border-color: var(--borderColor2);}

input[type="checkbox"]:checked::before {color: var(--color1);}

hr+hr {display: none;}

.breadcrumbs {display: none;}

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); font-weight: normal; color: var(--fontColor1); margin: 0 0 0.5em 0;}
  
h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size); font-weight: bold;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size); font-weight: normal;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size); font-weight: normal;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-family: var(--fontFamily1); letter-spacing: 0.05em; text-transform: uppercase;}

h2 strong {font-weight: normal; color: var(--color6);}

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6, ol + h2, ol + h3, ol + h4, ol + h5, ol + h6, div + h2 {margin-top:1.5em;}

a:link, a:visited {color: var(--color3);}
a:hover, a.hover {text-decoration: underline; opacity: .5;}

ul.check {list-style: none; padding: 0; margin: 0;}
ul.check li {padding: 0 0 0 1.5em; position: relative; margin: .6em 0 .6em; line-height: 1.5em; text-align: left; font-weight: 500; color: var(--fontColor1);}
ul.check li::before {content: "\f00c"; font-weight: 700; font-family: "Font Awesome 5 Pro"; margin-right: 5px; color: var(--color3); left: 0; top: 0; position: absolute }

a.telefoon {text-decoration: none;}
a.mail {text-decoration: none;}
a.telefoon::before {content: "\f879"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: var(--color2);}
a.mail::before {content: "\f0e0"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: var(--color2);}
  
a.logo {outline: 0;}
a.logo img {width: 150px; margin: 0;}

a.knop, .button, a.button, button {font-family: inherit; font-size: var(--bodyFontSize); padding: 20px 30px; border-radius: 28px; background: transparent; border: 1px solid var(--color6); color: var(--color6); line-height: 1; font-weight: normal; text-decoration: none !important;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--color6); color: #FFF; opacity: 1;}

a.knop.wit {border-color: #FFF; color: #FFF;}
a.knop.wit:hover {background: #FFF; color: var(--color6);}

.bovenkantHolder {position: fixed; top: 0; border: 0; background: unset; transition: .3s all ease;}
.bovenkantHolder .bovenkant {max-width: 100%; min-height: 100px; filter: brightness(0) invert(1); transition: .3s all ease;}

.bovenkantHolder.scrolled {background: #fbf7f0;  *backdrop-filter: blur(5px);}
.bovenkantHolder.scrolled .bovenkant {filter: unset;}

.bovenkantHolder .bovenkant .art-menu {position: static; display: flex; gap: var(--space10); align-items: center;}
.bovenkantHolder .bovenkant .art-menu li {position: static;}

.bovenkantHolder .bovenkant .art-menu li a .t {font-size: 14px; color: var(--fontColor1); padding: 10px 10px;}
.bovenkantHolder .bovenkant .art-menu li a:hover,
.bovenkantHolder .bovenkant .art-menu li a.active {opacity: .5;}

.bovenkantHolder .bovenkant .art-menu li.hoverMenuActief .t::after {font-size: 12px; content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: normal; margin: auto auto auto 5px; color: var(--fontColor1);}
.bovenkantHolder .bovenkant .art-menu li.hoverMenuActief > a {position: relative; cursor: pointer;}
.bovenkantHolder .bovenkant .art-menu li.hoverMenuActief > a:hover::after {content: ""; position: absolute; left:-200px; right:-100px; height: 40px; padding: 0; box-sizing: border-box; *background-color: red; top:calc(100% - 5px);}

.art-Sheet {max-width: var(--maxWidth); padding: var(--space80) var(--space30);}

.art-Sheet .art-sidebar1 {margin-right: var(--space80);}

.art-Sheet .art-sidebar1 .art-Block {position: sticky; top: 150px;}
.art-Sheet .art-sidebar1 .art-BlockHeader {color: #817F7B; font-size: 12px; font-weight: normal; letter-spacing: 0.05em; text-transform: uppercase;}

section .inhoud, .vak .inhoud {max-width: var(--maxWidth); padding: var(--space200) var(--space30);}

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

.inhoud.geenPaddingTop {padding-top: 0;}
.inhoud.geenPaddingBottom {padding-bottom: 0;}

.vak .inhoud + .inhoud {padding-top: 0;}

.vak.wit {background-color:var(--color7);}

.vak.whyUs {background-color:var(--fontColor1); color:#fff;}
.vak.whyUs h2, .vak.whyUs h3 {color:#fff;}
.vak.whyUs h2 strong {color:#fff;}


.text-small {max-width: var(--textSmall);}
.full-width {max-width: 100vw !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden;}

.grid-2x {grid-template-columns: var(--leftFr) var(--rightFr);}

div[class*="grid"] {gap: var(--space30);}

div[class*="grid"].left-2fr {--leftFr: 2fr;}
div[class*="grid"].right-2fr {--rightFr: 2fr;}
div[class*="grid"].left-3fr {--leftFr: 3fr;}
div[class*="grid"].right-3fr {--rightFr: 3fr;}
div[class*="grid"].left-4fr {--leftFr: 4fr;}
div[class*="grid"].right-4fr {--rightFr: 4fr;}

div[class*="grid"].gap-50 {gap: var(--space50);}
div[class*="grid"].gap-80 {gap: var(--space80);}
div[class*="grid"].gap-100 {gap: var(--space100);}

div[class*="grid"].center {align-items: center;}

.block {position: relative; padding: var(--space40); box-sizing: border-box; background: var(--color1);}

div[class*="grid"] + div[class*="grid"] {margin-top:var(--space100)}

div.grid-4x {gap: var(--space80);}
div.grid-4x.count.link {gap:var(--space40);}


.block .title {display: block;}
.block h2.title {font-size: 40px;}
.block h3.title {font-size: 24px;}

.block.rood {background: var(--color1); color: #FFF;}
.block.groen {background: var(--color2); color: #FFF;}
.block.paars {background: var(--color3); color: #FFF;}
.block.geel {background: var(--color4); color: #FFF;}
.block.oranje {background: var(--color5); color: #FFF;}
.block.blauw {background: var(--color6); color: #FFF;}

.block.color1 {background: var(--color1); color: #FFF;}
.block.color2 {background: var(--color2); color: #FFF;}
.block.color3 {background: var(--color3); color: #FFF;}
.block.color4 {background: var(--color4); color: #FFF;}
.block.color5 {background: var(--color5); color: #FFF;}
.block.color6 {background: var(--color6); color: #FFF;}
.block.color7 {background: var(--color7); color: #FFF;}
.block.color8 {background: var(--color8); color: #FFF;}
.block.color9 {background: var(--color9); color: #FFF;}

.block.rood .title,
.block.groen .title,
.block.paars .title,
.block.geel .title,
.block.oranje .title,
.block.blauw .title,
.block.color1 .title,
.block.color2 .title,
.block.color3 .title,
.block.color4 .title,
.block.color5 .title,
.block.color6 .title,
.block.color7 .title,
.block.color8 .title,
.block.color9 .title {color: #FFF;}

.block.rood a.knop,
.block.groen a.knop,
.block.paars a.knop,
.block.geel a.knop,
.block.oranje a.knop,
.block.blauw a.knop,
.block.color1 a.knop,
.block.color2 a.knop,
.block.color3 a.knop,
.block.color4 a.knop,
.block.color5 a.knop,
.block.color6 a.knop,
.block.color7 a.knop,
.block.color8 a.knop,
.block.color9 a.knop {color: #FFF; border-color: #FFF;}

.block.rood a.knop:hover,
.block.groen a.knop:hover,
.block.paars a.knop:hover,
.block.geel a.knop:hover,
.block.oranje a.knop:hover,
.block.blauw a.knop:hover,
.block.color1 a.knop:hover,
.block.color2 a.knop:hover,
.block.color3 a.knop:hover,
.block.color4 a.knop:hover,
.block.color5 a.knop:hover,
.block.color6 a.knop:hover,
.block.color7 a.knop:hover,
.block.color8 a.knop:hover,
.block.color9 a.knop:hover {background: #FFF; color: var(--fontColor1);}


div[class*="grid"] > .block {display: flex; flex-direction: column; aspect-ratio: 1;}

div[class*="grid"].link > .block {cursor: pointer; transition: all .3s ease;}
div[class*="grid"].link > .block a {position: absolute; color: inherit; text-decoration: none; text-transform: uppercase; font-size: 10px; letter-spacing: 0.7em; right: 0; top: 30%; transform: translate(-30%) rotate(-90deg); transform-origin: top right;}
div[class*="grid"].link > .block:hover a {right:5px;}
div[class*="grid"].link > .block:hover {opacity: .9;}


div[class*="grid"].count > .block {counter-increment: section; display: flex; flex-direction: column; flex: 1;}
div[class*="grid"].count > .block .title {display: flex; flex-direction: column; flex: 1;}
div[class*="grid"].count > .block .title::before {content: counters(section, ".", decimal-leading-zero); display: block; color: inherit; font-size: var(--h2Size); margin: 0 0 var(--space20) 0}
div[class*="grid"].count > .block p {margin: auto 0 0 0;}

div[class*="grid"].count.vertical {margin: 0 0 var(--space30) 0;}
div[class*="grid"].count.vertical > div .title {display: flex; gap: var(--space20); grid-area: b;}
div[class*="grid"].count.vertical > div {counter-increment: section; display: grid ; grid-template-columns: 150px 1fr; grid-template-areas: "a b" "a c"; gap: 0 var(--space30);}
div[class*="grid"].count.vertical > div::before {content: counters(section, ".", decimal-leading-zero); display: block; color: inherit; margin: auto 0; grid-area: a; font-size: 120px; line-height: 1; margin-top:0; letter-spacing: -0.075em; font-variant: tabular-nums;}
div[class*="grid"].count.vertical > div p {grid-area: c;}

div[class*="grid"].challanges {grid-template-columns: 1fr;}
div[class*="grid"].challanges > div {padding:var(--space40) var(--space50) var(--space40); border:1px solid var(--borderColor1); background:rgba(0,0,0,.0); transition: all .3s ease; position: relative;}
/* div[class*="grid"].challanges > div:hover, div[class*="grid"].challanges > div.actief {*background: rgba(0,0,0,.05); border-color:rgba(0,0,0,.5);} */
/* div[class*="grid"].challanges > div ul {opacity: 0; max-height:0; overflow: hidden; transition: all 0.3s ease; padding:0 var(--space40); margin:0;} */
/* div[class*="grid"].challanges > div.actief ul {opacity: 1; max-height: unset; padding:var(--space40);} */

/* div[class*="grid"].challanges:has(.actief) > div {margin-bottom:auto;} */
/* 
div[class*="grid"].challanges > div::after {}
div[class*="grid"].challanges > div::after {
    content:"\f178";
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    color: inherit;
    text-decoration: none;
    font-size: 30px; 
    font-weight: 100;
    right: 40px;
    bottom: 40px;
    transition: all .3s ease;;
}
div[class*="grid"].challanges > div.actief::after {transform: rotate(-90deg);} */

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

ul.solve {display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: var(--space30);  margin: 0; padding: 0; list-style: none;}
ul.solve li {list-style: none;; padding: var(--space30) 0 ; border-top: 1px solid var(--borderColor1); margin: 0;  box-sizing: border-box; transition: all .3s ease;}
ul.solve li strong {display:block; margin-bottom: var(--space10); font-size: var(--h3Size); font-family: var(--fontFamily2); font-weight: normal; margin-bottom:.75em;}

.full-width .flickity-nav {padding: 0 var(--space30) var(--space30);}

.flickity-nav {display: flex; gap: var(--space30); align-items: center;}
.flickity-nav > div {position: relative; margin-left: auto; display: flex; gap: 10px;}
.flickity-nav > div .flickity-button {position: relative; opacity: 1; background: unset; border: 1px solid #000; border-radius: 100%; width: 70px; height: 70px; padding: 0; left: 0; right: 0; top: 0; bottom: 0; transform: unset;}
.flickity-nav > div .flickity-button:hover { background: var(--color1); border-color: var(--color1);}
.flickity-nav > div .flickity-button:hover::before {color: #FFF;}
.flickity-nav > div .flickity-button:disabled {opacity: .3;}
.flickity-nav > div .flickity-button .flickity-button-icon {display: none;}
.flickity-nav > div .flickity-button::before {content: "\f178"; font-family: "Font Awesome 5 Pro"; color: var(--fontColor1); font-size: 35px; font-weight: lighter; transition: .3s all ease;}
.flickity-nav > div .flickity-button.previous::before {content: "\f177";}

.hoverMenu {left: 0; right: 0; width: 100%; max-width: 100%; overflow: unset; margin: 0 auto; border-radius: 0; box-shadow: unset; transform: unset; top: 100%; display: grid; grid-template-columns: 8fr 4fr; gap: var(--space30); padding: var(--space50) var(--space30); box-sizing: border-box;}
.hoverMenu::before {content: ""; position: absolute; top: -20px; height:20px; left: 50%; width: 100vw; transform: translateX(-50%); background: transparent;}
.hoverMenu::after {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #fbf7f0; z-index: -1;}
.hoverMenu.actief {opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0px); z-index: 11;}

.hoverMenu .categorie {margin: 0; padding-top:90px;}

article .hoverMenu {top:auto !important; visibility: visible !important; opacity: 1 !important; z-index: 1 !important;}



.hoverMenu .kolommen {display: grid; grid-template-columns: 1fr 1fr; padding: 0; gap: var(--space30); margin-bottom: auto;}

/* Solutions aangepast v1.0 */
.hoverMenu .kolommen.kolommen18 {grid-template-columns: unset;  grid-template-rows: repeat(7, auto); grid-auto-flow: column;}
.hoverMenu .kolommen.kolommen18 .h2 {grid-column: span 3;}
.hoverMenu .kolommen.kolommen18 .subTekst {display: none;}
.hoverMenu .kolommen.kolommen18 .kolom {padding-bottom: 0;}
.hoverMenu:has(.kolommen18) {grid-template-columns: 1fr;}
/* Einde Solutions aangepast v1.0 */


/* Solutions aangepast v2.0 
.hoverMenu .kolommen.kolommen18 { gap: var(--space30); grid-template-columns: 1fr 1fr 1fr; }
.hoverMenu .kolommen.kolommen18 .h2 {}
.hoverMenu .kolommen.kolommen18 .subTekst {display:none;}
.hoverMenu .kolommen.kolommen18 .kolom {}
.hoverMenu:has(.kolommen18) {grid-template-columns: 1fr;}
/* Einde Solutions aangepast v1.0 */



.hoverMenu .kolommen .kolom {width: 100%; padding: var(--space20) 0; line-height: 1.65em; border: 1px solid rgba(0,0,0,.0); transition: all .3s ease; border-top:1px solid var(--borderColor1)}
.hoverMenu .kolommen .kolom:hover {*background-color: rgba(255, 255, 255, 1); cursor:pointer; border-top: 1px solid #000;}

.hoverMenu .kolommen .kolom .subTekst {font-size: 14px;}

.hoverMenu .kolommen .h2 {grid-column: 1 / -1; margin: 0; font-size: var(--h2Size);}

.hoverMenu .kolommen .kolom .titel a {color: var(--fontColor1); font-weight: 500; font-size: inherit; text-decoration: none; display: flex; padding-bottom:3px;}
.hoverMenu .kolommen .kolom .titel a:hover { opacity: 1;}

.hoverMenuBg {z-index: 1; opacity: 0; position: fixed; left: 0; top: 0; right: 0; background: rgb(0 0 0 / 20%); background-repeat: repeat; transition: opacity 0.3s ease 0s;}
.hoverMenuBg.actief {opacity: 1; bottom: 0;}

.pageFooterHolder {background: var(--color7); border-top: 1px solid #E2DFD8;}
.pageFooterHolder .pageFooter {max-width: 100%; padding: var(--space80) var(--space30); color: var(--fontColor1); font-size: 14px;}

.pageFooterHolder .pageFooter .grid-4x {grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--space80);}

.pageFooterHolder .pageFooter .h2 {color: #817F7B; font-family: var(--fontFamily1); font-size: 12px; font-weight: normal; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 var(--space20) 0;}

.pageFooterHolder .pageFooter a {text-decoration: none; color: inherit;}
.pageFooterHolder .pageFooter a:hover {color: var(--fontColor1); opacity: .5;}

.pageFooterHolder ul {list-style: none; padding: 0; margin: 0;}
.pageFooterHolder ul li {list-style: none; padding: 0; margin: 0;}

.Taalkeuze_vlaggen ul li .afbeelding {display: none;}
.Taalkeuze_vlaggen ul li .omschrijving {display: block;}

.inhoudsopgave > ul {list-style: none; padding: 0; margin: 0;}
.inhoudsopgave > ul li {padding: 15px 0; display: block; border-bottom: 1px solid var(--borderColor1); line-height: 1.5em; box-sizing: border-box; cursor: pointer; transition: all .3s ease;}
.inhoudsopgave > ul li strong {font-weight: normal;}

.inhoudsopgave > ul li:hover {opacity: .5;}
 
.resMenuHolder {background-color: var(--color7); box-sizing: border-box; padding: 30px; top: 100px; bottom:0; z-index: 23; position: fixed;}
.resMenublokinhoud .resMenuItem a {font-size: inherit; border-bottom: 0; color: var(--fontColor1); font-weight: normal; padding: 13px 30px 13px 0}
.resMenublokinhoud .laag1 .resMenuItem a {font-size: 80%; padding-left:0; color:var(--fontColor1); padding: 9px 30px 9px 0}
.resMenublokinhoud .laag1 .resMenuItem.active a {font-weight: bold;}
.resMenublokinhoud ul .resMenuItem.active > a {color:var(--fontColor1)}
.openklapper {top: 6px; font-size: 12px; color: var(--fontColor1); transition: all .3s ease; padding-right:5px;}
.openklapper::before {transition: all .3s ease; color:var(--fontColor1)}

/* .resMenuItemHolder.open {border-bottom: 1px solid var(--borderColor1);} */
.resMenuItemHolder.laag1.open {border-top:1px solid #000; padding-top:10px; padding-bottom:20px;}
.resMenuItemHolder.laag1 {border-top:1px solid var(--borderColor1); transition: all .3s ease;}

.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop .icoon {width: 20px; height: 16px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop .icoon span {display: block; position: absolute; height: 2px; width: 100%; background: var(--color2); border-radius: 0; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop .icoon span:nth-child(1) {top: 0px;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop .icoon span:nth-child(2),.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop .icoon span:nth-child(3) {top: 7px;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop .icoon span:nth-child(4) {top: 14px;}

.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop.open .icoon span:nth-child(1) {top: 18px; width: 0%; left: 50%;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop.open .icoon span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop.open .icoon span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop.open .icoon span:nth-child(4) {top: 18px; width: 0%; left: 50%;}





.readMoreHolder.gesloten {overflow: hidden; transition: all .3s ease; position: relative; z-index: 10; max-height: 0; height: auto; opacity: 1; clear:both;}
.readMoreHolder.open {max-height: 100vh; overflow: hidden;}
.showButton {margin: 1em 0 2em; transition: all .3s ease; cursor: pointer;}



@media screen and (max-width: 1300px) {

  .hoverMenu {grid-template-columns: 1fr 1fr;}

}

@media screen and (max-width: 1300px) {

  div.grid-4x.count.link {grid-template-columns: 1fr 1fr;}
  div[class*="grid"] > .block {aspect-ratio: unset; min-height: 360px; padding:30px 50px 30px 30px;}

}

@media screen and (max-width: 900px) {

  :root {
    --h1Size: 35px;
    --h2Size: 26px;
    --h3Size: 21px;
    --h5Size: 13px;
    --space5: 5px;
    --space10: 10px;
    --space15: 15px;
    --space20: 20px;
    --space25: 20px;
    --space30: 20px;
    --space40: 22px;
    --space50: 30px;
    --space80: 40px;
    --space100: 50px;
    --space200: 80px;
  } 
  
  a.logo img {width: 120px;}

  .vak {padding: 0;}

  .bovenkantHolder {position: sticky; background: var(--color7);}
  .bovenkantHolder .bovenkant {filter: unset; min-height: 70px;}

  .pageFooterHolder .pageFooter .grid-4x {grid-template-columns: 1fr;}

   div.grid-4x.count.link {grid-template-columns: 1fr;}
   div[class*="grid"] > .block {min-height: 260px; padding:30px 50px 30px 30px;}

   div[class*="grid"].count.vertical > div::before {font-size: 40px; margin-top:0;}
   div[class*="grid"].count.vertical > div {grid-template-columns: 40px 1fr; gap: 0 var(--space20);}

   ul.solve {grid-template-columns: 1fr;}

   .hoverMenu .kolommen.kolommen18 {display:flex;}
  
}