.carousel{position:relative;box-sizing:border-box}.carousel *,.carousel *:before,.carousel *:after{box-sizing:inherit} .carousel.is-draggable{cursor:move;cursor:grab}.carousel.is-dragging{cursor:move;cursor:grabbing} .carousel__viewport{position:relative;overflow:hidden;width:100%;max-height:100%} .carousel__track{display:flex} .carousel__slide{ flex:0 0 auto;width:var(--carousel-slide-width, 100%); max-width:100%;padding:0;position:relative; overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain }.has-dots{margin-bottom:calc(0.5rem + 22px); } .carousel__dots{ margin:0 auto;padding:0;position:absolute;top:calc(100% + 0.5rem); left:0;right:0;display:flex;justify-content:center;list-style:none;user-select:none; } .carousel__dots .carousel__dot { /* wielkoscć pola dla kropek */ margin:0;padding:0;display:block;position:relative;width:45px;height:30px;cursor:pointer; } .carousel__dots .carousel__dot:after /* wielkosc kropek aktywynych */ { content:"";width:40px;height:2px;border-radius:0%; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); background-color:rgba(255, 255, 255, 0.25); /* pasywny kolor kropek */ opacity:0.9; transition:opacity 1.9s ease-in-out; } @media (max-width:860px) { .carousel__dots .carousel__dot:after /* wielkosc kropek aktywynych MALY EKRAN */ { content:"";width:30px;height:2px;border-radius:0%; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); } .carousel__dots .carousel__dot { /* wielkoscć pola dla kropek MALY EKRAN */ margin:0;padding:0;display:block;position:relative;width:40px;height:30px;;cursor:pointer; } } .carousel__dots .carousel__dot.is-selected:after{ /* aktywny kolor kropek */ opacity:1; background-color:rgba(255, 255, 255, 0.65); transition:opacity 2.9s ease-in-out; } /* kolor nawigacji -> carousel__button ---------------------------------------------------------------------------------------------------------- */ .carousel__button{width:var(--carousel-button-width, 48px);height:var(--carousel-button-height, 48px);padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all; cursor:pointer;color:var(--PrimaryFontColor); color:rgba(255, 255, 255, 0.7); background:var(--carousel-button-bg, transparent); border-radius:var(--carousel-button-border-radius, 50%); box-shadow:var(--carousel-button-shadow, none); transition:opacity 2.15s ease} .carousel__button.is-prev,.carousel__button.is-next {position:absolute;top:50%;transform:translateY(-50%)} .carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px} .carousel__button[disabled]{cursor:default;opacity:.3} .carousel__button svg{width:var(--carousel-button-svg-width, 50%); height:var(--carousel-button-svg-height, 50%); fill:none;stroke:currentColor; stroke-width:var(--carousel-button-svg-stroke-width, 1.5); stroke-linejoin:bevel; stroke-linecap:round;filter:var(--carousel-button-svg-filter, none); pointer-events:none} html.with-fancybox{scroll-behavior:auto} body.compensate-for-scrollbar {overflow:hidden !important;touch-action:none} .fancybox__container{ position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;margin:0; padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); box-sizing:border-box;display:flex;flex-direction:column; color:var(--PrimaryFontColor); -webkit-tap-highlight-color:rgba(0,0,0,0); overflow:hidden;z-index:1050;outline:none; transform-origin:top left; --carousel-button-width: 48px; --carousel-button-height: 48px; --carousel-button-svg-width: 44px; --carousel-button-svg-height: 44px; --carousel-button-svg-stroke-width: 1.1; --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0)) } .fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit} .fancybox__container :focus{outline:none}body:not(.is-using-mouse) .fancybox__container :focus{ box-shadow:0 0 0 1px #fff,0 0 0 2px var(--PrimaryAccentColor); } @media all and (min-width: 1024px){ .fancybox__container{--carousel-button-width:48px;--carousel-button-height:48px;--carousel-button-svg-width:48px; --carousel-button-svg-height:48px}} .fancybox__backdrop { /* TLO ---------------------------------------------------------------------------------------------------------- */ position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1; background-color:rgba(0, 0, 0, 0.35) ; -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px); /* background-color: rgba(72, 72, 74, 0.292); -webkit-backdrop-filter: blur(20px); backdrop-filter:brightness(60%) saturate(0%) blur(20px) ; */ } /* TLO ---------------------------------------------------------------------------------------------------------- */ .fancybox__carousel{position:relative;flex:1 1 auto;min-height:0;height:100%;z-index:10} .fancybox__carousel.has-dots{margin-bottom:calc(0.5rem + 22px)} .fancybox__viewport{position:relative;width:100%;height:100%;overflow:visible;cursor:default} .fancybox__track{display:flex;height:100%} .fancybox__slide{ flex:0 0 auto;width:100%;max-width:100%;margin:0; /* MARGINESY gora , lewy , dol , prawy ------ Dla małego monitora < mniejszy niz 1024 px ---------------------------------------------------------------------------------------------------- */ padding:50px 20px 20px 20px;position:relative; /* MARGINESY ---------------------------------------------------------------------------------------------------------- */ overscroll-behavior:contain;display:flex; flex-direction:column;outline:0;overflow:auto; --carousel-button-width: 36px;--carousel-button-height: 36px; --carousel-button-svg-width: 22px;--carousel-button-svg-height: 22px }.fancybox__slide::before,.fancybox__slide::after{ content:"";flex:0 0 0;margin:auto} @media all and (min-width: 1024px) /* Lamanie 1024px*/ {.fancybox__slide{ padding:50px 20px 20px 20px}} /* MARGINES DLA MONITORA DUZEGO - WIEKSZE NIZ 1024px PODPIS MARGINE DOLNY I GORNY------------ */ .fancybox__content{margin:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); padding:36px;color:var(--fancybox-content-color, #fff);background:var(--fancybox-content-bg, #fff); position:relative;align-self:center;display:flex;flex-direction:column;z-index:20} .fancybox__content :focus:not(.carousel__button.is-close) {outline:thin dotted;box-shadow:none} /* PODPIS ---------------------------------------------------------------------------------------------------------- */ .fancybox__caption { font-family: var(--PrimaryFontFamily); font-size: 16px; font-weight: 100; letter-spacing:1px; align-self:center; max-width:100%; margin:0; padding:20px 0 0 0; line-height:150%; color:rgba(255, 255, 255, 0.8); visibility:visible; cursor:auto; flex-shrink:0; overflow-wrap:anywhere; max-width: 500px; text-align: center; line-height:150%; font-variation-settings: 'GRAD' 0; text-justify: inter-character; text-rendering: geometricPrecision; text-align-last: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fancybox__caption:after { background:rgba(255, 255, 255, 0.25); content: ''; display: block; height: 2px; width: 50px; margin-top: 10px; margin-right: auto; margin-bottom: -15px; margin-left: auto; } .is-loading .fancybox__caption{ visibility:hidden } /* PODPIS ---------------------------------------------------------------------------------------------------------- */ .fancybox__container>.carousel__dots{top:100%;color:var(--PrimaryFontColor);} .fancybox__nav .carousel__button{z-index:40} .fancybox__nav .carousel__button.is-next{right:8px}@media all and (min-width: 1024px){ .fancybox__nav .carousel__button.is-next{right:40px}} .fancybox__nav .carousel__button.is-prev{left:8px}@media all and (min-width: 1024px){ .fancybox__nav .carousel__button.is-prev{left:40px}} .carousel__button.is-close{position:absolute;top:8px; right:8px;top:calc(env(safe-area-inset-top, 0px) + 8px); right:calc(env(safe-area-inset-right, 0px) + 8px);z-index:40} @media all and (min-width: 1024px){.carousel__button.is-close{right:40px}} .fancybox__content>.carousel__button.is-close{ position:absolute;top:-40px;right:0;color:var(--fancybox-color, #fff)} .fancybox__no-click,.fancybox__no-click button{pointer-events:none} .fancybox__spinner{ position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); width:50px;height:50px;color:var(--fancybox-color, currentColor)} .fancybox__slide .fancybox__spinner{cursor:pointer;z-index:1053} .fancybox__spinner svg { animation:fancybox-rotate 2s linear infinite; transform-origin:center center;position:absolute;top:0; right:0;bottom:0;left:0;margin:auto;width:100%;height:100%} /* LOADING ---------------------------------------------------------------------------------------------------------- */ .fancybox__spinner svg circle{fill:none;stroke-width:2.75; stroke-miterlimit:10;stroke-dasharray:1,200; stroke-dashoffset:0;animation:fancybox-dash .8s ease-in-out infinite; stroke-linecap:round;stroke:currentColor} @keyframes fancybox-rotate{100%{transform:rotate(360deg)}} @keyframes fancybox-dash{0%{stroke-dasharray:1,200; stroke-dashoffset:0}50%{stroke-dasharray:89,200; stroke-dashoffset:-35px}100%{stroke-dasharray:89,200; stroke-dashoffset:-124px}} /* LOADING ---------------------------------------------------------------------------------------------------------- */ .fancybox__backdrop,.fancybox__caption,.fancybox__nav,.carousel__dots,.carousel__button.is-close { opacity:var(--fancybox-opacity, 1) } .fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop,.fancybox__container.is-animated[aria-hidden=false] .fancybox__caption,.fancybox__container.is-animated[aria-hidden=false] .fancybox__nav,.fancybox__container.is-animated[aria-hidden=false] .carousel__dots,.fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close{ /* ANIMACJE TLO !!!!!! ---------------------------------------------------------------------------------------------------------- */ animation:0.3s ease backwards fancybox-fadeIn /* ANIMACJE TLO !!!!! */ } .fancybox__container.is-animated.is-closing .fancybox__backdrop,.fancybox__container.is-animated.is-closing .fancybox__caption,.fancybox__container.is-animated.is-closing .fancybox__nav,.fancybox__container.is-animated.is-closing .carousel__dots,.fancybox__container.is-animated.is-closing .carousel__button.is-close /* ANIMACJE ---------------------------------------------------------------------------------------------------------- */ { animation:0.8s ease both fancybox-fadeOut } .fancybox-fadeIn{animation:0.8s ease-in-out both fancybox-fadeIn} .fancybox-fadeOut{animation:0.5s ease-in-out both fancybox-fadeOut} .fancybox-zoomInUp{animation:2.2s ease both fancybox-zoomInUp} .fancybox-zoomOutDown{animation:1.15s ease both fancybox-zoomOutDown} .fancybox-throwOutUp{animation:1.15s ease both fancybox-throwOutUp} .fancybox-throwOutDown{animation:1.15s ease both fancybox-throwOutDown } @keyframes fancybox-fadeIn{ from{opacity:0}to{opacity:1} } @keyframes fancybox-fadeOut{ to{opacity:0} } @keyframes fancybox-zoomInUp{ from{transform:scale(1) translate3d(0, 0px, 0); /* ANIMACJE było - (0, 16px, 0); ---------- */ opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1} } @keyframes fancybox-zoomOutDown{ to{transform:scale(1) translate3d(0, 0px, 0); /* ANIMACJE było - (0, 16px, 0); ---------- */ opacity:0} } @keyframes fancybox-throwOutUp{to{transform:translate3d(0, -30%, 0);opacity:0}} @keyframes fancybox-throwOutDown{to{transform:translate3d(0, 30%, 0);opacity:0}} .fancybox__carousel .carousel__slide{ scrollbar-width:thin;scrollbar-color:#fff rgba(255,255,255,.1)} .fancybox__carousel .carousel__slide::-webkit-scrollbar{width:8px;height:8px} .fancybox__carousel .carousel__slide::-webkit-scrollbar-track{ background-color:rgba(255,255,255,.1)} .fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb{ background-color:#fff;border-radius:2px;box-shadow:inset 0 0 4px rgba(0,0,0,.2)} .fancybox__carousel.is-draggable .fancybox__slide,.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content {cursor:move;cursor:grab} .fancybox__carousel.is-dragging .fancybox__slide,.fancybox__carousel.is-dragging .fancybox__slide .fancybox__content {cursor:move;cursor:grabbing}.fancybox__carousel .fancybox__slide .fancybox__content{cursor:auto} .fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content{cursor:zoom-in} .fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content{cursor:zoom-out} .fancybox__carousel .fancybox__slide.is-draggable .fancybox__content{cursor:move;cursor:grab} .fancybox__carousel .fancybox__slide.is-dragging .fancybox__content{cursor:move;cursor:grabbing} .fancybox__image{transform-origin:0 0;user-select:none;transition:none} .has-image .fancybox__content{ padding:0; background:rgba(0,0,0,0.0); min-height:1px} .is-closing .has-image .fancybox__content{overflow:visible} .has-image[data-image-fit=contain]{overflow:visible;touch-action:none} .has-image[data-image-fit=contain] .fancybox__content{flex-direction:row;flex-wrap:wrap} .has-image[data-image-fit=contain] .fancybox__image{ /* IMAGE -------------------------------------------------------------- */ max-width:100%;max-height:100%;object-fit:contain; -webkit-box-shadow:0 0px 6px rgba(0, 0, 0, 0.4);-moz-box-shadow:0 0px 6px rgba(0, 0, 0, 0.4);box-shadow:0 0px 6px rgba(0, 0, 0, 0.4); } /* IMAGE -------------------------------------------------------------- */ .has-image[data-image-fit=contain-w]{overflow-x:hidden;overflow-y:auto} .has-image[data-image-fit=contain-w] .fancybox__content{min-height:auto} .has-image[data-image-fit=contain-w] .fancybox__image{max-width:100%;height:auto} .has-image[data-image-fit=cover]{overflow:visible;touch-action:none} .has-image[data-image-fit=cover] .fancybox__content{width:100%;height:100%} .has-image[data-image-fit=cover] .fancybox__image{width:100%;height:100%;object-fit:cover} .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content, .fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content {max-width:100%;flex-shrink:1;min-height:1px;overflow:visible} .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content, .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content{width:100%;height:80%}.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content {width:960px;height:540px;max-width:100%;max-height:100%} .fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff} .fancybox__carousel .fancybox__slide.has-map .fancybox__content{ background:#e5e3df} .fancybox__html5video,.fancybox__iframe{ border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)} .fancybox-placeholder{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0); white-space:nowrap;border-width:0}.fancybox__thumbs{flex:0 0 auto;position:relative;padding:0px 3px; opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs{animation:.15s ease-in backwards fancybox-fadeIn} .fancybox__container.is-animated.is-closing .fancybox__thumbs{opacity:0} .fancybox__thumbs .carousel__slide{ flex:0 0 auto;width:var(--fancybox-thumbs-width, 96px);margin:0;padding:8px 3px; box-sizing:content-box;display:flex;align-items:center;justify-content:center; overflow:visible;cursor:pointer} .fancybox__thumbs .carousel__slide .fancybox__thumb::after{ content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-width:5px;border-style:solid; border-color:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));opacity:0; transition:opacity .15s ease;border-radius:var(--fancybox-thumbs-border-radius, 4px)} .fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after{opacity:.92} .fancybox__thumbs .carousel__slide>*{pointer-events:none;user-select:none} .fancybox__thumb{ position:relative;width:100%;padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 1.5))); background-size:cover;background-position:center center;background-color:rgba(255,255,255,.1); background-repeat:no-repeat;border-radius:var(--fancybox-thumbs-border-radius, 4px)} /* pasek ikon ---------------------------------------------------------------------------------------------------------- */ .fancybox__toolbar{ position:absolute;top:0;right:0;left:0;z-index:20; padding:0;touch-action:none;display:flex; justify-content:space-between; /* ikonki */ --carousel-button-svg-width: 20px; --carousel-button-svg-height: 20px; --carousel-button-svg-stroke-width: 2.5; /* ikonki */ opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(255, 255, 255, 1.0))} @media all and (min-width: 1024px){.fancybox__toolbar{padding:8px}}.fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__toolbar{opacity:0}.fancybox__toolbar__items{display:flex}.fancybox__toolbar__items--left{margin-right:auto} .fancybox__toolbar__items--center{position:absolute;left:50%;transform:translateX(-50%)} .fancybox__toolbar__items--right{margin-left:auto}@media(max-width: 640px){ .fancybox__toolbar__items--center:not(:last-child){display:none}} .fancybox__counter{min-width:72px;padding:0 10px;line-height:var(--carousel-button-height, 48px);text-align:center; font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased} /* progras bar pokaz slajdow ---------------------------------------------------------------------------------------------------------- */ .fancybox__progress{background:var(--PrimaryHoverColor); height:3px;left:0;position:absolute;right:0;top:0;transform:scaleX(0); transform-origin:0;transition-property:transform;transition-timing-function:linear; z-index:30;user-select:none} .fancybox__container:fullscreen::backdrop{opacity:0} .fancybox__button--fullscreen g:nth-child(2){display:none} .fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1){display:none} .fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2){display:block} .fancybox__button--slideshow g:nth-child(2){display:none} .fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1){display:none} .fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2){display:block}