@font-face { font-family:"Roboto Slab"; src:url("font/RobotoSlab-Regular.ttf"); }
@font-face { font-family:"Roboto Slab"; src:url("font/RobotoSlab-Bold.ttf"); font-weight:bold; }
@font-face { font-family:"Roboto"; src:url("font/Roboto-Regular.ttf"); }
@font-face { font-family:"Roboto"; src:url("font/Roboto-Bold.ttf"); font-weight:bold; }
@font-face { font-family:"Roboto"; src:url("font/Roboto-Italic.ttf"); font-style:italic; }

@keyframes progressbar {
	0% { transform:rotate(0deg); }
	50% { transform:rotate(180deg); }
	100% { transform:rotate(360deg); }
}
@keyframes progresslogo {
	0% { opacity:1.0; }
	50% { opacity:0.5; }
	100% { opacity:1.0; }
}

* {
	outline: none;
}

*::selection {
	color: rgba(183, 45, 84, 0.7);
	background-color: white;
}

#progress-bar {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:100%;
	height:100%;
	max-width:128px;
	max-height:128px;
	overflow:hidden;
}
#progress {
	top:0;
	left:0;
	width:100%;
	height:100%;
	position:absolute;
	animation-name:progressbar;
	animation-duration: 3s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}
#progress-logo {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	animation-name: progresslogo;
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}

#header-album {
	margin-bottom: 10px;
	position: relative;
    width:100%;
    overflow: hidden;
}

#header-album > img {
	max-width:100%;
}

#header-album-content {
	position: absolute;
	bottom: 4px;
	left: 0;
	right: 0;
	background-color: rgba(183, 45, 84, 0.7);
	width: 100%;
	margin: 0;
	padding: 10px 50px;
	text-align: left;
	box-sizing: border-box;
}

#blog .flexcontainer ul {
	width: 102%;
}

.compilation-item {
	position:relative;
	width: 139px;
	height: 139px;
	background-color: rgb(183, 45, 84);
	margin: 0 15px 15px 0;
	display: flex;
	align-items: center;
	border: 3px solid rgb(183, 45, 84);
	font-family:"Roboto Slab";
}

a.compilation-item, a.compilation-item:hover {
	border: 3px solid rgb(183, 45, 84) !important;
}

.play, .pause {
	background-color: rgba(255,255,255,0.2);
}

.compilation-button {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	cursor:pointer;
	background-image:url("graphics/button_play.svg");
	background-repeat: no-repeat;
	background-position:center center;
}

.play-audio {
	background-image:url("graphics/button_audio.svg");
}

.play-youtube {
	background-image:url("graphics/button_youtube.svg");
}

.play-soundcloud {
	background-image:url("graphics/button_soundcloud.svg");
}

.play .compilation-button {
	background-image:url("graphics/button_pause.svg");
}

.pause .compilation-button {
	background-image:url("graphics/button_play.svg");
}

.download {
	background-image: url("graphics/button_download.svg");
}

.compilation-background-layer {
	background-color: rgba(183, 45, 84, 0.7);
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:0;
	z-index:0;
}
.compilation-item-layer-title {
	display:flex;
	width:100%;
	height:100%;
	justify-content:center;
	align-items:center;
	background-color: rgb(183, 45, 84);
	z-index:2;
}

.play .compilation-item-layer-title, .pause .compilation-item-layer-title {
	display:none;
}

.compilation-item:hover .compilation-item-layer-title {
	display:none;
}

.compilation-item-title {
	font-weight: bold;
	margin:20px;
}

#buffer_next img, #buffer_right img {
	opacity:0;
}

body {
	color:white;
	font-family:"Roboto";
	background:none;
	margin:0;
	padding:0;
}

article p {
	font-size:16px;
}

.page-element {
	width: auto !important;
	padding-top: 5px;
	padding-bottom: 5px;
	height: 14px;
	vertical-align: text-top;
}

div.footnote p {
	font-size:12px;
}

div.footnote {
	border-top: 1px solid white;
}

a:link, a:visited {
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	border:none;
	outline:0;
	color:white;
}
header {
	font-family:"Roboto Slab";
	max-width:1106px;
	text-align:center;
	margin:auto;
}
a:active, a:focus, a:hover {
	border:none;
	outline:0;
}
table {
	width:100%;
}
thead {
	font-weight:bold;
}
td {
	vertical-align:top;
	padding-bottom:20px;
}
article, #survey {
	background:-o-linear-gradient(bottom right, rgba(255, 255, 255, 0.2), rgba(183, 45, 84, 0.7), rgba(183, 45, 84, 0.7)) no-repeat center center;
	background:-webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0.2), rgba(183, 45, 84, 0.7), rgba(183, 45, 84, 0.7)) no-repeat center center;
	background:-moz-linear-gradient(bottom right, rgba(255, 255, 255, 0.2), rgba(183, 45, 84, 0.7), rgba(183, 45, 84, 0.7)) no-repeat center center;
	background:linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(183, 45, 84, 0.7), rgba(183, 45, 84, 0.7)) no-repeat center center;
	text-align:left;
	padding:25px;
	margin-top:10px;
	height:auto;
	overflow:hidden;
}

#survey {
	box-sizing: border-box;
}

article img {
	max-width:100%;
}
div.line img.neighbour {
	width:auto;
	display:inline;
	float:right;
}
.icon_hover {
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(183, 45, 84, 0.7);
	color:white;
}
article a {
	background:url("graphics/link.svg") left no-repeat;
	background-size: auto 12px;
	background-position: 5px center;
	padding-left:16px;
}
article a:link, article a:active, article a:visited {
	font-weight:normal;
}
a.simple, a:link.simple, a:active.simple, a:visited.simple {
	background-image:none;
	font-weight:bold;
	padding-left:0;
	word-break: break-word;
}

a.reload_link {
	display: block;
	background-image: url("graphics/reload_link.svg?1774987735");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	padding-left: 25px;
	padding-right: 25px;
	font-weight: normal;
	text-align: center;
	padding-bottom: 30px;
	margin-bottom:10px;
	margin-top: 20px;
}

a.section_link {
	display: block;
	background-image: url("graphics/section_link.svg?1774987735");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	padding-left: 25px;
	padding-right: 10%;
	font-weight: normal;
	text-align: center;
	margin-bottom: 10px;
}

a.section_link.article {
	text-align:left;
	padding-top:25px;
	padding-bottom:25px;
}

a.section_link.left {
	text-align:left;
}

#contentLeft a.section_link {
	margin-right:5px;
}
#contentRight a.section_link {
	margin-left:5px;
}

span.h1 {
	display:block;
	font-family: "Roboto Slab";
	font-size: 1.5em;
	font-weight:bold;
	margin: 20px 0 20px 0;
}
.native {
	width:auto;
}
dt {
	font-weight:bold;
}
dd {
	font-weight:normal;
	margin:0;
}
.avatar {
	max-width:33%;
}
.default {
	width:auto;
	height:auto;
}
footer {
	background:rgb(183, 45, 84);
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	padding:2px;
	font-size:12px;
	font-family:"Roboto Slab";
	z-index:3;
}
footer li {
	display:inline-block;
	padding:0;
	padding-right:20px;
	margin:0;
}
footer li img {
	vertical-align:middle;
}
footer ul {
	list-style-type:circle;
	text-align:center;
	margin:0;
}
footer .responsive {
	display:none;
}
.avatar img {
	width:100%;
}
#contentLeft article {
	margin:0;
	padding-right:100px;
	margin-right:5px;
	margin-bottom:10px;
}
#contentRight article {
	margin:0;
	margin-left:5px;
	margin-bottom:10px;
}

input, textarea, select, button {
	border:white solid 2px;
	background:none;
	color:white;
	width:100%;
	max-width:100%;
	font-size: 16px;
	font-family:"Roboto";
	box-sizing: border-box;
}

input[type="submit"], button {
	background-color: white;
	color: rgb(183, 45, 84);
	font-weight: bold;
	cursor: pointer;
}

input[type="submit"].submit-process, button.submit-process {
    background-color: rgb(183, 45, 84);
    background-image: url("graphics/jso_loading.gif");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent;
}

input[type=checkbox], input[type=radio] {
	display: inline;
	width: auto;
}

input.agb-accepted {
	display: none;
}

textarea::placeholder {
	font-style: italic;
	color: white;
}

.input-required-missing {
	background-color: rgba(255, 0, 0, 0.5);
}

.input-required-missing[type=radio] {
	accent-color: rgba(255, 0, 0, 0.5);
	filter: brightness(50%) sepia(1) hue-rotate(327deg);
}

select {
	border:none;
	max-width:110%;
	width:110%;
}
.icon {
	width:20px;
}

option {
	background:grey;
	color:white;
}
#select_box, .select_box {
	overflow:hidden;
	width:100%;
	border:white solid 2px;
	background:url("graphics/arrow_select.png") right no-repeat;
	box-sizing: border-box;
}
#select_box div.error, .select_box div.error {
	overflow:hidden;
	width:100%;
	border:red solid 2px;
	background:url("arrow_select.png") right no-repeat;
}
#submit {
	width:auto;
}
#logo {
	height: 64px;
	margin: 20px;
	position: relative;
	top: 0;
	z-index: 10;
}
.link {
	padding:10px;
	margin:0;
	margin-top:12px;
	border:3px solid white;
	display:inline-block;
	width:120px;
	text-align:center;
}
nav a {
	margin:0;
	margin-right:10px;
	margin-top:12px;
	width:120px;
}
nav a:last-child {
	margin-right:0;
}
.flexbox {
	width:103%;
	display:flex;
	flex-flow: row wrap;
}

.flexcontainer {
	overflow: hidden;

}

.flexcontainer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding-left: 0px;
	margin-top:0;
	width: 101.44%;
}

.flexcontainer ul li {
	height: 145px;
	width:145px;
	margin: 0 15px 15px 0;
}

#fonts {
	width:200px;
}
#fontbar {
	position:fixed;
	top:0;
	left:0;
	right:0;
	padding:20px;
	background:rgba(0,0,0,0.7);
	border:none;
	opacity:0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
	z-index:2;
	text-align:left;
}
#fontbar:hover {
	opacity:1.0;
}
#index {
	transform:rotate(-3deg);
}
#index_text {
	transform:rotate(3deg);
}
#content {
	text-align:center;
	max-width:1106px;
	z-index:1;
	overflow:hidden;
	margin:auto;
	margin-top:20px;

}
#fader {
	position:absolute;
	display:inline-block;
	margin-left:auto;
	margin-right:auto;
	width:800px;
	display:none;
	z-index:0;
}
#showcase, #messagebox {
	opacity: 0;
	pointer-events: none;
	background:rgba(0,0,0,0.7);
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:10;
	text-align:center;
}
#close_button {
	position:absolute;
	right:5%;
	top:5%;
	width:35px;
	cursor:pointer;
}
#next_image {
	position:absolute;
	top:0;
	right:5%;
	bottom:0;
	width:35px;
	height:50%;
	margin:auto;
	background:url("graphics/next.png") center center no-repeat;
	background-size:contain;
	cursor:pointer;
}
#prev_image {
	position:absolute;
	top:0;
	left:5%;
	bottom:0;
	width:35px;
	height:50%;
	margin:auto;
	background:url("graphics/prev.png") center center no-repeat;
	background-size:contain;
	cursor:pointer;
}

#loading {
	position:absolute;
	width:72px;
	height:72px;
	margin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:url("graphics/logo.png") center center no-repeat;
	background-size:contain;
	animation-name:progress;
	animation-duration:2s;
	animation-iteration-count:infinite;
}
.media {
	position:absolute;
	max-width:95%;
	margin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	box-shadow:0 0 2px black;
	background-color:black;
	background-image:url("graphics/jso_loading.gif") center center no-repeat;
}

audio {
	background-color: #f1f3f4;
}

audio.media {
	height:20px;
}

article audio, article video {
	width: 100%;
}

img.media {
	position:absolute;
	max-width:80%;
	max-height:80%;
	margin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	box-shadow:0 0 2px black;

}
.message {
	position:absolute;
	width:60%;
	height:20%;
	min-width:150px;
	min-height:300px;
	margin:auto;
	padding:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:none;
	vertical-align:middle;
}

#contentLeft, #contentRight{
	position:static;
	display:inline;
	float:left;
	top:10px;
	width:50%;
	padding:0;
	z-index:1;
}
#contentLeft {
	left:0;
}
#contentLeft img {
	position:relative;
	left:0;
	right:5px;
}
#contentLeft div.frame img {
	max-width: 100%;
}
#contentRight img {
	max-width: 100%;
}

.button_download {
	background:url("graphics/button_download.svg?1774987735") center center no-repeat;
}
.button_upload {
	background:url("graphics/button_upload.png?1774987735") center center no-repeat;
}
.button_audio {
	background:url("graphics/button_audio.svg?1774987735") center center no-repeat;
}
.button_video {
	background:url("graphics/button_video.svg?1774987735") center center no-repeat, url("graphics/layer.svg?1774987735") top left repeat, url("media/preview/We-See-Fire-001.jpg") left top no-repeat;
}
.button_image, .button_download, .button_upload, .button_audio, .button_video {
	margin-bottom:10px;
	text-align:center;
	display:block;
	background-size:cover;
}
p.error {
	color:red;
}
input.error, textarea.error, #select_box.error {
	background-color:rgba(255,0,0,0.5);
}
.button_download:hover, .button_upload:hover, .button_audio:hover, .button_video:hover, .button_image:hover {
	background:rgba(183, 45, 84, 0.7);
}
.button_content, .button_content_img {
	opacity:0;
	width:100%;
	height:100%;
}
.button_content:hover {
	background:rgb(183, 45, 84);
	opacity:1.0;
}
.button_content_img:hover {
	background:rgba(183, 45, 84, 0.7);
	opacity:1.0;
}
#content a.button_image, #content a.button_download, #content a.button_upload,  #content a.button_audio, #content a.button_video {
	width:145px;
	height:145px;
	margin-right:15px;
	margin-bottom:15px;
	font-family: "Roboto Slab";
}

#content a.button_download {
	display:block;
}

#content a.button_upload {
	display:block;
	float:none;
}
.button_text {
	position:relative; 
	display:block; 
	top:50%; 
	-ms-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	padding:20px;
} 

.frame {
	position:relative;
}

#contentRight .frame, #contentLeft .frame {
	margin-top:0;
	margin-bottom:5px;
	position:relative;
}

article .frame {
	display: inline;
}

.copyright {
	right: 10px;
	bottom: 10px;
	color: white;
	font-size: 10px;
}

.frame .copyright {
	position: absolute;
}

#contentLeft .frame {
	margin-right:5px;	
}
#contentRight .frame {
	margin-left:5px;
}

#contentLeft article div.frame {
	margin-right:0;
}
#contentRight article div.frame {
	margin-left:0;
}

.bgObject {
	position:absolute;
	top:0;
	left:0;
	width:75%;
}
#animation {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow:hidden;
	z-index:-10;
	background:url("graphics/background.svg?1774987735") center center no-repeat;
	background-size:cover;
}
img.element {
	position:absolute;
	background-position:center center;
	background-size:contain;
}
#contentRight {
	right:0;
}
hr, form hr {
	border:white 1.5px solid;
	margin-left:5px;
	margin-right:5px;
}
article hr {
	border:1px solid white;
	width:50%
}
.foldbox_content {
	overflow:hidden;
}
.foldbox h1, .post h1, .thread h1 {
	font-family:"Roboto Slab";
	padding-top:0px;
	margin-top:0;
}
.foldbox_content h1 {
	margin-top:30px;
	font-family:"Roboto Slab";
}
.foldbox h1:hover {
	cursor:pointer;
}
.foldbox_content h1:hover {
	cursor:text;
}
.foldbox hr {
	border:none;
	border-bottom:3px solid white;
	width:50%;
	margin:0;
	margin-bottom:10px;
}
article hr, .foldbox_content hr { 
	border:1px solid white;
	margin-left:0;
	margin-right:0;
	width:100%;
}
nav {
	position:static;
	max-width:1106px;
	margin:0;
	padding-bottom:20px;
	border-bottom:3px solid white;
}
#space {
	width:100%;
	height:50px;
	clear:left;
}
h1, input.cms_title {
	font-family: "Roboto Slab";
	font-size: 1.5em;
	margin: 20px 0 20px 0;
	font-weight: bold;
}
input.cms_title {
	font-size:26px;
	font-weight:bold;
	border:none;
}
a.native {
	background:none;
	margin-left:none;
}

p.copyright_gallery {
	text-align: center;
	position: absolute;
	bottom: 10%;
	z-index: 100;
	left: 0;
	right: 0;
}

canvas {
	top:0;
	left:0;
	position:fixed;
	z-index:-1;
}		

#jso_player {
	position:absolute; 
	width:460px; 
	max-height:300px; 
	text-align:center; 
	padding:20px; 
	padding-top:40px; 
	top:0;
	left:0; 
	right:0; 
	bottom:0;
	margin:auto; 
	background:rgb(183, 45, 84); 
	box-shadow:0 0 2px black;
	z-index:100;
}

#jso_player audio {
	position:absolute;
	left:0;
	bottom:0;
	right:0;
	width:100%;
}

.showcase_dirigent, .showcase_jahr, .showcase_ort {
	font-size:18px;
}

a.active > div {
	transform:rotate(-3deg);
}
a.active > div > div {
	transform:rotate(3deg);
}

.nojs {
	background-color: rgba(255, 0, 0, 0.5);
	display: block;
	padding: 10px;
	margin: 20px auto;
	color: white;
	max-width: 1106px;
	box-sizing: border-box;
}

.button_blog_next {
	background-image:url("graphics/blog_next.svg");
	background-size:64px 64px;
	width:64px;
	height:64px;
}

.underline {
	text-decoration: underline;
}

.mobile-content {
	max-width: 464px;
	margin: auto;
	box-sizing: border-box;
}

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

	.flexbox {
		justify-content:center; 
	}

	#content {
		position:relative;
		left:0;
		right:0;
	}

	p.login_message {
		position:relative;
		left:0;
		right:0;
		margin:0;
		padding:0 20px 20px 20px;
		text-align:center;
	}

}

@media only screen and (min-width:1106px) {

	#content > #blog, #content > #survey, .blog-nojs {
		width: 785px;
		margin-left: auto;
		margin-right: auto;
	}

	.flexbox {
		justify-content:left;
	}

	p.login_message {
		position:absolute;
		top:20px;
		left:0;
		right:0;
		margin:auto;
		text-align:right;
		width:1106px;
		font-family:"Roboto Slab";
		font-size:16px;
	}
}

@media only screen and (max-width:800px) {
	#contentLeft, #contentRight {
		position:relative;
		float:none;
		margin-left:0;
		margin-right:0;
		left:0;
		right:0;
	}
	#contentRight a.section_link {
		margin-left:0;
		margin-right:5px;
	}
	#header-album-content {
		position:relative;
		background-color: rgba(255,114,0,0.7);
	}
	#contentRight .frame, #contentLeft .frame {
		position:relative;
		left:0; 
		right:0;
		margin-left:0 !important;
		margin-right:0 !important;
	}
	#contentLeft article, #contentRight article {
		position:relative;
		margin-left:0;
		margin-right:0;
		left:0;
		right:0;
	}
	#contentLeft article {
		padding-right:25px;
	}
	#contentLeft img, #contentRight img {
		position:relative;
		left:0;
		margin-left:0;
		margin-right:0;
	}
	img {
		padding:0;
		margin:0;
		width:auto;
	}
	#content {
		position:relative;
		overflow:hidden;
		left:0;
		right:0;
	}
	footer {
		font-size:18px;
		margin-top:20px;
		position:relative;	
		padding:10px 20px 20px 20px;
		z-index:1;
	}
	footer #copyright_footer {
		font-size:12px !important;
		display:block;
		width:100%;
		margin:0;
		padding:0;
	}
	footer li {
		display:inline;
		width:50%;
		position:relative;
		padding-left:10px;
		padding-right:10px;
		margin:0;
	}
	footer li.bullet {
		display:none;
	}
	footer .responsive {
		display:block;
	}
	footer ul {
		padding:0;
	}
	footer ul.responsive {
		margin-top:20px;
		margin-bottom:20px;
	}
	.unresponsive {
		display:none !important;
	}
	canvas {
		display:none;
	}
	#jso_player {
		max-width:auto;
		max-height:auto;
		height:auto;
		width:auto;
		z-index:100;
	}
	#space {
		display:none;
	}
}

table.probenplan {
	text-align:left;
}

table.probenplan td {
	padding-top:0;
	padding-bottom:0;
}
table.probenplan td.termin {
	padding-top:20px;
}
table.probenplan h1 {
	margin-bottom:0;
}
a.menu, a.pointer {
	font-family:"Roboto Slab";
	font-weight:bold !important;
	background-image:url("graphics/arrow_white.svg");
	background-repeat:no-repeat;
	background-size: auto 14px;
	background-position:0 4px;
	padding-left:15px;

}
a.menu {
	text-align:left;
	display:block;
}
p.login_message a.menu {
	display:inline;
}

img.icon_small {
	width:auto;
	height:16px;
}

@page {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 10cm;
	padding-bottom: 10cm;
}

@media print {
	#logo {
		filter: invert(1);
	}

	nav {
		display: none;
	}

	#canvas {
		display: none;
	}

	#animation {
		display: none;
	}

	footer {
		display: none;
	}

	.dont-print {
		display: none;
	}
}

.popup-background {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    animation-name: fade-in;
    animation-duration: 0.2s;
    overflow: auto;
}

.popup-content-box {
    position: relative;
    background-color: rgb(183, 45, 84);
    width: 100%;
    max-width: 500px;
    padding: 20px;
    color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    margin: auto;
	scrollbar-color: white transparent;
}

.button-close-content-box {
    background-image: url("graphics/button_close.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.popup-content-box h2 {
    margin: 20px 0;
}

.popup-content-box-error {
    background-color: #aa0000;
    max-width: 400px;
}

.popup-content-box-error button {
    color: #aa0000;
}

.popup-content-box-success {
    background-color: #00aa00;
    max-width: 400px;
}

.popup-content-box-success button {
    color: #00aa00;
}

.survey {

}

.survey-item {
	display: block;
	margin: 20px 0;
}

.survey-item input {
	width: auto;
	display: block;
}

.survey-item input[type=checkbox], .survey-item input[type=radio] {
	display: inline;
}

.survey-item-members {
	padding-left: 20px;
}