/*
 *  menu-full-page.scss
 * -----------------------------------------------
*/
body {
  &.menufullpage-menu-open {
    header#header {
      .tm-fullpage-nav-header {
        .tm-fullpage-nav-header-inner {
          background-color: transparent;
        }
      }
    }
  }
  &.menufullpage-menu-open {
    &.switchable-logo {
      header#header {
        .menuzord-brand {
          .logo-primary {
            display: none;
          }
          .logo-on-sticky {
            display: inline-block;
          }
        }
      }
    }
  }
}


/* menu-full-page plugin code */
body.menu-full-page {
  #fullpage-nav {
    background-color: #171717;
    border-radius: 100%;
    color: white;
    cursor: pointer;
    position: fixed;
    width: 300px;
    height: 300px;
    left: -120px;
    top: -120px;
    opacity: 0;
    z-index: 99;
    @include transition(all .3s ease);
    .fullpage-nav-inner {
      padding: 12% 5% 15%;
      @media (max-width: $ele-breakpoint-tablet-max) {
        padding: 150px 7%;
      }
      .fullpage-nav-menu {
        ul {
          list-style: none;
          li {
            transition: all 0.4s ease;
            padding: 10px 0;
            position: relative;
            opacity: 0;
            @include transition(all .3s ease);
            a {
              color: #fff;
              font-size: 36px;
              line-height: 1.5;
              text-decoration: none;
              font-weight: $font-weight-bold;
              padding: 0;
              position: relative;
              @include media-breakpoint-down(md) {
                font-size: 36px;
              }
              &:hover {
                color: var(--hover-theme-color);
              }
              .indicator {
                opacity: 0.5;
                font-size: 28px;
                margin-left: 20px;
                vertical-align: middle;
                i {
                  display: inline-block;
                  @include transition(all .3s ease-in-out);
                }
              }
            }
            &:hover:after a {
              position: absolute;
              content: '';
              color: #fff;
            }
            .dropdown, .megamenu {
              margin: 10px 0;
              display: none;
              li {
                padding: 0;
                margin: 0;
                a {
                  font-size: 19px;
                  line-height: 1.6;
                  font-weight: normal;
                  color: #fff;
                  display: block;
                  float: none;
                  margin: 0;
                  overflow: hidden;
                  padding: 5px 0;
                  box-sizing: border-box;
                  -webkit-transition: all .4s ease-in-out;
                  -moz-transition: all .4s ease-in-out;
                  transition: all .4s ease-in-out;
                  &:hover {
                    color: var(--hover-theme-color);
                    margin-left: 10px;
                  }
                }
              }
            }
            &.open-sub-menu {
              > a {
                color: var(--theme-color1);
                .indicator {
                  i {
                    @include rotate(90);
                  }
                }
              }
            }
          }
          ul {
            //display: none;
            li a {
              &:hover {
                color: #888;
              }
            }
          }
        }
      }
      .menufullpage-nav-sidebar {
        margin-top: 30px;
        .menufullpage-nav-sidebar-inner {
          position: relative;
          opacity: 0;
          @include transition(all .3s ease);
        }
      }
    }

    &.menufullpage-menu-open {
      border-radius: 0;
      padding: 0 !important;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      opacity: 1;
      @include transition(all .3s ease);
      .fullpage-nav-menu {
        ul {
          li {
            animation: fadeInUp .5s ease-in-out forwards;
            animation-delay: .35s;
          }
        }
      }
      .menufullpage-nav-sidebar {
        .menufullpage-nav-sidebar-inner {
          animation: fadeInUp .5s ease-in-out forwards;
          animation-delay: .35s;
        }
      }
    }
  }

  .fullpage-nav-toggle.menufullpage-menu-open + #fullpage-nav {
    opacity: 1;
    z-index: 1011;
    > ul {
      margin-top: 70px;
    }
  }

  .fullpage-nav-toggle {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    font-size: 0;
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    @include transition(background 0.3s);
    background-color: transparent;
    
    i {
      text-decoration: none;
      font-size: 40px;
      color: #fff;
    }
    &:focus {
      outline: none;
    }
    span {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 25px;
      height: 4px;
      border-radius: 2px;
      background: #333;
      @include transition(background 0 0.3s);
      &:before, &:after {
        position: absolute;
        display: block;
        left: 0;
        width: 100%;
        height: 4px;
        border-radius: 0;
        background-color: #333;
        content: "";
        -webkit-transition-duration: 0.3s, 0.3s;
        transition-duration: 0.3s, 0.3s;
        -webkit-transition-delay: 0.3s, 0;
        transition-delay: 0.3s, 0;
      }
      &:before {
        top: -8px;
        -webkit-transition-property: top, -webkit-transform;
        transition-property: top, transform;
      }
      &:after {
        bottom: -8px;
        -webkit-transition-property: bottom, -webkit-transform;
        transition-property: bottom, transform;
      }
    }

    /* active state, i.e. menu open */
    &.menufullpage-menu-open {
      z-index: 1111;
      span {
        background: none;

        &:before, &:after {
          background-color: #fff;
          -webkit-transition-delay: 0, 0.3s;
          transition-delay: 0, 0.3s;
        }
        &:before {
          top: 0;
          @include rotate(45);
        }
        &:after {
          bottom: 0;
          @include rotate(-45);
        }
      }
    }
  }
}


body.menu-full-page {
  .fullpage-nav-toggle {
    background: #fff;
    box-shadow: 0 0 40px rgba(0,0,0,0.15);
    width: 50px;
    height: 50px;
    margin-top: 4px;
    span {
      top: 49%;
      left: 24px;
      right: 24px;
      height: 4px;
      width: 20px;
      border-radius: 2px;
      background: #333;
    }
    &.menufullpage-menu-open {
      span {
        background: #fff;
        &:before, &:after {
          background-color: #111;
        }
      }
    }
  }
}

header#header {
  &.header-layout-type-header-mobile-nav-floating {
    .menuzord-brand {
      float: none;
    }
    .tm-fullpage-nav-header-inner {
      position: fixed;
      background-color: transparent;
      width: 100%;
    }
  }
}
header#header {
  .tm-fullpage-nav-header {
    z-index: 99;
    .tm-fullpage-nav-header-inner {
      position: relative;
      background-color: #fff;
      z-index: 1000;
      transition: all .3s ease;
      .tm-fullpage-nav-header-container {
        padding: 30px 80px;
        @media (max-width: $ele-breakpoint-tablet-max) {
          padding: 30px;
        }
        @include media-breakpoint-down(lg) {
          padding: 20px;
        }
        .menuzord-brand {
          margin: 0;
          img {
            @include media-breakpoint-down(md) {
              max-height: 25px;
            }
          }
        }
      }
    }
  }
}