/* CSS CUSTOM PROPERTIES (KLEUR VARIABELEN) */
:root {
    /* Brand kleuren */
    --color-primary: #159446;
    --color-gray: #444443;
    --color-light: #EEEEEE;
    --color-darker: #161616;
    --color-primary-transparent: rgba(21,148,70, .7);
    
    /* Basis kleuren */
    --color-white: #ffffff;
    --color-black: #000000;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* ==============================================
     SPACING & LAYOUT
     ============================================== */
  
  /* Margin */
  .m--0 { margin: 0; }
  .m--1 { margin: 0.25rem; }
  .m--2 { margin: 0.5rem; }
  .m--3 { margin: 0.75rem; }
  .m--4 { margin: 1rem; }
  .m--5 { margin: 1.25rem; }
  .m--6 { margin: 1.5rem; }
  .m--8 { margin: 2rem; }
  .m--10 { margin: 2.5rem; }
  .m--12 { margin: 3rem; }
  .m--16 { margin: 4rem; }
  .m--auto { margin: auto; }
  
  /* Margin specifiek */
  .mt--0 { margin-top: 0; }
  .mt--1 { margin-top: 0.25rem; }
  .mt--2 { margin-top: 0.5rem; }
  .mt--3 { margin-top: 0.75rem; }
  .mt--4 { margin-top: 1rem; }
  .mt--6 { margin-top: 1.5rem; }
  .mt--8 { margin-top: 2rem; }
  .mt--12 { margin-top: 3rem; }
  
  .mb--0 { margin-bottom: 0; }
  .mb--1 { margin-bottom: 0.25rem; }
  .mb--2 { margin-bottom: 0.5rem; }
  .mb--3 { margin-bottom: 0.75rem; }
  .mb--4 { margin-bottom: 1rem; }
  .mb--6 { margin-bottom: 1.5rem; }
  .mb--8 { margin-bottom: 2rem; }
  .mb--12 { margin-bottom: 3rem; }
  
  .ml--0 { margin-left: 0; }
  .ml--1 { margin-left: 0.25rem; }
  .ml--2 { margin-left: 0.5rem; }
  .ml--3 { margin-left: 0.75rem; }
  .ml--4 { margin-left: 1rem; }
  .ml--6 { margin-left: 1.5rem; }
  .ml--8 { margin-left: 2rem; }
  .ml--auto { margin-left: auto; }
  
  .mr--0 { margin-right: 0; }
  .mr--1 { margin-right: 0.25rem; }
  .mr--2 { margin-right: 0.5rem; }
  .mr--3 { margin-right: 0.75rem; }
  .mr--4 { margin-right: 1rem; }
  .mr--6 { margin-right: 1.5rem; }
  .mr--8 { margin-right: 2rem; }
  .mr--auto { margin-right: auto; }
  
  .mx--0 { margin-left: 0; margin-right: 0; }
  .mx--1 { margin-left: 0.25rem; margin-right: 0.25rem; }
  .mx--2 { margin-left: 0.5rem; margin-right: 0.5rem; }
  .mx--3 { margin-left: 0.75rem; margin-right: 0.75rem; }
  .mx--4 { margin-left: 1rem; margin-right: 1rem; }
  .mx--6 { margin-left: 1.5rem; margin-right: 1.5rem; }
  .mx--8 { margin-left: 2rem; margin-right: 2rem; }
  .mx--auto { margin-left: auto; margin-right: auto; }
  
  .my--0 { margin-top: 0; margin-bottom: 0; }
  .my--1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
  .my--2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
  .my--3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
  .my--4 { margin-top: 1rem; margin-bottom: 1rem; }
  .my--6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
  .my--8 { margin-top: 2rem; margin-bottom: 2rem; }
  
  /* Padding */
  .p--0 { padding: 0; }
  .p--1 { padding: 0.25rem; }
  .p--2 { padding: 0.5rem; }
  .p--3 { padding: 0.75rem; }
  .p--4 { padding: 1rem; }
  .p--5 { padding: 1.25rem; }
  .p--6 { padding: 1.5rem; }
  .p--8 { padding: 2rem; }
  .p--10 { padding: 2.5rem; }
  .p--12 { padding: 3rem; }
  .p--16 { padding: 4rem; }
  
  .pt--0 { padding-top: 0; }
  .pt--1 { padding-top: 0.25rem; }
  .pt--2 { padding-top: 0.5rem; }
  .pt--3 { padding-top: 0.75rem; }
  .pt--4 { padding-top: 1rem; }
  .pt--6 { padding-top: 1.5rem; }
  .pt--8 { padding-top: 2rem; }
  .pt--16{ padding-top: 4rem; }
  .pt--24{padding-top:6rem;}
  .pt--32{ padding-top: 8rem; }
  
  .pb--0 { padding-bottom: 0; }
  .pb--1 { padding-bottom: 0.25rem; }
  .pb--2 { padding-bottom: 0.5rem; }
  .pb--3 { padding-bottom: 0.75rem; }
  .pb--4 { padding-bottom: 1rem; }
  .pb--6 { padding-bottom: 1.5rem; }
  .pb--8 { padding-bottom: 2rem; }
  .pb--16{ padding-bottom:4rem;}
  .pb--32{ padding-bottom:8rem;}
  
  .pl--0 { padding-left: 0; }
  .pl--1 { padding-left: 0.25rem; }
  .pl--2 { padding-left: 0.5rem; }
  .pl--3 { padding-left: 0.75rem; }
  .pl--4 { padding-left: 1rem; }
  .pl--6 { padding-left: 1.5rem; }
  .pl--8 { padding-left: 2rem; }

  .pl--2-5{padding-left:2.5%}
  
  .pr--0 { padding-right: 0; }
  .pr--1 { padding-right: 0.25rem; }
  .pr--2 { padding-right: 0.5rem; }
  .pr--3 { padding-right: 0.75rem; }
  .pr--4 { padding-right: 1rem; }
  .pr--6 { padding-right: 1.5rem; }
  .pr--8 { padding-right: 2rem; }
  
  .px--0 { padding-left: 0; padding-right: 0; }
  .px--1 { padding-left: 0.25rem; padding-right: 0.25rem; }
  .px--2 { padding-left: 0.5rem; padding-right: 0.5rem; }
  .px--3 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .px--4 { padding-left: 1rem; padding-right: 1rem; }
  .px--6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .px--8 { padding-left: 2rem; padding-right: 2rem; }

  .px--5{padding-left:5%; padding-right:5%;}
  .pr--5{padding-right:5%;}
  
  .py--0 { padding-top: 0; padding-bottom: 0; }
  .py--1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .py--2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .py--3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .py--4 { padding-top: 1rem; padding-bottom: 1rem; }
  .py--6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .py--8 { padding-top: 2rem; padding-bottom: 2rem; }
  .py--12{ padding-top:3rem; padding-bottom:3rem;}
  .py--16{ padding-top:4rem; padding-bottom:4rem;}
  .py--24{ padding-top:6rem; padding-bottom:6rem;}
  .py--32{ padding-top:8rem; padding-bottom:8rem;}
  
  /* ==============================================
     DISPLAY & FLEXBOX
     ============================================== */
  
  /* Display */
  .block { display: block; }
  .inline--block { display: inline-block; }
  .inline { display: inline; }
  .flex { display: flex; }
  .inline--flex { display: inline-flex; }
  .grid { display: grid; }
  .hidden { display: none; }
  
  /* Flexbox */
  .flex--row { flex-direction: row; }
  .flex--col { flex-direction: column; }
  .flex--wrap { flex-wrap: wrap; }
  .flex--nowrap { flex-wrap: nowrap; }
  
  .items--start { align-items: flex-start; }
  .items--end { align-items: flex-end; }
  .items--center { align-items: center; }
  .items--stretch { align-items: stretch; }
  
  .justify--start { justify-content: flex-start; }
  .justify--end { justify-content: flex-end; }
  .justify--center { justify-content: center; }
  .justify--between { justify-content: space-between; }
  .justify--around { justify-content: space-around; }
  
  .flex--1 { flex: 1 1 0%; }
  .flex--auto { flex: 1 1 auto; }
  .flex--none { flex: none; }
  
  /* Grid */
  .grid--cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid--cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid--cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  
  .gap--1 { gap: 0.25rem; }
  .gap--2 { gap: 0.5rem; }
  .gap--3 { gap: 0.75rem; }
  .gap--4 { gap: 1rem; }
  .gap--6 { gap: 1.5rem; }
  .gap--8 { gap: 2rem; }
  .gap--16{ gap:4rem;}
  
  .col--span--2 { grid-column: span 2 / span 2; }
  .col--span--3 { grid-column: span 3 / span 3; }
  .col--span--4 { grid-column: span 4 / span 4; }
  .col--span--6 { grid-column: span 6 / span 6; }
  
  /* ==============================================
     TYPOGRAPHY
     ============================================== */
  
  /* Font sizes */
  .text--xs { font-size: 0.75rem; line-height: 1rem; }
  .text--sm { font-size: 0.875rem; line-height: 1.25rem; }
  .text--base { font-size: 1rem; line-height: 1.5rem; }
  .text--lg { font-size: 1.125rem; line-height: 1.75rem; }
  .text--xl { font-size: 1.25rem; line-height: 1.75rem; }
  .text--2xl { font-size: 1.5rem; line-height: 2rem; }
  .text--3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .text--4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .text--5xl { font-size: 3rem; line-height: 1; }
  
  /* Font weight */
  .font--thin { font-weight: 100; }
  .font--light { font-weight: 300; }
  .font--normal { font-weight: 400; }
  .font--medium { font-weight: 500; }
  .font--semibold { font-weight: 600; }
  .font--bold { font-weight: 700; }
  .font--extrabold { font-weight: 800; }
  .font--black { font-weight: 900; }
  
  /* Text alignment */
  .text--left { text-align: left; }
  .text--center { text-align: center; }
  .text--right { text-align: right; }

  /* Text transform */
  .uppercase { text-transform: uppercase; }
  .lowercase { text-transform: lowercase; }
  .capitalize { text-transform: capitalize; }
  .normal--case { text-transform: none; }
  
  /* Line height */
  .leading--tight { line-height: 1.25; }
  .leading--normal { line-height: 1.5; }
  .leading--relaxed { line-height: 1.625; }
  .leading--loose { line-height: 2; }
  
  /* ==============================================
     KLEUREN (MET VARIABELEN)
     ============================================== */
  
  /* Text kleuren */
  .text--primary { color: var(--color-primary); }
  .text--gray { color: var(--color-gray); }
  .text--light { color: var(--color-light); }
  .text--darker { color: var(--color-darker); }
  .text--white { color: var(--color-white); }
  .text--black { color: var(--color-black); }
  
  /* Background kleuren */
  .bg--primary { background-color: var(--color-primary); }
  .bg--gray { background-color: var(--color-gray); }
  .bg--light { background-color: var(--color-light); }
  .bg--darker { background-color: var(--color-darker); }
  .bg--white { background-color: var(--color-white); }
  .bg--black { background-color: var(--color-black); }
  .bg--transparent{ background-color:transparent;}
  
  /* Border kleuren */
  .border--primary { border-color: var(--color-primary); }
  .border--gray { border-color: var(--color-gray); }
  .border--light { border-color: var(--color-light); }
  .border--darker { border-color: var(--color-darker); }
  .border--white { border-color: var(--color-white); }
  .border--black { border-color: var(--color-black); }
  
  /* ==============================================
     BORDERS & ROUNDED
     ============================================== */
  
  /* Border width */
  .border { border-width: 1px; }
  .border--0 { border-width: 0; }
  .border--2 { border-width: 2px; }
  .border--4 { border-width: 4px; }
  
  .border--t { border-top-width: 1px; }
  .border--r { border-right-width: 1px; }
  .border--b { border-bottom-width: 1px; }
  .border--l { border-left-width: 1px; }

  .border--t--solid{border-top-style: solid;}
  
  /* Border radius */
  .rounded--none { border-radius: 0; }
  .rounded--sm { border-radius: 0.125rem; }
  .rounded { border-radius: 0.25rem; }
  .rounded--md { border-radius: 0.375rem; }
  .rounded--lg { border-radius: 0.5rem; }
  .rounded--xl { border-radius: 0.75rem; }
  .rounded--2xl { border-radius: 1rem; }
  .rounded--full { border-radius: 9999px; }
  
  /* ==============================================
     WIDTH & HEIGHT
     ============================================== */
  
  /* Width */
  .w--auto { width: auto; }
  .w--full { width: 100%; }
  .w--screen { width: 100vw; }
  .w--1\/2 { width: 50%; }
  .w--1\/3 { width: 33.333333%; }
  .w--2\/3 { width: 66.666667%; }
  .w--1\/4 { width: 25%; }
  .w--3\/4 { width: 75%; }
  .w--1\/5 { width: 20%; }
  .w--4\/5 { width: 80%; }
  .w--1\/6 { width: 16.66666%; }
  
  .w--4 { width: 1rem; }
  .w--6 { width: 1.5rem; }
  .w--8 { width: 2rem; }
  .w--10 { width: 2.5rem; }
  .w--12 { width: 3rem; }
  .w--16 { width: 4rem; }
  .w--20 { width: 5rem; }
  .w--24 { width: 6rem; }
  .w--32 { width: 8rem; }
  .w--40 { width: 10rem; }
  .w--48 { width: 12rem; }
  .w--56 { width: 14rem; }
  .w--64 { width: 16rem; }
  
  /* Height */
  .h--auto { height: auto; }
  .h--full { height: 100%; }
  .h--screen { height: 100vh; }
  .h--50vh{height:50vh;}
  .h--60vh{height:60vh;}
  .h--70vh{height:70vh;}
.h--80vh{height:80vh;}
  
  .h--4 { height: 1rem; }
  .h--6 { height: 1.5rem; }
  .h--8 { height: 2rem; }
  .h--10 { height: 2.5rem; }
  .h--12 { height: 3rem; }
  .h--16 { height: 4rem; }
  .h--20 { height: 5rem; }
  .h--24 { height: 6rem; }
  .h--32 { height: 8rem; }
  .h--40 { height: 10rem; }
  .h--48 { height: 12rem; }
  .h--56 { height: 14rem; }
  .h--64 { height: 16rem; }
  .h--80{ height:20rem;}
  .h--104{ height:26rem;}
  .h--128{ height:32rem;}

  /* Min Height */
  .min--h--56{min-height:14rem;}
  
  /* Max width */
  .max--w--xs { max-width: 20rem; }
  .max--w--sm { max-width: 24rem; }
  .max--w--md { max-width: 28rem; }
  .max--w--lg { max-width: 32rem; }
  .max--w--xl { max-width: 36rem; }
  .max--w--2xl { max-width: 42rem; }
  .max--w--4xl { max-width: 56rem; }
  .max--w--6xl { max-width: 72rem; }
  .max--w--full { max-width: 100%; }
  
  /* ==============================================
     SHADOW & OPACITY
     ============================================== */
  
  /* Box shadow */
  .shadow--sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
  .shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
  .shadow--md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
  .shadow--lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
  .shadow--xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
  .shadow--none { box-shadow: 0 0 #0000; }
  
  /* Opacity */
  .opacity--0 { opacity: 0; }
  .opacity--25 { opacity: 0.25; }
  .opacity--50 { opacity: 0.5; }
  .opacity--75 { opacity: 0.75; }
  .opacity--100 { opacity: 1; }
  
  /* ==============================================
     POSITIONING
     ============================================== */
  
  .static { position: static; }
  .fixed { position: fixed; }
  .absolute { position: absolute; }
  .relative { position: relative; }
  .sticky { position: sticky; }
  
  .top--0 { top: 0; }
  .top--1 { top: 0.25rem; }
  .top--2 { top: 0.5rem; }
  .top--4 { top: 1rem; }
  .right--0 { right: 0; }
  .right--1 { right: 0.25rem; }
  .right--2 { right: 0.5rem; }
  .right--4 { right: 1rem; }
  .bottom--0 { bottom: 0; }
  .bottom--1 { bottom: 0.25rem; }
  .bottom--2 { bottom: 0.5rem; }
  .bottom--4 { bottom: 1rem; }
  .bottom--8 { bottom: 2rem; }
  .left--0 { left: 0; }
  .left--1 { left: 0.25rem; }
  .left--2 { left: 0.5rem; }
  .left--4 { left: 1rem; }
  .left--8 { left:2rem; }
  
  .z--0 { z-index: 0; }
  .z--10 { z-index: 10; }
  .z--20 { z-index: 20; }
  .z--30 { z-index: 30; }
  .z--40 { z-index: 40; }
  .z--50 { z-index: 50; }
  
  /* ==============================================
     CURSOR & OVERFLOW
     ============================================== */
  
  .cursor--auto { cursor: auto; }
  .cursor--default { cursor: default; }
  .cursor--pointer { cursor: pointer; }
  .cursor--not--allowed { cursor: not-allowed; }
  
  .overflow--auto { overflow: auto; }
  .overflow--hidden { overflow: hidden; }
  .overflow--visible { overflow: visible; }
  .overflow--scroll { overflow: scroll; }
  
  .overflow--x--auto { overflow-x: auto; }
  .overflow--x--hidden { overflow-x: hidden; }
  .overflow--y--auto { overflow-y: auto; }
  .overflow--y--hidden { overflow-y: hidden; }

  /* ==============================================
     OBJECT POSITION
     ============================================== */

   /* Object fit */
   .object--contain { object-fit: contain; }
   .object--cover { object-fit: cover; }
   .object--fill { object-fit: fill; }
   .object--none { object-fit: none; }
   .object--scale--down { object-fit: scale-down; }

   /* Object position */
   .object--bottom { object-position: bottom; }
   .object--center { object-position: center; }
   .object--left { object-position: left; }
   .object--left--bottom { object-position: left bottom; }
   .object--left--top { object-position: left top; }
   .object--right { object-position: right; }
   .object--right--bottom { object-position: right bottom; }
   .object--right--top { object-position: right top; }
   .object--top { object-position: top; }



   /* ==============================================
     MOBILE CSS
     ============================================== */

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

      /* Display */
      .m--block { display: block; }
      .m--inline--block { display: inline-block; }
      .m--inline { display: inline; }
      .m--flex { display: flex; }
      .m--inline--flex { display: inline-flex; }
      .m--grid { display: grid; }
      .m--hidden { display: none; }
      
      /* Flexbox */
      .m--flex--row { flex-direction: row; }
      .m--flex--col { flex-direction: column; }
      .m--flex--col--reverse{flex-direction:column-reverse;}
      .m--flex--wrap { flex-wrap: wrap; }
      .m--flex--nowrap { flex-wrap: nowrap; }

      .m--justify--center{justify-content:center;}

      /* Width */
      .m--w--auto { width: auto; }
      .m--w--full { width: 100%; }
      .m--w--screen { width: 100vw; }
      .m--w--1\/2 { width: 50%; }
      .m--w--45 { width: 45%; }
      .m--w--1\/3 { width: 33.333333%; }
      .m--w--2\/3 { width: 66.666667%; }
      .m--w--1\/4 { width: 25%; }
      .m--w--3\/4 { width: 75%; }
      .m--w--1\/5 { width: 20%; }
      .m--w--4\/5 { width: 80%; }
      .m--w--1\/6 { width: 16.66666%; }

       /* Height */
      .m--h--auto { height: auto; }
      .m--h--full { height: 100%; }
      .m--h--screen { height: 100vh; }
      .m--h--64{height:32rem;}
      .m--h--128{height:64rem;}

      /* gaps */
      .m--gap--1 { gap: 0.25rem; }
      .m--gap--2 { gap: 0.5rem; }
      .m--gap--3 { gap: 0.75rem; }
      .m--gap--4 { gap: 1rem; }
      .m--gap--6 { gap: 1.5rem; }
      .m--gap--8 { gap: 2rem; }

      /* Padding */
      .m--p--0 { padding: 0; }
      .m--p--1 { padding: 0.25rem; }
      .m--p--2 { padding: 0.5rem; }
      .m--p--3 { padding: 0.75rem; }
      .m--p--4 { padding: 1rem; }
      .m--p--5 { padding: 1.25rem; }
      .m--p--6 { padding: 1.5rem; }
      .m--p--8 { padding: 2rem; }
      .m--p--10 { padding: 2.5rem; }
      .m--p--12 { padding: 3rem; }
      .m--p--16 { padding: 4rem; }

      .m--py--8{padding-top:2rem;padding-bottom:2rem;}
      .m--py--16{padding-top:4rem;padding-bottom:4rem;}

      .m--pt--8{padding-top:2rem;}
      .m--pt--16{padding-top:4rem;}

      .m--px--5{padding-left:5%;padding-right:5%;}


      /* Background kleuren */
      .m--bg--primary { background-color: var(--color-primary); }
      .m--bg--gray { background-color: var(--color-gray); }
      .m--bg--light { background-color: var(--color-light); }
      .m--bg--darker { background-color: var(--color-darker); }
      .m--bg--white { background-color: var(--color-white); }
      .m--bg--black { background-color: var(--color-black); }
      .m--bg--transparent{ background-color:transparent;}

      .m--text--xs{font-size: 0.75rem; line-height: 1rem; }
      .m--text--l{font-size:1.75rem;}
      .text--xl {font-size: 1rem;line-height: 1.25rem;}
      .text--2xl{font-size:1.25rem;line-height:1.50rem;}
     }