/**
 * @file
 *
 * .is-ultimenu-canvas-off: #header or .region-primary-menu, etc.
 * .is-ultimenu-canvas-on: any sibling of #header.
 *
 * Tips: Use Modernizer.js to have graceful fallback for old browsers.
 */

/** The #header alike element, out of canvas by default, can exist once. */
.is-ultimenu-canvas--active .is-ultimenu-canvas-off {
  left: 0;
  -webkit-transition: -webkit-transform 500ms ease;
  transition: transform 500ms ease;
  transition-delay: 0.01s;
  -ms-transform: translate3d(-120%, 0, 0) scale3d(0.9, 0.9, 0.9);
  -webkit-transform: translate3d(-120%, 0, 0) scale3d(0.9, 0.9, 0.9);
  transform: translate3d(-120%, 0, 0) scale3d(0.9, 0.9, 0.9);
  -ms-transform-origin: 50% 0% 50%;
  -webkit-transform-origin: 50% 0% 50%;
  transform-origin: 50% 0% 50%;
}

.is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-off {
  transition-delay: 0s;
  -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/** Any element below, pushed out of canvas once the #header is in. */
.is-ultimenu-canvas--active .is-ultimenu-canvas-on {
  -webkit-transition: -webkit-transform 500ms ease;
  transition: transform 450ms ease;
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-on {
  -ms-transform: translate3d(320px, 0, 0) scale3d(1, 1, 1);
  -webkit-transform: translate3d(320px, 0, 0) scale3d(1, 1, 1);
  transform: translate3d(320px, 0, 0) scale3d(1, 1, 1);
}

/**
 * 944px with 16px base font.
 * .is-ultimenu-canvas--active is only available if off-canvas is enabled for
 * both desktop and mobile. Or a little later via JS if not. That's why we don't
 * rely on it for the smaller device to avoid FOUC.
 */
@media only screen and (max-width: 58.999em) {
  /** The #header alike element, out of canvas by default, can exist once. */
  .is-ultimenu-canvas .is-ultimenu-canvas-off {
    max-width: 82%;
    -ms-transform: translate3d(210%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform: translate3d(210%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(210%, 0, 0) scale3d(0.9, 0.9, 0.9);
  }

  .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-off {
    -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }

  .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-on {
    -ms-transform: translate3d(82%, 0, 0) scale3d(1, 1, 1);
    -webkit-transform: translate3d(82%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(82%, 0, 0) scale3d(1, 1, 1);
  }
}