/*FONTS*/
@font-face {
    font-family: 'larsseit';
    src: url('/fonts/larsseit-light-webfont.woff2') format('woff2'),
         url('/fonts/larsseit-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'larsseit';
    src: url('/fonts/larsseit-webfont.woff2') format('woff2'),
         url('/fonts/larsseit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'larsseit';
    src: url('/fonts/larsseit-medium-webfont.woff2') format('woff2'),
         url('/fonts/larsseit-medium-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'larsseit';
    src: url('/fonts/larsseit-bold-webfont.woff2') format('woff2'),
         url('/fonts/larsseit-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/*Basics*/
*{
	box-sizing:border-box;
}
body{
	background-color: #F1F1F1;
	font-family: 'larsseit';
	font-weight: 300;
	font-size: 16px;
	color: #666666;
}

img {
	max-width: 100%;
}

h1{
	font-family: 'larsseit';
	font-weight: 600;
	font-size: 48px;
	color: #000000;
}
	h1 span{
		display:block;
		font-weight: 300;
		font-size: 36px;
	}
h2{
	font-family: 'larsseit';
	font-weight: 600;
	font-size: 28px;
	color: #000000;
	margin-top: 0px;
}
	h2 b{
		color: #36A9E1;
		font-weight:bold;
	}

	h2 i{
		color: #36A9E1;
		font-style: normal;
	}
	h2 span{
		display:block;
		font-weight: 400;
		font-size: 21px;
	}
h3{
	font-family: 'larsseit';
	font-weight: 600;
	font-size: 20px;
	color: #000000;
	margin-top: 0px;
}
textarea.form-control{
	height:200px;
}
p{
	font-size: 18px;
	line-height: 32px;
	color: #000000;
}
li{
	color:#000;
}
a,
a:active{
	color: #000000;
	text-decoration:none;
}
a:focus,
a:hover{
	color: #666666;
}
.right{
	float:right;
	margin:0 0 25px 25px;
}
.contact{
	font-family: 'larsseit';
	font-size: 28px;
	color: #000000;
}
	.contact b{
		color: #36A9E1;
	}
.social{
	line-height:24px;
	overflow:hidden;
}
	.social a{
		float:left;
		clear:both;
	}
	.social a img{
		float:left;
		margin:3px 5px 0 0;
		width: 18px;
	}
.errors{
	margin-bottom:15px;
	padding:15px;
	background:#ffa9a9;
	color:#000;
}

/*Bootstrap Modifications*/

.nopadding {
   padding: 0;
   margin: 0;
}

.flexbox + .flexbox,
.row + .row{
	margin-top:30px;
}
/*.row-no-padding > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
*/

/*Elements*/

.form-group{
	margin: 0px auto;
	padding-bottom: 10px;
}
	.form-group label{
		font-weight: normal;
		font-size: 18px;
	}
		.form-group input{
			height: 40px;
			border-radius: 0;
			font-size: 16px;
			color: #000000;
		}
		.form-group textarea{
			border-radius: 0;
			font-size: 16px;
			color: #000000;
			margin-bottom: 30px;
		}
.center{
	text-align: center;
}
.footer{
	margin:30px 0;
	font-size: 14px;
	color:#000;
}
.button{
	display: inline-block;
	font-size: 18px;
	line-height: 19px;
	padding: 13px 29px;
	border: 3px solid #000000;
	color: #ffffff;
	background-color:#000000;
	font-weight: bold;
	border-radius: 25px;
	text-align: center;
}
	.button.open,
	.button:hover{
		color: #000000;
		background-color: transparent;
		text-decoration:none;
	}
		.button.open:hover{
			color: #ffffff;
			background-color: #000000;
		}
	.button.white,
	a.box:hover .button,
	.button.white.open:hover{
		color: #36A9E1;
		background-color: #ffffff;
		border-color: #ffffff;
	}
		.button.white.open{
			border-color: #ffffff ;
			color: #ffffff;
			background-color: transparent;
		}
	.button.blue,
	.button.blue.open:hover{
		border-color: #36A9E1;
		color: #ffffff;
		background-color: #36A9E1;
	}
		.button.blue.open{
			border-color: #36A9E1;
			color: #36A9E1;
			background-color: transparent;
		}

#header{
	position:relative;
	background: #000000;
	height:120px;
	text-align: center;
	z-index:2;
}
	#logo{
		position:absolute;
		top:48px;
		left:50px;
		width:40%;
		max-width: 200px;
	}
	#menu-button{
		display:none;
	}
	#menu{
		float:right;
		padding:40px 0;
		margin:0 auto;
	}
		#menu a{
			position: relative;
			display: inline-block;
			margin:0 30px;
			color:#fff;
			font-size: 15px;
			font-family: 'larsseit';
			font-weight: 600;
			text-decoration: none;
			line-height:40px;
		}
			#menu a:hover, #menu a.current{
				color: #36A9E1;
			}
			.count{
				display: inline-block;
				margin-left: 10px;
				width: 24px;
				height: 24px;
				text-indent:-2px;
				border-radius:50%;
				background-color: #36A9E1;
				line-height: normal;
				font-size: 14px;
				text-align:center;
				line-height:24px;
				color: #FFFFFF;
			}
				a:hover .count{
					color: #FFFFFF;
				}


.container{
	margin:0 auto;
	max-width:994px;
}
	.container > h1{
		margin: 50px 0;
		text-align:center;
	}

#home-slider{
	position:fixed;
	top:120px;
	left:0;
	right:0;
	bottom:0;
}
	#home-slides{
		position:relative;
		width:100%;
		height:100%;
		overflow:hidden;
		z-index:1;
	}
		#home-slides > div{
			position:absolute;
			top:0;
			left:100%;
			width:100%;
			height:100%;
			background:no-repeat center;
			background-size:contain;
			z-index:1;
			transition:all 1.5s;
			/*
			left:0;
			z-index:4;
			*/
		}
		#home-slides > div.current{
			left:0;
			z-index:3;
		}
		#home-slides > div.current.last{
			left:-100%;
			z-index:2;
		}
		#home-slides > .home-slider-left-top{
			background-position:left top;
		}
		#home-slides > .home-slider-left-bottom{
			background-position:left bottom;
		}
		#home-slides > .home-slider-left{
			background-position:left center;
		}
		#home-slides > .home-slider-right{
			background-position:right center;
		}
			.home-slider-text-left, .home-slider-text-left-top, .home-slider-text-right{
				position:absolute;
				top:50%;
				left:10%;
				width:45%;
				color:#FFF;
				text-shadow: 1px 1px 3px rgba(0,0,0,.2);
				font-size:40px;
				transform:translateY(-50%);
			}
			.home-slider-text-yellow{
				color:#fbc300;
				text-shadow:none;
			}
			.home-slider-text-black{
				color:#000000;
				text-shadow:none;
			}
			.home-slider-text-right{
				left:auto;
				right:0%;
			}
			.home-slider-text-top{
				top: 25%;
				transform: none;
			}
			.home-slider-text-left b, .home-slider-text-right b{
					display:block;
			}
			.home-slider-text-left i, .home-slider-text-right i{
					font-size: 30px;
					display:block;
					font-weigt: normal;
					font-style: normal;
			}
	#home-slider-nav{
		position:absolute;
		left:50%;
		bottom:25px;
		transform:translateX(-50%);
		z-index:2;
	}
		#home-slider-nav a{
			float:left;
			width:12px;
			height:12px;
			border:solid 2px #FFF;
			border-radius:50%;
			/*box-shadow:0 0 5px rgba(0,0,0,.5);*/
		}
		#home-slider-nav a + a{
			margin-left:6px;
		}
		#home-slider-nav a.current{
			background:#FFF;
		}
#page-404{
	position:fixed;
	top:120px;
	left:0;
	right:0;
	bottom:0;
	background:url(/img/www-404.jpg) no-repeat right bottom #FFF;
	background-size:contain;
	text-shadow:0 0 5px rgba(255,255,255,.5);
}
	#page-404 div{
		display:inline-block;
		padding:50px;
		background:rgba(255,255,255,.25);
	}
.blok{
	display:block;
	position: relative;
	padding: 50px;
	background-color: #ffffff;
	line-height: 30px;
}
	div.blok h3 b{
		color: #36A9E1;
	}
			div.blok.tekst.black{
				background-color: #000000;
				color: #fff;
			}
			.tekst h2 span{
				font-size: 28px;
				font-weight: 300;
			}
				.black h2,
				.black p{
					color: #fff;
				}

			div.blok.tekst.confetti{
				background-image: url("/img/mensen_confetti.jpg");
				background-repeat: no-repeat;
				background-color: #ffffff;
				background-position: bottom right;
			}

		.img{
			position: relative;
		}
			.img .hover{
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				box-sizing: border-box;
				background-color: rgba(13,44,84,0.5);
				display: none;
			}
				.img:hover .hover,
				div.over .mensen:hover .hover,
				div.werk a:hover .hover{
					display: block;
				}
				.img .hover .icon{
					display: block;
					height: 30px;
					width: 100px;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -15px;
					margin-left: -50px;
					text-align: center;
				}
					.img .hover .icon img{
						width:30px;
						height:30px;
						opacity: 0.8;
					}
						.img .hover .icon img:hover{
							opacity: 1;
						}
						.img .hover .icon a:nth-child(2){
							margin-left:20px;
						}
		div.werk .flexbox > a,
		div.werk .flexbox > a:hover,
		div.werk .flexbox .job{
			background-color: #ffffff;
			text-decoration:none;
		}
.blok-doen{
	text-align: center;
	text-decoration:none;
}
.blok-doen:hover{
	background:#36A9E1;
	text-decoration:none;
	color:#36A9E1;
}
	.blok-doen svg{
		margin: 0px auto;
		width:30%;
		height:30%;
		padding-bottom: 20px;
		fill:#36A9E1;
	}
	.blok-doen:hover svg{
		fill:#FFF;
	}
	.blok-doen:hover h2{
		color:#FFF;
	}
	.blok-doen .button{
		display: none;
		position: absolute;
		left:50%;
		bottom:100px;
		transform:translateX(-50%);
		background-color: #36A9E1;
		color: #ffffff;
		white-space:nowrap;
	}
		.blok-doen:hover .button{
			display: block;
		}

		a.box{
			position:relative;
			display: block;
			padding: 0px;
			min-height: 250px;
			background-image: url("/img/contact-theworkshop.jpg");
			background-color: rgba(13, 44, 84, 0.5);
			background-size: cover;
			background-position: center;
		}
			a.box .hover{
				position: absolute;
				top:0;
				left:0;
				width: 100%;
				height: 100%;
				margin-bottom: 30px;
			}
			a.box:hover .hover{
				background-color: rgba(13, 44, 84, 0.5);
			}
				a.box .button{
					position: absolute;
					top: 50%;
					left: 50%;
					width: 240px;
					margin-top: -25px;
					margin-left: -120px;
				}
#klanten{

}
	#klanten a{
		float:left;
		width:25%;
		background:no-repeat center;
		background-size:contain;
		border-left:solid 15px #F1F1F1;
		border-right:solid 15px #F1F1F1;
		overflow:hidden;
		-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
		transition: all 0.5s;
	}
	#klanten a:hover{
		-webkit-filter: grayscale(0%);
		filter: grayscale(0%);
	}
	#klanten a:nth-child(n+ 5){
		margin-top:30px;
	}
		#klanten a:before{
			content:"";
			display:block;
			margin-top:100%;
		}
		#klanten a span{
			display:none;
		}
@media (max-width: 1000px){
	#header{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:80px;
		z-index:2;
	}
		#logo{
			top:28px;
			left:50%;
			z-index:3;
			transform:translateX(-50%);
		}
		#menu-button{
			position:absolute;
			top:30px;
			left:20px;
			display:block;
			width:24px;
			height:19px;
			background:#FFF;
			border-top:solid 8px #000;
			border-bottom:solid 8px #000;
			z-index:3;
			transition:all .5s;
		}
		.menu #menu-button{
			transform:rotate(180deg);
		}
			#menu-button:before, #menu-button:after{
				content:"";
				position:absolute;
				top:-8px;
				left:0;
				width:100%;
				height:100%;
				background:#FFF;
				transition:all .5s;
			}
			#menu-button:after{
				top:8px;
			}
			.menu #menu-button:before, .menu #menu-button:after{
				top:-5px;
				left:50%;
				width:50%;
				transform:rotate(45deg);
			}
			.menu #menu-button:after{
				top:5px;
				transform:rotate(135deg);
			}
		#menu{
			position:fixed;
			top:0;
			left:-100%;
			width:100%;
			height:100%;
			padding-top:80px;
			box-sizing:border-box;
			background:rgba(0,0,0,.9);
			text-align:center;
			font-size:0;
			white-space:pre-line;
			z-index:2;
			transition:all .5s;
		}
		.menu #menu{
			left:0;
		}
			#menu a{
				display:inline-block;
				margin-top:20px;
				padding:0;
				font-size:20px;
			}
	.container{
		padding-top:80px;
	}

	#home-slider, #page-404{
		top:80px;
	}
		#home-slides > div{
			background-position:right bottom;
			background-size:150%;
		}
		#home-slides > .home-slider-left{
			background-position:left bottom;
		}
		#home-slides > .home-slider-left-top{
			background-position:left top;
		}
		#home-slides > .home-slider-right{
			background-position:right bottom;
		}
			.home-slider-text-left, .home-slider-text-left-top, .home-slider-text-right{
				left: 7%;
				top:7%;
				width:86%;
				font-size:36px;
				transform:none;
			}
			.home-slider-text-right{
				text-align:right;
			}
			#home-slides > .home-slider-left-top .home-slider-text-right{
				top:auto;
				bottom:15%;
			}
	.contact{
		font-size:20px;
	}
}
@media (max-width: 800px){
	#klanten a{
		width:50%;
	}
	#klanten a:nth-child(n+ 3){
		margin-top:30px;
	}
	a.box img{
		display:none;
	}
}
@media (max-width: 767px) {
	.flexbox > *{
		display:block;
		margin:0 30px;
	}
	.flexbox > *:nth-child(n+2){
		margin-top:30px;
	}
	.contact{
		font-size:28px;
	}
}
@media (max-width: 600px) {
	#page-404 div{
		padding:25px;
	}
	.contact{
		font-size:18px;
		font-weight:bold;
	}
		.contact b{
			display:none;
		}
}
@media (max-width: 450px) {
	.home-slider-text-left, .home-slider-text-left-top, .home-slider-text-right{
		font-size:23px;
	}
	.home-slider-text-left i, .home-slider-text-right i {
		font-size:20px;
	}
}

@media (max-width: 1000px) and (orientation: landscape){
	#home-slides > div{
		background-size:contain;
	}
}

@media (max-width: 1000px) and (max-height: 450px) and (orientation: landscape){
	.home-slider-text-left, .home-slider-text-left-top, .home-slider-text-right{
		font-size:24px;
	}
}
@media (min-width: 768px) {
	.flexbox{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
		.flexbox > * {
			float:left;
			width:50%;
			border-left:solid 15px #F1F1F1;
			border-right:solid 15px #F1F1F1;
			-webkit-align-self: stretch;
			-ms-flex-item-align: stretch;
			align-self: stretch;
		}
		.flexbox > *:nth-child(n+3){
			margin-top:30px;
		}
}

@media (min-width: 1300px){
	#menu a{
		margin:0 60px;
	}
}
@media (min-width: 1400px){
	.home-slider-text-left, .home-slider-text-left-top, .home-slider-text-right{
		font-size:48px;
	}
}
@media (min-width: 1600px){
	#menu{
		float:none;
	}
}