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

.img-container {
    width: 100%;
    margin: 0 auto;
    cursor: ew-resize;
}

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

#rotatorImage {
    width: 100%;
}

#slider360 {
    width: 382px;
}

@media screen and (max-width: 540px) {
#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 {
    display: none;
}

/* Track Slider */
.rotator input[type=range] {
 -webkit-appearance: none; 
  width: 100%; 
  background: transparent;
  margin: 18px 0;
}

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

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

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

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

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

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

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

.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 */
.rotator input[type=range]:focus::-webkit-slider-runnable-track {
   background: #107c10;
   outline: dashed 1px #FFF;
}

.rotator input[type=range]:focus::-ms-track {
   background: #107c10;
   outline: dashed 1px #FFF;
}

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

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