/**
 * @file
 * See ultimenu.css for details.
 *
 * Note the `transform` transitions, it is faster and smoother than `left` ones.
 */

/** 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;
  transform: translateX(-100%);
}

html.is-ultimenu.is-ultimenu--expanded .is-ultimenu__canvas-off {
  transform: translateX(0);
}

/**
 * 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;
    transform: translateX(-100%);
  }
}