body{
	background:url(../images/startseite.jpg) 50% 50% fixed no-repeat;
	background-size:cover;
	margin: 0px 5% 5%;
	font-family: Segoe UI, Helvetica Neue;
	padding:0;
}

header{
	display:none;
}

footer {
	float: right;
}

footer p{
	color: white;
}

footer a{
	text-decoration: none;
	color: white;
}

#fab img{
	height:75px;
	bottom:0;
}

#beatles img{
	width:225px;
	float:right;
	bottom:0;
	margin-top:-75px;
}

#marker {
	position:fixed;
	height: 100%;
	width: 100%;
}
#marker #m1{
	position:absolute;
	left:0%;
	top:35%;
}
	#marker #m2{
		position:absolute;
		left:0%;
		top:54%;
	}
#marker #m3{
	position:absolute;
	left:14%;
	top:25%;
}
#marker #m4{
	position:absolute;
	left:19%;
	top:40%;
}
#marker #m5{
	position:absolute;
	left:23.5%;
	top:-7.5%;
}
	#marker #m6{
		position:absolute;
		left:40%;
		top:54%;
	}
#marker #m7{
	position:absolute;
	left:41%;
	top:25%;
}
#marker #m8{
	position:absolute;
	left:47%;
	top:40%;
}

#marker #m9{
	position:absolute;
	left:65.5%;
	top:-6%;
}

#marker #m10{
	position:absolute;
	left:70%;
	top:40%;
}

#marker #m11{
	position:absolute;
	left:72%;
	top:25%;
}

	#marker #m12{
		position:absolute;
		left:75%;
		top:54%;
	}

#marker #m13{
	position:absolute;
	left:2%;
	top:20%;
}

/**/
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

#marker #m1 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker_red.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;

}
#marker #m1 a:hover{
	width: 144px;
	height: 50px;
	display: block;
	background: url(../images/marker_bandinfo.png);
	background-size: 144px;
		animation-name: none;
			-webkit-animation-name: none;
}

	#marker #m2 a{
		width: 126px;
		height: 40px;
		display: block;
		background: url(../images/marker-u-presse.png);
		background-size: 126px;
	}
	#marker #m2 a:hover{
		width: 126px;
		height: 40px;
		display: block;
		background: url(../images/marker-u-presse-hover.png);
		background-size: 126px;
	}

#marker #m3 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;
}
#marker #m3 a:hover{
	width: 144px;
	height: 50px;
	display: block;
	background: url(../images/marker_hoerproben.png);
	background-size: 144px;
		animation-name: none;
			-webkit-animation-name: none;
}

#marker #m4 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;
}
#marker #m4 a:hover{
	width: 157px; /* FOTO */
	height: 50px;
	display: block;
	background: url(../images/marker_band_martin-schurig.png);
	background-size: 157px;
		animation-name: none;
			-webkit-animation-name: none;
}

#marker #m5 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;
}
#marker #m5 a:hover{
	width: 144px;
	height: 50px;
	display: block;
	background: url(../images/marker_videos.png);
	background-size: 144px;
		animation-name: none;
			-webkit-animation-name: none;
}

	#marker #m6 a{
		width: 191px;
		height: 40px;
		display: block;
		background: url(../images/marker-u-gaestebuch.png);
		background-size: 191px;
	}
	#marker #m6 a:hover{
		width: 191px;
		height: 40px;
		display: block;
		background: url(../images/marker-u-gaestebuch-hover.png);
		background-size: 191px;
	}

#marker #m7 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;
}
#marker #m7 a:hover{
	width: 157px; /* FOTO */
	height: 50px;
	display: block;
	background: url(../images/marker_band_adrian-militaru.png);
	background-size: 157px;
		animation-name: none;
			-webkit-animation-name: none;
}

#marker #m8 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;
}
#marker #m8 a:hover{
	width: 157px; /* FOTO */
	height: 50px;
	display: block;
	background: url(../images/marker_band_axel-weimann.png);
	background-size: 157px;
		animation-name: none;
			-webkit-animation-name: none;
}

#marker #m9 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;
}
#marker #m9 a:hover{
	width: 144px;
	height: 50px;
	display: block;
	background: url(../images/marker_fotos.png);
	background-size: 144px;
		animation-name: none;
			-webkit-animation-name: none;
}

#marker #m10 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;
}
#marker #m10 a:hover{
	width: 157px; /* FOTO */
	height: 50px;
	display: block;
	background: url(../images/marker_band_matt-fedel.png);
	background-size: 157px;
		animation-name: none;
			-webkit-animation-name: none;
}

#marker #m11 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;
}
#marker #m11 a:hover{
	width: 178px;
	height: 50px;
	display: block;
	background: url(../images/marker_home-concerts.png);
	background-size: 178px;
		animation-name: none;
			-webkit-animation-name: none;
}

	#marker #m12 a{
		width: 153px;
		height: 40px;
		display: block;
		background: url(../images/marker-u-kontakt.png);
		background-size: 153px;
	}
	#marker #m12 a:hover{
		width: 152px;
		height: 40px;
		display: block;
		background: url(../images/marker-u-kontakt-hover.png);
		background-size: 152px;
	}

#marker #m13 a{
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/marker.png);
	background-size: 50px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;
}
#marker #m13 a:hover{
	width: 144px;
	height: 50px;
	display: block;
	background: url(../images/marker_tourplan.png);
	background-size: 144px;
		animation-name: none;
			-webkit-animation-name: none;
}

#marker #bandinfo{
	position:absolute;
	left:0%;
	top:30%;
}
#marker #bandinfo a{
	width: 100px;
	height: 100px;
	display: block;
	background: url(../images/70er_bandinfo.png);
	background-size: 100px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;

}
#marker #bandinfo a:hover{
	width: 100px;
	height: 100px;
	display: block;
	background: url(../images/70er_bandinfo_hover.png);
	background-size: 100px;
		animation-name: none;
			-webkit-animation-name: none;
}

#marker #sieben{
	position:absolute;
	left:80%;
	top:30%;
}
#marker #sieben a{
	width: 100px;
	height: 100px;
	display: block;
	background: url(../images/70er_party.png);
	background-size: 100px;
		animation-name: rotate; 
		animation-duration: 25s; 
		animation-iteration-count: 1000;
		animation-timing-function: linear;
			-webkit-animation-name: rotate; 
			-webkit-animation-duration: 25s; 
			-webkit-animation-iteration-count: 1000;
			-webkit-animation-timing-function: linear;

}
#marker #sieben a:hover{
	width: 100px;
	height: 100px;
	display: block;
	background: url(../images/70er_party_hover.png);
	background-size: 100px;
		animation-name: none;
			-webkit-animation-name: none;
}
	
	#foto_copy{
		color: white;
		margin: 0 0 0 0;
		text-align: right;
	}
	
	#foto_mobil{
		display:none;
	}

@media only screen and (aspect-ratio: 4/3){
	#marker #m3{
		position:absolute;
		left:12%;
		top:27%;
	}
	#marker #m5{
		position:absolute;
		left:23.5%;
		top:5%;
	}
	#marker #m9{
		position:absolute;
		left:65.5%;
		top:5%;
	}
}

@media only screen and (max-width: 900px){
#fab img{
	display:none;
}
#beatles img{
	display:none;
}
#header1{
	display:none;
}
header{
	border-bottom: 1px solid white;
	background-color:black;
	background: rgba(000, 000, 000, 0.65);
	display:block;
}
header h1 {
	margin-top:0px;
	margin-bottom:10px;
	padding-top: 15px;
	color: white;
	text-align:center;
}

header h1 a{
	text-decoration: none;
	color: white;
}
ul#navigation a{
	cursor: pointer;
	color: white;
	text-decoration: none;
}

ul#navigation a:hover{
	cursor: pointer;
	color: orange;
	text-decoration: none;
}

header ul li #active{
	color:orange;
}

#tpheight{
	height:50px;
	max-width:90%;
	bottom:0;
}

ul#navigation {
	cursor:default;
	margin: 0;
	padding: 0;
	text-align:center;
	font-size: 25px;
	padding-top:5px;
	padding-bottom:10px;
	background-color:white;
	background: rgba(255, 255, 255, 0.05);
}
ul#navigation li {
	list-style: none;
    display: inline;
	margin: 0;
	padding: 10px;
}
#marker #m1{
	display:none;
}
#marker #m2{
	display:none;
}
#marker #m3{
	display:none;
}
#marker #m4{
	display:none;
}
#marker #m5{
	display:none;
}
#marker #m6{
	display:none;
}
#marker #m7{
	display:none;
}
#marker #m8{
	display:none;
}
#marker #m9{
	display:none;
}
#marker #m10{
	display:none;
}
#marker #m11{
	display:none;
}
#marker #m12{
	display:none;
}
#marker #m13{
	display:none;
}
#marker #sieben{
	display:none;
}
#marker #bandinfo{
	display:none;
}
#foto_mobil{
	display:block;
	color:white;
}
}