/* Document * ========================================================================== */ /** * 1. Add border box sizing in all browsers (opinionated). * 2. Backgrounds do not repeat by default (opinionated). */ *, ::before, ::after { box-sizing: border-box; /* 1 */ background-repeat: no-repeat; /* 2 */ } /** * 1. Add text decoration inheritance in all browsers (opinionated). * 2. Add vertical alignment inheritance in all browsers (opinionated). */ ::before, ::after { text-decoration: inherit; /* 1 */ vertical-align: inherit; /* 2 */ } /** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). * 3. Breaks words to prevent overflow in all browsers (opinionated). * 4. Use a 4-space tab width in all browsers (opinionated). * 5. Remove the grey highlight on links in iOS (opinionated). * 6. Prevent adjustments of font size after orientation changes in iOS. */ :where(:root) { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ overflow-wrap: break-word; /* 3 */ -moz-tab-size: 4; /* 4 */ tab-size: 4; /* 4 */ -webkit-tap-highlight-color: transparent; /* 5 */ -webkit-text-size-adjust: 100%; /* 6 */ } /* Sections * ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ :where(body) { margin: 0; } :where(h1, h2, h3, h4, h5, h6, p) { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ :where(h1) { font-size: 2em; } /* Grouping content * ========================================================================== */ /** * Remove the margin on nested lists in Chrome, Edge, and Safari. */ :where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; } /** * 1. Correct the inheritance of border color in Firefox. * 2. Add the correct box sizing in Firefox. */ :where(hr) { color: inherit; /* 1 */ height: 0; /* 2 */ } /** * Remove the list style on navigation lists in all browsers (opinionated). */ :where(nav) :where(ol, ul) { list-style-type: none; padding: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. * 3. Prevent overflow of the container in all browsers (opinionated). */ :where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ overflow: auto; /* 3 */ } /* Text-level semantics * ========================================================================== */ /** * Add the correct text decoration in Safari. */ :where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ :where(b, strong) { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ :where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ :where(small) { font-size: 80%; } /* Embedded content * ========================================================================== */ /* * Change the alignment on media elements in all browsers (opinionated). */ :where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; } /** * Remove the border on iframes in all browsers (opinionated). */ :where(iframe) { border-style: none; } /** * Change the fill color to match the text color in all browsers (opinionated). */ :where(svg:not([fill])) { fill: currentColor; } /* Tabular data * ========================================================================== */ /** * 1. Collapse border spacing in all browsers (opinionated). * 2. Correct table border color inheritance in all Chrome, Edge, and Safari. * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. */ :where(table) { border-collapse: collapse; /* 1 */ border-color: inherit; /* 2 */ text-indent: 0; /* 3 */ } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ :where(button, input, select) { margin: 0; } /** * Correct the inability to style buttons in iOS and Safari. */ :where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; } /** * Change the inconsistent appearance in all browsers (opinionated). */ :where(fieldset) { border: 1px solid #a0a0a0; } /** * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ :where(progress) { vertical-align: baseline; } /** * 1. Remove the margin in Firefox and Safari. * 3. Change the resize direction in all browsers (opinionated). */ :where(textarea) { margin: 0; /* 1 */ resize: vertical; /* 3 */ } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ :where([type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; } /** * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive * ========================================================================== */ /* * Add the correct styles in Safari. */ :where(dialog) { background-color: white; border: solid; color: black; height: -moz-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: fit-content; } :where(dialog:not([open])) { display: none; } /* * Add the correct display in Safari. */ :where(details > summary:first-of-type) { display: list-item; } /* Accessibility * ========================================================================== */ /** * Change the cursor on busy elements in all browsers (opinionated). */ :where([aria-busy="true" i]) { cursor: progress; } /* * Change the cursor on control elements in all browsers (opinionated). */ :where([aria-controls]) { cursor: pointer; } /* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers (opinionated). */ :where([aria-disabled="true" i], [disabled]) { cursor: not-allowed; } /* * Change the display on visually hidden accessible elements * in all browsers (opinionated). */ :where([aria-hidden="false" i][hidden]) { display: initial; } :where([aria-hidden="false" i][hidden]:not(:focus)) { clip: rect(0, 0, 0, 0); position: absolute; } /*CUSTOM*/ :where(input, select, button, textarea, input::placeholder, select::placeholder, textarea::placeholder) { font: inherit; color: inherit; } :where(ul, ol) { list-style-position: inside; padding: 0; margin: 0; } :where(ol) { list-style-type: decimal; } :where(a) { color: inherit; text-decoration: inherit; } :root, ::before, ::after { --grid-x-size: 12; --grid-gap-x: 1rem; --grid-gap-y: 1rem; --grid-gap-xy: 1rem; --grid-container-max-width: 85rem; --grid-container-padding-x: .9375rem; --gap: 0px; --color-black-rgb: 0, 0, 0; --color-black: rgb(var(--color-black-rgb)); --color-white-rgb: 255, 255, 255; --color-white: rgb(var(--color-white-rgb)); --color-primary: var(--color-white); --color-secondary: var(--color-black); --color-overlay-rgb: var(--color-black-rgb); --color-overlay: var(--color-black); --color-success: #008000; --color-error: #ff0000; --color-info: #0000ff; --color-warning: #ffff00; --scrollbar-track-color: rgba(var(--color-white-rgb), .1); --scrollbar-thumb-color: rgba(var(--color-black-rgb), .5); --scrollbar-width: var(--unit-10); --aspect-ratio-landscape: 16/10; --aspect-ratio-portrait: 2/3; --aspect-ratio-square: 1; --aspect-ratio: var(--aspect-ratio-landscape); --filter-blur: blur(5px); --unit-1: .0625rem; --unit-2: .125rem; --unit-3: .1875rem; --unit-4: .25rem; --unit-5: .3125rem; --unit-6: .375rem; --unit-7: .4375rem; --unit-8: .5rem; --unit-9: .563rem; --unit-10: .625rem; --unit-11: .6875rem; --unit-12: .75rem; --unit-13: .8125rem; --unit-14: .875rem; --unit-15: .9375rem; --unit-16: 1rem; --unit-17: 1.0625rem; --unit-18: 1.125rem; --unit-19: 1.1875rem; --unit-20: 1.25rem; --unit-21: 1.25rem; --unit-22: 1.375rem; --unit-23: 1.4375rem; --unit-24: 1.5rem; --unit-25: 1.5625rem; --unit-26: 1.625rem; --unit-27: 1.6875rem; --unit-28: 1.75rem; --unit-29: 1.8125rem; --unit-30: 1.875rem; --unit-31: 1.9375rem; --unit-32: 2rem; --unit-33: 2.0625rem; --unit-34: 2.125rem; --unit-35: 2.1875rem; --unit-36: 2.25rem; --unit-37: 2.3125rem; --unit-38: 2.375rem; --unit-39: 2.4375rem; --unit-40: 2.5rem; --unit-41: 2.563rem; --unit-42: 2.625rem; --unit-43: 2.688rem; --unit-44: 2.75rem; --unit-45: 2.5rem; --unit-45: 2.8125rem; --unit-48: 3rem; --unit-50: 3.125rem; --unit-60: 3.75rem; --unit-64: 4rem; --unit-70: 4.375rem; --unit-80: 5rem; --unit-90: 5.625rem; --unit-100: 6.25rem; --font-primary: 'Primary'; --font-secondary: 'Secondary'; --font-light: 300; --font-regular: 400; --font-medium: 500; --font-bold: 700; --font-6: var(--unit-6); --font-7: var(--unit-7); --font-8: var(--unit-8); --font-9: var(--unit-9); --font-10: var(--unit-10); --font-11: var(--unit-11); --font-12: var(--unit-12); --font-13: var(--unit-13); --font-14: var(--unit-14); --font-15: var(--unit-15); --font-16: var(--unit-16); --font-17: var(--unit-17); --font-18: var(--unit-18); --font-19: var(--unit-19); --font-20: var(--unit-20); --font-21: var(--unit-21); --font-22: var(--unit-22); --font-23: var(--unit-23); --font-24: var(--unit-24); --font-25: var(--unit-25); --font-26: var(--unit-26); --font-27: var(--unit-27); --font-28: var(--unit-28); --font-29: var(--unit-29); --font-30: var(--unit-30); --font-32: var(--unit-32); --font-34: var(--unit-34); --font-36: var(--unit-36); --font-38: var(--unit-38); --font-40: var(--unit-40); --font-45: var(--unit-45); --font-50: var(--unit-50); --font-60: var(--unit-60); --font-70: var(--unit-70); --font-80: var(--unit-80); --font-90: var(--unit-90); --font-100: var(--unit-100); --border-radius-small: var(--unit-5); --border-radius-medium: var(--unit-15); --border-radius-large: var(--unit-20); --transition-delay: 0ms; --transition-duration: 300ms; --transition-timing-function: ease-in-out; --transition-property: all; --transition: var(--transition-property) var(--transition-duration) var(--transition-timing-function) var(--transition-delay); --zoom-in: scale(1.25); } /*GRID*/ .grid-container { padding-right: var(--grid-container-padding-x, .9375rem); padding-left: var(--grid-container-padding-x, .9375rem); max-width: var(--grid-container-max-width, 85rem); margin: 0 auto; } .grid-container.full { max-width: 100%; padding-left: 0; padding-right: 0; } .grid-container.fluid { max-width: 100%; } .grid-x { flex-flow: row wrap; } .grid-y { flex-flow: column nowrap; } .grid-x, .grid-y { --c-gap: var(--column-gap, var(--gap)); --r-gap: var(--row-gap, var(--gap)); --cols: var(--columns); display: flex; column-gap: var(--c-gap); row-gap: var(--r-gap); } .grid-x:where([style*="--columns"]) .grid-x, .grid-y:where([style*="--columns"]) .grid-y { --columns: initial; } .grid-x:where([style*="--gap"], [class*="gap"]) .grid-x, .grid-y:where([style*="--gap"], [class*="gap"]) .grid-x, .grid-x:where([style*="--gap"], [class*="gap"]) .grid-y, .grid-y:where([style*="--gap"], [class*="gap"]) .grid-y { --gap: 0px; } .grid-x:where([style*="--column-gap"]) .grid-x, .grid-y:where([style*="--column-gap"]) .grid-x, .grid-x:where([style*="--column-gap"]) .grid-y, .grid-y:where([style*="--column-gap"]) .grid-y { --column-gap: 0px; } .grid-x:where([style*="--row-gap"]) .grid-x, .grid-y:where([style*="--row-gap"]) .grid-x, .grid-x:where([style*="--row-gap"]) .grid-y, .grid-y:where([style*="--row-gap"]) .grid-y { --row-gap: 0px } /* .grid-x .grid-x:not([style*="gap"]):not([class*="gap"]):not(.grid-gap-xy), .grid-y .grid-y:not([style*="gap"]):not([class*="gap"]):not(.grid-gap-xy) { --gap: 0px; --column-gap: 0px; --row-gap: 0px } */ .grid-x>.cell:not(.flex-grow), .grid-y>.cell:not(.flex-grow) { flex-grow: 0; } .grid-x>.cell, .grid-y>.cell { /* flex-shrink: 0; */ flex-basis: auto; min-height: 0px; min-width: 0px; width: 100%; max-width: 100%; } .grid-x[style*="--columns"]>.cell { width: calc((100% / var(--cols)) - ((var(--c-gap)*(var(--cols) - 1)) / var(--cols))); } .grid-y[style*="--columns"]>.cell { height: calc((100% / var(--cols)) - ((var(--c-gap)*(var(--cols) - 1)) / var(--cols))); } .grid-x>.cell[style*="--column"], .grid-y>.cell[style*="--column"] { --col: var(--column); --cols: calc(var(--grid-x-size)/var(--col)); } .grid-x>.cell[style*="--column"] { width: calc((100% / (var(--grid-x-size) / var(--col))) - (var(--c-gap) - var(--c-gap) / var(--cols))); } .grid-y>.cell[style*="--column"] { height: calc((100% / (var(--grid-x-size) / var(--col))) - (var(--c-gap) - var(--c-gap) / var(--cols))); } .grid-x.grid-gap-x { --c-gap: var(--grid-gap-x); } .grid-x.grid-gap-y, .grid-y.grid-gap-y { --r-gap: var(--grid-gap-y); } .grid-x.grid-gap-xy { --gap: var(--grid-gap-xy); } .grid-x>.cell.shrink { width: auto; } .grid-y>.cell.shrink { height: auto; } .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-wrap { flex-wrap: wrap; } .flex-no-wrap { flex-wrap: nowrap; } .flex-column { flex-direction: column; } .flex-column.y-center{ justify-content: center; align-items: initial; } .flex-column.x-center { align-items: center; justify-content: initial; } .flex-column.x-right { align-items: flex-end; justify-content: initial; } .flex-column.y-bottom { justify-content: flex-end; align-items: initial; } .flex-grow { flex-grow: 1; } /*ALIGNMENT*/ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .x-left { justify-content: flex-start; } .x-center { justify-content: center; } .x-right { justify-content: flex-end; } .y-top { align-items: flex-start; } .y-center { align-items: center; } .y-bottom { align-items: flex-end; } .xy-center { justify-content: center; align-items: center; align-content: center; } .align-justify { justify-content: space-between; } .align-spaced { justify-content: space-around; } /*END ALIGNMENT*/ /*TO DO OFFSET .grid-x>.cell[style*="--offset"] { margin-left: calc(((100% / (var(--grid-x-size) / var(--offset)))) + (var(--c-gap) / 3)); padding-left: calc(var(--c-gap) / 3); } */ /*END TO DO OFFSET*/ /*SMALL ONLY*/ @media (max-width: 63.9375rem) { .grid-container.small-full { max-width: 100%; padding-left: 0; padding-right: 0; } .grid-container.small-fluid { max-width: 100%; } .grid-x:where([style*="--small-columns"]) .grid-x, .grid-y:where([style*="--small-columns"]) .grid-y { --small-columns: initial; } .grid-x, .grid-y { --c-gap: var(--small-column-gap, var(--small-gap, var(--column-gap, var(--gap)))); --r-gap: var(--small-row-gap, var(--small-gap, var(--row-gap, var(--gap)))); --cols: var(--small-columns, var(--columns)); } .grid-x[style*="--small-columns"]>.cell { width: calc((100% / var(--cols)) - ((var(--c-gap)*(var(--cols) - 1)) / var(--cols))); } .grid-y[style*="--small-columns"]>.cell { height: calc((100% / var(--cols)) - ((var(--c-gap)*(var(--cols) - 1)) / var(--cols))); } .grid-x>.cell[style*="--small-column"] { --col: var(--small-column, var(--column)); --cols: calc(var(--grid-x-size)/var(--col)); } .grid-x>.cell[style*="--small-column"] { width: calc((100% / (var(--grid-x-size) / var(--col))) - (var(--c-gap) - var(--c-gap) / var(--cols))); } .grid-y>.cell[style*="--small-column"] { height: calc((100% / (var(--grid-x-size) / var(--col))) - (var(--c-gap) - var(--c-gap) / var(--cols))); } .grid-x.small-grid-gap-x { --c-gap: var(--grid-gap-x); } .grid-x.small-grid-gap-y, .grid-y.small-grid-gap-y { --r-gap: var(--grid-gap-y); } .grid-x.small-grid-gap-xy, .grid-y.small-grid-gap-xy { --gap: var(--grid-gap-xy); } .grid-x>.cell.small-shrink { width: auto; } .grid-y>.cell.small-shrink { height: auto; } .small-flex { display: flex; } .small-inline-flex { display: inline-flex; } .small-flex-wrap { flex-wrap: wrap; } .small-flex-no-wrap { flex-wrap: nowrap; } .small-flex-column { flex-direction: column; } .small-flex-column.y-center, .small-flex-column.small-y-center { justify-content: center; align-items: initial; } .small-flex-column.x-center, .small-flex-column.small-x-center { align-items: center; justify-content: initial; } .small-flex-column.x-right, .small-flex-column.small-x-right { align-items: flex-end; justify-content: initial; } .small-flex-column.y-bottom, .small-flex-column.small-y-bottom { justify-content: flex-end; align-items: initial; } /*ALIGNMENT*/ .small-text-center { text-align: center; } .small-text-left { text-align: left; } .small-text-right { text-align: right; } .small-x-left { justify-content: flex-start; } .small-x-center { justify-content: center; } .small-x-right { justify-content: flex-end; } .small-y-top { align-items: flex-start; } .small-y-center { align-items: center; } .small-y-bottom { align-items: flex-end; } .small-xy-center { justify-content: center; align-items: center; align-content: center; } .small-align-justify { justify-content: space-between; } .small-align-spaced { justify-content: space-around; } .small-flex-grow { flex-grow: 1; } /*END ALIGNMENT*/ } /*END SMALL ONLY*/ /*LARGE ONLY*/ @media (min-width: 64rem) { .grid-container.large-full { max-width: 100%; padding-left: 0; padding-right: 0; } .grid-container.large-fluid { max-width: 100%; } .grid-x:where([style*="--large-columns"]) .grid-x, .grid-y:where([style*="--large-columns"]) .grid-y { --large-columns: initial; } .grid-x, .grid-y { --c-gap: var(--large-column-gap, var(--large-gap, var(--column-gap, var(--gap)))); --r-gap: var(--large-row-gap, var(--large-gap, var(--row-gap, var(--gap)))); --cols: var(--large-columns, var(--columns)); } .grid-x[style*="--large-columns"]>.cell { width: calc((100% / var(--cols)) - ((var(--c-gap)*(var(--cols) - 1)) / var(--cols))); } .grid-y[style*="--large-columns"]>.cell { height: calc((100% / var(--cols)) - ((var(--c-gap)*(var(--cols) - 1)) / var(--cols))); } .grid-x>.cell[style*="--large-column"] { --col: var(--large-column, var(--column)); --cols: calc(var(--grid-x-size)/var(--col)); } .grid-x>.cell[style*="--large-column"] { width: calc((100% / (var(--grid-x-size) / var(--col))) - (var(--c-gap) - var(--c-gap) / var(--cols))); } .grid-y>.cell[style*="--large-column"] { height: calc((100% / (var(--grid-x-size) / var(--col))) - (var(--c-gap) - var(--c-gap) / var(--cols))); } .grid-x.large-grid-gap-x, .grid-y.large-grid-gap-x { --c-gap: var(--grid-gap-x); } .grid-x.large-grid-gap-y, .grid-y.large-grid-gap-y { --r-gap: var(--grid-gap-y); } .grid-x.large-grid-gap-xy, .grid-y.large-grid-gap-xy { --gap: var(--grid-gap-xy); } .grid-x>.cell.large-shrink { width: auto; } .grid-y>.cell.large-shrink { height: auto; } .large-flex { display: flex; } .large-inline-flex { display: inline-flex; } .large-flex-column { flex-direction: column; } .large-flex-wrap { flex-wrap: wrap; } .large-flex-no-wrap { flex-wrap: nowrap; } .large-flex-column { flex-direction: column; } .large-flex-column.y-center, .large-flex-column.large-y-center { justify-content: center; align-items: initial; } .large-flex-column.x-center, .large-flex-column.large-x-center { align-items: center; justify-content: initial; } .large-flex-column.x-right, .large-flex-column.large-x-right { align-items: flex-end; justify-content: initial; } .large-flex-column.y-bottom, .large-flex-column.large-y-bottom { justify-content: flex-end; align-items: initial; } /*ALIGNMENT*/ .large-text-center { text-align: center; } .large-text-left { text-align: left; } .large-text-right { text-align: right; } .large-x-left { justify-content: flex-start; } .large-x-center { justify-content: center; } .large-x-right { justify-content: flex-end; } .large-y-top { align-items: flex-start; } .large-y-center { align-items: center; } .large-y-bottom { align-items: flex-end; } .large-xy-center { justify-content: center; align-items: center; align-content: center; } .large-align-justify { justify-content: space-between; } .large-align-spaced { justify-content: space-around; } .large-flex-grow { flex-grow: 1; } /*END ALIGNMENT*/ } /*END LARGE ONLY*/ /*END GRID*/ /*UTILITES*/ /*IMAGES*/ /*GAP*/ /*FONTS*/ /*MARGINS*/ /*BORDER RADIUS*/ /*ORDER*/ /*UTILITES*/ .transition, .transition::before, .transition::after, .transition-children * { transition: var(--transition); } .full-height { height: 100%; } .full-width { width: 100%; } .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .positin-sticky { position: sticky; } .position-top-left { top: 0; left: 0; } .position-top-center { top: 0; left: 50%; transform: translateX(-50%); } .position-top-right { top: 0; right: 0; } .position-bottomargin-left { bottom: 0; left: 0; } .position-bottomargin-center { bottom: 0; left: 50%; transform: translateX(-50%); } .position-bottomargin-right { bottom: 0; right: 0; } .position-middle-left { left: 0; top: 50%; transform: translateY(-50%); } .position-middle-center { left: 50%; top: 50%; transform: translate(-50%, -50%); } .position-middle-right { right: 0; top: 50%; transform: translateY(-50%); } .overflow-hidden { overflow: hidden; isolation: isolate; } .overflow-x-hidden { overflow-x: hidden; isolation: isolate; } .overflow-y-hidden { overflow-y: hidden; isolation: isolate; } .overflow-y-scroll { overflow-y: auto; } .overflow-x-scroll { overflow-x: auto; } .hide { display: none !important; } .isolation-isolate { isolation: isolate; } .z-index-negative-1 { z-index: -1; } .z-index-0 { z-index: 0; } .z-index-1 { z-index: 1; } .z-index-2 { z-index: 2; } .z-index-9 { z-index: 9; } .z-index-99 { z-index: 99; } .z-index-999 { z-index: 999; } .z-index-9999 { z-index: 9999; } .z-index-99999 { z-index: 99999; } .cursor-pointer { cursor: pointer; } /*COLOR*/ .color-primary { color: var(--color-primary) } .color-secondary { color: var(--color-secondary) } .color-white { color: var(--color-white) } .color-black { color: var(--color-black) } /*END COLOR*/ /*IMAGES*/ img { max-width: 100%; } .image-container { display: block; position: relative; padding-bottom: calc(100% / (var(--aspect-ratio))); overflow: hidden; isolation: isolate; } .image-container.landscape { padding-bottom: calc(100% / (var(--aspect-ratio-landscape))); } .image-container.portrait { padding-bottom: calc(100% / (var(--aspect-ratio-portrait))); } .image-container.square { padding-bottom: calc(100% / (var(--aspect-ratio-square))); } .image-container>img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .image-container>img.contain { object-fit: contain; } /*END IMAGES*/ /*GAP*/ .gap-x { column-gap: var(--grid-gap-x); } .gap-y { row-gap: var(--grid-gap-y); } .gap-xy { gap: var(--grid-gap-xy); } .gap-5:not(.grid-x):not(.grid-y) { gap: var(--unit-5); } .gap-5.grid-x, .gap-5.grid-y { --gap: var(--unit-5); } .gap-10:not(.grid-x):not(.grid-y) { gap: var(--unit-10); } .gap-10.grid-x, .gap-10.grid-y { --gap: var(--unit-10); } .gap-15:not(.grid-x):not(.grid-y) { gap: var(--unit-15); } .gap-15.grid-x, .gap-15.grid-y { --gap: var(--unit-15); } .gap-20:not(.grid-x):not(.grid-y) { gap: var(--unit-20); } .gap-20.grid-x, .gap-20.grid-y { --gap: var(--unit-20); } .gap-25:not(.grid-x):not(.grid-y) { gap: var(--unit-25); } .gap-25.grid-x, .gap-25.grid-y { --gap: var(--unit-25); } .gap-30:not(.grid-x):not(.grid-y) { gap: var(--unit-30); } .gap-30.grid-x, .gap-30.grid-y { --gap: var(--unit-30); } .gap-35:not(.grid-x):not(.grid-y) { gap: var(--unit-35); } .gap-35.grid-x, .gap-35.grid-y { --gap: var(--unit-35); } .gap-40:not(.grid-x):not(.grid-y) { gap: var(--unit-40); } .gap-40.grid-x, .gap-40.grid-y { --gap: var(--unit-40); } .gap-45:not(.grid-x):not(.grid-y) { gap: var(--unit-45); } .gap-45.grid-x, .gap-45.grid-y { --gap: var(--unit-45); } .gap-50:not(.grid-x):not(.grid-y) { gap: var(--unit-50); } .gap-50.grid-x, .gap-50.grid-y { --gap: var(--unit-50); } /*END GAP*/ /*FONTS*/ .font-light { font-weight: var(--font-light); } .font-regular { font-weight: var(--font-regular); } .font-medium { font-weight: var(--font-medium); } .font-bold { font-weight: var(--font-bold); } .font-italic { font-style: italic; } .font-8, .font-8>* { font-size: var(--font-8); } .font-9, .font-9>* { font-size: var(--font-9); } .font-10, .font-10>* { font-size: var(--font-10); } .font-11, .font-11>* { font-size: var(--font-11); } .font-12, .font-12>* { font-size: var(--font-12); } .font-13, .font-13>* { font-size: var(--font-13); } .font-14, .font-14>* { font-size: var(--font-14); } .font-15, .font-15>* { font-size: var(--font-15); } .font-16, .font-16>* { font-size: var(--font-16); } .font-17, .font-17>* { font-size: var(--font-17); } .font-18, .font-18>* { font-size: var(--font-18); } .font-19, .font-19>* { font-size: var(--font-19); } .font-20, .font-20>* { font-size: var(--font-20); } .font-21, .font-21>* { font-size: var(--font-21); } .font-22, .font-22>* { font-size: var(--font-22); } .font-23, .font-23>* { font-size: var(--font-23); } .font-24, .font-24>* { font-size: var(--font-24); } .font-25, .font-25>* { font-size: var(--font-25); } .font-26, .font-26>* { font-size: var(--font-26); } .font-27, .font-27>* { font-size: var(--font-27); } .font-28, .font-28>* { font-size: var(--font-28); } .font-28, .font-28>* { font-size: var(--font-28); } .font-29, .font-29>* { font-size: var(--font-29); } .font-30, .font-30>* { font-size: var(--font-30); } .font-32, .font-32>* { font-size: var(--font-32); } .font-34, .font-34>* { font-size: var(--font-34); } .font-36, .font-36>* { font-size: var(--font-36); } .font-38, .font-38>* { font-size: var(--font-38); } .font-40, .font-40>* { font-size: var(--font-40); } .font-45, .font-45>* { font-size: var(--font-45); } .font-50, .font-50>* { font-size: var(--font-50); } .font-60, .font-60>* { font-size: var(--font-60); } .font-70, .font-70>* { font-size: var(--font-70); } .font-80, .font-80>* { font-size: var(--font-80); } .font-90, .font-90>* { font-size: var(--font-90); } .font-100, .font-100>* { font-size: var(--font-100); } /*END FONTS*/ /*MARGINS*/ .margin-children-5>*+* { margin-top: var(--unit-5); } .margin-children-10>*+* { margin-top: var(--unit-10); } .margin-children-12>*+* { margin-top: var(--unit-12); } .margin-children-14>*+* { margin-top: var(--unit-14); } .margin-children-15>*+* { margin-top: var(--unit-15); } .margin-children-16>*+* { margin-top: var(--unit-16); } .margin-children-18>*+* { margin-top: var(--unit-18); } .margin-children-20>*+* { margin-top: var(--unit-20); } .margin-children-25>*+* { margin-top: var(--unit-25); } .margin-children-30>*+* { margin-top: var(--unit-30); } .margin-children-35>*+* { margin-top: var(--unit-35); } .margin-children-40>*+* { margin-top: var(--unit-40); } .margin-children-50>*+* { margin-top: var(--unit-50); } .margin-children-60>*+* { margin-top: var(--unit-60); } .margin-children-70>*+* { margin-top: var(--unit-70); } .margin-children-80>*+* { margin-top: var(--unit-80); } .margin-children-90>*+* { margin-top: var(--unit-90); } .margin-children-100>*+* { margin-top: var(--unit-100); } /*END MARGINS*/ /*BORDER RADIUS*/ .border-radius-5 { border-radius: var(--unit-5); } .border-radius-15 { border-radius: var(--unit-15); } .border-radius-20 { border-radius: var(--unit-20); } .border-radius-25 { border-radius: var(--unit-25); } .border-radius-30 { border-radius: var(--unit-30); } .border-radius-35 { border-radius: var(--unit-35); } .border-radius-40 { border-radius: var(--unit-40); } .border-radius-45 { border-radius: var(--unit-45); } /*END BORDER RADIUS*/ /*PADDING*/ .padding-8 { padding: var(--unit-8); } .padding-10 { padding: var(--unit-10); } .padding-15 { padding: var(--unit-15); } .padding-16 { padding: var(--unit-16); } .padding-20 { padding: var(--unit-20); } .padding-25 { padding: var(--unit-25); } .padding-30 { padding: var(--unit-30); } .padding-32 { padding: var(--unit-32); } .padding-35 { padding: var(--unit-35); } .padding-40 { padding: var(--unit-40); } .padding-45 { padding: var(--unit-45); } .padding-48 { padding: var(--unit-48); } .padding-50 { padding: var(--unit-50); } .padding-60 { padding: var(--unit-60); } .padding-64 { padding: var(--unit-64); } /*END PADDING*/ /*SMALL ONLY*/ @media (max-width: 63.9375rem) { .show-for-large { display: none !important; } .small-full-height { height: 100%; } .small-full-width { width: 100%; } /*IMAGES*/ .image-container.small-landscape { padding-bottom: calc(100% / (var(--aspect-ratio-landscape))); } .image-container.small-portrait { padding-bottom: calc(100% / (var(--aspect-ratio-portrait))); } .image-container.small-square { padding-bottom: calc(100% / (var(--aspect-ratio-square))); } .image-container>img.small-contain { object-fit: contain; } /*END IMAGES*/ /*GAP*/ .small-gap-x { column-gap: var(--grid-gap-x); } .small-gap-y { row-gap: var(--grid-gap-y); } .small-gap-xy { gap: var(--grid-gap-xy); } .small-gap-5:not(.grid-x):not(.grid-y) { gap: var(--unit-5); } .small-gap-5.grid-x, .small-gap-5.grid-y { --gap: var(--unit-5); } .small-gap-10:not(.grid-x):not(.grid-y) { gap: var(--unit-10); } .small-gap-10.grid-x, .small-gap-10.grid-y { --gap: var(--unit-10); } .small-gap-15:not(.grid-x):not(.grid-y) { gap: var(--unit-15); } .small-gap-15.grid-x, .small-gap-15.grid-y { --gap: var(--unit-15); } .small-gap-20:not(.grid-x):not(.grid-y) { gap: var(--unit-20); } .small-gap-20.grid-x, .small-gap-20.grid-y { --gap: var(--unit-20); } .small-gap-25:not(.grid-x):not(.grid-y) { gap: var(--unit-25); } .small-gap-25.grid-x, .small-gap-25.grid-y { --gap: var(--unit-25); } .small-gap-30:not(.grid-x):not(.grid-y) { gap: var(--unit-30); } .small-gap-30.grid-x, .small-gap-30.grid-y { --gap: var(--unit-30); } .small-gap-35:not(.grid-x):not(.grid-y) { gap: var(--unit-35); } .small-gap-35.grid-x, .small-gap-35.grid-y { --gap: var(--unit-35); } .small-gap-40:not(.grid-x):not(.grid-y) { gap: var(--unit-40); } .small-gap-40.grid-x, .small-gap-40.grid-y { --gap: var(--unit-40); } .small-gap-45:not(.grid-x):not(.grid-y) { gap: var(--unit-45); } .small-gap-45.grid-x, .small-gap-45.grid-y { --gap: var(--unit-45); } .small-gap-50:not(.grid-x):not(.grid-y) { gap: var(--unit-50); } .small-gap-50.grid-x, .small-gap-50.grid-y { --gap: var(--unit-50); } /*END GAP*/ /*FONTS*/ .small-font-light { font-weight: var(--font-light); } .small-font-regular { font-weight: var(--font-regular); } .small-font-medium { font-weight: var(--font-medium); } .small-font-bold { font-weight: var(--font-bold); } .small-font-italic { font-style: italic; } .small-font-8, .small-font-8>* { font-size: var(--font-8); } .small-font-9, .small-font-9>* { font-size: var(--font-9); } .small-font-10, .small-font-10>* { font-size: var(--font-10); } .small-font-11, .small-font-11>* { font-size: var(--font-11); } .small-font-12, .small-font-12>* { font-size: var(--font-12); } .small-font-13, .small-font-13>* { font-size: var(--font-13); } .small-font-14, .small-font-14>* { font-size: var(--font-14); } .small-font-15, .small-font-15>* { font-size: var(--font-15); } .small-font-16, .small-font-16>* { font-size: var(--font-16); } .small-font-17, .small-font-17>* { font-size: var(--font-17); } .small-font-18, .small-font-18>* { font-size: var(--font-18); } .small-font-19, .small-font-19>* { font-size: var(--font-19); } .small-font-20, .small-font-20>* { font-size: var(--font-20); } .small-font-21, .small-font-21>* { font-size: var(--font-21); } .small-font-22, .small-font-22>* { font-size: var(--font-22); } .small-font-23, .small-font-23>* { font-size: var(--font-23); } .small-font-24, .small-font-24>* { font-size: var(--font-24); } .small-font-25, .small-font-25>* { font-size: var(--font-25); } .small-font-26, .small-font-26>* { font-size: var(--font-26); } .small-font-27, .small-font-27>* { font-size: var(--font-27); } .small-font-28, .small-font-28>* { font-size: var(--font-28); } .small-font-28, .small-font-28>* { font-size: var(--font-28); } .small-font-29, .small-font-29>* { font-size: var(--font-29); } .small-font-30, .small-font-30>* { font-size: var(--font-30); } .small-font-32, .small-font-32>* { font-size: var(--font-32); } .small-font-34, .small-font-34>* { font-size: var(--font-34); } .small-font-36, .small-font-36>* { font-size: var(--font-36); } .small-font-38, .small-font-38>* { font-size: var(--font-38); } .small-font-40, .small-font-40>* { font-size: var(--font-40); } .small-font-45, .small-font-45>* { font-size: var(--font-45); } .small-font-50, .small-font-50>* { font-size: var(--font-50); } .small-font-60, .small-font-60>* { font-size: var(--font-60); } .small-font-70, .small-font-70>* { font-size: var(--font-70); } .small-font-80, .small-font-80>* { font-size: var(--font-80); } .small-font-90, .small-font-90>* { font-size: var(--font-90); } .small-font-100, .small-font-100>* { font-size: var(--font-100); } /*END FONTS*/ /*MARGINS*/ .small-margin-children-5>*+* { margin-top: var(--unit-5); } .small-margin-children-10>*+* { margin-top: var(--unit-10); } .small-margin-children-12>*+* { margin-top: var(--unit-12); } .small-margin-children-14>*+* { margin-top: var(--unit-14); } .small-margin-children-15>*+* { margin-top: var(--unit-15); } .small-margin-children-16>*+* { margin-top: var(--unit-16); } .small-margin-children-18>*+* { margin-top: var(--unit-18); } .small-margin-children-20>*+* { margin-top: var(--unit-20); } .small-margin-children-25>*+* { margin-top: var(--unit-25); } .small-margin-children-30>*+* { margin-top: var(--unit-30); } .small-margin-children-35>*+* { margin-top: var(--unit-35); } .small-margin-children-40>*+* { margin-top: var(--unit-40); } .small-margin-children-50>*+* { margin-top: var(--unit-50); } .small-margin-children-60>*+* { margin-top: var(--unit-60); } .small-margin-children-70>*+* { margin-top: var(--unit-70); } .small-margin-children-80>*+* { margin-top: var(--unit-80); } .small-margin-children-90>*+* { margin-top: var(--unit-90); } .small-margin-children-100>*+* { margin-top: var(--unit-100); } /*END MARGINS*/ /*ORDER*/ .small-order-1 { order: 1; } .small-order-2 { order: 2; } .small-order-3 { order: 3; } .small-order-4 { order: 4; } .small-order-5 { order: 5; } .small-order-6 { order: 6; } /*END ORDER*/ /*BORDER RADIUS*/ .small-border-radius-5 { border-radius: var(--unit-5); } .small-border-radius-15 { border-radius: var(--unit-15); } .small-border-radius-20 { border-radius: var(--unit-20); } .small-border-radius-25 { border-radius: var(--unit-25); } .small-border-radius-30 { border-radius: var(--unit-30); } .small-border-radius-35 { border-radius: var(--unit-35); } .small-border-radius-40 { border-radius: var(--unit-40); } .small-border-radius-45 { border-radius: var(--unit-45); } /*END BORDER RADIUS*/ /*PADDING*/ .small-padding-8 { padding: var(--unit-8); } .small-padding-10 { padding: var(--unit-10); } .small-padding-15 { padding: var(--unit-15); } .small-padding-16 { padding: var(--unit-16); } .small-padding-20 { padding: var(--unit-20); } .small-padding-25 { padding: var(--unit-25); } .small-padding-30 { padding: var(--unit-30); } .small-padding-32 { padding: var(--unit-32); } .small-padding-35 { padding: var(--unit-35); } .small-padding-40 { padding: var(--unit-40); } .small-padding-45 { padding: var(--unit-45); } .small-padding-48 { padding: var(--unit-48); } .small-padding-50 { padding: var(--unit-50); } .small-padding-60 { padding: var(--unit-60); } .small-padding-64 { padding: var(--unit-64); } /*END PADDING*/ } /*END SMALL ONLY*/ /*LARGE ONLY*/ @media (min-width: 64rem) { .hide-for-large, .show-for-small { display: none !important; } .large-full-height { height: 100%; } .large-full-width { width: 100%; } /*IMAGES*/ .image-container.large-landscape { padding-bottom: calc(100% / (var(--aspect-ratio-landscape))); } .image-container.large-portrait { padding-bottom: calc(100% / (var(--aspect-ratio-portrait))); } .image-container.large-square { padding-bottom: calc(100% / (var(--aspect-ratio-square))); } .image-container>img.large-contain { object-fit: contain; } /*END IMAGES*/ /*GAP*/ .large-gap-x { column-gap: var(--grid-gap-x); } .large-gap-y { row-gap: var(--grid-gap-y); } .large-gap-xy { gap: var(--grid-gap-xy); } .large-gap-5:not(.grid-x):not(.grid-y) { gap: var(--unit-5); } .large-gap-5.grid-x, .large-gap-5.grid-y { --gap: var(--unit-5); } .large-gap-10:not(.grid-x):not(.grid-y) { gap: var(--unit-10); } .large-gap-10.grid-x, .large-gap-10.grid-y { --gap: var(--unit-10); } .large-gap-15:not(.grid-x):not(.grid-y) { gap: var(--unit-15); } .large-gap-15.grid-x, .large-gap-15.grid-y { --gap: var(--unit-15); } .large-gap-20:not(.grid-x):not(.grid-y) { gap: var(--unit-20); } .large-gap-20.grid-x, .large-gap-20.grid-y { --gap: var(--unit-20); } .large-gap-25:not(.grid-x):not(.grid-y) { gap: var(--unit-25); } .large-gap-25.grid-x, .large-gap-25.grid-y { --gap: var(--unit-25); } .large-gap-30:not(.grid-x):not(.grid-y) { gap: var(--unit-30); } .large-gap-30.grid-x, .large-gap-30.grid-y { --gap: var(--unit-30); } .large-gap-35:not(.grid-x):not(.grid-y) { gap: var(--unit-35); } .large-gap-35.grid-x, .large-gap-35.grid-y { --gap: var(--unit-35); } .large-gap-40:not(.grid-x):not(.grid-y) { gap: var(--unit-40); } .large-gap-40.grid-x, .large-gap-40.grid-y { --gap: var(--unit-40); } .large-gap-45:not(.grid-x):not(.grid-y) { gap: var(--unit-45); } .large-gap-45.grid-x, .large-gap-45.grid-y { --gap: var(--unit-45); } .large-gap-50:not(.grid-x):not(.grid-y) { gap: var(--unit-50); } .large-gap-50.grid-x, .large-gap-50.grid-y { --gap: var(--unit-50); } /*END GAP*/ /*FONTS*/ .large-font-light { font-weight: var(--font-light); } .large-font-regular { font-weight: var(--font-regular); } .large-font-medium { font-weight: var(--font-medium); } .large-font-bold { font-weight: var(--font-bold); } .large-font-italic { font-style: italic; } .large-font-8, .large-font-8>* { font-size: var(--font-8); } .large-font-9, .large-font-9>* { font-size: var(--font-9); } .large-font-10, .large-font-10>* { font-size: var(--font-10); } .large-font-11, .large-font-11>* { font-size: var(--font-11); } .large-font-12, .large-font-12>* { font-size: var(--font-12); } .large-font-13, .large-font-13>* { font-size: var(--font-13); } .large-font-14, .large-font-14>* { font-size: var(--font-14); } .large-font-15, .large-font-15>* { font-size: var(--font-15); } .large-font-16, .large-font-16>* { font-size: var(--font-16); } .large-font-17, .large-font-17>* { font-size: var(--font-17); } .large-font-18, .large-font-18>* { font-size: var(--font-18); } .large-font-19, .large-font-19>* { font-size: var(--font-19); } .large-font-20, .large-font-20>* { font-size: var(--font-20); } .large-font-21, .large-font-21>* { font-size: var(--font-21); } .large-font-22, .large-font-22>* { font-size: var(--font-22); } .large-font-23, .large-font-23>* { font-size: var(--font-23); } .large-font-24, .large-font-24>* { font-size: var(--font-24); } .large-font-25, .large-font-25>* { font-size: var(--font-25); } .large-font-26, .large-font-26>* { font-size: var(--font-26); } .large-font-27, .large-font-27>* { font-size: var(--font-27); } .large-font-28, .large-font-28>* { font-size: var(--font-28); } .large-font-28, .large-font-28>* { font-size: var(--font-28); } .large-font-29, .large-font-29>* { font-size: var(--font-29); } .large-font-30, .large-font-30>* { font-size: var(--font-30); } .large-font-32, .large-font-32>* { font-size: var(--font-32); } .large-font-34, .large-font-34>* { font-size: var(--font-34); } .large-font-36, .large-font-36>* { font-size: var(--font-36); } .large-font-38, .large-font-38>* { font-size: var(--font-38); } .large-font-40, .large-font-40>* { font-size: var(--font-40); } .large-font-45, .large-font-45>* { font-size: var(--font-45); } .large-font-50, .large-font-50>* { font-size: var(--font-50); } .large-font-60, .large-font-60>* { font-size: var(--font-60); } .large-font-70, .large-font-70>* { font-size: var(--font-70); } .large-font-80, .large-font-80>* { font-size: var(--font-80); } .large-font-90, .large-font-90>* { font-size: var(--font-90); } .large-font-100, .large-font-100>* { font-size: var(--font-100); } /*END FONTS*/ /*MARGINS*/ .large-margin-children-5>*+* { margin-top: var(--unit-5); } .large-margin-children-10>*+* { margin-top: var(--unit-10); } .large-margin-children-12>*+* { margin-top: var(--unit-12); } .large-margin-children-14>*+* { margin-top: var(--unit-14); } .large-margin-children-15>*+* { margin-top: var(--unit-15); } .large-margin-children-16>*+* { margin-top: var(--unit-16); } .large-margin-children-18>*+* { margin-top: var(--unit-18); } .large-margin-children-20>*+* { margin-top: var(--unit-20); } .large-margin-children-25>*+* { margin-top: var(--unit-25); } .large-margin-children-30>*+* { margin-top: var(--unit-30); } .large-margin-children-35>*+* { margin-top: var(--unit-35); } .large-margin-children-40>*+* { margin-top: var(--unit-40); } .large-margin-children-50>*+* { margin-top: var(--unit-50); } .large-margin-children-60>*+* { margin-top: var(--unit-60); } .large-margin-children-70>*+* { margin-top: var(--unit-70); } .large-margin-children-80>*+* { margin-top: var(--unit-80); } .large-margin-children-90>*+* { margin-top: var(--unit-90); } .large-margin-children-100>*+* { margin-top: var(--unit-100); } /*END MARGINS*/ /*ORDER*/ .large-order-1 { order: 1; } .large-order-2 { order: 2; } .large-order-3 { order: 3; } .large-order-4 { order: 4; } .large-order-5 { order: 5; } .large-order-6 { order: 6; } /*END ORDER*/ /*BORDER RADIUS*/ .large-border-radius-5 { border-radius: var(--unit-5); } .large-border-radius-15 { border-radius: var(--unit-15); } .large-border-radius-20 { border-radius: var(--unit-20); } .large-border-radius-25 { border-radius: var(--unit-25); } .large-border-radius-30 { border-radius: var(--unit-30); } .large-border-radius-35 { border-radius: var(--unit-35); } .large-border-radius-40 { border-radius: var(--unit-40); } .large-border-radius-45 { border-radius: var(--unit-45); } /*END BORDER RADIUS*/ /*PADDING*/ .large-padding-8 { padding: var(--unit-8); } .large-padding-10 { padding: var(--unit-10); } .large-padding-15 { padding: var(--unit-15); } .large-padding-16 { padding: var(--unit-16); } .large-padding-20 { padding: var(--unit-20); } .large-padding-25 { padding: var(--unit-25); } .large-padding-30 { padding: var(--unit-30); } .large-padding-32 { padding: var(--unit-32); } .large-padding-35 { padding: var(--unit-35); } .large-padding-40 { padding: var(--unit-40); } .large-padding-45 { padding: var(--unit-45); } .large-padding-48 { padding: var(--unit-48); } .large-padding-50 { padding: var(--unit-50); } .large-padding-60 { padding: var(--unit-60); } .large-padding-64 { padding: var(--unit-64); } /*END PADDING*/ } /*END LARGE ONLY*/ /*END UTILITIES*/ /* OVERLAY */ #overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(var(--color-overlay-rgb), .5); transition: var(--transition); z-index: 99999; opacity: 0; } #overlay[data-active] { opacity: 1; } #overlay.loading { z-index: 9999999; } /* END OVERLAY */ /* TOP BAR */ .top-bar:not([data-autohide="false"]) { position: fixed; transition: var(--transition); width: 100vw; top: 0; left: 0; z-index: 999; transform: translateY(0); } body[data-scroll-y-dir-thresholed="down"] .top-bar:not([data-autohide="false"]) { transform: translateY(-100%); } .top-bar .logo-container, .top-bar .hamburger-container { position: relative; z-index: 999; } /*END TOP BAR */ /*MENU*/ /*MENU HAMBURGER*/ /*MENU*/ .menu-1>ul>li.submenu-container .arrow { width: .65rem; transition: var(--transition); will-change: transform; } .menu-1>ul>li.submenu-container .toggle { display: flex; align-items: center; gap: var(--unit-6); } /*LARGE ONLY*/ @media (min-width: 64rem) { .menu-1>ul>li.submenu-container { position: relative; } .menu-1>ul>li.submenu-container>ul.submenu { position: absolute; top: 100%; white-space: nowrap; max-width: 15rem; transition: var(--transition); pointer-events: none; opacity: 0; } .menu-1>ul>li.submenu-container:hover>ul.submenu { opacity: 1; pointer-events: all; } .menu-1>ul>li.submenu-container:last-child>ul.submenu { right: 0; text-align: right; } .menu-1>ul>li.submenu-container:hover .arrow { transform: scaleY(-1); } } /*END LARGE ONLY*/ /*SMALL ONLY*/ @media (max-width: 63.9375rem) { .menu-1>ul.x-right>li.submenu-container { text-align: right; } .menu-1>ul>li.submenu-container>ul.submenu { transition: var(--transition); will-change: transform; height: 0px; pointer-events: none; opacity: 0; transform-origin: top; transform: scaleY(0); } .menu-1>ul>li.submenu-container>ul.submenu[data-active] { height: var(--submenu-height); pointer-events: all; opacity: 1; transform: scaleY(1); } .menu-1>ul>li.submenu-container .toggle { justify-content: flex-end; } .menu-1>ul>li.submenu-container .toggle[data-active] .arrow { transform: scaleY(-1); } } /*END SMALL ONLY*/ /*END MENU*/ /*MENU HAMBURGER*/ /*SMALL ONLY*/ @media (max-width: 63.9375rem) { .grid-container:not(.full) .small-menu-hamburger>ul { padding-left: var(--grid-container-padding-x); padding-right: var(--grid-container-padding-x); } .small-menu-hamburger { position: absolute; z-index: 99; top: 0; left: 0; width: 100%; height: var(--screen-height); padding-top: var(--top-bar-height); transition: var(--transition); overflow: hidden; will-change: auto; pointer-events: none; visibility: hidden; } .small-menu-hamburger[data-active] { pointer-events: all; visibility: visible; } .small-menu-hamburger>ul { position: relative; transition: var(--transition); height: 100%; overflow-y: auto; padding-bottom: 5vh; } .small-menu-hamburger::before { content: ''; position: absolute; transition: var(--transition); background-color: var(--color-primary); top: 0; left: 0; width: 100%; height: 100%; /* max-width: 100vh; max-height: 100vh; */ } .menu-hamburger--from-right>ul, .menu-hamburger--from-right::before { transform: translateX(100%); will-change: transform; } .menu-hamburger--from-left>ul, .menu-hamburger--from-left::before { transform: translateX(-100%); will-change: transform; } .menu-hamburger--from-right[data-active]>ul, .menu-hamburger--from-right[data-active]::before, .menu-hamburger--from-left[data-active]>ul, .menu-hamburger--from-left[data-active]::before { transform: translateX(0); } .menu-hamburger--fade { will-change: opacity; } .menu-hamburger--from-top-right>ul { will-change: opacity, transform; } .menu-hamburger--fade, .menu-hamburger--from-top-right>ul { opacity: 0; } .menu-hamburger--fade[data-active], .menu-hamburger--from-top-right[data-active]>ul { opacity: 1; } .menu-hamburger--from-top-right::before { top: 0; right: 0; left: unset; width: 10vh; height: 10vh; border-radius: 50%; transform: translate(50%, -100%) scale(1); } .menu-hamburger--from-top-right[data-active]::before { transform: translate(50%, -50%) scale(25); } } /*END SMALL ONLY*/ /*END MENU HAMBURGER*/ /* HAMBURGER */ .hamburger { position: relative; cursor: pointer; width: var(--unit-32); transition: var(--transition); padding: var(--unit-6) 0; } .hamburger>div { width: 100%; height: 2px; background-color: var(--color-black); transform-origin: center center; transition: 500ms; will-change: transform, opacity; } .hamburger>div+div { margin-top: 5px; } .hamburger[data-active]>div:first-child { transform: translate3d(0, 7px, 0) rotate3d(0, 0, 1, 45deg); } .hamburger[data-active]:not(.hamburger--2):not(.hamburger--3)>div:nth-child(2) { transform: scaleX(0); } .hamburger[data-active]:not(.hamburger--3)>div:nth-child(2) { opacity: 0; } .hamburger[data-active]:not(.hamburger--3)>div:last-child { transform: translate3d(0, -7px, 0) rotate3d(0, 0, 1, -45deg); } .hamburger--2[data-active]>div:nth-child(2) { transform: translateX(100%); } .hamburger--3>div:last-child { display: none; } .hamburger--3[data-active] { transform: rotate(180deg); } .hamburger--3[data-active]>div:first-child { transform: translate3d(0, 0, 0) rotate(45deg); } .hamburger--3[data-active]>div:nth-child(2) { transform: translate3d(0, -7px, 0) rotate(-45deg); } /*END HAMBURGER*/ /* PAGINATION */ .pagination { display: flex; flex-flow: row wrap; gap: var(--unit-16); } .pagination > * { display: inline-flex; padding: var(--unit-4); } .pagination > *[data-active] { text-decoration: underline; } .pagination > *[data-disabled] { opacity: .5; pointer-events: none; } .pagination svg { width: var(--unit-16); height: var(--unit-16); } .pagination a:last-child svg { transform: rotate(180deg); } /* END PAGINATION */ /*EFFECTS*/ .hover-zoom-in { will-change: transform; transition: var(--transition); } .hover-overlay { position: relative; } .hover-overlay::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; transition: var(--transition); } .hover-overlay::after { background-color: var(--color-overlay); opacity: 0; will-change: opacity; } .hover-overlay--slide-up::after { background: linear-gradient(0deg, var(--color-overlay) 20%, transparent 100%); transform: translateY(100%); will-change: transform; } *.btn--hover-slide { position: relative; color: transparent; overflow: hidden; } *.btn--hover-slide::before, *.btn--hover-slide::after { content: attr(data-btn-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: var(--color-black); transition: var(--transition); } *.btn--hover-slide::before { opacity: 1; } *.btn--hover-slide::after { transform: translateY(100%); opacity: 0; } *.btn--hover-slide:hover::before { transform: translateY(-100%); opacity: 0; } *.btn--hover-slide:hover::after { transform: translateY(0); opacity: 1; } @media (hover: hover) { .hover-zoom-in:hover { transform: var(--zoom-in); } .hover-overlay:hover::after { opacity: .5; } .hover-overlay--slide-up:hover::after { transform: translateY(0); } } /*END EFFECTS*/ /*ANIMATIONS*/ @keyframes shake { 8%, 41% { transform: translateX(-10px); } 25%, 58% { transform: translateX(10px); } 75% { transform: translateX(-5px); } 92% { transform: translateX(5px); } 0%, 100% { transform: translateX(0); } } /*END ANIMATIONS*/ /* FORMS */ .form .label-virtual-cnt { display: block; position: relative; } .form .label-virtual-cnt .label-virtual { position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* z-index: -1; */ font-size: .85rem; transition: var(--transition); pointer-events: none; opacity: 0; } .form .label-virtual-cnt[data-active] .label-virtual { opacity: 1; transform: translateY(-100%); } .form .label-virtual-cnt *::placeholder { opacity: 1; transition: var(--transition); } .form .label-virtual-cnt[data-active] *:focus::placeholder { opacity: 0; } .form :where(.checkbox-virtual, .radio-virtual) { cursor: pointer; display: flex; align-items: flex-start; } .form :where(.checkbox-virtual input[type="checkbox"], .radio-virtual input[type="radio"]) { display: none; } .form .checkbox-virtual .checkbox-virtual__checkbox, .form .radio-virtual .radio-virtual__checkbox { position: relative; border: 1px solid var(--color-black, #000); min-width: 1.25rem; min-height: 1.25rem; width: 1.25rem; height: 1.25rem; margin-top: .1rem; } .form .radio-virtual .radio-virtual__checkbox { border-radius: 50%; } .form .checkbox-virtual .checkbox-virtual__checkbox > *, .form .radio-virtual .radio-virtual__checkbox > * { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(.8); transition: var(--transition); opacity: 0; } .form .checkbox-virtual .checkbox-virtual__checkbox + .checkbox-virtual__text, .form .radio-virtual .radio-virtual__checkbox + .radio-virtual__text { margin-left: .5rem; } .form .checkbox-virtual input[type="checkbox"]:checked + .checkbox-virtual__checkbox > *, .form .radio-virtual input[type="radio"]:checked + .radio-virtual__checkbox > * { opacity: 1; } .form :where(input, textarea, select)[data-invalid], .form :where(input[type="checkbox"])[data-invalid] + .checkbox-virtual__checkbox, .form :where(input[type="radio"])[data-invalid] + .radio-virtual__checkbox, .form :where(.g-recaptcha:has(textarea[data-invalid]) > div) { border-color: var(--color-error) !important; border-style: solid; animation: shake 500ms linear; } .form :where(input:not([type="radio"]):not([type="checkbox"]), select, button, textarea) { width: 100%; } .form button[type="submit"][disabled] { opacity: .5; } .form .password-toggle { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); width: 1rem; height: 1rem; display: flex; cursor: pointer; } .form .password-toggle svg { fill: rgba(var(--color-black-rgb), .5); } .form .password-toggle svg:hover, .form .password-toggle[data-active] svg { fill: rgba(var(--color-black-rgb), 1); } /* END FORMS */ /*MODAL*/ #modal { position: fixed; width: 100vw; height: 100%; left: 0; top: 0; z-index: 999999; transition: var(--transition); pointer-events: none; opacity: 0; } #modal[data-active] { opacity: 1; pointer-events: all; } /* .modal::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--color-black); opacity: .5; } */ .modal__container { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .modal__content-container { position: relative; background-color: var(--color-white); border-radius: var(--border-radius-small); padding: .5rem; } .modal__btn-close { position: absolute; right: 0rem; top: 0rem; transform: translate(50%, -50%); cursor: pointer; border-width: 0px; border-radius: 50%; width: 1.5rem; height: 1.5rem; line-height: 0; padding: 0; background-color: #000; color: #FFF; } .modal__content { overflow-y: auto; overflow-x: hidden; max-height: 80vh; max-width: 70vw; } @media (max-width: 63.9375rem) { .modal__container { /*1.5rem = .modal__btn-close width*/ width: calc(99vw - 1.5rem); } .modal__content { max-width: initial; } } /*END MODAL*/ /*LOADING*/ .loading { position: relative; pointer-events: none; transition: var(--transition); } .loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 75px; height: 75px; display: block; border-width: 2.5px; border-color: rgba(var(--color-white-rgb), .1); border-top-color: var(--color-white); border-radius: 100%; border-style: solid; animation: loading-spin 1000ms infinite ease-in-out; transform: translate(-50%, -50%) rotate(0deg); z-index: 9; } .loading::before { z-index: 9; } .loading::before, .loading::after { opacity: 0; transition: var(--transition); } .loading[data-loading]::before, .loading[data-loading]::after { opacity: 1; } .loading--overlay::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(var(--color-overlay-rgb), .5); } .loading--smaller::after { width: 1.25rem; height: 1.25rem; } .loading.loading--invert::after { border-color: rgba(var(--color-black-rgb), .1); border-top-color: var(--color-black); } .loading--overlay.loading--invert::before { background-color: rgba(var(--color-white-rgb), .5); } @keyframes loading-spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } } /*END LOADING*/ /* SNACKBAR */ .snackbar { display: flex; flex-direction: column; /* will-change: auto; */ position: fixed; right: 0; bottom: 0; padding: var(--unit-16); z-index: 99999999; } .snackbar:not(:has(.snackbar__item)) { pointer-events: none; } .snackbar__bottom-right { right: 0; bottom: 0; align-items: flex-end; } .snackbar__bottom-left { left: 0; bottom: 0; align-items: flex-start; } .snackbar__bottom-center { left: 50%; transform: translateX(-50%); bottom: 0; align-items: center; } .snackbar__top-right { right: 0; top: 0; align-items: flex-end; } .snackbar__top-left { left: 0; top: 0; align-items: flex-start; } .snackbar__top-center { left: 50%; transform: translateX(-50%); top: 0; align-items: center; } body.scroll-block .snackbar__bottom-right, body.scroll-block .snackbar__top-right { right: var(--scrollbar-width); } .snackbar__item { position: relative; display: inline-flex; align-items: center; width: auto; transition: var(--transition); height: 0px; border-radius: var(--border-radius-small); overflow: hidden; box-shadow: var(--box-shadow); backdrop-filter: var(--filter-blur); transform-origin: top; transform: translateY(150%) scaleY(0); will-change: auto; opacity: 0; } .snackbar__item > * { padding: .75rem; } .snackbar__item::before, .snackbar__item::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .snackbar__item::before { z-index: -2; background-color: #FFF; opacity: .5; } .snackbar__item::after { z-index: -1; opacity: .25; } .snackbar__status { height: 100%; width: .8rem; padding: 0; } .snackbar__item[data-type="success"]::after, .snackbar__item[data-type="success"] .snackbar__status { background-color: var(--color-success); } .snackbar__item[data-type="error"]::after, .snackbar__item[data-type="error"] .snackbar__status { background-color: var(--color-error); } .snackbar__item[data-type="warning"]::after, .snackbar__item[data-type="warning"] .snackbar__status { background-color: var(--color-warning); } .snackbar__item[data-type="info"]::after, .snackbar__item[data-type="info"] .snackbar__status { background-color: var(--color-info); } .snackbar__item[data-type="default"]::after { background-color: var(--color-white); } .snackbar__item[data-type="default"] .snackbar__status { background-color: rgba(0,0,0,.1); } .snackbar__item.snackbar__show { transform: translateY(0) scaleY(1); opacity: 1; height: auto; } .snackbar__item.snackbar__show + .snackbar__item.snackbar__show:not(.snackbar__removed) { margin-top: 1rem; } .snackbar__item.snackbar__removed { margin-top: 0px; height: 0px !important; opacity: 0; transform: translateY(150%) scaleY(0); } .snackbar__remove { display: inline-flex; align-items: center; cursor: pointer; transition: var(--transition); transition-duration: 50ms; } .snackbar__remove:hover { background-color: rgba(255, 255, 255, .25); } /* END SNACBKAR */ body.scroll-block { -ms-touch-action: none; touch-action: none; -webkit-overflow-scrolling: none; overflow: hidden; overscroll-behavior: none; } body::-webkit-scrollbar { width: var(--scrollbar-width); } body::-webkit-scrollbar-track { background: var(--scrollbar-track-color); } body::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 0px; } body[data-grid-debug] .grid-x { background-color: rgba(255, 0, 45, .3); } body[data-grid-debug] .grid-x>.cell { background: rgba(255, 255, 0, .3); border: 1px solid #3eff00; } html { font-size: 100%; } html:not([data-loaded]) * { transition: 0ms !important; } html[data-loaded] { scroll-behavior: smooth; } body { font-family: var(--font-primary); overflow-y: overlay; width: 100vw; overflow-x: hidden; }/** * Swiper 7.4.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: December 24, 2021 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}#cd-google-map { position: absolute; top:0; left:0; width:100%; z-index:-1; padding: 0; pointer-events: none; height: 100%; } #google-container, #google-container * { transition: 0ms; } #google-container { width: 100%; height: 100%; } #cd-google-map, #cd-google-map *{ transition:none!important; -webkit-transition:none!important; -o-transition:none!important; -ms-transition:none!important; -moz-transition:none!important; } #cd-zoom-in, #cd-zoom-out { height: 32px; width: 32px; cursor: pointer; margin-right: 10px; background-color: #D3623E; background-repeat: no-repeat; background-size: 32px 64px; background-image: url("https://dev.scdesign.ro/global-mat-install/plugins/gmap/images/cd-icon-controller.png"); } #cd-zoom-in { background-position: 50% 0; margin: 15px 0 1px 15px; } #cd-zoom-out { background-position: 50% -32px; margin-left: 15px; } #cd-google-map .gmnoprint { max-height: 50px !important; } @media only screen and (min-width: 768px) { #cd-zoom-in, #cd-zoom-out { margin-left: 15px; } }/*! * baguetteBox.js * @author feimosi * @version 1.11.1 * @url https://github.com/feimosi/baguetteBox.js */#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}/*Product Added*/ #productAdded { display: none; } .successContent { margin: 0 auto; max-width: 1050px padding: 2rem 0; } .successContent .text { font-size: 2rem; line-height: 3rem; margin-bottom: 2rem; color: #1d1d1d; } .successContent .continue-browsing { background: linear-gradient(to right, #717171 0%,#e6e1d2 100%); background: #717171; background: -moz-linear-gradient(left, #717171 0%, #e6e1d2 100%); background: -webkit-linear-gradient(left, #717171 0%,#e6e1d2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#717171', endColorstr='#e6e1d2',GradientType=1); border: 0px; } .successContent .continue-browsing:hover { color: #FFF; } /* CART */ #cart a { color: #000; } #cart a:hover { color: #37bc33;; } #cart .products{ margin:3rem 0; } #cart .form-group, #cart label{ display: block; } #cart .form-group{ margin:auto; } #cart .row .row{ margin:0; padding:0 1rem; max-width:100%; } #cart .product-title{ font:1.2rem "Decalotype-Bold"; } #cart a[href="#remove_item"]{ margin-top:1rem; font-size:.8rem; } #cart a[href="#remove_item"]:hover{ color:#e20909; } #cart .products input[type='number']{ display: inline-block; width:4rem; margin:0; vertical-align:middle; } #cart .product-details{ display: inline-block; vertical-align:middle; margin-left:1rem; } #cart .products .product-content + .product-content{ margin-top:1rem!important; } #cart .product-content { transition: .5s; height: 100%; max-height: 100%; transform: scaleY(1); } #cart .product-content.product-deleted { opacity: 0; visibility: hidden; height: 0; max-height: 0; transform: scaleY(0); overflow: hidden; } #cart .product-image { overflow: hidden; min-width: 120px; max-width: 120px; min-height: 90px; max-height: 90px; } #cart .product-image img { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; } #cart .cart-empty { font-size: 2rem; font-style: italic; } .select-hidden{ display: none; } #addtocart_actions .product-added-container { display: none; } .shop-shadow-1 { box-shadow: 4px 4px 15px #c4c4c4; } .shop-shadow-1:hover { box-shadow: 15px 15px 35px #c4c4c4; } /*Product*/ #product .product-left, #product .product-right { vertical-align: top; display: inline-block; padding: .8rem 0; text-align: left; } #product .product-left { font-family: 'B-Bold'; width: 18%; float: left; } #product .product-right { width: 81%; } /*Related products*/ #related { text-align: center; } #related .related-container { padding-top: 3rem; display: flex; align-items: center; justify-content: center; } #related .related-container .columns { margin: 0 auto; } .shop-img-hover { transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); } .shop-img-hover:hover img { transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); } .shop-img-hover img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); } #related .product-image { overflow: hidden; max-width: 200px; width: auto; height: auto; position: relative; margin: 0 auto; } #related .product-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .5rem; font-size: 1.2rem; } .product-deleted { opacity: 0; visibility: hidden; transform: scaleY(0) !important; overflow: hidden; } @media only screen and (max-width: 1023px) { .product-added-container .grid-x a { width: 100%; } .button__default.shop-shadow-1:nth-child(1){ display: block; margin-bottom: 2.5rem; } #product .product-left { width: 25%; } #product .product-right { width: 74%; } .scd-popup.confirmation .inner { overflow-y: scroll !important; -webkit-overflow-scrolling: touch !important; top: 50%; height: 90vh; padding: 0; overflow-y: auto; width: 90%; } .scd-popup a[href='#close-popup'] { font-size: 2rem; position: fixed; padding: 0 .5rem; background: #fff; } .product-added-container .row a:nth-of-type(1) { margin-bottom: 1rem; } .product-added-container .row a { text-align: center; max-width: 100%; min-width: 100%; width: 100%; display: inline-block; } .product-added-container .row:nth-of-type(1) { font-size: 2rem; } } .no-products { text-align: center; } #cart_form div.invalid > label.radio span.radio { background-color: #d44747 !important; animation: shake .5s linear; } .delivery_not_selected { font-style: italic; font-size: .9rem; } @keyframes shake { 8%, 41% { transform: translateX(-10px); -webkit-transform: translateX(-10px); } 25%, 58% { transform: translateX(10px); -webkit-transform: translateX(10px); } 75% { transform: translateX(-5px); -webkit-transform: translateX(-5px); } 92% { transform: translateX(5px); -webkit-transform: translateX(5px); } 0%, 100% { transform: translateX(0); -webkit-transform: translateX(0); } } .discount__container { padding: 2rem 0; } .discount__container span { font-style: italic; } .discount__container input { display: inline-flex; width: 70%; border: 0px; color: #2b2b2b; padding: .5rem; border-top-left-radius: 25px; border-bottom-left-radius: 25px; line-height: 1rem; height: 40px; font-size: .9rem; } .discount__container input:focus { border-color: #d2006f; } .discount__container button { display: inline-flex; padding: .5rem; width: 30%; border: 0px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; line-height: 1rem; height: 40px; background-color: #d2006f; color: #FFF; cursor: pointer; font-size: .9rem; } .discount__container button:hover { color: #000; background-color: #dfe201; } .discount__container .text-right { padding-right: 0px !important; } .discount__response { font-family: "OpenSans-Bold"; font-size: .9rem; font-style: italic; }.cookie-gdpr-container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.7); transition: 350ms; pointer-events: none; opacity: 0; z-index: 99999999999; } .cookie-gdpr-container.hide { opacity: 0; pointer-events: none; } .cookie-gdpr-container.show { opacity: 1; pointer-events: all; } .cookie-gdpr-container .cookie-gdpr { position: absolute; left: 50%; transform: translateX(-50%); background: #FFF; border-radius: 15px; box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.15); width: 90%; margin: 0 auto; padding: 2rem; opacity: .9; transition: 300ms; display: flex; align-items: center; flex-flow: row wrap; bottom: 5%; } /*TEXT*/ .cookie-gdpr-container .cookie-gdpr-text { display: inline-flex; width: 80%; flex: 0 0 auto; } .cookie-gdpr-container .cookie-gdpr-text p { margin: 0 0 .5rem 0; color: #000; } .cookie-gdpr-container .cookie-gdpr-text p a { color: #000; } .cookie-gdpr-container .cookie-gdpr-text p a:hover { color: #1D9BFC; } /*BUTTON*/ .cookie-gdpr-container .gdpr-button { width: 20%; text-align: right; display: inline-flex; justify-content: flex-end; flex: 0 0 auto; } .cookie-gdpr-container button { background: #1D9BFC; color: #FFF; border-radius: 5px; padding: .5rem 1.5rem; border: 0px; width: 100%; max-width: 200px; } .cookie-gdpr-container button:hover { cursor: pointer; } .cookie-gdpr-container:hover .cookie-gdpr { opacity: 1; } @media only screen and (max-width: 768px) { .cookie-gdpr-container { } .cookie-gdpr-container .cookie-gdpr { text-align: center; width: 85%; opacity: 1; padding: 1rem; } .cookie-gdpr-container .cookie-gdpr-text { font-size: 14px; } .cookie-gdpr-container .cookie-gdpr-text, .cookie-gdpr-container .gdpr-button { display: block; width: 100%; } .cookie-gdpr-container .gdpr-button { margin-top: 1rem; text-align: unset; } }.lazy { opacity: 0; } .lazy.loaded { opacity: 1; } /* ====================================================================================================== html, body */ /* ====================================================================================================== typography */ /* ====================================================================================================== buttons */ /* ====================================================================================================== diverse */ /* ====================================================================================================== header */ /* ====================================================================================================== hero */ /* ====================================================================================================== social container */ /* ====================================================================================================== section */ /* ====================================================================================================== blog */ /* ====================================================================================================== contact */ /* ====================================================================================================== footer */ @font-face { font-family: "Primary"; font-weight: 500; src: url("../fonts/Gilroy-Regular.woff2"); } @font-face { font-family: "Primary"; font-weight: 700; src: url("../fonts/Gilroy-SemiBold.woff2"); } :root, ::before, ::after { --grid-gap-xy: 2rem; --color-black: #151515; --color-gray: #151515; --color-primary: #000fda; --color-white: #fff; --section-color-one: #fff; --section-color-two: #F9F8F3; --shadow: 0px 0px 20px 5px rgba(0,0,0,0.05); } /* ====================================================================================================== html, body */ body { color: var(--color-black); background: var(--color-white); } ::-moz-selection { color: var(--color-white); background: var(--color-primary); } ::selection { color: var(--color-white); background: var(--color-primary); } /* ====================================================================================================== typography */ .font-secondary { font-family: "Secondary"; } .font-uppercase, .font-uppercase > * { text-transform: uppercase; } .font-gray, .font-gray > * { color: var(--color-gray); } .font-black, .font-black > * { color: var(--color-black); } .font-primary, .font-primary > * { color: var(--color-primary); } .font-white, .font-white > * { color: var(--color-white); } h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: var(--font-bold); } h1 { line-height: 1; } p { line-height: 1.7; color: var(--color-gray); } @media (min-width: 64rem) { .hero--homepage h1 { font-size: 4rem; } .hero--secondary h1 { font-size: 3rem; } .subtitle-container .h2 { font-size: 2rem; } } @media (max-width: 63.9375rem) { .hero--homepage h1 { font-size: 3rem; } .hero--secondary h1 { font-size: 1.75rem; } .subtitle-container .h2 { font-size: 1.5rem; } } /* ====================================================================================================== buttons */ .cta-primary { font-weight: var(--font-bold); padding: 1rem 2rem; border-radius: 100vw; border: 1px solid; display: inline-flex; gap: .5rem; align-items: center; cursor: pointer; } .cta-primary--full { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .cta-primary--outline { color: var(--color-primary); border-color: var(--color-primary); } .cta-primary--white { border-color: var(--color-white); background-color: var(--color-white); color: var(--color-primary); } .cta-primary--outline-white { border-color: var(--color-white); color: var(--color-white); } .cta-secondary { position: relative; } .cta-secondary::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; } .cta-secondary--black { color: var(--color-black); } .cta-secondary--black::after { background-color: var(--color-black); } .cta-secondary--white { color: var(--color-white); } .cta-secondary--white::after { background-color: var(--color-white); } @media (min-width: 64rem) { .cta-primary, .cta-secondary::after { transition: var(--transition); } .cta-primary:hover { padding: 1rem 3rem; } .cta-secondary::after { transform-origin: left; } .cta-secondary:hover::after { transform: scaleX(0); } } /* ====================================================================================================== diverse */ .image-container { border-radius: var(--unit-20); } /* ====================================================================================================== header */ .top-bar { padding: 1rem 0; } body[data-scroll-y-dir="up"] .top-bar{ background-color: var(--color-black); } .top-bar ul li a { color: var(--color-white); font-weight: var(--font-bold); position: relative; } .multilanguage-container button { position: relative; padding: .25rem; } .top-bar ul li a::after, .top-bar ul li.active a::after, .multilanguage-container button::after, .multilanguage-container button.active::after { content: ''; position: absolute; height: 1px; background-color: var(--color-white); } .multilanguage-container button::after { width: calc(100% - .5rem); left: .25rem; bottom: .25rem; } .top-bar ul li:not(.active) a::after, .multilanguage-container button:not(.active):after { transition: var(--transition); transform-origin: left; transform: scaleX(0); } .hamburger>div { background-color: var(--color-white); } .multilanguage-container button { background-color: unset; outline: unset; border: unset; cursor: pointer; color: var(--color-white); font-weight: var(--font-bold); } .multilanguage-container span { color: var(--color-white); } li.submenu { position: relative; transition: var(--transition); } li.submenu a { position: relative; } li.submenu > a::before { content: ''; background-image: url('../images/arrow-dropdown.svg'); position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: .688rem; height: .438rem; transition: var(--transition); } li.submenu > a:hover::before { top: 45%; transform: rotate(-180deg); } .multilanguage-trigger svg { width: 1.25rem; height: 1.25rem; pointer-events: none; } .top-bar li.submenu > a { display: inline-flex; gap: var(--unit-5); align-items: center; } .top-bar ul.submenu li a { font-weight: var(--font-regular); } @media (min-width: 64rem) { .multilanguage-trigger { position: relative; padding: 1rem; } .multilanguage-container { opacity: 0; pointer-events: none; transition: var(--transition); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: var(--color-black); padding: 1rem; } .top-bar ul li a { padding: 1rem; display: inline-block; } ul.submenu li:first-child { display: none; } ul.submenu { padding: 1rem 0; text-align: center; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 15rem; background-color: var(--color-black); transition: var(--transition); opacity: 0; pointer-events: none; } ul.submenu li a { padding: .25rem; } .top-bar li.submenu:hover ul.submenu, .multilanguage-trigger:hover .multilanguage-container { opacity: 1; pointer-events: all; } body[data-scroll-y-dir="down"] .top-bar li.submenu:hover ul.submenu, body[data-scroll-y-dir="down"] .multilanguage-trigger:hover .multilanguage-container { opacity: 0; pointer-events: none; } .top-bar ul li a::after, .top-bar ul li.active a::after { bottom: 1rem; left: 1rem; width: calc(100% - 2rem); } .top-bar ul.submenu li a::after { bottom: .25rem; left: .25rem; width: calc(100% - .5rem); } .top-bar ul:not(.submenu) li:not(.active) a:hover::after, .multilanguage-container button:not(.active):hover::after { transform: scaleX(1); } } @media (max-width: 63.9375rem) { .multilanguage-trigger svg { display: none; } .multilanguage-container { margin-top: 2rem; } li.submenu > a { pointer-events: none; } ul.submenu { transition: var(--transition); pointer-events: none; height: 0; opacity: 0; } .top-bar ul.submenu li a { font-size: var(--font-16); } .top-bar ul li { text-align: right; } .top-bar ul li a { font-size: var(--font-18); display: inline-block; padding: .25rem; } li.submenu > a { justify-content: flex-end; } li.submenu[data-active] ul.submenu { opacity: 1; pointer-events: all; } li.submenu > a::before { right: -.75rem; } li.submenu[data-active] > a::before { top: 45%; transform: rotate(-180deg); } .top-bar ul li.active a::after { bottom: .25rem; left: .25rem; width: calc(100% - .5rem); } } /* ====================================================================================================== hero */ .hero { position: relative; overflow: hidden; color: var(--color-white); } .hero--swiper { height: 100vh; } .hero > img, .hero--swiper-multiple-images .swiper-slide > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero:not(.hero--swiper):after, .hero--swiper-one-image .swiper::after, .hero--swiper-multiple-images .swiper .swiper-slide::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-black); opacity: .5; z-index: 2; pointer-events: none; user-select: none; } .hero .grid-container, .hero--swiper-one-image .swiper .swiper-wrapper, .hero--swiper-multiple-images .swiper .swiper-slide { position: relative; z-index: 3; } .hero p { color: var(--color-white); } .hero--swiper .swiper-horizontal>.swiper-pagination-bullets, .hero--swiper .swiper-pagination-bullets.swiper-pagination-horizontal, .hero--swiper .swiper-pagination-custom, .hero--swiper .swiper-pagination-fraction { left: 50%; transform: translateX(-50%); position: absolute; bottom: 2rem; } .hero--swiper .swiper-next-prev-container { position: absolute; margin-bottom: unset; width: 100%; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; padding: 0 5rem; } .hero--swiper .swiper-button-next, .hero--swiper .swiper-button-prev { border-color: var(--color-white); } .hero--swiper .swiper-button-next svg path, .hero--swiper .swiper-button-prev svg path { fill: var(--color-white); } .hero--swiper .swiper-pagination-bullet { background-color: var(--color-white); opacity: .5; } .hero--swiper .swiper-pagination-bullet-active { opacity: 1; } @media (min-width: 64rem) { .hero--homepage { height: 100vh; } .hero--secondary { height: 50vh; } .hero--secondary.hero--full { height: 100vh; } .hero-absolute-container { position: absolute; z-index: 4; bottom: 2rem; left: 0; width: 100%; } } @media (max-width: 63.9375rem) { .hero--homepage, .hero--secondary { padding: 5rem 0 3rem 0; } .hero--swiper { padding: 0; } .hero-absolute-container { text-align: center; margin-top: var(--unit-20); } .hero--swiper .hero-absolute-container { margin-top: 0; position: absolute; z-index: 4; bottom: 2rem; left: 0; width: 100%; } } /* ====================================================================================================== social container */ .social-container { display: flex; } .social-container a, .social-container div { width: 3.125rem; height: 3.125rem; border-radius: 50%; border: 2px solid transparent; display: flex; justify-content: center; align-items: center; cursor: pointer; } .social-container.social-container--black a, .social-container.social-container--black div { border-color: #000; } .social-container.social-container--black a svg, .social-container.social-container--black div svg { fill: #000; } .social-container.social-container--white a, .social-container.social-container--white div { border-color: #fff; } .social-container.social-container--white a svg, .social-container.social-container--white div svg { fill: #fff; } .social-container a svg, .social-container div svg { width: 1.25rem; min-width: 1.25rem; } .social-container a.social-facebook svg { width: 1rem; min-width: 1rem; } .social-container a.social-youtube svg { width: 1.5rem; min-width: 1.5rem; } @media (min-width: 64rem) { .social-container a svg, .social-container div svg { transition: var(--transition); } .social-container a:hover svg, .social-container div:hover svg { transform: scale(1.2); } } /* ====================================================================================================== section */ .section { position: relative; } .section-color-one { background-color: var(--section-color-one); } .section-color-two { background-color: var(--section-color-two); } .section-color-primary { color: var(--color-white); background-color: var(--color-primary); } .section-color-primary p, .section-image, .section-image p { color: var(--color-white); } .section-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .section-image::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-black); opacity: .5; z-index: 2; pointer-events: none; } .section-image > *:not(img) { position: relative; z-index: 3; } .default-swiper { overflow: visible; } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { position: relative; bottom: unset; margin-top: 2rem; } .swiper-pagination-bullet { transition: var(--transition); } .swiper-pagination-bullet-active { background-color: var(--color-primary); } .section-image .swiper-pagination-bullet, .section-color-primary .swiper-pagination-bullet { background-color: var(--color-white); } .swiper-next-prev-container { margin-bottom: 2rem; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: unset; left: unset; position: unset; width: unset; height: unset; margin-top: unset; display: unset; color: unset; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: unset; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: unset; } .swiper-button-next, .swiper-button-prev { position: unset; margin-top: unset; display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--color-gray); transition: var(--transition); } .swiper-button-prev svg { transform: rotate(180deg); } .reason-svg { background-color: var(--color-primary); width: 6.25rem; height: 6.25rem; border-radius: 50%; } .reason-svg svg { width: 3.125rem; height: 3.125rem; min-width: 3.125rem; min-height: 3.125rem; display: block; } .reason-svg svg, .reason-svg svg path { fill: var(--color-white) } .testimonial-swiper-slide { border-radius: var(--unit-20); background-color: var(--color-white); box-shadow: 0px 0px 30px -7px rgba(0,0,0,0.12); padding: 1.5rem; } .testimonial-swiper-slide svg { width: 3rem; min-width: 3rem; fill: var(--color-success); } .wapp-container { position: fixed; z-index: 999; bottom: 1rem; right: 1rem; } .custom-ul ul { list-style-type: none; } .custom-ul ul li { position: relative; padding-left: 1rem; } .custom-ul ul li:not(:last-child) { margin-bottom: .75rem; } .custom-ul ul li::after { position: absolute; top: .55rem; left: 0; width: .4rem; height: .4rem; content: ''; border-radius: 50%; background-color: var(--color-primary); } @media (min-width: 64rem) { .section { padding: 7.5rem 0; } .section > *:not(:last-child), .section .grid-container > *:not(:last-child) { margin-bottom: 7.5rem; } .default-swiper--faded .swiper-slide { opacity: 0; transition: var(--transition); } .default-swiper--faded .swiper-slide-visible { opacity: 1; } .reasons .cell:nth-child(2n) { transform: translateY(-2rem); } .reasons .cell:not(:nth-child(2n)) { transform: translateY(2rem); } .wapp-container svg { transition: var(--transition); } .wapp-container:hover svg { transform: scale(1.2); } } @media (max-width: 63.9375rem) { .section { padding: 3.5rem 0; } .section > *:not(:last-child), .section .grid-container > *:not(:last-child) { margin-bottom: 3.5rem; } } /* ====================================================================================================== blog */ .article-box { background-color: #F4F4F4; border-radius: var(--unit-20); overflow: hidden; padding: 1.5rem 0 0 0; } .article-category-date { padding: 0 1.5rem; color: var(--color-gray); } .image-container.article-image-container { --aspect-ratio: 1; border-radius: 50%; } .article-link-container { padding: 0 1.5rem 1.5rem 1.5rem; display: block; } @media (min-width: 64rem) { .article-link-container img, .article-category-date a { transition: var(--transition); } .article-category-date a:hover { color: var(--color-primary); } .article-link-container:hover img { transform: scale(1.2); } } /* ====================================================================================================== contact */ .contact-detail svg { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; display: block; } .contact-detail svg path { fill: var(--color-primary); } .contact-detail span { font-weight: var(--font-bold); } .default-contact-form-container { position: relative; overflow: hidden; } .default-contact-form-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .default-contact-form-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .6; z-index: 2; } .default-contact-form-container > * { position: relative; z-index: 3; } .default-form input, .default-form button { border-radius: 100vw; } .default-form input, .default-form textarea { outline: unset; transition: var(--transition); padding: 1rem; border: 1px solid #fff; background-color: transparent; color: #fff; } .default-form input:focus, .default-form textarea:focus { border-color: var(--color-primary); } .default-form textarea { border-radius: var(--unit-20); min-height: 10rem !important; resize: none; } .default-form button { font-weight: var(--font-bold); cursor: pointer; outline: none; color: var(--color-white); padding: 1rem; font-size: 1.25rem; border: none; position: relative; z-index: 1; } .default-form button::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-primary); z-index: -1; border-radius: 100vw; } .default-form .checkbox-virtual__text { color: var(--color-white); } .default-form .checkbox-virtual__text a { font-weight: var(--font-bold); text-decoration: underline; } .default-form .checkbox-virtual .checkbox-virtual__checkbox, .default-form .radio-virtual .radio-virtual__checkbox { border-color: var(--color-white); } .default-form .checkbox-virtual .checkbox-virtual__checkbox svg path, .default-form .radio-virtual .radio-virtual__checkbox svg path { fill: var(--color-white); } .iframe-container { overflow: hidden; } .iframe-container iframe { width: 100%; height: 100%; } @media (min-width: 64rem) { .contact-details a { padding: 1rem; } .contact-details a { transition: var(--transition); border-radius: var(--unit-10); } .contact-details a:hover { background-color: #ededed; } .default-contact-form-container { padding: 3rem 12rem; border-radius: var(--unit-20); } .default-form button::after, .checkbox-virtual__text a { transition: var(--transition); } .checkbox-virtual__text a { display: inline-block; } .checkbox-virtual__text a:hover { transform: translateX(.5rem); } .default-form button:hover::after { opacity: .75; } .iframe-container { height: 50vh; } } @media (max-width: 63.9375rem) { .contact-details a { padding: .5rem; } .default-contact-form-container { padding: 1rem; border-radius: var(--unit-5); } .iframe-container { height: 50vh; } } /* ====================================================================================================== footer */ footer { background-color: var(--color-primary); color: var(--color-white); } footer .footer-logo svg { width: 100%; } footer .footer-legal ul { display: flex; justify-content: center; list-style-type: none; } footer .footer-copyright a { font-weight: var(--font-bold); } @media (min-width: 64rem) { footer { padding: 5rem 0; } footer .footer-legal ul li a, footer .footer-copyright a, footer .footer-sol-sal a img { transition: var(--transition); } footer .footer-legal ul li a:hover, footer .footer-copyright a:hover { opacity: .75; } footer .footer-sol-sal a:hover img { transform: scale(1.05); } footer .footer-legal ul { gap: 2rem; } } @media (max-width: 63.9375rem) { footer { padding: 3rem 0; } footer .footer-legal ul { gap: 1rem; } } @media all and (min-width: 1023px) and (max-width: 1440px) { html { font-size: 75%; } }:root, ::before, ::after { --grid-gap-xy: 2rem; --color-black: #151515; --color-gray: #151515; --color-primary: #00BFFF; --color-white: #fff; --section-color-one: #fff; --section-color-two: #F9F8F3; } body { background-image: url("../images/background.jpg"); background-repeat: no-repeat; background-attachment: fixed; width: 100%; overflow-y: unset; } .top-bar ul li a { color: var(--color-black); text-transform: uppercase; font-size: var(--unit-15); } .top-bar nav ul { position: relative; } .top-bar nav ul::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 90%; transform: translate(-50%, -50%); border-radius: 100vw; background-color: var(--color-white); z-index: -1; opacity: .75; } .top-bar ul li a::after, .top-bar ul li.active a::after { background-color: var(--color-black); } .image-container, .swiper-type-one { border-radius: var(--unit-10); overflow: hidden; } .swiper-type-one-slide .image-container { border-radius: 0px; } .swiper-type-one-slide-image { --aspect-ratio: 666/333; } .swiper-type-one { position: relative; overflow: hidden; } .swiper-type-one .swiper-pagination { position: absolute; margin-top: unset; z-index: 3; bottom: 1rem; } .swiper-type-one .swiper-pagination-bullet { background-color: var(--color-white); opacity: .5; } .swiper-type-one .swiper-pagination-bullet-active { opacity: 1; } .swiper-type-two-slide-image { --aspect-ratio: 908/302; } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { margin-top: var(--unit-10); } .category-container { scroll-margin-top: 10vh; } .section-image::after { display: none; } .swiper-type-three-slide { background-color: var(--color-white); border-radius: 100vw; padding: 1rem; } .number-text p{ color: var(--color-black); line-height: 1.1; } .number-title { line-height: 1; } footer { background-color: var(--color-black); padding: 1rem 0; } .social-linkedin svg, .social-instagram svg { width: 1.75rem !important; min-width: 1.75rem !important; } .footer-col-4 .form input, .footer-col-4 .form button { background-color: var(--color-white); border-color: unset; outline: 0; border: 1px solid; transition: var(--transition); border-radius: var(--unit-10); color: var(--color-black); padding: .75rem 1rem; } .footer-col-4 .form button { background-color: var(--color-primary); color: var(--color-white); border: unset; font-weight: var(--font-bold); border-radius: 100vw; cursor: pointer; height: 3.313rem; } .footer-col-4 .form input::placeholder { color: var(--color-gray); } .footer-col-4 .form input:focus { border-color: var(--color-primary); } .footer-col-4 ul { list-style-type: none; } .hero:not(.hero--swiper):after, .hero--swiper-one-image .swiper::after, .hero--swiper-multiple-images .swiper .swiper-slide::after { opacity: .35; } .hero-absolute-container { pointer-events: none; } .product-view-more .product-vire-more__content { height: 0; overflow: hidden; } .product-view-more[data-active] .product-vire-more__content { margin-bottom: 1rem; } .product-service { position: relative; border-radius: var(--unit-10); background-color: var(--color-white); -webkit-box-shadow: 0px 0px 55px 5px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 55px 5px rgba(0,0,0,0.05); box-shadow: 0px 0px 55px 5px rgba(0,0,0,0.05); overflow: hidden; } .cariera-cell { padding: 1.25rem; position: relative; border-radius: var(--unit-10); background-color: var(--color-white); -webkit-box-shadow: 0px 0px 55px 5px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 55px 5px rgba(0,0,0,0.05); box-shadow: 0px 0px 55px 5px rgba(0,0,0,0.05); } .cariera-cell strong { color: var(--color-black); } .product-service-front-content { cursor: pointer; } .product-service-back-content { position: absolute; top: 0; left: 0; border-radius: var(--unit-10); width: 100%; height: 100%; z-index: 2; padding: .75rem; transition: var(--transition); transform: translateY(-100%); pointer-events: none; } .product-service-back-content p{ color: var(--color-white); } #tinymce .product-service-back-content { position: relative; transform: none; height: auto; margin-bottom: 1rem; } #tinymce .product-service-front-content .image-container { margin-bottom: 1rem; } .product-service-back-content::after { content: ''; position: absolute; background-color: var(--color-primary); top: 0; left: 0; width: 100%; height: 100%; opacity: .95; z-index: -1; } .product-service-back-content[data-active] { transform: translateY(0); pointer-events: all; } .product-service-back-content { color: var(--color-white); } .cta-type-2 { cursor: pointer; } .cta-type-2--blue span { color: var(--color-primary); } .cta-type-2--blue svg path { fill: var(--color-primary); } .cta-type-2--white span { color: var(--color-white); } .cta-type-2--white svg path { fill: var(--color-white); } .close-product-service-back-content svg { cursor: pointer; } .category-product { padding: 1rem 0; } .category-container .category-product:nth-child(2n) { background-color: var(--color-white); } .category-container .category-product:nth-child(2n+1) { background-color: #F4F4F4; } .back-to-top { position: fixed; z-index: 10; bottom: 20px; right: 20px; background-color: var(--color-primary); width: 3.125rem; height: 3.125rem; border-radius: 50%; cursor: pointer; } .contact-form-section { position: relative; } .contact-form-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-color: var(--color-black); opacity: .5; } .default-contact-form-container::after { display: none; } .contact-form-section img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .section-no-padding-bottom { padding-bottom: 0 !important; } .input-file-container { position: relative; border: 1px solid #fff; height: 3.625rem; border-radius: 100vw; padding: 1rem; color: #fff; } .input-file-container input[type="file"] { width: 100%; position: absolute; left: 0; height: 100%; top: 0; opacity: 0; cursor: pointer; } .reset-input { position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; background-color: #fff; width: 2rem; height: 2rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; display: none; } .reset-input svg { pointer-events: none; } .delete-file { position: absolute; display: flex; justify-content: center; align-items: center; background-color: red; width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; top: 50%; transform: translateY(-50%); right: 1rem; opacity: 0; pointer-events: none; } .delete-file[data-active] { opacity: 1; pointer-events: all; } .upload-icon { position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; cursor: pointer; top: 50%; transform: translateY(-50%); right: 1rem; opacity: 1; pointer-events: none; } .upload-icon[data-inactive] { opacity: 0; } .map-container { height: 50vh; } #map { width: 100%; height: 100%; } .swiper-type-three p { color: var(--color-black); } .hero--swiper li { font-size: var(--unit-19); } .footer-col-4 .form .checkbox-virtual .checkbox-virtual__checkbox, .footer-col-4 .form .radio-virtual .radio-virtual__checkbox { border-color: var(--color-white); } .top-bar ul.submenu li a { font-weight: 700; } .hero--contact video { position: absolute; left: 0; top: 0; height: 100%; width: 100%; object-fit: cover; } @media (min-width: 64rem) { ul.submenu li:first-child { display: block } .top-bar nav li.submenu:hover ul{ opacity: 1; pointer-events: all; } .top-bar nav ul.submenu { position: absolute; height: auto; font-weight: 700; background: rgba(255, 255, 255, .75); border-radius: 2rem; padding: .5rem 2rem; width: auto; white-space: nowrap; opacity: 0; pointer-events: none; } .top-bar nav ul.submenu::after { display: none; } .top-bar ul.submenu li a { font-size: .875rem; } .cnt-social a svg { transition: var(--transition); } .cnt-social a:hover svg { transform: scale(1.2); } .top-bar nav ul { padding: 0 var(--unit-16); } .hero--homepage h1 { font-size: 3.125rem; } .hero-absolute-container { position: absolute; z-index: 4; bottom: unset; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .subtitle-container .h2 { font-size: 2.5rem; } .section { padding: 3.125rem 0; } .section > *:not(:last-child), .section .grid-container > *:not(:last-child) { margin-bottom: 3.125rem; } .large-font-48 { font-size: 3rem; } .footer-col-4 > .cell { padding: 0 2rem; } .footer-col-4 > .cell:first-child { padding-left: 0; } .footer-col-4 ul li a { transition: var(--transition); } .footer-col-4 ul li a:hover { color: var(--color-primary); } .footer-soc a svg{ transition: var(--transition); } .footer-soc a:hover svg { transform: scale(1.2); } body[data-scroll-y-dir="up"] .top-bar { background-color: unset; } .hero--secondary h1 { font-size: 3.125rem; } .hero--secondary p { font-size: var(--unit-19); } .product-service { padding: 1.25rem; } .cta-type-2 svg { transition: var(--transition); } .cta-type-2:hover svg { transform: translateX(100%); } .category-product .cta-primary:hover { background-color: #0085b1; border-color: #0085b1; } .category-product .cta-primary:hover { padding: 1rem 2rem; } .back-to-top, footer button { transition: var(--transition); } .back-to-top:hover, footer .footer-col-4 .form button:hover { background-color: #0085b1; } .career-contact-form-container { padding: 1rem 12rem !important; } .career-contact-form-container::after { display: block !important; opacity: .5 !important; } .default-contact-form-container { padding: 1rem; } .numbers-container { align-items: center; } .numbers-container > div { width: 50%; } } @media (max-width: 63.9375rem) { .top-bar nav li.submenu span { text-transform: uppercase; color: var(--color-white); font-weight: 700; } .top-bar nav li.submenu[data-active] ul.submenu { opacity: 1; pointer-events: all; } .hero-absolute-container { margin-top: unset; } .hero--swiper .hero-absolute-container { margin-top: unset; position: absolute; z-index: 4; bottom: unset; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .hero--homepage h1 { font-size: 2rem; line-height: 1.2; } .section { padding: 1rem 0; } .section > *:not(:last-child), .section .grid-container > *:not(:last-child) { margin-bottom: 1rem; } .top-bar nav ul::after { display: none; } .top-bar ul li a { color: var(--color-white); } .top-bar ul li a::after, .top-bar ul li.active a::after { background-color: var(--color-white); } .full-grid-container { padding: 0 var(--grid-container-padding-x); } .product-service { padding: 1rem; } .numbers-container { flex-wrap: wrap; text-align: center; gap: .25rem; } .numbers-container > div { width: 100%; } } @media print { }