/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
/* Clearfix */
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
 *zoom: 1;
}

* {
    margin: 0;
    padding: 0;
}
html { 
	-webkit-text-size-adjust:none;
    height: 100%;
}
body {
	margin:0;
	padding:0;
	background-color:#000;
	color:#fff;
    font-family: 'Amatic SC', cursive;
}
.wrapper {
	position:relative;
	margin:0 auto;
	width:96%;
	max-width:1200px;
	padding:0 2%;
}
.container {
}
header {
	text-align: center;
}
img.logo {
	width:100%;
	max-width:418px;
	height:inherit;
}
div.topleft, div.topright {
	display:block;
	width:546px;
	height:546px;
	width:30vw;
	height:30vw;
	position:absolute;
	top:0;
	background-size:cover;
}
.home div.topleft {
	left:0;
	background-image: url(../images/linksboven.png);
}
.home div.topright {
	right:0;
	background-image: url(../images/rechtsboven.png);
}
nav#mainnav ul li {
	list-style-type:none;
	display:inline-block;
}
nav#mainnav ul li a {
	text-decoration:none;
	font-size:34px;
	padding:0 20px;
	border-right:1px solid #fff;
}
nav#mainnav ul li:last-child a {
	border:none;
}
nav#mainnav ul li.active a {
	text-decoration:underline;
}
div.container {
	width:1200px;
	display:block;
	margin:0 auto;
	background-color:#666666;
}
.headertext {
	width:100%;
	max-width:800px;
	margin:30px auto 80px;
	font-size:36px;
}
ul.items {
	margin-top:40px;
	margin-bottom:40px;
}
ul.items li {
	display:block;
	list-style-type:none;
	width:30%;
	margin-right:5%;
	float:left;
	text-decoration:none;
	color:#fff;
	font-size:54px;
	text-align:center;
	margin-bottom:40px;
}
ul.items li:nth-child(3n+3) {
	margin-right:0;
}
ul.items li div.img-container {
	height:388px;
	width:272px;
	border: 4px solid #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin:0 auto;
	overflow: hidden;
}
ul.items li div.item-image {
	background-size:cover;
	background-position:center;
	width:100%;
	height:100%;
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}
ul.items li div.item-image.img1 {
	background-image: url(../images/krijtborden.jpg?v=1);
}
ul.items li div.item-image.img2 {
	background-image: url(../images/menus.jpg?v=1);
}
ul.items li div.item-image.img3 {
	background-image: url(../images/raamillustraties.jpg?v=1);
}
ul.items li div.img-container:hover .item-image, ul.items li div.img-container:focus .item-image {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.colcontainer {
	margin-top:100px;
	margin-bottom:60px;
}
.col {
	float:left;
	font-size:36px;
}
.one-third {
	width:30%;
	padding-right:3%;
}
.two-third {
	width:calc(66% - 48px);
}
.dotted {
	border:4px #fff dotted;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:0 20px 20px 20px;
}
img.workshops {
	margin:-40px 0 0 20px;
}
footer {
	margin:100px 0;
}
footer .col {
	text-align:center;
}
footer .col a {
	text-decoration:none;
	color:#fff;
}
.scale-img {
	width:100%;
	height:inherit;
}
img.icon {
	display:inline-table;
	margin:0px 10px 0 0;
	vertical-align:middle;
}
img.icon.fb {
}
a {
	color:#fff;
}
p.contact a {
	text-decoration:none;
}
p.contact {
	font-size:44px;
}

/*		widescreen to 1280  ***********************************/
@media only screen and (min-width: 1280px)  {
	ul.items li div.img-container {
		height:485px;
		width:340px;
	}
}

/*		Tablet Layout: 768px.  ***********************************/
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#wrapper {
		width:96%;
		padding:0 2%;
	}
	ul.items li div.img-container {
		height:314px;
		width:220px;
	}
	footer .col {
		font-size:24px;
	}
}
/*		Mobile Layout: 320px.   *********************************/
@media only screen and (max-width: 767px) {
	#wrapper {
		width:96%;
		padding:0px 2% 0;
	}
	img.logo {
		width:40%;
		margin-top:20px;
	}
	ul.items li {
		width:100%;
		float:none;
		margin-bottom:30px;
	}
	ul.items li div.img-container {
		height:314px;
		width:220px;
	}
	.headertext {
		font-size:26px;
		padding-top:0px;
		margin-top:20px;
	}
	.colcontainer {
		margin-top: 0px;
		margin-bottom: 60px;
	}
	.col {
		float:none;
	}
	footer .col {
		font-size:24px;
	}
	.one-third {
		width:100%;
		padding-right:0;
		margin-bottom:60px;
		text-align:center;
	}
	.two-third {
		width:calc(100% - 48px);
	}
	.dotted {
		font-size:30px;
	}
	.scale-img.stripkaart {
		max-width:373px;
	}
	img.workshops {
		width:200px;
		height:inherit;
	}
	p.contact {
		font-size:30px;
	}
}
/*		Wide Mobile Layout: 480px.   **************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
}