@import url("reset.less");

html {
	overflow:hidden;
	overflow-y:scroll;
}

body {
	color:#000;
	font-size:15px;
	line-height:25px;
	.raleway;
	background:#fff;
}

header {
	width:100%;
	position:relative;
	background:#fff;
	
	.topbar {
		padding:15px 0 55px 0;
		
		.logo {
			margin:0 0 0 20px;
		}
		
		.link {
			margin:10px 20px 0 10px;
			display:inline-block;
			color:#000;
			font-size:13px;
			.ralewaybold;
			
			&:hover {
				color:@blue;
			}
		}
	}
	
	.menu_toggle, .cart_button {
		display:none;
	}
	
	nav {
		width:100%;
		position:absolute;
		bottom:-32px;
		z-index:1000;
		
		&.fixed {
			position:fixed;
			top:0;
			bottom:inherit;
			background:@blue;
			.transition;
			
			.navigation {
				
				.logo {
					opacity:1;
				}
				
				.shop {
					border-radius:0 !important;
				}
				
				.cart_button {
					position:relative;
					top:0;
				}
			}
		}
		
		.mobileheader {
			display:none;
		}
		
		.navigation {
			position:relative;
			display:flex;
			align-items: center;
			justify-content: space-between;
			color:#fff;
			background:@blue;
			
			.logo {
				width:260px;
				margin:0 0 0 20px;
				opacity:0;
				.transition;
			}
	
			.menu-hoofdmenu-container {
			
				.nav-menu {
					display:inline-block;
					margin:0;
					padding:0;
					list-style:none;
					
					li {
						margin:0;
						padding:0;
						display:inline-block;
						
						&:hover {
							
							.sub-menu-wrap {
								margin-top:0;
								opacity:1;
								visibility:visible;
							}
						}
						
						&.current-menu-item > a, a:hover {
							color:@orange;
						}
						
						&.menu-item-has-children {
							
							.sub-menu-wrap {
								text-align:center;
								-webkit-box-shadow:inset 0 5px 5px 0 rgba(0,0,0,0.05);
								box-shadow:inset 0 5px 5px 0 rgba(0,0,0,0.05);
							
								.sub-menu {
									max-width:1200px;
									margin:0 auto;
						  		text-align:center;
						  		
						  		.sub-menu-wrap {
							  		top:0;
									}
								}
							}
							
							> a {
								position:relative;
							}
						}
						
						&.hover {
							
							a {
								position:relative;
								
							}
						}
						
						a {
							margin:0;
							padding:23px 7px;
							display:block;
							color:#fff;
							font-size:15px;
							.raleway;
							text-align:left;
						}
						
						.sub-menu-wrap {
							width:100%;
							margin-top:0;
							position:absolute;
							left:0;
							opacity:0;
							visibility:hidden;
							background:@blue;
							.transition;
								
							.sub-menu {
								margin:0;
								padding:10px 0;
								
								.head-menu {
									width:230px;
									display:inline-block;
									margin:0 20px;
									padding:20px 0;
									vertical-align:top;
									text-align:left;
								
									a {
										padding:0 0 10px 0;
										color:#fff;
										.ralewaybold;
										border-bottom:1px solid #fff;
										
										&:hover {
											color:@orange;
										}
									}
									
									.sub-menu-wrap {
										width:inherit;
										position:relative;
										left:inherit;
										text-align:left;
										border-bottom:none;
										-webkit-box-shadow:none;
										box-shadow:none;
										
										.sub-menu {
											columns:1;
								  		-webkit-columns:1;
								  		-moz-columns:1;
										}
								
										li {
											display:block;
											margin:0;
											
											a {
												padding:0;
												color:#fff;
												font-size:14px;
												line-height:19px;
												font-family:Helvetica, Arial;
												border:none;
								    		
								    		&:hover {
													color:@orange;
								    		}
											}
										}
									}
								}
							}
						}
					}
				}
				
				.link {
					margin:0 10px;
					
					&:hover {
						
						svg {
							fill:@orange;
						}
					}
					
					svg {
						width: 20px;
						vertical-align: sub;
						fill:#fff;
					}
				}
				
				.cart_button {
					position:relative;
					z-index:100000000;
					padding:7px 5px;
					display:inline-block;
					vertical-align:middle;
					cursor:pointer;
					
					svg {
						width:23px;
						position:relative;
						z-index:10;
						fill:#fff;
					}
					
					.cart-contents-count {
						padding:0px 7px;
						position:absolute;
						top:-3px;
						right:-8px;
						color:#fff;
						font-size:10px;
						line-height:19px;
						.bold;
						background:red;
						border-radius:50px;
						z-index:100;
					}
				}
			}
			
			.button {
				padding:15px 25px 16px 25px;
				border-radius:0;
				color:#fff;
				line-height:33px;
				background:@green;
				border-radius:0;
				
				&:hover {
					color:#fff;
					background:@orange;
				}
			}
		}
	}
}

.cta_buttons {
	position:fixed;
	right:0;
	top:200px;
	z-index:100000;
	
	a {
		width:150px;
		display:block;
		padding:10px;
		color:#fff;
		font-size:15px;
		background:@blue;
		border-bottom:1px solid #fff;
		.transform(translateX(130px));
		
		&.last {
			border-bottom:none;
		}
		
		&.whatsapp {
			position:relative;
			
			&:before {
				content:'1';
				padding:5px;
				color:#fff;
				font-size:10px;
				line-height:6px;
				position:absolute;
				top:-5px;
				left:-5px;
				background:red;
				border-radius:15px;
				-webkit-border-radius:15px;
			}
		}
		
		&:hover {
			background:#000;
			.transform(translateX(0));
		}
		
		i {
			display:inline-block;
			margin:0 10px 0 0;
			font-size:25px;
		}
	}
}

.page_header {
	width:100%;
	height:300px;
	margin:0 0 50px 0;
	display:table;
	position:relative;
	.backgroundcover;
	
	&:after {
		content:'';
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		background:rgba(0, 0, 0, 0.5);
	}
	
	.header_div {
		display:table-cell;
		vertical-align:middle;
		position:relative;
		z-index:10;
		
		.title {
			color:#fff;
			font-size:55px;
			line-height:65px;
		}
	}
}

.page_header_2 {
	width:100%;
	padding:50px 0 0 0;
		
	.title {
		font-size:55px;
		line-height:65px;
	}
		
	.subtitle {
		font-size:35px;
		line-height:45px;
		.raleway;
	}
}

.page_div {
		
	.title {
		color:#000;
		font-size:30px;
		line-height:40px;
	}
	
	&.fotoslider {
		
		.slide {
			width:100%;
			height:400px;
			position:relative;
			padding-bottom:30px;
			display:table;
			.backgroundcover;
			
			&:after {
				content:'';
				width:100%;
				height:100%;
				position:absolute;
				top:0;
				left:0;
				background: linear-gradient(to right,  rgba(7,26,54,0.75) 0%,rgba(7,26,54,0.25) 100%);
			}
			
			.slide_inner {
				display:table-cell;
				vertical-align:middle;
				position:relative;
			}
			
			.row {
				position:relative;
				z-index:100;
				color:#fff;
				
				h2 {
					margin:0 0 30px 0;
					font-size:60px;
					line-height:70px;
				}
			}
		}
		
		.slick-dots {
			bottom:15px;
			display:none;
		}
	}
	
	&.intro {
		width:100%;
		height:500px;
		position:relative;
		display:table;
		.backgroundcover;
		
		&:after {
			content:'';
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			background: linear-gradient(to right,  rgba(7,26,54,0.75) 0%,rgba(7,26,54,0.25) 100%);
		}
			
		.intro_inner {
			z-index:100;
			color:#fff;
			display:table-cell;
			vertical-align:middle;
			position:relative;
		}
		
		.row {
			
			h2 {
				font-size:80px;
				line-height:90px;
			}
			
			.button {
				position:relative;
				z-index:10;
				margin:20px 0 0 0;
				box-shadow:none;
			}
		}
	}
	
	&.onze_top_5 {
		padding:25px 0;
		
		.blokken {
			display:flex;
			gap:20px;
			margin:30px 0 0 0;
			
			.blok {
				flex:1;
				height:200px;
				margin:0;
				display:block;
				position:relative;
				.backgroundcover;
				
				&:after {
					content:'';
					width:100%;
					height:100%;
					position:absolute;
					top:0;
					left:0;
					background: linear-gradient(to bottom,  rgba(7,26,54,0) 0%,rgba(7,26,54,0.3) 51%,rgba(7,26,54,1) 100%);
				}
				
				&:hover {
					.transform(translateY(-5px));
					box-shadow:5px 5px 10px rgba(0, 0, 0, 0.35);
					-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.35);
				}
				
				.blok_inner {
					position:absolute;
					z-index:10;
					left:20px;
					bottom:20px;
					color:#fff;
					
					h4 {
						margin:0 0 10px 0;
						font-size:20px;
						.ralewaybold;
					}
						
					.link {
						color:#fff;
						text-decoration:underline;
					}
				}
			}
		}
	}
	
	&.cases {
		padding:50px 0;
		
		.cases {
			display:flex;
			flex-wrap:wrap;
			gap:20px;
			
			.case {
				flex:1 1 30%;
				max-width:366px;
				background:#fff;
				box-shadow:0px 5px 5px rgba(0, 0, 0, 0.15);
				-webkit-box-shadow:0px 5px 5px rgba(0, 0, 0, 0.15);
				
				&:hover {
					.transform(translateY(-5px));
				}
				
				.case_thumbnail {
					height:200px;
					.backgroundcover;
				}
				
				.case_inner {
					padding:20px;
					color:#000;
					background:#fff;
					
					h4 {
						.ralewaybold;
					}
					
					p {
						overflow:hidden;
					}
					
					span {
						margin:15px 0 0 0;
						color:@blue;
					}
				}
			}
		}
	}
	
	&.recente_cases {
		padding:50px 0;
		color:#fff;
		background:@blue;
		
		.title {
			color:#fff;
		}
		
		.row {
			display:flex;
			align-items: center;
		}
		
		.button {
			margin:20px 0 0 0;
		}
		
		.cases {
			display:flex;
			gap:20px;
			
			.case {
				flex:1;
				background:#fff;
				box-shadow:0px 5px 5px rgba(0, 0, 0, 0.15);
				-webkit-box-shadow:0px 5px 5px rgba(0, 0, 0, 0.15);
				
				&:hover {
					.transform(translateY(-5px));
				}
				
				.case_thumbnail {
					height:200px;
					.backgroundcover;
				}
				
				.case_inner {
					padding:20px;
					color:#000;
					background:#fff;
					
					h4 {
						.ralewaybold;
					}
					
					p {
						overflow:hidden;
					}
					
					span {
						margin:15px 0 0 0;
						color:@blue;
					}
				}
			}
		}
	}
	
	&.categorieen {
		padding:50px 0;
		
		.categorieen {
			display:flex;
			flex-wrap:wrap;
			gap:30px;
			
			.categorie {
				flex:1 1 22%;
				height:200px;
				margin:0;
				display:block;
				position:relative;
				.backgroundcover;
				
				&:after {
					content:'';
					width:100%;
					height:100%;
					position:absolute;
					top:0;
					left:0;
					background: linear-gradient(to bottom,  rgba(7,26,54,0) 0%,rgba(7,26,54,0.3) 51%,rgba(7,26,54,1) 100%);
				}
				
				&:hover {
					.transform(translateY(-5px));
					box-shadow:5px 5px 10px rgba(0, 0, 0, 0.35);
					-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.35);
				}
				
				.categorie_inner {
					position:absolute;
					z-index:10;
					left:20px;
					bottom:20px;
					color:#fff;
					
					h4 {
						margin:0 0 10px 0;
						font-size:20px;
						.ralewaybold;
					}
						
					.link {
						color:#fff;
						text-decoration:underline;
					}
				}
			}
		}
	}
	
	&.categorieen_met_icons {
		padding:50px 0;
		
		.categorieen {
			display:flex;
			gap:30px;
			
			.slick-list {
				overflow:visible;
				
				.categorie {
					margin:0 10px;
				}
			}
			
			.categorie {
				flex:1;
				height:200px;
				margin:0;
				display:block;
				position:relative;
				.backgroundcover;
				
				&:after {
					content:'';
					width:100%;
					height:100%;
					position:absolute;
					top:0;
					left:0;
					background: linear-gradient(to bottom,  rgba(7,26,54,0) 0%,rgba(7,26,54,0.3) 51%,rgba(7,26,54,1) 100%);
				}
				
				&:hover {
					.transform(translateY(-5px));
					box-shadow:5px 5px 10px rgba(0, 0, 0, 0.35);
					-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.35);
				}
				
				.categorie_inner {
					position:absolute;
					z-index:10;
					left:20px;
					bottom:20px;
					color:#fff;
					
					h4 {
						margin:0 0 10px 0;
						font-size:20px;
						.ralewaybold;
					}
						
					.link {
						color:#fff;
						text-decoration:underline;
					}
				}
			}
		}
	}
	
	&.stappen {
		padding:50px 0;
		position:relative;
		background:#f2f3f5;
		
		.row {
			position:relative;
			z-index:10;
		}		
		
		.stappen_inner {
			display:flex;
			gap:40px;
			align-items: center;
			
			&.full_width {
				display:block;
				text-align:center;
				
				.stappen_inner_right {
					
					.stappen {
						
						.stap {
							flex:1 1 30%;
							max-width:373px;
						}
					}
				}
			}
			
			.stappen_inner_left {
				flex:1;
				
				.page_title {
					margin:0 0 25px 0;
					font-size:50px;
					line-height:60px;
				}
				
				.trustpilot-widget {
					width:220px;
					margin:0;
					padding:14px 10px 9px 10px;
					display:inline-block;
					vertical-align:top;
					background:#fff;
					border-radius:50px;
				}
			}
			
			.stappen_inner_right {
				flex:1;
				
				.stappen {
					display:flex;
					flex-wrap:wrap;
					gap:20px;
					
					.stap {
						flex:1 1 40%;
						padding:40px 0 80px 0;
						position:relative;
						text-align:center;
						border-radius:0 0 0 10px;
						background:#fff;
						-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
						box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
						
						.stap_icon {
							padding:15px;
							position:absolute;
							left:0;
							bottom:0;
							border-radius: 0px 10px;
							background:@blue;
							
							img {
								width:30px;
							}
						}
						
						.stap_content {
							padding:0 10px;
							
							h3 {
								font-size:20px;
							}
							
							p {
								color:#767676;
								font-size:14px;
								line-height:23px;
							}
						}
					}
				}
			}
		}
	}
	
	&.tekst_vacature_kenmerken {
		padding:50px 0;
		
		.tekst_vacature_kenmerken_inner {
			display:flex;
			gap:60px;
			
			.tekst_vacature_kenmerken_left {
				flex:4;
			}
			
			.tekst_vacature_kenmerken_right {
				flex:3;
							
				.kenmerken {
					color:#000;
					
					.kenmerk {
						margin:10px 0 0 0;
						padding:0 0 10px 0;
						
						&:before {
							content:'';
							width:100px;
							height:9px;
							display:block;
							background:@orange;
						}
						
						.kenmerk_head {
							margin:20px 0 0 0;
							font-size:20px;
							line-height:30px;
							.ralewaybold;
						}
					}
				}
			}
		}
	}
	
	&.linkblokken {
		padding:50px 0;
		
		.linkblokken {
			display:flex;
			gap:30px;
			
			.linkblok {
				flex:1;
				
				.linkblok_thumbnail {
					height:400px;
					.backgroundcover;
				}
				
				.button {
					display:block;
					padding:10px 0;
					color:#fff;
					text-align:center;
					border-radius:0;
					background:@orange;
				}
			}
		}
	}
	
	&.case_informatie {
		padding:50px 0;
		
		.title_div {
			
			.title_div_inner {
				display:inline-block;
				
				.title {
					margin:0 0 30px 0;
					font-size:70px;
					line-height:90px;
					
					span {
						color:@blue;
					}
				}
			}
		}
		
		.case_informatie_header {
			display:flex;
			gap:20px;
			align-items: center;
			
			.case_informatie_header_photo {
				flex:1;
				text-align:center;
				
				img {
					max-width:200px;
					height:auto;
				}
				
				h4 {
					color:@blue;
				}
			}
			
			.case_informatie_header_info {
				flex:3;
		
				.subtitle {
					margin:0 0 30px 0;
					font-size: 28px;
					line-height: 38px;
					font-family: 'Raleway Bold', Helvetica, Arial;
				}
			}
		}
		
		.case_informatie_specs {
			
			.case_informatie_specs_inner {
				margin:40px 0 0 0;
				display:flex;
				gap:20px;
			
				.informatie_div {
					flex:1;
					padding:20px;
					color:#fff;
					background:@orange;
					border-radius:2px;
					vertical-align:top;
					
					h5 {
						margin:0 0 10px 0;
					}
					
					a {
						margin:0 10px 0 0;
						color:#fff;
					}
				}
			}
		}
	}
	
	&.logoslider {
		background:@blue;
		opacity:0.85;
		
		&.margin-top {
			margin:50px 0 0 0;
		}
		
		.logo_slider {
			padding:30px 0 25px 0;
			
			.slick-prev {
				height:30px;
				bottom:inherit;
				left:-35px;
				top:46%;
  
			  &:before {
					content:"\f100";
					color:#fff;
					font-size:22px;
			  }
			}
			
			.slick-next {
				height:30px;
				bottom:inherit;
				right:-35px;
				top:46%;
  
			  &:before {
					content:"\f101";
					color:#fff;
					font-size:22px;
			  }
			}
			
			.logo {
				max-height:150px;
				margin:0 20px;
				
				img {
					width:auto;
					height:150px;
					margin:0 auto;
				}
			}
		}
	}
	
	&.blogs {
		padding:50px 0;
		
		.title {
			margin:0 0 30px 0;
			font-size:70px;
			line-height:90px;
		}
		
		.subtitle {
			margin:0 0 30px 0;
			font-size:38px;
			line-height:50px;
			.raleway;
		}
		
		.blogs {
			margin:30px 0 0 0;
			
			.blog {
				display:block;
				box-shadow:0px 5px 5px rgba(0, 0, 0, 0.15);
				-webkit-box-shadow:0px 5px 5px rgba(0, 0, 0, 0.15);
				
				&:hover {
					.transform(translateY(-5px));
					box-shadow:0px 5px 5px rgba(0, 0, 0, 0.25);
					-webkit-box-shadow:0px 5px 5px rgba(0, 0, 0, 0.25);
				}
				
				.blog_thumbnail {
					height:250px;
					.backgroundcover;
				}
				
				.blog_inner {
					padding:20px;
					color:#000;
					background:#fff;
					
					h4 {
						.ralewaybold;
					}
					
					p {
						min-height:60px;
					}
					
					span {
						color:@blue;
					}
				}
			}
		}
	}
	
	&.team {
		padding:50px 0;
		
		.title {
			margin:0 0 30px 0;
			font-size:70px;
			line-height:90px;
		}
		
		.subtitle {
			margin:0 0 30px 0;
			font-size: 28px;
			line-height: 38px;
			font-family: 'Raleway Bold', Helvetica, Arial;
		}
		
		.team_slider {
			display:flex;
			flex-wrap:wrap;
			gap:30px;
		}
			
		.teamlid {
			flex:1 1 22%;
			max-width:266px;
			min-height:150px;
			padding:15px 0;
			text-align:center;
			border: 1px solid #E4E4E4;
			
			.thumbnail {
				width:200px;
				height:200px;
				margin:0 auto 20px auto;
				.backgroundcover;
			}
			
			h4 {
				color:@blue;
				font-size:25px;
				line-height:35px;
			}
			
			p {
				margin:0 0 5px 0;
			}
			
			a {
				margin:0 0 5px 0;
				display:block;
				color:#000;
				
				i {
					color:@orange;
				}
			}
		}
	}
	
	&.titel_button {
		padding:50px 0;
		
		&.bluelight {
			background:@bluelight;
		}
	}
	
	&.historie {
		padding:50px 0;
		text-align:center;	
		
		.title {
			margin:0 0 30px 0;
			font-size:70px;
			line-height:90px;
			
			span {
				color:@blue;
			}
		}	
		
		.jaartallen {
			margin:25px 0 0 0;
			padding:25px 0 0 0;
			position:relative;
			text-align:left;
			
			&:before {
				content: '';
				width: 0;
				height: 100%;
				position: absolute;
				top: 0;
				left: 49.7%;
				display: block;
				border-right:2px solid rgba(234, 94, 38, 0.33);
			}
			
			.jaartal_div {
				margin:0 0 100px 0;
				position:relative;
				display:flex;
				gap:100px;
				
				&.even {
					flex-direction: row-reverse;
				}
				
				&:before {
					content: '';
					width: 13px;
					height: 13px;
					display: block;
					position: absolute;
					top:48%;
					left: 49%;
					background: #fff;
					border: 2px solid @orange;
					border-radius: 20px;
				}
				
				.jaartal_text {
					flex:1;
					padding:30px 0;
					
					.jaartal {
						font-size:25px;
						color:@orange;
						.ralewaybold;
						
						&:before {
							content:'';
							width:100px;
							margin:0 20px 0 0;
							display:inline-block;
							border-bottom:1px solid @orange;
							.transform(translateY(-5px));
						}
					}
				
					h4 {
						margin:20px 0 10px 0;
						font-size:25px;
						line-height:35px;
					}
				}
				
				.jaartal_thumbnail {
					flex:1;
					.backgroundcover;
				}
			}
		}
	}
	
	&.contact, &.tekstblok_formulier {
		padding:50px 0;
		
		.title {
			font-size:30px;
			line-height:40px;
			
			span {
				color:@blue;
			}
		}
		
		.contact {
			display:inline-block;
			vertical-align:top;
			margin:0 50px 0 0;
			padding:0;
			list-style:none;
			
			&:before {
				content:'';
				width:100px;
				height:9px;
				margin:0 0 10px 0;
				display:block;
				background:@orange;
			}
			
			li {
				margin:0 0 10px 0;
				padding:0;
				
				a {
					color:@blue;
				}
			}
		}
			
		.formulier {
			padding:30px;
			background:@bluelight;
			
			input, textarea {
				border:1px solid #fff;
				background:#fff;
			}
		}
	}
	
	&.titel {
		padding:50px 0 0 0;
		
		.title {
			margin:0 0 20px 0;
			font-size:50px;
			line-height:70px;
			
			img {
				width:auto;
				height:65px;
				vertical-align:top;
			}
			
			span {
				color:@blue;
			}
		}
		
		.subtitle {
			margin:0 0 -10px 0;
			font-size:32px;
			line-height:40px;
			.raleway;
			
			span {
				color:@blue;
			}
		}
	}
	
	&.tabbladen {
		padding:50px 0;
		
		.tabbladen_nav {
			display:flex;
			align-items:center;
			gap:5px;
			background:@bluelight;
			border-bottom:1px solid #E0E0E0;
			
			a {
				flex:1;
				max-width:250px;
				height:60px;
				display: flex;
				text-align:center;
		    align-items: center;
		    justify-content: center;
				color:#000;
				font-size:14px;
				line-height:18px;
				.raleway;
				border-bottom:5px solid @bluelight;
				
				
				&.active {
					background:@bluelight;
					border-bottom:5px solid @orange;
				}
			}
		}
		
		.tabbladen {
			
			.tabblad {
				
				.tabblad_inner {
					padding:40px;
					display:flex;
					gap:40px;
					background:@bluelight;
					
					.tabblad_left {
						flex:2;
					}
					
					.tabblad_right {
						flex:3;
					}
				}
			}
		}
	}
	
	&.tekstblok_afbeelding {
		padding:80px 0;
		
		&.zwart {
			padding:0 0 50px 0;
			
			.tekstblok_afbeelding_div {
				gap:0;
				
				.tekstblok_afbeelding_tekst {
					padding:100px 60px;
					color:#000;
					background:#f2f3f5;
					
					.title {
						color:#000;
					}
				}
			}
		}
		
		&.grijs {
			background:@bluelight;
		}
		
		.tekstblok_afbeelding_div {
			display:flex;
			gap:20px;
			
			.tekstblok_afbeelding_tekst {
				flex:1;
		
				.title {
					margin:0 0 30px 0;
					font-size:40px;
					line-height:50px;
				}
			}
			
			.tekstblok_afbeelding_afbeelding {
				flex:1;
				.backgroundcover;
			}
		}
	}
	
	&.tekstblok_formulier_2 {
		padding:80px 0;
		
		&.zwart {
			padding:0;
			
			.tekstblok_formulier_2_div {
				gap:0;
				
				.tekstblok_formulier_2_tekst {
					padding:100px 60px;
					color:#fff;
					background:#000;
					
					.title {
						color:#fff;
					}
					
					.button {
						background:none;
						border:1px solid #fff;
					}
				}
			}
		}
		
		&.grijs {
			background:@bluelight;
		}
		
		&.lichtblauw {
			background:#e8f7fc;
		}
		
		.tekstblok_formulier_2_div {
			display:flex;
			align-items:center;
			gap:20px;
			
			.tekstblok_formulier_2_tekst {
				flex:1;
		
				.title {
					margin:0 0 30px 0;
					
					span {
						color:@blue;
					}
				}
			}
			
			.tekstblok_formulier_2_formulier {
				flex:1;
				
				.formulier {
					padding:30px;
					background:@bluelight;
					
					input, textarea {
						border:1px solid #fff;
						background:#fff;
					}
					
					input[type=submit] {
						width: auto !important;
						margin: 20px 0 0 0 !important;
						padding:20px 35px !important;
						color: #fff;
						text-decoration: none;
						border: none;
						cursor: pointer;
						border-radius: 0px;
						-webkit-border-radius: 0px;
						background: #27ba3e !important;
						border: none !important;
					}
				}
			}
		}
	}
	
	&.video {
		position: relative;
	  padding-bottom: 56.25%; /* 16:9 */
	  height: 0;
	  
	  iframe {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
	  }
	}
	
	&.stappen_tekst {
		padding:200px 0 75px 0;
		position:relative;
		color:#fff;
		background:@blue;
		
		&:before {
			content:'';
			width:100%;
			height:125px;
			position:absolute;
			top:0;
			left:0;
			background:#fff;
		}
		
		.row {
			position:relative;
			z-index:100;
		}
		
		.float-right {
			height:560px;
			display:inline-table;
			
			.stappen_tekst_inner {
				display:table-cell;
				vertical-align:middle;
			}
		}
		
		.content {
			position:relative;
			
			.text-container {
				width:60%;
				position:absolute;
				top:45%;
				left:20%;
				text-align:center;
			}
		}
		
		.stappen {
			height:560px;
			position:relative;
			
			&:before {
				content:'';
				width:460px;
				height:460px;
				display:block;
				position:absolute;
				top:45px;
				left:45px;
				border:5px solid #fff;
				border-radius:1000px;
				box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
				-webkit-box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
			}
			
			.stap {
				height:560px;
				display:table;
				
				.stap_inner {
					position:relative;
					display:table-cell;
					vertical-align:middle;
					text-align:center;
					
					&.stap_inner_1 {
						
						.icon {
							position:absolute;
							top:0;
							left:50%;
							margin:0 0 0 -50px;
						}
					}
					
					&.stap_inner_2 {
						
						.icon {
							position:absolute;
							bottom:130px;
							right:30px;
							margin:0 0 0 -50px;
						}
					}
					
					&.stap_inner_3 {
						
						.icon {
							position:absolute;
							bottom:130px;
							left:30px;
						}
					}
					
					h4 {
						text-transform:uppercase;
					}
					
					p {
						width:250px;
						margin:0 auto;
					}
				
					.icon {
						width:60px;
						height:60px;
						padding:20px;
						text-align:center;
						background:#fff;
						border-radius:100px;
						-webkit-border-radius:100px;
						box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
						-webkit-box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
					}
				}
			}
			
			.slick-dots {
				bottom:0;
				
				.slick-active {
					
					button {
						background:#000;
					}
				}
			}
		}
		
		.subtitle {
			margin:0 0 10px 0;
			color:#fff;
			font-size:20px;
			line-height:30px;
			text-transform:uppercase;
			.ralewaybold;
			
			div {
				display:inline-block;
				position:relative;
			}
		}
		
		.title {
			color:#fff;
			font-size:50px;
			line-height:60px;
			text-transform:uppercase;
			.ralewaybold;
		}
		
		.tekst {
			padding:20px;
		}
	}
	
	&.referentie {
		padding:50px 0;
		
		.thumbnail {
			width:200px;
			height:200px;
			margin:0 auto 20px auto;
			border-radius:200px;
			-webkit-border-radius:200px;
			box-shadow:0px 5px 5px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow:0px 5px 5px rgba(0, 0, 0, 0.3);
			.backgroundcover;
		}
	}
	
	&.referenties {
		padding:50px 0;
		
		.reviews {
			overflow:visible;
			margin:0 0 50px 0;
			
			.slick-track {
				display: flex !important;
			}
			
			.slick-slide {
				height: inherit !important;
			}
			
			.review {
				margin:20px;
				padding:25px;
				position:relative;
				background:#fff;
				border-radius:5px;
				-webkit-box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.2);
				box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.2);
				
				.cijfer {
					width:45px;
					position:absolute;
					top:20px;
					right:20px;
					display:inline-block;
					padding:10px 0;
					color:#fff;
					font-size:20px;
					text-align:center;
					.ralewaybold;
					background:#FFBA00;
					border-radius:50px;
				}
				
				.stars {
					
					i {
						margin:0 5px 0 0;
						color:#FFBA00;
						font-size:20px;
					}
				}
				
				.tekst {
					margin:25px 0;
					font-size:13px;
					line-height:23px;
				}
			}
			
			.slick-prev, .slick-next {
				width:35px;
				height:35px;
				top:inherit;
				left:inherit;
				right:20px;
				bottom:-50px;
				background:@blue;
				border-radius:50px;
				
				&:before {
					color:#fff;
				}
			}
			
			.slick-prev {
				right:70px;
			}
		}
	}
	
	&.quote {
		padding:100px 0;
		position:relative;
		.backgroundcover;
		
		&:after {
			content:'';
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			background:rgba(0, 0, 0, 0.3);
		}
		
		.row {
			position:relative;
			z-index:10;
			color:#fff;
		}
	}
	
	&.column1, &.columns2, &.columns3, &.columns4 {
		padding:50px 0;
		
		&.bg {
			position:relative;
			.backgroundcover;
			
			&:after {
				content:'';
				width:100%;
				height:100%;
				position:absolute;
				top:0;
				left:0;
				background:rgba(0, 0, 0, 0.5);
			}
			
			.row {
				position:relative;
				z-index:10;
				color:#fff;
				
				.title {
					color:#fff;
				}
			}
		}
		
		.title {
			margin:0 0 30px 0;
			font-size:60px;
			line-height:50px;
			
			span {
				color:@blue;
			}
		}
		
		.kolom_title {
			font-size:28px;
			line-height:38px;
			.ralewaybold;
			
			span {
				color:@blue;
			}
		}
		
		ul {
			margin:0 0 0 20px;
			list-style:none;
			
			li {
				margin:0 0 10px 0;
				padding-left:35px;
				text-indent:-36px;
				
				&:before {
					content:'\f00c';
					width:25px;
					display:inline-block;
					margin:0 10px 0 0;
					padding:4px 0px 3px 0px;
					font-size:12px;
					text-indent:0;
					color:#fff;
					text-align:center;
					font-family:fontawesome;
					border-radius:30px;
					-webkit-border-radius:30px;
					background:@orange;
				}
			}
		}
		
		.columns4_slider {
			display:none;
			
			.slick-list {
				overflow:visible;
			}
			
			.columns4_slide {
				margin:0 10px;
			}
		}
	}
	
	&.columns3 {
		padding:50px 0;
	}
	
	&.vacaturepagina {
		padding:0 0 50px 0;
		position:relative;
		
		.vacature_filter {
			padding:20px;
			background:@bluelight;
			
			h3 {
				padding:0 0 10px 0;
				color:@blue;
				border-bottom:2px solid #000;
			}
		
			.filter {
				position:relative;
				
				a {
					padding:10px 0;
					display:block;
					position:relative;
					color:#000;
					.ralewaybold;
				}
			}
			
			.button {
				display:block;
				margin:15px 0 0 0;
				padding:10px;
				color:#fff;
				text-align:center;
				border-radius:0;
				-webkit-border-radius:0;
				background:@blue;
			}
			
			ul {
				margin:0;
				padding:0;
				list-style:none;
				
				li {
					margin:0 0 5px 0;
					padding:0;
					color:#000;
					
					label {
						display:block;
						
						input[type=checkbox] {
							width:inherit !important;
						}
					}
				}
			}
		}
		
		.grid_9 {
			position:relative;
		}
		
		/*.vacature_filters {
			height:700px;
			overflow:hidden;
			
			&.show {
				height:inherit;
			}
			
			.grid_4 {
				width:410px;
			}
		}
		
		.vacatures_more {
			position:absolute;
			bottom:-40px;
			left:50%;
			margin-left:-70px;
			z-index:100;
			
			&.show {
				
				&:before {
					content:'minder laden';
				}
			}
			
			&:before {
				content:'Meer laden';
			}	
		}*/
		
		.cases {
			display:flex;
			flex-wrap:wrap;
			gap:30px;
			
			.case {
				flex:1 1 45%;
				display:block;
				color:#000;
				box-shadow:0px 0 5px rgba(0, 0, 0, 0.3);
				-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3);
				
				.case_thumb {
					width:100%;
					height:250px;
					display:block;
					.backgroundcover;
				}
				
				.case_inner {
					padding:20px;
				
					h3 {
						width:90%;
						word-wrap:break-word;
						-webkit-hyphens: auto;
						-moz-hyphens: auto;
						-ms-hyphens: auto;
						hyphens: auto;
						color:#000;
						font-size:18px;
						line-height:28px;
						.bold;
					}
					
					.specs {
						margin:20px 0;
						
						div {
							display:inline-block;
							color:#000;
							margin:0 20px 0 0;
							
							i {
								margin:0 5px 0 0;
							}
						}
					}
					
					span {
						color:@orange;
						
						&:after {
							content:"\f101";
							display:inline-block;
							margin:0 0 0 10px;
							font-family:fontawesome;
						}
					}
				}
			}
		}
	}
	
	&.fotos {
		padding:50px 0;
		background:@bluelight;
		
		.slider {
			margin:0 0 50px 0;
			
			.foto_slide {
				height:350px;
				margin:10px;
				position:relative;
				.backgroundcover;
				.transition;
			}
			
			.slick-prev {
				left:45%;
			}
			
			.slick-next {
				right:45%;
			}
			
			.slick-prev, .slick-next {
				bottom:-40px;
			}
			
			.slick-prev:before, .slick-next:before {
				width:30px;
				height:30px;
				display:block;
				color:#fff;
				font-size:20px;
				line-height:30px;
				background:@blue;
				border-radius:50px;
			}
		}
	}
	
	&.webshop {
		padding:50px 0 0 0;
		
		.page-title, .woocommerce-result-count, .woocommerce-ordering {
			display:none;
		}
		
		.goback {
			margin:0 0 20px 0;
			padding:5px 40px;
			display:inline-block;
			color:#000;
			border:1px solid #000;
			
			&:hover {
				color:#fff;
				background:#000;
			}
		}
		
		.products {
			
			.product {
				text-align:left;
				
				a {
					display:block;
					position:relative;
					
					.product_image {
						width:100%;
						height:175px;
											
						img {
							width:auto;
							max-height:175px;
							margin:0 auto;
							border-radius:5px;
						}
					}
					
					h2 {
						height:70px;
						margin:10px 0 0 0;
						color:#000;
						line-height:25px;
						
						mark {
							display:none;
						}
					}
					
					.price {
						margin:0 0 15px 0;
						color:#000;
					}
				}
				
				.button {
					display:block;
					margin:0;
					padding:15px 0;
					color:#fff;
					text-align:center;
					.raleway;
					background:@green;
					border-radius:0;
					
					&:after {
						display:none;
					}
				}
			}
		}
		
		.woocommerce-product-gallery {
			width:61% !important;
			
			.flex-viewport {
				width:82%;
				float:right;
			}
			
			.woocommerce-product-gallery__image {
				
				img {
					max-height:436px;
					width:auto;
					margin:0 auto;
					border-radius:5px;
				}
			}
			
			.flex-control-thumbs {
				width:14%;
				float:left;
				
				li {
					width:100% !important;
					float:none !important;
					margin:0 0 13px 0 !important;
					overflow:hidden;
					border-radius:5px;
				}
			}
		}
		
		.summary {
			width:35% !important;
			
			.product_title {
				display:block;
				color:@blue;
				font-size:30px;
				line-height:38px;
				.raleway;
			}
			
			.price {
				margin:0;
				color:#000 !important;
				font-size:20px;
				.raleway;
				
				&:after {
					content:' ex btw';
				}
			}
			
			.woocommerce-product-details__short-description {
				margin:30px 0;
				padding:30px 0;
				border-top:1px solid #000;
				border-bottom:1px solid #000;
			}
			
			.shop_usps {
				margin:0 0 30px 0;
				padding:0 0 30px 0;
				border-bottom:1px solid #000;
				
				.usp {
					
					span {
						width:20px;
						margin:0 20px 0 0;
						display:inline-block;
						text-align:center;
					}
					
					div {
						display:inline-block;
						
						a {
							color:#000;
							text-decoration:underline;
						}
					}
				}
			}
			
			.cart {
				display:flex;
				
				.quantity {
					flex:1;
					float:none;
					
					.qty {
						padding:18px 5px !important;
					}
				}
				
				.single_add_to_cart_button {
					flex:5;
					padding:15px;
					float:none;
					background:@green !important;
					
					&:after {
						display:none;
					}
				}
			}
			
			.product_meta {
				display:none;
			}
		}
		
		.related {
			margin:0 !important;
			
			> h2 {
				margin:0 0 40px 0;
				text-align:center;
				.raleway;
			}
		}
	}
	
	.woocommerce-error, .woocommerce-info, .woocommerce-message {
		border-top-color:@blue !important;
		background:#fff !important; 
		
		&:before {
			color:@blue !important;
		}
		
		a {
			color:@blue;
		}
	}
	
	.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
		background:@blue !important;
		border:2px solid @blue !important;
		
		&:hover {
			background:#000 !important;
			border:2px solid #000 !important;
		}
	}
}

.page_klantcase {
	position:relative;
	padding:0 0 50px 0;
	z-index:100;
	background:#dde5f1;
	
	.klantcase_div {
		padding:50px 0;
		
		.thumbnail {
			width:250px;
			margin:0 0 20px 0;
			border-radius:250px;
			-webkit-border-radius:250px;
			box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
		}
	}
	
	.klantcase_quote {
		padding:50px 0;
		background:#fff;
		
		.quote {
			position:relative;
			text-align:center;
			color:#000;
			font-size:30px;
			line-height:40px;
			.raleway;		
		}
	}
	
	.klantcase_info {
		
		h2 {
			height:70px;
		}
		
		.medewerker {
			margin:30px 0 0 0;
			padding:25px;
			display:block;
			color:#000;
			text-align:center;
			background:#fff;
			box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);	
		
			.thumbnail {
				width:250px;
				margin:0 0 20px 0;
				border-radius:250px;
				-webkit-border-radius:250px;
				box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
				-webkit-box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
			}		
			
			a {
				color:@blue;
				
				&:hover {
					text-decoration:underline;
				}
			}
		}
		
		.diensten {
			margin:30px 0 0 0;
			display:block;
			color:#000;
			background:#fff;
			box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);
			
			a {
				display:inline-block;
				position:relative;
				padding:25px 40px;
				color:#000;
				font-size:30px;
				line-height:40px;
				.raleway;
				
				&:hover {
					
					&:after {
						margin:0 5px 0 30px;
					}
				}
				
				&:after {
			    content:'\f105';
			    margin:0 5px 0 20px;
			    color:@blue;
					font-family:fontawesome;
					.transition;
				}
			}
		}
	}
}

footer {
	position:relative;
	padding:50px 0;
	color:#fff;
	.raleway;
	background:#071A36;
	
	&.big_footer {
		margin:300px 0 0 0;
	}
	
	.footer_teksblok {
		margin-top:-300px;
		margin-bottom:50px;
		padding:40px;
		display:flex;
		align-items: center;
		gap:20px;
		color:#000;
		background:#fff;
		box-shadow:0px 3px 15px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow:0px 3px 15px rgba(0, 0, 0, 0.2);
		
		.footer_teksblok_blok_1 {
			flex:3;
		
			.title {
				font-size:60px;
				line-height:70px;
				
				span {
					color:@blue;
				}
			}
		}
		
		.footer_teksblok_blok_2 {
			flex:2;
		}
		
		input[type=submit] {
			background:@blue !important;
		}
	}
	
	.footer-div {
		
		&.contact {
			
			ul {
				
				li {
					
					&:before {
						display:none;
					}
					
					span {
						width:25px;
						display:inline-block;
						color:@orange;
					}
				}
			}
		}
		
		h3 {
			font-size:20px;
			line-height:25px;
		}
		
		ul {
			margin:30px 0 0 0;
			padding:0;
			list-style:none;
			
			li {
				margin:0 0 10px 0;
				padding:0;
				.raleway;
				
				&:before {
					content:"\f0da";
					display:inline-block;
					margin:0 10px 0 0;
					color:@orange;
					font-family:fontawesome;
				}
				
				a {
					color:#fff;
					.raleway;
					
					&:hover {
						text-decoration:underline;
					}
				}
			}
		}
		
		.social_media {
			
			a {
				display:inline-block;
				margin:10px 20px 10px 0;
				
				i {
					display:block;
					color:#fff;
					font-size:25px;
					text-align:center;
				}
			}
		}
	}
}

.footerbottom {
	padding:30px 0;
	text-align:center;
}

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

input, textarea {
	width:100% !important;
	padding:20px !important;
	font-size:14px;
	font-family:Arial, Helvetica;
	border:1px solid @bluelight;
	background:@bluelight;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border-radius:5px;
	.transition;
	
	&:focus {
		border:1px solid @blue;
	}
}

.gform_legacy_markup_wrapper li.hidden_label input {
	margin-top:0 !important;
}

.gform_wrapper {
	
	ul {
				
		li {
			margin:0 !important;
			padding:0 !important;
			text-indent:0 !important;
			
			&:before {
				padding:0 !important;
			}
			
			div {
				margin:0 !important;
			}
			
			input, textarea {
				margin:10px 0 !important;
				border:2px solid #fff;
			}
		}
	}
	
	.gform_footer {
		margin:0 !important;
		padding:0 !important;
	}
}

select {
	border:none;
	padding:20px !important;
	color:#838383;
	background:@bluelight;
}

.button {
	display:inline-block;
	padding:10px 35px;
	color:#fff;
	font-size:20px;
	line-height:33px;
	.raleway;
	background:@blue;
	.transition;
	
	&.button_2 {
		color:#fff;
		background:none;
		border:1px solid #fff;
		
		&:hover {
			background:@orange;
			border:1px solid @orange;
		}
	}
	
	&.button_3 {
		color:#000;
		background:none;
		border:1px solid #000;
		
		&:hover {
			background:@orange;
			border:1px solid @orange;
		}
	}
	
	&.green {
		background:@green;
	}
	
	&.pink {
		background:@orange;
	}
	
	&:hover {
		color:#fff;
		background:#000;
	}
}

input[type=checkbox] {
	width:inherit;
	-webkit-appearance:checkbox;
}

input[type=submit] {
	width:auto !important;
	margin:20px 0 0 0 !important;
	padding:10px 35px !important;
	color:#fff;
	text-decoration:none;
	border:none;
	cursor:pointer;
	border-radius:0px;
	-webkit-border-radius:0px;
	background:@green !important;
	border:none !important;
	
	&:hover {
		background:#000;
	}
}

.gfield_required {
	opacity:0;
}