.lb-loader,.lightbox { text-align:center; line-height:0 } body:after { content:url(../images/close.png) url(../images/loading.gif) url(../images/anleft.png) url(../images/anright.png); display:none } .lb-dataContainer:after,.lb-outerContainer:after { content:""; clear:both } body.lb-disable-scrolling { overflow:hidden } .lightboxOverlay { position:fixed; width: 100%; height: 100%; top:0; left:0; z-index:9999999; background-color:#000; filter:alpha(Opacity=80); opacity:.8; display:none } .lightbox { position:fixed; left:0; width:100%; z-index:99999999999999; font-weight:400; top: 50%; transform: translate(0,-50%) } .lightbox .lb-image { display:block; height:auto; max-width:inherit; border-radius:3px } .lightbox a img { border:none } .lb-outerContainer { position:relative; width:250px; height:250px; margin:0 auto; border-radius:4px } .lb-loader,.lb-nav { position:absolute; left:0 } .lb-outerContainer:after { display:table } .lb-container { padding:4px } .lb-loader { top:43%; height:25%; width:100% } .lb-cancel { display:block; width:32px; height:32px; margin:0 auto; background:url(../images/loading.gif) no-repeat } .lb-nav { top: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:-100px; float:left; background:url(../images/anleft.png) no-repeat rgba(255,255,255,0.15) center center; filter:alpha(Opacity=0); position: absolute; top: 50%; margin-top: -30px; background-size:10px auto; width: 60px; height: 60px; border-radius: 100%; opacity:1; -webkit-transition:opacity .6s; -moz-transition:opacity .6s; -o-transition:opacity .6s; transition:opacity .6s } .lb-nav a.lb-prev:hover { filter:alpha(Opacity=100); opacity:1 } .lb-nav a.lb-next { width:64%; right:-100px; float:right; background:url(../images/anright.png) no-repeat rgba(255,255,255,0.15) center center; filter:alpha(Opacity=0); opacity:1; position: absolute; top: 50%; margin-top: -30px; background-size:10px auto; width: 60px; height: 60px; border-radius: 100%; -webkit-transition:opacity .6s; -moz-transition:opacity .6s; -o-transition:opacity .6s; transition:opacity .6s } .lb-nav a.lb-next:hover { filter:alpha(Opacity=100); opacity:1 } .lb-dataContainer { -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; position:absolute; right:-10px; top:-10px; z-index:9999999 } .lb-dataContainer:after { display:table } .lb-data { padding:0 4px; color:#ccc } .lb-data .lb-details { width:85%; float:left; text-align:left; line-height:1.1em; display:none } .lb-data .lb-caption { font-size:13px; font-weight:700; line-height:1em } .lb-data .lb-number { display:block; clear:left; padding-bottom:1em; font-size:12px; color:#999 } .lb-closeContainer{position: relative} .lb-data .lb-close { display:block; float:right; border-radius:100%; background:url(../images/close.png) center center no-repeat rgba(255,255,255,0.15); background-size:20px auto; text-align:right; width: 60px; height: 60px; outline:0; position: absolute; right: -50px; top: -50px; /*filter:alpha(Opacity=70); opacity:.7; -webkit-transition:opacity .2s; -moz-transition:opacity .2s; -o-transition:opacity .2s; transition:opacity .2s*/ } .lb-data .lb-close:hover { cursor:pointer; filter:alpha(Opacity=100); opacity:1 } @media screen and (max-width:1200px) { .lb-data .lb-close{width: 50px; height: 50px; right: 0;background-size: 10px auto;} .lb-nav a.lb-prev{margin-top: -25px;background-size: 10px auto;width: 50px; height: 50px;left:0px;} .lb-nav a.lb-next{margin-top: -25px;background-size: 10px auto;width: 50px; height: 50px;right:0px;} }