/* FLUID topography ---------------- https://typescale.com/ https://utopia.fyi/type/calculator?c=340,16,1.125,1600,18,1.175,6,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjMyMHB4IiwibWF4V2lkdGgiOiIxNjAwcHgiLCJtaW5Gb250U2l6ZSI6IjE2cHgiLCJtYXhGb250U2l6ZSI6IjE4cHgifQ%3D%3D https://fluidtypography.com/#app-get-started */ /*@import "/node_modules/bootstrap/dist/css/bootstrap-reboot.css";*/ /*@import "/node_modules/bootstrap/dist/css/bootstrap.css";*/ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /** * Swiper 11.2.10 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 28, 2025 */ /* FONT_START */ @font-face { font-family: 'swiper-icons'; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); font-weight: 400; font-style: normal; } /* FONT_END */ :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ''; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-top-offset: 50%; --swiper-navigation-sides-offset: 10px; --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev svg, .swiper-button-next svg { width: 100%; height: 100%; object-fit: contain; transform-origin: center; } .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg { transform: rotate(180deg); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-lock { display: none; } /* Navigation font start */ .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: 'next'; } /* Navigation font end */ :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 8px; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-border-radius: 50%; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Fraction */ .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } /* Progress */ .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } :root { /* --swiper-scrollbar-border-radius: 10px; --swiper-scrollbar-top: auto; --swiper-scrollbar-bottom: 4px; --swiper-scrollbar-left: auto; --swiper-scrollbar-right: 4px; --swiper-scrollbar-sides-offset: 1%; --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1); --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5); --swiper-scrollbar-size: 4px; */ } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; touch-action: none; background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1)); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-border-radius, 10px); left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } /* Zoom container styles start */ .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } /* Zoom container styles end */ .swiper-slide-zoomed { cursor: move; touch-action: none; } /* a11y */ .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active { pointer-events: auto; } .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper.swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } /* Cube slide shadows start */ .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Cube slide shadows end */ .swiper.swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } /* Flip slide shadows start */ .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Flip slide shadows end */ .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } .swiper.swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } :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}} :root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-hover-bg: #e0e0e0;--f-button-active-bg: #d0d0d0;--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-disabled-opacity: 0.65} .f-button{display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);pointer-events:all;cursor:pointer;transition:var(--f-button-transition)} @media(hover: hover){.f-button:hover:not([disabled]){color:var(--f-button-hover-color);background-color:var(--f-button-hover-bg)}} .f-button:active:not([disabled]){background-color:var(--f-button-active-bg)} .f-button:focus:not(:focus-visible){outline:none} .f-button:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))} .f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);fill:var(--f-button-svg-fill);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s ease;transform:var(--f-button-transform);filter:var(--f-button-svg-filter);pointer-events:none} .f-button[disabled]{cursor:default} .f-button[disabled] svg{opacity:var(--f-button-svg-disabled-opacity)} .f-carousel__nav .f-button.is-prev,.f-carousel__nav .f-button.is-next,.fancybox__nav .f-button.is-prev,.fancybox__nav .f-button.is-next{position:absolute;z-index:1} .is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-next{top:50%;transform:translateY(-50%)} .is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-prev{left:var(--f-button-prev-pos)} .is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-next{right:var(--f-button-next-pos)} .is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,.is-horizontal.is-rtl .fancybox__nav .f-button.is-prev{left:auto;right:var(--f-button-next-pos)} .is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,.is-horizontal.is-rtl .fancybox__nav .f-button.is-next{right:auto;left:var(--f-button-prev-pos)} .is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-next{top:auto;left:50%;transform:translateX(-50%)} .is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-prev{top:var(--f-button-next-pos)} .is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-next{bottom:var(--f-button-next-pos)} .is-vertical .f-carousel__nav .f-button.is-prev svg,.is-vertical .f-carousel__nav .f-button.is-next svg,.is-vertical .fancybox__nav .f-button.is-prev svg,.is-vertical .fancybox__nav .f-button.is-next svg{transform:rotate(90deg)} .f-carousel__nav .f-button:disabled,.fancybox__nav .f-button:disabled{pointer-events:none} html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto} html.with-fancybox body{touch-action:none} html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));overflow:hidden !important;overscroll-behavior-y:none} .fancybox__container{--fancybox-color: #dbdbdb;--fancybox-hover-color: #fff;--fancybox-bg: rgba(24, 24, 27, 0.98);--fancybox-slide-gap: 10px;--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-color-1: rgba(255, 255, 255, 0.1);--f-spinner-color-2: #bbb;--f-spinner-stroke: 3.65;position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;display:flex;flex-direction:column;box-sizing:border-box;margin:0;padding:0;color:#f8f8f8;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:visible;z-index:var(--fancybox-zIndex, 1050);outline:none;transform-origin:top left;-webkit-text-size-adjust:100%;-moz-text-size-adjust:none;-ms-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:contain} .fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit} .fancybox__container::backdrop{background-color:rgba(0,0,0,0)} .fancybox__backdrop{position:fixed;top:0;left:0;bottom:0;right:0;z-index:-1;background:var(--fancybox-bg);opacity:var(--fancybox-opacity, 1);will-change:opacity} .fancybox__carousel{position:relative;box-sizing:border-box;flex:1;min-height:0;z-index:10;overflow-y:visible;overflow-x:clip} .fancybox__viewport{width:100%;height:100%} .fancybox__viewport.is-draggable{cursor:move;cursor:grab} .fancybox__viewport.is-dragging{cursor:move;cursor:grabbing} .fancybox__track{display:flex;margin:0 auto;height:100%} .fancybox__slide{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;margin:0 var(--fancybox-slide-gap) 0 0;padding:4px;overflow:auto;overscroll-behavior:contain;transform:translate3d(0, 0, 0);backface-visibility:hidden} .fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top:40px} .fancybox__slide.has-iframe,.fancybox__slide.has-video,.fancybox__slide.has-html5video{overflow:hidden} .fancybox__slide.has-image{overflow:hidden} .fancybox__slide.has-image.is-animating,.fancybox__slide.has-image.is-selected{overflow:visible} .fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto} .fancybox__backdrop:empty,.fancybox__viewport:empty,.fancybox__track:empty,.fancybox__slide:empty{display:block} .fancybox__content{align-self:center;display:flex;flex-direction:column;position:relative;margin:0;padding:2rem;max-width:100%;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);cursor:default;border-radius:0;z-index:20} .is-loading .fancybox__content{opacity:0} .is-draggable .fancybox__content{cursor:move;cursor:grab} .can-zoom_in .fancybox__content{cursor:zoom-in} .can-zoom_out .fancybox__content{cursor:zoom-out} .is-dragging .fancybox__content{cursor:move;cursor:grabbing} .fancybox__content [data-selectable],.fancybox__content [contenteditable]{cursor:auto} .fancybox__slide.has-image>.fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translate3d(0, 0, 0);backface-visibility:hidden} .fancybox__slide.has-image>.fancybox__content>picture>img{width:100%;height:auto;max-height:100%} .is-animating .fancybox__content,.is-dragging .fancybox__content{will-change:transform,width,height} .fancybox-image{margin:auto;display:block;width:100%;height:100%;min-height:0;object-fit:contain;user-select:none;filter:blur(0px)} .fancybox__caption{align-self:center;max-width:100%;flex-shrink:0;margin:0;padding:14px 0 4px 0;overflow-wrap:anywhere;line-height:1.375;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);cursor:auto;visibility:visible} .is-loading .fancybox__caption,.is-closing .fancybox__caption{opacity:0;visibility:hidden} .is-compact .fancybox__caption{padding-bottom:0} .f-button.is-close-btn{--f-button-svg-stroke-width: 2;position:absolute;top:0;right:8px;z-index:40} .fancybox__content>.f-button.is-close-btn{--f-button-width: 34px;--f-button-height: 34px;--f-button-border-radius: 4px;--f-button-color: var(--fancybox-color, #fff);--f-button-hover-color: var(--fancybox-color, #fff);--f-button-bg: transparent;--f-button-hover-bg: transparent;--f-button-active-bg: transparent;--f-button-svg-width: 22px;--f-button-svg-height: 22px;position:absolute;top:-38px;right:0;opacity:.75} .is-loading .fancybox__content>.f-button.is-close-btn{visibility:hidden} .is-zooming-out .fancybox__content>.f-button.is-close-btn{visibility:hidden} .fancybox__content>.f-button.is-close-btn:hover{opacity:1} .fancybox__footer{padding:0;margin:0;position:relative} .fancybox__footer .fancybox__caption{width:100%;padding:24px;opacity:var(--fancybox-opacity, 1);transition:all .25s ease} .is-compact .fancybox__footer{position:absolute;bottom:0;left:0;right:0;z-index:20;background:rgba(24,24,27,.5)} .is-compact .fancybox__footer .fancybox__caption{padding:12px} .is-compact .fancybox__content>.f-button.is-close-btn{--f-button-border-radius: 50%;--f-button-color: #fff;--f-button-hover-color: #fff;--f-button-outline-color: #000;--f-button-bg: rgba(0, 0, 0, 0.6);--f-button-active-bg: rgba(0, 0, 0, 0.6);--f-button-hover-bg: rgba(0, 0, 0, 0.6);--f-button-svg-width: 18px;--f-button-svg-height: 18px;--f-button-svg-filter: none;top:5px;right:5px} .fancybox__nav{--f-button-width: 50px;--f-button-height: 50px;--f-button-border: 0;--f-button-border-radius: 50%;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: transparent;--f-button-hover-bg: rgba(24, 24, 27, 0.3);--f-button-active-bg: rgba(24, 24, 27, 0.5);--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 26px;--f-button-svg-height: 26px;--f-button-svg-stroke-width: 2.5;--f-button-svg-fill: none;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));--f-button-svg-disabled-opacity: 0.65;--f-button-next-pos: 1rem;--f-button-prev-pos: 1rem;opacity:var(--fancybox-opacity, 1)} .fancybox__nav .f-button:before{position:absolute;content:"";top:-30px;right:-20px;left:-20px;bottom:-30px;z-index:1} .is-idle .fancybox__nav{animation:.15s ease-out both f-fadeOut} .is-idle.is-compact .fancybox__footer{pointer-events:none;animation:.15s ease-out both f-fadeOut} .fancybox__slide>.f-spinner{position:absolute;top:50%;left:50%;margin:var(--f-spinner-top, calc(var(--f-spinner-width) * -0.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -0.5));z-index:30;cursor:pointer} .fancybox-protected{position:absolute;top:0;left:0;right:0;bottom:0;z-index:40;user-select:none} .fancybox-ghost{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:contain;z-index:40;user-select:none;pointer-events:none} .fancybox-focus-guard{outline:none;opacity:0;position:fixed;pointer-events:none} .fancybox__container:not([aria-hidden]){opacity:0} .fancybox__container.is-animated[aria-hidden=false]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=false] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-enter-duration, 0.25s) ease .1s backwards f-fadeIn} .fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop{animation:var(--f-backdrop-enter-duration, 0.35s) ease backwards f-fadeIn} .fancybox__container.is-animated[aria-hidden=true]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=true] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-exit-duration, 0.15s) ease forwards f-fadeOut} .fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop{animation:var(--f-backdrop-exit-duration, 0.35s) ease forwards f-fadeOut} .has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible} .has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content{width:calc(100% - 120px);height:90%} .fancybox__container.is-compact .has-iframe .fancybox__content,.fancybox__container.is-compact .has-map .fancybox__content,.fancybox__container.is-compact .has-pdf .fancybox__content{width:100%;height:100%} .has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%} .has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff} .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{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important} .f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0} .f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1} .f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px} .f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none;perspective:1000px;transform:translateZ(0)} .f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2, #e2e8f0);z-index:-1} .f-thumbs .f-spinner svg{display:none} .f-thumbs.is-vertical{height:100%} .f-thumbs__viewport{width:100%;height:auto;overflow:hidden;transform:translate3d(0, 0, 0)} .f-thumbs__track{display:flex} .f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer} .f-thumbs__slide.is-loading img{opacity:0} .is-classic .f-thumbs__viewport{height:100%} .is-modern .f-thumbs__track{width:max-content} .is-modern .f-thumbs__track::before{content:"";position:absolute;top:0;bottom:0;left:calc((var(--f-thumb-clip-width, 0))*-0.5);width:calc(var(--width, 0)*1px + var(--f-thumb-clip-width, 0));cursor:pointer} .is-modern .f-thumbs__slide{width:var(--f-thumb-clip-width);transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);transition:none;pointer-events:none} .is-modern.is-resting .f-thumbs__slide{transition:transform .33s ease} .is-modern.is-resting .f-thumbs__slide__button{transition:clip-path .33s ease} .is-using-tab .is-modern .f-thumbs__slide:focus-within{filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))} .f-thumbs__slide__button{appearance:none;width:var(--f-thumb-width);height:100%;margin:0 -100% 0 -100%;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:rgba(0,0,0,0);outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease} .f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)} .f-thumbs__slide__button:focus:not(:focus-visible){outline:none} .f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)} .is-modern .f-thumbs__slide__button{--clip-path: inset( 0 calc( ((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0))) * (1 - var(--progress, 0)) * 0.5 ) round var(--f-thumb-border-radius, 0) );clip-path:var(--clip-path)} .is-classic .is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)} .is-classic .is-nav-selected .f-thumbs__slide__button::after{content:"";position:absolute;top:0;left:0;right:0;height:auto;bottom:0;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10} .f-thumbs__slide__img{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover;border-radius:var(--f-thumb-border-radius)} .f-thumbs.is-horizontal .f-thumbs__track{padding:8px 0 12px 0} .f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0} .f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;padding:0 8px} .f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0} .fancybox__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-border-radius: 2px;--f-thumb-outline: 2px;--f-thumb-outline-color: #ededed;position:relative;opacity:var(--fancybox-opacity, 1);transition:max-height .35s cubic-bezier(0.23, 1, 0.32, 1)} .fancybox__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1} .fancybox__thumbs.is-classic .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))} .fancybox__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1} .fancybox__thumbs.is-modern .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))} .fancybox__thumbs.is-horizontal{padding:0 var(--f-thumb-gap)} .fancybox__thumbs.is-vertical{padding:var(--f-thumb-gap) 0} .is-compact .fancybox__thumbs{--f-thumb-width: 64px;--f-thumb-clip-width: 32px;--f-thumb-height: 48px;--f-thumb-extra-gap: 10px} .fancybox__thumbs.is-masked{max-height:0px !important} .is-closing .fancybox__thumbs{transition:none !important} .fancybox__toolbar{--f-progress-color: var(--fancybox-color, rgba(255, 255, 255, 0.94));--f-button-width: 46px;--f-button-height: 46px;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: rgba(24, 24, 27, 0.65);--f-button-hover-bg: rgba(70, 70, 73, 0.65);--f-button-active-bg: rgba(90, 90, 93, 0.65);--f-button-border-radius: 0;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.5;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.15));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: 0.65;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.5));pointer-events:none;z-index:20} .fancybox__toolbar :focus-visible{z-index:1} .fancybox__toolbar.is-absolute,.is-compact .fancybox__toolbar{position:absolute;top:0;left:0;right:0} .is-idle .fancybox__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut} .fancybox__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start} .fancybox__toolbar__column.is-left,.fancybox__toolbar__column.is-right{flex-grow:1;flex-basis:0} .fancybox__toolbar__column.is-right{display:flex;justify-content:flex-end;flex-wrap:nowrap} .fancybox__infobar{padding:0 5px;line-height:var(--f-button-height);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;cursor:default;user-select:none} .fancybox__infobar span{padding:0 5px} .fancybox__infobar:not(:first-child):not(:last-child){background:var(--f-button-bg)} [data-fancybox-toggle-slideshow]{position:relative} [data-fancybox-toggle-slideshow] .f-progress{height:100%;opacity:.3} [data-fancybox-toggle-slideshow] svg g:first-child{display:flex} [data-fancybox-toggle-slideshow] svg g:last-child{display:none} .has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child{display:none} .has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child{display:flex} [data-fancybox-toggle-fullscreen] svg g:first-child{display:flex} [data-fancybox-toggle-fullscreen] svg g:last-child{display:none} :fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none} :fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex} .f-progress{position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;background:var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));z-index:30;user-select:none;pointer-events:none} /* required styles */ .leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { position: absolute; left: 0; top: 0; } .leaflet-container { overflow: hidden; } .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } /* Prevents IE11 from highlighting tiles in blue */ .leaflet-tile::selection { background: transparent; } /* Safari renders non-retina tile on retina better with this, but Chrome is worse */ .leaflet-safari .leaflet-tile { image-rendering: -webkit-optimize-contrast; } /* hack that prevents hw layers "stretching" when loading new tiles */ .leaflet-safari .leaflet-tile-container { width: 1600px; height: 1600px; -webkit-transform-origin: 0 0; } .leaflet-marker-icon, .leaflet-marker-shadow { display: block; } /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ .leaflet-container .leaflet-overlay-pane svg { max-width: none !important; max-height: none !important; } .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; width: auto; padding: 0; } .leaflet-container img.leaflet-tile { /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */ mix-blend-mode: plus-lighter; } .leaflet-container.leaflet-touch-zoom { -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; } .leaflet-container.leaflet-touch-drag { -ms-touch-action: pinch-zoom; /* Fallback for FF which doesn't support pinch-zoom */ touch-action: none; touch-action: pinch-zoom; } .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { -ms-touch-action: none; touch-action: none; } .leaflet-container { -webkit-tap-highlight-color: transparent; } .leaflet-container a { -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); } .leaflet-tile { filter: inherit; visibility: hidden; } .leaflet-tile-loaded { visibility: inherit; } .leaflet-zoom-box { width: 0; height: 0; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 800; } /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ .leaflet-overlay-pane svg { -moz-user-select: none; } .leaflet-pane { z-index: 400; } .leaflet-tile-pane { z-index: 200; } .leaflet-overlay-pane { z-index: 400; } .leaflet-shadow-pane { z-index: 500; } .leaflet-marker-pane { z-index: 600; } .leaflet-tooltip-pane { z-index: 650; } .leaflet-popup-pane { z-index: 700; } .leaflet-map-pane canvas { z-index: 100; } .leaflet-map-pane svg { z-index: 200; } .leaflet-vml-shape { width: 1px; height: 1px; } .lvml { behavior: url(#default#VML); display: inline-block; position: absolute; } /* control positioning */ .leaflet-control { position: relative; z-index: 800; pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } .leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; } .leaflet-top { top: 0; } .leaflet-right { right: 0; } .leaflet-bottom { bottom: 0; } .leaflet-left { left: 0; } .leaflet-control { float: left; clear: both; } .leaflet-right .leaflet-control { float: right; } .leaflet-top .leaflet-control { margin-top: 10px; } .leaflet-bottom .leaflet-control { margin-bottom: 10px; } .leaflet-left .leaflet-control { margin-left: 10px; } .leaflet-right .leaflet-control { margin-right: 10px; } /* zoom and fade animations */ .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; } .leaflet-zoom-animated { -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } svg.leaflet-zoom-animated { will-change: transform; } .leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); transition: transform 0.25s cubic-bezier(0,0,0.25,1); } .leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile { -webkit-transition: none; -moz-transition: none; transition: none; } .leaflet-zoom-anim .leaflet-zoom-hide { visibility: hidden; } /* cursors */ .leaflet-interactive { cursor: pointer; } .leaflet-grab { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .leaflet-crosshair, .leaflet-crosshair .leaflet-interactive { cursor: crosshair; } .leaflet-popup-pane, .leaflet-control { cursor: auto; } .leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* marker & overlays interactivity */ .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container { pointer-events: none; } .leaflet-marker-icon.leaflet-interactive, .leaflet-image-layer.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive, svg.leaflet-image-layer.leaflet-interactive path { pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } /* visual tweaks */ .leaflet-container { background: #ddd; outline-offset: 1px; } .leaflet-container a { color: #0078A8; } .leaflet-zoom-box { border: 2px dotted #38f; background: rgba(255,255,255,0.5); } /* general typography */ .leaflet-container { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; font-size: 0.75rem; line-height: 1.5; } /* general toolbar styles */ .leaflet-bar { box-shadow: 0 1px 5px rgba(0,0,0,0.65); border-radius: 4px; } .leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; width: 26px; height: 26px; line-height: 26px; display: block; text-align: center; text-decoration: none; color: black; } .leaflet-bar a, .leaflet-control-layers-toggle { background-position: 50% 50%; background-repeat: no-repeat; display: block; } .leaflet-bar a:hover, .leaflet-bar a:focus { background-color: #f4f4f4; } .leaflet-bar a:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .leaflet-bar a:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; } .leaflet-bar a.leaflet-disabled { cursor: default; background-color: #f4f4f4; color: #bbb; } .leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; } .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } /* zoom control */ .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: bold 18px 'Lucida Console', Monaco, monospace; text-indent: 1px; } .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { font-size: 22px; } /* layers control */ .leaflet-control-layers { box-shadow: 0 1px 5px rgba(0,0,0,0.4); background: #fff; border-radius: 5px; } .leaflet-control-layers-toggle { background-image: url(/assets/js/layers-BWBAp2CZ.png); width: 36px; height: 36px; } .leaflet-retina .leaflet-control-layers-toggle { background-image: url(/assets/js/layers-2x-Bpkbi35X.png); background-size: 26px 26px; } .leaflet-touch .leaflet-control-layers-toggle { width: 44px; height: 44px; } .leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; } .leaflet-control-layers-expanded .leaflet-control-layers-list { display: block; position: relative; } .leaflet-control-layers-expanded { padding: 6px 10px 6px 6px; color: #333; background: #fff; } .leaflet-control-layers-scrollbar { overflow-y: scroll; overflow-x: hidden; padding-right: 5px; } .leaflet-control-layers-selector { margin-top: 2px; position: relative; top: 1px; } .leaflet-control-layers label { display: block; font-size: 13px; font-size: 1.08333em; } .leaflet-control-layers-separator { height: 0; border-top: 1px solid #ddd; margin: 5px -10px 5px -6px; } /* Default icon URLs */ .leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */ background-image: url(/assets/js/marker-icon-hN30_KVU.png); } /* attribution and scale controls */ .leaflet-container .leaflet-control-attribution { background: #fff; background: rgba(255, 255, 255, 0.8); margin: 0; } .leaflet-control-attribution, .leaflet-control-scale-line { padding: 0 5px; color: #333; line-height: 1.4; } .leaflet-control-attribution a { text-decoration: none; } .leaflet-control-attribution a:hover, .leaflet-control-attribution a:focus { text-decoration: underline; } .leaflet-attribution-flag { display: inline !important; vertical-align: baseline !important; width: 1em; height: 0.6669em; } .leaflet-left .leaflet-control-scale { margin-left: 5px; } .leaflet-bottom .leaflet-control-scale { margin-bottom: 5px; } .leaflet-control-scale-line { border: 2px solid #777; border-top: none; line-height: 1.1; padding: 2px 5px 1px; white-space: nowrap; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px #fff; } .leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; border-bottom: none; margin-top: -2px; } .leaflet-control-scale-line:not(:first-child):not(:last-child) { border-bottom: 2px solid #777; } .leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { box-shadow: none; } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: 2px solid rgba(0,0,0,0.2); background-clip: padding-box; } /* popup */ .leaflet-popup { position: absolute; text-align: center; margin-bottom: 20px; } .leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; } .leaflet-popup-content { margin: 13px 24px 13px 20px; line-height: 1.3; font-size: 13px; font-size: 1.08333em; min-height: 1px; } .leaflet-popup-content p { margin: 17px 0; margin: 1.3em 0; } .leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; margin-top: -1px; margin-left: -20px; overflow: hidden; pointer-events: none; } .leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; pointer-events: auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; color: #333; box-shadow: 0 3px 14px rgba(0,0,0,0.4); } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; border: none; text-align: center; width: 24px; height: 24px; font: 16px/24px Tahoma, Verdana, sans-serif; color: #757575; text-decoration: none; background: transparent; } .leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus { color: #585858; } .leaflet-popup-scrolled { overflow: auto; } .leaflet-oldie .leaflet-popup-content-wrapper { -ms-zoom: 1; } .leaflet-oldie .leaflet-popup-tip { width: 24px; margin: 0 auto; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); } .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip { border: 1px solid #999; } /* div icon */ .leaflet-div-icon { background: #fff; border: 1px solid #666; } /* Tooltip */ /* Base styles for the element that has a tooltip */ .leaflet-tooltip { position: absolute; padding: 6px; background-color: #fff; border: 1px solid #fff; border-radius: 3px; color: #222; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .leaflet-tooltip.leaflet-interactive { cursor: pointer; pointer-events: auto; } .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { position: absolute; pointer-events: none; border: 6px solid transparent; background: transparent; content: ""; } /* Directions */ .leaflet-tooltip-bottom { margin-top: 6px; } .leaflet-tooltip-top { margin-top: -6px; } .leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before { left: 50%; margin-left: -6px; } .leaflet-tooltip-top:before { bottom: 0; margin-bottom: -12px; border-top-color: #fff; } .leaflet-tooltip-bottom:before { top: 0; margin-top: -12px; margin-left: -6px; border-bottom-color: #fff; } .leaflet-tooltip-left { margin-left: -6px; } .leaflet-tooltip-right { margin-left: 6px; } .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { top: 50%; margin-top: -6px; } .leaflet-tooltip-left:before { right: 0; margin-right: -12px; border-left-color: #fff; } .leaflet-tooltip-right:before { left: 0; margin-left: -12px; border-right-color: #fff; } /* Printing */ @media print { /* Prevent printers from removing background-images of controls. */ .leaflet-control { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /*@import "node_modules/accordion-js/dist/accordion.min.css";*/ /* ---------------------------------------------- */ /* GRID */ /* ---------------------------------------------- */ :root { --gap-4: 0.25rem; --gap-6: 0.375rem; --gap-8: 0.5rem; --gap-10: 0.625rem; --gap-16: 1rem; --gap-20: 1.25rem; --gap-24: 1.5rem; --gap-30: 1.875rem; --gap-40: 2.5rem; --gap-60: 3.75rem; --gap-80: 5rem; --gap-100: 6.25rem; } .grid { display: grid; } .container { /*display: grid; max-width: 100dvw;*/ } .container-grid { display: grid; } .column--24 { grid-template-columns: repeat(24, 1fr); } .column--4 { grid-template-columns: repeat(4, 1fr); } .column--3 { grid-template-columns: repeat(3, 1fr); } .column--2 { grid-template-columns: repeat(2, 1fr); } @media (width < 1366px) { .col--2-sm { grid-template-columns: repeat(2, 1fr); } } @media (width < 576px) { .col--1-xs { grid-template-columns: 1fr !important; } } .flow--column { grid-auto-flow: column; /*grid-template-columns: repeat(auto-fit, minmax(0, 1fr));*/ } .flow--row { grid-auto-flow: row; } .col--area-1-1 { grid-column: 1/-1; } .col--area-2-2 { grid-column: 2/-2; } .col--area-3-3 { grid-column: 3/-3; } .col--area-4-4 { grid-column: 4/-4; } .col--area-5-5 { grid-column: 5/-5; } .col--area-6-6 { grid-column: 6/-6; } .gap--20 { gap: var(--gap-20); } .gap--40 { gap: var(--gap-40); } .gap--60 { gap: var(--gap-60); } @media (width < 1366px) { .col--area-sm-3-3 { grid-column: 3 / -3 } .col--area-sm-5-5 { grid-column: 5 / -5 } } @media (width < 1280px) { .col--area-sm-3-3 { grid-column: 3 / -3 } .col--area-sm-4-4 { grid-column: 4 / -4 } .col--area-sm-5-5 { grid-column: 5 / -5 } } /*@media (width < 769px) { .col--area-sm-3-3 { grid-column: 3 / -3 } }*/ @media (width <= 1024px) { .col--area-xs-2-2 { grid-column: 2 / -2 } .col--area-xs-3-3 { grid-column: 3 / -3 } .col--area-xs-4-4 { grid-column: 4 / -4 } } /* ---------------------------------------------- */ /* END GRID */ /* ---------------------------------------------- */ /* ---------------------------------------------- */ /* FLEX */ /* ---------------------------------------------- */ .flex-container { display: flex; /* Используем flexbox для контейнера */ gap: 20px; } .flex-item-25 { flex: 0 0 40%; /* Занимает 25% ширины контейнера, не растягивается и не сжимается */ } .flex-item-25.horizontal { flex: 0 0 25%; /* Занимает 25% ширины контейнера, не растягивается и не сжимается */ } .flex-item-75 { flex: 1; /* Занимает оставшееся пространство в контейнере */ } @media (width <= 1400px) { .flex-item-25.horizontal { flex: 0 0 35% !important; /* Занимает 25% ширины контейнера, не растягивается и не сжимается */ } } @media (width <= 1024px) { .flex-item-25.horizontal { flex: 0 0 35% !important; /* Занимает 25% ширины контейнера, не растягивается и не сжимается */ } } @media (width <= 768px) { .flex-item-25.horizontal { flex: 0 0 25% !important; /* Занимает 25% ширины контейнера, не растягивается и не сжимается */ } } @media (width <= 576px) { .flex-item-25 { flex: 0 0 40%; /* Занимает 25% ширины контейнера, не растягивается и не сжимается */ } } /* ---------------------------------------------- */ /* END FLEX */ /* ---------------------------------------------- */ .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; } .mt-5 { margin-top: 5rem; } .mt-6 { margin-top: 6rem; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } .mb-4 { margin-bottom: 4rem; } .mb-5 { margin-bottom: 5rem; } .mb-6 { margin-bottom: 6rem; } .pt-6 { padding-top: 6rem; } .pb-6 { padding-bottom: 6rem; } .svh-100 { height: 100svh; } .h-100 { height: 100%; } /*@font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-Thin.eot'); src: local('Atyp Display Thin'), local('AtypDisplay-Thin'), url('/fonts/a-type-display/AtypDisplay-Thin.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-Thin.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-Thin.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-ThinItalic.eot'); src: local('Atyp Display Thin Italic'), local('AtypDisplay-ThinItalic'), url('/fonts/a-type-display/AtypDisplay-ThinItalic.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-ThinItalic.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-ThinItalic.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; }*/ /*@font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-Light.eot'); src: local('Atyp Display Light'), local('AtypDisplay-Light'), url('/fonts/a-type-display/AtypDisplay-Light.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-Light.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-Light.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }*/ /*@font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-Regular.eot'); src: local('Atyp Display'), local('AtypDisplay-Regular'), url('/fonts/a-type-display/AtypDisplay-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-Regular.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-Regular.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }*/ @font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-Medium.eot'); src: local('Atyp Display Medium'), local('AtypDisplay-Medium'), url('/fonts/a-type-display/AtypDisplay-Medium.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-Medium.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-Medium.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-Semibold.eot'); src: local('Atyp Display Semibold'), local('AtypDisplay-Semibold'), url('/fonts/a-type-display/AtypDisplay-Semibold.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-Semibold.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-Semibold.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; } /* @font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-LightItalic.eot'); src: local('Atyp Display Light Italic'), local('AtypDisplay-LightItalic'), url('/fonts/a-type-display/AtypDisplay-LightItalic.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-LightItalic.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-LightItalic.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-Italic.eot'); src: local('Atyp Display Italic'), local('AtypDisplay-Italic'), url('/fonts/a-type-display/AtypDisplay-Italic.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-Italic.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-Italic.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-BoldItalic.eot'); src: local('Atyp Display Bold Italic'), local('AtypDisplay-BoldItalic'), url('/fonts/a-type-display/AtypDisplay-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-BoldItalic.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-BoldItalic.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Atyp Display'; src: url('/fonts/a-type-display/AtypDisplay-SemiboldItalic.eot'); src: local('Atyp Display Semibold Italic'), local('AtypDisplay-SemiboldItalic'), url('/fonts/a-type-display/AtypDisplay-SemiboldItalic.eot?#iefix') format('embedded-opentype'), url('/fonts/a-type-display/AtypDisplay-SemiboldItalic.woff2') format('woff2'), url('/fonts/a-type-display/AtypDisplay-SemiboldItalic.woff') format('woff'), url('/fonts/a-type-display/AtypDisplay-SemiboldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; }*/ @font-face { font-family: 'eUkraine'; src: url('/fonts/e-Ukraine/e-Ukraine-UltraLight.eot'); src: local('e-Ukraine UltraLight'), local('e-Ukraine-UltraLight'), url('/fonts/e-Ukraine/e-Ukraine-UltraLight.eot?#iefix') format("embedded-opentype"), url('/fonts/e-Ukraine/e-Ukraine-UltraLight.woff2') format("woff2"), url('/fonts/e-Ukraine/e-Ukraine-UltraLight.woff') format("woff"), url('/fonts/e-Ukraine/e-Ukraine-UltraLight.ttf') format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'eUkraine'; src: url('/fonts/e-Ukraine/e-Ukraine-Light.eot'); src: local('e-Ukraine Light'), local('e-Ukraine-Light'), url('/fonts/e-Ukraine/e-Ukraine-Light.eot?#iefix') format("embedded-opentype"), url('/fonts/e-Ukraine/e-Ukraine-Light.woff2') format("woff2"), url('/fonts/e-Ukraine/e-Ukraine-Light.woff') format("woff"), url('/fonts/e-Ukraine/e-Ukraine-Light.ttf') format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'eUkraine'; src: url('/fonts/e-Ukraine/e-Ukraine-Regular.eot'); src: local('e-Ukraine Regular'), local('e-Ukraine-Regular'), url('/fonts/e-Ukraine/e-Ukraine-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/e-Ukraine/e-Ukraine-Regular.woff2') format('woff2'), url('/fonts/e-Ukraine/e-Ukraine-Regular.woff') format('woff'), url('/fonts/e-Ukraine/e-Ukraine-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'eUkraine'; src: url('/fonts/e-Ukraine/e-Ukraine-Medium.eot'); src: local('e-Ukraine Medium'), local('e-Ukraine-Medium'), url('/fonts/e-Ukraine/e-Ukraine-Medium.eot?#iefix') format('embedded-opentype'), url('/fonts/e-Ukraine/e-Ukraine-Medium.woff2') format('woff2'), url('/fonts/e-Ukraine/e-Ukraine-Medium.woff') format('woff'), url('/fonts/e-Ukraine/e-Ukraine-Medium.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'eUkraine'; src: url('/fonts/e-Ukraine/e-Ukraine-Bold.eot'); src: local('e-Ukraine Bold'), local('e-Ukraine-Bold'), url('/fonts/e-Ukraine/e-Ukraine-Bold.eot?#iefix') format('embedded-opentype'), url('/fonts/e-Ukraine/e-Ukraine-Bold.woff2') format('woff2'), url('/fonts/e-Ukraine/e-Ukraine-Bold.woff') format('woff'), url('/fonts/e-Ukraine/e-Ukraine-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* CARD CONTAINERS */ .container--permanent-card { display: grid; grid-template-columns: repeat(2, 1fr); /*margin-top: 0 !important;*/ background: #e8e8e8; position: relative; cursor: pointer; transition: all .2s ease-in-out; } @media (width < 500px) { .container--permanent-card { grid-template-columns: 1fr; } } .container--permanent-card .card-item-title { /* margin-block-end: .75em;*/ } .container--permanent-card .permanent-card-image { position: relative; } @media (width < 500px) { .container--permanent-card .permanent-card-image { width: 100%; aspect-ratio: 1 / 1; } } .container--permanent-card .permanent-card-image img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .container--permanent-card .permanent-card-content { padding: var(--gap-40); } @media (width < 500px) { .container--permanent-card .permanent-card-image { width: 100%; aspect-ratio: 1 / 1; } .container--permanent-card .permanent-card-content { padding: 0; } } .container--permanent-card .card-item-info { background: none; } /*.container--permanent-card .card-item-info { display: grid; padding: 0; gap: var(--gap-30); grid-template-rows: revert; background: none; }*/ .container--permanent-card .card-item-service-wrapper { display: grid; /* width: auto;*/ grid-template-columns: 1fr max-content; gap: var(--gap-20); } .container--card { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: max-content; gap: var(--gap-40); align-content: center; margin-top: 0 !important; padding-bottom: var(--gap-20); /* trick for show hover card background on bottom */ } @media (width < 1500px) { .container--card { grid-template-columns: repeat(3, 1fr); gap: var(--gap-30); padding-bottom: var(--gap-20); /* trick for show hover card background on bottom */ } } @media (width < 768px) { .container--card { grid-template-columns: repeat(2, 1fr); gap: var(--gap-30); padding-bottom: var(--gap-20); /* trick for show hover card background on bottom */ } .container--card.research .card-item-info { gap: 0; } } @media (width < 500px) { .container--card { grid-template-columns: 2fr; /*padding: 0 var(--gap-30);*/ } } .container--card.permanent--card { grid-template-columns: repeat(2, 1fr); } @media (width < 500px) { .container--card.permanent--card { grid-template-columns: 1fr; gap: var(--gap-30); } } .container--card.observation-deck { grid-template-columns: repeat(2, 1fr); } @media (width < 500px) { .container--card.observation-deck { grid-template-columns: 1fr; gap: var(--gap-30); } } .container--card.research .card-item-info { grid-template-rows: 1fr; } .container--card.columns__3 { grid-template-columns: repeat(3, 1fr); } .container--card > * { min-width: 0; /* Переопределяет поведение по умолчанию и позволяет колонкам сжиматься */ } .container--card--margin-top { margin-block-start: calc(var(--section-margin-block) / 2) !important; } @media (width < 500px) { .container--card--margin-top { margin-block-start: calc(var(--section-margin-block)) !important; } } .card-item { position: relative; cursor: pointer; transition: all .2s ease-in-out; } .no__hover { cursor: default; } .card-item-bg { --space-over: var(--gap-40); position: absolute; top: 0; left: 0; width: calc(100% + var(--space-over)); height: calc(100% + var(--space-over)); background: var(--color-sandy); z-index: -1; margin-left: calc(-1 * var(--space-over) / 2); margin-top: calc(-1 * var(--space-over) / 2); transition: all .1s ease-in-out; /*clip-path: inset(0 0 100% 0);*/ transform: scale(0.75); opacity: 0; } .has-hover .card-item:hover .card-item-bg { transition: all .22s ease-in-out; transform: scale(1); opacity: 1; } .has-hover .card-item.no__hover:hover .card-item-bg { background: none; transition: none; transform:none; opacity: 0; } .has-hover .container--permanent-card:hover .card-item-bg { transition: all .22s ease-in-out; transform: scale(1); opacity: 1; } .card-item-content { display: grid; grid-template-rows: max-content 1fr; height: 100%; max-width: inherit; } .card-item.horizontal .card-item-content { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: revert; height: 100%; max-width: inherit; } @media (width < 500px) { .card-item.horizontal .card-item-content { grid-template-columns: 1fr; } } .card-item-img { position: relative; overflow: hidden; } .card-item-img img { transition: all .15s ease-in-out; } .card-item.horizontal .card-item-img img { height: 100%; width: 100%; object-fit: cover; transition: all .15s ease-in-out; } .has-hover .card-item:hover .card-item-img img { transform: scale(1.065); transition: all .3s ease-in-out; } /* когда отключен hover классом no__hover */ .has-hover .card-item.no__hover:hover .card-item-img img { transform: none; transition: none; } .has-hover .container--permanent-card:hover .card-item-img img { transform: scale(1.035); transition: all .25s ease-in-out; } .card-item-title :is(h6, h5, h4, h3, h2, h1) { font-family: var(--subtititle-text-font), sans-serif; font-weight: 400; /*padding-top: .5em;*/ } .card-item-title :is(.small) { font-family: var(--subtititle-text-font), sans-serif; font-weight: 400; padding-top: .5em; } .card-item-info { padding: 1.25rem; padding-bottom: 1.5rem; position: relative; display: grid; /*height: 100%;*/ grid-template-rows: 1fr max-content; /* max-content 1fr */ gap: var(--gap-20); background: #e8e8e8; /* #DDD9D4; #F2EDD6; #E6DFC6; #DDD9D4; #d9e4ec; */ z-index: 1; transition: all .25s ease; } .card-item-simple .card-item-info { grid-template-rows: revert; } .card-item-info.visit{ grid-template-rows: max-content max-content max-content; } .card-item-info.white { background-color: white; } .card-item.no__hover .card-item-info { padding: 1.25rem 0; } .card-item.type--online .card-item-info { grid-template-rows: 1fr; } .card-item-service-wrapper { display: grid; grid-template-columns: 1fr max-content; gap: var(--gap-20); } .card-item-service .scheduler-wrapper { margin-bottom: var(--gap-10); } .card-item-date { } .card-ticket { place-content: flex-end center; } .has-hover .card-item:hover .card-item-info { background: var(--color-sandy); transition: all .25s ease; } .has-hover .card-item.no__hover:hover .card-item-info { background: none; transition: none; } .has-hover .container--permanent-card:hover { background: var(--color-sandy); transition: all .25s ease; } .card-item-not-active { filter: grayscale(.85) blur(1px); opacity: .5; } .card-item.link--disabled { filter: grayscale(1); } :root, :root.light-theme { /* dynamically change by script in app.js */ --scrollbar-width: 0px; /* FONTS */ /* font-size: calc(12px + (24 - 12) * ((100vw - 400px) / (800 - 400)));*/ /* https://utopia.fyi/type/calculator/?c=320,16,1.25,1600,18,1.333,5,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ /* https://clamp.font-size.app/ */ /* https://min-max-calculator.9elements.com/ */ /* https://fluidtypography.com/#app-get-started */ --font-size-step-6: clamp(2.0273rem, 1.7754rem + 1.1852vi, 2.9606rem); /* 32px - 47px */ --font-size-step-5: clamp(1.802rem, 1.6084rem + 0.9113vi, 2.5197rem); /* 29px - 40px */ --font-size-step-4: clamp(1.6018rem, 1.4554rem + 0.689vi, 2.1444rem); /* 26px - 34px */ --font-size-step-3: clamp(1.4238rem, 1.3156rem + 0.5094vi, 1.825rem); /* 23px - 29px */ --font-size-step-2: clamp(1.2656rem, 1.188rem + 0.3652vi, 1.5532rem); /* 20px - 25px */ --font-size-step-1: clamp(1.125rem, 1.0719rem + 0.25vi, 1.3219rem); /* 18px - 21px */ --font-size-step-0: clamp(1rem, 0.9663rem + 0.1587vi, 1.125rem); /* 16px - 18px */ --font-size-small: .875rem; /* 14px */ --font-size-smallest: .75rem; /* 12px */ /* LAYOUT MARGINS AND PADDING */ --section-margin-block: 8svi; /* Эта единица основана на меньшем измерении ШИРИНЫ вьюпорта, */ /*--section-margin-block: 10svb;*/ /* Эта единица основана на меньшем измерении ВЫСОТЫ вьюпорта, */ /* FONTS */ --title-text-font: 'Atyp Display'; /* font-weight: 300, 400, 500, 600 */ --subtititle-text-font: 'eUkraine'; /* font-weight: 200, 300, 400, 600, 700 */ /*--primary-text-font: 'Noto Sans';*/ --font-notosans: 'Noto Sans', sans-serif; /* font-weight: 300, 400, 500, 600 */ --font-atyp-display: 'Atyp Display', sans-serif; /* font-weight: 300, 400, 500, 600 */ --font-eukraine: 'eUkraine', sans-serif; /* font-weight: 200, 300, 400, 600, 700 */ --primary-text-font: var(--font-notosans); --primary-title-font: var(--font-eukraine); --primary-category-font: var(--font-atyp-display); /* COLORS */ --body-background-color: #fff; --color-light-beige: #DDD9D4; /* collection preloader */ --color-lighter-beige: #f1ede8; /* collection preloader */ --color-charcoal-gray: #353A46; --color-cadet-blue: #536872; --color-sandy: #e7b655; --color-green: #9EB54B; --color-black: #000000; --color-white: #fff; --color-lime: #E4E790; --color-neon-green: #C3CF2E; --color-brown-light: #A58F7B; --color-brown-dark: #584432; /* #5C4836; #57391E; */ --color-ivory-white: #F5F5EB; --color-slate-blue: #6876A6; --color-grey: #7e7e7e; /* HEADER */ --header-height: 150px; --header-background-color: rgb(255, 255, 255); /* FOOTER */ /*--footer-background-color: #536872; !* #4B3842; #5A4452; #6876A6; *! --background-color-footer: #536872; !* #4B3842; #5A4452; #6876A6; *!*/ /* LOGO */ --header-logo-fill-color: #000000; /* MENU */ --menu-primary-link-color: #000000; --menu-primary-link-color-hover: var(--color-green); /* #9EB54B; #E8B74B; #8F9501; #B53F4A; */ /* --menu-primary-link-animation-time-hover: .25s ease-out; */ --menu-primary-link-animation-time-hover: .5s cubic-bezier(.87, 0, .13, 1); --menu-secondary-link-animation-time-hover: .25s ease-out; --menu-mobile-background: #595565; /* #4F5D6A; #1E2D3B;*/ --menu-mobile-open-logo-color: #C8CABF; /* #96A5B1; */ --menu-mobile-logo-color: #000; --menu-mobile-links-color: #fff; --mobile-menu-breackpoint: 1024px; /* ICONS */ --icon-stroke-color: #000; --icon-stroke-color-hover: var(--menu-primary-link-color-hover); --menu-mobile-open-icon-stroke-color: #fff; /* SCHEDULER */ --icon-scheduler-on: #126B20; /* #74CC82 #126B20 */ --icon-scheduler-off: #B80808; --icon-scheduler-light-on: #74CC82; --icon-scheduler-light-off: #DF6060; --icon-scheduler-monochrome: var(--menu-mobile-open-logo-color); /* SCROLL-UP */ --icon-scroll-up-color: #E4E790; /* SOCIALS */ --icon-social-color: #ffffff; /* TEXT */ --text-main-color: #000; --text-main-color-inverse: #fff; --text-color-lime: #E4E790; /* HERO GRID */ --pixel-grid-row-height: default; /* определяется через JS */ } :root.dark-theme { /* BODY */ --body-background-color: #000000; /* HEADER */ --header-background-color: rgb(0, 0, 0); /* FOOTER */ --footer-background-color: #4F5D6A; /* LOGO */ --header-logo-fill-color: #ffffff; /* MENU */ --menu-primary-link-color: #ffffff; --menu-primary-link-color-hover: #9EB54B; /* #9EB54B; #E8B74B; #8F9501; #B53F4A; */ --menu-mobile-background: #4F5D6A; /* #4F5D6A; #1E2D3B;*/ --menu-mobile-open-logo-color: #96A5B1; --menu-mobile-logo-color: #ffffff; --menu-mobile-links-color: #fff; --mobile-menu-breackpoint: 1024px; /* ICONS */ --icon-stroke-color: #ffffff; --menu-mobile-icon-stroke-color: #000; /* TEXT */ --text-main-color: #fff; --text-main-color-inverse: #000; } @media (width < 1400px) { :root, :root.dark-theme { --header-height: 130px; } } @media (width < 1200px) { :root, :root.dark-theme { --header-height: 110px; } } @media (width < 400px) { :root, :root.dark-theme { --header-height: 100px; } } /*@media (width < 500px) { :root { --section-margin-block: 16svi; } }*/ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Prevent font size inflation */ /*html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scrollbar-width: none; -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; }*/ html, body { height: 100%; overflow: hidden; /* Disable native scroll on BODY */ overscroll-behavior: none; } /* Set core body defaults */ body { font-size: var(--font-size-step-0); line-height: 1.5; font-family: var(--primary-text-font), sans-serif; color: var(--text-main-color); background-color: var(--body-background-color); transition: color, background-color 0.25s ease-in-out; -webkit-font-smoothing: antialiased; } /* CONTAINER for all page content */ #page-wrapper { height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } @supports (-webkit-touch-callout: none) { #page-wrapper { height: -webkit-fill-available; } } /* LENIS for container #page-wrapper not HTML */ #page-wrapper.lenis-smooth { scroll-behavior: auto !important; } #page-wrapper.lenis.lenis-stopped { overflow: clip; } /*html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; }*/ /*#page-wrapper { position: relative; !* display: grid;*! !*height: 100dvh;*! !*grid-template-rows: 1fr max-content;*! overflow: clip; }*/ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-size: revert; font-family: var(--title-text-font), sans-serif; font-weight: 600; text-wrap: balance; line-height: calc(2px + 2ex + 2px); /* https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */ white-space: normal; /* overflow-wrap: break-word;*/ /*white-space: normal;*/ } h1 + p:first-of-type, h2 + p:first-of-type, h3 + p:first-of-type, h4 + p:first-of-type, h5 + p:first-of-type, h6 + p:first-of-type { margin-block-start: .75em; } :is(h1, h2, h3, h4, h5, h6) + * { margin-block-start: .75em; } h1, .h1 { font-size: var(--font-size-step-6); } h2, .h2 { font-size: var(--font-size-step-5); } h3, .h3 { font-size: var(--font-size-step-4); } h4, .h4 { font-size: var(--font-size-step-3); } h5, .h5 { font-size: var(--font-size-step-2); } h6, .h6 { font-size: var(--font-size-step-1); } .small { font-size: var(--font-size-step-0); } p { margin-block-end: .75em; } blockquote { padding-inline-start: 1em; border-inline-start: 0.3em solid; font-style: italic; } /* применяется к дочерним элементам, который следует за другим элементом (то есть является вторым или последующим элементом) внутри .article. */ /*.article > * + * { margin-block-start: var(--flow-space, 1em); } :is(h1, h2, h3, h4, h5, h6, blockquote) { --flow-space: 1.5em; } :is(h1, h2, h3, h4, h5, h6) + * { --flow-space: 0.5em; }*/ /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul:not(.primary, .secondary) { margin-block-end: .75em; } ul[role='list'], ol[role='list'] { list-style: none; padding-inline-start: 1em; } ul { /*list-style-type: disc;*/ /*padding-left: 20px;*/ } ul.with--disk { list-style-type: disc; padding-left: 1.5rem; /*text-wrap: balance;*/ } /* A elements that don't have a class get default styles */ a:not([class]) { /*color: currentColor;*/ } a:not(.link--not-active, .link--disabled, .menu li a, .lang-switcher a, .category-link) { /*color: currentColor; text-decoration-skip-ink: auto; text-decoration-color: var(--text-main-color); text-decoration-thickness: 0.2ex; text-underline-offset: 0.6ex; text-decoration: underline;*/ } /* Первый абзац контента новостей, выставок и тд */ strong { display: inline-block; font-weight: bold; /*margin-block-end: 2rem;*/ } /* LINKS STYLES */ .link--underlined { color: currentColor; text-decoration-skip-ink: auto; text-decoration: underline; text-decoration-thickness: 0.2ex; text-underline-offset: 0.5ex; } .link--underlined.thin { text-decoration-thickness: 0.1ex; } /* Make images easier to work with */ img, picture, video, canvas, svg { display: block; max-width: 100%; user-select: none; border-style: none; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font-family: inherit; font-size: inherit; } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } /*button { all: unset; display: inline-flex; align-items: center; justify-content: center; outline: none; border: none; padding: 0; margin: 0; white-space: normal; word-break: break-word; box-shadow: none; background-color: transparent; cursor: pointer; }*/ button:active, button:focus { outline: none; border: none; } [role=button] { cursor: pointer; } span { display: inline-block; } header * { user-select: none; } section { z-index: 1; position: relative; background: white; } /* у всех секций с классом .content отступ сверху */ section.content .container, section.content .container-grid { margin-block-start: var(--section-margin-block); /* Используем значение наибольшего измерения viewport */ } /* у секции с классом .content идущей сразу после секции с классом .hero убираем отступ сверху */ section.hero + section.content .container:first-of-type { margin-block-start: calc(var(--section-margin-block) / 3); } /* если у следующей от текущей секции есть background, то текущей секций также делаем отступ снизу */ section.content:has(+ .has--background) .container, section.content:has(+ .has--background) .container-grid { margin-block-end: var(--section-margin-block); } /* у секции есть background, то также делаем отступ снизу */ section.has--background .container, section.has--background .container-grid { margin-block-end: var(--section-margin-block); } /* у самой последней секции страницы также делаем отступ снизу */ section.content:last-of-type .container, section.content:last-of-type .container-grid { margin-block-end: var(--section-margin-block); } /* Применяет центрирование текста и динамический нижний отступ к первому дочернему заголовку (h1-h6) в трех типах контейнеров внутри секции .content. Отступ рассчитывается как сумма 0.5rem и 1% от ширины вьюпорта */ section.content .container > :is(h1,h2,h3,h4,h5,h6):first-child, section.content .container .grid-column > :is(h1,h2,h3,h4,h5,h6):first-child, section.content .container-grid > :is(h1,h2,h3,h4,h5,h6):first-child { text-align: center; padding-block-end: calc(.5rem + 1dvw); } @media (width < 768px) { section.hero + section.content { /*margin-block-start: calc(var(--header-height));*/ margin-block-start: 0; } section.content .container, section.content .container-grid { margin-block-start: calc(var(--section-margin-block) * 2); } section.content:has(+ .has--background) .container, section.content:has(+ .has--background) .container-grid { margin-block-end: calc(var(--section-margin-block) * 2); } } #preloader-wrapper { position: fixed; background: var(--color-light-beige); z-index: 999999; display: grid; top: 0; left: 0; right: 0; bottom: 0; /*width: 100svw; height: 100svh;*/ grid-template-rows: 1fr min-content; place-items: center; /*clip-path: inset(0 0 0 0);*/ } .preloader_elements svg { width: 150px; } .preloader_elements svg .fire-mask { clip-path: inset(100% 0 0 0); } .preloader_copyrights { margin-block: var(--gap-40); color: var(--color-cadet-blue); font-size: 14px; } @media (width < 768px) { .preloader_copyrights { margin-block: var(--gap-40); /* отступы сверху и снизу */ margin-inline: var(--gap-40); /* отступы слева и справа */ font-size: 12px; text-align: center; } } /* FIXED element hide/show */ #fixed-element-wrapper { position: fixed; right: 0; top: 50%; transform: translate(0, -50%); width: 80px; height: 160px; z-index: 999; transition: all .35s ease-in-out; } @media (width < 769px) { #fixed-element-wrapper { width: 70px; /*60px;*/ height: 140px;/*120px;*/ } } #fixed-element-wrapper.hide { transform: translate(100%, -50%); } .fixed-element img { transition: opacity 0.2s ease-in-out; display: block; } /* Накладываем второе изображение поверх первого */ .fixed-element .img-hover { position: absolute; top: 0; left: 0; opacity: 0; /* Скрыто по умолчанию */ } /* Эффект при наведении */ .has-hover .fixed-element:hover .img-hover { opacity: 1; } /* Опционально: можно чуть приглушить нижнее при ховере, хотя оно и так перекрывается */ /*.has-hover .fixed-element:hover .img-default { opacity: 0; }*/ /*.fixed-element svg { !*max-width: 100%;*! !*width: 80px; height: 160px;*! } .fixed-element svg .background { fill: #fff; transition: fill .25s ease-in-out; } .fixed-element svg .text { fill: #6775a8; transition: fill .25s ease-in-out; } .has-hover #fixed-element-wrapper:hover svg .background { fill: #6775a8; } .has-hover #fixed-element-wrapper:hover svg .text { fill: #fff; }*/ /* HERO */ .hero { padding-block-start: calc(var(--header-height) * 1.25); } .hero--main { padding-block-end: calc(var(--gap-40) * 2); height: 100svh; } @media (width < 768px) { .hero--main { /*display: none;*/ } } @media (width < 500px) { .hero--main { padding-block-end: calc(var(--gap-40)); } } /* CONTAINERS CONTENT STYLES */ .container--with-filters { display: grid; grid-template-columns: .25fr .75fr; gap: var(--gap-40); } .container--without-filters { display: grid; grid-template-columns: 1fr; gap: var(--gap-40); } @media (width < 768px) { .container--with-filters { grid-template-columns: 1fr; gap: var(--gap-20); } } .filtered-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-40); } .container--without-filters .filtered-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-40); } @media (width < 1280px) { .container--without-filters .filtered-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-30); } } @media (width < 768px) { .filtered-content { display: grid; grid-template-columns: 1fr; gap: var(--gap-30); } .container--without-filters .filtered-content { display: grid; grid-template-columns: 1fr; gap: var(--gap-30); } } .container--content-endpoint { display: grid; width: 100%; grid-template-columns: 1.25fr .75fr; gap: var(--gap-60); } @media (width < 500px) { .container--content-endpoint { grid-template-columns: 100%; gap: var(--gap-20); } } .container--exhibition { display: grid; grid-template-columns: repeat(4, 1fr); /*grid-auto-rows: max-content;*/ gap: var(--gap-40); row-gap: var(--gap-40); align-content: center; } /* CONTAINERS CONTENT HEADING */ .container-header { /*grid-row: 2/3; grid-column: 1/-1;*/ grid-column: 1/-1; display: flex; justify-content: space-between; /*align-items: baseline;*/ } .container-header.text--white, .container-header.text--white path { color: white; fill: white; } /* EXHIBITION SECTION */ .exhibition--container { display: grid; /*grid-template-columns: repeat(4, 1fr);*/ grid-auto-rows: max-content; gap: var(--gap-40); row-gap: var(--gap-40); align-content: center; } @media (width <= 1366px) { /*.exhibition--container { grid-template-columns: repeat(3, 1fr); }*/ } @media (width <= 768px) { /*.exhibition--container { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-20); }*/ } @media (width <= 500px) { } /* CONTENT PAGES */ .content-lead { margin-block-end: calc(var(--section-margin-block) /3); /*padding-left: var(--gap-30);*/ font-weight: bold; font-size: 20px; position: relative; } .content-sidebar.sticky { position: sticky; top: var(--header-height); } @media (width <= 500px) { .content-sidebar.sticky { position: revert; top: 0; } } .content-images-carousel { margin-block-start: var(--gap-40); } .comments { } ul.filter-types-vertical { display: grid; grid-auto-flow: row; row-gap: 4px; height: min-content; } .has-hover .filter-types-vertical li a:hover { color: var(--menu-primary-link-color-hover); } ul.filter-types-horizontal { display: grid; grid-template-columns: repeat(auto-fill, max-content); grid-auto-flow: column; gap: var(--gap-40); justify-content: flex-start; } .has-hover .filter-types-horizontal li a:hover { color: var(--menu-primary-link-color-hover); } .active-link { color: var(--color-green); font-weight: bold; pointer-events: none; } .active-link { color: var(--color-green); font-weight: bold; pointer-events: none; } .inactive-link { color: var(--color-green); font-weight: bold; pointer-events: none; } .filter-types-horizontal .inactive-link { position: relative; } .filter-types-horizontal .inactive-link:before { content: ''; position: absolute; bottom: -11px; width: 100%; height: 6px; background: var(--color-green); } .news-block { display: grid; grid-template-columns: 50% 50%; grid-auto-rows: 1fr; /*gap: var(--gap-margin);*/ } .wrapper-upcoming, .wrapper-news { display: grid; grid-template-rows: min-content 1fr; /*display: grid; grid-template-rows: max-content 1fr; row-gap: var(--gap-margin);*/ } .wrapper-header { display: grid; /*grid-template-columns: repeat(auto-fit, minmax(0, 1fr));*/ grid-template-columns: max-content repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; /*text-transform: uppercase;*/ font-size: 14px !important; white-space: nowrap; } .content-news-wrapper { display: grid; grid-template-columns: 25% 75%; gap: var(--gap-margin); border: 1px solid red; } .content { width: 100%; } /* CURSOR */ .cursor { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .cursor.visible { opacity: 1; visibility: visible; } .cursor__inner { display: flex; justify-content: center; align-items: center; transform: translate(-50%, -80%) scale(0.7); width: 80px; height: 80px; color: #000000; background: #ffffff; border-radius: 50%; font-size: 12px; font-weight: bold; transition: transform 0.2s; } .visible .cursor__inner { transform: translate(-50%, -50%) scale(1); } .cursor.draggable .cursor__inner { transform: translate(-50%, -50%) scale(1.2); } /* TODO для NEWS */ #swiper_feedback .swiper-slide { align-self: center; text-align: center; height: max-content; /*transition: transform 0.35s;*/ } .swiper.dragged .swiper-slide { /*transform: scale(0.95);*/ } /* SWIPER */ /* https://github.com/nolimits4web/swiper/issues/2914 */ .swiper-grid { display: grid; /* height: 100%;*/ /*height: 600px;*/ /*aspect-ratio: 1.5/1;*/ /*height: 100%;*/ /*height: max-content;*/ grid-template-columns: max-content 1fr max-content; /*minmax(0, 1fr)*/ /*grid-template-rows: 1fr 40px;*/ grid-auto-flow: row; gap: var(--gap-20); } .swiper-grid-none { grid-template-columns: 1fr; /*minmax(0, 1fr)*/ grid-template-rows: unset; gap: unset; } .swiper-grid.grid-off { grid-template-columns: 1fr; grid-template-rows: unset; gap: unset; position: relative; } @media screen and (width < 768px) { .swiper-grid { grid-template-columns: 1fr; column-gap: 0; } } .swiper { overflow: hidden; width: 100%; } .swiper-slide { display: grid; /*place-items: center;*/ overflow: hidden; } .swiper-slide img { display: block; max-width: 100%; /*height: auto;*/ /* height: 230px; width: auto;*/ object-fit: cover; } .swiper-slide.vertical_slide_img { display: grid; justify-content: center; } .swiper-wrapper { display: grid; grid-auto-flow: column; } .swiper-button-custom-prev, .swiper-button-custom-next { position: relative; top: unset; bottom: unset; left: unset; right: unset; margin-top: unset; align-items: unset; display: grid; } .swiper-button-custom-prev.inside, .swiper-button-custom-next.inside { position: absolute; top: 50%; bottom: unset; left: unset; right: unset; margin-top: unset; align-items: unset; display: block; z-index: 2; transform: translateY(-50%); } .swiper-button-custom-prev.inside { left: 1.5rem; } .swiper-button-custom-next.inside { right: 1.5rem; } @media screen and (width < 500px) { .swiper-button-custom-prev.inside { left: .5rem; } .swiper-button-custom-next.inside { right: .5rem; } } .swiper-button-custom-prev svg, .swiper-button-custom-next svg { width: 60px; } @media screen and (width <= 1024px) { .swiper-button-custom-prev svg, .swiper-button-custom-next svg { width: 50px; } } @media screen and (width < 768px) { .swiper-button-custom-prev, .swiper-button-custom-next { display: none; } } .swiper-button-custom-prev svg rect, .swiper-button-custom-next svg rect, .swiper-button-custom-prev svg path, .swiper-button-custom-next svg path { transition: all .25s ease-in-out; } .swiper-button-custom-prev svg rect, .swiper-button-custom-next svg rect { opacity: 0; } .has-hover .swiper-grid:hover .swiper-button-custom-prev svg path, .has-hover .swiper-grid:hover .swiper-button-custom-next svg path { /*fill: var(--menu-primary-link-color-hover);*/ stroke: var(--menu-primary-link-color-hover); } .has-hover .swiper-grid:hover .swiper-button-custom-prev svg rect, .has-hover .swiper-grid:hover .swiper-button-custom-next svg rect { fill: #eaeaea; opacity: 1; } /*.has-hover .swiper-grid.swiper-button-custom-prev:hover svg path, .has-hover .swiper-button-custom-next:hover svg path { !*fill: var(--menu-primary-link-color-hover);*! stroke: var(--menu-primary-link-color-hover); } .has-hover .swiper-button-custom-prev:hover svg rect, .has-hover .swiper-button-custom-next:hover svg rect { fill: #eaeaea; opacity: 1; }*/ .swiper-button-custom-prev { place-self: center left; } .swiper-button-custom-next { place-self: center right; } .swiper-pagination-wrapper { display: grid; place-self: center right; width: auto; margin-block-start: 1.5rem; } .swiper-pagination { /*z-index: 10;*/ position: static; display: grid; grid-template-columns: repeat(auto-fit, 24px); /*place-items: flex-end;*/ /* place-content: center flex-end;*/ /* place-content: center;*/ gap: 8px; height: 100%; padding: 0; margin: 0; } .swiper-pagination.outside { grid-template-columns: repeat(auto-fit, 24px); place-content: center; } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: unset; top: unset; left: unset; } .swiper-pagination-bullet { background: var(--menu-primary-link-color-hover); /*background: var(--color-sandy);*/ width: 12px; height: 12px; } .swiper-pagination.swiper-pagination-feedback { display: block; position: relative; grid-column: 1/-1; align-self: center; z-index: unset; } .swiper-pagination.swiper-pagination-news { display: grid; bottom: var(--gap-30); right: var(--gap-30); position: absolute; width: 50%; height: min-content; grid-template-columns: repeat(auto-fit, 24px); justify-content: flex-end; /* place-items: flex-end; justify-content: flex-end;*/ gap: var(--gap-10); margin: 0; padding: 6px; /*z-index: unset;*/ } .news-pagination-bullets { display: block; width: 24px; height: 4px; background-color: var(--color-ivory-white); cursor: pointer; /*margin-right: 8px;*/ } .news-pagination-bullets-active { background-color: var(--color-brown-dark); } /* LEAFLET */ .leaflet-popup-pane { /*z-index: 10000 !important;*/ } /* css to customize Leaflet default styles */ .custom.leaflet-popup { bottom: 10px !important; } .custom .leaflet-popup-content-wrapper { border-radius: 0; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.6); background: #ffffff; } .custom .leaflet-popup-tip { } .custom .leaflet-popup-content { display: grid; grid-template-columns: 350px; grid-auto-flow: row; column-gap: 20px; width: auto !important; margin: 18px 20px 18px 20px; } @media (width < 450px) { .custom .leaflet-popup-content { grid-template-columns: 220px; } } @media (width < 360px) { .custom .leaflet-popup-content { grid-template-columns: 150px; } } .custom .leaflet-popup-content img { display: block; margin: 0 !important; padding: 0 !important; } .custom .leaflet-popup-content > div { /*flex: 1;*/ } /* close button */ .leaflet-popup.custom .leaflet-popup-close-button { top: unset !important; bottom: 100% !important; left: 100% !important; width: 28px !important; height: 28px !important; font-size: 24px !important; line-height: normal !important; display: grid; color: #c81b2c; background: white; border-radius: 999px; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.9); } .leaflet-popup.custom .leaflet-popup-close-button:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 14px; height: 2px; background: black; z-index: 1; } .leaflet-popup.custom .leaflet-popup-close-button:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 14px; height: 2px; background: black; z-index: 1; } .leaflet-popup.custom .leaflet-popup-close-button span { display: none; } .custom .leaflet-mobile-route { margin-top: 10px; } /* close button for modal window */ .f-button.is-close-btn { justify-content: flex-end; } .icon:not(.icon--scheduler, .icon--social, .icon--arrow-link, .icon--location, .icon--time, .icon--ticket-circle, .icon--tour3d) path { fill: none !important; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; } /* ICON SEARCH */ .icon--search.disabled { pointer-events: none; opacity: 0.15; } .icon--search path { stroke: var(--icon-stroke-color); /*transition: stroke var(--menu-primary-link-animation-time-hover);*/ } .has-hover .icon--search:hover path { /*transition: stroke var(--menu-primary-link-animation-time-hover);*/ } /* ICON SCHEDULER */ .icon--scheduler path { stroke: none; transition: fill var(--menu-primary-link-animation-time-hover); } .footer--wrapper .icon--scheduler path { fill: #74CC82; } .footer--wrapper .icon--scheduler.closed path { fill: #EB6D6D; } .card-item--exhibition .icon--scheduler path { fill: #126B20; } .card-item--exhibition .icon--scheduler.closed path { fill: #B80808; } .card-item-service-wrapper .icon--scheduler path { fill: #126B20; } .card-item-service-wrapper .icon--scheduler.closed path { fill: #B80808; } .card-item-service-wrapper .icon--scheduler.simple path { fill: #000000; } .content-sidebar .icon--scheduler path { fill: #126B20; } .content-sidebar .icon--scheduler.closed path { fill: #B80808; } .content-sidebar .icon--scheduler.simple path { fill: #000000; } /* ICON LOCATION */ .icon--location path { stroke: none; transition: fill var(--menu-primary-link-animation-time-hover); } .card-item--exhibition .icon--location path { fill: black; } /* ICON TICKET IN CIRCLE */ .icon--ticket-circle path { transition: fill var(--menu-primary-link-animation-time-hover); } .icon--ticket-circle path { fill: var(--color-white) !important; /*transition: all .3s;*/ } .icon--ticket-circle .line { stroke: black; } /* ICON SOCIAL */ .footer--wrapper .icon--social { stroke: none; fill: var(--icon-social-color); } .has-hover .footer--wrapper a.icon--social:hover, .has-hover .footer--wrapper a.icon--social:hover path { fill: var(--menu-primary-link-color-hover); } /* ICON CONTACTS */ .icon--contacts { fill: none; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; stroke: var(--text-main-color-inverse); } .icon--tour3d { fill: black !important; fill-rule: evenodd; stroke: none !important; /* Отключает stroke */ stroke-width: 0; /* Дополнительно сбрасывает ширину */ stroke-linecap: initial; /* Сбрасывает cap */ stroke-linejoin: initial; /* Сбрасывает join */ } .icon--alarm path:first-child { fill: none; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; stroke: var(--text-main-color-inverse); } .icon--alarm path:last-child { fill: white !important; } .content-sidebar .icon--contacts { stroke: var(--color-black); } /* ICON LINK ARROW */ .icon--arrow-link path { /*fill: red;*/ stroke: none !important; } .icon.active path { stroke: var(--menu-primary-link-color-hover) !important; } /* ICON SIZE */ .icon--48 { height: 48px; width: 48px; } .icon--48 svg { height: inherit; width: inherit; } .icon--40 { height: 40px; width: 40px; } .icon--40 svg { height: inherit; width: inherit; } .icon--38 { height: 38px; width: 38px; } .icon--38 svg { height: inherit; width: inherit; } .icon--36 { height: 36px; width: 36px; } .icon--36 svg { height: inherit; width: inherit; } .icon--32 { height: 32px; width: 32px; } .icon--32 svg { height: inherit; width: inherit; } .icon--30 { height: 30px; width: 30px; } .icon--30 svg { height: inherit; width: inherit; } .icon--28 { height: 28px; width: 28px; } .icon--28 svg { height: inherit; width: inherit; } .icon--26 { height: 26px; width: 26px; } .icon--26 svg { height: inherit; width: inherit; } .icon--24 { height: 24px; width: 24px; } .icon--24 svg { height: inherit; width: inherit; } .icon--22 { height: 22px; width: 22px; } .icon--22 svg { height: inherit; width: inherit; } .icon--20 { height: 20px; width: 20px; } .icon--20 svg { height: inherit; width: inherit; } .icon--18 { height: 18px; /*width: 18px;*/ } .icon--18 svg { height: inherit; width: inherit; } .icon--16 { height: 16px; /*width: 16px;*/ } .icon--16 svg { height: inherit; width: inherit; } /* HELPERS */ .link--disabled { pointer-events: none; opacity: .75; } .link--not-active { pointer-events: none; } .border-bottom-2px { padding-bottom: 4px; border-bottom: 1px solid #000000; } /* BUTTONS */ .button { cursor: pointer; white-space: nowrap; position: relative; font-family: var(--font-eukraine), sans-serif; font-size: 16px; font-weight: 600; border-radius: 1000px; min-width: 64px; border: none; outline: none; height: 46px; padding: 0 24px; /* 16px */ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1; transition: all .35s cubic-bezier(.4, 0, .2, 1), color .35s cubic-bezier(.4, 0, .2, 1); -webkit-tap-highlight-color: transparent; margin-block-start: 0 !important; } button.button--small { font-size: 16px; height: 42px; } button.button--squared { border-radius: 0; } @media (width < 768px) { .button { font-size: 14px; } } .button.bordered--black { background: none; outline: 2px solid black; } .button.bordered--white { background: none; outline: 2px solid white; } .button.bg--white { background: white; } .button.bg--black { background: black; } .button.text--black { color: #000; } .button.text--white { color: #ffffff; } .has-hover .button:hover { background: var(--menu-primary-link-color-hover); } .has-hover .button.bw--inverse:hover { background: white; color: black; } .has-hover .button.bordered--black:hover { background: black; color: white; } .has-hover .button.bordered--white:hover { background: white; color: black; } .label { display: inline-block; border-radius: 999px; background: #777777; color: white; font-size: 12px; padding: 4px 12px; } /* SEARCH */ #modal-search { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #a591bb; z-index: 999999; display: none; } /* PAGINATION */ .pagination-wrapper { margin-block-start: var(--section-margin-block); } .pagination-content { display: grid; place-content: center; gap: var(--gap-20); } .pagination-info { } .pagination-control { display: grid; place-items: center; grid-auto-flow: column; gap: var(--gap-10); } .page-link { aspect-ratio: 1/1; display: grid; align-content: center; justify-content: center; border-radius: 999px; width: 36px; height: 36px; } .page-item.disabled .pagination-previous-arrow, .page-item.disabled .pagination-next-arrow { opacity: .2; } .page-link.active { background: var(--color-sandy); font-weight: bold; } .pagination-previous-arrow { margin-right: var(--gap-20); } .pagination-previous-arrow svg { width: inherit; height: inherit; } .pagination-next-arrow { margin-left: var(--gap-20); } .pagination-next-arrow svg { width: inherit; height: inherit; } .page-item.disabled { } /* MAP OPEN STREET MAP*/ #map-wrapper { width: 90%; height: 90%; padding: 0 !important; display: none; } #map { position: relative; width: 100%; height: 100% } /* ACCORDION */ .accordion-container { } .ac { /*border-top: 1px solid Black; border-bottom: 1px solid Black;*/ margin: 0; padding: 0; /*margin-top: 8px; border: 1px solid #eee; background-color: #fff; box-sizing: border-box;*/ } .ac .ac-header { margin: 0; padding: 0; } .ac .ac-trigger { /*font: bold 16px "Arial", sans-serif;*/ /* color: #111;*/ text-align: left; width: 100%; /* padding: 8px 32px 8px 8px;*/ cursor: pointer; background-color: transparent; /* transition: color 0.25s ease;*/ position: relative; text-decoration: none; /* margin: .375rem 0;*/ border: 0; outline: none; /*padding: 1rem 0;*/ display: grid; grid-template-columns: 1fr 40px; } .ac .ac-trigger::after { content: "+"; font-size: 24px; text-align: center; width: 15px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); position: absolute; right: 0; top: 50%; } /*.ac .ac-trigger:focus { color: #8a8a8a; }*/ .ac .ac-panel { margin: 0 !important; overflow: hidden; transition-property: height, visibility; transition-timing-function: ease; } .ac .ac-panel p:first-child { padding-top: .375rem; } .ac .ac-panel p:last-child { /* .ac-text */ /* font: 15px/24px "Arial", sans-serif; color: #111;*/ /*padding: 8px; margin: 0;*/ padding-bottom: .75rem; } .ac.js-enabled .ac-panel { visibility: hidden; } .ac.is-active .ac-panel { visibility: visible; } .ac.is-active > .ac-header .ac-trigger::after { content: "–"; } /* ACCORDION with button READ MORE*/ .accordionContent p { /*padding: 0 calc(var(--1dvh) * 10);*/ } /* ACCORDION */ .accordionWrapper { display: grid; grid-template-rows: 1fr max-content; } .accordion { /* height set in JS with gsap.set() */ /*height: 100px;*/ overflow-y: hidden; cursor: pointer; position: relative; } .accordionMask { position: absolute; bottom: 0; left: 0; height: inherit; width: 100%; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); } .mask__grey_background { background: linear-gradient(0deg, rgb(232, 232, 232) 0%, rgba(239, 239, 239, 0) 100%); } .accordionButtonWrapper { display: grid; place-items: center; cursor: pointer; } .accordionButton { width: 25px; margin: 10px; } .accordionContent p:first-child { text-align: center; } /* ------------------------------------------ NEWS ---------------------------------------- */ @media (width < 576px) { .news-list-image { /*display: none;*/ } .flex-item-25.horizontal { flex: 0 0 45% !important; /* Занимает 25% ширины контейнера, не растягивается и не сжимается */ } } .row--news { height: 100%; grid-template-rows: max-content 1fr; } /* SECTION NEWS */ .news-list-item { display: block; margin: 0; padding: 0; line-height: normal; text-decoration: none; /*transition: all .2s cubic-bezier(.55, .085, .68, .53);*/ transition: all .2s ease-in-out; } .news-list-item.row--margin { margin-bottom: var(--gap-20); } .news-list-image { overflow: clip; } .news-list-image img { display: block; height: 100%; width: 100%; /* aspect-ratio: 1000 / 667;*/ /*1000 / 667;*/ object-fit: cover; /* Изображение заполняет контейнер, сохраняя свои пропорции */ transition: all .2s ease-in-out; } .has-hover .news-list-item:hover .news-list-image img { transform: scale(1.05); /*transform-origin: center center;*/ } .news--wrapper { background-color: var(--color-brown-light); } .slide--news { display: grid; grid-template-rows: max-content 1fr max-content; gap: var(--gap-20); color: var(--color-brown-dark); padding: var(--gap-30); user-select: none; height: 100%; } @media (width < 769px) { .slide--news { gap: var(--gap-40); } } @media (width < 576px) { .slide--news { padding: var(--gap-20); } } .news-meta-type { font-size: 14px; letter-spacing: .015rem; color: var(--color-brown-dark); text-transform: uppercase; font-weight: 600; } .news-meta-marker { width: 10px; height: 10px; background: var(--color-brown-dark); margin-right: 4px; } .news-meta-date { font-size: 14px; font-weight: 600; color: var(--color-brown-dark); margin-bottom: 0; } .news-title { font-family: var(--font-eukraine); color: var(--color-ivory-white); } .has-hover .news-title a.link--underlined { transition: all .25s !important; } .has-hover .news-title a.link--underlined:hover { color: var(--color-brown-dark) !important; transition: all .25s !important; } .has-hover .news-as-first-link .news-title.link--underlined { transition: all .25s !important; } .has-hover .news-as-first-link:hover .news-title.link--underlined { color: var(--color-brown-dark) !important; transition: all .25s !important; } .news-description { margin-block-start: 2rem; color: var(--color-ivory-white); } .news-service-wrapper { margin: 0; display: grid; gap: var(--gap-6); } /* SECTION NEWS */ .news--container { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: max-content; gap: var(--gap-30); } @media (width <= 768px) { .news--container { grid-template-columns: repeat(1, 1fr); } } .col--news { display: grid; grid-template-rows: max-content 1fr; gap: var(--gap-40); } @media (width <= 768px) { .col--news { gap: var(--gap-20); } } .news-list-wrapper { display: grid; grid-template-rows: repeat(auto-fit, max-content); row-gap: var(--gap-20); align-content: space-between; background: #faf7f2; } .news-item-not-active { filter: grayscale(.85) blur(1px); opacity: .5; } .link--withIcon { display: inline-grid; grid-template-columns: 30px 1fr; column-gap: 8px; place-items: center; align-items: center; } .link--withIcon span { text-wrap: balance; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } .link--underLine { background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 100% 2px; /*text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;*/ } .link--underLine:hover { /*background-image: linear-gradient(var(--menu-primary-link-color-hover), var(--menu-primary-link-color-hover));*/ /*background-size: 100% 2px;*/ }