PluginProbe ʕ •ᴥ•ʔ
Gallery : FooGallery / 3.3.0
Gallery : FooGallery v3.3.0
3.3.2 3.3.3 3.3.0 3.1.31 3.1.32 3.1.34 3.1.36 3.2.0 3.2.6 trunk 1.10.3 2.0.24 2.1.34 2.2.44 2.3.3 2.4.32 3.0.6 3.1.11 3.1.12 3.1.13 3.1.20 3.1.25 3.1.26 3.1.26.1 3.1.26.2
foogallery / extensions / default-templates / shared / css / foogallery.css
foogallery / extensions / default-templates / shared / css Last commit date
admin-foogallery.css 1 week ago foogallery.css 1 week ago foogallery.min.css 1 week ago
foogallery.css
6495 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 height: 0;
4485 visibility: hidden;
4486 opacity: 0;
4487 pointer-events: none;
4488 }
4489
4490 .fg-masonry.fg-fixed .fg-item .fg-image,
4491 .fg-masonry.fg-col6 .fg-item .fg-image,
4492 .fg-masonry.fg-col5 .fg-item .fg-image,
4493 .fg-masonry.fg-col4 .fg-item .fg-image,
4494 .fg-masonry.fg-col3 .fg-item .fg-image,
4495 .fg-masonry.fg-col2 .fg-item .fg-image {
4496 width: 100%;
4497 height: auto;
4498 max-width: 100%;
4499 }
4500
4501 .fg-masonry .fg-item {
4502 line-height: 0;
4503 font-size: 0;
4504 vertical-align: top;
4505 }
4506
4507 .fg-masonry .fg-item { margin-bottom: var(--fg-gutter); margin-right: var(--fg-gutter); width: var(--fg-column-width); }
4508 .fg-masonry .fg-column-width { width: var(--fg-column-width); }
4509 .fg-masonry .fg-gutter-width { width: var(--fg-gutter); }
4510
4511 .fg-masonry.fg-col1 .fg-item:nth-child(1n+3),
4512 .fg-masonry.fg-col2 .fg-item:nth-child(2n+4),
4513 .fg-masonry.fg-col3 .fg-item:nth-child(3n+5),
4514 .fg-masonry.fg-col4 .fg-item:nth-child(4n+6),
4515 .fg-masonry.fg-col5 .fg-item:nth-child(5n+7),
4516 .fg-masonry.fg-col6 .fg-item:nth-child(6n+8) {
4517 margin-right: 0;
4518 }
4519
4520 .fg-masonry.fg-col2 {
4521 --fg-column-width: var(--fg-col2-width);
4522 }
4523 .fg-masonry.fg-col3 {
4524 --fg-column-width: var(--fg-col3-width);
4525 }
4526 .fg-masonry.fg-col4 {
4527 --fg-column-width: var(--fg-col4-width);
4528 }
4529 .fg-masonry.fg-col5 {
4530 --fg-column-width: var(--fg-col5-width);
4531 }
4532 .fg-masonry.fg-col6 {
4533 --fg-column-width: var(--fg-col6-width);
4534 }
4535
4536 /* Force 5 column layout < 1280px */
4537 @media screen and (max-width: 1280px) {
4538 .fg-masonry.fg-col6 {
4539 --fg-column-width: var(--fg-col5-width);
4540 }
4541 .fg-masonry.fg-col6 .fg-item:nth-child(5n+7) {
4542 margin-right: 0;
4543 }
4544 }
4545 /* Force 4 column layout < 1024px */
4546 @media screen and (max-width: 1024px) {
4547 .fg-masonry.fg-col5,
4548 .fg-masonry.fg-col6 {
4549 --fg-column-width: var(--fg-col4-width);
4550 }
4551 .fg-masonry.fg-col5 .fg-item:nth-child(4n+6),
4552 .fg-masonry.fg-col6 .fg-item:nth-child(4n+6) {
4553 margin-right: 0;
4554 }
4555 }
4556 /* Force 3 column layout < 720px */
4557 @media screen and (max-width: 720px) {
4558 .fg-masonry.fg-col4,
4559 .fg-masonry.fg-col5,
4560 .fg-masonry.fg-col6 {
4561 --fg-column-width: var(--fg-col3-width);
4562 }
4563 .fg-masonry.fg-col4 .fg-item:nth-child(3n+5),
4564 .fg-masonry.fg-col5 .fg-item:nth-child(3n+5),
4565 .fg-masonry.fg-col6 .fg-item:nth-child(3n+5) {
4566 margin-right: 0;
4567 }
4568 }
4569 /* Force 2 column layout < 480px */
4570 @media screen and (max-width: 480px) {
4571 .fg-masonry.fg-col3,
4572 .fg-masonry.fg-col4,
4573 .fg-masonry.fg-col5,
4574 .fg-masonry.fg-col6 {
4575 --fg-column-width: var(--fg-col2-width);
4576 }
4577 .fg-masonry.fg-col3 .fg-item:nth-child(2n+4),
4578 .fg-masonry.fg-col4 .fg-item:nth-child(2n+4),
4579 .fg-masonry.fg-col5 .fg-item:nth-child(2n+4),
4580 .fg-masonry.fg-col6 .fg-item:nth-child(2n+4) {
4581 margin-right: 0;
4582 }
4583 }
4584 /* Force 1 column layout < 320px */
4585 @media screen and (max-width: 320px) {
4586 .fg-masonry.fg-col2,
4587 .fg-masonry.fg-col3,
4588 .fg-masonry.fg-col4,
4589 .fg-masonry.fg-col5,
4590 .fg-masonry.fg-col6 {
4591 --fg-gutter: 0;
4592 --fg-column-width: 100%;
4593 }
4594 .fg-masonry.fg-col2 .fg-item:nth-child(1n+3),
4595 .fg-masonry.fg-col3 .fg-item:nth-child(1n+3),
4596 .fg-masonry.fg-col4 .fg-item:nth-child(1n+3),
4597 .fg-masonry.fg-col5 .fg-item:nth-child(1n+3),
4598 .fg-masonry.fg-col6 .fg-item:nth-child(1n+3) {
4599 margin-right: 0;
4600 }
4601 }
4602
4603 /* 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. */
4604 .foogallery.fg-border-thin .fg-column-width {
4605 border-width: 4px;
4606 }
4607 .foogallery.fg-border-medium .fg-column-width {
4608 border-width: 10px;
4609 }
4610 .foogallery.fg-border-thick .fg-column-width {
4611 border-width: 16px;
4612 }
4613
4614 /* Captions Bottom */
4615 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption {
4616 display: flex;
4617 visibility: visible;
4618 opacity: 1;
4619 font-size: 13px;
4620 position: relative;
4621 top: auto;
4622 bottom: auto;
4623 left: auto;
4624 right: auto;
4625 width: auto;
4626 height: auto;
4627 text-transform: none;
4628 transform: none;
4629 transition: none;
4630 background-color: transparent;
4631 border: none;
4632 text-align: left;
4633 }
4634 .foogallery.fg-masonry.fg-captions-bottom.fg-c-l .fg-item-inner .fg-caption {
4635 text-align: left;
4636 }
4637 .foogallery.fg-masonry.fg-captions-bottom.fg-c-c .fg-item-inner .fg-caption {
4638 text-align: center;
4639 }
4640 .foogallery.fg-masonry.fg-captions-bottom.fg-c-r .fg-item-inner .fg-caption {
4641 text-align: right;
4642 }
4643 .foogallery.fg-masonry.fg-captions-bottom.fg-c-j .fg-item-inner .fg-caption {
4644 text-align: justify;
4645 }
4646 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner:hover .fg-caption {
4647 transform: none;
4648 transition: none;
4649 }
4650 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption-inner {
4651 display: flex;
4652 position: relative;
4653 max-height: none;
4654 top: auto;
4655 bottom: auto;
4656 left: auto;
4657 right: auto;
4658 width: auto;
4659 height: auto;
4660 border: none;
4661 transform: none;
4662 transition: none;
4663 }
4664 .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption-inner:before {
4665 display: none;
4666 }
4667 .foogallery.fg-masonry.fg-captions-bottom.fg-caption-hover .fg-item-inner .fg-image-overlay {
4668 display: block;
4669 }
4670 .foogallery.fg-masonry.fg-captions-bottom.fg-caption-always .fg-item-inner:hover .fg-caption {
4671 visibility: visible;
4672 opacity: 1;
4673 }
4674
4675 /* Captions */
4676 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-title,
4677 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-title a {
4678 color: #FFF;
4679 }
4680 .fg-masonry.fg-captions-bottom.fg-light .fg-caption-title {
4681 color: #222;
4682 }
4683 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-desc,
4684 .fg-masonry.fg-captions-bottom.fg-dark .fg-caption-desc a {
4685 color: #ccc;
4686 }
4687 .fg-masonry.fg-captions-bottom.fg-light .fg-caption-desc,
4688 .fg-masonry.fg-captions-bottom.fg-light .fg-caption-desc a {
4689 color: #828282;
4690 }
4691 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:hover .fg-caption-desc,
4692 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:focus-within .fg-caption-desc,
4693 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:hover .fg-caption-desc a,
4694 .fg-masonry.fg-captions-bottom.fg-dark .fg-item-inner:focus-within .fg-caption-desc a {
4695 color: #FFF;
4696 }
4697 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:hover .fg-caption-desc,
4698 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:focus-within .fg-caption-desc,
4699 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:hover .fg-caption-desc a,
4700 .fg-masonry.fg-captions-bottom.fg-light .fg-item-inner:focus-within .fg-caption-desc a {
4701 color: #222;
4702 }
4703
4704 /* Caption Buttons */
4705 .foogallery.fg-masonry:is(.fg-captions-bottom,.fg-caption-always) .fg-caption-buttons,
4706 .foogallery.fg-masonry.fg-c-l .fg-caption-buttons {
4707 justify-content: flex-start;
4708 }
4709 .foogallery.fg-masonry.fg-c-c .fg-caption-buttons {
4710 justify-content: center;
4711 }
4712 .foogallery.fg-masonry.fg-c-r .fg-caption-buttons {
4713 justify-content: flex-end;
4714 }
4715 .foogallery.fg-masonry.fg-c-j .fg-caption-buttons {
4716 justify-content: stretch;
4717 }
4718
4719 /* Handle Border Sizing for Captions Below */
4720 .fg-masonry.fg-captions-bottom .fg-caption {
4721 padding: 10px;
4722 }
4723 .fg-masonry.fg-captions-bottom.fg-border-thin .fg-caption {
4724 padding: 10px 6px 6px 6px;
4725 }
4726 .fg-masonry.fg-captions-bottom.fg-border-medium .fg-caption {
4727 padding: 10px 0 0 0;
4728 }
4729 .fg-masonry.fg-captions-bottom.fg-border-thick .fg-caption {
4730 padding: 16px 0 0 0;
4731 }
4732
4733 /* Transparent Overlays */
4734 .fg-masonry.fg-captions-bottom.fg-transparent-overlays .fg-caption {
4735 text-shadow: none;
4736 }
4737
4738 /* Transparent Theme */
4739 .fg-masonry.fg-transparent .fg-item-inner {
4740 background-color: transparent;
4741 color: #333;
4742 border-color: transparent;
4743 }
4744
4745 /* Captions */
4746 .fg-masonry.fg-transparent .fg-caption {
4747 color: #7f7f7f;
4748 }
4749 .fg-masonry.fg-transparent .fg-caption a {
4750 color: #7f7f7f;
4751 border-bottom: 1px solid #7f7f7f;
4752 }
4753 .fg-masonry.fg-transparent .fg-caption a:hover {
4754 border-bottom: none;
4755 }
4756 .fg-masonry.fg-transparent .fg-caption-title,
4757 .fg-masonry.fg-transparent .fg-caption-title a {
4758 color: #333;
4759 }
4760 .fg-masonry.fg-transparent .fg-caption-title a {
4761 border-bottom: 1px solid #333;
4762 }
4763
4764 /* Rounded Corners */
4765 .fg-masonry.fg-transparent.fg-round-full .fg-item,
4766 .fg-masonry.fg-transparent.fg-round-full .fg-item-inner {
4767 border-radius: 15px;
4768 }
4769 .fg-masonry.fg-transparent.fg-round-full .fg-image-wrap,
4770 .fg-masonry.fg-transparent.fg-round-full .fg-image-overlay,
4771 .fg-masonry.fg-transparent.fg-round-full.fg-shadow-inset-small .fg-thumb:after,
4772 .fg-masonry.fg-transparent.fg-round-full.fg-shadow-inset-medium .fg-thumb:after,
4773 .fg-masonry.fg-transparent.fg-round-full.fg-shadow-inset-large .fg-thumb:after {
4774 border-radius: 50%;
4775 overflow: hidden;
4776 }
4777
4778 .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,
4779 .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,
4780 .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,
4781 .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,
4782 .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,
4783 .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 {
4784 overflow: hidden;
4785 }
4786 .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,
4787 .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,
4788 .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,
4789 .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,
4790 .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,
4791 .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 {
4792 border-radius: 5px;
4793 }
4794 .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,
4795 .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,
4796 .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,
4797 .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,
4798 .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,
4799 .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 {
4800 border-radius: 10px;
4801 }
4802 .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,
4803 .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,
4804 .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,
4805 .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,
4806 .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,
4807 .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 {
4808 border-radius: 15px;
4809 }
4810
4811 /* Shadows */
4812 .fg-masonry.fg-transparent.fg-shadow-inset-small .fg-thumb:after {
4813 box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3);
4814 }
4815 .fg-masonry.fg-transparent.fg-shadow-inset-medium .fg-thumb:after {
4816 box-shadow: inset 0 1px 10px 0 rgba(0,0,0,0.3);
4817 }
4818 .fg-masonry.fg-transparent.fg-shadow-inset-large .fg-thumb:after {
4819 box-shadow: inset 0 1px 16px 0 rgba(0,0,0,0.3);
4820 }
4821
4822 .fg-masonry.fg-transparent.fg-shadow-outline .fg-item-inner {
4823 box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.5);
4824 }
4825 .fg-masonry.fg-transparent.fg-shadow-small .fg-item-inner {
4826 box-shadow: 0 1px 4px 0 rgba(128, 128, 128, 0.5);
4827 }
4828 .fg-masonry.fg-transparent.fg-shadow-medium .fg-item-inner {
4829 box-shadow: 0 1px 10px 0 rgba(128, 128, 128, 0.5);
4830 }
4831 .fg-masonry.fg-transparent.fg-shadow-large .fg-item-inner {
4832 box-shadow: 0 1px 16px 0 rgba(128, 128, 128, 0.5);
4833 }
4834
4835 /* Transitions */
4836 .fg-masonry.fg-hover-instant .fg-loaded .fg-caption-desc,
4837 .fg-masonry.fg-hover-fade .fg-loaded .fg-caption-desc,
4838 .fg-masonry.fg-hover-slide-up .fg-loaded .fg-caption-desc,
4839 .fg-masonry.fg-hover-slide-down .fg-loaded .fg-caption-desc,
4840 .fg-masonry.fg-hover-slide-left .fg-loaded .fg-caption-desc,
4841 .fg-masonry.fg-hover-slide-right .fg-loaded .fg-caption-desc,
4842 .fg-masonry.fg-hover-push .fg-loaded .fg-caption-desc,
4843 .fg-masonry.fg-hover-colorize .fg-loaded .fg-caption-desc,
4844 .fg-masonry.fg-hover-grayscale .fg-loaded .fg-caption-desc,
4845 .fg-masonry.fg-hover-scale .fg-loaded .fg-caption-desc,
4846 .fg-masonry.fg-hover-zoomed .fg-loaded .fg-caption-desc,
4847 .fg-masonry.fg-hover-colorize .fg-loaded .fg-caption-desc,
4848 .fg-masonry.fg-hover-grayscale .fg-loaded .fg-caption-desc {
4849 transition-timing-function: ease;
4850 transition-duration: 300ms;
4851 backface-visibility: hidden;
4852 }
4853
4854 /* Base Styles */
4855 .fg-justified {
4856 box-sizing: border-box;
4857 position: relative;
4858 text-align: center;
4859 }
4860 .foogallery.fg-justified .fg-item {
4861 box-sizing: border-box;
4862 display: inline-block;
4863 margin: 0;
4864 padding: 0;
4865 }
4866 .foogallery.fg-justified .fg-item-inner,
4867 .foogallery.fg-justified .fg-thumb,
4868 .foogallery.fg-justified .fg-image {
4869 box-sizing: border-box;
4870 display: block;
4871 margin: 0;
4872 padding: 0;
4873 }
4874 .fg-justified .fg-item {
4875 visibility: visible;
4876 position: relative;
4877 }
4878 .fg-justified .fg-item-inner {
4879 position: relative;
4880 width: 100%;
4881 height: 100%;
4882 }
4883 .fg-justified .fg-thumb {
4884 position: relative;
4885 overflow: hidden;
4886 }
4887 .fg-justified .fg-image {
4888 z-index: 1;
4889 }
4890 .fg-justified .fg-item.fg-positioned .fg-thumb,
4891 .fg-justified .fg-item.fg-positioned .fg-image-wrap {
4892 width: 100%;
4893 height: 100%;
4894 }
4895 .fg-justified .fg-item.fg-positioned .fg-image {
4896 width: 100%!important;
4897 height: auto!important;
4898 min-height: 100%;
4899 }
4900 .fg-simple_portfolio {
4901 --fg-gutter: 10px;
4902
4903 display: flex;
4904 flex-wrap: wrap;
4905 justify-content: center;
4906 align-items: stretch;
4907 align-content: center;
4908 gap: var(--fg-gutter);
4909 }
4910 .fg-simple_portfolio .fg-item {
4911 position: relative;
4912 flex-grow: 0;
4913 flex-shrink: 0;
4914 flex-basis: auto;
4915 margin: 0;
4916 max-width: 100%;
4917 }
4918 .fg-simple_portfolio .fg-item-inner {
4919 display: flex;
4920 flex-direction: column;
4921 margin: 0;
4922 height: 100%;
4923 }
4924 .fg-simple_portfolio.fg-captions-top .fg-item-inner {
4925 flex-direction: column-reverse;
4926 }
4927 .fg-simple_portfolio .fg-image {
4928 height: auto;
4929 width: 100%;
4930 }
4931
4932 /* Some badly written themes apply min-width:0 and min-height:0 to every element in the page which causes layout issues with flex. */
4933 .fg-simple_portfolio .fg-thumb {
4934 min-width: auto;
4935 min-height: auto;
4936 }
4937
4938 /* Reset captions for the portfolio */
4939 .foogallery.fg-simple_portfolio .fg-item-inner .fg-caption {
4940 visibility: visible;
4941 opacity: 1;
4942 font-size: 13px;
4943 position: relative;
4944 top: auto;
4945 bottom: auto;
4946 left: auto;
4947 right: auto;
4948 width: 100%;
4949 height: 100%;
4950 text-transform: none;
4951 transform: none;
4952 transition: none;
4953 background-color: transparent;
4954 border: none;
4955 text-align: left;
4956 }
4957 .foogallery.fg-simple_portfolio.fg-c-l .fg-item-inner .fg-caption {
4958 text-align: left;
4959 }
4960 .foogallery.fg-simple_portfolio.fg-c-c .fg-item-inner .fg-caption {
4961 text-align: center;
4962 }
4963 .foogallery.fg-simple_portfolio.fg-c-r .fg-item-inner .fg-caption {
4964 text-align: right;
4965 }
4966 .foogallery.fg-simple_portfolio.fg-c-j .fg-item-inner .fg-caption {
4967 text-align: justify;
4968 }
4969 .foogallery.fg-simple_portfolio .fg-item-inner:hover .fg-caption {
4970 transform: none;
4971 transition: none;
4972 }
4973 .foogallery.fg-simple_portfolio .fg-item-inner .fg-caption-inner {
4974 top: auto;
4975 bottom: auto;
4976 left: auto;
4977 right: auto;
4978 width: auto;
4979 height: auto;
4980 border: none;
4981 transform: none;
4982 transition: none;
4983 }
4984 .foogallery.fg-simple_portfolio .fg-item-inner .fg-caption-inner:before {
4985 display: none;
4986 }
4987 .foogallery.fg-simple_portfolio.fg-caption-hover .fg-item-inner .fg-image-overlay {
4988 display: block;
4989 }
4990 .foogallery.fg-simple_portfolio.fg-caption-always .fg-item-inner:hover .fg-caption {
4991 visibility: visible;
4992 opacity: 1;
4993 }
4994 .fg-simple_portfolio .fg-caption-title {
4995 white-space: normal;
4996 height: auto;
4997 }
4998 .fg-simple_portfolio .fg-caption-desc {
4999 flex: unset;
5000 }
5001
5002 /* Captions */
5003 .fg-simple_portfolio.fg-dark .fg-caption-title,
5004 .fg-simple_portfolio.fg-dark .fg-caption-title a {
5005 color: #FFF;
5006 }
5007 .fg-simple_portfolio.fg-light .fg-caption-title {
5008 color: #222;
5009 }
5010 .fg-simple_portfolio.fg-dark .fg-caption-desc,
5011 .fg-simple_portfolio.fg-dark .fg-caption-desc a {
5012 color: #ccc;
5013 }
5014 .fg-simple_portfolio.fg-light .fg-caption-desc,
5015 .fg-simple_portfolio.fg-light .fg-caption-desc a {
5016 color: #828282;
5017 }
5018 .fg-simple_portfolio.fg-dark .fg-item-inner:hover .fg-caption-desc,
5019 .fg-simple_portfolio.fg-dark .fg-item-inner:focus-within .fg-caption-desc,
5020 .fg-simple_portfolio.fg-dark .fg-item-inner:hover .fg-caption-desc a,
5021 .fg-simple_portfolio.fg-dark .fg-item-inner:focus-within .fg-caption-desc a {
5022 color: #FFF;
5023 }
5024 .fg-simple_portfolio.fg-light .fg-item-inner:hover .fg-caption-desc,
5025 .fg-simple_portfolio.fg-light .fg-item-inner:focus-within .fg-caption-desc,
5026 .fg-simple_portfolio.fg-light .fg-item-inner:hover .fg-caption-desc a,
5027 .fg-simple_portfolio.fg-light .fg-item-inner:focus-within .fg-caption-desc a {
5028 color: #222;
5029 }
5030
5031 /* Caption Buttons */
5032 .foogallery.fg-simple_portfolio.fg-c-c .fg-caption-buttons {
5033 justify-content: center;
5034 }
5035 .foogallery.fg-simple_portfolio .fg-caption-buttons,
5036 .foogallery.fg-simple_portfolio.fg-c-l .fg-caption-buttons {
5037 justify-content: flex-start;
5038 }
5039 .foogallery.fg-simple_portfolio.fg-c-r .fg-caption-buttons {
5040 justify-content: flex-end;
5041 }
5042 .foogallery.fg-simple_portfolio.fg-c-j .fg-caption-buttons {
5043 justify-content: stretch;
5044 }
5045
5046 /* Handle Border Sizing */
5047 .fg-simple_portfolio .fg-caption {
5048 padding: 10px;
5049 }
5050 .fg-simple_portfolio.fg-border-thin .fg-caption {
5051 padding: 10px 6px 6px 6px;
5052 }
5053 .fg-simple_portfolio.fg-captions-top.fg-border-thin .fg-caption {
5054 padding: 6px 6px 10px 6px;
5055 }
5056 .fg-simple_portfolio.fg-border-medium .fg-caption {
5057 padding: 10px 0 0 0;
5058 }
5059 .fg-simple_portfolio.fg-captions-top.fg-border-medium .fg-caption {
5060 padding: 0 0 10px 0;
5061 }
5062 .fg-simple_portfolio.fg-border-thick .fg-caption {
5063 padding: 16px 0 0 0;
5064 }
5065 .fg-simple_portfolio.fg-captions-top.fg-border-thick .fg-caption {
5066 padding: 0 0 16px 0;
5067 }
5068
5069 /* Transparent Overlays */
5070 .fg-simple_portfolio.fg-transparent-overlays .fg-caption {
5071 text-shadow: none;
5072 }
5073 /* Transparent Theme */
5074 .fg-simple_portfolio.fg-transparent .fg-item-inner {
5075 background-color: transparent;
5076 color: #333;
5077 border-color: transparent;
5078 }
5079
5080 /* Captions */
5081 .fg-simple_portfolio.fg-transparent .fg-caption {
5082 color: #7f7f7f;
5083 }
5084 .fg-simple_portfolio.fg-transparent .fg-caption a {
5085 color: #7f7f7f;
5086 border-bottom: 1px solid #7f7f7f;
5087 }
5088 .fg-simple_portfolio.fg-transparent .fg-caption a:hover {
5089 border-bottom: none;
5090 }
5091 .fg-simple_portfolio.fg-transparent .fg-caption-title,
5092 .fg-simple_portfolio.fg-transparent .fg-caption-title a {
5093 color: #333;
5094 }
5095 .fg-simple_portfolio.fg-transparent .fg-caption-title a {
5096 border-bottom: 1px solid #333;
5097 }
5098
5099 /* Rounded Corners */
5100 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-item,
5101 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-item-inner {
5102 border-radius: 15px;
5103 }
5104 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-image-wrap,
5105 .fg-simple_portfolio.fg-transparent.fg-round-full .fg-image-overlay,
5106 .fg-simple_portfolio.fg-transparent.fg-round-full.fg-shadow-inset-small .fg-thumb:after,
5107 .fg-simple_portfolio.fg-transparent.fg-round-full.fg-shadow-inset-medium .fg-thumb:after,
5108 .fg-simple_portfolio.fg-transparent.fg-round-full.fg-shadow-inset-large .fg-thumb:after {
5109 border-radius: 50%;
5110 overflow: hidden;
5111 }
5112
5113 .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,
5114 .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,
5115 .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,
5116 .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,
5117 .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,
5118 .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 {
5119 overflow: hidden;
5120 }
5121 .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,
5122 .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,
5123 .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,
5124 .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,
5125 .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,
5126 .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 {
5127 border-radius: 5px;
5128 }
5129 .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,
5130 .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,
5131 .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,
5132 .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,
5133 .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,
5134 .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 {
5135 border-radius: 10px;
5136 }
5137 .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,
5138 .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,
5139 .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,
5140 .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,
5141 .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,
5142 .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 {
5143 border-radius: 15px;
5144 }
5145
5146 /* Shadows */
5147 .fg-simple_portfolio.fg-transparent.fg-shadow-inset-small .fg-thumb:after {
5148 box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3);
5149 }
5150 .fg-simple_portfolio.fg-transparent.fg-shadow-inset-medium .fg-thumb:after {
5151 box-shadow: inset 0 1px 10px 0 rgba(0,0,0,0.3);
5152 }
5153 .fg-simple_portfolio.fg-transparent.fg-shadow-inset-large .fg-thumb:after {
5154 box-shadow: inset 0 1px 16px 0 rgba(0,0,0,0.3);
5155 }
5156
5157 .fg-simple_portfolio.fg-transparent.fg-shadow-outline .fg-item-inner {
5158 box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.5);
5159 }
5160 .fg-simple_portfolio.fg-transparent.fg-shadow-small .fg-item-inner {
5161 box-shadow: 0 1px 4px 0 rgba(128, 128, 128, 0.5);
5162 }
5163 .fg-simple_portfolio.fg-transparent.fg-shadow-medium .fg-item-inner {
5164 box-shadow: 0 1px 10px 0 rgba(128, 128, 128, 0.5);
5165 }
5166 .fg-simple_portfolio.fg-transparent.fg-shadow-large .fg-item-inner {
5167 box-shadow: 0 1px 16px 0 rgba(128, 128, 128, 0.5);
5168 }
5169
5170 /* Transitions */
5171 .fg-simple_portfolio.fg-hover-instant .fg-loaded .fg-caption-desc,
5172 .fg-simple_portfolio.fg-hover-fade .fg-loaded .fg-caption-desc,
5173 .fg-simple_portfolio.fg-hover-slide-up .fg-loaded .fg-caption-desc,
5174 .fg-simple_portfolio.fg-hover-slide-down .fg-loaded .fg-caption-desc,
5175 .fg-simple_portfolio.fg-hover-slide-left .fg-loaded .fg-caption-desc,
5176 .fg-simple_portfolio.fg-hover-slide-right .fg-loaded .fg-caption-desc,
5177 .fg-simple_portfolio.fg-hover-push .fg-loaded .fg-caption-desc,
5178 .fg-simple_portfolio.fg-hover-colorize .fg-loaded .fg-caption-desc,
5179 .fg-simple_portfolio.fg-hover-grayscale .fg-loaded .fg-caption-desc,
5180 .fg-simple_portfolio.fg-hover-scale .fg-loaded .fg-caption-desc,
5181 .fg-simple_portfolio.fg-hover-zoomed .fg-loaded .fg-caption-desc,
5182 .fg-simple_portfolio.fg-hover-colorize .fg-loaded .fg-caption-desc,
5183 .fg-simple_portfolio.fg-hover-grayscale .fg-loaded .fg-caption-desc {
5184 transition-timing-function: ease;
5185 transition-duration: 300ms;
5186 backface-visibility: hidden;
5187 }
5188
5189 /* Polaroid */
5190 .foogallery.fg-preset.fg-polaroid .fg-item {
5191 -webkit-backface-visibility: hidden;
5192 backface-visibility: hidden;
5193 transition: transform 0.35s, background-color 0.65s;
5194 }
5195 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(2n+1) {
5196 -webkit-transform: rotate(3deg);
5197 transform: rotate(3deg);
5198 }
5199 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(2n) {
5200 -webkit-transform: rotate(-3deg);
5201 transform: rotate(-3deg);
5202 }
5203 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(3n) {
5204 -webkit-transform: rotate(1deg);
5205 transform: rotate(1deg);
5206 }
5207 .foogallery.fg-preset.fg-polaroid .fg-item:nth-child(5n) {
5208 -webkit-transform: rotate(-2deg);
5209 transform: rotate(-2deg);
5210 }
5211
5212 .foogallery.fg-preset.fg-polaroid .fg-item:hover {
5213 -webkit-transform: rotate(0);
5214 transform: rotate(0);
5215 }
5216
5217 .foogallery.fg-preset.fg-polaroid .fg-caption {
5218 position: relative;
5219 width: auto;
5220 font-family: "Segoe Print Regular","Comic Sans MS",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
5221 }
5222
5223 .foogallery.fg-preset.fg-polaroid .fg-caption-inner {
5224 text-shadow: none;
5225 line-height: 1.4;
5226 justify-content: center;
5227 }
5228 .foogallery.fg-preset.fg-polaroid .fg-caption-inner,
5229 .foogallery.fg-preset.fg-polaroid .fg-caption-title {
5230 position: relative;
5231 width: auto;
5232 }
5233 .foogallery.fg-preset.fg-polaroid .fg-caption-title {
5234 text-align: center;
5235 }
5236 .foogallery.fg-preset.fg-polaroid .fg-caption-desc {
5237 display: none;
5238 }
5239
5240 /* Themes */
5241 .foogallery.fg-preset.fg-polaroid .fg-caption-title,
5242 .foogallery.fg-light.fg-preset.fg-polaroid .fg-caption-title {
5243 color: #333;
5244 }
5245 .foogallery.fg-dark.fg-preset.fg-polaroid .fg-caption-title {
5246 color: #FFF;
5247 }
5248
5249 /* Transparent Overlays */
5250 .foogallery.fg-preset.fg-polaroid.fg-transparent-overlays .fg-caption {
5251 text-shadow: none;
5252 }
5253
5254 /* Handle Border Sizing */
5255 .foogallery.fg-preset.fg-polaroid .fg-caption {
5256 padding: 10px;
5257 }
5258 .foogallery.fg-preset.fg-polaroid.fg-border-thin .fg-caption {
5259 padding: 10px 4px 4px 4px;
5260 }
5261 .foogallery.fg-preset.fg-polaroid.fg-captions-top.fg-border-thin .fg-caption {
5262 padding: 4px 4px 10px 4px;
5263 }
5264 .foogallery.fg-preset.fg-polaroid.fg-border-medium .fg-caption {
5265 padding: 10px 0 0 0;
5266 }
5267 .foogallery.fg-preset.fg-polaroid.fg-captions-top.fg-border-medium .fg-caption {
5268 padding: 0 0 10px 0;
5269 }
5270 .foogallery.fg-preset.fg-polaroid.fg-border-thick .fg-caption {
5271 padding: 16px 0 0 0;
5272 }
5273 .foogallery.fg-preset.fg-polaroid.fg-captions-top.fg-border-thick .fg-caption {
5274 padding: 0 0 16px 0;
5275 }
5276 /* Base styles */
5277 .fg-image-viewer {
5278 display: block;
5279 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
5280 }
5281 .fg-image-viewer.fg-left {
5282 text-align: left;
5283 }
5284
5285 .fg-image-viewer.fg-center {
5286 text-align: center;
5287 }
5288 .fg-image-viewer.fg-right {
5289 text-align: right;
5290 }
5291
5292 .fiv-inner {
5293 position: relative;
5294 display: inline-block;
5295 max-width: 100%;
5296 z-index: 6;
5297 }
5298 .fiv-inner .fiv-inner-container {
5299 position: relative;
5300 max-width: 100%;
5301 border-color: transparent;
5302 border-style: solid;
5303 border-width: 0;
5304 border-bottom-width: 4px;
5305 z-index: 5;
5306 }
5307 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb,
5308 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb:hover,
5309 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb:active,
5310 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb:visited {
5311 position: relative;
5312 display: block;
5313 border: none;
5314 outline: none;
5315 text-decoration: none;
5316 box-shadow: none;
5317 max-width: 100%;
5318 }
5319 .foogallery.fg-image-viewer .fg-thumb {
5320 border-radius: inherit;
5321 }
5322
5323 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item {
5324 position: absolute;
5325 visibility: visible;
5326 opacity: 1;
5327 border: none;
5328 outline: none;
5329 text-decoration: none;
5330 box-shadow: none;
5331 max-width: 100%;
5332 }
5333 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item:first-of-type {
5334 position: relative;
5335 }
5336 .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb img {
5337 display: block;
5338 max-width: 100%;
5339 height: auto;
5340 border: none;
5341 outline: none;
5342 text-decoration: none;
5343 }
5344
5345 .fg-image-viewer .fiv-inner .fiv-ctrls {
5346 display: block;
5347 text-align: center;
5348 font-size: 14px;
5349 border-style: solid;
5350 line-height: 34px;
5351 position: relative;
5352 z-index: 6;
5353 }
5354 .fg-image-viewer .fiv-inner .fiv-ctrls:after {
5355 content: '';
5356 display: block;
5357 clear: both;
5358 }
5359 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-count {
5360 display: inline-block;
5361 font-weight: normal;
5362 margin: 0;
5363 }
5364 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev,
5365 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next {
5366 display: flex;
5367 flex-direction: column;
5368 align-items: center;
5369 justify-content: stretch;
5370 height: unset;
5371 cursor: pointer;
5372 -webkit-user-select: none;
5373 -moz-user-select: none;
5374 -ms-user-select: none;
5375 user-select: none;
5376 border-style: solid;
5377 border-width: 1px;
5378 border-color: transparent;
5379 background: none;
5380 min-width: 80px;
5381 position: relative;
5382 overflow: hidden;
5383 transition: background-color .3s;
5384 box-shadow: none;
5385 outline: none;
5386 padding: 0 6px;
5387 margin: 0;
5388 font-family: inherit;
5389 font-size: inherit;
5390 font-weight: normal;
5391 }
5392 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5393 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5394 transform: translateY(0);
5395 }
5396 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:before,
5397 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:before {
5398 display: block;
5399 position: absolute;
5400 font-size: 24px;
5401 line-height: 32px;
5402 top:0;
5403 left:0;
5404 width: 100%;
5405 height: 100%;
5406 transform: translateY(0);
5407 transition: transform .3s;
5408 }
5409 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus):before,
5410 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus):before {
5411 transform: translateY(-100%);
5412 }
5413 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev span,
5414 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next span {
5415 display: block;
5416 flex-grow: 1;
5417 line-height: 34px;
5418 width: 100%;
5419 transform: translateY(100%);
5420 transition: transform .3s;
5421 }
5422 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus) span,
5423 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) span {
5424 transform: translateY(0);
5425 }
5426 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
5427 float: left;
5428 }
5429 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:before {
5430 content: '\2190';
5431 }
5432 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next {
5433 float: right;
5434 }
5435 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:before {
5436 content: '\2192';
5437 }
5438 .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-count span {
5439 margin: 0 4px;
5440 }
5441 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
5442 float: right;
5443 }
5444 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev:before {
5445 content: '\2192';
5446 }
5447 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next {
5448 float: left;
5449 }
5450 .rtl .fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next:before {
5451 content: '\2190';
5452 }
5453
5454 /* Captions */
5455
5456 .foogallery.fg-image-viewer.fg-caption-always .fg-item-inner .fg-caption {
5457 border: none;
5458 }
5459
5460 /* Theme - Default (Light) */
5461 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls,
5462 .fg-image-viewer.fg-light .fiv-inner .fiv-inner-container,
5463 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-count,
5464 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-prev,
5465 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-next {
5466 background-color: #FFF;
5467 color: #333;
5468 border-color: #FFF;
5469 }
5470 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-prev,
5471 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-next {
5472 border-color: #ddd;
5473 }
5474 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5475 .fg-image-viewer.fg-light .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5476 background-color: #F2F2F2;
5477 }
5478
5479 /* Theme - Dark */
5480 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls,
5481 .fg-image-viewer.fg-dark .fiv-inner .fiv-inner-container,
5482 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-count,
5483 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-prev,
5484 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-next {
5485 background-color: #333;
5486 color: #FFF;
5487 border-color: #333;
5488 }
5489 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-prev,
5490 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-next {
5491 border-color: #222;
5492 }
5493 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5494 .fg-image-viewer.fg-dark .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5495 background-color: #444;
5496 }
5497
5498 /* Border Size */
5499 .foogallery.fg-image-viewer.fg-border-thin .fg-item-inner,
5500 .foogallery.fg-image-viewer.fg-border-medium .fg-item-inner,
5501 .foogallery.fg-image-viewer.fg-border-thick .fg-item-inner {
5502 border-width: 0;
5503 }
5504 .foogallery.fg-image-viewer .fiv-ctrls,
5505 .foogallery.fg-image-viewer.fg-border-thin .fiv-inner-container {
5506 border-width: 4px;
5507 }
5508 .foogallery.fg-image-viewer.fg-border-medium .fiv-ctrls,
5509 .foogallery.fg-image-viewer.fg-border-medium .fiv-inner-container {
5510 border-width: 10px;
5511 }
5512 .foogallery.fg-image-viewer.fg-border-thick .fiv-ctrls,
5513 .foogallery.fg-image-viewer.fg-border-thick .fiv-inner-container {
5514 border-width: 16px;
5515 }
5516 .foogallery.fg-image-viewer .fiv-ctrls,
5517 .foogallery.fg-image-viewer.fg-border-thin .fiv-ctrls,
5518 .foogallery.fg-image-viewer.fg-border-medium .fiv-ctrls,
5519 .foogallery.fg-image-viewer.fg-border-thick .fiv-ctrls {
5520 border-top-width: 1px;
5521 }
5522
5523 /* Rounded Corners */
5524 .foogallery.fg-image-viewer.fg-round-small .fg-item,
5525 .foogallery.fg-image-viewer.fg-round-small .fg-item-inner,
5526 .foogallery.fg-image-viewer.fg-round-small .fiv-inner,
5527 .foogallery.fg-image-viewer.fg-round-small .fiv-inner-container,
5528 .foogallery.fg-image-viewer.fg-round-small .fiv-ctrls {
5529 border-radius: 5px;
5530 }
5531 .foogallery.fg-image-viewer.fg-round-small .fg-item,
5532 .foogallery.fg-image-viewer.fg-round-small .fg-item-inner,
5533 .foogallery.fg-image-viewer.fg-round-small .fiv-inner-container {
5534 border-bottom-left-radius: 0;
5535 border-bottom-right-radius: 0;
5536 }
5537 .foogallery.fg-image-viewer.fg-round-small .fiv-ctrls {
5538 border-top-left-radius: 0;
5539 border-top-right-radius: 0;
5540 }
5541 .foogallery.fg-image-viewer.fg-round-small .fiv-prev,
5542 .foogallery.fg-image-viewer.fg-round-small .fiv-next {
5543 border-radius: 3px;
5544 }
5545
5546 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fg-item,
5547 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fg-item-inner,
5548 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fiv-prev,
5549 .foogallery.fg-image-viewer.fg-border-thin.fg-round-small .fiv-next,
5550 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fg-item,
5551 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fg-item-inner,
5552 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fiv-prev,
5553 .foogallery.fg-image-viewer.fg-border-medium.fg-round-small .fiv-next,
5554 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fg-item,
5555 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fg-item-inner,
5556 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fiv-prev,
5557 .foogallery.fg-image-viewer.fg-border-thick.fg-round-small .fiv-next {
5558 border-radius: 3px;
5559 }
5560
5561 .foogallery.fg-image-viewer.fg-round-medium .fg-item,
5562 .foogallery.fg-image-viewer.fg-round-medium .fg-item-inner,
5563 .foogallery.fg-image-viewer.fg-round-medium .fiv-inner,
5564 .foogallery.fg-image-viewer.fg-round-medium .fiv-inner-container,
5565 .foogallery.fg-image-viewer.fg-round-medium .fiv-ctrls {
5566 border-radius: 10px;
5567 }
5568 .foogallery.fg-image-viewer.fg-round-medium .fg-item,
5569 .foogallery.fg-image-viewer.fg-round-medium .fg-item-inner,
5570 .foogallery.fg-image-viewer.fg-round-medium .fiv-inner-container {
5571 border-bottom-left-radius: 0;
5572 border-bottom-right-radius: 0;
5573 }
5574 .foogallery.fg-image-viewer.fg-round-medium .fiv-ctrls {
5575 border-top-left-radius: 0;
5576 border-top-right-radius: 0;
5577 }
5578 .foogallery.fg-image-viewer.fg-round-medium .fiv-prev,
5579 .foogallery.fg-image-viewer.fg-round-medium .fiv-next {
5580 border-radius: 5px;
5581 }
5582 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fg-item,
5583 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fg-item-inner,
5584 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fiv-prev,
5585 .foogallery.fg-image-viewer.fg-border-thin.fg-round-medium .fiv-next {
5586 border-radius: 5px;
5587 }
5588 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fg-item,
5589 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fg-item-inner,
5590 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fiv-prev,
5591 .foogallery.fg-image-viewer.fg-border-medium.fg-round-medium .fiv-next,
5592 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fg-item,
5593 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fg-item-inner,
5594 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fiv-prev,
5595 .foogallery.fg-image-viewer.fg-border-thick.fg-round-medium .fiv-next {
5596 border-radius: 3px;
5597 }
5598
5599 .foogallery.fg-image-viewer.fg-round-large .fg-item,
5600 .foogallery.fg-image-viewer.fg-round-large .fg-item-inner,
5601 .foogallery.fg-image-viewer.fg-round-large .fiv-inner,
5602 .foogallery.fg-image-viewer.fg-round-large .fiv-inner-container,
5603 .foogallery.fg-image-viewer.fg-round-large .fiv-ctrls {
5604 border-radius: 15px;
5605 }
5606 .foogallery.fg-image-viewer.fg-round-large .fg-item,
5607 .foogallery.fg-image-viewer.fg-round-large .fg-item-inner,
5608 .foogallery.fg-image-viewer.fg-round-large .fiv-inner-container {
5609 border-bottom-left-radius: 0;
5610 border-bottom-right-radius: 0;
5611 }
5612 .foogallery.fg-image-viewer.fg-round-large .fiv-ctrls {
5613 border-top-left-radius: 0;
5614 border-top-right-radius: 0;
5615 }
5616 .foogallery.fg-image-viewer.fg-round-large .fiv-prev,
5617 .foogallery.fg-image-viewer.fg-round-large .fiv-next {
5618 border-radius: 11px;
5619 }
5620 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fg-item,
5621 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fg-item-inner,
5622 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fiv-prev,
5623 .foogallery.fg-image-viewer.fg-border-thin.fg-round-large .fiv-next {
5624 border-radius: 11px;
5625 }
5626
5627 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fg-item,
5628 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fg-item-inner,
5629 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fiv-prev,
5630 .foogallery.fg-image-viewer.fg-border-medium.fg-round-large .fiv-next {
5631 border-radius: 5px;
5632 }
5633
5634 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fg-item,
5635 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fg-item-inner,
5636 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fiv-prev,
5637 .foogallery.fg-image-viewer.fg-border-thick.fg-round-large .fiv-next {
5638 border-radius: 3px;
5639 }
5640
5641 .foogallery.fg-image-viewer.fg-round-full .fiv-inner,
5642 .foogallery.fg-image-viewer.fg-round-full .fiv-inner-container,
5643 .foogallery.fg-image-viewer.fg-round-full .fiv-prev,
5644 .foogallery.fg-image-viewer.fg-round-full .fiv-next {
5645 border-radius: 50%;
5646 }
5647
5648 /* Drop Shadows */
5649 .foogallery.fg-image-viewer.fg-light.fg-shadow-outline .fg-item-inner,
5650 .foogallery.fg-image-viewer.fg-dark.fg-shadow-outline .fg-item-inner,
5651 .foogallery.fg-image-viewer.fg-light.fg-shadow-small .fg-item-inner,
5652 .foogallery.fg-image-viewer.fg-dark.fg-shadow-small .fg-item-inner,
5653 .foogallery.fg-image-viewer.fg-light.fg-shadow-medium .fg-item-inner,
5654 .foogallery.fg-image-viewer.fg-dark.fg-shadow-medium .fg-item-inner,
5655 .foogallery.fg-image-viewer.fg-light.fg-shadow-large .fg-item-inner,
5656 .foogallery.fg-image-viewer.fg-dark.fg-shadow-large .fg-item-inner {
5657 box-shadow: none;
5658 }
5659
5660 .foogallery.fg-image-viewer.fg-light.fg-shadow-outline .fiv-inner {
5661 box-shadow: 0 0 0 1px #ddd;
5662 }
5663 .foogallery.fg-image-viewer.fg-dark.fg-shadow-outline .fiv-inner {
5664 box-shadow: 0 0 0 1px #222;
5665 }
5666 .foogallery.fg-image-viewer.fg-light.fg-shadow-small .fiv-inner,
5667 .foogallery.fg-image-viewer.fg-dark.fg-shadow-small .fiv-inner {
5668 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
5669 }
5670 .foogallery.fg-image-viewer.fg-light.fg-shadow-medium .fiv-inner,
5671 .foogallery.fg-image-viewer.fg-dark.fg-shadow-medium .fiv-inner {
5672 box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);
5673 }
5674 .foogallery.fg-image-viewer.fg-light.fg-shadow-large .fiv-inner,
5675 .foogallery.fg-image-viewer.fg-dark.fg-shadow-large .fiv-inner {
5676 box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.5);
5677 }
5678
5679 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls {
5680 border: none;
5681 position: absolute;
5682 top: 0;
5683 left: 0;
5684 width: 100%;
5685 height: 100%;
5686 z-index: 6;
5687 background: none;
5688 pointer-events: none;
5689 visibility: visible;
5690 opacity: 1;
5691 transition: visibility .3s ease, opacity .3s ease;
5692 }
5693 .fg-image-viewer.fg-overlay-controls.fg-not-ready .fiv-inner .fiv-ctrls {
5694 visibility: hidden;
5695 opacity: 0;
5696 }
5697 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev,
5698 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next {
5699 position: absolute;
5700 top: 50%;
5701 transform: translateY(-50%);
5702 border-radius: 50%;
5703 min-width: unset;
5704 width: 40px;
5705 height: 40px;
5706 pointer-events: auto;
5707 opacity: 0.3;
5708 transition: opacity .3s ease;
5709 }
5710 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev {
5711 left: 20px;
5712 }
5713 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next {
5714 right: 20px;
5715 }
5716
5717 /*
5718 * Spotlight uses inline SVG arrows. Reset the complete icon layout so theme
5719 * rules and the legacy image-viewer control padding cannot offset the SVG.
5720 */
5721 .foogallery.fg-spotlight .fiv-inner .fiv-ctrls .fiv-prev,
5722 .foogallery.fg-spotlight .fiv-inner .fiv-ctrls .fiv-next {
5723 flex-direction: row;
5724 align-items: center;
5725 justify-content: center;
5726 padding: 0;
5727 line-height: 0;
5728 }
5729 .foogallery.fg-spotlight .fiv-inner .fiv-ctrls .fiv-prev > svg,
5730 .foogallery.fg-spotlight .fiv-inner .fiv-ctrls .fiv-next > svg {
5731 display: block;
5732 flex: none;
5733 width: 100%;
5734 height: 100%;
5735 margin: 0;
5736 }
5737 .fg-image-viewer.fg-overlay-controls .fiv-inner:hover .fiv-ctrls .fiv-prev,
5738 .fg-image-viewer.fg-overlay-controls .fiv-inner:hover .fiv-ctrls .fiv-next {
5739 opacity: 0.6;
5740 }
5741 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev:is(:hover,:focus),
5742 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next:is(:hover,:focus) {
5743 opacity: 1;
5744 }
5745
5746 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev:before,
5747 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next:before {
5748 content: '\279C';
5749 width: 100%;
5750 height: 100%;
5751 transform: translateY(0);
5752 line-height: 40px;
5753 }
5754 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev:before {
5755 transform: rotate(180deg);
5756 }
5757 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-prev span,
5758 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-next span {
5759 display: none;
5760 }
5761
5762 .fg-image-viewer.fg-overlay-controls .fiv-inner .fiv-ctrls .fiv-count {
5763 display: none;
5764 }
5765
5766 /* Border Sizes */
5767 .fg-image-viewer.fg-overlay-controls:not(.fg-border-thin,.fg-border-medium,.fg-border-thick) .fg-item-inner,
5768 .fg-image-viewer.fg-overlay-controls:not(.fg-border-thin,.fg-border-medium,.fg-border-thick) .fiv-inner .fiv-inner-container { background-color: transparent; }
5769
5770 .fg-image-viewer.fg-overlay-controls { --border-width: 0px; }
5771 .fg-image-viewer.fg-overlay-controls.fg-border-thin { --border-width: 4px; }
5772 .fg-image-viewer.fg-overlay-controls.fg-border-medium { --border-width: 8px; }
5773 .fg-image-viewer.fg-overlay-controls.fg-border-thick { --border-width: 16px; }
5774
5775 .fg-image-viewer.fg-overlay-controls:not(.fg-border-thin,.fg-border-medium,.fg-border-thick) .fiv-inner .fiv-inner-container {
5776 border: none;
5777 }
5778 .fg-image-viewer.fg-overlay-controls.fg-border-thin .fiv-inner .fiv-ctrls,
5779 .fg-image-viewer.fg-overlay-controls.fg-border-medium .fiv-inner .fiv-ctrls,
5780 .fg-image-viewer.fg-overlay-controls.fg-border-thick .fiv-inner .fiv-ctrls {
5781 top: var(--border-width);
5782 left: var(--border-width);
5783 width: calc(100% - calc(var(--border-width) * 2));
5784 height: calc(100% - calc(var(--border-width) * 2));
5785 }
5786
5787 /* Border Radius */
5788 .fg-image-viewer.fg-overlay-controls { --border-radius: 0px; }
5789 .fg-image-viewer.fg-overlay-controls.fg-round-small { --border-radius: 5px; }
5790 .fg-image-viewer.fg-overlay-controls.fg-round-medium { --border-radius: 10px; }
5791 .fg-image-viewer.fg-overlay-controls.fg-round-large { --border-radius: 15px; }
5792
5793 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fiv-inner,
5794 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fiv-inner-container,
5795 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fiv-inner,
5796 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fiv-inner-container,
5797 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fiv-inner,
5798 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fiv-inner-container {
5799 border-radius: var(--border-radius);
5800 }
5801 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fg-item,
5802 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-small .fg-item-inner,
5803 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fg-item,
5804 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-medium .fg-item-inner,
5805 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fg-item,
5806 .foogallery.fg-image-viewer.fg-overlay-controls.fg-round-large .fg-item-inner {
5807 border-radius: max(0px, calc(var(--border-radius) - var(--border-width)));
5808 }
5809
5810 /* Paging Overrides */
5811 .fg-image-viewer.fg-overlay-controls .fg-paging-container {
5812 position: absolute;
5813 bottom: 0;
5814 left: 0;
5815 width: 100%;
5816 line-height: 1;
5817 }
5818 .fg-image-viewer.fg-overlay-controls.fg-dots-left .fg-paging-container {
5819 text-align: left;
5820 }
5821 .fg-image-viewer.fg-overlay-controls.fg-dots-center .fg-paging-container {
5822 text-align: center;
5823 }
5824 .fg-image-viewer.fg-overlay-controls.fg-dots-right .fg-paging-container {
5825 text-align: right;
5826 }
5827 .fg-image-viewer.fg-overlay-controls .fg-paging-container .fg-dots {
5828 pointer-events: auto;
5829 opacity: 0.3;
5830 transition: opacity .3s ease;
5831 }
5832 .fg-image-viewer.fg-overlay-controls .fiv-inner:hover .fg-paging-container .fg-dots {
5833 opacity: 0.6;
5834 }
5835 .fg-image-viewer.fg-overlay-controls .fiv-inner .fg-paging-container .fg-dots:is(:hover,:focus-within) {
5836 opacity: 1;
5837 }
5838
5839 .foogallery.fg-thumbnail,
5840 .foogallery.fg-thumbnail.fg-center {
5841 text-align: center;
5842 }
5843 .foogallery.fg-thumbnail.fg-left {
5844 text-align: left;
5845 }
5846 .foogallery.fg-thumbnail.fg-right {
5847 text-align: right;
5848 }
5849
5850 .foogallery.fg-thumbnail.fg-float-left {
5851 float: left;
5852 width: auto;
5853 }
5854 .foogallery.fg-thumbnail.fg-float-right {
5855 float: right;
5856 width: auto;
5857 }
5858
5859 .foogallery.fg-thumbnail .fg-item {
5860 display: inline-block;
5861 vertical-align: top;
5862 max-width: 100%;
5863 }
5864 .foogallery.fg-thumbnail .fg-image {
5865 max-width: 100%;
5866 }
5867 .foogallery.fg-thumbnail .fg-st-hidden {
5868 display: none;
5869 }
5870
5871 .foogallery.fg-thumbnail.fg-stacked,
5872 .foogallery.fg-thumbnail.fg-stacked.fg-center {
5873 display: grid;
5874 grid-template-columns: 1fr auto 1fr;
5875 grid-template-rows: auto;
5876 }
5877 .foogallery.fg-thumbnail.fg-stacked .fg-item,
5878 .foogallery.fg-thumbnail.fg-stacked.fg-center .fg-item {
5879 grid-column: 2 / 3;
5880 grid-row: 1 / 2;
5881 z-index: unset;
5882 }
5883 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(1) {
5884 order: 1;
5885 }
5886 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(2) {
5887 order: 2;
5888 transform: rotate(3deg);
5889 }
5890 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(3) {
5891 order: 3;
5892 transform: rotate(-3deg);
5893 }
5894 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(4) {
5895 order: 4;
5896 transform: rotate(1deg);
5897 }
5898 .foogallery.fg-thumbnail.fg-stacked .fg-item:nth-child(5) {
5899 order: 5;
5900 transform: rotate(-2deg);
5901 }
5902 .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),
5903 .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 {
5904 transition-property: opacity,visibility;
5905 }
5906
5907 .foogallery.fg-thumbnail.fg-stacked.fg-left {
5908 grid-template-columns: auto 1fr;
5909 }
5910 .foogallery.fg-thumbnail.fg-stacked.fg-left .fg-item {
5911 grid-column: 1 / 2;
5912 }
5913
5914 .foogallery.fg-thumbnail.fg-stacked.fg-right {
5915 grid-template-columns: 1fr auto;
5916 }
5917 .foogallery.fg-thumbnail.fg-stacked.fg-right .fg-item {
5918 grid-column: 2 / 3;
5919 }
5920
5921 .foogallery.fg-thumbnail.fg-stacked.fg-float-left,
5922 .foogallery.fg-thumbnail.fg-stacked.fg-float-right {
5923 display: inline-grid;
5924 grid-template-columns: auto;
5925 }
5926 .foogallery.fg-thumbnail.fg-stacked.fg-float-left .fg-item,
5927 .foogallery.fg-thumbnail.fg-stacked.fg-float-right .fg-item {
5928 grid-column: 1 / 2;
5929 }
5930 .foogallery.fg-thumbnail.fg-stacked.fg-float-left {
5931 float: left;
5932 }
5933 .foogallery.fg-thumbnail.fg-stacked.fg-float-right {
5934 float: right;
5935 }
5936 .foogallery-stack-album {
5937 text-align: center;
5938 overflow: hidden;
5939 font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
5940 font-size: 13px;
5941 font-weight: 400;
5942 line-height: 1.3;
5943 }
5944 .foogallery-stack-album,
5945 .foogallery-stack-album * {
5946 box-sizing: border-box;
5947 }
5948
5949 .foogallery-stack-album.fg-align-left {
5950 text-align: left;
5951 }
5952 .foogallery-stack-album.fg-align-center {
5953 text-align: center;
5954 }
5955 .foogallery-stack-album.fg-align-right {
5956 text-align: right;
5957 }
5958
5959 .foogallery-stack-album.fg-disable-transitions,
5960 .foogallery-stack-album.fg-disable-transitions * {
5961 transition: none !important;
5962 }
5963
5964 .fg-header {
5965 display: flex;
5966 flex-wrap: nowrap;
5967 justify-content: space-between;
5968 align-items: center;
5969 position: relative;
5970 padding: 0;
5971 margin: 0;
5972 border-top: solid 1px #aaa;
5973 border-bottom: solid 1px #aaa;
5974 }
5975
5976 .fg-header-title {
5977 display: block;
5978 margin: 0;
5979 padding: 0 20px;
5980 width: 100%;
5981 text-align: left;
5982 }
5983
5984 .fg-header-active {
5985 display: block;
5986 margin: 0;
5987 padding: 0 20px;
5988 visibility: hidden;
5989 opacity: 0;
5990 width: 100%;
5991 text-align: right;
5992 transition-property: opacity, visibility;
5993 transition-duration: .3s;
5994 transition-timing-function: ease-in-out;
5995 }
5996
5997 .fg-header-back {
5998 display: block;
5999 padding: 0;
6000 margin: 5px;
6001 visibility: hidden;
6002 opacity: 0;
6003 min-width: 40px;
6004 width: 40px;
6005 height: 40px;
6006 border-radius: 50%;
6007 text-align: center;
6008 line-height: 38px;
6009 color: #999;
6010 background: #ddd;
6011 background: rgba(200,200,200,0.5);
6012 cursor: pointer;
6013 -webkit-touch-callout: none;
6014 -webkit-user-select: none;
6015 -moz-user-select: none;
6016 -ms-user-select: none;
6017 user-select: none;
6018 transition-property: opacity, visibility;
6019 transition-duration: .3s;
6020 transition-timing-function: ease-in-out;
6021 }
6022
6023 .fg-has-active .fg-header-back,
6024 .fg-has-active .fg-header-active {
6025 visibility: visible;
6026 opacity: 1;
6027 }
6028
6029
6030 .fg-piles {
6031 display: inline-block;
6032 position: relative;
6033 max-width: 100%;
6034 transition-property: width, height;
6035 transition-duration: .3s;
6036 transition-timing-function: ease-in-out;
6037 }
6038
6039 .fg-pile {
6040 display: block;
6041 position: absolute;
6042 top: 0;
6043 left: 0;
6044 list-style: none;
6045 padding: 0;
6046 margin: 0;
6047 visibility: visible;
6048 opacity: 1;
6049 max-width: 100%;
6050 transition-property: opacity, visibility, top, left, width, height;
6051 transition-duration: .3s;
6052 transition-timing-function: ease-in-out;
6053 }
6054
6055 .fg-pile.fg-hidden {
6056 visibility: hidden;
6057 opacity: 0;
6058 }
6059
6060 .fg-pile-item {
6061 display: flex;
6062 flex-direction: column;
6063 max-width: 100%;
6064 position: absolute;
6065 top: 25px;
6066 left: 25px;
6067 visibility: visible;
6068 opacity: 1;
6069 cursor: pointer;
6070 border: 10px solid #fff;
6071 background-color: #FFF;
6072 box-shadow: 0 1px 4px rgba(0,0,0,0.2);
6073 transition-property: opacity, visibility, top, left, transform;
6074 transition-duration: .3s;
6075 transition-timing-function: ease-in-out;
6076 z-index: 1;
6077 transform: rotate(0deg);
6078 }
6079
6080 .fg-expanded .fg-pile-item {
6081 z-index: 2;
6082 transform: rotate(0deg) !important;
6083 }
6084 .fg-pile-item.fg-has-cover {
6085 z-index: 10;
6086 transform: rotate(0deg) !important;
6087 }
6088
6089 .fg-pile-item:nth-child(2) {
6090 z-index: 9;
6091 }
6092 .fg-pile-item:nth-child(3) {
6093 z-index: 8;
6094 }
6095 .fg-pile-item:nth-child(4) {
6096 z-index: 7;
6097 }
6098 .fg-pile-item:nth-child(1n+5) {
6099 visibility: hidden;
6100 opacity: 0;
6101 }
6102 .fg-expanded .fg-pile-item:nth-child(1n+4) {
6103 visibility: visible;
6104 opacity: 1;
6105 }
6106
6107 .fg-pile-item-thumb {
6108 display: flex;
6109 flex-direction: column;
6110 max-width: 100%;
6111 max-height: 100%;
6112 }
6113
6114 .fg-pile-item-image {
6115 display: block;
6116 max-width: 100%;
6117 object-fit: cover;
6118 width: auto;
6119 }
6120
6121 .fg-pile-item-caption {
6122 display: flex;
6123 justify-content: center;
6124 flex-direction: column;
6125 position: absolute;
6126 top: 0;
6127 left: 0;
6128 bottom: 0;
6129 right: 0;
6130 width: 100%;
6131 height: 100%;
6132 margin: 0;
6133 padding: 10px;
6134 background-color: rgba(68, 68, 68, 0.5);
6135 color: #FFFFFF;
6136 text-align: center;
6137 visibility: hidden;
6138 opacity: 0;
6139 max-width: 100%;
6140 transition-property: opacity, visibility;
6141 transition-duration: .3s;
6142 transition-timing-function: ease-in-out;
6143 }
6144 .fg-pile-item-title {
6145 display: block;
6146 width: 100%;
6147 padding: 0 0 10px;
6148 }
6149 .fg-pile-item-desc {
6150 display: block;
6151 width: 100%;
6152 max-height: 100%;
6153 border-top: solid 1px currentColor;
6154 padding: 10px 0 0;
6155 overflow: hidden;
6156 }
6157
6158 .fg-pile-item-thumb:hover .fg-pile-item-caption {
6159 visibility: visible;
6160 opacity: 1;
6161 }
6162
6163 .fg-pile-cover {
6164 display: flex;
6165 justify-content: left;
6166 align-items: center;
6167 position: absolute;
6168 top: 0;
6169 left: 0;
6170 bottom: 0;
6171 right: 0;
6172 width: 100%;
6173 height: 100%;
6174 visibility: visible;
6175 opacity: 1;
6176 cursor: pointer;
6177 -webkit-touch-callout: none;
6178 -webkit-user-select: none;
6179 -moz-user-select: none;
6180 -ms-user-select: none;
6181 user-select: none;
6182 transition-property: opacity, visibility;
6183 transition-duration: .3s;
6184 transition-timing-function: ease-in-out;
6185 }
6186
6187 .fg-expanded .fg-pile-cover {
6188 visibility: hidden;
6189 opacity: 0;
6190 pointer-events: none;
6191 }
6192
6193 .fg-pile-cover-content {
6194 display: flex;
6195 flex-wrap: wrap;
6196 position: relative;
6197 background: #fff;
6198 color: #333;
6199 width: 75%;
6200 font-weight: 700;
6201 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);
6202 }
6203
6204 .fg-pile-caption-align-left {
6205 text-align: left;
6206 }
6207 .fg-pile-caption-align-center {
6208 text-align: center;
6209 }
6210 .fg-pile-caption-align-right {
6211 text-align: right;
6212 }
6213
6214 .fg-pile-cover-title {
6215 text-align: inherit;
6216 padding: 10px;
6217 flex: 1 1 auto;
6218 width: auto;
6219 }
6220 .fg-pile-cover-count {
6221 color: #aaa;
6222 padding: 10px 5px;
6223 background: #F7F7F7;
6224 white-space: nowrap;
6225 display: flex;
6226 align-items: center;
6227 }
6228 .fg-pile-cover-description {
6229 display: block;
6230 flex: 0 0 100%;
6231 width: 100%;
6232 max-height: 6em;
6233 overflow: hidden;
6234 padding: 0 10px 10px;
6235 text-align: inherit;
6236 font-weight: 400;
6237 line-height: 1.25;
6238 }
6239 .fg-pile-cover-description p {
6240 margin: 0 0 0.5em;
6241 }
6242 .fg-pile-cover-description p:last-child {
6243 margin-bottom: 0;
6244 }
6245
6246 :root {
6247 --fg-carousel-perspective: 150px;
6248 --fg-carousel-navigation-size: 48px;
6249 --fg-carousel-pagination-size: 14px;
6250 --fg-carousel-progress-size: 4px;
6251 --fg-carousel-navigation-opacity: 0.3;
6252 --fg-carousel-transition-speed: 650ms;
6253 --fg-carousel-ui-speed: 300ms;
6254 }
6255 .foogallery.fg-carousel {
6256 --fg-carousel-inverse-perspective: calc( -1 * var(--fg-carousel-perspective) );
6257 position: relative;
6258 overflow: hidden;
6259 display: grid;
6260 grid-template-columns: var(--fg-carousel-navigation-size) auto var(--fg-carousel-navigation-size);
6261 grid-template-rows: auto auto;
6262 grid-template-areas: "prev inner next"
6263 "bottom bottom bottom";
6264 }
6265 .fg-carousel-inner {
6266 position: relative;
6267 grid-area: inner;
6268 display: grid;
6269 grid-template-columns: 1fr auto 1fr;
6270 grid-template-rows: auto;
6271 grid-template-areas: "left center right";
6272 padding: 10px 0;
6273 perspective: var(--fg-carousel-perspective);
6274 transform: translate3d(0, 0, 0);
6275 transform-style: preserve-3d;
6276 backface-visibility: hidden;
6277 will-change: contents;
6278 pointer-events: none;
6279 }
6280 .foogallery_preview_container .fg-carousel-inner {
6281 transform-style: unset;
6282 }
6283
6284 .fg-carousel-center {
6285 position: relative;
6286 z-index: -1;
6287 pointer-events: none;
6288 visibility: hidden;
6289 }
6290 .fg-carousel-center {
6291 grid-area: center;
6292 }
6293 .fg-carousel-progress {
6294 display: block;
6295 position: absolute;
6296 visibility: visible;
6297 bottom: 0;
6298 left: 0;
6299 width: 0;
6300 height: var(--fg-carousel-progress-size);
6301 border-radius: calc( var(--fg-carousel-progress-size) / 2 );
6302 transition: width 100ms linear;
6303 opacity: var(--fg-carousel-navigation-opacity);
6304 }
6305 .rtl .fg-carousel-progress {
6306 left: auto;
6307 right: 0;
6308 }
6309 .fg-carousel-bottom {
6310 display: flex;
6311 flex-wrap: wrap;
6312 align-items: center;
6313 justify-content: center;
6314 position: relative;
6315 grid-area: bottom;
6316 font-size: var(--fg-carousel-pagination-size);
6317 padding: 0;
6318 margin-bottom: 10px;
6319 }
6320 .fg-carousel button.fg-carousel-bullet {
6321 width: 1em;
6322 height: 1em;
6323 display: block;
6324 padding: 0;
6325 margin: 0.3em;
6326 border-radius: 50%;
6327 border: solid 1px transparent;
6328 background: none;
6329 box-shadow: none;
6330 outline: none;
6331 opacity: var(--fg-carousel-navigation-opacity);
6332 cursor: pointer;
6333 font-size: inherit;
6334 transition: opacity var(--fg-carousel-ui-speed) ease-in;
6335 }
6336 @media only screen and (max-width: 782px) {
6337 .fg-carousel button.fg-carousel-bullet {
6338 width: 1.25em;
6339 height: 1.25em;
6340 }
6341 }
6342
6343 .fg-carousel button.fg-carousel-bullet:is(:hover,:focus) {
6344 background: none;
6345 box-shadow: none;
6346 outline: none;
6347 opacity: 1;
6348 }
6349 /*.fg-carousel button.fg-carousel-bullet:focus {*/
6350 /* outline: dashed 1px #333;*/
6351 /* outline-offset: 1px;*/
6352 /*}*/
6353 .fg-carousel button.fg-carousel-bullet.fg-bullet-active {
6354 opacity: 1;
6355 }
6356 button.fg-carousel-prev,
6357 button.fg-carousel-next {
6358 position: relative;
6359 height: 100%;
6360 width: 100%;
6361 display: flex;
6362 align-items: center;
6363 justify-content: center;
6364 font-size: var(--fg-carousel-navigation-size);
6365 background: none;
6366 border: none;
6367 box-shadow: none;
6368 outline: none;
6369 z-index: 11;
6370 cursor: pointer;
6371 opacity: var(--fg-carousel-navigation-opacity);
6372 transition: opacity var(--fg-carousel-ui-speed) ease-in;
6373 padding: 0;
6374 margin: 0;
6375 }
6376 button.fg-carousel-prev:is(:hover,:focus),
6377 button.fg-carousel-next:is(:hover,:focus) {
6378 background: none;
6379 border: none;
6380 box-shadow: none;
6381 outline: none;
6382 opacity: 1;
6383 }
6384 /*button.fg-carousel-prev:focus:not(:hover),*/
6385 /*button.fg-carousel-next:focus:not(:hover) {*/
6386 /* outline-style: dashed;*/
6387 /* outline-width: 1px;*/
6388 /* outline-offset: -2px;*/
6389 /*}*/
6390 .fg-carousel-prev .fg-icon,
6391 .fg-carousel-next .fg-icon {
6392 width: 1em;
6393 height: 1em;
6394 }
6395 .rtl .fg-carousel-prev .fg-icon,
6396 .rtl .fg-carousel-next .fg-icon {
6397 transform: rotate(180deg);
6398 }
6399 .fg-carousel-prev {
6400 grid-area: prev;
6401 }
6402 .fg-carousel-next {
6403 grid-area: next;
6404 }
6405
6406 .foogallery.fg-carousel .fg-item {
6407 display: block;
6408 opacity: 0;
6409 visibility: hidden;
6410 grid-area: center;
6411 transform-origin: center center;
6412 transform: translate3d(0, 200%, var(--fg-carousel-inverse-perspective));
6413 transition-timing-function: ease-in-out;
6414 transition-duration: 0s;
6415 transition-property: background-color,transform,transform-origin,opacity,visibility;
6416 backface-visibility: hidden;
6417 pointer-events: auto;
6418 }
6419 .foogallery.fg-carousel .fg-item.fg-loaded {
6420 transform: translate3d(0, 0, var(--fg-carousel-inverse-perspective));
6421 transition-timing-function: ease-in-out;
6422 transition-duration: calc( var(--fg-carousel-transition-speed) / 2 );
6423 transition-property: background-color,transform,transform-origin,opacity,visibility;
6424 }
6425 .foogallery.fg-carousel .fg-item.fg-item-active,
6426 .foogallery.fg-carousel .fg-item.fg-item-prev,
6427 .foogallery.fg-carousel .fg-item.fg-item-next {
6428 opacity: 1;
6429 visibility: visible;
6430 /*-webkit-box-reflect: below 5px -webkit-linear-gradient(bottom,rgba(255,0,0,.1) 0%,transparent 32px,transparent 100%);*/
6431 }
6432 .foogallery.fg-carousel .fg-item.fg-item-active {
6433 transform: translate3d(0, 0, 0);
6434 }
6435
6436 .foogallery.fg-carousel.fg-dark .fg-carousel-progress,
6437 .foogallery.fg-carousel.fg-light.fg-inverted .fg-carousel-progress {
6438 background-color: #FFF;
6439 box-shadow: inset 0 0 0 1px #9d9d9d;
6440 }
6441 .foogallery.fg-carousel.fg-dark button.fg-carousel-bullet,
6442 .foogallery.fg-carousel.fg-light.fg-inverted button.fg-carousel-bullet {
6443 background-color: #FFF;
6444 border-color: #ccc;
6445 }
6446 .foogallery.fg-carousel.fg-dark button.fg-carousel-prev,
6447 .foogallery.fg-carousel.fg-dark button.fg-carousel-next,
6448 .foogallery.fg-carousel.fg-light.fg-inverted button.fg-carousel-prev,
6449 .foogallery.fg-carousel.fg-light.fg-inverted button.fg-carousel-next {
6450 color: #FFF;
6451 background-color: transparent;
6452 outline-color: #FFF;
6453 }
6454
6455 .foogallery.fg-carousel.fg-light .fg-carousel-progress,
6456 .foogallery.fg-carousel.fg-dark.fg-inverted .fg-carousel-progress {
6457 background-color: #444;
6458 box-shadow: inset 0 0 0 1px #333;
6459 }
6460 .foogallery.fg-carousel.fg-light button.fg-carousel-bullet,
6461 .foogallery.fg-carousel.fg-dark.fg-inverted button.fg-carousel-bullet {
6462 background-color: #444;
6463 border-color: #333;
6464 }
6465 .foogallery.fg-carousel.fg-light button.fg-carousel-prev,
6466 .foogallery.fg-carousel.fg-light button.fg-carousel-next,
6467 .foogallery.fg-carousel.fg-dark.fg-inverted button.fg-carousel-prev,
6468 .foogallery.fg-carousel.fg-dark.fg-inverted button.fg-carousel-next {
6469 color: #444;
6470 background-color: transparent;
6471 outline-color: #444;
6472 }
6473
6474 .fg-shadow-outline .fg-carousel-inner {
6475 padding: 1px;
6476 }
6477 .fg-shadow-small .fg-carousel-inner {
6478 padding: 4px;
6479 }
6480 .fg-shadow-medium .fg-carousel-inner {
6481 padding: 10px;
6482 }
6483 .fg-shadow-large .fg-carousel-inner {
6484 padding: 16px;
6485 }
6486
6487 .foogallery.fg-carousel-hide-nav-arrows {
6488 --fg-carousel-navigation-size: 0px;
6489 }
6490 .foogallery.fg-carousel-hide-nav-arrows .fg-carousel-prev,
6491 .foogallery.fg-carousel-hide-nav-arrows .fg-carousel-next,
6492 .foogallery.fg-carousel-hide-pagination .fg-carousel-bottom,
6493 .foogallery.fg-carousel-hide-progress-bar .fg-carousel-progress {
6494 display: none;
6495 }