/*------------------ ██ ██ ██████ ██ ██████ ███████ ████████ ██ ██ ██ ███████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ██ ███████ ██ ████ ██ █████ ███████ ██ ██ ██ ██ ██ ██ ▄▄ ██ ██ ██ ██ ██ ██ ██ ██████ ██████ ██ ██████ ███████ ██ ██ ███████ ███████ ███████ ▀▀ ANSI REGULAR VERSION 2.02 - Parallax VERSION 2.01 - Cookie Meldung VERSION 1.00 - Happy Coding /* /////////// INHALT /////////// -------------------------- COMPONENTS -------------------------- 1. GENERAL 2. BODY / WRAPPER 3. HEADER 4. NAVIGATION 5. SLIDER 6. LANGUAGE SWITCHER 7. FOOTER 8. TYPOGRAFIE 9. BUTTONS 10. PAGINATION 11. ANIMATIONEN / SWUP 12. INHALT FELD 13. KONTAKTFORMULAR 14. MAP 15. COOKIES -------------------------- INDIVIDUAL STYLE -------------------------- RESPONSIVE -------------------------- DARKMODE -------------------------- /////////// /////////// //////////// */ /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// COMPONENTS ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* /////////// INHALT /////////// -------------------------- 1. SWIPER v 8.4.2 2. FANCY BOX v 4.0 3. PARALLAX 4. AKKORDEON 5. TABS -------------------------- */ /*-------------------------------------------------- SWIPER ---------------------------------------------------*/ /** * Swiper 8.4.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: September 15, 2022 */ @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}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.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}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{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,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(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,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(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,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.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-button-next,.swiper-button-prev{position:absolute;top: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-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev: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,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s 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}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.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(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.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:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .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-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s 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:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(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-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(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:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.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-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .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)}}.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,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.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-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.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-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}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /*-------------------------------------------------- FANCY BOX ---------------------------------------------------*/ :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} img[data-fancybox] { height: 100%; object-fit: cover; cursor: pointer; } .image-wrap { position: relative; height: clamp(20em, 30vw, 30em); } .show-image-btn { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: var(--white); font-size: 2rem; height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 1; pointer-events: none; transition: opacity 250ms ease-in; } .show-image-btn:before { position: absolute; content: "+"; } .image-wrap:hover .show-image-btn { opacity: 1; } button.carousel__button.fancybox__button--close { top: 3em; } /*-------------------------------------------------- PARALLAX ---------------------------------------------------*/ /* ///// Variante 1 ///// */ /* Parent */ .parallax { position: relative; width: 100%; height: 100%; overflow: hidden; } /* Child */ .parallax_bg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: 1; background-size: cover; background-position: center; } div#parallax-container { background: var(--dark-blue); } /* ///// Variante 2 ///// */ /* Parent */ .parallax-img { background-size: cover; object-fit: cover; position: relative; background-position: center; background-repeat: no-repeat; width: 100%; height: 120%; } /* Child */ .parallax-img img { height: 100%; object-fit: cover; } .fanclub { position: relative; flex-wrap: wrap; margin-bottom: 1rem; background: white; padding: 2rem; border-radius: 20px; } .fans { position: relative; flex-wrap: wrap; margin-bottom: 1rem; background: white; } /*-------------------------------------------------- AKKORDEON ---------------------------------------------------*/ .accordion { width: 100%; float: left; } .accordion__item { width: 100%; float: left; } .accordion__title { position: relative; padding: 1rem; font-size: min(max(0.9rem, 1vw), 1rem); cursor: pointer; display: flex; justify-content: space-between; border-bottom: solid 1px var(--dark-gray); color: var(--gold); font-weight: normal; transition: 0.5s all ease; } .accordion__title:after { position: absolute; content: " "; right: 15px; background-image: url(../images/right-arrow.svg); background-size: contain; background-repeat: no-repeat; background-position: center; top: 50%; transform: translate(0, -50%) rotate(90deg); width: clamp(10px, 2.4vw, 15px); height: clamp(10px, 2.4vw, 15px); transition: all 0.2s ease-in-out; } .accordion__item.is-open .accordion__title:after { transform: translate(0, -50%) rotate(-90deg); } .is-open .accordion__title { color: var(--mid-grey); } .is-open .accordion__title:after { background-image: url(../images/right-arrow.svg); transform: translate(0, -50%) rotate(90deg); background-position: center; } .accordion__body { height: 0; padding-left: 15px; padding-right: 15px; overflow: hidden; transition: height 0.3s ease-in-out; } .accordion__body b { text-transform: uppercase; } .accordion__body .grid { column-gap: 2rem; padding: 1rem; margin-bottom: 2rem; } .accordion__item.is-open { background-color: var(--white); } .accordion__title p { white-space: nowrap; } /*-------------------------------------------------- TABS ---------------------------------------------------*/ .tab-control, .tab-control-2, .tab-control-3 { position: relative; width: 100%; margin: 0 auto; border-radius: 25px; } ul.tabs, ul.tabs-2, ul.tabs-3 { position: relative; margin: 0px 0 -10px 0; padding: 0px; list-style: none; z-index: 1; } ul.tabs li, ul.tabs-2 li, ul.tabs-3 li { position: relative; background: none; font-size: min(max(0.75rem, 0.9vw), 0.9rem); color: var(--color1); display: inline-block; padding: 7px 30px 17px; border-radius: 10px; cursor: pointer; margin: 0; z-index: 1; font-family: "hcap-semibold"; text-transform: uppercase; /* background: rgb(180,180,180); background: -moz-linear-gradient(left, rgba(180,180,180,1) 0%, rgba(220,220,220,1) 100%); background: -webkit-linear-gradient(left, rgba(180,180,180,1) 0%,rgba(220,220,220,1) 100%); background: linear-gradient(to right, rgba(180,180,180,1) 0%,rgba(220,220,220,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4b4b4', endColorstr='#dcdcdc',GradientType=1 ); */ background: var(--midlight-gray); } ul.tabs li.current, ul.tabs-2 li.current, ul.tabs-3 li.current { /*background: rgb(70,105,170); background: -moz-linear-gradient(left, rgba(70,105,170,1) 0%, rgba(40,55,85,1) 100%); background: -webkit-linear-gradient(left, rgba(70,105,170,1) 0%,rgba(40,55,85,1) 100%); background: linear-gradient(to right, rgba(70,105,170,1) 0%,rgba(40,55,85,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4669aa', endColorstr='#283755',GradientType=1 );*/ background: var(--dark-blue); z-index: 2; color: var(--white); } ul.tabs li:not(:first-child), ul.tabs-2 li:not(:first-child), ul.tabs-3 li:not(:first-child) { margin: 0 0 0 -20px; } .tab-content, .tab-content-2, .tab-content-3 { position: relative; display: none; background: var(--white); padding: 15px; border-radius: 10px; /* -webkit-box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.05); box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.05); */ z-index: 2; visibility: hidden; } .tab-content.current, .tab-content-2.current, .tab-content-3.current { display: block; border: none; padding: 1em; border: solid 1px var(--color3); visibility: visible; } .tab-content-3.current { position: relative; display: block; float: left; width: 100%; } /*-------------------------------------------------- BROWSER WARNING ---------------------------------------------------*/ .buorg { position: absolute; position: fixed; z-index: 111111; width: 100%; top: 0px; left: 0px; border-bottom: 0px solid #A29330 !important; text-align: center; color: var(--white) !important; background-color: var(--black) !important; font: 18px Calibri,Helvetica,sans-serif; box-shadow: 0 0 5px rgba(0,0,0,0.2); animation: buorgfly 1s ease-out 0s; } /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// END COMPONENTS ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*------------------------------------------------------------------------------------------------------------------------------ 1 GENERAL ------------------------------------------------------------------------------------------------------------------------------*/ @font-face { font-family: 'hcap'; src: url('/static/css/fonts/bould-regular-webfont.woff2') format('woff2'), url('/static/css/fonts/bould-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'hcap'; src: url('/static/css/fonts/bould-regularitalic-webfont.woff2') format('woff2'), url('/static/css/fonts/bould-regularitalic-webfont.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'hcap-light'; src: url('/static/css/fonts/bould-light-webfont.woff2') format('woff2'), url('/static/css/fonts/bould-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'hcap-semibold'; src: url('/static/css/fonts/bould-semibold-webfont.woff2') format('woff2'), url('/static/css/fonts/bould-semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'hcap-bold'; src: url('/static/css/fonts/bould-bold-webfont.woff2') format('woff2'), url('/static/css/fonts/bould-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } :root { --dark-blue: #022e5f; --deep-blue: #1A2537; --light-gray: #eff0f4; --midlight-gray: #dddee3; --dark-gray: #cecece; --red: #c21522; --green: #4cb555; --border-color: #1a2537; --border-color2: #2f3b4f; --active-blue: #4669aa; --white: #ffffff; --black: #000000; --padding-top: 7%; --padding-bottom: 7%; --padding-left: 3%; --padding-right: 3%; --common-font: "hcap"; --bold-font: "hcap-bold"; --semibold-font: "hcap-semibold"; --light-font: "hcap-light"; } * { position: relative; box-sizing: border-box; } img, iframe, embed { width: 100%; max-width: 100%; } /*------------------------------------------------------------------------------------------------------------------------------ 2 BODY / WRAPPER ------------------------------------------------------------------------------------------------------------------------------*/ html, body { height: 100%; } body { margin: 0; font-size: 0.95rem; font-family: var(--common-font); font-weight: normal; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; color: var(--black); -webkit-font-smoothing: antialiased; line-height: 1.5; background: var(--light-gray); } body.overflow-hidden { overflow: hidden; } .wrapper { display: block; width: 100%; z-index: 2; } main { position: relative; display: inline; width: 100%; height: 100%; float: left; } .anchor { top: -200px; /* your offset */ } .bg-white { background: var(--white); } /* TRICK ZUM OVERFLOWS ERKENNEN * { outline: 1px solid #f00 !important; } */ .bild-frame { position: relative; width: 100%; height: clamp(15em, 26vw, 23em); overflow: hidden; cursor: pointer; border-radius: 10px; } .bild-frame-full { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: pointer; } .bild-overlay { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; z-index: 2; background: rgba(0,0,0,0.2); transition: all ease 0.5s; } .bild-frame:hover .bild { transform: scale(1.05); } .bild-frame:hover .bild-overlay { background: rgba(0,0,0,0.0); } .bild-frame-full:hover .bild-full { transform: scale(1.05); } .bild-frame-full:hover .bild-overlay { background: rgba(0,0,0,0.0); } div.fancybox { position: absolute; z-index: 10; width: 2em; height: 2em; right: 2em; bottom: 2em; background-image: url(../images/plus.svg); background-size: contain; background-repeat: no-repeat; left: auto; cursor: pointer; transition: all ease 0.5s; } #container figure.image { width: 12vw; max-width: 13rem; min-width: 8rem; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } #container figure.image img { height: auto; } /*------------------------------------------------------------------------------------------------------------------------------ 3 HEADER ------------------------------------------------------------------------------------------------------------------------------*/ .headnav { position: absolute; z-index: 1006; right: 4.5em; top: 5em; display: flex; align-items: center; } .fastlinks { position: relative; display: block; float: left; margin: 0 5em 0 1em; z-index: 1005; } .fastlinks p { margin: 0; } .fastlinks ul.menu { position: relative; margin-left: 0; } .fastlinks ul.menu li { float: left; list-style-type: none; } .fastlinks ul.menu a { display: table; font-family: var(--bold-font); font-size: 0.9rem; text-decoration: none; letter-spacing: 1px; color: var(--white); text-transform: uppercase; border: solid 1px var(--white); padding: 5px 50px 5px 20px; border-radius: 50px; margin: 0 15px; transition: all ease .5s; background-size: 300%; background-image: linear-gradient(120deg, transparent 50%, rgba(70,105,170,1) 0%,rgba(30,45,75,1) 100%); } .fastlinks ul.menu a:hover { background-color: transparent; border: solid 1px transparent; background-position: 100%; transform: scale(1.05); } .fastlinks ul.menu a.button-red, .fastlinks ul.menu a.button-tickets-red { border-color: var(--red); background-color: var(--red); background-size: 300%; border: solid 0px transparent; /*background-image: linear-gradient(270deg, rgba(182,42,52,1) 0%, rgba(138,31,39,1) 100%);*/ } .fastlinks ul.menu a.button-red:hover, .fastlinks ul.menu a.button-tickets-red:hover { background-color: transparent; border: solid 0px transparent; background-position: 100%; transform: scale(1.05); } .fastlinks a.button-shop:before { content: ""; position: absolute; top: 50%; right: 16px; transform: translate(0, -50%); width: 16px; height: 16px; background-image: url(../images/icons/icon-shop.svg); background-size: contain; background-repeat: no-repeat; } .fastlinks a.button-spenglercup:before { content: ""; position: absolute; top: 50%; right: 16px; transform: translate(0, -50%); width: 16px; height: 16px; background-image: url(../images/icons/icon-spenglercup.svg); background-size: contain; background-repeat: no-repeat; } a.button-spenglercup { background: #53aabd; border: solid 1px #53aabd !important; } .fastlinks a.button-tickets:before, .fastlinks a.button-tickets-red:before { content: ""; position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); width: 18px; height: 15px; background-image: url(../images/icons/icon-ticket.svg); background-size: contain; background-repeat: no-repeat; } .fastlinks a.button-red:before { content: ""; position: absolute; top: 50%; right: 16px; transform: translate(0, -50%); width: 20px; height: 20px; background-image: url(../images/icons/icon-fanzone.svg); background-size: contain; background-repeat: no-repeat; } .fastlinks a.button-filled, .fastlinks .button-filled { margin: 0 15px; } .header #container { display: flex; justify-content: space-between; align-items: center; } .header { position: absolute; display: flex; float: left; top: 0; left: 0; padding: 1em 1em; width: 100%; z-index: 1006; background: transparent; justify-content: space-between; align-items: center; } .header_fadein { position: fixed; display: flex; align-items: center; justify-content: space-between; padding: clamp(7px, 1vw, 10px) 0; right: 0px; top: 50px; left: 0px; z-index: 1007; background: var(--border-color); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; -webkit-box-shadow: 0px 5px 14px 0px rgb(0 0 0 / 5%); -moz-box-shadow: 0px 5px 14px 0px rgba(0,0,0,0.05); box-shadow: 0px 5px 14px 0px rgb(0 0 0 / 5%); } /* HEADER FADEIN ON UPSCROLL */ .header_fadein.hidden { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* HEADER FADEIN ON DOWNSCROLL .header_fadein.active { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } */ .header_fadein .logo { position: relative; top: auto; left: 7%; right: auto; width: clamp(2.9em, 6vw, 4em); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; } .header_fadein .headnav { top: 50%; transform: translate(0, -50%); } .header_content { display: flex; align-items: center; justify-content: space-between; float: left; width: 86%; margin-left: 7%; margin-right: 7%; } .heads { position: relative; display: block; float: left; width: 100%; height: 37vw; min-height: 17em; max-height: 37em; height: clamp(24em, 35vw, 35em); background-size: cover; background-position: center center; overflow: hidden; z-index: 1; } .heads .heads-title { position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; text-align: center; color: var(--white); z-index: 10; } .gradient-bluetone { z-index: 3; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgb(70,105,170); background: -moz-linear-gradient(top, rgba(70,105,170,1) 0%, rgba(30,45,75,1) 100%); background: -webkit-linear-gradient(top, rgba(70,105,170,1) 0%,rgba(30,45,75,1) 100%); background: linear-gradient(to bottom, rgb(70 105 170 / 40%) 20%, rgba(30, 45, 75, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4669aa', endColorstr='#1e2d4b',GradientType=0 ); opacity: 1; transition: all .65s ease; } .gradient-overlay { z-index: 3; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgb(70,105,170); background: -moz-linear-gradient(top, rgb(107 134 184) 0%, rgb(18 27 45) 100%); background: -webkit-linear-gradient(top, rgb(107 134 184) 0%, rgb(18 27 45) 100%); background: linear-gradient(to bottom, rgb(107 134 184) 0%, rgb(18 27 45) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4669aa', endColorstr='#1e2d4b',GradientType=0 ); mix-blend-mode: soft-light; opacity: 1; transition: all .65s ease; } .slider-lighten { z-index: 2; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; mix-blend-mode: overlay; opacity: 0.4; transition: all .65s ease; } .gradient-bottom-3 { z-index: 5; position: absolute; width: 100%; bottom: 0; left: 0; height: 100%; background: -moz-linear-gradient(top, rgb(26 67 143 / 28%) 0%, rgb(66 99 155 / 76%) 30%, rgb(2 13 31) 100%); background: -webkit-linear-gradient(top, rgb(26 67 143 / 28%) 0%, rgb(66 99 155 / 76%) 30%, rgb(2 13 31) 100%); background: linear-gradient(to bottom, rgb(26 67 143 / 28%) 0%, rgb(66 99 155 / 76%) 30%, rgb(2 13 31) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004669aa', endColorstr='#051638',GradientType=0 ); opacity: 1; } .gradient-bottom-2 { z-index: 6; position: absolute; width: 100%; bottom: -1px; left: 0; height: 60%; background: -moz-linear-gradient(top, rgba(239,240,244,0) 0%, rgba(26,37,55,0) 40%, rgba(239,240,244,0.5) 76%, rgba(239,240,244,1) 100%); background: -webkit-linear-gradient(top, rgba(239,240,244,0) 0%,rgba(26,37,55,0) 40%,rgba(239,240,244,0.5) 76%,rgba(239,240,244,1) 100%); background: linear-gradient(to bottom, rgba(239,240,244,0) 0%,rgba(26,37,55,0) 40%,rgba(239,240,244,0.5) 76%,rgba(239,240,244,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00eff0f4', endColorstr='#eff0f4',GradientType=0 ); } .gradient-bottom-1 { z-index: 5; position: absolute; width: 100%; bottom: 0; left: 0; height: 70%; background: -moz-linear-gradient(top, rgba(70,105,170,0) 0%, rgba(37,57,96,0.6) 49%, rgba(5,22,56,1) 100%); background: -webkit-linear-gradient(top, rgba(70,105,170,0) 0%,rgba(537,57,96,0.6) 49%,rgba(5,22,56,1) 100%); background: linear-gradient(to bottom, rgba(70,105,170,0) 0%,rgba(37,57,96,0.6) 49%,rgba(5,22,56,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004669aa', endColorstr='#051638',GradientType=0 ); } .gradient-top { z-index: 4; position: absolute; width: 100%; height: 30%; top: 0; left: 0; background: -moz-linear-gradient(top, rgba(30,58,103,1) 0%, rgba(30,58,103,0) 100%); background: -webkit-linear-gradient(top, rgba(30,58,103,1) 0%,rgba(30,58,103,0) 100%); background: linear-gradient(to bottom, rgba(30,58,103,1) 0%,rgba(30,58,103,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a2537', endColorstr='#001a2537',GradientType=0 ); transition: all .65s ease; opacity: 1; mix-blend-mode: multiply; } .gradient-top-1 { z-index: 4; position: absolute; width: 100%; height: 10em; top: 0; left: 0; background: -moz-linear-gradient(top, rgba(26,37,55,1) 0%, rgba(26,37,55,0) 100%); background: -webkit-linear-gradient(top, rgba(26,37,55,1) 0%,rgba(26,37,55,0) 100%); background: linear-gradient(to bottom, rgba(26,37,55,1) 0%, rgba(26,37,55,1) 20%, rgba(26,37,55,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a2537', endColorstr='#001a2537',GradientType=0 ); transition: all .65s ease; opacity: 1; } .heads .heads-background { background-size: cover; background-position: center center; width: 100%; height: 100%; filter: grayscale(40%); } .heads-title p { font-size: min(max(0.8rem, 1.1vw), 1.1rem); text-transform: uppercase; white-space: nowrap; letter-spacing: 0.9625em; text-indent: 0.9625em; margin: 0; } .heads h2 { color: var(--white); } a.fullscreen-mobile { display: none; } .subtitle { color: var(--black); text-transform: uppercase; letter-spacing: 6px; font-size: min(max(0.6rem, 0.7vw), 0.8rem); position: absolute; right: 4em; bottom: 0; transform: rotate(270deg) translateX(100%); transform-origin: bottom right; -ms-transform: rotate(270deg) translateX(100%); -ms-transform-origin: 0% 0%; -webkit-transform: rotate(270deg) translateX(100%); -webkit-transform-origin: bottom right; } /*------------------------------------------------------------------------------------------------------------------------------ 4 NAVIGATION ------------------------------------------------------------------------------------------------------------------------------*/ /* ///// MAIN NAVIGATION ///// */ .navigation { position: fixed; display: none; float: left; opacity: 1; width: 100%; background: var(--border-color); padding: 20px 7%; /*min-height: 40rem;*/ top: 0; left: 0; transform: translate(0, -80px); z-index: 14; opacity: 1; visibility: visible; -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4); height: 0; } #content-scroll.openmenu { touch-action: none; } .navigation .navigation-container { position: relative; display: block; float: left; width: 45%; top: 50%; z-index: 3; opacity: 0; transform: translate(0, -50%); } .navigation ul.menu { visibility: hidden; opacity: 0; } .navigation ul.menu li { position: static; display: table; background: none repeat scroll 0 0 transparent; list-style: none outside none; margin: 0px 0px 0 0px; padding: 0 0px; } ul.menu li span.separator:before { top: 50%; right: -1vw; right: clamp(-25px, -1vw, -10px); margin-left: 0px !important; content: ""; height: 10px; width: 5px; position: absolute; background-image: url(../images/menu-arrow.svg); background-repeat: no-repeat; transform: rotate(-0deg) translate(0, calc(-50% + 1px)); pointer-events: none; transition: all ease 0.5s; } .navigation ul.menu li ul.menu-child { display: block; position: absolute; font-size: 0.8em; margin-left: 0; top: 0px; padding: 0 3em; height: 100%; width: 100%; border-left: solid 1px #2e394b; max-width: max-content; opacity: 0; visibility: hidden; transition: all ease 0.5s; } .navigation ul.menu li ul.menu-child.open { opacity: 1; visibility: visible; } .navigation ul.menu > li { max-width: clamp(14em, 15vw, 20em); } .navigation ul.menu li > ul.menu-child { left: clamp(14em, 15vw, 20em); max-width: clamp(14em, 15vw, 20em); } .navigation ul.menu li > ul.menu-child > li > ul.menu-child { left: clamp(21em, 15vw, 26em); } .navigation ul.menu li a, .navigation ul.menu li span.separator { position: relative; display: block; float: none; font-family: var(--common-font); color: var(--white); font-size: min(max(0.9rem, 1vw), 1.1rem); text-transform: none; margin: 0px 0px 0px 0px; padding: 5px 0; border-right: 0px; white-space: normal; hyphens: auto; letter-spacing: 1px; cursor: pointer; opacity: 1; transition: all ease .5s; } .navigation ul.menu > li > a, .navigation ul.menu > li > span.separator { font-family: var(--bold-font); text-transform: uppercase; } .navigation ul.menu li:hover > a, .navigation ul.menu li:hover > span.separator { color: var(--active-blue); } .navigation ul.menu li.divider.open > a, .navigation ul.menu li.divider.open > span.separator { color: #5a9bdf; } .navigation ul.menu li.current > a, .navigation ul.menu li.current > span.separator { color: var(--active-blue); } span.navigoback { position: relative; color: #fff; padding: 3px 15px 3px 35px; margin-bottom: 20px; width: fit-content; border: solid 1px var(--white); border-radius: 30px; font-size: 0.7rem; cursor: pointer; display: none; } span.navigoback:before { top: 50%; left: 16px; margin-left: 0px !important; content: ""; height: 12px; width: 7px; position: absolute; background-image: url(../images/menu-arrow.svg); background-repeat: no-repeat; transform: rotate(-180deg) translate(0, 50%); pointer-events: none; } /* ///// END MAIN NAVIGATION ///// */ .menu-wrapper { position: absolute; width: 80px; height: 80px; margin: auto; cursor: pointer; top: 50%; transform: translate(0, -50%); right: 0; z-index: 1112; } .burger { position: relative; display: block; width: 40px; height: 50px; z-index: 1006; margin: 34px auto auto; } .tabnav-burger { position: relative; display: flex; width: 60px; height: 40px; z-index: 1006; justify-content: center; align-items: center; } .burger span, .tabnav-burger span { margin: 0 auto; position: absolute; } .burger span:before, .burger span:after, .tabnav-burger span:before, .tabnav-burger span:after { position: absolute; content: ''; } .burger span:before, .burger span:after { width: 40px; height: 4px; background-color: var(--white); display: block; transition: all .5s ease-in-out; } .tabnav-burger span:before, .tabnav-burger span:after { width: 40px; height: 4px; background-color: var(--border-color); display: block; transition: all .5s ease-in-out; } .burger span:before, .tabnav-burger span:before { margin: -5px 0 0; } .burger span:after, .tabnav-burger span:after { margin: 6px 0 0; } .collapse span { transition-duration: 0s; transition-delay: .3s; } .collapse.open span { background-color: rgba(255, 255, 255, 0); transition-delay: .3s; } .collapse span:before { transition-property: margin, transform; transition-duration: .3s; transition-delay: .3s, 0; } .collapse.open span:before { margin-top: 0; transform: rotate(45deg); transition-delay: 0, .3s; } .collapse span:after { transition-property: margin, transform; transition-duration: .3s; transition-delay: .3s, 0; } .collapse.open span:after { margin-top: 0; transform: rotate(-45deg); transition-delay: 0, .3s; } .menu-text p { white-space: nowrap; line-height: initial; hyphens: none; margin: auto; left: 50%; transform: translate(-50%, 0); font-size: 10px; text-transform: uppercase; letter-spacing: 4px; font-weight: bold; color: #ffffff; transition: all .5s ease-in-out; margin-left: 2px; } .menu-text p.close { font-size: 9px; margin-top: 5px; letter-spacing: 2px; margin-left: 0; } .menu-text { position: relative; display: block; height: 20px; overflow: hidden; top: -32px; } p.menu, p.close { position: absolute; } p.menu { top: 0; } .open + .menu-text p.menu { top: -20px; opacity: 0; } .close { top: 20px; opacity: 0; } .open + .menu-text .close { top: 0; opacity: 1; } .anchor { margin-top: -200px; } /*-------------------------------------------------- HAMBURGER ---------------------------------------------------*/ .sticky { position: absolute; right: clamp(2rem, 5vw, 5rem); top: 50%; transform: translate(0, -50%); display: none; } .hamburger { position: absolute; top: 50%; transform: translate(0, -50%); right: 0; transition: all ease .5s; } .hamburger .line1 { width: 26px; height: 2px; background-color: var(--black); display: block; margin: 4px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; float: left; } .hamburger .line2 { width: 22px; height: 2px; background-color: var(--black); display: block; margin: 3px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; float: left; } .hamburger:hover, .hamburger-home:hover { cursor: pointer; } .hamburger.is-active .line1:nth-child(1) { background-color: var(--black); -webkit-transform: translateY(10px) rotate(45deg); -ms-transform: translateY(10px) rotate(45deg); -o-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); width: 33px; height: 2px; -webkit-animation: none; animation: none; } .hamburger.is-active .line1:nth-child(3) { background-color: var(--black); -webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); -o-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); width: 33px; height: 2px; -webkit-animation: none; animation: none; } .hamburger.is-active .line2:nth-child(2) { opacity: 0; } .slider-menu { position: absolute; display: block; z-index: 2; width: 46%; height: 100%; top: 0; right: 0; opacity: 0; visibility: hidden; z-index: 33; -webkit-box-shadow: -10px 0px 15px 2px rgba(0,0,0,0.4); box-shadow: -10px 0px 15px 2px rgba(0,0,0,0.4); } img.nav-gallery { height: 100%; object-fit: cover; filter: saturate(0.4); z-index: 1; } .menu-socialmedia.desktop { position: absolute; display: block; float: left; z-index: 10; bottom: 10%; left: 15%; display: none; } .menu-socialmedia.mobile { position: relative; display: block; width: 88%; bottom: auto; left: auto; margin-left: 28px; margin-bottom: 6%; display: none; } .menu-socialmedia h4 { margin: 0.5em 0; color: var(--white); } .social-icons { display: flex; flex-wrap: nowrap; } .social-icons img { height: 20px; width: auto; margin: 0 24px 0 0; } .menu-adresse { position: absolute; display: block; float: left; z-index: 1; left: 0; bottom: -8em; opacity: 0; visibility: hidden; } .menu-adresse a, .menu-adresse p { color: var(--white); font-size: 0.8em; } /*------------------------------------------------------------------------------------------------------------------------------ 5 SLIDER ------------------------------------------------------------------------------------------------------------------------------*/ .slider { position: relative; width: 100%; height: 100vh; height: calc(var(--vh, 1vh) * 100); background-color: var(--black); } .swiper-container { height: 100%; width: 100%; } .slide-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-inner--image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: .2; transform: scale(1.07); -moz-transform: scale(1.07); -webkit-transition: opacity .6s ease-in-out, transform 2s ease .7s; -moz-transition: opacity .6s ease-in-out, transform 2s ease .7s; transition: opacity .6s ease-in-out, transform 2s ease .7s; filter: grayscale(40%); } .swiper-slide-duplicate-active .slide-inner--image, .swiper-slide-active .slide-inner--image { opacity: 1; transform: scale(1); -moz-transform: scale(1); } .slide-inner--info { position: absolute; width: auto; min-height: 50px; bottom: 3em; padding-left: 3em; color: #fff; z-index: 1; opacity: 1; transition: opacity 1s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .swiper-button-prev, .swiper-rtl .swiper-button-next { right: auto; left: 0; margin-top: 0; border: solid 1px var(--border-color); width: clamp(35px, 3vw, 50px); height: clamp(35px, 3vw, 50px); border-radius: 50%; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: auto; left: 0; margin-left: 70px; margin-top: 0; border: solid 1px var(--border-color); width: clamp(35px, 3vw, 50px); height: clamp(35px, 3vw, 50px); border-radius: 50%; } .swiper1 .swiper-button-next, .swiper-rtl .swiper-button-prev, .swiper1 .swiper-rtl .swiper-button-prev, .swiper1 .swiper-button-prev, .swiper1 .swiper-rtl .swiper-button-next, .swiper10 .swiper-button-next, .swiper10 .swiper-rtl .swiper-button-prev, .swiper10 .swiper-button-prev, .swiper10 .swiper-rtl .swiper-button-next, .swiper13 .swiper-button-next, .swiper13 .swiper-rtl .swiper-button-prev, .swiper13 .swiper-button-prev, .swiper13 .swiper-rtl .swiper-button-next { border: solid 1px var(--white); } .swiper13 .swiper-button-next { right: 0; left: auto; } .swiper-button-prev:after, .swiper-button-next:after { content: '' !important; background-image: url(/static/images/slider-arrow.svg); background-size: contain; background-repeat: no-repeat; width: 1rem; height: 0.6rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .swiper-button-prev:after { transform: translate(-50%, -50%) rotate(180deg); -ms-transform: translate(-50%, -50%) rotate(180deg); -webkit-transform: translate(-50%, -50%) rotate(180deg); } .swiper-controls { position: absolute; z-index: 7; top: 30%; transform: translate(-50%, 10px); left: 50%; width: auto; height: 8em; margin-left: -44em; } .swiper-pagination { position: relative; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; color: var(--white); font-size: 0.8rem; } .swiper-pagination .slices { font-size: 2.5rem; font-family: var(--semibold-font); line-height: 1; float: right; margin-right: 1em; margin-top: -4px; } .swiper-pagination .totals { position: absolute; top: 0px; right: 0px; } .swiper-pagination .totals span { margin: 0 5px; } .slider-section { width: 100%; height: calc(var(--vh, 1vh) * 100); } .swiper1 { height: 100%; } .swiper1 .swiper-slide { overflow: hidden; } .swiper-container.swiper1preview { position: absolute; z-index: 2; top: 30em; left: 50%; transform: translateX(-50%); width: clamp(60em, 70vw, 70em); height: auto; color: var(--white); margin-top: 14em; overflow: visible; background: rgb(197 200 236 / 20%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 5px; border-radius: 15px; } .swiper-container.swiper1preview .swiper-slide.swiper-slide-thumb-active { background: rgb(197 200 236 / 20%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .swiper1preview .swiper-slide { display: flex; align-items: flex-start; height: 100%; opacity: 1; font-family: var(--semibold-font); font-size: 0.8rem; border-right: solid 0px rgb(255 255 255 / 40%); padding: 7px 15px 4px; margin: 0; cursor: pointer; flex-wrap: wrap; border-radius: 10px; } .swiper1preview .swiper-slide p { opacity: 0.6; font-family: var(--semibold-font); font-size: min(max(0.7rem, 0.8vw), 0.8rem); width: 100%; margin: 0; hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; } .swiper1preview .swiper-slide .date { margin-bottom: 5px; } .swiper1preview .swiper-slide:last-child { border-right: solid 0px; } .swiper1preview .swiper-slide-thumb-active p { opacity: 1; } .newscaption { position: absolute; z-index: 7; color: var(--white); top: 30%; left: 50%; margin-left: 0em; transform: translate(-50%, 0); width: 71em; border-left: solid 1px; padding: 0 0 0 2em; opacity: 0; transition: opacity 1s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .swiper-slide-active .newscaption { opacity: 1; transition: opacity 1s ease 1s; } .newsinfo { position: relative; display: flex; align-items: center; float: left; width: 100%; margin-bottom: 0.5em; } .genre, .mainpartners { position: relative; width: auto; display: block; float: left; text-transform: uppercase; font-size: 0.8rem; font-family: var(--bold-font); } .newstitle { position: relative; z-index: 2; margin-bottom: 0.5em; } .newscaption h5 { color: var(--white); font-size: min(max(1.3rem, 2.4vw), 2.4rem); line-height: 1.2; text-transform: uppercase; } .slider-buttons { position: relative; display: flex; flex-wrap: wrap; align-items: center; } .genre ul { list-style: none; margin-left: 0; } .genre li { float: left; margin-right: 8px; } .yw-icons { display: flex; flex-wrap: nowrap; align-items: center; width: 150px; margin-left: clamp(1em, 2vw, 2em); } .blog .yw-icons { margin-bottom: 0.5em; margin-left: 0em; } .blog .yw-icons img, .yw-icons img { height: clamp(7px, 0.8vw, 10px); width: auto !important; margin-left: clamp(8px, 1.2vw, 15px); margin-right: 5px; } .yw-icons p { font-size: 12px; } button.btn.btn-default.share, button.btn.btn-default.feedback, button.btn.btn-default.form, button.btn.btn-default.payment, button.btn.btn-default.subscribe, button.btn.btn-default.engage, button.btn[data-yawave-tool="share"], button.btn[data-yawave-tool="feedback"], button.btn[data-yawave-tool="form"], button.btn[data-yawave-tool="payment"], button.btn[data-yawave-tool="subscribe"], button.btn[data-yawave-tool="engage"] { position: relative; padding: 0; border: none; font-family: 'hcap-semibold'; text-transform: uppercase; white-space: nowrap; margin: 0 0 0 7px; padding: 6px 12px 6px 32px; font-size: min(max(8px, 0.8vw), 10px); font-size: 0.65rem; cursor: pointer; color: var(--white); background-color: var(--active-blue); border-radius: 20px; background-size: 300%; background-image: linear-gradient(120deg, transparent 50%, rgba(70,105,170,1) 0%,rgba(30,45,75,1) 100%); transition: all ease .5s; } button.btn.btn-default.share:hover, button.btn.btn-default.feedback:hover, button.btn.btn-default.form:hover, button.btn.btn-default.payment:hover, button.btn.btn-default.subscribe:hover, button.btn.btn-default.engage:hover, button.btn[data-yawave-tool="share"]:hover, button.btn[data-yawave-tool="feedback"]:hover, button.btn[data-yawave-tool="form"]:hover, button.btn[data-yawave-tool="payment"]:hover, button.btn[data-yawave-tool="subscribe"]:hover, button.btn[data-yawave-tool="engage"]:hover { background-position: 100%; } .yw-share button.btn.btn-default.share, .yw-share button.btn.btn-default.feedback, .yw-share button.btn.btn-default.form, button.btn.btn-default.payment:hover, button.btn.btn-default.subscribe:hover, button.btn.btn-default.engage:hover { margin: 0px 0 0 1em; } .yw-share { display: flex; align-items: center; margin: 0 0 0 auto; } button.btn.btn-default.share.white, button.btn.btn-default.feedback.white, button.btn[data-yawave-tool="share"].white, button.btn[data-yawave-tool="feedback"].white { color: var(--white); background: var(--border-color); padding: 4px 10px 4px 30px; border-radius: 10px; } button.btn.btn-default.share:before, button.btn.btn-default.feedback:before, button.btn.btn-default.form:before, button.btn.btn-default.payment:before, button.btn.btn-default.subscribe:before, button.btn.btn-default.engage:before, button.btn[data-yawave-tool="share"]:before, button.btn[data-yawave-tool="feedback"]:before, button.btn[data-yawave-tool="form"]:before, button.btn[data-yawave-tool="payment"]:before, button.btn[data-yawave-tool="subscribe"]:before, button.btn[data-yawave-tool="engage"]:before { position: absolute; content: ""; top: 50%; transform: translate(0, -50%); left: 9px; height: 14px; width: 15px; background-size: contain; background-repeat: no-repeat; } button.btn.btn-default.share:before, button.btn[data-yawave-tool="share"]:before { background-image: url(../images/icons/icon-yw-share-white.svg); } button.btn.btn-default.feedback:before, button.btn[data-yawave-tool="feedback"]:before { background-image: url(../images/icons/icon-yw-feedback-white.svg); } button.btn.btn-default.form:before, button.btn[data-yawave-tool="form"]:before { background-image: url(../images/icons/icon-yw-form-white.svg); } button.btn.btn-default.payment:before, button.btn[data-yawave-tool="payment"]:before { background-image: url(../images/icons/icon-yw-payment-white.svg); } button.btn.btn-default.subscribe:before, button.btn[data-yawave-tool="subscribe"]:before { background-image: url(../images/icons/icon-yw-subscribe-white.svg); } button.btn.btn-default.engage:before, button.btn[data-yawave-tool="engage"]:before { background-image: url(../images/icons/icon-yw-engage-white.svg); } button.btn.btn-default.share.white:before, button.btn[data-yawave-tool="share"].white:before { background-image: url(../images/icons/icon-yw-share-white.svg); } button.btn.btn-default.feedback.white:before, button.btn[data-yawave-tool="feedback"].white:before { background-image: url(../images/icons/icon-yw-feedback-white.svg); } /*------------------------------------------------------------------------------------------------------------------------------ 6 LANGUAGE SWITCHER ------------------------------------------------------------------------------------------------------------------------------*/ ul.language-switcher { position: relative; float: left; display: flex; justify-content: space-between; list-style: none; z-index: 1007; background: rgb(197 200 236 / 20%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 30px; padding: 2px; } .language-switcher li { color: var(--white); font-size: 0.8em; line-height: 1; text-transform: uppercase; list-style-type: none; display: flex; justify-content: center; } /* .language-switcher li:first-child:after { position: absolute; content: "/"; color: var(--white); top: 50%; transform: translate(0,-50%); right: -2px; } */ .language-switcher li a { display: flex; justify-content: center; align-items: center; color: var(--white); font-family: var(--light-font); border-radius: 50%; width: 25px; height: 25px; text-align: center; } .language-switcher li a.active { font-family: var(--bold-font); background: var(--white); color: var(--border-color); } /*------------------------------------------------------------------------------------------------------------------------------ 7 FOOTER ------------------------------------------------------------------------------------------------------------------------------*/ footer { position: relative; display: block; width: 100%; background-color: var(--black); color: var(--white); } footer { position: relative; display: block; width: 100%; background-color: var(--black); color: var(--white); } #smooth-wrapper footer { display: inline; } footer p { color: var(--white); line-height: 1.75; font-size: 0.8rem; } footer a { color: var(--white); text-decoration: underline; line-height: 1.75; font-size: 0.8rem; margin-right: 0.5rem; } footer .grid { z-index: 2; } /*------------------------------------------------------------------------------------------------------------------------------ 8 TYPOGRAFIE ------------------------------------------------------------------------------------------------------------------------------*/ p { margin: 8px 0; font-size: 0.95rem; line-height: 1.5; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; -webkit-text-size-adjust: 100%; color: var(--blue); font-weight: normal; } p:after { content:""; display:inline-block; width:0px; } a { color: var(--black); font-family: var(--bold-font); text-decoration: none; cursor: pointer; transition: all ease .5s; } a:hover { text-decoration: none; color: var(--blue); } ul { display: block; list-style-type: disc; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0; list-style-position: outside; } li { -webkit-text-size-adjust: 100%; } strong, b { font-family: var(--bold-font); font-weight: normal; } h1 { font-family: var(--title-font); color: var(--border-color); font-size: min(max(1.4rem, 3vw), 4rem); font-weight: normal; letter-spacing: 1px; line-height: 1.1; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } h2 { font-family: var(--bold-font); color: var(--border-color); font-size: min(max(1.6rem, 3vw), 4rem); font-weight: normal; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; } h3 { font-family: var(--bold-font); color: var(--border-color); font-size: min(max(1.2rem, 1.8vw), 1.8rem); font-weight: normal; line-height: 1.1; } h4 { /* Wird verwendet */ font-family: var(--bold-font); color: var(--border-color); font-size: min(max(1rem, 1.4vw), 1.4rem); font-weight: normal; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; margin: 8px 0; } h5 { font-family: var(--bold-font); color: var(--border-color); font-size: min(max(1rem, 1.1vw), 1.1rem); font-weight: normal; letter-spacing: 0; line-height: 1.5; } /*------------------------------------------------------------------------------------------------------------------------------ 9 BUTTONS ------------------------------------------------------------------------------------------------------------------------------*/ .button, a.button, p.button, a.readmore, button.goback, a.button-filled, .button-filled, input.send, .freeform-form button { position: relative; border: solid 1px var(--border-color); font-family: var(--semibold-font); color: var(--color1); white-space: nowrap; /*background-color: var(--color2);*/ padding: 7px 40px 7px 20px; margin: 2px; margin-top: clamp(3px, 1vw, 7px); margin-bottom: clamp(3px, 1vw, 7px); margin-left: 0; margin-right: clamp(2px, 1vw, 10px); border-radius: 20px; transition: all ease .5s; display: table; font-size: clamp(0.8rem, 0.9vw, 0.9rem); text-transform: uppercase; line-height: 1; float: left; background-size: 300%; background-image: linear-gradient(120deg, transparent 50%, rgba(70,105,170,1) 0%,rgba(30,45,75,1) 100%); background-image: linear-gradient(120deg, transparent 50%, rgb(0 70 145) 0%, rgb(0 70 145) 100%); cursor: pointer; overflow: hidden; } .button:before, a.button:before, p.button:before, a.readmore:before, button.goback:before, input.send:before, .freeform-form button:before, a.button-filled.extern:before, a.button-filled.readmore:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 15px; width: 15px; height: 8px; background-image: url(/static/images/right-arrow.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } .button:hover, a.button:hover, a.button-filled:hover, a.readmore:hover, button.goback:hover { color: var(--white); border: solid 1px transparent; text-decoration: none; background-position: calc(100% + 1px); } .button:hover:before, a.button:hover:before, a.readmore:hover:before, button.goback:hover:before { filter: invert(1) brightness(5); } a.button-filled:hover:before, a.button-filled.readmore:hover:before { filter: none; } a.button-filled.add, a.button-filled.logout { padding-right: 45px; } a.button-filled.add { background-color: var(--green); border: solid 1px var(--green); } a.button-filled.add:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 15px; width: 15px; height: 8px; background-image: url(/static/images/add.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } a.button-filled.add:hover { color: var(--white); border: solid 1px transparent; text-decoration: none; background-position: calc(100% + 1px); } a.button-filled.logout:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 15px; width: 15px; height: 10px; background-image: url(/static/images/logout.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } a.button-filled.logout:hover { color: var(--white); border: solid 1px transparent; text-decoration: none; background-position: calc(100% + 1px); } input::file-selector-button { color: var(--white); padding: 8px 20px 8px 20px; border-radius: 30px; border: solid 1px transparent; background-color: var(--dark-blue); cursor: pointer; font-size: clamp(0.8rem, 0.9vw, 0.9rem); font-family: var(--semibold-font); line-height: 1; text-transform: uppercase; background-size: 300%; background-image: linear-gradient(120deg, transparent 50%, rgba(70, 105, 170, 1) 0%, rgba(30, 45, 75, 1) 100%); background-image: linear-gradient(120deg, transparent 50%, rgb(0 70 145) 0%, rgb(0 70 145) 100%); cursor: pointer; overflow: hidden; transition: all ease .5s; } input::file-selector-button:hover { color: var(--white); border: solid 1px transparent; text-decoration: none; background-position: calc(100% + 1px); } /* LOAD MORE BUTTON */ .button.loadmore:before { transform: translate(0,-50%) rotate(90deg); } .button.loadmore.collapsed:before { transform: translate(0,-50%) rotate(-90deg); } /* BLAUER BUTTON */ a.button-filled, .button-filled { color: var(--white); /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4669aa+0,283755+100;HCAP+Blue */ /*background: rgb(70,105,170); background: -moz-linear-gradient(left, rgba(70,105,170,1) 0%, rgba(40,55,85,1) 100%); background: -webkit-linear-gradient(left, rgba(70,105,170,1) 0%,rgba(40,55,85,1) 100%); background: linear-gradient(to right, rgba(70,105,170,1) 0%,rgba(40,55,85,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4669aa', endColorstr='#283755',GradientType=1 ); */ background-color: var(--dark-blue); border: solid 1px var(--dark-blue); transition: all ease .5s; padding: 8px 20px 8px 20px; } a.button-filled.icon { padding: 8px 45px 8px 20px; } a.button-filled.readmore, .button-filled.readmore { padding: 8px 42px 8px 20px; } /* WEISSER BUTTON */ .button.white, a.button.white, p.button.white { color: var(--border-color); background-color: var(--white); border: solid 1px var(--white); } button.white:before, a.button.white:before, p.button.white:before, a.readmore.white:before, button.white.goback:before { background-image: url(/static/images/right-arrow.svg); } button.white:hover, a.button.white:hover { background-color: var(--black); color: var(--white); border: solid 1px transparent; } button.white:hover:before, a.button.white:hover:before, a.readmore.white:hover:before, button.white.goback:hover:before { filter: invert(1) brightness(5); } /* TRANSPARENTER BUTTON MIT WEISSEM RAHMEN */ .button.whiteline, a.button.whiteline { border: 1px solid var(--white); color: var(--white); background-color: transparent; cursor: pointer; } .newsletter input.send { border: 1px solid var(--white); color: var(--white); background-color: transparent; padding: 7px 20px 7px 20px; background-size: 300%; background-image: linear-gradient(120deg, transparent 50%, rgba(70,105,170,1) 0%,rgba(30,45,75,1) 100%); } .button.whiteline:before, a.button.whiteline:before, p.button.whiteline:before, a.readmore.whiteline:before, button.whiteline.goback:before, .newsletter input.send:before { filter: invert(1) brightness(5); } .button.whiteline:hover, a.button.whiteline:hover { background-color: transparent; color: var(--white); border: solid 1px var(--active-blue); } .button.whiteline:hover:before, a.button.whiteline:hover:before, a.readmore.whiteline:hover:before, button.whiteline.goback:hover:before, input.send:hover:before, .freeform-form button:hover:before { filter: invert(1) brightness(5); } input.send:hover { border: solid 1px var(--border-color); background-position: 100%; transform: scale(1.05); color: var(--white); } /* EXTERNER BUTTON */ button.extern, a.button.extern { border: solid 1px var(--border-color); color: var(--black); transition: all ease .5s; padding: 7px 45px 7px 20px; } .button-filled.extern, a.button-filled.extern { padding: 7px 45px 7px 20px; } button.extern:before, a.button.extern:before, p.button.extern:before, a.readmore.extern:before, button.extern.goback:before, .button-filled.extern:before, a.button-filled.extern:before, p.button.button-filled:before, a.readmore.button-filled:before, button.button-filled.goback:before { background-image: url(/static/images/link-dark.svg); transition: all ease .5s; width: 15px; height: 15px; } a.button.extern:hover, a.button-filled.extern:hover { background-color: transparent; border: solid 1px transparent; color: var(--white); } .button-filled.extern:before, a.button-filled.extern:before { filter: invert(1) brightness(5); } button.extern:hover:before, a.button.extern:hover:before, button.extern:hover:before, a.button.extern:hover:before, .button-filled.extern:hover:before, a.button-filled.extern:hover:before, button.button-filled:hover:before, a.button.button-filled:hover:before { filter: invert(1) brightness(5); } /* EXTERNER TRANSPARENTER BUTTON MIT WEISSEM RAHMEN */ button.extern-whiteline, a.button.extern-whiteline { border: solid 1px var(--white); color: var(--black); padding: 7px 35px 5px 10px; margin: 5px 15px 5px 0; } button.extern-whiteline:before, a.button.extern-whiteline:before, p.button.extern-whiteline:before, a.readmore.extern-whiteline:before, button.extern-whiteline.goback:before { background-image: url(/static/images/link.svg); } button.extern-whiteline:hover, a.button.extern-whiteline:hover { background: var(--white); color: #000; border: solid 1px var(--white); text-decoration: none; } button.extern-whiteline:hover:before, a.button.extern-whiteline:hover:before { background-image: url(/static/images/link-black.svg); } /* DOWNLOAD BUTTON */ a.button.download:before { right: 16px; width: 16px; height: 16px; background-image: url(/static/images/icons/icon-download.svg); } a.button.download:hover:before { background-image: url(/static/images/icons/icon-download-hover.svg); filter: none; } /* TICKET BUTTON */ a.button.ticket:before { right: 16px; width: 18px; height: 14px; background-image: url(/static/images/icons/icon-ticket-dark.svg); } a.button.ticket:hover:before { background-image: url(/static/images/icons/icon-ticket.svg); } /* RESERVIEREN BUTTON */ a.button-filled.reservieren { padding: 8px 45px 8px 20px; } a.button-filled.reservieren:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 14px; width: 21px; height: 9px; background-image: url(/static/images/icons/icon-reservieren.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } /* READMORE FILLED BUTTON */ a.button-filled.readmore:before, .button-filled.readmore:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 15px; width: 16px; height: 8px; background-image: url(/static/images/right-arrow-white.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } .button-filled.readmore.active:before { transform: translate(0,-50%); } a.button.readmore:hover, a.button-filled.readmore:hover { background-color: transparent; border: solid 1px transparent; color: var(--white); } /* SHOP FILLED BUTTON */ a.button-filled.shop { position: absolute; bottom: -5em; right: 0; margin: 0; } a.button-filled.shop:before { content: ""; position: absolute; top: 50%; right: 16px; transform: translate(0, -50%); width: 16px; height: 16px; background-image: url(/static/images/icons/icon-shop.svg); background-size: contain; background-repeat: no-repeat; } /* EMAIL BUTTON */ a.button.email:before { right: 16px; width: 18px; height: 14px; background-image: url(/static/images/icons/icon-email.svg); } a.button.email:hover:before { background-image: url(/static/images/icons/icon-email-hover.svg); } /* REGISTRY BUTTON */ a.button-filled.registry { border: solid 0px var(--red); /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d1e28+0,c82832+100 */ background: rgb(125,30,40); /* Old browsers */ background: -moz-linear-gradient(left, rgba(125,30,40,1) 0%, rgba(200,40,50,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(125,30,40,1) 0%,rgba(200,40,50,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(125,30,40,1) 0%,rgba(200,40,50,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d1e28', endColorstr='#c82832',GradientType=1 ); /* IE6-9 */ opacity: 0.4; pointer-events: none; } a.button-filled.registry:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 16px; width: 18px; height: 18px; background-image: url(/static/images/icons/icon-registry.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } /* LOGIN BUTTON */ a.button-filled.fanzone, .button-filled.fanzone { border: solid 0px var(--active-blue); } a.button-filled.fanzone:before, .button-filled.fanzone:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 16px; width: 18px; height: 18px; background-image: url(/static/images/icons/icon-login.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } a.button-filled.fanzone-fastlink:before, .button-filled.fanzone-fastlink:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 16px; width: 18px; height: 18px; background-image: url(/static/images/icons/icon-fanzone.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } /* EMPTY TICKETLINK */ a.button.noticketlink { opacity: 0.4; cursor: default; pointer-events: none; } a.button.noticketlink:hover { color: var(--color1); border: solid 1px var(--border-color); text-decoration: none; background-position: 0%; transform: none; } /* BUTTON PLAYER PROFILE */ a.button-filled.playerprofile { position: absolute; bottom: 12%; left: 10%; z-index: 7; } a.button-filled.playerprofile:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 16px; width: 18px; height: 18px; background-image: url(/static/images/icons/icon-playerprofile.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } /* END BUTTON PLAYER PROFILE */ a.button-filled.youtube { margin-left: 50%; transform: translate(-50%, 0); position: absolute; z-index: 6; top: 7em; margin-top: 0; } a.button-filled.youtube:before { content: ""; position: absolute; top: 50%; transform: translate(0,-50%); right: 14px; width: 20px; height: 15px; background-image: url(/static/images/icons/icon-youtube.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; } a.button-filled.shop:before { content: ""; position: absolute; top: 50%; right: 16px; transform: translate(0, -50%); width: 16px; height: 16px; background-image: url(/static/images/icons/icon-shop.svg); background-size: contain; background-repeat: no-repeat; } .allnewsbutton { left: auto; position: absolute; top: auto; right: 0; margin: 0; bottom: -3em; border: none; text-transform: none; color: var(--white); padding: 7px 45px 7px 20px; } .allnewsbutton:before { content: ""; position: absolute; top: 50%; transform: translate(0, -50%); right: 15px; width: 15px; height: 8px; background-image: url(/static/images/right-arrow.svg); background-size: contain; background-repeat: no-repeat; transition: all ease .5s; filter: invert(1) brightness(5); } /* NEWSLETTER */ .button.whiteline.newsletter:before, a.button.whiteline.newsletter:before { background-image: url(/static/images/icons/icon-newsletter.svg); right: 16px; width: 16px; height: 16px; filter: invert(0); } /* / ALL */ a.button.whiteline.all { left: 50%; transform: translate(-50%, 4vw); transform: translate(-50%, clamp(2em, 4vw, 4em)); } /* REVERSE */ .button.reverse, a.button.reverse { background-color: transparent; } .button.reverse, a.button.reverse { padding: 7px 20px 7px 45px; } .button.reverse:before, a.button.reverse:before { left: 15px; width: 20px; height: 13px; transform: rotate(180deg) translate(0,50%); } .button.reverse:hover:before { filter: invert(1) brightness(5); } .button.news { margin-top: 7em; margin-left: 50%; transform: translate(-50%, 0); float: none; } .button.news:hover { transform: translate(-50%, 0) scale(1); } /*------------------------------------------------------------------------------------------------------------------------------ 10 PAGINATION ------------------------------------------------------------------------------------------------------------------------------*/ .pagination { position: relative; display: block; float: left; width: 100%; } .pagination > * { display: inline-block; padding: clamp(3px, 1vw, 7px) clamp(10px, 2vw, 30px)clamp(3px, 1vw, 7px) clamp(10px, 2vw, 30px); border-radius: 20px; font-size: 0.8rem; margin: 2px 2px 3px 0px; } .pagination a { border: 1px solid var(--border-color); } .pagination span.current { background: var(--active-blue); border: 1px solid var(--active-blue); color: var(--white); } .pagination a:hover { background: var(--active-blue); color: var(--white); } /*------------------------------------------------------------------------------------------------------------------------------ 11 ANIMATIONEN / SWUP ------------------------------------------------------------------------------------------------------------------------------*/ .transition-fade { transition: 0.4s; opacity: 1; height: 100%; } html.is-animating .transition-fade { opacity: 0; } .swup-overlay { position: fixed; top: 0; left: 0; z-index: 1112; background: var(--black); width: 100%; height: 100%; -webkit-transform: translateX(-130%) skew(-10deg); -ms-transform: translateX(-130%) skew(-10deg); transform: translateX(-130%) skew(-10deg); } .swuplogo { position: absolute; top: 50%; left: 50%; width: clamp(9em, 20vw, 25em); height: clamp(7em, 16vw, 20em); transform: translate(-50%, -50%); } .swuplogo svg { position: absolute; display: block; z-index: 2; } .swup-opacity { position: fixed; top: 0; left: 0; z-index: 1111; background: var(--black); width: 100%; height: 100%; opacity: 0; visibility: hidden; } .rv, .rvb, .rvt, .rvl, .rvr, .rvSlow, .rvlSlow, .rvrSlow, .rvbSlow, .rvtSlow, .imgRV { will-change: transform; } .rv, .rvb, .rvt, .rvl, .rvr, .rvSlow, .rvlSlow, .rvrSlow, .rvbSlow, .rvtSlow { opacity: 0; } .split_outer {overflow: hidden;} .split_inner {display: inline-block;} figure.has-parallax { overflow: hidden; max-height: 45vw; } .imgreveal { visibility: hidden; position: relative; width: 100%; height: 100%; overflow: hidden; } .imgreveal img { height: 100%; width: 100%; object-fit: cover; transform-origin: left; } .auflistung-detail h3 { margin-top:0px; line-height:1.2; overflow:hidden; } .split-line { overflow: hidden; } .split-parent { overflow: hidden; } .split-child { display: inline-block; transform: translate(0, 100%); } /*------------------------------------------------------------------------------------------------------------------------------ 12 INHALT FELD ------------------------------------------------------------------------------------------------------------------------------*/ ul.downloads { width: 100%; list-style: none; display: inline-block; } ul.downloads li { position: relative; padding: 5px 0 5px 40px; margin: 3px 0; background: var(--light-grey); transition: all ease 0.3s; } ul.downloads li:before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background-image: url('/static/images/icon_download.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } ul.downloads a { transition: all ease 0.3s; } ul.downloads a:hover li { color: var(--white); background: var(--blue); } ul.downloads a:hover li:before { filter: invert(1) brightness(5); } a.galerie-item { height: clamp(7rem, 16vw, 17rem); float: left; position: relative; width: auto; display: block; } .galerie-item img { object-fit: cover; height: 100%; } .download-section .grid.cols-3 { grid-template-columns: 100px 1fr clamp(140px, 20vw, 200px); border-bottom: solid 1px var(--dark-gray); padding-top: 1rem; } .block-container { padding: 2em; background: var(--white); border-radius: 10px; } .block { display: flex; flex-direction: column; align-items: flex-start; } .block img { border-radius: 10px; margin-bottom: 1em; } .block > .mt-3:nth-child(1) { display: none; } .block ul { padding-left: 1rem; } ul.list { list-style-type: none; padding-left: 0; margin: 1em 0; } ul.list b { display: block; } ul.list li { border-bottom: solid 1px var(--border-color2); padding: 5px 0; } .download-section { display: flex; flex-direction: row; justify-content: space-between; border-bottom: solid 1px var(--dark-gray); gap: 10px 10px; align-self: stretch; align-items: center; } ul.struktur { list-style: none; } .struktur-person { border-bottom: solid 1px var(--dark-gray); } /*------------------------------------------------------------------------------------------------------------------------------ 13 KONTAKTFORMULAR ------------------------------------------------------------------------------------------------------------------------------*/ input#ubiqhonigtopf { display: none; } form#kontakt-formular { margin-top: 3em; } input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], input[type=number], input[type=tel], textarea, select { border: none; outline: none; background: var(--white); width: 100%; padding: 0.5rem; margin-bottom: 1rem; color: var(--black); font-family: inherit; border: none; border-radius: 0; font-size: 1rem; float: left; border-radius: 7px; font-weight: normal; font-family: var(--common-font); } input[type=text]::placeholder, input[type=email]::placeholder, input[type=url]::placeholder, input[type=date]::placeholder, input[type=number]::placeholder, input[type=tel]::placeholder, textarea::placeholder { color: var(--black); -webkit-font-smoothing: auto; } .kontakt-formular button { background: var(--blue); color: var(--white); text-transform: uppercase; font-weight: bold; padding: 5px 10px; border: none; } .form-success { display: none; } form p { float: left; width: 100%; } label { float: left; width: 100%; font-family: 'hcap-bold'; margin-bottom: 8px; margin-top: 0.5rem; } form button { position: relative; border: solid 1px var(--border-color); font-family: var(--semibold-font); color: var(--white); white-space: nowrap; text-transform: uppercase; line-height: 1; border-radius: 20px; transition: all ease .5s; background-color: var(--dark-blue); background-size: 300%; background-image: linear-gradient(120deg, transparent 50%, rgba(70, 105, 170, 1) 0%, rgba(30, 45, 75, 1) 100%); background-image: linear-gradient(120deg, transparent 50%, rgb(0 70 145) 0%, rgb(0 70 145) 100%); border: solid 1px transparent; overflow: hidden; transition: all ease .5s; padding: 7px 20px; margin: 2rem 0 0; clear: both; cursor: pointer; } form button:hover { color: var(--white); border: solid 1px transparent; text-decoration: none; background-position: calc(100% + 1px); } .freeform-col-12.freeform-fieldtype-checkbox[data-field-container="disclaimer"] { display: flex; align-items: flex-start; } .freeform-col-12.freeform-fieldtype-checkbox[data-field-container="disclaimer"] label { font-family: var(--common-font); } .freeform-row [class*="freeform-col-"] { padding: 0 !important; } .freeform-form button { font: normal clamp(0.8rem, 0.9vw, 0.9rem) var(--semibold-font) !important; line-height: 1 !important; color: var(--color1) !important; text-align: left !important; text-decoration: none !important; border: solid 1px var(--border-color) !important; border-radius: 30px !important; background-color: transparent !important; padding: 7px 40px 7px 20px !important; margin: 2px !important; margin-bottom: 1rem !important; cursor: pointer !important; display: table !important; vertical-align: middle !important; transition: all ease .5s !important; justify-content: center !important; } .freeform-form button:hover { color: var(--white) !important; } .freeform-form-success { background-color: var(--green) !important; border: 1px solid var(--green) !important; } .freeform-form-success, .freeform-form-errors { margin-top: 5rem; } .freeform-form-success, .freeform-form-errors { float: left !important; width: 100% !important; } /*------------------------------------------------------------------------------------------------------------------------------ 14 MAP ------------------------------------------------------------------------------------------------------------------------------*/ .maps iframe{ pointer-events: none; } /*------------------------------------------------------------------------------------------------------------------------------ 15 COOKIES ------------------------------------------------------------------------------------------------------------------------------*/ button#accept_cookie:before { content: ""; visibility: hidden; } .popup { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgb(0 0 0 / 30%); display: flex; align-items: center; justify-content: center; overflow: auto; background: var(--white); font-size: 17px; position: fixed; z-index: 100000; visibility: hidden; opacity: 0; } .popup.visible { visibility: visible; animation-name: visible; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes visible { from{opacity: 0;} to{opacity: 1;} } .popup-wrapper { background: var(--white); max-width: 544px; overflow: hidden; width: 100%; position: relative; } .popup-wrapper.news-letter { max-width: 470px; top: 55px; } .popup-content { padding: 59px 46px 39px 60px; } .popup-content p { font-size: 14px; line-height: 22px; color: var(--black); letter-spacing: 0.6px; } .popup-content p.cookies-title { margin-bottom: .5rem; font-family: var(--title-font); font-weight: 800; line-height: 1.2; color: inherit; font-size: min(max(1.4rem, 1.6vw), 1.6rem); } .popup-header { position: relative; height: 195px; background: var(--white); margin-bottom: 36px; } .popup-header .radio-img { position: absolute; bottom: -50px; left: 60px; } .popup-header .badge-img { top: 19px; } .popup#popup_cookie { display:flex; left: unset; right: 30px; top: unset; bottom: 30px; z-index: 214748364733; box-shadow: 0px 2px 100px rgba(0, 0, 0, 0.102109); } #popup_cookie .popup-wrapper { max-width: 340px; } #popup_cookie .popup-content { padding: 27px 22px 27px 36px; } #popup_cookie .cookie-area { font-size: 15px; line-height: 17px; } #popup_cookie .cookie-area .primary-btn { padding: 10px 20px; width: 125px; border: none; } #popup_cookie .cookie-area .primary-btn span { color: var(--white); } @media (max-width: 768px) { .popup { padding: 0 25px; overflow: visible; } .popup-content { padding: 39px 26px 19px 40px; } .popup-content h2 { font-size: 25px; } #popup_cookie.popup { align-items: flex-end; } .popup#popup_cookie { left: 50%; width: 320px; transform: translate(-50%); display: block; z-index: 214748364733; box-shadow: 0px 2px 100px rgb(0 0 0 / 10%); padding: 0; display: flex; background: transparent; flex-direction: row; justify-content: center; } .popup-content{ left: 0; right: 0; box-shadow: 0px 2px 100px rgb(0 0 0); } .primary-link{ padding-bottom: 3px; } } .cookie-area .primary-btn { padding: 15px 0; background: var(--blue); color: var(--white); width: 120px; text-align: center; } .cookie-area { display: flex; justify-content: space-between; align-items: center; } .primary-link, .page-banner .primary-heading a { color: var(--red); position: relative; padding-bottom: 7px; font-weight: bold; } .primary-link:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; bottom: 0; left: 0; background-color: var(--blue); transform-origin: bottom right; transition: transform 0.25s ease-out; } .primary-link:hover { color: var(--blue); } .primary-link:hover:after { transform: scaleX(1); transform-origin: bottom left; } /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// INDIVIDUAL STYLE ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*-------------------------------------------------- GENERAL ---------------------------------------------------*/ table, thead, tbody, th, td, tr { vertical-align: middle; border-collapse: collapse; position: relative; } table { width: 100%; border-spacing: 0; } tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } tr { display: table-row; } td { display: table-cell; padding: 0; } /*-------------------------------------------------- HEADER ---------------------------------------------------*/ /* ///// LOGO ///// */ .logo { position: absolute; top: clamp(4em, 5vw, 5em); left: 7%; width: clamp(4em, 5vw, 6em); float: left; z-index: 998; transition: all ease 0.5s; } .logo-menu { position: absolute; width: 8vw; min-width: 3em; max-width: 7em; width: clamp(3em, 8vw, 7em); visibility: hidden; opacity: 0; top: 50px; left: 7%; } .logo img { float: left; width: 100%; } .logo span { position: relative; display: inline-block; font-size: 7px; font-size: min(max(7px, 0.6vw), 11px); white-space: nowrap; color: #fff; text-transform: uppercase; left: 50%; transform: translate(-50%, 0); } /* ///// NAVIGATION ///// */ ul.menu a.extern { position: relative; margin-right: 5em; } ul.menu a.extern:before { content: ""; position: absolute; top: 50%; right: -1.5em; transform: translate(0, -50%); width: 12px; height: 12px; background-image: url(../images/extern-white.svg); background-size: contain; background-repeat: no-repeat; } .submenu ul.menu a.extern:before { display: none; } .newsslider-edge { position: absolute; display: block; float: left; width: 100%; height: 0.9em; background: rgb(217,217,217); background: linear-gradient(180deg, rgba(217,217,217,1) 0%, rgba(255,255,255,0) 100%); z-index: 1; } #newsslider-edge.subpage { position: absolute; pointer-events: none; } .canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 13; opacity: 0; display: none; } .subnav-junioren-mobile ul.nav.menu.mod-list { margin-left: 0!important; padding: 0.5em 0; } .moduletable.subnav-junioren-mobile { display: none; background: var(--border-color); position: relative; float: left; width: 100%; } .subnav-junioren-mobile ul.menu li { padding: 0.25rem 0; text-align: center; display: flex; justify-content: center; text-transform: uppercase; } .subnav-junioren-mobile ul.menu a { font-size: 0.7rem; letter-spacing: 0.03rem; } .subnav-junioren-mobile ul.menu li.current a { font-family: 'hcap-bold'; } .mobile-nav-button { display: none; position: relative; float: left; width: 100%; clear: both; font-size: 0.7rem; letter-spacing: 0.03rem; color: var(--white); background: var(--border-color); text-align: center; padding-top: clamp(1.2em, 1.4vw, 1.4em); padding-bottom: clamp(1.2em, 1.4vw, 1.4em); z-index: 999; border-top: 1px solid var(--white); text-transform: uppercase; } .mobile-nav-button:after { content: ''; width: 12px; height: 10px; position: absolute; background-image: url(/templates/ubiqdesign/images/team-menu-arrow.svg); background-size: contain; background-position: center; background-repeat: no-repeat; top: 50%; transform: translate(5px, -50%) rotate(0deg); transition: 0.5s all ease; } .mobile-nav-button.active:after { transform: translate(5px, -50%) rotate(-180deg); } /* ///// MENU GOTTARDO ARENA ///// */ .top-bar { position: fixed; float: left; width: 100%; background: var(--border-color); border-bottom: solid 0.5px #374f74; display: flex; flex-direction: row; align-items: center; justify-content: center; top: 0; left: 0; z-index: 1111; height: 50px; } .top-bar-item { position: relative; float: left; display: flex; align-items: center; justify-content: flex-start; } a.top-bar-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .top-bar-item span { font-family: 'hcap-semibold'; color: var(--white); text-transform: uppercase; font-size: 14px; margin-right: 1rem; } .top-bar-item img { width: auto; height: 30px; object-fit: contain; } .gottardo-arena { position: relative; float: left; height: auto; display: flex; margin: 0 clamp(2rem, 4vw, 4rem); } .gottardo-arena img { height: 30px; float: left; margin: 0 20px; } img.gottardo-arena-header-logo { width: clamp(18rem, 36vw, 36rem); } /* ///// SUBMENU ///// */ .submenu { position: relative; display: block; float: left; width: 100%; z-index: 11; justify-content: center; align-items: center; /* overflow: hidden; HCAP */ } .submenu span.separator, .submenu span.navigoback { display: none; } .subnavigation { position: absolute; left: 50%; top: 0; transform: translate(-50%,-150%); width: 100%; flex-wrap: nowrap; display: flex; overflow: hidden; white-space: nowrap; justify-content: center; z-index: 2; border-top: solid 0.5px rgba(255,255,255,0.3); } .submenu ul.menu { display: flex; overflow: auto; } .submenu ul.menu a { position: relative; font-size: 1rem; color: var(--border-color); } .submenu ul.menu li { padding: 0; float: left; list-style-type: none; } .submenu ul.menu li a { display: block; padding-top: 1em; padding-bottom: 1em; padding-left: 1em; padding-left: clamp(1em, 1.5vw, 2em); padding-right: 1em; padding-right: clamp(1em, 1.5vw, 2em); transition: all ease .5s; font-size: 0.9rem; border-top: solid 1px transparent; font-family: var(--common-font); } .subnavigation ul.menu li a { color: var(--white); } .subnavigation ul.menu > li > a { border-radius: 0 0 10px 10px; transition: all ease .5s; } .submenu ul.menu > li.current > a { font-family: var(--bold-font); } .tabnavigation ul.menu > li.current > a { background: var(--midlight-gray); } .subnavigation ul.menu > li.current > a { border-top: solid 1px var(--white); } .subnavigation ul.menu > li:hover > a { background: rgb(197 200 236 / 20%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .tabnavigation ul.menu > li.current > a:before, .tabnavigation ul.menu > li.current > a:after { display: none; } .arrow-left { position: absolute; top: 0; left: 0px; padding: 0 0 0 12px; height: 100%; z-index: 1; width: 20px; color: #fff; background: #0a0a0a; justify-content: flex-start; font-size: 18px; display: flex; align-items: center; border-right: solid 1px #0a0a0a; cursor: pointer; -webkit-box-shadow: 10px 0px 34px 10px rgba(0,0,0,1); -moz-box-shadow: 10px 0px 34px 10px rgba(0,0,0,1); box-shadow: 10px 0px 34px 10px rgba(0,0,0,1); display: none; } .arrow-right { position: absolute; top: 0; right: 0px; padding: 0 0 0 12px; height: 100%; z-index: 1; width: 20px; color: #fff; background: #0a0a0a; justify-content: flex-start; font-size: 18px; display: flex; align-items: center; border-left: solid 1px #0a0a0a; cursor: pointer; -webkit-box-shadow: -10px 0px 30px 10px rgba(0,0,0,1); -moz-box-shadow: -10px 0px 30px 10px rgba(0,0,0,1); box-shadow: -10px 0px 30px 10px rgba(0,0,0,1); display: none; } /* ///// SUB SUBMENU ///// */ .tabnavigation { position: relative; display: block; float: left; background-color: var(--light-gray); z-index: 0; justify-content: center; align-items: center; margin-bottom: -1px; left: 50%; transform: translate(-50%,0); position: absolute; left: 50%; top: 0.3em; transform: translate(-50%,-50%); width: auto; min-width: 15em; flex-wrap: nowrap; display: flex; white-space: nowrap; justify-content: center; z-index: 2; border-radius: 30px; -webkit-box-shadow: 8px 5px 20px 0 rgba(26, 37, 55, 0.2); box-shadow: 8px 5px 20px 0 rgb(26 37 55 / 20%); } .tabnavigation span.separator { display: none; } .tabnavigation ul.menu a { color: var(--border-color); } .tabnavigation ul.menu { position: relative; margin-left: 0; width: 100%; flex-wrap: nowrap; display: flex; border-radius: 30px; overflow: hidden; white-space: nowrap; justify-content: center; } .tabnavigation ul.menu li a { border-right: rgba(36,37,55,0.2) solid 0.5px; } .tabnavigation ul.menu li:last-child a { border-right: rgba(36,37,55,0.2) solid 0px; } /* .tabnavigation ul.menu > li.current > a { -webkit-box-shadow: inset 0px -12px 15px -3px rgba(26,37,55,0.1); -moz-box-shadow: inset 0px -12px 15px -3px rgba(26,37,55,0.1); box-shadow: inset 0px -12px 15px -3px rgba(26,37,55,0.1); } */ .tabnavigation ul.menu > li.current:first-child > a { border-radius: 30px 0px 0px 30px; } .tabnavigation .gamecenter ul li, #submenu ul.menu-child li { width: 33.33333%; flex: 0 33.33333%; text-align: center; } .tabnavigation .subsub2 ul.menu-child li { flex: 0 50%; } .tabnavigation .gamecenter ul li a, .tabnavigation ul.menu-child li a { color: var(--border-color); background: var(--light-gray); padding: 1.2em 1vw; padding: 1.2em clamp(0.3em, 1vw, 1em); width: 100%; width: calc(100% - 1vw); min-width: calc(100% - 0.3em); width: 100%; letter-spacing: 0.1rem; text-transform: uppercase; white-space: nowrap; font-size: min(max(0.7rem, 1.4vw), 2rem); -webkit-box-shadow: inset 15px -15px 15px 0px rgb(0,0,0,0.1); box-shadow: inset 15px -15px 15px 0px rgb(0,0,0,0.1); line-height: 1.25; } .tabnavigation ul.menu li a { display: block; padding-top: 0.7em; padding-bottom: 0.7em; padding-left: clamp(1.2em, 2vw, 3em); padding-right: clamp(1.2em, 2vw, 3em); transition: all ease .5s; font-size: 0.9rem; /* box-shadow: 0px -13px 5px -16px rgba(0, 0, 0, 0.75) inset; -webkit-box-shadow: 0px -13px 5px -16px rgba(0, 0, 0, 0.75) inset; -moz-box-shadow: 0px -13px 5px -16px rgba(0, 0, 0, 0.75) inset; */ } .tabnavigation ul.menu li a:hover { background: rgb(239,240,244); background: linear-gradient(180deg, rgba(239,240,244,1) 0%, rgba(224,225,230,1) 100%); } /* .tabnavigation ul.menu li.current a { background: rgb(30,45,75); background: linear-gradient(0deg, rgba(30,45,75,1) 0%, rgba(42,63,105,1) 100%); color: var(--white); } */ .tabnavigation .gamecenter ul li.current a, #submenu ul.menu-child li.current a { background: var(--white); -webkit-box-shadow: inset 0px 20px 15px -2px rgb(0,0,0,0.1); box-shadow: inset 0px 20px 15px -2px rgb(0,0,0,0.1); } .tabnavigation .gamecenter ul li a:hover, #submenu ul.menu-child li a:hover { background: #dfdfdf; } .tabnavigation .gamecenter ul li.current a:hover, #submenu ul.menu-child li.current a { background: var(--white); color: var(--border-color); } .tabnavigation ul.menu-child { position: relative; display: block; display: flex; z-index: 1; left: 0; width: 100%; overflow: hidden; } ul.menu.nav-child.tabnav-wrap { flex-wrap: wrap; white-space: pre-wrap; } .submenu ul.menu.nav-child.tabnav-wrap { visibility: hidden; opacity: 0; height: 2.2em; } .submenu ul.menu.nav-child.tabnav-wrap li { width: 100%; text-align: center; visibility: hidden; opacity: 0; } .submenu ul.menu.nav-child.tabnav-wrap > li.current:first-child > a { border-radius: 30px; } .tabnavigation ul.menu.nav-child.tabnav-wrap > li.current:last-child > a { border-radius: 30px; } .cd-nav-trigger { position: absolute; display: none; z-index: 3; top: 0; left: 50%; width: 2.2em; height: 2.2em; border-radius: 50%; overflow: hidden; white-space: nowrap; color: transparent; transform: translate(-50%,0); background-color: var(--light-gray); transition: transform 0.3s ease-in-out; } .tabnavigation.is-active .cd-nav-trigger { transform: translate(-50%, calc(-100% - 5px)); } .cd-nav-trigger span { left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-nav-trigger span::after, .cd-nav-trigger span::before { content: ''; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s; } .cd-nav-trigger span, .cd-nav-trigger span::after, .cd-nav-trigger span::before { position: absolute; width: 24px; height: 2px; background-color: var(--border-color2); border-radius: 10px; } .cd-nav-trigger span::before { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); } .cd-nav-trigger span::after { -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } .tabnavigation.is-active .cd-nav-trigger span::before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .tabnavigation.is-active .cd-nav-trigger span::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .tabnavigation.is-active .cd-nav-trigger span { background-color: transparent; } /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- HOME ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .fanzone-new-container { position: relative; display: flex; width: 82%; padding: 5% 9% 0 9%; float: left; } /*-------------------------------------------------- HCAP LIVE ---------------------------------------------------*/ .gamecenter-hidden { margin-top: -10rem; } .swiper-container.swiper11, .swiper-container.swiper12 { overflow: visible; } .swiper11 .swiper-button-prev.swiper-button-disabled, .swiper11 .swiper-button-next.swiper-button-disabled, .swiper12preview .swiper-button-prev.swiper-button-disabled, .swiper12preview .swiper-button-next.swiper-button-disabled { opacity: 0; } .swiper6 .swiper-button-prev, .swiper6 .swiper-button-next, .swiper11 .swiper-button-prev, .swiper11 .swiper-button-next, .swiper12preview .swiper-button-prev, .swiper12preview .swiper-button-next { bottom: auto; top: 50%; background: var(--white); border: solid 0px var(--border-color); width: clamp(35px, 3vw, 50px); height: clamp(35px, 3vw, 50px); border-radius: 50%; margin-left: 0; } .shopware-products .swiper-button-prev, .shopware-products .swiper-button-next { bottom: auto; top: 50%; border: solid 1px var(--border-color); transform: translate(0, -50%); } .shopware-products .swiper-button-next { margin-left: clamp(50px, 5vw, 70px); } .swiper6 .swiper-button-prev { left: 20px; right: auto; transform: translate(0%,-50%); } .swiper6 .swiper-button-next { left: auto; right: 20px; transform: translate(0%,-50%); } .swiper11 .swiper-button-prev { left: -5px; right: auto; transform: translate(-50%,-50%); } .swiper11 .swiper-button-next { left: auto; right: -10px; transform: translate(50%,-50%); } .swiper12preview .swiper-button-prev { left: calc(15% - 2px); right: auto; margin-left: 0; transform: translate(-50%, -50%); } .swiper12preview .swiper-button-next { left: auto; right: calc(8% - 10px); margin-right: 0; transform: translate(50%,-50%); } .swiper6 .swiper-button-prev:after, .shopware-products .swiper-button-prev:after, .swiper11 .swiper-button-prev:after, .swiper12preview .swiper-button-prev:after { filter: invert(1); } .swiper6 .swiper-button-next:after, .shopware-products .swiper-button-next:after, .swiper11 .swiper-button-next:after, .swiper12preview .swiper-button-next:after { filter: invert(1); } a.hcaplive { position: relative; display: block; float: left; width: 100%; border-radius: 10px; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); } a.hcaplive h3 { position: absolute; z-index: 6; color: var(--white); text-transform: uppercase; font-size: min(max(0.9rem, 1vw), 1.1rem); line-height: 1.2; font-family: var(--semibold-font); bottom: 4em; left: 7%; width: 86%; letter-spacing: 1px; } a.hcaplive .button { position: absolute; z-index: 6; left: 7%; bottom: 1em; } a.hcaplive .bgimage { width: 100%; height: 16.8vw; min-height: 19.8em; max-height: 22em; height: clamp(19.8em, 22.8vw, 25em); background-size: cover; background-position: center; background-repeat: no-repeat; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all ease 0.5s; } /*-------------------------------------------------- END HCAP LIVE ---------------------------------------------------*/ /*-------------------------------------------------- CONTENT ---------------------------------------------------*/ /*-------------------------------------------------- RESULTATE ---------------------------------------------------*/ .portfolioFilter { padding: 15px 0; margin: 0 0; } .portfolioFilter a { text-decoration: none; padding: 5px 10px; padding: 5px clamp(10px, 3vw, 25px);; margin: 5px 1px; display: inline-block; border: solid 1px var(--active-blue); border-radius: 30px; transition: all ease 0.5s; width: auto; font-family: var(--bold-font); font-size: 0.9rem; font-size: min(max(0.7rem, 1.1vw), 0.9rem); text-align: center; text-transform: uppercase; hyphens: none; } .portfolioFilter a.current, .portfolioFilter a:hover { position: relative; color: var(--white); background: var(--border-color); transition: all ease 0.5s; } /*-------------------------------------------------- NÄCHSTE SPIELE ---------------------------------------------------*/ #banners { position: relative; display: flex; float: left; width: 90%; padding: 5%; flex-wrap: wrap; justify-content: center; align-items: center; } #banners.gamecenter { padding: 0 5% 5%; } #banners .moduletable, #banners .newsflash { position: relative; width: 100%; max-width: 952px; display: flex; flex-wrap: wrap; justify-content: center; } div#sporttipp, div#sporttipp div, div#sporttipp iframe, div#sporttipp body { height: clamp(7em, 10vw, 14em) !important; border-radius: 10px; } /*-------------------------------------------------- SPIELERSTATISTIKEN ---------------------------------------------------*/ .spielerstatistiken-links { width: 100%; float: left; } /*-------------------------------------------------- GIRLS / JUNIOREN ---------------------------------------------------*/ img.bild-girls { height: auto; object-fit: cover; width: 100%; max-height: none; } img.bild-junioren { height: auto; object-fit: cover; width: 100%; max-height: none; } .staff-junioren h3 { width: 98%; } .junioren-image { height: clamp(12em, 16vw, 16em); width: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; object-fit: cover; object-position: top; } .turnier input { background: #384355; color: var(--white); border: none; padding: 10px; width: calc(100% - 20px); border: none; } select { position: relative; float: left; width: 100%; background: #384355; color: var(--white); border: none; padding: 10px; margin-bottom: 1.5rem; } select:not(:-internal-list-box) { overflow: visible !important; } form.turnier { margin-top: 10%; } #containerS { width: 76%; padding-left: 12%; padding-right: 12%; } .turnier input.send { width: auto; cursor: pointer; color: var(--blue); border-color: var(--blue); } input.send { border: 1px solid var(--border-color); color: var(--border-color); background-color: transparent; padding: 7px 20px 7px 20px; background-size: 300%; background-image: linear-gradient( 120deg , transparent 50%, rgba(70,105,170,1) 0%,rgba(30,45,75,1) 100%); } /*-------------------------------------------------- SQUADRA ---------------------------------------------------*/ .squadra-container { position: relative; display: block; float: left; width: 100%; } .squadra-container h3 { margin-bottom: 1em; } .squadra-image { height: clamp(12em, 20vw, 20em);; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; border-radius: 5px; } .giocatore-head { position: relative; display: block; float: left; width: 100%; height: calc(var(--vh, 1vh) * 90); overflow: hidden; } .giocatore-head .grid.cols-2 { grid-template-columns: 10em 1fr; grid-template-columns: clamp(8em, 12vw, 10em) 1fr; } .grid.cols-2.squadra { grid-template-columns: 4vw 1fr; grid-template-columns: clamp(2.8em, 4vw, 4em) 1fr; margin-top: 1em; } .giocatore-head .gradient-bottom { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#283755+0,283755+25,283755+88,283755+100&0+0,0.6+25,0.9+88,1+100 */ background: -moz-linear-gradient(top, rgba(40,55,85,0) 0%, rgba(40,55,85,0.6) 25%, rgba(40,55,85,0.9) 88%, rgba(40,55,85,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(40,55,85,0) 0%,rgba(40,55,85,0.6) 25%,rgba(40,55,85,0.9) 88%,rgba(40,55,85,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(40,55,85,0) 0%,rgba(40,55,85,0.6) 25%,rgba(40,55,85,0.9) 88%,rgba(40,55,85,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00283755', endColorstr='#283755',GradientType=0 ); /* IE6-9 */ } .parallax-content { background-size: cover; position: relative; background-position: center; background-repeat: no-repeat; width: 100%; height: 120%; z-index: 1; } .parallax-content img { height: 100%; object-fit: cover; } .has-animation { opacity: 0.01; -webkit-transform: translateY(10px); transform: translateY(10px); transform-origin: 50% 0; will-change: transform; } .section-parallax { position: relative; width: 100%; height: 80vw; height: clamp(45em, 80vw, 80vh); overflow: hidden; } video { position: absolute; z-index: 2; width: 100%; height: 100%; object-fit: cover; } .giocatore-head .player-pagination { position: absolute; z-index: 2; bottom: 6%; right: 10%; list-style: none; color: var(--white); text-align: right; z-index: 6; } .player-pagination a.goback { position: relative; font-size: 0.8rem; margin-right: 5px; } .player-pagination a.goback:after { content: '' !important; background-image: url(/static/images/slider-arrow.svg); background-size: contain; background-repeat: no-repeat; transform: rotate(180deg) translateY(50%); -ms-transform: rotate(180deg) translateY(50%); -webkit-transform: rotate(180deg) translateY(50%); width: 16px; height: 9px; top: 50%; left: -25px; position: absolute; } .player-pagination .pagenav { display: flex; list-style: none; margin-top: 7px; justify-content: flex-end; } .pagenav a { border: solid 1px white; width: clamp(35px, 3vw, 50px); height: clamp(35px, 3vw, 50px); display: flex; justify-content: center; align-items: center; border-radius: 50%; } .arrow-prev { transform: rotate(180deg); } .arrow-next { margin-left: clamp(10px, 1vw, 20px); } img.arrow-prev-icon { width: 1rem; height: 0.6rem; } img.arrow-next-icon { width: 1rem; height: 0.6rem; } .giocatore-head .gradient-bottom { position: absolute; bottom: 0; z-index: 3; left: 0; width: 100%; height: 50%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#283755+0,283755+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(70,105,170,0) 0%, rgba(70,105,170,0.6) 40%, rgba(52,77,128,0.75) 60%, rgba(5,22,56,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(70,105,170,0) 0%,rgba(70,105,170,0.6) 40%,rgba(52,77,128,0.75) 60%,rgba(5,22,56,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(70,105,170,0) 0%,rgba(70,105,170,0.6) 40%,rgb(52,77,128,0.75) 60%,rgba(5,22,56,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004669aa', endColorstr='#051638',GradientType=0 ); } .player-pagination a, .player-pagination p { color: var(--white); font-size: min(max(0.65rem, 1.1vw), 1.1rem); } .player-pagination li.previous, .player-pagination li.next { margin-top: 30px; } .primasquadra .pagination { display: none; } .primasquadra a.goback { margin-top: 2em; position: absolute; top: -3em; left: 17px; white-space: nowrap; font-size: 0.8rem; } .primasquadra a.goback:after { content: '' !important; background-image: url(../images/slider-arrow.svg); background-size: contain; background-repeat: no-repeat; transform: rotate(180deg) translateY(50%); -ms-transform: rotate(180deg) translateY(50%); -webkit-transform: rotate(180deg) translateY(50%); width: 16px; height: 9px; top: 50%; left: -25px; position: absolute; } .giocatore-head .silhouette { position: absolute; display: flex; bottom: 0; height: 80%; width: auto; right: 12%; z-index: 2; } .giocatore-head .silhouette img { position: relative; height: 100%; width: auto; margin: 0 auto; z-index: 2; object-fit: cover; } .silhouette.shadow { z-index: 1; } .giocatore-head .silhouette.shadow { height: 80%; margin-right: -2%; opacity: 0.6; } .silhouette.shadow img { filter: grayscale(100%) brightness(0%) blur(30px); -webkit-filter: grayscale(100%) brightness(0%) blur(40px); z-index: 1; } .giocatore-head .player-buttons { position: absolute; right: 10%; bottom: 23%; z-index: 6; display: flex; flex-direction: column; justify-content: flex-end; } .player-buttons a.button-filled.readmore, .player-buttons .button-filled.readmore { margin: 2px 0; } .giocatore-head .button-filled { float: none; } .giocatore-head a.button-filled.shop { position: relative; bottom: auto; right: auto; } .giocatore-head .button-filled.shop:before { content: ""; position: absolute; top: 50%; right: 16px; transform: translate(0, -50%); width: 16px; height: 16px; background-image: url(../images/icons/icon-shop.svg); background-size: contain; background-repeat: no-repeat; } .giocatore-head .button-filled.instagram:before { content: ""; position: absolute; top: 50%; right: 16px; transform: translate(0, -50%); width: 16px; height: 16px; background-image: url(../images/icons/icon-instagram.svg); background-size: contain; background-repeat: no-repeat; } .giocatore-facts { position: absolute; z-index: 6; top: 60%; left: 14%; transform: translate(0, -50%); padding: 1em; border-radius: 15px; } .giocatore-facts p, .giocatore-facts h3, .giocatore-facts h4, .giocatore-facts span { color: var(--white); margin: 0; font-size: clamp(0.9rem, 1vw, 1rem); } .giocatore-name-number { margin-bottom: 0.8em; margin-bottom: clamp(0.8em, 2vw, 2em); } .number { font-size: min(max(3rem, 5vw), 5rem); color: var(--white); font-family: var(--bold-font); line-height: 1; margin-top: -0.05em; margin-left: 0.3em; } .squadra-number { font-size: min(max(1.2rem, 2vw), 2rem); color: var(--red); font-family: var(--bold-font); line-height: 1; margin-top: -0.05em; } .number span { position: absolute; font-size: 0.6em; left: -0.6em; font-family: var(--common-font); } .prename { font-size: min(max(1.0rem, 1.6vw), 1.6rem); color: var(--white); text-transform: uppercase; font-family: var(--bold-font); line-height: 1.2; } .squadra-prename { font-size: min(max(0.9rem, 1.6vw), 1.1rem); color: var(--border-color); text-transform: uppercase; font-family: var(--bold-font); line-height: 1.2; } .name { font-size: min(max(1.6rem, 3.4vw), 3.4rem); color: var(--white); text-transform: uppercase; font-family: var(--bold-font); line-height: 1.2; white-space: nowrap; } .squadra-name { font-size: min(max(1.2rem, 1.5vw), 1.5rem); color: var(--border-color); text-transform: uppercase; font-family: var(--bold-font); line-height: 1.2; white-space: nowrap; } .position { font-size: min(max(0.8rem, 1.3vw), 1.3rem); text-transform: uppercase; color: var(--white); } .giocatore-content { position: relative; display: block; float: left; width: 100%; background: var(--border-color); color: var(--white); } .giocatore-content h3 { color: var(--white); margin-bottom: 1em; margin-bottom: clamp(1em, 2vw, 2em); } .giocatore-content a { color: var(--white); } .giocatore-content .stats-entry { margin-top: 0; border-radius: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; width: 100%; padding: 1em; box-shadow: 8px 8px 15px #121a27, -4px -4px 15px #324057; } .giocatore-content span.stats-value { font-family: var(--bold-font); font-size: clamp(1.4rem, 3vw, 3rem); } .giocatore-content .srcbild img { width: 15vw; min-width: 10em; max-width: 13em; width: clamp(10em, 15vw, 13em); height: auto; } .elitepro a { color: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; display: flex; flex-wrap: wrap; justify-content: center; } .elitepro img { width: 80%; margin-bottom: 0.5em; } #elitepro-frame { width: 90%; padding: 10px; height: 70vh; } .elitepro-frame-container { width: 100%; height: 100%; overflow: auto; } #elitepro-frame iframe { overflow: auto; width: 100%; height: 2000px; } .bild { position: relative; display: block; float: left; width: 100%; height: 26vw; min-height: 15em; max-height: 23em; height: clamp(15em, 26vw, 23em); background-size: cover; background-position: center center; margin: 0; transition: all ease 0.5s; } .bild-full { position: relative; display: block; float: left; width: 100%; height: 26vw; min-height: 15em; max-height: 23em; height: clamp(15em, 26vw, 23em); background-size: cover; background-position: center center; margin: 0; transition: all ease 0.5s; } a.fancybox-player { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-container.swiper6:before { content: ""; position: absolute; width: 12vw; min-width: 6em; max-width: 12em; width: clamp(6em, 12vw, 12em); height: 100%; top: 0; left: 0; z-index: 2; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#283755+0,283755+100&1+0,0+100 */ background: -moz-linear-gradient(left, rgba(40,55,85,1) 0%, rgba(40,55,85,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(40,55,85,1) 0%,rgba(40,55,85,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(40,55,85,1) 0%,rgba(40,55,85,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#283755', endColorstr='#00283755',GradientType=1 ); /* IE6-9 */ } .swiper-container.swiper6:after { content: ""; position: absolute; width: 12vw; min-width: 6em; max-width: 12em; width: clamp(6em, 12vw, 12em); height: 100%; top: 0; right: 0; z-index: 2; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#283755+0,283755+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(40,55,85,0) 0%, rgba(40,55,85,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(40,55,85,0) 0%,rgba(40,55,85,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(40,55,85,0) 0%,rgba(40,55,85,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00283755', endColorstr='#283755',GradientType=1 ); /* IE6-9 */ } .playergallery { overflow: hidden; } /*-------------------------------------------------- FACTS AND FIGURES ---------------------------------------------------*/ .facts-and-figures .overview { width: 100%; height: 100%; min-height: clamp(6em, 8vw, 10em); display: grid; justify-content: center; align-items: center; } .facts-boxed { box-shadow: 8px 8px 15px #d8d9db, -4px -4px 15px #ffffff; } .factsfigure img { height: clamp(1.6em, 2.4vw, 2.4em); width: auto; margin-top: 2rem; margin-bottom: clamp(0em, 1vw, 1em); } .facts-and-figures .srcbild img { max-width: clamp(10em, 14vw, 14em); } .facts-and-figures h3 { width: 98%; margin-left: 2%; } .factsfigure h2 { font-size: clamp(1.2rem, 1.8vw, 1.8rem); text-align: center; } .factsfigure h5 { text-align: center; margin-top: clamp(0em, 1vw, 1em); font-size: clamp(0.7rem, 1.1vw, 1.1rem); } .retired-numbers .overview { width: 100%; height: 100%; min-height: clamp(6em, 8vw, 10em); display: grid; justify-content: center; align-items: center; } .retired-number img { height: clamp(4.5em, 5vw, 5em); width: auto; margin-top: 1rem; } .retired-numbers .srcbild img { max-width: clamp(10em, 14vw, 14em); } .retired-number h5 { text-align: center; margin-bottom: 1rem; } /*-------------------------------------------------- GOTTARDO ARENA ---------------------------------------------------*/ img.gottardo-arena-header-logo { width: clamp(12rem, 24vw, 24rem); } .capazita .grid { border-bottom: solid 1px var(--light-gray); } .shop-info .grid { border-bottom: solid 1px var(--light-gray); } .shop-info a { color:#000000; } .verkaufsstellen-info { border-bottom: solid 1px var(--light-gray); } .verkaufsstellen-text a { color: var(--active-blue); font-family: var(--common-font); font-weight: normal; font-size: min(max(1rem, 1.1vw), 1.1rem); } img.bild { height: clamp(20rem, 26vw, 26rem); object-fit: cover; } .factsfigure p { margin: 0; } .text { float: left; width: 100%; } .belegungsplan { width: 100%; float: left; } .schema-links { width: 100%; float: left; } /*-------------------------------------------------- TICKETS ---------------------------------------------------*/ .tickets-informationen { width: 100%; height: 100%; min-height: clamp(6em, 8vw, 10em); display: grid; justify-content: center; align-items: center; margin-top: 5; margin-bottom: 5; } .tickets-informationen .inhalt:last-child { margin-top: 8rem; } .saisonabo img { width: 100%; height: auto; max-height: none; } .abo-titel { text-transform: none; } /*-------------------------------------------------- SPONSOREN ---------------------------------------------------*/ .overview { position: relative; width: 100%; background: var(--white); border-radius: 10px; } .sponsoren .overview { padding: 1em; width: 100%; height: 100%; min-height: clamp(6em, 8vw, 10em); display: grid; justify-content: center; align-items: center; } .srcbild img { height: 100%; width: 100%; } .sponsoren .srcbild img { max-width: clamp(10em, 14vw, 14em); } .sponsoren h3 { width: 98%; margin-left: 2%; } .sponsorslider-home .swiper-wrapper { display: flex; align-items: center; } .sponsorslider-home .swiper-slide { margin: 10px 0 10px; display: flex; justify-content: center; } .sponsorslider-home .srcbild { filter: grayscale(100%); width: 5em; transition: all ease 0.4s; } .sponsorslider-home .srcbild img { height: auto; max-width: 6em; width: auto; max-height: 3.5em; } .sponsorslider-footer a.button-filled { padding: 7px 20px; margin: 3em 0 0; } .sponsorslider-footer .swiper-container { display: flex; flex-wrap: wrap; justify-content: center; } .sponsorslider-footer .swiper-wrapper { display: flex; align-items: center; } .sponsorslider-footer .swiper-slide { margin: 10px 0 20px; } .sponsorslider-footer .srcbild { width: auto; display: flex; justify-content: center; } .sponsorslider-footer .srcbild img { height: 100%; width: clamp(6em, 10vw, 10em); } /*-------------------------------------------------- NEWS & EINTRAEGE ---------------------------------------------------*/ .newsinfo { position: relative; display: flex; align-items: center; float: left; width: 100%; margin-bottom: 0.5em; } .news-box { border-bottom: solid 1px var(--dark-gray); } .newsliste-info { position: relative; display: flex; align-items: center; float: left; width: 100%; } .date-liste { margin-top: 0.5rem; } .date { padding: 0px 13px; border-radius: 20px; margin-right: 1em; display: table; float: left; font-size: 0.8rem; font-family: var(--bold-font); background: var(--border-color); color: var(--white); } .genre { position: relative; width: auto; display: block; float: left; text-transform: uppercase; font-size: 0.8rem; font-family: var(--bold-font); } .news-title { margin-top: 2rem; font-size: min(max(1.2rem, 1.8vw), 1.8rem); font-family: var(--bold-font); font-weight: normal; } .news-item img { height: clamp(18rem, 24vw, 24rem); object-fit: cover; border-radius: 5px; } .overview-grid { position: relative; float: left; width: 100%; padding: 2em; background: var(--white); border-radius: 10px; } .img-vorschau img{ height: 15em; position: relative; object-position: center; object-fit: cover; border-radius: 10px; } .download-eintraege { grid-template-columns: 1fr clamp(140px, 20vw, 200px); column-gap: 1em; border-bottom: solid 1px var(--dark-gray); width: 100%; } .newsdetail a.button-filled.extern, .newsdetail a.button-filled.readmore { background-color: var(--active-blue); border: solid 1px var(--active-blue); margin-left: 50%; transform: translate(-50%,0%); } /*-------------------------------------------------- BUSINESS ---------------------------------------------------*/ .destinationen a { position: relative; display: block; width: 90%; padding: 5%; height: clamp(14rem, 18vw, 18rem); object-fit: cover; border-radius: 10px; } .destinationen img { height: clamp(14rem, 18vw, 18rem); object-fit: cover; border-radius: 10px; width: 100%; } .destination-titel a { color: var(--active-blue); font-family: 'hcap'; font-size: min(max(1.1rem, 1.25vw), 1.25rem); } .destinationen-box { position: relative; width: 100%; padding: 5% 5%; background: var(--light-gray); border-radius: 10px; float:left; z-index: 2; } .destinationen-video { position: relative; float: left; width: 100%; height: auto; display: flex; z-index: 4; } .instagram-title { font-size: min(max(1.1rem, 1.25vw), 1.25rem); color: var(--border-color); } .text-duke { position: relative; float: left; width: 100%; background: var(--light-gray); border-radius: 10px; z-index: 5; } .text-duke img.paolo { position: absolute; left: 10%; height: 125%; bottom: 0; } img.paolo { position: absolute; left: 0; bottom: 0; height: 110%; width: auto; max-width: none; } #ascona { width:90%; padding: clamp(2em, 4vw, 4em) 5%; } .werbung-header { position: relative; float: left; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; height: clamp(30rem, 40vw, 40rem); background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 10px; z-index: 3; } .werbung-titel .werbung-logo { width: clamp(14rem, 18vw, 18rem); } .werbung-logo { position: absolute; top: 2rem; right: 2rem; width: clamp(6rem, 8vw, 10rem); height: clamp(6rem, 8vw, 10rem); border-radius: 0!important; object-fit: contain; object-position: top right; } .werbung-titel a { color: var(--white); text-transform: none; font-family: var(--bold-font); font-size: min(max(1.6rem, 3vw), 4rem); font-weight: normal; letter-spacing: 1px; line-height: 1.1; } .destinationen-video iframe{ border-radius: 15px; } .list { border-bottom: solid 1px var(--light-gray); } /*-------------------------------------------------- AUKTION ---------------------------------------------------*/ .items-leading.clearfix, .article-leading { position: relative; background: var(--white); width: 80%; float: left; padding: 2em 10%; padding: clamp(2em, 4vw, 4em) 10%; } #pjWrapperPHPAuction_theme1 .pjAs-head .btn-home { text-decoration: none; display: inline-block; background-color: var(--white) !important; color: var(--border-color) !important; border-color: var(--border-color) !important; border-radius: 30px; width: 35px !important; height: 35px !important; transition: all ease 0.5s; width: auto; font-family: var(--bold-font) !important; font-size: 0.9rem !important; font-size: min(max(0.65rem, 1.1vw), 0.9rem); text-align: center; text-transform: uppercase; hyphens: none; background-image: url(../images/icons/pj-home-blue.svg); background-size: 25px; background-position: center; background-repeat: no-repeat; } #pjWrapperPHPAuction_theme1 .input-group-addon { background-color: var(--white); } #pjWrapperPHPAuction_theme1 .pjAs-head .btn-home:hover { background-image: url(../images/icons/pj-home-white.svg); background-color: var(--border-color) !important; } #pjWrapperPHPAuction_theme1 .form-group .form-control { height: 43px; background-color: var(--white) !important; border: 1px solid #bcc1c7 !important; border-radius: 3px; color: #48494a; font-size: 16px; padding-right: 12rem; } #pjWrapperPHPAuction_theme1 .form-control { height: 36px !important; padding: 0px; background-color: var(--white) !important; border: 1px solid var(--border-color) !important; color: var(--border-color); font-size: 14px; } #pjWrapperPHPAuction_theme1 .pjAsCategorySelector { text-decoration: none; margin: 0px 0; padding: 7px 0 !important; width: 100% !important; display: inline-block; border: solid 1px var(--active-blue) !important; border-radius: 30px; transition: all ease 0.5s; width: auto; font-family: var(--bold-font) !important; font-size: 14px !important; text-align: center; text-transform: uppercase; hyphens: none; } #pjWrapperPHPAuction_theme1 .form-group .input-group-addon { display: none; } #pjWrapperPHPAuction_theme1 .input-group-addon { color: #23426e; } #pjWrapperPHPAuction_theme1 .btn-default { background-color: var(--white) !important; color: var(--border-color) !important; border-color: var(--border-color) !important; height: 35px !important; text-decoration: none; margin: 0px 5px; padding: 7px 15px !important; display: inline-block; border: solid 1px var(--active-blue) !important; border-radius: 30px; transition: all ease 0.5s; width: auto; font-family: var(--bold-font) !important; font-size: 14px !important; text-align: center; text-transform: uppercase; hyphens: none; } #pjWrapperPHPAuction_theme1 .btn-default.active { background-color: var(--border-color) !important; color: var(--white) !important; } .pjAs-btn-languages img { width: 18px; } #pjWrapperPHPAuction_theme1 .caret { margin-left: 2px; } #pjWrapperPHPAuction_theme1 .pjAs-btn-languages img { display: inline-block; margin-top: -2px !important; margin-right: 2px !important; } #pjWrapperPHPAuction_theme1 .badge { height: 30px !important; padding: 8px 11px 0 !important; font-size: 0.9rem !important; border-radius: 40px !important; } #pjWrapperPHPAuction_theme1 .pjButton-secondary { background-color: transparent !important; border-color: #192537 !important; font-size: 18px; padding: 0px 30px; font-family: var(--bold-font); color: #192537; text-transform: uppercase; border-radius: 50px; transition: all ease .5s; background-size: 300%; background-image: linear-gradient(120deg, transparent 50%, rgba(70,105,170,1) 0%,rgba(30,45,75,1) 100%); } #pjWrapperPHPAuction_theme1 .pjButton-secondary:hover { color: #ffffff; border: none !important; background-position: 100%; transform: scale(1.05); } #pjWrapperPHPAuction_theme1 .btn-primary { border-color: var(--red) !important; background-color: var(--red) !important; height: 37px !important; border-radius: 40px !important; padding: 8px 20px 0 !important; margin: 5px; font-family: var(--bold-font); font-weight: bold !important; font-size: 0.9rem !important; text-transform: uppercase !important; transition: all ease .5s; background-size: 300%; background-image: linear-gradient(120deg, transparent 50%, rgba(70,105,170,1) 0%,rgba(30,45,75,1) 100%); } #pjWrapperPHPAuction_theme1 .btn-primary:hover { background-color: transparent; border: none !important; background-position: 100%; transform: scale(1.05); } #pjWrapperPHPAuction_theme1 .pjAs-bid-item-bids .pjAs-bid-placed { color: #23426e !important; } #pjWrapperPHPAuction_theme1 .pjAs-bid-item-actions p a{ color: #23426e !important; } #pjWrapperPHPAuction_theme1 .pjAs-bid-item-actions p a:hover { color: #1A2644 !important; } #pjWrapperPHPAuction_theme1 .pjAs-item-bade { border-color: #23426e !important; } #pjWrapperPHPAuction_theme1 .pjAs-login-aside .pjAsMenuItem { color: #23426e !important; } #pjWrapperPHPAuction_theme1 .pjAs-bid-item-name { font-size: 32px !important; } #pjWrapperPHPAuction_theme1 .btn-link { font-size: 15px; border-radius: 5px; padding: 3px 8px 3px; color: #4A545B; } #pjWrapperPHPAuction_theme1 .btn-link:hover { color: #23426e; } #pjWrapperPHPAuction_theme1 .pagination > li > a, #pjWrapperPHPAuction_theme1 .pagination > li > span { border-color: var(--border-color) !important; color: var(--border-color) !important; } #pjWrapperPHPAuction_theme1 .pjAs-head .dropdown-menu, #pjWrapperPHPAuction_theme1 .pagination > .active > a, #pjWrapperPHPAuction_theme1 .btn-home:hover, #pjWrapperPHPAuction_theme1 .pjAs-btn-languages.open .btn-default { color: var(--white) !important; background-color: var(--border-color); } #pjWrapperPHPAuction_theme1 .pagination > li > a:hover, #pjWrapperPHPAuction_theme1 .pagination > li > span:hover { color: var(--white) !important; background-color: var(--active-blue) !important; } #pjWrapperPHPAuction_theme1 .btn:not(.btn-link):not(.btn-close) { border: 1px solid var(--border-color); } #pjWrapperPHPAuction_theme1 .pjButton-secondary { border-color: var(--border-color) !important; font-size: 14px !important; padding: 5px 30px !important; } @media screen and (max-width : 479px) { #pjWrapperPHPAuction_theme1 .pjAs-head .pjAs-btn-languages { right: 15px !important; top: -104px !important; } #pjWrapperPHPAuction_theme1 .pjAsCategorySelector { font-size: 12px !important; } #pjWrapperPHPAuction_theme1 .btn-default { font-size: 12px !important; } } /*-------------------------------------------------- INTRANET ---------------------------------------------------*/ .intranet-buttons { width: 100%; float: left; } ul.sponsoren { float: left; width: 100%; position: relative; list-style-type: none; } form { width: 100%; float: left; position: relative; } p.hint { font-size: 0.8rem; margin-top: 0; } input#photo { margin-bottom: 2rem; } img#user-photo { width: 100%; height: auto; margin-bottom: 1rem; border-radius: 10px; max-width: clamp(18rem, 24vw, 24rem); } .intranet-sponsor img#user-photo { border-radius: 0; } input#photo { margin-bottom: 2rem; float: left; width: 100%; } label.delete-photo { margin-bottom: 1rem; } .intranet-sponsor { position: relative; float: left; background: var(--white); padding: 1rem clamp(1rem, 2vw, 2rem); border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; min-height: clamp(6rem, 12vw, 12rem); } .intranet-sponsor b { hyphens: none; -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; } .intranet-sponsor a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 11; } input#oeffentlicheEMail:disabled { opacity: 0.5; } .checkbox.oeffentliche-email-checkbox { float: left; width: 100%; margin-bottom: 1rem; } ul.errors { float: left; list-style-type: none; } .oeffentliche-mail { position: relative; float: left; width: 100%; } .oeffentliche-mail.mail-hidden { visibility: hidden; } .heads-background-solid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--deep-blue); } .swiper-button-next.swiper-button-next-20, .swiper-button-next.swiper-button-next-21 { left: auto; right: 0; transform: translate(50%, 0); background: var(--white); border: var(--white); box-shadow: 3px 0px 21px -6px rgba(0,0,0,0.29); -webkit-box-shadow: 3px 0px 21px -6px rgba(0,0,0,0.29); -moz-box-shadow: 3px 0px 21px -6px rgba(0,0,0,0.29); } .swiper-button-next-20:after, .swiper-button-next-21:after { background-image: url(/static/images/intranet-arrow.svg); } .swiper-button-prev.swiper-button-prev-20, .swiper-button-prev.swiper-button-prev-21 { right: auto; left: 0; transform: translate(-50%, 0); background: var(--white); border: var(--white); box-shadow: 3px 0px 21px -6px rgba(0,0,0,0.29); -webkit-box-shadow: 3px 0px 21px -6px rgba(0,0,0,0.29); -moz-box-shadow: 3px 0px 21px -6px rgba(0,0,0,0.29); } .swiper-button-prev-20:after, .swiper-button-prev-21:after { background-image: url(/static/images/intranet-arrow.svg); transform: translate(-50%, -50%) rotate(180deg); -ms-transform: translate(-50%, -50%) rotate(180deg); -webkit-transform: translate(-50%, -50%) rotate(180deg); } .swiper-button-prev.swiper-button-prev-21.swiper-button-disabled, .swiper-button-next.swiper-button-next-21.swiper-button-disabled { display: none; } /*-------------------------------------------------- SCHEMA ---------------------------------------------------*/ .schema { position: relative; display: block; float: left; width: 100%; height: auto; } .livello.Ebene0, .livello.Livello0 { transform: translate(0,0); will-change: transform; } .livello.Ebene1, .livello.Livello1 { position: absolute; z-index: 2; width: 80%; height: 100%; top: 5%; left: 9%; transform: translate(0,0); will-change: transform; } .livello.Ebene2, .livello.Livello2 { position: absolute; z-index: 3; width: 90%; height: 100%; top: 0%; left: 4%; transform: translate(0,0); will-change: transform; } .schema-sektoren { position: absolute; z-index: 4; display: block; width: 100%; height: 100%; top: 0; left: 0; float: left; font-family: var(--bold-font); } .spots { width: 100%; height: 100%; } .numero { position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: #558efa; color: var(--white); font-family: var(--bold-font); z-index: 5; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; text-shadow: none; cursor: pointer; } .numero.ping { width: 25px; height: 25px; background-color: #e61f54; -webkit-animation: pulsate-bck 1s ease-in-out infinite both; animation: pulsate-bck 1s ease-in-out infinite both; } /* ---------------------------------------------- * Generated by Animista on 2021-9-16 18:57:6 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation pulsate-bck * ---------------------------------------- */ @-webkit-keyframes pulsate-bck { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulsate-bck { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .sektoren { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .sektor { position: absolute; font-size: 0.8rem; font-family: var(--bold-font); /*text-shadow: 1px 1px 1px rgb(0 0 0 / 80%);*/ line-height: 1; } .hinweise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .hinweis { position: absolute; font-size: 0.7rem; font-family: var(--bold-font); padding: 2px 10px; border-radius: 20px; line-height: 1.5; white-space: nowrap; } .hinweis img { position: absolute; max-width: 12px; max-height: 12px; width: 100%; height: 100%; } img.icon-pfeilLinks { top: 50%; transform: translate(0,-50%); left: -5px; } img.icon-pfeilRechts { top: 50%; transform: translate(0,-50%); right: -5px; } img.icon-pfeilUnten { bottom: -12px; left: 50%; transform: translate(-50%,0); } img.icon-pfeilOben { top: -12px; left: 50%; transform: translate(-50%,0); } .hinweis.icon-pfeilRechts.bg-color { padding: 2px 20px 2px 10px; } .hinweis.icon-pfeilLinks.bg-color { padding: 2px 10px 2px 20px; } .hinweis.icon-pfeilRechts.bg-color img.icon-pfeilRechts { right: 6px; filter: invert(1) brightness(2); max-width: 10px; max-height: 10px; } .hinweis.icon-pfeilLinks.bg-color img.icon-pfeilLinks { left: 6px; filter: invert(1) brightness(2); max-width: 10px; max-height: 10px; } .icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .schema-icon { position: absolute; top: 0; left: 0; width: 15px; height: 15px; } .schemafilter .button { padding: 7px 20px; font-size: min(max(0.65rem, 0.9vw), 0.9rem); cursor: pointer; } .schemafilter .button:before { display: none; } .schemafilter .button.active { color: var(--white); border: solid 1px var(--active-blue); text-decoration: none; background-position: 100%; transform: translateX(0rem); } .legende { position: relative; display: block; float: left; width: 100%; margin-top: 2em; } .legende-livello0, .legende-livello1, .legende-livello2 { width: 100%; display: block; float: left; } .legende-titel { font-family: var(--bold-font); text-transform: uppercase; border-bottom: solid 1px var(--border-color); position: relative; padding: 15px 15px; cursor: pointer; transition: all ease 0.5s; } .legende-titel:after { position: absolute; content: ""; right: 10px; top: 50%; transform: translate(0, -50%) rotate(90deg); width: 16px; height: 9px; background-image: url(../images/right-arrow.svg); } .legende-titel.active:after { transform: translate(0, -50%) rotate(-90deg); } .legende-titel:hover, .legende-titel.active { background-color: var(--midlight-gray); } .legende-text { display: block; margin-bottom: 2em; } .legende-text ul { list-style-type: none; margin-left: 0; } .legende-text li { font-size: 0.9em; margin: 0px 0; padding: 8px 5px; border-bottom: solid 1px var(--dark-gray); transition: all ease 0.5s; cursor: pointer; } .legende-text span { margin-right: 20px; } .legende-text li.active { background: rgb(70,105,170); background: -moz-linear-gradient(left, rgba(70,105,170,1) 0%, rgba(40,55,85,1) 100%); background: -webkit-linear-gradient(left, rgba(70,105,170,1) 0%,rgba(40,55,85,1) 100%); background: linear-gradient(to right, rgba(70,105,170,1) 0%,rgba(40,55,85,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4669aa', endColorstr='#283755',GradientType=1 ); color: var(--white); } .legende-text li:hover { background-color: var(--midlight-gray); } /*-------------------------------------------------- FOOTER ---------------------------------------------------*/ #footer, #footer-home { position: relative; display: block; float: left; width: 100%; padding: 15vw 10% 15vw 10%; padding: clamp(10em, 15vw, 18em) 10% clamp(10em, 15vw, 15em) 10%; background-image: url(/static/images/mountains.svg); background-size: cover; background-position: center top; background-repeat: no-repeat; } #footer-home { background-color: var(--white); } #footer-1, #footer-1-home { position: relative; display: block; float: left; width: 100%; } #footer p, #footer a, #footer li, #footer h4, #footer b, #footer-home p, #footer-home a, #footer-home li, #footer-home h4, #footer-home b { color: var(--white); font-size: 0.9rem; } #footer h4, #footer-home h4 { margin: 8px 0; line-height: 1.5; } #footer a.underline, #footer-home a.underline { text-decoration: underline; } #footer .moduletable, #footer-home .moduletable { float: left; width: 100%; } .social-icons { display: flex; flex-wrap: nowrap; } .social-icons img { height: 20px; width: auto; margin: 0 24px 0 0; } a.footer-logo { float: left; width: 8vw; min-width: 3em; max-width: 7em; width: clamp(3em, 8vw, 7em); height: auto; } img.newsletter-dummy { width: clamp(15em, 20vw, 20em); } /* ///// COPYRIGHT ///// */ #copyright { position: relative; display: flex; justify-content: center; flex-wrap: wrap; text-align: center; float: left; width: 100%; padding: 5em 0 0; } #copyright a { color: var(--white); text-decoration: none; margin: 0 20px 0 0; display: inline-block; } #copyright .copyright-1 a { margin: 0; } #copyright p, #copyright a { color: var(--white); font-size: min(max(0.55rem, 0.8vw), 0.8rem);; text-align: left; } #copyright ul.nav.menu.mod-list { visibility: visible !important; transform: none !important; opacity: 1 !important; } #copyright ul.menu li { width: auto; } .copyright-1 { position: relative; display: block; float: left; width: 100%; } .copyright-2 { position: relative; display: block; float: left; width: 100%; margin: 0; text-align: left; } /*-------------------------------------------------- ADVERTISING ---------------------------------------------------*/ a.banner { position: relative; display: flex; float: left; width: 100%; height: 100%; border-radius: 10px; justify-content: center; align-items: center; color: var(--light-gray); } a.banner.padding { padding: 2em; } a.banner.margins { margin-top: 2em; margin-bottom: 2em; } a.banner img { object-fit: contain; border-radius: 10px; } video.bannervideo { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } a.banner iframe { height: 100%; border-radius: 10px; border: 0em solid var(--light-gray); } /* ////// SWISS DIGITAL HOCKEY BANNER ////// */ div#fanzone-new .moduletable { height: 100%; } .sdh-banner { position: relative; display: block; float: right; width: 100%; height: 100%; flex: 1 70%; background: var(--border-color); border-radius: 10px; } .sdh-banner .sdh-content { position: relative; display: block; float: left; width: 45%; z-index: 4; margin: 0 0 0 6%; top: 50%; transform: translate(0,-50%); } .sdh-banner .sdh-content p { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; color: var(--white); } img.sdh-mockup { position: absolute; z-index: 2; height: 115%; width: auto; right: clamp(1em, 3vw, 20em); top: -5%; } .sdh-banner .sdh-gradient { position: absolute; top: 0; left: 0; width: 70%; height: 100%; border-radius: 10px; z-index: 3; background: rgb(26,37,55); background: linear-gradient(90deg, rgba(26,37,55,1) 0%, rgba(26,37,55,0) 100%); } .sdh-banner .sdh-content span { color: var(--white); font-family: 'hcap-bold'; font-size: min(max(1.8rem, 2.4vw), 2.4rem); line-height: 1.2; display: block; } .sdh-banner span.sdh-title-two { color: #FFCD01; } .sdh-banner .app-store { position: relative; display: block; float: left; width: 100%; display: flex; flex-direction: row; margin-top: 2em; } img.app-store-img { width: clamp(8em, 10vw, 10em); height: auto; margin-right: 1em; } /* ////// END SWISS DIGITAL HOCKEY BANNER ////// */ /* ////// HCAP CONNECT BANNER ////// */ a.hcap-connect-banner { position: relative; display: flex; align-items: center; float: right; width: 100%; height: 100%; flex: 1 70%; background: #1B325E; background: linear-gradient(0deg, rgba(27, 50, 94, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(27, 50, 94, 1) 100%); border-radius: 10px; } .hcap-connect-banner .hcap-connect-content { position: absolute; display: block; float: left; width: 45%; z-index: 4; margin: 0 0 0 6%; padding: 2em; top: 50%; transform: translate(0,-50%); background: var(--white); background-image: url(/static/images/advertising/hcap_connect/icon-hcap-connect.svg); background-size: 50%; background-position: center; background-repeat: no-repeat; border-radius: 10px; } .hcap-connect-banner .hcap-connect-content h2, .hcap-connect-banner .hcap-connect-content span { font-size: min(max(1.4rem, 2.5vw), 2.5rem); margin-bottom: 0; hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; text-transform: uppercase; } img.hcap-connect-mockup { position: absolute; z-index: 2; height: 115%; width: auto; /* right: clamp(1em, 1vw, 20em); */ right: -3rem; bottom: 0; } img.hcap-connect-logo { position: relative; width: clamp(10em, 15vw, 15em); height: auto; margin: 0 auto; display: block; margin-top: 2em; } /* ////// END HCAP CONNECT BANNER ////// */ /* ////// ASCONA LOCARNO DESTINATION PARTNER ////// */ .destinationpartner { width: 100%; height: clamp(28em, 40vw, 40em); position: relative; float: left; } img.dp-bg { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } img.dp-logo { position: absolute; top: 2rem; right: 2rem; width: clamp(6rem, 8vw, 10rem); height: clamp(6rem, 8vw, 10rem); border-radius: 0!important; object-fit: contain; object-position: top right; } img.dp-portrait { position: absolute; left: 0; bottom: 0; height: 110%; width: auto; object-fit: cover; } .dp-text { position: absolute; color: var(--border-color); bottom: 2em; right: 2em; width: 40%; background: var(--white); border-radius: 10px; padding: clamp(1.5em, 2vw, 2.5em); } .destinationpartner h2 { font-size: min(max(1.4rem, 2.5vw), 2.5rem); margin-bottom: 1rem; hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; } /* ////// END ASCONA LOCARNO DESTINATION PARTNER ////// */ /* ////// MYSPORTS BANNER ////// */ a.banner iframe.mysports { width: 100%; height: auto; aspect-ratio: 5.36 / 1; } /* ////// SOCIALHUB ////// */ .socialhub h2 { text-align: center; margin-bottom: clamp(0em, 1vw, 1em); } /* ////// END SOCIALHUB ////// */ /* ////// MULTIMEDIA ////// */ .multimedia { background-color: var(--border-color); overflow: hidden; height: clamp(45em, 80vh, 55em); } .multimedia .ytp-large-play-button { display: none !important; } .multimedia h2 { color: var(--white); position: absolute; z-index: 6; top: 4em; left: 50%; font-family: 'hcap-semibold'; font-size: 1rem; letter-spacing: 20px; transform: translate(-50%,0); white-space: nowrap; } .multimedia .swiper12 .swiper-slide { overflow: hidden; } .multimedia .swiper12preview { position: absolute; z-index: 2; bottom: 3em; height: clamp(9em, 8vw, 10em); overflow: visible; } .multimedia .swiper12preview .swiper-slide img { border-radius: 10px; -webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.6); -moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.6); box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.6); height: 10em; object-fit: cover; } .multimedia .swiper12preview .swiper-slide { transition: all ease 0.5s; background-color: var(--border-color); } .multimedia .swiper12preview .swiper-slide img { opacity: 0.5; transition: all ease 0.5s; } .multimedia .swiper12preview .swiper-slide:hover img { opacity: 1; } .multimedia .swiper12preview .swiper-slide.swiper-slide-thumb-active img { opacity: 1; transform: scale(1.1); } .multimedia .swiper12preview .swiper-slide.swiper-slide-thumb-active { -webkit-box-shadow: 0px 0px 155px 85px rgb(125 157 235 / 40%); -moz-box-shadow: 0px 0px 155px 85px rgb(125 157 235 / 40%); box-shadow: 0px 0px 155px 85px rgb(125 157 235 / 40%); z-index: -1; } .multimedia .swiper12 .swiper-slide .multimedia-bg { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; float: left; transform: scale(1.07); -moz-transform: scale(1.07); -webkit-transition: opacity .6s ease-in-out, transform 2s ease .7s; -moz-transition: opacity .6s ease-in-out, transform 2s ease .7s; transition: opacity .6s ease-in-out, transform 2s ease .7s; } .multimedia .swiper12 .swiper-slide-active .multimedia-bg { opacity: 1; transform: scale(1); -moz-transform: scale(1); } .multimedia .swiper12preview .swiper-slide { border-radius: 10px; overflow: hidden; } .multimedia .swiper12preview span { position: absolute; z-index: 6; color: var(--white); text-transform: uppercase; font-size: 0.8rem; line-height: 1.2; font-family: var(--semibold-font); bottom: 1em; left: 7%; width: 86%; letter-spacing: 0; } .multimedia .swiper12 .slide-content { position: absolute; z-index: 6; left: 50%; top: 45%; transform: translate(-100%, -50%); } .multimedia .swiper12 h3 { font-family: 'hcap-bold'; letter-spacing: 0; color: var(--white); font-size: 1.2rem; } .videopreview-frame { position: relative; z-index: 2; cursor: pointer; width: 100%; height: 100%; } @-webkit-keyframes scaleIn { to { transform: scale(1); } } @keyframes scaleIn { to { transform: scale(1); } } @-webkit-keyframes slideIn { to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes slideIn { to { opacity: 1; transform: translate3d(0, 0, 0); } } .play-toggle { position: absolute; cursor: pointer; top: 45%; left: 50%; transform: translate(calc(100% - 32px), -50%); z-index: 6; } .play-toggle .play-circle, .play-toggle .play-circle:before, .play-toggle .play-circle:after, .play-toggle span { display: inline-block; vertical-align: middle; } .play-toggle span { color: var(--white); margin-left: 1rem; font-size: 1.2rem; line-height: 1.2; transition: transform 350ms ease; } .play-toggle span i, .play-toggle span strong { display: inline-block; opacity: 0; transform: translate3d(-1rem, 0, 0); } .swiper-slide-active .play-toggle span i, .swiper-slide-active .play-toggle span strong { -webkit-animation: slideIn 1400ms ease forwards; animation: slideIn 1400ms ease forwards; } .play-toggle span i { color: rgba(255, 255, 255, 0.7); -webkit-animation-delay: 700ms; animation-delay: 700ms; } .play-toggle span strong { font-size: 1.25em; letter-spacing: 1px; -webkit-animation-delay: 750ms; animation-delay: 750ms; } .play-toggle .play-circle, .play-toggle .play-circle:before, .play-toggle .play-circle:after { position: relative; height: 4rem; width: 4rem; background: white; border-radius: 50%; transform: scale(0); } .swiper-slide-active .play-toggle .play-circle, .swiper-slide-active .play-toggle .play-circle:before, .swiper-slide-active .play-toggle .play-circle:after { -webkit-animation: scaleIn 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 500ms forwards; animation: scaleIn 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 500ms forwards; } .play-toggle .play-circle:before, .play-toggle .play-circle:after { position: absolute; top: 50%; left: 50%; content: ""; opacity: 0.04; } .play-toggle .play-circle:before { height: 8rem; width: 8rem; margin-left: -4rem; margin-top: -4rem; } .play-toggle .play-circle:after { height: 12rem; width: 12rem; margin-left: -6rem; margin-top: -6rem; } .play-toggle .play-icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--white); border-radius: 50%; box-shadow: 0 3px 24px rgba(0, 0, 0, 0.3); transition: transform 350ms ease; } .play-toggle .play-icon:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); width: 0; height: 0; border-top: 10px solid transparent; border-left: 15px solid var(--border-color); border-bottom: 10px solid transparent; } .play-toggle:hover .play-icon { transform: scale(1.1); } .play-toggle:hover span { transform: translateX(0.3rem); } .multimedia .swiper12 .videopreview { position: absolute; z-index: 6; width: 100%; height: 100%; top: 0; left: 0; } .youtube-video-place iframe { height: 100%; } .videopreview-frame.active .youtube-video-place { height: clamp(20em, 35vh, 35em); width: 70vh; max-height: 30em; left: 50%; transform: translate(-50%, 0); top: 11em; border-radius: 20px; overflow: hidden; z-index: 6; } .videopreview-frame.active .slide-content { display: none; } .videopreview-frame.active .play-toggle { display: none; } .play-youtube-video { height: clamp(15em, 20vw, 20em); border-radius: 15px; background-size: cover; background-position: center; } .multimedia .home-team, .multimedia .guest-team { border-radius: 15px; display: flex; justify-content: center; align-items: center; padding: 10px clamp(10px, 2vw, 20px); background: rgb(255 255 255 / 100%); } .multimedia .home-team img, .multimedia .guest-team img { min-height: 45px; max-height: 50px; height: auto; width: clamp(45px, 2vw, 50px); } .multimedia .gamescore { position: relative; color: var(--white); font-size: 2rem; } .multimedia .gamedate { text-align: center; color: var(--white); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; } .multimedia .game-details { min-width: 21em; padding: 10px 20px 30px 20px; background: rgb(16 20 35 / 45%); border-radius: 15px; border: solid 1px #758195; text-align: left; } .multimedia .game-board { display: flex; justify-content: center; align-items: center; gap: 2em; margin-top: 1em; margin-bottom: 1em; } .multimedia a.button-filled.gamerecap { left: 50%; transform: translate(-50%,5px); border: solid 1px #758195; } .multimedia a.button-filled.gamerecap:before { filter: invert(1) brightness(2); } .video-caption { width: 400px; text-align: right; font-size: 2rem; color: var(--white); font-family: 'hcap-bold'; font-style: italic; line-height: 0.8; max-width: 90%; margin: 0 auto; } .video-caption h4 { font-size: 2rem; color: var(--white); font-family: 'hcap-bold'; font-style: italic; display: inline; } .video-caption p { color: var(--white); } /* ////// END MULTIMEDIA ////// */ /* ////// SHOP API ////// */ .shop { background-color: var(--white); } .shop h2 { z-index: 6; font-family: 'hcap-semibold'; font-size: 1rem; letter-spacing: 20px; text-align: center; margin-bottom: 3em; white-space: nowrap; } .shopware-products { position: relative; } .shopware-products .swiper8preview { position: absolute; z-index: 2; top: 0; height: auto; overflow: visible; width: 25%; left: 0; height: 100%; } .shopware-products .swiper8 { width: 75%; margin-left: 25%; } .shopware-products img { width: 100%; height: 30em; object-fit: cover; float: left; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all ease 0.5s; border-radius: 10px; } .shopware-products .swiper8 .swiper-slide { background: rgb(255,255,255); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(231,231,231,1) 100%); border-radius: 10px; opacity: 1; } .shopware-products .swiper8 .swiper-slide.swiper-slide-active { opacity: 1; } .shopware-products .swiper8 .swiper-slide img { mix-blend-mode: multiply; } .shopware-products h3 { text-transform: uppercase; font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.2; font-family: var(--semibold-font); letter-spacing: 0; transition: all ease 0.5s; width: 18vw; margin-top: 2em; } .shopware-products a.button-filled.shopnow { position: absolute; z-index: 8; right: 0; top: 50%; transform: translate(50%,-50%); margin: 0; } /* ////// END SHOP API ////// */ /* ////// NEWSLETTER ////// */ .newsletter { background-color: var(--border-color); border-radius: 15px; } .newsletter-content { position: absolute; top: 50%; left: 15%; right: 15%; z-index: 2; transform: translate(0, -50%); text-transform: uppercase; margin-top: -10px; } .newsletter-content p { position: relative; display: table; color: var(--white); font-family: var(--bold-font); font-size: 2rem; font-size: min(max(2rem, 5vw), 5rem); line-height: 1; } .newsletter-image { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-size: cover; background-position: center; border-radius: 10px 0px 0px 10px; } .newsletter h4 { margin-bottom: 1em; } .newsletter label, .newsletter h4, .newsletter p { color: var(--white); } .newsletter input#fname, .newsletter input#lname, .newsletter input#email { background: #384355; color: var(--white); border: none; padding: 10px; width: calc(100% - 20px); } .newsletter fieldset { border: none; padding: 0; } .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right { background-image: none; } /* ////// END NEWSLETTER ////// */ /* ///// NEWSLETTER POPUP ///// */ #newsletter-popup{ align-items: center; margin: 70px auto; background: var(--border-color); border-radius: 5px; width: 40%; position: relative; } .newsletter-overlay{ position: fixed; align-items: center; top: 0; bottom: 0; left: 0; right: 0; background: rgba(4, 16, 38, 0.8); transition: opacity 500ms; visibility: visible; opacity: 1; z-index: 99999; display: none; } #newsletter-popup .popup-close { color: #fff; height: 20px; width: 20px; position: absolute; top: 15px; right: 20px; text-align: center; text-decoration: none; line-height: 30px; font-family: var(--title-font); z-index: 2; } .newsletter-in { padding:30px 40px 40px; } #newsletter-popup img.popup-img { height: 100%; object-fit: cover; } #newsletter-popup label { color: var(--white); } #newsletter-popup input { margin-bottom: 10px; } #newsletter-popup h3 { color: var(--white); margin-bottom: 1em; font-family: var(--semibold-font); } @media screen and (max-width: 1366px){ #newsletter-popup{ width: 50%; } } @media screen and (max-width: 992px){ #newsletter-popup{ width: 70%; } .newsletter-in { padding: 20px 20px 30px; } } @media screen and (max-width: 600px){ #newsletter-popup{ width: 95%; } #newsletter-popup img.popup-img { height: 12em; object-position: 50% -90px; } } /* ////// END NEWSLETTER POPUP ////// */ /* ////// NEWSLETTER OVERLAY ////// */ #newsletter { position: relative; float: left; display: block; width: 100%; padding-left: 0; padding-right: 0; margin-top: 2em; margin-top: clamp(3em, 5%, 10em); margin-bottom: 4em; margin-bottom: clamp(2em, 5%, 10em); background-color: var(--border-color); border-radius: 10px; overflow: hidden; } #newsletter-overlay { position: fixed; width: 100%; height: 100%; padding: 0 10%; background: var(--border-color); z-index: 1007; justify-content: center; align-items: center; display: none; top: 0; } #newsletter-overlay.show { display: flex; } #newsletter label, #newsletter h4, #newsletter p { color: var(--white); } #newsletter h2 { color: var(--white); font-size: 1.2rem; margin-bottom: 30px; } #newsletter h4 { margin-bottom: 1em; } .newsletter .col-4-2 { padding: 20%; } .newsletter .col-1-3 { position: relative; min-height: clamp(15em, 36vw, 36em); } .newsletter-content { position: absolute; top: 50%; left: 15%; z-index: 2; transform: translate(0, -50%); text-transform: uppercase; margin-top: -10px; } .newsletter-content p { position: relative; display: table; color: var(--white); font-family: var(--bold-font); font-size: 2rem; font-size: min(max(2rem, 5vw), 5rem); } /* .newsletter-content p:after { content: ""; position: absolute; bottom: clamp(2px, 0.5vw, 5px); height: clamp(5px, 0.7vw, 10px); width: 100%; background: white; left: 0; } */ .newsletter input#fname, .newsletter input#lname, .newsletter input#email { background: #384355; color: var(--white); border: none; padding: 10px; width: calc(100% - 20px); } img.closeX { position: absolute; right: 2em; top: 4em; width: 1.4em; cursor: pointer; z-index: 2; } .success { display: none; position: relative; float: left; width: 100%; color: var(--white); padding: 1em; border-radius: 10px; background-color: var(--green); } /* ////// END NEWSLETTER OVERLAY ////// */ /* ////// PLAYER SLIDER ////// */ .player-slider { background: var(--border-color); } .player-slider h2 { z-index: 6; letter-spacing: 11px; font-family: 'hcap-semibold'; color: var(--white); font-size: 1rem; letter-spacing: 20px; text-align: center; margin-bottom: 3em; } .player-slider img { /* position: absolute; */ object-fit: contain; width: auto; object-position: top center; float: left; height: auto; height: clamp(35em, 40vw, 40em); /* top: 50%; */ /* left: 50%; */ /* transform: translate(-50%,-50%); */ } .player-slider .swiper13:before { content: ""; position: absolute; top: 0; left: 0; width: 20%; height: 100%; z-index: 5; background: rgb(26,37,55); background: linear-gradient(90deg, rgba(26,37,55,1) 0%, rgba(26,37,55,0) 100%); } .player-slider .swiper13:after { content: ""; position: absolute; top: 0; right: 0; width: 20%; height: 100%; z-index: 5; background: rgb(26,37,55); background: linear-gradient(-90deg, rgba(26,37,55,1) 0%, rgba(26,37,55,0) 100%); } .swiper13 .swiper-slide:before { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 30%; z-index: 2; background: rgb(26,37,55); background: linear-gradient(0deg, rgba(26,37,55,1) 0%, rgba(26,37,55,1) 15%, rgba(26,37,55,0) 100%); } .swiper13 .swiper-slide:after { content: ""; position: absolute; bottom: 0; left: 0; width: 400%; height: 300%; z-index: 2; background: rgb(36, 37, 55); background: radial-gradient(circle, rgba(36, 37, 55, 1) 20%, rgba(36, 37, 55, 0) 40%, rgba(36, 37, 55, 0%) 60%); transform: translate(-37%, 60%); } .slider-player { display: flex; justify-content: center; } .slider-player-info { position: absolute; z-index: 3; left: 1em; bottom: 3em; width: 100%; } .slider-player-number { position: absolute; z-index: 3; bottom: 0; right: 0.5em; font-size: clamp(3rem, 6vw, 6rem); color: var(--red); font-family: 'hcap-semibold'; } .slider-player-name { position: absolute; z-index: 3; font-family: 'hcap-bold'; bottom: 1.5em; left: 0; font-size: 3rem; line-height: 1; color: var(--white); text-transform: uppercase; } .slider-player-surname { position: absolute; z-index: 3; font-family: 'hcap-bold'; bottom: 4em; left: 0; font-size: 2rem; line-height: 1; color: var(--white); } .player-slider a.button-filled { position: absolute; z-index: 3; bottom: 1em; left: 0; } .player-news h5 { color: var(--white); } .player-news img { border-radius: 15px; } .player-news .date { background: var(--active-blue); } /* .player-slider .swiper-container { overflow: visible; } .player-slider .swiper-slide { transform: scale(1.3); transition: all ease 0.5s; } .player-slider .swiper-slide.swiper-slide-active { transform: scale(2.5); z-index: 2; } .player-slider .swiper-slide.swiper-slide-prev, .player-slider .swiper-slide.swiper-slide-next { transform: scale(2); } .player-slider .swiper-slide.swiper-slide-next { z-index: 1; } */ /* ////// END PLAYER SLIDER ////// */ /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// END INDIVIDUAL STYLE ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// RESPONSIVE ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media screen and (min-width : 2300px) { img.sdh-mockup { right: 10vw; } } @media screen and (min-width : 1901px) { span.label-neu { left: 12%; } .counter-wrapper .count .sec h2 { font-size: 1.5em; margin-top: 0.5em; } .counter-wrapper .count { gap: 1em; } } @media screen and (min-width : 1801px) { img.sdh-mockup { right: 7vw; } } @media screen and (max-width : 1800px) { .fanzone-content { margin: 15% 5%; } #fanzone-new .fanzone-overlay { width: 70%; } #shop { width: 95%; padding: 4em 0 4em 5%; padding: clamp(3em, 10%, 15em) 0 clamp(4em, 10%, 15em) 5%; } } @media screen and (max-width : 1700px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } @media screen and (max-width : 1600px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ .fastlinks { margin: 0 5.4em 0 0; } .fastlinks ul.menu a { padding: 3px 36px 3px 15px; margin: 0 7px; font-size: 0.8rem; } .fastlinks ul.menu a.button-shop { padding: 2px 36px 2px 15px; } .fastlinks .button-filled { padding: 6px 36px 6px 15px; font-size: 0.8rem; } .fastlinks a.button-shop:before { right: 13px; width: 13px; height: 13px; } .fastlinks a.button-tickets:before { right: 14px; width: 14px; height: 12px; } .fastlinks a.button-red:before { right: 15px; width: 15px; height: 15px; } a.button-filled.readmore:before, .button-filled.readmore:before { right: 13px; } .language-switcher { margin: 0 1em 0 0; } .button-filled.fanzone-fastlink:before { right: 11px; } /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ .newscaption { width: 55em; margin-left: 5.5em; } .swiper-controls { margin-left: -31em; } .swiper1preview .swiper-wrapper .swiper-slide { flex: 1 100%; } /* ///// C0NTENT ///// */ } @media screen and (max-width : 1500px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } @media screen and (max-width : 1400px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ .swiper-controls { margin-left: -27em; } .newscaption { width: 51em; } .swiper12preview .swiper-button-next { right: calc(12% - 15px); } .swiper12preview .swiper-button-prev { left: calc(0% - 10px); } /* ///// STARTSEITE ///// */ .dp-text { width: 60%; } /* ///// C0NTENT ///// */ .giocatore-head .silhouette { right: 6%; } .giocatore-head .player-buttons { right: 3%; } } @media screen and (max-width : 1300px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ .headnav { position: absolute; z-index: 1006; right: 2em; } .logo span { white-space: pre-wrap; left: 0; transform: none; width: 75px; margin-top: 1vw; } .top-bar { height: 42px; } .top-bar-item span { font-size: 12px; } .gottardo-arena img { height: 26px; margin: 0 14px; } .top-bar-item img { height: 26px; } .fastlinks ul.menu a { padding: 3px 34px 3px 13px; margin: 0 6px; } .fastlinks .button-filled { margin: 0 6px; } div.mod-languages li { margin-left: 3px; margin-right: 3px; } .language-switcher div.mod-languages ul.lang-inline li:first-child:after { margin-left: 5px; } .header_fadein { top: 42px; } .header_fadein.hidden { -webkit-transform: translateY(calc(-100% - 42px)); -moz-transform: translateY(calc(-100% - 42px)); -ms-transform: translateY(calc(-100% - 42px)); -o-transform: translateY(calc(-100% - 42px)); transform: translateY(calc(-100% - 42px)); } .language-switcher li a { width: 20px; height: 20px; } .language-switcher li a.active { margin: 0; } /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ .swiper11 .swiper-button-next { right: calc(15% - 10px); } /* ///// C0NTENT ///// */ .squadra-image { height: 30vw; min-height: 10em; max-height: 30em; height: clamp(10em, 30vw, 30em); } /* ///// SCHEMA ///// */ .numero { width: 15px; height: 15px; font-size: 0.65rem; } .sektoren.presse, .sektorCurva, .eingang, .sektoren.sektorGuest, .sektoren.vip { font-size: 0.6rem; } .sektoren { font-size: 0.7rem; } .eingang.eingang1 { top: 29%; left: -4%; } .eingang:after { right: -14px; width: 10px; height: 7px; } .eingang.eingang2:after, .eingang.eingang4:after { left: -15px; } .eingang.eingang3:after { top: -10px; } .eingang.eingang2 { top: 10%; left: 86%; } .sektorCurva { top: 23%; left: 12%; } .sektorF { top: 17%; } } @media screen and (max-width : 1200px) { /* ///// C0NTAINER AND T_YPO ///// */ .swiper-button-next, .swiper-rtl .swiper-button-prev { margin-left: 50px; } /* ///// H3ADER ///// */ .language-switcher a { font-size: 0.8rem; } /* ///// N@VIGATION ///// */ .navigation { padding: 20px 3em; } .menu-adresse { left: 3em; } /* ///// SL1DER ///// */ .date { font-size: 0.7rem; } /* ///// STARTSEITE ///// */ .newsletter .col-4-2 { padding: 10%; } /* ///// C0NTENT ///// */ } @media screen and (max-width : 1100px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ .header { height: 85px; } .header_fadein a.logo { left: 1em; } .header_fadein .sticky { right: clamp(1rem, 5vw, 5rem); } .navigationWrap .sticky { right: clamp(1rem, 5vw, 5rem); } /* ///// N@VIGATION ///// */ .navigation { width: 0%; padding: 0; left: auto; right: 0; transform: translate(114%, 0px); -webkit-box-shadow: -12px 0px 20px 0px rgba(0,0,0,0.4); -moz-box-shadow: -12px 0px 20px 0px rgba(0,0,0,0.4); box-shadow: -12px 0px 20px 0px rgb(0,0,0,0.4); height: 100%; overflow-y: scroll; overflow-x: hidden; z-index: 1000; } .navigation .navigation-container { position: absolute; top: 0; width: 100%; height: 100%; transform: none; } .navigation ul.menu li { width: 100%; max-width: 100%; } .navigation ul.menu { padding: 9rem 20px 10%; } .navigation ul.menu li a, .navigation ul.menu li span.separator { width: 100%; display: block; padding: 8px; border-bottom: solid 1px var(--border-color2); font-weight: normal; } ul.menu li span.separator:before { right: 0; } .slider-menu { display: none; } .navigation ul.menu li ul.menu-child { right: 0; left: auto; display: block; visibility: visible; height: 100vh; padding: 10rem 2rem 10%; max-width: none; background: var(--border-color); z-index: 3; visibility: visible; opacity: 1; transform: translate(calc(100% + 20px), 0); -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4); } .navigation ul.menu li ul.menu-child.open { transform: translate(0, 0); } .navigation ul.menu li > ul.menu-child { width: calc(100% - clamp(20px, 1vw, 70px)); background: #202d42; } .navigation ul.menu li > ul.menu-child > li > ul.menu-child { left: auto; width: calc(100% - clamp(20px, 1vw, 70px)); background: #222f44; } span.navigoback { display: block; } .protectarea { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100vh; background: var(--border-color); opacity: 0.8; z-index: 2; transition: all ease 0.5s; display: none; } .protectarea.active { display: block; } .menu-socialmedia.mobile { display: block; } .menu-socialmedia.desktop { display: none; } .social-icons img { height: 13px; } .menu-socialmedia h4 { font-size: 0.65rem; } .menu-adresse { position: relative; width: 88%; left: auto; bottom: auto; margin-left: 28px; } /* ////// NAVIGATION ACCORDION ///// */ nav ul li ul { position: relative; display: block; visibility: visible; width: 100%; overflow: auto; float: left; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; transition: none; } /* ////// END NAVIGATION ACCORDION ///// */ /* ////// NAVIGATION LAYERS ///// */ /* nav ul li ul { position: fixed; top: 0; left: auto; height: 100vh; padding: 145px 35px 2em; background: var(--white); right: -120%; z-index: 11; overflow-y: auto; transform: none; visibility: visible; opacity: 1; -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.05); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.05); } */ /* ////// END NAVIGATION LAYERS ///// */ .navigationwrap_bg { position: fixed; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 999; background-color: rgba(0, 0, 0, 0.8); display: block; opacity: 0; visibility: hidden; } /* ///// SL1DER ///// */ .swiper11 .swiper-button-next { right: calc(21% - 10px); } /* ///// STARTSEITE ///// */ .slider-player-name { bottom: 2.5em; font-size: 2rem; } .slider-player-surname { bottom: 4.8em; font-size: 1.5rem; } .player-slider a.button-filled { bottom: 3em; } /* ///// C0NTENT ///// */ .text-duke img.paolo { position: absolute; left: 5%; height: 100%; bottom: 0; } } @media screen and (max-width : 1024px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ .swiper-container.swiper1preview { width: 85%; } .swiper1preview .swiper-slide { padding: 5px 9px; margin: 0 5px; } #sponsorslider { width: calc(94% - 36vw); width: calc(94% - clamp(24em, 36vw, 50em)); } .newscaption { width: calc(90% - 11em); margin-left: 4em; } .swiper-controls { margin-left: -39%; } .swiper-pagination .slices { font-size: 2.0rem; margin-right: 1.2em; } /* ///// C0NTENT ///// */ } @media screen and (max-width : 900px) { /* ///// C0NTAINER AND T_YPO ///// */ .block-container, .overview-grid { padding: 1em; } .bild-frame, .bild-frame .bild { height: 20em; } /* ///// H3ADER ///// */ .fastlinks { margin: 0 80px 0 0; } .fastlinks ul.menu a.button-shop { display: none; } .language-switcher { margin: 0 1em 0 0; } /* ///// N@VIGATION ///// */ .header_fadein .menu-wrapper .menu-text { display: none; } /* ///// SL1DER ///// */ .swiper11 .swiper-button-prev { right: calc(21% - 10px); left: auto; transform: translate(50%, calc(-50% - 55px)); } /* ///// STARTSEITE ///// */ .sdh-banner .sdh-content { position: relative; width: 50%; margin: 0; top: auto; transform: none; padding: 10% 6%; } .hcap-connect-banner .hcap-connect-content { width: 40%; position: relative; top: auto; transform: none; padding: 10% 6%; margin: 4em 2em; } img.hcap-connect-mockup { right: -1rem; } .dp-text { position: relative; bottom: auto; right: auto; width: 90%; padding: clamp(1.5em, 2vw, 2.5em); margin: 0 auto; transform: translate(0,-50%); } .destinationpartner { margin-bottom: 10em; } .play-toggle { top: auto; left: 50%; transform: translate(-50%, 100%); bottom: 50%; margin-bottom: -2em; } .play-toggle .play-circle, .play-toggle .play-circle:before, .play-toggle .play-circle:after { height: 3rem; width: 3rem; } .play-toggle .play-circle:after { height: 8rem; width: 8rem; margin-left: -4rem; margin-top: -4rem; } .play-toggle .play-circle:before { height: 6rem; width: 6rem; margin-left: -3rem; margin-top: -3rem; } .play-toggle span { font-size: 1rem; } .multimedia .swiper12 .slide-content { transform: translate(-50%, -50%); top: auto; bottom: 50%; } .video-caption { text-align: center; } .video-caption h4 { font-size: 1.5rem; } .videopreview-frame.active .youtube-video-place { width: 90%; height: 15em; top: 10em; } .shopware-products .swiper8preview { position: relative; top: auto; height: auto; overflow: visible; width: 100%; left: auto; height: 100%; } .shopware-products a.button-filled.shopnow { display: none; } .shop { overflow: hidden; } .shopware-products .swiper8 { overflow: visible; } .shopware-products h3 { width: 100%; display: none; } .shopware-products .swiper8 { width: 100%; margin-left: 0; } .shopware-products .swiper-button-prev, .shopware-products .swiper-button-next { top: auto; bottom: -4.5em; transform: translate(0,0); } .swiper12preview .swiper-button-next { right: calc(15% - 9px); } .swiper12preview .swiper-button-prev { left: calc(30% - 14px); } .multimedia .game-details { transform: translate(0,6em); } /* ///// C0NTENT ///// */ #left-col { display: none; } #main-col { width: 100%; } .text-duke img.paolo { left: 0; } .giocatore-head .silhouette { width: 100%; right: auto; } .giocatore-head .player-pagination { bottom: 1em; left: auto; right: 1em; } .giocatore-facts { top: auto; left: 20px; transform: none; bottom: 3em; } .giocatore-head .button-filled { bottom: 22%; } .primasquadra a.goback { left: -17px; } .giocatore-head .row-gap-1 { row-gap: 0; } .giocatore-head { height: calc(var(--vh, 1vh) * 100); } .giocatore-head .gradient-bottom { height: 70%; } .giocatore-facts { bottom: 7em; } .giocatore-head .player-buttons { display: block; bottom: 1em; left: 20px; right: auto; } .primasquadra a.goback { left: auto; right: 10%; margin-top: 0; top: 2.3em; } } @media screen and (max-width : 800px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ .newscaption { left: 50%; width: 86%; margin-left: 0; padding: 0; border-left: none; top: auto; bottom: 28em; } .swiper-controls { top: auto; bottom: 21em; height: 4em; transform: none; left: 7%; margin-left: 0; } .swiper1 .swiper-button-prev, .swiper1 .swiper-button-next { left: 8em; margin-top: -10px; top: 0; } .swiper-container.swiper1preview { display: none; } .sponsorslider-home .srcbild img { max-width: 4em; } /* ///// C0NTENT ///// */ } @media screen and (max-width : 700px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ .fastlinks { margin: 0 70px 0 0; } /* ///// N@VIGATION ///// */ .menu-wrapper { height: 70px; } .burger { width: 32px; margin: 29px auto auto; } .burger span:before, .tabnav-burger span:before { margin: -4px 0 0; height: 4px; width: 32px; } .burger span:after, .tabnav-burger span:after { width: 32px; } .menu-text { top: -34px; height: 15px; } .menu-text p, .menu-text p.close { font-size: 8px; letter-spacing: 3px; } /* ///// SL1DER ///// */ .swiper12preview .swiper-button-next, .swiper12preview .swiper-button-prev { display: none; } .swiper11 .swiper-button-next, .swiper11 .swiper-button-prev { display: none; } /* ///// STARTSEITE ///// */ .destinationpartner { margin-bottom: 12em; } .newsletter-content { left: 10%; } /* ///// C0NTENT ///// */ .text-duke img.paolo { position: relative; left: 50%; height: auto; bottom: 0; width: 80%; transform: translate(-50%,0); } .squadra-image { height: 65vw; min-height: 10em; max-height: 23em; height: clamp(10em, 65vw, 23em); } } @media screen and (max-width : 600px) { } @media screen and (max-width : 650px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ .headnav { right: 0; top: 4.5em; } .top-bar { height: 34px; } .top-bar-item img { height: 20px; } .gottardo-arena img { height: 24px; margin: 0 0px; } .top-bar-item span { font-size: 12px; margin-right: 12px; hyphens: none; word-break: keep-all; white-space: nowrap; } .gottardo-arena { margin: 0 10px 0 20px; } .girls { position: relative; margin-right: 20px; } .giovani { position: relative; margin-left: 10px; } .fastlinks a.button-filled, .fastlinks .button-filled { margin: 0 10px 0 15px; padding: 5px 30px 5px 12px; } a.button-filled.fanzone-fastlink:before, .button-filled.fanzone-fastlink:before { width: 14px; height: 14px; } .language-switcher div.mod-languages ul { line-height: 1; } .header_fadein { top: 34px; } .header_fadein.hidden { -webkit-transform: translateY(calc(-100% - 34px)); -moz-transform: translateY(calc(-100% - 34px)); -ms-transform: translateY(calc(-100% - 34px)); -o-transform: translateY(calc(-100% - 34px)); transform: translateY(calc(-100% - 34px)); } /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ .swiper-pagination .totals span { margin: 0 2px; } .swiper-pagination .slices { margin-right: 0.95em; } /* ///// STARTSEITE ///// */ .hcap-connect-banner .hcap-connect-content { width: 70%; padding: 5% 6%; margin: 11em 2em 2em; } .slider-player-name { bottom: 3.5em; font-size: 1.5rem; } .slider-player-surname { bottom: 5.8em; font-size: 1.2rem; } .swiper13 .swiper-slide:after { transform: translate(-37%, 60%); } .slider-player-info { left: 30%; } .player-slider a.button-filled { bottom: 3em; } /* ///// C0NTENT ///// */ } @media screen and (max-width : 500px) { /* ///// C0NTAINER AND T_YPO ///// */ .block-container, .overview-grid { padding: 0.7em 0.7em 1em; border-radius: 15px; } /* ///// H3ADER ///// */ .logo { left: 20px; } /* ///// N@VIGATION ///// */ /* ///// STARTSEITE ///// */ .sdh-banner .sdh-content { width: 88%; margin: 0 0 30% 0; } .sdh-banner .app-store { flex-direction: column; } img.sdh-mockup { height: 65%; right: min(2vw, 4em); top: auto; bottom: -10%; } .multimedia h2 { top: 3em; } .multimedia h2, .shop h2, .player-slider h2 { font-size: 1rem; letter-spacing: 10px; } .video-caption h4 { font-size: 1.2rem; } .multimedia .swiper12preview span { font-size: 0.7rem; } .play-toggle span { font-size: 0.8rem; } .newsletter-image { border-radius: 10px 10px 10px 10px; } .multimedia { height: clamp(37em, 80vh, 55em); } .multimedia .swiper12preview { bottom: 2em; height: clamp(7em, 8vw, 10em); } /* ///// SL1DER ///// */ .newscaption { bottom: 18em; } .swiper-controls { bottom: 12em; } .swiper-pagination .slices { font-size: 1.4rem; margin-right: 1.4em; } .swiper1 .swiper-button-prev, .swiper1 .swiper-button-next { left: 5em; } /* ///// C0NTENT ///// */ } @media screen and (max-width : 450px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ .gottardo-arena { margin: 0 20px; } .gottardo-arena img { height: 18px; margin: 4px 0px; } .top-bar-item img { display: none; } .top-bar-item span { font-size: 10px; margin-right: 8px; } /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// STARTSEITE ///// */ .hcap-connect-banner .hcap-connect-content { margin: 10em 1em 1em; } img.hcap-connect-logo { margin-top: 1em; } .destinationpartner { margin-bottom: 14em; } /* ///// C0NTENT ///// */ } @media screen and (max-width : 370px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// STARTSEITE ///// */ .hcap-connect-banner .hcap-connect-content { margin: 7em 1em 1em; } /* ///// C0NTENT ///// */ } /* NEW SLIDER FLAT SCREENS */ @media screen and (min-width: 2200px) and (min-aspect-ratio: 4/2) { .swiper-container.swiper1preview { top: 22%; } a.button.whiteline.allnewsbutton { margin-top: 2em; } .newscaption, .swiper-controls { top: 28%; } } @media screen and (min-width: 2200px) and (min-aspect-ratio: 5/2) { .slider-section { height: 60em; } } @media screen and (min-width: 2200px) and (max-height: 1000px) { .slider-section { height: 60em; } } @media screen and (max-width: 2199px) and (min-width: 800px) { .swiper-container.swiper1preview { top: 27%; } a.button.whiteline.allnewsbutton { margin-top: 2em; } .newscaption, .swiper-controls { top: 28%; } .gamecenter-home { bottom: 4%; } } @media screen and (min-width: 2200px) and (min-aspect-ratio: 1/1) { .swiper-container.swiper1preview { top: 28%; } } @media screen and (max-width: 2199px) and (min-width: 500px) and (max-height: 950px) { .slider-section { height: 63em; } .gamecenter-home { bottom: 2em; } } /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// END RESPONSIVE ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// DARKMODE ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media (prefers-color-scheme: dark) { } /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// END DARKMODE ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/