:root {
  --color1: #FF8430;
  --color2: #C60E43;
  --color3: #FDC300;
  --color4: #f1f3f5; 
  --color5: #FAF7FA;
  --fontColor1: #1d1d1d;
  --fontFamily1: "sofia-pro", Helvetica, Arial, sans-serif;
  --maxWidth: 1380px;
  --textSmall: 1000px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space100: 100px;
  --borderRadius1: 10px;
  --borderRadius2: 25px;
}


body {
  margin: 0;
  padding: 0;
  line-height: 1.75em;
  color: var(--fontColor1);
  font-family: var(--fontFamily1);
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  background: var(--color4);
  height: auto !important;
}

a img {border: 0;}
p {margin: 0 0 1em 0;}

img.volledig {max-width: 100% !important; height: auto !important;}

a, a:link, a:visited, a.visited, a:hover, a.hover {font-family: inherit; text-decoration: underline; color: #000; transition: all .3s ease;}
a:link {text-decoration: underline; color: #000;}
a:visited, a.visited {text-decoration: underline; color: #000;}
a:hover, a.hover {text-decoration: none; color: #000;}

h1, .h1, h2, .h2, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-style: normal; text-decoration: none; margin: 0 0 10px 0; line-height: 1.35em; font-family: var(--fontFamily1); font-weight: 600; color: var(--color2);}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: 40px; hyphens: auto;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: 23px; hyphens: auto;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: 18px; hyphens: auto;}
h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {color: #5e5e5e; font-size: 17px; font-weight: 300;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: 20px; color:#777; font-weight: 300; hyphens: auto;}
h6, .h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover {color: #333333; font-size: 16px;}

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 {margin-top:1.5em;}
h1 + h5 {margin-top:-0.75em; margin-bottom:1em;}
h2 + h5 {margin-top:-0.75em; margin-bottom:1em;}

a.knop {position: relative; font-family: var(--fontFamily1); background-color: var(--color2); color: #FFF; border: 0; font-size: 16px; padding: 15px 30px 17px 30px; cursor: pointer; line-height: 1; text-decoration: none !important; font-weight: 600; border-radius: var(--borderRadius2); margin: 0; text-align: center; display: inline-block; }

a.logo {margin: auto 0; outline: 0; line-height: 0; display: block;}
a.logo img {width: auto; height: 90px; margin: 0;}

header {position: sticky; top: 0; z-index: 2;}

.bovenkantHolder {background: #FFF; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25); width: 100%; z-index: 5;}
.bovenkantHolder .bovenkant {min-height: 70px; margin: 0 auto; padding: var(--space10) var(--space30); box-sizing: border-box; display: flex; max-width: var(--maxWidth);}

.vak.wit {background: #FFF;}

section .inhoud, .vak .inhoud {max-width: var(--maxWidth); padding: var(--space50) var(--space30); margin: 0 auto; box-sizing: border-box; position: relative;}

.inhoud.max700, .inhoud.max800, .inhoud.max900, .inhoud.max1000 {max-width: 700px; margin-left: auto; margin-right: auto;}
.inhoud.max1000 {max-width: 1000px;}

.vak.symbol .inhoud:first-child::after {content: ""; background: url("/images/symbol.svg"); background-size: cover; background-repeat: no-repeat; width: 150px; height: 150px; position: absolute; right: -200px; top: 20px;}

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

.vak.achtergrond {position: relative; line-height: 0;}
.vak.achtergrond img {width: 100% !important; height: auto !important; max-height: 600px; object-fit: cover;}

div[class*="grid"] {display: grid; gap: var(--space30);}
div[class*="grid"].center {align-items: center;}
div[class*="grid"] img {border-radius: var(--borderRadius2);}

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

.block {background: #FFF; border-radius: var(--borderRadius1); padding: var(--space30); box-sizing: border-box;}
.block p:last-of-type {margin: 0;}

.quote {background: var(--color1); border-radius: var(--borderRadius1); padding: var(--space30); box-sizing: border-box; font-size: 20px; color: #FFF; width: calc((100% - (var(--space30) * 2)) / 3); margin-left: var(--space30); min-height: 300px;}
.quote p:last-of-type {margin: 0;}

.liquid-slide-sjabloon {width: 100%; display: block; position: relative;}
.liquid-slide-sjabloon .plaatje {z-index: -1; position: relative; line-height: 0;}
.liquid-slide-sjabloon .plaatje img {width: 100% !important; height: auto !important; max-height: 80vh; object-fit: cover;}
.liquid-slide-sjabloon .plaatje::after {content: ""; background: url("/images/curve.svg") no-repeat; position: absolute; bottom: 0; right: 0; left: 0; width: 100%; background-size: cover; background-repeat: no-repeat; pointer-events: none; aspect-ratio: 1600 / 155; z-index: 1;}

.liquid-slide-sjabloon .sliderWrapper {max-width: var(--maxWidth); margin: 0 auto; left: 0; right: 0; top: 0; bottom: 0; position: absolute;}
.liquid-slide-sjabloon .inhoud {position: absolute; font-size: inherit; left: 0; bottom: 30px; background: unset; max-width: 600px; border-radius: 0; color: #FFF; box-sizing: border-box; top: auto; padding: var(--space30);}
.liquid-slide-sjabloon .inhoud h2 {color: #FFF; font-size: 40px; hyphens: unset;}
.liquid-slide-sjabloon .inhoud img.cloudsvg {position: absolute; top: -10%; left: -8%; right: -15%; bottom: -10%; z-index: -1; width: 123% !important; height: 118% !important; object-fit: fill;}


img.masker1 {mask-image: url("/images/masker1.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center center;}

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

    :root {
    --h1Size: 35px;
    --h2Size: 25px;
    --h3Size: 19px;
    --h4Size: 20px;
    --h5Size: 18px;
    --space10: 10px;
    --space20: 20px;
    --space30: 20px;
    --space40: 20px;
    --space50: 25px;
    --space80: 30px;
    --space100: 50px;
  }

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

  .liquid-slide-sjabloon {overflow: hidden;}
  .liquid-slide-sjabloon .sliderWrapper {position: relative; background: unset;}
  .liquid-slide-sjabloon .inhoud {position: relative; margin-bottom: 40px; padding: 40px; z-index: 2;}

  .vak.symbol .inhoud::after {display: none;}

  .quote {width: 100%; margin: 0 var(--space10);}

}