// main: style.scss
/* Mobile Nav Toggle */
#mobile-nav-toggle {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  margin: 20px 20px 0 0;
  border: 0;
  background: none;
  font-size: 24px;
  display: none;
  transition: all 0.4s;
  outline: none;
  cursor: pointer;

  i {
    color: #fff;
  }

  @media (max-width: 768px) {
    display: inline;
  }

}

/* Mobile Nav Styling */
#mobile-nav {
  position: fixed;
  top: 0;
  padding-top: 18px;
  bottom: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.8);
  left: -260px;
  width: 260px;
  overflow-y: auto;
  transition: 0.4s;

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

    li {
      position: relative;
      a {
        color: #fff;
        font-size: 13px;
        text-transform: uppercase;
        overflow: hidden;
        padding: 10px 22px 10px 15px;
        position: relative;
        text-decoration: none;
        width: 100%;
        display: block;
        outline: none;
        font-weight: 700;
        font-family: $accent-font;
        &:hover {
          color: #fff;
        }
      }

      li {
        padding-left: 30px;
      }
    }

    .menu-has-children {
      i {
        position: absolute;
        right: 0;
        z-index: 99;
        padding: 15px;
        cursor: pointer;
        color: #fff;
        &.fa-chevron-up {
          color: $accent-color;
        }
      }

      li a {
        text-transform: none;
      }
    }

    .menu-item-active {
      color: $accent-color;
    }
  }
}

#mobile-body-overly {
  width:100%;
  height:100%;
  z-index:997;
  top:0;
  left:0;
  position:fixed;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}

/* Mobile Nav body classes */
body {
  &.mobile-nav-active {
    overflow: hidden;

    #mobile-nav {
      left: 0;
    }

    #mobile-nav-toggle {
      color: #fff;
    }
  }
}