/*!*****************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/scss/main.scss ***! \*****************************************************************************************************************************************/ @charset "UTF-8"; /* ---------------------------------- *\ #COLOUR SETTINGS Set up a colour palette which allows us to theme the entire project from one location \* ---------------------------------- */ /* ---------------------------------- #TYPOGRAPHY SETTINGS ---------------------------------- */ @font-face { font-weight: bold; font-style: normal; font-family: candarabold; src: url("./fonts/candara_bold-webfont.woff2") format("woff2"), url("./fonts/candara_bold-webfont.woff") format("woff"); font-display: swap; } @font-face { font-weight: normal; font-style: normal; font-family: candararegular; src: url("./fonts/candara-webfont.woff2") format("woff2"), url("./fonts/candara-webfont.woff") format("woff"); font-display: swap; } @font-face { font-weight: normal; font-style: normal; font-family: "janda_elegant_handwritingRg"; src: url("./fonts/jandaeleganthandwriting-webfont.woff2") format("woff2"), url("./fonts/jandaeleganthandwriting-webfont.woff") format("woff"); font-display: swap; } /* ----------------------------------*\ #SPACING SETTINGS \*---------------------------------- */ /* ---------------------------------- #MEDIA QUERY SETTINGS Usage: @include mq($mq-mob, min) { ... }; ---------------------------------- */ /* ---------------------------------- #FONT-SIZE PX to REM for font-sizes and line-height Line height is relative to the cascade - ideally inherited from the but can be overridden. Usage: @include font-size($size-alpha); @include font-size($size-alpha, $line-height); overrides line-height ---------------------------------- */ /*! * ress.css • v4.0.0 * MIT License * github.com/filipelinhares/ress */ html { box-sizing: border-box; -webkit-text-size-adjust: 100%; word-break: normal; -moz-tab-size: 4; tab-size: 4; } *, :after, :before { background-repeat: no-repeat; box-sizing: inherit; } :after, :before { text-decoration: inherit; vertical-align: inherit; } * { padding: 0; margin: 0; } hr { overflow: visible; height: 0; color: inherit; } details, main { display: block; } summary { display: list-item; } small { font-size: 80%; } [hidden] { display: none; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } a { background-color: transparent; } a:active, a:hover { outline-width: 0; } code, kbd, pre, samp { font-family: monospace, monospace; } pre { font-size: 1em; } b, strong { font-weight: bolder; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { border-color: inherit; text-indent: 0; } input { border-radius: 0; } [disabled] { cursor: default; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; resize: vertical; } button, input, optgroup, select, textarea { font: inherit; } optgroup { font-weight: 700; } button { overflow: visible; } button, select { text-transform: none; } [role=button], [type=button], [type=reset], [type=submit], button { cursor: pointer; color: inherit; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring { outline: 1px dotted ButtonText; } [type=reset], [type=submit], button, html [type=button] { -webkit-appearance: button; } button, input, select, textarea { background-color: transparent; border-style: none; } a:focus, button:focus, input:focus, select:focus, textarea:focus { outline-width: 0; } select { -moz-appearance: none; -webkit-appearance: none; } select::-ms-expand { display: none; } select::-ms-value { color: currentColor; } legend { border: 0; color: inherit; display: table; white-space: normal; max-width: 100%; } ::-webkit-file-upload-button { -webkit-appearance: button; color: inherit; font: inherit; } img { border-style: none; } progress { vertical-align: baseline; } [aria-busy=true] { cursor: progress; } [aria-controls] { cursor: pointer; } [aria-disabled=true] { cursor: default; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; height: 100%; color: #4b4b4b; font-weight: normal; font-size: 62.5%; text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { font-size: 1.6rem; line-height: 1.25; position: relative; display: flex; flex-direction: column; min-height: var(--vh); margin: 0; font-weight: 400; font-family: "candararegular", sans-serif; text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; } /* Remove all animations and transitions for people that prefer not to see them */ @media screen and (prefers-reduced-motion: reduce), (update: slow) { *, ::before, ::after { transition-duration: 0.00001ms !important; animation-duration: 0.00001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; animation-delay: -1ms !important; background-attachment: initial !important; transition-delay: 0s !important; } } h1, h2, h3, h4, h5, h6 { font-family: "janda_elegant_handwritingRg", sans-serif; } ul { list-style: none; } nav li::before { content: ""; position: absolute; } p, li { margin: 0 0 16px; font-weight: 400; line-height: 1.4; } p:last-of-type, li:last-of-type { margin-bottom: 0; } a { color: inherit; } a, a:active, a:hover { text-decoration: none; } small { font-size: 0.1remrem; } ul, ol { margin: 0; padding: 0; list-style: none; } dl { margin-bottom: 10px; line-height: 1; } dt, dd { display: inline-block; } dt { font-weight: normal; } dd { margin: 0; padding: 0; } summary { position: relative; outline: none; list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } table { border-color: #000; } tr { vertical-align: baseline; } td { padding: 24px; } img { display: block; width: 100%; } iframe:fullscreen, video:fullscreen { transform: none; } address { font-style: normal; } .o-ar { position: relative; display: block; overflow: hidden; width: 100%; } .o-ar__item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .aspect-ratio { aspect-ratio: var(--mob-aspect-ratio); } @media screen and (min-width: 640px) { .aspect-ratio { aspect-ratio: var(--aspect-ratio); } } .btn { font-size: 0.16remrem; display: flex; flex-direction: row; align-items: center; line-height: 1.8; letter-spacing: 4.8px; text-transform: uppercase; } .btn--primary { position: relative; } .btn--primary span { transition: transform 0.3s ease-in-out; transform: translateX(0); } .btn--primary:hover span { transform: translateX(15px); } .container { position: relative; width: min(100% - 32px, 1440px); margin-inline: auto; } @media screen and (min-width: 640px) { .container { width: min(100% - 64px, 1440px); } } .container--full { width: 100%; } @media screen and (max-width: 639px) { .container--full\@mob { width: 100%; } } .container--short { max-width: 800px; } .container--padded { padding-top: 48px; padding-bottom: 48px; } @media screen and (min-width: 768px) { .container--padded { padding-top: 64px; padding-bottom: 64px; } } .font-title { margin-bottom: 24px; color: #9298cc; font-size: 4rem; } @media screen and (min-width: 640px) { .font-title { margin-bottom: 32px; font-size: 8rem; } } .font-size--h10 { font-size: 1rem; } .font-size--h9 { font-size: 1.2rem; } .font-size--h8 { font-size: 1.4rem; } .font-size--h7 { font-size: 1.6rem; } .font-size--h6 { font-size: 1.8rem; } .font-size--h5 { font-size: 2.4rem; } .font-size--h4 { font-size: 2.8rem; } .font-size--h3 { font-size: 3.2rem; } .font-size--h2 { font-size: 3.6rem; } .font-size--h1 { font-size: 4rem; } @media screen and (min-width: 640px) { .font-size--h10\@desk { font-size: 1rem; } } @media screen and (min-width: 640px) { .font-size--h9\@desk { font-size: 1.2rem; } } @media screen and (min-width: 640px) { .font-size--h8\@desk { font-size: 1.4rem; } } @media screen and (min-width: 640px) { .font-size--h7\@desk { font-size: 1.6rem; } } @media screen and (min-width: 640px) { .font-size--h6\@desk { font-size: 1.8rem; } } @media screen and (min-width: 640px) { .font-size--h5\@desk { font-size: 2.4rem; } } @media screen and (min-width: 640px) { .font-size--h4\@desk { font-size: 2.8rem; } } @media screen and (min-width: 640px) { .font-size--h3\@desk { font-size: 3.2rem; } } @media screen and (min-width: 640px) { .font-size--h2\@desk { font-size: 3.6rem; } } @media screen and (min-width: 640px) { .font-size--h1\@desk { font-size: 4rem; } } .font-weight--400 { font-weight: 400; } .font-weight--500 { font-weight: 500; } .font-weight--600 { font-weight: 600; } .font-weight--700 { font-weight: 700; } .font-align--left { text-align: left; } .font-align--center { text-align: center; } .font-align--right { text-align: right; } .font-style--upper { text-transform: uppercase; } .font-style--underline { text-decoration: underline; } .font-heading { font-family: "janda_elegant_handwritingRg", sans-serif; } .font--highlight { color: #9298cc; font-size: 1.6rem; font-family: "janda_elegant_handwritingRg", sans-serif; } @media screen and (min-width: 640px) { .font--highlight { font-size: 2.8rem; } } .ico { display: inline-flex; width: 100%; height: 100%; fill: currentcolor; } .ico--arrow { width: 20px; height: 20px; } .img { object-fit: cover; width: 100%; height: 100%; image-rendering: auto; } .img:hover::after { background-image: var(--hover); } .img--contain { object-fit: contain; } .img__frame { position: relative; display: flex; overflow: hidden; } .img__frame--fill { width: 100%; height: 100%; } .row { position: relative; width: 100%; margin-bottom: var(--row, 0); padding: var(--padding-mob, 0) 0; background-color: var(--bg-colour, ""); } @media screen and (min-width: 640px) { .row { margin-bottom: var(--row-desk, 0); padding: var(--padding, 0) 0; } } .header { position: relative; } .header__container { display: grid; grid-template: "logo" min-content "message" auto/1fr; row-gap: 0; align-items: start; padding: 24px 0; column-gap: 36px; } @media screen and (min-width: 640px) { .header__container { grid-template: "logo message" 150px "logo nav" auto/200px 1fr; } } .header__logo { grid-area: logo; width: 100%; max-width: 100px; height: auto; margin-inline: auto; margin-bottom: 8px; } @media screen and (min-width: 640px) { .header__logo { max-width: 200px; margin: unset; margin-inline: unset; } } .header__nav { display: flex; flex-grow: 1; grid-area: nav; justify-content: flex-end; } @media screen and (min-width: 560px) { .header__nav { order: 1; } } @media screen and (min-width: 1440px) { .header__nav { width: auto; } } .header__message { display: flex; grid-area: message; align-self: end; margin-left: auto; color: #acacac; font-size: 1.6rem; } @media screen and (min-width: 640px) { .header__message { max-width: 970px; font-size: 2.4rem; } } .hamburger { position: absolute; top: 24px; left: 0; z-index: 2; display: flex; justify-content: center; align-items: center; width: 30px; height: 17px; margin-right: 24px; padding: 0; border: none; background: transparent; outline: none; } @media screen and (min-width: 1024px) { .hamburger { display: none; } } .hamburger__patty { position: absolute; left: 0; width: 30px; height: 1px; background-color: #222; transition-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19); transition-duration: 0.07s; transform: scaleY(0.5); } .hamburger__patty--top { top: 0; transition: transform 0.07s 0.12s ease, opacity 0.07s ease; } .hamburger__patty--bottom { bottom: 0; transition: bottom 0.07s 0.12s ease, transform 0.07s cubic-bezier(0.55, 0.06, 0.68, 0.19); } .hamburger.is-active .hamburger__patty { height: 0.5px; background-color: #222; } .hamburger.is-active .hamburger__patty--top { opacity: 0; transition: transform 0.07s ease, opacity 0.07s 0.12s ease; transform: scaleY(0.5) translateY(9.5px); } .hamburger.is-active .hamburger__patty--middle { transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); transform: rotate(45deg); } .hamburger.is-active .hamburger__patty--bottom { bottom: 9.5px; transition: bottom 0.07s ease, transform 0.07s 0.12s cubic-bezier(0.22, 0.61, 0.36, 1); transform: rotate(-45deg); } .nav { position: absolute; top: 0; left: -16px; z-index: 1; width: 100vw; height: 100vh; padding: 64px 0 25px; background-color: white; transform: translateX(-100vh); transition: transform 0.3s ease-in-out; font-family: "candarabold", sans-serif; text-transform: uppercase; } @media screen and (min-width: 1024px) { .nav { position: relative; width: 100%; height: auto; padding: 24px 0 0; background-color: transparent; transform: none; } } .nav.is-active { transform: translateX(0%); } .nav__list { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; overflow: auto; } @media screen and (min-width: 1024px) { .nav__list { flex-direction: row; justify-content: flex-end; overflow: unset; } } .nav__item { margin-bottom: 32px; font-size: 1.8rem; padding: 0 24px; } @media screen and (min-width: 640px) { .nav__item { border-right: 1px solid #4b4b4b; } } .nav__item:last-of-type { border: none; padding-right: 0; } .nav__item:hover .nav__link span, .nav__item--active .nav__link span { color: #77ae99; } .nav__item:hover .nav__sub-menu { opacity: 1; visibility: visible; touch-action: auto; } .nav__item:nth-of-type(2) { transition-delay: 0.2s; } .nav__item:nth-of-type(3) { transition-delay: calc(0.2s * (3 - 1)); } .nav__item:nth-of-type(4) { transition-delay: calc(0.2s * (4 - 1)); } .nav__item:nth-of-type(5) { transition-delay: calc(0.2s * (5 - 1)); } .nav__item:nth-of-type(6) { transition-delay: calc(0.2s * (6 - 1)); } .nav__item:nth-of-type(7) { transition-delay: calc(0.2s * (7 - 1)); } .nav__item:nth-of-type(8) { transition-delay: calc(0.2s * (8 - 1)); } .nav__item:nth-of-type(9) { transition-delay: calc(0.2s * (9 - 1)); } .nav__item:nth-of-type(10) { transition-delay: calc(0.2s * (10 - 1)); } @media screen and (min-width: 1024px) { .nav__item { margin-bottom: 0; transform: translateX(0); opacity: 1; } } .nav__link { display: flex; justify-content: flex-start; } @media screen and (min-width: 1024px) { .nav__link { justify-content: flex-end; } } .nav__link span { color: #4b4b4b; line-height: 1; } .nav__sub-menu { position: relative; } @media screen and (min-width: 1024px) { .nav__sub-menu { position: absolute; left: 0; display: flex; flex-direction: column; align-items: flex-start; width: 200px; background-color: #fff; box-shadow: 3px 5px 5px rgba(34, 34, 34, 0.05); color: #4b4b4b; opacity: 0; visibility: hidden; touch-action: none; transition-property: opacity, visibility; transition-duration: 0.4s; transition-timing-function: ease-in-out; } } .nav__sub-menu__item { margin-bottom: 0; padding: 16px 16px 0 10px; font-size: 1.6rem; font-weight: 400; border: none; } @media screen and (min-width: 640px) { .nav__sub-menu__item { padding: 16px; } } .nav__sub-menu__link span { color: #4b4b4b !important; } .nav__sub-menu__link--active span, .nav__sub-menu__link:hover span { color: #77ae99 !important; } .footer { padding: 16px 0; color: #9298cc; font-size: 1.8rem; font-family: "candarabold", sans-serif; } @media screen and (min-width: 640px) { .footer { font-size: 3.6rem; } } .content { position: relative; background-position: center; background-size: cover; padding-top: 32px; padding-bottom: 32px; } .content__inner { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; margin: auto; } @media screen and (min-width: 768px) { .content__inner { flex-direction: row; } } .content__wrapper { display: flex; flex-direction: column; width: 100%; } @media screen and (min-width: 640px) { .content__wrapper { gap: 50px; flex-direction: row; } } .content__card { position: relative; width: 100%; } @media screen and (min-width: 640px) { [data-cols="2"] .content__card { width: 50%; } } @media screen and (min-width: 640px) { [data-cols="3"] .content__card { width: 33.33%; } } .content__card-icon { max-width: 180px; height: auto; margin-bottom: 20px; } .content__card-title { font-family: "candararegular", sans-serif; color: #9298cc; margin-bottom: 20px; } .content__card-desc { opacity: 0; transform: opacity 0.5s ease-in-out; } .content__card--icon { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 20px; } .content__card--icon:hover { background-color: rgba(146, 152, 204, 0.2); } .content__card--icon:hover .content__card-desc { opacity: 1; } .content__tel { width: 300px; height: 300px; margin-left: 5rem; } /** To prevent creating unnecessary styles, add here your breakpoints as needed following below examples. */ .c-carousel { position: relative; } .c-carousel--product { display: flex; flex-direction: column; } @media screen and (min-width: 820px) { .c-carousel--product { flex-direction: row-reverse; } } .c-carousel__slider { display: flex; overflow: hidden; width: 100%; } .c-carousel__slider.flickity-ready .flickity-viewport { transition: height 300ms ease-in-out; } @media screen and (min-width: 820px) { .c-carousel--product .c-carousel__slider { width: calc(100% - 100px); } } .c-carousel__slider--banner { aspect-ratio: 1440/600; } .c-carousel__slide { position: relative; display: flex; flex-shrink: 0; width: 100%; } .flickity-ready .c-carousel__slide { height: 100%; } .c-carousel__slide--stacked { flex-direction: column; } @media screen and (min-width: 820px) { .c-carousel__slide--stacked { flex-direction: unset; } } .c-carousel__nav { position: absolute; top: 50%; right: 0; display: flex; justify-content: space-between; width: 100%; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: visibility 0ms, opacity 0.2s ease-in-out 1s; transform: translateY(-50%); } .flickity-enabled ~ .c-carousel__nav { opacity: 0.6; visibility: visible; } .c-carousel__arrow { display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; background-color: #222; pointer-events: auto; } .c-carousel__content { position: absolute; } .c-carousel__pager { position: absolute; right: 0; bottom: 16px; left: 0; display: flex; justify-content: center; padding: 24px; color: #fff; } @media screen and (min-width: 640px) { .c-carousel__pager { bottom: 8px; } } .c-carousel__pager-status { position: relative; display: inline-flex; width: 10px; height: 10px; border: 1px solid currentcolor; border-radius: 50%; cursor: pointer; /* stylelint-disable-next-line */ } .c-carousel__pager-status + .c-carousel__pager-status { margin-left: 16px; } .c-carousel__pager-status::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; margin: -1px; border-radius: 50%; background-color: currentcolor; opacity: 0; transition: all 300ms linear; } .c-carousel__pager-status:hover, .c-carousel__pager-status[aria-current] { /* stylelint-disable-next-line */ } .c-carousel__pager-status:hover::after, .c-carousel__pager-status[aria-current]::after { opacity: 1; } .rt h1, .rt h2, .rt h3, .rt h4, .rt h5, .rt h6 { margin-bottom: 16px; } .rt p { margin-bottom: 16px; } .rt img { display: initial; } .rt ul { list-style-type: disc; } .rt ul li { padding-left: 0px; margin-left: 14px; } .rt ul li:last-of-type { margin-bottom: 16px; } .rt ul li::marker { margin-right: 5px; } .rt ol li { list-style: auto; list-style-position: inside; } .rt ol li:last-of-type { margin-bottom: 16px; } .rt a { text-decoration: underline; } .rt blockquote { font-size: 0.18remrem; position: relative; padding: 16px 32px 16px 80px; background-color: #ededed; font-weight: 600; font-style: italic; } .rt blockquote::before { font-size: 1.2remrem; content: "“"; position: absolute; top: 60px; left: -8px; line-height: 0; } .c-contact__inner { display: flex; flex-direction: column; } @media screen and (min-width: 640px) { .c-contact__inner { flex-direction: row; } } .c-contact__form { width: 100%; max-width: 850px; padding: 32px; background-color: rgba(146, 152, 204, 0.2); } .c-contact input[type=text], .c-contact input[type=email], .c-contact textarea { font-size: 0.18remrem; width: 100%; margin-bottom: 16px; padding: 16px; background-color: #fff; color: #9298cc; font-weight: 600; } .c-contact input[type=submit] { font-size: 0.32remrem; padding: 8px 16px; border: 2px solid #9298cc; color: #9298cc; font-weight: 600; text-transform: uppercase; transition: background-color 0.3s ease-in-out; } .c-contact input[type=submit]:hover { background-color: #9298cc; color: #fff; } .c-form__field { font-size: 0.18remrem; width: 100%; margin-bottom: 24px; padding: 24px; background-color: #fff; color: #9298cc; font-weight: 600; } .c-form__button { font-size: 0.18remrem; padding: 24px 31px; border: 2px solid #acacac; color: #acacac; font-weight: 600; transition: background-color 0.3s ease-in-out; } .u-mt-0 { margin-top: 0px; } .u-mt-8 { margin-top: 8px; } .u-mt-16 { margin-top: 16px; } .u-mt-24 { margin-top: 24px; } .u-mt-32 { margin-top: 32px; } .u-mt-48 { margin-top: 48px; } .u-mt-56 { margin-top: 56px; } .u-mt-64 { margin-top: 64px; } .u-mt-72 { margin-top: 72px; } .u-mt-80 { margin-top: 80px; } .u-mt-96 { margin-top: 96px; } @media screen and (min-width: 640px) { .u-mt-0\@desk { margin-top: 0px; } } @media screen and (min-width: 640px) { .u-mt-8\@desk { margin-top: 8px; } } @media screen and (min-width: 640px) { .u-mt-16\@desk { margin-top: 16px; } } @media screen and (min-width: 640px) { .u-mt-24\@desk { margin-top: 24px; } } @media screen and (min-width: 640px) { .u-mt-32\@desk { margin-top: 32px; } } @media screen and (min-width: 640px) { .u-mt-48\@desk { margin-top: 48px; } } @media screen and (min-width: 640px) { .u-mt-56\@desk { margin-top: 56px; } } @media screen and (min-width: 640px) { .u-mt-64\@desk { margin-top: 64px; } } @media screen and (min-width: 640px) { .u-mt-72\@desk { margin-top: 72px; } } @media screen and (min-width: 640px) { .u-mt-80\@desk { margin-top: 80px; } } @media screen and (min-width: 640px) { .u-mt-96\@desk { margin-top: 96px; } } .u-mr-0 { margin-right: 0px; } .u-mr-8 { margin-right: 8px; } .u-mr-16 { margin-right: 16px; } .u-mr-24 { margin-right: 24px; } .u-mr-32 { margin-right: 32px; } .u-mr-48 { margin-right: 48px; } .u-mr-56 { margin-right: 56px; } .u-mr-64 { margin-right: 64px; } .u-mr-72 { margin-right: 72px; } .u-mr-80 { margin-right: 80px; } .u-mr-96 { margin-right: 96px; } @media screen and (min-width: 640px) { .u-mr-0\@desk { margin-right: 0px; } } @media screen and (min-width: 640px) { .u-mr-8\@desk { margin-right: 8px; } } @media screen and (min-width: 640px) { .u-mr-16\@desk { margin-right: 16px; } } @media screen and (min-width: 640px) { .u-mr-24\@desk { margin-right: 24px; } } @media screen and (min-width: 640px) { .u-mr-32\@desk { margin-right: 32px; } } @media screen and (min-width: 640px) { .u-mr-48\@desk { margin-right: 48px; } } @media screen and (min-width: 640px) { .u-mr-56\@desk { margin-right: 56px; } } @media screen and (min-width: 640px) { .u-mr-64\@desk { margin-right: 64px; } } @media screen and (min-width: 640px) { .u-mr-72\@desk { margin-right: 72px; } } @media screen and (min-width: 640px) { .u-mr-80\@desk { margin-right: 80px; } } @media screen and (min-width: 640px) { .u-mr-96\@desk { margin-right: 96px; } } .u-mb-0 { margin-bottom: 0px; } .u-mb-8 { margin-bottom: 8px; } .u-mb-16 { margin-bottom: 16px; } .u-mb-24 { margin-bottom: 24px; } .u-mb-32 { margin-bottom: 32px; } .u-mb-48 { margin-bottom: 48px; } .u-mb-56 { margin-bottom: 56px; } .u-mb-64 { margin-bottom: 64px; } .u-mb-72 { margin-bottom: 72px; } .u-mb-80 { margin-bottom: 80px; } .u-mb-96 { margin-bottom: 96px; } @media screen and (min-width: 640px) { .u-mb-0\@desk { margin-bottom: 0px; } } @media screen and (min-width: 640px) { .u-mb-8\@desk { margin-bottom: 8px; } } @media screen and (min-width: 640px) { .u-mb-16\@desk { margin-bottom: 16px; } } @media screen and (min-width: 640px) { .u-mb-24\@desk { margin-bottom: 24px; } } @media screen and (min-width: 640px) { .u-mb-32\@desk { margin-bottom: 32px; } } @media screen and (min-width: 640px) { .u-mb-48\@desk { margin-bottom: 48px; } } @media screen and (min-width: 640px) { .u-mb-56\@desk { margin-bottom: 56px; } } @media screen and (min-width: 640px) { .u-mb-64\@desk { margin-bottom: 64px; } } @media screen and (min-width: 640px) { .u-mb-72\@desk { margin-bottom: 72px; } } @media screen and (min-width: 640px) { .u-mb-80\@desk { margin-bottom: 80px; } } @media screen and (min-width: 640px) { .u-mb-96\@desk { margin-bottom: 96px; } } .u-ml-0 { margin-left: 0px; } .u-ml-8 { margin-left: 8px; } .u-ml-16 { margin-left: 16px; } .u-ml-24 { margin-left: 24px; } .u-ml-32 { margin-left: 32px; } .u-ml-48 { margin-left: 48px; } .u-ml-56 { margin-left: 56px; } .u-ml-64 { margin-left: 64px; } .u-ml-72 { margin-left: 72px; } .u-ml-80 { margin-left: 80px; } .u-ml-96 { margin-left: 96px; } @media screen and (min-width: 640px) { .u-ml-0\@desk { margin-left: 0px; } } @media screen and (min-width: 640px) { .u-ml-8\@desk { margin-left: 8px; } } @media screen and (min-width: 640px) { .u-ml-16\@desk { margin-left: 16px; } } @media screen and (min-width: 640px) { .u-ml-24\@desk { margin-left: 24px; } } @media screen and (min-width: 640px) { .u-ml-32\@desk { margin-left: 32px; } } @media screen and (min-width: 640px) { .u-ml-48\@desk { margin-left: 48px; } } @media screen and (min-width: 640px) { .u-ml-56\@desk { margin-left: 56px; } } @media screen and (min-width: 640px) { .u-ml-64\@desk { margin-left: 64px; } } @media screen and (min-width: 640px) { .u-ml-72\@desk { margin-left: 72px; } } @media screen and (min-width: 640px) { .u-ml-80\@desk { margin-left: 80px; } } @media screen and (min-width: 640px) { .u-ml-96\@desk { margin-left: 96px; } } .u-pt-0 { padding-top: 0px; } .u-pt-8 { padding-top: 8px; } .u-pt-16 { padding-top: 16px; } .u-pt-24 { padding-top: 24px; } .u-pt-32 { padding-top: 32px; } .u-pt-48 { padding-top: 48px; } .u-pt-56 { padding-top: 56px; } .u-pt-64 { padding-top: 64px; } .u-pt-72 { padding-top: 72px; } .u-pt-80 { padding-top: 80px; } .u-pt-96 { padding-top: 96px; } @media screen and (min-width: 640px) { .u-pt-0\@desk { padding-top: 0px; } } @media screen and (min-width: 640px) { .u-pt-8\@desk { padding-top: 8px; } } @media screen and (min-width: 640px) { .u-pt-16\@desk { padding-top: 16px; } } @media screen and (min-width: 640px) { .u-pt-24\@desk { padding-top: 24px; } } @media screen and (min-width: 640px) { .u-pt-32\@desk { padding-top: 32px; } } @media screen and (min-width: 640px) { .u-pt-48\@desk { padding-top: 48px; } } @media screen and (min-width: 640px) { .u-pt-56\@desk { padding-top: 56px; } } @media screen and (min-width: 640px) { .u-pt-64\@desk { padding-top: 64px; } } @media screen and (min-width: 640px) { .u-pt-72\@desk { padding-top: 72px; } } @media screen and (min-width: 640px) { .u-pt-80\@desk { padding-top: 80px; } } @media screen and (min-width: 640px) { .u-pt-96\@desk { padding-top: 96px; } } .u-pr-0 { padding-right: 0px; } .u-pr-8 { padding-right: 8px; } .u-pr-16 { padding-right: 16px; } .u-pr-24 { padding-right: 24px; } .u-pr-32 { padding-right: 32px; } .u-pr-48 { padding-right: 48px; } .u-pr-56 { padding-right: 56px; } .u-pr-64 { padding-right: 64px; } .u-pr-72 { padding-right: 72px; } .u-pr-80 { padding-right: 80px; } .u-pr-96 { padding-right: 96px; } @media screen and (min-width: 640px) { .u-pr-0\@desk { padding-right: 0px; } } @media screen and (min-width: 640px) { .u-pr-8\@desk { padding-right: 8px; } } @media screen and (min-width: 640px) { .u-pr-16\@desk { padding-right: 16px; } } @media screen and (min-width: 640px) { .u-pr-24\@desk { padding-right: 24px; } } @media screen and (min-width: 640px) { .u-pr-32\@desk { padding-right: 32px; } } @media screen and (min-width: 640px) { .u-pr-48\@desk { padding-right: 48px; } } @media screen and (min-width: 640px) { .u-pr-56\@desk { padding-right: 56px; } } @media screen and (min-width: 640px) { .u-pr-64\@desk { padding-right: 64px; } } @media screen and (min-width: 640px) { .u-pr-72\@desk { padding-right: 72px; } } @media screen and (min-width: 640px) { .u-pr-80\@desk { padding-right: 80px; } } @media screen and (min-width: 640px) { .u-pr-96\@desk { padding-right: 96px; } } .u-pb-0 { padding-bottom: 0px; } .u-pb-8 { padding-bottom: 8px; } .u-pb-16 { padding-bottom: 16px; } .u-pb-24 { padding-bottom: 24px; } .u-pb-32 { padding-bottom: 32px; } .u-pb-48 { padding-bottom: 48px; } .u-pb-56 { padding-bottom: 56px; } .u-pb-64 { padding-bottom: 64px; } .u-pb-72 { padding-bottom: 72px; } .u-pb-80 { padding-bottom: 80px; } .u-pb-96 { padding-bottom: 96px; } @media screen and (min-width: 640px) { .u-pb-0\@desk { padding-bottom: 0px; } } @media screen and (min-width: 640px) { .u-pb-8\@desk { padding-bottom: 8px; } } @media screen and (min-width: 640px) { .u-pb-16\@desk { padding-bottom: 16px; } } @media screen and (min-width: 640px) { .u-pb-24\@desk { padding-bottom: 24px; } } @media screen and (min-width: 640px) { .u-pb-32\@desk { padding-bottom: 32px; } } @media screen and (min-width: 640px) { .u-pb-48\@desk { padding-bottom: 48px; } } @media screen and (min-width: 640px) { .u-pb-56\@desk { padding-bottom: 56px; } } @media screen and (min-width: 640px) { .u-pb-64\@desk { padding-bottom: 64px; } } @media screen and (min-width: 640px) { .u-pb-72\@desk { padding-bottom: 72px; } } @media screen and (min-width: 640px) { .u-pb-80\@desk { padding-bottom: 80px; } } @media screen and (min-width: 640px) { .u-pb-96\@desk { padding-bottom: 96px; } } .u-pl-0 { padding-left: 0px; } .u-pl-8 { padding-left: 8px; } .u-pl-16 { padding-left: 16px; } .u-pl-24 { padding-left: 24px; } .u-pl-32 { padding-left: 32px; } .u-pl-48 { padding-left: 48px; } .u-pl-56 { padding-left: 56px; } .u-pl-64 { padding-left: 64px; } .u-pl-72 { padding-left: 72px; } .u-pl-80 { padding-left: 80px; } .u-pl-96 { padding-left: 96px; } @media screen and (min-width: 640px) { .u-pl-0\@desk { padding-left: 0px; } } @media screen and (min-width: 640px) { .u-pl-8\@desk { padding-left: 8px; } } @media screen and (min-width: 640px) { .u-pl-16\@desk { padding-left: 16px; } } @media screen and (min-width: 640px) { .u-pl-24\@desk { padding-left: 24px; } } @media screen and (min-width: 640px) { .u-pl-32\@desk { padding-left: 32px; } } @media screen and (min-width: 640px) { .u-pl-48\@desk { padding-left: 48px; } } @media screen and (min-width: 640px) { .u-pl-56\@desk { padding-left: 56px; } } @media screen and (min-width: 640px) { .u-pl-64\@desk { padding-left: 64px; } } @media screen and (min-width: 640px) { .u-pl-72\@desk { padding-left: 72px; } } @media screen and (min-width: 640px) { .u-pl-80\@desk { padding-left: 80px; } } @media screen and (min-width: 640px) { .u-pl-96\@desk { padding-left: 96px; } } [hidden] { display: none !important; } .sr-only:not(:focus, :active) { position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; white-space: nowrap; } @media screen and (max-width: 640px) { [data-mq-hide=mob-lrg] { display: none !important; } } @media screen and (min-width: 640px) { [data-mq-hide=desk] { display: none !important; } } /* stylelint-disable */ /* ====== Flickity ====== */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-enabled.is-draggable { user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: grabbing; } .flickity-slider { will-change: transform; position: relative; width: 100%; height: 100%; } .flickity-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; } /* stylelint-enable */