#mainnav {
  /* background-color: #333; */
	font-size: 1.1rem;
  color: #fff;
  z-index: 999;
  /* transition: 0.25s; */
}

#mainnav, 
#mainnav ul {
  padding: 0;
  margin: 0;
  height: 5vh;
  line-height: 5vh;
}

#mainnav ul, 
#mainnav li {
  list-style: none;
}

#mainnav li {
  float: left;
}

#mainnav li:hover {
  background-color: #fff;
}

#mainnav li ul {
  position: absolute;
  width: 240px;
  left: -999em;
  font-size: 1.25em;
  height: 3.5vh;
  line-height: 3.5vh;
}

#mainnav li ul li {
  background-color: #fff;
  border: solid 0.5px #000;
}

#mainnav li:hover ul { 
  left: auto;
  transition: 0.125s;
}

#mainnav a {
  display: block;
  margin: 0;
  padding: 0 15px;
  font-weight: normal;  
  color: #000;
}

#mainnav li a {
  color: #000;
  text-decoration: none;
}

#mainnav ul li.hover,
#mainnav ul li.active,
#mainnav ul li.focus,
#mainnav ul li.sfhover,
#mainnav ul li.sffocus{
/*   background-color: #333; */
  /* background-color: rgba(200, 200, 200, 1); */
  border-radius: 0.25vh;

  border-top: solid 1px #fff;
  border-left: solid 1px #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  color: #33d;
}

#mainnav ul li:hover a,
#mainnav ul li.sfhover a,
#mainnav ul li:active a,
#mainnav ul li:focus a,
#mainnav ul li.sffocus a {
  color: #000;
/*   background-color: #333; */
  /* background-color: rgba(200, 200, 200, 1); */
  border-radius: 0.25vh;

  border-top: solid 1px #fff;
  border-left: solid 1px #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

#mainnav ul ul {
  padding-left: 0;
  /* background-color: rgba(255, 255, 255, 1); */
}

#mainnav ul ul a {
  width: 200px;
  /* background-color: rgba(255, 255, 255, 1); */
}

#mainnav ul li ul li {
/*   background-color: #333; */
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0.25vh;

  border-top: solid 1px #fff;
  border-left: solid 1px #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  /* border-right: none;
  border-top: 1px solid #000; */
  color: #ddd;
  font-size: 0.8em;
}

#mainnav ul li ul li:hover,
#mainnav ul li ul li:active,
#mainnav ul li ul li:focus {
  background-color: rgba(200, 200, 200, 1);
}

#mainnav ul li ul li a {
  color: #000;
}

#mainnav ul li ul li a:hover {
/*   background-color: #111; */
  background-color: rgba(200, 200, 200, 1);
  border-radius: 0.25vh;

  border-top: solid 1px #fff;
  border-left: solid 1px #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  color: #33d; 
}

#mainnav ul li a:hover {
/*   background-color: #111; */
  background-color: rgba(200, 200, 200, 1);
  border-radius: 0.25vh;

  border-top: solid 1px #fff;
  border-left: solid 1px #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  color: #33d; 
  font-weight: normal;
}

/* ----------------------------------------- */
/* --------- Nav im Portrait Modus --------- */
/* ----------------------------------------- */

#p-nav {
  display: none;
  font-size: 1.2em;
  background-color: rgba(11, 11, 11, 0.99);
  padding-bottom: 15px;
  padding-left: 25vw;
  width: 100vw;
  z-index: 3;
}

#p-nav ul {
  color: #fff;
  font-weight: normal;
  margin: 0 0 0 0;
}
#p-nav li {
  list-style-type: none;
  width: 250px;
  margin: 10px 0 0 20px;
}

#p-nav li:hover,
#p-nav li a:hover {
  color: #9c3; 
}