:root {
  --color1: #000;
  --color2: #FCFAF7;
  --fontColor1: #1E1812;
  --fontColor2: #4B4B4B;
  --borderColor1: #ADA092;
  --borderColor2: #405249;
  --fontFamily1: "Manrope", Helvetica, Arial, sans-serif;
  --bodyFontSize: 16px;
  --h1Size: 90px;
  --h2Size: 60px;
  --h3Size: 22px;
  --h4Size: 16px;
  --h5Size: 28px;
  --maxWidth: 1600px;
  --space5: 5px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --space150: 150px;
  --borderRadius1: 8px;
  --borderRadius2: 20px;
  --leftFr: 1fr;
  --rightFr: 1fr;
}

html {overflow-x: hidden;}

@view-transition {navigation: auto;}

body {font-family: var(--fontFamily1); font-weight: normal; color: var(--fontColor1); background: var(--color2); font-size: var(--bodyFontSize); line-height: 1.5em; letter-spacing: -0.01em;}
::selection {background: var(--color1); color: var(--color2);}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-color: var(--borderColor1); border-radius: var(--borderRadius1); font-size: 16px; color: var(--fontColor1); padding: 12px; background: var(--color2) no-repeat scroll right 6px top 6px !important; background-size: 6px; background-image: url('data:image/svg+xml;utf8,<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path fill="%23444444" d="m302.357254 15v181.100094l177.187854-61.720211 32.511533 90.143993-177.187854 57.659671 109.726423 152.676313-80.466043 57.659671-106.47527-158.361069-107.288058 158.361069-82.9044086-57.659671 111.3519996-152.676313-178.81343-57.659671 32.5115327-90.143993 175.5622773 63.344427v-182.72431z"/></svg>');}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus {border-color: var(--color1) !important;}

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

input[type="radio"]::before {font-weight: bold;}
input[type="radio"]:checked::before {color: var(--color1);}

select {padding: 12px; background-color: var(--color2); background-position: center right 10px; border-radius: var(--borderRadius1); border-color: var(--borderColor1); color: var(--fontColor1); font-size: 16px;}
  
.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(--fontfamily1); font-weight: 800; color: var(--fontColor1); line-height: 1.10em; margin: 0 0 0.5em 0; text-wrap-style: balance;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size);}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size);}
h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {font-size: var(--h4Size); font-family: var(--fontFamily1); text-transform: uppercase; font-weight: normal; letter-spacing: 0.25em;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-weight: 600; line-height: 1.70em;}

h5 + h2 {margin-top: -0.25em;}
h5 + h1 {margin-top: -0.25em;}

a.knop, .button, a.button, button {font-family: inherit; font-size: 13px; color: var(--fontColor1); border: 1px solid var(--color1); padding: 18px 20px; border-radius: 0; background: transparent; line-height: 1; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none !important; overflow: hidden; transition: .3s all ease; z-index: 1;}
a.knop:hover, .button:hover, a.button:hover, button:hover {color: #FFF; background: unset;}
a.knop::before, .button::before, a.button::before, button::before {position: absolute; content: ""; top: 0; left: 0; bottom: 0; width: 0%; background: var(--color1); display: block; transition: .75s all ease; z-index: -1; opacity: .3;}
a.knop:hover::before, .button:hover::before, a.button:hover::before, button:hover::before {width: 100%; opacity: 1;}

a.knop.wit {border-color: #FFF; color: #FFF;}
a.knop:hover, .button:hover, a.button:hover, button:hover {color: var(--fontColor1);}
a.knop::before, .button::before, a.button::before, button::before {background: #FFF;}

.bovenkantHolder {border: 0; background: unset; transition: .3s all ease; position: sticky; top: 0;}
.bovenkantHolder .bovenkant {max-width: 100%; min-height: 180px; transition: .3s all ease;}

.bovenkantHolder .bovenkant a.logo {margin: auto 0; outline: 0; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%;}
.bovenkantHolder .bovenkant a.logo img {width: 200px; transition: .3s all ease;}

.bovenkantHolder .bovenkant .art-nav {margin: auto auto auto 0;}
.bovenkantHolder .bovenkant .art-nav .art-menu {position: static;}
.bovenkantHolder .bovenkant .art-nav .art-menu li {position: static;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t {font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500;}


.bovenkantHolder.scrolled {background-color: rgba(21, 21, 21, 0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.bovenkantHolder.scrolled .bovenkant {min-height: 100px;}
.bovenkantHolder.scrolled .bovenkant a.logo img {width: 80px;}

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

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

.inhoud.max700, .inhoud.max800, .inhoud.max900 {padding-right: 0; padding-left: 0;}
.inhoud.max700 {max-width: 700px;}
.inhoud.max900 {max-width: 900px;}
.vak .inhoud + .inhoud {padding-top: 0;}

div[class*="grid"].center {align-items: center;}
div[class*="grid"].gap-30 {gap: var(--space30);}
div[class*="grid"].gap-50 {gap: var(--space50);}
div[class*="grid"].gap-100 {gap: var(--space100);}

div[class*="grid"] img {border-radius: var(--borderRadius1);}

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

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


.pageFooterKnoppenHolder {background: var(--color1);}
.pageFooterKnoppenHolder .pageFooterKnoppen {max-width: 100%; padding: var(--space50) var(--space30);}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a {font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {opacity: 0; margin: 0 var(--space10);}

.pageFooterKnoppenHolder .pageFooterKnoppen a.logo {margin: auto 0; outline: 0; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%; filter: invert(1);}
.pageFooterKnoppenHolder .pageFooterKnoppen a.logo img {width: 80px; height: auto;}


.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;}

@media screen and (max-width: 900px) {
  
  :root {
    --h1Size: 50px;
    --h2Size: 30px;
    --h3Size: 16px;
    --h4Size: 16px;
    --h5Size: 20px;
    --space5: 5px;
    --space10: 10px;
    --space15: 10px;
    --space20: 10px;
    --space30: 20px;
    --space40: 20px;
    --space50: 20px;
    --space80: 30px;
    --space100: 30px;
    --space150: 50px;
  }

  .vak {padding: 0;}


  a.logo img {width: 110px;}

}