html
	{
	background-color: #FFFF00;
	background-image: url(/picture_library/blauw.png), url(/picture_library/footer.png);
	background-position: top, bottom 0 center;
	background-repeat: repeat-x, repeat-x;	
	}

body
	{
	max-width: 1200px !important;
/* 	border: 1px solid #000; */
	margin: 0 auto !important;
    font-family: MetaSerif-Book, serif;
    line-height: 1.6;
    font-size: 12px;
	}

body, h1, h2, p, ul, li
	{
    margin: 0;
    padding: 0;
	}

header
	{
    color: #fff;
    padding: 1em;
    text-align: center;
    height: 300px;
    max-width:  1200px !important;
	}

a#ooievaar
	{
	display: block;
	width: 261px;
	height: 350px;
	float: right;
	margin-top: 15px;
	background-image: url(/picture_library/ooievaar_desktop.png);
	}
a#ooievaar:hover
	{
	opacity: 0.5;
	}

header a#logo-codh
	{
	background-image: url(/picture_library/codh-500.png);
	display: block;
	margin: 125px 0 0 210px;
	height: 104px;
	width: 260px;
	z-index: -10;
/* 	border: 1px solid #000;	 */
	}


header a#logo-codh:hover
	{
	background-color: #0000FF;
	opacity: 0.2;
	}
 
@media screen and (min-width: 1024px) and (max-width: 1199px)
	{
	header a#logo-codh
		{
		margin-left: 210px;
		}		
	}

@media screen and (min-width: 900px) and (max-width: 1023px)
	{
	header a#logo-codh
		{
		margin-left: 200px;
		}		
	}


@media screen and (min-width: 799px) and (max-width: 899px)
	{
	header a#logo-codh
		{
		margin-left: 160px;
		}
		
	}

a#vlag-nl, #vlag-ua
	{
	display: block;
	height: 35px;
	width:53px;
	position: absolute;
	top: 29px;
	left: calc(95vw - 53px);
	border: 1px solid #FFFF00;
	border-radius: 4px;
	z-index: 100;
	}
a#vlag-nl
	{
	background-image: url(/picture_library/vlag_nl.jpg);
	}
a#vlag-ua
	{
	background-image: url(/picture_library/vlag_ua.jpg);
	}
a#vlag-nl:hover, a#vlag-ua:hover
	{
	opacity: 60%;
	}

.ankeiler
	{
	border: 1px solid #000;
	border-radius: 6px;
	background-color: #FFFFEE;
	padding: 5px;
	margin-bottom: 10px;
	}
.ankeiler h2
	{
	font-family: MetaSans-Bold, sans-serif;
	margin-bottom: -10px;
	font-weight: normal;
	}
.ankeiler h2 a
	{
	text-decoration: none;
	color: #FF0000;
	}
.ankeiler h2 a:hover
	{
	color: #00FFFF;
	}

.ankeiler p
	{
	font-family: MetaSans-Book, sans-serif;
	font-size: 15px;
	line-height: 21px;
	}
a img.ankeilfoto, a img.ankeilfotoVrijstaand
	{
	float: right;
	margin: 20px 0 0 5px;
	border-radius: 4px;
	width: 180px;
	height: auto;
	}
a img.ankeilfoto
	{
	border: 1px solid #0788D9;	
	}
a img.ankeilfotoVrijstaand
	{
	border: 1px solid #FFFFEE;
	border-radius: 0;
	}
a img.ankeilfoto:hover, a img.ankeilfotoVrijstaand:hover
	{
	border-color: #000;
	}
a img.ankeilfoto:hover
	{
	border-color: #000;
	}


header h1
	{
	margin: 24px 0 0 20px;
	float: left;
    font-size: 54px;
    color: #FFFF00;
	font-family: Amarante, serif;
    font-weight: normal;
    text-align: center;
    line-height: 20px;
/* 
    border: 1px solid #000;
 */
  	text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000;
	}

@media screen and (min-width: 930px) and (max-width: 1023px)
	{
	header h1
		{
		font-size: 54px;
		}
	}

@media screen and (min-width: 860px) and (max-width: 929px)
	{
	header h1
		{
		font-size: 48px;
		}
	}
@media screen and (max-width: 859px)
	{
	header h1
		{
		font-size: 42px;
		}
	}

header h1 a
	{
	color: #FFFF00;
	text-decoration: none;
	}
header h1 a:hover
	{
	color: #FFF;
	}

header h2
	{
	clear: left;
	margin: 0 0 0 220px;
	float: left;
	font-family: MetaSerif-Book, sans-serif;
	font-weight: normal;
	font-size: 21px;
	line-height: 21px;
	text-align: center;
	color: #FFFF00;
/* 	border: 1px solid #000; */
	}

@media screen and (min-width: 930px) and (max-width: 1023px)
	{
	header h2
		{
		margin: 0 0 0 220px;
		}
	}
@media screen and (min-width: 860px) and (max-width: 929px)
	{
	header h2
		{
		margin: 0 0 0 170px;
		}
	}
@media screen and (max-width: 859px)
	{
	header h2
		{
		margin: 0 0 0 130px;
		}
	}

nav ul#menu
	{
	position: absolute;
	display: block !important;
/* 	border: 1px solid #000; */
	}

@media screen and (min-width: 1024px)
	{
	nav ul#menu
		{
		top: 70px;
		left: calc(61% - 55px);
		text-align: right;
		}
	}

@media screen and (min-width: 800px) and (max-width: 1023px)
	{
	nav ul#menu
		{
		top: 260px;
		left: 11%;
		text-align: left;
		}
	nav ul#menu li
		{
		display: block;
		float: left;
		margin-right: 20px;
		}
	}

nav ul#menu li
	{
	list-style: none;
	}

nav ul#menu li a
	{
	color: #FFFF00;
	font-family: MetaSans-Book;
	font-weight: normal;
	font-size: 24px;
	line-height: 42px;
	text-decoration: none;
	}
nav ul#menu li a:hover
	{
	color: #FFF;
	background-color: #0000FF;
	}


/* 
@media screen and (min-width: 1100px)
	{
	nav ul
		{
		margin-top: 60px;
		list-style: none;
		text-align: right;
		line-height: 36px;
		}
	}

@media screen and (min-width: 800px) and (max-width: 1099px)
	{
	nav ul
		{
		float: left;
/* 		border: 1px solid #000; */
		position: absolute;
		top: 255px;
		left: 50%;
		margin-left: -242px;
		}
	}
@media screen and (min-width: 800px) and (max-width: 1099px)
	{
	nav ul li
		{
		float: left;
/* 		border: 1px solid #000; */
		margin-right: 30px;
		}
	}
 */

/* 
nav ul li
	{
	margin: 0 0px 0 0;
	}
 */

nav ul li a
	{
    color: #FFFF00;
    text-decoration: none;
	font-size: 21px;
	font-family: MetaSans-Book, sans-serif;
	font-weight: normal;
	}
nav ul li a:hover
	{
    color: #00FFFF;
    text-decoration: none;
	}

a.meer
	{
	clear: both;
    text-decoration: none;
    font-family: MetaSans-Medium, sans-serif;
    font-size: 15px;
    color: #FF0000;
    margin: 15px 0 0 0;
    background-image: url(/picture_library/pijltje.png);
    line-height: 12px;
    background-repeat: no-repeat;
    background-position: 0 -1px;
	display: block;
	width: 50px;
	text-align: right;
	}
a.meer:hover
	{
	color: #00FFFF;
	}


@media screen and (min-width: 1200px)
	{
	main
		{
		width: 500px;
		}
	}
@media screen and (max-width: 1199px)
	{
	main
		{
		width: 500px;
		}
	}

@media screen and (max-width: 1023px)
	{
	main
		{
		width: 400px !important;
		}
	}

aside
	{
/* 
 	 display: flex;
    flex-direction: column;
 */
    min-height: calc(100vh - 440px);
	}

main
	{
/*  	display: flex; */
/*     flex-direction: column; */

    min-height: calc(100vh - 440px);
    margin: 0 0 0 6vw;
    padding: 0;
    float: left;
/*     border: 1px solid #000; */
	}

main h1
	{
	font-family: Bodoni, serif;
	margin: 20px 0 20px 0;
	line-height: 42px;
	font-size: 42px !important;
	/* text-align: center; */
	font-weight: normal;
	letter-spacing: -1px;
	}
aside h1
	{
	font-family: Bodoni, serif;
	font-weight: normal;
	margin: 20px 0 15px 0 !important;
	line-height: 25px;
	font-size: 30px;
	line-height: 33px;
	text-align: left;
	letter-spacing: -0.5px;
	}

main h2
	{
	font-family: Bodoni, serif;
	font-weight: normal;
	font-size: 18px;
	letter-spacing: -0.5px;
	text-decoration: none;
	}
main h3, aside h3
	{
	font-family: Bodoni, serif;
	font-weight: normal;
	font-size: 24px !important;
	letter-spacing: -0.5px;
	margin: 15px 0 0 0;
	line-height: 27px;
	}
main h4
	{
	margin: 0 0 -15px 0;
	text-transform: uppercase;
	font-family: MetaSans-Book, sans-serif;
	font-size: 18px;
	font-weight: normal;
	}



main p, aside p, main ul, aside ul
	{
	width: 100% !important;
	font-family: MetaSerif-Book, serif;
	font-size: 18px;
	line-height: 27px;
/* 	padding-left: calc(100vw/12);	letter-spacing: 0.1px; */
	text-align: left;
	margin: 15px 0 0 0;
	}
aside ul li
	{
	margin-left: 15px;
	}

q
	{
	font-style: italic;
 	quotes: '“' '”';
	}

main p#lead
	{
	font-family: MetaSerif-Medium, serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 27px;
	}
main p b 
	{
	font-family: MetaSerif-Medium, sans-serif;
	font-weight: normal;
	}

main p a, main ul li a, main h3 a, aside h3 a
	{
	font-family: MetaSans-Medium, sans-serif;
   	font-weight: normal;
   	color: #FF0000;
   	text-decoration: none !important;
	}
main h3 .centreer-main
	{
	display: block;
	font-family: MetaSerif-Medium, serif;
	font-weight: normal;
	text-align: center;
	width: 100%;
	}

main p .centreer-main
	{
	display: block;
	text-align: center;
	width: 100%;
	font-size: 18px;
	line-height: 27px;
	font-family: MetaSerif-Medium, serif;
	font-weight: normal;
	}

main ul.plat
	{
	width: 100% !important;
	font-family: MetaSerif-Book, serif;
	font-size: 16px;
	letter-spacing: 0.1px;
	text-align: left;
	margin: 15px 0 0 1.2em;
	list-style-position: outside;
	}

@media screen and (max-width: 1023px)
	{
	div.afbeelding
		{
		width: 400px !important;
/* 		border: 1px solid #000; */
		}
	}

@media screen and (max-width: 1023px)
	{
	div.afbeelding img
		{
		width: 400px;
		height: auto;
		}
	}
	
div.afbeelding img
		{
		border: 1px solid #000;
		border-radius: 6px;
		}
	
div.afbeelding hr
	{
	width: 50px;
	clear: both;
	float: left;
	margin: 10px 0 20px 15px !important;
	}
.kader div.afbeelding hr
	{
	width: 50px;
	clear: both;
	float: left;
	margin: 2px 0 20px 28px !important;
	}

div.afbeelding ul li a
	{
	font-family: MetaSans-Medium, sans-serif !important;
	font-weight: normal;
	font-size: 14px !important;
	}


@media screen and (min-width: 1200px)
	{
	aside
		{
/* 		border: 1px solid #000; */
		max-width: 500px;
		float: left;
		margin: -18px 0 0 80px;
		}
	}
@media screen and (min-width: 1024px) and (max-width: 1199px)
	{
	aside
		{
/* 		border: 1px solid #000; */
		max-width: 380px;
		float: left;
		margin: -18px 0 0 50px;
		}
	}
@media screen and (min-width: 900px) and (max-width: 1023px)
	{
	aside
		{
/* 		border: 1px solid #000; */
		max-width: 370px;
		float: left;
		margin: -18px 0 0 50px;
		}
	}

@media screen and (min-width: 800px) and (max-width: 899px)
	{
	aside
		{
/* 		border: 1px solid #000; */
		max-width: 270px;
		float: left;
		margin: -18px 0 0 40px;
		}
	}
@media screen and (min-width: 750px) and (max-width: 799px)
	{
	aside
		{
/* 		border: 1px solid #000; */
		max-width: 270px;
		float: left;
		margin: -18px 0 0 30px;
		}
	}

aside a:hover, aside ul li.none a:hover, main a:hover, main ul li.none a:hover, main p a:hover
	{
	color: #0000FF !important;
	}
aside a:hover img
	{
	border: 1px solid #FF0000;
	}

a.vergroten span
	{
	float: right;
	display: block;
	width: 25px;
	height: 24px;
	background-image: url(/picture_library/magnify.png);
	}
div.vrijstaand img, div.vrijstaand
	{
	border: 1px solid transparent;
	border-radius: 0;
	}
div.rechts
	{
	float: right;
	margin-left: 10px;
	}

div.links
	{
	float: left;
	margin-right: 10px;
	}
div a.vergroten:hover
	{
	cursor: url(/picture_library/magnify.png), pointer !important;
	}
div a img:hover
	{
	border: 1px solid #7B4B1C;
	}
.afbeelding ul
	{
	margin: 0 0 0 1em;
	font-family: MetaSans-Medium, sans-serif;
	font-weight: normal;
	text-align: left;
	line-height: 18px;
	font-size: 14px;
	}
.fotocredit
	{
	margin: 0 0 0 0;
	font-family: MetaSans-Book, sans-serif;
	font-weight: 400;
	font-size: 12px;
	float: right;
	}
.fotocredit a
	{
	font-family: MetaSans-Book, sans-serif;
	font-weight: normal !important;
	font-size: 12px !important;
	}

main ul.urls li, aside ul.urls li
	{
	list-style-type: none;
	text-indent: -2em;
   	font-family: MetaSans-Medium, sans-serif;
   	font-weight: normal;
   	list-style-position: outside;
   	margin-bottom: 5px;
	}

main ul li a, aside ul li a
	{
	color: #FF0000;
    text-decoration: none;
    font-size: 15px;
	}

main ul.urls li.none, aside ul.urls li.none
	{
	list-style-type: none;
	background-image: url("/picture_library/pijltje.png");
	background-position: 49px 3px;
	background-repeat: no-repeat;
	list-style-position: outside;
	margin-left: 0;
	}

main ul.urls li.none a, aside ul.urls li.none a 
	{
	color: #FF0000;
    text-decoration: none;
    font-size: 15px;
	display: block;
	margin-left: 65px;
	text-indent: 0;
	}

main ul.urls, aside ul.urls
	{
	line-height: 21px;
	list-style-type: none;
	}
/* 
main ul.urls li.none:before, aside ul.urls li.none:before
	{
    content: "> ";
	margin: 0;
	}
 */
 
aside ul.urls li.none
	{
	margin: 0 0 10px 0;
	}
 
main ul li a:hover, aside ul li a:hover
	{
    color: #0000FF;
    text-decoration: none;
	}
main ul.urls li.video, aside ul.urls li.video
	{
	clear: both;
	font-weight: normal;
	font-size: 15px;
	}
main ul.urls li.video:before, aside ul.urls li.video:before
	{
	content: "";
	margin-left: 3em;
	}

main a.video_js
	{
	font-weight: 600;
	text-decoration:none;
	font-weight: normal;
	font-size: 14px;
	}
main ul li.video a, aside ul li.video a
	{
	margin-left: -1em;
	}

li.video a img
	{
	border: 1px solid #000;
	border-radius: 6px !important;
 	background-size: 150px;
 	background-position: center;
	width: 150px;
	height: 80px;
	margin: 5px 10px 5px 0;
	float: left;
	}
li.video a:hover img
	{
	border-color: #00A3DA;:
	}

ul.urls li.facebook, ul.urls li.vataha
	{
	margin: 0 0 15px 0;;
	}

ul.urls li.mail
	{
	margin: 0 0 15px 65px;
	text-indent: 0;
	list-style-image:  url(/picture_library/mail.png);
	}
	}

ul.urls li.facebook
	{
	list-style-type: none;
	background-image: url("/picture_library/facebook.png");
	background-position: 35px 0;
	background-repeat: no-repeat;
	line-height: 25px;
	list-style-position: outside;

	}
li.facebook a
	{
	display: block;
	margin-left: 65px;
	text-indent: 0;
	}
li.vataha
	{
	list-style-type: none;
	background-image: url("/picture_library/vataha-logo_klein.png");
	background-position: left 4px;
	background-repeat: no-repeat;
	list-style-position: outside;
	margin-left: 0;

	}
li.vataha a
	{
	display: block;
	margin-left: 65px;
	text-indent: 0;
	}

main ul li b.agendapunt
	{
	font-family: MetaSerif-Medium, serif;
	font-weight: normal;
	font-size: 15px;
	}

ul.pdf li, ul.flyer li
	{
	list-style-type: none;
	background-repeat: no-repeat;
	line-height: 20px;
	margin: 0 0 15px 25px;
   	font-family: MetaSerif-Book, serif;
   	font-weight: normal;
    font-size: 15px;
    padding-left: 40px;
	}
ul.pdf li
	{
	background-image: url("/picture_library/pdfje.gif");
	}
ul.flyer li
	{
	background-image: url("/picture_library/flyer.png");
	}

ul.pdf li a, ul.flyer li a
	{
	font-family: MetaSans-Medium, sans-serif;
	}

.fancybox-slide--iframe .fancybox-content
	{
	padding: 2px;
	overflow: visible;
	background: none;
	}

.kader
	{
	padding: 15px 15px 15px 15px;
	font-family: MetaSerif-Book, serif;
	font-size: 18px;
	line-height: 27px;
	border: 1px solid #000;
	border-radius: 6px;
	background-color: #FFFFEE;
	padding: 10px;
	}
.kader h3
	{
	margin-top: 0;
	font-family: MetaSans-Medium, serif;
	margin-bottom: 0;
	}
.kader p
	{
	margin-top: 0;
	}

@media screen and (max-width: 800px)
	{
	.fancybox-slide--iframe .fancybox-content
		{
		width: calc(70vw);
		height: calc(70vw/1.75);
		}
	}

@media screen and (min-width: 801px) and (max-width: 1200px) and (max-height: 1200px)
	{
	.fancybox-slide--iframe .fancybox-content
		{
		width: calc(80vw);
		height: calc(80vw/1.77);
		}
	}

@media screen and (min-width: 1201px) and (max-width: 1300px)
	{
	.fancybox-slide--iframe .fancybox-content
		{
		width: calc(80vw);
		height: calc(80vw/1.75);
		}
	}
@media screen and (min-width: 1301px) and (max-width: 1400px)
	{
	.fancybox-slide--iframe .fancybox-content
		{
		width: calc(80vw);
		height: calc(80vw/1.75);
/* 
		width: 90%;
		height: 80%;
 */
		}
	}
@media screen and (min-width: 1401px) and (max-width: 1500px)
	{
	.fancybox-slide--iframe .fancybox-content
		{
		width: calc(80vw);
		height: calc(80vw/1.75);
/* 
		width: 85%;
		height: 80%;
 */
		}
	}
@media screen and (min-width: 1501px) and (max-width: 1600px)
	{
	.fancybox-slide--iframe .fancybox-content
		{
		width: calc(70vw);
		height: calc(70vw/1.75);
/* 
		width: 80%;
		height: 80%;
 */
		}
	}
@media screen and (min-width: 1601px) and (max-width: 1700px)
	{
	.fancybox-slide--iframe .fancybox-content
		{
		width: calc(70vw);
		height: calc(70vw/1.75);
		/* 
		width: 75%;
		height: 80%;
 */
		}
	}
@media screen and (min-width: 1701px) and (max-width: 1800px)
	{
	.fancybox-slide--iframe .fancybox-content
		{
		width: calc(70vw);
		height: calc(70vw/1.75);
/* 
		width: 71%;
		height: 80%;
 */
		}
	}
@media screen and (min-width: 1801px)
	{
	.fancybox-slide--iframe .fancybox-content
		{
		width: calc(70vw);
		height: calc(70vw/1.75);
		/* 
width: 67%;
		height: 75%;
 */
		}
	}



footer
	{
	clear: both;
	font-family: MartelSans-Light, sans-serif;
	font-size: 14px;
/* 	background-color: #969696; */
	text-align: center;
	padding: 65px 0 0 0;
	position: relative;
	bottom: 0px;
	width: 100%;
	height: 35px;
	}
footer a
	{
	text-decoration: none;
	color: #FFF;
	}
footer a:hover
	{
	text-decoration: none;
	color: #0000FF;
	}

hr
	{
	border: 0;
	height: 1px;
	background-color: #000;
	}

.verberg-voor-desktop
	{
	display: none;
	}