@charset "UTF-8";

/* -----------------------*/
/* TRANSITION ANIMATIONS */
/* ---------------------*/
.animate-in {opacity: 0; transform: translate(0, 50px); transition-delay: .2s;}
.animate-in.visible {opacity: 1; transform: translate(0, 0); transition-duration: .75s; transition-timing-function: ease-out;}

.animate {
	animation-duration: .5s;
	-webkit-animation-duration: 0.5s;
	transition-timing-function: ease-out;
	animation-fill-mode: both;
	opacity: 0;
}

/* -- Fade In Up -- */
@keyframes fadeInUp {
  0% {opacity: 0;transform: translate3d(0, 2%, 0);}
  100% {opacity: 1;transform: none;}
}

.fadeinup {
opacity: 0;
animation-name: fadeInUp;
animation-delay: 0;
animation-duration: .5s;
animation-fill-mode: forwards;
}

/* -- Fade In -- */
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fadein {
opacity: 0;
animation-name: fadeIn;
animation-delay: 0;
animation-duration: .5s;
animation-fill-mode: forwards;
}

/* -- Drop In -- */
@keyframes dropIn {
	0% {transform: perspective(400px) scale(1.2); opacity: 0;}
	100% {transform: perspective(0) scale(1); opacity: 1;}
  }
  .dropIn {
  transform-style: preserve-3d; transform-origin: right bottom;
  opacity: 0;
  animation-name: dropIn;
  animation-delay: 0;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  }
  .dropIn:nth-of-type(2) {transform-origin: left bottom;}
  .dropIn:nth-of-type(3) {transform-origin: right top;}
  .dropIn:nth-of-type(4) {transform-origin: left top;}

.delay-1 {animation-delay: .25s;}
.delay-2 {animation-delay: .35s;}
.delay-3 {animation-delay: .45s;}
.delay-4 {animation-delay: .55s;}
.delay-5 {animation-delay: .65s;}
.delay-6 {animation-delay: .75s;}
.delay-7 {animation-delay: .85s;}
.delay-8 {animation-delay: .95s;}
.delay-9 {animation-delay: 1.5s;}