styles.css
  1  /* ========================================================================= */
  2  /* custom colors and icons for dark theme                                    */
  3  /* ========================================================================= */
  4  
  5  body.theme-dark .lg-backdrop,
  6  body.theme-dark .lg-outer .lg-thumb-outer,
  7  body.theme-dark .lg-next,
  8  body.theme-dark .lg-prev {
  9    background-color: rgba(0, 0, 0, 1) !important;
 10  }
 11  
 12  body.theme-dark .lg-outer .lg-thumb-item.active,
 13  body.theme-dark .lg-outer .lg-thumb-item:hover {
 14    outline: 2px solid rgba(255, 255, 255, 1);
 15  }
 16  
 17  body.theme-dark .lg-next {
 18    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M9.707 13.707l5-5c0.391-0.39 0.391-1.024 0-1.414l-5-5c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l3.293 3.293h-9.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h9.586l-3.293 3.293c-0.195 0.195-0.293 0.451-0.293 0.707s0.098 0.512 0.293 0.707c0.391 0.391 1.024 0.391 1.414 0z'%3E%3C/path%3E%3C/svg%3E%0A");
 19  }
 20  
 21  body.theme-dark .lg-prev {
 22    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M6.293 13.707l-5-5c-0.391-0.39-0.391-1.024 0-1.414l5-5c0.391-0.391 1.024-0.391 1.414 0s0.391 1.024 0 1.414l-3.293 3.293h9.586c0.552 0 1 0.448 1 1s-0.448 1-1 1h-9.586l3.293 3.293c0.195 0.195 0.293 0.451 0.293 0.707s-0.098 0.512-0.293 0.707c-0.391 0.391-1.024 0.391-1.414 0z'%3E%3C/path%3E%3C/svg%3E%0A");
 23  }
 24  
 25  body.theme-dark .lg-close {
 26    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
 27  }
 28  
 29  body.theme-dark .btn-glob-search {
 30    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Ccircle cx='11.5' cy='14.5' r='2.5'%3E%3C/circle%3E%3Cpath d='M13.25 16.25 15 18'%3E%3C/path%3E%3C/svg%3E");
 31  }
 32  
 33  /* ========================================================================= */
 34  /* custom colors and icons for light theme                                   */
 35  /* ========================================================================= */
 36  
 37  body.theme-light .lg-backdrop,
 38  body.theme-light .lg-outer .lg-thumb-outer,
 39  body.theme-light .lg-next,
 40  body.theme-light .lg-prev {
 41    background-color: rgba(255, 255, 255, 1);
 42  }
 43  
 44  body.theme-light .lg-outer .lg-thumb-item.active,
 45  body.theme-light .lg-outer .lg-thumb-item:hover {
 46    outline: 2px solid rgba(0, 0, 0, 1);
 47  }
 48  
 49  body.theme-light .lg-next {
 50    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M9.707 13.707l5-5c0.391-0.39 0.391-1.024 0-1.414l-5-5c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l3.293 3.293h-9.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h9.586l-3.293 3.293c-0.195 0.195-0.293 0.451-0.293 0.707s0.098 0.512 0.293 0.707c0.391 0.391 1.024 0.391 1.414 0z'%3E%3C/path%3E%3C/svg%3E%0A");
 51  }
 52  
 53  body.theme-light .lg-prev {
 54    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M6.293 13.707l-5-5c-0.391-0.39-0.391-1.024 0-1.414l5-5c0.391-0.391 1.024-0.391 1.414 0s0.391 1.024 0 1.414l-3.293 3.293h9.586c0.552 0 1 0.448 1 1s-0.448 1-1 1h-9.586l3.293 3.293c0.195 0.195 0.293 0.451 0.293 0.707s-0.098 0.512-0.293 0.707c-0.391 0.391-1.024 0.391-1.414 0z'%3E%3C/path%3E%3C/svg%3E%0A");
 55  }
 56  
 57  body.theme-light .lg-close {
 58    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
 59  }
 60  
 61  body.theme-light .btn-glob-search {
 62    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Ccircle cx='11.5' cy='14.5' r='2.5'%3E%3C/circle%3E%3Cpath d='M13.25 16.25 15 18'%3E%3C/path%3E%3C/svg%3E");
 63  }
 64  
 65  /* ========================================================================= */
 66  /* customized styles for lightgallery css                                    */
 67  /* ========================================================================= */
 68  
 69  .lg-container {
 70    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 71  }
 72  
 73  .lg-container button:not(.clickable-icon) {
 74    box-shadow: none !important;
 75  }
 76  
 77  .lg-next,
 78  .lg-prev {
 79    border-radius: 2px;
 80    cursor: pointer;
 81    display: block;
 82    margin-top: -10px;
 83    padding: 22px;
 84    width: 22px;
 85    height: 22px;
 86    position: absolute;
 87    top: 50%;
 88    z-index: 1084;
 89    outline: none;
 90    border: none;
 91    opacity: 0.6 !important;
 92  }
 93  
 94  .lg-next.disabled,
 95  .lg-prev.disabled {
 96    opacity: 0 !important;
 97    cursor: default;
 98  }
 99  
100  .lg-next:hover:not(.disabled),
101  .lg-prev:hover:not(.disabled) {
102    opacity: 1 !important;
103  }
104  
105  .lg-single-item .lg-next, .lg-single-item
106  .lg-prev {
107    display: none;
108  }
109  
110  .lg-next {
111    right: 20px;
112    background-position: center;
113    background-repeat: no-repeat;
114    opacity: 0.6;
115  }
116  
117  .lg-next:before {
118    content: '';
119  }
120  
121  .lg-prev {
122    left: 20px;
123    background-position: center;
124    background-repeat: no-repeat;
125    opacity: 0.6;
126  }
127  
128  .lg-prev:after {
129    content: '';
130  }
131  
132  @-webkit-keyframes lg-right-end {
133    0% {
134      left: 0;
135    }
136    50% {
137      left: -30px;
138    }
139    100% {
140      left: 0;
141    }
142  }
143  
144  @-moz-keyframes lg-right-end {
145    0% {
146      left: 0;
147    }
148    50% {
149      left: -30px;
150    }
151    100% {
152      left: 0;
153    }
154  }
155  
156  @-ms-keyframes lg-right-end {
157    0% {
158      left: 0;
159    }
160    50% {
161      left: -30px;
162    }
163    100% {
164      left: 0;
165    }
166  }
167  
168  @keyframes lg-right-end {
169    0% {
170      left: 0;
171    }
172    50% {
173      left: -30px;
174    }
175    100% {
176      left: 0;
177    }
178  }
179  
180  @-webkit-keyframes lg-left-end {
181    0% {
182      left: 0;
183    }
184    50% {
185      left: 30px;
186    }
187    100% {
188      left: 0;
189    }
190  }
191  
192  @-moz-keyframes lg-left-end {
193    0% {
194      left: 0;
195    }
196    50% {
197      left: 30px;
198    }
199    100% {
200      left: 0;
201    }
202  }
203  
204  @-ms-keyframes lg-left-end {
205    0% {
206      left: 0;
207    }
208    50% {
209      left: 30px;
210    }
211    100% {
212      left: 0;
213    }
214  }
215  
216  @keyframes lg-left-end {
217    0% {
218      left: 0;
219    }
220    50% {
221      left: 30px;
222    }
223    100% {
224      left: 0;
225    }
226  }
227  
228  .lg-outer.lg-right-end .lg-object {
229    -webkit-animation: lg-right-end 0.3s;
230    -o-animation: lg-right-end 0.3s;
231    animation: lg-right-end 0.3s;
232    position: relative;
233  }
234  
235  .lg-outer.lg-left-end .lg-object {
236    -webkit-animation: lg-left-end 0.3s;
237    -o-animation: lg-left-end 0.3s;
238    animation: lg-left-end 0.3s;
239    position: relative;
240  }
241  
242  .lg-toolbar {
243    z-index: 1082;
244    left: 0;
245    position: absolute;
246    top: 0;
247    width: 100%;
248    padding: 0px 20px;
249  }
250  
251  .lg-media-overlap .lg-toolbar {
252    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
253  }
254  
255  .lg-toolbar .lg-icon {
256    cursor: pointer;
257    float: right;
258    width: 22px;
259    height: 22px;
260    padding: 22px;
261    outline: medium none;
262    will-change: opacity;
263    -webkit-transition: opacity 0.2s linear;
264    -o-transition: opacity 0.2s linear;
265    transition: opacity 0.2s linear;
266    background: none;
267    border: none;
268    box-shadow: none;
269    opacity: 0.6;
270  }
271  
272  .lg-toolbar .lg-icon:hover {
273    opacity: 1;
274  }
275  
276  .lg-toolbar .lg-close {
277    background-position: center;
278    background-repeat: no-repeat;
279    opacity: 0.6;
280  }
281  
282  .lg-toolbar .lg-close:after {
283    content: '';
284  }
285  
286  .lg-sub-html {
287    color: #eee;
288    font-size: 16px;
289    padding: 10px 40px;
290    text-align: center;
291    z-index: 1080;
292    opacity: 0;
293    -webkit-transition: opacity 0.2s ease-out 0s;
294    -o-transition: opacity 0.2s ease-out 0s;
295    transition: opacity 0.2s ease-out 0s;
296  }
297  
298  .lg-sub-html h4 {
299    margin: 0;
300    font-size: 13px;
301    font-weight: bold;
302  }
303  
304  .lg-sub-html p {
305    font-size: 12px;
306    margin: 5px 0 0;
307  }
308  
309  .lg-sub-html a {
310    color: inherit;
311  }
312  
313  .lg-sub-html a:hover {
314    text-decoration: underline;
315  }
316  
317  .lg-media-overlap .lg-sub-html {
318    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
319  }
320  
321  .lg-item .lg-sub-html {
322    position: absolute;
323    bottom: 0;
324    right: 0;
325    left: 0;
326  }
327  
328  .lg-error-msg {
329    font-size: 14px;
330    color: #999;
331  }
332  
333  .lg-counter {
334    color: #999;
335    display: inline-block;
336    font-size: 16px;
337    padding-left: 20px;
338    padding-top: 12px;
339    height: 47px;
340    vertical-align: middle;
341  }
342  
343  .lg-closing .lg-toolbar,
344  .lg-closing .lg-prev,
345  .lg-closing .lg-next,
346  .lg-closing .lg-sub-html {
347    opacity: 0;
348    -webkit-transition: -webkit-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
349    -moz-transition: -moz-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
350    -o-transition: -o-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
351    transition: transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
352  }
353  
354  body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap,
355  body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont {
356    opacity: 0;
357    -moz-transform: scale3d(0.5, 0.5, 0.5);
358    -o-transform: scale3d(0.5, 0.5, 0.5);
359    -ms-transform: scale3d(0.5, 0.5, 0.5);
360    -webkit-transform: scale3d(0.5, 0.5, 0.5);
361    transform: scale3d(0.5, 0.5, 0.5);
362    will-change: transform, opacity;
363    -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
364    -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
365    -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
366    transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
367  }
368  
369  body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap,
370  body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont {
371    opacity: 1;
372    -moz-transform: scale3d(1, 1, 1);
373    -o-transform: scale3d(1, 1, 1);
374    -ms-transform: scale3d(1, 1, 1);
375    -webkit-transform: scale3d(1, 1, 1);
376    transform: scale3d(1, 1, 1);
377  }
378  
379  .lg-icon:focus-visible {
380    color: #fff;
381    border-radius: 3px;
382    outline: 1px dashed rgba(255, 255, 255, 0.6);
383  }
384  
385  .lg-toolbar .lg-icon:focus-visible {
386    border-radius: 8px;
387    outline-offset: -5px;
388  }
389  
390  .lg-group:after {
391    content: '';
392    display: table;
393    clear: both;
394  }
395  
396  .lg-container {
397    display: none;
398    outline: none;
399  }
400  
401  .lg-container.lg-show {
402    display: block;
403  }
404  
405  .lg-on {
406    scroll-behavior: unset;
407  }
408  
409  .lg-overlay-open {
410    overflow: hidden;
411  }
412  
413  .lg-toolbar,
414  .lg-prev,
415  .lg-next,
416  .lg-pager-outer,
417  .lg-hide-sub-html .lg-sub-html {
418    opacity: 0;
419    will-change: transform, opacity;
420    -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
421    -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
422    -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
423    transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
424  }
425  
426  .lg-show-in .lg-toolbar,
427  .lg-show-in .lg-prev,
428  .lg-show-in .lg-next,
429  .lg-show-in .lg-pager-outer {
430    opacity: 1;
431  }
432  
433  .lg-show-in.lg-hide-sub-html .lg-sub-html {
434    opacity: 1;
435  }
436  
437  .lg-show-in .lg-hide-items .lg-prev {
438    opacity: 0;
439    -webkit-transform: translate3d(-10px, 0, 0);
440    transform: translate3d(-10px, 0, 0);
441  }
442  
443  .lg-show-in .lg-hide-items .lg-next {
444    opacity: 0;
445    -webkit-transform: translate3d(10px, 0, 0);
446    transform: translate3d(10px, 0, 0);
447  }
448  
449  .lg-show-in .lg-hide-items .lg-toolbar {
450    opacity: 0;
451    -webkit-transform: translate3d(0, -10px, 0);
452    transform: translate3d(0, -10px, 0);
453  }
454  
455  .lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
456    opacity: 0;
457    -webkit-transform: translate3d(0, 20px, 0);
458    transform: translate3d(0, 20px, 0);
459  }
460  
461  .lg-outer {
462    width: 100%;
463    height: 100%;
464    position: fixed;
465    top: 0;
466    left: 0;
467    z-index: 1050;
468    text-align: left;
469    opacity: 0.001;
470    outline: none;
471    will-change: auto;
472    overflow: hidden;
473    -webkit-transition: opacity 0.15s ease 0s;
474    -o-transition: opacity 0.15s ease 0s;
475    transition: opacity 0.15s ease 0s;
476  }
477  
478  .lg-outer * {
479    -webkit-box-sizing: border-box;
480    -moz-box-sizing: border-box;
481    box-sizing: border-box;
482  }
483  
484  .lg-outer.lg-zoom-from-image {
485    opacity: 1;
486  }
487  
488  .lg-outer.lg-visible {
489    opacity: 1;
490  }
491  
492  .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current {
493    -webkit-transition-duration: inherit !important;
494    transition-duration: inherit !important;
495    -webkit-transition-timing-function: inherit !important;
496    transition-timing-function: inherit !important;
497  }
498  
499  .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
500    -webkit-transition-duration: 0s !important;
501    transition-duration: 0s !important;
502    opacity: 1;
503  }
504  
505  .lg-outer.lg-grab img.lg-object {
506    cursor: -webkit-grab;
507    cursor: -moz-grab;
508    cursor: -o-grab;
509    cursor: -ms-grab;
510    cursor: grab;
511  }
512  
513  .lg-outer.lg-grabbing img.lg-object {
514    cursor: move;
515    cursor: -webkit-grabbing;
516    cursor: -moz-grabbing;
517    cursor: -o-grabbing;
518    cursor: -ms-grabbing;
519    cursor: grabbing;
520  }
521  
522  .lg-outer .lg-content {
523    position: absolute;
524    top: 0;
525    left: 0;
526    right: 0;
527    bottom: 0;
528  }
529  
530  .lg-outer .lg-inner {
531    width: 100%;
532    position: absolute;
533    left: 0;
534    top: 0;
535    bottom: 0;
536    -webkit-transition: opacity 0s;
537    -o-transition: opacity 0s;
538    transition: opacity 0s;
539    white-space: nowrap;
540  }
541  
542  .lg-outer .lg-item {
543    display: none !important;
544  }
545  
546  .lg-outer.lg-css3 .lg-prev-slide,
547  .lg-outer.lg-css3 .lg-current,
548  .lg-outer.lg-css3 .lg-next-slide {
549    display: inline-block !important;
550  }
551  
552  .lg-outer.lg-css .lg-current {
553    display: inline-block !important;
554  }
555  
556  .lg-outer .lg-item,
557  .lg-outer .lg-img-wrap {
558    display: inline-block;
559    text-align: center;
560    position: absolute;
561    width: 100%;
562    height: 100%;
563  }
564  
565  .lg-outer .lg-item:before,
566  .lg-outer .lg-img-wrap:before {
567    content: '';
568    display: inline-block;
569    height: 100%;
570    vertical-align: middle;
571  }
572  
573  .lg-outer .lg-img-wrap {
574    position: absolute;
575    left: 0;
576    right: 0;
577    top: 0;
578    bottom: 0;
579    white-space: nowrap;
580    font-size: 0;
581  }
582  
583  .lg-outer .lg-item.lg-complete {
584    background-image: none;
585  }
586  
587  .lg-outer .lg-item.lg-current {
588    z-index: 1060;
589  }
590  
591  .lg-outer .lg-object {
592    display: inline-block;
593    vertical-align: middle;
594    max-width: 100%;
595    max-height: 100%;
596    width: auto;
597    height: auto;
598    position: relative;
599  }
600  
601  .lg-outer .lg-empty-html.lg-sub-html,
602  .lg-outer .lg-empty-html .lg-sub-html {
603    display: none;
604  }
605  
606  .lg-outer.lg-hide-download .lg-download {
607    opacity: 0.75;
608    pointer-events: none;
609  }
610  
611  .lg-outer .lg-first-slide .lg-dummy-img {
612    position: absolute;
613    top: 50%;
614    left: 50%;
615  }
616  
617  .lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
618    -webkit-transform: translate3d(0, 0%, 0);
619    transform: translate3d(0, 0%, 0);
620    opacity: 1;
621  }
622  
623  .lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
624    opacity: 1;
625    transition: opacity 0.2s ease-out 0.15s;
626  }
627  
628  .lg-backdrop {
629    position: fixed;
630    top: 0;
631    left: 0;
632    right: 0;
633    bottom: 0;
634    z-index: 1040;
635    opacity: 0;
636    will-change: auto;
637    -webkit-transition: opacity 333ms ease-in 0s;
638    -o-transition: opacity 333ms ease-in 0s;
639    transition: opacity 333ms ease-in 0s;
640  }
641  
642  .lg-backdrop.in {
643    opacity: 1;
644  }
645  
646  .lg-css3.lg-no-trans .lg-prev-slide,
647  .lg-css3.lg-no-trans .lg-next-slide,
648  .lg-css3.lg-no-trans .lg-current {
649    -webkit-transition: none 0s ease 0s !important;
650    -moz-transition: none 0s ease 0s !important;
651    -o-transition: none 0s ease 0s !important;
652    transition: none 0s ease 0s !important;
653  }
654  
655  .lg-css3.lg-use-css3 .lg-item {
656    -webkit-backface-visibility: hidden;
657    -moz-backface-visibility: hidden;
658    backface-visibility: hidden;
659  }
660  
661  .lg-css3.lg-fade .lg-item {
662    opacity: 0;
663  }
664  
665  .lg-css3.lg-fade .lg-item.lg-current {
666    opacity: 1;
667  }
668  
669  .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
670    -webkit-transition: opacity 0.1s ease 0s;
671    -moz-transition: opacity 0.1s ease 0s;
672    -o-transition: opacity 0.1s ease 0s;
673    transition: opacity 0.1s ease 0s;
674  }
675  
676  .lg-css3.lg-use-css3 .lg-item.lg-start-progress {
677    -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
678    -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
679    -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
680    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
681  }
682  
683  .lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
684    -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
685    -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
686    -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
687    transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
688  }
689  
690  .lg-css3.lg-slide.lg-use-css3 .lg-item {
691    opacity: 0;
692  }
693  
694  .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
695    -webkit-transform: translate3d(-100%, 0, 0);
696    transform: translate3d(-100%, 0, 0);
697  }
698  
699  .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
700    -webkit-transform: translate3d(100%, 0, 0);
701    transform: translate3d(100%, 0, 0);
702  }
703  
704  .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
705    -webkit-transform: translate3d(0, 0, 0);
706    transform: translate3d(0, 0, 0);
707    opacity: 1;
708  }
709  
710  .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
711    -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
712    -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
713    -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
714    transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
715  }
716  
717  .lg-container {
718    display: none;
719  }
720  
721  .lg-container.lg-show {
722    display: block;
723  }
724  
725  .lg-container.lg-dragging-vertical .lg-backdrop {
726    -webkit-transition-duration: 0s !important;
727    transition-duration: 0s !important;
728  }
729  
730  .lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
731    -webkit-transition-duration: 0s !important;
732    transition-duration: 0s !important;
733    opacity: 1;
734  }
735  
736  .lg-inline .lg-backdrop,
737  .lg-inline .lg-outer {
738    position: absolute;
739  }
740  
741  .lg-inline .lg-backdrop {
742    z-index: 1;
743  }
744  
745  .lg-inline .lg-outer {
746    z-index: 2;
747  }
748  
749  .lg-inline .lg-maximize:after {
750    content: '';
751  }
752  
753  .lg-components {
754    -webkit-transform: translate3d(0, 100%, 0);
755    transform: translate3d(0, 100%, 0);
756    will-change: transform;
757    -webkit-transition: -webkit-transform 0.35s ease-out 0s;
758    -moz-transition: -moz-transform 0.35s ease-out 0s;
759    -o-transition: -o-transform 0.35s ease-out 0s;
760    transition: transform 0.35s ease-out 0s;
761    z-index: 1080;
762    position: absolute;
763    bottom: 0;
764    right: 0;
765    left: 0;
766  }
767  
768  /* ========================================================================= */
769  /* below is a customized version of lightgallery thumbnail plugin css        */
770  /* ========================================================================= */
771  
772  .lg-outer .lg-thumb-outer {
773    width: 100%;
774    max-height: 350px;
775    overflow: hidden;
776    float: left;
777  }
778  
779  .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
780    cursor: -webkit-grab;
781    cursor: -moz-grab;
782    cursor: -o-grab;
783    cursor: -ms-grab;
784    cursor: grab;
785  }
786  
787  .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
788    cursor: move;
789    cursor: -webkit-grabbing;
790    cursor: -moz-grabbing;
791    cursor: -o-grabbing;
792    cursor: -ms-grabbing;
793    cursor: grabbing;
794  }
795  
796  .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
797    -webkit-transition-duration: 0s !important;
798    transition-duration: 0s !important;
799  }
800  
801  .lg-outer .lg-thumb-outer.lg-rebuilding-thumbnails .lg-thumb {
802    -webkit-transition-duration: 0s !important;
803    transition-duration: 0s !important;
804  }
805  
806  .lg-outer .lg-thumb-outer.lg-thumb-align-middle {
807    text-align: center;
808  }
809  
810  .lg-outer .lg-thumb-outer.lg-thumb-align-left {
811    text-align: left;
812  }
813  
814  .lg-outer .lg-thumb-outer.lg-thumb-align-right {
815    text-align: right;
816  }
817  
818  .lg-outer.lg-single-item .lg-thumb-outer {
819    display: none;
820  }
821  
822  .lg-outer .lg-thumb {
823    padding: 5px 0;
824    height: 100%;
825    margin-bottom: -5px;
826    display: inline-block;
827    vertical-align: middle;
828  }
829  
830  @media (min-width: 768px) {
831    .lg-outer .lg-thumb {
832      padding: 10px 0;
833    }
834  }
835  
836  .lg-outer .lg-thumb-item {
837    cursor: pointer;
838    float: left;
839    overflow: hidden;
840    height: 100%;
841    border-radius: 2px;
842    outline-color: rgba(255, 255, 255, 0);
843    border: 2px solid rgba(255, 255, 255, 0);
844    margin-bottom: 5px;
845    will-change: outline-color;
846  }
847  
848  @media (min-width: 768px) {
849    .lg-outer .lg-thumb-item {
850      border-radius: 4px;
851      outline-color: rgba(255, 255, 255, 0);
852      border: 2px solid rgba(255, 255, 255, 0);
853      -webkit-transition: outline-color 0.25s ease;
854      -o-transition: outline-color 0.25s ease;
855      transition: outline-color 0.25s ease;
856    }
857  }
858  
859  .lg-outer .lg-thumb-item img {
860    width: 100%;
861    height: 100%;
862    object-fit: cover;
863    display: block;
864  }
865  
866  .lg-outer.lg-can-toggle .lg-item {
867    padding-bottom: 0;
868  }
869  
870  .lg-outer .lg-toggle-thumb:after {
871    content: '';
872  }
873  
874  .lg-outer.lg-animate-thumb .lg-thumb {
875    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
876    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
877  }
878  
879  /* ========================================================================= */
880  /* custom button for global search                                           */
881  /* ========================================================================= */
882  
883  .lg-toolbar .btn-glob-search {
884    background-position: center;
885    background-repeat: no-repeat;
886    opacity: 0.6;
887  }
888  
889  .lg-toolbar .btn-glob-search:hover {
890    opacity: 1;
891  
892  }
893  
894  .lg-toolbar .btn-glob-search:after {
895    content: '';
896  }