1 body.compensate-for-scrollbar {
12 position: absolute !important;
18 -webkit-backface-visibility: hidden;
23 -webkit-tap-highlight-color: transparent;
25 -ms-touch-action: manipulation;
26 touch-action: manipulation;
27 transform: translateZ(0);
32 .fancybox-container * {
33 box-sizing: border-box;
48 -webkit-overflow-scrolling: touch;
53 background: rgb(30, 30, 30);
55 transition-duration: inherit;
56 transition-property: opacity;
57 transition-timing-function: cubic-bezier(.47, 0, .74, .71);
60 .fancybox-is-open .fancybox-bg {
62 transition-timing-function: cubic-bezier(.22, .61, .36, 1);
68 .fancybox-navigation .fancybox-button {
72 transition: opacity .25s ease, visibility 0s ease .25s;
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 {
82 transition: opacity .25s ease 0s, visibility 0s ease 0s;
89 -webkit-font-smoothing: subpixel-antialiased;
94 mix-blend-mode: difference;
98 -webkit-touch-callout: none;
99 -webkit-user-select: none;
100 -moz-user-select: none;
101 -ms-user-select: none;
113 transform: translateZ(0);
117 .fancybox-is-open .fancybox-stage {
122 -webkit-backface-visibility: hidden;
123 /* Using without prefix would break IE11 */
129 -webkit-overflow-scrolling: touch;
134 transition-property: transform, opacity;
140 .fancybox-slide::before {
142 display: inline-block;
145 vertical-align: middle;
149 .fancybox-is-sliding .fancybox-slide,
150 .fancybox-slide--previous,
151 .fancybox-slide--current,
152 .fancybox-slide--next {
156 .fancybox-slide--image {
161 .fancybox-slide--image::before {
165 .fancybox-slide--html {
171 display: inline-block;
175 -webkit-overflow-scrolling: touch;
179 vertical-align: middle;
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%;
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;
204 .fancybox-can-zoomOut .fancybox-content {
208 .fancybox-can-zoomIn .fancybox-content {
212 .fancybox-can-swipe .fancybox-content,
213 .fancybox-can-pan .fancybox-content {
214 cursor: -webkit-grab;
218 .fancybox-is-grabbing .fancybox-content {
219 cursor: -webkit-grabbing;
223 .fancybox-container [data-selectable='true'] {
228 .fancybox-spaceball {
229 background: transparent;
239 -webkit-user-select: none;
240 -moz-user-select: none;
241 -ms-user-select: none;
246 .fancybox-spaceball {
250 .fancybox-slide--video .fancybox-content,
251 .fancybox-slide--map .fancybox-content,
252 .fancybox-slide--pdf .fancybox-content,
253 .fancybox-slide--iframe .fancybox-content {
260 .fancybox-slide--video .fancybox-content {
264 .fancybox-slide--map .fancybox-content {
268 .fancybox-slide--iframe .fancybox-content {
274 background: transparent;
310 background: rgba(30, 30, 30, .6);
315 display: inline-block;
320 transition: color .2s;
327 .fancybox-button:visited,
328 .fancybox-button:link {
332 .fancybox-button:hover {
336 .fancybox-button:focus {
340 .fancybox-button.fancybox-focus {
344 .fancybox-button[disabled],
345 .fancybox-button[disabled]:hover {
352 .fancybox-button div {
356 .fancybox-button svg {
364 .fancybox-button svg path {
369 .fancybox-button--play svg:nth-child(2),
370 .fancybox-button--fsenter svg:nth-child(2) {
374 .fancybox-button--pause svg:nth-child(1),
375 .fancybox-button--fsexit svg:nth-child(1) {
386 -ms-transform: scaleX(0);
387 transform: scaleX(0);
388 -ms-transform-origin: 0;
390 transition-property: transform;
391 transition-timing-function: linear;
395 /* Close button on the top right corner of html content */
397 .fancybox-close-small {
398 background: transparent;
411 .fancybox-close-small:hover {
416 .fancybox-slide--html .fancybox-close-small {
423 .fancybox-slide--image.fancybox-is-scaling .fancybox-content {
427 .fancybox-is-scaling .fancybox-close-small,
428 .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
432 /* Navigation arrows */
434 .fancybox-navigation .fancybox-button {
435 background-clip: content-box;
439 top: calc(50% - 50px);
443 .fancybox-navigation .fancybox-button div {
447 .fancybox-navigation .fancybox-button--arrow_left {
449 left: env(safe-area-inset-left);
450 padding: 31px 26px 31px 6px;
453 .fancybox-navigation .fancybox-button--arrow_right {
454 padding: 31px 6px 31px 26px;
456 right: env(safe-area-inset-right);
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%);
476 padding: 75px 44px 25px 44px;
477 pointer-events: none;
483 @supports (padding: max(0px)) {
485 padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left));
489 .fancybox-caption--separate {
493 .fancybox-caption__body {
500 .fancybox-caption a:link,
501 .fancybox-caption a:visited {
503 text-decoration: none;
506 .fancybox-caption a:hover {
508 text-decoration: underline;
511 /* Loading indicator */
514 animation: fancybox-rotate 1s linear infinite;
515 background: transparent;
516 border: 4px solid #888;
517 border-bottom-color: #fff;
521 margin: -25px 0 0 -25px;
530 @keyframes fancybox-rotate {
532 transform: rotate(360deg);
536 /* Transition effects */
539 transition-timing-function: cubic-bezier(0, 0, .25, 1);
542 /* transitionEffect: slide */
544 .fancybox-fx-slide.fancybox-slide--previous {
546 transform: translate3d(-100%, 0, 0);
549 .fancybox-fx-slide.fancybox-slide--next {
551 transform: translate3d(100%, 0, 0);
554 .fancybox-fx-slide.fancybox-slide--current {
556 transform: translate3d(0, 0, 0);
559 /* transitionEffect: fade */
561 .fancybox-fx-fade.fancybox-slide--previous,
562 .fancybox-fx-fade.fancybox-slide--next {
564 transition-timing-function: cubic-bezier(.19, 1, .22, 1);
567 .fancybox-fx-fade.fancybox-slide--current {
571 /* transitionEffect: zoom-in-out */
573 .fancybox-fx-zoom-in-out.fancybox-slide--previous {
575 transform: scale3d(1.5, 1.5, 1.5);
578 .fancybox-fx-zoom-in-out.fancybox-slide--next {
580 transform: scale3d(.5, .5, .5);
583 .fancybox-fx-zoom-in-out.fancybox-slide--current {
585 transform: scale3d(1, 1, 1);
588 /* transitionEffect: rotate */
590 .fancybox-fx-rotate.fancybox-slide--previous {
592 -ms-transform: rotate(-360deg);
593 transform: rotate(-360deg);
596 .fancybox-fx-rotate.fancybox-slide--next {
598 -ms-transform: rotate(360deg);
599 transform: rotate(360deg);
602 .fancybox-fx-rotate.fancybox-slide--current {
604 -ms-transform: rotate(0deg);
605 transform: rotate(0deg);
608 /* transitionEffect: circular */
610 .fancybox-fx-circular.fancybox-slide--previous {
612 transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
615 .fancybox-fx-circular.fancybox-slide--next {
617 transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
620 .fancybox-fx-circular.fancybox-slide--current {
622 transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
625 /* transitionEffect: tube */
627 .fancybox-fx-tube.fancybox-slide--previous {
628 transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg);
631 .fancybox-fx-tube.fancybox-slide--next {
632 transform: translate3d(100%, 0, 0) scale(.1) skew(10deg);
635 .fancybox-fx-tube.fancybox-slide--current {
636 transform: translate3d(0, 0, 0) scale(1);
639 /* Styling for Small-Screen Devices */
640 @media all and (max-height: 576px) {
646 .fancybox-slide--image {
650 .fancybox-close-small {
654 .fancybox-slide--image .fancybox-close-small {
670 @supports (padding: max(0px)) {
672 padding-left: max(12px, env(safe-area-inset-left));
673 padding-right: max(12px, env(safe-area-inset-right));
699 .fancybox-share__button {
702 display: inline-block;
706 margin: 0 5px 10px 5px;
709 text-decoration: none;
711 -webkit-user-select: none;
712 -moz-user-select: none;
713 -ms-user-select: none;
718 .fancybox-share__button:visited,
719 .fancybox-share__button:link {
723 .fancybox-share__button:hover {
724 text-decoration: none;
727 .fancybox-share__button--fb {
731 .fancybox-share__button--fb:hover {
735 .fancybox-share__button--pt {
739 .fancybox-share__button--pt:hover {
743 .fancybox-share__button--tw {
747 .fancybox-share__button--tw:hover {
751 .fancybox-share__button svg {
756 vertical-align: middle;
760 .fancybox-share__button svg path {
764 .fancybox-share__input {
765 background: transparent;
767 border-bottom: 1px solid #d7d7d7;
783 -webkit-overflow-scrolling: touch;
784 -ms-overflow-style: -ms-autohiding-scrollbar;
785 padding: 2px 2px 4px 2px;
788 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
799 .fancybox-show-thumbs .fancybox-thumbs {
803 .fancybox-show-thumbs .fancybox-inner {
807 .fancybox-thumbs__list {
821 .fancybox-thumbs-x .fancybox-thumbs__list {
825 .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
829 .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
832 box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
835 .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
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;
851 max-height: calc(100% - 8px);
852 max-width: calc(50% - 4px);
857 -webkit-tap-highlight-color: transparent;
861 .fancybox-thumbs__list a::before {
862 border: 6px solid #ff5268;
870 transition: all .2s cubic-bezier(.25, .46, .45, .94);
874 .fancybox-thumbs__list a:focus::before {
878 .fancybox-thumbs__list a.fancybox-thumbs-active::before {
882 /* Styling for Small-Screen Devices */
883 @media all and (max-width: 576px) {
888 .fancybox-show-thumbs .fancybox-inner {
892 .fancybox-thumbs__list a {
893 max-width: calc(100% - 10px);