:root 
{
	--Zwart : #000000;
	--Wit : #ffffff;
  --LichtBlauw : #69b6c9;
  --Oranje : #ec6726;
  --Blauw : #7887a9;
  --Groen : #91ae8f;
  --Geel: #c5bc7b;
  --Transition:  1s;
}

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

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

svg
{
	width: 100%;
	height: 100%;
}

.widthInherit
{
	width: 100%;
}

.heightInherit
{
	height: 100%;
}

body
{
	margin: 0px auto;
 	padding: 0px;
 	
 	font-size: 16px;
 	font-family: "forma-djr-micro", sans-serif;
	font-weight: 200;
	font-style: normal;

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

 	background-color: #ffffff;
}

div{max-width: 100%; max-height: 100%;}

.centered
{
	display: flex;
	justify-content: center;
	align-items: center;
}

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

button
{
	cursor: pointer;
}

.pointer
{
	cursor: pointer;
}

.pageRef
{
	position: absolute;
	height: 0px;

	top: -210px;

}

/*.fonts
{

font-family: "forma-djr-micro", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "forma-djr-micro", sans-serif;
font-weight: 500;
font-style: normal;

font-family: "forma-djr-micro", sans-serif;
font-weight: 700;
font-style: normal;


}*/

i
{
	padding-right: 20px;
}

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

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

h1
{

}

h2
{
	color: var(--Oranje);

	margin: 20px 0px;

	font-size: 62px;
	font-family: "verveine", sans-serif;
	font-weight: 400;
	font-style: normal;
}

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

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

.padd
{
	padding: 60px;
}

.zwart {color: var(--Zwart);}
.wit {color: var(--Wit);}
.lichtBlauw {color: var(--LichtBlauw);}
.oranje {color: var(--Oranje);}
.blauw {color: var(--Blauw);}
.groen {color: var(--Groen);}

.zwartBack {background-color: var(--Zwart);}
.witBack {background-color: var(--Wit);}
.lichtBlauwBack {background-color: var(--LichtBlauw);}
.oranjeBack {background-color: var(--Oranje);}
.blauwBack {background-color: var(--Blauw);}
.geelBack {background-color: var(--Geel);}
.groenBack {background-color: var(--Groen);}

.buttonContainer
{
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 40px 0px;
}


#bstretch1 {
	height: 60vh;
	width: 100%;
}
#bstretch2 {
	height: 60vh;
	width: 100%;
}
#bstretch3 {
	height: 60vh;
	width: 100%;
}
#bstretch4 {
	height: 100%;
	width: 100%;
}
.downArrow
{
	width: 32px;
	height: 32px;
	background-image: url('/images/pijl_blauw_omlaag.png');
	background-size: cover;
	background-color: transparent;
	margin: auto;
	border: none;

	transition: 0.25s;
}
.downArrow:hover
{
	width: 40px;
	height: 40px;

	transition: 0.25s;
}

header
{
	position: fixed;
	width: 100%;
	top: 0;

	height: 136px;
	transition: 1s;

	z-index: 999;

	background-color: var(--Wit);

	transition: var(--Transition);
}


.scroll header
{
	height: 109px;

	transition: var(--Transition);
}

header .bb
{
	position: absolute;
	height: 50px;
	width: 100%;
	background-color: var(--Zwart);
	border: none;
	margin: 0px;

	transition: var(--Transition);
}

.scroll header .bb
{
	height: 25px;

	transition: var(--Transition);
}

.logo
{
	padding: 0px;
	max-height: 136px;

	transition: var(--Transition);
}

.scroll .logo
{
	max-height: 109px;

	transition: var(--Transition);
}

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

.header
{
	display: flex;
	justify-content: space-between;
	height: 136px;

	transition: var(--Transition);
}

.scroll .header
{
	height: 109px;

	transition: var(--Transition);
}

.hideOnMobile
{
	display: block;
}

.hideOnPC
{
	display: none;
}

.textBlok
{
	margin: auto;
	text-align: center;
	max-width: 700px;
	padding: 20px;
}

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

.absOver
{
	position: absolute;
	width: 100%;
	height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;



}


.ni
{
background-color: var(--Wit);
transition: 0.5s;
}

.ni:hover
{
	padding: 7px;
	background-color: var(--Blauw);
	color: var(--Wit);

	transition: 0.1s;

}

.chosen
{
	padding: 7px;
	background-color: var(--LichtBlauw);
	color: var(--Wit);

	transition: 0.5s;
}

footer .split:first-child
{

}

.spot
{
	max-width: 70%;
	min-height: 665px;

	padding:150px;
}

.spot .textBlok
{
	max-width: 344px;
}

.spot h2
{
	color: var(--Wit);
}

.spot p
{
	color: var(--Wit);
}


.spot svg path{

    d: path('M852.99,483.79c22.92,188.68-142.18,392.85-425.2,425.2C144.78,941.34,25.51,724.36,2.6,483.79 c-22.92-240.56,113.26-632.79,425.2-425.2C739.73,266.19,830.08,295.12,852.99,483.79z');  

  animation: morph;
  animation-duration: 20s;
  animation-fill-mode: ;
  animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes morph {
  0%{
    d: path('M852.99,483.79c22.92,188.68-142.18,392.85-425.2,425.2C144.78,941.34,25.51,724.36,2.6,483.79 c-22.92-240.56,113.26-632.79,425.2-425.2C739.73,266.19,830.08,295.12,852.99,483.79z');  
  }

  25%{
    d: path('M797.04,451.8c127.98,208.18,58.5,445.08-368.81,459.2C132.24,893.78,0.58,721.91,0.58,520.66 C0.56,317.78,114.39-17.36,370.69,2.01C615.34,20.49,724.91,326.4,797.04,451.8z');  
  }

    50%{
    d: path('M854,484.61c2.11,187.72-71.63,428.41-243.47,427.59C325.67,910.84,1.24,641.15,1.19,399.49	C1.14,157.11,69.34-1.21,492.05,0.01C770.76,0.81,856.11,293.75,854,484.61z');  
  }

    75%{
    d: path('M855.1,507.26c0.32,275.35-169.19,404.82-453.1,404.94C291.06,912.25,0.13,884.14,0.13,642.49 C0.13,543.39,168.97,0,486.3,0C726.3,0,855.42,316.94,855.1,507.26z');  
  }

  100%{
    d: path('M852.99,483.79c22.92,188.68-142.18,392.85-425.2,425.2C144.78,941.34,25.51,724.36,2.6,483.79 c-22.92-240.56,113.26-632.79,425.2-425.2C739.73,266.19,830.08,295.12,852.99,483.79z');
 }
}






















.split .foto
{
	overflow: hidden;
}
.foto
{
	display: flex;
	align-items: center;
	max-height: 384px;
	max-width: 100%;
}

.spot .foto
{
	position: absolute;
	width: 35%;
	height: 260px;

	top: 100px;
	right: -15%;
}

.tarieven
{
	max-height: 384px;
	overflow: hidden;
}

.tarieven .textBlok
{
	padding-left: 80px;
	color: var(--Wit);
}

.tarieven .textBlok p,.tarieven .textBlok h2
{
	color: var(--Wit);
}

.werkzaamheden
{
	max-height: 384px;
	overflow: hidden;
}

.werkzaamheden .textBlok
{
	padding-right: 80px;
	color: var(--Wit);
}

.werkzaamheden .textBlok p,.werkzaamheden .textBlok h2
{
	color: var(--Wit);
}

.werkzaamheden
{
	margin-top: 0px;
}

.tarieven
{
	margin-bottom: 0px;
}

.hero
{
	width: 100%;
	max-height: 768px;
	overflow: hidden;
}

.heroOverlay
{
	/*pointer-events: none;*/
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0; 
	left: 0;
}

@keyframes animatedBackground {
  0% { background-position: 0px 0%; }
  50% { background-position: 1000vw 0%; }
  100% {background-position: 0px 0%;}
}

.sliderPanel div
{
	display: flex;
	align-items: center;
	justify-content: center;
	/*max-height: 100%;*/
	max-width: 100%;
	/*min-height: 512px;*/
}

/*.sliderPanel div img
{
	position: absolute;
	top: -50%;
}*/

.hTop
{
		background-size: auto 100%;
		background-image: url('/images/hero_overlay_top.png');
		background-repeat: repeat-x;

		position: absolute;
		width: 100%;
		height: 8.1%;
		top: -1px; 
		left: 0;
		right: 0;

		-webkit-animation-name: animatedBackground;
  	-webkit-animation-duration: 240s;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: ease-in-out;
}

.hBottom
{
		background-size: auto 100%;
		background-image: url('/images/hero_overlay_bottom.png');
		background-repeat: repeat-x;
		background-position: bottom;
		position: absolute;
		width: 100%;
		height: 8.1%;
		left: 0;
		right: 0;
		bottom: -1px;

		-webkit-animation-name: animatedBackground;
  	-webkit-animation-duration: 240s;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: ease-in-out;
}

.heroOverlay .sitecenter
{
	width: 100%;
	height: 100%;
}

#leftArrow
{
	position: absolute;
	top: 50%;
	left: 0;
	width: 32px;
	height: 32px;
	background-image: url('/images/pijl_links_zwart.png');
	background-size: cover;
	background-color: transparent;
	margin: auto;
	border: none;
	transition: 0.25s;
}



#rightArrow
{
	position: absolute;
	top: 50%;
	right: 0;
	width: 32px;
	height: 32px;
	background-image: url('/images/pijl_rechts_zwart.png');
	background-size: cover;
	background-color: transparent;
	margin: auto;
	border: none;
	transition: 0.25s;
}

#leftArrow:hover, #rightArrow:hover
{
	width: 40px;
	height: 40px;

	transition: 0.25s;
}

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

.hamburger *
{
	margin: auto;
}

nav
{
	padding-top: 32px;
	display: flex;
	transition: var(--Transition);
}

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

	padding-top: 0px;
	transition: var(--Transition);
}

.scroll nav ul
{
	padding-top: 25px;
	transition: var(--Transition);
}

.scroll nav
{
	padding-top: 0px;
	transition: var(--Transition);
}

nav a
{
	color: var(--Zwart);

	font-size: 16px;

	font-family: forma-djr-micro, sans-serif;
	font-weight: 900;
	font-style: bold;


}

.languages
{
	padding: 0px 10px;
	gap: 10px;
	justify-content: flex-end;
}

.languages li img
{
	width: 16px;
	height: 16px;
}

.languages .lanSelected img
{
	width: 16px;
	height: 16px;
	/*border: 3px solid;*/
	background-image: url('/images/lanSel.png');
	background-position: center;
	background-size: cover;
}


.contact
{
	width: 317px;
}

.contact h2
{
	color: var(--Wit);
}

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

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

main
{
	width: 100%;
	margin: 120px 0px;
}


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

	color: white;

}

footer .logo
{
	top: 0;

	max-height: 136px;
}

.footer
{
	display: flex;
	gap: 40px;
	justify-content: center;
}

.footer:first-child
{
	padding: 20px;
}

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

	z-index: 9999999;

	background-color: var(--Wit);

	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;
  gap: 0px;
  height: auto;
}

.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;
}

#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;
}


.slick-arrow
{
	padding: 0px;
	width: 29px;
	height: 64px;
	font-size: 0;
	background: none;
}

.slick-next
{
	display: block;
}
.slick-next:before
{
	width: 23px;
	height: 38px;
	font-size: 20px;
	/*content: '→';*/
	content: url(/images/ar_next.png);
}
.slick-prev
{
		display: block;
}
.slick-prev:before
{
	justify-content: flex-start;
		width: 23px;
	height: 38px;
	font-size: 20px;
	/*content: '←';*/
	content: url(/images/ar_prev.png);
}

.slick-arrow:hover
{
	background-color: transparent;
}