/* Menu  © admotion*/

#menu {  z-index: 9998; float: right; margin-right: -15px; }

#menu li { float: left; margin-left: -12px; }

/* 
.item-121:hover { background: url(../images/Menu/produkte.png); background-size: 100% 100%; }
.item-126:hover { background: url(../images/Menu/sonderanfertigungen.png); background-size: 100% 100%; }
.item-127:hover { background: url(../images/Menu/showroom.png); background-size: 100% 100%; }
.item-128:hover { background: url(../images/Menu/ueber.png); background-size: 100% 100%; }

.item-121.active { background: url(../images/Menu/produkte.png); background-size: 100% 100%; }
.item-126.active { background: url(../images/Menu/sonderanfertigungen.png); background-size: 100% 100%; }
.item-127.active { background: url(../images/Menu/showroom.png); background-size: 100% 100%; }
.item-128.active { background: url(../images/Menu/ueber.png); background-size: 100% 100%; }

*/

/* Untermenu */

#menu ul ul {display: none; position: absolute; margin-left: -30px;}

#menu ul li:hover ul {display: block; }




#menu li li {float: none; list-style: none; padding: 15px; margin-left: 0px;background: #286ab7; }
#menu li li:hover { background: #fff; color: #286ab7; }
#menu li li.active { background: #fff; color: #286ab7; }
#menu li li:hover a { color: #286ab7;  }
#menu li li a { padding: 0; display: block;}

/* Unteruntermenu */

#menu ul ul ul {display: none !important; position: absolute; margin-left: 148px; margin-top: -37px;padding-left:50px;}

#menu ul ul li:hover ul {display: block !important; }
#menu li li li a { color: #fff; }
#menu li li:hover li a { color: #fff;  }
#menu li li:hover li:hover a { color: #286ab7;  }

/* Styling etc */

#menu a { color: #fff; }

#menu li a { padding: 20px 20px; left: 0px; position: relative; }
#menu li a:hover { color: #286ab7; }
#menu li.active a { color: #286ab7; }
#menu li.active li a { color: #fff; }
#menu li.active li a:hover { color: #286ab7; }
#menu li.active li:hover a { color: #286ab7; }
#menu li.active li.active a { color: #286ab7; }
#menu li.active li.active li a { color: #fff; }
#menu li.active li:hover li a { color: #fff; }
#menu li.active li:hover li:hover a { color: #286ab7; }
#menu li.active li.active li.active a { color: #286ab7; }
#menu li.active li.active li:hover a { color: #286ab7; }


    #menu-small { display: none; }
    #menu { display: block; }





/* Hamburger Menu */

#menu-small {
  width: 40px;
  height: 40px;
  position: relative;
  float: right;
  margin-top: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#menu-small span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#menu-small span:nth-child(1) {
  top: 0px;
}

#menu-small span:nth-child(2),#menu-small span:nth-child(3) {
  top: 11px;
}

#menu-small span:nth-child(4) {
  top: 22px;
}

#menu-small.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}

#menu-small.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
    
}

#menu-small.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#menu-small.open span:nth-child(4) {
  top: 11px;
  width: 0%;
  left: 50%;
}






@media(max-width:1400px) {
   
    #menu-small { display: block; }
    #menu { display: none; position: absolute; background: #8f8f8e; padding: 15px 60px 20px 20px; right: 15px; top: 60px; box-sizing: border-box;  }
    #menu li { float: none; margin: 0px; padding-top: 10px; }
    #menu li li { padding: 5px; }
    #menu li a { padding: 0px; }
    
    #menu ul {margin-left: 0; }
    #menu ul ul {display: block; background: none; position: relative; padding: 0; padding-top: 5px; margin-left: 20px; }
    #menu ul li {background: none; font-weight: 700;}
    #menu ul li li {background: none; font-weight: 300; }
    #menu ul li:hover {background: none; }
    
    
    #menu ul ul ul { display: block !important; position: relative; padding: 0; padding-top: 5px; margin-left: 20px; margin-top: 0;}

#menu li li.active { background: none; color: #286ab7;}
#menu li.active li.active li a { color: #fff;}
#menu li.active li.active li.active a { color: #286ab7;}


}

@media(max-width:786px) {
    
    #menu { width: 100%; padding: 10px 60px 10px 20px; right: auto; top: 155px; z-index: 998; }
    #menu-small { z-index: 9999999; }

}

@media(max-width:450px){
     #menu {top: 0px; padding-top: 130px; }
    
   
    
    
       #menu-small { margin-top: 32px; margin-right: 40px; }

}