@charset "UTF-8";
/*
	------ KLEUREN ------
	kleur 1: #CCC;
	kleur 2: #999;
*/
body {
	font-family: "Open Sans",arial,sans-serif;
	font-size: 12px;
	color: #333;
	background: #1579bb;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	padding: 0;
	margin: 0;
	font-weight: normal;
	font-family: 'krunchbold_italic', serif, Arial;
}

h1 {	font-size: 26px; color: #1579bb; }
h2 {	font-size: 18px; color: #1579bb; }
h3 {	font-size: 16px; color: #1579bb; }
h1,h2, h3, h4 { text-transform: uppercase; }
p {
	padding: 0 0 10px 0;
	margin: 0;
}
input[type="text"], textarea { width: 100%; }

iframe {
	display: block;
	width: 100%;
}

/* ------ COLOR SET ------*/

/* ------ LINKJES ------*/
a {
	text-decoration:none;
	color: #1579bb;
	padding: 0;
}
	a:hover {
		text-decoration: underline;
		color: #1579bb;
	}
	a span {
		display: none;
	}
a.active {
	color: #f73939;
}
a img {
	border: none;
}
a.portfolio-close {
    background: url(../img/xout.gif) repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 19px;
    margin: 0;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    transition: none 0s ease 0s;
    width: 19px;
}
a.portfolio-close:hover, #prev-port:hover, #next-port:hover {
    background-position: 0 -19px;
}
/* ------ CLASS ------*/
.f11 {
	font-size: 11px;
}
.f12 {
	font-size: 12px;
}
.f13 {
	font-size: 12px;
}
.f14 {
	font-size: 14px;
}
.pCenter {
	margin: 0 auto;
	position: relative;
}
.clear {
	clear: both;
}
.date {
	font-size: 11px;
	color:#666;
}
.dateBig {
	font-size: 36px;
	font-family: "cafetaregular";
}
.playbtn {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	margin: -22px 0 0 -22px;
}
.slogan {
	
	font-family: 'krunchbold_italic', serif, Arial;
	 color: #1579bb;
	text-align: center;
	vertical-align: middle;
		padding-top: 20px;
		font-size: 46px;
}
	.slogan h1 {
		line-height: 100px;
		vertical-align: middle;
	}
.fullWidth {
	background: #FFF;
	border: 1px transparent solid ;
	margin-bottom: -1px ;
	margin-top: -1px ;
}
.kolRight {
	padding-top: 30px;
}
.kolRight h3 {
	font-family: "Open Sans",arial,sans-serif;	
	color: #999;
	font-size: 12px;
	text-transform: uppercase;
	margin: 0 0 30px 0;
	letter-spacing: 3px;
}
.projectsArchive ul {
	margin: 0;
}
	.projectsArchive ul li {
		display: block;
		width: 100%;
		padding: 20px 0;
		border-bottom: #CCC solid 1px;
	}
	.projectsArchive ul li h2 {
		font-size: 24px;
		line-height: 26px;
	}
	.projectsArchive .tkst {
		width: 75%;
		float:right;
		padding: 0 20px 0 0;
	}
	
	.projectsArchive li .date {
		background: url(../img/bg_thk.gif) no-repeat bottom left #262626;
		float: left;
		display: block;
		width: 85px;
		padding: 8px 0 25px 0;
		margin: 0 0 50px 0;
		text-align: center;
		color: #FFF;
		font-size: 10px;
		font-family: "Open Sans",arial,sans-serif;
		text-transform: uppercase;
	}
	.projectImg {
		display: block;
		border: #CCC solid 1px;
	}
	.projectImg a {
	}
	.projectImg, .projectImg a{
		width: 100%;
		height: 300px;
		background-size: 100% auto;
		background-position: center center;
	}
ul.navProjects {
	list-style: none;	
	padding: 0;
	margin: 0;
}
	ul.navProjects a {
		line-height: 22px;
		color: #999;
	}
	ul.navProjects a:hover, ul.navProjects a.active {
		color: #000;
		text-decoration: none;
	}
.randomProjecten {
	overflow: hidden;
}
.randomProjecten li {
	display: block;
	float: left;
	margin: 0 5px 5px 0;
}
	.randomProjecten div{
		width: 46px !important;	
		height: 46px !important;
	}
	.randomProjecten div a{
		width: 40px;	
		height: 40px;
		background-size: 150% auto;
		background-position: center center;
		border: #CCC solid 3px;
		display: block;
	}
	.randomProjecten div a:hover{
		border: #f39024 solid 3px;
	}
.aanmeldForm {
	display: none;
}
/* ------ ID ------*/
#homeAgenda {
	display: block;
    height: 152px !important;
    width: 188px !important;
	border: #E00F20 solid 4px;
	background-color:#fff;
}
	#homeAgenda h3 {
		font-family: "cafetaregular";
		text-align:center;
		background-color: #E00F20;
		line-height: 50px;
		font-size: 36px;
		color: #fff;
	}
	#homeAgenda span {
		font-family: Arial Black, Arial;
		text-align:center;
		line-height: 90px;
		margin-top: 5px;
		font-size: 90px;
		font-weight: bolder;
		color:#000000;
		display: block;
		transition: all 0.6s ease 0s;
	}
	#homeAgenda:hover {
		text-decoration: none !important;
		border: #1579bb solid 4px;
		transition: all 0.6s ease 0s;
	}
	#homeAgenda:hover h3 {
		background-color: #1579bb;
		transition: all 0.6s ease 0s;
	}
#signInEvent {
	color: #fff;
	background-color: #000;
	text-decoration: none;
	padding: 6px 12px;
	font-size: 14px;
	transition: all 0.6s ease 0s;
}
	#signInEvent:hover {
		background-color: #1579BB;
		transition: all 0.6s ease 0s;
	}
#container {
	overflow:hidden;
	min-width: 650px;
}
	#container.pid_1 .fullWidth {
		padding: 0 0 0 0;
	}
	#container .mainContent {
		width: 68%;
	}
	#container.p_20 .mainContent {
		width: 100%;
	}
#top,#content, #footer {
	background: #FFF;
}
#top .pCenter{
		height: 140px;
}
	#top {
		padding-top: 20px;
		padding-bottom: 20px;
		display: block;
		position: relative;
	}
	
	#footer a {
		color: #FFFFFF;
	}
	#footer .floatRight {
		padding-right: 20px;
	}
#mobile-menu {
	display: none;
}
#content {
	padding: 20px 0 40px 0;
}

	#contentItem h1 {
		padding: 25px 0 20px 0;
	}
#logo {
	position: absolute;
	z-index: 30;
}
#logo img {
	padding: 0 ;
	height: 130px;
}
#nav {
	position:absolute;
	top: 50px;
	right: 0;
}
#newsItem .img {
	width: 100%;
}
#newsItem iframe {
	margin-bottom: 20px;
}

#homeNews h2 {
	font-size: 14px;
	font-weight: bold;
	padding: 3px 0;
}
	.homeContent {
		display: block;
		float: left;
		padding: 1.5%;
		width: 64%;
	}
	#homeNews .blImg, #newsArchive .blImg {
		position: relative;
		display: block;
		height: 200px;
		overflow: hidden;
		vertical-align: middle;
	}
	#homeNews .blImg {
		height: 150px;
	}
	#homeNews .blImg img, #newsArchive .blImg img{
		margin-top: -25%;
	}
	#homeNews .blImg .fa, #newsArchive .blImg .fa {
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		margin: -18px 0 0 -18px;
		color: white;
		font-size: 36px;
	}
		
	#newsArchive img {
		width: 100%;
		margin: 0;
	}
	#newsArchive .archief li div{
		float: right;
		width: 100%;		
		max-width: 80%;
	}
	#newsArchive .archief li h2 {
		color: #000000;
		font-size: 24px;		
		line-height: 26px;
		padding: 0 0 15px 0;
	}

/* ------ CONTENT ------*/
#content .kolLeft, #content .mainContent, .postsarchive {
		width: 60%;
		padding: 0 0 30px 0;
	}
	#content .kolRight {
		width:  30%;
		float: right;
	}
	#content .homeBlock {
		width: 33%;
		float: left;
	}
	#content .homeBlock img {
		width: 100%;
	}

/* ------ FOOTER ------*/
#footer {
	font-size: 13px;
	border-top: #000 solid 10px;
	background: #1579bb;
	color: #000;
	padding: 30px 0;
}

/* ------ HOME PROJECTS ------*/
	#projectData {
		position:relative;
		display:none;
		overflow:hidden;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		padding: 0;
	}
	#projectData .scroll {
		overflow-y: auto;
		height: 234px;
	}
	#homeProjects {
		padding: 0 0 20px 0;
	}
	#homeProjects .archief li  {		
		position:relative;
		background: #1579bb;
	}
	#homeProjects .archief li a  {
		background-position: center center;
		background-size: cover;
		background-origin: content-box;
	}
	#homeProjects .archief li h2  {		
    	font-family: 'cafetaregular';
		pointer-events:none;
		background:url('your_transparent.png');
		display: block;
		width: 156px;
		position:absolute;
		z-index: 10;
		font-size: 30px;
		line-height: 30px;
		padding: 65px 20px 0 20px;
		text-transform: uppercase;
		color: #FFF;
		text-align: center;
		
		text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	}
		#projectData .kRight {
			width: 35%;
			float: right;
			padding: 0 20px 0 0;
		}
		#projectData .kLeft {
			width: 60%;
			float: left;
		}
			#projectData .cycle a {
				height: 330px;
				width: 100%;
				display: block;
				background-size: 110% auto;
				background-position: center center;
			}
			#projectData .cycle a span{
				display: none;
			}
		#projectData h1 {
			margin: 0 15px 20px 0;
			background: url(../img/bg_thk-left.gif) bottom left no-repeat #242424;
			padding:  15px 10px 30px 15px;
			color: #ffffff;
		}
		#projectData .pagerProject {
			position: absolute;
			z-index: 20;
			top: 300px;
			font-size: 18px;
			padding: 0 0 0 15px;
			color: #EFEFEF;
		}
		#projectData .pagerProject a {
			color: #EFEFEF;
		}
		#projectData .pagerProject a:hover, #projectData .pagerProject a.activeSlide {
			text-decoration: none;
			color: #f39024;
		}
#project .cycle, #project .cycle a{
	width: 100%;
	height: 300px;
	display: block;
	background-size: 110% auto;
	background-position: center center;
}
	.projectThumbs {
		width: 100%;
		overflow:hidden;
	}
	#project .projectThumbs a, #projectData .projectThumbs a, .projectsArchive .projectThumbs a{		
		width: 40px;
		height: 40px;
		display: block;
		background-size: auto 110%;
		background-position: center center;
		margin: 4px 4px 0 0;
	}
	#project .projectThumbs a:hover, #projectData .projectThumbs a:hover, .projectsArchive .projectThumbs a:hover {
		text-decoration: none;
	}
#contentItem .contentImg {
	width: 100%;
}


		
#newsArchive li .eventDate {
	border: #000000 solid 1px;
	border-radius: 5px;
	color: #000000;
	float: left;
	display: block;
	width: 85px;
	padding: 15px 0;
	margin: 0 10px 0px 0;
	text-align: center;
	font-size: 18px;
	line-height: 22px;
	font-family: "Open Sans",arial,sans-serif;
	text-transform: uppercase;
}
#newsArchive li .eventDate strong{
	font-size: 28px;
	display:block;
}
.uitgeschreven { 
	padding: 10px 20px;
	background-color: #1579BB;
	color: white;
	font-style: italic;
	margin-bottom: 30px;
	border-radius: 10px;
}


/* ------ RESPONSIVE ------*/
@media screen and (min-width: 980px) {

	.pCenter {
		width: 90%;
		max-width: 980px;
	}
	#homeNews li {
		display: block;
		width: 29%;
		padding: 1.5%;
		float:left;
	}
		#homeNews li img {
			width: 100%;
		}
	#homeProjects {
		overflow:hidden;
		width: 1000px;
		margin: 0 auto;
	}
	#homeProjects li {
		float: left;
			margin: 4px 4px 0 0;
	}
		#homeProjects li div.cycle a, #homeProjects li div{
			display: block;
			width: 196px !important;
			height: 160px !important;
		}
	
	#socialMedia {
		display: inline-block;
	}
	
	.socialIcon {
		font-size: 36px;
	}


}
	
@media screen and (max-width: 1200px) {
	#homeProjects {
		overflow:hidden;
		width: 1000px;
		margin: 0 auto;
	}
	#homeProjects li {
		float: left;
			margin: 4px 4px 0 0;
	}
		#homeProjects li div.cycle a{
			display: block;
			width: 196px !important;
			height: 160px !important;
		}
	#header .header_cycle div {
		background-size: auto 100% ;
		background-position: center center;
		width: 100% !important;
		height: 320px;
	}

}
@media screen and (max-width: 980px) {
	#container.pid_1 .fullWidth {
		padding: 0 0;
	}
	.slogan h1 {
		font-size: 30px;
		line-height: 70px;
		vertical-align: middle;
	}
	.readMore {
		font-size: 12px;
  		padding: 8px 10px;
	}
	
	#logo img {
		padding: 0 ;
		height: 100px;
	}
	#top .pCenter {
    	height: 100px;
}
	#nav {
		top: 40px;
	}
        #nav ul li a {
            margin: 0 8px;
			font-size: 14px;
		}
	.pCenter {
		width: 95%;
		max-width: 980px;
		min-width: 100px;
	}
	
	#content {
		padding: 20px 0 40px 0;
	}
	#homeNews li,.homeContent {
		display: block;
		width: 46%;
		padding:  1.6%;
		float:left;
	}
		#homeNews li img {
			width: 100%;
		}
		
		#newsArchive img {
			width: 150px;
			float: right;
			margin: 0 0 0 10px;
		}
		#newsArchive li .date {
			font-size: 12px;
			padding: 10px 0 25px;
		}
		#newsArchive .archief li div{
			float: right;
			width: 100%;		
			max-width: 70%;
		}
	
	#homeProjects {
		overflow:hidden;
		width: 980px;
		margin: 0 auto;
	}
	
	#homeProjects li {
		float: left;
			margin: 4px 4px 0 0;
	}
		#homeProjects li div.cycle,
		#homeProjects li div.cycle a{
			display: block;
			width: 192px !important;
			height: 160px !important;
		}
		#homeAgenda {
			width: 184px !important;
			height: 152px !important;
		}
	
	
	.projectsArchive .tkst {
		width: 70%;
		float:right;
		padding: 0 20px 0 0;
	}



}
@media screen and (max-width: 650px) {
	#content .kolRight {
		float: inherit;
		width: 80%;
		padding: 2% 5%;
	}
	.kolRight .smBlok, .randomProjecten, .laatsteProjecten {
		display: none;
	}
	#logo img {
		padding-left: 30px;
	}
	#container {
		min-width: 650px;
		padding: 0;
	}
	#newsItem, #contentItem {
		width: 90%;
		padding: 2% 5%;
	}
	#container .mainContent {
		display:block;
		width: 100%;
	}
		
	#container.m_form .mainContent {
		padding: 0;
	}
		#container.m_news .mainContent, #container.m_projects .mainContent {
			width: 100%;
			padding: 0;
		}
		#newsItem {			
			width: 85%;
			padding: 2% 5%;
		}
	
	
	#container.pid_1 .fullWidth {
		padding: 0 0 0 0;
	}
	.readMore {
 		padding: 10px 15px;
	}
	.slogan h1 {
		font-size: 46px;
		line-height: 100px;
		vertical-align: middle;
	}
	.pCenter {
		width: 100%;
		max-width: 650px;
		min-width: 390px;
	}
	#content .homeBlock {
		width: 100%;
	}
	
	#header .header_cycle div {
		background-size: auto 100% ;
		background-position: center center;
		width: 100% !important;
		height: 220px;
	}
	.homeContent {
		display: block;
		float: left;
		padding: 2% 5%;
		width: 90%;
	}
	#homeProjects {
		width: 650px;
		margin: 0 auto;
	}
		#homeProjects .archief {
			overflow:hidden;
			height: 400px;
		}
	
	#homeProjects li {
		float: left;
			margin: 4px 4px 0 0;
	}
		#homeProjects .archief li h2  {	
			width: 88%;
		}
		#homeProjects li div.cycle a, #homeProjects li div.cycle{
			display: block;
			width: 321px !important;
			height: 200px !important;
		}
		
		#homeNews li {
			display: block;
			width: 100%;
			padding: 0;
			float:left;
		}
		#homeNews .blImg {
			display: block;
			overflow: hidden;
			height: 150px;
		}
		#homeNews .blImg img {
			margin: -20% 0 0 0;
		}
			#homeNews li img {
				width: 100%;
			}
		#homeNews .archief h2,#homeNews .archief h4, #homeNews .archief p,#homeNews .archief .date {
			padding: 0 5%;
		}
		#homeNews .archief h2 {
			font-size: 22px;
			margin: 15px 0 5px 0;
		}
		#newsArchive .archief li div{
			float: right;
			width: 100%;		
			max-width: 80%;
		}
		#newsArchive .archief li div img {
			width: 200px;
		}
		#newsArchive .archief li p {
			margin: 0 0 20px 0;
		}
	#mobile-menu {
		position: fixed;
		display: block;
		color: #000;
		z-index: 10;
		top: 0;
		right: 0;
		margin: 20px 20px 0 0;
	}
		#mobile-menu a {
			color: #000;
			padding: 20px;
			display: block;
			border: solid 1px #aaa;
			font-weight: bold;
			font-size: 26px;			
			font-family: "Open Sans",arial,sans-serif;
			background: #fff url(img/icon-menu.png) no-repeat 10px 11px;
			border-radius: 5px;
			box-shadow: 3px 3px 3px #666;
		}
	#nav {
		display: none;
	}
	input[type=text], textarea {
		width: 100%;
		padding: 10px 8px;
	}
	body, #content .mainContent, .kolRight {
		font-size: 18px;
	}

}