:root {
  --kleur1: #fbb202;
  --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: #000; 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: 18px; font-weight: bold;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: 30px; 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: 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 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; padding-bottom:52.75%;}
.liquid-slide-sjabloon .plaatje {max-height:100vh; overflow: hidden;}

.vak .inhoud {max-width: var(--max-width);}


.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;}

a.telefoon, a.mail {text-decoration: none; display: block; color:#fff;}
a.telefoon:hover, a.mail: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);}
a.mail::before {content: "\f0e0"; font-family: "Font Awesome 6 Free"; font-weight: bold; margin-right: 10px; font-size: inherit; color: var(--kleur1);}

@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 .videoWrapper {transform: scale(1.5);} */
  .liquid-slide-sjabloon .inhoud {background-color: var(--blauw); padding:20px;}
  a.logo img {width: 140px;}

  h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,
  .liquid-slide-sjabloon .inhoud h1 {font-size:30px;}
  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: 18px; font-weight: bold;}
  h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: 20px; font-weight: normal; color: var(--kleur1);}
}