:root { --f-spinner-width: 36px; --f-spinner-height: 36px; --f-spinner-color-1: rgba(0, 0, 0, 0.1); --f-spinner-color-2: rgba(17, 24, 28, 0.8); --f-spinner-stroke: 2.75 } .f-spinner { margin: auto; padding: 0; width: var(--f-spinner-width); height: var(--f-spinner-height) } .f-spinner svg { width: 100%; height: 100%; vertical-align: top; animation: f-spinner-rotate 2s linear infinite } .f-spinner svg * { stroke-width: var(--f-spinner-stroke); fill: none } .f-spinner svg *:first-child { stroke: var(--f-spinner-color-1) } .f-spinner svg *:last-child { stroke: var(--f-spinner-color-2); animation: f-spinner-dash 2s ease-in-out infinite } @keyframes f-spinner-rotate { 100% { transform: rotate(360deg) } } @keyframes f-spinner-dash { 0% { stroke-dasharray: 1,150; stroke-dashoffset: 0 } 50% { stroke-dasharray: 90,150; stroke-dashoffset: -35 } 100% { stroke-dasharray: 90,150; stroke-dashoffset: -124 } } .f-throwOutUp { animation: var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutUp } .f-throwOutDown { animation: var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutDown } @keyframes f-throwOutUp { to { transform: translate3d(0, calc(var(--f-throw-out-distance, 150px) * -1), 0); opacity: 0 } } @keyframes f-throwOutDown { to { transform: translate3d(0, var(--f-throw-out-distance, 150px), 0); opacity: 0 } } .f-zoomInUp { animation: var(--f-transition-duration, 0.2s) ease .1s both f-zoomInUp } .f-zoomOutDown { animation: var(--f-transition-duration, 0.2s) ease both f-zoomOutDown } @keyframes f-zoomInUp { from { transform: scale(0.975) translate3d(0, 16px, 0); opacity: 0 } to { transform: scale(1) translate3d(0, 0, 0); opacity: 1 } } @keyframes f-zoomOutDown { to { transform: scale(0.975) translate3d(0, 16px, 0); opacity: 0 } } .f-fadeIn { animation: var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn; z-index: 2 } .f-fadeOut { animation: var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut; z-index: 1 } @keyframes f-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes f-fadeOut { 100% { opacity: 0 } } .f-fadeFastIn { animation: var(--f-transition-duration, 0.2s) ease-out both f-fadeFastIn; z-index: 2 } .f-fadeFastOut { animation: var(--f-transition-duration, 0.1s) ease-out both f-fadeFastOut; z-index: 2 } @keyframes f-fadeFastIn { 0% { opacity: .75 } 100% { opacity: 1 } } @keyframes f-fadeFastOut { 100% { opacity: 0 } } .f-fadeSlowIn { animation: var(--f-transition-duration, 0.5s) ease both f-fadeSlowIn; z-index: 2 } .f-fadeSlowOut { animation: var(--f-transition-duration, 0.5s) ease both f-fadeSlowOut; z-index: 1 } @keyframes f-fadeSlowIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes f-fadeSlowOut { 100% { opacity: 0 } } .f-crossfadeIn { animation: var(--f-transition-duration, 0.2s) ease-out both f-crossfadeIn; z-index: 2 } .f-crossfadeOut { animation: calc(var(--f-transition-duration, 0.2s)*.5) linear .1s both f-crossfadeOut; z-index: 1 } @keyframes f-crossfadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes f-crossfadeOut { 100% { opacity: 0 } } .f-slideIn.from-next { animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInNext } .f-slideIn.from-prev { animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInPrev } .f-slideOut.to-next { animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutNext } .f-slideOut.to-prev { animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutPrev } @keyframes f-slideInPrev { 0% { transform: translateX(100%) } 100% { transform: translate3d(0, 0, 0) } } @keyframes f-slideInNext { 0% { transform: translateX(-100%) } 100% { transform: translate3d(0, 0, 0) } } @keyframes f-slideOutNext { 100% { transform: translateX(-100%) } } @keyframes f-slideOutPrev { 100% { transform: translateX(100%) } } .f-classicIn.from-next { animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInNext; z-index: 2 } .f-classicIn.from-prev { animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInPrev; z-index: 2 } .f-classicOut.to-next { animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutNext; z-index: 1 } .f-classicOut.to-prev { animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutPrev; z-index: 1 } @keyframes f-classicInNext { 0% { transform: translateX(-75px); opacity: 0 } 100% { transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes f-classicInPrev { 0% { transform: translateX(75px); opacity: 0 } 100% { transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes f-classicOutNext { 100% { transform: translateX(-75px); opacity: 0 } } @keyframes f-classicOutPrev { 100% { transform: translateX(75px); opacity: 0 } } .f-carousel { --f-carousel-theme-color: #706f6c; --f-carousel-spacing: 0px; --f-carousel-slide-width: 100%; --f-carousel-slide-height: auto; --f-carousel-slide-padding: 0; --f-button-width: 42px; --f-button-height: 42px; --f-button-color: var(--f-carousel-theme-color, currentColor); --f-button-hover-color: var(--f-carousel-theme-color, currentColor); --f-button-bg: transparent; --f-button-hover-bg: var(--f-button-bg); --f-button-active-bg: var(--f-button-bg); --f-button-svg-width: 24px; --f-button-svg-height: 24px; --f-button-next-pos: 10px; --f-button-prev-pos: 10px; --f-spinner-color-1: rgba(0, 0, 0, 0.1); --f-spinner-color-2: rgba(17, 24, 28, 0.8); --f-spinner-stroke: 2.75; position: relative; box-sizing: border-box } .f-carousel *,.f-carousel *:before,.f-carousel *:after { box-sizing: inherit } .f-carousel.is-ltr { direction: ltr } .f-carousel.is-rtl { direction: rtl } .f-carousel__viewport { overflow: hidden; transform: translate3d(0, 0, 0); backface-visibility: hidden; width: 100%; height: 100% } .f-carousel__viewport.is-draggable { cursor: move; cursor: zoom-in } .f-carousel__viewport.is-dragging { cursor: move; cursor: grabbing } .f-carousel__track { display: flex; margin: 0 auto; padding: 0; height: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0) } .f-carousel__slide { position: relative; flex: 0 0 auto; width: var(--f-carousel-slide-width); max-width: 100%; height: var(--f-carousel-slide-height); margin: 0 var(--f-carousel-spacing) 0 0; padding: var(--f-carousel-slide-padding); outline: 0; transform-origin: center center } .f-carousel__slide img.is-preloading { visibility: hidden } .f-carousel__slide>.f-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .f-carousel.is-vertical { --f-carousel-slide-height: 100% } .f-carousel.is-vertical .f-carousel__track { flex-wrap: wrap } .f-carousel.is-vertical .f-carousel__slide { margin: 0 0 var(--f-carousel-spacing) 0 } :root { --f-carousel-dots-width: 24px; --f-carousel-dots-height: 30px; --f-carousel-dot-width: 8px; --f-carousel-dot-height: 8px; --f-carousel-dot-radius: 50%; --f-carousel-dot-color: var(--f-carousel-theme-color, currentColor); --f-carousel-dot-opacity: 0.2; --f-carousel-dot-hover-opacity: 0.4 } .f-carousel.has-dots { margin-bottom: var(--f-carousel-dots-height) } .f-carousel__dots { position: absolute; bottom: calc(var(--f-carousel-dots-height)*-1); left: 0; right: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0 auto !important; padding: 0; list-style: none !important; user-select: none } .f-carousel__dots li { margin: 0; padding: 0; border: 0; display: flex; align-items: center; justify-content: center; opacity: var(--f-carousel-dot-opacity); transition: opacity .15s ease-in-out } .f-carousel__dots li+li { margin: 0 } .f-carousel__dots li:hover { opacity: var(--f-carousel-dot-hover-opacity) } .f-carousel__dots li.is-current { opacity: 1 } .f-carousel__dots li button { appearance: none; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; width: var(--f-carousel-dots-width); height: var(--f-carousel-dots-height); border: 0; background: rgba(0,0,0,0); cursor: pointer; transition: all .2s linear } .f-carousel__dot { display: block; margin: 0; padding: 0; border: 0; width: var(--f-carousel-dot-width); height: var(--f-carousel-dot-height); border-radius: var(--f-carousel-dot-radius); background-color: var(--f-carousel-dot-color); line-height: 0; font-size: 0; cursor: pointer; pointer-events: none } .f-carousel__dots.is-dynamic li:not(.is-prev,.is-next,.is-current,.is-after-next,.is-before-prev) button { transform: scale(0); width: 0 } .f-carousel__dots.is-dynamic li.is-before-prev button,.f-carousel__dots.is-dynamic li.is-after-next button { transform: scale(0.22) } .f-carousel__dots.is-dynamic li.is-prev button,.f-carousel__dots.is-dynamic li.is-next button { transform: scale(0.66) } .f-carousel__dots.is-dynamic li.is-current button { transform: scale(1) } .f-carousel__dots.is-dynamic li.is-before-prev button,.f-carousel__dots.is-dynamic li.is-after-next button { transform: scale(0.33) } .f-carousel__dots.is-dynamic li.is-current:first-child { margin-left: calc(var(--f-carousel-dots-width)*2) } .f-carousel__dots.is-dynamic li.is-prev:first-child { margin-left: var(--f-carousel-dots-width) } .f-carousel__dots.is-dynamic li.is-next:last-child { margin-right: var(--f-carousel-dots-width) } .f-carousel__dots.is-dynamic li.is-current:last-child { margin-right: calc(var(--f-carousel-dots-width)*2) } .f-carousel.is-rtl .f-carousel__dots.is-dynamic .is-current:first-child { margin-left: 0; margin-right: var(--f-carousel-dots-width) } .f-carousel.is-rtl .f-carousel__dots.is-dynamic .is-prev:first-child { margin-left: 0; margin-right: var(--f-carousel-dots-width) } .f-carousel.is-rtl .f-carousel__dots.is-dynamic .is-current:last-child { margin-left: 0; margin-right: var(--f-carousel-dots-width) } .f-carousel.is-rtl .f-carousel__dots.is-dynamic .is-next:last-child { margin-right: 0; margin-left: var(--f-carousel-dots-width) } #myCarousel { max-width: 500px; margin: 0 auto; cursor: zoom-in;} #myCarousel .f-carousel__slide { display: flex; justify-content: center; align-items: center; } .f-thumbs__slide { --f-thumb-width: 70px; --f-thumb-height: 70px; --f-thumb-border-radius: 5px; --f-thumb-outline: 2px; --f-thumb-outline-color: #d6604a; position: relative; opacity: var(--fancybox-opacity, 1); transition: max-height .35s cubic-bezier(0.23, 1, 0.32, 1); }