@charset "utf-8";
/* CSS Document */

/* 

For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

    0%
    a/t*100%
    (a+b)/t*100% = 1/n*100%
    100%-(b/t*100%)
    100%

*/
       
@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 6.05% {
   opacity:1;
 }
 7.69% {
   opacity:0;
 }
 98.36% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 6.05% {
   opacity:1;
 }
 7.69% {
   opacity:0;
 }
 98.36% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes cf4FadeInOut {
0% {
   opacity:1;
 }
 6.05% {
   opacity:1;
 }
 7.69% {
   opacity:0;
 }
 98.36% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes cf4FadeInOut {
0% {
   opacity:1;
 }
 6.05% {
   opacity:1;
 }
 7.69% {
   opacity:0;
 }
 98.36% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

#cf4a {
  position:relative;
  height:300px;
  width:800px;
  margin:0 auto;
}
#cf4a img {
  position:absolute;
  left:0;
}

#cf4a img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 39s;

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

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

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 39s;
}
#cf4a img:nth-of-type(1) {
  -webkit-animation-delay: 36s;
  -moz-animation-delay: 36s;
  -o-animation-delay: 36s;
  animation-delay: 36s;
}
#cf4a img:nth-of-type(2) {
  -webkit-animation-delay: 33s;
  -moz-animation-delay: 33s;
  -o-animation-delay: 33s;
  animation-delay: 33s;
}
#cf4a img:nth-of-type(3) {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}
#cf4a img:nth-of-type(4) {
  -webkit-animation-delay: 27s;
  -moz-animation-delay: 27s;
  -o-animation-delay: 27s;
  animation-delay: 27s;
}
#cf4a img:nth-of-type(5) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  animation-delay: 24s;
}
#cf4a img:nth-of-type(6) {
  -webkit-animation-delay: 21s;
  -moz-animation-delay: 21s;
  -o-animation-delay: 21s;
  animation-delay: 21s;
}
#cf4a img:nth-of-type(7) {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  animation-delay: 18s;
}
#cf4a img:nth-of-type(8) {
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -o-animation-delay: 15s;
  animation-delay: 15s;
}
#cf4a img:nth-of-type(9) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
#cf4a img:nth-of-type(10) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  animation-delay: 9s;
}
#cf4a img:nth-of-type(11) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#cf4a img:nth-of-type(12) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
}
#cf4a img:nth-of-type(13) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}