/*======Transition Right=====*/
.transition-right {
	opacity: 1;
}
.transition-right .effect-a, .transition-right .effect-b {
	transform: translateX(200%);
	-webkit-transform: translateX(200%);
	-o-transform: translateX(200%);
	-ms-transform: translateX(200%);
}
.transition-right .effect-c, .transition-right .effect-d {
	transform: translateX(200%);
	-webkit-transform: translateX(200%);
	-o-transform: translateX(200%);
	-ms-transform: translateX(200%);
}
.animate.transition-right .effect-a {
	-webkit-animation: pageStart 1.4s linear 0s forwards;
	animation: 1s linear 0.2s normal forwards 1 pageStart;
	-o-animation: 1s linear 0.2s normal forwards 1 pageStart;
	-ms-animation: 1s linear 0.2s normal forwards 1 pageStart;
}
.animate.transition-right .effect-b {
	-webkit-animation: pageStart 1.4s linear 0.2s forwards;
	animation: pageStart 1.4s linear 0.2s forwards;
	-o-animation: pageStart 1.4s linear 0.2s forwards;
	-ms-animation: pageStart 1.4s linear 0.2s forwards;
}
.animate.transition-right .effect-c {
	-webkit-animation: pageStart 1.4s linear 0.4s forwards;
	animation: pageStart 1.4s linear 0.4s forwards;
	-o-animation: pageStart 1.4s linear 0.4s forwards;
	-ms-animation: pageStart 1.4s linear 0.4s forwards;
}
.animate.transition-right .effect-d {
	-webkit-animation: pageStart 1.4s linear 0.6s forwards;
	animation: pageStart 1.4s linear 0.6s forwards;
	-o-animation: pageStart 1.4s linear 0.6s forwards;
	-ms-animation: pageStart 1.4s linear 0.6s forwards;
}
.animate.transition-right .effect-e {
	-webkit-animation: pageStart 1.4s linear 0.8s forwards;
	animation: pageStart 1.4s linear 0.8s forwards;
	-o-animation: pageStart 1.4s linear 0.8s forwards;
	-ms-animation: pageStart 1.4s linear 0.8s forwards;
}
.animate.transition-right .effect-f {
	-webkit-animation: pageStart 1.4s linear 0.10s forwards;
	animation: pageStart 1.4s linear 0.10s forwards;
	-o-animation: pageStart 1.4s linear 0.10s forwards;
	-ms-animation: pageStart 1.4s linear 0.10s forwards;
}
 @keyframes pageStart {
 0% {
transform:translateX(200%);
}
 90% {
transform:translateX(-10%);
}
 100% {
transform:translateX(0);
}
}
@-o-keyframes pageStart {
 0% {
-o-transform:translateX(200%);
}
 90% {
-o-transform:translateX(-10%);
}
 100% {
-o-transform:translateX(0);
}
}
@-ms-keyframes pageStart {
 0% {
-ms-transform:translateX(200%);
}
 90% {
-ms-transform:translateX(-10%);
}
 100% {
-ms-transform:translateX(0);
}
}
@-webkit-keyframes pageStart {
 0% {
-webkit-transform:translateX(200%);
}
 90% {
-webkit-transform:translateX(-10%);
}
 100% {
-webkit-transform:translateX(0);
}
}
/*======Transition Right=====*/
.effect-bottom {
	opacity: 1;
}
.effect-bottom .effect-a, .effect-bottom .effect-b, .effect-bottom .effect-c, .effect-bottom .effect-d, .effect-bottom .effect-e, .effect-bottom .effect-f {
	transform: translateY(200%);
	-webkit-transform: translateY(200%);
	-o-transform: translateY(200%);
	-ms-transform: translateY(0%)\0;
}
.animate.effect-bottom .effect-a {
	-webkit-animation: effect-bottom 1s linear 0s forwards;
	animation: effect-bottom 1s linear 0s forwards;
	-o-animation: effect-bottom 1s linear 0s forwards;
	-ms-animation: effect-bottom 1s linear 0s forwards;
}
.animate.effect-bottom .effect-b {
	-webkit-animation: effect-bottom 1s linear 0.2s forwards;
	animation: effect-bottom 1s linear 0.2s forwards;
	-o-animation: effect-bottom 1s linear 0.2s forwards;
	-ms-animation: effect-bottom 1s linear 0.2s forwards;
}
.animate.effect-bottom .effect-c {
	-webkit-animation: effect-bottom 1s linear 0.4s forwards;
	animation: effect-bottom 1s linear 0.4s forwards;
	-o-animation: effect-bottom 1s linear 0.4s forwards;
	-ms-animation: effect-bottom 1s linear 0.4s forwards;
}
.animate.effect-bottom .effect-d {
	-webkit-animation: effect-bottom 1s linear 0.6s forwards;
	animation: effect-bottom 1s linear 0.6s forwards;
	-o-animation: effect-bottom 1s linear 0.6s forwards;
	-ms-animation: effect-bottom 1s linear 0.6s forwards;
}
.animate.effect-bottom .effect-e {
	-webkit-animation: effect-bottom 1s linear 0.8s forwards;
	animation: effect-bottom 1s linear 0.8s forwards;
	-o-animation: effect-bottom 1s linear 0.8s forwards;
	-ms-animation: effect-bottom 1s linear 0.8s forwards;
}
.animate.effect-bottom .effect-f {
	-webkit-animation: effect-bottom 1s linear 0.10s forwards;
	animation: effect-bottom 1s linear 0.10s forwards;
	-o-animation: effect-bottom 1s linear 0.10s forwards;
	-ms-animation: effect-bottom 1s linear 0.10s forwards;
}
 @keyframes effect-bottom {
 0% {
transform:translateY(200%);
}
 80% {
transform:translateY(-10%);
}
 100% {
transform:translateY(0);
}
}
 @-webkit-keyframes effect-bottom {
 0% {
-webkit-transform:translateY(200%);
}
 80% {
-webkit-transform:translateY(-10%);
}
 100% {
-webkit-transform:translateY(0);
}
}

@media only screen and (max-device-width:1024px) {
.effect-bottom .effect-a, .effect-bottom .effect-b, .effect-bottom .effect-c, .effect-bottom .effect-d, .effect-bottom .effect-e, .effect-bottom .effect-f {
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
}
.transition-right .effect-a, .transition-right .effect-b {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
}
.transition-right .effect-c, .transition-right .effect-d {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
}
}