/*----------------------
 keyframe start here 
 -----------------------*/
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
} 


@-webkit-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}



/* text-slide */
@keyframes text-slide-animation {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@keyframes text-slide-animation-2 {
    0% {
        -webkit-transform: translateX(-90%);
        transform: translateX(-90%);
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}


/* circle rotate 360 deg */
@keyframes shape-rotate {
    0% {
       -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
       -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}