:root {
  --kleur1: #B9A966;
  --kleur2: #282821;
  --fontkleur: #282821;
  --font-family1: "DM Sans", Helvetica, Arial, sans-serif;
  --font-family2: "Nothing You Could Do", Helvetica, Arial, sans-serif;
  --max-width: 1580px;
  --text-small: 1000px;
  --border-radius: 5px;
  
}

body {font-family: var(--font-family1); font-weight: 200; color: var(--fontkleur); background: #FFF; font-size: 17px; line-height: 1.85em;}
::selection {background: var(--kleur2); color: #FFF;}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: var(--border-radius); background: #FFF; color: #666; padding: 12px 10px;}

.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(--font-family1); font-weight: 200; color: var(--fontkleur); line-height: 1.35em; margin: 0 0 0.5em 0;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: 35px;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: 25px;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: 18px;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: 30px; font-family: var(--font-family2); font-weight: normal; color: var(--kleur1);}

h1 + h5 {margin-top:-1em;}

a.logo {margin: auto 0; outline: 0;}
a.logo img {width: 120px; margin: 0;}

a.knop, .button, a.button, button {position: relative; font-family: var(--font-family1); background-color: var(--kleur1); color: #FFF; border: 0; font-size: 15px; padding: 15px 25px; cursor: pointer; line-height: 1; text-decoration: none !important; font-weight: normal; border-radius: var(--border-radius);}
a.knop::after {content: "\f105"; font-family: "Font Awesome 5 Pro"; margin-left: 10px; vertical-align: middle;}

a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--kleur2);}

.bovenkantHolder {border: 0; position: sticky; top: 0; z-index: 10;}
.bovenkantHolder .bovenkant {max-width: unset; height:120px; background:rgba(255,255,255,0); transition: all .3s ease;}
.bovenkantHolder .bovenkant .art-menu {display: flex; gap: 30px;}

.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal {min-width: 40px; margin-left: 20px; top: -1px;}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal.open ul {border-radius: var(--border-radius);}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul {transition: unset;}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving {font-weight: normal; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--fontkleur);}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul li .afbeelding {display: none;}

.bovenkantHolder.scrolled {background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.bovenkantHolder.scrolled .art-menu {filter:invert(0);}

.art-menu li a .t {font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--fontkleur); padding: 15px 0;}
.art-menu li a .t:hover, .art-menu li a.active .t {color:var(--fontkleur);}

.art-menu li a .t::before {content: ""; display: block; position: absolute; bottom: 10px; left: 0; width: 0; height: 1px; background-color: var(--fontkleur); transition: all .3s ease; }
.art-menu li a:hover .t::before, .art-menu li a.active .t::before {width: 100%;}

#map-canvas {height: calc(100vh - 130px) !important; width: 100% !important;}
#map-canvas::before { opacity: 0;  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; pointer-events: none; transition: all 1s ease 0s; z-index: 1;}

.gm-style .gm-style-iw {font-size:16px; font-family: var(--font-family1);}
.gm-style .gm-style-iw-c {border-radius: 0; box-shadow: 0 10px 20px rgba(0,0,0,.2);}
.gm-style .gm-style-iw-c button { top: 5px !important; right: 5px !important; transform: scale(1.5);}
.gMapsHolder {padding:20px; line-height: 1.65em; font-weight: normal; width:300px;}
.gMaps_email, .gMaps_extra1, .gMaps_adres, .gMaps_Telefoon {margin:0;}
.gMaps_Telefoon, .gMaps_extra1, .gMaps_extra2 {margin-top:0.5em;}
.gMaps_bedrijfsnaam {font-weight: bold !important;}

.vak .inhoud.geenMax {max-width:none;}
div[class*="grid"] {gap:100px;}
div[class*="grid"].midden {align-items: center;}

.vak .inhoud.max600 {margin-left:auto; margin-right:auto; max-width: 600px;}

.pageFooterHolder a {text-decoration: none;}

div.vormLinks, div.vormRechts {position: relative;}
div.vormLinks::before, div.vormRechts::before {content: ""; position: absolute; top: -20px; left: -60px; bottom:-40px; width:100%;  background: var(--kleur1); z-index: -1; opacity: .3; transition: all 3s ease;}
div.vormRechts::before {left: 60px;}
div.vormLinks:hover::before   {left:-20px}
div.vormRechts:hover::before {left:20px}

.Gv3 {display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px;}
.Gv3 .Gv3Thumb {width: unset;}
.Gv3Thumb .desc {background: transparent; color:#000; font-weight:bold; font-size:14px; text-shadow: 0 2px 5px rgba(255,255,255,1);}



.HeaderHolder {max-height: 100vh; overflow: hidden; position: relative;}
.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; opacity: 0; animation: fadeIn 1s ease 3s forwards;}
.scrollDown .pijl {margin: 5px auto; height: 40px; width: 2px; background: #FFF; cursor: pointer; -webkit-animation: sdb05 1.5s infinite; animation: sdb05 1.5s infinite;}
.scrollDown span {font-size: 13px; color: var(--fontkleur2); cursor: pointer; color:#fff;}
@-webkit-keyframes sdb05 { 0% { -webkit-transform: translateY(-20px); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: translateY(0); opacity: 0; } }
@keyframes sdb05 { 0% { transform: translateY(-20px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }

@keyframes fadeIn {to {opacity: 1;}}
@-webkit-keyframes fadeIn {to {opacity: 1;}}



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

  h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: 30px;}
  h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: 25px;}
  h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: 20px;}

  a.logo img {width: 100px;}

  .vak {padding: 0;}
  .art-Sheet, section .inhoud, .vak .inhoud {padding: 20px;}

}