@charset "UTF-8";

html {
/*	background: url('../images/comingsoon.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/
}

/*a.white:link {color: white; font-weight: bold;}
a.white:active {color: white; font-weight: bold;}
a.white:visited {color: white; font-weight: bold;}
a.white:hover {color: white; font-weight: bolder;}*/

body	{
	background-color:#000;
	color:#FFF;
	font: normal 100% Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	margin:0px 10px;
}

img	{
	max-width:90%;
}

center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

/* -- Elements starts here --*/

#container {
	max-width:1000px;
	margin:20px auto;
}

/*header {
	position:relative;
	width:72.91666%;*/ /* 700 / 960 */
	/*float:right;
	margin-bottom:30px;
	background-color:#F00;
	text-align:left;
	padding:30px 3.125%;*/ /* 30 / 960 */
	/*border-bottom:solid 1px #FFFFFF;
}*/

/*section		{
	float:right;
	position:relative;
	width:74.791666666%;*/ /* 718 / 960 */
	/*background-color:#000;*/
	/*border:solid 1px #FFF;*/
	/*margin-bottom:30px;
	padding:2.083333333%;*/ /* 20 / 960 */
/*}*/
	
/*aside	{
	float:left;
	width:12.5%;*/ /* 120 / 960 */
	/*min-width:110px;
	border: solid 1px #CCCCCC;
	padding:1.04166%;*/ /* 10 / 960 */
	/*text-align:right;
}

article	{
	float:right;
	position:relative;
	width:72.91666%;*/ /* 700 / 960 */
	/*background-color:#F00;
	padding:3.125%;*/ /* 30 / 960 */
	/*border-bottom:solid 1px #FFFFFF;
}

#img_left	{
	float:right;
    margin-right:5%;*/
	/*width:48.05013927%; /* 345 / 718 */
	/*width:20%; 

}

#img_right	{
	float:right;
	width:48.05013927%;*/ /* 345 / 718 */
/*}*/

/*#img_left:hover,
#img_right:hover	{
	opacity:0.5;
	cursor:pointer;
}*/

.clear	{
	clear:both;
}

/* -- Typo starts here --*/

/*h1	{
	font-size: 2.25em;*/ /* 36 / 16 */
	/*font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	line-height: 1;
	letter-spacing:0.05em;
}

h3 {*/
	/*color:#333;*/
	/*font-family: Arial, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-size: 0.875em;*/ /* 14 / 16 */
	/*font-weight:bold;
	text-transform:uppercase;
	text-decoration:none;
	letter-spacing:0.15em;
}

.litextcolor{
    color:white;
}*/


/*h2 a:hover	{
	color:#FFF;
}*/

/*aside h3	{
	color:#FFF;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-size: 0.875em; /* 14 / 16 */
	/*font-weight: bold;
	text-transform:uppercase;
	text-decoration:none;
	letter-spacing:0.15em;
	padding-bottom:5px;*/
/*}*/

/* -- Nav aside starts here --*/

aside ul li a	{
	display:block;
	padding: 8px 5px 8px 0px;
	text-align:right;
	font-family:Verdana, sans-serif;
	color:#F00;
	text-decoration:none;
	
}

aside ul li a:hover	{
	background-color:#F00;
	color:#FFF;
}

article p	{
	line-height: 1.5em;
}

@media screen and (max-width: 768px) {
	
	header	{
		float:none;
		margin:30px auto;
	}
	
	aside	{
		float:none;
		width:78.95833333%; /* 758 / 960 */ /* 758 omdat 760px nu de context is - 2px van de border */
		margin:30px auto;
		height:65px;
		text-align:center;
		padding:10px 0px;
	}
	
	aside #menu ul li	{ /* #menu toegevoegd omdat deze nog in mijn html stond. Was in de les niet het geval*/
		display:inline;
	}
	
	aside #menu ul li a { /* #menu toegevoegd omdat deze nog in mijn html stond. Was in de les niet het geval */
		display:inline;
		text-align:center;
		padding: 5px 9% 5px 9%;
	}
	
	aside h3	{
		padding-bottom:20px;
	}

	article {
		float:none;
		position:relative;
		margin:0px auto 40px;
	}
	
	section		{
		float:none;
		margin-left:auto;
		margin-right:auto;
		padding:10px 2.0833333%; /* 20 / 960 */
		text-align:center;
	}

	section #img_left,
	section #img_right	{
		float:none;
		width:100%;
		padding:10px 0px;
	}
} /* let op: afsluitende accolade om de media query af te sluiten ! */


@media screen and (max-width: 512px) {
	
	header	{
		margin:20px auto;
	}
	
	aside	{
		width:72.9166666%; /* 700 / 960 */
		padding:10px 3.125%; /* 30 / 960 */
		margin:20px auto;
		height:110px;
	}
	
	h1	{
		font-size: 1.75em; /* 28 / 16 */
	}
	
	h2 a	{
		font-size: 0.625em; /* 10 / 16 */
	}
	
	aside h3	{
		padding-bottom:5px;
	}
	
	section		{
		margin:20px auto;
	}
	
	aside #menu	{
		width:100%; /* #menu toegevoegd omdat deze nog in mijn html stond. Was in de les niet het geval */
	}
	
	aside #menu ul li a { /* #menu toegevoegd omdat deze nog in mijn html stond. Was in de les niet het geval */
		display:block; /* om de display:inline style uit de media query weer op te heffen */
	}
	
	article p	{
		font-size:14px;
	}
} /* let op: afsluitende accolade om de media query af te sluiten ! */