@keyframes pulsate {
    0%,to { opacity: 1 }
    50% { opacity: .2 }
}
#spotlight, #spotlight .drag, #spotlight .preloader, #spotlight .scene { top: 0; width: 100%; height: 100% }
#spotlight .arrow, #spotlight .icon { cursor: pointer; background-repeat: no-repeat }
#spotlight { position: fixed; z-index: 99999; color: #fff; background-color: #000; visibility: hidden; opacity: 0; overflow: hidden; -webkit-user-select: none; -moz-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 .preloader { position: absolute; background-position: center center; background-repeat: no-repeat; background-size: 42px 42px; visibility: hidden }
#spotlight .preloader.show { transition: visibility 0s linear .25s; visibility: visible }
#spotlight .drag { position: absolute }
#spotlight .scene { position: absolute; transition: transform 1s cubic-bezier(.1,1,.1,1); contain:layout size style; 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 { 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 { width: 100%; 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 { background-position: left center; background-size: 21px 21px; transition: opacity .2s ease-out }
#spotlight .fullscreen { background-image: url(../fonts/b307de8b6802495aa0919ea22020f1bc.woff) }
#spotlight .fullscreen.on { background-image: url(../fonts/f7d27e4042ff468bb7f08d8623cca499.woff) }
#spotlight .autofit { background-image: url(../fonts/288391a0497f42e8aaa598a51b566b07.woff) }
#spotlight .zoom-out { background-image: url(../fonts/6265e8e23dc540a49b3eebf8c3854d36.woff) }
#spotlight .zoom-in { background-image: url(../fonts/239ef86af9ed4cae9d7b29565679dbfe.woff) }
#spotlight .theme { background-image: url(../fonts/3a4a4d03e33d483aa8787f73e1cb92c3.woff) }
#spotlight .player { background-image: url(../fonts/4fefeeed91094ad1a8e3f89cf044bd57.woff) }
#spotlight .player.on { background-image: url(../fonts/154c7455a58a42398533a1a1dcaa32fb.woff); animation: pulsate 1s ease infinite }
#spotlight .close { background-image: url(../fonts/2ce1ec0b74794583a59f10efc23db6c6.woff) }
#spotlight .preloader { background-image: url(../fonts/ff5464b5173b4be48d8fc5328edd81ec.woff) }
#spotlight .arrow { top: 50%; left: 20px; width: 50px; height: 50px; border-radius: 100%; 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-size: 30px 30px; opacity: .65; background-image: url(../fonts/55dadec4a39b438f93896ea9b7be7a9f.woff) }
#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-left:hover, #spotlight .arrow-right:hover, #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 }
}