*
{
	margin-top: 0;
	box-sizing: border-box;
	user-select: none;
}
html,
body
{
    height: 100%;
}

body
{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 1.5vh;
	background-color: #A29C6C;
}

.app
{
	height: 100%;
	overflow: hidden;
}
	.types
	{
		height: 6%;
		background: #bcbd79;
	}
	.sounds
	{
		height: 94%;
		position: relative;
	}
		.foreground
		{
			height: 85%;
			background-image: url(back.png);
			background-size: 100% 100%;
		}
			.primary
			{
				height: 33.33%;
			}
				.primary span
				{
					font-size: 150%;
					color: #FFF6C4;
					position: absolute;
					left: 2%;
					bottom: 18%;
				}
				.primary .bars
				{
					width: 78.5%;
					height: 100%;
					margin-left: 11%;
					display: flex;
					/*background: rgba(0,255,0, 0.2);*/
				}
					.primary .bars div
					{
						margin: 5% 0;
						width: 25%;
						border-right: 5px dashed rgba(255,255,255, 0.15);
					}
			.middle
			{
				height: 33.33%;
			}
				.middle span
				{
					font-size: 150%;
					position: absolute;
					color: #FFF6C4;
					left: 2%;
					bottom: 55%;
				}
			.secondary
			{
				height: 33.33%;
			}
				.secondary span
				{
					font-size: 150%;
					color: #071E22;
					position: absolute;
					left: 2%;
					top: 3%;
				}
		.background
		{
			height: 15%;
			background: #A29C6C;
		}
			.background span
			{
				font-size: 150%;
				color: #071E22;
				position: absolute;
				left: 2%;
				bottom: 6%;
			}

@keyframes FrontWarning 
{
	0%
	{
		background-color: rgba(255,0,0, 0);
	}
	20%
	{
		background-color: rgba(255,0,0, 0.2);
	}
	40%
	{
		background-color: rgba(255,0,0, 0);
	}
	55%
	{
		background-color: rgba(255,0,0, 0.2);
	}
	70%
	{
		background-color: rgba(255,0,0, 0);
	}
	80%
	{
		background-color: rgba(255,0,0, 0.2);
	}
	90%
	{
		background-color: rgba(255,0,0, 0);
	}
	95%
	{
		background-color: rgba(255,0,0, 0.2);
	}
	100%
	{
		background-color: rgba(255,0,0, 0);
	}
}
.primary.warning
{
	animation-name: FrontWarning;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

.types ul,
.background ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.background ul
{
	width: 80%;
	/*height: 80%;*/
	margin-left: 12.5%;
	flex-wrap: wrap;
	align-content: space-evenly;
}
	.types li,
	.background li
	{
		font-size: 125%;
		background: rgba(255,255,255, 0.5);
		padding: 1vh 2vh;
		margin: 0 0.5vh;
		border-radius: 200px;
		cursor: pointer;
	}
	.background li
	{
	}
	.types li:hover,
	.background li:hover,
	.types li.active,
	.background li.active
	{
		background: rgba(255,255,255, 0.9);
	}
	.background li
	{
		font-size: 1.5vw;
		padding: 1.2vh 2.4vh;
		white-space: nowrap;
	}
		.background li i
		{
			margin-right: 0.25vw;
		}

span.extra
{
	position: absolute;
	right: 1.5vw;
	top: 2vh;
	font-size: 2vh;
	opacity: 0.66;
}

ul.elements
{
	margin: 0;
	padding: 0;
	list-style: none;
}
	ul.elements li
	{
		position: absolute;
		left: 25%;
		top: 50%;
		width: 9%;
		height: 16%;
		cursor: pointer;
		background-color: rgba(255,255,255, 0.1);
		border-radius: 50%;
		color: #fff;
	}
	ul.elements li.active
	{
		background-color: rgba(255,255,255, 0.25);
	}
		ul.elements li .inside
		{
			width: 100%;
			height: 100%;
			position: relative;
		}
			ul.elements li .img
			{
				position: absolute;
				width: 100%;
				height: 100%;
				/*background-image: url(cowbell.png);*/
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				filter: grayscale(100%) contrast(90%) brightness(110%);
				transition: transform 0.5s;
			}
			li[data-zone="1"] .img
			{
				transform: scale(0.9);
			}
			li[data-zone="2"] .img
			{
				transform: scale(0.8);
			}
			ul.elements li span
			{
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 150%;
				opacity: 0.5;
				transition: 0.5s;
			}

			@keyframes activeBell 
			{
				0%{ transform: rotate(0) scale(1); }	
				15%{ transform: rotate(10deg);  }	
				25%{ transform: scale(1.05); }	
				50%{ transform: rotate(0) scale(1); }	
				65%{ transform: rotate(-10deg);  }	
				75%{ transform: scale(1.05); }	
				100%{ transform: rotate(0) scale(1); }		
			}

			ul.elements li.active .img
			{
				filter: grayscale(0) brightness(125%);
				animation-name: activeBell;
				animation-duration: 1s;
				animation-iteration-count: infinite;
			}
			ul.elements li.active span
			{
				opacity: 1;
				font-size: 175%;
			}

.main_interaction
{
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	right: 1.75%;
	top: 10%;
	width: 7%;
	height: 73%;
}
	.main_interaction .play
	{
		width: 90%;
	}
	.main_interaction .export
	{
		width: 100%;
	}
	.main_interaction .clear
	{
		width: 80%;
	}
	.main_interaction .help
	{
		width: 80%;
	}
		.main_interaction button
		{
			position: relative;
			margin-bottom: 0.5vh;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 100%;
			width: 100%;
			border: 0;
			border-radius: 50%;
			cursor: pointer;
			background: #d3d296;
		}
		.main_interaction button[disabled]
		{
			opacity: 0.5;
		}
			.main_interaction button span
			{
				position: absolute;
				display: block;
				width: 80%;
				height: 80%;
				left: 10%;
				top: 10%;
				opacity: 0.2;
				background-image: url(play.svg);
				background-position: center center;
				background-size: 50%;
				background-repeat: no-repeat;
			}
			.main_interaction .play button span
			{
				background-image: url(play.svg);
			}
			.main_interaction .play button.record span
			{
				background-image: url(record.svg);
				opacity: 0.5;
			}
			.main_interaction .play button.stop span
			{
				background-image: url(stop.svg);
			}
			.main_interaction .export button span
			{
				background-image: url(export.svg);
			}
			.main_interaction .clear button span
			{
				background-image: url(exit.svg);
			}
			.main_interaction .help button span
			{
				background-image: url(help.svg);
			}
	.main_interaction div > span
	{
		color: #FFF6C4;
		display: block;
		text-align: center;
		font-size: 2vh;
		margin-bottom: 0.5vh;
	}
	.main_interaction div > span.s
	{
		display: none;
	}
	.main_interaction .timer
	{
		font-size: 180%;
		margin-bottom: 40%;
		padding: 0.75vh;
		line-height: 1;
		border-radius: 1vh;
		text-align: center;
		background-color: #A29C6C;
		color: #FFF6C4;
	}

#home_screen
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(0,0,0, 0.8);
	color: #bcbd79;
	font-size: 2vw;
	z-index: 2;
}
h1
{
	margin-bottom: 2.5vh;
}
#home_screen p
{
	margin-left: 3vw;
	margin-right: 3vw;
	margin-bottom: 5vh;
	color: #fff;
}
#home_screen video
{
	height: 50vh;
	border: 15px solid #fff;
	margin-bottom: 2.5vh;
}
#home_screen button
{
	background-color: #bcbd79;
	border-radius: 100px;
	font-size: 2.5vw;
	border: 0;
	padding: 0.75vh 2vw;
	cursor: pointer;
}
ul.languages
{
	position: fixed;
	top: 3.5%;
	left: 1.5%;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 5%;
}
	ul.languages li
	{
		padding-top: 100%;
		border-radius: 50%;
		background-image: url(flag-hu.png);
		background-position: center;
		background-size: 66%;
		background-repeat: no-repeat;
		background-color: rgba(255,255,255, 0.33);	
		cursor: pointer;
	}
	ul.languages li.en
	{
		background-image: url(flag-en.png);
		display: none;
	}

#help_screen
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0, 0.66);
	visibility: hidden;
	opacity: 0;
	transition: 1s;
	z-index: 2;
}
#help_screen.visible
{
	visibility: visible;
	opacity: 1;
}
	#help_screen .step
	{
		position: fixed;
		left: 10%;
		top: 15%;
		color: #fff;
		font-size: 1.25vw;
		line-height: 1.3;
		text-align: center;
		width: 15%;
		opacity: 0;
		transition: 1s;
	}
	#help_screen .step.visible
	{
		opacity: 1;
	}
		#help_screen img
		{
			max-width: 50%;
			margin-bottom: 5%;
		}
		#help_screen span
		{
			display: block;
			margin-bottom: 5%;
		}
#help_screen .step.bell_drag
{
	left: 31%;
	top: 34%;
}
#help_screen .step.front_limit
{
	left: 15%;
	top: 60%;
}
#help_screen .step.choosing_type
{
	left: 43%;
	top: 5%;
}
	#help_screen .step.choosing_type img
	{
		transform: rotate(180deg);
		max-width: 40%;
	}
#help_screen .step.choosing_back
{
	left: 45%;
	top: auto;
	bottom: 10%;
}
	#help_screen .step.choosing_back img
	{
		max-width: 40%;
	}
#help_screen .step.recording
{
	left: auto;
	right: 5%;
	top: 10%;
}
	#help_screen .step.recording img
	{
		transform: rotate(270deg);
		max-width: 40%;
	}
#help_screen .step.exit
{
	left: auto;
	right: 15%;
	top: auto;
	bottom: 5%;
}


@keyframes Loading 
{
	0%{ transform: rotate(0deg); }	
	100%{ transform: rotate(360deg); }	
}

.exportDialog .loading,
.app.loading .middle
{
	display: flex;
	justify-content: center;
	align-items: center;
}
	.exportDialog .loading::before,
	.app.loading .middle::before
	{
		content: "";
		display: block;
		width: 8vw;
		height: 8vw;
		box-sizing: border-box;
		border: 1.5vw solid rgba(255,255,255, 0.15);
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-radius: 50%;
		animation: Loading 1s linear infinite;
	}
	.exportDialog .loading > *
	{
		display: none;
	}
	
.app.loading ul,
.app.loading .main_interaction,
.app.loading span
{
	display: none;
}

.exportDialog
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #A29C6C;
	font-size: 3vh;
	display: none;
}
	.exportDialog .second
	{
		width: 100%;
	}
	.exportDialog .first,
	.exportDialog .second form
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	.exportDialog .second
	{
		display: none;
	}
	.exportDialog.email .second
	{
		display: flex;
		justify-content: center;
	}
	.exportDialog.email .first
	{
		display: none;
	}
		.exportDialog ul
		{
			padding-left: 0.5em;
			font-weight: bold;
			opacity: 0.5;
			font-size: 110%;
		}
			.exportDialog li
			{
				margin-bottom: 0.5vh;
			}
		.exportDialog input
		{
			border: 1px solid #ddd;
			padding: 1vw 2vh;
			font-size: 100%;
			border-radius: 100px;
			margin-bottom: 1vh;
			outline: none;
			min-width: 33%;
			text-align: center;
		}
		.exportDialog button
		{
			border: 0;
			padding: 1.5vw 3vh;
			border-radius: 100px;
			margin-bottom: 2vh;
			cursor: pointer;
			background: #d3d296;
			font-size: 100%;
		}
		.exportDialog.disabled button.send,
		.exportDialog.disabled button.remove
		{
			visibility: hidden;
		}
			.exportDialog button i
			{
				margin-right: 0.5vw;
			}
		.exportDialog button.new
		{
			margin-bottom: 5vh;
		}
		.exportDialog button.remove
		{
			background: #d39896;
		}
		.exportDialog .second form p
		{
			display: none;
		}
		.exportDialog .second form.success input,
		.exportDialog .second form.success button
		{
			display: none;
		}
		.exportDialog .second form.success p
		{	
			display: block;
		}