section.paginaSection {
	display: flex;
	flex-direction: column;
}

figure {	
	padding: 0;
	margin: 0 0 20px 0;				
}
/*
figcaption {
	font-style: italic;
}		*/
.suggesties {
	border-top: 5px dotted #DDD;
}
h3 {
	color: #7e452b;
}
h4 {
	color: #955537;
	font-style: italic;
}

.modal > div > figure > figcaption h2 {
	font-size: 1.1em;
}
p.schuin {
    font-style: italic;
    color: dimgrey;
}
.productAvailable {
    color: red;
}



@media  (max-width:600px) {
	article {
		display: flex;
		flex-direction: column;		
  		justify-content: center;
  		width: 100%;
	}	/*
	.naamFotos, .ingredientenBereiding {	
		display: flex;
		flex-direction: column;
	}
	.algemeen, .ingredienten {
		flex: auto;
	}
	.fotos, .bereiding {
		flex: initial;
	}		
			*/
	.fotos {
		display: flex;
		flex-direction: row;
  		justify-content: center;
  		align-items: center;	
	}

	
	.fotos img {
		max-height: 40vh;
	}
	/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 11; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(220,220,220); /* Fallback color */
  background-color: rgba(240,240,240,0.9); /* Black w/ opacity */
}
.modal > div {
		display: flex;
  		flex-direction: column-reverse;
  		justify-content: center;
  		align-items: center;
}
.modal > div > figure {
		display: flex;
  		flex-direction: column;
  		justify-content: center;
  		align-items: center;
  		background-color: white;
  		width: 80%;
  		border-radius: 5px;
  		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  		max-height: calc(98vh - 150px);
}
.modal > div > figure > img {
		height: 75vh;
}
.modal > div > figure > figcaption {
	margin: 20px;
}

/* The Close Button */
.close {			
	text-shadow: 2px 2px 4px #000000;			
	color: gold;		/*
  position: absolute;
  top: 15px;
  right: 35px;		*/
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  background-image: radial-gradient(circle, silver, rgba(220,220,220,0.0), rgba(220,220,220,0.0));
  height:50px;
  width: 50px; 
  text-align: center;
  align-self: flex-end;	
	cursor: pointer;	
}
	
}

@media  (min-width:601px) {
	section.paginaSection {		
  		align-items: center;			
	}
	article {
		display: flex;
		flex-direction: column;		
  		justify-content: center;
  		width: 80%;
	}
	.naamFotos, .ingredientenBereiding {	
		display: flex;
		flex-direction: row;
	}
	.algemeen, .ingredienten {
		flex: auto;
		min-width: 300px;
		margin-right: 20px;
	}
	.fotos, .bereiding {
		flex: initial;
		max-width: 70%;
	}		/*
	.fotos, .bereiding {
		flex: initial;
		max-width: 70%;
	}				*/
	.ingredienten {
	/*	background-color: #EEE;	*/
	}
	.naamFotos {
		max-height: 40vh;
	}
	.fotos {
		display: flex;
		flex-direction: row;
  		justify-content: center;
  		align-items: center;	
	}
	.fotos > img {
		max-height: 100%;	
		cursor: pointer;	
	}
	
	/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 11; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(220,220,220); /* Fallback color */
  background-color: rgba(240,240,240,0.9); /* Black w/ opacity */
}
.modal > div {
		display: flex;
  		flex-direction: row;
  		justify-content: center;
  		align-items: center;
}
.modal > div > figure {
		display: flex;
  		flex-direction: row;
  		justify-content: center;
  		align-items: center;
  		background-color: white;
  		width: 50%;
  		border-radius: 5px;
  		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.modal > div > figure > img {
		height: 65vh;
}
.modal > div > figure > figcaption {
	margin: 50px;
}

/* The Close Button */
.close {			
	text-shadow: 2px 2px 4px #000000;			
	color: gold;		/*
  position: absolute;
  top: 15px;
  right: 35px;		*/
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  background-image: radial-gradient(circle, silver, rgba(220,220,220,0.0), rgba(220,220,220,0.0));
  height:50px;
  width: 50px; 
  text-align: center;
  align-self: flex-start;	
	cursor: pointer;	
}

}

@media  	(min-width: 601px) and (max-width: 1000px) {
	article {
		display: flex;
		flex-direction: column;
  		justify-content: center;		
  		width: 100%;
	}
	.naamFotos {
		max-height: 30vh;
	}
	.algemeen, .ingredienten {
		flex: auto;
		min-width: 200px;
		margin-right: 10px;
	}
	.fotos {
		flex: initial;
		max-width: 50%;
	}
	
}

/* smartphones, touchscreens */		
@media (hover: none) and (pointer: coarse) and (orientation:landscape) {	
.modal > div > figure {
  		width: 80%;
}
.modal {
  		padding-top: 5px;
}

}