@charset "utf-8";
/* CSS Document */
* {
	margin: 0px;
	padding: 0px;
	outline: none;
	color: #FFFFFF;
}
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	color: #000000;
}

#VerMER {
	text-align: center;
}
#pos {
	position: absolute;
	left: 236px;
	top: 211px;
	width: 1000px;
}
#-nav-enzyklop {
	position:fixed;
	left:150px;
	width:300px;
	height:690px;
	top: 0px;
}
#nav li a:hover {
	color: #9E9E9A;
}
#nav li a.fix {
	text-decoration: none;
	color: #9E9E9A;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	margin-right: 15px;
}
#nav li .fix {
	text-decoration: none;
	color: #9E9E9A;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	margin-right: 15px;
}
#nav li a.come {
	text-decoration: none;
	color: #FB8C00;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	margin-right: 15px;
}
#nav li .come {
	text-decoration: none;
	color: #FB8C00;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	margin-right: 15px;
}
#nav ul ul li a:link, #nav ul ul li a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-top: -10px;
	display: block;
	margin-bottom: 12px;
	letter-spacing: 1px;
	font-style: italic;
}
#textbox {
	display: block;
	margin-right: 5px;
	margin-top: 10px;
	float: left;
	margin-left: 25px;
	margin-bottom: 30px;
}
.floatleft {
	float: left;
}
.floatleftmarginright {
	float: left;
	margin-right: 10px;
	display: block;
}
.floatleftmargintopright {
	float: left;
	margin-right: 10px;
	margin-top: 10 px;
	display: block;
}
.linehight-12 {
	line-height: 12 px;
}


#textbox a:link, #nav #textbox a:visited {
	text-decoration: none;
	color: #021B99;
	font-weight: normal;
}
#textbox a:hover {
	text-decoration: none;
	color: #9E9E9A;
	font-weight: normal;
}
.margin-c-lab {
	margin-top: 10px;
	margin-right: 10px;
}

.text-profil {
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	font-size: 10px;
	line-height: 18px;
}

.text-profil h1   {
	font-size: 10px;
	display: inline;
	color: #650101;
}

.text-profil a:link, .text-profil a:visited {
	text-decoration: none;
	color: #808000;
	font-weight: bold;
}
.text-profil a:hover {
	color: #650101;
}
.text-profil h1 a:link, .text-profil h1 a:visited {
	color: #808000;
}
.text-profil h1 a:hover {
	color: #310048;
}


.soundbox {
	margin-top: 100px;
}
.spacebox {
	margin-bottom: 70px;
}
.navbox {
	margin-bottom: 80px;
	width: 420px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/hg-weiss.png);
	margin-top: 5px;
	padding: 2px;
}
.navbox h2   {
	font-size: 11px;
	font-weight: normal;
}


#slide {
	position:absolute;
	left:80px;
	top:50px;
	width:518px;
	z-index:1;
}
#slide p  {
	font-size: 9px;
	color: #999;
	margin-top: 5px;
}
#ThumbStudio_Comment {
	font-weight: bold;
}
#ThumbStudio_Counter {
	font-style: italic;
}

#slide p.dark {
	font-size: 9px;
	color: #666;
	margin-top: 5px;
}


#slide-nav {
	position:absolute;
	left:5px;
	top:350px;
	width:145px;
	height:38px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
}
#slide-nav.text {
	position:absolute;
	left:20px;
	top:60px;
	width:210px;
	height:400px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
}
.text-pas-de-deux-1 {
	position:absolute;
	left:35px;
	top:27px;
	width:210px;
	height:100px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	font-weight: bold;
	line-height: 18px;
}
.text-pas-de-deux-2 {
	position:absolute;
	left:35px;
	top:185px;
	width:230px;
	height:250px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFF;
	line-height: 18px;
}
.text-pas-de-deux-3 {
	position:absolute;
	left:447px;
	top:184px;
	width:210px;
	height:100px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #650101;
	line-height: 18px;
}
.text-perseus-1 {
	position:absolute;
	left:0px;
	top:28px;
	width:247px;
	height:100px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #650101;
	line-height: 19px;
	font-weight: bold;
}
.text-perseus-2 {
	position:absolute;
	left:365px;
	top:25px;
	width:358px;
	height:300px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #650101;
}
.text-perseus-3 {
	position:absolute;
	left:365px;
	top:330px;
	width:358px;
	height:190px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
}
.text-east-coast-1 {
	position:absolute;
	left:37px;
	top:22px;
	width:299px;
	height:54px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #650101;
	line-height: 19px;
}
.text-east-coast-2 {
	position:absolute;
	left:286px;
	top:23px;
	width:447px;
	height:219px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #650101;
	line-height: 15px;
}
.text-east-coast-3 {
	position:absolute;
	left:370px;
	top:290px;
	width:358px;
	height:229px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
}
.text-12-aus-77-titel {
	position:absolute;
	left:21px;
	top:344px;
	width:299px;
	height:54px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #650101;
	line-height: 19px;
}

.text-12-aus-77 {
	position:absolute;
	left:367px;
	top:346px;
	width:380px;
	height:47px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
	overflow: auto;
	line-height: 12px;
}
.text-12-aus-77 h1 {
	font-size: 12px;
	display: inline;
}
.white {
	color: #F6FD00;
}
#nav ul li .white {
	color: #FFFF00;
}


.bottom {
	padding-top: 115px;
	margin-top: 115px;
}
.margin-bottom {
	margin-bottom: 30px;
}
img {
	border: 0;
}
#content {
	position: relative;
	width: 1000px;
	top: 40px;
	margin-right: auto;
	margin-left: auto;
	height: 800px;
}
#content.center {
	text-align: center;
}
#content2 {
	position: absolute;
	width: 400px;
	left: 251px;
	top: 180px;
	height: 600px;
	overflow: auto;
	scroll: y;
	padding-right: 10px;
	color: #000;
	font-weight: normal;
}
#logo  {
	position: absolute;
	top: 167px;
	left: 238px;
	color: #460304;
}
#press  {
	position: absolute;
	top: 167px;
	left: 236px;
	color: #460304;
	height: 500px;
	overflow: hidden;
	overflow-y: scroll;
	width: 610px;
}
#logo-start  {
	position: absolute;
	top: 165px;
	left: 237px;
	color: #900002;
	text-align: center;
}
#logo-start2  {
	position: absolute;
	top: 167px;
	left: 239px;
	color: #900002;
	text-align: center;
}
#content .center #logo-start .fett {
	color: #900002;
	font-weight: bold;
}

#clip  {
	position: absolute;
	top: 167px;
	left: 236px;
	width: 800px;
	text-align: center;
	background-color: #000000;
}
#textclip  {
	position: absolute;
	top: 500px;
	left: 236px;
	width: 800px;
	text-align: center;
	background-color: #000000;
	padding-top: 10px;
}
#links {
	font-size: 9px;
	color: #FFFFFF;
	width: 110px;
	float: left;
	text-align: left;
	padding-left: 20px;
	padding-top: 10px;
	margin-left: -10px;
	line-height: 16px;
}
.margin-right-30 {
	margin-right: -30px;
}
.margin-right-40 {
	margin-right: -40px;
}
.margin-right-90 {
	margin-right: -90px;
}
	
#rechts {
	width: 100px;
	float: right;
	text-align: right;
	padding-top: 10px;
	padding-right: 10px;
	
}
	
.typo  {
	width: 330px;
	display: block;
	margin-top: 5px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 2px;
	padding-bottom: 2px;
	background-image: url(../images/hg-weiss.png);
}
.typo-kl  {
	width: 160px;
	display: block;
	margin-top: 5px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 2px;
	padding-bottom: 2px;
	background-image: url(../images/hg-weiss.png);
}
#nav {
	position: absolute;
	width: 150px;
	height: auto;
	z-index: 1;
	text-align: right;
}
#nav p {
	text-align: left;
	margin-bottom: 30px;
	padding-left: 9px;
}
ul {
	list-style-type: none;
}
#nav li a:link , #nav li a:visited {
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	margin-right: 15px;
}
#nav ul ul li a:hover {
	color: #FDCE9B;
}
#nav ul ul li a.fix {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-top: -10px;
	display: block;
	margin-bottom: 12px;
	letter-spacing: 1px;
	font-style: italic;
	color: #FDCE9B;
}
#nav li a.come {
	text-decoration: none;
	color: #FB8C00;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	margin-right: 15px;
}
#nav li .come {
	text-decoration: none;
	color: #FB8C00;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	margin-right: 15px;
}

#pos {
	position: absolute;
	left: 236px;
	top: 211px;
	width: 1000px;
}
#content-nav-enzyklop {
	position:fixed;
	left:150px;
	width:300px;
	height:690px;
	top: 0px;
}
#nav li a:hover {
	color: #9E9E9A;
}
#nav li a.fix {
	text-decoration: none;
	color: #9E9E9A;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	margin-right: 15px;
}
#nav li .fix {
	text-decoration: none;
	color: #9E9E9A;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	margin-right: 15px;
}
#nav ul ul li a:link, #nav ul ul li a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-top: -10px;
	display: block;
	margin-bottom: 12px;
	letter-spacing: 1px;
	font-style: italic;
}
#textbox {
	display: block;
	margin-right: 5px;
	margin-top: 10px;
	float: left;
	margin-left: 25px;
	margin-bottom: 30px;
}
.floatleft {
	float: left;
}
#textbox a:link, #nav #textbox a:visited {
	text-decoration: none;
	color: #021B99;
	font-weight: normal;
}
#textbox a:hover {
	text-decoration: none;
	color: #9E9E9A;
	font-weight: normal;
}
.margin-c-lab {
	margin-top: 10px;
	margin-right: 10px;
}

.text-profil {
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	font-size: 10px;
	line-height: 18px;
	color: #460304;
}
.text-profil-bold {
	text-align: left;
	font-size: 10px;
	line-height: 18px;
	color: #808000;
	font-weight: bold;
}

.text-profil p{
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	font-size: 10px;
	line-height: 18px;
	color: #460304;
}
.text-profil h1   {
	font-size: 10px;
	display: inline;
	color: #650101;
}

.text-profil a:link, .text-profil a:visited {
	text-decoration: none;
	color: #808000;
	font-weight: bold;
}
.text-profil a:hover {
	color: #650101;
}
.text-profil h1 a:link, .text-profil h1 a:visited {
	color: #808000;
}
.text-profil h1 a:hover {
	color: #310048;
}


.soundbox {
	margin-top: 100px;
}
.spacebox {
	margin-bottom: 70px;
}
.navbox {
	margin-bottom: 80px;
	width: 420px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/hg-weiss.png);
	margin-top: 5px;
	padding: 2px;
}
.navbox h2   {
	font-size: 11px;
	font-weight: normal;
}




#slide {
	position:absolute;
	left:80px;
	top:50px;
	width:518px;
	z-index:1;
}
#slide p  {
	font-size: 9px;
	color: #999;
	margin-top: 5px;
}
#ThumbStudio_Comment {
	font-weight: bold;
}
#ThumbStudio_Counter {
	font-style: italic;
}

#slide p.dark {
	font-size: 9px;
	color: #666;
	margin-top: 5px;
}


#slide-nav {
	position:absolute;
	left:5px;
	top:350px;
	width:145px;
	height:38px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
}
#slide-nav.text {
	position:absolute;
	left:20px;
	top:60px;
	width:210px;
	height:400px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
}
.text-pas-de-deux-1 {
	position:absolute;
	left:35px;
	top:27px;
	width:210px;
	height:100px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	font-weight: bold;
	line-height: 18px;
}
.text-pas-de-deux-2 {
	position:absolute;
	left:35px;
	top:185px;
	width:230px;
	height:250px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFF;
	line-height: 18px;
}
.text-pas-de-deux-3 {
	position:absolute;
	left:447px;
	top:184px;
	width:210px;
	height:100px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #650101;
	line-height: 18px;
}
.text-perseus-1 {
	position:absolute;
	left:0px;
	top:28px;
	width:247px;
	height:100px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #650101;
	line-height: 19px;
	font-weight: bold;
}
.text-perseus-2 {
	position:absolute;
	left:365px;
	top:25px;
	width:358px;
	height:300px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #650101;
}
.text-perseus-3 {
	position:absolute;
	left:365px;
	top:330px;
	width:358px;
	height:190px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
}
.text-east-coast-1 {
	position:absolute;
	left:37px;
	top:22px;
	width:299px;
	height:54px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #650101;
	line-height: 19px;
}
.text-east-coast-2 {
	position:absolute;
	left:286px;
	top:23px;
	width:447px;
	height:219px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #650101;
	line-height: 15px;
}
.text-east-coast-3 {
	position:absolute;
	left:370px;
	top:290px;
	width:358px;
	height:229px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
}
.text-12-aus-77-titel {
	position:absolute;
	left:21px;
	top:344px;
	width:299px;
	height:54px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #650101;
	line-height: 19px;
}

.text-12-aus-77 {
	position:absolute;
	left:367px;
	top:346px;
	width:380px;
	height:47px;
	z-index:2;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
	overflow: auto;
	line-height: 12px;
}
.text-12-aus-77 h1 {
	font-size: 12px;
	display: inline;
}
.white {
	color: #F6FD00;
}
#nav ul li .white {
	color: #FFFF00;
}
#logo-start .honda {
	width: 800px;
}
#corona  {
	position: absolute;
	top: 165px;
	left: 236px;
	color: #460304;
	height: 300px;
	width: auto;
	overflow-y: scroll;
}
#fotodocks  {
	position: absolute;
	top: 165px;
	left: 236px;
	color: #460304;
	height: 300px;
	width: auto;
	text-align: center;
}
#fotodocks h1 {
	color: #0027A6;
	letter-spacing: 6px;
}
#off-room  {
	position: absolute;
	top: 165px;
	left: 236px;
	color: #460304;
	height: 500px;
	width: auto;
}
#off-room li a:link, #off-room li a:visited  {
	color: #02BB56;
	text-decoration: none;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}
#off-room li a:hover {
	color: #001DFF;
}

#corona h1 {
	color: #0027A6;
	display: inline;
}
#corona a:link, #corona a:visited  {
	color: #A00000;
	text-decoration: none;
	font-weight: bold;
}
.schwarz {
	color: #000;
	
}
.durchschuss {
	line-height: 10px;
	font-size: 4px;
}

/* ####################### ab hier RWD ##################################### */


iframe {border:0;}
#hamburger {display:none;}
#hamburger button {background:none;border:none;}


@media (max-width: 900px) and (orientation:landscape) {
	
	
	#content {
		width:unset;
		top:20px;
		margin:0;
		overflow:hidden;
	}
	#nav {
		max-width:25vw;
	}
	#logo, #press, #logo-start, #logo-start2, #off-room, #coronaclip, #clip, #textclip, #corona, #content2 {
		left:27vw;
		top:0;
	}
	#logo-start img, #clip, #textclip, video {
		max-width:65vw;
		height:auto;
	}	
	#logo-start2 iframe, #press {
		max-width:65vw;
	}	

}

@media (max-width: 740px) and (orientation:portrait) {


	html, body, #content {
		margin:0;
		padding:0;
		width:100% !important;
		height:100%;
	}

	body {font-size:.9em;}
	
	#content {top:0;}
	
	#logo, #press {left:0;top:100px; padding:0 1em 1em 1em;width:auto;max-width:100%;overflow:unset;}
	
	#press img {max-width:100%;height:auto;}
	
	#logo-start, #logo-start2, #off-room, #corona, #content2{
	  position: relative; 
	  left: 0 !important;
	  top:200px;
	  top:calc(50vh - 28vw);  /* ratio 16x9 */
	  padding-bottom: 56.25%; /* ratio 16x9 */
	  height: 0; 
	  overflow: hidden; 
	  width: 100%;
	  height: auto;
	}

	#content2 {
		left:0;
		width:100vw;
		padding:0;
		height:unset;
		overflow:hidden;
	}
	#content2 video {
		width:100vw;
		height:auto;
	}
	#corona {
  	  top:150px;
	  text-align:center;
	  padding:0;
	}
	#corona video{
  	  width:100%;
	}
	

	#off-room {
  	  top:200px;
  	  top:calc(50vh - 35vw); 
  	  padding-bottom: 0; 
	}
	
	
	#off-room img, #logo-start img {
		  width: 100%;
		  height: auto;
	}
	
	
	#logo-start2 iframe {
	  position: absolute; 
	  top: 0; 
	  left: 0; 
	  width: 100%; 
	  height: 100%; 
	}

	#clip {
		top:200px;
		top:calc(50vh - 28vw);
		left:0;
		width:100%;
	}

	#clip video {
		width:100%;
		height:auto;
/*		max-height:32vh;*/
	}
	
	#textclip  {
		left: 0;
    	top:calc(50vh + 30vw);
		width: 100%;
	}	
		
	#nav {text-align:left;left:0;}
	
	#nav li a:link, #nav li a:visited {
	    line-height: 2vh;
	}
		
	#menu {
		position:fixed;
		top:0;
		right: 10px;
		margin-top:100px;
		display:none;
		z-index:4;	
		background: #fff;
		border: 1px solid #555;
		padding:12px;
	}
	
	#textbox {
		position: fixed;
/*		bottom: 0;
		margin-bottom:10px;*/
		top:-20px;
		right:-10px;
		background:#fff;
	}

.text-profil  {font-size:1em;}
.text-profil h1 {font-size:.8em;}
.text-profil p {font-size:1em;}


	/* Der Hamburger-Button: */
	#hamburger{
		display:block;
		position:fixed;
		z-index:5;
		left:calc(100% - 45px);
		width:30px;
		top:47px;
		-webkit-tap-highlight-color:transparent;
		padding: 3px;
		background:#fff;
	}
	
	#menutxt{font-family:Arial;font-size:10px;display:block;width:30px;text-align:center;margin-top:2px;color:#222;}
	#buttonname{font-size:0;display:block;}
	.c-hamburger{display:block;position:relative;overflow:hidden;margin:0;padding:0;width:30px;height:28px;border:none;cursor:pointer;transition:background .3s}
	.c-hamburger:focus{outline:0}
	.c-hamburger span{display:block;position:absolute;top:12px;left:0;right:0;height:6px;background:#555}
	.c-hamburger span::after,.c-hamburger span::before{position:absolute;display:block;left:0;width:100%;height:6px;background-color:#555;content:""}
	.c-hamburger--htx,.c-hamburger--htx.is-active{background-color:transparent}.c-hamburger span::before{top:-10px}
	.c-hamburger span::after{bottom:-10px}.c-hamburger--htx span{transition:background 0s .3s}
	.c-hamburger--htx span::after,.c-hamburger--htx span::before{transition-duration:.3s,.3s;transition-delay:.3s,0s}
	.c-hamburger--htx span::before{transition-property:top,transform}
	.c-hamburger--htx span::after{transition-property:bottom,transform}
	.c-hamburger--htx.is-active span{background:0 0}
	.c-hamburger--htx.is-active span::before{top:0;transform:rotate(45deg)}
	.c-hamburger--htx.is-active span::after{bottom:0;transform:rotate(-45deg)}
	.c-hamburger--htx.is-active span::after,.c-hamburger--htx.is-active span::before{transition-delay:0s,.3s}

}

@media (max-height: 600px) and (orientation:portrait) {
	#menu li br {display:none;}
}