@charset "utf-8";
/* CSS Document */

body
	{
	margin:0 auto;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;	/* basis dikte font = 300 */
	font-size: 12px; 	/* 1 em = 12 px */
	width:  100vw;		/* breedte is 100 % vertical viewport */
	height: 100vh;
	background-position: center top;
	background-color: white;
	}

/* -!- deze container omvat alle overige divs en geeft de divs hun breedte op basis van een percentage -- */
.container 
	{
	width: 27.8%;
	margin: 0 auto;
	margin-top: 10em;
	padding: 0px;
	border: none;
	}
	
/* -!- de HEADER bevat de naam is FIXED en is een link naar de info -- */
.header 
	{
	position: fixed;
	width: 100%;
	top: 0em;
	left: 0;
	text-align: center;
	border: none;
	padding-top:5em;
	height:5em; /*10em;*/
    z-index: 1;
	background-color:white;
	}

/* -!- PAAL bevat de index foto's die verwijzen naar de verschillende catagorien -- */
.paal 
	{
	width:533px; /*27.76%;*/
	margin:auto;
	clear: both;
	padding-top:11vh;
	display: block;
	}

/* -!- FOTO in paal [breedte van 533 pixel - hoogte van 400 pixel] -- */
.paalfoto 
	{
	float:left;
	margin-top:10em;
	margin-bottom: 5em;
	}

/* -!- Tekst over FOTO in paal [breedte van 533 pixel - hoogte van 400 pixel] -- */
.paaltekst
	{
	position:relative;
	top: -10em;
	border:none;
	text-align:center;
	visibility:hidden;
	}


/* -!- LAATSTE opvulwit onder paal om laatste foto even hoog te verkrijgen als eerste foto  -- */
.laatste 
	{
	float: left;
	clear: both;
	height:12vh;
	}

/* -!- SERIETEKST: uitleg over de serie foto's -- */
.serietekst 
	{
	position:absolute;
	margin-top:14.5vh;
	margin-left:29.15%;
	width:43%;
	height: 18.4em; <!--400px;-->
	font-family: 'Open Sans', sans-serif;
	font-size:1em; /* 14px / 16px */
	line-height:1.5em;
	letter-spacing:0.075em;
	font-weight:300;
	visibility:hidden;
	float:left;
	padding-top: 10%;
	text-align:center;
	}	

/* - -   F O T O   R I J   - - - -  */


/* -!- FOTORIJ: breedte wordt gezet door java -- */
#fotorij {
	position: fixed;
	max-width:none;
	position: relative;
	float: left;
	visibility:hidden;
}
		
/* -!- FOTO: foto's in de rij -- */
.foto {
	width:auto;
    height: auto;
	float:left;	
	}

/* -!- FOOTER: naam en copyright -- */
.footerfixed
	{
	position:absolute;
	margin-left:29.15%;
	width:42%;
	text-align: center;
	clear:both;
	bottom: 1vh;
	background-color:white;
	}	

.footer
	{
	position:relative;
	width:100%;/*95.5%;*/
	text-align: center;
	clear:both;
	}


/* -!- INFO: de info icon voor serie info -- */
.info 
	{
	position:absolute;
	margin-left:29.15%;
	width:42%;
	text-align: center;
	height: 1vh;
	bottom: 8vh;
	clear:both;
	}
	
/* - -   I N F O R M A T I E    - - - -  */

/* -!- INFORMATIE: Info: naam en links -- */
.informatie 
	{
	height: 20em;
	width: 100%;
	float: none;
	margin-top: 9em;
	margin-bottom: 6em;
	text-align:center;
	float: left;
	clear:both;
	}
	
	
/* - -   T Y P O G R A P H I C   - - - -  */

p 
	{
	font-family: 'Raleway', sans-serif;
	font-size:0.9vw; /*0.8125em; /* 14px / 16px */
	line-height:1vw;
	letter-spacing:0.075em;
	font-weight:400;
	color: #000000;
	}

b 
	{
	font-weight:500;
	}

i 
	{
	font-style:italic;
	}


/* - -   C L A S S E S S   - - - -  */

.centering 
	{
	text-align:center;
	}

.capital 
	{
	text-transform: uppercase;
	}


/* - -   H E A D S   - - - -  */

h1 
	{
	font-family: 'Raleway', sans-serif;
	font-size: 1.5em; /* 16px */
	letter-spacing: 0.1em;
	font-style: normal;
	line-height: 1.0em;
  	text-decoration: none;
	font-weight: 600;
	color: #919191;
	}
/* -!- Headtekst over FOTO in paal [breedte van 533 pixel - hoogte van 400 pixel] -- */
/* -!- Headtekst over Informatie -- */
h2 
	{
	font-family: 'Raleway', sans-serif;
	font-size: 2em; /* 16px */
	letter-spacing: 0.3em;
	font-style: normal;
	line-height: 1.0em;
  	text-decoration: none;
	font-weight: 600;
	color: #717171;
	}

/* -!- Headtekst over Informatie -- */
h3 
	{
	font-size: 1.5em; /* 14px / 16px */
	color: #919191;
	letter-spacing: 0.1em;
	line-height: 1.0em;
	font-weight:  700;
	text-align:center;
	}

/* -!- Headtekst over Informatie  & links-- */
h4 
	{
	font-size: 1em; /* 14px / 16px */
	color: #515151;
	letter-spacing: 0.3em;
	line-height: 1.0em;
	font-weight:  600;	}
h5 
	{
	font-family: 'Raleway', sans-serif;
	font-size:  1.3vw;/*2em; /* 16px */
	letter-spacing: 0.3em;
	font-style: normal;
	line-height: 1.0vw;
  	text-decoration: none;
	font-weight: 600;
	color: #717171;
	margin-bottom:10vh;
	}
h6 
	{
	font-family: 'Raleway', sans-serif;
	font-size:  0.7vw;/*2em; /* 16px */
	letter-spacing: 0.3vw;
	font-style:italic;
	line-height: 1.0vw;
  	text-decoration: none;
	font-weight: 400;
	color: #717171;
	margin-bottom:10vh;
	}

/* - -   L I N K S   - - - -  */

a:link  
	{
	font-family: 'Raleway', sans-serif;
	color:#919191;
	font-size:1.5em; /* 16px */
	letter-spacing:0.1em;
	font-style:normal;
  	text-decoration: none;	/* met deze groep kiezers krijgen gebruikers die navigeren met een toetsenbord, 
							   dezelfde aanwijsfunctionaliteit als gebruikers die werken met een muis. */
	font-weight:600;
	}
	
a:visited 
	{
	font-family: 'Raleway', sans-serif;
	color:#919191;
	font-size:1.5em; /* 16px */
	letter-spacing:0.1em;
	font-style:normal;
  	text-decoration: none;	/* met deze groep kiezers krijgen gebruikers die navigeren met een toetsenbord, 
							   dezelfde aanwijsfunctionaliteit als gebruikers die werken met een muis. */
	font-weight:600;
	}

a:hover   
	{
	font-family: 'Raleway', sans-serif;
	color:#919191;
	font-size:1.5em; /* 16px */
	letter-spacing:0.06em;
	font-style:normal;
  	text-decoration: none;	/* met deze groep kiezers krijgen gebruikers die navigeren met een toetsenbord, 
							   dezelfde aanwijsfunctionaliteit als gebruikers die werken met een muis. */
	font-weight:600;
	}

a:active  
	{
	font-family: 'Raleway', sans-serif;
	color:#919191;
	font-size:1.5em; /* 16px */
	letter-spacing:0.1em;
	font-style:normal;
  	text-decoration: none;	/* met deze groep kiezers krijgen gebruikers die navigeren met een toetsenbord, 
							   dezelfde aanwijsfunctionaliteit als gebruikers die werken met een muis. */
	font-weight:600;
	} 

a:focus 
	{
	text-decoration: none;	/* met deze groep kiezers krijgen gebruikers die navigeren met een toetsenbord, 
							   dezelfde aanwijsfunctionaliteit als gebruikers die werken met een muis. */
}