@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,700&family=Raleway:wght@300;400;500;700;800&display=swap');
/* font-family: 'Merriweather', serif; font-family: 'Raleway', sans-serif; */

/*----------------------------------------------------------------*/
  /* INHOUD */
						/*  regel 12:  Kleurschema, Fonts, Basis elementen */ 
						/*  regel 102: Hovers                              */
						/*  regel 125: Video                               */
						/*  regel 198: Cards, Inhoudeleijke varianten      */
						/*  regel 280: Aside Items                         */
						/*  regel 325: Pager                               */
						/*  regel 343: Footer                              */
						/*  regel 409: Hide/Show Cards in VP               */
						/*  regel 419: toTop button                        */
						/*  regel 442: Page Not Found 404                  */
/*---------------------------------------------------------------*/

/*--------KLEURSCHEMA DONKER > LICHT------------------------*/
:root {
	/*--blue_1: #003C4D: /* #003F50 is te licht op blauwe achtergrond in footer */
  --blue_1: #003948;
  --blue_2: #005369;
  --blue_3: #418C9F; /* meest gebruikt */
  --blue_4: #71A9B7;
  --blue_5: #A0C5CF;

  --orange_1: #7D3F05;
  --orange_2: #A6530E;
  --orange_3: #D98A3F; /* meest gebruikt */
  --orange_4: #E5B180;
  --orange_5: #F2D8BF;

  --black_1: #000000;
  --black_2: #363636;
  --gray_1:  #808080;
  --gray_2:  #c0c0c0;
  --gray_3:  #e6e6e6; /* extra border images */
  --white:   #ffffff;  }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none; } 

html { height: 100%; scroll-behavior: smooth; }

body {
	font: normal 500 16px 'Raleway', sans-serif;
	height: 100%;
	background: var(--white);
	display: flex;
	flex-direction: column; }

h1 { /* BLAUWE HEADINGS */
	font-size: 1.6rem;
	font-weight: 700; /* bold */
	color: var(--blue_3);
	text-transform: uppercase;
	margin-top: 1rem; }

h2 { /* ORANJE HEADINGS */
	font-size: 1.25rem;
	font-weight: 800; /* extra bold */
	color: var(--orange_3);
	padding: 0 0 0.5rem 0; }

h3 {
	font-size: 1.2rem;
	//font-weight: 700;
	color: var(--blue_3);
	padding-top: 1rem;
	margin-bottom: 0.5rem;
	text-align: center; }

p {
	font-size: 0.99rem;
	font-weight: 500; /* medium */
	line-height: 1.6;
	color: var(--black_1);
	padding-bottom: 1rem; }

.webshop .fas, .socialmedia .fab { font-size: 1.3rem; color: var(--white); }

header, footer { max-width: 1280px; margin: 0 auto; }

/* position relatives */
body, #wrapper,  header, footer, .articleInnerWrapper, .card { position: relative; }

#wrapper {
	max-width: 1280px; 
	margin: 0 auto;
	padding: 1.5rem;
	flex: 1 0 auto; }
 
#wrapper, #content, header, section, article, aside, 
footer, .receptHeader, fieldset, form, img,
.boeken1 a, .boeken2 a, .boeken3 a, .trailer { width: 100%; }

section { margin-bottom: 4rem; }
section article { margin-top: 1rem; }

/* testje of dit overal mooi staat */
div img { border: 1px solid var(--gray_3); border-radius: 5px; margin: 0 0 1rem 0; }


/*--------HOVERS--------------------------------------------*/
a      { color: var(--black_1); }
.btn a { color: var(--white); padding: 0.75rem 3rem; }

.card:hover { cursor: pointer; box-shadow: 0px 6px 8px rgba(0,0,0,0.35); }

.btn:hover:not(.notActive), #aanmelden:hover { 
	font-size: 1.08rem; 
	cursor: pointer; 
	background: var(--blue_3); 
	box-shadow: 0px 6px 8px rgba(0,0,0,0.35); }

.navigatie li a:hover     { color: var(--blue_1); }
.accountOpties li a:hover { color: var(--orange_3); }

.fab.fa-facebook-square:hover, 
.fab.fa-twitter-square:hover,
.fab.fa-youtube:hover   { color: var(--black_2); }

.active, .fas:hover, .fas.active { color: var(--blue_3); }


/*--------VIDEO-----------------------*/
.trailer  { margin-bottom: 1.5rem; }

.video-js {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid var(--gray_3);
	border-radius: 5px; }


/*--------CARDS OPMAAK EN INHOUDELIJKE VARIANTEN-----------------------*/
.card {
	margin: 0 0 1.3rem 0;	 
	padding: 1.5rem 1rem; 
	border-radius: 3px; 
	border: thin solid #e7e7e7;
	display: flex;
	flex-flow: column;
	align-content: flex-start; }

.noBorder { color: var(--white); border: none; }

.receptIngredienten { 
	display: flex; 
	align-items: flex-start; 
	justify-content: flex-start; }

.receptIngredienten div { width: 100%; }

/* recept iconen netjes naast elkaar */
.receptHeader  { 
	display: flex; 
	flex-flow: column nowrap;
	justify-content: space-between; 
	align-items: baseline; }

.card h2, .receptHeader h2 { min-height: 3rem; }

.receptIcon { 
	width: 100%; 
	display: flex; 
	padding: 0.5rem 0;
	margin: 0.5rem 0; 
	border-top: 1px solid var(--orange_5);
	border-bottom: 1px solid var(--orange_5);  }

.receptIcon li img { padding-left: 0.5rem; margin: 0; }

.ingredienten { padding: 1rem 0; }

.ingredienten li, .receptIcon li { 
	padding: 0.2rem 0; 
  line-height: 1.5;
  list-style-type: disc;
  margin: 0 0 0 1rem; }

.receptIcon li:first-child {list-style-type: none; margin-left:0; }

.receptIcon li { 
	color: var(--blue_3);
	padding: 0 0.5rem; }

.btn {
	font-family: 'Raleway', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	text-align: center;
	color: var(--white);
	border-radius: 3px;
	width: 50%;
	min-width: 220px;
	max-width: 315px;
	height: 45px;
	background: var(--orange_3);
	padding: 0.8rem 0; 
	display: block;
	margin: 0.5rem auto 0.5rem auto;	
	box-shadow: 0px 3px 6px rgba(0,0,0,0.2); }

.boekenHeader { 
	font-family: 'Merriweather', serif;
	color: var(--white);
	text-align: center;
	text-shadow: 1px 1px 1px var(--black_2); 
	width: 75%; /**/
	height: 100%;
	display: flex;
	flex-flow: column;
	justify-content: center;
	margin: auto; } /**/

span {
	font-family: 'Raleway', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	display: block; }

hr {
	height: 5px;
	border: none;
	background: var(--blue_3); } /**/

.bold { font-weight: 700; }

.boekenHeader h2, .boekenHeader span { color: white; padding: 1rem 0; } /**/

.boeken1, .boeken2, .boeken3 { min-height: 430px; border-radius: 3px; }

.boeken1 a, .boeken2 a, .boeken3 a {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 400px;
}
.boeken1 {
	background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0)),url("../images/boeken/nigella-boek.jpg");
	background-repeat: no-repeat;
	background-size: 195%;
	background-position: 47% 20%; }

.boeken2 {
	background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0)),url("../images/boeken/sweet-boek.jpg");
	background-repeat: no-repeat;
	background-size: 163%;
	background-position: 50% 48%; }

.boeken3 {
	background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0)),url("../images/boeken/jamie-boek.jpg");
	background-repeat: no-repeat;
	background-size: 170%;
	background-position: 66% 90%; }

.storiesList { width: 100%; padding-bottom: 2rem; }

.storiesListItems li::before {
	content: '\2022';
	line-height: 1.5;
	padding-right: 0.5rem; }

.storiesCombi { display: flex; flex-flow: row wrap; }

.thumbs     { display: flex; justify-content: flex-start; margin: 1rem 0; }
.thumbs div { flex-basis: 25%; margin-right: 1rem; }
.thumbs div:last-child { margin-right: 0; }

.storiesWrapper2 { display: flex; flex-flow: column nowrap; }

/*voor tekst met alleen een img en geen tekst ernaast*/
.largeImg { width: 100%; }


/*--------ASIDE ITEMS---------------------------------------*/
aside {
	display: flex;
	flex-flow: column nowrap;
	padding: 1rem 0 1rem 0;
	border-top: 2px solid var(--blue_3);
	border-bottom: 2px solid var(--blue_3);
	margin-bottom: 2rem; }

aside h1 { margin-bottom: 2.8rem; }

#recepten span { color: black; }

.asideCategorie ul {display: none; }

#receptOpties {
	display: flex;
	flex-flow: column;
	align-items: center; } 

#receptOpties div {
	width: 100%;
	text-align: center; 
	margin-bottom: 1rem; 
	border-bottom: 2px solid var(--blue_5); }

#receptOpties div:last-child { border: none; }

#receptOpties li a, #receptOpties div, .radioBtn span {
	font-size: initial;
	font-weight: 600;
	letter-spacing: 0.03rem;
	color: var(--blue_3);
	text-transform: uppercase; }

.sliderPrice { padding: 1rem 0; }

input[type="radio"] { margin: 0.5rem 0.5rem 0.5rem 1.5rem; }
input[type="radio"]:first-of-type { margin-left: 0; }

.radioBtn span { padding-right: 1rem; width: 170px; text-align: left; margin: 0 auto; }
.radioBtn span:last-child { padding-right: 0; }


/*--------PAGER--------------------------------------------*/
.pager      { width: 5.5rem; margin: 0 auto; } 
.pager li   { display: inline-flex; padding: 0.1rem; }
.pager li a { font-size: 0; }

.pager li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	font-size: 1.3rem;
	content:"\f111"; 
   color: var(--orange_3); }

.pager li:hover::before { color: var(--blue_3); cursor: pointer; }

.pager li.active::before { color: var(--blue_3); font-weight: 900; }


/*--------DE REST--------------------------------------------*/
/* verbergt hover op niet actieve btn */
.notActive { background: var(--orange_4); }

/* bereiding recepten pagina */
.receptBereiding { order: 2; }

/*homepage het cuisine team*/
small        { font-weight: 600; color: var(--blue_3); }
small + .btn { margin: 2.57rem 0 0 0; }

.back h3 { text-align: right; }


/*--------FOOTER--------------------------------------------*/
footer {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: flex-start;
	padding:   1.5rem; 
	background: var(--blue_3);	
	flex-shrink: 0; } /* footer onderaan de browser */

footer div {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
	align-items: center; }

/* logo cuisine */
footer img { width: 70px; border: none;  }

.socialmedia li    { display: inline-flex; padding-left: 1rem; }
.socialmedia .fab  { font-size: 2.8rem; }

.navigatie {padding: 1.8rem 0; }

.navigatie li a {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
	display: block;
	padding: 0.3rem; }

.navigatie li a.active { color: var(--blue_1); }

address { align-self: flex-end; }

address li {
  font-weight: 700;
  text-align: right;
  color: var(--white);
	padding-top: 0.5rem; }

footer small {
	font-weight: 300;
	width: 100%;
	text-align: center;
	color: var(--white);
	padding-top: 1.5rem; 	
	align-self: center; }


/*--------HIDE/SHOW ITEMS IN VP-----------------------------*/
#home .card:nth-of-type(n+3),
#home1 .card:nth-of-type(n+3),
#campagne .card:nth-of-type(n+2),
#nieuws .card:nth-of-type(n+4),
#boeken .card:nth-of-type(n+2),
#recipesContainer a:nth-of-type(n+3),
#productsContainer a:nth-of-type(n+4) { display: none; }


/*--------TO TOP--------------------------------------------*/
.toTop {
  font-size: 0;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  background-image: url(../images/logo-icons/sprite.svg);
	background-position: -84px -210px;  
	background-repeat: no-repeat;	
  background-size: 13rem;
  transition: all 200ms ease-in;
  display: block;
	border: 4px solid var(--blue_3);
	border-radius: 50%; }

.toTop:hover { 
	background-position: -84px -172px; 
	border: 4px solid var(--orange_3); }


/*--------pageNotFound---------------------------------------*/
.pageNotFound { text-align: center; }
.pageNotFound h1, .pageNotFound p { padding: 2rem 0; }
.pageNotFound .logo { width: 200px; height: 200px; }
.pageNotFound .logo #canvas { top: 15rem; width: 200px!important; height: 200px!important; }

small + a .btn { margin: 2rem 0 0 0; }
p.bold a       { color: var(--orange_3); }
p.bold a:hover { color: var(--blue_3); }