#an-lightbox-container{position: fixed; top:0; left:0; width: 100%; height:100%; opacity:0; transition: opacity 500ms; background: rgba(33,33,33,0.7);z-index:10000}

#an-lightbox-destroy {font-size: 3rem; color: white; position:  absolute; top:0px; right:5px;opacity:0.8; transition: opacity 500ms; text-decoration: none; cursor: pointer;z-index:10010}
#an-lightbox-destroy:hover{opacity: 1;}
#an-lightbox-screen {position:  absolute; top:0; height: 100%; width: 100vw; border: 1px solid #999;}
.an-lightbox-slide{position: relative; width: 100vw;overflow: hidden; display:  inline-block; height: 100%; background-color:#333; background-image: url(../img/Spinner-1s-200px.png); background-position: center center; background-repeat: no-repeat;;}
.an-lightbox-slide img{max-height: 95%; max-width:95%; position: absolute; top:50%;left:50%; transform: translatex(-50%) translatey(-50%);}
.an-lightbox-nav {position: absolute; top:50%; transform: translatey(-50%); width: 60px; height:88px; background-position: center; background-size: cover;z-index: 10010;}
#an-lightbox-nav-left {left:10px; background-image: url(../img/nav-left.png);}
#an-lightbox-nav-right {right:10px; background-image: url(../img/nav-right.png);}
#an-lightbox-container a{cursor: pointer}
#an-lightbox-slides-label {position: absolute; bottom:15px; left:0; width:100%; text-align: center;z-index: 10010;}
#an-lightbox-slides-label span{display:  inline-block; background: #333; color:white; font-size:16px; padding:2px 10px; border-radius: 5px; }
body.an-lightbox-on{position: fixed__;}
body.an-lightbox-on #an-lightbox-container{opacity: 1;}
@media screen and (min-width: 500px) and (max-width: 768px) {._{}
    .an-lightbox-nav { width: 30px; height:44px;}
}
@media screen and (max-width: 499px) {._{}
    .an-lightbox-nav {width: 15px; height:22px;}
}