*{box-sizing:border-box}
.slideshow-container{
    max-width:1000px;
    width:100%;
    position:relative;
    margin:0 auto;
    overflow:hidden;
    border-radius:16px;
}
.mySlides{
    display:none;
}
.mySlides img{
    width:100%!important;
    height:auto;
    display:block;
}
.prev,.next{
    cursor:pointer;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:bold;
    font-size:20px;
    border-radius:50%;
    background:rgba(0,0,0,.58);
    border:1px solid rgba(255,255,255,.15);
    transition:.2s;
    z-index:5;
}
.prev{left:12px}
.next{right:12px}
.prev:hover,.next:hover{
    background:#ffd400;
    color:#111;
}
.dot{
    cursor:pointer;
    height:8px;
    width:8px;
    margin:10px 3px;
    background:#555b63;
    border-radius:8px;
    display:inline-block;
    transition:.2s;
}
.active,.dot:hover{
    width:24px;
    background:#ffd400;
}
.fade{
    animation-name:fade;
    animation-duration:.55s;
}
@keyframes fade{
    from{opacity:.35}
    to{opacity:1}
}
@media(max-width:600px){
    .slideshow-container{border-radius:12px}
    .prev,.next{width:36px;height:36px;font-size:16px}
}