@charset "UTF-8";
/* --- reset --- */
html,body,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,varb,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:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}/*html5 display-role reset for older browsers*/
body{line-height:1;}
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;}
/* --- reset --- */
html{overflow-y:scroll;}
/* --- typo --- */
strong{font-weight:bold;}
a:link{outline:none;}
a:hover{text-decoration:none;}
a:active,a:focus{outline:none;}
a{cursor:pointer;}
html{-webkit-font-smoothing:antialiased; height:100%;}
/* --- layout --- */
@font-face {
    font-family: 'ABeeZee';
	src: url("../source/ABeeZee-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}


body{font-family: "ABeeZee"; line-height: 1.3; height:100%; background-color: #EEE;}
#header{height: 180px; position: absolute; top: 0; width:100%; background: -prefix-linear-gradient(top, rgba(18,20,25,1), rgba(18,20,25,0)); background: linear-gradient(to bottom, rgba(18,20,25,1), rgba(18,20,25,0)); z-index: 99; -webkit-backface-visibility: hidden;}
#header .logo{position:absolute; top:20px; left:20px; -webkit-backface-visibility: hidden;}
#header ul{position:absolute; right: 60px; height:32px; top:74px;}
.closeButton{position:absolute; right: 60px; height:32px; top:74px; width:38px; height:24px; background: url('../images/menu.png'); margin-top:5px;  text-indent: 100%; white-space: nowrap; overflow: hidden;}
#header ul li{float: left; padding-right: 30px; display:block; line-height:32px; color:#FFF; font-size:20px; text-transform: uppercase; }
#header ul li:last-child { padding-right: 0px;}
#header a{display:block; opacity: 1.0; filter: alpha(opacity=100); transition: opacity .20s ease-in-out; -moz-transition: opacity .20s ease-in-out; -webkit-transition:opacity .20s ease-in-out; text-indent: 100%; white-space: nowrap; overflow: hidden;}
#header .facebook{width:34px; height:34px; background: url('../images/fb_symb.png');}
#header .youtube{ width:34px; height:34px; background: url('../images/yt_symb.png');}
#header .email{width:38px; height:34px; background: url('../images/email_symb.png');}
#header .menu{width:38px; height:24px; background: url('../images/menu_symb.png'); margin-top:5px;}
#header .spacer{display:block; width:1px; height:46px; margin-top:-6px; background:#FF0000;}
#header > ul > li > a:hover {opacity: 0.5; filter: alpha(opacity=50);}

@keyframes fadein {from { opacity: 0; }to{ opacity: 1; }}
@-moz-keyframes fadein {from { opacity: 0; }to{ opacity: 1; }}
@-webkit-keyframes fadein {from { opacity: 0; }to{ opacity: 1; }}
@-ms-keyframes fadein {from { opacity: 0; }to { opacity: 1; }}
@-o-keyframes fadein {from { opacity: 0; }to{ opacity: 1; }}

.continue{background: rgba(18, 20, 25, .50); border: 1px solid #FFF; background-image: url('../images/continue_symb.png'); background-repeat:no-repeat; background-position:center; display:inline-block; width:60px; height:56px; position: absolute; top: 80%; left:50%; transform: translateX(-50%); padding-top:4px; transition: background .20s ease-in-out; -moz-transition: background .20s ease-in-out; -webkit-transition:background .20s ease-in-out;}
.continue:hover{background: rgba(18, 20, 25, 1); background-image: url('../images/continue_symb.png'); background-repeat:no-repeat; background-position:center;}

.titleImg{width:100%;}

#navWrapper,#menuWrapper{height:100vh; width:100%; background-color: #000;}
#nav,#menu{height:100vh; width:100%; background-color: #000;}
#nav > a > div, #menu > a > div{float:left; height:100%; width:20%; position:relative; overflow:hidden;}
#nav > a > div > div, #menu > a > div > div{position:absolute; top:0; left:0; height:100%; width:100%; opacity: 0.25; filter: alpha(opacity=25); transition: .20s ease-in-out; -moz-transition: .20s ease-in-out; -webkit-transition: .20s ease-in-out;}
#nav > a > div > span, #menu > a > div > span{position:absolute; top:50%; left:0%;  transform: translateY(-50%);  display: block; width:100%; text-align:center; -webkit-backface-visibility: hidden;}
#nav > a > div > span > span, #menu > a > div > span > span{border: 1px solid #FFF; display:inline-block;  text-transform: uppercase; background: rgba(18, 20, 25, .50); padding:10px 20px 10px 20px; color:#FFF; text-decoration:none; font-size:18px; transition: background .20s ease-in-out; -moz-transition: background .20s ease-in-out; -webkit-transition:background .20s ease-in-out;}

#nav .navNews, #menu .navNews {background: url('../images/navNews_mobile.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
#nav .navInfos, #menu .navInfos{background: url('../images/navInfos_mobile.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
#nav .navTermine, #menu .navTermine{background: url('../images/navTermine_mobile.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
#nav .navKontakt, #menu .navKontakt {background: url('../images/navKontakt_mobile.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
#nav .navFFKorb, #menu .navFFKorb{background: url('../images/navFF_mobile.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
#nav > a:hover > div > div, #menu > a:hover > div > div{opacity: 1.0; filter: alpha(opacity=100); transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');}
#nav > a:hover > div > span > span, #menu > a:hover > div > span > span{background: rgba(18, 20, 25, 1);}

h1{position: absolute; width: 100%; text-align:center; top: 50%; transform: translateY(-50%); color:#FFF; font-size:180px; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; text-transform: uppercase;}
h2{width: 1400px; margin:auto; padding-top:40px; padding-bottom:20px; font-size:70px; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; text-transform: uppercase;}
h3{width: 1400px; margin:auto; padding-bottom:10px; padding-top:20px; font-size:28px; text-transform: uppercase;}
h4{width: 1400px; margin:auto; padding-bottom:10px; padding-top:20px; font-size:28px;}
p{width: 1400px; margin:auto; padding-bottom:20px; font-size: 18px;}
p > a{color:#000; text-decoration:underline; transition: color .20s ease-in-out; -moz-transition: color .20s ease-in-out; -webkit-transition:color .20s ease-in-out;}
p > a:hover{color:#F00;}
p:last-of-type{padding-bottom:60px;}
.spacer { width: 1400px;  margin:auto; margin-top:20px; margin-bottom:20px; height:1px; background:#F00; display:block; }

.clear{clear:both; display: block;}

.error h2{padding-top:220px;}

.news{padding-bottom:60px;}
.news h4{padding-top:0px; font-size:24px;}
.news p{padding-bottom:10px;}
.news a{color:#000; text-decoration:underline; transition: color .20s ease-in-out; -moz-transition: color .20s ease-in-out; -webkit-transition:color .20s ease-in-out;}
.news a:hover{color:#F00;}

.article h2{text-transform:none; padding-top:180px;}
.article .imgDiv{width:1400px; margin:auto;}
.article .imgDiv img {max-width: 100%; width:100%;}
.article p{text-align: justify; line-height: 1.6;}
.article .author{color:#F00; font-style:italic;}
.article a{color:#000; text-decoration:underline; transition: color .20s ease-in-out; -moz-transition: color .20s ease-in-out; -webkit-transition:color .20s ease-in-out;}
.article a:hover{color:#F00;}
.article a > img{  -o-filter: grayscale(0%); -moz-filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: grayscale(0%); transition: .20s ease-in-out; -moz-transition: .20s ease-in-out; -webkit-transition: .20s ease-in-out; -o-transition: .20s ease-in-out;}
.article a:hover > img{  -o-filter: grayscale(100%); -moz-filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: grayscale(100%);}

.infos{width:1400px; margin:auto;}
.infos li{ width: 30%; height:300px; overflow:hidden; position: relative; display:inline-block; margin-left:10px; }
.infos li:first-of-type{ margin-left:0px; }
.infos li div:first-of-type{ width: 100%; height:100%; overflow:hidden; transition: all 1s ease;-moz-transition: all .20s ease; -ms-transition: all .20s ease; -webkit-transition: all .20s ease; -o-transition: all .20s ease;}
.infos .jugendfeuerwehr{background: url('../images/infosJugendfeuerwehr.jpg')no-repeat center center; webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover; }
.infos .kindergruppe{background: url('../images/infosKindergruppe.jpg')no-repeat center center; webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover; }
.infos .eltern{background: url('../images/infosEltern.jpg')no-repeat center center; webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover; }
.infos li:hover div:first-of-type {transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
}
.infos .infoNav{ position: absolute; bottom:6px; left:10px; -webkit-backface-visibility: hidden; background: rgba(18, 20, 25, .75); padding:4px;}
.infos a{ color:#FFF; font-size:28px; text-transform:uppercase;}

.question{color:#F00; padding-bottom: 6px; padding-top:18px;}
.question:first-of-type{padding-top:0px;}
.faqContact{padding-bottom:10px; padding-top:20px; font-size:28px; text-transform: uppercase;}

.ulWrapper{width:1400px; margin:auto;}
#jugendfeuerwehr ul{padding-left: 50px; font-size:18px;}
#jugendfeuerwehr li{padding-bottom: 8px; list-style-type: square; color: #F00;}
#jugendfeuerwehr li span{color: #000;}
#jugendfeuerwehr .date{color:#F00; font-size: 22px;}

.timeline{padding-top:20px; padding-bottom:60px; overflow:hidden;}
.timeline p{border-left: 1px solid #F00; padding-left:10px; padding-bottom:30px; }
.timeline p:last-of-type{padding-bottom:0px;}
.timeline .month{font-size:40px; text-transform: uppercase; padding-top:30px;}
.timeline .month:first-of-type{padding-top:0px;}
.timeline .month span{
   	display:inline-block;
    width: 0;
    height: 0;
	border-style: solid;
	border-width: 10px 0 10px 20px;
	border-color: transparent transparent transparent #F00;
	margin-left:-10px;
	margin-right: 10px;
}
.timeline .date{color:#F00; padding-bottom:0px;}

#footer{width:100%; background-color: #121419;}
#footer p{width: 100%; color:#818181; text-align:center; padding-bottom: 20px;}
#footer ul{width:100%;}
#footer ul:first-of-type{text-align: center; font-size:18px; padding-top: 20px; text-transform: uppercase;}
#footer ul:first-of-type li{display:inline-block; height:34px; margin-right: 30px;}
#footer ul:first-of-type li:last-of-type{margin-right:0px;}
#footer ul:first-of-type li span{display:inline-block; line-height:34px;}
#footer .facebook{padding-left:44px; height:34px; background: url('../images/fb_symb.png'); background-repeat: no-repeat;}
#footer .youtube{padding-left:44px; height:34px; background: url('../images/yt_symb.png'); background-repeat: no-repeat;}
#footer .email{padding-left:48px; height:34px; background: url('../images/email_symb.png'); background-repeat: no-repeat;}
#footer a{color:#FFF; text-decoration:none; transition: color .20s ease-in-out; -moz-transition: color .20s ease-in-out; -webkit-transition:color .20s ease-in-out;}
#footer a:hover{color:#F00;}

#footer ul:last-of-type{text-align: center; font-size:20px; padding-top: 40px; padding-bottom: 40px; text-transform: uppercase;}
#footer ul:last-of-type li{display:inline-block; margin-right: 15px;}
#footer ul:last-of-type li:last-of-type{margin-right:0px;}
#footer ul:last-of-type span{background-color:#F00; width:1px; height:14px; display: inline-block; margin-left:15px;}

#wrapper{min-height:100%; width:100%;}

.fullscreenBG {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	height:100%;
    overflow: hidden;
    z-index: -100;
	background-color:#000;
}

.bgVideo{
	-webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
	display:inherit;
    position: absolute;
    top: 0;
    left: 50%;
    min-height: 100%;
	min-width: 100%;
}
.pixels{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/pixel.png') repeat;}
.videoWrapper{height:100vh; display:inherit;}

@media all and (max-width: 1600px) {
h2,h3,h4,p,.spacer,.article .imgDiv,.infos,.ulWrapper{width:1000px;}
.infos li{ height:260px; }
.infos a{ font-size:22px;}
}

@media all and (max-width: 1024px) {
h2,h3,h4,p,.spacer,.article .imgDiv,.infos,.ulWrapper{width:96%;}
}

@media all and (max-width: 900px) {
#header ul{right: 40px;}
#header ul li{padding-right: 26px; }

h1{font-size:80px;}
h2{font-size:32px;}

.infos li{ width: 96%; margin-left:0px; height:260px; }
.infos a{ font-size:22px;}

.closeButton{right: 40px;}

#navWrapper,#menuWrapper { height: inherit; min-height: 50vw;}
#menuWrapper{min-height:100vw;}
#nav,#menu { height: auto; }
#nav > a,#menu > a{display: block;}
#nav > a > div,#menu > a > div{float:none; height:56vw; max-height:300px; width:100%; position:relative;}
#nav > a > div > div,#menu > a > div > div{opacity: 0.50; filter: alpha(opacity=50);}
.titleImg{padding-top:180px;}

}

@media all and (max-width: 720px) {
#header .logo{display:block; height:50%; max-height:60px; top:50%;  transform: translateY(-50%);}
#header ul li{padding-right: 20px; }
#nav > a > div,#menu > a > div{max-height:260px;}
}


@media all and (max-width: 520px) {
#header .facebook,#header .youtube,#header .email{display:none;}
#header ul{right: 0px;}
.closeButton{right: 60px;}
#jugendfeuerwehr ul{padding-left: 30px;}
#footer ul:first-of-type {text-align:inherit; margin:auto; width: 90%;}
#footer ul:first-of-type li {display:inherit; padding-bottom:10px;}
#footer ul:last-of-type {text-align:inherit; margin:auto; width: 90%; padding-top: 20px;}
}

@media all and (min-width: 900px) {
#nav .navNews,#menu .navNews{background: url('../images/navNews.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
#nav .navInfos,#menu .navInfos{background: url('../images/navInfos.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
#nav .navTermine,#menu .navTermine{background: url('../images/navTermine.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
#nav .navKontakt,#menu .navKontakt{background: url('../images/navKontakt.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
#nav .navFFKorb,#menu .navFFKorb{background: url('../images/navFF.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover;}
}