.zkslide{
    display: none;
    position: relative;
    overflow: hidden;

    -webkit-transition: width 0.7s ease-out, height 0.7s ease-out;
    -moz-transition: width 0.7s ease-out, height 0.7s ease-out;
    -o-transition: width 0.7s ease-out, height 0.7s ease-out;
    -ms-transition: width 0.7s ease-out, height 0.7s ease-out;
    transition: width 0.7s ease-out, height 0.7s ease-out;
}

.zkslide-single{
    -webkit-transition: opacity 0.7s ease-out;
    -moz-transition: opacity 0.7s ease-out;
    -o-transition: opacity 0.7s ease-out;
    -ms-transition: opacity 0.7s ease-out;
    transition: opacity 0.7s ease-out;
    vertical-align: top;
}

.zkslide-inner{
    position: absolute;
    overflow: visible;
}

.zkslide-inner.horizontal{
    white-space: nowrap;
}

.zkslide-inner.horizontal > div{
    display: inline-block;
    white-space: normal;
}

.zkslide-inner.animate{
    -webkit-transition: top 0.7s ease-out, left 0.7s ease-out;
    -moz-transition: top 0.7s ease-out, left 0.7s ease-out;
    -o-transition: top 0.7s ease-out, left 0.7s ease-out;
    -ms-transition: top 0.7s ease-out, left 0.7s ease-out;
    transition: top 0.7s ease-out, left 0.7s ease-out;
}

/* Optional pagination dots, centered in a row below the slider. The active dot is
   filled with the picked colour; inactive dots show only the coloured border. */
.zkslide-dots{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.zkslide-dot{
    width: 10px;
    height: 10px;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid var(--zkslide-dots-color, #0d6efd);
    background: transparent;
}

.zkslide-dot.active{
    background: var(--zkslide-dots-color, #0d6efd);
}