:root {
	--rangeColor: #87B9B4;
	--thumbColor: #467873;
	--thumbHoverColor: #28625c;
	--greenVal: #1ab147;
	--buttonColor: #1ab147;
	--buttonColorDark: rgba(10,115,41,.9);
	--linkColor: #38009c;
	--linkColor: #1ab147;
	--linkColorHover: #6227cb;

	--blue: rgb(0,137,208);
}

* {
	box-sizing: border-box;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
	padding: 0;
	margin: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background: rgb(0,137,208);
	background: linear-gradient(190deg, rgba(0,137,208,1) 17%, rgba(123,115,180,1) 35%, rgba(123,115,180,1) 44%, rgba(230,0,126,1) 63%);
}

ol, ul {
	padding-left: 18px;
	margin-bottom: 15px;
}

a {
	color: var(--linkColor);
	text-decoration: none;
}
a:hover, 
a:focus, 
a:active {
	color: var(--linkColorHover);
}

p {
	margin-bottom: 15px;
}

h1 {
	color: var(--buttonColor);
}

hr {
	border: none;
    border-top: 3px solid var(--buttonColor);
    min-width: 200px;
    max-width: 300px;
    width: 30%;
	margin-bottom: 15px;
}


/*----- Stage -----*/
	#StageContainer {
		height: 100vh;
		overflow: hidden;
	}
	#Stage {
		max-width: 1400px;
		/* background-color: #eee; */
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}
	#Stage-wrapper {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 150%;
	}


/*----- Reload Button -----*/
	.reloadBtn-wrapper {
		position: absolute;
		top: 88%;
		left: 0;
		width: 100%;
	}
	.reloadBtn {
		margin: 0 auto;
		display: block;
	}

/*----- Buttons -----*/
	button {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		margin: 30px auto 0;
		font-size: 18px;
		padding: 10px 20px;
		background-color: var(--buttonColor);
		color: #fff;
		border: 2px solid var(--buttonColor);
		border-radius: 5px;
		display: block;
		cursor: pointer;
	}
	button:hover, 
	button:focus, 
	button:active {
		color: var(--buttonColor);
		background-color: #fff;
	}

/*----- Menu Button -----*/
	.menuBtn {
		position: absolute;
		top: 10px;
		right: 20px;
		width: 42px;
		padding: 5px;
		cursor: pointer;
	}
	.menuBtn > div {
		width: 100%;
		height: 4px;
		background-color: var(--buttonColor);
		background-color: #fff;
		margin-bottom: 6px;
		border-radius: 20px;
	}
	.menuBtn > div:last-child {
		margin-bottom: 0;
	}
	/* Hover */
		.menuBtn:hover {
			opacity: .7;
		}

/*----- Menu -----*/
	.menu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.8);
		background-color: var(--buttonColorDark);
		padding: 40px;
		z-index: 99999;
		display: none;
	}
	.menu.vsbl {
		display: block;
	}
	.menu * {
		color: #fff;
	}
	.menuWrapper {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		display: none;
	}
	.menuWrapper.vsbl {
		display: flex;
	}

	/* Close Button */
		.closeMenuBtn {
			float: right;
			cursor: pointer;
			width: 50px;
			height: 50px;
			position: absolute;
			position: static;
			top: unset;
			left: unset;
			right: 50px;
			bottom: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.closeMenuBtn > div {
			width: 40px;
			height: 3px;
			background-color: #fff;
			border-radius: 20px;
		}
		.closeMenuBtn > div:first-child {
			transform: rotate(45deg);
		}
		.closeMenuBtn > div:nth-child(2) {
			transform: rotate(-45deg);
			margin-top: -3px;
		}
		.closeMenuBtn:hover > div {
			opacity: .7;
		}
		@media screen and (min-width: 768px){
			.closeMenuBtn {
				position: static;
			}
		}


	/* List Menu */
		.menu ul {
			list-style-type: none;
			padding-left: 0;
		}
		.menu ul li {
			list-style-type: none;
		}
		.menu ul li a {
			text-align: center;
			text-transform: uppercase;
			margin-top: 10px;
			padding: 5px;
			font-size: 1.2em;
			text-decoration: none;
			color: #ddd;
			display: block;
			transform: rotate(0deg) scale(1);
			transition: transform .1s linear;
		}
		.menu ul li a:hover, 
		.menu ul li a:focus, 
		.menu ul li a:active {
			color: #fff;
			transform: rotate(-4deg) scale(1.1);
		}




/*----- Survey / Umfrage -----*/
	.menuPopup {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 50px 10px;

		display: none;
	}
	.menuPopup.vsbl {
		display: block;
	}

	.menuPopup .menuPopupWrapper {
		width: 100%;
		height: 100%;
		/* background-color: #000; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	/* Close Button */
		.closemenuPopup {
			float: right;
			cursor: pointer;
			width: 50px;
			height: 50px;
			position: absolute;
			top: 0;
			left: unset;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		/* List Menus (Impressum, Initiatoren) */
			.initiatorenContainer .closemenuPopup, 
			.impressumContainer .closemenuPopup {
				position: static;
			}
		/* Initiatoren */
			.initiatorenContainer .menuPopupWrapper p {
				background-color: #fff;
				color: #000;
				padding: 15px;
			}
			.initiatorenContainer .menuPopupWrapper a {
				color: var(--linkColor);
			}

		.closemenuPopup > div {
			width: 40px;
			height: 3px;
			background-color: #fff;
			border-radius: 20px;
		}
		.closemenuPopup > div:first-child {
			transform: rotate(45deg);
		}
		.closemenuPopup > div:nth-child(2) {
			transform: rotate(-45deg);
			margin-top: -3px;
		}
		.closemenuPopup:hover > div {
			opacity: .7;
		}


		/* Survey Iframe */
			#JotFormIFrame-222823223675051 {
				max-height: 100%;
			}
			.formFooter {
				display: none;
			}




/*----- Info Popup -----*/
	.infoPopupContainer {
		position: absolute;
		top: unset;
		bottom: 0;
		left: 0;
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		margin: 20px;
		width: 100%;
		height: 100%;
		max-height: 100%;
		margin: 0;
		padding: 20px;
		z-index: 1999;
		justify-content: center;
		align-items: flex-end;
		overflow: scroll;
		background-color: rgba(0,0,0,.6);

		display: none;
	}
	.infoPopupContainer.vsbl {
		display: flex;
	}
	.infoPopupWrapper {
		max-height: 100%;
		border: 2px solid #000;
		border-radius: 10px;
		background-color: #fff;
		overflow: scroll;
	}
	.infoPopup {
		position: relative;
		padding: 20px;
		width: 100%;
		max-height: 100%;
	}

	/*-- Info Button --*/
		.infoBtn-wrapper {
			position: absolute;
			top: 88%;
			left: 6.5%;
		}
		.infoBtn {
			height: 45px;
			width: 45px;
			border-radius: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			color: #fff;
			font-size: 1.8em;
			background-color: var(--blue);
			border: 2px solid var(--blue);
		}
		.infoBtn:hover, 
		.infoBtn:focus, 
		.infoBtn:active {
			color: var(--blue);
		}

	/*-- Info Close Button --*/
		.infoPopupContainer .close-button {
			z-index: 2000;
			bottom: 10px;
			right: 10px;
		}


/*----- Game Description -----*/
	.game-description {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		height: 100vh;
		padding: 20px;
		background-color: rgba(0,0,0,.6);
		display: flex;
		justify-content: center;
		align-items: center;
		align-items: flex-start;
	}
	.game-description.hide {
		display: none;
	}
	.game-description-wrapper {
		padding: 20px;
		border: 2px solid #000;
		border-radius: 10px;
		background-color: #fff;
		font-size: 16px;
		position: relative;
		max-height: 100%;
		overflow: scroll;
	}


/*----- Gewichtsangabe -----*/
	.setWeightCoverLayer {
		position: absolute;
		top: 81px;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: calc(100% - 75px);
		background-color: rgba(0,0,0,.3);
		display: none;
	}
	.setWeightCoverLayer.vsbl {
		display: block;
	}
	.sliderWeight {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 10px 15px;
		box-sizing: border-box;
	}
	.sliderWrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px auto 0;
		max-width: 600px;
	}
	.min, .max {
		width: 45px;
		font-size: .8em;
		text-align: right;
		padding: 0 5px 0 0;
		color: #fff;
	}
	.max {
		text-align: left;
		padding: 0 0 0 5px;
	}
	.gewichtsangabe {
		/* margin-top: 10px; */
		text-align: center;
		width: 90px;
		margin: 0 auto;
	}
	.gewichtsangabe strong {
		font-size: 1.2em;
		font-weight: normal;
		padding: 5px 10px;
		background-color: #00cb3c;
		background-color: var(--greenVal);
		color: #fff;
		border-radius: 5px;
		display: inline-block;
	}
	.gewichtsangabe > div {
		position: absolute;
		left: unset;
		right: 50%;
		display: flex;
		align-items: center;
		margin: 8px 40px 0 0;
		color: #fff;
	}

	.sliderWeight .description {
		font-size: 12px;
		text-align: center;
	}
	.sliderWeight .description.game-description {}

	/*----- Input Type Range -----*/
		input[type="range"] {
			-webkit-appearance: none;
			width: 200px;
			width: calc(100% - 90px);
			height: 7px;
			background: var(--rangeColor);
			border-radius: 2px;
			background-size: 70% 100%;
			background-repeat: no-repeat;
		}
		/*-- Input Thumb --*/
		input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			height: 25px;
			width: 18px;
			border-radius: 6px;
			background: var(--thumbColor);
			cursor: ew-resize;
			box-shadow: 0 0 2px 0 #555;
			transition: background .3s ease-in-out;
		}
		input[type="range"]::-moz-range-thumb {
			-webkit-appearance: none;
			height: 25px;
			width: 18px;
			border-radius: 6px;
			background: var(--thumbColor);
			cursor: ew-resize;
			box-shadow: 0 0 2px 0 #555;
			transition: background .3s ease-in-out;
		}
		input[type="range"]::-ms-thumb {
			-webkit-appearance: none;
			height: 25px;
			width: 18px;
			border-radius: 6px;
			background: var(--thumbColor);
			cursor: ew-resize;
			box-shadow: 0 0 2px 0 #555;
			transition: background .3s ease-in-out;
		}
		/* Hover */
			input[type="range"]::-webkit-slider-thumb:hover {
				background: var(--thumbHoverColor);
			}
			input[type="range"]::-moz-range-thumb:hover {
				background: var(--thumbHoverColor);
			}
			input[type="range"]::-ms-thumb:hover {
				background: var(--thumbHoverColor);
			}

		/*-- Input Track --*/
		input[type=range]::-webkit-slider-runnable-track  {
			-webkit-appearance: none;
			box-shadow: none;
			border: none;
			background: transparent;
		}
		input[type=range]::-moz-range-track {
			-webkit-appearance: none;
			box-shadow: none;
			border: none;
			background: transparent;
		}
		input[type="range"]::-ms-track {
			-webkit-appearance: none;
			box-shadow: none;
			border: none;
			background: transparent;
		}


/*----- Stage Drag -----*/

	#Stage_drag {
		position: absolute;
		/* position: relative; */
		top: 130px;
		left: 0;
		width: 100%;
		height: calc(100% - 130px);
	}


	/*--- Promille Ergebnis ---*/
		.werteErgebnis {
			position: absolute;
			top: 0;
			top: -49px;
			left: calc(50% - 45px);
			width: 90px;
			text-align: center;
		}

		.promilleErgebnis span {
			padding: 7px 15px;
			display: inline-block;
			border-radius: 10px;
			color: #fff;
			font-size: 1.5em;
		}
		.promilleErgebnis > div {
			position: absolute;
			height: 100%;
			align-items: center;
			display: flex;
			margin: -1px 0 0 0;
			transform: translateX(-100%);
			color: #fff;
		}




	/*--- Stage Status ---*/
		#Stage_Status {
			position: absolute;
			top: 10px;
			left: 32%;
			width: 36%;
			height: 30.51%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		#Stage_Status .Status {
			display: none;
			width: 100%;
			width: 80%;
		}
		#Stage_Status .Status.visible {
			display: block;
		}
		#Stage_Status > .Status img {
			width: 100%;
			height: auto;
			max-width: 250px;
			max-width: 180px;
			margin: auto;
			display: block;
			transform: scale(1);
		}

		#Stage_Status .Status.animEmoji img {
			animation-name: animEmoji;
			animation-duration: .5s;
			animation-timing-function: ease-in-out;
			animation-iteration-count: 1;
		}
		@keyframes animEmoji {
			0% { transform: scale(1); }
			50% { transform: scale(1.1); }
			100% { transform: scale(1); }
		}
		/*@media screen and (min-width: 768px){
			#Stage_Status > div img {
				max-width: 180px;
			}
		}*/
		/* @media screen and (min-width: 1024px){
			#Stage_Status > div img {
				max-width: 230px;
			}
		} */

		/* Hand Gesture */
			.handGesture {
				position: absolute;
				bottom: 0;
				top: unset;
				left: 0;
				height: 60%;
			}
			.handGesture img {
				position: absolute;
				bottom: 0;
				top: unset;
				left: 0;
				height: 100%;
				width: auto;
				display: none;
			}
			.handGesture img.vsbl {
				display: block;
			}



	/*--- Drag Elements ---*/
		.dragcontainer {
			position: absolute;
			/*width: 140px;
			height: 170px;*/
			width: 20%;
			height: 16%;
			height: 0;
			z-index: 11;
		}
		.dragwrapper {
			width: 100%;
		}
		/* Images */
			.dragcontainer .drag-element {
				z-index: 10;
			}
			.dragcontainer.currentDragcontainer {
				z-index: 100;
			}
			.dragcontainer .drag-element.ui-draggable.original {
				z-index: 101;
			}
			.dragcontainer .drag-element.ui-draggable.clone {
				z-index: 102;
			}
			.dragcontainer .drag-element, 
			.dragcontainer .placeholder-element {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				border: 1px solid #c9c9c9;
				border-radius: 500px;
				/* box-shadow: 0 0 4px #c9c9c9; */
				box-sizing: border-box;
			}
			.dragcontainer .placeholder-element {
				opacity: .2;
			}
		/* Text */
			.dragcontainer .name {
				position: absolute;
				top: 0;
				left: 0;
				/*bottom: 0;*/
				padding-top: 100%;
				margin-top: 5px;
				margin-top: 2px;
				width: 100%;
				text-align: center;
			}
			.dragcontainer .name p {
				margin: 0;
				font-size: 12px;
				color: #fff;
			}
			.dragcontainer .name p span {
				white-space: nowrap;
			}

		/*--- Drag Elements Positions ---*/

			/* Smartphone */
				#drag_01 {
					top: 0%;
					left: 6.5%;
				}
				#drag_02 {
					top: 0%;
					left: 75.5%;
				}
				#drag_03 {
					top: 24.5%;
					left: 6.5%;
				}
				#drag_04 {
					top: 24.5%;
					left: 75.5%;
				}
				#drag_05 {
					top: 49%;
					left: 6.5%;
				}
				#drag_06 {
					top: 49%;
					left: 75.5%;
				}
				#drag_07 {
					top: 35%;
					left: 30%;
				}
				#drag_08 {
					top: 35%;
					left: 53%;
				}
				#drag_09 {
					top: 59%;
					left: 30%;
				}
				#drag_10 {
					top: 59%;
					left: 53%;
				}
				#drag_11 {
					top: 73.5%;
					left: 75.5%;
				}



/*----- Infoblatt -----*/
	#Stage_infoblatt {
		position: fixed;
		top: unset;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 20;
		display: none;
	}
	#Stage_infoblatt.visible {
		display: block;
	}
	/* Wrapper */
		#Stage_infoblatt {
			position: absolute;
			top: unset;
			bottom: 20px;
			left: 20px;
			right: 20px;
			width: calc(100% - 40px);
			max-width: 800px;
			height: auto;
			margin-left: auto;
			margin-right: auto;
			box-sizing: border-box;
		}
		@media screen and (min-width: 768px){
			#Stage_infoblatt {
				top: 0;
				bottom: unset;
			}
		}
		#Stage_infoblatt .infoblatt_wrapper {
			position: relative;
			padding: 20px;
			border: 2px solid #000;
			border-radius: 10px;
			background-color: #fff;
			font-size: 16px;
		}



	/* Close Button */
		.close-button {
			position: absolute;
			top: unset;
			bottom: -10px;
			left: unset;
			right: -10px;
			width: 40px;
			height: 40px;
			box-sizing: border-box;
			border: 2px solid #000;
			border-radius: 100px;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
		.close-button > div {
			position: absolute;
			height: 2px;
			width: 30px;
			background-color: #000;
			transform-origin: 50% 50%;
		}
		.close-button > div:first-child {
			transform: rotate(45deg);
		}
		.close-button > div:nth-child(2) {
			transform: rotate(-45deg);
		}
		/* Hover */
			.close-button:hover {
				background: #000;
			}
			.close-button:hover > div {
				background: #fff;
			}

	/* Text Elements */
		/* Info Text */
			#Stage_infoblatt .infoblatt {
				display: none;
				margin-bottom: 10px;
			}
			#Stage_infoblatt .infoblatt.visible {
				display: block;
			}
		/* Info Text */
			#Stage_infoblatt .drinkInfo {
				display: none;
			}
			#Stage_infoblatt .drinkInfo.visible {
				display: block;
			}


/*---- Drink List (bisher konsumierte Getränke) -----*/
	/* List Handler */
		.drinkList .listHandler {
			position: absolute;
			left: unset;
			top: 81px;
			right: 0;
			z-index: 999;
		}
		.listHandlerButton {
			background-color: var(--buttonColor);
			height: 40px;
			width: 70px;
			border-radius: 10px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			cursor: pointer;
		}
		.listHandlerButton:hover {
			opacity: .8;
		}

		/* Arrow */
			.arrow {
				width: 10px;
				height: 10px;
				margin-top: 15.5px;
				margin-left: 11.5px;
				float: left;
				border: 2px solid #fff;
				border-top: none;
				border-right: none;
				transform: rotate(45deg);
				transition: transform .3s linear;
			}
			.close .arrow {
				transform: rotate(225deg);
			}

		/* Number Of Drinks*/
			.numberOfDrinks {
				/* position: absolute;
				top: -20px;
				left: unset;
				right: 5px; */
				float: right;
				height: 40px;
				width: 40px;
				/* background-color: #eca922; */
				/* border-radius: 100px; */
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 1.4em;
				animation-iteration-count: 1;
				animation-duration: .6s;
				animation-timing-function: linear;
			}
			.numberOfDrinks.anim {
				animation-name: numberFontSize;
				background-color: #e8a724;
			}
			@keyframes numberFontSize {
				0% { font-size: 1.4em; }
				50% { font-size: 3em; }
				100% { font-size: 1.4em; }
			}

	/* List */
		.drinkList .listWrapper {
			width: 300px;
			height: auto;
			max-height: calc(100% - 81px);
			position: absolute;
			left: unset;
			top: 81px;
			right: -300px;
			z-index: 998;
			padding: 0 10px 40px;
			background-color: #fff;
			border: 2px solid #000;
			border-right: none;
			border-radius: 10px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			overflow: scroll;
			transition: right .3s linear;
		}
		.drinkList .listWrapper.fadeIn {
			right: 0;
		}
		/*.drinkList .listWrapper:after {
			content: '';
			width: 100%;
			height: 50px;
			background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
			position: absolute;
			top: unset;
			bottom: 0;
			left: 0;
			right: 0;
		}*/
		.drinkList .listWrapper table thead {
			height: 40px;
		}
		.drinkList .listWrapper table tbody td:first-child {
			width: 50px;
		}
		.drinkList .listWrapper table tbody td:nth-child(2) {
			width: calc(100% - 50px);
		}


/*-- Counter ---*/
	.CounterContainer{
		display: flex;
		background: white;
		height: 50px;
		align-items: center;
		justify-content: center;
		position: absolute;
		padding: 15px;
		visibility: hidden;
	}
	.CounterContainer span{
		display: block;
		margin: 0 4px;
		font-weight: 600;
		color: red;
	}




/*------------- Media Queries -------------*/
	@media screen and (min-width: 768px){
		#Stage-wrapper {
			height: 100vh;
			padding-top: 0;
		}
		.reloadBtn-wrapper {
			top: calc(50% + 50px);
			transform: translateY(-50%);
			left: unset;
			width: auto;
			right: 7%;
		}
		.promilleErgebnis > div {
			display: inline;
			position: static;
			margin: 0;
		}
		#Stage_drag {
			top: 100px;
			height: 560px;
		}
		.werteErgebnis {
			top: 50%;
			left: 10%;
			width: 20%;
			transform: translateY(-50%);
		}
		#Stage_Status {
			top: 170px;
			left: 35%;
			width: 30%;
			height: 40%;
			height: 200px;
		}
		.dragcontainer {
			width: 14%;
			height: 24%;
			max-width: 130px;
			max-height: 160px;
		}
		.dragcontainer .name p {
			font-size: 1.6vw;
		}
		#drag_01 {
			top: 0;
			left: 5.9%;
		}
		#drag_02 {
			top: 0;
			left: 20.5%;
		}
		#drag_03 {
			top: 0;
			left: 35.2%;
		}
		#drag_04 {
			top: 0;
			left: 50%;
		}
		#drag_05 {
			top: 0;
			left: 64.6%;
		}
		#drag_06 {
			top: 0;
			left: 79.5%;
		}
		#drag_07 {
			top: unset;
			bottom: 20px;
			left: 5.9%;
		}
		#drag_08 {
			top: unset;
			bottom: 20px;
			left: 20.5%;
		}
		#drag_09 {
			top: unset;
			bottom: 20px;
			left: 35.2%;
		}
		#drag_10 {
			top: unset;
			bottom: 20px;
			left: 50%;
		}
		#drag_11 {
			top: unset;
			bottom: 20px;
			left: 64.6%;
		}
		#drag_12 {
			top: unset;
			bottom: 20px;
			left: 79.5%;
		}
		#Stage_infoblatt {
			left: unset;
			right: 20px;
			width: calc(50% - 20px);
		}
	}
	@media screen and (min-width: 1024px){
		.dragcontainer {
			width: 130px;
			height: 160px;
		}
		.dragcontainer .name p {
			font-size: 16px;
		}
	}