@charset "UTF-8"; /*------------------------------------------------------------------------------------------------------------------------------ VARIABLES ------------------------------------------------------------------------------------------------------------------------------*/ /* Reset */ /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: pointer; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* Buttons */ /*------------------------------------------------------------------------------------------------------------------------------ VARIABLES ------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------ BUTTONS ------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------- BUTTON ROUND --------------------------------------------------------------------------*/ .button { display: flex; align-items: center; font-weight: normal; font-family: "Roboto", sans-serif; font-size: 1rem; margin: 1rem 0 0 0; padding: 0.5rem 1.5rem; border: 1px solid var(--highlight-color); border-radius: 2rem; color: var(--highlight-color); text-transform: none; width: max-content; min-width: auto; cursor: pointer; transition: all 0.35s ease-in-out; position: relative; overflow: hidden; z-index: 2; } @media (max-width: 767px) { .button { min-width: auto; padding: 0.5rem 1.5rem; margin: 1rem 0 0 0; } } .button:before { content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: var(--highlight-color); transition: all 0.35s ease-in-out; z-index: -1; } .button:hover { color: var(--white); } .button:hover:before { width: 100%; } .button.arrow { position: relative; padding: 1rem 4rem 1rem 2rem; } @media (max-width: 767px) { .button.arrow { padding: 0.5rem 3rem 0.5rem 1rem; } } .button.arrow:after { content: ""; position: absolute; top: 50%; right: 1rem; transform: translate(0, -50%); background-image: url("/images/icon-readmore.svg"); background-size: contain; background-repeat: no-repeat; transition: all 0.35s ease-in-out; } @media (max-width: 767px) { .button.arrow:after { right: 1rem; } } .button.arrow:hover:after { filter: invert(1) brightness(5) saturate(0); } .button.arrow:after { width: 27px; height: 15px; } @media (max-width: 767px) { .button.arrow:after { width: 20px; height: 11px; } } .button.pdf { position: relative; padding: 1rem 4rem 1rem 2rem; } @media (max-width: 767px) { .button.pdf { padding: 0.5rem 3rem 0.5rem 1rem; } } .button.pdf:after { content: ""; position: absolute; top: 50%; right: 1rem; transform: translate(0, -50%); background-image: url("/images/icon-pdf.svg"); background-size: contain; background-repeat: no-repeat; transition: all 0.35s ease-in-out; } @media (max-width: 767px) { .button.pdf:after { right: 1rem; } } .button.pdf:hover:after { filter: invert(1) brightness(5) saturate(0); } .button.pdf:after { width: 1rem; height: 1rem; } @media (max-width: 767px) { .button.pdf:after { width: 1rem; height: 1rem; } } .button.download { position: relative; padding: 1rem 4rem 1rem 2rem; } @media (max-width: 767px) { .button.download { padding: 0.5rem 3rem 0.5rem 1rem; } } .button.download:after { content: ""; position: absolute; top: 50%; right: 1rem; transform: translate(0, -50%); background-image: url("/images/icon-download.svg"); background-size: contain; background-repeat: no-repeat; transition: all 0.35s ease-in-out; } @media (max-width: 767px) { .button.download:after { right: 1rem; } } .button.download:hover:after { filter: invert(1) brightness(5) saturate(0); } .button.download:after { width: 20px; height: 20px; } @media (max-width: 767px) { .button.download:after { width: 20px; height: 20px; } } .button.extern { position: relative; padding: 1rem 4rem 1rem 2rem; } @media (max-width: 767px) { .button.extern { padding: 0.5rem 3rem 0.5rem 1rem; } } .button.extern:after { content: ""; position: absolute; top: 50%; right: 1rem; transform: translate(0, -50%); background-image: url("/images/icon-extern.svg"); background-size: contain; background-repeat: no-repeat; transition: all 0.35s ease-in-out; } @media (max-width: 767px) { .button.extern:after { right: 1rem; } } .button.extern:hover:after { filter: invert(1) brightness(5) saturate(0); } .button.extern:after { width: 20px; height: 20px; } @media (max-width: 767px) { .button.extern:after { width: 20px; height: 20px; } } .button.readmore { position: relative; display: inline-block; } .button.readmore:after, .button.readmore:before { content: ""; position: absolute; bottom: 0; background: var(--base-color); height: 1px; } .button.readmore:after { width: 100%; right: 0; animation: shrinkAfter 0.3s ease-in-out forwards; } .button.readmore:before { width: 0; left: 0; animation: expandBefore 0.3s ease-in-out forwards; animation-delay: 0.2s; } .button.readmore:hover:after { animation: shrinkAfterHover 0.3s ease-in-out forwards; } .button.readmore:hover:before { animation: expandBeforeHover 0.3s ease-in-out forwards; animation-delay: 0.2s; } .button.readmore:not(:hover):after { animation: shrinkAfter 0.3s ease-in-out forwards; } .button.readmore:not(:hover):before { animation: expandBefore 0.3s ease-in-out forwards; animation-delay: 0.2s; } @keyframes shrinkAfterHover { 0% { width: 100%; } 100% { width: 0; } } @keyframes expandBeforeHover { 0% { width: 0; } 100% { width: 100%; } } @keyframes shrinkAfter { 0% { width: 0; } 100% { width: 100%; } } @keyframes expandBefore { 0% { width: 100%; } 100% { width: 0; } } .btn { display: flex; align-items: center; font-weight: normal; font-family: "Roboto Slab", sans-serif; font-size: 1rem; margin: 0.5rem 0 0; padding: 0; color: var(--third-color); width: max-content; cursor: pointer; transition: all 0.35s ease-in-out; } .btn .icn { position: relative; height: 1.2rem; width: 1.2rem; margin: 0 10px 0 0; border: 1.5px solid var(--third-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; z-index: 1; } .btn .icn:before { content: ""; position: absolute; background: var(--third-color); opacity: 0; width: 0; height: 0; z-index: -1; border-radius: 50%; transition: all 0.35s ease-in-out; transition-timing-function: 0.35s ease-in-out; } .btn .icn .arrow, .btn .icn .extern { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .btn .icn .arrow:before, .btn .icn .arrow:after, .btn .icn .extern:before, .btn .icn .extern:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: -webkit-transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005), -webkit-transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .btn .icn .arrow:after, .btn .icn .extern:after { -webkit-transform: translateX(-40px); transform: translateX(-40px); } .btn .icn .arrow { width: 0.5rem; height: 0.6rem; } .btn .icn .arrow:before, .btn .icn .arrow:after { background-image: url("/images/btn-arrow.svg"); } .btn .icn .extern { width: 9px; height: 9px; } .btn .icn .extern:before, .btn .icn .extern:after { background-image: url("/images/btn-extern.svg"); } .btn:hover .icn { border: 1.5px solid var(--third-color); } .btn:hover .icn:before { opacity: 1; width: 100%; height: 100%; } .btn:hover .icn .arrow:before, .btn:hover .icn .extern:before { -webkit-transform: translateX(40px); transform: translateX(40px); } .btn:hover .icn .arrow:after, .btn:hover .icn .extern:after { -webkit-transform: translateX(0); transform: translateX(0); filter: invert(1) brightness(5) saturate(0); } .btn.white { color: var(--white); } .btn.white .icn { border: 1.5px solid var(--white); } .btn.white .icn:before { background: var(--third-color); } .btn.white .icn .arrow:before { filter: invert(1) brightness(5); } .btn.white:hover { color: var(--third-color); } .btn.white:hover .icn { border: 1.5px solid var(--third-color); } .btn.white:hover .icn:before { background: var(--third-color); } .btn-big { display: flex; align-items: center; margin: 0.5rem 0 0; padding: 0; color: var(--highlight-color); width: max-content; cursor: pointer; transition: all 0.35s ease-in-out; } .btn-big .icn { position: relative; height: 2.25rem; width: 2.25rem; margin: 0 10px 0 0; border: 1px solid var(--highlight-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; z-index: 1; } .btn-big .icn:before { content: ""; position: absolute; background: var(--highlight-color); opacity: 0; width: 0; height: 0; z-index: -1; border-radius: 50%; transition: all 0.35s ease-in-out; transition-timing-function: 0.35s ease-in-out; } .btn-big .icn .arrow, .btn-big .icn .extern, .btn-big .icn .datei { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .btn-big .icn .arrow:before, .btn-big .icn .arrow:after, .btn-big .icn .extern:before, .btn-big .icn .extern:after, .btn-big .icn .datei:before, .btn-big .icn .datei:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: -webkit-transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005), -webkit-transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .btn-big .icn .arrow:after, .btn-big .icn .extern:after, .btn-big .icn .datei:after { -webkit-transform: translateX(-40px); transform: translateX(-40px); } .btn-big .icn .arrow { width: 7px; height: 14px; } .btn-big .icn .arrow:before, .btn-big .icn .arrow:after { background-image: url("/images/swiper-arrow.svg"); } .btn-big .icn .extern { width: 14px; height: 14px; } .btn-big .icn .extern:before, .btn-big .icn .extern:after { background-image: url("/images/icon-extern-pink.svg"); } .btn-big .icn .datei { width: 16px; height: 18px; } .btn-big .icn .datei:before, .btn-big .icn .datei:after { background-image: url("/images/btn-download.svg"); } .btn-big:hover .icn { border: 1px solid var(--highlight-color); } .btn-big:hover .icn:before { opacity: 1; width: 100%; height: 100%; } .btn-big:hover .icn .arrow:before, .btn-big:hover .icn .extern:before, .btn-big:hover .icn .datei:before { -webkit-transform: translateX(40px); transform: translateX(40px); } .btn-big:hover .icn .arrow:after, .btn-big:hover .icn .extern:after, .btn-big:hover .icn .datei:after { -webkit-transform: translateX(0); transform: translateX(0); filter: invert(1) brightness(5) saturate(0); } .content a { position: relative; display: inline-block; } .content a:after, .content a:before { content: ""; position: absolute; bottom: 0; background: var(--black); height: 1px; } .content a:after { width: 100%; right: 0; animation: shrinkAfter 0.3s ease-in-out forwards; } .content a:before { width: 0; left: 0; animation: expandBefore 0.3s ease-in-out forwards; animation-delay: 0.2s; } .content a:hover:after { animation: shrinkAfterHover 0.3s ease-in-out forwards; } .content a:hover:before { animation: expandBeforeHover 0.3s ease-in-out forwards; animation-delay: 0.2s; } .content a:not(:hover):after { animation: shrinkAfter 0.3s ease-in-out forwards; } .content a:not(:hover):before { animation: expandBefore 0.3s ease-in-out forwards; animation-delay: 0.2s; } @keyframes shrinkAfterHover { 0% { width: 100%; } 100% { width: 0; } } @keyframes expandBeforeHover { 0% { width: 0; } 100% { width: 100%; } } @keyframes shrinkAfter { 0% { width: 0; } 100% { width: 100%; } } @keyframes expandBefore { 0% { width: 100%; } 100% { width: 0; } } /* Cookies */ /*------------------------------------------------------------------------------------------------------------------------------------------------------ COOKIES -------------------------------------------------------------------------------------------------------------------------------------------------------*/ #elc-cookie-consent { position: fixed; bottom: 2rem !important; left: 2rem !important; padding: 3rem !important; background-color: var(--white) !important; font-size: 0.8em !important; width: clamp(40rem, 50vw, 70rem) !important; max-height: auto !important; border-radius: 0 !important; z-index: 10000; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); border-radius: 25px !important; } #elc-cookie-consent h3 { font-size: min(max(1.1rem, 2vw), 2rem) !important; } #elc-cookie-consent .elc-button-link { width: auto !important; float: left !important; border-radius: 0 !important; background: var(--highlight-color) !important; font-size: inherit !important; padding: 0.6rem 1rem !important; height: auto !important; } #elc-cookie-consent button:before { display: none; } #elc-cookie-consent #elc-cookie-consent-settings { margin-bottom: 1rem !important; margin-top: 1rem !important; display: flex; flex-direction: column; align-items: flex-start; } #elc-cookie-consent .elc-row .elc-cookie-checkbox { float: right; margin-left: 0 !important; margin-right: 0.75rem !important; } a#elc-detail-link { display: none; } .elc-row.elc-cookie-headline { display: flex; align-items: center !important; justify-content: flex-start; } p.elc-header-description { color: var(--black); line-height: 1.5; font-size: min(max(0.9rem, 1vw), 1rem) !important; } label small { display: none; } .elc-header a { color: var(--highlight-color); } /* Cursors */ .cursor-auto { cursor: auto !important; } .cursor-default { cursor: default !important; } .cursor-pointer { cursor: pointer !important; } .cursor-progress { cursor: progress !important; } .cursor-wait { cursor: wait !important; } .cursor-grabbing { cursor: grabbing !important; } .cursor-unset { cursor: unset !important; } /* Header */ /*------------------------------------------------------------------------------------------------------------------------------ HEADER ------------------------------------------------------------------------------------------------------------------------------*/ header { position: relative; display: flex; float: left; top: 0; left: 0; padding: 0.5rem 0 0; width: 100%; height: 7rem; z-index: 1006; align-items: flex-end; background-color: var(--header-background); transition: height 0.3s ease, background-color 1s cubic-bezier(0.165, 0.84, 0.44, 1); } @media (max-width: 767px) { header { height: 4rem; } } header .header-container { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0; width: calc(100% - 8rem); margin: 0 auto; height: 100%; } @media (max-width: 767px) { header .header-container { width: calc(100% - 2rem); } } header a.logo { position: relative; display: flex; align-items: center; width: 16rem; transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: 150ms; transition-property: width; } header a.logo.fadein { width: 10rem; } @media (max-width: 767px) { header a.logo { width: 11rem; } } header.fadein { height: 4rem; background-color: var(--white); } /* Text */ html { font-size: 1.3625rem; } @media (width <= 2000px) { html { font-size: calc(0.0678571429rem + 1.0357142857vw); } } @media (width <= 767px) { html { font-size: calc(0.1594827586rem + 3.4482758621vw); } } @media only screen and (max-width: 480px) { html { font-size: calc(16px + 6 * (100vw - 320px) / 680) !important; } } .text-center { text-align: center; } @media (max-width: 767px) { .text-center { text-align: center; } } .text-left { text-align: left; } @media (max-width: 767px) { .text-left { text-align: left; } } .text-right { text-align: right; } @media (max-width: 767px) { .text-right { text-align: right; } } .text-justify { text-align: justify; } @media (max-width: 767px) { .text-justify { text-align: justify; } } .font-weight-400 { font-weight: 400; } .font-weight-700 { font-weight: 700; } .text-style-normal { font-style: normal; } .text-style-italic { font-style: italic; } .text-style-oblique { font-style: oblique; } .text-style-underline { text-decoration: underline; } .text-style-overline { text-decoration: overline; } .text-style-line-through { text-decoration: line-through; } .text-style-capitalize { text-transform: capitalize; } .text-style-uppercase { text-transform: uppercase; } .text-style-lowercase { text-transform: lowercase; } .text-style-nowrap { white-space: nowrap; } .text-style-wrap { white-space: wrap; } /* Components */ /*-------------------------------------------------- SWIPER ---------------------------------------------------*/ /** * Swiper 11.0.4 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 9, 2023 */ @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; } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } .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-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide { transform-style: preserve-3d; } .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-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .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, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-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-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: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.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 svg, .swiper-button-prev svg { width: 100%; height: 100%; object-fit: contain; transform-origin: center; } .swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg { transform: rotate(180deg); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-lock { display: none; } .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:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } .swiper-pagination { position: absolute; text-align: center; transition: 0.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: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); 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: 0.2s transform, 0.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: 0.2s transform, 0.2s left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 0.2s transform, 0.2s right; } .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 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: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; touch-action: none; background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1)); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-border-radius, 10px); left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .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; touch-action: none; } .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active { pointer-events: auto; } .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .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-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-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 ---------------------------------------------------*/ .not-selectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .carousel { position: relative; box-sizing: border-box; } .carousel *, .carousel *:before, .carousel *:after { box-sizing: inherit; } .carousel.is-draggable { cursor: move; cursor: grab; } .carousel.is-dragging { cursor: move; cursor: grabbing; } .carousel__viewport { position: relative; overflow: hidden; max-width: 100%; max-height: 100%; } .carousel__track { display: flex; } .carousel__slide { flex: 0 0 auto; width: var(--carousel-slide-width, 60%); max-width: 100%; padding: 1rem; position: relative; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .has-dots { margin-bottom: calc(0.5rem + 22px); } .carousel__dots { margin: 0 auto; padding: 0; position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; display: flex; justify-content: center; list-style: none; user-select: none; } .carousel__dots .carousel__dot { margin: 0; padding: 0; display: block; position: relative; width: 22px; height: 22px; cursor: pointer; } .carousel__dots .carousel__dot:after { content: ""; width: 8px; height: 8px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: currentColor; opacity: 0.25; transition: opacity 0.15s ease-in-out; } .carousel__dots .carousel__dot.is-selected:after { opacity: 1; } .carousel__button { width: var(--carousel-button-width, 48px); height: var(--carousel-button-height, 48px); padding: 0; border: 0; display: flex; justify-content: center; align-items: center; pointer-events: all; cursor: pointer; color: var(--carousel-button-color, currentColor); background: var(--carousel-button-bg, transparent); border-radius: var(--carousel-button-border-radius, 50%); box-shadow: var(--carousel-button-shadow, none); transition: opacity 0.15s ease; } .carousel__button.is-prev, .carousel__button.is-next { position: absolute; top: 50%; transform: translateY(-50%); } .carousel__button.is-prev { left: 10px; } .carousel__button.is-next { right: 10px; } .carousel__button[disabled] { cursor: default; opacity: 0.3; } .carousel__button svg { width: var(--carousel-button-svg-width, 50%); height: var(--carousel-button-svg-height, 50%); fill: none; stroke: currentColor; stroke-width: var(--carousel-button-svg-stroke-width, 1.5); stroke-linejoin: bevel; stroke-linecap: round; filter: var(--carousel-button-svg-filter, none); pointer-events: none; } body.compensate-for-scrollbar { overflow: hidden !important; touch-action: none; } .fancybox__container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; direction: ltr; margin: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); box-sizing: border-box; display: flex; flex-direction: column; color: var(--fancybox-color, #fff); -webkit-tap-highlight-color: transparent; overflow: hidden; z-index: 1050; outline: none; transform-origin: top left; --carousel-button-width: 48px; --carousel-button-height: 48px; --carousel-button-svg-width: 24px; --carousel-button-svg-height: 24px; --carousel-button-svg-stroke-width: 2.5; --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4)); } .fancybox__container *, .fancybox__container *::before, .fancybox__container *::after { box-sizing: inherit; } .fancybox__container :focus { outline: thin dotted; } body.is-using-mouse .fancybox__container :focus { outline: none; } @media all and (min-width: 1024px) { .fancybox__container { --carousel-button-width:48px; --carousel-button-height:48px; --carousel-button-svg-width:27px; --carousel-button-svg-height:27px; } } .fancybox__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--fancybox-bg, rgba(24, 24, 27, 0.92)); } .fancybox__carousel { position: relative; flex: 1 1 auto; min-height: 0; height: 100%; z-index: 10; } .fancybox__carousel.has-dots { margin-bottom: calc(0.5rem + 22px); } .fancybox__viewport { position: relative; width: 100%; height: 100%; overflow: visible; cursor: default; } .fancybox__track { display: flex; height: 100%; } .fancybox__slide { flex: 0 0 auto; width: 100%; max-width: 100%; margin: 0; padding: 48px 8px 8px 8px; position: relative; overscroll-behavior: contain; display: flex; flex-direction: column; outline: 0; overflow: auto; -webkit-overflow-scrolling: touch; --carousel-button-width: 36px; --carousel-button-height: 36px; --carousel-button-svg-width: 22px; --carousel-button-svg-height: 22px; } .fancybox__slide::before, .fancybox__slide::after { content: ""; flex: 0 0 0; margin: auto; } @media all and (min-width: 1024px) { .fancybox__slide { padding: 64px 100px; } } .fancybox__content { margin: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); padding: 36px; color: var(--fancybox-content-color, #374151); background: var(--fancybox-content-bg, #fff); position: relative; align-self: center; display: flex; flex-direction: column; z-index: 20; } .fancybox__caption { align-self: center; max-width: 100%; margin: 0; padding: 1rem 0 0 0; line-height: 1.375; color: var(--fancybox-color, currentColor); visibility: visible; cursor: auto; flex-shrink: 0; overflow-wrap: anywhere; } .is-loading .fancybox__caption { visibility: hidden; } .fancybox__container > .carousel__dots { top: 100%; color: var(--fancybox-color, #fff); } .fancybox__nav .carousel__button { z-index: 40; } .fancybox__nav .carousel__button.is-next { right: 8px; } @media all and (min-width: 1024px) { .fancybox__nav .carousel__button.is-next { right: 40px; } } .fancybox__nav .carousel__button.is-prev { left: 8px; } @media all and (min-width: 1024px) { .fancybox__nav .carousel__button.is-prev { left: 40px; } } .carousel__button.is-close { position: absolute; top: 8px; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 8px); z-index: 40; } @media all and (min-width: 1024px) { .carousel__button.is-close { right: 40px; } } .fancybox__content > .carousel__button.is-close { position: absolute; top: -36px; right: 0; color: var(--fancybox-color, #fff); } .fancybox__no-click, .fancybox__no-click button { pointer-events: none; } .fancybox__spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; color: var(--fancybox-color, currentColor); } .fancybox__slide .fancybox__spinner { cursor: pointer; z-index: 1053; } .fancybox__spinner svg { animation: fancybox-rotate 2s linear infinite; transform-origin: center center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; } .fancybox__spinner svg circle { fill: none; stroke-width: 2.75; stroke-miterlimit: 10; stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: fancybox-dash 1.5s ease-in-out infinite; stroke-linecap: round; stroke: currentColor; } @keyframes fancybox-rotate { 100% { transform: rotate(360deg); } } @keyframes fancybox-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } .fancybox__backdrop, .fancybox__caption, .fancybox__nav, .carousel__dots, .carousel__button.is-close { opacity: var(--fancybox-opacity, 1); } .fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop, .fancybox__container.is-animated[aria-hidden=false] .fancybox__caption, .fancybox__container.is-animated[aria-hidden=false] .fancybox__nav, .fancybox__container.is-animated[aria-hidden=false] .carousel__dots, .fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close { animation: 0.15s ease backwards fancybox-fadeIn; } .fancybox__container.is-animated.is-closing .fancybox__backdrop, .fancybox__container.is-animated.is-closing .fancybox__caption, .fancybox__container.is-animated.is-closing .fancybox__nav, .fancybox__container.is-animated.is-closing .carousel__dots, .fancybox__container.is-animated.is-closing .carousel__button.is-close { animation: 0.15s ease both fancybox-fadeOut; } .fancybox-fadeIn { animation: 0.15s ease both fancybox-fadeIn; } .fancybox-fadeOut { animation: 0.1s ease both fancybox-fadeOut; } .fancybox-zoomInUp { animation: 0.2s ease both fancybox-zoomInUp; } .fancybox-zoomOutDown { animation: 0.15s ease both fancybox-zoomOutDown; } .fancybox-throwOutUp { animation: 0.15s ease both fancybox-throwOutUp; } .fancybox-throwOutDown { animation: 0.15s ease both fancybox-throwOutDown; } @keyframes fancybox-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fancybox-fadeOut { to { opacity: 0; } } @keyframes fancybox-zoomInUp { from { transform: scale(0.97) translate3d(0, 16px, 0); opacity: 0; } to { transform: scale(1) translate3d(0, 0, 0); opacity: 1; } } @keyframes fancybox-zoomOutDown { to { transform: scale(0.97) translate3d(0, 16px, 0); opacity: 0; } } @keyframes fancybox-throwOutUp { to { transform: translate3d(0, -30%, 0); opacity: 0; } } @keyframes fancybox-throwOutDown { to { transform: translate3d(0, 30%, 0); opacity: 0; } } .fancybox__carousel .carousel__slide { scrollbar-width: thin; scrollbar-color: #ccc rgba(255, 255, 255, 0.1); } .fancybox__carousel .carousel__slide::-webkit-scrollbar { width: 8px; height: 8px; } .fancybox__carousel .carousel__slide::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.1); } .fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2px; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); } .fancybox__carousel.is-draggable .fancybox__slide, .fancybox__carousel.is-draggable .fancybox__slide .fancybox__content { cursor: move; cursor: grab; } .fancybox__carousel.is-dragging .fancybox__slide, .fancybox__carousel.is-dragging .fancybox__slide .fancybox__content { cursor: move; cursor: grabbing; } .fancybox__carousel .fancybox__slide .fancybox__content { cursor: auto; } .fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content { cursor: zoom-in; } .fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content { cursor: zoom-out; } .fancybox__carousel .fancybox__slide.is-draggable .fancybox__content { cursor: move; cursor: grab; } .fancybox__carousel .fancybox__slide.is-dragging .fancybox__content { cursor: move; cursor: grabbing; } .fancybox__image { transform-origin: 0 0; touch-action: none; user-select: none; transition: none; } .has-image .fancybox__content { padding: 0; background: transparent; min-height: 1px; } .is-closing .has-image .fancybox__content { overflow: visible; } .has-image[data-image-fit=contain] { overflow: visible; touch-action: none; } .has-image[data-image-fit=contain] .fancybox__image { max-width: 100%; max-height: 100%; object-fit: contain; } .has-image[data-image-fit=contain-w] { overflow-x: hidden; overflow-y: auto; } .has-image[data-image-fit=contain-w] .fancybox__content { min-height: auto; } .has-image[data-image-fit=contain-w] .fancybox__image { max-width: 100%; height: auto; } .has-image[data-image-fit=cover] { overflow: visible; touch-action: none; } .has-image[data-image-fit=cover] .fancybox__content { width: 100%; height: 100%; } .has-image[data-image-fit=cover] .fancybox__image { width: 100%; height: 100%; object-fit: cover; } .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content, .fancybox__carousel .fancybox__slide.has-map .fancybox__content, .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content, .fancybox__carousel .fancybox__slide.has-video .fancybox__content, .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { flex-shrink: 1; min-height: 1px; overflow: visible; } .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content, .fancybox__carousel .fancybox__slide.has-map .fancybox__content, .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content { width: 100%; height: 80%; } .fancybox__carousel .fancybox__slide.has-video .fancybox__content, .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { width: 960px; height: 540px; max-width: 100%; max-height: 100%; } .fancybox__carousel .fancybox__slide.has-map .fancybox__content, .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content, .fancybox__carousel .fancybox__slide.has-video .fancybox__content, .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { padding: 0; background: rgba(24, 24, 27, 0.9); color: #fff; } .fancybox__carousel .fancybox__slide.has-map .fancybox__content { background: #e5e3df; } .fancybox__html5video, .fancybox__iframe { border: 0; display: block; height: 100%; width: 100%; background: transparent; } .fancybox-placeholder { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .fancybox__thumbs { flex: 0 0 auto; position: relative; padding: 0px 3px; opacity: var(--fancybox-opacity, 1); } .fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs { animation: 0.15s ease-in backwards fancybox-fadeIn; } .fancybox__container.is-animated.is-closing .fancybox__thumbs { opacity: 0; } .fancybox__thumbs .carousel__slide { flex: 0 0 auto; width: var(--fancybox-thumbs-width, 96px); margin: 0; padding: 8px 3px; box-sizing: content-box; display: flex; align-items: center; justify-content: center; overflow: visible; cursor: pointer; } .fancybox__thumbs .carousel__slide .fancybox__thumb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 5px solid var(--fancybox-accent-color, rgba(1, 210, 232, 0.94)); opacity: 0; transition: opacity 0.15s ease; border-radius: var(--fancybox-thumbs-border-radius, 4px); } .fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after { opacity: 0.92; } .fancybox__thumbs .carousel__slide > * { pointer-events: none; user-select: none; } .fancybox__thumb { position: relative; width: 100%; padding-top: calc(100% / (var(--fancybox-thumbs-ratio, 1.5))); background-size: cover; background-position: center center; background-color: rgba(255, 255, 255, 0.1); background-repeat: no-repeat; border-radius: var(--fancybox-thumbs-border-radius, 4px); } .fancybox__toolbar { position: absolute; top: 0; right: 0; left: 0; z-index: 20; background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.006) 8.1%, rgba(0, 0, 0, 0.021) 15.5%, rgba(0, 0, 0, 0.046) 22.5%, rgba(0, 0, 0, 0.077) 29%, rgba(0, 0, 0, 0.114) 35.3%, rgba(0, 0, 0, 0.155) 41.2%, rgba(0, 0, 0, 0.198) 47.1%, rgba(0, 0, 0, 0.242) 52.9%, rgba(0, 0, 0, 0.285) 58.8%, rgba(0, 0, 0, 0.326) 64.7%, rgba(0, 0, 0, 0.363) 71%, rgba(0, 0, 0, 0.394) 77.5%, rgba(0, 0, 0, 0.419) 84.5%, rgba(0, 0, 0, 0.434) 91.9%, rgba(0, 0, 0, 0.44) 100%); padding: 0; touch-action: none; display: flex; justify-content: space-between; --carousel-button-svg-width: 20px; --carousel-button-svg-height: 20px; opacity: var(--fancybox-opacity, 1); text-shadow: var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.4)); } @media all and (min-width: 1024px) { .fancybox__toolbar { padding: 8px; } } .fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar { animation: 0.15s ease-in backwards fancybox-fadeIn; } .fancybox__container.is-animated.is-closing .fancybox__toolbar { opacity: 0; } .fancybox__toolbar__items { display: flex; } .fancybox__toolbar__items--left { margin-right: auto; } .fancybox__toolbar__items--center { position: absolute; left: 50%; transform: translateX(-50%); } .fancybox__toolbar__items--right { margin-left: auto; } @media (max-width: 640px) { .fancybox__toolbar__items--center:not(:last-child) { display: none; } } .fancybox__counter { min-width: 72px; padding: 0 10px; line-height: var(--carousel-button-height, 48px); text-align: center; font-size: 17px; font-variant-numeric: tabular-nums; -webkit-font-smoothing: subpixel-antialiased; } .fancybox__progress { background: var(--fancybox-accent-color, rgba(1, 210, 232, 0.94)); height: 3px; left: 0; position: absolute; right: 0; top: 0; transform: scaleX(0); transform-origin: 0; transition-property: transform; transition-timing-function: linear; z-index: 30; user-select: none; } .fancybox__container:fullscreen::backdrop { opacity: 0; } .fancybox__button--fullscreen g:nth-child(2) { display: none; } .fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1) { display: none; } .fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2) { display: block; } .fancybox__button--slideshow g:nth-child(2) { display: none; } .fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1) { display: none; } .fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2) { display: block; } img[data-fancybox] { height: 100%; object-fit: cover; cursor: pointer; } /* Container */ /*------------------------------------------------------------------------------------------------------------------------------ CONTAINER ------------------------------------------------------------------------------------------------------------------------------*/ * { grid-column: 1/span 12; } section#container { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0; width: 100%; } section#container.edged { width: calc(100% - 2rem * 2); margin: 0 auto; } @media (max-width: 767px) { section#container.edged { width: 100%; } } section#container.boxed { width: calc(75% - 2rem); margin-left: auto; margin-right: auto; max-width: 1800px; grid-template-columns: repeat(12, 1fr); } @media (max-width: 2463px) { section#container.boxed { width: calc(86.25% - 2rem); max-width: calc(100% - 2rem); } } @media (max-width: 767px) { section#container.boxed { width: calc(100% - 2rem); } } section#container.boxed-left { width: calc(87.5% - 1rem); margin-left: calc(12.5% + 1rem); margin-right: 0; grid-template-columns: repeat(11, calc((75% - 1rem) / 11)) 1fr; } @media (min-width: 2464px) { section#container.boxed-left { margin-left: calc((100% - 1800px) / 2); width: calc(100% - ((100% - 1800px) / 2 + 1rem)); grid-template-columns: repeat(11, 150px) 1fr; } } @media (max-width: 2463px) { section#container.boxed-left { width: calc(93.125% - 1rem); margin-left: calc(6.875% + 1rem); max-width: calc(100% - 1rem); grid-template-columns: repeat(11, calc((93.125% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) { section#container.boxed-left { width: calc(100% - 1rem); margin-left: 1rem; grid-template-columns: repeat(11, calc((100% - 1rem) / 12)) 1fr; } } section#container.boxed-right { width: calc(87.5% - 1rem); margin-right: 12.5%; margin-left: 0; grid-template-columns: repeat(11, calc((75% - 1rem) / 11)) 1fr; } @media (min-width: 2464px) { section#container.boxed-right { margin-right: calc((100% - 1800px) / 2 + 1rem); width: calc(100% - ((100% - 1800px) / 2 + 1rem)); grid-template-columns: repeat(11, 150px) 1fr; } } @media (max-width: 2463px) { section#container.boxed-right { width: calc(93.125% - 1rem); margin-right: calc(6.875% + 1rem); max-width: calc(100% - 1rem); grid-template-columns: repeat(11, calc((93.125% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) { section#container.boxed-right { width: calc(100% - 1rem); margin-right: 1rem; grid-template-columns: repeat(11, calc((100% - 1rem) / 12)) 1fr; } } section#container.boxed-padding-left { width: 100%; padding-left: calc(12.5% + 1rem); padding-right: 0; grid-template-columns: repeat(11, calc((75% - 1rem) / 11)) 1fr; } @media (min-width: 2464px) { section#container.boxed-padding-left { padding-left: calc((100% - 1800px) / 2); width: 100%; grid-template-columns: repeat(11, 150px) 1fr; } } @media (max-width: 2463px) { section#container.boxed-padding-left { width: 100%; padding-left: calc(6.875% + 1rem); grid-template-columns: repeat(11, calc((93.125% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) { section#container.boxed-padding-left { width: 100%; padding-left: 1rem; grid-template-columns: repeat(11, calc((100% - 1rem) / 12)) 1fr; } } section#container.boxed-padding-right { width: 100%; padding-right: 12.5%; padding-left: 0; grid-template-columns: repeat(11, calc((75% - 1rem) / 11)) 1fr; } @media (min-width: 2464px) { section#container.boxed-padding-right { padding-right: calc((100% - 1800px) / 2 + 1rem); width: calc(100% - ((100% - 1800px) / 2 + 1rem)); grid-template-columns: repeat(11, 150px) 1fr; } } @media (max-width: 2463px) { section#container.boxed-padding-right { width: 100%; padding-right: calc(6.875% + 1rem); grid-template-columns: repeat(11, calc((93.125% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) { section#container.boxed-padding-right { width: 100%; padding-right: 1rem; grid-template-columns: repeat(11, calc((100% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) { section#container.boxed-s { width: calc(75% - 2rem); margin-left: auto; margin-right: auto; max-width: 1800px; grid-template-columns: repeat(12, 1fr); } } @media (max-width: 767px) and (max-width: 2463px) { section#container.boxed-s { width: calc(86.25% - 2rem); max-width: calc(100% - 2rem); } } @media (max-width: 767px) and (max-width: 767px) { section#container.boxed-s { width: calc(100% - 2rem); } } @media (max-width: 767px) { section#container.boxed-left-s { width: calc(87.5% - 1rem); margin-left: calc(12.5% + 1rem); margin-right: 0; grid-template-columns: repeat(11, calc((75% - 1rem) / 11)) 1fr; } } @media (max-width: 767px) and (min-width: 2464px) { section#container.boxed-left-s { margin-left: calc((100% - 1800px) / 2); width: calc(100% - ((100% - 1800px) / 2 + 1rem)); grid-template-columns: repeat(11, 150px) 1fr; } } @media (max-width: 767px) and (max-width: 2463px) { section#container.boxed-left-s { width: calc(93.125% - 1rem); margin-left: calc(6.875% + 1rem); max-width: calc(100% - 1rem); grid-template-columns: repeat(11, calc((93.125% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) and (max-width: 767px) { section#container.boxed-left-s { width: calc(100% - 1rem); margin-left: 1rem; grid-template-columns: repeat(11, calc((100% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) { section#container.boxed-right-s { width: calc(87.5% - 1rem); margin-right: 12.5%; margin-left: 0; grid-template-columns: repeat(11, calc((75% - 1rem) / 11)) 1fr; } } @media (max-width: 767px) and (min-width: 2464px) { section#container.boxed-right-s { margin-right: calc((100% - 1800px) / 2 + 1rem); width: calc(100% - ((100% - 1800px) / 2 + 1rem)); grid-template-columns: repeat(11, 150px) 1fr; } } @media (max-width: 767px) and (max-width: 2463px) { section#container.boxed-right-s { width: calc(93.125% - 1rem); margin-right: calc(6.875% + 1rem); max-width: calc(100% - 1rem); grid-template-columns: repeat(11, calc((93.125% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) and (max-width: 767px) { section#container.boxed-right-s { width: calc(100% - 1rem); margin-right: 1rem; grid-template-columns: repeat(11, calc((100% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) { section#container.boxed-padding-left-s { width: 100%; padding-left: calc(12.5% + 1rem); padding-right: 0; grid-template-columns: repeat(11, calc((75% - 1rem) / 11)) 1fr; } } @media (max-width: 767px) and (min-width: 2464px) { section#container.boxed-padding-left-s { padding-left: calc((100% - 1800px) / 2); width: 100%; grid-template-columns: repeat(11, 150px) 1fr; } } @media (max-width: 767px) and (max-width: 2463px) { section#container.boxed-padding-left-s { width: 100%; padding-left: calc(6.875% + 1rem); grid-template-columns: repeat(11, calc((93.125% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) and (max-width: 767px) { section#container.boxed-padding-left-s { width: 100%; padding-left: 1rem; grid-template-columns: repeat(11, calc((100% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) { section#container.boxed-padding-right-s { width: 100%; padding-right: 12.5%; padding-left: 0; grid-template-columns: repeat(11, calc((75% - 1rem) / 11)) 1fr; } } @media (max-width: 767px) and (min-width: 2464px) { section#container.boxed-padding-right-s { padding-right: calc((100% - 1800px) / 2 + 1rem); width: calc(100% - ((100% - 1800px) / 2 + 1rem)); grid-template-columns: repeat(11, 150px) 1fr; } } @media (max-width: 767px) and (max-width: 2463px) { section#container.boxed-padding-right-s { width: 100%; padding-right: calc(6.875% + 1rem); grid-template-columns: repeat(11, calc((93.125% - 1rem) / 12)) 1fr; } } @media (max-width: 767px) and (max-width: 767px) { section#container.boxed-padding-right-s { width: 100%; padding-right: 1rem; grid-template-columns: repeat(11, calc((100% - 1rem) / 12)) 1fr; } } @media (min-width: 768px) { .plb { padding-left: 2rem; } } @media (min-width: 768px) { .prb { padding-right: 2rem; } } @media (min-width: 768px) { .mlb { margin-left: 2rem; } } @media (min-width: 768px) { .mrb { margin-right: 2rem; } } @media (max-width: 767px) { .plb-s { padding-right: 1rem; } } @media (max-width: 767px) { .prb-s { padding-right: 1rem; } } @media (max-width: 767px) { .mlb-s { margin-left: 1rem; } } @media (max-width: 767px) { .mrb-s { margin-right: 1rem; } } /* Grid */ /* /////////// UBIQ GRID /////////// 2. GRID Container 3. ROW / COLUMNS 4. GAPS 5. SPACINGS (Margins & Paddings) 6. POSITIONING (top-left, top-right, center-left usw. ) /////////// /////////// //////////// */ .grid { position: relative; display: grid; row-gap: clamp(0.4rem, 1vw, 1rem); column-gap: clamp(0.4rem, 1vw, 1rem); grid-auto-rows: minmax(min-content, max-content); width: 100%; } .grid > div { min-width: 0; max-width: 100%; } /* SAME ROW HEIGHTS FOR ALL */ .grid.equalrow { grid-auto-rows: 1fr; } .grid.equalcolumn { grid-auto-columns: 1fr; } .grid.line { border-bottom: solid 1px var(--blue); padding: 1rem 0 1rem; } /*------------------------------------------------------------------------------------------------------------------------------ 2 GRID CONTAINER ------------------------------------------------------------------------------------------------------------------------------*/ .grid.cols-1 { grid-template-columns: repeat(1, 1fr); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .grid.cols-5 { grid-template-columns: repeat(5, 1fr); } .grid.cols-6 { grid-template-columns: repeat(6, 1fr); } .grid.cols-7 { grid-template-columns: repeat(7, 1fr); } .grid.cols-8 { grid-template-columns: repeat(8, 1fr); } .grid.cols-9 { grid-template-columns: repeat(9, 1fr); } .grid.cols-10 { grid-template-columns: repeat(10, 1fr); } .grid.cols-11 { grid-template-columns: repeat(11, 1fr); } .grid.cols-12 { grid-template-columns: repeat(12, 1fr); } .grid.cols-1-auto { grid-template-columns: repeat(1, auto); } .grid.cols-2-auto { grid-template-columns: repeat(2, auto); } .grid.cols-3-auto { grid-template-columns: repeat(3, auto); } .grid.cols-4-auto { grid-template-columns: repeat(4, auto); } .grid.cols-5-auto { grid-template-columns: repeat(5, auto); } .grid.cols-6-auto { grid-template-columns: repeat(6, auto); } .grid.cols-7-auto { grid-template-columns: repeat(7, auto); } .grid.cols-8-auto { grid-template-columns: repeat(8, auto); } .grid.cols-9-auto { grid-template-columns: repeat(9, auto); } .grid.cols-10-auto { grid-template-columns: repeat(10, auto); } .grid.cols-11-auto { grid-template-columns: repeat(11, auto); } .grid.cols-12-auto { grid-template-columns: repeat(12, auto); } .grid.rows-1 { grid-template-rows: repeat(1, auto); } .grid.rows-2 { grid-template-rows: repeat(2, auto); } .grid.rows-3 { grid-template-rows: repeat(3, auto); } .grid.rows-4 { grid-template-rows: repeat(4, auto); } .grid.rows-5 { grid-template-rows: repeat(5, auto); } .grid.rows-6 { grid-template-rows: repeat(6, auto); } .grid.rows-7 { grid-template-rows: repeat(7, auto); } .grid.rows-8 { grid-template-rows: repeat(8, auto); } .grid.rows-9 { grid-template-rows: repeat(9, auto); } .grid.rows-10 { grid-template-rows: repeat(10, auto); } .grid.rows-11 { grid-template-rows: repeat(11, auto); } .grid.rows-12 { grid-template-rows: repeat(12, auto); } .grid.rows-equal { grid-template-rows: 1fr; grid-auto-rows: 1fr; } .grid.rows-1-equal { grid-template-rows: repeat(1, 1fr); } .grid.rows-2-equal { grid-template-rows: repeat(2, 1fr); } .grid.rows-3-equal { grid-template-rows: repeat(3, 1fr); } .grid.rows-4-equal { grid-template-rows: repeat(4, 1fr); } .grid.rows-5-equal { grid-template-rows: repeat(5, 1fr); } .grid.rows-6-equal { grid-template-rows: repeat(6, 1fr); } .grid.rows-7-equal { grid-template-rows: repeat(7, 1fr); } .grid.rows-8-equal { grid-template-rows: repeat(8, 1fr); } .grid.rows-9-equal { grid-template-rows: repeat(9, 1fr); } .grid.rows-10-equal { grid-template-rows: repeat(10, 1fr); } .grid.rows-11-equal { grid-template-rows: repeat(11, 1fr); } .grid.rows-12-equal { grid-template-rows: repeat(12, 1fr); } .grid.cols-2.same-width { grid-template-columns: repeat(2, 50%); } /*------------------------------------------------------------------------------------------------------------------------------ 3 COLS / ROWS ------------------------------------------------------------------------------------------------------------------------------*/ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { position: relative; } .col { grid-column: auto; } .col-1 { grid-column: 1; } .col-2 { grid-column: 2; } .col-3 { grid-column: 3; } .col-4 { grid-column: 4; } .col-5 { grid-column: 5; } .col-6 { grid-column: 6; } .col-7 { grid-column: 7; } .col-8 { grid-column: 8; } .col-9 { grid-column: 9; } .col-10 { grid-column: 10; } .col-11 { grid-column: 11; } .col-12 { grid-column: 12; } .col-1-1 { grid-column: 1/span 1; } .col-1-2 { grid-column: 1/span 2; } .col-1-3 { grid-column: 1/span 3; } .col-1-4 { grid-column: 1/span 4; } .col-1-5 { grid-column: 1/span 5; } .col-1-6 { grid-column: 1/span 6; } .col-1-7 { grid-column: 1/span 7; } .col-1-8 { grid-column: 1/span 8; } .col-1-9 { grid-column: 1/span 9; } .col-1-10 { grid-column: 1/span 10; } .col-1-11 { grid-column: 1/span 11; } .col-1-12 { grid-column: 1/span 12; } .col-2-2 { grid-column: 2/span 2; } .col-2-3 { grid-column: 2/span 3; } .col-2-4 { grid-column: 2/span 4; } .col-2-5 { grid-column: 2/span 5; } .col-2-6 { grid-column: 2/span 6; } .col-2-7 { grid-column: 2/span 7; } .col-2-8 { grid-column: 2/span 8; } .col-2-9 { grid-column: 2/span 9; } .col-2-10 { grid-column: 2/span 10; } .col-2-11 { grid-column: 2/span 11; } .col-3-2 { grid-column: 3/span 2; } .col-3-3 { grid-column: 3/span 3; } .col-3-4 { grid-column: 3/span 4; } .col-3-5 { grid-column: 3/span 5; } .col-3-6 { grid-column: 3/span 6; } .col-3-7 { grid-column: 3/span 7; } .col-3-8 { grid-column: 3/span 8; } .col-3-9 { grid-column: 3/span 9; } .col-3-10 { grid-column: 3/span 10; } .col-4-2 { grid-column: 4/span 2; } .col-4-3 { grid-column: 4/span 3; } .col-4-4 { grid-column: 4/span 5; } .col-4-5 { grid-column: 4/span 5; } .col-4-6 { grid-column: 4/span 6; } .col-4-7 { grid-column: 4/span 7; } .col-4-8 { grid-column: 4/span 8; } .col-4-9 { grid-column: 4/span 9; } .col-5-2 { grid-column: 5/span 2; } .col-5-3 { grid-column: 5/span 3; } .col-5-4 { grid-column: 5/span 4; } .col-5-5 { grid-column: 5/span 5; } .col-5-6 { grid-column: 5/span 6; } .col-5-7 { grid-column: 5/span 7; } .col-5-8 { grid-column: 5/span 8; } .col-6-2 { grid-column: 6/span 2; } .col-6-3 { grid-column: 6/span 3; } .col-6-4 { grid-column: 6/span 4; } .col-6-5 { grid-column: 6/span 5; } .col-6-6 { grid-column: 6/span 6; } .col-6-7 { grid-column: 6/span 7; } .col-7-2 { grid-column: 7/span 2; } .col-7-3 { grid-column: 7/span 3; } .col-7-4 { grid-column: 7/span 4; } .col-7-5 { grid-column: 7/span 5; } .col-7-6 { grid-column: 7/span 6; } .col-8-2 { grid-column: 8/span 2; } .col-8-3 { grid-column: 8/span 3; } .col-8-4 { grid-column: 8/span 4; } .col-8-5 { grid-column: 8/span 5; } .col-9-2 { grid-column: 9/span 2; } .col-9-3 { grid-column: 9/span 3; } .col-9-4 { grid-column: 9/span 4; } .col-10-2 { grid-column: 10/span 2; } .col-10-3 { grid-column: 10/span 3; } .col-11-2 { grid-column: 11/span 2; } .row-1, .row-2, .row-3, .row-4, .row-5, .row-6, .row-7, .row-8, .row-9, .row-10, .row-11, .row-12 { position: relative; } .row-1 { grid-row: 1; } .row-2 { grid-row: 2; } .row-3 { grid-row: 3; } .row-4 { grid-row: 4; } .row-5 { grid-row: 5; } .row-6 { grid-row: 6; } .row-7 { grid-row: 7; } .row-8 { grid-row: 8; } .row-9 { grid-row: 9; } .row-10 { grid-row: 10; } .row-11 { grid-row: 11; } .row-12 { grid-row: 12; } .row-1-2 { grid-row: 1/span 2; } .row-1-3 { grid-row: 1/span 3; } .row-1-4 { grid-row: 1/span 4; } .row-1-5 { grid-row: 1/span 5; } .row-1-6 { grid-row: 1/span 6; } .row-1-7 { grid-row: 1/span 7; } .row-1-8 { grid-row: 1/span 8; } .row-1-9 { grid-row: 1/span 9; } .row-1-10 { grid-row: 1/span 10; } .row-1-11 { grid-row: 1/span 11; } .row-1-12 { grid-row: 1/span 12; } .row-2-2 { grid-row: 2/span 2; } .row-2-3 { grid-row: 2/span 3; } .row-2-4 { grid-row: 2/span 4; } .row-2-5 { grid-row: 2/span 5; } .row-2-6 { grid-row: 2/span 6; } .row-2-7 { grid-row: 2/span 7; } .row-2-8 { grid-row: 2/span 8; } .row-2-9 { grid-row: 2/span 9; } .row-2-10 { grid-row: 2/span 10; } .row-2-11 { grid-row: 2/span 11; } .row-3-2 { grid-row: 3/span 2; } .row-3-3 { grid-row: 3/span 3; } .row-3-4 { grid-row: 3/span 4; } .row-3-5 { grid-row: 3/span 5; } .row-3-6 { grid-row: 3/span 6; } .row-3-7 { grid-row: 3/span 7; } .row-3-8 { grid-row: 3/span 8; } .row-3-9 { grid-row: 3/span 9; } .row-3-10 { grid-row: 3/span 10; } .row-4-2 { grid-row: 4/span 2; } .row-4-3 { grid-row: 4/span 3; } .row-4-4 { grid-row: 4/span 5; } .row-4-5 { grid-row: 4/span 5; } .row-4-6 { grid-row: 4/span 6; } .row-4-7 { grid-row: 4/span 7; } .row-4-8 { grid-row: 4/span 8; } .row-4-9 { grid-row: 4/span 9; } .row-5-2 { grid-row: 5/span 2; } .row-5-3 { grid-row: 5/span 3; } .row-5-4 { grid-row: 5/span 4; } .row-5-5 { grid-row: 5/span 5; } .row-5-6 { grid-row: 5/span 6; } .row-5-7 { grid-row: 5/span 7; } .row-5-8 { grid-row: 5/span 8; } .row-6-2 { grid-row: 6/span 2; } .row-6-3 { grid-row: 6/span 3; } .row-6-4 { grid-row: 6/span 4; } .row-6-5 { grid-row: 6/span 5; } .row-6-6 { grid-row: 6/span 6; } .row-6-7 { grid-row: 6/span 7; } .row-7-2 { grid-row: 7/span 2; } .row-7-3 { grid-row: 7/span 3; } .row-7-4 { grid-row: 7/span 4; } .row-7-5 { grid-row: 7/span 5; } .row-7-6 { grid-row: 7/span 6; } .row-8-2 { grid-row: 8/span 2; } .row-8-3 { grid-row: 8/span 3; } .row-8-4 { grid-row: 8/span 4; } .row-8-5 { grid-row: 8/span 5; } .row-9-2 { grid-row: 9/span 2; } .row-9-3 { grid-row: 9/span 3; } .row-9-4 { grid-row: 9/span 4; } .row-10-2 { grid-row: 10/span 2; } .row-10-3 { grid-row: 10/span 3; } .row-11-2 { grid-row: 11/span 2; } /* ===================================== MOBILE ===================================== */ @media (max-width: 767px) { .grid.cols-m-1 { grid-template-columns: repeat(1, 1fr); } .grid.cols-m-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-m-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-m-4 { grid-template-columns: repeat(4, 1fr); } .grid.cols-m-5 { grid-template-columns: repeat(5, 1fr); } .grid.cols-m-6 { grid-template-columns: repeat(6, 1fr); } .grid.cols-m-7 { grid-template-columns: repeat(7, 1fr); } .grid.cols-m-8 { grid-template-columns: repeat(8, 1fr); } .grid.cols-m-9 { grid-template-columns: repeat(9, 1fr); } .grid.cols-m-10 { grid-template-columns: repeat(10, 1fr); } .grid.cols-m-11 { grid-template-columns: repeat(11, 1fr); } .grid.cols-m-12 { grid-template-columns: repeat(12, 1fr); } .grid.cols-m-1-auto { grid-template-columns: repeat(1, auto); } .grid.cols-m-2-auto { grid-template-columns: repeat(2, auto); } .grid.cols-m-3-auto { grid-template-columns: repeat(3, auto); } .grid.cols-m-4-auto { grid-template-columns: repeat(4, auto); } .grid.cols-m-5-auto { grid-template-columns: repeat(5, auto); } .grid.cols-m-6-auto { grid-template-columns: repeat(6, auto); } .grid.cols-m-7-auto { grid-template-columns: repeat(7, auto); } .grid.cols-m-8-auto { grid-template-columns: repeat(8, auto); } .grid.cols-m-9-auto { grid-template-columns: repeat(9, auto); } .grid.cols-m-10-auto { grid-template-columns: repeat(10, auto); } .grid.cols-m-11-auto { grid-template-columns: repeat(11, auto); } .grid.cols-m-12-auto { grid-template-columns: repeat(12, auto); } .grid.rows-m { grid-template-rows: 1fr; grid-auto-rows: 1fr; } .grid.rows-m-1 { grid-template-rows: repeat(1, auto); } .grid.rows-m-2 { grid-template-rows: repeat(2, auto); } .grid.rows-m-3 { grid-template-rows: repeat(3, auto); } .grid.rows-m-4 { grid-template-rows: repeat(4, auto); } .grid.rows-m-5 { grid-template-rows: repeat(5, auto); } .grid.rows-m-6 { grid-template-rows: repeat(6, auto); } .grid.rows-m-7 { grid-template-rows: repeat(7, auto); } .grid.rows-m-8 { grid-template-rows: repeat(8, auto); } .grid.rows-m-9 { grid-template-rows: repeat(9, auto); } .grid.rows-m-10 { grid-template-rows: repeat(10, auto); } .grid.rows-m-11 { grid-template-rows: repeat(11, auto); } .grid.rows-m-12 { grid-template-rows: repeat(12, auto); } .grid.rows-m-equal { grid-template-rows: 1fr; grid-auto-rows: 1fr; } .grid.rows-m-1-equal { grid-template-rows: repeat(1, 1fr); } .grid.rows-m-2-equal { grid-template-rows: repeat(2, 1fr); } .grid.rows-m-3-equal { grid-template-rows: repeat(3, 1fr); } .grid.rows-m-4-equal { grid-template-rows: repeat(4, 1fr); } .grid.rows-m-5-equal { grid-template-rows: repeat(5, 1fr); } .grid.rows-m-6-equal { grid-template-rows: repeat(6, 1fr); } .grid.rows-m-7-equal { grid-template-rows: repeat(7, 1fr); } .grid.rows-m-8-equal { grid-template-rows: repeat(8, 1fr); } .grid.rows-m-9-equal { grid-template-rows: repeat(9, 1fr); } .grid.rows-m-10-equal { grid-template-rows: repeat(10, 1fr); } .grid.rows-m-11-equal { grid-template-rows: repeat(11, 1fr); } .grid.rows-m-12-equal { grid-template-rows: repeat(12, 1fr); } /* Columns */ .col-m-0 { display: none; } .col-m-1 { grid-column: 1; } .col-m-2 { grid-column: 2; } .col-m-3 { grid-column: 3; } .col-m-4 { grid-column: 4; } .col-m-5 { grid-column: 5; } .col-m-6 { grid-column: 6; } .col-m-7 { grid-column: 7; } .col-m-8 { grid-column: 8; } .col-m-9 { grid-column: 9; } .col-m-10 { grid-column: 10; } .col-m-11 { grid-column: 11; } .col-m-12 { grid-column: 12; } /* Rows */ .row-m-0 { display: none; } .row-m-1 { grid-row: 1; } .row-m-2 { grid-row: 2; } .row-m-3 { grid-row: 3; } .row-m-4 { grid-row: 4; } .row-m-5 { grid-row: 5; } .row-m-6 { grid-row: 6; } .row-m-7 { grid-row: 7; } .row-m-8 { grid-row: 8; } .row-m-9 { grid-row: 9; } .row-m-10 { grid-row: 10; } .row-m-11 { grid-row: 11; } .row-m-12 { grid-row: 12; } .col-m-1-2 { grid-column: 1/span 2; } .col-m-1-3 { grid-column: 1/span 3; } .col-m-1-4 { grid-column: 1/span 4; } .col-m-1-5 { grid-column: 1/span 5; } .col-m-1-6 { grid-column: 1/span 6; } .col-m-1-7 { grid-column: 1/span 7; } .col-m-1-8 { grid-column: 1/span 8; } .col-m-1-9 { grid-column: 1/span 9; } .col-m-1-10 { grid-column: 1/span 10; } .col-m-1-11 { grid-column: 1/span 11; } .col-m-1-12 { grid-column: 1/span 12; } .col-m-2-2 { grid-column: 2/span 2; } .col-m-2-3 { grid-column: 2/span 3; } .col-m-2-4 { grid-column: 2/span 4; } .col-m-2-5 { grid-column: 2/span 5; } .col-m-2-6 { grid-column: 2/span 6; } .col-m-2-7 { grid-column: 2/span 7; } .col-m-2-8 { grid-column: 2/span 8; } .col-m-2-9 { grid-column: 2/span 9; } .col-m-2-10 { grid-column: 2/span 10; } .col-m-2-11 { grid-column: 2/span 11; } .col-m-3-2 { grid-column: 3/span 2; } .col-m-3-3 { grid-column: 3/span 3; } .col-m-3-4 { grid-column: 3/span 4; } .col-m-3-5 { grid-column: 3/span 5; } .col-m-3-6 { grid-column: 3/span 6; } .col-m-3-7 { grid-column: 3/span 7; } .col-m-3-8 { grid-column: 3/span 8; } .col-m-3-9 { grid-column: 3/span 9; } .col-m-3-10 { grid-column: 3/span 10; } .col-m-4-2 { grid-column: 4/span 2; } .col-m-4-3 { grid-column: 4/span 3; } .col-m-4-4 { grid-column: 4/span 5; } .col-m-4-5 { grid-column: 4/span 5; } .col-m-4-6 { grid-column: 4/span 6; } .col-m-4-7 { grid-column: 4/span 7; } .col-m-4-8 { grid-column: 4/span 8; } .col-m-4-9 { grid-column: 4/span 9; } .col-m-5-2 { grid-column: 5/span 2; } .col-m-5-3 { grid-column: 5/span 3; } .col-m-5-4 { grid-column: 5/span 4; } .col-m-5-5 { grid-column: 5/span 5; } .col-m-5-6 { grid-column: 5/span 6; } .col-m-5-7 { grid-column: 5/span 7; } .col-m-5-8 { grid-column: 5/span 8; } .col-m-6-2 { grid-column: 6/span 2; } .col-m-6-3 { grid-column: 6/span 3; } .col-m-6-4 { grid-column: 6/span 4; } .col-m-6-5 { grid-column: 6/span 5; } .col-m-6-6 { grid-column: 6/span 6; } .col-m-6-7 { grid-column: 6/span 7; } .col-m-7-2 { grid-column: 7/span 2; } .col-m-7-3 { grid-column: 7/span 3; } .col-m-7-4 { grid-column: 7/span 4; } .col-m-7-5 { grid-column: 7/span 5; } .col-m-7-6 { grid-column: 7/span 6; } .col-m-8-2 { grid-column: 8/span 2; } .col-m-8-3 { grid-column: 8/span 3; } .col-m-8-4 { grid-column: 8/span 4; } .col-m-8-5 { grid-column: 8/span 5; } .col-m-9-2 { grid-column: 9/span 2; } .col-m-9-3 { grid-column: 9/span 3; } .col-m-9-4 { grid-column: 9/span 4; } .col-m-10-2 { grid-column: 10/span 2; } .col-m-10-3 { grid-column: 10/span 3; } .col-m-11-2 { grid-column: 11/span 2; } .row-m-1-2 { grid-row: 1/span 2; } .row-m-1-3 { grid-row: 1/span 3; } .row-m-1-4 { grid-row: 1/span 4; } .row-m-1-5 { grid-row: 1/span 5; } .row-m-1-6 { grid-row: 1/span 6; } .row-m-1-7 { grid-row: 1/span 7; } .row-m-1-8 { grid-row: 1/span 8; } .row-m-1-9 { grid-row: 1/span 9; } .row-m-1-10 { grid-row: 1/span 10; } .row-m-1-11 { grid-row: 1/span 11; } .row-m-1-12 { grid-row: 1/span 12; } .row-m-2-2 { grid-row: 2/span 2; } .row-m-2-3 { grid-row: 2/span 3; } .row-m-2-4 { grid-row: 2/span 4; } .row-m-2-5 { grid-row: 2/span 5; } .row-m-2-6 { grid-row: 2/span 6; } .row-m-2-7 { grid-row: 2/span 7; } .row-m-2-8 { grid-row: 2/span 8; } .row-m-2-9 { grid-row: 2/span 9; } .row-m-2-10 { grid-row: 2/span 10; } .row-m-2-11 { grid-row: 2/span 11; } .row-m-3-2 { grid-row: 3/span 2; } .row-m-3-3 { grid-row: 3/span 3; } .row-m-3-4 { grid-row: 3/span 4; } .row-m-3-5 { grid-row: 3/span 5; } .row-m-3-6 { grid-row: 3/span 6; } .row-m-3-7 { grid-row: 3/span 7; } .row-m-3-8 { grid-row: 3/span 8; } .row-m-3-9 { grid-row: 3/span 9; } .row-m-3-10 { grid-row: 3/span 10; } .row-m-4-2 { grid-row: 4/span 2; } .row-m-4-3 { grid-row: 4/span 3; } .row-m-4-4 { grid-row: 4/span 5; } .row-m-4-5 { grid-row: 4/span 5; } .row-m-4-6 { grid-row: 4/span 6; } .row-m-4-7 { grid-row: 4/span 7; } .row-m-4-8 { grid-row: 4/span 8; } .row-m-4-9 { grid-row: 4/span 9; } .row-m-5-2 { grid-row: 5/span 2; } .row-m-5-3 { grid-row: 5/span 3; } .row-m-5-4 { grid-row: 5/span 4; } .row-m-5-5 { grid-row: 5/span 5; } .row-m-5-6 { grid-row: 5/span 6; } .row-m-5-7 { grid-row: 5/span 7; } .row-m-5-8 { grid-row: 5/span 8; } .row-m-6-2 { grid-row: 6/span 2; } .row-m-6-3 { grid-row: 6/span 3; } .row-m-6-4 { grid-row: 6/span 4; } .row-m-6-5 { grid-row: 6/span 5; } .row-m-6-6 { grid-row: 6/span 6; } .row-m-6-7 { grid-row: 6/span 7; } .row-m-7-2 { grid-row: 7/span 2; } .row-m-7-3 { grid-row: 7/span 3; } .row-m-7-4 { grid-row: 7/span 4; } .row-m-7-5 { grid-row: 7/span 5; } .row-m-7-6 { grid-row: 7/span 6; } .row-m-8-2 { grid-row: 8/span 2; } .row-m-8-3 { grid-row: 8/span 3; } .row-m-8-4 { grid-row: 8/span 4; } .row-m-8-5 { grid-row: 8/span 5; } .row-m-9-2 { grid-row: 9/span 2; } .row-m-9-3 { grid-row: 9/span 3; } .row-m-9-4 { grid-row: 9/span 4; } .row-m-10-2 { grid-row: 10/span 2; } .row-m-10-3 { grid-row: 10/span 3; } .row-m-11-2 { grid-row: 11/span 2; } } /*------------------------------------------------------------------------------------------------------------------------------ 4 GAPS ------------------------------------------------------------------------------------------------------------------------------*/ .row-gap-0 { row-gap: 0; } .row-gap-1 { row-gap: 1rem; } .row-gap-2 { row-gap: 2rem; } .row-gap-3 { row-gap: 3rem; } .row-gap-4 { row-gap: 4rem; } .row-gap-5 { row-gap: 5rem; } .row-gap-6 { row-gap: 6rem; } .row-gap-7 { row-gap: 7rem; } .row-gap-8 { row-gap: 8rem; } .row-gap-9 { row-gap: 9rem; } .row-gap-10 { row-gap: 10rem; } .row-gap-11 { row-gap: 11rem; } .row-gap-12 { row-gap: 12rem; } .row-gap-13 { row-gap: 13rem; } .row-gap-14 { row-gap: 14rem; } .row-gap-15 { row-gap: 15rem; } .row-gap-16 { row-gap: 16rem; } .row-gap-17 { row-gap: 17rem; } .row-gap-18 { row-gap: 18rem; } .row-gap-19 { row-gap: 19rem; } .row-gap-20 { row-gap: 20rem; } .column-gap-0 { column-gap: 0; } .column-gap-1 { column-gap: 1rem; } .column-gap-2 { column-gap: 2rem; } .column-gap-3 { column-gap: 3rem; } .column-gap-4 { column-gap: 4rem; } .column-gap-5 { column-gap: 5rem; } .column-gap-6 { column-gap: 6rem; } .column-gap-7 { column-gap: 7rem; } .column-gap-8 { column-gap: 8rem; } .column-gap-9 { column-gap: 9rem; } .column-gap-10 { column-gap: 10rem; } /* ===================================== GAPS MOBILE ===================================== */ @media (max-width: 767px) { .row-gap-0 { row-gap: 0; } .row-gap-1 { row-gap: 0.4rem; } .row-gap-2 { row-gap: 0.8rem; } .row-gap-3 { row-gap: 1.2rem; } .row-gap-4 { row-gap: 1.6rem; } .row-gap-5 { row-gap: 2rem; } .row-gap-6 { row-gap: 2.4rem; } .row-gap-7 { row-gap: 2.8rem; } .row-gap-8 { row-gap: 3.2rem; } .row-gap-9 { row-gap: 3.6rem; } .row-gap-10 { row-gap: 4rem; } .row-gap-11 { row-gap: 4.4rem; } .row-gap-12 { row-gap: 4.8rem; } .row-gap-13 { row-gap: 5.2rem; } .row-gap-14 { row-gap: 5.6rem; } .row-gap-15 { row-gap: 6rem; } .row-gap-16 { row-gap: 6.4rem; } .row-gap-17 { row-gap: 6.8rem; } .row-gap-18 { row-gap: 7.2rem; } .row-gap-19 { row-gap: 7.6rem; } .row-gap-20 { row-gap: 8rem; } .column-gap-0 { column-gap: 0; } .column-gap-1 { column-gap: 0.4rem; } .column-gap-2 { column-gap: 0.8rem; } .column-gap-3 { column-gap: 1.2rem; } .column-gap-4 { column-gap: 1.6rem; } .column-gap-5 { column-gap: 2rem; } .column-gap-6 { column-gap: 2.4rem; } .column-gap-7 { column-gap: 2.8rem; } .column-gap-8 { column-gap: 3.2rem; } .column-gap-9 { column-gap: 3.6rem; } .column-gap-10 { column-gap: 4rem; } .row-gap-m-0 { row-gap: 0; } .row-gap-m-1 { row-gap: 1rem; } .row-gap-m-2 { row-gap: 2rem; } .row-gap-m-3 { row-gap: 3rem; } .row-gap-m-4 { row-gap: 4rem; } .row-gap-m-5 { row-gap: 5rem; } .row-gap-m-6 { row-gap: 6rem; } .row-gap-m-7 { row-gap: 7rem; } .row-gap-m-8 { row-gap: 8rem; } .row-gap-m-9 { row-gap: 9rem; } .row-gap-m-10 { row-gap: 10rem; } .row-gap-m-11 { row-gap: 11rem; } .row-gap-m-12 { row-gap: 12rem; } .row-gap-m-13 { row-gap: 13rem; } .row-gap-m-14 { row-gap: 14rem; } .row-gap-m-15 { row-gap: 15rem; } .row-gap-m-16 { row-gap: 16rem; } .row-gap-m-17 { row-gap: 17rem; } .row-gap-m-18 { row-gap: 18rem; } .row-gap-m-19 { row-gap: 19rem; } .row-gap-m-20 { row-gap: 20rem; } .column-gap-m-0 { column-gap: 0; } .column-gap-m-1 { column-gap: 1rem; } .column-gap-m-2 { column-gap: 2rem; } .column-gap-m-3 { column-gap: 3rem; } .column-gap-m-4 { column-gap: 4rem; } .column-gap-m-5 { column-gap: 5rem; } .column-gap-m-6 { column-gap: 6rem; } .column-gap-m-7 { column-gap: 7rem; } .column-gap-m-8 { column-gap: 8rem; } .column-gap-m-9 { column-gap: 9rem; } .column-gap-m-10 { column-gap: 10rem; } } /*------------------------------------------------------------------------------------------------------------------------------ 5 SPACINGS (Margins & Paddings) ------------------------------------------------------------------------------------------------------------------------------*/ /* ================================ MARGINS ================================ */ .m-1 { margin: 1rem; } .m-2 { margin: 2rem; } .m-3 { margin: 3rem; } .m-4 { margin: 4rem; } .m-5 { margin: 5rem; } .m-6 { margin: 6rem; } .m-7 { margin: 7rem; } .m-8 { margin: 8rem; } .m-9 { margin: 9rem; } .m-10 { margin: 10rem; } .m-11 { margin: 11rem; } .m-12 { margin: 12rem; } .m-13 { margin: 13rem; } .m-14 { margin: 14rem; } .m-15 { margin: 15rem; } .m-16 { margin: 16rem; } .m-17 { margin: 17rem; } .m-18 { margin: 18rem; } .m-19 { margin: 19rem; } .m-20 { margin: 20rem; } .m-21 { margin: 21rem; } .m-22 { margin: 22rem; } .m-23 { margin: 23rem; } .m-24 { margin: 24rem; } .m-25 { margin: 25rem; } .m-26 { margin: 26rem; } .m-27 { margin: 27rem; } .m-28 { margin: 28rem; } .m-29 { margin: 29rem; } .m-30 { margin: 30rem; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; } .mt-5 { margin-top: 5rem; } .mt-6 { margin-top: 6rem; } .mt-7 { margin-top: 7rem; } .mt-8 { margin-top: 8rem; } .mt-9 { margin-top: 9rem; } .mt-10 { margin-top: 10rem; } .mt-11 { margin-top: 11rem; } .mt-12 { margin-top: 12rem; } .mt-13 { margin-top: 13rem; } .mt-14 { margin-top: 14rem; } .mt-15 { margin-top: 15rem; } .mt-16 { margin-top: 16rem; } .mt-17 { margin-top: 17rem; } .mt-18 { margin-top: 18rem; } .mt-19 { margin-top: 19rem; } .mt-20 { margin-top: 20rem; } .mt-21 { margin-top: 21rem; } .mt-22 { margin-top: 22rem; } .mt-23 { margin-top: 23rem; } .mt-24 { margin-top: 24rem; } .mt-25 { margin-top: 25rem; } .mt-26 { margin-top: 26rem; } .mt-27 { margin-top: 27rem; } .mt-28 { margin-top: 28rem; } .mt-29 { margin-top: 29rem; } .mt-30 { margin-top: 30rem; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } .mb-4 { margin-bottom: 4rem; } .mb-5 { margin-bottom: 5rem; } .mb-6 { margin-bottom: 6rem; } .mb-7 { margin-bottom: 7rem; } .mb-8 { margin-bottom: 8rem; } .mb-9 { margin-bottom: 9rem; } .mb-10 { margin-bottom: 10rem; } .mb-11 { margin-bottom: 11rem; } .mb-12 { margin-bottom: 12rem; } .mb-13 { margin-bottom: 13rem; } .mb-14 { margin-bottom: 14rem; } .mb-15 { margin-bottom: 15rem; } .mb-16 { margin-bottom: 16rem; } .mb-17 { margin-bottom: 17rem; } .mb-18 { margin-bottom: 18rem; } .mb-19 { margin-bottom: 19rem; } .mb-20 { margin-bottom: 20rem; } .mb-21 { margin-bottom: 21rem; } .mb-22 { margin-bottom: 22rem; } .mb-23 { margin-bottom: 23rem; } .mb-24 { margin-bottom: 24rem; } .mb-25 { margin-bottom: 25rem; } .mb-26 { margin-bottom: 26rem; } .mb-27 { margin-bottom: 27rem; } .mb-28 { margin-bottom: 28rem; } .mb-29 { margin-bottom: 29rem; } .mb-30 { margin-bottom: 30rem; } .ml-1 { margin-left: 1rem; } .ml-2 { margin-left: 2rem; } .ml-3 { margin-left: 3rem; } .ml-4 { margin-left: 4rem; } .ml-5 { margin-left: 5rem; } .ml-6 { margin-left: 6rem; } .ml-7 { margin-left: 7rem; } .ml-8 { margin-left: 8rem; } .ml-9 { margin-left: 9rem; } .ml-10 { margin-left: 10rem; } .ml-11 { margin-left: 11rem; } .ml-12 { margin-left: 12rem; } .ml-13 { margin-left: 13rem; } .ml-14 { margin-left: 14rem; } .ml-15 { margin-left: 15rem; } .ml-16 { margin-left: 16rem; } .ml-17 { margin-left: 17rem; } .ml-18 { margin-left: 18rem; } .ml-19 { margin-left: 19rem; } .ml-20 { margin-left: 20rem; } .ml-21 { margin-left: 21rem; } .ml-22 { margin-left: 22rem; } .ml-23 { margin-left: 23rem; } .ml-24 { margin-left: 24rem; } .ml-25 { margin-left: 25rem; } .ml-26 { margin-left: 26rem; } .ml-27 { margin-left: 27rem; } .ml-28 { margin-left: 28rem; } .ml-29 { margin-left: 29rem; } .ml-30 { margin-left: 30rem; } .mr-1 { margin-right: 1rem; } .mr-2 { margin-right: 2rem; } .mr-3 { margin-right: 3rem; } .mr-4 { margin-right: 4rem; } .mr-5 { margin-right: 5rem; } .mr-6 { margin-right: 6rem; } .mr-7 { margin-right: 7rem; } .mr-8 { margin-right: 8rem; } .mr-9 { margin-right: 9rem; } .mr-10 { margin-right: 10rem; } .mr-11 { margin-right: 11rem; } .mr-12 { margin-right: 12rem; } .mr-13 { margin-right: 13rem; } .mr-14 { margin-right: 14rem; } .mr-15 { margin-right: 15rem; } .mr-16 { margin-right: 16rem; } .mr-17 { margin-right: 17rem; } .mr-18 { margin-right: 18rem; } .mr-19 { margin-right: 19rem; } .mr-20 { margin-right: 20rem; } .mr-21 { margin-right: 21rem; } .mr-22 { margin-right: 22rem; } .mr-23 { margin-right: 23rem; } .mr-24 { margin-right: 24rem; } .mr-25 { margin-right: 25rem; } .mr-26 { margin-right: 26rem; } .mr-27 { margin-right: 27rem; } .mr-28 { margin-right: 28rem; } .mr-29 { margin-right: 29rem; } .mr-30 { margin-right: 30rem; } .my-1 { margin-top: 1rem; margin-bottom: 1rem; } .my-2 { margin-top: 2rem; margin-bottom: 2rem; } .my-3 { margin-top: 3rem; margin-bottom: 3rem; } .my-4 { margin-top: 4rem; margin-bottom: 4rem; } .my-5 { margin-top: 5rem; margin-bottom: 5rem; } .my-6 { margin-top: 6rem; margin-bottom: 6rem; } .my-7 { margin-top: 7rem; margin-bottom: 7rem; } .my-8 { margin-top: 8rem; margin-bottom: 8rem; } .my-9 { margin-top: 9rem; margin-bottom: 9rem; } .my-10 { margin-top: 10rem; margin-bottom: 10rem; } .my-11 { margin-top: 11rem; margin-bottom: 11rem; } .my-12 { margin-top: 12rem; margin-bottom: 12rem; } .my-13 { margin-top: 13rem; margin-bottom: 13rem; } .my-14 { margin-top: 14rem; margin-bottom: 14rem; } .my-15 { margin-top: 15rem; margin-bottom: 15rem; } .my-16 { margin-top: 16rem; margin-bottom: 16rem; } .my-17 { margin-top: 17rem; margin-bottom: 17rem; } .my-18 { margin-top: 18rem; margin-bottom: 18rem; } .my-19 { margin-top: 19rem; margin-bottom: 19rem; } .my-20 { margin-top: 20rem; margin-bottom: 20rem; } .my-21 { margin-top: 21rem; margin-bottom: 21rem; } .my-22 { margin-top: 22rem; margin-bottom: 22rem; } .my-23 { margin-top: 23rem; margin-bottom: 23rem; } .my-24 { margin-top: 24rem; margin-bottom: 24rem; } .my-25 { margin-top: 25rem; margin-bottom: 25rem; } .my-26 { margin-top: 26rem; margin-bottom: 26rem; } .my-27 { margin-top: 27rem; margin-bottom: 27rem; } .my-28 { margin-top: 28rem; margin-bottom: 28rem; } .my-29 { margin-top: 29rem; margin-bottom: 29rem; } .my-30 { margin-top: 30rem; margin-bottom: 30rem; } .mx-1 { margin-left: 1rem; margin-right: 1rem; } .mx-2 { margin-left: 2rem; margin-right: 2rem; } .mx-3 { margin-left: 3rem; margin-right: 3rem; } .mx-4 { margin-left: 4rem; margin-right: 4rem; } .mx-5 { margin-left: 5rem; margin-right: 5rem; } .mx-6 { margin-left: 6rem; margin-right: 6rem; } .mx-7 { margin-left: 7rem; margin-right: 7rem; } .mx-8 { margin-left: 8rem; margin-right: 8rem; } .mx-9 { margin-left: 9rem; margin-right: 9rem; } .mx-10 { margin-left: 10rem; margin-right: 10rem; } .mx-11 { margin-left: 11rem; margin-right: 11rem; } .mx-12 { margin-left: 12rem; margin-right: 12rem; } .mx-13 { margin-left: 13rem; margin-right: 13rem; } .mx-14 { margin-left: 14rem; margin-right: 14rem; } .mx-15 { margin-left: 15rem; margin-right: 15rem; } .mx-16 { margin-left: 16rem; margin-right: 16rem; } .mx-17 { margin-left: 17rem; margin-right: 17rem; } .mx-18 { margin-left: 18rem; margin-right: 18rem; } .mx-19 { margin-left: 19rem; margin-right: 19rem; } .mx-20 { margin-left: 20rem; margin-right: 20rem; } .mx-21 { margin-left: 21rem; margin-right: 21rem; } .mx-22 { margin-left: 22rem; margin-right: 22rem; } .mx-23 { margin-left: 23rem; margin-right: 23rem; } .mx-24 { margin-left: 24rem; margin-right: 24rem; } .mx-25 { margin-left: 25rem; margin-right: 25rem; } .mx-26 { margin-left: 26rem; margin-right: 26rem; } .mx-27 { margin-left: 27rem; margin-right: 27rem; } .mx-28 { margin-left: 28rem; margin-right: 28rem; } .mx-29 { margin-left: 29rem; margin-right: 29rem; } .mx-30 { margin-left: 30rem; margin-right: 30rem; } /* ================================ PADDINGS ================================ */ .p-0 { padding: 0; } .p-1 { padding: 1rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; } .p-4 { padding: 4rem; } .p-5 { padding: 5rem; } .p-6 { padding: 6rem; } .p-7 { padding: 7rem; } .p-8 { padding: 8rem; } .p-9 { padding: 9rem; } .p-10 { padding: 10rem; } .p-11 { padding: 11rem; } .p-12 { padding: 12rem; } .p-13 { padding: 13rem; } .p-14 { padding: 14rem; } .p-15 { padding: 15rem; } .p-16 { padding: 16rem; } .p-17 { padding: 17rem; } .p-18 { padding: 18rem; } .p-19 { padding: 19rem; } .p-20 { padding: 20rem; } .p-21 { padding: 21rem; } .p-22 { padding: 22rem; } .p-23 { padding: 23rem; } .p-24 { padding: 24rem; } .p-25 { padding: 25rem; } .p-26 { padding: 26rem; } .p-27 { padding: 27rem; } .p-28 { padding: 28rem; } .p-29 { padding: 29rem; } .p-30 { padding: 30rem; } .pt-0 { padding-top: 0; } .pt-1 { padding-top: 1rem; } .pt-2 { padding-top: 2rem; } .pt-3 { padding-top: 3rem; } .pt-4 { padding-top: 4rem; } .pt-5 { padding-top: 5rem; } .pt-6 { padding-top: 6rem; } .pt-7 { padding-top: 7rem; } .pt-8 { padding-top: 8rem; } .pt-9 { padding-top: 9rem; } .pt-10 { padding-top: 10rem; } .pt-11 { padding-top: 11rem; } .pt-12 { padding-top: 12rem; } .pt-13 { padding-top: 13rem; } .pt-14 { padding-top: 14rem; } .pt-15 { padding-top: 15rem; } .pt-16 { padding-top: 16rem; } .pt-17 { padding-top: 17rem; } .pt-18 { padding-top: 18rem; } .pt-19 { padding-top: 19rem; } .pt-20 { padding-top: 20rem; } .pt-21 { padding-top: 21rem; } .pt-22 { padding-top: 22rem; } .pt-23 { padding-top: 23rem; } .pt-24 { padding-top: 24rem; } .pt-25 { padding-top: 25rem; } .pt-26 { padding-top: 26rem; } .pt-27 { padding-top: 27rem; } .pt-28 { padding-top: 28rem; } .pt-29 { padding-top: 29rem; } .pt-30 { padding-top: 30rem; } .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: 1rem; } .pb-2 { padding-bottom: 2rem; } .pb-3 { padding-bottom: 3rem; } .pb-4 { padding-bottom: 4rem; } .pb-5 { padding-bottom: 5rem; } .pb-6 { padding-bottom: 6rem; } .pb-7 { padding-bottom: 7rem; } .pb-8 { padding-bottom: 8rem; } .pb-9 { padding-bottom: 9rem; } .pb-10 { padding-bottom: 10rem; } .pb-11 { padding-bottom: 11rem; } .pb-12 { padding-bottom: 12rem; } .pb-13 { padding-bottom: 13rem; } .pb-14 { padding-bottom: 14rem; } .pb-15 { padding-bottom: 15rem; } .pb-16 { padding-bottom: 16rem; } .pb-17 { padding-bottom: 17rem; } .pb-18 { padding-bottom: 18rem; } .pb-19 { padding-bottom: 19rem; } .pb-20 { padding-bottom: 20rem; } .pb-21 { padding-bottom: 21rem; } .pb-22 { padding-bottom: 22rem; } .pb-23 { padding-bottom: 23rem; } .pb-24 { padding-bottom: 24rem; } .pb-25 { padding-bottom: 25rem; } .pb-26 { padding-bottom: 26rem; } .pb-27 { padding-bottom: 27rem; } .pb-28 { padding-bottom: 28rem; } .pb-29 { padding-bottom: 29rem; } .pb-30 { padding-bottom: 30rem; } .pl-0 { padding-left: 0; } .pl-1 { padding-left: 1rem; } .pl-2 { padding-left: 2rem; } .pl-3 { padding-left: 3rem; } .pl-4 { padding-left: 4rem; } .pl-5 { padding-left: 5rem; } .pl-6 { padding-left: 6rem; } .pl-7 { padding-left: 7rem; } .pl-8 { padding-left: 8rem; } .pl-9 { padding-left: 9rem; } .pl-10 { padding-left: 10rem; } .pl-11 { padding-left: 11rem; } .pl-12 { padding-left: 12rem; } .pl-13 { padding-left: 13rem; } .pl-14 { padding-left: 14rem; } .pl-15 { padding-left: 15rem; } .pl-16 { padding-left: 16rem; } .pl-17 { padding-left: 17rem; } .pl-18 { padding-left: 18rem; } .pl-19 { padding-left: 19rem; } .pl-20 { padding-left: 20rem; } .pl-21 { padding-left: 21rem; } .pl-22 { padding-left: 22rem; } .pl-23 { padding-left: 23rem; } .pl-24 { padding-left: 24rem; } .pl-25 { padding-left: 25rem; } .pl-26 { padding-left: 26rem; } .pl-27 { padding-left: 27rem; } .pl-28 { padding-left: 28rem; } .pl-29 { padding-left: 29rem; } .pl-30 { padding-left: 30rem; } .pr-0 { padding-right: 0; } .pr-1 { padding-right: 1rem; } .pr-2 { padding-right: 2rem; } .pr-3 { padding-right: 3rem; } .pr-4 { padding-right: 4rem; } .pr-5 { padding-right: 5rem; } .pr-6 { padding-right: 6rem; } .pr-7 { padding-right: 7rem; } .pr-8 { padding-right: 8rem; } .pr-9 { padding-right: 9rem; } .pr-10 { padding-right: 10rem; } .pr-11 { padding-right: 11rem; } .pr-12 { padding-right: 12rem; } .pr-13 { padding-right: 13rem; } .pr-14 { padding-right: 14rem; } .pr-15 { padding-right: 15rem; } .pr-16 { padding-right: 16rem; } .pr-17 { padding-right: 17rem; } .pr-18 { padding-right: 18rem; } .pr-19 { padding-right: 19rem; } .pr-20 { padding-right: 20rem; } .pr-21 { padding-right: 21rem; } .pr-22 { padding-right: 22rem; } .pr-23 { padding-right: 23rem; } .pr-24 { padding-right: 24rem; } .pr-25 { padding-right: 25rem; } .pr-26 { padding-right: 26rem; } .pr-27 { padding-right: 27rem; } .pr-28 { padding-right: 28rem; } .pr-29 { padding-right: 29rem; } .pr-30 { padding-right: 30rem; } .py-1 { padding-top: 1rem; padding-bottom: 1rem; } .py-2 { padding-top: 2rem; padding-bottom: 2rem; } .py-3 { padding-top: 3rem; padding-bottom: 3rem; } .py-4 { padding-top: 4rem; padding-bottom: 4rem; } .py-5 { padding-top: 5rem; padding-bottom: 5rem; } .py-6 { padding-top: 6rem; padding-bottom: 6rem; } .py-7 { padding-top: 7rem; padding-bottom: 7rem; } .py-8 { padding-top: 8rem; padding-bottom: 8rem; } .py-9 { padding-top: 9rem; padding-bottom: 9rem; } .py-10 { padding-top: 10rem; padding-bottom: 10rem; } .py-11 { padding-top: 11rem; padding-bottom: 11rem; } .py-12 { padding-top: 12rem; padding-bottom: 12rem; } .py-13 { padding-top: 13rem; padding-bottom: 13rem; } .py-14 { padding-top: 14rem; padding-bottom: 14rem; } .py-15 { padding-top: 15rem; padding-bottom: 15rem; } .py-16 { padding-top: 16rem; padding-bottom: 16rem; } .py-17 { padding-top: 17rem; padding-bottom: 17rem; } .py-18 { padding-top: 18rem; padding-bottom: 18rem; } .py-19 { padding-top: 19rem; padding-bottom: 19rem; } .py-20 { padding-top: 20rem; padding-bottom: 20rem; } .py-21 { padding-top: 21rem; padding-bottom: 21rem; } .py-22 { padding-top: 22rem; padding-bottom: 22rem; } .py-23 { padding-top: 23rem; padding-bottom: 23rem; } .py-24 { padding-top: 24rem; padding-bottom: 24rem; } .py-25 { padding-top: 25rem; padding-bottom: 25rem; } .py-26 { padding-top: 26rem; padding-bottom: 26rem; } .py-27 { padding-top: 27rem; padding-bottom: 27rem; } .py-28 { padding-top: 28rem; padding-bottom: 28rem; } .py-29 { padding-top: 29rem; padding-bottom: 29rem; } .py-30 { padding-top: 30rem; padding-bottom: 30rem; } .px-1 { padding-left: 1rem; padding-right: 1rem; } .px-2 { padding-left: 2rem; padding-right: 2rem; } .px-3 { padding-left: 3rem; padding-right: 3rem; } .px-4 { padding-left: 4rem; padding-right: 4rem; } .px-5 { padding-left: 5rem; padding-right: 5rem; } .px-6 { padding-left: 6rem; padding-right: 6rem; } .px-7 { padding-left: 7rem; padding-right: 7rem; } .px-8 { padding-left: 8rem; padding-right: 8rem; } .px-9 { padding-left: 9rem; padding-right: 9rem; } .px-10 { padding-left: 10rem; padding-right: 10rem; } .px-11 { padding-left: 11rem; padding-right: 11rem; } .px-12 { padding-left: 12rem; padding-right: 12rem; } .px-13 { padding-left: 13rem; padding-right: 13rem; } .px-14 { padding-left: 14rem; padding-right: 14rem; } .px-15 { padding-left: 15rem; padding-right: 15rem; } .px-16 { padding-left: 16rem; padding-right: 16rem; } .px-17 { padding-left: 17rem; padding-right: 17rem; } .px-18 { padding-left: 18rem; padding-right: 18rem; } .px-19 { padding-left: 19rem; padding-right: 19rem; } .px-20 { padding-left: 20rem; padding-right: 20rem; } .px-21 { padding-left: 21rem; padding-right: 21rem; } .px-22 { padding-left: 22rem; padding-right: 22rem; } .px-23 { padding-left: 23rem; padding-right: 23rem; } .px-24 { padding-left: 24rem; padding-right: 24rem; } .px-25 { padding-left: 25rem; padding-right: 25rem; } .px-26 { padding-left: 26rem; padding-right: 26rem; } .px-27 { padding-left: 27rem; padding-right: 27rem; } .px-28 { padding-left: 28rem; padding-right: 28rem; } .px-29 { padding-left: 29rem; padding-right: 29rem; } .px-30 { padding-left: 30rem; padding-right: 30rem; } /* ===================================== MOBILE ===================================== */ @media (max-width: 767px) { .m-1 { margin: 0.4rem; } .m-2 { margin: 0.8rem; } .m-3 { margin: 1.2rem; } .m-4 { margin: 1.6rem; } .m-5 { margin: 2rem; } .m-6 { margin: 2.4rem; } .m-7 { margin: 2.8rem; } .m-8 { margin: 3.2rem; } .m-9 { margin: 3.6rem; } .m-10 { margin: 4em; } .m-11 { margin: 4.4rem; } .m-12 { margin: 4.8rem; } .m-13 { margin: 5.2rem; } .m-14 { margin: 5.6rem; } .m-15 { margin: 6rem; } .m-16 { margin: 6.4rem; } .m-17 { margin: 6.8rem; } .m-18 { margin: 7.2rem; } .m-19 { margin: 7.6rem; } .m-20 { margin: 8rem; } .m-21 { margin: 8.4rem; } .m-22 { margin: 8.8rem; } .m-23 { margin: 9.2rem; } .m-24 { margin: 9.6rem; } .m-25 { margin: 10rem; } .m-26 { margin: 10.4rem; } .m-27 { margin: 10.8rem; } .m-28 { margin: 11.2rem; } .m-29 { margin: 11.6rem; } .m-30 { margin: 12rem; } .mt-1 { margin-top: 0.4rem; } .mt-2 { margin-top: 0.8rem; } .mt-3 { margin-top: 1.2rem; } .mt-4 { margin-top: 1.6rem; } .mt-5 { margin-top: 2rem; } .mt-6 { margin-top: 2.4rem; } .mt-7 { margin-top: 2.8rem; } .mt-8 { margin-top: 3.2rem; } .mt-9 { margin-top: 3.6rem; } .mt-10 { margin-top: 4rem; } .mt-11 { margin-top: 4.4rem; } .mt-12 { margin-top: 4.8rem; } .mt-13 { margin-top: 5.2rem; } .mt-14 { margin-top: 5.6rem; } .mt-15 { margin-top: 6rem; } .mt-16 { margin-top: 6.4rem; } .mt-17 { margin-top: 6.8rem; } .mt-18 { margin-top: 7.2rem; } .mt-19 { margin-top: 7.6rem; } .mt-20 { margin-top: 8rem; } .mt-21 { margin-top: 8.4rem; } .mt-22 { margin-top: 8.8rem; } .mt-23 { margin-top: 9.2rem; } .mt-24 { margin-top: 9.6rem; } .mt-25 { margin-top: 10rem; } .mt-26 { margin-top: 10.4rem; } .mt-27 { margin-top: 10.8rem; } .mt-28 { margin-top: 11.2rem; } .mt-29 { margin-top: 11.6rem; } .mt-30 { margin-top: 12rem; } .mb-1 { margin-bottom: 0.4rem; } .mb-2 { margin-bottom: 0.8rem; } .mb-3 { margin-bottom: 1.2rem; } .mb-4 { margin-bottom: 1.6rem; } .mb-5 { margin-bottom: 2rem; } .mb-6 { margin-bottom: 2.4rem; } .mb-7 { margin-bottom: 2.8rem; } .mb-8 { margin-bottom: 3.2rem; } .mb-9 { margin-bottom: 3.6rem; } .mb-10 { margin-bottom: 4rem; } .mb-11 { margin-bottom: 4.4rem; } .mb-12 { margin-bottom: 4.8rem; } .mb-13 { margin-bottom: 5.2rem; } .mb-14 { margin-bottom: 5.6rem; } .mb-15 { margin-bottom: 6rem; } .mb-16 { margin-bottom: 6.4rem; } .mb-17 { margin-bottom: 6.8rem; } .mb-18 { margin-bottom: 7.2rem; } .mb-19 { margin-bottom: 7.6rem; } .mb-20 { margin-bottom: 8rem; } .mb-21 { margin-bottom: 8.4rem; } .mb-22 { margin-bottom: 8.8rem; } .mb-23 { margin-bottom: 9.2rem; } .mb-24 { margin-bottom: 9.6rem; } .mb-25 { margin-bottom: 10rem; } .mb-26 { margin-bottom: 10.4rem; } .mb-27 { margin-bottom: 10.8rem; } .mb-28 { margin-bottom: 11.2rem; } .mb-29 { margin-bottom: 11.6rem; } .mb-30 { margin-bottom: 12rem; } .ml-1 { margin-left: 0.4rem; } .ml-2 { margin-left: 0.8rem; } .ml-3 { margin-left: 1.2rem; } .ml-4 { margin-left: 1.6rem; } .ml-5 { margin-left: 2rem; } .ml-6 { margin-left: 2.4rem; } .ml-7 { margin-left: 2.8rem; } .ml-8 { margin-left: 3.2rem; } .ml-9 { margin-left: 3.6rem; } .ml-10 { margin-left: 4rem; } .ml-11 { margin-left: 4.4rem; } .ml-12 { margin-left: 4.8rem; } .ml-13 { margin-left: 5.2rem; } .ml-14 { margin-left: 5.6rem; } .ml-15 { margin-left: 6rem; } .ml-16 { margin-left: 6.4rem; } .ml-17 { margin-left: 6.8rem; } .ml-18 { margin-left: 7.2rem; } .ml-19 { margin-left: 7.6rem; } .ml-20 { margin-left: 8rem; } .ml-21 { margin-left: 8.4rem; } .ml-22 { margin-left: 8.8rem; } .ml-23 { margin-left: 9.2rem; } .ml-24 { margin-left: 9.6rem; } .ml-25 { margin-left: 10rem; } .ml-26 { margin-left: 10.4rem; } .ml-27 { margin-left: 10.8rem; } .ml-28 { margin-left: 11.2rem; } .ml-29 { margin-left: 11.6rem; } .ml-30 { margin-left: 12rem; } .mr-1 { margin-right: 0.4rem; } .mr-2 { margin-right: 0.8rem; } .mr-3 { margin-right: 1.2rem; } .mr-4 { margin-right: 1.6rem; } .mr-5 { margin-right: 2rem; } .mr-6 { margin-right: 2.4rem; } .mr-7 { margin-right: 2.8rem; } .mr-8 { margin-right: 3.2rem; } .mr-9 { margin-right: 3.6rem; } .mr-10 { margin-right: 4rem; } .mr-11 { margin-right: 4.4rem; } .mr-12 { margin-right: 4.8rem; } .mr-13 { margin-right: 5.2rem; } .mr-14 { margin-right: 5.6rem; } .mr-15 { margin-right: 6rem; } .mr-16 { margin-right: 6.4rem; } .mr-17 { margin-right: 6.8rem; } .mr-18 { margin-right: 7.2rem; } .mr-19 { margin-right: 7.6rem; } .mr-20 { margin-right: 8rem; } .mr-21 { margin-right: 8.4rem; } .mr-22 { margin-right: 8.8rem; } .mr-23 { margin-right: 9.2rem; } .mr-24 { margin-right: 9.6rem; } .mr-25 { margin-right: 10rem; } .mr-26 { margin-right: 10.4rem; } .mr-27 { margin-right: 10.8rem; } .mr-28 { margin-right: 11.2rem; } .mr-29 { margin-right: 11.6rem; } .mr-30 { margin-right: 12rem; } .my-1 { margin-top: 0.4rem; margin-bottom: 0.4rem; } .my-2 { margin-top: 0.8rem; margin-bottom: 0.8rem; } .my-3 { margin-top: 1.2rem; margin-bottom: 1.2rem; } .my-4 { margin-top: 1.6rem; margin-bottom: 1.6rem; } .my-5 { margin-top: 2rem; margin-bottom: 2rem; } .my-6 { margin-top: 2.4rem; margin-bottom: 2.4rem; } .my-7 { margin-top: 2.8rem; margin-bottom: 2.8rem; } .my-8 { margin-top: 3.2rem; margin-bottom: 3.2rem; } .my-9 { margin-top: 3.6rem; margin-bottom: 3.6rem; } .my-10 { margin-top: 4rem; margin-bottom: 4rem; } .my-11 { margin-top: 4.4rem; margin-bottom: 4.4rem; } .my-12 { margin-top: 4.8rem; margin-bottom: 4.8rem; } .my-13 { margin-top: 5.2rem; margin-bottom: 5.2rem; } .my-14 { margin-top: 5.6rem; margin-bottom: 5.6rem; } .my-15 { margin-top: 6rem; margin-bottom: 6rem; } .my-16 { margin-top: 6.4rem; margin-bottom: 6.4rem; } .my-17 { margin-top: 6.8rem; margin-bottom: 6.8rem; } .my-18 { margin-top: 7.2rem; margin-bottom: 7.2rem; } .my-19 { margin-top: 7.6rem; margin-bottom: 7.6rem; } .my-20 { margin-top: 8rem; margin-bottom: 8rem; } .my-21 { margin-top: 8.4rem; margin-bottom: 8.4rem; } .my-22 { margin-top: 8.8rem; margin-bottom: 8.8rem; } .my-23 { margin-top: 9.2rem; margin-bottom: 9.2rem; } .my-24 { margin-top: 9.6rem; margin-bottom: 9.6rem; } .my-25 { margin-top: 10rem; margin-bottom: 10rem; } .my-26 { margin-top: 10.4rem; margin-bottom: 10.4rem; } .my-27 { margin-top: 10.8rem; margin-bottom: 10.8rem; } .my-28 { margin-top: 11.2rem; margin-bottom: 11.2rem; } .my-29 { margin-top: 11.6rem; margin-bottom: 11.6rem; } .my-30 { margin-top: 12rem; margin-bottom: 12rem; } .mx-1 { margin-left: 0.4rem; margin-right: 0.4rem; } .mx-2 { margin-left: 0.8rem; margin-right: 0.8rem; } .mx-3 { margin-left: 1.2rem; margin-right: 1.2rem; } .mx-4 { margin-left: 1.6rem; margin-right: 1.6rem; } .mx-5 { margin-left: 2rem; margin-right: 2rem; } .mx-6 { margin-left: 2.4rem; margin-right: 2.4rem; } .mx-7 { margin-left: 2.8rem; margin-right: 2.8rem; } .mx-8 { margin-left: 3.2rem; margin-right: 3.2rem; } .mx-9 { margin-left: 3.6rem; margin-right: 3.6rem; } .mx-10 { margin-left: 4rem; margin-right: 4rem; } .mx-11 { margin-left: 4.4rem; margin-right: 4.4rem; } .mx-12 { margin-left: 4.8rem; margin-right: 4.8rem; } .mx-13 { margin-left: 5.2rem; margin-right: 5.2rem; } .mx-14 { margin-left: 5.6rem; margin-right: 5.6rem; } .mx-15 { margin-left: 6rem; margin-right: 6rem; } .mx-16 { margin-left: 6.4rem; margin-right: 6.4rem; } .mx-17 { margin-left: 6.8rem; margin-right: 6.8rem; } .mx-18 { margin-left: 7.2rem; margin-right: 7.2rem; } .mx-19 { margin-left: 7.6rem; margin-right: 7.6rem; } .mx-20 { margin-left: 8rem; margin-right: 8rem; } .mx-21 { margin-left: 8.4rem; margin-right: 8.4rem; } .mx-22 { margin-left: 8.8rem; margin-right: 8.8rem; } .mx-23 { margin-left: 9.2rem; margin-right: 9.2rem; } .mx-24 { margin-left: 9.6rem; margin-right: 9.6rem; } .mx-25 { margin-left: 10rem; margin-right: 10rem; } .mx-26 { margin-left: 10.4rem; margin-right: 10.4rem; } .mx-27 { margin-left: 10.8rem; margin-right: 10.8rem; } .mx-28 { margin-left: 11.2rem; margin-right: 11.2rem; } .mx-29 { margin-left: 11.6rem; margin-right: 11.6rem; } .mx-30 { margin-left: 12rem; margin-right: 12rem; } .p-1 { padding: 0.4rem; } .p-2 { padding: 0.8rem; } .p-3 { padding: 1.2rem; } .p-4 { padding: 1.6rem; } .p-5 { padding: 2rem; } .p-6 { padding: 2.4rem; } .p-7 { padding: 2.8rem; } .p-8 { padding: 3.2rem; } .p-9 { padding: 3.6rem; } .p-10 { padding: 4rem; } .p-11 { padding: 4.4rem; } .p-12 { padding: 4.8rem; } .p-13 { padding: 5.2rem; } .p-14 { padding: 5.6rem; } .p-15 { padding: 6rem; } .p-16 { padding: 6.4rem; } .p-17 { padding: 6.8rem; } .p-18 { padding: 7.2rem; } .p-19 { padding: 7.6rem; } .p-20 { padding: 8rem; } .p-21 { padding: 8.4rem; } .p-22 { padding: 8.8rem; } .p-23 { padding: 9.2rem; } .p-24 { padding: 9.6rem; } .p-25 { padding: 10rem; } .p-26 { padding: 10.4rem; } .p-27 { padding: 10.8rem; } .p-28 { padding: 11.2rem; } .p-29 { padding: 11.6rem; } .p-30 { padding: 12rem; } .pt-1 { padding-top: 0.4rem; } .pt-2 { padding-top: 0.8rem; } .pt-3 { padding-top: 1.2rem; } .pt-4 { padding-top: 1.6rem; } .pt-5 { padding-top: 2rem; } .pt-6 { padding-top: 2.4rem; } .pt-7 { padding-top: 2.8rem; } .pt-8 { padding-top: 3.2rem; } .pt-9 { padding-top: 3.6rem; } .pt-10 { padding-top: 4rem; } .pt-11 { padding-top: 4.4rem; } .pt-12 { padding-top: 4.8rem; } .pt-13 { padding-top: 5.2rem; } .pt-14 { padding-top: 5.6rem; } .pt-15 { padding-top: 6rem; } .pt-16 { padding-top: 6.4rem; } .pt-17 { padding-top: 6.8rem; } .pt-18 { padding-top: 7.2rem; } .pt-19 { padding-top: 7.6rem; } .pt-20 { padding-top: 8rem; } .pt-21 { padding-top: 8.4rem; } .pt-22 { padding-top: 8.8rem; } .pt-23 { padding-top: 9.2rem; } .pt-24 { padding-top: 9.6rem; } .pt-25 { padding-top: 10rem; } .pt-26 { padding-top: 10.4rem; } .pt-27 { padding-top: 10.8rem; } .pt-28 { padding-top: 11.2rem; } .pt-29 { padding-top: 11.6rem; } .pt-30 { padding-top: 12rem; } .pb-1 { padding-bottom: 0.4rem; } .pb-2 { padding-bottom: 0.8rem; } .pb-3 { padding-bottom: 1.2rem; } .pb-4 { padding-bottom: 1.6rem; } .pb-5 { padding-bottom: 2rem; } .pb-6 { padding-bottom: 2.4rem; } .pb-7 { padding-bottom: 2.8rem; } .pb-8 { padding-bottom: 3.2rem; } .pb-9 { padding-bottom: 3.6rem; } .pb-10 { padding-bottom: 4rem; } .pb-11 { padding-bottom: 4.4rem; } .pb-12 { padding-bottom: 4.8rem; } .pb-13 { padding-bottom: 5.2rem; } .pb-14 { padding-bottom: 5.6rem; } .pb-15 { padding-bottom: 6rem; } .pb-16 { padding-bottom: 6.4rem; } .pb-17 { padding-bottom: 6.8rem; } .pb-18 { padding-bottom: 7.2rem; } .pb-19 { padding-bottom: 7.6rem; } .pb-20 { padding-bottom: 8rem; } .pb-21 { padding-bottom: 8.4rem; } .pb-22 { padding-bottom: 8.8rem; } .pb-23 { padding-bottom: 9.2rem; } .pb-24 { padding-bottom: 9.6rem; } .pb-25 { padding-bottom: 10rem; } .pb-26 { padding-bottom: 10.4rem; } .pb-27 { padding-bottom: 10.8rem; } .pb-28 { padding-bottom: 11.2rem; } .pb-29 { padding-bottom: 11.6rem; } .pb-30 { padding-bottom: 12rem; } .pl-1 { padding-left: 0.4rem; } .pl-2 { padding-left: 0.8rem; } .pl-3 { padding-left: 1.2rem; } .pl-4 { padding-left: 1.6rem; } .pl-5 { padding-left: 2rem; } .pl-6 { padding-left: 2.4rem; } .pl-7 { padding-left: 2.8rem; } .pl-8 { padding-left: 3.2rem; } .pl-9 { padding-left: 3.6rem; } .pl-10 { padding-left: 4rem; } .pl-11 { padding-left: 4.4rem; } .pl-12 { padding-left: 4.8rem; } .pl-13 { padding-left: 5.2rem; } .pl-14 { padding-left: 5.6rem; } .pl-15 { padding-left: 6rem; } .pl-16 { padding-left: 6.4rem; } .pl-17 { padding-left: 6.8rem; } .pl-18 { padding-left: 7.2rem; } .pl-19 { padding-left: 7.6rem; } .pl-20 { padding-left: 8rem; } .pl-21 { padding-left: 8.4rem; } .pl-22 { padding-left: 8.8rem; } .pl-23 { padding-left: 9.2rem; } .pl-24 { padding-left: 9.6rem; } .pl-25 { padding-left: 10rem; } .pl-26 { padding-left: 10.4rem; } .pl-27 { padding-left: 10.8rem; } .pl-28 { padding-left: 11.2rem; } .pl-29 { padding-left: 11.6rem; } .pl-30 { padding-left: 12rem; } .pr-1 { padding-right: 0.4rem; } .pr-2 { padding-right: 0.8rem; } .pr-3 { padding-right: 1.2rem; } .pr-4 { padding-right: 1.6rem; } .pr-5 { padding-right: 2rem; } .pr-6 { padding-right: 2.4rem; } .pr-7 { padding-right: 2.8rem; } .pr-8 { padding-right: 3.2rem; } .pr-9 { padding-right: 3.6rem; } .pr-10 { padding-right: 4rem; } .pr-11 { padding-right: 4.4rem; } .pr-12 { padding-right: 4.8rem; } .pr-13 { padding-right: 5.2rem; } .pr-14 { padding-right: 5.6rem; } .pr-15 { padding-right: 6rem; } .pr-16 { padding-right: 6.4rem; } .pr-17 { padding-right: 6.8rem; } .pr-18 { padding-right: 7.2rem; } .pr-19 { padding-right: 7.6rem; } .pr-20 { padding-right: 8rem; } .pr-21 { padding-right: 8.4rem; } .pr-22 { padding-right: 8.8rem; } .pr-23 { padding-right: 9.2rem; } .pr-24 { padding-right: 9.6rem; } .pr-25 { padding-right: 10rem; } .pr-26 { padding-right: 10.4rem; } .pr-27 { padding-right: 10.8rem; } .pr-28 { padding-right: 11.2rem; } .pr-29 { padding-right: 11.6rem; } .pr-30 { padding-right: 12rem; } .py-1 { padding-top: 0.4rem; padding-bottom: 0.4rem; } .py-2 { padding-top: 0.8rem; padding-bottom: 0.8rem; } .py-3 { padding-top: 1.2rem; padding-bottom: 1.2rem; } .py-4 { padding-top: 1.6rem; padding-bottom: 1.6rem; } .py-5 { padding-top: 2rem; padding-bottom: 2rem; } .py-6 { padding-top: 2.4rem; padding-bottom: 2.4rem; } .py-7 { padding-top: 2.8rem; padding-bottom: 2.8rem; } .py-8 { padding-top: 3.2rem; padding-bottom: 3.2rem; } .py-9 { padding-top: 3.6rem; padding-bottom: 3.6rem; } .py-10 { padding-top: 4rem; padding-bottom: 4rem; } .py-11 { padding-top: 4.4rem; padding-bottom: 4.4rem; } .py-12 { padding-top: 4.8rem; padding-bottom: 4.8rem; } .py-13 { padding-top: 5.2rem; padding-bottom: 5.2rem; } .py-14 { padding-top: 5.6rem; padding-bottom: 5.6rem; } .py-15 { padding-top: 6rem; padding-bottom: 6rem; } .py-16 { padding-top: 6.4rem; padding-bottom: 6.4rem; } .py-17 { padding-top: 6.8rem; padding-bottom: 6.8rem; } .py-18 { padding-top: 7.2rem; padding-bottom: 7.2rem; } .py-19 { padding-top: 7.6rem; padding-bottom: 7.6rem; } .py-20 { padding-top: 8rem; padding-bottom: 8rem; } .py-21 { padding-top: 8.4rem; padding-bottom: 8.4rem; } .py-22 { padding-top: 8.8rem; padding-bottom: 8.8rem; } .py-23 { padding-top: 9.2rem; padding-bottom: 9.2rem; } .py-24 { padding-top: 9.6rem; padding-bottom: 9.6rem; } .py-25 { padding-top: 10rem; padding-bottom: 10rem; } .py-26 { padding-top: 10.4rem; padding-bottom: 10.4rem; } .py-27 { padding-top: 10.8rem; padding-bottom: 10.8rem; } .py-28 { padding-top: 11.2rem; padding-bottom: 11.2rem; } .py-29 { padding-top: 11.6rem; padding-bottom: 11.6rem; } .py-30 { padding-top: 12rem; padding-bottom: 12rem; } .px-1 { padding-left: 0.4rem; padding-right: 0.4rem; } .px-2 { padding-left: 0.8rem; padding-right: 0.8rem; } .px-3 { padding-left: 1.2rem; padding-right: 1.2rem; } .px-4 { padding-left: 1.6rem; padding-right: 1.6rem; } .px-5 { padding-left: 2rem; padding-right: 2rem; } .px-6 { padding-left: 2.4rem; padding-right: 2.4rem; } .px-7 { padding-left: 2.8rem; padding-right: 2.8rem; } .px-8 { padding-left: 3.2rem; padding-right: 3.2rem; } .px-9 { padding-left: 3.6rem; padding-right: 3.6rem; } .px-10 { padding-left: 4rem; padding-right: 4rem; } .px-11 { padding-left: 4.4rem; padding-right: 4.4rem; } .px-12 { padding-left: 4.8rem; padding-right: 4.8rem; } .px-13 { padding-left: 5.2rem; padding-right: 5.2rem; } .px-14 { padding-left: 5.6rem; padding-right: 5.6rem; } .px-15 { padding-left: 6rem; padding-right: 6rem; } .px-16 { padding-left: 6.4rem; padding-right: 6.4rem; } .px-17 { padding-left: 6.8rem; padding-right: 6.8rem; } .px-18 { padding-left: 7.2rem; padding-right: 7.2rem; } .px-19 { padding-left: 7.6rem; padding-right: 7.6rem; } .px-20 { padding-left: 8rem; padding-right: 8rem; } .px-21 { padding-left: 8.4rem; padding-right: 8.4rem; } .px-22 { padding-left: 8.8rem; padding-right: 8.8rem; } .px-23 { padding-left: 9.2rem; padding-right: 9.2rem; } .px-24 { padding-left: 9.6rem; padding-right: 9.6rem; } .px-25 { padding-left: 10rem; padding-right: 10rem; } .px-26 { padding-left: 10.4rem; padding-right: 10.4rem; } .px-27 { padding-left: 10.8rem; padding-right: 10.8rem; } .px-28 { padding-left: 11.2rem; padding-right: 11.2rem; } .px-29 { padding-left: 11.6rem; padding-right: 11.6rem; } .px-30 { padding-left: 12rem; padding-right: 12rem; } /* ================================ MARGINS ================================ */ .m-m-1 { margin: 1rem; } .m-m-2 { margin: 2rem; } .m-m-3 { margin: 3rem; } .m-m-4 { margin: 4rem; } .m-m-5 { margin: 5rem; } .m-m-6 { margin: 6rem; } .m-m-7 { margin: 7rem; } .m-m-8 { margin: 8rem; } .m-m-9 { margin: 9rem; } .m-m-10 { margin: 10rem; } .m-m-11 { margin: 11rem; } .m-m-12 { margin: 12rem; } .m-m-13 { margin: 13rem; } .m-m-14 { margin: 14rem; } .m-m-15 { margin: 15rem; } .m-m-16 { margin: 16rem; } .m-m-17 { margin: 17rem; } .m-m-18 { margin: 18rem; } .m-m-19 { margin: 19rem; } .m-m-20 { margin: 20rem; } .m-m-21 { margin: 21rem; } .m-m-22 { margin: 22rem; } .m-m-23 { margin: 23rem; } .m-m-24 { margin: 24rem; } .m-m-25 { margin: 25rem; } .m-m-26 { margin: 26rem; } .m-m-27 { margin: 27rem; } .m-m-28 { margin: 28rem; } .m-m-29 { margin: 29rem; } .m-m-30 { margin: 30rem; } .mt-m-1 { margin-top: 1rem; } .mt-m-2 { margin-top: 2rem; } .mt-m-3 { margin-top: 3rem; } .mt-m-4 { margin-top: 4rem; } .mt-m-5 { margin-top: 5rem; } .mt-m-6 { margin-top: 6rem; } .mt-m-7 { margin-top: 7rem; } .mt-m-8 { margin-top: 8rem; } .mt-m-9 { margin-top: 9rem; } .mt-m-10 { margin-top: 10rem; } .mt-m-11 { margin-top: 11rem; } .mt-m-12 { margin-top: 12rem; } .mt-m-13 { margin-top: 13rem; } .mt-m-14 { margin-top: 14rem; } .mt-m-15 { margin-top: 15rem; } .mt-m-16 { margin-top: 16rem; } .mt-m-17 { margin-top: 17rem; } .mt-m-18 { margin-top: 18rem; } .mt-m-19 { margin-top: 19rem; } .mt-m-20 { margin-top: 20rem; } .mt-m-21 { margin-top: 21rem; } .mt-m-22 { margin-top: 22rem; } .mt-m-23 { margin-top: 23rem; } .mt-m-24 { margin-top: 24rem; } .mt-m-25 { margin-top: 25rem; } .mt-m-26 { margin-top: 26rem; } .mt-m-27 { margin-top: 27rem; } .mt-m-28 { margin-top: 28rem; } .mt-m-29 { margin-top: 29rem; } .mt-m-30 { margin-top: 30rem; } .mb-m-1 { margin-bottom: 1rem; } .mb-m-2 { margin-bottom: 2rem; } .mb-m-3 { margin-bottom: 3rem; } .mb-m-4 { margin-bottom: 4rem; } .mb-m-5 { margin-bottom: 5rem; } .mb-m-6 { margin-bottom: 6rem; } .mb-m-7 { margin-bottom: 7rem; } .mb-m-8 { margin-bottom: 8rem; } .mb-m-9 { margin-bottom: 9rem; } .mb-m-10 { margin-bottom: 10rem; } .mb-m-11 { margin-bottom: 11rem; } .mb-m-12 { margin-bottom: 12rem; } .mb-m-13 { margin-bottom: 13rem; } .mb-m-14 { margin-bottom: 14rem; } .mb-m-15 { margin-bottom: 15rem; } .mb-m-16 { margin-bottom: 16rem; } .mb-m-17 { margin-bottom: 17rem; } .mb-m-18 { margin-bottom: 18rem; } .mb-m-19 { margin-bottom: 19rem; } .mb-m-20 { margin-bottom: 20rem; } .mb-m-21 { margin-bottom: 21rem; } .mb-m-22 { margin-bottom: 22rem; } .mb-m-23 { margin-bottom: 23rem; } .mb-m-24 { margin-bottom: 24rem; } .mb-m-25 { margin-bottom: 25rem; } .mb-m-26 { margin-bottom: 26rem; } .mb-m-27 { margin-bottom: 27rem; } .mb-m-28 { margin-bottom: 28rem; } .mb-m-29 { margin-bottom: 29rem; } .mb-m-30 { margin-bottom: 30rem; } .ml-m-1 { margin-left: 1rem; } .ml-m-2 { margin-left: 2rem; } .ml-m-3 { margin-left: 3rem; } .ml-m-4 { margin-left: 4rem; } .ml-m-5 { margin-left: 5rem; } .ml-m-6 { margin-left: 6rem; } .ml-m-7 { margin-left: 7rem; } .ml-m-8 { margin-left: 8rem; } .ml-m-9 { margin-left: 9rem; } .ml-m-10 { margin-left: 10rem; } .ml-m-11 { margin-left: 11rem; } .ml-m-12 { margin-left: 12rem; } .ml-m-13 { margin-left: 13rem; } .ml-m-14 { margin-left: 14rem; } .ml-m-15 { margin-left: 15rem; } .ml-m-16 { margin-left: 16rem; } .ml-m-17 { margin-left: 17rem; } .ml-m-18 { margin-left: 18rem; } .ml-m-19 { margin-left: 19rem; } .ml-m-20 { margin-left: 20rem; } .ml-m-21 { margin-left: 21rem; } .ml-m-22 { margin-left: 22rem; } .ml-m-23 { margin-left: 23rem; } .ml-m-24 { margin-left: 24rem; } .ml-m-25 { margin-left: 25rem; } .ml-m-26 { margin-left: 26rem; } .ml-m-27 { margin-left: 27rem; } .ml-m-28 { margin-left: 28rem; } .ml-m-29 { margin-left: 29rem; } .ml-m-30 { margin-left: 30rem; } .mr-m-1 { margin-right: 1rem; } .mr-m-2 { margin-right: 2rem; } .mr-m-3 { margin-right: 3rem; } .mr-m-4 { margin-right: 4rem; } .mr-m-5 { margin-right: 5rem; } .mr-m-6 { margin-right: 6rem; } .mr-m-7 { margin-right: 7rem; } .mr-m-8 { margin-right: 8rem; } .mr-m-9 { margin-right: 9rem; } .mr-m-10 { margin-right: 10rem; } .mr-m-11 { margin-right: 11rem; } .mr-m-12 { margin-right: 12rem; } .mr-m-13 { margin-right: 13rem; } .mr-m-14 { margin-right: 14rem; } .mr-m-15 { margin-right: 15rem; } .mr-m-16 { margin-right: 16rem; } .mr-m-17 { margin-right: 17rem; } .mr-m-18 { margin-right: 18rem; } .mr-m-19 { margin-right: 19rem; } .mr-m-20 { margin-right: 20rem; } .mr-m-21 { margin-right: 21rem; } .mr-m-22 { margin-right: 22rem; } .mr-m-23 { margin-right: 23rem; } .mr-m-24 { margin-right: 24rem; } .mr-m-25 { margin-right: 25rem; } .mr-m-26 { margin-right: 26rem; } .mr-m-27 { margin-right: 27rem; } .mr-m-28 { margin-right: 28rem; } .mr-m-29 { margin-right: 29rem; } .mr-m-30 { margin-right: 30rem; } .my-m-1 { margin-top: 1rem; margin-bottom: 1rem; } .my-m-2 { margin-top: 2rem; margin-bottom: 2rem; } .my-m-3 { margin-top: 3rem; margin-bottom: 3rem; } .my-m-4 { margin-top: 4rem; margin-bottom: 4rem; } .my-m-5 { margin-top: 5rem; margin-bottom: 5rem; } .my-m-6 { margin-top: 6rem; margin-bottom: 6rem; } .my-m-7 { margin-top: 7rem; margin-bottom: 7rem; } .my-m-8 { margin-top: 8rem; margin-bottom: 8rem; } .my-m-9 { margin-top: 9rem; margin-bottom: 9rem; } .my-m-10 { margin-top: 10rem; margin-bottom: 10rem; } .my-m-11 { margin-top: 11rem; margin-bottom: 11rem; } .my-m-12 { margin-top: 12rem; margin-bottom: 12rem; } .my-m-13 { margin-top: 13rem; margin-bottom: 13rem; } .my-m-14 { margin-top: 14rem; margin-bottom: 14rem; } .my-m-15 { margin-top: 15rem; margin-bottom: 15rem; } .my-m-16 { margin-top: 16rem; margin-bottom: 16rem; } .my-m-17 { margin-top: 17rem; margin-bottom: 17rem; } .my-m-18 { margin-top: 18rem; margin-bottom: 18rem; } .my-m-19 { margin-top: 19rem; margin-bottom: 19rem; } .my-m-20 { margin-top: 20rem; margin-bottom: 20rem; } .my-m-21 { margin-top: 21rem; margin-bottom: 21rem; } .my-m-22 { margin-top: 22rem; margin-bottom: 22rem; } .my-m-23 { margin-top: 23rem; margin-bottom: 23rem; } .my-m-24 { margin-top: 24rem; margin-bottom: 24rem; } .my-m-25 { margin-top: 25rem; margin-bottom: 25rem; } .my-m-26 { margin-top: 26rem; margin-bottom: 26rem; } .my-m-27 { margin-top: 27rem; margin-bottom: 27rem; } .my-m-28 { margin-top: 28rem; margin-bottom: 28rem; } .my-m-29 { margin-top: 29rem; margin-bottom: 29rem; } .my-m-30 { margin-top: 30rem; margin-bottom: 30rem; } .mx-m-1 { margin-left: 1rem; margin-right: 1rem; } .mx-m-2 { margin-left: 2rem; margin-right: 2rem; } .mx-m-3 { margin-left: 3rem; margin-right: 3rem; } .mx-m-4 { margin-left: 4rem; margin-right: 4rem; } .mx-m-5 { margin-left: 5rem; margin-right: 5rem; } .mx-m-6 { margin-left: 6rem; margin-right: 6rem; } .mx-m-7 { margin-left: 7rem; margin-right: 7rem; } .mx-m-8 { margin-left: 8rem; margin-right: 8rem; } .mx-m-9 { margin-left: 9rem; margin-right: 9rem; } .mx-m-10 { margin-left: 10rem; margin-right: 10rem; } .mx-m-11 { margin-left: 11rem; margin-right: 11rem; } .mx-m-12 { margin-left: 12rem; margin-right: 12rem; } .mx-m-13 { margin-left: 13rem; margin-right: 13rem; } .mx-m-14 { margin-left: 14rem; margin-right: 14rem; } .mx-m-15 { margin-left: 15rem; margin-right: 15rem; } .mx-m-16 { margin-left: 16rem; margin-right: 16rem; } .mx-m-17 { margin-left: 17rem; margin-right: 17rem; } .mx-m-18 { margin-left: 18rem; margin-right: 18rem; } .mx-m-19 { margin-left: 19rem; margin-right: 19rem; } .mx-m-20 { margin-left: 20rem; margin-right: 20rem; } .mx-m-21 { margin-left: 21rem; margin-right: 21rem; } .mx-m-22 { margin-left: 22rem; margin-right: 22rem; } .mx-m-23 { margin-left: 23rem; margin-right: 23rem; } .mx-m-24 { margin-left: 24rem; margin-right: 24rem; } .mx-m-25 { margin-left: 25rem; margin-right: 25rem; } .mx-m-26 { margin-left: 26rem; margin-right: 26rem; } .mx-m-27 { margin-left: 27rem; margin-right: 27rem; } .mx-m-28 { margin-left: 28rem; margin-right: 28rem; } .mx-m-29 { margin-left: 29rem; margin-right: 29rem; } .mx-m-30 { margin-left: 30rem; margin-right: 30rem; } /* ================================ PADDINGS ================================ */ .p-m-0 { padding: 0; } .p-m-1 { padding: 1rem; } .p-m-2 { padding: 2rem; } .p-m-3 { padding: 3rem; } .p-m-4 { padding: 4rem; } .p-m-5 { padding: 5rem; } .p-m-6 { padding: 6rem; } .p-m-7 { padding: 7rem; } .p-m-8 { padding: 8rem; } .p-m-9 { padding: 9rem; } .p-m-10 { padding: 10rem; } .p-m-11 { padding: 11rem; } .p-m-12 { padding: 12rem; } .p-m-13 { padding: 13rem; } .p-m-14 { padding: 14rem; } .p-m-15 { padding: 15rem; } .p-m-16 { padding: 16rem; } .p-m-17 { padding: 17rem; } .p-m-18 { padding: 18rem; } .p-m-19 { padding: 19rem; } .p-m-20 { padding: 20rem; } .p-m-21 { padding: 21rem; } .p-m-22 { padding: 22rem; } .p-m-23 { padding: 23rem; } .p-m-24 { padding: 24rem; } .p-m-25 { padding: 25rem; } .p-m-26 { padding: 26rem; } .p-m-27 { padding: 27rem; } .p-m-28 { padding: 28rem; } .p-m-29 { padding: 29rem; } .p-m-30 { padding: 30rem; } .pt-m-0 { padding-top: 0; } .pt-m-1 { padding-top: 1rem; } .pt-m-2 { padding-top: 2rem; } .pt-m-3 { padding-top: 3rem; } .pt-m-4 { padding-top: 4rem; } .pt-m-5 { padding-top: 5rem; } .pt-m-6 { padding-top: 6rem; } .pt-m-7 { padding-top: 7rem; } .pt-m-8 { padding-top: 8rem; } .pt-m-9 { padding-top: 9rem; } .pt-m-10 { padding-top: 10rem; } .pt-m-11 { padding-top: 11rem; } .pt-m-12 { padding-top: 12rem; } .pt-m-13 { padding-top: 13rem; } .pt-m-14 { padding-top: 14rem; } .pt-m-15 { padding-top: 15rem; } .pt-m-16 { padding-top: 16rem; } .pt-m-17 { padding-top: 17rem; } .pt-m-18 { padding-top: 18rem; } .pt-m-19 { padding-top: 19rem; } .pt-m-20 { padding-top: 20rem; } .pt-m-21 { padding-top: 21rem; } .pt-m-22 { padding-top: 22rem; } .pt-m-23 { padding-top: 23rem; } .pt-m-24 { padding-top: 24rem; } .pt-m-25 { padding-top: 25rem; } .pt-m-26 { padding-top: 26rem; } .pt-m-27 { padding-top: 27rem; } .pt-m-28 { padding-top: 28rem; } .pt-m-29 { padding-top: 29rem; } .pt-m-30 { padding-top: 30rem; } .pb-m-0 { padding-bottom: 0; } .pb-m-1 { padding-bottom: 1rem; } .pb-m-2 { padding-bottom: 2rem; } .pb-m-3 { padding-bottom: 3rem; } .pb-m-4 { padding-bottom: 4rem; } .pb-m-5 { padding-bottom: 5rem; } .pb-m-6 { padding-bottom: 6rem; } .pb-m-7 { padding-bottom: 7rem; } .pb-m-8 { padding-bottom: 8rem; } .pb-m-9 { padding-bottom: 9rem; } .pb-m-10 { padding-bottom: 10rem; } .pb-m-11 { padding-bottom: 11rem; } .pb-m-12 { padding-bottom: 12rem; } .pb-m-13 { padding-bottom: 13rem; } .pb-m-14 { padding-bottom: 14rem; } .pb-m-15 { padding-bottom: 15rem; } .pb-m-16 { padding-bottom: 16rem; } .pb-m-17 { padding-bottom: 17rem; } .pb-m-18 { padding-bottom: 18rem; } .pb-m-19 { padding-bottom: 19rem; } .pb-m-20 { padding-bottom: 20rem; } .pb-m-21 { padding-bottom: 21rem; } .pb-m-22 { padding-bottom: 22rem; } .pb-m-23 { padding-bottom: 23rem; } .pb-m-24 { padding-bottom: 24rem; } .pb-m-25 { padding-bottom: 25rem; } .pb-m-26 { padding-bottom: 26rem; } .pb-m-27 { padding-bottom: 27rem; } .pb-m-28 { padding-bottom: 28rem; } .pb-m-29 { padding-bottom: 29rem; } .pb-m-30 { padding-bottom: 30rem; } .pl-m-0 { padding-left: 0; } .pl-m-1 { padding-left: 1rem; } .pl-m-2 { padding-left: 2rem; } .pl-m-3 { padding-left: 3rem; } .pl-m-4 { padding-left: 4rem; } .pl-m-5 { padding-left: 5rem; } .pl-m-6 { padding-left: 6rem; } .pl-m-7 { padding-left: 7rem; } .pl-m-8 { padding-left: 8rem; } .pl-m-9 { padding-left: 9rem; } .pl-m-10 { padding-left: 10rem; } .pl-m-11 { padding-left: 11rem; } .pl-m-12 { padding-left: 12rem; } .pl-m-13 { padding-left: 13rem; } .pl-m-14 { padding-left: 14rem; } .pl-m-15 { padding-left: 15rem; } .pl-m-16 { padding-left: 16rem; } .pl-m-17 { padding-left: 17rem; } .pl-m-18 { padding-left: 18rem; } .pl-m-19 { padding-left: 19rem; } .pl-m-20 { padding-left: 20rem; } .pl-m-21 { padding-left: 21rem; } .pl-m-22 { padding-left: 22rem; } .pl-m-23 { padding-left: 23rem; } .pl-m-24 { padding-left: 24rem; } .pl-m-25 { padding-left: 25rem; } .pl-m-26 { padding-left: 26rem; } .pl-m-27 { padding-left: 27rem; } .pl-m-28 { padding-left: 28rem; } .pl-m-29 { padding-left: 29rem; } .pl-m-30 { padding-left: 30rem; } .pr-m-0 { padding-right: 0; } .pr-m-1 { padding-right: 1rem; } .pr-m-2 { padding-right: 2rem; } .pr-m-3 { padding-right: 3rem; } .pr-m-4 { padding-right: 4rem; } .pr-m-5 { padding-right: 5rem; } .pr-m-6 { padding-right: 6rem; } .pr-m-7 { padding-right: 7rem; } .pr-m-8 { padding-right: 8rem; } .pr-m-9 { padding-right: 9rem; } .pr-m-10 { padding-right: 10rem; } .pr-m-11 { padding-right: 11rem; } .pr-m-12 { padding-right: 12rem; } .pr-m-13 { padding-right: 13rem; } .pr-m-14 { padding-right: 14rem; } .pr-m-15 { padding-right: 15rem; } .pr-m-16 { padding-right: 16rem; } .pr-m-17 { padding-right: 17rem; } .pr-m-18 { padding-right: 18rem; } .pr-m-19 { padding-right: 19rem; } .pr-m-20 { padding-right: 20rem; } .pr-m-21 { padding-right: 21rem; } .pr-m-22 { padding-right: 22rem; } .pr-m-23 { padding-right: 23rem; } .pr-m-24 { padding-right: 24rem; } .pr-m-25 { padding-right: 25rem; } .pr-m-26 { padding-right: 26rem; } .pr-m-27 { padding-right: 27rem; } .pr-m-28 { padding-right: 28rem; } .pr-m-29 { padding-right: 29rem; } .pr-m-30 { padding-right: 30rem; } .py-m-1 { padding-top: 1rem; padding-bottom: 1rem; } .py-m-2 { padding-top: 2rem; padding-bottom: 2rem; } .py-m-3 { padding-top: 3rem; padding-bottom: 3rem; } .py-m-4 { padding-top: 4rem; padding-bottom: 4rem; } .py-m-5 { padding-top: 5rem; padding-bottom: 5rem; } .py-m-6 { padding-top: 6rem; padding-bottom: 6rem; } .py-m-7 { padding-top: 7rem; padding-bottom: 7rem; } .py-m-8 { padding-top: 8rem; padding-bottom: 8rem; } .py-m-9 { padding-top: 9rem; padding-bottom: 9rem; } .py-m-10 { padding-top: 10rem; padding-bottom: 10rem; } .py-m-11 { padding-top: 11rem; padding-bottom: 11rem; } .py-m-12 { padding-top: 12rem; padding-bottom: 12rem; } .py-m-13 { padding-top: 13rem; padding-bottom: 13rem; } .py-m-14 { padding-top: 14rem; padding-bottom: 14rem; } .py-m-15 { padding-top: 15rem; padding-bottom: 15rem; } .py-m-16 { padding-top: 16rem; padding-bottom: 16rem; } .py-m-17 { padding-top: 17rem; padding-bottom: 17rem; } .py-m-18 { padding-top: 18rem; padding-bottom: 18rem; } .py-m-19 { padding-top: 19rem; padding-bottom: 19rem; } .py-m-20 { padding-top: 20rem; padding-bottom: 20rem; } .py-m-21 { padding-top: 21rem; padding-bottom: 21rem; } .py-m-22 { padding-top: 22rem; padding-bottom: 22rem; } .py-m-23 { padding-top: 23rem; padding-bottom: 23rem; } .py-m-24 { padding-top: 24rem; padding-bottom: 24rem; } .py-m-25 { padding-top: 25rem; padding-bottom: 25rem; } .py-m-26 { padding-top: 26rem; padding-bottom: 26rem; } .py-m-27 { padding-top: 27rem; padding-bottom: 27rem; } .py-m-28 { padding-top: 28rem; padding-bottom: 28rem; } .py-m-29 { padding-top: 29rem; padding-bottom: 29rem; } .py-m-30 { padding-top: 30rem; padding-bottom: 30rem; } .px-m-1 { padding-left: 1rem; padding-right: 1rem; } .px-m-2 { padding-left: 2rem; padding-right: 2rem; } .px-m-3 { padding-left: 3rem; padding-right: 3rem; } .px-m-4 { padding-left: 4rem; padding-right: 4rem; } .px-m-5 { padding-left: 5rem; padding-right: 5rem; } .px-m-6 { padding-left: 6rem; padding-right: 6rem; } .px-m-7 { padding-left: 7rem; padding-right: 7rem; } .px-m-8 { padding-left: 8rem; padding-right: 8rem; } .px-m-9 { padding-left: 9rem; padding-right: 9rem; } .px-m-10 { padding-left: 10rem; padding-right: 10rem; } .px-m-11 { padding-left: 11rem; padding-right: 11rem; } .px-m-12 { padding-left: 12rem; padding-right: 12rem; } .px-m-13 { padding-left: 13rem; padding-right: 13rem; } .px-m-14 { padding-left: 14rem; padding-right: 14rem; } .px-m-15 { padding-left: 15rem; padding-right: 15rem; } .px-m-16 { padding-left: 16rem; padding-right: 16rem; } .px-m-17 { padding-left: 17rem; padding-right: 17rem; } .px-m-18 { padding-left: 18rem; padding-right: 18rem; } .px-m-19 { padding-left: 19rem; padding-right: 19rem; } .px-m-20 { padding-left: 20rem; padding-right: 20rem; } .px-m-21 { padding-left: 21rem; padding-right: 21rem; } .px-m-22 { padding-left: 22rem; padding-right: 22rem; } .px-m-23 { padding-left: 23rem; padding-right: 23rem; } .px-m-24 { padding-left: 24rem; padding-right: 24rem; } .px-m-25 { padding-left: 25rem; padding-right: 25rem; } .px-m-26 { padding-left: 26rem; padding-right: 26rem; } .px-m-27 { padding-left: 27rem; padding-right: 27rem; } .px-m-28 { padding-left: 28rem; padding-right: 28rem; } .px-m-29 { padding-left: 29rem; padding-right: 29rem; } .px-m-30 { padding-left: 30rem; padding-right: 30rem; } } /*------------------------------------------------------------------------------------------------------------------------------ 5 POSITIONING ------------------------------------------------------------------------------------------------------------------------------*/ /* POSITIONING */ .center { justify-content: center; justify-items: center; align-content: center; align-items: center; display: grid; } .center-left { justify-content: start; justify-items: start; align-content: center; align-items: center; display: grid; } .center-right { justify-content: end; align-content: center; justify-items: end; align-items: center; display: grid; } .top-left { justify-content: start; align-content: start; justify-items: start; align-items: start; display: grid; } .top-center { justify-content: center; align-content: start; justify-items: center; align-items: start; display: grid; } .top-right { justify-content: end; align-content: start; justify-items: end; align-items: start; display: grid; } .bottom-left { justify-content: start; align-content: end; display: grid; } .bottom-center { justify-content: center; align-content: end; justify-items: center; align-items: end; display: grid; } .bottom-right { justify-content: end; align-content: end; justify-items: end; align-items: end; display: grid; } .filled-left { justify-content: start; align-content: stretch; display: grid; } .filled-right { justify-content: end; align-content: stretch; justify-items: end; align-items: stretch; display: grid; } .filled-center { justify-content: center; align-content: stretch; justify-items: center; align-items: stretch; display: grid; } /* MOBILE */ @media (max-width: 767px) { .center-m { justify-content: center; align-content: center; justify-items: center; align-items: center; display: grid; } .center-left-m { justify-content: start; align-content: center; justify-items: start; align-items: center; display: grid; } .center-right-m { justify-content: end; align-content: center; justify-items: end; align-items: center; display: grid; } .top-left-m { justify-content: start; align-content: start; justify-items: start; align-items: start; display: grid; } .top-center-m { justify-content: center; align-content: start; justify-items: center; align-items: start; display: grid; } .top-right-m { justify-content: end; align-content: start; justify-items: end; align-items: start; display: grid; } .bottom-left-m { justify-content: start; align-content: end; justify-items: start; align-items: end; display: grid; } .bottom-center-m { justify-content: center; align-content: end; justify-items: center; align-items: end; display: grid; } .bottom-right-m { justify-content: end; align-content: end; justify-items: end; align-items: end; display: grid; } .filled-left-m { justify-content: start; align-content: stretch; justify-items: start; align-items: stretch; display: grid; } .filled-right-m { justify-content: end; align-content: stretch; justify-items: end; align-items: stretch; display: grid; } .filled-center-m { justify-content: center; align-content: stretch; justify-items: center; align-items: stretch; display: grid; } } /* Images */ /* ///// IMAGE SIZE & IMAGE TRANSFORM EFFECT ///// */ .img-container { position: relative; overflow: hidden; display: block; background-color: var(--black); } .img-container.small { height: 20rem; } .img-container.medium { height: 30rem; } .img-container.large { height: 40rem; } .img-container.extralarge { height: 50rem; } @media (max-width: 767px) { .img-container.small-m { height: 10rem; } .img-container.medium-m { height: 30rem; } .img-container.large-m { height: 40rem; } .img-container.extralarge-m { height: 50rem; } } .img-container .img-cover { width: 100%; height: 100%; object-fit: cover; will-change: transform; } /* ///// PARALLAX ///// */ .parallax { position: relative; width: 100%; height: 70vh; min-height: 25rem; overflow: hidden; } .parallax img { width: 100%; height: calc(70vh + 4rem); min-height: calc(25rem + 4rem); transform: translateY(-2rem); object-fit: cover; } @media (min-width: 2463px) { .parallax img { min-height: 44rem; } } @media (max-width: 767px) { .parallax img { transform: translateY(-50%); } } /* ///// IMAGE FLOATING OUTSIDE BOXED ///// */ .fullwidth { position: relative; width: 100%; height: 40rem; max-width: 1800px; } .fullwidth img { position: absolute; object-fit: cover; margin-left: -10%; width: 120%; height: 100%; max-width: none; } @media (min-width: 2463px) { .fullwidth img { width: 100vw; margin-left: 0; transform: translateX(calc(-50vw + 900px)); } } /* Colors */ :root { --dark-base-color: #323232; --dark-second-color: #e6007e; --dark-third-color: #4F868E; --dark-purple: #6A7BA6; --dark-green: #7EA494; --dark-dark-green: #0D5257; --dark-highlight-color: #e6007e; --dark-white: #FFFFFF; --dark-black: #2E303C; --dark-light-gray: #F8F9FC; --dark-gray: #F4F4F4; --dark-mid-gray: rgba(0, 0, 0, 0.4); --dark-dark-gray: #8f95a3; --dark-body-background: #e6007e; --dark-header-background: #e6007e; --dark-font-color: #2E303C; --light-base-color: #323232; --light-second-color: #e6007e; --light-third-color: #4F868E; --light-purple: #6A7BA6; --light-green: #7EA494; --light-dark-green: #0D5257; --light-highlight-color: #e6007e; --light-white: #FFFFFF; --light-black: #2E303C; --light-light-gray: #F8F9FC; --light-gray: #F4F4F4; --light-mid-gray: rgba(0, 0, 0, 0.4); --light-dark-gray: #8f95a3; --light-body-background: #e6007e; --light-header-background: #e6007e; --light-font-color: #2E303C; } @media (prefers-color-scheme: dark) { :root { --base-color: #323232; --second-color: #e6007e; --third-color: #4F868E; --purple: #6A7BA6; --green: #7EA494; --dark-green: #0D5257; --highlight-color: #e6007e; --white: #FFFFFF; --black: #2E303C; --light-gray: #F8F9FC; --gray: #F4F4F4; --mid-gray: rgba(0, 0, 0, 0.4); --dark-gray: #8f95a3; --body-background: #e6007e; --header-background: #e6007e; --font-color: #2E303C; } :root .text-base-color { color: var(--base-color); } :root .bg-base-color { background: var(--base-color); } :root .text-second-color { color: var(--second-color); } :root .bg-second-color { background: var(--second-color); } :root .text-third-color { color: var(--third-color); } :root .bg-third-color { background: var(--third-color); } :root .text-purple { color: var(--purple); } :root .bg-purple { background: var(--purple); } :root .text-green { color: var(--green); } :root .bg-green { background: var(--green); } :root .text-dark-green { color: var(--dark-green); } :root .bg-dark-green { background: var(--dark-green); } :root .text-highlight-color { color: var(--highlight-color); } :root .bg-highlight-color { background: var(--highlight-color); } :root .text-white { color: var(--white); } :root .bg-white { background: var(--white); } :root .text-black { color: var(--black); } :root .bg-black { background: var(--black); } :root .text-light-gray { color: var(--light-gray); } :root .bg-light-gray { background: var(--light-gray); } :root .text-gray { color: var(--gray); } :root .bg-gray { background: var(--gray); } :root .text-mid-gray { color: var(--mid-gray); } :root .bg-mid-gray { background: var(--mid-gray); } :root .text-dark-gray { color: var(--dark-gray); } :root .bg-dark-gray { background: var(--dark-gray); } :root .text-body-background { color: var(--body-background); } :root .bg-body-background { background: var(--body-background); } :root .text-header-background { color: var(--header-background); } :root .bg-header-background { background: var(--header-background); } :root .text-font-color { color: var(--font-color); } :root .bg-font-color { background: var(--font-color); } } @media (prefers-color-scheme: light) { :root { --base-color: #323232; --second-color: #e6007e; --third-color: #4F868E; --purple: #6A7BA6; --green: #7EA494; --dark-green: #0D5257; --highlight-color: #e6007e; --white: #FFFFFF; --black: #2E303C; --light-gray: #F8F9FC; --gray: #F4F4F4; --mid-gray: rgba(0, 0, 0, 0.4); --dark-gray: #8f95a3; --body-background: #e6007e; --header-background: #e6007e; --font-color: #2E303C; } :root .text-base-color { color: var(--base-color); } :root .bg-base-color { background: var(--base-color); } :root .text-second-color { color: var(--second-color); } :root .bg-second-color { background: var(--second-color); } :root .text-third-color { color: var(--third-color); } :root .bg-third-color { background: var(--third-color); } :root .text-purple { color: var(--purple); } :root .bg-purple { background: var(--purple); } :root .text-green { color: var(--green); } :root .bg-green { background: var(--green); } :root .text-dark-green { color: var(--dark-green); } :root .bg-dark-green { background: var(--dark-green); } :root .text-highlight-color { color: var(--highlight-color); } :root .bg-highlight-color { background: var(--highlight-color); } :root .text-white { color: var(--white); } :root .bg-white { background: var(--white); } :root .text-black { color: var(--black); } :root .bg-black { background: var(--black); } :root .text-light-gray { color: var(--light-gray); } :root .bg-light-gray { background: var(--light-gray); } :root .text-gray { color: var(--gray); } :root .bg-gray { background: var(--gray); } :root .text-mid-gray { color: var(--mid-gray); } :root .bg-mid-gray { background: var(--mid-gray); } :root .text-dark-gray { color: var(--dark-gray); } :root .bg-dark-gray { background: var(--dark-gray); } :root .text-body-background { color: var(--body-background); } :root .bg-body-background { background: var(--body-background); } :root .text-header-background { color: var(--header-background); } :root .bg-header-background { background: var(--header-background); } :root .text-font-color { color: var(--font-color); } :root .bg-font-color { background: var(--font-color); } } .theme[data-theme=dark] { --base-color: #323232; --second-color: #e6007e; --third-color: #4F868E; --purple: #6A7BA6; --green: #7EA494; --dark-green: #0D5257; --highlight-color: #e6007e; --white: #FFFFFF; --black: #2E303C; --light-gray: #F8F9FC; --gray: #F4F4F4; --mid-gray: rgba(0, 0, 0, 0.4); --dark-gray: #8f95a3; --body-background: #FBFBFB; --header-background: #e6007e; --font-color: #2E303C; } .theme[data-theme=dark] .text-base-color { color: var(--base-color); } .theme[data-theme=dark] .bg-base-color { background: var(--base-color); } .theme[data-theme=dark] .text-second-color { color: var(--second-color); } .theme[data-theme=dark] .bg-second-color { background: var(--second-color); } .theme[data-theme=dark] .text-third-color { color: var(--third-color); } .theme[data-theme=dark] .bg-third-color { background: var(--third-color); } .theme[data-theme=dark] .text-purple { color: var(--purple); } .theme[data-theme=dark] .bg-purple { background: var(--purple); } .theme[data-theme=dark] .text-green { color: var(--green); } .theme[data-theme=dark] .bg-green { background: var(--green); } .theme[data-theme=dark] .text-dark-green { color: var(--dark-green); } .theme[data-theme=dark] .bg-dark-green { background: var(--dark-green); } .theme[data-theme=dark] .text-highlight-color { color: var(--highlight-color); } .theme[data-theme=dark] .bg-highlight-color { background: var(--highlight-color); } .theme[data-theme=dark] .text-white { color: var(--white); } .theme[data-theme=dark] .bg-white { background: var(--white); } .theme[data-theme=dark] .text-black { color: var(--black); } .theme[data-theme=dark] .bg-black { background: var(--black); } .theme[data-theme=dark] .text-light-gray { color: var(--light-gray); } .theme[data-theme=dark] .bg-light-gray { background: var(--light-gray); } .theme[data-theme=dark] .text-gray { color: var(--gray); } .theme[data-theme=dark] .bg-gray { background: var(--gray); } .theme[data-theme=dark] .text-mid-gray { color: var(--mid-gray); } .theme[data-theme=dark] .bg-mid-gray { background: var(--mid-gray); } .theme[data-theme=dark] .text-dark-gray { color: var(--dark-gray); } .theme[data-theme=dark] .bg-dark-gray { background: var(--dark-gray); } .theme[data-theme=dark] .text-body-background { color: var(--body-background); } .theme[data-theme=dark] .bg-body-background { background: var(--body-background); } .theme[data-theme=dark] .text-header-background { color: var(--header-background); } .theme[data-theme=dark] .bg-header-background { background: var(--header-background); } .theme[data-theme=dark] .text-font-color { color: var(--font-color); } .theme[data-theme=dark] .bg-font-color { background: var(--font-color); } .theme[data-theme=light] { --base-color: #323232; --second-color: #e6007e; --third-color: #4F868E; --purple: #6A7BA6; --green: #7EA494; --dark-green: #0D5257; --highlight-color: #e6007e; --white: #FFFFFF; --black: #2E303C; --light-gray: #F8F9FC; --gray: #F4F4F4; --mid-gray: rgba(0, 0, 0, 0.4); --dark-gray: #8f95a3; --body-background: #FBFBFB; --header-background: #e6007e; --font-color: #2E303C; } .theme[data-theme=light] .text-base-color { color: var(--base-color); } .theme[data-theme=light] .bg-base-color { background: var(--base-color); } .theme[data-theme=light] .text-second-color { color: var(--second-color); } .theme[data-theme=light] .bg-second-color { background: var(--second-color); } .theme[data-theme=light] .text-third-color { color: var(--third-color); } .theme[data-theme=light] .bg-third-color { background: var(--third-color); } .theme[data-theme=light] .text-purple { color: var(--purple); } .theme[data-theme=light] .bg-purple { background: var(--purple); } .theme[data-theme=light] .text-green { color: var(--green); } .theme[data-theme=light] .bg-green { background: var(--green); } .theme[data-theme=light] .text-dark-green { color: var(--dark-green); } .theme[data-theme=light] .bg-dark-green { background: var(--dark-green); } .theme[data-theme=light] .text-highlight-color { color: var(--highlight-color); } .theme[data-theme=light] .bg-highlight-color { background: var(--highlight-color); } .theme[data-theme=light] .text-white { color: var(--white); } .theme[data-theme=light] .bg-white { background: var(--white); } .theme[data-theme=light] .text-black { color: var(--black); } .theme[data-theme=light] .bg-black { background: var(--black); } .theme[data-theme=light] .text-light-gray { color: var(--light-gray); } .theme[data-theme=light] .bg-light-gray { background: var(--light-gray); } .theme[data-theme=light] .text-gray { color: var(--gray); } .theme[data-theme=light] .bg-gray { background: var(--gray); } .theme[data-theme=light] .text-mid-gray { color: var(--mid-gray); } .theme[data-theme=light] .bg-mid-gray { background: var(--mid-gray); } .theme[data-theme=light] .text-dark-gray { color: var(--dark-gray); } .theme[data-theme=light] .bg-dark-gray { background: var(--dark-gray); } .theme[data-theme=light] .text-body-background { color: var(--body-background); } .theme[data-theme=light] .bg-body-background { background: var(--body-background); } .theme[data-theme=light] .text-header-background { color: var(--header-background); } .theme[data-theme=light] .bg-header-background { background: var(--header-background); } .theme[data-theme=light] .text-font-color { color: var(--font-color); } .theme[data-theme=light] .bg-font-color { background: var(--font-color); } /* Animations */ [data-a-reveal] { opacity: 0; visibility: hidden; } /* Slider */ /*------------------------------------------------------------------------------------------------------------------------------ SWIPER ------------------------------------------------------------------------------------------------------------------------------*/ .slider { position: relative; width: 100%; height: calc(var(--vh, 1vh) * 100 - 6rem); display: flex; margin: 0 auto; } .swiper { width: 100%; min-width: 0; min-height: 0; } .swiper-pagination-bullets.swiper-pagination-horizontal { position: relative; display: flex; justify-content: center; align-items: center; position: absolute; width: auto; top: auto; bottom: -3rem; left: auto; right: 0; transform: none; padding: 0 clamp(1rem, 4vw, 4rem); z-index: 10; } .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--mid-gray); border-radius: 50%; margin: 0 10px; opacity: 1; cursor: pointer; transition: all 0.3s ease-in-out; } .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--highlight-color); } .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: solid 1px var(--highlight-color); border-radius: 50%; } .swiper-version-1 .swiper-button-prev { display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; z-index: 11; top: auto; bottom: 3rem; left: auto; right: 3rem; height: 3rem; width: 3rem; border: 1px solid var(--white); border-radius: 50%; transform: rotate(180deg); margin-left: 0; margin-right: 4rem; background-color: transparent; } .swiper-version-1 .swiper-button-prev:before { content: ""; position: absolute; opacity: 0; width: 0; height: 0; z-index: -1; transition: all 0.35s ease-in-out; } .swiper-version-1 .swiper-button-prev:after { display: none; } .swiper-version-1 .swiper-button-prev .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .swiper-version-1 .swiper-button-prev .arrow:before, .swiper-version-1 .swiper-button-prev .arrow:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .swiper-version-1 .swiper-button-prev:hover:before { opacity: 1; width: 100%; height: 100%; } .swiper-version-1 .swiper-button-prev:before { background: var(--highlight-color); border-radius: 50%; } .swiper-version-1 .swiper-button-prev .arrow { width: 0.6rem; height: 1rem; } .swiper-version-1 .swiper-button-prev .arrow:before, .swiper-version-1 .swiper-button-prev .arrow:after { background-image: url("/images/btn-arrow.svg"); } .swiper-version-1 .swiper-button-prev .arrow:before { filter: invert(1) brightness(5) saturate(0); } .swiper-version-1 .swiper-button-prev .arrow:after { transform: translateX(-40px); } .swiper-version-1 .swiper-button-prev:hover { border: 1px solid var(--highlight-color); } .swiper-version-1 .swiper-button-prev:hover .arrow:before { transform: translateX(40px); } .swiper-version-1 .swiper-button-prev:hover .arrow:after { transform: translateX(0); filter: invert(1) brightness(5) saturate(0); } .swiper-version-1 .swiper-button-next { display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; z-index: 11; top: auto; bottom: 3rem; left: auto; right: 3rem; height: 3rem; width: 3rem; border: 1px solid var(--white); border-radius: 50%; transform: none; margin-left: 0; margin-right: 0; background-color: transparent; } .swiper-version-1 .swiper-button-next:before { content: ""; position: absolute; opacity: 0; width: 0; height: 0; z-index: -1; transition: all 0.35s ease-in-out; } .swiper-version-1 .swiper-button-next:after { display: none; } .swiper-version-1 .swiper-button-next .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .swiper-version-1 .swiper-button-next .arrow:before, .swiper-version-1 .swiper-button-next .arrow:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .swiper-version-1 .swiper-button-next:hover:before { opacity: 1; width: 100%; height: 100%; } .swiper-version-1 .swiper-button-next:before { background: var(--highlight-color); border-radius: 50%; } .swiper-version-1 .swiper-button-next .arrow { width: 0.6rem; height: 1rem; } .swiper-version-1 .swiper-button-next .arrow:before, .swiper-version-1 .swiper-button-next .arrow:after { background-image: url("/images/btn-arrow.svg"); } .swiper-version-1 .swiper-button-next .arrow:before { filter: invert(1) brightness(5) saturate(0); } .swiper-version-1 .swiper-button-next .arrow:after { transform: translateX(-40px); } .swiper-version-1 .swiper-button-next:hover { border: 1px solid var(--highlight-color); } .swiper-version-1 .swiper-button-next:hover .arrow:before { transform: translateX(40px); } .swiper-version-1 .swiper-button-next:hover .arrow:after { transform: translateX(0); filter: invert(1) brightness(5) saturate(0); } .swiper-version-1.swiper-pagination, .swiper-version-1 .swiper-pagination-fraction { width: auto; } .swiper-version-2 .swiper-button-prev { display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; z-index: 11; top: auto; bottom: -4rem; left: auto; right: 0; height: 2.5rem; width: 2.5rem; border: 1px solid var(--highlight-color); border-radius: 50%; transform: rotate(180deg); margin-left: 0; margin-right: 3rem; background-color: var(--white); outline: none; } .swiper-version-2 .swiper-button-prev:before { content: ""; position: absolute; opacity: 0; width: 0; height: 0; z-index: -1; transition: all 0.35s ease-in-out; } .swiper-version-2 .swiper-button-prev:after { display: none; } .swiper-version-2 .swiper-button-prev .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .swiper-version-2 .swiper-button-prev .arrow:before, .swiper-version-2 .swiper-button-prev .arrow:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .swiper-version-2 .swiper-button-prev:hover:before { opacity: 1; width: 100%; height: 100%; } .swiper-version-2 .swiper-button-prev:before { background: var(--highlight-color); border-radius: 50%; } .swiper-version-2 .swiper-button-prev .arrow { width: 0.6rem; height: 1rem; /* &:before { filter: invert(1) brightness(5) saturate(0); } */ } .swiper-version-2 .swiper-button-prev .arrow:before, .swiper-version-2 .swiper-button-prev .arrow:after { background-image: url("/images/swiper-arrow.svg"); } .swiper-version-2 .swiper-button-prev .arrow:after { transform: translateX(-40px); } .swiper-version-2 .swiper-button-prev:hover { border: 1px solid var(--highlight-color); } .swiper-version-2 .swiper-button-prev:hover .arrow:before { transform: translateX(40px); } .swiper-version-2 .swiper-button-prev:hover .arrow:after { transform: translateX(0); filter: invert(1) brightness(5) saturate(0); } .swiper-version-2 .swiper-button-next { display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; z-index: 11; top: auto; bottom: -4rem; left: auto; right: 0; height: 2.5rem; width: 2.5rem; border: 1px solid var(--highlight-color); border-radius: 50%; transform: none; margin-left: 0; margin-right: 0; background-color: var(--white); outline: none; } .swiper-version-2 .swiper-button-next:before { content: ""; position: absolute; opacity: 0; width: 0; height: 0; z-index: -1; transition: all 0.35s ease-in-out; } .swiper-version-2 .swiper-button-next:after { display: none; } .swiper-version-2 .swiper-button-next .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .swiper-version-2 .swiper-button-next .arrow:before, .swiper-version-2 .swiper-button-next .arrow:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .swiper-version-2 .swiper-button-next:hover:before { opacity: 1; width: 100%; height: 100%; } .swiper-version-2 .swiper-button-next:before { background: var(--highlight-color); border-radius: 50%; } .swiper-version-2 .swiper-button-next .arrow { width: 0.6rem; height: 1rem; /*&:before { filter: invert(1) brightness(5) saturate(0); } */ } .swiper-version-2 .swiper-button-next .arrow:before, .swiper-version-2 .swiper-button-next .arrow:after { background-image: url("/images/swiper-arrow.svg"); } .swiper-version-2 .swiper-button-next .arrow:after { transform: translateX(-40px); } .swiper-version-2 .swiper-button-next:hover { border: 1px solid var(--highlight-color); } .swiper-version-2 .swiper-button-next:hover .arrow:before { transform: translateX(40px); } .swiper-version-2 .swiper-button-next:hover .arrow:after { transform: translateX(0); filter: invert(1) brightness(5) saturate(0); } .swiper-version-2.swiper-pagination, .swiper-version-2 .swiper-pagination-fraction { width: auto; } .swiper-version-3 .swiper-button-prev { display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; z-index: 11; top: auto; bottom: 0; left: 0; right: auto; height: 3rem; width: 3rem; border: 1px solid var(--base-color); border-radius: 50%; transform: rotate(180deg); margin-left: 0; margin-right: 4rem; background-color: transparent; } .swiper-version-3 .swiper-button-prev:before { content: ""; position: absolute; opacity: 0; width: 0; height: 0; z-index: -1; transition: all 0.35s ease-in-out; } .swiper-version-3 .swiper-button-prev:after { display: none; } .swiper-version-3 .swiper-button-prev .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .swiper-version-3 .swiper-button-prev .arrow:before, .swiper-version-3 .swiper-button-prev .arrow:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .swiper-version-3 .swiper-button-prev:hover:before { opacity: 1; width: 100%; height: 100%; } .swiper-version-3 .swiper-button-prev:before { background: var(--highlight-color); border-radius: 50%; } .swiper-version-3 .swiper-button-prev .arrow { width: 0.6rem; height: 1rem; } .swiper-version-3 .swiper-button-prev .arrow:before, .swiper-version-3 .swiper-button-prev .arrow:after { background-image: url("/images/btn-arrow.svg"); } .swiper-version-3 .swiper-button-prev .arrow:before { filter: none; } .swiper-version-3 .swiper-button-prev .arrow:after { transform: translateX(-40px); } .swiper-version-3 .swiper-button-prev:hover { border: 1px solid var(--highlight-color); } .swiper-version-3 .swiper-button-prev:hover .arrow:before { transform: translateX(40px); } .swiper-version-3 .swiper-button-prev:hover .arrow:after { transform: translateX(0); filter: invert(1) brightness(5) saturate(0); } .swiper-version-3 .swiper-button-next { display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; z-index: 11; top: auto; bottom: 0; left: 0; right: auto; height: 3rem; width: 3rem; border: 1px solid var(--base-color); border-radius: 50%; transform: none; margin-left: 4rem; margin-right: 0; background-color: transparent; } .swiper-version-3 .swiper-button-next:before { content: ""; position: absolute; opacity: 0; width: 0; height: 0; z-index: -1; transition: all 0.35s ease-in-out; } .swiper-version-3 .swiper-button-next:after { display: none; } .swiper-version-3 .swiper-button-next .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .swiper-version-3 .swiper-button-next .arrow:before, .swiper-version-3 .swiper-button-next .arrow:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .swiper-version-3 .swiper-button-next:hover:before { opacity: 1; width: 100%; height: 100%; } .swiper-version-3 .swiper-button-next:before { background: var(--highlight-color); border-radius: 50%; } .swiper-version-3 .swiper-button-next .arrow { width: 0.6rem; height: 1rem; } .swiper-version-3 .swiper-button-next .arrow:before, .swiper-version-3 .swiper-button-next .arrow:after { background-image: url("/images/btn-arrow.svg"); } .swiper-version-3 .swiper-button-next .arrow:before { filter: none; } .swiper-version-3 .swiper-button-next .arrow:after { transform: translateX(-40px); } .swiper-version-3 .swiper-button-next:hover { border: 1px solid var(--highlight-color); } .swiper-version-3 .swiper-button-next:hover .arrow:before { transform: translateX(40px); } .swiper-version-3 .swiper-button-next:hover .arrow:after { transform: translateX(0); filter: invert(1) brightness(5) saturate(0); } .swiper-version-3.swiper-pagination, .swiper-version-3 .swiper-pagination-fraction { width: auto; } /* Display */ .grid { display: grid; } .flex { display: flex; } .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .none { display: none; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .static { position: static; } .overflow-visible { overflow: visible; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; } @media (max-width: 768px) { .grid-m { display: grid; } .flex-m { display: flex; } .block-m { display: block; } .inline-m { display: inline; } .inline-block-m { display: inline-block; } .none-m { display: none; } .relative-s { position: relative; } .absolute-s { position: absolute; } .fixed-s { position: fixed; } .sticky-s { position: sticky; } .static-s { position: static; } .overflow-visible-m, .swiper.overflow-visible-m { overflow: visible; } .overflow-hidden-m, .swiper.overflow-hidden-m { overflow: hidden; } .overflow-scroll-m, .swiper.overflow-scroll-m { overflow: scroll; } .overflow-auto-m, .swiper.overflow-auto-m { overflow: auto; } } /* Navigation */ /*------------------------------------------------------------------------------------------------------------------------------ NAVIGATION ------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------- DESKTOP NAVIGATION --------------------------------------------------------------------------*/ nav ul { position: static; display: flex; align-items: center; margin: 0; background-color: transparent; border-radius: 0px; } @media (max-width: 767px) { nav ul { background-color: transparent; width: 100%; } } nav ul li { position: static; display: flex; flex-wrap: wrap; float: left; width: 100%; white-space: nowrap; hyphens: none; cursor: pointer; } @media (max-width: 767px) { nav ul li { transition: none; } } nav ul li a, nav ul li span { position: relative; display: flex; font-family: "Roboto", sans-serif; font-size: 1rem; font-weight: normal; text-transform: none; letter-spacing: 0.02rem; color: var(--white); /*transition: all ease 0.2s;*/ z-index: 1; } @media (max-width: 767px) { nav ul li a, nav ul li span { color: var(--white); font-size: 1rem; } } nav ul > li { text-align: left; } nav ul > li.current > a, nav ul > li.current > span { font-weight: normal; } @media (max-width: 767px) { nav ul > li.current > a, nav ul > li.current > span { color: var(--highlight-color); } } nav ul > li ul { position: absolute; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; width: 100%; opacity: 0; visibility: hidden; transition: none; background-color: transparent; } nav ul > li ul .submenu-list { position: relative; display: flex; width: max-content; flex-wrap: wrap; flex-direction: column; transform-origin: top center; } nav ul > li ul li { justify-content: flex-start; } @media (max-width: 767px) { nav ul > li ul li { justify-content: flex-start; } } nav ul > li ul li ul { top: 0; left: 100%; transform: none; } nav ul li.mainentry { margin: 0 1rem; } nav ul li.mainentry > span, nav ul li.mainentry > a { padding: 0.5rem 1.5rem 0.5rem 1.5rem; } nav ul li.subentry { margin: 0 1rem; } nav ul li.subentry > span, nav ul li.subentry > a { padding: 0.5rem 0 1rem; } @media (max-width: 767px) { nav ul li.subentry > span, nav ul li.subentry > a { width: 100%; padding: 0.5rem 1rem 0.5rem 1rem; border-bottom: solid 1px #ff1896; } } nav ul li.subentry > span:before, nav ul li.subentry > a:before { content: ""; position: absolute; right: 1rem; top: 50%; transform: translate(0, -50%); background-image: url("/images/nav-arrow.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; width: 0.5rem; height: 1rem; transition: all 0.3s ease; } @media (max-width: 767px) { nav ul li.subentry > span:before, nav ul li.subentry > a:before { filter: invert(1) brightness(2); } } @media (min-width: 768px) { nav ul li.subentry > span:before, nav ul li.subentry > a:before { display: none; } } nav ul li.subentry.open > span, nav ul li.subentry.open > a { background: transparent; /*color: $subnav-open-color;*/ } @media (max-width: 767px) { nav ul li.subentry.open > span, nav ul li.subentry.open > a { background: transparent; } } nav ul li.subentry.open > span:before, nav ul li.subentry.open > a:before { filter: none; transform: none; } nav ul li.subentry.open:hover > span, nav ul li.subentry.open:hover > a { /*color: $subnav-open-color;*/ } @media (max-width: 767px) { nav ul li.subentry.open:hover > span, nav ul li.subentry.open:hover > a { color: var(--white); } } nav ul li.subentry.open:hover > span:before, nav ul li.subentry.open:hover > a:before { filter: none; transform: none; } @media (max-width: 767px) { nav ul li.subentry.open:hover > span:before, nav ul li.subentry.open:hover > a:before { filter: invert(1) brightness(2); } } nav ul li.subentry ul li { margin: 0; position: static; } nav ul li.subentry ul li > a, nav ul li.subentry ul li > span { color: var(--base-color); padding: 0.5rem 1.5rem 0.5rem 1rem; width: 100%; } nav ul li.subentry ul li.subsubentry span:before { content: ""; position: absolute; right: 1rem; top: 50%; transform: translate(0, -50%); background-image: url("/images/nav-arrow.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; width: 0.4rem; height: 0.8rem; transition: all 0.3s ease; } nav ul li.subentry ul li.current > a, nav ul li.subentry ul li.current > span { background-color: transparent; color: var(--highlight-color); } nav ul li.subentry ul li:hover { background-color: transparent; } nav ul li.subentry ul li:hover > a, nav ul li.subentry ul li:hover > span { color: var(--highlight-color); } @media (max-width: 767px) { nav > ul > li { overflow: hidden; } } nav > ul > li > ul { top: 100%; left: 0; padding: 4rem 12rem; margin: 0; transform: none; } nav > ul > li > a, nav > ul > li > span { font-size: 1rem; font-family: "Roboto Slab", sans-serif; border: none; border-radius: 0; position: relative; } @media (max-width: 767px) { nav > ul > li > a, nav > ul > li > span { border: none; font-size: 1rem; font-family: "Roboto", sans-serif; font-weight: bold; } } @media (max-width: 767px) { nav > ul > li > a, nav > ul > li > span { transform: translateY(60px); opacity: 0; visibility: hidden; transition: none; } } nav > ul > li > a:after, nav > ul > li > span:after { content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background-color: var(--white); transition: width 0.3s ease-in; } nav > ul > li > a:hover:after, nav > ul > li > span:hover:after { width: 100%; } @media (max-width: 767px) { nav > ul > li > a:after, nav > ul > li > span:after { display: none; } } nav > ul > li.current > a:after, nav > ul > li.current > span:after, nav > ul > li.open > a:after, nav > ul > li.open > span:after { content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: var(--white); transition: width 0.3s ease-in; } /*------------------------------------------------------------------------- MOBILE NAVIGATION --------------------------------------------------------------------------*/ .navigationWrap { display: none; width: 100%; height: 100%; opacity: 0; position: fixed; top: 0; right: 0; left: 0; bottom: 0; overflow: auto; z-index: 1008; background-color: var(--second-color); } .navigationWrap header { z-index: 1007; right: 0; left: auto; width: 100%; } .navigationWrap.scrolled header { height: 4rem; } .navigationWrap .menu-container { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; display: block; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; margin: 0 auto; padding: 7rem 0rem; z-index: 1006; transform: none; } .navigationWrap .menu-container .address { margin-top: 2rem; float: left; opacity: 0; visibility: hidden; transform: translate(0, 20px); } .navigationWrap .menu-container .address p, .navigationWrap .menu-container .address a { font-size: 0.8rem; color: var(--white); margin: 0; padding: 0; } @media (max-width: 767px) { .navigationWrap .menu-container .address p, .navigationWrap .menu-container .address a { color: var(--base-color); } } .navigationWrap .menu-container nav { position: static; display: flex; float: left; height: auto; align-items: center; top: 0; left: 0; width: 100%; text-align: center; } .navigationWrap .menu-container nav ul li .protectarea { display: none; } .navigationWrap .menu-container nav ul li .btn.goback { display: none; } .navigationWrap .menu-container nav.accordion ul { display: flex; flex-direction: column; left: 0; } .navigationWrap .menu-container nav.accordion ul > li { text-transform: none; text-align: left; } .navigationWrap .menu-container nav.accordion ul > li .submenu-panel { position: relative; overflow: hidden; padding: 0; } .navigationWrap .menu-container nav.accordion ul > li .submenu-panel .submenu-header { display: none; } .navigationWrap .menu-container nav.accordion ul > li .submenu-panel .submenu-list { padding: 0.5rem 0; background-color: var(--white); display: none; } .navigationWrap .menu-container nav.accordion ul > li .submenu-panel .submenu-list .subsubmenu-list { position: relative; display: none; } .navigationWrap .menu-container nav.layers ul { display: flex; flex-direction: column; } .navigationWrap .menu-container nav.layers ul li .submenu-panel { position: absolute; display: block; top: 0; left: auto; width: calc(100% - 1rem); height: 100vh; padding: 0; background: var(--white); right: 0; z-index: 11; overflow-y: auto; transform: none; -webkit-box-shadow: -15px 0px 20px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: -15px 0px 20px 5px rgba(0, 0, 0, 0.4); box-shadow: -15px 0px 20px 5px rgba(0, 0, 0, 0.4); } .navigationWrap .menu-container nav.layers ul li .submenu-panel .submenu-header { display: none; } .navigationWrap .menu-container nav.layers ul li .submenu-panel ul { width: 100%; top: 0; left: auto; right: 0; height: 100vh; padding: 7rem 0rem; background: var(--white); z-index: 11; overflow-y: auto; transform: none; overflow-y: visible; overflow-x: hidden; } .navigationWrap .menu-container nav.layers ul li .submenu-panel ul .btn.goback { position: absolute; display: flex; padding: 0; left: 1rem; top: 4rem; } .navigationWrap .menu-container nav.layers ul li .submenu-panel ul .btn.goback .icn { transform: rotate(180deg); } .navigationWrap .menu-container nav.layers ul .protectarea { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(40, 44, 52, 0.8); z-index: 2; transition: all ease 0.3s; opacity: 0; visibility: hidden; } /*------------------------------------------------------------------------- HAMBURGER --------------------------------------------------------------------------*/ .sticky-menu { position: absolute; right: 5%; top: 50%; transform: translate(0, -50%); display: none; } @media (max-width: 767px) { .sticky-menu { display: block; } } .hamburger { position: absolute; top: 50%; transform: translate(0, -50%); right: 0; transition: all 0.3s ease-in-out; } .hamburger .line1 { width: 30px; height: 2px; background-color: var(--base-color); display: block; margin: 4px 0 auto; -webkit-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); -webkit-transition: width 200ms ease-in-out 200ms, transform 200ms ease-in-out 0, background-color 200ms ease-in-out; -o-transition: width 200ms ease-in-out 200ms, transform 200ms ease-in-out 0, background-color 200ms ease-in-out; transition: width 200ms ease-in-out 200ms, transform 200ms ease-in-out 0, background-color 200ms ease-in-out; float: right; } .hamburger .line2 { width: 30px; height: 2px; background-color: var(--base-color); display: block; margin: 4px 0 auto; -webkit-transition: width 200ms ease-in-out 200ms, transform 200ms ease-in-out 0, background-color 200ms ease-in-out; -o-transition: width 200ms ease-in-out 200ms, transform 200ms ease-in-out 0, background-color 200ms ease-in-out; transition: width 200ms ease-in-out 200ms, transform 200ms ease-in-out 0, background-color 200ms ease-in-out; float: right; } .hamburger .line2:hover { cursor: pointer; } .hamburger .line3 { width: 30px; height: 2px; background-color: var(--base-color); display: block; margin: 4px 0 auto; -webkit-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); -webkit-transition: width 200ms ease-in-out 200ms, transform 200ms ease-in-out 0, background-color 200ms ease-in-out; -o-transition: width 200ms ease-in-out 200ms, transform 200ms ease-in-out 0, background-color 200ms ease-in-out; transition: width 200ms ease-in-out 200ms, transform 200ms ease-in-out 0, background-color 200ms ease-in-out; float: right; } .hamburger:hover { cursor: pointer; } .hamburger-home:hover { cursor: pointer; } .hamburger.is-active .line1 { background-color: var(--base-color); -webkit-transform: translateY(14px) rotate(45deg); -ms-transform: translateY(14px) rotate(45deg); -o-transform: translateY(14px) rotate(45deg); transform: translateY(14px) rotate(45deg); width: 17px; height: 2px; margin: 0; } .hamburger.is-active .line2 { opacity: 0; } .hamburger.is-active .line3 { background-color: var(--base-color); -webkit-transform: translateY(-15px) rotate(-45deg); -ms-transform: translateY(-15px) rotate(-45deg); -o-transform: translateY(-15px) rotate(-45deg); transform: translateY(-15px) rotate(-45deg); width: 17px; height: 2px; margin: 0; } /* Accordion */ .accordion { width: 100%; float: left; margin: 2rem 0; } .accordion .accordion_item { width: 100%; float: left; border-bottom: solid 1px var(--mid-gray); } .accordion .accordion_item:first-child { border-top: solid 1px var(--mid-gray); } .accordion .accordion_item .accordion_title { position: relative; padding: 0.75rem 2rem 0.75rem 0; font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; font-weight: normal; transition: 0.5s all ease; } .accordion .accordion_item .accordion_title:after { position: absolute; content: " "; right: 0; background-image: url(../images/accordion-arrow.svg); background-size: contain; background-repeat: no-repeat; top: 50%; transform: translate(0, -50%); width: 1.75rem; height: 1.75rem; transition: 0.5s all ease; } .accordion .accordion_item .accordion_title.notext { cursor: default; pointer-events: none; } .accordion .accordion_item .accordion_title.notext::after { display: none; } .accordion .accordion_item .accordion_title p { white-space: nowrap; } @media (max-width: 767px) { .accordion .accordion_item .accordion_title { padding-right: 2.5rem; } } .accordion .accordion_item.is-open .accordion_title:after { background-image: url(../images/accordion-arrow.svg); top: 50%; transform: translate(0, -50%) rotate(180deg); } .accordion .accordion_item .accordion_body { height: 0; overflow: hidden; transition: height 0.3s ease-in-out; } .accordion .accordion_item .accordion_content { padding: 0 14rem 1rem 0; } @media (max-width: 767px) { .accordion .accordion_item .accordion_content { padding: 0 2rem 1rem 0; } } .accordion .accordion_item .accordion_content p { font-size: 1rem; } /* Theme */ /*------------------------------------------------------------------------------------------------------------------------------ FREEFORM ------------------------------------------------------------------------------------------------------------------------------*/ form button { border: 1px solid var(--highlight-color); border-radius: 30px; background-color: var(--highlight-color); padding: 5px 15px; } @media (max-width: 767px) { form [data-freeform-controls] { justify-content: flex-start; } } .freeform-row [class*=freeform-col-] { padding: 10px 0 !important; } .freeform-row [class*=freeform-col-] .freeform-label { font-weight: bold !important; margin-bottom: 1rem; color: var(--black) !important; } .freeform-row [class*=freeform-col-] input, .freeform-row [class*=freeform-col-] textarea, .freeform-row [class*=freeform-col-] select { color: var(--base-color) !important; background-color: transparent !important; border: 0px solid #6c757d !important; border-radius: 0 !important; padding: 0.5rem 1rem !important; border-radius: 5px !important; box-shadow: -2px -2px 4px 0px #FFF, 2px 2px 4px 0px rgba(174, 174, 192, 0.4); margin-bottom: 1rem !important; } .freeform-row [class*=freeform-col-] input::placeholder, .freeform-row [class*=freeform-col-] textarea::placeholder, .freeform-row [class*=freeform-col-] select::placeholder { color: var(--black) !important; letter-spacing: 0; } .freeform-row [class*=freeform-col-] input.freeform-input[type=checkbox], .freeform-row [class*=freeform-col-] input.freeform-input[type=radio] { border: 1px solid var(--mid-gray) !important; padding: 10px !important; } input[type=text], input[type=email], textarea { color: var(--base-color) !important; } .freeform-col-12.freeform-fieldtype-html { font-size: 0.8rem; } .g-recaptcha { padding: 2rem 0 !important; } .freeform-fieldtype-checkbox { display: flex; align-items: center; } .freeform-fieldtype-checkbox input { margin-bottom: 0 !important; } .freeform-fieldtype-checkbox label { margin: 0 !important; } .freeform-row [class*=freeform-col-].freeform-fieldtype-checkbox input[type=checkbox] { margin-bottom: 0 !important; } .freeform-row [class*=freeform-col-].freeform-fieldtype-checkbox label { font-weight: normal !important; letter-spacing: 0; } .freeform-form button { font: inherit !important; color: var(--highlight-color) !important; text-align: center; text-decoration: none; border: 1px solid var(--highlight-color) !important; border-radius: 5rem !important; background: var(--white) !important; border-radius: 30px; padding: 15px 30px !important; font-size: 0.8rem !important; line-height: 1 !important; margin: 0 !important; margin-top: 1rem !important; } .freeform-form button:hover { background: var(--highlight-color) !important; color: var(--white) !important; } .freeform-fieldtype-text label { display: none !important; } header .logo { margin-bottom: 1rem; } header .logo img { transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } header .logo img { filter: invert(1) brightness(20) saturate(0); } header .hamburger .line1, header .hamburger .line2, header .hamburger .line3 { background-color: var(--white); } header.green { background-color: var(--dark-green); } header.green.fadein { background-color: var(--white); } header.fadein { border-bottom: solid 1px rgba(0, 0, 0, 0.07); } header.fadein .logo img { filter: none; } header.fadein nav ul li span { color: var(--base-color); } header.fadein .small-nav { height: 0; margin-bottom: 0; visibility: hidden; opacity: 0; } header.home { position: absolute; background-color: transparent; border-bottom: solid 1px rgba(0, 0, 0, 0.07); } header.home.fadein { background-color: var(--white); } header.home .logo img { filter: none; } header.home nav ul li span { color: var(--base-color); } header.home nav > ul > li > span:after { background: var(--highlight-color); } header.home .small-nav a { color: var(--black); } header.home .small-nav a:hover { color: var(--highlight-color); } header.home .small-nav li:last-child { color: var(--white); background: var(--highlight-color); border-color: var(--highlight-color); } header.home .small-nav li:last-child a { color: var(--white); } header.home .small-nav li:last-child:hover { background: var(--white); } header.home .small-nav li:last-child:hover a { color: var(--highlight-color); } header.home .small-nav #accessibilityToggle img { filter: none; transition: 0.5s all ease; } header.home .hamburger .line1, header.home .hamburger .line2, header.home .hamburger .line3 { background-color: var(--base-color); } header.open { background-color: var(--second-color); } header.open.fadein { background-color: var(--second-color); } header.open.green { background-color: var(--dark-green); } header.open nav > ul > li.subentry > span { color: var(--white); } header.open nav > ul > li > span:after { background: var(--white); } header.open .logo img { filter: invert(1) brightness(20) saturate(0); } header.open .small-nav a { color: var(--white); } header.open .small-nav a:hover { color: var(--white); } header.open .small-nav li:last-child { color: var(--highlight-color); background: var(--white); border-color: var(--white); } header.open .small-nav li:last-child a { color: var(--highlight-color); } header.open .small-nav li:last-child:hover { background: var(--highlight-color); } header.open .small-nav li:last-child:hover a { color: var(--white); } header.open .small-nav #accessibilityToggle img { width: 1.5rem; filter: invert(1) brightness(20) saturate(0); } .small-nav { list-style: none; display: flex; align-items: center; margin-bottom: 1.5rem; column-gap: 1.25rem; transition: height 0.5s ease, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1); } @media (max-width: 767px) { .small-nav { display: none; } } .small-nav a { color: var(--white); } .small-nav li { font-size: 0.8rem; } .small-nav li:last-child { color: var(--highlight-color); background: var(--white); padding: 2px 12px; border-radius: 2rem; border: 1px solid var(--white); transition: 0.5s all ease; margin-right: 1rem; } .small-nav li:last-child a { color: var(--highlight-color); } .small-nav li:last-child:hover { background: var(--highlight-color); } .small-nav li:last-child:hover a { color: var(--white); } .small-nav #accessibilityToggle img { width: 1.5rem; filter: invert(1) brightness(20) saturate(0); } /*------------------------------------------------------------------------------------------------------------------------------ FOOTER ------------------------------------------------------------------------------------------------------------------------------*/ footer { position: relative; display: inline-block; width: 100%; padding: 0; margin-top: 6rem; margin-left: 0; margin-right: 0; background: transparent; } footer .footer-content { width: calc(100% - 4rem - 4rem); padding: 4rem 0 6rem; border-top: 1px solid var(--mid-gray); margin-left: 4rem; margin-right: 4rem; } @media (max-width: 767px) { footer .footer-content { width: calc(100% - 2rem); margin-left: 1rem; margin-right: 1rem; padding-bottom: 2rem; } } @media (max-width: 767px) { footer .footer-content img { width: 16rem; } } footer p, footer a, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { color: var(--base-color); } footer p { margin-bottom: 1rem; line-height: 2; font-size: 0.9rem; } footer a.underscore:after { background-color: var(--white); } footer a.underscore:before { background-color: var(--highlight-color); } footer a.underscore:hover { color: var(--highlight-color); } footer .logo { position: relative; display: flex; align-items: center; max-width: 15rem; } footer .grid { z-index: 2; } footer .privacy { padding: 20px 0; border-top: solid 0.5px var(--white); } @media (max-width: 767px) { footer .privacy { flex-direction: column; } } footer .privacy .privacy-links { display: flex; align-items: start; } footer .privacy .privacy-links a { margin: 0 10px 0 0; } @media (max-width: 767px) { footer .privacy .privacy-links a { margin: 0 20px 0 0; } } footer .privacy a, footer .privacy p, footer .privacy span, footer .privacy h1, footer .privacy h2, footer .privacy h3, footer .privacy h4, footer .privacy h5, footer .privacy h6 { font-size: 0.7rem; } @media (max-width: 767px) { footer .privacy a, footer .privacy p, footer .privacy span, footer .privacy h1, footer .privacy h2, footer .privacy h3, footer .privacy h4, footer .privacy h5, footer .privacy h6 { font-size: 1rem; } } footer ul { list-style: none; margin: 0; } footer ul li { line-height: 2; font-size: 0.9rem; } footer ul li a { font-weight: bold; transition: 0.5s all ease; } footer ul li a:hover { color: var(--highlight-color); } footer .copyright { display: grid; width: 100%; float: left; background: var(--highlight-color); color: var(--white); padding-left: 4rem; padding-right: 4rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } @media (max-width: 767px) { footer .copyright { padding: 1rem; } } footer .copyright .copy-left { display: flex; } @media (max-width: 767px) { footer .copyright .copy-left { margin-bottom: 1rem; } } footer .copyright .copy-left .social-icons { display: flex; } footer .copyright .copy-left .social-icons img { max-width: 18px; max-height: 18px; filter: invert(1); object-fit: contain; object-position: center; float: left; } footer .copyright .copy-left .social-icons a { margin-left: 1rem; } footer .copyright .copy-right { display: flex; justify-content: flex-end; align-items: center; } @media (max-width: 767px) { footer .copyright .copy-right { flex-direction: column; align-items: flex-start; } } footer .copyright .copy-right .impressum-datenschutz { display: flex; } @media (max-width: 767px) { footer .copyright .copy-right .impressum-datenschutz p { margin-right: 2rem; } } footer .copyright .copy-right p { font-weight: normal; margin-left: 2rem; } @media (max-width: 767px) { footer .copyright .copy-right p { margin: 0; } } footer .copyright .copy-right a { font-weight: bold; color: var(--white); } footer .copyright p { color: var(--white); margin: 0; font-size: 0.8rem; font-weight: bold; } footer .copyright span { margin: 0 15px 0 0; padding: 0 15px 0 0; } footer .copyright span:first-child:after { content: "|"; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); color: var(--base-color); } footer .copyright a:hover { color: var(--white); } #smooth-wrapper footer { display: inline-block; } /*------------------------------------------------------------------------------------------------------------------------------ HERO ------------------------------------------------------------------------------------------------------------------------------*/ .hero { position: relative; width: 100%; height: calc(var(--vh, 1vh) * 70); display: flex; overflow: hidden; border-radius: 25px; } .hero .hero-content p { margin: 0; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } .hero.hero-kontakte { background: var(--highlight-color); height: auto; padding-bottom: 4rem; } .hero.hero-kontakte h3 { color: var(--white); } .card { background: var(--white); border-radius: 25px; padding: 2rem 2rem 1rem; display: flex; flex-direction: column; justify-content: space-between; } .card .card-title { display: flex; align-items: center; column-gap: 0.5rem; margin-bottom: 1rem; } .card .card-title img { width: 1.25rem; height: 1.25rem; position: relative; float: left; object-fit: contain; } .card .card-title h4 { margin: 0; line-height: 1; } .card h4 { color: var(--highlight-color); } .card p { font-size: 0.9rem; } .card a { transition: 0.5s all ease; } .card a.phone { font-family: "Roboto Slab", sans-serif; } .card a:hover { color: var(--highlight-color); } .card a.btn:hover { color: var(--third-color); } .card.notfall { justify-content: flex-start; } .card.notfall b { font-family: "Roboto Slab", sans-serif; } body, p, li { font-family: "Roboto", sans-serif; font-size: 1rem; font-style: normal; line-height: 1.5; font-weight: lighter; letter-spacing: 0.02rem; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; color: var(--font-color); } @media (max-width: 767px) { body, p, li { font-size: 1rem; line-height: 1.6; } } body strong, body b, p strong, p b, li strong, li b { font-weight: bold; font-family: "Roboto", sans-serif; } p { margin: 0 0 1rem 0; } a { transition: all 0.3s ease-in-out; } a.underscore:after, a.underscore:before { content: ""; position: absolute; bottom: 0; height: 1px; } a.underscore::after { right: 0; width: 100%; background-color: var(--base-color); transition: width 800ms cubic-bezier(0.19, 1, 0.22, 1); } a.underscore::before { left: 0; width: 0; background-color: var(--highlight-color); transition: width 800ms cubic-bezier(0.19, 1, 0.22, 1) 200ms; } a.underscore:hover { color: var(--highlight-color); } a.underscore:hover::after { width: 0; } a.underscore:hover::before { width: 100%; transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1) 200ms; } a.small, p.small, li.small { font-size: 0.9rem; } @media (max-width: 767px) { a.small, p.small, li.small { font-size: 0.9rem; } } a.big, p.big, li.big { font-size: 2.4rem; } @media (max-width: 767px) { a.big, p.big, li.big { font-size: 1.2rem; } } .impressum a, .impressum p, .impressum li { font-size: 0.9rem; } @media (max-width: 767px) { .impressum a, .impressum p, .impressum li { font-size: 1.1rem; } } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: normal; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; font-family: "Roboto Slab", sans-serif; margin-block-start: 0em; margin-block-end: 0em; } h1 { font-family: "Roboto Slab", sans-serif; font-weight: bold; color: var(--white); font-size: 3rem; text-transform: none; font-style: normal; margin: 0; padding: 4px 20px; letter-spacing: 0; line-height: 1.5; } @media (max-width: 767px) { h1 { font-size: 2rem; padding: 4px 14px; } } h2 { font-family: "Roboto Slab", sans-serif; font-weight: bold; color: var(--white); font-size: 3rem; text-transform: none; font-style: normal; margin: 0 0 1rem 0; padding: 0; letter-spacing: 0; line-height: 1.5; } @media (max-width: 767px) { h2 { font-size: 2rem; line-height: 1.25; } } h3 { font-family: "Roboto Slab", sans-serif; font-weight: bold; color: var(--base-color); font-size: 2rem; text-transform: none; font-style: normal; margin: 0 0 0.5rem 0; padding: 0; letter-spacing: 0; line-height: 1.5; } @media (max-width: 767px) { h3 { font-size: 1.75rem; line-height: 1.25; } } h4 { font-family: "Roboto Slab", sans-serif; font-weight: bold; color: var(--base-color); font-size: 1.25rem; text-transform: none; font-style: normal; margin: 0 0 1rem 0; padding: 0; letter-spacing: 0; line-height: 1.5; } @media (max-width: 767px) { h4 { font-size: 1.45rem; line-height: 1.25; } } h5 { font-family: "Roboto Slab", sans-serif; font-weight: bold; color: var(--base-color); font-size: 1.2rem; text-transform: none; font-style: normal; margin: 0; padding: 0; letter-spacing: 0; line-height: 1.5; } @media (max-width: 767px) { h5 { font-size: 1.25rem; line-height: 1.25; } } h6 { font-family: "Roboto Slab", sans-serif; font-weight: bold; color: var(--base-color); font-size: 1rem; text-transform: none; font-style: normal; margin: 0; padding: 0; letter-spacing: 0; line-height: 1.5; } .nowrap { white-space: nowrap; } .nowrap p, .nowrap a, .nowrap h1, .nowrap h2, .nowrap h3, .nowrap h4, .nowrap h5, .nowrap h6 { white-space: nowrap; } .prewrap { white-space: pre-wrap; } .prewrap p, .prewrap a, .prewrap h1, .prewrap h2, .prewrap h3, .prewrap h4, .prewrap h5, .prewrap h6 { white-space: pre-wrap; } ol { padding-left: 1rem; } /*------------------------------------------------------------------------------------------------------------------------------ THEME ------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------- BODY / WRAPPER --------------------------------------------------------------------------*/ * { box-sizing: border-box; } img, iframe, embed { width: 100%; max-width: 100%; display: block; } body { -webkit-font-smoothing: antialiased; background: var(--body-background); } body.zuweisende section.hero h1 { background: var(--dark-green); } html.accessibility-mode { font-size: calc(9px + 6 * (100vw - 320px) / 680) !important; } /* Focus styles for keyboard navigation */ .focus-visible button:focus, .focus-visible a:focus, .focus-visible input:focus, .focus-visible span:focus, .focus-visible li:focus { outline: 2px solid #005fcc; /* Customize focus outline */ } /* Remove outline for mouse interactions */ button:focus, a:focus, input:focus { outline: none; } main { position: relative; display: block; float: left; width: 100%; min-height: 100%; overflow: hidden; } #smooth-content { will-change: transform; } #smooth-content .touchdevice { will-change: unset; } #smooth-wrapper footer { display: inline-block; } nav.desktop { display: block; } @media (max-width: 767px) { nav.desktop { display: none; } } /*------------------------------------------------------------------------- GLOBAL VARIABLES --------------------------------------------------------------------------*/ .radius { border-radius: 25px; } @media (max-width: 767px) { .radius { border-radius: 50px; } } .radius2 { border-radius: 0.5rem; } @media (max-width: 767px) { .radius2 { border-radius: 1rem; } } /*------------------------------------------------------------------------- LIST & TABLES --------------------------------------------------------------------------*/ 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; margin-left: 1rem; } li { -webkit-text-size-adjust: 100%; } hr { border-bottom: solid 1px var(--mid-gray); margin: 3rem 0; } /*------------------------------------------------------------------------- MODULAR STUFF --------------------------------------------------------------------------*/ .map { overflow: hidden; } .map iframe { pointer-events: none; } #video { width: 100%; height: 100%; object-fit: cover; } /*------------------------------------------------------------------------- GLOBAL PROJECT INDIVIDUAL --------------------------------------------------------------------------*/ h3.inhalt-titel { margin-top: 2rem; margin-bottom: 1rem; } .text, .text-zwei-spalten { margin-bottom: 2rem; } .text p a, .text-zwei-spalten p a { color: var(--third-color); font-weight: bold; } section.hero { height: 20rem; border-radius: 0; } section.hero .hero-title { position: absolute; bottom: 2rem; left: 4rem; max-width: 50%; display: block; z-index: 11; } @media (max-width: 767px) { section.hero .hero-title { bottom: 2rem; left: 1rem; max-width: 100%; } } section.hero h1 { background: var(--highlight-color); bottom: 2rem; left: 4rem; border-bottom-right-radius: 15px; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.32; } section.hero img { position: absolute; top: 0; height: 100%; width: 100%; object-fit: cover; } .breadcrumbs-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .breadcrumbs-wrapper .breadcrumbs { font-size: 0.8rem; margin-bottom: 1rem; display: flex; white-space: nowrap; padding-bottom: 5px; /* Prevent scrollbar from cutting off content */ } .breadcrumbs-wrapper .breadcrumbs li { flex: 0 0 auto; list-style-image: none; } .breadcrumbs-wrapper::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ } .introtext { margin-bottom: 1rem; } .introtext p { font-size: 1.2rem; } img.bild { border-radius: 25px; width: 100%; object-fit: cover; max-height: 50rem; margin: 2rem 0; } .bild-text-box { margin: 2rem 0; } .bild-text-box img.bild { border-top-right-radius: 25px; border-bottom-right-radius: 25px; width: calc(100% + 20vw); margin-left: -10vw; max-width: none; object-fit: cover; max-height: 38rem; } @media (min-width: 2463px) { .bild-text-box img.bild { position: relative; z-index: -1; width: 60vw; margin-left: 0; transform: translateX(calc(-50vw + 900px)); } } @media (max-width: 767px) { .bild-text-box img.bild { width: 100%; margin-left: 0; margin-top: -10rem; position: relative; z-index: 2; } } .bild-text-box .text-box { background: var(--white); padding: 2.5rem; border-radius: 25px; box-shadow: 0px 7px 59px 0px rgba(79, 134, 142, 0.2); -webkit-box-shadow: 0px 7px 59px 0px rgba(79, 134, 142, 0.2); -moz-box-shadow: 0px 7px 59px 0px rgba(79, 134, 142, 0.2); } @media (max-width: 767px) { .bild-text-box .text-box { margin-left: 0; width: 100%; padding-bottom: 6rem; } } .swiper2 { position: relative; float: left; overflow: visible; width: 80%; margin-left: -5rem; margin-top: 4rem; margin-bottom: 8rem; } .swiper2 .swiper-slide { border-radius: 25px; overflow: hidden; transition: 0.5s all ease; } .swiper2 .swiper-slide.swiper-slide-next { height: 80%; } .swiper2 .swiper-wrapper { align-items: center; } .links { position: relative; float: left; width: 100%; margin: 2rem 0; } .links .link { position: relative; width: 100%; padding: 0.75rem 0; border-bottom: 1px solid var(--mid-gray); display: flex; justify-content: space-between; align-items: center; } .links .link h5 { color: var(--third-color); } .links .link a.link-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .links .link .btn-big { margin-top: 0; } .links .link:first-child { border-top: 1px solid var(--mid-gray); } .links.fachbereiche { margin-bottom: 6rem; } .links.fachbereiche .icon-title { display: flex; align-items: center; column-gap: 1rem; } .links.fachbereiche .icon-title .icon { width: 2.25rem; height: 2.25rem; object-fit: contain; border-radius: 50%; background: var(--third-color); flex-shrink: 0; } .links.fachbereiche .icon-title .icon img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .links.geschaeftsberichte h4 { color: var(--third-color); margin-top: 1rem; } .links.geschaeftsberichte p { font-size: 0.9rem; max-width: 80%; } .links.geschaeftsberichte .link:first-child { border-top: none; padding-top: 0; } .links.geschaeftsberichte .link:first-child h4 { margin-top: 0; } .liste { margin: 2rem 0; } .liste ul { list-style-type: none; padding: 0; margin: 0; } .liste ul li { padding: 0.75rem 0; border-bottom: 1px solid var(--mid-gray); list-style-image: none; } .liste ul li:first-child { border-top: 1px solid var(--mid-gray); } .tabelle { width: 100%; border-collapse: collapse; margin: 2rem 0; } .tabelle.mit-titel { margin-top: 0; } .tabelle td:first-child { white-space: nowrap; padding-right: 4rem; } .tabelle td:last-child { width: 100%; } .fullwidth { margin-top: 6rem; margin-bottom: 6rem; } .bild-cards { display: flex; column-gap: 1rem; justify-content: center; } @media (max-width: 767px) { .bild-cards.desktop { display: none; } } .bild-cards.mobile { display: none; } @media (max-width: 767px) { .bild-cards.mobile { display: flex; } } @media (max-width: 767px) { .bild-cards { column-gap: 0; } } .bild-cards .bild-card { background: var(--white); border-radius: 25px; box-shadow: 0px 7px 20px 0px rgba(79, 134, 142, 0.2); -webkit-box-shadow: 0px 7px 20px 0px rgba(79, 134, 142, 0.2); -moz-box-shadow: 0px 7px 20px 0px rgba(79, 134, 142, 0.2); overflow: hidden; width: 32%; } .bild-cards .bild-card img { height: 24rem; width: 100%; object-fit: cover; } .bild-cards .bild-card .card-content { padding: 1.5rem; } .bild-cards .bild-card .card-content h4 { margin: 0; } .bild-cards.card-count-2 .bild-card { width: 42%; } .downloads { position: relative; float: left; width: 100%; margin-bottom: 2rem; border-top: 1px solid var(--mid-gray); } .downloads .download { width: 100%; padding: 0.75rem 0; border-bottom: 1px solid var(--mid-gray); display: flex; justify-content: space-between; align-items: center; position: relative; } .downloads .download h5 { color: var(--third-color); } .downloads .download a.link-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .downloads .download .btn-big { margin-top: 0; } .downloads .link:first-child { border-top: 1px solid var(--mid-gray); } .icon-cards { display: flex; align-items: flex-start; justify-content: center; column-gap: 1rem; row-gap: 2rem; margin: 2rem 0; flex-wrap: wrap; width: 100%; } .icon-cards .icon-card { width: 32%; box-shadow: 0px 7px 20px 0px rgba(79, 134, 142, 0.2); border-radius: 25px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; align-self: stretch; } .icon-cards .icon-card .icon-card-icon { width: 10rem; height: 10rem; border-radius: 50%; margin: 1rem 0 2rem; } .icon-cards .icon-card .icon-card-icon img { height: 100%; width: 100%; } .icon-cards .icon-card .icon-card-content { width: 100%; } .icon-cards .icon-card .icon-card-content h4 { margin-bottom: 0.5rem; } @media (max-width: 767px) { .icon-cards .icon-card { width: 100%; } } .icon-cards.card-count-4 .icon-card { width: calc(25% - 1rem); } @media (max-width: 767px) { .icon-cards.card-count-4 .icon-card { width: 100%; } } .text-box { margin: 2rem 0 6rem; padding: 3rem 5rem; background: var(--white); border-bottom-right-radius: 25px; width: calc(100% + 10rem); margin-left: -5rem; box-shadow: 0px 6px 20px 0px rgba(13, 82, 87, 0.15); } .text-box h3 { margin-bottom: 1rem; } @media (max-width: 767px) { .text-box { padding: 2rem; width: 100%; margin-left: 0; } } .text-box .links.fachbereiche { margin-bottom: 2rem; } .map-container { margin: 1rem 0; float: left; width: 100%; position: relative; border-radius: 25px; overflow: hidden; height: 100%; } @media (max-width: 767px) { .map-container { height: 40rem; } } .map-container .kontakt-box { position: absolute; top: 1.5rem; left: 1.5rem; background: var(--white); z-index: 11; padding: 1.5rem 4rem 1.5rem 2rem; border-radius: 5px; } .map-container iframe { height: 100%; } .map-container .kontakt-box p { font-size: 0.8rem; } .map-container .kontakt-box p:last-child { margin-bottom: 0; } .map-container .kontakt-box a { font-family: "Roboto Slab", sans-serif; color: var(--highlight-color); } @media (max-width: 767px) { .map-container .kontakt-box { left: 1rem; top: 1rem; } } .map-container a.map-button { position: absolute; right: 1.5rem; top: 1.5rem; background: var(--white); border-radius: 30px; padding: 15px 30px; font-size: 0.8rem; line-height: 1; color: var(--highlight-color); border: 1px solid var(--highlight-color); transition: 0.5s all ease; } .map-container a.map-button:hover { background: var(--highlight-color); color: var(--white); } @media (max-width: 767px) { .map-container a.map-button { right: auto; top: auto; bottom: 1rem; left: 1rem; } } .formular { margin: 2rem 0; } .suchresultat { padding: 1rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--mid-gray); } .suchresultat:first-child { border-top: 1px solid var(--mid-gray); } .suchresultat em { color: var(--highlight-color); } ul.breadcrumbs { list-style: none; margin: 0; display: flex; column-gap: 1rem; position: relative; margin-bottom: 1rem; } ul.breadcrumbs li { font-size: 0.8rem; position: relative; list-style-image: none; } ul.breadcrumbs li:after { position: absolute; top: 50%; right: -0.75rem; transform: translate(0%, -50%); height: 0.5rem; width: 0.5rem; background-image: url("/images/breadcrumb-arrow.svg"); content: ""; background-repeat: no-repeat; background-position: center; background-size: contain; } ul.breadcrumbs li:last-child:after { display: none; } .kontakt { position: absolute; top: 50%; right: 4rem; min-width: 18rem; width: auto; background: var(--white); padding: 1.5rem 2rem 0.5rem; transform: translate(0, -50%); border-bottom: 2px solid var(--highlight-color); border-top-left-radius: 5px; border-top-right-radius: 5px; } .kontakt p { font-size: 0.9rem; } .kontakt a { font-family: "Roboto Slab", sans-serif; color: var(--highlight-color); } @media (max-width: 767px) { .kontakt { left: 1rem; top: 6rem; min-width: 0; width: 16rem; padding: 1.5rem 1.5rem 0.5rem; } .kontakt h4 { font-size: 1.2rem; margin-bottom: 0.5rem; } .kontakt p { font-size: 0.8rem; line-height: 1.5; } } .news-item img { height: 24rem; border-radius: 25px; box-shadow: 0px 7px 20px 0px rgba(79, 134, 142, 0.2); -webkit-box-shadow: 0px 7px 20px 0px rgba(79, 134, 142, 0.2); -moz-box-shadow: 0px 7px 20px 0px rgba(79, 134, 142, 0.2); object-fit: cover; } .news-item p.datum { text-transform: uppercase; font-size: 0.9rem; margin-bottom: 0.25rem; } .visite .news-item img { height: auto; } p.datum { text-transform: uppercase; font-size: 0.9rem; } .veranstaltungen-list { position: relative; float: left; width: 100%; margin-top: 4rem; margin-bottom: 6rem; } .veranstaltungen-list.unterseite { margin-top: 2rem; } .veranstaltungen-list .veranstaltung { float: left; width: 100%; position: relative; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--mid-gray); } .veranstaltungen-list .veranstaltung h4 { color: var(--third-color); } .veranstaltungen-list .veranstaltung .calendar-icon { width: 3rem; height: 3rem; border-radius: 10px; text-align: center; background: var(--white); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1); overflow: hidden; font-size: 0.8rem; font-weight: bold; line-height: 1; margin-top: 8px; } .veranstaltungen-list .veranstaltung .calendar-icon .calendar-top { height: 48%; width: 100%; background: var(--third-color); color: var(--white); display: flex; align-items: center; justify-content: center; padding-top: 3px; } .veranstaltungen-list .veranstaltung .calendar-icon .calendar-bottom { height: 52%; width: 100%; display: flex; align-items: center; justify-content: center; } .veranstaltungen-list .veranstaltung .highlight { color: var(--white); background: var(--highlight-color); text-transform: uppercase; width: auto; float: left; clear: both; font-family: "Roboto Slab", sans-serif; font-size: 0.9rem; line-height: 1; padding: 5px 7px; border-bottom-right-radius: 5px; margin-bottom: 0.5rem; margin-top: 8px; } .zitat p { font-size: 2rem; font-family: "Roboto Slab", sans-serif; color: var(--third-color); line-height: 1.25; margin-bottom: 2rem; } .tabs { position: relative; float: left; width: 100%; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--mid-gray); margin: 0; list-style: none; column-gap: 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } @media (max-width: 767px) { .tabs { padding-left: 1rem; padding-right: 1rem; column-gap: 1rem; justify-content: flex-start; } } .tabs::-webkit-scrollbar { display: none; } .tabs li { font-size: 0.8rem; flex: 0 0 auto; white-space: nowrap; } .tabs li.active { border-bottom: 1px solid var(--black); } .tabs li a { float: left; padding: 1rem 0; transition: 0.5s all ease; } .tabs li a:hover { color: var(--highlight-color); } .tabs li.fuer-zuweisende a { padding: 0.25rem 1rem; background: var(--highlight-color); color: var(--white); border-radius: 3rem; border: 1px solid var(--highlight-color); transition: 0.5s all ease; } .tabs li.fuer-zuweisende a:hover { background: var(--white); color: var(--highlight-color); border-color: var(--highlight-color); } .tabs li.fuer-zuweisende.active { border: none; } .tabs li.fuer-zuweisende.active a { background: var(--white); color: var(--highlight-color); border: 1px solid var(--highlight-color); } .search-container { position: relative; float: left; background: var(--gray); margin-top: 1rem; padding-top: 0.7rem; padding-bottom: 0.7rem; padding-left: 5rem; padding-right: 0.7rem; border-radius: 3rem; width: 50rem; box-shadow: -1px -1px 7px 0px #FFF, 1.5px 1.5px 7px 0px rgba(174, 174, 192, 0.4); cursor: pointer; } @media (max-width: 767px) { .search-container { width: 100%; } } .search-container input#search-field { width: 100%; font-size: 0.9rem; } .search-container:before { content: ""; position: absolute; height: 1.5rem; top: 50%; left: 3.4rem; width: 1px; background-color: rgba(0, 0, 0, 0.4); transform: translate(0, -50%); } .search-container img.icon-search { width: 0.8rem; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 1.5rem; display: block; } #tag-filter { position: relative; float: left; background: var(--gray); margin-top: 1rem; padding-top: 0.7rem; padding-bottom: 0.7rem; padding-left: 1.5rem; padding-right: 1.5rem; border-radius: 3rem; width: 20rem; box-shadow: -1px -1px 7px 0px #FFF, 1.5px 1.5px 7px 0px rgba(174, 174, 192, 0.4); cursor: pointer; font-size: 0.9rem; } @media (max-width: 767px) { #tag-filter { width: 100%; } } #az-filter { display: flex; align-items: center; column-gap: 0.5rem; margin: 2rem 0 1rem; position: relative; } @media (max-width: 767px) { #az-filter { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 5px; margin-right: -1rem; padding-right: 1rem; } #az-filter::after { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 3rem; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255)); pointer-events: none; } #az-filter::-webkit-scrollbar { display: none; } } #az-filter button { font-size: 0.9rem; font-weight: bold; transition: 0.5s all ease; width: 1.5rem; height: 1.5rem; text-align: center; border-radius: 50%; flex: 0 0 auto; } #az-filter button:first-child { border-radius: 2rem; padding: 0.2rem 1rem; width: auto; height: auto; } #az-filter button:disabled { opacity: 0.5; } #az-filter button:not(:disabled).active, #az-filter button:not(:disabled):hover { background: var(--dark-green); color: white; } .swiper4 { width: 40rem; margin: 2rem auto; } @media (max-width: 767px) { .swiper4 { width: 100%; } } .swiper4 .swiper-slide { border-radius: 25px; overflow: hidden; background: var(--gray); padding: 3rem; min-height: 20rem; filter: drop-shadow(1.5px 1.5px 7px rgba(174, 174, 192, 0.4)) drop-shadow(-1px -1px 7px #FFF); } .swiper4 .swiper-slide h4 { color: var(--highlight-color); } .swiper4 .swiper-slide-shadow { background: inherit; } .spacer { position: relative; float: left; width: 100%; } .spacer.spacer-1rem { margin-top: 1rem; } .spacer.spacer-2rem { margin-top: 2rem; } .spacer.spacer-3rem { margin-top: 3rem; } .spacer.spacer-4rem { margin-top: 4rem; } .spacer.spacer-5rem { margin-top: 5rem; } .spacer.spacer-6rem { margin-top: 6rem; } .spacer.spacer-7rem { margin-top: 7rem; } .spacer.spacer-8rem { margin-top: 8rem; } .spacer.spacer-9rem { margin-top: 9rem; } .spacer.spacer-10rem { margin-top: 10rem; } .filter-buttons { display: flex; align-items: center; justify-content: flex-start; column-gap: 0.5rem; } .filter-buttons .filter-button { font-size: 0.8rem; padding: 0.5rem 1.25rem; border-radius: 2rem; border: 1px solid var(--dark-green); transition: 0.5s all ease; color: var(--dark-green); white-space: nowrap; } .filter-buttons .filter-button.active { background: var(--dark-green); color: var(--white); } @media (max-width: 767px) { .filter-buttons { flex-wrap: wrap; row-gap: 0.5rem; margin-bottom: 2rem; } } .person img { border-radius: 25px; } .person h5 { font-family: "Roboto", sans-serif; } .person a { color: var(--highlight-color); } .grid-mitarbeitende { width: 100%; margin: 2rem auto; } .grid-mitarbeitende .person { width: calc(25% - 15px); float: left; display: block; position: relative; margin-bottom: 2rem; } @media (max-width: 768px) { .grid-mitarbeitende .person { width: 100%; margin-right: 0; } } .person img { width: 100%; height: auto; display: block; } .inhalt li { list-style-image: url("/images/bulletpoint.svg"); } nav .nav-panel { position: absolute; top: 100%; left: 0; right: 0; height: 0; background-color: var(--white); -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.15); transform-origin: center top; transition: transform 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22), height 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22); transform: scaleY(0); } nav .nav-panel.open { transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transform: scaleY(1); } nav ul li.subentry ul li { position: static; } nav ul li.subentry ul li a, nav ul li.subentry ul li span { border-bottom: solid 1px rgba(0, 0, 0, 0.4); } @media (max-width: 767px) { nav ul li.subentry ul li a, nav ul li.subentry ul li span { color: var(--third-color); font-weight: bold; } } nav ul > li ul li ul { left: calc(100% + 4rem); } nav > ul > li.subentry .submenu-panel { position: absolute; top: 100%; left: 0; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; width: 100%; opacity: 0; visibility: hidden; display: grid; grid-template-columns: 20rem 1fr; grid-gap: 7rem; padding: 4rem 10rem; } @media (max-width: 767px) { nav > ul > li.subentry .submenu-panel { grid-gap: 0rem; } } nav > ul > li.subentry .submenu-panel .submenu-header { grid-column: 1; } nav > ul > li.subentry .submenu-panel .submenu-header > * { white-space: normal; } nav > ul > li.subentry .submenu-panel .submenu-header h3 { padding: 0; color: var(--second-color); } nav > ul > li.subentry .submenu-panel ul.submenu-list { position: relative; grid-column: 2; width: 40%; align-items: flex-start; } @media (max-width: 767px) { nav > ul > li.subentry .submenu-panel ul.submenu-list { width: 100%; } } nav > ul > li.subentry .submenu-panel ul.submenu-list span { width: 100%; } nav > ul > li.subentry .submenu-panel ul.submenu-list li.subsubentry.open span { color: var(--highlight-color); } nav > ul > li.subentry.active > a:after, nav > ul > li.subentry.active > span:after, nav > ul > li.subentry.open > a:after, nav > ul > li.subentry.open > span:after { background-color: var(--white); } .hamburger { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .hamburger.is-active { border-radius: 50%; width: 2.5rem; height: 2.5rem; background-color: #F2F2F2; } .hamburger.is-active .line1, .hamburger.is-active .line3 { background-color: var(--second-color); } @media (max-width: 767px) { .navigationWrap header .logo { display: none; } } .navigationWrap .small-nav.mobile { display: none; } @media (max-width: 767px) { .navigationWrap .small-nav.mobile { display: flex; position: relative; float: left; flex-direction: column; align-items: flex-start; margin-top: 2rem; } .navigationWrap .small-nav.mobile li { margin-bottom: 0.5rem; font-weight: bold; font-size: 1rem; } .navigationWrap .small-nav.mobile li:last-child { margin-bottom: 0; margin-top: 0.25rem; padding: 0.4rem 1rem; border-radius: 4rem; } } .navigationWrap .small-nav.desktop { display: block; } @media (max-width: 767px) { .navigationWrap .small-nav.desktop { display: none; } }