/* =========================
   FLOAT
==========================*/

@keyframes float{

  from{
    transform:translateY(0px);
  }

  to{
    transform:translateY(-40px);
  }

}

/* =========================
   FADE UP
==========================*/

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* =========================
   FADE RIGHT
==========================*/

@keyframes fadeRight{

  from{
    opacity:0;
    transform:translateX(40px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }

}

/* =========================
   FADE LEFT
==========================*/

@keyframes fadeLeft{

  from{
    opacity:0;
    transform:translateX(-40px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }

}

/* =========================
   SCALE IN
==========================*/

@keyframes scaleIn{

  from{
    opacity:0;
    transform:scale(.8);
  }

  to{
    opacity:1;
    transform:scale(1);
  }

}

/* =========================
   GLOW
==========================*/

@keyframes glow{

  0%{
    box-shadow:0 0 10px rgba(0,217,255,.2);
  }

  50%{
    box-shadow:0 0 40px rgba(255,0,110,.4);
  }

  100%{
    box-shadow:0 0 10px rgba(0,217,255,.2);
  }

}

/* =========================
   COMMON CLASSES
==========================*/

.fade-up{
  animation:fadeUp 1s ease;
}

.fade-right{
  animation:fadeRight 1s ease;
}

.fade-left{
  animation:fadeLeft 1s ease;
}

.scale-in{
  animation:scaleIn .8s ease;
}

.glow-animation{
  animation:glow 3s infinite;
}

.float-animation{
  animation:float 6s infinite ease-in-out alternate;
}