body, html { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 10px; font-family: 'Roboto', sans-serif; font-weight: 300; color: #000;}



/** z-index **/
#resButton { z-index: 100; }
header { z-index: 90; }
#resTopDown, #resRightLeft { z-index: 80; }



/** Schriften **/
h1 { font-size: 6em; line-height: 1em; padding: 0; margin: 0; }
h2 { font-size: 3em; line-height: 1.2em; padding: 0; margin: 0 0 1em 0; }
h3 { font-size: 2em; line-height: 1em; padding: 0; margin: 0; }
footer h2 { font-size: 2em; }
p, ul { font-size: 1.6em; line-height: 1.5em; }
header ul { font-size: 1.4em; line-height: 1em; }
a { text-decoration: none; }

figure .hgrou p h1, h2 { font-weight: 600; }
header ul, figure .hgroup h1 {  text-transform: uppercase; }



/** Responsive Menü Button **/
#resButton { display: none; position: fixed; right: 0; width: 50px; height: 38px; padding-top: 10px; }
#resButton:hover { cursor: pointer; }
#resButton div { width: 20px; height: 2px; background: #000; margin: 5px auto; }



/** Responsive Menü SlideDown **/
#resTopDown { position: fixed; width: 100%; height: 100%; background: red; top: -100%; }
#resRightLeft { position: fixed; width: 100%; height: 100%; right: -100%; }
#resRightLeft ul { text-transform: uppercase; text-align: center; padding-top: 3em; font-weight: 700; font-size: 3em; }



/** Background **/
body, header, section { background-color: #fff; }
footer, article.left { background-color: #fff; }
article.right, #resRightLeft { background-color: #fff;}



/** Color **/
header a, article.left, article.left h2, .schedule a, #resRightLeft a:hover, #resRightLeft a.aktiv { color: #000; }
article.right, article.right h2, #resRightLeft a { color: #000; }
header a:hover, header a.aktiv, h1, footer a, strong, h2, .schedule li span, .impressum a { color: #000; font-weight: bold; }



img { display: block; }
.spacer100 { height: 10em; }
.c_12 { width: 80%; }



/** Header **/
header { position: fixed; width: 100%; height: 5em; }
header .logo { height: 1.5em; width: auto; margin: 1.75em 0 0 2%; display: inline; }
header nav { float: right; margin: 1.8em 2% 0 0; }
header li { display: inline-block; }
header a { text-decoration: none; padding: 0 1em; }
header a.imgLink { width: 14px; height: 14px; background-repeat: no-repeat; background-size: 14px 14px; background-position: center; }
header a.imgLink.fb { background-image: url(/res/img/svg/fbIcon.svg); }
header a.imgLink.tw { background-image: url(/res/img/svg/twIcon.svg); }
header a.imgLink.in { background-image: url(/res/img/svg/inIcon.svg); }

figure { width: 100%; height: calc(100% - 5em); padding-top: 5em; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;	
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0); 
		-o-transform: translateZ(0); 
		transform: translateZ(0);; background-position: center center; }
figure .hgroup { position: relative; width: 100%; top: 30%; padding: 0;  text-align: center; }
figure img { width: 50px; height: auto; position: absolute; bottom: 2em; left: 50%; margin-left: -25px; }
figure img:hover { cursor: pointer; }



/** Content **/
.news { width: 80%; margin: 0 auto; }
.news article { margin-bottom: 14em; }

.hgroup { width: 35%; padding: 4em 2.5%; }
.hgroup h2 { margin-bottom: 0; }
.hgroup span { display: inline-block; }
.hgroup span:first-child { margin-bottom: 1em; }

article.right .hgroup { float: right; }
article.right .firstImg { float: left; }

article.left .hgroup { float: left; }
article.left .firstImg { float: right; }

article .firstImg { width: 60%; }
article .vollImg { width: 100%; }
article .halbImg { width: 50%; float: left; }

.info article { padding: 10em 0; margin: 0; }

.schedule article { padding: 10em 0; margin: 0; }
.schedule li { line-height: 2em; }
.schedule li.hide { opacity: .3; }
.schedule li a { text-decoration: underline; }
.schedule li span { padding-right: 2em; }


.impressum article { padding: 4em 0; }
.impressum article:first-child { padding: 10em 0 4em 0; }
.impressum article:last-child { padding: 4em 0 10em 0; }

.thumbnail { width: 25%; float: left; }
.thumbnail > div { border: 0px !important; width: 100%; height: 100%; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;	
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0); 
		-o-transform: translateZ(0); 
		transform: translateZ(0);; background-position: center center; }



/** footer **/
footer { position: relative; padding: 8em 0; }
footer .sponsoren li { width: 40%; float: left; margin: .5em 10% .5em 0; }
footer .sponsoren a { display: block; }
footer .sponsoren img { width: 100%; height: auto; }
footer .friends li { line-height: 1.6em; }
footer h2 { margin-bottom: 1em; }
footer .footerLink { position: absolute; right: 2%; bottom: 1em; }
footer a:hover { text-decoration: underline; }



@media screen and (max-width: 1300px) { 
	body { font-size: 9px; }
}
@media screen and (max-width: 1200px) { 
	.news { width: 100%; }
    .c_12 { width: 94%; }
}

@media screen and (max-width: 1000px) { 
    h2 { font-size: 2em; }
    p, ul { font-size: 1.4em; }
    figure { height: 50%; }
    figure img { display: none; }    
	.info .c_12 .g_4 { width: 49%; left: 33.33333333%; padding-right: 16.66666%; }
    .info .c_12 .g_4:first-child { margin-bottom: 4em; }
    .spacer100 { height: 4em; }
    .thumbnail { width: 33.33333333%; }
    .hgroup { width: 45%; padding: 2em 2.5%; }
    .hgroup span:first-child { margin-bottom: 1em; font-size: 75%; }
    article .firstImg { width: 50%; }
}


@media screen and (max-width: 800px) {     
    footer .sponsoren li { width: 60%; float: none; margin: .5em 0 .5em 0; }
    .hgroup span:first-child { margin-bottom: 0em; }
    .info .c_12 .g_4 { width: 99%; left: 0; padding-right: 0; }
    .schedule .c_12 .g_6,
    .impressum .c_12 .g_6 { width: 99%; left: 0; padding-right: 0; }
    .thumbnail { width: 50%; }
}
@media screen and (max-width: 700px) {
	header nav { display: none; }
    #resButton { display: block; }
    h1 { font-size: 4em; }
    figure .hgroup { top: 40%; }
    .hgroup { width: 95%; padding: 2em 2.5% 4em 2.5%; }
    article .firstImg { width: 100%; }
    article .halbImg { width: 100%; float: none; }
    .info article,
    .schedule article { padding: 4em 0; }
    .impressum article:first-child { padding: 4em 0 4em 0; }
    .impressum article:last-child { padding: 4em 0 4em 0; }
    footer { padding: 4em 0; }
    footer .c_12 .g_4 { width: 99%; margin-bottom: 4em; }
    footer .sponsoren li { width: 40%; float: left; margin: .5em 5%; }
}