#menu{
    display:none;
} 

#vpnavigation{
            clear: both;
            width: 80%; /* 1000px / 1250px */
            font-size: 1em; /* 13 / 16 */
            line-height:normal;
            font-weight:bold;
            margin: 0 auto 0 auto;
            padding: 0;
            text-align: center;
        }

#vpnavigation ul { /* alle Listen */
       padding: 0;
       margin: 0;
       list-style: none;
       line-height:1;
    }
    
#vpnavigation a, #vpnavigation a:hover, #vpnavigation a:visited   {
font-weight:bold;
color : #fff;
text-decoration:none;
}

#vpnavigation li { /* alle Listenelemente */
float:left;
color:#fff;
padding:5px;
margin:0 6px 0 0;


}
#vpnavigation li.active,#vpnavigation li:hover, #vpnavigation li.daddy {
float:left;
background-color:#9c0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-box-shadow:0px 0px 6px #666;
-webkit-box-shadow:0px 1px 6px #666;
box-shadow:0px 1px 6px #666;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}


@media only screen and (max-width: 768px) {

#menu{
    display:inline;
    position:absolute;
    top:20px;
    right:26px;
    font-size:30px;
    color:white;
} 
#vpnavigation{
display:none;
}

#vpnavigation li { /* alle Listenelemente */
width:94%;
float:none;
background-color:#9c0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:5px 10px 5px 10px;
margin:0.3em 0 0 0;
-moz-box-shadow:0px 0px 6px #666;
-webkit-box-shadow:0px 1px 6px #666;
box-shadow:0px 1px 6px #666;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

#vpnavigation li.active, #vpnavigation li:hover, #vpnavigation li.daddy {
float:none;
background-color:#ccc;
}