/*UNIVERSAL STYLES*/

body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
text-align: center;
}

.logo {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
max-height: 6em;
background: white;
text-align: left;
padding-top: .3em;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
z-index: 10000;
}	


	
.logo a img {
height: 3.5em;
margin-left:.4em;	
}

nav ul {
position: relative;
top: -2.5em;	
margin-right: -.5em;
}

.submenu {
position: fixed;
top:5.4em;
right:.5em;
display: flex;
flex-direction: column;

}

.submenu a img {
width:auto;
max-width:2em; 
max-height: 2em;
opacity:.3;

}

.submenu a img:hover {
opacity:.8;
filter: grayscale(100%);	
}

.band_menu {
margin-left:auto;
margin-right:auto;
display:flex;
width:80%;
max-width: 51em;
align-items:center;
flex-wrap: wrap;
flex-direction: row;
}

.bandmenu_wrapper {
width:33%;
background:url('tile_background.png');
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
border-radius:1em;
border: solid white 1px;
padding-bottom:1em;
margin-bottom:.1em;
margin-left:.08%;
}


.imagecutter {
height:9em;
overflow: hidden;	

}

.bandmenu_wrapper img {
width: 100%;	
border-radius: .1em;
overflow:hidden;
filter:grayscale(50%);
}

div.bandmenu_wrapper:hover {
background:url(tile_background2.png);
z-index:1000;
}

div.bandmenu_wrapper:hover p {
opacity: 1;	
}

div.bandmenu_wrapper:hover img {
filter: grayscale(5%);	
}


.bandmenu_headline {
font-size:1em;
font-weight:bold;
color:black;
opacity:.7;
position:relative;
margin:.5em;
}

.bandmenu_headline_web {
font-size:1em;
font-weight:bold;
color:black;
opacity:.7;
position:relative;
margin:.5em;
min-height:3em;
}

.bandmenu_bottomline {
font-weight:bold;
position: relative;
font-size:.55em;
color: black;
opacity:1;	
}

.bandmenu_bottomline_web {
position: relative;
font-size:.7em;
color: black;
opacity:1;
line-height: 1.3em;	
padding:.5em;
min-height: 10em;
}




.contentframe {
width: 80%;
opacity: .95;
max-width: 50em;
border: solid white 1px;
text-align: left;
margin: 0 auto;
padding: 0em .1em .1em .1em;
margin-bottom: 5em;
overflow: hidden;
border-radius: .25em;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
}





a {
text-decoration:	
}

a:link {color:grey;}
a:visited {color:grey}
a:hover {color:darkgrey}
a:active {color:grey}


.contentbox_band {
background: white;
color: black;
border-radius: .3em;
position: relative;
margin-top:-.7em
padding-top: 1em;	
}

div.bildcontainer {
position: relative;
}

div.bildbeschreibung {
position: absolute;
top: 3em;
left: 3em;
font-size: .5em;
color: white;
opacity: .8;	
}

img.bandfoto_quer {
width: 50%;	
float: left;
margin:1em 1em 1em 1em;
border-radius:.2em;
position: relative;
top:.7em;
}



.contentframe h4 {
color: #282f38;
margin: .5em;
font-size: 1.5em;
}

hr {
margin: 0em 1em 0em 1em;	
}

.contentbox_band p {
margin-top: 1em;
margin-bottom: 0em;
padding-left: 1em;
padding-right: 1em;
}

p.lieblingslied_container {
background: whitesmoke;	
height: auto;
padding: 1em;
}


h4.lieblingslied_headline {
color: grey;	
font-size:1.5em;
position: relative;
top: .8em;
text-transform:uppercase;
}

img.interviewpartner {
width: 33%;
float: left;
margin-bottom:1em;
margin-top: .4em;
border-radius: .3em;
}

.interview_description {
color: white;
font-size:.5em;
width:100%;
opacity:.9;
text-align: left;
top:1.2em;
left:-26em;
}




iframe {
width:50%;
float: left;
margin-bottom: .5em;
margin-right: 1em;
margin-left: 0em;	
border-radius: .3em;
}

p.zitat {
font-size: 1.3em;
color: darkgrey;
background-color: whitesmoke;	
padding: 1em;
margin-bottom:3em;
}

span.hochkomma {
position: relative;
top:.3em;
font-size:3em;
font-family:Gentium;	
}

span.zitatname {
font-size: .5em;	
}

img.interviewpartner {
margin-right:1em;	
}



p.interview {
margin-top: -.5em;	
}






* {
padding: 0px;
margin: 0px;
list-style-type: none;
text-decoration: none;
}

html, body {
width: 100%;
height: 100%;
line-height: 1.4em;
}





nav a:link {color: grey}
nav a:visited  {color: grey
}	
nav a:hover {color: lightgrey}
nav a:active {color: grey}



.footer a:link {color: grey}
.footer a:visited {color: grey}
.footer a:hover {color:whitesmoke}
.footer a:active {color:grey}


/*FOOTER DESKTOP*/

.footer {
background: white;
opacity:.8;
}

.footer_contact {
flex: 1;	
}

.footer_links {
text-align: right;
flex: 1;
}
	
.saalepixel {
text-align: left;
font-size: .7em;
color: black;
padding-left: 1.5em;
opacity: .8;
padding: 1em;
}


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

body {
background:#c6ced7;
font-size: 18px;	
}

p.lieblingslied_container {
padding-top:5.3em;	
}

.desktop-only {
display: none;	
height: 0px;
}

h5 {
font-size: 1em; 
color: #d1d8de;
margin-bottom: 4vh;
}

.logo {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
max-height: 3em;
background: white;
text-align: left;
padding: 2px;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
z-index: 10000;
}


.logo a img {
height: 2.5em;
margin-left: 0em;
z-index: 10000;
display: block;
}

nav {
display: none	
}

input {
display: none;	
}

.nav-trigger:checked + label {
display: none;
}

label[for="nav-trigger"] {
	position: fixed;
	top: -65px;
	right: -105px;
	width: 5em;
	height: 1em;
	color: white;
	z-index: 5;
	margin: 4em;
  cursor: pointer;
	border-left: 3em 
}


.nav-trigger:checked ~ nav {
display: block;
position: absolute;
top: 2.7em;
left: 0;
width: 100%;
display: block;
z-index: 9000;
color: black;
background: white;
text-transform: uppercase;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
text-align: right;
}

nav ul {
position: relative;
top: .5em;
margin-right: 1em;	
margin-bottom: 1em;
}


.submenu {
position: absolute;
display: flex;
flex-direction: row;
top:-1.7em;
}

.submenu a img {
width:auto;
max-width:1.5em; 
max-height: 1.5em;
margin-left:.8em;
filter: grayscale(100%);
opacity:.35;

}

.submenu a img:hover {
opacity:.7;
filter: grayscale(100%);
}



.contentframe {
width: 97%;
opacity: .95;
max-width: 70em;
border: solid white 1px;
text-align: left;
margin: 0 auto;
padding: 0em .1em .1em .1em;
margin-bottom: 10em;
overflow: hidden;
border-radius: .25em;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
}


.band_menu {
margin-left:auto;
margin-right:auto;
display:flex;
width:100%;
align-items:center;
flex-wrap: wrap;
flex-direction:column;
}

.bandmenu_wrapper {
width:90%;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
border-radius:.5em;
border: solid white 1px;
padding-bottom:1em;
margin-bottom:.5em;
margin-left:.08%;
}


.imagecutter {
height:10em;
overflow: hidden;	

}

.bandmenu_wrapper img {
width: 100%;	
border-radius: .1em;
overflow:hidden;
filter:grayscale(20%);
}

div.bandmenu_wrapper:hover {
background:white;
z-index:1000;
}

div.bandmenu_wrapper:hover p {
opacity:1;	
}

div.bandmenu_wrapper:hover img {
filter: grayscale(5%);	
}


.bandmenu_headline {
font-size:.7em;
font-weight:bold;
color:black;
opacity:.8;
margin:.1em;
}

.bandmenu_headline_web {
font-size:.7em;
font-weight:bold;
color:black;
opacity:.8;
margin:.1em;
min-height: 2em;
}

.bandmenu_bottomline {
font-weight: bold;
position: relative;
font-size:.6em;
color: black;
opacity:.8;	
margin-bottom:-1.4em;
}

.bandmenu_bottomline_web {
font-weight: bold;
position: relative;
font-size:.6em;
color: black;
opacity:.8;	
margin-bottom:-1.4em;
}





img.bandfoto_quer {
width: 100%;	
margin:-1em 0em 2em 0em;
border-radius:.2em;
}

div.bildbeschreibung {
position: absolute;
top: -.5em;
left: 1em;
font-size: .5em;
color: white;
opacity: .4;	
}


.contentbox_band p {
margin-top: 1em;
margin-bottom: 0em;
padding-left: .5em;
padding-right: .5em;
}

img.interviewpartner {
width: 100%;
margin-right:0em;
margin-left: 0em;	
margin-bottom:2em;
margin-top: -5em;
border-radius:.3em;
}

p.interview_description {
	color: white;
	right:4em;
	top: -9em;
	position:relative;
	text-align: right;
	width: 100%;
	height: 0px;
}

iframe {
width:100%;
margin-bottom: 2em;
margin-right: 0em;
margin-left: 0em;	
border-radius: .3em;

}

p.zitat {
font-size: 1.4em;
color: darkgrey;
background-color: whitesmoke;	
padding: 1em;
margin-bottom:3em;
}

span.hochkomma {
position: relative;
top:.3em;
font-size:3em;
font-family:Gentium;	
}

span.zitatname {
font-size: .5em;	
}

p.lieblingslied {
color: black;
background-color: whitesmoke;
padding-top: 3em;	
padding-bottom: 3em;
margin-top: 3em;
margin-top: -1em;
}

h4 {
position: relative;
left:-.25em;
line-height: 1;	
} 

h4.lieblingslied {
color: grey;	
font-size:1.6em;
position: relative;
left: -.25em;
}


.sm {
position: relative;
top: -5em;
}

	

	
	
}

@media screen and (max-width: 50em) and (orientation: landscape)  {
	.logo a img {
	height: 2em;
	}

	.stichpunkte p {
	display: none;
	}
	
	.stichpunkte h4 {
	display: none;
	}	
	
	.nav-trigger:checked ~ nav {
	position: absolute;
	top: 2.2em;
	}
}
	
@media screen and (min-width:850px) {

.mobile-only {
display: none;
}

html, body {
background-color: #fde8c9;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}	
	

	
.logo img {
margin-top: 0px;
margin-left: 1em;
height: 5em;	
}
	
.logo input {
display:none;
}	

.logo label {
display: none;		
}	


nav ul li {
display: inline;	
margin-left: .8em;
}


	
nav {
display:block;
text-transform: uppercase;
position: fixed;
top: 4.9em;
right: 1em;
font-size: .9em;
}
	


		
	
.first {
font-size: .75em;
line-height: 1.2em;	
background: url('tile_background2.jpg');
border-radius: 1em;
padding: 1.6em;
text-align: left;
position: absolute;
color: white;
width: 20%;
top: 6em;
left:.5em;
z-index:1000; 
opacity: .95;
}
	
.first h4 {
margin-bottom: .5em;		
}
	
.desktop-only {
display: block;		
}
	
.content_box {	
width: 100%;
display: flex;
/*background: url('tile_background2.jpg');*/
background: lightgrey;
color: black;
text-align: left;
margin-top: 0px;
margin-bottom: 1em;
overflow: hidden;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);

}
	

	



.sm {
position: relative;
top: -7em;
}
	


	

	

	
}