/*leeds*/
/*https://lokeshdhakar.com/projects/lightbox2/*/
.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}
body.lb-disable-scrolling{overflow:hidden}
.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#333;opacity:0.8;display:none; /*Darken Page */}
.lightbox{width:100%;z-index:10000;font-weight:400;outline:0; }
.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:0.8rem;border:0.25rem solid #fff }/*Modal*/
.lightbox a img{border:none}
.lb-outerContainer{position:relative;width:15.625rem;height:15.625rem;margin:0 auto;border-radius:0.8rem;background-color:#fff; }
.lb-outerContainer:after{content:"";display:table;clear:both}
.lb-loader{top:43%;height:25%;width:100%}
.lb-cancel{display:block;width:2rem;height:2rem;margin:0 auto;background:url(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(prev.png) left 48% no-repeat; opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}
.lb-nav a.lb-prev:hover{opacity:9}
.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(next.png) right 48% no-repeat;opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}
.lb-nav a.lb-next:hover{opacity:9}
.lb-dataContainer{margin:0 auto;padding-top:0.3125rem;width:100%;border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem}
.lb-dataContainer:after{content:"";display:table;clear:both}
.lb-data{padding:0 0.25rem;color:#fff}
.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}
.lb-data .lb-caption{font-size:0.8125rem;font-weight:700;line-height:1em}
.lb-data .lb-caption a{color:#4ae}
.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:0.75rem;color:#999}
.lb-data .lb-close{display:block;float:right;width:1.875rem;height:1.875rem;background:url(close.png) top right no-repeat;text-align:right;outline:0;opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s; color: white}
.lb-data .lb-close:hover{cursor:pointer;filter:opacity(100%)}
.lb-data .lb-close{display:block;float:right;width:1.875rem;height:1.875rem;background:url(close.png) top right no-repeat;text-align:right;outline:0;opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s; color: white}
.example-image{border-radius: 0.8rem; border: 0.25rem solid #fff; margin-top: 0.6rem; margin-bottom: 0.6rem; margin-right: 0.3rem;  box-shadow:  0.3rem 0.3rem 0.25rem rgba(16,0,0,0.7); }
/*You should be able to add the caption by following the steps I've taken in the snippet below.
I've nested a span with the caption content inside .lightboximage. To display it below the image I have used flexbox properties.*/
.lightboximage  {display: inline-flex;flex-direction: column;text-decoration: none;}
.caption {font-family: sans-serif; color: red; font-weight: bold; display: inline-block; padding-top: .5em;}
.data-titlex { color: #000; }
.w2{max-width: 180px}