/* ==========================================
   Slideshow
========================================== */

.slideshow{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    opacity:1;
    transition:opacity .35s ease;
}

.slideshow.hidden{
    display:none;
}

.slideshow-overlay{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.slide-content{
    max-width:95%;
    max-height:95%;
    text-align:center;
}

.slide-content img{

    max-width:100%;
    max-height:80vh;

    border-radius:12px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.5);

    transition:opacity .3s ease;
}

.slide-info{

    margin-top:20px;

    color:#fff;

    display:flex;

    justify-content:center;

    gap:40px;

    font-size:1rem;

}

.slide-controls{

    margin-top:25px;

}

.slide-controls button{

    background:#355c4d;

    color:#fff;

    border:none;

    padding:12px 22px;

    border-radius:30px;

    margin:0 8px;

    cursor:pointer;

    transition:.3s;

    font-size:1rem;

}

.slide-controls button:hover{

    background:#4b7865;

}

.slide-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    color:white;

    font-size:2rem;

    cursor:pointer;

    transition:.3s;

}

.slide-arrow:hover{

    background:#355c4d;

}

.slide-left{

    left:25px;

}

.slide-right{

    right:25px;

}

.slide-close{

    position:absolute;

    top:25px;

    right:25px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    color:white;

    font-size:1.4rem;

    cursor:pointer;

    transition:.3s;

}

.slide-close:hover{

    background:#b40000;

}

/* Mobiel */

@media (max-width:768px){

    .slide-arrow{

        width:46px;

        height:46px;

        font-size:1.4rem;

    }

    .slide-left{

        left:8px;

    }

    .slide-right{

        right:8px;

    }

    .slide-info{

        flex-direction:column;

        gap:8px;

    }

    .slide-controls button{

        display:block;

        width:220px;

        margin:10px auto;

    }

}