#cf {
    position:relative;
    left: 50%;
transform: translateX(-50%);
text-align: center;
    height:300px;
  }
  
  #cf img {
    position:absolute;
    margin: auto;
    left: 0;
    right: 0;
    text-align: center;
    height: 100%;
  }

  /* The animation-delay property should be listed for every image. It's easiest to do in reverse. The last should have no delay, so "0". 
  Then count up in the times table of the number of seconds you want each image to show for */

  #cf img:nth-of-type(1) {
    animation-delay: 28s;
  }
  #cf img:nth-of-type(2) {
    animation-delay: 24s;
  }

  #cf img:nth-of-type(3) {
    animation-delay: 20s;
  }
  #cf img:nth-of-type(4) {
    animation-delay: 16s;
  }

  #cf img:nth-of-type(5) {
    animation-delay: 12s;
  }
  #cf img:nth-of-type(6) {
    animation-delay: 8s;
  }

  #cf img:nth-of-type(7) {
    animation-delay: 4s;
  }
  #cf img:nth-of-type(8) {
    animation-delay: 0s;
  }





/* There need to be four values in total, and the opacities shouldn't be changed. 
The difference between the first and second percentages determine the speed of the crossfade in.
The difference between the second and third determine the speed of the crossfade out.
The third and fourth should be just below and just above 100 / number of images. */

@keyframes crossfade {

  0% {
    opacity:0;
  }

3% {
    opacity:1;
  }

 12% {
    opacity:1;
  }

 14% {
    opacity:0;
  }


  }

  /* The animation duration is the total length for all the photos to show. So length of time for each photo to show x number of photos */
  
  #cf img { 
  opacity: 0;
  animation-name: crossfade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 32s;
    }