/*
* Base
*/
/*
! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: currentColor; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 0.1rem; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -0.2rem; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
html {
height: 100%;
}
body {
display: flex;
min-height: 100%;
flex-direction: column;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
main {
flex-grow: 1;
}
@font-face {
font-family: "Optician Sans";
src: url("OpticianSans-Regular.woff2") format("woff2"),
url("OpticianSans-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nexa";
src: url("Nexa-Regular.woff2") format("woff2"),
url("Nexa-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nexa";
src: url("Nexa-Light.woff2") format("woff2"),
url("Nexa-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nexa";
src: url("Nexa-Bold.woff2") format("woff2"),
url("Nexa-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
.form-check {
position: relative;
display: inline-flex;
align-items: center;
padding-left: 2.6rem;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
position: absolute;
z-index: -1;
opacity: 0;
}
.form-check input[type="checkbox"] + span, .form-check input[type="radio"] + span {
display: block;
text-transform: capitalize;
}
.form-check input[type="checkbox"] + span::before,
.form-check input[type="checkbox"] + span::after,
.form-check input[type="radio"] + span::before,
.form-check input[type="radio"] + span::after {
display: block;
--tw-content: "";
content: var(--tw-content);
}
.form-check input[type="checkbox"] + span::before, .form-check input[type="radio"] + span::before {
position: absolute;
top: 0.3rem;
left: 0;
height: 1.8rem;
width: 1.8rem;
border-radius: 0.4rem;
border-width: 0.1rem;
--tw-border-opacity: 1;
border-color: rgb(31 30 29 / var(--tw-border-opacity));
background-color: rgba(255,255,255, 0);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1440px) {
.form-check input[type="checkbox"] + span::before, .form-check input[type="radio"] + span::before {
top: 0.6rem;
}
}
.form-check input[type="checkbox"] + span::after, .form-check input[type="radio"] + span::after {
position: absolute;
top: 0.8rem;
left: 0.5rem;
height: 0.8rem;
width: 0.8rem;
border-radius: 999.9rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
opacity: 0;
transition-property: opacity;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1440px) {
.form-check input[type="checkbox"] + span::after, .form-check input[type="radio"] + span::after {
top: 1.1rem;
}
}
.form-check input[type="checkbox"]:focus:not(:disabled) + span, .form-check input[type="checkbox"]:hover:not(:disabled) + span, .form-check input[type="radio"]:focus:not(:disabled) + span, .form-check input[type="radio"]:hover:not(:disabled) + span {
cursor: pointer;
}
.form-check input[type="checkbox"]:focus:not(:disabled):not(:checked) + span::before, .form-check input[type="checkbox"]:hover:not(:disabled):not(:checked) + span::before, .form-check input[type="radio"]:focus:not(:disabled):not(:checked) + span::before, .form-check input[type="radio"]:hover:not(:disabled):not(:checked) + span::before {
background-color: rgb(31 30 29 / 0.05);
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.form-check input[type="checkbox"]:checked + span, .form-check input[type="radio"]:checked + span {
font-weight: 700;
}
.form-check input[type="checkbox"]:checked + span::before, .form-check input[type="radio"]:checked + span::before {
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.form-check input[type="checkbox"]:checked + span::after, .form-check input[type="radio"]:checked + span::after {
opacity: 1;
}
.form-check input[type="checkbox"]:disabled + span, .form-check input[type="radio"]:disabled + span {
pointer-events: none;
opacity: 0.5;
}
.form-check .form-check--round input + span::before {
border-radius: 999.9rem;
}
.image-form-check input[type="checkbox"],
.image-form-check input[type="radio"] {
position: absolute;
z-index: -1;
opacity: 0;
}
.image-form-check input[type="checkbox"] + .image-container::before, .image-form-check input[type="radio"] + .image-container::before {
position: absolute;
inset: -0.6rem;
display: block;
height: calc(100% + 1.2rem);
width: calc(100% + 1.2rem);
border-radius: 2.2rem;
border-width: 0.1rem;
border-color: rgba(255,255,255, 0);
background-color: rgba(255,255,255, 0);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--tw-content: "";
content: var(--tw-content);
}
@media (min-width: 1024px) {
.image-form-check input[type="checkbox"] + .image-container::before, .image-form-check input[type="radio"] + .image-container::before {
border-radius: 2.8rem;
}
}
.image-form-check input[type="checkbox"]:focus:not(:disabled) + .image-container, .image-form-check input[type="checkbox"]:hover:not(:disabled) + .image-container, .image-form-check input[type="radio"]:focus:not(:disabled) + .image-container, .image-form-check input[type="radio"]:hover:not(:disabled) + .image-container {
cursor: pointer;
}
.image-form-check input[type="checkbox"]:checked + .image-container > span, .image-form-check input[type="radio"]:checked + .image-container > span {
border-radius: 1.6rem;
}
@media (min-width: 1024px) {
.image-form-check input[type="checkbox"]:checked + .image-container > span, .image-form-check input[type="radio"]:checked + .image-container > span {
border-radius: 2.4rem;
}
}
.image-form-check input[type="checkbox"]:checked + .image-container::before, .image-form-check input[type="radio"]:checked + .image-container::before {
border-color: rgb(255 255 255 / 0.3);
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
@media (min-width: 768px) {
.radius-link-hover:has(a:hover) {
border-radius: 2.4rem;
}
.adjacent-radius-link-hover-container:has(a:hover) .adjacent-radius-link-hover {
border-radius: 2.4rem;
}
}
:root {
font-size: 62.5%;
}
body {
font-family: Nexa, Helvetica, Arial, sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1440px) {
body {
font-size: 1.8rem;
}
}
@media (min-width: 1660px) {
body {
font-size: 2rem;
}
}
a {
text-underline-offset: 0.2rem;
}
/*
* Components
*/
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
@media (min-width: 100%) {
.container {
max-width: 100%;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
}
.aspect-h-1 {
--tw-aspect-h: 1;
}
.aspect-h-3 {
--tw-aspect-h: 3;
}
.aspect-w-1 {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1;
}
.aspect-w-1 > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect-w-4 {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 4;
}
.aspect-w-4 > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect-w-\[1\.1\] {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1.1;
}
.aspect-w-\[1\.1\] > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect-w-\[1\.2\] {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1.2;
}
.aspect-w-\[1\.2\] > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect-w-\[1\.53\] {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1.53;
}
.aspect-w-\[1\.53\] > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect-w-\[1\] {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1;
}
.aspect-w-\[1\] > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.h16-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
line-height: 100%;
}
.h18 {
font-size: 1.8rem;
line-height: 110%;
}
.h18-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.8rem;
line-height: 90%;
}
.h20 {
font-size: 2rem;
line-height: 130%;
}
.h20-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 2rem;
line-height: 100%;
}
.h22 {
font-size: 2.2rem;
line-height: 130%;
}
.h24 {
font-size: 2.4rem;
line-height: 130%;
}
.h24-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 2.4rem;
line-height: 90%;
}
.h28 {
font-size: 2.8rem;
line-height: 125%;
}
.h28-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 2.8rem;
line-height: 90%;
}
.h32-130 {
font-size: 3.2rem;
line-height: 130%;
}
.h32-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 3.2rem;
line-height: 90%;
}
.h40-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 4rem;
line-height: 90%;
}
.h44-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 4.4rem;
line-height: 90%;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4.8rem;
border-width: 0.1rem;
border-color: rgba(255,255,255, 0);
padding-left: 1.6rem;
padding-right: 1.6rem;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
text-align: center;
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
line-height: 1;
letter-spacing: -0.01em;
}
@media (min-width: 1440px) {
.btn {
padding-left: 1.8rem;
padding-right: 1.8rem;
padding-top: 1.1rem;
padding-bottom: 1.1rem;
color: 18x;
}
}
@media (min-width: 1660px) {
.btn {
font-size: 2rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.btn:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.btn:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.btn:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.btn:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span, .btn:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.btn:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span, .btn:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.btn:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.btn:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
}
.btn:not(:disabled) {
cursor: pointer;
}
.btn-lg {
padding-left: 2.4rem;
padding-right: 2.4rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media (min-width: 1440px) {
.btn-lg {
padding-left: 2.8rem;
padding-right: 2.8rem;
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
}
.btn-full {
display: flex;
width: 100%;
justify-content: center;
}
.btn-primary {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.btn-primary-inverted {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.btn-secondary {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(214 67 0 / var(--tw-text-opacity));
}
.btn-light {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.btn-dark {
--tw-border-opacity: 1;
border-color: rgb(31 30 29 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(31 30 29 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-light-outline {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
background-color: rgba(255,255,255, 0);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
transition-property: color,background-color;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-light-outline:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.btn-light-outline:focus {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.btn-dark-outline {
--tw-border-opacity: 1;
border-color: rgb(31 30 29 / var(--tw-border-opacity));
background-color: rgba(255,255,255, 0);
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
transition-property: color,background-color;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-dark-outline:hover {
--tw-bg-opacity: 1;
background-color: rgb(31 30 29 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-dark-outline:focus {
--tw-bg-opacity: 1;
background-color: rgb(31 30 29 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-wishlist {
display: inline-flex;
align-items: center;
-moz-column-gap: 0.7rem;
column-gap: 0.7rem;
border-radius: 3.8rem;
border-width: 0.1rem;
--tw-border-opacity: 1;
border-color: rgb(240 240 240 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding-left: 1.2rem;
padding-right: 1.2rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
text-align: center;
font-family: Nexa, Helvetica, Arial, sans-serif;
font-size: 1.4rem;
line-height: 1;
letter-spacing: -0.01em;
}
.btn-text {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
border-width: 0.1rem;
border-color: rgba(255,255,255, 0);
padding: 0;
text-align: center;
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
line-height: 1;
letter-spacing: -0.01em;
}
/* Header buttons */
.btn-header {
position: relative;
display: flex;
height: 4rem;
width: 4rem;
flex: none;
align-items: center;
justify-content: center;
border-radius: 999.9rem;
}
@media (min-width: 1024px) {
.btn-header {
height: 2.2rem;
width: 2.2rem;
}
}
.btn-header > svg {
height: 2.4rem;
width: 2.4rem;
}
@media (min-width: 1024px) {
.btn-header > svg {
height: 2.2rem;
width: 2.2rem;
}
}
.btn-header > svg:last-of-type {
position: absolute;
top: 0.8rem;
left: 0.8rem;
opacity: 0;
transition-property: opacity;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
.btn-header > svg:last-of-type {
top: 0;
left: 0;
}
}
.btn-header > span {
position: absolute;
top: 0.5rem;
right: 0.2rem;
display: flex;
height: 1.6rem;
min-width: 1.6rem;
align-items: center;
justify-content: center;
border-radius: 999.9rem;
--tw-bg-opacity: 1;
background-color: rgb(31 30 29 / var(--tw-bg-opacity));
padding-left: 0.2rem;
padding-right: 0.2rem;
font-size: 1rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@media (min-width: 1024px) {
.btn-header > span {
top: -0.4rem;
right: -0.7rem;
}
}
.btn-header:hover > svg:last-of-type, .btn-header:focus > svg:last-of-type {
opacity: 1;
}
/* Text links */
.text-link {
position: relative;
text-decoration: none;
line-height: 1.5;
}
.text-link::after {
content: "";
position: absolute;
left: 0;
bottom: -0.0875em;
width: 100%;
height: 0.0875em;
background: currentColor;
transform: scale(0, 1);
transition-property: transform;
transition-duration: inherit;
transform-origin: center top;
}
.text-link:hover::after {
transform: scale(1, 1);
}
.text-link.text-link-underlined::after {
transform: scale(1, 1);
}
.text-link.text-link-underlined:hover::after {
transform: scale(0, 1);
}
/*
* Generic buttons
*/
button[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}
.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}
.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}
.splide--rtl{direction:rtl}
.splide__track--ttb>.splide__list{display:block}
.splide__container{box-sizing:border-box;position:relative}
.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}
.splide.is-initialized:not(.is-active) .splide__list{display:block}
.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}
.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}
.splide:not(.is-overflow) .splide__pagination{display:none}
.splide__progress__bar{width:0}
.splide{position:relative;visibility:hidden}
.splide.is-initialized,.splide.is-rendered{visibility:visible}
.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}
.splide__slide img{vertical-align:bottom}
.splide__spinner{animation:splide-loading 1s linear infinite;border:0.2rem solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:2rem;left:0;margin:auto;position:absolute;right:0;top:0;width:2rem}
.splide__sr{clip:rect(0 0 0 0);border:0;height:0.1rem;margin:-0.1rem;overflow:hidden;padding:0;position:absolute;width:0.1rem}
.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}
.splide__toggle.is-active .splide__toggle__pause{display:inline}
.splide__track{overflow:hidden;position:relative;z-index:0}
.splide__list {
scroll-snap-type: x var(--tw-scroll-snap-strictness);
--tw-scroll-snap-strictness: mandatory;
}
.splide__slide {
scroll-snap-align: start;
scroll-snap-stop: always;
}
.splide__arrow[disabled] {
opacity: 0.3;
}
.splide__pagination {
z-index: 1;
color: currentColor;
padding-top: 4rem;
}
.splide__pagination__page {
opacity: 1;
}
.splide__pagination__page:hover {
}
.splide__pagination__page.is-active {
opacity: 1;
}
.marquee-container {
overflow-x: hidden !important;
display: flex !important;
flex-direction: row !important;
position: relative;
width: 100%;
gap: var(--gap);
}
.marquee-container:hover div {
animation-play-state: var(--pause-on-hover);
}
.marquee-container:active div {
animation-play-state: var(--pause-on-click);
}
.marquee {
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
min-width: 100%;
gap: var(--gap);
align-items: center;
animation: scroll var(--duration) linear var(--iteration-count);
animation-play-state: var(--play);
animation-direction: var(--direction);
}
@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(calc(-100% - var(--gap)));
}
}
.form-multithumb-slider {
--thumb-size: 2.4rem;
--thumb-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
--thumb-ring-size: 0.7rem;
--thumb-ring-color: rgba(var(--accent-colour), 0.3);
--track-size: 0.3rem;
--track-color: rgba(var(--accent-colour), 0.3);
--track-highlight-color: rgba(var(--accent-colour), var(--accent-opacity, 1))
@screen lg {
--thumb-size: 1.7rem;
}
@apply block w-full;
}
.form-multithumb-slider > div {
position: relative;
width: 100%;
height: var(--thumb-size);
}
.form-multithumb-slider > div > div {
width: 100%;
height: var(--track-size);
background: var(--track-color);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.form-multithumb-slider input[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
outline: none;
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/* Track */
.form-multithumb-slider input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: calc(var(--thumb-size) / 3);
}
.form-multithumb-slider input[type="range"]::-moz-range-track {
-moz-appearance: none;
height: calc(var(--thumb-size) / 3);
}
.form-multithumb-slider input[type="range"]::-ms-track {
appearance: none;
height: calc(var(--thumb-size) / 3);
}
/* Thumb */
.form-multithumb-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: calc(calc(var(--thumb-size) / 3) * -1);
width: var(--thumb-size);
height: var(--thumb-size);
background: var(--thumb-color);
border: none;
border-radius: 50%;
pointer-events: auto;
cursor: pointer;
box-shadow: 0 0 0 0 var(--thumb-ring-color);
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.form-multithumb-slider input[type="range"]::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 var(--thumb-ring-size) var(--thumb-ring-color);
}
.form-multithumb-slider input[type="range"]::-moz-range-thumb {
-moz-appearance: none;
width: var(--thumb-size);
height: var(--thumb-size);
background: var(--thumb-color);
border: none;
border-radius: 50%;
pointer-events: auto;
cursor: pointer;
box-shadow: 0 0 0 0 var(--thumb-ring-color);
-moz-transition-property: box-shadow;
transition-property: box-shadow;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.form-multithumb-slider input[type="range"]::-moz-range-thumb:hover {
box-shadow: 0 0 0 var(--thumb-ring-size) var(--thumb-ring-color);
}
.form-multithumb-slider input[type="range"]::-ms-thumb {
appearance: none;
width: var(--thumb-size);
height: var(--thumb-size);
background: var(--thumb-color);
border: none;
border-radius: 50%;
pointer-events: auto;
cursor: pointer;
box-shadow: 0 0 0 0 var(--thumb-ring-color);
-ms-transition-property: box-shadow;
transition-property: box-shadow;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.form-multithumb-slider input[type="range"]::-ms-thumb:hover {
box-shadow: 0 0 0 var(--thumb-ring-size) var(--thumb-ring-color);
}
.form-multithumb-slider output {
margin-top: 1.2rem;
display: block;
text-align: center;
font-size: 1.6rem;
line-height: 1;
letter-spacing: -0.01em;
}
.rte {
font-size: 1.6rem;
line-height: 150%;
letter-spacing: -0.01em;
--tw-text-opacity: 1;
color: rgb(117 117 117 / var(--tw-text-opacity));
}
@media (min-width: 1440px) {
.rte {
font-size: 1.8rem;
}
}
@media (min-width: 1660px) {
.rte {
font-size: 2rem;
}
}
.rte a {
text-decoration-line: underline;
text-underline-offset: 0.2rem;
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.rte h1,
.rte h2,
.rte h3,
.rte h4,
.rte h5,
.rte h6 {
margin-top: 4rem;
margin-bottom: 2.4rem;
font-size: 2.2rem;
line-height: 1.3;
letter-spacing: -0.01em;
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.rte p {
margin-bottom: 1.6rem;
}
.rte ol,
.rte ul,
.rte dl {
margin-bottom: 1.6rem;
}
.rte ol {
list-style-type: decimal;
}
.rte ul {
list-style-type: disc;
}
.rte dl {
list-style-position: inside;
}
.rte li {
margin-bottom: 0.8rem;
margin-left: 2rem;
}
.rte li::marker {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.rte table {
margin-bottom: 1.6rem;
}
.rte strong {
font-weight: unset;
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.rte > :first-child {
margin-top: 0;
}
.rte > :last-child {
margin-bottom: 0;
}
.rte p:has(+ p > img) {
display: inline-block;
}
.rte p:has(img) + p:has(img) {
display: inline-block;
}
.rte.rte-contrast {
--tw-text-opacity: 1 !important;
color: rgb(110 110 110 / var(--tw-text-opacity)) !important;
}
.rte.rte-contrast a {
--tw-text-opacity: 1 !important;
color: rgb(200 62 0 / var(--tw-text-opacity)) !important;
}
.rte .btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4.8rem;
border-width: 0.1rem;
border-color: rgba(255,255,255, 0);
padding-left: 1.6rem;
padding-right: 1.6rem;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
text-align: center;
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
line-height: 1;
letter-spacing: -0.01em;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
text-decoration-line: none !important;
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
@media (min-width: 1440px) {
.rte .btn {
padding-left: 1.8rem;
padding-right: 1.8rem;
padding-top: 1.1rem;
padding-bottom: 1.1rem;
color: 18x;
}
}
@media (min-width: 1660px) {
.rte .btn {
font-size: 2rem;
}
}
/* Customer Accounts */
.template-customers-account body, .template-customers-order body, .template-customers-addresses body {
--tw-bg-opacity: 1;
background-color: rgb(245 243 241 / var(--tw-bg-opacity));
}
/* Shopify Challenge */
.template-captcha .shopify-challenge__container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
@media (min-width: 100%) {
.template-captcha .shopify-challenge__container {
max-width: 100%;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
}
.template-captcha .shopify-challenge__container {
padding-top: 6.4rem;
padding-bottom: 6.4rem;
padding-left: 1.6rem;
padding-right: 1.6rem;
}
@media (min-width: 768px) {
.template-captcha .shopify-challenge__container {
padding-left: 2.4rem;
padding-right: 2.4rem
}
}
@media (min-width: 1024px) {
.template-captcha .shopify-challenge__container {
padding-left: 2.4rem;
padding-right: 2.4rem;
padding-top: 8rem;
padding-bottom: 8rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__message {
margin-bottom: 2.4rem;
font-size: 1.6rem;
line-height: 150%;
letter-spacing: -0.01em;
--tw-text-opacity: 1;
color: rgb(117 117 117 / var(--tw-text-opacity));
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__message {
font-size: 1.8rem;
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__message {
font-size: 2rem;
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__message a {
text-decoration-line: underline;
text-underline-offset: 0.2rem;
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.template-captcha .shopify-challenge__container .shopify-challenge__message h1,.template-captcha .shopify-challenge__container .shopify-challenge__message h2,.template-captcha .shopify-challenge__container .shopify-challenge__message h3,.template-captcha .shopify-challenge__container .shopify-challenge__message h4,.template-captcha .shopify-challenge__container .shopify-challenge__message h5,.template-captcha .shopify-challenge__container .shopify-challenge__message h6 {
margin-top: 4rem;
margin-bottom: 2.4rem;
font-size: 2.2rem;
line-height: 1.3;
letter-spacing: -0.01em;
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.template-captcha .shopify-challenge__container .shopify-challenge__message p {
margin-bottom: 1.6rem;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message ol,.template-captcha .shopify-challenge__container .shopify-challenge__message ul,.template-captcha .shopify-challenge__container .shopify-challenge__message dl {
margin-bottom: 1.6rem;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message ol {
list-style-type: decimal;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message ul {
list-style-type: disc;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message dl {
list-style-position: inside;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message li {
margin-bottom: 0.8rem;
margin-left: 2rem;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message li::marker {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.template-captcha .shopify-challenge__container .shopify-challenge__message table {
margin-bottom: 1.6rem;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message strong {
font-weight: unset;
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.template-captcha .shopify-challenge__container .shopify-challenge__message > :first-child {
margin-top: 0;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message > :last-child {
margin-bottom: 0;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message p:has(+ p > img) {
display: inline-block;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message p:has(img) + p:has(img) {
display: inline-block;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message.rte-contrast {
--tw-text-opacity: 1 !important;
color: rgb(110 110 110 / var(--tw-text-opacity)) !important;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message.rte-contrast a {
--tw-text-opacity: 1 !important;
color: rgb(200 62 0 / var(--tw-text-opacity)) !important;
}
.template-captcha .shopify-challenge__container .shopify-challenge__message .btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4.8rem;
border-width: 0.1rem;
border-color: rgba(255,255,255, 0);
padding-left: 1.6rem;
padding-right: 1.6rem;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
text-align: center;
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
line-height: 1;
letter-spacing: -0.01em;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
text-decoration-line: none !important;
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__message .btn {
padding-left: 1.8rem;
padding-right: 1.8rem;
padding-top: 1.1rem;
padding-bottom: 1.1rem;
color: 18x;
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__message .btn {
font-size: 2rem;
}
}
.template-captcha .shopify-challenge__container .g-recaptcha {
margin-bottom: 2.4rem;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4.8rem;
border-width: 0.1rem;
border-color: rgba(255,255,255, 0);
padding-left: 1.6rem;
padding-right: 1.6rem;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
text-align: center;
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
line-height: 1;
letter-spacing: -0.01em;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button {
padding-left: 1.8rem;
padding-right: 1.8rem;
padding-top: 1.1rem;
padding-bottom: 1.1rem;
color: 18x;
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button {
font-size: 2rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.6rem;
text-shadow: 0 calc(var(--font-size) * 2) 0 currentColor;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 1.8rem
}
}
@media (min-width: 1660px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) {
--font-size: 2rem
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: calc(var(--font-size) * -2);
}
@media (forced-colors: active) {
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):hover span,.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot):focus span {
--m: 0
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:has(svg, .btn-text, .btn-wishlist), [disabled], .btn-dot) > span:not(.sr-only) span {
display: flex;
align-items: center;
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateY(var(--m)) translateZ(0);
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button:not(:disabled) {
cursor: pointer;
}
.template-captcha .shopify-challenge__container .shopify-challenge__button {
padding-left: 2.4rem;
padding-right: 2.4rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media (min-width: 1440px) {
.template-captcha .shopify-challenge__container .shopify-challenge__button {
padding-left: 2.8rem;
padding-right: 2.8rem;
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
}
.template-captcha .shopify-challenge__container .shopify-challenge__button {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
margin-left: auto;
margin-right: auto;
display: flex;
}
.rte .template-captcha .shopify-challenge__container .shopify-challenge__button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4.8rem;
border-width: 0.1rem;
border-color: rgba(255,255,255, 0);
padding-left: 1.6rem;
padding-right: 1.6rem;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
text-align: center;
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
line-height: 1;
letter-spacing: -0.01em;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
text-decoration-line: none !important;
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
@media (min-width: 1440px) {
.rte .template-captcha .shopify-challenge__container .shopify-challenge__button {
padding-left: 1.8rem;
padding-right: 1.8rem;
padding-top: 1.1rem;
padding-bottom: 1.1rem;
color: 18x;
}
}
@media (min-width: 1660px) {
.rte .template-captcha .shopify-challenge__container .shopify-challenge__button {
font-size: 2rem;
}
}
.swym-button-bar {
display: none !important;
}
/*
* Utilities
*/
.sr-only {
position: absolute;
width: 0.1rem;
height: 0.1rem;
padding: 0;
margin: -0.1rem;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.\!visible {
visibility: visible !important;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0;
}
.inset-\[2px\] {
inset: 0.2rem;
}
.inset-\[3px\] {
inset: 0.3rem;
}
.inset-x-0 {
left: 0;
right: 0;
}
.inset-x-\[16px\] {
left: 1.6rem;
right: 1.6rem;
}
.inset-x-\[8px\] {
left: 0.8rem;
right: 0.8rem;
}
.bottom-0 {
bottom: 0;
}
.bottom-\[16px\] {
bottom: 1.6rem;
}
.left-0 {
left: 0;
}
.left-1\/2 {
left: 50%;
}
.left-\[16px\] {
left: 1.6rem;
}
.left-\[20px\] {
left: 2rem;
}
.right-0 {
right: 0;
}
.right-\[16px\] {
right: 1.6rem;
}
.right-\[18px\] {
right: 1.8rem;
}
.right-\[8px\] {
right: 0.8rem;
}
.top-0 {
top: 0;
}
.top-1\/2 {
top: 50%;
}
.top-\[-114px\] {
top: -11.4rem;
}
.top-\[-48px\] {
top: -4.8rem;
}
.top-\[-56px\] {
top: -5.6rem;
}
.top-\[-60px\] {
top: -6rem;
}
.top-\[114px\] {
top: 11.4rem;
}
.top-\[16px\] {
top: 1.6rem;
}
.top-\[3px\] {
top: 0.3rem;
}
.top-\[56px\] {
top: 5.6rem;
}
.top-\[8px\] {
top: 0.8rem;
}
.top-full {
top: 100%;
}
.z-10 {
z-index: 10;
}
.z-\[10\] {
z-index: 10;
}
.z-\[11\] {
z-index: 11;
}
.z-\[1\] {
z-index: 1;
}
.z-\[2\] {
z-index: 2;
}
.z-\[5\] {
z-index: 5;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-first {
order: -9999;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.col-span-full {
grid-column: 1 / -1;
}
.col-start-1 {
grid-column-start: 1;
}
.col-start-3 {
grid-column-start: 3;
}
.row-start-1 {
grid-row-start: 1;
}
.row-start-2 {
grid-row-start: 2;
}
.row-start-3 {
grid-row-start: 3;
}
.m-auto {
margin: auto;
}
.mx-\[-16px\] {
margin-left: -1.6rem;
margin-right: -1.6rem;
}
.mx-\[12px\] {
margin-left: 1.2rem;
margin-right: 1.2rem;
}
.mx-\[20px\] {
margin-left: 2rem;
margin-right: 2rem;
}
.mx-\[2px\] {
margin-left: 0.2rem;
margin-right: 0.2rem;
}
.mx-\[4px\] {
margin-left: 0.4rem;
margin-right: 0.4rem;
}
.mx-\[6px\] {
margin-left: 0.6rem;
margin-right: 0.6rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-\[-4px\] {
margin-top: -0.4rem;
margin-bottom: -0.4rem;
}
.my-\[16px\] {
margin-top: 1.6rem;
margin-bottom: 1.6rem;
}
.my-\[24px\] {
margin-top: 2.4rem;
margin-bottom: 2.4rem;
}
.\!mr-\[16px\] {
margin-right: 1.6rem !important;
}
.-mb-1 {
margin-bottom: -0.25rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-\[-2px\] {
margin-bottom: -0.2rem;
}
.mb-\[10px\] {
margin-bottom: 1rem;
}
.mb-\[12px\] {
margin-bottom: 1.2rem;
}
.mb-\[16px\] {
margin-bottom: 1.6rem;
}
.mb-\[20px\] {
margin-bottom: 2rem;
}
.mb-\[24px\] {
margin-bottom: 2.4rem;
}
.mb-\[32px\] {
margin-bottom: 3.2rem;
}
.mb-\[40px\] {
margin-bottom: 4rem;
}
.mb-\[4px\] {
margin-bottom: 0.4rem;
}
.mb-\[5px\] {
margin-bottom: 0.5rem;
}
.mb-\[64px\] {
margin-bottom: 6.4rem;
}
.mb-\[80px\] {
margin-bottom: 8rem;
}
.mb-\[8px\] {
margin-bottom: 0.8rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-\[12px\] {
margin-left: 1.2rem;
}
.ml-\[16px\] {
margin-left: 1.6rem;
}
.ml-\[20px\] {
margin-left: 2rem;
}
.ml-\[24px\] {
margin-left: 2.4rem;
}
.ml-\[2px\] {
margin-left: 0.2rem;
}
.ml-\[3px\] {
margin-left: 0.3rem;
}
.ml-\[4px\] {
margin-left: 0.4rem;
}
.ml-\[5px\] {
margin-left: 0.5rem;
}
.ml-\[6px\] {
margin-left: 0.6rem;
}
.ml-\[7px\] {
margin-left: 0.7rem;
}
.ml-\[8px\] {
margin-left: 0.8rem;
}
.ml-auto {
margin-left: auto;
}
.mr-\[-8px\] {
margin-right: -0.8rem;
}
.mr-\[12px\] {
margin-right: 1.2rem;
}
.mr-\[16px\] {
margin-right: 1.6rem;
}
.mr-\[4px\] {
margin-right: 0.4rem;
}
.mr-\[6px\] {
margin-right: 0.6rem;
}
.mr-\[8px\] {
margin-right: 0.8rem;
}
.mr-auto {
margin-right: auto;
}
.mt-\[-\.2em\] {
margin-top: -.2em;
}
.mt-\[-16px\] {
margin-top: -1.6rem;
}
.mt-\[-1px\] {
margin-top: -0.1rem;
}
.mt-\[-2px\] {
margin-top: -0.2rem;
}
.mt-\[-40px\] {
margin-top: -4rem;
}
.mt-\[10px\] {
margin-top: 1rem;
}
.mt-\[12px\] {
margin-top: 1.2rem;
}
.mt-\[13px\] {
margin-top: 1.3rem;
}
.mt-\[14px\] {
margin-top: 1.4rem;
}
.mt-\[16px\] {
margin-top: 1.6rem;
}
.mt-\[18px\] {
margin-top: 1.8rem;
}
.mt-\[20px\] {
margin-top: 2rem;
}
.mt-\[24px\] {
margin-top: 2.4rem;
}
.mt-\[2px\] {
margin-top: 0.2rem;
}
.mt-\[32px\] {
margin-top: 3.2rem;
}
.mt-\[3px\] {
margin-top: 0.3rem;
}
.mt-\[40px\] {
margin-top: 4rem;
}
.mt-\[48px\] {
margin-top: 4.8rem;
}
.mt-\[4px\] {
margin-top: 0.4rem;
}
.mt-\[56px\] {
margin-top: 5.6rem;
}
.mt-\[64px\] {
margin-top: 6.4rem;
}
.mt-\[6px\] {
margin-top: 0.6rem;
}
.mt-\[8px\] {
margin-top: 0.8rem;
}
.mt-\[9px\] {
margin-top: 0.9rem;
}
.mt-auto {
margin-top: auto;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.\!hidden {
display: none !important;
}
.hidden {
display: none;
}
.\!h-0 {
height: 0 !important;
}
.\!h-auto {
height: auto !important;
}
.\!h-full {
height: 100% !important;
}
.h-\[100px\] {
height: 10rem;
}
.h-\[100svh\] {
height: 100svh;
}
.h-\[104px\] {
height: 10.4rem;
}
.h-\[10px\] {
height: 1rem;
}
.h-\[11px\] {
height: 1.1rem;
}
.h-\[13px\] {
height: 1.3rem;
}
.h-\[14px\] {
height: 1.4rem;
}
.h-\[164px\] {
height: 16.4rem;
}
.h-\[16px\] {
height: 1.6rem;
}
.h-\[175px\] {
height: 17.5rem;
}
.h-\[17px\] {
height: 1.7rem;
}
.h-\[18px\] {
height: 1.8rem;
}
.h-\[19px\] {
height: 1.9rem;
}
.h-\[1px\] {
height: 0.1rem;
}
.h-\[20px\] {
height: 2rem;
}
.h-\[24px\] {
height: 2.4rem;
}
.h-\[250px\] {
height: 25rem;
}
.h-\[26px\] {
height: 2.6rem;
}
.h-\[270px\] {
height: 27rem;
}
.h-\[28px\] {
height: 2.8rem;
}
.h-\[300\] {
height: 300;
}
.h-\[300px\] {
height: 30rem;
}
.h-\[311px\] {
height: 31.1rem;
}
.h-\[319px\] {
height: 31.9rem;
}
.h-\[32px\] {
height: 3.2rem;
}
.h-\[343px\] {
height: 34.3rem;
}
.h-\[34px\] {
height: 3.4rem;
}
.h-\[36px\] {
height: 3.6rem;
}
.h-\[375px\] {
height: 37.5rem;
}
.h-\[387px\] {
height: 38.7rem;
}
.h-\[3px\] {
height: 0.3rem;
}
.h-\[400px\] {
height: 40rem;
}
.h-\[40px\] {
height: 4rem;
}
.h-\[50px\] {
height: 5rem;
}
.h-\[52px\] {
height: 5.2rem;
}
.h-\[64px\] {
height: 6.4rem;
}
.h-\[6px\] {
height: 0.6rem;
}
.h-\[72px\] {
height: 7.2rem;
}
.h-\[73px\] {
height: 7.3rem;
}
.h-\[7px\] {
height: 0.7rem;
}
.h-\[80px\] {
height: 8rem;
}
.h-\[82px\] {
height: 8.2rem;
}
.h-\[85px\] {
height: 8.5rem;
}
.h-\[86px\] {
height: 8.6rem;
}
.h-\[8px\] {
height: 0.8rem;
}
.h-\[9px\] {
height: 0.9rem;
}
.h-\[calc\(100svh-114px-var\(--ticker-height\)\)\] {
height: calc(100svh - 11.4rem - var(--ticker-height));
}
.h-auto {
height: auto;
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.h-full {
height: 100%;
}
.h-\[calc\(100\%\+114px\)\] {
height: calc(100% + 11.4rem);
}
.max-h-\[175px\] {
max-height: 17.5rem;
}
.max-h-\[250px\] {
max-height: 25rem;
}
.max-h-\[36px\] {
max-height: 3.6rem;
}
.max-h-\[56px\] {
max-height: 5.6rem;
}
.max-h-\[80\%\] {
max-height: 80%;
}
.max-h-\[calc\(100dvh-114px-var\(--ticker-height\)\)\] {
max-height: calc(100dvh - 11.4rem - var(--ticker-height));
}
.max-h-\[calc\(100svh-114px-var\(--ticker-height\)\)\] {
max-height: calc(100svh - 11.4rem - var(--ticker-height));
}
.min-h-\[180px\] {
min-height: 18rem;
}
.min-h-\[200px\] {
min-height: 20rem;
}
.min-h-\[300px\] {
min-height: 30rem;
}
.min-h-\[100svh\] {
min-height: 100svh;
}
.min-h-\[calc\(100svh-114px\)\] {
min-height: calc(100svh - 11.4rem);
}
.\!w-0 {
width: 0 !important;
}
.\!w-\[calc\(75\%\+8px\)\] {
width: calc(75% + 0.8rem) !important;
}
.\!w-full {
width: 100% !important;
}
.w-1\/2 {
width: 50%;
}
.w-1\/3 {
width: 33.333333%;
}
.w-1\/5 {
width: 20%;
}
.w-2\/5 {
width: 40%;
}
.w-3\/5 {
width: 60%;
}
.w-\[10\%\] {
width: 10%;
}
.w-\[100px\] {
width: 10rem;
}
.w-\[1044px\] {
width: 104.4rem;
}
.w-\[104px\] {
width: 10.4rem;
}
.w-\[106px\] {
width: 10.6rem;
}
.w-\[10px\] {
width: 1rem;
}
.w-\[11px\] {
width: 1.1rem;
}
.w-\[13px\] {
width: 1.3rem;
}
.w-\[14px\] {
width: 1.4rem;
}
.w-\[15\%\] {
width: 15%;
}
.w-\[16px\] {
width: 1.6rem;
}
.w-\[175px\] {
width: 17.5rem;
}
.w-\[17px\] {
width: 1.7rem;
}
.w-\[18px\] {
width: 1.8rem;
}
.w-\[19px\] {
width: 1.9rem;
}
.w-\[20px\] {
width: 2rem;
}
.w-\[22px\] {
width: 2.2rem;
}
.w-\[24px\] {
width: 2.4rem;
}
.w-\[28px\] {
width: 2.8rem;
}
.w-\[30\%\] {
width: 30%;
}
.w-\[32px\] {
width: 3.2rem;
}
.w-\[34px\] {
width: 3.4rem;
}
.w-\[36px\] {
width: 3.6rem;
}
.w-\[37\.3\%\] {
width: 37.3%;
}
.w-\[40px\] {
width: 4rem;
}
.w-\[42px\] {
width: 4.2rem;
}
.w-\[45\%\] {
width: 45%;
}
.w-\[64px\] {
width: 6.4rem;
}
.w-\[6px\] {
width: 0.6rem;
}
.w-\[70\%\] {
width: 70%;
}
.w-\[73px\] {
width: 7.3rem;
}
.w-\[74px\] {
width: 7.4rem;
}
.w-\[75\%\] {
width: 75%;
}
.w-\[80px\] {
width: 8rem;
}
.w-\[82px\] {
width: 8.2rem;
}
.w-\[85\%\] {
width: 85%;
}
.w-\[86px\] {
width: 8.6rem;
}
.w-\[8px\] {
width: 0.8rem;
}
.w-\[90\.4px\] {
width: 9.04rem;
}
.w-\[94px\] {
width: 9.4rem;
}
.w-\[95\%\] {
width: 95%;
}
.w-\[9px\] {
width: 0.9rem;
}
.w-\[calc\(75\%-12px\)\] {
width: calc(75% - 1.2rem);
}
.w-\[calc\(75\%-8px\)\] {
width: calc(75% - 0.8rem);
}
.w-auto {
width: auto;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.max-w-\[32px\] {
max-width: 3.2rem;
}
.max-w-\[330px\] {
max-width: 33rem;
}
.max-w-\[344px\] {
max-width: 34.4rem;
}
.max-w-\[360px\] {
max-width: 36rem;
}
.max-w-\[40px\] {
max-width: 4rem;
}
.max-w-\[448px\] {
max-width: 44.8rem;
}
.max-w-\[450px\] {
max-width: 45rem;
}
.max-w-\[454px\] {
max-width: 45.4rem;
}
.max-w-\[500px\] {
max-width: 50rem;
}
.max-w-\[506px\] {
max-width: 50.6rem;
}
.max-w-\[600px\] {
max-width: 60rem;
}
.max-w-\[90\%\] {
max-width: 90%;
}
.max-w-\[97px\] {
max-width: 9.7rem;
}
.max-w-\[1000px\] {
max-width: 100rem;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-none {
flex: none;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.origin-bottom-left {
transform-origin: bottom left;
}
.origin-center {
transform-origin: center;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-2 {
--tw-translate-y: -0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[36px\] {
--tw-translate-x: 3.6rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[4px\] {
--tw-translate-x: 0.4rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
--tw-translate-x: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
--tw-translate-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1\/2 {
--tw-translate-y: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
--tw-rotate: -90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[-35deg\] {
--tw-rotate: -35deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[180deg\] {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\!transform-none {
transform: none !important;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin-slow {
animation: spin 30s linear infinite;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.snap-start {
scroll-snap-align: start;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.\!flex-col-reverse {
flex-direction: column-reverse !important;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.place-content-center {
place-content: center;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-4 {
gap: 1rem;
}
.gap-\[10px\] {
gap: 1rem;
}
.gap-\[11px\] {
gap: 1.1rem;
}
.gap-\[12px\] {
gap: 1.2rem;
}
.gap-\[15px\] {
gap: 1.5rem;
}
.gap-\[16px\] {
gap: 1.6rem;
}
.gap-\[18px\] {
gap: 1.8rem;
}
.gap-\[20px\] {
gap: 2rem;
}
.gap-\[24px\] {
gap: 2.4rem;
}
.gap-\[2px\] {
gap: 0.2rem;
}
.gap-\[32px\] {
gap: 3.2rem;
}
.gap-\[40px\] {
gap: 4rem;
}
.gap-\[4px\] {
gap: 0.4rem;
}
.gap-\[5px\] {
gap: 0.5rem;
}
.gap-\[6px\] {
gap: 0.6rem;
}
.gap-\[8px\] {
gap: 0.8rem;
}
.gap-x-\[1\.3px\] {
-moz-column-gap: 0.13rem;
column-gap: 0.13rem;
}
.gap-x-\[15px\] {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.gap-x-\[16px\] {
-moz-column-gap: 1.6rem;
column-gap: 1.6rem;
}
.gap-x-\[24px\] {
-moz-column-gap: 2.4rem;
column-gap: 2.4rem;
}
.gap-x-\[2px\] {
-moz-column-gap: 0.2rem;
column-gap: 0.2rem;
}
.gap-x-\[36px\] {
-moz-column-gap: 3.6rem;
column-gap: 3.6rem;
}
.gap-x-\[6px\] {
-moz-column-gap: 0.6rem;
column-gap: 0.6rem;
}
.gap-x-\[8px\] {
-moz-column-gap: 0.8rem;
column-gap: 0.8rem;
}
.gap-y-\[16px\] {
row-gap: 1.6rem;
}
.gap-y-\[20px\] {
row-gap: 2rem;
}
.gap-y-\[40px\] {
row-gap: 4rem;
}
.gap-y-\[4px\] {
row-gap: 0.4rem;
}
.gap-y-\[8px\] {
row-gap: 0.8rem;
}
.self-center {
align-self: center;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-y-auto {
overflow-y: auto;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whitespace-normal {
white-space: normal;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded-\[36px\] {
border-radius: 3.6rem;
}
.rounded-\[37px\] {
border-radius: 3.7rem;
}
.rounded-\[40px\] {
border-radius: 4rem;
}
.rounded-\[56px\] {
border-radius: 5.6rem;
}
.rounded-\[8px\] {
border-radius: 0.8rem;
}
.rounded-full {
border-radius: 999.9rem;
}
.border {
border-width: 0.1rem;
}
.border-y {
border-top-width: 0.1rem;
border-bottom-width: 0.1rem;
}
.\!border-b-0 {
border-bottom-width: 0 !important;
}
.border-b {
border-bottom-width: 0.1rem;
}
.border-r {
border-right-width: 0.1rem;
}
.border-t {
border-top-width: 0.1rem;
}
.\!border-none {
border-style: none !important;
}
.\!border-black {
--tw-border-opacity: 1 !important;
border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important;
}
.\!border-slate {
--tw-border-opacity: 1 !important;
border-color: rgb(31 30 29 / var(--tw-border-opacity)) !important;
}
.border-\[\#EDEBE9\] {
--tw-border-opacity: 1;
border-color: rgb(237 235 233 / var(--tw-border-opacity));
}
.border-\[\#F0F0F0\] {
--tw-border-opacity: 1;
border-color: rgb(240 240 240 / var(--tw-border-opacity));
}
.border-black\/10 {
border-color: rgb(0 0 0 / 0.1);
}
.border-black\/30 {
border-color: rgb(0 0 0 / 0.3);
}
.border-slate {
--tw-border-opacity: 1;
border-color: rgb(31 30 29 / var(--tw-border-opacity));
}
.border-slate\/10 {
border-color: rgb(31 30 29 / 0.1);
}
.border-slate\/20 {
border-color: rgb(31 30 29 / 0.2);
}
.border-slate\/30 {
border-color: rgb(31 30 29 / 0.3);
}
.border-slate\/50 {
border-color: rgb(31 30 29 / 0.5);
}
.border-transparent {
border-color: rgba(255,255,255, 0);
}
.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.border-white\/10 {
border-color: rgb(255 255 255 / 0.1);
}
.border-white\/25 {
border-color: rgb(255 255 255 / 0.25);
}
.border-white\/50 {
border-color: rgb(255 255 255 / 0.5);
}
.\!bg-black {
--tw-bg-opacity: 1 !important;
background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important;
}
.\!bg-slate {
--tw-bg-opacity: 1 !important;
background-color: rgb(31 30 29 / var(--tw-bg-opacity)) !important;
}
.\!bg-transparent {
background-color: rgba(255,255,255, 0) !important;
}
.bg-\[var\(--theme-colour\)\] {
background-color: var(--theme-colour);
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-black\/20 {
background-color: rgb(0 0 0 / 0.2);
}
.bg-blush {
--tw-bg-opacity: 1;
background-color: rgb(181 87 122 / var(--tw-bg-opacity));
}
.bg-blush-light {
--tw-bg-opacity: 1;
background-color: rgb(221 133 166 / var(--tw-bg-opacity));
}
.bg-blush-light\/40 {
background-color: rgb(221 133 166 / 0.4);
}
.bg-blush\/40 {
background-color: rgb(181 87 122 / 0.4);
}
.bg-current {
background-color: currentColor;
}
.bg-error {
--tw-bg-opacity: 1;
background-color: rgb(190 36 26 / var(--tw-bg-opacity));
}
.bg-grey {
--tw-bg-opacity: 1;
background-color: rgb(117 117 117 / var(--tw-bg-opacity));
}
.bg-orange-darker {
--tw-bg-opacity: 1;
background-color: rgb(214 67 0 / var(--tw-bg-opacity));
}
.bg-sage {
--tw-bg-opacity: 1;
background-color: rgb(114 120 90 / var(--tw-bg-opacity));
}
.bg-sage-light {
--tw-bg-opacity: 1;
background-color: rgb(128 133 106 / var(--tw-bg-opacity));
}
.bg-sage-light\/40 {
background-color: rgb(128 133 106 / 0.4);
}
.bg-slate {
--tw-bg-opacity: 1;
background-color: rgb(31 30 29 / var(--tw-bg-opacity));
}
.bg-slate\/70 {
background-color: rgb(31 30 29 / 0.7);
}
.bg-stone {
--tw-bg-opacity: 1;
background-color: rgb(245 243 241 / var(--tw-bg-opacity));
}
.bg-success {
--tw-bg-opacity: 1;
background-color: rgb(46 133 13 / var(--tw-bg-opacity));
}
.bg-violet {
--tw-bg-opacity: 1;
background-color: rgb(110 117 150 / var(--tw-bg-opacity));
}
.bg-violet-light {
--tw-bg-opacity: 1;
background-color: rgb(124 131 162 / var(--tw-bg-opacity));
}
.bg-violet-light\/40 {
background-color: rgb(124 131 162 / 0.4);
}
.bg-violet\/40 {
background-color: rgb(110 117 150 / 0.4);
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-white\/10 {
background-color: rgb(255 255 255 / 0.1);
}
.fill-white\/50 {
fill: rgb(255 255 255 / 0.5);
}
.stroke-\[4\] {
stroke-width: 4;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.object-center {
-o-object-position: center;
object-position: center;
}
.\!p-0 {
padding: 0 !important;
}
.p-\[10px\] {
padding: 1rem;
}
.p-\[16px\] {
padding: 1.6rem;
}
.p-\[24px\] {
padding: 2.4rem;
}
.p-\[2px\] {
padding: 0.2rem;
}
.p-\[4px\] {
padding: 0.4rem;
}
.p-\[7px\] {
padding: 0.7rem;
}
.p-\[8px\] {
padding: 0.8rem;
}
.px-0 {
padding-left: 0;
padding-right: 0;
}
.px-\[12px\] {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
.px-\[16px\] {
padding-left: 1.6rem;
padding-right: 1.6rem;
}
.px-\[24px\] {
padding-left: 2.4rem;
padding-right: 2.4rem;
}
.px-\[32px\] {
padding-left: 3.2rem;
padding-right: 3.2rem;
}
.px-\[42px\] {
padding-left: 4.2rem;
padding-right: 4.2rem;
}
.px-\[48px\] {
padding-left: 4.8rem;
padding-right: 4.8rem;
}
.px-\[4px\] {
padding-left: 0.4rem;
padding-right: 0.4rem;
}
.px-\[8px\] {
padding-left: 0.8rem;
padding-right: 0.8rem;
}
.py-\[10px\] {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-\[11px\] {
padding-top: 1.1rem;
padding-bottom: 1.1rem;
}
.py-\[120px\] {
padding-top: 12rem;
padding-bottom: 12rem;
}
.py-\[12px\] {
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
.py-\[14px\] {
padding-top: 1.4rem;
padding-bottom: 1.4rem;
}
.py-\[16px\] {
padding-top: 1.6rem;
padding-bottom: 1.6rem;
}
.py-\[20px\] {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-\[22px\] {
padding-top: 2.2rem;
padding-bottom: 2.2rem;
}
.py-\[230px\] {
padding-top: 23rem;
padding-bottom: 23rem;
}
.py-\[24px\] {
padding-top: 2.4rem;
padding-bottom: 2.4rem;
}
.py-\[26px\] {
padding-top: 2.6rem;
padding-bottom: 2.6rem;
}
.py-\[32px\] {
padding-top: 3.2rem;
padding-bottom: 3.2rem;
}
.py-\[3px\] {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
.py-\[40px\] {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-\[42px\] {
padding-top: 4.2rem;
padding-bottom: 4.2rem;
}
.py-\[4px\] {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.py-\[52px\] {
padding-top: 5.2rem;
padding-bottom: 5.2rem;
}
.py-\[64px\] {
padding-top: 6.4rem;
padding-bottom: 6.4rem;
}
.py-\[6px\] {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
.py-\[80px\] {
padding-top: 8rem;
padding-bottom: 8rem;
}
.py-\[9px\] {
padding-top: 0.9rem;
padding-bottom: 0.9rem;
}
.pb-\[16px\] {
padding-bottom: 1.6rem;
}
.pb-\[17px\] {
padding-bottom: 1.7rem;
}
.pb-\[20px\] {
padding-bottom: 2rem;
}
.pb-\[234px\] {
padding-bottom: 23.4rem;
}
.pb-\[24px\] {
padding-bottom: 2.4rem;
}
.pb-\[28px\] {
padding-bottom: 2.8rem;
}
.pb-\[32px\] {
padding-bottom: 3.2rem;
}
.pb-\[35px\] {
padding-bottom: 3.5rem;
}
.pb-\[40px\] {
padding-bottom: 4rem;
}
.pb-\[48px\] {
padding-bottom: 4.8rem;
}
.pb-\[64px\] {
padding-bottom: 6.4rem;
}
.pb-\[74px\] {
padding-bottom: 7.4rem;
}
.pb-\[7px\] {
padding-bottom: 0.7rem;
}
.pb-\[80px\] {
padding-bottom: 8rem;
}
.pl-\[16px\] {
padding-left: 1.6rem;
}
.pl-\[4px\] {
padding-left: 0.4rem;
}
.pr-\[12px\] {
padding-right: 1.2rem;
}
.pr-\[16px\] {
padding-right: 1.6rem;
}
.pr-\[32px\] {
padding-right: 3.2rem;
}
.pr-\[40px\] {
padding-right: 4rem;
}
.pr-\[48px\] {
padding-right: 4.8rem;
}
.pr-\[64px\] {
padding-right: 6.4rem;
}
.pr-\[80px\] {
padding-right: 8rem;
}
.pt-0 {
padding-top: 0;
}
.pt-\[124px\] {
padding-top: 12.4rem;
}
.pt-\[12px\] {
padding-top: 1.2rem;
}
.pt-\[16px\] {
padding-top: 1.6rem;
}
.pt-\[170px\] {
padding-top: 17rem;
}
.pt-\[24px\] {
padding-top: 2.4rem;
}
.pt-\[25px\] {
padding-top: 2.5rem;
}
.pt-\[28px\] {
padding-top: 2.8rem;
}
.pt-\[32px\] {
padding-top: 3.2rem;
}
.pt-\[40px\] {
padding-top: 4rem;
}
.pt-\[48px\] {
padding-top: 4.8rem;
}
.pt-\[64px\] {
padding-top: 6.4rem;
}
.pt-\[80px\] {
padding-top: 8rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.align-middle {
vertical-align: middle;
}
.font-body {
font-family: Nexa, Helvetica, Arial, sans-serif;
}
.font-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
}
.text-\[12px\] {
font-size: 1.2rem;
}
.text-\[14px\] {
font-size: 1.4rem;
}
.text-\[15px\] {
font-size: 1.5rem;
}
.text-\[16px\] {
font-size: 1.6rem;
}
.text-\[17px\] {
font-size: 1.7rem;
}
.text-\[18px\] {
font-size: 1.8rem;
}
.text-\[20px\] {
font-size: 2rem;
}
.text-\[24px\] {
font-size: 2.4rem;
}
.text-\[28px\] {
font-size: 2.8rem;
}
.text-\[32px\] {
font-size: 3.2rem;
}
.text-\[40px\] {
font-size: 4rem;
}
.font-bold {
font-weight: 700;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.not-italic {
font-style: normal;
}
.leading-\[0\.8\] {
line-height: 0.8;
}
.leading-\[0\.9\] {
line-height: 0.9;
}
.leading-\[1\.1\] {
line-height: 1.1;
}
.leading-\[1\.3\] {
line-height: 1.3;
}
.leading-\[1\.4\] {
line-height: 1.4;
}
.leading-\[1\.5\] {
line-height: 1.5;
}
.leading-\[100\%\] {
line-height: 100%;
}
.leading-\[110\%\] {
line-height: 110%;
}
.leading-\[125\%\] {
line-height: 125%;
}
.leading-\[140\%\] {
line-height: 140%;
}
.leading-\[150\%\] {
line-height: 150%;
}
.leading-\[15px\] {
line-height: 1.5rem;
}
.leading-\[16px\] {
line-height: 1.6rem;
}
.leading-\[18px\] {
line-height: 1.8rem;
}
.leading-\[250\%\] {
line-height: 250%;
}
.leading-\[29px\] {
line-height: 2.9rem;
}
.leading-\[2\] {
line-height: 2;
}
.leading-\[35px\] {
line-height: 3.5rem;
}
.leading-\[80\%\] {
line-height: 80%;
}
.leading-none {
line-height: 1;
}
.leading-tight {
line-height: 1.25;
}
.tracking-\[-0\.01em\] {
letter-spacing: -0.01em;
}
.tracking-\[0\.01em\] {
letter-spacing: 0.01em;
}
.tracking-\[0\.08em\] {
letter-spacing: 0.08em;
}
.\!text-error {
--tw-text-opacity: 1 !important;
color: rgb(190 36 26 / var(--tw-text-opacity)) !important;
}
.\!text-slate {
--tw-text-opacity: 1 !important;
color: rgb(31 30 29 / var(--tw-text-opacity)) !important;
}
.\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
.text-\[var\(--theme-colour\)\] {
color: var(--theme-colour);
}
.text-black\/20 {
color: rgb(0 0 0 / 0.2);
}
.text-current {
color: currentColor;
}
.text-error {
--tw-text-opacity: 1;
color: rgb(190 36 26 / var(--tw-text-opacity));
}
.text-grey {
--tw-text-opacity: 1;
color: rgb(117 117 117 / var(--tw-text-opacity));
}
.text-grey-stone {
--tw-text-opacity: 1;
color: rgb(110 110 110 / var(--tw-text-opacity));
}
.text-orange-darker {
--tw-text-opacity: 1;
color: rgb(214 67 0 / var(--tw-text-opacity));
}
.text-orange-darkest {
--tw-text-opacity: 1;
color: rgb(200 62 0 / var(--tw-text-opacity));
}
.text-sage {
--tw-text-opacity: 1;
color: rgb(114 120 90 / var(--tw-text-opacity));
}
.text-slate {
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.text-slate\/30 {
color: rgb(31 30 29 / 0.3);
}
.text-slate\/60 {
color: rgb(31 30 29 / 0.6);
}
.text-slate\/70 {
color: rgb(31 30 29 / 0.7);
}
.text-stone\/60 {
color: rgb(245 243 241 / 0.6);
}
.text-success {
--tw-text-opacity: 1;
color: rgb(46 133 13 / var(--tw-text-opacity));
}
.text-violet {
--tw-text-opacity: 1;
color: rgb(110 117 150 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-white\/50 {
color: rgb(255 255 255 / 0.5);
}
.text-white\/70 {
color: rgb(255 255 255 / 0.7);
}
.text-white\/90 {
color: rgb(255 255 255 / 0.9);
}
.underline {
text-decoration-line: underline;
}
.line-through {
text-decoration-line: line-through;
}
.underline-offset-2 {
text-underline-offset: 0.2rem;
}
.underline-offset-\[2px\] {
text-underline-offset: 0.2rem;
}
.\!placeholder-error::-moz-placeholder {
--tw-placeholder-opacity: 1 !important;
color: rgb(190 36 26 / var(--tw-placeholder-opacity)) !important;
}
.\!placeholder-error::placeholder {
--tw-placeholder-opacity: 1 !important;
color: rgb(190 36 26 / var(--tw-placeholder-opacity)) !important;
}
.placeholder-grey::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(117 117 117 / var(--tw-placeholder-opacity));
}
.placeholder-grey::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(117 117 117 / var(--tw-placeholder-opacity));
}
.\!opacity-100 {
opacity: 1 !important;
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-90 {
opacity: 0.9;
}
.opacity-\[72\%\] {
opacity: 72%;
}
.mix-blend-darken {
mix-blend-mode: darken;
}
.mix-blend-hard-light {
mix-blend-mode: hard-light;
}
.mix-blend-color {
mix-blend-mode: color;
}
.\!outline-black {
outline-color: #000000 !important;
}
.blur {
--tw-blur: blur(0.8rem);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
--tw-backdrop-blur: blur(0.8rem);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[background-color\] {
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[border-radius\] {
transition-property: border-radius;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[color\2c background-color\2c border-color\] {
transition-property: color,background-color,border-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[color\2c background-color\] {
transition-property: color,background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[color\2c background-colors\] {
transition-property: color,background-colors;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[color\] {
transition-property: color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[height\2c opacity\2c visibility\] {
transition-property: height,opacity,visibility;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[margin\2c height\2c opacity\2c visibility\] {
transition-property: margin,height,opacity,visibility;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[opacity\2c color\2c background-color\] {
transition-property: opacity,color,background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[opacity\2c visibility\] {
transition-property: opacity,visibility;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[opacity\2c width\] {
transition-property: opacity,width;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[opacity\] {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[transform\2c opacity\2c visibility\] {
transition-property: transform,opacity,visibility;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[transform\] {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[visibility\2c opacity\] {
transition-property: visibility,opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[width\] {
transition-property: width;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.\!delay-500 {
transition-delay: 500ms !important;
}
.\!delay-\[0s\] {
transition-delay: 0s !important;
}
.\!delay-\[500ms\] {
transition-delay: 500ms !important;
}
.delay-0 {
transition-delay: 0s;
}
.delay-200 {
transition-delay: 200ms;
}
.delay-500 {
transition-delay: 500ms;
}
.duration-150 {
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.bg-primary {
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.text-primary {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.border-primary {
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
/*
* Helper styles for Alpine.js
*/
[x-cloak] {
opacity: 0;
}
[x-cloak="hidden"] {
display: none;
}
/*
* Helpers for accent colours
*/
::-moz-selection {
background-color: rgba(var(--accent-colour), 0.25);
}
::selection {
background-color: rgba(var(--accent-colour), 0.25);
}
/*
* Create a pseudo-element that occupies available space to the nearest relative parent
*/
.box-link::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.skip-link:not(:focus) {
width: 0.1rem;
height: 0.1rem;
padding: 0;
margin: -0.1rem;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
transition: none;
}
:focus-visible {
outline: 0.2rem dashed;
}
:focus:not(:focus-visible),
:focus:not(:focus-within) {
outline: none !important;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible {
outline: none !important;
}
.fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.hide-scroll {
scrollbar-width: none;
}
.hide-scroll::-webkit-scrollbar {
display: none;
}
.s--loading {
position: relative;
}
.s--loading:before {
border-width: 0.2rem;
border-color: currentColor;
content: "";
position: absolute;
width: 2rem;
height: 2rem;
top: 50%;
left: 50%;
margin-top: -1rem;
margin-left: -1rem;
background-color: transparent;
border-radius: 50%;
border-bottom-color: transparent;
animation: loader 1s infinite ease-in-out;
transition: 0.15s linear;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.top-56px {
top: 5.6rem;
}
.container {
padding-left: 1.6rem;
padding-right: 1.6rem;
}
@media (min-width: 768px) {
.container {
padding-left: 2.4rem !important;
padding-right: 2.4rem !important
}
}
@media (min-width: 1024px) {
.container {
padding-left: 2.4rem !important;
padding-right: 2.4rem !important
}
}
@media (min-width: 768px) {
.md\:container {
padding-left: 2.4rem !important;
padding-right: 2.4rem !important
}
}
@media (min-width: 1024px) {
.lg\:container {
padding-left: 2.4rem !important;
padding-right: 2.4rem !important
}
}
@supports (scrollbar-gutter: stable) {
html {
padding-right: 0 !important;
scrollbar-gutter: stable;
}
}
.hover\:btn-primary:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.hover\:btn-secondary:hover {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(214 67 0 / var(--tw-text-opacity));
}
.focus\:btn-primary:focus {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.focus\:btn-secondary:focus {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(214 67 0 / var(--tw-text-opacity));
}
.group\/image-item:hover .group-hover\/image-item\:btn-primary {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.group\/image-item:hover .group-hover\/image-item\:btn-secondary {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(214 67 0 / var(--tw-text-opacity));
}
@media not all and (min-width: 1024px) {
.max-lg\:container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
@media (min-width: 100%) {
.max-lg\:container {
max-width: 100%;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
}
.max-lg\:h16-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
line-height: 100%;
}
}
@media not all and (min-width: 768px) {
.max-md\:container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
@media (min-width: 100%) {
.max-md\:container {
max-width: 100%;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
}
.max-md\:btn-lg {
padding-left: 2.4rem;
padding-right: 2.4rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media (min-width: 1440px) {
.max-md\:btn-lg {
padding-left: 2.8rem;
padding-right: 2.8rem;
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
}
}
@media (min-width: 768px) {
.md\:container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
@media (min-width: 100%) {
.md\:container {
max-width: 100%;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
}
.md\:h16-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
line-height: 100%;
}
.md\:h48-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 4.8rem;
line-height: 90%;
}
.md\:h64-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 6.4rem;
line-height: 80%;
}
.md\:btn-lg {
padding-left: 2.4rem;
padding-right: 2.4rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media (min-width: 1440px) {
.md\:btn-lg {
padding-left: 2.8rem;
padding-right: 2.8rem;
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
}
}
@media (min-width: 1024px) {
.lg\:container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
@media (min-width: 100%) {
.lg\:container {
max-width: 100%;
padding-right: 1.6rem;
padding-left: 1.6rem;
}
}
.lg\:aspect-h-1 {
--tw-aspect-h: 1;
}
.lg\:aspect-h-2 {
--tw-aspect-h: 2;
}
.lg\:aspect-w-3 {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 3;
}
.lg\:aspect-w-3 > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.lg\:aspect-w-\[1\.27\] {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1.27;
}
.lg\:aspect-w-\[1\.27\] > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.lg\:aspect-w-\[1\.65\] {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1.65;
}
.lg\:aspect-w-\[1\.65\] > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.lg\:aspect-w-\[1\.67\] {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1.67;
}
.lg\:aspect-w-\[1\.67\] > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.lg\:h18 {
font-size: 1.8rem;
line-height: 110%;
}
.lg\:h18-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 1.8rem;
line-height: 90%;
}
.lg\:h20 {
font-size: 2rem;
line-height: 130%;
}
.lg\:h20-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 2rem;
line-height: 100%;
}
.lg\:h22 {
font-size: 2.2rem;
line-height: 130%;
}
.lg\:h24 {
font-size: 2.4rem;
line-height: 130%;
}
.lg\:h28-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 2.8rem;
line-height: 90%;
}
.lg\:h32-130 {
font-size: 3.2rem;
line-height: 130%;
}
.lg\:h32-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 3.2rem;
line-height: 90%;
}
.lg\:h48-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 4.8rem;
line-height: 90%;
}
.lg\:h56-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 5.6rem;
line-height: 85%;
}
.lg\:h64 {
font-size: 6.4rem;
line-height: 100%;
}
.lg\:h64-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 6.4rem;
line-height: 80%;
}
.lg\:btn-lg {
padding-left: 2.4rem;
padding-right: 2.4rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media (min-width: 1440px) {
.lg\:btn-lg {
padding-left: 2.8rem;
padding-right: 2.8rem;
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
}
.lg\:btn-primary {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
border-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.lg\:btn-dark-outline {
--tw-border-opacity: 1;
border-color: rgb(31 30 29 / var(--tw-border-opacity));
background-color: rgba(255,255,255, 0);
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
transition-property: color,background-color;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.lg\:btn-dark-outline:hover {
--tw-bg-opacity: 1;
background-color: rgb(31 30 29 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.lg\:btn-dark-outline:focus {
--tw-bg-opacity: 1;
background-color: rgb(31 30 29 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
}
@media (min-width: 1440px) {
.\32xl\:h40-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 4rem;
line-height: 90%;
}
.\32xl\:h56-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 5.6rem;
line-height: 85%;
}
.\32xl\:h72-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
font-size: 7.2rem;
line-height: 80%;
}
}
.first-line\:text-slate::first-line {
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.placeholder\:text-grey::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(117 117 117 / var(--tw-text-opacity));
}
.placeholder\:text-grey::placeholder {
--tw-text-opacity: 1;
color: rgb(117 117 117 / var(--tw-text-opacity));
}
.before\:\!rounded-full::before {
content: var(--tw-content);
border-radius: 999.9rem !important;
}
.after\:pointer-events-none::after {
content: var(--tw-content);
pointer-events: none;
}
.after\:absolute::after {
content: var(--tw-content);
position: absolute;
}
.after\:top-\[64px\]::after {
content: var(--tw-content);
top: 6.4rem;
}
.after\:h-\[1px\]::after {
content: var(--tw-content);
height: 0.1rem;
}
.after\:w-full::after {
content: var(--tw-content);
width: 100%;
}
.after\:translate-y-\[-1px\]::after {
content: var(--tw-content);
--tw-translate-y: -0.1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.after\:bg-white\/20::after {
content: var(--tw-content);
background-color: rgb(255 255 255 / 0.2);
}
.first\:\!border-none:first-child {
border-style: none !important;
}
.hover\:rounded-\[12px\]:hover {
border-radius: 1.2rem;
}
.hover\:rounded-\[16px\]:hover {
border-radius: 1.6rem;
}
.hover\:border-black:hover {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.hover\:border-slate:hover {
--tw-border-opacity: 1;
border-color: rgb(31 30 29 / var(--tw-border-opacity));
}
.hover\:border-slate\/30:hover {
border-color: rgb(31 30 29 / 0.3);
}
.hover\:border-white:hover {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.hover\:bg-black:hover {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.hover\:bg-slate:hover {
--tw-bg-opacity: 1;
background-color: rgb(31 30 29 / var(--tw-bg-opacity));
}
.hover\:bg-transparent:hover {
background-color: rgba(255,255,255, 0);
}
.hover\:bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:bg-white\/10:hover {
background-color: rgb(255 255 255 / 0.1);
}
.hover\:text-\[\#219653\]:hover {
--tw-text-opacity: 1;
color: rgb(33 150 83 / var(--tw-text-opacity));
}
.hover\:text-slate:hover {
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.hover\:text-stone:hover {
--tw-text-opacity: 1;
color: rgb(245 243 241 / var(--tw-text-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.hover\:no-underline:hover {
text-decoration-line: none;
}
.hover\:bg-primary:hover {
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.hover\:text-primary:hover {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.focus\:rounded-\[12px\]:focus {
border-radius: 1.2rem;
}
.focus\:rounded-\[16px\]:focus {
border-radius: 1.6rem;
}
.focus\:rounded-\[24px\]:focus {
border-radius: 2.4rem;
}
.focus\:border-slate:focus {
--tw-border-opacity: 1;
border-color: rgb(31 30 29 / var(--tw-border-opacity));
}
.focus\:bg-slate:focus {
--tw-bg-opacity: 1;
background-color: rgb(31 30 29 / var(--tw-bg-opacity));
}
.focus\:bg-stone:focus {
--tw-bg-opacity: 1;
background-color: rgb(245 243 241 / var(--tw-bg-opacity));
}
.focus\:bg-white:focus {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.focus\:text-\[\#219653\]:focus {
--tw-text-opacity: 1;
color: rgb(33 150 83 / var(--tw-text-opacity));
}
.focus\:text-white:focus {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.focus\:opacity-100:focus {
opacity: 1;
}
.focus\:outline-\[\#219653\]:focus {
outline-color: #219653;
}
.focus\:outline-black:focus {
outline-color: #000000;
}
.focus\:outline-white:focus {
outline-color: #FFFFFF;
}
.focus\:text-primary:focus {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.focus\:outline-primary:focus {
outline-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.group\/gallery-img:focus-within .group-focus-within\/gallery-img\:opacity-100 {
opacity: 1;
}
.group\/filter:hover .group-hover\/filter\:visible {
visibility: visible;
}
.group\/menu-item:hover .group-hover\/menu-item\:visible {
visibility: visible;
}
.group\/menu-item:hover .group-hover\/menu-item\:rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/submenu-item:hover .group-hover\/submenu-item\:scale-\[1\.1\] {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:font-extrabold {
font-weight: 800;
}
.group:hover .group-hover\:text-slate {
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.group:hover .group-hover\:underline {
text-decoration-line: underline;
}
.group\/card:hover .group-hover\/card\:opacity-100 {
opacity: 1;
}
.group\/filter:hover .group-hover\/filter\:opacity-100 {
opacity: 1;
}
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
opacity: 1;
}
.group\/menu-item:hover .group-hover\/menu-item\:delay-500 {
transition-delay: 500ms;
}
.group:hover .group-hover\:text-primary {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.group\/gallery-img:focus .group-focus\/gallery-img\:scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/gallery-img:focus .group-focus\/gallery-img\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/image-item:focus .group-focus\/image-item\:scale-\[1\.1\] {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/gallery-img:focus .group-focus\/gallery-img\:opacity-100 {
opacity: 1;
}
.group:focus .group-focus\:text-primary {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:animate-none {
animation: none;
}
}
@media not all and (min-width: 1024px) {
.max-lg\:order-first {
order: -9999;
}
.max-lg\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.max-lg\:mb-\[24px\] {
margin-bottom: 2.4rem;
}
.max-lg\:mt-\[24px\] {
margin-top: 2.4rem;
}
.max-lg\:mt-\[40px\] {
margin-top: 4rem;
}
.max-lg\:mt-\[64px\] {
margin-top: 6.4rem;
}
.max-lg\:hidden {
display: none;
}
.max-lg\:h-\[calc\(100svh-114px-var\(--ticker-height\)\)\] {
height: calc(100svh - 11.4rem - var(--ticker-height));
}
.max-lg\:min-h-\[425px\] {
min-height: 42.5rem;
}
.max-lg\:min-h-\[480px\] {
min-height: 48rem;
}
.max-lg\:w-\[75\%\] {
width: 75%;
}
.max-lg\:rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.max-lg\:rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.max-lg\:border-b {
border-bottom-width: 0.1rem;
}
.max-lg\:border-t {
border-top-width: 0.1rem;
}
.max-lg\:border-slate\/10 {
border-color: rgb(31 30 29 / 0.1);
}
.max-lg\:border-white\/20 {
border-color: rgb(255 255 255 / 0.2);
}
.max-lg\:py-\[64px\] {
padding-top: 6.4rem;
padding-bottom: 6.4rem;
}
.max-lg\:pt-\[20px\] {
padding-top: 2rem;
}
.max-lg\:pt-\[24px\] {
padding-top: 2.4rem;
}
.max-lg\:pt-\[32px\] {
padding-top: 3.2rem;
}
.max-lg\:text-center {
text-align: center;
}
.max-lg\:uppercase {
text-transform: uppercase;
}
.max-lg\:text-grey-stone {
--tw-text-opacity: 1;
color: rgb(110 110 110 / var(--tw-text-opacity));
}
.max-lg\:text-slate\/40 {
color: rgb(31 30 29 / 0.4);
}
.max-lg\:before\:absolute::before {
content: var(--tw-content);
position: absolute;
}
.max-lg\:before\:inset-x-0::before {
content: var(--tw-content);
left: 0;
right: 0;
}
.max-lg\:before\:h-\[319px\]::before {
content: var(--tw-content);
height: 31.9rem;
}
.max-lg\:before\:bg-stone::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(245 243 241 / var(--tw-bg-opacity));
}
.max-lg\:before\:content-\[\'\'\]::before {
--tw-content: '';
content: var(--tw-content);
}
}
@media not all and (min-width: 768px) {
.max-md\:right-0 {
right: 0;
}
.max-md\:order-first {
order: -9999;
}
.max-md\:\!mr-\[16px\] {
margin-right: 1.6rem !important;
}
.max-md\:mt-\[16px\] {
margin-top: 1.6rem;
}
.max-md\:mt-\[32px\] {
margin-top: 3.2rem;
}
.max-md\:mt-\[64px\] {
margin-top: 6.4rem;
}
.max-md\:mt-\[6px\] {
margin-top: 0.6rem;
}
.max-md\:\!block {
display: block !important;
}
.max-md\:\!flex {
display: flex !important;
}
.max-md\:hidden {
display: none;
}
.max-md\:max-h-\[330px\] {
max-height: 33rem;
}
.max-md\:\!w-\[calc\(75\%\+24px\)\] {
width: calc(75% + 2.4rem) !important;
}
.max-md\:\!w-\[calc\(75\%\+8px\)\] {
width: calc(75% + 0.8rem) !important;
}
.max-md\:w-\[calc\(37\.3\%\+16px\)\] {
width: calc(37.3% + 1.6rem);
}
.max-md\:w-fit {
width: -moz-fit-content;
width: fit-content;
}
.max-md\:w-full {
width: 100%;
}
.max-md\:max-w-\[75\%\] {
max-width: 75%;
}
.max-md\:shrink-0 {
flex-shrink: 0;
}
.max-md\:snap-x {
scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.max-md\:snap-start {
scroll-snap-align: start;
}
.max-md\:scroll-px-\[16px\] {
scroll-padding-left: 1.6rem;
scroll-padding-right: 1.6rem;
}
.max-md\:flex-nowrap {
flex-wrap: nowrap;
}
.max-md\:items-center {
align-items: center;
}
.max-md\:\!gap-x-0 {
-moz-column-gap: 0 !important;
column-gap: 0 !important;
}
.max-md\:gap-y-\[40px\] {
row-gap: 4rem;
}
.max-md\:overflow-auto {
overflow: auto;
}
.max-md\:overflow-hidden {
overflow: hidden;
}
.max-md\:overflow-scroll {
overflow: scroll;
}
.max-md\:border-t {
border-top-width: 0.1rem;
}
.max-md\:border-slate\/10 {
border-color: rgb(31 30 29 / 0.1);
}
.max-md\:pb-\[8px\] {
padding-bottom: 0.8rem;
}
.max-md\:pl-\[16px\] {
padding-left: 1.6rem;
}
.max-md\:pr-\[16px\] {
padding-right: 1.6rem;
}
.max-md\:first\:ml-\[16px\]:first-child {
margin-left: 1.6rem;
}
.max-md\:last\:mr-\[16px\]:last-child {
margin-right: 1.6rem;
}
}
@media (min-width: 480px) {
.xs\:max-w-\[375px\] {
max-width: 37.5rem;
}
}
@media (min-width: 640px) {
.sm\:block {
display: block;
}
.sm\:hidden {
display: none;
}
.sm\:w-\[228px\] {
width: 22.8rem;
}
.sm\:max-w-\[128px\] {
max-width: 12.8rem;
}
}
@media (min-width: 768px) {
.md\:absolute {
position: absolute;
}
.md\:sticky {
position: sticky;
}
.md\:inset-0 {
inset: 0;
}
.md\:left-\[24px\] {
left: 2.4rem;
}
.md\:right-\[-56px\] {
right: -5.6rem;
}
.md\:top-0 {
top: 0;
}
.md\:top-\[150px\] {
top: 15rem;
}
.md\:top-\[24px\] {
top: 2.4rem;
}
.md\:top-\[40px\] {
top: 4rem;
}
.md\:\!order-last {
order: 9999 !important;
}
.md\:order-first {
order: -9999;
}
.md\:order-last {
order: 9999;
}
.md\:order-none {
order: 0;
}
.md\:col-span-1 {
grid-column: span 1 / span 1;
}
.md\:col-span-10 {
grid-column: span 10 / span 10;
}
.md\:col-span-12 {
grid-column: span 12 / span 12;
}
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
.md\:col-span-3 {
grid-column: span 3 / span 3;
}
.md\:col-span-4 {
grid-column: span 4 / span 4;
}
.md\:col-span-5 {
grid-column: span 5 / span 5;
}
.md\:col-span-6 {
grid-column: span 6 / span 6;
}
.md\:col-span-7 {
grid-column: span 7 / span 7;
}
.md\:col-span-9 {
grid-column: span 9 / span 9;
}
.md\:col-start-1 {
grid-column-start: 1;
}
.md\:col-start-2 {
grid-column-start: 2;
}
.md\:col-start-4 {
grid-column-start: 4;
}
.md\:col-start-8 {
grid-column-start: 8;
}
.md\:m-0 {
margin: 0;
}
.md\:mx-0 {
margin-left: 0;
margin-right: 0;
}
.md\:mx-\[4px\] {
margin-left: 0.4rem;
margin-right: 0.4rem;
}
.md\:ml-\[32px\] {
margin-left: 3.2rem;
}
.md\:ml-\[8px\] {
margin-left: 0.8rem;
}
.md\:ml-auto {
margin-left: auto;
}
.md\:mr-\[24px\] {
margin-right: 2.4rem;
}
.md\:mr-\[32px\] {
margin-right: 3.2rem;
}
.md\:mr-\[8px\] {
margin-right: 0.8rem;
}
.md\:mt-\[16px\] {
margin-top: 1.6rem;
}
.md\:mt-\[24px\] {
margin-top: 2.4rem;
}
.md\:mt-\[32px\] {
margin-top: 3.2rem;
}
.md\:block {
display: block;
}
.md\:\!flex {
display: flex !important;
}
.md\:flex {
display: flex;
}
.md\:\!grid {
display: grid !important;
}
.md\:grid {
display: grid;
}
.md\:hidden {
display: none;
}
.md\:h-\[130px\] {
height: 13rem;
}
.md\:h-\[158px\] {
height: 15.8rem;
}
.md\:h-\[28px\] {
height: 2.8rem;
}
.md\:h-\[calc\(100svh-94px-var\(--ticker-height\)\)\] {
height: calc(100svh - 9.4rem - var(--ticker-height));
}
.md\:h-fit {
height: -moz-fit-content;
height: fit-content;
}
.md\:h-full {
height: 100%;
}
.md\:\!w-\[calc\(33\%\+12px\)\] {
width: calc(33% + 1.2rem) !important;
}
.md\:\!w-\[calc\(50\%\+12px\)\] {
width: calc(50% + 1.2rem) !important;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:w-3\/12 {
width: 25%;
}
.md\:w-4\/12 {
width: 33.333333%;
}
.md\:w-\[150px\] {
width: 15rem;
}
.md\:w-\[180px\] {
width: 18rem;
}
.md\:w-\[28px\] {
width: 2.8rem;
}
.md\:w-\[33\%\] {
width: 33%;
}
.md\:w-\[40px\] {
width: 4rem;
}
.md\:w-\[55\%\] {
width: 55%;
}
.md\:w-\[60\%\] {
width: 60%;
}
.md\:w-\[80\%\] {
width: 80%;
}
.md\:w-\[90\%\] {
width: 90%;
}
.md\:w-\[calc\(33\.33\%-12px\)\] {
width: calc(33.33% - 1.2rem);
}
.md\:w-\[calc\(44\.4\%-12px\)\] {
width: calc(44.4% - 1.2rem);
}
.md\:w-\[calc\(50\%-12px\)\] {
width: calc(50% - 1.2rem);
}
.md\:w-\[calc\(55\.5\%-12px\)\] {
width: calc(55.5% - 1.2rem);
}
.md\:w-auto {
width: auto;
}
.md\:w-fit {
width: -moz-fit-content;
width: fit-content;
}
.md\:w-full {
width: 100%;
}
.md\:max-w-\[180px\] {
max-width: 18rem;
}
.md\:max-w-\[566px\] {
max-width: 56.6rem;
}
.md\:max-w-\[640px\] {
max-width: 64rem;
}
.md\:max-w-\[90\%\] {
max-width: 90%;
}
.md\:max-w-none {
max-width: none;
}
.md\:flex-1 {
flex: 1 1 0%;
}
.md\:auto-rows-fr {
grid-auto-rows: minmax(0, 1fr);
}
.md\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
.md\:flex-col {
flex-direction: column;
}
.md\:flex-wrap {
flex-wrap: wrap;
}
.md\:flex-nowrap {
flex-wrap: nowrap;
}
.md\:items-center {
align-items: center;
}
.md\:items-stretch {
align-items: stretch;
}
.md\:justify-start {
justify-content: flex-start;
}
.md\:justify-center {
justify-content: center;
}
.md\:gap-0 {
gap: 0;
}
.md\:gap-\[16px\] {
gap: 1.6rem;
}
.md\:gap-\[24px\] {
gap: 2.4rem;
}
.md\:gap-\[40px\] {
gap: 4rem;
}
.md\:gap-\[68px\] {
gap: 6.8rem;
}
.md\:gap-\[8px\] {
gap: 0.8rem;
}
.md\:gap-x-\[12px\] {
-moz-column-gap: 1.2rem;
column-gap: 1.2rem;
}
.md\:gap-x-\[16px\] {
-moz-column-gap: 1.6rem;
column-gap: 1.6rem;
}
.md\:gap-x-\[24px\] {
-moz-column-gap: 2.4rem;
column-gap: 2.4rem;
}
.md\:gap-y-\[32px\] {
row-gap: 3.2rem;
}
.md\:\!overflow-visible {
overflow: visible !important;
}
.md\:border-0 {
border-width: 0;
}
.md\:object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.md\:object-center {
-o-object-position: center;
object-position: center;
}
.md\:p-\[24px\] {
padding: 2.4rem;
}
.md\:px-\[16px\] {
padding-left: 1.6rem;
padding-right: 1.6rem;
}
.md\:px-\[24px\] {
padding-left: 2.4rem;
padding-right: 2.4rem;
}
.md\:px-\[32px\] {
padding-left: 3.2rem;
padding-right: 3.2rem;
}
.md\:px-\[6px\] {
padding-left: 0.6rem;
padding-right: 0.6rem;
}
.md\:py-\[120px\] {
padding-top: 12rem;
padding-bottom: 12rem;
}
.md\:py-\[24px\] {
padding-top: 2.4rem;
padding-bottom: 2.4rem;
}
.md\:py-\[80px\] {
padding-top: 8rem;
padding-bottom: 8rem;
}
.md\:py-\[8px\] {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
.md\:pb-\[34px\] {
padding-bottom: 3.4rem;
}
.md\:pb-\[40px\] {
padding-bottom: 4rem;
}
.md\:pb-\[80px\] {
padding-bottom: 8rem;
}
.md\:pl-\[24px\] {
padding-left: 2.4rem;
}
.md\:pr-\[24px\] {
padding-right: 2.4rem;
}
.md\:pt-0 {
padding-top: 0;
}
.md\:pt-\[40px\] {
padding-top: 4rem;
}
.md\:hover\:rounded-\[24px\]:hover {
border-radius: 2.4rem;
}
.group\/gallery-img:hover .md\:group-hover\/gallery-img\:scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/gallery-img:hover .md\:group-hover\/gallery-img\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/image-check:hover .md\:group-hover\/image-check\:scale-\[1\.1\] {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/image-item:hover .md\:group-hover\/image-item\:scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/image-item:hover .md\:group-hover\/image-item\:scale-\[1\.1\] {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .md\:group-hover\:scale-\[1\.1\] {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/card:hover .md\:group-hover\/card\:rounded-\[16px\] {
border-radius: 1.6rem;
}
.group\/image-check:hover .md\:group-hover\/image-check\:rounded-\[24px\] {
border-radius: 2.4rem;
}
.group\/image-item:hover .md\:group-hover\/image-item\:rounded-\[24px\] {
border-radius: 2.4rem;
}
.group\/gallery-img:hover .md\:group-hover\/gallery-img\:opacity-100 {
opacity: 1;
}
.group\/image-item:hover .md\:group-hover\/image-item\:text-primary {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
}
@media (min-width: 1024px) {
.lg\:pointer-events-none {
pointer-events: none;
}
.lg\:\!visible {
visibility: visible !important;
}
.lg\:absolute {
position: absolute;
}
.lg\:relative {
position: relative;
}
.lg\:sticky {
position: sticky;
}
.lg\:inset-auto {
inset: auto;
}
.lg\:inset-x-0 {
left: 0;
right: 0;
}
.lg\:inset-x-\[16px\] {
left: 1.6rem;
right: 1.6rem;
}
.lg\:bottom-\[24px\] {
bottom: 2.4rem;
}
.lg\:left-\[-24px\] {
left: -2.4rem;
}
.lg\:left-\[24px\] {
left: 2.4rem;
}
.lg\:right-\[-24px\] {
right: -2.4rem;
}
.lg\:right-\[-56px\] {
right: -5.6rem;
}
.lg\:top-0 {
top: 0;
}
.lg\:top-\[-70px\] {
top: -7rem;
}
.lg\:top-\[150px\] {
top: 15rem;
}
.lg\:top-\[16px\] {
top: 1.6rem;
}
.lg\:top-\[192px\] {
top: 19.2rem;
}
.lg\:top-\[70px\] {
top: 7rem;
}
.lg\:top-\[86px\] {
top: 8.6rem;
}
.lg\:top-\[96px\] {
top: 9.6rem;
}
.lg\:top-full {
top: 100%;
}
.lg\:z-\[10\] {
z-index: 10;
}
.lg\:z-\[5\] {
z-index: 5;
}
.lg\:\!order-first {
order: -9999 !important;
}
.lg\:\!order-last {
order: 9999 !important;
}
.lg\:order-1 {
order: 1;
}
.lg\:order-2 {
order: 2;
}
.lg\:order-3 {
order: 3;
}
.lg\:order-4 {
order: 4;
}
.lg\:order-first {
order: -9999;
}
.lg\:order-last {
order: 9999;
}
.lg\:col-span-1 {
grid-column: span 1 / span 1;
}
.lg\:col-span-10 {
grid-column: span 10 / span 10;
}
.lg\:col-span-12 {
grid-column: span 12 / span 12;
}
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
.lg\:col-span-4 {
grid-column: span 4 / span 4;
}
.lg\:col-span-5 {
grid-column: span 5 / span 5;
}
.lg\:col-span-6 {
grid-column: span 6 / span 6;
}
.lg\:col-span-7 {
grid-column: span 7 / span 7;
}
.lg\:col-span-8 {
grid-column: span 8 / span 8;
}
.lg\:col-span-9 {
grid-column: span 9 / span 9;
}
.lg\:col-start-1 {
grid-column-start: 1;
}
.lg\:col-start-2 {
grid-column-start: 2;
}
.lg\:col-start-3 {
grid-column-start: 3;
}
.lg\:col-start-4 {
grid-column-start: 4;
}
.lg\:col-start-6 {
grid-column-start: 6;
}
.lg\:col-start-7 {
grid-column-start: 7;
}
.lg\:col-start-8 {
grid-column-start: 8;
}
.lg\:col-start-9 {
grid-column-start: 9;
}
.lg\:col-end-11 {
grid-column-end: 11;
}
.lg\:col-end-13 {
grid-column-end: 13;
}
.lg\:col-end-5 {
grid-column-end: 5;
}
.lg\:row-span-2 {
grid-row: span 2 / span 2;
}
.lg\:row-span-full {
grid-row: 1 / -1;
}
.lg\:row-start-1 {
grid-row-start: 1;
}
.lg\:row-start-2 {
grid-row-start: 2;
}
.lg\:m-0 {
margin: 0;
}
.lg\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.lg\:\!mr-\[24px\] {
margin-right: 2.4rem !important;
}
.lg\:mb-0 {
margin-bottom: 0;
}
.lg\:mb-\[10px\] {
margin-bottom: 1rem;
}
.lg\:mb-\[120px\] {
margin-bottom: 12rem;
}
.lg\:mb-\[16px\] {
margin-bottom: 1.6rem;
}
.lg\:mb-\[24px\] {
margin-bottom: 2.4rem;
}
.lg\:mb-\[32px\] {
margin-bottom: 3.2rem;
}
.lg\:mb-\[40px\] {
margin-bottom: 4rem;
}
.lg\:mb-\[8px\] {
margin-bottom: 0.8rem;
}
.lg\:mb-\[96px\] {
margin-bottom: 9.6rem;
}
.lg\:mb-auto {
margin-bottom: auto;
}
.lg\:ml-0 {
margin-left: 0;
}
.lg\:ml-\[16px\] {
margin-left: 1.6rem;
}
.lg\:ml-\[24px\] {
margin-left: 2.4rem;
}
.lg\:ml-\[40px\] {
margin-left: 4rem;
}
.lg\:ml-\[7px\] {
margin-left: 0.7rem;
}
.lg\:ml-auto {
margin-left: auto;
}
.lg\:mr-0 {
margin-right: 0;
}
.lg\:mr-\[24px\] {
margin-right: 2.4rem;
}
.lg\:mr-\[8px\] {
margin-right: 0.8rem;
}
.lg\:mt-0 {
margin-top: 0;
}
.lg\:mt-\[-24px\] {
margin-top: -2.4rem;
}
.lg\:mt-\[12px\] {
margin-top: 1.2rem;
}
.lg\:mt-\[16px\] {
margin-top: 1.6rem;
}
.lg\:mt-\[20px\] {
margin-top: 2rem;
}
.lg\:mt-\[24px\] {
margin-top: 2.4rem;
}
.lg\:mt-\[28px\] {
margin-top: 2.8rem;
}
.lg\:mt-\[32px\] {
margin-top: 3.2rem;
}
.lg\:mt-\[36px\] {
margin-top: 3.6rem;
}
.lg\:mt-\[40px\] {
margin-top: 4rem;
}
.lg\:mt-\[4px\] {
margin-top: 0.4rem;
}
.lg\:mt-\[64px\] {
margin-top: 6.4rem;
}
.lg\:mt-\[80px\] {
margin-top: 8rem;
}
.lg\:mt-\[8px\] {
margin-top: 0.8rem;
}
.lg\:mt-\[96px\] {
margin-top: 9.6rem;
}
.lg\:line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.lg\:block {
display: block;
}
.lg\:inline-block {
display: inline-block;
}
.lg\:flex {
display: flex;
}
.lg\:inline-flex {
display: inline-flex;
}
.lg\:\!grid {
display: grid !important;
}
.lg\:grid {
display: grid;
}
.lg\:hidden {
display: none;
}
.lg\:h-\[128px\] {
height: 12.8rem;
}
.lg\:h-\[14px\] {
height: 1.4rem;
}
.lg\:h-\[16px\] {
height: 1.6rem;
}
.lg\:h-\[20px\] {
height: 2rem;
}
.lg\:h-\[220px\] {
height: 22rem;
}
.lg\:h-\[22px\] {
height: 2.2rem;
}
.lg\:h-\[253px\] {
height: 25.3rem;
}
.lg\:h-\[36px\] {
height: 3.6rem;
}
.lg\:h-\[400px\] {
height: 40rem;
}
.lg\:h-\[4px\] {
height: 0.4rem;
}
.lg\:h-\[500px\] {
height: 50rem;
}
.lg\:h-\[584px\] {
height: 58.4rem;
}
.lg\:h-\[58px\] {
height: 5.8rem;
}
.lg\:h-\[64px\] {
height: 6.4rem;
}
.lg\:h-\[700px\] {
height: 70rem;
}
.lg\:h-\[70px\] {
height: 7rem;
}
.lg\:h-\[800px\] {
height: 80rem;
}
.lg\:h-\[96px\] {
height: 9.6rem;
}
.lg\:h-\[calc\(100svh-94px-var\(--ticker-height\)\)\] {
height: calc(100svh - 9.4rem - var(--ticker-height));
}
.lg\:h-fit {
height: -moz-fit-content;
height: fit-content;
}
.lg\:h-full {
height: 100%;
}
.lg\:h-\[calc\(100\%\+70px\)\] {
height: calc(100% + 7rem);
}
.lg\:max-h-\[250px\] {
max-height: 25rem;
}
.lg\:max-h-\[36px\] {
max-height: 3.6rem;
}
.lg\:max-h-\[600px\] {
max-height: 60rem;
}
.lg\:max-h-\[calc\(100svh-70px-var\(--ticker-height\)\)\] {
max-height: calc(100svh - 7rem - var(--ticker-height));
}
.lg\:min-h-\[220px\] {
min-height: 22rem;
}
.lg\:min-h-\[300px\] {
min-height: 30rem;
}
.lg\:min-h-\[464px\] {
min-height: 46.4rem;
}
.lg\:min-h-\[500px\] {
min-height: 50rem;
}
.lg\:min-h-\[720px\] {
min-height: 72rem;
}
.lg\:min-h-\[730px\] {
min-height: 73rem;
}
.lg\:min-h-\[calc\(100svh-70px\)\] {
min-height: calc(100svh - 7rem);
}
.lg\:w-1\/2 {
width: 50%;
}
.lg\:w-1\/3 {
width: 33.333333%;
}
.lg\:w-1\/5 {
width: 20%;
}
.lg\:w-10\/12 {
width: 83.333333%;
}
.lg\:w-4\/5 {
width: 80%;
}
.lg\:w-8\/12 {
width: 66.666667%;
}
.lg\:w-\[10\%\] {
width: 10%;
}
.lg\:w-\[104\.5px\] {
width: 10.45rem;
}
.lg\:w-\[128px\] {
width: 12.8rem;
}
.lg\:w-\[1392px\] {
width: 139.2rem;
}
.lg\:w-\[14px\] {
width: 1.4rem;
}
.lg\:w-\[15\%\] {
width: 15%;
}
.lg\:w-\[15\.6\%\] {
width: 15.6%;
}
.lg\:w-\[16px\] {
width: 1.6rem;
}
.lg\:w-\[20px\] {
width: 2rem;
}
.lg\:w-\[253px\] {
width: 25.3rem;
}
.lg\:w-\[258px\] {
width: 25.8rem;
}
.lg\:w-\[30\%\] {
width: 30%;
}
.lg\:w-\[36px\] {
width: 3.6rem;
}
.lg\:w-\[430px\] {
width: 43rem;
}
.lg\:w-\[45\%\] {
width: 45%;
}
.lg\:w-\[65\%\] {
width: 65%;
}
.lg\:w-\[80\%\] {
width: 80%;
}
.lg\:w-\[84px\] {
width: 8.4rem;
}
.lg\:w-\[87px\] {
width: 8.7rem;
}
.lg\:w-\[calc\(100\%\*6\/7\)\] {
width: calc(100% * 6 / 7);
}
.lg\:w-\[calc\(25\%-18px\)\] {
width: calc(25% - 1.8rem);
}
.lg\:w-auto {
width: auto;
}
.lg\:w-full {
width: 100%;
}
.lg\:max-w-\[128px\] {
max-width: 12.8rem;
}
.lg\:max-w-\[337px\] {
max-width: 33.7rem;
}
.lg\:max-w-\[400px\] {
max-width: 40rem;
}
.lg\:max-w-\[440px\] {
max-width: 44rem;
}
.lg\:max-w-\[450px\] {
max-width: 45rem;
}
.lg\:max-w-\[512px\] {
max-width: 51.2rem;
}
.lg\:max-w-\[600px\] {
max-width: 60rem;
}
.lg\:max-w-\[75\%\] {
max-width: 75%;
}
.lg\:max-w-\[770px\] {
max-width: 77rem;
}
.lg\:max-w-\[80\%\] {
max-width: 80%;
}
.lg\:max-w-\[924px\] {
max-width: 92.4rem;
}
.lg\:max-w-none {
max-width: none;
}
.lg\:flex-1 {
flex: 1 1 0%;
}
.lg\:flex-none {
flex: none;
}
.lg\:shrink-0 {
flex-shrink: 0;
}
.lg\:grow {
flex-grow: 1;
}
.lg\:rotate-\[-33\.7deg\] {
--tw-rotate: -33.7deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.lg\:\!transform-none {
transform: none !important;
}
.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lg\:grid-cols-\[1fr\2c auto\] {
grid-template-columns: 1fr auto;
}
.lg\:grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.lg\:grid-rows-\[auto\2c 1fr\] {
grid-template-rows: auto 1fr;
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:\!flex-row-reverse {
flex-direction: row-reverse !important;
}
.lg\:flex-row-reverse {
flex-direction: row-reverse;
}
.lg\:flex-col {
flex-direction: column;
}
.lg\:content-center {
align-content: center;
}
.lg\:items-start {
align-items: flex-start;
}
.lg\:items-end {
align-items: flex-end;
}
.lg\:items-center {
align-items: center;
}
.lg\:items-stretch {
align-items: stretch;
}
.lg\:justify-start {
justify-content: flex-start;
}
.lg\:justify-end {
justify-content: flex-end;
}
.lg\:justify-center {
justify-content: center;
}
.lg\:justify-between {
justify-content: space-between;
}
.lg\:gap-0 {
gap: 0;
}
.lg\:gap-\[12px\] {
gap: 1.2rem;
}
.lg\:gap-\[16px\] {
gap: 1.6rem;
}
.lg\:gap-\[24px\] {
gap: 2.4rem;
}
.lg\:gap-\[32px\] {
gap: 3.2rem;
}
.lg\:gap-\[40px\] {
gap: 4rem;
}
.lg\:gap-\[8px\] {
gap: 0.8rem;
}
.lg\:gap-x-\[24px\] {
-moz-column-gap: 2.4rem;
column-gap: 2.4rem;
}
.lg\:gap-x-\[40px\] {
-moz-column-gap: 4rem;
column-gap: 4rem;
}
.lg\:gap-x-\[64px\] {
-moz-column-gap: 6.4rem;
column-gap: 6.4rem;
}
.lg\:gap-x-\[8px\] {
-moz-column-gap: 0.8rem;
column-gap: 0.8rem;
}
.lg\:gap-y-2 {
row-gap: 0.5rem;
}
.lg\:gap-y-\[10px\] {
row-gap: 1rem;
}
.lg\:gap-y-\[16px\] {
row-gap: 1.6rem;
}
.lg\:gap-y-\[24px\] {
row-gap: 2.4rem;
}
.lg\:gap-y-\[48px\] {
row-gap: 4.8rem;
}
.lg\:gap-y-\[64px\] {
row-gap: 6.4rem;
}
.lg\:space-x-\[24px\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2.4rem * var(--tw-space-x-reverse));
margin-left: calc(2.4rem * calc(1 - var(--tw-space-x-reverse)));
}
.lg\:self-start {
align-self: flex-start;
}
.lg\:self-center {
align-self: center;
}
.lg\:\!overflow-visible {
overflow: visible !important;
}
.lg\:overflow-y-visible {
overflow-y: visible;
}
.lg\:rounded-\[40px\] {
border-radius: 4rem;
}
.lg\:border {
border-width: 0.1rem;
}
.lg\:border-0 {
border-width: 0;
}
.lg\:border-b {
border-bottom-width: 0.1rem;
}
.lg\:border-b-0 {
border-bottom-width: 0;
}
.lg\:border-l {
border-left-width: 0.1rem;
}
.lg\:border-r {
border-right-width: 0.1rem;
}
.lg\:border-t-0 {
border-top-width: 0;
}
.lg\:border-slate\/10 {
border-color: rgb(31 30 29 / 0.1);
}
.lg\:bg-stone {
--tw-bg-opacity: 1;
background-color: rgb(245 243 241 / var(--tw-bg-opacity));
}
.lg\:bg-transparent {
background-color: rgba(255,255,255, 0);
}
.lg\:bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.lg\:p-0 {
padding: 0;
}
.lg\:p-\[24px\] {
padding: 2.4rem;
}
.lg\:px-0 {
padding-left: 0;
padding-right: 0;
}
.lg\:px-\[14px\] {
padding-left: 1.4rem;
padding-right: 1.4rem;
}
.lg\:px-\[16px\] {
padding-left: 1.6rem;
padding-right: 1.6rem;
}
.lg\:px-\[170px\] {
padding-left: 17rem;
padding-right: 17rem;
}
.lg\:px-\[20px\] {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:px-\[24px\] {
padding-left: 2.4rem;
padding-right: 2.4rem;
}
.lg\:px-\[32px\] {
padding-left: 3.2rem;
padding-right: 3.2rem;
}
.lg\:px-\[40px\] {
padding-left: 4rem;
padding-right: 4rem;
}
.lg\:px-\[48px\] {
padding-left: 4.8rem;
padding-right: 4.8rem;
}
.lg\:px-\[60px\] {
padding-left: 6rem;
padding-right: 6rem;
}
.lg\:px-\[62px\] {
padding-left: 6.2rem;
padding-right: 6.2rem;
}
.lg\:py-0 {
padding-top: 0;
padding-bottom: 0;
}
.lg\:py-\[120px\] {
padding-top: 12rem;
padding-bottom: 12rem;
}
.lg\:py-\[122px\] {
padding-top: 12.2rem;
padding-bottom: 12.2rem;
}
.lg\:py-\[12px\] {
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
.lg\:py-\[160px\] {
padding-top: 16rem;
padding-bottom: 16rem;
}
.lg\:py-\[165px\] {
padding-top: 16.5rem;
padding-bottom: 16.5rem;
}
.lg\:py-\[190px\] {
padding-top: 19rem;
padding-bottom: 19rem;
}
.lg\:py-\[192px\] {
padding-top: 19.2rem;
padding-bottom: 19.2rem;
}
.lg\:py-\[220px\] {
padding-top: 22rem;
padding-bottom: 22rem;
}
.lg\:py-\[237px\] {
padding-top: 23.7rem;
padding-bottom: 23.7rem;
}
.lg\:py-\[24px\] {
padding-top: 2.4rem;
padding-bottom: 2.4rem;
}
.lg\:py-\[25px\] {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.lg\:py-\[26px\] {
padding-top: 2.6rem;
padding-bottom: 2.6rem;
}
.lg\:py-\[28px\] {
padding-top: 2.8rem;
padding-bottom: 2.8rem;
}
.lg\:py-\[32px\] {
padding-top: 3.2rem;
padding-bottom: 3.2rem;
}
.lg\:py-\[40px\] {
padding-top: 4rem;
padding-bottom: 4rem;
}
.lg\:py-\[48px\] {
padding-top: 4.8rem;
padding-bottom: 4.8rem;
}
.lg\:py-\[56px\] {
padding-top: 5.6rem;
padding-bottom: 5.6rem;
}
.lg\:py-\[64px\] {
padding-top: 6.4rem;
padding-bottom: 6.4rem;
}
.lg\:py-\[80px\] {
padding-top: 8rem;
padding-bottom: 8rem;
}
.lg\:py-\[20px\] {
padding-top: 2rem;
padding-bottom: 2rem;
}
.lg\:pb-0 {
padding-bottom: 0;
}
.lg\:pb-\[120px\] {
padding-bottom: 12rem;
}
.lg\:pb-\[160px\] {
padding-bottom: 16rem;
}
.lg\:pb-\[166px\] {
padding-bottom: 16.6rem;
}
.lg\:pb-\[20px\] {
padding-bottom: 2rem;
}
.lg\:pb-\[24px\] {
padding-bottom: 2.4rem;
}
.lg\:pb-\[25px\] {
padding-bottom: 2.5rem;
}
.lg\:pb-\[40px\] {
padding-bottom: 4rem;
}
.lg\:pb-\[43px\] {
padding-bottom: 4.3rem;
}
.lg\:pb-\[56px\] {
padding-bottom: 5.6rem;
}
.lg\:pb-\[64px\] {
padding-bottom: 6.4rem;
}
.lg\:pb-\[80px\] {
padding-bottom: 8rem;
}
.lg\:pl-\[24px\] {
padding-left: 2.4rem;
}
.lg\:pl-\[56px\] {
padding-left: 5.6rem;
}
.lg\:pr-\[40px\] {
padding-right: 4rem;
}
.lg\:pt-0 {
padding-top: 0;
}
.lg\:pt-\[120px\] {
padding-top: 12rem;
}
.lg\:pt-\[160px\] {
padding-top: 16rem;
}
.lg\:pt-\[226px\] {
padding-top: 22.6rem;
}
.lg\:pt-\[40px\] {
padding-top: 4rem;
}
.lg\:pt-\[48px\] {
padding-top: 4.8rem;
}
.lg\:pt-\[80px\] {
padding-top: 8rem;
}
.lg\:text-left {
text-align: left;
}
.lg\:text-center {
text-align: center;
}
.lg\:text-right {
text-align: right;
}
.lg\:font-heading {
font-family: 'Optician Sans', Helvetica, Arial, sans-serif;
}
.lg\:text-\[16px\] {
font-size: 1.6rem;
}
.lg\:text-\[17px\] {
font-size: 1.7rem;
}
.lg\:text-\[18px\] {
font-size: 1.8rem;
}
.lg\:text-\[20px\] {
font-size: 2rem;
}
.lg\:text-\[28px\] {
font-size: 2.8rem;
}
.lg\:text-\[32px\] {
font-size: 3.2rem;
}
.lg\:text-\[40px\] {
font-size: 4rem;
}
.lg\:text-\[48px\] {
font-size: 4.8rem;
}
.lg\:text-\[64px\] {
font-size: 6.4rem;
}
.lg\:font-bold {
font-weight: 700;
}
.lg\:uppercase {
text-transform: uppercase;
}
.lg\:leading-\[43px\] {
line-height: 4.3rem;
}
.lg\:leading-\[53px\] {
line-height: 5.3rem;
}
.lg\:leading-none {
line-height: 1;
}
.lg\:tracking-\[-0\.01em\] {
letter-spacing: -0.01em;
}
.lg\:text-slate {
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.lg\:text-slate\/60 {
color: rgb(31 30 29 / 0.6);
}
.lg\:text-stone {
--tw-text-opacity: 1;
color: rgb(245 243 241 / var(--tw-text-opacity));
}
.lg\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.lg\:text-white\/50 {
color: rgb(255 255 255 / 0.5);
}
.lg\:\!opacity-100 {
opacity: 1 !important;
}
.lg\:opacity-100 {
opacity: 1;
}
.lg\:transition-\[background-color\2c color\] {
transition-property: background-color,color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.lg\:transition-\[background-color\] {
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.lg\:transition-none {
transition-property: none;
}
.lg\:delay-500 {
transition-delay: 500ms;
}
.lg\:duration-300 {
transition-duration: 300ms;
}
.lg\:ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.lg\:bg-primary {
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.after\:lg\:top-\[70px\]::after {
content: var(--tw-content);
top: 7rem;
}
.lg\:after\:\!hidden::after {
content: var(--tw-content);
display: none !important;
}
.first\:lg\:\!mt-\[-24px\]:first-child {
margin-top: -2.4rem !important;
}
.lg\:last\:\!hidden:last-child {
display: none !important;
}
.lg\:hover\:rounded-\[24px\]:hover {
border-radius: 2.4rem;
}
.lg\:hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.lg\:hover\:bg-primary:hover {
background-color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.lg\:focus\:rounded-\[24px\]:focus {
border-radius: 2.4rem;
}
.lg\:focus\:bg-white:focus {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.group\/menu-item:hover .lg\:group-hover\/menu-item\:visible {
visibility: visible;
}
.group\/image-item:hover .lg\:group-hover\/image-item\:scale-\[1\.1\] {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/card:hover .lg\:group-hover\/card\:rounded-\[24px\] {
border-radius: 2.4rem;
}
.group\/submenu-item:hover .lg\:group-hover\/submenu-item\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.group\/menu-item:hover .lg\:group-hover\/menu-item\:opacity-100 {
opacity: 1;
}
}
@media (min-width: 1280px) {
.xl\:col-span-5 {
grid-column: span 5 / span 5;
}
.xl\:col-span-6 {
grid-column: span 6 / span 6;
}
.xl\:col-span-8 {
grid-column: span 8 / span 8;
}
.xl\:col-start-3 {
grid-column-start: 3;
}
.xl\:col-start-8 {
grid-column-start: 8;
}
.xl\:col-end-10 {
grid-column-end: 10;
}
.xl\:col-end-4 {
grid-column-end: 4;
}
.xl\:max-w-\[640px\] {
max-width: 64rem;
}
.xl\:max-w-\[85\%\] {
max-width: 85%;
}
.xl\:max-w-\[900px\] {
max-width: 90rem;
}
.xl\:px-\[40px\] {
padding-left: 4rem;
padding-right: 4rem;
}
.xl\:pl-\[40px\] {
padding-left: 4rem;
}
.xl\:pr-\[24px\] {
padding-right: 2.4rem;
}
}
@media (min-width: 1440px) {
.\32xl\:top-\[150px\] {
top: 15rem;
}
.\32xl\:top-\[4px\] {
top: 0.4rem;
}
.\32xl\:col-span-10 {
grid-column: span 10 / span 10;
}
.\32xl\:col-span-5 {
grid-column: span 5 / span 5;
}
.\32xl\:col-span-9 {
grid-column: span 9 / span 9;
}
.\32xl\:col-start-1 {
grid-column-start: 1;
}
.\32xl\:col-start-2 {
grid-column-start: 2;
}
.\32xl\:col-start-7 {
grid-column-start: 7;
}
.\32xl\:ml-\[40px\] {
margin-left: 4rem;
}
.\32xl\:w-\[40\%\] {
width: 40%;
}
.\32xl\:max-w-\[180px\] {
max-width: 18rem;
}
.\32xl\:max-w-\[720px\] {
max-width: 72rem;
}
.\32xl\:p-\[40px\] {
padding: 4rem;
}
.\32xl\:px-\[56px\] {
padding-left: 5.6rem;
padding-right: 5.6rem;
}
.\32xl\:py-\[27px\] {
padding-top: 2.7rem;
padding-bottom: 2.7rem;
}
.\32xl\:pr-\[56px\] {
padding-right: 5.6rem;
}
.\32xl\:text-\[72px\] {
font-size: 7.2rem;
}
}
.\[\&\:has\(input\:focus-visible\)\]\:outline-dashed:has(input:focus-visible) {
outline-style: dashed;
}
.\[\&\:has\(input\:focus-visible\)\]\:outline-\[2px\]:has(input:focus-visible) {
outline-width: 0.2rem;
}
.\[\&\:has\(input\:focus-visible\)\]\:outline-white:has(input:focus-visible) {
outline-color: #FFFFFF;
}
.\[\&\>a\]\:text-slate>a {
--tw-text-opacity: 1;
color: rgb(31 30 29 / var(--tw-text-opacity));
}
.\[\&\>a\]\:underline>a {
text-decoration-line: underline;
}
.\[\&_a\]\:underline a {
text-decoration-line: underline;
}
.\[\&_a\]\:underline-offset-4 a {
text-underline-offset: 0.4rem;
}
.\[\&_a\]\:text-primary a {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}
.\[\&_a\]\:focus\:underline:focus a {
text-decoration-line: underline;
}
.\[\&_strong\]\:font-normal strong {
font-weight: 400;
}
.\[\&_strong\]\:text-primary strong {
color: rgba(var(--accent-colour), var(--accent-opacity, 1));
}