.naviwrapper {  /* position:absolute; top:21px; left:21px; width:350px; z-index:111; */
  position:fixed; top:18px; left:21px; width:260px; z-index:111; 
  background-color:none;
  display: block;
  border:0;
  padding:0px;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 20px;
}

.hcontainer { width:80px; height:80px; text-align:center; padding:10px 16px 10px 21px;
  display: inline-block; border-radius:50%;
  cursor: pointer; background-color:white; opacity:0.5;
}

.hbar1, .hbar2, .hbar3 { background-image:url(../../media/strich.gif);
  background-repeat: no-repeat; background-size:contain;
  width: 40px;
  height: 8px;
  margin: 9px 0 9px 0;
  transition: 0.4s;
}

.change .hbar1 {
  -webkit-transform: rotate(-45deg) translate(-11px, 11px);
  transform: rotate(-45deg) translate(-11px, 11px);
}

.change .hbar2 {opacity: 0;}

.change .hbar3 {
  -webkit-transform: rotate(45deg) translate(-11px, -11px);
  transform: rotate(45deg) translate(-11px, -11px);
}

.floppynavi { margin:0; list-style-type:none; 
width:100%;
}

.floppynavioben { list-style-type:none; 
margin-left: 0 !important;
padding-left: 0 !important;
}

.floppynavi li { font-family: 'special elite', Verdana, Helvetica, Arial;
font-style:normal;
font-weight:400;
font-size:22px;
width:100%; 
}

.floppynavioben li { font-family: 'special elite', Verdana, Helvetica, Arial;
font-style:normal;
font-weight:400;
font-size:22px;
border-top:2px dashed #333; 
width:100%; 
}

li.floppylink a { display:block; background-color:rgba(255,255,255,0.8);
padding:22px 0 22px 24px;
color:black;
text-decoration:none;
}
li.floppyactive a { display:block; background-color:rgba(255,255,255,1);
color:DeepSkyBlue;
padding:22px 0 22px 24px;
text-decoration:none;
}


li.floppylink a:link, a:visited { color:black;
}
li.floppyactive a:visited { 
color:black;
}
li.floppyactive a:link { 
color:DeepSkyBlue !important;
}
li.floppylink a:hover { color:DeepSkyBlue !important;
background-color:rgba(255,255,255,0.5);   transition: 0.8s;
}