@keyframes pulsate {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .2
    }
}

#spotlight {
    position: fixed;
    z-index: 99999;
    color: #fff;
    background-color: #000;
    visibility: hidden;
    overflow: hidden;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: visibility .25s ease,opacity .25s ease;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    contain: layout size paint style;
    touch-action: none;
    -webkit-tap-highlight-color: transparent
}

    #spotlight.show {
        opacity: 1;
        visibility: visible;
        transition: none
    }

        #spotlight.show .pane, #spotlight.show .scene {
            will-change: transform
        }

            #spotlight.show .scene img {
                will-change: transform,opacity
            }

    #spotlight, #spotlight .preloader {
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0
    }

        #spotlight .preloader {
            position: absolute;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 42px 42px
        }

            #spotlight .preloader.show {
                transition: opacity .1s linear .25s;
                opacity: 1
            }

        #spotlight .scene {
            transition: transform 1s cubic-bezier(.1,1,.1,1);
            pointer-events: none
        }

            #spotlight .scene img {
                display: inline-block;
                position: absolute;
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                left: 50%;
                top: 50%;
                opacity: 1;
                margin: 0;
                padding: 0;
                border: 0;
                transform: translate(-50%,-50%) scale(1) perspective(100vw);
                transition: transform 1s cubic-bezier(.1,1,.1,1),opacity 1s cubic-bezier(.3,1,.3,1);
                transform-style: preserve-3d;
                contain: layout paint style;
                visibility: hidden
            }

        #spotlight .header, #spotlight .pane, #spotlight .scene {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            contain: layout size style
        }

        #spotlight .header {
            height: 50px;
            text-align: right;
            background-color: rgba(0,0,0,.45);
            transform: translateY(-100px);
            transition: transform .35s ease-out;
            contain: layout size paint style
        }

            #spotlight .header:hover, #spotlight.menu .header {
                transform: translateY(0)
            }

            #spotlight .header div {
                display: inline-block;
                vertical-align: middle;
                white-space: nowrap;
                width: 30px;
                height: 50px;
                padding-right: 20px;
                opacity: .5
            }

        #spotlight .progress {
            position: absolute;
            top: 0;
            width: 100%;
            height: 3px;
            background-color: rgba(255,255,255,.45);
            transform: translateX(-100%);
            transition: transform 1s linear
        }

        #spotlight .arrow, #spotlight .footer {
            position: absolute;
            background-color: rgba(0,0,0,.45)
        }

        #spotlight .footer {
            left: 0;
            right: 0;
            bottom: 0;
            line-height: 1.35em;
            padding: 20px 25px;
            text-align: left;
            pointer-events: none;
            contain: layout paint style
        }

            #spotlight .footer .title {
                font-size: 125%;
                padding-bottom: 10px
            }

        #spotlight .page {
            float: left;
            width: auto;
            padding-left: 20px;
            line-height: 50px
        }

        #spotlight .icon {
            cursor: pointer;
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 21px 21px;
            transition: opacity .2s ease-out
        }

        #spotlight .fullscreen {
            background-image: url(../img/spotlight/maximize.svg)
        }

            #spotlight .fullscreen.on {
                background-image: url(../img/spotlight/minimize.svg)
            }

        #spotlight .autofit {
            background-image: url(../img/spotlight/autofit.svg)
        }

        #spotlight .zoom-out {
            background-image: url(../img/spotlight/zoom-out.svg)
        }

        #spotlight .zoom-in {
            background-image: url(../img/spotlight/zoom-in.svg)
        }

        #spotlight .theme {
            background-image: url(../img/spotlight/theme.svg)
        }

        #spotlight .player {
            background-image: url(../img/spotlight/play.svg)
        }

            #spotlight .player.on {
                background-image: url(../img/spotlight/pause.svg);
                animation: pulsate 1s ease infinite
            }

        #spotlight .close {
            background-image: url(../img/spotlight/close.svg)
        }

        #spotlight .preloader.show {
            background-image: url(../img/spotlight/preloader.svg)
        }

        #spotlight .arrow {
            top: 50%;
            left: 20px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            cursor: pointer;
            margin-top: -25px;
            padding: 10px;
            transform: translateX(-100px);
            transition: transform .35s ease-out,opacity .2s ease-out;
            box-sizing: border-box;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 30px 30px;
            opacity: .65;
            background-image: url(../img/spotlight/arrow.svg)
        }

        #spotlight .arrow-right {
            left: auto;
            right: 20px;
            transform: translateX(100px) scaleX(-1)
        }

        #spotlight.menu .arrow-left {
            transform: translateX(0)
        }

        #spotlight.menu .arrow-right {
            transform: translateX(0) scaleX(-1)
        }

        #spotlight .arrow:active, #spotlight .arrow:hover, #spotlight .icon:active, #spotlight .icon:hover {
            opacity: 1;
            animation: none
        }

        #spotlight.white {
            color: #fff;
            background-color: #fff
        }

            #spotlight.white .arrow, #spotlight.white .footer, #spotlight.white .header, #spotlight.white .preloader, #spotlight.white .progress {
                filter: invert(1)
            }

.hide-scrollbars {
    overflow: -moz-hidden-unscrollable;
    -ms-overflow-style: none
}

    .hide-scrollbars::-webkit-scrollbar {
        width: 0
    }

@media (max-width:800px) {
    #spotlight .header div {
        width: 20px
    }

    #spotlight .footer {
        font-size: 12px
    }

    #spotlight .arrow {
        width: 35px;
        height: 35px;
        margin-top: -17.5px;
        background-size: 15px 15px
    }

    #spotlight .preloader {
        background-size: 30px 30px
    }
}

@media (max-width:400px),(max-height:400px) {
    #spotlight .fullscreen {
        display: none !important
    }
}