/* Definition der Animationen */
/* 1. Bewegung des slidexrs */
@keyframes slidexsStart01 {line-height:200%;
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}

@-webkit-keyframes slidexsStart01 {
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}


@keyframes slidexsStart02 {
	90.01% {left: 0;}
	0%, 15%, 100% {left: -100%;}
	25%, 40% {left: -200%;}
	50%, 65% {left: -300%;}
	75%, 90% {left: -400%;}
}

@-webkit-keyframes slidexsStart02 {
	90.01% {left: 0;}
	0%, 15%, 100% {left: -100%;}
	25%, 40% {left: -200%;}
	50%, 65% {left: -300%;}
	75%, 90% {left: -400%;}
}


@keyframes slidexsStart03 {
	65.01% {left: 0;}
	0%, 15%, 100% {left: -200%;}
	25%, 40% {left: -300%;}
	50%, 65% {left: -400%;}
	75%, 90% {left: -100%;}
}

@-webkit-keyframes slidexsStart03 {
	65.01% {left: 0;}
	0%, 15%, 100% {left: -200%;}
	25%, 40% {left: -300%;}
	50%, 65% {left: -400%;}
	75%, 90% {left: -100%;}
}


@keyframes slidexsStart04 {
	40.01% {left: 0;}
	0%, 15%, 100% {left: -300%;}
	25%, 40% {left: -400%;}
	50%, 65% {left: -100%;}
	75%, 90% {left: -200%;}
}

@-webkit-keyframes slidexsStart04 {
	40.01% {left: 0;}
	0%, 15%, 100% {left: -300%;}
	25%, 40% {left: -400%;}
	50%, 65% {left: -100%;}
	75%, 90% {left: -200%;}
}


@keyframes slidexsStart05 {
	20.01% {left: 0;}
	0%, 15%, 100% {left: -300%;}
	25%, 40% {left: -400%;}
	50%, 65% {left: -100%;}
	75%, 90% {left: -200%;}
}

@-webkit-keyframes slidexsStart05 {
	20.01% {left: 0;}
	0%, 15%, 100% {left: -300%;}
	25%, 40% {left: -400%;}
	50%, 65% {left: -100%;}
	75%, 90% {left: -200%;}
}

/* 2. Wechsel des ersten slidexs ans Ende und zurück */
@keyframes slidex01ToEndStart01 {
	89.99% {left: 0;}
	90%, 100% {left: 100%;}
}

@-webkit-keyframes slidex01ToEndStart01 {
	89.99% {left: 0;}
	90%, 100% {left: 100%;}
}


@keyframes slidex01ToEndStart02 {
	49.99%, 90.01% {left: 0;}
	50%, 90% {left: 100%;}
}

@-webkit-keyframes slidex01ToEndStart02 {
	49.99%, 90.01% {left: 0;}
	50%, 90% {left: 100%;}
}


@keyframes slidex01ToEndStart03 {
	24.99%, 65.01% {left: 0;}
	25%, 65% {left: 100%;}
}

@-webkit-keyframes slidex01ToEndStart03 {
	24.99%, 65.01% {left: 0;}
	25%, 65% {left: 100%;}
}


@keyframes slidex01ToEndStart04 {
	40.01% {left: 0;}
	15%, 50% {left: 100%;}
}

@-webkit-keyframes slidex01ToEndStart04 {
	40.01% {left: 0;}
	15%, 50% {left: 100%;}
}

@keyframes slidex01ToEndStart05 {
	10.01% {left: 0;}
	0%, 40% {left: 100%;}
}

@-webkit-keyframes slidex01ToEndStart05 {
	10.01% {left: 0;}
	0%, 40% {left: 100%;}
}





/* Basisfunktionalität des slidexrs */
.slidexr {
	overflow: hidden;padding:10px 0;
}
.slidexr img{

}
.slidexr input {
	position: absolute;
	left: -10000px;
	top: 0;
}

.slidexList {
	width: 400%; /* Anzahl der slidexs mal 100 */
	position: relative; /* über die relative Positionierung wird der slidexr durchs Sichtfenster geschoben */
	-webkit-transition: left 2s;
	-moz-transition: left 2s;
	-o-transition: left 2s;
	transition: left 2s; /* für den fließenden Schub */
	margin: 0;
	padding: 0;
}

.slidexList:after {
	content: ".";
	display: block;
	height: .1px;
	clear: both;
	visibility: hidden;
	font-size: 0;
	overflow: hidden;
}

.slidex {
	list-style: none;
	width: 25%; /* Breite gleich 100 / Anzahl slidexs */
	float: left;
	position: relative;
	left: 0;
	-webkit-transition: left 0s .5s;
	-moz-transition: left 0s .5s;
	-o-transition: left 0s .5s;
	transition: left 0s .5s; /*bei Klick auf ein Control werden alle slidexs wieder auf Original-Position geschoben, hier für den ersten relevant. Damit die Aktion erst nach der slidexs-Verschiebung beginnt, kommt ein delay hinzu*/
}

#slidex05:checked ~ .slidexList .slidex,
#slidex105:checked ~ .slidexList .slidex {
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	transition-delay: 1s; /* damit er nicht zu früh zurückrutscht */
}
.slidexList img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* Zuweisung der Keyframe-Animationen */
.slidexList,
.slidex,
.slidexControl label {
	-webkit-animation: 20s 1s infinite;
	animation: 20s 1s infinite; /* allgemeingültige Werte für die Keyframe-Animation */
}

/* Positionierung und Aufruf der passenden Animation in Abhängigkeit des Status der Radiobuttons */
#slidex01:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart01;
	animation-name: slidexsStart01;
	left: 0;
}

#slidex02:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart02;
	animation-name: slidexsStart02;
	left: -100%;
}

#slidex03:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart03;
	animation-name: slidexsStart03;
	left: -200%;
}

#slidex04:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart04;
	animation-name: slidexsStart04;
	left: -300%;
}

#slidex05:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart05;
	animation-name: slidexsStart05;
	left: -300%;
}

/* Damit der Wechsel von 01 zu 101, 02 zu 102 usw. klappt, muss jeweils eine andere Animation aufgerufen werden*/
#slidex101:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart101;
	animation-name: slidexsStart101;
	left: 0;
}

#slidex102:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart102;
	animation-name: slidexsStart102;
	left: -100%;
}

#slidex103:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart103;
	animation-name: slidexsStart103;
	left: -200%;
}

#slidex104:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart104;
	animation-name: slidexsStart104;
	left: -300%;
}
#slidex105:checked ~ .slidexList {
	-webkit-animation-name: slidexsStart105;
	animation-name: slidexsStart105;
	left: -300%;
}

/* Der erste slidex wird jeweils zur rechten Zeit an den Anfang oder das Ende gestellt */
#slidex01:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart01;
	animation-name: slidex01ToEndStart01;
}

#slidex02:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart02;
	animation-name: slidex01ToEndStart02;
}

#slidex03:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart03;
	animation-name: slidex01ToEndStart03;
}

#slidex04:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart04;
	animation-name: slidex01ToEndStart04;
}
#slidex05:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart05;
	animation-name: slidex01ToEndStart05;
}

/* Separate Animations-Namen für die zweite Steuerung */
#slidex101:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart101;
	animation-name: slidex01ToEndStart101;
}

#slidex102:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart102;
	animation-name: slidex01ToEndStart102;
}

#slidex103:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart103;
	animation-name: slidex01ToEndStart103;
}

#slidex104:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart104;
	animation-name: slidex01ToEndStart104;
}

#slidex105:checked ~ .slidexList .slidex01 {
	-webkit-animation-name: slidex01ToEndStart105;
	animation-name: slidex01ToEndStart105;
}

/* nur zur Deko */
.slidexrWrapper {
	position: relative;
	margin-bottom: 20px;
}

.slidexrWrapper img {
	border-radius:0;}
.slidex p {
	position: absolute;
	bottom: 1em;
	left: 0;
	background: rgba(0, 0, 0, .6);
	color: #ddd;
	padding: .4em 1em;
}

/* Steuerung durch den Benutzer */
.slidexControl {
	width: 80px;
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -40px;
}

.control01:checked ~ .slidexControl01,
.control02:checked ~ .slidexControl02 {
	left: -5000px; /* Blendet die nicht benötigten Labels aus */
}

.slidexControl li {
	float: left;
	margin: 0 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: relative;
	text-indent: -10000px;
	border: 1px solid #ccc;
	box-shadow: 0 0 2px 2px #ccc;
	list-style: none;
}

.slidexControl label {
	display: block;
	cursor: pointer;
	background: none;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
	border: 2px solid #fff;
}

.slidexControl label:hover {
	background: #68b022!important;
}

#slidex01:checked ~ .slidexControl label[for="slidex101"],
#slidex02:checked ~ .slidexControl label[for="slidex102"],
#slidex03:checked ~ .slidexControl label[for="slidex103"],
#slidex04:checked ~ .slidexControl label[for="slidex104"], 
#slidex05:checked ~ .slidexControl label[for="slidex105"]{
	-webkit-animation-name: slidexControl01;
	animation-name: slidexControl01;
	background: #68b022;
}

#slidex101:checked ~ .slidexControl label[for="slidex01"],
#slidex102:checked ~ .slidexControl label[for="slidex02"],
#slidex103:checked ~ .slidexControl label[for="slidex03"],
#slidex104:checked ~ .slidexControl label[for="slidex04"],
#slidex105:checked ~ .slidexControl label[for="slidex05"] {
	-webkit-animation-name: slidexControl101;
	animation-name: slidexControl101;
	background: #68b022;
}

#slidex01:checked ~ .slidexControl label[for="slidex102"],
#slidex02:checked ~ .slidexControl label[for="slidex103"],
#slidex03:checked ~ .slidexControl label[for="slidex104"],
#slidex04:checked ~ .slidexControl label[for="slidex105"],
#slidex05:checked ~ .slidexControl label[for="slidex101"], {
	-webkit-animation-name: slidexControl02;
	animation-name: slidexControl02;
}

#slidex101:checked ~ .slidexControl label[for="slidex02"],
#slidex102:checked ~ .slidexControl label[for="slidex03"],
#slidex103:checked ~ .slidexControl label[for="slidex04"],
#slidex104:checked ~ .slidexControl label[for="slidex05"],
#slidex105:checked ~ .slidexControl label[for="slidex01"],  {
	-webkit-animation-name: slidexControl102;
	animation-name: slidexControl102;
}

#slidex01:checked ~ .slidexControl label[for="slidex103"],
#slidex02:checked ~ .slidexControl label[for="slidex104"],
#slidex03:checked ~ .slidexControl label[for="slidex101"],
#slidex04:checked ~ .slidexControl label[for="slidex102"],
#slidex05:checked ~ .slidexControl label[for="slidex101"]  {
	-webkit-animation-name: slidexControl03;
	animation-name: slidexControl03;
}

#slidex101:checked ~ .slidexControl label[for="slidex03"],
#slidex102:checked ~ .slidexControl label[for="slidex04"],
#slidex103:checked ~ .slidexControl label[for="slidex01"],
#slidex104:checked ~ .slidexControl label[for="slidex02"],
#slidex105:checked ~ .slidexControl label[for="slidex01"]  {
	-webkit-animation-name: slidexControl103;
	animation-name: slidexControl103;
}

#slidex01:checked ~ .slidexControl label[for="slidex104"],
#slidex02:checked ~ .slidexControl label[for="slidex101"],
#slidex03:checked ~ .slidexControl label[for="slidex102"],
#slidex04:checked ~ .slidexControl label[for="slidex103"],
#slidex05:checked ~ .slidexControl label[for="slidex101"] {
	-webkit-animation-name: slidexControl04;
	animation-name: slidexControl04;
}

#slidex101:checked ~ .slidexControl label[for="slidex04"],
#slidex102:checked ~ .slidexControl label[for="slidex01"],
#slidex103:checked ~ .slidexControl label[for="slidex02"],
#slidex104:checked ~ .slidexControl label[for="slidex03"],
#slidex105:checked ~ .slidexControl label[for="slidex01"]  {
	-webkit-animation-name: slidexControl104;
	animation-name: slidexControl105;
}