.lightbox { cursor: pointer; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=); background: rgba(0, 0, 0, .84); -webkit-filter: none!important; z-index: 9997 } .lightbox img { display: block; position: absolute; border: 5px solid #fff; box-shadow: 0 0 20px #000; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; background-color: #c6c6c6; } body.blurred>* { -webkit-filter: blur(2px); -webkit-transform: translate3d(0, 0, 0) } .lightbox__loading { background: url(images/lightbox/loading.gif) center center no-repeat; width: 32px; height: 32px; margin: -16px 0 0 -16px; position: absolute; top: 50%; left: 50% } .lightbox__caption { display: none; position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; z-index: 9998; background: #000; background: rgba(0, 0, 0, .7) } .lightbox__caption p { margin: 0 auto; max-width: 70%; display: inline-block; padding: 10px; color: #fff; font-size: 12px; line-height: 18px } .lightbox__button { position: absolute; z-index: 9999; background: center center no-repeat; width: 32px; height: 32px; opacity: .4; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; transition: all .3s } .lightbox__button:focus, .lightbox__button:hover { opacity: 1; -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4) } .lightbox__close { right: 10px; top: 10px; background-image: url(images/lightbox/close.png) } .lightbox__nav { top: 50%; margin-top: -16px } .lightbox__nav--next { right: 10px; background-image: url(images/lightbox/next.png) } .lightbox__nav--prev { left: 10px; background-image: url(images/lightbox/previous.png) }