nav { 
  margin: 0 auto; 
  width:auto;
  border:0px solid red;
  position:relative;
  float:left;
}

/*menu toogle*/
label {
  cursor: pointer;
}

#menu-toggle {
  display: none; /* hide the checkbox */
}

#menu-icon {
  display: none; /* hide the menu icon  */
}

#menu-icon img {
  width:47px;
}


#menu-toggle:checked + #menu {
  display: block;
}


#menu { 
    display: block; 
    background: transparent; 
    min-height: 120px;
    width: 100%; 
    border:0px solid red;
    font-family: 'Dosis';
    font-weight:700;
}

#menu > li {  
    float: left; 
    margin:0px;
    padding:0px; 
}
 /*submenu*/
#menu ul {  
    display: none; 
    position: absolute;
    background: transparent; 
    display: none; 
    position: absolute;
    left: -250px;
    padding-top:9px; 
    top: 60px;
    width:1250px;
    border:0px solid red;   
}

/*buttons hauptmenu */
#menu a {  
    text-align:center;
    display: block; 
    color: white; 
    padding: 8px;
    padding-left: 13px;
    padding-right: 14px;
    padding-bottom: 30px;
    
    margin-left:10px; 
    text-decoration:none;
    font-size:18px;
    border-radius: 30px 30px  30px 30px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    
    background-color:#ec8925;
    background-repeat: no-repeat;  
    background-position: center -112px;
    background-size: 510px;
}


/*buttons over hauptmenu */
#menu a:hover,  #menu > li.active > a { 
    background-color: #ffffff;
    color:#ea8925; 
    background-image:url("../pics/nav/gps_kurse_sp.png"); 
    background-position: center -288px;
    background-size: 510px;
}

 /* ========== MENU ICON IDS ========== */
#menu a.gps_kurse {
  background-image:url("../pics/nav/gps_kurse_sp.png"); 
}

#menu a.gps_geraete_verleih, #menu > li.active a.gps_geraete_verleih {
  background-image:url("../pics/nav/verleih_sp.png");
}

#menu a.geocaching, #menu > li.active a.geocaching {
  background-image:url("../pics/nav/geocaching_sp.png");
}


#menu a.kontakt, #menu > li.active a.kontakt {
  background-image:url("../pics/nav/kontakt_sp.png");
}

#menu a.webentwicklung, #menu > li.active a.webentwicklung {
  background-image:url("../pics/nav/web_sp.png");
}

#menu a.ueber_media_tours, #menu > li.active a.ueber_media_tours {
  background-image:url("../pics/nav/mediatours_sp.png");
}

/*buttons submenu */
#menu ul a {  
    display: block; 
    color: white; 
    font-size:17px;
    padding: 5px;
    padding-right: 8px; 
    padding-left: 8px; 
    background: transparent;
    margin-right:5px; 
    text-decoration:none;
    border-radius: 20px 20px  20px 20px;
    text-shadow: 0px 0px 5px #000;
    float:left;
}

#menu li { 
    list-style: none; 
    border:0px solid red;
    margin:0px;
}

/*submenu sichtbar wenn haupt aktiv */
#menu li.active ul { 
display:block
}

/*buttons over submenu */
#menu ul a:hover, #menu ul > li.active > a { 
    background: transparent;
    color:#ffffff;
    //text-shadow: 0px 0px 0px #000; 
    border-bottom:2px solid #ea8925; 
}
 
 


@media all and (max-width: 1200px) {
  nav {
    clear:both;
    margin:auto;
    padding:0px;
    width:100%; 
  }
    
  #menu {
    display: none;
    height: auto;
    margin: 0 auto;    
    width:90%; 
    border:0px solid red;
    padding:0px;       
  }
  
  #menu-icon {
    display: block; /* show the menu icon  */
    position:absolute;
    right:5px;
    top:-70px;
  }
  /*submenu unsichtsichtbar wenn haupt aktiv */
  #menu li.active ul { 
    display:none;
  }

    #menu > li {  
    float: none; 
    width: 100%; 
     margin:10px;
     margin-left:0px;
    }
    
    #menu li:hover ul { display: block; } 
    
    /*buttons over hauptmenu smartphone*/
    #menu a { 
    font-size:18px;
    margin-left:0px;
  
    }
    
   /*submenu smartphone*/
    #menu ul { 
    position: relative;
    padding:0px;
    margin:auto;
    padding:0px;
    width:85%; 
    border:0px solid red;
    top:5px;
    left:0px;
    }
    
     /*buttons over submenu smartphone*/
    #menu ul a { 
    font-size:17px;
    float:none;
    margin-left:0px;
    border-bottom:2px solid #878787;
    }
    
    #menu li.tap { background: #555;  }
    #menu li.tap ul { display: block;  }
    
}