body,html {	margin:0px; padding:0; height: 100%; width: 100%; font-family: "effra",Helvetica,Arial,sans-serif;; font-size:12px; background: none repeat scroll 0 0 #FFF; color:#333;}


p.center {text-align:center;}
h1 {color:#666; font-size: 40px; font-weight: bold; margin: 50px 0;}
/*h2.title {text-align:center; color: #f9f9f9; display: inline; font-family: "effra",Helvetica,Arial,sans-serif; font-size: 6rem; font-weight: 300; line-height: 60px;}*/
h2.title{text-align:center; display: block; color:#666;}
h2.title a img{width:100px; margin: 0 auto;}
h3.title { border-top: 1px solid #000000; clear: both; height: 0; margin: 50px 0 50px 0; text-align: center;}
h3.title span { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #000000; display: inline-block; letter-spacing: 3px; line-height: 1.6em; margin-top: -35px; padding: 5px 25px; text-transform: uppercase; vertical-align: middle; z-index: 8;}
h4 {font-weight:bold; color:#000;}

p.title {color:#666; text-align:center; font-size: 1.9em; font-weight: 300; line-height: 36px; margin-top: 30px;}
p {font-weight: 400; font-size:16px; line-height: 1.8; letter-spacing: 0.5px;}
img{width:100%;}
a{text-decoration:none; color:#333;}
hr {float:left; width:100%; color:#FFF;}
.blauw {font-weight:bold; color:#00F;}
.black{color:#000;}
.grey{color:#999;}
.hidden{display:none;}
.rederror {color:#F00;}
img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ }



/* HEADER */
header {position:fixed; z-index:100; width:100%; height:101px; margin:-100px 0 0 0; color:#fff; background:#222;}
header #logo {float:left; font-size:25px; font-weight:bold; margin: 35px auto;}
header #logo img {width:50px;}
header #logo a {color:#fff; -webkit-transition: all 0.5s;     -moz-transition: all 0.5s;     -o-transition: all 0.5s;     transition: all 0.5s;}
header #logo a:hover {color:#006db4; -webkit-transition: all 0.5s;     -moz-transition: all 0.5s;     -o-transition: all 0.5s;     transition: all 0.5s;}
header nav {float:right; margin:40px 0 0 0; font-size:14px; font-weight:bold;}
header nav ul {float:right; width:auto; list-style:none; margin:0; padding:0;}
header nav li {float:left; text-align:center; margin:0 20px; }
header nav li-last{background:#222;}
header nav a {display:block; width:100%; color:#fff; -webkit-transition: all 0.5s;     -moz-transition: all 0.5s;     -o-transition: all 0.5s;     transition: all 0.5s;}
header nav a:hover {color:#006db4; -webkit-transition: all 0.5s;     -moz-transition: all 0.5s;     -o-transition: all 0.5s;    transition: all 0.5s;}


/* SECTION */
section {width:100%; margin:100px auto 0 auto; padding:1px 0;}
.container {width:96%; max-width:800px; margin: 0 auto; padding:0 2%;}
.wrapper {width:96%; max-width:1000px; margin: 0 auto; padding:0 2%;}

/* ARTICLES */
article {float:left; width:100%;}

/* cases overzicht */
#work {width:100%;list-style:none; margin:0; padding:0;}
.item {float:left; width:50%; height:400px; margin:0; position:relative; z-index: 19;}
.item_middle {float:left; width:45%; height:400px; margin: 5px 27.5% 50px 27.5%; position:relative;}
.item_txt {float:left;width:100%; position: absolute; padding: 400px 0 0 0; visibility: hidden;  opacity: 0; transition: 0.3s; z-index:8;}
.item_txt p{padding:5px; margin:0;text-align: center; color:white; font-weight: bold; font-size: 30px;text-transform: uppercase;}
.item_txt img{max-width:30px;}
.item_img {float:left;width:100%; height:100%; position:absolute; z-index: -10;}
.item_img img{width:100%; height:100%; object-fit: cover; filter: brightness(80%);}
.item_btn {float:left;width:100%; height:100%; position:absolute; z-index: 9;}
.item_btn a{width:100%; height:100%; display:block; opacity: 0.2; transition: 0.3s;}
.item:hover .item_txt {visibility: visible; opacity: 1; padding: 250px 0 0 0; transition: 0.3s; z-index:8;}

/* cases in */
.tags {margin:20px auto; width:100%;}
.tags p{font-weight: 400; font-size:13px; line-height: 1.8; letter-spacing: 0.5px;}

.width50 {width:50%;}
/* CASES BLOCKED */
article.cases_blocked {float:left; width:100%; margin:20px 0 0 0;}
article.cases_blocked .listHolder{width:101.0101010101%;}
article.cases_blocked .listHolder .list img{float:left; text-align:center; width:24%; margin: 0 1% 5px 0;}

/* DIENSTEN */
article.diensten {float:left; width:100%; margin:20px 0 0 0;}
article.diensten .listHolder{width:101.0101010101%;}
article.diensten .listHolder .list{float:left; text-align:center; height:120px; width:23.75%; min-width:130px; margin: 0 1% 5px 0; border:1px double #CCC;}
article.diensten .listHolder .list img{width:50px; margin: 0 auto;}
article.diensten .listHolder .list h4{color:#939598;}

/* WERKWIJZE */
article.werkwijze {float:left; width:100%;}
article.werkwijze .list{float:left; text-align:center; width:24%; margin: 0 1% 0 0;}
article.werkwijze .list .list_target .imgBox{width: 100px; height: 100px; margin:0 auto; background: url(../images/target_btn.jpg) no-repeat; } 
article.werkwijze .list .list_target:hover .imgBox { width: 100px; height: 100px; margin:0 auto; background: url(../images/target_btn_over.jpg) no-repeat; } 
article.werkwijze .list .list_idea .imgBox{width: 100px; height: 100px; margin:0 auto; background: url(../images/idea_btn.jpg) no-repeat; } 
article.werkwijze .list .list_idea:hover .imgBox { width: 100px; height: 100px; margin:0 auto; background: url(../images/idea_btn_over.jpg) no-repeat; } 
article.werkwijze .list .list_program .imgBox{width: 100px; height: 100px; margin:0 auto; background: url(../images/program_btn.jpg) no-repeat; } 
article.werkwijze .list .list_program:hover .imgBox { width: 100px; height: 100px; margin:0 auto; background: url(../images/program_btn_over.jpg) no-repeat; } 
article.werkwijze .list .list_launch .imgBox{width: 100px; height: 100px; margin:0 auto; background: url(../images/launch_btn.jpg) no-repeat; } 
article.werkwijze .list .list_launch:hover .imgBox { width: 100px; height: 100px; margin:0 auto; background: url(../images/launch_btn_over.jpg) no-repeat; } 



/* txt_img */
article.txt_img .leftcolumn {float:left; width:60%;}
article.txt_img .rightcolumn {float:right; width: 40%;}
article.txt_img .rightcolumn img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ }


/* klantenlijst */
#klanten {float:left; width:100%;}
#klanten ul{list-style:none; margin:0; padding:0;}
#klanten li{float:left; text-align:center; margin:0 1%; width:31%; display:block;}
#klanten li img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ }


/* contactmap */
#map {width: 100%; height: 300px;}

/* contactform */
#contactform, #contactform table {float:left; width:100%;}
#contactform form {overflow: hidden;}
#contactform fieldset {margin: 0 0 10px 0; border:none; padding:0;}
#contactform label {float: left; font-weight: 700; margin-right: 10%; width: 35%;}
#contactform input, #contactform textarea {background: none repeat scroll 0 0 #FAFAFA; border: 1px solid #BBBBBB; box-sizing: border-box; color: #4B4B4B; font-family: 'Open Sans'; font-size: 100%; height: 30px; padding: 2px 4px; resize: none; width: 55%;}
#contactform textarea {min-height: 228px; width: 100%;}
#contactform button {background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #222222; color: #333333; cursor: pointer; display: block; float: right; font-size: 100%; font-weight: 300; letter-spacing: 1px; padding: 7px 10px 5px; text-transform: uppercase; transition: color 0.32s ease-out 0s, background-color 0.32s ease-in 0s;}
#contactform button:hover {color:#FFF; background:#333;}

/* cases */
#cases {width:100%;list-style:none; margin:0; padding:0;}
#cases li{float:left; width:100%; padding: 0;}
#cases img{width:100%;  /*border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;*/}
#cases label{float:right; width:100%; text-align:center; font-size:10px; display:none;}
#cases a{ opacity:1; filter:alpha(opacity=100); /* For IE8 and earlier */}
#cases a:hover {opacity:0.95; filter:alpha(opacity=95); /* For IE8 and earlier */}
#cases a:hover label{display:block; color:#006;}

/* FOOTER */
footer {float:left; width:100%; margin:0; font-size: 12px; color:#fff; background-color:#222; height:100px; z-index: 100;}
footer a {color:#FFF;}
footer .grey a {color:#999;}



@media screen and (max-width:480px) {
	header #logo {float:left; margin: auto;}
	header #logo img {width:20px;}
	header nav {float:left; margin:5px 0 0 0; font-size:13px;}
	header nav ul {float:right; width:auto; list-style:none; margin:0; padding:0;}
	header nav li {float:left; text-align:center; margin:0 20px; }
	header nav li-last{background:#222;}
	header nav a {display:block; width:100%; color:#FFF;}
	header nav a:hover {color:#006db4;}
	#map{display:none;}
	article.txt_img .leftcolumn {float:left; width:100%;}
	article.txt_img .rightcolumn {float:left; width:100%;}
	header nav {float:left;}
}
@media screen and (max-width:320px) {
	article.txt_img .rightcolumn {display:none;}
}