.cis-slider-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:20px 10px;
    box-sizing:border-box;
}

.cis-slider{
    display:flex;
    transition:transform .5s ease-out;
}

/* flex item */
.cis-slide{
    flex:0 0 auto;
}

/* inner card that we can size & color per settings */
.cis-slide-inner{
    width:100%;
    margin:0 auto;
    box-sizing:border-box;
}

/* image */
.cis-slide-img{
    width:100%;
    height: var(--cis-img-height, 250px);
    object-fit: var(--cis-img-fit, cover);
    cursor: var(--cis-img-cursor, pointer);
    display:block;
}

/* Nav buttons */
.cis-prev,.cis-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:0;
    padding:10px 14px;
    cursor:pointer;
    z-index:10;
    border-radius:6px;

    background: var(--cis-nav-bg, rgba(0,0,0,.5));
    color: var(--cis-nav-icon-color, #fff);
}

.cis-prev{left:10px;}
.cis-next{right:10px;}

.cis-nav-ico{
    display:block;
    width: 14px;
    height: 14px;
    position: relative;
}

/* Use CSS shapes per icon choice */
.cis-nav-ico::before{
    content: "";
    position:absolute;
    inset:0;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform-origin:center;
}

/* Chevron */
.cis-nav-ico[data-ico="chevron-left"]::before{ transform: rotate(135deg); }
.cis-nav-ico[data-ico="chevron-right"]::before{ transform: rotate(-45deg); }

/* Arrow */
.cis-nav-ico[data-ico="arrow-left"]::before{
    border-right: 0;
    border-bottom: 0;
    width: 12px;
    height: 0;
    top: 6px;
    left: 1px;
    border-top: 3px solid currentColor;
}
.cis-nav-ico[data-ico="arrow-left"]::after{
    content:"";
    position:absolute;
    left: 0;
    top: 3px;
    width: 8px;
    height: 8px;
    border-left: 3px solid currentColor;
    border-top: 3px solid currentColor;
    transform: rotate(-45deg);
}
.cis-nav-ico[data-ico="arrow-right"]::before{
    border-right: 0;
    border-bottom: 0;
    width: 12px;
    height: 0;
    top: 6px;
    left: 1px;
    border-top: 3px solid currentColor;
}
.cis-nav-ico[data-ico="arrow-right"]::after{
    content:"";
    position:absolute;
    right: 0;
    top: 3px;
    width: 8px;
    height: 8px;
    border-right: 3px solid currentColor;
    border-top: 3px solid currentColor;
    transform: rotate(45deg);
}

/* Angle (thinner chevron) */
.cis-nav-ico[data-ico="angle-left"]::before{ border-width:2px; transform: rotate(135deg); }
.cis-nav-ico[data-ico="angle-right"]::before{ border-width:2px; transform: rotate(-45deg); }

/* Caret (bigger chevron) */
.cis-nav-ico[data-ico="caret-left"]::before{ border-width:4px; transform: rotate(135deg); }
.cis-nav-ico[data-ico="caret-right"]::before{ border-width:4px; transform: rotate(-45deg); }

/* Triangle */
.cis-nav-ico[data-ico="triangle-left"]::before{
    border:0;
    width:0;height:0;
    top: 1px; left: 2px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid currentColor;
    transform:none;
}
.cis-nav-ico[data-ico="triangle-right"]::before{
    border:0;
    width:0;height:0;
    top: 1px; left: 2px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid currentColor;
    transform:none;
}


/* Lightbox */
.cis-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}
.cis-lightbox img{
    max-width:90%;
    max-height:90%;
}
.cis-lightbox-close{
    position:absolute;
    top:20px;
    right:40px;
    font-size:40px;
    color:#fff;
    cursor:pointer;
}