#keyboard {
	display:none;
	position:fixed;
	right:0; bottom:0; left:0;
	z-index:1000;
}

body.buzzer {
	touch-action: pan-x pan-y;
}

body.buzzer.input {
	overflow:hidden;
	background-color:var(--color-blue);
}

body.buzzer.output {
	overflow:hidden;
	background-color:var(--color-blue);
	padding-top:60px;
}

.container {
	display: grid;
	grid-template-columns: 1fr 800px 1fr;
	grid-template-rows: 1fr 800px 1fr;
    width: 100vw; height:100vh;
	position:relative;
}

form {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	
	position: relative;
	padding:170px 9% 0;
	
	background-color: var(--color-yellow);
	border-radius:100%;
	color:var(--buzzer-text-color);
	font-size:18px;
	z-index:99;
}

.title {
	position: relative;
	z-index: 1;
	margin: 60px 0 35px;
	color: var(--buzzer-text-color);
	font-size: 42px;
	font-weight: 600;
	text-align:center;
}

	.title span {
		display:block;
		margin-top:15px;
		font-size: 34px;
	}

.hand-container {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	
	position: relative;
}

.hand {
	position: absolute;
	right:-150px; bottom:-110px;
	display:block;
	width: var(--hand-size); height: var(--hand-size);
	background-color: transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;	
	background-image:url(../img/P_Hand_Buzzer.png);
	z-index:101;
}

#danke {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	
	position:relative;
	transform: scale(0);
	transition: all 350ms ease-in-out;
	
	width:800px; height: 800px;
	line-height: 200px;
	position:absolute;
	top:0; left:0;
    opacity: 0;
    
    text-align: center;
    padding: 0 0 0 0;
    background: var(--color-yellow);
	color:#000;
    z-index: 100;
	border-radius:100%;
}

	#danke h2 {
		padding:50px 0 0 0;
		font-size: 200px;
		color:#000;
    }
	
	#danke h2 span.en {
		display:block;
		font-size: 45%;
	}
	
    #danke.show {
		transform: scale(1);
        opacity: 1;
    }

.button-container {
	margin: 0 80px 35px;
	text-align: center;
}

	.button-container button {
		outline: 0;
		cursor: pointer;
		position: relative;
		display: inline-block;
		background: #ffffff;
		border: none;
		padding: 40px 0;
		font-size: 24px;
		font-weight: 600;
		line-height: 1;
		overflow: hidden;
		width:100%;
		transition: 0.3s ease;
	}

		.button-container button span {
			position: relative;
			z-index: 1;
			color: var(--buzzer-text-color);
			transition: 0.3s ease;
		}

		.button-container button:before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			display: block;
			background:  var(--buzzer-text-color);
			width: 100%;
			height: 30px;
			margin: -15px 0 0 -15px;
			opacity: 0;
			transition: 0.3s ease;
		}
		
		.button-container button:hover,
			background: var(--buzzer-text-color);
		}

		.button-container button:hover,
		.button-container button:active,
		.button-container button:focus {
			border-color: #000;
		}

			.button-container button:hover span,
			.button-container button:active span,
			.button-container button:focus span {
				color: var(--color-yellow);
			}

			.button-container button:active span,
			.button-container button:focus span {
				color: var(--color-yellow);
			}
			.button-container button:active:before,
			.button-container button:focus:before {
				opacity: 1;
				transform: scale(10);
			}
			
.input-container {
	position: relative;
	margin: 0 60px 50px;
}

	.input-container .chars-length-wrapper {
		position:absolute;
		top:0; right:0;
	}
	
		.input-container .chars-length-wrapper.warn .chars-length{
			/*animation: blink 1s infinite;*/
		}
	
		.input-container .chars-length + .chars-length-max:before {
			content:"/";
		}

	.input-container input {
		outline: none;
		z-index: 1;
		position: relative;
		background: none;
		width: 100%;
		height: 60px;
		border: 0;
		color: #000;
		font-size: 24px;
		font-weight: 400;
	}

		.input-container input:focus ~ label {
			color: #000;
			transform: translate(-12%, -50%) scale(0.75);
		}

		.input-container input:focus ~ .bar:before,
		.input-container input:focus ~ .bar:after,
		.input-container input.active ~ .bar:before,
		.input-container input.active ~ .bar:after		{
			width: 50%;
		}

		.input-container input:valid ~ label {
			transform: translate(-12%, -50%) scale(0.75);
		}

	.input-container label {
		position: absolute;
		top: 0;
		left: 0;
		color: rgba(0, 0, 0, 1);
		font-size: 24px;
		font-weight: 300;
		line-height: 60px;
		transition: 0.2s ease;
	}

	.input-container .bar {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background: rgba(0, 0, 0, 1);
	}

		.input-container .bar:before, 
		.input-container .bar:after {
			content: "";
			position: absolute;
			background: #000;
			width: 0;
			height: 2px;
			transition: 0.2s ease;
		}

		.input-container .bar:before {
			left: 50%;
		}

		.input-container .bar:after {
			right: 50%;
		}

body.buzzer.output h1 {
	text-align:center;
	color:#fff;
	margin-bottom:80px;
}

body.buzzer.output h1 span {
	display:block;
	font-size:95%;
}

.total {
	position:fixed;
	bottom:10px; right:1%;
	display:inline-block;
	width:270px; height:270px;
	line-height:270px;
	font-size: 38px;
	font-family:"Meta Bold";
	color:#fff;
	text-align:center;
	background-color: transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	background-image:url(../img/spraydot-dense-red.svg);
}

.total:before {
	width:100%;
	font-size:26px;
	content:"Total";
	position:absolute;
	top:-45px; left:0;
	font-family:"Meta Regular";
	text-align:center;
}

.idea-list {
	width:100%;
	margin:auto;
	text-align:center;
}

.idea {
	width:100%;
	margin:0 auto;
	padding:0 20px;
	transition:all 1s ease-out;
}

	.idea label {
		position:relative;
		display:inline-block;
		width:auto;	height:105px;
		padding:14px 125px 0 125px;
		background-color: var(--color-red);
		border-radius:500px;
		color:#fff;
		font-size: 35px;
		transition:all .1s ease-in;
		white-space:nowrap;
	}
	

		.idea label span.en {
			display:block;
			font-size: 25px;
		}

	.idea span.count {
		position:absolute;
		right:12px; top:8px;
		display:inline-block;
		width:90px; height:90px; line-height:90px;
		padding:0;
		background-color: #fff !important;
		border-radius:100%;
		color:#000;
		font-size: 35px;
		box-shadow:0 0 8px rgba(0,0,0,.4);
		transition:all 1s ease-out;
		font-family:"Meta Regular";
	}

	.idea.buzzerPressed label {
		transform:scale(1.025);
		box-shadow:0 0 8px 8px rgba(255,250,205,.8);
	}

	.idea span.pos {
		position:absolute;
		left:12px; top:8px;
		display:inline-block;
		width:90px; height:90px; line-height:90px;
		padding:0;
		background-color: var(--color-red);
		border-radius:100%;
		color:#fff;
		font-size: 35px;
		box-shadow:0 0 4px rgba(0,0,0,.4) inset;
		transition:all 1s ease-out;
	}
	
	.idea[data-pos="1"] {
		transform: scale(1, 1);
		margin-bottom:20px;
		order:0;
	}

	.idea[data-pos="2"] {
		transform: scale(.9, .9);
		margin-bottom:10px;
		order:1;
	}
	
	.idea[data-pos="3"] {
		transform: scale(.8, .8);
		margin-bottom:0;
		order:2;
	}
	
	.idea[data-pos="4"] {
		transform: scale(.7, .7);
		margin-bottom:-10px;
		order:3;
	}
	
	.idea[data-pos="5"] {
		transform: scale(.6, .6);
		margin-bottom:-20px;
		order:4;
	}
	
	.idea[data-pos="6"] {
		transform: scale(.6, .6);
		order:5;
	}
	/*
	--color-work:var(--color-orange); /* 1
	--color-clima:var(--color-orange2); /* 2
	--color-asylum:var(--color-red); /* 3 
	--color-nuclear:var(--color-alertred); /* 4
	--color-lgbtq:var(--color-pink); /* 5
	--color-peace:var(--color-purple); /* 6
	*/
	
	.idea.idea-1 label,
	.idea.idea-1 span {
		background-color: var(--color-work);
	}
	
	.idea.idea-2 label,
	.idea.idea-2 span {
		background-color: var(--color-clima);
	}
	
	.idea.idea-3 label,
	.idea.idea-3 span {
		background-color: var(--color-asylum);
	}
	
	.idea.idea-4 label,
	.idea.idea-4 span {
		background-color: var(--color-nuclear);
	}
	
	.idea.idea-5 label,
	.idea.idea-5 span {
		background-color: var(--color-lgbtq);
	}
	
	.idea.idea-6 label,
	.idea.idea-6 span {
		background-color: var(--color-peace);
	}
	
	/*
	.idea[data-pos="1"] label,
	.idea[data-pos="1"] span {
		background-color: var(--color-orange);
	}
	
	.idea[data-pos="2"] label,
	.idea[data-pos="2"] span {
		background-color: var(--color-orange2);
	}
	
	.idea[data-pos="3"] label,
	.idea[data-pos="3"] span {
		background-color: var(--color-red);
	}
	
	.idea[data-pos="4"] label,
	.idea[data-pos="4"] span {
		background-color: var(--color-alertred);
	}
	
	.idea[data-pos="5"] label,
	.idea[data-pos="5"] span {
		background-color: var(--color-alertred);
	}
	
	.idea[data-pos="6"] label,
	.idea[data-pos="6"] span {
		background-color: var(--color-alertred);
	}
	*/

/*
	--color-orange:rgb(234,91,12); 
	--color-orange2:rgb(230,51,18); 
	--color-red:rgb(228,5,33); 
	--color-alertred:rgb(194,27,28); 
	--color-pink:rgb(221,0,126); 
	--color-purple:rgb(175,27,120); 
	--color-purple2:rgb(163,25,91); 
	--color-yellow:rgb(253,233,0); 
	--color-blue:rgb(59,64,96); 
	*/


#buttonBox {
	display:none;
	position:absolute;
	top:0; left:0;
	z-index:2000;
}

/*
.alternatives {
	position:absolute;
	top:0; right:0;
	background-color: transparent;
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.extra {
	position:absolute;
}

.extra label {
	opacity:0;
	display:inline-block;
	width:auto;	height:105px; line-height:105px;
	padding:0 45px 0 125px;
	background-color: var(--color-extra);
	border-radius:500px;
	color:#fff;
	font-size: 35px;
	transition:all 1s ease-out;
	animation:hideLate 20s ease-out 0s 1;
	color:#000;
	white-space:nowrap;
}
*/

/*
.extra:nth-of-type(odd) label {
	background-color: var(--color-purple);
}

.extra:nth-of-type(even) label {
	background-color: var(--color-purple2);
}
*/

.alternatives {
	width:100%;
	padding-top:10px;
	text-align:center;
}

.extra {
	position:relative;
	height:105px;
	width:100%;
	
	opacity:1;
	margin:0 auto 0;
	
	box-sizing: border-box;
	overflow:hidden;
	text-align:center;
	
	display:flex;
	justify-content:center;
	
	transition: all 1s ease-in;
}

	.adding,
	.removing {
		height:0;
		opacity:0;
		transform: scale(0);
	}

	.extra.small {
		margin-top:-10px;
		margin-bottom:-15px;
	}
	
	.extra.small + .extra {
		margin-top:5px;
	}

	.extra label {
		position:relative;
		opacity:1;
		display:inline-block;
		width:auto;	height:100%; line-height:105px;
		padding:0 30px 0 110px;
		background-color: var(--color-extra);
		border-radius:500px;
		font-size: 31px;
		color:#000;
		white-space:nowrap;
		
		transform: scale(.75, .75);
	}
	
		.extra.small label {
			transform: scale(.6, .6);
		}

	.extra span.megaphone {
		position:absolute;
		left:12px; top:8px;
		display:inline-block;
		width:90px; height:84%; line-height:90px;
		padding:0;
		border-radius:100%;
		color:#fff;
		box-shadow:0 0 4px rgba(0,0,0,.4) inset;
		
		background-image:url(../img/Megaphon_klein.png);
		background-size:75%;
		background-repeat:no-repeat;
		background-position:center;
		background-color:#fff;
	}

@keyframes expand {
	0% {
		transform:scale(0);
	}

    100% {
		transform:scale(.8, .8);
    }
}


@keyframes squeeze {
	0% {
		height:100%;
    }
	
	50% {
		height:50%;
    }

    100% {
		height: 0;
		
    }
}

@keyframes hideLate {
	0% {
		opacity:1;
	}

    88% {
		opacity: 1;
    }

    95% {
		opacity: .7;
    }

    100% {
		opacity: .25;
    }
}

.moveToLeft {
	/*animation: moveToLeftInit 5s linear 0s 1 normal, moveToLeft 5s linear 5s infinite alternate, moveY 12s linear 0s infinite alternate;*/
	animation: moveToLeftInit 5s linear 0s 1 normal, moveToLeft 5s linear 5s infinite alternate, moveY 15s linear 0s infinite alternate;
}

.moveToRight {
	animation: moveToRightInit 5s linear 0s 1 normal, moveToRight 5s linear 5s infinite alternate, moveY 15s linear 0s infinite alternate;
	/*animation: moveToRight 5s linear 0s 1 normal;*/
}

@-webkit-keyframes moveToRightInit {
    100% {
      left: 100%;
	  transform: translateX(-100%);
    }
}

@-webkit-keyframes moveToRight {
	0% {
		left: 100%;
		transform: translateX(-100%);

	}
    100% {
      left:0;
    }
}

@-webkit-keyframes moveToLeftInit {
    100% {
      right: 100%;
	  transform: translateX(100%);
    }
}

@-webkit-keyframes moveToLeft {
	0% {
		
		right: 100%;
		transform: translateX(100%);
	}
    100% {
      right:0;
    }
}

@-webkit-keyframes moveY {
    0% {
      top:100%;
    }
    100% {
      top:0;
    }
}

@keyframes blink {
	0% {opacity: 0}
	49%{opacity: 0}
	50% {opacity: 1}
}