.aplbox-wrap{--aplbox-tools-color:#d2d2d2;}
.aplbox-wrap{
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 2147483647;
display: none;
height: 100%;
}
.aplbox-bg{
background-color: rgba(23, 23, 23, 0.95);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.aplbox-video:not(.aplbox-poster),
.aplbox-iframe:not(.aplbox-poster){
background: #111;
}
.aplbox-inner-wrap{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.aplbox-thumb-v.aplbox-thumb-opened .aplbox-inner-wrap{
width: calc(100% - 140px);
}
.aplbox-thumb-v .aplbox-inner-wrap{
width: 100%;
}
.aplbox-container{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
z-index: 20;
max-height: 100%;
padding-top: 50px;
padding-bottom: 50px;
box-sizing: border-box;
height: 100% !important;
}
.aplbox-thumb-h.aplbox-thumb-opened .aplbox-container{
padding-bottom: 140px;
}
.aplbox-content{
opacity: 0;
text-align: center;
width: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
height: 100%;
}
.aplbox-content.swipe-left{
margin-left: -200px !important;
}
.aplbox-content.swipe-right{
margin-left: 200px !important;
}
.aplbox-scrollable{
overflow:auto;
}
.aplbox-child{
touch-action: none;
}
.aplbox-grab .aplbox-child img{
cursor:grab
}
.aplbox-grab{
cursor:grab
}
.aplbox-child{
max-height: 100% !important;
max-width: 100% !important;
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.aplbox-child img{
user-select: none;
display: block;
max-height: 100%;
max-width: 100%;
}
.aplbox-child iframe{
position:absolute!important;
top:0!important;
left:0!important;
width:100%!important;
height:100%!important;
max-width: none!important;
max-height: none!important;
}
.aplbox-child img{
user-select:none;
}
.aplbox-child .ap-video{
position:absolute;
user-select: none;
visibility: visible;
top:0;
left:0;
max-width:none!important;
width: 100%;
height: 100%; 
}
.aplbox-child .ap-audio{
position:relative;
user-select: none;
visibility: visible;
bottom:0;
left:0;
max-width:none!important;
}
.aplbox-inline {
position: relative;
background: #111;
height: auto;
}
.aplbox-child .video-js{
max-width: 50%;
}
@media (max-width: 1200px){
.aplbox-child .video-js{
max-width: 80%;
}
}
@media (max-width: 900px){
.aplbox-child .video-js{
max-width: none;
}
}
.aplbox-child .apvr-video-js-360 canvas{
left: 0;
} .aplbox-play-icon{
position:absolute;
width: 100px;
height: 100px;
top:50%;
left:50%;
transform: translate(-50%,-50%);
color:#eee;
cursor: pointer;
background: #2222228f;
transition: transform 0.3s ease-out;
}
.aplbox-play-icon svg{ 
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 55px;
fill:currentColor;
transition: color .1s ease-out;
}
@media (hover: hover) {
.aplbox-play-icon:hover{
transform: translate(-50%,-50%) scale(1.1);
transform-origin: center center;
}
} .aplbox-caption-wrap{
position: absolute;
z-index: 30;
margin: 0 auto;  display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
bottom:0;
}
.aplbox-title{
font-size: 1em;
color: #eee;
margin-bottom: 1px;
}
.aplbox-desc{
font-size: 0.8em;
color: #aaa;
}
.aplbox-thumb-h.aplbox-thumb-opened .aplbox-caption-wrap{
bottom: 100px;
} button.aplbox-btn{
color:var(--aplbox-tools-color);
cursor: pointer;
position: relative;
width:50px;
height: 50px;
z-index: 99;
display: flex;
align-items: center;
opacity: 0.8;
transition: opacity 0.2s;
}
button.aplbox-btn-reset{
background-color: transparent;
padding: 0;
margin: 0;
float: none;
line-height: 1em;
list-style: none;
text-transform: none;
vertical-align: baseline;
border: 0;
font-variant: inherit;
font-stretch: inherit;
-webkit-tap-highlight-color: rgba(255,255,255,0);
font-weight: normal;
letter-spacing: normal;
text-decoration: none;
text-indent: 0;
text-shadow: none;
}
@media (hover: hover) {
button.aplbox-btn-reset:hover{
text-decoration: none;
}
}
button.aplbox-prev,
button.aplbox-next{
position: absolute;
}
button.aplbox-btn svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 30px;
fill:currentColor;
transition: color .1s ease-out;
}
@media (hover: hover) {
button.aplbox-btn:hover{
opacity: 1;
}
}
button.aplbox-next, button.aplbox-prev{
top: 50%;
margin-top: -25px;
background-color: rgba(0,0,0,0.1);
}
button.aplbox-prev{
left: 15px;
}
button.aplbox-next{
right: 15px;
}
.aplbox-controls-wrap{
display: flex;
flex-direction: row;
position: absolute;
top:0;
right: 0;
}
.aplbox-thumb-h.aplbox-thumb-opened .aplbox-next, 
.aplbox-thumb-h.aplbox-thumb-opened .aplbox-prev{
margin-top: -65px;
} .aplbox-numeration-wrap{
position: absolute;
left: 0;
top: 0;
line-height: 1;
z-index: 10;
display: flex;
align-items:center;
color: var(--aplbox-tools-color);
}
.aplbox-numeration{
display: inline-block;
padding: 12px 15px;
} .aplbox-slideshow-progress-wrap{
position: absolute;
top:0;
left: 0;
width: 100%;
height:4px;
pointer-events: none;
}
.aplbox-slideshow-progress{
position: absolute;
top:0;
left: 0;
background-color: #a90707;
height: 100%;
width: 0;
}
.aplbox-slideshow-progress-on .aplbox-slideshow-progress{
width: 100%;
} .aplbox-thumb-container-wrap{
position: absolute;
bottom:0;
left: 0;
background-color: #0d0a0a;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 40;
box-sizing: border-box;
}
.aplbox-thumb-v .aplbox-thumb-container-wrap{
left: auto;
bottom: auto;
top:0;
right: 0;
height: 100%;
width: 130px;
overflow-y: auto;
}
.aplbox-thumb-h .aplbox-thumb-container-wrap{
overflow-x: auto;
padding: 10px 0;
}
.aplbox-thumb-v .aplbox-thumb-container{
transform: translateX(0);
}
.aplbox-thumb-container-wrap::-webkit-scrollbar {
width: 8px; 
height: 8px; 
}
.aplbox-thumb-container-wrap::-webkit-scrollbar-thumb {
background:#999;
}
.aplbox-thumb-container-wrap::-webkit-scrollbar-track {
background:#e6e6e6;
}
.aplbox-thumb-container-center{
display: flex;
flex-direction: row;
justify-content: center;
}
.aplbox-thumb-container{
position: relative;
padding: 5px 0;
height: 100%;
display: flex;
flex-direction: row;
transform: translateX(0);
}
.aplbox-thumb-h .aplbox-thumb-container{ }
.aplbox-thumb-v .aplbox-thumb-container{
flex-direction: column;
padding: 0 15px;
}
.aplbox-thumb{
width: 100px;
height: 70px;
margin-right: 5px;
box-sizing: border-box;
border-radius: 4px;
border: 2px solid #fff;
transition: border-color 0.25s ease;
flex-shrink: 0;
overflow: hidden;
margin-bottom: 5px;
}
.aplbox-thumb.aplbox-thumb-active{
border-color: #a90707;
}
@media (hover: hover) {
.aplbox-thumb:hover {
border-color: #a90707;
}
}
.aplbox-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-width: 100%;
}
.aplbox-thumb-h .aplbox-thumb-container-wrap:not(.aplbox-thumb-container-center) .aplbox-thumb{
cursor: grab;
} .aplbox-preloader-wrap{
position:absolute;
top:50%;
left:50%;
margin-left:-20px;
margin-top:-34px;
pointer-events: none;
z-index: 9999;
}
.ap-preloader {
background: #ddd;
width: 40px;
height: 40px;
-webkit-animation: ap_preloader 1.2s infinite ease-in-out;
animation: ap_preloader 1.2s infinite ease-in-out;
}
@-webkit-keyframes ap_preloader {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes ap_preloader {
0% { 
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
} 50% { 
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
} 100% { 
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
.aplbox-open{
overflow: hidden!important;
}
.aplbox-hidden{
display: none!important;
}
.aplbox-wrap{
opacity: 0;
transition: opacity 0.5s;
}
.ap-overlay-shown{
display: block;
}
.ap-overlay-visible{
opacity: 1;
}
.ap-fs-overflow{
overflow:hidden!important;
}