/* ----------------------------------------------- BODY --------------------------------- */

body {
	font-family: Arimo, "Open Sans", "trebuchet ms", verdana, arial, helvetica, sans-serif;
	font-size: 15px;
	letter-spacing: 0.03em;
	line-height: 21px;
	color: white;
	text-decoration: none;
	vertical-align: top;
		/* Tijs - de té grijze versie was  6d7c88 */
	background: #6d7c98;
}
body, table {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
		/* zorg dat op iPhone letters niet ineens heel groot worden*/
	-webkit-text-size-adjust: none;
}
a {
	color: white;
	text-decoration: none;
	width: 100%;
}

/* --------------------------------------------- CONTAINER ----------------------------------- */

.container {
	width: 100%;
	height: 100%;
	height: 100vh;
}

/* --------------------------------------------- LINKS ----------------------------------- */

.links {
	width: 50%;
	height: 100%;
	float: left;
}

.linksrij1, .linksrij2 {
	width: 100%;
	height: 20%;
	position: relative;
}

	/* afbeelding zangers */
.linksrij2 {
	width: 100%;
	background-image: url(gif/coqu.jpg);
	background-size: cover;
	background-position: center; 
	background-repeat: no-repeat;
}

	/* menu */
.linksrij3 {
	min-height: 20%;
	opacity: .8;
}

	/* donkerblauw én lichtblauw voor achtergrond logo */
.linksrij4 {
	height: 30%;
		/* donkergrijsblauw */
		/* De té grijze versie was  576470 */		
	background: #576480;
	background-image: url(gif/kleuren.gif);
	background-size: 100% 100%;
}

.linksrij5 {
}

/* --------------------------------------------- RECHTS ----------------------------------- */

	/* groot vlak met poster */
.rechts {
	float: right;
	width: 50%;
	height: 100%;
		/* Tijs - background-image is gedefinieerd in html-bestand */ 
	background-size: cover;
	background-position: center center; 
	ackground-repeat: none;
}

.rechtsrij1, .rechtsrij2, .rechtsrij3, .rechtsrij5 {
	height: 20%;
}


	/* rechtsrij3a en -b worden gebruikt voor links naar eerdere programma's */
.rechtsrij3a {
	height: 12%;
}

	/* smalle balk met links naar andere projecten */
.rechtsrij3b {
	height: 8%;
	background: black;
	opacity: 0.5;
}

	/* zwart vlak datum van project */
.rechtsrij3b:hover {
	opacity: 0.5;
}

.rechtsrij4 {
	height: 20%;
}

	/* doorzichtig wit vlak naam van project */
.rechtsrij4inhoud {
	height: 100%;
	box-sizing:border-box;
	     -moz-box-sizing:border-box;
	     -webkit-box-sizing:border-box; 
	background: white;
	opacity: .6;
	padding-left: 5%;
	padding-top: 15px;
	color: black;
	font-weight: bold;
}

/* --------------------------------------------- REST ----------------------------------- */

.logo {
	max-width: 90%;
	max-height: 100%;
}

.menu {
	width: 100%;
	padding-right: 5%;
}

.menutd:hover {
		/* donkergrijsblauw */
	background: #576470;
}

.menulink {
		/* Tijs - op één of andere manier het menu in WordPress heel iets naar rechts verschoven */
	margin-left: .3%;
	padding-left: 5%;
	display: block;
}

.menulink:hover {
		/* donkergrijsblauw */
	background: #576470;
}

	/* tabel met links naar andere projecten*/
.navigatietabel {
	height: 85%;
	width: 100%;
	padding-left: 2%;
	padding-right: 2%;
}

.navigatielinks {
	text-align: left;
}

.navigatierechts {
	text-align: right;	
}

.pijl {
	font-size: 32px;
	letter-spacing: 3px;
	position: relative;
	top: 3px;
}

h1 {
	line-height: 1em;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 10px;	
}

/* ------------------------------------- RESPONSIVE --------------------------- */

	/* Tijs  iPad nog net twee kolommen*/
@media only screen and (max-width: 750px) {
	.links {
		height: auto;
		width: 100%;
	}
	.linksrij1 {
		height: 2em;
	}
	.linksrij2 {
		height: 10em;
	}
	.linksrij3 {
		height: 10em;
	}
	.linksrij4 {
		height: 15em;
	}
	.linksrij5 {
		height: 0;
	}

	.rechts {
		width: 100%;
	}
	.rechtsrij3b {
		opacity: .5;
	}
	.logo {
		max-width: 100%;
		max-height: 100%;
	}
}

	/* Tijs  - mobieltje */
@media only screen and (max-width: 600px) {
	/* Tijs op android lijkt 100vh het niet te doen */
	.rechts {
		height: 550px;
	}
	.rechtsrij1, .rechtsrij2, .rechtsrij3, .rechtsrij5 {
		height: 100px;
	}
	.rechtsrij4 {
	}
	.rechtsrij4inhoud {
		min-height: 100px;
		font-size: 12px;
		line-height: 1.4em;
		font-weight: normal;
		padding-top: 8px;
		padding-bottom: 15px;
	}
	/* Tijs met groter lettertype past de navigatie niet meer */
	.navigatietabel {
		font-size: 13px;
	}
	.pijl {
		font-size: 20px;
		letter-spacing: 2px;
		position: relative;
		top: 0px;
	}
	h1 {
		font-size: 22px;
		padding: 0;
		margin-top: 5px;
		margin-bottom: 5px;	
	}
}