.mm-open {
  overflow: hidden;
}

.mmpanels {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: inherit;

  > .mmpanel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: inherit;
  }
}

.panel-menu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: inherit;
  width: 270px;
  background: #fff;
  position: fixed;
  z-index: 99999;

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      margin: 0;
      width: 100%;
      border-bottom: 1px solid #f1f1f1;
      i {
        line-height: 22px;
        width: 22px;
      }
      &.language {
        font-weight: 600;
        @include flexbox();
        @include justify-content(center);
        a { display: inline-block; float: left}
        img {
          height: 14px;
          //position: relative;
          //top: 5px;
          margin-right: 5px;
        }
      }

      a {
        display: flex;
        padding: 12px 27px 12px 30px;
        font-size: 14px;
        line-height: 22px;
        text-decoration: none;
        color: #000;
        background: 0 0;
        position: relative;
        transition: all .2s linear;
        -ms-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        -o-transition: all .2s linear;

        &:hover {
          color: #fff;
          background: 0 0;
        }
      }
    }
  }

  #mm0.mmpanel a:not(.mm-close) {
    font-family: Hind,sans-serif;
    font-weight: 400;
    color: #000;
    background-color: transparent;
  }

  .mmpanel {
    .tt-badge, &:not(#mm0) a:not(.mm-original-link) {
      font-family: Hind,sans-serif;
      font-weight: 400;
    }
  }

  #mm0.mmpanel {
    a:not(.mm-close) {
      &:after {
        color: #000;
      }

      &:hover {
        color: #000;
        background-color: transparent;

        &:after {
          color: #000s;
        }
      }
    }

    .mm-next-level:after {
      top: 12px;
    }
  }

  .mmpanel {
    .tt-badge {
      display: inline-block;
      color: #fff;
      font-size: 12px;
      line-height: 1;
      padding: 3px 4px 1px;
      max-height: 16px;
      top: 2px;
      position: relative;
      margin-left: 7px;
      border-radius: 2px;
    }

    .tt-fatured, .tt-new {
      color: #fff;
      background-color: #1393f5;
    }

    .tt-sale {
      color: #fff;
      background-color: #f8353e;
    }

    .mm-original-link .tt-badge {
      top: -1px;
    }
  }

  .mm-close, .mm-original-link, .mm-prev-level {
    display: block;
    color: #000;
    background-color: transparent;
  }

  .mm-close:before, .mm-next-level:after, .mm-prev-level:before {
    font: normal normal normal 14px/1 "icons";
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    transition: all .2s linear;
    -ms-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    color: #ffffff;
  }

  .mm-close:hover, .mm-next-level:hover, .mm-prev-level:hover {
    color: #000;
    background-color: transparent;
  }

  .mm-close:hover:before .mm-prev-level:hover:before, .mm-next-level:hover:after {
    color: #fff;
  }

  li.mm-close-parent {
    .mm-close {
      padding: 15px 16px 13px 29px;
      color: #000;
      border-bottom: 1px solid #e9e7e7;
      background-color: transparent;

      &:before {
        content: "\e935";
        padding-right: 6px;
        position: relative;
        top: 1px;
        color: #000;
      }

      &:hover {
        color: #2879fe;
        background-color: transparent;

        &:before {
          color: #2879fe;
        }
      }
    }
  }

  .mm-prev-level {
    padding: 15px 16px 13px 29px;
    color: #6f6f6f;
    background-color: transparent;
    border-bottom: 1px solid #e9e7e7;

    &:before {
      content: "\e91d";
      padding-right: 10px;
      position: relative;
      top: 1px;
      color: #6f6f6f;
      font: normal normal normal 14px/1 "icons";
    }

    &:hover {
      color: #2879fe;
      background-color: transparent;

      &:before {
        color: #2879fe;
      }
    }
  }

  .mm-next-level {
    color: #000;
    background-color: transparent;

    &:after {
      content: "\e93f";
      padding-left: 10px;
      top: 12px;
      right: 30px;
      position: absolute;
      color: #000;
      font: normal normal normal 14px/1 "icons";
    }

    &:hover {
      color: #2879fe;
      background-color: transparent;

      &:after {
        color: #2879fe;
      }
    }
  }

  .mm-original-link {
    font-family: Hind,sans-serif;
    font-weight: 500;
    color: #b7b7b7;
    background-color: transparent;

    &:before {
      padding-right: 10px;
      color: #000;
    }

    &:hover {
      color: #2879fe;
      background-color: transparent;

      &:before {
        color: #2879fe;
      }
    }
  }
}

.mm-open .mm-fullscreen-bg {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.55);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.mmitemopen.panel-menu {
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease,-webkit-transform .3s ease;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  &.mm-right {
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease,-webkit-transform .3s ease;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.panel-menu {
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.mmitemopen.panel-menu.mm-right.mmhide, .panel-menu.mm-right {
  left: auto;
  right: 0;
  -webkit-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  transform: translate(100%, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.mmitemopen.panel-menu.mmhide {
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.mmpanel {
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease,-webkit-transform .3s ease;
  -webkit-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  transform: translate(100%, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);

  &.mmopened {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  &.mmsubopened {
    -webkit-transform: translate(-80%, 0);
    -ms-transform: translate(-80%, 0);
    transform: translate(-80%, 0);
    -webkit-transform: translate3d(-80%, 0, 0);
    transform: translate3d(-80%, 0, 0);
  }
}

.mmpanels {
  > .mmpanel {
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
    background: inherit;
    border-color: inherit;

    &:not(.mmhidden) {
      display: block;
    }

    &:after {
      content: '';
      display: block;
      height: 20px;
    }
  }

  background: inherit;
  border-color: inherit;
}

.mm-nav-btn, .mmhidden {
  display: none;
}

.mm-fullscreen-bg {
  outline: 0;

  &:active, &:focus, &:hover {
    outline: 0;
  }
}