/* STYLES FOR SLIDESHOW ANIMATION (Formula for percentage calculation is explained below) */
@-webkit-keyframes slideshowFadeInOut {
 0% {
   opacity:1;
 }
26.67% {
   opacity:1;
 }
33.33% {
   opacity:0;
 }
 93.33% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes slideshowFadeInOut {
 0% {
   opacity:1;
 }
26.67% {
   opacity:1;
 }
33.33% {
   opacity:0;
 }
 93.33% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes slideshowFadeInOut {
 0% {
   opacity:1;
 }
26.67% {
   opacity:1;
 }
33.33% {
   opacity:0;
 }
 93.33% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes slideshowFadeInOut {
 0% {
   opacity:1;
 }  /* 0 */
26.67% {
   opacity:1;
 }  /* a/t*100 */
33.33% {
   opacity:0;
 }  /* (a+b)/t*100 entspricht 1/n*100 */
 93.33% {
   opacity:0;
 }  /* 100-(b/t*100) */
 100% {
   opacity:1;
 }  /* 100 */
}   /* n= number of images, a=presentation time for one image, b=duration for cross fading, t=(a+b)*n */

#slideshow {
	position:relative;
	width: 420px;
	height: 315px; 
	float: right;
    background-color: darkkhaki;
	padding: 0px 0px 0px 0px; 
	margin: 0px 0px 0px 20px;
}
#slideshow img {
	position:absolute;
	left:0; 
} /* damit alle img übereinander liegen */

#slideshow img {
  -webkit-animation-name: slideshowFadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 30s;

  -moz-animation-name: slideshowFadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 30s;

  -o-animation-name: slideshowFadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 30s;

  animation-name: slideshowFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 30s;
}   /* t */
#slideshow img:nth-of-type(1) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}   /* t/n */
#slideshow img:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -o-animation-delay: 10s;
  animation-delay: 10s;
}   /* t/n */
#slideshow img:nth-of-type(3) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}   /* t/n */
@media screen and ( min-width: 835px ) {
    #slideshow {
	margin-left: 40px;
    }
}