/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
html { color: #000; font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
    General styling
    ========================================================================== */
html { overflow-y: scroll; box-sizing: border-box; height: 100%; }
body { background: #282828 url('/images/design/bg_body.jpg'); height: inherit; font-family: 'Varela Round', sans-serif; color: #4f4d46; }
*, *:before, *:after { box-sizing: inherit; }

/* Base Fonts */
h1 { font-size: 3em;   text-align: center; text-transform: uppercase;    font-family: 'Rokkitt', serif; font-weight: 700; margin: 0 0 0.5em 0; }
h2 { font-size: 2em;   text-align: center; text-transform: uppercase;    font-family: 'Rokkitt', serif; font-weight: 700; margin: 0 0 0.5em 0; }
h3 { font-size: 1.5em; text-align: center; text-transform: uppercase;  font-family: 'Rokkitt', serif; font-weight: 700; margin: 0 0 0.5em 0; line-height: 1em; }
h4 { font-size: 1em;   text-align: center; text-transform: uppercase;  margin: 0 0 0.5em 0; line-height: 1em; }
h5 { font-size: 1em;   text-transform: uppercase; font-weight: bold; margin: 0 0 10px 0; }
h6 { font-size: 1em;   font-weight: bold; margin: 15px 0 5px 0; }
p  { font-size: 0.9em; font-family: 'Varela Round', sans-serif; margin: 0 0 0.5em 0; }
ul { font-size: 0.9em; font-family: 'Varela Round', sans-serif; margin: 0.5em 0 0.5em 0; padding-left: 1.1em; }
p ~ ul { margin-bottom: 0; }
li { margin: 0; padding: 0; }
.disclaimer { font-size: 0.7em; color: #555;}
a:link,  a:visited { color: #742d1e; text-decoration: none; }
a:hover, a:active  { color: #ff0000; }
a.active { color: black; font-weight: bold; }
.unavailable { color: #aaa; }

/* Buttons */
.back_button { background-color: white; border: 1px solid black; border-radius: 3px; padding: 5px 20px; position: relative; }

/* Base Lay-out */
.wrapper { background-color: white; position: relative; width: 100%; min-height: 100%; margin: 0 auto -170px; padding-bottom: 170px; }
	.nieuws { background: url('/images/design/bg_pattern_nieuws.jpg'); /* Old Browsers */
			  background: -moz-radial-gradient(top, circle, rgba(0,0,0,0) 10%, rgba(0,0,0,0.7) 100%), url('/images/design/bg_pattern_nieuws.jpg'); 		/* FF3.6+ */
			  background: -webkit-radial-gradient(top, circle, rgba(0,0,0,0) 10%, rgba(0,0,0,0.7) 100%), url('/images/design/bg_pattern_nieuws.jpg');	/* Chrome10+,Safari5.1+ */
			  background: -o-radial-gradient(top, circle, rgba(0,0,0,0) 10%, rgba(0,0,0,0.7) 100%), url('/images/design/bg_pattern_nieuws.jpg');		/* Opera 11.10+ */
			  background: -ms-radial-gradient(top, circle, rgba(0,0,0,0) 10%, rgba(0,0,0,0.7) 100%), url('/images/design/bg_pattern_nieuws.jpg');		/* IE 10+ */
			  background: radial-gradient(circel at top, rgba(0,0,0,0) 10%, rgba(0,0,0,0.7) 100%), url('/images/design/bg_pattern_nieuws.jpg');			/* W3C */

	}
* html .wrapper { height: 100%; }
	.wrap_under { position: relative; margin-top: -20px; padding-top: 30px !important; }
	header { background: url('/images/design/bg_header.png') repeat-x center bottom; width: 100%; height: 220px; text-align: center; padding: 20px; z-index: 10; position: relative; }
		.logo { background: url('/images/design/logo_planeetmars.png') no-repeat center; background-size: contain; width: 100%; height: 120px; display: block; margin: 0 auto; }
		.logoanim { background: url('/images/design/logo_planeetmars_anim.gif') no-repeat center; background-size: contain; width: 100%; height: 120px; display: block; margin: 0 auto; }
		nav { }
			.main_navigation { list-style: none; text-align: center; margin: 0.5em 0 0 0; font-family: 'Rokkitt', serif; font-weight: 400; text-transform: uppercase; }
			.main_navigation li { display: inline-block; margin-right: 0.5em; }
	main { padding: 20px; }
		/*.nieuws_item { float: none; margin: 20px;  }
		.nieuws_item img { width: 100%; margin: 0 0 0.8em 0; box-shadow: 7px 7px 5px rgba(0,0,0,0.5); }*/
	.primary	{ background: url('images/design/bg_pattern_primary.jpg'); }
	.secondary  { background: #ddd url('images/design/bg_pattern_secondary.jpg'); padding: 20px; color: #232323; }
	.tertiary   { background: #eee url('images/design/bg_pattern_tertiary.jpg'); padding: 20px; }
	.quaternary { background: #fff url('images/design/bg_pattern_primary.jpg'); padding: 20px; }
	.legal 		{ padding: 40px; }
	.form 		{ background: #bbcbd4 url('images/design/bg_pattern_form.jpg'); padding: 20px; color: #232323; }
	.lessen main { background: url('images/design/bg_pattern_lessen.jpg'); }
		.col1-1 { width: 100%; padding: 10px; margin-bottom: 20px; }
		.col1-2 { width: 100%; float: none; padding: 0; margin-bottom: 20px; }
		.col1-3 { width: 100%; float: none; padding: 0; margin-bottom: 20px; }
		.col2-3 { width: 100%; float: none; padding: 0; margin-bottom: 20px; }
		.col1-4 { width: 100%; float: none; padding: 0; margin-bottom: 20px; }
		.col3-4 { width: 100%; float: none; padding: 0; margin-bottom: 20px; }
		.push1-2 { margin-left: 0; }
		.push1-3 { margin-left: 0; }
		.push1-6 { margin-left: 0; }
	.wrapper_back { background: #eee url('images/design/bg_pattern_tertiary.jpg'); padding: 20px 0 20px 40px; }
.wrapper_centered { width: 100%; height: 110px; position: relative; text-align: center; }
	.zaal_icon { width: 100px; height: 100px; margin: 0 auto; }
	.zaal_zon .zaal_icon { background: url('/images/design/icon_zon.png') no-repeat;  }
	.zaal_maan .zaal_icon { background: url('/images/design/icon_maan.png') no-repeat;  }
	.zaal_venus .zaal_icon { background: url('/images/design/icon_venus.png') no-repeat;  }
	.les_icon  { width: 80px; height: 80px; margin: 20px auto 0.5em auto; }
.zaal_foto, .event_foto, .kunst_foto { width: 100%; margin: 0 0 0 0; }
.bar_foto, .terras_foto { width: 100%; height: 100%; position: relative; }
.h3_topmargin { top: 0; position: relative; }
	.steunpartners_logo { height: 60px; } /* "sponsor_logo" wordt geblocked door AdBlock */

.form .formrow       { margin-bottom: 10px; }
.form .formcolumn    { position: relative; margin-bottom: 10px; width: 100%; }
.form .field         { font-size: 0.9em; width: 100%; height: 30px; padding-left: 5px; vertical-align: middle; border: none; border-radius: 3px; }
.form .textfield     { font-size: 0.9em; width: 100%; height: 100px; padding: 5px; vertical-align: top; border: none; border-radius: 3px; }
.form .button        { font-size: 0.9em; width: 100%; height: 30px; padding: 0; vertical-align: bottom; border: none; background-color: white; position: relative; border-radius: 3px; }


/* Navigation */
nav a:link,
nav a:visited { color: white; }
nav a:hover,
nav a:active, nav a.selected { color: #4f4d46; }

/* Page: Nieuws */
.nieuws { padding-bottom: 30px; }
.nieuws_details { overflow: hidden; }
	.nieuws_details img { width: 100%; }
#nieuws_item_wall { min-height: 100px; max-width: 100%; overflow: hidden; list-style: none; }
.gutter-sizer { width: 2%; }
	.nieuws_item_brick { float: left; width: 90%; position: relative; margin-bottom: 10px; }
	.nieuws_item_brick img { display: block; max-width: 100%; box-shadow: 7px 7px 5px rgba(0,0,0,0.5); }
	.nieuws_item_brick div { display: block; box-shadow: 7px 7px 5px rgba(0,0,0,0.5); background-color: white; padding: 10px; }
	.nieuws_item_brick div img { box-shadow: none; }

/* Page: Lessen */
.sort { display: block; position: absolute; right: 20px; font-size: 1em; }
.lessenlist { display: block; position: relative; margin-top: 20px; }
.les_tekst { font-size: 0.8em; margin-bottom: 1em; }
.les_foto_container { width: 100%; height: auto; background-color: #eeeeee; position: relative; display: block; overflow: hidden; }
.les_foto { max-height: 400px; margin: 20px auto 20px auto; position: relative; display: block; }
.les_detail { position: relative; padding: 10px; }
.les_tabel { margin-bottom: 20px; background-color: #ddd; padding: 10px; }
	.les_tabel * .col1 { display: inline-block; }
	.les_tabel * .col2 { width: 48%; display: inline-block; }
	.les_tabel * .col3 { width: 10%; display: inline-block; }
	.les_tabel * .col4 { width: 100%; display: block; }
	.les_tabel * .fliptriangle { width: 5%; display: inline-block; float: right; text-align: right; }
.les a:link,
.les a:visited { color: #4f4d46; }
.les a:hover,
.les a:active  { color: #ff0000; }
h6.table_row { margin: 0 0 10px 0; }
h6.table_row:link, h6.table_row:visited { color: #4f4d46; }
h6.table_row:hover, h6.table_row:active { color: #ff0000; }
h6.table_row span { vertical-align: top; }
.leeftijdsgroepen ul { list-style: none; text-align: center; }
.leeftijdsgroepen li { display: inline-block; }

/* Page: Les */
.lijsenlijst 			{ list-style: none; margin: 0; padding: 0; }
.lessenlijst_item 		{ margin: 0 0 10px 0; padding: 0; }
.lessenlijst_uitvoerder { display: block; color: gray; }
.lesdetail { background: none; }
.lessenoverzichtlijst { display: none; }

/* Producties */
.productie_wrapper div             { margin-bottom: 0; }
.productie_wrapper:nth-child(even) { background-color: rgba(0,0,0,0.1); }
.productie_wrapper:nth-child(odd)  { background-color: rgba(0,0,0,0.5); }
.productie_foto                    { width: 100%; }
.productie_tekst p                 { padding: 0 20px; }

/* Page: Koen */
.koen_foto { width: 100%; }
.koen_les_foto { width: 100%; }
.koen_lessen p { font-size: 0.8em; }

/* Page: Partners */
.alternating { padding-bottom: 20px; }
.alternating:nth-child(even) { background-color: #eee; }
.alternating:nth-child(odd) { background-color: #fff; }

/* Page: Info */
#map { width: 100%; height: auto; margin-bottom: 20px; padding: 0; background: white url('/images/design/loading.gif') no-repeat center center; }
.mapscroll-wrap { width: 100%; height: 100%; }
.medewerker_foto_wrap { margin: 0 0 1em 0; position: relative; }
	.medewerker_foto { width: 100%; }
.medewerker { position: relative; margin-bottom: 40px; }
.row { margin-bottom: 10px; }
.email    { font-size: 0.9em; }
.telefoon { font-size: 0.9em; }
.leesmeer { font-size: 0.8em; text-align: right; font-style: italic; }

/* Footer */
footer { background: url('images/design/bg_body.jpg'); color: white; position: relative; width: 100%; height: 170px; margin: -170px auto 0; padding: 20px 20px 150px 20px; clear: both; }
	footer p { font-size: 0.8em; line-height: 1.2em; margin: 0; }
	footer a:link,
	footer a:visited { color: white; }
	footer a:hover,
	footer a:active { color: yellow; }
	.socialmedia_icons { list-style: none; margin: 0; padding: 0; }
		.socialmedia_icons li { float: left; margin-right: 20px; }
		.socialmedia_icons a { text-align: center; font-size: 0.8em; }
		.socialmedia_icons * i { display: block;  }

/* Legal */
.legal h2 { margin-top: 1em;}
.legal h3 { margin-top: 1em;}


/* FancyBox */
.fancybox_page:link, 	.fancybox_flyer:link,
.fancybox_page:visited,	.fancybox_flyer:visited,
.fancybox_page:hover,	.fancybox_flyer:hover,
.fancybox_page:active 	.fancybox_flyer:active { color: #4f4d46; }
.wrapper_fancybox { position: relative; overflow: hidden; width: 100%; background-color: #EEE; margin-bottom: 1em; }
	.fancybox-title { text-align: center; text-transform: uppercase; font-size: 1.5em; font-family: 'Rokkitt', serif; font-weight: 700; margin: 0 0 0.5em 0; line-height: 1em; }
	#dots { position: fixed; bottom: 20px; width: 100%; padding-top: 10px; list-style: none; text-align: center; z-index: 99999; }
		#dots li {display: inline; padding: 0 5px; }
			#dots li label { width: 12px; height: 12px; border-radius: 100%; display: inline-block; background-color: rgba(255, 255, 255, 0.6); cursor: pointer; }
			#dots li.active label { background-color: red; }

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* -- iPhone 5 Landscape */
@media only screen and (max-device-width : 568px) and (orientation: landscape) {
	header { height: 250px; }
	.logo, .logoanim { height: 120px; }
	.col1-1 { width: 100%; padding: 20px;}
	.col1-2 { width: 50%; float: left; padding: 20px; }
	.col1-3 { width: 100%; float: none; padding: 20px; }
	.col2-3 { width: 100%; float: none; padding: 20px; }
	.col1-4 { width: 50%; float: left; padding: 20px; }
	.col3-4 { width: 100%; float: none; padding: 20px; }
	.after1-4 { width: 66.66%; float: left; padding: 20px; }
	.before3-4 { width: 33.33%; }
	.nieuws_item_brick { width: 100%; }
	.productie_tekst p { padding: 0; }
	.wegbeschrijving { width: 100%; }
	.lesdetail { background: none; }
	.les_tabel * .col1 { width: 28%; display: inline-block; }
	.les_tabel * .col2 { width: 28%; display: inline-block; }
	.les_tabel * .col3 { width: 28%; display: inline-block; }
	.les_tabel * .col4 { width: 100%; display: block; }
	.les_tabel * .fliptriangle { width: 5%; display: inline-block; float: right; text-align: right; }
	.les_foto { max-height: 150px; max-width: 100%;}
	.lessenoverzichtlijst { display: none; }
}

@media (min-width : 570px) and (max-width : 779px) {
	header { height: 220px; }
	.logo, .logoanim { height: 120px; }
	.main_navigation { font-size: 1.2em; }
	.col1-1 { width: 100%; padding: 20px;}
	.col1-2 { width: 50%; float: left; padding: 20px; }
	.col1-3 { width: 100%; float: none; padding: 20px; }
	.col2-3 { width: 100%; float: none; padding: 20px; }
	.col1-4 { width: 50%; float: left; padding: 20px; }
	.col3-4 { width: 100%; float: none; padding: 20px; }
	.after1-4 { width: 66.66%; float: left; padding: 20px; }
	.before3-4 { width: 33.33%; float: left; }
	.push1-2 { margin-left: 0%; }
	.push1-3 { margin-left: 0%; }
	.push1-6 { margin-left: 0%; }
	.zaal_zon, .zaal_maan, .zaal_venus, .koen_les { width: 33.33%; float: left; }
	.bar, .terras { width: 50%; float: left; }
	.nieuws_item_brick { width: 45%; }
	.productie_tekst p { padding: 0; }
	.h3_topmargin { top: 0; }
	.wegbeschrijving { width: 100%; }
	.medewerker { margin-bottom: 0; }
	.lesdetail { background: none; }
	.les_tabel * .col1 { width: 28%; display: inline-block; }
	.les_tabel * .col2 { width: 28%; display: inline-block; }
	.les_tabel * .col3 { width: 28%; display: inline-block; }
	.les_tabel * .col4 { width: 100%; display: block; }
	.les_foto { max-height: 200px; max-width: 100%;}
	.lessenoverzichtlijst { display: none; }
	.steunpartners_logo { height: 60px; display: block; margin: 0 auto;}
}

@media (min-width: 780px) {
	.wrapper { width: 750px; }
	header { height: 250px; }
	.logo, .logoanim { height: 150px; }
	.main_navigation { font-size: 1.2em; }
	.col1-1 { width: 100%; padding: 20px;}
	.col1-2 { width: 50%; float: left; padding: 20px; }
	.col1-3 { width: 33.33%; float: left; padding: 20px; }
	.col2-3 { width: 66.66%; float: left; padding: 20px; }
	.col1-4 { width: 25%; float: left; padding: 20px; }
	.col3-4 { width: 75%; float: left; padding: 20px; }
	.push1-2 { margin-left: 50%; }
	.push1-3 { margin-left: 33.33%; }
	.push1-6 { margin-left: 16.66%; }
	.nieuws_item { float: left; width: 315px; }
	.nieuws_item_brick { width: 31%; }
	.productie_tekst p { padding: 0; }
	.h3_topmargin { top: 3.5em; }
	.lesdetail { background: url('/images/design/188px_grey.jpg') repeat-y; }
	.les_foto { max-height: 300px; }
	.les_tabel * .col1 { width: 20%; display: inline-block; }
	.les_tabel * .col2 { width: 30%; display: inline-block; }
	.les_tabel * .col3 { width: 40%; display: inline-block; }
	.les_tabel * .col4 { width: 100%; display: block; }
	.les_tabel * .fliptriangle { width: 5%; display: inline-block; float: right; text-align: right; }
	.lessenoverzichtlijst { display: block; }
	#map { width: 450px; height: 530px; margin-bottom: 20px; padding: 0; background: white url('/images/design/loading.gif') no-repeat center center; }
	.medewerker { margin-bottom: 0; }
	.form .formcolumn { }
	footer { width: 750px; }
	.steunpartners_logo { height: 60px; display: block; margin: 0 auto; }
}

@media (min-width: 990px) {
	.wrapper { width: 970px; }
	header { height: 290px; }
	.main_navigation { font-size: 1.5em; }
	.logo, .logoanim { height: 200px; }
	.nieuws_item { width: 270px; }
	.nieuws_item_brick { width: 23%; }
	.productie_tekst p { padding: 0; }
	.lesdetail { background: url('/images/design/243px_grey.jpg') repeat-y; }
	#map { width: 600px; height: 530px; margin-bottom: 20px; padding: 0; background: white url('/images/design/loading.gif') no-repeat center center; }
	.medewerker_foto_wrap { width: 192px; height: 192px; }
	.les_foto { max-height: 400px; }
	.les_tabel * .col1 { width: 15%; display: inline-block; }
	.les_tabel * .col2 { width: 20%; display: inline-block; }
	.les_tabel * .col3 { width: 19%; display: inline-block; }
	.les_tabel * .col4 { width: 43%; display: inline-block; }
	footer { width: 970px; }
	.form .formcolumn { position: relative; margin-bottom: 10px; width: 46%; float: left; margin: 0 1%; }
	.mailinglist .bigcol { width: 58%; }
	.mailinglist .smallcol { width: 38%; }
	.steunpartners_logo { height: 90px; display: inline; margin: 0; }
}

@media (min-width: 1200px) {
	.wrapper { width: 1160px; }
	.nieuws_item { width: 333px; }
	.lesdetail { background: url('/images/design/290px_grey.jpg') repeat-y; }
	.les_foto { max-height: 500px; }
	#map { width: 720px; height: 480px; margin-bottom: 20px; padding: 0; background: white url('/images/design/loading.gif') no-repeat center center; }
	.medewerker_foto_wrap { width: 240px; height: 240px; }
	footer { width: 1160px; }
}

@media (min-width: 1900px) {
	.wrapper { width: 1900px; }
	.col1-3 { width: 25%; float: left; padding: 20px; }
	.col2-3 { width: 75%; float: left; padding: 20px; }
	.col1-4 { width: 20%; float: left; padding: 20px; }
	.col3-4 { width: 80%; float: left; padding: 20px; }
	.nieuws_item { width: 333px; }
	.gutter-sizer { width: 1%; }
	.nieuws_item_brick { width: 15%; }
	.lesdetail { background: url('/images/design/475px_grey.jpg') repeat-y; }
	#map { width: 1360px; height: 530px; margin-bottom: 20px; padding: 0; background: white url('/images/design/loading.gif') no-repeat center center; }
	footer { width: 1900px; }
}

/* ==========================================================================
	Helper classes
	========================================================================== */
.centered { margin-left: auto; margin-right: auto; position: relative; float: none; }
.hidden { display: none !important; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
	*, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
	a, a:visited { text-decoration: underline; }
	a[href]:after { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	thead { display: table-header-group; }
	tr, img { page-break-inside: avoid; }
	img { max-width: 100% !important; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
}