@import url(https://fonts.googleapis.com/css?family=Lato:400,300);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900);

/*==================
	HOOFDSTIJLEN
==================*/
* {
	box-sizing: border-box;
}
body {
	font-family: 'Roboto';
	font-size: 16px;
	margin: 0;
	padding: 0;
	font-weight: 300;
}
h4,
h5,
h6 {
	font-weight: normal;
	text-transform: uppercase;
}
ul {
	list-style-type: none;
	padding-left: 0;
}
ul.list-bulleted {
	list-style-type: square;
	padding-left: 25px;
}
ul li p {
	margin: 0.25em;
}
a,
a:visited {
	color: #0074D9;
	text-decoration: none;
}
a:hover,
a:active {
	color: #005298;
}
a[data-href] {
	cursor: pointer;
}
.text-center {
	text-align: center;
}
.text-justify {
	text-align: justify;
}
.container {
	margin: 0 auto;
	width: 1000px;
}
.bericht {
	border: 1px solid black;
	background-color: #EEE;
	margin: 40px 0 0 0;
	padding: 10px;
	position: relative;
}
.bericht>span {
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 10px;
}
.bericht.bericht-rood {
	border-color: #F55;
	background-color: #FFF6F6;
}
.bericht.bericht-blauw {
	border-color: #55F;
	background-color: #F6F6FF;
	color: #55F;
}
.imaginary-logo {
	display: block;
	margin: 0 auto 15px;
	max-width: 560px;
	width: 100%;
}
.sr-only {
	border: 0;
	clip: rect(0,0,0,0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
#main {
	margin-bottom: 2em;
}
.box-shadow {
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.25);
}
@media screen and (max-width: 1029px) {
	.container {
		width: 800px;
	}
}
/* Media query als de breedte van het scherm kleiner wordt
   dan 830px */
@media screen and (max-width: 830px) {
	.container {
		padding-left: 15px;
		padding-right: 15px;
		width: 100%;
	}
}
@media screen and (max-width: 440px) {
	.imaginary-subheader {
		font-size: 16px;
	}
}

/*==================
	HEADER
==================*/
header {
	clear: both;
	margin-top: 20px;
}
header h1,
header h2,
header h3 {
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-weight: 300;
	margin: 0;
}
header h1 {
	font-size: 46px;
	text-transform: uppercase;
}
header h2 {
	font-size: 24px;
}
header h3 {
	font-size: 20px;
}
header a {
	width: 100%;
}

/*==================
	NAVIGATIE
==================*/
nav {
	/* Een font-size van 0px zodat de list items naast elkaar staan */
	/* Zie http://stackoverflow.com/questions/1097006/removing-whitespace-between-html-elements-when-using-line-breaks */
	font-size: 0px;
	margin-top: 20px;
	/* De volgende CSS zorgt ervoor dat de tekst van de menu items niet geselecteerd kan worden */
	/* Bron: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
	webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
nav ul li {
	display: inline-block;
	font-size: 20px;
	margin: 8px auto;
	min-width: 120px;
	padding: 0px;
	text-align: center;
	vertical-align: top;
	width: 25%;
}
nav ul li a:hover,
nav ul li a:active {
	border-bottom: 1px solid #005298;
}
nav ul li.active a {
	border: none;
	color: #000;
}
nav ul li a .flag-icon.inactive {
	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.37007999999999996 0.57216 0.057760000000000006 0 0 0.17008 0.77216 0.057760000000000006 0 0 0.17008 0.57216 0.25775999999999993 0 0 0 0 0 1 0" /></filter></svg>#filter');
	-webkit-filter: grayscale(80%);
	        filter: grayscale(80%);
}
@media screen and (max-width: 530px) {
	nav ul li {
		width: 50%;
	}
}

/*==================
	FOTO GALERIJ
==================*/
#foto_galerij {
	font-size: 0;
	margin-top: 20px;
	position: relative;
}
#foto_galerij .foto img {
	width: 100%;
}
#foto_galerij .foto:nth-child(2),
#foto_galerij .foto:nth-child(3) {
	position: absolute;
	top: 0;
	width: 100%;
}

/*==================
	SECTION
==================*/
section {
	margin-top: 40px;
}
section h3 {
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 500;
}
section .organisatoren-tier,
section .sponsoren-tier {
	width: 100%;
	font-size: 20px;
}
section .organisatoren-tier li,
section .sponsoren-tier li {
	display: inline-block;
	margin: 7px 14px;
	vertical-align: middle;
}
section .organisatoren-tier li img,
section .sponsoren-tier li img {
	max-height: 100px;
	max-width: 100%;
}
section .sponsoren-tier .sponsor-onderschrift {
	font-size: 14px;
}
section img {
	border: none;
	outline: none;
}

/*==================
	POSTERS
==================*/
.posters {
	text-align: center;
}
.poster-thumbnail {
	background-color: #EEE;
	border: 1px solid #AAA;
	display: inline-block;
	margin: 10px;
	overflow: hidden;
	padding: 10px;
	text-overflow: ellipsis;
	transition: all 0.3s, box-shadow 0.5s;
	width: 310px;
}
.poster-thumbnail:hover {
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
}
.poster-img {
	width: 100%;
}
.poster-naam {
	font-weight: bold;
}
.poster-naam,
.poster-auteur,
.poster-licentie {
	min-height: 3em;
}
@media screen and (max-width: 710px) {
	.poster-thumbnail {
		width: 182px;
	}
}
@media screen and (max-width: 454px) {
	.poster-thumbnail {
		margin: 10px 5px;
	}
}
@media screen and (max-width: 434px) {
	.poster-thumbnail {
		width: 100%;
	}
}

/*==================
	VIDEOS
==================*/
.videos {
	text-align: center;
}
.video-col {
	float: left;
	padding: 0 10px;
	width: 50%;
}
.video {
	background-color: #EEE;
	border: 1px solid #AAA;
	display: inline-block;
	margin: 10px;
	padding: 10px;
	position: relative;
	transition: all 0.3s;
	width: 100%;
}
.video-wrapper {
	height: 0;
	padding-bottom: 56.25%;
	position: relative;
}
.video-wrapper > div {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.video-thumbnail {
	width: 100%;
}
.video-naam {
	font-size: 1.2em;
	font-weight: bold;
}
@media screen and (max-width: 600px) {
	.video-col {
		width: 100%;
	}
}

/*==================
	PROGRAMMAS
==================*/
.programmas {
	text-align: center;
}
.programma-col {
	float: left;
	padding: 0 10px;
	width: 50%;
}
.programma {
	padding-bottom: 20px;
	width: 100%;
}
.programma-inner {
	background-color: #EEE;
	border: 1px solid #AAA;
	display: inline-block;
	padding: 10px;
	position: relative;
	transition: all 0.3s;
	width: 100%;
}
.programma-thumbnail {
	width: 100%;
}
.programma-naam {
	font-size: 1.2em;
	font-weight: bold;
}
@media screen and (max-width: 600px) {
	.programma-col {
		width: 100%;
	}
}

/*==================
	PROGRAMMA PAGINA
==================*/
.programma-wrapper {
	position: relative;
	width: 100%;
}
.programma-wrapper .programma-inner {
	background-color: #EEE;
	border: 1px solid #AAA;
	display: inline-block;
	padding: 10px;
	width: 100%;
}
.programma-wrapper .programma-main,
.programma-wrapper .programma-aside {
	float: left;
	padding: 10px;
}
.programma-wrapper .programma-main {
	width: 60%;
}
.programma-wrapper .programma-aside {
	width: 40%;
}
.programma-wrapper .programma-beschrijving-inleiding {
	font-size: 1.1em;
}
.programma-wrapper .programma-aside-item {
	margin-bottom: 20px;
}
.programma-wrapper .programma-aside-item p {
	margin: 0;
}
.programma-wrapper .programma-aside-item-titel {
	color: #444;
}
@media screen and (max-width: 550px) {
	.programma-wrapper .programma-main,
	.programma-wrapper .programma-aside {
		width: 100%;
	}
}

/*==================
	FOTO SLIDER
==================*/
#slider {
	height: 600px !important;
}
@media screen and (max-width: 550px) {
	#slider {
		height: 400px !important;
	}
}
@media screen and (max-width: 400px) {
	#slider {
		height: 200px !important;
	}
}

/*==================
	FOTO SLIDER
==================*/
.imaginary-locaties {
	border: none;
	display: block;
	margin: 0 auto 2em;
	width: 100%;
}
@media screen and (max-width: 700px) {
	.imaginary-locaties {
		width: 100%;
	}
}

/*==================
	LOCATIES
==================*/
.locaties-tabel {
	text-align: left;
	width: 100%;
	table-layout: fixed;
}
.locaties-tabel th {
	width: 25%;
	text-align: left;
	padding: 4px;
}
.locaties-tabel td {
	padding: 4px;
	/* Forceer word breaks zodat woorden binnen
	de tabel blijven. */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.locaties-tabel thead tr th {
	background-color: #DDD;
}
.locaties-tabel tr:nth-child(odd) td {
	background-color: #FAFAFA;
}
.locaties-tabel tr:nth-child(even) td {
	background-color: #F3F3F3;
}
.locaties-tabel td > span {
	display: none;
}

@media screen and (max-width: 600px) {
	.locaties-tabel th:nth-child(2),
	.locaties-tabel th:nth-child(3),
	.locaties-tabel th:nth-child(4) {
		display: none;
	}
	.locaties-tabel td:nth-child(2),
	.locaties-tabel td:nth-child(3),
	.locaties-tabel td:nth-child(4) {
		display: none;
	}

	.locaties-tabel th:nth-child(1) {
		width: 100%;
	}
	.locaties-tabel td > span {
		display: initial;
	}
}

/*==================
	RESERVERING
==================*/
.reserveringen-tabel {
	text-align: left;
	width: 100%;
	table-layout: fixed;
}
.reserveringen-tabel th {
	text-align: left;
	width: 50%;
	padding: 4px;
}
.reserveringen-tabel td {
	padding: 4px;
}
.reserveringen-tabel thead tr th {
	background-color: #DDD;
}
.reserveringen-tabel tr:nth-child(odd) td {
	background-color: #FAFAFA;
}
.reserveringen-tabel tr:nth-child(even) td {
	background-color: #F3F3F3;
}

/*==================
	INFORMATIE
==================*/
.bestanden {
	text-align: center;
	clear: both;
}
.bestanden-col {
	float: left;
	padding: 0 10px;
	width: 50%;
}
.bestand {
	padding-bottom: 20px;
	width: 100%;
	margin: 0 auto;
}
.bestand-inner {
	background-color: #EEE;
	border: 1px solid #AAA;
	display: inline-block;
	padding: 10px;
	position: relative;
	transition: all 0.3s;
	width: 100%;
}
.bestand-preview {
	width: 100%;
}
.bestand-naam {
	font-size: 1.2em;
	font-weight: bold;
}
@media screen and (max-width: 600px) {
	.bestanden-col {
		width: 100%;
	}
}

/*==================
	VOORBEREIDING
==================*/
.voorbereiding-tabel {
	text-align: left;
	width: 100%;
	table-layout: fixed;
}
.voorbereiding-tabel th {
	padding: 4px;
}
.voorbereiding-tabel th:nth-child(1) {
	width: 75%;
}
.voorbereiding-tabel th:nth-child(2) {
	width: 25%;
}
.voorbereiding-tabel td {
	padding: 4px;
	/* Forceer word breaks zodat woorden binnen
	de tabel blijven. */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.voorbereiding-tabel thead tr th {
	background-color: #DDD;
}
.voorbereiding-tabel tr:nth-child(odd) td {
	background-color: #FAFAFA;
}
.voorbereiding-tabel tr:nth-child(even) td {
	background-color: #F3F3F3;
}
@media screen and (max-width: 400px) {
	.voorbereiding-tabel th:nth-child(1) {
		width: 65%;
	}
	.voorbereiding-tabel th:nth-child(2) {
		width: 35%;
	}
}

/*==================
	FOOTER
==================*/
footer {
	margin-top: 20px;
}

/*==================
	VISITOR COUNTER
==================*/
#visitor_count {
	clear: both;
	text-align: center;
}

/*==================
	PAGE LOADING
==================*/
#page_loading {
	background-color: #eee;
	bottom: 0;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.25);
	display: block;
	left: 5px;
	position: fixed;
}
#page_loading p {
	margin: 1px 3px;
	padding: 0;
}