.slider-container{
    --pos-slide: 0;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    position: relative;
}

.slider{
    height: 100%;
    position: relative;
    left: var(--pos-slide);
    display: flex;
    flex-wrap: nowrap;
    transition: left .25s ease-in-out;
    
}

.slider > *{
    flex: 1 0 100%;
    height: 100%;
    display: flex;
    list-style: none;
}

.slider-container .arrow{
    position: absolute;
    top: 50%; transform: translateY(-50%);
    height: 100px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
}

.slider-container .arrow-left{ left: 20px; }
.slider-container .arrow-right{ right: 20px; }

.slider-container .arrow:before{
    content: "";
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 20px;
    transition: border-color .25s ease-in-out;
}

.slider-container .arrow:hover:before{
    border-color: rgba(var(--main-color));
}

.slider-container .arrow-left:before{
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.slider-container .arrow-right:before{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.slider-container .list-slide{
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-container .list-slide .img-slide{
    width: 100px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 20px 5px;
    filter: grayscale(1);
    cursor: pointer;
    position: relative;
    bottom: 0;
    transition-property: filter, bottom;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.slider-container .list-slide .img-slide:after{
    content: "";
    display: block;
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    background-color: rgb(var(--main-color));
    width: 10px;
    height: 10px;
    border-radius: 50px;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity, bottom;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.slider-container .list-slide .img-slide:hover,
.slider-container .list-slide .img-slide.active{
    filter: grayscale(0);
    bottom: 10px;
}

.slider-container .list-slide .img-slide:hover:after,
.slider-container .list-slide .img-slide.active:after{
    opacity: 1;
    bottom: -20px;
}

.slider-container .disabled{ display: none !important; }

@media screen and (max-width: 825px) {
    .slider-container{ height: 50vh; }
    .slider-container .arrow:before{ padding: 10px; }
    .slider-container .list-slide{ display: none; }
}