* {box-sizing: border-box; position: relative; }

html
{
	scroll-behavior: smooth;
}
html, body
{
	height: 100%;
	width: 100%;
}  

body
{
	margin: 0px auto;
 	padding: 0px;
 	font-size: 16px;
 	background-color: #ffffff;
}

.menu-open
{
	overflow-y: hidden;
}

.pointer
{
	cursor: pointer;
}

/*.fonts
{
	font-family: ff-tisa-sans-web-pro, sans-serif;
	font-weight: 400;
	font-style: italic;

	font-family: ff-tisa-sans-web-pro, sans-serif;
	font-weight: 700;
	font-style: normal;

	font-family: ff-tisa-sans-web-pro, sans-serif;
	font-weight: 700;
	font-style: italic;

	font-family: jaf-bernina-sans-condensed, sans-serif;
	font-weight: 300;
	font-style: normal;

	font-family: capitolium-2, serif;
	font-weight: 400;
	font-style: normal;
}*/

#cboxClose{z-index: 99999;}

ul, li, p, a, h1, h2, h3
{
	text-decoration: none;
	margin: 0;
	padding: 0;
	list-style: none; 
}

a
{
	display: inline-block;
	color: black;
}

li a:after,.introductie a:after, .aanbod a:after
{    
  background: none repeat scroll 0 0 transparent;
  bottom: -4px;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #6f8d53;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0%;  
}

.introductie a:hover:after, .aanbod a:hover:after, .mobilenav li a:after
{ 
  width: 100%; 
  left: 0%;
}

@media screen and (min-width: 950px ) 
{
		li a:hover:after
		{ 
		  width: 100%; 
		  left: 0%;
		}
}


a span
{
	left: 0;
	transition: 0.25s;
}

a:hover span
{
	Left: 12px;
	transition: 0.25s;
}


img
{
	max-width: 100%;
	max-height: 100%;
	height: auto;
} 

button
{
  background-color: transparent; /* Green */
  border:2px solid white;
  padding: 10px;
  color: white;

  background-image: 
  linear-gradient(to right, black 50%, white 50%),
  linear-gradient(to right, white 50%, transparent 50%);

  -webkit-background-clip: text,padding-box;
  background-clip: text,padding-box;
  -webkit-text-fill-color: transparent;
  color: transparent;  
  background-size: 200% 100%;
  background-position: right;
  transition: background-position 0.5s ease-in-out;

  width: 192px;
}

button:hover
{
	background-position: left;
}

.btndonker
{
	border: 2px solid #232328;
	color: #232328;

	background-image: 
  linear-gradient(to right, white 50%, #232328 50%),
  linear-gradient(to right, #232328 50%, transparent 50%);
}

.herotekstcontainer h1
{
	color: #edb789;

	font-size: 40px;
	font-family: capitolium-2, serif;
	font-weight: 400;
	font-style: normal;
}

h2
{
	color: #edb789;

	font-size: 20px;
	font-family: jaf-bernina-sans-condensed, sans-serif;
	font-weight: 300;
	font-style: normal;
}

h1, h3
{
	color: black;

	font-size: 36px;
	font-family: capitolium-2, serif;
	font-weight: 400;
	font-style: normal;
}

h4
{
	color: black;

	font-size: 28px;
	font-family: capitolium-2, serif;
	font-weight: 400;
	font-style: normal;

	margin: 0;
}

p, span, label, input
{
	font-family: ff-tisa-sans-web-pro, sans-serif;
	font-weight: 400;
	font-style: thin;

	letter-spacing: 0.15em;
	line-height: 2em;
	word-wrap: normal;
}

.container
{
	margin: auto; 
	max-width: 1240px;
	overflow: hidden;
}

.padding
{
	margin: auto;
	max-width: 896px;
	padding: 60px;
}

.padd
{
	padding: 60px;
}

.beige
{color: #edb789;}

.donkergrijs
{color: #232328;}

.lichtgrijs
{color: #e7eae6;}

.wit
{color: #ffffff;}

.beige-back
{background-color: #edb789;}

.donkergrijs-back
{background-color: #232328;}

.lichtgrijs-back
{background-color: #e7eae6;}

.wit-back
{background-color: #ffffff;}
 
header
{
	position: fixed;
	width: 100%;
	top: 0;

	max-height: 128px;
	transition: 1s;

	z-index: 999;
}

.headerback
{
	position: relative;
	height: 128px;
	max-height: 128px;
}

.header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 128px;
	padding-right: 32px;
}

.subheader 
{
	display: none;
	background-color: black;
	padding: 15px;
}

.hamburger
{
	display: none;
	width: 48px;
	height: 48px;
	color: #edb789;
	font-size: 24px;
	text-align: center;
	align-items: center;
}

.hamburger *
{
	margin: auto;
}

nav ul
{
	display: flex;
	align-items: center;
	gap: 20px;
	height: 100%;
}

nav ul li a
{
	text-transform: lowercase;
}

nav a
{
	color: #edb789;

	font-size: 16px;
	letter-spacing: 3px;
	font-family: jaf-bernina-sans-condensed, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.logo
{
	padding: 20px;
	max-height: 128px;
}

.contact ul
{
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
}

.contact a
{
	color: white;
 
	font-size: 11px;
	font-family: ff-tisa-sans-web-pro,sans-serif;
	font-weight: 300;
	font-style: thin;
}

.subheader .contact ul
{
	justify-content: flex-end;
}

main
{
	width: 100%;
	padding-bottom: 40px;
}

.hero
{
	position: fixed; 
	top: 128px;
	left: 0;
	width: 100%;
	height:  calc(100vh - 128px);
	z-index: -99999;

	background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/images/main.webp");

}

.herotekst
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: calc(100vh - 128px);
	text-align: center;
	background: none;
	margin: auto;
	padding: 20px;
/*	margin-top: -320px;*/
}

.herotekst i
{
	color: white;
	font-size: 72px;
	opacity: 0.15;
	transition: 0.5s;
}

.scroll .herotekst i
{
	opacity: 0;
	transition: 0.5s;
}

.heroimage
{
	overflow: hidden;

	width: 100%;
	height:  calc(50vh - 128px);
	
	z-index: -99999;

 background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/images/main.webp");
}

.heroimage > img
{
	width: 100%;
	height:  100%;
}

.herotekstcontainer 
{
	display: flex;
	flex-direction: column;
	justify-content: center;

	gap: 20px;
	max-width: 384px;
	text-align: center;
	margin: auto;
	margin-top: calc(100vh / 8); 
}

.herotekstcontainer * 
{
	margin: 0 auto;
	opacity: 1;
	transition: 0.5s;
}

.scroll .herotekstcontainer *
{
	opacity: 0;
	transition: 0.5s;
}

.introductie
{
	padding: 20px;
	text-align: center;
	margin: auto;
}

.introductie .padding > *
{
	padding: 20px;
}

.introductie .padding > a
{
		max-width: calc(100vw - 40px);
}

.impressie
{
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	padding: 0 30px;

}

.impressie > *
{
/*	width: 34%;*/
	margin: auto;
	transition: 0.25s;
}

.impressie > * img
{
		transform: scale(1.0);
		transition: 0.25s;
		z-index: 0;
}

.impressie > * img:hover
{
		transform: scale(1.0625);
		transition: 0.25s;
		z-index: 1;
}

.aanbod
{
	padding: 20px;
	text-align: center; 
	margin: 40px 0;
}

.aanbod .padding > * 
{
	padding: 20px;
}

.aanbod .padding > a
{
	max-width: calc(100vw - 40px);
}

.aanbod a, .introductie a
{
	font-size: 22px;
	font-family: capitolium-2, serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.1em;
}

footer
{
	width: 100%;
	min-height: 64px;

	color: white;

	font-size: 14px;
	font-family: ff-tisa-sans-web-pro,sans-serif;
	font-weight: 300;
	font-style: thin;
}

.mobilemenu
{
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	z-index: 9999999;

	transform-origin: top;
	transform: scaleY(0.0);
	transition: 0.25s;
	transition-delay: 0.5s;
}


.exit
{
	padding: 20px;
	padding-right: 32.5px;
	text-align: right;
	font-size: 24px;

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

.scrollview
{
	height: calc(100vh - 64px);

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

.mobilenav
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: auto;
  white-space: nowrap;
}

.mobilenav *
{
	display: block;
	padding-top: 16px;
	padding-bottom: 16px;
}

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

.menu-open .scrollview
{
	opacity: 1;
	transition-duration: 0.5s;
	transition-delay: 0.5s;
}

.menu-open .exit
{
	opacity: 1;
	transition-duration: 0.25s;
	transition-delay: 0.25s;
}

.tekstcontent
{
padding: 40px;
}

.splitgrid
{
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 40px; 
}

.gridcontent
{
	position: relative;
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-gap: 40px; 
	padding: 40px 0;
}

.gridcontent h3, .tekstcontent h3
{
	padding: 20px;
}

.grid
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 40px;
}

.breadcrumbs
{
	padding: 20px;

	font-size: 12px;
	font-family: ff-tisa-sans-web-pro, sans-serif;
	font-weight: 400;
	font-style: thin;

	letter-spacing: 0.15em;
	text-align: center;
}

.breadcrumbs ul
{
	display: flex;
	justify-content: center;
	gap: 0px;
	align-items: center;
	height: 100%;
	max-width: 384px;
}

.fotos
{
	display: flex;
	justify-content: left;
	flex-direction: column;
	align-items: center;
	flex-wrap: nowrap;
	padding: 30px;

	max-width: 384px;
} 

.foto
{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	flex-wrap: nowrap;
	padding: 0px;

	max-width: 384px;
	overflow: hidden;
}

.content
{
	padding: 20px;
	text-align: left;
	margin: auto;
	margin-top: 0; 
	width: 100%;
} 

.content p
{
	width: 100%;
}


.fotos > *
{
/*	width: 34%;*/
	margin: 0;
	transition: 0.25s;
}

.fotos > * img
{
		transform: scale(1.0);
		transition: 0.25s;
		z-index: 0;
}

.fotos > * img:hover
{
		transform: scale(1.0625);
		transition: 0.25s;
		z-index: 1;
}

.foto > *
{
/*	width: 34%;*/
	margin: 0;
	transition: 0.25s;
}

.foto > * img
{
		transform: scale(1.0);
		transition: 0.25s;
		z-index: 0;
}

.foto > * img:hover
{
		transform: scale(1.0625);
		transition: 0.25s;
		z-index: 1;
}


.cadeauboncontainer
{
	padding: 40px;
}

.cadeauboncontainer h3
{
	padding-left: 0px;
}

#cadeauFrm table
{
	display: table;
	width: 100%;
}
input[type=text]
{
	margin: 5px;
	width: 100%;
}

#cadeauFrm input:checked+ #zelfdeontvanger
{display: block;}

#cadeauFrm input:checked + #andereontvanger
{display: none;}

.contactgegevens
{
	text-align: left;

	font-family: ff-tisa-sans-web-pro, sans-serif;
	font-weight: 400;
	font-style: thin;
}

footer .contactgegevens
{
	text-align: right;
}

.contactformulier
{

}

#cntFrm
{
	display: flex;
	flex-direction: column;
}

#cntFrm > *
{
	width: 100%; 
	padding: 10px;
	margin: 10px 0px;
}

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

.fotogalerij
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.fotogalerij a
{
	overflow: hidden;
}

.fotogalerij a img
{

}

#popupback
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

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

#popupback2
{
	position: fixed;
	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: 999999;
	background-color: white;
	padding: 40px;

 box-shadow: 0 0px 1px  rgba(0,0,0,0.12), 
             0 0px 2px  rgba(0,0,0,0.12), 
             0 0px 4px  rgba(0,0,0,0.12), 
             0 0px 8px  rgba(0,0,0,0.12),
             0 0px 16px rgba(0,0,0,0.12);
}

#overlay2
{

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

	z-index: 999999;
	background-color: white;
	padding: 40px;

 box-shadow: 0 0px 1px  rgba(0,0,0,0.12), 
             0 0px 2px  rgba(0,0,0,0.12), 
             0 0px 4px  rgba(0,0,0,0.12), 
             0 0px 8px  rgba(0,0,0,0.12),
             0 0px 16px rgba(0,0,0,0.12);
}

.dismiss
{
	text-align: right;
}

#map
{
	height: 384px;
}


.behandeling
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #F7F7F7;
	padding: 20px;
}

.behandeling strong
{
	font-size: 24px;
}

.behandeling p:last-of-type
{
	margin-top: auto;
	border: 1px solid;
	padding: 10px;
	text-align: right;
	font-size: 80%;
}