/********************   FOOD IMAGES   ********************/
.food-images {
	/* background-color: rgba(250, 150, 150, .3); */
	height: auto;
	width: 100vw;
	max-width: 420px;
	margin: 0 auto;
	position: relative;
	/* overflow: hidden; */
	/* border: 1px solid orange; */
}
.food-img-main {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url('../img/no-photo.png');
	height: 0px;
	position: relative;
}
.food-img-main.no-photo {
	/* height: 168px; */
	width: 70%;
	margin: 0 auto;
	height: 240px;
}
.food-img-container {
	height: 240px;
	width: 100%;
	display: flex;
	/* border: 1px solid red; */
	/* height: 100px; */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.food-img {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	flex-basis: 0px;
	flex-shrink: 1;
	flex-grow: 0;
	transition: flex-grow .3s;
	/* border: 1px solid yellow; */
}

.food-img.food-img-show {
 	flex-grow: 1;
}

ul.food-img-indicator {
	list-style: none;
	position: absolute;
	height: 1rem;
	top: 0rem;
	/* width: 100%; */
	margin-left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
	background-color: rgba(0, 0, 0, .4);
	padding: 0 0 0 .5rem;
	border-radius: 2rem;
	/* border: 1px solid red; */
}
li.food-img-indicator-item {
	/* border: 1px solid blue; */
	width: .5rem;
	height: .5rem;
	/* border: 1px solid var(--dark-bg-color); */
	border-radius: 50px;
	background-color: var(--very-light-bg-color);
	margin-right: .5rem;
}
li.food-img-indicator-item.selected {
	background-color: var(--dark-bg-color);
}


.food-img-arrow-left, .food-img-arrow-right {
	color: var(--light-color);
	font-size: 2.5rem;
	background-color: rgba(38, 100, 133, .7);
	padding: 0 .8rem;
	border-radius: 2rem;
	cursor: pointer;
	position: absolute;
	top: 60px;
	display: none;
}
.food-img-arrow-right {
	right: 0px;
	/* display: block; */
}
/********************   FOOD TEXTS   ********************/
.food-text {
	position: absolute;
	/* bottom: 0px; */
	width: 100%;
	max-width: 420px;
	height: 84px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	background-color: var(--dark-bg-opaque);
	/* border: 1px solid red; */
	margin-top: -84px;
	left: 50%;
	transform: translateX(-50%);
}

.food-title {
	color: var(--light-color);
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	padding: 0rem .2rem;
	line-height: 1.5rem;
	/* border: 1px solid yellow; */
	width: 100%;

}
.food-subtitle {
	color: var(--light-color);
	font-weight: 500;
	font-size: .9rem;
	text-align: center;
	padding: 0rem 1.8rem 0 1rem;
	line-height: .9rem;
	/* border: 1px solid yellow; */
}
.food-favorite {
	position: absolute;
	top: 54px;
	right: 3px;
	font-size: 1.5rem;
	cursor: pointer;

	color: var(--fav-color);
	/* border: 1px solid red; */
}

.food-favorite .icon-full {
	display: none;
}
.food-favorite .icon-outline {
	display: block;
}
.food-favorite.starred .icon-full {
	display: block;
}
.food-favorite.starred .icon-outline {
	display: none;
}

.food-authordate {
	display: flex;
	justify-content: space-between;
	padding: .2rem .5rem;
	font-size: .8rem;
	font-weight: 500;
	max-width: 420px;
	margin: 0 auto;
}


/********************   TAG LIST   ********************/
.food-tag-list {
	/* background-color: var(--light-bg-color); */
	display: flex;
	flex-wrap: wrap;
	padding: .7rem .5rem 0 0;
	/* border: 1px solid crimson; */
}
.food-tag-item {
	color: var(--light-color);
	background-color: var(--dark-bg-color);
	/* background-color: var(--light-bg-color); */
	font-size: 1rem;
	font-family: 'Righteous', cursive;
	/* border: 1px solid var(--light-color); */
	border-radius: 2rem;
	padding: 0 .5rem;
	margin: 0 0 .7rem .7rem;
}
.icon-print {
	font-size: 1.5rem;
	color: var(--dark-bg-color);
	cursor: pointer;
	margin-left: auto;
	padding-left: 1rem;
	/* border: 1px solid orangered; */
}
/**********   FOOD DESCRIPTION   *********/
.food-description {
	font-size: .9rem;
	padding: .2rem .7rem .5rem .7rem;
	/* border: 1px solid green; */
}
/********************     INGREDIENTS & DIRECTIONS     ********************/
.food-ingr-dir-header {
	display: flex;
}
.food-ingr-label, .food-dir-label {
	padding: .2rem 0;
	text-align: center;
	flex-grow: 1;
	flex-basis: 0;
	background-color: var(--light-bg-color);
	border-top-left-radius: 2vw;
	border-top-right-radius: 2vw;
	border-top: 3px solid var(--light-color);
}
.food-ingr-label.food-open,
.food-dir-label.food-open {
	background-color: var(--dark-bg-color);
	border-top-color: var(--dark-bg-color);
}

.food-ingr-dir-header span {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5rem;
	text-decoration: underline;
	/* border: 1px solid red; */
	color: var(--light-color);
	cursor: pointer;
}
.food-ingr-label.food-open span,
.food-dir-label.food-open span {
	font-size: 1.3rem;
	text-decoration: none;
	/* font-weight: 700; */
}
/*******************   INGREDIENTS   *********************/
.food-ingr-list {
	/* display: flex; */
	flex-direction: column;
	display: none;
}
.food-ingr-list.food-showing {
	display: flex;
}
.food-ingr-item {
	display: flex;
}
.food-ingr-item:nth-of-type(even) div {
	background-color: var(--very-light-bg-color);
}
.food-ingr-item:nth-of-type(odd) div {
	background-color:  var(--very-very-light-bg-color);
}
.food-ingr-qty, .food-ingr-unit, .food-ingr-name  {
	flex-basis: 0;
	padding: .2rem .2rem .2rem .2rem;
	/* padding: 0; */
	margin: 0 .2rem 0 0;
}
.food-ingr-qty {
	flex-grow: 3;
	text-align: right;
	/* background-color: rgb(221, 185, 247); */
}
.food-ingr-unit {
	flex-grow: 4;
	/* background-color: rgb(248, 190, 219); */
}
.food-ingr-name {
	flex-grow: 10;
	margin: 0;
}
/*******************   DIRECTIONS   *******************/
.food-dir-list {
	display: none;
	flex-direction: column;
}
.food-dir-list.food-showing {
	display: flex;
}
.food-dir-item {
	display: flex;
	/* border: 1px solid thistle; */
}
.food-dir-nr {
	width: 10vw;
	height: 10vw;
	background-color: var(--dark-bg-color);
	/* background-color: var(--light-bg-color); */
	color: var(--light-color);
	font-size: 7vw;
	font-weight: 500;
	flex-shrink: 0;
	text-align: center;
	line-height: 10vw;
	/* padding: 0 0 0 0; */
	border-radius: 5rem;
	margin: 2vw 4vw 3vw 3vw;
}
.food-dir-text {
	padding: 2vw 2vw 3vw 0;
}
/***************     COMMENT     **************/
.food-comment-header {
	font-size: 1.3rem;
	font-weight: 700;
	padding: .2rem 0;
	text-align: center;
	color: var(--light-color);
	background-color: var(--dark-bg-color);
}
.food-comment-text {
	/* background-color: var(--very-light-bg-color); */
	padding: .5rem .5rem 1rem .5rem;
	/* margin-bottom: 2rem; */
	/* enabling line break in editable div */
	white-space: pre-line;
}

/***************        POPUP-TABS        ***************/
.popup-tags {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 3;
	background-color: var(--overlay-color);
	/* display: none; */
}
.popup-tags.hidden {
	display: none;
}
.popup-tags-box {
	background-color: var(--very-light-bg-color);
	color: var(--dark-bg-color);
	/* border: 3px solid var(--dark-bg-color); */
	border: 3px solid var(--light-color);
	border-radius: .5rem;

	margin: 2rem auto 0 auto;
	width: 90%;
	max-width: 1120px;
	overflow-y: auto;
	max-height: 90vh;
}
.popup-tags-header {
	display: flex;
	justify-content: space-between;
}

.popup-tags-tab-wrapper {
	flex-grow: 1;
	display: flex;
	align-items: flex-end;
	/* border: 1px solid red; */
}
.popup-tags-tab {
	/* flex-grow: 1; */
	/* text-align: center; */
	font-size: 1.2rem;
	font-weight: 700;
	padding: .2rem .5rem;
	color: var(--light-color);
	background-color: var(--dark-bg-color);
	cursor: pointer;
	border-radius: 5px;
}
.popup-tags-tab:nth-of-type(1) {
	margin-left: auto;
	margin-right: .5rem;
}
.popup-tags-tab:nth-of-type(2) {
	margin-right: auto;
	margin-left: .5rem;
}
.popup-tags-tab.active {
	cursor: default;
	color: var(--very-light-bg-color);
	background: var(--dark-bg-opaque);
}
.popup-tags-close {
	font-size: 1.5rem;
	padding: 1rem 1rem 0 .5rem;
	cursor: pointer;
	/* border: 1px solid red; */
}

/***************        POPUP-TAGS        ***************/
.popup-tags-wrapper.hidden {
	display: none;
}
.popup-tags-text {
	font-size: 1.2rem;
	color: var(--dark-color);
	padding-top: 1.2rem;
	text-align: center;
	margin: 0 auto;
}
.popup-tag-list {
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	/* grid-template-rows: auto; */
	justify-items: center;
	align-items: center;
	padding: 1rem 0;

	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	/* grid-template-rows: repeat(auto-fit, 200px); */
	grid-auto-rows: 4rem;
}
.popup-tag-item {
	color: var(--light-bg-color);
	background-color: var(--light-color);
	/* background-color: var(--light-bg-color); */
	border: 2px solid var(--light-bg-color);
	border-radius: 2rem;
	font-size: 1.2rem;
	font-family: 'Righteous', cursive;
	padding: .2rem .7rem;
	/* margin: .8rem 0; */
	cursor: pointer;
}
.popup-tag-item.selected {
	color: var(--light-color);
	background-color: var(--light-bg-color);
	border: 2px solid var(--light-bg-color);
}
.popup-tags-btn {
	color: var(--light-color);
	background-color: var(--dark-bg-color);
	/* border: 2px solid var(--light-color); */
	width: 5rem;
	text-align: center;
	margin: 0 auto 1.5rem auto;
	font-size: 1.2rem;
	font-weight: 900;
	text-transform: uppercase;
	padding: .4rem 0 .3rem 0;
	border-radius: 5px;
	cursor: pointer;
}
/***************        POPUP-AUTHORS        ***************/
.popup-authors-wrapper.hidden {
	display: none;
}
.popup-author-list {
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	/* grid-template-rows: auto; */
	justify-items: center;
	align-items: center;
	padding: 1rem 0;

	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	/* grid-template-rows: repeat(auto-fit, 200px); */
	grid-auto-rows: 4rem;
}

.popup-author-list a {
	color: var(--light-color);
	background-color: var(--light-bg-color);
	font-weight: 700;
	font-size: 1.2rem;
	padding: .2rem .5rem;
	border: 1px solid var(--dark-bg-color);
	border-radius: 3px;
	/* border: 1px solid red; */
}

/************************************************************/
/**********     MEDIUM SIZE DEVICES     **********/
@media only screen and (min-width: 510px) {
/***************     FOOD IMAGES     ***************/
/*
.food-img-container {
	height: 110px;
	justify-content: space-around;
	width: 90vw;
	margin: 0 -5vw 0 -5vw;
	max-width: 730px;
}
.food-img-show {
	transform: scale(1.12);
	margin: 0 .5rem;
	border: 3px solid var(--dark-bg-color);
}
*/
.food-images {
	width: 80%;
	max-width: 640px;
	height: auto;
	/* background-color: rgba(200, 50, 50, .2); */
}
.food-img-main {
	width: 100%;
	max-width: 480px;
	height: 280px;
	margin: 0 auto 1rem auto;
}
.food-img-container {
	height: 110px;
	justify-content: center;
	width: 100%;
}
.food-img-container.one-photo {
	display: none;
}
.food-img {
	max-width: 140px;
	max-width: 25%;
	transition: transform .5s ease, flex-grow .5s ease;
	/* border: 1px solid yellow; */
}
.food-img-show {
	transform: scale(1.15);
	border-radius: 5px;
	/* margin: 0 .5rem; */
	border: 3px solid var(--dark-bg-color);
}
.food-img.food-img-visible {
	flex-grow: 1;
	/* border: 10px solid purple; */
}
.food-img :not(.food-img-visible) {
	flex-grow: 0;
	/* border: 8px solid yellowgreen; */
}

.food-img-arrow-left {
	left: -3rem;
	top: 120px;
}
.food-img-arrow-right {
	right: -3rem;
	top: 120px;
}
/***************     FOOD TEXTS     ***************/
.food-texts {
	margin-top: 1rem;
}

.food-text {
	justify-content: start;
	align-items: center;
	position: static;
	height: auto;
	margin: 0 auto;
	transform: translateX(0);
	background-color: inherit;
	/* border: 1px solid orangered; */
	
}
.food-text.no-photo {
	margin-bottom: 0px;
}
.food-title {
	background-color: var(--dark-bg-color);
	color: var(--light-color);
	padding: .3rem 2rem .3rem 1rem;
	font-size: 1.8rem;
	line-height: 2rem;
	border-radius: 5px;
	/* border: 1px solid red; */
}

.food-subtitle {
	padding: .2rem .2rem;
	color: var(--dark-color);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2rem;
	margin-top: .3rem;
}
.food-favorite {
	font-size: 2rem;
	top: 5px;
}
.food-authordate {
	background-color: var(--very-very-light-bg-color);
	margin-top: .5rem;
}

/**********   TAG LIST   **********/
.food-tag-list {
	padding: .7rem .5rem 0 0;
	/* border: 1px solid crimson; */
}
.food-tag-item {
	font-size: 1.2rem;
	padding: .1rem .7rem;
	margin: 0 0 .8rem 1rem;
}
.icon-print {
	font-size: 1.8rem;
	margin-right: 2vw;
}
/**********   FOOD DESCRIPTION   *********/
.food-description {
	font-size: 1rem;
	padding: .2rem 1rem .5rem 1rem;
	line-height: 1.4rem;
	/* border: 1px solid green; */
}
/**********     INGREDIENTS & DIRECTIONS     **********/
.food-ingr-dir-header span {
	font-size: 1.3rem;
	line-height: 2rem;
}
.food-ingr-label.food-open span,
.food-dir-label.food-open span {
	font-size: 1.5rem;
}
/*******************   INGREDIENTS   *********************/
.food-ingr-qty, .food-ingr-unit, .food-ingr-name  {
	font-size: 1.2rem;
	/* flex-basis: 0; */
	padding: .3rem .3rem .3rem .3rem;
	margin: 0 .3rem 0 0;
}
.food-ingr-name { margin: 0px; }
/*******************   DIRECTIONS   *******************/
.food-dir-item {
	display: flex;
}
.food-dir-nr {
	width: 3rem;
	height: 3rem;
	font-size: 2rem;
	line-height: 3rem;
	border-radius: 5rem;
	margin: 1rem 1.5rem 1rem 1rem;
}
.food-dir-text {
	padding: 1rem 1.5rem 1rem 0;
	font-size: 1.2rem;
	/* border: 1px solid orange; */
}
/***************      COMMENT      **************/
.food-comment-header {
	font-size: 1.5rem;
	line-height: 2rem;
}
.food-comment-text {
	font-size: 1.2rem;
	padding: .5rem 1rem 1rem 1rem;
}

}
/**********************************************/
/**********   LARGE SIZE DEVICES   **********/
@media only screen and (min-width: 840px) {

body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* grid-template-rows: 3.8rem  406px auto auto; */
	/* grid-template-rows: auto auto auto auto 3rem; */
	grid-template-areas:
		"navbar navbar"
		"images texts"
		"ingrdir ingrdir"
		"comment comment"
		"footer footer";
	column-gap: 2%;
	row-gap: 2%;
}
nav { grid-area: navbar; }
.food-images { grid-area: images; }
.food-texts { grid-area: texts; }
.food-ingr-dir { grid-area: ingrdir; }
.food-comment { grid-area: comment; }
footer { grid-area: footer; }
/***************     FOOD IMAGES     ***************/
.food-images {
	width: 100%;
	/* align-self: center; */
	/* border: 1px solid green; */
}
.food-img-container {
	width: 97%;
	margin: 0 auto;
}
.food-img-arrow-left { left: 0rem; }
.food-img-arrow-right { right: 0rem; }
/************************************************/


/***************     FOOD TEXTS     ***************/
.food-texts {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 0;
	/* border: 1px solid red; */
}
.food-texts > div {
	width: 90%;
	max-width: none;
	/* border: 1px solid orangered; */
}
.food-title {
	background-color: var(--dark-bg-color);
	color: var(--light-color);
	padding: .3rem 2rem .3rem .7rem;
	font-size: 2.5rem;
	line-height: 2.8rem;
	border-radius: 5px;
	/* border: 1px solid red; */
}
.food-favorite {
	top: 10px;
	right: 5px;
}
.food-authordate {
	margin: .5rem 0;
	font-size: 1rem;
}

.food-description {
	/* margin-top: auto; */
	font-size: 1.2rem;
	line-height: 1.5rem;
	padding: 0;
}
/**********   TAG LIST   **********/
.food-tag-list {
	padding: .7rem 0 0 0;
	order: 1;
	margin-top: auto;
}
.food-tag-item {
	margin: .5rem 1rem .5rem 0rem;
	/* background-color: var(--light-bg-color); */
}
.icon-print {
	margin-right: 0;
	padding-top: .5rem;
}
/**********     INGREDIENTS & DIRECTIONS     **********/
.food-ingr-dir {
	/* margin-top: 1rem; */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* border: 1px solid red; */
}
.food-ingr-dir-header {
	width: 100%;
	justify-content: space-between;
}
.food-ingr-label, .food-dir-label,
.food-ingr-label.food-open, .food-dir-label.food-open {
	width: 49%;
	flex-grow: 0;
	flex-basis: auto;
	border: 0;
	border-radius: 0px;
	background-color: var(--very-light-bg-color);
	/* border: 1px solid red; */
}
.food-ingr-dir-header span,
.food-ingr-label span,
.food-dir-label span,
.food-ingr-label.food-open span,
.food-dir-label.food-open span {
	font-size: 2rem;
	text-decoration: none;
	color: var(--dark-color);
	font-weight: 500;
	cursor: auto;
}
.food-ingr-list, .food-dir-list {
	width: 49%;
	display: block;
	/* border: 1px solid orange; */
}
.food-ingr-item { margin-bottom: .2rem; }

/***************      COMMENT      **************/
.food-comment-header {
	font-size: 2rem;
	font-weight: 500;
	line-height: 2rem;
	color: var(--dark-color);
	background-color: var(--very-light-bg-color);
}
.food-comment-text {
	font-size: 1.2rem;
	line-height: 1.6rem;
	padding: .7rem 1.5rem 1.5rem 1.5rem;
}

}