.slideshow {
    width: 350px;
    height: 500px;
    margin-left: 2%;
margin-top: 5%;
   /* margin: 25px auto;*/
    overflow: hidden;
    position: relative;
}

.slide::after {
    content: '';
    display: block;
    width: 350px;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.15);
    background-position: fixed;
}

.wrapper {
    width: 350px;
    height: 0;
    padding-bottom: 75%;
    position: relative;
}

.slide {
    position: absolute;
    left: 100%;
    top: 0;
    width: 350px;
}

.slide picture {
    display: block;
    width: 350px;
}

.slide picture img {
    display: block;
    width: 350px;
}

.wrapper .slide:nth-of-type(1) {
    animation: autoplay1 20s infinite -1s;
}

.wrapper .slide:nth-of-type(2) {
    animation: autoplay1 20s infinite 4s;
}

.wrapper .slide:nth-of-type(3) {
    animation: autoplay1 20s infinite 9s;
}

.wrapper .slide:nth-of-type(4) {
    animation: autoplay1 20s infinite 14s;
}

@keyframes autoplay1 {
    0% {
        left: 100%;
    }
    5% {
        left: 0;
    }
    25% {
        left: 0;
    }
    30% {
        left: -100%;
    }
    100% {
        left: -100%
    }
}



@keyframes autoplay2 {
    0% {
        left: -100%;
    }
    5% {
        left: 0;
    }
    25% {
        left: 0;
    }
    30% {
        left: 100%;
    }
    100% {
        left: 100%
    }
}

@media only screen and (max-width: 640px) {
    .wrapper {
        padding-bottom: 150%;
    }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
    .slideshow {
        max-width: 480px;
    }
    .wrapper {
        padding-bottom: 62.5%;
    }
}

@media only screen and (max-width: 480px) and (orientation: portrait) {
    .wrapper {
        padding-bottom: 150%;
    }
}