/*!
 * Photo Sphere Viewer 3.1.0
 * Copyright (c) 2014-2015 Jérémy Heleine
 * Copyright (c) 2015-2016 Damien "Mistic" Sorel
 * Licensed under MIT (http://opensource.org/licenses/MIT)
 */

.psv-tooltip.bottom-center .arrow, .psv-tooltip.bottom-left .arrow, .psv-tooltip.bottom-right .arrow {
    border-bottom-color: rgba(61,61,61,.8);
}

.psv-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background: radial-gradient(#fff,#fdfdfd 16%,#fbfbfb 33%,#f8f8f8 49%,#efefef 66%,#dfdfdf 82%,#bfbfbf 100%);
    overflow: hidden;
}

    .psv-container.loading {
        text-align: center;
    }

.psv-canvas-container {
    position: absolute;
    z-index: 0;
}

    .psv-canvas-container canvas {
        display: block;
    }

.psv-loader {
    position: relative;
    color: rgba(61,61,61,.7);
    width: 150px;
    height: 150px;
    border: 10px solid transparent;
}

    .psv-loader .loader-canvas {
        position: absolute;
        top: 0;
        left: 0;
    }

    .psv-loader, .psv-loader .loader-image, .psv-loader .loader-text {
        display: inline-block;
        vertical-align: middle;
    }

        .psv-loader .loader-text {
            font: 14px sans-serif;
        }

        .psv-container.loading::before, .psv-loader::before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

.psv-navbar {
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    background: rgba(61,61,61,.5);
}

    .psv-navbar, .psv-navbar * {
        box-sizing: content-box;
    }

        .psv-navbar .caption {
            color: rgba(255,255,255,.7);
            margin: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-align: center;
            font-family: sans-serif;
        }

        .psv-navbar .psv-button {
            float: left;
            padding: 10px;
            position: relative;
            cursor: pointer;
            height: 20px;
            background: 0 0;
        }

            .psv-navbar .psv-button.active {
                background: rgba(255,255,255,.1);
            }

            .psv-navbar .psv-button svg {
                width: 100%;
            }

                .psv-navbar .psv-button svg * {
                    fill: rgba(255,255,255,.7);
                }

        .psv-navbar .autorotate-button {
            width: 20px;
        }

            .psv-navbar .autorotate-button .equator, .psv-navbar .autorotate-button .sphere {
                border-radius: 50%;
                border-width: 1px;
                border-style: solid;
                border-color: rgba(255,255,255,.7);
                transition: .3s ease;
                transition-property: transform,height,margin;
            }

            .psv-navbar .autorotate-button .sphere {
                width: 18px;
                height: 18px;
                transform: rotateY(0);
            }

            .psv-navbar .autorotate-button .equator {
                position: absolute;
                top: 50%;
                width: 18px;
                height: 1.8px;
                margin-top: -1.9px;
                transform: rotateY(0);
            }

            .psv-navbar .autorotate-button:hover .sphere {
                transform: rotateY(180deg);
            }

            .psv-navbar .autorotate-button:hover .equator {
                transform: rotateY(180deg);
                height: 4.5px;
                margin-top: -3.25px;
            }

        .psv-navbar .download-button {
            width: 20px;
            height: 20px;
        }

            .psv-navbar .download-button:before {
                content: '';
                position: absolute;
                width: 20px;
                height: 7px;
                left: 10px;
                bottom: 10px;
                border: 2px solid rgba(255,255,255,.7);
                border-top-width: 0;
                border-radius: 0;
                transition: border-radius .2s ease;
            }

            .psv-navbar .download-button div {
                position: absolute;
                width: 12px;
                height: 12px;
                top: 50%;
                left: 50%;
                margin: -8px -6px -6px;
                transition: margin-top .2s ease;
            }

                .psv-navbar .download-button div:after, .psv-navbar .download-button div:before {
                    content: '';
                    display: block;
                    margin: 0 auto;
                }

                .psv-navbar .download-button div:before {
                    width: 6px;
                    height: 6px;
                    background: rgba(255,255,255,.7);
                }

                .psv-navbar .download-button div:after {
                    width: 0;
                    height: 0;
                    border: 6px solid transparent;
                    border-top-color: rgba(255,255,255,.7);
                }

.psv-tooltip.top-center .arrow, .psv-tooltip.top-left .arrow, .psv-tooltip.top-right .arrow {
    border-top-color: rgba(61,61,61,.8);
}

.psv-navbar .download-button:hover:before {
    border-radius: 2px;
}

.psv-navbar .download-button:hover div {
    margin-top: -6px;
}

.psv-navbar .fullscreen-button {
    float: right;
    width: 26.67px;
    height: 20px;
}

    .psv-navbar .fullscreen-button div {
        position: absolute;
        width: 26.67px;
        height: 20px;
    }

        .psv-navbar .fullscreen-button div:after, .psv-navbar .fullscreen-button div:before {
            content: '';
            position: absolute;
            width: 6px;
            height: 4px;
            border-style: solid;
            border-color: rgba(255,255,255,.7);
            border-width: 2px;
            transition: all .2s ease;
        }

        .psv-navbar .fullscreen-button div:first-child:before {
            top: 0;
            left: 0;
            border-right-width: 0;
            border-bottom-width: 0;
        }

        .psv-navbar .fullscreen-button div:first-child:after {
            top: 0;
            right: 0;
            border-left-width: 0;
            border-bottom-width: 0;
        }

        .psv-navbar .fullscreen-button div:last-child:before {
            bottom: 0;
            left: 0;
            border-right-width: 0;
            border-top-width: 0;
        }

        .psv-navbar .fullscreen-button div:last-child:after {
            bottom: 0;
            right: 0;
            border-left-width: 0;
            border-top-width: 0;
        }

    .psv-navbar .fullscreen-button:hover div:after, .psv-navbar .fullscreen-button:hover div:before {
        width: 8.67px;
        height: 6px;
    }

.psv-navbar .zoom-button {
    cursor: default;
}

    .psv-navbar .zoom-button .minus, .psv-navbar .zoom-button .plus {
        float: left;
        position: relative;
        cursor: pointer;
        width: 14px;
        height: 14px;
    }

        .psv-navbar .zoom-button .minus svg, .psv-navbar .zoom-button .plus svg {
            position: relative;
            top: 20%;
        }

    .psv-navbar .zoom-button .range {
        float: left;
        padding: 9.5px 7px;
    }

        .psv-navbar .zoom-button .range .line {
            position: relative;
            cursor: pointer;
            width: 80px;
            height: 1px;
            background: rgba(255,255,255,.7);
            transition: all .3s ease;
        }

        .psv-navbar .zoom-button .range .handle {
            position: absolute;
            border-radius: 50%;
            top: -3px;
            width: 7px;
            height: 7px;
            background: rgba(255,255,255,.7);
            transform: scale(1);
            transition: transform .3s ease;
        }

    .psv-navbar .zoom-button:hover .range .line {
        box-shadow: 0 0 2px rgba(255,255,255,.7);
    }

    .psv-navbar .zoom-button:hover .range .handle {
        transform: scale(1.3);
    }

.psv-navbar .markers-button {
    width: 20px;
}

    .psv-navbar .markers-button svg {
        transform: scale(1);
        transition: transform .3s ease;
    }

    .psv-navbar .markers-button:hover svg {
        transform: scale(1.2);
    }

.psv-markers-list h1 {
    font: 24px sans-serif;
    margin: 1em 0;
    text-align: center;
    text-shadow: 2px 1px #000;
}

.psv-markers-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .psv-markers-list ul li {
        clear: both;
        min-height: 20px;
        padding: .5em 1em;
        cursor: pointer;
        transform: translateX(0);
        transition: transform .3s ease-in-out;
    }

        .psv-markers-list ul li:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 10px;
            margin-left: -10px;
        }

        .psv-markers-list ul li:nth-child(odd), .psv-markers-list ul li:nth-child(odd):before {
            background: rgba(255,255,255,.1);
        }

        .psv-markers-list ul li:nth-child(even), .psv-markers-list ul li:nth-child(even):before {
            background: 0 0;
        }

        .psv-markers-list ul li:hover {
            transform: translateX(10px);
            transition: transform .1s ease-in-out;
        }

        .psv-markers-list ul li img {
            float: left;
            width: 20px;
        }

        .psv-markers-list ul li p {
            margin: 0;
            padding: 0;
            padding-left: calc(20px + .5em);
        }

.psv-hud {
    position: absolute;
    z-index: 50;
    width: 100%;
    height: 100%;
}

    .psv-hud .psv-marker {
        position: absolute;
        top: 0;
        left: 0;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
        display: none;
    }

        .psv-hud .psv-marker.transparent {
            display: block;
            opacity: 0;
        }

        .psv-hud .psv-marker.visible {
            display: block;
        }

.psv-panel {
    position: absolute;
    z-index: 100;
    right: 0;
    height: 100%;
    width: 400px;
    max-width: calc(100% - 9px);
    background: rgba(10,10,10,.7);
    transform: translate3d(100%,0,0);
    opacity: 0;
    transition-property: opacity,transform;
    transition-timing-function: ease-in-out;
    transition-duration: .1s;
    cursor: default;
    margin-left: 9px;
}

.psv-container.has-navbar .psv-panel {
    height: calc(100% - 40px);
}

.psv-panel .close-button {
    display: none;
    position: absolute;
    top: 0;
    left: -24px;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,.9);
}

    .psv-panel .close-button::after, .psv-panel .close-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 4px;
        width: 15px;
        height: 1px;
        background-color: #fff;
        transition: .2s ease-in-out;
        transition-property: width,left,transform;
    }

    .psv-panel .close-button::before {
        transform: rotate(45deg);
    }

    .psv-panel .close-button::after {
        transform: rotate(-45deg);
    }

    .psv-panel .close-button:hover::after, .psv-panel .close-button:hover::before {
        left: 0;
        width: 23px;
    }

    .psv-panel .close-button:hover::before {
        transform: rotate(135deg);
    }

    .psv-panel .close-button:hover::after {
        transform: rotate(45deg);
    }

.psv-panel .resizer {
    display: none;
    position: absolute;
    top: 0;
    left: -9px;
    width: 9px;
    height: 100%;
    background-color: rgba(0,0,0,.9);
    cursor: col-resize;
}

    .psv-panel .resizer::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 1px;
        margin-top: -14.5px;
        width: 1px;
        height: 1px;
        box-shadow: 1px 0 #fff,3px 0 #fff,5px 0 #fff,1px 2px #fff,3px 2px #fff,5px 2px #fff,1px 4px #fff,3px 4px #fff,5px 4px #fff,1px 6px #fff,3px 6px #fff,5px 6px #fff,1px 8px #fff,3px 8px #fff,5px 8px #fff,1px 10px #fff,3px 10px #fff,5px 10px #fff,1px 12px #fff,3px 12px #fff,5px 12px #fff,1px 14px #fff,3px 14px #fff,5px 14px #fff,1px 16px #fff,3px 16px #fff,5px 16px #fff,1px 18px #fff,3px 18px #fff,5px 18px #fff,1px 20px #fff,3px 20px #fff,5px 20px #fff,1px 22px #fff,3px 22px #fff,5px 22px #fff,1px 24px #fff,3px 24px #fff,5px 24px #fff,1px 26px #fff,3px 26px #fff,5px 26px #fff,1px 28px #fff,3px 28px #fff,5px 28px #fff;
        background: 0 0;
    }

.psv-panel .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #dcdcdc;
    font: 16px sans-serif;
    overflow: auto;
}

    .psv-panel .content:not(.no-margin) {
        padding: 1em;
    }

    .psv-panel .content.no-interaction {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: none;
    }

.psv-panel.open {
    transform: translate3d(0,0,0);
    opacity: 1;
    transition-duration: .2s;
}

    .psv-panel.open .close-button, .psv-panel.open .resizer {
        display: block;
    }

.psv-tooltip {
    position: absolute;
    z-index: 75;
    box-sizing: border-box;
    max-width: 200px;
    background-color: rgba(61,61,61,.8);
    border-radius: 4px;
    padding: .5em 1em;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: ease-in-out;
    transition-duration: .1s;
}

    .psv-tooltip.bottom-center, .psv-tooltip.bottom-left, .psv-tooltip.bottom-right, .psv-tooltip.center-left, .psv-tooltip.center-right, .psv-tooltip.top-center, .psv-tooltip.top-left, .psv-tooltip.top-right {
        transition-property: opacity,transform;
    }

    .psv-tooltip .content {
        color: #fff;
        font: 14px sans-serif;
        text-shadow: 0 1px #000;
    }

    .psv-tooltip .arrow {
        position: absolute;
        height: 0;
        width: 0;
        border: 7px solid transparent;
    }

    .psv-tooltip.bottom-center {
        box-shadow: 0 3px 0 rgba(90,90,90,.7);
        transform: translate3d(0,-5px,0);
    }

    .psv-tooltip.center-left {
        box-shadow: -3px 0 0 rgba(90,90,90,.7);
        transform: translate3d(5px,0,0);
    }

        .psv-tooltip.center-left .arrow {
            border-left-color: rgba(61,61,61,.8);
        }

    .psv-tooltip.top-center {
        box-shadow: 0 -3px 0 rgba(90,90,90,.7);
        transform: translate3d(0,5px,0);
    }

    .psv-tooltip.center-right {
        box-shadow: 3px 0 0 rgba(90,90,90,.7);
        transform: translate3d(-5px,0,0);
    }

        .psv-tooltip.center-right .arrow {
            border-right-color: rgba(61,61,61,.8);
        }

    .psv-tooltip.bottom-left {
        box-shadow: -3px 3px 0 rgba(90,90,90,.7);
        transform: translate3d(0,-5px,0);
    }

    .psv-tooltip.bottom-right {
        box-shadow: 3px 3px 0 rgba(90,90,90,.7);
        transform: translate3d(0,-5px,0);
    }

    .psv-tooltip.top-left {
        box-shadow: -3px -3px 0 rgba(90,90,90,.7);
        transform: translate3d(0,5px,0);
    }

    .psv-tooltip.top-right {
        box-shadow: 3px -3px 0 rgba(90,90,90,.7);
        transform: translate3d(0,5px,0);
    }

    .psv-tooltip.visible {
        transform: translate3d(0,0,0);
        opacity: 1;
        transition-duration: .2s;
    }