@keyframes xld_pmove_anim {

    0% {

        transform: translate(0, 0);

        -webkit-transform: translate(0, 0)

    }

    25% {

        transform: translate(10px, 10px);

        -webkit-transform: translate(10px, 10px)

    }

    50% {

        transform: translate(5px, 5px);

        -webkit-transform: translate(5px, 5px)

    }

    75% {

        transform: translate(10px, -6px);

        -webkit-transform: translate(10px, -6px)

    }

    100% {

        transform: translate(0, 0);

        -webkit-transform: translate(0, 0)

    }

}

@keyframes tp-hueRotate {

  from {

    filter: hue-rotate(0); }

  to {

    filter: hue-rotate(360deg); }

}



@keyframes tpsliderShape {

    0%, 100% {

      border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;

      transform: translate3d(0, 0, 0) rotateZ(0.01deg);

    }

    34% {

      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;

      transform: translate3d(0, 5px, 0) rotateZ(0.01deg);

    }

    50% {

      transform: translate3d(0, 0, 0) rotateZ(0.01deg);

    }

    67% {

      border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;

      transform: translate3d(0, -3px, 0) rotateZ(0.01deg);

    }

  }



@keyframes fadeInOpacity {

    0% {

        opacity: 0;

        transform: translateY(-10px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



/*TP float y*/

@-webkit-keyframes tp-float-y {

    0% {

        transform: translateY(-20px);

    }



    50% {

        transform: translateY(-10px);

    }



    100% {

        transform: translateY(-20px);

    }

}



@keyframes tp-float-y {

    0% {

        transform: translateY(-20px);

    }



    50% {

        transform: translateY(-10px);

    }



    100% {

        transform: translateY(-20px);

    }

}



/*TP rotate*/

@-webkit-keyframes tp-rotate {

    100% { 

        transform: rotate(360deg); 

    } 

}



/*TP float x and rotate*/

@-webkit-keyframes tp-float-y-and-rotate {

    0%,

    100% {

        -webkit-transform: rotate(0deg) translateX(0);

        transform: rotate(0deg) translateX(0);

    }



    25%,

    75% {

        -webkit-transform: rotate(5deg) translateX(15px);

        transform: rotate(5deg) translateX(15px);

    }



    50% {

        -webkit-transform: rotate(10deg) translateX(30px);

        transform: rotate(10deg) translateX(30px);

    }

}



@keyframes tp-float-y-and-rotate {

    0%,

    100% {

        -webkit-transform: rotate(0deg) translateX(0);

        transform: rotate(0deg) translateX(0);

    }



    25%,

    75% {

        -webkit-transform: rotate(5deg) translateX(15px);

        transform: rotate(5deg) translateX(15px);

    }



    50% {

        -webkit-transform: rotate(10deg) translateX(30px);

        transform: rotate(10deg) translateX(30px);

    }

}



@-webkit-keyframes thepack-swipe-line {

    0% {

        -webkit-transform-origin: right;

        transform-origin: right;

        -webkit-transform: scale(1);

        transform: scale(1);

    }

    33% {

        -webkit-transform-origin: right;

        transform-origin: right;

        -webkit-transform: scaleX(0);

        transform: scaleX(0);

    }

    66% {

        -webkit-transform-origin: left;

        transform-origin: left;

        -webkit-transform: scaleX(0);

        transform: scaleX(0);

    }

    to {

        -webkit-transform-origin: left;

        transform-origin: left;

        -webkit-transform: scale(1);

        transform: scale(1);

    }

}



@keyframes thepack-swipe-line {

    0% {

        -webkit-transform-origin: right;

        transform-origin: right;

        -webkit-transform: scale(1);

        transform: scale(1);

    }

    33% {

        -webkit-transform-origin: right;

        transform-origin: right;

        -webkit-transform: scaleX(0);

        transform: scaleX(0);

    }

    66% {

        -webkit-transform-origin: left;

        transform-origin: left;

        -webkit-transform: scaleX(0);

        transform: scaleX(0);

    }

    to {

        -webkit-transform-origin: left;

        transform-origin: left;

        -webkit-transform: scale(1);

        transform: scale(1);

    }

}



@keyframes ThePack-animOne {

    0% {

        transform: translate(0px, 0px) rotate(0deg)

    }

    20% {

        transform: translate(73px, -1px) rotate(35deg)

    }

    40% {

        transform: translate(141px, 72px) rotate(75deg)

    }

    60% {

        transform: translate(83px, 122px) rotate(110deg)

    }

    80% {

        transform: translate(-40px, 72px) rotate(145deg)

    }

    100% {

        transform: translate(0px, 0px) rotate(0deg)

    }

}



@-webkit-keyframes ThePack-animOne {

    0% {

        -webkit-transform: translate(0px, 0px) rotate(0deg)

    }

    20% {

        -webkit-transform: translate(73px, -1px) rotate(35deg)

    }

    40% {

        -webkit-transform: translate(141px, 72px) rotate(75deg)

    }

    60% {

        -webkit-transform: translate(83px, 122px) rotate(110deg)

    }

    80% {

        -webkit-transform: translate(-40px, 72px) rotate(145deg)

    }

    100% {

        -webkit-transform: translate(0px, 0px) rotate(0deg)

    }

}



@keyframes ThePack-animTwo {

    0% {

        transform: translate(0px, 0px) rotate(0deg) scale(1)

    }

    20% {

        transform: translate(73px, -1px) rotate(36deg) scale(.9)

    }

    40% {

        transform: translate(141px, 72px) rotate(72deg) scale(1)

    }

    60% {

        transform: translate(83px, 122px) rotate(108deg) scale(1.2)

    }

    80% {

        transform: translate(-40px, 72px) rotate(144deg) scale(1.1)

    }

    100% {

        transform: translate(0px, 0px) rotate(0deg) scale(1)

    }

}



@-webkit-keyframes ThePack-animTwo {

    0% {

        -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1)

    }

    20% {

        -webkit-transform: translate(73px, -1px) rotate(36deg) scale(.9)

    }

    40% {

        -webkit-transform: translate(141px, 72px) rotate(72deg) scale(1)

    }

    60% {

        -webkit-transform: translate(83px, 122px) rotate(108deg) scale(1.2)

    }

    80% {

        -webkit-transform: translate(-40px, 72px) rotate(144deg) scale(1.1)

    }

    100% {

        -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1)

    }

}



@keyframes ThePack-animThree {

    0% {

        transform: translate(165px, -179px)

    }

    100% {

        transform: translate(-346px, 617px)

    }

}



@-webkit-keyframes ThePack-animThree {

    0% {

        -webkit-transform: translate(165px, -179px)

    }

    100% {

        -webkit-transform: translate(-346px, 617px)

    }

}



@keyframes ThePack-animFour {

    0% {

        transform: translate(-300px, 151px) rotate(0deg)

    }

    100% {

        transform: translate(251px, -200px) rotate(180deg)

    }

}



@-webkit-keyframes ThePack-animFour {

    0% {

        -webkit-transform: translate(-300px, 151px) rotate(0deg)

    }

    100% {

        -webkit-transform: translate(251px, -200px) rotate(180deg)

    }

}



@keyframes ThePack-animFive {

    0% {

        transform: translate(61px, -99px) rotate(0deg)

    }

    21% {

        transform: translate(4px, -190px) rotate(38deg)

    }

    41% {

        transform: translate(-139px, -200px) rotate(74deg)

    }

    60% {

        transform: translate(-263px, -164px) rotate(108deg)

    }

    80% {

        transform: translate(-195px, -49px) rotate(144deg)

    }

    100% {

        transform: translate(-1px, 0px) rotate(180deg)

    }

}



@-webkit-keyframes ThePack-animFive {

    0% {

        -webkit-transform: translate(61px, -99px) rotate(0deg)

    }

    21% {

        -webkit-transform: translate(4px, -190px) rotate(38deg)

    }

    41% {

        -webkit-transform: translate(-139px, -200px) rotate(74deg)

    }

    60% {

        -webkit-transform: translate(-263px, -164px) rotate(108deg)

    }

    80% {

        -webkit-transform: translate(-195px, -49px) rotate(144deg)

    }

    100% {

        -webkit-transform: translate(-1px, 0px) rotate(180deg)

    }

}



@-webkit-keyframes pulse-border {

    0% {

      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

      opacity: 1;

    }

    100% {

      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.8);

              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.8);

      opacity: 0;

    }

  }

  

  @keyframes pulse-border {

    0% {

      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

      opacity: 1;

    }

    100% {

      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.8);

              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.8);

      opacity: 0;

    }

  }





  @-webkit-keyframes heartbeat-right-to-left{



	0% {

	transform: scale(.8);

	transform-origin: 100% 30%;

	-webkit-transform: scale(.8);

	-moz-transform: scale(.8);

	-ms-transform: scale(.8);

	-o-transform: scale(.8);

	}



  50% {

	transform: scale(1);

	transform-origin: 100% -10%;

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

	-ms-transform: scale(1);

	-o-transform: scale(1);

	}



  100% {

	transform: scale(.8);

	transform-origin: 100% 30%;

	-webkit-transform: scale(.8);

	-moz-transform: scale(.8);

	-ms-transform: scale(.8);

	-o-transform: scale(.8);

	}

}



@keyframes tp-rotate-z{

    0%{

        transform:rotate(0deg)

    }

    to{

        transform:rotate(1000deg)

    }

}



@keyframes tpflipInY {

  from {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in;

    opacity: 0.5;

  }



  40% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in;

  }



  60% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

    opacity: 1;

  }



  80% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

  }



  to {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

  }

}