.slideshow-container{
    width: 80%;
    margin: 0 auto;
    position: relative;
    height: 80vh;
}
.prev,.next{
    position: absolute;
    color: blue;
    font-size: 30px;
    padding: 20px;
    cursor: pointer;
    transition: all .5s ease;
}
.prev:hover,.next:hover{
    color: white;
    background: black;
}
.prev{
    top:50%;
}
.next{
    top:50%;
    right: 0px;
}
.mySlides{
    width: 100%;
    height: 100%;
}
.mySlides img{
    width: 100%;
    height: 100%;   
    object-fit: cover;
}
.text{
    text-align: center;
    font-size: 23px;
}
.dots{
    margin: 4vh;
    display: flex;
    justify-content: center;
}
.dot{
    cursor: pointer;
    margin: 1vh;
    background: rgb(184, 183, 183);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    transition: background .5s ease-in;
}
.dot:hover{
    background: gray;
}
.mySlides{
    display: none;
}
.numbertext{
    position: absolute;
    color: white;
    padding: 20px;
    font-size: 1.8rem;
}
.dot.active{
    background: black;
}

.mySlides.fade{
    animation: fade 1s ease;
}

@keyframes fade{
    from{
        opacity: 0.23;
    }
    to{
        opacity: 1;
    }
}