/* CSS Document */

/* WMWD Groen: 			#064d2f; */
/* WMWD Lichtgroen: 	#a9be1c; */
/* WMWD Grijs: 			#535353; */
/* WMWD Lichtgrijs: 	#E3E3E3; */


/* WMWD Blauw: 			#004A8F; */
/* WMWD Lichtblauw: 	#6699C7; */
/* WMWD Grijs: 			#535353; */
/* WMWD Lichtgrijs: 	#E3E3E3; */


@import url("/style/css/browser-reset.css");
@import url("/style/css/fonts.css");
@import url("/style/css/settings.css");
@import url("/style/css/hero.css");


	.mother{
		width:100%;
		}	
		
	.child{
		margin:0 auto;
		width:100%;
		max-width:1330px;
		}	
	.wrapper{
		min-width:100%;
		min-height:100%;
		overflow:hidden;
		box-shadow: 0 0 20px rgba(0,0,0,0.5);
		}	
		
	/* Header top*/
	header .child{ overflow:hidden;}
	header .top{ border-bottom:1px solid #e3e3e3; background-color:#FFF; height:46px; }
	header .top .child{ border-bottom:1px solid #e3e3e3; background-color:#FFF; height:46px; padding:0px;  }
	header ul{ display:inline-block; height:46px; list-style:none; font-size:0;}
	header ul li{ display:inline-block; line-height:46px; border-right:1px solid #e3e3e3; vertical-align:top; font-size: 14px; }
	header ul li a{ display:inline-block; height:46px; text-decoration:none !important; color:#666; }
	header ul li a:hover{ background-color: #a9be1c; color:#FFF; }
	header ul li.admin a{ background-color: #a9be1c !important; color:#FFF !important; }
	header ul li.admin a:before{ color:#FFF !important; }
	header ul li a[class^="icon-"]:before,
	header ul li a[class*=" icon-"]:before { 
		transition: color 300ms; 
		-o-transition: color 300ms; 
		-moz-transition: color 300ms; 
		-webkit-transition: color 300ms; 
		color:#a9be1c; 
		}
	header ul li a[class^="icon-"]:hover:before,
	header ul li a[class*=" icon-"]:hover:before { color:#FFF; }


	header ul li:first-child{ border-left:1px solid #e3e3e3; }
	
	header .information ul{ float:right; }
	header .information ul li a{ padding: 0 16px; }
	
	header .socials{ float:left; font-size:0px; }
	header .socials ul li a{ width:46px;  vertical-align:top; font-size: 0px; display:inline-block; text-align:center; height:46px; }
	
	/* Header */
	header .child{ padding:40px 0px 30px;}
	header .right{width: 138px; float:right; }
	header .right img{margin-bottom:8px;}
	
	/* Navigation  */
	.mobile-menu{display:none;}
	.mobile-menu-trigger{
		display:none;
		}
		
	#nav-btn,
	#nav-label{
		display:none;	
		}
	
	nav{
		display:block;
		width: 100%; 
		background-color:#a9be1c;
		color:#FFF;
		position:relative;
		z-index:9999;
		}
		
	nav > ul{
		width:auto;
		display:block;
		margin:0 auto;
		list-style:none;
		text-align:left;
		font-size:0;
		vertical-align:top;
		}
		
	nav > ul > li{
		display:inline-block;
		/*font:200 20px/22px "Saira", Arial, Helvetica, sans-serif;*/
		color:#FFF;
		vertical-align:top;
		position:relative;
		font-size:16px;
		font-weight:400;
		}
		
	nav ul li a:hover{
		text-decoration:none;
		}
		
	nav ul li a.lv0{
		display:inline-block;
		width:100%;
		color: #FFF;
		height:54px;
		line-height:55px;
		border-right: 1px solid #839b13;
		padding-left:15px;
		padding-right:15px;
		}
		
	nav ul li:first-child a.lv0{
		border-left: 1px solid #839b13;
		}
	
	nav ul li:hover a.lv0{
		background-color: #839b13;
		}
		
	nav ul li:first-child a.lv0:before{
		content: "\f015";
		font-family: "icons" !important;
		font-style: normal !important;
		font-weight: normal !important;
		font-variant: normal !important;
		text-transform: none !important;
		speak: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align:middle;
		font-size: inherit;
		margin-right: 5px;
		margin-top:-1px;
		display:inline-block;
		font: normal normal normal 16px/1 icons;
		}
			
	nav ul li a.lv0.menu-parent,
	nav ul li a.lv0.menu-current{
		font-weight:600;
		}	


	/* Multiple Levels 	*/
		
	nav ul ul{
		position:absolute;
		left:0px;
		top:100%;
		transform:scaleY(0);
		-webkit-transform: scaleY(0);
		-moz-transform:scaleY(0);
		-o-transform:scaleY(0);
		transition: transform 300ms;
		-o-transition: -o-transform 300ms;
		-moz-transition: -moz-transform 300ms;
		-webkit-transition: -webkit-transform 300ms;
		transform-origin:top;
		-webkit-transform-origin:top;
		-moz-transform-origin:top;
		-o-transform-origin:top;
		-ms-transform-origin:top;
		opacity: 0;		
		}	
		 
	nav ul li:hover ul{
		opacity: 1;		
		display:inline-block;
		background: #FFF;
		text-align:left;
		color: #106698;
		min-width:300px; 
		-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
		-moz-box-shadow:    0px 2px 5px 0px rgba(0, 0, 0, 0.4);
		box-shadow:         0px 2px 5px 0px rgba(0, 0, 0, 0.4);
		transform:scale(1);
		-webkit-transform:scale(1);
		-moz-transform:scale(1);
		-o-transform:scale(1);
		}
	
	nav ul li ul li{
		border-top: 1px solid #e3e3e3;
		display:inline-block;
		width:100%;
		}
	nav ul li ul li:first-child{
		border-top: none;
		}
	
	nav ul li ul li a{
		display:inline-block;
		padding:12px;
		font-weight:400;
		width:100%;
		transition: background-color 300ms, color 300ms;
		-o-transition: background-color 300ms, color 300ms;
		-moz-transition: background-color 300ms, color 300ms;
		-webkit-transition: background-color 300ms, color 300ms;
		}	
		
	nav ul li ul li a:hover{
		color: #FFF;
		background-color:#a9be1c;
		}	
		
	nav ul li ul li a.menu-current{
		font-weight:600;
		}	 



	/* RDG Slider */


	/* BREADCRUMBS */
	
	.breadcrumbs{ 
		border-bottom: #e3e3e3; font-size: 14px;
		border-top: 1px solid #E3E3E3;
		border-bottom: 1px solid #E3E3E3;
		padding-top: 5px;
		padding-bottom: 5px;
		color: #E3E3E3;
		}
		
	.breadcrumbs ul{ display:inline-block;}
	.breadcrumbs li{ display:inline-block;}
	.breadcrumbs li a{ color: #999;}
	.breadcrumbs li a:hover{ color: #064d2f;text-decoration:none; }
	.breadcrumbs li:before{ content: "\f105"; display:inline-block; color: #064d2f; font-family: "icons"; margin-left:15px; margin-right: 15px;}
	.breadcrumbs li ul:before{ content: "\f105"; display:inline-block; color: #064d2f; font-family: "icons"; margin-left:15px; margin-right: 15px;}
	.breadcrumbs li:first-child:before{ display:none; }
	.breadcrumbs li a.icon-home:before{ color:#064d2f; }


	/* MAIN */

	main{
		min-height:100px;
		padding:70px 0px;
		}
		
	main p{
		margin:15px 0;
		}
		
	main strong{
		color:#a9be1c;
		}
		
	.main-blocks{
		overflow:hidden;
		margin-bottom:50px;
		font-size:15px;
		}
		
	.main-blocks .block{
		padding-right:20px;
		padding-left:20px;
		width:25%;
		float:left;
		}
		
	.main-blocks .block:first-child{
		padding-left:0px;
		}
	.main-blocks .block:last-child{
		padding-right:0px;
		}
	
	main ul li{
		list-style: inside url(/style/img/list-icon.png) !important;
		margin-bottom:8px;
		}	
		
	
	/* Content > Left & Right */	
	
	main .twokol .left{
		float: left;
		width: 50%;
		padding-right: 40px;
		}	
		
	main .twokol .right{
		padding-left: 40px;
		border-left: 1px solid #e3e3e3;
		}
		
			
	/* Rows */
	
	.row{
		position:relative;
		overflow:hidden;
		}
		
	.row .child{
		margin-bottom:30px;
		}
		
		
	/* Content > Referenties */	
	
	.referentie{
		width:16.66%;
		padding-right:20px;
		display:inline-block;
		text-align:center;
		text-decoration:none !important;
		vertical-align:top;
		}
	.referentie:hover .c2a{
		background-color: #064d2f;
		}
		
	.referentie .image{
		padding-bottom:20px;
		border-bottom:1px solid #e3e3e3;
		display:inline-block;
		height:200px;
		position:relative;
		overflow:hidden;
		margin-bottom:30px;
		}
	.referentie .image img{
		position:relative;
		margin-top:50%;
		left:0;
		right:0px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		width:100% !important;
		}
		
	.referentie .text h3{
		font-weight:500;
		}
	.referentie .text p{
		margin-top:0;
		}
	.referentie .text p.c2a{
		margin-top:25px;
		}

	/* footer */
	
	footer{
		color:#FFF;
		background-color: #a9be1c;
		text-align:center;
		padding:10px 0;
		font-size:14px;
		padding-left:20px;
		padding-right:20px;
		}
		
		
	/* Contactformulier */	

	.wmw-form{
		display:block; 
		overflow:hidden;
		position:relative;
		font-size:0;
		}
		
	.wmw-input{
		font-size: 16px;
		width: 48%;
		display:inline-block;
		position:relative;
		overflow:hidden;
		padding:3px;
		margin-bottom:20px;
		}
		
	.wmw-input.full{
		width: 100%;
		}
		
	.wmw-input.wmwleft{
		margin-right:4% !important;
		}
		
	.wmw-input label span{font-size:0;display:none;}
	.wmw-input input,
	.wmw-input select,
	.wmw-input textarea{
		font-size: 14px;
		border-radius:3px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		-ms-border-radius:3px;
		-o-border-radius:3px;
		border: 1px solid #e3e3e3;
		color:#919dab;
		font-family: "Fira Sans", Arial, Helvetica, sans-serif;
		font-weight:400; 
		padding-left: 38px;
		border-color: #e3e3e3;
		background-color: #FFF;
		}
		
	.wmw-input select{
		border:none;	
		padding-left: 13px;
		}

	.wmw-input .ic:before{ 
		font-family: "icons"; 
		width:20px; 
		height:20px; 
		font-size:14px;
		font-weight:300;
		line-height:20px;
		position:absolute; 
		z-index:1; 
		top:15px; 
		left:15px;
		color:#919dab; 
		vertical-align:middle;
		text-align:center;
		}
		
	.wmw-input.naam .ic:before{ 			content:  "\f007"; } 
	.wmw-input.bedrijfsnaam .ic:before{ 	content:  "\f1ad"; } 
	.wmw-input.email .ic:before{ 			content:  "\f0e0"; } 
	.wmw-input.telefoon .ic:before{			content:  "\f095"; } 
	.wmw-input.postcode .ic:before, 		 
	.wmw-input.plaast .ic:before, 			
	.wmw-input.straat .ic:before, 			 
	.wmw-input.huisnummer .ic:before{ 		content:  "\f041"; } 
	.wmw-input.bericht .ic:before{ 			content:  "\f086"; } 
	
	.wmw-input input:valid,
	.wmw-input textarea:valid {
		border-color: #2ecc71 !important;
		background-color: #eafcd8 !important;
		}	
	.wmw-input input.invalid:required {
		border-color: #e46b66;
		background-color: #feefe9;
		outline:none;
		box-shadow:none;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		}	
		
	
	.wmw-input input:valid ~ .ic:before,
	.wmw-input textarea:valid ~ .ic:before{ color: #2ecc71 !important; }	
	

	.wmw-input button{
		display: inline-block;
		font-weight: 600;
		color: white;
		background-color: #a9be1c;
		padding: 12px 16px;
		text-decoration:none;
		margin-top: 0px;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-o-border-radius: 4px;
		-ms-border-radius: 4px;
		text-transform:uppercase;
		font-size:16px;
		
		}
		
	.wmw-input button:hover{
		background-color: #064d2f;
		text-decoration:none;
		cursor: pointer;
		}




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

	.main-blocks .block{
		width:50%;
		margin-bottom:40px;
		}

}

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

	.child{
		width:96%;
		}	

}

@media only screen and (max-width: 1000px) { 
	header .information {
		display:inline-block;
		width: 50%;
		float:right;
	}
	header .socials {
		display:inline-block;
		float:left;
	}
	header ul{ width:100%; }
	header ul li{ text-align:center;font: inherit; }
	header .information ul li{ width:25%; }
	header ul li a{ width:100%; position:relative;}
	header ul li a:before{ position:absolute; top:53%; left:50%;transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translateY(-50%,-50%);}
	
	
	header ul li a{ font-size:0; }

	header .left.logo img {
		max-width: 370px;
		height: auto;
		margin-top: 17px;
	}
	
	header .child {
		padding-top: 30px;
		padding-bottom: 20px;
		}	
	header .right{width: 123px;  }
	header .right p{width:100%;display:block;  }
	header .right p:nth-of-type(2) img{width:100% !important;  }



	/**/
	.mobile-menu{display:inline-block;}
	.mobile-menu-trigger{
		display:block;
		width: 100%; 
		background-color:#a9be1c;
		color:#FFF;
		position:relative;
		z-index:9999;
		}
		
	.mobile-menu-trigger .child a{
		padding: 12px;
		display:block;
		color:#FFF;
		text-decoration:none !important;
		}
		
	body .mobile-menu{
		position:fixed;
		top:0;
		bottom:0;
		background-color:#a9be1c;
		width: 440px;
		left:-440px;
		transition: left 300ms;
		-o-transition: left 300ms;
		-moz-transition: left 300ms;
		-webkit-transition: left 300ms;
		z-index:0;
		}
	
	.wrapper{
		position:relative;
		z-index:1;
		}
	
	body.active{
		overflow:hidden;
		}
		
	body.active .mobile-menu{
		left:0;
		}	
		
	body .wrapper{
		margin-left:0px;
		transition: margin 300ms;
		-o-transition: margin 300ms;
		-moz-transition: margin 300ms;
		-webkit-transition: margin 300ms;
		}
	
	body.active .wrapper{
		margin-left:440px;
		}
		
	.mobile-menu .top{
		height:110px;
		width:100%;
		background-color:#FFF;
		background-image: url(/style/img/logo-mobile-menu.png);
		background-repeat:no-repeat;
		background-position:center center;
		background-size:94px 70px;
		}
	
	nav{
		position:fixed;
		width:100%; 
		max-width:450px; 
		background-color:#106698;
		left:100%;
		top:0;
		bottom:0;
		padding:90px 0;
		overflow:auto;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-o-transform: translateX(0);
		transition: transform 300ms;
		-o-transition: -o-transform 300ms;
		-moz-transition: -moz-transform 300ms;
		-webkit-transition: -webkit-transform 300ms;
		-webkit-box-shadow: -3px 3px 1px 0px rgba(50, 50, 50, 0.15);
		-moz-box-shadow:    -3px 3px 1px 0px rgba(50, 50, 50, 0.15);
		box-shadow:         -3px 3px 1px 0px rgba(50, 50, 50, 0.15);
		}
	
	nav ul li a.lv0{
		}

	.mobile-menu > ul{
		width:100%;
		text-align:left;
		}
	.mobile-menu ul.root{
		max-height: calc(100% - (110px + 41px));
		overflow:auto;
		}
		
	.mobile-menu > ul > li{
		width:100%;
		display:block;
		}
	.mobile-menu li a{
		text-decoration:none !important;
		}
	.mobile-menu > ul > li > a{
		border-top:1px solid #839b13;
		}
	.mobile-menu > ul > li:last-child > a{
		border-bottom:1px solid #839b13;
		}
		
	.mobile-menu ul li a.lv0{
		display:block;
		width:100%;
		font-size: 18px;
		color:#FFF;
		height:auto; 
		padding: 10px 10px 10px 20px;
		position:relative;
		}
		
	.mobile-menu ul li a:hover{
		background-color:#839b13;
		}
		
	.mobile-menu ul li a.menu-current{
		font-weight:600;
		background-color:#839b13;
		}	
	
	/* Multiple Levels */	
		
	.mobile-menu ul ul{
		background-color:#95af1d;	
		}	
		 
	
	.mobile-menu  ul li ul li{
		color:#FFF;
		}

	.mobile-menu  ul li ul li a{
		border-top:1px dotted #839b13;
		display:block;
		color: #FFF;
		padding: 10px 10px 10px 40px;
		width:100%;
		position:relative;
		}	
		


	.mobile-menu .socials{
		border-top:1px solid #839b13;
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		text-align:center;
		height:40px;
	}
	.mobile-menu .socials ul{
		display:table;
		width:100%;
	}
	.mobile-menu .socials ul li{
		display:table-cell;
		
	}
	.mobile-menu .socials ul li a{
		height:40px;
		display:inline-block;
		width:100%;
		color:#FFF;
		vertical-align:middle;
		line-height:40px;
		
	}

	.mobile-menu .close{
		display:inline-block;
		position:absolute;
		right:20px;
		top:20px;
		height:40px;
		width:40px;	
		text-align:center;
		
		}
	.mobile-menu .close:before{ font-size:25px; color:#064d2f; position:absolute; top:53%; left:50%;transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translateY(-50%,-50%);}



	/* Referenties */
	
	.referentie{
		width:33.333333%;
	}
	.referentie .image{
		height:250px;
		}
	.referentie .image img{
		width:80% !important;
		}

}

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

	main .twokol .left,
	main .twokol .right{
		width: 100%;
		padding-right: 0px;
		padding-left: 0px;
		border-left: none;
		}
	main .twokol .right{
		margin-top:60px;
		}
		
	.referentie{
		width:50%;
	}
	.referentie .image{
		height:250px;
		}
	.referentie .image img{
		width:80% !important;
		max-height:200px;
		}

}
@media only screen and (max-width: 650px) { 
	header .right {
		display:none;
	}
	header .left {
		width:100%;
		text-align:center;
		padding-left:20px;
		padding-right:20px;
	}
	header .left a{
		margin-left: auto;
		margin-right: auto;
		display:inline-block;
		margin-bottom:20px;
		max-width:370px;
	}
	header .left a img{
		max-width:100% !important;
		height:auto;
	}
	.main-blocks .block{
		width:100%;
		border-bottom: 1px solid #e3e3e3;
		padding:0;
		padding-bottom:30px;
		margin-bottom:30px;
		}
	.referentie{
		width:50%;
	}
	.referentie .image{
		height:250px;
		}
	.referentie .image img{
		width:80% !important;
		max-height:200px;
		}
	.referentie .text p.c2a{
		width:100%;
		margin-top:15px;
		}

}
@media only screen and (max-width: 550px) { 
	.referentie .image{
		height:200px;
		}
	.wmw-input{
		width: 100%;
		}
	.wmw-input.wmwleft{
		margin-right:0 !important;
		}
}
@media only screen and (max-width: 400px) { 
header .top .socials{display:none;}
header .top .information{width:100%;}
	.referentie{
		width:100%;
		padding-right:0;
	}
	.referentie .image{
		padding-bottom:20px;
		border-bottom:1px solid #e3e3e3;
		display:inline-block;
		height:auto;
		padding-top:20px;
		padding-bottom:20px;
		position:relative;
		overflow:hidden;
		margin-bottom:30px;
		margin-top:30px;
		}
	.referentie .image img{
		position:relative;
		margin-top:0;
		left:0;
		right:0px;
		transform: none;
		-webkit-transform: none;
		-o-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		height:auto;
		width: 80% !important;
		}
}