/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /*! * Bootstrap Grid v5.3.8 (https://getbootstrap.com/) * Copyright 2011-2025 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { --bs-gutter-x: 0; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-right: auto; margin-left: auto; } @media (min-width: 480px) { .container-sm, .container { max-width: 540px; } } @media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } } @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } @media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } @media (min-width: 1400px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px; } } :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 480px; --bs-breakpoint-md: 768px; --bs-breakpoint-lg: 992px; --bs-breakpoint-xl: 1200px; --bs-breakpoint-xxl: 1400px; --bs-breakpoint-max: 1920px; } .row { --bs-gutter-x: 0rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); } .row > * { box-sizing: border-box; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .col { flex: 1 0 0; } .row-cols-auto > * { flex: 0 0 auto; width: auto; } .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 auto; width: 8.33333333%; } .col-2, #work.list-view .project-card-brand, #work.list-view .project-card-year { flex: 0 0 auto; width: 16.66666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.33333333%; } .col-5 { flex: 0 0 auto; width: 41.66666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.33333333%; } .col-8 { flex: 0 0 auto; width: 66.66666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10, #work.list-view .project-card-type { flex: 0 0 auto; width: 83.33333333%; } .col-11 { flex: 0 0 auto; width: 91.66666667%; } .col-12, #work.list-view .project-card-title { flex: 0 0 auto; width: 100%; } .offset-1 { margin-left: 8.33333333%; } .offset-2 { margin-left: 16.66666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333333%; } .offset-5 { margin-left: 41.66666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333333%; } .offset-8 { margin-left: 66.66666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333333%; } .offset-11 { margin-left: 91.66666667%; } .g-0, .gx-0 { --bs-gutter-x: 0; } .g-0, .gy-0 { --bs-gutter-y: 0; } .g-1, .gx-1 { --bs-gutter-x: 0.25rem; } .g-1, .gy-1 { --bs-gutter-y: 0.25rem; } .g-2, .gx-2 { --bs-gutter-x: 0.5rem; } .g-2, .gy-2 { --bs-gutter-y: 0.5rem; } .g-3, .gx-3 { --bs-gutter-x: 1rem; } .g-3, .gy-3 { --bs-gutter-y: 1rem; } .g-4, .gx-4 { --bs-gutter-x: 1.5rem; } .g-4, .gy-4 { --bs-gutter-y: 1.5rem; } .g-5, .gx-5 { --bs-gutter-x: 3rem; } .g-5, .gy-5 { --bs-gutter-y: 3rem; } @media (min-width: 480px) { .col-sm { flex: 1 0 0; } .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; } .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.33333333%; } .offset-sm-2 { margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333333%; } .offset-sm-5 { margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333333%; } .offset-sm-8 { margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333333%; } .offset-sm-11 { margin-left: 91.66666667%; } .g-sm-0, .gx-sm-0 { --bs-gutter-x: 0; } .g-sm-0, .gy-sm-0 { --bs-gutter-y: 0; } .g-sm-1, .gx-sm-1 { --bs-gutter-x: 0.25rem; } .g-sm-1, .gy-sm-1 { --bs-gutter-y: 0.25rem; } .g-sm-2, .gx-sm-2 { --bs-gutter-x: 0.5rem; } .g-sm-2, .gy-sm-2 { --bs-gutter-y: 0.5rem; } .g-sm-3, .gx-sm-3 { --bs-gutter-x: 1rem; } .g-sm-3, .gy-sm-3 { --bs-gutter-y: 1rem; } .g-sm-4, .gx-sm-4 { --bs-gutter-x: 1.5rem; } .g-sm-4, .gy-sm-4 { --bs-gutter-y: 1.5rem; } .g-sm-5, .gx-sm-5 { --bs-gutter-x: 3rem; } .g-sm-5, .gy-sm-5 { --bs-gutter-y: 3rem; } } @media (min-width: 768px) { .col-md { flex: 1 0 0; } .row-cols-md-auto > * { flex: 0 0 auto; width: auto; } .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-md-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-md-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1, #work.list-view .project-card-year { flex: 0 0 auto; width: 8.33333333%; } .col-md-2 { flex: 0 0 auto; width: 16.66666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .col-md-5, #work.list-view .project-card-type { flex: 0 0 auto; width: 41.66666667%; } .col-md-6, #work.list-view .project-card-title { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.33333333%; } .col-md-11 { flex: 0 0 auto; width: 91.66666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.33333333%; } .offset-md-2 { margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333333%; } .offset-md-5 { margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333333%; } .offset-md-8 { margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333333%; } .offset-md-11 { margin-left: 91.66666667%; } .g-md-0, .gx-md-0 { --bs-gutter-x: 0; } .g-md-0, .gy-md-0 { --bs-gutter-y: 0; } .g-md-1, .gx-md-1 { --bs-gutter-x: 0.25rem; } .g-md-1, .gy-md-1 { --bs-gutter-y: 0.25rem; } .g-md-2, .gx-md-2 { --bs-gutter-x: 0.5rem; } .g-md-2, .gy-md-2 { --bs-gutter-y: 0.5rem; } .g-md-3, .gx-md-3 { --bs-gutter-x: 1rem; } .g-md-3, .gy-md-3 { --bs-gutter-y: 1rem; } .g-md-4, .gx-md-4 { --bs-gutter-x: 1.5rem; } .g-md-4, .gy-md-4 { --bs-gutter-y: 1.5rem; } .g-md-5, .gx-md-5 { --bs-gutter-x: 3rem; } .g-md-5, .gy-md-5 { --bs-gutter-y: 3rem; } } @media (min-width: 992px) { .col-lg { flex: 1 0 0; } .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1, #work.list-view .project-card-year { flex: 0 0 auto; width: 8.33333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4, #work.list-view .project-card-type { flex: 0 0 auto; width: 33.33333333%; } .col-lg-5, #work.list-view .project-card-title { flex: 0 0 auto; width: 41.66666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333333%; } .offset-lg-2 { margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333333%; } .offset-lg-5 { margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333333%; } .offset-lg-8 { margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333333%; } .offset-lg-11 { margin-left: 91.66666667%; } .g-lg-0, .gx-lg-0 { --bs-gutter-x: 0; } .g-lg-0, .gy-lg-0 { --bs-gutter-y: 0; } .g-lg-1, .gx-lg-1 { --bs-gutter-x: 0.25rem; } .g-lg-1, .gy-lg-1 { --bs-gutter-y: 0.25rem; } .g-lg-2, .gx-lg-2 { --bs-gutter-x: 0.5rem; } .g-lg-2, .gy-lg-2 { --bs-gutter-y: 0.5rem; } .g-lg-3, .gx-lg-3 { --bs-gutter-x: 1rem; } .g-lg-3, .gy-lg-3 { --bs-gutter-y: 1rem; } .g-lg-4, .gx-lg-4 { --bs-gutter-x: 1.5rem; } .g-lg-4, .gy-lg-4 { --bs-gutter-y: 1.5rem; } .g-lg-5, .gx-lg-5 { --bs-gutter-x: 3rem; } .g-lg-5, .gy-lg-5 { --bs-gutter-y: 3rem; } } @media (min-width: 1200px) { .col-xl { flex: 1 0 0; } .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-xl-auto { flex: 0 0 auto; width: auto; } .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.33333333%; } .offset-xl-2 { margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333333%; } .offset-xl-5 { margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333333%; } .offset-xl-8 { margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333333%; } .offset-xl-11 { margin-left: 91.66666667%; } .g-xl-0, .gx-xl-0 { --bs-gutter-x: 0; } .g-xl-0, .gy-xl-0 { --bs-gutter-y: 0; } .g-xl-1, .gx-xl-1 { --bs-gutter-x: 0.25rem; } .g-xl-1, .gy-xl-1 { --bs-gutter-y: 0.25rem; } .g-xl-2, .gx-xl-2 { --bs-gutter-x: 0.5rem; } .g-xl-2, .gy-xl-2 { --bs-gutter-y: 0.5rem; } .g-xl-3, .gx-xl-3 { --bs-gutter-x: 1rem; } .g-xl-3, .gy-xl-3 { --bs-gutter-y: 1rem; } .g-xl-4, .gx-xl-4 { --bs-gutter-x: 1.5rem; } .g-xl-4, .gy-xl-4 { --bs-gutter-y: 1.5rem; } .g-xl-5, .gx-xl-5 { --bs-gutter-x: 3rem; } .g-xl-5, .gy-xl-5 { --bs-gutter-y: 3rem; } } @media (min-width: 1400px) { .col-xxl { flex: 1 0 0; } .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-xxl-auto { flex: 0 0 auto; width: auto; } .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xxl-3 { flex: 0 0 auto; width: 25%; } .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xxl-6 { flex: 0 0 auto; width: 50%; } .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xxl-9 { flex: 0 0 auto; width: 75%; } .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xxl-12 { flex: 0 0 auto; width: 100%; } .offset-xxl-0 { margin-left: 0; } .offset-xxl-1 { margin-left: 8.33333333%; } .offset-xxl-2 { margin-left: 16.66666667%; } .offset-xxl-3 { margin-left: 25%; } .offset-xxl-4 { margin-left: 33.33333333%; } .offset-xxl-5 { margin-left: 41.66666667%; } .offset-xxl-6 { margin-left: 50%; } .offset-xxl-7 { margin-left: 58.33333333%; } .offset-xxl-8 { margin-left: 66.66666667%; } .offset-xxl-9 { margin-left: 75%; } .offset-xxl-10 { margin-left: 83.33333333%; } .offset-xxl-11 { margin-left: 91.66666667%; } .g-xxl-0, .gx-xxl-0 { --bs-gutter-x: 0; } .g-xxl-0, .gy-xxl-0 { --bs-gutter-y: 0; } .g-xxl-1, .gx-xxl-1 { --bs-gutter-x: 0.25rem; } .g-xxl-1, .gy-xxl-1 { --bs-gutter-y: 0.25rem; } .g-xxl-2, .gx-xxl-2 { --bs-gutter-x: 0.5rem; } .g-xxl-2, .gy-xxl-2 { --bs-gutter-y: 0.5rem; } .g-xxl-3, .gx-xxl-3 { --bs-gutter-x: 1rem; } .g-xxl-3, .gy-xxl-3 { --bs-gutter-y: 1rem; } .g-xxl-4, .gx-xxl-4 { --bs-gutter-x: 1.5rem; } .g-xxl-4, .gy-xxl-4 { --bs-gutter-y: 1.5rem; } .g-xxl-5, .gx-xxl-5 { --bs-gutter-x: 3rem; } .g-xxl-5, .gy-xxl-5 { --bs-gutter-y: 3rem; } } @media (min-width: 1920px) { .col-max { flex: 1 0 0; } .row-cols-max-auto > * { flex: 0 0 auto; width: auto; } .row-cols-max-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-max-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-max-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-max-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-max-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-max-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-max-auto { flex: 0 0 auto; width: auto; } .col-max-1 { flex: 0 0 auto; width: 8.33333333%; } .col-max-2 { flex: 0 0 auto; width: 16.66666667%; } .col-max-3 { flex: 0 0 auto; width: 25%; } .col-max-4 { flex: 0 0 auto; width: 33.33333333%; } .col-max-5 { flex: 0 0 auto; width: 41.66666667%; } .col-max-6 { flex: 0 0 auto; width: 50%; } .col-max-7 { flex: 0 0 auto; width: 58.33333333%; } .col-max-8 { flex: 0 0 auto; width: 66.66666667%; } .col-max-9 { flex: 0 0 auto; width: 75%; } .col-max-10 { flex: 0 0 auto; width: 83.33333333%; } .col-max-11 { flex: 0 0 auto; width: 91.66666667%; } .col-max-12 { flex: 0 0 auto; width: 100%; } .offset-max-0 { margin-left: 0; } .offset-max-1 { margin-left: 8.33333333%; } .offset-max-2 { margin-left: 16.66666667%; } .offset-max-3 { margin-left: 25%; } .offset-max-4 { margin-left: 33.33333333%; } .offset-max-5 { margin-left: 41.66666667%; } .offset-max-6 { margin-left: 50%; } .offset-max-7 { margin-left: 58.33333333%; } .offset-max-8 { margin-left: 66.66666667%; } .offset-max-9 { margin-left: 75%; } .offset-max-10 { margin-left: 83.33333333%; } .offset-max-11 { margin-left: 91.66666667%; } .g-max-0, .gx-max-0 { --bs-gutter-x: 0; } .g-max-0, .gy-max-0 { --bs-gutter-y: 0; } .g-max-1, .gx-max-1 { --bs-gutter-x: 0.25rem; } .g-max-1, .gy-max-1 { --bs-gutter-y: 0.25rem; } .g-max-2, .gx-max-2 { --bs-gutter-x: 0.5rem; } .g-max-2, .gy-max-2 { --bs-gutter-y: 0.5rem; } .g-max-3, .gx-max-3 { --bs-gutter-x: 1rem; } .g-max-3, .gy-max-3 { --bs-gutter-y: 1rem; } .g-max-4, .gx-max-4 { --bs-gutter-x: 1.5rem; } .g-max-4, .gy-max-4 { --bs-gutter-y: 1.5rem; } .g-max-5, .gx-max-5 { --bs-gutter-x: 3rem; } .g-max-5, .gy-max-5 { --bs-gutter-y: 3rem; } } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-grid { display: grid !important; } .d-inline-grid { display: inline-grid !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-none { display: none !important; } .flex-fill { flex: 1 1 auto !important; } .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .flex-row-reverse { flex-direction: row-reverse !important; } .flex-column-reverse { flex-direction: column-reverse !important; } .flex-grow-0 { flex-grow: 0 !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-shrink-1 { flex-shrink: 1 !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-around { justify-content: space-around !important; } .justify-content-evenly { justify-content: space-evenly !important; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-baseline { align-items: baseline !important; } .align-items-stretch { align-items: stretch !important; } .align-content-start { align-content: flex-start !important; } .align-content-end { align-content: flex-end !important; } .align-content-center { align-content: center !important; } .align-content-between { align-content: space-between !important; } .align-content-around { align-content: space-around !important; } .align-content-stretch { align-content: stretch !important; } .align-self-auto { align-self: auto !important; } .align-self-start { align-self: flex-start !important; } .align-self-end { align-self: flex-end !important; } .align-self-center { align-self: center !important; } .align-self-baseline { align-self: baseline !important; } .align-self-stretch { align-self: stretch !important; } .order-first { order: -1 !important; } .order-0 { order: 0 !important; } .order-1 { order: 1 !important; } .order-2 { order: 2 !important; } .order-3 { order: 3 !important; } .order-4 { order: 4 !important; } .order-5 { order: 5 !important; } .order-last { order: 6 !important; } .m-0 { margin: 0 !important; } .m-1 { margin: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .m-3 { margin: 1rem !important; } .m-4 { margin: 1.5rem !important; } .m-5 { margin: 3rem !important; } .m-auto { margin: auto !important; } .mx-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .mt-auto { margin-top: auto !important; } .me-0 { margin-right: 0 !important; } .me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; } .me-3 { margin-right: 1rem !important; } .me-4 { margin-right: 1.5rem !important; } .me-5 { margin-right: 3rem !important; } .me-auto { margin-right: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .mb-auto { margin-bottom: auto !important; } .ms-0 { margin-left: 0 !important; } .ms-1 { margin-left: 0.25rem !important; } .ms-2 { margin-left: 0.5rem !important; } .ms-3 { margin-left: 1rem !important; } .ms-4 { margin-left: 1.5rem !important; } .ms-5 { margin-left: 3rem !important; } .ms-auto { margin-left: auto !important; } .p-0 { padding: 0 !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .p-5 { padding: 3rem !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 0.25rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pt-3 { padding-top: 1rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pt-5 { padding-top: 3rem !important; } .pe-0 { padding-right: 0 !important; } .pe-1 { padding-right: 0.25rem !important; } .pe-2 { padding-right: 0.5rem !important; } .pe-3 { padding-right: 1rem !important; } .pe-4 { padding-right: 1.5rem !important; } .pe-5 { padding-right: 3rem !important; } .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pb-5 { padding-bottom: 3rem !important; } .ps-0 { padding-left: 0 !important; } .ps-1 { padding-left: 0.25rem !important; } .ps-2 { padding-left: 0.5rem !important; } .ps-3 { padding-left: 1rem !important; } .ps-4 { padding-left: 1.5rem !important; } .ps-5 { padding-left: 3rem !important; } @media (min-width: 480px) { .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-grid { display: grid !important; } .d-sm-inline-grid { display: inline-grid !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: flex !important; } .d-sm-inline-flex { display: inline-flex !important; } .d-sm-none { display: none !important; } .flex-sm-fill { flex: 1 1 auto !important; } .flex-sm-row { flex-direction: row !important; } .flex-sm-column { flex-direction: column !important; } .flex-sm-row-reverse { flex-direction: row-reverse !important; } .flex-sm-column-reverse { flex-direction: column-reverse !important; } .flex-sm-grow-0 { flex-grow: 0 !important; } .flex-sm-grow-1 { flex-grow: 1 !important; } .flex-sm-shrink-0 { flex-shrink: 0 !important; } .flex-sm-shrink-1 { flex-shrink: 1 !important; } .flex-sm-wrap { flex-wrap: wrap !important; } .flex-sm-nowrap { flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-sm-start { justify-content: flex-start !important; } .justify-content-sm-end { justify-content: flex-end !important; } .justify-content-sm-center { justify-content: center !important; } .justify-content-sm-between { justify-content: space-between !important; } .justify-content-sm-around { justify-content: space-around !important; } .justify-content-sm-evenly { justify-content: space-evenly !important; } .align-items-sm-start { align-items: flex-start !important; } .align-items-sm-end { align-items: flex-end !important; } .align-items-sm-center { align-items: center !important; } .align-items-sm-baseline { align-items: baseline !important; } .align-items-sm-stretch { align-items: stretch !important; } .align-content-sm-start { align-content: flex-start !important; } .align-content-sm-end { align-content: flex-end !important; } .align-content-sm-center { align-content: center !important; } .align-content-sm-between { align-content: space-between !important; } .align-content-sm-around { align-content: space-around !important; } .align-content-sm-stretch { align-content: stretch !important; } .align-self-sm-auto { align-self: auto !important; } .align-self-sm-start { align-self: flex-start !important; } .align-self-sm-end { align-self: flex-end !important; } .align-self-sm-center { align-self: center !important; } .align-self-sm-baseline { align-self: baseline !important; } .align-self-sm-stretch { align-self: stretch !important; } .order-sm-first { order: -1 !important; } .order-sm-0 { order: 0 !important; } .order-sm-1 { order: 1 !important; } .order-sm-2 { order: 2 !important; } .order-sm-3 { order: 3 !important; } .order-sm-4 { order: 4 !important; } .order-sm-5 { order: 5 !important; } .order-sm-last { order: 6 !important; } .m-sm-0 { margin: 0 !important; } .m-sm-1 { margin: 0.25rem !important; } .m-sm-2 { margin: 0.5rem !important; } .m-sm-3 { margin: 1rem !important; } .m-sm-4 { margin: 1.5rem !important; } .m-sm-5 { margin: 3rem !important; } .m-sm-auto { margin: auto !important; } .mx-sm-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-sm-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-sm-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-sm-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-sm-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-sm-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-sm-auto { margin-right: auto !important; margin-left: auto !important; } .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-sm-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-sm-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-sm-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-sm-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-sm-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-sm-0 { margin-top: 0 !important; } .mt-sm-1 { margin-top: 0.25rem !important; } .mt-sm-2 { margin-top: 0.5rem !important; } .mt-sm-3 { margin-top: 1rem !important; } .mt-sm-4 { margin-top: 1.5rem !important; } .mt-sm-5 { margin-top: 3rem !important; } .mt-sm-auto { margin-top: auto !important; } .me-sm-0 { margin-right: 0 !important; } .me-sm-1 { margin-right: 0.25rem !important; } .me-sm-2 { margin-right: 0.5rem !important; } .me-sm-3 { margin-right: 1rem !important; } .me-sm-4 { margin-right: 1.5rem !important; } .me-sm-5 { margin-right: 3rem !important; } .me-sm-auto { margin-right: auto !important; } .mb-sm-0 { margin-bottom: 0 !important; } .mb-sm-1 { margin-bottom: 0.25rem !important; } .mb-sm-2 { margin-bottom: 0.5rem !important; } .mb-sm-3 { margin-bottom: 1rem !important; } .mb-sm-4 { margin-bottom: 1.5rem !important; } .mb-sm-5 { margin-bottom: 3rem !important; } .mb-sm-auto { margin-bottom: auto !important; } .ms-sm-0 { margin-left: 0 !important; } .ms-sm-1 { margin-left: 0.25rem !important; } .ms-sm-2 { margin-left: 0.5rem !important; } .ms-sm-3 { margin-left: 1rem !important; } .ms-sm-4 { margin-left: 1.5rem !important; } .ms-sm-5 { margin-left: 3rem !important; } .ms-sm-auto { margin-left: auto !important; } .p-sm-0 { padding: 0 !important; } .p-sm-1 { padding: 0.25rem !important; } .p-sm-2 { padding: 0.5rem !important; } .p-sm-3 { padding: 1rem !important; } .p-sm-4 { padding: 1.5rem !important; } .p-sm-5 { padding: 3rem !important; } .px-sm-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-sm-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-sm-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-sm-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-sm-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-sm-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-sm-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-sm-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-sm-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-sm-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-sm-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-sm-0 { padding-top: 0 !important; } .pt-sm-1 { padding-top: 0.25rem !important; } .pt-sm-2 { padding-top: 0.5rem !important; } .pt-sm-3 { padding-top: 1rem !important; } .pt-sm-4 { padding-top: 1.5rem !important; } .pt-sm-5 { padding-top: 3rem !important; } .pe-sm-0 { padding-right: 0 !important; } .pe-sm-1 { padding-right: 0.25rem !important; } .pe-sm-2 { padding-right: 0.5rem !important; } .pe-sm-3 { padding-right: 1rem !important; } .pe-sm-4 { padding-right: 1.5rem !important; } .pe-sm-5 { padding-right: 3rem !important; } .pb-sm-0 { padding-bottom: 0 !important; } .pb-sm-1 { padding-bottom: 0.25rem !important; } .pb-sm-2 { padding-bottom: 0.5rem !important; } .pb-sm-3 { padding-bottom: 1rem !important; } .pb-sm-4 { padding-bottom: 1.5rem !important; } .pb-sm-5 { padding-bottom: 3rem !important; } .ps-sm-0 { padding-left: 0 !important; } .ps-sm-1 { padding-left: 0.25rem !important; } .ps-sm-2 { padding-left: 0.5rem !important; } .ps-sm-3 { padding-left: 1rem !important; } .ps-sm-4 { padding-left: 1.5rem !important; } .ps-sm-5 { padding-left: 3rem !important; } } @media (min-width: 768px) { .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-grid { display: grid !important; } .d-md-inline-grid { display: inline-grid !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: flex !important; } .d-md-inline-flex { display: inline-flex !important; } .d-md-none { display: none !important; } .flex-md-fill { flex: 1 1 auto !important; } .flex-md-row { flex-direction: row !important; } .flex-md-column { flex-direction: column !important; } .flex-md-row-reverse { flex-direction: row-reverse !important; } .flex-md-column-reverse { flex-direction: column-reverse !important; } .flex-md-grow-0 { flex-grow: 0 !important; } .flex-md-grow-1 { flex-grow: 1 !important; } .flex-md-shrink-0 { flex-shrink: 0 !important; } .flex-md-shrink-1 { flex-shrink: 1 !important; } .flex-md-wrap { flex-wrap: wrap !important; } .flex-md-nowrap { flex-wrap: nowrap !important; } .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-md-start { justify-content: flex-start !important; } .justify-content-md-end { justify-content: flex-end !important; } .justify-content-md-center { justify-content: center !important; } .justify-content-md-between { justify-content: space-between !important; } .justify-content-md-around { justify-content: space-around !important; } .justify-content-md-evenly { justify-content: space-evenly !important; } .align-items-md-start { align-items: flex-start !important; } .align-items-md-end { align-items: flex-end !important; } .align-items-md-center { align-items: center !important; } .align-items-md-baseline { align-items: baseline !important; } .align-items-md-stretch { align-items: stretch !important; } .align-content-md-start { align-content: flex-start !important; } .align-content-md-end { align-content: flex-end !important; } .align-content-md-center { align-content: center !important; } .align-content-md-between { align-content: space-between !important; } .align-content-md-around { align-content: space-around !important; } .align-content-md-stretch { align-content: stretch !important; } .align-self-md-auto { align-self: auto !important; } .align-self-md-start { align-self: flex-start !important; } .align-self-md-end { align-self: flex-end !important; } .align-self-md-center { align-self: center !important; } .align-self-md-baseline { align-self: baseline !important; } .align-self-md-stretch { align-self: stretch !important; } .order-md-first { order: -1 !important; } .order-md-0 { order: 0 !important; } .order-md-1 { order: 1 !important; } .order-md-2 { order: 2 !important; } .order-md-3 { order: 3 !important; } .order-md-4 { order: 4 !important; } .order-md-5 { order: 5 !important; } .order-md-last { order: 6 !important; } .m-md-0 { margin: 0 !important; } .m-md-1 { margin: 0.25rem !important; } .m-md-2 { margin: 0.5rem !important; } .m-md-3 { margin: 1rem !important; } .m-md-4 { margin: 1.5rem !important; } .m-md-5 { margin: 3rem !important; } .m-md-auto { margin: auto !important; } .mx-md-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-md-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-md-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-md-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-md-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-md-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-md-auto { margin-right: auto !important; margin-left: auto !important; } .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-md-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-md-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-md-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-md-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-md-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-md-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-md-0 { margin-top: 0 !important; } .mt-md-1 { margin-top: 0.25rem !important; } .mt-md-2 { margin-top: 0.5rem !important; } .mt-md-3 { margin-top: 1rem !important; } .mt-md-4 { margin-top: 1.5rem !important; } .mt-md-5 { margin-top: 3rem !important; } .mt-md-auto { margin-top: auto !important; } .me-md-0 { margin-right: 0 !important; } .me-md-1 { margin-right: 0.25rem !important; } .me-md-2 { margin-right: 0.5rem !important; } .me-md-3 { margin-right: 1rem !important; } .me-md-4 { margin-right: 1.5rem !important; } .me-md-5 { margin-right: 3rem !important; } .me-md-auto { margin-right: auto !important; } .mb-md-0 { margin-bottom: 0 !important; } .mb-md-1 { margin-bottom: 0.25rem !important; } .mb-md-2 { margin-bottom: 0.5rem !important; } .mb-md-3 { margin-bottom: 1rem !important; } .mb-md-4 { margin-bottom: 1.5rem !important; } .mb-md-5 { margin-bottom: 3rem !important; } .mb-md-auto { margin-bottom: auto !important; } .ms-md-0 { margin-left: 0 !important; } .ms-md-1 { margin-left: 0.25rem !important; } .ms-md-2 { margin-left: 0.5rem !important; } .ms-md-3 { margin-left: 1rem !important; } .ms-md-4 { margin-left: 1.5rem !important; } .ms-md-5 { margin-left: 3rem !important; } .ms-md-auto { margin-left: auto !important; } .p-md-0 { padding: 0 !important; } .p-md-1 { padding: 0.25rem !important; } .p-md-2 { padding: 0.5rem !important; } .p-md-3 { padding: 1rem !important; } .p-md-4 { padding: 1.5rem !important; } .p-md-5 { padding: 3rem !important; } .px-md-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-md-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-md-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-md-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-md-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-md-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-md-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-md-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-md-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-md-0 { padding-top: 0 !important; } .pt-md-1 { padding-top: 0.25rem !important; } .pt-md-2 { padding-top: 0.5rem !important; } .pt-md-3 { padding-top: 1rem !important; } .pt-md-4 { padding-top: 1.5rem !important; } .pt-md-5 { padding-top: 3rem !important; } .pe-md-0 { padding-right: 0 !important; } .pe-md-1 { padding-right: 0.25rem !important; } .pe-md-2 { padding-right: 0.5rem !important; } .pe-md-3 { padding-right: 1rem !important; } .pe-md-4 { padding-right: 1.5rem !important; } .pe-md-5 { padding-right: 3rem !important; } .pb-md-0 { padding-bottom: 0 !important; } .pb-md-1 { padding-bottom: 0.25rem !important; } .pb-md-2 { padding-bottom: 0.5rem !important; } .pb-md-3 { padding-bottom: 1rem !important; } .pb-md-4 { padding-bottom: 1.5rem !important; } .pb-md-5 { padding-bottom: 3rem !important; } .ps-md-0 { padding-left: 0 !important; } .ps-md-1 { padding-left: 0.25rem !important; } .ps-md-2 { padding-left: 0.5rem !important; } .ps-md-3 { padding-left: 1rem !important; } .ps-md-4 { padding-left: 1.5rem !important; } .ps-md-5 { padding-left: 3rem !important; } } @media (min-width: 992px) { .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-grid { display: grid !important; } .d-lg-inline-grid { display: inline-grid !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: flex !important; } .d-lg-inline-flex { display: inline-flex !important; } .d-lg-none { display: none !important; } .flex-lg-fill { flex: 1 1 auto !important; } .flex-lg-row { flex-direction: row !important; } .flex-lg-column { flex-direction: column !important; } .flex-lg-row-reverse { flex-direction: row-reverse !important; } .flex-lg-column-reverse { flex-direction: column-reverse !important; } .flex-lg-grow-0 { flex-grow: 0 !important; } .flex-lg-grow-1 { flex-grow: 1 !important; } .flex-lg-shrink-0 { flex-shrink: 0 !important; } .flex-lg-shrink-1 { flex-shrink: 1 !important; } .flex-lg-wrap { flex-wrap: wrap !important; } .flex-lg-nowrap { flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-lg-start { justify-content: flex-start !important; } .justify-content-lg-end { justify-content: flex-end !important; } .justify-content-lg-center { justify-content: center !important; } .justify-content-lg-between { justify-content: space-between !important; } .justify-content-lg-around { justify-content: space-around !important; } .justify-content-lg-evenly { justify-content: space-evenly !important; } .align-items-lg-start { align-items: flex-start !important; } .align-items-lg-end { align-items: flex-end !important; } .align-items-lg-center { align-items: center !important; } .align-items-lg-baseline { align-items: baseline !important; } .align-items-lg-stretch { align-items: stretch !important; } .align-content-lg-start { align-content: flex-start !important; } .align-content-lg-end { align-content: flex-end !important; } .align-content-lg-center { align-content: center !important; } .align-content-lg-between { align-content: space-between !important; } .align-content-lg-around { align-content: space-around !important; } .align-content-lg-stretch { align-content: stretch !important; } .align-self-lg-auto { align-self: auto !important; } .align-self-lg-start { align-self: flex-start !important; } .align-self-lg-end { align-self: flex-end !important; } .align-self-lg-center { align-self: center !important; } .align-self-lg-baseline { align-self: baseline !important; } .align-self-lg-stretch { align-self: stretch !important; } .order-lg-first { order: -1 !important; } .order-lg-0 { order: 0 !important; } .order-lg-1 { order: 1 !important; } .order-lg-2 { order: 2 !important; } .order-lg-3 { order: 3 !important; } .order-lg-4 { order: 4 !important; } .order-lg-5 { order: 5 !important; } .order-lg-last { order: 6 !important; } .m-lg-0 { margin: 0 !important; } .m-lg-1 { margin: 0.25rem !important; } .m-lg-2 { margin: 0.5rem !important; } .m-lg-3 { margin: 1rem !important; } .m-lg-4 { margin: 1.5rem !important; } .m-lg-5 { margin: 3rem !important; } .m-lg-auto { margin: auto !important; } .mx-lg-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-lg-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-lg-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-lg-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-lg-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-lg-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-lg-auto { margin-right: auto !important; margin-left: auto !important; } .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-lg-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-lg-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-lg-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-lg-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-lg-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-lg-0 { margin-top: 0 !important; } .mt-lg-1 { margin-top: 0.25rem !important; } .mt-lg-2 { margin-top: 0.5rem !important; } .mt-lg-3 { margin-top: 1rem !important; } .mt-lg-4 { margin-top: 1.5rem !important; } .mt-lg-5 { margin-top: 3rem !important; } .mt-lg-auto { margin-top: auto !important; } .me-lg-0 { margin-right: 0 !important; } .me-lg-1 { margin-right: 0.25rem !important; } .me-lg-2 { margin-right: 0.5rem !important; } .me-lg-3 { margin-right: 1rem !important; } .me-lg-4 { margin-right: 1.5rem !important; } .me-lg-5 { margin-right: 3rem !important; } .me-lg-auto { margin-right: auto !important; } .mb-lg-0 { margin-bottom: 0 !important; } .mb-lg-1 { margin-bottom: 0.25rem !important; } .mb-lg-2 { margin-bottom: 0.5rem !important; } .mb-lg-3 { margin-bottom: 1rem !important; } .mb-lg-4 { margin-bottom: 1.5rem !important; } .mb-lg-5 { margin-bottom: 3rem !important; } .mb-lg-auto { margin-bottom: auto !important; } .ms-lg-0 { margin-left: 0 !important; } .ms-lg-1 { margin-left: 0.25rem !important; } .ms-lg-2 { margin-left: 0.5rem !important; } .ms-lg-3 { margin-left: 1rem !important; } .ms-lg-4 { margin-left: 1.5rem !important; } .ms-lg-5 { margin-left: 3rem !important; } .ms-lg-auto { margin-left: auto !important; } .p-lg-0 { padding: 0 !important; } .p-lg-1 { padding: 0.25rem !important; } .p-lg-2 { padding: 0.5rem !important; } .p-lg-3 { padding: 1rem !important; } .p-lg-4 { padding: 1.5rem !important; } .p-lg-5 { padding: 3rem !important; } .px-lg-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-lg-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-lg-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-lg-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-lg-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-lg-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-lg-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-lg-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-lg-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-lg-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-lg-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-lg-0 { padding-top: 0 !important; } .pt-lg-1 { padding-top: 0.25rem !important; } .pt-lg-2 { padding-top: 0.5rem !important; } .pt-lg-3 { padding-top: 1rem !important; } .pt-lg-4 { padding-top: 1.5rem !important; } .pt-lg-5 { padding-top: 3rem !important; } .pe-lg-0 { padding-right: 0 !important; } .pe-lg-1 { padding-right: 0.25rem !important; } .pe-lg-2 { padding-right: 0.5rem !important; } .pe-lg-3 { padding-right: 1rem !important; } .pe-lg-4 { padding-right: 1.5rem !important; } .pe-lg-5 { padding-right: 3rem !important; } .pb-lg-0 { padding-bottom: 0 !important; } .pb-lg-1 { padding-bottom: 0.25rem !important; } .pb-lg-2 { padding-bottom: 0.5rem !important; } .pb-lg-3 { padding-bottom: 1rem !important; } .pb-lg-4 { padding-bottom: 1.5rem !important; } .pb-lg-5 { padding-bottom: 3rem !important; } .ps-lg-0 { padding-left: 0 !important; } .ps-lg-1 { padding-left: 0.25rem !important; } .ps-lg-2 { padding-left: 0.5rem !important; } .ps-lg-3 { padding-left: 1rem !important; } .ps-lg-4 { padding-left: 1.5rem !important; } .ps-lg-5 { padding-left: 3rem !important; } } @media (min-width: 1200px) { .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-grid { display: grid !important; } .d-xl-inline-grid { display: inline-grid !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: flex !important; } .d-xl-inline-flex { display: inline-flex !important; } .d-xl-none { display: none !important; } .flex-xl-fill { flex: 1 1 auto !important; } .flex-xl-row { flex-direction: row !important; } .flex-xl-column { flex-direction: column !important; } .flex-xl-row-reverse { flex-direction: row-reverse !important; } .flex-xl-column-reverse { flex-direction: column-reverse !important; } .flex-xl-grow-0 { flex-grow: 0 !important; } .flex-xl-grow-1 { flex-grow: 1 !important; } .flex-xl-shrink-0 { flex-shrink: 0 !important; } .flex-xl-shrink-1 { flex-shrink: 1 !important; } .flex-xl-wrap { flex-wrap: wrap !important; } .flex-xl-nowrap { flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-xl-start { justify-content: flex-start !important; } .justify-content-xl-end { justify-content: flex-end !important; } .justify-content-xl-center { justify-content: center !important; } .justify-content-xl-between { justify-content: space-between !important; } .justify-content-xl-around { justify-content: space-around !important; } .justify-content-xl-evenly { justify-content: space-evenly !important; } .align-items-xl-start { align-items: flex-start !important; } .align-items-xl-end { align-items: flex-end !important; } .align-items-xl-center { align-items: center !important; } .align-items-xl-baseline { align-items: baseline !important; } .align-items-xl-stretch { align-items: stretch !important; } .align-content-xl-start { align-content: flex-start !important; } .align-content-xl-end { align-content: flex-end !important; } .align-content-xl-center { align-content: center !important; } .align-content-xl-between { align-content: space-between !important; } .align-content-xl-around { align-content: space-around !important; } .align-content-xl-stretch { align-content: stretch !important; } .align-self-xl-auto { align-self: auto !important; } .align-self-xl-start { align-self: flex-start !important; } .align-self-xl-end { align-self: flex-end !important; } .align-self-xl-center { align-self: center !important; } .align-self-xl-baseline { align-self: baseline !important; } .align-self-xl-stretch { align-self: stretch !important; } .order-xl-first { order: -1 !important; } .order-xl-0 { order: 0 !important; } .order-xl-1 { order: 1 !important; } .order-xl-2 { order: 2 !important; } .order-xl-3 { order: 3 !important; } .order-xl-4 { order: 4 !important; } .order-xl-5 { order: 5 !important; } .order-xl-last { order: 6 !important; } .m-xl-0 { margin: 0 !important; } .m-xl-1 { margin: 0.25rem !important; } .m-xl-2 { margin: 0.5rem !important; } .m-xl-3 { margin: 1rem !important; } .m-xl-4 { margin: 1.5rem !important; } .m-xl-5 { margin: 3rem !important; } .m-xl-auto { margin: auto !important; } .mx-xl-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-xl-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-xl-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-xl-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-xl-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-xl-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-xl-auto { margin-right: auto !important; margin-left: auto !important; } .my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-xl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-xl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-xl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-xl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-xl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-xl-0 { margin-top: 0 !important; } .mt-xl-1 { margin-top: 0.25rem !important; } .mt-xl-2 { margin-top: 0.5rem !important; } .mt-xl-3 { margin-top: 1rem !important; } .mt-xl-4 { margin-top: 1.5rem !important; } .mt-xl-5 { margin-top: 3rem !important; } .mt-xl-auto { margin-top: auto !important; } .me-xl-0 { margin-right: 0 !important; } .me-xl-1 { margin-right: 0.25rem !important; } .me-xl-2 { margin-right: 0.5rem !important; } .me-xl-3 { margin-right: 1rem !important; } .me-xl-4 { margin-right: 1.5rem !important; } .me-xl-5 { margin-right: 3rem !important; } .me-xl-auto { margin-right: auto !important; } .mb-xl-0 { margin-bottom: 0 !important; } .mb-xl-1 { margin-bottom: 0.25rem !important; } .mb-xl-2 { margin-bottom: 0.5rem !important; } .mb-xl-3 { margin-bottom: 1rem !important; } .mb-xl-4 { margin-bottom: 1.5rem !important; } .mb-xl-5 { margin-bottom: 3rem !important; } .mb-xl-auto { margin-bottom: auto !important; } .ms-xl-0 { margin-left: 0 !important; } .ms-xl-1 { margin-left: 0.25rem !important; } .ms-xl-2 { margin-left: 0.5rem !important; } .ms-xl-3 { margin-left: 1rem !important; } .ms-xl-4 { margin-left: 1.5rem !important; } .ms-xl-5 { margin-left: 3rem !important; } .ms-xl-auto { margin-left: auto !important; } .p-xl-0 { padding: 0 !important; } .p-xl-1 { padding: 0.25rem !important; } .p-xl-2 { padding: 0.5rem !important; } .p-xl-3 { padding: 1rem !important; } .p-xl-4 { padding: 1.5rem !important; } .p-xl-5 { padding: 3rem !important; } .px-xl-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-xl-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-xl-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-xl-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-xl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-xl-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-xl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-xl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-xl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-xl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-xl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-xl-0 { padding-top: 0 !important; } .pt-xl-1 { padding-top: 0.25rem !important; } .pt-xl-2 { padding-top: 0.5rem !important; } .pt-xl-3 { padding-top: 1rem !important; } .pt-xl-4 { padding-top: 1.5rem !important; } .pt-xl-5 { padding-top: 3rem !important; } .pe-xl-0 { padding-right: 0 !important; } .pe-xl-1 { padding-right: 0.25rem !important; } .pe-xl-2 { padding-right: 0.5rem !important; } .pe-xl-3 { padding-right: 1rem !important; } .pe-xl-4 { padding-right: 1.5rem !important; } .pe-xl-5 { padding-right: 3rem !important; } .pb-xl-0 { padding-bottom: 0 !important; } .pb-xl-1 { padding-bottom: 0.25rem !important; } .pb-xl-2 { padding-bottom: 0.5rem !important; } .pb-xl-3 { padding-bottom: 1rem !important; } .pb-xl-4 { padding-bottom: 1.5rem !important; } .pb-xl-5 { padding-bottom: 3rem !important; } .ps-xl-0 { padding-left: 0 !important; } .ps-xl-1 { padding-left: 0.25rem !important; } .ps-xl-2 { padding-left: 0.5rem !important; } .ps-xl-3 { padding-left: 1rem !important; } .ps-xl-4 { padding-left: 1.5rem !important; } .ps-xl-5 { padding-left: 3rem !important; } } @media (min-width: 1400px) { .d-xxl-inline { display: inline !important; } .d-xxl-inline-block { display: inline-block !important; } .d-xxl-block { display: block !important; } .d-xxl-grid { display: grid !important; } .d-xxl-inline-grid { display: inline-grid !important; } .d-xxl-table { display: table !important; } .d-xxl-table-row { display: table-row !important; } .d-xxl-table-cell { display: table-cell !important; } .d-xxl-flex { display: flex !important; } .d-xxl-inline-flex { display: inline-flex !important; } .d-xxl-none { display: none !important; } .flex-xxl-fill { flex: 1 1 auto !important; } .flex-xxl-row { flex-direction: row !important; } .flex-xxl-column { flex-direction: column !important; } .flex-xxl-row-reverse { flex-direction: row-reverse !important; } .flex-xxl-column-reverse { flex-direction: column-reverse !important; } .flex-xxl-grow-0 { flex-grow: 0 !important; } .flex-xxl-grow-1 { flex-grow: 1 !important; } .flex-xxl-shrink-0 { flex-shrink: 0 !important; } .flex-xxl-shrink-1 { flex-shrink: 1 !important; } .flex-xxl-wrap { flex-wrap: wrap !important; } .flex-xxl-nowrap { flex-wrap: nowrap !important; } .flex-xxl-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-xxl-start { justify-content: flex-start !important; } .justify-content-xxl-end { justify-content: flex-end !important; } .justify-content-xxl-center { justify-content: center !important; } .justify-content-xxl-between { justify-content: space-between !important; } .justify-content-xxl-around { justify-content: space-around !important; } .justify-content-xxl-evenly { justify-content: space-evenly !important; } .align-items-xxl-start { align-items: flex-start !important; } .align-items-xxl-end { align-items: flex-end !important; } .align-items-xxl-center { align-items: center !important; } .align-items-xxl-baseline { align-items: baseline !important; } .align-items-xxl-stretch { align-items: stretch !important; } .align-content-xxl-start { align-content: flex-start !important; } .align-content-xxl-end { align-content: flex-end !important; } .align-content-xxl-center { align-content: center !important; } .align-content-xxl-between { align-content: space-between !important; } .align-content-xxl-around { align-content: space-around !important; } .align-content-xxl-stretch { align-content: stretch !important; } .align-self-xxl-auto { align-self: auto !important; } .align-self-xxl-start { align-self: flex-start !important; } .align-self-xxl-end { align-self: flex-end !important; } .align-self-xxl-center { align-self: center !important; } .align-self-xxl-baseline { align-self: baseline !important; } .align-self-xxl-stretch { align-self: stretch !important; } .order-xxl-first { order: -1 !important; } .order-xxl-0 { order: 0 !important; } .order-xxl-1 { order: 1 !important; } .order-xxl-2 { order: 2 !important; } .order-xxl-3 { order: 3 !important; } .order-xxl-4 { order: 4 !important; } .order-xxl-5 { order: 5 !important; } .order-xxl-last { order: 6 !important; } .m-xxl-0 { margin: 0 !important; } .m-xxl-1 { margin: 0.25rem !important; } .m-xxl-2 { margin: 0.5rem !important; } .m-xxl-3 { margin: 1rem !important; } .m-xxl-4 { margin: 1.5rem !important; } .m-xxl-5 { margin: 3rem !important; } .m-xxl-auto { margin: auto !important; } .mx-xxl-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-xxl-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-xxl-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-xxl-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-xxl-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-xxl-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-xxl-auto { margin-right: auto !important; margin-left: auto !important; } .my-xxl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-xxl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-xxl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-xxl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-xxl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-xxl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-xxl-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-xxl-0 { margin-top: 0 !important; } .mt-xxl-1 { margin-top: 0.25rem !important; } .mt-xxl-2 { margin-top: 0.5rem !important; } .mt-xxl-3 { margin-top: 1rem !important; } .mt-xxl-4 { margin-top: 1.5rem !important; } .mt-xxl-5 { margin-top: 3rem !important; } .mt-xxl-auto { margin-top: auto !important; } .me-xxl-0 { margin-right: 0 !important; } .me-xxl-1 { margin-right: 0.25rem !important; } .me-xxl-2 { margin-right: 0.5rem !important; } .me-xxl-3 { margin-right: 1rem !important; } .me-xxl-4 { margin-right: 1.5rem !important; } .me-xxl-5 { margin-right: 3rem !important; } .me-xxl-auto { margin-right: auto !important; } .mb-xxl-0 { margin-bottom: 0 !important; } .mb-xxl-1 { margin-bottom: 0.25rem !important; } .mb-xxl-2 { margin-bottom: 0.5rem !important; } .mb-xxl-3 { margin-bottom: 1rem !important; } .mb-xxl-4 { margin-bottom: 1.5rem !important; } .mb-xxl-5 { margin-bottom: 3rem !important; } .mb-xxl-auto { margin-bottom: auto !important; } .ms-xxl-0 { margin-left: 0 !important; } .ms-xxl-1 { margin-left: 0.25rem !important; } .ms-xxl-2 { margin-left: 0.5rem !important; } .ms-xxl-3 { margin-left: 1rem !important; } .ms-xxl-4 { margin-left: 1.5rem !important; } .ms-xxl-5 { margin-left: 3rem !important; } .ms-xxl-auto { margin-left: auto !important; } .p-xxl-0 { padding: 0 !important; } .p-xxl-1 { padding: 0.25rem !important; } .p-xxl-2 { padding: 0.5rem !important; } .p-xxl-3 { padding: 1rem !important; } .p-xxl-4 { padding: 1.5rem !important; } .p-xxl-5 { padding: 3rem !important; } .px-xxl-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-xxl-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-xxl-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-xxl-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-xxl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-xxl-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-xxl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-xxl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-xxl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-xxl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-xxl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-xxl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-xxl-0 { padding-top: 0 !important; } .pt-xxl-1 { padding-top: 0.25rem !important; } .pt-xxl-2 { padding-top: 0.5rem !important; } .pt-xxl-3 { padding-top: 1rem !important; } .pt-xxl-4 { padding-top: 1.5rem !important; } .pt-xxl-5 { padding-top: 3rem !important; } .pe-xxl-0 { padding-right: 0 !important; } .pe-xxl-1 { padding-right: 0.25rem !important; } .pe-xxl-2 { padding-right: 0.5rem !important; } .pe-xxl-3 { padding-right: 1rem !important; } .pe-xxl-4 { padding-right: 1.5rem !important; } .pe-xxl-5 { padding-right: 3rem !important; } .pb-xxl-0 { padding-bottom: 0 !important; } .pb-xxl-1 { padding-bottom: 0.25rem !important; } .pb-xxl-2 { padding-bottom: 0.5rem !important; } .pb-xxl-3 { padding-bottom: 1rem !important; } .pb-xxl-4 { padding-bottom: 1.5rem !important; } .pb-xxl-5 { padding-bottom: 3rem !important; } .ps-xxl-0 { padding-left: 0 !important; } .ps-xxl-1 { padding-left: 0.25rem !important; } .ps-xxl-2 { padding-left: 0.5rem !important; } .ps-xxl-3 { padding-left: 1rem !important; } .ps-xxl-4 { padding-left: 1.5rem !important; } .ps-xxl-5 { padding-left: 3rem !important; } } @media (min-width: 1920px) { .d-max-inline { display: inline !important; } .d-max-inline-block { display: inline-block !important; } .d-max-block { display: block !important; } .d-max-grid { display: grid !important; } .d-max-inline-grid { display: inline-grid !important; } .d-max-table { display: table !important; } .d-max-table-row { display: table-row !important; } .d-max-table-cell { display: table-cell !important; } .d-max-flex { display: flex !important; } .d-max-inline-flex { display: inline-flex !important; } .d-max-none { display: none !important; } .flex-max-fill { flex: 1 1 auto !important; } .flex-max-row { flex-direction: row !important; } .flex-max-column { flex-direction: column !important; } .flex-max-row-reverse { flex-direction: row-reverse !important; } .flex-max-column-reverse { flex-direction: column-reverse !important; } .flex-max-grow-0 { flex-grow: 0 !important; } .flex-max-grow-1 { flex-grow: 1 !important; } .flex-max-shrink-0 { flex-shrink: 0 !important; } .flex-max-shrink-1 { flex-shrink: 1 !important; } .flex-max-wrap { flex-wrap: wrap !important; } .flex-max-nowrap { flex-wrap: nowrap !important; } .flex-max-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-max-start { justify-content: flex-start !important; } .justify-content-max-end { justify-content: flex-end !important; } .justify-content-max-center { justify-content: center !important; } .justify-content-max-between { justify-content: space-between !important; } .justify-content-max-around { justify-content: space-around !important; } .justify-content-max-evenly { justify-content: space-evenly !important; } .align-items-max-start { align-items: flex-start !important; } .align-items-max-end { align-items: flex-end !important; } .align-items-max-center { align-items: center !important; } .align-items-max-baseline { align-items: baseline !important; } .align-items-max-stretch { align-items: stretch !important; } .align-content-max-start { align-content: flex-start !important; } .align-content-max-end { align-content: flex-end !important; } .align-content-max-center { align-content: center !important; } .align-content-max-between { align-content: space-between !important; } .align-content-max-around { align-content: space-around !important; } .align-content-max-stretch { align-content: stretch !important; } .align-self-max-auto { align-self: auto !important; } .align-self-max-start { align-self: flex-start !important; } .align-self-max-end { align-self: flex-end !important; } .align-self-max-center { align-self: center !important; } .align-self-max-baseline { align-self: baseline !important; } .align-self-max-stretch { align-self: stretch !important; } .order-max-first { order: -1 !important; } .order-max-0 { order: 0 !important; } .order-max-1 { order: 1 !important; } .order-max-2 { order: 2 !important; } .order-max-3 { order: 3 !important; } .order-max-4 { order: 4 !important; } .order-max-5 { order: 5 !important; } .order-max-last { order: 6 !important; } .m-max-0 { margin: 0 !important; } .m-max-1 { margin: 0.25rem !important; } .m-max-2 { margin: 0.5rem !important; } .m-max-3 { margin: 1rem !important; } .m-max-4 { margin: 1.5rem !important; } .m-max-5 { margin: 3rem !important; } .m-max-auto { margin: auto !important; } .mx-max-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-max-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-max-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-max-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-max-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-max-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-max-auto { margin-right: auto !important; margin-left: auto !important; } .my-max-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-max-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-max-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-max-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-max-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-max-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-max-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-max-0 { margin-top: 0 !important; } .mt-max-1 { margin-top: 0.25rem !important; } .mt-max-2 { margin-top: 0.5rem !important; } .mt-max-3 { margin-top: 1rem !important; } .mt-max-4 { margin-top: 1.5rem !important; } .mt-max-5 { margin-top: 3rem !important; } .mt-max-auto { margin-top: auto !important; } .me-max-0 { margin-right: 0 !important; } .me-max-1 { margin-right: 0.25rem !important; } .me-max-2 { margin-right: 0.5rem !important; } .me-max-3 { margin-right: 1rem !important; } .me-max-4 { margin-right: 1.5rem !important; } .me-max-5 { margin-right: 3rem !important; } .me-max-auto { margin-right: auto !important; } .mb-max-0 { margin-bottom: 0 !important; } .mb-max-1 { margin-bottom: 0.25rem !important; } .mb-max-2 { margin-bottom: 0.5rem !important; } .mb-max-3 { margin-bottom: 1rem !important; } .mb-max-4 { margin-bottom: 1.5rem !important; } .mb-max-5 { margin-bottom: 3rem !important; } .mb-max-auto { margin-bottom: auto !important; } .ms-max-0 { margin-left: 0 !important; } .ms-max-1 { margin-left: 0.25rem !important; } .ms-max-2 { margin-left: 0.5rem !important; } .ms-max-3 { margin-left: 1rem !important; } .ms-max-4 { margin-left: 1.5rem !important; } .ms-max-5 { margin-left: 3rem !important; } .ms-max-auto { margin-left: auto !important; } .p-max-0 { padding: 0 !important; } .p-max-1 { padding: 0.25rem !important; } .p-max-2 { padding: 0.5rem !important; } .p-max-3 { padding: 1rem !important; } .p-max-4 { padding: 1.5rem !important; } .p-max-5 { padding: 3rem !important; } .px-max-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-max-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-max-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-max-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-max-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-max-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-max-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-max-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-max-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-max-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-max-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-max-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-max-0 { padding-top: 0 !important; } .pt-max-1 { padding-top: 0.25rem !important; } .pt-max-2 { padding-top: 0.5rem !important; } .pt-max-3 { padding-top: 1rem !important; } .pt-max-4 { padding-top: 1.5rem !important; } .pt-max-5 { padding-top: 3rem !important; } .pe-max-0 { padding-right: 0 !important; } .pe-max-1 { padding-right: 0.25rem !important; } .pe-max-2 { padding-right: 0.5rem !important; } .pe-max-3 { padding-right: 1rem !important; } .pe-max-4 { padding-right: 1.5rem !important; } .pe-max-5 { padding-right: 3rem !important; } .pb-max-0 { padding-bottom: 0 !important; } .pb-max-1 { padding-bottom: 0.25rem !important; } .pb-max-2 { padding-bottom: 0.5rem !important; } .pb-max-3 { padding-bottom: 1rem !important; } .pb-max-4 { padding-bottom: 1.5rem !important; } .pb-max-5 { padding-bottom: 3rem !important; } .ps-max-0 { padding-left: 0 !important; } .ps-max-1 { padding-left: 0.25rem !important; } .ps-max-2 { padding-left: 0.5rem !important; } .ps-max-3 { padding-left: 1rem !important; } .ps-max-4 { padding-left: 1.5rem !important; } .ps-max-5 { padding-left: 3rem !important; } } @media print { .d-print-inline { display: inline !important; } .d-print-inline-block { display: inline-block !important; } .d-print-block { display: block !important; } .d-print-grid { display: grid !important; } .d-print-inline-grid { display: inline-grid !important; } .d-print-table { display: table !important; } .d-print-table-row { display: table-row !important; } .d-print-table-cell { display: table-cell !important; } .d-print-flex { display: flex !important; } .d-print-inline-flex { display: inline-flex !important; } .d-print-none { display: none !important; } } .spacer-xxl { padding-bottom: calc(128px + (256 - 128) * (100vw - 480px) / (1920 - 480)); } @media (max-width: 480px) { .spacer-xxl { padding-bottom: 8rem; } } @media (min-width: 1920px) { .spacer-xxl { padding-bottom: 16rem; } } .spacer-xl { padding-bottom: calc(80px + (160 - 80) * (100vw - 480px) / (1920 - 480)); } @media (max-width: 480px) { .spacer-xl { padding-bottom: 5rem; } } @media (min-width: 1920px) { .spacer-xl { padding-bottom: 10rem; } } .spacer-lg { padding-bottom: calc(48px + (96 - 48) * (100vw - 480px) / (1920 - 480)); } @media (max-width: 480px) { .spacer-lg { padding-bottom: 3rem; } } @media (min-width: 1920px) { .spacer-lg { padding-bottom: 6rem; } } .spacer-md { padding-bottom: calc(24px + (48 - 24) * (100vw - 480px) / (1920 - 480)); } @media (max-width: 480px) { .spacer-md { padding-bottom: 1.5rem; } } @media (min-width: 1920px) { .spacer-md { padding-bottom: 3rem; } } .spacer-sm { padding-bottom: calc(8px + (16 - 8) * (100vw - 480px) / (1920 - 480)); } @media (max-width: 480px) { .spacer-sm { padding-bottom: 0.5rem; } } @media (min-width: 1920px) { .spacer-sm { padding-bottom: 1rem; } } .spacer-xs { padding-bottom: calc(4px + (8 - 4) * (100vw - 480px) / (1920 - 480)); } @media (max-width: 480px) { .spacer-xs { padding-bottom: 0.25rem; } } @media (min-width: 1920px) { .spacer-xs { padding-bottom: 0.5rem; } } @font-face { font-family: "MixGyreHeros"; src: url("../fonts/MixGyreHeros.woff2") format("woff2"), url("../fonts/MixGyreHeros.woff") format("woff"); font-style: normal; font-weight: normal; } /* SASS mixin start */ .font-max { line-height: 100%; letter-spacing: -0.05rem; font-size: 20rem; font-size: calc(64px + (320 - 64) * (100vw - 480px) / (1920 - 480)); } @media screen and (max-width: 480px) { .font-max { font-size: 4rem; } } @media screen and (min-width: 1920px) { .font-max { font-size: 20rem; } } .font-xxl { line-height: 110%; letter-spacing: -0.025rem; font-size: 7rem; font-size: calc(32px + (112 - 32) * (100vw - 480px) / (1920 - 480)); } @media screen and (max-width: 480px) { .font-xxl { font-size: 2rem; } } @media screen and (min-width: 1920px) { .font-xxl { font-size: 7rem; } } .font-xl { line-height: 120%; letter-spacing: -0.035rem; font-size: 4rem; font-size: calc(32px + (64 - 32) * (100vw - 480px) / (1920 - 480)); } @media screen and (max-width: 480px) { .font-xl { font-size: 2rem; } } @media screen and (min-width: 1920px) { .font-xl { font-size: 4rem; } } .font-lg, #work.list-view .project-card { line-height: 120%; letter-spacing: -0.025rem; font-size: 2.25rem; font-size: calc(24px + (36 - 24) * (100vw - 480px) / (1920 - 480)); } @media screen and (max-width: 480px) { .font-lg, #work.list-view .project-card { font-size: 1.5rem; } } @media screen and (min-width: 1920px) { .font-lg, #work.list-view .project-card { font-size: 2.25rem; } } .font-md, .projects-selected .project-card-infos, #next-project .project-card-infos, .locked-info, .filter-btn, .project-card-small, .tag-md-tag { line-height: 125%; letter-spacing: -0.0075rem; font-size: 1.625rem; font-size: calc(20px + (26 - 20) * (100vw - 480px) / (1920 - 480)); } @media screen and (max-width: 480px) { .font-md, .projects-selected .project-card-infos, #next-project .project-card-infos, .locked-info, .filter-btn, .project-card-small, .tag-md-tag { font-size: 1.25rem; } } @media screen and (min-width: 1920px) { .font-md, .projects-selected .project-card-infos, #next-project .project-card-infos, .locked-info, .filter-btn, .project-card-small, .tag-md-tag { font-size: 1.625rem; } } .font-sm, .project-card, button.filter-button, .filter-btn, .tag-sm, .video-consent-overlay p { line-height: 125%; letter-spacing: 0px; font-size: 1.25rem; font-size: calc(16px + (20 - 16) * (100vw - 480px) / (1920 - 480)); } @media screen and (max-width: 480px) { .font-sm, .project-card, button.filter-button, .filter-btn, .tag-sm, .video-consent-overlay p { font-size: 1rem; } } @media screen and (min-width: 1920px) { .font-sm, .project-card, button.filter-button, .filter-btn, .tag-sm, .video-consent-overlay p { font-size: 1.25rem; } } .font-xs, .project-locked-card figcaption, .tag-xs { line-height: 130%; letter-spacing: 0px; font-size: 0.875rem; font-size: calc(14px + (14 - 14) * (100vw - 480px) / (1920 - 480)); } @media screen and (max-width: 480px) { .font-xs, .project-locked-card figcaption, .tag-xs { font-size: 0.875rem; } } @media screen and (min-width: 1920px) { .font-xs, .project-locked-card figcaption, .tag-xs { font-size: 0.875rem; } } /* -------- BASE SETTINGS ----------*/ body { color: var(--color-text); font-family: "MixGyreHeros"; font-style: normal; font-feature-settings: "liga" off, "clig" off, "sups" on; text-rendering: optimizeLegibility; } /* -------- LINKS ----------*/ a:link, a:visited { color: var(--color-link); text-decoration: none; } a:link svg path, a:visited svg path { fill: var(--color-link) !important; } @media (hover: hover) { a:hover, a.active:hover { color: var(--color-link-hover) !important; } a:hover svg path, a.active:hover svg path { fill: var(--color-link-hover) !important; } a:hover em { color: var(--color-link-hover); } } a.link-boxed:link, a.link-boxed:visited { text-decoration-line: none; /* underline, overline, line-through */ } @media (hover: hover) { a.link-boxed:hover { color: var(--color-bg) !important; background: var(--color-link) !important; } a.link-boxed:hover svg path { fill: var(--color-bg) !important; } a.link-boxed:hover { text-decoration: none; } } /* -------- BUTTONS ----------*/ button { background: none; color: var(--color-link); cursor: pointer; display: inline-flex; justify-content: center; align-items: center; border: none; gap: 0.5rem; } button svg path { fill: var(--color-link) !important; } @media (hover: hover) { button:hover { color: var(--color-link-hover) !important; background: none; } button:hover svg path { fill: var(--color-link-hover) !important; } button.button-boxed:hover { color: var(--color-bg) !important; background: var(--color-link); } button.button-boxed:hover svg path { fill: var(--color-bg) !important; } } button.button-boxed { background: var(--color-active); color: var(--color-bg); cursor: pointer; display: inline-flex; justify-content: center; align-items: center; border: none; } button.button-boxed svg path { fill: var(--color-bg) !important; } /* -------- HEADLINES ----------*/ h1, h2, h3, h4, h5 { display: inline-block; } /* -------- TEXT UND ELEMENTE ----------*/ em { color: var(--color-text-secondary); xtext-transform: uppercase; } strong { color: var(--color-active); xtext-transform: uppercase; } .block-text p { padding-bottom: calc(4px + (8 - 4) * (100vw - 480px) / (1920 - 480)); } @media (max-width: 480px) { .block-text p { padding-bottom: 0.25rem; } } @media (min-width: 1920px) { .block-text p { padding-bottom: 0.5rem; } } .block-text p:last-child { padding: 0; } ul, ol { list-style-type: disc; /* oder decimal für ol */ list-style-position: outside; margin: 0; } ul { padding-left: calc(24px + (48 - 24) * (100vw - 480px) / (1920 - 480)); } @media (max-width: 480px) { ul { padding-left: 1.5rem; } } @media (min-width: 1920px) { ul { padding-left: 3rem; } } ol { list-style-type: decimal; } sup { vertical-align: super; font-size: 0.6em; line-height: 1; position: relative; } /* -------- TEXT HELPER ----------*/ .text-right, #work.list-view .project-card-year { text-align: right; justify-content: flex-end !important; } .text-center { text-align: center; margin: 0 auto; justify-content: center !important; } .text-center ul { justify-content: center; } .uppercase { text-transform: uppercase; } @media (max-width: 991.98px) { .text-center.align-reset, .text-right.align-reset, #work.list-view .align-reset.project-card-year { text-align: left !important; margin: 0 0 !important; justify-content: flex-start !important; } .text-center.align-reset ul, .text-right.align-reset ul, #work.list-view .align-reset.project-card-year ul { justify-content: flex-start; } } /* -------- STRUKTUR ----------*/ #content-wrapper { position: relative; flex: 1 0 auto; } /* -------- STRUKTUR ----------*/ .block, #work.list-view .project-card-infos { width: 100%; padding: 0.5rem; position: relative; } .block-cover:not(.boxed), .block-canvas:not(.boxed), .block-video:not(.boxed), .block-logos:not(.boxed), .block-image:not(.boxed), .block-slideshow:not(.boxed), .block-stackscroll:not(.boxed), .block-spacer:not(.boxed), .block-collapse:not(.boxed), .block-overlay:not(.boxed), .block-reference:not(.boxed) { padding: 0 0 0 0 !important; } .boxed { padding: 0 0.5rem !important; } .block-marquee { padding: 0.5rem 0 0.5rem 0 !important; } @media (min-width: 1920px) { .col-xxl-20 { flex: 0 0 auto; width: 20%; } } svg, img, video, iframe { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; } .svg-icon { display: inline; width: 1em; /* oder 16px, 24px, was du willst */ height: 1em; } .fit-cover svg, .fit-cover img, .fit-cover video, .fit-cover iframe { object-fit: cover; } .fit-scale-down svg, .fit-scale-down img, .fit-scale-down video { object-fit: scale-down; } .fullscreen, .fullscreen:not(.block-video) svg, .fullscreen img, .fullscreen video, .fullscreen iframe { width: 100% !important; height: 100vh !important; } .fullscreen-vp { height: 100%; } figure { position: relative; } figcaption, figcaption.tag, .caption { position: absolute !important; bottom: 0; left: 0; margin: 0.5rem !important; color: var(--color-caption) !important; background: var(--color-bg-caption) !important; } .vimeo-consent-placeholder, .external-consent-placeholder { position: relative; display: block; width: 100%; max-width: none; overflow: hidden; background: #000; } .vimeo-consent-placeholder:not(.is-loaded), .external-consent-placeholder:not(.is-loaded) { min-height: clamp(10rem, 28vw, 26rem); } .video-consent-poster { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; } .video-consent-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--base-unit, 1rem); background: var(--color-bg-overlay); z-index: 4000; gap: 0.5rem; } .video-consent-overlay p { display: block !important; } .video-consent-button { position: relative !important; margin: 0 !important; cursor: pointer; pointer-events: auto; } .vimeo-consent-placeholder.is-loaded, .external-consent-placeholder.is-loaded { min-height: 0; background: transparent; } .vimeo-consent-placeholder.is-loaded > iframe, .external-consent-placeholder.is-loaded > iframe, iframe.vimeo-player, iframe.external-video-frame { position: static !important; inset: auto !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; border: 0 !important; object-fit: contain; object-position: center; aspect-ratio: var(--external-video-ratio, 16/9); } .fit-cover iframe.vimeo-player, .fit-cover iframe.external-video-frame, .fit-cover.vimeo-consent-placeholder.is-loaded > iframe, .fit-cover.external-consent-placeholder.is-loaded > iframe { object-fit: cover; } .vimeo-consent-placeholder:not(.is-loaded) + .sticky-wrapper { display: none !important; } .sticky-wrapper { position: absolute !important; top: 0; right: 0; width: 100%; z-index: 3000; height: 100%; text-align: right; } .sticky-wrapper .sticky, .sticky-wrapper .sticky-front, .sticky-wrapper .sticky-fix, .sticky-wrapper .sticky-fix-front { padding: 0.5rem; } .tag.mute-toggle { cursor: pointer; background: var(--color-bg-function) !important; color: var(--color-function) !important; top: 0 !important; left: unset !important; right: 0 !important; padding: 0.5rem !important; border-radius: 2px !important; text-align: center; transition: background-color var(--transition-general); display: block !important; pointer-events: inherit !important; z-index: 4000; margin-left: auto; position: relative; } .tag.mute-toggle svg { width: 1.5rem; height: 1.5rem; display: block; } .tag.mute-toggle svg path { fill: var(--color-bg) !important; } @media (hover: hover) { .mute-toggle:hover { background: var(--color-link-hover) !important; transition: background-color var(--transition-general); } } .mute-toggle .icon-sound-off { display: none; } .mute-toggle.muted .icon-sound-on { display: inline; } .mute-toggle.muted .icon-sound-off { display: none; } .mute-toggle:not(.muted) .icon-sound-on { display: none; } .mute-toggle:not(.muted) .icon-sound-off { display: inline; } .video-progress { position: absolute; z-index: 5000; top: 0.5rem; left: 0.5rem; right: 0.5rem; overflow: hidden; xwidth: 100%; transition: none; pointer-events: none; xpadding: 0.5rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.35); } .video-progress-bar { transform-origin: left center; transform: scaleX(0); transition: none; flex: 1; height: 0.1666666667rem; border-radius: 0.5rem; overflow: hidden; position: relative; background: white; border-radius: 0.5rem; } .mobile .video-progress-bar { height: 0.125rem; } /* Overlay liegt oben drüber, klickt sich weg */ .video-overlay-play { text-align: center; position: absolute; display: flex; flex-direction: row; height: 100%; width: 100%; left: 0; top: 0; inset: 0; gap: 0.5rem; z-index: 4000; overflow: hidden; transition: none; border: none; background: rgba(0, 0, 0, 0.5); color: #fff; font: inherit; cursor: pointer; align-items: center; justify-content: stretch; } .video-overlay-play svg, .video-overlay-play span { height: auto; display: inline; width: 50%; padding: 0; } @media (hover: hover) { .video-overlay-play:hover { background: rgba(255, 0, 0, 0.8); } } .progress-spacer .tag, .progress-spacer button { margin-top: 0.75rem; } /* -------- COLLAPSE ---------- */ .block-collapse { width: 100%; overflow: hidden; } @media (hover: hover) { .collapse-toggle:hover { color: var(--color-link-hover); } } .collapse-toggle { cursor: pointer; position: relative; font: inherit; list-style: none; padding: 0.5rem !important; padding-right: 3rem !important; } .collapse-toggle::-webkit-details-marker { display: none; } .collapse-toggle::after { content: "＋"; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%) rotate(0deg); transform-origin: 50% 50%; display: inline-block; text-align: center; line-height: 1; } details[open] .collapse-toggle::after { transform: translateY(-50%) rotate(45deg); } .collapse-inner { display: none; overflow-x: hidden; max-width: 100%; } details[open] .collapse-inner { position: relative; z-index: 1000; display: flex; min-height: 1px; width: 100%; flex-direction: row; flex-wrap: wrap; } .collapse-service details { margin: 0 0.5rem 0.5rem 0.5rem !important; border-radius: 0.25rem; background: var(--color-bg-secondary); } .collapse-service .collapse-toggle { cursor: pointer; position: relative; font: inherit; list-style: none; padding: 0.5rem !important; padding-right: 6rem !important; } /* -------- COLLAPSE ---------- */ .block-overlay { margin: 0; padding: 0; position: relative; } .block-overlay .row { margin: 0; padding: 0; } .block-overlay .block-heading, .block-overlay .block-text, .block-overlay .block-texteditor, .block-overlay .block-tags, .block-overlay .block-credits, .block-overlay .block-reference, .block-overlay .block-rotator, .block-overlay .block-marquee, .block-overlay .block-shuffle { display: flex; position: absolute !important; align-items: flex-start; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; margin: 0 !important; color: var(--color-text-inverted) !important; xcolor: rgba(255, 255, 255, 0) !important; background: transparent !important; backdrop-filter: none !important; mix-blend-mode: difference; padding: 0.5rem; } .filter { mix-blend-mode: difference; } .no-filter { color: inherit !important; mix-blend-mode: unset !important; } .vh-100 { height: 100vh !important; } /* -------- CANVAS ----------*/ .canvas-wrapper { overflow: hidden; position: relative; } canvas { display: block; position: absolute; z-index: 1000; opacity: 1; top: 0; left: 0; } /* -------- LOGOS ----------*/ .logo-block { display: flex; flex-wrap: wrap; align-items: flex-start; } .logo-item { flex: 0 0 16.6666666667%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 0.5rem 4rem; margin: 1rem 0; } .logo-svg { display: block; width: 100%; height: auto; object-fit: contain; } .logo-svg path { fill: var(--color-text); } @media (max-width: 1919.98px) { .logo-item { flex: 0 0 25%; padding: 0.5rem 2.5rem; } } @media (max-width: 991.98px) { .logo-item { flex: 0 0 33.3333333333%; padding: 0.5rem 1.5rem; margin: 0.5rem 0; } } @media (max-width: 479.98px) { .logo-item { flex: 0 0 50%; padding: 0.5rem 1rem; margin: 0.5rem 0; } } /* ------------ STACK SCROLL ---------------------- */ .stackscroll { overflow: visible; height: auto; display: flex; flex-direction: column; } .stack-panel { position: sticky; top: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; pointer-events: none; } .fit-cover .stack-panel, .stack-panel.fit-cover { width: 100%; height: 100vh; object-fit: cover !important; display: block; object-position: center; } .stack-image { max-width: 100vw; max-height: 100vh; } .fit-cover .stack-image { width: 100vw; height: 100vh; } .stack-reverse { flex-direction: column-reverse; } .stack-reverse .stack-panel { bottom: 0; top: unset; } .stack-panel.left { justify-content: flex-start; } .stack-panel.center { justify-content: center; } .stack-panel.right { justify-content: flex-end; } .stack-video-bunny { pointer-events: none; } .autoplay.bunny-player .plyr__controls { display: none !important; background: red !important; } /* -------- SLIDESHOW ----------*/ .slideshow-container { position: relative; aspect-ratio: 3/2; width: 100%; height: 100%; cursor: pointer; } .slideshow-container * { transition: none !important; } .slideshow-container.inactive { cursor: default; } @media (max-width: 768px) { .aspect-1-1 .slideshow-container { aspect-ratio: 1/1 !important; } .aspect-4-5 .slideshow-container { aspect-ratio: 4/5 !important; } .aspect-3-2 .slideshow-container { aspect-ratio: 3/2 !important; } } .slideshow-container img, .slideshow-container video { height: 100%; pointer-events: none; /* verhindert versehentliche Interaktion */ user-select: none; } .slideshow-slide { overflow: hidden; position: absolute; inset: 0; height: 100%; margin: 0; display: block; top: 0; left: 0; pointer-events: none; /* verhindert versehentliche Interaktion */ user-select: none; } .slideshow-slide figcaption { opacity: 0; } /* Nur das aktive Slide ist interaktiv */ .slideshow-slide.active { z-index: 1000; } .slideshow-slide.active figcaption { opacity: 1; } .slideshow-container.clicked .slideshow-info-text { display: none !important; } .slideshow-caption { position: absolute; bottom: 0.5rem; left: 0.5rem; } .slideshow-info.sticky, .slideshow-info.sticky-front, .slideshow-info.sticky-fix, .slideshow-info.sticky-fix-front { position: sticky; display: flex; text-align: right; padding: 0.5rem; gap: 0.25rem; justify-content: flex-end; z-index: 3000; pointer-events: none; /* verhindert versehentliche Interaktion */ user-select: none; } .slideshow-info .tag { color: var(--color-function) !important; background: var(--color-bg-function) !important; } .slideshow-progress { display: flex; gap: 0.25rem; position: absolute; top: 0; left: 0; width: 100%; z-index: 3000; padding: 0.5rem; transition: none; padding-bottom: 5rem; } .slideshow-progress-bar { flex: 1; height: 0.1666666667rem; border-radius: 0.5rem; overflow: hidden; position: relative; background: rgba(255, 255, 255, 0.35); box-shadow: rgba(32, 32, 32, 0.4) 0px 0px 4px; } .mobile .slideshow-progress-bar { height: 0.125rem; } .slideshow-progress-bar .bar-inner { display: block; height: 100%; width: 0%; } .slideshow-progress-bar.is-filled .bar-inner { width: 100%; background: rgb(255, 255, 255); } .tags { display: flex; flex-wrap: wrap; gap: 0.25rem; /* oder gap: 8px; für Abstand */ margin: 0; padding: 0; list-style: none; } .tag { margin: 0; padding: 0; display: block; box-decoration-break: clone; background: var(--color-bg-tag); color: var(--color-tag); border-radius: 2px; padding: 0.25rem 0.5rem; z-index: 3000; } .tag-dark { background: var(--color-text); color: var(--color-text-inverted); } .tag-new { background: var(--color-bg-tag); color: var(--color-tag); } .tag-updated { background: orange; } /* -------- about tags ----------*/ .tag-block { margin-bottom: 0.5rem; } .tag-block h2 { margin-bottom: 0.5rem; } /* -------- more tags ----------*/ .tag[hidden] { display: none !important; } .tag-more-btn { background: var(--color-link-hover); color: var(--color-bg-tag) !important; } @media (hover: hover) { .tag-more-btn:hover { background: var(--color-bg-tag) !important; } } /* -------- LIST VIEW ----------*/ ul.tag-list { list-style-type: none; padding: 0; margin: 0; } ul.tag-list li { border-bottom: 1px solid var(--color-border); padding: 0.5rem 0; } ul.tag-list li:last-child { border-bottom: 0; } /* -------- MARQUEE ----------*/ .marquee { white-space: nowrap; width: 100%; } .marquee-left .marquee-content { display: inline-block; padding-left: 100%; animation-name: marquee-left; animation-duration: inherit; animation-timing-function: linear; animation-iteration-count: infinite; } .marquee-right .marquee-content { display: inline-block; padding-left: 100%; animation-name: marquee-right; animation-duration: inherit; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes marquee-left { 0% { transform: translate(-100%, 0); } 100% { transform: translate(0%, 0); } } @keyframes marquee-right { 0% { transform: translate(0%, 0); } 100% { transform: translate(-100%, 0); } } /* -------- PROJEKTVERWEIS ----------*/ .project-card-small { display: flex; flex-direction: row; align-items: stretch; border: 1px solid var(--color-border); color: var(--color-link-hover) !important; } .project-card-small-thumb { flex: 0 0 20%; max-width: 20%; height: auto; display: flex; align-items: stretch; overflow: hidden; } .project-card-small-thumb img, .project-card-small-thumb picture, .project-card-small-thumb > * { width: 100%; height: 100%; object-fit: cover; display: block; } @media (hover: hover) { .project-card-small:hover { border: 1px solid var(--color-link-hover); } .project-card-small:hover img { scale: 1.05; } } .project-card-small-content { flex: 0 0 80%; max-width: 80%; min-width: 0; box-sizing: border-box; /* Add your own padding, margin if needed */ padding: 0.5rem; } /* -------- COLLAPSE ---------- */ .shuffle-wrapper__item { display: none; visibility: hidden; } .shuffle-wrapper__item.active { display: inline; visibility: visible; } /* Make clicks pass-through */ #progress { pointer-events: none; } #progress .bar { background: var(--color-active); position: fixed; z-index: 9999999; top: 0; left: 0; width: 100%; height: 0.25rem; } /* Fancy blur effect */ #progress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; opacity: 1; } .progress-custom-parent { overflow: hidden; position: relative; } .progress-custom-parent #progress .bar { position: absolute; } #cc-main { background: transparent; color: var(--cc-primary-color); font-family: var(--cc-font-family); font-size: 16px; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.15; position: relative; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; position: fixed; z-index: var(--cc-z-index); } #cc-main :after, #cc-main :before, #cc-main a, #cc-main button, #cc-main div, #cc-main h2, #cc-main input, #cc-main p, #cc-main span { all: unset; box-sizing: border-box; } #cc-main .pm__badge, #cc-main button { all: initial; box-sizing: border-box; color: unset; visibility: unset; } #cc-main .pm__badge, #cc-main a, #cc-main button, #cc-main input { -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; font-size: 100%; line-height: normal; margin: 0; outline: revert; outline-offset: 2px; overflow: hidden; } #cc-main table, #cc-main tbody, #cc-main td, #cc-main th, #cc-main thead, #cc-main tr { all: revert; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; } :root { --cc-font-family: Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --cc-modal-border-radius: 2px; --cc-btn-border-radius: 2px; --cc-modal-transition-duration: 0.3s; --cc-link-color: var(--cc-btn-primary-bg); --cc-modal-margin: 1rem; --cc-z-index: 2147483647; --cc-bg: #fff; --cc-primary-color: var(--color-text); --cc-secondary-color: #5e6266; --cc-btn-primary-bg: blue; --cc-btn-primary-color: #fff; --cc-btn-primary-border-color: var(--cc-btn-primary-bg); --cc-btn-primary-hover-bg: #000; --cc-btn-primary-hover-color: #fff; --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg); --cc-btn-secondary-bg: #eaeff2; --cc-btn-secondary-color: var(--cc-primary-color); --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg); --cc-btn-secondary-hover-bg: #d4dae0; --cc-btn-secondary-hover-color: blue; --cc-btn-secondary-hover-border-color: #d4dae0; --cc-separator-border-color: #f0f4f7; --cc-toggle-on-bg: var(--cc-btn-primary-bg); --cc-toggle-off-bg: #667481; --cc-toggle-on-knob-bg: #fff; --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg); --cc-toggle-enabled-icon-color: var(--cc-bg); --cc-toggle-disabled-icon-color: var(--cc-bg); --cc-toggle-readonly-bg: #d5dee2; --cc-toggle-readonly-knob-bg: #fff; --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg); --cc-section-category-border: var(--cc-cookie-category-block-bg); --cc-cookie-category-block-bg: #f0f4f7; --cc-cookie-category-block-border: #f0f4f7; --cc-cookie-category-block-hover-bg: #e9eff4; --cc-cookie-category-block-hover-border: #e9eff4; --cc-cookie-category-expanded-block-bg: transparent; --cc-cookie-category-expanded-block-hover-bg: #dee4e9; --cc-overlay-bg: rgba(0, 0, 0, 0.65); --cc-webkit-scrollbar-bg: var(--cc-section-category-border); --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg); --cc-footer-bg: var(--cc-btn-secondary-bg); --cc-footer-color: var(--cc-secondary-color); --cc-footer-border-color: #e4eaed; --cc-pm-toggle-border-radius: 4em; } #cc-main.cc--rtl { direction: rtl; } #cc-main .cm__title, #cc-main a, #cc-main b, #cc-main em, #cc-main strong { font-weight: 600; } #cc-main button > span { pointer-events: none; } #cc-main .cc__link, #cc-main a { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; font-weight: 600; position: relative; transition: background-size 0.25s, color 0.25s ease; } #cc-main .cc__link:hover, #cc-main a:hover { background-size: 100% 1px; color: var(--cc-primary-color) !important; } #cc-main .cc__link { color: var(--cc-link-color); } #cc-main .cm__desc, #cc-main .pm__body { overscroll-behavior: auto contain; scrollbar-width: thin; } @media screen and (min-width: 640px) { #cc-main ::-webkit-scrollbar, #cc-main ::-webkit-scrollbar-thumb, #cc-main ::-webkit-scrollbar-track { all: revert; } #cc-main ::-webkit-scrollbar-thumb { -webkit-background-clip: padding-box; background-clip: padding-box; background: var(--cc-toggle-readonly-bg); border: 0.25rem solid var(--cc-bg); border-radius: 1rem; } #cc-main ::-webkit-scrollbar-thumb:hover { background: var(--cc-toggle-off-bg); } #cc-main ::-webkit-scrollbar { background: transparent; width: 12px; } } html.disable--interaction.show--consent, html.disable--interaction.show--consent body { height: auto !important; overflow: hidden !important; } @media (prefers-reduced-motion) { #cc-main { --cc-modal-transition-duration: 0s; } } .cc--darkmode { --cc-bg: #161a1c; --cc-primary-color: #ebf3f6; --cc-secondary-color: #aebbc5; --cc-btn-primary-bg: #c2d0e0; --cc-btn-primary-color: var(--cc-bg); --cc-btn-primary-border-color: var(--cc-btn-primary-bg); --cc-btn-primary-hover-bg: #98a7b6; --cc-btn-primary-hover-color: #000; --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg); --cc-btn-secondary-bg: #242c31; --cc-btn-secondary-color: var(--cc-primary-color); --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg); --cc-btn-secondary-hover-bg: #353d43; --cc-btn-secondary-hover-color: #fff; --cc-btn-secondary-hover-border-color: var(--cc-btn-secondary-hover-bg); --cc-separator-border-color: #222a30; --cc-toggle-on-bg: var(--cc-btn-primary-bg); --cc-toggle-off-bg: #525f6b; --cc-toggle-on-knob-bg: var(--cc-btn-primary-color); --cc-toggle-off-knob-bg: var(--cc-btn-primary-color); --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color); --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color); --cc-toggle-readonly-bg: #343e45; --cc-toggle-readonly-knob-bg: #5f6b72; --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg); --cc-section-category-border: #1e2428; --cc-cookie-category-block-bg: #1e2428; --cc-cookie-category-block-border: var(--cc-section-category-border); --cc-cookie-category-block-hover-bg: #242c31; --cc-cookie-category-block-hover-border: #232a2f; --cc-cookie-category-expanded-block-bg: transparent; --cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg); --cc-overlay-bg: rgba(0, 0, 0, 0.65); --cc-webkit-scrollbar-bg: var(--cc-section-category-border); --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg); --cc-footer-bg: #0c0e0f; --cc-footer-color: var(--cc-secondary-color); --cc-footer-border-color: #060809; } .cc--darkmode #cc-main { color-scheme: dark; } #cc-main .cm { background: var(--cc-bg); border-radius: var(--cc-modal-border-radius); box-shadow: 0 0.625em 1.875em rgba(0, 0, 2, 0.3); display: flex; flex-direction: column; max-width: 24rem; opacity: 0; overflow: hidden; position: fixed; transform: translateY(1.6em); visibility: hidden; z-index: 1; } #cc-main .cm--top { top: var(--cc-modal-margin); } #cc-main .cm--middle { top: 50%; transform: translateY(calc(-50% + 1.6em)); } #cc-main .cm--bottom { bottom: var(--cc-modal-margin); } #cc-main .cm--center { left: var(--cc-modal-margin); margin: 0 auto; right: var(--cc-modal-margin); width: unset; } #cc-main .cm--left { left: var(--cc-modal-margin); margin-right: var(--cc-modal-margin); } #cc-main .cm--right { margin-left: var(--cc-modal-margin); right: var(--cc-modal-margin); } #cc-main .cm__body { display: flex; flex-direction: column; justify-content: space-between; position: relative; } #cc-main .cm__btns, #cc-main .cm__links { padding: 1rem 1.3rem; width: unset; } #cc-main .cm__texts { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 1rem 0 0; } #cc-main .cm__desc, #cc-main .cm__title { padding: 0 1.3rem; } #cc-main .cm__title { font-size: 1.05em; } #cc-main .cm__title + .cm__desc { margin-top: 1.1em; } #cc-main .cm__desc { color: var(--cc-secondary-color); font-size: 0.9em; line-height: 1.5; max-height: 40vh; overflow-x: visible; overflow-y: auto; padding-bottom: 1em; } #cc-main .cm__btns { border-top: 1px solid var(--cc-separator-border-color); display: flex; flex-direction: column; justify-content: center; } #cc-main .cm__btn-group { display: grid; grid-auto-columns: minmax(0, 1fr); } #cc-main .cm__btn + .cm__btn, #cc-main .cm__btn-group + .cm__btn-group { margin-top: 0.375rem; } #cc-main .cm--flip .cm__btn + .cm__btn, #cc-main .cm--flip .cm__btn-group + .cm__btn-group { margin-bottom: 0.375rem; margin-top: 0; } #cc-main .cm--inline .cm__btn + .cm__btn { margin-left: 0.375rem; margin-top: 0; } #cc-main .cm--inline.cm--flip .cm__btn + .cm__btn { margin-bottom: 0; margin-left: 0; margin-right: 0.375rem; } #cc-main .cm--inline.cm--flip .cm__btn-group + .cm__btn-group { margin-bottom: 0.375rem; margin-right: 0; } #cc-main .cm--wide .cm__btn + .cm__btn, #cc-main .cm--wide .cm__btn-group + .cm__btn-group { margin-left: 0.375rem; margin-top: 0; } #cc-main .cm--wide.cm--flip .cm__btn + .cm__btn, #cc-main .cm--wide.cm--flip .cm__btn-group + .cm__btn-group { margin-bottom: 0; margin-right: 0.375rem; } #cc-main .cm--bar:not(.cm--inline) .cm__btn-group--uneven, #cc-main .cm--wide .cm__btn-group--uneven { display: flex; flex: 1; justify-content: space-between; } #cc-main .cm--bar:not(.cm--inline).cm--flip .cm__btn-group--uneven, #cc-main .cm--wide.cm--flip .cm__btn-group--uneven { flex-direction: row-reverse; } #cc-main .cm__btn { background: var(--cc-btn-primary-bg); border: 1px solid var(--cc-btn-primary-border-color); border-radius: var(--cc-btn-border-radius); color: var(--cc-btn-primary-color); font-size: 0.82em; font-weight: 600; min-height: 42px; padding: 0.5em 1em; text-align: center; } #cc-main .cm__btn:hover { background: var(--cc-btn-primary-hover-bg); border-color: var(--cc-btn-primary-hover-border-color); color: var(--cc-btn-primary-hover-color) !important; } #cc-main .cm__btn--secondary { background: var(--cc-btn-secondary-bg); border-color: var(--cc-btn-secondary-border-color); color: var(--cc-btn-secondary-color) !important; } #cc-main .cm__btn--secondary:hover { background: var(--cc-btn-secondary-hover-bg); border-color: var(--cc-btn-secondary-hover-border-color); color: var(--cc-btn-secondary-hover-color) !important; } #cc-main .cm__btn--close { border-radius: 0; border-bottom-left-radius: var(--cc-btn-border-radius); border-right: none; border-top: none; display: none; font-size: 1em; height: 42px; min-width: auto !important; overflow: hidden; padding: 0 !important; position: absolute; right: 0; top: 0; width: 42px; } #cc-main .cm__btn--close svg { stroke: var(--cc-btn-primary-color); transform: scale(0.5); transition: stroke 0.15s ease; } #cc-main .cm__btn--close:hover svg { stroke: var(--cc-btn-primary-hover-color); } #cc-main .cm__btn--close.cm__btn--secondary svg { stroke: var(--cc-btn-secondary-color); } #cc-main .cm__btn--close.cm__btn--secondary:hover svg { stroke: var(--cc-btn-secondary-hover-color); } #cc-main .cm__btn--close + .cm__texts .cm__title { padding-right: 3rem; } #cc-main .cm--inline .cm__btn-group { grid-auto-flow: column; } #cc-main .cm__footer { background: var(--cc-footer-bg); border-top: 1px solid var(--cc-footer-border-color); color: var(--cc-footer-color); padding: 0.4em 0 0.5em; } #cc-main .cm__links { display: flex; flex-direction: row; padding-bottom: 0; padding-top: 0; } #cc-main .cm__link-group { display: flex; flex-direction: row; font-size: 0.8em; width: 100%; } #cc-main .cm__link-group > * + * { margin-left: 1.3rem; } #cc-main .cm--flip .cm__btn:last-child { grid-row: 1; } #cc-main .cm--inline.cm--flip .cm__btn:last-child { grid-column: 1; } #cc-main .cm--box .cm__btn--close { display: block; } #cc-main .cm--box.cm--flip .cm__btns { flex-direction: column-reverse; } #cc-main .cm--box.cm--wide { max-width: 36em; } #cc-main .cm--box.cm--wide .cm__btns { flex-direction: row; justify-content: space-between; } #cc-main .cm--box.cm--wide .cm__btn-group { grid-auto-flow: column; } #cc-main .cm--box.cm--wide .cm__btn { min-width: 120px; padding-left: 1.8em; padding-right: 1.8em; } #cc-main .cm--box.cm--wide.cm--flip .cm__btns { flex-direction: row-reverse; } #cc-main .cm--box.cm--wide.cm--flip .cm__btn:last-child { grid-column: 1; } #cc-main .cm--cloud { max-width: 54em; width: unset; } #cc-main .cm--cloud .cm__body { flex-direction: row; } #cc-main .cm--cloud .cm__texts { flex: 1; } #cc-main .cm--cloud .cm__desc { max-height: 9.4em; } #cc-main .cm--cloud .cm__btns { border-left: 1px solid var(--cc-separator-border-color); border-top: none; max-width: 23em; } #cc-main .cm--cloud .cm__btn-group { flex-direction: column; } #cc-main .cm--cloud .cm__btn { min-width: 19em; } #cc-main .cm--cloud.cm--flip .cm__btn-group, #cc-main .cm--cloud.cm--flip .cm__btns { flex-direction: column-reverse; } #cc-main .cm--cloud.cm--inline .cm__btn-group { flex-direction: row; } #cc-main .cm--cloud.cm--inline .cm__btn { min-width: 10em; } #cc-main .cm--cloud.cm--inline.cm--flip .cm__btn-group { flex-direction: row-reverse; } #cc-main .cm--bar { border-radius: 0; left: 0; margin: 0; max-width: unset; opacity: 1; right: 0; transform: translateY(0); width: 100vw; --cc-modal-transition-duration: 0.35s; } #cc-main .cm--bar.cm--top { top: 0; transform: translateY(-100%); } #cc-main .cm--bar.cm--bottom { bottom: 0; transform: translateY(100%); } #cc-main .cm--bar .cm__body, #cc-main .cm--bar .cm__links { margin: 0 auto; max-width: 55em; width: 100%; } #cc-main .cm--bar .cm__body { padding: 0.5em 0 0.9em; } #cc-main .cm--bar .cm__btns { border-top: none; flex-direction: row; justify-content: space-between; } #cc-main .cm--bar .cm__btn-group { grid-auto-flow: column; } #cc-main .cm--bar:not(.cm--inline) .cm__btn + .cm__btn, #cc-main .cm--bar:not(.cm--inline) .cm__btn-group + .cm__btn-group { margin-left: 0.375rem; margin-top: 0; } #cc-main .cm--bar .cm__btn { min-width: 120px; padding-left: 2em; padding-right: 2em; } #cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn + .cm__btn, #cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn-group + .cm__btn-group { margin-bottom: 0; margin-left: 0; margin-right: 0.375rem; } #cc-main .cm--bar.cm--flip .cm__btns { flex-direction: row-reverse; } #cc-main .cm--bar.cm--flip .cm__btn:last-child { grid-column: 1; } #cc-main .cm--bar.cm--inline .cm__body, #cc-main .cm--bar.cm--inline .cm__links { max-width: 74em; } #cc-main .cm--bar.cm--inline .cm__body { flex-direction: row; padding: 0; } #cc-main .cm--bar.cm--inline .cm__btns { flex-direction: column; justify-content: center; max-width: 23em; } #cc-main .cm--bar.cm--inline.cm--flip .cm__btns { flex-direction: column-reverse; } #cc-main .cc--anim .cm, #cc-main .cc--anim.cm-wrapper:before { transition: opacity var(--cc-modal-transition-duration) ease, visibility var(--cc-modal-transition-duration) ease, transform var(--cc-modal-transition-duration) ease; } #cc-main .cc--anim .cm__btn, #cc-main .cc--anim .cm__close { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .disable--interaction #cc-main .cm-wrapper:before { background: var(--cc-overlay-bg); bottom: 0; content: ""; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 0; } .show--consent #cc-main .cc--anim .cm { opacity: 1; transform: translateY(0); visibility: visible !important; } .show--consent #cc-main .cc--anim .cm--middle { transform: translateY(-50%); } .show--consent #cc-main .cc--anim .cm--bar { transform: translateY(0); } .show--consent #cc-main .cc--anim.cm-wrapper:before { opacity: 1; visibility: visible; } #cc-main.cc--rtl .cm__btn--close { border-bottom-left-radius: unset; border-bottom-right-radius: var(--cc-btn-border-radius); left: 0; right: unset; } #cc-main.cc--rtl .cm__btn--close + .cm__texts .cm__title { padding-left: 3rem !important; padding-right: 1.3rem; } #cc-main.cc--rtl .cm--inline .cm__btn + .cm__btn { margin-left: 0; margin-right: 0.375rem; } #cc-main.cc--rtl .cm--inline.cm--flip .cm__btn + .cm__btn { margin-left: 0.375rem; margin-right: 0; } #cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn + .cm__btn, #cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn-group + .cm__btn-group, #cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn + .cm__btn, #cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn-group + .cm__btn-group { margin-left: 0; margin-right: 0.375rem; } #cc-main.cc--rtl .cm:not(.cm--inline).cm--bar.cm--flip .cm__btn + .cm__btn, #cc-main.cc--rtl .cm:not(.cm--inline).cm--wide.cm--flip .cm__btn + .cm__btn { margin-left: 0.375rem; margin-right: 0; } #cc-main.cc--rtl .cm__link-group > * + * { margin-left: 0; margin-right: 1.3rem; } @media screen and (max-width: 640px) { #cc-main { --cc-modal-margin: 0.5em; } #cc-main .cm { max-width: none !important; width: auto !important; } #cc-main .cm__body { flex-direction: column !important; padding: 0 !important; } #cc-main .cm__btns, #cc-main .cm__desc, #cc-main .cm__links, #cc-main .cm__title { padding-left: 1.1rem !important; padding-right: 1.1rem !important; } #cc-main .cm__btns { border-left: none !important; border-top: 1px solid var(--cc-separator-border-color) !important; flex-direction: column !important; max-width: none !important; min-width: auto !important; } #cc-main .cm__btn + .cm__btn, #cc-main .cm__btn-group + .cm__btn-group { margin: 0.375rem 0 0 !important; } #cc-main .cm--flip .cm__btn + .cm__btn, #cc-main .cm--flip .cm__btn-group + .cm__btn-group { margin-bottom: 0.375rem !important; margin-top: 0 !important; } #cc-main .cm__btn-group { display: flex !important; flex-direction: column !important; min-width: auto !important; } #cc-main .cm__btn { flex: auto !important; } #cc-main .cm__link-group { justify-content: center !important; } #cc-main .cm--flip .cm__btn-group, #cc-main .cm--flip .cm__btns { flex-direction: column-reverse !important; } } #cc-main .pm-wrapper { position: relative; z-index: 2; } #cc-main .pm { background: var(--cc-bg); border-radius: var(--cc-modal-border-radius); box-shadow: 0 0.625em 1.875em rgba(0, 0, 2, 0.3); display: flex; flex-direction: column; opacity: 0; overflow: hidden; position: fixed; visibility: hidden; width: 100%; width: unset; z-index: 1; } #cc-main svg { fill: none; width: 100%; } #cc-main .pm__body, #cc-main .pm__footer, #cc-main .pm__header { padding: 1em 1.4em; } #cc-main .pm__header { align-items: center; border-bottom: 1px solid var(--cc-separator-border-color); display: flex; justify-content: space-between; } #cc-main .pm__title { align-items: center; display: flex; flex: 1; font-weight: 600; margin-right: 2em; } #cc-main .pm__close-btn { background: var(--cc-btn-secondary-bg); border: 1px solid var(--cc-btn-secondary-border-color); border-radius: var(--cc-btn-border-radius); height: 40px; position: relative; transition: all 0.15s ease; width: 40px; } #cc-main .pm__close-btn span { display: flex; height: 100%; width: 100%; } #cc-main .pm__close-btn svg { stroke: var(--cc-btn-secondary-color); transform: scale(0.5); transition: stroke 0.15s ease; } #cc-main .pm__close-btn:hover { background: var(--cc-btn-secondary-hover-bg); border-color: var(--cc-btn-secondary-hover-border-color); } #cc-main .pm__close-btn:hover svg { stroke: var(--cc-btn-secondary-hover-color); } #cc-main .pm__body { flex: 1; overflow-y: auto; overflow-y: overlay; } #cc-main .pm__section, #cc-main .pm__section--toggle { border-radius: var(--cc-btn-border-radius); display: flex; flex-direction: column; margin-bottom: 0.5em; } #cc-main .pm__section--toggle .pm__section-desc-wrapper { border: 1px solid var(--cc-cookie-category-block-border); border-radius: var(--cc-btn-border-radius); border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; display: none; margin-top: 0 !important; overflow: hidden; } #cc-main .pm__section { border: 1px solid var(--cc-separator-border-color); padding: 1em; transition: background-color 0.25s ease, border-color 0.25s ease; } #cc-main .pm__section:first-child { border: none; margin-bottom: 2em; margin-top: 0; padding: 0; transition: none; } #cc-main .pm__section:not(:first-child):hover { background: var(--cc-cookie-category-block-bg); border-color: var(--cc-cookie-category-block-border); } #cc-main .pm__section-toggles + .pm__section { margin-top: 2em; } #cc-main .pm__section--toggle { background: var(--cc-cookie-category-block-bg); border-top: none; margin-bottom: 0.375rem; } #cc-main .pm__section--toggle .pm__section-title { align-items: center; background: var(--cc-cookie-category-block-bg); border: 1px solid var(--cc-cookie-category-block-border); display: flex; justify-content: space-between; min-height: 58px; padding: 1.1em 5.4em 1.1em 1.2em; position: relative; transition: background-color 0.25s ease, border-color 0.25s ease; width: 100%; } #cc-main .pm__section--toggle .pm__section-title:hover { background: var(--cc-cookie-category-block-hover-bg); border-color: var(--cc-cookie-category-block-hover-border); } #cc-main .pm__section--toggle .pm__section-desc { margin-top: 0; padding: 1em; } #cc-main .pm__section--toggle.is-expanded { --cc-cookie-category-block-bg: var(--cc-cookie-category-expanded-block-bg); --cc-cookie-category-block-border: var( --cc-cookie-category-expanded-block-hover-bg ); } #cc-main .pm__section--toggle.is-expanded .pm__section-title { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg { transform: scale(0.5) rotate(180deg); } #cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper { display: flex; } #cc-main .pm__section--expandable .pm__section-title { cursor: pointer; padding-left: 3.4em; } #cc-main .pm__section--expandable .pm__section-arrow { background: var(--cc-toggle-readonly-bg); border-radius: 100%; display: flex; height: 20px; justify-content: center; left: 18px; pointer-events: none; position: absolute; width: 20px; } #cc-main .pm__section--expandable .pm__section-arrow svg { stroke: var(--cc-btn-secondary-color); transform: scale(0.5); } #cc-main .pm__section-title-wrapper { align-items: center; display: flex; position: relative; } #cc-main .pm__section-title-wrapper + .pm__section-desc-wrapper { margin-top: 0.85em; } #cc-main .pm__section-title { border-radius: var(--cc-btn-border-radius); font-size: 0.95em; font-weight: 600; } #cc-main .pm__badge { align-items: center; background: var(--cc-btn-secondary-bg); border-radius: 5em; color: var(--cc-secondary-color); display: flex; flex: none; font-size: 0.8em; font-weight: 600; height: 23px; justify-content: center; margin-left: 1em; min-width: 23px; overflow: hidden; padding: 0 0.6em 1px; position: relative; text-align: center; white-space: nowrap; width: auto; } #cc-main .pm__service-counter { background: var(--cc-btn-primary-bg); color: var(--cc-btn-primary-color); padding: 0; width: 23px; } #cc-main .pm__service-counter[data-counterlabel] { padding: 0 0.6em 1px; width: auto; } #cc-main .section__toggle, #cc-main .section__toggle-wrapper, #cc-main .toggle__icon, #cc-main .toggle__label { border-radius: var(--cc-pm-toggle-border-radius); height: 23px; transform: translateZ(0); width: 50px; } #cc-main .section__toggle-wrapper { cursor: pointer; position: absolute; right: 18px; z-index: 1; } #cc-main .toggle-service { height: 19px; position: relative; right: 0; width: 42px; } #cc-main .toggle-service .section__toggle, #cc-main .toggle-service .toggle__icon, #cc-main .toggle-service .toggle__label { height: 19px; width: 42px; } #cc-main .toggle-service .toggle__icon { position: relative; } #cc-main .toggle-service .toggle__icon-circle { height: 19px; width: 19px; } #cc-main .toggle-service .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { transform: translateX(23px); } #cc-main .pm__section--toggle:nth-child(2) .section__toggle-wrapper:after { display: none !important; } #cc-main .section__toggle { border: 0; cursor: pointer; display: block; left: 0; margin: 0; position: absolute; top: 0; } #cc-main .section__toggle:disabled { cursor: not-allowed; } #cc-main .toggle__icon { background: var(--cc-toggle-off-bg); box-shadow: 0 0 0 1px var(--cc-toggle-off-bg); display: flex; flex-direction: row; pointer-events: none; position: absolute; transition: all 0.25s ease; } #cc-main .toggle__icon-circle { background: var(--cc-toggle-off-knob-bg); border: none; border-radius: var(--cc-pm-toggle-border-radius); box-shadow: 0 1px 2px rgba(24, 32, 3, 0.36); display: block; height: 23px; left: 0; position: absolute; top: 0; transition: transform 0.25s ease, background-color 0.25s ease; width: 23px; } #cc-main .toggle__icon-off, #cc-main .toggle__icon-on { height: 100%; position: absolute; transition: opacity 0.15s ease; width: 100%; } #cc-main .toggle__icon-on { opacity: 0; transform: rotate(45deg); } #cc-main .toggle__icon-on svg { stroke: var(--cc-toggle-on-bg); transform: scale(0.55) rotate(-45deg); } #cc-main .toggle__icon-off { opacity: 1; } #cc-main .toggle__icon-off svg { stroke: var(--cc-toggle-off-bg); transform: scale(0.55); } #cc-main .section__toggle:checked ~ .toggle__icon { background: var(--cc-toggle-on-bg); box-shadow: 0 0 0 1px var(--cc-toggle-on-bg); } #cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { background-color: var(--cc-toggle-on-knob-bg); transform: translateX(27px); } #cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-on { opacity: 1; } #cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-off { opacity: 0; } #cc-main .section__toggle:checked:disabled ~ .toggle__icon { background: var(--cc-toggle-readonly-bg); box-shadow: 0 0 0 1px var(--cc-toggle-readonly-bg); } #cc-main .section__toggle:checked:disabled ~ .toggle__icon .toggle__icon-circle { background: var(--cc-toggle-readonly-knob-bg); box-shadow: none; } #cc-main .section__toggle:checked:disabled ~ .toggle__icon svg { stroke: var(--cc-toggle-readonly-knob-icon-color); } #cc-main .toggle__label { opacity: 0; overflow: hidden; pointer-events: none; position: absolute; top: 0; z-index: -1; } #cc-main .pm__section-desc-wrapper { color: var(--cc-secondary-color); display: flex; flex-direction: column; font-size: 0.9em; } #cc-main .pm__section-desc-wrapper > :not(:last-child) { border-bottom: 1px solid var(--cc-cookie-category-block-border); } #cc-main .pm__section-services { display: flex; flex-direction: column; } #cc-main .pm__service { align-items: center; display: flex; justify-content: space-between; padding: 0.4em 1.2em; position: relative; transition: background-color 0.15s ease; } #cc-main .pm__service:hover { background-color: var(--cc-cookie-category-block-hover-bg); } #cc-main .pm__service-header { align-items: center; display: flex; margin-right: 1em; width: 100%; } #cc-main .pm__service-icon { border: 2px solid; border-radius: 100%; height: 8px; margin-left: 6px; margin-right: 20px; margin-top: 1px; min-width: 8px; } #cc-main .pm__service-title { font-size: 0.95em; width: 100%; word-break: break-word; } #cc-main .pm__section-desc { line-height: 1.5em; } #cc-main .pm__section-table { border-collapse: collapse; font-size: 0.9em; margin: 0; overflow: hidden; padding: 0; text-align: left; width: 100%; } #cc-main .pm__table-caption { text-align: left; } #cc-main .pm__table-caption, #cc-main .pm__table-head > tr { border-bottom: 1px dashed var(--cc-separator-border-color); color: var(--cc-primary-color); font-weight: 600; } #cc-main .pm__table-tr { transition: background-color 0.15s ease; } #cc-main .pm__table-tr:hover { background: var(--cc-cookie-category-block-hover-bg); } #cc-main .pm__table-caption, #cc-main .pm__table-td, #cc-main .pm__table-th { padding: 0.625em 0.625em 0.625em 1.2em; vertical-align: top; } #cc-main .pm__footer { border-top: 1px solid var(--cc-separator-border-color); display: flex; justify-content: space-between; } #cc-main .pm__btn-group { display: flex; } #cc-main .pm__btn + .pm__btn, #cc-main .pm__btn-group + .pm__btn-group { margin-left: 0.375rem; } #cc-main .pm--flip .pm__btn + .pm__btn, #cc-main .pm--flip .pm__btn-group + .pm__btn-group { margin-left: 0; margin-right: 0.375rem; } #cc-main .pm__btn { background: var(--cc-btn-primary-bg); border: 1px solid var(--cc-btn-primary-border-color); border-radius: var(--cc-btn-border-radius); color: var(--cc-btn-primary-color); flex: auto; font-size: 0.82em; font-weight: 600; min-height: 42px; min-width: 110px; padding: 0.5em 1.5em; text-align: center; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } #cc-main .pm__btn:hover { background: var(--cc-btn-primary-hover-bg); border-color: var(--cc-btn-primary-hover-border-color); color: var(--cc-btn-primary-hover-color); } #cc-main .pm__btn--secondary { background: var(--cc-btn-secondary-bg); border-color: var(--cc-btn-secondary-border-color); color: var(--cc-btn-secondary-color); } #cc-main .pm__btn--secondary:hover { background: var(--cc-btn-secondary-hover-bg); border-color: var(--cc-btn-secondary-hover-border-color); color: var(--cc-btn-secondary-hover-color); } #cc-main .pm--box { height: calc(100% - 2em); left: var(--cc-modal-margin); margin: 0 auto; max-height: 37.5em; max-width: 43em; right: var(--cc-modal-margin); top: 50%; transform: translateY(calc(-50% + 1.6em)); } #cc-main .pm--box.pm--flip .pm__btn-group, #cc-main .pm--box.pm--flip .pm__footer { flex-direction: row-reverse; } #cc-main .pm--bar { border-radius: 0; bottom: 0; height: 100%; margin: 0; max-height: none; max-width: 29em; opacity: 1; top: 0; width: 100%; --cc-modal-transition-duration: 0.35s; } #cc-main .pm--bar .pm__section-table, #cc-main .pm--bar .pm__table-body, #cc-main .pm--bar .pm__table-td, #cc-main .pm--bar .pm__table-th, #cc-main .pm--bar .pm__table-tr { display: block; } #cc-main .pm--bar .pm__table-head { display: none; } #cc-main .pm--bar .pm__table-caption { display: block; } #cc-main .pm--bar .pm__table-tr:not(:last-child) { border-bottom: 1px solid var(--cc-separator-border-color); } #cc-main .pm--bar .pm__table-td { display: flex; justify-content: space-between; } #cc-main .pm--bar .pm__table-td:before { color: var(--cc-primary-color); content: attr(data-column); flex: 1; font-weight: 600; min-width: 100px; overflow: hidden; padding-right: 2em; text-overflow: ellipsis; } #cc-main .pm--bar .pm__table-td > div { flex: 3; } #cc-main .pm--bar:not(.pm--wide) .pm__body, #cc-main .pm--bar:not(.pm--wide) .pm__footer, #cc-main .pm--bar:not(.pm--wide) .pm__header { padding: 1em 1.3em; } #cc-main .pm--bar:not(.pm--wide) .pm__btn-group, #cc-main .pm--bar:not(.pm--wide) .pm__footer { flex-direction: column; } #cc-main .pm--bar:not(.pm--wide) .pm__btn + .pm__btn, #cc-main .pm--bar:not(.pm--wide) .pm__btn-group + .pm__btn-group { margin: 0.375rem 0 0; } #cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group, #cc-main .pm--bar:not(.pm--wide).pm--flip .pm__footer { flex-direction: column-reverse; } #cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn + .pm__btn, #cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group + .pm__btn-group { margin-bottom: 0.375rem; margin-top: 0; } #cc-main .pm--bar:not(.pm--wide) .pm__badge { display: none; } #cc-main .pm--bar.pm--left { left: 0; transform: translateX(-100%); } #cc-main .pm--bar.pm--right { right: 0; transform: translateX(100%); } #cc-main .pm--bar.pm--wide { max-width: 35em; } #cc-main .pm--bar.pm--wide .pm__body, #cc-main .pm--bar.pm--wide .pm__footer, #cc-main .pm--bar.pm--wide .pm__header { padding: 1em 1.4em; } #cc-main .pm--bar.pm--wide.pm--flip .pm__btn-group, #cc-main .pm--bar.pm--wide.pm--flip .pm__footer { flex-direction: row-reverse; } #cc-main .pm-overlay { background: var(--cc-overlay-bg); bottom: 0; content: ""; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; } #cc-main .cc--anim .pm, #cc-main .cc--anim .pm-overlay { transition: opacity var(--cc-modal-transition-duration) ease, visibility var(--cc-modal-transition-duration) ease, transform var(--cc-modal-transition-duration) ease; } .show--preferences #cc-main .cc--anim .pm { opacity: 1; visibility: visible !important; } .show--preferences #cc-main .cc--anim .pm--box { transform: translateY(-50%); } .show--preferences #cc-main .cc--anim .pm--bar { transform: translateX(0); } .show--preferences #cc-main .cc--anim .pm-overlay { opacity: 1; visibility: visible; } #cc-main.cc--rtl .pm__service-header { margin-left: 1em; margin-right: 0; } #cc-main.cc--rtl .pm__section-arrow { left: unset; right: 18px; } #cc-main.cc--rtl .section__toggle-wrapper { left: 18px; right: unset; transform-origin: left; } #cc-main.cc--rtl .toggle-service { left: 0; } #cc-main.cc--rtl .pm__service-icon { margin-left: 20px; margin-right: 5px; } #cc-main.cc--rtl .pm__section--toggle .pm__section-title { padding-left: 5.4em; padding-right: 1.2em; } #cc-main.cc--rtl .pm__section--expandable .pm__section-title { padding-right: 3.4em; } #cc-main.cc--rtl .pm__badge { margin-left: unset; margin-right: 1em; } #cc-main.cc--rtl .toggle__icon-circle { transform: translateX(27px); } #cc-main.cc--rtl .toggle-service .toggle__icon-circle { transform: translateX(23px); } #cc-main.cc--rtl .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { transform: translateX(0); } #cc-main.cc--rtl .pm__table-td, #cc-main.cc--rtl .pm__table-th { padding-left: unset; padding-right: 1.2em; text-align: right; } #cc-main.cc--rtl .pm__table-td { padding-left: unset; padding-right: 1.2em; } #cc-main.cc--rtl .pm__table-td:before { padding-left: 2em; padding-right: unset; } #cc-main.cc--rtl .pm__btn + .pm__btn, #cc-main.cc--rtl .pm__btn-group + .pm__btn-group { margin-left: 0; margin-right: 0.375rem; } #cc-main.cc--rtl .pm--flip .pm__btn + .pm__btn, #cc-main.cc--rtl .pm--flip .pm__btn-group + .pm__btn-group { margin-left: 0.375rem; margin-right: 0; } #cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn + .pm__btn, #cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn-group + .pm__btn-group { margin-left: 0; } @media screen and (max-width: 640px) { #cc-main .pm { border-radius: 0; bottom: 0; height: auto; left: 0; max-height: 100%; max-width: none !important; right: 0; top: 0; transform: translateY(1.6em); } #cc-main .pm__body, #cc-main .pm__footer, #cc-main .pm__header { padding: 0.9em !important; } #cc-main .pm__badge { display: none; } #cc-main .pm__section-table, #cc-main .pm__table-body, #cc-main .pm__table-caption, #cc-main .pm__table-td, #cc-main .pm__table-th, #cc-main .pm__table-tr { display: block; } #cc-main .pm__table-head { display: none; } #cc-main .pm__table-tr:not(:last-child) { border-bottom: 1px solid var(--cc-separator-border-color); } #cc-main .pm__table-td { display: flex; justify-content: space-between; } #cc-main .pm__table-td:before { color: var(--cc-primary-color); content: attr(data-column); flex: 1; font-weight: 600; min-width: 100px; overflow: hidden; padding-right: 2em; text-overflow: ellipsis; } #cc-main .pm__table-td > div { flex: 3; } #cc-main .pm__btn-group, #cc-main .pm__footer { flex-direction: column !important; } #cc-main .pm__btn-group { display: flex !important; } #cc-main .pm__btn + .pm__btn, #cc-main .pm__btn-group + .pm__btn-group { margin: 0.375rem 0 0 !important; } #cc-main .pm--flip .pm__btn + .pm__btn, #cc-main .pm--flip .pm__btn-group + .pm__btn-group { margin-bottom: 0.375rem !important; margin-top: 0 !important; } #cc-main .pm--flip .pm__btn-group, #cc-main .pm--flip .pm__footer { flex-direction: column-reverse !important; } .show--preferences #cc-main .cc--anim .pm { transform: translateY(0) !important; } } #main-nav { position: sticky; width: 100%; top: 0; left: 0; right: 0; z-index: 5000; transform: translateY(0); align-items: stretch; transition: all 0.3s ease; background-color: var(--color-bg-nav) !important; } #main-nav.nav-fixed { position: fixed; } #main-nav.active { background-color: var(--color-bg-nav) !important; } #menu { top: var(--nav-height); } .mobile-nav { background-color: var(--color-bg-nav) !important; } #main-nav.is-open .mobile-nav, #main-nav.is-open #menu { background-color: var(--color-bg-nav) !important; } @media (hover: hover) { #menu:hover, .mobile-nav:hover, #main-nav:hover { background-color: var(--color-bg-nav) !important; } } .nav-pages { display: flex; justify-content: space-between; align-items: center; align-items: stretch; } #main-nav.hide { transform: translateY(-100%); } .main-nav-link { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin: 0; padding: 0.5rem; background: none; align-items: center; } .mobile-nav-toggle { margin: 0; padding: 0.5rem; background: none; } .link-contact { display: none; } .main-nav-link.active, .blink { animation: blinkOpacity 1s step-start infinite; } @keyframes blinkOpacity { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .mobile-nav { display: none !important; } .mobile-nav { min-width: 0; gap: 3rem; } .main-nav-link-home { min-width: 0; flex: 1 1 auto; overflow: hidden; } .title-wrap { display: flex; align-items: baseline; justify-content: space-b; min-width: 0; max-width: 100%; } .home-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .page-title { flex: 0 0 auto; white-space: nowrap; } .main-nav-toggle { display: none; /* nur Mobile */ background: none; border: none; cursor: pointer; align-items: center; gap: 0.5rem; } .mobile-menu-tag { display: block; } .mobile-menu-open { display: none; } .mobile-menu-closed { display: inherit; } #main-nav.is-open .mobile-menu-open { display: block; } #main-nav.is-open .mobile-menu-closed { display: none; } #main-nav.is-open #menu { display: inherit !important; transform: translateY(0); flex-direction: column; flex-wrap: wrap; } @media (max-width: 991.98px) { #main-nav.nav-fixed { position: sticky; } .main-nav-link.active { animation: none !important; } .main-nav-link:not(.title-link) { justify-content: flex-start; } .mobile-nav { display: flex !important; } #menu { position: absolute; display: none !important; transform: translateY(0); flex-direction: column; } .link-contact, .link-lang { display: flex; } .link-lang { justify-content: flex-end; } .main-nav-link:not(.main-nav-link-home) { border-bottom: 1px solid var(--color-border) !important; } .main-nav-link:last-child { border-bottom: none !important; } #menu { border-top: 1px solid var(--color-border) !important; } .main-nav-link-1 { display: none !important; } #main-nav.hide { transform: translateY(-100%); } } @media (max-width: 479.98px) { .nav-word-2 { display: none; } } .is-open .mobile-nav-background { transition: none; position: fixed; content: "asdf"; top: 0; left: 0; width: 100%; height: 100%; z-index: 4000; background: var(--color-bg-overlay); } #filter { bottom: 0 !important; max-width: 100%; z-index: 3000; } button.filter-button, .filter-btn { background: var(--color-link-hover); color: var(--color-bg) !important; padding: 0.5rem; border-radius: 2px; } button.filter-button span, .filter-btn span { display: flex; align-items: center; justify-content: center; gap: 0.25rem; } button.filter-button svg path, .filter-btn svg path { fill: var(--color-bg) !important; } .filter-button { display: none; } #filter-toggle { margin: 0 0.5rem 0.5rem 0.5rem; } .filter-btn { background: var(--color-link-hover); color: var(--color-bg) !important; margin: 0; border-radius: 2px; padding: 0.5rem 1rem; border-radius: 2px; } .project-filter-wrapper { position: relative; } #filter-toggle[aria-expanded=true], .filter-btn.selected { position: relative; background: var(--color-text) !important; color: var(--color-bg) !important; z-index: 1000; } #filter-toggle[aria-expanded=true] svg path, .filter-btn.selected svg path { fill: var(--color-bg) !important; } @media (hover: hover) { .filter-button:hover, .filter-btn:hover { position: relative; background: var(--color-text) !important; color: var(--color-bg) !important; z-index: 1000; } .filter-button:hover svg path, .filter-btn:hover svg path { fill: var(--color-bg) !important; } } .buttons-bar { z-index: 4000; position: relative; } .project-filter { display: flex !important; position: absolute; align-items: center; justify-content: center; bottom: 0; z-index: 3000; flex-wrap: wrap; padding: 0.5rem; margin: 0; gap: 0.25rem; } @media (max-width: 991.98px) { #filter { max-width: 100%; } .project-filter.hidden { display: none !important; } .filter-button { display: inline-block; } .buttons-bar { margin: 0 auto; width: 50% !important; } .project-filter::after { position: fixed; content: ""; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: var(--color-bg-overlay); } } .project-card { position: relative; margin-bottom: 1.5rem; } .year-tag { display: flex; justify-content: center; align-items: center; background: none; } .project-year-label { text-align: left; } .project-card.hidden { display: none !important; } .project-thumb, .teaser-thumb { position: relative; } .project-thumb img, .teaser-thumb img { height: 100%; object-fit: cover; } .project-link-card { position: relative; } .project-link-card figure { overflow: hidden; background: black; } .project-link-card img { opacity: 0.8; transform: scale(1.001); } .project-link-card figcaption { color: var(--color-text) !important; margin: 0 !important; background: var(--color-bg) !important; } @media (hover: hover) { .project-link-card:hover { color: var(--color-text); } .project-link-card:hover .project-card-description { opacity: 1; } .project-link-card:hover img { scale: 1.05; transform: scale(1.01); opacity: 1; } .project-link-card:hover figcaption { opacity: 1; } } .project-card-infos { padding: 0.5rem; position: relative; z-index: 2000; } .project-card-infos * { display: block; } .teaser-card figure { position: relative; overflow: hidden; } .project-card-title { left: 0; opacity: 1; } .project-card-description { display: inline-block; } .project-card-brand { color: var(--color-text-secondary); } .locked-info { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 3000; display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary) !important; } .locked-info * { color: var(--color-text-secondary) !important; } .project-locked-card { opacity: 0.8; color: var(--color-text-secondary); } .project-locked-card img { filter: grayscale(1); } .project-locked-card figcaption { padding: 0.5rem; display: flex; align-items: center; background: none !important; color: var(--color-locked) !important; margin: 0 !important; } .project-locked-card figcaption svg { padding: 0; margin: 0; width: 2rem; display: inline-block; } .project-locked-card figcaption svg path { fill: var(--color-bg-locked) !important; } .project-status { position: absolute; bottom: 0; left: 0; z-index: 3000; } #work.grid-view .project-card-description { display: none; } #work.grid-view .project-card-brand { display: none; } #work.list-view .year-tag { display: none; } #work.list-view .project-card:not(.year-tag), #work.list-view .project-card-infos { width: 100% !important; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0; } #work.list-view .project-card { align-items: center !important; justify-content: center !important; border-top: 1px solid var(--color-border); line-height: 125%; letter-spacing: -0.0075rem; font-size: 1.625rem; font-size: calc(20px + (26 - 20) * (100vw - 480px) / (1920 - 480)); } @media screen and (max-width: 480px) { #work.list-view .project-card { font-size: 1.25rem; } } @media screen and (min-width: 1920px) { #work.list-view .project-card { font-size: 1.625rem; } } #work.list-view .project-card span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #work.list-view .project-card-infos { flex-wrap: wrap; } #work.list-view .project-thumb { width: 5% !important; height: 100% !important; } #work.list-view .project-thumb figcaption, #work.list-view .project-thumb .project-status { display: none; } #work.list-view .project-thumb img { aspect-ratio: 1/1 !important; } #work.list-view .project-card-description { display: none; } #work.list-view .project-locked-card { opacity: 0.8; background: #eee; } @media (max-width: 1399.98px) { #work.list-view .project-card { line-height: 125%; letter-spacing: -0.0075rem; font-size: 1.625rem; font-size: calc(20px + (26 - 20) * (100vw - 480px) / (1920 - 480)); } } @media screen and (max-width: 1399.98px) and (max-width: 480px) { #work.list-view .project-card { font-size: 1.25rem; } } @media screen and (max-width: 1399.98px) and (min-width: 1920px) { #work.list-view .project-card { font-size: 1.625rem; } } @media (max-width: 991.98px) { #work.list-view .project-card-brand { display: none; } #work.list-view .project-thumb { width: 10% !important; } } @media (max-width: 767.98px) { #work.list-view .project-card { line-height: 125%; letter-spacing: 0px; font-size: 1.25rem; font-size: calc(16px + (20 - 16) * (100vw - 480px) / (1920 - 480)); } } @media screen and (max-width: 767.98px) and (max-width: 480px) { #work.list-view .project-card { font-size: 1rem; } } @media screen and (max-width: 767.98px) and (min-width: 1920px) { #work.list-view .project-card { font-size: 1.25rem; } } @media (max-width: 479.98px) { #work.list-view .project-card-brand { display: none; } #work.list-view .project-thumb { width: 20% !important; } } /* -------- Screensaver ----------*/ #screensaver-panel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 999999; pointer-events: none; opacity: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 0.6, background 3; } #screensaver-panel.visible { opacity: 1; pointer-events: all; } #screensaver-panel .centered { padding: 5rem; color: var(--color-text-inverted); } /* -------- PROJECT CONTENT PAGES ----------*/ .page-cover { z-index: 1000; position: relative; } #page-content { background: var(--color-bg); z-index: 2000; position: relative; transform: translateZ(0); /* oder will-change: transform; */ } .block-credits .tags { margin-top: 0.5rem; } /* -------- next project bei project page ----------*/ .wrapper > .block-text:first-child { /* deine Styles */ } /* -------- PROJECT CONTENT PAGES ----------*/ #project-content { background: var(--color-bg); z-index: 2000; position: relative; transform: translateZ(0); /* oder will-change: transform; */ } /* -------- PROJECTS KACHELN ----------*/ .project-header { margin-top: var(--nav-height); } .mobile .project-header { margin-top: 0; } /* -------- next project ----------*/ @media (max-width: 991.98px) { #next-project .project-link-card { padding: 0 0.5rem; } #next-project .project-card-infos { padding-left: 0; padding-right: 0; } } .instagram-feed { position: relative; align-items: flex-start; justify-content: space-between; } .instagram-post figcaption { margin: 0 !important; background: var(--color-bg) !important; } .instagram-post figcaption span.no-link { color: var(--color-text) !important; } @media (hover: hover) { .instagram-post:hover .instagram-feed-link span { display: inline; } } .instagram-feed img, .instagram-feed video { width: 100%; height: auto; object-fit: cover; display: block !important; margin: 0; } a.instagram-feed-link { display: block; padding: 0.25rem 0.5rem; color: var(--color-text) !important; } a.instagram-feed-link span { display: none; } @media (hover: hover) { a.instagram-feed-link:hover { background: var(--color-link-hover) !important; } } .no-link { display: block; padding: 0.25rem 0.5rem; color: var(--color-text) !important; } .carousel-icon { position: absolute; bottom: 0.5rem; left: 0.5rem; pointer-events: none; } .carousel-icon path { fill: white; } @media (max-width: 991.98px) { a.instagram-feed-link span { display: inline !important; } } /* -------- FRONTPAGE ----------*/ .projects-selected { padding-bottom: 0 !important; align-items: flex-start; justify-content: space-between; } .projects-selected .project-card { margin-bottom: 3rem; } @media (max-width: 991.98px) { .projects-selected { align-items: center; gap: 0.5rem; padding: 0 0.5rem; } .projects-selected .project-card { margin-bottom: 1rem; } .projects-selected .project-card-infos { padding-left: 0; padding-right: 0; } } #work.grid-view #projects { align-items: flex-start; justify-content: center; } #work .row, #work .col { transition: none !important; } .view-swtich { padding: 0.5rem; } .view-toggle .icon-list { display: none; } .view-toggle .icon-grid { display: flex; } .view-toggle.is-list .icon-list { display: flex; } .view-toggle.is-list .icon-grid { display: none; } /* ----------------- STYLING GENERELL --------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; /* oder: none */ text-decoration: none; } * { -webkit-tap-highlight-color: transparent; } .tranistion { transition: all var(--transition-general); } html { font-size: 1rem; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; scroll-behavior: auto; } body { background: var(--color-bg); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; line-height: 120% !important; letter-spacing: -0.025rem !important; font-size: 2.25rem; font-size: calc(24px + (36 - 24) * (100vw - 480px) / (1920 - 480)); } @media screen and (max-width: 480px) { body { font-size: 1.5rem; } } @media screen and (min-width: 1920px) { body { font-size: 2.25rem; } } /* -------- NOISE OVERLAY ----------*/ body:after { background-image: url(../img/noise.gif); background-repeat: repeat; content: ""; height: 100%; width: 100%; opacity: 0.025; position: fixed; pointer-events: none; z-index: 9999999; top: 0; left: 0; } /* -------- STICKY HELPER ----------*/ .sticky, .sticky-fix, .sticky-fix-front, .sticky-front { position: sticky; top: var(--sticky-offset, inherit); display: block; transition: all 0.3s ease; } .sticky-front { z-index: 10; } .sticky-fix, .sticky-fix-front { top: 0 !important; } .sticky-fix-front { z-index: 10; } /* -------- MOBILE SHOW/HIDE HELPER ----------*/ .display-inline { display: inline !important; } .display-block { display: block !important; } /* -------- FLEX JUSTIFY ----------*/ .vert-center { display: flex; align-items: center !important; } .vert-bottom { display: flex; align-items: flex-end !important; } /* -------- MOBILE SHOW/HIDE HELPER ----------*/ .hide-desktop { display: none !important; } .hide-mobile { display: block !important; } .hide-visibility { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 991.98px) { .hide-desktop { display: block !important; } .hide-mobile { display: none !important; } } /* -------- BORDERS ----------*/ .border-top { border-top: 1px solid var(--color-border); } .border-bottom { border-bottom: 1px solid var(--color-border); } /* -------- INVERTED ----------*/ .inverted { color: var(--color-text-inverted); background: var(--color-text); } .inverted a { color: var(--color-text-inverted); } .inverted .border-top, .inverted .border-bottom { border-color: #202020 !important; } .inverted svg path { fill: var(--color-text-inverted); } /* -------- NAV OFFSET ----------*/ .offset-nav { padding-top: var(--nav-height); } /* -------- INTRO PANEL ----------*/ #intro-panel { position: relative; } .block-rotator { background: pink; } .block.block-overlay .block-heading { align-items: flex-start; justify-content: flex-end; padding: 0.5rem !important; } @media (hover: hover) { /* alle deine hover states hier rein */ } .gradient::after { pointer-events: none; position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: linear-gradient(to bottom, hsla(240, 0%, 0%, 0) 0%, hsla(240, 0%, 0%, 0.013) 8.1%, hsla(240, 0%, 0%, 0.049) 15.5%, hsla(240, 0%, 0%, 0.104) 22.5%, hsla(240, 0%, 0%, 0.175) 29%, hsla(240, 0%, 0%, 0.259) 35.3%, hsla(240, 0%, 0%, 0.352) 41.2%, hsla(240, 0%, 0%, 0.45) 47.1%, hsla(240, 0%, 0%, 0.55) 52.9%, hsla(240, 0%, 0%, 0.648) 58.8%, hsla(240, 0%, 0%, 0.741) 64.7%, hsla(240, 0%, 0%, 0.825) 71%, hsla(240, 0%, 0%, 0.896) 77.5%, hsla(240, 0%, 0%, 0.951) 84.5%, hsla(240, 0%, 0%, 0.987) 91.9%, hsl(240, 0%, 0%) 100%); } .gradient.gradient-vh::after { height: 100vh !important; } .gradient.gradient-blue::after { background: linear-gradient(to top, hsla(240, 100%, 50%, 0) 0%, hsla(240, 100%, 50%, 0.013) 8.1%, hsla(240, 100%, 50%, 0.049) 15.5%, hsla(240, 100%, 50%, 0.104) 22.5%, hsla(240, 100%, 50%, 0.175) 29%, hsla(240, 100%, 50%, 0.259) 35.3%, hsla(240, 100%, 50%, 0.352) 41.2%, hsla(240, 100%, 50%, 0.45) 47.1%, hsla(240, 100%, 50%, 0.55) 52.9%, hsla(240, 100%, 50%, 0.648) 58.8%, hsla(240, 100%, 50%, 0.741) 64.7%, hsla(240, 100%, 50%, 0.825) 71%, hsla(240, 100%, 50%, 0.896) 77.5%, hsla(240, 100%, 50%, 0.951) 84.5%, hsla(240, 100%, 50%, 0.987) 91.9%, hsl(240, 100%, 50%) 100%); } .gradient-white::after { background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.013) 8.1%, hsla(0, 0%, 100%, 0.049) 15.5%, hsla(0, 0%, 100%, 0.104) 22.5%, hsla(0, 0%, 100%, 0.175) 29%, hsla(0, 0%, 100%, 0.259) 35.3%, hsla(0, 0%, 100%, 0.352) 41.2%, hsla(0, 0%, 100%, 0.45) 47.1%, hsla(0, 0%, 100%, 0.55) 52.9%, hsla(0, 0%, 100%, 0.648) 58.8%, hsla(0, 0%, 100%, 0.741) 64.7%, hsla(0, 0%, 100%, 0.825) 71%, hsla(0, 0%, 100%, 0.896) 77.5%, hsla(0, 0%, 100%, 0.951) 84.5%, hsla(0, 0%, 100%, 0.987) 91.9%, hsl(0, 0%, 100%) 100%); } .gradient-reverse::after { background: linear-gradient(to top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.013) 8.1%, hsla(0, 0%, 0%, 0.049) 15.5%, hsla(0, 0%, 0%, 0.104) 22.5%, hsla(0, 0%, 0%, 0.175) 29%, hsla(0, 0%, 0%, 0.259) 35.3%, hsla(0, 0%, 0%, 0.352) 41.2%, hsla(0, 0%, 0%, 0.45) 47.1%, hsla(0, 0%, 0%, 0.55) 52.9%, hsla(0, 0%, 0%, 0.648) 58.8%, hsla(0, 0%, 0%, 0.741) 64.7%, hsla(0, 0%, 0%, 0.825) 71%, hsla(0, 0%, 0%, 0.896) 77.5%, hsla(0, 0%, 0%, 0.951) 84.5%, hsla(0, 0%, 0%, 0.987) 91.9%, hsl(0, 0%, 0%) 100%); } .gradient-reverse-white::after { background: linear-gradient(to top, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.013) 8.1%, hsla(0, 0%, 100%, 0.049) 15.5%, hsla(0, 0%, 100%, 0.104) 22.5%, hsla(0, 0%, 100%, 0.175) 29%, hsla(0, 0%, 100%, 0.259) 35.3%, hsla(0, 0%, 100%, 0.352) 41.2%, hsla(0, 0%, 100%, 0.45) 47.1%, hsla(0, 0%, 100%, 0.55) 52.9%, hsla(0, 0%, 100%, 0.648) 58.8%, hsla(0, 0%, 100%, 0.741) 64.7%, hsla(0, 0%, 100%, 0.825) 71%, hsla(0, 0%, 100%, 0.896) 77.5%, hsla(0, 0%, 100%, 0.951) 84.5%, hsla(0, 0%, 100%, 0.987) 91.9%, hsl(0, 0%, 100%) 100%); } ol { list-style: none; margin: 0; padding: 0; } ol li { counter-increment: p50; display: flex; padding: 0.5rem; gap: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.12); } ol li::before { content: counter(p50, decimal-leading-zero); display: block; color: var(--color-text-secondary); } ol li:first-child { border: none; } .overlay::after { pointer-events: none; position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0.6549019608); } .service-bubble p { display: flex; align-items: center; justify-content: center; padding: 0 3rem !important; bxorder: 2px solid white; border-radius: 25rem; background: var(--color-bg); color: white; backdrop-filter: blur(0.5rem) !important; height: 30vh; } *:has(> .service-bubble.bubble-blue) { top: 0; } *:has(> .service-bubble.bubble-red) { top: 2rem; } *:has(> .service-bubble.bubble-green) { top: 4rem; } *:has(> .service-bubble.bubble-black) { top: 6rem; } .bubble-blue p { background: #0000ff; } .bubble-red p { background: rgba(255, 91, 94, 0.8); } .bubble-green p { background: rgba(0, 167, 17, 0.7529411765); } .bubble-black p { background: rgba(62, 62, 62, 0.746); }