
@media screen and (min-width: 0px)  {
	
	html{
		margin:0 auto;
		height:100%;
		background-color:#ffffff;
		color:#000000;
		font-family: 'Open Sans', sans-serif;
		margin:0px;
		padding:0px;
		background-image:url("../img/background.jpg");
		background-size:cover;
		background-position: bottom center;
		background-repeat:no-repeat;
		background-attachment:fixed;
		font-size:0.95em;
		
	}
	
	
	.modal {
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        0;
		left:       0;
		height:     100%;
		width:      100%;
		background: rgba( 255, 255, 255, .8 ) 
		            url('http://i.stack.imgur.com/FhHRx.gif') 
		            50% 50% 
		            no-repeat;
		opacity: 0.80;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
		filter: alpha(opacity = 80)
	};
	
	
	
	body.loading {
	    overflow: hidden;   
	}

	body.loading .modal {
	    display: block;
	}



	
	input,textarea{
		padding:10px;
		border:1px solid #ffffff;
		border-radius:20px;
	}
	
	textarea{
		font-family:inherit;
		font-size:0.8em:
	}
	
	.auto_select input, .auto_select textarea{
		padding:5px;
		border-radius:5px;
		border:1px solid #c9c9c9;
	}
	
	.auto_select .frm_focus{
		
	}
	
	.auto_select .button, .button{
		width:auto;
		cursor:pointer;
		-webkit-appearance: none;
		background-color:#bd3600;
		color:#ffffff;
		border-radius:20px;
		padding:10px 30px;
		border:none;
	}
	
	.button:hover{
		background-color:#d45600;
	}
	
	.button:active{
		position:relative;
		top:1px;
	}
	
	.frmerror{
		border:1px solid #ff0000;
	}
	
	
	.formfeedback{
		color:#ff0000;
		font-style:italic;	
	}
	
	
	
	.point{
		cursor:pointer;
	}
	
	
	a{
		outline: none;
		text-decoration:underline;
	}
	

	p, ul, ol{
		line-height:1.6em;
		margin-bottom:30px;
	}
	
	
	h1,h2,h3,h4{
		margin-bottom:30px;
		color:#bd3600;
		font-weight:bold;
	}
	
	h1{
		font-size:1.8em;
		line-height:2.5em;
		
	}
	
	h2{
		font-size:1.6em;
		line-height:1.6em;
		
	}
	
	h3{
		font-size:1.3em;
	}
	
	h4{
		font-size:1.2em;
		color:#000000;
	}
	
	strong{
		font-weight:bold;	
	}
	
	small{
		font-size:0.8em;	
	}
	
	em{
		font-style:italic;
	}
	
	
	ul, ol{
		list-style-type:disc;
		position:relative;
		margin-left:15px;
		margin-bottom:5px;
	}
	
	ol{
		list-style-type:decimal;
	}
	
	li{
		
	}

	
	.clear{
		clear:both;
	    height:0;
	    font-size: 1px;
	    line-height: 0px;
	}
	
	#cookiebanner{
		height:50px;
		position:fixed;
		background-color:#2b2a2a;
		color:#ffffff;
		width:100%;
		left:0px;
		top:0px;
		z-index:9999;
		-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
	
	}
	
	#cookiebanner #cookiebanner-tekst{
		position:absolute;
		top:17px;
		left:10px;
		font-size:14px;
	}
	
	#cookiebanner-accept{
		width:auto;
		position:absolute;
		top:11px;
		right:15px;
	}
	
	#cookiebanner-accept button{
		width:auto;
		cursor:pointer;
		-webkit-appearance: none;
		border:0px;
		background-color:#ad2100;
		color:#ffffff;
		font-size:11px;
		border-radius:10px;
		font-size:12px;
		padding:5px;
	}
	#cookiebanner-accept button:hover{
		background-color:#d72900;
	}
	
	#container{
		max-width:600px;
		
		margin:0 auto;
		position:relative;
		padding-bottom:300px;
		
		
	}
	
	.content-background{
		background-color:#ffffff;
		opacity: 0.8;
    	filter: alpha(opacity=80); /* For IE8 and earlier */
    	width:100%;
    	position:absolute;
    	top:0px;
    	left:0px;
    	border-bottom-left-radius:5px;
    	border-bottom-right-radius:5px;
    	min-height:500px;
    
    	
	}
	
	.content{
    	position:absolute;
    	top:50px;
    	left:50px;
    	width:500px;
    	text-align:center;
    	
	}
	
	#sel-inschrijving-aantal{
		margin-bottom:30px;
	}
	
	#btn-inschrijving-start{
		margin-bottom:10px;
	}
	
	.selecteer-plaats{
		display:inline-block;
		vertical-align:top;
		width:80px;
		height:50px;
		padding:10px;
		border:1px solid #ffffff;
		border-radius:5px;
		margin:5px;
		
	}
	
	
	.selecteer-plaats-aantalbeschikbaar span{
		color:#bd3600;
		font-style:italic;
		font-size:0.9em;
	
		padding-top:8px;
		display:inline-block;
		height:30px;
		
	}
	
	.selecteer-plaats button{
		padding:5px 15px;
		margin-top:5px;
	}
	
	.inschrijving-dag{
		margin-bottom:40px;
	}
	
	
	#frm-bevestig label{
		display:inline-block;
		width:100%;
		text-align:center;
		margin-bottom:5px;
	}
	
	#frm-bevestig input{
		display:block;
		text-align:center;
		margin:0 auto 30px auto;
		width:80%;
		max-width:250px;
	}
	
	#frm-bevestig .button{

		width:auto;
	}
	
	#content-process{
		text-align:left;
	}
	
	
	
	#credits{
		position:fixed;
		z-index:900;
		left:0px;
		bottom:0px;
		background-color:#ffffff;
		height:60px;
		width:100%;
		padding:10px 0px;
		line-height:1.3em;
		
	}	

	#credits img{
		width:auto;
		height:60px;
		margin-bottom:20px;
		
	}
	
	#credits-tekst{
		font-size:0.9em;
		position:absolute;
		top:10px;
		right:10px;
		text-align:right;
	}
	
	#credits-tekst a{
		color:#000000;
	}
	
	#nav{
		position:fixed;
		top:5px;
		left:5px;
		z-index:950;
	}
	
	#nav img{
	
		height:25px;
		width:auto;
		margin-right:5px;
	}
}





@media screen and (max-width: 600px)  {		/* DIT IS VOOR DE MOBIELE BROWSERS */
	
	
	#cookiebanner{
		height:100px;
	}
	
	#cookiebanner-accept{
		top:55px;
		left:10px;
	}
	
	#container{
		width:100%;
		max-width:100%;
		margin:0px auto 0px auto;
		position:relative;
	
	}
	
	.content-background{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
    	
	}
	
	.content{
    	position:relative;
    	width:90%;
    	margin:0 auto 0px auto;
    	top:0px;
    	left:0px;
    	padding:30px 0px;
    	
    	
	}
	
	#sel-inschrijving-aantal{
		margin-bottom:30px;
	}
	
	
	

	#credits img{
		display:none;
		
	}
	
	#credits-tekst{
	
		position:relative;
		text-align:center;
		top:0px;
	}
	
	
	
}




@media screen and (min-width: 600px)  {		/* DIT IS VOOR DE STANDAARD BROWSERS */
	
	html{
	 
	}
	
	body{
		
		 padding-bottom: 100px;
	}
	#container{
		margin-bottom:10px;
		
		
	}
	
	#whitespace{

		height:90px;
		position:absolute;
		top:0px;
		width:100%;
	}
	
	
}
 