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

.anim{opacity: 0;}

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

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


@keyframes pop {
  0% { opacity: 0; -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-left.visible {
  animation: slide-left 1s ease forwards;
  position: relative;
  opacity: 0;
}
@keyframes slide-left {
  0% { right:-100px; opacity: 0; }
  100% {  right: 0px; opacity: 1; }
}

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

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

/* fade in animation */
.fade-in {
display: block;
animation: fade-in 1s ease forwards;
opacity: 0;
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}