html, body, div {margin:0; padding:0;}

body {
	font-size: 13px;
	color: #1b2d30;
	background-color: #e0e0e0;
	-webkit-font-smoothing: subpixel-antialiased;
}
html, body { min-height: 101%; }
iframe { border: none; }
img { border: 0px solid #e7e7e7; }
strong { font-weight:200; color:#34b1cb; }

a:link { color : #34b1cb; text-decoration:none; }
a:visited { color : #34b1cb; text-decoration:none; }
a:hover { color : #34b1cb; text-decoration : underline; }

div.clear { clear:both; }
div.left { float:left; }
div.right { float:right; }
div.hidden { display:none; }

.menu a:link { color : #616161; text-decoration:none; }
.menu a:visited { color : #616161; text-decoration:none; }
.menu a:hover { color : #34b1cb; text-decoration:none; }
.menu .selected a:link { color : #34b1cb; }
.menu .selected a:visited { color : #34b1cb; }
.menu .selected a:hover { color : #34b1cb; }

.menu { font-size:14px; margin-top:4px; }
.menu .btn { margin-left:10px; margin-right:2px; margin-top:24px; cursor:pointer; }
.menu .selected { color:#34b1cb; }
.logo { margin-top:16px; cursor:pointer; margin-left:34px; margin-bottom:12px; }

.page, .blogpost { position:relative; }
.info, .page_info { color:#e7e7e7; }

.page { overflow:hidden; }
.page .image { margin-bottom:12px; }
.page .background_image, .blogpost .image { z-index:1; width:692px; border:1px solid #e0e0e0; }
.blogpost { margin-bottom:12px; }
.page .background, .blogpost .background { z-index:2; position:absolute; background-color:#34b1cb; }
.page_info .margin, .blogpost .info .margin { margin:12px; margin-right:12px; }
.page_info .spacer, .blogpost .info .spacer { overflow:hidden; height:12px; }
.page_info .h1, .blogpost .info .h1 { line-height:90%; font-weight:100; font-style:normal; }
.font_arial .h1 { text-transform: uppercase; font-weight:600; }
.page_info .margin { padding-top:12px; padding-bottom:12px; }
.page_info { position:relative; z-index:10; background-color:#34b1cb; width:688px; margin-left:1px; }
.makingof { position:relative; }

.background_red { background-color:#34b1cb; }
.transparant_background {  display:none; }
.red .h1 { color: #fff; }
.red a:link { color : #e7e7e7; text-decoration:underline; }
.red a:visited { color : #e7e7e7; text-decoration:underline; }
.red a:hover { color : #1b2d30; text-decoration:underline; }
.red strong { font-weight:200; color:#1b2d30; }
.black a:link { color : #1b2d30; text-decoration:underline; }
.black a:visited { color : #1b2d30; text-decoration:underline; }
.black a:hover { color : #e7e7e7; text-decoration:underline; }

.blogpost .tweeblokkeninfoleft { position:absolute; width:230px; left:1px; top:1px; height:386px; z-index:7;  background-color:#34b1cb; }
.blogpost .tweeblokkeninforight { position:absolute; width:230px; right:0px; top:1px; height:386px; z-index:8; background-color:#34b1cb; }
.blogpost .tekstlinks { position:absolute; width:222px; left:2px; bottom:12px; z-index:3; background-color:#34b1cb; }
.blogpost .tekstrechts { position:absolute; width:220px; right:2px; bottom:12px; z-index:4; background-color:#34b1cb; }
.blogpost .rechtshoog { position:absolute; width:220px; right:2px; bottom:2px; z-index:5; background-color:#34b1cb; }
.blogpost .linkshoog { position:absolute; width:220px; left:2px; bottom:2px; z-index:6; background-color:#34b1cb; }
.blogpost .vierblokken { position:absolute; width:337px; height:190px; left:2px; top:2px; z-index:7; background-color:#34b1cb; }
.blogpost .drieblokken { position:absolute; width:222px; height:124px; left:2px; top:2px; z-index:8; background-color:#34b1cb; }
.blogpost .drieblokken .spacer, .blogpost .vierblokken .spacer { height:8px; }
.blogpost .drieblokken .more_info_link,
.blogpost .vierblokken .more_info_link { margin-top:-5px; }
.blogpost .drieblokken .watch_btn,
.blogpost .drieblokken .share_btn,
.blogpost .vierblokken .watch_btn,
.blogpost .vierblokken .share_btn { margin-top:10px; }

.image .een_image { width:688px; overflow:hidden; }
.image .een_image img { width:688px; }
.image .drieblokken_image_left { overflow:hidden; width:222px; height:124px; margin-right:12px; margin-bottom:12px; }
.image .drieblokken_image_right { overflow:hidden; width:452px;height:262px; }
.image .vierblokken_image_left { overflow:hidden; margin-right:12px; margin-bottom:12px; }
.image .vierblokken_image_right { overflow:hidden; margin-bottom:12px; }
.image .vierblokken_image { width:337px; height:190px; overflow:hidden; }
.tweeblokken_small { width:230px; height:386px; }
.tweeblokken_wide { width:446px; height:386px; }

.image_border { border:1px solid #e0e0e0; }

.mouseover { overflow:hidden; background-position: top; background-repeat: no-repeat; cursor:pointer; margin-right:6px; width:52px; height:22px; }
.share_btn { background-image: url("../images/share_btn.png"); }
.back_btn { background-image: url("../images/back_btn.png"); }
.watch_btn { background-image: url("../images/watch_btn.png"); }
.facebook_btn { background-image: url("../images/facebook_btn.png"); width:22px; }
.twitter_btn { background-image: url("../images/twitter_btn.png"); width:22px; }
.linkedin_btn { background-image: url("../images/linkedin_btn.png"); width:22px; }

.address a:link { color : #34b1cb; text-decoration:none; }
.address a:visited { color : #34b1cb; text-decoration:none; }
.address a:hover { color : #fff; text-decoration : underline; }
.address { z-index:7; position:absolute }

.client { width:100%; background-color:#1d1c1c; text-align:right; border:1px solid #1d1c1c; margin-bottom:12px; position:relative; overflow:hidden; height:210px; }
.client #title { font-size:60px; color:#34b1cb; right:24px; top:20px; text-transform:uppercase; z-index:24; position:absolute; }
.client #form { right:24px; bottom:20px; float:right; z-index:22; position:absolute; }
.client #form .input { cursor:text; background-color:#d2d2d2; width:232px; height:24px; text-align:right; margin-right:-2px; margin-bottom:8px; overflow:hidden; }
.client #form .input .text { margin-top:5px; color:#1a1a1a; text-align:right; margin-right:4px; }
.client .fields { position:absolute; right:0px; bottom:0px; z-index:18; }
.client .overfields { position:absolute; right:0px; bottom:0px; background-color:#1d1c1c; width:200px; height:200px; z-index:20;}
.client #subtitle { font-size:40px; color:#fff; right:24px; top:80px; text-transform:uppercase; position:absolute;}

.clientpost { color:#fff; width:100%; background-color:#d2d2d2; text-align:right; border:1px solid #e0e0e0; margin-bottom:12px; position:relative; overflow:hidden; }
.clientpost #title { font-size:24px; color:#34b1cb; margin-right:24px; margin-top:12px; text-transform:uppercase; }
.clientpost .text { float:right; margin-right:24px; margin-bottom:12px; margin-top:8px; width:500px; color:#1a1a1a; font-size:10px; }

.clientpost_item .image { margin-bottom:12px; }

.file { margin-bottom:8px; }
.file a, .file a:visited { color:#34b1cb; text-decoration:underline; }
.file a:hover { color:#34b1cb; text-decoration:none; }
.file .download { text-align:left; }
.file .date { width: 100px; text-align:left; }
.file .size { width: 100px; text-align:left; }
.file .filename { width: 140px; text-align:left; }

.animate { opacity: 0; }
.load_image { opacity: 0; }
.btn { cursor:pointer; }
.share { position:absolute; margin-top:12px; margin-bottom:12px; left:0; top:0; z-index:7; display:none; opacity:0; }
.share .btn { margin-bottom:12px; }
.share .margin { margin-left:18px; margin-right:18px; }
.vimeo { background-color:#1b2d30; color:#1b2d30; background-image: url("../images/bartnelissen_vimeo.png"); background-repeat: no-repeat; background-position: center; }

.watch_btn { }

.about a:link { color : #fff; text-decoration:none; }
.about a:visited { color : #fff; text-decoration:none; }
.about a:hover { color : #34b1cb; text-decoration : underline; }

.about .blogpost { background-color:#1d1c1c; }
.about .blogpost .info { margin:20px; }

.makingof_image { position:relative; background-color:transparent; }
.makingof_image img { position:absolute;top:0;bottom:0;margin:auto; }

.hide_temp_container { height:1px; overflow:hidden; }

#pagewidth
{
	width: 724px;
	margin-left: auto;
	margin-right: auto;
}

#content
{
	width: 692px;
	float: right;
	overflow:hidden;
}

#footer
{
	font-size:10px;
	color:#616161;
	text-align:right;
	width: 690px;
	float: right;
	margin-right:2px;
	margin-bottom:500px;
}

:focus { outline:0; }
::selection { background-color:#5e959e; }
::-moz-selection { background-color:#5e959e; }

@media screen and (max-width: 760px) {
	body {
		-webkit-text-size-adjust: 100%;
	}

	#pagewidth,
	#content,
	#footer {
		float: none;
		width: auto;
		max-width: 100%;
	}

	#pagewidth {
		padding: 0 12px;
		box-sizing: border-box;
	}

	#footer {
		margin-right: 0;
		margin-bottom: 48px;
		text-align: center;
	}

	.logo {
		width: 100%;
		float: none;
		margin: 16px 0 8px;
		text-align: center;
	}

	.logo img,
	.logo svg,
	.logo object {
		max-width: 100%;
		height: auto;
	}

	.menu {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.menu a {
		display: inline-block;
	}

	.menu .btn {
		float: none;
		display: inline-block;
		margin: 8px 14px 16px;
	}

	.page .background_image,
	.blogpost .image,
	.page_info,
	.image .een_image,
	.image .een_image img,
	.image .drieblokken_image_left,
	.image .drieblokken_image_right,
	.image .vierblokken_image,
	.tweeblokken_small,
	.tweeblokken_wide {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.image .een_image,
	.image .een_image img,
	.image .drieblokken_image_left,
	.image .drieblokken_image_right,
	.image .vierblokken_image,
	.tweeblokken_small,
	.tweeblokken_wide,
	.blogpost .image img {
		height: auto !important;
	}

	.image .tweeblokken_wide img,
	.image .tweeblokken_small img,
	.image .drieblokken_image_left img,
	.image .drieblokken_image_right img,
	.image .vierblokken_image img {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
	}

	.blogpost .image,
	.blogpost .left,
	.blogpost .right,
	.image .drieblokken_image_right,
	.image .vierblokken_image {
		float: none;
	}

	.blogpost .image {
		width: calc(100% + 2px) !important;
		margin-left: -1px;
	}

	.image .drieblokken_image_left,
	.image .drieblokken_image_right,
	.image .vierblokken_image_left,
	.image .vierblokken_image_right,
	.image .vierblokken_image,
	.tweeblokken_small,
	.tweeblokken_wide {
		margin-right: 0 !important;
		margin-bottom: 12px !important;
	}

	.blogpost .background,
	.page .background {
		display: none !important;
	}

	.blogpost .info,
	.blogpost .tweeblokkeninfoleft,
	.blogpost .tweeblokkeninforight,
	.blogpost .tekstlinks,
	.blogpost .tekstrechts,
	.blogpost .rechtshoog,
	.blogpost .linkshoog,
	.blogpost .vierblokken,
	.blogpost .drieblokken,
	.page_info {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: calc(100% - 2px) !important;
		height: auto !important;
		box-sizing: border-box;
		background-color: #34b1cb !important;
		margin: 0 1px;
	}

	.page_info .margin,
	.blogpost .info .margin {
		padding-top: 12px;
		padding-bottom: 18px;
	}

	.page_info .h1,
	.blogpost .info .h1 {
		display: block;
		margin-top: 2px;
	}

	.blogpost .vierblokken .more_info_link,
	.blogpost .drieblokken .more_info_link {
		margin-top: 0;
	}

	.blogpost .vierblokken .watch_btn,
	.blogpost .vierblokken .share_btn,
	.blogpost .drieblokken .watch_btn,
	.blogpost .drieblokken .share_btn {
		margin-top: 0;
	}

	.blogpost .watch_btn,
	.blogpost .share_btn,
	.blogpost .share_buttons,
	.blogpost .twitter_btn,
	.blogpost .linkedin_btn,
	.blogpost .facebook_btn {
		float: left;
	}

	.blogpost .image .empty_image {
		display: none;
	}

	.share {
		display: none !important;
	}

	.client {
		height: auto;
		padding: 20px;
		box-sizing: border-box;
	}

	.client #title,
	.client #subtitle,
	.client #form,
	.client .fields,
	.client .overfields {
		position: static;
		width: auto;
		text-align: left;
	}

	.client #title {
		font-size: 42px;
	}

	.client #subtitle {
		margin-top: 8px;
		font-size: 26px;
	}

	.client #form {
		float: none;
		margin-top: 20px;
	}

	.client #form .input,
	.clientpost .text {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		box-sizing: border-box;
		text-align: left;
	}

	.client #form .input .text,
	.clientpost {
		text-align: left;
	}

	.clientpost #title,
	.clientpost .text {
		margin-left: 16px;
		margin-right: 16px;
	}
}