.slideshow {
  list-style-type: none;

}

/** SLIDESHOW **/
.slideshow,
.slideshow:after { 
 position: fixed;
    width: 855px;
    height: 650px;
    margin-top: -30px;
border-radius:25px;
    z-index: 1; 
 
}

.slideshow li span { 
	position: absolute;

top:25px;
    left: 5px;
	width:50%;
	height:50%;
border-radius:25px;
box-shadow: 2px 2px 12px #373737;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    animation: imageAnimation 30s linear  0s; 
}



.slideshow li:nth-child(1) span { 
    background-image: url("0.webp"); 
    animation-delay: 0s; 
}
.slideshow li:nth-child(2) span { 
    background-image: url("1.webp");
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url("2.webp");
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url("3.webp");   
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url("4.webp");
    animation-delay: 24s; 
}
.slideshow li:nth-child(6) span { 
    background-image: url("5.webp");
    animation-delay: 30s; 
}
.slideshow li:nth-child(7) span { 
    background-image: url("6.webp");
    animation-delay: 36s; 
}
.slideshow li:nth-child(8) span { 
    background-image: url("7.webp");   
    animation-delay: 42s; 
}
.slideshow li:nth-child(9) span { 
    background-image: url("8.webp");
    animation-delay: 48s; 
}
.slideshow li:nth-child(10) span { 
    background-image: url("9.webp");
    animation-delay: 54s; 	
}
.slideshow li:nth-child(11) span { 
    background-image: url("10.webp");
    animation-delay: 60s; 	
}
.slideshow li:nth-child(12) span { 
    background-image: url("12.webp");
    animation-delay: 66s; 
}
.slideshow li:nth-child(13) span { 
    background-image: url("12.webp");
    animation-delay: 72s; 
}
.slideshow li:nth-child(14) span { 
    background-image: url("14.webp");   
    animation-delay: 78s; 
}
.slideshow li:nth-child(15) span { 
    background-image: url("15.webp");
    animation-delay: 84s; 
}
.slideshow li:nth-child(16) span { 
    background-image: url("16.webp");
    animation-delay: 90s; 
}
.slideshow li:nth-child(17) span { 
    background-image: url("17.webp");
    animation-delay: 96s; 
}
.slideshow li:nth-child(18) span { 
    background-image: url("18.webp");   
    animation-delay: 102s; 
}
.slideshow li:nth-child(19) span { 
    background-image: url("19.webp");
    animation-delay: 108s; 
}
.slideshow li:nth-child(20) span { 
    background-image: url("20.webp");
    animation-delay: 114s; 
}
.slideshow li:nth-child(21) span { 
    background-image: url("21.webp");
    animation-delay: 120s; 
}
.slideshow li:nth-child(22) span { 
    background-image: url("22.webp");   
    animation-delay: 126s; 
}
.slideshow li:nth-child(23) span { 
    background-image: url("23.webp");
    animation-delay: 132s; 
}
.slideshow li:nth-child(24) span { 
    background-image: url("24.webp");
    animation-delay: 138s; 
}
.slideshow li:nth-child(25) span { 
    background-image: url("25.webp");
    animation-delay: 144s; 
}
.slideshow li:nth-child(26) span { 
    background-image: url("26.webp");   
    animation-delay: 150s; 
}


@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 1 }
    100% { opacity: 0 }
}