@import url('https://fonts.googleapis.com/css?family=Jaldi:400,700');

* {padding: 0;
    margin: 0;}

* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased;
    text-rendering:optimizeLegibility;
    font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";
            }

body {
    background-color: #FCFAF4;
    font-size: 100%;
    font-size: 1em;
    }

div#topnav {
    list-style-type: none;
    width:100%;
    background-color:#5C6370;
    position: fixed;
    left: 0;
    top: 80px;
    padding: 0;
    text-align: right;
} 

div#bottomnav {
    list-style-type: none;
    width:100%;
    background-color:#5C6370;
    position: fixed;
    left: 0;
    bottom: 80px;
    padding: 0;
    text-align: left;
    z-index: -1;
} 

 
li {
    display: inline;
    margin-right: -2px;
    margin-left: -2px;
}

li a {
    font-family: 'Jaldi', sans-serif;
    text-decoration: none;
    display: inline-block;
    padding: 5px 16.4px;
    color: #FCFAF4;
    font-size: 1.1em;
    font-weight: 400;
    margin: auto;
    letter-spacing: 0.02em;
}

a:hover {
            background-color: #FCC362;
            color: #5C6370;
}

a.active {
            background-color: #FCC362;
            color: #5C6370;
}


li.topnav:last-child {padding-right: 4%;}

li.bottomnav:first-child {padding-left: 4%;}



div img.logo {
    position: absolute;
    top: 46%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

div.impressum {
            position: absolute;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            bottom: 15px;
}


a#impressum {
            font-size: 0.9em;
            font-weight: 400;
            color: #5C6370;
}

a#impressum:hover {
            background-color: transparent;
            opacity: 0.6;
            letter-spacing: 0;
}

img#flowerright {
            position: fixed;
            bottom: 0;
            right: 0;
}


#mobilenav, a.burger, a.x, a.netzwerk, #logoklein {display: none;}

/* --------------------------------------- BREAKPOINT 1080 ----------------------------------------- */



@media screen and (max-width: 1080px),
        screen and (max-height: 600px) 
        {
    
    img#flowerright {width: 360px;
                    height: auto;}
    
    img.logo {width: 250px;
            height: auto;}
    
    div#topnav, ul.nav {
            top: 72px;}

    #bottomnav.nav {
            bottom: 70px;}
    
   li a { padding: 3.6px 13.8px;}
    
    a#impressum {
            font-size: 0.84em;
                }
}


/* --------------------------------------- BREAKPOINT 880 ----------------------------------------- */



@media screen and (max-width: 880px),
        screen and (max-height: 550px) 
        {
    
    img#flowerright {width: 300px;
                    height: auto;}
   
    
}



/* --------------------------------------- BREAKPOINT 680 --------------------------- */



@media screen and (max-width: 680px),
    screen and (max-height: 480px)
         {
    
    img#flowerright {
                    z-index: -3;
                    width: 280px;
                    height: auto;}
                    
    
    img.logo {width: 200px;
            height: auto;
            z-index: -2;
            }
             
            
    /*div img.logo {
            top: 42%;}*/
             
    div#topnav {text-align: center;}
            
    div#topnav, ul.nav {
            top: 58px;}
            
    li.topnav:last-child {padding-right: 0;}
    
   li {display: block;}
    
    #menu-links.nav {padding-top: 38px;
            }
    
    
    a.nav, a.active, a.netzwerk {
        line-height: 38px;
        padding: 4px 0;
        }
            
        a.active {margin-top: 4px;}
            
    a#impressum {
            font-size: 0.8em;
            z-index: -2;
                }
             
   #menu-links.nav a, #bottomnav, #bottomnav.nav a {display: none;
                    }
    
  #mobilenav, a.burger {display: block;
                        position: relative;
                        z-index: 1;
                        }
    
   a.burger {
    cursor: pointer;
    float: right;
    margin-right: 27px;
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
    }
    
    a.burger:hover, a.x:hover {background-color: transparent;}
    
    .bar1, .bar2, .bar3 {
        width: 32px;
        height: 3px;
        background-color: #FCFAF4;
        margin: 6px 0px;
        border-radius: 20px;
       
    }
    
    #mobilenav a.x {display: none;}
    
    a.x {
    cursor: pointer;
    float: right;
    margin-right: 60px;
    margin-top: 12px;
    }
    
    .x1, .x2,.x3 {
        width: 32px;
        height: 3px;
        background-color: #FCFAF4;
        margin: 6px 0;
        border-radius: 20px;
        position: absolute;
    }
     
    .x1 {
        transform: rotate(45deg); }
        
    .x2 {visibility: hidden;}

    .x3 {
        transform: rotate(-45deg); }


    #menu:target #menu-links a{
        display: block;
    }
    
      
     #menu:target #menu-links {
        padding-bottom: 38px;
    }
    
    #menu:target #mobilenav a.burger {
        display: none;
    }

    #menu:target #mobilenav a.x {
        display: block;
    }
            
    #menu:target #logoklein {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        width: 120px;
        height: auto;
    }
   
}

/* --------------------------------------- BREAKPOINT 480 ----------------------------------------- */



@media screen and (max-width: 480px),
    screen and (max-height: 550px)
    
        {
    
    img#flowerright {width: 220px;
                    height: auto;
                    }
    
    img.logo {width: 180px;
            height: auto;
            }
   
}


/* --------------------------------------- BREAKPOINT 380 --------------------------------- */



@media screen and (max-width: 380px) 
        {
    
    img#flowerright {width: 210px;
                    height: auto;
                    }
            
     img.logo {width: 160px;
            height: auto;
            }
   
}

/* --------------------------------------- BREAKPOINT 340 --------------------------------- */



@media screen and (max-width: 340px),
        screen and (max-height: 580px) and (orientation: landscape)
    
        {
    
    img#flowerright {width: 200px;
                    height: auto;
                    }
    
    img.logo {width: 140px;
            height: auto;
            padding-top: 10px;
            }
            
    div#topnav, ul.nav {
            top: 54px;}
            
            
    #menu:target #logoklein {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        width: 110px;
        height: auto;
    }
   
}