/* colors:
#000000 zwart
#444444 grijs
#626054 grijs 2
#6b5121 bruin (107,81,33)
#281c15 donkerbruin (40,28,21)
#b06030 rood (176,96,48)
#eeeee7 beige (238,238,231)
*/

html {
	background: #eeeee7 url('../img/bg-paper.png') center top repeat;
	height: 100%;
	}

.textbrowser {
	position: absolute;
	left: -9999px;
	}

/* layout */
body.grid #main { background: url('../img/grid-v24.png') left 16px repeat; }
body.grid .container { background: url('../img/grid-h140.png') left top repeat; }
.container {
	position: relative;
	width: 960px;
	margin: 0 auto;
	clear: both;
	}
	article .container,
	footer .container {
		width: 540px;
		padding-left: 280px;
		padding-right: 140px;
		}
#main {
	background: url('../img/clouds.png') left top fixed no-repeat;
	}
#article section {
	box-shadow: inset 0 2px 2px -2px rgba(255,255,255,0.5);
	}
	section .inner,
	footer .inner {
		padding: 53px 0 41px 0;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		overflow: hidden;
		}
	#intro .inner {
		border-top: none;
		}
	section hgroup,
	footer hgroup {
		float: left;
		width: 120px;
		margin-left: -140px;
		}
	footer form {
	  visibility: hidden;
	}
	.marginnote {
		float: right;
		width: 120px;
		margin-right: -140px;
		}
	#intro .inner {
		padding-top: 118px;
		}
	#werk        { background-color: rgba(107,81,33,0.1); }
	#proces      { background-color: rgba(40,28,21,0.1); }
	#wie         { background-color: rgba(176,96,48,0.1); }
	#consulting  { background-color: rgba(40,28,21,0.1); }
	#intro .inner       { background: transparent url('../img/strooier.png') center 80px no-repeat; }
	#werk .inner        { background: transparent url('../img/lepel.png') left bottom no-repeat; }
	#proces .inner      { background: transparent url('../img/schep.png') right bottom no-repeat; }
	#wie .inner         { background: transparent url('../img/vork.png') right bottom no-repeat; }
	footer .inner       { background: transparent url('../img/strooier-x.png') center bottom no-repeat; }
	.single #intro .inner { background-position: center bottom; }
header {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	}
	header a {
		border: none;
		}
	header .logo {
		position: fixed;
		top: 40px;
		}
nav {
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #281c15;
	color: #6b5121;
	opacity: 0.95;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-o-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
	nav .container .content {
		padding-top: 10px;
		}
		nav .container form {
			padding: 0 0 10px 0;
			}
			nav .container form p {
				margin: 0;
				}
			nav .container form .close {
				margin-left: 0.6em;
				color: #eeeee7;
				border: none;
				}
		nav .container .menu {
			position: absolute;
			right: 0;
			margin-top: -10px;
			padding: 6px 5px 6px 5px;
			background-color: #281c15;
			border-radius: 0 0 6px 6px;
			-webkit-border-radius: 0 0 6px 6px;
			-o-border-radius: 0 0 6px 6px;
			-moz-border-radius: 0 0 6px 6px;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
			-o-box-shadow: 0 0 10px rgba(0,0,0,0.5);
			-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
			}
		nav ul {
			margin: 0 0 0 0;
			overflow: hidden;
			border-left: 1px solid rgba(0,0,0,0.1);
			border-right: 1px solid rgba(255,255,255,0.1);
			}
			nav li {
				float: left;
				}
				nav .menu a {
					display: block;
					border: none;
					padding: 4px 10px 6px 10px;
					text-align: center;
					font-size: 11px;
					line-height: 12px;
					border-left: 1px solid rgba(255,255,255,0.1);
					border-right: 1px solid rgba(0,0,0,0.1);
					border-radius: 4px;
					-webkit-border-radius: 4px;
					-o-border-radius: 4px;
					-moz-border-radius: 4px;
					}
					nav .menu a:hover,
					nav .menu a:focus,
					nav .menu a:active {
						color: #eeeee7;
						background-color: #b06030;
						background: -webkit-gradient(linear, left top, left bottom, from(rgba(176,96,48,1)), to(rgba(176,96,48,0.75)));
						background: -moz-linear-gradient(top, rgba(176,96,48,1), rgba(176,96,48,0.75));
						outline: none;
						}
					nav .menu a:active {
						border-right-color: rgba(255,255,255,0.1);
						border-left-color: rgba(0,0,0,0.1);
						opacity: 0.8;
						}
					nav .menu a span.title {
						display: block;
						font-size: 18px;
						line-height: 18px;
						color: #eeeee7;
						}
					nav .menu a span.description {
						}
				nav .menu a.home {
					background: url('/img/icons/home.png') 14px 14px no-repeat;
					width: 20px;
					height: 0;
					padding-top: 40px;
					padding-bottom: 0;
					overflow: hidden;
					}
					nav .menu a.home:hover,
					nav .menu a.home:focus,
					nav .menu a.home:active {
						background-color: #b06030;
						background-image: url('/img/icons/home-o.png');
						}
footer {
	position: relative;
	z-index: 1000;
	display: block;
	color: #eeeee7;
	background-color: #281c15;
	overflow: hidden;
	}
	footer .vcard {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 260px;
		}
	#colofon {
		margin: 20px 0 0 0;
		color: rgba(238,238,231,0.15);
		text-shadow: rgba(0,0,0,0.4) -1px -1px 0;
		}
		#colofon a {
			color: rgba(238,238,231,0.15);
			border: none;
			text-decoration: underline;
			}
		#colofon a:hover {
			background-color: transparent;
			outline: none;
			}

.block {
	padding: 24px 20px;
	margin: 0 -20px 24px -20px;
	background-color: rgba(255,255,255,0.25);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	}
	.block img {
		width: 100%;
		height: auto;
		}

#intro iframe {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 12px 10px;
	background-color: rgba(255,255,255,0.25);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	}

#showcase {
	position: relative;
	float: right;
	width: 256px;
	margin: -4px -146px 10px 20px;
	padding: 6px;
	background-color: rgba(255,255,255,0.15);
	border-bottom: 1px solid rgba(255,255,255,0.33);
	border-right: 1px solid rgba(255,255,255,0.33);
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-o-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	-o-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	}
	#showcase .showcase-inner {
		position: relative;
		padding: 10px;
		background-color: rgba(107,81,33,0.1);
		border-top: 1px solid rgba(255,255,255,0.33);
		border-left: 1px solid rgba(255,255,255,0.33);
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-o-border-radius: 10px;
		-moz-border-radius: 10px;
		box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		-o-box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		}
	#showcase ul {
		margin: 0 -10px;
		padding: 0;
		}
		#showcase li {
			list-style-type: none;
			list-style-image: none;
			width: 256px;
			}
			#showcase a.lightbox,
			#showcase h3,
			#showcase p {
				margin-left: 10px;
				margin-right: 10px;
				}
			#showcase a.lightbox,
			#showcase a.lightbox:hover,
			#showcase a.lightbox:focus {
				display: block;
				margin-bottom: 10px;
				outline: none;
				border: 3px solid rgba(255,255,255,0.67);
				box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
				-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
				-o-box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
				-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
				}
				#showcase a.lightbox:hover,
				#showcase a.lightbox:focus {
					border-color: #fff;
					}
				#showcase img {
					display: block;
					}
	#showcase #showcase-nav {
		text-align: center;
		margin-bottom: 3px;
		}
		#showcase #showcase-prev,
		#showcase #showcase-next {
			display: block;
			position: absolute;
			bottom: 5px;
			margin-left: 0;
			padding: 0;
			width: 30px;
			height: 30px;
			font-size: 15px;
			line-height: 30px;
			text-align: center;
			border-radius: 15px;
			-webkit-border-radius: 15px;
			-o-border-radius: 15px;
			-moz-border-radius: 15px;
			}
			#showcase #showcase-prev:hover,
			#showcase #showcase-next:hover,
			#showcase #showcase-prev:focus,
			#showcase #showcase-next:focus {
				outline: none;
				}
		#showcase-prev {
			left: 4px;
			}
		#showcase-next {
			right: 5px;
			}
		#showcase-nav a {
			padding: 3px 5px;
			margin-left: 3px;
			border: none;
			}
		#showcase-nav a.activeSlide {
			background-color: #fff;
			}

.kader {
	position: relative;
	margin: 0 0 1.5em 0;
	padding: 20px;
	border-radius: 10px 0 10px 10px;
	background-color: rgba(238,238,231,0.25);
	box-shadow: none !important;
	}
	#intro .kader p {
		margin-bottom: 0;
		}
	.kader header {
		position: static;
		float: right;
		width: 130px;
		margin: -20px -160px 0 160px;
		padding: 20px 10px 20px 0;
		border-radius: 0 10px 10px 0;
		background-color: rgba(238,238,231,0.25);
		}
		.kader header h1 {
			position: static;
			margin-left: -140px;
			padding: 0 0 0 20px;
			border-left: 1px solid rgba(255,255,255,0.5);
			}

#tweets {
	position: relative;
	overflow: hidden;
	padding-left: 0;
	}
	.tweet {
		position: relative;
		float: left;
		width: 180px;
		overflow: hidden;
		list-style-type: none;
		list-style-image: none;
		padding: 10px 20px 12px 20px;
		margin: 20px;
		background-color: rgba(40,28,21,0.33);
		color: #eeeee7;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-o-border-radius: 10px;
		-moz-border-radius: 10px;
		box-shadow: 0 0 20px rgba(0,0,0,0.25);
		-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.25);
		-o-box-shadow: 0 0 20px rgba(0,0,0,0.25);
		-moz-box-shadow: 0 0 20px rgba(0,0,0,0.25);
		}
		.tweet:hover {
			background-color: rgba(40,28,21,0.75);
			box-shadow: 0 0 20px rgba(0,0,0,0.5);
			-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
			-o-box-shadow: 0 0 20px rgba(0,0,0,0.5);
			-moz-box-shadow: 0 0 20px rgba(0,0,0,0.5);
			}
		.tweet-meta {
			margin-top: 2px;
			}
		.tweet a {
			color: #fff;
			border-color: #fff;
			}
body.js #tweets {
	position: absolute;
	margin-left: -280px;
	top: 78px;
	width: 300px;
	overflow: visible;
	}
	body.js .tweet {
		float: none;
		width: 220px;
		margin: 0;
		}
	#tweets p.source,
	#tweets p.source a {
		color: #626054;
		}
		#tweets .tweet:hover p.source,
		#tweets .tweet:hover p.source a {
			color: #eeeee7;
			}
	#tweets .tweet p {
		margin-bottom: 0;
		}

ul.columns {
	margin-left: 0;
	margin-right: -140px;
	padding: 0;
	overflow: hidden;
	list-style-type: none;
	list-style-image: none;
	}
	ul.columns li.odd,
	ul.columns li.even {
		position: relative;
		float: left;
		width: 260px;
		margin-right: 20px;
		padding-bottom: 1.25em;
		}
	ul.columns li.odd {
		clear: left;
		}
	ul.columns .social a {
		opacity: 0.5;
		overflow: hidden;
		}
		ul.columns .social a:hover,
		ul.columns .social a:focus {
			opacity: 1.0;
			}
			ul.columns .social a img {
				position: relative;
				}
			ul.columns .social a:hover img,
			ul.columns .social a:focus img {
				top: -3px;
				}



/* form */
fieldset {
	position: relative;
	}
#contact label {
	display: block;
	text-transform: uppercase;
	margin: 0 0 3px 5px;
	letter-spacing: 1px;
	color: rgba(238,238,231,0.15);
	text-shadow: rgba(0,0,0,0.4) -1px -1px 0;
	}
textarea,
.outer-button {
	display: inline-block;
	vertical-align: bottom;
	padding: 3px;
	background-color: rgba(0,0,0,0.25);
	border: none;
	border-right: 1px solid rgba(176,96,48,0.25);
	border-bottom: 1px solid rgba(176,96,48,0.25);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
	-o-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
	}
textarea {
	width: 380px;
	height: 132px;
	margin-right: 10px;
	padding: 10px !important;
	color: #eeeee7;
	}
	textarea:focus {
		background-color: rgba(0,0,0,0.5);
		outline: none;
		}
	button {
		display: inline-block;
		cursor: pointer;
		padding: 5px 20px;
		text-shadow: rgba(0,0,0,0.4) -1px -1px 0;
		color: #eeeee7;
		background-color: #b06030;
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(176,96,48,1)), to(rgba(176,96,48,0.75)));
		background: -moz-linear-gradient(top, rgba(176,96,48,1), rgba(176,96,48,0.75));
		border-left: 1px solid rgba(255,255,255,0.15);
		border-top: 1px solid rgba(255,255,255,0.15);
		border-right: none;
		border-bottom: none;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-o-border-radius: 8px;
		-moz-border-radius: 8px;
		box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
		-o-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
		}
		button:hover,
		button:focus {
			color: #fff;
			background: -webkit-gradient(linear, left top, left bottom, from(rgba(176,96,48,1)), to(rgba(176,96,48,0.85)));
			background: -moz-linear-gradient(top, rgba(176,96,48,1), rgba(176,96,48,0.85));
			box-shadow: 0 0 6px rgba(238,238,231,0.5);
			-webkit-box-shadow: 0 0 6px rgba(238,238,231,0.5);
			-o-box-shadow: 0 0 6px rgba(238,238,231,0.5);
			-moz-box-shadow: 0 0 6px rgba(238,238,231,0.5);
			}
		button:active {
			color: rgba(255,255,255,0.5);
			opacity: 0.75;
			box-shadow: none;
			-webkit-box-shadow: none;
			-o-box-shadow: none;
			-moz-box-shadow: none;
			}
#message {
	position: absolute;
	right: -140px;
	top: 16px;
	width: 240px;
	margin: 0;
	padding: 10px;
	color: #eeeee7;
	background-color: #626054;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-moz-border-radius: 4px;
	}

.social-links {
	}
	.social-links .button {
		position: relative;
		display: inline-block;
		width: 63px;
		height: 63px;
		overflow: hidden;
		background-color: rgba(0,0,0,0.25);
		text-shadow: rgba(0,0,0,0.75) -1px -1px 0;
		border-radius: 32px;
		border: none;
		border-right: 1px solid rgba(176,96,48,0.25);
		border-bottom: 1px solid rgba(176,96,48,0.25);
		box-shadow: inset 2px 2px 8px rgba(0,0,0,0.5);
		}
	.social-links .button:hover,
	.social-links .button:focus {
		outline: none;
		}
		.social-links .button img {
			position: absolute;
			left: 9px;
			top: 9px;
			}
		.social-links .button:before {
			display: block;
			width: 46px;
			height: 46px;
			margin: 8px;
			background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25)); /* prefix-less ;) */
			background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25))); /* Safari 4-5, Chrome 1-9 */
			background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25)); /* Safari 5.1, Chrome 10+ */
			background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25)); /* Firefox 3.6+ */
			background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25)); /* IE 10 */
			background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25)); /* Opera 11.10+ */
			background-color: #281c15;
			border: none;
			border-left: 1px solid rgba(176,96,48,0.25);
			border-top: 1px solid rgba(176,96,48,0.25);
			border-radius: 23px;
			box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
			content: "";
			}
		.social-links .button:hover:before,
		.social-links .button:focus:before {
			background-color: #b06030;
			border-left-color: rgba(238,238,231,0.25);
			border-top-color: rgba(238,238,231,0.25);
			box-shadow: 0 0 16px rgba(238,238,231,0.25);
			}
		.social-links .button:active:before {
			border-left-color: rgba(40,28,21,0.5);
			border-top-color: rgba(40,28,21,0.5);
			box-shadow: 0 0 16px rgba(238,238,231,0.25);
			background-color: #b06030;
			opacity: 0.8;
			box-shadow: inset 0 0 4px rgba(40,28,21,0.5);
			}



/* animations */
.social-links .button:before,
#showcase img,
.social a img,
button,
textarea,
a {
	transition: all 0.15s ease-in-out;
	-webkit-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out; 
	-moz-transition: all 0.15s ease-in-out;
	}
hgroup {
	transition: opacity 0.25s ease-in-out;
	-webkit-transition: opacity 0.25s ease-in-out;
	-o-transition: opacity 0.25s ease-in-out; 
	-moz-transition: opacity 0.25s ease-in-out;
	}
.tweet {
	transition: background-color 0.25s ease-in-out;
	-webkit-transition: background-color 0.25s ease-in-out;
	-o-transition: background-color 0.25s ease-in-out; 
	-moz-transition: background-color 0.25s ease-in-out;
	}



/* accordion */
.accordion {
	background-color: rgba(255,255,255,0.25);
	margin-left: -10px;
	margin-right: -10px;
	list-style-position: inside;
	border: 10px solid transparent;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	}
	.accordion li {
		background-color: #eeeee7;
		padding: 10px;
		border-bottom: 1px solid rgba(107,81,33,0.1);
		border-right: 1px solid rgba(107,81,33,0.1);
		border-top: 1px solid rgba(255,255,255,0.5);
		border-left: 1px solid rgba(255,255,255,0.5);
		border-radius: 7px;
		-webkit-border-radius: 7px;
		-o-border-radius: 7px;
		-moz-border-radius: 7px;
		}
		.accordion h3 {
			font-weight: normal;
			text-transform: uppercase;
			}
			.accordion h3 .accordion-tab {
				display: block;
				padding: 3px 10px 3px 10px;
				color: #eeeee7;
				background-color: #b06030;
				background: -webkit-gradient(linear, left top, left bottom, from(rgba(176,96,48,1)), to(rgba(176,96,48,0.85)));
				background: -moz-linear-gradient(top, rgba(176,96,48,1), rgba(176,96,48,0.85));
				border: none;
				border-bottom: 1px solid rgba(107,81,33,0.2);
				border-radius: 0 0 7px 7px;
				-webkit-border-radius: 0 0 7px 7px;
				-o-border-radius: 0 0 7px 7px;
				-moz-border-radius: 0 0 7px 7px;
				}
			.accordion li.active h3 .accordion-tab {
				color: #b06030;
				background: #fff;
				outline: none;
				}
			.accordion h3 a:hover,
			.accordion h3 a:focus {
				background-color: #b06030;
				color: #fff;
				outline: none;
				}
		.accordion .accordion-content {
			padding: 10px;
			}



/* cinbox */
#cinbox {
	border: 40px solid #111;
	border-top: none;
	background-color: #000;
	background-color: rgba(0,0,0,0.9);
	color: #fff;
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
	-o-box-shadow: 0 0 20px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.5);
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-o-border-radius: 20px;
	-moz-border-radius: 20px;
	}
	#cinboxTitle {
		height: 34px;
		padding-top: 6px;
		background-color: #111;
		overflow: hidden;
		text-shadow: 0 0 10px #fff;
		}
	#cinboxNav,
	#cinboxClose {
		margin-top: 6px;
		font-size: 14px;
		line-height: 18px;
		}
	#cinboxContent {
		border-left: 1px solid #000;
		border-right: 1px solid #222;
		border-bottom: 1px solid #222;
		box-shadow: inset 0px 0px 10px #000;
		-webkit-box-shadow: inset 0px 0px 10px #000;
		-o-box-shadow: inset 0px 0px 10px #000;
		-moz-box-shadow: inset 0px 0px 10px #000;
		}
		#cinboxText {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			padding: 20px;
			font-size: 14px;
			line-height: 18px;
			color: #fff;
			background-color: #000;
			background-color: rgba(0,0,0,0.75);
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
			-o-box-shadow: 0 0 10px rgba(0,0,0,0.5);
			-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
			}
		#cinboxContent img {
			position: relative;
			z-index: -1;
			}
	#cinboxNav {
		color: #888;
		}
	#cinbox a {
		color: #aaa;
		border: none;
		}
	#cinboxNav a {
		color: #888;
		margin-left: 0.4em;
		}
		#cinbox a:hover,
		#cinbox a:focus {
			color: #fff;
			background-color: transparent;
			outline: none;
			text-shadow: 0 0 10px #fff;
			}



/* small screen */
@media only screen and (max-width:959px) {

	html { -webkit-text-size-adjust:none; }
	#cinbox {
		font-size: 1em;
		border-width: 10px !important;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
		-moz-border-radius: 5px;
		}
	#main {
		overflow: hidden;
		}
	header {
		position: relative;
		}
		header .logo {
			position: absolute;
			left: 40px;
			top: 70px;
			}
			.logo img {
				max-width: 100%;
				height: auto;
				}
	html {
		background-color: #eeeee7;
		}
	html body {
		font-size: 16px;
		line-height: 24px;
		}
	html #showcase,
	html .columns,
	html nav,
	html .vcard,
	html footer label,
	html #message,
	html .tweet-meta,
	html h2 {
		font-size: 14px;
		line-height: 18px;
		}
	html #showcase h3,
	html .columns h3 {
		font-size: 16px;
		line-height: 18px;
		}
	.container {
		width: auto;
		margin: 0 20px 0 40px;
		background: none;
		}
		article .container,
		footer .container {
			width: auto;
			padding: 0;
			}
		nav .container {
			margin-left: 0;
			}
	#intro .inner  { background-position: -1350px bottom; padding-left: 40px; padding-top: 189px; }
	#werk .inner   { padding-bottom: 257px; }
	footer .inner  { background-position: -1310px bottom; }
	nav ul {
		border: none;
		}
		nav .menu a {
			margin: 0 1px 0 0;
			padding: 10px 9px;
			border: none;
			}
		nav .menu a.home {
			padding-top: 38px;
			background-position: 13px 14px;
			}
			nav a .description {
				display: none;
				}
	#showcase {
		margin: 0 0 20px 20px;
		}
	ul.columns {
		margin-right: 0;
		}
	section hgroup {
		float: none;
		margin-left: -20px;
		margin-bottom: 22px
		}
	#intro .block {
		margin-left: -20px;
		margin-right: 0;
		}
	body p.big {
		font-size: 24px;
		line-height: 32px;
		margin-bottom: 24px;
		}
	button {
		position: static;
		width: auto;
		}
.kader {
	border-radius: 10px;
	}
	.kader header {
		float: none;
		width: auto;
		margin: 0 0 1.5em 0;
		padding: 0;
		background-color: transparent;
		}
		.kader header h1 {
			margin-left: 0;
			padding: 0;
			border-left: none;
			}
#message {
		position: static;
		width: auto;
		right: auto;
		bottom: auto;
		text-align: center;
		}
	body.js #tweets {
		position: relative;
		top: auto;
		margin-left: 0;
		width: auto;
		}
		body.js #tweets .tweet {
			margin: 20px;
			}
		.tweet {
			width: auto !important;
			}
	footer .vcard {
		position: static;
		width: auto;
		margin-bottom: 53px;
		}
	footer form {
		margin-left: 70px;]
		}

}

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

	header .logo {
		left: 0;
		}
	ul.columns li.odd,
	ul.columns li.even,
	ul.columns li.last {
		width: 45%;
		margin-right: 5%;
		}
	textarea {
		max-width: 280px;
		}

}

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

	#intro .block {
		margin-left: -20px;
		}
	#showcase {
		float: none;
		margin: 0 0 20px 0;
		}
		#showcase li {
			width: auto;
			max-width: 256px;
			}
			#showcase img {
				opacity: 1.0;
				}
	ul.columns li.odd,
	ul.columns li.even,
	ul.columns li.last {
		float: none;
		width: auto;
		margin-right: 0;
		}

}

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

	#intro .block {
		margin-left: -60px;
		}
	textarea {
		max-width: 180px;
		}

}