header.site-header {
  // position: absolute;

  /*----------------------------------------------------------------------------*\
    Headhesive Specific Styles
  /*----------------------------------------------------------------------------*/

  &.header--clone {
    z-index: 7;

    .header-inner {
      &:before,
      &:after {
        @include breakpoint(medium down) {
          opacity: 1;

          @include transition(opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1));
          transition-delay: 0.3s;
        }
      }

      .header-wrapper {
        .header-sections {
          .site-branding {
            a {
              display: inline;
            }
          }
        }
      }

      /* Required styles */
      position: fixed;
      z-index: 7;
      top: 0;
      left: 0;
    }

    &[data-sticky='visible'] {
      z-index: 301;
    }

    &.visible {
      z-index: 301;
    }

    .header-inner {
      /* Additional styles */
      background: #fff;

      @include transform(translateY(-120%));
      .header-wrapper {
        .header-sections {
          .site-branding {
            .site-logo,
            .site-logo-light {
              display: none;
            }

            .sticky-logo {
              display: inline-block;
            }
          }
        }
      }

      &:before {
        opacity: 1;
      }
      &:after {
        opacity: 1;
      }
    }

    .offcanvas_open.offcanvas_top & {
      &:before,
      &:after {
        opacity: 0;
      }
    }
  }

  /**
   * Headhesive stick
   * > `stick` class for the cloned element:
   *
   * @example
   * var options = {
   *   classes {
   *     stick: 'banner--stick';
   *   }
   * }
   */
  &.header--stick {
    .header-inner {
      @include animation(slide-down-rotated 0.7s ease forwards);
    }
  }

  /**
   * Headhesive unstick
   * > `unstick` class for the cloned element:
   *
   * @example
   * var options = {
   *   classes {
   *     unstick: 'banner--unstick';
   *   }
   * }
   */
  &.header--unstick {
    .header-inner {
      @include animation(slide-down-rotated-right 0.5s ease forwards);
    }

    // &:after {
    //   @include box-shadow(0 0 40px rgba(0,0,0,.0));
    // }
  }
}

@-webkit-keyframes slide-down-rotated {
  0% {
    -webkit-transform: translateX(-20px) translateY(-120%) rotate(-7deg);
    transform: translateX(-20px) translateY(-120%) rotate(-7deg);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
}

@keyframes slide-down-rotated {
  0% {
    -webkit-transform: translateX(-20px) translateY(-120%) rotate(-7deg);
    transform: translateX(-20px) translateY(-120%) rotate(-7deg);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
}

@-webkit-keyframes slide-down-rotated-right {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translateY(-20%) rotate(2deg);
    transform: translateY(-20%) rotate(2deg);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  to {
    -webkit-transform: translateY(-120%) rotate(0deg);
    transform: translateY(-120%) rotate(0deg);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes slide-down-rotated-right {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translateY(-20%) rotate(2deg);
    transform: translateY(-20%) rotate(2deg);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  to {
    -webkit-transform: translateY(-120%) rotate(0deg);
    transform: translateY(-120%) rotate(0deg);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}