@primary_color: #2E83D0;
@secondary_color: #242424;
@white:#fff;
@black:#000;
@gray: #F9F9F9;
/* # Mobile Menu
-------------------------------------------------------------- */
.mobile-menu-toggle {
  .hamburger {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;

    &:hover {
      .hamburger__line.middle {
        width: 100%;
      }

      .hamburger__line.bottom {
        width: 100%;
      }
    }
  }

  .hamburger__line {
    background-color: #28B5A7;
    height: 2px;
    width: 100%;
    display: block;
  }

  .hamburger__line.middle {
    margin: 7px 0 7px auto;
    width: 75%;
    transition: 0.3s all;
  }

  .hamburger__line.bottom {
    margin-left: auto;
    width: 45%;
    transition: 0.6s all;
  }
}

.mobile-menu__bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 99;
}

.mobile-menu.is-open {
  .mobile-menu__bg {
    display: block;
  }

  transform: translate3d(0, 0, 0);
}

.mobile-menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 320px;
  height: 100vh;
  transform: translate3d(100%, 0, 0);
  transition: all 0.5s ease;
  z-index: 99;
}

.mobile-menu__top {
  padding: 20px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-header-logo {
  width: 80%;

  img {
    max-height: 60px;
  }
}

.menu-close {
  position: relative;
  width: 30px;
  height: 30px;
  cursor: pointer;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 14px;
    right: 0;
    width: 20px;
    height: 2px;
    background-color: @white;
    transform: rotate(45deg);
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 14px;
    right: 0;
    width: 20px;
    height: 2px;
    background-color: @white;
    transform: rotate(-45deg);
  }
}

.mobile-menu__panel {
  padding: 0 0 50px;
  position: relative;
  width: 320px;
  height: 100vh;
  overflow: auto;
  margin-left: auto;
  background-color: @primary_color;
}

.mobile-menu__nav {
  padding: 0;

  ul {
    padding: 0;
  }

  li {
    list-style: none;
    position: relative;
    color: @black;
    margin-bottom: 0;

    .arrow.is-open {
      &:after {
        transform: rotate(0deg);
      }
    }

    a {
      color: @white;
      padding: 10px 15px;
      display: block;

      &:hover {
        color: @white;
        background-color: @secondary_color;
      }
    }
  }

  .arrow {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;

    &:before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 2px;
      background-color: @white;
      margin: -1px 0 0 -10px;
    }

    &:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 2px;
      background-color: @white;
      margin: -1px 0 0 -10px;
      transform: rotate(90deg);
    }
  }

  >li {
    &:first-child {
      border-top: 1px solid rgba(255, 255, 255, 0.5);
    }
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }

  li.menu-item-has-children {
    a {
      padding-right: 45px;
    }
  }

  .dropdown-menu {
    padding: 0 0 0 10px;
    position: static;
    background: transparent;
    border: none;
  }

  .sub-menu {
    li {
      a {
        color: @white;
        padding: 10px 15px;
        display: block;
      }
    }
  }

  li.current-menu-ancestor {
    >a {
      color: @white;
      background-color: @secondary_color;
    }
  }

  li.current-menu-item {
    >a {
      color: @white;
      background-color: @secondary_color;
    }
  }
}