/*======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%{transform:translateX(200%);}
	90%{transform:translateX(-10%);}
	100%{transform:translateX(0);}
}
@-ms-keyframes pageStart{
	0%{transform:translateX(200%);}
	90%{transform:translateX(-10%);}
	100%{transform:translateX(0);}
}
@-webkit-keyframes pageStart{
	0%{transform:translateX(200%);}
	90%{transform:translateX(-10%);}
	100%{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(200%);
}

.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%{transform:translateY(200%);}
	80%{transform:translateY(-10%);}
	100%{transform:translateY(0);}
}