// menu.scss
// Navs
// --------------------------------------------------
@import "vars/menu.vars";

/*
* NAVIGATION
*/
.#{$app-brand-prefix}-megamenu {
  @include container-layout-variant($megamenu-color, $megamenu-bg);

  .#{$app-brand-prefix}-colorbox {
    display: none !important;
  }

  &.navbar {
    padding: 0;
  }

  /* menu level 1 */
  .navbar-nav {
    @include rtl-text-align-right();

    >li {
      @include rtl-text-align-left();
      float: none;

      @media (min-width: 992px) {
        display: inline-block;
        vertical-align: top;
      }

      +.nav-item {
        @include rtl-margin-left(0px);
      }

      &.aligned-fullwidth {
        position: static;

        >.dropdown-menu {
          width: 100% !important;
        }
      }

      &.aligned-right {
        .dropdown-menu {
          right: 0;
          left: auto;
        }
      }

      &.aligned-left {
        .dropdown-menu {
          left: 0;
          right: auto;
        }
      }

      &.aligned-center {
        .dropdown-menu {
          left: 50%;
          @include translate(-50%, 0);
        }
      }

      &.ic {
        &>a {
          &>.sub-title {
            display: inline-block;
            text-align: center;
            font-size: 12px;
            color: #ffffff;
            text-transform: capitalize;
            font-weight: 400;
            padding: 0px 5px;
            position: absolute;
            top: 10px;
            border-radius: 2px;
            @include rtl-right(-3px);
            background-color: #333;
          }
        }

        &.ic-new {
          &>a {
            &>.sub-title {
              background-color: #16c98d;
            }
          }
        }

        &.ic-sale {
          &>a {
            &>.sub-title {
              background-color: #ff708e;
            }
          }
        }
      }

      @media (min-width: 992px) {
        &.parent {
          &>a span.menu-title {
            position: static;

            &:after,
            &:before {
              bottom: -1px;
              border: solid transparent;
              content: "";
              height: 0;
              width: 0;
              position: absolute;
              pointer-events: none;
              opacity: 0;
              visibility: hidden;
              transform: translateY(20px);
              left: 50%;
              transition: transform .4s;
              z-index: 9999;
              backface-visibility: hidden;
            }

            &:before {
              border-width: 12px;
              margin-left: -12px;
              border-bottom-color: #eee;
            }

            &:after {
              border-bottom-color: #fff;
              border-width: 14px;
              margin-left: -14px;
              z-index: 99999;
              margin-bottom: -3px;
            }
          }

          &:hover {
            &>a span.menu-title {

              &:after,
              &:before {
                opacity: 1;
                visibility: visible;
                transform: translateY(0px);
              }
            }
          }
        }
      }

      /*end min 992px*/
      >a {
        padding: 30px 18px;

        @media (min-width: 992px) and (max-width: 1199px) {
          padding: 30px 14px;
        }

        font-size: 13px;
        line-height: 20px;
        text-transform: uppercase;
        color: #000;
        font-weight: 600;
        @include transition(all 350ms ease-out);
        position: relative;

        &:hover,
        &:focus,
        &:active {
          color: $megamenu-link-hover-color;
          background-color: $megamenu-link-bg-hover-color;
        }

        &.dropdown-toggle:after {
          font-size: 13px;
          content: "\f107";
          font-family: $font-icon;
          border: 0;
          width: auto;
          height: auto;
          @include rtl-margin(0, 0, 0, 5px);
          vertical-align: 1px;
          font-weight: normal;
          line-height: 1;
        }

        &:before {
          /* position: absolute;
				    top: 50%;
				    right: 20px;
				    left: 20px;
				    height: 2px;
				    margin-top: 12px;
				    -webkit-transform: scale(0, 1);
				    -moz-transform: scale(0, 1);
				    -ms-transform: scale(0, 1);
				    -o-transform: scale(0, 1);
				    -webkit-transition: transform 0.5s ease;
				    transition: transform 0.5s ease;
				    background: $theme-color-default;
				    content: '';
				    -webkit-transform-origin: right top;
				    -moz-transform-origin: right top;
				    -ms-transform-origin: right top;
				    transform-origin: right top;  */
        }

        >.menu-title {
          position: relative;
        }
      }

      &:focus>a,
      &:hover>a {
        color: #888;

        &:before {
          -webkit-transform: scale(1, 1);
          -moz-transform: scale(1, 1);
          -ms-transform: scale(1, 1);
          -o-transform: scale(1, 1);
          -webkit-transform-origin: left top;
          -moz-transform-origin: left top;
          -ms-transform-origin: left top;
          transform-origin: left top;
        }
      }

      &:hover>.caret,
      &:active>.caret {
        color: $megamenu-link-hover-color;
      }

      &.home {
        a {
          @include rtl-padding(20px, 20px, 20px, 0);
        }
      }
    }
  }

  /* level 2 */
  .dropdown-menu {
    left: auto;
    @include rtl-right(0px);
    top: 100%;
    height: auto;
    border: 0;
    min-width: $megamenu-sub-min-width;
    padding: $megamenu-sub-padding;
    margin: 0px;
    @include rtl-text-align-left();
    @include transition(all 0.2s);
    border-radius: 0;
    //border: 1px solid #eee;
    display: block;

    @media (min-width: 992px) {
      opacity: 0;
      visibility: hidden;
      transform: translateY(5px);
    }

    @media (max-width: 991px) {
      @include transition(none);
    }

    @media (min-width: 1200px) {
      padding: 25px;
      min-width: 200px;
    }

    li {
      line-height: 25px;
      padding: 0;
      float: none;

      +.nav-item {
        @include rtl-margin-left(0px);
      }

      &:hover>a {
        transform: translateX(5px);
        color: $theme-color-default;
      }

      a {
        color: #888;
        padding: 5px 0;
        font-weight: 400;
        font-size: $megamenu-sub-font-size;
        line-height: 25px;
        display: block;
        @include transition(all .4s);
        text-transform: capitalize;
        position: relative;

        &:hover {
          .fa {
            color: $megamenu-sub-link-hover-color;
          }
        }
      }
    }

    div.menu-title {
      margin-bottom: $small-space;
      font-size: 12px;
      text-transform: $megamenu-parent-text-transform;
      font-weight: 600;
      padding-bottom: 10px;
      letter-spacing: 1px;
      line-height: 1.5;
      color: #000;
      position: relative;

      &:before {
        content: "";
        width: 14px;
        height: 1px;
        background: #000;
        position: absolute;
        bottom: 0;
        @include rtl-left(0);
        opacity: 0.2;
      }

      a {
        color: #000;
      }
    }

    a>.menu-title {
      text-transform: capitalize;
      font-weight: 400;
      font-size: $base-font-size;

      &:hover {
        //color: $theme-color-default;
      }
    }
  }

  .dropdown {
    @media (min-width: 992px) {
      >.dropdown-menu {
        pointer-events: none;
      }

      &:hover {
        >.dropdown-menu {
          opacity: 1;
          visibility: visible;
          transform: translateY(0px);
          pointer-events: auto;
        }

        >a {
          color: $megamenu-link-hover-color;

          .fa {
            color: $megamenu-link-hover-color;
          }
        }
      }
    }
  }

  /* level > 3 */
  .dropdown-submenu {
    position: relative;

    .dropdown-menu {
      top: 0;
      position: absolute;
      @include rtl-left(100%);
    }

    &:hover {
      >.dropdown-menu {
        @include media-breakpoint-up(lg) {
          display: block;
          opacity: 1;
          visibility: visible;
          transform: translateY(0px);
        }

        top: 0;
      }
    }
  }

  .mega-group {
    &>.dropdown-toggle {
      border: 0;
      display: block;

      text-transform: uppercase;
      font-family: $megamenu-heading-title-font-family;
      color: $megamenu-heading-color;

      .fa {
        color: $white;
      }
    }
  }

  .megamenu .cols1 {
    min-width: 200px;
  }

  .megamenu .cols2 {
    min-width: 500px;
  }

  .megamenu .cols3 {
    min-width: 740px;
  }

  // manufacture
  .manu-logo {
    img {
      border: $main-border;
      margin-bottom: $small-space;
      margin-right: $small-space;
    }
  }

  .widget-subcategories {
    margin-bottom: $large-space/2;
  }
}

/* Product for menu */

.#{$app-brand-prefix}-widget {
  .thumbnail-container {
    margin: 0;
    @include rtl-text-align-left();
    @include box-shadow(none);

    .product-image {
      @include rtl-float-left();
      @include rtl-margin(0, 15px, 15px, 0);
      width: 80px;
    }

    .product-meta {
      overflow: hidden;
      zoom: 1;
      padding: 10px 0px;
    }

    .product-title {
      margin-top: 0px;
      margin-bottom: 0;
      line-height: 20px;
      height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: none;
      font-size: 13px;
    }

    .product-price-and-shipping {
      color: #888;

      .price {
        color: $theme-color-default;
      }

      .aeuc_from_label {
        color: #888;
      }

      .aeuc_before_label,
      .discount-percentage {
        display: none;
      }
    }

  }

  .widget-html {
    color: #888;
    line-height: 1.5;
    font-size: 13px;

    @media (max-width: 991px) {
      margin: 10px 0;
    }

    p {
      line-height: 20px;
      margin: 0 0 15px;

      &:last-child {
        margin: 0;
      }
    }

    img {
      max-width: 100%;
      height: auto;
    }
  }

  .widget-video {
    iframe {
      border-width: 0px;

      @media (max-width: 991px) {
        // max 991px
        width: 100%;
      }
    }
  }

  ul.widget-image {
    @include rtl-margin-left(0px);

    li {
      @include rtl-margin-right($small-space);

      &:last-child {
        @include rtl-margin-right(0px);
      }
    }
  }
}

/*
 *
 * Vertical menu
 */
.ApMegamenu {
  .#{$app-brand-prefix}-verticalmenu {
    background: $vertical-menu-content-bg;
    position: relative;

    .title_block {
      margin: 0;
      color: $white;
      width: 100%;
      line-height: 26px;
      letter-spacing: 1px;
      font-size: 20px;
      padding: $medium-space 25px;
      text-transform: none;

      &:before {
        display: none;
      }
    }

    >.block_content {
      background: $vertical-menu-content-bg;
      position: absolute;
      z-index: 30;
      height: auto;
      overflow: visible;
      width: 100%;
      @include transition(height 0.4s ease 0s);
    }
  }
}

div.verticalmenu {
  z-index: 100;

  .navbar-collapse,
  .navbar-vertical {
    margin: 0;
    padding: 0;
  }

  .navbar-nav {
    position: static;
    @include clearfloat();

    >li {
      @include size(100%, auto);
      position: relative;
      float: none;

      +.nav-item {
        @include rtl-margin-left(0px);
      }

      >a {
        display: block;
        color: $vertical-menu-color;
        font-size: $vertical-menu-font-size;
        font-family: $vertical-menu-font-family;
        padding: $vertical-menu-link-padding;
        font-weight: $vertical-menu-font-weight;
        line-height: 24px;
      }

      .caret {
        display: none;
      }

      @media (max-width: 991px) {

        // max 991px
        .caret {
          display: block;
          position: relative;
          top: -40px;
          cursor: pointer;
          border: none;
          width: 25px;
          height: 30px;
          text-align: center;
          border: none;
          @include rtl-float-right();
          @include rtl-right(0);

          &:before {
            content: "\f105";
            font-family: $font-icon;
            color: $vertical-menu-color;
            font-size: 11px;
            font-weight: normal;
          }
        }
      }

      .dropdown-submenu .caret {
        top: 0;

        @media (max-width: 991px) {
          // max 991px
          top: -16px;
        }
      }

      &.last a,
      &:last-child a {
        border: 0;
      }

      // Hover Effect
      &:hover {
        >a {
          color: $megamenu-sub-link-hover-color;
          background: $theme-color-default;

          &:hover,
          &:focus {
            color: $vertical-menu-link-hover-color;
            background: $theme-color-default;
            border-color: $border-color;
          }
        }

        .caret {
          color: $theme-color-default;

          &:before {
            color: $theme-color-default;
          }
        }
      }

      &.open {
        >a {
          color: $megamenu-sub-link-hover-color;
          background: $theme-color-default;

          &:hover,
          &:focus {
            color: $vertical-menu-link-hover-color;
            background: $theme-color-default;
            border-color: $border-color;
          }
        }

        .caret {
          color: $theme-color-default;

          &:before {
            color: $theme-color-default;
            top: -23px;
            content: "\f0d7";
          }
        }
      }

      .parent {
        position: relative;

        >.dropdown-toggle {
          text-transform: none;
          font-weight: normal;
          color: $vertical-sub-menu-link-color;

          &:hover {
            color: $theme-color-default;
          }
        }
      }
    }

    li {
      &.parent {
        >a {
          &:after {
            position: absolute;
            content: "\f105";
            font-family: $font-icon;
            color: $vertical-menu-link;
            font-size: 11px;
            font-weight: normal;
            right: 12px;
            top: 12px;
            border: none;

            @media (max-width: 991px) {
              // max 991px
              display: none;
            }
          }
        }

        &:hover {
          >a {
            &:after {
              color: $white;
            }
          }
        }

        &.dropdown-submenu {
          >a {
            &:after {
              color: $body-color;
            }
          }
        }
      }
    }
  }

  ul {
    li {
      a {
        .menu-icon {
          display: block;
          @include rtl-background-position-left(center);

          span {
            display: block;
            @include rtl-margin-left(35px);
          }

          .menu-desc {
            display: none;
          }
        }

        .menu-title {
          display: block;
          color: $vertical-menu-link;
        }

        .sub-title {
          font-size: $vertical-menu-font-size;
        }

        &:hover,
        &:focus {
          .menu-title {
            color: $vertical-menu-link-hover-color;
          }

          color: $vertical-menu-link-hover-color;
          background: $white;
        }
      }
    }
  }

  .dropdown-menu {
    left: -9999px;
    top: -9999px;
    right: auto;
    border: 2px solid $theme-color-default;
    min-height: 100px;
    height: 100% !important;
    min-width: $vertical-sub-menu-width;
    padding: $vertical-sub-menu-padding;
    background: $vertical-sub-menu-bg;
    margin: 0px;
    @include rtl-text-align-left();
    @include rounded-corners(0);
    @include box-shadow($vertical-sub-shadow);

    ul {
      li {
        padding: 4px 0;
        line-height: normal;
        list-style: none;
        display: block;
        float: none;

        +.nav-item {
          @include rtl-margin-left(0px);
        }

        a {
          color: $vertical-sub-menu-link-color;
          font-size: $vertical-sub-menu-link-font-size;
          font-weight: 400;
          padding: 0;

          .menu-title {
            color: $vertical-sub-menu-link-color;
            text-transform: none;
          }

          &:hover {
            color: $theme-color-default;

            .menu-title {
              color: $theme-color-default;
            }
          }
        }
      }
    }

    p {
      line-height: 18px;
      font-size: $vertical-sub-menu-link-font-size;
    }

    .#{$app-brand-prefix}-menu-video {
      width: 100%;

      iframe {
        margin-bottom: 10px;
      }
    }

    .dropdown-toggle {
      &:hover {
        color: $vertical-sub-menu-heading-color;
      }
    }

    .dropdown-toggle {
      font-weight: 400;
      text-transform: uppercase;
      line-height: normal;
      color: $vertical-sub-menu-heading-color;
      font-family: $vertical-sub-menu-link-font-family;
      font-size: $vertical-sub-menu-link-font-size;
    }

    .action {
      display: none;
    }
  }

  .widget-heading {
    color: $vertical-sub-menu-heading-color;
    text-transform: uppercase;
    font-weight: 400;
  }
}

div.active-hover {
  ul {
    >li {
      &:hover {
        >.dropdown-menu {
          @include rtl-left(100%);
          top: -1px;
          @include opacity(1);
          display: inline-table;
        }
      }
    }
  }
}

/* CANVAS MENU - SHOW CANVAS = YES */
.megamenu-overlay {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  visibility: hidden;
  @include rgba($black, 0.5);
  @include opacity(0);
  @include transition(all 0.4s ease);
}

.off-canvas {
  body {
    position: relative;
  }
}

@include media-breakpoint-up(lg) {

  // Menu Canvas
  .off-canvas-active {

    >#page,
    >.off-canvas-nav-megamenu {
      @include translate(0, 0);
      position: relative !important;
    }
  }

  .off-canvas-button-megamenu {
    display: none !important;
  }
}

@include media-breakpoint-down(md) {
  .off-canvas-active {
    .megamenu-overlay {
      @include opacity(1);
      visibility: visible;
    }
  }
}

.off-canvas-button-megamenu {
  color: $black;
  margin: 15px 10px;
  @include rtl-text-align-right();

  &:hover {
    cursor: pointer;
  }
}

.off-canvas-inactive {
  >#page {
    @include transition(all 400ms ease 0s);
  }
}

.off-canvas-active {
  background: $white;

  >#page {
    //@include transform(translateX(234px));
    //@include transition(all 400ms ease 0s);
  }

  >.off-canvas-nav-megamenu {
    &.active {
      @include rtl-left(0px);
      @include transform(translateX(234px));
      @include transition(all 400ms ease 0s);
    }
  }

  #page {
    position: fixed;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
  }
}

.off-canvas-nav-megamenu {
  position: absolute;
  top: 0px;
  width: 0px;
  background: $white;
  z-index: 999;
  @include rtl-left(0);
  @include transition(all 400ms ease 0s);

  .navbar-nav {
    margin: 0px;

    >li {
      float: none;
      border-bottom: $main-border;
      float: none;

      +.nav-item {
        @include rtl-margin-left(0px);
      }

      &.ic {
        &>a {
          &>.sub-title {
            display: inline-block;
            text-align: center;
            font-size: 12px;
            color: #ffffff;
            text-transform: capitalize;
            font-weight: 400;
            padding: 2px 5px;
            position: absolute;
            top: 5px;
            border-radius: 2px;
            @include rtl-right(-35px);
            background-color: #333;
          }
        }

        &.ic-new {
          &>a {
            &>.sub-title {
              background-color: #16c98d;
            }
          }
        }

        &.ic-sale {
          &>a {
            &>.sub-title {
              background-color: #ff708e;
            }
          }
        }
      }

      >a {
        display: inline-block;
        color: #2a363b;
        font-size: 14px;
        font-weight: 600;
        padding: 14px 20px;
        position: relative;
        text-transform: uppercase;

        &:hover,
        &:focus {
          background: none;
        }
      }
    }

    .dropdown-sub div.menu-title {
      font-weight: 600;
      color: #444;
      font-size: 12px;
    }
  }

  .nav {
    li {
      &.dropdown {
        .caret {
          cursor: pointer;
          position: absolute;
          top: 0;
          margin: auto 0;
          @include rtl-right(0);
          @include size(50px, 50px);
          line-height: 50px;
          text-align: center;

          &:before {
            content: "\f107";
            font-family: $font-icon;
            color: $black;
            font-size: 15px;
            font-weight: normal;
            display: block;
            text-align: center;
            transition: all .6s;
            transform-origin: center center;
          }
        }

        .dropdown-toggle::after {
          display: none;
        }
      }

      &.open-sub {
        >.caret {
          &:before {
            transform: rotate(180deg);
          }
        }
      }

      li {
        &.dropdown-submenu {
          .caret {
            top: 0px;
            width: 30px;
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
  }

  .offcanvas-mainnav {
    background-color: $white;
    position: absolute;
    top: 0;
    width: 234px;
    overflow: hidden;
    @include rtl-left(-234px);
  }

  .dropdown-menu {
    font-size: $base-font-size;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    float: none;
    margin: 0;
    width: 100% !important;
    border: 0;
    padding: 0px 20px 10px;
    @include box-shadow(none);
    @include rounded-corners(0);
    @include rtl-text-align-left();

    ul {
      li {
        line-height: 30px;
        float: none;

        +.nav-item {
          position: relative;
          @include rtl-margin-left(0px);
        }

        >a {
          font-weight: 400;
          color: #888;
          padding: 0;
        }
      }
    }
  }

  .dropdown-sub {
    div.menu-title {
      margin: 10px 0;
      color: $black;
      font-family: "Lato", sans-serif;
      font-size: 14px;
      text-transform: uppercase;

      a {
        color: #000;
      }
    }
  }

  ul.nav-links {
    @include rtl-padding-left(7px);

    li {
      line-height: 30px;
    }
  }

  .mega-col {
    width: 100%;
  }

  .#{$app-brand-prefix}-widget {
    .widget-subcategories {
      ul {
        @include rtl-padding(3px, 3px, 3px, 7px);
      }
    }
  }
}

/* OFF CANVAS MENU - SHOW CANVAS = NO */
@media (max-width: 991px) {
  .leo-megamenu {
    &.disable-canvas {
      .dropdown-menu {
        @include box-shadow(none);
      }

      .navbar-nav>li {
        &.aligned-fullwidth {
          position: relative;
        }

        >a {
          padding: $medium-space 0;

          &:after {
            display: none;
          }
        }

        .caret {
          cursor: pointer;
          position: absolute;
          top: 13px;
          line-height: 30px;
          display: block;
          @include size(30px, 30px);
          @include rtl-right(0);

          &:before {
            content: "add";
            font-family: $font-icon-2;
            position: absolute;
            font-size: 20px;
            font-weight: normal;
            text-align: center;
            color: $white;
            z-index: 1001;
          }
        }
      }
    }

    .collapse {
      @include rtl-text-align-left();

      .navbar-nav {
        @include rtl-text-align-left();
        height: auto;
      }

      .navbar-nav {
        >li {
          &.aligned-fullwidth {
            position: relative;
          }

          >.dropdown-menu {
            @include media-breakpoint-down(md) {
              .mega-col {
                max-width: 100%;
                flex: 0 0 100%;
              }
            }
          }
        }

        .nav-item {
          &.dropdown {
            &.open-sub {
              >.caret {
                &:before {
                  content: "remove";
                }
              }
            }
          }

          &.dropdown-submenu {
            .caret {
              &:before {
                top: -13px;
              }
            }

            &.open-sub {
              >.caret {
                &:before {
                  content: "remove";
                }
              }
            }
          }
        }

        .dropdown-toggle::after {
          display: none;
        }
      }

      .dropdown-submenu {
        >.dropdown-menu {
          width: 100%;
          position: relative;
          @include rtl-left(0);
          @include box-shadow(none);
        }
      }
    }
  }
}

/*** Responsive part ***/
@include media-breakpoint-down(md) {
  .ApMegamenu {
    >.navbar {
      position: static;
    }
  }

  .leo-megamenu {
    &.disable-canvas {
      .navbar-nav {
        margin: 0;

        >li {
          >a {
            padding: 15px;
            display: inline-block;
            letter-spacing: 1px;
          }
        }

        .nav-item {
          .caret {
            cursor: pointer;
            position: absolute;
            top: 9px;
            line-height: 30px;
            display: block;
            @include size(30px, 30px);
            @include rtl-right(0);

            &:before {
              content: "add";
              font-family: $font-icon-2;
              position: absolute;
              font-size: 20px;
              font-weight: normal;
              text-align: center;
              color: #F0F0F0;
              z-index: 1001;
            }
          }
        }
      }

      .leo-top-menu {
        background: #353535;
        position: absolute;
        top: 100%;
        z-index: 99;
        left: $small-space;
        right: $small-space;
      }

      .dropdown-toggle::after {
        display: none;
      }
    }
  }
}


//Style leo widget general
.leo-widget {
  .widget-category_image {
    .level0 li {
      position: relative;
      display: inline-block;
      min-width: 140px;

      ul {
        background: $white;
        border: 1px solid #c3c3c3;
        position: absolute;
        top: -1px;
        z-index: 99;
        display: none;
        @include rtl-left(100%);
        @include transition(all 0.3s ease);

        li {
          padding: 5px 10px;
        }
      }

      &:hover>ul {
        display: block;
      }
    }

  }
}

.navbar-header {
  .navbar-toggler {
    height: 40px;
    width: 40px;
    padding: 0;
    border: 1px solid #333;
    margin: 20px auto;
    border-radius: 0;

    &:focus,
    &:hover {
      border-color: $theme-color-default;
      background: $theme-color-default;
      color: #fff;
    }
  }
}

.off-canvas-active {
  .navbar-header {
    .navbar-toggler {
      border-color: $theme-color-default;
      background: $theme-color-default;
      color: #fff;
    }
  }
}

.off-canvas-button-megamenu {
  font-size: 0px;
  color: transparent;
  margin: 15px 20px 0;

  .off-canvas-nav {
    display: block;
    outline: 0;

    &:before {
      content: "\e646";
      font-family: 'themify';
      font-size: 14px;
      color: #333;
    }
  }

  &:focus .off-canvas-nav:before {
    color: $theme-color-default;
  }
}

.col-menuinfo {
  .widget-raw-html {
    font-size: 20px;
    padding: 25px 0;
    text-align: center;
    color: #333;
    border-top: 1px solid #e5e5e5;
    margin: 10px -20px -20px;
    font-weight: 300;
    background: #fbfbfb;
    line-height: 1.5;

    @media (min-width: 1200px) {
      margin: 30px -25px -25px;
    }

    @media (max-width: 991px) {
      font-size: 16px;
      margin: 10px -20px 0px;
      line-height: 2;
      padding: 20px;
    }

    p {
      margin: 0;
    }

    strong,
    b {
      color: $theme-color-default;
    }

    .shop-now {
      background: #a3de83;
      border-radius: 5px;
      color: #fff;
      font-size: 14px;
      text-transform: uppercase;
      @include rtl-margin(0, 0, 0, 15px);
      padding: 6px 20px;
      transition: all 0.4s cubic-bezier(.44, .13, .48, .87);
      display: inline-block;

      &:hover {
        background: $theme-color-default;
        color: #fff;
      }
    }
  }
}

.box-listdetail .leo-widget .widget-html {
  margin-top: 0;
}