@charset "UTF-8";

/* (c) Wind en Regen				*/
/* made by jw						*/

body {
	font-family:		"Beiruti",sans;
    font-size:			1.0em;
	}

a:link {
  	text-decoration: 	none;
  	color:				#7f7f7f;
	}

a:visited {
  	text-decoration: 	none;
  	color:				#7f7f7f;
	}

a:hover {
  	font-weight: 		bold;
  	color:				#6d6d6d;
	}

.link_actief{
	font-weight:		bold;
	color:				#6d6d6d;"
	}

.logo {
    grid-area: 			logo;
    font-size:			1.3em;
	font-weight: 		bold;
	padding-left: 		20px;
	padding-top: 		20px;
  }

.logoheld {
    grid-area: 			logoheld;
    font-size:			1.3em;
	font-weight: 		bold;
	padding-left: 		20px;
	padding-top: 		20px;
  }

.logo_actief {
    grid-area: 			logo_actief;
    font-size:			1.3em;
	font-weight: 		bold;
	padding: 			20px;
	color:				#bcbcc4;
  }
  
.heldactief {
    grid-area: 			heldactief;
    font-size:			1.3em;
	font-weight: 		bold;
	padding-top: 			20px;
	padding-left:	10px;
	color:				#bcbcc4;
  }

.logoheldactief{
	grid-area: 			logoheldactief;
    font-size:			1.3em;
	font-weight: 		bold;
	padding: 			20px;
	color:				#bcbcc4;
}

.menu {
    grid-area: 			menu;
    line-height: 		1.5;
    padding-top:		20px;
  	}

.menuheld {
    grid-area: 			menuheld;
    line-height: 		1.5;
    padding-top:		20px;
  	}

 /* Dropdown Button */
.menuknop {
	font-family:		"Beiruti",sans;
	font-size:			1.0em;
	background-color: 	#ffffff01;
  	color: 				black;
  	padding-bottom: 	4px;
  	padding-left: 		20px;
  	border: 			none;
	}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: 	relative;
  	display: 	inline-block;  
  	padding: 	0px;
  
	}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  	display: 		none;
  	position: 		absolute;
  	padding-left: 	20px;  
  	z-index: 		1;
	}

/* Links inside the dropdown */
.dropdown-content a {
  	color: 				grey;
  	padding-left: 		0px ;
  	padding-bottom: 	1px;
  	padding-top:		1px;
  	text-decoration: 	none;
  	display: 			block;
  	color:				#7f7f7f;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	color:		black;
	}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: 	block;
	}



/* Change the background color of the dropdown button when the dropdown content is shown */
/*.dropdown:hover .menuknop {background-color: white;} */



.bg_transp {
    background-color:	#ffffff50;
  }

.tekst1 {
    grid-area: 			tekst1;
    padding: 			20px;
  }

.tekst2 {
    grid-area: 			tekst2;
    padding: 			20px;
  }

.held1 {
    grid-area: 			held1;
    padding: 			20px;
  }

.held2 {
    grid-area: 			held2;
    padding-top: 		20px;
    padding-left: 		10px;
  }

.held3 {
    grid-area: 			held3;
    padding-left:		10px;
    padding-right:		20px;
  }

.held4 {
    grid-area: 			held4;
    padding-left: 		20px;
  }

.held5 {
    grid-area: 			held5;
    padding-left: 		10px;
  }

.held6 {
    grid-area: 			held6;
    padding-left:		10px;
  }

.plaatje1 {
    grid-area: 			plaatje1;
    padding: 			20px;
  }

.plaatje2 {
    grid-area: 			plaatje2;
    padding: 			20px;
  }

.fotomenu {
    grid-area: 			fotomenu;
    padding-top:		12px;
  }
  
.fotomenuheld {
    grid-area: 			fotomenuheld;
    padding-top:		21px;
  }
  
.fotoknop{
	opacity:			0.6;
	height:				40px;
	padding-bottom: 	13px;
}
.fotoknop:hover{
	opacity: 			1;
}	

.heldknop{
	opacity:			0.6;
	height:				54px;
	padding-left:		6px;
	padding-bottom: 	13px;
}

.jw {
    display: 		grid;
    grid-gap: 		1em;
    grid-template-areas:
     	"logo"
     	"menu"
     	"tekst1"
     	"tekst2"
     	"plaatje1"
     	"plaatje2"
     	"fotomenu"
  }
  
 .jw_held {
    display: 		grid;
    grid-gap: 		1em;
    grid-template-areas:
     	"logoheld"
     	"logoheldactief"
     	"heldactief"
     	"menuheld"
     	"fotomenuheld"
     	"held1"
     	"held2"
     	"held3"
     	"held4"
     	"held5"
     	"held6"
  } 
  
.jw_vert2 {
    display: 		grid;
    grid-gap: 		1em;
    grid-template-areas:
     	"logo"
     	"menu"
     	"tekst1"
     	"tekst2"
     	"plaatje1"
     	"plaatje2"
     	"fotomenu"
  }

.jw_boom {
    display: 		grid;
    grid-template-areas:
     	"logo"
     	"menu"
     	"tekst1"
     	"tekst2"
     	"plaatje1"
     	"plaatje2"
     	"fotomenu"
  }

.jw_paard {
    display: 		grid;
    grid-template-areas:
     	"logo"
     	"menu"
     	"tekst_paard"
     	"tekst_kleur1"
     	"tekst_kleur2"
     	"tekst_kleur3"
     	"paard1"
		"paard2"
		"paard3"
		"paard4"
		"paard5"
		"paard6"
  }




/*LAPTOP*/
@media only screen and (min-width: 600px)   {
    .jw {
      	grid-gap: 				40px;
      	grid-template-columns: 	150px 300px 340px;
      	grid-template-rows: 	30px 320px 320px;
      	grid-template-areas:
      	"logo  logo_actief  ...."
      	"menu tekst1 plaatje1"
      	"fotomenu  tekst2  plaatje2";
      	max-width: 				600px;
    	}
    .jw_vert2 {
      	grid-gap: 				40px;
      	grid-template-columns: 	150px 340px 340px;
      	grid-template-rows: 	30px 460px 480px;
      	grid-template-areas:
      	"logo  logo_actief  ...."
      	"menu plaatje1 plaatje2"
      	"fotomenu  tekst1  tekst2";
      	max-width: 				600px;
    }
    .jw_boom {
      	grid-gap: 				40px;
      	grid-template-columns: 	168px 160px 700px;
      	grid-template-rows: 	30px 380px;
      	grid-template-areas:
      	"logo  logo_actief_boom fotomenu"
      	"menu .... ....";
      	max-width: 600px;
    }
    .jw_boom_oud {
      	grid-gap: 				0px;
      	grid-template-columns: 	150px 300px;
      	grid-template-rows: 	70px 70px 320px;
      	grid-template-areas:
      	"logo  logo_actief"
      	"menu ...."
      	"fotomenu ....";
      	max-width: 600px;
    }
    .jw_paard {
      grid-gap: 0px;
      grid-template-columns: 150px 60px 135px 135px 125px 145px 135px 135px 135px;
      grid-template-rows: 50px 166px 270px 270px 270px;
    }

    .jw_held {
      	grid-gap: 				40px;
      	grid-template-columns: 	48px 100px 200px 420px 280px;
      	grid-template-rows: 	30px 200px 60px 320px;
      	max-width: 				600px;
    	}

		.logoheld{
			grid-column-start: 	1;
  			grid-column-end: 	3;
  			grid-row-start: 	1;
  			grid-row-end: 		2;
		}
		.logoheldactief{
			grid-column-start: 	3;
  			grid-column-end: 	4;
  			grid-row-start: 	1;
  			grid-row-end: 		2;
		}
		.heldactief{
			grid-column-start: 	4;
  			grid-column-end: 	5;
  			grid-row-start: 	1;
  			grid-row-end: 		2;
		}
		.menuheld{
			grid-column-start: 	1;
  			grid-column-end: 	2;
  			grid-row-start: 	2;
  			grid-row-end: 		5;
		}
		.fotomenuheld{
			grid-column-start: 	2;
  			grid-column-end: 	3;
  			grid-row-start: 	2;
  			grid-row-end: 		5;
		}
		.held1{
			grid-column-start: 	3;
  			grid-column-end: 	4;
  			grid-row-start: 	2;
  			grid-row-end: 		3;
		}
		.held2{
			grid-column-start: 	4;
  			grid-column-end: 	5;
  			grid-row-start: 	2;
  			grid-row-end: 		3;
		}
		.held3{
			grid-column-start: 	5;
  			grid-column-end: 	6;
  			grid-row-start: 	3;
  			grid-row-end: 		4;
		}
		.held4{
			grid-column-start: 	3;
  			grid-column-end: 	4;
  			grid-row-start: 	4;
  			grid-row-end: 		5;
		}
		.held5{
			grid-column-start: 	4;
  			grid-column-end: 	5;
  			grid-row-start: 	4;
  			grid-row-end: 		5;
		}
		.held6{
			grid-column-start: 	5;
  			grid-column-end: 	6;
  			grid-row-start: 	4;
  			grid-row-end: 		5;
		}

	.jw_serie {
      	grid-gap: 				40px;
      	grid-template-columns: 	168px 270px 270px 270px;
      	grid-template-rows: 	30px 200px 200px 200px;
      	grid-template-areas:
      	"logo  logo_actief fotomenu"
      	"menu .... ....";
      	max-width: 600px;
    }




.paard1{
	width:				250px;
	height:				250px;
	padding-right:		20px;
	padding-bottom:		20px;
	grid-column-start: 	3;
  	grid-column-end: 	5;
  	grid-row-start: 	3;
  	grid-row-end: 		4;
  	cursor: 			nesw-resize;
	}

.paard2{
	width:				250px;
	height:				250px;
	padding-right:		20px;
	padding-bottom:		20px;
	grid-column-start: 	5;
  	grid-column-end: 	7;
  	grid-row-start: 	3;
  	grid-row-end: 		4;
  	cursor: 			nesw-resize;
	}

.paard3{
	width:				375px;
	height:				250px;
	padding-right:		20px;
	padding-bottom:		20px;
	grid-column-start: 	7;
	grid-column-end: 	10;
  	grid-row-start: 	3;
  	grid-row-end: 		4;
  	cursor: 			nesw-resize;
	}

.paard4{
	width:				375px;
	height:				250px;
	padding-right:		0px;
	padding-bottom:		20px;
	grid-column-start: 	3;
  	grid-column-end: 	6;
  	grid-row-start: 	4;
  	grid-row-end: 		5;
  	cursor: 			nesw-resize;
	}

.paard5{
	width:				520px;
	height:				250px;
	padding-right:		20px;
	padding-bottom:		20px;
	grid-column-start: 	6;
  	grid-column-end: 	10;
  	grid-row-start: 	4;
  	grid-row-end: 		5;
  	cursor: 			nesw-resize;
	}

.tekst_paard{
	padding-top: 		40px;
	width:				300px;
	grid-column-start: 	3;
  	grid-column-end: 	5;
  	grid-row-start: 	2;
  	grid-row-end: 		3;
	}

.tekst_kleur1{
	padding-top: 		40px;
	width:				250px;
	grid-column-start: 	3;
  	grid-column-end: 	4;
  	grid-row-start: 	2;
  	grid-row-end: 		3;
	}

.tekst_kleur2{
	padding-top: 		40px;
	width:				250px;
	grid-column-start: 	5;
  	grid-column-end: 	6;
  	grid-row-start: 	2;
  	grid-row-end: 		3;
	}

.tekst_kleur3{
	padding-top: 		40px;
	width:				250px;
	grid-column-start: 	7;
  	grid-column-end: 	9;
  	grid-row-start: 	2;
  	grid-row-end: 		3;
	}

.logo {
	grid-column-start: 	1;
  	grid-column-end: 	2;
  	grid-row-start: 	1;
  	grid-row-end: 		2;
  	}

.logo_actief {
	grid-column-start: 	2;
  	grid-column-end: 	4;
  	grid-row-start: 	1;
  	grid-row-end: 		2;
  	}

.logo_actief_boom {
	grid-column-start: 	2;
  	grid-column-end: 	4;
  	grid-row-start: 	1;
  	grid-row-end: 		2;
  	padding-left:		-20px;
  	padding-top:		20px;
  	font-size:			1.3em;
	font-weight: 		bold;
	color:				#A57070;
	font-family:		"Beiruti",sans;
  	}

.logo_actief_paard {
	grid-column-start: 	3;
  	grid-column-end: 	5;
  	grid-row-start: 	1;
  	grid-row-end: 		2;
  	padding-left:		0px;
  	padding-top:		20px;
  	font-size:			1.3em;
	font-weight: 		bold;
	color:				#bcbcc4;
		font-family:		"Beiruti",sans;
  	}

.menu_paard {
    line-height: 		1.5;
	padding-top: 		40px;  
	padding-left:		0px;  
	grid-column-start: 	1;
  	grid-column-end: 	3;
  	grid-row-start: 	2;
  	grid-row-end: 		6;
  	}

}

.fotoheld{
	width:				200px;
	height:				200px;
}

.fotoheld_liggend{
	width:				420px;
	height:				280px;
	cursor: 			nesw-resize;
}

.fotoheld_vierkant{
	width:				280px;
	height:				280px;
	cursor: 			nesw-resize;
}

.foto_liggend_medium{
	width:				480px;
	height:				320px;
	cursor: 			nesw-resize;
}

.foto_liggend_groot{
	width:				1050px;
	height:				700px;
	margin-left:		200px;
  	margin-top: 		60px;
 	outline-style:		solid;
	outline-color:		#FFFFFF; 
	outline-width:		500px; 
  	position: 			absolute;
  	display: 			none;
  	z-index: 			1;
}

.foto_vierkant_medium{
	width:				320px;
	height:				320px;
	cursor: 			nesw-resize;
}

.foto_vierkant_groot{
	width:				700px;
	height:				700px;
	margin-left:		200px;
  	margin-top: 		60px;
 	outline-style:		solid;
	outline-color:		white; 
	outline-width:		500px; 
  	position: 			absolute;
  	display: 			none;
  	z-index: 			1;
}

.foto_pano_groot{
	width:				1050px;
	height:				500px;
	margin-left:		200px;
  	margin-top: 		60px;
 	outline-style:		solid;
	outline-color:		white; 
	outline-width:		500px; 
  	position: 			absolute;
  	display: 			none;
  	z-index: 			1;
}


.foto_staand_medium{
	width:				320px;
	height:				480px;
}






.gedicht{
	font-family:	'Spectral';
	font-size:		0.8em;
	color:			#575c78;
	line-height: 	1.25;
	padding-left:	0px;
}

li::marker {
  	color: 				#575c78;
}



/* TELEFOON*/          
@media only screen and (max-width: 600px)  {
  	.jw {
    	grid-gap: 				0px;
    	grid-template-columns: 	60px 270 px 270px;
    	grid-template-rows:		24px 40px auto auto auto auto;
    	}
    	
  	.jw_vert2 {
    	grid-gap: 				0px;
    	grid-template-areas:
    	"logo"
    	"logo_actief"
    	"menu"
    	"plaatje1"
    	"tekst1"
    	"plaatje2"
    	"tekst2";
    	}
	.jw_boom {
    	grid-gap: 				0px;
    	grid-template-columns: 	102px;
    	grid-template-areas:
    	"logo"
    	"menu";
    	}
	.dropdown-content {
		background-color: white;
		width: 120px;
	}
  	.foto_liggend_medium {
		max-width:				330px;
		max-height:				220px;
		}
	.plaatje1{
		grid-column-start: 	1;
  		grid-column-end: 	4;
  		grid-row-start: 	3;
  		grid-row-end: 		4;
		}	
	.tekst1 {
    	padding: 				20px;
    	padding-top:			0px;
    	padding-bottom:			0px;
    	grid-column-start: 	1;
  		grid-column-end: 	4;
  		grid-row-start: 	4;
  		grid-row-end: 		5;
    	}
    .plaatje2{
		grid-column-start: 	1;
  		grid-column-end: 	4;
  		grid-row-start: 	5;
  		grid-row-end: 		6;
		}	
	.tekst2 {
    	padding-left: 			20px;
    	padding-top:			0px;
    	padding-bottom:			0px;
    	grid-column-start: 	1;
  		grid-column-end: 	4;
  		grid-row-start: 	6;
  		grid-row-end: 		7;
    	} 
	.jw_paard {
      	grid-gap: 				0px;
      	grid-template-columns: 	250px ;
      	grid-template-rows: 	50px 260px 160px 270px 270px 270px 270px 270px 270px;
      	}
	.logo {
		grid-column-start: 	1;
  		grid-column-end: 	2;
  		grid-row-start: 	1;
  		grid-row-end: 		2;
  		}
	.logo_actief {
		grid-column-start: 	2;
  		grid-column-end: 	3;
  		grid-row-start: 	1;
  		grid-row-end: 		2;
  		}
	.menu {
  		grid-column-start: 	1;
  		grid-column-end: 	2;
  		grid-row-start: 	2;
  		grid-row-end: 		3;
  		justify-self: right;
  		}
	.menu_paard {
    	line-height: 		1.5;
		padding-top: 		40px;  
		paddint-left:		20px;  
		grid-column-start: 	1;
  		grid-column-end: 	2;
  		grid-row-start: 	2;
  		grid-row-end: 		3;
  		}   
	.tekst_paard{
		padding-top: 		40px;
		padding-left:		20px;  
		width:				300px;
		grid-column-start: 	1;
  		grid-column-end: 	2;
  		grid-row-start: 	3;
  		grid-row-end: 		4;
  		}      
    .paard1{
		width:				250px;
		height:				250px;
		padding-left:		10px;  
		padding-right:		20px;
		padding-bottom:		20px;
		grid-column-start: 	1;
  		grid-column-end: 	2;
  		grid-row-start: 	4;
  		grid-row-end: 		5;
  		}
	.paard2{
		width:				250px;
		height:				250px;
		padding-right:		20px;
		padding-bottom:		20px;
		padding-left:		10px;  
		grid-column-start: 	1;
  		grid-column-end: 	2;
  		grid-row-start: 	5;
  		grid-row-end: 		6;
  		}
	.paard3{
		width:				375px;
		height:				250px;
		padding-right:		20px;
		padding-bottom:		20px;
		padding-left:		10px;  
		grid-column-start: 	1;
		grid-column-end: 	2;
  		grid-row-start: 	6;
  		grid-row-end: 		7;
  		}
	.paard4{
		width:				250;
		height:				250px;
		padding-right:		20px;
		padding-bottom:		20px;
		padding-left:		10px;  
		grid-column-start: 	1;
  		grid-column-end: 	2;
  		grid-row-start: 	7;
  		grid-row-end: 		8;
		}
	.paard5{
		width:				375px;
		height:				250px;
		padding-right:		20px;
		padding-bottom:		20px;
		padding-left:		10px;  
		grid-column-start: 	1;
  		grid-column-end: 	2;
  		grid-row-start: 	8;
  		grid-row-end: 		9;
  		}
	.paard6{
		width:				250px;
		height:				250px;
		padding-right:		20px;
		padding-bottom:		20px;
		padding-left:		10px;  
		grid-column-start: 	1;
  		grid-column-end: 	2;
  		grid-row-start: 	9;
  		grid-row-end: 		10;
  		}  
  }