/* CSS © 2016 GABRIEL DESIGN GmbH */

body {
font-weight:lighter;
margin:0;
padding:0;
border:0;
font-family:'Roboto', sans-serif;
color:#fff;
}

html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:20px;
font:inherit;
vertical-align:baseline;
}

b { 
color: #ecccb8;
}

.container {
width:100% !important;
margin:0;
padding:0;
	
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0; 
}

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a:hover, a:active { outline: 0; }

img {
border:#fff 10px solid;
width:100%;
height:auto;
margin:5px 0px 2px 0px;
}

p {
margin:auto;
margin-bottom:50px;
width:50%;
text-align:center;
font-size:20px;
}

p.footer {
font-size:15px;
}

.logo {
border:none !important;
text-align:center !important;
width:300px !important;
height:300px !important;
padding-left:50% !important;
margin-left:-100px !important;
}

a {
text-decoration:underline;
color:#fff;
transition:all 0.2s ease;
}

a:hover, a.aktiviert {
color:#333;
text-decoration:underine;
}

a.agenda {
text-decoration:none;
color:#ecccb8;
transition:all 0.2s ease;
}

a.agenda:hover {
color:#fff;
}

a.bio {
text-decoration:none;
color:#5f5971;
transition:all 0.2s ease;
}

a.bio:hover {
color:#fff;
}

a.gesangsunterricht {
text-decoration:none;
color:#5d622f;
transition:all 0.2s ease;
}

a.gesangsunterricht:hover {
color:#fff;
}

a.kontakt {
text-decoration:none;
color:#b38369;
transition:all 0.2s ease;
}

a.kontakt:hover {
color:#fff;
}

h1 {
font-weight:bold;
font-size:50px;
color:#ecccb8;
text-align:center;
margin-bottom:50px;
}

b {
font-size:30px;
font-weight:normal;
color:#e08f50;
text-align:center;
}

h2 {
font-weight:bold;
font-size:40px;
color:#fff;
text-align:center;
margin-bottom:50px;
}

h5 {
padding:0;
margin-top:-50px;
font-size:15px;
color:#fff;
text-align:center;
}

#navigation{
text-align:center;
width:100%;
position:fixed;
border:none;
top:0;
z-index:999;
}

#navigation ul {
text-align:center;
width:100%;
margin:0 auto;
}

#navigation ul li{
float:left;
width:33.3333333333333333333333333333333%;
text-align:center;
background:#000;
}

#navigation ul li a{
text-align:center;
line-height:40px;
font-size:20px;
font-weight:bold;
text-decoration:none;
color:#fff;
text-transform:uppercase;
}

#navigation ul li a:hover{
text-align:center;
color:#333;
}

audio {
width:100%;
}

#bildcontainer1 {
width:100%;
height:100%;
padding-bottom:33.3333333333%;
background:url(../img/agenda2020.jpg);
background-size:cover;
margin:0;
border:0;
}

#bildcontainer2 {
width:100%;
height:100%;
padding-bottom:33.3333333333%;
background:url(../img/bio2020.jpg);
background-size:cover;
margin:0;
border:0;
}

#bildcontainer3 {
width:100%;
height:100%;
padding-bottom:33.3333333333%;
background:url(../img/gesangsunterricht.jpg);
background-size:cover;
margin:0;
border:0;
}

#bildcontainer4 {
width:100%;
height:100%;
padding-bottom:33.3333333333%;
background:url(../img/media2020.jpg);
background-size:cover;
margin:0;
border:0;
}

#bildcontainer5 {
width:100%;
height:100%;
padding-bottom:33.3333333333%;
background:url(../img/kontakt2020.jpg);
background-size:cover;
margin:0;
border:0;
}

#AGENDA {
width:100%;
height:auto;
padding:5% 10% 5% 10%;
background:#895942;
}

#BIO {
width:100%;
height:auto;
padding:5% 10% 5% 10%;
background:#313235;
}

#GESANGSUNTERRICHT {
width:100%;
height:auto;
padding:5% 10% 5% 10%;
background:#ced15f;
}

#MEDIA {
width:100%;
height:auto;
padding:5% 10% 5% 10%;
background:#03000f;
}

#KONTAKT {
width:100%;
height:auto;
padding:5% 10% 5% 10%;
background:#c79004;
}

#KONTAKT a {
	color:#795700;
}

.up a {
color:#b38369;
font-size:50px;
text-align:center;
transition:all 0.2s ease;
}

.up a:hover {
color:#fff;
}

input {
color:#fff;
font-size:15px;
background:#7a6958;
text-align:center;
border:none;	
width:300px;
padding:10px;
border-radius:none;
transition:all 0.2s ease;
}

input:hover {
color:#7a6958;
font-size:15px;
background:#fff;
text-align:center;
border:none;	
width:300px;
padding:10px;
border-radius:none;
transition:all 0.2s ease;
}

hr {
border:0;
width:30px;
color:#fff;
background-color:#eee;
height:5px;
}

@media screen and (max-width:1200px) {
	
p {
width:70%;
font-size:20px;
}

#AGENDA {
padding:5% 5% 5% 5%;
}

#BIO {
padding:5% 5% 5% 5%;
}

#GESANGSUNTERRICHT {
padding:5% 5% 5% 5%;
}

#MEDIA {
padding:5% 5% 5% 5%;
}

#KONTAKT {
padding:5% 5% 5% 5%;
}

}

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

#navigation{
bottom:0;
top:auto;
}

p, p.newsletter {
width:100%;
font-size:20px;
}

audio {
width:100%;	
text-align:left;
}

h1 {
font-size:40px;
margin-bottom:25px;
}

b {
font-size:30px;
}

h2 {
font-size:25px;
margin-bottom:25px;
}

h5 {
text-align:left;
margin-bottom:25px;
}

.up a {
text-align:center !important;
}

input {
width:100%;
padding:10px;
}

#AGENDA {
padding:5% 5% 5% 5%;
}

#BIO {
padding:5% 5% 5% 5%;
}

#GESANGSUNTERRICHT {
padding:5% 5% 5% 5%;
}

#MEDIA {
padding:5% 5% 5% 5%;
}

#KONTAKT {
padding:5% 5% 5% 5%;
}

#bildcontainer1 {
padding-bottom:75%;
background-position:center;
}

#bildcontainer2 {
padding-bottom:75%;
background-position:center;
}

#bildcontainer3 {
padding-bottom:75%;
background-position:center;
}

#bildcontainer4 {
padding-bottom:75%;
background-position:center;
}

#bildcontainer5 {
padding-bottom:75%;
background-position:center;
}

}