/** CSS Class for animation **/
.animatedwrap { position: relative; overflow: hidden; width: 100%; }

.slideup { transform: translateY(300px); -moz-transform: translateY(300px); -webkit-transform: translateY(300px); }
.slidedown { transform: translateY(-300px); -moz-transform: translateY(-300px); -webkit-transform: translateY(-300px); }
.slidetoleft { transform: translateX(300px); -moz-transform: translateX(300px); -webkit-transform: translateX(300px); }
.slidetoright { transform: translateX(-300px); -moz-transform: translateX(-300px); -webkit-transform: translateX(-300px); }
.imgdropdown { transform: translateY(-300px); -moz-transform: translateY(-300px); -webkit-transform: translateY(-300px); }
.slideuprotateandreset { transform: translateY(100px) rotate(10deg); -moz-transform: translateY(100px) rotate(10deg); -webkit-transform: translateY(100px) rotate(10deg); }
.rotatecapsule { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }

.playanimation .slideup { -webkit-animation: 2s slideup forwards; -moz-animation: 2s slideup forwards; animation: 2s slideup forwards; }
.playanimation .slidedown { -webkit-animation: 2s slidedown forwards; -moz-animation: 2s slidedown forwards; animation: 2s slidedown forwards; }
.playanimation .slidetoleft { -webkit-animation: 2s slidetoleft forwards; -moz-animation: 2s slidetoleft forwards; animation: 2s slidetoleft forwards; }
.playanimation .slidetoright { -webkit-animation: 2s slidetoright forwards; -moz-animation: 2s slidetoright forwards; animation: 2s slidetoright forwards; }
.playanimation .imgdropdown { -webkit-animation: 2s imgdropdown forwards; -moz-animation: 2s imgdropdown forwards; animation: 2s imgdropdown forwards; }
.playanimation .slideuprotateandreset { -webkit-animation: slideuprotateandreset 2s ease forwards; -moz-animation: slideuprotateandreset 2s ease forwards; animation: slideuprotateandreset 2s ease forwards; }
.playanimation .rotatecapsule { -webkit-animation: rotatecapsule 2s forwards; -moz-animation: rotatecapsule 2s forwards; animation: rotatecapsule 2s forwards; }

@keyframes slideup {
  0% { transform: translateY(300px); }
  60% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
@-moz-keyframes slideup {
  0% { -moz-transform: translateY(300px); }
  60% { -moz-transform: translateY(-10px); }
  100% { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideup {
  0% { -webkit-transform: translateY(300px); }
  60% { -webkit-transform: translateY(-10px); }
  100% { -webkit-transform: translateY(0); }
}

@keyframes slidedown {
  0% { transform: translateY(-300px); }
  60% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@-moz-keyframes slidedown {
  0% { -moz-transform: translateY(-300px); }
  60% { -moz-transform: translateY(10px); }
  100% { -moz-transform: translateY(0); }
}
@-webkit-keyframes slidedown {
  0% { -webkit-transform: translateY(-300px); }
  60% { -webkit-transform: translateY(10px); }
  100% { -webkit-transform: translateY(0); }
}

@keyframes slidetoleft {
  0% { transform: translateX(300px); }
  60% { transform: translateX(-10px); }
  100% { transform: translateX(0px); }
}
@-moz-keyframes slidetoleft {
  0% { -moz-transform: translateX(300px); }
  60% { -moz-transform: translateX(-10px); }
  100% { -moz-transform: translateX(0); }
}
@-webkit-keyframes slidetoleft {
  0% { -webkit-transform: translateX(300px); }
  60% { -webkit-transform: translateX(-10px); }
  100% { -webkit-transform: translateX(0); }
}

@keyframes slidetoright {
  0% { transform: translateX(-300px); }
  60% { transform: translateX(10px); }
  100% { transform: translateX(0px); }
}
@-moz-keyframes slidetoright {
  0% { -moz-transform: translateX(-300px); }
  60% { -moz-transform: translateX(10px); }
  100% { -moz-transform: translateX(0); }
}
@-webkit-keyframes slidetoright {
  0% { -webkit-transform: translateX(-300px); }
  60% { -webkit-transform: translateX(10px); }
  100% { -webkit-transform: translateX(0); }
}

@keyframes imgdropdown {
  0% { transform: translateY(-300px); }
  100% { transform: translateY(0); }
}
@-moz-keyframes imgdropdown {
  0% { -moz-transform: translateY(-300px); }
  100% { -moz-transform: translateY(0); }
}
@-webkit-keyframes imgdropdown {
  0% { -webkit-transform: translateY(-300px); }
  100% { -webkit-transform: translateY(0); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@-moz-keyframes marquee {
  0% { -moz-transform: translateX(0); }
  100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marquee {
  0% { -webkit-transform: translateX(0); }
  100% { -webkit-transform: translateX(-100%); }
}

@keyframes slideuprotateandreset {
  0% { transform: translateY(100px) rotate(10deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@-moz-keyframes slideuprotateandreset {
  0% { -moz-transform: translateY(100px) rotate(10deg); }
  100% { -moz-transform: translateY(0) rotate(0deg); }
}
@-webkit-keyframes slideuprotateandreset {
  0% { -webkit-transform: translateY(100px) rotate(10deg); }
  100% { -webkit-transform: translateY(0) rotate(0deg); }
}

@keyframes spin { 
  100% { transform:rotate(360deg); } 
}
@-moz-keyframes spin {
  100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
  100% { -webkit-transform: rotate(360deg); } 
}

@keyframes spinreverse {
  0% { transform:rotate(360deg); }
  100% { transform:rotate(0deg); }
}
@-moz-keyframes spinreverse { 
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); } 
}
@-webkit-keyframes spinreverse {
  0% { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}

@keyframes rotatecapsule {
  0% { transform: rotate(-45deg); }
  60% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}
@-moz-keyframes rotatecapsule {
  0% { -moz-transform: rotate(-45deg); }
  60% { -moz-transform: rotate(8deg); }
  100% { -moz-transform: rotate(0deg); }
}
@keyframes rotatecapsule {
  0% { -webkit-transform: rotate(-45deg); }
  60% { -webkit-transform: rotate(8deg); }
  100% { -webkit-transform: rotate(0deg); }
}