/* PRE-LOADER */

body {
	overflow: hidden;
	
}

#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#336D82;
	z-index:99;
}

#preview-area {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 100px;
    right: 0;
    margin: auto auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  
  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 40%;
  height: 40%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #CADB41;
  border-radius: 100%;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}



/* NORMALISIERUNG */

html, body, div , p { margin: 0; padding: 0; } 



/* STARTSEITE */

body.startseite {
	position: absolute;
    top: 0; left: 0; margin: 0;
    height: 100%; width: 100%;
	background: #7D7C80; 
	display: table;
	
}

#startseite {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	max-width: 90%;
}

#starttext {
	position: relative;
	margin-left: auto; margin-right: auto;
	text-align: center;
	max-width: 90%;
	padding: 10px;
}

img.start { 
    border: 0 none;
	max-width: 90%;
}


/*
#hidepage {
	position: absolute;
	top: 0; left: 0; 
	background: #FFFFFF;
	layer-background-color: #FFFFFF;
	height: 100%; width: 100%;
	display: none;
}

#photoholder { border: 0; background: url(pics/loading.gif) 50% 50% no-repeat; }
*/





/* HAUPTSEITE */


body {
    position: relative;
	min-width: 400px;
}

@media screen and (max-device-width: 460px)
{
	body {
		min-width: 200px;
		background-color: #161400;
	}
}

#body-bg-container {
    background-image: url(pics/cover_web1.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: cover;	
    height: 100vh;
 	width: 100vw; 
	position: fixed;
	
}


#logoblock {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 70px;
	width: 100%; 
	/*background-image: url(pics/blau6.jpg);*/
	/*background-size: cover;*/	
	background: #336D82;
	/*background: rgba(255,255,255,.3);*/
	border-bottom: 2px solid #CADB41;
	z-index: 10;
}

#counter {
	position: absolute;
	top: 0; right: 10px; 
	width: 200px; height: 30px; 
	text-align: right;
	margin-right: 10px;
	/*border: 1px solid #000000;*/
	/*display: none;*/
}

@media (max-width: 1450px)
{
	#counter {
		display: none;
	}
}


#logo {
	position: absolute;
	top: 10px; left: 50px; height: 50px;
	/*border: 1px solid #CADB41;*/
}

@media screen and (max-device-width: 460px)
{
	#logo {
		top: 10px; left: 10px; height: 50px;
	}
}

#menue {
	display: inline-block; !important;
	position: absolute; 
	top: 10px; left: 300px; 
	/*border: 1px solid #CADB41;*/
}

@media (max-width: 1300px)
{
	#menue {
		display: none; !important;
	}
}

#menue_mobil {
	display: none; 
}

@media (max-width: 1300px)
{
	#menue_mobil {
		display: inline-block;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 12;
	}
}


#page_1, #page_2, #page_3, #page_4, #page_5, #page_6, #page_7, #page_8, #page_9, #page_10, #page_11 {
	position: relative;
	height: auto; !important;
	min-height: 100vh;
	width: 100%;
	overflow: auto;
} 

#page_2, #page_4, #page_6, #page_8, #Page_10 { background: rgba(255,255,255,.15); }

#seite {
	position: relative;
	top: 0; margin-left: auto; margin-right: auto; margin-top: 90px; margin-bottom: 20px;
	padding: 10px;
	width: 60%;
	/*background: #2E1005;*/
	/*background: #FFFFFF;*/
	background: rgba(48,48,48,0.9);
	/*border: 1px solid #000000;*/
	text-align: left;
	z-index: 6;
}

@media screen and (max-device-width: 460px)
{
	#seite {
		width: 88%; 
	}
}

#content {
	position: relative;
	margin: 40px;
	text-align: left;
	/*border: 1px solid #000000;*/
}

@media screen and (max-device-width: 460px)
{
	#content {
		margin-top: 40px; left: 50%; margin-left: -48%;
		width: 96%;
	}
}

#arrows {
	position: relative;
	margin: 10x;
	text-align: center;
}

#footer {
	position: relative;
	margin: 0;
	min-height: 50px;
	padding: 5px;
	/*background: #7D7C80;*/
	background: rgba(48,48,48,0.9);
	z-index: 10;
	border-top: 2px solid #CADB41;
	text-align: center;
}



/* NAVIGATIION */

nav ul, nav li { list-style: none; margin: 0; padding: 0; border: 0;  }  /* Normalisierung */

nav li {
	float: left;
	text-align: center;
	line-height: 100%;
	padding: 6px;
	/* border: 1px dotted #CADB41;*/
}

nav a {
	text-decoration: none;
}

nav a:hover, nav a:active, nav:focus  {
	color: #f1f1f1;
}

nav a.burger {
}

@media (max-width: 1300px)
{
	nav ul, nav li { list-style: none; margin: 0; padding: 0; border: 0; }  /* Normalisierung */
	
	nav ul { width: 80%; margin-left: auto; margin-right: auto; }
	
	nav li {
		position: relative;
		width: 100%; height: 35px; line-height: 35px;
		background:#336D82;
		text-align: center;
		border: 1px dotted #CADB41;
		/*z-index: 15;*/
	}
	
	.overlay a {
		display: block;
		height: 35px; line-height: 35px;
		text-decoration: none;
		transition: 0.3s;
	}
	
	.overlay a:hover, .overlay a:active, .overlay a:focus  {
		color: #f1f1f1;
	}
	
	/* Verwendung unklar */
	img.nav { 
		height: 30px;
	}
	
	a.burger {
		position: fixed;
		top: 10px; right: 10px;
		background-image: url(pics/burger.png);
		background-size: 40px;
		width: 40px; height: 40px;
	}
	
	.overlay {
		height: 0%;
		width: 100%;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0, 0.5);
		overflow-y: hidden;
		transition: 0.5s;
	}
	
	@media (max-height: 570px)
	{
		.overlay {
			overflow-y: visible;
			overflow-x: hidden;
		}
	}
	
	.overlay-content {
		position: relative;
		top: 0;
		width: 100%;
		height: 700px;
		text-align: center;
		margin-top: 90px;
	}
	
	.overlay .closebtn {
		position: absolute;
		top: 5px;
		right: 15px;
		font-size: 50px;
	}
}



/* CONTENT-GESTALTUNG */	

/* div.content_top { display:none; } */
div.content_top {
	margin: 0px;
	padding-bottom: 5px;
	width: 100%;
	text-align: right;
	border-bottom: 2px solid #CADB41;
}

div.content_top_mirror {
	margin: 0px;
	padding-top: 5px;
	width: 100%;
	text-align: right;
}



div.clearfix:after {
  content: "";
  display: table;
  clear: both;
  padding-bottom: 15px;
 }

 div.clearfix {
  *zoom: 1; /* für IE */
  *padding-bottom: 15px; /* für IE */
}

div.clearfix2:after {
  content: "";
  display: table;
  clear: both;
}

div.clearfix2 {
  *zoom: 1; /* für IE */
}

div.clearfix3:after {
  content: "";
  clear: both;
}
div.clearfix3 {
  *zoom: 1; /* für IE */
}

div.news_bild  { width: 150px; padding-top: 10px; float: left; }
div.news_text_neben_bild { margin-left: 150px; padding-top: 5px; }
div.news_text, div.band_text, div.cd_songs { padding-top: 5px; }
img.news_bild, img.band_bild , img.cd_bild { width: 90%; }
div.band_bild  { width: 220px; padding-top: 10px; float: left; }
div.band_text_neben_bild { margin-left: 220px; padding-top: 5px; }
div.cd_bild { width: 260px; padding-top: 10px; float: left; }
div.cd_songs_neben_bild { display: inline-block; margin-left: 0px; padding-top: 10px; /*border: 1px solid #CADB41;*/}

@media (max-width: 900px)
{
	div.news_bild, div.band_bild, div.cd_bild  { float: none; }
	div.news_text_neben_bild, div.band_text_neben_bild  { margin-left: 0px; }
	div.cd_songs_neben_bild  { display: inline; margin-left: 0px; /*border: 1px solid #CADB41;*/}
}

div.termin_datum { width: 120px; float: left; }
div.termin_text { margin-left: 100px; }

@media (max-width: 900px)
{
	div.termin_datum  { float:none; }
	div.termin_text  { margin-left: 0px; margin-bottom: 10px; }
}

div.link { width: 200px; float: left; }
div.link_text { margin-left: 200px; }

@media (max-width: 900px)
{
	div.link  { float:none; }
	div.link_text  { margin-left: 0px; margin-bottom: 10px; }
}

hr.termine { margin-left: 0px; width: 80%; }

div.bio_text, div.cd_text, div.kontakt_text, div.gb_text, div.gb_formular, div.nl_text, div.nl_formular  { padding-top: 5px; }

@media (max-width: 900px)
{
	img.bio_bild { width: 100%; }
}


/*table.musik { border: 1px dotted #CADB41; }*/
div.song_nummer  { width: 25px; float: left; }
div.song_titel { margin-left: 20px; width: 180px; float: left; }
div.song_links { margin-left: 160px; float: left; }

div.feld_input_text, div.feld_textarea_text { width: 30%; float: left; }
div.feld_input_kasten, div.feld_textarea_kasten, div.tabellenfussnote { margin-left: 30%; padding-top: 5px; }

input.feld_input {
	width: 85%; height: 30px;
	border: 1px solid #000000;
	border-radius: 3px;
	padding-right: 5px;
	}

textarea.feld_textarea {
	width: 85%; height: 150px;
	border: 1px solid #000000;
	border-radius: 3px;
	padding-right: 5px;
	}

input[type=submit] {
	min-width: 100px; height: 30px;
	border: 1px solid #3F3A22;
	border-radius: 3px;
	cursor: pointer;
	background: #E6E6E6;
	font-family: Continuum, Verdana, Helvetica, Arial, sans-serif;
    font-size: 17px;
	color: #3F3A22;
}
	
@media (max-width: 900px)
{
	div.feld_input_text, div.feld_textarea_text { width: 100%; float:none; }
	div.feld_input_kasten, div.feld_textarea_kasten, div.tabellenfussnote  { margin-left: 0px; padding-top: 0; margin-bottom: 10px; }
}

div.bildkat_zeile { margin-left: 50px; display: table; /* für IE: */ *height: 100%; }
div.bildkat_bild { width: 120px; display: table-cell; /* für IE: */ *float: left; }
div.bildkat_text { display: table-cell; vertical-align: middle; /* für IE: */ *position: relative; *top: 50%; *margin-top: -10px; }
img.bildkat { width: 95%; overflow: hidden; }
 
@media (max-width: 900px)
{
	div.bildkat_zeile { margin-left: 0px; width: 100%; text-align: center; display: inherit; }
	div.bildkat_bild { margin-left: 0px; width: 100%; display: inherit; }
	div.bildkat_text { margin-left: 0px; margin-bottom: 10px; display: inherit; }
	img.bildkat { width: 200px; max-width: 50%;  }
}

div.bild_container { margin-left: -5px; margin-top: 5px; width: 100%; }
div.bild_feld_gallery { width: 22%; float: left; vertical-align: middle; padding: 5px; }
img.bild_feld_gallery { width: 100%; overflow: hidden; border-radius:4px}

@media (max-width: 900px)
{
	div.bild_feld_gallery { width: 80px; }
}

div.swiftbox_bilder { display: none; }
div.lightbox_bilder { display: inline; }

@media screen and (max-device-width: 460px)
{
	div.swiftbox_bilder { display: inline; }
	div.lightbox_bilder { display: none; }
}

img { border: 0px; }
/*img.rand { border:1px solid #CADB41; }*/

/*iframe.youtube_web { width: 854px; height: 480px;}*/
iframe.youtube_web { width: 100%; height: 56.25%; }
iframe.spotify_web { width: 100%; height: 80%;}

@media (max-width: 1100px)
{
	/*iframe.youtube_web { width: 100%; }*/
}

img.social_net { margin: 4px; height: 26px; width: auto; }
img.logo_top { height: 50px; width: auto; }



/* TEXT */

@font-face { font-family: 'Continuum';
             src: url('contm.ttf') format('truetype'); }

p, a {
    font-family: Continuum, Verdana, Helvetica, Arial, sans-serif;
    /*font-family: Helvetica; Verdana, Arial, sans-serif;*/
    /*font-family: Courier New, Courier, mono;*/
    font-size: 17px;
    line-height: 24px;
    /*font-weight:bold;*/
    /*color:#000000; /*schwarz*/
	/*color:#3F3A22; /*grau Stange*/
	/*color:#346D81; /*blau Himmel*/
	color:#CADB41; /*gelbgrün*/
	word-wrap:break-word;
}

p.counter { font-size: 14px; color: #7D7C80; }

p.termin_new { font-weight: bold; color: #FFFFFF; }

p.content_top { font-size: 30px; color: #CADB41; }
p.content_top_mirror { 
	font-size: 30px; color: rgba(202,219,65, 0.4);
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);

}

p.content_head { font-size: 17px; }

p.start { font-size: 20px; color: #CADB41; text-align: center; word-wrap:break-word; }

p.footer { font-size: 16px; color: #CADB41; }

a:link, a:visited { color: #336D82; }
a:hover, a:active  { color: #7D7C80; }

a.menue_left:link, a.menue_left:visited, a.menue_left:hover { color: #346D81; }
a.menue_left:hover { padding_left: 5px; }
a.menue_left:active { color: #003366 } /*blau*/

hr {
  background-color:	#7D7C80;
  color:#7D7C80;
  border:#7D7C80;
  height:1px;
}


a.nav { font-size: 20px; color:#CADB41; }

a.footer { font-size: 16px; color: #CADB41; text-decoration: none; }


/* ADMIN-/CONFIGBEREICH */

body.admin {
    background: url(pics/cover_web1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	overflow:auto;

}

#admin-seite {
	position: relative;
	top: 0; margin:20px;
	padding: 10px;
	min-height: 90%;
	overflow:auto;
	background: rgba(56,56,56,0.95);
}

div.ad_nav { width: 100%; height: 40px; background:#336D82; }

li.ad_nav {
	list-style: none; 
	float: left;
	text-align: center;
	line-height: 100%;
	padding: 6px;
	padding-left:20px;
	/* border: 1px dotted #CADB41;*/
}


div.ad_nav_items { padding: 10px; }
table.config_nav { background:#336D82; }
a.admin_nav { font-size: 16px; color: #CADB41; text-decoration: none; }
a.admin_nav:hover, a.admin_nav:active, a.admin_nav:focus, p.admin_nav  { font-size: 16px; color: #f1f1f1; }

font.status1 { color: #339933; } /*grün*/
font.status2 { color: #CC0000; } /*rot*/

p.logs { font-size: 9.5px; }
p.admin_copyright { color: #000000; text-align: center}
p.admin_kopfangabe_liste { margin-top: 10px; margin-bottom: 10px; }
p.config_head { color: #CC0000; }
p.admin { font-size: 14px; }