#slider {
width:100%;
height:100%;
overflow:hidden;
margin:0px auto ;
position: relative
}

.slider_img {
position: absolute;
top:0;
left:0;
padding:1rem;
margin:0rem;width:100%;height:100%;background-size:cover;
border:solid 0.1rem white;
}

.bild1 {background-image:url(images/pic2_small.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show1 infinite 20000ms;
animation:show1 infinite 20000ms;
}

.bild2 {background-image:url(images/pic4_small.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show2 infinite 20000ms;
animation:show2 infinite 20000ms;
}

.bild3 {background-image:url(images/pic3_small.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show3 infinite 20000ms;
animation:show3 infinite 20000ms;
}

.bild4 {background-image:url(images/pic1_small.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show4 infinite 20000ms;
animation:show4 infinite 20000ms;
}



/* safari, chrome browser */
@-webkit-keyframes show1 {
0% {opacity:1;}
20% {opacity:1;}
25% {opacity:0;}
95% {opacity:0;}
}

@-webkit-keyframes show2 {
0% {opacity:0;}
20% {opacity:0;}
25% {opacity:1;}
45% {opacity:1;}
50% {opacity:0;}
100% {opacity:0;}
}

@-webkit-keyframes show3 {
0% {opacity:0;}
45% {opacity:0;}
50% {opacity:1;}
70% {opacity:1;}
75% {opacity:0;}
100% {opacity:0;}
}

@-webkit-keyframes show4 {
0% {opacity:0;}
70% {opacity:0;}
75% {opacity:1;}
95% {opacity:1;}

}


/* alle neueren browser */
@keyframes show1 {
0% {opacity:1;}
20% {opacity:1;}
25% {opacity:0;}
95% {opacity:0;}
}

@keyframes show2{
0% {opacity:0;}
20% {opacity:0;}
25% {opacity:1;}
45% {opacity:1;}
50% {opacity:0;}
100% {opacity:0;}
}

@keyframes show3 {
0% {opacity:0;}
45% {opacity:0;}
50% {opacity:1;}
70% {opacity:1;}
75% {opacity:0;}
100% {opacity:0;}
}

@keyframes show4 {
0% {opacity:0;}
70% {opacity:0;}
75% {opacity:1;}
95% {opacity:1;}

}



/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {

.slider_img {
padding:2rem;
}


}

/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {

.bild1 {background-image:url(images/pic2.jpg);
}

.bild2 {background-image:url(images/pic4.jpg);
}

.bild3 {{background-image:url(images/pic3.jpg);
}

.bild4 {{background-image:url(images/pic1.jpg);
}

}