/* general styling */
* { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; }
html, body { height:100%; margin:0; }
header, footer, nav, aside, section, article { display: block; }
a { text-decoration: none; }
ul { list-style: none; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
img { border: none; }
h1, h2, h3, h4 { font-weight: normal; }
.georgia { font-family: Georgia; font-style: italic; font-weight: bold; }
.text-info .lightgray { color: #808080;cursor:auto; }
.text-info .lightgray:hover { text-decoration: none; }
.binnenkort:hover {
	cursor: default;
}

/* full screen, sticky footer */
html, body { height: 100%; }
body { width: 100%; overflow: hidden; background: #FFF; position: relative; }
body.random { overflow-x: hidden; overflow-y: hidden; }
body.overflow { overflow-y: auto; }
#content, #images-holder { height: 100%; min-height: 100%; }
#wrapper, #texture, #shadow { min-height: 100%; height: 100%;	}
#wrapper { position: relative; }
#texture { display: none; background: url(../images/raster.png) repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }
#shadow { background: #FFF; width: 100%; position: fixed; z-index: 1; }
.home #texture { display: block; }

.plan { height: auto !important; width: auto!important; margin-top: 40px; }
.fadeOpacity { opacity: 0.5; }
/* fixed items */

/* header */
header { border: 1px solid #FFF; float: left; z-index: 2; position: fixed; top: 20px; left: 100px;  }

/* logo */
h1 { padding: 15px; float: left; border: 1px solid #FFF; border-top: none; border-left: none; border-bottom: none; }
h1 a { display: block; float: left; }
h1 a span { float: left; clear: left; display: block; }
h1 a #logo {color: #FFF; line-height: 65px; font-size: 90px; font-weight: bold; }
h1 a #sub { margin-top: 6px; display: block; font-size: 11px; color: #FFF; letter-spacing: 12px; text-transform: uppercase; }
h1:hover { background: #FFF; }
h1:hover a span { color: #000 !important; }
.turnblack h1 a span { color: #000 !important; }

#border-boxes { float: left; }
.box { width: 46px; height: 31px; border: 1px solid #FFF; border-left: none; border-top: none; border-bottom: none; display: block; }
.column { float: left; }
.column:first-child .box { width: 45px; }
.turnblack nav ul li span, .turnblack nav ul li a { color: #000; }
.double { height: 73px; }

/* menu */
header nav { clear: left; float: left; }
header nav ul li:first-child { border-left: none; }
header nav ul li { height: 32px; border:1px solid #FFF;border-bottom: none; border-right: none; float: left; display: block; }
header nav ul li a { padding: 10px; display: block; color: #FFF; font-size: 10px; line-height: 10px; text-transform: uppercase; font-weight: normal;  }
header nav ul li span { height: 12px; padding: 10px; display: block; font-size: 10px; color: #FFF; font-weight: normal; line-height: 11px; text-transform: uppercase; cursor: pointer; }


header nav ul li:hover { background: #FFF; }
header nav ul li:hover a, header nav ul li:hover span { color: #000; }

.font-bold {text-decoration: underline; }
header nav ul li.active > *.font-normal { text-decoration: none; }

/* info box */
.cv #info, .team #info, .contact #info { width: 340px; height: 500px; overflow: auto; }
.cv #info h2, .team #info h2 { font-size: 20px; line-height: 15px; }
.contact #info h2 { font-size: 20px; line-height: 20px; }
.cv #info ul, .team #info ul { margin-top: 20px; }
.cv #info ul li, .team #info ul li, .contact #info ul li { margin-top: 20px; }
.cv #info ul li:first-child, .team #info ul li:first-child, .contact #info ul li:first-child { margin-top: 0; }
.team #info ul li a { margin-top: 20px; color: #000; text-decoration: underline;  }
.cv #images-holder, .team #images-holder, .contact #images-holder  { width: 100% !important; }
#info a { color: #000; text-decoration: underline; }
.cv #info h3 { font-size: 16px; color: #000; margin: 20px 0 10px 0; padding-top: 20px; border-top: 1px dashed #ccc; }
.cv #info h3.first { padding-top: 0; border: none; }

.cv #info h1 {
	float: none;
	padding: 0;
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: bold;
}

.cv #info h4 {
	font-weight: bold;
	margin-top: 20px;
	font-size: 16px;
}

.cv #info h5 {
	font-size: 10px;
	margin-top: 10px;
	display: block;
}

.fadeOpacity { opacity: 0.5; }

#text-boxes > * { float: left; }

.text-info {
	background: #FFF;
	position: fixed;
	right: 10px;
	bottom: 100px;
	width: 465px;
	height: 450px;
	padding: 20px;
	padding-right: 0;
	opacity: 1;
	font-size: 10px;
	line-height: 14px;
	color: #333;
}

.text-info-inner { height: 100%; overflow-y: auto; padding-right: 20px; }
#info { font-size: 10px; line-height: 14px; position: fixed; bottom: 50px; right: 10px; background: #FFF; padding: 20px; z-index: 1; width: 445px; }
#image-hopper { float: left;}
#read-more { font-size: 11px; float: left; display: block; margin-top: 5px; margin-left: 10px; }
.text-info .toggle-projects { background: url(../images/menu-toggle.png) no-repeat; width: 14px; height: 11px; display: block; position: absolute; top: 20px;
	right: 30px; cursor: pointer; }
.text-info .toggle-projects:hover { background-position: 0 -11px; }
.text-info h2, #info h2 { font-size: 25px; line-height: 27px; font-weight: bolder; margin-bottom: 3px; }

.text-info h2 { font-size: 25px; line-height: 24px; }
.contact #info p { margin-left: 18px; }
.contact #info h2 { margin-left: 18px; margin-top: 20px; }

.text-info h3 { font-size: 10px; color: #5e5e5e; margin-bottom: 23px; }
.text-info p.top-info { color: #333; margin-bottom: 20px; padding-bottom: 20px; background: url(../images/dotted-line.png) repeat-x bottom left; }
.text-info p.bottom-info { color: #5e5e5e; overflow: hidden; margin-bottom: 10px; }
.text-info p.bottom-info.show { height: auto; overflow: auto; }
#info span { color: #000; cursor: pointer; }
#info span:hover { text-decoration: underline; }

/* projecten */
#projects { position: absolute; top: 215px; left: 100px; z-index: 3; width: 70%; }
#projects .toggle-projects { background: url(../images/projects-close.png) no-repeat; width: 17px; height: 18px; display: block; position: absolute; top: -25px; right: 0; cursor: pointer; }
#projects ul li:first-child, #projects ul li.nth-child { margin-left: 0; clear: both;}
#projects ul li { display: block; float: left; width: 18.4%; margin-left: 2%; margin-bottom: 2%; }
#projects ul li a { position: relative; display: block; width: 100%; color: #000; }
#projects ul li a:hover { text-decoration: underline; }
#projects ul li a img { display: block; width: 100%;  }
#projects .info { margin-top: 10px; }
#projects .info h2 { font-size: 11px; font-weight: normal; color: #000; }
#projects .overlay { text-indent: -9999px; background: url(../images/open-icon.jpg) no-repeat center center #000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; opacity: 0; filter: alpha(opacity = 0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#projects .overlay:hover { opacity: 1; filter: alpha(opacity = 100); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;	-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.zed010 #images-holder > img { float: left; }

/* images */
.random #images-holder > img { display: none; }
#images-holder > img:first-child, .random #images-holder > img { border-left: none; }
#images-holder > img { border-left: 20px solid #FFF; float: left; height: 100%; display: block; }
#images-holder > img { width: 100%; height: auto; }
.random { overflow: hidden;}

/* indicator */
#indicator { display: none; position: fixed; bottom: 20px; left: 20px; width: 83px; height: 34px; background: url(../images/indicator.jpg) no-repeat 0 0 #FFF; padding-left: 30px; line-height: 33px; font-size: 10px; color: #666; }

#indicator {
	-moz-animation-name: bounce;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-timing-function: ease-in-out;
}

@-moz-keyframes bounce {
	0% {
		bottom: 20px;
	}
	50% {
		bottom: 40px;
	}
	100% {
		bottom: 20px;
	}
}
/* indicator */

/* image hopper */
#image-hopper ul li:first-child { margin-left: 0;  }
#image-hopper ul li { cursor: pointer; margin-left: 5px; float: left; display: block; color: #000; width: 25px; height: 25px; text-align: center; font-size: 11px; line-height: 25px;}
#image-hopper ul li.current { background:red; color: #FFF; }
/* image hopper */

/* footer */
#footer { background: #FFF; padding: 5px; position: absolute; right: 10px; bottom: 10px; height: 15px; z-index: 2; }
#footer p { color: #000; font-size: 10px; }

/* responsive */