/*
* { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #222; }
*/
.slideshow-container {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid white;
    overflow: hidden;
}
.slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 1200ms ease-in-out;
}
.slide {
    width: 100%;
    height: 100%;
    display: flex;
    /*flex: 0 0 100%; */
    flex-shrink: 0;
    
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
}

.slide:nth-child(1){
    background: linear-gradient(to right, #222, #555 50%, #222);
    background-size: cover;
    background-position: center;
    /*top: 25.2vh;*/
    /*height: calc(100vh - 25.2vh);*/
    background-image: url('../share/tema/drink4.jpg');
}
.slide:nth-child(2) { background: linear-gradient(to right, #222, #555 50%, #222); }
.slide:nth-child(3) { background: linear-gradient(to right, #222, #555 50%, #222); }
.slide:nth-child(4) { background: linear-gradient(to right, #222, #555 50%, #222); }
.slide:nth-child(5) { background: linear-gradient(to right, #222, #555 50%, #222); }

.indicators {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
}
.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: #333;
    margin: 0 5px;
    cursor: pointer;
    transition: 0.3s;
}
.indicator.active {
    background: white;
    border-color: #333;
}
.nav {
    position: absolute;
    top: 0;
    width: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.nav:hover { opacity: 0.5; }
.prev { left: 0; justify-content: flex-start;}
.next { right: 0; justify-content: flex-end;}
.nav button {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    
    /*
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    */
}
@media screen and (max-width: 768px)
{
    .slides {
        transition: transform 700ms ease-in-out;
    }
}