PluginProbe ʕ •ᴥ•ʔ
Gallery : FooGallery / 3.2.6
Gallery : FooGallery v3.2.6
3.3.2 3.3.3 3.3.0 3.1.31 3.1.32 3.1.34 3.1.36 3.2.0 3.2.6 trunk 1.10.3 2.0.24 2.1.34 2.2.44 2.3.3 2.4.32 3.0.6 3.1.11 3.1.12 3.1.13 3.1.20 3.1.25 3.1.26 3.1.26.1 3.1.26.2
foogallery / extensions / default-templates / shared / css / foogallery.css
foogallery / extensions / default-templates / shared / css Last commit date
admin-foogallery.css 4 weeks ago foogallery.css 4 weeks ago foogallery.min.css 4 weeks ago
foogallery.css
6444 lines
1 .foogallery, .foogallery * {
2 box-sizing: border-box;
3 }
4 .foogallery {
5 --fg-item-border-width: 0px;
6 --fg-item-border-radius: 0px;
7 --fg-thumb-border-radius: max(0px, calc(var(--fg-item-border-radius) - var(--fg-item-border-width)));
8 display: block;
9 z-index: 1;
10 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
11 position: relative;
12 line-height: 0;
13 font-size: 0;
14 width: 100%;
15 max-width: 100%;
16 }
17 .foogallery .fg-item {
18 display: inline-block;
19 position: relative;
20 background-color: transparent;
21 z-index: 2;
22 -webkit-user-select: none;
23 -moz-user-select: none;
24 -ms-user-select: none;
25 user-select: none;
26 }
27 .foogallery .fg-item.fg-hidden {
28 display: none!important;
29 }
30 .foogallery .fg-item-inner {
31 display: block;
32 position: relative;
33 visibility: hidden;
34 overflow: hidden;
35 opacity: 0;
36 z-index: 3;
37 margin: 0;
38 border: solid 0 transparent;
39 }
40
41 .foogallery .fg-item.fg-error:before {
42 content: "";
43 display: block;
44 position: absolute;
45 top: 50%;
46 left: 50%;
47 transform: translateX(-50%) translateY(-50%);
48 width: 32px;
49 height: 32px;
50 background-image: url('../img/icons.svg#image');
51 background-color: transparent;
52 background-repeat: no-repeat;
53 background-position: center center;
54 background-size: 32px 32px;
55 }
56
57 .foogallery .fg-item.fg-loaded {
58 z-index: 4;
59 }
60 .foogallery .fg-loaded .fg-item-inner {
61 visibility: visible;
62 opacity: 1;
63 z-index: 5;
64 }
65 .foogallery .fg-error .fg-item-inner {
66 pointer-events: none;
67 cursor: default;
68 }
69 .foogallery .fg-thumb {
70 display: block;
71 position: relative;
72 border: none;
73 outline: 0;
74 text-decoration: none;
75 z-index: 4;
76 box-shadow: none;
77 border-radius: var(--fg-thumb-border-radius);
78 }
79 .foogallery .fg-thumb:hover,
80 .foogallery .fg-thumb:focus {
81 border: none;
82 outline: 0;
83 text-decoration: none;
84 box-shadow: none;
85 }
86 .foogallery .fg-image-overlay {
87 position: absolute;
88 top: 0;
89 right: 0;
90 bottom: 0;
91 left: 0;
92 z-index: 8;
93 visibility: hidden;
94 opacity: 0;
95 }
96 .foogallery .fg-image-wrap {
97 display: block;
98 position: relative;
99 }
100 .foogallery .fg-image {
101 display: block;
102 position: relative;
103 border: none;
104 outline: 0;
105 text-decoration: none;
106 z-index: 5;
107 max-width: 100%;
108 height: auto;
109 margin: 0;
110 width: auto;
111 }
112 .foogallery picture.fg-image > img {
113 display: block;
114 position: relative;
115 border: none;
116 outline: 0;
117 text-decoration: none;
118 max-width: 100%;
119 height: auto;
120 margin: 0;
121 width: auto;
122 }
123 .foogallery .fg-loaded .fg-thumb {
124 z-index: 6;
125 }
126 .foogallery .fg-loaded .fg-image {
127 z-index: 7;
128 }
129
130 /* Utility */
131 .fg-sr-only {
132 position: absolute;
133 width: 1px;
134 height: 1px;
135 padding: 0;
136 margin: -1px;
137 overflow: hidden;
138 clip: rect(0,0,0,0);
139 border: 0;
140 }
141
142 .fg-icon {
143 fill: currentColor;
144 }
145
146 .fg-icon-spinner {
147 animation: spin 1s linear infinite;
148 }
149
150 @keyframes spin {
151 0% {
152 transform: rotate(0deg); /* Start at 0 degrees rotation */
153 }
154 100% {
155 transform: rotate(360deg); /* End at 360 degrees rotation for a full spin */
156 }
157 }
158 /* Item Style */
159 .foogallery.fg-light .fg-item-inner {
160 background-color: #FFF;
161 color: #333;
162 border-color: #FFF;
163 }
164 .foogallery.fg-dark .fg-item-inner {
165 background-color: #333;
166 color: #FFF;
167 border-color: #333;
168 }
169 /* Idle / Loading / Error Style */
170 .foogallery.fg-light .fg-item.fg-idle,
171 .foogallery.fg-light .fg-item.fg-loading,
172 .foogallery.fg-light .fg-item.fg-error {
173 background-color: #eee;
174 box-shadow: inset 0 0 0 1px #ddd;
175 }
176 .foogallery.fg-dark .fg-item.fg-idle,
177 .foogallery.fg-dark .fg-item.fg-loading,
178 .foogallery.fg-dark .fg-item.fg-error {
179 background-color: #444;
180 box-shadow: inset 0 0 0 1px #333;
181 }
182 /* Caption & Overlay Colors */
183 .foogallery .fg-caption {
184 background-color: rgba(0,0,0,0.5);
185 color: #fff;
186 }
187 .foogallery .fg-caption-title a {
188 color: #fff;
189 border-bottom-color: #FFF;
190 }
191 .foogallery .fg-caption-desc {
192 color: #d2d2d2;
193 }
194 .foogallery .fg-caption-desc a {
195 color: #d2d2d2;
196 border-bottom-color: #d2d2d2;
197 }
198 .foogallery.fg-light-overlays .fg-caption {
199 background-color: rgba(255,255,255,0.7);
200 color: #333;
201 }
202 .foogallery.fg-light-overlays .fg-caption-title a {
203 color: #333;
204 border-bottom-color: #333;
205 }
206 .foogallery.fg-light-overlays .fg-caption-desc {
207 color: #333;
208 }
209 .foogallery.fg-light-overlays .fg-caption-desc a {
210 color: #333;
211 border-bottom-color: #333;
212 }
213 .foogallery.fg-transparent-overlays .fg-caption {
214 background-color: transparent;
215 color: #fff;
216 text-shadow: 0 0 3px #000000;
217 }
218 .foogallery.fg-transparent-overlays .fg-caption-title a {
219 color: #fff;
220 border-bottom-color: #fff;
221 }
222 .foogallery.fg-transparent-overlays .fg-caption-desc {
223 color: #d2d2d2;
224 }
225 .foogallery.fg-transparent-overlays .fg-caption-desc a {
226 color: #d2d2d2;
227 border-bottom-color: #d2d2d2;
228 }
229 /* Image Overlay */
230 .foogallery .fg-image-overlay,
231 .foogallery.fg-video-sticky:not(.fg-caption-hover,.fg-preset) .fg-type-video.fg-loaded .fg-item-inner:hover .fg-image-overlay,
232 .foogallery.fg-video-sticky:not(.fg-caption-hover,.fg-preset) .fg-type-video.fg-loaded .fg-item-inner:focus-within .fg-image-overlay {
233 background-color: rgba(0,0,0,0.5);
234 color: #fff;
235 }
236 .foogallery.fg-light-overlays .fg-image-overlay,
237 .foogallery.fg-light-overlays.fg-video-sticky:not(.fg-caption-hover,.fg-preset) .fg-type-video.fg-loaded .fg-item-inner:hover .fg-image-overlay,
238 .foogallery.fg-light-overlays.fg-video-sticky:not(.fg-caption-hover,.fg-preset) .fg-type-video.fg-loaded .fg-item-inner:focus-within .fg-image-overlay {
239 background-color: rgba(255,255,255,0.8);
240 color: #333;
241 }
242 .foogallery.fg-transparent-overlays .fg-image-overlay,
243 .foogallery.fg-transparent-overlays.fg-video-sticky:not(.fg-caption-hover,.fg-preset) .fg-type-video.fg-loaded .fg-item-inner:hover .fg-image-overlay,
244 .foogallery.fg-transparent-overlays.fg-video-sticky:not(.fg-caption-hover,.fg-preset) .fg-type-video.fg-loaded .fg-item-inner:focus-within .fg-image-overlay {
245 background-color: transparent;
246 color: #fff;
247 }
248
249 /* Caption Buttons */
250 /* Button is displayed in caption over image */
251 /* Default, Block & Pill Buttons */
252 /* Light */
253 .foogallery:not(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a {
254 color: #333;
255 background-color: #fff;
256 border-color: #222;
257 }
258 .foogallery:not(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a:hover {
259 color: #333;
260 background-color: #e6e6e6;
261 border-color: #222;
262 }
263 /* Dark */
264 .foogallery.fg-light-overlays:not(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a {
265 color: #FFF;
266 background-color: #333;
267 border-color: #222;
268 }
269 .foogallery.fg-light-overlays:not(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a:hover {
270 color: #FFF;
271 background-color: #666;
272 border-color: #555;
273 }
274 /* Block & Pill Outline Buttons */
275 /* Light */
276 .foogallery:is(.fg-cb-block-outline,.fg-cb-pill-outline):not(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a {
277 color: #FFF;
278 background-color: transparent;
279 border-color: #FFF;
280 }
281 .foogallery:is(.fg-cb-block-outline,.fg-cb-pill-outline):not(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a:hover {
282 color: #333;
283 background-color: #fff;
284 border-color: #FFF;
285 }
286 /* Dark */
287 .foogallery.fg-light-overlays:is(.fg-cb-block-outline,.fg-cb-pill-outline):not(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a {
288 color: #333;
289 background-color: transparent;
290 border-color: #222;
291 }
292 .foogallery.fg-light-overlays:is(.fg-cb-block-outline,.fg-cb-pill-outline):not(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a:hover {
293 color: #FFF;
294 background-color: #333;
295 border-color: #222;
296 }
297 /* Caption Buttons + Captions Top & Bottom */
298 /* Button is displayed always either below or above the image */
299 /* Default, Block & Pill Buttons */
300 /* Light */
301 .foogallery:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a {
302 color: #333;
303 background-color: #FFF;
304 border-color: #ccc;
305 }
306 .foogallery:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a:hover {
307 color: #333;
308 background-color: #e6e6e6;
309 border-color: #ccc;
310 }
311 /* Dark */
312 .foogallery.fg-dark:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a {
313 color: #FFF;
314 background-color: #444;
315 border-color: #222;
316 }
317 .foogallery.fg-dark:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a:hover {
318 color: #FFF;
319 background-color: #666;
320 border-color: #444;
321 }
322 /* Handle light-overlay */
323 .foogallery.fg-light-overlays.fg-light:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a {
324 color: #FFF;
325 background-color: #333;
326 border-color: #222;
327 }
328 .foogallery.fg-light-overlays.fg-light:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a:hover {
329 color: #FFF;
330 background-color: #666;
331 border-color: #555;
332 }
333 .foogallery.fg-light-overlays.fg-dark:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a {
334 color: #333;
335 background-color: #FFF;
336 border-color: #222;
337 }
338 .foogallery.fg-light-overlays.fg-dark:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio) .fg-caption .fg-caption-buttons > a:hover {
339 color: #333;
340 background-color: #e6e6e6;
341 border-color: #555;
342 }
343 /* Block & Pill Outline Buttons */
344 /* Light */
345 .foogallery:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption .fg-caption-buttons > a {
346 color: #333;
347 background-color: transparent;
348 border-color: #ccc;
349 }
350 .foogallery:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption .fg-caption-buttons > a:hover {
351 color: #FFF;
352 background-color: #333;
353 border-color: #222;
354 }
355 /* Dark */
356 .foogallery.fg-dark:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption .fg-caption-buttons > a {
357 color: #FFF;
358 background-color: transparent;
359 border-color: #FFF;
360 }
361 .foogallery.fg-dark:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption .fg-caption-buttons > a:hover {
362 color: #333;
363 background-color: #FFF;
364 border-color: #FFF;
365 }
366 /* Handle the light overlay */
367 .foogallery.fg-light-overlays.fg-light:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption .fg-caption-buttons > a {
368 color: #333;
369 background-color: transparent;
370 border-color: #ccc;
371 }
372 .foogallery.fg-light-overlays.fg-light:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption .fg-caption-buttons > a:hover {
373 color: #FFF;
374 background-color: #333;
375 border-color: #222;
376 }
377 .foogallery.fg-light-overlays.fg-dark:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption .fg-caption-buttons > a {
378 color: #fff;
379 background-color: transparent;
380 border-color: #fff;
381 }
382 .foogallery.fg-light-overlays.fg-dark:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption .fg-caption-buttons > a:hover {
383 color: #333;
384 background-color: #fff;
385 border-color: #fff;
386 }
387 /* Colors */
388 .fg-exif-light .fg-item.fg-item-exif .fg-image-wrap:after {
389 background-color: #FFF;
390 color: #333;
391 }
392 .fg-exif-dark .fg-item.fg-item-exif .fg-image-wrap:after {
393 background-color: #333;
394 color: #FFF;
395 }
396
397 /* Rounded Corners */
398 .fg-exif-rounded .fg-item.fg-item-exif .fg-image-wrap:after {
399 border-radius: 3px;
400 }
401
402 /* Positions ~ Top, Right, Bottom & Left */
403 .fg-exif-bottom-right .fg-item.fg-item-exif .fg-image-wrap:after,
404 .fg-exif-bottom-left .fg-item.fg-item-exif .fg-image-wrap:after,
405 .fg-exif-top-right .fg-item.fg-item-exif .fg-image-wrap:after,
406 .fg-exif-top-left .fg-item.fg-item-exif .fg-image-wrap:after {
407 display: inline-block;
408 position: absolute;
409 content: 'EXIF';
410 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
411 font-size: 11px;
412 line-height: 10px;
413 padding: 3px 4px;
414 z-index: 7;
415 }
416 .fg-exif-bottom-right .fg-item.fg-item-exif .fg-image-wrap:after {
417 bottom: 5px;
418 right: 5px;
419 }
420 .fg-exif-bottom-left .fg-item.fg-item-exif .fg-image-wrap:after {
421 bottom: 5px;
422 left: 5px;
423 }
424 .fg-exif-top-right .fg-item.fg-item-exif .fg-image-wrap:after {
425 top: 5px;
426 right: 5px;
427 }
428 .fg-exif-top-left .fg-item.fg-item-exif .fg-image-wrap:after {
429 top: 5px;
430 left: 5px;
431 }
432 /* Border Size */
433 .foogallery.fg-border-thin {
434 --fg-item-border-width: 4px;
435 }
436 .foogallery.fg-border-medium {
437 --fg-item-border-width: 10px;
438 }
439 .foogallery.fg-border-thick {
440 --fg-item-border-width: 16px;
441 }
442 .foogallery.fg-border-thin .fg-item-inner {
443 border-width: 4px;
444 }
445 .foogallery.fg-border-medium .fg-item-inner {
446 border-width: 10px;
447 }
448 .foogallery.fg-border-thick .fg-item-inner {
449 border-width: 16px;
450 }
451
452 /* Drop Shadows */
453 .foogallery.fg-light.fg-shadow-outline .fg-item-inner {
454 box-shadow: 0 0 0 1px #ddd;
455 }
456 .foogallery.fg-dark.fg-shadow-outline .fg-item-inner {
457 box-shadow: 0 0 0 1px #222;
458 }
459 .foogallery.fg-light.fg-shadow-small .fg-item-inner,
460 .foogallery.fg-dark.fg-shadow-small .fg-item-inner {
461 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
462 }
463 .foogallery.fg-light.fg-shadow-medium .fg-item-inner,
464 .foogallery.fg-dark.fg-shadow-medium .fg-item-inner {
465 box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);
466 }
467 .foogallery.fg-light.fg-shadow-large .fg-item-inner,
468 .foogallery.fg-dark.fg-shadow-large .fg-item-inner {
469 box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.5);
470 }
471 /* Inset Shadows */
472 .foogallery.fg-shadow-inset-outline .fg-thumb:after,
473 .foogallery.fg-shadow-inset-small .fg-thumb:after,
474 .foogallery.fg-shadow-inset-medium .fg-thumb:after,
475 .foogallery.fg-shadow-inset-large .fg-thumb:after {
476 display: block;
477 content: "";
478 position: absolute;
479 top: 0;
480 left: 0;
481 right: 0;
482 bottom: 0;
483 z-index: 7;
484 border-radius: inherit;
485 }
486 .foogallery.fg-light.fg-shadow-inset-outline .fg-thumb:after {
487 box-shadow: inset 0 0 0 1px #ddd;
488 }
489 .foogallery.fg-dark.fg-shadow-inset-outline .fg-thumb:after {
490 box-shadow: inset 0 0 0 1px #222;
491 }
492 .foogallery.fg-light.fg-shadow-inset-small .fg-thumb:after,
493 .foogallery.fg-dark.fg-shadow-inset-small .fg-thumb:after {
494 box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3);
495 }
496 .foogallery.fg-light.fg-shadow-inset-medium .fg-thumb:after,
497 .foogallery.fg-dark.fg-shadow-inset-medium .fg-thumb:after {
498 box-shadow: inset 0 1px 10px 0 rgba(0,0,0,0.3);
499 }
500 .foogallery.fg-light.fg-shadow-inset-large .fg-thumb:after,
501 .foogallery.fg-dark.fg-shadow-inset-large .fg-thumb:after {
502 box-shadow: inset 0 1px 16px 0 rgba(0,0,0,0.3);
503 }
504
505 .foogallery.fg-round-full.fg-shadow-inset-small .fg-thumb:after,
506 .foogallery.fg-round-full.fg-shadow-inset-medium .fg-thumb:after,
507 .foogallery.fg-round-full.fg-shadow-inset-large .fg-thumb:after {
508 border-radius: 50%;
509 }
510 /* Rounded Corners */
511 .foogallery.fg-round-small {
512 --fg-item-border-radius: 5px;
513 }
514 .foogallery.fg-round-medium {
515 --fg-item-border-radius: 10px;
516 }
517 .foogallery.fg-round-large {
518 --fg-item-border-radius: 15px;
519 }
520 .foogallery.fg-round-full {
521 --fg-item-border-radius: 50%;
522 --fg-thumb-border-radius: 50%;
523 }
524 .foogallery.fg-round-small .fg-item,
525 .foogallery.fg-round-small .fg-item-inner {
526 border-radius: 5px;
527 }
528 .foogallery.fg-round-medium .fg-item,
529 .foogallery.fg-round-medium .fg-item-inner {
530 border-radius: 10px;
531 }
532 .foogallery.fg-round-large .fg-item,
533 .foogallery.fg-round-large .fg-item-inner {
534 border-radius: 15px;
535 }
536 .foogallery.fg-round-full .fg-item,
537 .foogallery.fg-round-full .fg-item-inner {
538 border-radius: 50%;
539 }
540
541 /* Loader Styles */
542 .foogallery .fg-loader {
543 position: absolute;
544 top: 50%;
545 left: 50%;
546 transform: translateX(-50%) translateY(-50%);
547 font-size: 5px;
548 visibility: hidden;
549 opacity: 0;
550 pointer-events: none;
551 text-indent: -9999em;
552 }
553
554 .foogallery .fg-loading .fg-loader {
555 visibility: visible;
556 opacity: 1;
557 }
558 .fg-loading-default .fg-loader {
559 width: 1em;
560 height: 1em;
561 border-radius: 50%;
562 box-shadow: 0 -2.6em 0 0 rgba(130, 130, 130, 1),
563 1.8em -1.8em 0 0 rgba(130, 130, 130, 0.2),
564 2.5em 0 0 0 rgba(130, 130, 130, 0.2),
565 1.75em 1.75em 0 0 rgba(130, 130, 130, 0.2),
566 0 2.5em 0 0 rgba(130, 130, 130, 0.2),
567 -1.8em 1.8em 0 0 rgba(130, 130, 130, 0.2),
568 -2.6em 0 0 0 rgba(130, 130, 130, 0.5),
569 -1.8em -1.8em 0 0 rgba(130, 130, 130, 0.7);
570 animation: loading-default 1.1s infinite paused steps(8, start);
571 }
572 .fg-loading-default .fg-loading .fg-loader {
573 animation-play-state: running;
574 }
575 @keyframes loading-default {
576 0% {
577 transform: translateX(-50%) translateY(-50%) rotate(0deg);
578 }
579 100% {
580 transform: translateX(-50%) translateY(-50%) rotate(360deg);
581 }
582 }
583 .fg-loading-bars .fg-loader,
584 .fg-loading-bars .fg-loader:before,
585 .fg-loading-bars .fg-loader:after {
586 background: rgba(130, 130, 130, 1);
587 width: 0.8em;
588 height: 3.2em;
589 animation: loading-bars 1s infinite paused ease-in-out;
590 }
591 .fg-loading-bars .fg-loading .fg-loader,
592 .fg-loading-bars .fg-loading .fg-loader:before,
593 .fg-loading-bars .fg-loading .fg-loader:after {
594 animation-play-state: running;
595 }
596 .fg-loading-bars .fg-loader {
597 color: rgba(130, 130, 130, 1);
598 animation-delay: -0.16s;
599 }
600 .fg-loading-bars .fg-loader:before,
601 .fg-loading-bars .fg-loader:after {
602 position: absolute;
603 top: 0;
604 content: '';
605 }
606 .fg-loading-bars .fg-loader:before {
607 left: -1.2em;
608 animation-delay: -0.32s;
609 }
610 .fg-loading-bars .fg-loader:after {
611 left: 1.2em;
612 }
613 @keyframes loading-bars {
614 0%,
615 80%,
616 100% {
617 box-shadow: 0 0;
618 height: 3.2em;
619 }
620 40% {
621 box-shadow: 0 -1.6em;
622 height: 4em;
623 }
624 }
625 .fg-loading-trail .fg-loader {
626 color: #828282;
627 width: 4em;
628 height: 4em;
629 overflow: hidden;
630 border-radius: 50%;
631 animation: loading-trail-1 1.7s infinite paused ease, loading-trail-2 1.7s infinite paused ease;
632 }
633 .fg-loading-trail .fg-loading .fg-loader {
634 animation-play-state: running;
635 }
636
637 @keyframes loading-trail-1 {
638 0% {
639 box-shadow: 0 -3.32em 0 -1.6em, 0 -3.32em 0 -1.68em, 0 -3.32em 0 -1.76em, 0 -3.32em 0 -1.84em, 0 -3.32em 0 -1.908em;
640 }
641 5%,
642 95% {
643 box-shadow: 0 -3.32em 0 -1.6em, 0 -3.32em 0 -1.68em, 0 -3.32em 0 -1.76em, 0 -3.32em 0 -1.84em, 0 -3.32em 0 -1.908em;
644 }
645 10%,
646 59% {
647 box-shadow: 0 -3.32em 0 -1.6em, -0.348em -3.3em 0 -1.68em, -0.692em -3.248em 0 -1.76em, -1.024em -3.156em 0 -1.84em, -0.891em -3.1em 0 -1.908em;
648 }
649 20% {
650 box-shadow: 0 -3.32em 0 -1.6em, -1.352em -3.032em 0 -1.68em, -2.2em -2.486em 0 -1.76em, -2.684em -1.952em 0 -1.84em, -2.996em -1.36em 0 -1.908em;
651 }
652 38% {
653 box-shadow: 0 -3.32em 0 -1.6em, -1.508em -2.96em 0 -1.68em, -2.58em -2.088em 0 -1.76em, -3.1em -0.891em 0 -1.84em, -3.28em -0.36em 0 -1.908em;
654 }
655 100% {
656 box-shadow: 0 -3.32em 0 -1.6em, 0 -3.32em 0 -1.68em, 0 -3.32em 0 -1.76em, 0 -3.32em 0 -1.84em, 0 -3.32em 0 -1.908em;
657 }
658 }
659
660 @keyframes loading-trail-2 {
661 0% {
662 transform: translateX(-50%) translateY(-50%) rotate(0deg);
663 }
664 100% {
665 transform: translateX(-50%) translateY(-50%) rotate(360deg);
666 }
667 }
668 .fg-loading-pulse .fg-loader,
669 .fg-loading-pulse .fg-loader:before,
670 .fg-loading-pulse .fg-loader:after {
671 border-radius: 50%;
672 width: 1.6em;
673 height: 1.6em;
674 animation: loading-pulse 1.8s infinite both paused ease-in-out;
675 }
676 .fg-loading-pulse .fg-loading .fg-loader,
677 .fg-loading-pulse .fg-loading .fg-loader:before,
678 .fg-loading-pulse .fg-loading .fg-loader:after {
679 animation-play-state: running;
680 }
681
682 .fg-loading-pulse .fg-loader {
683 color: #828282;
684 margin-top: -1.6em;
685 animation-delay: -0.16s;
686 }
687 .fg-loading-pulse .fg-loader:before,
688 .fg-loading-pulse .fg-loader:after {
689 content: '';
690 position: absolute;
691 top: 0;
692 }
693 .fg-loading-pulse .fg-loader:before {
694 left: -2.24em;
695 animation-delay: -0.32s;
696 }
697 .fg-loading-pulse .fg-loader:after {
698 left: 2.24em;
699 }
700
701 @keyframes loading-pulse {
702 0%,
703 80%,
704 100% {
705 box-shadow: 0 1.6em 0 -0.8em;
706 }
707 40% {
708 box-shadow: 0 1.6em 0 0;
709 }
710 }
711 .fg-loading-dots .fg-loader {
712 width: 0.8em;
713 height: 0.8em;
714 color: #828282;
715 border-radius: 50%;
716 animation: loading-dots 1.3s infinite paused linear;
717 }
718 .fg-loading-dots .fg-loading .fg-loader {
719 animation-play-state: running;
720 }
721
722 @keyframes loading-dots {
723 0%,
724 100% {
725 box-shadow: 0 -2.4em 0 0.16em, 1.6em -1.6em 0 0, 2.4em 0 0 -0.8em, 1.6em 1.6em 0 -0.8em, 0 2.4em 0 -0.8em, -1.6em 1.6em 0 -0.8em, -2.4em 0 0 -0.8em, -1.6em -1.6em 0 0;
726 }
727 12.5% {
728 box-shadow: 0 -2.4em 0 0, 1.6em -1.6em 0 0.16em, 2.4em 0 0 0, 1.6em 1.6em 0 -0.8em, 0 2.4em 0 -0.8em, -1.6em 1.6em 0 -0.8em, -2.4em 0 0 -0.8em, -1.6em -1.6em 0 -0.8em;
729 }
730 25% {
731 box-shadow: 0 -2.4em 0 -0.4em, 1.6em -1.6em 0 0, 2.4em 0 0 0.16em, 1.6em 1.6em 0 0, 0 2.4em 0 -0.8em, -1.6em 1.6em 0 -0.8em, -2.4em 0 0 -0.8em, -1.6em -1.6em 0 -0.8em;
732 }
733 37.5% {
734 box-shadow: 0 -2.4em 0 -0.8em, 1.6em -1.6em 0 -0.8em, 2.4em 0 0 0, 1.6em 1.6em 0 0.16em, 0 2.4em 0 0, -1.6em 1.6em 0 -0.8em, -2.4em 0 0 -0.8em, -1.6em -1.6em 0 -0.8em;
735 }
736 50% {
737 box-shadow: 0 -2.4em 0 -0.8em, 1.6em -1.6em 0 -0.8em, 2.4em 0 0 -0.8em, 1.6em 1.6em 0 0, 0 2.4em 0 0.16em, -1.6em 1.6em 0 0, -2.4em 0 0 -0.8em, -1.6em -1.6em 0 -0.8em;
738 }
739 62.5% {
740 box-shadow: 0 -2.4em 0 -0.8em, 1.6em -1.6em 0 -0.8em, 2.4em 0 0 -0.8em, 1.6em 1.6em 0 -0.8em, 0 2.4em 0 0, -1.6em 1.6em 0 0.16em, -2.4em 0 0 0, -1.6em -1.6em 0 -0.8em;
741 }
742 75% {
743 box-shadow: 0 -2.4em 0 -0.8em, 1.6em -1.6em 0 -0.8em, 2.4em 0 0 -0.8em, 1.6em 1.6em 0 -0.8em, 0 2.4em 0 -0.8em, -1.6em 1.6em 0 0, -2.4em 0 0 0.16em, -1.6em -1.6em 0 0;
744 }
745 87.5% {
746 box-shadow: 0 -2.4em 0 0, 1.6em -1.6em 0 -0.8em, 2.4em 0 0 -0.8em, 1.6em 1.6em 0 -0.8em, 0 2.4em 0 -0.8em, -1.6em 1.6em 0 0, -2.4em 0 0 0, -1.6em -1.6em 0 0.16em;
747 }
748 }
749 .fg-loading-partial .fg-loader {
750 border-radius: 50%;
751 width: 6em;
752 height: 6em;
753 border-top: 0.88em solid rgba(130,130,130, 0.2);
754 border-right: 0.88em solid rgba(130,130,130, 0.2);
755 border-bottom: 0.88em solid rgba(130,130,130, 0.2);
756 border-left: 0.88em solid #828282;
757 animation: loading-partial 1.1s infinite paused linear;
758 }
759 .fg-loading-partial .fg-loading .fg-loader {
760 animation-play-state: running;
761 }
762
763 @keyframes loading-partial {
764 0% {
765 transform: translateX(-50%) translateY(-50%) rotate(0deg);
766 }
767 100% {
768 transform: translateX(-50%) translateY(-50%) rotate(360deg);
769 }
770 }
771 /* Loaded Effects */
772 .foogallery.fg-loaded-fade-in .fg-item.fg-loaded,
773 .foogallery.fg-loaded-slide-up .fg-item.fg-loaded,
774 .foogallery.fg-loaded-slide-down .fg-item.fg-loaded,
775 .foogallery.fg-loaded-slide-left .fg-item.fg-loaded,
776 .foogallery.fg-loaded-slide-right .fg-item.fg-loaded,
777 .foogallery.fg-loaded-scale-up .fg-item.fg-loaded,
778 .foogallery.fg-loaded-swing-down .fg-item.fg-loaded,
779 .foogallery.fg-loaded-drop .fg-item.fg-loaded,
780 .foogallery.fg-loaded-fly .fg-item.fg-loaded,
781 .foogallery.fg-loaded-flip .fg-item.fg-loaded {
782 transition-timing-function: ease;
783 transition-duration: 650ms;
784 transition-property: background-color, transform;
785 }
786 .foogallery.fg-loaded-fade-in .fg-loaded .fg-item-inner,
787 .foogallery.fg-loaded-slide-up .fg-loaded .fg-item-inner,
788 .foogallery.fg-loaded-slide-down .fg-loaded .fg-item-inner,
789 .foogallery.fg-loaded-slide-left .fg-loaded .fg-item-inner,
790 .foogallery.fg-loaded-slide-right .fg-loaded .fg-item-inner,
791 .foogallery.fg-loaded-scale-up .fg-loaded .fg-item-inner,
792 .foogallery.fg-loaded-swing-down .fg-loaded .fg-item-inner,
793 .foogallery.fg-loaded-drop .fg-loaded .fg-item-inner,
794 .foogallery.fg-loaded-fly .fg-loaded .fg-item-inner,
795 .foogallery.fg-loaded-flip .fg-loaded .fg-item-inner {
796 transition-timing-function: ease;
797 transition-duration: 650ms;
798 }
799 /* Only apply the perspective once loaded otherwise transitions could take place behind other items*/
800 .foogallery.fg-loaded-swing-down .fg-item.fg-loaded,
801 .foogallery.fg-loaded-drop .fg-item.fg-loaded,
802 .foogallery.fg-loaded-fly .fg-item.fg-loaded,
803 .foogallery.fg-loaded-flip .fg-item.fg-loaded {
804 perspective: 1300px;
805 }
806 /* Drop */
807 .foogallery.fg-loaded-drop .fg-item-inner {
808 transition-property: visibility, opacity, transform;
809 transform-style: preserve-3d;
810 transform: translateZ(400px) translateY(100%) rotateX(-90deg);
811 }
812 .foogallery.fg-loaded-drop .fg-loaded .fg-item-inner {
813 transform: translateZ(0px) translateY(0px) rotateX(0deg);
814 }
815 /* Fade In */
816 .foogallery.fg-loaded-fade-in .fg-item-inner {
817 transition-property: visibility, opacity;
818 }
819 /* Flip */
820 .foogallery.fg-loaded-flip .fg-item-inner {
821 transition-property: visibility, opacity, transform;
822 backface-visibility: hidden;
823 transform-style: preserve-3d;
824 transform: rotateY(-180deg);
825 }
826 .foogallery.fg-loaded-flip .fg-loaded .fg-item-inner {
827 transform: rotateY(0deg);
828 }
829 /* Fly */
830 .foogallery.fg-loaded-fly .fg-item-inner {
831 transition-property: visibility, opacity, transform;
832 transform-style: preserve-3d;
833 transform-origin: 50% 50% -300px;
834 transform: rotateX(-180deg);
835 }
836 .foogallery.fg-loaded-fly .fg-loaded .fg-item-inner {
837 transform: rotateX(0deg);
838 }
839 /* Scale Up */
840 .foogallery.fg-loaded-scale-up .fg-item-inner {
841 transition-property: visibility, opacity, transform;
842 transform: scale(0.6);
843 }
844 .foogallery.fg-loaded-scale-up .fg-loaded .fg-item-inner {
845 transform: scale(1);
846 }
847 /* Slide Up */
848 .foogallery.fg-loaded-slide-up .fg-item-inner {
849 transition-property: visibility, opacity, transform;
850 transform: translateY(50%);
851 }
852 .foogallery.fg-loaded-slide-up .fg-loaded .fg-item-inner {
853 transform: translateY(0);
854 }
855 /* Slide Down */
856 .foogallery.fg-loaded-slide-down .fg-item-inner {
857 transition-property: visibility, opacity, transform;
858 transform: translateY(-50%);
859 }
860 .foogallery.fg-loaded-slide-down .fg-loaded .fg-item-inner {
861 transform: translateY(0);
862 }
863 /* Slide Left */
864 .foogallery.fg-loaded-slide-left .fg-item-inner {
865 transition-property: visibility, opacity, transform;
866 transform: translateX(50%);
867 }
868 .foogallery.fg-loaded-slide-left .fg-loaded .fg-item-inner {
869 transform: translateX(0);
870 }
871 /* Slide Right */
872 .foogallery.fg-loaded-slide-right .fg-item-inner {
873 transition-property: visibility, opacity, transform;
874 transform: translateX(-50%);
875 }
876 .foogallery.fg-loaded-slide-right .fg-loaded .fg-item-inner {
877 transform: translateX(0);
878 }
879 /* Swing Down */
880 .foogallery.fg-loaded-swing-down .fg-item-inner {
881 transition-property: visibility, opacity, transform;
882 transform-style: preserve-3d;
883 transform-origin: 0 0;
884 transform: rotateX(-80deg);
885 }
886 .foogallery.fg-loaded-swing-down .fg-loaded .fg-item-inner {
887 transform: rotateX(0deg);
888 }
889 /* Caption Styles */
890 .foogallery {
891 --fg-title-line-clamp: 2;
892 --fg-description-line-clamp: 4;
893 }
894 .foogallery .fg-caption {
895 display: flex;
896 flex-direction: column;
897 padding: 10px;
898 visibility: hidden;
899 opacity: 0;
900 position: absolute;
901 z-index: 8;
902 width: 100%;
903 max-height: 100%;
904 overflow: hidden;
905 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
906 font-size: 13px;
907 font-weight: 400;
908 font-style: normal;
909 line-height: 1.3;
910 border: none;
911 text-align: center;
912 margin: 0;
913 }
914 .foogallery .fg-thumb[href] + .fg-caption {
915 cursor: pointer;
916 }
917 .foogallery .fg-caption-inner {
918 flex: 1;
919 display: flex;
920 flex-direction: column;
921 gap: 10px;
922 max-height: 100%;
923 overflow: hidden;
924 }
925
926 .foogallery .fg-caption-title {
927 box-sizing: content-box;
928 font-size: 16px;
929 font-weight: 400;
930 padding: 0;
931 margin: 0;
932 line-height: 1.4;
933 overflow: hidden;
934 display: -webkit-box;
935 -webkit-line-clamp: var(--fg-title-line-clamp);
936 -webkit-box-orient: vertical;
937 clip-path: content-box;
938 min-height: fit-content;
939 flex: 0 0 fit-content;
940 }
941 .foogallery .fg-caption-desc {
942 padding: 0;
943 margin: 0;
944 overflow: hidden;
945 display: -webkit-box;
946 -webkit-line-clamp: var(--fg-description-line-clamp);
947 -webkit-box-orient: vertical;
948 clip-path: content-box;
949 flex: 1;
950 }
951
952 .foogallery .fg-caption-title a,
953 .foogallery .fg-caption-desc a {
954 text-decoration: none;
955 border-bottom: solid 1px currentColor;
956 transition-timing-function: ease-out;
957 transition-duration: 0.3s;
958 transition-property: color, border-color, background-color;
959 }
960 .foogallery .fg-caption-title a:hover,
961 .foogallery .fg-caption-desc a:hover {
962 border-bottom-color: transparent;
963 }
964
965 .foogallery .fg-caption-buttons {
966 --fg-base-size: 12px;
967 --fg-height: calc( var( --fg-base-size ) * 2.2 );
968 --fg-base-25: calc( var( --fg-base-size ) / 4 );
969 --fg-base-33: calc( var( --fg-base-size ) / 3 );
970 --fg-base-50: calc( var( --fg-base-size ) / 2 );
971 --fg-base-66: calc( var( --fg-base-33 ) * 2 );
972 --fg-base-75: calc( var( --fg-base-25 ) * 3 );
973 --fg-base-100: var( --fg-base-size );
974 --fg-border-radius: var(--fg-base-25);
975 --fg-border-width: 1px;
976 --fg-spacing: var(--fg-base-25);
977 --fg-padding-x: var(--fg-base-75);
978 --fg-padding-y: var(--fg-base-25);
979
980 display: flex;
981 position: relative;
982 flex-direction: row;
983 flex-wrap: wrap;
984 align-items: center;
985 justify-content: center;
986 gap: 4px;
987 font-size: var(--fg-base-size);
988 width: 100%;
989 padding: 0;
990 margin: 0;
991 }
992 .foogallery.fg-c-c .fg-caption-buttons {
993 justify-content: center;
994 }
995 .foogallery.fg-c-l .fg-caption-buttons {
996 justify-content: flex-start;
997 }
998 .foogallery.fg-c-r .fg-caption-buttons {
999 justify-content: flex-end;
1000 }
1001 .foogallery.fg-c-j .fg-caption-buttons {
1002 justify-content: stretch;
1003 }
1004 .foogallery.fg-c-j .fg-caption-buttons > a {
1005 flex: 1;
1006 }
1007
1008 .foogallery .fg-caption-buttons > a {
1009 display: inline-flex;
1010 position: relative;
1011 flex-direction: row;
1012 align-items: center;
1013 justify-content: center;
1014 padding: var(--fg-padding-y) var(--fg-padding-x);
1015 height: var(--fg-height);
1016 margin: 0 0 1px 0;
1017 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
1018 font-size: inherit;
1019 font-weight: 400;
1020 line-height: unset;
1021 text-align: center;
1022 white-space: nowrap;
1023 vertical-align: middle;
1024 cursor: pointer;
1025 user-select: none;
1026 background-image: none;
1027 text-decoration: none;
1028 text-shadow: none;
1029 border: var(--fg-border-width) solid transparent;
1030 border-radius: var(--fg-border-radius);
1031 box-shadow: none;
1032 outline: none;
1033 opacity: 1;
1034 transition-timing-function: ease-out;
1035 transition-duration: 0.3s;
1036 transition-property: color, opacity, border-color, background-color;
1037 }
1038 .foogallery .fg-caption-buttons > a:hover,
1039 .foogallery .fg-caption-buttons > a:focus {
1040 opacity: 1!important;
1041 box-shadow: none;
1042 }
1043
1044 /* Might change this */
1045 .foogallery:is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption-buttons > a {
1046 --fg-border-width: 2px;
1047 font-weight: 500;
1048 }
1049 .foogallery:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption-buttons>a {
1050 font-weight: 400;
1051 }
1052 .foogallery.fg-light:is(.fg-captions-bottom,.fg-captions-top,.fg-simple_portfolio):is(.fg-cb-block-outline,.fg-cb-pill-outline) .fg-caption-buttons>a {
1053 --fg-border-width: 1px;
1054 }
1055
1056 .foogallery.fg-cb-block .fg-caption-buttons > a,
1057 .foogallery.fg-cb-block-outline .fg-caption-buttons > a {
1058 --fg-border-radius: 0;
1059 }
1060
1061 .foogallery.fg-cb-pill .fg-caption-buttons > a,
1062 .foogallery.fg-cb-pill-outline .fg-caption-buttons > a {
1063 --fg-border-radius: calc(var(--fg-height) / 2);
1064 --fg-padding-x: calc(var(--fg-base-50) + calc(var(--fg-border-radius) / 2));
1065 }
1066
1067 @media only screen and (max-width: 600px) {
1068 .foogallery .fg-caption-buttons {
1069 align-items: stretch;
1070 }
1071 .foogallery .fg-caption-buttons > a {
1072 flex: 1;
1073 }
1074 }
1075
1076 /* Always */
1077 .foogallery.fg-caption-always .fg-item .fg-caption .fg-caption-inner:before {
1078 display: none;
1079 }
1080 .foogallery.fg-caption-always .fg-item.fg-loaded .fg-caption {
1081 left: 0;
1082 bottom: 0;
1083 transition-timing-function: ease;
1084 transition-duration: 300ms;
1085 transition-property: visibility, opacity;
1086 visibility: visible;
1087 opacity: 1;
1088 }
1089 .foogallery.fg-caption-always .fg-caption {
1090 text-align: left;
1091 }
1092
1093 /* On Hover */
1094 .foogallery.fg-caption-hover .fg-caption .fg-caption-inner {
1095 display: flex;
1096 flex-direction: column;
1097 align-items: center;
1098 justify-content: center;
1099 width: 100%;
1100 max-height: 100%;
1101 position: absolute;
1102 top: 50%;
1103 left: 0;
1104 transform: translateY(-50%);
1105 padding: 10px;
1106 }
1107 .foogallery.fg-caption-hover .fg-item.fg-loaded .fg-image-overlay {
1108 display: none;
1109 }
1110
1111 /* Alignment */
1112 .foogallery.fg-c-l .fg-caption,
1113 .foogallery.fg-caption-always.fg-c-l .fg-caption {
1114 text-align: left;
1115 }
1116 .foogallery.fg-c-c .fg-caption,
1117 .foogallery.fg-caption-always.fg-c-c .fg-caption {
1118 text-align: center;
1119 }
1120 .foogallery.fg-c-r .fg-caption,
1121 .foogallery.fg-caption-always.fg-c-r .fg-caption {
1122 text-align: right;
1123 }
1124 .foogallery.fg-c-j .fg-caption,
1125 .foogallery.fg-caption-always.fg-c-j .fg-caption {
1126 text-align: justify;
1127 }
1128 /* Icon & Overlay */
1129 .foogallery {
1130 --fg-icon-size: 32px;
1131 }
1132 .foogallery.fg-transparent-overlays {
1133 /* Upscaled as the icon is downscaled in the SVG to allow for the drop-shadow */
1134 --fg-icon-size-transparent: calc( var(--fg-icon-size) + calc( var(--fg-icon-size) * 0.25 ) );
1135 }
1136 .foogallery .fg-image-overlay:before {
1137 content: "";
1138 display: block;
1139 position: absolute;
1140 top: 50%;
1141 left: 50%;
1142 transform: translateX(-50%) translateY(-50%);
1143 width: var(--fg-icon-size);
1144 height: var(--fg-icon-size);
1145 background-size: var(--fg-icon-size) var(--fg-icon-size);
1146 background-position: center center;
1147 background-repeat: no-repeat;
1148 min-width: var(--fg-icon-size);
1149 min-height: var(--fg-icon-size);
1150 }
1151 .foogallery .fg-caption-inner:before {
1152 content: "";
1153 display: none;
1154 position: relative;
1155 width: var(--fg-icon-size);
1156 height: var(--fg-icon-size);
1157 margin: 0;
1158 background-size: var(--fg-icon-size) var(--fg-icon-size);
1159 vertical-align: middle;
1160 background-position: center center;
1161 background-repeat: no-repeat;
1162 min-width: var(--fg-icon-size);
1163 min-height: var(--fg-icon-size);
1164 }
1165 .foogallery.fg-transparent-overlays .fg-image-overlay:before,
1166 .foogallery.fg-transparent-overlays .fg-caption-inner:before {
1167 width: var(--fg-icon-size-transparent);
1168 height: var(--fg-icon-size-transparent);
1169 background-size: var(--fg-icon-size-transparent) var(--fg-icon-size-transparent);
1170 min-width: var(--fg-icon-size-transparent);
1171 min-height: var(--fg-icon-size-transparent);
1172 }
1173 .foogallery.fg-hover-zoom:not(.fg-preset) .fg-caption-inner:before,
1174 .foogallery.fg-hover-zoom2:not(.fg-preset) .fg-caption-inner:before,
1175 .foogallery.fg-hover-zoom3:not(.fg-preset) .fg-caption-inner:before,
1176 .foogallery.fg-hover-plus:not(.fg-preset) .fg-caption-inner:before,
1177 .foogallery.fg-hover-circle-plus:not(.fg-preset) .fg-caption-inner:before,
1178 .foogallery.fg-hover-eye:not(.fg-preset) .fg-caption-inner:before,
1179 .foogallery.fg-hover-external:not(.fg-preset) .fg-caption-inner:before,
1180 .foogallery.fg-hover-tint:not(.fg-preset) .fg-caption-inner:before,
1181 .foogallery.fg-hover-cart:not(.fg-preset) .fg-caption-inner:before,
1182
1183 .foogallery.fg-hover-plus2:not(.fg-preset) .fg-caption-inner:before,
1184 .foogallery.fg-hover-plus3:not(.fg-preset) .fg-caption-inner:before,
1185 .foogallery.fg-hover-square-plus:not(.fg-preset) .fg-caption-inner:before,
1186 .foogallery.fg-hover-circle-plus2:not(.fg-preset) .fg-caption-inner:before,
1187 .foogallery.fg-hover-zoom4:not(.fg-preset) .fg-caption-inner:before,
1188 .foogallery.fg-hover-zoom5:not(.fg-preset) .fg-caption-inner:before,
1189
1190 .foogallery.fg-video-default:not(.fg-preset) .fg-type-video .fg-caption-inner:before,
1191 .foogallery.fg-video-1:not(.fg-preset) .fg-type-video .fg-caption-inner:before,
1192 .foogallery.fg-video-2:not(.fg-preset) .fg-type-video .fg-caption-inner:before,
1193 .foogallery.fg-video-3:not(.fg-preset) .fg-type-video .fg-caption-inner:before,
1194 .foogallery.fg-video-4:not(.fg-preset) .fg-type-video .fg-caption-inner:before {
1195 display: block;
1196 }
1197
1198 .foogallery.fg-hover-zoom:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1199 .foogallery.fg-hover-zoom2:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1200 .foogallery.fg-hover-zoom3:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1201 .foogallery.fg-hover-plus:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1202 .foogallery.fg-hover-circle-plus:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1203 .foogallery.fg-hover-eye:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1204 .foogallery.fg-hover-external:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1205 .foogallery.fg-hover-tint:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1206 .foogallery.fg-hover-cart:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1207
1208 .foogallery.fg-hover-plus2:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1209 .foogallery.fg-hover-plus3:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1210 .foogallery.fg-hover-square-plus:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1211 .foogallery.fg-hover-circle-plus2:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1212 .foogallery.fg-hover-zoom4:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1213 .foogallery.fg-hover-zoom5:not(.fg-preset) .fg-item-inner:hover .fg-image-overlay,
1214
1215 .foogallery.fg-video-default:not(.fg-preset) .fg-type-video .fg-item-inner:hover .fg-image-overlay,
1216 .foogallery.fg-video-1:not(.fg-preset) .fg-type-video .fg-item-inner:hover .fg-image-overlay,
1217 .foogallery.fg-video-2:not(.fg-preset) .fg-type-video .fg-item-inner:hover .fg-image-overlay,
1218 .foogallery.fg-video-3:not(.fg-preset) .fg-type-video .fg-item-inner:hover .fg-image-overlay,
1219 .foogallery.fg-video-4:not(.fg-preset) .fg-type-video .fg-item-inner:hover .fg-image-overlay {
1220 visibility: visible;
1221 opacity: 1;
1222 }
1223 .foogallery.fg-video-sticky .fg-type-video.fg-loaded .fg-item-inner .fg-image-overlay {
1224 background-color: transparent;
1225 visibility: visible;
1226 opacity: 1;
1227 display: block;
1228 }
1229 .foogallery.fg-video-sticky .fg-type-video .fg-caption .fg-caption-inner:before {
1230 display: none;
1231 }
1232
1233 .foogallery.fg-hover-zoom .fg-image-overlay:before,
1234 .foogallery.fg-hover-zoom .fg-caption-inner:before {
1235 background-image: url('../img/icons.svg#zoom-light');
1236 }
1237 .foogallery.fg-light-overlays.fg-hover-zoom .fg-image-overlay:before,
1238 .foogallery.fg-light-overlays.fg-hover-zoom .fg-caption-inner:before {
1239 background-image: url('../img/icons.svg#zoom-dark');
1240 }
1241 .foogallery.fg-transparent-overlays.fg-hover-zoom .fg-image-overlay:before,
1242 .foogallery.fg-transparent-overlays.fg-hover-zoom .fg-caption-inner:before {
1243 background-image: url('../img/icons.svg#zoom-transparent');
1244 }
1245
1246 .foogallery.fg-hover-zoom2 .fg-image-overlay:before,
1247 .foogallery.fg-hover-zoom2 .fg-caption-inner:before {
1248 background-image: url('../img/icons.svg#zoom2-light');
1249 }
1250 .foogallery.fg-light-overlays.fg-hover-zoom2 .fg-image-overlay:before,
1251 .foogallery.fg-light-overlays.fg-hover-zoom2 .fg-caption-inner:before {
1252 background-image: url('../img/icons.svg#zoom2-dark');
1253 }
1254 .foogallery.fg-transparent-overlays.fg-hover-zoom2 .fg-image-overlay:before,
1255 .foogallery.fg-transparent-overlays.fg-hover-zoom2 .fg-caption-inner:before {
1256 background-image: url('../img/icons.svg#zoom2-transparent');
1257 }
1258
1259 .foogallery.fg-hover-zoom3 .fg-image-overlay:before,
1260 .foogallery.fg-hover-zoom3 .fg-caption-inner:before {
1261 background-image: url('../img/icons.svg#zoom3-light');
1262 }
1263 .foogallery.fg-light-overlays.fg-hover-zoom3 .fg-image-overlay:before,
1264 .foogallery.fg-light-overlays.fg-hover-zoom3 .fg-caption-inner:before {
1265 background-image: url('../img/icons.svg#zoom3-dark');
1266 }
1267 .foogallery.fg-transparent-overlays.fg-hover-zoom3 .fg-image-overlay:before,
1268 .foogallery.fg-transparent-overlays.fg-hover-zoom3 .fg-caption-inner:before {
1269 background-image: url('../img/icons.svg#zoom3-transparent');
1270 }
1271
1272 .foogallery.fg-hover-plus .fg-image-overlay:before,
1273 .foogallery.fg-hover-plus .fg-caption-inner:before {
1274 background-image: url('../img/icons.svg#plus-light');
1275 }
1276 .foogallery.fg-light-overlays.fg-hover-plus .fg-image-overlay:before,
1277 .foogallery.fg-light-overlays.fg-hover-plus .fg-caption-inner:before {
1278 background-image: url('../img/icons.svg#plus-dark');
1279 }
1280 .foogallery.fg-transparent-overlays.fg-hover-plus .fg-image-overlay:before,
1281 .foogallery.fg-transparent-overlays.fg-hover-plus .fg-caption-inner:before {
1282 background-image: url('../img/icons.svg#plus-transparent');
1283 }
1284
1285 .foogallery.fg-hover-circle-plus .fg-image-overlay:before,
1286 .foogallery.fg-hover-circle-plus .fg-caption-inner:before {
1287 background-image: url('../img/icons.svg#circle-plus-light');
1288 }
1289 .foogallery.fg-light-overlays.fg-hover-circle-plus .fg-image-overlay:before,
1290 .foogallery.fg-light-overlays.fg-hover-circle-plus .fg-caption-inner:before {
1291 background-image: url('../img/icons.svg#circle-plus-dark');
1292 }
1293 .foogallery.fg-transparent-overlays.fg-hover-circle-plus .fg-image-overlay:before,
1294 .foogallery.fg-transparent-overlays.fg-hover-circle-plus .fg-caption-inner:before {
1295 background-image: url('../img/icons.svg#circle-plus-transparent');
1296 }
1297
1298 .foogallery.fg-hover-eye .fg-image-overlay:before,
1299 .foogallery.fg-hover-eye .fg-caption-inner:before {
1300 background-image: url('../img/icons.svg#eye-light');
1301 }
1302 .foogallery.fg-light-overlays.fg-hover-eye .fg-image-overlay:before,
1303 .foogallery.fg-light-overlays.fg-hover-eye .fg-caption-inner:before {
1304 background-image: url('../img/icons.svg#eye-dark');
1305 }
1306 .foogallery.fg-transparent-overlays.fg-hover-eye .fg-image-overlay:before,
1307 .foogallery.fg-transparent-overlays.fg-hover-eye .fg-caption-inner:before {
1308 background-image: url('../img/icons.svg#eye-transparent');
1309 }
1310
1311 .foogallery.fg-hover-external .fg-image-overlay:before,
1312 .foogallery.fg-hover-external .fg-caption-inner:before {
1313 background-image: url('../img/icons.svg#external-light');
1314 }
1315 .foogallery.fg-light-overlays.fg-hover-external .fg-image-overlay:before,
1316 .foogallery.fg-light-overlays.fg-hover-external .fg-caption-inner:before {
1317 background-image: url('../img/icons.svg#external-dark');
1318 }
1319 .foogallery.fg-transparent-overlays.fg-hover-external .fg-image-overlay:before,
1320 .foogallery.fg-transparent-overlays.fg-hover-external .fg-caption-inner:before {
1321 background-image: url('../img/icons.svg#external-transparent');
1322 }
1323
1324 .foogallery.fg-hover-cart .fg-image-overlay:before,
1325 .foogallery.fg-hover-cart .fg-caption-inner:before {
1326 background-image: url('../img/icons.svg#cart-light');
1327 }
1328 .foogallery.fg-light-overlays.fg-hover-cart .fg-image-overlay:before,
1329 .foogallery.fg-light-overlays.fg-hover-cart .fg-caption-inner:before {
1330 background-image: url('../img/icons.svg#cart-dark');
1331 }
1332 .foogallery.fg-transparent-overlays.fg-hover-cart .fg-image-overlay:before,
1333 .foogallery.fg-transparent-overlays.fg-hover-cart .fg-caption-inner:before {
1334 background-image: url('../img/icons.svg#cart-transparent');
1335 }
1336
1337
1338
1339 .foogallery.fg-hover-plus2 .fg-image-overlay:before,
1340 .foogallery.fg-hover-plus2 .fg-caption-inner:before {
1341 background-image: url('../img/icons.svg#plus2-light');
1342 }
1343 .foogallery.fg-light-overlays.fg-hover-plus2 .fg-image-overlay:before,
1344 .foogallery.fg-light-overlays.fg-hover-plus2 .fg-caption-inner:before {
1345 background-image: url('../img/icons.svg#plus2-dark');
1346 }
1347 .foogallery.fg-transparent-overlays.fg-hover-plus2 .fg-image-overlay:before,
1348 .foogallery.fg-transparent-overlays.fg-hover-plus2 .fg-caption-inner:before {
1349 background-image: url('../img/icons.svg#plus2-transparent');
1350 }
1351
1352 .foogallery.fg-hover-plus3 .fg-image-overlay:before,
1353 .foogallery.fg-hover-plus3 .fg-caption-inner:before {
1354 background-image: url('../img/icons.svg#plus3-light');
1355 }
1356 .foogallery.fg-light-overlays.fg-hover-plus3 .fg-image-overlay:before,
1357 .foogallery.fg-light-overlays.fg-hover-plus3 .fg-caption-inner:before {
1358 background-image: url('../img/icons.svg#plus3-dark');
1359 }
1360 .foogallery.fg-transparent-overlays.fg-hover-plus3 .fg-image-overlay:before,
1361 .foogallery.fg-transparent-overlays.fg-hover-plus3 .fg-caption-inner:before {
1362 background-image: url('../img/icons.svg#plus3-transparent');
1363 }
1364
1365 .foogallery.fg-hover-square-plus .fg-image-overlay:before,
1366 .foogallery.fg-hover-square-plus .fg-caption-inner:before {
1367 background-image: url('../img/icons.svg#square-plus-light');
1368 }
1369 .foogallery.fg-light-overlays.fg-hover-square-plus .fg-image-overlay:before,
1370 .foogallery.fg-light-overlays.fg-hover-square-plus .fg-caption-inner:before {
1371 background-image: url('../img/icons.svg#square-plus-dark');
1372 }
1373 .foogallery.fg-transparent-overlays.fg-hover-square-plus .fg-image-overlay:before,
1374 .foogallery.fg-transparent-overlays.fg-hover-square-plus .fg-caption-inner:before {
1375 background-image: url('../img/icons.svg#square-plus-transparent');
1376 }
1377
1378 .foogallery.fg-hover-circle-plus2 .fg-image-overlay:before,
1379 .foogallery.fg-hover-circle-plus2 .fg-caption-inner:before {
1380 background-image: url('../img/icons.svg#circle-plus2-light');
1381 }
1382 .foogallery.fg-light-overlays.fg-hover-circle-plus2 .fg-image-overlay:before,
1383 .foogallery.fg-light-overlays.fg-hover-circle-plus2 .fg-caption-inner:before {
1384 background-image: url('../img/icons.svg#circle-plus2-dark');
1385 }
1386 .foogallery.fg-transparent-overlays.fg-hover-circle-plus2 .fg-image-overlay:before,
1387 .foogallery.fg-transparent-overlays.fg-hover-circle-plus2 .fg-caption-inner:before {
1388 background-image: url('../img/icons.svg#circle-plus2-transparent');
1389 }
1390
1391 .foogallery.fg-hover-zoom4 .fg-image-overlay:before,
1392 .foogallery.fg-hover-zoom4 .fg-caption-inner:before {
1393 background-image: url('../img/icons.svg#zoom4-light');
1394 }
1395 .foogallery.fg-light-overlays.fg-hover-zoom4 .fg-image-overlay:before,
1396 .foogallery.fg-light-overlays.fg-hover-zoom4 .fg-caption-inner:before {
1397 background-image: url('../img/icons.svg#zoom4-dark');
1398 }
1399 .foogallery.fg-transparent-overlays.fg-hover-zoom4 .fg-image-overlay:before,
1400 .foogallery.fg-transparent-overlays.fg-hover-zoom4 .fg-caption-inner:before {
1401 background-image: url('../img/icons.svg#zoom4-transparent');
1402 }
1403
1404 .foogallery.fg-hover-zoom5 .fg-image-overlay:before,
1405 .foogallery.fg-hover-zoom5 .fg-caption-inner:before {
1406 background-image: url('../img/icons.svg#zoom5-light');
1407 }
1408 .foogallery.fg-light-overlays.fg-hover-zoom5 .fg-image-overlay:before,
1409 .foogallery.fg-light-overlays.fg-hover-zoom5 .fg-caption-inner:before {
1410 background-image: url('../img/icons.svg#zoom5-dark');
1411 }
1412 .foogallery.fg-transparent-overlays.fg-hover-zoom5 .fg-image-overlay:before,
1413 .foogallery.fg-transparent-overlays.fg-hover-zoom5 .fg-caption-inner:before {
1414 background-image: url('../img/icons.svg#zoom5-transparent');
1415 }
1416
1417
1418
1419 .foogallery.fg-video-default .fg-type-video .fg-image-overlay:before,
1420 .foogallery.fg-video-default .fg-type-video .fg-caption-inner:before {
1421 background-image: url('../img/icons.svg#video-default-light');
1422 }
1423 .foogallery.fg-light-overlays.fg-video-default .fg-type-video .fg-image-overlay:before,
1424 .foogallery.fg-light-overlays.fg-video-default .fg-type-video .fg-caption-inner:before {
1425 background-image: url('../img/icons.svg#video-default-dark');
1426 }
1427 .foogallery.fg-transparent-overlays.fg-video-default .fg-type-video .fg-image-overlay:before,
1428 .foogallery.fg-transparent-overlays.fg-video-default .fg-type-video .fg-caption-inner:before {
1429 background-image: url('../img/icons.svg#video-default-transparent');
1430 }
1431
1432 .foogallery.fg-video-1 .fg-type-video .fg-image-overlay:before,
1433 .foogallery.fg-video-1 .fg-type-video .fg-caption-inner:before {
1434 background-image: url('../img/icons.svg#video-1-light');
1435 }
1436 .foogallery.fg-light-overlays.fg-video-1 .fg-type-video .fg-image-overlay:before,
1437 .foogallery.fg-light-overlays.fg-video-1 .fg-type-video .fg-caption-inner:before {
1438 background-image: url('../img/icons.svg#video-1-dark');
1439 }
1440 .foogallery.fg-transparent-overlays.fg-video-1 .fg-type-video .fg-image-overlay:before,
1441 .foogallery.fg-transparent-overlays.fg-video-1 .fg-type-video .fg-caption-inner:before {
1442 background-image: url('../img/icons.svg#video-1-transparent');
1443 }
1444
1445 .foogallery.fg-video-2 .fg-type-video .fg-image-overlay:before,
1446 .foogallery.fg-video-2 .fg-type-video .fg-caption-inner:before {
1447 background-image: url('../img/icons.svg#video-2-light');
1448 }
1449 .foogallery.fg-light-overlays.fg-video-2 .fg-type-video .fg-image-overlay:before,
1450 .foogallery.fg-light-overlays.fg-video-2 .fg-type-video .fg-caption-inner:before {
1451 background-image: url('../img/icons.svg#video-2-dark');
1452 }
1453 .foogallery.fg-transparent-overlays.fg-video-2 .fg-type-video .fg-image-overlay:before,
1454 .foogallery.fg-transparent-overlays.fg-video-2 .fg-type-video .fg-caption-inner:before {
1455 background-image: url('../img/icons.svg#video-2-transparent');
1456 }
1457
1458 .foogallery.fg-video-3 .fg-type-video .fg-image-overlay:before,
1459 .foogallery.fg-video-3 .fg-type-video .fg-caption-inner:before {
1460 background-image: url('../img/icons.svg#video-3-light');
1461 }
1462 .foogallery.fg-light-overlays.fg-video-3 .fg-type-video .fg-image-overlay:before,
1463 .foogallery.fg-light-overlays.fg-video-3 .fg-type-video .fg-caption-inner:before {
1464 background-image: url('../img/icons.svg#video-3-dark');
1465 }
1466 .foogallery.fg-transparent-overlays.fg-video-3 .fg-type-video .fg-image-overlay:before,
1467 .foogallery.fg-transparent-overlays.fg-video-3 .fg-type-video .fg-caption-inner:before {
1468 background-image: url('../img/icons.svg#video-3-transparent');
1469 }
1470
1471 .foogallery.fg-video-4 .fg-type-video .fg-image-overlay:before,
1472 .foogallery.fg-video-4 .fg-type-video .fg-caption-inner:before {
1473 background-image: url('../img/icons.svg#video-4-light');
1474 }
1475 .foogallery.fg-light-overlays.fg-video-4 .fg-type-video .fg-image-overlay:before,
1476 .foogallery.fg-light-overlays.fg-video-4 .fg-type-video .fg-caption-inner:before {
1477 background-image: url('../img/icons.svg#video-4-dark');
1478 }
1479 .foogallery.fg-transparent-overlays.fg-video-4 .fg-type-video .fg-image-overlay:before,
1480 .foogallery.fg-transparent-overlays.fg-video-4 .fg-type-video .fg-caption-inner:before {
1481 background-image: url('../img/icons.svg#video-4-transparent');
1482 }
1483 /* Preset Reset & Common */
1484 .foogallery.fg-preset .fg-thumb {
1485 transform: translateZ(0);
1486 }
1487 .foogallery.fg-preset .fg-caption {
1488 position: absolute;
1489 top: 0;
1490 left: 0;
1491 width: 100%;
1492 height: 100%;
1493 visibility: visible;
1494 opacity: 1;
1495 background-color: transparent;
1496 border: none;
1497 color: #fff;
1498 text-transform: uppercase;
1499 font-size: 13px;
1500 padding: 0;
1501 line-height: 1.2;
1502 letter-spacing: 1px;
1503 -webkit-backface-visibility: hidden;
1504 backface-visibility: hidden;
1505 }
1506 /*.foogallery.fg-preset .fg-item:not(.fg-image-dark) .fg-caption {*/
1507 /* color: #000000;*/
1508 /*}*/
1509 .foogallery.fg-preset .fg-caption-inner {
1510 position: relative;
1511 width: 100%;
1512 height: 100%;
1513 overflow: hidden;
1514 line-height: inherit;
1515 letter-spacing: inherit;
1516 text-shadow: 0 0 3px #000000;
1517 }
1518 .foogallery.fg-preset .fg-caption-title {
1519 box-sizing: border-box;
1520 font-size: 16px;
1521 line-height: inherit;
1522 letter-spacing: inherit;
1523 }
1524 .foogallery.fg-preset .fg-caption-desc {
1525 font-size: 11px;
1526 max-height: 100%;
1527 overflow: hidden;
1528 line-height: inherit;
1529 letter-spacing: inherit;
1530 color: inherit;
1531 flex: unset;
1532 }
1533 .foogallery.fg-preset .fg-caption-title+.fg-caption-desc {
1534 padding: 0;
1535 }
1536
1537 .foogallery.fg-preset .fg-caption-buttons {
1538 text-transform: none;
1539 letter-spacing: normal;
1540 }
1541
1542 /* Preset Sizes */
1543 .fg-preset.fg-preset-small .fg-caption-title {
1544 font-size: 16px;
1545 }
1546 .fg-preset.fg-preset-small .fg-caption-desc {
1547 font-size: 11px;
1548 }
1549
1550 .fg-preset.fg-preset-medium .fg-caption-title {
1551 font-size: 20px;
1552 }
1553 .fg-preset.fg-preset-medium .fg-caption-desc {
1554 font-size: 12px;
1555 }
1556
1557 .fg-preset.fg-preset-large .fg-caption-title {
1558 font-size: 24px;
1559 }
1560 .fg-preset.fg-preset-large .fg-caption-desc {
1561 font-size: 14px;
1562 }
1563
1564 .foogallery.fg-preset.fg-brad .fg-caption {
1565 padding: 15px;
1566 clip-path: content-box;
1567 }
1568 .foogallery.fg-preset.fg-brad .fg-caption-inner {
1569 position: absolute;
1570 top: 15px;
1571 right: 15px;
1572 bottom: 15px;
1573 left: 15px;
1574 width: calc(100% - 30px);
1575 height: calc(100% - 30px);
1576 gap: 0;
1577 overflow: hidden;
1578 align-items: center;
1579 justify-content: center;
1580 visibility: hidden;
1581 opacity: 0;
1582 transform: translateY(40px);
1583 background-color: rgba(0,0,0,0);
1584 transition: transform 0.35s, visibility 0.35s, opacity 0.35s, background-color 0.35s;
1585 }
1586 .foogallery.fg-preset.fg-brad .fg-caption-inner:after {
1587 content: '';
1588 display: block;
1589 width: 30%;
1590 border-bottom: 1px solid currentColor;
1591 order: 2;
1592 margin: 0 10px;
1593 }
1594 .foogallery.fg-preset.fg-brad .fg-item-inner:hover .fg-caption-inner,
1595 .foogallery.fg-preset.fg-brad .fg-item-inner:focus-within .fg-caption-inner {
1596 visibility: visible;
1597 opacity: 1;
1598 transform: translateY(0);
1599 background-color: rgba(0,0,0,0.5);
1600 }
1601 .foogallery.fg-preset.fg-brad .fg-caption-title {
1602 padding: 20px 10px;
1603 width: 100%;
1604 order: 1;
1605 }
1606 .foogallery.fg-preset.fg-brad .fg-caption-desc {
1607 padding: 20px 10px;
1608 clip-path: content-box;
1609 height: auto;
1610 text-transform: none;
1611 order: 3;
1612 }
1613
1614 .foogallery.fg-preset.fg-brad .fg-caption-buttons {
1615 order: 4;
1616 padding: 0 10px 10px;
1617 }
1618
1619 /* Text Align */
1620 .foogallery.fg-preset.fg-brad.fg-c-l .fg-caption-inner {
1621 align-items: flex-start;
1622 }
1623 .foogallery.fg-preset.fg-brad.fg-c-r .fg-caption-inner {
1624 align-items: flex-end;
1625 }
1626 /* Transitions */
1627 .foogallery.fg-caption-hover.fg-hover-instant .fg-loaded .fg-caption,
1628 .foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-caption,
1629 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-caption,
1630 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-caption,
1631 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-caption,
1632 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-caption,
1633 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-caption,
1634 .foogallery.fg-caption-hover.fg-hover-colorize .fg-loaded .fg-caption,
1635 .foogallery.fg-caption-hover.fg-hover-grayscale .fg-loaded .fg-caption,
1636 .foogallery.fg-caption-hover.fg-hover-scale .fg-loaded .fg-caption,
1637 .foogallery.fg-hover-instant .fg-loaded .fg-image-overlay,
1638 .foogallery.fg-hover-fade .fg-loaded .fg-image-overlay,
1639 .foogallery.fg-hover-slide-up .fg-loaded .fg-image-overlay,
1640 .foogallery.fg-hover-slide-down .fg-loaded .fg-image-overlay,
1641 .foogallery.fg-hover-slide-left .fg-loaded .fg-image-overlay,
1642 .foogallery.fg-hover-slide-right .fg-loaded .fg-image-overlay,
1643 .foogallery.fg-hover-push .fg-loaded .fg-thumb,
1644 .foogallery.fg-hover-colorize .fg-loaded .fg-image-overlay,
1645 .foogallery.fg-hover-grayscale .fg-loaded .fg-image-overlay,
1646 .foogallery.fg-hover-scale .fg-item.fg-loaded,
1647 .foogallery.fg-hover-scale .fg-loaded .fg-image-overlay,
1648 .foogallery.fg-hover-zoomed .fg-loaded .fg-image,
1649 .foogallery.fg-hover-semi-zoomed .fg-loaded .fg-image,
1650 .foogallery.fg-hover-colorize .fg-loaded .fg-image,
1651 .foogallery.fg-hover-grayscale .fg-loaded .fg-image {
1652 transition-timing-function: ease;
1653 transition-duration: 300ms;
1654 backface-visibility: hidden;
1655 }
1656 /* Colorize */
1657 .foogallery.fg-hover-colorize .fg-image {
1658 filter: grayscale(100%);
1659 transition-property: filter;
1660 }
1661 .foogallery.fg-hover-colorize .fg-item-inner:hover .fg-image,
1662 .foogallery.fg-hover-colorize .fg-item-inner:focus-within .fg-image {
1663 filter: grayscale(0%);
1664 }
1665 .foogallery.fg-hover-colorize .fg-image-overlay,
1666 .foogallery.fg-caption-hover.fg-hover-colorize .fg-caption {
1667 display: block;
1668 left: 0;
1669 top: 0;
1670 bottom: 0;
1671 transition-property: visibility, opacity, background-color;
1672 }
1673 .foogallery.fg-hover-colorize .fg-item-inner:hover .fg-image-overlay,
1674 .foogallery.fg-caption-hover.fg-hover-colorize .fg-item-inner:hover .fg-caption,
1675 .foogallery.fg-hover-colorize .fg-item-inner:focus-within .fg-image-overlay,
1676 .foogallery.fg-caption-hover.fg-hover-colorize .fg-item-inner:focus-within .fg-caption {
1677 visibility: visible;
1678 opacity: 1;
1679 }
1680 /* Fade */
1681 .foogallery.fg-hover-fade .fg-loaded .fg-image-overlay,
1682 .foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-caption {
1683 display: block;
1684 left: 0;
1685 top: 0;
1686 bottom: 0;
1687 transition-property: visibility, opacity, background-color;
1688 }
1689 .foogallery.fg-hover-fade .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1690 .foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-item-inner:hover .fg-caption,
1691 .foogallery.fg-hover-fade .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1692 .foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-item-inner:focus-within .fg-caption {
1693 visibility: visible;
1694 opacity: 1;
1695 }
1696 /* Grayscale */
1697 .foogallery.fg-hover-grayscale .fg-image {
1698 filter: grayscale(0%);
1699 transition-property: filter;
1700 }
1701 .foogallery.fg-hover-grayscale .fg-item-inner:hover .fg-image,
1702 .foogallery.fg-hover-grayscale .fg-item-inner:focus-within .fg-image {
1703 filter: grayscale(100%);
1704 }
1705 .foogallery.fg-hover-grayscale .fg-image-overlay,
1706 .foogallery.fg-caption-hover.fg-hover-grayscale .fg-caption {
1707 display: block;
1708 left: 0;
1709 top: 0;
1710 bottom: 0;
1711 transition-property: visibility, opacity, background-color;
1712 }
1713 .foogallery.fg-hover-grayscale .fg-item-inner:hover .fg-image-overlay,
1714 .foogallery.fg-caption-hover.fg-hover-grayscale .fg-item-inner:hover .fg-caption,
1715 .foogallery.fg-hover-grayscale .fg-item-inner:focus-within .fg-image-overlay,
1716 .foogallery.fg-caption-hover.fg-hover-grayscale .fg-item-inner:focus-within .fg-caption {
1717 visibility: visible;
1718 opacity: 1;
1719 }
1720 /* Instant */
1721 .foogallery.fg-hover-instant .fg-loaded .fg-image-overlay,
1722 .foogallery.fg-caption-hover.fg-hover-instant .fg-loaded .fg-caption {
1723 display: block;
1724 left: 0;
1725 top: 0;
1726 bottom: 0;
1727 transition-property: none;
1728 }
1729 .foogallery.fg-hover-instant .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1730 .foogallery.fg-caption-hover.fg-hover-instant .fg-loaded .fg-item-inner:hover .fg-caption,
1731 .foogallery.fg-hover-instant .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1732 .foogallery.fg-caption-hover.fg-hover-instant .fg-loaded .fg-item-inner:focus-within .fg-caption {
1733 visibility: visible;
1734 opacity: 1;
1735 }
1736 /* Push */
1737 .foogallery.fg-hover-push .fg-loaded .fg-image-overlay,
1738 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-caption {
1739 display: block;
1740 left: 0;
1741 top: 0;
1742 bottom: 0;
1743 transform: translateX(100%);
1744 visibility: visible;
1745 opacity: 1;
1746 }
1747 .foogallery.fg-hover-push .fg-loaded .fg-thumb,
1748 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-caption {
1749 transition-property: transform;
1750 }
1751 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-item-inner:hover .fg-caption,
1752 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-item-inner:focus-within .fg-caption {
1753 transform: translateY(0);
1754 }
1755 .foogallery.fg-hover-push .fg-loaded .fg-item-inner:hover .fg-thumb,
1756 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-item-inner:hover .fg-thumb,
1757 .foogallery.fg-hover-push .fg-loaded .fg-item-inner .fg-thumb:focus,
1758 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-item-inner .fg-thumb:focus {
1759 transform: translateX(-100%);
1760 }
1761 /* Scale */
1762 .foogallery.fg-hover-scale .fg-item {
1763 transition-property: transform;
1764 z-index: 4;
1765 }
1766
1767 .foogallery.fg-hover-scale .fg-item:hover,
1768 .foogallery.fg-hover-scale .fg-item:focus-within {
1769 transform: scale(1.048);
1770 z-index: 10;
1771 }
1772 .foogallery.fg-hover-scale .fg-image-overlay,
1773 .foogallery.fg-caption-hover.fg-hover-scale .fg-caption {
1774 display: block;
1775 left: 0;
1776 top: 0;
1777 bottom: 0;
1778 transition-property: visibility, opacity, background-color;
1779 }
1780 .foogallery.fg-hover-scale .fg-item-inner:hover .fg-image-overlay,
1781 .foogallery.fg-caption-hover.fg-hover-scale .fg-item-inner:hover .fg-caption,
1782 .foogallery.fg-hover-scale .fg-item-inner:focus-within .fg-image-overlay,
1783 .foogallery.fg-caption-hover.fg-hover-scale .fg-item-inner:focus-within .fg-caption {
1784 visibility: visible;
1785 opacity: 1;
1786 }
1787 /* Zoomed */
1788 .foogallery.fg-hover-zoomed .fg-image {
1789 transition-property: transform;
1790 z-index: 4;
1791 }
1792 .foogallery.fg-hover-zoomed .fg-item:hover .fg-image,
1793 .foogallery.fg-hover-zoomed .fg-item:focus-within .fg-image {
1794 transform: scale(1.15);
1795 }
1796 .foogallery.fg-hover-zoomed .fg-image-wrap {
1797 overflow: hidden;
1798 }
1799
1800 .foogallery.fg-hover-zoomed .fg-image-overlay,
1801 .foogallery.fg-caption-hover.fg-hover-zoomed .fg-caption {
1802 display: block;
1803 left: 0;
1804 top: 0;
1805 bottom: 0;
1806 transition-property: visibility, opacity, background-color;
1807 }
1808 .foogallery.fg-hover-zoomed .fg-item-inner:hover .fg-image-overlay,
1809 .foogallery.fg-caption-hover.fg-hover-zoomed .fg-item-inner:hover .fg-caption,
1810 .foogallery.fg-hover-zoomed .fg-item-inner:focus-within .fg-image-overlay,
1811 .foogallery.fg-caption-hover.fg-hover-zoomed .fg-item-inner:focus-within .fg-caption {
1812 visibility: visible;
1813 opacity: 1;
1814 }
1815 /* Zoomed */
1816 .foogallery.fg-hover-semi-zoomed .fg-image {
1817 transition-property: transform;
1818 z-index: 4;
1819 }
1820 .foogallery.fg-hover-semi-zoomed .fg-item:hover .fg-image,
1821 .foogallery.fg-hover-semi-zoomed .fg-item:focus-within .fg-image {
1822 transform: scale(1.05);
1823 }
1824 .foogallery.fg-hover-semi-zoomed .fg-image-wrap {
1825 overflow: hidden;
1826 }
1827
1828 .foogallery.fg-hover-semi-zoomed .fg-image-overlay,
1829 .foogallery.fg-caption-hover.fg-hover-semi-zoomed .fg-caption {
1830 display: block;
1831 left: 0;
1832 top: 0;
1833 bottom: 0;
1834 transition-property: visibility, opacity, background-color;
1835 }
1836 .foogallery.fg-hover-semi-zoomed .fg-item-inner:hover .fg-image-overlay,
1837 .foogallery.fg-caption-hover.fg-hover-semi-zoomed .fg-item-inner:hover .fg-caption,
1838 .foogallery.fg-hover-semi-zoomed .fg-item-inner:focus-within .fg-image-overlay,
1839 .foogallery.fg-caption-hover.fg-hover-semi-zoomed .fg-item-inner:focus-within .fg-caption {
1840 visibility: visible;
1841 opacity: 1;
1842 }
1843 /* Slide */
1844 .foogallery.fg-hover-slide-up .fg-loaded .fg-image-overlay,
1845 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-caption,
1846 .foogallery.fg-hover-slide-down .fg-loaded .fg-image-overlay,
1847 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-caption,
1848 .foogallery.fg-hover-slide-left .fg-loaded .fg-image-overlay,
1849 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-caption,
1850 .foogallery.fg-hover-slide-right .fg-loaded .fg-image-overlay,
1851 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-caption {
1852 display: block;
1853 left: 0;
1854 top: 0;
1855 bottom: 0;
1856 transition-property: transform, background-color, opacity, visibility;
1857 visibility: visible;
1858 opacity: 1;
1859 }
1860 .foogallery.fg-hover-slide-up .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1861 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-item-inner:hover .fg-caption,
1862 .foogallery.fg-hover-slide-down .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1863 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-item-inner:hover .fg-caption,
1864 .foogallery.fg-hover-slide-left .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1865 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-item-inner:hover .fg-caption,
1866 .foogallery.fg-hover-slide-right .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1867 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-item-inner:hover .fg-caption,
1868 .foogallery.fg-hover-slide-up .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1869 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-item-inner:focus-within .fg-caption,
1870 .foogallery.fg-hover-slide-down .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1871 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-item-inner:focus-within .fg-caption,
1872 .foogallery.fg-hover-slide-left .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1873 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-item-inner:focus-within .fg-caption,
1874 .foogallery.fg-hover-slide-right .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1875 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-item-inner:focus-within .fg-caption {
1876 transform: translateY(0) translateX(0);
1877 }
1878
1879
1880 /* Slide Up */
1881 .foogallery.fg-hover-slide-up .fg-loaded .fg-image-overlay,
1882 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-caption {
1883 transform: translateY(100%);
1884 }
1885
1886 /* Slide Down */
1887 .foogallery.fg-hover-slide-down .fg-loaded .fg-image-overlay,
1888 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-caption {
1889 transform: translateY(-100%);
1890 }
1891
1892 /* Slide Left */
1893 .foogallery.fg-hover-slide-left .fg-loaded .fg-image-overlay,
1894 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-caption {
1895 transform: translateX(100%);
1896 }
1897
1898 /* Slide Right */
1899 .foogallery.fg-hover-slide-right .fg-loaded .fg-image-overlay,
1900 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-caption {
1901 transform: translateX(-100%);
1902 }
1903 .fg-paging-container, .fg-paging-container *, .fg-paging-container *:before, .fg-paging-container *:after {
1904 box-sizing: border-box;
1905 }
1906 .fg-paging-container {
1907 display: block;
1908 padding: 15px;
1909 margin-top: 0!important;
1910 margin-bottom: 0!important;
1911 margin-left: auto;
1912 margin-right: auto;
1913 text-align: center;
1914 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
1915 -webkit-user-select: none;
1916 -moz-user-select: none;
1917 -ms-user-select: none;
1918 user-select: none;
1919 }
1920 .fg-ph-dots:after {
1921 display: block;
1922 content: '';
1923 width: 0;
1924 height: 22px;
1925 }
1926
1927 .fg-paging-container .fg-dots,
1928 .fg-paging-container .fg-dot-item {
1929 display: inline-block;
1930 margin: 0;
1931 padding: 0;
1932 outline: none;
1933 list-style: none;
1934 }
1935 .fg-paging-container .fg-dot-item .fg-dot-link {
1936 display: inline-block;
1937 margin: 3px;
1938 font-weight: 400;
1939 line-height: 1.4;
1940 text-align: center;
1941 white-space: nowrap;
1942 vertical-align: middle;
1943 cursor: pointer;
1944 user-select: none;
1945 background-image: none;
1946 text-decoration: none;
1947 border: 1px solid transparent;
1948 position: relative;
1949 border-radius: 50%;
1950 padding: 0;
1951 font-size: 0;
1952 outline: none;
1953 color: transparent;
1954 box-shadow: none;
1955 }
1956 .fg-paging-container .fg-dot-item .fg-dot-link:before {
1957 content: "";
1958 background-color: transparent;
1959 border: 1px solid transparent;
1960 display: block;
1961 border-radius: 50%;
1962 width: 9px;
1963 height: 9px;
1964 padding: 0;
1965 margin: 2px;
1966 }
1967 .fg-paging-container .fg-dot-item .fg-dot-link:active,
1968 .fg-paging-container .fg-dot-item .fg-dot-link:hover,
1969 .fg-paging-container .fg-dot-item .fg-dot-link:focus {
1970 text-decoration: none;
1971 box-shadow: none;
1972 outline: none;
1973 }
1974 /*.fg-paging-container .fg-dot-item .fg-dot-link:focus:not(:hover) {*/
1975 /* outline-style: dashed;*/
1976 /* outline-width: 1px ;*/
1977 /* outline-offset: 1px;*/
1978 /*}*/
1979 .fg-paging-container .fg-dot-item.fg-disabled .fg-dot-link,
1980 .fg-paging-container .fg-dot-item.fg-selected .fg-dot-link {
1981 cursor: not-allowed;
1982 pointer-events: none;
1983 }
1984 .fg-paging-container .fg-dot-item.fg-disabled .fg-dot-link {
1985 cursor: not-allowed;
1986 pointer-events: none;
1987 outline: none;
1988 }
1989
1990 /* Light - Dots */
1991 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link,
1992 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:before {
1993 transition-timing-function: ease-out;
1994 transition-duration: 0.3s;
1995 transition-property: color, border-color, background-color;
1996 }
1997 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link {
1998 background-color: #eee;
1999 border-color: #9d9d9d;
2000 outline-color: #9d9d9d;
2001 }
2002 .fg-paging-container.fg-light .fg-dot-item.fg-selected .fg-dot-link {
2003 border-color: #888;
2004 }
2005 .fg-paging-container.fg-light .fg-dot-item.fg-selected .fg-dot-link:before,
2006 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:hover:before,
2007 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:focus:before {
2008 background-color: #666;
2009 border-color: #888;
2010 }
2011 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link,
2012 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link:hover,
2013 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link:focus {
2014 background-color: #eee;
2015 border-color: #9d9d9d;
2016 opacity: 0.5;
2017 }
2018
2019 /* Dark - Dots */
2020 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link,
2021 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:before {
2022 transition-timing-function: ease-out;
2023 transition-duration: 0.3s;
2024 transition-property: color, border-color, background-color;
2025 }
2026 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link {
2027 background-color: #999;
2028 border-color: #666;
2029 outline-color: #666;
2030 }
2031 .fg-paging-container.fg-dark .fg-dot-item.fg-selected .fg-dot-link {
2032 border-color: #666;
2033 }
2034 .fg-paging-container.fg-dark .fg-dot-item.fg-selected .fg-dot-link:before,
2035 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:hover:before,
2036 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:focus:before {
2037 background-color: #fff;
2038 border-color: #666;
2039 }
2040 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link,
2041 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link:hover,
2042 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link:focus {
2043 background-color: #999;
2044 border-color: #666;
2045 opacity: 0.5;
2046 }
2047 .fg-paging-container, .fg-paging-container *, .fg-paging-container *:before, .fg-paging-container *:after {
2048 box-sizing: border-box;
2049 }
2050 .fg-paging-container {
2051 display: block;
2052 padding: 15px;
2053 margin-top: 0!important;
2054 margin-bottom: 0!important;
2055 margin-left: auto;
2056 margin-right: auto;
2057 text-align: center;
2058 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
2059 -webkit-user-select: none;
2060 -moz-user-select: none;
2061 -ms-user-select: none;
2062 user-select: none;
2063 }
2064 .fg-ph-dots:after {
2065 display: block;
2066 content: '';
2067 width: 0;
2068 height: 22px;
2069 }
2070
2071 .fg-paging-container .fg-dots,
2072 .fg-paging-container .fg-dot-item {
2073 display: inline-block;
2074 margin: 0;
2075 padding: 0;
2076 outline: none;
2077 list-style: none;
2078 }
2079 .fg-paging-container .fg-dot-item .fg-dot-link {
2080 display: inline-block;
2081 margin: 3px;
2082 font-weight: 400;
2083 line-height: 1.4;
2084 text-align: center;
2085 white-space: nowrap;
2086 vertical-align: middle;
2087 cursor: pointer;
2088 user-select: none;
2089 background-image: none;
2090 text-decoration: none;
2091 border: 1px solid transparent;
2092 position: relative;
2093 border-radius: 50%;
2094 padding: 0;
2095 font-size: 0;
2096 outline: none;
2097 color: transparent;
2098 box-shadow: none;
2099 }
2100 .fg-paging-container .fg-dot-item .fg-dot-link:before {
2101 content: "";
2102 background-color: transparent;
2103 border: 1px solid transparent;
2104 display: block;
2105 border-radius: 50%;
2106 width: 9px;
2107 height: 9px;
2108 padding: 0;
2109 margin: 2px;
2110 }
2111 .fg-paging-container .fg-dot-item .fg-dot-link:active,
2112 .fg-paging-container .fg-dot-item .fg-dot-link:hover,
2113 .fg-paging-container .fg-dot-item .fg-dot-link:focus {
2114 text-decoration: none;
2115 box-shadow: none;
2116 outline: none;
2117 }
2118 /*.fg-paging-container .fg-dot-item .fg-dot-link:focus:not(:hover) {*/
2119 /* outline-style: dashed;*/
2120 /* outline-width: 1px ;*/
2121 /* outline-offset: 1px;*/
2122 /*}*/
2123 .fg-paging-container .fg-dot-item.fg-disabled .fg-dot-link,
2124 .fg-paging-container .fg-dot-item.fg-selected .fg-dot-link {
2125 cursor: not-allowed;
2126 pointer-events: none;
2127 }
2128 .fg-paging-container .fg-dot-item.fg-disabled .fg-dot-link {
2129 cursor: not-allowed;
2130 pointer-events: none;
2131 outline: none;
2132 }
2133
2134 /* Light - Dots */
2135 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link,
2136 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:before {
2137 transition-timing-function: ease-out;
2138 transition-duration: 0.3s;
2139 transition-property: color, border-color, background-color;
2140 }
2141 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link {
2142 background-color: #eee;
2143 border-color: #9d9d9d;
2144 outline-color: #9d9d9d;
2145 }
2146 .fg-paging-container.fg-light .fg-dot-item.fg-selected .fg-dot-link {
2147 border-color: #888;
2148 }
2149 .fg-paging-container.fg-light .fg-dot-item.fg-selected .fg-dot-link:before,
2150 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:hover:before,
2151 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:focus:before {
2152 background-color: #666;
2153 border-color: #888;
2154 }
2155 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link,
2156 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link:hover,
2157 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link:focus {
2158 background-color: #eee;
2159 border-color: #9d9d9d;
2160 opacity: 0.5;
2161 }
2162
2163 /* Dark - Dots */
2164 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link,
2165 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:before {
2166 transition-timing-function: ease-out;
2167 transition-duration: 0.3s;
2168 transition-property: color, border-color, background-color;
2169 }
2170 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link {
2171 background-color: #999;
2172 border-color: #666;
2173 outline-color: #666;
2174 }
2175 .fg-paging-container.fg-dark .fg-dot-item.fg-selected .fg-dot-link {
2176 border-color: #666;
2177 }
2178 .fg-paging-container.fg-dark .fg-dot-item.fg-selected .fg-dot-link:before,
2179 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:hover:before,
2180 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:focus:before {
2181 background-color: #fff;
2182 border-color: #666;
2183 }
2184 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link,
2185 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link:hover,
2186 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link:focus {
2187 background-color: #999;
2188 border-color: #666;
2189 opacity: 0.5;
2190 }
2191 html.fg-panel-no-scroll {
2192 overflow-x: hidden !important;
2193 overflow-y: scroll !important;
2194 scrollbar-width: none;
2195 }
2196
2197 html.fg-panel-no-scroll::-webkit-scrollbar {
2198 width: 0;
2199 height: 0;
2200 }
2201
2202 [class^="fg-panel-"], [class*=" fg-panel-"] {
2203 box-sizing: border-box;
2204 }
2205
2206 .fg-panel {
2207 position: relative;
2208 width: 100%;
2209 height: 100%;
2210 max-width: 100%;
2211 max-height: 100%;
2212 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
2213 text-align: left;
2214 overflow: hidden;
2215 outline: none;
2216 box-sizing: content-box;
2217 }
2218 body.rtl .fg-panel {
2219 text-align: right;
2220 }
2221 .fg-panel-maximized {
2222 position: fixed;
2223 top: 0;
2224 left: 0;
2225 z-index: 999999;
2226 }
2227 .fg-no-transitions {
2228 transition: none!important;
2229 }
2230 .fg-panel-buttons {
2231 z-index: 1;
2232 }
2233
2234 /* Loader Styles */
2235 .fg-panel .fg-loader {
2236 position: absolute;
2237 top: 50%;
2238 left: 50%;
2239 transform: translateX(-50%) translateY(-50%);
2240 font-size: 5px;
2241 visibility: hidden;
2242 opacity: 0;
2243 pointer-events: none;
2244 }
2245
2246 .fg-panel .fg-loading .fg-loader {
2247 visibility: visible;
2248 opacity: 1;
2249 }
2250
2251 /* CSS Grid Layout */
2252 .fg-panel {
2253 display: grid;
2254 grid-template-columns: min-content min-content minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) min-content min-content;
2255 grid-template-rows: min-content min-content minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) min-content min-content;
2256 }
2257 .fg-panel.fg-portrait.fg-panel-buttons-top:not(.fg-medium, .fg-panel-no-mobile) {
2258 grid-template-rows: min-content min-content minmax(37px, max-content) minmax(0, 1fr) minmax(0, max-content) min-content min-content;
2259 }
2260 .fg-panel.fg-portrait.fg-panel-buttons-bottom:not(.fg-medium, .fg-panel-no-mobile) {
2261 grid-template-rows: min-content min-content minmax(0, max-content) minmax(0, 1fr) minmax(37px, max-content) min-content min-content;
2262 }
2263 .fg-panel.fg-landscape.fg-panel-buttons-left:not(.fg-medium, .fg-panel-no-mobile) {
2264 grid-template-columns: min-content min-content minmax(37px, max-content) minmax(0, 1fr) minmax(0, max-content) min-content min-content;
2265 }
2266 .fg-panel.fg-landscape.fg-panel-buttons-right:not(.fg-medium, .fg-panel-no-mobile) {
2267 grid-template-columns: min-content min-content minmax(0, max-content) minmax(0, 1fr) minmax(37px, max-content) min-content min-content;
2268 }
2269 /* Content Area */
2270 .fg-panel-content {
2271 grid-column: 3 / 6;
2272 grid-row: 3 / 6;
2273 }
2274
2275 /* Info Area */
2276 .fg-panel-info {
2277 grid-column: 3 / 6;
2278 grid-row: 3 / 6;
2279 display: none;
2280 }
2281 /* By default collapse and overlay the caption along the bottom on small screens */
2282 .fg-portrait.fg-panel-buttons-top:is(.fg-panel-info-top, .fg-panel-info-right, .fg-panel-info-bottom, .fg-panel-info-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2283 grid-row: 4 / 6;
2284 }
2285 .fg-portrait.fg-panel-buttons-bottom:is(.fg-panel-info-top, .fg-panel-info-right, .fg-panel-info-bottom, .fg-panel-info-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2286 grid-row: 3 / 5;
2287 }
2288 .fg-landscape.fg-panel-buttons-right:is(.fg-panel-info-top, .fg-panel-info-right, .fg-panel-info-bottom, .fg-panel-info-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2289 grid-column: 3 / 5;
2290 }
2291 .fg-landscape.fg-panel-buttons-left:is(.fg-panel-info-top, .fg-panel-info-right, .fg-panel-info-bottom, .fg-panel-info-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2292 grid-column: 4 / 6;
2293 }
2294 /* Only show the caption if a position is set */
2295 .fg-panel-info-visible:is(.fg-panel-info-top, .fg-panel-info-right, .fg-panel-info-bottom, .fg-panel-info-left) .fg-panel-info {
2296 display: block;
2297 }
2298 .fg-panel-info-visible:is(.fg-panel-info-top, .fg-panel-info-right, .fg-panel-info-bottom, .fg-panel-info-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2299 display: flex;
2300 flex-direction: column-reverse;
2301 }
2302 .fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2303 grid-row: 2 / 3;
2304 }
2305 .fg-panel-info-bottom:not(.fg-panel-info-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2306 grid-row: 6 / 7;
2307 }
2308 .fg-panel-info-left:not(.fg-panel-info-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2309 grid-column: 2 / 3;
2310 grid-row: 2 / 7;
2311 }
2312 .fg-panel-info-right:not(.fg-panel-info-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2313 grid-column: 6 / 7;
2314 grid-row: 2 / 7;
2315 }
2316 /* Caption Overlay */
2317 .fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2318 grid-column: 4 / 5;
2319 grid-row: 3 / 4;
2320 }
2321 .fg-panel-info-bottom.fg-panel-info-overlay:is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2322 grid-column: 4 / 5;
2323 grid-row: 5 / 6;
2324 }
2325 .fg-panel-info-right.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info {
2326 grid-column: 5 / 6;
2327 grid-row: 3 / 6;
2328 }
2329 .fg-panel-info-left.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info {
2330 grid-column: 3 / 4;
2331 grid-row: 3 / 6;
2332 }
2333
2334
2335 /* Cart Area */
2336 .fg-panel-cart {
2337 grid-column: 3 / 6;
2338 grid-row: 3 / 6;
2339 display: none;
2340 }
2341 /* By default collapse and overlay the cart along the bottom on small screens */
2342 .fg-portrait.fg-panel-buttons-top:is(.fg-panel-cart-top, .fg-panel-cart-right, .fg-panel-cart-bottom, .fg-panel-cart-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2343 grid-row: 4 / 6;
2344 }
2345 .fg-portrait.fg-panel-buttons-bottom:is(.fg-panel-cart-top, .fg-panel-cart-right, .fg-panel-cart-bottom, .fg-panel-cart-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2346 grid-row: 3 / 5;
2347 }
2348 .fg-landscape.fg-panel-buttons-right:is(.fg-panel-cart-top, .fg-panel-cart-right, .fg-panel-cart-bottom, .fg-panel-cart-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2349 grid-column: 3 / 5;
2350 }
2351 .fg-landscape.fg-panel-buttons-left:is(.fg-panel-cart-top, .fg-panel-cart-right, .fg-panel-cart-bottom, .fg-panel-cart-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2352 grid-column: 4 / 6;
2353 }
2354 /* Only show the cart if a position is set */
2355 .fg-panel-cart-visible:is(.fg-panel-cart-top, .fg-panel-cart-right, .fg-panel-cart-bottom, .fg-panel-cart-left) .fg-panel-cart {
2356 display: flex;
2357 }
2358 .fg-panel-cart-visible:is(.fg-panel-cart-top, .fg-panel-cart-right, .fg-panel-cart-bottom, .fg-panel-cart-left):not(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2359 flex-direction: column-reverse;
2360 }
2361 .fg-panel-cart-top:not(.fg-panel-cart-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2362 grid-row: 2 / 3;
2363 }
2364 .fg-panel-cart-bottom:not(.fg-panel-cart-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2365 grid-row: 6 / 7;
2366 }
2367 .fg-panel-cart-left:not(.fg-panel-cart-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2368 grid-column: 2 / 3;
2369 grid-row: 2 / 7;
2370 }
2371 .fg-panel-cart-right:not(.fg-panel-cart-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2372 grid-column: 6 / 7;
2373 grid-row: 2 / 7;
2374 }
2375 /* Cart Overlay */
2376 .fg-panel-cart-top.fg-panel-cart-overlay:is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2377 grid-column: 4 / 5;
2378 grid-row: 3 / 4;
2379 }
2380 .fg-panel-cart-bottom.fg-panel-cart-overlay:is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2381 grid-column: 4 / 5;
2382 grid-row: 5 / 6;
2383 }
2384 .fg-panel-cart-right.fg-panel-cart-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart {
2385 grid-column: 5 / 6;
2386 grid-row: 3 / 6;
2387 }
2388 .fg-panel-cart-left.fg-panel-cart-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart {
2389 grid-column: 3 / 4;
2390 grid-row: 3 / 6;
2391 }
2392
2393
2394
2395 /* Thumbs Area */
2396 .fg-panel-thumbs {
2397 grid-column: 1 / 8;
2398 grid-row: 1 / 8;
2399 display: none;
2400 }
2401 .fg-panel-thumbs-visible:is(.fg-panel-thumbs-top, .fg-panel-thumbs-right, .fg-panel-thumbs-bottom, .fg-panel-thumbs-left) .fg-panel-thumbs {
2402 display: block;
2403 }
2404 .fg-panel-thumbs-top .fg-panel-thumbs {
2405 grid-row: 1 / 2;
2406 }
2407 .fg-panel-thumbs-bottom .fg-panel-thumbs {
2408 grid-row: 7 / 8;
2409 }
2410 .fg-panel-thumbs-left .fg-panel-thumbs {
2411 grid-column: 1 / 2;
2412 }
2413 .fg-panel-thumbs-right .fg-panel-thumbs {
2414 grid-column: 7 / 8;
2415 }
2416
2417 .fg-panel-content,
2418 .fg-panel-info,
2419 .fg-panel-cart,
2420 .fg-panel-thumbs,
2421 .fg-panel-content-inner,
2422 .fg-panel-info-inner,
2423 .fg-panel-cart-inner,
2424 .fg-panel-thumbs-inner {
2425 position: relative;
2426 }
2427 .fg-panel-content,
2428 .fg-panel-info,
2429 .fg-panel-cart,
2430 .fg-panel-thumbs {
2431 pointer-events: none;
2432 }
2433 .fg-panel-content-inner,
2434 .fg-panel-info-inner,
2435 .fg-panel-cart-inner,
2436 .fg-panel-thumbs-inner {
2437 pointer-events: auto;
2438 }
2439 .fg-panel-info-inner,
2440 .fg-panel-cart-inner,
2441 .fg-panel-thumbs-inner {
2442 z-index: 2;
2443 }
2444
2445 .fg-panel-content {
2446 display: flex;
2447 flex-direction: column-reverse;
2448 }
2449 .fg-landscape .fg-panel-content {
2450 flex-direction: row;
2451 }
2452 .fg-portrait.fg-panel-buttons-top .fg-panel-content {
2453 flex-direction: column-reverse;
2454 }
2455 .fg-portrait.fg-panel-buttons-bottom .fg-panel-content {
2456 flex-direction: column;
2457 }
2458 .fg-landscape.fg-panel-buttons-right .fg-panel-content {
2459 flex-direction: row;
2460 }
2461 .fg-landscape.fg-panel-buttons-left .fg-panel-content {
2462 flex-direction: row-reverse;
2463 }
2464
2465 .fg-panel .fg-panel-content-buttons {
2466 position: relative;
2467 width: 100%;
2468 height: 100%;
2469 display: flex;
2470 flex-direction: column-reverse;
2471 justify-content: flex-end;
2472 align-items: stretch;
2473 pointer-events: none;
2474 z-index: 3;
2475 }
2476 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-content-buttons {
2477 position: absolute;
2478 top: 0;
2479 left: 0;
2480 }
2481 .fg-portrait:is(.fg-panel-buttons-top,.fg-panel-buttons-bottom):not(.fg-medium,.fg-panel-no-mobile) .fg-panel-content-buttons {
2482 height: 37px;
2483 }
2484 .fg-landscape:is(.fg-panel-buttons-right,.fg-panel-buttons-left):not(.fg-medium,.fg-panel-no-mobile) .fg-panel-content-buttons {
2485 width: 37px;
2486 }
2487 .fg-portrait.fg-panel-buttons-top:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2488 align-self: flex-start;
2489 }
2490 .fg-portrait.fg-panel-buttons-bottom:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2491 align-self: flex-end;
2492 }
2493 .fg-landscape.fg-panel-buttons-right:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2494 justify-self: flex-end;
2495 }
2496 .fg-landscape.fg-panel-buttons-left:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2497 justify-self: flex-start;
2498 }
2499
2500
2501 .fg-panel-content-inner,
2502 .fg-panel-thumbs-inner {
2503 display: flex;
2504 overflow: hidden;
2505 flex: 1;
2506 }
2507
2508 .fg-panel-info-inner,
2509 .fg-panel-cart-inner {
2510 z-index: 2;
2511 max-width: 100%;
2512 max-height: 100%;
2513 }
2514 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-info-inner,.fg-panel-cart-inner) {
2515 width: 100%;
2516 height: 100%;
2517 }
2518
2519 .fg-panel:is(.fg-medium,.fg-panel-no-mobile):is(.fg-panel-info-top,.fg-panel-info-bottom) .fg-panel-info-inner,
2520 .fg-panel:is(.fg-medium,.fg-panel-no-mobile):is(.fg-panel-cart-top,.fg-panel-cart-bottom) .fg-panel-cart-inner {
2521 height: fit-content;
2522 }
2523
2524 /* Sizing of the side content and thumbs */
2525 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumb,
2526 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumbs-inner {
2527 height: 70px;
2528 min-height: 70px;
2529 }
2530 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2531 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2532 width: 100px;
2533 min-width: 100px;
2534 }
2535 .fg-panel-thumbs-small:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2536 .fg-panel-thumbs-small:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2537 width: 70px;
2538 min-width: 70px;
2539 }
2540 .fg-medium:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumb,
2541 .fg-medium:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumbs-inner {
2542 height: 82px;
2543 min-height: 82px;
2544 }
2545 .fg-medium:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2546 .fg-medium:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2547 width: 118px;
2548 min-width: 118px;
2549 }
2550 .fg-x-large-width:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2551 .fg-x-large-width:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2552 width: 138px;
2553 min-width: 138px;
2554 }
2555 .fg-medium.fg-panel-thumbs-small:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2556 .fg-medium.fg-panel-thumbs-small:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner,
2557 .fg-x-large-width.fg-panel-thumbs-small:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2558 .fg-x-large-width.fg-panel-thumbs-small:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2559 width: 82px;
2560 min-width: 82px;
2561 }
2562 .fg-medium:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom):not(.fg-panel-thumbs-no-captions) .fg-panel-thumb,
2563 .fg-medium:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-inner {
2564 width: 240px;
2565 min-width: 240px;
2566 }
2567 .fg-medium.fg-large-width:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom):not(.fg-panel-thumbs-no-captions) .fg-panel-thumb,
2568 .fg-medium.fg-large-width:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-inner {
2569 width: 280px;
2570 min-width: 280px;
2571 }
2572 :is(.fg-medium,.fg-panel-no-mobile):is(.fg-panel-info-left,.fg-panel-info-right) .fg-panel-info-inner,
2573 :is(.fg-medium,.fg-panel-no-mobile):is(.fg-panel-cart-left,.fg-panel-cart-right) .fg-panel-cart-inner,
2574 .fg-medium.fg-x-large-width:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom):not(.fg-panel-thumbs-no-captions) .fg-panel-thumb,
2575 .fg-medium.fg-x-large-width:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-inner {
2576 width: 360px;
2577 min-width: 360px;
2578 }
2579 .fg-medium.fg-x-large-width:is(.fg-panel-info-left,.fg-panel-info-right) .fg-panel-info-inner,
2580 .fg-medium.fg-x-large-width:is(.fg-panel-cart-left,.fg-panel-cart-right) .fg-panel-cart-inner {
2581 width: 402px;
2582 min-width: 402px;
2583 }
2584 .fg-panel-buttons {
2585 grid-column: 3 / 6;
2586 grid-row: 3 / 6;
2587 position: relative;
2588 width: 100%;
2589 height: 100%;
2590 display: flex;
2591 flex-direction: column;
2592 justify-content: flex-end;
2593 align-items: stretch;
2594 pointer-events: none;
2595 z-index: 3;
2596 }
2597 .fg-portrait:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2598 flex-direction: row-reverse;
2599 height: 37px;
2600 }
2601 .fg-landscape:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2602 flex-direction: column;
2603 width: 37px;
2604 }
2605 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2606 grid-column: 2 / 7;
2607 grid-row: 2 / 7;
2608 flex-direction: column;
2609 align-items: flex-end;
2610 justify-content: flex-start;
2611 }
2612 body.rtl .fg-panel:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2613 align-items: flex-start;
2614 }
2615
2616 /* Mini reset to override certain WP themes */
2617 .fg-panel .fg-panel-button,
2618 .fg-panel .fg-panel-area-toggle,
2619 .fg-panel .fg-panel-thumbs-button {
2620 background: none;
2621 border-radius: 0;
2622 }
2623
2624 .fg-panel-button:is(button,a) {
2625 box-sizing: border-box;
2626 position: relative;
2627 width: 100%;
2628 height: 100%;
2629 cursor: pointer;
2630 overflow: hidden;
2631 pointer-events: auto;
2632 user-select: none;
2633 -webkit-tap-highlight-color: unset;
2634 border-style: solid;
2635 border-width: 0;
2636 box-shadow: none;
2637 outline: none;
2638 padding: 1px 6px;
2639 letter-spacing: normal;
2640 word-spacing: normal;
2641 text-transform: none;
2642 text-indent: 0;
2643 text-shadow: none;
2644 display: inline-block;
2645 text-align: center;
2646 align-items: flex-start;
2647 text-decoration: none;
2648 min-width: unset;
2649 transition: none;
2650 }
2651 .fg-panel-button.fg-disabled {
2652 pointer-events: none;
2653 opacity: 0.7;
2654 }
2655 .fg-panel-button.fg-hidden {
2656 display: none!important;
2657 }
2658 .fg-panel-button.fg-loading {
2659 color: transparent!important;
2660 }
2661 .fg-panel-button.fg-loading:after {
2662 content: '';
2663 display: block;
2664 position: absolute;
2665 top: 50%;
2666 left: 50%;
2667 margin-top: -.5em;
2668 margin-left: -.5em;
2669 width: 1em;
2670 height: 1em;
2671 font-size: 0.3em;
2672 pointer-events: none;
2673 border-radius: 50%;
2674 text-indent: -9999em;
2675 box-shadow: 0 -2.6em 0 0 rgba(130, 130, 130, 1),
2676 1.8em -1.8em 0 0 rgba(130, 130, 130, 0.2),
2677 2.5em 0 0 0 rgba(130, 130, 130, 0.2),
2678 1.75em 1.75em 0 0 rgba(130, 130, 130, 0.2),
2679 0 2.5em 0 0 rgba(130, 130, 130, 0.2),
2680 -1.8em 1.8em 0 0 rgba(130, 130, 130, 0.2),
2681 -2.6em 0 0 0 rgba(130, 130, 130, 0.5),
2682 -1.8em -1.8em 0 0 rgba(130, 130, 130, 0.7);
2683 -webkit-animation: button-loading 1.1s infinite steps(8, start);
2684 animation: button-loading 1.1s infinite steps(8, start);
2685 }
2686 .fg-panel.fg-button-blue .fg-panel-button.fg-loading:after,
2687 .fg-panel.fg-button-dark .fg-panel-button.fg-loading:after,
2688 .fg-panel.fg-button-green .fg-panel-button.fg-loading:after,
2689 .fg-panel.fg-button-purple .fg-panel-button.fg-loading:after,
2690 .fg-panel.fg-button-orange .fg-panel-button.fg-loading:after,
2691 .fg-panel.fg-button-red .fg-panel-button.fg-loading:after {
2692 box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 1),
2693 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2694 2.5em 0 0 0 rgba(255, 255, 255, 0.2),
2695 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
2696 0 2.5em 0 0 rgba(255, 255, 255, 0.2),
2697 -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
2698 -2.6em 0 0 0 rgba(255, 255, 255, 0.5),
2699 -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
2700 }
2701
2702 @-webkit-keyframes button-loading {
2703 0% {
2704 transform: rotate(0deg);
2705 }
2706 100% {
2707 transform: rotate(360deg);
2708 }
2709 }
2710
2711 @keyframes button-loading {
2712 0% {
2713 transform: rotate(0deg);
2714 }
2715 100% {
2716 transform: rotate(360deg);
2717 }
2718 }
2719
2720 .fg-panel.fg-portrait.fg-panel-buttons-top .fg-panel-buttons .fg-panel-button {
2721 border-bottom-width: 1px;
2722 }
2723 .fg-panel.fg-portrait.fg-panel-buttons-bottom .fg-panel-buttons .fg-panel-button {
2724 border-top-width: 1px;
2725 }
2726 .fg-panel.fg-portrait:is(.fg-panel-buttons-top,.fg-panel-buttons-bottom) .fg-panel-buttons .fg-panel-button {
2727 border-left-width: 1px;
2728 }
2729 .fg-panel.fg-portrait:is(.fg-panel-buttons-top,.fg-panel-buttons-bottom) .fg-panel-buttons .fg-panel-button:last-child {
2730 border-left-width: 0;
2731 }
2732
2733 .fg-panel.fg-landscape.fg-panel-buttons-right .fg-panel-buttons .fg-panel-button {
2734 border-left-width: 1px;
2735 }
2736 .fg-panel.fg-landscape.fg-panel-buttons-left .fg-panel-buttons .fg-panel-button {
2737 border-right-width: 1px;
2738 }
2739 .fg-panel.fg-landscape:is(.fg-panel-buttons-left,.fg-panel-buttons-right) .fg-panel-buttons .fg-panel-button {
2740 border-bottom-width: 1px;
2741 }
2742 .fg-panel.fg-landscape:is(.fg-panel-buttons-left,.fg-panel-buttons-right) .fg-panel-buttons .fg-panel-button:last-child {
2743 border-bottom-width: 0;
2744 }
2745
2746 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button {
2747 border-radius: 3px;
2748 border-width: 1px;
2749 width: 32px;
2750 height: 32px;
2751 margin: 5px 5px 0 0;
2752 }
2753 body.rtl .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button {
2754 margin: 5px 0 0 5px;
2755 }
2756
2757 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) :is(.fg-panel-button-prev,.fg-panel-button-next) {
2758 position: absolute;
2759 top: 50%;
2760 transform: translateY(-50%);
2761 width: 32px;
2762 height: 82px;
2763 margin: unset !important;
2764 }
2765 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button-prev {
2766 left: 5px;
2767 }
2768 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button-next {
2769 right: 5px;
2770 }
2771 body.rtl .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button-prev {
2772 right: 5px;
2773 left: auto;
2774 }
2775 body.rtl .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button-next {
2776 left: 5px;
2777 right: auto;
2778 }
2779
2780 /* Hover buttons */
2781 @media (hover: hover) {
2782 :is(.fg-medium,.fg-panel-no-mobile).fg-panel-hover-buttons .fg-panel-button {
2783 visibility: hidden;
2784 opacity: 0;
2785 }
2786 :is(.fg-medium,.fg-panel-no-mobile).fg-panel-hover-buttons:hover .fg-panel-button:not(.fg-disabled) {
2787 visibility: visible;
2788 opacity: 0.5;
2789 }
2790 :is(.fg-medium,.fg-panel-no-mobile).fg-panel-hover-buttons .fg-panel-button:not(.fg-disabled):hover {
2791 opacity: 1;
2792 }
2793 }
2794
2795 .fg-panel-area .fg-panel-area-toggle {
2796 position: absolute;
2797 top: 5px;
2798 right: 5px;
2799 z-index: 1;
2800 width: 32px;
2801 height: 32px;
2802 cursor: pointer;
2803 overflow: hidden;
2804 pointer-events: auto;
2805 user-select: none;
2806 -webkit-tap-highlight-color: unset;
2807 background-color: transparent;
2808 box-shadow: none;
2809 outline: none;
2810 border: none;
2811 }
2812 .fg-panel-area-toggle+.fg-panel-caption .fg-panel-caption-title {
2813 margin-right: 32px;
2814 line-height: 27px;
2815 margin-bottom: 5px;
2816 }
2817 .fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info .fg-panel-area-toggle {
2818 right: 42px;
2819 }
2820 body.rtl .fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info .fg-panel-area-toggle {
2821 left: 42px;
2822 right: auto;
2823 }
2824
2825
2826 /* icons */
2827 .fg-panel-button .fg-icon,
2828 .fg-panel-area-toggle .fg-icon {
2829 display: block;
2830 margin: 0;
2831 padding: 0;
2832 position: absolute;
2833 top: 50%;
2834 left: 50%;
2835 transform: translateX(-50%) translateY(-50%);
2836 }
2837 .fg-panel-button.fg-disabled .fg-icon,
2838 .fg-panel-area-toggle.fg-disabled .fg-icon {
2839 opacity: 0.3;
2840 }
2841 .fg-panel-fullscreen .fg-panel-button-fullscreen .fg-icon-expand,
2842 .fg-panel-button-fullscreen .fg-icon-shrink {
2843 display: none;
2844 }
2845 .fg-panel-fullscreen .fg-panel-button-fullscreen .fg-icon-shrink {
2846 display: block;
2847 }
2848
2849 .fg-panel-thumbs-top .fg-panel-button-thumbs .fg-icon {
2850 transform: translateX(-50%) translateY(-50%) rotate(90deg);
2851 }
2852 .fg-panel-thumbs-right .fg-panel-button-thumbs .fg-icon {
2853 transform: translateX(-50%) translateY(-50%) rotate(180deg);
2854 }
2855 .fg-panel-thumbs-bottom .fg-panel-button-thumbs .fg-icon {
2856 transform: translateX(-50%) translateY(-50%) rotate(-90deg);
2857 }
2858 body.rtl .fg-panel-button-prev .fg-icon,
2859 body.rtl .fg-panel-button-next .fg-icon {
2860 transform: translateX(-50%) translateY(-50%) rotate(180deg);
2861 }
2862 .fg-panel:not(.fg-panel-maximized):not(.fg-panel-fullscreen) {
2863 border-style: solid;
2864 border-width: 1px;
2865 }
2866 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-info-inner,.fg-panel-cart-inner) {
2867 border-width: 0;
2868 border-style: solid;
2869 }
2870 .fg-panel.fg-panel-info-top:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2871 border-bottom-width: 1px;
2872 }
2873 .fg-panel.fg-panel-info-bottom:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2874 border-top-width: 1px;
2875 }
2876
2877 /* Normal layout, buttons top right */
2878 body:not(.rtl) .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):not(
2879 .fg-panel-comments-right.fg-panel-comments-visible:not(.fg-panel-comments-overlay),
2880 .fg-panel-cart-right.fg-panel-cart-visible:not(.fg-panel-cart-overlay)
2881 ) .fg-panel-info-inner,
2882 body:not(.rtl) .fg-panel.fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile):not(
2883 .fg-panel-comments-right.fg-panel-comments-visible,
2884 .fg-panel-cart-right.fg-panel-cart-visible
2885 ) .fg-panel-info-inner {
2886 border-right-width: 42px;
2887 }
2888 body:not(.rtl) .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):not(
2889 .fg-panel-comments-right.fg-panel-comments-visible:not(.fg-panel-comments-overlay),
2890 .fg-panel-cart-right.fg-panel-cart-visible:not(.fg-panel-cart-overlay)
2891 ) .fg-media-caption,
2892 body:not(.rtl) .fg-panel.fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile):not(
2893 .fg-panel-comments-right.fg-panel-comments-visible,
2894 .fg-panel-cart-right.fg-panel-cart-visible
2895 ) .fg-media-caption {
2896 padding-right: 0;
2897 }
2898 body:not(.rtl) .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):is(
2899 .fg-panel-comments-left.fg-panel-comments-overlay.fg-panel-comments-visible,
2900 .fg-panel-cart-left.fg-panel-cart-overlay.fg-panel-cart-visible
2901 ) .fg-panel-info-inner {
2902 border-left-width: 42px;
2903 }
2904 body:not(.rtl) .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):is(
2905 .fg-panel-comments-left.fg-panel-comments-overlay.fg-panel-comments-visible,
2906 .fg-panel-cart-left.fg-panel-cart-overlay.fg-panel-cart-visible
2907 ) .fg-media-caption {
2908 padding-left: 0;
2909 }
2910
2911 /* RTL layout, buttons top left */
2912 body.rtl .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):not(
2913 .fg-panel-comments-left.fg-panel-comments-visible:not(.fg-panel-comments-overlay),
2914 .fg-panel-cart-left.fg-panel-cart-visible:not(.fg-panel-cart-overlay)
2915 ) .fg-panel-info-inner,
2916 body.rtl .fg-panel.fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile):not(
2917 .fg-panel-comments-left.fg-panel-comments-visible,
2918 .fg-panel-cart-left.fg-panel-cart-visible
2919 ) .fg-panel-info-inner {
2920 border-left-width: 42px;
2921 }
2922 body.rtl .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):not(
2923 .fg-panel-comments-left.fg-panel-comments-visible:not(.fg-panel-comments-overlay),
2924 .fg-panel-cart-left.fg-panel-cart-visible:not(.fg-panel-cart-overlay)
2925 ) .fg-media-caption,
2926 body.rtl .fg-panel.fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile):not(
2927 .fg-panel-comments-left.fg-panel-comments-visible,
2928 .fg-panel-cart-left.fg-panel-cart-visible
2929 ) .fg-media-caption {
2930 padding-left: 0;
2931 }
2932 body.rtl .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):is(
2933 .fg-panel-comments-right.fg-panel-comments-overlay.fg-panel-comments-visible,
2934 .fg-panel-cart-right.fg-panel-cart-overlay.fg-panel-cart-visible
2935 ) .fg-panel-info-inner {
2936 border-right-width: 42px;
2937 }
2938 body.rtl .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):is(
2939 .fg-panel-comments-right.fg-panel-comments-overlay.fg-panel-comments-visible,
2940 .fg-panel-cart-right.fg-panel-cart-overlay.fg-panel-cart-visible
2941 ) .fg-media-caption {
2942 padding-left: 0;
2943 }
2944
2945 .fg-panel.fg-panel-info-right:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2946 border-left-width: 1px;
2947 }
2948 .fg-panel.fg-panel-info-left:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2949 border-right-width: 1px;
2950 }
2951 body:not(.rtl) .fg-panel.fg-panel-info-right:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner,
2952 .fg-panel.fg-panel-info-right.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2953 border-right-width: 42px;
2954 }
2955 body.rtl .fg-panel.fg-panel-info-left:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner,
2956 .fg-panel.fg-panel-info-left.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2957 border-left-width: 42px;
2958 }
2959
2960 .fg-panel.fg-panel-cart-top:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2961 border-bottom-width: 1px;
2962 }
2963 .fg-panel.fg-panel-cart-bottom:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2964 border-top-width: 1px;
2965 }
2966 .fg-panel.fg-panel-cart-right:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2967 border-left-width: 1px;
2968 }
2969 .fg-panel.fg-panel-cart-left:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2970 border-right-width: 1px;
2971 }
2972 body:not(.rtl) .fg-panel.fg-panel-cart-right:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner,
2973 .fg-panel.fg-panel-cart-right.fg-panel-cart-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2974 border-right-width: 42px;
2975 }
2976 body.rtl .fg-panel.fg-panel-cart-left:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner,
2977 .fg-panel.fg-panel-cart-left.fg-panel-cart-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2978 border-left-width: 42px;
2979 }
2980
2981 .fg-panel-thumb,
2982 .fg-panel-thumb-spacer,
2983 .fg-panel-thumbs-inner,
2984 .fg-panel-thumbs-button {
2985 border-width: 0;
2986 border-style: solid;
2987 }
2988 .fg-panel-thumbs-right :is(.fg-panel-thumb,.fg-panel-thumb-spacer,.fg-panel-thumbs-button),
2989 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2990 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumbs-next {
2991 border-left-width: 1px;
2992 }
2993 .fg-panel-thumbs-bottom :is(.fg-panel-thumb,.fg-panel-thumb-spacer,.fg-panel-thumbs-button),
2994 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumb,
2995 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-next,
2996
2997 .fg-medium.fg-panel-area-stack.fg-panel-info-visible.fg-panel-hover-buttons.fg-panel-thumbs-left.fg-panel-info-left:not(.fg-panel-info-overlay):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-inner,
2998 .fg-medium.fg-panel-area-stack.fg-panel-info-visible.fg-panel-hover-buttons.fg-panel-thumbs-right.fg-panel-info-right:not(.fg-panel-info-overlay):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-inner,
2999 .fg-medium.fg-panel-area-stack.fg-panel-info-visible.fg-panel-thumbs-left.fg-panel-info-left:not(.fg-panel-info-overlay):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-prev,
3000 .fg-medium.fg-panel-area-stack.fg-panel-info-visible.fg-panel-thumbs-right.fg-panel-info-right:not(.fg-panel-info-overlay):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-prev,
3001
3002 .fg-panel-no-mobile.fg-panel-area-stack.fg-panel-info-visible.fg-panel-hover-buttons.fg-panel-thumbs-left.fg-panel-info-left:not(.fg-panel-info-overlay):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-inner,
3003 .fg-panel-no-mobile.fg-panel-area-stack.fg-panel-info-visible.fg-panel-hover-buttons.fg-panel-thumbs-right.fg-panel-info-right:not(.fg-panel-info-overlay):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-inner,
3004 .fg-panel-no-mobile.fg-panel-area-stack.fg-panel-info-visible.fg-panel-thumbs-left.fg-panel-info-left:not(.fg-panel-info-overlay):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-prev,
3005 .fg-panel-no-mobile.fg-panel-area-stack.fg-panel-info-visible.fg-panel-thumbs-right.fg-panel-info-right:not(.fg-panel-info-overlay):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-prev {
3006 border-top-width: 1px;
3007 }
3008 .fg-panel-thumbs-left :is(.fg-panel-thumb,.fg-panel-thumb-spacer,.fg-panel-thumbs-button),
3009 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumbs-prev {
3010 border-right-width: 1px;
3011 }
3012 .fg-panel-thumbs-top :is(.fg-panel-thumb,.fg-panel-thumb-spacer,.fg-panel-thumbs-button),
3013 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-prev {
3014 border-bottom-width: 1px;
3015 }
3016
3017 /* Icon & Overlay */
3018 .fg-panel .fg-panel-thumb-overlay {
3019 display: block;
3020 position: absolute;
3021 visibility: hidden;
3022 opacity: 0;
3023 top: 0;
3024 bottom: 0;
3025 left: 0;
3026 right: 0;
3027 z-index: 8;
3028 background: rgba(0,0,0,0.5) no-repeat center center;
3029 transition-duration: .1s;
3030 transition-timing-function: ease-in-out;
3031 transition-property: opacity, visibility;
3032 }
3033
3034 .fg-panel .fg-panel-thumb-overlay:before {
3035 content: "";
3036 display: block;
3037 position: absolute;
3038 top: 50%;
3039 left: 50%;
3040 transform: translateX(-50%) translateY(-50%);
3041 width: 32px;
3042 height: 32px;
3043 background-position: center center;
3044 background-repeat: no-repeat;
3045 }
3046
3047 .fg-panel:is(.fg-hover-zoom,.fg-hover-zoom2,.fg-hover-zoom3,.fg-hover-zoom4,.fg-hover-zoom5,.fg-hover-plus,.fg-hover-plus2,.fg-hover-plus3,.fg-hover-circle-plus,.fg-hover-circle-plus2,.fg-hover-square-plus,.fg-hover-eye,.fg-hover-external,.fg-hover-tint) .fg-panel-thumb:hover .fg-panel-thumb-overlay,
3048 .fg-panel:is(.fg-video-default,.fg-video-1,.fg-video-2,.fg-video-3,.fg-video-4) .fg-panel-thumb.fg-type-video:hover .fg-panel-thumb-overlay {
3049 visibility: visible;
3050 opacity: 1;
3051 }
3052 .fg-panel.fg-video-sticky .fg-panel-thumb.fg-type-video.fg-loaded .fg-panel-thumb-overlay {
3053 background-color: transparent;
3054 visibility: visible;
3055 opacity: 1;
3056 }
3057
3058 .fg-panel.fg-hover-zoom .fg-panel-thumb-overlay:before {
3059 background-image: url('../img/icons.svg#zoom-light');
3060 }
3061
3062 .fg-panel.fg-hover-zoom2 .fg-panel-thumb-overlay:before {
3063 background-image: url('../img/icons.svg#zoom2-light');
3064 }
3065
3066 .fg-panel.fg-hover-zoom3 .fg-panel-thumb-overlay:before {
3067 background-image: url('../img/icons.svg#zoom3-light');
3068 }
3069
3070 .fg-panel.fg-hover-zoom4 .fg-panel-thumb-overlay:before {
3071 background-image: url('../img/icons.svg#zoom4-light');
3072 }
3073
3074 .fg-panel.fg-hover-zoom5 .fg-panel-thumb-overlay:before {
3075 background-image: url('../img/icons.svg#zoom5-light');
3076 }
3077
3078 .fg-panel.fg-hover-plus .fg-panel-thumb-overlay:before {
3079 background-image: url('../img/icons.svg#plus-light');
3080 }
3081
3082 .fg-panel.fg-hover-plus2 .fg-panel-thumb-overlay:before {
3083 background-image: url('../img/icons.svg#plus2-light');
3084 }
3085
3086 .fg-panel.fg-hover-plus3 .fg-panel-thumb-overlay:before {
3087 background-image: url('../img/icons.svg#plus3-light');
3088 }
3089
3090 .fg-panel.fg-hover-circle-plus .fg-panel-thumb-overlay:before {
3091 background-image: url('../img/icons.svg#circle-plus-light');
3092 }
3093
3094 .fg-panel.fg-hover-circle-plus2 .fg-panel-thumb-overlay:before {
3095 background-image: url('../img/icons.svg#circle-plus2-light');
3096 }
3097
3098 .fg-panel.fg-hover-square-plus .fg-panel-thumb-overlay:before {
3099 background-image: url('../img/icons.svg#square-plus-light');
3100 }
3101
3102 .fg-panel.fg-hover-eye .fg-panel-thumb-overlay:before {
3103 background-image: url('../img/icons.svg#eye-light');
3104 }
3105
3106 .fg-panel.fg-hover-external .fg-panel-thumb-overlay:before {
3107 background-image: url('../img/icons.svg#external-light');
3108 }
3109
3110 .fg-panel.fg-video-default .fg-type-video .fg-panel-thumb-overlay:before {
3111 background-image: url('../img/icons.svg#video-default-light');
3112 }
3113
3114 .fg-panel.fg-video-1 .fg-type-video .fg-panel-thumb-overlay:before {
3115 background-image: url('../img/icons.svg#video-1-light');
3116 }
3117
3118 .fg-panel.fg-video-2 .fg-type-video .fg-panel-thumb-overlay:before {
3119 background-image: url('../img/icons.svg#video-2-light');
3120 }
3121
3122 .fg-panel.fg-video-3 .fg-type-video .fg-panel-thumb-overlay:before {
3123 background-image: url('../img/icons.svg#video-3-light');
3124 }
3125
3126 .fg-panel.fg-video-4 .fg-type-video .fg-panel-thumb-overlay:before {
3127 background-image: url('../img/icons.svg#video-4-light');
3128 }
3129
3130 /* Media CSS */
3131 .fg-media {
3132 display: block;
3133 position: absolute;
3134 top: 0;
3135 left: 0;
3136 width: 100%;
3137 height: 100%;
3138 pointer-events: auto;
3139 overflow: hidden;
3140 }
3141 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) .fg-media {
3142 top: 0;
3143 left: 0;
3144 width: 100%;
3145 height: 100%;
3146 }
3147 .fg-panel.fg-panel-preserve-button-space:is(.fg-medium,.fg-panel-no-mobile) .fg-media {
3148 top: 5px;
3149 left: 42px;
3150 width: calc(100% - 84px);
3151 height: calc(100% - 10px);
3152 }
3153 .fg-media .fg-loader {
3154 font-size: 10px;
3155 }
3156 .fg-media.fg-loading .fg-loader {
3157 transition-delay: 100ms;
3158 }
3159 .fg-media:not(.fg-media-html) {
3160 /*-webkit-touch-callout: none; !* iOS Safari - Disables Save Image As *!*/
3161 -webkit-user-select: none; /* Safari */
3162 -moz-user-select: none; /* Old versions of Firefox */
3163 -ms-user-select: none; /* Internet Explorer/Edge */
3164 user-select: none;
3165 }
3166
3167 .fg-media-content {
3168 display: inline-block;
3169 position: absolute;
3170 top: 50%;
3171 left: 50%;
3172 transform: translateX(-50%) translateY(-50%);
3173 max-width: 100%;
3174 max-height: 100%;
3175 visibility: hidden;
3176 opacity: 0;
3177 }
3178 .fg-media.fg-loaded .fg-media-content {
3179 visibility: visible;
3180 opacity: 1;
3181 }
3182 .fg-media-image .fg-media-content {
3183 height: auto;
3184 }
3185 .fg-panel-fit-media .fg-media-image .fg-media-full-width {
3186 width: 100%;
3187 max-height: unset;
3188 }
3189 .fg-panel-fit-media .fg-media-image .fg-media-full-height {
3190 height: 100%;
3191 max-width: unset;
3192 }
3193 :is(.fg-media-iframe,.fg-media-video) .fg-media-content {
3194 width: 100%;
3195 height: 100%;
3196 }
3197 .fg-panel-fit-media :is(.fg-media-iframe,.fg-media-video) .fg-media-content {
3198 width: 100% !important;
3199 height: 100% !important;
3200 }
3201 .fg-panel.fg-panel-preserve-button-space .fg-media-iframe .fg-media-content {
3202 border-width: 1px;
3203 border-style: solid;
3204 }
3205 .fg-panel-fit-media .fg-media-video.fg-loaded {
3206 background-color: #000;
3207 }
3208 .fg-media-video .fg-media-content {
3209 background-repeat: no-repeat;
3210 background-position: center center;
3211 background-size: cover;
3212 }
3213 .fg-media-html .fg-media-content {
3214
3215 }
3216 .fg-media-embed .fg-media-content .fb-video > span,
3217 .fg-media-embed .fg-media-content > iframe,
3218 .fg-media-embed .fg-media-content > video,
3219 .fg-media-embed .fg-media-content > object {
3220 margin: 0;
3221 border: 0;
3222 width: 100%;
3223 height: 100%;
3224 max-width: 100%;
3225 max-height: 100%;
3226 }
3227 .fg-panel-info-toggle {
3228 display: inline-block;
3229 }
3230 :is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-info-overlay) .fg-panel-info-toggle {
3231 display: none;
3232 }
3233 .fg-media-caption {
3234 position: relative;
3235 box-sizing: border-box;
3236 width: 100%;
3237 height: auto;
3238 max-width: 100%;
3239 max-height: 100%;
3240 padding: 10px;
3241 gap: 10px;
3242 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
3243 font-size: 14px;
3244 font-weight: 400;
3245 line-height: 1.4;
3246 pointer-events: auto;
3247 display: flex;
3248 flex-direction: column;
3249 }
3250 :is(.fg-panel-info-top,.fg-panel-info-bottom) .fg-media-caption {
3251 text-align: center;
3252 }
3253 :is(.fg-panel-info-top,.fg-panel-info-bottom):is(.fg-medium,.fg-panel-no-mobile) .fg-media-caption {
3254 padding: 10px 42px;
3255 }
3256 .fg-panel-media-caption-left .fg-media-caption {
3257 text-align: left;
3258 }
3259 .fg-panel-media-caption-right .fg-media-caption {
3260 text-align: right;
3261 }
3262 .fg-panel-media-caption-center .fg-media-caption {
3263 text-align: center;
3264 }
3265 .fg-panel-media-caption-justify .fg-media-caption {
3266 text-align: justify;
3267 }
3268
3269 .fg-media-caption-title {
3270 font-weight: 600;
3271 border: none;
3272 }
3273 :is(.fg-panel-info-left,.fg-panel-info-right):is(.fg-medium,.fg-panel-no-mobile) .fg-media-caption-title {
3274 padding-bottom: 10px;
3275 border-bottom-style: solid;
3276 border-bottom-width: 1px;
3277 }
3278
3279 .fg-media-caption-description {
3280 font-size: smaller;
3281 max-height: 100%;
3282 height: auto;
3283 overflow-x: hidden;
3284 overflow-y: auto;
3285 border: none;
3286 }
3287
3288
3289 .fg-media-caption-exif {
3290 display: none;
3291 flex-direction: row;
3292 flex-wrap: wrap;
3293 justify-content: center;
3294 width: 100%;
3295 border: none;
3296 text-align: left;
3297 padding: 10px 0 0 0;
3298 gap: 10px;
3299 }
3300 body.rtl .fg-media-caption-exif {
3301 text-align: right;
3302 }
3303 .fg-media-caption-exif:is(.fg-media-caption-exif-auto,.fg-media-caption-exif-full,.fg-media-caption-exif-partial,.fg-media-caption-exif-minimal) {
3304 display: flex;
3305 }
3306 .fg-media-caption-description + .fg-media-caption-exif {
3307 border-top-style: solid;
3308 border-top-width: 1px;
3309 }
3310 .fg-medium:is(.fg-panel-info-left,.fg-panel-info-right) .fg-media-caption-exif:is(.fg-media-caption-exif-auto,.fg-media-caption-exif-full,.fg-media-caption-exif-partial) {
3311 flex-direction: column;
3312 flex-wrap: nowrap;
3313 justify-content: left;
3314 }
3315 .fg-media-caption-exif-prop {
3316 position: relative;
3317 display: flex;
3318 height: 24px;
3319 padding: 0;
3320 gap: 10px;
3321 }
3322 body.rtl .fg-media-caption-exif-prop {
3323 flex-direction: row-reverse;
3324 }
3325
3326 .fg-media-caption-exif-full .fg-media-caption-exif-prop,
3327 .fg-panel.fg-large .fg-media-caption-exif-auto .fg-media-caption-exif-prop {
3328 height: 30px;
3329 }
3330 .fg-media-caption-exif-icon {
3331 display: flex;
3332 align-items: center;
3333 justify-content: center;
3334 position: relative;
3335 min-width: 16px;
3336 min-height: 16px;
3337 width: 16px;
3338 height: 100%;
3339 }
3340
3341 .fg-media-caption-exif-content {
3342 display: none;
3343 flex-direction: column;
3344 align-items: center;
3345 justify-content: center;
3346 width: 100%;
3347 height: 100%;
3348 }
3349 .fg-media-caption-exif-full .fg-media-caption-exif-content,
3350 .fg-media-caption-exif-partial .fg-media-caption-exif-content,
3351 .fg-panel.fg-medium .fg-media-caption-exif-auto .fg-media-caption-exif-content {
3352 display: flex;
3353 }
3354
3355 .fg-media-caption-exif-label {
3356 display: none;
3357 width: 100%;
3358 font-size: 11px;
3359 font-style: italic;
3360 line-height: 11px;
3361 white-space: nowrap;
3362 }
3363 .fg-media-caption-exif-full .fg-media-caption-exif-label,
3364 .fg-panel.fg-large .fg-media-caption-exif-auto .fg-media-caption-exif-label {
3365 display: block;
3366 }
3367 .fg-media-caption-exif-value {
3368 display: none;
3369 width: 100%;
3370 font-size: 12px;
3371 line-height: 14px;
3372 white-space: nowrap;
3373 }
3374 .fg-media-caption-exif-full .fg-media-caption-exif-value,
3375 .fg-media-caption-exif-partial .fg-media-caption-exif-value,
3376 .fg-panel.fg-medium .fg-media-caption-exif-auto .fg-media-caption-exif-value {
3377 display: block;
3378 }
3379
3380 .fg-media-caption-exif-tooltip {
3381 display: none;
3382 position: absolute;
3383 top: -8px;
3384 left: 50%;
3385 transform: translateX(-50%) translateY(-100%);
3386 color: #FFF;
3387 white-space: nowrap;
3388 background-color: #333;
3389 font-size: 12px;
3390 padding: 4px 8px;
3391 border-radius: 3px;
3392 box-shadow: 0 0 10px 0 #000;
3393 z-index: 1;
3394 }
3395 .fg-panel-info-top .fg-media-caption-exif-tooltip {
3396 top: unset;
3397 bottom: -8px;
3398 transform: translateX(-50%) translateY(100%);
3399 }
3400 :is(.fg-media-caption-exif-partial,.fg-media-caption-exif-full,.fg-panel.fg-medium .fg-media-caption-exif-auto) .fg-media-caption-exif-tooltip {
3401 left: 0;
3402 transform: translateY(-100%);
3403 }
3404 :is(.fg-panel-info-top .fg-media-caption-exif-partial,.fg-panel-info-top .fg-media-caption-exif-full,.fg-panel.fg-medium.fg-panel-info-top .fg-media-caption-exif-auto) .fg-media-caption-exif-tooltip {
3405 transform: translateY(100%);
3406 }
3407 body.rtl :is(.fg-media-caption-exif-partial,.fg-media-caption-exif-full,.fg-panel.fg-medium .fg-media-caption-exif-auto) .fg-media-caption-exif-tooltip {
3408 left: unset;
3409 right: 0;
3410 transform: translateY(-100%);
3411 }
3412 body.rtl :is(.fg-panel-info-top .fg-media-caption-exif-partial,.fg-panel-info-top .fg-media-caption-exif-full,.fg-panel.fg-medium.fg-panel-info-top .fg-media-caption-exif-auto) .fg-media-caption-exif-tooltip {
3413 transform: translateY(100%);
3414 }
3415
3416 .fg-media-caption-exif-tooltip-pointer {
3417 display: block;
3418 content: '';
3419 border-top: 8px solid #333;
3420 border-bottom: 8px solid transparent;
3421 border-left: 8px solid transparent;
3422 border-right: 8px solid transparent;
3423 height: 0;
3424 width: 0;
3425 position: absolute;
3426 bottom: -16px;
3427 left: 50%;
3428 margin-left: -8px;
3429 }
3430 .fg-panel-info-top .fg-media-caption-exif-tooltip-pointer {
3431 border-top: 8px solid transparent;
3432 border-bottom: 8px solid #333;
3433 bottom: unset;
3434 top: -16px;
3435 }
3436 :is(.fg-media-caption-exif-partial,.fg-media-caption-exif-full,.fg-panel.fg-medium .fg-media-caption-exif-auto) .fg-media-caption-exif-tooltip-pointer {
3437 left: 21px;
3438 }
3439 body.rtl :is(.fg-media-caption-exif-partial,.fg-media-caption-exif-full,.fg-panel.fg-medium .fg-media-caption-exif-auto) .fg-media-caption-exif-tooltip-pointer {
3440 left: unset;
3441 margin-left: unset;
3442 right: 21px;
3443 margin-right: -8px;
3444 }
3445
3446 .fg-media-caption-exif-prop.fg-media-caption-exif-show-tooltip .fg-media-caption-exif-tooltip {
3447 display: inline-block;
3448 }
3449
3450 @media (hover: hover) {
3451 .fg-media-caption-exif-tooltip {
3452 display: none;
3453 }
3454 .fg-media-caption-exif-prop:hover .fg-media-caption-exif-tooltip {
3455 display: inline-block;
3456 }
3457 }
3458 .fg-panel.fg-light {
3459 color: #333;
3460 }
3461 .fg-panel.fg-dark {
3462 color: #FeFeFe;
3463 }
3464
3465 /* Border Color */
3466 .fg-panel.fg-light,
3467 .fg-panel.fg-light :is(.fg-panel-info-inner,.fg-panel-cart-inner,.fg-panel-thumbs-inner),
3468 .fg-panel.fg-light.fg-panel-preserve-button-space .fg-media-iframe .fg-media-content,
3469 .fg-panel.fg-light .fg-panel-thumb:is(.fg-idle,.fg-loading,.fg-error) .fg-panel-thumb-media {
3470 border-color: #e2e2e2;
3471 }
3472
3473 .fg-panel.fg-dark,
3474 .fg-panel.fg-dark :is(.fg-panel-info-inner,.fg-panel-cart-inner,.fg-panel-thumbs-inner),
3475 .fg-panel.fg-dark.fg-panel-preserve-button-space .fg-media-iframe .fg-media-content,
3476 .fg-panel.fg-dark .fg-panel-thumb:is(.fg-idle,.fg-loading,.fg-error) .fg-panel-thumb-media {
3477 border-color: #232323;
3478 }
3479
3480 .fg-panel.fg-light :is(.fg-media-caption-title,.fg-media-caption-exif,.fg-media-product-body) {
3481 border-color: #e2e2e2;
3482 }
3483 .fg-panel.fg-dark :is(.fg-media-caption-title,.fg-media-caption-exif,.fg-media-product-body) {
3484 border-color: #767676;
3485 }
3486 /* Background Color */
3487 .fg-panel.fg-light,
3488 .fg-panel.fg-light .fg-panel-thumb:is(.fg-idle,.fg-loading,.fg-error) .fg-panel-thumb-media {
3489 background-color: #EEE;
3490 }
3491 .fg-panel.fg-dark,
3492 .fg-panel.fg-dark .fg-panel-thumb:is(.fg-idle,.fg-loading,.fg-error) .fg-panel-thumb-media {
3493 background-color: #151515;
3494 }
3495
3496 .fg-panel.fg-light :is(.fg-panel-cart-inner,.fg-panel-info-inner) {
3497 background-color: rgba(255, 255, 255, 0.95);
3498 }
3499 .fg-panel.fg-dark :is(.fg-panel-cart-inner,.fg-panel-info-inner) {
3500 background-color: rgba(51, 51, 51, 0.95);
3501 }
3502
3503 /* EXIF Colors */
3504 .fg-panel.fg-light .fg-media-caption-exif-icon {
3505 color: #767676;
3506 }
3507 .fg-panel.fg-light .fg-media-caption-exif-label {
3508 color: #777777;
3509 }
3510
3511 .fg-panel.fg-dark .fg-media-caption-exif-icon {
3512 color: #FFFFFF;
3513 }
3514 .fg-panel.fg-dark .fg-media-caption-exif-label {
3515 color: #bbbbbb;
3516 }
3517
3518 /* Button & Highlight Colors */
3519 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary,
3520 .fg-panel.fg-light :is(.fg-panel-button,.fg-panel-thumbs-button,.fg-panel-thumb,.fg-panel-thumb-spacer),
3521 .fg-panel.fg-light:is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-info-overlay) .fg-panel-info-inner,
3522 .fg-panel.fg-light:is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-cart-overlay) .fg-panel-cart-inner {
3523 background-color: #FFF;
3524 border-color: #e2e2e2;
3525 }
3526 .fg-panel.fg-dark .fg-panel-button[aria-pressed="true"],
3527 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary[aria-pressed="true"] {
3528 background-color: #FFF;
3529 }
3530 .fg-panel.fg-light .fg-panel-thumb.fg-selected {
3531 background-color: #f0f0f0;
3532 }
3533 .fg-panel.fg-light :is(.fg-panel-button,.fg-panel-area-toggle,.fg-panel-thumbs-button),
3534 .fg-panel.fg-dark .fg-panel-button[aria-pressed="true"],
3535 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary[aria-pressed="true"] {
3536 color: #767676;
3537 }
3538 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary,
3539 .fg-panel.fg-light .fg-panel-button.fg-panel-button-secondary {
3540 color: #222;
3541 }
3542
3543 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary,
3544 .fg-panel.fg-dark :is(.fg-panel-button,.fg-panel-thumbs-button,.fg-panel-thumb,.fg-panel-thumb-spacer),
3545 .fg-panel.fg-dark:is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-info-overlay) .fg-panel-info-inner,
3546 .fg-panel.fg-dark:is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-cart-overlay) .fg-panel-cart-inner {
3547 background-color: #333;
3548 border-color: #222;
3549 }
3550 .fg-panel.fg-light .fg-panel-button[aria-pressed="true"],
3551 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary[aria-pressed="true"] {
3552 background-color: #333;
3553 }
3554 .fg-panel.fg-dark .fg-panel-thumb.fg-selected {
3555 background-color: #2c2c2c;
3556 }
3557 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary,
3558 .fg-panel.fg-dark :is(.fg-panel-button,.fg-panel-area-toggle,.fg-panel-thumbs-button),
3559 .fg-panel.fg-light .fg-panel-button[aria-pressed="true"],
3560 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary[aria-pressed="true"] {
3561 color: #FFF;
3562 }
3563
3564 @media (hover: hover) {
3565 .fg-panel.fg-light .fg-panel-area-toggle:hover,
3566 .fg-panel.fg-light .fg-panel-area-toggle:focus {
3567 color: #bbbbbb;
3568 }
3569 .fg-panel.fg-light .fg-panel-button:hover,
3570 .fg-panel.fg-light .fg-panel-button:focus,
3571 .fg-panel.fg-dark .fg-panel-button[aria-pressed="true"]:hover,
3572 .fg-panel.fg-dark .fg-panel-button[aria-pressed="true"]:focus,
3573 .fg-panel.fg-light .fg-panel-thumbs-button:hover,
3574 .fg-panel.fg-light .fg-panel-thumbs-button:focus,
3575 .fg-panel.fg-light .fg-panel-thumb:hover,
3576 .fg-panel.fg-light .fg-panel-thumb:focus,
3577 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary:hover,
3578 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary:focus,
3579 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary[aria-pressed="true"]:hover,
3580 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary[aria-pressed="true"]:focus {
3581 background-color: #f5f5f5;
3582 }
3583 .fg-panel.fg-dark .fg-panel-area-toggle:hover,
3584 .fg-panel.fg-dark .fg-panel-area-toggle:focus {
3585 color: #bbbbbb;
3586 }
3587 .fg-panel.fg-dark .fg-panel-button:hover,
3588 .fg-panel.fg-dark .fg-panel-button:focus,
3589 .fg-panel.fg-light .fg-panel-button[aria-pressed="true"]:hover,
3590 .fg-panel.fg-light .fg-panel-button[aria-pressed="true"]:focus,
3591 .fg-panel.fg-dark .fg-panel-thumbs-button:hover,
3592 .fg-panel.fg-dark .fg-panel-thumbs-button:focus,
3593 .fg-panel.fg-dark .fg-panel-thumb:hover,
3594 .fg-panel.fg-dark .fg-panel-thumb:focus,
3595 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary:hover,
3596 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary:focus,
3597 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary[aria-pressed="true"]:hover,
3598 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary[aria-pressed="true"]:focus {
3599 background-color: #303030;
3600 }
3601 }
3602
3603
3604 .fg-panel.fg-button-light .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3605 .fg-panel.fg-button-light .fg-panel-thumbs-button,
3606 .fg-panel.fg-button-light .fg-panel-thumb.fg-selected {
3607 background-color: #fff;
3608 border-color: #e2e2e2;
3609 color: #767676;
3610 }
3611 .fg-panel.fg-button-light .fg-panel-button:is(.fg-panel-button-primary,.fg-panel-button-secondary) {
3612 color: #222;
3613 }
3614
3615 .fg-panel.fg-button-blue .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3616 .fg-panel.fg-button-blue .fg-panel-thumbs-button,
3617 .fg-panel.fg-button-blue .fg-panel-thumb.fg-selected {
3618 background-color: #3079ed;
3619 border-color: #306be1;
3620 color: #FFF;
3621 }
3622
3623 .fg-panel.fg-button-dark .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3624 .fg-panel.fg-button-dark .fg-panel-thumbs-button,
3625 .fg-panel.fg-button-dark .fg-panel-thumb.fg-selected {
3626 background-color: #4e4e4e;
3627 border-color: #292929;
3628 color: #FFF;
3629 }
3630
3631 .fg-panel.fg-button-green .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3632 .fg-panel.fg-button-green .fg-panel-thumbs-button,
3633 .fg-panel.fg-button-green .fg-panel-thumb.fg-selected {
3634 background-color: #027339;
3635 border-color: #025f2f;
3636 color: #FFF;
3637 }
3638
3639 .fg-panel.fg-button-purple .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3640 .fg-panel.fg-button-purple .fg-panel-thumbs-button,
3641 .fg-panel.fg-button-purple .fg-panel-thumb.fg-selected {
3642 background-color: #6816c2;
3643 border-color: #5416a8;
3644 color: #FFF;
3645 }
3646
3647 .fg-panel.fg-button-orange .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3648 .fg-panel.fg-button-orange .fg-panel-thumbs-button,
3649 .fg-panel.fg-button-orange .fg-panel-thumb.fg-selected {
3650 background-color: #e57731;
3651 border-color: #c36230;
3652 color: #FFF;
3653 }
3654
3655 .fg-panel.fg-button-red .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3656 .fg-panel.fg-button-red .fg-panel-thumbs-button,
3657 .fg-panel.fg-button-red .fg-panel-thumb.fg-selected {
3658 background-color: #c22b24;
3659 border-color: #9f2924;
3660 color: #FFF;
3661 }
3662
3663 @media (hover: hover) {
3664 .fg-panel.fg-button-light .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3665 .fg-panel.fg-button-light .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3666 .fg-panel.fg-button-light .fg-panel-thumbs-button:hover,
3667 .fg-panel.fg-button-light .fg-panel-thumbs-button:focus,
3668 .fg-panel.fg-button-light .fg-panel-thumb:hover,
3669 .fg-panel.fg-button-light .fg-panel-thumb:focus,
3670 .fg-panel.fg-button-light .fg-panel-thumb.fg-selected:hover,
3671 .fg-panel.fg-button-light .fg-panel-thumb.fg-selected:focus,
3672 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-button:hover,
3673 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-button:focus,
3674 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumbs-button:hover,
3675 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumbs-button:focus,
3676 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumb:hover,
3677 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumb:focus,
3678 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3679 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3680 background-color: #f5f5f5;
3681 border-color: #e2e2e2;
3682 color: #bbb;
3683 }
3684
3685 .fg-panel.fg-button-blue .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3686 .fg-panel.fg-button-blue .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3687 .fg-panel.fg-button-blue .fg-panel-thumbs-button:hover,
3688 .fg-panel.fg-button-blue .fg-panel-thumbs-button:focus,
3689 .fg-panel.fg-button-blue .fg-panel-thumb:hover,
3690 .fg-panel.fg-button-blue .fg-panel-thumb:focus,
3691 .fg-panel.fg-button-blue .fg-panel-thumb.fg-selected:hover,
3692 .fg-panel.fg-button-blue .fg-panel-thumb.fg-selected:focus,
3693 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-button:hover,
3694 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-button:focus,
3695 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumbs-button:hover,
3696 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumbs-button:focus,
3697 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumb:hover,
3698 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumb:focus,
3699 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3700 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3701 background-color: #4d90fe;
3702 border-color: #3079ed;
3703 color: #FFF;
3704 }
3705
3706 .fg-panel.fg-button-dark .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3707 .fg-panel.fg-button-dark .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3708 .fg-panel.fg-button-dark .fg-panel-thumbs-button:hover,
3709 .fg-panel.fg-button-dark .fg-panel-thumbs-button:focus,
3710 .fg-panel.fg-button-dark .fg-panel-thumb:hover,
3711 .fg-panel.fg-button-dark .fg-panel-thumb:focus,
3712 .fg-panel.fg-button-dark .fg-panel-thumb.fg-selected:hover,
3713 .fg-panel.fg-button-dark .fg-panel-thumb.fg-selected:focus,
3714 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-button:hover,
3715 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-button:focus,
3716 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumbs-button:hover,
3717 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumbs-button:focus,
3718 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumb:hover,
3719 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumb:focus,
3720 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3721 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3722 background-color: #5e5e5e;
3723 border-color: #292929;
3724 color: #FFF;
3725 }
3726
3727 .fg-panel.fg-button-green .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3728 .fg-panel.fg-button-green .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3729 .fg-panel.fg-button-green .fg-panel-thumbs-button:hover,
3730 .fg-panel.fg-button-green .fg-panel-thumbs-button:focus,
3731 .fg-panel.fg-button-green .fg-panel-thumb:hover,
3732 .fg-panel.fg-button-green .fg-panel-thumb:focus,
3733 .fg-panel.fg-button-green .fg-panel-thumb.fg-selected:hover,
3734 .fg-panel.fg-button-green .fg-panel-thumb.fg-selected:focus,
3735 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-button:hover,
3736 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-button:focus,
3737 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumbs-button:hover,
3738 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumbs-button:focus,
3739 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumb:hover,
3740 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumb:focus,
3741 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3742 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3743 background-color: #02874A;
3744 border-color: #027339;
3745 color: #FFF;
3746 }
3747
3748 .fg-panel.fg-button-purple .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3749 .fg-panel.fg-button-purple .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3750 .fg-panel.fg-button-purple .fg-panel-thumbs-button:hover,
3751 .fg-panel.fg-button-purple .fg-panel-thumbs-button:focus,
3752 .fg-panel.fg-button-purple .fg-panel-thumb:hover,
3753 .fg-panel.fg-button-purple .fg-panel-thumb:focus,
3754 .fg-panel.fg-button-purple .fg-panel-thumb.fg-selected:hover,
3755 .fg-panel.fg-button-purple .fg-panel-thumb.fg-selected:focus,
3756 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-button:hover,
3757 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-button:focus,
3758 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumbs-button:hover,
3759 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumbs-button:focus,
3760 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumb:hover,
3761 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumb:focus,
3762 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3763 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3764 background-color: #7816D6;
3765 border-color: #6816c2;
3766 color: #FFF;
3767 }
3768
3769 .fg-panel.fg-button-orange .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3770 .fg-panel.fg-button-orange .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3771 .fg-panel.fg-button-orange .fg-panel-thumbs-button:hover,
3772 .fg-panel.fg-button-orange .fg-panel-thumbs-button:focus,
3773 .fg-panel.fg-button-orange .fg-panel-thumb:hover,
3774 .fg-panel.fg-button-orange .fg-panel-thumb:focus,
3775 .fg-panel.fg-button-orange .fg-panel-thumb.fg-selected:hover,
3776 .fg-panel.fg-button-orange .fg-panel-thumb.fg-selected:focus,
3777 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-button:hover,
3778 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-button:focus,
3779 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumbs-button:hover,
3780 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumbs-button:focus,
3781 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumb:hover,
3782 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumb:focus,
3783 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3784 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3785 background-color: #FF8E31;
3786 border-color: #e57731;
3787 color: #FFF;
3788 }
3789
3790 .fg-panel.fg-button-red .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3791 .fg-panel.fg-button-red .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3792 .fg-panel.fg-button-red .fg-panel-thumbs-button:hover,
3793 .fg-panel.fg-button-red .fg-panel-thumbs-button:focus,
3794 .fg-panel.fg-button-red .fg-panel-thumb:hover,
3795 .fg-panel.fg-button-red .fg-panel-thumb:focus,
3796 .fg-panel.fg-button-red .fg-panel-thumb.fg-selected:hover,
3797 .fg-panel.fg-button-red .fg-panel-thumb.fg-selected:focus,
3798 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-button:hover,
3799 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-button:focus,
3800 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumbs-button:hover,
3801 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumbs-button:focus,
3802 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumb:hover,
3803 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumb:focus,
3804 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3805 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3806 background-color: #F12B24;
3807 border-color: #c22b24;
3808 color: #FFF;
3809 }
3810 }
3811 /* transitions */
3812 .fg-panel-fade .fg-media,
3813 .fg-panel-horizontal .fg-media,
3814 .fg-panel-vertical .fg-media,
3815 .fg-panel-fade .fg-panel-thumbs-stage,
3816 .fg-panel-horizontal .fg-panel-thumbs-stage,
3817 .fg-panel-vertical .fg-panel-thumbs-stage {
3818 transition-duration: .3s;
3819 transition-timing-function: ease-in-out;
3820 }
3821
3822 .fg-panel-fade .fg-panel-thumbs-stage,
3823 .fg-panel-horizontal .fg-panel-thumbs-stage,
3824 .fg-panel-vertical .fg-panel-thumbs-stage {
3825 transition-property: transform;
3826 }
3827
3828 .fg-panel-fade .fg-media-content,
3829 .fg-panel-horizontal .fg-media-content,
3830 .fg-panel-vertical .fg-media-content {
3831 transition-duration: .3s;
3832 transition-timing-function: ease-in-out;
3833 transition-property: opacity, visibility;
3834 }
3835
3836 @media (hover: hover) {
3837 .fg-panel-fade .fg-panel-button,
3838 .fg-panel-horizontal .fg-panel-button,
3839 .fg-panel-vertical .fg-panel-button,
3840 .fg-panel-fade .fg-panel-area-toggle,
3841 .fg-panel-horizontal .fg-panel-area-toggle,
3842 .fg-panel-vertical .fg-panel-area-toggle,
3843 .fg-panel-fade .fg-panel-thumb,
3844 .fg-panel-horizontal .fg-panel-thumb,
3845 .fg-panel-vertical .fg-panel-thumb,
3846 .fg-panel-fade .fg-panel-thumbs-button,
3847 .fg-panel-horizontal .fg-panel-thumbs-button,
3848 .fg-panel-vertical .fg-panel-thumbs-button {
3849 transition-property: background-color, border-color, color, opacity, visibility;
3850 transition-duration: .1s;
3851 transition-timing-function: ease-in-out;
3852 }
3853 }
3854
3855 /* content fade in/out */
3856 .fg-panel-fade .fg-media {
3857 transition-property: opacity, visibility, padding;
3858 visibility: hidden;
3859 opacity: 0;
3860 }
3861 .fg-panel-fade .fg-media.fg-visible,
3862 .fg-panel-fade .fg-media.fg-reverse.fg-visible {
3863 visibility: visible;
3864 opacity: 1;
3865 }
3866
3867 /* content slide left/right */
3868 .fg-panel-horizontal .fg-media {
3869 transition-property: opacity, visibility, transform, padding;
3870 transform: translateX(-100%);
3871 visibility: hidden;
3872 opacity: 0;
3873 }
3874 .fg-panel-horizontal .fg-media.fg-reverse {
3875 transform: translateX(100%);
3876 }
3877 .fg-panel-horizontal .fg-media.fg-visible,
3878 .fg-panel-horizontal .fg-media.fg-reverse.fg-visible {
3879 transform: translateX(0);
3880 visibility: visible;
3881 opacity: 1;
3882 }
3883
3884 /* content slide up/down */
3885 .fg-panel-vertical .fg-media {
3886 transition-property: opacity, visibility, transform, padding;
3887 transform: translateY(-100%);
3888 visibility: hidden;
3889 opacity: 0;
3890 }
3891 .fg-panel-vertical .fg-media.fg-reverse {
3892 transform: translateY(100%);
3893 }
3894 .fg-panel-vertical .fg-media.fg-visible,
3895 .fg-panel-vertical .fg-media.fg-reverse.fg-visible {
3896 transform: translateY(0);
3897 visibility: visible;
3898 opacity: 1;
3899 }
3900 .fg-icon-auto-progress {
3901 cursor: pointer;
3902 }
3903
3904 .fg-icon-auto-progress-idle {
3905 fill: currentColor;
3906 visibility: visible;
3907 opacity: 1;
3908 transition: opacity 0.3s, visibility 0.3s;
3909 }
3910 .fg-icon-auto-progress:is(.fg-paused,.fg-stopped,.fg-started) .fg-icon-auto-progress-idle {
3911 opacity: 0;
3912 visibility: hidden;
3913 }
3914
3915 .fg-icon-auto-progress-circle {
3916 stroke: currentColor;
3917 fill: transparent;
3918 transform: rotate(-90deg);
3919 transform-origin: 50% 50%;
3920 opacity: 0;
3921 visibility: hidden;
3922 stroke-width: 8px;
3923 stroke-dasharray: 0, 0;
3924 stroke-dashoffset: 0;
3925 transition: stroke-dashoffset 1s, opacity 0.3s, visibility 0.3s;
3926 }
3927 .fg-icon-auto-progress.fg-started .fg-icon-auto-progress-circle {
3928 opacity: 1;
3929 visibility: visible;
3930 }
3931 .fg-icon-auto-progress-play,
3932 .fg-icon-auto-progress-pause {
3933 fill: currentColor;
3934 opacity: 0;
3935 visibility: hidden;
3936 transition: opacity 0.3s, visibility 0.3s;
3937 }
3938 .fg-icon-auto-progress:is(.fg-paused,.fg-stopped) .fg-icon-auto-progress-play {
3939 opacity: 1;
3940 visibility: visible;
3941 }
3942
3943 @media (hover: hover) {
3944 *:hover > .fg-icon-auto-progress.fg-started .fg-icon-auto-progress-circle {
3945 opacity: 0;
3946 visibility: hidden;
3947 }
3948 *:hover > .fg-icon-auto-progress:is(.fg-paused,.fg-stopped) .fg-icon-auto-progress-play,
3949 *:hover > .fg-icon-auto-progress.fg-started .fg-icon-auto-progress-pause {
3950 opacity: 1;
3951 visibility: visible;
3952 }
3953 }
3954 .fg-panel-thumbs-inner {
3955 position: relative;
3956 display: flex;
3957 width: 100%;
3958 height: 100%;
3959 overflow: hidden;
3960 pointer-events: auto;
3961 }
3962 .fg-panel-thumbs-top .fg-panel-thumbs-inner,
3963 .fg-panel-thumbs-bottom .fg-panel-thumbs-inner {
3964 flex-direction: row;
3965 }
3966 .fg-panel-thumbs-left .fg-panel-thumbs-inner,
3967 .fg-panel-thumbs-right .fg-panel-thumbs-inner {
3968 flex-direction: column;
3969 }
3970
3971 .fg-panel-thumbs-button,
3972 .fg-panel-thumbs-button:active,
3973 .fg-panel-thumbs-button:focus {
3974 position: relative;
3975 width: 100%;
3976 height: 100%;
3977 cursor: pointer;
3978 user-select: none;
3979 outline: none;
3980 }
3981 .fg-panel-thumbs-button.fg-disabled {
3982 display: none;
3983 }
3984 .fg-panel-thumbs-top .fg-panel-thumbs-button,
3985 .fg-panel-thumbs-bottom .fg-panel-thumbs-button {
3986 width: 37px;
3987 min-width: 37px;
3988 }
3989 .fg-panel-thumbs-left .fg-panel-thumbs-button,
3990 .fg-panel-thumbs-right .fg-panel-thumbs-button {
3991 height: 37px;
3992 min-height: 37px;
3993 }
3994
3995 @media (hover: hover) {
3996 .fg-panel-hover-buttons .fg-panel-thumbs-button {
3997 position: absolute;
3998 visibility: hidden;
3999 opacity: 0;
4000 z-index: 1;
4001 }
4002 .fg-panel-hover-buttons .fg-panel-thumbs:hover .fg-panel-thumbs-button:not(.fg-disabled) {
4003 visibility: visible;
4004 opacity: 0.5;
4005 }
4006 .fg-panel-hover-buttons .fg-panel-thumbs .fg-panel-thumbs-button:not(.fg-disabled):hover {
4007 opacity: 1;
4008 }
4009 .fg-panel-hover-buttons .fg-panel-thumbs-prev {
4010 top: 0;
4011 left: 0;
4012 }
4013 .fg-panel-hover-buttons .fg-panel-thumbs-next {
4014 bottom: 0;
4015 right: 0;
4016 }
4017 }
4018
4019
4020 .fg-panel-thumbs-button .fg-icon {
4021 display: block;
4022 margin: 0;
4023 padding: 0;
4024 position: absolute;
4025 top: 50%;
4026 left: 50%;
4027 transform: translateX(-50%) translateY(-50%);
4028 }
4029 .fg-panel-thumbs-button.fg-disabled .fg-icon {
4030 opacity: 0.3;
4031 }
4032 .fg-panel-thumbs-left .fg-panel-thumbs-button .fg-icon,
4033 .fg-panel-thumbs-right .fg-panel-thumbs-button .fg-icon {
4034 transform: translateX(-50%) translateY(-50%) rotate(90deg);
4035 }
4036
4037 .fg-panel-thumbs-viewport {
4038 position: relative;
4039 width: 100%;
4040 height: 100%;
4041 overflow: hidden;
4042 }
4043
4044 .fg-panel-thumbs-stage {
4045 position: relative;
4046 display: flex;
4047 width: 100%;
4048 height: 100%;
4049 justify-content: flex-start;
4050 align-items: center;
4051 }
4052 .fg-panel-thumbs-top .fg-panel-thumbs-stage,
4053 .fg-panel-thumbs-bottom .fg-panel-thumbs-stage {
4054 flex-direction: row;
4055 }
4056 .fg-panel-thumbs-left .fg-panel-thumbs-stage,
4057 .fg-panel-thumbs-right .fg-panel-thumbs-stage {
4058 flex-direction: column;
4059 }
4060 .fg-panel-thumb-spacer {
4061 width: 100%;
4062 height: 100%;
4063 min-height: 1px;
4064 min-width: 1px;
4065 }
4066
4067 .fg-panel-thumb {
4068 position: relative;
4069 display: flex;
4070 margin: 0;
4071 padding: 4px;
4072 justify-content: center;
4073 align-items: center;
4074 width: 100%;
4075 height: 100%;
4076 min-width: 100%;
4077 min-height: 100%;
4078 cursor: pointer;
4079 user-select: none;
4080 }
4081 .fg-panel.fg-medium:not(.fg-panel-thumbs-no-captions) .fg-panel-thumb {
4082 justify-content: flex-start;
4083 }
4084 .fg-panel-thumbs-bottom .fg-panel-thumb,
4085 .fg-panel-thumbs-left .fg-panel-thumb,
4086 .fg-panel-thumbs-right .fg-panel-thumb {
4087 padding-top: 3px;
4088 }
4089 .fg-panel-thumbs-top .fg-panel-thumb {
4090 padding-bottom: 3px;
4091 }
4092
4093
4094
4095
4096 .fg-panel-thumbs-viewport > .fg-panel-thumb {
4097 position: absolute;
4098 top: -9999px;
4099 left: -9999px;
4100 visibility: hidden;
4101 opacity: 0;
4102 }
4103
4104 .fg-panel-thumb-media {
4105 position: relative;
4106 width: 90px;
4107 min-width: 90px;
4108 height: 60px;
4109 min-height: 60px;
4110 overflow: hidden;
4111 }
4112 .fg-panel.fg-medium .fg-panel-thumb-media {
4113 width: 108px;
4114 min-width: 108px;
4115 height: 72px;
4116 min-height: 72px;
4117 }
4118 .fg-panel.fg-medium:not(.fg-panel-thumbs-no-captions) .fg-panel-thumb-media {
4119 margin-right: 5px;
4120 }
4121 .fg-panel.fg-medium.fg-x-large-width .fg-panel-thumb-media {
4122 width: 128px;
4123 min-width: 128px;
4124 }
4125 .fg-panel.fg-panel-thumbs-small .fg-panel-thumb-media {
4126 width: 60px;
4127 min-width: 60px;
4128 }
4129 .fg-panel.fg-medium.fg-panel-thumbs-small .fg-panel-thumb-media,
4130 .fg-panel.fg-medium.fg-x-large-width.fg-panel-thumbs-small .fg-panel-thumb-media {
4131 width: 72px;
4132 min-width: 72px;
4133 }
4134
4135 .fg-panel-thumb.fg-idle .fg-panel-thumb-media,
4136 .fg-panel-thumb.fg-loading .fg-panel-thumb-media,
4137 .fg-panel-thumb.fg-error .fg-panel-thumb-media {
4138 border-style: solid;
4139 border-width: 1px;
4140 }
4141 .fg-panel-thumb.fg-error .fg-panel-thumb-media {
4142 background-image: url("../img/icons.svg#image");
4143 background-position: center center;
4144 background-size: 32px 32px;
4145 background-repeat: no-repeat;
4146 }
4147
4148 .fg-panel-thumb-wrap {
4149 width: 100%;
4150 height: 100%;
4151 position: absolute;
4152 top: 0;
4153 left: 0;
4154 margin: 0;
4155 }
4156 .fg-panel-thumb-image {
4157 width: 100%;
4158 height: auto;
4159 position: absolute;
4160 top: 50%;
4161 left: 50%;
4162 margin: 0;
4163 transform: translateX(-50%) translateY(-50%);
4164 visibility: visible;
4165 opacity: 1;
4166 transition: visibility 0.3s, opacity 0.3s;
4167 }
4168 .fg-panel-thumb.fg-idle .fg-panel-thumb-image,
4169 .fg-panel-thumb.fg-loading .fg-panel-thumb-image,
4170 .fg-panel-thumb.fg-error .fg-panel-thumb-image {
4171 visibility: hidden;
4172 opacity: 0;
4173 }
4174 .fg-panel-thumb-caption {
4175 display: none;
4176 width: 100%;
4177 max-height: 60px;
4178 margin: 0;
4179 font-size: 14px;
4180 overflow: hidden;
4181 line-height: 1.3;
4182 }
4183 .fg-panel-thumb-caption-left .fg-panel-thumb-caption {
4184 text-align: left;
4185 }
4186 .fg-panel-thumb-caption-right .fg-panel-thumb-caption {
4187 text-align: right;
4188 }
4189 .fg-panel-thumb-caption-center .fg-panel-thumb-caption {
4190 text-align: center;
4191 }
4192 .fg-panel-thumb-caption-justify .fg-panel-thumb-caption {
4193 text-align: justify;
4194 }
4195
4196 .fg-panel.fg-medium .fg-panel-thumb-caption {
4197 max-height: 72px;
4198 }
4199 .fg-panel.fg-medium:not(.fg-panel-thumbs-no-captions) .fg-panel-thumb-caption {
4200 display: block;
4201 }
4202 .fg-panel-thumb-title {
4203 font-weight: 600;
4204 }
4205 .fg-panel-thumb-description {
4206 font-size: smaller;
4207 }
4208 .fg-panel-thumb-title,
4209 .fg-panel-thumb-description {
4210 display: -webkit-box;
4211 -webkit-line-clamp: 1;
4212 -webkit-box-orient: vertical;
4213 overflow: hidden;
4214 }
4215
4216 .fg-panel-thumb-description,
4217 .fg-panel.fg-medium .fg-panel-thumb-title {
4218 -webkit-line-clamp: 2;
4219 }
4220 /* Inset Shadows */
4221 .fg-panel.fg-shadow-inset-small .fg-panel-thumb-media:after,
4222 .fg-panel.fg-shadow-inset-medium .fg-panel-thumb-media:after,
4223 .fg-panel.fg-shadow-inset-large .fg-panel-thumb-media:after {
4224 display: block;
4225 content: "";
4226 position: absolute;
4227 top: 0;
4228 left: 0;
4229 right: 0;
4230 bottom: 0;
4231 z-index: 7;
4232 }
4233 .fg-panel.fg-light.fg-shadow-inset-small .fg-panel-thumb-media:after,
4234 .fg-panel.fg-dark.fg-shadow-inset-small .fg-panel-thumb-media:after {
4235 box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3);
4236 }
4237 .fg-panel.fg-light.fg-shadow-inset-medium .fg-panel-thumb-media:after,
4238 .fg-panel.fg-dark.fg-shadow-inset-medium .fg-panel-thumb-media:after {
4239 box-shadow: inset 0 1px 10px 0 rgba(0,0,0,0.3);
4240 }
4241 .fg-panel.fg-light.fg-shadow-inset-large .fg-panel-thumb-media:after,
4242 .fg-panel.fg-dark.fg-shadow-inset-large .fg-panel-thumb-media:after {
4243 box-shadow: inset 0 1px 16px 0 rgba(0,0,0,0.3);
4244 }
4245 /* Colorize */
4246 .fg-panel.fg-hover-colorize .fg-panel-thumb-image {
4247 /* Firefox 10+, Firefox on Android */
4248 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
4249 /* IE 6-9 */
4250 filter: gray;
4251 /* Chrome 19+, Safari 6+, Safari 6+ iOS */
4252 -webkit-filter: grayscale(100%);
4253 -webkit-transition-property: -webkit-filter;
4254 transition-property: filter;
4255 }
4256 .fg-panel.fg-hover-colorize .fg-panel-thumb:hover .fg-panel-thumb-image {
4257 -webkit-filter: none;
4258 filter: none;
4259 }
4260 /* Grayscale */
4261 .fg-panel.fg-hover-grayscale .fg-panel-thumb-image {
4262 -webkit-filter: none;
4263 filter: none;
4264 -webkit-transition-property: -webkit-filter;
4265 transition-property: filter;
4266 }
4267 .fg-panel.fg-hover-grayscale .fg-panel-thumb:hover .fg-panel-thumb-image {
4268 /* Firefox 10+, Firefox on Android */
4269 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
4270 /* IE 6-9 */
4271 filter: gray;
4272 /* Chrome 19+, Safari 6+, Safari 6+ iOS */
4273 -webkit-filter: grayscale(100%);
4274 opacity: 1;
4275 }
4276
4277 /* Scale */
4278 .fg-panel.fg-hover-scale .fg-panel-thumb {
4279 transition-property: transform;
4280 }
4281 .fg-panel.fg-hover-scale .fg-panel-thumb:hover {
4282 transform: scale(1.048);
4283 }
4284 .fg-default {
4285 --fg-gutter: 10px;
4286
4287 display: flex;
4288 flex-direction: row;
4289 flex-wrap: wrap;
4290 gap: var(--fg-gutter);
4291 justify-content: center;
4292 margin-inline: auto !important;
4293 }
4294 .fg-default .fg-image {
4295 border-radius: 0;
4296 display: block;
4297 max-width: 100%;
4298 height: auto;
4299 margin: 0;
4300 padding: 0;
4301 }
4302
4303 /* Horizontal alignment */
4304 .fg-default.fg-left {
4305 justify-content: flex-start;
4306 margin-inline: 0 auto !important;
4307 }
4308
4309 .fg-default.fg-center {
4310 justify-content: center;
4311 margin-inline: auto !important;
4312 }
4313
4314 .fg-default.fg-right {
4315 justify-content: flex-end;
4316 margin-inline: auto 0 !important;
4317 }
4318 @media only screen and (min-width: 601px) {
4319 .fg-default.fg-d-col1 {
4320 --fg-d-columns: 1;
4321 }
4322 .fg-default.fg-d-col2 {
4323 --fg-d-columns: 2;
4324 }
4325 .fg-default.fg-d-col3 {
4326 --fg-d-columns: 3;
4327 }
4328 .fg-default.fg-d-col4 {
4329 --fg-d-columns: 4;
4330 }
4331 .fg-default.fg-d-col5 {
4332 --fg-d-columns: 5;
4333 }
4334 .fg-default.fg-d-col6 {
4335 --fg-d-columns: 6;
4336 }
4337 .fg-default:is(.fg-d-col1,.fg-d-col2,.fg-d-col3,.fg-d-col4,.fg-d-col5,.fg-d-col6) {
4338 --fg-d-gallery-max-width: calc(
4339 (var(--fg-d-columns) * var(--fg-column-max-width, 99999px)) +
4340 ((var(--fg-d-columns) - 1) * var(--fg-gutter))
4341 );
4342 max-width: min(100%, var(--fg-d-gallery-max-width));
4343 }
4344 .fg-default .fg-item {
4345 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 2 ) ) / 3 );
4346 }
4347 .fg-default.fg-d-col1 .fg-image,
4348 .fg-default.fg-d-col2 .fg-image,
4349 .fg-default.fg-d-col3 .fg-image,
4350 .fg-default.fg-d-col4 .fg-image,
4351 .fg-default.fg-d-col5 .fg-image,
4352 .fg-default.fg-d-col6 .fg-image {
4353 width: 100%;
4354 }
4355
4356 .fg-default.fg-d-col1 .fg-item {
4357 --fg-d-column-width: 100%;
4358 }
4359 .fg-default.fg-d-col2 .fg-item {
4360 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 1 ) ) / 2 );
4361 }
4362 .fg-default.fg-d-col3 .fg-item {
4363 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 2 ) ) / 3 );
4364 }
4365 .fg-default.fg-d-col4 .fg-item {
4366 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 3 ) ) / 4 );
4367 }
4368 .fg-default.fg-d-col5 .fg-item {
4369 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 4 ) ) / 5 );
4370 }
4371 .fg-default.fg-d-col6 .fg-item {
4372 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 5 ) ) / 6 );
4373 }
4374
4375 .fg-default:is(.fg-d-col1,.fg-d-col2,.fg-d-col3,.fg-d-col4,.fg-d-col5,.fg-d-col6) .fg-item {
4376 width: var(--fg-d-column-width);
4377 min-width: var(--fg-d-column-width);
4378 max-width: var(--fg-d-column-width);
4379 }
4380 }
4381 @media only screen and (max-width: 600px) {
4382 .fg-default.fg-m-col1 {
4383 --fg-m-columns: 1;
4384 }
4385 .fg-default.fg-m-col2 {
4386 --fg-m-columns: 2;
4387 }
4388 .fg-default.fg-m-col3 {
4389 --fg-m-columns: 3;
4390 }
4391 .fg-default:is(.fg-m-col1,.fg-m-col2,.fg-m-col3) {
4392 --fg-m-gallery-max-width: calc(
4393 (var(--fg-m-columns) * var(--fg-column-max-width, 99999px)) +
4394 ((var(--fg-m-columns) - 1) * var(--fg-gutter))
4395 );
4396 max-width: min(100%, var(--fg-m-gallery-max-width));
4397 }
4398 .fg-default .fg-item {
4399 --fg-m-column-width: 100%;
4400 }
4401 .fg-default.fg-m-col1 .fg-image,
4402 .fg-default.fg-m-col2 .fg-image,
4403 .fg-default.fg-m-col3 .fg-image {
4404 width: 100%;
4405 }
4406
4407 .fg-default.fg-m-col1 .fg-item {
4408 --fg-m-column-width: 100%;
4409 }
4410 .fg-default.fg-m-col2 .fg-item {
4411 --fg-m-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 1 ) ) / 2 );
4412 }
4413 .fg-default.fg-m-col3 .fg-item {
4414 --fg-m-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 2 ) ) / 3 );
4415 }
4416
4417 .fg-default:is(.fg-m-col1,.fg-m-col2,.fg-m-col3) .fg-item {
4418 width: var(--fg-m-column-width);
4419 min-width: var(--fg-m-column-width);
4420 max-width: var(--fg-m-column-width);
4421 }
4422 }
4423
4424 /* Base styles */
4425 .fg-masonry * {
4426 box-sizing: border-box;
4427 }
4428 .foogallery.fg-masonry {
4429 --fg-gutter: 10px;
4430 --fg-column-width: 100%;
4431 --fg-col2-width: calc( calc( 100% - calc( var(--fg-gutter) * 1 ) ) / 2 );
4432 --fg-col3-width: calc( calc( 100% - calc( var(--fg-gutter) * 2 ) ) / 3 );
4433 --fg-col4-width: calc( calc( 100% - calc( var(--fg-gutter) * 3 ) ) / 4 );
4434 --fg-col5-width: calc( calc( 100% - calc( var(--fg-gutter) * 4 ) ) / 5 );
4435 --fg-col6-width: calc( calc( 100% - calc( var(--fg-gutter) * 5 ) ) / 6 );
4436 margin: 0 auto;
4437 text-align: center;
4438 }
4439 .fg-masonry .fg-thumb {
4440 display: block;
4441 }
4442 .fg-masonry.fg-fixed .fg-item,
4443 .fg-masonry.fg-fixed .fg-image,
4444 .fg-masonry.fg-fixed .fg-column-width {
4445 max-width: 100%;
4446 }
4447
4448 .fg-masonry .fg-column-width {
4449 display: inline-block;
4450 border: solid 0 transparent;
4451 }
4452 .fg-masonry .fg-column-width,
4453 .fg-masonry .fg-gutter-width {
4454 position: absolute;
4455 height: 0;
4456 visibility: hidden;
4457 opacity: 0;
4458 pointer-events: none;
4459 }
4460
4461 .fg-masonry.fg-fixed .fg-item .fg-image,
4462 .fg-masonry.fg-col6 .fg-item .fg-image,
4463 .fg-masonry.fg-col5 .fg-item .fg-image,
4464 .fg-masonry.fg-col4 .fg-item .fg-image,
4465 .fg-masonry.fg-col3 .fg-item .fg-image,
4466 .fg-masonry.fg-col2 .fg-item .fg-image {
4467 width: 100%;
4468 height: auto;
4469 max-width: 100%;
4470 }
4471
4472 .fg-masonry .fg-item {
4473 line-height: 0;
4474 font-size: 0;
4475 vertical-align: top;
4476 }
4477
4478 .fg-masonry .fg-item { margin-bottom: var(--fg-gutter); margin-right: var(--fg-gutter); width: var(--fg-column-width); }
4479 .fg-masonry .fg-column-width { width: var(--fg-column-width); }
4480 .fg-masonry .fg-gutter-width { width: var(--fg-gutter); }
4481
4482 .fg-masonry.fg-col1 .fg-item:nth-child(1n+3),
4483 .fg-masonry.fg-col2 .fg-item:nth-child(2n+4),
4484 .fg-masonry.fg-col3 .fg-item:nth-child(3n+5),
4485 .fg-masonry.fg-col4 .fg-item:nth-child(4n+6),
4486 .fg-masonry.fg-col5 .fg-item:nth-child(5n+7),
4487 .fg-masonry.fg-col6 .fg-item:nth-child(6n+8) {
4488 margin-right: 0;
4489 }
4490
4491 .fg-masonry.fg-col2 {
4492 --fg-column-width: var(--fg-col2-width);
4493 }
4494 .fg-masonry.fg-col3 {
4495 --fg-column-width: var(--fg-col3-width);
4496 }
4497 .fg-masonry.fg-col4 {
4498 --fg-column-width: var(--fg-col4-width);
4499 }
4500 .fg-masonry.fg-col5 {
4501 --fg-column-width: var(--fg-col5-width);
4502 }
4503 .fg-masonry.fg-col6 {
4504 --fg-column-width: var(--fg-col6-width);
4505 }
4506
4507 /* Force 5 column layout < 1280px */
4508 @media screen and (max-width: 1280px) {
4509 .fg-masonry.fg-col6 {
4510 --fg-column-width: var(--fg-col5-width);
4511 }
4512 .fg-masonry.fg-col6 .fg-item:nth-child(5n+7) {
4513 margin-right: 0;
4514 }
4515 }
4516 /* Force 4 column layout < 1024px */
4517 @media screen and (max-width: 1024px) {
4518 .fg-masonry.fg-col5,
4519 .fg-masonry.fg-col6 {
4520 --fg-column-width: var(--fg-col4-width);
4521 }
4522 .fg-masonry.fg-col5 .fg-item:nth-child(4n+6),
4523 .fg-masonry.fg-col6 .fg-item:nth-child(4n+6) {
4524 margin-right: 0;
4525 }
4526 }
4527 /* Force 3 column layout < 720px */
4528 @media screen and (max-width: 720px) {
4529 .fg-masonry.fg-col4,
4530 .fg-masonry.fg-col5,
4531 .fg-masonry.fg-col6 {
4532 --fg-column-width: var(--fg-col3-width);
4533 }
4534 .fg-masonry.fg-col4 .fg-item:nth-child(3n+5),
4535 .fg-masonry.fg-col5 .fg-item:nth-child(3n+5),
4536 .fg-masonry.fg-col6 .fg-item:nth-child(3n+5) {
4537 margin-right: 0;
4538 }
4539 }
4540 /* Force 2 column layout < 480px */
4541 @media screen and (max-width: 480px) {
4542 .fg-masonry.fg-col3,
4543 .fg-masonry.fg-col4,
4544 .fg-masonry.fg-col5,
4545 .fg-masonry.fg-col6 {
4546 --fg-column-width: var(--fg-col2-width);
4547 }
4548 .fg-masonry.fg-col3 .fg-item:nth-child(2n+4),
4549 .fg-masonry.fg-col4 .fg-item:nth-child(2n+4),
4550 .fg-masonry.fg-col5 .fg-item:nth-child(2n+4),
4551 .fg-masonry.fg-col6 .fg-item:nth-child(2n+4) {
4552 margin-right: 0;
4553 }
4554 }
4555 /* Force 1 column layout < 320px */
4556 @media screen and (max-width: 320px) {
4557 .fg-masonry.fg-col2,
4558 .fg-masonry.fg-col3,
4559 .fg-masonry.fg-col4,
4560 .fg-masonry.fg-col5,
4561 .fg-masonry.fg-col6 {
4562 --fg-gutter: 0;
4563 --fg-column-width: 100%;
4564 }
4565 .fg-masonry.fg-col2 .fg-item:nth-child(1n+3),
4566 .fg-masonry.fg-col3 .fg-item:nth-child(1n+3),
4567 .fg-masonry.fg-col4 .fg-item:nth-child(1n+3),
4568 .fg-masonry.fg-col5 .fg-item:nth-child(1n+3),
4569 .fg-masonry.fg-col6 .fg-item:nth-child(1n+3) {
4570 margin-right: 0;
4571 }
4572 }
4573
4574 /* Border Styles - We must apply width changing border styles to the fg-column-width element so that the plugin can correctly determine the item widths. */
4575 .foogallery.fg-border-thin .fg-column-width {
4576 border-width: 4px;
4577 }
4578 .foogallery.fg-border-medium .fg-column-width {
4579 border-width: 10px;
4580 }
4581 .foogallery.fg-border-thick .fg-column-width {
4582 border-width: 16px;
4583 }
4584
4585 /* Captions Bottom */
4586 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption {
4587 display: flex;
4588 visibility: visible;
4589 opacity: 1;
4590 font-size: 13px;
4591 position: relative;
4592 top: auto;
4593 bottom: auto;
4594 left: auto;
4595 right: auto;
4596 width: auto;
4597 height: auto;
4598 text-transform: none;
4599 transform: none;
4600 transition: none;
4601 background-color: transparent;
4602 border: none;
4603 text-align: left;
4604 }
4605 .foogallery.fg-masonry.fg-captions-bottom.fg-c-l .fg-item-inner .fg-caption {
4606 text-align: left;
4607 }
4608 .foogallery.fg-masonry.fg-captions-bottom.fg-c-c .fg-item-inner .fg-caption {
4609 text-align: center;
4610 }
4611 .foogallery.fg-masonry.fg-captions-bottom.fg-c-r .fg-item-inner .fg-caption {
4612 text-align: right;
4613 }
4614 .foogallery.fg-masonry.fg-captions-bottom.fg-c-j .fg-item-inner .fg-caption {
4615 text-align: justify;
4616 }
4617 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner:hover .fg-caption {
4618 transform: none;
4619 transition: none;
4620 }
4621 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption-inner {
4622 display: flex;
4623 position: relative;
4624 max-height: none;
4625 top: auto;
4626 bottom: auto;
4627 left: auto;
4628 right: auto;
4629 width: auto;
4630 height: auto;
4631 border: none;
4632 transform: none;
4633 transition: none;
4634 }
4635 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption-inner:before {
4636 display: none;
4637 }
4638 .foogallery.fg-masonry.fg-captions-bottom.fg-caption-hover .fg-item-inner .fg-image-overlay {
4639 display: block;
4640 }
4641 .foogallery.fg-masonry.fg-captions-bottom.fg-caption-always .fg-item-inner:hover .fg-caption {
4642 visibility: visible;
4643 opacity: 1;
4644 }
4645
4646 /* Captions */
4647 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-title,
4648 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-title a {
4649 color: #FFF;
4650 }
4651 .fg-masonry.fg-captions-bottom.fg-light .fg-caption-title {
4652 color: #222;
4653 }
4654 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-desc,
4655 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-desc a {
4656 color: #ccc;
4657 }
4658 .fg-masonry.fg-captions-bottom.fg-light .fg-caption-desc,
4659 .fg-masonry.fg-captions-bottom.fg-light .fg-caption-desc a {
4660 color: #828282;
4661 }
4662 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:hover .fg-caption-desc,
4663 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:focus-within .fg-caption-desc,
4664 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:hover .fg-caption-desc a,
4665 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:focus-within .fg-caption-desc a {
4666 color: #FFF;
4667 }
4668 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:hover .fg-caption-desc,
4669 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:focus-within .fg-caption-desc,
4670 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:hover .fg-caption-desc a,
4671 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:focus-within .fg-caption-desc a {
4672 color: #222;
4673 }
4674
4675 /* Caption Buttons */
4676 .foogallery.fg-masonry:is(.fg-captions-bottom,.fg-caption-always) .fg-caption-buttons,
4677 .foogallery.fg-masonry.fg-c-l .fg-caption-buttons {
4678 justify-content: flex-start;
4679 }
4680 .foogallery.fg-masonry.fg-c-c .fg-caption-buttons {
4681 justify-content: center;
4682 }
4683 .foogallery.fg-masonry.fg-c-r .fg-caption-buttons {
4684 justify-content: flex-end;
4685 }
4686 .foogallery.fg-masonry.fg-c-j .fg-caption-buttons {
4687 justify-content: stretch;
4688 }
4689
4690 /* Handle Border Sizing for Captions Below */
4691 .fg-masonry.fg-captions-bottom .fg-caption {
4692 padding: 10px;
4693 }
4694 .fg-masonry.fg-captions-bottom.fg-border-thin .fg-caption {
4695 padding: 10px 6px 6px 6px;
4696 }
4697 .fg-masonry.fg-captions-bottom.fg-border-medium .fg-caption {
4698 padding: 10px 0 0 0;
4699 }
4700 .fg-masonry.fg-captions-bottom.fg-border-thick .fg-caption {
4701 padding: 16px 0 0 0;
4702 }
4703
4704 /* Transparent Overlays */
4705 .fg-masonry.fg-captions-bottom.fg-transparent-overlays .fg-caption {
4706 text-shadow: none;
4707 }
4708
4709 /* Transparent Theme */
4710 .fg-masonry.fg-transparent .fg-item-inner {
4711 background-color: transparent;
4712 color: #333;
4713 border-color: transparent;
4714 }
4715
4716 /* Captions */
4717 .fg-masonry.fg-transparent .fg-caption {
4718 color: #7f7f7f;
4719 }
4720 .fg-masonry.fg-transparent .fg-caption a {
4721 color: #7f7f7f;
4722 border-bottom: 1px solid #7f7f7f;
4723 }
4724 .fg-masonry.fg-transparent .fg-caption a:hover {
4725 border-bottom: none;
4726 }
4727 .fg-masonry.fg-transparent .fg-caption-title,
4728 .fg-masonry.fg-transparent .fg-caption-title a {
4729 color: #333;
4730 }
4731 .fg-masonry.fg-transparent .fg-caption-title a {
4732 border-bottom: 1px solid #333;
4733 }
4734
4735 /* Rounded Corners */
4736 .fg-masonry.fg-transparent.fg-round-full .fg-item,
4737 .fg-masonry.fg-transparent.fg-round-full .fg-item-inner {
4738 border-radius: 15px;
4739 }
4740 .fg-masonry.fg-transparent.fg-round-full .fg-image-wrap,
4741 .fg-masonry.fg-transparent.fg-round-full .fg-image-overlay,
4742 .fg-masonry.fg-transparent.fg-round-full.fg-shadow-inset-small .fg-thumb:after,
4743 .fg-masonry.fg-transparent.fg-round-full.fg-shadow-inset-medium .fg-thumb:after,
4744 .fg-masonry.fg-transparent.fg-round-full.fg-shadow-inset-large .fg-thumb:after {
4745 border-radius: 50%;
4746 overflow: hidden;
4747 }
4748
4749 .fg-masonry.fg-transparent.fg-round-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
4750 .fg-masonry.fg-transparent.fg-round-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay,
4751 .fg-masonry.fg-transparent.fg-round-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
4752 .fg-masonry.fg-transparent.fg-round-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay,
4753 .fg-masonry.fg-transparent.fg-round-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
4754 .fg-masonry.fg-transparent.fg-round-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay {
4755 overflow: hidden;
4756 }
4757 .fg-masonry.fg-transparent.fg-round-small.fg-shadow-inset-outline:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4758 .fg-masonry.fg-transparent.fg-round-small.fg-shadow-inset-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4759 .fg-masonry.fg-transparent.fg-round-small.fg-shadow-inset-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4760 .fg-masonry.fg-transparent.fg-round-small.fg-shadow-inset-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4761 .fg-masonry.fg-transparent.fg-round-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
4762 .fg-masonry.fg-transparent.fg-round-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay {
4763 border-radius: 5px;
4764 }
4765 .fg-masonry.fg-transparent.fg-round-medium.fg-shadow-inset-outline:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4766 .fg-masonry.fg-transparent.fg-round-medium.fg-shadow-inset-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4767 .fg-masonry.fg-transparent.fg-round-medium.fg-shadow-inset-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4768 .fg-masonry.fg-transparent.fg-round-medium.fg-shadow-inset-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4769 .fg-masonry.fg-transparent.fg-round-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
4770 .fg-masonry.fg-transparent.fg-round-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay {
4771 border-radius: 10px;
4772 }
4773 .fg-masonry.fg-transparent.fg-round-large.fg-shadow-inset-outline:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4774 .fg-masonry.fg-transparent.fg-round-large.fg-shadow-inset-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4775 .fg-masonry.fg-transparent.fg-round-large.fg-shadow-inset-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4776 .fg-masonry.fg-transparent.fg-round-large.fg-shadow-inset-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
4777 .fg-masonry.fg-transparent.fg-round-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
4778 .fg-masonry.fg-transparent.fg-round-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay {
4779 border-radius: 15px;
4780 }
4781
4782 /* Shadows */
4783 .fg-masonry.fg-transparent.fg-shadow-inset-small .fg-thumb:after {
4784 box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3);
4785 }
4786 .fg-masonry.fg-transparent.fg-shadow-inset-medium .fg-thumb:after {
4787 box-shadow: inset 0 1px 10px 0 rgba(0,0,0,0.3);
4788 }
4789 .fg-masonry.fg-transparent.fg-shadow-inset-large .fg-thumb:after {
4790 box-shadow: inset 0 1px 16px 0 rgba(0,0,0,0.3);
4791 }
4792
4793 .fg-masonry.fg-transparent.fg-shadow-outline .fg-item-inner {
4794 box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.5);
4795 }
4796 .fg-masonry.fg-transparent.fg-shadow-small .fg-item-inner {
4797 box-shadow: 0 1px 4px 0 rgba(128, 128, 128, 0.5);
4798 }
4799 .fg-masonry.fg-transparent.fg-shadow-medium .fg-item-inner {
4800 box-shadow: 0 1px 10px 0 rgba(128, 128, 128, 0.5);
4801 }
4802 .fg-masonry.fg-transparent.fg-shadow-large .fg-item-inner {
4803 box-shadow: 0 1px 16px 0 rgba(128, 128, 128, 0.5);
4804 }
4805
4806 /* Transitions */
4807 .fg-masonry.fg-hover-instant .fg-loaded .fg-caption-desc,
4808 .fg-masonry.fg-hover-fade .fg-loaded .fg-caption-desc,
4809 .fg-masonry.fg-hover-slide-up .fg-loaded .fg-caption-desc,
4810 .fg-masonry.fg-hover-slide-down .fg-loaded .fg-caption-desc,
4811 .fg-masonry.fg-hover-slide-left .fg-loaded .fg-caption-desc,
4812 .fg-masonry.fg-hover-slide-right .fg-loaded .fg-caption-desc,
4813 .fg-masonry.fg-hover-push .fg-loaded .fg-caption-desc,
4814 .fg-masonry.fg-hover-colorize .fg-loaded .fg-caption-desc,
4815 .fg-masonry.fg-hover-grayscale .fg-loaded .fg-caption-desc,
4816 .fg-masonry.fg-hover-scale .fg-loaded .fg-caption-desc,
4817 .fg-masonry.fg-hover-zoomed .fg-loaded .fg-caption-desc,
4818 .fg-masonry.fg-hover-colorize .fg-loaded .fg-caption-desc,
4819 .fg-masonry.fg-hover-grayscale .fg-loaded .fg-caption-desc {
4820 transition-timing-function: ease;
4821 transition-duration: 300ms;
4822 backface-visibility: hidden;
4823 }
4824
4825 /* Base Styles */
4826 .fg-justified {
4827 box-sizing: border-box;
4828 position: relative;
4829 text-align: center;
4830 }
4831 .foogallery.fg-justified .fg-item {
4832 box-sizing: border-box;
4833 display: inline-block;
4834 margin: 0;
4835 padding: 0;
4836 }
4837 .foogallery.fg-justified .fg-item-inner,
4838 .foogallery.fg-justified .fg-thumb,
4839 .foogallery.fg-justified .fg-image {
4840 box-sizing: border-box;
4841 display: block;
4842 margin: 0;
4843 padding: 0;
4844 }
4845 .fg-justified .fg-item {
4846 visibility: visible;
4847 position: relative;
4848 }
4849 .fg-justified .fg-item-inner {
4850 position: relative;
4851 width: 100%;
4852 height: 100%;
4853 }
4854 .fg-justified .fg-thumb {
4855 position: relative;
4856 overflow: hidden;
4857 }
4858 .fg-justified .fg-image {
4859 z-index: 1;
4860 }
4861 .fg-justified .fg-item.fg-positioned .fg-thumb,
4862 .fg-justified .fg-item.fg-positioned .fg-image-wrap {
4863 width: 100%;
4864 height: 100%;
4865 }
4866 .fg-justified .fg-item.fg-positioned .fg-image {
4867 width: 100%!important;
4868 height: auto!important;
4869 min-height: 100%;
4870 }
4871 .fg-simple_portfolio {
4872 --fg-gutter: 10px;
4873
4874 display: flex;
4875 flex-wrap: wrap;
4876 justify-content: center;
4877 align-items: stretch;
4878 align-content: center;
4879 gap: var(--fg-gutter);
4880 }
4881 .fg-simple_portfolio .fg-item {
4882 position: relative;
4883 flex-grow: 0;
4884 flex-shrink: 0;
4885 flex-basis: auto;
4886 margin: 0;
4887 max-width: 100%;
4888 }
4889 .fg-simple_portfolio .fg-item-inner {
4890 display: flex;
4891 flex-direction: column;
4892 margin: 0;
4893 height: 100%;
4894 }
4895 .fg-simple_portfolio.fg-captions-top .fg-item-inner {
4896 flex-direction: column-reverse;
4897 }
4898 .fg-simple_portfolio .fg-image {
4899 height: auto;
4900 width: 100%;
4901 }
4902
4903 /* Some badly written themes apply min-width:0 and min-height:0 to every element in the page which causes layout issues with flex. */
4904 .fg-simple_portfolio .fg-thumb {
4905 min-width: auto;
4906 min-height: auto;
4907 }
4908
4909 /* Reset captions for the portfolio */
4910 .foogallery.fg-simple_portfolio .fg-item-inner .fg-caption {
4911 visibility: visible;
4912 opacity: 1;
4913 font-size: 13px;
4914 position: relative;
4915 top: auto;
4916 bottom: auto;
4917 left: auto;
4918 right: auto;
4919 width: 100%;
4920 height: 100%;
4921 text-transform: none;
4922 transform: none;
4923 transition: none;
4924 background-color: transparent;
4925 border: none;
4926 text-align: left;
4927 }
4928 .foogallery.fg-simple_portfolio.fg-c-l .fg-item-inner .fg-caption {
4929 text-align: left;
4930 }
4931 .foogallery.fg-simple_portfolio.fg-c-c .fg-item-inner .fg-caption {
4932 text-align: center;
4933 }
4934 .foogallery.fg-simple_portfolio.fg-c-r .fg-item-inner .fg-caption {
4935 text-align: right;
4936 }
4937 .foogallery.fg-simple_portfolio.fg-c-j .fg-item-inner .fg-caption {
4938 text-align: justify;
4939 }
4940 .foogallery.fg-simple_portfolio .fg-item-inner:hover .fg-caption {
4941 transform: none;
4942 transition: none;
4943 }
4944 .foogallery.fg-simple_portfolio .fg-item-inner .fg-caption-inner {
4945 top: auto;
4946 bottom: auto;
4947 left: auto;
4948 right: auto;
4949 width: auto;
4950 height: auto;
4951 border: none;
4952 transform: none;
4953 transition: none;
4954 }
4955 .foogallery.fg-simple_portfolio .fg-item-inner .fg-caption-inner:before {
4956 display: none;
4957 }
4958 .foogallery.fg-simple_portfolio.fg-caption-hover .fg-item-inner .fg-image-overlay {
4959 display: block;
4960 }
4961 .foogallery.fg-simple_portfolio.fg-caption-always .fg-item-inner:hover .fg-caption {
4962 visibility: visible;
4963 opacity: 1;
4964 }
4965 .fg-simple_portfolio .fg-caption-title {
4966 white-space: normal;
4967 height: auto;
4968 }
4969 .fg-simple_portfolio .fg-caption-desc {
4970 flex: unset;
4971 }
4972
4973 /* Captions */
4974 .fg-simple_portfolio.fg-dark .fg-caption-title,
4975 .fg-simple_portfolio.fg-dark .fg-caption-title a {
4976 color: #FFF;
4977 }
4978 .fg-simple_portfolio.fg-light .fg-caption-title {
4979 color: #222;
4980 }
4981 .fg-simple_portfolio.fg-dark .fg-caption-desc,
4982 .fg-simple_portfolio.fg-dark .fg-caption-desc a {
4983 color: #ccc;
4984 }
4985 .fg-simple_portfolio.fg-light .fg-caption-desc,
4986 .fg-simple_portfolio.fg-light .fg-caption-desc a {
4987 color: #828282;
4988 }
4989 .fg-simple_portfolio.fg-dark .fg-item-inner:hover .fg-caption-desc,
4990 .fg-simple_portfolio.fg-dark .fg-item-inner:focus-within .fg-caption-desc,
4991 .fg-simple_portfolio.fg-dark .fg-item-inner:hover .fg-caption-desc a,
4992 .fg-simple_portfolio.fg-dark .fg-item-inner:focus-within .fg-caption-desc a {
4993 color: #FFF;
4994 }
4995 .fg-simple_portfolio.fg-light .fg-item-inner:hover .fg-caption-desc,
4996 .fg-simple_portfolio.fg-light .fg-item-inner:focus-within .fg-caption-desc,
4997 .fg-simple_portfolio.fg-light .fg-item-inner:hover .fg-caption-desc a,
4998 .fg-simple_portfolio.fg-light .fg-item-inner:focus-within .fg-caption-desc a {
4999 color: #222;
5000 }
5001
5002 /* Caption Buttons */
5003 .foogallery.fg-simple_portfolio.fg-c-c .fg-caption-buttons {
5004 justify-content: center;
5005 }
5006 .foogallery.fg-simple_portfolio .fg-caption-buttons,
5007 .foogallery.fg-simple_portfolio.fg-c-l .fg-caption-buttons {
5008 justify-content: flex-start;
5009 }
5010 .foogallery.fg-simple_portfolio.fg-c-r .fg-caption-buttons {
5011 justify-content: flex-end;
5012 }
5013 .foogallery.fg-simple_portfolio.fg-c-j .fg-caption-buttons {
5014 justify-content: stretch;
5015 }
5016
5017 /* Handle Border Sizing */
5018 .fg-simple_portfolio .fg-caption {
5019 padding: 10px;
5020 }
5021 .fg-simple_portfolio.fg-border-thin .fg-caption {
5022 padding: 10px 6px 6px 6px;
5023 }
5024 .fg-simple_portfolio.fg-captions-top.fg-border-thin .fg-caption {
5025 padding: 6px 6px 10px 6px;
5026 }
5027 .fg-simple_portfolio.fg-border-medium .fg-caption {
5028 padding: 10px 0 0 0;
5029 }
5030 .fg-simple_portfolio.fg-captions-top.fg-border-medium .fg-caption {
5031 padding: 0 0 10px 0;
5032 }
5033 .fg-simple_portfolio.fg-border-thick .fg-caption {
5034 padding: 16px 0 0 0;
5035 }
5036 .fg-simple_portfolio.fg-captions-top.fg-border-thick .fg-caption {
5037 padding: 0 0 16px 0;
5038 }
5039
5040 /* Transparent Overlays */
5041 .fg-simple_portfolio.fg-transparent-overlays .fg-caption {
5042 text-shadow: none;
5043 }
5044 /* Transparent Theme */
5045 .fg-simple_portfolio.fg-transparent .fg-item-inner {
5046 background-color: transparent;
5047 color: #333;
5048 border-color: transparent;
5049 }
5050
5051 /* Captions */
5052 .fg-simple_portfolio.fg-transparent .fg-caption {
5053 color: #7f7f7f;
5054 }
5055 .fg-simple_portfolio.fg-transparent .fg-caption a {
5056 color: #7f7f7f;
5057 border-bottom: 1px solid #7f7f7f;
5058 }
5059 .fg-simple_portfolio.fg-transparent .fg-caption a:hover {
5060 border-bottom: none;
5061 }
5062 .fg-simple_portfolio.fg-transparent .fg-caption-title,
5063 .fg-simple_portfolio.fg-transparent .fg-caption-title a {
5064 color: #333;
5065 }
5066 .fg-simple_portfolio.fg-transparent .fg-caption-title a {
5067 border-bottom: 1px solid #333;
5068 }
5069
5070 /* Rounded Corners */
5071 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-item,
5072 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-item-inner {
5073 border-radius: 15px;
5074 }
5075 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-image-wrap,
5076 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-image-overlay,
5077 .fg-simple_portfolio.fg-transparent.fg-round-full.fg-shadow-inset-small .fg-thumb:after,
5078 .fg-simple_portfolio.fg-transparent.fg-round-full.fg-shadow-inset-medium .fg-thumb:after,
5079 .fg-simple_portfolio.fg-transparent.fg-round-full.fg-shadow-inset-large .fg-thumb:after {
5080 border-radius: 50%;
5081 overflow: hidden;
5082 }
5083
5084 .fg-simple_portfolio.fg-transparent.fg-round-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
5085 .fg-simple_portfolio.fg-transparent.fg-round-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay,
5086 .fg-simple_portfolio.fg-transparent.fg-round-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
5087 .fg-simple_portfolio.fg-transparent.fg-round-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay,
5088 .fg-simple_portfolio.fg-transparent.fg-round-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
5089 .fg-simple_portfolio.fg-transparent.fg-round-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay {
5090 overflow: hidden;
5091 }
5092 .fg-simple_portfolio.fg-transparent.fg-round-small.fg-shadow-inset-outline:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5093 .fg-simple_portfolio.fg-transparent.fg-round-small.fg-shadow-inset-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5094 .fg-simple_portfolio.fg-transparent.fg-round-small.fg-shadow-inset-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5095 .fg-simple_portfolio.fg-transparent.fg-round-small.fg-shadow-inset-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5096 .fg-simple_portfolio.fg-transparent.fg-round-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
5097 .fg-simple_portfolio.fg-transparent.fg-round-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay {
5098 border-radius: 5px;
5099 }
5100 .fg-simple_portfolio.fg-transparent.fg-round-medium.fg-shadow-inset-outline:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5101 .fg-simple_portfolio.fg-transparent.fg-round-medium.fg-shadow-inset-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5102 .fg-simple_portfolio.fg-transparent.fg-round-medium.fg-shadow-inset-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5103 .fg-simple_portfolio.fg-transparent.fg-round-medium.fg-shadow-inset-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5104 .fg-simple_portfolio.fg-transparent.fg-round-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
5105 .fg-simple_portfolio.fg-transparent.fg-round-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay {
5106 border-radius: 10px;
5107 }
5108 .fg-simple_portfolio.fg-transparent.fg-round-large.fg-shadow-inset-outline:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5109 .fg-simple_portfolio.fg-transparent.fg-round-large.fg-shadow-inset-small:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5110 .fg-simple_portfolio.fg-transparent.fg-round-large.fg-shadow-inset-medium:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5111 .fg-simple_portfolio.fg-transparent.fg-round-large.fg-shadow-inset-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-thumb:after,
5112 .fg-simple_portfolio.fg-transparent.fg-round-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-wrap,
5113 .fg-simple_portfolio.fg-transparent.fg-round-large:not(.fg-shadow-outline):not(.fg-shadow-small):not(.fg-shadow-medium):not(.fg-shadow-large) .fg-image-overlay {
5114 border-radius: 15px;
5115 }
5116
5117 /* Shadows */
5118 .fg-simple_portfolio.fg-transparent.fg-shadow-inset-small .fg-thumb:after {
5119 box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3);
5120 }
5121 .fg-simple_portfolio.fg-transparent.fg-shadow-inset-medium .fg-thumb:after {
5122 box-shadow: inset 0 1px 10px 0 rgba(0,0,0,0.3);
5123 }
5124 .fg-simple_portfolio.fg-transparent.fg-shadow-inset-large .fg-thumb:after {
5125 box-shadow: inset 0 1px 16px 0 rgba(0,0,0,0.3);
5126 }
5127
5128 .fg-simple_portfolio.fg-transparent.fg-shadow-outline .fg-item-inner {
5129 box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.5);
5130 }
5131 .fg-simple_portfolio.fg-transparent.fg-shadow-small .fg-item-inner {
5132 box-shadow: 0 1px 4px 0 rgba(128, 128, 128, 0.5);
5133 }
5134 .fg-simple_portfolio.fg-transparent.fg-shadow-medium .fg-item-inner {
5135 box-shadow: 0 1px 10px 0 rgba(128, 128, 128, 0.5);
5136 }
5137 .fg-simple_portfolio.fg-transparent.fg-shadow-large .fg-item-inner {
5138 box-shadow: 0 1px 16px 0 rgba(128, 128, 128, 0.5);
5139 }
5140
5141 /* Transitions */
5142 .fg-simple_portfolio.fg-hover-instant .fg-loaded .fg-caption-desc,
5143 .fg-simple_portfolio.fg-hover-fade .fg-loaded .fg-caption-desc,
5144 .fg-simple_portfolio.fg-hover-slide-up .fg-loaded .fg-caption-desc,
5145 .fg-simple_portfolio.fg-hover-slide-down .fg-loaded .fg-caption-desc,
5146 .fg-simple_portfolio.fg-hover-slide-left .fg-loaded .fg-caption-desc,
5147 .fg-simple_portfolio.fg-hover-slide-right .fg-loaded .fg-caption-desc,
5148 .fg-simple_portfolio.fg-hover-push .fg-loaded .fg-caption-desc,
5149 .fg-simple_portfolio.fg-hover-colorize .fg-loaded .fg-caption-desc,
5150 .fg-simple_portfolio.fg-hover-grayscale .fg-loaded .fg-caption-desc,
5151 .fg-simple_portfolio.fg-hover-scale .fg-loaded .fg-caption-desc,
5152 .fg-simple_portfolio.fg-hover-zoomed .fg-loaded .fg-caption-desc,
5153 .fg-simple_portfolio.fg-hover-colorize .fg-loaded .fg-caption-desc,
5154 .fg-simple_portfolio.fg-hover-grayscale .fg-loaded .fg-caption-desc {
5155 transition-timing-function: ease;
5156 transition-duration: 300ms;
5157 backface-visibility: hidden;
5158 }
5159
5160 /* Polaroid */
5161 .foogallery.fg-preset.fg-polaroid .fg-item {
5162 -webkit-backface-visibility: hidden;
5163 backface-visibility: hidden;
5164 transition: transform 0.35s, background-color 0.65s;
5165 }
5166 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(2n+1) {
5167 -webkit-transform: rotate(3deg);
5168 transform: rotate(3deg);
5169 }
5170 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(2n) {
5171 -webkit-transform: rotate(-3deg);
5172 transform: rotate(-3deg);
5173 }
5174 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(3n) {
5175 -webkit-transform: rotate(1deg);
5176 transform: rotate(1deg);
5177 }
5178 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(5n) {
5179 -webkit-transform: rotate(-2deg);
5180 transform: rotate(-2deg);
5181 }
5182
5183 .foogallery.fg-preset.fg-polaroid .fg-item:hover {
5184 -webkit-transform: rotate(0);
5185 transform: rotate(0);
5186 }
5187
5188 .foogallery.fg-preset.fg-polaroid .fg-caption {
5189 position: relative;
5190 width: auto;
5191 font-family: "Segoe Print Regular","Comic Sans MS",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
5192 }
5193
5194 .foogallery.fg-preset.fg-polaroid .fg-caption-inner {
5195 text-shadow: none;
5196 line-height: 1.4;
5197 justify-content: center;
5198 }
5199 .foogallery.fg-preset.fg-polaroid .fg-caption-inner,
5200 .foogallery.fg-preset.fg-polaroid .fg-caption-title {
5201 position: relative;
5202 width: auto;
5203 }
5204 .foogallery.fg-preset.fg-polaroid .fg-caption-title {
5205 text-align: center;
5206 }
5207 .foogallery.fg-preset.fg-polaroid .fg-caption-desc {
5208 display: none;
5209 }
5210
5211 /* Themes */
5212 .foogallery.fg-preset.fg-polaroid .fg-caption-title,
5213 .foogallery.fg-light.fg-preset.fg-polaroid .fg-caption-title {
5214 color: #333;
5215 }
5216 .foogallery.fg-dark.fg-preset.fg-polaroid .fg-caption-title {
5217 color: #FFF;
5218 }
5219
5220 /* Transparent Overlays */
5221 .foogallery.fg-preset.fg-polaroid.fg-transparent-overlays .fg-caption {
5222 text-shadow: none;
5223 }
5224
5225 /* Handle Border Sizing */
5226 .foogallery.fg-preset.fg-polaroid .fg-caption {
5227 padding: 10px;
5228 }
5229 .foogallery.fg-preset.fg-polaroid.fg-border-thin .fg-caption {
5230 padding: 10px 4px 4px 4px;
5231 }
5232 .foogallery.fg-preset.fg-polaroid.fg-captions-top.fg-border-thin .fg-caption {
5233 padding: 4px 4px 10px 4px;
5234 }
5235 .foogallery.fg-preset.fg-polaroid.fg-border-medium .fg-caption {
5236 padding: 10px 0 0 0;
5237 }
5238 .foogallery.fg-preset.fg-polaroid.fg-captions-top.fg-border-medium .fg-caption {
5239 padding: 0 0 10px 0;
5240 }
5241 .foogallery.fg-preset.fg-polaroid.fg-border-thick .fg-caption {
5242 padding: 16px 0 0 0;
5243 }
5244 .foogallery.fg-preset.fg-polaroid.fg-captions-top.fg-border-thick .fg-caption {
5245 padding: 0 0 16px 0;
5246 }
5247 /* Base styles */
5248 .fg-image-viewer {
5249 display: block;
5250 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
5251 }
5252 .fg-image-viewer.fg-left {
5253 text-align: left;
5254 }
5255
5256 .fg-image-viewer.fg-center {
5257 text-align: center;
5258 }
5259 .fg-image-viewer.fg-right {
5260 text-align: right;
5261 }
5262
5263 .fiv-inner {
5264 position: relative;
5265 display: inline-block;
5266 max-width: 100%;
5267 z-index: 6;
5268 }
5269 .fiv-inner .fiv-inner-container {
5270 position: relative;
5271 max-width: 100%;
5272 border-color: transparent;
5273 border-style: solid;
5274 border-width: 0;
5275 border-bottom-width: 4px;
5276 z-index: 5;
5277 }
5278 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb,
5279 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb:hover,
5280 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb:active,
5281 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb:visited {
5282 position: relative;
5283 display: block;
5284 border: none;
5285 outline: none;
5286 text-decoration: none;
5287 box-shadow: none;
5288 max-width: 100%;
5289 }
5290 .foogallery.fg-image-viewer .fg-thumb {
5291 border-radius: inherit;
5292 }
5293
5294 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item {
5295 position: absolute;
5296 visibility: visible;
5297 opacity: 1;
5298 border: none;
5299 outline: none;
5300 text-decoration: none;
5301 box-shadow: none;
5302 max-width: 100%;
5303 }
5304 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item:first-of-type {
5305 position: relative;
5306 }
5307 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb img {
5308 display: block;
5309 max-width: 100%;
5310 height: auto;
5311 border: none;
5312 outline: none;
5313 text-decoration: none;
5314 }
5315
5316 .fg-image-viewer .fiv-inner .fiv-ctrls {
5317 display: block;
5318 text-align: center;
5319 font-size: 14px;
5320 border-style: solid;
5321 line-height: 34px;
5322 position: relative;
5323 z-index: 6;
5324 }
5325 .fg-image-viewer .fiv-inner .fiv-ctrls:after {
5326 content: '';
5327 display: block;
5328 clear: both;
5329 }
5330 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-count {
5331 display: inline-block;
5332 font-weight: normal;
5333 margin: 0;
5334 }
5335 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev,
5336 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next {
5337 display: flex;
5338 flex-direction: column;
5339 align-items: center;
5340 justify-content: stretch;
5341 height: unset;
5342 cursor: pointer;
5343 -webkit-user-select: none;
5344 -moz-user-select: none;
5345 -ms-user-select: none;
5346 user-select: none;
5347 border-style: solid;
5348 border-width: 1px;
5349 border-color: transparent;
5350 background: none;
5351 min-width: 80px;
5352 position: relative;
5353 overflow: hidden;
5354 transition: background-color .3s;
5355 box-shadow: none;
5356 outline: none;
5357 padding: 0 6px;
5358 margin: 0;
5359 font-family: inherit;
5360 font-size: inherit;
5361 font-weight: normal;
5362 }
5363 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5364 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5365 transform: translateY(0);
5366 }
5367 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:before,
5368 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:before {
5369 display: block;
5370 position: absolute;
5371 font-size: 24px;
5372 line-height: 32px;
5373 top:0;
5374 left:0;
5375 width: 100%;
5376 height: 100%;
5377 transform: translateY(0);
5378 transition: transform .3s;
5379 }
5380 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus):before,
5381 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus):before {
5382 transform: translateY(-100%);
5383 }
5384 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev span,
5385 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next span {
5386 display: block;
5387 flex-grow: 1;
5388 line-height: 34px;
5389 width: 100%;
5390 transform: translateY(100%);
5391 transition: transform .3s;
5392 }
5393 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus) span,
5394 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) span {
5395 transform: translateY(0);
5396 }
5397 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
5398 float: left;
5399 }
5400 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:before {
5401 content: '\2190';
5402 }
5403 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next {
5404 float: right;
5405 }
5406 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:before {
5407 content: '\2192';
5408 }
5409 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-count span {
5410 margin: 0 4px;
5411 }
5412 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
5413 float: right;
5414 }
5415 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:before {
5416 content: '\2192';
5417 }
5418 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next {
5419 float: left;
5420 }
5421 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:before {
5422 content: '\2190';
5423 }
5424
5425 /* Captions */
5426
5427 .foogallery.fg-image-viewer.fg-caption-always .fg-item-inner .fg-caption {
5428 border: none;
5429 }
5430
5431 /* Theme - Default (Light) */
5432 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls,
5433 .fg-image-viewer.fg-light .fiv-inner .fiv-inner-container,
5434 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-count,
5435 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-prev,
5436 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-next {
5437 background-color: #FFF;
5438 color: #333;
5439 border-color: #FFF;
5440 }
5441 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-prev,
5442 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-next {
5443 border-color: #ddd;
5444 }
5445 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5446 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5447 background-color: #F2F2F2;
5448 }
5449
5450 /* Theme - Dark */
5451 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls,
5452 .fg-image-viewer.fg-dark .fiv-inner .fiv-inner-container,
5453 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-count,
5454 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-prev,
5455 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-next {
5456 background-color: #333;
5457 color: #FFF;
5458 border-color: #333;
5459 }
5460 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-prev,
5461 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-next {
5462 border-color: #222;
5463 }
5464 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5465 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5466 background-color: #444;
5467 }
5468
5469 /* Border Size */
5470 .foogallery.fg-image-viewer.fg-border-thin .fg-item-inner,
5471 .foogallery.fg-image-viewer.fg-border-medium .fg-item-inner,
5472 .foogallery.fg-image-viewer.fg-border-thick .fg-item-inner {
5473 border-width: 0;
5474 }
5475 .foogallery.fg-image-viewer .fiv-ctrls,
5476 .foogallery.fg-image-viewer.fg-border-thin .fiv-inner-container {
5477 border-width: 4px;
5478 }
5479 .foogallery.fg-image-viewer.fg-border-medium .fiv-ctrls,
5480 .foogallery.fg-image-viewer.fg-border-medium .fiv-inner-container {
5481 border-width: 10px;
5482 }
5483 .foogallery.fg-image-viewer.fg-border-thick .fiv-ctrls,
5484 .foogallery.fg-image-viewer.fg-border-thick .fiv-inner-container {
5485 border-width: 16px;
5486 }
5487 .foogallery.fg-image-viewer .fiv-ctrls,
5488 .foogallery.fg-image-viewer.fg-border-thin .fiv-ctrls,
5489 .foogallery.fg-image-viewer.fg-border-medium .fiv-ctrls,
5490 .foogallery.fg-image-viewer.fg-border-thick .fiv-ctrls {
5491 border-top-width: 1px;
5492 }
5493
5494 /* Rounded Corners */
5495 .foogallery.fg-image-viewer.fg-round-small .fg-item,
5496 .foogallery.fg-image-viewer.fg-round-small .fg-item-inner,
5497 .foogallery.fg-image-viewer.fg-round-small .fiv-inner,
5498 .foogallery.fg-image-viewer.fg-round-small .fiv-inner-container,
5499 .foogallery.fg-image-viewer.fg-round-small .fiv-ctrls {
5500 border-radius: 5px;
5501 }
5502 .foogallery.fg-image-viewer.fg-round-small .fg-item,
5503 .foogallery.fg-image-viewer.fg-round-small .fg-item-inner,
5504 .foogallery.fg-image-viewer.fg-round-small .fiv-inner-container {
5505 border-bottom-left-radius: 0;
5506 border-bottom-right-radius: 0;
5507 }
5508 .foogallery.fg-image-viewer.fg-round-small .fiv-ctrls {
5509 border-top-left-radius: 0;
5510 border-top-right-radius: 0;
5511 }
5512 .foogallery.fg-image-viewer.fg-round-small .fiv-prev,
5513 .foogallery.fg-image-viewer.fg-round-small .fiv-next {
5514 border-radius: 3px;
5515 }
5516
5517 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fg-item,
5518 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fg-item-inner,
5519 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fiv-prev,
5520 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fiv-next,
5521 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fg-item,
5522 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fg-item-inner,
5523 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fiv-prev,
5524 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fiv-next,
5525 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fg-item,
5526 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fg-item-inner,
5527 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fiv-prev,
5528 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fiv-next {
5529 border-radius: 3px;
5530 }
5531
5532 .foogallery.fg-image-viewer.fg-round-medium .fg-item,
5533 .foogallery.fg-image-viewer.fg-round-medium .fg-item-inner,
5534 .foogallery.fg-image-viewer.fg-round-medium .fiv-inner,
5535 .foogallery.fg-image-viewer.fg-round-medium .fiv-inner-container,
5536 .foogallery.fg-image-viewer.fg-round-medium .fiv-ctrls {
5537 border-radius: 10px;
5538 }
5539 .foogallery.fg-image-viewer.fg-round-medium .fg-item,
5540 .foogallery.fg-image-viewer.fg-round-medium .fg-item-inner,
5541 .foogallery.fg-image-viewer.fg-round-medium .fiv-inner-container {
5542 border-bottom-left-radius: 0;
5543 border-bottom-right-radius: 0;
5544 }
5545 .foogallery.fg-image-viewer.fg-round-medium .fiv-ctrls {
5546 border-top-left-radius: 0;
5547 border-top-right-radius: 0;
5548 }
5549 .foogallery.fg-image-viewer.fg-round-medium .fiv-prev,
5550 .foogallery.fg-image-viewer.fg-round-medium .fiv-next {
5551 border-radius: 5px;
5552 }
5553 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fg-item,
5554 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fg-item-inner,
5555 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fiv-prev,
5556 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fiv-next {
5557 border-radius: 5px;
5558 }
5559 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fg-item,
5560 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fg-item-inner,
5561 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fiv-prev,
5562 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fiv-next,
5563 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fg-item,
5564 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fg-item-inner,
5565 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fiv-prev,
5566 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fiv-next {
5567 border-radius: 3px;
5568 }
5569
5570 .foogallery.fg-image-viewer.fg-round-large .fg-item,
5571 .foogallery.fg-image-viewer.fg-round-large .fg-item-inner,
5572 .foogallery.fg-image-viewer.fg-round-large .fiv-inner,
5573 .foogallery.fg-image-viewer.fg-round-large .fiv-inner-container,
5574 .foogallery.fg-image-viewer.fg-round-large .fiv-ctrls {
5575 border-radius: 15px;
5576 }
5577 .foogallery.fg-image-viewer.fg-round-large .fg-item,
5578 .foogallery.fg-image-viewer.fg-round-large .fg-item-inner,
5579 .foogallery.fg-image-viewer.fg-round-large .fiv-inner-container {
5580 border-bottom-left-radius: 0;
5581 border-bottom-right-radius: 0;
5582 }
5583 .foogallery.fg-image-viewer.fg-round-large .fiv-ctrls {
5584 border-top-left-radius: 0;
5585 border-top-right-radius: 0;
5586 }
5587 .foogallery.fg-image-viewer.fg-round-large .fiv-prev,
5588 .foogallery.fg-image-viewer.fg-round-large .fiv-next {
5589 border-radius: 11px;
5590 }
5591 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fg-item,
5592 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fg-item-inner,
5593 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fiv-prev,
5594 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fiv-next {
5595 border-radius: 11px;
5596 }
5597
5598 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fg-item,
5599 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fg-item-inner,
5600 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fiv-prev,
5601 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fiv-next {
5602 border-radius: 5px;
5603 }
5604
5605 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fg-item,
5606 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fg-item-inner,
5607 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fiv-prev,
5608 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fiv-next {
5609 border-radius: 3px;
5610 }
5611
5612 .foogallery.fg-image-viewer.fg-round-full .fiv-inner,
5613 .foogallery.fg-image-viewer.fg-round-full .fiv-inner-container,
5614 .foogallery.fg-image-viewer.fg-round-full .fiv-prev,
5615 .foogallery.fg-image-viewer.fg-round-full .fiv-next {
5616 border-radius: 50%;
5617 }
5618
5619 /* Drop Shadows */
5620 .foogallery.fg-image-viewer.fg-light.fg-shadow-outline .fg-item-inner,
5621 .foogallery.fg-image-viewer.fg-dark.fg-shadow-outline .fg-item-inner,
5622 .foogallery.fg-image-viewer.fg-light.fg-shadow-small .fg-item-inner,
5623 .foogallery.fg-image-viewer.fg-dark.fg-shadow-small .fg-item-inner,
5624 .foogallery.fg-image-viewer.fg-light.fg-shadow-medium .fg-item-inner,
5625 .foogallery.fg-image-viewer.fg-dark.fg-shadow-medium .fg-item-inner,
5626 .foogallery.fg-image-viewer.fg-light.fg-shadow-large .fg-item-inner,
5627 .foogallery.fg-image-viewer.fg-dark.fg-shadow-large .fg-item-inner {
5628 box-shadow: none;
5629 }
5630
5631 .foogallery.fg-image-viewer.fg-light.fg-shadow-outline .fiv-inner {
5632 box-shadow: 0 0 0 1px #ddd;
5633 }
5634 .foogallery.fg-image-viewer.fg-dark.fg-shadow-outline .fiv-inner {
5635 box-shadow: 0 0 0 1px #222;
5636 }
5637 .foogallery.fg-image-viewer.fg-light.fg-shadow-small .fiv-inner,
5638 .foogallery.fg-image-viewer.fg-dark.fg-shadow-small .fiv-inner {
5639 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
5640 }
5641 .foogallery.fg-image-viewer.fg-light.fg-shadow-medium .fiv-inner,
5642 .foogallery.fg-image-viewer.fg-dark.fg-shadow-medium .fiv-inner {
5643 box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);
5644 }
5645 .foogallery.fg-image-viewer.fg-light.fg-shadow-large .fiv-inner,
5646 .foogallery.fg-image-viewer.fg-dark.fg-shadow-large .fiv-inner {
5647 box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.5);
5648 }
5649
5650 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls {
5651 border: none;
5652 position: absolute;
5653 top: 0;
5654 left: 0;
5655 width: 100%;
5656 height: 100%;
5657 z-index: 6;
5658 background: none;
5659 pointer-events: none;
5660 visibility: visible;
5661 opacity: 1;
5662 transition: visibility .3s ease, opacity .3s ease;
5663 }
5664 .fg-image-viewer.fg-overlay-controls.fg-not-ready .fiv-inner .fiv-ctrls {
5665 visibility: hidden;
5666 opacity: 0;
5667 }
5668 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev,
5669 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next {
5670 position: absolute;
5671 top: 50%;
5672 transform: translateY(-50%);
5673 border-radius: 50%;
5674 min-width: unset;
5675 width: 40px;
5676 height: 40px;
5677 pointer-events: auto;
5678 opacity: 0.3;
5679 transition: opacity .3s ease;
5680 }
5681 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev {
5682 left: 20px;
5683 }
5684 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next {
5685 right: 20px;
5686 }
5687 .fg-image-viewer.fg-overlay-controls .fiv-inner:hover .fiv-ctrls .fiv-prev,
5688 .fg-image-viewer.fg-overlay-controls .fiv-inner:hover .fiv-ctrls .fiv-next {
5689 opacity: 0.6;
5690 }
5691 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5692 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5693 opacity: 1;
5694 }
5695
5696 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev:before,
5697 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next:before {
5698 content: '\279C';
5699 width: 100%;
5700 height: 100%;
5701 transform: translateY(0);
5702 line-height: 40px;
5703 }
5704 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev:before {
5705 transform: rotate(180deg);
5706 }
5707 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev span,
5708 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next span {
5709 display: none;
5710 }
5711
5712 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-count {
5713 display: none;
5714 }
5715
5716 /* Border Sizes */
5717 .fg-image-viewer.fg-overlay-controls:not(.fg-border-thin,.fg-border-medium,.fg-border-thick) .fg-item-inner,
5718 .fg-image-viewer.fg-overlay-controls:not(.fg-border-thin,.fg-border-medium,.fg-border-thick) .fiv-inner .fiv-inner-container { background-color: transparent; }
5719
5720 .fg-image-viewer.fg-overlay-controls { --border-width: 0px; }
5721 .fg-image-viewer.fg-overlay-controls.fg-border-thin { --border-width: 4px; }
5722 .fg-image-viewer.fg-overlay-controls.fg-border-medium { --border-width: 8px; }
5723 .fg-image-viewer.fg-overlay-controls.fg-border-thick { --border-width: 16px; }
5724
5725 .fg-image-viewer.fg-overlay-controls:not(.fg-border-thin,.fg-border-medium,.fg-border-thick) .fiv-inner .fiv-inner-container {
5726 border: none;
5727 }
5728 .fg-image-viewer.fg-overlay-controls.fg-border-thin .fiv-inner .fiv-ctrls,
5729 .fg-image-viewer.fg-overlay-controls.fg-border-medium .fiv-inner .fiv-ctrls,
5730 .fg-image-viewer.fg-overlay-controls.fg-border-thick .fiv-inner .fiv-ctrls {
5731 top: var(--border-width);
5732 left: var(--border-width);
5733 width: calc(100% - calc(var(--border-width) * 2));
5734 height: calc(100% - calc(var(--border-width) * 2));
5735 }
5736
5737 /* Border Radius */
5738 .fg-image-viewer.fg-overlay-controls { --border-radius: 0px; }
5739 .fg-image-viewer.fg-overlay-controls.fg-round-small { --border-radius: 5px; }
5740 .fg-image-viewer.fg-overlay-controls.fg-round-medium { --border-radius: 10px; }
5741 .fg-image-viewer.fg-overlay-controls.fg-round-large { --border-radius: 15px; }
5742
5743 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fiv-inner,
5744 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fiv-inner-container,
5745 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fiv-inner,
5746 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fiv-inner-container,
5747 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fiv-inner,
5748 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fiv-inner-container {
5749 border-radius: var(--border-radius);
5750 }
5751 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fg-item,
5752 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fg-item-inner,
5753 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fg-item,
5754 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fg-item-inner,
5755 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fg-item,
5756 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fg-item-inner {
5757 border-radius: max(0px, calc(var(--border-radius) - var(--border-width)));
5758 }
5759
5760 /* Paging Overrides */
5761 .fg-image-viewer.fg-overlay-controls .fg-paging-container {
5762 position: absolute;
5763 bottom: 0;
5764 left: 0;
5765 width: 100%;
5766 line-height: 1;
5767 }
5768 .fg-image-viewer.fg-overlay-controls.fg-dots-left .fg-paging-container {
5769 text-align: left;
5770 }
5771 .fg-image-viewer.fg-overlay-controls.fg-dots-center .fg-paging-container {
5772 text-align: center;
5773 }
5774 .fg-image-viewer.fg-overlay-controls.fg-dots-right .fg-paging-container {
5775 text-align: right;
5776 }
5777 .fg-image-viewer.fg-overlay-controls .fg-paging-container .fg-dots {
5778 pointer-events: auto;
5779 opacity: 0.3;
5780 transition: opacity .3s ease;
5781 }
5782 .fg-image-viewer.fg-overlay-controls .fiv-inner:hover .fg-paging-container .fg-dots {
5783 opacity: 0.6;
5784 }
5785 .fg-image-viewer.fg-overlay-controls .fiv-inner .fg-paging-container .fg-dots:is(:hover,:focus-within) {
5786 opacity: 1;
5787 }
5788 .foogallery.fg-thumbnail,
5789 .foogallery.fg-thumbnail.fg-center {
5790 text-align: center;
5791 }
5792 .foogallery.fg-thumbnail.fg-left {
5793 text-align: left;
5794 }
5795 .foogallery.fg-thumbnail.fg-right {
5796 text-align: right;
5797 }
5798
5799 .foogallery.fg-thumbnail.fg-float-left {
5800 float: left;
5801 width: auto;
5802 }
5803 .foogallery.fg-thumbnail.fg-float-right {
5804 float: right;
5805 width: auto;
5806 }
5807
5808 .foogallery.fg-thumbnail .fg-item {
5809 display: inline-block;
5810 vertical-align: top;
5811 max-width: 100%;
5812 }
5813 .foogallery.fg-thumbnail .fg-image {
5814 max-width: 100%;
5815 }
5816 .foogallery.fg-thumbnail .fg-st-hidden {
5817 display: none;
5818 }
5819
5820 .foogallery.fg-thumbnail.fg-stacked,
5821 .foogallery.fg-thumbnail.fg-stacked.fg-center {
5822 display: grid;
5823 grid-template-columns: 1fr auto 1fr;
5824 grid-template-rows: auto;
5825 }
5826 .foogallery.fg-thumbnail.fg-stacked .fg-item,
5827 .foogallery.fg-thumbnail.fg-stacked.fg-center .fg-item {
5828 grid-column: 2 / 3;
5829 grid-row: 1 / 2;
5830 z-index: unset;
5831 }
5832 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(1) {
5833 order: 1;
5834 }
5835 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(2) {
5836 order: 2;
5837 transform: rotate(3deg);
5838 }
5839 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(3) {
5840 order: 3;
5841 transform: rotate(-3deg);
5842 }
5843 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(4) {
5844 order: 4;
5845 transform: rotate(1deg);
5846 }
5847 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(5) {
5848 order: 5;
5849 transform: rotate(-2deg);
5850 }
5851 .foogallery.fg-thumbnail.fg-stacked:is(.fg-loaded-fade-in,.fg-loaded-slide-up,.fg-loaded-slide-down,.fg-loaded-slide-left,.fg-loaded-slide-right,.fg-loaded-scale-up,.fg-loaded-swing-down,.fg-loaded-drop,.fg-loaded-fly,.fg-loaded-flip) .fg-item.fg-loaded:not(:first-child),
5852 .foogallery.fg-thumbnail.fg-stacked:is(.fg-loaded-fade-in,.fg-loaded-slide-up,.fg-loaded-slide-down,.fg-loaded-slide-left,.fg-loaded-slide-right,.fg-loaded-scale-up,.fg-loaded-swing-down,.fg-loaded-drop,.fg-loaded-fly,.fg-loaded-flip) .fg-item.fg-loaded:not(:first-child) .fg-item-inner {
5853 transition-property: opacity,visibility;
5854 }
5855
5856 .foogallery.fg-thumbnail.fg-stacked.fg-left {
5857 grid-template-columns: auto 1fr;
5858 }
5859 .foogallery.fg-thumbnail.fg-stacked.fg-left .fg-item {
5860 grid-column: 1 / 2;
5861 }
5862
5863 .foogallery.fg-thumbnail.fg-stacked.fg-right {
5864 grid-template-columns: 1fr auto;
5865 }
5866 .foogallery.fg-thumbnail.fg-stacked.fg-right .fg-item {
5867 grid-column: 2 / 3;
5868 }
5869
5870 .foogallery.fg-thumbnail.fg-stacked.fg-float-left,
5871 .foogallery.fg-thumbnail.fg-stacked.fg-float-right {
5872 display: inline-grid;
5873 grid-template-columns: auto;
5874 }
5875 .foogallery.fg-thumbnail.fg-stacked.fg-float-left .fg-item,
5876 .foogallery.fg-thumbnail.fg-stacked.fg-float-right .fg-item {
5877 grid-column: 1 / 2;
5878 }
5879 .foogallery.fg-thumbnail.fg-stacked.fg-float-left {
5880 float: left;
5881 }
5882 .foogallery.fg-thumbnail.fg-stacked.fg-float-right {
5883 float: right;
5884 }
5885 .foogallery-stack-album {
5886 text-align: center;
5887 overflow: hidden;
5888 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
5889 font-size: 13px;
5890 font-weight: 400;
5891 line-height: 1.3;
5892 }
5893 .foogallery-stack-album,
5894 .foogallery-stack-album * {
5895 box-sizing: border-box;
5896 }
5897
5898 .foogallery-stack-album.fg-align-left {
5899 text-align: left;
5900 }
5901 .foogallery-stack-album.fg-align-center {
5902 text-align: center;
5903 }
5904 .foogallery-stack-album.fg-align-right {
5905 text-align: right;
5906 }
5907
5908 .foogallery-stack-album.fg-disable-transitions,
5909 .foogallery-stack-album.fg-disable-transitions * {
5910 transition: none !important;
5911 }
5912
5913 .fg-header {
5914 display: flex;
5915 flex-wrap: nowrap;
5916 justify-content: space-between;
5917 align-items: center;
5918 position: relative;
5919 padding: 0;
5920 margin: 0;
5921 border-top: solid 1px #aaa;
5922 border-bottom: solid 1px #aaa;
5923 }
5924
5925 .fg-header-title {
5926 display: block;
5927 margin: 0;
5928 padding: 0 20px;
5929 width: 100%;
5930 text-align: left;
5931 }
5932
5933 .fg-header-active {
5934 display: block;
5935 margin: 0;
5936 padding: 0 20px;
5937 visibility: hidden;
5938 opacity: 0;
5939 width: 100%;
5940 text-align: right;
5941 transition-property: opacity, visibility;
5942 transition-duration: .3s;
5943 transition-timing-function: ease-in-out;
5944 }
5945
5946 .fg-header-back {
5947 display: block;
5948 padding: 0;
5949 margin: 5px;
5950 visibility: hidden;
5951 opacity: 0;
5952 min-width: 40px;
5953 width: 40px;
5954 height: 40px;
5955 border-radius: 50%;
5956 text-align: center;
5957 line-height: 38px;
5958 color: #999;
5959 background: #ddd;
5960 background: rgba(200,200,200,0.5);
5961 cursor: pointer;
5962 -webkit-touch-callout: none;
5963 -webkit-user-select: none;
5964 -moz-user-select: none;
5965 -ms-user-select: none;
5966 user-select: none;
5967 transition-property: opacity, visibility;
5968 transition-duration: .3s;
5969 transition-timing-function: ease-in-out;
5970 }
5971
5972 .fg-has-active .fg-header-back,
5973 .fg-has-active .fg-header-active {
5974 visibility: visible;
5975 opacity: 1;
5976 }
5977
5978
5979 .fg-piles {
5980 display: inline-block;
5981 position: relative;
5982 max-width: 100%;
5983 transition-property: width, height;
5984 transition-duration: .3s;
5985 transition-timing-function: ease-in-out;
5986 }
5987
5988 .fg-pile {
5989 display: block;
5990 position: absolute;
5991 top: 0;
5992 left: 0;
5993 list-style: none;
5994 padding: 0;
5995 margin: 0;
5996 visibility: visible;
5997 opacity: 1;
5998 max-width: 100%;
5999 transition-property: opacity, visibility, top, left, width, height;
6000 transition-duration: .3s;
6001 transition-timing-function: ease-in-out;
6002 }
6003
6004 .fg-pile.fg-hidden {
6005 visibility: hidden;
6006 opacity: 0;
6007 }
6008
6009 .fg-pile-item {
6010 display: flex;
6011 flex-direction: column;
6012 max-width: 100%;
6013 position: absolute;
6014 top: 25px;
6015 left: 25px;
6016 visibility: visible;
6017 opacity: 1;
6018 cursor: pointer;
6019 border: 10px solid #fff;
6020 background-color: #FFF;
6021 box-shadow: 0 1px 4px rgba(0,0,0,0.2);
6022 transition-property: opacity, visibility, top, left, transform;
6023 transition-duration: .3s;
6024 transition-timing-function: ease-in-out;
6025 z-index: 1;
6026 transform: rotate(0deg);
6027 }
6028
6029 .fg-expanded .fg-pile-item {
6030 z-index: 2;
6031 transform: rotate(0deg) !important;
6032 }
6033 .fg-pile-item.fg-has-cover {
6034 z-index: 10;
6035 transform: rotate(0deg) !important;
6036 }
6037
6038 .fg-pile-item:nth-child(2) {
6039 z-index: 9;
6040 }
6041 .fg-pile-item:nth-child(3) {
6042 z-index: 8;
6043 }
6044 .fg-pile-item:nth-child(4) {
6045 z-index: 7;
6046 }
6047 .fg-pile-item:nth-child(1n+5) {
6048 visibility: hidden;
6049 opacity: 0;
6050 }
6051 .fg-expanded .fg-pile-item:nth-child(1n+4) {
6052 visibility: visible;
6053 opacity: 1;
6054 }
6055
6056 .fg-pile-item-thumb {
6057 display: flex;
6058 flex-direction: column;
6059 max-width: 100%;
6060 max-height: 100%;
6061 }
6062
6063 .fg-pile-item-image {
6064 display: block;
6065 max-width: 100%;
6066 object-fit: cover;
6067 width: auto;
6068 }
6069
6070 .fg-pile-item-caption {
6071 display: flex;
6072 justify-content: center;
6073 flex-direction: column;
6074 position: absolute;
6075 top: 0;
6076 left: 0;
6077 bottom: 0;
6078 right: 0;
6079 width: 100%;
6080 height: 100%;
6081 margin: 0;
6082 padding: 10px;
6083 background-color: rgba(68, 68, 68, 0.5);
6084 color: #FFFFFF;
6085 text-align: center;
6086 visibility: hidden;
6087 opacity: 0;
6088 max-width: 100%;
6089 transition-property: opacity, visibility;
6090 transition-duration: .3s;
6091 transition-timing-function: ease-in-out;
6092 }
6093 .fg-pile-item-title {
6094 display: block;
6095 width: 100%;
6096 padding: 0 0 10px;
6097 }
6098 .fg-pile-item-desc {
6099 display: block;
6100 width: 100%;
6101 max-height: 100%;
6102 border-top: solid 1px currentColor;
6103 padding: 10px 0 0;
6104 overflow: hidden;
6105 }
6106
6107 .fg-pile-item-thumb:hover .fg-pile-item-caption {
6108 visibility: visible;
6109 opacity: 1;
6110 }
6111
6112 .fg-pile-cover {
6113 display: flex;
6114 justify-content: left;
6115 align-items: center;
6116 position: absolute;
6117 top: 0;
6118 left: 0;
6119 bottom: 0;
6120 right: 0;
6121 width: 100%;
6122 height: 100%;
6123 visibility: visible;
6124 opacity: 1;
6125 cursor: pointer;
6126 -webkit-touch-callout: none;
6127 -webkit-user-select: none;
6128 -moz-user-select: none;
6129 -ms-user-select: none;
6130 user-select: none;
6131 transition-property: opacity, visibility;
6132 transition-duration: .3s;
6133 transition-timing-function: ease-in-out;
6134 }
6135
6136 .fg-expanded .fg-pile-cover {
6137 visibility: hidden;
6138 opacity: 0;
6139 pointer-events: none;
6140 }
6141
6142 .fg-pile-cover-content {
6143 display: flex;
6144 flex-wrap: wrap;
6145 position: relative;
6146 background: #fff;
6147 color: #333;
6148 width: 75%;
6149 font-weight: 700;
6150 box-shadow: 1px 1px 1px rgba(0,0,0,0.1), 5px 0 5px -3px rgba(0,0,0,0.4), inset 0 0 5px rgba(0,0,0,0.04);
6151 }
6152
6153 .fg-pile-caption-align-left {
6154 text-align: left;
6155 }
6156 .fg-pile-caption-align-center {
6157 text-align: center;
6158 }
6159 .fg-pile-caption-align-right {
6160 text-align: right;
6161 }
6162
6163 .fg-pile-cover-title {
6164 text-align: inherit;
6165 padding: 10px;
6166 flex: 1 1 auto;
6167 width: auto;
6168 }
6169 .fg-pile-cover-count {
6170 color: #aaa;
6171 padding: 10px 5px;
6172 background: #F7F7F7;
6173 white-space: nowrap;
6174 display: flex;
6175 align-items: center;
6176 }
6177 .fg-pile-cover-description {
6178 display: block;
6179 flex: 0 0 100%;
6180 width: 100%;
6181 max-height: 6em;
6182 overflow: hidden;
6183 padding: 0 10px 10px;
6184 text-align: inherit;
6185 font-weight: 400;
6186 line-height: 1.25;
6187 }
6188 .fg-pile-cover-description p {
6189 margin: 0 0 0.5em;
6190 }
6191 .fg-pile-cover-description p:last-child {
6192 margin-bottom: 0;
6193 }
6194
6195 :root {
6196 --fg-carousel-perspective: 150px;
6197 --fg-carousel-navigation-size: 48px;
6198 --fg-carousel-pagination-size: 14px;
6199 --fg-carousel-progress-size: 4px;
6200 --fg-carousel-navigation-opacity: 0.3;
6201 --fg-carousel-transition-speed: 650ms;
6202 --fg-carousel-ui-speed: 300ms;
6203 }
6204 .foogallery.fg-carousel {
6205 --fg-carousel-inverse-perspective: calc( -1 * var(--fg-carousel-perspective) );
6206 position: relative;
6207 overflow: hidden;
6208 display: grid;
6209 grid-template-columns: var(--fg-carousel-navigation-size) auto var(--fg-carousel-navigation-size);
6210 grid-template-rows: auto auto;
6211 grid-template-areas: "prev inner next"
6212 "bottom bottom bottom";
6213 }
6214 .fg-carousel-inner {
6215 position: relative;
6216 grid-area: inner;
6217 display: grid;
6218 grid-template-columns: 1fr auto 1fr;
6219 grid-template-rows: auto;
6220 grid-template-areas: "left center right";
6221 padding: 10px 0;
6222 perspective: var(--fg-carousel-perspective);
6223 transform: translate3d(0, 0, 0);
6224 transform-style: preserve-3d;
6225 backface-visibility: hidden;
6226 will-change: contents;
6227 pointer-events: none;
6228 }
6229 .foogallery_preview_container .fg-carousel-inner {
6230 transform-style: unset;
6231 }
6232
6233 .fg-carousel-center {
6234 position: relative;
6235 z-index: -1;
6236 pointer-events: none;
6237 visibility: hidden;
6238 }
6239 .fg-carousel-center {
6240 grid-area: center;
6241 }
6242 .fg-carousel-progress {
6243 display: block;
6244 position: absolute;
6245 visibility: visible;
6246 bottom: 0;
6247 left: 0;
6248 width: 0;
6249 height: var(--fg-carousel-progress-size);
6250 border-radius: calc( var(--fg-carousel-progress-size) / 2 );
6251 transition: width 100ms linear;
6252 opacity: var(--fg-carousel-navigation-opacity);
6253 }
6254 .rtl .fg-carousel-progress {
6255 left: auto;
6256 right: 0;
6257 }
6258 .fg-carousel-bottom {
6259 display: flex;
6260 flex-wrap: wrap;
6261 align-items: center;
6262 justify-content: center;
6263 position: relative;
6264 grid-area: bottom;
6265 font-size: var(--fg-carousel-pagination-size);
6266 padding: 0;
6267 margin-bottom: 10px;
6268 }
6269 .fg-carousel button.fg-carousel-bullet {
6270 width: 1em;
6271 height: 1em;
6272 display: block;
6273 padding: 0;
6274 margin: 0.3em;
6275 border-radius: 50%;
6276 border: solid 1px transparent;
6277 background: none;
6278 box-shadow: none;
6279 outline: none;
6280 opacity: var(--fg-carousel-navigation-opacity);
6281 cursor: pointer;
6282 font-size: inherit;
6283 transition: opacity var(--fg-carousel-ui-speed) ease-in;
6284 }
6285 @media only screen and (max-width: 782px) {
6286 .fg-carousel button.fg-carousel-bullet {
6287 width: 1.25em;
6288 height: 1.25em;
6289 }
6290 }
6291
6292 .fg-carousel button.fg-carousel-bullet:is(:hover,:focus) {
6293 background: none;
6294 box-shadow: none;
6295 outline: none;
6296 opacity: 1;
6297 }
6298 /*.fg-carousel button.fg-carousel-bullet:focus {*/
6299 /* outline: dashed 1px #333;*/
6300 /* outline-offset: 1px;*/
6301 /*}*/
6302 .fg-carousel button.fg-carousel-bullet.fg-bullet-active {
6303 opacity: 1;
6304 }
6305 button.fg-carousel-prev,
6306 button.fg-carousel-next {
6307 position: relative;
6308 height: 100%;
6309 width: 100%;
6310 display: flex;
6311 align-items: center;
6312 justify-content: center;
6313 font-size: var(--fg-carousel-navigation-size);
6314 background: none;
6315 border: none;
6316 box-shadow: none;
6317 outline: none;
6318 z-index: 11;
6319 cursor: pointer;
6320 opacity: var(--fg-carousel-navigation-opacity);
6321 transition: opacity var(--fg-carousel-ui-speed) ease-in;
6322 padding: 0;
6323 margin: 0;
6324 }
6325 button.fg-carousel-prev:is(:hover,:focus),
6326 button.fg-carousel-next:is(:hover,:focus) {
6327 background: none;
6328 border: none;
6329 box-shadow: none;
6330 outline: none;
6331 opacity: 1;
6332 }
6333 /*button.fg-carousel-prev:focus:not(:hover),*/
6334 /*button.fg-carousel-next:focus:not(:hover) {*/
6335 /* outline-style: dashed;*/
6336 /* outline-width: 1px;*/
6337 /* outline-offset: -2px;*/
6338 /*}*/
6339 .fg-carousel-prev .fg-icon,
6340 .fg-carousel-next .fg-icon {
6341 width: 1em;
6342 height: 1em;
6343 }
6344 .rtl .fg-carousel-prev .fg-icon,
6345 .rtl .fg-carousel-next .fg-icon {
6346 transform: rotate(180deg);
6347 }
6348 .fg-carousel-prev {
6349 grid-area: prev;
6350 }
6351 .fg-carousel-next {
6352 grid-area: next;
6353 }
6354
6355 .foogallery.fg-carousel .fg-item {
6356 display: block;
6357 opacity: 0;
6358 visibility: hidden;
6359 grid-area: center;
6360 transform-origin: center center;
6361 transform: translate3d(0, 200%, var(--fg-carousel-inverse-perspective));
6362 transition-timing-function: ease-in-out;
6363 transition-duration: 0s;
6364 transition-property: background-color,transform,transform-origin,opacity,visibility;
6365 backface-visibility: hidden;
6366 pointer-events: auto;
6367 }
6368 .foogallery.fg-carousel .fg-item.fg-loaded {
6369 transform: translate3d(0, 0, var(--fg-carousel-inverse-perspective));
6370 transition-timing-function: ease-in-out;
6371 transition-duration: calc( var(--fg-carousel-transition-speed) / 2 );
6372 transition-property: background-color,transform,transform-origin,opacity,visibility;
6373 }
6374 .foogallery.fg-carousel .fg-item.fg-item-active,
6375 .foogallery.fg-carousel .fg-item.fg-item-prev,
6376 .foogallery.fg-carousel .fg-item.fg-item-next {
6377 opacity: 1;
6378 visibility: visible;
6379 /*-webkit-box-reflect: below 5px -webkit-linear-gradient(bottom,rgba(255,0,0,.1) 0%,transparent 32px,transparent 100%);*/
6380 }
6381 .foogallery.fg-carousel .fg-item.fg-item-active {
6382 transform: translate3d(0, 0, 0);
6383 }
6384
6385 .foogallery.fg-carousel.fg-dark .fg-carousel-progress,
6386 .foogallery.fg-carousel.fg-light.fg-inverted .fg-carousel-progress {
6387 background-color: #FFF;
6388 box-shadow: inset 0 0 0 1px #9d9d9d;
6389 }
6390 .foogallery.fg-carousel.fg-dark button.fg-carousel-bullet,
6391 .foogallery.fg-carousel.fg-light.fg-inverted button.fg-carousel-bullet {
6392 background-color: #FFF;
6393 border-color: #ccc;
6394 }
6395 .foogallery.fg-carousel.fg-dark button.fg-carousel-prev,
6396 .foogallery.fg-carousel.fg-dark button.fg-carousel-next,
6397 .foogallery.fg-carousel.fg-light.fg-inverted button.fg-carousel-prev,
6398 .foogallery.fg-carousel.fg-light.fg-inverted button.fg-carousel-next {
6399 color: #FFF;
6400 background-color: transparent;
6401 outline-color: #FFF;
6402 }
6403
6404 .foogallery.fg-carousel.fg-light .fg-carousel-progress,
6405 .foogallery.fg-carousel.fg-dark.fg-inverted .fg-carousel-progress {
6406 background-color: #444;
6407 box-shadow: inset 0 0 0 1px #333;
6408 }
6409 .foogallery.fg-carousel.fg-light button.fg-carousel-bullet,
6410 .foogallery.fg-carousel.fg-dark.fg-inverted button.fg-carousel-bullet {
6411 background-color: #444;
6412 border-color: #333;
6413 }
6414 .foogallery.fg-carousel.fg-light button.fg-carousel-prev,
6415 .foogallery.fg-carousel.fg-light button.fg-carousel-next,
6416 .foogallery.fg-carousel.fg-dark.fg-inverted button.fg-carousel-prev,
6417 .foogallery.fg-carousel.fg-dark.fg-inverted button.fg-carousel-next {
6418 color: #444;
6419 background-color: transparent;
6420 outline-color: #444;
6421 }
6422
6423 .fg-shadow-outline .fg-carousel-inner {
6424 padding: 1px;
6425 }
6426 .fg-shadow-small .fg-carousel-inner {
6427 padding: 4px;
6428 }
6429 .fg-shadow-medium .fg-carousel-inner {
6430 padding: 10px;
6431 }
6432 .fg-shadow-large .fg-carousel-inner {
6433 padding: 16px;
6434 }
6435
6436 .foogallery.fg-carousel-hide-nav-arrows {
6437 --fg-carousel-navigation-size: 0px;
6438 }
6439 .foogallery.fg-carousel-hide-nav-arrows .fg-carousel-prev,
6440 .foogallery.fg-carousel-hide-nav-arrows .fg-carousel-next,
6441 .foogallery.fg-carousel-hide-pagination .fg-carousel-bottom,
6442 .foogallery.fg-carousel-hide-progress-bar .fg-carousel-progress {
6443 display: none;
6444 }