/*-----------------------------------------------------------*/
  /* INHOUD */
						/*  regel 09:  Account contact, registreren  */ 
						/*  regel 93:  Review in aside               */
						/*  regel 160: Mediaqueries 768, 1024, 1280  */
/*----------------------------------------------------------*/

#hideMe p { /* text voor als js uit staat */
	width: 80%;
	font-size: 0.8rem;
	text-align: center;
	line-height: 1.8em;
	background-color: #ededed;
	border: 1px solid #cdcdcd;
	padding: 1rem;
	margin: 0 auto; }

/*opmaak inhoud voor producten gegenereerd door js/json */
#products, #recipes {
	display: flex;
	flex-flow: column nowrap; }

#productsContainer, #recipesContainer{
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	order: 2; }

#productsContainer a, #recipesContainer a { 
	border: thin solid #e7e7e7;
	border-radius: 3px;
	margin: 1.3rem 0;	
	padding: 1.5rem 1rem; }

#productsContainer a:hover,
#recipesContainer a:hover { box-shadow: 0px 6px 8px rgba(0,0,0,0.35); }

aside fieldset{ 
	width: 100%;
	display: flex;
	flex-flow: column;
	justify-content: space-around; }

/* aside header */
label {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--orange_3);
	padding: 0.5rem 0;
	display: block; }

/* aside sub items header */
label, aside div { 
	font-weight: 600;
	color: var(--blue_3);
	text-transform: uppercase;
	letter-spacing: 0.03rem;
	padding: 0.3rem;
	flex-basis: 50%; }

/* terug naar lowecast */
aside div       { text-transform: inherit; }
aside div input { margin-right: 0.5rem; }

/* sterretjes */
span.fa {
	font-size: 1.3rem;
  color: var(--orange_3);
	padding: 1rem 0.5rem 0 0; }

/* prijs */
.rating span ~ h3 { text-align: left; }

p.lijst { font-weight: 500; line-height: 1.6; max-height: 132px; } 
/* tijdelijke oplossing voor hoogte */


/* 8per . 30min . vlees enz.. */
.recipeDetail {
	font-size: 0.9rem;
	color: var(--blue_3);
	padding: 0.5rem 0;
	margin: 0.5rem 0;
	border-top: 1px solid var(--orange_5);
	border-bottom: 1px solid var(--orange_5); }

/*headers uitlijning */
#recipesContainer a > h2 { 
	min-height: 56px; }


/*--------BOEK REVIEW----------------------------*/
.reviews { flex-flow: column wrap; }

.card.reviews { 
	flex: 0 0 40%; 
	border: none;  
	cursor: pointer;
	box-shadow: none; }

.card.reviews:first-child { border-bottom: 1px solid var(--blue_5); }

/* aside review gedeelte */
.reviewNaw { text-transform: uppercase; }

.reviewNaw, .reviewRating, .reviewList {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	margin-bottom: 1rem; }

.reviewNaw li a, 
.reviewRating li a, 
.reviewList   { display: block; }
.reviewNaw li { padding: 0 1rem; border-right: 2px solid var(--blue_3); }
.reviewNaw li:first-child { text-align: left; padding-left: 0; }
.reviewNaw li:last-child  { border-right: none; padding-right: 0; }

.reviewNaw li a {
	width: 100%;
	font-weight: 700;
	color: var(--blue_3); }

/* sprite voor sterretje */
.reviewRating li a {
	font-size: 0;
	width: 25px;
	height: 26px;
	background-image: url(../images/logo-icons/sprite.svg);
	background-repeat: no-repeat;
	background-size: 9rem;
	margin-right: 0.4rem; }

/* Sprite ratings */
.full  { background-position: -2px -63px; }
.half  { background-position: -32px -63px; }
.empty { background-position: -62px -63px; }

/* sterretje */
.rating.full:hover  { background-position: -2px -90px; }
.rating.half:hover  { background-position: -32px -90px; }
.rating.empty:hover { background-position: -62px -90px; }

.reviewList li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-right: 0.5rem; }

.reviewList li a { color: var(--back_1); }

/* plus/min punten review */
.reviewList { columns: 2; line-height: 2; }
.reviewList li:nth-of-type(n+1)::before { content: '\f055'; color: var(--blue_3); } 
.reviewList li:nth-of-type(n+4)::before { content: '\f056'; color: var(--orange_3); }

aside.review h1 { margin-bottom: 1rem; }


/*===============================================*/
   /* MEDIA QUERIE 768 */
/*===============================================*/
@media screen and (min-width: 768px){

	aside fieldset {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around; }
	
	#productsContainer,	#recipesContainer     {	justify-content: space-around; order: 2; }
	#productsContainer a, #recipesContainer a { width: 48%; }
	
	
/*--------BOEK REVIEW--------------------------------------------*/
	.card.reviews:first-child { border: none; }

	aside.review { flex-flow: column nowrap; justify-content: space-between; }
	aside.review div { display: flex; justify-content: space-around; }
	
	
} /* eind 768 */


/*===============================================*/
   /* MEDIA QUERIE 1024 */
/*===============================================*/
@media screen and (min-width: 1024px){

	aside { order: 1; }
	
	aside fieldset { flex-flow: column nowrap; }
	fieldset > div { margin-bottom: 2rem; }
	
	#products, #recipes { flex-flow: row nowrap; }
	#productsContainer,	#recipesContainer { justify-content: space-around; order: 2; }
	
		
/*--------BOEK REVIEW--------------------------------------------*/
	aside + article > article .card { flex: 0 0 48%; }
	
	.reviewList      { columns: 1; }
	aside.review     { justify-content: flex-start; }
	aside.review div { display: block; }
	
	/* voor order ivm js file waarbij het is omgedraaid */
	.positie { order: 2; }
	
} /* eind 1024 */


/*===============================================*/
   /* MEDIA QUERIE 1280 */
/*===============================================*/
@media screen and (min-width: 1280px){
	
	#productsContainer a, #recipesContainer a { width: 32%; }
	
	
/*--------BOEK REVIEW--------------------------------------------*/
	aside + article > article .card { flex: 0 0 32%; }
	
	
} /* eind 1280 */