html {
	background-color: #000;
	background: url(../pics/back-body.jpg) repeat right top scroll;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

body {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #000;
	color: #000;
	font-family: 'FiraSans-Light', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.2rem;
}

h1 {
	position: relative;
	font-family: 'Nothing You Could Do', Helvetica, Arial, sans-serif;
	font-size: 4rem;
    font-weight: normal;
	color: rgba(255, 165, 0, 0.97);
	line-height: 130%;
	margin: 0;
	padding-bottom: 30px;
	z-index: 2000;
}

/* =======================================
  NAVIGATION
  ======================================= */

a:link {
	text-decoration: none;

}

a:visited {
	text-decoration: none;
	color: #e69e32;
}

nav {
	background: url(../pics/background-navi.png) no-repeat center top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 1280px;
	width: 100%;
	min-height: 48px;
	color: white;
	float: none;
	display: block;

}

#navbar {
	position: relative;
	max-width: 1280px;
	width: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	display: block;
	text-align: center;
	background-color: transparent;
	z-index: 90000;
}

ul.navmain {
	margin: 0;
	padding: 0;

}

ul.navmain li {
	display: inline-block;
	list-style-type: none;
	margin: 0;
	padding: 0 4px 0 4px;
	white-space: nowrap;
}

ul.navmain li:nth-child(2) {
	width: 92.4px;
}

ul.navmain li:nth-child(3) {
	width: 77px;
}

ul.navmain li:nth-child(4) {
	width: 89px;
}

ul.navmain li:nth-child(5) {
	width: 75.5px;
}

ul.navmain_english li:nth-child(2) {
	width: 96.4px;
}

ul.navmain_english li:nth-child(3) {
	width: 80px;
}

ul.navmain_english li:nth-child(4) {
	width: 66px;
}

ul.navmain_english li:nth-child(5) {
	width: 70.5px;
}

.pfeilspacer_down {
	width: 20px;
	height: 15px;
	background: url(../pics/pfeildown.svg) no-repeat;
	background-position: left 0px top 1px !important;
}

.pfeilspacer_down:hover {
	background: url(../pics/pfeildownhover.svg) no-repeat;
}

.pfeilspacer_up {
	width: 20px;
	height: 15px;
	background: url(../pics/pfeilup.svg) no-repeat;
	background-position: left 0px top 1px !important;
}

.pfeilspacer_up:hover {
	background: url(../pics/pfeiluphover.svg) no-repeat;
}

ul.navmain a {
	font-family: 'Oswald-ExtraLight', Helvetica, Arial, sans-serif;
	font-size: 1.4em;
	font-weight: normal;
	text-decoration: none;
	color: #fff;
	line-height: 160%;
	letter-spacing: 0rem;
	padding-left: 0;
}

#navbar li a:hover {
	padding-left: 0;
	text-decoration: none;
	color: #fe9d0c;
}

.orange {

	color: orange !important;
	text-shadow: 1px 1px 1px black,
	1px -1px 1px black,
	-1px 1px 1px black,
	-1px -1px 1px black;
}

.orangepfeil {
	color: orange !important;
}

#startklar {
	opacity: 0.5;
}

.englishtext {
	position: absolute;
	top: 14px;
	right: 5.5%;
}

.englishtext a {
	font-size: calc(0.36em + (0.7vmax + 0.7em) / 2);
	line-height: calc(0.9em + .5vmax);
	color: #ddd;
}

.englishtext a:hover {
	color: #e4c59a;
}

/* TOGGLE NAVIGATION */

#togglenav {
	display: none !important;
}

nav,
.navbar-toggle {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.englishlinks {
	display: none;
}

/* =======================================
  INHALT
  ======================================= */

/* STARTBANNER CONTAINER */

#banner_container {
	position: relative;
	line-height: 0;
	max-width: 1280px;
	width: 100%;
	position: relative;
	text-align: center;

}

.bannerbild {
	position: relative;
	line-height: 0;
	max-width: 1280px;
	width: 100%;
}

.bannerbildklein_portrait_768 {
	display: none;
}

.bannerbildklein_portrait_420 {
	display: none;
}

.schriftzug_marc {
	position: absolute;
	max-width: 463px;
	width: 36.17%;
	top: 14%;
	left: 3.6%;
    text-align: left;
}

.d {
    letter-spacing: -0.3rem;
}

.startklar {
	position: absolute;
	width: 19.375%;
	top: 26%;
	left: 75.2%;
}

.ready {
	position: absolute;
	width: 17.578%;
	top: 26%;
	left: 76.8%;
}

.startklarklein {
	display: none;
}

.startklarklein_english {
	display: none;
}

.call_me {
	position: absolute;
	width: 11.71875%;
	top: 41.5%;
	left: 82.8%;
}

.linkspacer {
	display: block;
	width: 100%;
}

.play_kaleido {
	position: absolute;
	height: 3.1048%;
	width: 7.8125%;
	top: 34.3%;
	left: 8.5%;
	background: url(../pics/play_startseite_groove.svg);
	background-size: 100% 100%;
}

.play_kaleido:hover {
	background: url(../pics/play_startseite_groove_hover.svg);
}

.play_metal {
	position: absolute;
	width: 7.8125%;
	top: 43.7%;
	left: 8.5%;
	background: url(../pics/play_startseite_metal.svg);
	background-size: 100% 100%;
}

.play_metal:hover {
	background: url(../pics/play_startseite_metal_hover.svg);
}

.play_latin {
	position: absolute;
	width: 7.8125%;
	top: 39%;
	left: 8.5%;
	background: url(../pics/play_startseite_latin.svg);
	background-size: 100% 100%;
}

.play_latin:hover {
	background: url(../pics/play_startseite_latin_hover.svg);
}

.play_live {
	position: absolute;
	width: 7.8125%;
	top: 48.4%;
	left: 8.5%;
	background: url(../pics/play_startseite_live.svg);
	background-size: 100% 100%;
}

.play_live:hover {
	background: url(../pics/play_startseite_live_hover.svg);
}



h2 {
	font-family: 'FiraSans-Thin', Helvetica, Arial, sans-serif;
	font-size: 2.4rem;
	color: orange;
	line-height: 130%;
	margin: 0;
	padding: 4px 0 4px 0;
}

/* SHOWCASE CONTAINER */

.showcaseinhalt {
	background: url(../pics/back_showcase.jpg) no-repeat center top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 1280px;
	width: 100%;
	text-align: left;
}

h2.headline_showcase {
	text-align: left;
	font-family: 'FiraSans-ExtraLight', Helvetica, Arial, sans-serif;
	font-size: 2rem;
	color: #000;
	text-shadow: 3px 3px 8px #999;
	padding: 0 0 30px 0;
}

.subheadline_showcase {
	font-family: 'FiraSans-ExtraLight', Helvetica, Arial, sans-serif;
	font-size: 1.8rem;
}

.showcase_wort {
	text-align: center;
	padding: 0 0 30px 0;
}

.videospacer {
	height: 70px;
}



/* =======================================
  breakpoints
  ======================================= */

@media screen and (max-width: 1280px) {
  h1 {
	position: relative;
	font-family: 'Nothing You Could Do', Helvetica, Arial, sans-serif;
	font-size: 5vw;
    font-weight: normal;
	color: rgba(255, 165, 0, 0.97);
	line-height: 130%;
	margin: 0;
	padding-bottom: 30px;
	z-index: 2000;
}  
}

@media screen and (max-width: 1024px) {

	.is-ios * {
		cursor: pointer;
	}

	/*	* {
		cursor: pointer;
	}*/
    
	.startklar {
		position: absolute;
		width: 24%;
		top: 25%;
		left: 70.3%;
	}

	.play_kaleido {
		position: absolute;
		height: 24px;
		width: 100px;
		top: 31.3%;
		left: 4.5%;
		background: url(../pics/play_startseite_groove.svg);
		background-size: 100% 100%;
	}

	.play_metal {
		position: absolute;
		height: 24px;
		width: 100px;
		top: 42.7%;
		left: 4.5%;
		background: url(../pics/play_startseite_metal.svg);
		background-size: 100% 100%;
	}

	.play_latin {
		position: absolute;
		height: 24px;
		width: 100px;
		top: 37%;
		left: 4.5%;
		background: url(../pics/play_startseite_latin.svg);
		background-size: 100% 100%;
	}

	.play_live {
		position: absolute;
		height: 24px;
		width: 100px;
		top: 48.4%;
		left: 4.5%;
		background: url(../pics/play_startseite_live.svg);
		background-size: 100% 100%;
	}

}

@media screen and (max-width: 768px) {

	.bannerbild {
		display: none;
	}

	.bannerbildklein_portrait_768 {
		display: block;
		position: relative;
		line-height: 0;
		max-width: 768px;
		width: 100%;
	}

	.bannerbildklein_portrait_420 {
		display: none;
	}

	#navbar {
		display: none;
	}

	#togglenav {
		display: block !important;
		z-index: 999999 !important;
	}

	.menu-icon {
		position: fixed;
		left: 92%;
		top: 10px;
		height: 40px;
		width: 40px;
		display: block !important;
		z-index: 99999999 !important;
	}

	hr.togglenav {
		padding: 0;
		margin: 0;
		border: 0;
		height: 1px;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
	}

	#togglemenu {
		position: fixed;
		right: 0;
		top: 0;
		display: block;
		text-align: center;
		padding: 0px;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9999999 !important;
	}

	#togglemenu ul li {
		display: block;
		white-space: nowrap;
	}

	ul {
		padding: 0;
		-webkit-padding-start: 0px;
	}

	#ulhaupt {
		padding: 0 0 20px 0;
		margin: 0;
	}

	#togglemenu ul li {
		display: block;
		float: none;
		padding: 0;
	}

	#togglemenu ul li a {
		font-family: 'FiraSans-Light', Helvetica, Arial, sans-serif;
		font-size: 20px;
		font-weight: 300;
		font-style: normal;
		text-decoration: none;
		color: #fff;
		padding: 0;
		margin: 0;
		display: block;
		line-height: 36px;
	}

	.pfeildown {
		display: none;
	}

	.englishlinks {
		display: block;
	}
    
    .call_me {
	position: absolute;
	width: 19%;
	top: 15.8%;
	left: 76.2%;
}

	/* ---------- Ende Toggleavigation    --------- */

h1 {
	font-size: 7vw;
}

.d {
    letter-spacing: -0.3rem;
}

	.schriftzug_marc {
		position: absolute;
		max-width: 463px;
		width: 82%;
		top: 5.5%;
		left: 10%;
	}

	.startklar {
		display: none;
	}

	.ready {
		display: none;
	}

	.startklarklein {
		display: block;
		position: absolute;
		width: 50%;
		top: 15%;
		left: 10%;
	}

	.startklarklein_english {
		display: block;
		position: absolute;
		width: 45%;
		top: 14.8%;
		left: 10%;
	}

	.englishtext a {
		font-size: calc(0.4em + (0.7vmax + 0.7em) / 2);
		line-height: calc(0.9em + .5vmax);
		color: #ddd;
	}

	.englishtext a:hover {
		color: #e4c59a;
	}

	.videospacer {
		height: 20px;
	}

	h2.headline_showcase {
		font-family: 'FiraSans-Regular', Helvetica, Arial, sans-serif;
		font-size: calc(1.2em + (0.7vmax + 0.2em) / 2);
		line-height: calc(1.1em + .5vmax);
		color: #000;
		text-shadow: 3px 3px 8px #999;
		padding: 0 0 30px 0;
	}

	.subheadline_showcase {
		font-family: 'FiraSans-Light', Helvetica, Arial, sans-serif;
		font-size: calc(0.7em + (0.7vmax + 0.2em) / 2);
		line-height: calc(1.0em + .5vmax);
	}


	.text_links {
		float: none;
		max-width: 440px;
		width: 80%;
		height: auto;
		margin: 0 auto;
		padding: 1% 4% 2% 4%;
		text-align: left;
		color: #ddd;
	}

	.text_rechts {
		float: none;
		max-width: 440px;
		width: 80%;
		height: auto;
		margin: 0 auto;
		padding: 1% 2% 2% 2%;
		text-align: left;
		color: #ddd;
	}

	.text_rechts h1 {
		font-size: 1.4rem;
		padding-top: 20px;
	}

	.text_links h4 {
		line-height: 110%;
	}


	.englishtext {
		position: absolute;
		left: 20px;
	}

	#banner_container {
		text-align: left;
	}

	.linkspacer {
		display: block;
		width: 100%;
	}

	.play_kaleido {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 26%;
		left: 10%;
		background: url(../pics/play_startseite_groove.svg);
		background-size: 100% 100%;
	}

	.play_kaleido:hover {}

	.play_metal {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 32%;
		left: 10%;
		background: url(../pics/play_startseite_metal.svg);
		background-size: 100% 100%;
	}

	.play_latin {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 26%;
		left: 27%;
		background: url(../pics/play_startseite_latin.svg);
		background-size: 100% 100%;
	}

	.play_live {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 32%;
		left: 27%;
		background: url(../pics/play_startseite_live.svg);
		background-size: 100% 100%;
	}

}


@media screen and (max-width: 624px) {

	.schriftzug_marc {
		position: absolute;
		max-width: 463px;
		width: 82%;
		top: 7.5%;
		left: 8%;
		opacity: 1;
	}

	.startklar {
		display: none;
	}

	.startklarklein {
		display: block;
		position: absolute;
		width: 50%;
		top: 18%;
		left: 10%;
	}

	.startklarklein_english {
		display: block;
		position: absolute;
		width: 45%;
		top: 17.8%;
		left: 10%;
	}

	.englishtext a {
		font-size: calc(0.4em + (0.7vmax + 0.7em) / 2);
		line-height: calc(0.9em + .5vmax);
		color: #ddd;
	}

	.englishtext a:hover {
		color: #e4c59a;
	}
    
.call_me {
	position: absolute;
	width: 22%;
	top: 18.3%;
	left: 74.2%;
}

	.videospacer {
		height: 20px;
	}

	h2.headline_showcase {
		font-family: 'FiraSans-Regular', Helvetica, Arial, sans-serif;
		font-size: calc(1.2em + (0.7vmax + 0.2em) / 2);
		line-height: calc(1.1em + .5vmax);
		color: #000;
		text-shadow: 3px 3px 8px #999;
		padding: 0 0 30px 0;
	}

	.subheadline_showcase {
		font-family: 'FiraSans-Light', Helvetica, Arial, sans-serif;
		font-size: calc(0.7em + (0.7vmax + 0.2em) / 2);
		line-height: calc(1.0em + .5vmax);
	}


	.text_links {
		float: none;
		max-width: 440px;
		width: 80%;
		height: auto;
		margin: 0 auto;
		padding: 1% 4% 2% 4%;
		text-align: left;
		color: #ddd;
	}

	.text_rechts {
		float: none;
		max-width: 440px;
		width: 80%;
		height: auto;
		margin: 0 auto;
		padding: 1% 2% 2% 2%;
		text-align: left;
		color: #ddd;
	}

	.text_rechts h1 {
		font-size: 1.4rem;
		padding-top: 20px;
	}

	.text_links h4 {
		line-height: 110%;
	}


	.englishtext {
		position: absolute;
		left: 20px;
	}

	#banner_container {
		text-align: left;
	}

	.linkspacer {
		display: block;
		width: 100%;
	}

	.play_kaleido {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 26%;
		left: 8.5%;
		background: url(../pics/play_startseite_groove.svg);
		background-size: 100% 100%;
	}

	.play_metal {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 31%;
		left: 8.5%;
		background: url(../pics/play_startseite_metal.svg);
		background-size: 100% 100%;
	}

	.play_latin {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 26%;
		left: 32%;
		background: url(../pics/play_startseite_latin.svg);
		background-size: 100% 100%;
	}

	.play_live {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 31%;
		left: 32%;
		background: url(../pics/play_startseite_live.svg);
		background-size: 100% 100%;
	}

}

@media screen and (max-width: 420px) {

	.bannerbildklein_portrait_420 {
		display: block;
		position: relative;
		line-height: 0;
		max-width: 480px;
		width: 100%;
	}

	.bannerbildklein_portrait_768 {
		display: none;
	}

h1 {
	font-size: 10vw;
}
    
	.schriftzug_marc {
		position: absolute;
		max-width: 463px;
		width: 82%;
		top: 8.5%;
		left: 14%;
		opacity: 1;
	}

	.startklarklein {
		display: block;
		position: absolute;
		width: 76%;
		top: 18.0%;
		left: 12%;
	}

	.startklarklein_english {
		display: block;
		position: absolute;
		width: 66%;
		top: 18.8%;
		left: 16.5%;
	}

	.play_kaleido {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 27%;
		left: 9%;
		background: url(../pics/play_startseite_groove.svg);
		background-size: 100% 100%;
	}

	.play_metal {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 27%;
		left: 68%;
		background: url(../pics/play_startseite_metal.svg);
		background-size: 100% 100%;
	}

	.play_latin {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 27%;
		left: 41%;
		background: url(../pics/play_startseite_latin.svg);
		background-size: 100% 100%;
	}

	.play_live {
		display: block;
		position: absolute;
		width: 100px;
		height: 24px;
		top: 33%;
		left: 9%;
		background: url(../pics/play_startseite_live.svg);
		background-size: 100% 100%;
	}
    
    .call_me {
	position: absolute;
	width: 35%;
	top: 41.2%;
	left: 5.4%;
}


}