.navigation{width: 100%; position: absolute; right: 0; bottom: .1em; z-index: 55;}
ul#navi {display: block;}

span.sf-sub-indicator {display: none; visibility: hidden;}
ul.sf-menu{list-style-type: none;padding: 0 0 0 25%; margin: 0; }

ul.sf-menu ul{display:none; list-style-type: none; }
ul.sf-menu ul {left: 0;}

ul.sf-menu li {margin: 0; float:left; width: 25%; }

ul.sf-menu li a {
  font-size: 1.25em ;
  padding: .575em 0 .5em 0; 
  width: 100%;
  color: #333;
  text-decoration:none;
  text-align: center;
  display:inline-block;
  background: #f8f8f8;
  text-transform: uppercase;
  line-height: 1em;
  font-family: DINWeb-Medium;
   -webkit-transition: all .5s ease;
  transition: all .5s ease;
}


ul.sf-menu li.gruen  a {color: #454545; border-top: 4px solid #999;}
ul.sf-menu li.blau  a{color: #454545; border-top: 4px solid #999;}
ul.sf-menu li.rot a{color: #454545; border-top: 4px solid #999;}
ul.sf-menu li.orange a{color: #454545; border-top: 4px solid #999;}

ul.sf-menu li.act a,
ul.sf-menu li.sfHover a,
ul.sf-menu li a:hover {color: #fff;}

ul.sf-menu li.act.gruen a{border-top: 4px solid #339900; color: #339900;}
ul.sf-menu li.gruen.sfHover a{background: #339900; opacity: .9; color: #fff;}
ul.sf-menu li.act.gruen a:hover{color: #fff;}

ul.sf-menu li.act.blau a{border-top: 4px solid #0034b8; color: #0034b8;}
ul.sf-menu li.blau.sfHover a{background: #0034b8; opacity: .9; color: #fff;}
ul.sf-menu li.act.blau a:hover{color: #fff;}

ul.sf-menu li.act.rot a{border-top: 4px solid #d10018; color: #d10018;}
ul.sf-menu li.rot.sfHover a{background: #d10018; opacity: .9; color: #fff;}
ul.sf-menu li.act.rot a:hover{color: #fff;}

ul.sf-menu li.act.orange a{border-top: 4px solid #d96c00; color: #d10018;}
ul.sf-menu li.orange.sfHover a{background: #d96c00; opacity: .9; color: #fff;}
ul.sf-menu li.act.orange a:hover{color: #fff;}


ul.sf-menu li.gruen a:hover,
ul.sf-menu li.gruen ul,
ul.sf-menu li.act.gruen ul,
ul.sf-menu li.gruen.sfHover ul{background: #339900; opacity: .95;}

ul.sf-menu li.blau a:hover,
ul.sf-menu li.blau ul,
ul.sf-menu li.act.blau ul,
ul.sf-menu li.blau.sfHover ul{background: #0034b8; opacity: .95;}

ul.sf-menu li.rot a:hover,
ul.sf-menu li.rot ul,
ul.sf-menu li.act.rot ul,
ul.sf-menu li.rot.sfHover ul{background: #d10018; opacity: .95;}

ul.sf-menu li.orange a:hover,
ul.sf-menu li.orange ul,
ul.sf-menu li.act.orange ul,
ul.sf-menu li.orange.sfHover ul{background: #d96c00; opacity: .95;}




/* Drop-Down Navigation */
/* ul.sf-menu li:hover ul {  opacity: 1;  } */

ul.sf-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 99999;
  -webkit-transition:opacity 0.3s linear, visibility 0.2s linear;
  -moz-transition:opacity 0.3s linear, visibility 0.2s linear;
  -o-transition:opacity 0.3s linear, visibility 0.2s linear;
  transition:opacity 0.3s linear, visibility 0.2s linear;   
  top: auto;  
  /* margin: 0 2% */

}

ul.sf-menu ul li {
  /* clear: both; */
  width: 33.33%;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  opacity: .9;
  height: 8.5em;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
 }

ul.sf-menu li p {
  padding: .3em  0;  
}


ul.sf-menu li ul li {text-align: left; padding: 0; text-transform: none; }
ul.sf-menu li ul li dl{padding: .75em 1em .25em 1em; color: #fff;}

ul.sf-menu li ul li dd{font-size: 1.25em; line-height: 1.2em; text-transform: none; padding: 0; margin: 0 0 .5em 0}

ul.sf-menu li ul li p,
ul.sf-menu li ul li a{font-size: 1.5em; line-height: 1.2em; text-transform: none; padding: 0; margin: 0 0 .5em 0}


/* blau */

ul.sf-menu li.blau ul li a,
ul.sf-menu li.act.blau ul li a,
ul.sf-menu li.blau.sfHover ul li a{font-family: DINWeb-Medium; text-align: left; width: 100%; background: none; border: 0; color: #fff;}

ul.sf-menu li.blau ul li,
ul.sf-menu li.act.blau ul li,
ul.sf-menu li.blau.sfHover ul li{ background: #0034b8; border-top: 0;}

ul.sf-menu li.act.blau li.cur,
ul.sf-menu li.blau ul li:hover,
ul.sf-menu li.act.blau ul li:hover,
ul.sf-menu li.blau.sfHover ul li:hover{background: #002480; border-top: 0;   opacity: 1;}



/* gruen*/

ul.sf-menu li.gruen ul li a,
ul.sf-menu li.act.gruen ul li a,
ul.sf-menu li.gruen.sfHover ul li a{font-family: DINWeb-Medium; text-align: left; width: 100%; background: none; border: 0; color: #fff; }

ul.sf-menu li.gruen ul li,
ul.sf-menu li.act.gruen ul li,
ul.sf-menu li.gruen.sfHover ul li{ background: #390; border-top: 0; }

ul.sf-menu li.act.gruen li.cur,
ul.sf-menu li.gruen ul li:hover,
ul.sf-menu li.act.gruen ul li:hover,
ul.sf-menu li.gruen.sfHover ul li:hover{background: #267300; border-top: 0;   opacity: 1;}



/* rot */

ul.sf-menu li.rot ul li a,
ul.sf-menu li.act.rot ul li a,
ul.sf-menu li.rot.sfHover ul li a{font-family: DINWeb-Medium; text-align: left; width: 100%; background: none; border: 0; color: #fff;}

ul.sf-menu li.rot ul li,
ul.sf-menu li.act.rot ul li,
ul.sf-menu li.rot.sfHover ul li{ background: #d10018; border-top: 0;}


ul.sf-menu li.act.rot li.cur,
ul.sf-menu li.rot ul li:hover,
ul.sf-menu li.act.rot ul li:hover,
ul.sf-menu li.rot.sfHover ul li:hover{background: #a60013; border-top: 0;   opacity: 1;}


/* orange */

ul.sf-menu li.orange ul li a,
ul.sf-menu li.act.orange ul li a,
ul.sf-menu li.orange.sfHover ul li a{font-family: DINWeb-Medium; text-align: left; width: 100%; background: none; border: 0; color: #fff;}

ul.sf-menu li.orange ul li,
ul.sf-menu li.act.orange ul li,
ul.sf-menu li.orange.sfHover ul li{ background: #d96c00; border-top: 0;}


ul.sf-menu li.act.orange li.cur,
ul.sf-menu li.orange ul li:hover,
ul.sf-menu li.act.orange ul li:hover,
ul.sf-menu li.orange.sfHover ul li:hover{background: #b35900; border-top: 0;   opacity: 1;}