:root 
{
  --Beige : #e3d1b9;
  --Grijs : #dfdad5;
  --Groen : #5b8763;
  --Wit : #ffffff;
  --Zwart : #000000;

  --Gap120 : clamp(60px, calc(3.75rem + ((1vw - 3.45px) * 3.8095)), 120px);
  --HeaderHeight: clamp(100px, calc(6.25rem + ((1vw - 3.5px) * 6.3694)), 200px);
  
  --Size: calc(clamp(182, calc(11.375rem + ((1vw - 3.5) * 52.1019)), 1000) /1000);

 /*	font-size: clamp(12px, calc(0.75rem + ((1vw - 3.45px) * 0.7619)), 24px);*/
 	font-size: clamp(14px, calc(0.875rem + ((1vw - 3.5px) * 0.3822)), 20px);
  /* Note: The calc base value (0.75rem) MUST be stated in REM to maintain accessibility */
  /* Where: 0.7619 = 100 * font-size_difference / viewport_width_difference */
 
  /* Safari resize fix */
  min-height: 0vw;
}
 

* { box-sizing: border-box; position: relative; }
html { scroll-behavior: smooth; }

body
{
	height: 100%;
	width: 100%;
	margin: 0px auto;
 	padding: 0px;
 	background-color: var(--Grijs);

	font-family: "raleway", sans-serif;
	font-weight: 400;
	font-style: normal;

	line-height: 1.75;
	letter-spacing: 0.025em;

 	color: var(--Zwart); 

}

h1
{
	font-size: 2.54em;
	font-weight: normal;

	font-family: "big-caslon-fb", serif;
	font-weight: 500;
	font-style: normal;
	
}

h2
{
	font-size: 2.54em;
	font-weight: normal;

	font-family: "big-caslon-fb", serif;
	font-weight: 500;
	font-style: normal;
}

h3
{
	font-size: 2em;
	font-weight: normal;

	font-family: "big-caslon-fb", serif;
	font-weight: 500;
	font-style: normal;

}

h4
{
	font-size: 2em;
	font-weight: normal;
	margin: 0;
	font-family: "big-caslon-fb", serif;
	font-weight: 500;
	font-style: normal;

}

a{
	text-decoration: none;
	color: var(--Groen);
}

p
{
	margin: 0;
}
ul
{
	padding: 0;
}
ul li
{
		padding: 0;
	text-decoration: none;
	list-style: none;
}

.pointer
{
	cursor: pointer;
}

.siteCenter
{
	max-width:clamp(313px, calc(19.5625rem + ((1vw - 3.5px) * 80.3185)), 1574px);
	margin: auto;
	overflow: hidden;
	
} 

.text
{
	max-width: 900px;
	margin: auto;
}

img
{
	max-height: 50vh;
	width: auto;
}


button
{
	background-color: transparent;
  border: 1px solid var(--Zwart);
  border-radius: 32px;
  min-height: 32px;
  padding: 12px 24px;
  font-size:0.8em;
  cursor: pointer;

	text-wrap-mode: nowrap;

  opacity: 1;
  transition: 0.2s;
}

button:hover
{
	letter-spacing: 0.04em;
	transition: 0.2s;
}


div .foto
{
	overflow: hidden;
}
div .foto img
{
		border-radius: clamp(27px, calc(1.6875rem + ((1vw - 3.5px) * 7.8344)), 150px) clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px) clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px) clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px);
		width: 100%;
		height: auto;

		max-height: 75vh;

		aspect-ratio: 9 / 14;
		object-fit: cover;
}

.noMobile{ display: block; }
.mobileOnly{display: none;}
.mobileOnlyFlex{display: none;}

.hero
{
	background-color: var(--Beige);
	text-align: center;
	padding: var(--Gap120) 0px;
	padding-top: 0px; 
	min-height: 75vh;
}

.blog
{
	background-color: var(--Beige);
	text-align: left;
	padding: var(--Gap120) 0px;
	min-height: 75vh;
}

.main
{
	padding: var(--Gap120) 0px;
}

.centered
{
	text-align: center;

	font-family: "big-caslon-fb", serif;
	font-weight: 500;
	font-style: normal;
}
.split
{
	display: flex;
	gap: var(--Gap120);
	align-items: center;
	justify-content: space-between;
}
.blog .split
{
	align-items: flex-start;
}
.cLine
{
	position: absolute;
	top: 100px;
	width: 1px;
	height: calc(100% - 200px);
	border: 1px solid black;
	margin-left: 50%;
}

.gridSplit
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--Gap120);
}
.gridThird
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--Gap120);
}

.stappen
{
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap:  var(--Gap120);
}
.stap
{
	display: flex;
	gap: 32px;
}

.circle
{
	width: 32px;
	min-width: 32px;
}

.circle > *
{

	top: 32px;
	width: 1px;
	height: 100%;
	border: 1px solid black;
	margin-left: 15px;
}

.circle > * > *
{

	position: absolute;
	top: -32px;
	left: -16px;
  min-width: 32px;
  width: 32px;
  height:32px;
  border-radius: 50%;
  border: 1px solid black;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}


.headerBack
{
	width: 100%;
	height: var(--HeaderHeight);
	transition: 0.25s;
}
header
{
	z-index: 99909999;
	width: 100%;
	top: 0;
	position: fixed;
	height: var(--HeaderHeight);
	background-color: var(--Beige);
	transition: 0.25s;
}

.headerContainer
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--HeaderHeight);
	transition: 0.25s;

}

header .headerContainer .logoContainer{display: block;}
.logoContainer{ height: calc(var(--HeaderHeight)*0.2); }
.logoContainer img
{
	height:calc(var(--HeaderHeight)*0.2);
	width: auto;
}


.scroll header
{
	height: calc(var(--HeaderHeight) * 0.75);
	transition: 0.25s;

	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}

.scroll .headerContainer
{
	height: calc(var(--HeaderHeight) * 0.75);
	transition: 0.25s;
}



header ul
{
	display: flex;
	justify-content: space-between;
	padding: 0;
}

header ul li 
{
	padding: 0px calc(var(--Gap120)/5);
	font-size: 0.9em;
	text-decoration: none;
	list-style: none;
}
header ul li a
{
	text-wrap-mode: nowrap;
	overflow: visible;
	font-family: "big-caslon-fb", serif;
	font-weight: 500;
	font-style: normal;

	color: var(--Zwart);
	text-decoration: none;
}

header ul li a:hover
{
	color: var(--Groen);
	text-decoration: none;
}

header ul .selected a 
{
	 color: var(--Groen);
}


.hamburger
{
  min-width: 32px;
  width: 32px;
  height:32px;
  border-radius: 50%;
  border: 1px solid black;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  padding: 8px;

  display: none;
  flex-direction: column-reverse;
  justify-content: space-evenly;
}
 
.hamburger div/*:first-child*/
{
	width: 100%;
	height: 1px;
	border: 1px solid black;
} 
.hamburger div:nth-child(2){
	left: 25%;
	width: 75%;
}

.closeButtonWrap
{
	display: flex;
	justify-content: end;
}
.closeButton
{
	min-width: 32px;
  width: 32px;
  height:32px;
  border-radius: 50%;
  border: 1px solid white;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  padding: 12px;

  display: flex;
  flex-direction: column-reverse;
  justify-content: space-evenly;
}
.closeButton  div/*:first-child*/
{
	top: 48%;
	left: 20%;
	position: absolute;
	width: 60%;
	height: 1px;
	border: 1px solid white;
	transform: rotate(45deg);
} 

.closeButton  div:nth-child(2){
	transform: rotate(135deg);
} 


.mobilemenu
{
	padding: 40px 0px;
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999999999;
	background-color: rgba(0, 0, 0, 0.3);

	/**/

/*	transform-origin: top;
	transform: scaleY(0.0);
	transition: 0.25s;*/
}

.mobilemenu .siteCenter
{
		overflow: visible;
}

.menu-open .mobilemenu
{
	display: block;
/*	transform-origin: top;
	transform: scaleY(1.0);
	transition: 0.25s; */
}

nav ul
{

	margin: 0;
	padding: 28px 0px;

	background-color: var(--Grijs);
	top: calc(var(--HeaderHeight) - 32px - 40px);
	right: -100px;

	border-radius: 
	clamp(27px, calc(1.6875rem + ((1vw - 3.5px) * 7.8344)), 150px) 
	clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px) 
	clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px) 
	clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px);

	box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);

}

nav ul li 
{
	padding:28px 100px;
	padding-left: 0px;
	font-size: 0.8em;
	text-decoration: none;
	list-style: none;
	text-align: right;

	opacity: 0;
	transition-duration: 0.25s;
	transition-delay: 0s;
}
nav ul li a 
{
	font-family: "big-caslon-fb", sans-serif;
	font-weight: 500;
	font-style: normal;

	font-size: 1.5em;

	color: var(--Zwart);
	text-decoration: none;
}

.menu-open nav ul li
{
/*//	transition: opacity  0.25s;*/

	opacity: 1;
	transition-duration: 0.25s;
	transition-delay: 0s;

}

.menu-open nav ul .selected a 
{
	 color: var(--Groen);
}


input, textarea
{
	background-color: var(--Beige);
	border: none;
  border-bottom: 1px solid var(--Zwart);
  

/*  box-shadow: 0 0 1px 0px var(--Zwart) inset, 0 0 1px 0px var(--Zwart);*/
  min-height: 32px;

  font-size:0.75em;
  cursor: pointer;

  opacity: 1;
  transition: 0.2s;
  font-family: inherit;
}

table
{
	text-align: left;
}
td
{
	min-width: 96px;
} 

.contactgegevens
{
	min-height: 100vh;
}
#cntFrm
{
	display: flex;
	flex-direction: column;
}
 
#cntFrm > *
{
	width: 100%; 
  padding: 12px 24px;
	margin: 16px 0px;
}

#cntFrm > textarea
{
	min-height: 128px;
	resize: vertical;
}

.contactformulier button
{
	margin-top: 24px;
	width: 100%;
}


#popupback
{
	position: fixed;
		z-index: 999999999;

	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-color: rgba(0, 0, 0, 0.75);
}

#overlay
{

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

	z-index: 999999999;
	background-color: var(--Groen);
	padding: 40px;

	color: var(--Wit);
}


footer
{
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
	padding: var(--Gap120) 0px;
	font-size: 0.8em;
}

footer ul img
{
	max-width: 24px;
	max-height: 24px;
}
footer ul li
{
	display: flex;
	gap: 8px;
	align-items: center;

}

footer .f1 > *
{
 margin: 16px 0;
}
.mobileCTA
{
	display: none;
	height: 70px;
		
	background-color: var(--Grijs);
	position: fixed;
	
	bottom: 0;
	width: 100%;

	-webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;

  transition: 0.25s;
}
.mobileCTA .mobileCtaWrap
{
	padding: 16px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
		transition: 0.25s;
}

.mobileCTA .mobileCtaWrap div
{
	display: flex;
	gap: calc(var(--Gap120)/2);
}


.mobileCTA .mobileCtaWrap span:nth-child(1)
{
		display: block;
}
.mobileCTA .mobileCtaWrap span:nth-child(2)
{
		display: block;
}
.mobileCTA .mobileCtaWrap span:nth-child(3)
{
		display: none;
}
.mobileCTA .mobileCtaWrap span:nth-child(4)
{
		display: none;
}


.mobileCTA .mobileCtaWrap img
{
	width: 32px;
	height: 32px;
}

.footerVisible .mobileCTA
{
		height: 0;
		transition: 0.25s;
}
/*.scrollBottom .footer .footerWrap
{
	padding: 64px 0px;
	transition: 0.25s;
}*/
/*.scrollBottom .footer
{
	background-color: var(--Beige);

	-webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}*/

.slide
{
	height: 100%;
}
.blog, .recensie
{
	background-color: var(--Beige);
}

.blog h2, .recensie h2
{
	text-align: center;
}
.blogCarousel .item, .reviewCarousel .review-item
{
	margin: 0px calc(var(--Gap120) / 2);
	text-align: center;
	font-size: 0.8em;
}

.blogCarousel .item > *, .reviewCarousel .review-item > *
{
	margin-bottom: 24px;
}

.blogCarousel .item img
{
	border-radius: clamp(27px, calc(1.6875rem + ((1vw - 3.5px) * 7.8344)), 150px) clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px) clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px) clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.review-item img
{
	margin: 0 auto;
	max-width: 48px;
	height: auto;
}
.review-meta img
{
	display: none;
}

.review-item .start
{
	content: '*';
}
.review-author
{
	font-family: "big-caslon-fb", serif;
}

.review-stars ul
{
	display: flex;
}
.slick-track
{
    display: flex !important;
}

.slick-slide
{
    height: inherit !important;
} 


.recensie .slick-initialized .slick-slide
{
    display: flex;
    justify-content: space-between;
}

.review-item
{
		font-size: 0.1em;
		border-radius: clamp(27px, calc(1.6875rem + ((1vw - 3.5px) * 7.8344)), 150px) clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px) clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px) clamp(4.5px, calc(0.28125rem + ((1vw - 3.5px) * 1.3057)), 25px);
		background-color: var(--Beige);
		padding: calc(var(--Gap120) / 3);
		border: 1px solid black;
		text-align: center;

		display: flex;
		flex-direction: column;
		justify-content: space-between;

}