/* keyframes */
@keyframes up {
	0% { -webkit-transform:translateY(50%); -ms-transform:translateY(50%); -moz-transform:translateY(50%); transform:translateY(50%); opacity: 0;}
	100% {-webkit-transform:translateY(0); -ms-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0); opacity: 1;}
}
@keyframes down {
	0% { -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); opacity: 0;}
	100% {-webkit-transform:translateY(0); -ms-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0); opacity: 1;}
}
@keyframes left {
	0% { -webkit-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%); opacity: 0;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity: 1;}
}
@keyframes right {
	0% { -webkit-transform:translateX(100%); -ms-transform:translateX(100%); transform:translateX(100%); opacity: 0;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity: 1;}
}
@keyframes scroll{
	0%{bottom:30px}
	100%{bottom:60px;}
}
@keyframes text-up{
	0%{ transform:translate3d(0, 150%, 0); }
	100%{ transform:translate3d(0,0,0); }
}

/**
 * ----------------------------------------
 * animation stretch
 * ----------------------------------------
 */
@-webkit-keyframes stretch {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes stretch {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}


/**
 * ----------------------------------------
 * animation ping
 * ----------------------------------------
 */
@-webkit-keyframes ping1 {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: scale(1.6);
            transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes ping1 {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: scale(1.6);
            transform: scale(1.6);
    opacity: 0;
  }
}



@-webkit-keyframes ping2 {
  0% {
    -webkit-transform: scale(0.2) translate(-50%,-50%);;
            transform: scale(0.2) translate(-50%,-50%);;
    opacity: 0.8;
  }
  50% {
    -webkit-transform: scale(1.2) translate(-50%,-50%);;
            transform: scale(1.2) translate(-50%,-50%);;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.6) translate(-50%,-50%);;
            transform: scale(1.6) translate(-50%,-50%);;
    opacity: 0;
  }
}
@keyframes ping2 {
  0% {
    -webkit-transform: scale(0.6) translate(-50%,-50%);;
            transform: scale(0.6) translate(-50%,-50%);;
    opacity: 0.8;
  }
  50% {
    -webkit-transform: scale(1.2) translate(-50%,-50%);;
            transform: scale(1.2) translate(-50%,-50%);;
    opacity: 0.9;
  }
  100% {
    -webkit-transform: scale(1.5) translate(-50%,-50%);;
            transform: scale(1.5) translate(-50%,-50%);;
    opacity: 0;
  }
}