/* Lightbox v2.10.0 Copyright 2007, 2018 Lokesh Dhakar Released under the MIT license */ .lb-loader, .lightbox { position: fixed; text-align: center; line-height: 0; left: 0; } .lb-dataContainer:after, .lb-outerContainer:after { content: ""; clear: both; } html.lb-disable-scrolling { overflow: hidden; position: fixed; height: 100vh; width: 100vw; } .lightboxOverlay { position: fixed; top: 0; bottom: 0 !important; left: 0; z-index: 9999; height: 100% !important; width: 100% !important; background-color: #000; filter: alpha(Opacity = 80); opacity: 1; display: none; overflow: hidden; } .lightbox { right: 0; bottom: 0; top: 50% !important; transform: translateY(-50%); width: 100%; z-index: 10000; font-weight: 400; .lb-image { display: block; height: auto; max-width: inherit; max-height: none; border-radius: 3px; } a img { border: none; } } .lb-outerContainer { width: 250px; height: 250px; margin: 0 auto; border-radius: 4px; background-color: rgba(255, 255, 255, 0); &:after { display: table; } } .lb-loader { top: 50%; height: 25%; width: 100%; } .lb-cancel { display: block; width: 32px; height: 32px; margin: 0 auto; background: url(../images/loading.gif) no-repeat; } .lb-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } .lb-container > .nav { left: 0; } .lb-nav a { outline: 0; background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); } .lb-next, .lb-prev { height: 100%; cursor: pointer; display: block; } .lb-nav a { &.lb-prev { width: 34%; left: 0; float: left; background: url(../images/prev.png) left 48% no-repeat; filter: alpha(Opacity = 0); opacity: 0; -webkit-transition: opacity .6s; -moz-transition: opacity .6s; -o-transition: opacity .6s; transition: opacity .6s; &:hover { filter: alpha(Opacity = 100); opacity: 1; } } &.lb-next { width: 64%; right: 0; float: right; background: url(../images/next.png) right 48% no-repeat; filter: alpha(Opacity = 0); opacity: 0; -webkit-transition: opacity .6s; -moz-transition: opacity .6s; -o-transition: opacity .6s; transition: opacity .6s; &:hover { filter: alpha(Opacity = 100); opacity: 1; } } } .lb-dataContainer { margin: 0 auto; padding-top: 5px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; &:after { display: table; } } .lb-data { padding: 0 4px; color: #ccc; .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; } .lb-caption a { color: #4ae; } .lb-number { display: block; clear: left; padding-bottom: 1em; font-size: 12px; color: #999; } .lb-close { display: block; float: right; width: 30px; height: 30px; background: url(../images/close.png) top right no-repeat; text-align: right; outline: 0; filter: alpha(Opacity = 70); opacity: .7; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; } } .lb-dataContainer, .lb-details { width: 100% !important; position: fixed; } .lb-data .lb-close:hover { cursor: pointer; filter: alpha(Opacity = 100); opacity: 1; } .lb-outerContainer { position: fixed !important; left: 50%; top: 50%; transform: translate(-50%, -50%) !important; } .lb-dataContainer { bottom: -50%; left: 0; right: 0; } .lb-closeContainer { position: fixed; left: 50%; bottom: -50%; padding-bottom: 70px; transform: scale(0.8, 0.8); margin-left: -15px; } .lb-details { padding-top: 30px; top: -50%; left: 0; right: 0; text-align: center !important; } .lb-data .lb-caption { font-weight: 700; line-height: 1em; font-size: 16px; padding-bottom: 5px; }