body{
    height:100%;
    width:100%;
    margin:0;
    font-family: 'Muli', sans-serif;
}
h1,h2,h3,h4{
    color:#5189a9ff;
}
a:hover, a:link, a:visited ,a:active{
    color:#fff;
}
#menu{
    height:50px;
    width:100%;
    background-color:transparent;
    float:left;
    position:fixed;
    z-index:9;
    display:none;
}
@media screen and (max-width:720px){
    #menu{
        display:block;
    }
}
#menuButton{
    width:50px;
    height:50px;
    border:none;
    background-color:transparent;
    float:right;
    margin-right:10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#menuButtonClose{
    width:50px;
    height:50px;
    border:none;
    background-color:transparent;
    float:right;
    margin-right:10px;
    display:none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

nav{
    float:left;
    width:auto;
    margin-left:10%;
    margin-top:100%;
    color:#fff;
    display:block;
    font-size:20pt;
     -webkit-animation-name: fadeNav; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
     animation-name: fadeNav;
    animation-duration: 1s;
}

@-webkit-keyframes fadeNav {
    from {margin-left:0%;}
    to {margin-left:10%;}
}


@keyframes fadeNav {
  from {margin-left:0%;}
    to {margin-left:10%;}
}

@media screen and (max-width:720px){
    nav{
        width:100%;
        margin-top:20%;
        font-size:20pt;
    }
}
#jumper{
    position: fixed;
    background-color:#ffffffd4;
    width:50px;
    height:50px;
    border-radius:100%;
    bottom:20px;
    left:20px;
    z-index:1000;
    display:none;
}
#back{
    width:15%;
    min-width:180px !important;
    height:100%;
    background-color:rgb(81,137,169);
    position:fixed;
    float:right;
    right:0;
    display:block;
    z-index:8;
}

@media screen and (max-width:720px){
    #back{
        width:90%;
        background-color:rgba(81,137,169, 0.85);
        -webkit-animation-name: fade; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
         animation-name: fade;
        animation-duration: 1s;
        margin-left:5%;
        display:none;

    }
}

@-webkit-keyframes fade {
    from {background-color:rgba(81,137,169, 0);}
    to {background-color:rgba(81,137,169, 0.85);}
}


@keyframes fade {
    from {background-color:rgba(81,137,169, 0);}
    to {background-color:rgba(81,137,169, 0.85);}
}
#logo{
    width:400px;
  margin:0 auto;
    position:relative;
    background-color:transparent;
    z-index:5;
}
@media screen and (max-width:680px){
    #logo{
        width:80%;
    }
}
#headText{
    width:100%;
    height:100%;
    padding-top:20%;
    text-align:center;
    color:#5189a9ff;
    font-size:32pt;
    z-index:10;
    position: fixed;
    background-color: #ffffffab;
}
@media screen and (max-width:520px){
    #headText{
        padding-top:30%;
    }
}
@media screen and (max-width:720px){
    #headText{
        padding-top:30%;
        width:90%;
        height:100%;
        padding-left:5%;
        padding-right:5%;
        font-size:22pt;
    }
}
@media screen and (max-width:960px){
    #headText{
        font-size:12pt;
    }
}
#logoAround{
    width:60%;
    height:400px;
    text-align:center;
    color:#fff;
    font-size:100pt;
    left:0;
    z-index:5;
    position: relative;
}
@media screen and (max-width:720px){
    #logoAround{
        width:100%;
        margin-left:0%;
    }
}

#headerImg{
    height:100%;
    width:100%;
    background-image: url(../img/front.jpg);
    background-attachment:cover;
    background-repeat: none;
    background-size:cover;
    position: fixed;
    z-index:1;
    background-position: bottom;
}
#down{
    width:100px;
    margin:0 auto;
    z-index:10;
    position: relative;
    opacity:0.7;
}
#vignette{
    background-color:none;
    opacity:0.5;
    box-shadow:#fff 0px 200px 100px 0px inset;
    height:100%;
    width:100%;
    margin:0;
    position:fixed;
    z-index:3;
}
#stripes{
    height:100%;
    width:100%;
    float:left;
    background:url(../img/stripesBlue.png) repeat;
    position: fixed;
    z-index:2;
}

#contactHead{
    height:50px;
    width:50px;
    margin-left:1%;
    margin-top:3px;
    border:none;
    background-color:transparent;
}
#contactHeadClose{
    height:50px;
    width:50px;
    margin-left:1%;
    margin-top:3px;
    border:none;
    background-color:transparent;
    display:none;
}
#contactTop{
    width:40%;
    height:100%;
    margin-left:40%;
    margin-right:20%;
    margin-top:120px;
    color:#fff;
    z-index:9;
    position:fixed;
    display:none;
    font-size:20pt;
    -webkit-animation-name:fadeContact;
    -webkit-animation-duration: 1s;
    animation-name: fadeContact;
    animation-duration: 1s;
}
@-webkit-keyframes fadeContact{
    from {margin-top:0px;}
    to {margin-top:120px;}
}

@keyframes fadeContact{
    from {margin-top:0px;}
    to {margin-top:120px;}
}

#contactForm{
    margin-left:-25%;
    margin-top:50px;

}
@media screen and (max-width:880px){
    #contactForm{
    margin-left:0;
    }
}
@media screen and (max-width:720px){
    #contactTop{
        margin-top:20%;
        width:90%;
        margin-left:5%;
        margin-right:5%;
    
    }

}
@media screen and (max-width:720px){
@-webkit-keyframes fadeContact{
    from {margin-top:0px;}
    to {margin-top:20%;}
}

@keyframes fadeContact{
    from {margin-top:0px;}
    to {margin-top:20%;}
}}
#content{
    width:85%;
    float:left;
    margin-right:15%;
    
}
@media screen and (max-width:720px){
    #content{
        width:100%;
        margin:0;
    }
}
#container1{
    height:auto;
    padding-bottom:20px;
    bottom:0;
    width:100%;
    z-index:5;
    background-color:#f5f5f5;
    position: absolute;
}

#infoBanner{
    width:100%;
    height:auto;
    position: relative;
    background-color: #f8f8f8;
    z-index: 10;
    position: relative;
    float:left;
}
.route,.shortInfo{
    float:left;
    text-align:center;
    color:#5189a9ff;
    margin-right:1.5%;
    margin-left:1.5%;
    margin-top:50px;
    margin-bottom:50px;
    width:30%;
    height:100px;
    background-color:#f8f8f8;
    border-right:1px solid #5189a9ff;
    font-size:10pt;
}
.contact{
    float:left;
    text-align:center;
    color:#5189a9ff;
    margin-right:1.5%;
    margin-left:1.5%;
    margin-top:50px;
    margin-bottom:50px;
    width:30%;
    height:100px;
    background-color:#f8f8f8;
    font-size:10pt;
}
@media screen and (max-width:720px){
    .route,.shortInfo,.contact{
        border-bottom:0px solid #5189a9ff;
        border-right:0;
        width:28%;
        margin-left:2.5%;
        margin-right:2.5%;
        margin-top:10px;
        padding-bottom:20px;
        font-size:7pt;
    }
}
@media screen and (max-width:680px){
    #container1{
        padding-bottom:0;
    }
}

#infoUmbau{
    width:100%;
    text-align:center;
    position: absolute;
    bottom:0;
    z-index:100;
    font-size:9pt;
    color:#fff;
    background: #5189a9ff;
    padding-bottom:5px;
}
#profil{
    padding-top:100px;
    margin-left:5%;
    padding-right:5%;
    height:auto;
    width:90%;
    color:#5189a9ff;
}
#profilHeader{
    font-weight:700;
    font-size:25pt;
    text-align:center;
    margin-bottom:10px;
}
#stripes2{
    height:100%;
    width:100%;
    float:left;
    z-index:2;
    background:url(../img/stripesBlue.png) repeat;
}

#container2{
    height:50%;
    width:100%;
    background-image:url(../img/dach.jpg);
    background-size:cover;
    background-repeat:none;
    background-position: bottom;
    z-index:5;
    position: relative;
}
@media screen and (max-width:720px){
    #container2{
        width:100%;
    }
}
#container3{
    height:50%;
    width:100%;
    background-color:#f5f5f5;
    position: relative;
    z-index:5;
}
@media screen and (max-width:720px){
    #container3,#service{
       width:100%;
       height:auto;
    }
}
#serviceHeader{
    font-weight:700;
    font-size:25pt;
    text-align:center;
    margin-bottom:10px;
}
#service{
    padding-top:5%;
    margin-left:5%;
    margin-right:5%;
    height:auto;
    color:#003776;
    width:90%;
}
#container4{
    height:auto;
    width:100%;    
    position: relative;
    z-index:5;
}
#stripes4{
    height:50%;
    width:100%;
    float:left;
    z-index:2;
    background:url(../img/stripesBlue.png) repeat;
}
#container4Img{
    width:100%;
    height:50%;
 background-image:url(../img/haus.jpg);
 background-position:center;
 background-size: cover;
 background-repeat: none;
}
#container5{
    height:auto;
    width:100%;
    background-color:#f5f5f5;
    position: relative;
    z-index:5;
}
#eigenstromNutzungHeader{
    font-weight:700;
    font-size:25pt;
    text-align:center;
    margin-bottom:10px;
}
#eigenstromNutzung{
    padding-top:5%;
    padding-bottom:5%;
    margin-left:5%;
    margin-right:5%;
    height:auto;
    width:90%;
    color:#003776;
}
#container6Left{
    height:auto;
    width:50%;
    background-color:#5189a9ff;
    float:left;
    padding-bottom:5%;
}
#container6LeftInner{
    margin-left:5%;
    margin-right:5%;
    margin-top:5%;
    width:90%;
    color:#fff;
}
#container6Right{
    height:auto;
    width:50%;
    background-color:#5189a9ff;
    float:right;
    padding-bottom:5%;
}
#container6RightInner{
    margin-left:5%;
    margin-right:5%;
    margin-top:5%;
    width:90%;
    color:#fff;
}
@media screen and (max-width:720px){
    #container6Left,#container6Right{
        width:100%;
        float:left;
    }
}
#mapContainer{
    width:100%;
    height:350px;
    float:left;
    position: relative;
}
#contactBottom{
    width:100%;
    height:auto;
    padding-bottom:10px;
    margin:0 auto;
    background-color: #f5f5f5;
    color:#5189a9;
    font-size: 11pt;
    text-align: center;
}
#footerBottom{
    background-color:#003776;
    height:auto;
    width:100%;
    float:left;
    position: relative;
}
.footerBottomInner{
    padding-top:10px;
    padding-bottom:10px;
    width:auto;
    margin: 0 auto;
    text-align:center;
}
.footerBottomInner li{
text-decoration: none;
    list-style:none;
    display: inline;
    margin-right:10px;
    color:#fff;
    text-align:left;
}
@media screen and(max-width:720px){
    .footerBottomInner li{
        width:100%;
        display:none;
        text-align: center;

    }
}
#logoBottom{
    margin:0 auto;
    width:150px;
}
footer{
    height:auto;
    width:100%;
    background-color:#003776;
    position: relative;
    z-index:5;
}

li{
    text-decoration: none;
    list-style: none;
}