.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: white;
    color: #000;
    font-weight: bolder;
    font-size: 22px;
    text-align: center;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  



.slideshow {
    list-style-type: none;
  }
  
  /** SLIDESHOW **/
  .slideshow,
  .slideshow:after { 
      top: -16px; /*Not sure why I needed this fix*/
          position: fixed;
      width: 100%;
      height: 100%;
      left: 0px;
      z-index: 0; 
  }
  
  .slideshow li span { 
          position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      color: transparent;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      opacity: 0;
      z-index: 0;
      animation: imageAnimation 30s linear infinite 0s; 
  }
  
  
  
  .slideshow li:nth-child(1) span { 
      background-image: url("slides/1.jpg"); 
  }
  .slideshow li:nth-child(2) span { 
      background-image: url("slides/2.jpg");
      animation-delay: 6s; 
  }
  .slideshow li:nth-child(3) span { 
      background-image: url("slides/3.jpg");
      animation-delay: 12s; 
  }
  .slideshow li:nth-child(4) span { 
      background-image: url("slides/4.jpg");   
      animation-delay: 18s; 
  }
  .slideshow li:nth-child(5) span { 
    background-image: url("slides/5.jpg"); 
    animation-delay: 24s; 
}
.slideshow li:nth-child(6) span { 
    background-image: url("slides/1.jpg");
    animation-delay: 30s; 
}
.slideshow li:nth-child(7) span { 
    background-image: url("slides/2.jpg");
    animation-delay: 12s; 
}
.slideshow li:nth-child(8) span { 
    background-image: url("slides/3.jpg");   
    animation-delay: 36s; 
}
.slideshow li:nth-child(9) span { 
    background-image: url("slides/4.jpg");   
    animation-delay: 40s; 
}
.slideshow li:nth-child(10) span { 
    background-image: url("slides/5.jpg");   
    animation-delay: 44s; 
}

  
  
  @keyframes imageAnimation { 
      0% { opacity: 0; animation-timing-function: ease-in; }
      8% { opacity: 1; animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  
  @keyframes titleAnimation { 
      0% { opacity: 0 }
      8% { opacity: 1 }
      17% { opacity: 1 }
      19% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  
  .no-cssanimations .cb-slideshow li span {
      opacity: 1;
  }