:root {
  --kleur1: #f8931e;
  --kleur2: #000;
  --fontkleur: #555;
  --font-family1: "Barlow";
  --font-family2: "Nothing You Could Do", Helvetica, Arial, sans-serif;
  --max-width: 1580px;
  --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;}

a {text-underline-offset: 0.3em;}

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: 42px;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: 38px;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: 24px; font-weight: normal}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: 24px; font-weight: normal; color: var(--kleur1);}

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

a.logo {margin: 20px auto; outline: 0;}
a.logo img {width: 260px; 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: inherit; padding: 15px 25px 18px; cursor: pointer; line-height: 1; text-decoration: none !important; font-weight: normal; border-radius: var(--border-radius); text-shadow: none !important;}
/*a.knop::after {content: "\f105"; font-family: "Font Awesome 6 Free"; margin-left: 10px; vertical-align: middle;} */

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

a.knop + a.knop {margin-left: 20px;}

.bovenkantHolder {height:0; border:0;}

.art-Sheet {padding:0; max-width: none;}

.liquid-slide-sjabloon .inhoud h1  {font-size:50px; color:#fff;}
.liquid-slide-sjabloon .inhoud {background:transparent; left:50%; transform:translateX(-50%); text-align: center; font-size:20px; line-height: 1.85em; width:800px; max-width: unset; text-shadow: 0 0 10px rgba(0,0,0,0.5);}
.liquid-slide-sjabloon .videoWrapper {background-color: #000; max-height:100vh; overflow: hidden;}
.liquid-slide-sjabloon .plaatje {max-height:100vh; overflow: hidden;}

.vak .inhoud {max-width: var(--max-width);}
/* .vak .geen-max {max-width: unset;} */


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

.vak.footer {background:var(--kleur2); color:#FFF}
.vak.footer h3 {font-size:24px; color:var(--kleur1)}
.vak.footer a {color:#fff;}

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

ul.logoCarousel {margin:0; padding:0;}
ul.logoCarousel li {list-style: none; padding:0; margin:0;}
ul.logoCarousel img {width:140px; height:80px; object-fit:contain; margin:0 30px; mix-blend-mode: multiply;}
.flickity-page-dots {margin-top:10px;}
.flickity-page-dots .dot {margin:0 3px; width:3px; height:3px;}

.vak {padding: 0;}
.vak .inhoud {padding-top: 100px; padding-bottom:100px;}

.vak .metLogos {text-align: center;}

.vak.huisjes {
  background: url(huisjes.svg) center center repeat-x;
  background-size: calc(473px* 2);
  min-height: 210px;}


a.telefoon, a.mail, a.mobiel  {text-decoration: none; display: block;}
a.telefoon:hover, a.mail:hover, a.mobiel:hover {color:var(--kleur1)}

a.telefoon::before {content: "\f095"; font-family: "Font Awesome 6 Free"; font-weight: bold; margin-right: 10px; font-size: inherit; color: var(--kleur1); display: inline-block; width:20px;}
a.mail::before {content: "\f0e0"; font-family: "Font Awesome 6 Free"; font-weight: bold; margin-right: 10px; font-size: inherit; color: var(--kleur1); display: inline-block; width:20px;}
a.mobiel::before {content: "\f3cf"; font-family: "Font Awesome 6 Free"; font-weight: bold; margin-right: 10px; font-size: inherit; color: var(--kleur1); display: inline-block; width:20px;}

a.whatsAppButton {background:#BE9F56; color:#fff; padding:15px; background-color:#49E76F; position: fixed; right:20px; bottom:20px; z-index: 15; border-radius: 100%; aspect-ratio: 1; line-height: 1em;; box-shadow: 0 5px 15px rgba(0,0,0,0.3); box-sizing:border-box; transition: all .3s ease;}
a.whatsAppButton img {width:100%; height:auto;}
a.whatsAppButton:hover {background-color: var(--kleur2);}

@media screen and (max-width: 1050px) {
  .liquid-slide-sjabloon {flex-direction: column;}
  .liquid-slide-sjabloon .plaatje,
  .liquid-slide-sjabloon .inhoud {width: 100%;}
}


@media screen and (max-width: 900px) {
  .liquid-slide-sjabloon .inhoud {background-color: var(--blauw); padding:20px;}
  .liquid-slide-sjabloon .inhoud p:last-of-type {margin-bottom:0;}

  h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: 34px;}
  h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: 30px;}
  h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: 20px; font-weight: normal}
  h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: 20px; font-weight: normal; color: var(--kleur1);}
  .liquid-slide-sjabloon .inhoud h1  {font-size:34px; color:#fff;}
  a.knop + a.knop {margin:10px 0 0 0;}

  a.logo img {width: 140px;}
  .bovenkantHolder .bovenkant {min-height: 70px;}
  
  ul.logoCarousel img {margin:0 10px; width:100px; height:60px;}
}