$menu_font_size: 14px;

.sp-megamenu-parent {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
  z-index: 99;
  display: block;
  float: right;
  position: relative;
  .sp-menu-item {
    > a,
    > span {
      img {
        display: inline-block;
      }
    }
  }

  > li {
    display: inline-block;
    position: relative;
    padding: 0;

    &.menu-justify {
      position: static;
    }

    > a,
    > span {
      display: inline-block;
      padding: 0 15px;
      line-height: $header_height;
      font-size: $menu_font_size;
      margin: 0;
    }

    &:last-child {
      > a {
        padding: 0px 0px 0px 15px;
      }
    }

    &.active > a {
      font-weight: 500;
    }

    .sp-menu-badge {
      height: 20px;
      line-height: 20px;
      padding: 0 5px;
      font-size: 10px;
      letter-spacing: 1px;
      display: inline-block;
      text-transform: uppercase;
      background: #d60000;
      color: #fff;
      border-radius: 3px;
    }
  }

  .sp-module {
    padding: 10px;
  }

  .sp-mega-group {
    list-style: none;
    padding: 0;
    margin: 0;

    > li > a {
      display: block;
      text-transform: uppercase;
      font-size: $menu_font_size;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .sp-mega-group-child {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }

  .sp-dropdown {
    margin: 0;
    position: absolute;
    z-index: 10;
    display: none;

    .sp-dropdown-inner {
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
      padding: 20px;

      > .row:not(:first-child) {
        margin-top: 20px;
      }
    }

    .sp-dropdown-items {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    &.sp-dropdown-main {
      top: 100%;
    }

    &.sp-dropdown-sub {
      top: 0;

      .sp-dropdown-inner {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      }
    }

    //List Item
    li.sp-menu-item {
      //child sub
      display: block;
      padding: 0;
      position: relative;

      > a,
      span:not(.sp-menu-badge) {
        font-size: $menu_font_size;
        line-height: 1;
        display: inline-block;
        padding: 8px 0;
        cursor: pointer;

        &.sp-group-title {
          text-transform: uppercase;
          font-weight: bold;
        }
      }
    }

    // Module
    .sp-module {
      padding: 0;
      .sp-module-title {
        font-size: $menu_font_size;
        margin: 0 0 15px;
        text-transform: uppercase;
        font-weight: bold;
      }

      .latestnews {
        margin: 0;
        > li {
          &:not(:last-child) {
            margin: 0 0 15px;
          }
          a {
            font-size: 14px;
            span {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .sp-dropdown-mega {
    > .row {
      margin-top: 30px;
      &:first-child {
        margin-top: 0;
      }
    }
    .sp-module {
      margin-left: 0px !important;
    }
  }

  //Has Child
  .sp-has-child {
    &:hover {
      > .sp-dropdown {
        display: block;
      }
    }
  }

  //fadeIn
  &.menu-animation-fade {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spFadeIn 600ms;
        }
      }
    }
  }

  // fadeInUp
  &.menu-animation-fade-up {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spFadeInUp 400ms ease-in;
        }
      }
    }
  }

  // fadeInDown
  &.menu-animation-fade-down {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spFadeInDown 400ms ease-in;
        }
      }
    }
  }

  // zoomIn
  &.menu-animation-zoom {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spZoomIn 300ms;
        }
      }
    }
  }

  // rotateIn
  &.menu-animation-rotate {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spRotateIn 300ms;
        }
      }
    }
  }

  // Elastic
  &.menu-animation-pulse {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spPulse 300ms;
        }
      }
    }
  }
}

// Hide Off-canvas menu by using .hide-on-offcanvas class
.offcanvas-menu {
  .hide-on-offcanvas {
    display: none !important;
  }

  .fa, .fab, .far, .fas {
    color: $offcanvas_menu_items_and_items_color;
  }

  .offcanvas-inner {
		ul.menu {
      li.active {
        a {
          color: $offcanvas_menu_active_menu_item_color;
        }
      }
    }
  }
}

// ltr
body {
  &.ltr {
    .sp-megamenu-parent {
      > li {
        &.sp-has-child > a:after,
        &.sp-has-child > span:after {
          font-family: $font_awesome_font_family;
          content: "\f107";
          float: right;
          margin-left: 7px;
          font-weight: 900;
        }

        .sp-menu-badge {
          &.sp-menu-badge-right {
            margin-left: 5px;
          }

          &.sp-menu-badge-left {
            margin-right: 5px;
          }
        }
      }

      .sp-dropdown {
        .sp-dropdown-items {
          .sp-has-child > a:after {
            font-family: $font_awesome_font_family;
            content: "\f105";
            float: right;
            margin-left: 7px;
            font-weight: 900;
          }
        }

        &.sp-menu-center {
          margin-left: 45px;
        }

        &.sp-dropdown-main {
          &.sp-menu-right {
            left: 0;
          }

          &.sp-menu-full {
            left: auto;
            right: 0;
          }

          &.sp-menu-left {
            right: 0;
          }
        }

        &.sp-dropdown-sub {
          left: 100%;
        }
      }
    }
  }
}

@media (min-width: 576px) {
  .sp-menu-full.container {
    width: 540px;
  }
}

@media (min-width: 768px) {
  .sp-menu-full.container {
    width: 720px;
  }
}

@media (min-width: 992px) {
  .sp-menu-full.container {
    width: 960px;
  }
}

@media (min-width: 1200px) {
  .sp-menu-full.container {
    width: 1140px;
  }
}
@media (min-width: 1400px) {
  .sp-menu-full.container {
    width: 1320px;
  }
}