/*
* Fonts (Inter)
*/
@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&display=swap');

/*
* Variables
*/
:root {
  --step--2: clamp(0.72rem, 0.8202rem + -0.1336vw, 0.7901rem);
  --step--1: clamp(0.8889rem, 0.8841rem + 0.0212vw, 0.9rem);
  --step-0: clamp(1rem, 0.9464rem + 0.2381vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.0045rem + 0.5357vw, 1.4063rem);
  --step-2: clamp(1.2656rem, 1.0547rem + 0.9375vw, 1.7578rem);
  --step-3: clamp(1.4238rem, 1.0924rem + 1.4732vw, 2.1973rem);
  --step-4: clamp(1.6018rem, 1.1112rem + 2.1805vw, 2.7466rem);
  --step-5: clamp(1.802rem, 1.1029rem + 3.107vw, 3.4332rem);

  --space-3xs: clamp(0.25rem, 0.2232rem + 0.119vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4732rem + 0.119vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.6964rem + 0.2381vw, 0.875rem);
  --space-s: clamp(1rem, 0.9464rem + 0.2381vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4196rem + 0.3571vw, 1.6875rem);
  --space-l: clamp(2rem, 1.8929rem + 0.4762vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8393rem + 0.7143vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.7857rem + 0.9524vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.6786rem + 1.4286vw, 6.75rem);
  --space-3xs-2xs: clamp(0.25rem, 0.1161rem + 0.5952vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3393rem + 0.7143vw, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.5893rem + 0.7143vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.7054rem + 1.3095vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.1786rem + 1.4286vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.4107rem + 2.619vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.3571rem + 2.8571vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 2.8214rem + 5.2381vw, 6.75rem);


  /* Dimensions */
  --site-width: 87.5rem;
  --site-wide-width: min(var(--site-width) + 180px, 100% - 4rem);

  /* Sizes */
  --border-radius: 3px;

  /* Colors */
  --clr-text: #000000
    --clr-text-light: #000000

    --transparent: transparent;
  --clr-background: hsl(0, 0%, 100%);
  /*--clr-accent: hsl(200, 15%, 64%);*/
  --clr-accent: #008D9B;
  --clr-accent-100: #008D9B;
  --clr-accent-75: #008D9B;
  --clr-accent-50: #008D9B;
  --clr-accent-25: #008D9B;

  --animate-duration: 1s;
}


.invert {
  --clr-text: #e6e6e6;
  --clr-accent-100: #ffffff;
}

.skip-to-content {
  display: none;
}


/*
* Global
*/
* {
  box-sizing: border-box;
  font-family: "Poppins", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.6;
  color: var(--clr-text);
  scroll-behavior: smooth;
  scroll-margin-top: 8rem;
}

body {
  font-family: "Poppins", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.6;
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--clr-text);
  text-rendering: auto;
  background-color: var(--clr-background);
}


/*
* Containers
*/
.c {
  width: 100%;
}

.c_c {
  width: min(var(--site-width), 100% - 4rem);
  margin-left: auto;
  margin-right: auto;
}

.c_w {
  width: var(--site-wide-width);
  margin-left: auto;
  margin-right: auto;
}

.c_s {
  width: min(var(--site-width) - 400px, 100% - 4rem);
  margin-left: auto;
  margin-right: auto;
}

.c_xs {
  width: min(50rem, 100% - 4rem);
  margin-left: auto;
  margin-right: auto;
}


/*
* Tokens
*/
.flow > * + *,
.hs_cos_wrapper > * + *,
.legal-consent-container > * + * {
  margin-top: var(--space-m);
}

.flow > * + .theme_button {
  margin-top: var(--space-m);
}


.flex_spacer {
  flex: 1;
}

.stack {
  display: grid;
  grid-template: 1 / 1;
}

.stack > * {
  grid-area: 1 / 1 / 2 / 2;
}

/*
* Typography
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.1em;
  --after-margin: none;
  text-transform: uppercase;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
  color: var(--clr-accent);
  font-weight: 600;
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-2);
}

h5 {
  font-size: var(--step-1);
}

h6 {
  font-size: var(--step-0);
}

p {
  color: var(--clr-text);
}

a {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: underline;
}

ul {
  padding: 0 0 0 1.1rem;
}

ol {
  padding: 0 0 0 1.1rem;
}

strong {
  font-weight: bold;
  font-size: inherit;
  line-height: inherit;
}

span {
  /*     font-weight: bold; */
  font-size: inherit;
  line-height: inherit;
}

br {
  line-height: inherit;
  height: inherit;
}

blockquote {
  padding: 2rem 5rem;
  text-align: center;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

blockquote:before {
  content: open-quote;
  color: inherit;
  font-size: var(--step-5);
  line-height: 0.1em;
  margin-right: 0.1rem;
  vertical-align: -.5rem;
}

blockquote:after {
  content: close-quote;
  color: inherit;
  font-size: var(--step-5);
  line-height: 0.1em;
  margin-left: 0.1rem;
  vertical-align: -.5rem;
}

blockquote p {
  display: inline;
  font-size: var(--step-3);
  line-height: 1.2;
  font-style: italic;
}

img {
  border-radius: var(--border-radius);
}

/*
* Forms
*/
.form-field,
.hs-form-field,
.legal-consent-container {
  margin-bottom: var(--space-s);
}

label {
  display: block;
  margin-bottom: .3rem;
  font-weight: 500;
}

fieldset {
  width: 100% !important;
  max-width: 100% !important;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  padding: .5rem;
  border: none;
  border-radius: var(--border-radius);
  color: #111111;
  border: solid 1px #c7c7c7;
}

input[type="submit"] {
  appearance: none;
  display: inline-block;
  padding: var(--space-xs) var(--space-m);
  border: solid 1px #c7c7c7;
  line-height: 1;
  transition: background-color .3s ease, color .3s ease;
  font-weight: 400;
  background-color: var(--clr-accent);
  border-radius: var(--border-radius);
  color: white;
}

.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"] {
  width: 100% !important;
}

select {
  width: 100% !important;
  padding: .45rem;
  border: solid 1px #c7c7c7;
  border-radius: var(--border-radius);
  background-color: #fff;
}

textarea {
  width: 100% !important;
  padding: .5rem;
  border: solid 1px #c7c7c7;
  border-radius: var(--border-radius);
  color: #111111;
}

.hs-form ul {
  list-style: none;
  margin: 0 !important;
  padding: 0 0 0 0 !important;
}

.hs-form ul li {
  display: flex;
  align-items: center;
  margin: 0;
  padding; 0;
}

.hs-form ul li label {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.hs-form ul li label input {
  margin-top: 0.4rem;
}

.hs-form ul li label span {
  padding: 0 !important;;
  margin: 0 !important;;
}

.hs-error-msg {
  font-size: 0.8rem;
  color: #DB3F29;
  margin-top: 0.25rem;
}

/*
* Utilities
*/
.button {
  display: inline-block;
  padding: var(--space-s) var(--space-l);
  line-height: 1;
  transition: background-color .3s ease, color .3s ease;
  font-weight: 400;
  background-color: var(--clr-accent);
  color: white;
  border-radius: var(--border-radius);
}

.invert .button {
  border: solid 1px #ffffff;
}

.button:hover {
  background-color: #ffffff;
  text-decoration: none;
  color: black;
}

.button__secondary {
  background-color: #ffffff;
  border-radius: 1000px;
  color: #E95521;
  border: solid 1px #E95521;
}

.theme_button__secondary:hover {
  background-color: #E95521;
  border: solid 1px #E95521;
  border-radius: 1000px;
  color: #ffffff;
  text-decoration: none;
}

.acf-fc-popup ul::after {
  content: "Maak een keuze uit onderstaande layouts.";
}

.acf-fc-popup ul::before {
  content: "Selecteer een layout";
}

.hs_product_category {
  max-width: 100%;
}

.hs_product_category ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  max-width: 100%;
  margin-top: 1rem;
}

.hs_product_category ul li label {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 100px 5px 5px 5px;
  background-position: top 5px center;
  background-repeat: no-repeat;
  background-size: 80px 80px;
  text-align: center;
  border-radius: 5px;
  background-color: white;
}

.hs_product_category ul li label span {
  display: block !important;
  width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hs_product_category ul > li label:has(input[type="checkbox"]:checked) {
  background-color: #008d9b;
}

.hs_product_category ul > li:nth-child(1) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_toiletpapier-1.png?width=260&upscale=true&name=c_toiletpapier-1.png');
}

.hs_product_category ul > li:nth-child(2) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_bakje-1.png?width=260&upscale=true&name=c_bakje-1.png');
}

.hs_product_category ul > li:nth-child(3) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c__bestek.png?width=260&upscale=true&name=c__bestek.png');
}

.hs_product_category ul > li:nth-child(4) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_bord-1.png?width=260&upscale=true&name=c_bord-1.png');
}

.hs_product_category ul > li:nth-child(5) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_glas-1.png?width=260&upscale=true&name=c_glas-1.png');
}

.hs_product_category ul > li:nth-child(6) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_oan.png?width=260&upscale=true&name=c_oan.png');
}

.hs_product_category ul > li:nth-child(7) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_can-1.png?width=260&upscale=true&name=c_can-1.png');
}

.hs_product_category ul > li:nth-child(8) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_can-1.png?width=260&upscale=true&name=c_can-1.png');
}

/* .hs_product_category ul > li:nth-child(9) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_can-1.png?width=260&upscale=true&name=c_can-1.png');
} */

.hs_product_category ul > li:nth-child(9) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_thee-1.png?width=260&upscale=true&name=c_thee-1.png');
}

.hs_product_category ul > li:nth-child(10) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c__tisues.png?width=260&upscale=true&name=c__tisues.png');
}

.hs_product_category ul > li:nth-child(11) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_kaarsjes-1.png?width=260&upscale=true&name=c_kaarsjes-1.png');
}

.hs_product_category ul > li:nth-child(12) > label {
  background-image: url('https://149033731.fs1.hubspotusercontent-eu1.net/hub/149033731/hubfs/c_koffiemachine.png?width=260&upscale=true&name=c_koffiemachine.png');
}

.hs_product_category ul li input {
  display: none;
}