/*---------------------------------------
    ## Animate
---------------------------------------*/

/************ animate style ************/
.top_image_bounce {
	animation: top-image-bounce 5s infinite ease-in-out;
}
.left_image_bounce {
  animation: left-image-bounce 5s infinite ease-in-out;
}
.right_image_bounce {
  animation: right-image-bounce 5s infinite ease-in-out;
}
.rotated {
  animation: spin 5s infinite ease-in-out;
}

@keyframes top-image-bounce {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px); }
  50% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px); }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px); } 
}
@keyframes left-image-bounce {
  0% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); } 
}

@keyframes right-image-bounce {
  0% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px); }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px); } 
}

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

@keyframes ripple-white3 {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
  }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}