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

	html{
		margin:0 auto;
		background-color:#4aac34;
		color:#000000;
		font-family: "Poppins", sans-serif;
		margin:0px;
		padding:0px;
		position:relative;
		height:100%;
	}
	
	body{
		height:100%;
	}
	
	.no-js #loader { display: none;  }
	
	.js #loader { display: block; position: absolute; left: 100px; top: 0; }
	
	
	

	input,textarea{
		border:0px;
		border-bottom: 1px solid #000000;
		font-weight:lighter;
		padding:5px 0px 10px 0px;
		font-size:0.9em;
		
	}

	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;
		border-radius:5px;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
        outline:none;
		background-color:#4aac34;
		border:1px solid #ffffff;
		color:#ffffff;
		padding:8px;
		border-radius:0px;
	}

	.button:hover{
		opacity: 0.8;
		outline:none;
	}

	.button:active{
		position:relative;
		top:1px;
		outline:none;
	}

	#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:#ad2100;
		border-radius:12px;
		color:#ffffff;
		padding:8px 15px;
		font-size:10px;
		outline:none;

	}



	.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.8em;
		margin-bottom:20px;
	}


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

	h1{
		font-size:2.4em;

	}

	h2{
		font-size:1.8em;
		color:#4aac34;
		font-weight:lighter;
	}

	h3{
		font-size:1.3em;
	}

	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{

	}


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

	#cookiebanner{
		height:310px;
		position:fixed;
		color:#000000;
		width:230px;
		right:20px;
		top:20px;
		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 a{
		color:inherit;
	}
	
	#cookiebanner-header {
		padding:8px 5px 0px 5px;
	}
	
	#cookiebanner-header h3{
		margin-bottom:7px;
		color:#000000;
		text-transform:uppercase;
		font-weight:bold;
		font-size:1.1em;
	}
	
	#cookiebanner-image img{
		width:100%;
		height:auto;
	}


	#cookiebanner-tekst{
		padding:10px;
		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:#ad2100;
		color:#ffffff;
		font-size:11px;
		border-radius:10px;
		font-size:12px;
		padding:5px;
		margin-bottom:0px;
	}
	#cookiebanner-accept button:hover{
		background-color:#d72900;
	}
	
	#index-container{
		background-color:#ffffff;
	}
	
	#index-container-inner{
		width:80%;
		max-width: 1400px;
		margin:0 auto;
		background-color:#ffffff;
		
	}
	
	#index-header{
		height:100px;
		padding-top:50px;
	}
	
	#index-header-logo{
	
	}
	
	#index-header-logo img{
		height:50px;
		width:auto;
	}
	
	#index-header-nav{
		padding-top:30px;
	}
	
	#index-header-nav a{
		color:inherit;
		display: inline-block;
  		position: relative;
		text-decoration: none;
		margin-left:20px;
	}
		
	#index-header-nav a::after{
		 content: '';
		  position: absolute;
		  width: 100%;
		  transform: scaleX(0);
		  height: 1px;
		  bottom: -2px;
		  left: 0;
		  background-color: #000000;
		  transform-origin: bottom right;
		  transition: transform 0.25s ease-out;
	}
	
	#index-header-nav a:hover::after{
		 transform: scaleX(1);
  		transform-origin: bottom left;
	}
	
	
	
	.index-content-item{
		background-size: cover;
		background-repeat: no-repeat;
		width:30%;
		max-width:350px;
		height:500px;
		text-align:center;
		-webkit-transition: .5s ease-in-out;
	 	-moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
	}
	
	.index-content-item img{
		width:80%;
		height:auto;
		position:relative;
		top:210px;
	}
	
	
	#index-content-item-vde{
		background-image:url("../img/bannerindex-vde.png");
			cursor:pointer;

	}
	
	#index-content-item-wovagro{
		background-image:url("../img/bannerindex-wovagro.png");
		cursor:pointer;
		background-position: bottom center;

	}
	
	
	#index-content-item-vde:hover{
		box-shadow: 0px 0px 15px #000000;

	}
	
	#index-content-item-wovagro:hover{
		box-shadow: 0px 0px 15px #000000;

	}
	
	
	#index-content-item-vde:active{
		box-shadow: none;
		position:relative;
		top:1px;

	}
	
	#index-content-item-wovagro:active{
		box-shadow: none ;
		position:relative;
		top:1px;

	}
	
	#index-content-item-tekst{
		text-align: left;	
		font-size:0.85em;
			height:auto;
	}
	
	#index-content-item-tekst h2{
		font-size:1.4em
	
	}
	
	#index-content-item-tekst a{
		font-weight:bold;
		color:#4aac34;
	}
	
	#index-content-item-tekst img{
		height:13px;
		width:auto;
		position:relative;
		top:0;
		margin-right:10px;
	}
}





@media screen and (max-width: 1000px)  {		/* DIT IS VOOR DE MOBIELE BROWSERS */
	#cookiebanner{
		height:auto;
	}

	#cookiebanner-accept{
		top:55px;
		left:10px;
	}
	
	#cookiebanner-accept button{
		margin-bottom:20px;
	}
	
	.index-content-item{
		background-size: cover;
		background-repeat: no-repeat;
		width:80%;
		margin:30px auto;
		max-width:800px;
	
	}
	
	#index-header{
		text-align:center;
	}
	
	#index-header-nav a{
		color:inherit;
		display: inline-block;
  		position: relative;
		text-decoration: none;
		margin:20px;
	}
}




@media screen and (min-width: 1000px)  {		/* DIT IS VOOR DE STANDAARD BROWSERS */
	#index-header-logo{
		float:left;
	}
	
	#index-header-nav{
		float:right;
	}
	
	#index-content{
		display: flex;
		justify-content: space-between;
		padding-bottom:100px;
		
	}
}