/* BLOCK ELEMENTS */ 

/* COLORS

Blue	#d7e4db
Green	#9CA890
Mint	#d4d99f
Orange	#feddb0
Pink	#f6dad9
Peach	#f9beae

*/

*{
	margin: 0px;
	padding: 0px;
}

#introbody{
	background-color: #f6dad9;
}

#aandeslagbody{
	background-color: #d7e4db;
}

#voorstellenbody{
	background-color: #d7e4db;
}

#header{
	position: absolute;
	top: 0em;
	padding: 2em 0em;
	text-align: center;
	background-image: url('/img/bg-header.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	min-height: 4em;
	width: 100%;
	z-index: 99;
}

	#flashgirl{
		position: absolute;
		left: 9.5em;
		bottom: 1.4em;
		margin-top: -0.5em;
		width: 10em;
		height: 5em;
		background-image: url('/img/flashgirl.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center bottom;
		z-index: 100;
	}
	
	#flashgirl:hover{
		background-image: url('/img/flashgirl-over.svg');
		
	}

#menu{
	position: absolute;
	right: 2em;
	top: 1em;
	border-radius: 0.2em;
	padding-bottom: 0.3em;
	text-align: left;
}


/* MOBILE DEVICES BLOCKS */
@media(min-resolution:192dpi){
	#menu{
		position: relative;
		right: auto;
		top: 1em;
		width: 100%;
		text-align: center;
		border-radius: 0em;
	}
}

	#menu ul{
		display: none;
		list-style: none;
		flex-direction: column;
		justify-content: space-around;
		padding: 0.5em 0em 0.5em 0em;
		background-color: #feddb0;
		border: #feddb0 solid 2px;
		border-radius: 0em 0em 0em 2em;
	}
	
	@media(min-resolution:192dpi){
		#menu ul{
			border-radius: 0em;
			border: none;
			background: none;
			font-size: 2.4rem!important;
			padding-bottom: 4em;
		}
	}
	
		#menu ul li{
			padding: 0.5em 1em 0.5em 1em;
			display: block;
		}
		
	#menu:hover{
		right: 0em;
	}
	
	#menu:hover ul, #menu.open ul{
		display: flex;
	}
	
	#menu:hover .hamburger{
		display: none;
	}
	
	@media(min-resolution:192dpi){
		#menu:hover .hamburger, #menu.open .hamburger{
			display: block;
			padding-bottom: 0em!important;
		}
	}
	
	#menu .hamburger{
		font-size: 2rem;
		line-height: 1em;
		padding: 0em 0.2em 1em 0.2em;
		height: 1em;
	}
	
	#menu a{
		color: #000;
		text-decoration: none;
	}
	
	#menu a:hover, #menu a.active{
		font-weight: bold;
	}

#content{
	width: 100%;
	padding: 0em;
	margin-top: 50px;
}
	
	.anchor{
		position: absolute;
		margin-top: -10em;
	}
	
	@media(min-resolution:192dpi){
		.anchor{
			margin-top: -45em;
		}
		
	}

	#content > div{
		padding: 2em 10em;
	}
	
	#content h2{
		padding: 0em 0em 0.5em 0em;
	}
	
	#content h3{
		padding: 0em 0em 0.2em 0em;
	}
	
	#content p{
		padding: 0em 0em 2em 0em;
	}

	#content > #introcontainer{
		padding-top: 8em;
		background-color: #9CA890;
		background-image: url('/img/bg-voorstellen.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center bottom;
		padding-bottom: 12em;
		
	}
	
		#selina2{
			width: 8em;
			float: right;
			margin-left: 2em;
		}
	
		
		#kader, #indexkader{
			float: right;
			font-weight: bold;
			background-image: url('/img/bg-kader.svg');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center center;
			padding: 2em;
			transform: rotate(2deg);
		}
		
	@media(min-resolution:192dpi){
		#kader{
			padding: 4em;
		}
		
	}
		
		#indexkader{
			float: left;
			background-image: url('/img/bg-indexkader.svg');
		}
		
			#kader ul, #indexkader ul{
				list-style: none;
			}
		
		#dolop{
			list-style: none;
			padding-bottom: 1em;
		}
		
		
	
	#infocontainer{
		background-color: #f6dad9; 
		background-image: url('/img/bg-aandeslag.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center bottom;
		display: flex;
		flex-direction: row;
		clear: both;
		margin-top: 4em;
	}

	
	
		#contactcontainer{
			float: left;
			background-image: url('/img/bg-contact.svg');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center center;
			margin-right: 8em;
			width: 14em;
			height: 10em;
			padding: 1em 1em 1em 2em;
			transform: rotate(-4deg);
			line-height: 2em;
			margin-top: 4em;
		}
		
		#aandeslagbody #contactcontainer{
			padding: 1em 3em;
		}
		
		#contactcontainer a{
			text-decoration: none;
		}
		
		#contactcontainer a:hover,
		#aandeslagcontainer p a:hover{
			text-decoration: underline;
		}
	
		
		#aandeslagcontainer{
			/*background-image: url('img/bg-kennismaken.svg');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center bottom;*/
			padding-bottom: 4em;
			padding-top: 4em;
		}
		
		@media(min-resolution:192dpi){
			#aandeslagcontainer{
				padding-top: 20em;
			}
		}
		
	#voorstellencontainer{
		clear: both;
		background-color: #d7e4db;
		margin-top: 8em;
		padding-top: 4em;
	}
	
		@media(min-resolution:192dpi){
			#voorstellencontainer{
				margin-top: 25em;
			}
		}
		

		#selina{
			width: 10em;
			height: 10em;
			float: left;
			margin-right: 4em;
		}



/* FONTS */
*{
	font-family: 'Yomogi', sans-serif;
	font-size: 1rem;
	color: #555;
}

h1{
	font-size: 2rem;
	margin: 0em;
	padding: 0em;
	margin-top: -0.5em;
}

h2{
	font-size: 1.6rem;
}

h2 a{
	text-decoration: none;
}

strong{
	font-size: 1.2rem;
}

/* MOBILE DEVICES FONT SIZES */
@media(min-resolution:192dpi){
	#header{
		min-height: 20em;
		background-size: cover;
	}
	
		
	#flashgirl{
		width: 20em;
		height: 10em;
		left: 4em;
		bottom: 2.0em;
		margin-top: 0em;
	}
	
	
	#menu .hamburger{
		width: 100%;
		text-align: center;
		font-size: 5rem!important;
	}
	
	#menu a{
		
		font-size: 3rem!important;
	}
	
	#content > div{
		padding: 2em 5em;
	}
	
	#content > #introcontainer{
		padding-top: 26em;
	}
	
	#infocontainer{
		flex-direction: column-reverse;
	}
	
	#infocontainer h2{
		font-size: 1.6rem;
	}
	
	#selina2{
		width: 20em;
		margin-left: 1em;
		margin-right: -2em;
	}
	
	#selina{
		width: 20em;
		height: 20em;
		margin-right: 2em;
		margin-left: -2em;
	}
	
	#kader li, #indexkader li{
		font-size: 1.8rem!important;
	}
	
	h1{
		font-size: 4rem;
	}
	
	h3{
		font-size: 3rem;
	}
	
	#content p, #content p strong, #content p a, #voorstellencontainer p a{
		font-size: 2.2rem!important;
	}
	
	#contactcontainer p{
		font-size: 3.0rem!important;
	}
	
	#content h2{
		font-size: 2.5rem!important;
	}
	
	#aandeslagcontainer p a{
		font-weight: bold;
		text-decoration: none;
	}
	
	#aandeslagcontainer p i{
		font-size: 2rem!important;
	}
	
	#contactcontainer{
		float: none;
		margin-right: 0em;
		margin-left: 2em;
		width: 25em;
		height: 17em;
		padding: 3em 0em 4em 3em!important;
		line-height: 2.5em;
		margin-bottom: 4em;
	}
	
	#contactcontainer h2{
		font-size: 3rem!important;
	}
	
	#contactcontainer a{
		font-size: 2rem!important;
		
	}
}