/* Menu  © admotion*/

#menu {  z-index: 998; position: fixed;  width: 100%; background: #fff; top: -1100px; padding:40px 5% 20px; box-sizing: border-box; transition: 0.5s;}
#menu::after { content: ""; background: url('/images/Welle.svg') no-repeat;  background-size: 100%; width: 110%; height: 0;  padding-bottom: 5%; position: absolute; top: 100%; left: -2%; transform: rotate(180deg); }
#menu.open { top: 0; }

#menu-small { display: block; }


#menu li:first-child { display: none; }
#menu li li:first-child { display: list-item; }
#menu li a { color: #000; padding: 7px 0 0px; font-size: 18px;}
#menu li a:hover { color: #707070; }
#menu li.active a { color: #707070; }

#menu li:nth-child(2) { border-top: 5px solid #24308d; float: left; width: 100%; margin-right: 0%;margin-bottom: 4%; }
#menu li:nth-child(2) a { color: #24308d; padding: 7px 0 0px; font-size: 18px; }
#menu li:nth-child(2) a:hover { color: #000; }

#menu li:nth-child(3) { border-top: 5px solid #9d1002; float: left; width: 100%; margin-right: 0%;margin-bottom: 4%;}
#menu li:nth-child(3) a { color: #9d1002; padding: 7px 0 0px; font-size: 18px;}
#menu li:nth-child(3) a:hover { color: #000; }

#menu li:nth-child(4) { border-top: 5px solid #f5a556; float: left; width: 100%; margin-right: 0%;margin-bottom: 4%;}
#menu li:nth-child(4) a { color: #f5a556; padding: 7px 0 0px; font-size: 18px;}
#menu li:nth-child(4) a:hover { color: #000; }

#menu li:nth-child(5) { border-top: 5px solid #000; float: left; width: 100%; margin-right: 0%;}
#menu li:nth-child(6) { border-top: 0px solid #000; float: left; width: 100%; margin-right: 0%;}
#menu li:nth-child(7) { border-top: 0px solid #000; float: left; width: 100%; margin-right: 0%;}


#menu li li { border-top: 0px solid #f5a556 !important; float: none !important; padding: 3px 0; }
#menu li li a { color: #000 !important; font-size: 14px !important;  }
#menu li:nth-child(2) li a:hover { color: #24308d !important; }
#menu li:nth-child(3) li a:hover { color: #9d1002 !important; }
#menu li:nth-child(4) li a:hover { color: #f5a556 !important; }

#menu li li::marker {width: 20px; }

#menu li ul {padding: 0;}

#menu li li{ margin-right: 0 !important; width: 100% !important; margin-bottom: 0 !important;
   list-style: none;
}
#menu li:nth-child(2) li:first-child::before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px; margin-right: 10px;
    background-size: 100%; background-repeat: no-repeat;
   background-image: url(/images/icons/angebot-psycho.png);
}
#menu li:nth-child(3) li:first-child::before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px; margin-right: 10px;
    background-size: 100%; background-repeat: no-repeat;
   background-image: url(/images/icons/angebot-coaching.png);
}
#menu li:nth-child(4) li:first-child::before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px; margin-right: 10px;
    background-size: 100%; background-repeat: no-repeat;
   background-image: url(/images/icons/angebot-paar.png);
}

#menu li li:nth-child(2)::before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px; margin-right: 10px;
    background-size: 100%; background-repeat: no-repeat;
   background-image: url(/images/icons/methoden.png);
}

#menu li li:nth-child(3)::before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px; margin-right: 10px;
    background-size: 100%; background-repeat: no-repeat;
   background-image: url(/images/icons/kosten.png);
}




/* Hamburger Menu */

#menu-small { background: #fff; border-radius: 50%; z-index: 1000;
  width: 70px;
  height: 70px;
  position: fixed; right: 40px;
  float: right;
  margin-top: 20px; 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: 70%;
  border-radius: 0px;
  opacity: 1;
  left: 15%;
  -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;
}

html[lang="ar-aa"] #menu-small  {
   right: auto; left: 40px;
}

#menu-small span:nth-child(1) {
  top: 20px;  background: #24308d;
}

#menu-small span:nth-child(2),#menu-small span:nth-child(3) {
  top: 33px;  background: #9d1002;
}

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

#menu-small.open span:nth-child(1) {
  top: 33px;
  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); background: #24308d;
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

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

@media(min-width:768px) {
    
    
html[lang="ar-aa"] #menu-small  {
   right: 40px; left: auto;
}

    
    #menu {  padding:100px 5% 0px;}
#menu-small { background: #fff; border-radius: 50%; z-index: 1000;
  width: 70px;
  height: 70px;
  position: fixed; right: 40px;
  float: right;
  margin-top: 0px; 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 li a { color: #000; padding: 22px 0 10px; font-size: 25px;}
#menu li li a { color: #000 !important; font-size: 18px !important;  }

#menu li:nth-child(2) { border-top: 5px solid #24308d; float: left; width: 48%; margin-right: 4%; margin-bottom: 4%; }
#menu li:nth-child(2) a { color: #24308d; padding: 48px 0 10px; font-size: 25px; }
#menu li:nth-child(2) a:hover { color: #000; }

#menu li:nth-child(3) { border-top: 5px solid #9d1002; float: left; width: 48%; margin-right: 0%;margin-bottom: 4%;}
#menu li:nth-child(3) a { color: #9d1002; padding: 48px 0 10px; font-size: 25px;}

#menu li:nth-child(4) { border-top: 5px solid #f5a556; float: left; width: 48%; margin-right: 4%;margin-bottom: 4%;}
#menu li:nth-child(4) a { color: #f5a556; padding: 48px 0 10px; font-size: 25px;}

#menu li:nth-child(5) { border-top: 5px solid #000; float: left; width: 48%; margin-right: 0%;}
#menu li:nth-child(6) { border-top: 0px solid #000; float: left; width: 48%; margin-right: 0%;}
#menu li:nth-child(7) { border-top: 0px solid #000; float: left; width: 48%; margin-right: 0%;}
    
}

@media(min-width:1000px) {
    
}

@media(min-width:1200px) {
   
#menu li:nth-child(2) { border-top: 5px solid #24308d; float: left; width: 22%; margin-right: 4%; }
#menu li:nth-child(2) a { color: #24308d; padding: 22px 0 10px; font-size: 25px; }
#menu li:nth-child(2) a:hover { color: #000; }

#menu li:nth-child(3) { border-top: 5px solid #9d1002; float: left; width: 22%; margin-right: 4%;}
#menu li:nth-child(3) a { color: #9d1002; padding: 22px 0 10px; font-size: 25px;}

#menu li:nth-child(4) { border-top: 5px solid #f5a556; float: left; width: 22%; margin-right: 4%;}
#menu li:nth-child(4) a { color: #f5a556; padding: 22px 0 10px; font-size: 25px;}

#menu li:nth-child(5) { border-top: 5px solid #000; float: left; width: 22%; margin-right: 0%;}
#menu li:nth-child(6) { border-top: 0px solid #000; float: left; width: 22%; margin-right: 0%;}
#menu li:nth-child(7) { border-top: 0px solid #000; float: left; width: 22%; margin-right: 0%;}
    #menu li li a {padding: 10px 0 !important; }



}