
body {
	overflow-y: auto;
}

body .ivideo {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 199;

	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}


body #page-content {
	transform-style: flat;/* unbreak position fixed */
}
/* WRONG ELEMENT ON HERZBLUT PREVIEW WEBSITE ??? */#baguetteBox-overlay,footer.bg-dark.text-light.jumbotron-fluid.footer-sticky {display: none;}

/* BACKGROUND WAVES IMAGES: */
#page-wrapper::before {
	width: 15%;
	right: -0.5%;
	background-size: 100%;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" viewBox="0 0 369.617 3434.184"><defs><linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="%23fff"/><stop offset="0.483" stop-color="%2387c94c" stop-opacity="0.404"/><stop offset="0.655" stop-color="%2307773d" stop-opacity="0.333"/><stop offset="1" stop-color="%2307773d"/></linearGradient></defs><path id="Welle_grün" d="M17429.389,1723.261s142.777,374.81,0,614.086c-116.553,195.326-187.074,317.619-140.092,642.54,104.406,722.047,234.039,758.533,161.129,1191.735s-300.982,650.334-173.684,887.113,313.684-26.8,313.684-26.8l18.021-3221.152Z" transform="translate(-17238.83 -1723.261)" fill="url(%23linear-gradient)"/></svg>');
}
#page-content::before {
	height: 100%;
	width: 100%;
	left: -3%;
}

/**********************************
	MOBILE STYLING START
**********************************/


/* max width for tablets and phones */
@media (max-width: 991px) {

	html {
		font-size:	min( 1rem, 3vw );
	}

	.intro_text {
		padding:	0 2rem;
	}
	h1 {
		font-size:	2.4rem;
	}



	.button_container {
		flex-flow:	row wrap;
		padding:	0 1rem;
	}
	.button_container > * {
		width:		10rem;
		height:		10rem;
		margin:		2.8rem calc((50% - 12rem) * 0.5);
		mix-blend-mode: lighten;
	}
	.h1 {
		font-size:	1.4rem;
	}

	.taste_solutions {
		display:	none;
	}

	.selection_container {
		position:	fixed;
		top: 		0;
		left:		0;
		width:		100vw;
		height:		40rem;
		justify-content: flex-end;
	}
	.selector {
		width:		calc(5rem * 3);
		height:		calc(6.7rem * 3);
		max-width: auto;
		max-height: auto;
		font-size: 1.3rem;
	}
	.check-text {
		top: auto;
		margin-bottom: 2rem;
	}
	.filter_container input[type="button"].start {
		margin-bottom: 2em;
		margin-top: 1em;
	}
	.tx-fuchssw {
		height: auto;
	}
	.intro_text {
		top: auto;
		padding-top: 3rem;
	}
	.filter_container {
		height: auto;
		margin-top: 2rem;
	}

	.result_container {
		margin-top: 3em;
	}
	.result_container div.container:first-of-type {
		max-width: 100vw;
		overflow-x: auto;
	}
	.result_container .cell > * {
		display: block;
		min-width: 6em;
		font-size: max(0.8rem, 12px);
	}
	.result_container .container .row .cell:first-child::before {
		content: '';
		display: block;
		position: relative;
		min-width: 6em;
		height: 0.1px;
		font-size: max(0.8rem, 12px);
	}

	.result_container .cell .groupset {
		font-size: max(0.9rem, 14px);
	}
	.result_container .filter_result .group .cell {
		font-size: max(0.8rem, 13px);
	}

	.result_notice {
		font-size: 0.7em;
	}
	.scroll_box {
		overflow-x: scroll;
		max-width: 100%;
	}
	body {
		overflow: auto;
	}
}

/* WIDE FORMAT */
@media (max-width: 991px) and (min-aspect-ratio: 10/16) {

	.selector {
		width:		calc(5rem * 3);
		height:		calc(7rem * 3);
		max-width:	auto;
		max-height:	auto;
	}
}



/*********************************************
	DESKTOP STYLING START
*********************************************/


.sensory-header {
	display:		flex;
	align-items:	flex-start;
	justify-content:center;

	padding-top:	1rem;
	margin:			0 1rem;
}
.intro_video {
	position: fixed;
}
.intro_text {
	padding-left:	2rem;
	padding-right:	2rem;
}
.text-center {
	text-align:		center;
}





.filter_container {
	height:			auto;
	margin-top:		2rem;
}


.button {
	border-radius: 100em;
}
h1 {
	word-break: keep-all;
	hyphens: none;
	overflow-wrap: normal;
}
.filter_result .cell {
	-webkit-hyphens: auto;
	hyphens: auto;
}
.filter_result .cell * {
	-webkit-hyphens: auto;
	hyphens: auto;
}
.pdf_html_container .cell .set {
	-webkit-hyphens: none;
	hyphens: none;
}



.selector {
	width: 15em;
	height: 15em;
}
.selection_showing .intro_text,
.selection_showing .button_container {
	visibility: hidden;
	height: 0;
}


.selection_showing .selection_container {
	position: relative;
	max-width: 100%;
	overflow: hidden;
}
.selection_box,
.tx-fuchssw {
	height: auto;
}
.search {
	margin-left: 1em;
	margin-right: 1em;
}
.selector {
	pointer-events: none;
}
.selector .h1 {
	white-space: nowrap;
}
.selector .h1 > span:nth-of-type(2) {
	padding: 0;
}
.selection_index0.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(2) input,
.selection_index1.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(3) input,
.selection_index2.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(4) input,
.selection_index3.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(5) input {
	pointer-events: visible;
}
.selection_box ul {
	margin-top: 0;
}
.selection_box .long_list ul {
	max-height: 8.5em;
	margin-bottom: 1em;
	margin-top: 1em;
}


.arrow_box {
	height: auto;
}
.arrow_box .check {
	top: auto;
	margin-top: 1.1em;
}
.check-text {
	top: auto;
}




.cell.flavor,
.cell.flavor[strength="1"],
.cell.taste {
	text-align: center;
}
.filter_result .group .cell:nth-of-type(6) > span {
	top: 0.6em;
}

/* DESKTOP STYLES */
@media (min-width: 991px) {

	.intro_text {
		top: auto;
		padding-top: 4rem;
	}

	h1 {
		line-height: 1.2;
		font-size: 2.5rem;
	}
	.mb-3, .my-3 {
		margin-bottom: 1rem;
	}
	.fixed-bottom {
		position: fixed;
		right: 0;
		bottom: 75px;
		left: 0;
		z-index: 1030;
	}
	.fixed-bottom > img {
		width: 100%;
		position: absolute;
		top: 0;
		left: auto;
		margin-right: -4%;
	}
	.fixed-bottom > img:nth-of-type(2) {
		width:	70%;
		top:	auto;
		left:	auto;
	}
	.filter_container {
		margin-top:		6rem;
		margin-bottom:	6rem;
	}
	.selection_showing .filter_container {
		margin-top:		0;
	}
	.selector {
		width: 11em;
	}
	.selector .h1 {
		font-size: 1.5em;
	}
	.selection_box {
		font-size: min(min(3vw, 3vh), 1.8rem);
		height: 20em;
	}
	.selection_box .search,
	.selection_box li {
		font-size: 0.6em;/* selector is less width in desktop, so reduce font size to show long words */
	}
}







/*************************************************
			EXPORT OVERLAY
*************************************************/

/* DONT MERGE WITH QUERY ABOVE - ONLY OVERWRITES ON PDF EXPORT */
/* @media (max-width: 991px) { */
/* NOW ALSO USED FOR DESKTOP BECAUSE OF SYSTEM FONT REQUIREMENT */
.exporting_pdf {
	font-size:	initial;
}

.exporting_pdf body:before {
	content:	"";
	display:	block;
	background-color: #FFF;
	position:	fixed;
	top:		0;
	left:		0;
	z-index:	90001;
	width:		100%;
	height:		100%;
}
.exporting_pdf body:after {
	content:	"Exporting PDF";
	font-family: "NewJunePro-Bold";
	display:	inline-block;
	font-weight:bold;
	position:	fixed;
	top:		50vh;
	left:		50vw;
	text-align: center;
	text-shadow:var(--text_shadow);
	-webkit-transform:	translateX(-50%) translateY(-50%);
	transform:	translateX(-50%) translateY(-50%);
	z-index:	90002;

	-webkit-animation:	color_change 1s infinite;
	animation:	color_change 1s infinite;
}
/* } */

@keyframes color_change {
	0%	{ color: var(--name_color); }
	50%	{ color: var(--button_text); }
	100%	{ color: var(--name_color); }
}
@-webkit-keyframes color_change {
	0%	{ color: var(--name_color); }
	50%	{ color: var(--button_text); }
	100%	{ color: var(--name_color); }
}




/* BACKGROUND IMAGE FIXES */
#page-wrapper {
	position: relative;
}


/* FONT BUG FIX FOR PDF */
html.exporting_pdf, .exporting_pdf body,
.floating_pdf_export,
.floating_pdf_export * {
	font-family: sans-serif;
	/*font-family: Arial !important;*/
	font-size: 16px;
}
.floating_pdf_export * {
	letter-spacing: 0.01px;
}
.pdf_html_container {
	width: 1024px;
}
.pdf_html_container .table_container {
	font-size: 1em;/*0.8*/
}


/* DISABLE DRAG */
.dragplane {
	pointer-events: visible;
	visibility: hidden;
	max-width: 1px;
	max-height: 1px;
}
.selection_box {
	cursor: auto !important;
}


/* REMOVING TABLE DISPLAY OF RESULT
- BECAUSE TABLE IS NOT NECESSARY ANYMORE BECAUSE OF FIXED SIZE COLUMNS
- AND TABLE IS NOT ADAPTING TO FIXED SIZE/NOT FLEXIBLE
*/
/* 14 + 12.14 * 3 + 17.39 * 3 */
.filter_result .table {
	display: block;
}
.filter_result .row {
	display: flex;
	flex-flow: row nowrap;
}
.filter_result .cell {
	display: block;
	margin-left: 2px;
	margin-right: 2px;
}
.filter_result .cell:first-child {
	margin-left: 0;
}
.filter_result .cell:last-child {
	margin-right: 0;
}
body .filter_result .cell.name {
	width: 14%;
}
body .filter_result .cell.taste {
	width: 12%;
}
body .filter_result .cell.flavor {
	width: 16%;
}
.filter_result .header .cell, .filter_result .group .cell {
	height: auto;
}

.floating_pdf_export .filter_result .container .row:first-child .cell,
.filter_result .container .header + .row .cell {
	padding-top: 20px;
}
.floating_pdf_export .filter_result .group * {
	font-weight: 400;
	text-transform: none;
}