/* fade slider */
.slider {
	background-image: url("../images/slider1.jpg");
    height: 290px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 890px;
    top: 5px;
}
.slider figure {
	position: absolute;
	opacity: 0;
	animation: cycle 42s linear infinite;
}

/* keyframes */
.slider .slider1 {
	animation-delay: 0s;
	z-index: 10;
}
.slider .slider2 {
	animation-delay: 6s;
	z-index: 9;
}
.slider .slider3 {
	animation-delay: 12s;
	z-index: 8;
}
.slider .slider4 {
	animation-delay: 18s;
	z-index: 7;
}
.slider .slider5 {
	animation-delay: 24s;
	z-index: 6;
}
.slider .slider6 {
	animation-delay: 30s;
	z-index: 5;
}
.slider .slider7 {
	animation-delay: 36s;
	z-index: 4;
}

@keyframes cycle {
	/* start: 0%, next: 14% */
	/* full length: 2%, 14% */
	0% { opacity: 0; } /* start */
	2% { opacity: 1; } /* start stable show */
	15% { opacity: 1; } /* end stable show */
	17% { opacity: 0; } /* auslaufen lassen */
    100% { opacity: 0; }
}

.slider-overlay {
	
	background-color: rgba(255, 255, 255, 0.8);
    border-radius:10px 10px 10px 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    color: #333;
    font-size: 1.5em;
    right: 10%;
    margin: 0 auto;
    padding: 20px;
    position: absolute;
    top: 400px;
    width: 400px;
    text-align: center;
    border-radius: 0;
    z-index: 500;
    }

.slider-frame {
	height: 300px;
	width: 900px;
	margin: auto;
	background-color: #fff;
	
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px #888;
	-ms-box-shadow: 0 0 5px #888;
	-o-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
	}