@font-face {
	font-family:'Freshman';
	src:url('fonts/freshman.eot');
	src:url('fonts/freshman.eot?#iefix') format('embedded-opentype'),url('fonts/freshman.woff2') format('woff2'),url('fonts/freshman.woff') format('woff'),url('fonts/freshman.ttf') format('truetype'),url('fonts/freshman.svg#Freshman') format('svg');
	font-weight:normal;
	font-style:normal
}
@font-face {
	font-family:'Montserrat';
	src:url('fonts/montserrat-regular.eot');
	src:url('fonts/montserrat-regular.eot?#iefix') format('embedded-opentype'),url('fonts/montserrat-regular.woff2') format('woff2'),url('fonts/montserrat-regular.woff') format('woff'),url('fonts/montserrat-regular.ttf') format('truetype'),url('fonts/montserrat-regular.svg#Montserrat') format('svg');
	font-weight:normal;
	font-style:normal
}
@font-face {
	font-family:'Montserrat';
	src:url('fonts/montserrat-bold.eot');
	src:url('fonts/montserrat-bold.eot?#iefix') format('embedded-opentype'),url('fonts/montserrat-bold.woff2') format('woff2'),url('fonts/montserrat-bold.woff') format('woff'),url('fonts/montserrat-bold.ttf') format('truetype'),url('fonts/montserrat-bold.svg#Montserrat') format('svg');
	font-weight:bold;
	font-style:normal
}
@font-face {
	font-family:'Montserrat';
	src:url('fonts/montserrat-light.eot');
	src:url('fonts/montserrat-light.eot?#iefix') format('embedded-opentype'),url('fonts/montserrat-light.woff2') format('woff2'),url('fonts/montserrat-light.woff') format('woff'),url('fonts/montserrat-light.ttf') format('truetype'),url('fonts/montserrat-light.svg#Montserrat') format('svg');
	font-weight:100;
	font-style:normal
}
* {
	margin:0;
	padding:0;
	box-sizing:border-box
}
#Login,#FooterTemp,#Soundboard,#SoundButtons,#Impressum,#Datenschutz,#AGB {
	display:none
}
.clearfix:after {
	content:".";
	clear:both;
	display:block;
	visibility:hidden;
	height:0
}
html,body {
	padding:1px 0 0 0;
	width:100%;
	height:100%;
	background:url(../images/bg.jpg) no-repeat center center;
	background-size:cover;
	background-attachment:fixed
}
#app {
	max-width:1230px;
	width:100%;
	height:auto;
	margin:0 auto;
	position:relative
}
#app h1 {
	color:rgba(255,255,255,0.5);
	font:79px/81px 'Freshman',Arial,sans-serif;
	margin:115px 0 90px 0;
	text-transform:uppercase;
	text-align:center;
	text-shadow:-1px -1px 0 #fff,0px 0 0 #000,0px 0 12px #000,0px 0 12px #000;
	letter-spacing:17px
}
#app form {
	max-width:610px;
	margin:0 auto
}
#app form label {
	color:rgba(255,255,255,0.5);
	font:25px/69px 'Freshman',Arial,sans-serif;
	text-shadow:-1px -1px 0 #fff,0px 0 0 #000,3px 5px 8px rgba(0,0,0,0.84),3px 5px 8px rgba(0,0,0,0.84);
	width:210px;
	display:inline-block;
	letter-spacing:7px;
	text-transform:uppercase
}
#app form input {
	float:right;
	width:calc(100% - 210px);
	height:69px;
	border-radius:4px;
	background:#000;
	border:0;
	box-shadow:inset -1px -1px 0 0 rgba(255,255,255,0.5);
	outline:0;
	color:rgba(255,255,255,0.5);
	text-shadow:0 0 0 #fff,1px 1px 1px #000,3px 5px 8px rgba(0,0,0,0.84),3px 5px 8px rgba(0,0,0,0.84);
	padding:15px;
	font:25px/39px 'Freshman',Arial,sans-serif;
	letter-spacing:5px
}
#app form .error {
	height:30px;
	padding:15px 0 0 0;
	text-align:center;
	color:#f00;
	font:100 16px/30px 'Monserat',Arial,sans-serif;
	text-transform:uppercase
}
#app form button {
	margin:62px auto 0 auto;
	width:270px;
	height:74px;
	background:#030303;
	border-radius:4px;
	color:rgba(255,255,255,0.5);
	text-shadow:-1px -1px 0 #fff,0px 0 0 #000,0px 0 12px #000,0px 0 12px #000;
	font:34px/74px 'Freshman',Arial,sans-serif;
	border:0;
	display:block;
	outline:0;
	cursor:pointer
}
#app .label {
	margin:138px auto 0 auto;
	width:175px;
	height:83px;
	background:transparent url(../images/label.png) no-repeat center center
}
#app .info {
	margin:0 auto;
	width:350px;
	height:132px;
	border-radius:4px;
	background:#000;
	box-shadow:inset -1px -1px 0 0 rgba(255,255,255,0.5);
	color:#fff;
	text-align:center;
	font:18px/30px 'Freshman',Arial,sans-serif;
	letter-spacing:5px;
	padding:20px 0 0 0
}
#app .menu {
	position:fixed;
	top:0;
	left:0;
	z-index:200;
	width:100%;
	height:50px;
	background:#0b0b0c;
	box-shadow:inset -1px -1px 0 0 rgba(255,255,255,0.5),0px 4px 10px 0 rgba(0,0,0,0.75)
}
#app .menu .button {
	width:50px;
	height:50px;
	background:#0b0b0c url(../images/menu.png) no-repeat center center;
	background-size:contain;
	cursor:pointer;
	margin:0;
	box-shadow:inset -1px -1px 0 0 rgba(255,255,255,0.5);
	transition:margin .4s 0s ease-in-out
}
#app .menu .button.open {
	margin:0 0 0 250px;
	background:#0b0b0c url(../images/menu_close.png) no-repeat center center;
	background-size:contain;
	transition:margin .4s 0s ease-in-out
}
#app .menu .menuClosed {
	position:fixed;
	top:0;
	left:-250px;
	height:100%;
	width:250px;
	background:#0b0b0c;
	box-shadow:inset -1px -1px 0 0 rgba(255,255,255,0.5),7px 0 10px 0 rgba(0,0,0,0.75);
	transition:left .4s 0s ease-in-out
}
#app .menu .menuOpen {
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:250px;
	background:#0b0b0c;
	box-shadow:inset -1px -1px 0 0 rgba(255,255,255,0.5),7px 0 10px 0 rgba(0,0,0,0.75);
	transition:left .4s 0s ease-in-out
}
#app .menu .headline {
	height:50px;
	color:#fff;
	text-align:center;
	font:30px/50px 'Freshman',Arial,sans-serif;
	letter-spacing:4px
}
#app .menu a {
	height:50px;
	width:calc(100% - 2px);
	display:block;
	text-decoration:none;
	color:#fff;
	text-align:center;
	font:25px/50px 'Freshman',Arial,sans-serif;
	letter-spacing:4px;
	background:#0b0b0c;
	border-radius:5px;
	margin:0 0 1px 0;
	box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.5),inset -1px -1px 0 0 rgba(255,255,255,0.5)
}
#app .menu a:nth-child(2n) {
	box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.5);
	background:#1d1d1d
}
#app .farid,#app .majoe,#app .jasko,#app .summer,#app .kolle {
	width:100%;
	margin:120px 0 0 0;
	position:relative
}
#app .kolle {
	margin:120px 0 120px 0
}
#app .farid .head,#app .majoe .head,#app .jasko .head,#app .summer .head,#app .kolle .head {
	width:275px;
	position:absolute;
	height:100%;
	background-size:contain
}
#app .farid .head {
	background-color:transparent;
	background-image:url(../images/farid.png);
	background-repeat:no-repeat;
	background-position:center center
}
#app .majoe .head {
	background-color:transparent;
	background-image:url(../images/majoe.png);
	background-repeat:no-repeat;
	background-position:center center
}
#app .jasko .head {
	background-color:transparent;
	background-image:url(../images/jasko.png);
	background-repeat:no-repeat;
	background-position:center center
}
#app .summer .head {
	background-color:transparent;
	background-image:url(../images/summer.png);
	background-repeat:no-repeat;
	background-position:center center
}
#app .kolle .head {
	background-color:transparent;
	background-image:url(../images/kollegah.png);
	background-repeat:no-repeat;
	background-position:center center
}
#app .buttons {
	float:right;
	width:calc(100% - 275px)
}
#app .buttons .buttonWrap {
	width:220px;
	height:60px;
	background:#0d0d0e;
	border-radius:28px;
	float:left;
	margin:0 9px 18px 9px;
	padding:10px 0 10px 7px;
	cursor:pointer
}
#app .buttons .button {
	width:40px;
	height:40px;
	background:#070707;
	border-radius:100%;
	position:relative;
	float:left;
	border:1px solid #fff
}
#app .buttons .button:after {
	position:absolute;
	top:11px;
	left:47px;
	width:150px;
	text-align:center;
	content:attr(data-name);
	font:17px/19px 'Freshman',Arial,sans-serif;
	color:rgba(255,255,255,0.5);
	white-space:pre;
	text-shadow:0 0 0 #fff,1px 1px 1px #000,3px 5px 8px rgba(0,0,0,0.84),3px 5px 8px rgba(0,0,0,0.84)
}
#app .buttons .button.lines:after {
	top:0
}
#app .buttons .button .inner {
	width:30px;
	height:30px;
	border:1px solid #fff;
	border-radius:100%;
	position:absolute;
	top:4px;
	left:4px
}
#app .buttons .button .inner:before,#app .buttons .button .inner:after {
	-moz-box-shadow:inset 38px 50px 50px 50px #ffffff;
	-webkit-box-shadow:inset 38px 50px 50px 50px #ffffff;
	box-shadow:inset 38px 50px 50px 50px #ffffff;
	background-color:#ffedff;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	border:4px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:22px;
	font-weight:bold;
	padding:7px 49px;
	text-decoration:none;
	text-shadow:0px -1px 0px #050505;
}
#app .buttons .button .inner:before {
	-moz-box-shadow:inset 38px 50px 50px 50px #ffffff;
	-webkit-box-shadow:inset 38px 50px 50px 50px #ffffff;
	box-shadow:inset 38px 50px 50px 50px #ffffff;
	background-color:#ffedff;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	border:4px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:22px;
	font-weight:bold;
	padding:7px 49px;
	text-decoration:none;
	text-shadow:0px -1px 0px #050505;
}
#app .buttons .button .inner:after {
	-moz-box-shadow:inset 38px 50px 50px 50px #ffffff;
	-webkit-box-shadow:inset 38px 50px 50px 50px #ffffff;
	box-shadow:inset 38px 50px 50px 50px #ffffff;
	background-color:#ffedff;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	border:4px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:22px;
	font-weight:bold;
	padding:7px 49px;
	text-decoration:none;
	text-shadow:0px -1px 0px #050505;
}
#app .loader {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background:rgba(255,255,255,0.5);
	z-index:400;
	display:none
}
#app .loader .loadWrap {
	width:74px;
	height:74px;
	display:block;
	position:absolute;
	top:calc(50% - 36px);
	left:calc(50% - 36px)
}
#app .loader .loadWrap .facebook_blockG {
	border:2px solid #000;
	float:left;
	height:52px;
	margin-left:4px;
	width:14px;
	opacity:.1;
	animation-name:bounceG;
	-o-animation-name:bounceG;
	-ms-animation-name:bounceG;
	-webkit-animation-name:bounceG;
	-moz-animation-name:bounceG;
	animation-duration:1.235s;
	-o-animation-duration:1.235s;
	-ms-animation-duration:1.235s;
	-webkit-animation-duration:1.235s;
	-moz-animation-duration:1.235s;
	animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
	-ms-animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	animation-direction:normal;
	-o-animation-direction:normal;
	-ms-animation-direction:normal;
	-webkit-animation-direction:normal;
	-moz-animation-direction:normal;
	transform:scale(0.7);
	-o-transform:scale(0.7);
	-ms-transform:scale(0.7);
	-webkit-transform:scale(0.7);
	-moz-transform:scale(0.7)
}
#app .loader .loadWrap .blockG_1 {
	animation-delay:.3695s;
	-o-animation-delay:.3695s;
	-ms-animation-delay:.3695s;
	-webkit-animation-delay:.3695s;
	-moz-animation-delay:.3695s
}
#app .loader .loadWrap .blockG_2 {
	animation-delay:.496s;
	-o-animation-delay:.496s;
	-ms-animation-delay:.496s;
	-webkit-animation-delay:.496s;
	-moz-animation-delay:.496s
}
#app .loader .loadWrap .blockG_3 {
	animation-delay:.6125s;
	-o-animation-delay:.6125s;
	-ms-animation-delay:.6125s;
	-webkit-animation-delay:.6125s;
	-moz-animation-delay:.6125s
}
#app p.text {
	color:rgba(255,255,255,0.5);
	font:100 23px/26px 'Montserrat',Arial,sans-serif;
	text-shadow:-1px -1px 0 #fff,0px 0 0 #000,3px 5px 8px rgba(0,0,0,0.84),3px 5px 8px rgba(0,0,0,0.84);
	margin:0 0 30px 0;
	padding:0 15px 0 15px;
	text-align:center
}
#app p.text a {
	color:rgba(255,255,255,0.5);
	font:100 23px/26px 'Montserrat',Arial,sans-serif;
	text-shadow:-1px -1px 0 #fff,0px 0 0 #000,3px 5px 8px rgba(0,0,0,0.84),3px 5px 8px rgba(0,0,0,0.84)
}
#app p.text:last-child {
	margin:0 0 120px 0
}
#footer {
	width:100%;
	height:50px;
	background:#0a0a0a;
	position:fixed;
	bottom:0
}
#footer .content {
	max-width:1230px;
	margin:0 auto
}
#footer .content .copyright {
	float:left;
	font:bold 16px/50px 'Montserrat',Arial,sans-serif;
	color:#fff;
	text-transform:uppercase;
	margin:0 0 0 15px
}
#footer .content .copyright a {
	color:#fff;
	text-decoration:none
}
#footer .content .links {
	float:right;
	margin:0 15px 0 0
}
#footer .content .links a {
	font:16px/50px 'Montserrat',Arial,sans-serif;
	color:#fff;
	float:left;
	padding:0 33px 0 33px;
	text-decoration:none
}
#footer .content .links a:last-child {
	padding:0 0 0 33px
}
#footer .content .links a:hover {
	text-decoration:underline
}
@media(max-width:904px) {
	#footer {
		padding:5px 0 0 0
	}
	#footer .content .copyright {
		text-align:center;
		float:none;
		font:bold 12px/20px 'Montserrat',Arial,sans-serif;
		margin:0 15px 0 15px
	}
	#footer .content .links {
		text-align:center;
		float:none;
		margin:0;
		width:100%
	}
	#footer .content .links a {
		font:12px/20px 'Montserrat',Arial,sans-serif;
		color:#fff;
		float:none;
		padding:0 8px 0 8px;
		text-decoration:none
	}
	#footer .content .links a:last-child {
		padding:0 8px 0 8px
	}
}
@media(max-width:760px) {
	#app h1 {
		font:30px/32px 'Freshman',Arial,sans-serif;
		margin:80px 0 60px 0;
		letter-spacing:5px
	}
	#app form label {
		font:15px/30px 'Freshman',Arial,sans-serif;
		width:calc(100% - 30px);
		display:block;
		margin:0 15px 0 15px;
		letter-spacing:5px
	}
	#app form input {
		float:none;
		height:59px;
		width:calc(100% - 30px);
		margin:0 15px 0 15px;
		padding:10px;
		font:20px/29px 'Freshman',Arial,sans-serif
	}
	#app form button {
    -moz-box-shadow:inset 38px 50px 50px 50px #ffffff;
	-webkit-box-shadow:inset 38px 50px 50px 50px #ffffff;
	box-shadow:inset 38px 50px 50px 50px #ffffff;
	background-color:#ffedff;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	border:4px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:22px;
	font-weight:bold;
	padding:7px 49px;
	text-decoration:none;
	text-shadow:0px -1px 0px #050505;
	}
	#app .label {
		margin:80px auto 0 auto
	}
	#app .info {
		margin:0 auto;
		width:250px;
		height:100px;
		font:14px/21px 'Freshman',Arial,sans-serif;
		letter-spacing:4px
	}
	#app .farid,#app .majoe,#app .jasko,#app .summer,#app .kolle {
		margin:60px 0 0 0;
		text-align:center
	}
	#app .kolle {
		margin:60px 0 60px 0
	}
	#app .farid .head,#app .majoe .head,#app .jasko .head,#app .summer .head,#app .kolle .head {
		width:100%;
		height:175px;
		position:relative;
		margin:0 0 40px 0
	}
	#app .buttons {
		float:none;
		width:100%;
		display:inline-block
	}
	#app .buttons:after {
	-moz-box-shadow:inset 38px 50px 50px 50px #ffffff;
	-webkit-box-shadow:inset 38px 50px 50px 50px #ffffff;
	box-shadow:inset 38px 50px 50px 50px #ffffff;
	background-color:#ffedff;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	border:4px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:22px;
	font-weight:bold;
	padding:7px 49px;
	text-decoration:none;
	text-shadow:0px -1px 0px #050505;
	}
	#app .buttons .buttonWrap {
	-moz-box-shadow:inset 38px 50px 50px 50px #ffffff;
	-webkit-box-shadow:inset 38px 50px 50px 50px #ffffff;
	box-shadow:inset 38px 50px 50px 50px #ffffff;
	background-color:#ffedff;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	border:4px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:22px;
	font-weight:bold;
	padding:7px 49px;
	text-decoration:none;
	text-shadow:0px -1px 0px #050505;
	}
	#app .buttons .button:after {
	-moz-box-shadow:inset 38px 50px 50px 50px #ffffff;
	-webkit-box-shadow:inset 38px 50px 50px 50px #ffffff;
	box-shadow:inset 38px 50px 50px 50px #ffffff;
	background-color:#ffedff;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	border:4px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:22px;
	font-weight:bold;
	padding:7px 49px;
	text-decoration:none;
	text-shadow:0px -1px 0px #050505;
	}
	#app p.text {
		font:100 16px/18px 'Montserrat',Arial,sans-serif;
		padding:0 30px 0 30px
	}
}
@keyframes bounceG {
	0% {
		transform:scale(1.2);
		opacity:1
	}
	100% {
		transform:scale(0.7);
		opacity:.1
	}
}
@-o-keyframes bounceG {
	0% {
		-o-transform:scale(1.2);
		opacity:1
	}
	100% {
		-o-transform:scale(0.7);
		opacity:.1
	}
}
@-ms-keyframes bounceG {
	0% {
		-ms-transform:scale(1.2);
		opacity:1
	}
	100% {
		-ms-transform:scale(0.7);
		opacity:.1
	}
}
@-webkit-keyframes bounceG {
	0% {
		-webkit-transform:scale(1.2);
		opacity:1
	}
	100% {
		-webkit-transform:scale(0.7);
		opacity:.1
	}
}
@-moz-keyframes bounceG {
	0% {
		-moz-transform:scale(1.2);
		opacity:1
	}
	100% {
		-moz-transform:scale(0.7);
		opacity:.1
	}
}