html{
	height: 100%;
	width: 100%;
}

/* ===================== */
/* STUFF FOR GRID LAYOUT */
/* ===================== */
* {
	box-sizing: border-box;
}

/* Formatierung für alle cols */
[class*="col-"]{
	width: 100%;
	float: left;
	padding: 5px 15px;
	/* LAYOUT TESTING
	border: 1px solid red */
}

/* Verhindern, dass andere Elemente die Cols bzgl. Spacing ignorieren */
.row::after{
	content: "";
	clear: both;
	display: table;
} 

/* Dasselbe für Inner-Row. Höhe 25px ist über "Downloads" zu sehen */
.innerrow::after{
	content: "";
	height: 25px;
	clear: both;
	display: table;
}

/* Offset für Jumpnav */
/*
:target:before{
	content:"";
	display: block;
	height: 90px;
	margin: -90px 0 0;
}
*/

/* ===================== */
/* ====== C S S ======== */
/* ===================== */
body{
	background-image:url(../images/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	background-position: 50% 0; /* Baum bleibt in der Mitte */
	background-attachment: fixed;
	color: white;
	background-color: black;
	font-family: "Verdans", sans-serif;
	line-height: 1.5em;
	margin: 0;
}

p{
	text-align: justify;
}

a{
	text-decoration: none;
	color: #B80000;
}

.center{
	display: block;
	text-align: center;
}

.section hr{
	display: none;
}

.innerrow{
	text-align: center;
	padding-top: 0px;	/* Abstand zwischen Fließtext und Inner Row*/
}

.centeronmobile *{
	text-align: center;
}

.centerelementonmobile{
	text-align: center;
}

a:hover{
	text-decoration: underline;	
}

.opaquebackground{
	background-color: rgba(0,0,0,0.8);
}

.sectionmobile p{
	text-align: center;
	margin-bottom: 0;
}

.sectionmobile h2{
	margin-top: 20px !important;
}

.sectionmobile{
	margin-bottom: 20px;
}

.breaking_container h2{
	color: #B80000;
}

#headcontainer{
	text-align: center;
}

#headcontainer .col-8{
	padding: 0;
}

#headcontainer img{
	width: 90%;
}

.section img{
	width: 100%;
}

.backtotop{
	display:block;
	margin-top: 20px;
}

.members {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 0 5px !important;
}

.members p{
	text-align: center;
}

.members img{
	width: 60%;
}

.section .header{
	text-align: center;
}

#topnav ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#topnav li{
	float: left;
	text-align: center;
}

#topnav a{
	font-family: "Georgia", serif;
	font-size: 1.5em;
	font-variant: small-caps;
	display: block;
	text-decoration: none;
	color: white;
	padding: 5px;
	font-weight: bold;
	border-bottom: 1px solid black;	/* nötig, damit beim Hovern kein grauer Pixelstrich erscheint */
}

#topnav a:hover{
	border-bottom: 1px solid red;
}

.section h2{
	font-family: "Georgia", serif;
	font-size: 2em;
	text-align: center;
	font-variant: small-caps;
}

.section h3{
	font-variant: small-caps;
}

.section h4{
	font-style: italic;
	text-align: center;
}

.sidebar h2{
	font-family: "Georgia", serif;
	font-size: 1.5em;
	font-variant: small-caps;
}

.sidebar h3{
	font-variant: small-caps;
	text-decoration: underline;
}

.sidebar h4{
	font-variant: small-caps;
	font-size: 1em;
}


.borderleft{
	border-left: 1px solid black;
}


.hideonmobile{
	display: none;
}

/* ============================= */
/* =========== B I O =========== */
/* ============================= */

.bio-question{
	font-weight: bold;
}

.bio-block .col-4, .bio-block .col-8{
	padding: 5px 0;
}

.bio-block .col-8{
	padding-bottom: 25px;
}

.bio .col-5{
	text-align: center;
}

/* ================================= */
/* =========== S H O W S =========== */
/* ================================= */

.shows-block div{
	padding-top: 0px; !important
}

.shows-block .col-3, .shows-block .col-6{
	padding: 0;
}

.padding-bot{
	padding-bottom: 25px;
}

.boldonmobile{
	font-weight: bold;
}
	
.italiconmobile{
	font-style: italic;
}

/* =========================================== */
/* = N E W S L E T T E R   O V E R W R I T E = */
/* ================================0========== */

div.newsletter_popup > form{
	background: rgba(0, 0, 0, 0.6) none repeat scroll 0% 0% !important;
}

div.newsletter_popup > form > div{
	background-color: #000 !important;
	border: 1px solid white;
}

.newsletter_popup h2{
	font-family: "Georgia", serif;
	font-size: 2em;
	text-align: center;
	font-variant: small-caps;
}

.newsletter_popup input[type=email]{
	width: 100%;
	border: 0px !important;
}

.newsletter_popup button{
	background-color: #B80000 !important;
}

.newsletter_popup button:hover{
	background-color: #910000 !important;
}

.newsletter_popup h2 > p{
	font-family: "Verdana", sans serif;
	font-variant: none;
	font-size: 16px;
}


/* ============================= */
/* = M E D I A   Q U E R I E S = */
/* ============================= */

/* Zwischengröße 1 */
@media only screen and (min-width: 900px){
	.col-1{ width: 8.33%; }
	.col-2{ width: 16.66%; }
	.col-3{ width: 25%; }
	.col-4{ width: 33.33%; }
	.col-5{ width: 41.66%; }
	.col-6{ width: 50%; }
	.col-7{ width: 58.33%; }
	.col-8{ width: 66.66%; }
	.col-9{ width: 75%; }
	.col-10{ width: 83.33%; }
	.col-11{ width: 91.66%; }
	.col-12{ width: 100%; }
	
	[class*="col-"]{
		float: left;
		padding: 25px;
	}
	
	body{
		background-attachment: fixed;
	}
	
		
	#topnav a{
		font-size: 1.2em;
	}
	
	.section hr{
		display: inline-block;
		width: 35%;
	}
	
	#headcontainer img{
		margin: 20px 0;
	}
	
	.topicheadline{
		display: inline-block;
		width: 30%;
	}
	
	.members img{
		width: 100%;
	}
	
	.backtotop{
		text-align: right;
	}	
	
	.hideonmobile{
		display: block;
	}
	
	.hideondesktop{
		display: none;
	}
	
	.centeronmobile *{
		text-align: left;
	}
	
	.boldonmobile{
		font-weight: normal;
	}
	
	.italiconmobile{
		font-style: normal;
	}
	
	.centerelementonmobile{
		text-align: left;
	}
	
	.shows-block .col-3, .shows-block .col-6{
		padding: 5px 0;
	}
	
	.padding-bot{
		padding-bottom: 0px;
	}

	
}

/* Desktop only */
@media only screen and (min-width: 1200px){
	#topnav a{
		font-size: 1.5em;
	}	
	
}