@media screen and (max-width: 816px){
.navigation{display:none;}
}

@media screen and (min-width: 817px){
/* Navigation ***************************************************/

.navigation{text-align: center; width: 100%; position: absolute; bottom: 2em; left: 0; z-index: 101; }

.sf-menu, .sf-menu * { padding: 0; list-style: none; line-height: 1em; margin: 0;}

.sf-menu ul {position:  absolute; top:  -999em;  width:  69em; } /* raus 20em */
.sf-menu ul li {}

.sf-menu li:hover {visibility:  inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li { display: inline;}
.sf-menu a {display: inline; text-decoration: none; line-height: 1em }

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {left: 3em; top: auto; margin: 0 0 0 0; z-index: 99;}

.sf-menu ul {
  -webkit-box-shadow: 0em .5em 1em #999
  -moz-box-shadow: 0em .5em 1em #999;
  box-shadow: 0em .5em 1em #999;
  text-align: left; 
  font-family: Arial, sans-serif;
  background: #fff;
}


/*** Gestaltung ***/

.sf-menu {margin: 0 auto; background: url(../design/w80.png)}

.sf-menu li{ border-bottom: 3px solid #fff; }
.sf-menu li.act,
.sf-menu li:hover{border-bottom: 3px solid #BE304C; }

.sf-menu p,
.sf-menu a{font-size: 115%; line-height: 130%;}

span.accessKey {text-decoration: underline;}  

.sf-menu a{color: #201d21;  padding: 0 .2em; font-size: 1.8em; font-weight: bold; }

.sf-menu li a:focus,
.sf-menu li a:hover,
.sf-menu li a:active  {text-decoration: none;}  

.sf-menu li.sfHover, .sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {  }
.sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {  }

.sf-menu li a,
.sf-menu li.cur a{background: none}
.sf-menu li a:hover{color: #BE304C}

.sf-menu li.cur a {color: #BE304C;}

/* Zweite Ebene */
.sf-menu li li {min-height: 2em; width: 33%; display: inline-block; border: 0 !important;}
.sf-menu li.act li a,
.sf-menu li.cur li a,
.sf-menu li li a{font-size: 100%; line-height: 110%; display: block; padding: .2em .3em; background: none; border: 0 !important; background-color: #fff; text-align: left; color: #5F5F5F !important; }

.sf-menu li.cur li a:hover,
.sf-menu li.act li a:hover,
.sf-menu li li a:hover{ background: none; background-color: #E4E4E4; color: #000 !important; }

.sf-menu li li:hover{border: 0 !important; }

/*** shadows for all but IE6 ***/
.sf-shadow ul {/* -moz-box-shadow: 0 .4em .4em #666; box-shadow: 0 .4em .4em #666 */}
.sf-shadow ul.sf-shadow-off {/* background: transparent; */}

/*** arrows **/
.sf-menu ul li a.sf-with-ul {padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */}
.sf-sub-indicator {
  position:    absolute;
  display:    block;
  right:      .75em;
  top:      1.05em; /* IE6 only */
  width:      1em;
  height:      1em;
  text-indent:     -999em;
  overflow:    hidden;
  background:    url('../design/pf_cacaca.gif')  no-repeat top left; 
}
/* give all except IE6 the correct values */
a > .sf-sub-indicator {top: 0.8em;background-position: 0 -100px;/* use translucent arrow for modern browsers*/}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {background-position: -10px -100px;/* arrow hovers for modern browsers*/}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {background:  url('../design/pf_ffffff.gif') no-repeat top left;}
}