#nav { width: 70%; padding: 0; margin: 3px 1% 0 0; float: left; }

#nav ul { width: 100%; max-width: 875px; list-style-type: none; padding: 0 !important; margin: 0 !important; }
#nav ul li { float: left; text-align: center; width: 20%; }
#nav a { font-size: 18px; color: #ffffff; font-family: Georgia; padding: 0 2% 0 0; }
#nav a:hover { color: #e77529; padding: 0 2% 0 0; }
#nav .active { color: #e77529; padding: 0 2% 0 0; }

#nav .mobil_menu_button { display: none; }



@media screen and (max-width: 768px) {
    
    #nav { font-size: 16px; width: 50%; text-align: center; z-index: 1000; position: absolute; margin: 0; }
    #nav ul { border: 1px solid #e77529; background: #ffffff; border-top: none; }
    #nav ul li { float: none; margin-left: 3%; margin-right: 3%; border-bottom: 1px solid #e77529; width: auto !important; }
    #nav a { font-size: 16px; padding-bottom: 5px; padding-top: 5px; display: block; border-left: none !important; }
    #nav a:hover { padding-bottom: 5px; padding-top: 5px; }
    #nav .active { padding-bottom: 5px; background: none; color: #e77529; }
    #nav ul .last { border-bottom: none !important; border-right: none; }
    #nav .mobil_menu_button { display: block; cursor: pointer; border-top: 1px solid #e77529; }
    #nav .mobil_menu_button li { border-bottom: none; }
    #nav .real_menu { display: none; }
    
}