@media screen and (min-width: 0px)  {

	html{
		margin:0 auto;
		background-color:#5a785e;
		color:#ffffff;
		font-family: "Nunito Sans", sans-serif;
		font-weight: lighter;
		padding:0px;
		position:relative;
		height:100%;
		font-size:1em;
	}
	
	body{
		height:100%;
	}
	
	.no-js #loader { display: none;  }
	
	.js #loader { display: block; position: absolute; left: 100px; top: 0; }
	
	.preloader{
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        0;
		left:       0;
		height:     100%;
		width:      100%;
		background: rgba( 255, 255, 255, .8 )
		            url('https://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)
	}

	
	
	.modal {
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        0;
		left:       0;
		height:     100%;
		width:      100%;
		background: rgba( 255, 255, 255, .8 )
		            url('https://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{
		border:1px solid #ffffff;
		padding:10px;
		font-size:1.0em;
	}

	textarea{
		font-family:inherit;
		font-size:0.8em:
	}

	
	label{
		display:block;
		margin-bottom:2px;
	}
	
	.formfeedback{
		
		font-style: italic;

		padding:10px;
		line-height: 1.2em;
		font-weight: lighter;
		font-size:0.9em;
		
		
	}
	.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;
		border-radius:0px;
        -webkit-transition: all .15s ease-in-out;
        -moz-transition: all .15s ease-in-out;
        -ms-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out;
        outline:none;
		border:none;
		background-color:#223828;
		color:#c09346;
		padding:10px 30px;
		border-radius:20px;
		color:#ffffff;
		font-size:1em;
		font-weight: bold;
		
	}

	.button:hover{
		opacity: 0.8;
	}

	.button:active{
		position:relative;
		top:1px;
		outline:none;
	}
	
	.button strong{
		color:#e30616
	}

	
	

	a{
		outline: none;
		text-decoration:underline;
		color:inherit;
	}


	p, ul, ol{
		line-height:1.8em;
		margin-bottom:20px;
	}


	h1,h2,h3,h4{
		margin-bottom:30px;
		font-weight: bold;
	}

	h1{
		font-weight: bold;
		font-size:2em;
		margin-bottom:20px;
		line-height: 1.2em;
	}
	
	
	
	
	h1 strong{
		
			color:#e30616
	}
	
	
	

	h2{
	
		font-size:2em;
	}

	
	
	h3{
		font-size:1.5em;
		
		margin-bottom:15px;
	}
	

	strong{
		font-weight:bold;
	}

	small{
		font-size:0.8em;
	}

	em{
		font-style:italic;
	}


	ul, ol{
		list-style-type:disc;
		position:relative;
	}

	ol{
		list-style-type:decimal;
	}

	li{
		margin-left:20px;
	}


	.clear{
		clear:both;
	    height:0;
	    font-size: 1px;
	    line-height: 0px;
	}

	#frame{
		max-width:900px;
		width:95%;
		height:auto;
		margin:0 auto;
		text-align:center;
		padding:30px 0px;
	}
	
	#logo img{
		width:200px;
		height:auto;
	}
	
	#logo p{
		margin-top:10px;
		letter-spacing: 0.5em;
	}
	
	#logoklein {
		margin-bottom:20px;
	}
	
	#logoklein img{
		width:100px;
		height:auto;
	}
	
	.formulier{
		background-color:#5a785e;
		border:1px solid #ffffff;
		padding:20px;
		margin-bottom:20px;
	}
	
	.formulier label{
		display:inline-block;
		width:auto;
		text-align:left;
	}
	
	.formulier input{
		width:80%;
		margin-bottom:20px;
		text-align: center;
		border-radius: 15px;
		font-weight: lighter;
		padding:10px 0px;
	}
	
	#formulier1-radio{
		display: flex;
		justify-content: space-between;
		width:80%;
		margin:0 auto;
	}
	
	#formulier1-radio input{
		width:auto;
		margin-right:10px;
		padding:5px;
		
	}
	
	#frame-dj,#frame-afwezig,#frame-einde{
		display: none;
	}
	
	#frm-dj-nummer{
		margin-top:15px;
	}
	
	
	input[type="file"] {
    display: none;
}
	.custom-file-upload {
		border: 1px solid #ccc;
		display: inline-block;
		padding: 6px 12px;
		cursor: pointer;
	}
	
	#frm-upload-bericht{
		max-width:300px;
		width:80%;
		height:120px;
		text-align: center;
	}
	.upload-icon img{
		max-width:300px;
		width:80%;
		height:auto;
		border:0px;
	}
	.custom-file-upload{
		border:0px;
	}
	
	.infomessage{
		font-size:1.1em;
		padding:10px;
		font-weight: bold;
	}
	
	#overzicht{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
		
	.bericht{
		position:relative;
		margin:5px;
	}
	
	.bericht-image img{
		width:150px;
		height:auto;
	}
	
	
	
	#submit{
		visibility: hidden;
	}
	
	.jordi{
		border:2px solid #ffffff;
		width:200px;
		border-radius: 100px;
	}
}

@media screen and (max-width: 700px)  {		/* DIT IS VOOR DE MOBIELE BROWSERS */

	#frame{
	 	
	}
	
	
	#formulier1-radio input{
		width:auto;
		margin-right:5px;
		padding:3px;
		
	}
	
	#formulier1-radio{
		font-size:0.8em;
		
	}
	
	#overzicht{
		display:flex;
		justify-content:center;
		flex-wrap: wrap;
	}
	
}






@media screen and (min-width: 700px) AND (min-height:550px) {		/* DIT IS VOOR DE STANDAARD BROWSERS */
	#frame{

	}
	
	.formulier{
	
		padding:8px;
		
	}
	
}