 /* =============================================================================
 *  ANIMATION STYLES
 *  ============================================================================= */
.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated-delay1 {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
.animated-delay2 {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.7, .7, .7);
            transform: scale3d(.7, .7, .7);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.7, .7, .7);
            transform: scale3d(.7, .7, .7);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
          animation-name: bounceIn;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

/*
 * Animations
 * ====================================== */
.ease { transition: all .5s ease; }

/* Color Bar Filter */
.slideToggle {
	overflow-y: hidden;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.mh-auto { max-height: auto; }
.mh-none { max-height: 0; }

/* Instruction screens */
.fadeInAni { animation: fadeIn 0.4s forwards; }
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.fadeOutAni { animation: fadeOut 0.5s forwards; }
.fadeOutDelayAni { animation: fadeOut 0.5s 2s forwards; }
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* slide out left panel */
.slideOut-left.slideOut-open { left: 0px; }
.slideOut {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}


/* Toolbar Animations - shimmer */
.shimmer {
  background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation-name: shimmerAni;
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 200ms;
  -webkit-animation-timing-function: ease-out;
  width: 200%;
}
@-webkit-keyframes shimmerAni {
  0% { background-position: -458px 0; }
  100% { background-position: 458px 0; }
}

// Larger than phone size screens
@media only screen and (min-width: 40em) {
  .l-slideOutFadeInAni-ns { animation: l-slideOutFadeIn 0.5s forwards; }
  @keyframes l-slideOutFadeIn {
    0% { opacity: 0; transform: translateX(300px); }
    100% { opacity: 1; transform: translateX(0px); }
  }
  .r-slideOutFadeInAni-ns { animation: r-slideOutFadeIn 0.5s forwards; }
  @keyframes r-slideOutFadeIn {
    0% { opacity: 0; transform: translateX(-300px); }
    100% { opacity: 1; transform: translateX(0px); }
  }
}
