/* Collaps Menu Breakpoint */
@media @md-screen {
  .navbar-collapse.collapse {
    display : none !important;
    }

  .navbar-header {
    margin : 0;
    float  : left;
    }
  }

/* Navigation*/
/*-----------------------------------------*/
/*mobile menu trigger*/

.mobile-menu-trigger {
  margin-top  : 12px;
  margin-left : 30px;

  @media @ms-screen {
    margin-left : 15px;
    }
  }

.navbar-toggle {
  position      : relative;
  z-index       : 101;
  width         : 20px;
  height        : 14px;
  cursor        : pointer;
  display       : inline-block;
  float         : none;
  padding       : 0;
  margin        : 0;
  border        : 0;
  border-radius : 0;

  &::after,
  &::before {
    content    : "";
    position   : absolute;
    height     : 1px;
    right      : 0;
    background : @white;
    width      : 15px;
    .transition(all .2s linear);
    }

  &::before {
    top : -2px;
    }

  &::after {
    bottom : -1px;
    }

  &:hover {
    &::before,
    &::after {
      width : 20px;
      }
    }

  i {
    position   : relative;
    height     : 1px;
    width      : 20px;
    top        : 6px;
    display    : block;
    background : @white;

    &::after,
    &::before {
      content    : "";
      position   : absolute;
      height     : 1px;
      right      : 0;
      width      : 17px;
      background : @white;
      .transition(all .2s linear);
      }

    &::before {
      top : -4px;
      }

    &::after {
      bottom : -4px;
      }
    }

  &:hover,
  &:hover i {
    &::before,
    &::after {
      width : 20px;
      }
    }

  /*CLOSE*/

  &.trigger-close {
    z-index : 301;
    i {
      background : transparent;

      &::before {
        .rotate(45deg);
        top : 0;
        }

      &::after {
        .rotate(-45deg);
        bottom : 0;
        }
      }

    }

  }

/*menu-trigger*/

.navbar-collapse {
  padding : 0;
  }

/*--------------------------------
 * Navbar Global
 *-------------------------------*/

.navbar {
  width      : 100%;
  min-height : auto;
  border     : 0;
  margin     : 0;
  .rounded(0);
  .mainnav {
    position : relative;
    .navbar-header {
      a {
        display : inline-block;
        }
      }
    }

  /* Navbar horizonal
  ---------------------------------------------------------*/
  &.navbar-horizontal {
    background : fade(@black,5%);
    .navbar-nav > li {
      display : inline-block;
      float   : none;
      }

    /*Navbar dropdowns
    ---------------------*/
    .submenu-inner,
    .submenu-sub-inner {

      }

    li.dropdown {
      &:hover {
        > .submenu-wrapper {
          pointer-events : auto;
          &.no-pointer-events {
            display : block;
            }
          > .submenu-inner {
            opacity : 1;
            .translateY(0);
            }
          }
        > .submenu-sub-wrapper {
          pointer-events : auto;
          > .submenu-sub-inner {
            opacity : 1;
            .translateX(0);
            }
          }
        }
      &.menu-animating > .submenu-wrapper {
        overflow : hidden;
        }
      /*submenu-wrapper for 2nd level menu*/
      > .submenu-wrapper {
        left        : 0;
        top         : 100%; /* Will change on theme specific */
        padding-top : 0;

        /*IE pointer events*/
        &.no-pointer-events {
          display : none;
          }

        /*submenu-inner*/
        > .submenu-inner {
          .translateY(15px);
          .transition(all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86));
          background : no-repeat right bottom @content-bg-color;
          }
        }
      /*submenu-wrapper*/

      /*submenu-sub-wrapper for 3rd level*/
      > .submenu-sub-wrapper {
        left : 100%;
        top  : -5px;

        /*submenu inner in 3rd level menu*/
        > .submenu-sub-inner {
          opacity : 0;
          .translateX(15px);
          .transition(all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86));
          }
        }
      /*caret position fixing*/
      > a span {
        margin-left : 3px;
        color       : lighten(@menu-color, 40%);
        }
      }
    /*li.dropdown*/

    li {
      &.has-megamenu {
        position : static;
        .megamenu-inner > ul {
          padding : 0;
          }
        }
      &.dropdown.has-megamenu {
        max-width : 100%;
        > .submenu-wrapper {
          top         : 59%;
          left        : 0;
          padding-top : 16px;
          }
        }
      }
    }
  /*end horizontal navbar*/

  /* Common style of navbar
  ----------------------------------------------------*/
  .navbar-nav {
    float      : none;
    text-align : center;
    > li {
      display : block;
      > a {
        font-size      : 14px;
        text-transform : uppercase;
        font-weight    : 700;
        display        : block;
        padding        : 1em 1.2em;
        color          : @menu-color;
        .rounded(2px);
        &:hover {
          color : fade(@menu-color, 70%);
          }
        }

      &:hover a {
        color : fade(@menu-color, 70%);
        }
      }

    li.dropdown {
      &.menu-animating > .submenu-wrapper {
        overflow : hidden;
        }
      //submenu-wrapper for 2nd level menu
      > .submenu-wrapper {
        position       : absolute;
        display        : block;
        z-index        : 1000;
        pointer-events : none;
        text-align     : left;

        //IE pointer events
        &.no-pointer-events {
          display : none;
          }

        //submenu-inner
        > .submenu-inner {
          display   : inline-block;
          width     : 100%;
          min-width : 250px;
          opacity   : 0;
          }
        }
      //submenu-wrapper

      //submenu-sub-wrapper for 3rd level
      > .submenu-sub-wrapper {
        position       : absolute;
        display        : block;
        z-index        : 1000;
        width          : 100%;
        pointer-events : none;

        //submenu inner in 3rd level menu
        > .submenu-sub-inner {
          background-color : @content-bg-color;
          opacity          : 0;
          }
        }
      }

    // sub-dropdown-menu
    .sub-dropdown-menu {
      list-style      : none;
      padding         : 0;
      background-clip : padding-box;
      border-top      : 2px solid @theme-color;
      .box-shadow(0 0 10px fade(@black, 10%));
      li {
        border-bottom : 1px solid fade(#000000, 10%);
        &:last-child {
          border-bottom : 0;
          }
        a {
          color          : @content-color;
          padding        : 8px 20px;
          font-size      : .8rem;
          line-height    : 1.5rem;
          display        : block;
          text-transform : capitalize;
          position       : relative;
          overflow       : hidden;
          letter-spacing : normal;

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

          span {
            position : absolute;
            right    : 20px;
            top      : 13px;
            color    : fade(@black, 30%);
            }

          }
        }
      }
    }
  /* end common style of navbar*/

  /* Common style of mega menu
  ---------------------------------------------------*/
  .megamenu-container {
    margin  : 0 auto;
    padding : 20px;

    .megamenu-widget {
      ul.menu li a {
        padding : 5px 0;
        }
      p {
        font-size   : 15px;
        line-height : 28px;
        }
      h2 {
        margin         : 0 0 15px 0;
        font-size      : 13px;
        line-height    : 30px;
        text-transform : uppercase;
        font-weight    : 700;
        }
      /*wiget styles in megamenu*/
      &.widget {
        background     : none;
        margin         : 0;
        padding        : 20px 10px;
        letter-spacing : normal;
        ul li {
          list-style    : none;
          border-bottom : 0;
          line-height   : 35px;
          a {
            display   : block;
            padding   : 5px 0;
            font-size : 13px;
            &:hover {
              color      : @theme-color;
              background : transparent;
              }
            &::before {
              display : none;
              }
            }
          }
        }
      /* .widget*/

      &.widget_tag_cloud .tagcloud {

        line-height : 18px;
        a {
          display        : inline-block;
          padding        : 3px 10px 0;
          line-height    : 16px;
          text-transform : uppercase;
          }
        }

      /*open menu*/
      &.widget_nav_menu {
        > div {
          ul {
            z-index    : 0;
            visibility : visible;
            position   : relative;
            overflow   : hidden;
            width      : 100%;
            height     : 100%;
            transition : transform 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */

            &.show-child {
              visibility : hidden;
              }

            }

          .menu-item-has-children > ul {
            position : absolute;
            margin   : 0;
            top      : 0;
            .translateX(100%);

            &.show-child {
              z-index          : 1;
              visibility       : visible;
              background-color : @content-bg-color;
              .rounded(2px);
              .translateX(0);
              }

            &.sub-menu {
              a {
                padding : 5px 10px;

                }

              }
            }
          }

        .child-opener {
          position    : absolute;
          right       : 0;
          width       : 100%;
          height      : 24px;
          line-height : 25px;
          text-align  : right;
          color       : fade(@black, 30%);
          font-size   : 16px;
          &:hover {
            color : @theme-color;
            }
          }

        .child-closer {
          font-size      : 11px;
          text-transform : uppercase;
          color          : #8C8C8C;

          i {
            width  : 8px;
            margin : 0;
            }
          }
        }
      /*mega menu open*/

      }
    /*end megamenu-widget*/

    }
  /* end common style of megamenu*/

  }

/*end navbar*/

.admin-bar .navbar.sticky-menu {
  top : 32px;
  }

.menu-sticky li.dropdown.has-megamenu > .submenu-wrapper {
  top : 48px;
  }

/*menu active*/
.nav > li > a:hover,
.nav > li > a:focus,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color : transparent;
  color            : fade(@menu-color, 70%)
  }

li.current-menu-ancestor > a,
li.has-megamenu.open > a,
li.menu-item-has-children.open > a,
li.current_page_item > a,
li.current-menu-parent > a {
  background : transparent;
  color      : fade(@menu-color, 70%) !important;
  }

.sub-dropdown-menu li.has-megamenu.open > a,
.sub-dropdown-menu li.menu-item-has-children.open > a,
.sub-dropdown-menu li.current-menu-ancestor > a,
.sub-dropdown-menu li.current-menu-parent > a,
.sub-dropdown-menu li.current-menu-item > a {
  color      : @white !important;
  background : @theme-color;
  }

.sub-dropdown-menu .megamenu-widget li.current-menu-item > a,
.sub-dropdown-menu .megamenu-widget li.current-menu-ancestor > a,
.sub-dropdown-menu .megamenu-widget li.current-menu-parent > a {
  color      : @theme-color !important;
  background : transparent;
  }

/*Menu fixing for ie9 & ie10
--------------------------*/

.ie9 li.dropdown > .submenu-wrapper > .submenu-inner,
.ie10 li.dropdown > .submenu-wrapper > .submenu-inner,
.ie10 li.dropdown > .submenu-sub-wrapper > .submenu-sub-inner,
.ie9 li.dropdown > .submenu-sub-wrapper > .submenu-sub-inner {
  display : none;
  }

.ie9 li.dropdown:hover > .submenu-wrapper > .submenu-inner,
.ie10 li.dropdown:hover > .submenu-wrapper > .submenu-inner,
.ie9 li.dropdown:hover > .submenu-sub-wrapper > .submenu-sub-inner,
.ie10 li.dropdown:hover > .submenu-sub-wrapper > .submenu-sub-inner {
  display : block;
  }

/*
IMPORTANT FOR DEFAULT NAVIGATION HIDING
---------------------------------------------*/

/* ----------------------------------------------------------------
Offcanvas menu style
-------------------------------------------------------------------*/

.hippo-offcanvas-container {
  padding-top : 40px;
  background  : lighten(@black, 10%);
  }

.menu-wrapper {
  /*position : absolute;
  top      : 0;
  left     : -10000px;
  display  : none;*/

  @media @md-screen {
    /*display : block;*/
    }

  > h2 {
    text-transform : uppercase;
    color          : rgba(255, 255, 255, 0.37);
    font-weight    : 700;
    background     : fade(@theme-color, 80%);
    padding        : 0 15px;
    margin         : 0;
    font-size      : 14px !important;
    letter-spacing : 1px;
    line-height    : 45px !important;
    .box-shadow(0 1px 10px rgba(0, 0, 0, .3));
    }

  .close-sidebar {
    font-size   : 30px;
    font-weight : 200;
    color       : #FFFFFF;
    text-shadow : none;
    .opacity(1);
    float       : none;
    text-align  : center;
    position    : absolute;
    right       : 0;
    top         : 0;
    z-index     : 100;
    width       : 40px;
    height      : 40px;
    line-height : 40px;
    background  : transparent;
    .transition(all 400ms);

    &:hover,
    &:focus {
      .opacity(.5);
      outline : none;
      }
    }

  /* Offcanvas Widget Style */

  .offcanvasmenu {
    a {
      color : @white;
      &:hover {
        background : transparent;
        color      : fade(@white, 70%);
        }
      }
    .widget-title {
      margin         : 15px;
      font-size      : 1rem;
      color          : fade(@white, 30%);
      text-transform : uppercase;
      border         : 0;
      a {
        color : @white;
        }
      }

    /* Social Share */
    .social-shares {
      margin : 0 15px;

      li {
        margin  : 0;
        padding : 0;
        a {
          width         : 30px;
          height        : 30px;
          display       : block;
          text-align    : center;
          line-height   : 30px;
          border-bottom : 1px solid transparent;
          background    : fade(@white, 3%);
          .transition(all .3s);
          &:hover {
            text-decoration : none;
            color           : @black;
            background      : @theme-color;
            border-bottom   : darken(@theme-color, 15%);
            }
          }
        }
      }

    /* Widget Main Menu  */

    &.widget_nav_menu {
      border-top : 1px solid fade(@white, 5%);
      li {
        margin : 0;
        }
      ul.menu > li {
        > a {
          display        : block;
          padding        : 10px 15px;
          color          : @white;
          text-transform : uppercase;
          font-size      : 0.875rem;
          font-weight    : 500;
          border-bottom  : 1px solid fade(@white, 5%);

          &:hover,
          .active {
            background      : transparent;
            color           : fade(@white, 50%);
            border-bottom   : 1px solid fade(@white, 5%);
            text-decoration : none;
            }
          }

        /* Parent li background */
        &:hover {
          background : transparent;
          }

        /* Parent Menu Right Carete */
        &.menu-item-has-children {
          position : relative;
          &::before {
            font-family : 'Material-Design-Iconic-Font';
            font-size   : 18px;
            content     : "\f2f9";
            position    : absolute;
            right       : 10px;
            top         : 9px;
            }
          }

        /*Child Menu Style*/
        > .sub-menu {
          background-color : rgba(0, 0, 0, .1);
          margin           : 0;

          li {
            a {
              color          : #FFFFFF;
              font-size      : 0.750rem;
              text-transform : uppercase;
              display        : block;
              padding        : 5px 15px;
              border-bottom  : 1px solid fade(@white, 5%);
              &:hover {
                color : fade(@white, 50%);
                }
              }
            }
          }
        }

      .menu {
        li.current-menu-parent > a,
        li.current-menu-item > a,
        li.current_page_item > a {
          background : transparent;
          color      : @theme-color;
          }
        }
      }

    /* List Style */
    &.widget_archive li,
    &.widget_categories li,
    &.widget_pages li,
    &.widget_meta li,
    &.widget_product_categories li {
      border-bottom : 1px solid rgba(82, 75, 75, 0.19) !important;
      padding       : 5px 15px;

      a {
        color : fade(@white, 50%);
        &:hover {
          color : @theme-color;
          }
        }

      .children {
        margin-left : 15px;
        li {
          padding       : 5px 0;
          border-bottom : 0 !important;
          }
        }
      }

    /* Select List Style*/
    .hippo-select-wrapper {
      background-color : rgba(0, 0, 0, 0.05);
      .transition(all .3s);

      &:hover {
        .box-shadow(0 0 7px rgba(0, 0, 0, .3));
        }

      .hippo-select-contents {
        margin       : 0 10px;
        border-color : fade(@white, 10%);

        .hippo-selected-item {
          padding-left : 15px;
          }

        i {
          right : 15px;
          top   : 0;
          }
        }

      .hippo-select-list li {
        padding : 0 20px;
        &:last-child {
          border-bottom : 0 !important;
          }

        &:hover {
          color : @theme-color;
          }
        }
      }

    /* Recent Comments */

    &.widget_recent_comments {
      .recentcomments {
        border-bottom : 1px solid rgba(82, 75, 75, 0.19) !important;
        padding       : 0 15px;
        color         : fade(@white, 50%) !important;
        a {
          color : fade(@white, 50%);
          &:hover {
            color : @theme-color;
            }
          }

        }
      }

    /* Recent Post */

    &.widget_recent_entries {
      li {
        padding : 0 15px;
        }
      a {
        color : fade(@white, 50%);
        }
      }

    /* calender */

    &.widget_calendar #calendar_wrap {
      padding          : 15px;
      background-color : rgba(0, 0, 0, .1);
      }

    /* RSS */

    &.widget_rss {
      li {
        padding          : 15px;
        border-bottom    : 1px solid rgba(0, 0, 0, 0.16);
        background-color : rgba(0, 0, 0, .1);
        margin           : 0;

        .rssSummary {
          color : fade(@white, 50%);
          }

        &:nth-child(even) {
          background : transparent;
          }

        a {
          color       : @theme-color;
          font-weight : 700;

          &:hover {
            color : fade(@theme-color, 60%);
            }
          }
        }
      }

    /* Widget Search */

    &.widget_search {
      margin         : 0 15px 20px;
      padding-bottom : 0;
      h2 {
        margin : 0;
        }
      .form-control {
        background : transparent !important;
        color      : @white;
        border     : 1px solid fade(@white, 30%);
        .rounded(0);
        }
      button {
        color : fade(@white, 50%);
        &:hover {
          color : @theme-color;
          }
        }
      }

    /* Widget Text */
    &.widget_text {
      .textwidget {
        margin : 0 15px;
        color  : fade(@white, 70%);

        strong {
          color : @white;
          }
        }
      }

    /* Widget Tag Cloud */

    &.widget_tag_cloud,
    &.widget_product_tag_cloud {
      .tagcloud {
        margin : 0 15px;
        a {
          background : @theme-color;
          color      : @white;
          border     : 0;

          &:hover {
            background : darken(@theme-color, 30%);
            color      : @white;
            }
          }

        }
      }

    /* Flickr Photo Gallery */

    &.widget_hippo_flickr_photo {
      padding : 0 10px;
      .flickr-photo-stream li {
        margin : 0;
        }
      }
    }
  /* End Offcanvas widget */

  }

