/* Colors
Logo yellow - #F6EA49
Darker grey  - #4A494B
Dark grey - #4A4A4A
Black  - #070808 
Grey white - #F5F5F5
Beige - #fbf8f0
*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/*--------------- Temprary style for structural html ----------------*/

/* * {
    border: 2px solid rgb(225, 225, 225);
}

html {border: none;} */


/* ---------------  Override default gridlex margin and padding  ----------------*/
[class*=grid-], [class*=grid_], [class~=grid] { margin: 0; }
[class*=grid-][class*=col-],
[class*=grid-][class*=col_],
[class*=grid-][class~=col],
[class*=grid_][class*=col-],
[class*=grid_][class*=col_],
[class*=grid_][class~=col],
[class~=grid][class*=col-],
[class~=grid][class*=col_],
[class~=grid][class~=col] {
  margin: 0;
  padding: 2; /* als je echt 0 wilt */
  
}

/*--------------------------- Image Styles --------------------------*/

.bg-image {
    background-color: #f0f0f5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.bg-plananalyse-1 {
  background-image: url('/imaginate-ossm-228.jpg');
}

.bg-plananalyse-2 {
  background-image: url('/images/imaginate-ossm-38.jpg');
}



.bg-image-project {
    background-color: #f0f0f5;;
    background-size: cover;
    background-position: center;
    border-radius: 18rem 18rem 0rem 0rem;
}

.bg-image-border
{
    background-size: cover;
    background-position: center;
    border-radius: 15px;
}

.bg-image-card {
    padding: 0.5rem;
    padding-bottom: 50%;
}

.bg-index {
    background-image: url('images/imaginate-ossm-160.jpg');
    background-position: 35% 50%;
    background-size: cover;
}

.bg-about-us {
    background-image: url('images/imaginate-ossm-34.jpg');
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 20rem 20rem 0rem 0rem;
    /* opacity: 0.8; */
}

.bg-mission-1 {
    background-image: url('images/imaginate-ossm-28.jpg');
    background-position: 50% 50%;
    background-size: cover;
    /* border-radius: 20rem 20rem 0rem 0rem; */
    /* opacity: 0.8; */
}

.bg-mission-2 {
    background-image: url('images/imaginate-ossm-38.jpg');
    background-position: 50% 50%;
    background-size: cover;
    /* border-radius: 20rem 20rem 0rem 0rem; */
    /* opacity: 0.8; */
}

.bg-work-with-us {
    background-image: url('images/imaginate-ossm-72.jpg');
    background-position: 50% 50%;
    background-size: cover;
    /* border-radius: 20rem 20rem 0rem 0rem; */
    /* opacity: 0.8; */
}

.bg-waasland {
    background-image: url('images/ossm-waasland.png');
    background-position: 50% 50%;
    background-size: cover;
    border: 1px solid #e1e0e0;
    /* opacity: 0.8; */
}

.bg-aanbod {
    background-image: url('images/imaginate-ossm-22.jpg');
    background-position: 50% 16%;
    background-size: cover;
    border-radius: 20rem 20rem 0rem 0rem;
}

.bg-adviseert {
    background-image: url('images/bynouchka-160224-lindsay.jpeg');
    background-position: 50% 50%;
    border-radius: 20rem 20rem 0rem 0rem;
    background-size: cover;
    /* opacity: 0.8; */
}

.bg-plananalyse {
    background-image: url('/images/imaginate-ossm-228.jpg');
    background-position: 50% 34%;
    background-size: cover;
}

.bg-brainstormsessie {
    background-image: url('images/imaginate-ossm-brainstormsessie.jpeg');
    background-position: 50% 34%;
    background-size: cover;
}

.bg-adviessessie {
    background-image: url('images/bynouchka-160224-lindsay-23.jpg');
    background-position: 50% 34%;
    background-size: cover;
}

.bg-ontwerpt-aanbod {
    background-image: url('images/imaginate-ossm-175.jpg');
    background-position: 50% 34%;
    background-size: cover;
    /* opacity: 0.8; */
    border-radius: 20rem 20rem 0rem 0rem;
}

.bg-rebranding {
    background-image: url('/images/bynouchka-160224-lindsay-4.jpg');
    background-position: 50% 50%;
    background-size: cover;
    transform: rotate(180deg);
    /* opacity: 0.8; */
}

.bg-interieurproject {
    background-image: url('/images/imaginate-ossm-52.jpg');
    background-position: 50% 50%;
    background-size: cover;
    /* opacity: 0.8; */
}

.bg-totaalconcept {
    background-image: url('/images/ossm-totaalconcept.png');
    background-position: 50% 50%;
    background-size: cover;
    /* opacity: 0.8; */
}

.bg-contact {
    background-image: url('images/imaginate-ossm-1.jpg');
    background-position: 50% 30%;
    background-size: cover;
    border-radius: 20rem 20rem 0rem 0rem;
        /* opacity: 0.8; */
}

.bg-faq {
    background-image: url('images/ossm-faq.jpg');
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 20rem 20rem 0rem 0rem;
    /* opacity: 0.8; */
}

.bg-terms {
    background-image: url('images/ossm-terms.jpg');
    background-position: 50% 50%;
    background-size: cover;
    /* opacity: 0.8; */
}

/*--------------------------- Project Styles --------------------------*/
.position-img-1 {
  background-color: #f0f0f5;
  position: relative;
  right: -6rem;
}

.position-img-2 {
  background-color: #f0f0f5;
  position: relative;
  top: -7rem;
}


/* .project-container:hover .project-box {
	filter: grayscale(100%) opacity(24%);
} */

/* .container .box:hover {
	filter: grayscale(0%) opacity(100%);
} */

.project-slider:hover .project-box:not(:hover) {
  filter: grayscale(100%) opacity(24%);
  transition: 1s ease all;
}


.project-index-slider:hover .project-box:not(:hover) {
  filter: grayscale(100%) opacity(24%);
  transition: 1s ease all;
}

.gallery [class*="col-"] {
  margin: 0;
}

.gallery-project [class*="col-"] {
  margin: 0;
  padding: 0.5rem;
}

/* Alle projecten binnen de gallery */
.gallery .col .bg-image {
  transition: filter 0.3s ease;
}

/* Wanneer je over de gallery gaat → alle bg-images dimmen */
.gallery:hover .col .bg-image {
  filter: grayscale(100%) opacity(0.3);
}

/* Behalve degene waar je écht over staat */
.gallery .col:hover .bg-image {
  filter: none; /* terug naar normaal */
}

/* Alle projecten binnen de gallery */
.gallery .col-2 .bg-image {
  transition: filter 0.3s ease;
}

/* Wanneer je over de gallery gaat → alle bg-images dimmen */
.gallery:hover .col-2 .bg-image {
  filter: grayscale(100%) opacity(0.3);
}

/* Behalve degene waar je écht over staat */
.gallery .col-2:hover .bg-image {
  filter: none; /* terug naar normaal */
}

.gallery-project-page [class*="col-"] {
  padding: 0.5%;
}

/*--------------------------- Project Specific Gallery Styles --------------------------*/

.lightgallery-img {
    cursor: pointer;
}

/* .container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 1em;
	width: 800px;
	height: 500px;
	transition: all 400ms;
}

.container:hover .box {
	filter: grayscale(100%) opacity(24%);
}

.box {
	position: relative;
	background: var(--img) center center;
	background-size: cover;
	transition: all 400ms;
	display: flex;
	justify-content: center;
	align-items: center;
    cursor: pointer;
}


.container .box:hover {
	filter: grayscale(0%) opacity(100%);
}

.container:has(.box-1:hover) {
	grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
}

.container:has(.box-2:hover) {
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
}

.container:has(.box-3:hover) {
	grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
}

.container:has(.box-4:hover) {
	grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
}

.container:has(.box-5:hover) {
	grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
}

.box:nth-child(odd) {
	transform: translateY(-16px);
}

.box:nth-child(even) {
	transform: translateY(16px);
}

.box::after {
	content: attr(data-text);
	position: absolute;
	bottom: 20px;
	background: #F6EA49;
	color: #4A494B;
	padding: 10px 10px 10px 14px;
	letter-spacing: 4px;
	text-transform: uppercase;
	transform: translateY(60px);
	opacity: 0;
	transition: all 400ms;
}

.box:hover::after {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 100ms;
} */

.overlapping-img {
  background-color: #6B705C;
  font-size: 1.5rem;
  /*this is normally not used because other elements don't know this element moves */
  position: relative;
  bottom: 11rem;
  left: -8rem;
}

/*----------------------------- Images ------------------------------*/

/* Header Banner */

.bg-image-header {
    background-image: url('/images/ossm-banner-schets-opacity-40.png');
    background-position: 50% 50%;
    background-size: cover;
}

.bg-image-lindsay-26 {
    background-image: url('/images/bynouchka-160224-lindsay-26.jpg');
    background-position: 50% 70%;
}


.bg-image-lindsay-17 {
    background-image: url('/images/bynouchka-160224-lindsay-17.jpg');
    background-position: 50% 50%;
}

.bg-portfolio {
    background-image: url('/images/bynouchka-160224-lindsay-4.jpg');
    background-position: 50% 50%;
    border-radius: 20rem 20rem 0rem 0rem;
}


.bg-image-ossm-9 {
    background-image: url('/images/imaginate-ossm-9.jpeg');
    background-position: 50% 50%;
}


.bg-logo-mark {
    background-image: url('/images/ossm-logo-mark.png');
    background-position: 50% 50%; 
    background-color: transparent;
}

.bg-concreet {
    background-image: url('/images/ossm-concreet.png');
    background-position: 50% 50%;
}

.relative {position:relative;}

/* Contact */

.bg-image-studio {
    background-image: url('/images/');
}


/* Contact Gallery */

.gallery .gallery-item {
    border-bottom: none;
}

/* Background of gallery when active  */
.lg-backdrop {
    background-color: rgb(20,20,20);
}

.lg-backdrop.in {
    opacity: 0.95;
}

/* Footer */

.bg-image-footer {
    background-image: url('/images/essentie-footer.png');
    background-position: 50% 60%;
}


/* Aspect Ratio  */

a.bg-image { display: block;}

.portrait-tall      { padding-bottom: 175%; }
.portrait-medium    { padding-bottom: 150%; }
.portrait           { padding-bottom: 125%; }
.portrait-small     { padding-bottom: 110%; }
.square             { padding-bottom: 100%; }
.landscape          { padding-bottom: 66%;  }
.landscape-small    { padding-bottom: 45%;  }
.landscape-wide     { padding-bottom: 56%;  }

.portrait-project {
    aspect-ratio: 4/6;
    max-height: 600px;
    object-fit: cover;
}

/*------------------------- Universal Styles -------------------------*/

body {
    border: none;
    font-family:'Work Sans', sans-serif;
    color: #4A4A4A;
    padding-top: 5%
    /* background-color: #FCFCFC; */
}

/* Padding & Margin */

.padded-sm  { padding: 2.5%; }
.padded-md  { padding: 5%;   }
.padded-lg  { padding: 10%;  }
.padded-xl  { padding: 15%;  }
.padded-xxl { padding: 20%;  }

.padded-0  { padding: 0;      }
.padded-05 { padding: 0.5rem; }
.padded-1  { padding: 1rem;   }
.padded-2  { padding: 2rem;   }
.padded-3  { padding: 3rem;   }
.padded-4  { padding: 4rem;   }
.padded-5  { padding: 5rem;   }
.padded-6  { padding: 6rem;   }
.padded-7  { padding: 7rem;   }
.padded-8  { padding: 8rem;   }
.padded-9  { padding: 9rem;   }
.padded-10 { padding: 10rem;  }
.padded-11 { padding: 11rem;  }
.padded-12 { padding: 12rem;  } 
.padded-13 { padding: 13rem;  }
.padded-14 { padding: 14rem;  }
.padded-15 { padding: 15rem;  }
.padded-16 { padding: 16rem;  }
.padded-17 { padding: 17rem;  }
.padded-18 { padding: 18rem;  }
.padded-19 { padding: 19rem;  }
.padded-20 { padding: 20rem;  }
.padded-21 { padding: 21rem;  }
.padded-22 { padding: 22rem;  }
.padded-23 { padding: 23rem;  }
.padded-24 { padding: 24rem;  }
.padded-25 { padding: 25rem;  }


.padded-t { padding-top: 5%;    }
.padded-b { padding-bottom: 5%; }
.padded-l { padding-left: 5%;   }
.padded-r { padding-right: 5%;  }

.padded-tb-1 { padding-top: 1rem; padding-bottom: 1rem; }
.padded-lr-1 { padding-left: 1rem; padding-right: 1rem; }

.padded-tb-2 { padding-top: 2rem; padding-bottom: 2rem; }
.padded-lr-2 { padding-left: 2rem; padding-right: 2rem; }   

.padded-tb-3 { padding-top: 3rem; padding-bottom: 3rem; }
.padded-lr-3 { padding-left: 3rem; padding-right: 3rem; }

.padded-tb-4 { padding-top: 4rem; padding-bottom: 4rem; }
.padded-lr-4 { padding-left: 4rem; padding-right: 4rem; }

.padded-tb-5 { padding-top: 5rem; padding-bottom: 5rem; }
.padded-lr-5 { padding-left: 5rem; padding-right: 5rem; }

.padded-tb { padding-top: 5rem; padding-bottom: 5rem; }
.padded-lr { padding-left: 5rem; padding-right: 5rem; }

.padded-tb-6 { padding-top: 6rem; padding-bottom: 6rem; }
.padded-lr-6 { padding-left: 6rem; padding-right: 6rem; }

.padded-tb-7 { padding-top: 7rem; padding-bottom: 7rem; }
.padded-lr-7 { padding-left: 7rem; padding-right: 7rem; }

.padded-tb-8 { padding-top: 8rem; padding-bottom: 8rem; }
.padded-lr-8 { padding-left: 8rem; padding-right: 8rem; }


.padded-t-05 { padding-top: 0.5rem;    }
.padded-b-05 { padding-bottom: 0.5rem; }
.padded-l-05 { padding-left: 0.5rem;   }
.padded-r-05 { padding-right: 0.5rem;  }

.padded-t-1 { padding-top: 1rem;    }
.padded-b-1 { padding-bottom: 1rem; }
.padded-l-1 { padding-left: 1rem;   }
.padded-r-1 { padding-right: 1rem;  }

.padded-t-2 { padding-top: 2rem;    }
.padded-b-2 { padding-bottom: 2rem; }
.padded-l-2 { padding-left: 2rem;   }
.padded-r-2 { padding-right: 2rem;  }

.padded-t-3 { padding-top: 3rem;    }  
.padded-b-3 { padding-bottom: 3rem; }
.padded-l-3 { padding-left: 3rem;   }
.padded-r-3 { padding-right: 3rem;  }

.padded-t-4 { padding-top: 4rem;    }
.padded-b-4 { padding-bottom: 4rem; }
.padded-l-4 { padding-left: 4rem;   }
.padded-r-4 { padding-right: 4rem;  }

.padded-r-4-05 { padding-bottom: 4.5rem; }

.padded-t-5 { padding-top: 5rem;    }
.padded-b-5 { padding-bottom: 5rem; }
.padded-l-5 { padding-left: 5rem;   }
.padded-r-5 { padding-right: 5rem;  }

.padded-t-6 { padding-top: 6rem;    }
.padded-b-6 { padding-bottom: 6rem; }
.padded-l-6 { padding-left: 6rem;   }
.padded-r-6 { padding-right: 6rem;  }

.padded-t-7 { padding-top: 7rem;    }
.padded-b-7 { padding-bottom: 7rem; }
.padded-l-7 { padding-left: 7rem;   }
.padded-r-7 { padding-right: 7rem;  }

.padded-t-8 { padding-top: 8rem;    }
.padded-b-8 { padding-bottom: 8rem; }
.padded-l-8 { padding-left: 8rem;   }
.padded-r-8 { padding-right: 8rem;  }

.padded-t-9 { padding-top: 9rem;    }
.padded-b-9 { padding-bottom: 9rem; }
.padded-l-9 { padding-left: 9rem;   }
.padded-r-9 { padding-right: 9rem;  }

.padded-t-10 { padding-top: 10rem;    }
.padded-b-10 { padding-bottom: 10rem; }
.padded-l-10 { padding-left: 10rem;   }
.padded-r-10 { padding-right: 10rem;  }

.padded-t-11 { padding-top: 11rem;    }
.padded-b-11 { padding-bottom: 11rem; }
.padded-l-11 { padding-left: 11rem;   }
.padded-r-11 { padding-right: 11rem;  }

.padded-t-12 { padding-top: 12rem;    }
.padded-b-12 { padding-bottom: 12rem; }
.padded-l-12 { padding-left: 12rem;   }
.padded-r-12 { padding-right: 12rem;  }

.padded-t-13 { padding-top: 13rem;    }
.padded-b-13 { padding-bottom: 13rem; }
.padded-l-13 { padding-left: 13rem;   }
.padded-r-13 { padding-right: 13rem;  }

.padded-t-14 { padding-top: 14rem;    }
.padded-b-14 { padding-bottom: 14rem; }
.padded-l-14 { padding-left: 14rem;   }
.padded-r-14 { padding-right: 14rem;  }

.padded-t-15 { padding-top: 15rem; }
.padded-b-15 { padding-bottom: 15rem; }
.padded-l-15 { padding-left: 15rem; }
.padded-r-15 { padding-right: 15rem; }

.padded-t-16 { padding-top: 16rem; }
.padded-b-16 { padding-bottom: 16rem; }
.padded-l-16 { padding-left: 16rem; }
.padded-r-16 { padding-right: 16rem; }

.padded-t-17 { padding-top: 17rem; }
.padded-b-17 { padding-bottom: 17rem; }
.padded-l-17 { padding-left: 17rem; }
.padded-r-17 { padding-right: 17rem; }

.padded-t-18 { padding-top: 18rem; }
.padded-b-18 { padding-bottom: 18rem; }
.padded-l-18 { padding-left: 18rem; }
.padded-r-18 { padding-right: 18rem; }

.padded-t-19 { padding-top: 19rem; }
.padded-b-19 { padding-bottom: 19rem; }
.padded-l-19 { padding-left: 19rem; }
.padded-r-19 { padding-right: 19rem; }

.padded-t-20 { padding-top: 20rem; }
.padded-b-20 { padding-bottom: 20rem; }
.padded-l-20 { padding-left: 20rem; }
.padded-r-20 { padding-right: 20rem; }

.padded-t-0 { padding-top: 0;    }
.padded-b-0 { padding-bottom: 0; }
.padded-l-0 { padding-left: 0;   }
.padded-r-0 { padding-right: 0;  }

.margin-sm { margin: 2.5%; }
.margin-md { margin: 5%;   }
.margin-lg { margin: 10%;  }

.margin-0  { margin: 0;      }
.margin-05 { margin: 0.5rem; }
.margin-1  { margin: 1rem;   }
.margin-2  { margin: 2rem;   }
.margin-3  { margin: 3rem;   }
.margin-4  { margin: 4rem;   }
.margin-5  { margin: 5rem;   }
.margin-6  { margin: 6rem;   }
.margin-7  { margin: 7rem;   }
.margin-8  { margin: 8rem;   }
.margin-9  { margin: 9rem;   }
.margin-10 { margin: 10rem;  }

.margin-t-0 { margin-top: 0;    }
.margin-b-0 { margin-bottom: 0; }
.margin-l-0 { margin-left: 0;   }
.margin-r-0 { margin-right: 0;  }

.margin-t-05 { padding-top: 0.5rem;    }
.margin-b-05 { padding-bottom: 0.5rem; }
.margin-l-05 { padding-left: 0.5rem;   }
.margin-r-05 { padding-right: 0.5rem;  }

.margin-t { margin-top: 5%;    }
.margin-b { margin-bottom: 5%; }
.margin-l { margin-left: 5%;   }
.margin-r { margin-right: 5%;  }

.margin-t-1 { margin-top: 1rem;    }
.margin-b-1 { margin-bottom: 1rem; }
.margin-l-1 { margin-left: 1rem;   }
.margin-r-1 { margin-right: 1rem;  }

.margin-t-2 { margin-top: 2rem;    }
.margin-b-2 { margin-bottom: 2rem; }
.margin-l-2 { margin-left: 2rem;   }
.margin-r-2 { margin-right: 2rem;  }

.margin-t-3 { margin-top: 3rem;    }
.margin-b-3 { margin-bottom: 3rem; }
.margin-l-3 { margin-left: 3rem;   }
.margin-r-3 { margin-right: 3rem;  }

.margin-t-4 { margin-top: 4rem; }
.margin-b-4 { margin-bottom: 4rem; }
.margin-l-4 { margin-left: 4rem; }
.margin-r-4 { margin-right: 4rem; }

.margin-t-5 { margin-top: 5rem; }
.margin-b-5 { margin-bottom: 5rem; }
.margin-l-5 { margin-left: 5rem; }
.margin-r-5 { margin-right: 5rem; }

.margin-t-6 { margin-top: 6rem; }
.margin-b-6 { margin-bottom: 6rem; }
.margin-l-6 { margin-left: 6rem; }
.margin-r-6 { margin-right: 6rem; }

.margin-t-7 { margin-top: 7rem; }
.margin-b-7 { margin-bottom: 7rem; }
.margin-l-7 { margin-left: 7rem; }
.margin-r-7 { margin-right: 7rem; }

.margin-t-8 { margin-top: 8rem; }
.margin-b-8 { margin-bottom: 8rem; }
.margin-l-8 { margin-left: 8rem; }
.margin-r-8 { margin-right: 8rem; }

.margin-t-9 { margin-top: 9rem; }
.margin-b-9 { margin-bottom: 9rem; }
.margin-l-9 { margin-left: 9rem; }
.margin-r-9 { margin-right: 9rem; }

.margin-t-10 { margin-top: 10rem; }
.margin-b-10 { margin-bottom: 10rem; }
.margin-l-10 { margin-left: 10rem; }
.margin-r-10 { margin-right: 10rem; }

.margin-t-11 { margin-top: 11rem; }
.margin-b-11 { margin-bottom: 11rem; }
.margin-l-11 { margin-left: 11rem; }
.margin-r-11 { margin-right: 11rem; }

.margin-t-12 { margin-top: 12rem; }
.margin-b-12 { margin-bottom: 12rem; }
.margin-l-12 { margin-left: 12rem; }
.margin-r-12 { margin-right: 12rem; }

.margin-t-13 { margin-top: 13rem; }
.margin-b-13 { margin-bottom: 13rem; }
.margin-l-13 { margin-left: 13rem; }
.margin-r-13 { margin-right: 13rem; }

.margin-t-14 { margin-top: 14rem; }
.margin-b-14 { margin-bottom: 14rem; }
.margin-l-14 { margin-left: 14rem; }
.margin-r-14 { margin-right: 14rem; }

.margin-t-15 { margin-top: 15rem; }
.margin-b-15 { margin-bottom: 15rem; }
.margin-l-15 { margin-left: 15rem; }
.margin-r-15 { margin-right: 15rem; }

.margin-t-16 { margin-top: 16rem; }
.margin-b-16 { margin-bottom: 16rem; }
.margin-l-16 { margin-left: 16rem; }
.margin-r-16 { margin-right: 16rem; }

.margin-t-17 { margin-top: 17rem; }
.margin-b-17 { margin-bottom: 17rem; }
.margin-l-17 { margin-left: 17rem; }
.margin-r-17 { margin-right: 17rem; }

.margin-t-18 { margin-top: 18rem; }
.margin-b-18 { margin-bottom: 18rem; }
.margin-l-18 { margin-left: 18rem; }
.margin-r-18 { margin-right: 18rem; }

.margin-t-19 { margin-top: 19rem; }
.margin-b-19 { margin-bottom: 19rem; }
.margin-l-19 { margin-left: 19rem; }
.margin-r-19 { margin-right: 19rem; }

.margin-t-20 { margin-top: 20rem; }
.margin-b-20 { margin-bottom: 20rem; }
.margin-l-20 { margin-left: 20rem; }
.margin-r-20 { margin-right: 20rem; }

.margin-t-21 { margin-top: 21rem; }
.margin-b-21 { margin-bottom: 21rem; }
.margin-l-21 { margin-left: 21rem; }
.margin-r-21 { margin-right: 21rem; }

.margin-t-22 { margin-top: 22rem; }
.margin-b-22 { margin-bottom: 22rem; }
.margin-l-22 { margin-left: 22rem; }
.margin-r-22 { margin-right: 22rem; }

.margin-t-23 { margin-top: 23rem; }
.margin-b-23 { margin-bottom: 23rem; }
.margin-l-23 { margin-left: 23rem; }
.margin-r-23 { margin-right: 23rem; }

.margin-t-24 { margin-top: 24rem; }
.margin-b-24 { margin-bottom: 24rem; }
.margin-l-24 { margin-left: 24rem; }
.margin-r-24 { margin-right: 24rem; }

.margin-t-25 { margin-top: 25rem; }
.margin-b-25 { margin-bottom: 25rem; }
.margin-l-25 { margin-left: 25rem; }
.margin-r-25 { margin-right: 25rem; }


.margin-tb { margin-top: 5%; margin-bottom: 5%; }
.margin-lr { margin-left: 5%; margin-right: 5%; }

.margin-tb-2 { margin-top: 2%; margin-bottom: 2%; }
.margin-lr-2 { margin-left: 2%; margin-right: 2%; }

.margin-auto { margin-left: auto; margin-right: auto; }

/* Background Styles */

.bg-dark {
    background-color: #e6d1d5;
    color: #5E5B5B;
}

.bg-grey {
    background-color: #b6b7ba;
}

.bg-yellow {
    background-color: #eee784;
    color: #4A4A4A;
}

.bg-light-footer {
    background-color: #fdfafa;
    color: #4A4A4A;
    border-top: 0.2px solid #e7e7e4;
}

.bg-white {
    background-color: white;
}

.bg-light-grey {
    background-color: #FBFBFB;
}

.bg-light-greige {
    background-color: #EEECEA;
}


.bg-fixed { background-attachment: fixed; }

  
.bg-featured {background-color: #3833AF;}

.bg-border-yellow {border: 2px solid #F6EA49;}
.bg-border-white {border: 1px solid white   ;}
.bg-border-grey {border: 1px solid #e1e0e0;}
.bg-border-dark-grey {border: 1px solid #4A4A4A;}



/* Min Height */

.tall-05  { min-height: 0.5vh;}
.tall-1   { min-height: 1vh;  }
.tall-2   { min-height: 2vh;  }
.tall-5   { min-height: 5vh;  }
.tall-10  { min-height: 10vh; }
.tall-20  { min-height: 20vh; }
.tall-30  { min-height: 30vh; }
.tall-40  { min-height: 40vh; }
.tall-50  { min-height: 50vh; }
.tall-60  { min-height: 60vh; }
.tall-70  { min-height: 70vh; }
.tall-80  { min-height: 80vh; }
.tall-90  { min-height: 90vh; }
.tall-100 { min-height: 100vh;}
.tall-200 { min-height: 200vh;}
.tall-210 { min-height: 210vh;}
.tall-220 { min-height: 220vh;}
.tall-230 { min-height: 230vh;}
.tall-240 { min-height: 240vh;}
.tall-250 { min-height: 250vh;}
.tall-260 { min-height: 260vh;}


/* Max Width */

.capped-width-wide      { max-width: 1600px; margin: auto; }
.capped-width           { max-width: 1200px; margin: auto; }
.capped-width-narrow    { max-width: 1000px; margin: auto; }
.capped-width-v-narrow  { max-width: 800px;  margin: auto; }

.wide-lg  { max-width: 1024px; }
.wide-100 { max-width: 100%;   }


.width-2  { max-width: 2vw;}
.width-5  { max-width: 5vw;}
.width-10 { max-width: 10vw;}
.width-20 { max-width: 20vw;}
.width-30 { max-width: 30vw;}
.width-40 { max-width: 40vw;}
.width-60 { max-width: 60vw;}
.width-80 { max-width: 80vw;}

/* Max Height */

.height-5  { max-height: 5vh;}
.height-10 { max-height: 10vh;}
.height-20 { max-height: 20vh;}
.height-40 { max-height: 40vh;}
.height-60 { max-height: 60vh;}
.height-80 { max-height: 80vh;}


/* Text Allignment */

.text-left      { text-align: left;   }
.text-center    { text-align: center; }
.text-right     { text-align: right;  }
.text-justify   { text-align: justify; }

/* Text Styles */

.small-text  { font-size: 1.3rem; }
.medium-text { font-size: 1.5rem;   }
.big-text    { font-size: 4rem;   }

.uppercase {text-transform: uppercase; }
.lowercase {text-transform: lowercase; }

.font-weight-light      { font-weight: 300;    }
.font-weight-normal     { font-weight: normal; }
.font-weight-bold       { font-weight: bold;    }
.font-weight-extra-bold { font-weight: 800;    }

.font-weight-100 { font-weight: 100; }
.font-weight-200 { font-weight: 200; }
.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }


.dark-logo-text { color: #4A494B; }
.light-logo-text { color: #F6EA49; }
.black-text     { color: #000000; } 
.dark-text      { color: #4A4A4A; }
.light-text     { color: #F5F5F5; }
.white-text     { color: white;   }
.subtle-text {opacity: 0.8}

strong { 
    color: #000000;
    font-weight: 300;
}

.bg-color-transparant { background-color: transparent; }

/* links */
a {
    display: inline-block;
}

.inline a {
  display:inline-block;
  padding: 0.5rem;
}

/*------------------------- Typography Styles ------------------------*/

h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

h2, h3, h4 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
}

h1 {
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.3rem;
    line-height: 1;
    margin-bottom: 1rem;
}

h3 {
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

h4 {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 1rem;
}

p {
    font-weight: 200;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

p:last-child {
    margin-bottom: 0;
}


a {
    font-weight: 200;
    color: inherit;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.2s all; 
}

a:hover {
    color:#f0e547; 
}

hr {
    margin: 0.5em 0 1.5em;
    margin-right: 0px;
    margin-left: 0px;
    border: none;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-bottom: 2px solid #78787d;
    border-bottom-color: rgb(120, 120, 125);
    width: 80px;
    border-color: inherit;
    height: 0;
    color: #f0e547;
    display: inline-block;
}

.divider-left {
    border-left: 2px solid #F6EA49;
}

.divider-right {
    border-right: 2px solid #F6EA49;
}

.border-b-dark-yellow { border-bottom: 2px solid #F6EA49; }
.border-b-grey        { border-bottom: 1px solid #e1e0e0; }
.border-b-grey-rgba   { border-bottom: 1px solid rgba(255, 255, 255, 0.8); }

.title-project {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.5rem;
    color:#000000;
    margin: 0.5rem 0 0.1rem 0;
}

.title-project-index {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: 1.3rem;
    line-height: 1.5rem;
    color:#000000;
    margin: 0.5rem 0.6rem 0.1rem 0;
}

.title-service { 
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 1rem;
} 


.title {
    font-family: 'Works Sans', sans-serif;
    font-weight: 200;
    font-size: 1.2rem;
}

/* .title-oversized {
    font-family: 'Work Sans', sans-serif;
    font-weight: bold;
    font-size: 6.5rem;
    margin-top: 0.5rem;
    color: black;
} */

.title-oversized {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 4.7rem;
    margin-top: 0.5rem;
    color: black;
    text-transform: uppercase;
}

.title-medium-oversized {
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    font-size: 2.5rem;
    margin-top: 0.5rem;
    color: black;
    text-transform: uppercase;
}

.title-gdpr {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 4.7rem;
    margin-top: 0.5rem;
    color: black;
    text-transform: uppercase;

}

.title-header-index {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 3.5rem;
    margin-top: 0.5rem;
    color: black;
    text-transform: uppercase;
}

.title-header-index-caption {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.title-testimonial {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 1.2rem;
    margin-top: 0.5rem;
    color: #4A4A4A;
    font-style: italic;
}

.title-categories {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    margin-top: 0.5rem;
    color: #4A4A4A;
}

.project-description {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: #4A4A4A;
}

.project-radius {
    border-radius: 18rem 0 0 18rem !important;
}

.project-with-logo {
  position: relative;
  background-image:
    url('/images/ossm-logo-mark.png'),
    var(--image-url); /* fallback-variabele, maar je foto blijft inline via background-image */
  background-repeat: no-repeat, no-repeat;
  background-position: calc(100%), center; /* logo links onder, foto gecentreerd */
  background-size: cover; /* logo kleiner, foto vult volledig */
  background-blend-mode: normal;
}

/* Zorg dat de bg-image de referentie is voor absolute positioning */
.bg-image.has-price { 
  position: relative;
}

/* Price tag rechtsboven, met afgeronde linkeronderhoek */
/* .price-tag-right {
  position: absolute;
  top: 2rem;
  right: 0;
  z-index: 1;

  display: inline-block;
  padding: 0.8rem 1.75rem;
  margin: 0;

  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 2.0rem;


  background-color:#F6EA49;
  color:black;
  border-radius: 1rem 0 0 1rem; 
  box-shadow: 0 0 6.86px 0 rgba(0,0,0,.1);
} */

.price-tag-l {
  position: absolute;
  top: 2rem;
  left: 0;
  z-index: 1;

  display: inline-block;
  padding: 0.8rem 1.75rem;
  margin: 0;

  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 2.0rem;


  background-color:#F6EA49;
  color: black;
  border-radius: 0 1rem 1rem 0;  /* alleen linksonder afgerond */
  box-shadow: 0 0 6.86px 0 rgba(0,0,0,.1);
}


.icon {
    font-size: 2rem;
    padding-bottom: 1rem;
}

/*---------------------------- Buttons ---------------------------*/
.button {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid #F6EA49;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    transition: 0.5s all; 
}

.button:hover {
    border: 2px solid #F6EA49;
    background-color: #F6EA49;
    color: black
}

.button-price {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid #F6EA49;
    background-color: #F6EA49;
    color: #4A4A4A;
    padding: 0.8rem 1rem;
    margin-top: 2rem;
}

.button-aanbod {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid #F6EA49;
    padding: 0.8rem 1rem;
    margin-top: 2rem;
    transition: 0.5s all; 
}

.button-aanbod:hover {
    border: 2px solid #F6EA49;
    background-color: #F6EA49;
    color: black
}

.button-aanbod .icon-arrow {
  width: 1em;                    /* schaalt mee met font-size */
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;             /* voorkomt afknippen aan randen */
  vertical-align: -0.08em;       /* baseline finetune */
  transform: translateY(.03em);
  transition: transform .2s ease;
}

.button-filled {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    transition: 0.5s all;
    background-color: #F6EA49;
    color: #4A4A4A;
}

.button-filled:hover {
    background-color: #4A4A4A;
    color: #F6EA49;
}

.button-dark {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid #4A4A4A;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    transition: 0.5s all;
    color: #4A4A4A;
}

.button-dark:hover {
    background-color: #4A4A4A;
    color: white;
}

.button-dark .icon-arrow {
  width: 1em;                    /* schaalt mee met font-size */
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;             /* voorkomt afknippen aan randen */
  vertical-align: -0.08em;       /* baseline finetune */
  transform: translateY(.03em);
  transition: transform .2s ease;
}

.button-dark .icon-arrow path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.9;             /* 0.8 = dunner, 1.0 = dikker */
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.button-header {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    border: 2px solid #F6EA49;
    transition: 0.5s all; 
}

.button-header:hover {
    border: 2px solid #F6EA49;
    background-color: #F6EA49;
    color: black
}

/* Grootte + baseline-fix voor het icoon */
.button-header .icon-arrow {
  width: 1em;                    /* schaalt mee met font-size */
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;             /* voorkomt afknippen aan randen */
  vertical-align: -0.08em;       /* baseline finetune */
  transform: translateY(.03em);
  transition: transform .2s ease;
}

.button .icon-arrow {
  width: 1em;                    /* schaalt mee met font-size */
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;             /* voorkomt afknippen aan randen */
  vertical-align: -0.08em;       /* baseline finetune */
  transform: translateY(.03em);
  transition: transform .2s ease;
}

.button-filled-dark {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid #4A4A4A;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    transition: 0.5s all;
    color: #4A4A4A;
    background-color: #4A4A4A;
    color: white;
}

.button-filled-dark .icon-arrow {
  width: 1em;                    /* schaalt mee met font-size */
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;             /* voorkomt afknippen aan randen */
  vertical-align: -0.08em;       /* baseline finetune */
  transform: translateY(.03em);
  transition: transform .2s ease;
}


.button-project {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    transition: 0.5s all; 
}

.button-project .icon-arrow {
  width: 1em;                    /* schaalt mee met font-size */
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;             /* voorkomt afknippen aan randen */
  vertical-align: -0.08em;       /* baseline finetune */
  transform: translateY(.03em);
  transition: transform .2s ease;
}


.button-project .icon-arrow:hover {
   width: 1em;                    /* schaalt mee met font-size */
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;             /* voorkomt afknippen aan randen */
  vertical-align: -0.08em;       /* baseline finetune */
  transform: translateY(.03em);
  transition: transform .2s ease;
}

.icon-arrow {
    padding-top: 0.09rem;
}

/* Dikte + kleur (neemt tekstkleur over, ook op :hover) */
.button-header .icon-arrow path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.9;             /* 0.8 = dunner, 1.0 = dikker */
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.button-filled-dark .icon-arrow path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.9;             /* 0.8 = dunner, 1.0 = dikker */
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.button-project .icon-arrow path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.9;             /* 0.8 = dunner, 1.0 = dikker */
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.button-cookie-consent {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid #F6EA49;
    padding: 0.5rem 0.8rem;
    transition: 0.5s all;
    font-size: 1rem;
    margin: 0.5rem;
}

.button-cookie-consent:hover {
    border: 2px solid #F6EA49;
    background-color: #F6EA49;
    color: black
}


/*------------------------- Header Styles ------------------------*/

header h2 {
    font-family: inherit;
    font-size: 5vw;
    line-height: 1;
}

.position-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: white;
}

.site-header-a {
    font-size: 1.1rem;
    padding: 1rem 0.5rem;
    margin: 0 0.2rem;  
    text-decoration: none;
    color: inherit; 
    transition: 0.1s all;
}

.site-header-a:hover {
    border-bottom: 2px solid #F8EC48;
    color: #4A4A4A;
}

.site-header-a.active {
  border-bottom: 2px solid #F8EC48;
  font-weight: 400;
}

header p {
    font-size: 2.1vw;
    font-weight: 200;
    line-height: 1;
    margin-bottom: 1rem;
}


@keyframes bounce {
    50% {
        transform: translateY(-15px);
    }
}

.demo {
    width: 100%;
}


/* Dropdown styles */

.dropdown { 
  position: relative; 
  display: inline-block;
}

.dropdown-title {
  padding: 0.25rem 0.5rem;
  display: inline-block;
  font-weight: 200;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0rem;
  padding: 0.5rem;
  display:none; 
  background-color: white;
  box-shadow: 0 20px 25px -5px rgba(89, 89, 89, 0.2), 0 10px 10px -5px rgba(89, 89, 89, 0.2);
  z-index: 2;
  text-align: left;
  min-width: 10rem;
}

.dropdown:hover .dropdown-content{ 
  display: block;
}

.dropdown-content a {
  display: block;
  padding: 0.5rem;
}


/* Hamburger menu Daniels example */


/* this is where you style the button if you want to add more space between the spans than add padding to this div but make sure you also add it to the top and bottom active classes on there top/bottom or else your cross wont line up*/

.hamburger-button {
    position: fixed;
    top: 3vh;
    right: 4vh;
    z-index: 9;
    padding: 12px;
}


/*this is where you can change the color of the buttons*/

.hamburger-button span {
    width: 30px;
    border: 1.5px solid #4A4A4A;
    background-color: #4A4A4A;
    display: block;
    border-radius: 22px;
    transition: 2s;
    cursor: pointer;
}

.hamburger-button.active span {
    border-color: #4A4A4A;
    background-color: #4A4A4A;
}

.hamburger-top,
.hamburger-bottom {
    position: absolute;
}

.hamburger-top {
    top: 2px;
}

.hamburger-bottom {
    bottom: 2px;
}


/* make sure this has the same top as the burger button has padding*/

.hamburger-button.active .hamburger-top {
    position: absolute;
    top: 12px;
    transform: rotateZ(45deg);
}

.hamburger-button.active .hamburger-middle {
    /*   transform: rotateZ(270deg); */
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
}


/* make sure this has the same bottom as the burger button has padding*/

.hamburger-button.active .hamburger-bottom {
    position: absolute;
    bottom: 12px;
    transform: rotateZ(-45deg);
}

.mobile-menu {
    display: flex;
    position: fixed;
    top: -100vh;
    left: 0;
    right: 0;
    bottom: 100vh;
    background-color: #FBFCFB;
    padding: 5px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    z-index: 8;
    transition: 1s;
    align-content: space-around;
    justify-content: space-around;
    flex-direction: column;
}

.mobile-menu.active {
    top: 0;
    bottom: 0;
}

.mobile-menu a {
    text-decoration: none;
    font-size: 20px;
    font-weight: 300;
    color: #4A494B;
    display: block;
    padding: 5px 15px;
    text-align: center;
    white-space: nowrap;
}

/*--------------------- Index Styles  ---------------------*/

/*---- Index Services  -----*/

.hover-container {
    background-size: cover;
    background-position: center;
}

.hover-overlay {
    position: relative;
    padding-bottom: 100vh;
    color: rgba(255, 255, 255, 0);
    position: relative;
    /* you only need to use relative + absolute if you want to determine the exact aspect ratio of the container */
    transition: all 0.3s;
}

.hover-overlay:hover {
    background-color: rgba(210, 210, 210, 0.799);
    color: yellow;
    min-height: 100%;
}

.hover-inner {
    position: absolute;
    width: 100%;
    top: 20%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.hover-inner p {
    margin-bottom: 0;
}


/*---- Index Projects  -----*/

/* vierkante tegels met cover */
.index-project-thumb .bg-image {
    display: block;
    width: 90%;
    background-size: cover;
    background-position: center;
}

/* klikbare thumb */
.index-project-thumb { display: block; }


/* .index-bg-grey-splitter {
    position: relative;
    bottom: 19rem;
    z-index: 1;
} */

.gallery .col-3 .bg-image {
  transition: filter 0.3s ease, transform 0.5s ease;
}


/* Wanneer je over de gallery gaat → alle bg-images dimmen */
.gallery:hover .col-3 .bg-image {
  filter: grayscale(100%) opacity(0.3);
}

/* Behalve degene waar je écht over staat */
.gallery .col-3:hover .bg-image {
  filter: none; /* terug naar normaal */
}


/*------------------ Review Section Styles ------------------*/

/* Review */

.profile {
    width: 100%;
    max-width: 20rem;
    margin-bottom: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    margin-left: auto;  
    margin-right: auto;
}

.review-slider {
    padding: 3rem 4rem;
}

.image-wrapper {
  aspect-ratio: 10 / 9;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Trustlocal badges */

._ABCz {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

._ABCz img {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    font-size: inherit;
    line-height: inherit;
    box-sizing: content-box;
    vertical-align: baseline;
}

._ABCz .kuI1q {
    font-family: 'Work Sans', sans-serif !important; 
    font-weight: 400 !important;
    font-size: 0.7rem;
    color: #4A4A4A !important;
    border-radius: 0 !important;
}


._ABCz .KRu2g {
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 400 !important;
}

._ABCz .eTM53.HeU4e.VqqTI .Kd_DL {
    border-right: .07143em solid #4A4A4A !important;
} 

._ABCz .eTM53.HeU4e .Kd_DL {
    align-self: stretch;
    border-left: .07143em solid #4A4A4A !important;
}


._ABCz .eTM53.xMOLc.VqqTI .swHCM {
    border-top: .07143em solid #4A4A4A !important;
}


._ABCz .eTM53.xMOLc .Kd_DL {
    border-top: .07143em solid #4A4A4A !important;
}


._ABCz .Lb4cK {
    font-family: 'Work Sans', serif !important;
    color: #4A4A4A !important;
}

._ABCz .Lb4cK .d1sPz {
    padding-right: .28571em;
    font-weight: 500 !important;
}

._ABCz .Lb4cK .EFrmI .KRu2g {
    color: #000;
}

._ABCz .purd9 {
    border: 1px solid #edebeb !important;
}



@media (max-width: 600px) {
    ._ABCz .eTM53.HeU4e.VqqTI.kuI1q {
        font-size: 13px;
    }
}

@media (max-width: 520px) {
    ._ABCz .Lb4cK.kuI1q.HeU4e.VqqTI {
        margin: auto;
        width: 50%;
        max-width: 140px;
    }

    ._ABCz .eTM53.HeU4e.kuI1q,
    ._ABCz .eTM53.HeU4e.VqqTI.kuI1q {
        font-size: 12px;
    }

    ._ABCz .eTM53.HeU4e.kuI1q .bW3wc,
    ._ABCz .eTM53.HeU4e.VqqTI.kuI1q .bW3wc {
        width: 4.64286em;
        padding: .5em 0 .28571em;
    }

    ._ABCz .eTM53.HeU4e.kuI1q .bW3wc img,
    ._ABCz .eTM53.HeU4e.VqqTI.kuI1q .bW3wc img {
        width: .85714em;
        padding: 0 0.01786em;
    }

    ._ABCz .eTM53.HeU4e.kuI1q .dKz9d,
    ._ABCz .eTM53.HeU4e.VqqTI.kuI1q .dKz9d {
        width: auto;
        min-width: 12.85714em;
    }
}

@media (max-width: 520px) {
    ._ABCz[data-type='landscape'] {
        display: grid;
        gap: 5px;
    }
}


/* ------- MailerLite -----------*/
/* Pop-up */

.ml-popup .ml-popup-col {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
    padding-bottom: 4rem !important;
    padding-top: 4rem !important;
}

/* Embedded */
#mlb2-33780468.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#mlb2-33780468.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
    padding: 1rem 0 0 0 !important;
}


.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p {
    font-size: 1rem !important;
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 200;
}

.privacy-policy a {
    font-size: 1rem !important;
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 200;
}
/*---------------- Background Image Slider ---------------------*/

.bg-image-slider {
    background-color: rgb(240, 240, 240);
    background-position: center;
    background-size: cover;
}


/* Slider */

.project-slider {
    padding: 2% 5%;
}

.project-index-slider {
    padding: 4rem 4rem;
}

.slider-item {
    /* padding: 1rem; */
    display: none;
    /* otherwise your carousel would display as blocks;*/
}

.slider-item:first-child {
    /* this makes sure that your first image of the carousel loads */
    display: block;
}

.slick-next::before {
    content: '→';
}

.slick-next {
    right: 4px;
}

.slick-prev {
    right: -15px;
}
.slick-next .slick-prev {
    top: 41%;
}

.slick-next::before,
.slick-prev::before {
    font-family: inherit;
    /*padding: 0.5rem;*/
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: #4A494B;
    border: 2px solid #F6EA49;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* without this, the dots are not centered */

.slick-dots {
    left: 0;
    bottom: -2px;
}

.slick-dots li,
.slick-dots li button {
    width: 10px;
}

.slick-dots li button::before {
    color: #6B705C;
}

.slick-dots li.slick-active button::before {
    color: #43463A;
}

/* without this the images are not the exact same height

/* Zorg dat elke kaart exact even groot is in beide sliders */
.project-slider .slider-item a,
.project-index-slider .slider-item a {
  display: block;
}

.project-slider .bg-image,
.project-index-slider .bg-image {
  width: 100%;
  aspect-ratio: 3 / 4;   /* 3/4 = portrait */
  background-size: cover;
  background-position: center;
}

/* Nette gutters in Slick */
.project-slider .slick-slide,
.project-index-slider .slick-slide {
  margin: 0 12px;
}

.project-slider .slick-list,
.project-index-slider .slick-list {
  margin: 0 -12px;
}



/*-------------------- Accordion Styles ---------------*/

.accordion {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    padding: 0 0 1rem 0;
}
  
.tab {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-left: .5rem;
    border: 1px solid #c8c8c8;
    margin: 0 0 -1px;
    }

div {
    background-repeat: no-repeat;
}

.tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
  
input[type="checkbox"], input[type="radio"] {
    display: inline;
}
  
  
input {
    padding: 0;
    line-height: inherit;
    color: inherit;
}
  
input {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
  
.tab input[type="checkbox"]:checked + label {
    font-weight: 700;
}
  
.tab label {
    position: relative;
    display: block;
    padding: .5rem .5rem .5rem 3rem;
    margin: 0;
    line-height: 1.8;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 300;
}
  
label {
    display: block;
    margin-bottom: .3rem;
    font-weight: 600;
}
  
.tab label span {
    float: right;
    font-size: 1rem;
    line-height: 2rem;
    padding-right: .5rem;
}
  
.tab label::after {
    position: absolute;
    left: .5rem;
    top: .3rem;
    display: block;
    width: 2em;
    height: 2em;
    line-height: 2;
    text-align: center;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}
  
.tab input:checked ~ .tab-content {
    max-height: 100em;
    opacity: 1;
}
  
.tab .tab-content {
    max-height: 0;
    display: block;
    padding-right: .5rem;
    opacity: 0;
    color: #505050;
    overflow: hidden;
    -webkit-transition: max-height .35s,padding .35s,opacity .5s;
    -o-transition: max-height .35s,padding .35s,opacity .5s;
    transition: max-height .35s,padding .35s,opacity .5s;
    padding-left: 3rem;
    padding-right: 3rem;
}
  
.tab .tab-content p {
    font-size: .9rem;
    margin-top: 0;
    margin-bottom: 0.7rem;
}
  
.tab-content * {
    color: #41414d;

}
  
.tab input[type=checkbox]+label:after, .tab input[type=radio]+label:after {
    content: "+";
    }

.tab input[type=checkbox]:checked+label:after, .tab input[type=radio]:checked+label:after {
transform: rotate(135deg);
}
    
/* Accordion LIST Styles */
  
.text-list {
    font-size: .875rem;
    line-height: 1.25rem;
}
  
ul {
    margin: .7rem 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 200;
    line-height: 1.6;
    list-style: disc;
    line-height: 1.5;  
}
  
li {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    list-style: inherit;
    margin-left: 1.3rem;
    margin-bottom: 0.10rem;
}

  
/*---------------- Projects (Blog) Section Styles ------------------*/

.social-share a {
  padding: 0.25rem 0.5rem;
}


/* ------------------ Contact Section Styles ---------------------*/

/* Contact Styles */
  
form input, 
form textarea {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid rgb(220,220,220);
  background:white; 
  outline: none;
  font-family: inherit;
  font-size: 0.9rem;
}

form input:focus,
form textarea:focus {
  border-color: #F6EA49;
}

textarea {
  min-height: 4rem;
}

form label {
  margin-top: 1rem;
  display: block;
  color: #000000;
  font-weight: 200;
}

form button {
    margin-top: 1rem;
    border:2px solid #4A4A4A; 
    background:white; 
    padding: 0.8rem 1rem;
    cursor:pointer; 
    margin: 0.5rem 0;
    font-size: 1rem;
    text-transform: uppercase;
    transition: 0.5s all; 
    font-weight: 100;
    color: #4A4A4A;
    letter-spacing: 0.1rem;
} 

::placeholder { 
    color: #c8c8c8; 
    opacity: 1;
    font-weight: 200;
    font-family: inherit;
}

/* Gele onderlijn voor de fallback-link onder de agenda */
.booking-module .agenda-fallback-link {
  text-decoration: none;
  border-bottom: 1px solid #F6EA49; /* jouw geel */
  padding-bottom: 2px;               /* beetje ruimte */
}
.booking-module .agenda-fallback-link:hover {
  opacity: .85;                      /* optioneel */
}

/* Boooking Calendar */

.step-label { 
    margin-top: 1rem;
    display: block;
    font-weight: 200; 
    color: #000000;
    font-size: 1rem;
}

.service-switch { 
    display:inline-flex; 
    gap:.5rem; 
}

.service-btn { 
    margin-top: 1rem;
    border:1px solid #4A4A4A; 
    background:inherit;
    padding: 0.8rem 1rem;
    cursor:pointer; 
    margin: 0.5rem 0;
    font-size: 1rem;
    text-transform: uppercase;
    transition: 0.5s all; 
    font-weight: 100;
    color: #4A4A4A;
    letter-spacing: 0.02rem;
}
  
/* blauwe browser-outline uit */
.service-btn:focus,
.pkg-btn:focus { outline: none; }


.package-grid { 
    display:flex; 
    flex-wrap:wrap; 
    gap:.6rem; 
}

.pkg-btn { 
    margin-top: 1rem;
    border:1px solid #4A4A4A; 
    background:inherit; 
    padding: 0.8rem 1rem;
    cursor:pointer; 
    margin: 0.5rem 0;
    font-size: 1rem;
    text-transform: uppercase;
    transition: 0.5s all; 
    font-weight: 100;
    color: #4A4A4A;
    letter-spacing: 0.1rem;
}

.service-btn.is-selected,
.pkg-btn.is-selected {
  border: 2px solid #F6EA49;
  /* background-color: #F6EA49; */
}


.hidden { 
    display:none !important; 
}

.agenda-host { 
    border:1px solid #e6e6e6; 
    background:inherit; 
    min-height:360px; 
    display:grid; 
    place-items:center; 
    overflow:hidden; 
}

.agenda-iframe { 
    width:100%; 
    height:860px; 
    border:0; 
}

.agenda-placeholder { 
    color:#666; 
    padding:2rem; 
    text-align:center; 
}


/*------------------------- Footer Styles ------------------------*/

footer p {
    font-size: 0.9rem;
}

footer nav a {
  display: block;
  padding: 0.1rem;
  font-size: 1rem;
}

.footer-title {
    color: #000000;
    font-size:  1.3rem;
    font-weight: 400;
}

.footer-text {
    font-size:  1rem;
    font-weight: 200;
}


.display-block { display: block; }


.fab .fa-solid{
    font-size: 1.5rem;
}

/* Cookie button */

.cookie-button {
    background-color: white;
    font-size: 0.5rem;
    position: fixed;
    bottom: 0;
    left: 0rem;
    margin: 0;
    transition: all .3s ease;
    border-radius: 0 1rem 0 0;
    box-shadow: 0 0 6.86px 0 rgba(0,0,0,.10196078431372549);
}

.cookie-button:hover {
  transform: scale(1.2) ;
  
}

.fa-cookie-bite {
    padding: 0.6rem;
    font-size: 1.5rem;
    position: relative;
}

/* Footer project tiles */

/* Gridlex-gutters voor deze rij */
.footer-projects { padding: 0 5%; }
.footer-projects [class*="col-"] { padding-left: 6px; padding-right: 6px; }

/* klikbare thumb */
.footer-thumb { display: block; }

/* vierkante tegels met cover */
.footer-thumb .bg-image {
  display: block;
  width: 103%;
  background-size: cover;
  background-position: center;
}



/* Cookie banner */

#cookie-notice {
    font-weight: 200;
    padding-bottom: 0.5rem;
    display: none;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(100% - 0rem);
    background:  #FBFCFB;
    color: #4A4A4A;
    z-index: 2;
}

#cookie-notice a {
    display: inline-block;
    cursor: pointer;
    margin-left: 0.5rem;
}

#cookie-notice .button-subtle {
    opacity: 0.8;
    border-bottom: 1px solid #4A4A4A;
    font-size: 1rem;
}

#close-cookie-banner {
    padding: 1rem;
    padding-right: 0;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.5
}



/*  --------------------- Cards --------------------- */
  
  
  /* Card Styles */
  
  .card {
    padding: 0;
    /* background-color: #fffdfd; */
    /* box-shadow: 0 20px 25px -5px rgba(197, 196, 196, 0.2), 0 10px 10px -5px rgba(193, 193, 193, 0.2); */
  }

  .card:hover {
    box-shadow: 0 20px 25px -5px rgba(89, 89, 89, 0.2), 0 10px 10px -5px rgba(89, 89, 89, 0.2);
    transition: all .3s;
    transform: scale(1.02);
    margin-top: -2px;
    color:#41414d;
  }

  .rounded-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }

  .rounded-bottom {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }
  
  .bg-image span {
    text-transform: uppercase;
    font-weight: 600;
  }
  
  /* .post-info {
    padding: 1rem;
  } */
  
  .date {
    font-size: 0.8rem;
    color: rgb(90,90,90);
  }
  
  .card a {
    display: inline-block;
    margin-top: 1rem;
    text-decoration: none;  
    font-size: 0.8rem;
  }

  .bg-image-service-cards-1 { 
    background-color: #f0f0f5;
    background-size: cover;
    background-position: 50% 29%;
    color: white;
  }

  .bg-image-service-cards-2 {
    background-color: #f0f0f5;
    background-size: cover;
    background-position: 50% 38%;
    color: white;
  }

/*  ----------- Media Queries - Responsiveness Site ----------- */

.show-xxl,
.show-xl,
.show-lg,
.show-mdl,
.show-md,
.show-sm,
.show-xs,
.show-xxs {
    display: none;
}


/* ------- LG Media Query (111em / 1790px) --------------- */
/* - Styles added here will apply at devices smaller than 1440px, or zoomed in equivalent */
@media (max-width: 111em) {
    /* body {
        border: 2px solid pink;
    } */

    header nav a {
        padding-right: 0.5rem;
    }
    
    header a {
        padding: 0.5rem 0.5rem;
    }

    header h2 {
        font-size: 4.5vw;
    }


    header p {
        font-size: 2.8vw;
    }
    
    footer h2 {
        font-size: 3vw;
        margin-bottom: 0;
    }

    footer a {
        font-size: 1.3vw;
    }

    footer .fab {
        font-size: 2vw;
    }

    p {
        font-size: 1.1vw;
    }

    .show-lg { display: block; }
    .hide-lg { display: none;  }
   
    .lg-tall-10  { min-height: 10vh; }
    .lg-tall-20  { min-height: 20vh; }
    .lg-tall-30  { min-height: 30vh; }
    .lg-tall-40  { min-height: 40vh; }
    .lg-tall-50  { min-height: 50vh; }
    .lg-tall-60  { min-height: 60vh; }
    .lg-tall-70  { min-height: 70vh; }
    .lg-tall-80  { min-height: 80vh; }
    .lg-tall-90  { min-height: 90vh; }
    .lg-tall-100 { min-height: 100vh; }
    .lg-tall-110 { min-height: 110vh; }
    .lg-tall-120 { min-height: 120vh; }
    .lg-tall-130 { min-height: 130vh; }
    .lg-tall-140 { min-height: 140vh; }
    .lg-tall-150 { min-height: 150vh; }
    .lg-tall-160 { min-height: 160vh; }
    .lg-tall-170 { min-height: 170vh; }
    .lg-tall-180 { min-height: 180vh; }
    .lg-tall-190 { min-height: 190vh; }
    .lg-tall-200 { min-height: 200vh; }
    .lg-tall-210 { min-height: 210vh; }
    .lg-tall-220 { min-height: 220vh; }
    .lg-tall-230 { min-height: 230vh; }
    .lg-tall-240 { min-height: 240vh; }
    .lg-tall-250 { min-height: 250vh; }
    .lg-tall-260 { min-height: 260vh; }
    .lg-tall-270 { min-height: 270vh; }
    .lg-tall-280 { min-height: 280vh; }
    .lg-tall-290 { min-height: 290vh; }
    .lg-tall-300 { min-height: 300vh; }
    
    .lg-text-center { text-align: center; }
    .lg-text-left   {text-align: left;    }
    .lg-text-right  {text-align: right;   }
    
    .lg-padded-05 { padding: 0.5rem; }
    .lg-padded-1  { padding: 1rem;   }
    .lg-padded-2  { padding: 2rem;     }
    .lg-padded-3  { padding: 3rem;     }
    .lg-padded-4  { padding: 4rem;     }
    .lg-padded-5  { padding: 5rem;     }
    .lg-padded-6  { padding: 6rem;     }
    .lg-padded-7  { padding: 7rem;     }
    .lg-padded-8  { padding: 8rem;     }
    .lg-padded-9  { padding: 9rem;     }
    .lg-padded-10 { padding: 10rem;    }
    .lg-padded-11 { padding: 11rem;    }
    
    .lg-padded-t-0 { padding-top: 0;    }
    .lg-padded-b-0 { padding-bottom: 0; }
    .lg-padded-l-0 { padding-left: 0;   }
    .lg-padded-r-0 { padding-right: 0;  }

    .lg-padded-t-1 { padding-top: 1rem;    }
    .lg-padded-b-1 { padding-bottom: 1rem; }
    .lg-padded-l-1 { padding-left: 1rem;   }
    .lg-padded-r-1 { padding-right: 1rem;  } 

    .lg-padded-t-2 { padding-top: 2rem;    }
    .lg-padded-b-2 { padding-bottom: 2rem; }
    .lg-padded-l-2 { padding-left: 2rem;   }
    .lg-padded-r-2 { padding-right: 2rem;  }

    .lg-padded-t-3 { padding-top: 3rem;    }
    .lg-padded-b-3 { padding-bottom: 3rem; }
    .lg-padded-l-3 { padding-left: 3rem;   }
    .lg-padded-r-3 { padding-right: 3rem;  }

    .lg-padded-t-4 { padding-top: 4rem;  }
    .lg-padded-b-4 { padding-bottom: 4rem; }
    .lg-padded-l-4 { padding-left: 4rem; }
    .lg-padded-r-4 { padding-right: 4rem; }

    .lg-padded-t-5 { padding-top: 5rem;  }
    .lg-padded-b-5 { padding-bottom: 5rem; }
    .lg-padded-l-5 { padding-left: 5rem; }
    .lg-padded-r-5 { padding-right: 5rem; }

    .lg-padded-r-5p { padding-right: 5%; }

    .lg-padded-t-6 { padding-top: 6rem;  }
    .lg-padded-b-6 { padding-bottom: 6rem; }
    .lg-padded-l-6 { padding-left: 6rem; }
    .lg-padded-r-6 { padding-right: 6rem; }

    .lg-padded-t-7 { padding-top: 7rem;  }
    .lg-padded-b-7 { padding-bottom: 7rem; }
    .lg-padded-l-7 { padding-left: 7rem; }
    .lg-padded-r-7 { padding-right: 7rem; }

    .lg-padded-t-8 { padding-top: 8rem;  }
    .lg-padded-b-8 { padding-bottom: 8rem; }
    .lg-padded-l-8 { padding-left: 8rem; }
    .lg-padded-r-8 { padding-right: 8rem; }

    .lg-padded-t-9 { padding-top: 9rem;  }
    .lg-padded-b-9 { padding-bottom: 9rem; }
    .lg-padded-l-9 { padding-left: 9rem; }
    .lg-padded-r-9 { padding-right: 9rem; }

    .lg-padded-t-10 { padding-top: 10rem;  }
    .lg-padded-b-10 { padding-bottom: 10rem; }
    .lg-padded-l-10 { padding-left: 10rem; }
    .lg-padded-r-10 { padding-right: 10rem; }

    .lg-padded-t-11 { padding-top: 11rem;  }    
    .lg-padded-b-11 { padding-bottom: 11rem; }
    .lg-padded-l-11 { padding-left: 11rem; }
    .lg-padded-r-11 { padding-right: 11rem; }

    .lg-padded-t-12 { padding-top: 12rem;  }
    .lg-padded-b-12 { padding-bottom: 12rem; }
    .lg-padded-l-12 { padding-left: 12rem; }
    .lg-padded-r-12 { padding-right: 12rem; }

    .lg-padded-t-13 { padding-top: 13rem;  }
    .lg-padded-b-13 { padding-bottom: 13rem; }
    .lg-padded-l-13 { padding-left: 13rem; }
    .lg-padded-r-13 { padding-right: 13rem; }

    .lg-padded-t-14 { padding-top: 14rem;  }
    .lg-padded-b-14 { padding-bottom: 14rem; }
    .lg-padded-l-14 { padding-left: 14rem; }
    .lg-padded-r-14 { padding-right: 14rem; }

    .lg-padded-t-15 { padding-top: 15rem;  }
    .lg-padded-b-15 { padding-bottom: 15rem; }
    .lg-padded-l-15 { padding-left: 15rem; }
    .lg-padded-r-15 { padding-right: 15rem; }


    .lg-margin-t-0 { margin-top: 0;    }
    .lg-margin-b-0 { margin-bottom: 0; }
    .lg-margin-l-0 { margin-left: 0;   }
    .lg-margin-r-0 { margin-right: 0;  }

    .lg-margin-t-1 { margin-top: 1rem;    }
    .lg-margin-b-1 { margin-bottom: 1rem; }
    .lg-margin-l-1 { margin-left: 1rem;   }
    .lg-margin-r-1 { margin-right: 1rem;  }

    .lg-margin-t-2 { margin-top: 2rem;    }
    .lg-margin-b-2 { margin-bottom: 2rem; }
    .lg-margin-l-2 { margin-left: 2rem;  }
    .lg-margin-r-2 { margin-right: 2rem;  }

    .big-text { font-size: 6vw; }

    .title-header-index {
        font-size: 3vw;
    }

    .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p {
        font-size: 1vw !important;
    }

    .privacy-policy a {
        font-size: 1vw !important;
    }


}


/* ------- MDL Media Query (90em / 1440px) --------------- */
/* - Styles added here will apply at devices smaller than 1440px, or zoomed in equivalent */

@media (max-width: 90em) {
    /* body {
        border: 2px solid yellow;
    } */

    header nav a {
        padding-right: 0.5rem;
    }
    
    header a {
        padding: 0.5rem 0.5rem;
    }

    header h2 {
        font-size: 4.5vw;
    }

    header p {
        font-size: 3vw;
    }
    
    footer h2 {
        font-size: 3rem;
        margin-bottom: 0;
    }

    footer a {
        font-size: 1.3vw;
    }

    footer .fab {
        font-size: 2rem;
    }

    p {
        font-size: 1.2vw;
    }


    ul { 
        font-size: 1.2vw;
    }

    .show-mdl { display: block; }
    .hide-mdl { display: none;  }
   
    .mdl-tall-10  { min-height: 10vh; }
    .mdl-tall-20  { min-height: 20vh; }
    .mdl-tall-30  { min-height: 30vh; }
    .mdl-tall-40  { min-height: 40vh; }
    .mdl-tall-50  { min-height: 50vh; }
    .mdl-tall-60  { min-height: 60vh; }
    .mdl-tall-70  { min-height: 70vh; }
    .mdl-tall-80  { min-height: 80vh; }
    .mdl-tall-90  { min-height: 90vh; }
    .mdl-tall-100 { min-height: 100vh; }
    .mdl-tall-110 { min-height: 110vh; }
    .mdl-tall-120 { min-height: 120vh; }
    .mdl-tall-130 { min-height: 130vh; }
    .mdl-tall-140 { min-height: 140vh; }
    .mdl-tall-150 { min-height: 150vh; }
    .mdl-tall-160 { min-height: 160vh; }
    .mdl-tall-170 { min-height: 170vh; }
    .mdl-tall-180 { min-height: 180vh; }
    .mdl-tall-190 { min-height: 190vh; }
    .mdl-tall-200 { min-height: 200vh; }
    .mdl-tall-210 { min-height: 210vh; }
    .mdl-tall-220 { min-height: 220vh; }
    .mdl-tall-230 { min-height: 230vh; }
    .mdl-tall-240 { min-height: 240vh; }
    .mdl-tall-250 { min-height: 250vh; }
    .mdl-tall-260 { min-height: 260vh; }
    .mdl-tall-270 { min-height: 270vh; }
    .mdl-tall-280 { min-height: 280vh; }
    .mdl-tall-290 { min-height: 290vh; }
    .mdl-tall-300 { min-height: 300vh; }

    
    .mdl-text-center { text-align: center; }
    .mdl-text-left   {text-align: left;    }
    .mdl-text-right  {text-align: right;   }
    
    .mdl-padded-05 { padding: 0.5rem; }
    .mdl-padded-1  { padding: 1rem;   }
    .mdl-padded-2  { padding: 2rem;     }
    .mdl-padded-3  { padding: 3rem;     }
    .mdl-padded-4  { padding: 4rem;     }
    .mdl-padded-5  { padding: 5rem;     }
    .mdl-padded-6  { padding: 6rem;     }
    .mdl-padded-7  { padding: 7rem;     }
    .mdl-padded-8  { padding: 8rem;     }
    .mdl-padded-9  { padding: 9rem;     }
    .mdl-padded-10 { padding: 10rem;    }
    
    .mdl-padded-t-0 { padding-top: 0; }
    .mdl-padded-b-0 { padding-bottom: 0; }
    .mdl-padded-l-0 { padding-left: 0; }
    .mdl-padded-r-0 { padding-right: 0; }

    .mdl-padded-t-1 { padding-top: 1rem; }
    .mdl-padded-b-1 { padding-bottom: 1rem; }
    .mdl-padded-l-1 { padding-left: 1rem; }
    .mdl-padded-r-1 { padding-right: 1rem; }

    .mdl-padded-t-2 { padding-top: 2rem; }
    .mdl-padded-b-2 { padding-bottom: 2rem; }
    .mdl-padded-l-2 { padding-left: 2rem; }
    .mdl-padded-r-2 { padding-right: 2rem; }

    .mdl-padded-t-3 { padding-top: 3rem; }
    .mdl-padded-b-3 { padding-bottom: 3rem; }
    .mdl-padded-l-3 { padding-left: 3rem; }
    .mdl-padded-r-3 { padding-right: 3rem; }

    .mdl-padded-t-4 { padding-top: 4rem; }
    .mdl-padded-b-4 { padding-bottom: 4rem; }
    .mdl-padded-l-4 { padding-left: 4rem; }
    .mdl-padded-r-4 { padding-right: 4rem; }

    .mdl-padded-t-5 { padding-top: 5rem; }
    .mdl-padded-b-5 { padding-bottom: 5rem; }
    .mdl-padded-l-5 { padding-left: 5rem; }
    .mdl-padded-r-5 { padding-right: 5rem; }

    .mdl-padded-t-6 { padding-top: 6rem; }
    .mdl-padded-b-6 { padding-bottom: 6rem; }
    .mdl-padded-l-6 { padding-left: 6rem; }
    .mdl-padded-r-6 { padding-right: 6rem; }

    .mdl-padded-t-7 { padding-top: 7rem; }
    .mdl-padded-b-7 { padding-bottom: 7rem; }
    .mdl-padded-l-7 { padding-left: 7rem; }
    .mdl-padded-r-7 { padding-right: 7rem; }

    .mdl-padded-t-8 { padding-top: 8rem; }
    .mdl-padded-b-8 { padding-bottom: 8rem; }
    .mdl-padded-l-8 { padding-left: 8rem; }
    .mdl-padded-r-8 { padding-right: 8rem; }

    .mdl-padded-t-9 { padding-top: 9rem; }
    .mdl-padded-b-9 { padding-bottom: 9rem; }
    .mdl-padded-l-9 { padding-left: 9rem; }
    .mdl-padded-r-9 { padding-right: 9rem; }

    .mdl-padded-t-10 { padding-top: 10rem; }
    .mdl-padded-b-10 { padding-bottom: 10rem; }
    .mdl-padded-l-10 { padding-left: 10rem; }
    .mdl-padded-r-10 { padding-right: 10rem; }

    .mdl-padded-t-11 { padding-top: 11rem; }
    .mdl-padded-b-11 { padding-bottom: 11rem; }
    .mdl-padded-l-11 { padding-left: 11rem; }
    .mdl-padded-r-11 { padding-right: 11rem; }

    .mdl-padded-t-12 { padding-top: 12rem; }
    .mdl-padded-b-12 { padding-bottom: 12rem; }
    .mdl-padded-l-12 { padding-left: 12rem; }
    .mdl-padded-r-12 { padding-right: 12rem; }

    .mdl-padded-t-13 { padding-top: 13rem; }
    .mdl-padded-b-13 { padding-bottom: 13rem; }
    .mdl-padded-l-13 { padding-left: 13rem; }
    .mdl-padded-r-13 { padding-right: 13rem; }

    .mdl-padded-t-14 { padding-top: 14rem; }
    .mdl-padded-b-14 { padding-bottom: 14rem; }
    .mdl-padded-l-14 { padding-left: 14rem; }
    .mdl-padded-r-14 { padding-right: 14rem; }

    .mdl-padded-t-15 { padding-top: 15rem; }
    .mdl-padded-b-15 { padding-bottom: 15rem; }
    .mdl-padded-l-15 { padding-left: 15rem; }
    .mdl-padded-r-15 { padding-right: 15rem; }

    .mdl-padded-t-16 { padding-top: 16rem; }
    .mdl-padded-b-16 { padding-bottom: 16rem; }
    .mdl-padded-l-16 { padding-left: 16rem; }
    .mdl-padded-r-16 { padding-right: 16rem; }

    .mdl-padded-t-17 { padding-top: 17rem; }
    .mdl-padded-b-17 { padding-bottom: 17rem; }
    .mdl-padded-l-17 { padding-left: 17rem; }
    .mdl-padded-r-17 { padding-right: 17rem; }

    .mdl-padded-t-18 { padding-top: 18rem; }
    .mdl-padded-b-18 { padding-bottom: 18rem; }
    .mdl-padded-l-18 { padding-left: 18rem; }
    .mdl-padded-r-18 { padding-right: 18rem; }

    .mdl-padded-t-19 { padding-top: 19rem; }
    .mdl-padded-b-19 { padding-bottom: 19rem; }
    .mdl-padded-l-19 { padding-left: 19rem; }
    .mdl-padded-r-19 { padding-right: 19rem; }

    .mdl-padded-t-20 { padding-top: 20rem; }
    .mdl-padded-b-20 { padding-bottom: 20rem; }
    .mdl-padded-l-20 { padding-left: 20rem; }
    .mdl-padded-r-20 { padding-right: 20rem; }

   

    .mdl-margin-t-0 { margin-top: 0;    }
    .mdl-margin-b-0 { margin-bottom: 0; }
    .mdl-margin-l-0 { margin-left: 0;   }
    .mdl-margin-r-0 { margin-right: 0;  }

    .mdl-margin-t-1 { margin-top: 1rem;    }
    .mdl-margin-b-1 { margin-bottom: 1rem; }
    .mdl-margin-l-1 { margin-left: 1rem;   }
    .mdl-margin-r-1 { margin-right: 1rem;  }

    .mdl-margin-t-2 { margin-top: 2rem;    }
    .mdl-margin-b-2 { margin-bottom: 2rem; }
    .mdl-margin-l-2 { margin-left: 2rem;  }
    .mdl-margin-r-2 { margin-right: 2rem;  }

    .big-text { font-size: 6vw; }

    .position-img-1 {
        background-color: #6B705C;
        position: relative;
        right: -4rem;
    }

    .title-oversized {
        font-size: 6vw;
    }

    .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p {
        font-size: 1.1vw !important;
    }

    .privacy-policy a {
        font-size: 1.1vw !important;
    }


}

/* ------- MD Media Query (64em / 1024px) --------------- */
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */

@media (max-width: 64em) {
    /* body {
        border: 2px solid green;
    } */

    header nav a {
        padding-right: 1.5rem;
    }

    header a {
        padding: 0.5rem 0.5rem;
        font-size: 1.8vw;
    }

    header h2 {
        font-size: 4.8vw;
    }

    h1 {
        font-size: 2.5vw;
    }


    h2 {
        font-size: 3.1vw;
    }

    h3 {
        font-size: 3.1vw;
    }
    
    h4 {
        font-size: 3vw;
    }

    header p {
        font-size: 3.8vw;
    }
    
    footer h2 {
        font-size: 3rem;
        margin-bottom: 0;
    }

    footer nav a {
        padding: 0.15rem;
        font-size: 2vw;
    }

    footer a {
        font-size: 2vw;
    }

    footer .fab {
        font-size: 2rem;
    }

    p {
        font-size: 1.8vw;
    }

    ul { 
        font-size: 1.8vw;
    }

    .show-md { display: block; }
    .hide-md { display: none;  }
   
    .md-tall-10  { min-height: 10vh; }
    .md-tall-20  { min-height: 20vh; }
    .md-tall-30  { min-height: 30vh; }
    .md-tall-40  { min-height: 40vh; }
    .md-tall-50  { min-height: 50vh; }
    .md-tall-60  { min-height: 60vh; }
    .md-tall-70  { min-height: 70vh; }
    .md-tall-80  { min-height: 80vh; }
    .md-tall-90  { min-height: 90vh; }
    .md-tall-100 { min-height: 100vh; }
    .md-tall-110 { min-height: 110vh; }
    .md-tall-120 { min-height: 120vh; }
    .md-tall-130 { min-height: 130vh; }
    .md-tall-140 { min-height: 140vh; }
    .md-tall-150 { min-height: 150vh; }
    .md-tall-160 { min-height: 160vh; }
    .md-tall-170 { min-height: 170vh; }
    .md-tall-180 { min-height: 180vh; }
    .md-tall-190 { min-height: 190vh; }
    .md-tall-200 { min-height: 200vh; }
    .md-tall-210 { min-height: 210vh; }
    .md-tall-220 { min-height: 220vh; }
    .md-tall-230 { min-height: 230vh; }
    .md-tall-240 { min-height: 240vh; }
    .md-tall-250 { min-height: 250vh; }
    .md-tall-260 { min-height: 260vh; }
    .md-tall-270 { min-height: 270vh; }
    .md-tall-280 { min-height: 280vh; }
    .md-tall-290 { min-height: 290vh; }
    .md-tall-300 { min-height: 300vh; }

    
    .md-text-center { text-align: center; }
    .md-text-left   {text-align: left;    }
    .md-text-right  {text-align: right;   }
    
    .md-padded-0  { padding: 0rem;     }
    .md-padded-05 { padding: 0.5rem;   }
    .md-padded-1  { padding: 1rem;     }
    .md-padded-2  { padding: 2rem;     }
    .md-padded-3  { padding: 3rem;     }
    .md-padded-4  { padding: 4rem;     }
    .md-padded-5  { padding: 5rem;     }
    .md-padded-6  { padding: 6rem;     }
    .md-padded-7  { padding: 7rem;     }
    .md-padded-8  { padding: 8rem;     }
    .md-padded-9  { padding: 9rem;     }
    .md-padded-10 { padding: 10rem;    }
    
    .md-padded-t-0 { padding-top: 0; }
    .md-padded-b-0 { padding-bottom: 0; }
    .md-padded-l-0 { padding-left: 0; }
    .md-padded-r-0 { padding-right: 0; }

    .md-padded-t-1 { padding-top: 1rem; }
    .md-padded-b-1 { padding-bottom: 1rem; }
    .md-padded-l-1 { padding-left: 1rem; }
    .md-padded-r-1 { padding-right: 1rem; }

    .md-padded-t-2 { padding-top: 2rem; }
    .md-padded-b-2 { padding-bottom: 2rem; }
    .md-padded-l-2 { padding-left: 2rem; }
    .md-padded-r-2 { padding-right: 2rem; }

    .md-padded-t-3 { padding-top: 3rem; }
    .md-padded-b-3 { padding-bottom: 3rem; }
    .md-padded-l-3 { padding-left: 3rem; }
    .md-padded-r-3 { padding-right: 3rem; }

    .md-padded-t-4 { padding-top: 4rem; }
    .md-padded-b-4 { padding-bottom: 4rem; }
    .md-padded-l-4 { padding-left: 4rem; }
    .md-padded-r-4 { padding-right: 4rem; }

    .md-padded-t-5 { padding-top: 5rem; }
    .md-padded-b-5 { padding-bottom: 5rem; }
    .md-padded-l-5 { padding-left: 5rem; }
    .md-padded-r-5 { padding-right: 5rem; }

    .md-padded-t-6 { padding-top: 6rem; }
    .md-padded-b-6 { padding-bottom: 6rem; }
    .md-padded-l-6 { padding-left: 6rem; }
    .md-padded-r-6 { padding-right: 6rem; }

    .md-padded-t-7 { padding-top: 7rem; }
    .md-padded-b-7 { padding-bottom: 7rem; }
    .md-padded-l-7 { padding-left: 7rem; }
    .md-padded-r-7 { padding-right: 7rem; }

    .md-padded-t-8 { padding-top: 8rem; }
    .md-padded-b-8 { padding-bottom: 8rem; }
    .md-padded-l-8 { padding-left: 8rem; }
    .md-padded-r-8 { padding-right: 8rem; }

    .md-padded-t-9 { padding-top: 9rem; }
    .md-padded-b-9 { padding-bottom: 9rem; }
    .md-padded-l-9 { padding-left: 9rem; }
    .md-padded-r-9 { padding-right: 9rem; }

    .md-padded-t-10 { padding-top: 10rem; }
    .md-padded-b-10 { padding-bottom: 10rem; }
    .md-padded-l-10 { padding-left: 10rem; }
    .md-padded-r-10 { padding-right: 10rem; }

    .md-padded-t-11 { padding-top: 11rem; }
    .md-padded-b-11 { padding-bottom: 11rem; }
    .md-padded-l-11 { padding-left: 11rem; }
    .md-padded-r-11 { padding-right: 11rem; }

    .md-padded-t-12 { padding-top: 12rem; }
    .md-padded-b-12 { padding-bottom: 12rem; }
    .md-padded-l-12 { padding-left: 12rem; }
    .md-padded-r-12 { padding-right: 12rem; }

    .md-padded-t-13 { padding-top: 13rem; }
    .md-padded-b-13 { padding-bottom: 13rem; }
    .md-padded-l-13 { padding-left: 13rem; }
    .md-padded-r-13 { padding-right: 13rem; }

    .md-padded-t-14 { padding-top: 14rem; }
    .md-padded-b-14 { padding-bottom: 14rem; }
    .md-padded-l-14 { padding-left: 14rem; }
    .md-padded-r-14 { padding-right: 14rem; }

    .md-padded-t-15 { padding-top: 15rem; }
    .md-padded-b-15 { padding-bottom: 15rem; }
    .md-padded-l-15 { padding-left: 15rem; }
    .md-padded-r-15 { padding-right: 15rem; }

    .md-padded-t-16 { padding-top: 16rem; }
    .md-padded-b-16 { padding-bottom: 16rem; }
    .md-padded-l-16 { padding-left: 16rem; }
    .md-padded-r-16 { padding-right: 16rem; }

    .md-padded-t-17 { padding-top: 17rem; }
    .md-padded-b-17 { padding-bottom: 17rem; }
    .md-padded-l-17 { padding-left: 17rem; }
    .md-padded-r-17 { padding-right: 17rem; }

    .md-padded-t-18 { padding-top: 18rem; }
    .md-padded-b-18 { padding-bottom: 18rem; }
    .md-padded-l-18 { padding-left: 18rem; }
    .md-padded-r-18 { padding-right: 18rem; }

    .md-padded-t-19 { padding-top: 19rem; }
    .md-padded-b-19 { padding-bottom: 19rem; }
    .md-padded-l-19 { padding-left: 19rem; }
    .md-padded-r-19 { padding-right: 19rem; }

    .md-padded-t-20 { padding-top: 20rem; }
    .md-padded-b-20 { padding-bottom: 20rem; }
    .md-padded-l-20 { padding-left: 20rem; }
    .md-padded-r-20 { padding-right: 20rem; }


    .md-padded-t-1-05   { padding-top: 1.5rem;    }
    .md-padded-b-1-05   { padding-bottom: 1.5rem; }
    .md-padded-l-1-05   { padding-left: 1.5rem;   }
    .md-padded-r-1-05   { padding-right: 1.5rem;  }

    .md-padded-t-2 { padding-top: 2rem;    }
    .md-padded-b-2 { padding-bottom: 2rem; }
    .md-padded-l-2 { padding-left: 2rem;   }
    .md-padded-r-2 { padding-right: 2rem;  }

    .md-padded-t-2-05   { padding-top: 2.5rem;    }
    .md-padded-b-2-05   { padding-bottom: 2.5rem; }
    .md-padded-l-2-05   { padding-left: 2.5rem;   }
    .md-padded-r-2-05   { padding-right: 2.5rem;  }

    .md-padded-t-3 { padding-top: 3rem;    }
    .md-padded-b-3 { padding-bottom: 3rem; }
    .md-padded-l-3 { padding-left: 3rem;   }
    .md-padded-r-3 { padding-right: 3rem;  }

    .md-padded-t-4 { padding-top: 4rem;    }
    .md-padded-b-4 { padding-bottom: 4rem; }
    .md-padded-l-4 { padding-left: 4rem;   }
    .md-padded-r-4 { padding-right: 4rem;  }

    .md-padded-t-5 { padding-top: 5rem;    }
    .md-padded-b-5 { padding-bottom: 5rem; }
    .md-padded-l-5 { padding-left: 5rem;   }
    .md-padded-r-5 { padding-right: 5rem;  }

    .md-padded-t-6 { padding-top: 6rem;    }
    .md-padded-b-6 { padding-bottom: 6rem; }
    .md-padded-l-6 { padding-left: 6rem;   }
    .md-padded-r-6 { padding-right: 6rem;  }

    .md-padded-t-7 { padding-top: 7rem;    }
    .md-padded-b-7 { padding-bottom: 7rem; }
    .md-padded-l-7 { padding-left: 7rem;   }
    .md-padded-r-7 { padding-right: 7rem;  }

    .md-padded-t-8 { padding-top: 8rem;    }
    .md-padded-b-8 { padding-bottom: 8rem; }
    .md-padded-l-8 { padding-left: 8rem;   }
    .md-padded-r-8 { padding-right: 8rem;  }

    .md-padded-t-9 { padding-top: 9rem;    }
    .md-padded-b-9 { padding-bottom: 9rem; }
    .md-padded-l-9 { padding-left: 9rem;   }
    .md-padded-r-9 { padding-right: 9rem;  }

    .md-padded-t-10 { padding-top: 10rem;    }
    .md-padded-b-10 { padding-bottom: 10rem; }
    .md-padded-l-10 { padding-left: 10rem;   }
    .md-padded-r-10 { padding-right: 10rem;  }

    .md-margin-t-0 { margin-top: 0;    }
    .md-margin-b-0 { margin-bottom: 0; }
    .md-margin-l-0 { margin-left: 0;   }
    .md-margin-r-0 { margin-right: 0;  }

    .md-margin-t-1 { margin-top: 1rem;    }
    .md-margin-b-1 { margin-bottom: 1rem; }
    .md-margin-l-1 { margin-left: 1rem;   }
    .md-margin-r-1 { margin-right: 1rem;  }

    .md-margin-t-2 { margin-top: 2rem;    }
    .md-margin-b-2 { margin-bottom: 2rem; }
    .md-margin-l-2 { margin-left: 2rem;  }
    .md-margin-r-2 { margin-right: 2rem;  }

    .md-margin-t-3 { margin-top: 3rem;    }
    .md-margin-b-3 { margin-bottom: 3rem; }
    .md-margin-l-3 { margin-left: 3rem;  }
    .md-margin-r-3 { margin-right: 3rem;  }

    .md-margin-t-4 { margin-top: 4rem;    }
    .md-margin-b-4 { margin-bottom: 4rem; }
    .md-margin-l-4 { margin-left: 4rem;  }        
    .md-margin-r-4 { margin-right: 4rem;  }

    .md-margin-t-5 { margin-top: 5rem;    }
    .md-margin-b-5 { margin-bottom: 5rem; }
    .md-margin-l-5 { margin-left: 5rem;  }
    .md-margin-r-5 { margin-right: 5rem;  }

    .title-header-index-caption {
        font-size: 2.5vw;
    }

    .bg-about-us {
        background-position: 50% 30%;
        background-size: cover;
        border-radius: 20rem 20rem 0rem 0rem;
        /* opacity: 0.8; */
    }


    .bg-aanbod {
        background-position: 50% 34%;
        background-size: cover;
        border-radius:20rem 20rem 0rem 0rem;
    }
    
    .bg-portfolio {
        background-position: 50% 50%;
        border-radius: 20rem 20rem 0rem 0rem;
    }
    
    .md-bg-white {
        background-color: rgba(247, 240, 240, 0.8);
        padding: 1rem;
    }

    .big-text { font-size: 6vw; }

    .footer-title {
        font-size: 2.5vw;
        font-weight: 500;
        letter-spacing: -0.06rem;
    }

    .footer-text {
        font-size:2vw;
    }

    .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p {
        font-size: 1.8vw !important;
    }

    .privacy-policy a {
        font-size: 1.8vw !important;
    }

    .project-index-slider:hover .project-box,
    .project-index-slider:hover .project-box:not(:hover),
    .project-box {
        filter: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    
}


/* ------- SM Media Query (48em / 768px) --------------- */
/* - Styles added here will apply at devices smaller than 768px, or zoomed in equivalent */

@media (max-width: 48em) {
    html {
        font-size: 14px;
    }

    body {
        /* border: 2px solid blue; */
        padding: 0.5rem;
    }

    header h2 {
        font-size: 5.2vw;
    }

    h1 {
        font-size: 3.1vw;
    }

    h3 {
        font-size: 3.8vw;
    }

    h4 {
        font-size: 3.5vw;
    }

    header p {
        font-size: 3.8vw;
    }

    p {
        font-size: 2vw;
    }

    ul { 
        font-size: 2vw;
    }

    header a {
        font-size:2.6vw
    }

    footer a {
        font-size:2.6vw
    }

    footer nav a {
        font-size: 2vw
    }

    a {
        font-size: 2.5vw;
    }

    .show-sm { display: block; }
    .hide-sm { display: none;  }
    
    .sm-tall-10  { min-height: 10vh; }
    .sm-tall-20  { min-height: 20vh; }
    .sm-tall-30  { min-height: 30vh; }
    .sm-tall-40  { min-height: 40vh; }
    .sm-tall-50  { min-height: 50vh; }
    .sm-tall-60  { min-height: 60vh; }
    .sm-tall-70  { min-height: 70vh; }
    .sm-tall-80  { min-height: 80vh; }
    .sm-tall-90  { min-height: 90vh; }
    .sm-tall-100 { min-height: 100vh; }
    .sm-tall-110 { min-height: 110vh; }
    .sm-tall-120 { min-height: 120vh; }
    .sm-tall-130 { min-height: 130vh; }
    .sm-tall-140 { min-height: 140vh; }
    .sm-tall-150 { min-height: 150vh; }
    .sm-tall-160 { min-height: 160vh; }
    .sm-tall-170 { min-height: 170vh; }
    .sm-tall-180 { min-height: 180vh; }
    .sm-tall-190 { min-height: 190vh; }
    .sm-tall-200 { min-height: 200vh; }
    .sm-tall-210 { min-height: 210vh; }
    .sm-tall-220 { min-height: 220vh; }
    .sm-tall-230 { min-height: 230vh; }
    .sm-tall-240 { min-height: 240vh; }
    .sm-tall-250 { min-height: 250vh; }
    .sm-tall-260 { min-height: 260vh; }
    .sm-tall-270 { min-height: 270vh; }
    .sm-tall-280 { min-height: 280vh; }
    .sm-tall-290 { min-height: 290vh; }
    .sm-tall-300 { min-height: 300vh; }

    .sm-width-20 { max-width: 20vw;}
    .sm-width-40 { max-width: 40vw;}
    .sm-width-60 { max-width: 60vw;}
    .sm-width-80 { max-width: 80vw;}
    
    .sm-text-center { text-align: center; }
    .sm-text-left   { text-align: left  ; }
    .sm-text-right  { text-align: right;  }

    .sm-padded-0  { padding: 0rem !important;     }
    .sm-padded-05 { padding: 0.5rem; }
    .sm-padded-1  { padding: 1rem;   }
    .sm-padded-2  { padding: 2rem;     }
    .sm-padded-3  { padding: 3rem;     }
    .sm-padded-4  { padding: 4rem;     }
    .sm-padded-5  { padding: 5rem;     }
    .sm-padded-6  { padding: 6rem;     }
    .sm-padded-7  { padding: 7rem;     }
    .sm-padded-8  { padding: 8rem;     }
    .sm-padded-9  { padding: 9rem;     }
    .sm-padded-10 { padding: 10rem;    }

    .sm-padded-t-0 { padding-top: 0;    }
    .sm-padded-b-0 { padding-bottom: 0; }
    .sm-padded-l-0 { padding-left: 0;   }
    .sm-padded-r-0 { padding-right: 0;  }

    .sm-padded-t-1 { padding-top: 1rem;    }
    .sm-padded-b-1 { padding-bottom: 1rem; }
    .sm-padded-l-1 { padding-left: 1rem;   }
    .sm-padded-r-1 { padding-right: 1rem;  }

    .sm-padded-t-2 { padding-top: 2rem;    }
    .sm-padded-b-2 { padding-bottom: 2rem; }
    .sm-padded-l-2 { padding-left: 2rem;   }
    .sm-padded-r-2 { padding-right: 2rem;  }

    .sm-padded-t-3 { padding-top: 3rem;    }  
    .sm-padded-b-3 { padding-bottom: 3rem; }
    .sm-padded-l-3 { padding-left: 3rem;   }
    .sm-padded-r-3 { padding-right: 3rem;  }

    .sm-padded-t-3-05   { padding-top: 3.5rem;    }
    .sm-padded-b-3-05   { padding-bottom: 3.5rem; }
    .sm-padded-l-3-05   { padding-left: 3.5rem;   }
    .sm-padded-r-3-05   { padding-right: 3.5rem;  }

    .sm-padded-t-4 { padding-top: 4rem;    }
    .sm-padded-b-4 { padding-bottom: 4rem; }
    .sm-padded-l-4 { padding-left: 4rem;   }
    .sm-padded-r-4 { padding-right: 4rem;  }

    .sm-padded-t-4-05   { padding-top: 4.5rem;    }
    .sm-padded-b-4-05   { padding-bottom: 4.5rem; }
    .sm-padded-l-4-05   { padding-left: 4.5rem;   }
    .sm-padded-r-4-05   { padding-right: 4.5rem;  } 

    .sm-padded-t-5 { padding-top: 5rem;    }
    .sm-padded-b-5 { padding-bottom: 5rem; }
    .sm-padded-l-5 { padding-left: 5rem;   }
    .sm-padded-r-5 { padding-right: 5rem;  }

    .sm-padded-t-6 { padding-top: 6rem;    }
    .sm-padded-b-6 { padding-bottom: 6rem; }
    .sm-padded-l-6 { padding-left: 6rem;   }
    .sm-padded-r-6 { padding-right: 6rem;  }

    .sm-padded-t-7 { padding-top: 7rem;    }
    .sm-padded-b-7 { padding-bottom: 7rem; }
    .sm-padded-l-7 { padding-left: 7rem;   }
    .sm-padded-r-7 { padding-right: 7rem;  }

    .sm-padded-t-8 { padding-top: 8rem;    }
    .sm-padded-b-8 { padding-bottom: 8rem; }
    .sm-padded-l-8 { padding-left: 8rem;   }
    .sm-padded-r-8 { padding-right: 8rem;  }

    .sm-padded-t-9 { padding-top: 9rem;    }
    .sm-padded-b-9 { padding-bottom: 9rem; }
    .sm-padded-l-9 { padding-left: 9rem;   }
    .sm-padded-r-9 { padding-right: 9rem;  }

    .sm-padded-t-10 { padding-top: 10rem;    }
    .sm-padded-b-10 { padding-bottom: 10rem; }
    .sm-padded-l-10 { padding-left: 10rem;   }
    .sm-padded-r-10 { padding-right: 10rem;  }

    .sm-padded-t-11 { padding-top: 11rem;    }
    .sm-padded-b-11 { padding-bottom: 11rem; }
    .sm-padded-l-11 { padding-left: 11rem;   }
    .sm-padded-r-11 { padding-right: 11rem;  }

    .sm-padded-t-12 { padding-top: 12rem;    }
    .sm-padded-b-12 { padding-bottom: 12rem; }
    .sm-padded-l-12 { padding-left: 12rem;   }
    .sm-padded-r-12 { padding-right: 12rem;  }

    .sm-padded-t-13 { padding-top: 13rem; }
    .sm-padded-b-13 { padding-bottom: 13rem; }
    .sm-padded-l-13 { padding-left: 13rem; }
    .sm-padded-r-13 { padding-right: 13rem; }

    .sm-padded-t-14 { padding-top: 14rem; }
    .sm-padded-b-14 { padding-bottom: 14rem; }
    .sm-padded-l-14 { padding-left: 14rem; }
    .sm-padded-r-14 { padding-right: 14rem; }

    .sm-padded-t-15 { padding-top: 15rem; }
    .sm-padded-b-15 { padding-bottom: 15rem; }
    .sm-padded-l-15 { padding-left: 15rem; }
    .sm-padded-r-15 { padding-right: 15rem; }

    .sm-padded-t-16 { padding-top: 16rem; }
    .sm-padded-b-16 { padding-bottom: 16rem; }
    .sm-padded-l-16 { padding-left: 16rem; }
    .sm-padded-r-16 { padding-right: 16rem; }

    .sm-padded-t-17 { padding-top: 17rem; }
    .sm-padded-b-17 { padding-bottom: 17rem; }
    .sm-padded-l-17 { padding-left: 17rem; }
    .sm-padded-r-17 { padding-right: 17rem; }

    .sm-padded-t-18 { padding-top: 18rem; }
    .sm-padded-b-18 { padding-bottom: 18rem; }
    .sm-padded-l-18 { padding-left: 18rem; }
    .sm-padded-r-18 { padding-right: 18rem; }

    .sm-padded-t-19 { padding-top: 19rem; }
    .sm-padded-b-19 { padding-bottom: 19rem; }
    .sm-padded-l-19 { padding-left: 19rem; }
    .sm-padded-r-19 { padding-right: 19rem; }

    .sm-padded-t-20 { padding-top: 20rem; }
    .sm-padded-b-20 { padding-bottom: 20rem; }
    .sm-padded-l-20 { padding-left: 20rem; }
    .sm-padded-r-20 { padding-right: 20rem; }

    .sm-margin-t-0 { margin-top: 0;    }
    .sm-margin-b-0 { margin-bottom: 0; }
    .sm-margin-l-0 { margin-left: 0;   }
    .sm-margin-r-0 { margin-right: 0;  }

    .sm-margin-t-1 { margin-top: 1rem;    }
    .sm-margin-b-1 { margin-bottom: 1rem; }
    .sm-margin-l-1 { margin-left: 1rem;   }
    .sm-margin-r-1 { margin-right: 1rem;  }
    .sm-margin-t-2 { margin-top: 2rem;    }
    .sm-margin-b-2 { margin-bottom: 2rem; }
    .sm-margin-l-2 { margin-left: 2rem;  }
    .sm-margin-r-2 { margin-right: 2rem;  }
    

    .slick-dots { bottom: -40px; }
    .hover-overlay { padding-bottom: 50%; }
  
    .title-header-index {
        font-size: 5vw;
    }

    .title-header-index-caption {
        font-size: 3.1vw;
    }
  
    /* Header & footer  */
    .logo { font-size: 3rem; }

    /* call to action */
    .email-signup input {
        max-width: 400px;
    }
    .medium-text {
        font-size: 4vw;
    }
    .quote-icon {
        font-size: 4rem;
    }

    .sm-banner {
        background-image: url('/images/essentie-gelaat-dermatech-pen-1.png');
        background-size: cover;
        background-position: -10% 50%;
        background-repeat: no-repeat;
        min-height:60vh;
    }

    .bg-slate-200 {
        --tw-bg-opacity: 0.8;
        background-color: rgb(240 240 240 / var(--tw-bg-opacity));
    }

    .tab label {
        position: relative;
        display: block;
        padding: .5rem .5rem .5rem 3rem;
        margin: 0;
        line-height: 1.8;
        cursor: pointer;
        font-size: 1.2rem;
        font-weight: 300;
    }

    .tab label span {
        display: block;
        float: none;
        line-height: 1.2rem;
        opacity: .9;
    }

    .icon {
        font-size: 1.5rem;
        padding-bottom: 1rem;
    }

    .footer-title {
        font-size: 3vw;
        font-weight: 500;
        letter-spacing: -0.06rem;
    }

    .footer-text {
        font-size:2vw
    }

    #close-cookie-banner {
        font-size: 2.2vw;
    }

    .project-index-slider {
        padding: 2% 0%; 
    }

    .review-slider {
        padding: 2% 0%;
    }

}

/* ------- Accordion Media Query (/ 640px) --------------- */

@media (min-width: 640px) {
    .sm\:text-columns-2 {
      columns: 2;
    }
  }

/* ------- XS Media Query (36em / 576px) --------------- */
/* Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */

@media (max-width: 36em) {
    body {
        /* border: 2px solid orange; */
        padding: 0.5rem;
    }

    header a {
        display: block;
        margin-bottom: 0;
        font-size: 2.8vw;
    }
    
    header nav a {
        padding-right: 1.5rem;
        padding-right: 0;
        font-size: 4vw;
    }

    a {
        font-size: 3.2vw;
    }

    header h2 { 
        font-size: 7vw;
    }

    h1 {
        font-size: 6.3; 
    }

    h2 {
        font-size: 5vw; 
    }

    h3 {
        font-size: 5vw;
    }

    h4 {
        font-size: 4.5vw;
    }

    p {
        font-size: 2.8vw;
    }

    ul { 
        font-size: 2.8vw;
    }

    footer a { 
        font-size: 3vw;
    }

    footer nav a {
        padding-right: 1.5rem;
        padding-right: 0;
        font-size: 3vw;
    }
    
    footer span { 
        font-weight: 200;
    }

    .show-xs { display: block; }
    .hide-xs { display: none; }

    .xs-tall-10  { min-height: 10vh; }
    .xs-tall-20  { min-height: 20vh; }
    .xs-tall-30  { min-height: 30vh; }
    .xs-tall-40  { min-height: 40vh; }
    .xs-tall-50  { min-height: 50vh; }
    .xs-tall-60  { min-height: 60vh; }
    .xs-tall-70  { min-height: 70vh; }
    .xs-tall-80  { min-height: 80vh; }
    .xs-tall-90  { min-height: 90vh; }
    .xs-tall-100 { min-height: 100vh; }

    .xs-tall-110 { min-height: 110vh; }
    .xs-tall-120 { min-height: 120vh; }
    .xs-tall-130 { min-height: 130vh; }
    .xs-tall-140 { min-height: 140vh; }
    .xs-tall-150 { min-height: 150vh; }
    .xs-tall-160 { min-height: 160vh; }
    .xs-tall-170 { min-height: 170vh; }
    .xs-tall-180 { min-height: 180vh; }
    .xs-tall-190 { min-height: 190vh; }
    .xs-tall-200 { min-height: 200vh; }

    .xs-tall-210 { min-height: 210vh; }
    .xs-tall-220 { min-height: 220vh; }
    .xs-tall-230 { min-height: 230vh; }
    .xs-tall-240 { min-height: 240vh; }
    .xs-tall-250 { min-height: 250vh; }
    .xs-tall-260 { min-height: 260vh; }
    .xs-tall-270 { min-height: 270vh; }
    .xs-tall-280 { min-height: 280vh; }
    .xs-tall-290 { min-height: 290vh; }
    .xs-tall-300 { min-height: 300vh; }

    .xs-tall-max-10  { max-height: 10vh; }
    .xs-tall-max-20  { max-height: 20vh; }
    .xs-tall-max-30  { max-height: 30vh; }
    .xs-tall-max-40  { max-height: 40vh; }
    .xs-tall-max-50  { max-height: 50vh; }
    .xs-tall-max-60  { max-height: 60vh; }
    .xs-tall-max-70  { max-height: 70vh; }
    .xs-tall-max-80  { max-height: 80vh; }
    .xs-tall-max-90  { max-height: 90vh; }
    .xs-tall-max-100 { max-height: 100vh;}

    .xs-height-10 { max-height: 10vh;}
    .xs-height-20 { max-height: 20vh;}
    .xs-height-40 { max-height: 40vh;}
    .xs-height-60 { max-height: 60vh;}
    .xs-height-80 { max-height: 80vh;} 

    .small-text  { font-size: 2.5vh; }
    .medium-text { font-size: 3vh;   }
    .big-text    { font-size: 6vh;   }

    .xs-text-center { text-align: center; }
    .xs-text-left   { text-align: left;   }
    .xs-text-right  { text-align: right;  }

    .xs-padded-0  { padding: 0;     }
    .xs-padded-05 { padding: 0.5rem; }
    .xs-padded-1  { padding: 1rem;   }
    .xs-padded-2  { padding: 2rem;     }
    .xs-padded-3  { padding: 3rem;     }
    .xs-padded-4  { padding: 4rem;     }
    .xs-padded-5  { padding: 5rem;     }
    .xs-padded-6  { padding: 6rem;     }
    .xs-padded-7  { padding: 7rem;     }
    .xs-padded-8  { padding: 8rem;     }
    .xs-padded-9  { padding: 9rem;     }
    .xs-padded-10 { padding: 10rem;    }

    .xs-padded-t-0 { padding-top: 0;    }
    .xs-padded-b-0 { padding-bottom: 0; }
    .xs-padded-l-0 { padding-left: 0;   }
    .xs-padded-r-0 { padding-right: 0;  }

    .xs-padded-t-0-5 { padding-top: 0.5rem;  }
    .xs-padded-b-0-5 { padding-bottom: 0.5rem; }
    .xs-padded-l-0-5 { padding-left: 0.5rem;   }
    .xs-padded-r-0-5 { padding-right: 0.5rem;  }

    .xs-padded-t-1 { padding-top: 1rem;    }
    .xs-padded-b-1 { padding-bottom: 1rem; }
    .xs-padded-l-1 { padding-left: 1rem;   }
    .xs-padded-r-1 { padding-right: 1rem;  }

    .xs-padded-t-2 { padding-top: 2rem;    }
    .xs-padded-b-2 { padding-bottom: 2rem; }
    .xs-padded-l-2 { padding-left: 2rem;   }
    .xs-padded-r-2 { padding-right: 2rem;  }

    .xs-padded-t-3 { padding-top: 3rem;    }
    .xs-padded-b-3 { padding-bottom: 3rem; }
    .xs-padded-l-3 { padding-left: 3rem;   }
    .xs-padded-r-3 { padding-right: 3rem;  }

    .xs-padded-t-4 { padding-top: 4rem;    }
    .xs-padded-b-4 { padding-bottom: 4rem; }
    .xs-padded-l-4 { padding-left: 4rem;   }
    .xs-padded-r-4 { padding-right: 4rem;  }
    
    .xs-padded-t-5 { padding-top: 5rem;    }
    .xs-padded-b-5 { padding-bottom: 5rem; }
    .xs-padded-l-5 { padding-left: 5rem;   }
    .xs-padded-r-5 { padding-right: 5rem;  }

    .xs-padded-t-6 { padding-top: 6rem;    }
    .xs-padded-b-6 { padding-bottom: 6rem; }
    .xs-padded-l-6 { padding-left: 6rem;   }
    .xs-padded-r-6 { padding-right: 6rem;  }
    
    .xs-padded-t-7 { padding-top: 7rem;    }
    .xs-padded-b-7 { padding-bottom: 7rem; }
    .xs-padded-l-7 { padding-left: 7rem;   }
    .xs-padded-r-7 { padding-right: 7rem;  }
    
    .xs-padded-t-8 { padding-top: 8rem;    }
    .xs-padded-b-8 { padding-bottom: 8rem; }
    .xs-padded-l-8 { padding-left: 8rem;   }
    .xs-padded-r-8 { padding-right: 8rem;  }
    
    .xs-padded-t-9 { padding-top: 9rem;    }
    .xs-padded-b-9 { padding-bottom: 9rem; }
    .xs-padded-l-9 { padding-left: 9rem;   }
    .xs-padded-r-9 { padding-right: 9rem;  }
    
    .xs-padded-t-10 { padding-top: 10rem;    }
    .xs-padded-b-10 { padding-bottom: 10rem; }
    .xs-padded-l-10 { padding-left: 10rem;   }
    .xs-padded-r-10 { padding-right: 10rem;  }
    
    .xs-margin-0 { margin: 0;    }

    .xs-margin-05 { margin: 0.5rem; }
    .xs-margin-1  { margin: 1rem;   }
    .xs-margin-2  { margin: 2rem;     }
    .xs-margin-5  { margin: 5rem;     }
    .xs-margin-10 { margin: 10rem;    }

    .xs-margin-t-1 { margin-top: 1rem;    }
    .xs-margin-b-1 { margin-bottom: 1rem; } 
    .xs-margin-l-1 { margin-left: 1rem;   }
    .xs-margin-r-1 { margin-right: 1rem;  }

    .xs-margin-t-2 { margin-top: 2rem;    }
    .xs-margin-b-2 { margin-bottom: 2rem; }
    .xs-margin-l-2 { margin-left: 2rem;   }
    .xs-margin-r-2 { margin-right: 2rem;  }

    .xs-margin-t-3 { margin-top: 3rem;    }
    .xs-margin-b-3 { margin-bottom: 3rem; }
    .xs-margin-l-3 { margin-left: 3rem;   }
    .xs-margin-r-3 { margin-right: 3rem;  }

    .xs-margin-t-4 { margin-top: 4rem;    }
    .xs-margin-b-4 { margin-bottom: 4rem; }
    .xs-margin-l-4 { margin-left: 4rem;   }
    .xs-margin-r-4 { margin-right: 4rem;  }

    .xs-margin-t-5 { margin-top: 5rem;    }
    .xs-margin-b-5 { margin-bottom: 5rem; }
    .xs-margin-l-5 { margin-left: 5rem;   }
    .xs-margin-r-5 { margin-right: 5rem;  }

    .xs-margin-t-6 { margin-top: 6rem;    }
    .xs-margin-b-6 { margin-bottom: 6rem; }
    .xs-margin-l-6 { margin-left: 6rem;   }
    .xs-margin-r-6 { margin-right: 6rem;  }


    .small-text    { text-align: center; }

    .title-header-index-caption {
        font-size: 6.3vw;
    }

    .title-service { 
        font-size: 3.1vw;
        line-height: 1.4;
        margin-bottom: 1rem;
    } 

    .icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .arrow-container {
        justify-content: center; /* Horizontale centrering */
        align-items: center; /* Verticale centrering */
        width: 100%; /* Zorg dat de container de volledige breedte gebruikt */
        
    }

    .arrow-down {
        margin: 0 auto;
    }

    .title-oversized {
        font-size: 7vw;
    }

    .footer-title {
        font-size: 4vw;
        font-weight: 500;
        letter-spacing: -0.06rem;
    }

    .footer-text {
        font-size: 3vw;
    }

    .border-b {
        border-bottom: 1px solid #4A4A4A;
    }

    .border-b-yellow {
        border-bottom: 2px solid #F6EA49;
    }

    .border-b:hover {
        border-bottom: 1px solid #F6EA49;
    }

    .xs-footer-inline a {
        display:inline-block;
        margin: 0.5rem;
    }

}

/* ------- XXS Media Query (25em / 400px) --------------- */


/* - Styles added here will apply at devices smaller than 400px, or zoomed in equivalent */

@media (max-width: 25em) {
    html {font-size: 12px;}

    body {
        /* border: 2px solid red; */
        padding: 0.5rem;
        padding-top: 20%;
    }

    header a {
        display: block;
        margin-bottom: 0;
        font-size: 3.8vw;
    }
    
    header nav a {
        padding-right: 1.5rem;
        padding-right: 0;
        font-size: 4vw;
    }

    a {
        font-size: 3.5vw;
    }

    header h2 { 
        font-size: 8vw;
    }

    header p {
        font-size: 6vw;
    }

    h1 {
        font-size: 4.5vw;
    }

    h2 {
        font-size: 6vw; 
    }

    h3 {
        font-size: 6vw;
    }

    h4 {
        font-size: 5vw;
    }
    
    p {
        font-size: 3.8vw;
    }

    ul { 
        font-size: 3.8vw;
    }

    ul {
        font-size: 3.8vw;
    }

    footer a { 
        font-size: 3.8vw;
    }

    footer nav a {
        padding-right: 1.5rem;
        padding-right: 0;
        font-size: 4vw;
    }

    .show-xxs { display: block; }
    .hide-xxs { display: none;  }

    .xxs-text-center { text-align: center; }
    .xxs-text-left   { text-align: left;   }
    .xxs-text-right  { text-align: right;  }

    .xxs-tall-10  { min-height: 10vh; }
    .xxs-tall-20  { min-height: 20vh; }
    .xxs-tall-30  { min-height: 30vh; }
    .xxs-tall-40  { min-height: 40vh; }
    .xxs-tall-50  { min-height: 50vh; }
    .xxs-tall-60  { min-height: 60vh; }
    .xxs-tall-70  { min-height: 70vh; }

    .xxs-padded-0  { padding: 0;     }
    .xxs-padded-05 { padding: 0.5rem; }
    .xxs-padded-1  { padding: 1rem;   }
    .xxs-padded-2  { padding: 2rem;     }
    .xxs-padded-3  { padding: 3rem !important;     }
    .xxs-padded-4  { padding: 4rem;     }
    .xxs-padded-5  { padding: 5rem !important;     }
    .xxs-padded-6  { padding: 6rem;     }
    .xxs-padded-7  { padding: 7rem;     }
    .xxs-padded-8  { padding: 8rem;     }
    .xxs-padded-9  { padding: 9rem;     }
    .xxs-padded-10 { padding: 10rem;    }

    .xxs-padded-t-0 { padding-top: 0;    }
    .xxs-padded-b-0 { padding-bottom: 0; }
    .xxs-padded-l-0 { padding-left: 0;   }
    .xxs-padded-r-0 { padding-right: 0;  }

    /* Padding 1rem */
    .xxs-padded-t-1 { padding-top: 1rem; }
    .xxs-padded-b-1 { padding-bottom: 1rem; }
    .xxs-padded-l-1 { padding-left: 1rem; }
    .xxs-padded-r-1 { padding-right: 1rem; }

    /* Padding 2rem */
    .xxs-padded-t-2 { padding-top: 2rem; }
    .xxs-padded-b-2 { padding-bottom: 2rem; }
    .xxs-padded-l-2 { padding-left: 2rem; }
    .xxs-padded-r-2 { padding-right: 2rem; }

    /* Padding 3rem */
    .xxs-padded-t-3 { padding-top: 3rem; }
    .xxs-padded-b-3 { padding-bottom: 3rem; }
    .xxs-padded-l-3 { padding-left: 3rem; }
    .xxs-padded-r-3 { padding-right: 3rem; }

    /* Padding 4rem */
    .xxs-padded-t-4 { padding-top: 4rem; }
    .xxs-padded-b-4 { padding-bottom: 4rem; }
    .xxs-padded-l-4 { padding-left: 4rem; }
    .xxs-padded-r-4 { padding-right: 4rem; }

    /* Padding 5rem */
    .xxs-padded-t-5 { padding-top: 5rem; }
    .xxs-padded-b-5 { padding-bottom: 5rem; }
    .xxs-padded-l-5 { padding-left: 5rem; }
    .xxs-padded-r-5 { padding-right: 5rem; }

   
    .xxs-margin-t-1 { margin-top: 1rem;    }
    .xxs-margin-b-1 { margin-bottom: 1rem; }
    .xxs-margin-l-1 { margin-left: 1rem;   }
    .xxs-margin-r-1 { margin-right: 1rem;  }
    .xxs-margin-t-2 { margin-top: 2rem;    }
    .xxs-margin-b-2 { margin-bottom: 2rem; }
    .xxs-margin-l-2 { margin-left: 2rem;  }
    .xxs-margin-r-2 { margin-right: 2rem;  }

    .arrow-container {
        height: auto; /* Dynamisch hoogte aanpassen voor kleinere schermen */
        margin-top: 3rem; /* Eventuele extra ruimte toevoegen */
        width: 100%; /* Zorg dat de container de volledige breedte gebruikt */
    }

    .arrow-down {
        margin-top: 0; /* Verwijder vaste marges */
    }

    .mall-text  { font-size: 1.5vw }
    .medium-text { font-size: 5vw   }
    .big-text    { font-size: 4vw;   }

    .title-header-index {
        font-size: 6vw;
    }

    .title-header-index-caption {
        font-size: 4.5vw;
    }

    .title-service { 
        font-size: 4vw;
        line-height: 1.4;
        margin-bottom: 1rem;
    } 

   .title-medium-oversized {
        font-size: 6.3vw;
    }
    .footer-title {
        font-size: 5vw;
        font-weight: 500;
        letter-spacing: -0.06rem;
    }

    .footer-text {
        font-size: 4vw !important;
    }

    .privacy-policy a {
        font-size: 12px !important;
    }

    #close-cookie-banner {
        font-size: 3vw !important; 
    }

}