/* Style door copebo 2017 */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ==== */


.projecten a,
.projecten div,
.content .logo,
.ctaResult,
.pagination a
{
 -webkit-transition: 0.4s; /* Safari */
    transition: 0.4s;	
}

.content .logo.loaded,
.opdrachtgevers .opdrachtgever img
{
 -webkit-transition: 1s; /* Safari */
    transition: 1s;	
}




/* ==== */

body { font-family:'Noto Sans'; font-weight:400; ; font-size:20px; line-height:40px; color:#333; }
/*h1 { display:none; }*/
/*
h2 { font-weight:400; }
h3 { font-weight:400; font-size:16px;}
*/
p { margin-bottom:40px; }
p.klein { font-size:16px; }

strong { font-weight:700; }

b { font-weight:700; }
i { font-style: italic; }
/*
a { text-decoration: none; color:#3BA2C2; border-bottom:1px solid #3BA2C2;}
a:hover { border-bottom:none; }
*/

ol { margin-left:20px; list-style-type: decimal; margin-bottom:40px;}
ol li { }

.content { padding-top:150px;  }
.content .logo { position:fixed; top:-20px; right:50%; margin-right:-560px; width:300px; z-index:1000;}
.content .logo h1 { display:none; }

.wrapper { position:relative; width:1120px; margin:0px auto; }
.intro .greeting { display:block; font-size:20px; color: #3BA2C2; line-height: 30px; font-weight: 700; margin-bottom:20px; }
.intro h2 { font-size:40px; line-height:50px; font-weight: 700; margin-bottom:30px;}
.intro h2 span { font-weight: 400;}
.intro p {}

.rij { display:flex; box-sizing:border-box; width: calc(100% + 50px); margin-left:-25px; margin-right:-25px; /*background:red;*/ }

.rij > div { margin:0px 25px; }

.rij .col-2 { width: calc( 100%/12 * 2); }
.rij .col-3 { width: calc( 100%/12 * 3); }
.rij .col-4 { width: calc( 100%/12 * 4); }
.rij .col-6 { width: calc( 100%/12 * 6); }
.rij .col-8 { width: calc( 100%/12*8); }
.rij .col-9 { width: calc( 100%/12*9); }
.rij .col-10 { width: calc( 100%/12*10); }

.rij > div img { max-width:100%; }

.containerbg { margin-top:100px; padding:50px 0px; background: rgba(59, 162, 194, 1); position:relative; z-index: 1050;}
.containerbg_light { padding:100px 0px; background: #f8f8f8; position:relative; font-size:16px; line-height:26px;}

.projecten { padding:50px 0px 20px; display:flex; width:100%; flex-wrap:wrap;  box-sizing:border-box; justify-content: space-between; align-content: flex-start;}

.projecten::after {
	content: '';
	flex: auto;
}
.projecten a,
.projecten div.coming { width: calc(30%); margin-right:50px; box-sizing:border-box; text-decoration: none; border-radius:4px; background-color: #fff; margin-bottom:50px; color: #333; }
.projecten div.coming { cursor:not-allowed; }
.projecten a:hover,
.projecten div.coming:hover { transform:scale(1.05); }

.projecten a:nth-child(3n),
.projecten div.coming:nth-child(3n) { margin-right:0px; }

.projecten a .afbeelding,
.projecten div.coming .afbeelding { text-align:center; line-height:120px; height:300px;  border-top-left-radius: 4px; border-top-right-radius: 4px; background-size:cover; background-position: center;}
/*.projecten a .afbeelding img { width:100%; }*/

.projecten a h2,
.projecten div.coming h2 { padding:30px 30px 0px; font-weight: 700; font-size:20px; }
.projecten a h3,
.projecten div.coming h3 { padding:0px 30px 30px; font-size:14px;}

.opdrachtgevers { /*background: #ebf5f8;*/ padding:30px 0px; border-bottom:1px solid #ebf5f8; }
.opdrachtgevers .wrapper { display:flex; justify-content: space-between; }
.opdrachtgevers .opdrachtgever { width:140px; }
.opdrachtgevers .opdrachtgever img { max-width:140px; max-height:140px; opacity:0.8;
 -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
	 -o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
		filter: grayscale(100%); 
}

/*
.opdrachtgevers .opdrachtgever img:hover {
 -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
	 -o-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
		filter: grayscale(0%); 
	
}
*/

.werkervaring { padding:100px 0px; font-size:18px; line-height:32px;}
.werkervaring h3 { display:block; font-size:20px; color: #3BA2C2; line-height: 30px; font-weight: 700; margin-bottom:20px;}
.werkervaring h4 { font-size:40px; line-height:50px; font-weight: 700; margin-bottom:30px;}

.werkervaring .rij { align-items: center; justify-content: center;  }

.werkervaring .overzicht { box-sizing:border-box; padding-left:40px; border-left: 1px solid rgba(59, 162, 194, 0.25);  }
.werkervaring .overzicht .year { color:#3BA2C2; font-weight: 700; }
.werkervaring .overzicht .item { position:relative; margin-bottom:30px;}
.werkervaring .overzicht .item .when { position:absolute; right:0px; font-size:14px; }
.werkervaring .overzicht .item p { font-size:16px; line-height:32px; }


.containervraag { padding-top:100px; }
.containervraag blockquote { position:absolute; background: rgba(59,162, 194,0.9); padding:40px; max-width:535px; box-sizing:border-box; margin-top:-50px; color:#fff; }
.containervraag blockquote p { font-size:30px; line-height:46px; font-weight:700; margin-bottom:20px; }
.containervraag blockquote span { font-size:18px; line-height:24px;  }

.wrapper.case {  font-size:16px; line-height:32px; padding-top:100px; padding-bottom:100px; }
.wrapper.case.nobottom { padding-bottom:0px; }
.wrapper.case strong { font-weight:700; font-size:20px; color: #3BA2C2; margin-bottom:20px; display:block; }
.wrapper.case a { color:#3BA2C2; text-decoration: none;}
.wrapper.case a:hover { color:#3BA2C2; text-decoration: underline;}

.wrapper.case .ctaResult { display:inline-block; box-sizing:border-box; padding:10px 20px; background:#E6E6E6; text-decoration: none; font-weight:700; border-radius:4px;}
.wrapper.case .ctaResult:hover { padding:10px 25px; text-decoration: none; background: rgba(59, 162, 194, 1); color:#fff;}

/*
.projecten a.chefs4chefs 		{ color: rgba(196, 43, 24, 1); }
.projecten a.mienis 			{ color: rgba(18, 123, 191, 1); }
.projecten a.dekoningshoeve 	{ color: rgba(41, 124, 187, 1); }
.projecten a.ensannereist 		{ color: rgba(203, 0, 0, 1); }
*/

.pagination { font-size:14px; padding-top:50px; padding-bottom:50px;}
.pagination a { color: rgba(59, 162, 194, 1);  }
.pagination a:hover { text-decoration: none;}

.overmij .profielfoto { border-radius:4px; max-width:300px; width:100%;}
.overmij h3 { font-size: 18px; font-weight:700; margin-bottom:20px; }
.overmij p:last-child { margin-bottom:0px; }

footer { background: #0b2026; color:#fff; padding:100px 0px 20px; text-align:center;}
footer h2 { font-size:24px; font-weight: 700; margin-bottom:30px;}
footer p { font-size:16px; line-height:28px; }
footer a { color:#fff; }


.subfooter { font-size:12px; color:rgba(255,255,255, 0.6); border-top: 1px solid rgba(255,255,255, 0.1); margin-top:100px; padding-top:20px; line-height:24px;}

.iphone { width:300px; margin:0px auto; position:relative; }
.iphoneContent { position:absolute; left:24px; top:75px; background:#fff; width:252px; height:450px; }

.stdeon {
	background: rgba(104,166,41,0.1);
}

.steundeondernemer {
	/*margin-top:300px;*/
	width:1120px;
	margin: 80px auto 0;
	border-radius:4px;
	display:flex;
	/*background: rgba(104,166,41,0.2);*/
	align-items: center;
}
.steundeondernemer h3 { font-weight:bold; font-size: 20px;}
.steundeondernemer .tekst { flex:40% 1 1; padding:30px; font-size:16px; line-height:2em;}
.steundeondernemer .tekst a { border-radius:5px; display:inline-block; padding:0 20px; background:rgba(104,166,41,1); color:#fff; font-size:16px; text-decoration: none; line-height:40px;}
.steundeondernemer .tekst a:hover { background:#548621;}
.steundeondernemer .afbeelding {  flex:60% 0 0; margin-top:-30px; margin-left:-30px; margin-bottom:-40px; line-height:0;}
.steundeondernemer .afbeelding img { max-width:100%; }

@media screen and (max-width: 1200px) { 
	.wrapper { width:100%; padding:0px 40px; box-sizing:border-box;}
	
	.content .logo { position:fixed; margin-right:0px; right:40px; width:250px; }
	
	.projecten a { width:45%;}
	.projecten a:nth-child(3n) { margin-right:50px; }
	.projecten a:nth-child(2n) { margin-right:0px; }
	
	.opdrachtgevers .wrapper { flex-wrap:wrap; justify-content: center}
	.opdrachtgevers .opdrachtgever { margin:10px; }

	.wrapper.werkervaring { padding-top:50px; padding-bottom:50px; }

	.steundeondernemer {
		width:100%;
	}
	
}


@media screen and (max-width: 800px) { 
	.wrapper { width:100%; padding:00px; box-sizing:border-box;}
	body { font-size:16px; line-height:32px; }
	.content .logo { position:fixed; margin-right:0px; right:40px; width:150px; }
	
	.content { padding-top:80px; }
	.containerbg { margin-top:20px; padding:0px; }
	.containerbg .wrapper { padding:0px; }
	
	
	.containervraag { padding-top:0px; }
	.containervraag blockquote { position:relative; background:rgba(59,162, 194,1); padding:30px;}
	.containervraag blockquote p { font-size:20px; line-height:26px; }
	
	.intro h2,
	.werkervaring h4 { font-size:30px; line-height:38px; }
	
	.rij { display:flex; width:100%; padding:0px 40px; flex-direction: column;}
	
	.rij .col-2,
	.rij .col-3,
	.rij .col-4,
	.rij .col-6,
	.rij .col-8,
	.rij .col-9,
	.rij .col-10
	{ width:100%; margin-bottom:40px;}

	.wrapper.case.flip .col-6:first-child { order:2; }
	.wrapper.case.flip .col-6:last-child { order:1; }

	.werkervaring .rij { align-items:baseline; justify-content: space-between;  }
	
	
/*
	.werkervaring h3,
	.werkervaring h4 { padding:0px 40px;}
*/
	
	.projecten { display:block; padding:40px 20px; }
	.projecten a { display:block; width:100%; }
	.projecten div.coming { display:block; width:100%; }

	.wrapper.case { padding:40px 0px; }

	footer .wrapper { padding:0px 40px; }

	.steundeondernemer {
		flex-direction: column;
		margin-top:-50px;
	}
	.steundeondernemer .afbeelding { margin:unset;  }
	.steundeondernemer .afbeelding a { display:block; text-align:center; }
	.steundeondernemer .afbeelding img {
		max-width:80%;
		margin:0 auto;
	}
}