html.is-leaving .transition-ph {
  transition: all .4s cubic-bezier(.22, .22, .23, 1);
}

html.is-changing .transition-ph {
  transition: all .4s cubic-bezier(.22, .22, .23, 1);
}

html.is-leaving .transition-up {
  transition: all .4s cubic-bezier(.22, .22, .23, 1);
  transform: translateY(0px);
}

html.is-changing .transition-up {
  transition: all .4s cubic-bezier(.22, .22, .23, 1);
  transform: translateY(0px);
}

html.is-animating .transition-up {
  transform: translateY(50px);
}

html.is-leaving .transition-up-dolle {
  transition: all .5s cubic-bezier(.22, .22, .23, 1);
  transform: translateY(0px);
}

html.is-changing .transition-up-dolle {
  transition: all .5s cubic-bezier(.22, .22, .23, 1);
  transform: translateY(0px);
}

html.is-animating .transition-up-dolle {
  transform: translateY(120px);
}

.transition-page {
  transition: all .4s cubic-bezier(.22, .22, .23, 1);
}

html.is-changing.to-page #swup {
  transition: all .8s cubic-bezier(.22, .22, .23, 1);
}

html.is-leaving.to-page #swup {
  transition: all .4s cubic-bezier(1, 0, 1, .74);
}

html.is-animating.to-page #swup {
  transform: translateY(50px);
  opacity: 0;
}

/* filter transitions: only grid moves */

html.is-changing.to-filter #grid {
  transition: all .8s cubic-bezier(.22, .22, .23, 1);
  transform: translateY(0px);
  opacity: 1;
}

html.is-leaving.to-filter #grid {
  transition: all .4s cubic-bezier(1, 0, 1, .74);
  transform: translateY(0px);
  opacity: 1;
}

html.is-animating.to-filter #grid {
  transform: translateY(100px);
  opacity: 0;
}