.view360-container {
    position: relative;
    touch-action: pan-y;
    overflow: hidden
}

.view360-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none
}

.view360-canvas.ctx-lost {
    text-indent: .001px
}

.view360-container.is-1by1, .view360-container.is-square {
    padding-top: 100%
}

.view360-container.is-5by4 {
    padding-top: 80%
}

.view360-container.is-4by3 {
    padding-top: 75%
}

.view360-container.is-3by2 {
    padding-top: 66.6666%
}

.view360-container.is-5by3 {
    padding-top: 60%
}

.view360-container.is-16by9 {
    padding-top: 56.25%
}

.view360-container.is-2by1 {
    padding-top: 50%
}

.view360-container.is-3by1 {
    padding-top: 33.3333%
}

.view360-container.is-4by5 {
    padding-top: 125%
}

.view360-container.is-3by4 {
    padding-top: 133.3333%
}

.view360-container.is-2by3 {
    padding-top: 150%
}

.view360-container.is-3by5 {
    padding-top: 166.6666%
}

.view360-container.is-9by16 {
    padding-top: 177.7777%
}

.view360-container.is-1by2 {
    padding-top: 200%
}

.view360-container.is-1by3 {
    padding-top: 300%
}

.view360-container:-ms-fullscreen {
    padding-top: 0
}

.view360-container:fullscreen {
    padding-top: 0
}

.view360-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    pointer-events: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 1
}

.view360-main.view360-vr-presenting .view360-controls {
    display: none
}

.view360-controls-float-left, .view360-controls-float-right {
    position: absolute;
    display: flex;
    flex-direction: column
}

.view360-controls-float-left {
    left: 0;
    top: 0
}

.view360-controls-float-right {
    right: 0;
    top: 0
}

.view360-controls-main {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    transition: none
}

.view360-controls-main.view360-controls-hidden {
    opacity: 0;
    transition: opacity .5s
}

.view360-controls-main.view360-controls-hidden * {
    pointer-events: none
}

.view360-controls-main.view360-controls-fixed {
    opacity: 1
}

.view360-controls-background {
    width: 100%;
    height: calc(100% + 32px);
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(0deg, #323232, rgba(50, 50, 50, 0))
}

.view360-controls-background.view360-controls-hidden {
    display: none
}

.view360-controls-mid {
    display: flex;
    flex-direction: row;
    position: relative
}

.view360-controls-left {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row
}

.view360-controls-right {
    display: flex;
    align-items: center;
    flex-direction: row
}

.view360-controls-bottom {
    display: flex;
    align-items: center;
    flex-direction: row
}

.view360-controls-button {
    display: inline-block;
    background-color: transparent;
    cursor: pointer;
    border: 0;
    position: relative;
    background-size: 24px 24px;
    background-origin: content-box;
    background-repeat: no-repeat;
    box-sizing: border-box;
    pointer-events: all;
    border-radius: 20px;
    transition: opacity 250ms;
    width: 40px;
    height: 40px;
    margin: 6px;
    padding: 8px;
    opacity: .8
}

.view360-controls-button:hover {
    opacity: 1
}

.view360-controls-button.view360-controls-vr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' viewBox='0 0 100 100'%3E%3Cg%3E%3Cpath d='M5,30 L95,30 L95,80 L55,80 L50,70 L45,80 L5,80 L5,30' fill='transparent' stroke='%23fff' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5,30 L15,10 L85,10 L95,30' fill='transparent' stroke='%23fff' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='55' r='10' stroke='%23fff' stroke-width='8' fill='transparent' /%3E%3Ccircle cx='70' cy='55' r='10' stroke='%23fff' stroke-width='8' fill='transparent' /%3E%3C/g%3E%3C/svg%3E")
}

.view360-controls-button.view360-controls-play {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 4v16l13 -8z'%3E%3C/path%3E%3C/svg%3E")
}

.view360-controls-button.view360-controls-pause {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Crect x='6' y='5' width='4' height='14' rx='1'%3E%3C/rect%3E%3Crect x='14' y='5' width='4' height='14' rx='1'%3E%3C/rect%3E%3C/svg%3E")
}

.view360-controls-button.view360-controls-unmuted {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M15 8a5 5 0 0 1 0 8'%3E%3C/path%3E%3Cpath d='M17.7 5a9 9 0 0 1 0 14'%3E%3C/path%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'%3E%3C/path%3E%3C/svg%3E")
}

.view360-controls-button.view360-controls-muted {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'%3E%3C/path%3E%3Cpath d='M16 10l4 4m0 -4l-4 4'%3E%3C/path%3E%3C/svg%3E")
}

.view360-controls-button.view360-controls-fullscreen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 8v-2a2 2 0 0 1 2 -2h2'%3E%3C/path%3E%3Cpath d='M4 16v2a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cpath d='M16 20h2a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3C/svg%3E")
}

.view360-controls-button.view360-controls-fullscreen-exit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M15 19v-2a2 2 0 0 1 2 -2h2'%3E%3C/path%3E%3Cpath d='M15 5v2a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3Cpath d='M5 15h2a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cpath d='M5 9h2a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3C/svg%3E")
}

.view360-controls-button.view360-controls-gyro-enabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='M22.5 7.6v2.95q-1 .15-1.975.475-.975.325-1.875.825L16.5 9.7q1.35-.9 2.875-1.4 1.525-.5 3.125-.7Zm15.35 15.35q-.2 1.6-.7 3.125-.5 1.525-1.4 2.875L33.6 26.8q.5-.9.825-1.875.325-.975.475-1.975Zm3.8 20.45L1.3 3.05 3.45.9 43.8 41.25ZM7 41.4q-1.25 0-2.125-.875T4 38.4v-8.6h3v8.6h8.6v3ZM41 13V4.4h-8.6v-3H41q1.25 0 2.125.875T44 4.4V13ZM4 13V4.4q0-.55.2-1.1t.6-1l2.1 2.1V13Zm28.4 28.4v-3h8.5l2.1 2.1q-.4.45-.925.675-.525.225-1.075.225Zm-21.2-37-3-3h7.4v3ZM44 37.2l-3-3v-4.4h3ZM10.15 22.95h2.95q.5 3.7 3.1 6.3 2.6 2.6 6.3 3.1v2.95q-4.9-.55-8.35-4-3.45-3.45-4-8.35Zm4-11.35 2.1 2.05q-1.3 1.3-2.1 2.9-.8 1.6-1.05 3.4h-2.95q.25-2.4 1.275-4.525Q12.45 13.3 14.15 11.6ZM31.8 29.2l2.05 2.1q-1.7 1.7-3.825 2.725Q27.9 35.05 25.5 35.3v-2.95q1.8-.25 3.4-1.05 1.6-.8 2.9-2.1ZM25.5 7.6q4.9.55 8.35 4 3.45 3.45 4 8.35H34.9q-.5-3.7-3.1-6.3-2.6-2.6-6.3-3.1Z'/%3E%3C/svg%3E")
}

.view360-controls-button.view360-controls-gyro-disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='M7 44q-1.2 0-2.1-.9Q4 42.2 4 41v-8.6h3V41h8.6v3ZM4 15.6V7q0-1.2.9-2.1Q5.8 4 7 4h8.6v3H7v8.6Zm18.5 22.25q-4.9-.55-8.35-4-3.45-3.45-4-8.35h2.95q.5 3.7 3.125 6.3 2.625 2.6 6.275 3.1ZM10.15 22.5q.55-4.9 4-8.35 3.45-3.45 8.35-4v2.95q-3.7.5-6.3 3.1-2.6 2.6-3.1 6.3Zm13.85 5q-1.45 0-2.475-1.025Q20.5 25.45 20.5 24q0-1.45 1.025-2.475Q22.55 20.5 24 20.5q1.45 0 2.475 1.025Q27.5 22.55 27.5 24q0 1.45-1.025 2.475Q25.45 27.5 24 27.5Zm1.5 10.35V34.9q3.7-.5 6.3-3.125 2.6-2.625 3.1-6.275h2.95q-.55 4.9-4 8.35-3.45 3.45-8.35 4Zm9.4-15.35q-.5-3.7-3.1-6.3-2.6-2.6-6.3-3.1v-2.95q4.9.55 8.35 4 3.45 3.45 4 8.35ZM32.4 44v-3H41v-8.6h3V41q0 1.2-.9 2.1-.9.9-2.1.9ZM41 15.6V7h-8.6V4H41q1.2 0 2.1.9.9.9.9 2.1v8.6Z'/%3E%3C/svg%3E")
}

.view360-controls-time {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    font-size: 14px;
    z-index: 1
}

.view360-controls-time:first-child {
    padding: 0 16px
}

.view360-controls-progress {
    flex: 1;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box
}

.view360-controls-progress:not(:first-child) {
    padding-left: 0
}

.view360-controls-bottom .view360-controls-progress {
    padding-bottom: 20px
}

.view360-controls-volume {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    transition: width 250ms, background-color 250ms;
    overflow: hidden
}

.view360-controls-volume:not(:disabled).view360-controls-fixed, .view360-controls-volume:not(:disabled):hover {
    width: 112px
}

.view360-controls-volume .view360-range {
    flex: 1;
    height: 100%;
    padding: 0
}

.view360-controls-volume .view360-range .view360-range-track {
    width: calc(100% - 12px);
    transform: translateX(-4px)
}

.view360-controls-volume .view360-controls-button {
    margin: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    flex-shrink: 0
}

.view360-controls-volume:disabled {
    opacity: .5;
    pointer-events: none
}

.view360-controls-volume:disabled * {
    pointer-events: none
}

.view360-controls-pie {
    width: 36px;
    height: 36px;
    margin: 6px;
    padding: 0;
    border-radius: 18px;
    opacity: .8;
    pointer-events: all;
    cursor: pointer;
    color: #fff;
    position: relative;
    transition: opacity 250ms
}

.view360-controls-pie > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.view360-controls-pie:hover {
    opacity: 1
}

.view360-range {
    position: relative;
    cursor: pointer;
    pointer-events: all;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: pan-y
}

.view360-range:hover .view360-range-thumb {
    opacity: 1
}

.view360-range-track {
    width: 100%;
    height: 4px;
    border-radius: 4px;
    position: relative;
    background-color: rgba(230, 230, 230, .4)
}

.view360-range-filler, .view360-range-load {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    border-radius: 4px
}

.view360-range-filler {
    background-color: #fff
}

.view360-range-load {
    background-color: #757575
}

.view360-range-thumb {
    width: 13px;
    height: 13px;
    position: absolute;
    top: -5px;
    left: -6.5px;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    transition: opacity 250ms;
    opacity: 0
}

.view360-range-thumb.view360-controls-fixed {
    opacity: 1
}

.view360-controls-unavailable {
    display: none !important
}

@media screen and (max-width: 768px) {
    .view360-controls-button {
        background-size: 18px 18px;
        width: 30px;
        height: 30px;
        margin: 4.5px;
        padding: 6px;
        border-radius: 15px
    }

    .view360-controls-volume .view360-controls-button {
        width: 18px;
        height: 18px
    }

    .view360-controls-volume:not(:disabled).view360-controls-fixed, .view360-controls-volume:not(:disabled):hover {
        width: 84px
    }

    .view360-controls-pie {
        width: 27px;
        height: 27px;
        margin: 4.5px;
        padding: 0;
        border-radius: 13.5px
    }
}

.view360-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .15)
}

.view360-spinner-ring {
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 64px;
    height: 64px;
    box-sizing: content-box;
    background-color: transparent;
    border-style: solid;
    border-radius: 50%;
    border-width: 10px;
    border-color: #fff;
    border-bottom-color: transparent;
    animation: view360-spin-animation 1.2s linear infinite
}

@keyframes view360-spin-animation {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

.view360-container.view360-vr-presenting {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999
}

.view360-hotspots {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.view360-hotspot {
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0
}

.view360-hotspot-visible {
    visibility: visible;
    pointer-events: all
}