PluginProbe
Photonic Gallery & Lightbox for Flickr, SmugMug & Others / 3.37
Photonic Gallery & Lightbox for Flickr, SmugMug & Others v3.37
3.37 3.36 3.35 3.34 3.33 2.19 2.20 2.21 2.22 2.23 2.24 2.25 2.26 2.27 2.28 2.29 2.30 2.31 2.32 2.33 2.34 2.40 2.41 2.42 2.43 All 142 releases
photonic / include / ext / lightgallery / lightgallery.css

lightgallery.css in Photonic Gallery & Lightbox for Flickr, SmugMug & Others 3.37, at include/ext/lightgallery/lightgallery.css

1,156 lines 26.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @font-face {
2 font-family: 'lg';
3 src: url("lightgallery-fonts/lg.woff2?io9a6k") format("woff2"), url("lightgallery-fonts/lg.ttf?io9a6k") format("truetype"), url("lightgallery-fonts/lg.woff?io9a6k") format("woff"), url("lightgallery-fonts/lg.svg?io9a6k#lg") format("svg");
4 font-weight: normal;
5 font-style: normal;
6 font-display: block;
7 }
8
9 .lg-icon {
10 /* use !important to prevent issues with browser extensions that change fonts */
11 font-family: 'lg' !important;
12 speak: never;
13 font-style: normal;
14 font-weight: normal;
15 font-variant: normal;
16 text-transform: none;
17 line-height: 1;
18 /* Better Font Rendering =========== */
19 -webkit-font-smoothing: antialiased;
20 -moz-osx-font-smoothing: grayscale;
21 }
22
23 .lg-container {
24 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';
25 }
26
27 .lg-next,
28 .lg-prev {
29 background-color: rgba(0, 0, 0, 0.45);
30 border-radius: 2px;
31 color: #999;
32 cursor: pointer;
33 display: block;
34 font-size: 22px;
35 margin-top: -10px;
36 padding: 8px 10px 9px;
37 position: absolute;
38 top: 50%;
39 z-index: 1084;
40 outline: none;
41 border: none;
42 }
43
44 .lg-next.disabled,
45 .lg-prev.disabled {
46 opacity: 0 !important;
47 cursor: default;
48 }
49
50 .lg-next:hover:not(.disabled),
51 .lg-prev:hover:not(.disabled) {
52 color: #fff;
53 }
54
55 .lg-single-item .lg-next, .lg-single-item
56 .lg-prev {
57 display: none;
58 }
59
60 .lg-next {
61 right: 20px;
62 }
63
64 .lg-next:before {
65 content: '\e095';
66 }
67
68 .lg-prev {
69 left: 20px;
70 }
71
72 .lg-prev:after {
73 content: '\e094';
74 }
75
76 @-webkit-keyframes lg-right-end {
77 0% {
78 left: 0;
79 }
80 50% {
81 left: -30px;
82 }
83 100% {
84 left: 0;
85 }
86 }
87
88 @-moz-keyframes lg-right-end {
89 0% {
90 left: 0;
91 }
92 50% {
93 left: -30px;
94 }
95 100% {
96 left: 0;
97 }
98 }
99
100 @-ms-keyframes lg-right-end {
101 0% {
102 left: 0;
103 }
104 50% {
105 left: -30px;
106 }
107 100% {
108 left: 0;
109 }
110 }
111
112 @keyframes lg-right-end {
113 0% {
114 left: 0;
115 }
116 50% {
117 left: -30px;
118 }
119 100% {
120 left: 0;
121 }
122 }
123
124 @-webkit-keyframes lg-left-end {
125 0% {
126 left: 0;
127 }
128 50% {
129 left: 30px;
130 }
131 100% {
132 left: 0;
133 }
134 }
135
136 @-moz-keyframes lg-left-end {
137 0% {
138 left: 0;
139 }
140 50% {
141 left: 30px;
142 }
143 100% {
144 left: 0;
145 }
146 }
147
148 @-ms-keyframes lg-left-end {
149 0% {
150 left: 0;
151 }
152 50% {
153 left: 30px;
154 }
155 100% {
156 left: 0;
157 }
158 }
159
160 @keyframes lg-left-end {
161 0% {
162 left: 0;
163 }
164 50% {
165 left: 30px;
166 }
167 100% {
168 left: 0;
169 }
170 }
171
172 .lg-outer.lg-right-end .lg-object {
173 -webkit-animation: lg-right-end 0.3s;
174 -o-animation: lg-right-end 0.3s;
175 animation: lg-right-end 0.3s;
176 position: relative;
177 }
178
179 .lg-outer.lg-left-end .lg-object {
180 -webkit-animation: lg-left-end 0.3s;
181 -o-animation: lg-left-end 0.3s;
182 animation: lg-left-end 0.3s;
183 position: relative;
184 }
185
186 .lg-toolbar {
187 z-index: 1082;
188 left: 0;
189 position: absolute;
190 top: 0;
191 width: 100%;
192 }
193
194 .lg-media-overlap .lg-toolbar {
195 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
196 }
197
198 .lg-toolbar .lg-icon {
199 color: #999;
200 cursor: pointer;
201 float: right;
202 font-size: 24px;
203 height: 47px;
204 line-height: 27px;
205 padding: 10px 0;
206 text-align: center;
207 width: 50px;
208 text-decoration: none !important;
209 outline: medium none;
210 will-change: color;
211 -webkit-transition: color 0.2s linear;
212 -o-transition: color 0.2s linear;
213 transition: color 0.2s linear;
214 background: none;
215 border: none;
216 box-shadow: none;
217 }
218
219 .lg-toolbar .lg-icon.lg-icon-18 {
220 font-size: 18px;
221 }
222
223 .lg-toolbar .lg-icon:hover {
224 color: #fff;
225 }
226
227 .lg-toolbar .lg-close:after {
228 content: '\e070';
229 }
230
231 .lg-toolbar .lg-maximize {
232 font-size: 22px;
233 }
234
235 .lg-toolbar .lg-maximize:after {
236 content: '\e90a';
237 }
238
239 .lg-toolbar .lg-download:after {
240 content: '\e0f2';
241 }
242
243 .lg-sub-html {
244 color: #eee;
245 font-size: 16px;
246 padding: 10px 40px;
247 text-align: center;
248 z-index: 1080;
249 opacity: 0;
250 -webkit-transition: opacity 0.2s ease-out 0s;
251 -o-transition: opacity 0.2s ease-out 0s;
252 transition: opacity 0.2s ease-out 0s;
253 }
254
255 .lg-sub-html h4 {
256 margin: 0;
257 font-size: 13px;
258 font-weight: bold;
259 }
260
261 .lg-sub-html p {
262 font-size: 12px;
263 margin: 5px 0 0;
264 }
265
266 .lg-sub-html a {
267 color: inherit;
268 }
269
270 .lg-sub-html a:hover {
271 text-decoration: underline;
272 }
273
274 .lg-media-overlap .lg-sub-html {
275 background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
276 }
277
278 .lg-item .lg-sub-html {
279 position: absolute;
280 bottom: 0;
281 right: 0;
282 left: 0;
283 }
284
285 .lg-error-msg {
286 font-size: 14px;
287 color: #999;
288 }
289
290 .lg-counter {
291 color: #999;
292 display: inline-block;
293 font-size: 16px;
294 padding-left: 20px;
295 padding-top: 12px;
296 height: 47px;
297 vertical-align: middle;
298 }
299
300 .lg-closing .lg-toolbar,
301 .lg-closing .lg-prev,
302 .lg-closing .lg-next,
303 .lg-closing .lg-sub-html {
304 opacity: 0;
305 -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;
306 -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;
307 -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;
308 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;
309 }
310
311 body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap,
312 body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont {
313 opacity: 0;
314 -moz-transform: scale3d(0.5, 0.5, 0.5);
315 -o-transform: scale3d(0.5, 0.5, 0.5);
316 -ms-transform: scale3d(0.5, 0.5, 0.5);
317 -webkit-transform: scale3d(0.5, 0.5, 0.5);
318 transform: scale3d(0.5, 0.5, 0.5);
319 will-change: transform, opacity;
320 -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
321 -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
322 -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
323 transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
324 }
325
326 body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap,
327 body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont {
328 opacity: 1;
329 -moz-transform: scale3d(1, 1, 1);
330 -o-transform: scale3d(1, 1, 1);
331 -ms-transform: scale3d(1, 1, 1);
332 -webkit-transform: scale3d(1, 1, 1);
333 transform: scale3d(1, 1, 1);
334 }
335
336 .lg-icon:focus-visible {
337 color: #fff;
338 border-radius: 3px;
339 outline: 1px dashed rgba(255, 255, 255, 0.6);
340 }
341
342 .lg-toolbar .lg-icon:focus-visible {
343 border-radius: 8px;
344 outline-offset: -5px;
345 }
346
347 .lg-group:after {
348 content: '';
349 display: table;
350 clear: both;
351 }
352
353 .lg-container {
354 display: none;
355 outline: none;
356 }
357
358 .lg-container.lg-show {
359 display: block;
360 }
361
362 .lg-on {
363 scroll-behavior: unset;
364 }
365
366 .lg-overlay-open {
367 overflow: hidden;
368 }
369
370 .lg-toolbar,
371 .lg-prev,
372 .lg-next,
373 .lg-pager-outer,
374 .lg-hide-sub-html .lg-sub-html {
375 opacity: 0;
376 will-change: transform, opacity;
377 -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;
378 -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;
379 -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;
380 transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
381 }
382
383 .lg-show-in .lg-toolbar,
384 .lg-show-in .lg-prev,
385 .lg-show-in .lg-next,
386 .lg-show-in .lg-pager-outer {
387 opacity: 1;
388 }
389
390 .lg-show-in.lg-hide-sub-html .lg-sub-html {
391 opacity: 1;
392 }
393
394 .lg-show-in .lg-hide-items .lg-prev {
395 opacity: 0;
396 -webkit-transform: translate3d(-10px, 0, 0);
397 transform: translate3d(-10px, 0, 0);
398 }
399
400 .lg-show-in .lg-hide-items .lg-next {
401 opacity: 0;
402 -webkit-transform: translate3d(10px, 0, 0);
403 transform: translate3d(10px, 0, 0);
404 }
405
406 .lg-show-in .lg-hide-items .lg-toolbar {
407 opacity: 0;
408 -webkit-transform: translate3d(0, -10px, 0);
409 transform: translate3d(0, -10px, 0);
410 }
411
412 .lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
413 opacity: 0;
414 -webkit-transform: translate3d(0, 20px, 0);
415 transform: translate3d(0, 20px, 0);
416 }
417
418 .lg-outer {
419 width: 100%;
420 height: 100%;
421 position: fixed;
422 top: 0;
423 left: 0;
424 z-index: 1050;
425 text-align: left;
426 opacity: 0.001;
427 outline: none;
428 will-change: auto;
429 overflow: hidden;
430 -webkit-transition: opacity 0.15s ease 0s;
431 -o-transition: opacity 0.15s ease 0s;
432 transition: opacity 0.15s ease 0s;
433 }
434
435 .lg-outer * {
436 -webkit-box-sizing: border-box;
437 -moz-box-sizing: border-box;
438 box-sizing: border-box;
439 }
440
441 .lg-outer.lg-zoom-from-image {
442 opacity: 1;
443 }
444
445 .lg-outer.lg-visible {
446 opacity: 1;
447 }
448
449 .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 {
450 -webkit-transition-duration: inherit !important;
451 transition-duration: inherit !important;
452 -webkit-transition-timing-function: inherit !important;
453 transition-timing-function: inherit !important;
454 }
455
456 .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 {
457 -webkit-transition-duration: 0s !important;
458 transition-duration: 0s !important;
459 opacity: 1;
460 }
461
462 .lg-outer.lg-grab img.lg-object {
463 cursor: -webkit-grab;
464 cursor: -moz-grab;
465 cursor: -o-grab;
466 cursor: -ms-grab;
467 cursor: grab;
468 }
469
470 .lg-outer.lg-grabbing img.lg-object {
471 cursor: move;
472 cursor: -webkit-grabbing;
473 cursor: -moz-grabbing;
474 cursor: -o-grabbing;
475 cursor: -ms-grabbing;
476 cursor: grabbing;
477 }
478
479 .lg-outer .lg-content {
480 position: absolute;
481 top: 0;
482 left: 0;
483 right: 0;
484 bottom: 0;
485 }
486
487 .lg-outer .lg-inner {
488 width: 100%;
489 position: absolute;
490 left: 0;
491 top: 0;
492 bottom: 0;
493 -webkit-transition: opacity 0s;
494 -o-transition: opacity 0s;
495 transition: opacity 0s;
496 white-space: nowrap;
497 }
498
499 .lg-outer .lg-item {
500 display: none !important;
501 }
502
503 .lg-outer .lg-item:not(.lg-start-end-progress) {
504 background: url("lightgallery-img/loading.gif") no-repeat scroll center center transparent;
505 }
506
507 .lg-outer.lg-css3 .lg-prev-slide,
508 .lg-outer.lg-css3 .lg-current,
509 .lg-outer.lg-css3 .lg-next-slide {
510 display: inline-block !important;
511 }
512
513 .lg-outer.lg-css .lg-current {
514 display: inline-block !important;
515 }
516
517 .lg-outer .lg-item,
518 .lg-outer .lg-img-wrap {
519 display: inline-block;
520 text-align: center;
521 position: absolute;
522 width: 100%;
523 height: 100%;
524 }
525
526 .lg-outer .lg-item:before,
527 .lg-outer .lg-img-wrap:before {
528 content: '';
529 display: inline-block;
530 height: 100%;
531 vertical-align: middle;
532 }
533
534 .lg-outer .lg-img-wrap {
535 position: absolute;
536 left: 0;
537 right: 0;
538 top: 0;
539 bottom: 0;
540 white-space: nowrap;
541 font-size: 0;
542 }
543
544 .lg-outer .lg-item.lg-complete {
545 background-image: none;
546 }
547
548 .lg-outer .lg-item.lg-current {
549 z-index: 1060;
550 }
551
552 .lg-outer .lg-object {
553 display: inline-block;
554 vertical-align: middle;
555 max-width: 100%;
556 max-height: 100%;
557 width: auto;
558 height: auto;
559 position: relative;
560 }
561
562 .lg-outer .lg-empty-html.lg-sub-html,
563 .lg-outer .lg-empty-html .lg-sub-html {
564 display: none;
565 }
566
567 .lg-outer.lg-hide-download .lg-download {
568 opacity: 0.75;
569 pointer-events: none;
570 }
571
572 .lg-outer .lg-first-slide .lg-dummy-img {
573 position: absolute;
574 top: 50%;
575 left: 50%;
576 }
577
578 .lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
579 -webkit-transform: translate3d(0, 0%, 0);
580 transform: translate3d(0, 0%, 0);
581 opacity: 1;
582 }
583
584 .lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
585 opacity: 1;
586 transition: opacity 0.2s ease-out 0.15s;
587 }
588
589 .lg-backdrop {
590 position: fixed;
591 top: 0;
592 left: 0;
593 right: 0;
594 bottom: 0;
595 z-index: 1040;
596 background-color: #000;
597 opacity: 0;
598 will-change: auto;
599 -webkit-transition: opacity 333ms ease-in 0s;
600 -o-transition: opacity 333ms ease-in 0s;
601 transition: opacity 333ms ease-in 0s;
602 }
603
604 .lg-backdrop.in {
605 opacity: 1;
606 }
607
608 .lg-css3.lg-no-trans .lg-prev-slide,
609 .lg-css3.lg-no-trans .lg-next-slide,
610 .lg-css3.lg-no-trans .lg-current {
611 -webkit-transition: none 0s ease 0s !important;
612 -moz-transition: none 0s ease 0s !important;
613 -o-transition: none 0s ease 0s !important;
614 transition: none 0s ease 0s !important;
615 }
616
617 .lg-css3.lg-use-css3 .lg-item {
618 -webkit-backface-visibility: hidden;
619 -moz-backface-visibility: hidden;
620 backface-visibility: hidden;
621 }
622
623 .lg-css3.lg-fade .lg-item {
624 opacity: 0;
625 }
626
627 .lg-css3.lg-fade .lg-item.lg-current {
628 opacity: 1;
629 }
630
631 .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 {
632 -webkit-transition: opacity 0.1s ease 0s;
633 -moz-transition: opacity 0.1s ease 0s;
634 -o-transition: opacity 0.1s ease 0s;
635 transition: opacity 0.1s ease 0s;
636 }
637
638 .lg-css3.lg-use-css3 .lg-item.lg-start-progress {
639 -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
640 -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
641 -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
642 transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
643 }
644
645 .lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
646 -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
647 -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
648 -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
649 transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
650 }
651
652 .lg-css3.lg-slide.lg-use-css3 .lg-item {
653 opacity: 0;
654 }
655
656 .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
657 -webkit-transform: translate3d(-100%, 0, 0);
658 transform: translate3d(-100%, 0, 0);
659 }
660
661 .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
662 -webkit-transform: translate3d(100%, 0, 0);
663 transform: translate3d(100%, 0, 0);
664 }
665
666 .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
667 -webkit-transform: translate3d(0, 0, 0);
668 transform: translate3d(0, 0, 0);
669 opacity: 1;
670 }
671
672 .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 {
673 -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
674 -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
675 -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
676 transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
677 }
678
679 .lg-container {
680 display: none;
681 }
682
683 .lg-container.lg-show {
684 display: block;
685 }
686
687 .lg-container.lg-dragging-vertical .lg-backdrop {
688 -webkit-transition-duration: 0s !important;
689 transition-duration: 0s !important;
690 }
691
692 .lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
693 -webkit-transition-duration: 0s !important;
694 transition-duration: 0s !important;
695 opacity: 1;
696 }
697
698 .lg-inline .lg-backdrop,
699 .lg-inline .lg-outer {
700 position: absolute;
701 }
702
703 .lg-inline .lg-backdrop {
704 z-index: 1;
705 }
706
707 .lg-inline .lg-outer {
708 z-index: 2;
709 }
710
711 .lg-inline .lg-maximize:after {
712 content: '\e909';
713 }
714
715 .lg-components {
716 -webkit-transform: translate3d(0, 100%, 0);
717 transform: translate3d(0, 100%, 0);
718 will-change: transform;
719 -webkit-transition: -webkit-transform 0.35s ease-out 0s;
720 -moz-transition: -moz-transform 0.35s ease-out 0s;
721 -o-transition: -o-transform 0.35s ease-out 0s;
722 transition: transform 0.35s ease-out 0s;
723 z-index: 1080;
724 position: absolute;
725 bottom: 0;
726 right: 0;
727 left: 0;
728 }
729
730 /** Video */
731 .lg-outer .lg-video-cont {
732 text-align: center;
733 display: inline-block;
734 vertical-align: middle;
735 position: relative;
736 }
737
738 .lg-outer .lg-video-cont .lg-object {
739 width: 100% !important;
740 height: 100% !important;
741 }
742
743 .lg-outer .lg-has-iframe .lg-video-cont {
744 -webkit-overflow-scrolling: touch;
745 overflow: auto;
746 }
747
748 .lg-outer .lg-video-object {
749 position: absolute;
750 left: 0;
751 right: 0;
752 width: 100%;
753 height: 100%;
754 top: 0;
755 bottom: 0;
756 z-index: 3;
757 }
758
759 .lg-outer .lg-video-poster {
760 z-index: 1;
761 }
762
763 .lg-outer .lg-has-video .lg-video-object {
764 opacity: 0;
765 will-change: opacity;
766 -webkit-transition: opacity 0.3s ease-in;
767 -o-transition: opacity 0.3s ease-in;
768 transition: opacity 0.3s ease-in;
769 }
770
771 .lg-outer .lg-has-video.lg-video-loaded .lg-video-poster,
772 .lg-outer .lg-has-video.lg-video-loaded .lg-video-play-button {
773 opacity: 0 !important;
774 }
775
776 .lg-outer .lg-has-video.lg-video-loaded .lg-video-object {
777 opacity: 1;
778 }
779
780 @keyframes lg-play-stroke {
781 0% {
782 stroke-dasharray: 1, 200;
783 stroke-dashoffset: 0;
784 }
785 50% {
786 stroke-dasharray: 89, 200;
787 stroke-dashoffset: -35px;
788 }
789 100% {
790 stroke-dasharray: 89, 200;
791 stroke-dashoffset: -124px;
792 }
793 }
794
795 @keyframes lg-play-rotate {
796 100% {
797 -webkit-transform: rotate(360deg);
798 transform: rotate(360deg);
799 }
800 }
801
802 .lg-video-play-button {
803 width: 18%;
804 max-width: 140px;
805 position: absolute;
806 top: 50%;
807 left: 50%;
808 z-index: 2;
809 cursor: pointer;
810 transform: translate(-50%, -50%) scale(1);
811 will-change: opacity, transform;
812 -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
813 -moz-transition: -moz-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
814 -o-transition: -o-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
815 transition: transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
816 }
817
818 .lg-video-play-button:hover .lg-video-play-icon-bg,
819 .lg-video-play-button:hover .lg-video-play-icon {
820 opacity: 1;
821 }
822
823 .lg-video-play-icon-bg {
824 fill: none;
825 stroke-width: 3%;
826 stroke: #fcfcfc;
827 opacity: 0.6;
828 will-change: opacity;
829 -webkit-transition: opacity 0.12s ease-in;
830 -o-transition: opacity 0.12s ease-in;
831 transition: opacity 0.12s ease-in;
832 }
833
834 .lg-video-play-icon-circle {
835 position: absolute;
836 top: 0;
837 left: 0;
838 bottom: 0;
839 right: 0;
840 fill: none;
841 stroke-width: 3%;
842 stroke: rgba(30, 30, 30, 0.9);
843 stroke-opacity: 1;
844 stroke-linecap: round;
845 stroke-dasharray: 200;
846 stroke-dashoffset: 200;
847 }
848
849 .lg-video-play-icon {
850 position: absolute;
851 width: 25%;
852 max-width: 120px;
853 left: 50%;
854 top: 50%;
855 transform: translate3d(-50%, -50%, 0);
856 opacity: 0.6;
857 will-change: opacity;
858 -webkit-transition: opacity 0.12s ease-in;
859 -o-transition: opacity 0.12s ease-in;
860 transition: opacity 0.12s ease-in;
861 }
862
863 .lg-video-play-icon .lg-video-play-icon-inner {
864 fill: #fcfcfc;
865 }
866
867 .lg-video-loading .lg-video-play-icon-circle {
868 animation: lg-play-rotate 2s linear 0.25s infinite, lg-play-stroke 1.5s ease-in-out 0.25s infinite;
869 }
870
871 .lg-video-loaded .lg-video-play-button {
872 opacity: 0;
873 transform: translate(-50%, -50%) scale(0.7);
874 }
875
876 /** Autoplay */
877 .lg-progress-bar {
878 background-color: #333;
879 height: 5px;
880 left: 0;
881 position: absolute;
882 top: 0;
883 width: 100%;
884 z-index: 1083;
885 opacity: 0;
886 will-change: opacity;
887 -webkit-transition: opacity 0.08s ease 0s;
888 -moz-transition: opacity 0.08s ease 0s;
889 -o-transition: opacity 0.08s ease 0s;
890 transition: opacity 0.08s ease 0s;
891 }
892
893 .lg-progress-bar .lg-progress {
894 background-color: #a90707;
895 height: 5px;
896 width: 0;
897 }
898
899 .lg-progress-bar.lg-start .lg-progress {
900 width: 100%;
901 }
902
903 .lg-show-autoplay .lg-progress-bar {
904 opacity: 1;
905 }
906
907 .lg-autoplay-button:after {
908 content: '\e01d';
909 }
910
911 .lg-show-autoplay .lg-autoplay-button:after {
912 content: '\e01a';
913 }
914
915 .lg-single-item .lg-autoplay-button {
916 opacity: 0.75;
917 pointer-events: none;
918 }
919
920 /* Fullscreen */
921 .lg-fullscreen:after {
922 content: "\e20c";
923 }
924
925 .lg-fullscreen-on .lg-fullscreen:after {
926 content: "\e20d";
927 }
928
929 /* Thumbnail */
930 .lg-outer .lg-thumb-outer {
931 background-color: #0d0a0a;
932 width: 100%;
933 max-height: 350px;
934 overflow: hidden;
935 float: left;
936 }
937
938 .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
939 cursor: -webkit-grab;
940 cursor: -moz-grab;
941 cursor: -o-grab;
942 cursor: -ms-grab;
943 cursor: grab;
944 }
945
946 .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
947 cursor: move;
948 cursor: -webkit-grabbing;
949 cursor: -moz-grabbing;
950 cursor: -o-grabbing;
951 cursor: -ms-grabbing;
952 cursor: grabbing;
953 }
954
955 .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
956 -webkit-transition-duration: 0s !important;
957 transition-duration: 0s !important;
958 }
959
960 .lg-outer .lg-thumb-outer.lg-rebuilding-thumbnails .lg-thumb {
961 -webkit-transition-duration: 0s !important;
962 transition-duration: 0s !important;
963 }
964
965 .lg-outer .lg-thumb-outer.lg-thumb-align-middle {
966 text-align: center;
967 }
968
969 .lg-outer .lg-thumb-outer.lg-thumb-align-left {
970 text-align: left;
971 }
972
973 .lg-outer .lg-thumb-outer.lg-thumb-align-right {
974 text-align: right;
975 }
976
977 .lg-outer.lg-single-item .lg-thumb-outer {
978 display: none;
979 }
980
981 .lg-outer .lg-thumb {
982 padding: 5px 0;
983 height: 100%;
984 margin-bottom: -5px;
985 display: inline-block;
986 vertical-align: middle;
987 }
988
989 @media (min-width: 768px) {
990 .lg-outer .lg-thumb {
991 padding: 10px 0;
992 }
993 }
994
995 .lg-outer .lg-thumb-item {
996 cursor: pointer;
997 float: left;
998 overflow: hidden;
999 height: 100%;
1000 border-radius: 2px;
1001 margin-bottom: 5px;
1002 will-change: border-color;
1003 }
1004
1005 @media (min-width: 768px) {
1006 .lg-outer .lg-thumb-item {
1007 border-radius: 4px;
1008 border: 2px solid #fff;
1009 -webkit-transition: border-color 0.25s ease;
1010 -o-transition: border-color 0.25s ease;
1011 transition: border-color 0.25s ease;
1012 }
1013 }
1014
1015 .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
1016 border-color: #a90707;
1017 }
1018
1019 .lg-outer .lg-thumb-item img {
1020 width: 100%;
1021 height: 100%;
1022 object-fit: cover;
1023 display: block;
1024 }
1025
1026 .lg-outer.lg-can-toggle .lg-item {
1027 padding-bottom: 0;
1028 }
1029
1030 .lg-outer .lg-toggle-thumb:after {
1031 content: '\e1ff';
1032 }
1033
1034 .lg-outer.lg-animate-thumb .lg-thumb {
1035 -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1036 transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1037 }
1038
1039 /** Zoom */
1040 .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap,
1041 .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
1042 -webkit-transition-duration: 0ms !important;
1043 transition-duration: 0ms !important;
1044 }
1045
1046 .lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
1047 will-change: transform;
1048 -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
1049 -moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
1050 -o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
1051 transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
1052 }
1053
1054 .lg-outer.lg-use-transition-for-zoom.lg-zoom-drag-transition .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
1055 will-change: transform;
1056 -webkit-transition: -webkit-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
1057 -moz-transition: -moz-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
1058 -o-transition: -o-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
1059 transition: transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
1060 }
1061
1062 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
1063 -webkit-transform: translate3d(0, 0, 0);
1064 transform: translate3d(0, 0, 0);
1065 -webkit-backface-visibility: hidden;
1066 -moz-backface-visibility: hidden;
1067 backface-visibility: hidden;
1068 }
1069
1070 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image,
1071 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img {
1072 -webkit-transform: scale3d(1, 1, 1);
1073 transform: scale3d(1, 1, 1);
1074 -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
1075 -moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
1076 -o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
1077 transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
1078 -webkit-backface-visibility: hidden;
1079 -moz-backface-visibility: hidden;
1080 backface-visibility: hidden;
1081 }
1082
1083 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.no-transition,
1084 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.no-transition {
1085 transition: none !important;
1086 }
1087
1088 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition,
1089 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition {
1090 transform: scale3d(1, 1, 1) translate3d(-50%, -50%, 0px) !important;
1091 max-width: none !important;
1092 max-height: none !important;
1093 top: 50% !important;
1094 left: 50% !important;
1095 }
1096
1097 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-x,
1098 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-x {
1099 transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0px) !important;
1100 top: 0 !important;
1101 left: 50% !important;
1102 max-width: none !important;
1103 max-height: none !important;
1104 }
1105
1106 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-y,
1107 .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-y {
1108 transform: scale3d(1, 1, 1) translate3d(0, -50%, 0px) !important;
1109 top: 50% !important;
1110 left: 0% !important;
1111 max-width: none !important;
1112 max-height: none !important;
1113 }
1114
1115 .lg-icon.lg-zoom-in:after {
1116 content: '\e311';
1117 }
1118
1119 .lg-actual-size .lg-icon.lg-zoom-in {
1120 opacity: 0.5;
1121 pointer-events: none;
1122 }
1123
1124 .lg-icon.lg-actual-size {
1125 font-size: 20px;
1126 }
1127
1128 .lg-icon.lg-actual-size:after {
1129 content: '\e033';
1130 }
1131
1132 .lg-icon.lg-zoom-out {
1133 opacity: 0.5;
1134 pointer-events: none;
1135 }
1136
1137 .lg-icon.lg-zoom-out:after {
1138 content: '\e312';
1139 }
1140
1141 .lg-zoomed .lg-icon.lg-zoom-out {
1142 opacity: 1;
1143 pointer-events: auto;
1144 }
1145
1146 .lg-outer[data-lg-slide-type='video'] .lg-zoom-in,
1147 .lg-outer[data-lg-slide-type='video'] .lg-actual-size,
1148 .lg-outer[data-lg-slide-type='video'] .lg-zoom-out, .lg-outer[data-lg-slide-type='iframe'] .lg-zoom-in,
1149 .lg-outer[data-lg-slide-type='iframe'] .lg-actual-size,
1150 .lg-outer[data-lg-slide-type='iframe'] .lg-zoom-out, .lg-outer.lg-first-slide-loading .lg-zoom-in,
1151 .lg-outer.lg-first-slide-loading .lg-actual-size,
1152 .lg-outer.lg-first-slide-loading .lg-zoom-out {
1153 opacity: 0.75;
1154 pointer-events: none;
1155 }
1156