/*alle elementen*/
* {
	/*maakt een box aan om alles heen*/
	box-sizing:border-box;
	/*alles heeft geen padding en margin*/
	padding:1;
	margin:0;
}

/*dat de content achter de nav komt te staan*/
nav ul::after {
	/*hierdoor geeft die alleen een stukje wit neer als je hier iets typt geeft die dat weer*/
	content:"";
	/*de groote ervan*/
	width:2.5em;
	height:2.5em;
	background:black;

	position:absolute;
	top:.25em;
	right:-3em;

	/*rond knopje maken*/
	border-radius:20%;
	/*img pannenkoek erin gezet*/
	background:#fff url(menu.svg) center center no-repeat;
}

.logo {
	width: 130px;
}

h2 {
	position: absolute;
	margin-top:8em;
	margin-left:2.0em;
	background-color:#D79F84;
	padding-top:42em;
	padding-left:16.5em;

}

/*header*/
/*selecteert alle images in de header*/
header>img{
	float:left;
	position: relative;
	margin-left:3em;
	padding-right: 1em;
	margin-top: 1em;
	width: 26em;
	height: 8em;
}

#sliderFrame,#sliderFrame div {

	margin-top:22em;
	margin-left:-24.3em;
	float: left;
	width:340px;
}

body>section>img {
	margin-top:12em;
	margin-left:-15.5em;
	position: absolute;
	float:left;
	width:200px;
}


nav .active a, nav a:hover {
	opacity:1;
	background-color:#9C1D14;
	color:white;
}

/*list items*/

/*alle uls in de body*/
nav ul {
	padding-top: 4.7em;
	padding-right: 2em;
	padding-left: 0.5em;
	/*zorgt dat de ul naast erlkaar verschijnt inplaats van onder elkaar*/
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;   
    flex-wrap: wrap;

}

nav li {
	/*menu ruimte ertussen, groeien allemaal evenveel*/
	flex-grow:0.5;
	-webkit-flex-grow: 0.5;
	/*haalt het puntje weg*/
	list-style:none;
}

nav a {
	/*zorgt dat nav a in blokjes worden weergegeven en elkaar vast komt te zitten*/
	display:block;
	position: static;
	/*padding tussen de blokjes*/
	padding-right:1em;
	padding-top:1em;
	padding-bottom:1em;
	padding-left:1em;
	background-color:#C27251;

	/*doorzichtigheid van de blokjes*/
	opacity:0.5;
	/*tekst komt in het midden*/
	text-align:center;
	transition:1s;	
	color:white;
	font-size: 100%;

}

.div1{
	position: static;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	flex-direction:row;
	margin-left:29.6em;
	margin-right:2em;
	margin-top:4em;
	background-color: #C27251;
	color:white;
	padding:2em 2em 12em 2em;
}

main {
	width:1400%;
}

/*zorgt ervoor dat als er gehovert wordt of active is de opacity 1 is dus dan wordt die niet meer doorzichtig in dit geval dus wit.*/
nav .active a, nav a:hover {
	opacity:1;
}


body {
	font-family:Georgia, serif;
	/*ruimte tussen de lijnen*/

	margin:1em;
}

a {
	/*zorgt dat de links geen streep krijgen*/
	text-decoration:none;
}

h1 {
	font-size: 1.8em;
	position: absolute;
	margin-top:1em;
	margin-left: -18em;
	color:white;
	background-color: #9C1D14;
	padding:0.2em 0.2em 0.2em 1em;


}
p{
	letter-spacing: 0.03em;
	font-size:1.1em;
	line-height:1.5em;
	    font-family:"Open Sans Condensed Light" ;
}

@media screen and (max-width:86em) {
	nav ul {
	padding-top: 1.2em;
	padding-bottom: 0.4em;}
}


@media screen and (max-width:62em) {
		html,body {
		
			/*zorgt ervoor dat je niet horizontaal kan scrollen*/
			overflow-x:hidden;
		}
		section {display: none;}
		h2{display: none;}

		h1 {
		font-size: 1.8em;
		position: absolute;
		margin-top:-2.8em;
		margin-left: -1em;
		color:white;
		background-color: #9C1D14;
		padding:0.2em 0.2em 0.2em 1em;}
		body{
			margin:0em;
			padding:0em;
			font-size: 90%;
		}
		body>header>p {
			display:none;
		}

		.div1{
			margin-top:12em;
			margin-left:0em;
			margin-right: 0em;
		}

		body > * {
			transition:1s;
		}
		body.navigatie > *:not(script) {
		/* komt van de linkerkant, Met y vanaf de bovenkant*/
			-webkit-transform:translateX(16em);
			transform:translateX(16em);
		}

		body > header {
		position:relative;
		}



		header>img{
			width: 350px;
			padding-left: 2em;
		}

		main img {
		width: 2;
		}

		nav ul {
		position:absolute;
		top:0;
		flex-direction:column;
		-webkit-flex-direction: column;
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
 		display: -ms-flexbox;      /* TWEENER - IE 10 */
  		display: -webkit-flex;     /* NEW - Chrome */
  		display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
		/*maakt het menu kleiner*/
		width:16em;
		/*het menu schuift naar links zodat hij niet meer zichtbaar hij is 16 breedt en 16 gaat er weg*/
		left:-16em;
	}
}