@import url("reset.less");

body {
	color:@black;
	font-size:18px;
	line-height:32px;
	.font;
	position:relative;
  overflow-x: hidden;
	background:@white;
}

@keyframes showafter {
  0% {
	  opacity:0;
  }
  100% {
	  opacity:1;
  }
}

header {
	width:100%;
	position:fixed;
	top:0;
	z-index:1000;
	background:@white;
	border-bottom:3px solid #d4b8a3;
	
	&.fixed {
		
		.logo {
			width:90px;
		}
		
		.menu-hoofdmenu-container {
		
			ul {
				
				li {
					margin:0;
					padding:25px 35px;
					
					&.menu-item-has-children {
						
						.sub-menu {
							top:80px;
						}
					}
				}
			}
		}
	}
	
	.menu_toggle {
		display:none;
	}
	
	.logo {
		width:120px;
		display:inline-block;
		margin:10px 0 0 0;
		z-index:100;
	}
	
	.menu-hoofdmenu-container {
		
		ul {
			margin:0;
			padding:0;
			list-style:none;
			text-align:right;
			
			li {
				margin:0;
				padding:35px;
				display:inline-block;
				text-align:left;
				.transition;
				
				&.current-menu-item a, a:hover {
					color:@green;
				}
				
				&:hover {
					cursor:pointer;
					
					.sub-menu {
						opacity:1;
						visibility:visible;
					}
				}
				
				a {
					color:@black;
					font-size:20px;
					line-height:30px;
					.bold;
				}
				
				&.menu-item-has-children {
					position:relative;
					
					&:hover {
						
						> .sub-menu {
							display:block;
						}
					}
					
					.sub-menu {
						display:none;
						width:250px;
						position:absolute;
						top:100px;
						background:@white;
						border-top:3px solid #d4b8a3;
						box-shadow:0px 20px 40px rgba(0, 0, 0, 0.1);
						
						li {
							margin:0;
							padding:0;
							display:block;
							
							a {
								padding:8px 10px;
								display:block;
								font-size:16px;
								line-height:28px;
								border-bottom:1px solid @green;
							}
							
							&.menu-item-has-children {
								
								&:hover {
									
									> a {
										background:@white;
									}
								}
								
								&:after {
									content:'\f054';
									position:absolute;
									top:15px;
									right:15px;
									color:@green;
									font-size:14px;
									line-height:14px;
									font-family:fontawesome;
									.transition;
								}
								
								.sub-menu {
									left:250px;
									top:-3px;
								}	
							}
						}
					}
				}
			}
		}
	}
}

.page_header {
	margin:100px 0 0 0;
	position:relative;
	.backgroundcover;
	
	&:after {
		content:'';
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		background:rgba(64, 74, 64, 0.65);
	}
	
	.page_header_div {
		padding:100px 0;
		position:relative;
		z-index:10;
		text-align:center;
		
		h1 {
			margin:0;
			color:@white;
			font-size:40px;
			line-height:55px;
		}
		
		.breadcrumbs {
			color:#fff;
			
			a {
				color:@greenlight;
				
				&:hover {
					text-decoration:underline;
				}
			}
		}
	}
}

.page_content {
	min-height:200px;
	
	.page_div {
		padding:50px 0;
		
		&.even {
			background:#fff;
		}
		
		&.slider {
			margin:50px 0 0 0;
			padding:0;
			
			.slide {
				position:relative;
				.backgroundcover;
				
				&:after {
					content:'';
					width:100%;
					height:100%;
					position:absolute;
					top:0;
					left:0;
					z-index:1;
					background:#404437;
					opacity:0.7;
				}
				
				.intro_slide_content {
					height:600px;
					position:relative;
					z-index:10;
					display:flex;
					align-items: center;
					
					.intro_slide_content_inner {
						color:@white;
						
						h1 {
							font-size:50px;
							line-height:65px;
						}
						
						p {
							margin:25px 0;
						}
					}
				}	
			}
			
			
			
			.slick-dots {
				width:inherit;
				display:inline-block !important;
				bottom:80px;
				left:50%;
			}
		}
		
		&.kolom_1 {
			
			li {
				line-height:inherit;
			}
		}
		
		&.page_reviews {
			
			.reviews_slider {
				margin:30px 0;
				
				.review {
					margin:25px;	
					padding:100px 30px 30px 30px;
					position:relative;
					background:@white;
					box-shadow:0px 0 40px rgba(0, 0, 0, 0.3);
					
					&:after {
						content:'“';
						position:absolute;
						top:30px;
						left:30px;
						color:@pink;
						font-size:125px;
						line-height:95px;
						.bold;
					}
						
					p {
						font-size:16px;
						line-height:28px;
						font-style:italic;
					}
					
					.review_info {
						margin:20px 0 0 0;
						
						h4 {
							margin:0;
						}
					}
				}
				
				.slick-dots {
					width:inherit;
					display:inline-block !important;
					padding:2px 20px 8px 25px;
					bottom:-50px;
					left:50%;
					background:@white;
					border-radius:50px;
					-webkit-border-radius:50px;
					box-shadow:0px 0px 40px rgba(0, 0, 0, 0.3);
					.transform(translateX(-50%));
				}
			}
		}
		
		&.page_linkblokken {
			
			.linkblokken {
				margin:30px 0 0 0;
				display:flex;
				text-align:center;
				gap:40px;
				
				.linkblok {
					flex:1;
					padding:30px;
					position:relative;
					background:@white;
					box-shadow:0px 0 40px rgba(0, 0, 0, 0.2);
					
					.linkblok_image {
						width:200px;
						height:200px;
						border-radius:200px;
						display:inline-block;
						.backgroundcover;
						border:5px solid @black;
						.transform(translateY(-50px));
					}
					
					.linkblok_inner {
						position:relative;
						z-index:10;
						text-align:left;
						
						p {
							margin:0 0 25px 0;
							font-size:16px;
							line-height:30px;
						}
					}
				}
			}
		}
		
		&.page_personen {
			
			.teamlid {
				padding:20px;
				text-align:center;
				background:@white;
				border-radius:25px;
				-webkit-border-radius:25px;
				box-shadow:0px 0px 40px rgba(0, 0, 0, 0.3);
				
				img {
					width:80%;
					margin:-50px 0 0 0;
					border-radius:2000px;
					-webkit-border-radius:2000px;
				}
				
				h2 {
					margin:25px 0;
					font-size:20px;
					line-height:30px;
				}
				
				.button {
					margin:30px 0 0 0;
				}
			}
		}
		
		&.tekst_foto {
			
			.tekst_foto_inner {
				display:flex;
				gap:100px;
				
				&.afbeelding_links {
					flex-direction: row-reverse;
					
					.tekst_foto_inner_text {
					}
				}
				
				.tekst_foto_inner_text {
					flex:3;
					padding:50px 0;
					
					.text {
						margin:0 0 25px 0;
					}
				}
				
				.tekst_foto_inner_image {
					flex:2;
					.backgroundcover;
				}
				
				.tekst_foto_inner_image_mobile {
					display:none;
				}
			}
		}
		
		&.scheidingsteken {
			
			hr {
				border-top:1px solid @green;
			}
		}
		
		&.knoppen {
			
			.knoppen {
				display:flex;
				gap:50px;
				text-align:center;
				
				.knop {
					flex:1;
				}
			}
		}
	}
}

footer {
	padding:50px 0;
	color:@white;
	background:@black;
	
	h3 {
		margin:0 0 20px 0;
	}
	
	.social {
		
		a {
			width:45px;
			display:inline-block;
			margin:0 10px 0 0;
			padding:7px 0;
			color:#fff;
			font-size:25px;
			text-align:center;
			background:@green;
			border-radius:50px;
			-webkit-border-radius:50px;
			
			&:hover {
				color:#fff;
				background:none;
			}
		}
	}
	
	.days {
		
		.day {
				width:100px;
		}
	}
	
	ul {
		margin:0;
		padding:0;
		list-style:none;
		
		li {
			margin:15px 0;
			padding:0;
			
			span {
				width:40px;
				display:inline-block;
			}
			
			a {
				color:@white;
			
				&:hover {
					text-decoration:underline;
				}
			}
		}
	}
}

.footer_bottom {
	padding:30px 0;
	color:@white;
	background:#594b3d;
	
		
		a {
			margin:0 0 0 30px;
			color:@greenlight;
			
			&:hover {
				text-decoration:underline;
			}
		}
}

/*=================================================================== Global ===================================================================*/

input, textarea {
	width:100% !important;
	margin:0 0 15px 0;
	padding:10px 5px;
	font-size:14px;
	font-family:Arial, Helvetica;
	border:1px solid @green;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	.transition;
	
	&:focus {
		border:1px solid @pink;
	}
}

.button {
	display:inline-block;
	position:relative;
	padding:10px 75px 10px 25px;
	color:#fff;
	font-size:20px;
	line-height:33px;
	.bold;
	border-radius:50px;
	-webkit-border-radius:50px;
	background:#d4b8a3;
	
	&:before {
		content:'';
		width:39px;
		height:39px;
		position:absolute;
		top:7px;
		right:7px;
		border-radius:50px;
		-webkit-border-radius:50px;
		background:#fff;
	}
	
	&:after {
		content:'\f054';
		position:absolute;
		top:19px;
		right:19px;
		color:#d4b8a3;
		font-size:16px;
		line-height:16px;
		font-family:fontawesome;
		.transition;
	}
	
	&:hover {
		.transform(translateY(-5px));
	}
}

/*=================================================================== Responsive ===================================================================*/


@media only screen and (min-width: 960px) and (max-width: 1199px) {

header {
	height:70px;
	
	.menu-hoofdmenu-container {
		
		ul {
			
			li {
				margin:0 20px;
				padding:20px 0;
				
				a {
					font-size:18px;
					line-height:28px;
				}
			}
		}
	}
}

.front_intro {
	padding:125px 0 75px 0;
	
	.front_intro_inner {
		
		h1 {
			font-size:35px;
			line-height:40px;
		}
	}
	
	.intro_photo {
		width:360px;
		height:360px;
		
		&:before {
			content:'';
			width:390px;
			height:390px;
			top:-21px;
			left:-21px;
		}
		
		&:after {
			content:'';
			width:300px;
			height:300px;
			top:-70px;
			right:-40px;
		}
	}
}

.front_tekstblok {
	padding:75px 0;
	
	.front_tekstblok_inner {
		
		h1 {
			font-size:35px;
			line-height:40px;
		}
	}
}

.front_team {
	padding:75px 0;
}

.page_content {
	
	.page_div {
		
		&.page_linkblokken {
			
			.linkblokken {
				
				.linkblok {
					width:200px;
					height:200px;
				}
			}
		}
	}
}


}


@media only screen and (max-width: 959px) {
	
body {
	font-size:15px;
	line-height:28px;
}

header {
	min-height:50px;
	height:inherit;
	
	.grid_2, .grid_10 {
		margin:0 2.5%;
	}
	
	.menu_toggle {
		display: block;
		float: right;
		margin: 10px 0 0 0;
		width: 120px;
		color: @green;
		font-size: 24px;
		font-family: 'Gotham', Helvetica, Arial;
		
		div {
			display:inline-block;
		}
	}
	
	.logo {
		width:70px;
		margin:5px 0 0 0;
		
		&:before {
			content:'';
			width:80px;
			height:80px;
			top:-8px;
			left:-10px;
		}
	}
	
	.menu-hoofdmenu-container {
		display:none;
		margin:25px 0 0 0;
		
		&.toggled-on {
			display:block;
		}
		
		ul {
			text-align:center;
			
			li {
				margin:0;
				padding:0;
				display:block;
				
				&:hover {
					cursor:pointer;
				}
				
				a {
					padding:10px 0;
					display:block;
					border-bottom:1px solid #293329;
					font-size:18px;
					line-height:25px;
				}
				
				&.menu-item-has-children {
					position:relative;
					
					> a {
					
						&:after {
							display:none;
						}
					}
					
					&:hover {
						
						.sub-menu {
							display:none;
						}
					}
				
					.arrow {
						position:absolute;
						display:block;
						right:0;
						top:0;
						padding:6px 15px;
						.transition;
						
						&:after {
							content:'\f107';
							color:@green;
							font-size:27px;
							line-height:27px;
							font-family:Fontawesome;
						}
					}
					
					.sub-menu {
						width:100%;
						margin-top:0;
						padding:0;
						position:relative;
						top:0;
						opacity:1;
						visibility:visible;
						text-align:center;
						background:none;
						border:none;
						box-shadow:none;
						
						li {
							padding:0;
							
							&.menu-item-has-children {
								
								&:after {
									display:none;
								}
								
								.sub-menu {
									left:0;
									top:0;
								}
							}
						}
					}
				}
				
				&.show_sub {
					
					> .arrow {
						top:-5px;
						.transform(rotate(180deg));
					}
					
					> .sub-menu {
						opacity: 1 !important;
						visibility: visible !important;
						display:block !important;
					}
				}
			}
		}
	}
}

.page_header {
	margin:50px 0 0 0;
	
	.page_header_div {
		padding:50px 0;
		background:none;
		
		h1 {
			font-size:30px;
			line-height:45px;
		}
	}
}

.page_content {
	
	.page_div {
		padding:30px 0;
		
		&.slider {
			
			.slide {
				
				.intro_slide_content {
					height:450px;
					
					.intro_slide_content_inner {
						
						h1 {
							font-size:30px;
							line-height:40px;
						}
					}
				}
			}
		}
		
		&.page_linkblokken {
			
			.linkblokken {
				width:95%;
				margin:0 2.5%;
				gap:10px;
				flex-wrap:wrap;
				
				.linkblok {
					flex:1 1 40%;
					padding:15px;
					
					.linkblok_image {
						width:100px;
						height:100px;
						.transform(translateY(0px));
					}
				}
			}
		}
		
		&.page_personen {
			
			.teamlid {
				margin:0 0 40px 0;
			}
		}
		
		&.knoppen {
			
			.knoppen {
				display:block;
				
				.knop {
					margin:5px 0;
					
					.button {
					}
				}
			}
		}
		
		&.tekst_foto {
			
			.tekst_foto_inner {
				display:block;
				
				.tekst_foto_inner_text {
					padding:0 0 50px 0;
				}
				
				.tekst_foto_inner_image {
					display:none;
				}
				
				.tekst_foto_inner_image_mobile {
					width:90%;
					display:block;
					margin:0 auto;
				}
			}
		}
	}
}

.footer_bottom {
	text-align:center;
	
	.text-right {
		text-align:center;
	}
}

.button {
	font-size:15px;
	line-height:27px;
	padding:6px 50px 6px 15px;
	
	&:before {
		width:33px;
		height:33px;
		top:3px;
		right:3px;
	}
	
	&:after {
		top:13px;
		right:14px;
		font-size:14px;
		line-height:14px;
	}
}

.alignright, .alignleft {
	float:none;
	width:90%;
	margin:0 5%;
}


}


@media only screen and (max-width: 768px) {
	
.front_reviews {
	
	.reviews_slider {
		
		.slick-list {
			overflow:visible !important;
		}
		
		.review {
			margin:0 10px;
		}
	}
}

.page_content {
	
	.page_div {
		
		&.page_linkblokken {
			
			.linkblokken {
				
				.linkblok {
					
					.linkblok_inner {
						
						h3 {
							font-size:18px;
							line-height:28px;
						}
					}
				}
			}
		}
		
		&.page_reviews {
			
			.reviews_slider {
				
				.slick-list {
					overflow:visible !important;
				}
				
				.review {
					margin:0 10px;
				}
			}
		}
	}
}

.footer_bottom .grid_10 a {
	display:block;
	margin:0 10px;
}

}	 


@media only screen and (max-width: 480px) {

.front_intro {
	
	.intro_photo {
		
		&:after {
			content:'';
			width:200px;
			height:170px;
			top:-30px;
			right:-22px;
		}
	}
}

.page_content {
	
	.page_div {
		
		&.page_linkblokken {
			
			.linkblokken {
				
				.linkblok {
					
					.linkblok_inner {
						
						h3 {
							font-size:15px;
							line-height:25px;
						}
					}
				}
			}
		}
		
		&.page_tekstblok_afbeelding {
			
			.tekstblok_afbeelding_photo {
				width:250px;
				height:250px;
				border-radius:400px;
				-webkit-border-radius:400px;
				
				&:before {
					content:'';
					width:270px;
					height:270px;
					top:-5px;
					left:-15px;
				}
			}
		}
	}
}

}