.anm-slider { --anm-font-family: inherit; --anm-heading-color: #fff; --anm-text-color: #fff; --anm-button-bg: #fff; --anm-button-text: #111; --anm-button-border-color: #fff; --anm-button-border-style: solid; --anm-button-border-width: 1px; --anm-button-radius: 6px; --anm-button-font-size: 16px; --anm-control-bg: rgba(255, 255, 255, 0.8); --anm-control-color: #111; --anm-control-border: 1px solid rgba(255, 255, 255, 0.62); --anm-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); --anm-dot-size: 10px; --anm-dot-radius: 999px; --anm-dot-gap: 8px; --anm-dot-bg: rgba(255, 255, 255, 0.5); --anm-dot-active-bg: #ffffff; --anm-dot-active-glow: 8px; --anm-dot-opacity: 0.45; --anm-arrow-bg: var(--anm-control-bg); --anm-arrow-bg-size: 40px; --anm-arrow-bg-radius: var(--anm-nav-radius); --anm-arrow-border: var(--anm-control-border); --anm-arrow-shadow: var(--anm-control-shadow); --anm-nav-radius: 50%; --anm-overlay-color: #000; --anm-slider-max-width: 100%; --anm-slide-height: clamp(360px, 72vh, 920px); --anm-slide-height-tablet: clamp(320px, 62vh, 760px); --anm-slide-height-mobile: clamp(260px, 58vh, 560px); --anm-slide-opacity: 1; --anm-control-scale: clamp(0.78, calc(var(--anm-slide-height) / 720px), 1.28); --anm-dots-bottom: 24px; --anm-scroll-arrow-bottom: 56px; --anm-border-radius-top: 0px; --anm-border-radius-bottom: 0px; --anm-image-fit: cover; --anm-content-padding: 12px; --anm-content-padding-mobile: 10px; --anm-text-box-width: 92%; --anm-text-box-height: calc(var(--anm-slide-height) - 32px); --anm-text-box-width-mobile: 100%; --anm-text-box-height-mobile: calc(var(--anm-slide-height-mobile) - 24px); position: relative; width: 100%; max-width: var(--anm-slider-max-width); margin-left: auto; margin-right: auto; overflow: hidden; border-radius: var(--anm-border-radius-top) var(--anm-border-radius-top) var(--anm-border-radius-bottom) var(--anm-border-radius-bottom); } .anm-slider.anm-theme-adapt { --anm-font-family: inherit; --anm-heading-color: var(--wp--preset--color--light, #fff); --anm-text-color: var(--wp--preset--color--light, #fff); --anm-button-bg: var(--wp--preset--color--primary, #fff); --anm-button-text: var(--wp--preset--color--light, #111); --anm-button-border-color: var(--wp--preset--color--primary, #fff); --anm-overlay-color: #000; } @media (max-width: 1024px) { .anm-slider .anm-slide.anm-slide-desktop-only { display: none !important; } } @media (min-width: 1025px) { .anm-slider .anm-slide.anm-slide-mobile-only { display: none !important; } } .anm-slider, .anm-slider * { box-sizing: border-box; } @media (hover: hover) and (pointer: fine) { .anm-slider { cursor: grab; } } .anm-slider .anm-slide-content, .anm-slider .anm-slide-content p:not([style*="color"]), .anm-slider .anm-slide-content li:not([style*="color"]), .anm-slider .anm-slide-content span:not([style*="color"]), .anm-slider .anm-slide-content strong:not([style*="color"]), .anm-slider .anm-slide-content em:not([style*="color"]) { color: var(--anm-text-color) !important; font-family: var(--anm-font-family) !important; } .anm-slider .anm-slide-content h1:not([style*="color"]), .anm-slider .anm-slide-content h2:not([style*="color"]), .anm-slider .anm-slide-content h3:not([style*="color"]), .anm-slider .anm-slide-content h4:not([style*="color"]), .anm-slider .anm-slide-content h5:not([style*="color"]), .anm-slider .anm-slide-content h6:not([style*="color"]) { color: var(--anm-heading-color) !important; font-family: var(--anm-font-family) !important; } .anm-slider .anm-slide-content h1, .anm-slider .anm-slide-content h2, .anm-slider .anm-slide-content h3, .anm-slider .anm-slide-content h4, .anm-slider .anm-slide-content h5, .anm-slider .anm-slide-content h6 { line-height: 1.1 !important; font-size: 24px !important; margin-top: 0 !important; margin-bottom: 10px !important; } .anm-slider .anm-slide-content h2 { font-size: 22px !important; } .anm-slider .anm-slide-content h3 { font-size: 20px !important; } .anm-slider .anm-slide-content h4 { font-size: 18px !important; } .anm-slider .anm-slide-content h5 { font-size: 16px !important; } .anm-slider .anm-slide-content h6 { font-size: 14px !important; } .anm-slider .anm-slide-content a:not(.anm-slide-button) { color: var(--anm-text-color) !important; } .anm-slider .anm-slide-img { max-width: none !important; border: 0 !important; box-shadow: none !important; } .anm-slider .anm-nav, .anm-slider .anm-scroll-down, .anm-slider .anm-slide-button { font-family: var(--anm-font-family) !important; } .anm-slider button.anm-nav, .anm-slider .anm-nav, .anm-slider .anm-prev, .anm-slider .anm-next { appearance: none !important; -webkit-appearance: none !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)) !important; height: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)) !important; min-width: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)) !important; min-height: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)) !important; max-width: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)) !important; max-height: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)) !important; margin: 0 !important; padding: 0 !important; border: var(--anm-arrow-border) !important; border-radius: var(--anm-arrow-bg-radius) !important; background: var(--anm-arrow-bg) !important; color: var(--anm-control-color) !important; box-shadow: var(--anm-arrow-shadow) !important; text-decoration: none !important; text-transform: none !important; line-height: 1 !important; letter-spacing: normal !important; font-size: calc(22px * var(--anm-control-scale)) !important; font-weight: 400 !important; cursor: pointer !important; } .anm-slider .anm-dots, .anm-slider .anm-dots * { box-sizing: border-box !important; } .anm-slider .anm-dots { position: absolute !important; left: 50% !important; bottom: var(--anm-dots-bottom) !important; transform: translateX(-50%) !important; z-index: 3 !important; display: flex !important; gap: calc(var(--anm-dot-gap) * var(--anm-control-scale)) !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .anm-slider .anm-dot.is-active { background: var(--anm-dot-active-bg) !important; box-shadow: 0 0 calc(var(--anm-dot-active-glow) * var(--anm-control-scale)) rgba(255, 255, 255, 0.55) !important; opacity: 1 !important; } .anm-slider .anm-scroll-down { appearance: none !important; -webkit-appearance: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-decoration: none !important; } .anm-slider .anm-slide-button, .anm-slider .anm-slide-button:link, .anm-slider .anm-slide-button:visited, .anm-slider .anm-slide-button:hover, .anm-slider .anm-slide-button:focus, .anm-slider .anm-slide-button:active { background: var(--anm-button-bg) !important; color: var(--anm-button-text) !important; border-color: var(--anm-button-border-color) !important; border-style: var(--anm-button-border-style) !important; border-width: var(--anm-button-border-width) !important; border-radius: var(--anm-button-radius) !important; font-size: var(--anm-button-font-size) !important; text-decoration: none !important; } .anm-slider-track { display: flex; transition: transform 0.45s ease; will-change: transform; } .anm-slider.anm-transition-fade { height: var(--anm-slide-height); } .anm-slider.anm-transition-fade .anm-slider-track { position: relative; display: block; height: 100%; transform: none !important; } .anm-slider.anm-transition-fade .anm-slide { position: absolute; inset: 0; min-width: 100%; min-height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.55s ease, transform 0.55s ease; } .anm-slider.anm-transition-fade .anm-slide.is-active, .anm-slider.anm-transition-zoom .anm-slide.is-active { opacity: 1; pointer-events: auto; } .anm-slider.anm-transition-zoom .anm-slide.is-active { transform: scale(1); } .anm-slide { position: relative; min-width: 100%; min-height: var(--anm-slide-height); display: flex; align-items: center; justify-content: center; } .anm-slider.anm-size-fullscreen { --anm-slide-height: 100vh; --anm-slide-height-tablet: 90vh; --anm-slide-height-mobile: 85vh; } .anm-slide-image { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .anm-slide-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; max-width: none !important; object-fit: var(--anm-image-fit, cover) !important; object-position: center; display: block; } .anm-slide-overlay { position: absolute; inset: 0; z-index: 1; background-color: var(--anm-overlay-color, #000000); opacity: calc(1 - var(--anm-slide-opacity, 1)); pointer-events: none; } .anm-slide-content { position: relative; z-index: 2; max-width: min(var(--anm-text-box-width, 92%), calc(100% - 24px)); width: min(var(--anm-text-box-width, 92%), calc(100% - 24px)); text-align: center; font-family: var(--anm-font-family); box-sizing: border-box; padding: var(--anm-content-padding, 12px); max-height: var(--anm-text-box-height, calc(var(--anm-slide-height) - 32px)); overflow-y: auto; overflow-wrap: anywhere; word-break: break-word; color: var(--anm-text-color); } .anm-slide-content>*:last-child { margin-bottom: 0; } .anm-slide-content li { margin-bottom: 0.35em; } .anm-slide-content a { color: inherit; } .anm-slider .anm-slide-content .anm-fs-20 { font-size: 20px !important; } .anm-slider .anm-slide-content .anm-fs-24 { font-size: 24px !important; } .anm-slider .anm-slide-content .anm-fs-48 { font-size: 48px !important; } .anm-slider .anm-slide-content .anm-text-shadow-soft { text-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); } .anm-slider .anm-slide-content .anm-text-shadow-strong { text-shadow: 2px 3px 7px rgba(0, 0, 0, 0.65); } .anm-slide-content.anm-content-left { margin-left: min(var(--anm-content-margin, 60px), 8vw); margin-right: auto; } .anm-slide-content.anm-text-left { text-align: left; } .anm-slide-content h3 { margin: 0 0 10px; color: var(--anm-heading-color); font-size: clamp(1.5rem, 2.8vw, 2.3rem); } .anm-slide-content p { margin: 0 0 16px; color: var(--anm-text-color); font-size: 1rem; line-height: 1.55; } .anm-slide-content .anm-slide-cta { margin: 18px 0 0; line-height: 1; } .anm-slider .anm-slide-button { display: inline-block; background: var(--anm-button-bg); color: var(--anm-button-text) !important; text-decoration: none; font-weight: 600; padding: 10px 18px; border-color: var(--anm-button-border-color); border-style: var(--anm-button-border-style); border-width: var(--anm-button-border-width); border-radius: var(--anm-button-radius); font-size: var(--anm-button-font-size); } .anm-slider .anm-slide-button:link, .anm-slider .anm-slide-button:visited, .anm-slider .anm-slide-button:hover, .anm-slider .anm-slide-button:focus, .anm-slider .anm-slide-button:active { color: var(--anm-button-text) !important; background: var(--anm-button-bg); } .anm-nav { position: absolute; top: 50%; transform: translateY(-50%); width: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)); height: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)); border: var(--anm-arrow-border); border-radius: var(--anm-arrow-bg-radius); cursor: pointer; background: var(--anm-arrow-bg); color: var(--anm-control-color); box-shadow: var(--anm-arrow-shadow); font-size: calc(22px * var(--anm-control-scale)); line-height: 1; z-index: 3; } .anm-prev { left: 10px; } .anm-next { right: 10px; } .anm-dots { position: absolute; z-index: 3; left: 50%; bottom: var(--anm-dots-bottom); transform: translateX(-50%); display: flex; gap: calc(var(--anm-dot-gap) * var(--anm-control-scale)); } .anm-scroll-down { position: absolute; left: 50%; bottom: var(--anm-scroll-arrow-bottom); transform: translateX(-50%); z-index: 4; width: 34px; height: 34px; border: 0; border-radius: 0; cursor: pointer; background: transparent; color: inherit; font-size: 0; line-height: 1; display: flex; align-items: center; justify-content: center; animation: anmArrowBounce 1.3s ease-in-out infinite; } .anm-chevron-down { width: 14px; height: 14px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); display: block; } @keyframes anmArrowBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } } .anm-slider.anm-hide-arrows .anm-nav { display: none; } .anm-dot.is-active { background: var(--anm-dot-active-bg); box-shadow: 0 0 calc(var(--anm-dot-active-glow) * var(--anm-control-scale)) rgba(255, 255, 255, 0.55); opacity: 1; transform: scale(1.08); } .anm-dot.anm-dot-image.is-active { background-color: transparent; } .anm-slider.anm-controls-theme-minimal-square { --anm-control-bg: rgba(255, 255, 255, 0.84); --anm-control-color: #111111; --anm-control-border: 1px solid rgba(28, 31, 35, 0.3); --anm-control-shadow: 0 1px 4px rgba(0, 0, 0, 0.14); --anm-dot-size: 8px; --anm-dot-radius: 2px; --anm-dot-gap: 6px; --anm-dot-bg: rgba(255, 255, 255, 0.35); --anm-dot-active-bg: #111111; --anm-dot-opacity: 0.52; --anm-nav-radius: 8px; } @media (min-width: 768px) and (max-width: 1024px) { .anm-slider { --anm-control-scale: clamp(0.72, calc(var(--anm-slide-height-tablet) / 720px), 1.15); } .anm-slider.anm-transition-fade { height: var(--anm-slide-height-tablet); } .anm-slide { height: var(--anm-slide-height-tablet); } .anm-slide-image { overflow: hidden; z-index: 0; } .anm-slide-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; max-width: none !important; object-fit: cover !important; } .anm-slide-content { max-height: calc(var(--anm-slide-height-tablet) - 28px); } } @media (max-width: 767px) { .anm-slider { max-width: var(--anm-slider-max-width-mobile, var(--anm-slider-max-width)); } .anm-slider.anm-transition-fade { height: var(--anm-slide-height-mobile); } .anm-slide { height: var(--anm-slide-height-mobile); } .anm-slide-image { overflow: hidden; z-index: 0; } .anm-slide-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; max-width: none !important; object-fit: cover !important; } .anm-slide-content { width: min(var(--anm-text-box-width-mobile, 100%), calc(100% - 20px)); max-width: min(var(--anm-text-box-width-mobile, 100%), calc(100% - 20px)); max-height: var(--anm-text-box-height-mobile, calc(var(--anm-slide-height-mobile) - 24px)); padding: var(--anm-content-padding-mobile, var(--anm-content-padding, 10px)); } .anm-slide-content.anm-content-left { margin-left: min(var(--anm-content-margin, 60px), 5vw); } .anm-nav { width: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)); height: calc(var(--anm-arrow-bg-size) * var(--anm-control-scale)); } .anm-scroll-down { width: 30px; height: 30px; } .anm-chevron-down { width: 12px; height: 12px; } .anm-slider { --anm-control-scale: clamp(0.66, calc(var(--anm-slide-height-mobile) / 720px), 1.05); } } @media (max-width: 1024px) { .anm-slider.anm-mobile-auto-height.anm-transition-fade { height: auto !important; } .anm-slider.anm-mobile-auto-height.anm-transition-fade .anm-slider-track { display: grid; position: relative; height: auto; } .anm-slider.anm-mobile-auto-height.anm-transition-fade .anm-slide { position: relative; inset: auto; grid-area: 1 / 1; } .anm-slider.anm-mobile-auto-height .anm-slide-mobile-full-image { height: auto; min-height: 0; display: grid; align-items: stretch; } .anm-slider.anm-mobile-auto-height .anm-slide-mobile-full-image .anm-slide-image { position: relative; inset: auto; grid-area: 1 / 1; width: 100%; height: auto; overflow: visible; } .anm-slider.anm-mobile-auto-height .anm-slide-mobile-full-image .anm-slide-img { position: relative; inset: auto; width: 100% !important; height: auto !important; min-width: 0; min-height: 0; object-fit: contain !important; } .anm-slider.anm-mobile-auto-height .anm-slide-mobile-full-image .anm-slide-overlay, .anm-slider.anm-mobile-auto-height .anm-slide-mobile-full-image .anm-slide-content { grid-area: 1 / 1; } .anm-slider.anm-mobile-auto-height .anm-slide-mobile-full-image .anm-slide-overlay { z-index: 1; } .anm-slider.anm-mobile-auto-height .anm-slide-mobile-full-image .anm-slide-content { align-self: center; max-height: none; } } @media (prefers-reduced-motion: reduce) { .anm-scroll-down { animation: none; } }