/* Navigation */

ul#navigation, ul#navigation ul {
 margin: 0;
 padding: 0;
 margin-left: 9%;
 margin-top: -1.5%;
 list-style-type: None;
 text-align: left;
 height: 62px;
 font-family: verdana;
 font-size: 0.9em;
 max-width: 2600px;	/*ab 2600px soll sich die Seite nicht mehr an Bildschirmbreite anpassen*/
 width:97%;

}

ul#navigation li {
 float: Left;
 width: 180px;
 position: Relative;
// border-bottom: 1px solid #ddd;
}

ul#navigation li a {
 display: Block;
 width: 179px;
 line-height: 60px;
 text-align: left;
 padding-left: 5px;
 #color: #CBF207;
 color: #ffffff;
 text-decoration: None;
 background-color: #00080F;
 transition: color 0.5s;
// border-bottom: 1px solid #ddd;
}

ul#navigation li a:hover,
 ul#navigation li a:active {
 color: #EA4E0B;
 cursor: Pointer;
border-bottom: 1px solid #ddd;
}

ul#navigation li ul {
 opacity: 0.0;
 visibility: Hidden;
 position: Absolute;
 left: -20px;
 #top: 30px;
 z-index: 100;
 transition: Opacity 1s;
border-bottom: 1px solid #ddd;
}

ul#navigation li:hover > ul,
 ul#navigation li:active > ul {
 opacity: 1.0;
 visibility: Visible;
border-bottom: 1px solid #ddd;
}

ul#navigation li ul a {
 background-color: #010E18;
border-bottom: 1px solid #ddd;
}

ul#navigation li ul li ul {
 display: None;
 position: Absolute;
 left: 150px;
 top: 0px;
 z-index: 100;
border-bottom: 1px solid #ddd;
}

ul#navigation li ul li:hover > ul {
 display: Block;
border-bottom: 1px solid #ddd;
}

/* Smartphone Menu */
burger {
 display: None;
}

@media screen and (max-width: 800px) {
  ul#navigation li,
  ul#navigation li a {
  width: 100%;
  
 }

 #burger {
  display: Block;
  margin-right: 25px;
  -moz-appearance: None;
  -webkit-appearance: None;
  width: 25px;
  height: 25px;
  #left: 10%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQAAAAATS5MPAAAAAnRSTlMAAHaTzTgAAAAUSURBVHjaY2DAC/7///8HN0EzvQD48y+tFbUTjAAAAABJRU5ErkJggg==");
  background-size: 25px 25px;
  background-position: Center Center;
  background-color: #00080F;
  vertical-align: Middle;
  border: None;
  outline: None;
  cursor: Pointer;
  
 }

 #burger:checked ~ ul#navigation {
  animation: fadeIn 1.2s;
  display: Block;
  margin-top: 5px;
 }

 #burger:not(:checked) ~ ul#navigation {
  display: None;
 }

 @keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
 }

}


h1, p {
 clear: Left;
}