head {
	content="text/html; charset=utf-8";
}


a:link {color: #dfd2bd;}
a:visited {color: #c0c0c0;}
a:active {color: #555;}
a:hover {color: #E0CBAA;}

.footer a:link {color: #c0c0c0;}
.footer a:visited {color: #c0c0c0;}
.footer a:active {color: #555;}
.footer a:hover {color: #dfd2bd;}

.header a:link {color: #c0c0c0;}
.header a:visited {color: #c0c0c0;}
.header a:active {color: #555;}
.header a:hover {color: #dfd2bd;}

.main_content_frame a:link {color: black;}
.main_content_frame a:visited {color: black;}
.main_content_frame a:active {color: blue;}
.main_content_frame a:hover {color: blue;}

.internal-link {
}


.soundcloud-embed-frame{
flex: 1 100%;
width: 100%;
height: auto;

    background-color: #E0CBAA;
    min-width: 160px;
    
    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
    z-index: 1;
    opacity: 0.95;
    border-radius: 1em;
    padding: 12px 16px;
     margin:  12px;

}

.soundcloud-embed-frame-dark{
flex: 1 100%;
width: 100%;
height: auto;

    min-width: 160px;
    
    

    z-index: 1;
    opacity: 0.95;
//    padding: 12px 16px;
     margin:  12px;

}


.index_content_iframe {
position: absolute;
top: 0px;
width:100%;
height:100%;
background-color: transparent;
border: 0 none transparent;
padding: 0px;
overflow: hidden;
margin: 0px;
z-index: 0;

}


.iframe_page_content {
	width: 100%;
	height: 100%;
	background-color: transparent;
border: 0 none transparent;
padding: 0px;
overflow: hidden;
margin: 0px;
}

.index_player_iframe {
 transform-origin: 0px 0px 0px;
margin-top: 16px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
width:600px; 
height:350px; 
scrolling: no;
frameborder:no;
       z-index: 205;
}

.index_player_dropdown_text{
position: absolute;
	top: 395px;
	left: 0%;
	width: 100%;
margin-top:0px;
	  z-index: 300;
	  font-size: x-small;
	    text-align: center;
}

.index_player_dropdown {
//   display: flex;
   align-items: center;
    position: relative;
    width:600px; 
    max-width:600px;
	height: 394px;
   	margin-top:  -407px;
	margin-left: auto;
	margin-right: auto;
    background-color: #E0CBAA;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
         padding: 16px 16px 0px 16px;
 
    z-index: 210;
    border-radius: 1em;
    transition: 1s;
    overflow: hidden;
    align-items: center;
}


.index_player {
font: 100% Arial, Helvetica, sans-serif;
  color: black; 
  width: auto;
  height: auto;
  text-align: center;
	margin-left: auto;
	margin-right: auto;

 background-color: #E0CBAA;
//border:thick;
 //position: relative;
    //display: inline-block;
    padding: 12px 16px;
    text-decoration: none;
     border-radius: 1em;
     z-index: 200;

}


.index_player:hover .index_player_dropdown { margin-top: -2em; transition: 1s; width: 80%; max-width: 600px;
:not(:hover) .index_player_dropdown {margin-top: -2em;transition: 1s; width: 80%; max-width: 600px;};
}
.index_player:hover .iframe_page_content {pointer-events: none;}
.index_player_dropdown:hover .index_player_dropdown {margin-top: -2em;transition: 1s;width: 80%; max-width: 600px;}	

.soundcloud-embed
{
 transform-origin: 0px 0px 0px;
transform: scale(1);
width: 100%;
height: 450px;

/*width: 600px;
height: 300px;*/
}

.spotify-embed
{
width: auto;
overflow:hidden;
 /*transform-origin: 0px 0px 0px;
transform: scale(1);
width: 600px;
height: 300px;*/
}

.bandcamp-embed {
	max-width: 600px;
overflow:hidden;
align-items: center;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


.bandcamp-embed-follow {
	width: 175px;
overflow:hidden;
align-items: center;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


.main_canvas
{ display: flex;
  flex-flow: row wrap;
//  align-content: stretch;
    align-content: space-around;
    align-items: center;
//  font-weight: bold;
//  text-align: center;
  vertical-align:middle;
  width: 100%;
  height: auto;
  margin:auto;
}

.main_content_frame
{
flex: 2 33%;
width: auto;
height: auto;
color: black;
text-align: center;
 vertical-align: middle;
   background-color: #E0CBAA;
    min-width: 160px;
    
    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
    z-index: 1;
    opacity: 0.95;
    border-radius: 1em;
    padding: 12px 16px;
margin:  12px;
}

.main_content_frame_wide
{
flex: 2 66%;
/*width: auto;
height: auto;
color: black;
text-align: center;
 vertical-align: middle;
   background-color: #E0CBAA;
    min-width: 160px;
    
    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
    z-index: 1;
    opacity: 0.95;
    border-radius: 1em;
    padding: 12px 16px;
margin:  12px;*/
}

.main_content_frame1
{
flex: 2 33%;
width: auto;
height: auto;
color: black;
text-align: center;
 vertical-align: middle;
   background-color: #330000;
    min-width: 160px;
    
    
 /*   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
    z-index: 1;
    opacity: 0.95;*/
    border-radius: 1em;
}

.main_content_frame2
{
flex: 2 33%;
margin:0 auto;width:100%;height:75%;padding-bottom:40%);
position:relative;

/*width: auto;
height: 0;
width:100%;
padding-bottom:10%;*/
color: black;
text-align: center;
 vertical-align: middle;
   background-color: #330000;
 /*   min-width: 160px;*/
    
    
   /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);*/
    z-index: 1;
   /* opacity: 0.95;
    border-radius: 1em;*/
/*margin:  12px;*/
/* overflow-x: hidden;
  overflow-y: hidden;*/

}

.thumbnail_image
{
	height: auto;
	padding: 5px;
	width: 150px;
}

.thumbnail_image_with_link
{
	height: auto;
	width: auto;
	flex: 2 33%;
text-align: center;
 vertical-align: middle;
    z-index: 1;
}


.thumbnail_container
{
  display: flex;
  flex-flow: row wrap;
//  align-content: stretch;
    align-content: space-around;
    align-items: center;
//  font-weight: bold;
//  text-align: center;
  vertical-align:middle;
  width: 100%;
  height: auto;
  margin:auto;
 //  background-color: #FF0000;
}





.thumbnail_image_text
{
	min-height: 150px;
	padding: 5px;
	width: auto;
	/*display:inline-block; */
	vertical-align:middle;
	 text-align: center;

}

.thumbnail_text
{
	padding: 5px;
	width: auto;
	/*display:inline-block; */
	vertical-align:middle;
	 text-align: left;

}


	
.partner-logo {
	width: 30%;
	min-width: 200px;
	margin-left: auto;
	margin-right: auto;
	padding: 12px 16px;
	text-align: center;
}
.dropdown {
    //position: relative;
    //display: inline-block;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:active .dropdown-content {display: block;}
.dropdown:disabled .dropdown-content {display: none;}

.dropdown-content {
    display: none;
    position: absolute;
   	margin-top: -10px;
	margin-left: 80px;
    background-color: #E0CBAA;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
    z-index: 100;
    opacity: 0.95;
    border-radius: 1em;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     border-radius: 1em;
}

.dropdown-text {
  //  color: grey;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     border-radius: 1em;
     
}

.dropdown-content a:link {color:black}
.dropdown-content a:visited {color:black}
.dropdown-content a:active {color:black}
.dropdown-content a:hover {color:black}

.dropdown-content a:hover {background-color: #ddd;}

div#container {
    padding: 0px;
    background: #F1F1F1;
   display:block;
   // display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
    height: 100%;
  //  border: 1px solid red;
    box-sizing: border-box;
   width: 100%;
    position:absolute;
   min-width:290px;
   margin-top: auto;
margin-bottom: auto;
   
}

h1 {
	text-align:center;
	color: #FFF0D8;
}

h5 {
	text-align:center;
}

//Datenschutz
auto-style1 {
	color: #000000;
}


.wrapper {
  display: flex;
  flex-flow: row wrap;
  align-content: stretch;
  font-weight: bold;
  text-align: center;
  width: 100%;
  height: 100%;
  margin:auto;
    background: #330000;
    
   
}

.wrapper > * {
  padding: 0px;
  flex: 1 100%;
overflow-y: hidden;
}

.header {
  display: flex;
  padding:10px;
  flex-flow: row wrap;
  align-content: stretch;
  background: #330000;
  
  //color: rgb(192, 192, 192);
  font: 100% Arial, Helvetica, sans-serif;
  font-size: large;
  overflow: hidden;
}

.header_logo {
	display: flex;
	flex: 1;
	height: 100%;
align-items: center;

text-align: left;
margin:auto;
margin-left: 10px;
min-width:237px;
max-width:237px;
}



//img { width: 100%; height: auto }

.header_logo_img {
width: 100%; height: auto;
min-width:237px;
max-width:237px;
//align-items: bottom;
}



.header_title {
	display: flex;
	flex: 3;
	height: 100%;
align-items: center;
//text-align: center;
	
}

.header_title_text {
	margin:auto;
	text-align: center;


}

.header_language {

	display: flex;
	flex: 1;
	height: 100%;
align-items: center;
//text-align: center;
margin-right:10px;

}

.header_language_text {

	text-align: right;
	margin-right:0px;
	margin-left: auto;
	color: #FFF0D8;
}

.footer {
	background: #330000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
//	color: #C0C0C0;
	color: #FFF0D8;

}

.main_frame {
	display: flex;
 border: 3px solid #E0CBAA;
  border-radius: 2em; 
 min-height: 500px;
  max-height: 500px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  align-content: stretch;
  
  background-image: url("pic/intro1_dark.gif"); /* The image used */
   background-position: center, top; /* Center the image */
   background-repeat: repeat-y; /* repeat the image */
  background-size: 100% auto;
}


.main {
  text-align: left;
 // color: #FFF0D8;
 // color: #c0c0c0;
 color: #CCCCCC;
  font: 100% Arial, Helvetica, sans-serif;
  height: auto;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
  margin: 0;
}



.navi_lh {
  width: 10px;
  background: #330000;
  text-align: right;
  flex: 1;
  min-width: 120px;
  max-width: 120px;
  min-height: 500px;
  max-height: 500px;
}

.navi_rh {
  background: #330000;
  text-align: left;
    min-width: 100px;
  max-width: 100px;
    min-height: 500px;
  max-height: 500px;


}

.navi_top {
  background: #330000;
    text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
overflow: hidden;
}

@media all and (min-width: 10px) {
  .navi_top { display: flex; }
/*  .navi_top { flex: 1 100%; max-height:45px; min-height:45px;} */
  .navi_top { flex: 1 100%; max-height:55px; min-height:55px;}
  .main_frame { flex: 1 100%; max-height:55%; min-height:140px; height:100% }
  .footer  { max-height:10%; min-height:40px }
  .header  { max-height:22%; min-height:140px}
  
  .navi_top { order: 1; } 
  .main_frame { order: 2; }
  .footer  { order: 3; }
  .navi_lh { display: none; }
  .navi_rh { display: none; }
/*  .main_content_frame2 { height: auto; }*/
/* .image_max600 { width: 100%; } */

  
 .header_language {order: 1}  
  .header_logo {order: 2}
  .header_title {order: 3}
  .header_language {flex: 1 100%; height:15px}  
  .header_logo {flex: 1 100%; height:auto}
  .header_title {flex: 1 100%; height:45px} 
.soundcloud-embed {
	transform: scale(0.75);
		width: 133.33%;

		max-width: 133.33%;
		min-height: 300px;
	}
	.index_player_iframe {
		transform: scale(0.75);
		width: 133.33%;
		max-width: 133.33%;
			min-height: 350px;
	max-height: 350px;
}
.index_player_dropdown {
	width: 40%;
	margin-left:8px;
		height: 307px;
   	margin-top:  -320px;
}
.index_player {
margin-left:0%;
}
.index_player_dropdown_text{
	top: 308px;
}

.soundcloud-embed-frame {
	height:225px;
}
.soundcloud-embed-frame-dark {
	height:auto;
}
h1 {
	font-size: 1.5em;
}
  
}

@media all and (min-width: 500px) {
  .navi_lh { display: flex; }
  .navi_lh { flex: 1 auto; }
  .main_frame { flex: 6 0px; height: 480px; max-height:480px }
  .navi_lh { order: 1; } 
  .main_frame { order: 2; }
  .footer  { order: 3; }
  .navi_rh { display: none; }
  .navi_top { display: none; }

   .header_language {order: 3}  
  .header_logo {order: 1}
  .header_title {order: 2}
/*  .main_content_frame2 { height: auto; }*/
/* .image_max600 { width: 100%; } */
 .header_title {
    display: flex;
	flex: 3;
	height: 100%;
	align-items: center;}
	.header_language {

	display: flex;
	flex: 1;
	height: 100%;
	align-items: center;}
	.header_logo {
	display: flex;
	flex: 1;
	height: 100%;
	align-items: center;}
.soundcloud-embed {
	transform: scale(0.75);
		width: 133.33%;
		max-width: 133.33%;
		height: 300px;
		}
		.index_player_iframe {
		transform: scale(0.75);
		width: 133.33%;
		max-width: 133.33%;
			min-height: 350px;
	max-height: 350px;

}
.index_player_dropdown {
	width: 80%;	
		height: 307px;
   	margin-top:  -320px;
   		margin-left:8px;
}
.index_player {
margin-left:0%;
}
.index_player_dropdown_text{
	top: 308px;
}

.soundcloud-embed-frame {
	height:225px;
}
.soundcloud-embed-frame-dark {
	height:auto;
}


h1 {
	font-size: 1.5em;
}
}

@media all and (min-width: 800px) {
  .navi_lh { display: flex; }
  .navi_rh { display: flex; }
  .wrapper_lh { flex: 1 auto; }
  .main_frame    { flex: 5 0px; height: 480px;max-height: 480px }
  .navi_rh { flex: 1 auto; }
  .navi_lh { order: 1; } 
  .main_frame { order: 2; }
  .navi_rh { order: 3; }
  .footer  { order: 4; }
  .navi_top { display: none; }

/*.main_content_frame2 { height: 80%; }*/

 /*.image_max600 { width: 600px; } */

  .header_language {order: 3}  
  .header_logo {order: 1;
  margin-left: auto;
  margin-right: auto;
}
  .header_title {order: 2}

 .header_title {
    display: flex;
	flex: 3;
	height: 100%;
	align-items: center;
	}
	.header_language {
	display: flex;
	flex: 1;
	height: 100%;
	align-items: center;
	}
	.header_logo {
	display: flex;
	flex: 1;
	height: 100%;
	align-items: center;}
.soundcloud-embed {
	transform: scale(1);
	width: 100%;
	/* max-width: 600px; */
 height: auto;
min-height: 350px;
	/* max-height: 300px; */
}
.soundcloud-embed-frame {
	height:300px;
}
.soundcloud-embed-frame-dark {
	height:auto;
}

.index_player_iframe {
transform: scale(1);
	width: 100%;
	max-width: 600px;
	min-height: 350px;
	max-height: 350px;
}
.index_player_dropdown {
	width: 80%;
	max-width: 600px;
		height: 394px;
   	margin-top:  -407px;
	margin-left:auto;
}
.index_player {
margin-left:auto;
margin-right:auto;
}
.index_player_dropdown_text{
	top: 395px;
}

h1 {
	font-size: 2em;
}

}

body {
  padding: 0px; 
  //position:absolute;
  position: relative;
  height: 100%;
  width:100%;
  max-width:1200px;
  overflow: auto;
  background: #330000;
  margin-left: auto;
  margin-top: auto;
  margin-bottom:auto;
  margin-right:auto;
 
 scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #660000;
scrollbar-face-color: #990000;
scrollbar-highlight-color: #FFCC00;
scrollbar-shadow-color: #CC9900;
scrollbar-3dlight-color: #FF0066;


 
}

.html_index {

 padding: 0px; 
  height: 100%;
  width:100%;
  overflow: hidden;
  margin: 0px;

}

.body_index {
  padding: 0px; 
  height: 100%;
  width:100%;
  overflow: hidden;
}

body:onresize {color: fuchsia;}

table {
table-layout: auto;
border:0;
margin: 0;
 padding:0;
 border-spacing:0px;
 border-collapse:collapse;
 height: 100%;
}

html {
  height: 100%;
}