/* ==========================================================================
    Style Main Menu
========================================================================== */
/*
-----> Minimum width of 992 pixels.
*/

@media screen and (min-width: 992px) {
  #menu-mobile, .cs-menu-toggle {
    display: none;
  }
  #cshero-header-navigation {
    position: static;
    .collapse {
      display: block;
    }
  }
  #cshero-header-navigation .main-navigation {
    div.nav-menu > ul {
      width: 100%;
    }
    .menu-main-menu {
      float: right;
      > ul > li, > li {
        vertical-align: top;
        padding: 0 16px;
        display: inline-block;
        > a {
          font-weight: 700;
          font-size: 13px;
          color: $color_dark;
          text-transform: uppercase;
          line-height: $nav_menu;
          i {
            display: block;
            width: 100%;
            line-height: 0;
            margin-bottom: 6px;
            @include transition(all 420ms linear 0ms);
            + .menu-title {
              @include transform(translateY(25px));
              display: block;
            }
          }
          .menu-title {
            position: relative;
            .title-attribute {
              background-color: $primary_color;
              border-radius: 1px;
              color: #fff;
              display: inline-block;
              font-size: 9px;
              line-height: 1;
              padding: 3px 4px;
              position: absolute;
              right: 4px;
              bottom: 22px;
              &:before {
                border-color: $primary_color transparent transparent;
                border-style: solid;
                border-width: 3px;
                bottom: -6px;
                content: "";
                left: 50%;
                position: absolute;
                transform: translate(-50%, 0px);
              }
            }
          }
          &.onepage.current {
            color: $primary_color;
          }
        }
        > ul.sub-menu {
          opacity: 0;
          @include transition(opacity 0.4s ease 0s);
        }
        &:hover {
          > ul.sub-menu {
            opacity: 1;
          }
        }
        &.current-menu-item > a, &.current-menu-ancestor > a, &:hover > a {
          .menu-title:before {
            opacity: 1;
            filter: alpha(opacity=1);
            width: 10px;
          }
        }
        ul li {
          &.current-menu-item > a, &.current-menu-ancestor > a {
            color: $primary_color;
          }
        }
      }
    }
  }
  #cshero-header-navigation .main-navigation li ul:not(.wg-menu-item) {
    background-color: #fff;
    margin: 0;
    padding: 11px 0;
    position: absolute;
    top: 100%;
    z-index: 1;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    min-width: 210px;
    li.menu-item-has-children > a:after {
      content: "\f105";
      font-family: FontAwesome;
      font-size: inherit;
      float: right;
      color: #7f7f7f;
      font-weight: normal;
    }
    &.back {
      right: 0;
      left: inherit;
    }
  }
  /* Menu Stick Wall */
  #cshero-header-navigation .main-navigation li ul ul:not(.wg-menu-item) {
    top: -11px;
    left: 100%;
    &.back {
      right: 100%;
      left: auto;
      ul:not(.back) {
        right: 100%;
        left: auto;
      }
      ul.back {
        left: 100%;
        right: auto;
        ul:not(.back) {
          left: 100%;
          right: auto;
        }
        ul.back {
          right: 100%;
          left: auto;
        }
      }
    }
  }
  /* End Menu Stick Wall */
  #cshero-header-navigation .main-navigation {
    ul li:hover > ul, ul li:focus > ul, .focus > ul {
      border-left: 0;
      clip: inherit;
      overflow: inherit;
      height: inherit;
    }
    li ul li {
      padding: 0 30px;
      a {
        display: block;
        padding: 13px 0;
        color: #5e5e5e;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        border-bottom: 1px solid #ececec;
        text-align: left;
        &:hover {
          color: $primary_color;
        }
      }
    }
    li ul.sub-menu li:last-child > a {
      border: none;
    }
    ul.sub-menu li {
      position: relative;
    }
  }
  /* End Menu Sub Level */

  /* Start Mega Menu */
  #cshero-header-navigation .main-navigation {
    .columns2 > li:nth-of-type(2n+1),
    .columns3 > li:nth-child(3n+1),
    .columns4 > li:nth-child(4n+1),
    .columns5 > li:nth-child(5n+1) {
      clear:left;
      border-right:0px solid transparent;
    }
    .columns5 > li {
      width:20% !important;
    }
    .columns4 > li{
      width:25% !important;
    }
    .columns3 > li{
      width:33.3344% !important;
    }
    .columns2 > li{
      width:50% !important;
    }
    [class*="columns"]  {
      padding: 11px 19px 0 19px !important;
      > li {
        float: left;
        padding: 0;
        ul li {
          padding: 0 11px;
          ul.sub-menu li {
            padding: 0 30px;
          }
        }
        > a {
          width: 100%;
          border-bottom: none;
          &:after {
            content: "" !important;
          }
        }
      }
    }
    .menu-main-menu li.has_full_width {
      position: inherit;
    }
    .menu-main-menu li:not(.group) > ul.drop_full_width.sub-menu {
        left: 0;
        margin: auto;
        max-width: 1140px !important;
        right: 0;
        width: 100% !important;
        .sub-menu {
          background-color: transparent;
        }
        > li > a {
          padding-left: 11px;
          padding-right: 11px;
          span.menu-title {
            color: #5e5e5e;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
            &:before {
              content: "";
            }
          }
          &:hover {
            background-color: transparent;
          }
        }
    }
    .menu-main-menu li:not(.group) > ul.drop_to_right.sub-menu {
        left: auto;
        right: 90px;
        margin: auto;
        .sub-menu {
          background-color: transparent;
        }
        > li > a {
          span.menu-title {
            color: #ccc;
            text-transform: none;
            font-weight: bold;
            font-size: 14px;
            &:before {
              content: "";
            }
          }
          &:hover {
            background-color: transparent;
          }
        }
    }
    li.group > ul.sub-menu {
      display: block;
      float: left;
      left: 0;
      position: relative;
      width: 100%;
      height: inherit;
    }
    ul.multicolumn > li {
      ul.sub-menu ul.sub-menu {
        background-color: #fff !important;
        opacity: 0;
        @include transition(opacity 0.4s ease 0s);
      }
      ul.sub-menu > li:hover > ul.sub-menu {
        opacity: 1;
      }
      > ul.sub-menu {
        padding-bottom: 0;
      }
      &:hover {
        position: relative;
        z-index: 10;
      }
      &.hidden-menu-item > a {
        display: none;
      }
      .sub-menu.back {
        right: 0;
      }
    }
    ul.standar-dropdown li {
      ul.sub-menu {
        opacity: 0;
        @include transition(opacity 0.4s ease 0s);
      }
      &:hover {
        ul.sub-menu {
          opacity: 1;
        }
      }
    }
  }
  /* End Start Mega Menu */
}

/*
-----> Minimum width of 992 pixels.
*/

/*
-----> Max width of 992 pixels.
*/
@media screen and (max-width: 992px) {
  #cshero-header-navigation {
    text-align: left;
    &.collapse {
      background: rgba(34,34,34,0.9);
      position: absolute;
      top: $nav_menu;
      left: 15px;
      right: 15px;
      width: inherit;
    }
  }
  .no-trans #cshero-header-navigation.collapse {
    top: $nav_menu + 15px;
  }
  #cshero-header #cshero-menu-mobile {
    display: block;
    i {
      background: $primary_color;
      color: #fff;
      cursor: pointer;
      font-size: 26px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      width: 45px;
      position: absolute;
      top: 50%;
      @include transform(translate(0px, -50%));
      &.cms-icon-menu {
        right: 15px;
      }
      &:hover {
        background: #333;
      }
    }
    .page-popup-wrapper {
      position: static !important;
      .contact-page i {
        right: 125px;
        left: inherit;
      }
      .search-page i {
        right: 70px;
      }
    }
  }
  #cshero-header-navigation .main-navigation div.nav-menu > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: all 500ms ease;
    li {
      list-style: none;
      a {
        display: block;
        color: #5e5e5e;
        &:hover, &:focus {
          color: #21759b;
        }
      }
    }
  }
  .collapse .main-navigation div.nav-menu > ul {
    display: block;
    max-height: 2000px;
  }
  #cshero-header #cshero-header-navigation .main-navigation {
    padding: 15px 0;
    .menu-main-menu {
      > li > a i {
        display: none;
      }
      li {
        line-height: 31px;
        a {
          background: transparent;
          color: #999;
          font-size: 15px;
          font-weight: normal;
        }
      }
    }
    ul.sub-menu {
      width: 100% !important;
      margin: 0;
      padding-left: 20px;
    }
    li {
        &.current-menu-item > a, &.current-menu-parent > a, &.current-menu-ancestor  > a {
        color: #fff !important;
      }
    }
    .title-attribute {
      display: none !important;
    }
  }
  /* Dropdown Sub Menu */
  .cs-menu-toggle {
    display: block;
    color: #999;
    cursor: pointer;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 30px;
    font-size: 18px;
    background-color: rgba(255, 255, 255, 0.03);
    @include border-radius(3px);
    @include transition(all 300ms linear 0ms);
    &:before {
      content: "\f105";
      font-family: FontAwesome;
    }
    &:hover {
      color: #fff;
    }
  }
  #cshero-header-navigation .main-navigation .menu-main-menu > li {
    position: relative;
    li {
      position: relative;
    }
    a {
      display: block;
      border-bottom: none;
      font-size: 16px;
      margin: 0 0 10px;
      text-transform: none;
      &:hover {
        color: #fff !important;
      }
    }
    ul li a {
      font-size: 15px;
    }
    ul.sub-menu {
      display: none;
      padding-left: 10px;
      @include transition(max-height 600ms linear 0ms);
      &.submenu-open {
        max-height: 1000px;
        + .cs-menu-toggle {
          background-color: rgba(255, 255, 255, 0.1);
          &:before {
            content: "\f107";
          }
        }
      }
    }
  }
  .mobile-menu-no-dropdown {
    #cshero-header-navigation .main-navigation .menu-main-menu > li ul.sub-menu {
      + .cs-menu-toggle  {
        display: none;
      }
    }
  }
}
/*
-----> End Max width of 992 pixels.
*/


/* ==========================================================================
  End Style Main Menu
========================================================================== */