/* PUCHIX - consolidated stylesheet (hand-cleaned Webflow export).
   1 reset  2 base framework (load-bearing rules, renamed .wf-)
   2b widget geometry the dropped runtime rules used to provide
   3 Puchix design (incl. the renamed commerce layout)
   4 components (vanilla replacements for the Webflow runtime and
   its IX2 interactions).
   Fonts: assets/fonts/fonts.css (Urbanist, self-hosted woff2). */

/* ======================================================================
   1. Reset (normalize)
   ====================================================================== */
html {
  font-family: sans-serif;
  
  -ms-text-size-adjust: 100%;
  
  -webkit-text-size-adjust: 100%;
  
}
body {
  margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
audio, canvas, progress, video {
  display: inline-block;
  
  vertical-align: baseline;
  
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden], template {
  display: none;
}
a {
  background-color: transparent;
}
a:active, a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b, strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button, input, optgroup, select, textarea {
  color: inherit;
  
  font: inherit;
  
  margin: 0;
  
}
button {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  
  cursor: pointer;
  
}
button[disabled], html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type='checkbox'], input[type='radio'] {
  box-sizing: border-box;
  
  padding: 0;
  
}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
input[type='search'] {
  -webkit-appearance: none;
  
}
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  
  padding: 0;
  
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}
/* ======================================================================
   2. Base framework (runtime-only rules dropped; the rest kept as .wf-)
   ====================================================================== */
[class^="w-icon-"], [class*=" w-icon-"] {
  
  font-family: 'webflow-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.wf-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.wf-button {
  -webkit-appearance: button;
}
h1:where(:not([class*="heading-scale-"])), h2:where(:not([class*="heading-scale-"])), h3:where(:not([class*="heading-scale-"])), h4:where(:not([class*="heading-scale-"])), h5:where(:not([class*="heading-scale-"])), h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-1), :where(.heading-scale-2), :where(.heading-scale-3), :where(.heading-scale-4), :where(.heading-scale-5), :where(.heading-scale-6) {
  font-weight: bold;
  margin-bottom: 10px;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul, ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.embed:before, .embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.embed:after {
  clear: both;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button, [type='button'], [type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.wf-form {
  margin: 0 0 15px;
}
.wf-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.wf-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.wf-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.wf-input::placeholder {
  color: #999;
}
.wf-input:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-input[readonly], fieldset[disabled] .wf-input {
  cursor: not-allowed;
}
.wf-input[readonly] {
  background-color: #eeeeee;
}
textarea.wf-input {
  height: auto;
}
.wf-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.wf-container:before, .wf-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.wf-container:after {
  clear: both;
}
@media screen and (max-width: 991px) {
.wf-container {
    max-width: 728px;
  }
}
@media screen and (max-width: 479px) {
.wf-container {
    max-width: none;
  }
}
.richtext:before, .richtext:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.richtext:after {
  clear: both;
}
.richtext[contenteditable="true"]:before, .richtext[contenteditable="true"]:after {
  white-space: initial;
}
.richtext ol, .richtext ul {
  overflow: hidden;
}
.richtext .richtext-figure-selected.richtext-figure-type-video div:after, .richtext .richtext-figure-selected[data-rt-type="video"] div:after {
  outline: 2px solid #2895f7;
}
.richtext .richtext-figure-selected.richtext-figure-type-image div, .richtext .richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}
.richtext figure.richtext-figure-type-video > div:after, .richtext figure[data-rt-type="video"] > div:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.richtext figure {
  position: relative;
  max-width: 60%;
}
.richtext figure > div:before {
  cursor: default!important;
}
.richtext figure img {
  width: 100%;
}
.richtext figure figcaption.richtext-figcaption-placeholder {
  opacity: 0.6;
}
.richtext figure div {
  
  font-size: 0px;
  color: transparent;
}
.richtext figure.richtext-figure-type-image, .richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure.richtext-figure-type-image > div, .richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure.richtext-figure-type-image > figcaption, .richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure.richtext-figure-type-video, .richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure.richtext-figure-type-video iframe, .richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure.richtext-figure-type-video > div, .richtext figure[data-rt-type="video"] > div {
  width: 100%;
}
.richtext figure.richtext-align-center {
  margin-right: auto;
  margin-left: auto;
  clear: both;
}
.richtext figure.richtext-align-center.richtext-figure-type-image > div, .richtext figure.richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}
.richtext figure.richtext-align-normal {
  clear: both;
}
.richtext figure.richtext-align-fullwidth {
  width: 100%;
  max-width: 100%;
  text-align: center;
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.richtext figure.richtext-align-fullwidth > div {
  display: inline-block;
  
  padding-bottom: inherit;
}
.richtext figure.richtext-align-fullwidth > figcaption {
  display: block;
}
.richtext figure.richtext-align-floatleft {
  float: left;
  margin-right: 15px;
  clear: none;
}
.richtext figure.richtext-align-floatright {
  float: right;
  margin-left: 15px;
  clear: none;
}
.tabset {
  position: relative;
}
.tabset:before, .tabset:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.tabset:after {
  clear: both;
}
.tabset-menu {
  position: relative;
}
.tabset-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: #222222;
  background-color: #dddddd;
}
.tabset-link[aria-current="page"], .tabset-link.is-active {
  background-color: #C8C8C8;
}
.tabset-link:focus {
  outline: 0;
}
.tabset-content {
  position: relative;
  display: block;
  overflow: hidden;
}
.tabset-pane {
  position: relative;
  display: none;
}
.tabset-pane.is-active {
  display: block;
}
@media screen and (max-width: 479px) {
.tabset-link {
    display: block;
  }
}
@keyframes spin {
0% {
    transform: rotate(0deg);
  }
100% {
    transform: rotate(360deg);
  }
}
/* ======================================================================
   2b. Widget geometry the dropped rules used to provide
   ====================================================================== */
/* Geometry the dropped Webflow widget rules used to provide.
 *
 * build_css drops the `.w-nav*` / `.w-dropdown*` / `.w-slider*` / `.w-icon-*`
 * rules because the runtime that drove them is gone. Those rules also carried
 * real layout that the design sheet silently relies on, so it is transcribed
 * here against this design's own class names and emitted BETWEEN the framework
 * and the design -- the design then keeps overriding it exactly as it did in
 * the export.
 *
 * Everything in this file was read off webflow.css (see probe_widget_css.py for
 * the side-by-side); nothing is invented. */


/* ---- navbar ------------------------------------------------------------- */
/* `.w-nav`. The design sets background, z-index, height and `display: flex`, so only `position` survives. */
.navbar-component {
  position: relative;
}
/* `.w-nav:before` / `.w-nav:after`. A clearfix from the float era -- but the
   design makes `.navbar-component` a FLEX container, so these two are flex
   ITEMS in the export, not floats being cleared. Dropping them is therefore a
   layout change, not a cleanup, so they are kept verbatim. (Nuestudio shipped
   a navbar 8px out by assuming they were inert.) The grid placements keep both
   in cell 1/1 for the grid case. */
.navbar-component:before, .navbar-component:after {
  content: " ";
  display: table;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.navbar-component:after {
  clear: both;
}
/* `.w-nav-brand`. `float: left` was inert on a grid item; the 767px padding is
   real, and there the design zeroes it again on `.nav-brand.w--current`. */
.nav-brand {
  position: relative;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
.nav-brand {
    padding-left: 10px;
  }
}
/* `.w-nav-menu`. `float: right` was likewise inert on a grid item. */
.nav-menu-light {
  position: relative;
}
/* `.w-nav-button`, hidden above the collapse breakpoint. The markup says
   `data-collapse="medium"`, so the runtime showed it at 991px and below --
   which is exactly where the design turns it into a bordered 24px flex box. */
.menu-button {
  position: relative;
  display: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* `.w-nav-button.w--open { background-color: #C8C8C8; color: white }`.
   The design overrode the BACKGROUND half of that rule and not the colour, so
   on the published site the open button is a white glyph on `--dark`. Restating
   only the background would leave a dark glyph on a dark square -- an
   invisible hamburger. Both halves have to travel together. */
.menu-button.is-open {
  color: #fff;
}
/* The runtime lifted the open menu into a generated `.w-nav-overlay` wrapper.
   That wrapper is written into the markup instead, and above the collapse
   breakpoint `display: contents` takes it back out of the box tree so
   `.nav-menu-light` stays the grid child `.nav-container` places. */
.nav-overlay {
  display: contents;
}
@media screen and (max-width: 991px) {
/* `.w-nav[data-collapse='medium'] .w-nav-menu { display: none }` */
  .nav-menu-light {
    display: none;
  }
/* `.w-nav-overlay` */
  .nav-overlay {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
.nav-overlay.is-open {
    display: block;
  }
/* `[data-nav-menu-open]` was the one declaration the runtime forced past the
     design sheet with `!important`, plus `.w-nav-overlay [data-nav-menu-open]
     { top: 0 }`. The design's own `display: flex` on `.nav-menu-light` has to
     win over the `display: none` above, so the open state is spelled out. */
  .nav-overlay.is-open .nav-menu-light {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-width: 200px;
    text-align: center;
    overflow: visible;
  }
}
/* ---- the hamburger glyph ------------------------------------------------ */
/* `.w-icon-nav-menu:before { content: "\e602" }` drew the three bars from
   Webflow's icon webfont. The whole font is dropped -- a 5 KB binary for one
   glyph -- and the bars are drawn here instead, at the 1em box the glyph
   occupied so `.menu-button`'s own `font-size` still sizes it. */
.menu-icon {
  display: block;
  width: 1em;
  height: 1em;
  position: relative;
}
.menu-icon::before, .menu-icon::after, .menu-icon span {
  content: "";
  position: absolute;
  left: 8.5%;
  right: 8.5%;
  height: 8.5%;
  background-color: currentColor;
}
.menu-icon::before {
  top: 25%;
}
.menu-icon span {
  top: 45.75%;
}
.menu-icon::after {
  top: 66.5%;
}
/* ---- dropdowns ---------------------------------------------------------- */
/* `.w-dropdown`. Two different widgets wear it: the nav's mega menus and every
   FAQ row. The FAQ rows are `width: 100%` blocks in the design, so the
   framework's `inline-block` is listed for both and overridden there. */
.move-down, .faqs-qa-2 {
  display: inline-block;
  position: relative;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  z-index: 900;
}
/* `.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link` then
   `.w-dropdown-toggle`. The design replaces the padding on both toggles and
   sets its own colour and display, so the box, the cursor and the nowrap are
   what actually survive. */
.nav-link, .dropdown-toggle-4, .drop-item-link {
  position: relative;
  vertical-align: top;
  text-decoration: none;
  color: #222;
  padding: 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}
.nav-link, .dropdown-toggle-4 {
  user-select: none;
  display: inline-block;
  cursor: pointer;
  padding-right: 40px;
}
/* `.w-dropdown-list` + `.w-dropdown-list.w--open`.
   `.home-drop-list` is the nav panel; `.dropdown-list` is the FAQ answer, which
   the design re-declares `position: static` so the accordion can animate its
   height in flow. The `.is-open` remap is what makes the mega menu's own
   `display: flex` and its 991px `z-index` / `inset` reachable at all -- lose it
   and the panel never leaves `display: none`. */
.home-drop-list, .dropdown-list {
  position: absolute;
  background: #ddd;
  display: none;
  min-width: 100%;
}
.home-drop-list.is-open, .dropdown-list.is-open {
  display: block;
}
/* `.w-dropdown-link` */
.drop-item-link {
  padding: 10px 20px;
  display: block;
  color: #222;
}
/* `.w-icon-dropdown-toggle` is not used: both toggles carry their own arrow in
   the markup (`.nav-down-arrow` is an inline SVG, `.careet-down-icon` an
   <img>), which is why the design sizes them itself. */


/* ---- the testimonial slider --------------------------------------------- */
/* `.w-slider`. The design overrides the background and the height. */
.testimonial-slider {
  position: relative;
  height: 300px;
  text-align: center;
  background: #ddd;
  clear: both;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* `.w-slider-mask` */
.testimonial-mask {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
  left: 0;
  right: 0;
  height: 100%;
  white-space: nowrap;
}
/* `.w-slide` */
.slide {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  white-space: normal;
  text-align: left;
}
/* `.w-slider-arrow-left, .w-slider-arrow-right`. The design gives the arrows
   their width, colour and inset; `position: absolute` and the pointer are what
   it leaves to the framework. */
.testimonial-arrow {
  position: absolute;
  width: 80px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
  font-size: 40px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}
/* `.w-slider-arrow-left { z-index: 3; right: auto }` and its `-right` twin.
 *
 * The attribute MUST be wrapped in `:where()`. `.w-slider-arrow-left` scored
 * (0, 1, 0) -- exactly the same as the design's own `.testimonial-arrow`, which
 * comes later in the cascade and therefore won, pinning both arrows to the
 * design's `inset: 0% 0% auto auto` in the top right corner. Written as
 * `.testimonial-arrow[data-arrow="left"]` the compound scores (0, 2, 0) and beats
 * the design instead, so `right: auto` survives, both offsets resolve to `auto`
 * and the arrow falls back to its static position -- on the far LEFT, on top of
 * the testimonial it is supposed to page through.
 *
 * `:where()` contributes nothing, so the compound stays at (0, 1, 0) and loses to
 * the design exactly as the framework class did. */
.testimonial-arrow:where([data-arrow="left"]) {
  z-index: 3;
  right: auto;
}
.testimonial-arrow:where([data-arrow="right"]) {
  z-index: 4;
  left: auto;
}
/* `.w-slider-nav`. The design hides this one with its own `.hide`, but the box
   is restated so the dots keep their place if it is ever shown. */
.slider-nav {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding-top: 10px;
  height: 40px;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* ---- widgets rebuilt as native elements --------------------------------- */
/* Five things the runtime drove as a <div> or an <a> are real <button>s now:
   the mobile menu toggle, both dropdown toggles, the tab links, the slider
   arrows and the cart open/close controls. That drags in the UA button styling
   -- a 2px outset border, a grey background and 13.33px Arial -- none of which
   the design sheet overrides, because it never had a button to override.

   `:where()` scores zero, so this beats the UA sheet (author origin always
   does) while losing to every authored rule, including the design's own
   `.nav-link`, `.dropdown-toggle-4` and `.menu-button`. */
:where(button.menu-button, button.nav-link, button.dropdown-toggle-4, button.tabset-link, button.content-tab-link, button.testimonial-arrow, button.carts-button, button.cart-close, button.remove-button, button.back-to-top) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  width: auto;
  text-align: inherit;
  cursor: pointer;

  /* The UA sheet resets these on form controls, and `font: inherit` does NOT
     bring them back -- they are not part of the `font` shorthand. This design
     sets negative `letter-spacing` on every heading and button label and relies
     on it reaching each line; without this the FAQ questions measure narrower
     than the export and wrap early. */
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-indent: inherit;
  text-shadow: inherit;
}
/* Webflow's custom checkbox is two elements: a real <input> that is visually
   hidden, and a styled <div> proxy beside it that shows the state.

   The export hid the INPUT with an inline `opacity: 0` -- which the transform's
   baked-state filter strips, because IX2 uses inline opacity for its reveal
   rest states. So the rule is restated here, keyed on the input itself. Keying
   it on `.checkbox-input` hides the PROXY instead and leaves the native
   checkbox on show {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
/* Screen-reader-only. The commerce pages carry no visible page title, so
   transform.py gives each one a heading here rather than promoting a section
   heading that does not name the page. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ======================================================================
   3. Aureva design
   ====================================================================== */
:root {
  --light: white;
  --_typography---font-family--inter: Inter, Arial, sans-serif;
  --dark: black;
  --_typography---font-size--paragraph-03: 16px;
  --_typography---line-height--para-height-03: 24px;
  --_typography---font-weights--regular: 400;
  --_typography---font-size--heading-01: 32px;
  --_typography---line-height--heading-height-01: 40px;
  --_typography---font-weights--semi-bold: 600;
  --_typography---letter-spacing--heading-ls-01: -.96px;
  --_typography---font-size--heading-02: 28px;
  --_typography---line-height--heading-height-02: 36px;
  --_typography---letter-spacing--heading-ls-02: -.84px;
  --_typography---line-height--heading-height-03: 32px;
  --_typography---letter-spacing--heading-ls-03: -.72px;
  --_typography---font-size--heading-03: 24px;
  --_typography---font-size--heading-04: 20px;
  --_typography---line-height--heading-height-04: 28px;
  --_typography---letter-spacing--heading-ls-04: -.6px;
  --_typography---font-size--paragraph-01: 20px;
  --_typography---line-height--para-height-01: 28px;
  --_spacing---section-pb-56: 56px;
  --_spacing---gap-40: 40px;
  --strock: #dfdfdf;
  --_typography---font-size--paragraph-02: 18px;
  --_typography---letter-spacing--para-ls-02: -.54px;
  --_typography---font-weights--medium: 500;
  --gray-01: dimgrey;
  --_spacing---section-p-80: 80px;
  --_spacing---section-pb-80: 80px;
  --bg: #f9f5f1;
  --_typography---font-family--libre-casion: Librecasloncondensed, Arial, sans-serif;
  --_typography---font-size--title-01: 80px;
  --_typography---line-height--title-height-01: 98px;
  --_typography---letter-spacing--title-ls-01: -2.4px;
  --_spacing---full-width: 100%;
  --_spacing---container-fluid: 1380px;
  --_spacing---container-m-30: 30px;
  --_spacing---section-pt-56: 56px;
  --_typography---font-size--title-02: 20px;
  --_typography---line-height--title-height-03: 22px;
  --_typography---letter-spacing--title-ls-03: -.54px;
  --_typography---letter-spacing--para-ls-03: -.48px;
  --_spacing---section-pt-80: 80px;
  --_spacing---section-pt-100: 100px;
  --_typography---letter-spacing--para-ls-01: -.6px;
  --gray-02: #b4b4b4;
  --_typography---font-weights--bold: 700;
  --_typography---font-size--display-1: 42px;
  --_typography---line-height--display-height-1: 50px;
  --_typography---letter-spacing--display-ls-1: 0px;
  --_typography---line-height--button-text-height: 24px;
  --_typography---font-size--button-text: 16px;
  --_typography---letter-spacing--button-text-ls: 0px;
  --_spacing---section-pb-100: 100px;
  --_spacing---gap-16: 16px;
  --_spacing---gap-20: 20px;
  --_spacing---section-pt-150: 150px;
  --_spacing---section-pb-150: 150px;
  --_typography---font-size--caption: 14px;
  --_typography---line-height--caption-height: 20px;
  --_typography---font-size--title-03: 18px;
  --_spacing---section-p-150: 150px;
  --_typography---line-height--title-height-02: 24px;
  --_typography---line-height--para-height-02: 26px;
  --_typography---line-height--button-text-height-2: 24px;
  --_typography---letter-spacing--title-ls-02: -.6px;
}
.wf-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartquantityinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commerceaddtocartquantityinput::placeholder {
  color: #999;
}
.wf-commerce-commerceaddtocartquantityinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-commercecartitem {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}
.wf-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}
.wf-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}
.wf-commerce-commercecartproductname {
  font-weight: 700;
}
.wf-commerce-commercecartquantity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecartquantity::placeholder {
  color: #999;
}
.wf-commerce-commercecartquantity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}
.wf-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}
.wf-commerce-commercecartordervalue {
  font-weight: 700;
}
.wf-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}
.wf-commerce-commercecarterrorstate {
  background-color: #ffdede;
  flex: none;
  margin: 0 24px 24px;
  padding: 10px;
}
.wf-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.wf-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}
.wf-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}
.wf-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}
.wf-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.wf-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.wf-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}
.wf-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}
.wf-commerce-commerceboldtextblock {
  font-weight: 700;
}
.wf-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}
.wf-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardnumber:focus, .wf-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardexpirationdate:focus, .wf-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardsecuritycode:focus, .wf-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}
.wf-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}
.wf-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}
.wf-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}
.wf-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}
.wf-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}
.wf-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytotal {
  font-weight: 700;
}
.wf-commerce-commercecheckoutplaceorderbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  align-items: center;
  margin-bottom: 20px;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commercepaypalcheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutcustomerinfosummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryitem, .wf-commerce-commercecheckoutsummarylabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutsummaryflexboxdiv {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytextspacingondiv {
  margin-right: .33em;
}
.wf-commerce-commercecheckoutpaymentsummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercepaypalcheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutshippingsummarywrapper {
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
.wf-commerce-commercelayoutcontainer {
    flex-direction: column;
    align-items: stretch;
  }
.wf-commerce-commercelayoutmain {
    flex-basis: auto;
    margin-right: 0;
  }
.wf-commerce-commercelayoutsidebar {
    flex-basis: auto;
  }
}
@media screen and (max-width: 479px) {
.wf-commerce-commerceaddtocartquantityinput {
    font-size: 16px;
  }
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
.wf-commerce-commercecartquantity, .wf-commerce-commercecheckoutemailinput, .wf-commerce-commercecheckoutshippingfullname, .wf-commerce-commercecheckoutshippingstreetaddress, .wf-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }
.wf-commerce-commercecheckoutrow {
    flex-direction: column;
  }
.wf-commerce-commercecheckoutshippingcity, .wf-commerce-commercecheckoutshippingstateprovince, .wf-commerce-commercecheckoutshippingzippostalcode, .wf-commerce-commercecheckoutshippingcountryselector, .wf-commerce-commercecheckoutcardnumber, .wf-commerce-commercecheckoutcardexpirationdate, .wf-commerce-commercecheckoutcardsecuritycode, .wf-commerce-commercecheckoutbillingfullname, .wf-commerce-commercecheckoutbillingstreetaddress, .wf-commerce-commercecheckoutbillingstreetaddressoptional, .wf-commerce-commercecheckoutbillingcity, .wf-commerce-commercecheckoutbillingstateprovince, .wf-commerce-commercecheckoutbillingzippostalcode, .wf-commerce-commercecheckoutbillingcountryselector {
    font-size: 16px;
  }
}
body {
  background-color: var(--light);
  font-family: var(--_typography---font-family--inter);
  color: var(--dark);
  font-size: var(--_typography---font-size--paragraph-03);
  line-height: var(--_typography---line-height--para-height-03);
  font-weight: var(--_typography---font-weights--regular);
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: var(--_typography---font-size--heading-01);
  line-height: var(--_typography---line-height--heading-height-01);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-01);
  margin-top: 20px;
  margin-bottom: 10px;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--heading-02);
  line-height: var(--_typography---line-height--heading-height-02);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-02);
  margin-top: 20px;
  margin-bottom: 10px;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-size: var(--_typography---line-height--heading-height-03);
  line-height: var(--_typography---line-height--heading-height-03);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-03);
  margin-top: 20px;
  margin-bottom: 10px;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-size: var(--_typography---font-size--heading-04);
  line-height: var(--_typography---line-height--heading-height-04);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-04);
  margin-top: 10px;
  margin-bottom: 10px;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: var(--_typography---font-size--paragraph-01);
  line-height: var(--_typography---line-height--para-height-01);
  font-weight: var(--_typography---font-weights--semi-bold);
  margin-top: 10px;
  margin-bottom: 10px;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  font-size: var(--_typography---font-size--paragraph-03);
  line-height: var(--_typography---line-height--para-height-03);
  font-weight: var(--_typography---font-weights--semi-bold);
  margin-top: 10px;
  margin-bottom: 10px;
}
p {
  margin-bottom: 10px;
}
a {
  text-decoration: underline;
}
.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}
.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}
.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}
.button-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  place-items: center start;
  width: 100%;
  display: flex;
}
.typography {
  padding-bottom: var(--_spacing---section-pb-56);
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  border-bottom: 1px solid var(--strock);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.style-hero-content.is-license {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.footer-social-link {
  background-color: #003b97;
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  text-decoration: none;
  display: flex;
}
.paragraph-02 {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--paragraph-02);
  line-height: var(--_typography---letter-spacing--para-ls-02);
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--para-ls-02);
}
.footer-cw-link {
  color: var(--gray-01);
  text-decoration: underline;
  transition: all .3s;
}
.footer-cw-link:hover {
  color: var(--dark);
}
.style-guide {
  padding-bottom: var(--_spacing---section-p-80);
}
.style-guide.container-full {
  padding-bottom: var(--_spacing---section-pb-80);
  background-color: var(--bg);
}
.style-hero-title {
  font-family: var(--_typography---font-family--libre-casion);
  color: var(--dark);
  font-size: var(--_typography---font-size--title-01);
  line-height: var(--_typography---line-height--title-height-01);
  font-style: italic;
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--title-ls-01);
  margin-top: 0;
  margin-bottom: 0;
}
.main-wrapper {
  z-index: 2;
  background-color: #fff;
  position: relative;
}
.container-fluid {
  width: var(--_spacing---full-width);
  max-width: var(--_spacing---container-fluid);
  margin-right: var(--_spacing---container-m-30);
  margin-left: var(--_spacing---container-m-30);
}
.container-fluid.for-footer {
  overflow: hidden;
}
.container-fluid.for-about {
  height: 155vh;
  position: sticky;
  top: 0;
}
.container-fluid.for-content {
  height: 100vh;
}
.container-fluid.for-choose {
  height: 280vh;
}
.footer-social-ico {
  width: 12px;
  height: 12px;
  transform: rotate(-45deg);
}
.color-box-wrap {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 178px;
  text-decoration: none;
  display: flex;
  position: relative;
}
.button-body {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 804px;
  display: flex;
}
.primary-button {
  background-color: var(--dark);
  color: var(--light);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.footer-wrap {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 86px;
  display: flex;
}
.style-guide-content {
  padding-top: var(--_spacing---section-pt-56);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  border-top: 1px solid var(--strock);
  flex-flow: column;
  display: flex;
}
.typography-title {
  font-family: var(--_typography---font-family--libre-casion);
  font-size: var(--_typography---font-size--title-02);
  line-height: var(--_typography---line-height--title-height-03);
  font-style: italic;
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--title-ls-03);
}
.nav-link-wrap {
  position: relative;
  overflow: hidden;
}
.heading-01 {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--heading-01);
  line-height: var(--_typography---line-height--heading-height-01);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-01);
  margin-top: 0;
  margin-bottom: 0;
}
.typography-title-wrap {
  width: 100%;
  max-width: 290px;
  position: sticky;
  top: 20px;
}
.paragraph-03 {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--paragraph-03);
  line-height: var(--_typography---line-height--para-height-03);
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--para-ls-03);
}
.heading-04 {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--heading-04);
  line-height: var(--_typography---line-height--heading-height-04);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-04);
  margin-top: 0;
  margin-bottom: 0;
}
.color-body {
  z-index: 1;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 660px;
  display: flex;
  position: relative;
}
.footer-socials {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hero-style.container-full {
  padding-top: var(--_spacing---section-pt-80);
  padding-bottom: var(--_spacing---section-pb-80);
  background-color: var(--bg);
}
.footer {
  width: 100%;
  padding-top: var(--_spacing---section-pt-100);
  justify-content: center;
  display: flex;
}
.footer.container-full {
  z-index: 1;
  position: relative;
}
.footer-content {
  z-index: 1;
  color: #fff;
  flex-flow: column;
  justify-content: space-between;
  position: relative;
}
.footer-link-02 {
  color: var(--gray-01);
  white-space: nowrap;
  text-decoration: none;
  transition: color .45s;
}
.footer-link-02:hover {
  color: var(--dark);
}
.footer-link-02[aria-current="page"], .footer-link-02.is-active {
  color: #fff;
}
.footer-link-02.paragraph-03[aria-current="page"], .footer-link-02.paragraph-03.is-active {
  color: var(--dark);
}
.footer-copyright {
  z-index: 1;
  width: var(--_spacing---full-width);
  max-width: 1280px;
  padding-bottom: var(--_spacing---gap-40);
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.footer-body-nav {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 237px;
  display: flex;
}
.footer-left {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  width: 100%;
  max-width: 450px;
  display: flex;
}
.footer-left-info-text {
  color: var(--dark);
}
.footer-bodies {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.page-wrapper {
  background-color: #fff;
  width: 100%;
  height: 100%;
}
.typography-body {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 776px;
  display: flex;
}
.footer-copyright-text {
  color: var(--dark);
  text-decoration: none;
}
.paragraph-01 {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--paragraph-01);
  line-height: var(--_typography---line-height--para-height-01);
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--para-ls-01);
}
.secondary-button {
  border: 1px solid var(--gray-02);
  color: var(--dark);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.heading-02 {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--heading-02);
  line-height: var(--_typography---line-height--heading-height-02);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-02);
  margin-top: 0;
  margin-bottom: 0;
}
.text-container {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  text-decoration: none;
  display: flex;
}
.color-box {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.footer-body {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex-flow: column;
  display: flex;
}
.footer-left-title {
  color: var(--dark);
  font-size: var(--_typography---font-size--heading-03);
  line-height: var(--_typography---line-height--heading-height-03);
  font-weight: var(--_typography---font-weights--bold);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-03);
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
}
.link-line {
  background-color: var(--dark);
  width: 0%;
  height: 1px;
  position: absolute;
  inset: auto auto 0% 0%;
}
.link-line._03 {
  background-color: #002d73;
  height: 1px;
}
.color-list {
  grid-column-gap: 24px;
  grid-row-gap: 18px;
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  width: 100%;
  max-width: 776px;
  display: grid;
}
.heading-03 {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--heading-03);
  line-height: var(--_typography---line-height--heading-height-03);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-03);
  margin-top: 0;
  margin-bottom: 0;
}
.footer-right {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  width: 100%;
  max-width: 470px;
  display: flex;
}
.typography-info-text {
  font-family: var(--_typography---font-family--inter);
  color: var(--gray-01);
  font-size: var(--_typography---font-size--paragraph-03);
  line-height: var(--_typography---line-height--para-height-03);
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--para-ls-03);
}
.display-01 {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--display-1);
  line-height: var(--_typography---line-height--display-height-1);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--display-ls-1);
  margin-top: 0;
  margin-bottom: 0;
}
.container-full {
  width: var(--_spacing---full-width);
  justify-content: center;
  display: flex;
}
.dark-bg {
  background-color: var(--dark);
}
.dark-text {
  color: var(--dark);
}
.light-bg {
  background-color: var(--light);
}
.light-text {
  color: var(--light);
}
.bg-color {
  background-color: var(--bg);
}
.gray-bg-01 {
  background-color: var(--gray-01);
}
.gray-bg-02 {
  background-color: var(--gray-02);
}
.stock-bg {
  background-color: var(--strock);
}
.border-all-strock {
  border: 1px solid var(--strock);
}
.drop-item-link {
  color: #000;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
}
.drop-item-link[aria-current="page"], .drop-item-link.is-active {
  color: #6c58ba;
}
.home-drop-list {
  background-color: var(--light);
  flex-direction: column;
  width: 195px;
  padding-top: 4px;
  padding-bottom: 4px;
  inset: 49px auto auto 0%;
  overflow: hidden;
}
.home-drop-list.mega {
  border-radius: 8px;
  width: 514px;
  padding: 32px;
  box-shadow: 0 24px 28px #00000008;
}
.home-drop-list.mega.is-open {
  display: flex;
}
.home-drop-list.about-drop, .home-drop-list.contact {
  display: none;
}
.log-infos {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 140px;
  max-width: 140px;
  display: flex;
}
.log-infos._02 {
  justify-content: flex-end;
}
.home-drop-item {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.home-drop-item.opc {
  border-bottom-color: #f0f0f0;
  justify-content: flex-start;
}
.home-drop-item.opc.last {
  border-bottom-style: none;
}
.cart-wrap {
  display: none;
}
.carts-button {
  color: var(--dark);
  background-color: #0000;
  padding: 0;
  display: flex;
}
.carts-button.button-text {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.nav-down-arrow {
  width: 16px;
  height: 18px;
  margin-top: 1px;
  margin-left: 4px;
}
.nav-container {
  width: var(--_spacing---full-width);
  max-width: var(--_spacing---container-fluid);
  margin-right: var(--_spacing---container-m-30);
  margin-left: var(--_spacing---container-m-30);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: max-content 1fr max-content;
  grid-auto-columns: 1fr;
  display: grid;
}
.drop-icon {
  width: 32px;
  height: 32px;
}
.pricing-desc {
  max-width: 300px;
  margin-top: 6px;
  margin-bottom: 8px;
}
.nav-menu-light {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.nav-link {
  width: 100%;
  height: 100%;
  color: var(--dark);
  text-align: center;
  align-items: center;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  overflow: hidden;
}
.nav-link.button-text {
  width: auto;
  position: relative;
}
.nav-link.button-text.first {
  padding-top: 13px;
  padding-bottom: 13px;
}
.items-wrap {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: space-between;
  display: none;
}
.items-wrap._01 {
  display: flex;
}
.items-wrap._02 {
  display: none;
}
.navbar-component {
  z-index: 999;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 77px;
  display: flex;
}
.sub-heading-05 {
  margin-top: 0;
  margin-bottom: 0;
}
.navigation {
  background-color: var(--bg);
}
.navigation._02 {
  background-color: var(--light);
}
.nav-brand {
  width: 100%;
  min-width: 140px;
  max-width: 140px;
  font-family: var(--_typography---font-family--inter);
  color: var(--dark);
  font-size: var(--_typography---font-size--heading-03);
  line-height: 100%;
  font-weight: var(--_typography---font-weights--bold);
  text-decoration: none;
}
.checkout-button {
  border: 1px solid var(--dark);
  background-color: var(--dark);
  font-family: var(--_typography---font-family--inter);
  color: var(--light);
  font-size: var(--_typography---font-size--paragraph-03);
  line-height: var(--_typography---line-height--button-text-height);
  font-weight: var(--_typography---font-weights--medium);
  border-radius: 0;
  padding: 12px 16px;
  transition: all .25s;
}
.checkout-button:hover {
  background-color: var(--light);
  color: var(--dark);
}
.remove-btn {
  text-decoration: none;
}
.orange-text {
  color: #ff382c;
}
.orange-text.remve-text {
  color: #ff5f55;
  font-size: var(--_typography---font-size--paragraph-03);
  line-height: var(--_typography---line-height--para-height-03);
  border: 1px #000;
  margin-top: 8px;
  text-decoration: none;
}
.hide {
  margin-bottom: 0;
  display: none;
}
.cart-quantitty {
  min-width: auto;
  color: var(--dark);
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}
.cart-quantitty.button-text {
  background-color: var(--bg);
  height: auto;
}
.button-text {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--button-text);
  line-height: var(--_typography---line-height--button-text-height);
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--button-text-ls);
}
.nav-links {
  color: var(--dark);
  white-space: nowrap;
  text-decoration: none;
  transition: color .45s;
}
.nav-links[aria-current="page"], .nav-links.is-active {
  color: #fff;
}
.nav-links.paragraph-03[aria-current="page"], .nav-links.paragraph-03.is-active {
  border-bottom: 1px solid var(--dark);
  color: var(--dark);
  display: block;
}
.item-inside {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 140px;
  display: flex;
}
.item-inside-title {
  color: var(--gray-01);
}
.item-inside-links {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.carts-btn-inside {
  color: var(--dark);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.navlink {
  color: var(--dark);
  text-decoration: none;
}
.announcement {
  width: var(--_spacing---full-width);
  background-color: var(--dark);
  justify-content: flex-start;
  align-items: center;
  height: 28px;
  display: flex;
}
.announcement-inside {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.announcement-items {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.announcement-item {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  color: var(--light);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.announcement-item-ico {
  width: 18px;
  height: 18px;
}
.announcement-text {
  font-size: 12px;
  font-weight: var(--_typography---font-weights--semi-bold);
}
.text-container-wrap {
  padding-bottom: var(--_spacing---gap-40);
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  border-bottom: 1px solid var(--strock);
  flex-flow: column;
  display: flex;
}
.third-button {
  color: var(--dark);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.third-button.button-text {
  cursor: pointer;
}
.third-button.button-text:where(.variant-third-btn-model-02) {
  color: var(--gray-02);
}
.third-button-inside {
  z-index: 1;
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.third-btn-ico {
  flex: none;
  width: 16px;
  height: 18px;
}
.footer-link-title {
  color: var(--dark);
}
.footer-social {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  color: var(--dark);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.footer-gallery-wrap {
  z-index: 1;
  width: var(--_spacing---full-width);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 50px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.footer-galleries {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.footer-gallery {
  flex: none;
  width: 211px;
  height: 211px;
}
.global-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.global-img._01 {
  position: sticky;
  top: 100px;
}
.back-to-top-ico {
  width: 12px;
  height: 12px;
}
.back-to-top {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.back-to-top.button-text {
  color: #000;
  text-decoration: none;
}
.footer-wrapper {
  position: relative;
}
.footer-bg-img {
  width: var(--_spacing---full-width);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  inset: auto 0% 0%;
}
.button-bg-black {
  background-color: #0b1b2e;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0%;
  right: 0%;
}
.button-bg-black._02 {
  background-color: #fff;
}
.button---bg-inner {
  position: absolute;
  bottom: 100%;
  left: 0%;
  right: 0%;
}
.button-text-2 {
  z-index: 2;
  margin-bottom: 0;
  position: relative;
}
.button---circle-black {
  background-color: #0b1b2e;
  border-radius: 50%;
  width: 150%;
  height: 200%;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%);
}
.button---circle-black._02 {
  background-color: var(--light);
}
.btn-black {
  border: 1px solid var(--dark);
  background-color: var(--dark);
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.btn-black.button-text:where(.variant-primary-btn-model-02) {
  padding-left: 76.5px;
  padding-right: 76.5px;
}
.btn-light {
  border: 1px solid var(--dark);
  background-color: var(--dark);
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.btn-light.button-text {
  border-color: var(--strock);
  color: var(--dark);
  background-color: #0000;
}
.button-bg-light {
  background-color: #0b1b2e;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0%;
  right: 0%;
}
.button-bg-light._03 {
  background-color: var(--dark);
  width: 105%;
  left: -2%;
}
.button---circle-light {
  background-color: #0b1b2e;
  border-radius: 50%;
  width: 150%;
  height: 200%;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%);
}
.button---circle-light._03 {
  background-color: var(--dark);
  width: 160%;
  left: 55%;
}
.arrow-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.arrow-wrap-outer {
  width: 17px;
  height: 14px;
  overflow: hidden;
}
.back-icon-outer {
  width: 12px;
  height: 12px;
  overflow: hidden;
}
.back-icons {
  flex-flow: column;
  display: flex;
}
.colors {
  padding-bottom: var(--_spacing---section-pb-56);
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  border-bottom: 1px solid var(--strock);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.empty-state {
  padding-top: var(--_spacing---section-pt-100);
  padding-bottom: var(--_spacing---section-pb-100);
}
.error-state {
  color: #ff8a8a;
  background-color: #0000;
}
.blog-single-date {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-single-social {
  border: 1px solid #dfdfdf;
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}
.blog-single-hero {
  width: 100%;
  height: 734px;
  margin-top: var(--_spacing---section-pt-80);
  margin-bottom: var(--_spacing---section-pb-80);
  overflow: hidden;
}
.blog-single-info {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.blog-single-info._02 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}
.blog-single-info._03 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
}
.blog-single-info._04 {
  width: 100%;
  height: 480px;
  display: block;
}
.blog-single-body {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  display: flex;
}
.blog-single-left {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  width: 100%;
  max-width: 280px;
  display: flex;
  position: sticky;
  top: 40px;
}
.blog-single-socials {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-single-socials-inside {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-single-info-texts {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.blog-single-info-texts._02 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}
.blog-single-info-texts._03 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
}
.blog-single-hero-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.blog-single-right {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  width: 100%;
  max-width: 810px;
  display: flex;
}
.blog-single-info-text {
  color: var(--gray-01);
}
.footer-social-2 {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  color: #000;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.nav-link-3 {
  color: #000;
  text-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  overflow: hidden;
}
.blog-single-date-line {
  background-color: #000;
  width: 24px;
  height: 1px;
}
.blog-single-info-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.blog-single-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 20px;
  display: flex;
}
.blog-single.container-full {
  padding-bottom: var(--_spacing---section-pb-80);
  background-color: var(--bg);
}
.blogs {
  background-color: var(--bg);
}
.blogs.container-full {
  padding-top: var(--_spacing---section-pt-80);
  padding-bottom: var(--_spacing---section-pb-80);
}
.blogs-content {
  grid-column-gap: var(--_spacing---section-pt-80);
  grid-row-gap: var(--_spacing---section-pt-80);
  flex-flow: column;
  display: flex;
}
.blogs-list {
  grid-column-gap: 72px;
  grid-row-gap: 72px;
  flex-flow: column;
  display: flex;
}
.blog-top {
  width: var(--_spacing---full-width);
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1304px;
  display: flex;
}
.blog-item {
  grid-column-gap: var(--_spacing---gap-16);
  grid-row-gap: var(--_spacing---gap-16);
  flex-flow: column;
  width: 100%;
  max-width: 689px;
  display: flex;
}
.blog-item._05 {
  margin-top: 127px;
}
.blog-thumb {
  width: var(--_spacing---full-width);
  height: 559px;
  overflow: hidden;
}
.blog-thumb._02 {
  height: 302px;
}
.blog-thumb._03 {
  height: 477px;
}
.blog-body {
  width: var(--_spacing---full-width);
  grid-column-gap: var(--_spacing---gap-16);
  grid-row-gap: var(--_spacing---gap-16);
  flex-flow: column;
  max-width: 528px;
  display: flex;
}
.blog-body._02 {
  max-width: 436px;
}
.blog-body._03 {
  max-width: 528px;
}
.blog-title {
  font-family: var(--_typography---font-family--libre-casion);
  font-size: var(--_typography---font-size--title-01);
  line-height: var(--_typography---line-height--title-height-01);
  font-style: italic;
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--title-ls-01);
  margin-top: 0;
  margin-bottom: 0;
}
.blog-date {
  color: var(--gray-01);
}
.blog-item-title {
  color: var(--dark);
  margin-top: 0;
  margin-bottom: 0;
}
.blog-item-desc {
  width: 100%;
  max-width: 442px;
  color: var(--gray-01);
}
.blog-item-desc.paragraph-02 {
  color: var(--gray-01);
}
.blog-middle {
  grid-column-gap: var(--_spacing---gap-20);
  grid-row-gap: var(--_spacing---gap-20);
  width: 100%;
  max-width: 1016px;
  margin-left: auto;
  display: flex;
}
.blog-bottom {
  grid-column-gap: 72px;
  grid-row-gap: 72px;
  width: 100%;
  max-width: 1250px;
  display: flex;
}
.blog-collection {
  width: 100%;
}
.blog-collection.top {
  width: var(--_spacing---full-width);
  max-width: 689px;
}
.cms-link {
  width: var(--_spacing---full-width);
  text-decoration: none;
}
.feature-blog.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
}
.feature-blog-content {
  grid-column-gap: var(--_spacing---section-pb-80);
  grid-row-gap: var(--_spacing---section-pb-80);
  flex-flow: column;
  display: flex;
}
.feature-blog-title {
  font-family: var(--_typography---font-family--inter);
  font-size: var(--_typography---font-size--heading-02);
  line-height: var(--_typography---line-height--heading-height-02);
  font-weight: var(--_typography---font-weights--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---letter-spacing--heading-ls-02);
  margin-top: 0;
  margin-bottom: 0;
}
.feature-blog-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
  font-weight: var(--_typography---font-weights--medium);
}
.feature-blog-list {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.feature-blog-thumb {
  width: var(--_spacing---full-width);
  height: 370px;
  overflow: hidden;
}
.feature-blog-body {
  background-color: var(--bg);
  padding: 25px 10px;
}
.feature-blog-item-title {
  color: var(--dark);
  margin-top: 0;
  margin-bottom: 0;
}
.feature-blog-item-title.heading-04 {
  width: 100%;
  max-width: 400px;
}
.feature-blog-item-text {
  width: 100%;
  max-width: 406px;
  color: var(--gray-01);
  margin-top: 10px;
  margin-bottom: 35px;
}
.feature-body-item-btns {
  display: flex;
}
.shop-details.container-full {
  padding-top: var(--_spacing---section-pt-80);
  padding-bottom: var(--_spacing---section-pb-80);
  background-color: var(--bg);
}
.shop-details-content {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  display: flex;
}
.shop-details-left {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  width: 100%;
  max-width: 741px;
  display: flex;
}
.shop-details-thumb {
  width: 100%;
  height: 673px;
  position: relative;
  overflow: hidden;
}
.shop-details-thumb._02 {
  height: 334px;
}
.shop-details-thumb._03 {
  display: none;
}
.shop-details-thumbs {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.shop-details-right {
  top: var(--_spacing---gap-40);
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  flex-flow: column;
  width: 100%;
  max-width: 591px;
  display: flex;
  position: sticky;
}
.shop-details-title {
  margin-top: 0;
  margin-bottom: 0;
}
.shop-details-price {
  color: var(--dark);
  margin-top: 16px;
  margin-bottom: 23px;
}
.shop-details-text {
  color: var(--gray-01);
}
.quantity {
  width: 59px;
  height: 36px;
  min-height: 36px;
  margin-bottom: 0;
  padding-left: 23px;
}
.quantity:focus {
  border-color: var(--dark);
}
.shop-carts {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 211px;
  margin-bottom: 0;
  display: flex;
  position: relative;
}
.add-to-cart-button {
  background-color: var(--dark);
  background-image: url('../images/shopping-cart-01.svg');
  background-position: 12%;
  background-repeat: no-repeat;
  background-size: auto;
  width: 100%;
  height: 36px;
  padding: 6px 16px 6px 42px;
}
.add-to-cart-button:hover {
  background-image: url('../images/shopping-cart-01-1.svg');
  background-position: 0%;
  background-size: auto;
}
.add-to-cart-button.paragraph-03 {
  border: 1px solid var(--dark);
  padding-top: 5px;
  transition: all .2s;
}
.add-to-cart-button.paragraph-03:hover {
  border: 1px solid var(--dark);
  color: var(--dark);
  background-color: #0000;
  background-image: url('../images/shopping-cart-01-1.svg');
  background-position: 12%;
}
.shop-details-categories {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}
.shop-details-category {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.shop-details-category.paragraph-03 {
  border-bottom: 1px solid var(--strock);
  padding-bottom: 12px;
}
.category-point {
  background-color: var(--gray-02);
  width: 6px;
  height: 6px;
}
.category-title {
  color: var(--dark);
}
.category-value {
  color: var(--gray-01);
}
.shop-details-infos {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.shop-details-info {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.shop-details-info-img {
  width: 32px;
  height: 32px;
}
.shop-details-head {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}
.shop-details-right-wrap {
  width: 100%;
  max-width: 591px;
}
.offer-texts {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  background-color: var(--light);
  height: 37px;
  color: var(--dark);
  font-size: var(--_typography---font-size--caption);
  line-height: var(--_typography---letter-spacing--button-text-ls);
  font-weight: var(--_typography---font-weights--medium);
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  display: flex;
  position: absolute;
  inset: 10px auto auto 10px;
}
.shop-additional-infos {
  margin-top: var(--_spacing---gap-40);
  margin-bottom: var(--_spacing---gap-40);
}
.shop-menu {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-bottom: 1px solid var(--strock);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.shop-tab-link {
  background-color: #0000;
  padding: 12px 0;
}
.shop-tab-link[aria-current="page"], .shop-tab-link.is-active {
  border-bottom: 1px solid var(--dark);
  font-weight: var(--_typography---font-weights--semi-bold);
  background-color: #0000;
}
.shop-tab-link.heading-04 {
  color: var(--gray-01);
}
.shop-tab-link.heading-04[aria-current="page"], .shop-tab-link.heading-04.is-active {
  color: var(--dark);
}
.shop-tab-content {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}
.shop-tab-ct-item {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}
.shop-tab-content-name {
  color: var(--gray-01);
  font-size: var(--_typography---font-size--caption);
  line-height: var(--_typography---line-height--caption-height);
  font-weight: var(--_typography---font-weights--medium);
  text-transform: uppercase;
}
.shop-tab-content-item-text {
  color: var(--dark);
}
.text-shop-wrap {
  grid-column-gap: var(--_spacing---gap-16);
  grid-row-gap: var(--_spacing---gap-16);
  flex-flow: column;
  display: flex;
}
.tabs-content-wrap {
  margin-top: 28px;
}
.shop-comments {
  padding-top: var(--_spacing---gap-40);
  border-top: 1px solid var(--strock);
}
.shop-comment-top {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.comment-top-titles {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}
.comment-top-title-info {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--gray-01);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.shop-comment-list {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  margin-top: 55px;
  display: flex;
}
.comments-item {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  display: flex;
}
.comment-writers {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 150px;
  display: flex;
}
.comments-writer-name {
  color: var(--dark);
}
.comment-writer-status {
  color: var(--gray-01);
  background-color: #f6f0ea;
  padding: 4px 8px;
  display: inline-block;
}
.comment-body {
  width: 100%;
  max-width: 465px;
}
.comment-reviews {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.comment-star {
  width: 28px;
  height: 28px;
}
.comments-title {
  margin-top: 24px;
  margin-bottom: 12px;
}
.comment-desc.paragraph-03 {
  color: var(--gray-01);
}
.shops {
  background-color: var(--bg);
}
.shops.container-full {
  padding-top: var(--_spacing---section-pt-80);
  padding-bottom: var(--_spacing---section-pb-150);
}
.shop-content {
  grid-column-gap: var(--_spacing---section-pt-80);
  grid-row-gap: var(--_spacing---section-pt-80);
  flex-flow: column;
  display: flex;
}
.shop-title {
  font-family: var(--_typography---font-family--libre-casion);
  font-size: var(--_typography---font-size--title-01);
  line-height: var(--_typography---line-height--title-height-01);
  font-style: italic;
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--title-ls-01);
  margin-top: 0;
  margin-bottom: 0;
}
.shop-list {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}
.shop-item {
  background-color: var(--light);
  padding: 10px;
}
.shop-item-thumb {
  width: var(--_spacing---full-width);
  height: 370px;
  position: relative;
  overflow: hidden;
}
.shop-item-thumb.big {
  height: 700px;
  overflow: hidden;
}
.shop-item-body {
  margin-top: var(--_spacing---gap-16);
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.shop-item-names {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.shop-item-name {
  color: var(--dark);
}
.shop-item-text.paragraph-03, .shop-item-price {
  color: var(--gray-01);
}
.shop-items {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.feature-product.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
  background-color: var(--bg);
}
.contact-section.container-full {
  padding-top: var(--_spacing---section-pt-80);
  padding-bottom: var(--_spacing---section-pb-150);
  background-color: var(--bg);
}
.contact-content {
  grid-column-gap: var(--_spacing---section-p-80);
  grid-row-gap: var(--_spacing---section-p-80);
  flex-flow: column;
  display: flex;
}
.contact-title {
  width: 100%;
  max-width: 642px;
  margin-top: 0;
  margin-bottom: 0;
}
.contact-infos {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  display: flex;
}
.contact-left {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 570px;
  display: flex;
}
.contact-info-item {
  grid-column-gap: var(--_spacing---gap-16);
  grid-row-gap: var(--_spacing---gap-16);
  flex-flow: column;
  width: 100%;
  display: flex;
}
.contact-info-item._01 {
  max-width: 437px;
}
.contact-info-stars {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.contact-info-star {
  width: 20px;
  height: 20px;
}
.contact-info-text {
  margin-top: 12px;
  margin-bottom: 24px;
}
.contact-testimonial-writers {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.contact-avatar {
  width: 48px;
  height: 48px;
}
.contact-names {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}
.contact-role.paragraph-03 {
  color: var(--gray-01);
}
.contact-info-inside {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.info-inside-title {
  color: var(--gray-01);
}
.info-inside-value {
  text-decoration: none;
}
.info-inside-value.button-text {
  color: var(--dark);
}
.contact-italic-title {
  font-family: var(--_typography---font-family--libre-casion);
}
.contact-form-block {
  margin-bottom: 0;
}
.contact-form {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}
.contact-form-wrap {
  grid-column-gap: 27px;
  grid-row-gap: 27px;
  background-color: var(--light);
  flex-flow: column;
  width: 100%;
  max-width: 728px;
  padding: 32px;
  display: flex;
}
.form-group-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.form-field {
  background-color: var(--bg);
  border: 1px #000;
  width: 100%;
  height: 48px;
  margin-bottom: 0;
  padding: 12px 16px;
}
.form-field.textarea {
  height: 161px;
  color: var(--dark);
  font-size: var(--_typography---font-size--paragraph-03);
  line-height: var(--_typography---line-height--para-height-03);
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--para-ls-03);
}
.form-field.paragraph-03 {
  color: var(--dark);
}
.form-field.paragraph-03::placeholder {
  color: var(--gray-01);
}
.form-field.pass {
  max-width: 412px;
  color: var(--dark);
}
.form-field.pass::placeholder {
  color: var(--gray-01);
}
.contact-sbmit-btn {
  border: 1px solid var(--dark);
  background-color: var(--dark);
  width: 100%;
  max-width: 111px;
  height: 48px;
  padding: 12px 16px;
  transition: all .3s;
}
.contact-sbmit-btn:hover {
  color: var(--dark);
  background-color: #0000;
}
.contact-sbmit-btn.button-text {
  border: 1px solid var(--dark);
  padding-top: 11px;
  transition: all .3s;
}
.contact-sbmit-btn.button-text:hover {
  color: var(--dark);
  background-color: #0000;
}
.success-message {
  background-color: #0000;
  padding: 4px 8px;
}
.error-message {
  color: #ff6e6e;
  background-color: #0000;
}
.dropdown-toggle-4 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  display: flex;
}
.faq-head {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  width: 100%;
  max-width: 525px;
  display: flex;
}
.faqs-qa-2 {
  width: 100%;
  overflow: hidden;
}
.dropdown-list {
  background-color: #ddd0;
  position: static;
}
.faqs-wrap {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  width: 100%;
  max-width: 624px;
  display: flex;
}
.faq-answer-text {
  width: 100%;
  max-width: 580px;
  color: var(--gray-01);
  margin-top: 10px;
  margin-bottom: 0;
  display: block;
}
.faq-question-left-5 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.faqs.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
}
.faq-title {
  margin-top: 0;
  margin-bottom: 0;
}
.faq-content {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.faq-answers {
  padding-right: 58px;
  overflow: hidden;
}
.faq-text {
  width: 100%;
  color: var(--gray-01);
}
.question-title {
  margin-top: 0;
  margin-bottom: 0;
}
.faq-body {
  grid-column-gap: var(--_spacing---gap-16);
  grid-row-gap: var(--_spacing---gap-16);
  background-color: #0000;
  flex-flow: column;
  width: 100%;
  padding: 20px 30px;
  display: flex;
}
.faq-body-wrap {
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  width: 100%;
  margin-left: auto;
  display: flex;
}
.license.container-full {
  padding-bottom: var(--_spacing---section-pb-80);
  background-color: var(--bg);
}
.license-head {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  font-family: var(--_typography---font-family--libre-casion);
  color: var(--gray-01);
  font-size: var(--_typography---font-size--title-02);
  font-style: italic;
  font-weight: var(--_typography---font-weights--semi-bold);
  justify-content: space-between;
  margin-bottom: 57px;
  display: flex;
}
.license-title-info {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 585px;
  display: flex;
}
.license-item {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  border-bottom: 1px solid var(--strock);
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
}
.license-item._01 {
  border-top: 1px solid var(--strock);
}
.license-item-left {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 755px;
  display: flex;
}
.license-item-left._02 {
  background-color: var(--light);
  height: 255px;
  line-height: var(--_typography---line-height--title-height-01);
  justify-content: center;
}
.license-item-img {
  width: var(--_spacing---full-width);
  height: 255px;
}
.license-item-right {
  justify-content: space-between;
  width: 100%;
  max-width: 574px;
  display: flex;
}
.license-item-right.heading-03 {
  justify-content: space-between;
  align-items: flex-start;
}
.license-item-link {
  border-bottom: 2px solid var(--dark);
  color: var(--dark);
  text-decoration: none;
}
.license-item-link:hover {
  border-bottom-style: none;
}
.date-text {
  font-family: var(--_typography---font-family--libre-casion);
  font-size: var(--_typography---font-size--title-03);
  line-height: var(--_typography---letter-spacing--title-ls-03);
  font-style: italic;
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--title-ls-03);
}
.changelog.container-full {
  padding-bottom: var(--_spacing---section-pb-80);
  background-color: var(--bg);
}
.changelog-item-text.paragraph-02 {
  color: var(--gray-01);
}
.changelog-item-right {
  grid-column-gap: 13px;
  grid-row-gap: 13px;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 633px;
  display: flex;
}
.changelog-item {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  border-bottom: 1px solid var(--strock);
  justify-content: space-between;
  padding-top: 56px;
  padding-bottom: 56px;
  padding-right: 143px;
  display: flex;
}
.changelog-item._01 {
  border-top: 1px solid var(--strock);
}
.changelog-item-left {
  width: 100%;
  max-width: 460px;
}
.terms.container-full {
  padding-top: var(--_spacing---section-pt-80);
  padding-bottom: var(--_spacing---section-pb-80);
  background-color: var(--bg);
}
.terms-content {
  grid-column-gap: var(--_spacing---section-pt-80);
  grid-row-gap: var(--_spacing---section-pt-80);
  flex-flow: column;
  display: flex;
}
.terms-head {
  width: var(--_spacing---full-width);
  grid-column-gap: var(--_spacing---gap-16);
  grid-row-gap: var(--_spacing---gap-16);
  text-align: center;
  flex-flow: column;
  max-width: 756px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.terms-title {
  font-family: var(--_typography---font-family--libre-casion);
  font-size: var(--_typography---font-size--title-01);
  line-height: var(--_typography---line-height--title-height-01);
  font-style: italic;
  font-weight: var(--_typography---font-weights--semi-bold);
  letter-spacing: var(--_typography---letter-spacing--title-ls-01);
  margin-top: 0;
  margin-bottom: 0;
}
.terms-subtitle {
  color: var(--gray-01);
}
.terms-body {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  width: 100%;
  max-width: 856px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.terms-item-text {
  margin-top: var(--_spacing---gap-16);
  color: var(--gray-01);
  margin-bottom: 12px;
}
.terms-item-note {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.terms-list-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  padding-left: 26px;
  display: flex;
}
.terms-list-item.paragraph-03 {
  color: var(--gray-01);
  margin-bottom: 0;
}
.password-inside {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}
.password-head {
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 631px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.password-lock-ico {
  width: 48px;
  height: 48px;
}
.password-title {
  margin-top: 32px;
  margin-bottom: 12px;
}
.password-text {
  width: 100%;
  max-width: 455px;
  color: var(--gray-01);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.passowrd-form-block {
  width: 100%;
  max-width: 539px;
  margin-top: 48px;
  margin-bottom: 0;
}
.password-form {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pass-add-title {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.not-found {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}
.not-found-inside {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 517px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.not-found-body {
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: -50px;
  display: flex;
}
.not-found-title.display-01 {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.not-found-text {
  margin-top: 12px;
  margin-bottom: 32px;
}
.not-found-text.paragraph-03 {
  color: var(--gray-01);
}
.about-hero {
  padding-top: var(--_spacing---section-pt-100);
  padding-bottom: var(--_spacing---section-pb-80);
}
.about-hero.container-full {
  background-color: var(--bg);
  height: 400vh;
}
.about-hero-content {
  width: var(--_spacing---full-width);
}
.about-hero-title {
  font-family: var(--_typography---font-family--libre-casion);
  font-size: var(--_typography---font-size--title-01);
  line-height: var(--_typography---line-height--title-height-01);
  font-style: italic;
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--title-ls-01);
  margin-top: 0;
  margin-bottom: 0;
}
.about-hero-body {
  width: 55%;
  margin: var(--_spacing---section-pt-80) auto var(--_spacing---section-pb-80);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.about-body-thumb {
  width: var(--_spacing---full-width);
  height: 342px;
  overflow: hidden;
}
.about-hero-body-text {
  width: 100%;
  max-width: 96px;
}
.about-hero-body-text.paragraph-03 {
  font-weight: var(--_typography---font-weights--regular);
}
.about-hero-bottom {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.about-hero-right {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  flex-flow: column;
  width: 100%;
  max-width: 1026px;
  display: flex;
}
.about-hero-text {
  font-size: var(--_typography---font-size--caption);
  line-height: var(--_typography---line-height--caption-height);
  font-weight: var(--_typography---font-weights--medium);
  text-transform: uppercase;
}
.about-hero-text._02 {
  color: var(--light);
}
.case-study-inside {
  flex-flow: column;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.about-info-text-2 {
  color: #003b97;
}
.about-info-text-2.heading-01 {
  color: var(--dark);
}
.about-hero-right-text {
  color: var(--gray-01);
}
.about-hero-right-text.paragraph-02 {
  width: 100%;
  max-width: 643px;
}
.about-hero-head {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-hero-line {
  background-color: var(--dark);
  width: 24px;
  height: 1px;
}
.about-hero-line._02 {
  background-color: var(--light);
  color: var(--light);
}
.content.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
}
.content-wrap {
  grid-column-gap: var(--_spacing---section-pt-80);
  grid-row-gap: var(--_spacing---section-pt-80);
  flex-flow: column;
  display: flex;
}
.content-head {
  text-align: center;
  width: 100%;
  max-width: 501px;
  margin-left: auto;
  margin-right: auto;
}
.content-body {
  grid-column-gap: var(--_spacing---gap-16);
  grid-row-gap: var(--_spacing---gap-16);
  background-color: var(--bg);
  padding: 24px;
  display: flex;
}
.content-left {
  border: 4px solid var(--light);
  width: 100%;
  max-width: 409px;
  height: auto;
  overflow: hidden;
}
.content-body-list {
  grid-column-gap: var(--_spacing---gap-16);
  grid-row-gap: var(--_spacing---gap-16);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.content-body-item {
  background-color: var(--light);
  padding: 24px;
}
.content-body-ico {
  width: 28px;
  height: 28px;
}
.content-item-title {
  margin-top: 18px;
  margin-bottom: 12px;
}
.content-item-text.paragraph-03 {
  color: var(--gray-01);
}
.content-item-tags {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 24px;
  display: flex;
}
.content-item-tag {
  background-color: var(--bg);
  padding: 4px 10px;
}
.content-item-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.content-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
  font-weight: var(--_typography---font-weights--medium);
}
.content-text {
  margin-top: 10px;
}
.content-text.paragraph-03 {
  width: var(--_spacing---full-width);
  max-width: 480px;
  color: var(--gray-01);
  margin-left: auto;
  margin-right: auto;
}
.content-02.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
  background-color: var(--bg);
}
.content-wrap-02 {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: space-between;
  display: flex;
}
.content-left-thumb-02 {
  width: 100%;
  max-width: 426px;
  height: auto;
  overflow: hidden;
}
.content-right-info-02 {
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 922px;
  display: flex;
}
.cotnent-info-head-02 {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  display: flex;
}
.content-info-head-left {
  width: 100%;
  max-width: 442px;
}
.content-info-text-02 {
  color: var(--gray-01);
  margin-top: 10px;
  margin-bottom: 24px;
}
.info-title-italic-02 {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
  font-weight: var(--_typography---font-weights--medium);
}
.content-info-head-thumb {
  width: 100%;
  max-width: 318px;
  height: 235px;
  overflow: hidden;
}
.content-info-bottom-item {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.studio-stat-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 195px;
  display: flex;
}
.statistics-number-wrap {
  justify-content: center;
  height: 40px;
  display: flex;
  overflow: hidden;
}
.statistics-number-box.upper {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}
.statistics-number-box.lower {
  flex-flow: column;
  display: flex;
}
.stat-title {
  font-family: var(--_typography---font-family--libre-casion);
  color: var(--dark);
  font-size: var(--_typography---font-size--heading-01);
  line-height: var(--_typography---line-height--heading-height-01);
  font-style: italic;
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--heading-ls-01);
  margin-top: 0;
  margin-bottom: 0;
}
.stat-title._01 {
  width: 16px;
}
.stat-title._02 {
  width: 27px;
}
.stat-title._03 {
  width: 30px;
}
.stdio-stat-text.paragraph-03 {
  color: var(--gray-01);
}
.content-info-divider {
  background-color: var(--strock);
  width: 1px;
  height: 44px;
}
.content-03.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
}
.content-wrap-03 {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1243px;
  display: flex;
}
.content-left-thumb-03 {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content-left-thumbs-03 {
  background-color: var(--bg);
  width: 100%;
  max-width: 701px;
  height: 762px;
  padding: 48px;
}
.content-right-info-03 {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  flex-flow: column;
  width: 100%;
  max-width: 445px;
  display: flex;
}
.content-info-head {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.content-info-title-03.heading-01 {
  width: 100%;
  max-width: 370px;
  margin-top: var(--_spacing---gap-16);
  margin-bottom: var(--_spacing---gap-16);
}
.content-info-text-03 {
  color: var(--gray-01);
}
.content-info-btm-03 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  width: 100%;
  max-width: 130px;
  display: flex;
}
.content-info-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
  font-weight: var(--_typography---font-weights--medium);
}
.content-04.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
  position: relative;
  overflow: hidden;
}
.content-wrap-04 {
  z-index: 1;
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  flex-flow: column;
  width: 100%;
  max-width: 1243px;
  display: flex;
  position: relative;
}
.content-img-04 {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}
.content-info-item {
  font-family: var(--_typography---font-family--libre-casion);
  font-size: var(--_typography---font-size--title-01);
  line-height: var(--_typography---line-height--title-height-01);
  font-style: italic;
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--title-ls-01);
  margin-top: 0;
  margin-bottom: 0;
}
.content-info-items {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  width: 100%;
  max-width: 443px;
  color: var(--bg);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.content-info-right {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  width: 100%;
  max-width: 461px;
  display: flex;
  position: static;
  inset: auto 0% 0% auto;
}
.content-info-right-text {
  color: var(--light);
}
.content-info-item-braket {
  font-family: var(--_typography---font-family--libre-casion);
  font-size: var(--_typography---font-size--title-01);
  line-height: var(--_typography---line-height--title-height-01);
  font-style: italic;
  font-weight: var(--_typography---font-weights--medium);
  letter-spacing: var(--_typography---letter-spacing--title-ls-01);
  margin-top: 0;
  margin-bottom: 0;
}
.feature-blog-head {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.feature-blog-text.paragraph-02 {
  color: var(--gray-01);
}
.home-hero.container-full {
  padding-top: var(--_spacing---section-pt-150);
  background-color: var(--bg);
}
.home-hero-content {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  flex-flow: column;
  display: flex;
}
.home-hero-head {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  display: flex;
}
.home-hero-title {
  width: 100%;
  max-width: 594px;
  margin-top: 0;
  margin-bottom: 0;
}
.home-hero-card {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: var(--light);
  width: 100%;
  max-width: 260px;
  padding: 7px;
  display: flex;
}
.home-hero-card-imgs {
  width: 100%;
  max-width: 100px;
  height: auto;
}
.home-hero-card-body {
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 140px;
  display: flex;
}
.hero-card-title.paragraph-03 {
  font-size: 14px;
  line-height: 18px;
  font-weight: var(--_typography---font-weights--semi-bold);
}
.hero-card-text {
  font-size: 14px;
  line-height: 18px;
}
.hero-card-btns {
  flex-flow: column;
  display: flex;
}
.hero-card-body {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}
.home-hero-subtitle {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
  font-weight: var(--_typography---font-weights--semi-bold);
}
.home-hero-thumbs {
  width: var(--_spacing---full-width);
  height: 480px;
  overflow: hidden;
}
.hero-thumb-img {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
}
.showcase-product.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
  background-color: var(--bg);
}
.showcase-product-head {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: center;
  flex-flow: column;
  width: 100%;
  max-width: 525px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.showcase-product-title {
  margin-top: 0;
  margin-bottom: 0;
}
.showcase-product-text {
  color: var(--gray-01);
}
.showcase-product-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
  font-weight: var(--_typography---font-weights--semi-bold);
}
.about-info.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
}
.about-info-content {
  grid-column-gap: var(--_spacing---section-pt-100);
  grid-row-gap: var(--_spacing---section-pt-100);
  flex-flow: column;
  display: flex;
}
.about-info-body {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.info-body-right {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  max-width: 1090px;
  display: flex;
}
.info-body-thumb {
  width: 100%;
  max-width: 761px;
  height: 497px;
  position: relative;
  overflow: hidden;
}
.info-body-card {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: var(--light);
  width: 100%;
  max-width: 260px;
  padding: 7px;
  display: flex;
  position: absolute;
  inset: 15px auto auto 15px;
}
.info-body {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  flex-flow: column;
  width: 100%;
  max-width: 288px;
  display: flex;
}
.info-body-text {
  color: var(--gray-01);
}
.case-study-inside-02 {
  flex-flow: column;
  width: 100%;
  max-width: 1232px;
  display: flex;
}
.about-info-txt-02 {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.shop-category.container-full {
  height: 300vh;
}
.shop-head {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  width: 100%;
  max-width: 525px;
  margin-bottom: 70px;
  display: flex;
}
.shop-head._02 {
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0;
  top: 730px;
}
.shop-item-txt {
  font-family: var(--_typography---font-family--inter);
  color: var(--dark);
  font-size: var(--_typography---font-size--heading-03);
  line-height: var(--_typography---line-height--heading-height-03);
  font-weight: var(--_typography---font-weights--semi-bold);
}
.camera {
  width: 100%;
  height: 70vh;
  position: sticky;
  top: 180px;
  overflow: hidden;
}
.camera._02 {
  height: auto;
  margin-bottom: 60px;
  position: static;
  top: 220px;
}
.works-gallery-content {
  height: 100vh;
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
}
.frame {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  display: flex;
}
.track {
  height: 180vw;
}
.track._02 {
  height: auto;
  position: sticky;
  top: 0;
}
.works-gallery-thumbs {
  border-radius: 2px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.works-gallery-item {
  background-color: var(--bg);
  flex: none;
  width: 100%;
  max-width: 100%;
  padding: 15px 15px 30px;
}
.works-gallery-body {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  margin-top: 16px;
  display: flex;
}
.works-gallery-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.shop-head-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.faq-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
}
.testimonials.container-full {
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
  background-color: var(--bg);
}
.testimonials-content {
  width: var(--_spacing---full-width);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.testimonial-item {
  grid-column-gap: var(--_spacing---gap-40);
  grid-row-gap: var(--_spacing---gap-40);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.testimonial-left {
  grid-column-gap: 115px;
  grid-row-gap: 115px;
  flex-flow: column;
  width: 100%;
  max-width: 700px;
  height: 445px;
  display: flex;
}
.testimonial-writer {
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.write-avatar {
  object-fit: cover;
  width: 100%;
  max-width: 56px;
  height: 66px;
}
.testimonial-img {
  width: 100%;
  max-width: 319px;
  height: 297px;
}
.testimonial-slider {
  background-color: #0000;
  height: 100%;
}
.testimonial-arrow {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  width: 100%;
  max-width: 61px;
  color: var(--dark);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  inset: 0% 0% auto auto;
}
.testimonial-arrow-text.button-text {
  border-bottom: 1px solid var(--bg);
}
.testimonial-arrow-text.button-text:hover {
  border-bottom: 1px solid var(--dark);
}
.feature-blog-01.container-full {
  padding-bottom: var(--_spacing---section-pb-150);
}
.cta.container-full {
  background-color: var(--bg);
  height: 760px;
  overflow: hidden;
}
.cta-content {
  width: var(--_spacing---full-width);
  justify-content: space-between;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.cta-content-left {
  width: var(--_spacing---full-width);
  grid-column-gap: var(--_spacing---container-m-30);
  grid-row-gap: var(--_spacing---container-m-30);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 480px;
  display: flex;
}
.cta-title {
  margin-top: 0;
  margin-bottom: 0;
}
.cta-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.cta-content-right {
  grid-column-gap: var(--_spacing---container-m-30);
  grid-row-gap: var(--_spacing---container-m-30);
  flex-flow: column;
  transform: rotate(6deg);
}
.cta-content-list {
  grid-column-gap: var(--_spacing---gap-20);
  grid-row-gap: var(--_spacing---gap-20);
  flex-flow: column;
}
.cta-content-item {
  width: 100%;
  max-width: 280px;
  height: 360px;
  margin-bottom: var(--_spacing---container-m-30);
  overflow: hidden;
}
.cta-content-right-wrap {
  grid-column-gap: var(--_spacing---container-m-30);
  grid-row-gap: var(--_spacing---container-m-30);
  justify-content: space-between;
  width: 100%;
  max-width: 590px;
  margin-right: 40px;
  display: flex;
}
.about-hero-bdy-txt-wrap {
  width: 100%;
  max-width: 691px;
  margin-left: auto;
  margin-right: auto;
}
.gallery.container-full {
  padding-top: var(--_spacing---section-pt-80);
  padding-bottom: var(--_spacing---section-pb-100);
  background-color: var(--bg);
  position: relative;
}
.gallery-content-title {
  width: 100%;
  max-width: 500px;
  font-family: var(--_typography---font-family--libre-casion);
  font-size: 92px;
  font-style: italic;
  line-height: 100%;
  font-weight: var(--_typography---font-weights--semi-bold);
  text-align: center;
  letter-spacing: -2.76px;
  margin: 0 auto;
  position: fixed;
  top: 297px;
  left: 50%;
  transform: translate(-50%);
}
.gallery-list {
  grid-column-gap: 74px;
  grid-row-gap: 150px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.gallery-item {
  width: 100%;
  max-width: 289px;
  height: 350px;
  overflow: hidden;
}
.gallery-head {
  z-index: 10;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 105px);
  display: flex;
  position: absolute;
  inset: 0%;
}
.work-gallery-collection {
  flex: none;
  width: 100%;
  max-width: 420px;
}
.content-01.container-full {
  height: 270vh;
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
  background-color: var(--bg);
}
.content-wrap-01 {
  width: var(--_spacing---full-width);
  height: 240vh;
  position: relative;
}
.content-head-01 {
  justify-content: space-between;
  display: flex;
}
.content-head-title-01 {
  width: 100%;
  max-width: 466px;
  margin-top: 0;
  margin-bottom: 0;
}
.content-head-text-01 {
  width: 100%;
  max-width: 349px;
}
.content-head-title-italic-01 {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.content-images-wrap {
  width: var(--_spacing---full-width);
  margin-top: 146px;
  position: relative;
}
.content-inside-imgs {
  width: 100%;
  max-width: 892px;
  height: 426px;
  margin-left: auto;
  margin-right: 118px;
  overflow: hidden;
}
.content-inside-card-img {
  width: 48px;
  height: 48px;
}
.content-inside-card {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-color: var(--light);
  flex-flow: column;
  width: 100%;
  max-width: 303px;
  padding: 20px 20px 22px;
  display: flex;
  position: absolute;
}
.content-inside-card._01 {
  inset: 80px auto auto 145px;
}
.content-inside-card._02 {
  inset: 80px 0% auto auto;
}
.content-inside-card._03 {
  inset: auto auto -30px 0%;
}
.content-inside-card._04 {
  inset: auto 130px -70px auto;
}
.content-inside-card-body {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.content-inside-card-text.paragraph-03 {
  color: var(--gray-01);
}
.content-card-wrap {
  z-index: 1;
  width: 100%;
  max-width: 1188px;
  height: 709px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 50% 0% 0%;
}
.content-top {
  position: sticky;
  top: 100px;
}
.why-choose.container-full {
  height: 300vh;
  padding-top: var(--_spacing---section-pt-150);
  padding-bottom: var(--_spacing---section-pb-150);
  background-color: var(--bg);
}
.why-choose-content {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: sticky;
  top: 120px;
}
.choose-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.why-choose-cards {
  width: var(--_spacing---full-width);
  max-width: 346px;
  height: 423px;
  position: relative;
  overflow: hidden;
}
.why-choose-card {
  background-color: var(--light);
  width: 100%;
  max-width: 346px;
  height: auto;
  padding: 20px 10px 10px;
  position: absolute;
  inset: 0% auto auto 0%;
}
.why-choose-card._01 {
  z-index: 5;
}
.why-choose-card._02 {
  z-index: 4;
}
.why-choose-card._03 {
  z-index: 3;
}
.why-choose-card._04 {
  z-index: 2;
}
.why-choose-card._05 {
  z-index: 1;
}
.why-choose-card-text {
  margin-top: 4px;
}
.why-choose-card-text.paragraph-02 {
  width: var(--_spacing---full-width);
  max-width: 300px;
  color: var(--gray-01);
}
.why-choose-card-title {
  margin-top: 0;
  margin-bottom: 0;
}
.why-choose-card-title-italic {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.why-choose-card-thumb {
  width: var(--_spacing---full-width);
  height: 265px;
  margin-top: 48px;
  overflow: hidden;
}
.why-choose-text {
  width: 100%;
  max-width: 327px;
  color: var(--gray-01);
}
.product-add-to-cart {
  border-bottom: 1px solid var(--light);
  color: var(--dark);
  font-size: 14px;
  line-height: var(--_typography---line-height--button-text-height);
  font-weight: var(--_typography---font-weights--semi-bold);
  background-color: #0000;
  background-image: url('../images/ArrowTop.svg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto;
  padding: 0 15px 0 0;
}
.product-add-to-cart:hover {
  border-bottom: 1px solid var(--dark);
}
.product-state {
  margin-bottom: 0;
}
.qantity-hide {
  display: none;
}
.submit-button {
  border: 1px solid var(--dark);
  background-color: var(--dark);
  color: var(--light);
  border-radius: 0;
  padding: 12px 16px;
  transition: all .3s;
}
.submit-button:hover {
  background-color: var(--light);
  color: var(--dark);
}
.offer-text {
  font-family: var(--_typography---font-family--libre-casion);
  font-style: italic;
}
.offer-text-n {
  display: block;
}
.feature-blog-btns {
  justify-content: center;
  margin-top: -20px;
  display: flex;
}
.font-text {
  font-size: var(--_typography---font-size--title-01);
}
.content-tabs-menu {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.content-tab-link {
  background-color: #0000;
  padding: 0;
}
.content-tab-link[aria-current="page"], .content-tab-link.is-active {
  background-color: #0000;
}
.content-tabs-info {
  width: 100%;
  max-width: 461px;
  position: absolute;
  inset: auto 0% 0% auto;
}
.third-btn-line {
  width: var(--_spacing---full-width);
  background-color: var(--dark);
  height: 1px;
  position: absolute;
  inset: auto auto 0% 0%;
}
.license-description-wrap {
  width: 100%;
  max-width: 471px;
}
.checkout-section {
  padding-top: var(--_spacing---section-pt-100);
  padding-bottom: var(--_spacing---section-pt-100);
  background-color: var(--bg);
}
.circle {
  background-color: #0158ff;
  border-radius: 1000px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -4px;
  right: -4px;
}
.unlock-full-access {
  color: #0158ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
}
.promo-cards {
  z-index: 10;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.buy-template-button {
  background-color: #7c7c7c26;
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  position: fixed;
  inset: auto 0% 0% auto;
}
.buy-template-button:hover {
  box-shadow: 4px 4px 25px #0003;
}
.buy-template-button.frosted-glass {
  z-index: 1000;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 16rem;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  position: relative;
  bottom: auto;
  right: auto;
}
.buy-template-button.frosted-glass:hover {
  border-width: 1px;
  border-color: #0158ff;
}
.image {
  width: 28px;
  height: 28px;
}
.promo-text {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
  text-decoration: none;
}
.all-access-card {
  background-color: #7c7c7c26;
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  position: fixed;
  inset: auto 0% 0% auto;
}
.all-access-card:hover {
  box-shadow: 4px 4px 25px #0003;
}
.all-access-card.frosted-glass {
  z-index: 1000;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 230px;
  min-width: 16rem;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  position: relative;
  bottom: auto;
  right: auto;
}
.all-access-card.frosted-glass:hover {
  border-width: 1px;
  border-color: #0158ff;
}
@media screen and (min-width: 1440px) {
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
    font-size: var(--_typography---font-size--heading-01);
    line-height: var(--_typography---line-height--heading-height-01);
    font-weight: var(--_typography---font-weights--semi-bold);
    letter-spacing: var(--_typography---letter-spacing--heading-ls-01);
  }
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
    font-size: var(--_typography---font-size--heading-02);
    line-height: var(--_typography---line-height--heading-height-02);
    font-weight: var(--_typography---font-weights--semi-bold);
    letter-spacing: var(--_typography---letter-spacing--heading-ls-02);
  }
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
    font-size: var(--_typography---font-size--heading-03);
    line-height: var(--_typography---line-height--heading-height-03);
    font-weight: var(--_typography---font-weights--semi-bold);
    letter-spacing: var(--_typography---letter-spacing--heading-ls-03);
  }
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
    font-size: var(--_typography---font-size--heading-04);
    line-height: var(--_typography---line-height--heading-height-04);
    font-weight: var(--_typography---font-weights--semi-bold);
    letter-spacing: var(--_typography---letter-spacing--heading-ls-04);
  }
.container-fluid.for-content {
    height: 100vh;
  }
.announcement-inside {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.feature-body-item-btns {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }
.dropdown-toggle-4 {
    justify-content: space-between;
    width: 100%;
    display: flex;
  }
.faqs-qa-2 {
    width: 100%;
  }
.dropdown-list {
    background-color: #ddd0;
    position: static;
  }
.about-info-txt-02 {
    font-family: var(--_typography---font-family--libre-casion);
    font-style: italic;
  }
.works-gallery-content {
    padding-left: 0;
    padding-right: 0;
  }
.content-images-wrap {
    width: var(--_spacing---full-width);
    margin-top: 146px;
    position: relative;
  }
.content-inside-card {
    position: absolute;
  }
.feature-blog-btns {
    align-self: center;
  }
}
@media screen and (max-width: 991px) {
body {
    --_typography---font-family--inter: Inter, Arial, sans-serif;
    --_typography---font-size--paragraph-03: 16px;
    --_typography---line-height--para-height-03: 24px;
    --_typography---font-weights--regular: 400;
    --_typography---font-size--heading-01: 30px;
    --_typography---line-height--heading-height-01: 38px;
    --_typography---font-weights--semi-bold: 600;
    --_typography---letter-spacing--heading-ls-01: -.9px;
    --_typography---font-size--heading-02: 28px;
    --_typography---line-height--heading-height-02: 36px;
    --_typography---letter-spacing--heading-ls-02: -.84px;
    --_typography---line-height--heading-height-03: 32px;
    --_typography---letter-spacing--heading-ls-03: -.72px;
    --_typography---font-size--heading-03: 24px;
    --_typography---font-size--heading-04: 20px;
    --_typography---line-height--heading-height-04: 28px;
    --_typography---letter-spacing--heading-ls-04: -.6px;
    --_typography---font-size--paragraph-01: 20px;
    --_typography---line-height--para-height-01: 28px;
    --_typography---font-size--paragraph-02: 18px;
    --_typography---letter-spacing--para-ls-02: -.54px;
    --_typography---font-weights--medium: 500;
    --_typography---font-family--libre-casion: Librecasloncondensed, Arial, sans-serif;
    --_typography---font-size--title-01: 56px;
    --_typography---line-height--title-height-01: 68px;
    --_typography---letter-spacing--title-ls-01: -1.68px;
    --_typography---font-size--title-02: 20px;
    --_typography---line-height--title-height-03: 22px;
    --_typography---letter-spacing--title-ls-03: -.54px;
    --_typography---letter-spacing--para-ls-03: -.48px;
    --_typography---letter-spacing--para-ls-01: -.6px;
    --_typography---font-weights--bold: 700;
    --_typography---font-size--display-1: 40px;
    --_typography---line-height--display-height-1: 48px;
    --_typography---letter-spacing--display-ls-1: 0px;
    --_typography---line-height--button-text-height: 24px;
    --_typography---font-size--button-text: 16px;
    --_typography---letter-spacing--button-text-ls: 0px;
    --_typography---font-size--caption: 14px;
    --_typography---line-height--caption-height: 20px;
    --_typography---font-size--title-03: 18px;
    --_typography---line-height--title-height-02: 24px;
    --_typography---line-height--para-height-02: 26px;
    --_typography---line-height--button-text-height-2: 24px;
    --_typography---letter-spacing--title-ls-02: -.6px;
    --_spacing---section-pb-56: 48px;
    --_spacing---gap-40: 36px;
    --_spacing---section-p-80: 40px;
    --_spacing---section-pb-80: 80px;
    --_spacing---full-width: 100%;
    --_spacing---container-fluid: 1380px;
    --_spacing---container-m-30: 28px;
    --_spacing---section-pt-56: 48px;
    --_spacing---section-pt-80: 80px;
    --_spacing---section-pt-100: 80px;
    --_spacing---section-pb-100: 80px;
    --_spacing---gap-16: 16px;
    --_spacing---gap-20: 20px;
    --_spacing---section-pt-150: 80px;
    --_spacing---section-pb-150: 80px;
    --_spacing---section-p-150: 40px;
  }
.typography.for-button {
    flex-flow: row;
  }
.container-fluid.for-content {
    height: auto;
  }
.footer-wrap {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 60px;
  }
.style-guide-content {
    grid-column-gap: 54px;
    grid-row-gap: 54px;
  }
.typography-title-wrap {
    position: static;
  }
.footer-copyright {
    padding-left: 20px;
    padding-right: 20px;
  }
.footer-bodies {
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }
.footer-right {
    flex-flow: row;
  }
.home-drop-list {
    border-bottom-style: none;
    border-left-style: none;
    border-right-style: none;
  }
.home-drop-list.mega {
    margin-bottom: 40px;
  }
.home-drop-list.mega.is-open {
    z-index: 999999;
    inset: 50px auto auto 0%;
  }
.log-infos {
    max-width: 120px;
  }
.move-down {
    padding-top: 13px;
    padding-bottom: 13px;
    display: none;
  }
.move-down.first {
    padding-top: 0;
    padding-bottom: 0;
  }
.move-down.shop {
    display: flex;
  }
.nav-menu-light {
    width: var(--_spacing---full-width);
    background-color: var(--light);
    padding: 30px 60px;
  }
.nav-link {
    padding-top: 20px;
    padding-bottom: 20px;
  }
.nav-link.button-text {
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
  }
.nav-link.button-text._02 {
    display: none;
  }
.items-wrap {
    display: flex;
  }
.items-wrap._01 {
    display: none;
  }
.items-wrap._02 {
    display: flex;
  }
.menu-button {
    border: 1px solid var(--dark);
    color: var(--dark);
    font-size: var(--_typography---font-size--heading-03);
    line-height: var(--_typography---line-height--button-text-height);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    padding: 7px 14px 5px;
    display: flex;
  }
.menu-button.is-open {
    background-color: var(--dark);
  }
.footer-gallery-wrap {
    margin-top: 50px;
  }
.footer-gallery {
    width: 200px;
    height: 200px;
  }
.colors {
    flex-flow: column;
  }
.blog-single-hero {
    height: 450px;
  }
.blog-single-info._04 {
    height: 320px;
  }
.blog-single-socials {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
.nav-link-3 {
    padding-top: 20px;
    padding-bottom: 20px;
  }
.blogs-list {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
  }
.blog-item._05 {
    margin-top: 0;
  }
.blog-thumb {
    height: 280px;
  }
.blog-thumb._03 {
    height: 302px;
  }
.blog-bottom {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.feature-blog-list {
    grid-template-columns: 1fr 1fr;
  }
.feature-blog-thumb {
    height: 340px;
  }
.feature-blog-body {
    padding-top: 22px;
    padding-bottom: 22px;
  }
.feature-blog-item-text {
    margin-bottom: 34px;
  }
.shop-details-content {
    flex-flow: wrap-reverse;
  }
.shop-details-left {
    max-width: 100%;
  }
.shop-details-thumb._01 {
    height: 400px;
    display: none;
  }
.shop-details-thumb._03 {
    height: 450px;
    display: block;
  }
.shop-details-right {
    max-width: 100%;
    position: static;
  }
.shop-details-right-wrap {
    max-width: 100%;
  }
.shop-comment-list {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    margin-top: 50px;
  }
.comment-writers {
    max-width: 200px;
  }
.comment-body {
    max-width: 100%;
  }
.shop-content {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
  }
.shop-item-thumb.big {
    height: 370px;
  }
.shop-items {
    grid-row-gap: 32px;
    grid-template-columns: 1fr 1fr;
  }
.feature-product.container-full {
    padding-top: 0;
  }
.contact-content {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
  }
.faq-head, .faqs-wrap {
    max-width: 100%;
  }
.faq-answer-text {
    padding-right: 40px;
  }
.faq-content {
    flex-flow: column;
  }
.question-title {
    letter-spacing: -1.04px;
  }
.faq-body-wrap {
    flex-direction: column;
  }
.license-head {
    margin-bottom: var(--_spacing---gap-40);
  }
.license-title-info {
    max-width: 400px;
  }
.license-item-left._02 {
    height: 200px;
  }
.license-item-img {
    height: 160px;
  }
.license-item-right.heading-03 {
    max-width: 400px;
  }
.license-item-ico {
    height: 100px;
  }
.changelog-item, .changelog-item._01 {
    padding-right: 40px;
  }
.changelog-item-left {
    max-width: 140px;
  }
.terms-body {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
  }
.password-inside {
    height: auto;
    padding-top: 150px;
    padding-bottom: var(--_spacing---section-pb-150);
    justify-content: center;
    align-items: flex-start;
  }
.not-found-text.paragraph-03 {
    margin-bottom: 28px;
  }
.about-hero.container-full {
    height: auto;
  }
.about-hero-body {
    width: 100%;
  }
.about-hero-body-text.paragraph-03 {
    max-width: 100%;
  }
.about-hero-bottom {
    grid-column-gap: var(--_spacing---container-m-30);
    grid-row-gap: var(--_spacing---container-m-30);
    flex-flow: column;
  }
.content-wrap {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
  }
.content-body {
    flex-flow: column;
  }
.content-left {
    max-width: 100%;
    height: 400px;
  }
.content-wrap-02 {
    flex-flow: column;
  }
.content-left-thumb-02 {
    max-width: 100%;
    height: 400px;
  }
.cotnent-info-head-02 {
    margin-bottom: var(--_spacing---container-m-30);
  }
.studio-stat-item {
    max-width: 100%;
  }
.statistics-number-wrap {
    height: 38px;
  }
.content-wrap-03 {
    justify-content: space-between;
    align-items: stretch;
  }
.content-left-thumbs-03 {
    height: auto;
    padding: 30px;
  }
.content-right-info-03 {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
  }
.content-wrap-04 {
    justify-content: space-between;
    align-items: stretch;
  }
.home-hero-content {
    grid-column-gap: var(--_spacing---section-pt-56);
    grid-row-gap: var(--_spacing---section-pt-56);
  }
.home-hero-head {
    flex-flow: column;
  }
.home-hero-thumbs {
    height: 340px;
  }
.about-info-body {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
.shop-category.container-full {
    height: auto;
  }
.shop-head {
    margin-bottom: 60px;
    position: static;
  }
.shop-head._02 {
    margin-bottom: var(--_spacing---gap-40);
  }
.camera {
    height: auto;
    position: static;
  }
.camera._02 {
    height: auto;
  }
.works-gallery-content {
    height: auto;
    position: static;
  }
.frame {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.track, .track._02 {
    height: auto;
  }
.testimonial-left {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
    justify-content: space-between;
  }
.cta.container-full {
    height: 500px;
  }
.cta-content-item {
    max-width: 160px;
    height: 200px;
  }
.about-hero-bdy-txt-wrap {
    margin-left: 0;
  }
.gallery-content-title {
    max-width: 400px;
    font-size: 76px;
  }
.gallery-list {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.gallery-item {
    height: 240px;
  }
.content-01.container-full {
    height: auto;
  }
.content-wrap-01 {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
    flex-flow: column;
    height: auto;
    display: flex;
  }
.content-images-wrap {
    margin-top: var(--_spacing---gap-40);
  }
.content-inside-imgs {
    max-width: 100%;
    margin-right: auto;
  }
.content-inside-card {
    max-width: 100%;
    position: static;
  }
.content-card-wrap {
    height: auto;
    max-width: var(--_spacing---full-width);
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
    position: static;
  }
.content-top {
    position: static;
  }
.why-choose-content {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
.why-choose-cards {
    align-self: center;
    height: 410px;
  }
.why-choose-card-thumb {
    margin-top: var(--_spacing---gap-40);
  }
.why-choose-text.paragraph-02 {
    align-self: flex-end;
  }
.license-description-wrap {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
body {
    --_typography---font-family--inter: Inter, Arial, sans-serif;
    --_typography---font-size--paragraph-03: 16px;
    --_typography---line-height--para-height-03: 24px;
    --_typography---font-weights--regular: 400;
    --_typography---font-size--heading-01: 28px;
    --_typography---line-height--heading-height-01: 36px;
    --_typography---font-weights--semi-bold: 600;
    --_typography---letter-spacing--heading-ls-01: -.84px;
    --_typography---font-size--heading-02: 26px;
    --_typography---line-height--heading-height-02: 34px;
    --_typography---letter-spacing--heading-ls-02: -.78px;
    --_typography---line-height--heading-height-03: 32px;
    --_typography---letter-spacing--heading-ls-03: -.72px;
    --_typography---font-size--heading-03: 24px;
    --_typography---font-size--heading-04: 20px;
    --_typography---line-height--heading-height-04: 28px;
    --_typography---letter-spacing--heading-ls-04: -.6px;
    --_typography---font-size--paragraph-01: 18px;
    --_typography---line-height--para-height-01: 26px;
    --_typography---font-size--paragraph-02: 18px;
    --_typography---letter-spacing--para-ls-02: -.54px;
    --_typography---font-weights--medium: 500;
    --_typography---font-family--libre-casion: Librecasloncondensed, Arial, sans-serif;
    --_typography---font-size--title-01: 48px;
    --_typography---line-height--title-height-01: 60px;
    --_typography---letter-spacing--title-ls-01: -1.44px;
    --_typography---font-size--title-02: 18px;
    --_typography---line-height--title-height-03: 22px;
    --_typography---letter-spacing--title-ls-03: -.54px;
    --_typography---letter-spacing--para-ls-03: -.48px;
    --_typography---letter-spacing--para-ls-01: -.54px;
    --_typography---font-weights--bold: 700;
    --_typography---font-size--display-1: 38px;
    --_typography---line-height--display-height-1: 46px;
    --_typography---letter-spacing--display-ls-1: 0px;
    --_typography---line-height--button-text-height: 24px;
    --_typography---font-size--button-text: 16px;
    --_typography---letter-spacing--button-text-ls: 0px;
    --_typography---font-size--caption: 14px;
    --_typography---line-height--caption-height: 20px;
    --_typography---font-size--title-03: 18px;
    --_typography---line-height--title-height-02: 24px;
    --_typography---line-height--para-height-02: 26px;
    --_typography---line-height--button-text-height-2: 24px;
    --_typography---letter-spacing--title-ls-02: -.54px;
    --_spacing---section-pb-56: 42px;
    --_spacing---gap-40: 34px;
    --_spacing---section-p-80: 30px;
    --_spacing---section-pb-80: 60px;
    --_spacing---full-width: 100%;
    --_spacing---container-fluid: 1380px;
    --_spacing---container-m-30: 24px;
    --_spacing---section-pt-56: 42px;
    --_spacing---section-pt-80: 60px;
    --_spacing---section-pt-100: 60px;
    --_spacing---section-pb-100: 60px;
    --_spacing---gap-16: 16px;
    --_spacing---gap-20: 20px;
    --_spacing---section-pt-150: 60px;
    --_spacing---section-pb-150: 60px;
    --_spacing---section-p-150: 30px;
  }
.typography {
    flex-flow: column;
  }
.typography.for-button {
    flex-flow: wrap;
  }
.style-hero-content {
    justify-content: center;
    align-items: center;
  }
.container-fluid.for-about {
    height: auto;
  }
.color-box-wrap {
    height: 240px;
  }
.footer-wrap {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 48px;
  }
.style-guide-content {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
  }
.footer-socials {
    flex-flow: wrap;
  }
.footer-copyright {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    text-align: center;
    flex-flow: column;
  }
.footer-body-nav {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.footer-left {
    max-width: 100%;
  }
.footer-bodies {
    flex-flow: row;
    grid-template-columns: 1fr 1fr;
    display: flex;
  }
.footer-body {
    align-items: flex-start;
    width: 100%;
    max-width: 160px;
  }
.link-line {
    height: 2px;
  }
.color-list {
    grid-template-columns: 1fr 1fr;
  }
.footer-right {
    flex-flow: row;
    max-width: 100%;
  }
.home-drop-list.mega {
    width: 220px;
    max-width: 220px;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
.log-infos {
    display: none;
  }
.cart-wrap {
    display: block;
  }
.nav-container {
    grid-template-columns: max-content 1fr max-content;
    justify-content: space-between;
  }
.pricing-desc {
    display: none;
  }
.nav-menu-light {
    flex-flow: column;
    padding: 24px 20px;
  }
.items-wrap {
    flex-flow: wrap;
  }
.nav-brand[aria-current="page"], .nav-brand.is-active {
    padding-left: 0;
  }
.footer-gallery-wrap {
    margin-top: 40px;
    margin-bottom: 40px;
  }
.footer-gallery {
    width: 180px;
    height: 180px;
  }
.global-img._01 {
    object-position: 50% 0%;
  }
.button-text-2 {
    font-size: 14px;
    line-height: 20px;
  }
.colors {
    flex-flow: column;
  }
.blog-single-hero {
    height: 350px;
  }
.blog-single-body {
    flex-flow: column;
  }
.blog-single-left {
    position: static;
  }
.blogs-content {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
  }
.blogs-list {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
  }
.blog-top {
    flex-flow: wrap-reverse;
    max-width: 100%;
  }
.blog-item {
    max-width: 100%;
  }
.blog-thumb._02, .blog-thumb._03 {
    height: 280px;
  }
.blog-body, .blog-item-desc.paragraph-02 {
    max-width: 100%;
  }
.blog-middle, .blog-bottom {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    flex-flow: column;
  }
.blog-collection.top {
    max-width: 100%;
  }
.feature-blog-content {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
  }
.feature-blog-list {
    grid-column-gap: var(--_spacing---container-m-30);
    grid-row-gap: var(--_spacing---container-m-30);
    grid-template-columns: 1fr;
  }
.feature-blog-body {
    padding-top: 20px;
    padding-bottom: 20px;
  }
.feature-blog-item-text {
    margin-bottom: 30px;
  }
.shop-details-thumb._02 {
    height: 260px;
  }
.shop-details-thumb._03 {
    height: 340px;
  }
.shop-details-infos {
    grid-row-gap: 16px;
    flex-flow: wrap;
  }
.shop-comment-list {
    grid-column-gap: 44px;
    grid-row-gap: 44px;
    margin-top: 44px;
  }
.shop-content {
    grid-column-gap: var(--_spacing---gap-40);
    grid-row-gap: var(--_spacing---gap-40);
  }
.shop-item-thumb, .shop-item-thumb.big {
    height: 300px;
  }
.shop-items {
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }
.contact-infos {
    flex-flow: column;
  }
.contact-info-item._01 {
    max-width: 100%;
  }
.contact-info-text.paragraph-02 {
    margin-bottom: 20px;
  }
.contact-form-wrap {
    padding: 26px 24px;
  }
.dropdown-toggle-4 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
  }
.faq-answer-text {
    padding-right: 0;
  }
.faq-question-left-5 {
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }
.faq-content {
    flex-flow: column;
  }
.faq-body {
    padding-left: 24px;
    padding-right: 24px;
  }
.faq-body-wrap {
    grid-template-columns: 1fr;
    margin-left: 0;
  }
.license-item {
    flex-flow: column;
    padding-top: 28px;
    padding-bottom: 28px;
  }
.license-item-right.heading-03, .changelog-item-right {
    max-width: 100%;
  }
.changelog-item {
    flex-flow: column;
    padding-top: 28px;
    padding-bottom: 28px;
    padding-right: 0;
  }
.changelog-item._01 {
    padding-right: 0;
  }
.password-inside {
    padding-top: 100px;
  }
.passowrd-form-block {
    margin-top: 40px;
  }
.not-found-text.paragraph-03 {
    margin-bottom: 24px;
  }
.about-hero-body {
    margin-top: var(--_spacing---gap-40);
    margin-bottom: var(--_spacing---gap-40);
  }
.about-hero-bottom {
    grid-column-gap: var(--_spacing---gap-20);
    grid-row-gap: var(--_spacing---gap-20);
    flex-flow: column;
  }
.content-body {
    padding: 20px;
  }
.content-left {
    height: 300px;
  }
.content-body-list {
    grid-template-columns: 1fr;
  }
.content-left-thumb-02 {
    height: 300px;
  }
.cotnent-info-head-02 {
    flex-flow: column;
  }
.content-info-head-left, .content-info-head-thumb {
    max-width: 100%;
  }
.content-info-bottom-item {
    grid-column-gap: var(--_spacing---gap-20);
    grid-row-gap: var(--_spacing---gap-20);
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.statistics-number-wrap {
    height: 36px;
  }
.content-info-divider {
    display: none;
  }
.content-wrap-03 {
    flex-flow: column;
  }
.content-left-thumbs-03 {
    height: 400px;
  }
.content-right-info-03 {
    max-width: 100%;
  }
.content-wrap-04 {
    flex-flow: column;
  }
.content-info-item {
    font-size: var(--_typography---font-size--heading-01);
    line-height: var(--_typography---line-height--heading-height-01);
    font-weight: var(--_typography---font-weights--regular);
  }
.content-info-items {
    color: var(--light);
  }
.content-info-right {
    grid-column-gap: var(--_spacing---gap-16);
    grid-row-gap: var(--_spacing---gap-16);
    opacity: 1;
    max-width: 100%;
    position: static;
  }
.content-info-item-braket {
    font-size: var(--_typography---font-size--heading-01);
    line-height: var(--_typography---line-height--heading-height-01);
    font-weight: var(--_typography---font-weights--regular);
  }
.home-hero-head {
    flex-flow: column;
  }
.home-hero-thumbs {
    height: 280px;
  }
.about-info-body {
    flex-flow: column;
  }
.info-body-right {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
.info-body {
    max-width: 100%;
  }
.shop-head {
    margin-bottom: var(--_spacing---gap-40);
  }
.camera._02 {
    margin-bottom: 40px;
  }
.works-gallery-content {
    padding-left: 0;
    padding-right: 0;
  }
.frame {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr;
  }
.works-gallery-thumbs {
    height: 200px;
  }
.works-gallery-item {
    padding: 10px 10px 20px;
  }
.testimonial-item {
    flex-flow: wrap-reverse;
    justify-content: space-between;
    align-items: flex-end;
  }
.testimonial-left {
    height: auto;
  }
.testimonial-img {
    max-width: none;
  }
.cta.container-full {
    position: relative;
  }
.cta-content-left {
    z-index: 1;
    max-width: 100%;
    position: relative;
  }
.cta-content-right {
    transform: rotate(6deg);
  }
.cta-content-right-wrap {
    opacity: .6;
    filter: blur(1px);
    pointer-events: none;
    max-width: 300px;
    position: absolute;
    inset: 0% 80px auto auto;
  }
.gallery-content-title {
    max-width: 360px;
    font-size: 62px;
  }
.gallery-list {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.gallery-item {
    height: 200px;
  }
.content-head-01 {
    grid-column-gap: var(--_spacing---gap-20);
    grid-row-gap: var(--_spacing---gap-20);
    flex-flow: column;
  }
.content-inside-imgs {
    height: 300px;
  }
.feature-blog-btns {
    margin-top: 0;
  }
.content-info-tabs {
    flex-flow: column;
    display: flex;
  }
.content-tabs-menu {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    flex-flow: wrap;
  }
.content-tabs-info {
    max-width: 100%;
    margin-top: var(--_spacing---container-m-30);
    position: static;
  }
.buy-template-button.frosted-glass, .all-access-card.frosted-glass {
    border-top-right-radius: 1.4rem;
  }
}
@media screen and (max-width: 479px) {
body {
    --_typography---font-family--inter: Inter, Arial, sans-serif;
    --_typography---font-size--paragraph-03: 14px;
    --_typography---line-height--para-height-03: 22px;
    --_typography---font-weights--regular: 400;
    --_typography---font-size--heading-01: 26px;
    --_typography---line-height--heading-height-01: 34px;
    --_typography---font-weights--semi-bold: 600;
    --_typography---letter-spacing--heading-ls-01: -.78px;
    --_typography---font-size--heading-02: 24px;
    --_typography---line-height--heading-height-02: 32px;
    --_typography---letter-spacing--heading-ls-02: -.72px;
    --_typography---line-height--heading-height-03: 30px;
    --_typography---letter-spacing--heading-ls-03: -.66px;
    --_typography---font-size--heading-03: 22px;
    --_typography---font-size--heading-04: 18px;
    --_typography---line-height--heading-height-04: 26px;
    --_typography---letter-spacing--heading-ls-04: -.54px;
    --_typography---font-size--paragraph-01: 16px;
    --_typography---line-height--para-height-01: 27px;
    --_typography---font-size--paragraph-02: 16px;
    --_typography---letter-spacing--para-ls-02: -.48px;
    --_typography---font-weights--medium: 500;
    --_typography---font-family--libre-casion: Librecasloncondensed, Arial, sans-serif;
    --_typography---font-size--title-01: 42px;
    --_typography---line-height--title-height-01: 54px;
    --_typography---letter-spacing--title-ls-01: -1.26px;
    --_typography---font-size--title-02: 16px;
    --_typography---line-height--title-height-03: 20px;
    --_typography---letter-spacing--title-ls-03: -.48px;
    --_typography---letter-spacing--para-ls-03: -.42px;
    --_typography---letter-spacing--para-ls-01: -.48px;
    --_typography---font-weights--bold: 700;
    --_typography---font-size--display-1: 36px;
    --_typography---line-height--display-height-1: 44px;
    --_typography---letter-spacing--display-ls-1: 0px;
    --_typography---line-height--button-text-height: 22px;
    --_typography---font-size--button-text: 14px;
    --_typography---letter-spacing--button-text-ls: 0px;
    --_typography---font-size--caption: 14px;
    --_typography---line-height--caption-height: 20px;
    --_typography---font-size--title-03: 16px;
    --_typography---line-height--title-height-02: 22px;
    --_typography---line-height--para-height-02: 24px;
    --_typography---line-height--button-text-height-2: 22px;
    --_typography---letter-spacing--title-ls-02: -.48px;
    --_spacing---section-pb-56: 34px;
    --_spacing---gap-40: 30px;
    --_spacing---section-p-80: 20px;
    --_spacing---section-pb-80: 40px;
    --_spacing---full-width: 100%;
    --_spacing---container-fluid: 1380px;
    --_spacing---container-m-30: 20px;
    --_spacing---section-pt-56: 34px;
    --_spacing---section-pt-80: 40px;
    --_spacing---section-pt-100: 40px;
    --_spacing---section-pb-100: 40px;
    --_spacing---gap-16: 16px;
    --_spacing---gap-20: 20px;
    --_spacing---section-pt-150: 40px;
    --_spacing---section-pb-150: 40px;
    --_spacing---section-p-150: 20px;
  }
.button-wrap {
    flex-flow: wrap;
  }
.typography {
    flex-flow: column;
    align-items: flex-start;
  }
.style-hero-content.is-license {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: wrap;
  }
.color-box-wrap {
    height: 240px;
  }
.footer-wrap {
    padding-bottom: 30px;
  }
.style-guide-content {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.color-body.light-text {
    padding-bottom: 20px;
    padding-left: 24px;
  }
.footer-socials {
    grid-column-gap: 20px;
    grid-row-gap: 14px;
  }
.footer {
    overflow: hidden;
  }
.footer-link-02.paragraph-03 {
    font-size: 16px;
  }
.footer-copyright {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.footer-body-nav {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 100%;
  }
.footer-bodies {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    margin-top: 0;
    display: grid;
  }
.footer-body {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    max-width: 100%;
    display: flex;
  }
.link-line {
    height: 1px;
  }
.color-list {
    grid-template-columns: 1fr;
  }
.footer-right {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
    flex-flow: column;
  }
.cart-wrap._02 {
    opacity: 0;
  }
.nav-container {
    min-height: 78px;
    margin-left: 20px;
    margin-right: 20px;
  }
.nav-menu-light {
    padding: 20px;
  }
.nav-link {
    padding: 16px 20px 16px 0;
  }
.navbar-component {
    height: 60px;
  }
.sub-heading-05 {
    font-size: 20px;
    line-height: 28px;
  }
.item-inside {
    max-width: 120px;
  }
.footer-gallery-wrap {
    margin-top: 30px;
    margin-bottom: 30px;
  }
.footer-gallery {
    width: 140px;
    height: 140px;
  }
.global-img.info-img {
    position: absolute;
    inset: 0%;
  }
.footer-bg-img {
    pointer-events: none;
  }
.colors {
    flex-flow: column;
    align-items: flex-start;
  }
.blog-single-social {
    width: 40px;
    height: 40px;
  }
.blog-single-hero {
    height: 240px;
  }
.blog-single-info._04 {
    height: 220px;
  }
.blog-single-left {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.nav-link-3 {
    padding: 16px 20px 16px 0;
  }
.blog-single-social-ico {
    height: 20px;
  }
.blog-single-social-ico.yt {
    height: 16px;
  }
.blogs-list {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.blog-thumb, .blog-thumb._02, .blog-thumb._03 {
    height: 220px;
  }
.blog-bottom {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.feature-blog-thumb {
    height: 220px;
  }
.feature-blog-item-text {
    margin-bottom: 20px;
  }
.shop-details-thumb._02 {
    height: 140px;
  }
.shop-details-thumb._03 {
    height: 220px;
  }
.shop-details-price.paragraph-02 {
    margin-top: 6px;
    margin-bottom: 16px;
  }
.offer-texts {
    padding-top: 8px;
    padding-bottom: 8px;
  }
.offer-texts.button-text {
    padding-top: 6px;
    padding-bottom: 6px;
  }
.shop-menu {
    grid-row-gap: 10px;
    flex-flow: wrap;
  }
.shop-comment-top {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
  }
.shop-comment-list {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    margin-top: 36px;
  }
.comments-item {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: wrap-reverse;
  }
.comment-writers {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.comment-star {
    width: 24px;
    height: 24px;
  }
.comments-title.heading-03 {
    margin-top: 16px;
    margin-bottom: 8px;
  }
.shop-list {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
  }
.shop-item-thumb, .shop-item-thumb.big {
    height: 240px;
  }
.contact-info-text.paragraph-02 {
    margin-bottom: 14px;
  }
.contact-form-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 20px;
  }
.contact-sbmit-btn.button-text {
    max-width: 100%;
  }
.dropdown-toggle-4 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
  }
.faq-head {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.faqs-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.faq-answer-text {
    margin-bottom: 20px;
    padding-right: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
  }
.faq-question-left-5 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.question-title {
    white-space: normal;
    padding-right: 0;
  }
.faq-body {
    padding: 12px 14px;
  }
.license-head {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: wrap;
  }
.license-title-info {
    max-width: 300px;
  }
.license-item {
    padding-top: 24px;
    padding-bottom: 24px;
  }
.license-item-left {
    flex-flow: column;
  }
.license-item-left._02 {
    height: 160px;
  }
.changelog-item {
    padding-top: 24px;
    padding-bottom: 24px;
  }
.changelog-item-left {
    flex-flow: column;
  }
.terms-list-item.paragraph-03 {
    padding-left: 20px;
  }
.password-inside {
    padding-top: 80px;
  }
.passowrd-form-block {
    margin-top: 30px;
  }
.password-form {
    flex-flow: column;
  }
.not-found-text.paragraph-03 {
    margin-bottom: 20px;
  }
.about-body-thumb {
    height: 240px;
  }
.about-hero-bottom, .about-hero-right {
    grid-column-gap: var(--_spacing---gap-20);
    grid-row-gap: var(--_spacing---gap-20);
  }
.content-body {
    padding: 16px;
  }
.content-left {
    height: 240px;
  }
.content-body-item {
    padding: 16px;
  }
.content-item-title.heading-04 {
    margin-top: 16px;
  }
.content-left-thumb-02 {
    height: 240px;
  }
.statistics-number-wrap {
    justify-content: flex-start;
    width: 100%;
    height: 34px;
  }
.content-left-thumbs-03 {
    height: 300px;
    padding: 20px;
  }
.content-info-title-03.heading-01 {
    margin-top: 8px;
  }
.home-hero-card {
    max-width: 100%;
  }
.home-hero-thumbs {
    height: 200px;
  }
.about-info-content {
    grid-column-gap: var(--_spacing---section-pb-150);
    grid-row-gap: var(--_spacing---section-pb-150);
  }
.about-info-body {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.info-body-thumb {
    justify-content: flex-start;
    align-items: flex-end;
    height: 300px;
    padding: 7px;
    display: flex;
  }
.info-body-card {
    z-index: 1;
    max-width: 100%;
    position: relative;
    top: 0;
    left: 0;
  }
.info-body {
    grid-column-gap: var(--_spacing---gap-16);
    grid-row-gap: var(--_spacing---gap-16);
  }
.info-body-btns {
    display: flex;
  }
.frame {
    grid-template-columns: 1fr;
  }
.testimonial-img {
    height: 240px;
  }
.testimonial-mask {
    margin-bottom: 30px;
  }
.testimonial-arrow {
    margin-top: var(--_spacing---container-m-30);
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    inset: auto auto -45px 0%;
  }
.testimonial-arrow.hide {
    display: none;
  }
.cta.container-full {
    height: auto;
    padding-top: var(--_spacing---section-pt-80);
    padding-bottom: var(--_spacing---section-pb-80);
  }
.cta-content-right {
    transform: rotate(3deg);
  }
.cta-content-item {
    max-width: 120px;
    height: 160px;
  }
.cta-content-right-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    margin-right: 0;
    display: none;
    right: 20px;
  }
.gallery-content-title {
    max-width: 210px;
    font-size: 54px;
  }
.gallery-list {
    grid-template-columns: 1fr 1fr;
  }
.work-gallery-collection {
    max-width: 100%;
  }
.content-inside-imgs {
    height: 200px;
  }
.content-inside-card {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 18px;
  }
.content-card-wrap {
    grid-template-columns: 1fr;
  }
.why-choose-content {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    top: 80px;
  }
.why-choose-cards {
    height: 400px;
  }
.buy-template-button.frosted-glass, .all-access-card.frosted-glass {
    border-radius: 10px;
  }
}
#node-_121e3ea4-e6b0-71e3-b95d-ea430370589b-0370588f {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-d8edc9e3-5dbf-e8a1-c999-3451182774b7-182774b4 {
  grid-area: 1 / 1 / 2 / 2;
  place-self: center start;
}
#node-d8edc9e3-5dbf-e8a1-c999-3451182774ba-182774b4 {
  place-self: center;
}
#node-d8edc9e3-5dbf-e8a1-c999-34511827758b-182774b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center;
}
#node-f39f0e3b-85bf-585f-44db-38e29fe72c3f-54044aea {
  grid-area: 1 / 1 / 2 / 2;
  place-self: center start;
}
#node-f39f0e3b-85bf-585f-44db-38e29fe72c42-54044aea {
  place-self: center;
}
#node-f39f0e3b-85bf-585f-44db-38e29fe72ce9-54044aea {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center;
}
#node-bd018490-46b7-abee-9f20-6289deb84595-6b9ab1b2 {
  grid-area: 1 / 1 / 2 / 2;
  place-self: center start;
}
#node-bd018490-46b7-abee-9f20-6289deb84598-6b9ab1b2 {
  place-self: center;
}
#node-bd018490-46b7-abee-9f20-6289deb84669-6b9ab1b2 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center;
}
#node-_4e45b5c8-aa44-fdb5-baf3-66281ed6f051-a68df42a, #node-_4e45b5c8-aa44-fdb5-baf3-66281ed6f056-a68df42a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
@media screen and (max-width: 991px) {
#node-b91437ed-6d10-1279-e5cf-37832ffc3870-dae897ba {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
#node-_121e3ea4-e6b0-71e3-b95d-ea430370589b-0370588f, #node-_121e3ea4-e6b0-71e3-b95d-ea43037058b3-0370588f {
    order: -9999;
  }
#node-d8edc9e3-5dbf-e8a1-c999-34511827758b-182774b4 {
    justify-self: end;
  }
#node-d8edc9e3-5dbf-e8a1-c999-345118277619-182774b4 {
    place-self: center;
  }
#node-f39f0e3b-85bf-585f-44db-38e29fe72ce9-54044aea {
    justify-self: end;
  }
#node-f39f0e3b-85bf-585f-44db-38e29fe72d05-54044aea {
    place-self: center;
  }
#node-bd018490-46b7-abee-9f20-6289deb84669-6b9ab1b2 {
    justify-self: end;
  }
#node-bd018490-46b7-abee-9f20-6289deb846a1-6b9ab1b2 {
    place-self: center;
  }
#node-a794cb8a-e1d5-0f52-dd96-d79008cf3a8f-80dd00fa, #node-_2481c370-1a6d-0b89-736c-b85f0b115d04-80dd00fa, #node-_98e8426c-9fb5-4a32-ed30-ff0dc9f79763-8aeb7d75, #node-a8d4f84c-8f27-ff88-4cdc-e2564f84dcde-8aeb7d7d, #node-a8d4f84c-8f27-ff88-4cdc-e2564f84dd2b-8aeb7d7d {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
}
@media screen and (max-width: 767px) {
#node-b91437ed-6d10-1279-e5cf-37832ffc3870-dae897ba {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
#node-d8edc9e3-5dbf-e8a1-c999-3451182775db-182774b4, #node-f39f0e3b-85bf-585f-44db-38e29fe72cf2-54044aea, #node-bd018490-46b7-abee-9f20-6289deb8468e-6b9ab1b2 {
    place-self: center end;
  }
#node-a794cb8a-e1d5-0f52-dd96-d79008cf3a8f-80dd00fa, #node-_2481c370-1a6d-0b89-736c-b85f0b115d04-80dd00fa, #node-_4e45b5c8-aa44-fdb5-baf3-66281ed6f051-a68df42a, #node-_4e45b5c8-aa44-fdb5-baf3-66281ed6f056-a68df42a, #node-_98e8426c-9fb5-4a32-ed30-ff0dc9f79763-8aeb7d75, #node-a8d4f84c-8f27-ff88-4cdc-e2564f84dcde-8aeb7d7d, #node-a8d4f84c-8f27-ff88-4cdc-e2564f84dd2b-8aeb7d7d {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}
@media screen and (max-width: 479px) {
#node-_8b47d9ed-5149-02f6-2709-e328245c4036-dae897ba, #node-_703077d3-f855-e132-a4b5-cf885a19852b-dae897ba, #node-_985d968d-7849-5415-68a9-0258b36475c8-0f2265b4, #node-_4e45b5c8-aa44-fdb5-baf3-66281ed6f051-a68df42a, #node-_4e45b5c8-aa44-fdb5-baf3-66281ed6f056-a68df42a {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}
/* ======================================================================
   4. Components (hand-written)
   ====================================================================== */
/* Components -- the vanilla replacement for Webflow's runtime and its IX2 and
 * IX3 interactions.
 *
 * Every value here was read off the decoded payloads (ix2.json / ix3.json, see
 * dump_lists.py and build_ix2_map.py) or off the design sheet. The mapping from
 * a payload action list to a hook attribute is in build_ix2_map.BEHAVIOURS, so
 * a change to the payload shows up as a build failure rather than as motion
 * that quietly stops matching the source.
 *
 * The one rule that governs the whole file: a reveal is an ANIMATION, never a
 * `transition`. Writing the played state as `transition: opacity …, transform …`
 * puts a transition SHORTHAND on the element and replaces whatever transition it
 * already had -- and `.btn-black`, `.btn-light` and `.third-button` all carry
 * their own `transition: all .2s`, so their hover would die the moment the card
 * scrolled into view. (Nuestudio and Puchix both shipped that bug.)
 */


/* =========================================================================
   1. Scroll reveals
   ========================================================================= */
/* IX2 wrote the rest state as inline `transform` / `filter` / `opacity` on 154
   elements. transform.py strips those (see BAKED_STYLE) and the class carries
   it instead, so the page still renders without scripting: `.js` is only set by
   the one-liner in <head>, so a reader with scripting off sees every element in
   its final state rather than a blank page. */
.js .reveal {
  opacity: 0;
  will-change: transform, opacity, filter;
}
.js .reveal.is-in {
  animation-duration: 700ms;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
/* "Slide Top 01/02/03" (a / a-6 / a-4): rise 60px, unblur 5px, fade in. */
@keyframes reveal-blur-up {
  from { opacity: 0; transform: translate3d(0, 60px, 0); filter: blur(5px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
}
/* "Hero Animation 01/02/03" (a-3 / a-79 / a-80): the same motion the other way
   up -- the element starts 20px HIGH and drops into place. */
@keyframes reveal-blur-down {
  from { opacity: 0; transform: translate3d(0, -20px, 0); filter: blur(5px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);     filter: blur(0); }
}
/* The stock `shrinkIn` preset: 1000ms outQuart, no blur. */
@keyframes reveal-shrink {
  from { opacity: 0; transform: scale3d(1.25, 1.25, 1); }
  to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
.js .reveal-blur-up.is-in { animation-name: reveal-blur-up; }
.js .reveal-blur-down.is-in { animation-name: reveal-blur-down; }
.js .reveal-shrink.is-in {
  animation-name: reveal-shrink;
  animation-duration: 1000ms;
  /* outQuart */
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* The delays IX2 kept on the action list rather than on the event: three for
   each family, which is the only thing that told the six lists apart. */
.js .reveal[data-reveal-delay="100"].is-in { animation-delay: 100ms; }
.js .reveal[data-reveal-delay="150"].is-in { animation-delay: 150ms; }
.js .reveal[data-reveal-delay="200"].is-in { animation-delay: 200ms; }
.js .reveal[data-reveal-delay="300"].is-in { animation-delay: 300ms; }
/* main.js removes `reveal`, the family class and `is-in` on `animationend`, so
   a played element carries no animation and no `will-change` -- and, crucially, nothing that could collide with a second animation or a hover transition. */


/* =========================================================================
   2. Hovers
   ========================================================================= */
/* a-21/a-22, a-9/a-11, a-40/a-38 -- "Nav Link" and "Footer Link".
   The rule wipes in from the left (width 0 -> 100%), and on the way out slides
   off to the right before being reset to zero width. `.link-line` is already
   `width: 0%` at rest in the design sheet, so only the played state is new. */
[data-hover="link-line"] .link-line {
  transform: translateX(0);
  transition: width 450ms ease, transform 450ms ease;
}
[data-hover="link-line"]:hover .link-line, [data-hover="link-line"]:focus-visible .link-line, [data-hover="link-line"]:focus-within .link-line {
  width: 100%;
  transform: translateX(0);
}
/* The "out" half of the pair moves the full-width rule off to the right. It can
   only be expressed on the element leaving :hover, which CSS cannot select, so
   main.js sets `.is-leaving` for the length of the animation. */
[data-hover="link-line"].is-leaving .link-line {
  width: 100%;
  animation: link-line-out 450ms ease forwards;
}
@keyframes link-line-out {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
/* a-15/a-17, a-73/a-74, a-81/a-82 -- the mega menu's rows.
   `#6c58ba` is the same swatch the design already uses for
   `.drop-item-link.w--current`, so the hover and the current page agree. */
[data-hover="drop-item"] .drop-item-link {
  transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-hover="drop-item"]:hover .drop-item-link, [data-hover="drop-item"]:focus-within .drop-item-link {
  color: #6c58ba;
}
/* a-31/a-32 -- "Third Btn". The arrow and the rule both start off to the left
   and slide in; on the way out the arrow leaves left and the rule leaves right, then both snap back for the next hover. `.third-button` is `overflow: hidden`
   in the design, which is what makes the slide read as a wipe. */
[data-hover="third-btn"] .arrow-wrap, [data-hover="third-btn"] .third-btn-line {
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-hover="third-btn"] .arrow-wrap { transform: translateX(-100%); }
[data-hover="third-btn"] .third-btn-line { transform: translateX(-100%); }
[data-hover="third-btn"]:hover .arrow-wrap, [data-hover="third-btn"]:focus-visible .arrow-wrap, [data-hover="third-btn"]:hover .third-btn-line, [data-hover="third-btn"]:focus-visible .third-btn-line {
  transform: translateX(0);
}
[data-hover="third-btn"].is-leaving .third-btn-line {
  animation: third-line-out 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes third-line-out {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
/* a-26/a-27 and a-29/a-30 -- "Hover In/Out" on `.btn-black` and `.btn-light`.
   A circle rises out of the bottom edge inside `.button---bg-inner` (which is
   anchored `bottom: 100%` of a panel sitting just below the button, so growing
   its height pushes the circle up INTO the button), the label inverts, and at
   the end the solid panel slides up to take over from the circle. Both halves
   are needed: the circle alone would leave the button half-filled. */
[data-hover^="btn-fill"] .button---bg-inner {
  height: 0%;
}
[data-hover^="btn-fill"] .button-bg-black, [data-hover^="btn-fill"] .button-bg-light {
  transform: translateY(0);
}
[data-hover^="btn-fill"] .button-text-2 {
  transition: color 200ms ease;
}
[data-hover^="btn-fill"]:hover .button---bg-inner, [data-hover^="btn-fill"]:focus-visible .button---bg-inner {
  animation: btn-fill-inner 300ms forwards;
}
[data-hover^="btn-fill"]:hover .button-bg-black, [data-hover^="btn-fill"]:focus-visible .button-bg-black, [data-hover^="btn-fill"]:hover .button-bg-light, [data-hover^="btn-fill"]:focus-visible .button-bg-light {
  animation: btn-fill-panel 300ms forwards;
}
/* 0-200ms: the circle grows to 110% on easeIn. 200-300ms: outCubic hands over
   to the panel and the circle collapses. */
@keyframes btn-fill-inner {
  0%   { height: 0%; animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  66%  { height: 110%; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  100% { height: 0%; }
}
@keyframes btn-fill-panel {
0%, 66% { transform: translateY(0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
100% { transform: translateY(-100%); }
}
/* The reverse: the panel drops back while the circle grows to cover, then the
   circle collapses. Same two phases, 100ms then 200ms. */
[data-hover^="btn-fill"].is-leaving .button---bg-inner {
  animation: btn-fill-inner-out 300ms forwards;
}
[data-hover^="btn-fill"].is-leaving .button-bg-black, [data-hover^="btn-fill"].is-leaving .button-bg-light {
  animation: btn-fill-panel-out 300ms forwards;
}
@keyframes btn-fill-inner-out {
0% { height: 0%; animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
33% { height: 110%; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
100% { height: 0%; }
}
@keyframes btn-fill-panel-out {
0% { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
33%, 100% { transform: translateY(0); }
}
/* `.btn-black` is white text on `--dark`; the circle that rises is `--light`, so the label has to become dark to stay readable. `.btn-light` is the mirror
   image -- dark text on transparent, a `--dark` panel rising -- and its border
   goes from `--strock` to `--dark` with it. */
[data-hover="btn-fill"]:hover .button-text-2.white, [data-hover="btn-fill"]:focus-visible .button-text-2.white {
  color: #0b1b2e;
}
[data-hover="btn-fill-light"]:hover, [data-hover="btn-fill-light"]:focus-visible {
  border-color: var(--dark);
}
[data-hover="btn-fill-light"]:hover .button-text-2, [data-hover="btn-fill-light"]:focus-visible .button-text-2 {
  color: var(--light);
}
/* a-33/a-34 -- "Footer Social". The icon rests at -45deg in the design sheet
   and levels out on hover. */
[data-hover="social-arrow"] .footer-social-ico {
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-hover="social-arrow"]:hover .footer-social-ico, [data-hover="social-arrow"]:focus-visible .footer-social-ico {
  transform: rotate(0deg);
}
/* a-35/a-36 -- "Back Icon". Two copies of the arrow sit in a 12px window, so
   moving the column 12px up rolls one out and the next in. */
[data-hover="back-to-top"] .back-icons {
  transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-hover="back-to-top"]:hover .back-icons, [data-hover="back-to-top"]:focus-visible .back-icons {
  transform: translateY(-12px);
}
/* a-41/a-43 -- the blog post's share chips. */
[data-hover="share-chip"] .blog-single-social-ico {
  transition: transform 450ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-hover="share-chip"] {
  transition: background-color 450ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-hover="share-chip"]:hover, [data-hover="share-chip"]:focus-visible {
  background-color: var(--strock);
}
[data-hover="share-chip"]:hover .blog-single-social-ico, [data-hover="share-chip"]:focus-visible .blog-single-social-ico {
  transform: scale(0.85);
}
/* a-44/a-45, a-48/a-49, a-50/a-51 -- three authored copies of one interaction:
   the card's photograph zooms and tilts. The card is `overflow: hidden`, so the
   tilt never shows a corner. */
[data-hover="img-zoom"] .global-img {
  transition: transform 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-hover="img-zoom"]:hover .global-img, [data-hover="img-zoom"]:focus-visible .global-img {
  transform: scale(1.125) rotate(3deg);
}
/* a-94/a-95 -- the gallery thumbs zoom without the tilt. */
[data-hover="thumb-zoom"] .works-gallery-thumb {
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-hover="thumb-zoom"]:hover .works-gallery-thumb, [data-hover="thumb-zoom"]:focus-visible .works-gallery-thumb {
  transform: scale(1.125);
}
/* a-91/a-92 -- the footer strip is greyscale until pointed at. IX2 held the
   rest state inline, which transform.py strips, so the class owns it now. */
[data-hover="ungrey"] .global-img {
  filter: grayscale(100%);
  transition: filter 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-hover="ungrey"]:hover .global-img, [data-hover="ungrey"]:focus-visible .global-img {
  filter: grayscale(0%);
}
/* =========================================================================
   3. Endless belts
   ========================================================================= */
/* a-23, a-37, a-65, a-66. Each is a 25s or 15s linear loop that IX2 restarted
   from a third action group. The markup already ships the track twice, so the
   belt only has to travel exactly one track's length and start again -- no
   cloning, and nothing to measure at runtime. */
[data-marquee] { overflow: hidden; }
[data-marquee] .marquee-track {
  animation-duration: 25s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
[data-marquee="announcement"] .marquee-track, [data-marquee="footer-gallery"] .marquee-track {
  animation-name: marquee-x;
}
@keyframes marquee-x {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* The CTA's two columns run vertically and in opposite directions, which is the
   whole point of `a-65` and `a-66` being two lists on two elements. */
[data-marquee="cta-up"] .marquee-track, [data-marquee="cta-down"] .marquee-track {
  animation-duration: 15s;
}
[data-marquee="cta-up"] .marquee-track { animation-name: marquee-up; }
[data-marquee="cta-down"] .marquee-track { animation-name: marquee-down; }
@keyframes marquee-up {
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}
@keyframes marquee-down {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
/* The belts start when they scroll into view, exactly as the SCROLL_INTO_VIEW
   trigger did, and stop again off-screen so an idle tab is not repainting. */
[data-marquee]:not(.is-running) .marquee-track {
  animation-play-state: paused;
}
/* =========================================================================
   4. Navigation
   ========================================================================= */
/* The mobile panel. `.nav-overlay` is `display: contents` above 991px (see
   framework.hand.css) so the desktop layout is untouched. */
.menu-icon span { transition: opacity 150ms ease; }
.menu-button.is-open .menu-icon::before {
  transform: translateY(220%) rotate(45deg);
}
.menu-button.is-open .menu-icon::after {
  transform: translateY(-220%) rotate(-45deg);
}
.menu-button.is-open .menu-icon span { opacity: 0; }
.menu-icon::before, .menu-icon::after {
  transition: transform 300ms ease;
}
/* a-19/a-20 and a-83/a-84 -- "Drop Open/Close". The caret flips with the panel.
   The design gives `.nav-down-arrow` a 16x18 box, so the rotation needs an
   explicit origin to stay centred in it. */
.nav-down-arrow {
  transform-origin: 50% 50%;
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-disclosure="menu"] > button[aria-expanded="true"] .nav-down-arrow {
  transform: rotate(180deg);
}
/* The panel itself. `.home-drop-list.mega.w--open { display: flex }` in the
   design is now `.is-open`, which is why the `.w--open` -> `.is-open` remap in
   build_css is load-bearing and not cosmetic: without it the panel never leaves
   `display: none` and the whole mega menu is unreachable. */
[data-disclosure="menu"] > [id^="menu-panel"] {
  opacity: 0;
  transition: opacity 200ms ease;
}
[data-disclosure="menu"] > [id^="menu-panel"].is-open {
  opacity: 1;
}
/* =========================================================================
   5. The FAQ accordion
   ========================================================================= */
/* a-52/a-53 -- "Faq Show/Hide 7". Three things move together: the answer panel
   from height 0 to its content height, the caret through 180deg, and the ROW's
   background from `--light` to `--bg`. The last one is why the payload targets
   PARENT: the colour belongs to `.faq-body`, not to the row that was clicked. */
/* `display` is NOT the mechanism here. framework.hand.css restates Webflow's
   `.w-dropdown-list { display: none }` for both dropdown families, but an FAQ
   answer is animated by HEIGHT, and a `display: none` element has no content
   height to animate to -- `scrollHeight` reads 0 and the answer never opens.
   The design already re-declares this panel `position: static` for exactly that
   reason, so it stays in flow and the height does the hiding. */
[data-disclosure="faq"] > [id^="faq-panel"] {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 400ms ease;
}
.careet-down-icon {
  transform-origin: 50% 50%;
  transition: transform 400ms ease;
}
[data-disclosure="faq"] > button[aria-expanded="true"] .careet-down-icon {
  transform: rotate(180deg);
}
.faq-body {
  transition: background-color 400ms ease;
}
.faq-body.is-open {
  background-color: var(--bg);
}
/* Without scripting the panels are open rather than sealed shut, so the answers
   are still readable. */
html:not(.js) [data-disclosure="faq"] > [id^="faq-panel"] {
  height: auto;
}
/* =========================================================================
   6. Tab sets
   ========================================================================= */
.tabset-pane { display: none; }
.tabset-pane.is-active { display: block; }
/* a-87..a-90 -- "Content Tap Open/Close". One widget, authored twice: the
   >=768px pair also nudges the active link 20px right and the <=767px pair does
   not. Gating the HOOK on a breakpoint would have left the tab set inert at the
   other width, so the hook is ungated and the nudge is the media query. */
.content-tab-link .content-info-item-braket {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.content-tab-link .content-info-items {
  color: var(--gray-02);
  transition: color 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.content-tab-link.is-active .content-info-item-braket { opacity: 1; }
.content-tab-link.is-active .content-info-items { color: var(--light); }
.content-tab-link {
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media screen and (min-width: 768px) {
.content-tab-link.is-active { transform: translateX(20px); }
}
/* =========================================================================
   7. The testimonial slider
   ========================================================================= */
/* `data-animation="slide"`, 500ms, infinite, no autoplay -- the export's own
   settings. The track is the mask's inner row; the slides keep the framework's
   `inline-block` geometry from framework.hand.css. */
[data-slider] .slider-track {
  position: relative;
}
/* The second arrow is meant to be hidden and, in the source, is not.
 *
 * The design puts `.hide` on it -- and `.hide { display: none }` is defeated by
 * the design's own later `.testimonial-arrow { display: flex }`, which scores
 * the same (0, 1, 0) and wins on order. The author noticed enough to patch it at
 * one breakpoint (`.testimonial-arrow.hide { display: none }` inside the 479px
 * query) but not above it, so on the published site a bare chevron sits on top
 * of the "Next" label at the same `inset: 0% 0% auto auto`. Two controls in one
 * place, one of them unlabelled.
 *
 * `.hide` on this element is unambiguous intent, so it is honoured at every
 * width. The slider keeps the single labelled control the design drew. */
.testimonial-arrow.hide {
  display: none;
}
[data-slider] .slide {
  transition: transform 500ms ease, opacity 500ms ease;
}
[data-slider] .slide:not(.is-active) {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
[data-slider] .slide.is-active {
  opacity: 1;
}
html:not(.js) [data-slider] .slide:not(.is-active) {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
/* =========================================================================
   8. Scroll-scrubbed sections
   ========================================================================= */
/* Five SCROLLING_IN_VIEW lists. main.js measures each section against the
   viewport and writes one custom property, `--p`, from 0 to 1; every value
   below is interpolated from that rather than from a scroll listener per
   element. `@property` makes `--p` animatable and, more importantly, typed, so
   `calc()` on it works in every engine that supports it. */
@property --p {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
/* THREE of the five scrubs are `main`-only in the payload (`data-scrub-mq`), and the CSS has to honour that as well as main.js does. `--p` has an
   `initial-value: 0`, so a rule left ungated still resolves -- and `about-hero`
   resolves to an ABSOLUTE 55% width and 342px height, overriding the design's
   own responsive values. That is exactly +102px on the About hero at 479px, where the design asks for 240px. (Lenkrio shipped the mirror image of this
   bug by ignoring `mediaQueries` in the JS.) */
@media screen and (min-width: 992px) {
  /* a-69 "About Hero": the body widens from 55% to 100% and the image grows
     from 342px to 747px between 14% and 60% of the section's travel. */
  [data-scrub="about-hero"] .about-hero-body {
    width: calc(55% + 45% * clamp(0, (var(--p) - 0.14) / 0.46, 1));
  }

  [data-scrub="about-hero"] .about-body-thumb {
    height: calc(342px + 405px * clamp(0, (var(--p) - 0.14) / 0.46, 1));
  }

  /* a-71 "Content Animation": the card stack travels its own height. */
  [data-scrub="content"] .content-card-wrap {
    transform: translateY(calc(-100% * clamp(0, (var(--p) - 0.3) / 0.35, 1)));
  }

  /* a-96 "Shop Category Scrolling": the row pans 28vw. */
  [data-scrub="shop-category"] .frame {
    transform: translateX(calc(-28vw * clamp(0, (var(--p) - 0.3) / 0.5, 1)));
  }
}
/* a-70 "Gallery Animation" runs at every width: the caption holds, then fades
   out over one percent of the travel while the gallery lifts 10%. */
[data-scrub="gallery"] .gallery-content-title {
  opacity: clamp(0, (0.82 - var(--p)) / 0.01, 1);
}
[data-scrub="gallery"] .gallery-content {
  transform: translateY(calc(-10% * clamp(0, (var(--p) - 0.25) / 0.57, 1)));
}
/* a-93 "Why Choose": five cards stacked on top of each other, each visible for
   a twelfth of the travel and swapped in a single percent. main.js writes
   `--card` (1..5) rather than five separate opacities, because the payload's
   crossfade is a hard cut: at 43% card 1 goes to 0 and card 2 to 1 in the same
   keyframe. */
[data-scrub="why-choose"] .why-choose-card {
  opacity: 0;
  transition: opacity 120ms linear;
}
/* Until the first frame writes `data-card`, show the first card. Without this
   the whole section is five invisible cards stacked on each other for however
   long the first `requestAnimationFrame` takes -- and forever in a tab that is
   never brought to the front, because rAF does not run there. Card 1 is what
   the payload shows at rest anyway: it is on top of the z-stack and holds from
   0 to 43% of the travel. */
[data-scrub="why-choose"]:not([data-card]) .why-choose-card._01 {
  opacity: 1;
}
[data-scrub="why-choose"][data-card="1"] .why-choose-card._01, [data-scrub="why-choose"][data-card="2"] .why-choose-card._02, [data-scrub="why-choose"][data-card="3"] .why-choose-card._03, [data-scrub="why-choose"][data-card="4"] .why-choose-card._04, [data-scrub="why-choose"][data-card="5"] .why-choose-card._05 {
  opacity: 1;
}
/* Without scripting every scrubbed section rests at its finished state, which
   is the readable one: the About body full width, the cards in view. */
html:not(.js) [data-scrub] { --p: 1; }
html:not(.js) [data-scrub="gallery"] .gallery-content-title { opacity: 1; }
html:not(.js) [data-scrub="why-choose"] .why-choose-card._05 { opacity: 1; }
/* =========================================================================
   9. The statistics counter
   ========================================================================= */
/* a-55. Each digit is a column of numerals inside a `.statistics-number-wrap`
   that is exactly one digit tall and `overflow: hidden`; the upper column rolls
   down from +400% and the lower up from -400%, so the pair lands on the value.
   The payload's 400% is a percentage of the COLUMN, not of the window, which is
   the trap that made Trenox's footer roll overshoot by four times. */
[data-counter] .statistics-number-box {
  transition: transform 1500ms ease;
}
[data-counter]:not(.is-in) .statistics-number-box.upper {
  transform: translateY(400%);
}
[data-counter]:not(.is-in) .statistics-number-box.lower {
  transform: translateY(-400%);
}
[data-counter].is-in .statistics-number-box {
  transform: translateY(0);
}
/* =========================================================================
   10. The gallery's pointer-tracking caption
   ========================================================================= */
/* a-64 "See Case Point": a MOUSE_MOVE continuous list, x from -120% to 60% and
   y from -200% to 200% across the card. main.js writes `--mx` / `--my` as 0..1
   and the transform is interpolated here. */
[data-cursor="works"] .works-gallery-point {
  transform: translate(calc(-120% + 180% * var(--mx, 0.5)),
                       calc(-200% + 400% * var(--my, 0.5)));
}
/* =========================================================================
   11. IX3 -- the split-text scrub
   ========================================================================= */
/* The export loads GSAP, SplitText and ScrollTrigger from Webflow's CDN for
   exactly one effect: `.case-study-inside` and `.case-study-inside-02` have
   their text split into characters, and each character's opacity is scrubbed
   from 30% to 100% as the block crosses the viewport (ix3.json, timelines
   t-839eaed2 and t-cf014326, stagger 0.3).
   main.js does the split in about forty lines and drives it from the same
   scroll progress as the other scrubs -- 180 KB of library for one paragraph
   is not a trade a template should make.
   The export also ships `html.w-mod-js:not(.w-mod-ix3) :is(.case-study-inside, .case-study-inside-02) { visibility: hidden !important }`, which hides the
   paragraph until the library has loaded. Nothing here needs hiding, so that
   rule is not carried over. */
[data-split] .split-char {
  opacity: var(--char-opacity, 1);
  will-change: opacity;
}
/* =========================================================================
   12. The cart
   ========================================================================= */
/* Webflow's Ecommerce runtime drove these four states with an inline
   `display: none` that it wrote and removed. transform.py strips those inline
   styles -- IX2 uses inline `display` for its own rest states and the two
   cannot be told apart in the markup -- so the states are class-driven here.
   Dropping the inline style WITHOUT restating the rule is how a cart drawer
   ends up permanently open over the page: `--cartType-modal` already says
   `display: flex`, and it is `position: fixed; inset: 0`. */
.cart-modal { display: none; }
.cart-modal.is-open { display: flex; }
.cart-form { display: none; }
.cart-form.is-visible { display: flex; }
.cart-empty { display: none; }
.cart-empty.is-visible { display: flex; }
.cart-error-state { display: none; }
.cart-error-state.is-visible { display: block; }
/* "Billing address same as shipping" starts CHECKED, and the runtime hid the
   billing form with an inline `display: none` while it stayed checked.
   transform.py strips that inline style with the rest of the runtime's state, so the rule is restated here -- keyed on the checkbox through `:has()`, because the form is a sibling of the checkbox's WRAPPER, not of the checkbox, which no combinator can cross. Without this the checkout renders a second
   full address block nobody asked for, 470px tall. */
.wf-commerce-commercecheckoutformcontainer:has(
    .wf-commerce-commercecheckoutbillingaddresstogglecheckbox:checked)
  .wf-commerce-commercecheckoutbillingaddresswrapper {
  display: none;
}
/* The quantity field inside a line item: the export ships it `.hide`, so the
   drawer shows the quantity as part of the price line instead. Restated here
   because `.hide` is a design class that other things use too. */
.wf-commerce-commercecartitem .wf-commerce-commercecartquantity.hide {
  display: none;
}
/* =========================================================================
   13. Forms
   ========================================================================= */
/* The demo handler swaps the form for the export's own success panel. Both
   states ship in the markup; only which one is shown changes. */
[data-form-done], [data-form-fail] { display: none; }
[data-form-done].is-shown, [data-form-fail].is-shown { display: block; }
/* =========================================================================
   14. Reduced motion
   ========================================================================= */
/* Everything above is decoration. A reader who asks for less motion gets the
   finished state immediately -- including the reveals, which must NOT simply be
   disabled: `.reveal` is `opacity: 0`, so removing the animation without
   removing the rest state would leave the page blank. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    animation: none !important;
    will-change: auto;
  }

  [data-marquee] .marquee-track,
  [data-marquee].is-running .marquee-track {
    animation: none;
  }

  [data-counter] .statistics-number-box,
  [data-counter]:not(.is-in) .statistics-number-box.upper,
  [data-counter]:not(.is-in) .statistics-number-box.lower {
    transform: none;
    transition: none;
  }

  [data-split] .split-char { opacity: 1; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}