@charset "UTF-8";

/* 
Farbdefinitionen:

Schrift:    	#333
rot:			#e61b26
dunkelrot:		#9e1c0d

*/

/* Standard-Styles für ältere Browser (ausser IE)
*******************************************************************************/
command, datalist, source {
	display: none;
}
article, aside, figure, figcaption, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
figure, menu {
	margin-top: 1em;
	margin-bottom: 1em;
}
dl menu, menu dl, menu menu, menu ol, menu ul {
	margin-bottom: 0;
	margin-top: 0;
}


/* Generell
*******************************************************************************/

* {
	margin: 0;
	padding: 0;
	outline: none;
}

html {
	-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
	-webkit-font-smoothing: antialiased; /* damit im Safari die Schrift nicht Blinkt bei den Animationen vom Flexslider */
}

body {
	margin: 0;
	font-family: 'Arvo', serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.05em;
	color: #009;
	background: #fff;
	line-height: 1.35em;
}

h1 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2em;
	text-transform: uppercase;
	padding: 0 15px;
}

h2 {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0 0 15px 0;
}

h3 {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0;
}

a:link, a:visited {
	text-decoration: none;
	color: #666;
}

a:hover, a:active, a.aktiv {
	text-decoration: none;
	color: #000;
}

img {
	border: none;
}

.clear {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	clear: both;
}


td {
	vertical-align: top;
	text-align: left;
}

.trenner {
	position: relative;
	clear: both;
	width: 100%;
	height: 25px;
	border-bottom: #c5c5c5 1px solid;
	margin-bottom: 25px;
}

.showpad {
	display: none;
}

strong {
	font-weight: 700;
}


/* Konstrukt
*******************************************************************************/

#wrap {
	position: relative;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 20px 30px 50px;
}

@media only screen and (max-width: 700px){
	#wrap {
		padding: 0 15px 30px 15px;
	}
}



/* Header
*******************************************************************************/

#logo {
	position: absolute;
	top: 0;
	left: 0;
	padding: 40px 0 0 40px;
	width: 25%;
}

#header #logo {
	padding-left: 0;
}

#logo img {
	width: 100%;
	height: auto;
}

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

@media only screen and (max-width: 1000px){
	#logo {
		padding: 30px 0 0 40px;
		width: 35%;
	}
}

@media only screen and (max-width: 450px){
	#logo {
		padding: 30px 0 0 40px;
		width: 80%;
	}
}

@media only screen and (max-width: 350px){
	#logo {
		padding: 30px 0 0 20px;
		width: 80%;
	}
}


#header {
	position: relative;
	width: 100%;
}

#headerBilder {
	position: relative;
	float: right;
	width: 60%;
	margin-right: -20px;
}

.bild1, .bild2, .bild3 {
	position: relative;
	width: 25%;
	height: auto;
	float: right;
	/*-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; */
}

.bild1 img, .bild2 img, .bild3 img {
	width: 100%;
	height: auto;
}

.bild2 {
	padding-left: 18%;
}

.bild3 {
	padding-left: 7%;
}


@media only screen and (max-width: 930px){
	.bild2, .bild3 {
		display: none;
	}
}

@media only screen and (max-width: 760px){
	.bild1 {
		display: none;
	}
}

/* Hauptnavigation
*******************************************************************************/

#mobileNav {
	display: none;
}

#mobile-header {
	display: none;
	position: absolute;
	top: 15px;
	right: 0;
	width: 30px;
	height: 30px;
	background: url(/_images/menu-button.png);
}

#responsive-menu-button {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	overflow: hidden;
}

#navigation {
	width: 100%;
	padding: 100px 0 120px 0;
	z-index: 10 !important;
}

#navigation ul {
	list-style: none;
}

#navigation li {
	float: left;
}

#navigation a:link, #navigation a:visited {
	text-decoration: none;
	color: #fff;
	display: block;
	padding: 0 30px 0 0;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	font-style: italic;
}

.pink #navigation a:hover, .pink #navigation a:active, .pink #navigation a.aktiv {
	text-decoration: none;
	color: #FD93B2;
}

.rot #navigation a:hover, .rot #navigation a:active, .rot #navigation a.aktiv {
	text-decoration: none;
	color: #FF0000;
}

.blau #navigation a:hover, .blau #navigation a:active, .blau #navigation a.aktiv {
	text-decoration: none;
	color: #86DEF9;
}




@media only screen and (max-width: 1300px){
	#navigation a {
		font-size: 18px !important;
		padding: 0 20px 0 0 !important;
	}
}

@media only screen and (max-width: 1100px){
	#navigation a {
		font-size: 16px !important;
		padding: 0 12px 0 0 !important;
	}
}

@media only screen and (max-width: 930px){
	#navigation {
		margin-left: -45%;
		width: 145%;
		padding: 70px 0 80px 0;
	}
}


@media only screen and (max-width: 760px){
	#mobile-header {
		display: inherit;
	}
	#navigation {
		display: none;
	}
}




/* Content
*******************************************************************************/

#contentHome {
	position: relative;
}

#contentHome ul {
	list-style: none;
	width: 100%;
}

#contentHome li {
	float: left;
	width: 33%;
	height: auto;
	position: relative;
}

#contentHome a {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
	top: 0;
	left: 0;
	
}

#contentHome img {
	width: 100%;
	height: auto;
}

#homeProjekte a {
	background: url(/_images/button_projekte.png) no-repeat;
	background-size: contain;
}
#homeProjekte a:hover, #homeProjekte a:active {
	background: url(/_images/button_projekte_over.png) no-repeat;
	background-size: contain;
}

#homeCD a {
	background: url(/_images/button_cd.png) no-repeat;
	background-size: contain;
}
#homeCD a:hover, #homeCD a:active {
	background: url(/_images/button_cd_over.png) no-repeat;
	background-size: contain;
}

#homeClips a {
	background: url(/_images/button_clips.png) no-repeat;
	background-size: contain;
}
#homeClips a:hover, #homeClips a:active {
	background: url(/_images/button_clips_over.png) no-repeat;
	background-size: contain;
}

#homeKinderchor a {
	background: url(/_images/button_kinderchor.png) no-repeat;
	background-size: contain;
}
#homeKinderchor a:hover, #homeKinderchor a:active {
	background: url(/_images/button_kinderchor_over.png) no-repeat;
	background-size: contain;
}

#homeJugendchor a {
	background: url(/_images/button_jugendchor.png) no-repeat;
	background-size: contain;
}
#homeJugendchor a:hover, #homeJugendchor a:active {
	background: url(/_images/button_jugendchor_over.png) no-repeat;
	background-size: contain;
}

#homeKontakt a {
	background: url(/_images/button_kontakt.png) no-repeat;
	background-size: contain;
}
#homeKontakt a:hover, #homeKontakt a:active {
	background: url(/_images/button_kontakt_over.png) no-repeat;
	background-size: contain;
}


#contentHome li#homeProjekte {
	margin: 50px 0 -50px 0;
}


@media only screen and (max-width: 1000px){
	#contentHome li {
		width: 50%;
	}
	#contentHome li#homeClips {
		margin: -50px 0 0 -52px;
	}
	#contentHome li#homeKinderchor {
		margin: -50px 0 0 30px;
	}
	#contentHome li#homeJugendchor {
		margin: 50px 0 0 0;
	}
}

@media only screen and (max-width: 550px){
	#contentHome li {
		width: 100%;
	}
	#contentHome li#homeClips {
		margin: -50px 0 0 -52px;
	}
	#contentHome li#homeKinderchor {
		margin: 0;
	}
	#contentHome li#homeJugendchor {
		margin: 50px 0 0 -30px;
	}
	#contentHome li#homeProjekte {
		margin: 30px 0 0 0;
	}
}


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

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


#cont {
	clear: both;
	width: 100%;
	z-index: 1;
}

#content {
	float: right;
	width: 70%;
	z-index: 10;
	overflow: visible;
}

.weiss #content {
	color: #fff;
}

.schwarz #content {
	color: #003;
}

#sideBild {
	position: relative;
	float: left;
	width: 30%;
	padding: 0 30px 0 0;
	margin-top: 280px;
	z-index: 1 !important;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}

#sideBild.weitlinks {
	margin-left: -20%;
	margin-top: 100px;
	width: 50%;
}

#sideBild img {
	width: 110%;
	height: auto;
	margin-left: -80px;
}

#content article {
	clear: both;
	width: 100%;
}

.contentBild {
	position: relative;
	float: left;
	width: 30%;
	padding-right: 30px;
	padding-bottom: 25px;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}

.contentBild.klein {
	width: 20%;
}

.contentBild img {
	width: 100%;
	height: auto;
	padding-bottom: 5px;
}

.legende {
	font-size: 12px;
}

.contentText {
	padding-right: 15%;
	padding-bottom: 25px;
	float: left;
	width: 70%;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}

.contentText.gross {
	width: 80%;
}

.contentText ul {
	margin-left: 17px;
}

.pink .contentText a:link, .pink .contentText a:visited {
	color: #FD93B2;
}

.blau .contentText a:link, .blau .contentText a:visited {
	color: #86DEF9;
}

.rot .contentText a:link, .rot .contentText a:visited {
	color: #FF0000;
}

.pink .contentText a:hover, .pink .contentText a:active,
.blau .contentText a:hover, .blau .contentText a:active,
.rot .contentText a:hover, .rot .contentText a:active {
	color: #fff;
}


@media only screen and (max-width: 760px){
	#content {
		float: none;
		clear: both;
		width: 100%;
		padding-top: 100px;
	}
	#sideBild {
		display: none;
	}
	.contentText {
		padding-right: 0;
	}
}

@media only screen and (max-width: 450px){
	.contentText, .contentText.gross {
		margin-bottom: 40px;
		padding-right: 0;
		width: 100%;
	}
	.contentBild {
		width: 100%;
		float: none;
		clear: both;
		padding-right: 0;
	}
	.contentBild.klein {
		width: 50%;
		float: none;
		clear: both;
		padding-right: 0;
	}
}


ul.galerie {
	list-style: none;
	margin-right: -25px;
	margin-left: 0;
}

.galerie li {
	float: left;
	width: 100px;
	margin-right: 25px;
	margin-bottom: 20px;
}

.galerie img {
	width: 100%;
	height: auto;
}


/* Footer
*******************************************************************************/



/* Admin WebEdition
*******************************************************************************/

.admin {
	color: #3C0;
}

div.admin {
	background: #dadada;
	color: #000;
	font-weight: normal !important;
	padding: 10px;
	margin: 0 0 20px 0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 3px 3px 3px #333;
	-moz-box-shadow: 3px 3px 3px #333;
	box-shadow: 3px 3px 3px #333;
}