@keyframes pulsate {
0%, to {
	opacity: 1
}
50% {
	opacity: .2
}
}
#spotlight,
#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:rgba(24,24,24,0.99);
	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;
	opacity: 0
}
#spotlight .preloader.show {
	transition: opacity .1s linear .25s;
	opacity: 1
}
#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%;
    height:auto;
    float:left;
    position:absolute;
	bottom:0px;
	pointer-events: none;
	contain: layout paint style;
    background:rgba(0,0,0,.65)}

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

#spotlight .footer .description{
    width:100%;
    height:auto;
    float:left;
    margin-top:20px;
    margin-bottom:20px;
    text-align:center;
    font-family:robotomedium;
    font-size:16px;
    color:#FFFFFF;}
    
#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(../../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%;
	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(../../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
}
}