/* Rotator */

@media screen and (min-width: 1921px) {
    .rotator360,
    .rotator {
        max-width: 1920px;
        margin: 0px auto;
    }
}

.rotator360,
.rotator {
    width: 100%;
    height: 100%;
    min-width: 320px;
    margin: 0 auto;
    display: none;
    /* revealed when first image loads */
}

.rotator360 .img-container,
.rotator .img-container {
    width: 100%;
    margin: 0 auto;
    cursor: ew-resize;
    touch-action: pan-y;
}

.rotator360 .img-container:focus,
.rotator .img-container:focus {
    outline: 2px dotted #fff !important;
    outline-offset: -2px;
}

.img360 {
    /*background-color: #171717;*/
    width: 100%;
}

.rotator360 .rotatorImage,
#rotatorImage {
    width: auto;
    max-width: 100%;
}

.slider360,
#slider360 {
    width: 382px;
}

@media screen and (max-width: 540px) {
    .slider360,
    #slider360 {
        width: 300px;
    }
}

.slider {
    margin-bottom: 0 !important;
    width: auto;
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
}

.caption {
    letter-spacing: 3px;
    color: #c8c8c8;
    font-weight: 600;
    padding: 0px;
    text-align: center;
    padding-top: 24px;
}

.preload-imgs,
#preload-imgs {
    /*display: none;*/
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    height: 0;
}


/* Track Slider */

.rotator360 input[type=range],
.rotator input[type=range] {
    -webkit-appearance: none;
    /*width: 100%;*/
    background: transparent;
    margin: 10px 0;
    padding: 10px 0;
}

.rotator360 input[type=range]::-webkit-slider-thumb,
.rotator input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

.rotator360 input[type=range]::-ms-track,
.rotator input[type=range]::-ms-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    background: #C0C0C0;
}

.rotator360 input[type=range]::-webkit-slider-runnable-track,
.rotator input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    background: #C0C0C0;
}

.rotator360 input[type=range]::-moz-range-track,
.rotator input[type=range]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    background: #C0C0C0;
}

.rotator360 input[type=range]::-webkit-slider-thumb,
.rotator input[type=range]::-webkit-slider-thumb {
    height: 20px;
    width: 67px;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -8px;
    /* padding: 10px 0; */
    outline: 4px solid #5dc21e;
    outline-offset: -10px;
    box-shadow: none;

}

.rotator360 input[type=range]::-moz-range-thumb,
.rotator input[type=range]::-moz-range-thumb {
    height: 8px;
    width: 67px;
    background: #5dc21e;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -2.5px;
    box-shadow: none;

}

.rotator360 input[type=range]::-ms-thumb,
.rotator input[type=range]::-ms-thumb {
    height: 8px;
    width: 67px;
    background: #5dc21e;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -1px;
    box-shadow: none;

}

.rotator360 input[type=range] .thumb,
.rotator input[type=range]  .thumb{
    box-shadow: none;
}

.rotator360 input[type=range]::-ms-fill-lower,
.rotator input[type=range]::-ms-fill-lower {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    background: #C0C0C0;
}

input[type=range]::-ms-fill-upper {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    background: #C0C0C0;
}


/* Accessibility */

.rotator360 .slider input[type=range]:focus,
.rotator .slider input[type=range]:focus {
    outline: dotted 2px #fff;
    outline-offset: -2px;
}
/*
.rotator360 input[type=range]:focus::-webkit-slider-runnable-track,
.rotator input[type=range]:focus::-webkit-slider-runnable-track {
    outline: dashed 1px #fff;
    outline-offset: 7px;
}

.rotator360 input[type=range]:focus::-ms-track,
.rotator input[type=range]:focus::-ms-track {
    outline: dashed 1px #fff;
    outline-offset: 7px;
}
*/
@media screen and (-ms-high-contrast:black-on-white),
screen and (forced-colors: active) and (prefers-color-scheme: light) {
    .rotator360 .slider input[type=range]:focus,
    .rotator .slider input[type=range]:focus {
        outline-color: #000
    }
    /*
    .rotator360 input[type=range]:focus::-webkit-slider-runnable-track,
    .rotator input[type=range]:focus::-webkit-slider-runnable-track {
        outline-color: #000
    }
    .rotator360 input[type=range]:focus::-ms-track,
    .rotator input[type=range]:focus::-ms-track {
        outline-color: #000
    }
        */
    .rotator360 .img-container:focus,
    .rotator .img-container:focus {
        forced-color-adjust: none;
    }
}


/*
.rotator360 input[type=range]:focus::-ms-fill-lower,
.rotator input[type=range]:focus::-ms-fill-lower {
    background: #107c10;
}
.rotator360 input[type=range]:focus::-ms-fill-upper,
.rotator input[type=range]:focus::-ms-fill-upper {
    background: #107c10;
}
*/

@media (forced-colors: active) {
    .rotator360 input[type=range],
    .rotator input[type=range] {
        forced-color-adjust: none;
    }
}


/* for using multiple rotators inside a full-width pivot */

@media only screen and (min-width: 0) {
    .rotator360-pivot .m-multi-feature >section>.c-pivot {
        margin: 0;
    }
    .rotator360-pivot .m-multi-feature >section>.c-pivot ul[role="tablist"] {
        padding-bottom: 16px;
    }
}