/*
 *
 * React Element Structure
 * <Animate>
 *   <ChildAnimate>
 *     {children}
 *   </ChildAnimate>
 * </Animate>
 *
 *
 * HTML Structure
 *                     Animation Classes
 *                     -----------------
 * <div class="        ...    Parent classes   ...  ">  <--- Animator
 *   <div class="      ...Child layer 1 classes...  ">  <--- ChildAnimate: layer 1
 *     <div class="    ...Child layer 2 classes...  ">  <--- ChildAnimate: layer 2
 *       <div class="  ...Child layer 2 classes...  ">  <--- ChildAnimate: layer 3
 *         {children}                                   <--- Content from the outside world
 *       </div>
 *     </div>
 *   </div>
 * </div>
 *
 * */
.child-layer-1, .child-layer-2, .child-layer-3 {
  height: 100%;
  width: 100%; }

@keyframes hide-animation-hack {
  0% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.enter .timing-micro, .exit .timing-micro {
  transition-duration: 0.12s; }

.enter .timing-small, .exit .timing-small {
  transition-duration: 0.15s; }

.enter .timing-medium, .exit .timing-medium {
  transition-duration: 0.2s; }

.enter .timing-large, .exit .timing-large {
  transition-duration: 0.3s; }

.enter .timing-fast01, .exit .timing-fast01 {
  transition-duration: 0.1s; }

.enter .timing-fast02, .exit .timing-fast02 {
  transition-duration: 0.15s; }

.enter .timing-medium01, .exit .timing-medium01 {
  transition-duration: 0.2s; }

.enter .timing-medium02, .exit .timing-medium02 {
  transition-duration: 0.3s; }

.enter .timing-slow01, .exit .timing-slow01 {
  transition-duration: 0.45s; }

.enter .timing-slow02, .exit .timing-slow02 {
  transition-duration: 0.6s; }

.enter .translate-wrapper, .exit .translate-wrapper {
  transition-duration: 0.3s; }

.enter {
  transition-property: all; }
  .enter .child-layer-3 {
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .enter .timing-micro, .enter .timing-small {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .enter .timing-medium, .enter .timing-large {
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  .enter .timing-fast01,
  .enter .timing-fast02,
  .enter .timing-medium01,
  .enter .timing-medium02,
  .enter .timing-slow01,
  .enter .timing-slow02 {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .enter .opacity.timing-micro {
    opacity: .9; }
  .enter .opacity.timing-small, .enter .opacity.timing-medium {
    opacity: .5; }
  .enter .opacity.timing-large {
    opacity: .66; }
  .enter.child-sequence {
    transition-property: opacity;
    transition-duration: 0s;
    transition-timing-function: linear;
    opacity: 0; }
  .enter .height {
    overflow: hidden; }
  .enter .width {
    overflow: hidden; }

.enter-active .opacity.timing-micro, .enter-active .opacity.timing-small, .enter-active .opacity.timing-medium, .enter-active .opacity.timing-large {
  opacity: 1; }

.enter-active .translate {
  transform: translate(0, 0) !important; }

.enter-active.child-sequence {
  opacity: 1; }

.exit {
  transition-property: all; }
  .exit .child-layer-3 {
    transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1); }
  .exit .timing-micro, .exit .timing-small {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .exit .timing-medium, .exit .timing-large {
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  .exit .timing-fast01,
  .exit .timing-fast02,
  .exit .timing-medium01,
  .exit .timing-medium02,
  .exit .timing-slow01,
  .exit .timing-slow02 {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .exit .opacity {
    opacity: 1; }
  .exit .translate {
    transform: translate(0, 0); }
  .exit .translate-use-same-transition {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .exit.child-sequence {
    animation-name: hide-animation-hack;
    animation-fill-mode: forwards; }
  .exit .height {
    overflow: hidden; }
  .exit .width {
    overflow: hidden; }

.exit-active .opacity {
  opacity: 0; }