@charset "UTF-8"; /** Colors **/ /** Borders **/ /** Font Family **/ /** Layout **/ /** Breakpoints **/ /** Spacings **/ /** Easings **/ .object-fit { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; position: absolute; inset: 0%; } .is-fluid { margin-left: var(--padding-global); margin-right: var(--padding-global); } @media (max-width: 767px) { .is-fluid { margin-left: var(--padding-global); margin-right: var(--padding-global); } } /* Reset */ /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: pointer; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* 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 { user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* easings */ /** Colors **/ /** Borders **/ /** Font Family **/ /** Layout **/ /** Breakpoints **/ /** Spacings **/ /** Easings **/ :root { --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); } /* Cursors */ .cursor-auto { cursor: auto !important; } .cursor-default { cursor: default !important; } .cursor-pointer { cursor: pointer !important; } .cursor-progress { cursor: progress !important; } .cursor-wait { cursor: wait !important; } .cursor-grabbing { cursor: grabbing !important; } .cursor-unset { cursor: unset !important; } /* Spacings */ .object-fit { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; position: absolute; inset: 0%; } .is-fluid { margin-left: var(--padding-global); margin-right: var(--padding-global); } @media (max-width: 767px) { .is-fluid { margin-left: var(--padding-global); margin-right: var(--padding-global); } } @media (max-width: 767px) { :root { --padding-global: 1.25rem; --xxs: 0.25rem; --xs: 0.5rem; --s: 1rem; --m: 1.5rem; --l: 2rem; --xl: 2.5rem; --xxl: 3rem; --3xl: 3.25rem; --4xl: 3.75rem; --huge: 4rem; --xhuge: 4.5rem; --xxhuge: 8rem; } .m-padding-global { margin: var(--padding-global); } .mt-padding-global { margin-top: var(--padding-global); } .mr-padding-global { margin-right: var(--padding-global); } .mb-padding-global { margin-bottom: var(--padding-global); } .ml-padding-global { margin-left: var(--padding-global); } .mx-padding-global { margin-left: var(--padding-global); margin-right: var(--padding-global); } .my-padding-global { margin-top: var(--padding-global); margin-bottom: var(--padding-global); } .p-padding-global { padding: var(--padding-global); } .pt-padding-global { padding-top: var(--padding-global); } .pr-padding-global { padding-right: var(--padding-global); } .pb-padding-global { padding-bottom: var(--padding-global); } .pl-padding-global { padding-left: var(--padding-global); } .px-padding-global { padding-left: var(--padding-global); padding-right: var(--padding-global); } .py-padding-global { padding-top: var(--padding-global); padding-bottom: var(--padding-global); } .m-xxs { margin: var(--xxs); } .mt-xxs { margin-top: var(--xxs); } .mr-xxs { margin-right: var(--xxs); } .mb-xxs { margin-bottom: var(--xxs); } .ml-xxs { margin-left: var(--xxs); } .mx-xxs { margin-left: var(--xxs); margin-right: var(--xxs); } .my-xxs { margin-top: var(--xxs); margin-bottom: var(--xxs); } .p-xxs { padding: var(--xxs); } .pt-xxs { padding-top: var(--xxs); } .pr-xxs { padding-right: var(--xxs); } .pb-xxs { padding-bottom: var(--xxs); } .pl-xxs { padding-left: var(--xxs); } .px-xxs { padding-left: var(--xxs); padding-right: var(--xxs); } .py-xxs { padding-top: var(--xxs); padding-bottom: var(--xxs); } .m-xs { margin: var(--xs); } .mt-xs { margin-top: var(--xs); } .mr-xs { margin-right: var(--xs); } .mb-xs { margin-bottom: var(--xs); } .ml-xs { margin-left: var(--xs); } .mx-xs { margin-left: var(--xs); margin-right: var(--xs); } .my-xs { margin-top: var(--xs); margin-bottom: var(--xs); } .p-xs { padding: var(--xs); } .pt-xs { padding-top: var(--xs); } .pr-xs { padding-right: var(--xs); } .pb-xs { padding-bottom: var(--xs); } .pl-xs { padding-left: var(--xs); } .px-xs { padding-left: var(--xs); padding-right: var(--xs); } .py-xs { padding-top: var(--xs); padding-bottom: var(--xs); } .m-s { margin: var(--s); } .mt-s { margin-top: var(--s); } .mr-s { margin-right: var(--s); } .mb-s { margin-bottom: var(--s); } .ml-s { margin-left: var(--s); } .mx-s { margin-left: var(--s); margin-right: var(--s); } .my-s { margin-top: var(--s); margin-bottom: var(--s); } .p-s { padding: var(--s); } .pt-s { padding-top: var(--s); } .pr-s { padding-right: var(--s); } .pb-s { padding-bottom: var(--s); } .pl-s { padding-left: var(--s); } .px-s { padding-left: var(--s); padding-right: var(--s); } .py-s { padding-top: var(--s); padding-bottom: var(--s); } .m-m { margin: var(--m); } .mt-m { margin-top: var(--m); } .mr-m { margin-right: var(--m); } .mb-m { margin-bottom: var(--m); } .ml-m { margin-left: var(--m); } .mx-m { margin-left: var(--m); margin-right: var(--m); } .my-m { margin-top: var(--m); margin-bottom: var(--m); } .p-m { padding: var(--m); } .pt-m { padding-top: var(--m); } .pr-m { padding-right: var(--m); } .pb-m { padding-bottom: var(--m); } .pl-m { padding-left: var(--m); } .px-m { padding-left: var(--m); padding-right: var(--m); } .py-m { padding-top: var(--m); padding-bottom: var(--m); } .m-l { margin: var(--l); } .mt-l { margin-top: var(--l); } .mr-l { margin-right: var(--l); } .mb-l { margin-bottom: var(--l); } .ml-l { margin-left: var(--l); } .mx-l { margin-left: var(--l); margin-right: var(--l); } .my-l { margin-top: var(--l); margin-bottom: var(--l); } .p-l { padding: var(--l); } .pt-l { padding-top: var(--l); } .pr-l { padding-right: var(--l); } .pb-l { padding-bottom: var(--l); } .pl-l { padding-left: var(--l); } .px-l { padding-left: var(--l); padding-right: var(--l); } .py-l { padding-top: var(--l); padding-bottom: var(--l); } .m-xl { margin: var(--xl); } .mt-xl { margin-top: var(--xl); } .mr-xl { margin-right: var(--xl); } .mb-xl { margin-bottom: var(--xl); } .ml-xl { margin-left: var(--xl); } .mx-xl { margin-left: var(--xl); margin-right: var(--xl); } .my-xl { margin-top: var(--xl); margin-bottom: var(--xl); } .p-xl { padding: var(--xl); } .pt-xl { padding-top: var(--xl); } .pr-xl { padding-right: var(--xl); } .pb-xl { padding-bottom: var(--xl); } .pl-xl { padding-left: var(--xl); } .px-xl { padding-left: var(--xl); padding-right: var(--xl); } .py-xl { padding-top: var(--xl); padding-bottom: var(--xl); } .m-xxl { margin: var(--xxl); } .mt-xxl { margin-top: var(--xxl); } .mr-xxl { margin-right: var(--xxl); } .mb-xxl { margin-bottom: var(--xxl); } .ml-xxl { margin-left: var(--xxl); } .mx-xxl { margin-left: var(--xxl); margin-right: var(--xxl); } .my-xxl { margin-top: var(--xxl); margin-bottom: var(--xxl); } .p-xxl { padding: var(--xxl); } .pt-xxl { padding-top: var(--xxl); } .pr-xxl { padding-right: var(--xxl); } .pb-xxl { padding-bottom: var(--xxl); } .pl-xxl { padding-left: var(--xxl); } .px-xxl { padding-left: var(--xxl); padding-right: var(--xxl); } .py-xxl { padding-top: var(--xxl); padding-bottom: var(--xxl); } .m-3xl { margin: var(--3xl); } .mt-3xl { margin-top: var(--3xl); } .mr-3xl { margin-right: var(--3xl); } .mb-3xl { margin-bottom: var(--3xl); } .ml-3xl { margin-left: var(--3xl); } .mx-3xl { margin-left: var(--3xl); margin-right: var(--3xl); } .my-3xl { margin-top: var(--3xl); margin-bottom: var(--3xl); } .p-3xl { padding: var(--3xl); } .pt-3xl { padding-top: var(--3xl); } .pr-3xl { padding-right: var(--3xl); } .pb-3xl { padding-bottom: var(--3xl); } .pl-3xl { padding-left: var(--3xl); } .px-3xl { padding-left: var(--3xl); padding-right: var(--3xl); } .py-3xl { padding-top: var(--3xl); padding-bottom: var(--3xl); } .m-4xl { margin: var(--4xl); } .mt-4xl { margin-top: var(--4xl); } .mr-4xl { margin-right: var(--4xl); } .mb-4xl { margin-bottom: var(--4xl); } .ml-4xl { margin-left: var(--4xl); } .mx-4xl { margin-left: var(--4xl); margin-right: var(--4xl); } .my-4xl { margin-top: var(--4xl); margin-bottom: var(--4xl); } .p-4xl { padding: var(--4xl); } .pt-4xl { padding-top: var(--4xl); } .pr-4xl { padding-right: var(--4xl); } .pb-4xl { padding-bottom: var(--4xl); } .pl-4xl { padding-left: var(--4xl); } .px-4xl { padding-left: var(--4xl); padding-right: var(--4xl); } .py-4xl { padding-top: var(--4xl); padding-bottom: var(--4xl); } .m-huge { margin: var(--huge); } .mt-huge { margin-top: var(--huge); } .mr-huge { margin-right: var(--huge); } .mb-huge { margin-bottom: var(--huge); } .ml-huge { margin-left: var(--huge); } .mx-huge { margin-left: var(--huge); margin-right: var(--huge); } .my-huge { margin-top: var(--huge); margin-bottom: var(--huge); } .p-huge { padding: var(--huge); } .pt-huge { padding-top: var(--huge); } .pr-huge { padding-right: var(--huge); } .pb-huge { padding-bottom: var(--huge); } .pl-huge { padding-left: var(--huge); } .px-huge { padding-left: var(--huge); padding-right: var(--huge); } .py-huge { padding-top: var(--huge); padding-bottom: var(--huge); } .m-xhuge { margin: var(--xhuge); } .mt-xhuge { margin-top: var(--xhuge); } .mr-xhuge { margin-right: var(--xhuge); } .mb-xhuge { margin-bottom: var(--xhuge); } .ml-xhuge { margin-left: var(--xhuge); } .mx-xhuge { margin-left: var(--xhuge); margin-right: var(--xhuge); } .my-xhuge { margin-top: var(--xhuge); margin-bottom: var(--xhuge); } .p-xhuge { padding: var(--xhuge); } .pt-xhuge { padding-top: var(--xhuge); } .pr-xhuge { padding-right: var(--xhuge); } .pb-xhuge { padding-bottom: var(--xhuge); } .pl-xhuge { padding-left: var(--xhuge); } .px-xhuge { padding-left: var(--xhuge); padding-right: var(--xhuge); } .py-xhuge { padding-top: var(--xhuge); padding-bottom: var(--xhuge); } .m-xxhuge { margin: var(--xxhuge); } .mt-xxhuge { margin-top: var(--xxhuge); } .mr-xxhuge { margin-right: var(--xxhuge); } .mb-xxhuge { margin-bottom: var(--xxhuge); } .ml-xxhuge { margin-left: var(--xxhuge); } .mx-xxhuge { margin-left: var(--xxhuge); margin-right: var(--xxhuge); } .my-xxhuge { margin-top: var(--xxhuge); margin-bottom: var(--xxhuge); } .p-xxhuge { padding: var(--xxhuge); } .pt-xxhuge { padding-top: var(--xxhuge); } .pr-xxhuge { padding-right: var(--xxhuge); } .pb-xxhuge { padding-bottom: var(--xxhuge); } .pl-xxhuge { padding-left: var(--xxhuge); } .px-xxhuge { padding-left: var(--xxhuge); padding-right: var(--xxhuge); } .py-xxhuge { padding-top: var(--xxhuge); padding-bottom: var(--xxhuge); } } @media (min-width: 768px) { :root { --padding-global: var(--padding-global); --xxs: 0.25rem; --xs: 0.5rem; --s: 1rem; --m: 1.5rem; --l: 2rem; --xl: 3rem; --xxl: 4rem; --3xl: 6rem; --4xl: 8rem; --huge: 10rem; --xhuge: 12rem; --xxhuge: 16rem; } .m-padding-global { margin: var(--padding-global); } .mt-padding-global { margin-top: var(--padding-global); } .mr-padding-global { margin-right: var(--padding-global); } .mb-padding-global { margin-bottom: var(--padding-global); } .ml-padding-global { margin-left: var(--padding-global); } .mx-padding-global { margin-left: var(--padding-global); margin-right: var(--padding-global); } .my-padding-global { margin-top: var(--padding-global); margin-bottom: var(--padding-global); } .p-padding-global { padding: var(--padding-global); } .pt-padding-global { padding-top: var(--padding-global); } .pr-padding-global { padding-right: var(--padding-global); } .pb-padding-global { padding-bottom: var(--padding-global); } .pl-padding-global { padding-left: var(--padding-global); } .px-padding-global { padding-left: var(--padding-global); padding-right: var(--padding-global); } .py-padding-global { padding-top: var(--padding-global); padding-bottom: var(--padding-global); } .m-xxs { margin: var(--xxs); } .mt-xxs { margin-top: var(--xxs); } .mr-xxs { margin-right: var(--xxs); } .mb-xxs { margin-bottom: var(--xxs); } .ml-xxs { margin-left: var(--xxs); } .mx-xxs { margin-left: var(--xxs); margin-right: var(--xxs); } .my-xxs { margin-top: var(--xxs); margin-bottom: var(--xxs); } .p-xxs { padding: var(--xxs); } .pt-xxs { padding-top: var(--xxs); } .pr-xxs { padding-right: var(--xxs); } .pb-xxs { padding-bottom: var(--xxs); } .pl-xxs { padding-left: var(--xxs); } .px-xxs { padding-left: var(--xxs); padding-right: var(--xxs); } .py-xxs { padding-top: var(--xxs); padding-bottom: var(--xxs); } .m-xs { margin: var(--xs); } .mt-xs { margin-top: var(--xs); } .mr-xs { margin-right: var(--xs); } .mb-xs { margin-bottom: var(--xs); } .ml-xs { margin-left: var(--xs); } .mx-xs { margin-left: var(--xs); margin-right: var(--xs); } .my-xs { margin-top: var(--xs); margin-bottom: var(--xs); } .p-xs { padding: var(--xs); } .pt-xs { padding-top: var(--xs); } .pr-xs { padding-right: var(--xs); } .pb-xs { padding-bottom: var(--xs); } .pl-xs { padding-left: var(--xs); } .px-xs { padding-left: var(--xs); padding-right: var(--xs); } .py-xs { padding-top: var(--xs); padding-bottom: var(--xs); } .m-s { margin: var(--s); } .mt-s { margin-top: var(--s); } .mr-s { margin-right: var(--s); } .mb-s { margin-bottom: var(--s); } .ml-s { margin-left: var(--s); } .mx-s { margin-left: var(--s); margin-right: var(--s); } .my-s { margin-top: var(--s); margin-bottom: var(--s); } .p-s { padding: var(--s); } .pt-s { padding-top: var(--s); } .pr-s { padding-right: var(--s); } .pb-s { padding-bottom: var(--s); } .pl-s { padding-left: var(--s); } .px-s { padding-left: var(--s); padding-right: var(--s); } .py-s { padding-top: var(--s); padding-bottom: var(--s); } .m-m { margin: var(--m); } .mt-m { margin-top: var(--m); } .mr-m { margin-right: var(--m); } .mb-m { margin-bottom: var(--m); } .ml-m { margin-left: var(--m); } .mx-m { margin-left: var(--m); margin-right: var(--m); } .my-m { margin-top: var(--m); margin-bottom: var(--m); } .p-m { padding: var(--m); } .pt-m { padding-top: var(--m); } .pr-m { padding-right: var(--m); } .pb-m { padding-bottom: var(--m); } .pl-m { padding-left: var(--m); } .px-m { padding-left: var(--m); padding-right: var(--m); } .py-m { padding-top: var(--m); padding-bottom: var(--m); } .m-l { margin: var(--l); } .mt-l { margin-top: var(--l); } .mr-l { margin-right: var(--l); } .mb-l { margin-bottom: var(--l); } .ml-l { margin-left: var(--l); } .mx-l { margin-left: var(--l); margin-right: var(--l); } .my-l { margin-top: var(--l); margin-bottom: var(--l); } .p-l { padding: var(--l); } .pt-l { padding-top: var(--l); } .pr-l { padding-right: var(--l); } .pb-l { padding-bottom: var(--l); } .pl-l { padding-left: var(--l); } .px-l { padding-left: var(--l); padding-right: var(--l); } .py-l { padding-top: var(--l); padding-bottom: var(--l); } .m-xl { margin: var(--xl); } .mt-xl { margin-top: var(--xl); } .mr-xl { margin-right: var(--xl); } .mb-xl { margin-bottom: var(--xl); } .ml-xl { margin-left: var(--xl); } .mx-xl { margin-left: var(--xl); margin-right: var(--xl); } .my-xl { margin-top: var(--xl); margin-bottom: var(--xl); } .p-xl { padding: var(--xl); } .pt-xl { padding-top: var(--xl); } .pr-xl { padding-right: var(--xl); } .pb-xl { padding-bottom: var(--xl); } .pl-xl { padding-left: var(--xl); } .px-xl { padding-left: var(--xl); padding-right: var(--xl); } .py-xl { padding-top: var(--xl); padding-bottom: var(--xl); } .m-xxl { margin: var(--xxl); } .mt-xxl { margin-top: var(--xxl); } .mr-xxl { margin-right: var(--xxl); } .mb-xxl { margin-bottom: var(--xxl); } .ml-xxl { margin-left: var(--xxl); } .mx-xxl { margin-left: var(--xxl); margin-right: var(--xxl); } .my-xxl { margin-top: var(--xxl); margin-bottom: var(--xxl); } .p-xxl { padding: var(--xxl); } .pt-xxl { padding-top: var(--xxl); } .pr-xxl { padding-right: var(--xxl); } .pb-xxl { padding-bottom: var(--xxl); } .pl-xxl { padding-left: var(--xxl); } .px-xxl { padding-left: var(--xxl); padding-right: var(--xxl); } .py-xxl { padding-top: var(--xxl); padding-bottom: var(--xxl); } .m-3xl { margin: var(--3xl); } .mt-3xl { margin-top: var(--3xl); } .mr-3xl { margin-right: var(--3xl); } .mb-3xl { margin-bottom: var(--3xl); } .ml-3xl { margin-left: var(--3xl); } .mx-3xl { margin-left: var(--3xl); margin-right: var(--3xl); } .my-3xl { margin-top: var(--3xl); margin-bottom: var(--3xl); } .p-3xl { padding: var(--3xl); } .pt-3xl { padding-top: var(--3xl); } .pr-3xl { padding-right: var(--3xl); } .pb-3xl { padding-bottom: var(--3xl); } .pl-3xl { padding-left: var(--3xl); } .px-3xl { padding-left: var(--3xl); padding-right: var(--3xl); } .py-3xl { padding-top: var(--3xl); padding-bottom: var(--3xl); } .m-4xl { margin: var(--4xl); } .mt-4xl { margin-top: var(--4xl); } .mr-4xl { margin-right: var(--4xl); } .mb-4xl { margin-bottom: var(--4xl); } .ml-4xl { margin-left: var(--4xl); } .mx-4xl { margin-left: var(--4xl); margin-right: var(--4xl); } .my-4xl { margin-top: var(--4xl); margin-bottom: var(--4xl); } .p-4xl { padding: var(--4xl); } .pt-4xl { padding-top: var(--4xl); } .pr-4xl { padding-right: var(--4xl); } .pb-4xl { padding-bottom: var(--4xl); } .pl-4xl { padding-left: var(--4xl); } .px-4xl { padding-left: var(--4xl); padding-right: var(--4xl); } .py-4xl { padding-top: var(--4xl); padding-bottom: var(--4xl); } .m-huge { margin: var(--huge); } .mt-huge { margin-top: var(--huge); } .mr-huge { margin-right: var(--huge); } .mb-huge { margin-bottom: var(--huge); } .ml-huge { margin-left: var(--huge); } .mx-huge { margin-left: var(--huge); margin-right: var(--huge); } .my-huge { margin-top: var(--huge); margin-bottom: var(--huge); } .p-huge { padding: var(--huge); } .pt-huge { padding-top: var(--huge); } .pr-huge { padding-right: var(--huge); } .pb-huge { padding-bottom: var(--huge); } .pl-huge { padding-left: var(--huge); } .px-huge { padding-left: var(--huge); padding-right: var(--huge); } .py-huge { padding-top: var(--huge); padding-bottom: var(--huge); } .m-xhuge { margin: var(--xhuge); } .mt-xhuge { margin-top: var(--xhuge); } .mr-xhuge { margin-right: var(--xhuge); } .mb-xhuge { margin-bottom: var(--xhuge); } .ml-xhuge { margin-left: var(--xhuge); } .mx-xhuge { margin-left: var(--xhuge); margin-right: var(--xhuge); } .my-xhuge { margin-top: var(--xhuge); margin-bottom: var(--xhuge); } .p-xhuge { padding: var(--xhuge); } .pt-xhuge { padding-top: var(--xhuge); } .pr-xhuge { padding-right: var(--xhuge); } .pb-xhuge { padding-bottom: var(--xhuge); } .pl-xhuge { padding-left: var(--xhuge); } .px-xhuge { padding-left: var(--xhuge); padding-right: var(--xhuge); } .py-xhuge { padding-top: var(--xhuge); padding-bottom: var(--xhuge); } .m-xxhuge { margin: var(--xxhuge); } .mt-xxhuge { margin-top: var(--xxhuge); } .mr-xxhuge { margin-right: var(--xxhuge); } .mb-xxhuge { margin-bottom: var(--xxhuge); } .ml-xxhuge { margin-left: var(--xxhuge); } .mx-xxhuge { margin-left: var(--xxhuge); margin-right: var(--xxhuge); } .my-xxhuge { margin-top: var(--xxhuge); margin-bottom: var(--xxhuge); } .p-xxhuge { padding: var(--xxhuge); } .pt-xxhuge { padding-top: var(--xxhuge); } .pr-xxhuge { padding-right: var(--xxhuge); } .pb-xxhuge { padding-bottom: var(--xxhuge); } .pl-xxhuge { padding-left: var(--xxhuge); } .px-xxhuge { padding-left: var(--xxhuge); padding-right: var(--xxhuge); } .py-xxhuge { padding-top: var(--xxhuge); padding-bottom: var(--xxhuge); } } /* Colors */ :root { --dark-white: #ffffff; --dark-primary: #527c7c; --dark-secondary: #afd389; --dark-accent: #87b561; --dark-gradient-body: linear-gradient(to right, #fbf3d3, transparent); --dark-gradient-footer: linear-gradient(to right, #d7f0f2, #fbf3d3); --dark-stroke: #afd389; --light-white: #ffffff; --light-primary: #527c7c; --light-secondary: #afd389; --light-accent: #87b561; --light-gradient-body: linear-gradient(to right, #fbf3d3, transparent); --light-gradient-footer: linear-gradient(to right, #d7f0f2, #fbf3d3); --light-stroke: #afd389; } @media (prefers-color-scheme: dark) { :root { --white: #ffffff; --primary: #527c7c; --secondary: #afd389; --accent: #87b561; --gradient-body: linear-gradient(to right, #fbf3d3, transparent); --gradient-footer: linear-gradient(to right, #d7f0f2, #fbf3d3); --stroke: #afd389; } :root .text-white { color: var(--white); } :root .bg-white { background: var(--white); } :root .text-primary { color: var(--primary); } :root .bg-primary { background: var(--primary); } :root .text-secondary { color: var(--secondary); } :root .bg-secondary { background: var(--secondary); } :root .text-accent { color: var(--accent); } :root .bg-accent { background: var(--accent); } :root .text-gradient-body { color: var(--gradient-body); } :root .bg-gradient-body { background: var(--gradient-body); } :root .text-gradient-footer { color: var(--gradient-footer); } :root .bg-gradient-footer { background: var(--gradient-footer); } :root .text-stroke { color: var(--stroke); } :root .bg-stroke { background: var(--stroke); } } @media (prefers-color-scheme: light) { :root { --white: #ffffff; --primary: #527c7c; --secondary: #afd389; --accent: #87b561; --gradient-body: linear-gradient(to right, #fbf3d3, transparent); --gradient-footer: linear-gradient(to right, #d7f0f2, #fbf3d3); --stroke: #afd389; } :root .text-white { color: var(--white); } :root .bg-white { background: var(--white); } :root .text-primary { color: var(--primary); } :root .bg-primary { background: var(--primary); } :root .text-secondary { color: var(--secondary); } :root .bg-secondary { background: var(--secondary); } :root .text-accent { color: var(--accent); } :root .bg-accent { background: var(--accent); } :root .text-gradient-body { color: var(--gradient-body); } :root .bg-gradient-body { background: var(--gradient-body); } :root .text-gradient-footer { color: var(--gradient-footer); } :root .bg-gradient-footer { background: var(--gradient-footer); } :root .text-stroke { color: var(--stroke); } :root .bg-stroke { background: var(--stroke); } } .theme[data-theme=dark] { --white: #ffffff; --primary: #527c7c; --secondary: #afd389; --accent: #87b561; --gradient-body: linear-gradient(to right, #fbf3d3, transparent); --gradient-footer: linear-gradient(to right, #d7f0f2, #fbf3d3); --stroke: #afd389; } .theme[data-theme=dark] .text-white { color: var(--white); } .theme[data-theme=dark] .bg-white { background: var(--white); } .theme[data-theme=dark] .text-primary { color: var(--primary); } .theme[data-theme=dark] .bg-primary { background: var(--primary); } .theme[data-theme=dark] .text-secondary { color: var(--secondary); } .theme[data-theme=dark] .bg-secondary { background: var(--secondary); } .theme[data-theme=dark] .text-accent { color: var(--accent); } .theme[data-theme=dark] .bg-accent { background: var(--accent); } .theme[data-theme=dark] .text-gradient-body { color: var(--gradient-body); } .theme[data-theme=dark] .bg-gradient-body { background: var(--gradient-body); } .theme[data-theme=dark] .text-gradient-footer { color: var(--gradient-footer); } .theme[data-theme=dark] .bg-gradient-footer { background: var(--gradient-footer); } .theme[data-theme=dark] .text-stroke { color: var(--stroke); } .theme[data-theme=dark] .bg-stroke { background: var(--stroke); } .theme[data-theme=light] { --white: #ffffff; --primary: #527c7c; --secondary: #afd389; --accent: #87b561; --gradient-body: linear-gradient(to right, #fbf3d3, transparent); --gradient-footer: linear-gradient(to right, #d7f0f2, #fbf3d3); --stroke: #afd389; } .theme[data-theme=light] .text-white { color: var(--white); } .theme[data-theme=light] .bg-white { background: var(--white); } .theme[data-theme=light] .text-primary { color: var(--primary); } .theme[data-theme=light] .bg-primary { background: var(--primary); } .theme[data-theme=light] .text-secondary { color: var(--secondary); } .theme[data-theme=light] .bg-secondary { background: var(--secondary); } .theme[data-theme=light] .text-accent { color: var(--accent); } .theme[data-theme=light] .bg-accent { background: var(--accent); } .theme[data-theme=light] .text-gradient-body { color: var(--gradient-body); } .theme[data-theme=light] .bg-gradient-body { background: var(--gradient-body); } .theme[data-theme=light] .text-gradient-footer { color: var(--gradient-footer); } .theme[data-theme=light] .bg-gradient-footer { background: var(--gradient-footer); } .theme[data-theme=light] .text-stroke { color: var(--stroke); } .theme[data-theme=light] .bg-stroke { background: var(--stroke); } /* Text */ .text-align-center { text-align: center; } .text-align-left { text-align: left; } .text-align-right { text-align: right; } .font-weight-400 { font-weight: 400; } .font-weight-500 { font-weight: 500; } .font-weight-600 { font-weight: 600; } .font-weight-700 { font-weight: 700; } .text-style-normal { font-style: normal; } .text-style-italic { font-style: italic; } .text-style-oblique { font-style: oblique; } .text-style-underline { text-decoration: underline; } .text-style-overline { text-decoration: overline; } .text-style-line-through { text-decoration: line-through; } .text-style-capitalize { text-transform: capitalize; } .text-style-uppercase { text-transform: uppercase; } .text-style-lowercase { text-transform: lowercase; } .text-style-nowrap { white-space: nowrap; } .text-style-wrap { white-space: wrap; } /* Breakpoints */ .hidden, .hide { display: none; } @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .hide-desktop { display: none !important; } } /* Display */ .grid { display: grid; } .flex { display: flex; } .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .static { position: static; } .overflow-visible { overflow: visible; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; } /* Scroll */ html:not(.dev), html:not(.dev) * { scrollbar-width: none !important; -ms-overflow-style: none !important; } html:not(.dev)::-webkit-scrollbar, html:not(.dev) *::-webkit-scrollbar { width: 0 !important; height: 0 !important; } html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .hide-scrollbar::-webkit-scrollbar { display: none; } html { font-size: 1.3625rem; } @media (width <= 2000px) { html { font-size: calc(0.0678571429rem + 1.0357142857vw); } } @media (width <= 767px) { html { font-size: calc(0.1594827586rem + 3.4482758621vw); } } @media only screen and (max-width: 480px) { html { font-size: calc(16px + 6 * (100vw - 320px) / 680) !important; } } @font-face { font-family: "grafik"; font-weight: 400; src: url("../assets/fonts/GraphikRegular.otf") format("opentype"); } @font-face { font-family: "grafik medium"; font-weight: 500; src: url("../assets/fonts/GraphikMedium.woff") format("woff"); } @font-face { font-family: "breeder"; src: url("../assets/fonts/Breeder-Regular.otf") format("opentype"); } :root { --color-reverse: invert(1); --font-grafik: "grafik"; --font-grafik-medium: "grafik medium"; --font-breeder: "breeder"; --padding-global: 3.5rem; --section-p-top: 5rem; } @media (max-width: 767px) { :root { --padding-global: 1.3rem; --section-p-top: 10rem; } } html { text-size-adjust: 100%; font-feature-settings: normal; font-variation-settings: normal; } body { color: var(--primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; } .neg-p-gl { margin-left: calc(-1 * var(--padding-global)) !important; margin-right: calc(-1 * var(--padding-global)) !important; padding-left: var(--padding-global); padding-right: var(--padding-global); } @media (max-width: 767px) { .neg-p-gl { margin-left: 0 !important; margin-right: 0 !important; } } .card_wrap { column-count: 1fr; cursor: pointer; } .card_wrap .card-img_wrap { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: start; align-items: start; width: 100%; height: 21rem; border-radius: 2.3rem; } .card_wrap .card-img_wrap .btn_card { align-self: self-end; } .card_wrap:hover svg, .swiper-slide:hover svg { transform: translateX(3px); } .card_wrap:hover .btn-line, .card_wrap:hover .lg-line, .swiper-slide:hover .btn-line, .swiper-slide:hover .lg-line { width: 0%; } .swiper-slide img { transition: all 0.8s ease; } .swiper-slide-active img { transform: scale(1.05); } .btn { font-size: 0.83rem; line-height: 0.94rem; font-family: var(--font-grafik); font-weight: 500; display: flex; gap: 0.5rem; align-items: center; justify-content: center; padding: 0.8rem 1.56rem; border-radius: 2.3rem; } .btn.is-lg { min-width: 10.5rem; } .btn.is-white { background-color: var(--white); color: var(--primary); } .btn.is-primary { background-color: var(--primary); color: var(--white); } .btn.is-border-primary { border: 1px solid var(--primary); color: var(--primary); } .btn.is-secondary { background-color: var(--accent); color: var(--white); } .btn.is-border-secondary { border: 1px solid var(--secondary); color: var(--primary); } .btn.is-ghost { background-color: transparent; border: none; padding: 0; color: var(--secondary); align-items: center; justify-content: start; } .btn svg { transition: transform 0.6s ease; } .btn-link:hover svg:not(.back-svg) { transform: translateX(3px); } .btn-link:hover .btn-line { width: 0%; } .lg-line { height: 1px; width: 100%; } .lg-line.is-primary { background-color: var(--primary); } .lg-line.is-secondary { background-color: var(--secondary); } .lg-line.is-white { background-color: var(--white); } .nav, footer { position: relative; width: 100vw; } @media (max-width: 767px) { .nav, footer { padding-left: var(--padding-global); padding-right: var(--padding-global); } } .nav { position: absolute; top: 0; z-index: 9999 !important; mix-blend-mode: normal; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav .container { align-items: center; max-width: 100%; } .nav .nav_logo_wrap { width: 8.4rem; height: 4.66rem; display: block; transform: translateY(0.25rem); } @media (max-width: 767px) { .nav .nav_logo_wrap { width: 10rem; } } .nav .nav_links { display: flex; gap: 2.5rem; justify-content: space-between; } .nav .nav_links li { font-size: 0.9rem; font-weight: normal; font-family: var(--font-grafik); list-style-type: none; } .nav.is-dark { color: var(--primary) !important; } .nav.is-dark .nav_logo_svg rect, .nav.is-dark .nav_logo_svg path, .nav.is-dark .nav_logo_svg line { fill: var(--primary) !important; } #kontakt-link { background-color: var(--primary); color: var(--white); padding: 0.65rem 1.35rem; border-radius: 2.3rem; } .is-fixed { position: fixed; } .menu-container { position: fixed; z-index: 1000; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--primary); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; } .menu-container .menu { width: 100%; height: 100%; padding-top: 9rem; position: relative; padding-left: var(--padding-global); } .menu-container .menu .close-menu { position: absolute; top: 0rem; right: 1.5rem; } .menu-container .menu ul { list-style-type: none; padding: 0; margin: 0; } .menu-container .menu ul .lg-line { width: 85%; opacity: 0.5; } .menu-container .menu ul li.sm-link a { font-size: 1.2rem; } .menu-container .menu ul li a { text-decoration: none; color: var(--white); font-family: var(--font-grafik); font-weight: normal; font-size: 1.35rem; } .menu-toggle { position: fixed; z-index: 1200; top: 0; transform: translateY(-8px); padding-left: var(--padding-global); padding-right: var(--padding-global); color: var(--secondary); width: 100%; display: flex; align-items: center; justify-content: space-between; backdrop-filter: blend; border: none; cursor: pointer; } .menu-toggle #menu-hamburger { position: absolute; right: var(--padding-global); top: 47%; transform: translate(0, -50%); height: 26px; width: 2.6rem; } .menu-toggle #menu-hamburger, .menu-toggle #menu-hamburger:hover { color: #000; } .menu-toggle .menu-toggle-bar { display: block; position: absolute; top: 50%; margin-top: -1px; right: 0; width: 100%; height: 4px; border-radius: 4px; background-color: var(--primary); transition: all 0.3s ease; } .menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom { transform: translate(0, 0.75rem); } .nav-open .menu-toggle .menu-toggle-bar.menu-toggle-bar--top { transform: translate(0, 0) rotate(45deg); background: var(--white); } .nav-open .menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom { transform: translate(0, 0) rotate(-45deg); background: var(--white); } body.nav-open .menu-toggle { background-color: var(--primary) !important; } .footer_wrapper { position: relative; display: flex; align-items: center; justify-content: center; } .footer_wrapper footer { width: 97vw; background: var(--gradient-footer); } @media (max-width: 767px) { .footer_wrapper footer { width: 100vw; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } } .footer_wrapper footer .footer_left-side { grid-column: 1/span 5; } @media (max-width: 767px) { .footer_wrapper footer .footer_left-side { grid-column: 1/span 5; } } .footer_wrapper footer .footer_right-side { grid-column: 9/span 5; display: flex; gap: 3rem; } @media (max-width: 767px) { .footer_wrapper footer .footer_right-side { grid-column: 1/span 4; flex-direction: column; gap: 1.5rem; margin-top: 3rem; } } .footer_wrapper footer .footer_right-side .footer_logo-wrap { position: relative; width: 9.6rem; height: 6.2rem; } .footer_wrapper footer .footer_bottom { grid-column: 1/span 10; } .footer_wrapper footer .footer_bottom .footer_bottom_row1 { display: flex; gap: 0.5rem; } .col-3-layout { grid-column: 1/12 span; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-content: center; column-gap: 1rem; row-gap: 1rem; } @media (max-width: 767px) { .col-3-layout { grid-template-columns: repeat(1, 1fr); } } .col-4-layout { grid-column: 1/12 span; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-content: center; column-gap: 1rem; row-gap: 2rem; } .page-wrapper { min-height: 100vh; position: relative; z-index: 1; transition: opacity 0.6180469716s var(--ease-out-quad); } .page-wrapper[data-preload=true] { opacity: 0; } .page-wrapper .page-wrapper-lines { width: 100vw; position: fixed; left: 0; top: 0; height: 100vh; justify-content: center; align-items: stretch; z-index: 0; } @media (width < 2000px) { .page-wrapper .page-wrapper-lines { display: none; } } .page-wrapper .page-wrapper-lines .page-wrapper-lines_inner { width: 2000px; border-left: 1px solid var(--stroke); border-right: 1px solid var(--stroke); height: 100vh; margin-left: auto; margin-right: auto; } .main-wrapper { position: relative; z-index: 2; } .page-padding { width: 100%; height: 100%; padding-left: var(--padding-global); padding-right: var(--padding-global); } .container { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1rem; max-width: 2000px; margin-left: auto; margin-right: auto; /* eslin disable */ } @media (max-width: 767px) { .container { grid-template-columns: repeat(4, 1fr); column-gap: 0.625rem; } } .container .is-fluid { margin-left: var(--padding-global); margin-right: var(--padding-global); } @media (max-width: 767px) { .container .is-fluid { margin-left: var(--padding-global); margin-right: var(--padding-global); } } .container.is-full-width { max-width: 100%; } section, .section { position: relative; overflow: hidden; } .preload { position: fixed; z-index: 999999; width: 100vw !important; height: 100vh !important; display: flex; align-items: center; justify-content: center; } .preload .preload_logo_wrap { width: 28rem; height: 7.5rem; } @media (max-width: 767px) { .preload .preload_logo_wrap { width: 14rem; height: 3.5rem; } } .font-grafik { font-family: var(--font-grafik); } .font-breeder { font-family: var(--font-breeder); } .section_global_hero { margin-top: 5.65rem; } @media (max-width: 767px) { .section_global_hero { margin-top: 5.075rem; } } .section_mission .mission_content { grid-column: 4/span 6; } @media (max-width: 767px) { .section_mission .mission_content { grid-column: 1/span 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .section_mission .mission_content .title-jumbo { transform: translateX(0); } } .section_downloads .section_head { grid-column: 1/span 4; } @media (max-width: 767px) { .section_downloads .section_head { grid-column: 1/span 4; } } .section_downloads .downloads_left-side { grid-column: 1/span 4; max-width: 38ch; } @media (max-width: 767px) { .section_downloads .downloads_left-side { grid-column: 1/span 4; max-width: 100%; } } .section_downloads .downloads_right-side { grid-column: 5/span 8; display: flex; flex-direction: column; justify-content: start; align-items: start; } @media (max-width: 767px) { .section_downloads .downloads_right-side { grid-column: 1/span 4; margin-left: 0; margin-top: 3.6rem; } } .section_downloads .downloads_right-side .download-row_item { width: 100%; } .section_downloads .downloads_right-side .download-row_content { display: flex; align-items: center; justify-content: space-between; } .section_downloads .downloads_right-side .divider_line { width: 100%; height: 1px; background-color: var(--primary); opacity: 0.5; } .marquee { position: relative; z-index: 3; overflow: hidden; } .marquee-content { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; display: -webkit-box; align-items: center; padding: 33vh 0; text-align: center; } .marquee-carousel.marquee-carousel-1 { margin-right: -300px; margin-bottom: 11px; } @media (min-width: 768px) { .marquee-carousel.marquee-carousel-1 { margin-bottom: 16px; } } @media (min-width: 1600px) { .marquee-carousel.marquee-carousel-1 { margin-bottom: 23px; } } .marquee-carousel.marquee-carousel-2 { margin-left: -300px; } .marquee-items { -webkit-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; -moz-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; -o-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; display: -webkit-box; position: relative; width: 100%; height: 17.5rem; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; } @media (min-width: 768px) { .marquee-items { height: 17.5rem; } } @media (min-width: 1600px) { .marquee-items { height: 17.5rem; } } .marquee-item { -webkit-flex-shrink: 0; -ms-flex-negative: 0; position: relative; flex-shrink: 0; overflow: hidden; width: 28rem; height: 100%; margin-right: 11px; } @media (min-width: 768px) { .marquee-item { width: 20.5rem; margin-right: 16px; } } @media (min-width: 1600px) { .marquee-item { width: 28rem; margin-right: 23px; } } .marquee-item img { width: 100%; height: 100%; } .gradient-bg { position: absolute; z-index: -1; top: 0; left: 0; width: 100vw; height: 100%; } .gradient-bg .gradient { position: absolute; border-radius: 50%; opacity: 0.3; } @media (max-width: 767px) { .gradient-bg .gradient { position: relative; } } .gradient-bg .gradient.is-1 { min-width: 106rem; min-height: 130rem; width: 50vw; height: 100%; top: -52rem; left: -20rem; background: linear-gradient(to right, #fbf3d3, transparent); } @media (max-width: 767px) { .gradient-bg .gradient.is-1 { top: -23%; left: -180%; } } .gradient-bg .gradient.is-2 { min-width: 83rem; min-height: 110rem; width: 50vw; height: 100%; top: -12rem; right: -20rem; background: linear-gradient(to left, #c3eef1, transparent); } @media (max-width: 767px) { .gradient-bg .gradient.is-2 { top: 50%; } } p { margin: 0; } body, p, .text-p1 { font-family: var(--font-grafik); font-size: 1.04rem; font-style: normal; font-weight: 400; line-height: 1.4rem; } @media (max-width: 767px) { body, p, .text-p1 { font-size: 0.83rem; line-height: 1.04rem; } } .p2, .text-p2 { font-family: var(--font-grafik); font-size: 1.56rem; font-style: normal; font-weight: 400; line-height: 2.2rem; } @media (max-width: 767px) { .p2, .text-p2 { font-size: 1rem; line-height: 1.15rem; } } .p-custom { font-family: var(--font-grafik); line-height: 1.6rem; } @media (max-width: 767px) { .p-custom { font-size: 0.83rem; line-height: 1.45rem; } } .text-btn { font-family: var(--font-grafik); font-size: 0.83rem; font-style: normal; font-weight: 400; line-height: 1.3rem; } .caption, .cpt { font-size: 0.94rem; font-style: normal; font-weight: 400; line-height: 1.3rem; } @media (max-width: 767px) { .caption, .cpt { font-size: 0.7rem; line-height: 1.04rem; } } h2, h3, h4, h5, h6 { font-family: var(--font-grafik); } h1, .title-h1 { font-family: var(--font-breeder); font-size: 6.35rem; font-style: normal; font-weight: 400; line-height: 7.08rem; } @media (max-width: 767px) { h1, .title-h1 { font-size: 2.8rem; line-height: 3.125rem; } } h2, .title-h2 { font-family: var(--font-grafik); font-size: 2.86rem; font-style: normal; font-weight: 400; line-height: 3.65rem; } @media (max-width: 767px) { h2, .title-h2 { font-size: 1.4rem; line-height: 1.77rem; } } h3, .title-h3 { font-family: var(--font-grafik); font-size: 2.45rem; font-style: normal; font-weight: 400; line-height: 2.9rem; } @media (max-width: 767px) { h3, .title-h3 { font-size: 1.3rem; line-height: 1.56rem; } } h4, .title-h4 { font-family: var(--font-grafik); font-size: 2.08rem; font-style: normal; font-weight: 400; line-height: 2.76rem; } @media (max-width: 767px) { h4, .title-h4 { font-size: 1.3rem; line-height: 1.7rem; } } h5, .title-h5 { font-family: var(--font-grafik); font-size: 1.3rem; font-style: normal; font-weight: 400; line-height: 1.56rem; } @media (max-width: 767px) { h5, .title-h5 { font-size: 0.94rem; line-height: 1.15rem; } } .title-jumbo { margin-top: -1.5rem; font-family: var(--font-breeder); font-size: 8.35rem; font-style: normal; font-weight: 400; line-height: 7.08rem; } .title-jumbo.is-moved { transform: translateX(-1.8rem); } @media (max-width: 767px) { .title-jumbo { font-size: 2.8rem; line-height: 3.125rem; } } b { font-weight: bold; } ul { list-style-type: none; } ul li { padding-left: 0; } blockquote { border-left: 1px solid var(--primary); padding-left: 2rem; } .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4 { margin-bottom: 2rem; } .rich-text h5, .rich-text h6, .rich-text p, .rich-text blockquote { margin-bottom: 1rem; } .rich-text ul, .rich-text ol { margin-bottom: 1rem; } .rich-text blockquote { padding-left: 1rem; border-left: 2px solid; } strong { font-weight: bold; } .is-bold { font-family: var(--font-grafik-medium); font-weight: 500; } a { cursor: pointer; } .section_global_hero .row-1 { grid-column: 3/span 5; grid-row: 1/1; } @media (max-width: 767px) { .section_global_hero .row-1 { grid-column: 1/span 4; } } .section_global_hero .row-2 { grid-column: 3/span 6; grid-row: 2/2; max-width: 40ch; } @media (max-width: 767px) { .section_global_hero .row-2 { grid-column: 1/span 4; } } .section_global_hero .row-2 .btns_wrap { display: flex; align-items: center; justify-content: start; gap: 0.5rem; } @media (max-width: 767px) { .section_global_hero .row-2 .btns_wrap { flex-direction: column; align-items: start; margin-top: 2rem; gap: 0.5rem; } .section_global_hero .row-2 .btns_wrap a { margin-top: 0rem; } } .section_cover .cover_holder { grid-column: 1/span 12; } .section_cover .cover_holder .home-img_wrap { position: relative; width: 100%; height: 41rem; } @media (max-width: 767px) { .section_cover .cover_holder .home-img_wrap { height: 17.75rem; } } .section_board .section_head { grid-column: 1/span 6; grid-row: 1/1; } @media (max-width: 767px) { .section_board .section_head { grid-column: 1/span 4; } } .section_board .board_row1 { grid-column: 1/span 6; grid-row: 2/2; max-width: 58ch; } @media (max-width: 767px) { .section_board .board_row1 { grid-column: 1/span 4; max-width: 100%; } } .section_board .board_row2 { grid-column: 1/span 12; grid-row: 3/3; } @media (max-width: 767px) { .section_board .board_row2 { grid-column: 1/span 4; } } .section_board .board_row2 .board_grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 7rem; justify-content: start; align-items: start; } @media (max-width: 767px) { .section_board .board_row2 .board_grid { grid-template-columns: 1fr; } } .section_board .board_row2 .board_grid .board_col { display: flex; flex-direction: column; align-items: start; justify-content: start; } .section_board .board_row2 .board_grid .board_col .board_line { width: 100%; height: 1px; background-color: var(--primary); opacity: 0.5; } .section_team .section_head { grid-column: 1/span 4; } @media (max-width: 767px) { .section_team .section_head { grid-column: 1/span 4; } } .section_team .team_left-side { grid-column: 1/span 6; max-width: 52ch; } @media (max-width: 767px) { .section_team .team_left-side { grid-column: 1/span 4; max-width: 100%; } } .section_team .team_right-side { grid-column: 7/span 6; max-width: 53ch; display: flex; flex-direction: column; justify-content: start; align-items: start; } @media (max-width: 767px) { .section_team .team_right-side { grid-column: 1/span 4; max-width: 100%; margin-left: 0; margin-top: 3.6rem; } } .section_team .team_right-side .btn { padding: 0; color: var(--secondary); } .section_team .team_right-side .btn .svg_circle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; } .section_team .team_right-side .richtext p { line-height: 1.6rem; } @media (max-width: 767px) { .section_team .team_right-side .richtext p { font-size: 0.83rem; line-height: 1.45rem; } } .section_team .team_title { margin-bottom: 2rem; } @media (max-width: 767px) { .section_team .col-4-layout { grid-template-columns: 1fr; } } .section_team .col-4-layout.is-2 { margin-top: 2rem; } .section_team .col-4-layout .team_card { display: flex; flex-direction: column; align-items: start; justify-content: start; } .section_team .col-4-layout .team_card .card_img-wrap { background-color: var(--white); filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.03)); width: 100%; position: relative; overflow: hidden; height: 21.2rem; }