/* animation sets */



/* animation sets */



/* move from / to  */

 

.pt-page-moveToLeft {

	-webkit-animation: moveToLeft .3s linear both;

	animation: moveToLeft .3s linear both;

}



.pt-page-moveFromLeft {

	-webkit-animation: moveFromLeft .3s linear both;

	animation: moveFromLeft .3s linear both;

}



.pt-page-moveToRight {

	-webkit-animation: moveToRight .3s linear both;

	animation: moveToRight .3s linear both;

}



.pt-page-moveFromRight {

	-webkit-animation: moveFromRight .3s linear both;

	animation: moveFromRight .3s linear both;

}



.pt-page-moveToTop {

	-webkit-animation: moveToTop .3s linear both;

	animation: moveToTop .3s linear both;

}



.pt-page-moveFromTop {

	-webkit-animation: moveFromTop .3s linear both;

	animation: moveFromTop .3s linear both;

}



.pt-page-moveToBottom {

	-webkit-animation: moveToBottom .3s linear both;

	animation: moveToBottom .3s linear both;

}



.pt-page-moveFromBottom {

	-webkit-animation: moveFromBottom .3s linear both;

	animation: moveFromBottom .3s linear both;

}



/* fade */



.pt-page-fade {

	-webkit-animation: fade .7s ease both;

	animation: fade .7s ease both;

}



/* move from / to and fade */



.pt-page-moveToLeftFade {

	-webkit-animation: moveToLeftFade .7s ease both;

	animation: moveToLeftFade .7s ease both;

}



.pt-page-moveFromLeftFade {

	-webkit-animation: moveFromLeftFade .7s ease both;

	animation: moveFromLeftFade .7s ease both;

}



.pt-page-moveToRightFade {

	-webkit-animation: moveToRightFade .7s ease both;

	animation: moveToRightFade .7s ease both;

}



.pt-page-moveFromRightFade {

	-webkit-animation: moveFromRightFade .7s ease both;

	animation: moveFromRightFade .7s ease both;

}



.pt-page-moveToTopFade {

	-webkit-animation: moveToTopFade .7s ease both;

	animation: moveToTopFade .7s ease both;

}



.pt-page-moveFromTopFade {

	-webkit-animation: moveFromTopFade .7s ease both;

	animation: moveFromTopFade .7s ease both;

}



.pt-page-moveToBottomFade {

	-webkit-animation: moveToBottomFade .7s ease both;

	animation: moveToBottomFade .7s ease both;

}



.pt-page-moveFromBottomFade {

	-webkit-animation: moveFromBottomFade .7s ease both;

	animation: moveFromBottomFade .7s ease both;

}



/* move to with different easing */



.pt-page-moveToLeftEasing {

	-webkit-animation: moveToLeft .7s ease-in-out both;

	animation: moveToLeft .7s ease-in-out both;

}

.pt-page-moveToRightEasing {

	-webkit-animation: moveToRight .7s ease-in-out both;

	animation: moveToRight .7s ease-in-out both;

}

.pt-page-moveToTopEasing {

	-webkit-animation: moveToTop .7s ease-in-out both;

	animation: moveToTop .7s ease-in-out both;

}

.pt-page-moveToBottomEasing {

	-webkit-animation: moveToBottom .7s ease-in-out both;

	animation: moveToBottom .7s ease-in-out both;

}



/*  iconUp & circle */

.pt-page-moveIconUp {

	-webkit-animation: moveIconUp ease 1.5s both infinite;

	animation: moveToBottom ease 1.5s both infinite;

}



.pt-page-moveCircle {

	-webkit-animation: moveCircle ease-in-out 1.2s both;

	animation: moveCircle ease-in-out 1.2s both;

}



.pt-page-bounceInLeft{

	-webkit-animation: bounceInLeft ease-in-out 1.4s both;

	animation: bounceInLeft ease-in-out 4.2s both;

	}



.pt-page-bounceInRight{

	-webkit-animation: bounceInRight ease-in-out 1.4s both;

	animation: bounceInRight ease-in-out 4.2s both;

	}



/********************************* keyframes **************************************/



/* move from / to  */



@-webkit-keyframes moveToLeft {

	from { }

	to { -webkit-transform: translateX(-100%); }

}

@keyframes moveToLeft {

	from { }

	to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }

}



@-webkit-keyframes moveFromLeft {

	from { -webkit-transform: translateX(-100%); }

}

@keyframes moveFromLeft {

	from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }

}



@-webkit-keyframes moveToRight { 

	from { }

	to { -webkit-transform: translateX(100%); }

}

@keyframes moveToRight { 

	from { }

	to { -webkit-transform: translateX(100%); transform: translateX(100%); }

}



@-webkit-keyframes moveFromRight {



	from { -webkit-transform: translateX(100%); }

}

@keyframes moveFromRight {

	from { -webkit-transform: translateX(100%); transform: translateX(100%); }

}



@-webkit-keyframes moveToTop {

	from { }

	to { -webkit-transform: translateY(-100%); }

}

@keyframes moveToTop {

	from { }

	to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }

}



@-webkit-keyframes moveFromTop {

	from { -webkit-transform: translateY(-100%); }

}

@keyframes moveFromTop {

	from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }

}



@-webkit-keyframes moveToBottom {

	from { }

	to { -webkit-transform: translateY(100%); }

}

@keyframes moveToBottom {

	from { }

	to { -webkit-transform: translateY(100%); transform: translateY(100%); }

}



@-webkit-keyframes moveFromBottom {

	from { -webkit-transform: translateY(100%); }

}

@keyframes moveFromBottom {

	from { -webkit-transform: translateY(100%); transform: translateY(100%); }

}



@-webkit-keyframes moveIconUp {

	0% { -webkit-transform: translateY(100%); opacity:0;}

	50% { -webkit-transform: translateY(0%); opacity:1;}

	100% { -webkit-transform: translateY(-100%); opacity:0;}

}

@keyframes moveIconUp {

	0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity:0;}

	50% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity:1;}

	100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity:0;}

}



@-webkit-keyframes moveCircle {

	0% { -webkit-transform: translateY(-80%);-webkit-opacity:0.1;}

	5% { -webkit-transform: translateY(-80%);-webkit-opacity:0.3;}

	35% { -webkit-transform: translateY(10%);-webkit-opacity:1;}

	60% { -webkit-transform: translateY(-13%);}

	65% { -webkit-transform: translateY(-13%);}

	100% { -webkit-transform: translateY(0%);}

}



@keyframes moveCircle {

	0% { -webkit-transform: translateY(-80%);-webkit-opacity:0.1;

		transform: translateY(-80%);opacity:0.1;}

	5% { -webkit-transform: translateY(-80%);-webkit-opacity:0.3;

		transform: translateY(-80%);opacity:0.3;}

	35% { -webkit-transform: translateY(10%);-webkit-opacity:1;

		transform: translateY(10%);opacity:1;}

	60% { -webkit-transform: translateY(-13%);transform: translateY(-13%);}

	65% { -webkit-transform: translateY(-13%);transform: translateY(-13%);}

	100% { -webkit-transform: translateY(0%);transform: translateY(0%);}

}



/* fade */



@-webkit-keyframes fade {

	from { }

	to { opacity: 0.3; }

}

@keyframes fade {

	from { }

	to { opacity: 0.3; }

}



/* move from / to and fade */



@-webkit-keyframes moveToLeftFade {

	from { }

	to { opacity: 0.3; -webkit-transform: translateX(-100%); }

}

@keyframes moveToLeftFade {

	from { }

	to { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); }

}



@-webkit-keyframes moveFromLeftFade {

	from { opacity: 0.3; -webkit-transform: translateX(-100%); }

}

@keyframes moveFromLeftFade {

	from { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); }

}



@-webkit-keyframes moveToRightFade {

	from { }

	to { opacity: 0.3; -webkit-transform: translateX(100%); }

}

@keyframes moveToRightFade {

	from { }

	to { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); }

}



@-webkit-keyframes moveFromRightFade {

	from { opacity: 0.3; -webkit-transform: translateX(100%); }

}

@keyframes moveFromRightFade {

	from { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); }

}



@-webkit-keyframes moveToTopFade {

	from { }

	to { opacity: 0.3; -webkit-transform: translateY(-100%); }

}

@keyframes moveToTopFade {

	from { }

	to { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); }

}



@-webkit-keyframes moveFromTopFade {

	from { opacity: 0.3; -webkit-transform: translateY(-100%); }

}

@keyframes moveFromTopFade {

	from { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); }

}



@-webkit-keyframes moveToBottomFade {

	from { }

	to { opacity: 0.3; -webkit-transform: translateY(100%); }

}

@keyframes moveToBottomFade {

	from { }

	to { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); }

}



@-webkit-keyframes moveFromBottomFade {

	from { opacity: 0.3; -webkit-transform: translateY(100%); }

}

@keyframes moveFromBottomFade {

	from { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); }

}



@-webkit-keyframes bounceInLeft {

0%, 100%, 60%, 75%, 90% {

-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);

transition-timing-function:cubic-bezier(0.215, .61, .355, 1)

}

0% {

opacity:0;

-webkit-transform:translate3d(-3000px, 0, 0);

transform:translate3d(-3000px, 0, 0)

}

60% {

opacity:1;

-webkit-transform:translate3d(25px, 0, 0);

transform:translate3d(25px, 0, 0)

}

75% {

-webkit-transform:translate3d(-10px, 0, 0);

transform:translate3d(-10px, 0, 0)

}

90% {

-webkit-transform:translate3d(5px, 0, 0);

transform:translate3d(5px, 0, 0)

}

100% {

-webkit-transform:none;

transform:none

}

}

@keyframes bounceInLeft {

0%, 100%, 60%, 75%, 90% {

-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);

transition-timing-function:cubic-bezier(0.215, .61, .355, 1)

}

0% {

opacity:0;

-webkit-transform:translate3d(-3000px, 0, 0);

-ms-transform:translate3d(-3000px, 0, 0);

transform:translate3d(-3000px, 0, 0)

}

60% {

opacity:1;

-webkit-transform:translate3d(25px, 0, 0);

-ms-transform:translate3d(25px, 0, 0);

transform:translate3d(25px, 0, 0)

}

75% {

-webkit-transform:translate3d(-10px, 0, 0);

-ms-transform:translate3d(-10px, 0, 0);

transform:translate3d(-10px, 0, 0)

}

90% {

-webkit-transform:translate3d(5px, 0, 0);

-ms-transform:translate3d(5px, 0, 0);

transform:translate3d(5px, 0, 0)

}

100% {

-webkit-transform:none;

-ms-transform:none;

transform:none

}

}

.bounceInLeft {

	-webkit-animation-name: bounceInLeft;

	animation-name: bounceInLeft

}



@-webkit-keyframes bounceInRight {

0%, 100%, 60%, 75%, 90% {

-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);

transition-timing-function:cubic-bezier(0.215, .61, .355, 1)

}

0% {

opacity:0;

-webkit-transform:translate3d(3000px, 0, 0);

transform:translate3d(3000px, 0, 0)

}

60% {

opacity:1;

-webkit-transform:translate3d(-25px, 0, 0);

transform:translate3d(-25px, 0, 0)

}

75% {

-webkit-transform:translate3d(10px, 0, 0);

transform:translate3d(10px, 0, 0)

}

90% {

-webkit-transform:translate3d(-5px, 0, 0);

transform:translate3d(-5px, 0, 0)

}

100% {

-webkit-transform:none;

transform:none

}

}

@keyframes bounceInRight {

0%, 100%, 60%, 75%, 90% {

-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);

transition-timing-function:cubic-bezier(0.215, .61, .355, 1)

}

0% {

opacity:0;

-webkit-transform:translate3d(3000px, 0, 0);

-ms-transform:translate3d(3000px, 0, 0);

transform:translate3d(3000px, 0, 0)

}

60% {

opacity:1;

-webkit-transform:translate3d(-25px, 0, 0);

-ms-transform:translate3d(-25px, 0, 0);

transform:translate3d(-25px, 0, 0)

}

75% {

-webkit-transform:translate3d(10px, 0, 0);

-ms-transform:translate3d(10px, 0, 0);

transform:translate3d(10px, 0, 0)

}

90% {

-webkit-transform:translate3d(-5px, 0, 0);

-ms-transform:translate3d(-5px, 0, 0);

transform:translate3d(-5px, 0, 0)

}

100% {

-webkit-transform:none;

-ms-transform:none;

transform:none

}

}



.pt-page-moveIconY {

	-webkit-backface-visibility: visible!important;

	-ms-backface-visibility: visible!important;

	backface-visibility: visible!important;

	-webkit-animation-name: flipOutY;

	animation-name: flipOutY;

	-webkit-animation-duration: .75s;

	animation-duration: .75s

}



@-webkit-keyframes zoomIn {

0% {

opacity:0;

-webkit-transform:scale3d(.3, .3, .3);

transform:scale3d(.3, .3, .3)

}

50% {

opacity:1

}

}

@keyframes zoomIn {

0% {

opacity:0;

-webkit-transform:scale3d(.3, .3, .3);

-ms-transform:scale3d(.3, .3, .3);

transform:scale3d(.3, .3, .3)

}

50% {

opacity:1

}

}

.pt-page-moveIconin {

	-webkit-animation-name: zoomIn;

	animation-name: zoomIn;

	-webkit-animation-duration: 0.75s;

	animation-duration: 0.75s

}



@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}

@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}