/*
    *** General ***
*/

:root {
    --slideshow-movement: 4s;
    --slideshow-pictures: 11;
    --slideshow-cell-width: 30vw;
    --slideshow-cell-margin: 0px;
    --slideshow-shrink: 0.7;
}


/*
    *** Show ***
*/
.slideshow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 45px;
    margin-bottom: 45px;
    width: calc((var(--slideshow-cell-width) + 2 * var(--slideshow-cell-margin)) * 3);
    flex-shrink: 0;
}

.defaultContainer {
    overflow-x: hidden;
}


.slideshow > div {
    margin: 0 var(--slideshow-cell-margin);
    flex-shrink: 0;
    width: var(--slideshow-cell-width);
    overflow: hidden;
    display: flex;
    border-radius: 10px;
}

.picWrapper {
    animation: picMove calc(var(--slideshow-pictures) * var(--slideshow-movement)) steps(var(--slideshow-pictures)) infinite;
    display: flex;
}

.picWrapper > div {
    width: var(--slideshow-cell-width);
}

.picWrapper > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1100px) {
    :root {
        --slideshow-cell-width: 50vw;
        --slideshow-shrink: 0;
        --slideshow-cell-margin: -50px;
    }
}

@keyframes picMove {
    0%   {transform: translateX(0);}
    100% {transform: translateX(calc(var(--slideshow-cell-width) * var(--slideshow-pictures) * -1));}
}

.slideOut {
    animation: slideOut var(--slideshow-movement) ease infinite;
}

@keyframes slideOut {
    0%   {transform: scale(var(--slideshow-shrink));}
    70%  {transform: scale(var(--slideshow-shrink));}
    100% {transform: scale(0);}
}

.slideShrink {
    animation: slideShrink var(--slideshow-movement) ease infinite;
}

@keyframes slideShrink {
    0%   {transform: translateX(0) scale(1);}
    70%  {transform: translateX(0) scale(1);}
    100% {transform: translateX(calc((var(--slideshow-cell-width) + 2 * var(--slideshow-cell-margin)) * -1)) scale(var(--slideshow-shrink));}
}

.slideGrow {
    animation: slideGrow var(--slideshow-movement) ease infinite;
    z-index: 1;
}

@keyframes slideGrow {
    0%   {transform: translateX(0) scale(var(--slideshow-shrink));}
    70%  {transform: translateX(0) scale(var(--slideshow-shrink));}
    100% {transform: translateX(calc((var(--slideshow-cell-width) + 2 * var(--slideshow-cell-margin)) * -1)) scale(1);}
}

.slideIn {
    animation: slideIn var(--slideshow-movement) ease infinite;
    transform: translateX(calc((var(--slideshow-cell-width) + 2 * var(--slideshow-cell-margin)) * -1));
}

@keyframes slideIn {
    0%   {transform: translateX(calc((var(--slideshow-cell-width) + 2 * var(--slideshow-cell-margin)) * -1)) scale(0);}
    70%  {transform: translateX(calc((var(--slideshow-cell-width) + 2 * var(--slideshow-cell-margin)) * -1)) scale(0);}
    100% {transform: translateX(calc((var(--slideshow-cell-width) + 2 * var(--slideshow-cell-margin)) * -1)) scale(var(--slideshow-shrink));}
}