view/js/fancybox/jquery.fancybox.css

   1 body.compensate-for-scrollbar {
   2     overflow: hidden;
   3 }
   4
   5 .fancybox-active {
   6     height: auto;
   7 }
   8
   9 .fancybox-is-hidden {
  10     left: -9999px;
  11     margin: 0;
  12     position: absolute !important;
  13     top: -9999px;
  14     visibility: hidden;
  15 }
  16
  17 .fancybox-container {
  18     -webkit-backface-visibility: hidden;
  19     height: 100%;
  20     left: 0;
  21     outline: none;
  22     position: fixed;
  23     -webkit-tap-highlight-color: transparent;
  24     top: 0;
  25     -ms-touch-action: manipulation;
  26     touch-action: manipulation;
  27     transform: translateZ(0);
  28     width: 100%;
  29     z-index: 99992;
  30 }
  31
  32 .fancybox-container * {
  33     box-sizing: border-box;
  34 }
  35
  36 .fancybox-outer,
  37 .fancybox-inner,
  38 .fancybox-bg,
  39 .fancybox-stage {
  40     bottom: 0;
  41     left: 0;
  42     position: absolute;
  43     right: 0;
  44     top: 0;
  45 }
  46
  47 .fancybox-outer {
  48     -webkit-overflow-scrolling: touch;
  49     overflow-y: auto;
  50 }
  51
  52 .fancybox-bg {
  53     background: rgb(30, 30, 30);
  54     opacity: 0;
  55     transition-duration: inherit;
  56     transition-property: opacity;
  57     transition-timing-function: cubic-bezier(.47, 0, .74, .71);
  58 }
  59
  60 .fancybox-is-open .fancybox-bg {
  61     opacity: .9;
  62     transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  63 }
  64
  65 .fancybox-infobar,
  66 .fancybox-toolbar,
  67 .fancybox-caption,
  68 .fancybox-navigation .fancybox-button {
  69     direction: ltr;
  70     opacity: 0;
  71     position: absolute;
  72     transition: opacity .25s ease, visibility 0s ease .25s;
  73     visibility: hidden;
  74     z-index: 99997;
  75 }
  76
  77 .fancybox-show-infobar .fancybox-infobar,
  78 .fancybox-show-toolbar .fancybox-toolbar,
  79 .fancybox-show-caption .fancybox-caption,
  80 .fancybox-show-nav .fancybox-navigation .fancybox-button {
  81     opacity: 1;
  82     transition: opacity .25s ease 0s, visibility 0s ease 0s;
  83     visibility: visible;
  84 }
  85
  86 .fancybox-infobar {
  87     color: #ccc;
  88     font-size: 13px;
  89     -webkit-font-smoothing: subpixel-antialiased;
  90     height: 44px;
  91     left: 0;
  92     line-height: 44px;
  93     min-width: 44px;
  94     mix-blend-mode: difference;
  95     padding: 0 10px;
  96     pointer-events: none;
  97     top: 0;
  98     -webkit-touch-callout: none;
  99     -webkit-user-select: none;
 100     -moz-user-select: none;
 101     -ms-user-select: none;
 102     user-select: none;
 103 }
 104
 105 .fancybox-toolbar {
 106     right: 0;
 107     top: 0;
 108 }
 109
 110 .fancybox-stage {
 111     direction: ltr;
 112     overflow: visible;
 113     transform: translateZ(0);
 114     z-index: 99994;
 115 }
 116
 117 .fancybox-is-open .fancybox-stage {
 118     overflow: hidden;
 119 }
 120
 121 .fancybox-slide {
 122     -webkit-backface-visibility: hidden;
 123     /* Using without prefix would break IE11 */
 124     display: none;
 125     height: 100%;
 126     left: 0;
 127     outline: none;
 128     overflow: auto;
 129     -webkit-overflow-scrolling: touch;
 130     padding: 44px;
 131     position: absolute;
 132     text-align: center;
 133     top: 0;
 134     transition-property: transform, opacity;
 135     white-space: normal;
 136     width: 100%;
 137     z-index: 99994;
 138 }
 139
 140 .fancybox-slide::before {
 141     content: '';
 142     display: inline-block;
 143     font-size: 0;
 144     height: 100%;
 145     vertical-align: middle;
 146     width: 0;
 147 }
 148
 149 .fancybox-is-sliding .fancybox-slide,
 150 .fancybox-slide--previous,
 151 .fancybox-slide--current,
 152 .fancybox-slide--next {
 153     display: block;
 154 }
 155
 156 .fancybox-slide--image {
 157     overflow: hidden;
 158     padding: 44px 0;
 159 }
 160
 161 .fancybox-slide--image::before {
 162     display: none;
 163 }
 164
 165 .fancybox-slide--html {
 166     padding: 6px;
 167 }
 168
 169 .fancybox-content {
 170     background: #fff;
 171     display: inline-block;
 172     margin: 0;
 173     max-width: 100%;
 174     overflow: auto;
 175     -webkit-overflow-scrolling: touch;
 176     padding: 44px;
 177     position: relative;
 178     text-align: left;
 179     vertical-align: middle;
 180 }
 181
 182 .fancybox-slide--image .fancybox-content {
 183     animation-timing-function: cubic-bezier(.5, 0, .14, 1);
 184     -webkit-backface-visibility: hidden;
 185     background: transparent;
 186     background-repeat: no-repeat;
 187     background-size: 100% 100%;
 188     left: 0;
 189     max-width: none;
 190     overflow: visible;
 191     padding: 0;
 192     position: absolute;
 193     top: 0;
 194     -ms-transform-origin: top left;
 195     transform-origin: top left;
 196     transition-property: transform, opacity;
 197     -webkit-user-select: none;
 198     -moz-user-select: none;
 199     -ms-user-select: none;
 200     user-select: none;
 201     z-index: 99995;
 202 }
 203
 204 .fancybox-can-zoomOut .fancybox-content {
 205     cursor: zoom-out;
 206 }
 207
 208 .fancybox-can-zoomIn .fancybox-content {
 209     cursor: zoom-in;
 210 }
 211
 212 .fancybox-can-swipe .fancybox-content,
 213 .fancybox-can-pan .fancybox-content {
 214     cursor: -webkit-grab;
 215     cursor: grab;
 216 }
 217
 218 .fancybox-is-grabbing .fancybox-content {
 219     cursor: -webkit-grabbing;
 220     cursor: grabbing;
 221 }
 222
 223 .fancybox-container [data-selectable='true'] {
 224     cursor: text;
 225 }
 226
 227 .fancybox-image,
 228 .fancybox-spaceball {
 229     background: transparent;
 230     border: 0;
 231     height: 100%;
 232     left: 0;
 233     margin: 0;
 234     max-height: none;
 235     max-width: none;
 236     padding: 0;
 237     position: absolute;
 238     top: 0;
 239     -webkit-user-select: none;
 240     -moz-user-select: none;
 241     -ms-user-select: none;
 242     user-select: none;
 243     width: 100%;
 244 }
 245
 246 .fancybox-spaceball {
 247     z-index: 1;
 248 }
 249
 250 .fancybox-slide--video .fancybox-content,
 251 .fancybox-slide--map .fancybox-content,
 252 .fancybox-slide--pdf .fancybox-content,
 253 .fancybox-slide--iframe .fancybox-content {
 254     height: 100%;
 255     overflow: visible;
 256     padding: 0;
 257     width: 100%;
 258 }
 259
 260 .fancybox-slide--video .fancybox-content {
 261     background: #000;
 262 }
 263
 264 .fancybox-slide--map .fancybox-content {
 265     background: #e5e3df;
 266 }
 267
 268 .fancybox-slide--iframe .fancybox-content {
 269     background: #fff;
 270 }
 271
 272 .fancybox-video,
 273 .fancybox-iframe {
 274     background: transparent;
 275     border: 0;
 276     display: block;
 277     height: 100%;
 278     margin: 0;
 279     overflow: hidden;
 280     padding: 0;
 281     width: 100%;
 282 }
 283
 284 /* Fix iOS */
 285 .fancybox-iframe {
 286     left: 0;
 287     position: absolute;
 288     top: 0;
 289 }
 290
 291 .fancybox-error {
 292     background: #fff;
 293     cursor: default;
 294     max-width: 400px;
 295     padding: 40px;
 296     width: 100%;
 297 }
 298
 299 .fancybox-error p {
 300     color: #444;
 301     font-size: 16px;
 302     line-height: 20px;
 303     margin: 0;
 304     padding: 0;
 305 }
 306
 307 /* Buttons */
 308
 309 .fancybox-button {
 310     background: rgba(30, 30, 30, .6);
 311     border: 0;
 312     border-radius: 0;
 313     box-shadow: none;
 314     cursor: pointer;
 315     display: inline-block;
 316     height: 44px;
 317     margin: 0;
 318     padding: 10px;
 319     position: relative;
 320     transition: color .2s;
 321     vertical-align: top;
 322     visibility: inherit;
 323     width: 44px;
 324 }
 325
 326 .fancybox-button,
 327 .fancybox-button:visited,
 328 .fancybox-button:link {
 329     color: #ccc;
 330 }
 331
 332 .fancybox-button:hover {
 333     color: #fff;
 334 }
 335
 336 .fancybox-button:focus {
 337     outline: none;
 338 }
 339
 340 .fancybox-button.fancybox-focus {
 341     outline: 1px dotted;
 342 }
 343
 344 .fancybox-button[disabled],
 345 .fancybox-button[disabled]:hover {
 346     color: #888;
 347     cursor: default;
 348     outline: none;
 349 }
 350
 351 /* Fix IE11 */
 352 .fancybox-button div {
 353     height: 100%;
 354 }
 355
 356 .fancybox-button svg {
 357     display: block;
 358     height: 100%;
 359     overflow: visible;
 360     position: relative;
 361     width: 100%;
 362 }
 363
 364 .fancybox-button svg path {
 365     fill: currentColor;
 366     stroke-width: 0;
 367 }
 368
 369 .fancybox-button--play svg:nth-child(2),
 370 .fancybox-button--fsenter svg:nth-child(2) {
 371     display: none;
 372 }
 373
 374 .fancybox-button--pause svg:nth-child(1),
 375 .fancybox-button--fsexit svg:nth-child(1) {
 376     display: none;
 377 }
 378
 379 .fancybox-progress {
 380     background: #ff5268;
 381     height: 2px;
 382     left: 0;
 383     position: absolute;
 384     right: 0;
 385     top: 0;
 386     -ms-transform: scaleX(0);
 387     transform: scaleX(0);
 388     -ms-transform-origin: 0;
 389     transform-origin: 0;
 390     transition-property: transform;
 391     transition-timing-function: linear;
 392     z-index: 99998;
 393 }
 394
 395 /* Close button on the top right corner of html content */
 396
 397 .fancybox-close-small {
 398     background: transparent;
 399     border: 0;
 400     border-radius: 0;
 401     color: #ccc;
 402     cursor: pointer;
 403     opacity: .8;
 404     padding: 8px;
 405     position: absolute;
 406     right: -12px;
 407     top: -44px;
 408     z-index: 401;
 409 }
 410
 411 .fancybox-close-small:hover {
 412     color: #fff;
 413     opacity: 1;
 414 }
 415
 416 .fancybox-slide--html .fancybox-close-small {
 417     color: currentColor;
 418     padding: 10px;
 419     right: 0;
 420     top: 0;
 421 }
 422
 423 .fancybox-slide--image.fancybox-is-scaling .fancybox-content {
 424     overflow: hidden;
 425 }
 426
 427 .fancybox-is-scaling .fancybox-close-small,
 428 .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
 429     display: none;
 430 }
 431
 432 /* Navigation arrows */
 433
 434 .fancybox-navigation .fancybox-button {
 435     background-clip: content-box;
 436     height: 100px;
 437     opacity: 0;
 438     position: absolute;
 439     top: calc(50% - 50px);
 440     width: 70px;
 441 }
 442
 443 .fancybox-navigation .fancybox-button div {
 444     padding: 7px;
 445 }
 446
 447 .fancybox-navigation .fancybox-button--arrow_left {
 448     left: 0;
 449     left: env(safe-area-inset-left);
 450     padding: 31px 26px 31px 6px;
 451 }
 452
 453 .fancybox-navigation .fancybox-button--arrow_right {
 454     padding: 31px 6px 31px 26px;
 455     right: 0;
 456     right: env(safe-area-inset-right);
 457 }
 458
 459 /* Caption */
 460
 461 .fancybox-caption {
 462     background: linear-gradient(to top,
 463         rgba(0, 0, 0, .85) 0%,
 464         rgba(0, 0, 0, .3) 50%,
 465         rgba(0, 0, 0, .15) 65%,
 466         rgba(0, 0, 0, .075) 75.5%,
 467         rgba(0, 0, 0, .037) 82.85%,
 468         rgba(0, 0, 0, .019) 88%,
 469         rgba(0, 0, 0, 0) 100%);
 470     bottom: 0;
 471     color: #eee;
 472     font-size: 14px;
 473     font-weight: 400;
 474     left: 0;
 475     line-height: 1.5;
 476     padding: 75px 44px 25px 44px;
 477     pointer-events: none;
 478     right: 0;
 479     text-align: center;
 480     z-index: 99996;
 481 }
 482
 483 @supports (padding: max(0px)) {
 484     .fancybox-caption {
 485         padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left));
 486     }
 487 }
 488
 489 .fancybox-caption--separate {
 490     margin-top: -50px;
 491 }
 492
 493 .fancybox-caption__body {
 494     max-height: 50vh;
 495     overflow: auto;
 496     pointer-events: all;
 497 }
 498
 499 .fancybox-caption a,
 500 .fancybox-caption a:link,
 501 .fancybox-caption a:visited {
 502     color: #ccc;
 503     text-decoration: none;
 504 }
 505
 506 .fancybox-caption a:hover {
 507     color: #fff;
 508     text-decoration: underline;
 509 }
 510
 511 /* Loading indicator */
 512
 513 .fancybox-loading {
 514     animation: fancybox-rotate 1s linear infinite;
 515     background: transparent;
 516     border: 4px solid #888;
 517     border-bottom-color: #fff;
 518     border-radius: 50%;
 519     height: 50px;
 520     left: 50%;
 521     margin: -25px 0 0 -25px;
 522     opacity: .7;
 523     padding: 0;
 524     position: absolute;
 525     top: 50%;
 526     width: 50px;
 527     z-index: 99999;
 528 }
 529
 530 @keyframes fancybox-rotate {
 531     100% {
 532         transform: rotate(360deg);
 533     }
 534 }
 535
 536 /* Transition effects */
 537
 538 .fancybox-animated {
 539     transition-timing-function: cubic-bezier(0, 0, .25, 1);
 540 }
 541
 542 /* transitionEffect: slide */
 543
 544 .fancybox-fx-slide.fancybox-slide--previous {
 545     opacity: 0;
 546     transform: translate3d(-100%, 0, 0);
 547 }
 548
 549 .fancybox-fx-slide.fancybox-slide--next {
 550     opacity: 0;
 551     transform: translate3d(100%, 0, 0);
 552 }
 553
 554 .fancybox-fx-slide.fancybox-slide--current {
 555     opacity: 1;
 556     transform: translate3d(0, 0, 0);
 557 }
 558
 559 /* transitionEffect: fade */
 560
 561 .fancybox-fx-fade.fancybox-slide--previous,
 562 .fancybox-fx-fade.fancybox-slide--next {
 563     opacity: 0;
 564     transition-timing-function: cubic-bezier(.19, 1, .22, 1);
 565 }
 566
 567 .fancybox-fx-fade.fancybox-slide--current {
 568     opacity: 1;
 569 }
 570
 571 /* transitionEffect: zoom-in-out */
 572
 573 .fancybox-fx-zoom-in-out.fancybox-slide--previous {
 574     opacity: 0;
 575     transform: scale3d(1.5, 1.5, 1.5);
 576 }
 577
 578 .fancybox-fx-zoom-in-out.fancybox-slide--next {
 579     opacity: 0;
 580     transform: scale3d(.5, .5, .5);
 581 }
 582
 583 .fancybox-fx-zoom-in-out.fancybox-slide--current {
 584     opacity: 1;
 585     transform: scale3d(1, 1, 1);
 586 }
 587
 588 /* transitionEffect: rotate */
 589
 590 .fancybox-fx-rotate.fancybox-slide--previous {
 591     opacity: 0;
 592     -ms-transform: rotate(-360deg);
 593     transform: rotate(-360deg);
 594 }
 595
 596 .fancybox-fx-rotate.fancybox-slide--next {
 597     opacity: 0;
 598     -ms-transform: rotate(360deg);
 599     transform: rotate(360deg);
 600 }
 601
 602 .fancybox-fx-rotate.fancybox-slide--current {
 603     opacity: 1;
 604     -ms-transform: rotate(0deg);
 605     transform: rotate(0deg);
 606 }
 607
 608 /* transitionEffect: circular */
 609
 610 .fancybox-fx-circular.fancybox-slide--previous {
 611     opacity: 0;
 612     transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
 613 }
 614
 615 .fancybox-fx-circular.fancybox-slide--next {
 616     opacity: 0;
 617     transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
 618 }
 619
 620 .fancybox-fx-circular.fancybox-slide--current {
 621     opacity: 1;
 622     transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
 623 }
 624
 625 /* transitionEffect: tube */
 626
 627 .fancybox-fx-tube.fancybox-slide--previous {
 628     transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg);
 629 }
 630
 631 .fancybox-fx-tube.fancybox-slide--next {
 632     transform: translate3d(100%, 0, 0) scale(.1) skew(10deg);
 633 }
 634
 635 .fancybox-fx-tube.fancybox-slide--current {
 636     transform: translate3d(0, 0, 0) scale(1);
 637 }
 638
 639 /* Styling for Small-Screen Devices */
 640 @media all and (max-height: 576px) {
 641     .fancybox-slide {
 642         padding-left: 6px;
 643         padding-right: 6px;
 644     }
 645
 646     .fancybox-slide--image {
 647         padding: 6px 0;
 648     }
 649
 650     .fancybox-close-small {
 651         right: -6px;
 652     }
 653
 654     .fancybox-slide--image .fancybox-close-small {
 655         background: #4e4e4e;
 656         color: #f2f4f6;
 657         height: 36px;
 658         opacity: 1;
 659         padding: 6px;
 660         right: 0;
 661         top: 0;
 662         width: 36px;
 663     }
 664
 665     .fancybox-caption {
 666         padding-left: 12px;
 667         padding-right: 12px;
 668     }
 669
 670     @supports (padding: max(0px)) {
 671         .fancybox-caption {
 672             padding-left: max(12px, env(safe-area-inset-left));
 673             padding-right: max(12px, env(safe-area-inset-right));
 674         }
 675     }
 676 }
 677 /* Share */
 678
 679 .fancybox-share {
 680     background: #f4f4f4;
 681     border-radius: 3px;
 682     max-width: 90%;
 683     padding: 30px;
 684     text-align: center;
 685 }
 686
 687 .fancybox-share h1 {
 688     color: #222;
 689     font-size: 35px;
 690     font-weight: 700;
 691     margin: 0 0 20px 0;
 692 }
 693
 694 .fancybox-share p {
 695     margin: 0;
 696     padding: 0;
 697 }
 698
 699 .fancybox-share__button {
 700     border: 0;
 701     border-radius: 3px;
 702     display: inline-block;
 703     font-size: 14px;
 704     font-weight: 700;
 705     line-height: 40px;
 706     margin: 0 5px 10px 5px;
 707     min-width: 130px;
 708     padding: 0 15px;
 709     text-decoration: none;
 710     transition: all .2s;
 711     -webkit-user-select: none;
 712     -moz-user-select: none;
 713     -ms-user-select: none;
 714     user-select: none;
 715     white-space: nowrap;
 716 }
 717
 718 .fancybox-share__button:visited,
 719 .fancybox-share__button:link {
 720     color: #fff;
 721 }
 722
 723 .fancybox-share__button:hover {
 724     text-decoration: none;
 725 }
 726
 727 .fancybox-share__button--fb {
 728     background: #3b5998;
 729 }
 730
 731 .fancybox-share__button--fb:hover {
 732     background: #344e86;
 733 }
 734
 735 .fancybox-share__button--pt {
 736     background: #bd081d;
 737 }
 738
 739 .fancybox-share__button--pt:hover {
 740     background: #aa0719;
 741 }
 742
 743 .fancybox-share__button--tw {
 744     background: #1da1f2;
 745 }
 746
 747 .fancybox-share__button--tw:hover {
 748     background: #0d95e8;
 749 }
 750
 751 .fancybox-share__button svg {
 752     height: 25px;
 753     margin-right: 7px;
 754     position: relative;
 755     top: -1px;
 756     vertical-align: middle;
 757     width: 25px;
 758 }
 759
 760 .fancybox-share__button svg path {
 761     fill: #fff;
 762 }
 763
 764 .fancybox-share__input {
 765     background: transparent;
 766     border: 0;
 767     border-bottom: 1px solid #d7d7d7;
 768     border-radius: 0;
 769     color: #5d5b5b;
 770     font-size: 14px;
 771     margin: 10px 0 0 0;
 772     outline: none;
 773     padding: 10px 15px;
 774     width: 100%;
 775 }
 776 /* Thumbs */
 777
 778 .fancybox-thumbs {
 779     background: #ddd;
 780     bottom: 0;
 781     display: none;
 782     margin: 0;
 783     -webkit-overflow-scrolling: touch;
 784     -ms-overflow-style: -ms-autohiding-scrollbar;
 785     padding: 2px 2px 4px 2px;
 786     position: absolute;
 787     right: 0;
 788     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 789     top: 0;
 790     width: 212px;
 791     z-index: 99995;
 792 }
 793
 794 .fancybox-thumbs-x {
 795     overflow-x: auto;
 796     overflow-y: hidden;
 797 }
 798
 799 .fancybox-show-thumbs .fancybox-thumbs {
 800     display: block;
 801 }
 802
 803 .fancybox-show-thumbs .fancybox-inner {
 804     right: 212px;
 805 }
 806
 807 .fancybox-thumbs__list {
 808     font-size: 0;
 809     height: 100%;
 810     list-style: none;
 811     margin: 0;
 812     overflow-x: hidden;
 813     overflow-y: auto;
 814     padding: 0;
 815     position: absolute;
 816     position: relative;
 817     white-space: nowrap;
 818     width: 100%;
 819 }
 820
 821 .fancybox-thumbs-x .fancybox-thumbs__list {
 822     overflow: hidden;
 823 }
 824
 825 .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
 826     width: 7px;
 827 }
 828
 829 .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
 830     background: #fff;
 831     border-radius: 10px;
 832     box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 833 }
 834
 835 .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
 836     background: #2a2a2a;
 837     border-radius: 10px;
 838 }
 839
 840 .fancybox-thumbs__list a {
 841     -webkit-backface-visibility: hidden;
 842     backface-visibility: hidden;
 843     background-color: rgba(0, 0, 0, .1);
 844     background-position: center center;
 845     background-repeat: no-repeat;
 846     background-size: cover;
 847     cursor: pointer;
 848     float: left;
 849     height: 75px;
 850     margin: 2px;
 851     max-height: calc(100% - 8px);
 852     max-width: calc(50% - 4px);
 853     outline: none;
 854     overflow: hidden;
 855     padding: 0;
 856     position: relative;
 857     -webkit-tap-highlight-color: transparent;
 858     width: 100px;
 859 }
 860
 861 .fancybox-thumbs__list a::before {
 862     border: 6px solid #ff5268;
 863     bottom: 0;
 864     content: '';
 865     left: 0;
 866     opacity: 0;
 867     position: absolute;
 868     right: 0;
 869     top: 0;
 870     transition: all .2s cubic-bezier(.25, .46, .45, .94);
 871     z-index: 99991;
 872 }
 873
 874 .fancybox-thumbs__list a:focus::before {
 875     opacity: .5;
 876 }
 877
 878 .fancybox-thumbs__list a.fancybox-thumbs-active::before {
 879     opacity: 1;
 880 }
 881
 882 /* Styling for Small-Screen Devices */
 883 @media all and (max-width: 576px) {
 884     .fancybox-thumbs {
 885         width: 110px;
 886     }
 887
 888     .fancybox-show-thumbs .fancybox-inner {
 889         right: 110px;
 890     }
 891
 892     .fancybox-thumbs__list a {
 893         max-width: calc(100% - 10px);
 894     }
 895 }