* {
	box-sizing: border-box;	
	-moz-box-sizing: border-box;	
}
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}

@font-face {
    font-family: 'helvetica_neue_lt_com87HvCn';
    src: url('../fonts/helvetica_neue_lt_condensed.eot');
    src: url('../fonts/helvetica_neue_condensed.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helvetica_neue_condensed.ttf') format('truetype'),
         url('../fonts/helvetica_neue_condensed.svg#helvetica_neue_lt_com87HvCn') format('svg');
    font-weight: normal;
    font-style: normal;

}
html, body {
	background-color:#f0f4e8;
	height:100%;
	margin:0px;
	padding:0px;
	font-size:10px;
}
#container {
	width:988px;
	margin:0 auto;
	background-color:#fff;
	min-height:100%;
	padding-bottom:40px;
}
#header {
	height:350px;	
	position:relative;
	padding:.9rem 2.4rem;
	margin-bottom:30px;
	background-repeat:no-repeat;
}
#header h3 {
	margin:0px;
	line-height:.7em;
	font-size:9rem;
	font-family:'helvetica_neue_lt_com87HvCn';
	font-weight:300;
	text-transform:uppercase;
}
#header h3.wit {
	color:#fff;	
}
#header h3 a {
	color:#000;
	text-decoration:none;
}
#header h3.wit a {
	color:#fff;	
}
nav {
	width:270px;
	float:left;	
}
nav ul, nav ul li {
	list-style:none;
	margin:0px;
	padding:0px;
	text-align:right;	
	font-size:3.8rem;
	font-family:'helvetica_neue_lt_com87HvCn';
	font-weight:300;
	text-transform:uppercase;
	line-height:1em;
	letter-spacing:.05em;
}
nav ul li li {
	font-size:1.6rem;
	padding:.5rem;
}
nav ul li a {
	text-decoration:none;	
}
nav ul li.turquoise a {
	color:#1b9cb2;
}
nav ul li.bordeaux a {
	color:#69173b;
}
nav ul li.groen a {
	color:#c5d4a4;
}
nav ul li.blauw a {
	color:#3b4496;
}
nav ul li.paars a {
	color:#952456;
}
nav ul ul {
	display:none;
}
nav ul .current ul, nav ul .section ul {
	display:block;
}
nav ul li.Colofon {
	font-size:1.6rem;
	padding:1em .5rem .5rem .5rem;
}

#main {
	width:630px;
	float:left;
	margin-left:50px;
}
 #kunstlijst {
      width: 100%;
      margin: auto;
	  padding:0px;
	  list-style:none;
    }
    .item {
      height: 200px;
	  margin:0px;
	  padding:0px;
	  list-style:none;
	  float:left;
    }
	.mfp-title {
		color:#000;	
		font-family:"Helvetica Neue", Helvetica, Gotham, Arial, sans-serif;	
		font-size:1.6rem;
	}

.typography table {
	width:100%;	
}
.typography table td {
	vertical-align:top;
}
table .date {
	width:10%;	
}
table .event {
	width:90%;	
}
table#opleidingen .date {
	width:22%;	
}
table#opleidingen .event {
	width:78%;	
}


.typography form {
	width:80%;
}
.typography form label.left {
	display:inline-block;
	width:35%;
	vertical-align:top;
}
.typography form label.required {
	display:block;
	color:#600;
	font-size:.8em;
	clear:both;
}
.typography form input[type="text"], .typography form input[type="email"], .typography form input[type="password"] {
	display:inline-block;
	width:100%;
	vertical-align:top;
	border:1px solid #666;
}
.typography form textarea {
	border:1px solid #666;
	width:100%;
}
.typography form .middleColumn {
	width:64%;
	display:inline-block;
}
.typography form .optionset, .typography form .optionset li {
	margin:0px;
	padding:0px;
	list-style:none;
}
.typography form .optionset li {
	float:left;	
}
.typography form div.field {
	clear:both;
	margin-bottom:.5em;
}
.typography form .Actions {
	text-align:right;
}


@media only screen and (max-width: 640px) {
	#container {
		width:100%;
		background-color:#fff;
		min-height:100%;
	}
	#main {
		width:100%;
		margin-left:0px;
		padding:0px 2.4rem;
	}
	#header {
		height:auto;
		background-size:cover;	
		
	}
	#menu {
		position:absolute;
		left:-100%;
		background-color:#fff;
		padding:0px 15% 0px 0px;
		text-align:right;
		width:100%;
		min-height:80%;
	}
	#menu-trigger {
		padding-left: 1.25em;
		position:absolute;
		right:10px;
		bottom:1rem;
		font-size:2rem;
	}
	#menu-trigger:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.25em;
		width: 1em;
		height: 0.15em;
		background: black;
		box-shadow: 
		0 0.25em 0 0 black,
		0 0.5em 0 0 black;		
	}
	#menu-trigger:focus {
		color:#fff;	
	}
	.media iframe {
		max-width:100%;
		height:auto;
	}
}