.menu-container{

// pointer-events: none;
  text-align: left;}

#toggle {
  position: absolute;
  display: inline-block;
  .rect;
  margin: 5px 10px ;
  margin-top: 12px;
  padding: 12px 3px;
  border: 2px solid @white;
  pointer-events: auto;

}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
}
#toggle span:after{
  top: 7px;
}
#toggle span {
  position: relative;
  display: block;
  margin-top: 5px;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 2px;
  background-color: @white;
  transition: all 0.3s;
  backface-visibility: hidden;
}

/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  .my_trasform(rotate(45deg) scaleX(0.9));
  top: 0;
}

#toggle.on span:after {
   .my_trasform(rotate(-45deg) scaleX(0.9));
   top: 0;
}


#toggle.on span {

    &:after,
    &:before{
    .merging_transition(top,0.3s);
    .merging_transition(transform,0.3s,0.3s,ease-in-out);
    }
  
}

#toggle.on + #navbar {
  .ms_opacity (1);
  visibility: visible;
}

/* menu appearance*/
#navbar {
  position: relative;
  top: 0;
  color: #999;
  width: 0;
  height: 100%;
  margin: auto;
  margin-left: -1px;
 background-color: @colorBlack;
  border-radius: 0;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  .ms_opacity (0);
  visibility: hidden;
  transition: all .4s;
  border-width: 0px;
  z-index: 9999;

      .media_max-tablet({
      overflow: hidden;

          &:hover{ overflow: visible;}

      });

}

#navbar{
 & ul,& li,& li a {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  text-align: left;
}
}
#navbar li a {
  padding: 5px;
  color: #888;
  text-decoration: none;
  transition: all .2s;
}



#menu-menu,
#menu-all-pages {

    .menu-item-has-children {
        position: relative;
        padding-right: 8px;

        &:after {
            content: '\f35f';
            display: inline-block;
            font-family: "Ionicons";
            color: @colorWhite;
            font-size: 1em;
            position: absolute;
            top: 9px;
            right: 0px;
            }

        .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;

            &>li{

                .media_max-tablet({
       
                    &,
                    a{margin: 5px 15px;}



                    .sub-menu {
                    top: 0;
                    left: 100%;
                    margin-top: -5px;
                    }


                })

            }

        }
    }

        &>li{
    
            .media_max-tablet({
              float: left;
            padding-bottom: 8px;
           
                &>a{ 
                padding-top: 8px;
                padding-bottom: 7px;
                }

            });

        }

        .menu-item-has-children .sub-menu >.current-menu-item{margin: 5px 15px;}

}



  @off-canvas-meni-width: 300px;
  @off-canvas-meni-width--mobile:240px;

  .js-overlay-block{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none;
  .ms_opacity (0);
  .transition;
  background-color: @colorBlack;

      &.active{
      pointer-events: auto;
      .ms_opacity (0.7) ;
      }

  }

  #navbar.js-off-canvas-meni{
      left: -@off-canvas-meni-width;
      right: auto;
      width: @off-canvas-meni-width;
  }

    #toggle{
        // position: relative;
        left: 0;
        .merging_transition(all, 0.3s);

       &.on{ 
        left: @off-canvas-meni-width ;
      }

      &:hover{
         .toggle-button-hover--bg;
      }


   }

  #toggle.on + #navbar.js-off-canvas-meni{
      left: 0;
  }

  #navbar{

        #primary-navigation .nav-menu ul li.page_item,
        #menu-menu li,
        #menu-all-pages li{
        margin: 0;
        padding: 0px;
        }

        li a,
        li a:hover,
        li a:focus{border-bottom: 0px;}

        a:hover,
        .sub-menu a:hover{ 
        background-color: @colorWhite;
        }

                 .current-menu-item>a,
                 .current-menu-parent>a{ 
                  background-color: @colorWhite;
                  color: @colorBlack !important;
                 }

        #menu-menu,
        #menu-all-pages{

          & > li{float: none;}

          .menu-item-has-children .sub-menu{
          position: static;
          }

          li a{
          padding: 20px;
          cursor: pointer;
          margin: 0px;
          }

            li a:after{display: none;}

              ul a{padding-left: 50px;}

                ul ul a{padding-left: 75px;}

            .menu-item-has-children::after{
            left: 7px;
            top: 20px;
            pointer-events: none;
            }

          .sub-menu li:first-child>a{ border-top: 1px solid @colorWhite;}
          .sub-menu li:last-child>a{ border-bottom: 1px solid @colorWhite;}

          .sub-menu .sub-menu li:first-child>a{ border-top: 0px;}
        }

}


.media-tablet({

    #navbar{

        #primary-navigation .nav-menu ul li.page_item,
        #menu-menu li,
        #menu-all-pages li{
        margin: 0;
        padding: 0px;
        }

        li a,
        li a:hover,
        li a:focus{border-bottom: 0px;}

        #menu-menu,
        #menu-all-pages{

          li a{
          padding: 20px;
          cursor: pointer;
          }

            li a:after{display: none;}

              ul a{padding-left: 50px;}

                ul ul a{padding-left: 75px;}

            .menu-item-has-children::after{
            left: 7px;
            top: 20px;
            pointer-events: none;
            }
        }
    }
});


.media-tablet({

    #navbar.js-off-canvas-meni{
    left: -@off-canvas-meni-width--mobile;
    right: auto;
    width: @off-canvas-meni-width--mobile;
    }

    #toggle.on{ 
        left: @off-canvas-meni-width--mobile ;
      }
});