.jssor-slider-container .container {
    cursor: move;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 980px;
    height: 380px;
    overflow: hidden;
}
.jssor-slider-container .container [u=caption] {
    position: absolute;
    left: 40%;
    top: 40%;
    width: 500px;
    height: 30px;
}
.jssor-slider-container {
    position: relative;
    width: 980px;
    height: 380px;
    overflow: hidden;
}
/* Hyperlink Images ON: the whole slide is the link's click target (delegated handler in
   render.gsp), so the cursor belongs on the slide rather than on its <img>. cursor is an
   inherited property, so this also covers .caption-wrapper — stretched across the slide,
   painted above the image, and otherwise still showing jssor's drag cursor from .container.
   Slider controls (arrows, bullets) are siblings of .container and keep their own cursor,
   as do caption buttons. The marker class follows the Hyperlink Images option itself (see
   renderer/album.gsp), so the whole slideshow reads as clickable whenever it is on.
   NOTE: do not raise the image with z-index here — the captions and the .slide:after dim
   overlay sit above the image by design and a z-index on the image hides both. */
.jssor-slider-container .container .hyper-link {
    cursor: pointer;
}
.jssor-slider-container .jssor-loader {
    position: absolute;
    top: 0px;
    left: 0px;
}
.jssor-slider-container .jssor-loader .loader-1 {
    filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;
}
.jssor-slider-container .jssor-loader .loader-2 {
    position: absolute; display: block; background: url(/wc/7.0.0/plugins/jssor-slider/images/slider/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;
}


/*bulet-navigation*/
.jssor-slider-container .jssorb03 {
    position: absolute;
}
.jssor-slider-container .jssorb03 div, .jssor-slider-container .jssorb03 div:hover, .jssor-slider-container .jssorb03 .av {
    position: absolute;
    /* size of bullet elment */
    width: 21px;
    height: 21px;
    text-align: center;
    line-height: 21px;
    color: white;
    font-size: 12px;
    background: url(/wc/7.0.0/plugins/jssor-slider/images/slider/b03.png) no-repeat;
    overflow: hidden;
    cursor: pointer;
}
.jssor-slider-container .jssorb03 div { background-position: -5px -4px; }
.jssor-slider-container .jssorb03 div:hover, .jssor-slider-container .jssorb03 .av:hover { background-position: -35px -4px; }
.jssor-slider-container .jssorb03 .av { background-position: -65px -4px; }
.jssor-slider-container .jssorb03 .dn, .jssor-slider-container .jssorb03 .dn:hover { background-position: -95px -4px; }

/*Arrow Navigator*/
.jssor-slider-container .jssora20l, .jssora20r {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 55px;
    height: 55px;
    cursor: pointer;
    background: url(/wc/7.0.0/plugins/jssor-slider/images/slider/a20.png) no-repeat;
    overflow: hidden;
}
.jssor-slider-container .jssora20l {
    background-position: -3px -33px;
    top: 123px; left: 8px;
}
.jssor-slider-container .jssora20r {
    background-position: -63px -33px;
    top: 123px; right: 8px;
}
.jssor-slider-container .jssora20l:hover { background-position: -123px -33px; }
.jssor-slider-container .jssora20r:hover { background-position: -183px -33px; }
.jssor-slider-container .jssora20l.jssora20ldn { background-position: -243px -33px; }
.jssor-slider-container .jssora20r.jssora20rdn { background-position: -303px -33px; }

.jssor-slider-container .caption-wrapper {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 50px;
    text-align: center;
    padding: 15px;
    z-index: 1;
}

.jssor-slider-container .caption-wrapper [u=caption] {
    position: static;
    width: auto;
    color: #ffffff;
    display: block;
    height: auto;
    background: none;
    padding: 10px 0;
}

.jssor-slider-container .caption-wrapper [u=caption] a {
    padding: 5px 20px;
    border: 1px #fff solid;
    display: inline-block;
    color: #ffffff;
}
.jssor-slider-container .title {
    font-size: 1.5rem;
}
.jssor-slider-container .description {
    font-size: .8rem;
}
.jssor-slider-container .slide:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0,0,0, .5);
}
.jssor-slider-container .caption-btn-wrap .button {
    display: inline-block;
    margin: 0 3px;
}
.widget-gallery.jssorSlider:before {
    background: url(/wc/7.0.0/plugins/jssor-slider/images/slider-loading.gif) no-repeat center center;
    content: '';
    height: 80px;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    width: 80px
}
.widget-gallery.jssorSlider .jssor-slider-container .slide > img,
.widget-gallery.jssorSlider video.jssor-video {
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    object-fit: cover;
}

/* Editor wraps the slideshow with fee-gallery-jssor / fee-gallery-jssor2 /
   fee-gallery-jssor3 instead of .widget-gallery.jssorSlider, so the live-site
   sizing rule above never applies in the editor preview — slides fell back
   to natural size and left empty space. Cover all three variants here. */
[class*="fee-gallery-jssor"] .jssor-slider-container .slide > img,
[class*="fee-gallery-jssor"] video.jssor-video {
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    object-fit: cover;
}
.fee-gallery-jssor .jssor-slider-container .slide.video::after{
    content: unset !important;
}