/* ---------------------------------------------------------
   Navigation 
   ---------------------------------------------------------*/

/* ---------------------------------
   Kapitel 7  - Basisnavigation   */

nav[role="navigation"] {
  background: transparent; 
  color: #333; 
}
nav[role="navigation"] ul {
  padding: 0;
  margin: 0; 
}
nav[role="navigation"] li {
  display: inline-block;
  padding: 0;
  margin: 0; 
}
nav[role="navigation"] li a {
  text-decoration: none; 
  color: #333;
  padding: 1em; 
}
nav[role="navigation"] li.active a {
  color: black;
  text-decoration: underline;
}

/* ----------------
   Kapitel 8     */

nav li a:first-child {
  padding-left: 0;
}


/* ---------------------------------
     Kapitel 12 - Media Queries   */

body { min-width: 280px; }
nav[role="navigation"]  div.menubutton { display: none; }



@media screen and (min-width: 320px) and (max-width: 767px) {

/* Für Browser mit Media Query Menübutton einblenden */ 
nav[role="navigation"]  div.menubutton { display: block; }



  /* ---------------------------------
     Kapitel 11 - Mobile Navigation */

  /* Vorbereitung  */
  body { 
    position: relative; 
  }
  header[role="banner"] {
    
  }
 
  /* Button positionieren  */
  div.menubutton {
    display: block;
    position: absolute;
    right: 1em;
    top: 3em;
    z-index: 1000;
  }

  /* Button gestalten */ 
  div.menubutton a {
    display: block; 
    color: white;
    background: #e34c26;
    background: #f06529;
    background: #666;
    text-decoration: none;
    padding: 0.5em;
    border-radius: 0.25em;
    border: none;
  }
  div.menubutton a.shownavlist:after {
    content: " \25bc";
    font-size: 0.7rem;
  }
  div.menubutton a.hidenavlist:after {
    content: " \25b2";
    font-size: 0.7rem; 
  }  
  div.menubutton a.hidenavlist {
    display:none;
  }

  /* Navigationsliste gestalten */
  nav[role="navigation"] {
    padding: 0 1rem; 
    margin: 0;
   background-color: rgba(0, 0, 33, 0.8);
  }
  nav[role="navigation"] ul#navlist {
    max-height: 0;
    overflow: hidden; 
    transition: 0.25s;  
    list-style-type: none;
    padding: 0; 
    border-radius: 0 0 1rem 1rem;
    margin: 0;
  }
  nav[role="navigation"] li { 
    display: block; 
    border-bottom: 1px solid #ddd; 
  }
  nav[role="navigation"] li:last-of-type {
    border-bottom: 0;
  }

  /* Gestaltung der Hyperlinks */
  nav[role="navigation"] li a {
    display: block; 
    text-decoration: none;
    
    color: #fff;
    padding: 1em; 
	  line-height:2px;
  }
  nav[role="navigation"] a:hover, 
  nav[role="navigation"] a:focus {
    /*background: #c40;*/
    
    color: #ff6500!important;
    text-decoration: underline;
  }
  /*nav[role="navigation"] a:active {
    background: #f50;
    color: white;
  }*/
  nav[role="navigation"] li.active a {
    background: #666;
    color: white;
    text-decoration: none;
  }

  /* Navigationsliste einblenden */
  #menu:target ul#navlist { 
    max-height: 38em; 
  }
  #menu:target a.shownavlist { 
    display: none; 
  }
  #menu:target a.hidenavlist { 
    display: block; 
  }

} /* Ende @media */


/* ---------------------------------
     Kapitel 12 - Media Queries   */

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

  header[role="banner"] {
   ;
    margin-bottom: 0.5em;
  }
  nav[role="navigation"] {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2.5em 1em 0 1em;
    margin: 0;
  }
  nav[role="navigation"] ul {
    position: relative;
    padding-left: 0; 
    margin: 0;
  }
  nav[role="navigation"] li {
    list-style-type: none; 
    display: inline-block;
  }
  nav[role="navigation"] li a {
    display: block;
    min-width: 4em;
   background-color: rgba(0, 0, 33, 0.5);
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
   padding: 3.5em 0.2em 1.5em 0.2em;
    margin:-3.5em 0.2em 0.7em 0.2em;
   letter-spacing:-0.5px!important;
  }
  nav[role="navigation"] li.active a {
    background: transparent;
    color: #f00;
	font-weight:bold;
    text-decoration: none; 
  }
  nav[role="navigation"] a:hover,
  nav[role="navigation"] a:focus {
    text-decoration: underline;
      background-color:transparent;
	  color: rgba(0, 0, 33, 0.5);
  }


} 


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

nav[role="navigation"]  {

   margin-top:-10px;

    
}

  
    
  nav[role="navigation"] .first {
    background-color: rgba(152, 202, 75, 0.6);
Q/*   
 -webkit-box-shadow: 2px 2px 31px -7px rgba(6,26,2,1);
-moz-box-shadow: 2px 2px 31px -7px rgba(6,26,2,1);
box-shadow: 2px 2px 31px -7px rgba(6,26,2,1);
  */
    
}
   
  
  nav[role="navigation"] .first:hover {
    
  color:#f60;
 
    background-color: rgb(193, 245, 108);

  }
    
	
	  nav[role="navigation"] .second {
    background-color: #f00;
Q/*   
 -webkit-box-shadow: 2px 2px 31px -7px rgba(6,26,2,1);
-moz-box-shadow: 2px 2px 31px -7px rgba(6,26,2,1);
box-shadow: 2px 2px 31px -7px rgba(6,26,2,1);
  */
    
}
   
  
  nav[role="navigation"] .second:hover {
    
  color:#f60;
 
    background-color:#5674AF ;

  }

  }



@media screen and (min-width: 768px)  and (max-width: 1200px)  {
nav[role="navigation"] li a {
    display: block;
    min-width: 4em;
font-size:10px;
   background-color: rgba(0, 0, 33, 0.5);
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
   padding: 3.5em 0.2em 1.5em 0.2em;
    margin:-3.5em 0.2em 0.7em 0.2em;
   letter-spacing:-0.5px!important;
  }

nav[role="navigation"] li a:hover {
   color: #f50 !important;
  
 
  }



  }





@media screen and (max-width: 780px) {
nav[role="navigation"] li  {

    margin-top: -3px!important;
   
  } 


nav br{ display:none} 

}
  
  }



@media screen and (max-width: 768px) {
   
	
 #logo{
     display:none !important;

     }
	 
	nav a {
  
    color: #fff !important; 
	 }

}

/* Navi responsive*/
 @media screen and (max-width: 1100px) {


  nav[role="navigation"] {
   
     margin-left:-030px!important;
  } }

/* Ende @media */

/* eof */ 


 @media screen and (min-width: 636px) and (max-width: 768px) {
.navbar-header {
    margin-top: -20px;
    height:80px;
    
}    
}