/* CSS RESET --> in 'all.css' is een kleine CSS reset opgenomen die je naar eigen voorkeur kunt aanvullen of uitkleden */

/* BLOKJES --> Elk blokje (article) heeft een ID, die je kunt gebruiken als "namespace" om CSS alleen voor dat blokje te laten gelden */


/***********/
/* FLEXBOX */
/***********/

/****************************/
/* ID = alleen-display-flex */
/****************************/
#alleen-display-flex {
	display:flex;
}

#alleen-display-flex div:nth-of-type(1) {
	background-color:YellowGreen;
}
#alleen-display-flex div:nth-of-type(2) {
	background-color:Crimson;
}
#alleen-display-flex div:nth-of-type(3) {
	background-color:DodgerBlue;
}


/*******************/
/* ID = flex-basis */
/*******************/
#flex-basis {
	display:flex;
}

#flex-basis div {
	flex-basis:calc(100%/3);
}

#flex-basis div:nth-of-type(1) {
	background-color:YellowGreen;
}
#flex-basis div:nth-of-type(2) {
	background-color:Crimson;
}
#flex-basis div:nth-of-type(3) {
	background-color:DodgerBlue;
}


/**************************/
/* ID = justify-and-align */
/**************************/
#justify-and-align {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

#justify-and-align div {
	flex-basis:3em;
	height:3em;
}
#justify-and-align div:nth-of-type(1) {
	background-color:YellowGreen;
}
#justify-and-align div:nth-of-type(2) {
	background-color:Crimson;
}
#justify-and-align div:nth-of-type(3) {
	background-color:DodgerBlue;
}


/********************/
/* ID = margin-auto */
/********************/
#margin-auto {
	display:flex;
	align-items:center;
}

#margin-auto div {
	flex-basis:3em;
	height:3em;
}
#margin-auto div:nth-of-type(1) {
	background-color:YellowGreen;
}
#margin-auto div:nth-of-type(2) {
	background-color:Crimson;
}
#margin-auto div:nth-of-type(3) {
	background-color:DodgerBlue;
	margin-left:auto;
}


/*************************/
/* ID = dubbel-centreren */
/*************************/
#dubbel-centreren,
#dubbel-centreren div {
	display:flex;
	justify-content:center;
	align-items:center;
}

#dubbel-centreren div {
	width:6em;
	height:6em;
	background-color:DodgerBlue;
}


/******************/
/* ID = flex-grow */
/******************/
#flex-grow {
	display:flex;
}

#flex-grow div:nth-of-type(1) {
	background-color:YellowGreen;
	flex-grow:1;
}
#flex-grow div:nth-of-type(2) {
	background-color:Crimson;
	flex-grow:2;
}
#flex-grow div:nth-of-type(3) {
	background-color:DodgerBlue;
	flex-grow:3;
}


/***********************/
/* ID = flex-direction */
/***********************/
#flex-direction {
   display:flex;
   flex-direction:column-reverse;
   overflow:hidden;
}

#flex-direction div {
   flex-basis:calc(100%/3);
}

#flex-direction div:nth-of-type(1) {
	background-color:YellowGreen;
}
#flex-direction div:nth-of-type(2) {
	background-color:Crimson;
}
#flex-direction div:nth-of-type(3) {
	background-color:DodgerBlue;
}


/*********************/
/* ID = flex-grow-1x */
/*********************/
#flex-grow-1x {
	display:flex;
	flex-direction:column;
}

#flex-grow-1x div {
	flex-basis:3em;
}

#flex-grow-1x div:nth-of-type(1) {
	background-color:YellowGreen;
}
#flex-grow-1x div:nth-of-type(2) {
	background-color:Crimson;
	flex-grow:1;
}
#flex-grow-1x div:nth-of-type(3) {
	background-color:DodgerBlue;
}


/*******************/
/* ID = flex-order */
/*******************/
#flex-order {
	display:flex;
}

#flex-order div {
	flex-basis:calc(100%/3);
}

#flex-order div:nth-of-type(1) {
	background-color:YellowGreen;
}
#flex-order div:nth-of-type(2) {
	background-color:Crimson;
}
#flex-order div:nth-of-type(3) {
	background-color:DodgerBlue;
	order:-1;
}


/******************/
/* ID = flex-wrap */
/******************/
#flex-wrap {
	display:flex;
	flex-wrap:wrap;
}

#flex-wrap div {
	flex-basis:calc(100%/3);
}

#flex-wrap div:nth-of-type(odd) {
	background-color:Crimson;
}
#flex-wrap div:nth-of-type(even) {
	background-color:DodgerBlue;
}


/*******************/
/* ID = align-self */
/*******************/
#align-self {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

#align-self div {
	flex-basis:calc(100%/3);
	height:calc(100%/3);
}
#align-self div:nth-of-type(1) {
	background-color:YellowGreen;
	align-self:flex-start;
}
#align-self div:nth-of-type(2) {
	background-color:Crimson;
}
#align-self div:nth-of-type(3) {
	background-color:DodgerBlue;
	align-self:flex-end;
}


/********************/
/* ID = nested-flex */
/********************/
#nested-flex {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

#nested-flex > div {
	flex-basis:calc(100%/3);
	height:calc(100%/3);
	padding:.25em;
	
	display:flex;
	align-items:center;
}
#nested-flex > div:nth-of-type(1) {
	background-color:YellowGreen;
	align-self:flex-start;
}
#nested-flex > div:nth-of-type(2) {
	background-color:Crimson;
	flex-direction:row-reverse;
}
#nested-flex > div:nth-of-type(3) {
	background-color:DodgerBlue;
	align-self:flex-end;
	flex-direction:row-reverse;
}

#nested-flex > div div {
	flex-basis:calc(100%/3);
	height:calc(100%/3);
	background-color:Gold;
}

#nested-flex > div:nth-of-type(1) div:nth-of-type(1),
#nested-flex > div:nth-of-type(2) div:nth-of-type(1),
#nested-flex > div:nth-of-type(3) div:nth-of-type(3) {
	align-self:flex-start;
}
#nested-flex > div:nth-of-type(1) div:nth-of-type(3),
#nested-flex > div:nth-of-type(2) div:nth-of-type(3),
#nested-flex > div:nth-of-type(3) div:nth-of-type(1) {
	align-self:flex-end;
}


/*******************/
/* ID = filter-bar */
/*******************/
#filter-bar ul {
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
}

#filter-bar li {
	margin:0;
	padding:0;
	list-style:none;
	border:solid 2px Crimson;
}

#filter-bar li + li {
	border-left:none;
}

#filter-bar li:first-of-type {
	border-top-left-radius:.375em;
	border-bottom-left-radius:.375em;
}
#filter-bar li:last-of-type {
	border-top-right-radius:.375em;
	border-bottom-right-radius:.375em;
}

#filter-bar li a {
	display:block;
	padding:.25em .75em;
	color:Crimson;
}
	
#filter-bar li.active a {
	background-color:Crimson;
	color:white;
	text-decoration:none;
}


/***********************/
/* ID = zoek-met-focus */
/***********************/
/* nb. ook op je telefoon(s) testen */
#zoek-met-button {
	display:flex;
	align-items:center;
}

#zoek-met-button form {
	flex-grow:1;
	display:flex;
	justify-content:flex-end;
}

#zoek-met-button input {
	padding:.25em 0;
	margin:0;
	font-size:1em;
	line-height:2em;
	box-sizing:border-box;
	outline:none;
	-webkit-appearance: none;
}

#zoek-met-button input[type=search] {
	border:solid 2px DodgerBlue;
	background:white url(../images/ui-zoek.svg) no-repeat .5em center / 1.5em;
	width:2.5em;
	border-radius:1.5em;
	padding:.25em .5em .25em 2em;
	overflow:hidden;
	transition:width 1s, border-radius .33s .67s;
}

#zoek-met-button input[type=submit] {
	-webkit-appearance: none;
	border:none;
	background-color:DodgerBlue;
	color:white;
	width:0;
	overflow:hidden;
	border-radius:0 1.5em 1.5em 0;
	transition:1s;
}

#zoek-met-button input[type=search]:focus {
	width:calc(100% - 5em);
	border-radius:1.5em 0 0 1.5em;
	transition:width 1s, border-radius .33s;
}

#zoek-met-button input[type=search]:focus + input[type=submit] {
	width:5em;
}


/*****************/
/* ID = menu-bar */
/*****************/
#menu-bar nav {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background-image:linear-gradient(to bottom, #66b3ff 0%, DodgerBlue 50%, #0059b3 100%);
	box-shadow:0 0 6px 3px rgba(0,0,0,.375);
}

#menu-bar ul {
	margin:0;
	padding:0;
	display:flex;
}

#menu-bar li {
	margin:0;
	padding:0;
	list-style:none;
	flex-basis:25%;
	border-top:solid 1px rgba(0,0,0,.25);
}

#menu-bar li:not(:last-child) {
	border-right:solid 1px rgba(255,255,255,.25);
}

#menu-bar li:not(:first-child) {
	border-left:solid 1px rgba(0,0,0,.25);
}

#menu-bar a {
	display:block;
	text-align:center;
	font-size:.66em;
	padding:2.5rem 0 .5em;
	background-repeat:no-repeat;
	background-size:3em;
	color:rgb(57,51,45);
}

#menu-bar li:nth-of-type(1) a {
	background-image:url(../images/icon-cmd-cat.svg);
	background-position:center 1em;
}
#menu-bar li:nth-of-type(2) a {
	background-image:url(../images/icon-cmd-onderbroek.svg);
	background-position:center 1.5em;
}
#menu-bar li:nth-of-type(3) a {
	background-image:url(../images/icon-cmd-pizza.svg);
	background-position:center 1.25em;
}
#menu-bar li:nth-of-type(4) a {
	background-image:url(../images/icon-cmd-kaarten.svg);
	background-position:center 1em;
}


/*************************/
/* ID = simple-carrousel */
/*************************/
#simple-carrousel {
	padding:0;
}

/* de carrousel */
#simple-carrousel  ul {
   padding:0;
   list-style:none;
   width:100%; height:100%;

   display:flex;
   align-items:center;

   overflow-x:scroll;
   overflow-y:hidden;
   /*
   -webkit-overflow-scrolling:touch;
   -ms-overflow-style:none;
   */
}

#simple-carrousel  ul::-webkit-scrollbar {
	display: none;
}

/* een carrousel item */
#simple-carrousel  li {
	height:77.5%;
	flex-basis:77.5%;
	flex-shrink:0;
}

#simple-carrousel img {
	display:block;
	width:100%;
}


/******************/
/* ID = carrousel */
/******************/
#carrousel {
	padding:0;
}

/* de carrousel */
#carrousel  ul {
   padding:0;
   list-style:none;
   width:100%; height:100%;

   display:flex;
   align-items:center;

   overflow-x:scroll;
   overflow-y:hidden;
   /*
   -webkit-overflow-scrolling:touch;
   -ms-overflow-style:none;
   */
}

#carrousel  ul::-webkit-scrollbar {
	display: none;
}

/* een carrousel item */
#carrousel  li {
	height:77.5%;
	flex-basis:85%;
	flex-shrink:0;
	padding:0 3.75%;
}

#carrousel  li:first-of-type {
	flex-basis:88.75%;
	padding-left:7.5%;
}
#carrousel  li:last-of-type {
	flex-basis:88.75%;
	padding-right:7.5%;
}

#carrousel img {
	display:block;
	width:100%;
}


/**********************************/
/* ID = carrousel-met-scroll-snap */
/**********************************/
#carrousel-met-scroll-snap {
	padding:0;
}

/* de carrousel */
#carrousel-met-scroll-snap  ul {
   padding:0;
   list-style:none;
   width:100%; height:100%;

   display:flex;
   align-items:center;

   overflow-x:scroll;
   overflow-y:hidden;
   /*
   -webkit-overflow-scrolling:touch;
   -ms-overflow-style:none;
   */

   scroll-snap-type:x mandatory;
   scroll-behavior:smooth;
}

#carrousel-met-scroll-snap  ul::-webkit-scrollbar {
	display: none;
}

/* een carrousel item */
#carrousel-met-scroll-snap  li {
	height:77.5%;
	flex-basis:85%;
	flex-shrink:0;
	padding:0 3.75%;
	scroll-snap-align: center;
}

#carrousel-met-scroll-snap  li:first-of-type {
	flex-basis:88.75%;
	padding-left:7.5%;
}
#carrousel-met-scroll-snap  li:last-of-type {
	flex-basis:88.75%;
	padding-right:7.5%;
}

#carrousel-met-scroll-snap img {
	display:block;
	width:100%;
}