/**
 * @file
 * See ultimenu.css for details.
 */

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

html.is-ultimenu--hiding .is-ultimenu__canvas-off {
  transition-duration: 600ms;
}

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

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

html.is-ultimenu--hiding .is-ultimenu__canvas-on {
  transition-duration: 400ms;
}

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

/**
 * 944px = 58.999em with 16px base font.
 * We are here at mobile devices.
 */
@media (hover: none) {

  /** The #header alike element, out of canvas by default, can exist once. */
  html.is-ultimenu .is-ultimenu__canvas-off {
    left: 0;
    max-width: 82%;
    transform: translate3d(210%, 0, 0) scale3d(0.9, 0.9, 0.9);
  }

  html.is-ultimenu.is-ultimenu--expanded .is-ultimenu__canvas-off {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }

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