/* ----------------------------------------------- 
//////////////////////////////////////////////////
animations
//////////////////////////////////////////////////
----------------------------------------------- */


.anim{opacity: 0;}


/* pop in animation */
.pop.visible {
opacity: 0;
display: inline-block;
animation: pop 0.2s ease forwards;
}

.pop:nth-child(2).visible{animation-delay: 0s;}
.pop:nth-child(3).visible{animation-delay: .4s;}
.pop:nth-child(4).visible{animation-delay: .6s;}
.pop:nth-child(5).visible{animation-delay: .8s;}


@keyframes pop {
  0% { opacity: 1; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }
  90% { opacity: 1; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
  100% { opacity: 1; -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
}

/* slide in from right animation */
.slide-right.visible {
  animation: slide-right .3s ease forwards;
  position: relative;
  opacity: 0;
}
@keyframes slide-right {
  0% { right:-100px; opacity: 0; }
  100% {  right: 0px; opacity: 1; }
}

/* slide in from left animation */
.slide-left.visible {
  opacity: 0;
  animation: slide-left 1s ease forwards;
  position: relative;
}
@keyframes slide-left {
  0% { left:-100px; opacity: 0; }
  100% {  left: 0px; opacity: 1; }
}

/* slide in from bottom animation */
.slide-bottom.visible {
animation: slide-bottom .6s ease forwards;
position: relative;
opacity: 0;
}
@keyframes slide-bottom {
  0% { bottom:-100px; opacity: 0; }
  100% {  bottom: 0px; opacity: 1; }
}

/* blur in animation */
.blur-in {
animation: blur-in .5s ease forwards;
opacity: 0;
}
@keyframes blur-in {
  0% { opacity: 0; -webkit-filter: blur(50px); filter: blur(50px);}
  100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); }
}