.up360 {
  --primary-color: #03A9F4;
  --secondry-color: #ddd;
  --button-shadow: 4px 4px 10px 0px #000;
  --button-shadow-active: 2px 2px 5px 0 #000;
  --button-size-lg: 65px;
  --button-size-md: 40px;
  --button-transition: 200ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  --ratio: calc(9 / 16 * 100%);
  --background-color: #000;
  --loader-background: #222;
  --loader-progress-background: #000;
  --loader-progress-foreground: #03A9F4; }

.up360 {
  position: relative;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 0 !important;
  height: 460px;
  max-height: 100vh;
  display: flex;
  align-items: stretch; }
  .up360__screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; }
  .up360__panel-wrap {
    position: absolute;
    left: 1rem;
    top: 1rem;
    bottom: 1rem;
    right: 1rem; }
  .up360__loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: var(--loader-background);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity ease-out 300ms; }

@-webkit-keyframes rotate-animation {
  0% {
    transform: rotateZ(0deg); }
  70% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotateZ(180deg); } }

@keyframes rotate-animation {
  0% {
    transform: rotateZ(0deg); }
  70% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotateZ(180deg); } }
    .up360__loading .loading {
      width: 80px;
      height: 80px;
      position: relative; }
      .up360__loading .loading::after {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        -webkit-animation: rotate-animation 2s ease-in-out infinite;
                animation: rotate-animation 2s ease-in-out infinite;
        background: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22iso-8859-1%22%3F%3E%0D%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%0D%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%3Csvg version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%0D%09 viewBox%3D%220 0 297 297%22 xml%3Aspace%3D%22preserve%22%3E%0D%3Cpath fill%3D%22%23fff%22 d%3D%22M250.929%2C276.619h-17.463v-31.301c0-31.668-17.379-60.777-48.936-81.967c-3.924-2.635-6.363-8.324-6.363-14.852%0D%09s2.439-12.215%2C6.365-14.852c31.555-21.188%2C48.934-50.297%2C48.936-81.965V20.381h17.461c5.627%2C0%2C10.189-4.562%2C10.189-10.191%0D%09C261.118%2C4.561%2C256.556%2C0%2C250.929%2C0H46.071c-5.627%2C0-10.19%2C4.561-10.19%2C10.189c0%2C5.629%2C4.563%2C10.191%2C10.19%2C10.191h17.463v31.303%0D%09c0%2C31.668%2C17.377%2C60.777%2C48.936%2C81.965c3.924%2C2.637%2C6.363%2C8.324%2C6.363%2C14.852c0%2C6.529-2.439%2C12.217-6.365%2C14.854%0D%09c-31.557%2C21.188-48.934%2C50.297-48.934%2C81.965v31.301H46.071c-5.627%2C0-10.19%2C4.563-10.19%2C10.191c0%2C5.629%2C4.563%2C10.19%2C10.19%2C10.19%0D%09h204.857c5.627%2C0%2C10.189-4.56%2C10.189-10.19C261.118%2C281.182%2C256.556%2C276.619%2C250.929%2C276.619z M83.915%2C245.318%0D%09c0-33.275%2C25.006-55.035%2C39.914-65.043c9.633-6.467%2C15.385-18.346%2C15.385-31.775c0-13.428-5.752-25.307-15.385-31.773%0D%09c-14.908-10.008-39.914-31.768-39.914-65.043V20.381h129.17l-0.002%2C31.303c0%2C33.275-25.006%2C55.035-39.912%2C65.041%0D%09c-9.635%2C6.469-15.387%2C18.348-15.387%2C31.775c0%2C13.43%2C5.752%2C25.307%2C15.385%2C31.775c14.908%2C10.008%2C39.914%2C31.768%2C39.916%2C65.043v31.301%0D%09H83.915V245.318z%22%2F%3E%0D%3C%2Fsvg%3E%0D");
        background-position: center center;
        background-size: 50% 50%;
        background-repeat: no-repeat; }
    .up360__loading .progress {
      background: var(--loader-progress-background);
      border-radius: 50%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
      .up360__loading .progress .progressbar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        height: var(--progress-percentage);
        background: var(--loader-progress-foreground); }
  .up360__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform-origin: center; }
    .up360__content__low-res > .up360__frame {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      opacity: 0; }
      .up360__content__low-res > .up360__frame--active {
        opacity: 1; }
    .up360__content__high-res {
      position: relative; }
      .up360__content__high-res > .up360__frame {
        position: absolute; }
    .up360__content .up360--active-frame {
      opacity: 1; }
  .up360__touch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5; }

.up360 {
  --primary-color: #03A9F4;
  --secondry-color: #ddd;
  --button-shadow: 4px 4px 10px 0px #000;
  --button-shadow-active: 2px 2px 5px 0 #000;
  --button-size-lg: 65px;
  --button-size-md: 40px;
  --button-transition: 200ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  --ratio: calc(9 / 16 * 100%);
  --background-color: #000;
  --loader-background: #222;
  --loader-progress-background: #000;
  --loader-progress-foreground: #03A9F4; }

.up360 {
  border-radius: 4px; }
  .up360__element {
    position: absolute;
    width: var(--button-size-md);
    height: var(--button-size-md);
    transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1); }
  .up360__button {
    background-color: var(--primary-color);
    border-radius: 50%;
    box-shadow: var(--button-shadow);
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    position: absolute;
    transition: transform var(--button-transition), box-shadow var(--button-transition);
    -webkit-tap-highlight-color: transparent;
    z-index: 5;
    cursor: pointer; }
    .up360__button:hover, .up360__button:focus {
      outline: none; }
    .up360__button:active {
      transform: scale(0.99) translateY(1%);
      box-shadow: var(--button-shadow-active); }
    .up360__button::before {
      content: " ";
      display: block;
      fill: var(--primary-color);
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
      margin: 0 auto;
      background-size: 75%;
      background-position: center center; }
  .up360__zoom-bar {
    z-index: 5; }
    .up360__zoom-bar.noUi-vertical {
      width: 2px; }
    .up360__zoom-bar .noUi-handle {
      transition: transform var(--button-transition), box-shadow var(--button-transition);
      transform: translate(-50%, -50%);
      background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2248%22 height%3D%2248%22 viewBox%3D%220 0 48 48%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z%22%2F%3E%3C%2Fsvg%3E");
      background-size: 75%;
      background-repeat: no-repeat;
      background-position: center center; }
  .up360__element--play {
    right: 0;
    bottom: 0;
    width: var(--button-size-lg);
    height: var(--button-size-lg); }
    .up360__element--play .up360__button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2248%22 height%3D%2248%22 viewBox%3D%220 0 48 48%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M16 10v28l22-14z%22%2F%3E%3C%2Fsvg%3E"); }
    .up360__element--play--stop .up360__button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2248%22 height%3D%2248%22 viewBox%3D%220 0 48 48%22%3E%0D%09%3Crect x%3D%2212%22 y%3D%2212%22 width%3D%2224%22 height%3D%2224%22 fill%3D%22%23ffffff%22%2F%3E%0D%3C%2Fsvg%3E%0D"); }
  .up360__element--pan-rotate {
    bottom: calc(var(--button-size-lg) + 15px);
    right: 0; }
    .up360__element--pan-rotate .up360__button::before {
      background-size: 75%; }
    .up360__element--pan-rotate--pan .up360__button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2248%22 height%3D%2248%22 viewBox%3D%220 0 48 48%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M46 11v29c0 4.4-3.6 8-8 8H23.4c-2.16 0-4.2-.86-5.7-2.38L2 29.66s2.52-2.46 2.6-2.5c.44-.38.98-.58 1.58-.58.44 0 .84.12 1.2.32.08.02 8.62 4.92 8.62 4.92V8c0-1.66 1.34-3 3-3s3 1.34 3 3v14h2V3c0-1.66 1.34-3 3-3s3 1.34 3 3v19h2V5c0-1.66 1.34-3 3-3s3 1.34 3 3v17h2V11c0-1.66 1.34-3 3-3s3 1.34 3 3z%22%2F%3E%3C%2Fsvg%3E");
      background-size: 50%; }
    .up360__element--pan-rotate--rotate .up360__button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%22-273 396.9 48 48%22%3E%0D  %3Cpath d%3D%22M-273 396.9h48v48h-48v-48z%22 fill%3D%22none%22%2F%3E%0D  %3Cpath fill%3D%22%23fff%22 d%3D%22M-258 439.9c-6.5-3.1-11.2-9.5-11.9-17h-3c1 12.3 11.3 22 23.9 22 .4 0 .9 0 1.3-.1l-7.6-7.6-2.7 2.7zm9-43c-.4 0-.9 0-1.3.1l7.6 7.6 2.7-2.7c6.5 3.1 11.2 9.4 11.9 17h3c-1-12.3-11.3-22-23.9-22zM-238.2 414l-10.8-6.2-10.8 6.2 10.8 6.2 10.8-6.2zM-248.2 434l10.8-6.2v-12.4l-10.8 6.2V434zM-260.5 415.3v12.4l10.8 6.2v-12.4l-10.8-6.2z%22%2F%3E%0D%3C%2Fsvg%3E"); }
  .up360__element--fullscreen {
    bottom: auto;
    right: 0;
    top: 0; }
    .up360__element--fullscreen .up360__button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2248%22 height%3D%2248%22 viewBox%3D%220 0 48 48%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z%22%2F%3E%3C%2Fsvg%3E"); }
    .up360__element--fullscreen--enabled .up360__button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2248%22 height%3D%2248%22 viewBox%3D%220 0 48 48%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z%22%2F%3E%3C%2Fsvg%3E"); }
  .up360__element--zoom-bar {
    position: absolute;
    right: 0;
    bottom: calc(
 var(--button-size-md) +
 var(--button-size-lg) +
 50px);
    height: 180px;
    display: flex;
    justify-content: center; }

.up360 {
  overflow: hidden; }
  .up360 .up360__element--fullscreen, .up360 .up360__element--pan-rotate, .up360 .up360__element--zoom-bar, .up360 .up360__element--play {
    opacity: 0; }

.up360:hover .up360__element--fullscreen, .up360:hover .up360__element--pan-rotate, .up360:hover .up360__element--zoom-bar, .up360:hover .up360__element--play,
.up360.up360--touch .up360__element--fullscreen,
.up360.up360--touch .up360__element--pan-rotate,
.up360.up360--touch .up360__element--zoom-bar,
.up360.up360--touch .up360__element--play {
  opacity: 1; }

.up360:hover .up360__element--fullscreen,
.up360.up360--touch .up360__element--fullscreen {
  transition-delay: 50ms; }

.up360:hover .up360__element--zoom-bar,
.up360.up360--touch .up360__element--zoom-bar {
  transition-delay: 100ms; }

.up360:hover .up360__element--pan-rotate,
.up360.up360--touch .up360__element--pan-rotate {
  transition-delay: 150ms; }

.up360:hover .up360__element--play,
.up360.up360--touch .up360__element--play {
  transition-delay: 200ms; }

/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box; }

.noUi-target {
  position: relative;
  direction: ltr; }

.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1; }

/* Wrapper for all connect elements.
*/
.noUi-connects {
  overflow: hidden;
  z-index: 0; }

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: 0 0; }

/* Offset direction
*/
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
  left: auto;
  right: 0; }

/* Give origins 0 height/width so they don't interfere with clicking the
* connect elements.
*/
.noUi-vertical .noUi-origin {
  width: 0; }

.noUi-horizontal .noUi-origin {
  height: 0; }

.noUi-handle {
  position: absolute; }

.noUi-touch-area {
  height: 100%;
  width: 100%; }

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  transition: transform 0.3s; }

.noUi-state-drag * {
  cursor: inherit !important; }

/* Slider size and handle placement;
*/
.noUi-horizontal {
  height: 18px; }

.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  left: -17px;
  top: -6px; }

.noUi-vertical {
  width: 18px; }

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px; }

html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
  right: -17px;
  left: auto; }

/* Styling;
* Giving the connect element a border radius causes issues with using transform: scale
*/
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; }

.noUi-connects {
  border-radius: 3px; }

.noUi-connect {
  background: #3FB8AF; }

/* Handles and cursors;
*/
.noUi-draggable {
  cursor: ew-resize; }

.noUi-vertical .noUi-draggable {
  cursor: ns-resize; }

.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF,
 inset 0 1px 7px #EBEBEB,
 0 3px 6px -3px #BBB; }

.noUi-active {
  box-shadow: inset 0 0 1px #FFF,
 inset 0 1px 7px #DDD,
 0 3px 6px -3px #BBB; }

/* Handle stripes;
*/
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px; }

.noUi-handle:after {
  left: 17px; }

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px; }

.noUi-vertical .noUi-handle:after {
  top: 17px; }

/* Disabled state;
*/
[disabled] .noUi-connect {
  background: #B8B8B8; }

[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed; }

/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
  box-sizing: border-box; }

.noUi-pips {
  position: absolute;
  color: #999; }

/* Values;
*
*/
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center; }

.noUi-value-sub {
  color: #ccc;
  font-size: 10px; }

/* Markings;
*
*/
.noUi-marker {
  position: absolute;
  background: #CCC; }

.noUi-marker-sub {
  background: #AAA; }

.noUi-marker-large {
  background: #AAA; }

/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%; }

.noUi-value-horizontal {
  transform: translate(-50%, 50%); }
  .noUi-rtl .noUi-value-horizontal {
    transform: translate(50%, 50%); }

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px; }

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px; }

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px; }

/* Vertical layout;
*
*/
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%; }

.noUi-value-vertical {
  transform: translate(0, -50%);
  padding-left: 25px; }
  .noUi-rtl .noUi-value-vertical {
    transform: translate(0, 50%); }

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px; }

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px; }

.noUi-marker-vertical.noUi-marker-large {
  width: 15px; }

.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap; }

.noUi-horizontal .noUi-tooltip {
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%; }

.noUi-vertical .noUi-tooltip {
  transform: translate(0, -50%);
  top: 50%;
  right: 120%; }

.up360 {
  --primary-color: #03A9F4;
  --secondry-color: #ddd;
  --button-shadow: 4px 4px 10px 0px #000;
  --button-shadow-active: 2px 2px 5px 0 #000;
  --button-size-lg: 65px;
  --button-size-md: 40px;
  --button-transition: 200ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  --ratio: calc(9 / 16 * 100%);
  --background-color: #000;
  --loader-background: #222;
  --loader-progress-background: #000;
  --loader-progress-foreground: #03A9F4; }

.up360 .up360__zoom-bar .noUi-target.noUi-vertical {
  width: 2px;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: none; }
  .up360 .up360__zoom-bar .noUi-target.noUi-vertical .noUi-connects {
    background-color: rgba(255, 255, 255, 0.2); }

.up360 .up360__zoom-bar .noUi-handle {
  width: var(--button-size-md);
  height: var(--button-size-md);
  left: 0;
  top: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--primary-color);
  box-shadow: var(--button-shadow);
  transform: translate(-50%, -50%);
  transition: transform var(--button-transition), box-shadow var(--button-transition);
  cursor: pointer; }
  .up360 .up360__zoom-bar .noUi-handle:focus {
    outline: none; }
  .up360 .up360__zoom-bar .noUi-handle.noUi-active {
    box-shadow: var(--button-shadow-active);
    transform: scale(0.99) translate(-50%, -49%); }
  .up360 .up360__zoom-bar .noUi-handle::before, .up360 .up360__zoom-bar .noUi-handle::after {
    content: none; }