.jslider-container {
	position: relative;
	overflow: hidden;
	height: 200px;
	width: 200px;
}

.jslider-container .jslider-item {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
}

.jslider-container .jslider-item.next {
	z-index: 2;
}

.jslider-container .jslider-item.active {
	z-index: 3;
}

.jslider-container .jslider-item.next-cover {
	z-index: 4;
}

.jslider-container .jslider-item {
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;

	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
}

.jslider-container.ease .jslider-item {
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	-o-animation-timing-function: ease;
}

.jslider-container.ease-in .jslider-item {
	animation-timing-function: ease-in;
	-webkit-animation-timing-function: ease-in;
	-moz-animation-timing-function: ease-in;
	-ms-animation-timing-function: ease-in;
	-o-animation-timing-function: ease-in;
}

.jslider-container.ease-out .jslider-item {
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-ms-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
}

.jslider-container.ease-in-out .jslider-item {
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	-ms-animation-timing-function: ease-in-out;
	-o-animation-timing-function: ease-in-out;
}

.jslider-container.linear .jslider-item {
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
}

.jslider-container.step-start .jslider-item {
	animation-timing-function: step-start;
	-webkit-animation-timing-function: step-start;
	-moz-animation-timing-function: step-start;
	-ms-animation-timing-function: step-start;
	-o-animation-timing-function: step-start;
}

.jslider-container.step-end .jslider-item {
	animation-timing-function: step-end;
	-webkit-animation-timing-function: step-end;
	-moz-animation-timing-function: step-end;
	-ms-animation-timing-function: step-end;
	-o-animation-timing-function: step-end;
}

.jslider-container.jpower .jslider-item {
	animation-timing-function: cubic-bezier(1,.01,.81,1);
	-webkit-animation-timing-function: cubic-bezier(1,.01,.81,1);
	-moz-animation-timing-function: cubic-bezier(1,.01,.81,1);
	-ms-animation-timing-function: cubic-bezier(1,.01,.81,1);
	-o-animation-timing-function: cubic-bezier(1,.01,.81,1);

}

/*******************/
/* In out movement */
/*******************/

/* in from the top */
@keyframes "inTop" {
	0% {
		transform: translateY(-100%);
		 -webkit-transform: translateY(-100%);
		 -moz-transform: translateY(-100%);
		 -ms-transform: translateY(-100%);
		 -o-transform: translateY(-100%);
	}
	100% {
		transform: translateY(0%);
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
 	}
}

@-moz-keyframes inTop {
	0% {
		transform: translateY(-100%);
		-moz-transform: translateY(-100%);
	}
	100% {
		transform: translateY(0%);
		-moz-transform: translateY(0%);
	}
}

@-webkit-keyframes "inTop" {
	0% {
		transform: translateY(-100%);
		-webkit-transform: translateY(-100%)
	}
	100% {
		transform: translateY(0%);
		-webkit-transform: translateY(0%);
	}
}

@-ms-keyframes "inTop" {
	0% {
		transform: translateY(-100%);
		-ms-transform: translateY(-100%);
	}
	100% {
		transform: translateY(0%);
		-ms-transform: translateY(0%);
	}
}

@-o-keyframes "inTop" {
	0% {
		transform: translateY(-100%);
		-o-transform: translateY(-100%);
	}
	100% {
		transform: translateY(0%);
		-o-transform: translateY(0%);
	}
}

@keyframes inTop {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0%);
	}
}



.jslider-container .inTop {
	animation-name: inTop;
	-webkit-animation-name: inTop;
	-moz-animation-name: inTop;
	-ms-animation-name: inTop;
	-o-animation-name: inTop;
}

/* out from the top */
@keyframes "outTop" {
	0% {
		transform: translateY(0%);
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
	}
	100% {
		transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
 	}
}

@-moz-keyframes outTop {
	0% {
		transform: translateY(0%);
		-moz-transform: translateY(0%);
	}
	100% {
		transform: translateY(-100%);
		-moz-transform: translateY(-100%);
	}
}

@-webkit-keyframes "outTop" {
	0% {
		transform: translateY(0%);
		-webkit-transform: translateY(0%);
	}
	100% {
		transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
	}
}

@-ms-keyframes "outTop" {
	0% {
		transform: translateY(0%);
		-ms-transform: translateY(0%);
	}
	100% {
		transform: translateY(-100%);
		-ms-transform: translateY(-100%);
	}
}

@-o-keyframes "outTop" {
	0% {
		transform: translateY(0%);
		-o-transform: translateY(0%);
	}
	100% {
		transform: translateY(-100%);
		-o-transform: translateY(-100%);
	}
}

@keyframes outTop {
	0% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(-100%);
	}
}

.jslider-container .outTop {
	animation-name: outTop;
	-webkit-animation-name: outTop;
	-moz-animation-name: outTop;
	-ms-animation-name: outTop;
	-o-animation-name: outTop;

}

/* inBottom */
@keyframes "inBottom" {
	0% {
		transform: translateY(100%);
		-webkit-transform: translateY(100%);
		-moz-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
 	}
}

@-moz-keyframes inBottom {
	0% {
		transform: translateY(100%);
		-moz-transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
		-moz-transform: translateY(0%);
	}
}

@-webkit-keyframes "inBottom" {
	0% {
		transform: translateY(100%);
		-webkit-transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
		-webkit-transform: translateY(0%);
	}
}

@-ms-keyframes "inBottom" {
	0% {
		transform: translateY(100%);
		-ms-transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
		-ms-transform: translateY(0%);
	}
}

@-o-keyframes "inBottom" {
	0% {
		transform: translateY(100%);
		-o-transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
		-o-transform: translateY(0%);
	}
}

@keyframes inBottom {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
	}
}


.jslider-container .inBottom {
	animation-name: inBottom;
	-webkit-animation-name: inBottom;
	-moz-animation-name: inBottom;
	-ms-animation-name: inBottom;
	-o-animation-name: inBottom;
}



/* outBottom */
@keyframes "outBottom" {
	0% {
		transform: translateY(0%);
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
	}
	100% {
		transform: translateY(100%);
		-webkit-transform: translateY(100%);
		-moz-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
 	}
}

@-moz-keyframes outBottom {
	0% {
		transform: translateY(0%);
		-moz-transform: translateY(0%);
	}
	100% {
		transform: translateY(100%);
		-moz-transform: translateY(100%);
	}
}

@-webkit-keyframes "outBottom" {
	0% {
		transform: translateY(0%);
		-webkit-transform: translateY(0%);
	}
	100% {
		transform: translateY(100%);
		-webkit-transform: translateY(100%);
	}
}

@-ms-keyframes "outBottom" {
	0% {
		transform: translateY(0%);
		-ms-transform: translateY(0%);
	}
	100% {
		transform: translateY(100%);
		-ms-transform: translateY(100%);
	}
}

@-o-keyframes "outBottom" {
	0% {
		transform: translateY(0%);
		-o-transform: translateY(0%);
	}
	100% {
		transform: translateY(100%);
		-o-transform: translateY(100%);
	}
}

@keyframes outBottom {
	0% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(100%);
	}
}


.jslider-container .outBottom {
	animation-name: outBottom;
	-webkit-animation-name: outBottom;
	-moz-animation-name: outBottom;
	-ms-animation-name: outBottom;
	-o-animation-name: outBottom;
}

/* inRight */
@keyframes "inRight" {
	0% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		opacity: 1;
 	}
}

@-moz-keyframes inRight {
	0% {
		transform: translateX(100%);
		-moz-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		-moz-transform: translateX(0%);
		opacity: 1;
	}
}

@-webkit-keyframes "inRight" {
	0% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
}

@-ms-keyframes "inRight" {
	0% {
		transform: translateX(100%);
		-ms-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		-ms-transform: translateX(0%);
		opacity: 1;
	}
}

@-o-keyframes "inRight" {
	0% {
		transform: translateX(100%);
		-o-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		-o-transform: translateX(0%);
		opacity: 1;
	}
}

@keyframes inRight {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}


.jslider-container .inRight {
	animation-name: inRight;
	-webkit-animation-name: inRight;
	-moz-animation-name: inRight;
	-ms-animation-name: inRight;
	-o-animation-name: inRight;
}



/* outRight */
@keyframes "outRight" {
	0% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
	}
	100% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
 	}
}

@-moz-keyframes outRight {
	0% {
		transform: translateX(0%);
		-moz-transform: translateX(0%);
	}
	100% {
		transform: translateX(100%);
		-moz-transform: translateX(100%);
	}
}

@-webkit-keyframes "outRight" {
	0% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
	}
	100% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
	}
}

@-ms-keyframes "outRight" {
	0% {
		transform: translateX(0%);
		-ms-transform: translateX(0%);
	}
	100% {
		transform: translateX(100%);
		-ms-transform: translateX(100%);
	}
}

@-o-keyframes "outRight" {
	0% {
		transform: translateX(0%);
		-o-transform: translateX(0%);
	}
	100% {
		transform: translateX(100%);
		-o-transform: translateX(100%);
	}
}

@keyframes outRight {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(100%);
	}
}


.jslider-container .outRight {
	animation-name: outRight;
	-webkit-animation-name: outRight;
	-moz-animation-name: outRight;
	-ms-animation-name: outRight;
	-o-animation-name: outRight;
}

/* in from the left */
@keyframes "inLeft" {
	0% {
		transform: translateX(-100%);
		 -webkit-transform: translateX(-100%);
		 -moz-transform: translateX(-100%);
		 -ms-transform: translateX(-100%);
		 -o-transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
 	}
}

@-moz-keyframes inLeft {
	0% {
		transform: translateX(-100%);
		-moz-transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
		-moz-transform: translateX(0%);
	}
}

@-webkit-keyframes "inLeft" {
	0% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%)
	}
	100% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
	}
}

@-ms-keyframes "inLeft" {
	0% {
		transform: translateX(-100%);
		-ms-transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
		-ms-transform: translateX(0%);
	}
}

@-o-keyframes "inLeft" {
	0% {
		transform: translateX(-100%);
		-o-transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
		-o-transform: translateX(0%);
	}
}

@keyframes inLeft {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
	}
}



.jslider-container .inLeft {
	animation-name: inLeft;
	-webkit-animation-name: inLeft;
	-moz-animation-name: inLeft;
	-ms-animation-name: inLeft;
	-o-animation-name: inLeft;
}

/* out from the left */
@keyframes "outLeft" {
	0% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
 	}
}

@-moz-keyframes outLeft {
	0% {
		transform: translateX(0%);
		-moz-transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
		-moz-transform: translateX(-100%);
	}
}

@-webkit-keyframes "outLeft" {
	0% {
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	}
}

@-ms-keyframes "outLeft" {
	0% {
		transform: translateX(0%);
		-ms-transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
		-ms-transform: translateX(-100%);
	}
}

@-o-keyframes "outLeft" {
	0% {
		transform: translateX(0%);
		-o-transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
		-o-transform: translateX(-100%);
	}
}

@keyframes outLeft {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}

.jslider-container .outLeft {
	animation-name: outLeft;
	-webkit-animation-name: outLeft;
	-moz-animation-name: outLeft;
	-ms-animation-name: outLeft;
	-o-animation-name: outLeft;

}







/*****************/
/* Fade movement */
/*****************/


/* fadeIn */
@keyframes "fadeIn" {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
 	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes "fadeIn" {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-ms-keyframes "fadeIn" {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes "fadeIn" {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.jslider-container .fadeIn {
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	-o-animation-name: fadeIn;
}


/* fadeOut */
@keyframes "fadeOut" {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
 	}
}

@-moz-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes "fadeOut" {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-ms-keyframes "fadeOut" {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-o-keyframes "fadeOut" {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


.jslider-container .fadeOut {
	animation-name: fadeOut;
	-webkit-animation-name: fadeOut;
	-moz-animation-name: fadeOut;
	-ms-animation-name: fadeOut;
	-o-animation-name: fadeOut;
}
