/* The sidebar menu */
.sidenav {
  height: calc(100% - 80px - 80px ); /* 80 hoogte navigatie ** 62 hoogte footer met padding plus iets voor visueel effect */
  width: 200px; /* Set initial width of the sidebar, set to 40px wit JS */
  position: fixed;	/*	Fixed Sidebar (stay in place on scroll) */
  z-index: 2; /* Stay on top */
/*  top: 80px; /* Stay at the top */
  left: 0;
  background-image: linear-gradient(#472214, rgba(130,73,46,0.9), rgba(130,73,46,0.7), rgba(255,255,255,0.0));
/*  background-image: linear-gradient(#472214, rgba(130,73,46,0.6), rgba(255,255,255,0.0));			/*		#884212	#763407
  background-image: linear-gradient(rgba(135,103,81,0.3), white);		*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  	
  	-webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
	transition: all 0.3s;
}
.sidenav span {
  	text-shadow: 2px 2px 4px #000000;
	color: gold;
	display:inline-block;
	padding:0px 8px 4px 6px;
	cursor: pointer;	height: 100%;	
	font-size: 2em;
} 

.sidenav div:first-of-type {
	display: flex;
	justify-content: space-between;	
  	align-items: center;
	flex-direction: row;
	padding-right: 10px;
	width: 100%;
}

.sidenav div:first-of-type button {
	text-shadow: 2px 2px 4px #000000;
	color: gold;
	display:none;
	padding:0px 8px 4px 6px;
	border: none;
	background-color: transparent; 	
	font-size: 2em;
	cursor: pointer;
}

#closeButton {
	display:inline-block;
}

.sidenav div:last-of-type {
	display: flex;
	flex-direction: column;
	padding-right: 10px;
}

.container {
  overflow: hidden;
}

.filterDiv {	
	display: none;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
	border: none;
	outline: none;
	padding: 12px 16px;	
	background-color: transparent;		
	cursor: pointer;
	text-align: left;
	margin-left: 30px;
  	font-size: 1em;
	font-weight: bold;
	color:white;	
	text-shadow: 0px 0px 2px red, 1px 1px 4px black;	
}

/* Add a light grey background on mouse-over */
.btn:hover:not(.active) {		
	background-color:rgba(128,64,32,0.3);	
	text-shadow: 0px 0px 2px red, 1px 1px 4px black, 0px 0px 30px #AA5511;	
	font-weight: bold;
}

/* Add a dark background to the active button */
.btn.active {		
/*  background-color:rgba(0,0,0,0.1);	*/
	color: gold;
}

/* hier begint mijn origineel   */


section.paginaSection {
	display: flex;
	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	margin-left: 40px;
}

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	width: 100%;
}
section  section {		/*	conflict met filterDiv display: none
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;		*/
	margin: 0;
	padding: 0;
	width: 100%;
}
.articleContainer {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-start;
	flex-wrap: wrap;	
}

article p {
	margin-bottom: 12px;
	margin-top: 12px;
}		
figure {	
	flex: 2;
	padding: 0;
	margin: 0;			
	position: relative;
	top: 0;
	left: 0;	
}
article div {
	flex: 2;	
}
img.product {
	max-width: 100%;
	height: auto;
	position: relative;
	top: 0;
	left: 0;	
}
img.logo {
	position: absolute;
	top: 10px;
	left: 20px;	
	max-width: 30%;	
}

section  section h1 {
	font-size: 1.5em;	  
	color: gold;
	text-shadow: 0px 0px 2px red, 1px 1px 4px black; 
}
.articleContainer h2 {
	font-size: 1.1em;	
}

article {
	display: flex;
}
/*
p {
	text-align: justify;
}		*/

p.schuin {
	font-style: italic;
	color: dimgrey;
}

.productAvailable {
	color: red;
}

.priceInfo {
	font-size: 1.5rem;
	display: flex;
	flex-direction: row;
  	justify-content: flex-start;
  	align-items: baseline;
}
.priceInfo sup {
	font-size: 0.9rem;
}
.priceInfo span span {
	font-size: 0.9rem;
}

/*	show more opmaak				*/
	
.read-more-ingredients-state {
	display: none;	
}	
.ingredientsExplain {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.read-more-ingredients-label {		
}

.read-more-ingredients-label:after {
	content: "";
	border: solid grey;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	margin-right: 5px;
}
	
.read-more-ingredients-state ~ .ingredientsExplain .read-more-ingredients-label:after {		
/*	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);	*/
/*		zorgt ervoor dat vinkje op dezelfde hoogte blijft	*/  
	
	-moz-transform: rotate(45deg) translate(0px, -5px);
	-ms-transform: rotate(45deg) translate(0px, -5px);
	-o-transform: rotate(45deg) translate(0px, -5px);
	-webkit-transform: rotate(45deg) translate(0px, -5px);
	transform: rotate(45deg) translate(0px, -5px);

}

.read-more-ingredients-state:checked ~ .ingredientsExplain .read-more-ingredients-label:after {
	-moz-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
		/*		zorgt ervoor dat vinkje op dezelfde hoogte blijft
  		transform: rotate(-135deg) translate(0px, 5px);
  		-webkit-transform: translate(0px, 5px) rotate(-135deg);		*/   		
}		
.read-more-ingredients-container p {
	display: none;
}
.read-more-ingredients-container p::first-line {
	display: block;		
}
.read-more-ingredients-state:checked ~ .read-more-ingredients-container p {
	display: block;	
}

@media  (max-width:600px) {		
	article {
	flex-direction: column;
  		justify-content: center;
  		align-items: center;	
  		width: 100%;
	}
	article div, article div div {
		width: 100%;	
	}
	figure {	
		flex: 2;
		display: flex;
		flex-direction: column;
  		justify-content: center;
  		align-items: center;	
		padding: 0;
		margin: 0;				
	}
	img {
	max-width: 80%;
	height: auto;
	}

	
}


@media  (min-width:601px) {		
	article {
		flex-direction: row;
  		justify-content: center;
  		align-items: flex-start;	
  		width: 400px;
  		margin-left: 15px;
  		margin-right: 15px;
	}
	.categoriesExplain {
		display: flex;
		flex-direction: row;
  		justify-content: flex-start;
  		align-items: baseline;	
	}
	section  section h1 {
		margin-left: 160px;
		margin-right: 50px;
	}
	.sidenav {
		  top: 300px;
	}

}
@media  	(min-width: 601px) and (max-width: 1000px) {
	.sidenav {
		  top: 200px;
	}
	
}

@media  	(min-width: 601px) and (max-width: 1300px) {
	article {
		flex-direction: row;
  		justify-content: center;
  		align-items: flex-start;	
  		width: 300px;		/*	background-color: pink;		*/
  		margin-left: 10px;
  		margin-right: 10px;
	}


}

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
	.sidenav:hover  {		
  		min-width: 200px;
		transition: 0.3s;
		background-image: linear-gradient(#472214, rgba(130,73,46,0.9), rgba(130,73,46,0.7), rgba(255,255,255,0.0));	
	}
}

/* smartphones, touchscreens */		
@media (hover: none) and (pointer: coarse) {	
#closeButtonTouchScreen, #openButtonTouchScreen {
	display: inline-block;
}
#closeButton {
	display: none;
}

.sidenav span {
	display: none;	
} 
.read-more-ingredients-label:after {
	border: solid lightgrey;
	border-width: 0 6px 6px 0;
}


}