.slideshow {
  list-style-type: none;

}

/** SLIDESHOW box-shadow: rgba(99, 99, 99, 0.2) 2px 2px 8px 2px;**/
.slideshow,
.slideshow:after { 
 position: fixed;
    width: 755px;
    height: 650px;
    margin-top: -30px;

    z-index: 1; 
 
}

.slideshow li span { 
	position: absolute;

top:30px;
    left: 5px;
	width:40%;
	height:40%;
box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 12px;
border-radius:25px;
    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("1.jpg"); 
    animation-delay: 0s; 
}
.slideshow li:nth-child(2) span { 
    background-image: url("2.jpg");
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url("3.jpg");
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url("4.jpg");   
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url("5.jpg");
    animation-delay: 24s; 
}
.slideshow li:nth-child(6) span { 
    background-image: url("6.jpg");
    animation-delay: 30s; 
}
.slideshow li:nth-child(7) span { 
    background-image: url("7.jpg");
    animation-delay: 36s; 
}
.slideshow li:nth-child(8) span { 
    background-image: url("8.jpg");   
    animation-delay: 42s; 
}
.slideshow li:nth-child(9) span { 
    background-image: url("9.jpg");
    animation-delay: 48s; 
}
.slideshow li:nth-child(10) span { 
    background-image: url("10.jpg");
    animation-delay: 54s; 	
}
.slideshow li:nth-child(11) span { 
    background-image: url("11.jpg");
    animation-delay: 60s; 	
}
.slideshow li:nth-child(12) span { 
    background-image: url("12.jpg");
    animation-delay: 66s; 
}


@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 }
}
@media screen and (min-width: 476px){

  .slideshow{
    width: 100%;
  }
}
@media screen and (min-width: 768px){

  .slideshow{
    width: 100%;
  }
}