:root{
    --bcolor:rgba(0,0,0,0.8);
    --background:url(Pictures/Fahrradtop.jpg);
    --fontcolor:#f14f4f;
}

/* Ebenen:
2:Navigation;bottom
1:bottom-fixed
0:rest

/*allgemein*/
* { margin:0;
    padding:0;

    font-family: Helvetica;

}

html {
    background-color:var(--bcolor);
}

div.wrapper {
    width:960px;
    max-width:90%;

    margin: 0 auto;
}

div#navigation {
    position:fixed;
    
    width:100%;
    height:100px;
    
    top:1%;
    right:inherit;
    
    z-index:2;
    
    background-color:var(--bcolor);          
}

div#navigation-background {
    width:100%;
    height:100px;
}

div#fixed-bottom {
    position:fixed;
    
    width:100%;
    height:100px;
    
    bottom: 1%;
    right:inherit;
    
    background-color: var(--bcolor);
        
    z-index:1;
}

div#top {
    height:1%;
    background-color: white;
}

div#bottom {
    width:100%;
    height:100px;
    
    bottom:100px;

    background-color:var(--bcolor); 
    
    z-index:2;
}

div#bottom p{
    font-family: Streetwear;
    font-size:3em;
    line-height:1.5;
    
    color:var(--fontcolor);
}

div#logo {
    width:60px;
    height:60px;
    
    float:left;
    
    margin:20px;
}

div#logo p {    /*alle paragraphen in division logo*/
    font-family: Streetwear;
    font-size:3em;
    line-height:1.5;
    
    color:var(--fontcolor);
}

div#home {
    width:100%;
    height:400px;
    
    z-index:0;/*Ebene 0*/
    
    background:var(--background);
    background-size:cover;
}

div#home h1{
    padding-top:150px;
    text-align:center;
    color:var(--fontcolor);
    
    font-size:4em;
    font-family:Streetwear;
}

p#menu {
    float:right;
    margin-top:44px;
    margin-right:30px;
}

/*p#menu a{
    padding-top:35px;
    padding-right:30px;
    
    text-decoration:none;
    color:#274e71;
    
    font-weight:700;
}*/

a.inactive {
    padding-top:35px;
    padding-right:30px;
    
    text-decoration:none;
    color:var(--fontcolor);
    
    font-weight:700;
}

p#menu a:hover{
    border-top: solid white 5px;
    color:white;
    
}

a#active {
    padding-top:35px;
    padding-right:30px;
    
    font-weight:700;
    text-decoration:none;
    border-top: solid white 5px;
    color:white;
}

div.imgwrapper {
    width:960px;
    max-width:90%;
    height:300px;
    
    margin: 30px auto;
}
/*navigation*/

div.imgwrapper img{
        height:300px;
        max-height:90%;
        width:auto;
        max-width:40%;
    
        float:left;
}

img#pos1{
        margin-left:10%;
        margin-right:10%;
        border-radius:250px;
}

img#pos3{
        height:250px;

        border-radius:10px;
        margin-left:5%;   
        margin-right:5%;   
}

img#pos4{
        height:250px;
        
        border-radius:40px;
}

img#pos5{
        margin: auto 30%;
}

img#pos6{
        height:250px;

        float:left;
        margin-left:5%;   
        margin-right:5%;  
}

img#pos7{
        height:250px;

        float:left;
        border-radius:100px;
}

div.clear{
        clear:both;
}