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

	html{
		margin:0 auto;
		background-color:#ffffff;
		color:#000000;
		font-family: "Mulish", serif;
		font-weight: normal;
		padding:0px;
		position:relative;
		height:100%;
		font-size:1em;
		line-height:1.6em;
	}
	
	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 #f2f5f6;
		padding:10px;
		font-size:1.0em;
	}

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

	
	label{
		display:block;
		margin-bottom:2px;
	}
	
	
	#cookiebanner{
	height:250px;
	
		
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  width: 400px;
	  line-height: 60px;
	  margin-left: -200px;
	  margin-top: -125px;
	  text-align: center;


		z-index:9997;
		-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);
		background-color:#ffffff;
		overflow:hidden;
		font-size:0.8em;
		text-align:center;
		border-radius:5px;
	}
	
	
	#cookiebanner{
	height:250px;
	
		
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  width: 400px;
	  line-height: 60px;
	  margin-left: -200px;
	  margin-top: -125px;
	  text-align: center;


		z-index:9997;
		-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);
		background-color:#ffffff;
		overflow:hidden;
		font-size:0.8em;
		text-align:center;
		border-radius:5px;
	}
	

	#cookiebanner-image {
		margin-bottom:0px;
		padding-bottom:0px;
		line-height: 1.0em;
		height:70px;
	}
	
	#cookiebanner-image img{
		width:100%;
		height:auto;
	}
	
	#cookiebanner a{
		color:inherit;
	}
	
	#cookiebanner-header {
		padding:8px 5px 0px 5px;
	}
	
	#cookiebanner-header h3{
		margin-bottom:1px;
		color:#000000;
		text-transform:uppercase;
		font-weight:bold;
		font-size:1.5em;
		padding:0px;
	}
	
	#cookiebanner-tekst{
		padding:0px
		font-weight:lighter;
		line-height:1.5em;
		margin-bottom:5px;
	}

	#cookiebanner-accept{
	
	}

	#cookiebanner-accept button{
		width:auto;
		cursor:pointer;
		-webkit-appearance: none;
		border:0px;
		background-color:#000000;
		color:#ffffff;
		border-radius:10px;
		font-size:12px;
		padding:5px;
		margin-bottom:0px;
	}
	
	
	#cookiebanner-accept button:hover{
		background-color:#d72900;
	}
	
	
	#popup-content{

		min-width:140px;
		color:#000000;
		border-radius:5px ;
		opacity: 0;
   	 	transform: translateY(-50px);
    	transition: all .3s;

	}

	.fancybox-container a, .fancybox-controls, .fancybox-buttons , .fancybox-button--close{
		outline: none;
	}

	.fancybox-slide--complete #popup-content {
		opacity: 1;
		transform: translateY(0);
	}

	.btn-popup {
		display: inline-block;
		text-align:right;
		float:right;
		border:0px;
		background-color:#e30616
		border-radius:12px;
		color:#ffffff;
		padding:8px 15px;
		font-size:10px;
		outline:none;

	}


	#trigger-nav{
		background-color:#292e34;
    	color:#ffffff;
    	-webkit-transition: .5s ease-in-out;
	 	 -moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
	  	cursor:pointer;
	  	width:auto;
	  	height:27px;
	  	font-size:1.7em;
	  	padding:8px;
	  	position:fixed;
	  	top:10px;
	  	right:10px;
	  	z-index:999;
		display:none;
		
	}

	#trigger-nav:hover{
		background-color:#e30616;
	}
	
	#nav-icon{
		width: 30px;
		height: 10px;
		position: relative;
		margin: 3px auto;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
		display:inline-block;
		vertical-align:top;
	}

	#nav-icon span{
		display: block;
		position: absolute;
		height: 4px;
		width: 100%;
		background: #ffffff;
		border-radius: 4px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	#nav-icon span:nth-child(1) {
	  top: 0px;
	}

	#nav-icon span:nth-child(2) {
	  top: 8px;
	}

	#nav-icon span:nth-child(3) {
	  top: 16px;
	}

	#nav-icon.open span:nth-child(1) {
	  top: 8px;
	  -webkit-transform: rotate(135deg);
	  -moz-transform: rotate(135deg);
	  -o-transform: rotate(135deg);
	  transform: rotate(135deg);
	}

	#nav-icon.open span:nth-child(2) {
	  opacity: 0;
	  left: -60px;
	}

	#nav-icon.open span:nth-child(3) {
	  top: 8px;
	  -webkit-transform: rotate(-135deg);
	  -moz-transform: rotate(-135deg);
	  -o-transform: rotate(-135deg);
	  transform: rotate(-135deg);
	}

	
	.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:#e07338;
		color:#ffffff;
		padding:10px 10px;
		
		color:#ffffff;
		font-size:1em;
		
	}
	
	.button-line{
		border:1px solid #e07338;
		background-color:transparent;
		color:#e07338;
	}
	
	
	.button-white{
		background-color:#ffffff;

		color:#e07338;
	}

	
	
	.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: 1000;

	}

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

	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;
	}
	
	header{
		width:95%;
		max-width:1800px;
		margin:0 auto;
		padding-top:10px;
	}
	
	#footer-container{
		width:90%;
		max-width:1800px;
		margin:0 auto;
		padding:40px;
	}
	
	header h1 a {
		text-decoration: none;
	}
	nav a{
		text-decoration: none;
		-webkit-transition: .5s ease-in-out;
	 	 -moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
	}
	nav a:hover{
		font-weight: bold;
	}
	nav ul{
		display: flex;
		justify-content: space-between;
		list-style-type: none;
	}
	
	.header-contact-item img{
		width:15px;
		margin-left:10px;
		margin-right:10px;
	}
	
	#banner-image{
		background-image:url("../img/header.jpg");
		background-size:cover;
		background-repeat: no-repeat;
		background-position: center left;
	}
	
	#banner{
		background-color:#f2f5f6;
		height:500px;
	}
	
	#banner small, #contact-tekst small{ 
		color:#e9722e;
	}

	#banner-content-inner{
		padding:50px;
		max-width:500px;
		margin:0 auto;
	}
	
	.container{
		width:90%;
		max-width:1200px;
		margin:0 auto;
		padding:50px 0px
	}
	
	#troeven-container,#kenmerken-container{
		display:flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	
	.troef-item,.kenmerken-item{
		width:260px;
		border:1px solid #f2f5f6;
		padding:15px;

	}
	
	.troef-item img{
		width:260px;
		height:auto;
		margin-bottom:40px;
	}
	
	.kenmerken-item ul{
		list-style-type: none;
	}
	
	.kenmerken-item ul li{
		list-style-type: none;
		position: relative;
		
	}
	
	.kenmerken-item ul li:after{
		content:' ';
		background-color:#e9722e;
		height:10px;
		width:10px;
		border-radius: 5px;
		position:absolute;
		left:-20px;
		top:10px;	
	}
	
	
	#huurprijzen{
		background-color:#f2f5f6;
		text-align: center;
	}
	
	
	#prijzentabel{
		margin:0 auto;
		text-align: left;
		 width: 80%;
	}
	
	#prijzentabel th{
		background-color: #e9722e;
		padding:10px;
		width:300px;
		text-align: left;
	}
	
	#prijzentabel td{
		padding:10px;
		width:300px;	
		font-size:0.9em;
	}
	
	#prijzentabel tr:nth-child(even){
		background-color: #ffffff;

	}
	
	#contact-form input,#contact-form textarea{
		width:400px;
		margin-bottom:10px;
		font-size:0.9em;
	}

	#contact-form #frm-contact-privacy,#contact-form .button{
		width:auto;
	}
	
	footer{
		background-color:#292e34;
		color:#ffffff;
		min-height:50px;
	}

	footer ul{
		list-style-type: none;
	}
	
	#recent-items-container{
		width:80%;
		position:relative;
		margin-bottom:50px;
		margin:0 auto;
	}
	
	#galerij{
		background-color: #e9722e;
		text-align: center;
		color:#ffffff;
		padding-bottom:50px;
	}
	
	.prev,.next,.prev2,.next2{
		position: absolute;
		top:80px;
		left:-60px;
		z-index: 1900;
		width:50px;
		height: 50px;
		cursor:pointer;
			
	}
	
	.prev img,.next img,.prev2 img,.next2 img{
		height:50px;
		width:auto;
	}
	
	.prev img,.prev2 img{
		transform: rotate(180deg);
	}
	
	.next, .next2{
		right:-60px;
		left:auto;
	}
	
	.recent-item{
		
		width:200px;
		height:200px;
		display:inline-block;
		overflow:hidden;
		padding:10px;
		
	}
	
	.recent-item img{
		height:190px;
		width:190px;
		display:block;
		overflow:hidden;
		background-clip: #ffffff;
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
		overflow:hidden;
		opacity: 0.9;
	}
	
	.recent-item img:hover{
		opacity: 1;
	}
	
	#voorwaarden ul li{
		margin-bottom:20px;
		line-height:1.1em;
	}
	.form-error{
		display:block;
		color:#FF0000;
		padding:0px 0px 10px 0px;
		font-style: italic;
	}
	
}

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

	#cookiebanner{
			height:250px;
	
		padding:10px;
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  width: 200px;
		  line-height: 60px;
		  margin-left: -110px;
		  margin-top: -130px;
		  text-align: center;
		font-size:0.9em;

	}
	
	
	#banner{
		background-color:#f2f5f6;
		height:auto;
	}
	
	#cookiebanner-image{
		height:40px;
	}

	#cookiebanner-accept{
		top:55px;
		left:10px;
	}
	
	nav{
		display:none;
		padding-top:20px;
		width:100%;
		position: fixed;
		left:0px;
		top:0px;
		z-index: 900;
		overflow:scroll;
		background-color:#292e34;
		color:#ffffff;
		height:auto;
		text-align:center;
	}
	
	nav ul{
		display: block;
	
	}
	nav ul li{
		display:block;
	}
	
	 header>h1{
		font-size:1.5em;
	}
	
	#header-contact{
		text-align: center;
		
		padding:10px 0px
	}
	.header-contact-item{
		display: inline-block;
		
	}
	
	#footer-container{
		width:90%;
		max-width:1800px;
		margin:0 auto;
		padding:40px 5px;
	}
	
	
	#footer-1 h1{
		font-size:1.5em;
	}
	
	#trigger-nav{
		display:block;
	}
	
	#contact-form input,#contact-form textarea{
		width:80%;
		max-width:300px;
		margin-bottom:10px;
		font-size:0.9em;
	}
	
}






@media screen and (min-width: 1000px){		/* DIT IS VOOR DE STANDAARD BROWSERS */
	
	header{
		padding-top:50px;
		display:flex;
		justify-content: space-between;
	}
	
	header>div, header>h1, header>nav{
		display: inline-block;
	}
	
	
	
	header h1{
		position:relative;
		top:-4px;
		font-size:1.4em;
	}
	
	#header-contact{
		float:right;
		width:35%;
	}
	
	nav{
		font-size:0.85em;
	}
	
	
	#header-contact{
		font-size:0.8em;
	}
	
	
	.header-contact-item{
		float:right;
		line-height:1.8em;
	}

	.header-contact-item:first-of-type{
		margin-left:20px;
	}

	
	.header-contact-item .button{
		position:relative;
		top:-7Px;
	}
	
	.springkasteel-item-info-button{
		background-color:#ffffff;
	}
	
	#banner-image{
		width:45%;
		float:left;
		height:500px;
	}
	
	#banner-content{
		width:55%;
		float:right;
		height:500px;
	}
	
	#contact-tekst{
		float:left;
		width:30%;
		text-align: right;
	}
	
	#contact-form{
		float:right;
		width: 500px;
	}
	#footer-container{
		display:flex;
		justify-content: space-between;
	}
	#footer-container>div{
		display:inline-block;
	}
}


@media screen and (min-width: 1400px){		/* DIT IS VOOR DE STANDAARD BROWSERS */

	header h1{
		font-size:1.8em;
	}
	

	nav{
		font-size:1em;
	}
	
	#header-contact{
		font-size:1em;
	}
}