/* BLOCK ELEMENTS */ 

/* COLORS

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

*/

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

body{
	background-image: url('img/kringfade.png');
	background-size: contain;
	background-color: #FFF;
	background-repeat: no-repeat;
}

#container{
	background-image: url('img/bg-side.svg');
	background-repeat: repeat-y;
	background-size: contain;
	background-position: left center;
	
}

@media(min-resolution:192dpi){
	#container{
		background-position: -10em center;
	}
}

#header{
	padding: 0em 0em;
	text-align: center;
	width: 100%;
	min-width: 45em;

}
		
	#flashgirl{
		position: absolute;
		left: 1.6em;
		top: 3em;
		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;
	}
	
	#flashgirl:hover{
		background-image: url('img/flashgirl-over.svg');
	}
	
	@media(min-resolution:192dpi){
		#flashgirl{
			margin-left: -2em;
			top: 3em;
			margin-top: -0.5em;
			width: 2em;
		}
	}
	
	

    #bemoreme img{
        margin-top: 5em;
        width: 20.0em;
    }
	

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

	#content{
		min-width: 50em!important;
	}
	
	#flyers{
		float: right;
		width: 10em;
		margin-left: 1em;
	}
	
	#kleedjes{
		float: right;
		width: 20em;
		margin-left: 1em;
	}


	#quotekader{
		margin-bottom: 2em;
		margin-left: 3em;
		float: left;
		background-image: url('img/quotekader.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		padding: 3.0em;
		transform: rotate(2deg);
		list-style: none;
	}
	
		#quotekader li{
			font-size: 0.8rem;
			color: #FFF;
			padding: 0.1em 0em;
		}
		
		@media(min-resolution:192dpi){
			#quotekader{
				float: none;
				margin: 0px;
				background-image: none;
				transform: rotate(0deg);
			}
			#quotekader li{
				font-size: 1em!important;
				color: #555;
			}
		}
		
	#lokatiekader{
		margin-top: 1em;
		float: right;
		background-image: url('img/lokatiekader.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		padding: 2em;
		transform: rotate(-2deg);
		color: #FFF;
	}
	
		#lokatiekader strong{
			color: #FFF;
		}
	
	
	#planning{
		margin-bottom: 1em;
	}
	
	@media(min-resolution:192dpi){
		#planning td{
			font-size: 1em!important;
		}
	}
		
	#planning, #planning td{
		border-collapse: collapse;
		border: #555 solid 1px;
	}
	
	#planning td{
		padding: 0.5em;
	}
	
	.infolijst{
		margin-top: 0em;
		margin-bottom: 2em;
		margin-left: 1em;
	}
	
	.aanmeldkader{
		clear: both;
		margin-top: 1em;
		float: left;
		background-image: url('img/aanmeldkader.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		padding: 2em!important;
		transform: rotate(-2deg);
		color: #FFF;
		margin-bottom: 2em;
	}
	
	.aanmeldkader.rechts{
		float: right;
		margin-top: -5em;
	}
	
	@media(min-resolution:192dpi){
		.aanmeldkader,
		.aanmeldkader a,
		.aanmeldkader h3{
			font-size: 2rem!important;
		}
		
		.aanmeldkader.rechts{
			float: left;
			margin-top: 1em;
		}
	}



	#menu ul{
		display: none!important;
		list-style: none;
		flex-direction: column;
		justify-content: space-around;
		padding: 0.5em 0em 0.5em 0em;
		background-color: #FFF;
		border: #FFF solid 2px;
		border-radius: 0em 0em 0em 2em;
	}
	
	@media(min-resolution:192dpi){
		#menu{
			display: none!important;
		}
	}
	
	#menu ul li{
		padding: 0.5em 1em 0.5em 1em;
		display: block;
		width: 10em;
	}
		
	#menu:hover{
		right: 0em;
	}
	
	@media(min-resolution:192dpi){
		#menu:hover{
			right: auto;
		}
	}
	
	#menu:hover ul{
		display: flex!important;
	}
	
	#menu:hover label{
			display: none;
	}
	
	#menu label{
		font-size: 2rem;
		line-height: 1em;
		padding: 0em 0.2em 1em 0.2em;
		height: 2em;
	}
	
	#menu a{
		color: #555;
		text-decoration: none;
	}
	
	#menu a:hover{
		font-weight: bold;
	}

	#content{
		padding: 0em 5em 0em 10em;

	}
	@media(min-resolution:192dpi){
		#content{
			padding: 0em 5em 0em 15em;

		}
	}
	
	.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.3em 0em;
		clear: both;
	}
	
	#content h3{
		padding: 0em 0em 0.2em 0em;
	}
	
	#content p{
		padding: 0em 0em 2em 0em;
	}

		



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

.bemoreme{
	color: #10b3bb;
}

h1,h2,h3{
	font-family: 'Chango', cursive;
}

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

h2{
	font-size: 1.6rem;
	color: #1b7e91;
}

h2 a{
	text-decoration: none;
}

.aanmeldkader h3,
.aanmeldkader a{
	color: #FFF!important;
}


@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 label{
		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{
		float: none;
		font-size: 1.8rem;
		margin: 0em -2em;
	}
	
	h1{
		font-size: 4rem;
	}
	
	h3{
		font-size: 1rem;
	}
	
}