@font-face
{
	font-family:"CreatoBold";
	src: url("/fonts/creato_display/CreatoDisplay-Bold.otf") format("truetype");
	font-weight: bold;
}
@font-face
{
	font-family:"CreatoLight";
	src: url("/fonts/creato_display/CreatoDisplay-Light.otf") format("truetype");
	font-weight: normal;
}
* {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: #313131;
 	font-family: "CreatoLight";
 	font-weight: normal;
 	color: #313131;
 	letter-spacing: 0.03em;
 	line-height: 1.25;
}
a {font-size: 22px;}
.centered{text-align: center;}
strong , b
{
	font-family: CreatoBold, serif;
}
h1, h2, h3, h4
{
	color: black;
	text-align: center;
	font-size: 36px;
	font-family: CreatoBold, serif;
	font-weight: 400;
	font-style: normal;
}
.visible
{
	display: flex;
}
div.anchor
{
    display: block;
    position: relative;
    top: 250px;
    visibility: hidden;
}
ul, li, p, a, h1, h2, h3
{
	text-decoration: none;
	margin: 0;
	padding: 0;
	list-style: none; 
}
p
{
	margin: 10px 0px;
}
img{
	max-width: 100%;
}
.backgroundPattern
{
	background-image: url('/images/patroon.png');
	background-size: cover;
	background-position: bottom;
}
.backgroundPatternRoze
{
	background-image: url('/images/patroon_roze.png');
	background-size: cover;
	background-position: bottom;
}
.backgroundPatternBruin
{
	background-image: url('/images/patroon_bruin.png');
	background-size: cover;
	background-position: bottom;
}
.back-donkergrijs{background-color: #313131;}
.back-roze{background-color: #F0BFBE;}
.back-grijs{background-color: #D8D8D8;}
.back-beige{background-color: #EFE2C2;}
.back-bruin{background-color: #9E7F50;}

.donkergrijs{color: #313131;}

.bruin{color: #9e7f50;}
.beige{color: #EFE2C2;}

.grijs{color: #D8D8D8;}
.roze{color: #F0BFBE;}
.wit{color: #ffffff;}

.keuzeScherm
{
	min-width: 100vw;
	min-height: 100vh;
}
.keuzeScherm .collumn
{
	min-width: 50vw;
	min-height: 100vh;
		display: flex;
		flex-direction: column;
	align-items: center;
	justify-content: center;
}
.keuzeScherm .collumn a
{
		display: flex;
		flex-direction: column;
	align-items: center;
	justify-content: center;
}
.keuzeScherm .collumn img
{
	margin: 20px;
	transform:  scale(1.0);
	transition: 0.25s;
}
.keuzeScherm .collumn:hover img 
{
	transform:  scale(1.2);
	transition: 0.25s; 
}
@media screen and (max-width: 850px ) 
{
	.keuzeScherm .collumn
{
	min-width: 100vw;
	min-height: 50vh;

}
}
.mainPage
{
	top: -128px;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 40px;
}
.half
{
	min-height: 50vh;
}
.container
{
	    min-height: 90vh;
	width: 100%;
	margin: auto; 
	max-width: 1240px;
	overflow: hidden;
}
.padding
{
	margin: auto;
	max-width: 896px;
	padding: 60px;
}
.centered
{
	text-align: center;
}
.pageOffset
{
	top: -128px;
}
.poc
{
	top: -128px;
}
header
{
	position: fixed;
	width: 100%;
	top: 0;
	max-height: 128px;
	z-index: 9999999999;
}
header .container
{
	overflow: visible;
	    min-height: 0vh;
}
.headerback
{
	position: relative;
	z-index: 9999;
	height: 128px;
	max-height: 128px;
	background-image: url('/images/transparent_header.png');
	background-position: bottom;
	opacity: 1;
	transition: 0.5s,0.5s;
}
.scroll .headerback
{
	opacity: 0;
	transition: 0.25s; 
}
.headerBackground
{
	position: fixed;
	width: 100%;
	top: 0;
	height: 128px;
	max-height: 128px;
	z-index: 999;
	background-color: #313131;
	opacity: 0;
	transition: 0.25s 0.25s;
}
.scroll .headerBackground
{
	opacity: 1;
	transition: 0.25s;
}
.header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 128px;
	padding-right: 32px;
	transition: 0.25s 0.25s;
	z-index: 99999;
}
.scroll .header
{
	transition: 0.5s;
}
.logoContainer
{
	width: 0px;
	height: 0px;
	transition: 0.25s 0.25s;
}
.scroll .logoContainer
{
	width: 192px;
	height: 192px;
	transition: 0.25s;
}
.Logo
{
	position: relative;
	display: block;
	top: 10%;
	padding: 0px;
	max-height: 148%;
	z-index: 1000;
	opacity: 0;
	transition: 0.25s
}
.logoBig
{
	position: absolute;
	width: 30vw;
	height: 30vw;
	bottom: calc(13vw - 15vw);
	left: calc(13vw - 15vw);
	transform: rotate(-30deg);
	max-width: 90vw;
	max-height: 90vw;
	opacity: 1;
	transition: 0.25s;
}
.scroll .logoBig
{
	opacity: 0;
	transition: 0.25s;
}
.scroll .Logo
{
	opacity: 1;
	transition: 0.25s 0.25s;
}
.siteswitch {
    gap: 15px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 10px;
    /* max-height: 38px; */
    min-height: 38px;
    min-width: 144px;
    font-size: 18px;
    margin-right: 32px;
	background-color: #EFE2C2;	
	color: #9e7f50;	
}

.hamburger
{
	display: none;
	width: 48px;
	height: 48px;
	color: #F0BFBE;
	font-size: 24px;
	text-align: center;
	align-items: center;
}
.hamburger *
{
	margin: auto;
}
nav
{
	flex: 1;
}
nav ul
{
	width: 100%;
	display: flex;
	align-items: center;
		justify-content: space-around;
	height: 100%;
}
nav ul li a
{
	text-transform: uppercase;
}
nav a
{
	color: #F0BFBE;
/*	font-size: 16px;
	letter-spacing: 3px;
	font-family: jaf-bernina-sans-condensed, sans-serif;
	font-weight: 300;
	font-style: normal;*/
}
li a:after
{    
  background: none repeat scroll 0 0 transparent;
  bottom: -4px;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #F0BFBE;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0%;  
}
li a:hover:after
{ 
  width: 100%; 
  left: 0%;
}
.socials
{
	max-height: 38px;
	display: flex;
	justify-content: space-between;
	min-width: 92px;
}
.social
{
	max-width: 38px;
	max-height: 38px;
	min-height: 38px;
	min-width: 38px;
	width: 38px;
	height: auto;
	opacity: 1;
	transition: 0.25s;
}
.social:hover
{
	opacity: 0.5;
	transition: 0.25s;
}
.split
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.vertFlex
{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.content
{
	width: 100%;
	text-align: center;
	padding: 40px;
}
.contentCollumns
{
	width: 100%;
	columns: 2 auto;
	column-gap: 80px;
	column-fill: balance;
	padding: 40px;
}
.contentCollumns img
{
	width: 100%;
}
.collumn
{
	width: 50%;
	padding: 40px;
}
.collumn img
{
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	max-height: 512px;
	width: auto;
}
/*Dev dingen*/
.back{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: :#F0BFBE;
	text-align: center;
}
.back img
{
	max-width: 90%;
	max-height: 50%;
	width: 512px;
	height: auto;
}
/*Dev dingen*/
.menu-open { overflow-y: hidden; }
.pointer { cursor: pointer; }
.hero
{
	position: relative; 
	top: -128px;
	left: 0;
	width: 100%;
	height:  calc(100vh - 0px);
	z-index: 99;
	padding: 0px;
}
.heroback
{
	
	max-width: 100%;
	max-height: :100%;
	width: 100%;
	height: calc(100vh);
	overflow: hidden; 
/*	background-attachment: fixed;*/
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/images/heros/hero_1.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.CTA
{
	position: absolute;
	right: 0px;
	bottom: 114px;
	width: 590px;
	height: 147px;
	background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/images/vlag_groot.png");
  background-position: bottom;
  transition: 1s;
}
.scroll .CTA
{
	right: -590px;
	transition: 2s;
}
.CTA h3
{
	color: #F0BFBE;
	text-transform: uppercase;
	font-size: 43px;
	padding: 60px;
	text-align: right;
	transition: 0.25s;
}
.CTA:hover h3
{
	color: #ffffff;
	transition: 0.25s;
}
.ButtonPC{display: flex; justify-content: center; padding: 20px;}
.ButtonP
{
		width: 217px;
	height: 64px;
		background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/images/vlag.png");
  background-position: bottom;
}
.ButtonP h4
{
	margin: 0;
	color: #ffffff;
	font-size: 24px;
	padding: 20px;
		padding-bottom: 30px;
	text-align: center;
	transition: 0.25s;
}
.ButtonPC:hover h4
{
	padding-top: 25px;
	color: #F0BFBE;
	font-size: 20px;
	transition: 0.25s;
}
#welkom h2
{
	padding-bottom: 40px;
}
.heroback img
{
	width: 100%;
	height:  100%;
}
.mobilemenu
{
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999999999999999999999999999;
	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;
	align-items: flex-start;
	overflow: auto;
  white-space: nowrap;
  padding: 10vw;
}
.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;
}
.afspraakContainer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
/*	-webkit-display:flex;
	-webkit-justify-content: end;*/
	max-width: 784px;
}
.afspraakContainer p {
	font-size: 24px;
	text-align: right;
}

.afspraak > h2 {
	color: #313131;
	margin-top: 20px;
	font-size: 24px;
}
.afspraak > a > * 
{
	font-size: 24px;
	padding: 5px;
	color: #313131;
	border-style: solid;
	border-width: 2px;
	border-radius: 4px;
	border-color: #313131;
}
.afspraak  h2 img
{
	width: 29px;
	padding-top: 5px;
}
.dienst
{
	display: flex;
}
.dienst .icon
{
	min-width: 64px;
	width: 64px;
	margin-right: 16px;
}
.dienst .icon img
{
	position: absolute;
	top: -20px;
	overflow: visible;
	min-width: 64px;
	width: 100%;
	height: auto;
}
.dienst > * b
{
	font-size: 24px;
}
.contactformulier h4
{
text-align: left;
}
#cntFrm
{
	display: flex;
	flex-direction: column;
}
#cntFrm > *
{
	width: 100%; 
	padding: 10px;
	margin: 10px 0px;
	background-color: #58595B;
	border: 0;
	color: #F0BFBE;
font-size: 16px;
}
#cntFrm > *::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #F0BFBE;
  opacity: 0.75; /* Firefox */
}
#cntFrm > textarea
{
	min-height: 256px;
	resize: vertical;
}
.btndonker
{
	margin-top: 20px;
	height: 40px;
	background-color: #313131;
	text-transform: uppercase;
	font-size: 16px;
	color: #F0BFBE;
}
#map
{
	height: 384px;
}
/*FOTOS FOTOS FOTOS FOTOS*/
.cmsphotos
{
	text-align: right;
	max-width: 512px;
}
.slickpadding 
{
	padding: 0px;
}
.slick 
{
	padding-bottom: 0;
}
/*.slick-track {
  display: flex;
  height: auto;
  align-items:  center;
  justify-content: center;
}*/
.cmsphotos .slick-track
{
	display: block;
}
.slick-dots 
{
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 30px 0;
	flex-wrap: wrap;
	list-style-type: none;
}
.slick-dots li {
        margin: 4px;
    }
.cmsphotos .slick-dots
{
		padding: 10px 0;
}
.cmsphotos .slick-dots
> li:only-child {
        display: none;
    }
.slick-dots li {
			margin: 0.25rem;
		}
.slick-dots button {
			display: block;
			width: 0.5rem;
			height: 0.5rem;
			padding: 0;
			border: none;
			border-radius: 100%;
			background-color: gray;
			text-indent: -9999px;
		}
.slick-dots li.slick-active button {
			background-color: white;
		}
.cmsphotos .slick-dots li.slick-active button {
			background-color: black;
		}
.slick img
{
	margin: auto;
	height: auto;
	max-height: 256px;
	width: auto;
}
.slick img, .cmsphotos img
{
	margin: auto;
	height: auto;
	max-height: 256px;
	width: auto;
}
button{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor:pointer;
}
.slide-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
}
.prev-arrow{
  left: 20px;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 15px solid gray;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.next-arrow
{
  right: 20px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 15px solid gray;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
} 
.prev-arrow:hover
{
  border-right: 15px solid #ffffff;
}
.next-arrow:hover
{
 border-left: 15px solid #ffffff;
}
.slick-track
{
}
.gallery
{
	margin: 0px;
	padding: 20px;
	overflow: hidden;
}
.gallery img
{
	width: 100%;
	height: auto;
}
.pagephoto
{
	margin: 0 8px;
}
.photosingle
{
	max-width: 256px;
}
.pagephoto img
{
	max-width: 100%;
	max-height: 256px;
	height: auto;
	margin: auto;
}
.photo:nth-child(even) .cmsphotos, .photo:nth-child(even) .photosingle
{
	text-align: right;
	margin: auto;
	margin-right: 0;
}
.photo:nth-child(odd) .cmsphotos, .photo:nth-child(odd) .photosingle
{
	text-align: left;
	margin: auto;
	margin-left: 0;
} 
.pictitle
{
	text-align: center;
	font-family: din-2014,sans-serif;
	font-family: arial,sans-serif;
	font-weight: 400;
	font-style: italic;
	margin: 0 8px;
}
.slick .pictitle
{
	color: white;
}
.cmsphotos .pictitle
{
	color: black;
}
/*FOTOS FOTOS FOTOS FOTOS*/
.PageTitle
{
	display: flex;
	justify-content: center;
}
.PageTitle > h2 > img
{
	max-width: 20vw;
	height: auto;
}
#popupback
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999999999999999999999999999999;
	background-color: rgba(0, 0, 0, 0.75);
}
#overlay
{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
	z-index: 999999999999999999999999999999999999;
	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);
}
table, tbody
{
	width: 100%;
}
tr td
{ 
	min-width: 0px;
	width: 50%;
}