.thumbnail-slideshow-container {
    width: 340px;
    height: auto;
    position: relative;
    margin: auto;
    overflow: hidden;
    transition: transform 300ms ease 0ms;
    animation: 1s thumbnail-fadein ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    max-width: 100%;
    padding-bottom: 100%;
}

.thumbnail-slideshow-container:hover {
    transform: translateX(2px) translateY(2px);
}

.thumbnail-slideshow-container .slide {
    position: absolute; 
    top: 0;
    left: 100%;
    width: 100%;
    height: auto;
    animation-name: thumbnail-slideshow-anim;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* not in use - handled dinamically */
/* .thumbnail-slideshow-container .slide:nth-child(1) {
    animation-delay: 0s
}

.thumbnail-slideshow-container .slide:nth-child(2) {
    animation-delay: 4s
}

.thumbnail-slideshow-container .slide:nth-child(3) {
    animation-delay: 8s
} */

@keyframes thumbnail-fadein {
    0% {opacity: 0}
    100% {opacity: 1}
}

.thumbnail-slideshow-container .img-overlay {
    position: absolute; 
    top: 0%;
    left: 0%; 
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* tablet */
@media only screen and (min-width: 768px) and (max-width: 980px)  {
    .thumbnail-slideshow-container {
        margin-bottom: 20px;
    }
}

/* mobile */
@media only screen and (max-width: 767px) {
    .thumbnail-slideshow-container {
        margin-bottom: 20px;
    }
}

/* bug fix */
@media only screen and (min-width: 426px) {
    .thumbnail-slideshow-container {
        height: 340px;
        padding-bottom: 0px;
    }
}