/* this is our container. Lets imagine, that it is our sidebar where we want to put testimonials */
.container {
	/*width:30%;
	margin:20px;*/ text-align:center
}


/* testimonials slider geometry */
.tsl {
	/*border:1px solid;
	padding:1em;*/
}
.tsl-list {
	list-style-type:none;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}
.tsl-item {
	position:relative;
	top:0;
	left:100%;
	margin-left:-100%;
	width:100%;
	float:left;
	animation: tsl-fade-in-out 25s infinite;
	animation-play-state:running;
}

/* lets hide all items from second */
.tsl-item + .tsl-item {
	opacity:0;
}

/* animation */

/* animation shift */
/* negative delay needed to pause works correctly on hover */
.tsl-item:nth-child(2) {
	animation-delay: -20s;
}
.tsl-item:nth-child(3) {
	animation-delay: -15s;
}
.tsl-item:nth-child(4) {
	animation-delay: -10s;
}
.tsl-item:nth-child(5) {
	animation-delay: -5s;
}
/*
we have 5 items.
we want each slide plays ˜5s

each slide will play 1/5 of animation = 20%
1% of animation is for transitions (fading)
*/

@keyframes tsl-fade-in-out {
	0% {
		opacity:0;
		z-index:2;
	}
	1% {
		opacity:1;
		z-index:2;
	}
	20% {
		opacity:1;
	}
	21% {
		opacity:0;
		z-index:1;
	}
	100% {
		opacity:0;
	}
}

/* pause on hover */
.tsl-list:hover .tsl-item {
	animation-play-state:paused;
}

/* testimonials theme */
.tsl-content {
	/*font: 12px/1.4 Arial;*/ font-size:18px; font-style:italic;
}
.tsl-content p {
	margin-top:0;
}
.tsl-meta {
	/*font: 11px/1.4 Arial;
	text-align:right;*/ background:#FFF; display:inline-block; margin:20px 0; padding:10px; color:#333; border-radius:20px;
}
.tsl-meta span { background:#ee5c1d; color:#FFF; padding:1px 5px; border-radius:10px; }
.tsl-meta p {
	margin-bottom:0;
}

/* thats all */