PluginProbe ʕ •ᴥ•ʔ
Gallery : FooGallery / 3.3.2
Gallery : FooGallery v3.3.2
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 / assets / css / foogallery.b449005b.css
foogallery / assets / css Last commit date
foogallery.90fd1da5.min.css 2 days ago foogallery.b449005b.css 2 days ago
foogallery.b449005b.css
6497 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-smallest .fg-caption-title {
1544 font-size: 12px;
1545 }
1546 .fg-preset.fg-preset-smallest .fg-caption-desc {
1547 font-size: 10px;
1548 }
1549
1550 .fg-preset.fg-preset-small .fg-caption-title {
1551 font-size: 16px;
1552 }
1553 .fg-preset.fg-preset-small .fg-caption-desc {
1554 font-size: 11px;
1555 }
1556
1557 .fg-preset.fg-preset-medium .fg-caption-title {
1558 font-size: 20px;
1559 }
1560 .fg-preset.fg-preset-medium .fg-caption-desc {
1561 font-size: 12px;
1562 }
1563
1564 .fg-preset.fg-preset-large .fg-caption-title {
1565 font-size: 24px;
1566 }
1567 .fg-preset.fg-preset-large .fg-caption-desc {
1568 font-size: 14px;
1569 }
1570
1571
1572 .foogallery.fg-preset.fg-brad .fg-caption {
1573 padding: 15px;
1574 clip-path: content-box;
1575 }
1576 .foogallery.fg-preset.fg-brad .fg-caption-inner {
1577 position: absolute;
1578 top: 15px;
1579 right: 15px;
1580 bottom: 15px;
1581 left: 15px;
1582 width: calc(100% - 30px);
1583 height: calc(100% - 30px);
1584 gap: 0;
1585 overflow: hidden;
1586 align-items: center;
1587 justify-content: center;
1588 visibility: hidden;
1589 opacity: 0;
1590 transform: translateY(40px);
1591 background-color: rgba(0,0,0,0);
1592 transition: transform 0.35s, visibility 0.35s, opacity 0.35s, background-color 0.35s;
1593 }
1594 .foogallery.fg-preset.fg-brad .fg-caption-inner:after {
1595 content: '';
1596 display: block;
1597 width: 30%;
1598 border-bottom: 1px solid currentColor;
1599 order: 2;
1600 margin: 0 10px;
1601 }
1602 .foogallery.fg-preset.fg-brad .fg-item-inner:hover .fg-caption-inner,
1603 .foogallery.fg-preset.fg-brad .fg-item-inner:focus-within .fg-caption-inner {
1604 visibility: visible;
1605 opacity: 1;
1606 transform: translateY(0);
1607 background-color: rgba(0,0,0,0.5);
1608 }
1609 .foogallery.fg-preset.fg-brad .fg-caption-title {
1610 padding: 20px 10px;
1611 width: 100%;
1612 order: 1;
1613 }
1614 .foogallery.fg-preset.fg-brad .fg-caption-desc {
1615 padding: 20px 10px;
1616 clip-path: content-box;
1617 height: auto;
1618 text-transform: none;
1619 order: 3;
1620 }
1621
1622 .foogallery.fg-preset.fg-brad .fg-caption-buttons {
1623 order: 4;
1624 padding: 0 10px 10px;
1625 }
1626
1627 /* Preset Sizes */
1628 .foogallery.fg-preset.fg-preset-smallest.fg-brad .fg-caption {
1629 padding: 5px;
1630 }
1631 .foogallery.fg-preset.fg-preset-smallest.fg-brad .fg-caption-inner {
1632 top: 5px;
1633 right: 5px;
1634 bottom: 5px;
1635 left: 5px;
1636 width: calc(100% - 10px);
1637 height: calc(100% - 10px);
1638 }
1639 .foogallery.fg-preset.fg-preset-smallest.fg-brad .fg-caption-title,
1640 .foogallery.fg-preset.fg-preset-smallest.fg-brad .fg-caption-desc {
1641 padding: 5px;
1642 }
1643 .foogallery.fg-preset.fg-preset-smallest.fg-brad .fg-caption-buttons {
1644 padding: 0 5px 5px;
1645 }
1646
1647 /* Text Align */
1648 .foogallery.fg-preset.fg-brad.fg-c-l .fg-caption-inner {
1649 align-items: flex-start;
1650 }
1651 .foogallery.fg-preset.fg-brad.fg-c-r .fg-caption-inner {
1652 align-items: flex-end;
1653 }
1654
1655 /* Transitions */
1656 .foogallery.fg-caption-hover.fg-hover-instant .fg-loaded .fg-caption,
1657 .foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-caption,
1658 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-caption,
1659 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-caption,
1660 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-caption,
1661 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-caption,
1662 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-caption,
1663 .foogallery.fg-caption-hover.fg-hover-colorize .fg-loaded .fg-caption,
1664 .foogallery.fg-caption-hover.fg-hover-grayscale .fg-loaded .fg-caption,
1665 .foogallery.fg-caption-hover.fg-hover-scale .fg-loaded .fg-caption,
1666 .foogallery.fg-hover-instant .fg-loaded .fg-image-overlay,
1667 .foogallery.fg-hover-fade .fg-loaded .fg-image-overlay,
1668 .foogallery.fg-hover-slide-up .fg-loaded .fg-image-overlay,
1669 .foogallery.fg-hover-slide-down .fg-loaded .fg-image-overlay,
1670 .foogallery.fg-hover-slide-left .fg-loaded .fg-image-overlay,
1671 .foogallery.fg-hover-slide-right .fg-loaded .fg-image-overlay,
1672 .foogallery.fg-hover-push .fg-loaded .fg-thumb,
1673 .foogallery.fg-hover-colorize .fg-loaded .fg-image-overlay,
1674 .foogallery.fg-hover-grayscale .fg-loaded .fg-image-overlay,
1675 .foogallery.fg-hover-scale .fg-item.fg-loaded,
1676 .foogallery.fg-hover-scale .fg-loaded .fg-image-overlay,
1677 .foogallery.fg-hover-zoomed .fg-loaded .fg-image,
1678 .foogallery.fg-hover-semi-zoomed .fg-loaded .fg-image,
1679 .foogallery.fg-hover-colorize .fg-loaded .fg-image,
1680 .foogallery.fg-hover-grayscale .fg-loaded .fg-image {
1681 transition-timing-function: ease;
1682 transition-duration: 300ms;
1683 backface-visibility: hidden;
1684 }
1685 /* Colorize */
1686 .foogallery.fg-hover-colorize .fg-image {
1687 filter: grayscale(100%);
1688 transition-property: filter;
1689 }
1690 .foogallery.fg-hover-colorize .fg-item-inner:hover .fg-image,
1691 .foogallery.fg-hover-colorize .fg-item-inner:focus-within .fg-image {
1692 filter: grayscale(0%);
1693 }
1694 .foogallery.fg-hover-colorize .fg-image-overlay,
1695 .foogallery.fg-caption-hover.fg-hover-colorize .fg-caption {
1696 display: block;
1697 left: 0;
1698 top: 0;
1699 bottom: 0;
1700 transition-property: visibility, opacity, background-color;
1701 }
1702 .foogallery.fg-hover-colorize .fg-item-inner:hover .fg-image-overlay,
1703 .foogallery.fg-caption-hover.fg-hover-colorize .fg-item-inner:hover .fg-caption,
1704 .foogallery.fg-hover-colorize .fg-item-inner:focus-within .fg-image-overlay,
1705 .foogallery.fg-caption-hover.fg-hover-colorize .fg-item-inner:focus-within .fg-caption {
1706 visibility: visible;
1707 opacity: 1;
1708 }
1709 /* Fade */
1710 .foogallery.fg-hover-fade .fg-loaded .fg-image-overlay,
1711 .foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-caption {
1712 display: block;
1713 left: 0;
1714 top: 0;
1715 bottom: 0;
1716 transition-property: visibility, opacity, background-color;
1717 }
1718 .foogallery.fg-hover-fade .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1719 .foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-item-inner:hover .fg-caption,
1720 .foogallery.fg-hover-fade .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1721 .foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-item-inner:focus-within .fg-caption {
1722 visibility: visible;
1723 opacity: 1;
1724 }
1725 /* Grayscale */
1726 .foogallery.fg-hover-grayscale .fg-image {
1727 filter: grayscale(0%);
1728 transition-property: filter;
1729 }
1730 .foogallery.fg-hover-grayscale .fg-item-inner:hover .fg-image,
1731 .foogallery.fg-hover-grayscale .fg-item-inner:focus-within .fg-image {
1732 filter: grayscale(100%);
1733 }
1734 .foogallery.fg-hover-grayscale .fg-image-overlay,
1735 .foogallery.fg-caption-hover.fg-hover-grayscale .fg-caption {
1736 display: block;
1737 left: 0;
1738 top: 0;
1739 bottom: 0;
1740 transition-property: visibility, opacity, background-color;
1741 }
1742 .foogallery.fg-hover-grayscale .fg-item-inner:hover .fg-image-overlay,
1743 .foogallery.fg-caption-hover.fg-hover-grayscale .fg-item-inner:hover .fg-caption,
1744 .foogallery.fg-hover-grayscale .fg-item-inner:focus-within .fg-image-overlay,
1745 .foogallery.fg-caption-hover.fg-hover-grayscale .fg-item-inner:focus-within .fg-caption {
1746 visibility: visible;
1747 opacity: 1;
1748 }
1749 /* Instant */
1750 .foogallery.fg-hover-instant .fg-loaded .fg-image-overlay,
1751 .foogallery.fg-caption-hover.fg-hover-instant .fg-loaded .fg-caption {
1752 display: block;
1753 left: 0;
1754 top: 0;
1755 bottom: 0;
1756 transition-property: none;
1757 }
1758 .foogallery.fg-hover-instant .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1759 .foogallery.fg-caption-hover.fg-hover-instant .fg-loaded .fg-item-inner:hover .fg-caption,
1760 .foogallery.fg-hover-instant .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1761 .foogallery.fg-caption-hover.fg-hover-instant .fg-loaded .fg-item-inner:focus-within .fg-caption {
1762 visibility: visible;
1763 opacity: 1;
1764 }
1765 /* Push */
1766 .foogallery.fg-hover-push .fg-loaded .fg-image-overlay,
1767 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-caption {
1768 display: block;
1769 left: 0;
1770 top: 0;
1771 bottom: 0;
1772 transform: translateX(100%);
1773 visibility: visible;
1774 opacity: 1;
1775 }
1776 .foogallery.fg-hover-push .fg-loaded .fg-thumb,
1777 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-caption {
1778 transition-property: transform;
1779 }
1780 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-item-inner:hover .fg-caption,
1781 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-item-inner:focus-within .fg-caption {
1782 transform: translateY(0);
1783 }
1784 .foogallery.fg-hover-push .fg-loaded .fg-item-inner:hover .fg-thumb,
1785 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-item-inner:hover .fg-thumb,
1786 .foogallery.fg-hover-push .fg-loaded .fg-item-inner .fg-thumb:focus,
1787 .foogallery.fg-caption-hover.fg-hover-push .fg-loaded .fg-item-inner .fg-thumb:focus {
1788 transform: translateX(-100%);
1789 }
1790 /* Scale */
1791 .foogallery.fg-hover-scale .fg-item {
1792 transition-property: transform;
1793 z-index: 4;
1794 }
1795
1796 .foogallery.fg-hover-scale .fg-item:hover,
1797 .foogallery.fg-hover-scale .fg-item:focus-within {
1798 transform: scale(1.048);
1799 z-index: 10;
1800 }
1801 .foogallery.fg-hover-scale .fg-image-overlay,
1802 .foogallery.fg-caption-hover.fg-hover-scale .fg-caption {
1803 display: block;
1804 left: 0;
1805 top: 0;
1806 bottom: 0;
1807 transition-property: visibility, opacity, background-color;
1808 }
1809 .foogallery.fg-hover-scale .fg-item-inner:hover .fg-image-overlay,
1810 .foogallery.fg-caption-hover.fg-hover-scale .fg-item-inner:hover .fg-caption,
1811 .foogallery.fg-hover-scale .fg-item-inner:focus-within .fg-image-overlay,
1812 .foogallery.fg-caption-hover.fg-hover-scale .fg-item-inner:focus-within .fg-caption {
1813 visibility: visible;
1814 opacity: 1;
1815 }
1816 /* Zoomed */
1817 .foogallery.fg-hover-zoomed .fg-image {
1818 transition-property: transform;
1819 z-index: 4;
1820 }
1821 .foogallery.fg-hover-zoomed .fg-item:hover .fg-image,
1822 .foogallery.fg-hover-zoomed .fg-item:focus-within .fg-image {
1823 transform: scale(1.15);
1824 }
1825 .foogallery.fg-hover-zoomed .fg-image-wrap {
1826 overflow: hidden;
1827 }
1828
1829 .foogallery.fg-hover-zoomed .fg-image-overlay,
1830 .foogallery.fg-caption-hover.fg-hover-zoomed .fg-caption {
1831 display: block;
1832 left: 0;
1833 top: 0;
1834 bottom: 0;
1835 transition-property: visibility, opacity, background-color;
1836 }
1837 .foogallery.fg-hover-zoomed .fg-item-inner:hover .fg-image-overlay,
1838 .foogallery.fg-caption-hover.fg-hover-zoomed .fg-item-inner:hover .fg-caption,
1839 .foogallery.fg-hover-zoomed .fg-item-inner:focus-within .fg-image-overlay,
1840 .foogallery.fg-caption-hover.fg-hover-zoomed .fg-item-inner:focus-within .fg-caption {
1841 visibility: visible;
1842 opacity: 1;
1843 }
1844 /* Zoomed */
1845 .foogallery.fg-hover-semi-zoomed .fg-image {
1846 transition-property: transform;
1847 z-index: 4;
1848 }
1849 .foogallery.fg-hover-semi-zoomed .fg-item:hover .fg-image,
1850 .foogallery.fg-hover-semi-zoomed .fg-item:focus-within .fg-image {
1851 transform: scale(1.05);
1852 }
1853 .foogallery.fg-hover-semi-zoomed .fg-image-wrap {
1854 overflow: hidden;
1855 }
1856
1857 .foogallery.fg-hover-semi-zoomed .fg-image-overlay,
1858 .foogallery.fg-caption-hover.fg-hover-semi-zoomed .fg-caption {
1859 display: block;
1860 left: 0;
1861 top: 0;
1862 bottom: 0;
1863 transition-property: visibility, opacity, background-color;
1864 }
1865 .foogallery.fg-hover-semi-zoomed .fg-item-inner:hover .fg-image-overlay,
1866 .foogallery.fg-caption-hover.fg-hover-semi-zoomed .fg-item-inner:hover .fg-caption,
1867 .foogallery.fg-hover-semi-zoomed .fg-item-inner:focus-within .fg-image-overlay,
1868 .foogallery.fg-caption-hover.fg-hover-semi-zoomed .fg-item-inner:focus-within .fg-caption {
1869 visibility: visible;
1870 opacity: 1;
1871 }
1872 /* Slide */
1873 .foogallery.fg-hover-slide-up .fg-loaded .fg-image-overlay,
1874 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-caption,
1875 .foogallery.fg-hover-slide-down .fg-loaded .fg-image-overlay,
1876 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-caption,
1877 .foogallery.fg-hover-slide-left .fg-loaded .fg-image-overlay,
1878 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-caption,
1879 .foogallery.fg-hover-slide-right .fg-loaded .fg-image-overlay,
1880 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-caption {
1881 display: block;
1882 left: 0;
1883 top: 0;
1884 bottom: 0;
1885 transition-property: transform, background-color, opacity, visibility;
1886 visibility: visible;
1887 opacity: 1;
1888 }
1889 .foogallery.fg-hover-slide-up .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1890 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-item-inner:hover .fg-caption,
1891 .foogallery.fg-hover-slide-down .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1892 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-item-inner:hover .fg-caption,
1893 .foogallery.fg-hover-slide-left .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1894 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-item-inner:hover .fg-caption,
1895 .foogallery.fg-hover-slide-right .fg-loaded .fg-item-inner:hover .fg-image-overlay,
1896 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-item-inner:hover .fg-caption,
1897 .foogallery.fg-hover-slide-up .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1898 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-item-inner:focus-within .fg-caption,
1899 .foogallery.fg-hover-slide-down .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1900 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-item-inner:focus-within .fg-caption,
1901 .foogallery.fg-hover-slide-left .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1902 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-item-inner:focus-within .fg-caption,
1903 .foogallery.fg-hover-slide-right .fg-loaded .fg-item-inner:focus-within .fg-image-overlay,
1904 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-item-inner:focus-within .fg-caption {
1905 transform: translateY(0) translateX(0);
1906 }
1907
1908
1909 /* Slide Up */
1910 .foogallery.fg-hover-slide-up .fg-loaded .fg-image-overlay,
1911 .foogallery.fg-caption-hover.fg-hover-slide-up .fg-loaded .fg-caption {
1912 transform: translateY(100%);
1913 }
1914
1915 /* Slide Down */
1916 .foogallery.fg-hover-slide-down .fg-loaded .fg-image-overlay,
1917 .foogallery.fg-caption-hover.fg-hover-slide-down .fg-loaded .fg-caption {
1918 transform: translateY(-100%);
1919 }
1920
1921 /* Slide Left */
1922 .foogallery.fg-hover-slide-left .fg-loaded .fg-image-overlay,
1923 .foogallery.fg-caption-hover.fg-hover-slide-left .fg-loaded .fg-caption {
1924 transform: translateX(100%);
1925 }
1926
1927 /* Slide Right */
1928 .foogallery.fg-hover-slide-right .fg-loaded .fg-image-overlay,
1929 .foogallery.fg-caption-hover.fg-hover-slide-right .fg-loaded .fg-caption {
1930 transform: translateX(-100%);
1931 }
1932 .fg-paging-container, .fg-paging-container *, .fg-paging-container *:before, .fg-paging-container *:after {
1933 box-sizing: border-box;
1934 }
1935 .fg-paging-container {
1936 display: block;
1937 padding: 15px;
1938 margin-top: 0!important;
1939 margin-bottom: 0!important;
1940 margin-left: auto;
1941 margin-right: auto;
1942 text-align: center;
1943 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
1944 -webkit-user-select: none;
1945 -moz-user-select: none;
1946 -ms-user-select: none;
1947 user-select: none;
1948 }
1949 .fg-ph-dots:after {
1950 display: block;
1951 content: '';
1952 width: 0;
1953 height: 22px;
1954 }
1955
1956 .fg-paging-container .fg-dots,
1957 .fg-paging-container .fg-dot-item {
1958 display: inline-block;
1959 margin: 0;
1960 padding: 0;
1961 outline: none;
1962 list-style: none;
1963 }
1964 .fg-paging-container .fg-dot-item .fg-dot-link {
1965 display: inline-block;
1966 margin: 3px;
1967 font-weight: 400;
1968 line-height: 1.4;
1969 text-align: center;
1970 white-space: nowrap;
1971 vertical-align: middle;
1972 cursor: pointer;
1973 user-select: none;
1974 background-image: none;
1975 text-decoration: none;
1976 border: 1px solid transparent;
1977 position: relative;
1978 border-radius: 50%;
1979 padding: 0;
1980 font-size: 0;
1981 outline: none;
1982 color: transparent;
1983 box-shadow: none;
1984 }
1985 .fg-paging-container .fg-dot-item .fg-dot-link:before {
1986 content: "";
1987 background-color: transparent;
1988 border: 1px solid transparent;
1989 display: block;
1990 border-radius: 50%;
1991 width: 9px;
1992 height: 9px;
1993 padding: 0;
1994 margin: 2px;
1995 }
1996 .fg-paging-container .fg-dot-item .fg-dot-link:active,
1997 .fg-paging-container .fg-dot-item .fg-dot-link:hover,
1998 .fg-paging-container .fg-dot-item .fg-dot-link:focus {
1999 text-decoration: none;
2000 box-shadow: none;
2001 outline: none;
2002 }
2003 /*.fg-paging-container .fg-dot-item .fg-dot-link:focus:not(:hover) {*/
2004 /* outline-style: dashed;*/
2005 /* outline-width: 1px ;*/
2006 /* outline-offset: 1px;*/
2007 /*}*/
2008 .fg-paging-container .fg-dot-item.fg-disabled .fg-dot-link,
2009 .fg-paging-container .fg-dot-item.fg-selected .fg-dot-link {
2010 cursor: not-allowed;
2011 pointer-events: none;
2012 }
2013 .fg-paging-container .fg-dot-item.fg-disabled .fg-dot-link {
2014 cursor: not-allowed;
2015 pointer-events: none;
2016 outline: none;
2017 }
2018
2019 /* Light - Dots */
2020 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link,
2021 .fg-paging-container.fg-light .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-light .fg-dot-item .fg-dot-link {
2027 background-color: #eee;
2028 border-color: #9d9d9d;
2029 outline-color: #9d9d9d;
2030 }
2031 .fg-paging-container.fg-light .fg-dot-item.fg-selected .fg-dot-link {
2032 border-color: #888;
2033 }
2034 .fg-paging-container.fg-light .fg-dot-item.fg-selected .fg-dot-link:before,
2035 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:hover:before,
2036 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:focus:before {
2037 background-color: #666;
2038 border-color: #888;
2039 }
2040 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link,
2041 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link:hover,
2042 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link:focus {
2043 background-color: #eee;
2044 border-color: #9d9d9d;
2045 opacity: 0.5;
2046 }
2047
2048 /* Dark - Dots */
2049 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link,
2050 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:before {
2051 transition-timing-function: ease-out;
2052 transition-duration: 0.3s;
2053 transition-property: color, border-color, background-color;
2054 }
2055 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link {
2056 background-color: #999;
2057 border-color: #666;
2058 outline-color: #666;
2059 }
2060 .fg-paging-container.fg-dark .fg-dot-item.fg-selected .fg-dot-link {
2061 border-color: #666;
2062 }
2063 .fg-paging-container.fg-dark .fg-dot-item.fg-selected .fg-dot-link:before,
2064 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:hover:before,
2065 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:focus:before {
2066 background-color: #fff;
2067 border-color: #666;
2068 }
2069 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link,
2070 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link:hover,
2071 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link:focus {
2072 background-color: #999;
2073 border-color: #666;
2074 opacity: 0.5;
2075 }
2076 .fg-paging-container, .fg-paging-container *, .fg-paging-container *:before, .fg-paging-container *:after {
2077 box-sizing: border-box;
2078 }
2079 .fg-paging-container {
2080 display: block;
2081 padding: 15px;
2082 margin-top: 0!important;
2083 margin-bottom: 0!important;
2084 margin-left: auto;
2085 margin-right: auto;
2086 text-align: center;
2087 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
2088 -webkit-user-select: none;
2089 -moz-user-select: none;
2090 -ms-user-select: none;
2091 user-select: none;
2092 }
2093 .fg-ph-dots:after {
2094 display: block;
2095 content: '';
2096 width: 0;
2097 height: 22px;
2098 }
2099
2100 .fg-paging-container .fg-dots,
2101 .fg-paging-container .fg-dot-item {
2102 display: inline-block;
2103 margin: 0;
2104 padding: 0;
2105 outline: none;
2106 list-style: none;
2107 }
2108 .fg-paging-container .fg-dot-item .fg-dot-link {
2109 display: inline-block;
2110 margin: 3px;
2111 font-weight: 400;
2112 line-height: 1.4;
2113 text-align: center;
2114 white-space: nowrap;
2115 vertical-align: middle;
2116 cursor: pointer;
2117 user-select: none;
2118 background-image: none;
2119 text-decoration: none;
2120 border: 1px solid transparent;
2121 position: relative;
2122 border-radius: 50%;
2123 padding: 0;
2124 font-size: 0;
2125 outline: none;
2126 color: transparent;
2127 box-shadow: none;
2128 }
2129 .fg-paging-container .fg-dot-item .fg-dot-link:before {
2130 content: "";
2131 background-color: transparent;
2132 border: 1px solid transparent;
2133 display: block;
2134 border-radius: 50%;
2135 width: 9px;
2136 height: 9px;
2137 padding: 0;
2138 margin: 2px;
2139 }
2140 .fg-paging-container .fg-dot-item .fg-dot-link:active,
2141 .fg-paging-container .fg-dot-item .fg-dot-link:hover,
2142 .fg-paging-container .fg-dot-item .fg-dot-link:focus {
2143 text-decoration: none;
2144 box-shadow: none;
2145 outline: none;
2146 }
2147 /*.fg-paging-container .fg-dot-item .fg-dot-link:focus:not(:hover) {*/
2148 /* outline-style: dashed;*/
2149 /* outline-width: 1px ;*/
2150 /* outline-offset: 1px;*/
2151 /*}*/
2152 .fg-paging-container .fg-dot-item.fg-disabled .fg-dot-link,
2153 .fg-paging-container .fg-dot-item.fg-selected .fg-dot-link {
2154 cursor: not-allowed;
2155 pointer-events: none;
2156 }
2157 .fg-paging-container .fg-dot-item.fg-disabled .fg-dot-link {
2158 cursor: not-allowed;
2159 pointer-events: none;
2160 outline: none;
2161 }
2162
2163 /* Light - Dots */
2164 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link,
2165 .fg-paging-container.fg-light .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-light .fg-dot-item .fg-dot-link {
2171 background-color: #eee;
2172 border-color: #9d9d9d;
2173 outline-color: #9d9d9d;
2174 }
2175 .fg-paging-container.fg-light .fg-dot-item.fg-selected .fg-dot-link {
2176 border-color: #888;
2177 }
2178 .fg-paging-container.fg-light .fg-dot-item.fg-selected .fg-dot-link:before,
2179 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:hover:before,
2180 .fg-paging-container.fg-light .fg-dot-item .fg-dot-link:focus:before {
2181 background-color: #666;
2182 border-color: #888;
2183 }
2184 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link,
2185 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link:hover,
2186 .fg-paging-container.fg-light .fg-dot-item.fg-disabled .fg-dot-link:focus {
2187 background-color: #eee;
2188 border-color: #9d9d9d;
2189 opacity: 0.5;
2190 }
2191
2192 /* Dark - Dots */
2193 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link,
2194 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:before {
2195 transition-timing-function: ease-out;
2196 transition-duration: 0.3s;
2197 transition-property: color, border-color, background-color;
2198 }
2199 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link {
2200 background-color: #999;
2201 border-color: #666;
2202 outline-color: #666;
2203 }
2204 .fg-paging-container.fg-dark .fg-dot-item.fg-selected .fg-dot-link {
2205 border-color: #666;
2206 }
2207 .fg-paging-container.fg-dark .fg-dot-item.fg-selected .fg-dot-link:before,
2208 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:hover:before,
2209 .fg-paging-container.fg-dark .fg-dot-item .fg-dot-link:focus:before {
2210 background-color: #fff;
2211 border-color: #666;
2212 }
2213 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link,
2214 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link:hover,
2215 .fg-paging-container.fg-dark .fg-dot-item.fg-disabled .fg-dot-link:focus {
2216 background-color: #999;
2217 border-color: #666;
2218 opacity: 0.5;
2219 }
2220 html.fg-panel-no-scroll {
2221 overflow-x: hidden !important;
2222 overflow-y: scroll !important;
2223 scrollbar-width: none;
2224 }
2225
2226 html.fg-panel-no-scroll::-webkit-scrollbar {
2227 width: 0;
2228 height: 0;
2229 }
2230
2231 [class^="fg-panel-"], [class*=" fg-panel-"] {
2232 box-sizing: border-box;
2233 }
2234
2235 .fg-panel {
2236 position: relative;
2237 width: 100%;
2238 height: 100%;
2239 max-width: 100%;
2240 max-height: 100%;
2241 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
2242 text-align: left;
2243 overflow: hidden;
2244 outline: none;
2245 box-sizing: content-box;
2246 }
2247 body.rtl .fg-panel {
2248 text-align: right;
2249 }
2250 .fg-panel-maximized {
2251 position: fixed;
2252 top: 0;
2253 left: 0;
2254 z-index: 999999;
2255 }
2256 .fg-no-transitions {
2257 transition: none!important;
2258 }
2259 .fg-panel-buttons {
2260 z-index: 1;
2261 }
2262
2263 /* Loader Styles */
2264 .fg-panel .fg-loader {
2265 position: absolute;
2266 top: 50%;
2267 left: 50%;
2268 transform: translateX(-50%) translateY(-50%);
2269 font-size: 5px;
2270 visibility: hidden;
2271 opacity: 0;
2272 pointer-events: none;
2273 }
2274
2275 .fg-panel .fg-loading .fg-loader {
2276 visibility: visible;
2277 opacity: 1;
2278 }
2279
2280 /* CSS Grid Layout */
2281 .fg-panel {
2282 display: grid;
2283 grid-template-columns: min-content min-content minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) min-content min-content;
2284 grid-template-rows: min-content min-content minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) min-content min-content;
2285 }
2286 .fg-panel.fg-portrait.fg-panel-buttons-top:not(.fg-medium, .fg-panel-no-mobile) {
2287 grid-template-rows: min-content min-content minmax(37px, max-content) minmax(0, 1fr) minmax(0, max-content) min-content min-content;
2288 }
2289 .fg-panel.fg-portrait.fg-panel-buttons-bottom:not(.fg-medium, .fg-panel-no-mobile) {
2290 grid-template-rows: min-content min-content minmax(0, max-content) minmax(0, 1fr) minmax(37px, max-content) min-content min-content;
2291 }
2292 .fg-panel.fg-landscape.fg-panel-buttons-left:not(.fg-medium, .fg-panel-no-mobile) {
2293 grid-template-columns: min-content min-content minmax(37px, max-content) minmax(0, 1fr) minmax(0, max-content) min-content min-content;
2294 }
2295 .fg-panel.fg-landscape.fg-panel-buttons-right:not(.fg-medium, .fg-panel-no-mobile) {
2296 grid-template-columns: min-content min-content minmax(0, max-content) minmax(0, 1fr) minmax(37px, max-content) min-content min-content;
2297 }
2298 /* Content Area */
2299 .fg-panel-content {
2300 grid-column: 3 / 6;
2301 grid-row: 3 / 6;
2302 }
2303
2304 /* Info Area */
2305 .fg-panel-info {
2306 grid-column: 3 / 6;
2307 grid-row: 3 / 6;
2308 display: none;
2309 }
2310 /* By default collapse and overlay the caption along the bottom on small screens */
2311 .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 {
2312 grid-row: 4 / 6;
2313 }
2314 .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 {
2315 grid-row: 3 / 5;
2316 }
2317 .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 {
2318 grid-column: 3 / 5;
2319 }
2320 .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 {
2321 grid-column: 4 / 6;
2322 }
2323 /* Only show the caption if a position is set */
2324 .fg-panel-info-visible:is(.fg-panel-info-top, .fg-panel-info-right, .fg-panel-info-bottom, .fg-panel-info-left) .fg-panel-info {
2325 display: block;
2326 }
2327 .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 {
2328 display: flex;
2329 flex-direction: column-reverse;
2330 }
2331 .fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2332 grid-row: 2 / 3;
2333 }
2334 .fg-panel-info-bottom:not(.fg-panel-info-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2335 grid-row: 6 / 7;
2336 }
2337 .fg-panel-info-left:not(.fg-panel-info-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2338 grid-column: 2 / 3;
2339 grid-row: 2 / 7;
2340 }
2341 .fg-panel-info-right:not(.fg-panel-info-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2342 grid-column: 6 / 7;
2343 grid-row: 2 / 7;
2344 }
2345 /* Caption Overlay */
2346 .fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2347 grid-column: 4 / 5;
2348 grid-row: 3 / 4;
2349 }
2350 .fg-panel-info-bottom.fg-panel-info-overlay:is(.fg-medium, .fg-panel-no-mobile) .fg-panel-info {
2351 grid-column: 4 / 5;
2352 grid-row: 5 / 6;
2353 }
2354 .fg-panel-info-right.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info {
2355 grid-column: 5 / 6;
2356 grid-row: 3 / 6;
2357 }
2358 .fg-panel-info-left.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info {
2359 grid-column: 3 / 4;
2360 grid-row: 3 / 6;
2361 }
2362
2363
2364 /* Cart Area */
2365 .fg-panel-cart {
2366 grid-column: 3 / 6;
2367 grid-row: 3 / 6;
2368 display: none;
2369 }
2370 /* By default collapse and overlay the cart along the bottom on small screens */
2371 .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 {
2372 grid-row: 4 / 6;
2373 }
2374 .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 {
2375 grid-row: 3 / 5;
2376 }
2377 .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 {
2378 grid-column: 3 / 5;
2379 }
2380 .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 {
2381 grid-column: 4 / 6;
2382 }
2383 /* Only show the cart if a position is set */
2384 .fg-panel-cart-visible:is(.fg-panel-cart-top, .fg-panel-cart-right, .fg-panel-cart-bottom, .fg-panel-cart-left) .fg-panel-cart {
2385 display: flex;
2386 }
2387 .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 {
2388 flex-direction: column-reverse;
2389 }
2390 .fg-panel-cart-top:not(.fg-panel-cart-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2391 grid-row: 2 / 3;
2392 }
2393 .fg-panel-cart-bottom:not(.fg-panel-cart-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2394 grid-row: 6 / 7;
2395 }
2396 .fg-panel-cart-left:not(.fg-panel-cart-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2397 grid-column: 2 / 3;
2398 grid-row: 2 / 7;
2399 }
2400 .fg-panel-cart-right:not(.fg-panel-cart-overlay):is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2401 grid-column: 6 / 7;
2402 grid-row: 2 / 7;
2403 }
2404 /* Cart Overlay */
2405 .fg-panel-cart-top.fg-panel-cart-overlay:is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2406 grid-column: 4 / 5;
2407 grid-row: 3 / 4;
2408 }
2409 .fg-panel-cart-bottom.fg-panel-cart-overlay:is(.fg-medium, .fg-panel-no-mobile) .fg-panel-cart {
2410 grid-column: 4 / 5;
2411 grid-row: 5 / 6;
2412 }
2413 .fg-panel-cart-right.fg-panel-cart-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart {
2414 grid-column: 5 / 6;
2415 grid-row: 3 / 6;
2416 }
2417 .fg-panel-cart-left.fg-panel-cart-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart {
2418 grid-column: 3 / 4;
2419 grid-row: 3 / 6;
2420 }
2421
2422
2423
2424 /* Thumbs Area */
2425 .fg-panel-thumbs {
2426 grid-column: 1 / 8;
2427 grid-row: 1 / 8;
2428 display: none;
2429 }
2430 .fg-panel-thumbs-visible:is(.fg-panel-thumbs-top, .fg-panel-thumbs-right, .fg-panel-thumbs-bottom, .fg-panel-thumbs-left) .fg-panel-thumbs {
2431 display: block;
2432 }
2433 .fg-panel-thumbs-top .fg-panel-thumbs {
2434 grid-row: 1 / 2;
2435 }
2436 .fg-panel-thumbs-bottom .fg-panel-thumbs {
2437 grid-row: 7 / 8;
2438 }
2439 .fg-panel-thumbs-left .fg-panel-thumbs {
2440 grid-column: 1 / 2;
2441 }
2442 .fg-panel-thumbs-right .fg-panel-thumbs {
2443 grid-column: 7 / 8;
2444 }
2445
2446 .fg-panel-content,
2447 .fg-panel-info,
2448 .fg-panel-cart,
2449 .fg-panel-thumbs,
2450 .fg-panel-content-inner,
2451 .fg-panel-info-inner,
2452 .fg-panel-cart-inner,
2453 .fg-panel-thumbs-inner {
2454 position: relative;
2455 }
2456 .fg-panel-content,
2457 .fg-panel-info,
2458 .fg-panel-cart,
2459 .fg-panel-thumbs {
2460 pointer-events: none;
2461 }
2462 .fg-panel-content-inner,
2463 .fg-panel-info-inner,
2464 .fg-panel-cart-inner,
2465 .fg-panel-thumbs-inner {
2466 pointer-events: auto;
2467 }
2468 .fg-panel-info-inner,
2469 .fg-panel-cart-inner,
2470 .fg-panel-thumbs-inner {
2471 z-index: 2;
2472 }
2473
2474 .fg-panel-content {
2475 display: flex;
2476 flex-direction: column-reverse;
2477 }
2478 .fg-landscape .fg-panel-content {
2479 flex-direction: row;
2480 }
2481 .fg-portrait.fg-panel-buttons-top .fg-panel-content {
2482 flex-direction: column-reverse;
2483 }
2484 .fg-portrait.fg-panel-buttons-bottom .fg-panel-content {
2485 flex-direction: column;
2486 }
2487 .fg-landscape.fg-panel-buttons-right .fg-panel-content {
2488 flex-direction: row;
2489 }
2490 .fg-landscape.fg-panel-buttons-left .fg-panel-content {
2491 flex-direction: row-reverse;
2492 }
2493
2494 .fg-panel .fg-panel-content-buttons {
2495 position: relative;
2496 width: 100%;
2497 height: 100%;
2498 display: flex;
2499 flex-direction: column-reverse;
2500 justify-content: flex-end;
2501 align-items: stretch;
2502 pointer-events: none;
2503 z-index: 3;
2504 }
2505 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-content-buttons {
2506 position: absolute;
2507 top: 0;
2508 left: 0;
2509 }
2510 .fg-portrait:is(.fg-panel-buttons-top,.fg-panel-buttons-bottom):not(.fg-medium,.fg-panel-no-mobile) .fg-panel-content-buttons {
2511 height: 37px;
2512 }
2513 .fg-landscape:is(.fg-panel-buttons-right,.fg-panel-buttons-left):not(.fg-medium,.fg-panel-no-mobile) .fg-panel-content-buttons {
2514 width: 37px;
2515 }
2516 .fg-portrait.fg-panel-buttons-top:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2517 align-self: flex-start;
2518 }
2519 .fg-portrait.fg-panel-buttons-bottom:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2520 align-self: flex-end;
2521 }
2522 .fg-landscape.fg-panel-buttons-right:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2523 justify-self: flex-end;
2524 }
2525 .fg-landscape.fg-panel-buttons-left:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2526 justify-self: flex-start;
2527 }
2528
2529
2530 .fg-panel-content-inner,
2531 .fg-panel-thumbs-inner {
2532 display: flex;
2533 overflow: hidden;
2534 flex: 1;
2535 }
2536
2537 .fg-panel-info-inner,
2538 .fg-panel-cart-inner {
2539 z-index: 2;
2540 max-width: 100%;
2541 max-height: 100%;
2542 }
2543 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-info-inner,.fg-panel-cart-inner) {
2544 width: 100%;
2545 height: 100%;
2546 }
2547
2548 .fg-panel:is(.fg-medium,.fg-panel-no-mobile):is(.fg-panel-info-top,.fg-panel-info-bottom) .fg-panel-info-inner,
2549 .fg-panel:is(.fg-medium,.fg-panel-no-mobile):is(.fg-panel-cart-top,.fg-panel-cart-bottom) .fg-panel-cart-inner {
2550 height: fit-content;
2551 }
2552
2553 /* Sizing of the side content and thumbs */
2554 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumb,
2555 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumbs-inner {
2556 height: 70px;
2557 min-height: 70px;
2558 }
2559 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2560 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2561 width: 100px;
2562 min-width: 100px;
2563 }
2564 .fg-panel-thumbs-small:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2565 .fg-panel-thumbs-small:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2566 width: 70px;
2567 min-width: 70px;
2568 }
2569 .fg-medium:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumb,
2570 .fg-medium:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumbs-inner {
2571 height: 82px;
2572 min-height: 82px;
2573 }
2574 .fg-medium:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2575 .fg-medium:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2576 width: 118px;
2577 min-width: 118px;
2578 }
2579 .fg-x-large-width:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2580 .fg-x-large-width:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2581 width: 138px;
2582 min-width: 138px;
2583 }
2584 .fg-medium.fg-panel-thumbs-small:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2585 .fg-medium.fg-panel-thumbs-small:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner,
2586 .fg-x-large-width.fg-panel-thumbs-small:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
2587 .fg-x-large-width.fg-panel-thumbs-small:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-inner {
2588 width: 82px;
2589 min-width: 82px;
2590 }
2591 .fg-medium:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom):not(.fg-panel-thumbs-no-captions) .fg-panel-thumb,
2592 .fg-medium:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-inner {
2593 width: 240px;
2594 min-width: 240px;
2595 }
2596 .fg-medium.fg-large-width:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom):not(.fg-panel-thumbs-no-captions) .fg-panel-thumb,
2597 .fg-medium.fg-large-width:is(.fg-panel-thumbs-left,.fg-panel-thumbs-right):not(.fg-panel-thumbs-no-captions) .fg-panel-thumbs-inner {
2598 width: 280px;
2599 min-width: 280px;
2600 }
2601 :is(.fg-medium,.fg-panel-no-mobile):is(.fg-panel-info-left,.fg-panel-info-right) .fg-panel-info-inner,
2602 :is(.fg-medium,.fg-panel-no-mobile):is(.fg-panel-cart-left,.fg-panel-cart-right) .fg-panel-cart-inner,
2603 .fg-medium.fg-x-large-width:is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom):not(.fg-panel-thumbs-no-captions) .fg-panel-thumb,
2604 .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 {
2605 width: 360px;
2606 min-width: 360px;
2607 }
2608 .fg-medium.fg-x-large-width:is(.fg-panel-info-left,.fg-panel-info-right) .fg-panel-info-inner,
2609 .fg-medium.fg-x-large-width:is(.fg-panel-cart-left,.fg-panel-cart-right) .fg-panel-cart-inner {
2610 width: 402px;
2611 min-width: 402px;
2612 }
2613 .fg-panel-buttons {
2614 grid-column: 3 / 6;
2615 grid-row: 3 / 6;
2616 position: relative;
2617 width: 100%;
2618 height: 100%;
2619 display: flex;
2620 flex-direction: column;
2621 justify-content: flex-end;
2622 align-items: stretch;
2623 pointer-events: none;
2624 z-index: 3;
2625 }
2626 .fg-portrait:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2627 flex-direction: row-reverse;
2628 height: 37px;
2629 }
2630 .fg-landscape:not(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2631 flex-direction: column;
2632 width: 37px;
2633 }
2634 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2635 grid-column: 2 / 7;
2636 grid-row: 2 / 7;
2637 flex-direction: column;
2638 align-items: flex-end;
2639 justify-content: flex-start;
2640 }
2641 body.rtl .fg-panel:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-buttons {
2642 align-items: flex-start;
2643 }
2644
2645 /* Mini reset to override certain WP themes */
2646 .fg-panel .fg-panel-button,
2647 .fg-panel .fg-panel-area-toggle,
2648 .fg-panel .fg-panel-thumbs-button {
2649 background: none;
2650 border-radius: 0;
2651 }
2652
2653 .fg-panel-button:is(button,a) {
2654 box-sizing: border-box;
2655 position: relative;
2656 width: 100%;
2657 height: 100%;
2658 cursor: pointer;
2659 overflow: hidden;
2660 pointer-events: auto;
2661 user-select: none;
2662 -webkit-tap-highlight-color: unset;
2663 border-style: solid;
2664 border-width: 0;
2665 box-shadow: none;
2666 outline: none;
2667 padding: 1px 6px;
2668 letter-spacing: normal;
2669 word-spacing: normal;
2670 text-transform: none;
2671 text-indent: 0;
2672 text-shadow: none;
2673 display: inline-block;
2674 text-align: center;
2675 align-items: flex-start;
2676 text-decoration: none;
2677 min-width: unset;
2678 transition: none;
2679 }
2680 .fg-panel-button.fg-disabled {
2681 pointer-events: none;
2682 opacity: 0.7;
2683 }
2684 .fg-panel-button.fg-hidden {
2685 display: none!important;
2686 }
2687 .fg-panel-button.fg-loading {
2688 color: transparent!important;
2689 }
2690 .fg-panel-button.fg-loading:after {
2691 content: '';
2692 display: block;
2693 position: absolute;
2694 top: 50%;
2695 left: 50%;
2696 margin-top: -.5em;
2697 margin-left: -.5em;
2698 width: 1em;
2699 height: 1em;
2700 font-size: 0.3em;
2701 pointer-events: none;
2702 border-radius: 50%;
2703 text-indent: -9999em;
2704 box-shadow: 0 -2.6em 0 0 rgba(130, 130, 130, 1),
2705 1.8em -1.8em 0 0 rgba(130, 130, 130, 0.2),
2706 2.5em 0 0 0 rgba(130, 130, 130, 0.2),
2707 1.75em 1.75em 0 0 rgba(130, 130, 130, 0.2),
2708 0 2.5em 0 0 rgba(130, 130, 130, 0.2),
2709 -1.8em 1.8em 0 0 rgba(130, 130, 130, 0.2),
2710 -2.6em 0 0 0 rgba(130, 130, 130, 0.5),
2711 -1.8em -1.8em 0 0 rgba(130, 130, 130, 0.7);
2712 -webkit-animation: button-loading 1.1s infinite steps(8, start);
2713 animation: button-loading 1.1s infinite steps(8, start);
2714 }
2715 .fg-panel.fg-button-blue .fg-panel-button.fg-loading:after,
2716 .fg-panel.fg-button-dark .fg-panel-button.fg-loading:after,
2717 .fg-panel.fg-button-green .fg-panel-button.fg-loading:after,
2718 .fg-panel.fg-button-purple .fg-panel-button.fg-loading:after,
2719 .fg-panel.fg-button-orange .fg-panel-button.fg-loading:after,
2720 .fg-panel.fg-button-red .fg-panel-button.fg-loading:after {
2721 box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 1),
2722 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2723 2.5em 0 0 0 rgba(255, 255, 255, 0.2),
2724 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
2725 0 2.5em 0 0 rgba(255, 255, 255, 0.2),
2726 -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
2727 -2.6em 0 0 0 rgba(255, 255, 255, 0.5),
2728 -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
2729 }
2730
2731 @-webkit-keyframes button-loading {
2732 0% {
2733 transform: rotate(0deg);
2734 }
2735 100% {
2736 transform: rotate(360deg);
2737 }
2738 }
2739
2740 @keyframes button-loading {
2741 0% {
2742 transform: rotate(0deg);
2743 }
2744 100% {
2745 transform: rotate(360deg);
2746 }
2747 }
2748
2749 .fg-panel.fg-portrait.fg-panel-buttons-top .fg-panel-buttons .fg-panel-button {
2750 border-bottom-width: 1px;
2751 }
2752 .fg-panel.fg-portrait.fg-panel-buttons-bottom .fg-panel-buttons .fg-panel-button {
2753 border-top-width: 1px;
2754 }
2755 .fg-panel.fg-portrait:is(.fg-panel-buttons-top,.fg-panel-buttons-bottom) .fg-panel-buttons .fg-panel-button {
2756 border-left-width: 1px;
2757 }
2758 .fg-panel.fg-portrait:is(.fg-panel-buttons-top,.fg-panel-buttons-bottom) .fg-panel-buttons .fg-panel-button:last-child {
2759 border-left-width: 0;
2760 }
2761
2762 .fg-panel.fg-landscape.fg-panel-buttons-right .fg-panel-buttons .fg-panel-button {
2763 border-left-width: 1px;
2764 }
2765 .fg-panel.fg-landscape.fg-panel-buttons-left .fg-panel-buttons .fg-panel-button {
2766 border-right-width: 1px;
2767 }
2768 .fg-panel.fg-landscape:is(.fg-panel-buttons-left,.fg-panel-buttons-right) .fg-panel-buttons .fg-panel-button {
2769 border-bottom-width: 1px;
2770 }
2771 .fg-panel.fg-landscape:is(.fg-panel-buttons-left,.fg-panel-buttons-right) .fg-panel-buttons .fg-panel-button:last-child {
2772 border-bottom-width: 0;
2773 }
2774
2775 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button {
2776 border-radius: 3px;
2777 border-width: 1px;
2778 width: 32px;
2779 height: 32px;
2780 margin: 5px 5px 0 0;
2781 }
2782 body.rtl .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button {
2783 margin: 5px 0 0 5px;
2784 }
2785
2786 .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) {
2787 position: absolute;
2788 top: 50%;
2789 transform: translateY(-50%);
2790 width: 32px;
2791 height: 82px;
2792 margin: unset !important;
2793 }
2794 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button-prev {
2795 left: 5px;
2796 }
2797 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button-next {
2798 right: 5px;
2799 }
2800 body.rtl .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button-prev {
2801 right: 5px;
2802 left: auto;
2803 }
2804 body.rtl .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-buttons,.fg-panel-content-buttons) .fg-panel-button-next {
2805 left: 5px;
2806 right: auto;
2807 }
2808
2809 /* Hover buttons */
2810 @media (hover: hover) {
2811 :is(.fg-medium,.fg-panel-no-mobile).fg-panel-hover-buttons .fg-panel-button {
2812 visibility: hidden;
2813 opacity: 0;
2814 }
2815 :is(.fg-medium,.fg-panel-no-mobile).fg-panel-hover-buttons:hover .fg-panel-button:not(.fg-disabled) {
2816 visibility: visible;
2817 opacity: 0.5;
2818 }
2819 :is(.fg-medium,.fg-panel-no-mobile).fg-panel-hover-buttons .fg-panel-button:not(.fg-disabled):hover {
2820 opacity: 1;
2821 }
2822 }
2823
2824 .fg-panel-area .fg-panel-area-toggle {
2825 position: absolute;
2826 top: 5px;
2827 right: 5px;
2828 z-index: 1;
2829 width: 32px;
2830 height: 32px;
2831 cursor: pointer;
2832 overflow: hidden;
2833 pointer-events: auto;
2834 user-select: none;
2835 -webkit-tap-highlight-color: unset;
2836 background-color: transparent;
2837 box-shadow: none;
2838 outline: none;
2839 border: none;
2840 }
2841 .fg-panel-area-toggle+.fg-panel-caption .fg-panel-caption-title {
2842 margin-right: 32px;
2843 line-height: 27px;
2844 margin-bottom: 5px;
2845 }
2846 .fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info .fg-panel-area-toggle {
2847 right: 42px;
2848 }
2849 body.rtl .fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info .fg-panel-area-toggle {
2850 left: 42px;
2851 right: auto;
2852 }
2853
2854
2855 /* icons */
2856 .fg-panel-button .fg-icon,
2857 .fg-panel-area-toggle .fg-icon {
2858 display: block;
2859 margin: 0;
2860 padding: 0;
2861 position: absolute;
2862 top: 50%;
2863 left: 50%;
2864 transform: translateX(-50%) translateY(-50%);
2865 }
2866 .fg-panel-button.fg-disabled .fg-icon,
2867 .fg-panel-area-toggle.fg-disabled .fg-icon {
2868 opacity: 0.3;
2869 }
2870 .fg-panel-fullscreen .fg-panel-button-fullscreen .fg-icon-expand,
2871 .fg-panel-button-fullscreen .fg-icon-shrink {
2872 display: none;
2873 }
2874 .fg-panel-fullscreen .fg-panel-button-fullscreen .fg-icon-shrink {
2875 display: block;
2876 }
2877
2878 .fg-panel-thumbs-top .fg-panel-button-thumbs .fg-icon {
2879 transform: translateX(-50%) translateY(-50%) rotate(90deg);
2880 }
2881 .fg-panel-thumbs-right .fg-panel-button-thumbs .fg-icon {
2882 transform: translateX(-50%) translateY(-50%) rotate(180deg);
2883 }
2884 .fg-panel-thumbs-bottom .fg-panel-button-thumbs .fg-icon {
2885 transform: translateX(-50%) translateY(-50%) rotate(-90deg);
2886 }
2887 body.rtl .fg-panel-button-prev .fg-icon,
2888 body.rtl .fg-panel-button-next .fg-icon {
2889 transform: translateX(-50%) translateY(-50%) rotate(180deg);
2890 }
2891 .fg-panel:not(.fg-panel-maximized):not(.fg-panel-fullscreen) {
2892 border-style: solid;
2893 border-width: 1px;
2894 }
2895 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) :is(.fg-panel-info-inner,.fg-panel-cart-inner) {
2896 border-width: 0;
2897 border-style: solid;
2898 }
2899 .fg-panel.fg-panel-info-top:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2900 border-bottom-width: 1px;
2901 }
2902 .fg-panel.fg-panel-info-bottom:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2903 border-top-width: 1px;
2904 }
2905
2906 /* Normal layout, buttons top right */
2907 body:not(.rtl) .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):not(
2908 .fg-panel-comments-right.fg-panel-comments-visible:not(.fg-panel-comments-overlay),
2909 .fg-panel-cart-right.fg-panel-cart-visible:not(.fg-panel-cart-overlay)
2910 ) .fg-panel-info-inner,
2911 body:not(.rtl) .fg-panel.fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile):not(
2912 .fg-panel-comments-right.fg-panel-comments-visible,
2913 .fg-panel-cart-right.fg-panel-cart-visible
2914 ) .fg-panel-info-inner {
2915 border-right-width: 42px;
2916 }
2917 body:not(.rtl) .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):not(
2918 .fg-panel-comments-right.fg-panel-comments-visible:not(.fg-panel-comments-overlay),
2919 .fg-panel-cart-right.fg-panel-cart-visible:not(.fg-panel-cart-overlay)
2920 ) .fg-media-caption,
2921 body:not(.rtl) .fg-panel.fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile):not(
2922 .fg-panel-comments-right.fg-panel-comments-visible,
2923 .fg-panel-cart-right.fg-panel-cart-visible
2924 ) .fg-media-caption {
2925 padding-right: 0;
2926 }
2927 body:not(.rtl) .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):is(
2928 .fg-panel-comments-left.fg-panel-comments-overlay.fg-panel-comments-visible,
2929 .fg-panel-cart-left.fg-panel-cart-overlay.fg-panel-cart-visible
2930 ) .fg-panel-info-inner {
2931 border-left-width: 42px;
2932 }
2933 body:not(.rtl) .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):is(
2934 .fg-panel-comments-left.fg-panel-comments-overlay.fg-panel-comments-visible,
2935 .fg-panel-cart-left.fg-panel-cart-overlay.fg-panel-cart-visible
2936 ) .fg-media-caption {
2937 padding-left: 0;
2938 }
2939
2940 /* RTL layout, buttons top left */
2941 body.rtl .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):not(
2942 .fg-panel-comments-left.fg-panel-comments-visible:not(.fg-panel-comments-overlay),
2943 .fg-panel-cart-left.fg-panel-cart-visible:not(.fg-panel-cart-overlay)
2944 ) .fg-panel-info-inner,
2945 body.rtl .fg-panel.fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile):not(
2946 .fg-panel-comments-left.fg-panel-comments-visible,
2947 .fg-panel-cart-left.fg-panel-cart-visible
2948 ) .fg-panel-info-inner {
2949 border-left-width: 42px;
2950 }
2951 body.rtl .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):not(
2952 .fg-panel-comments-left.fg-panel-comments-visible:not(.fg-panel-comments-overlay),
2953 .fg-panel-cart-left.fg-panel-cart-visible:not(.fg-panel-cart-overlay)
2954 ) .fg-media-caption,
2955 body.rtl .fg-panel.fg-panel-info-top.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile):not(
2956 .fg-panel-comments-left.fg-panel-comments-visible,
2957 .fg-panel-cart-left.fg-panel-cart-visible
2958 ) .fg-media-caption {
2959 padding-left: 0;
2960 }
2961 body.rtl .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):is(
2962 .fg-panel-comments-right.fg-panel-comments-overlay.fg-panel-comments-visible,
2963 .fg-panel-cart-right.fg-panel-cart-overlay.fg-panel-cart-visible
2964 ) .fg-panel-info-inner {
2965 border-right-width: 42px;
2966 }
2967 body.rtl .fg-panel.fg-panel-info-top:not(.fg-panel-info-overlay):is(.fg-medium,.fg-panel-no-mobile):is(
2968 .fg-panel-comments-right.fg-panel-comments-overlay.fg-panel-comments-visible,
2969 .fg-panel-cart-right.fg-panel-cart-overlay.fg-panel-cart-visible
2970 ) .fg-media-caption {
2971 padding-left: 0;
2972 }
2973
2974 .fg-panel.fg-panel-info-right:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2975 border-left-width: 1px;
2976 }
2977 .fg-panel.fg-panel-info-left:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2978 border-right-width: 1px;
2979 }
2980 body:not(.rtl) .fg-panel.fg-panel-info-right:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner,
2981 .fg-panel.fg-panel-info-right.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2982 border-right-width: 42px;
2983 }
2984 body.rtl .fg-panel.fg-panel-info-left:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner,
2985 .fg-panel.fg-panel-info-left.fg-panel-info-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-info-inner {
2986 border-left-width: 42px;
2987 }
2988
2989 .fg-panel.fg-panel-cart-top:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2990 border-bottom-width: 1px;
2991 }
2992 .fg-panel.fg-panel-cart-bottom:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2993 border-top-width: 1px;
2994 }
2995 .fg-panel.fg-panel-cart-right:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2996 border-left-width: 1px;
2997 }
2998 .fg-panel.fg-panel-cart-left:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
2999 border-right-width: 1px;
3000 }
3001 body:not(.rtl) .fg-panel.fg-panel-cart-right:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner,
3002 .fg-panel.fg-panel-cart-right.fg-panel-cart-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
3003 border-right-width: 42px;
3004 }
3005 body.rtl .fg-panel.fg-panel-cart-left:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner,
3006 .fg-panel.fg-panel-cart-left.fg-panel-cart-overlay:is(.fg-medium,.fg-panel-no-mobile) .fg-panel-cart-inner {
3007 border-left-width: 42px;
3008 }
3009
3010 .fg-panel-thumb,
3011 .fg-panel-thumb-spacer,
3012 .fg-panel-thumbs-inner,
3013 .fg-panel-thumbs-button {
3014 border-width: 0;
3015 border-style: solid;
3016 }
3017 .fg-panel-thumbs-right :is(.fg-panel-thumb,.fg-panel-thumb-spacer,.fg-panel-thumbs-button),
3018 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumb,
3019 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumbs-next {
3020 border-left-width: 1px;
3021 }
3022 .fg-panel-thumbs-bottom :is(.fg-panel-thumb,.fg-panel-thumb-spacer,.fg-panel-thumbs-button),
3023 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumb,
3024 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-next,
3025
3026 .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,
3027 .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,
3028 .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,
3029 .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,
3030
3031 .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,
3032 .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,
3033 .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,
3034 .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 {
3035 border-top-width: 1px;
3036 }
3037 .fg-panel-thumbs-left :is(.fg-panel-thumb,.fg-panel-thumb-spacer,.fg-panel-thumbs-button),
3038 :is(.fg-panel-thumbs-top,.fg-panel-thumbs-bottom) .fg-panel-thumbs-prev {
3039 border-right-width: 1px;
3040 }
3041 .fg-panel-thumbs-top :is(.fg-panel-thumb,.fg-panel-thumb-spacer,.fg-panel-thumbs-button),
3042 :is(.fg-panel-thumbs-left,.fg-panel-thumbs-right) .fg-panel-thumbs-prev {
3043 border-bottom-width: 1px;
3044 }
3045
3046 /* Icon & Overlay */
3047 .fg-panel .fg-panel-thumb-overlay {
3048 display: block;
3049 position: absolute;
3050 visibility: hidden;
3051 opacity: 0;
3052 top: 0;
3053 bottom: 0;
3054 left: 0;
3055 right: 0;
3056 z-index: 8;
3057 background: rgba(0,0,0,0.5) no-repeat center center;
3058 transition-duration: .1s;
3059 transition-timing-function: ease-in-out;
3060 transition-property: opacity, visibility;
3061 }
3062
3063 .fg-panel .fg-panel-thumb-overlay:before {
3064 content: "";
3065 display: block;
3066 position: absolute;
3067 top: 50%;
3068 left: 50%;
3069 transform: translateX(-50%) translateY(-50%);
3070 width: 32px;
3071 height: 32px;
3072 background-position: center center;
3073 background-repeat: no-repeat;
3074 }
3075
3076 .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,
3077 .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 {
3078 visibility: visible;
3079 opacity: 1;
3080 }
3081 .fg-panel.fg-video-sticky .fg-panel-thumb.fg-type-video.fg-loaded .fg-panel-thumb-overlay {
3082 background-color: transparent;
3083 visibility: visible;
3084 opacity: 1;
3085 }
3086
3087 .fg-panel.fg-hover-zoom .fg-panel-thumb-overlay:before {
3088 background-image: url('../img/icons.svg#zoom-light');
3089 }
3090
3091 .fg-panel.fg-hover-zoom2 .fg-panel-thumb-overlay:before {
3092 background-image: url('../img/icons.svg#zoom2-light');
3093 }
3094
3095 .fg-panel.fg-hover-zoom3 .fg-panel-thumb-overlay:before {
3096 background-image: url('../img/icons.svg#zoom3-light');
3097 }
3098
3099 .fg-panel.fg-hover-zoom4 .fg-panel-thumb-overlay:before {
3100 background-image: url('../img/icons.svg#zoom4-light');
3101 }
3102
3103 .fg-panel.fg-hover-zoom5 .fg-panel-thumb-overlay:before {
3104 background-image: url('../img/icons.svg#zoom5-light');
3105 }
3106
3107 .fg-panel.fg-hover-plus .fg-panel-thumb-overlay:before {
3108 background-image: url('../img/icons.svg#plus-light');
3109 }
3110
3111 .fg-panel.fg-hover-plus2 .fg-panel-thumb-overlay:before {
3112 background-image: url('../img/icons.svg#plus2-light');
3113 }
3114
3115 .fg-panel.fg-hover-plus3 .fg-panel-thumb-overlay:before {
3116 background-image: url('../img/icons.svg#plus3-light');
3117 }
3118
3119 .fg-panel.fg-hover-circle-plus .fg-panel-thumb-overlay:before {
3120 background-image: url('../img/icons.svg#circle-plus-light');
3121 }
3122
3123 .fg-panel.fg-hover-circle-plus2 .fg-panel-thumb-overlay:before {
3124 background-image: url('../img/icons.svg#circle-plus2-light');
3125 }
3126
3127 .fg-panel.fg-hover-square-plus .fg-panel-thumb-overlay:before {
3128 background-image: url('../img/icons.svg#square-plus-light');
3129 }
3130
3131 .fg-panel.fg-hover-eye .fg-panel-thumb-overlay:before {
3132 background-image: url('../img/icons.svg#eye-light');
3133 }
3134
3135 .fg-panel.fg-hover-external .fg-panel-thumb-overlay:before {
3136 background-image: url('../img/icons.svg#external-light');
3137 }
3138
3139 .fg-panel.fg-video-default .fg-type-video .fg-panel-thumb-overlay:before {
3140 background-image: url('../img/icons.svg#video-default-light');
3141 }
3142
3143 .fg-panel.fg-video-1 .fg-type-video .fg-panel-thumb-overlay:before {
3144 background-image: url('../img/icons.svg#video-1-light');
3145 }
3146
3147 .fg-panel.fg-video-2 .fg-type-video .fg-panel-thumb-overlay:before {
3148 background-image: url('../img/icons.svg#video-2-light');
3149 }
3150
3151 .fg-panel.fg-video-3 .fg-type-video .fg-panel-thumb-overlay:before {
3152 background-image: url('../img/icons.svg#video-3-light');
3153 }
3154
3155 .fg-panel.fg-video-4 .fg-type-video .fg-panel-thumb-overlay:before {
3156 background-image: url('../img/icons.svg#video-4-light');
3157 }
3158
3159 /* Media CSS */
3160 .fg-media {
3161 display: block;
3162 position: absolute;
3163 top: 0;
3164 left: 0;
3165 width: 100%;
3166 height: 100%;
3167 pointer-events: auto;
3168 overflow: hidden;
3169 }
3170 .fg-panel:is(.fg-medium,.fg-panel-no-mobile) .fg-media {
3171 top: 0;
3172 left: 0;
3173 width: 100%;
3174 height: 100%;
3175 }
3176 .fg-panel.fg-panel-preserve-button-space:is(.fg-medium,.fg-panel-no-mobile) .fg-media {
3177 top: 5px;
3178 left: 42px;
3179 width: calc(100% - 84px);
3180 height: calc(100% - 10px);
3181 }
3182 .fg-media .fg-loader {
3183 font-size: 10px;
3184 }
3185 .fg-media.fg-loading .fg-loader {
3186 transition-delay: 100ms;
3187 }
3188 .fg-media:not(.fg-media-html) {
3189 /*-webkit-touch-callout: none; !* iOS Safari - Disables Save Image As *!*/
3190 -webkit-user-select: none; /* Safari */
3191 -moz-user-select: none; /* Old versions of Firefox */
3192 -ms-user-select: none; /* Internet Explorer/Edge */
3193 user-select: none;
3194 }
3195
3196 .fg-media-content {
3197 display: inline-block;
3198 position: absolute;
3199 top: 50%;
3200 left: 50%;
3201 transform: translateX(-50%) translateY(-50%);
3202 max-width: 100%;
3203 max-height: 100%;
3204 visibility: hidden;
3205 opacity: 0;
3206 }
3207 .fg-media.fg-loaded .fg-media-content {
3208 visibility: visible;
3209 opacity: 1;
3210 }
3211 .fg-media-image .fg-media-content {
3212 height: auto;
3213 }
3214 .fg-panel-fit-media .fg-media-image .fg-media-full-width {
3215 width: 100%;
3216 max-height: unset;
3217 }
3218 .fg-panel-fit-media .fg-media-image .fg-media-full-height {
3219 height: 100%;
3220 max-width: unset;
3221 }
3222 :is(.fg-media-iframe,.fg-media-video) .fg-media-content {
3223 width: 100%;
3224 height: 100%;
3225 }
3226 .fg-panel-fit-media :is(.fg-media-iframe,.fg-media-video) .fg-media-content {
3227 width: 100% !important;
3228 height: 100% !important;
3229 }
3230 .fg-panel.fg-panel-preserve-button-space .fg-media-iframe .fg-media-content {
3231 border-width: 1px;
3232 border-style: solid;
3233 }
3234 .fg-panel-fit-media .fg-media-video.fg-loaded {
3235 background-color: #000;
3236 }
3237 .fg-media-video .fg-media-content {
3238 background-repeat: no-repeat;
3239 background-position: center center;
3240 background-size: cover;
3241 }
3242 .fg-media-html .fg-media-content {
3243
3244 }
3245 .fg-media-embed .fg-media-content .fb-video > span,
3246 .fg-media-embed .fg-media-content > iframe,
3247 .fg-media-embed .fg-media-content > video,
3248 .fg-media-embed .fg-media-content > object {
3249 margin: 0;
3250 border: 0;
3251 width: 100%;
3252 height: 100%;
3253 max-width: 100%;
3254 max-height: 100%;
3255 }
3256 .fg-panel-info-toggle {
3257 display: inline-block;
3258 }
3259 :is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-info-overlay) .fg-panel-info-toggle {
3260 display: none;
3261 }
3262 .fg-media-caption {
3263 position: relative;
3264 box-sizing: border-box;
3265 width: 100%;
3266 height: auto;
3267 max-width: 100%;
3268 max-height: 100%;
3269 padding: 10px;
3270 gap: 10px;
3271 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
3272 font-size: 14px;
3273 font-weight: 400;
3274 line-height: 1.4;
3275 pointer-events: auto;
3276 display: flex;
3277 flex-direction: column;
3278 }
3279 :is(.fg-panel-info-top,.fg-panel-info-bottom) .fg-media-caption {
3280 text-align: center;
3281 }
3282 :is(.fg-panel-info-top,.fg-panel-info-bottom):is(.fg-medium,.fg-panel-no-mobile) .fg-media-caption {
3283 padding: 10px 42px;
3284 }
3285 .fg-panel-media-caption-left .fg-media-caption {
3286 text-align: left;
3287 }
3288 .fg-panel-media-caption-right .fg-media-caption {
3289 text-align: right;
3290 }
3291 .fg-panel-media-caption-center .fg-media-caption {
3292 text-align: center;
3293 }
3294 .fg-panel-media-caption-justify .fg-media-caption {
3295 text-align: justify;
3296 }
3297
3298 .fg-media-caption-title {
3299 font-weight: 600;
3300 border: none;
3301 }
3302 :is(.fg-panel-info-left,.fg-panel-info-right):is(.fg-medium,.fg-panel-no-mobile) .fg-media-caption-title {
3303 padding-bottom: 10px;
3304 border-bottom-style: solid;
3305 border-bottom-width: 1px;
3306 }
3307
3308 .fg-media-caption-description {
3309 font-size: smaller;
3310 max-height: 100%;
3311 height: auto;
3312 overflow-x: hidden;
3313 overflow-y: auto;
3314 border: none;
3315 }
3316
3317
3318 .fg-media-caption-exif {
3319 display: none;
3320 flex-direction: row;
3321 flex-wrap: wrap;
3322 justify-content: center;
3323 width: 100%;
3324 border: none;
3325 text-align: left;
3326 padding: 10px 0 0 0;
3327 gap: 10px;
3328 }
3329 body.rtl .fg-media-caption-exif {
3330 text-align: right;
3331 }
3332 .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) {
3333 display: flex;
3334 }
3335 .fg-media-caption-description + .fg-media-caption-exif {
3336 border-top-style: solid;
3337 border-top-width: 1px;
3338 }
3339 .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) {
3340 flex-direction: column;
3341 flex-wrap: nowrap;
3342 justify-content: left;
3343 }
3344 .fg-media-caption-exif-prop {
3345 position: relative;
3346 display: flex;
3347 height: 24px;
3348 padding: 0;
3349 gap: 10px;
3350 }
3351 body.rtl .fg-media-caption-exif-prop {
3352 flex-direction: row-reverse;
3353 }
3354
3355 .fg-media-caption-exif-full .fg-media-caption-exif-prop,
3356 .fg-panel.fg-large .fg-media-caption-exif-auto .fg-media-caption-exif-prop {
3357 height: 30px;
3358 }
3359 .fg-media-caption-exif-icon {
3360 display: flex;
3361 align-items: center;
3362 justify-content: center;
3363 position: relative;
3364 min-width: 16px;
3365 min-height: 16px;
3366 width: 16px;
3367 height: 100%;
3368 }
3369
3370 .fg-media-caption-exif-content {
3371 display: none;
3372 flex-direction: column;
3373 align-items: center;
3374 justify-content: center;
3375 width: 100%;
3376 height: 100%;
3377 }
3378 .fg-media-caption-exif-full .fg-media-caption-exif-content,
3379 .fg-media-caption-exif-partial .fg-media-caption-exif-content,
3380 .fg-panel.fg-medium .fg-media-caption-exif-auto .fg-media-caption-exif-content {
3381 display: flex;
3382 }
3383
3384 .fg-media-caption-exif-label {
3385 display: none;
3386 width: 100%;
3387 font-size: 11px;
3388 font-style: italic;
3389 line-height: 11px;
3390 white-space: nowrap;
3391 }
3392 .fg-media-caption-exif-full .fg-media-caption-exif-label,
3393 .fg-panel.fg-large .fg-media-caption-exif-auto .fg-media-caption-exif-label {
3394 display: block;
3395 }
3396 .fg-media-caption-exif-value {
3397 display: none;
3398 width: 100%;
3399 font-size: 12px;
3400 line-height: 14px;
3401 white-space: nowrap;
3402 }
3403 .fg-media-caption-exif-full .fg-media-caption-exif-value,
3404 .fg-media-caption-exif-partial .fg-media-caption-exif-value,
3405 .fg-panel.fg-medium .fg-media-caption-exif-auto .fg-media-caption-exif-value {
3406 display: block;
3407 }
3408
3409 .fg-media-caption-exif-tooltip {
3410 display: none;
3411 position: absolute;
3412 top: -8px;
3413 left: 50%;
3414 transform: translateX(-50%) translateY(-100%);
3415 color: #FFF;
3416 white-space: nowrap;
3417 background-color: #333;
3418 font-size: 12px;
3419 padding: 4px 8px;
3420 border-radius: 3px;
3421 box-shadow: 0 0 10px 0 #000;
3422 z-index: 1;
3423 }
3424 .fg-panel-info-top .fg-media-caption-exif-tooltip {
3425 top: unset;
3426 bottom: -8px;
3427 transform: translateX(-50%) translateY(100%);
3428 }
3429 :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 {
3430 left: 0;
3431 transform: translateY(-100%);
3432 }
3433 :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 {
3434 transform: translateY(100%);
3435 }
3436 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 {
3437 left: unset;
3438 right: 0;
3439 transform: translateY(-100%);
3440 }
3441 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 {
3442 transform: translateY(100%);
3443 }
3444
3445 .fg-media-caption-exif-tooltip-pointer {
3446 display: block;
3447 content: '';
3448 border-top: 8px solid #333;
3449 border-bottom: 8px solid transparent;
3450 border-left: 8px solid transparent;
3451 border-right: 8px solid transparent;
3452 height: 0;
3453 width: 0;
3454 position: absolute;
3455 bottom: -16px;
3456 left: 50%;
3457 margin-left: -8px;
3458 }
3459 .fg-panel-info-top .fg-media-caption-exif-tooltip-pointer {
3460 border-top: 8px solid transparent;
3461 border-bottom: 8px solid #333;
3462 bottom: unset;
3463 top: -16px;
3464 }
3465 :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 {
3466 left: 21px;
3467 }
3468 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 {
3469 left: unset;
3470 margin-left: unset;
3471 right: 21px;
3472 margin-right: -8px;
3473 }
3474
3475 .fg-media-caption-exif-prop.fg-media-caption-exif-show-tooltip .fg-media-caption-exif-tooltip {
3476 display: inline-block;
3477 }
3478
3479 @media (hover: hover) {
3480 .fg-media-caption-exif-tooltip {
3481 display: none;
3482 }
3483 .fg-media-caption-exif-prop:hover .fg-media-caption-exif-tooltip {
3484 display: inline-block;
3485 }
3486 }
3487 .fg-panel.fg-light {
3488 color: #333;
3489 }
3490 .fg-panel.fg-dark {
3491 color: #FeFeFe;
3492 }
3493
3494 /* Border Color */
3495 .fg-panel.fg-light,
3496 .fg-panel.fg-light :is(.fg-panel-info-inner,.fg-panel-cart-inner,.fg-panel-thumbs-inner),
3497 .fg-panel.fg-light.fg-panel-preserve-button-space .fg-media-iframe .fg-media-content,
3498 .fg-panel.fg-light .fg-panel-thumb:is(.fg-idle,.fg-loading,.fg-error) .fg-panel-thumb-media {
3499 border-color: #e2e2e2;
3500 }
3501
3502 .fg-panel.fg-dark,
3503 .fg-panel.fg-dark :is(.fg-panel-info-inner,.fg-panel-cart-inner,.fg-panel-thumbs-inner),
3504 .fg-panel.fg-dark.fg-panel-preserve-button-space .fg-media-iframe .fg-media-content,
3505 .fg-panel.fg-dark .fg-panel-thumb:is(.fg-idle,.fg-loading,.fg-error) .fg-panel-thumb-media {
3506 border-color: #232323;
3507 }
3508
3509 .fg-panel.fg-light :is(.fg-media-caption-title,.fg-media-caption-exif,.fg-media-product-body) {
3510 border-color: #e2e2e2;
3511 }
3512 .fg-panel.fg-dark :is(.fg-media-caption-title,.fg-media-caption-exif,.fg-media-product-body) {
3513 border-color: #767676;
3514 }
3515 /* Background Color */
3516 .fg-panel.fg-light,
3517 .fg-panel.fg-light .fg-panel-thumb:is(.fg-idle,.fg-loading,.fg-error) .fg-panel-thumb-media {
3518 background-color: #EEE;
3519 }
3520 .fg-panel.fg-dark,
3521 .fg-panel.fg-dark .fg-panel-thumb:is(.fg-idle,.fg-loading,.fg-error) .fg-panel-thumb-media {
3522 background-color: #151515;
3523 }
3524
3525 .fg-panel.fg-light :is(.fg-panel-cart-inner,.fg-panel-info-inner) {
3526 background-color: rgba(255, 255, 255, 0.95);
3527 }
3528 .fg-panel.fg-dark :is(.fg-panel-cart-inner,.fg-panel-info-inner) {
3529 background-color: rgba(51, 51, 51, 0.95);
3530 }
3531
3532 /* EXIF Colors */
3533 .fg-panel.fg-light .fg-media-caption-exif-icon {
3534 color: #767676;
3535 }
3536 .fg-panel.fg-light .fg-media-caption-exif-label {
3537 color: #777777;
3538 }
3539
3540 .fg-panel.fg-dark .fg-media-caption-exif-icon {
3541 color: #FFFFFF;
3542 }
3543 .fg-panel.fg-dark .fg-media-caption-exif-label {
3544 color: #bbbbbb;
3545 }
3546
3547 /* Button & Highlight Colors */
3548 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary,
3549 .fg-panel.fg-light :is(.fg-panel-button,.fg-panel-thumbs-button,.fg-panel-thumb,.fg-panel-thumb-spacer),
3550 .fg-panel.fg-light:is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-info-overlay) .fg-panel-info-inner,
3551 .fg-panel.fg-light:is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-cart-overlay) .fg-panel-cart-inner {
3552 background-color: #FFF;
3553 border-color: #e2e2e2;
3554 }
3555 .fg-panel.fg-dark .fg-panel-button[aria-pressed="true"],
3556 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary[aria-pressed="true"] {
3557 background-color: #FFF;
3558 }
3559 .fg-panel.fg-light .fg-panel-thumb.fg-selected {
3560 background-color: #f0f0f0;
3561 }
3562 .fg-panel.fg-light :is(.fg-panel-button,.fg-panel-area-toggle,.fg-panel-thumbs-button),
3563 .fg-panel.fg-dark .fg-panel-button[aria-pressed="true"],
3564 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary[aria-pressed="true"] {
3565 color: #767676;
3566 }
3567 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary,
3568 .fg-panel.fg-light .fg-panel-button.fg-panel-button-secondary {
3569 color: #222;
3570 }
3571
3572 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary,
3573 .fg-panel.fg-dark :is(.fg-panel-button,.fg-panel-thumbs-button,.fg-panel-thumb,.fg-panel-thumb-spacer),
3574 .fg-panel.fg-dark:is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-info-overlay) .fg-panel-info-inner,
3575 .fg-panel.fg-dark:is(.fg-medium,.fg-panel-no-mobile):not(.fg-panel-cart-overlay) .fg-panel-cart-inner {
3576 background-color: #333;
3577 border-color: #222;
3578 }
3579 .fg-panel.fg-light .fg-panel-button[aria-pressed="true"],
3580 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary[aria-pressed="true"] {
3581 background-color: #333;
3582 }
3583 .fg-panel.fg-dark .fg-panel-thumb.fg-selected {
3584 background-color: #2c2c2c;
3585 }
3586 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary,
3587 .fg-panel.fg-dark :is(.fg-panel-button,.fg-panel-area-toggle,.fg-panel-thumbs-button),
3588 .fg-panel.fg-light .fg-panel-button[aria-pressed="true"],
3589 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary[aria-pressed="true"] {
3590 color: #FFF;
3591 }
3592
3593 @media (hover: hover) {
3594 .fg-panel.fg-light .fg-panel-area-toggle:hover,
3595 .fg-panel.fg-light .fg-panel-area-toggle:focus {
3596 color: #bbbbbb;
3597 }
3598 .fg-panel.fg-light .fg-panel-button:hover,
3599 .fg-panel.fg-light .fg-panel-button:focus,
3600 .fg-panel.fg-dark .fg-panel-button[aria-pressed="true"]:hover,
3601 .fg-panel.fg-dark .fg-panel-button[aria-pressed="true"]:focus,
3602 .fg-panel.fg-light .fg-panel-thumbs-button:hover,
3603 .fg-panel.fg-light .fg-panel-thumbs-button:focus,
3604 .fg-panel.fg-light .fg-panel-thumb:hover,
3605 .fg-panel.fg-light .fg-panel-thumb:focus,
3606 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary:hover,
3607 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary:focus,
3608 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary[aria-pressed="true"]:hover,
3609 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary[aria-pressed="true"]:focus {
3610 background-color: #f5f5f5;
3611 }
3612 .fg-panel.fg-dark .fg-panel-area-toggle:hover,
3613 .fg-panel.fg-dark .fg-panel-area-toggle:focus {
3614 color: #bbbbbb;
3615 }
3616 .fg-panel.fg-dark .fg-panel-button:hover,
3617 .fg-panel.fg-dark .fg-panel-button:focus,
3618 .fg-panel.fg-light .fg-panel-button[aria-pressed="true"]:hover,
3619 .fg-panel.fg-light .fg-panel-button[aria-pressed="true"]:focus,
3620 .fg-panel.fg-dark .fg-panel-thumbs-button:hover,
3621 .fg-panel.fg-dark .fg-panel-thumbs-button:focus,
3622 .fg-panel.fg-dark .fg-panel-thumb:hover,
3623 .fg-panel.fg-dark .fg-panel-thumb:focus,
3624 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary:hover,
3625 .fg-panel.fg-light .fg-panel-button.fg-panel-button-primary:focus,
3626 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary[aria-pressed="true"]:hover,
3627 .fg-panel.fg-dark .fg-panel-button.fg-panel-button-primary[aria-pressed="true"]:focus {
3628 background-color: #303030;
3629 }
3630 }
3631
3632
3633 .fg-panel.fg-button-light .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3634 .fg-panel.fg-button-light .fg-panel-thumbs-button,
3635 .fg-panel.fg-button-light .fg-panel-thumb.fg-selected {
3636 background-color: #fff;
3637 border-color: #e2e2e2;
3638 color: #767676;
3639 }
3640 .fg-panel.fg-button-light .fg-panel-button:is(.fg-panel-button-primary,.fg-panel-button-secondary) {
3641 color: #222;
3642 }
3643
3644 .fg-panel.fg-button-blue .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3645 .fg-panel.fg-button-blue .fg-panel-thumbs-button,
3646 .fg-panel.fg-button-blue .fg-panel-thumb.fg-selected {
3647 background-color: #3079ed;
3648 border-color: #306be1;
3649 color: #FFF;
3650 }
3651
3652 .fg-panel.fg-button-dark .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3653 .fg-panel.fg-button-dark .fg-panel-thumbs-button,
3654 .fg-panel.fg-button-dark .fg-panel-thumb.fg-selected {
3655 background-color: #4e4e4e;
3656 border-color: #292929;
3657 color: #FFF;
3658 }
3659
3660 .fg-panel.fg-button-green .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3661 .fg-panel.fg-button-green .fg-panel-thumbs-button,
3662 .fg-panel.fg-button-green .fg-panel-thumb.fg-selected {
3663 background-color: #027339;
3664 border-color: #025f2f;
3665 color: #FFF;
3666 }
3667
3668 .fg-panel.fg-button-purple .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3669 .fg-panel.fg-button-purple .fg-panel-thumbs-button,
3670 .fg-panel.fg-button-purple .fg-panel-thumb.fg-selected {
3671 background-color: #6816c2;
3672 border-color: #5416a8;
3673 color: #FFF;
3674 }
3675
3676 .fg-panel.fg-button-orange .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3677 .fg-panel.fg-button-orange .fg-panel-thumbs-button,
3678 .fg-panel.fg-button-orange .fg-panel-thumb.fg-selected {
3679 background-color: #e57731;
3680 border-color: #c36230;
3681 color: #FFF;
3682 }
3683
3684 .fg-panel.fg-button-red .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]),
3685 .fg-panel.fg-button-red .fg-panel-thumbs-button,
3686 .fg-panel.fg-button-red .fg-panel-thumb.fg-selected {
3687 background-color: #c22b24;
3688 border-color: #9f2924;
3689 color: #FFF;
3690 }
3691
3692 @media (hover: hover) {
3693 .fg-panel.fg-button-light .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3694 .fg-panel.fg-button-light .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3695 .fg-panel.fg-button-light .fg-panel-thumbs-button:hover,
3696 .fg-panel.fg-button-light .fg-panel-thumbs-button:focus,
3697 .fg-panel.fg-button-light .fg-panel-thumb:hover,
3698 .fg-panel.fg-button-light .fg-panel-thumb:focus,
3699 .fg-panel.fg-button-light .fg-panel-thumb.fg-selected:hover,
3700 .fg-panel.fg-button-light .fg-panel-thumb.fg-selected:focus,
3701 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-button:hover,
3702 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-button:focus,
3703 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumbs-button:hover,
3704 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumbs-button:focus,
3705 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumb:hover,
3706 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumb:focus,
3707 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3708 .fg-panel.fg-highlight-light .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3709 background-color: #f5f5f5;
3710 border-color: #e2e2e2;
3711 color: #bbb;
3712 }
3713
3714 .fg-panel.fg-button-blue .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3715 .fg-panel.fg-button-blue .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3716 .fg-panel.fg-button-blue .fg-panel-thumbs-button:hover,
3717 .fg-panel.fg-button-blue .fg-panel-thumbs-button:focus,
3718 .fg-panel.fg-button-blue .fg-panel-thumb:hover,
3719 .fg-panel.fg-button-blue .fg-panel-thumb:focus,
3720 .fg-panel.fg-button-blue .fg-panel-thumb.fg-selected:hover,
3721 .fg-panel.fg-button-blue .fg-panel-thumb.fg-selected:focus,
3722 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-button:hover,
3723 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-button:focus,
3724 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumbs-button:hover,
3725 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumbs-button:focus,
3726 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumb:hover,
3727 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumb:focus,
3728 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3729 .fg-panel.fg-highlight-blue .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3730 background-color: #4d90fe;
3731 border-color: #3079ed;
3732 color: #FFF;
3733 }
3734
3735 .fg-panel.fg-button-dark .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3736 .fg-panel.fg-button-dark .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3737 .fg-panel.fg-button-dark .fg-panel-thumbs-button:hover,
3738 .fg-panel.fg-button-dark .fg-panel-thumbs-button:focus,
3739 .fg-panel.fg-button-dark .fg-panel-thumb:hover,
3740 .fg-panel.fg-button-dark .fg-panel-thumb:focus,
3741 .fg-panel.fg-button-dark .fg-panel-thumb.fg-selected:hover,
3742 .fg-panel.fg-button-dark .fg-panel-thumb.fg-selected:focus,
3743 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-button:hover,
3744 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-button:focus,
3745 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumbs-button:hover,
3746 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumbs-button:focus,
3747 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumb:hover,
3748 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumb:focus,
3749 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3750 .fg-panel.fg-highlight-dark .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3751 background-color: #5e5e5e;
3752 border-color: #292929;
3753 color: #FFF;
3754 }
3755
3756 .fg-panel.fg-button-green .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3757 .fg-panel.fg-button-green .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3758 .fg-panel.fg-button-green .fg-panel-thumbs-button:hover,
3759 .fg-panel.fg-button-green .fg-panel-thumbs-button:focus,
3760 .fg-panel.fg-button-green .fg-panel-thumb:hover,
3761 .fg-panel.fg-button-green .fg-panel-thumb:focus,
3762 .fg-panel.fg-button-green .fg-panel-thumb.fg-selected:hover,
3763 .fg-panel.fg-button-green .fg-panel-thumb.fg-selected:focus,
3764 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-button:hover,
3765 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-button:focus,
3766 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumbs-button:hover,
3767 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumbs-button:focus,
3768 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumb:hover,
3769 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumb:focus,
3770 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3771 .fg-panel.fg-highlight-green .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3772 background-color: #02874A;
3773 border-color: #027339;
3774 color: #FFF;
3775 }
3776
3777 .fg-panel.fg-button-purple .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3778 .fg-panel.fg-button-purple .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3779 .fg-panel.fg-button-purple .fg-panel-thumbs-button:hover,
3780 .fg-panel.fg-button-purple .fg-panel-thumbs-button:focus,
3781 .fg-panel.fg-button-purple .fg-panel-thumb:hover,
3782 .fg-panel.fg-button-purple .fg-panel-thumb:focus,
3783 .fg-panel.fg-button-purple .fg-panel-thumb.fg-selected:hover,
3784 .fg-panel.fg-button-purple .fg-panel-thumb.fg-selected:focus,
3785 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-button:hover,
3786 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-button:focus,
3787 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumbs-button:hover,
3788 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumbs-button:focus,
3789 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumb:hover,
3790 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumb:focus,
3791 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3792 .fg-panel.fg-highlight-purple .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3793 background-color: #7816D6;
3794 border-color: #6816c2;
3795 color: #FFF;
3796 }
3797
3798 .fg-panel.fg-button-orange .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3799 .fg-panel.fg-button-orange .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3800 .fg-panel.fg-button-orange .fg-panel-thumbs-button:hover,
3801 .fg-panel.fg-button-orange .fg-panel-thumbs-button:focus,
3802 .fg-panel.fg-button-orange .fg-panel-thumb:hover,
3803 .fg-panel.fg-button-orange .fg-panel-thumb:focus,
3804 .fg-panel.fg-button-orange .fg-panel-thumb.fg-selected:hover,
3805 .fg-panel.fg-button-orange .fg-panel-thumb.fg-selected:focus,
3806 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-button:hover,
3807 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-button:focus,
3808 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumbs-button:hover,
3809 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumbs-button:focus,
3810 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumb:hover,
3811 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumb:focus,
3812 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3813 .fg-panel.fg-highlight-orange .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3814 background-color: #FF8E31;
3815 border-color: #e57731;
3816 color: #FFF;
3817 }
3818
3819 .fg-panel.fg-button-red .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):hover,
3820 .fg-panel.fg-button-red .fg-panel-button:not(.fg-panel-button-secondary,[aria-pressed="true"]):focus,
3821 .fg-panel.fg-button-red .fg-panel-thumbs-button:hover,
3822 .fg-panel.fg-button-red .fg-panel-thumbs-button:focus,
3823 .fg-panel.fg-button-red .fg-panel-thumb:hover,
3824 .fg-panel.fg-button-red .fg-panel-thumb:focus,
3825 .fg-panel.fg-button-red .fg-panel-thumb.fg-selected:hover,
3826 .fg-panel.fg-button-red .fg-panel-thumb.fg-selected:focus,
3827 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-button:hover,
3828 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-button:focus,
3829 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumbs-button:hover,
3830 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumbs-button:focus,
3831 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumb:hover,
3832 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumb:focus,
3833 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumb.fg-selected:hover,
3834 .fg-panel.fg-highlight-red .fg-panel-area .fg-panel-thumb.fg-selected:focus {
3835 background-color: #F12B24;
3836 border-color: #c22b24;
3837 color: #FFF;
3838 }
3839 }
3840 /* transitions */
3841 .fg-panel-fade .fg-media,
3842 .fg-panel-horizontal .fg-media,
3843 .fg-panel-vertical .fg-media,
3844 .fg-panel-fade .fg-panel-thumbs-stage,
3845 .fg-panel-horizontal .fg-panel-thumbs-stage,
3846 .fg-panel-vertical .fg-panel-thumbs-stage {
3847 transition-duration: .3s;
3848 transition-timing-function: ease-in-out;
3849 }
3850
3851 .fg-panel-fade .fg-panel-thumbs-stage,
3852 .fg-panel-horizontal .fg-panel-thumbs-stage,
3853 .fg-panel-vertical .fg-panel-thumbs-stage {
3854 transition-property: transform;
3855 }
3856
3857 .fg-panel-fade .fg-media-content,
3858 .fg-panel-horizontal .fg-media-content,
3859 .fg-panel-vertical .fg-media-content {
3860 transition-duration: .3s;
3861 transition-timing-function: ease-in-out;
3862 transition-property: opacity, visibility;
3863 }
3864
3865 @media (hover: hover) {
3866 .fg-panel-fade .fg-panel-button,
3867 .fg-panel-horizontal .fg-panel-button,
3868 .fg-panel-vertical .fg-panel-button,
3869 .fg-panel-fade .fg-panel-area-toggle,
3870 .fg-panel-horizontal .fg-panel-area-toggle,
3871 .fg-panel-vertical .fg-panel-area-toggle,
3872 .fg-panel-fade .fg-panel-thumb,
3873 .fg-panel-horizontal .fg-panel-thumb,
3874 .fg-panel-vertical .fg-panel-thumb,
3875 .fg-panel-fade .fg-panel-thumbs-button,
3876 .fg-panel-horizontal .fg-panel-thumbs-button,
3877 .fg-panel-vertical .fg-panel-thumbs-button {
3878 transition-property: background-color, border-color, color, opacity, visibility;
3879 transition-duration: .1s;
3880 transition-timing-function: ease-in-out;
3881 }
3882 }
3883
3884 /* content fade in/out */
3885 .fg-panel-fade .fg-media {
3886 transition-property: opacity, visibility, padding;
3887 visibility: hidden;
3888 opacity: 0;
3889 }
3890 .fg-panel-fade .fg-media.fg-visible,
3891 .fg-panel-fade .fg-media.fg-reverse.fg-visible {
3892 visibility: visible;
3893 opacity: 1;
3894 }
3895
3896 /* content slide left/right */
3897 .fg-panel-horizontal .fg-media {
3898 transition-property: opacity, visibility, transform, padding;
3899 transform: translateX(-100%);
3900 visibility: hidden;
3901 opacity: 0;
3902 }
3903 .fg-panel-horizontal .fg-media.fg-reverse {
3904 transform: translateX(100%);
3905 }
3906 .fg-panel-horizontal .fg-media.fg-visible,
3907 .fg-panel-horizontal .fg-media.fg-reverse.fg-visible {
3908 transform: translateX(0);
3909 visibility: visible;
3910 opacity: 1;
3911 }
3912
3913 /* content slide up/down */
3914 .fg-panel-vertical .fg-media {
3915 transition-property: opacity, visibility, transform, padding;
3916 transform: translateY(-100%);
3917 visibility: hidden;
3918 opacity: 0;
3919 }
3920 .fg-panel-vertical .fg-media.fg-reverse {
3921 transform: translateY(100%);
3922 }
3923 .fg-panel-vertical .fg-media.fg-visible,
3924 .fg-panel-vertical .fg-media.fg-reverse.fg-visible {
3925 transform: translateY(0);
3926 visibility: visible;
3927 opacity: 1;
3928 }
3929 .fg-icon-auto-progress {
3930 cursor: pointer;
3931 }
3932
3933 .fg-icon-auto-progress-idle {
3934 fill: currentColor;
3935 visibility: visible;
3936 opacity: 1;
3937 transition: opacity 0.3s, visibility 0.3s;
3938 }
3939 .fg-icon-auto-progress:is(.fg-paused,.fg-stopped,.fg-started) .fg-icon-auto-progress-idle {
3940 opacity: 0;
3941 visibility: hidden;
3942 }
3943
3944 .fg-icon-auto-progress-circle {
3945 stroke: currentColor;
3946 fill: transparent;
3947 transform: rotate(-90deg);
3948 transform-origin: 50% 50%;
3949 opacity: 0;
3950 visibility: hidden;
3951 stroke-width: 8px;
3952 stroke-dasharray: 0, 0;
3953 stroke-dashoffset: 0;
3954 transition: stroke-dashoffset 1s, opacity 0.3s, visibility 0.3s;
3955 }
3956 .fg-icon-auto-progress.fg-started .fg-icon-auto-progress-circle {
3957 opacity: 1;
3958 visibility: visible;
3959 }
3960 .fg-icon-auto-progress-play,
3961 .fg-icon-auto-progress-pause {
3962 fill: currentColor;
3963 opacity: 0;
3964 visibility: hidden;
3965 transition: opacity 0.3s, visibility 0.3s;
3966 }
3967 .fg-icon-auto-progress:is(.fg-paused,.fg-stopped) .fg-icon-auto-progress-play {
3968 opacity: 1;
3969 visibility: visible;
3970 }
3971
3972 @media (hover: hover) {
3973 *:hover > .fg-icon-auto-progress.fg-started .fg-icon-auto-progress-circle {
3974 opacity: 0;
3975 visibility: hidden;
3976 }
3977 *:hover > .fg-icon-auto-progress:is(.fg-paused,.fg-stopped) .fg-icon-auto-progress-play,
3978 *:hover > .fg-icon-auto-progress.fg-started .fg-icon-auto-progress-pause {
3979 opacity: 1;
3980 visibility: visible;
3981 }
3982 }
3983 .fg-panel-thumbs-inner {
3984 position: relative;
3985 display: flex;
3986 width: 100%;
3987 height: 100%;
3988 overflow: hidden;
3989 pointer-events: auto;
3990 }
3991 .fg-panel-thumbs-top .fg-panel-thumbs-inner,
3992 .fg-panel-thumbs-bottom .fg-panel-thumbs-inner {
3993 flex-direction: row;
3994 }
3995 .fg-panel-thumbs-left .fg-panel-thumbs-inner,
3996 .fg-panel-thumbs-right .fg-panel-thumbs-inner {
3997 flex-direction: column;
3998 }
3999
4000 .fg-panel-thumbs-button,
4001 .fg-panel-thumbs-button:active,
4002 .fg-panel-thumbs-button:focus {
4003 position: relative;
4004 width: 100%;
4005 height: 100%;
4006 cursor: pointer;
4007 user-select: none;
4008 outline: none;
4009 }
4010 .fg-panel-thumbs-button.fg-disabled {
4011 display: none;
4012 }
4013 .fg-panel-thumbs-top .fg-panel-thumbs-button,
4014 .fg-panel-thumbs-bottom .fg-panel-thumbs-button {
4015 width: 37px;
4016 min-width: 37px;
4017 }
4018 .fg-panel-thumbs-left .fg-panel-thumbs-button,
4019 .fg-panel-thumbs-right .fg-panel-thumbs-button {
4020 height: 37px;
4021 min-height: 37px;
4022 }
4023
4024 @media (hover: hover) {
4025 .fg-panel-hover-buttons .fg-panel-thumbs-button {
4026 position: absolute;
4027 visibility: hidden;
4028 opacity: 0;
4029 z-index: 1;
4030 }
4031 .fg-panel-hover-buttons .fg-panel-thumbs:hover .fg-panel-thumbs-button:not(.fg-disabled) {
4032 visibility: visible;
4033 opacity: 0.5;
4034 }
4035 .fg-panel-hover-buttons .fg-panel-thumbs .fg-panel-thumbs-button:not(.fg-disabled):hover {
4036 opacity: 1;
4037 }
4038 .fg-panel-hover-buttons .fg-panel-thumbs-prev {
4039 top: 0;
4040 left: 0;
4041 }
4042 .fg-panel-hover-buttons .fg-panel-thumbs-next {
4043 bottom: 0;
4044 right: 0;
4045 }
4046 }
4047
4048
4049 .fg-panel-thumbs-button .fg-icon {
4050 display: block;
4051 margin: 0;
4052 padding: 0;
4053 position: absolute;
4054 top: 50%;
4055 left: 50%;
4056 transform: translateX(-50%) translateY(-50%);
4057 }
4058 .fg-panel-thumbs-button.fg-disabled .fg-icon {
4059 opacity: 0.3;
4060 }
4061 .fg-panel-thumbs-left .fg-panel-thumbs-button .fg-icon,
4062 .fg-panel-thumbs-right .fg-panel-thumbs-button .fg-icon {
4063 transform: translateX(-50%) translateY(-50%) rotate(90deg);
4064 }
4065
4066 .fg-panel-thumbs-viewport {
4067 position: relative;
4068 width: 100%;
4069 height: 100%;
4070 overflow: hidden;
4071 }
4072
4073 .fg-panel-thumbs-stage {
4074 position: relative;
4075 display: flex;
4076 width: 100%;
4077 height: 100%;
4078 justify-content: flex-start;
4079 align-items: center;
4080 }
4081 .fg-panel-thumbs-top .fg-panel-thumbs-stage,
4082 .fg-panel-thumbs-bottom .fg-panel-thumbs-stage {
4083 flex-direction: row;
4084 }
4085 .fg-panel-thumbs-left .fg-panel-thumbs-stage,
4086 .fg-panel-thumbs-right .fg-panel-thumbs-stage {
4087 flex-direction: column;
4088 }
4089 .fg-panel-thumb-spacer {
4090 width: 100%;
4091 height: 100%;
4092 min-height: 1px;
4093 min-width: 1px;
4094 }
4095
4096 .fg-panel-thumb {
4097 position: relative;
4098 display: flex;
4099 margin: 0;
4100 padding: 4px;
4101 justify-content: center;
4102 align-items: center;
4103 width: 100%;
4104 height: 100%;
4105 min-width: 100%;
4106 min-height: 100%;
4107 cursor: pointer;
4108 user-select: none;
4109 }
4110 .fg-panel.fg-medium:not(.fg-panel-thumbs-no-captions) .fg-panel-thumb {
4111 justify-content: flex-start;
4112 }
4113 .fg-panel-thumbs-bottom .fg-panel-thumb,
4114 .fg-panel-thumbs-left .fg-panel-thumb,
4115 .fg-panel-thumbs-right .fg-panel-thumb {
4116 padding-top: 3px;
4117 }
4118 .fg-panel-thumbs-top .fg-panel-thumb {
4119 padding-bottom: 3px;
4120 }
4121
4122
4123
4124
4125 .fg-panel-thumbs-viewport > .fg-panel-thumb {
4126 position: absolute;
4127 top: -9999px;
4128 left: -9999px;
4129 visibility: hidden;
4130 opacity: 0;
4131 }
4132
4133 .fg-panel-thumb-media {
4134 position: relative;
4135 width: 90px;
4136 min-width: 90px;
4137 height: 60px;
4138 min-height: 60px;
4139 overflow: hidden;
4140 }
4141 .fg-panel.fg-medium .fg-panel-thumb-media {
4142 width: 108px;
4143 min-width: 108px;
4144 height: 72px;
4145 min-height: 72px;
4146 }
4147 .fg-panel.fg-medium:not(.fg-panel-thumbs-no-captions) .fg-panel-thumb-media {
4148 margin-right: 5px;
4149 }
4150 .fg-panel.fg-medium.fg-x-large-width .fg-panel-thumb-media {
4151 width: 128px;
4152 min-width: 128px;
4153 }
4154 .fg-panel.fg-panel-thumbs-small .fg-panel-thumb-media {
4155 width: 60px;
4156 min-width: 60px;
4157 }
4158 .fg-panel.fg-medium.fg-panel-thumbs-small .fg-panel-thumb-media,
4159 .fg-panel.fg-medium.fg-x-large-width.fg-panel-thumbs-small .fg-panel-thumb-media {
4160 width: 72px;
4161 min-width: 72px;
4162 }
4163
4164 .fg-panel-thumb.fg-idle .fg-panel-thumb-media,
4165 .fg-panel-thumb.fg-loading .fg-panel-thumb-media,
4166 .fg-panel-thumb.fg-error .fg-panel-thumb-media {
4167 border-style: solid;
4168 border-width: 1px;
4169 }
4170 .fg-panel-thumb.fg-error .fg-panel-thumb-media {
4171 background-image: url("../img/icons.svg#image");
4172 background-position: center center;
4173 background-size: 32px 32px;
4174 background-repeat: no-repeat;
4175 }
4176
4177 .fg-panel-thumb-wrap {
4178 width: 100%;
4179 height: 100%;
4180 position: absolute;
4181 top: 0;
4182 left: 0;
4183 margin: 0;
4184 }
4185 .fg-panel-thumb-image {
4186 width: 100%;
4187 height: auto;
4188 position: absolute;
4189 top: 50%;
4190 left: 50%;
4191 margin: 0;
4192 transform: translateX(-50%) translateY(-50%);
4193 visibility: visible;
4194 opacity: 1;
4195 transition: visibility 0.3s, opacity 0.3s;
4196 }
4197 .fg-panel-thumb.fg-idle .fg-panel-thumb-image,
4198 .fg-panel-thumb.fg-loading .fg-panel-thumb-image,
4199 .fg-panel-thumb.fg-error .fg-panel-thumb-image {
4200 visibility: hidden;
4201 opacity: 0;
4202 }
4203 .fg-panel-thumb-caption {
4204 display: none;
4205 width: 100%;
4206 max-height: 60px;
4207 margin: 0;
4208 font-size: 14px;
4209 overflow: hidden;
4210 line-height: 1.3;
4211 }
4212 .fg-panel-thumb-caption-left .fg-panel-thumb-caption {
4213 text-align: left;
4214 }
4215 .fg-panel-thumb-caption-right .fg-panel-thumb-caption {
4216 text-align: right;
4217 }
4218 .fg-panel-thumb-caption-center .fg-panel-thumb-caption {
4219 text-align: center;
4220 }
4221 .fg-panel-thumb-caption-justify .fg-panel-thumb-caption {
4222 text-align: justify;
4223 }
4224
4225 .fg-panel.fg-medium .fg-panel-thumb-caption {
4226 max-height: 72px;
4227 }
4228 .fg-panel.fg-medium:not(.fg-panel-thumbs-no-captions) .fg-panel-thumb-caption {
4229 display: block;
4230 }
4231 .fg-panel-thumb-title {
4232 font-weight: 600;
4233 }
4234 .fg-panel-thumb-description {
4235 font-size: smaller;
4236 }
4237 .fg-panel-thumb-title,
4238 .fg-panel-thumb-description {
4239 display: -webkit-box;
4240 -webkit-line-clamp: 1;
4241 -webkit-box-orient: vertical;
4242 overflow: hidden;
4243 }
4244
4245 .fg-panel-thumb-description,
4246 .fg-panel.fg-medium .fg-panel-thumb-title {
4247 -webkit-line-clamp: 2;
4248 }
4249 /* Inset Shadows */
4250 .fg-panel.fg-shadow-inset-small .fg-panel-thumb-media:after,
4251 .fg-panel.fg-shadow-inset-medium .fg-panel-thumb-media:after,
4252 .fg-panel.fg-shadow-inset-large .fg-panel-thumb-media:after {
4253 display: block;
4254 content: "";
4255 position: absolute;
4256 top: 0;
4257 left: 0;
4258 right: 0;
4259 bottom: 0;
4260 z-index: 7;
4261 }
4262 .fg-panel.fg-light.fg-shadow-inset-small .fg-panel-thumb-media:after,
4263 .fg-panel.fg-dark.fg-shadow-inset-small .fg-panel-thumb-media:after {
4264 box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3);
4265 }
4266 .fg-panel.fg-light.fg-shadow-inset-medium .fg-panel-thumb-media:after,
4267 .fg-panel.fg-dark.fg-shadow-inset-medium .fg-panel-thumb-media:after {
4268 box-shadow: inset 0 1px 10px 0 rgba(0,0,0,0.3);
4269 }
4270 .fg-panel.fg-light.fg-shadow-inset-large .fg-panel-thumb-media:after,
4271 .fg-panel.fg-dark.fg-shadow-inset-large .fg-panel-thumb-media:after {
4272 box-shadow: inset 0 1px 16px 0 rgba(0,0,0,0.3);
4273 }
4274 /* Colorize */
4275 .fg-panel.fg-hover-colorize .fg-panel-thumb-image {
4276 /* Firefox 10+, Firefox on Android */
4277 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");
4278 /* IE 6-9 */
4279 filter: gray;
4280 /* Chrome 19+, Safari 6+, Safari 6+ iOS */
4281 -webkit-filter: grayscale(100%);
4282 -webkit-transition-property: -webkit-filter;
4283 transition-property: filter;
4284 }
4285 .fg-panel.fg-hover-colorize .fg-panel-thumb:hover .fg-panel-thumb-image {
4286 -webkit-filter: none;
4287 filter: none;
4288 }
4289 /* Grayscale */
4290 .fg-panel.fg-hover-grayscale .fg-panel-thumb-image {
4291 -webkit-filter: none;
4292 filter: none;
4293 -webkit-transition-property: -webkit-filter;
4294 transition-property: filter;
4295 }
4296 .fg-panel.fg-hover-grayscale .fg-panel-thumb:hover .fg-panel-thumb-image {
4297 /* Firefox 10+, Firefox on Android */
4298 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");
4299 /* IE 6-9 */
4300 filter: gray;
4301 /* Chrome 19+, Safari 6+, Safari 6+ iOS */
4302 -webkit-filter: grayscale(100%);
4303 opacity: 1;
4304 }
4305
4306 /* Scale */
4307 .fg-panel.fg-hover-scale .fg-panel-thumb {
4308 transition-property: transform;
4309 }
4310 .fg-panel.fg-hover-scale .fg-panel-thumb:hover {
4311 transform: scale(1.048);
4312 }
4313 .fg-default {
4314 --fg-gutter: 10px;
4315
4316 display: flex;
4317 flex-direction: row;
4318 flex-wrap: wrap;
4319 gap: var(--fg-gutter);
4320 justify-content: center;
4321 margin-inline: auto !important;
4322 }
4323 .fg-default .fg-image {
4324 border-radius: 0;
4325 display: block;
4326 max-width: 100%;
4327 height: auto;
4328 margin: 0;
4329 padding: 0;
4330 }
4331
4332 /* Horizontal alignment */
4333 .fg-default.fg-left {
4334 justify-content: flex-start;
4335 margin-inline: 0 auto !important;
4336 }
4337
4338 .fg-default.fg-center {
4339 justify-content: center;
4340 margin-inline: auto !important;
4341 }
4342
4343 .fg-default.fg-right {
4344 justify-content: flex-end;
4345 margin-inline: auto 0 !important;
4346 }
4347 @media only screen and (min-width: 601px) {
4348 .fg-default.fg-d-col1 {
4349 --fg-d-columns: 1;
4350 }
4351 .fg-default.fg-d-col2 {
4352 --fg-d-columns: 2;
4353 }
4354 .fg-default.fg-d-col3 {
4355 --fg-d-columns: 3;
4356 }
4357 .fg-default.fg-d-col4 {
4358 --fg-d-columns: 4;
4359 }
4360 .fg-default.fg-d-col5 {
4361 --fg-d-columns: 5;
4362 }
4363 .fg-default.fg-d-col6 {
4364 --fg-d-columns: 6;
4365 }
4366 .fg-default:is(.fg-d-col1,.fg-d-col2,.fg-d-col3,.fg-d-col4,.fg-d-col5,.fg-d-col6) {
4367 --fg-d-gallery-max-width: calc(
4368 (var(--fg-d-columns) * var(--fg-column-max-width, 99999px)) +
4369 ((var(--fg-d-columns) - 1) * var(--fg-gutter))
4370 );
4371 max-width: min(100%, var(--fg-d-gallery-max-width));
4372 }
4373 .fg-default .fg-item {
4374 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 2 ) ) / 3 );
4375 }
4376 .fg-default.fg-d-col1 .fg-image,
4377 .fg-default.fg-d-col2 .fg-image,
4378 .fg-default.fg-d-col3 .fg-image,
4379 .fg-default.fg-d-col4 .fg-image,
4380 .fg-default.fg-d-col5 .fg-image,
4381 .fg-default.fg-d-col6 .fg-image {
4382 width: 100%;
4383 }
4384
4385 .fg-default.fg-d-col1 .fg-item {
4386 --fg-d-column-width: 100%;
4387 }
4388 .fg-default.fg-d-col2 .fg-item {
4389 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 1 ) ) / 2 );
4390 }
4391 .fg-default.fg-d-col3 .fg-item {
4392 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 2 ) ) / 3 );
4393 }
4394 .fg-default.fg-d-col4 .fg-item {
4395 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 3 ) ) / 4 );
4396 }
4397 .fg-default.fg-d-col5 .fg-item {
4398 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 4 ) ) / 5 );
4399 }
4400 .fg-default.fg-d-col6 .fg-item {
4401 --fg-d-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 5 ) ) / 6 );
4402 }
4403
4404 .fg-default:is(.fg-d-col1,.fg-d-col2,.fg-d-col3,.fg-d-col4,.fg-d-col5,.fg-d-col6) .fg-item {
4405 width: var(--fg-d-column-width);
4406 min-width: var(--fg-d-column-width);
4407 max-width: var(--fg-d-column-width);
4408 }
4409 }
4410 @media only screen and (max-width: 600px) {
4411 .fg-default.fg-m-col1 {
4412 --fg-m-columns: 1;
4413 }
4414 .fg-default.fg-m-col2 {
4415 --fg-m-columns: 2;
4416 }
4417 .fg-default.fg-m-col3 {
4418 --fg-m-columns: 3;
4419 }
4420 .fg-default:is(.fg-m-col1,.fg-m-col2,.fg-m-col3) {
4421 --fg-m-gallery-max-width: calc(
4422 (var(--fg-m-columns) * var(--fg-column-max-width, 99999px)) +
4423 ((var(--fg-m-columns) - 1) * var(--fg-gutter))
4424 );
4425 max-width: min(100%, var(--fg-m-gallery-max-width));
4426 }
4427 .fg-default .fg-item {
4428 --fg-m-column-width: 100%;
4429 }
4430 .fg-default.fg-m-col1 .fg-image,
4431 .fg-default.fg-m-col2 .fg-image,
4432 .fg-default.fg-m-col3 .fg-image {
4433 width: 100%;
4434 }
4435
4436 .fg-default.fg-m-col1 .fg-item {
4437 --fg-m-column-width: 100%;
4438 }
4439 .fg-default.fg-m-col2 .fg-item {
4440 --fg-m-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 1 ) ) / 2 );
4441 }
4442 .fg-default.fg-m-col3 .fg-item {
4443 --fg-m-column-width: calc( calc( 100% - calc( var(--fg-gutter) * 2 ) ) / 3 );
4444 }
4445
4446 .fg-default:is(.fg-m-col1,.fg-m-col2,.fg-m-col3) .fg-item {
4447 width: var(--fg-m-column-width);
4448 min-width: var(--fg-m-column-width);
4449 max-width: var(--fg-m-column-width);
4450 }
4451 }
4452
4453 /* Base styles */
4454 .fg-masonry * {
4455 box-sizing: border-box;
4456 }
4457 .foogallery.fg-masonry {
4458 --fg-gutter: 10px;
4459 --fg-column-width: 100%;
4460 --fg-col2-width: calc( calc( 100% - calc( var(--fg-gutter) * 1 ) ) / 2 );
4461 --fg-col3-width: calc( calc( 100% - calc( var(--fg-gutter) * 2 ) ) / 3 );
4462 --fg-col4-width: calc( calc( 100% - calc( var(--fg-gutter) * 3 ) ) / 4 );
4463 --fg-col5-width: calc( calc( 100% - calc( var(--fg-gutter) * 4 ) ) / 5 );
4464 --fg-col6-width: calc( calc( 100% - calc( var(--fg-gutter) * 5 ) ) / 6 );
4465 margin: 0 auto;
4466 text-align: center;
4467 }
4468 .fg-masonry .fg-thumb {
4469 display: block;
4470 }
4471 .fg-masonry.fg-fixed .fg-item,
4472 .fg-masonry.fg-fixed .fg-image,
4473 .fg-masonry.fg-fixed .fg-column-width {
4474 max-width: 100%;
4475 }
4476
4477 .fg-masonry .fg-column-width {
4478 display: inline-block;
4479 border: solid 0 transparent;
4480 }
4481 .fg-masonry .fg-column-width,
4482 .fg-masonry .fg-gutter-width {
4483 position: absolute;
4484 top: 0;
4485 left: 0;
4486 height: 0;
4487 visibility: hidden;
4488 opacity: 0;
4489 pointer-events: none;
4490 }
4491
4492 .fg-masonry.fg-fixed .fg-item .fg-image,
4493 .fg-masonry.fg-col6 .fg-item .fg-image,
4494 .fg-masonry.fg-col5 .fg-item .fg-image,
4495 .fg-masonry.fg-col4 .fg-item .fg-image,
4496 .fg-masonry.fg-col3 .fg-item .fg-image,
4497 .fg-masonry.fg-col2 .fg-item .fg-image {
4498 width: 100%;
4499 height: auto;
4500 max-width: 100%;
4501 }
4502
4503 .fg-masonry .fg-item {
4504 line-height: 0;
4505 font-size: 0;
4506 vertical-align: top;
4507 }
4508
4509 .fg-masonry .fg-item { margin-bottom: var(--fg-gutter); margin-right: var(--fg-gutter); width: var(--fg-column-width); }
4510 .fg-masonry .fg-column-width { width: var(--fg-column-width); }
4511 .fg-masonry .fg-gutter-width { width: var(--fg-gutter); }
4512
4513 .fg-masonry.fg-col1 .fg-item:nth-child(1n+3),
4514 .fg-masonry.fg-col2 .fg-item:nth-child(2n+4),
4515 .fg-masonry.fg-col3 .fg-item:nth-child(3n+5),
4516 .fg-masonry.fg-col4 .fg-item:nth-child(4n+6),
4517 .fg-masonry.fg-col5 .fg-item:nth-child(5n+7),
4518 .fg-masonry.fg-col6 .fg-item:nth-child(6n+8) {
4519 margin-right: 0;
4520 }
4521
4522 .fg-masonry.fg-col2 {
4523 --fg-column-width: var(--fg-col2-width);
4524 }
4525 .fg-masonry.fg-col3 {
4526 --fg-column-width: var(--fg-col3-width);
4527 }
4528 .fg-masonry.fg-col4 {
4529 --fg-column-width: var(--fg-col4-width);
4530 }
4531 .fg-masonry.fg-col5 {
4532 --fg-column-width: var(--fg-col5-width);
4533 }
4534 .fg-masonry.fg-col6 {
4535 --fg-column-width: var(--fg-col6-width);
4536 }
4537
4538 /* Force 5 column layout < 1280px */
4539 @media screen and (max-width: 1280px) {
4540 .fg-masonry.fg-col6 {
4541 --fg-column-width: var(--fg-col5-width);
4542 }
4543 .fg-masonry.fg-col6 .fg-item:nth-child(5n+7) {
4544 margin-right: 0;
4545 }
4546 }
4547 /* Force 4 column layout < 1024px */
4548 @media screen and (max-width: 1024px) {
4549 .fg-masonry.fg-col5,
4550 .fg-masonry.fg-col6 {
4551 --fg-column-width: var(--fg-col4-width);
4552 }
4553 .fg-masonry.fg-col5 .fg-item:nth-child(4n+6),
4554 .fg-masonry.fg-col6 .fg-item:nth-child(4n+6) {
4555 margin-right: 0;
4556 }
4557 }
4558 /* Force 3 column layout < 720px */
4559 @media screen and (max-width: 720px) {
4560 .fg-masonry.fg-col4,
4561 .fg-masonry.fg-col5,
4562 .fg-masonry.fg-col6 {
4563 --fg-column-width: var(--fg-col3-width);
4564 }
4565 .fg-masonry.fg-col4 .fg-item:nth-child(3n+5),
4566 .fg-masonry.fg-col5 .fg-item:nth-child(3n+5),
4567 .fg-masonry.fg-col6 .fg-item:nth-child(3n+5) {
4568 margin-right: 0;
4569 }
4570 }
4571 /* Force 2 column layout < 480px */
4572 @media screen and (max-width: 480px) {
4573 .fg-masonry.fg-col3,
4574 .fg-masonry.fg-col4,
4575 .fg-masonry.fg-col5,
4576 .fg-masonry.fg-col6 {
4577 --fg-column-width: var(--fg-col2-width);
4578 }
4579 .fg-masonry.fg-col3 .fg-item:nth-child(2n+4),
4580 .fg-masonry.fg-col4 .fg-item:nth-child(2n+4),
4581 .fg-masonry.fg-col5 .fg-item:nth-child(2n+4),
4582 .fg-masonry.fg-col6 .fg-item:nth-child(2n+4) {
4583 margin-right: 0;
4584 }
4585 }
4586 /* Force 1 column layout < 320px */
4587 @media screen and (max-width: 320px) {
4588 .fg-masonry.fg-col2,
4589 .fg-masonry.fg-col3,
4590 .fg-masonry.fg-col4,
4591 .fg-masonry.fg-col5,
4592 .fg-masonry.fg-col6 {
4593 --fg-gutter: 0;
4594 --fg-column-width: 100%;
4595 }
4596 .fg-masonry.fg-col2 .fg-item:nth-child(1n+3),
4597 .fg-masonry.fg-col3 .fg-item:nth-child(1n+3),
4598 .fg-masonry.fg-col4 .fg-item:nth-child(1n+3),
4599 .fg-masonry.fg-col5 .fg-item:nth-child(1n+3),
4600 .fg-masonry.fg-col6 .fg-item:nth-child(1n+3) {
4601 margin-right: 0;
4602 }
4603 }
4604
4605 /* 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. */
4606 .foogallery.fg-border-thin .fg-column-width {
4607 border-width: 4px;
4608 }
4609 .foogallery.fg-border-medium .fg-column-width {
4610 border-width: 10px;
4611 }
4612 .foogallery.fg-border-thick .fg-column-width {
4613 border-width: 16px;
4614 }
4615
4616 /* Captions Bottom */
4617 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption {
4618 display: flex;
4619 visibility: visible;
4620 opacity: 1;
4621 font-size: 13px;
4622 position: relative;
4623 top: auto;
4624 bottom: auto;
4625 left: auto;
4626 right: auto;
4627 width: auto;
4628 height: auto;
4629 text-transform: none;
4630 transform: none;
4631 transition: none;
4632 background-color: transparent;
4633 border: none;
4634 text-align: left;
4635 }
4636 .foogallery.fg-masonry.fg-captions-bottom.fg-c-l .fg-item-inner .fg-caption {
4637 text-align: left;
4638 }
4639 .foogallery.fg-masonry.fg-captions-bottom.fg-c-c .fg-item-inner .fg-caption {
4640 text-align: center;
4641 }
4642 .foogallery.fg-masonry.fg-captions-bottom.fg-c-r .fg-item-inner .fg-caption {
4643 text-align: right;
4644 }
4645 .foogallery.fg-masonry.fg-captions-bottom.fg-c-j .fg-item-inner .fg-caption {
4646 text-align: justify;
4647 }
4648 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner:hover .fg-caption {
4649 transform: none;
4650 transition: none;
4651 }
4652 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption-inner {
4653 display: flex;
4654 position: relative;
4655 max-height: none;
4656 top: auto;
4657 bottom: auto;
4658 left: auto;
4659 right: auto;
4660 width: auto;
4661 height: auto;
4662 border: none;
4663 transform: none;
4664 transition: none;
4665 }
4666 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption-inner:before {
4667 display: none;
4668 }
4669 .foogallery.fg-masonry.fg-captions-bottom.fg-caption-hover .fg-item-inner .fg-image-overlay {
4670 display: block;
4671 }
4672 .foogallery.fg-masonry.fg-captions-bottom.fg-caption-always .fg-item-inner:hover .fg-caption {
4673 visibility: visible;
4674 opacity: 1;
4675 }
4676
4677 /* Captions */
4678 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-title,
4679 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-title a {
4680 color: #FFF;
4681 }
4682 .fg-masonry.fg-captions-bottom.fg-light .fg-caption-title {
4683 color: #222;
4684 }
4685 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-desc,
4686 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-desc a {
4687 color: #ccc;
4688 }
4689 .fg-masonry.fg-captions-bottom.fg-light .fg-caption-desc,
4690 .fg-masonry.fg-captions-bottom.fg-light .fg-caption-desc a {
4691 color: #828282;
4692 }
4693 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:hover .fg-caption-desc,
4694 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:focus-within .fg-caption-desc,
4695 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:hover .fg-caption-desc a,
4696 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:focus-within .fg-caption-desc a {
4697 color: #FFF;
4698 }
4699 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:hover .fg-caption-desc,
4700 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:focus-within .fg-caption-desc,
4701 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:hover .fg-caption-desc a,
4702 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:focus-within .fg-caption-desc a {
4703 color: #222;
4704 }
4705
4706 /* Caption Buttons */
4707 .foogallery.fg-masonry:is(.fg-captions-bottom,.fg-caption-always) .fg-caption-buttons,
4708 .foogallery.fg-masonry.fg-c-l .fg-caption-buttons {
4709 justify-content: flex-start;
4710 }
4711 .foogallery.fg-masonry.fg-c-c .fg-caption-buttons {
4712 justify-content: center;
4713 }
4714 .foogallery.fg-masonry.fg-c-r .fg-caption-buttons {
4715 justify-content: flex-end;
4716 }
4717 .foogallery.fg-masonry.fg-c-j .fg-caption-buttons {
4718 justify-content: stretch;
4719 }
4720
4721 /* Handle Border Sizing for Captions Below */
4722 .fg-masonry.fg-captions-bottom .fg-caption {
4723 padding: 10px;
4724 }
4725 .fg-masonry.fg-captions-bottom.fg-border-thin .fg-caption {
4726 padding: 10px 6px 6px 6px;
4727 }
4728 .fg-masonry.fg-captions-bottom.fg-border-medium .fg-caption {
4729 padding: 10px 0 0 0;
4730 }
4731 .fg-masonry.fg-captions-bottom.fg-border-thick .fg-caption {
4732 padding: 16px 0 0 0;
4733 }
4734
4735 /* Transparent Overlays */
4736 .fg-masonry.fg-captions-bottom.fg-transparent-overlays .fg-caption {
4737 text-shadow: none;
4738 }
4739
4740 /* Transparent Theme */
4741 .fg-masonry.fg-transparent .fg-item-inner {
4742 background-color: transparent;
4743 color: #333;
4744 border-color: transparent;
4745 }
4746
4747 /* Captions */
4748 .fg-masonry.fg-transparent .fg-caption {
4749 color: #7f7f7f;
4750 }
4751 .fg-masonry.fg-transparent .fg-caption a {
4752 color: #7f7f7f;
4753 border-bottom: 1px solid #7f7f7f;
4754 }
4755 .fg-masonry.fg-transparent .fg-caption a:hover {
4756 border-bottom: none;
4757 }
4758 .fg-masonry.fg-transparent .fg-caption-title,
4759 .fg-masonry.fg-transparent .fg-caption-title a {
4760 color: #333;
4761 }
4762 .fg-masonry.fg-transparent .fg-caption-title a {
4763 border-bottom: 1px solid #333;
4764 }
4765
4766 /* Rounded Corners */
4767 .fg-masonry.fg-transparent.fg-round-full .fg-item,
4768 .fg-masonry.fg-transparent.fg-round-full .fg-item-inner {
4769 border-radius: 15px;
4770 }
4771 .fg-masonry.fg-transparent.fg-round-full .fg-image-wrap,
4772 .fg-masonry.fg-transparent.fg-round-full .fg-image-overlay,
4773 .fg-masonry.fg-transparent.fg-round-full.fg-shadow-inset-small .fg-thumb:after,
4774 .fg-masonry.fg-transparent.fg-round-full.fg-shadow-inset-medium .fg-thumb:after,
4775 .fg-masonry.fg-transparent.fg-round-full.fg-shadow-inset-large .fg-thumb:after {
4776 border-radius: 50%;
4777 overflow: hidden;
4778 }
4779
4780 .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,
4781 .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,
4782 .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,
4783 .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,
4784 .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,
4785 .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 {
4786 overflow: hidden;
4787 }
4788 .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,
4789 .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,
4790 .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,
4791 .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,
4792 .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,
4793 .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 {
4794 border-radius: 5px;
4795 }
4796 .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,
4797 .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,
4798 .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,
4799 .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,
4800 .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,
4801 .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 {
4802 border-radius: 10px;
4803 }
4804 .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,
4805 .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,
4806 .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,
4807 .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,
4808 .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,
4809 .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 {
4810 border-radius: 15px;
4811 }
4812
4813 /* Shadows */
4814 .fg-masonry.fg-transparent.fg-shadow-inset-small .fg-thumb:after {
4815 box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3);
4816 }
4817 .fg-masonry.fg-transparent.fg-shadow-inset-medium .fg-thumb:after {
4818 box-shadow: inset 0 1px 10px 0 rgba(0,0,0,0.3);
4819 }
4820 .fg-masonry.fg-transparent.fg-shadow-inset-large .fg-thumb:after {
4821 box-shadow: inset 0 1px 16px 0 rgba(0,0,0,0.3);
4822 }
4823
4824 .fg-masonry.fg-transparent.fg-shadow-outline .fg-item-inner {
4825 box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.5);
4826 }
4827 .fg-masonry.fg-transparent.fg-shadow-small .fg-item-inner {
4828 box-shadow: 0 1px 4px 0 rgba(128, 128, 128, 0.5);
4829 }
4830 .fg-masonry.fg-transparent.fg-shadow-medium .fg-item-inner {
4831 box-shadow: 0 1px 10px 0 rgba(128, 128, 128, 0.5);
4832 }
4833 .fg-masonry.fg-transparent.fg-shadow-large .fg-item-inner {
4834 box-shadow: 0 1px 16px 0 rgba(128, 128, 128, 0.5);
4835 }
4836
4837 /* Transitions */
4838 .fg-masonry.fg-hover-instant .fg-loaded .fg-caption-desc,
4839 .fg-masonry.fg-hover-fade .fg-loaded .fg-caption-desc,
4840 .fg-masonry.fg-hover-slide-up .fg-loaded .fg-caption-desc,
4841 .fg-masonry.fg-hover-slide-down .fg-loaded .fg-caption-desc,
4842 .fg-masonry.fg-hover-slide-left .fg-loaded .fg-caption-desc,
4843 .fg-masonry.fg-hover-slide-right .fg-loaded .fg-caption-desc,
4844 .fg-masonry.fg-hover-push .fg-loaded .fg-caption-desc,
4845 .fg-masonry.fg-hover-colorize .fg-loaded .fg-caption-desc,
4846 .fg-masonry.fg-hover-grayscale .fg-loaded .fg-caption-desc,
4847 .fg-masonry.fg-hover-scale .fg-loaded .fg-caption-desc,
4848 .fg-masonry.fg-hover-zoomed .fg-loaded .fg-caption-desc,
4849 .fg-masonry.fg-hover-colorize .fg-loaded .fg-caption-desc,
4850 .fg-masonry.fg-hover-grayscale .fg-loaded .fg-caption-desc {
4851 transition-timing-function: ease;
4852 transition-duration: 300ms;
4853 backface-visibility: hidden;
4854 }
4855
4856 /* Base Styles */
4857 .fg-justified {
4858 box-sizing: border-box;
4859 position: relative;
4860 text-align: center;
4861 }
4862 .foogallery.fg-justified .fg-item {
4863 box-sizing: border-box;
4864 display: inline-block;
4865 margin: 0;
4866 padding: 0;
4867 }
4868 .foogallery.fg-justified .fg-item-inner,
4869 .foogallery.fg-justified .fg-thumb,
4870 .foogallery.fg-justified .fg-image {
4871 box-sizing: border-box;
4872 display: block;
4873 margin: 0;
4874 padding: 0;
4875 }
4876 .fg-justified .fg-item {
4877 visibility: visible;
4878 position: relative;
4879 }
4880 .fg-justified .fg-item-inner {
4881 position: relative;
4882 width: 100%;
4883 height: 100%;
4884 }
4885 .fg-justified .fg-thumb {
4886 position: relative;
4887 overflow: hidden;
4888 }
4889 .fg-justified .fg-image {
4890 z-index: 1;
4891 }
4892 .fg-justified .fg-item.fg-positioned .fg-thumb,
4893 .fg-justified .fg-item.fg-positioned .fg-image-wrap {
4894 width: 100%;
4895 height: 100%;
4896 }
4897 .fg-justified .fg-item.fg-positioned .fg-image {
4898 width: 100%!important;
4899 height: auto!important;
4900 min-height: 100%;
4901 }
4902 .fg-simple_portfolio {
4903 --fg-gutter: 10px;
4904
4905 display: flex;
4906 flex-wrap: wrap;
4907 justify-content: center;
4908 align-items: stretch;
4909 align-content: center;
4910 gap: var(--fg-gutter);
4911 }
4912 .fg-simple_portfolio .fg-item {
4913 position: relative;
4914 flex-grow: 0;
4915 flex-shrink: 0;
4916 flex-basis: auto;
4917 margin: 0;
4918 max-width: 100%;
4919 }
4920 .fg-simple_portfolio .fg-item-inner {
4921 display: flex;
4922 flex-direction: column;
4923 margin: 0;
4924 height: 100%;
4925 }
4926 .fg-simple_portfolio.fg-captions-top .fg-item-inner {
4927 flex-direction: column-reverse;
4928 }
4929 .fg-simple_portfolio .fg-image {
4930 height: auto;
4931 width: 100%;
4932 }
4933
4934 /* Some badly written themes apply min-width:0 and min-height:0 to every element in the page which causes layout issues with flex. */
4935 .fg-simple_portfolio .fg-thumb {
4936 min-width: auto;
4937 min-height: auto;
4938 }
4939
4940 /* Reset captions for the portfolio */
4941 .foogallery.fg-simple_portfolio .fg-item-inner .fg-caption {
4942 visibility: visible;
4943 opacity: 1;
4944 font-size: 13px;
4945 position: relative;
4946 top: auto;
4947 bottom: auto;
4948 left: auto;
4949 right: auto;
4950 width: 100%;
4951 height: 100%;
4952 text-transform: none;
4953 transform: none;
4954 transition: none;
4955 background-color: transparent;
4956 border: none;
4957 text-align: left;
4958 }
4959 .foogallery.fg-simple_portfolio.fg-c-l .fg-item-inner .fg-caption {
4960 text-align: left;
4961 }
4962 .foogallery.fg-simple_portfolio.fg-c-c .fg-item-inner .fg-caption {
4963 text-align: center;
4964 }
4965 .foogallery.fg-simple_portfolio.fg-c-r .fg-item-inner .fg-caption {
4966 text-align: right;
4967 }
4968 .foogallery.fg-simple_portfolio.fg-c-j .fg-item-inner .fg-caption {
4969 text-align: justify;
4970 }
4971 .foogallery.fg-simple_portfolio .fg-item-inner:hover .fg-caption {
4972 transform: none;
4973 transition: none;
4974 }
4975 .foogallery.fg-simple_portfolio .fg-item-inner .fg-caption-inner {
4976 top: auto;
4977 bottom: auto;
4978 left: auto;
4979 right: auto;
4980 width: auto;
4981 height: auto;
4982 border: none;
4983 transform: none;
4984 transition: none;
4985 }
4986 .foogallery.fg-simple_portfolio .fg-item-inner .fg-caption-inner:before {
4987 display: none;
4988 }
4989 .foogallery.fg-simple_portfolio.fg-caption-hover .fg-item-inner .fg-image-overlay {
4990 display: block;
4991 }
4992 .foogallery.fg-simple_portfolio.fg-caption-always .fg-item-inner:hover .fg-caption {
4993 visibility: visible;
4994 opacity: 1;
4995 }
4996 .fg-simple_portfolio .fg-caption-title {
4997 white-space: normal;
4998 height: auto;
4999 }
5000 .fg-simple_portfolio .fg-caption-desc {
5001 flex: unset;
5002 }
5003
5004 /* Captions */
5005 .fg-simple_portfolio.fg-dark .fg-caption-title,
5006 .fg-simple_portfolio.fg-dark .fg-caption-title a {
5007 color: #FFF;
5008 }
5009 .fg-simple_portfolio.fg-light .fg-caption-title {
5010 color: #222;
5011 }
5012 .fg-simple_portfolio.fg-dark .fg-caption-desc,
5013 .fg-simple_portfolio.fg-dark .fg-caption-desc a {
5014 color: #ccc;
5015 }
5016 .fg-simple_portfolio.fg-light .fg-caption-desc,
5017 .fg-simple_portfolio.fg-light .fg-caption-desc a {
5018 color: #828282;
5019 }
5020 .fg-simple_portfolio.fg-dark .fg-item-inner:hover .fg-caption-desc,
5021 .fg-simple_portfolio.fg-dark .fg-item-inner:focus-within .fg-caption-desc,
5022 .fg-simple_portfolio.fg-dark .fg-item-inner:hover .fg-caption-desc a,
5023 .fg-simple_portfolio.fg-dark .fg-item-inner:focus-within .fg-caption-desc a {
5024 color: #FFF;
5025 }
5026 .fg-simple_portfolio.fg-light .fg-item-inner:hover .fg-caption-desc,
5027 .fg-simple_portfolio.fg-light .fg-item-inner:focus-within .fg-caption-desc,
5028 .fg-simple_portfolio.fg-light .fg-item-inner:hover .fg-caption-desc a,
5029 .fg-simple_portfolio.fg-light .fg-item-inner:focus-within .fg-caption-desc a {
5030 color: #222;
5031 }
5032
5033 /* Caption Buttons */
5034 .foogallery.fg-simple_portfolio.fg-c-c .fg-caption-buttons {
5035 justify-content: center;
5036 }
5037 .foogallery.fg-simple_portfolio .fg-caption-buttons,
5038 .foogallery.fg-simple_portfolio.fg-c-l .fg-caption-buttons {
5039 justify-content: flex-start;
5040 }
5041 .foogallery.fg-simple_portfolio.fg-c-r .fg-caption-buttons {
5042 justify-content: flex-end;
5043 }
5044 .foogallery.fg-simple_portfolio.fg-c-j .fg-caption-buttons {
5045 justify-content: stretch;
5046 }
5047
5048 /* Handle Border Sizing */
5049 .fg-simple_portfolio .fg-caption {
5050 padding: 10px;
5051 }
5052 .fg-simple_portfolio.fg-border-thin .fg-caption {
5053 padding: 10px 6px 6px 6px;
5054 }
5055 .fg-simple_portfolio.fg-captions-top.fg-border-thin .fg-caption {
5056 padding: 6px 6px 10px 6px;
5057 }
5058 .fg-simple_portfolio.fg-border-medium .fg-caption {
5059 padding: 10px 0 0 0;
5060 }
5061 .fg-simple_portfolio.fg-captions-top.fg-border-medium .fg-caption {
5062 padding: 0 0 10px 0;
5063 }
5064 .fg-simple_portfolio.fg-border-thick .fg-caption {
5065 padding: 16px 0 0 0;
5066 }
5067 .fg-simple_portfolio.fg-captions-top.fg-border-thick .fg-caption {
5068 padding: 0 0 16px 0;
5069 }
5070
5071 /* Transparent Overlays */
5072 .fg-simple_portfolio.fg-transparent-overlays .fg-caption {
5073 text-shadow: none;
5074 }
5075 /* Transparent Theme */
5076 .fg-simple_portfolio.fg-transparent .fg-item-inner {
5077 background-color: transparent;
5078 color: #333;
5079 border-color: transparent;
5080 }
5081
5082 /* Captions */
5083 .fg-simple_portfolio.fg-transparent .fg-caption {
5084 color: #7f7f7f;
5085 }
5086 .fg-simple_portfolio.fg-transparent .fg-caption a {
5087 color: #7f7f7f;
5088 border-bottom: 1px solid #7f7f7f;
5089 }
5090 .fg-simple_portfolio.fg-transparent .fg-caption a:hover {
5091 border-bottom: none;
5092 }
5093 .fg-simple_portfolio.fg-transparent .fg-caption-title,
5094 .fg-simple_portfolio.fg-transparent .fg-caption-title a {
5095 color: #333;
5096 }
5097 .fg-simple_portfolio.fg-transparent .fg-caption-title a {
5098 border-bottom: 1px solid #333;
5099 }
5100
5101 /* Rounded Corners */
5102 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-item,
5103 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-item-inner {
5104 border-radius: 15px;
5105 }
5106 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-image-wrap,
5107 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-image-overlay,
5108 .fg-simple_portfolio.fg-transparent.fg-round-full.fg-shadow-inset-small .fg-thumb:after,
5109 .fg-simple_portfolio.fg-transparent.fg-round-full.fg-shadow-inset-medium .fg-thumb:after,
5110 .fg-simple_portfolio.fg-transparent.fg-round-full.fg-shadow-inset-large .fg-thumb:after {
5111 border-radius: 50%;
5112 overflow: hidden;
5113 }
5114
5115 .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,
5116 .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,
5117 .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,
5118 .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,
5119 .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,
5120 .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 {
5121 overflow: hidden;
5122 }
5123 .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,
5124 .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,
5125 .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,
5126 .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,
5127 .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,
5128 .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 {
5129 border-radius: 5px;
5130 }
5131 .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,
5132 .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,
5133 .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,
5134 .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,
5135 .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,
5136 .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 {
5137 border-radius: 10px;
5138 }
5139 .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,
5140 .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,
5141 .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,
5142 .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,
5143 .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,
5144 .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 {
5145 border-radius: 15px;
5146 }
5147
5148 /* Shadows */
5149 .fg-simple_portfolio.fg-transparent.fg-shadow-inset-small .fg-thumb:after {
5150 box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3);
5151 }
5152 .fg-simple_portfolio.fg-transparent.fg-shadow-inset-medium .fg-thumb:after {
5153 box-shadow: inset 0 1px 10px 0 rgba(0,0,0,0.3);
5154 }
5155 .fg-simple_portfolio.fg-transparent.fg-shadow-inset-large .fg-thumb:after {
5156 box-shadow: inset 0 1px 16px 0 rgba(0,0,0,0.3);
5157 }
5158
5159 .fg-simple_portfolio.fg-transparent.fg-shadow-outline .fg-item-inner {
5160 box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.5);
5161 }
5162 .fg-simple_portfolio.fg-transparent.fg-shadow-small .fg-item-inner {
5163 box-shadow: 0 1px 4px 0 rgba(128, 128, 128, 0.5);
5164 }
5165 .fg-simple_portfolio.fg-transparent.fg-shadow-medium .fg-item-inner {
5166 box-shadow: 0 1px 10px 0 rgba(128, 128, 128, 0.5);
5167 }
5168 .fg-simple_portfolio.fg-transparent.fg-shadow-large .fg-item-inner {
5169 box-shadow: 0 1px 16px 0 rgba(128, 128, 128, 0.5);
5170 }
5171
5172 /* Transitions */
5173 .fg-simple_portfolio.fg-hover-instant .fg-loaded .fg-caption-desc,
5174 .fg-simple_portfolio.fg-hover-fade .fg-loaded .fg-caption-desc,
5175 .fg-simple_portfolio.fg-hover-slide-up .fg-loaded .fg-caption-desc,
5176 .fg-simple_portfolio.fg-hover-slide-down .fg-loaded .fg-caption-desc,
5177 .fg-simple_portfolio.fg-hover-slide-left .fg-loaded .fg-caption-desc,
5178 .fg-simple_portfolio.fg-hover-slide-right .fg-loaded .fg-caption-desc,
5179 .fg-simple_portfolio.fg-hover-push .fg-loaded .fg-caption-desc,
5180 .fg-simple_portfolio.fg-hover-colorize .fg-loaded .fg-caption-desc,
5181 .fg-simple_portfolio.fg-hover-grayscale .fg-loaded .fg-caption-desc,
5182 .fg-simple_portfolio.fg-hover-scale .fg-loaded .fg-caption-desc,
5183 .fg-simple_portfolio.fg-hover-zoomed .fg-loaded .fg-caption-desc,
5184 .fg-simple_portfolio.fg-hover-colorize .fg-loaded .fg-caption-desc,
5185 .fg-simple_portfolio.fg-hover-grayscale .fg-loaded .fg-caption-desc {
5186 transition-timing-function: ease;
5187 transition-duration: 300ms;
5188 backface-visibility: hidden;
5189 }
5190
5191 /* Polaroid */
5192 .foogallery.fg-preset.fg-polaroid .fg-item {
5193 -webkit-backface-visibility: hidden;
5194 backface-visibility: hidden;
5195 transition: transform 0.35s, background-color 0.65s;
5196 }
5197 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(2n+1) {
5198 -webkit-transform: rotate(3deg);
5199 transform: rotate(3deg);
5200 }
5201 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(2n) {
5202 -webkit-transform: rotate(-3deg);
5203 transform: rotate(-3deg);
5204 }
5205 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(3n) {
5206 -webkit-transform: rotate(1deg);
5207 transform: rotate(1deg);
5208 }
5209 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(5n) {
5210 -webkit-transform: rotate(-2deg);
5211 transform: rotate(-2deg);
5212 }
5213
5214 .foogallery.fg-preset.fg-polaroid .fg-item:hover {
5215 -webkit-transform: rotate(0);
5216 transform: rotate(0);
5217 }
5218
5219 .foogallery.fg-preset.fg-polaroid .fg-caption {
5220 position: relative;
5221 width: auto;
5222 font-family: "Segoe Print Regular","Comic Sans MS",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
5223 }
5224
5225 .foogallery.fg-preset.fg-polaroid .fg-caption-inner {
5226 text-shadow: none;
5227 line-height: 1.4;
5228 justify-content: center;
5229 }
5230 .foogallery.fg-preset.fg-polaroid .fg-caption-inner,
5231 .foogallery.fg-preset.fg-polaroid .fg-caption-title {
5232 position: relative;
5233 width: auto;
5234 }
5235 .foogallery.fg-preset.fg-polaroid .fg-caption-title {
5236 text-align: center;
5237 }
5238 .foogallery.fg-preset.fg-polaroid .fg-caption-desc {
5239 display: none;
5240 }
5241
5242 /* Themes */
5243 .foogallery.fg-preset.fg-polaroid .fg-caption-title,
5244 .foogallery.fg-light.fg-preset.fg-polaroid .fg-caption-title {
5245 color: #333;
5246 }
5247 .foogallery.fg-dark.fg-preset.fg-polaroid .fg-caption-title {
5248 color: #FFF;
5249 }
5250
5251 /* Transparent Overlays */
5252 .foogallery.fg-preset.fg-polaroid.fg-transparent-overlays .fg-caption {
5253 text-shadow: none;
5254 }
5255
5256 /* Handle Border Sizing */
5257 .foogallery.fg-preset.fg-polaroid .fg-caption {
5258 padding: 10px;
5259 }
5260 .foogallery.fg-preset.fg-polaroid.fg-border-thin .fg-caption {
5261 padding: 10px 4px 4px 4px;
5262 }
5263 .foogallery.fg-preset.fg-polaroid.fg-captions-top.fg-border-thin .fg-caption {
5264 padding: 4px 4px 10px 4px;
5265 }
5266 .foogallery.fg-preset.fg-polaroid.fg-border-medium .fg-caption {
5267 padding: 10px 0 0 0;
5268 }
5269 .foogallery.fg-preset.fg-polaroid.fg-captions-top.fg-border-medium .fg-caption {
5270 padding: 0 0 10px 0;
5271 }
5272 .foogallery.fg-preset.fg-polaroid.fg-border-thick .fg-caption {
5273 padding: 16px 0 0 0;
5274 }
5275 .foogallery.fg-preset.fg-polaroid.fg-captions-top.fg-border-thick .fg-caption {
5276 padding: 0 0 16px 0;
5277 }
5278 /* Base styles */
5279 .fg-image-viewer {
5280 display: block;
5281 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
5282 }
5283 .fg-image-viewer.fg-left {
5284 text-align: left;
5285 }
5286
5287 .fg-image-viewer.fg-center {
5288 text-align: center;
5289 }
5290 .fg-image-viewer.fg-right {
5291 text-align: right;
5292 }
5293
5294 .fiv-inner {
5295 position: relative;
5296 display: inline-block;
5297 max-width: 100%;
5298 z-index: 6;
5299 }
5300 .fiv-inner .fiv-inner-container {
5301 position: relative;
5302 max-width: 100%;
5303 border-color: transparent;
5304 border-style: solid;
5305 border-width: 0;
5306 border-bottom-width: 4px;
5307 z-index: 5;
5308 }
5309 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb,
5310 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb:hover,
5311 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb:active,
5312 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb:visited {
5313 position: relative;
5314 display: block;
5315 border: none;
5316 outline: none;
5317 text-decoration: none;
5318 box-shadow: none;
5319 max-width: 100%;
5320 }
5321 .foogallery.fg-image-viewer .fg-thumb {
5322 border-radius: inherit;
5323 }
5324
5325 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item {
5326 position: absolute;
5327 visibility: visible;
5328 opacity: 1;
5329 border: none;
5330 outline: none;
5331 text-decoration: none;
5332 box-shadow: none;
5333 max-width: 100%;
5334 }
5335 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item:first-of-type {
5336 position: relative;
5337 }
5338 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb img {
5339 display: block;
5340 max-width: 100%;
5341 height: auto;
5342 border: none;
5343 outline: none;
5344 text-decoration: none;
5345 }
5346
5347 .fg-image-viewer .fiv-inner .fiv-ctrls {
5348 display: block;
5349 text-align: center;
5350 font-size: 14px;
5351 border-style: solid;
5352 line-height: 34px;
5353 position: relative;
5354 z-index: 6;
5355 }
5356 .fg-image-viewer .fiv-inner .fiv-ctrls:after {
5357 content: '';
5358 display: block;
5359 clear: both;
5360 }
5361 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-count {
5362 display: inline-block;
5363 font-weight: normal;
5364 margin: 0;
5365 }
5366 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev,
5367 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next {
5368 display: flex;
5369 flex-direction: column;
5370 align-items: center;
5371 justify-content: stretch;
5372 height: unset;
5373 cursor: pointer;
5374 -webkit-user-select: none;
5375 -moz-user-select: none;
5376 -ms-user-select: none;
5377 user-select: none;
5378 border-style: solid;
5379 border-width: 1px;
5380 border-color: transparent;
5381 background: none;
5382 min-width: 80px;
5383 position: relative;
5384 overflow: hidden;
5385 transition: background-color .3s;
5386 box-shadow: none;
5387 outline: none;
5388 padding: 0 6px;
5389 margin: 0;
5390 font-family: inherit;
5391 font-size: inherit;
5392 font-weight: normal;
5393 }
5394 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5395 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5396 transform: translateY(0);
5397 }
5398 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:before,
5399 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:before {
5400 display: block;
5401 position: absolute;
5402 font-size: 24px;
5403 line-height: 32px;
5404 top:0;
5405 left:0;
5406 width: 100%;
5407 height: 100%;
5408 transform: translateY(0);
5409 transition: transform .3s;
5410 }
5411 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus):before,
5412 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus):before {
5413 transform: translateY(-100%);
5414 }
5415 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev span,
5416 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next span {
5417 display: block;
5418 flex-grow: 1;
5419 line-height: 34px;
5420 width: 100%;
5421 transform: translateY(100%);
5422 transition: transform .3s;
5423 }
5424 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus) span,
5425 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) span {
5426 transform: translateY(0);
5427 }
5428 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
5429 float: left;
5430 }
5431 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:before {
5432 content: '\2190';
5433 }
5434 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next {
5435 float: right;
5436 }
5437 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:before {
5438 content: '\2192';
5439 }
5440 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-count span {
5441 margin: 0 4px;
5442 }
5443 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
5444 float: right;
5445 }
5446 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:before {
5447 content: '\2192';
5448 }
5449 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next {
5450 float: left;
5451 }
5452 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:before {
5453 content: '\2190';
5454 }
5455
5456 /* Captions */
5457
5458 .foogallery.fg-image-viewer.fg-caption-always .fg-item-inner .fg-caption {
5459 border: none;
5460 }
5461
5462 /* Theme - Default (Light) */
5463 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls,
5464 .fg-image-viewer.fg-light .fiv-inner .fiv-inner-container,
5465 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-count,
5466 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-prev,
5467 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-next {
5468 background-color: #FFF;
5469 color: #333;
5470 border-color: #FFF;
5471 }
5472 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-prev,
5473 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-next {
5474 border-color: #ddd;
5475 }
5476 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5477 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5478 background-color: #F2F2F2;
5479 }
5480
5481 /* Theme - Dark */
5482 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls,
5483 .fg-image-viewer.fg-dark .fiv-inner .fiv-inner-container,
5484 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-count,
5485 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-prev,
5486 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-next {
5487 background-color: #333;
5488 color: #FFF;
5489 border-color: #333;
5490 }
5491 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-prev,
5492 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-next {
5493 border-color: #222;
5494 }
5495 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5496 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5497 background-color: #444;
5498 }
5499
5500 /* Border Size */
5501 .foogallery.fg-image-viewer.fg-border-thin .fg-item-inner,
5502 .foogallery.fg-image-viewer.fg-border-medium .fg-item-inner,
5503 .foogallery.fg-image-viewer.fg-border-thick .fg-item-inner {
5504 border-width: 0;
5505 }
5506 .foogallery.fg-image-viewer .fiv-ctrls,
5507 .foogallery.fg-image-viewer.fg-border-thin .fiv-inner-container {
5508 border-width: 4px;
5509 }
5510 .foogallery.fg-image-viewer.fg-border-medium .fiv-ctrls,
5511 .foogallery.fg-image-viewer.fg-border-medium .fiv-inner-container {
5512 border-width: 10px;
5513 }
5514 .foogallery.fg-image-viewer.fg-border-thick .fiv-ctrls,
5515 .foogallery.fg-image-viewer.fg-border-thick .fiv-inner-container {
5516 border-width: 16px;
5517 }
5518 .foogallery.fg-image-viewer .fiv-ctrls,
5519 .foogallery.fg-image-viewer.fg-border-thin .fiv-ctrls,
5520 .foogallery.fg-image-viewer.fg-border-medium .fiv-ctrls,
5521 .foogallery.fg-image-viewer.fg-border-thick .fiv-ctrls {
5522 border-top-width: 1px;
5523 }
5524
5525 /* Rounded Corners */
5526 .foogallery.fg-image-viewer.fg-round-small .fg-item,
5527 .foogallery.fg-image-viewer.fg-round-small .fg-item-inner,
5528 .foogallery.fg-image-viewer.fg-round-small .fiv-inner,
5529 .foogallery.fg-image-viewer.fg-round-small .fiv-inner-container,
5530 .foogallery.fg-image-viewer.fg-round-small .fiv-ctrls {
5531 border-radius: 5px;
5532 }
5533 .foogallery.fg-image-viewer.fg-round-small .fg-item,
5534 .foogallery.fg-image-viewer.fg-round-small .fg-item-inner,
5535 .foogallery.fg-image-viewer.fg-round-small .fiv-inner-container {
5536 border-bottom-left-radius: 0;
5537 border-bottom-right-radius: 0;
5538 }
5539 .foogallery.fg-image-viewer.fg-round-small .fiv-ctrls {
5540 border-top-left-radius: 0;
5541 border-top-right-radius: 0;
5542 }
5543 .foogallery.fg-image-viewer.fg-round-small .fiv-prev,
5544 .foogallery.fg-image-viewer.fg-round-small .fiv-next {
5545 border-radius: 3px;
5546 }
5547
5548 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fg-item,
5549 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fg-item-inner,
5550 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fiv-prev,
5551 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fiv-next,
5552 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fg-item,
5553 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fg-item-inner,
5554 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fiv-prev,
5555 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fiv-next,
5556 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fg-item,
5557 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fg-item-inner,
5558 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fiv-prev,
5559 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fiv-next {
5560 border-radius: 3px;
5561 }
5562
5563 .foogallery.fg-image-viewer.fg-round-medium .fg-item,
5564 .foogallery.fg-image-viewer.fg-round-medium .fg-item-inner,
5565 .foogallery.fg-image-viewer.fg-round-medium .fiv-inner,
5566 .foogallery.fg-image-viewer.fg-round-medium .fiv-inner-container,
5567 .foogallery.fg-image-viewer.fg-round-medium .fiv-ctrls {
5568 border-radius: 10px;
5569 }
5570 .foogallery.fg-image-viewer.fg-round-medium .fg-item,
5571 .foogallery.fg-image-viewer.fg-round-medium .fg-item-inner,
5572 .foogallery.fg-image-viewer.fg-round-medium .fiv-inner-container {
5573 border-bottom-left-radius: 0;
5574 border-bottom-right-radius: 0;
5575 }
5576 .foogallery.fg-image-viewer.fg-round-medium .fiv-ctrls {
5577 border-top-left-radius: 0;
5578 border-top-right-radius: 0;
5579 }
5580 .foogallery.fg-image-viewer.fg-round-medium .fiv-prev,
5581 .foogallery.fg-image-viewer.fg-round-medium .fiv-next {
5582 border-radius: 5px;
5583 }
5584 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fg-item,
5585 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fg-item-inner,
5586 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fiv-prev,
5587 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fiv-next {
5588 border-radius: 5px;
5589 }
5590 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fg-item,
5591 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fg-item-inner,
5592 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fiv-prev,
5593 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fiv-next,
5594 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fg-item,
5595 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fg-item-inner,
5596 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fiv-prev,
5597 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fiv-next {
5598 border-radius: 3px;
5599 }
5600
5601 .foogallery.fg-image-viewer.fg-round-large .fg-item,
5602 .foogallery.fg-image-viewer.fg-round-large .fg-item-inner,
5603 .foogallery.fg-image-viewer.fg-round-large .fiv-inner,
5604 .foogallery.fg-image-viewer.fg-round-large .fiv-inner-container,
5605 .foogallery.fg-image-viewer.fg-round-large .fiv-ctrls {
5606 border-radius: 15px;
5607 }
5608 .foogallery.fg-image-viewer.fg-round-large .fg-item,
5609 .foogallery.fg-image-viewer.fg-round-large .fg-item-inner,
5610 .foogallery.fg-image-viewer.fg-round-large .fiv-inner-container {
5611 border-bottom-left-radius: 0;
5612 border-bottom-right-radius: 0;
5613 }
5614 .foogallery.fg-image-viewer.fg-round-large .fiv-ctrls {
5615 border-top-left-radius: 0;
5616 border-top-right-radius: 0;
5617 }
5618 .foogallery.fg-image-viewer.fg-round-large .fiv-prev,
5619 .foogallery.fg-image-viewer.fg-round-large .fiv-next {
5620 border-radius: 11px;
5621 }
5622 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fg-item,
5623 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fg-item-inner,
5624 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fiv-prev,
5625 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fiv-next {
5626 border-radius: 11px;
5627 }
5628
5629 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fg-item,
5630 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fg-item-inner,
5631 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fiv-prev,
5632 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fiv-next {
5633 border-radius: 5px;
5634 }
5635
5636 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fg-item,
5637 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fg-item-inner,
5638 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fiv-prev,
5639 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fiv-next {
5640 border-radius: 3px;
5641 }
5642
5643 .foogallery.fg-image-viewer.fg-round-full .fiv-inner,
5644 .foogallery.fg-image-viewer.fg-round-full .fiv-inner-container,
5645 .foogallery.fg-image-viewer.fg-round-full .fiv-prev,
5646 .foogallery.fg-image-viewer.fg-round-full .fiv-next {
5647 border-radius: 50%;
5648 }
5649
5650 /* Drop Shadows */
5651 .foogallery.fg-image-viewer.fg-light.fg-shadow-outline .fg-item-inner,
5652 .foogallery.fg-image-viewer.fg-dark.fg-shadow-outline .fg-item-inner,
5653 .foogallery.fg-image-viewer.fg-light.fg-shadow-small .fg-item-inner,
5654 .foogallery.fg-image-viewer.fg-dark.fg-shadow-small .fg-item-inner,
5655 .foogallery.fg-image-viewer.fg-light.fg-shadow-medium .fg-item-inner,
5656 .foogallery.fg-image-viewer.fg-dark.fg-shadow-medium .fg-item-inner,
5657 .foogallery.fg-image-viewer.fg-light.fg-shadow-large .fg-item-inner,
5658 .foogallery.fg-image-viewer.fg-dark.fg-shadow-large .fg-item-inner {
5659 box-shadow: none;
5660 }
5661
5662 .foogallery.fg-image-viewer.fg-light.fg-shadow-outline .fiv-inner {
5663 box-shadow: 0 0 0 1px #ddd;
5664 }
5665 .foogallery.fg-image-viewer.fg-dark.fg-shadow-outline .fiv-inner {
5666 box-shadow: 0 0 0 1px #222;
5667 }
5668 .foogallery.fg-image-viewer.fg-light.fg-shadow-small .fiv-inner,
5669 .foogallery.fg-image-viewer.fg-dark.fg-shadow-small .fiv-inner {
5670 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
5671 }
5672 .foogallery.fg-image-viewer.fg-light.fg-shadow-medium .fiv-inner,
5673 .foogallery.fg-image-viewer.fg-dark.fg-shadow-medium .fiv-inner {
5674 box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);
5675 }
5676 .foogallery.fg-image-viewer.fg-light.fg-shadow-large .fiv-inner,
5677 .foogallery.fg-image-viewer.fg-dark.fg-shadow-large .fiv-inner {
5678 box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.5);
5679 }
5680
5681 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls {
5682 border: none;
5683 position: absolute;
5684 top: 0;
5685 left: 0;
5686 width: 100%;
5687 height: 100%;
5688 z-index: 6;
5689 background: none;
5690 pointer-events: none;
5691 visibility: visible;
5692 opacity: 1;
5693 transition: visibility .3s ease, opacity .3s ease;
5694 }
5695 .fg-image-viewer.fg-overlay-controls.fg-not-ready .fiv-inner .fiv-ctrls {
5696 visibility: hidden;
5697 opacity: 0;
5698 }
5699 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev,
5700 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next {
5701 position: absolute;
5702 top: 50%;
5703 transform: translateY(-50%);
5704 border-radius: 50%;
5705 min-width: unset;
5706 width: 40px;
5707 height: 40px;
5708 pointer-events: auto;
5709 opacity: 0.3;
5710 transition: opacity .3s ease;
5711 }
5712 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev {
5713 left: 20px;
5714 }
5715 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next {
5716 right: 20px;
5717 }
5718
5719 /*
5720 * Spotlight uses inline SVG arrows. Reset the complete icon layout so theme
5721 * rules and the legacy image-viewer control padding cannot offset the SVG.
5722 */
5723 .foogallery.fg-spotlight .fiv-inner .fiv-ctrls .fiv-prev,
5724 .foogallery.fg-spotlight .fiv-inner .fiv-ctrls .fiv-next {
5725 flex-direction: row;
5726 align-items: center;
5727 justify-content: center;
5728 padding: 0;
5729 line-height: 0;
5730 }
5731 .foogallery.fg-spotlight .fiv-inner .fiv-ctrls .fiv-prev > svg,
5732 .foogallery.fg-spotlight .fiv-inner .fiv-ctrls .fiv-next > svg {
5733 display: block;
5734 flex: none;
5735 width: 100%;
5736 height: 100%;
5737 margin: 0;
5738 }
5739 .fg-image-viewer.fg-overlay-controls .fiv-inner:hover .fiv-ctrls .fiv-prev,
5740 .fg-image-viewer.fg-overlay-controls .fiv-inner:hover .fiv-ctrls .fiv-next {
5741 opacity: 0.6;
5742 }
5743 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5744 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5745 opacity: 1;
5746 }
5747
5748 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev:before,
5749 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next:before {
5750 content: '\279C';
5751 width: 100%;
5752 height: 100%;
5753 transform: translateY(0);
5754 line-height: 40px;
5755 }
5756 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev:before {
5757 transform: rotate(180deg);
5758 }
5759 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev span,
5760 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next span {
5761 display: none;
5762 }
5763
5764 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-count {
5765 display: none;
5766 }
5767
5768 /* Border Sizes */
5769 .fg-image-viewer.fg-overlay-controls:not(.fg-border-thin,.fg-border-medium,.fg-border-thick) .fg-item-inner,
5770 .fg-image-viewer.fg-overlay-controls:not(.fg-border-thin,.fg-border-medium,.fg-border-thick) .fiv-inner .fiv-inner-container { background-color: transparent; }
5771
5772 .fg-image-viewer.fg-overlay-controls { --border-width: 0px; }
5773 .fg-image-viewer.fg-overlay-controls.fg-border-thin { --border-width: 4px; }
5774 .fg-image-viewer.fg-overlay-controls.fg-border-medium { --border-width: 8px; }
5775 .fg-image-viewer.fg-overlay-controls.fg-border-thick { --border-width: 16px; }
5776
5777 .fg-image-viewer.fg-overlay-controls:not(.fg-border-thin,.fg-border-medium,.fg-border-thick) .fiv-inner .fiv-inner-container {
5778 border: none;
5779 }
5780 .fg-image-viewer.fg-overlay-controls.fg-border-thin .fiv-inner .fiv-ctrls,
5781 .fg-image-viewer.fg-overlay-controls.fg-border-medium .fiv-inner .fiv-ctrls,
5782 .fg-image-viewer.fg-overlay-controls.fg-border-thick .fiv-inner .fiv-ctrls {
5783 top: var(--border-width);
5784 left: var(--border-width);
5785 width: calc(100% - calc(var(--border-width) * 2));
5786 height: calc(100% - calc(var(--border-width) * 2));
5787 }
5788
5789 /* Border Radius */
5790 .fg-image-viewer.fg-overlay-controls { --border-radius: 0px; }
5791 .fg-image-viewer.fg-overlay-controls.fg-round-small { --border-radius: 5px; }
5792 .fg-image-viewer.fg-overlay-controls.fg-round-medium { --border-radius: 10px; }
5793 .fg-image-viewer.fg-overlay-controls.fg-round-large { --border-radius: 15px; }
5794
5795 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fiv-inner,
5796 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fiv-inner-container,
5797 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fiv-inner,
5798 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fiv-inner-container,
5799 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fiv-inner,
5800 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fiv-inner-container {
5801 border-radius: var(--border-radius);
5802 }
5803 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fg-item,
5804 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fg-item-inner,
5805 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fg-item,
5806 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fg-item-inner,
5807 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fg-item,
5808 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fg-item-inner {
5809 border-radius: max(0px, calc(var(--border-radius) - var(--border-width)));
5810 }
5811
5812 /* Paging Overrides */
5813 .fg-image-viewer.fg-overlay-controls .fg-paging-container {
5814 position: absolute;
5815 bottom: 0;
5816 left: 0;
5817 width: 100%;
5818 line-height: 1;
5819 }
5820 .fg-image-viewer.fg-overlay-controls.fg-dots-left .fg-paging-container {
5821 text-align: left;
5822 }
5823 .fg-image-viewer.fg-overlay-controls.fg-dots-center .fg-paging-container {
5824 text-align: center;
5825 }
5826 .fg-image-viewer.fg-overlay-controls.fg-dots-right .fg-paging-container {
5827 text-align: right;
5828 }
5829 .fg-image-viewer.fg-overlay-controls .fg-paging-container .fg-dots {
5830 pointer-events: auto;
5831 opacity: 0.3;
5832 transition: opacity .3s ease;
5833 }
5834 .fg-image-viewer.fg-overlay-controls .fiv-inner:hover .fg-paging-container .fg-dots {
5835 opacity: 0.6;
5836 }
5837 .fg-image-viewer.fg-overlay-controls .fiv-inner .fg-paging-container .fg-dots:is(:hover,:focus-within) {
5838 opacity: 1;
5839 }
5840
5841 .foogallery.fg-thumbnail,
5842 .foogallery.fg-thumbnail.fg-center {
5843 text-align: center;
5844 }
5845 .foogallery.fg-thumbnail.fg-left {
5846 text-align: left;
5847 }
5848 .foogallery.fg-thumbnail.fg-right {
5849 text-align: right;
5850 }
5851
5852 .foogallery.fg-thumbnail.fg-float-left {
5853 float: left;
5854 width: auto;
5855 }
5856 .foogallery.fg-thumbnail.fg-float-right {
5857 float: right;
5858 width: auto;
5859 }
5860
5861 .foogallery.fg-thumbnail .fg-item {
5862 display: inline-block;
5863 vertical-align: top;
5864 max-width: 100%;
5865 }
5866 .foogallery.fg-thumbnail .fg-image {
5867 max-width: 100%;
5868 }
5869 .foogallery.fg-thumbnail .fg-st-hidden {
5870 display: none;
5871 }
5872
5873 .foogallery.fg-thumbnail.fg-stacked,
5874 .foogallery.fg-thumbnail.fg-stacked.fg-center {
5875 display: grid;
5876 grid-template-columns: 1fr auto 1fr;
5877 grid-template-rows: auto;
5878 }
5879 .foogallery.fg-thumbnail.fg-stacked .fg-item,
5880 .foogallery.fg-thumbnail.fg-stacked.fg-center .fg-item {
5881 grid-column: 2 / 3;
5882 grid-row: 1 / 2;
5883 z-index: unset;
5884 }
5885 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(1) {
5886 order: 1;
5887 }
5888 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(2) {
5889 order: 2;
5890 transform: rotate(3deg);
5891 }
5892 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(3) {
5893 order: 3;
5894 transform: rotate(-3deg);
5895 }
5896 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(4) {
5897 order: 4;
5898 transform: rotate(1deg);
5899 }
5900 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(5) {
5901 order: 5;
5902 transform: rotate(-2deg);
5903 }
5904 .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),
5905 .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 {
5906 transition-property: opacity,visibility;
5907 }
5908
5909 .foogallery.fg-thumbnail.fg-stacked.fg-left {
5910 grid-template-columns: auto 1fr;
5911 }
5912 .foogallery.fg-thumbnail.fg-stacked.fg-left .fg-item {
5913 grid-column: 1 / 2;
5914 }
5915
5916 .foogallery.fg-thumbnail.fg-stacked.fg-right {
5917 grid-template-columns: 1fr auto;
5918 }
5919 .foogallery.fg-thumbnail.fg-stacked.fg-right .fg-item {
5920 grid-column: 2 / 3;
5921 }
5922
5923 .foogallery.fg-thumbnail.fg-stacked.fg-float-left,
5924 .foogallery.fg-thumbnail.fg-stacked.fg-float-right {
5925 display: inline-grid;
5926 grid-template-columns: auto;
5927 }
5928 .foogallery.fg-thumbnail.fg-stacked.fg-float-left .fg-item,
5929 .foogallery.fg-thumbnail.fg-stacked.fg-float-right .fg-item {
5930 grid-column: 1 / 2;
5931 }
5932 .foogallery.fg-thumbnail.fg-stacked.fg-float-left {
5933 float: left;
5934 }
5935 .foogallery.fg-thumbnail.fg-stacked.fg-float-right {
5936 float: right;
5937 }
5938 .foogallery-stack-album {
5939 text-align: center;
5940 overflow: hidden;
5941 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
5942 font-size: 13px;
5943 font-weight: 400;
5944 line-height: 1.3;
5945 }
5946 .foogallery-stack-album,
5947 .foogallery-stack-album * {
5948 box-sizing: border-box;
5949 }
5950
5951 .foogallery-stack-album.fg-align-left {
5952 text-align: left;
5953 }
5954 .foogallery-stack-album.fg-align-center {
5955 text-align: center;
5956 }
5957 .foogallery-stack-album.fg-align-right {
5958 text-align: right;
5959 }
5960
5961 .foogallery-stack-album.fg-disable-transitions,
5962 .foogallery-stack-album.fg-disable-transitions * {
5963 transition: none !important;
5964 }
5965
5966 .fg-header {
5967 display: flex;
5968 flex-wrap: nowrap;
5969 justify-content: space-between;
5970 align-items: center;
5971 position: relative;
5972 padding: 0;
5973 margin: 0;
5974 border-top: solid 1px #aaa;
5975 border-bottom: solid 1px #aaa;
5976 }
5977
5978 .fg-header-title {
5979 display: block;
5980 margin: 0;
5981 padding: 0 20px;
5982 width: 100%;
5983 text-align: left;
5984 }
5985
5986 .fg-header-active {
5987 display: block;
5988 margin: 0;
5989 padding: 0 20px;
5990 visibility: hidden;
5991 opacity: 0;
5992 width: 100%;
5993 text-align: right;
5994 transition-property: opacity, visibility;
5995 transition-duration: .3s;
5996 transition-timing-function: ease-in-out;
5997 }
5998
5999 .fg-header-back {
6000 display: block;
6001 padding: 0;
6002 margin: 5px;
6003 visibility: hidden;
6004 opacity: 0;
6005 min-width: 40px;
6006 width: 40px;
6007 height: 40px;
6008 border-radius: 50%;
6009 text-align: center;
6010 line-height: 38px;
6011 color: #999;
6012 background: #ddd;
6013 background: rgba(200,200,200,0.5);
6014 cursor: pointer;
6015 -webkit-touch-callout: none;
6016 -webkit-user-select: none;
6017 -moz-user-select: none;
6018 -ms-user-select: none;
6019 user-select: none;
6020 transition-property: opacity, visibility;
6021 transition-duration: .3s;
6022 transition-timing-function: ease-in-out;
6023 }
6024
6025 .fg-has-active .fg-header-back,
6026 .fg-has-active .fg-header-active {
6027 visibility: visible;
6028 opacity: 1;
6029 }
6030
6031
6032 .fg-piles {
6033 display: inline-block;
6034 position: relative;
6035 max-width: 100%;
6036 transition-property: width, height;
6037 transition-duration: .3s;
6038 transition-timing-function: ease-in-out;
6039 }
6040
6041 .fg-pile {
6042 display: block;
6043 position: absolute;
6044 top: 0;
6045 left: 0;
6046 list-style: none;
6047 padding: 0;
6048 margin: 0;
6049 visibility: visible;
6050 opacity: 1;
6051 max-width: 100%;
6052 transition-property: opacity, visibility, top, left, width, height;
6053 transition-duration: .3s;
6054 transition-timing-function: ease-in-out;
6055 }
6056
6057 .fg-pile.fg-hidden {
6058 visibility: hidden;
6059 opacity: 0;
6060 }
6061
6062 .fg-pile-item {
6063 display: flex;
6064 flex-direction: column;
6065 max-width: 100%;
6066 position: absolute;
6067 top: 25px;
6068 left: 25px;
6069 visibility: visible;
6070 opacity: 1;
6071 cursor: pointer;
6072 border: 10px solid #fff;
6073 background-color: #FFF;
6074 box-shadow: 0 1px 4px rgba(0,0,0,0.2);
6075 transition-property: opacity, visibility, top, left, transform;
6076 transition-duration: .3s;
6077 transition-timing-function: ease-in-out;
6078 z-index: 1;
6079 transform: rotate(0deg);
6080 }
6081
6082 .fg-expanded .fg-pile-item {
6083 z-index: 2;
6084 transform: rotate(0deg) !important;
6085 }
6086 .fg-pile-item.fg-has-cover {
6087 z-index: 10;
6088 transform: rotate(0deg) !important;
6089 }
6090
6091 .fg-pile-item:nth-child(2) {
6092 z-index: 9;
6093 }
6094 .fg-pile-item:nth-child(3) {
6095 z-index: 8;
6096 }
6097 .fg-pile-item:nth-child(4) {
6098 z-index: 7;
6099 }
6100 .fg-pile-item:nth-child(1n+5) {
6101 visibility: hidden;
6102 opacity: 0;
6103 }
6104 .fg-expanded .fg-pile-item:nth-child(1n+4) {
6105 visibility: visible;
6106 opacity: 1;
6107 }
6108
6109 .fg-pile-item-thumb {
6110 display: flex;
6111 flex-direction: column;
6112 max-width: 100%;
6113 max-height: 100%;
6114 }
6115
6116 .fg-pile-item-image {
6117 display: block;
6118 max-width: 100%;
6119 object-fit: cover;
6120 width: auto;
6121 }
6122
6123 .fg-pile-item-caption {
6124 display: flex;
6125 justify-content: center;
6126 flex-direction: column;
6127 position: absolute;
6128 top: 0;
6129 left: 0;
6130 bottom: 0;
6131 right: 0;
6132 width: 100%;
6133 height: 100%;
6134 margin: 0;
6135 padding: 10px;
6136 background-color: rgba(68, 68, 68, 0.5);
6137 color: #FFFFFF;
6138 text-align: center;
6139 visibility: hidden;
6140 opacity: 0;
6141 max-width: 100%;
6142 transition-property: opacity, visibility;
6143 transition-duration: .3s;
6144 transition-timing-function: ease-in-out;
6145 }
6146 .fg-pile-item-title {
6147 display: block;
6148 width: 100%;
6149 padding: 0 0 10px;
6150 }
6151 .fg-pile-item-desc {
6152 display: block;
6153 width: 100%;
6154 max-height: 100%;
6155 border-top: solid 1px currentColor;
6156 padding: 10px 0 0;
6157 overflow: hidden;
6158 }
6159
6160 .fg-pile-item-thumb:hover .fg-pile-item-caption {
6161 visibility: visible;
6162 opacity: 1;
6163 }
6164
6165 .fg-pile-cover {
6166 display: flex;
6167 justify-content: left;
6168 align-items: center;
6169 position: absolute;
6170 top: 0;
6171 left: 0;
6172 bottom: 0;
6173 right: 0;
6174 width: 100%;
6175 height: 100%;
6176 visibility: visible;
6177 opacity: 1;
6178 cursor: pointer;
6179 -webkit-touch-callout: none;
6180 -webkit-user-select: none;
6181 -moz-user-select: none;
6182 -ms-user-select: none;
6183 user-select: none;
6184 transition-property: opacity, visibility;
6185 transition-duration: .3s;
6186 transition-timing-function: ease-in-out;
6187 }
6188
6189 .fg-expanded .fg-pile-cover {
6190 visibility: hidden;
6191 opacity: 0;
6192 pointer-events: none;
6193 }
6194
6195 .fg-pile-cover-content {
6196 display: flex;
6197 flex-wrap: wrap;
6198 position: relative;
6199 background: #fff;
6200 color: #333;
6201 width: 75%;
6202 font-weight: 700;
6203 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);
6204 }
6205
6206 .fg-pile-caption-align-left {
6207 text-align: left;
6208 }
6209 .fg-pile-caption-align-center {
6210 text-align: center;
6211 }
6212 .fg-pile-caption-align-right {
6213 text-align: right;
6214 }
6215
6216 .fg-pile-cover-title {
6217 text-align: inherit;
6218 padding: 10px;
6219 flex: 1 1 auto;
6220 width: auto;
6221 }
6222 .fg-pile-cover-count {
6223 color: #aaa;
6224 padding: 10px 5px;
6225 background: #F7F7F7;
6226 white-space: nowrap;
6227 display: flex;
6228 align-items: center;
6229 }
6230 .fg-pile-cover-description {
6231 display: block;
6232 flex: 0 0 100%;
6233 width: 100%;
6234 max-height: 6em;
6235 overflow: hidden;
6236 padding: 0 10px 10px;
6237 text-align: inherit;
6238 font-weight: 400;
6239 line-height: 1.25;
6240 }
6241 .fg-pile-cover-description p {
6242 margin: 0 0 0.5em;
6243 }
6244 .fg-pile-cover-description p:last-child {
6245 margin-bottom: 0;
6246 }
6247
6248 :root {
6249 --fg-carousel-perspective: 150px;
6250 --fg-carousel-navigation-size: 48px;
6251 --fg-carousel-pagination-size: 14px;
6252 --fg-carousel-progress-size: 4px;
6253 --fg-carousel-navigation-opacity: 0.3;
6254 --fg-carousel-transition-speed: 650ms;
6255 --fg-carousel-ui-speed: 300ms;
6256 }
6257 .foogallery.fg-carousel {
6258 --fg-carousel-inverse-perspective: calc( -1 * var(--fg-carousel-perspective) );
6259 position: relative;
6260 overflow: hidden;
6261 display: grid;
6262 grid-template-columns: var(--fg-carousel-navigation-size) auto var(--fg-carousel-navigation-size);
6263 grid-template-rows: auto auto;
6264 grid-template-areas: "prev inner next"
6265 "bottom bottom bottom";
6266 }
6267 .fg-carousel-inner {
6268 position: relative;
6269 grid-area: inner;
6270 display: grid;
6271 grid-template-columns: 1fr auto 1fr;
6272 grid-template-rows: auto;
6273 grid-template-areas: "left center right";
6274 padding: 10px 0;
6275 perspective: var(--fg-carousel-perspective);
6276 transform: translate3d(0, 0, 0);
6277 transform-style: preserve-3d;
6278 backface-visibility: hidden;
6279 will-change: contents;
6280 pointer-events: none;
6281 }
6282 .foogallery_preview_container .fg-carousel-inner {
6283 transform-style: unset;
6284 }
6285
6286 .fg-carousel-center {
6287 position: relative;
6288 z-index: -1;
6289 pointer-events: none;
6290 visibility: hidden;
6291 }
6292 .fg-carousel-center {
6293 grid-area: center;
6294 }
6295 .fg-carousel-progress {
6296 display: block;
6297 position: absolute;
6298 visibility: visible;
6299 bottom: 0;
6300 left: 0;
6301 width: 0;
6302 height: var(--fg-carousel-progress-size);
6303 border-radius: calc( var(--fg-carousel-progress-size) / 2 );
6304 transition: width 100ms linear;
6305 opacity: var(--fg-carousel-navigation-opacity);
6306 }
6307 .rtl .fg-carousel-progress {
6308 left: auto;
6309 right: 0;
6310 }
6311 .fg-carousel-bottom {
6312 display: flex;
6313 flex-wrap: wrap;
6314 align-items: center;
6315 justify-content: center;
6316 position: relative;
6317 grid-area: bottom;
6318 font-size: var(--fg-carousel-pagination-size);
6319 padding: 0;
6320 margin-bottom: 10px;
6321 }
6322 .fg-carousel button.fg-carousel-bullet {
6323 width: 1em;
6324 height: 1em;
6325 display: block;
6326 padding: 0;
6327 margin: 0.3em;
6328 border-radius: 50%;
6329 border: solid 1px transparent;
6330 background: none;
6331 box-shadow: none;
6332 outline: none;
6333 opacity: var(--fg-carousel-navigation-opacity);
6334 cursor: pointer;
6335 font-size: inherit;
6336 transition: opacity var(--fg-carousel-ui-speed) ease-in;
6337 }
6338 @media only screen and (max-width: 782px) {
6339 .fg-carousel button.fg-carousel-bullet {
6340 width: 1.25em;
6341 height: 1.25em;
6342 }
6343 }
6344
6345 .fg-carousel button.fg-carousel-bullet:is(:hover,:focus) {
6346 background: none;
6347 box-shadow: none;
6348 outline: none;
6349 opacity: 1;
6350 }
6351 /*.fg-carousel button.fg-carousel-bullet:focus {*/
6352 /* outline: dashed 1px #333;*/
6353 /* outline-offset: 1px;*/
6354 /*}*/
6355 .fg-carousel button.fg-carousel-bullet.fg-bullet-active {
6356 opacity: 1;
6357 }
6358 button.fg-carousel-prev,
6359 button.fg-carousel-next {
6360 position: relative;
6361 height: 100%;
6362 width: 100%;
6363 display: flex;
6364 align-items: center;
6365 justify-content: center;
6366 font-size: var(--fg-carousel-navigation-size);
6367 background: none;
6368 border: none;
6369 box-shadow: none;
6370 outline: none;
6371 z-index: 11;
6372 cursor: pointer;
6373 opacity: var(--fg-carousel-navigation-opacity);
6374 transition: opacity var(--fg-carousel-ui-speed) ease-in;
6375 padding: 0;
6376 margin: 0;
6377 }
6378 button.fg-carousel-prev:is(:hover,:focus),
6379 button.fg-carousel-next:is(:hover,:focus) {
6380 background: none;
6381 border: none;
6382 box-shadow: none;
6383 outline: none;
6384 opacity: 1;
6385 }
6386 /*button.fg-carousel-prev:focus:not(:hover),*/
6387 /*button.fg-carousel-next:focus:not(:hover) {*/
6388 /* outline-style: dashed;*/
6389 /* outline-width: 1px;*/
6390 /* outline-offset: -2px;*/
6391 /*}*/
6392 .fg-carousel-prev .fg-icon,
6393 .fg-carousel-next .fg-icon {
6394 width: 1em;
6395 height: 1em;
6396 }
6397 .rtl .fg-carousel-prev .fg-icon,
6398 .rtl .fg-carousel-next .fg-icon {
6399 transform: rotate(180deg);
6400 }
6401 .fg-carousel-prev {
6402 grid-area: prev;
6403 }
6404 .fg-carousel-next {
6405 grid-area: next;
6406 }
6407
6408 .foogallery.fg-carousel .fg-item {
6409 display: block;
6410 opacity: 0;
6411 visibility: hidden;
6412 grid-area: center;
6413 transform-origin: center center;
6414 transform: translate3d(0, 200%, var(--fg-carousel-inverse-perspective));
6415 transition-timing-function: ease-in-out;
6416 transition-duration: 0s;
6417 transition-property: background-color,transform,transform-origin,opacity,visibility;
6418 backface-visibility: hidden;
6419 pointer-events: auto;
6420 }
6421 .foogallery.fg-carousel .fg-item.fg-loaded {
6422 transform: translate3d(0, 0, var(--fg-carousel-inverse-perspective));
6423 transition-timing-function: ease-in-out;
6424 transition-duration: calc( var(--fg-carousel-transition-speed) / 2 );
6425 transition-property: background-color,transform,transform-origin,opacity,visibility;
6426 }
6427 .foogallery.fg-carousel .fg-item.fg-item-active,
6428 .foogallery.fg-carousel .fg-item.fg-item-prev,
6429 .foogallery.fg-carousel .fg-item.fg-item-next {
6430 opacity: 1;
6431 visibility: visible;
6432 /*-webkit-box-reflect: below 5px -webkit-linear-gradient(bottom,rgba(255,0,0,.1) 0%,transparent 32px,transparent 100%);*/
6433 }
6434 .foogallery.fg-carousel .fg-item.fg-item-active {
6435 transform: translate3d(0, 0, 0);
6436 }
6437
6438 .foogallery.fg-carousel.fg-dark .fg-carousel-progress,
6439 .foogallery.fg-carousel.fg-light.fg-inverted .fg-carousel-progress {
6440 background-color: #FFF;
6441 box-shadow: inset 0 0 0 1px #9d9d9d;
6442 }
6443 .foogallery.fg-carousel.fg-dark button.fg-carousel-bullet,
6444 .foogallery.fg-carousel.fg-light.fg-inverted button.fg-carousel-bullet {
6445 background-color: #FFF;
6446 border-color: #ccc;
6447 }
6448 .foogallery.fg-carousel.fg-dark button.fg-carousel-prev,
6449 .foogallery.fg-carousel.fg-dark button.fg-carousel-next,
6450 .foogallery.fg-carousel.fg-light.fg-inverted button.fg-carousel-prev,
6451 .foogallery.fg-carousel.fg-light.fg-inverted button.fg-carousel-next {
6452 color: #FFF;
6453 background-color: transparent;
6454 outline-color: #FFF;
6455 }
6456
6457 .foogallery.fg-carousel.fg-light .fg-carousel-progress,
6458 .foogallery.fg-carousel.fg-dark.fg-inverted .fg-carousel-progress {
6459 background-color: #444;
6460 box-shadow: inset 0 0 0 1px #333;
6461 }
6462 .foogallery.fg-carousel.fg-light button.fg-carousel-bullet,
6463 .foogallery.fg-carousel.fg-dark.fg-inverted button.fg-carousel-bullet {
6464 background-color: #444;
6465 border-color: #333;
6466 }
6467 .foogallery.fg-carousel.fg-light button.fg-carousel-prev,
6468 .foogallery.fg-carousel.fg-light button.fg-carousel-next,
6469 .foogallery.fg-carousel.fg-dark.fg-inverted button.fg-carousel-prev,
6470 .foogallery.fg-carousel.fg-dark.fg-inverted button.fg-carousel-next {
6471 color: #444;
6472 background-color: transparent;
6473 outline-color: #444;
6474 }
6475
6476 .fg-shadow-outline .fg-carousel-inner {
6477 padding: 1px;
6478 }
6479 .fg-shadow-small .fg-carousel-inner {
6480 padding: 4px;
6481 }
6482 .fg-shadow-medium .fg-carousel-inner {
6483 padding: 10px;
6484 }
6485 .fg-shadow-large .fg-carousel-inner {
6486 padding: 16px;
6487 }
6488
6489 .foogallery.fg-carousel-hide-nav-arrows {
6490 --fg-carousel-navigation-size: 0px;
6491 }
6492 .foogallery.fg-carousel-hide-nav-arrows .fg-carousel-prev,
6493 .foogallery.fg-carousel-hide-nav-arrows .fg-carousel-next,
6494 .foogallery.fg-carousel-hide-pagination .fg-carousel-bottom,
6495 .foogallery.fg-carousel-hide-progress-bar .fg-carousel-progress {
6496 display: none;
6497 }