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

/*BEGIN SLIDE SHOW STYLE*/
.container {
 height: 100%;
 width: 100%;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 background: hsl(0, 96%, 48%);
}
    
.overlay {
 background-color: rgba(44, 43, 43, 0);
 height: 100%;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 100;
}    

img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 position: absolute;
 top: 0;
 left: 0;
 
 /*animation-name: fade;
 animation-duration: 20s; 
 animation-timing-function: ease-out;
 animation-delay: 10ms;
 animation-iteration-count: infinite;
 animation-direction: right;
 animation-fill-mode: none;*/


 animation: fade 70s cubic-bezier(0, 1.5, 0.5, 1) infinite ;
}
/*NOTE THE 10TH IMAGE GOES FIRST*/
 img:nth-of-type(1) {
 animation-delay: 63s;
}
    
 img:nth-of-type(2) {
 animation-delay: 56s;
}
  
 img:nth-of-type(3) {
 animation-delay: 49s;
}
    
  img:nth-of-type(4) {
  animation-delay: 42s;
}   

  img:nth-of-type(5) {
  animation-delay: 35s;
}

img:nth-of-type(6) {
  animation-delay: 28s;
}

img:nth-of-type(7) {
  animation-delay: 21s;
}

img:nth-of-type(8) {
  animation-delay: 14s;
}

img:nth-of-type(9) {
  animation-delay: 7s;
}

img:nth-of-type(10) {
  animation-delay: 0s;
}
    
 @keyframes fade {
 0% {
     opacity: 1; 
}
    
10% {
     opacity: 0;
}
 
 20% {
     opacity: 0;
}
  
 30% { 
     opacity: 0;
}
 
 40% { 
     opacity: 0;
}

 50% { 
     opacity: 0;
}

 60% { 
     opacity: 0;
}
    
 70% { 
     opacity: 0;
}

 80% { 
     opacity: 0;
}

 90% { 
     opacity: 0;
}

100% { 
     opacity: 1;     
}
}
/*END SLIDE SHOW STYLE*/