@charset "UTF-8";
/* Scss Document */
.btn-padding-15 {
  padding: 5px 15px 5px 15px !important; }

html, body {
  background-image: url("/media_afb/bg.webp");
  background-color: #faf8f2;
  background-position: top center;
  background-repeat: repeat; }

main h1 {
  margin-bottom: 40px !important; }
  main h1 span {
    position: relative;
    /* Belangrijk voor de absolute positionering van de lijn */
    padding-bottom: 20px;
    /* Creëert ruimte onder de titel voor de lijn */ }
    main h1 span::after {
      content: '';
      /* Essentieel voor pseudo-elementen */
      position: absolute;
      width: 100%;
      height: 16px;
      left: 0;
      bottom: 0px;
      background-image: url("/media_afb/stroke.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 0;
      /* Zorgt ervoor dat de lijn achter de tekst komt (optioneel) */ }

main h2 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 30px !important;
  color: #316650 !important;
  line-height: 33px !important;
  margin: 0 !important; }

.custom-logo {
  width: 122px;
  height: 122px;
  display: block;
  position: absolute;
  top: 0;
  margin-left: -10px; }
  .custom-logo img {
    display: block;
    margin: 0; }

#page_1 .custom-logo {
  width: 283px;
  height: 283px;
  display: block;
  position: absolute;
  top: 0;
  margin-left: -30px; }
  #page_1 .custom-logo img {
    display: block;
    margin: 0; }
  @media (max-width: 1280px) {
    #page_1 .custom-logo {
      width: 220px;
      height: 220px;
      margin-left: -25px; } }
  @media (max-width: 1024px) {
    #page_1 .custom-logo {
      width: 122px;
      height: 122px;
      margin-left: -18px; } }

.align-center h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  color: #F7F3E9 !important;
  line-height: 28px !important;
  margin: 0 !important;
  letter-spacing: .08em; }
  @media (max-width: 768px) {
    .align-center h4 {
      font-size: 18px !important;
      line-height: 24px !important; } }

@media (max-width: 480px) {
  .btn-main-light {
    width: 100% !important;
    min-width: 100%;
    box-sizing: border-box;
    text-align: center !important; } }

@media (max-width: 520px) {
  .col-padding-top {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto; } }
[id="6"] .box-1650 .col-2-1 {
  padding-top: 130px; }
  @media (max-width: 1280px) {
    [id="6"] .box-1650 .col-2-1 {
      padding-top: 70px; } }
  @media (max-width: 1180px) {
    [id="6"] .box-1650 .col-2-1 {
      padding-top: 90px; } }
  @media (max-width: 1024px) {
    [id="6"] .box-1650 .col-2-1 {
      padding-top: 0; } }

/* AI generated - geen goesting om het zelf te doen */
.flex-container {
  display: flex;
  gap: 20px;
  /* Aanpasbare ruimte tussen kolommen */
  flex-wrap: wrap;
  /* Belangrijk voor responsiviteit */
  /* Specifieke styling voor de eerste kolom */
  /* Styling voor de overige kolommen (2, 3, 4) */ }
  .flex-container .column {
    background-color: #F3ECD6;
    border-radius: 30px;
    padding: 24px 30px 30px;
    box-sizing: border-box;
    /* Zorgt ervoor dat padding binnen de breedte valt */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Om content netjes te verdelen */ }
  .flex-container .column-1 {
    flex: 0 0 25%;
    /* Voorbeeld: 25% breed. Pas dit aan naar wens */
    max-width: 270px;
    /* Minimale breedte om content te tonen */
    background-color: transparent;
    /* Geen achtergrondkleur voor de eerste kolom */
    border-radius: 0;
    /* Geen afgeronde hoeken voor de eerste kolom */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centreer titel en knop verticaal */
    align-items: flex-start;
    /* Lijn titel en knop links uit */
    padding: 0; }
  .flex-container .column-1 h2 {
    margin-bottom: 15px; }
  .flex-container .column-1 button {
    background-color: #007bff;
    /* Voorbeeld knop kleur */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; }
  .flex-container .column-1 button:hover {
    background-color: #0056b3; }
  .flex-container .column-2, .flex-container .column-3 {
    flex: 1;
    /* Laat kolommen flexibel groeien/krimpen */ }
  .flex-container .column-4 {
    flex: 1;
    /* Laat kolommen flexibel groeien/krimpen */
    min-width: 600px;
    /* Minimale breedte voor deze kolommen */ }
  .flex-container .column h3 {
    margin-top: 0;
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* Maximale 1 lijn voor titel */
    -webkit-box-orient: vertical; }
  .flex-container .column p {
    margin-bottom: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Maximale 3 lijnen voor inhoud */
    -webkit-box-orient: vertical; }

/* Media query voor de overgang van 4 naar 3+1 kolommen */
@media (max-width: 1200px) {
  /* Pas deze breedte aan naar wens */
  .flex-container {
    justify-content: center;
    /* Centreer kolommen als ze niet de hele breedte vullen */
    /* De laatste kolom (column-4) komt onder de eerste drie */ }
    .flex-container .column-1 {
      flex-basis: 100%;
      /* Eerste kolom neemt de hele breedte */
      min-width: 100%;
      max-width: auto;
      text-align: center;
      align-items: center;
      /* Centreer titel en knop horizontaal */ }
    .flex-container .column-2, .flex-container .column-3, .flex-container .column-4 {
      flex-basis: calc(33.333% - 20px);
      /* Drie kolommen naast elkaar, rekening houdend met gap */ }
    .flex-container .column-4 {
      flex-basis: 100%;
      /* Vierde kolom neemt de hele breedte */ } }
/* Media query voor alle kolommen onder elkaar */
@media (max-width: 768px) {
  /* Pas deze breedte aan naar wens */
  .flex-container {
    flex-direction: column;
    align-items: center;
    /* Centreer kolommen horizontaal */ }
    .flex-container .column-1, .flex-container .column-2, .flex-container .column-3, .flex-container .column-4 {
      flex-basis: 100%;
      /* Alle kolommen nemen de hele breedte */
      min-width: 100%;
      max-width: 400px;
      /* Optioneel: maximale breedte om het niet te breed te maken op grote mobiele schermen */ }
    .flex-container .column-1 {
      align-items: center;
      /* Zorg ervoor dat de titel en knop gecentreerd blijven */ }
    .flex-container .column p {
      -webkit-line-clamp: 5;
      /* Maximale 3 lijnen voor inhoud */ } }
.prodcat {
  margin-bottom: 20px !important;
  width: calc(50% - 70px);
  display: inline-block; }
  @media (max-width: 1280px) {
    .prodcat {
      width: calc(50% - 40px); } }
  @media (max-width: 1024px) {
    .prodcat {
      width: calc(50% - 25px); } }
  @media (max-width: 820px) {
    .prodcat {
      font-size: 24px !important;
      margin-bottom: 15px !important;
      width: 100%; } }
  .prodcat span {
    float: right;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    color: #242823 !important;
    text-align: right !important; }
    @media (max-width: 820px) {
      .prodcat span {
        font-size: 18px; } }

.container {
  display: block;
  width: 100%;
  column-count: 2;
  column-gap: 140px;
  margin-bottom: 50px; }
  @media (max-width: 1280px) {
    .container {
      column-gap: 80px; } }
  @media (max-width: 1024px) {
    .container {
      column-gap: 50px;
      margin-bottom: 40px; } }
  @media (max-width: 820px) {
    .container {
      column-count: 1;
      column-gap: 0;
      margin-bottom: 30px; } }

.products {
  display: flex;
  width: 100%;
  break-inside: avoid; }
  .products .product {
    flex: 0 0 75%; }
    .products .product p {
      text-align: left; }
  .products .price {
    /* flex-grow: 0 (niet groeien), flex-shrink: 0 (niet krimpen), flex-basis: 20% */
    flex: 0 0 25%; }
    .products .price p {
      text-align: right; }
  .products p {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #242823;
    line-height: 18px; }
    @media (max-width: 820px) {
      .products p {
        font-size: 18px; } }
    .products p span {
      font-size: 15px; }
    .products p:last-child {
      margin-bottom: 10px; }

.copyright {
  display: flex;
  /* Maakt de container een flexbox */
  width: 100%;
  /* Zorgt ervoor dat de container de volle breedte inneemt */ }
  .copyright .column {
    flex: 1;
    /* Beide kolommen nemen evenveel ruimte in (elk 50% als er twee zijn) */
    display: flex;
    /* Maakt de kolom zelf ook een flexbox */
    align-items: center;
    /* Centreert de inhoud van de kolom verticaal */
    box-sizing: border-box;
    /* Zorgt ervoor dat padding en border binnen de breedte vallen */ }
  .copyright .column.links {
    flex: 0 0 80%;
    justify-content: flex-start;
    /* Lijn de inhoud van deze kolom horizontaal links uit */
    text-align: left;
    /* Lijn de tekst binnen de inhoud links uit */ }
  .copyright .column.rechts {
    flex: 0 0 20%;
    justify-content: flex-end;
    /* Lijn de inhoud van deze kolom horizontaal rechts uit */
    text-align: right;
    /* Lijn de tekst binnen de inhoud rechts uit */ }
    .copyright .column.rechts a {
      font-size: 25px;
      margin: 0 6px; }
      .copyright .column.rechts a:last-child {
        margin-right: 0; }
      .copyright .column.rechts a i, .copyright .column.rechts a svg {
        vertical-align: baseline; }

.txt table {
  width: 100%;
  border: 1px solid #dedede;
  border-bottom: none; }
  .txt table tr td {
    border-bottom: 1px solid #dedede;
    border-right: 1px solid #dedede;
    padding: 0 5px; }
    .txt table tr td:last-child {
      border-right: none; }

@media only screen and (max-width: 600px) {
  .txt table {
    width: 100%; }
    .txt table tr td {
      padding: 2px; }
      .txt table tr td p, .txt table tr td p strong {
        font-size: 10px !important;
        line-height: 14px;
        letter-spacing: -0.5px; } }
@media only screen and (max-width: 375px) {
  .txt table {
    width: 100%; }
    .txt table tr td p, .txt table tr td p strong {
      font-size: 9px !important;
      line-height: 13px;
      letter-spacing: -0.5px; } }
.cnsnt-cntnr,
.cnsnt-prfrncs {
  position: fixed;
  z-index: 60000;
  top: auto;
  width: calc(100% - 110px);
  max-width: 320px;
  bottom: 15px;
  left: 15px;
  transform: initial;
  background-color: #fff;
  height: auto;
  max-height: calc(100vh - 110px);
  border-radius: 0.5rem;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  padding: 40px;
  overflow-y: scroll;
  display: block; }

.cnsnt-window {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  max-height: 100%;
  max-width: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 60000;
  display: none;
  overflow: none; }

.cnsnt-cntnr i, .cnsnt-cntnr svg,
.cnsnt-prfrncs i,
.cnsnt-prfrncs svg {
  font-size: 3em;
  margin-bottom: 1.75rem;
  color: #000; }
.cnsnt-cntnr .showinfo,
.cnsnt-prfrncs .showinfo {
  display: none;
  cursor: pointer; }
  .cnsnt-cntnr .showinfo i, .cnsnt-cntnr .showinfo svg,
  .cnsnt-prfrncs .showinfo i,
  .cnsnt-prfrncs .showinfo svg {
    font-size: .9em;
    line-height: 1.75em;
    margin-bottom: 0;
    color: #000; }
.cnsnt-cntnr .hideinfo,
.cnsnt-prfrncs .hideinfo {
  display: block; }
.cnsnt-cntnr p,
.cnsnt-prfrncs p {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: .8em;
  line-height: 1.55em;
  margin-bottom: 0 !important;
  color: #000; }
  .cnsnt-cntnr p a,
  .cnsnt-prfrncs p a {
    color: #000; }
    .cnsnt-cntnr p a:hover,
    .cnsnt-prfrncs p a:hover {
      color: #000;
      text-decoration: none; }
  .cnsnt-cntnr p strong,
  .cnsnt-prfrncs p strong {
    color: #000;
    font-size: 1em;
    line-height: 1em; }
.cnsnt-cntnr button,
.cnsnt-cntnr input[type=button],
.cnsnt-prfrncs button,
.cnsnt-prfrncs input[type=button] {
  border: none;
  width: 100%;
  padding: 1em;
  text-decoration: none;
  transition: all ease .5s;
  display: block;
  text-align: center;
  letter-spacing: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1em;
  color: #fff;
  margin-top: 1em;
  background-color: #000;
  border-radius: 0.5rem; }
  .cnsnt-cntnr button:first-child,
  .cnsnt-cntnr input[type=button]:first-child,
  .cnsnt-prfrncs button:first-child,
  .cnsnt-prfrncs input[type=button]:first-child {
    margin-top: 2em; }
  .cnsnt-cntnr button:hover,
  .cnsnt-cntnr input[type=button]:hover,
  .cnsnt-prfrncs button:hover,
  .cnsnt-prfrncs input[type=button]:hover {
    opacity: .8; }
.cnsnt-cntnr .c_witches,
.cnsnt-prfrncs .c_witches {
  display: table;
  width: 100%; }
  .cnsnt-cntnr .c_witches .switchesrow,
  .cnsnt-prfrncs .c_witches .switchesrow {
    display: table-row; }
    .cnsnt-cntnr .c_witches .switchesrow .swicthwidth,
    .cnsnt-prfrncs .c_witches .switchesrow .swicthwidth {
      width: 55px; }
    .cnsnt-cntnr .c_witches .switchesrow .switchescell,
    .cnsnt-prfrncs .c_witches .switchesrow .switchescell {
      display: table-cell;
      vertical-align: top;
      padding-top: 15px; }
      .cnsnt-cntnr .c_witches .switchesrow .switchescell .slider,
      .cnsnt-prfrncs .c_witches .switchesrow .switchescell .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e0e7ea;
        -webkit-transition: .4s;
        transition: .4s; }
        .cnsnt-cntnr .c_witches .switchesrow .switchescell .slider:before,
        .cnsnt-prfrncs .c_witches .switchesrow .switchescell .slider:before {
          position: absolute;
          content: "";
          height: 20px;
          width: 20px;
          left: 2px;
          bottom: 2px;
          background-color: white;
          -webkit-transition: .4s;
          transition: .4s; }
        .cnsnt-cntnr .c_witches .switchesrow .switchescell .slider.round,
        .cnsnt-prfrncs .c_witches .switchesrow .switchescell .slider.round {
          border-radius: 24px; }
          .cnsnt-cntnr .c_witches .switchesrow .switchescell .slider.round:before,
          .cnsnt-prfrncs .c_witches .switchesrow .switchescell .slider.round:before {
            border-radius: 50%; }
      .cnsnt-cntnr .c_witches .switchesrow .switchescell .switch,
      .cnsnt-prfrncs .c_witches .switchesrow .switchescell .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        z-index: 80; }
        .cnsnt-cntnr .c_witches .switchesrow .switchescell .switch input,
        .cnsnt-prfrncs .c_witches .switchesrow .switchescell .switch input {
          opacity: 0;
          width: 0;
          height: 0; }
          .cnsnt-cntnr .c_witches .switchesrow .switchescell .switch input:checked + .slider,
          .cnsnt-prfrncs .c_witches .switchesrow .switchescell .switch input:checked + .slider {
            background-color: black; }
            .cnsnt-cntnr .c_witches .switchesrow .switchescell .switch input:checked + .slider:before,
            .cnsnt-prfrncs .c_witches .switchesrow .switchescell .switch input:checked + .slider:before {
              -webkit-transform: translateX(20px);
              -ms-transform: translateX(20px);
              transform: translateX(20px); }
          .cnsnt-cntnr .c_witches .switchesrow .switchescell .switch input:focus + .slider,
          .cnsnt-prfrncs .c_witches .switchesrow .switchescell .switch input:focus + .slider {
            box-shadow: 0 0 1px black; }