/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/




html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

#POPUP_CONTENT{
	display:none;
}


/* DEFAULT STYLE SETTINGS */

.modal {
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        0;
		left:       0;
		height:     100%;
		width:      100%;
		background: rgba( 255, 255, 255, .8 ) 
		            url('http://i.stack.imgur.com/FhHRx.gif') 
		            50% 50% 
		            no-repeat;
		opacity: 0.80;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
		filter: alpha(opacity = 80)
	};
	
	body.loading {
	    overflow: hidden;   
	}

		
	body.loading .modal {
	    display: block;
	}

 	
 	@font-face {
		font-family: 'font_light';
		src: url('FONTS/font_light/font.eot');
		src: local('☺'), url('FONTS/font_light/font.woff') format('woff'), url('FONTS/font_light/font.ttf') format('truetype'), url('FONTS/font_light/font.svg') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face {
		font-family: 'font_con';
		src: url('FONTS/font_con/font.eot');
		src: local('☺'), url('FONTS/font_con/font.woff') format('woff'), url('FONTS/font_con/font.ttf') format('truetype'), url('FONTS/font_con/font.svg') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face {
		font-family: 'font_normal';
		src: url('FONTS/font_normal/font.eot');
		src: local('☺'), url('FONTS/font_normal/font.woff') format('woff'), url('FONTS/font_normal/font.ttf') format('truetype'), url('FONTS/font_normal/font.svg') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	
 	
 	/* COLORS:
	 * fff000 geel
	*/

	
	.popup{
	}

	.foto_links_boven{
		float:left;
		margin: 0px 10px 10px 0px;
		border:1px solid #8c2e2e;
	}

	.foto_links_midden{
		float:left;
		margin: 10px 10px 10px 0px;
		border:1px solid #8c2e2e;
	}

	.foto_rechts_boven{
		float:left;
		margin: 0px 0px 10px 10px;
		border:1px solid #8c2e2e;
	}

	.foto_rechts_midden{
		float:left;
		margin: 10px 0px 10px 10px;
		border:1px solid #8c2e2e;
	}

	.zoom span{
		background-image:url('../SYS/IMG/icon.zoom.png');
		display:block;
		width:30px;
		height:30px;
		position:relative;
	}
	
	
	
	
	
	
@media screen and (min-width: 0px)  {
	
	html{
		margin:0 auto;
		background-color:#000000;
		color:#ffffff;
		font-family:Helvetica, sans-serif;
		margin:0px;
		padding:0px;
		
		
	}
	
	
	
	input,textarea{
		
	}
	
	textarea{

	}
	
	
	ul{
		list-style: disc;
		margin-left:20px;
	}
	
	ul li{
		padding-left:10px;
	}
	
	
	.auto_select input, .auto_select textarea{
		
	
	}
	
	.auto_select .frm_focus{
		
	}
	
	.auto_select .button, .button{
		width:auto;
		cursor:pointer;
		
	}
	
	.frm_error{
		border:1px solid #ff0000;
	}
	
	.point{
		cursor:pointer;
	}
	
	
	a{
		outline: none;
		text-decoration:underline;
		color:#ffffff;
	}
	

	p{
		margin-bottom:20px;
		font-weight:lighter;
		line-height:1.6em;
	}
	
	h1,h2,h3,h4{
		margin-bottom:30px;
		
	}
	
	h1{
		font-size:2em;
		font-family: font_con;
		color:#fff000;
		text-transform:uppercase;
	}
	
	h1 a{
		color:#fff000;
	}
	
	h2{
		font-size:1.6em;
	}
	
	h3{
		font-size:1.3em;
	}
	
	strong{
		font-weight:bold;	
	}
	
	small{
		font-size:0.8em;	
	}
	
	em{
		font-style:italic;	
	}
	
	
	.floatleft,.imagefloat{
		float:left;
	}
	
	.floatright{
		float:right;
	}
	
	.imagefloat{
		margin:0px 8px 8px 0px;
	}
	
	.clear{
		clear:both;
	    height:0;
	    font-size: 1px;
	    line-height: 0px;
	}
	
	footer {
	   background:#fff000;
	   color:#000000;	
	   font-weight:lighter;
	}
	
	.persoon{
		float:left;
		position:relative;
		width:180px;
		overflow:hidden;
		height:300px;
		text-align:center;
		margin-right:30px;
		margin-bottom:60px;
		
	}
	
	.persoon img{
		width:auto;
		height:269px;
		line-height:0em;
		overflow:hidden;
		display:block
	}

	.persoon-naam{
		background:#fff000;
		color:#000000;
		font-family:font_con;
		text-transform:uppercase;
		font-size:1.3em;
		text-overflow: ellipsis;
		padding:5px;
 		white-space: nowrap;
  		overflow: hidden;
  		
	}
	
	.persoon_detail{
		font-weight:lighter;
		font-size:0.9em;
		position:absolute;
		bottom:0px;
		left:0px;
		background-color:#000000;
		width:160px;
		padding:10px;
		zoom: 1;
		filter: alpha(opacity=70);
		opacity: 0.7;
		display:none;
	}

	.persoon_detail_titel{
		margin-bottom:3px;
		
	}
	
	.persoon_detail_value{
		margin-bottom:6px;
		padding-bottom:6px;
		border-bottom:1px dashed #fff000;
		color:#fff000;
	}
	
	
	/*
	.kalender{
		background-color:#fff000;
		width:170px;
		height:70px;
		overflow:hidden;
		float:left;
		padding:10px;
		color:#000000;
		position:relative;

		margin:0px 10px 10px 0px;
	}
	
	.kalender-info{
		display:none;
		position:absolute;
		width:170px;
		height:70px;
		padding:10px;
		top:0px;
		left:0px;
		
	}
	
	.kalender:hover .kalender-info{
		display:block;
		background-color:#000000;
		color:#ffffff;
	}
	

	
	.kalender-datum, .kalender-locatie{
		font-family:font_con;
		font-size:1.3em;
		text-transform:uppercase;
		height:30px;
	}
	


	.kalender-info-datum{
		font-family:font_con;
		font-size:1.0em;
		margin-bottom:5px;
	}
	
	.kalender-info-categorie{
		font-size:0.9em;
		margin-bottom:5px;
	}
	
	.kalender-info-opmerking{
		font-size:0.9em;
	}
	
	
	*/
	
	
	
	
	
	.blog-item{
		margin-bottom:40px;
		padding-bottom:30px;
		border-bottom:1px dotted #fff000;	
	}
	
	
	.blog-item-content h2{
		margin-bottom:5px;
		font-family: font_con;
		color:#fff000;
		text-transform:uppercase;
	}
	
	.blog-item-info{
		font-size:0.8em;
	}
	
	.page_number_selected a{
		text-decoration:none;
	}
	
	.home-thumb img{
		width:100px;
		height:auto;
		border:4px solid #ffffff;
		margin-right:20px;
	}
	
	
	
	
	.album, .album-foto{
		float:left;
		position:relative;
		width:180px;
		height:210px;
		text-align:center;
		margin-right:30px;
		margin-bottom:60px;
		cursor:pointer;
		
		
	}
	
	.album-foto{
		height:180px;
		margin-bottom:30px;
		
	}
	
	.album img, .album-foto img{
		width:180px;
		height:180px;
		line-height:0em;
		overflow:hidden;
		display:block;
	}
	
	.album-naam{
		background:#fff000;
		color:#000000;
		font-family:font_con;
		text-transform:uppercase;
		font-size:1.1em;
		text-overflow: ellipsis;
		padding:5px;
 		white-space: nowrap;
  		overflow: hidden;
  		
	}
	
	.album:hover .album-naam{
		background:#000000;
		color:#ffffff;
	}
	
	
	.album-archief a{
		color:#000000;
		text-decoration:none;
	}
	
	.album-archief:hover{
		background:#000000;	
		color:#ffffff;
	}
	
	.album-archief:hover a{
		color:#ffffff;
	}
	
	.album-archief{
		background:#fff000;
		color:#000000;
		font-family:font_con;
		text-transform:uppercase;
		font-size:1.1em;
		text-overflow: ellipsis;
		padding:5px;
 		white-space: nowrap;
  		overflow: hidden;
  		display:inline-block;
  		width:200px;
  		cursor:pointer;
	}
	
	.album-archief a{
		color:#000000;
		text-decoration:none;
	}
	
	.album-archief:hover{
		background:#000000;	
		color:#ffffff;
	}
	
	.album-archief:hover a{
		color:#ffffff;
	}
	
	.blog-afbeeldingen img{
		width:150px;
		height:auto;
		margin-right:20px;
		margin-bottom:20px;
	}
	
	
}

@media screen and (max-width: 600px)  {		/* DIT IS VOOR DE MOBIELE BROWSERS */
	
	html{
		background-image:url("../IMG/achtergrond2016.jpg");
		background-color:#ffffff;
		background-size: cover;
		background-repeat:no-repeat;
		background-position:center center;
		background-attachment:fixed;
		text-align:center;
	}
	
	nav,#LEFT_PAGE{
		display:none;
	}
	
	#MOBILE_HEADER h1 {
		font-size:3em;	
	}
	
	#HAMBURGER{
		margin: 0 auto;
		padding:15px 0px;
		font-size:1.2em;
		border-bottom:1px solid #000000;
		width:90px;
		-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
		box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
		position:fixed;
		background-color:#fff000;
		width:100%;
		z-index:50;
		color:#000000;
		
	}
	
	
	#MOBILE_NAV{
		position:fixed;
		margin:0 auto;
		width:100%;
		background-color:#fff000;
		color:#000000;
		top:48px;
		padding-top:9px;
		padding-bottom:5px;
		display:none;
		z-index:48;
	}
	
	
	#MOBILE_NAV ul{
		list-style: none;
	}
	
	#MOBILE_NAV ul li{
		display:inline-block;
		width:40%;
		border:1px solid #000000;
		padding:5px;
		margin:2px;
		font-size:0.9em;
	}
	
		
	#MOBILE_NAV ul li a{
		color:#000000;
		text-decoration: none;
	}
	
	#MOBILE_NAV a:hover{
		color:#000000;
		text-decoration: none;
	}
	
	footer {
	  padding:10px;
	}
	
	#CONTENT_CONTAINER{
		padding:10px;
	}
	
	.home-thumb img{
		
		margin:20px;
	}
	
	.persoon{
		float:none;
		position:relative;
		width:180px;
		height:269px;
		text-align:center;
		margin-right:30px;
		margin-bottom:60px;
		margin-left:auto;
		margin-right:auto;
	}
	
	
	
	
	.album-foto{
		height:100px;
		width:100px;
		margin:10px;
		display:inline-block;
		float:none;

	}
	
	.album img, .album-foto img{
		width:100px;
		height:100px;
		line-height:0em;
		overflow:hidden;
		
	}
	
	#SPONSORS img{
		width:80%;
		max-width:150px;
		height:auto;
		margin:10px;
		display:inline-block;
	}
	
	
	.kalender{
		margin-bottom:20px;
		padding-bottom:20px;
	}
	
	.kalender-titel > div{
		display:none;
		
	}
	
	
	.kalender-datum,.kalender-locatie{
		display:inline;
		margin-bottom:20px;
		text-decoration:underline;
	}
	
	
	.kalender-info-categorie{
		font-weight:lighter;
	}
	
	.kalender-info{
		font-weight:lighter;
	}
	
	
	
	
	
	
	.lid-titel > div{
		display:none;
		
	}
	
	.lid{
		margin-bottom:20px;
	}
	
	
	
	
}




@media screen and (min-width: 600px)  {		/* DIT IS VOOR DE STANDAARD BROWSERS */
	#MOBILE_NAV,#MOBILE_HEADER, #TRIGGER_MOBILE_NAV{
		display:none;
	}
	
	
	html{
		background-image:url("../IMG/achtergrond2016.jpg");
		background-color:#ffffff;
		background-size: cover;
		background-repeat:no-repeat;
		background-position:center center;
		background-attachment:fixed;
	}
	
	
	
	body{
		
		
	}
	
	#CONTAINER{
		padding:60px 0px 0px 100px;
	}
	
	#LEFT_PAGE{
		float:left;
		width:300px;
		background-image:url("../IMG/snake-transparant.png");
		background-repeat:no-repeat;
		background-position:top left;
		position:fixed;
	}
	

	
	nav{
		position:relative;
		padding-left:80px;
		font-family: font_con;
	}
	
	nav a{
		cursor:pointer;
		color:#ffffff;
		text-decoration:none;
	}
	
	
	nav ul{
		list-style: none;
		margin-left:0px;
		font-size:1.3em;
	}
	
	nav ul li{
		margin-bottom:5px;
		position:relative;
		padding:10px 10px 10px 2px;
	}
	
	nav ul li .submenu{
		display:block;
		z-index:50;
		position:absolute;
		left:80px;
		top:0px;
		font-size:0.8em;
		border:1px solid #ffffff;
		padding:5px;
		border-radius:3px;
	} 
	
	nav ul li .submenu li{
		margin-bottom:10px;
		padding:2px;
	}
	
	/*
	nav ul li:hover >.submenu{
		display:block;
	}
	*/
	#CYCLE_SPONSORS{
		margin-top:50px;
		width:200px;
		height:160px;
		overflow:hidden;
	}
	
	#CYCLE_SPONSORS img{
		width:200px;
		height:auto;
	}


	#RIGHT_PAGE{
		height:auto;
		position: absolute;
		left:400px;
		right:0px;
		padding-bottom:50px;
	}
	
	
	
	
	.main-header{
		background:#fff000;
		font-size:4em;
		color:#000000;
		padding:10px;
		margin-bottom:60px;
	
		
	}
	
	
	
	#PAGE_CONTENT{
		padding-right:140px;
		overflow:auto;
				
	}
	

	
	footer {
	   position:fixed;
	   left:0px;
	   bottom:0px;
	   height:70px;
	   width:100%;
	}
	
	#CREDITS{
		float:left;
		padding:25px 0px 10px 80px;
	}
	
	
	#SOCIAL{
		float:right;
		padding:10px 80px 0px 10px;
	}
	
	

	#SPONSORS img{
		width:200px;
		height:auto;
		margin:0px 20px 20px 0px;
	}
	
	
	
	
	.lid-nr,.lid-naam,.lid-adres,.lid-postcode,.lid-gemeente{
		float:left;
		width:150px;
		margin-right:10px;
		padding:3px;
		font-size:0.9em;
		text-overflow: ellipsis;
 		white-space: nowrap;
  		overflow: hidden;
	}
	
	
	.lid-nr{
		width:40px;
	}
	
	
	.lid-postcode{
		width:80px;
	}
	
	.lid-gemeente{
		width:120px;
	}
	
	
	.lid-titel > div{
		background:#fff000;
		color:#000000;
		font-family:font_con;
		font-size:1.2em;
		
	}
	
	.lid{
		margin-bottom:8px;
	}
	
	
	
	
	.kalender-titel > div{
		background:#fff000;
		color:#000000;
		font-family:font_con;
		font-size:1.2em;
		margin-bottom:10px;
		
	}
	
	
	
	.kalender-datum,.kalender-locatie,.kalender-info-categorie, .kalender-info-prov{
		float:left;
		width:220px;
		margin-right:10px;
		padding:3px;
		font-size:0.9em;
		text-overflow: ellipsis;
 		white-space: nowrap;
  		overflow: hidden;
	}
	
	
	
	.kalender-datum{
		
		width:80px;
	}
	

	
	.kalender-info-categorie{;
		width:200px;	
	}
	
	.kalender-info-prov{
		width:80px;
	}
	
	
	.kalender-info{
		padding:10px 0px;
		font-style:italic;
		font-size:0.85em;
		margin-bottom:30px;
		font-weight:lighter;
	}
	
	
}



@media screen and (min-width: 600px) and (max-width: 1000px)  {		
	
#SOCIAL{
		display:none;
	}
	
	
	
#PAGE_CONTENT{
		padding-right:30px;
	}

.lid{
		margin-bottom:25px;
	}
	
	
	
}



@media screen and (max-height: 760px)  and (min-width: 600px) {		
	

	#CONTAINER{
		padding:20px 0px 0px 100px;
	}
	
	
	#CYCLE_SPONSORS{
		display:all;
		margin-top:20px;
		width:200px;
		height:160px;
		overflow:hidden;
	
	}
	

}


@media screen and (max-height: 690px) and (min-width: 600px )  {		
	
	

	
	footer {
	 font-size:0.8em;
	 padding-left:260px;
	}
}