body {
	padding: 38px 38px ;
	background: #1c5d5e url('../images/background.jpeg') no-repeat center center fixed;
	-webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
}

#player {
	text-align: center;
	padding: 50px 0;
	min-height: 400px;
}

.player {
		margin: 20px auto;
}

.player .progress-de, .player .progress-en, .player .progress-fr {
  /* position: absolute; */
  height: 2px;
  background-color: #7a0000;
  width: 0;
}

.icon-stop {
	color: #7a0000;
	animation: changecolor 0.2s ease-out;
}

button {
	width: 100%;
	display: block;
	margin: 0;
	padding: 8px;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	font-size: 18pt;
}

button:hover {
	cursor: pointer;
}


.de {
	background-color: #b5b6b9;
}

.en {
	background-color: #bda86c;
}

.fr {
	background-color: #b5844d;	
}

.controls button {
	background-color: transparent;
	background-size: 50px;
	display: inline-block;
	width: 50px;
	height: 50px;
	padding: 4px;
	animation: fadein 0.5s ease-out;
}

.controls img {
	width: 50px;
}

.restart {
	background: url('../images/restart.png');
}

.controls .icon-play {
	background: url('../images/play.png');
	background-size: 50px;
}

.controls .icon-stop {
	background: url('../images/pause.png');
	background-size: 50px;
}

.previous {
	background: url('../images/previous.png');
}

.next {
	background: url('../images/next.png');
}

.invisible {
	display: none;
	animation: fadeout 1s ease-out;
	animation: fadein 1s ease-out;
}

#logo-turm {
	position: absolute;
	left: 19px;
	top: 3px;
	width: 38px;
}

#logo-ecke {
	position: fixed;
	right: 19px;
	bottom: 19px;
	width: 38px;
}

@media screen and (max-width: 320px) {
	button {
		font-size: 15pt;
		padding: 6px;

	}
	
	#player {
		padding: 15px 0;
	}
}


@keyframes changecolor {
	from {
		color: #000000;
	}
	to {
		color: #7a0000;
	}
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeout {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}