* {box-sizing:border-box}

.slideshow {
    display:none;
}

.slider-slideshow > .slideshow-container, .slider-slideshow > .slideshow-container > .img-container, .slider-slideshow > .slideshow-container > .img-container .slideshow-img {
    min-height: unset;
    max-height: unset;
}

/* Slideshow container */
.slideshow-container {
    max-width: var(--document-width);
    position: relative;
    margin: auto;
    height:100%;
    min-height: 500px;
    max-height: 500px;
}

/* Make the images invisible by default */
.img-container {
    display: none;
    overflow: hidden;
    height: 100%;
    min-height: 500px;
    max-height: 500px;
}

.slideshow-img {
    transition: transform 0.2s ease-in-out;
    height: 100%;
    object-fit: cover;   
    min-height: 500px;
    max-height: 500px;
    object-fit: contain;
    object-position: center center;
}
/* .slideshow-img:hover {
    transform:scale(1.1);
} */

/* forward & Back buttons */
.img-back, .img-forward {
    cursor: pointer;
    position: absolute;
    top: 48%;
    width: auto;
    /* margin-top: -23px; */
    padding: 10px 17px;
    color: var(--global-color-7);
    font-weight: bold;
    font-size: 19px;
    transition: 0.4s ease;
    /* border-radius: 0 5px 5px 0; */
    user-select: none;
}

/* Place the "forward button" to the right */
.img-forward {
    right: 0;
    /* border-radius: 4px 0 0 4px; */
}

/*when the user hovers,add a black background with some little opacity */
.img-back:hover, .img-forward:hover {
    background-color: var(--global-color-0);
    color: var(--global-color-5);
}


/* The circles or bullets indicators */
.img-dots {
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin: 0 3px;
    background: linear-gradient(92.18deg, var(--global-color-0) -25.78%, var(--global-color-1) 123.02%);
    opacity: 0.3;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.5s ease;
}

.enable, .dots:hover {
    background: var(--global-color-0);
    opacity: 1;
}

@media(max-width: 767px) {
    .img-dots {
        width: 20px;
        height: 20px;
    }
}