[is=xo-lazyload],
.xo-background-lazyload,
.xo-lazyload,
.xo-lazyloaded {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto
}

[is=xo-lazyload][style*=--fallback],
.xo-background-lazyload[style*=--fallback],
.xo-lazyload[style*=--fallback],
.xo-lazyloaded[style*=--fallback] {
  background-image: var(--fallback);
  background-size: cover
}

.xo-background-lazyload {
  height: 100%
}

[data-xo-lazyloaded] {
  position: relative;
  z-index: 1
}

.xo-lazyload-overlay {
  position: absolute;
  inset: 0;
  z-index: 1
}

.xo-lazyload-overlay:empty {
  backdrop-filter: blur(30px);
  will-change: backdrop-filter
}

[xb-href],
[xo-href] {
  cursor: pointer
}

xo-parallax-scroll {
  will-change: transform
}

xo-parallax-scroll[xo-keyframes*=groupImg] img {
  opacity: 1;
  will-change: opacity
}

xo-parallax-scroll[xo-keyframes*=groupImg] img+img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0
}

.xo-navigate-smooth {
  animation: xoNavigateSmooth both .3s ease
}

@keyframes xoNavigateSmooth {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

xo-marquee {
  --xo-duration: 10s;
  display: flex;
  flex-wrap: nowrap;
  transform: translate3d(var(--xo-marquee-scroll, 0px), 0, 0)
}

xo-marquee[xo-rtl]:not([xo-rtl=false]) {
  direction: rtl
}

xo-marquee[xo-pause-on-hover]:not([xo-pause-on-hover=false]):hover xo-marquee-item,
xo-marquee[xo-paused]:not([xo-paused=false]) xo-marquee-item {
  animation-play-state: paused !important
}

xo-marquee[xo-ready] xo-marquee-item {
  animation: xo-marquee var(--xo-marquee-duration) linear infinite
}

@keyframes xo-marquee {
  0% {
    transform: translate3d(var(--xo-marquee-from), 0, 0)
  }

  to {
    transform: translate3d(var(--xo-marquee-to), 0, 0)
  }
}

xo-marquee-item {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  will-change: transform
}

xo-marquee-scroll-transform,
xo-svg-marquee {
  display: block
}

xo-toggle {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: inherit;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  overflow: visible
}

xo-toggle::backdrop {
  display: none
}

xo-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0 !important;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: inherit
}

xo-modal::backdrop {
  display: none
}

xo-modal:focus-visible {
  outline: none !important;
  box-shadow: none !important
}

xo-modal img {
  vertical-align: middle
}

xo-modal xo-modal-trigger {
  display: inline-block
}

xo-modal[xo-current-disabled]:not([xo-current-disabled=false]) {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  visibility: visible;
  overflow: visible;
  z-index: auto
}

xo-modal[xo-current-disabled]:not([xo-current-disabled=false]) xo-modal-trigger {
  display: none
}

xo-modal[xo-scroll-disabled]:not([xo-current-disabled=false]) {
  overflow: visible
}

xo-modal xo-carousel-slide {
  pointer-events: none;
  visibility: hidden
}

xo-modal[xo-active]:not([xo-active=false]) xo-carousel-slide {
  pointer-events: auto;
  visibility: visible
}

xo-modal-trigger {
  display: inline-block
}

xo-modal-pan {
  display: block;
  width: fit-content;
  overflow: hidden;
  touch-action: pinch-zoom
}

body.xo-modal-open {
  overflow: hidden;
  padding-right: var(--scroll-bar-width)
}

xo-modal [xo-backdrop-cursor] {
  width: 100%;
  height: 100%;
  cursor: none
}

xo-scroll-x {
  display: block;
  position: relative;
  overflow: clip
}

xo-scroll-x::part(inner) {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh
}

xo-scroll-x xo-scroll-xy-item,
xo-scroll-x xo-scroll-x-item {
  display: block;
  height: 100%;
  overflow: hidden;
  z-index: 9
}

xo-scroll-x xo-scroll-xy-item~xo-scroll-xy-item,
xo-scroll-x xo-scroll-xy-item~xo-scroll-x-item,
xo-scroll-x xo-scroll-x-item~xo-scroll-xy-item,
xo-scroll-x xo-scroll-x-item~xo-scroll-x-item {
  position: absolute;
  top: 0;
  right: 0;
  width: 0
}

xo-scroll-y {
  display: block;
  position: relative;
  overflow: clip
}

xo-scroll-y::part(inner) {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh
}

xo-scroll-y xo-scroll-xy-item,
xo-scroll-y xo-scroll-y-item {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 9
}

xo-scroll-y xo-scroll-xy-item~xo-scroll-xy-item,
xo-scroll-y xo-scroll-xy-item~xo-scroll-y-item,
xo-scroll-y xo-scroll-y-item~xo-scroll-xy-item,
xo-scroll-y xo-scroll-y-item~xo-scroll-y-item {
  position: absolute;
  top: 100%;
  right: 0;
  height: 100%
}

xo-toast-portal {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  padding: 10px;
  max-width: none;
  max-height: none;
  border: 0 !important;
  margin: 0;
  background-color: transparent;
  color: inherit;
  inset: auto;
  pointer-events: none;
  overflow: visible
}

xo-toast-portal * {
  pointer-events: auto
}

xo-toast-portal[xo-placement^=top-] {
  top: 0
}

xo-toast-portal[xo-placement^=bottom-] {
  bottom: 0
}

xo-toast-portal[xo-placement$=-left] {
  left: 0
}

xo-toast-portal[xo-placement$=-center] {
  left: 50%;
  transform: translate(-50%);
  align-items: center
}

xo-toast-portal[xo-placement$=-right] {
  right: 0;
  align-items: flex-end
}

xo-toast-portal xo-toast {
  display: inline-block;
  width: fit-content;
  max-width: calc(100vw - 20px)
}

xo-toast {
  position: relative;
  display: none
}

xo-toast-close-button {
  position: absolute;
  padding: 8px;
  cursor: pointer;
  color: #b9b9b9;
  display: flex;
  align-items: center
}

xo-toast-close-button[xo-placement^=top-] {
  top: 0
}

xo-toast-close-button[xo-placement^=bottom-] {
  bottom: 0
}

xo-toast-close-button[xo-placement$=-left] {
  left: 0
}

xo-toast-close-button[xo-placement^=center-] {
  top: 50%;
  transform: translateY(-50%)
}

xo-toast-close-button[xo-placement$=-right] {
  right: 0
}

xo-toast-close-button[xo-placement=top] {
  top: 0
}

xo-toast-close-button svg {
  fill: currentColor;
  width: 20px;
  height: 20px
}

xo-popover {
  position: fixed;
  z-index: 99;
  display: block;
  width: fit-content;
  visibility: hidden;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  background-color: transparent;
  overflow: visible;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto
}

xo-popover::backdrop {
  display: none
}

xo-popover[xo-current-disabled]:not([xo-current-disabled=false]) {
  position: static;
  width: auto;
  visibility: visible;
  z-index: auto
}

xo-popover xo-carousel-slide {
  pointer-events: none;
  visibility: hidden
}

xo-popover[xo-active]:not([xo-active=false]) xo-carousel-slide {
  pointer-events: auto;
  visibility: visible
}

xo-popover-trigger {
  display: inline-block
}

xo-builder-popover-content {
  display: block;
  position: absolute;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--xo-popover-duration)
}

xo-builder-popover {
  display: inline-block;
  position: relative
}

xo-builder-popover[xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-open]:not([xo-open=false]) xo-builder-popover-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none !important
}

xo-builder-popover[xo-animate=zoom] xo-builder-popover-content {
  transform: scale(.5)
}

xo-builder-popover[xo-animate=fade-up] xo-builder-popover-content {
  transform: translate3d(0, 20%, 0)
}

xo-builder-popover[xo-animate=fade-down] xo-builder-popover-content {
  transform: translate3d(0, -20%, 0)
}

xo-builder-popover[xo-animate=fade-left] xo-builder-popover-content {
  transform: translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-animate=fade-right] xo-builder-popover-content {
  transform: translate3d(20%, 0, 0)
}

xo-builder-popover[xo-animate=none] xo-builder-popover-content {
  transition: none !important
}

xo-builder-popover[xo-placement=top-left] xo-builder-popover-content {
  bottom: 100%;
  left: 0
}

xo-builder-popover[xo-placement=top-center] xo-builder-popover-content {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%)
}

xo-builder-popover[xo-placement=top-center][xo-animate=zoom] xo-builder-popover-content {
  transform: translate(-50%) scale(.5)
}

xo-builder-popover[xo-placement=top-center][xo-animate=fade-up] xo-builder-popover-content {
  transform: translate(-50%) translate3d(0, 20%, 0)
}

xo-builder-popover[xo-placement=top-center][xo-animate=fade-down] xo-builder-popover-content {
  transform: translate(-50%) translate3d(0, -20%, 0)
}

xo-builder-popover[xo-placement=top-center][xo-animate=fade-left] xo-builder-popover-content {
  transform: translate(-50%) translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-placement=top-center][xo-animate=fade-right] xo-builder-popover-content {
  transform: translate(-50%) translate3d(20%, 0, 0)
}

xo-builder-popover[xo-placement=top-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
  transform: translate(-50%) scale(1) !important
}

xo-builder-popover[xo-placement=top-right] xo-builder-popover-content {
  bottom: 100%;
  right: 0
}

xo-builder-popover[xo-placement=bottom-left] xo-builder-popover-content {
  top: 100%;
  left: 0
}

xo-builder-popover[xo-placement=bottom-center] xo-builder-popover-content {
  top: 100%;
  left: 50%;
  transform: translate(-50%)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=zoom] xo-builder-popover-content {
  transform: translate(-50%) scale(.5)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-up] xo-builder-popover-content {
  transform: translate(-50%) translate3d(0, 20%, 0)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-down] xo-builder-popover-content {
  transform: translate(-50%) translate3d(0, -20%, 0)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-left] xo-builder-popover-content {
  transform: translate(-50%) translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-right] xo-builder-popover-content {
  transform: translate(-50%) translate3d(20%, 0, 0)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
  transform: translate(-50%) scale(1) !important
}

xo-builder-popover[xo-placement=bottom-right] xo-builder-popover-content {
  top: 100%;
  right: 0
}

xo-builder-popover[xo-placement=left-top] xo-builder-popover-content {
  top: 0;
  right: 100%
}

xo-builder-popover[xo-placement=left-center] xo-builder-popover-content {
  top: 50%;
  right: 100%;
  transform: translateY(-50%)
}

xo-builder-popover[xo-placement=left-center][xo-animate=zoom] xo-builder-popover-content {
  transform: translateY(-50%) scale(.5)
}

xo-builder-popover[xo-placement=left-center][xo-animate=fade-up] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(0, 20%, 0)
}

xo-builder-popover[xo-placement=left-center][xo-animate=fade-down] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(0, -20%, 0)
}

xo-builder-popover[xo-placement=left-center][xo-animate=fade-left] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-placement=left-center][xo-animate=fade-right] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(20%, 0, 0)
}

xo-builder-popover[xo-placement=left-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
  transform: translateY(-50%) scale(1) !important
}

xo-builder-popover[xo-placement=left-bottom] xo-builder-popover-content {
  bottom: 0;
  right: 100%
}

xo-builder-popover[xo-placement=right-top] xo-builder-popover-content {
  top: 0;
  left: 100%
}

xo-builder-popover[xo-placement=right-center] xo-builder-popover-content {
  top: 50%;
  left: 100%;
  transform: translateY(-50%)
}

xo-builder-popover[xo-placement=right-center][xo-animate=zoom] xo-builder-popover-content {
  transform: translateY(-50%) scale(.5)
}

xo-builder-popover[xo-placement=right-center][xo-animate=fade-up] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(0, 20%, 0)
}

xo-builder-popover[xo-placement=right-center][xo-animate=fade-down] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(0, -20%, 0)
}

xo-builder-popover[xo-placement=right-center][xo-animate=fade-left] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-placement=right-center][xo-animate=fade-right] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(20%, 0, 0)
}

xo-builder-popover[xo-placement=right-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
  transform: translateY(-50%) scale(1) !important
}

xo-builder-popover[xo-placement=right-bottom] xo-builder-popover-content {
  bottom: 0;
  left: 100%
}

xo-tooltip {
  display: block;
  width: fit-content
}

xo-tooltip-content {
  position: absolute;
  z-index: 9999;
  display: block;
  width: fit-content;
  pointer-events: none;
  background-color: #111;
  color: #fff;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 3px;
  visibility: hidden;
  transition-delay: .1s
}

xo-tooltip-content[xo-active]:not([xo-active=false]) {
  visibility: visible
}

xo-tooltip-content[xo-animate=fade] {
  opacity: 0
}

xo-tooltip-content[xo-animate=fade][xo-active]:not([xo-active=false]) {
  opacity: 1
}

xo-tooltip-content[xo-animate=fade-down] {
  opacity: 0;
  transform: translate3d(0, -20px, 0)
}

xo-tooltip-content[xo-animate=fade-down][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translateZ(0)
}

xo-tooltip-content[xo-animate=fade-up] {
  opacity: 0;
  transform: translate3d(0, 20px, 0)
}

xo-tooltip-content[xo-animate=fade-up][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translateZ(0)
}

xo-tooltip-content[xo-animate=fade-left] {
  opacity: 0;
  transform: translate3d(20px, 0, 0)
}

xo-tooltip-content[xo-animate=fade-left][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translateZ(0)
}

xo-tooltip-content[xo-animate=fade-right] {
  opacity: 0;
  transform: translate3d(-20px, 0, 0)
}

xo-tooltip-content[xo-animate=fade-right][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translateZ(0)
}

xo-tooltip-content[xo-animate=zoom] {
  opacity: 0;
  transform: scale(.4)
}

xo-tooltip-content[xo-animate=zoom][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: scale(1)
}

xo-tooltip-content:after {
  content: "";
  border: solid transparent;
  border-width: 6px;
  border-top-color: #111;
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translate(-50%)
}

xo-tooltip-content[xo-placement=top-left]:after {
  left: 20px;
  transform: none
}

xo-tooltip-content[xo-placement=top-right]:after {
  left: auto;
  right: 20px;
  transform: none
}

xo-tooltip-content[xo-placement^=bottom-]:after {
  top: auto;
  bottom: calc(100% - 1px);
  transform: translate(-50%);
  border-color: transparent;
  border-bottom-color: #111
}

xo-tooltip-content[xo-placement=bottom-center]:after {
  left: 50%
}

xo-tooltip-content[xo-placement=bottom-left]:after {
  left: 20px;
  transform: none
}

xo-tooltip-content[xo-placement=bottom-right]:after {
  left: auto;
  right: 20px;
  transform: none
}

xo-tooltip-content[xo-placement^=left-]:after {
  left: calc(100% - 1px);
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent;
  border-left-color: #111
}

xo-tooltip-content[xo-placement^=right-]:after {
  left: auto;
  right: calc(100% - 1px);
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent;
  border-right-color: #111
}

xo-collapse {
  display: block;
  height: 0;
  overflow: hidden;
  will-change: height
}

xo-collapse-trigger {
  display: block
}

xo-tabs {
  position: relative;
  display: block
}

xo-tabs-trigger {
  display: block;
  cursor: pointer
}

xo-tabs-content {
  position: relative;
  display: flex;
  flex-direction: column
}

xo-tabs-pane {
  position: absolute;
  width: 100%;
  display: block;
  visibility: hidden
}

xo-tabs-pane[xo-active]:not([xo-active=false]) {
  position: static;
  visibility: visible
}

[data-xb-section-id] xo-tabs-pane {
  position: static;
  width: 100%;
  display: none;
  visibility: visible
}

[data-xb-section-id] xo-tabs-pane[xo-active]:not([xo-active=false]) {
  display: block
}

xo-tabs-active {
  display: block;
  position: absolute;
  will-change: transform, width
}

xo-parallax,
[xo-parallax] {
  position: relative;
  display: block
}

xo-parallax-scroll {
  display: block;
  background-size: cover
}

xo-parallax-scroll:empty {
  width: auto
}

:where(xo-parallax-scroll[xo-fit-content]:not([xo-fit-content=false])) {
  width: fit-content
}

xo-parallax-hover {
  display: block;
  width: fit-content
}

xo-parallax-hover:empty {
  width: auto
}

xo-carousel,
xo-carousel-thumbnail {
  position: relative;
  display: block;
  user-select: none
}

xo-carousel[xo-vertical] xo-carousel-list,
xo-carousel-thumbnail[xo-vertical] xo-carousel-list {
  flex-direction: column;
  height: 100%;
  touch-action: pan-x
}

xo-carousel[xo-overflow=hidden] xo-carousel-inner,
xo-carousel-thumbnail[xo-overflow=hidden] xo-carousel-inner {
  overflow: hidden
}

xo-carousel[xo-overflow=visible] xo-carousel-inner,
xo-carousel-thumbnail[xo-overflow=visible] xo-carousel-inner {
  overflow: visible
}

xo-carousel[xo-rtl]:not([xo-rtl=false]),
xo-carousel-thumbnail[xo-rtl]:not([xo-rtl=false]) {
  direction: rtl
}

xo-carousel-inner {
  position: relative;
  z-index: 9;
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  overflow: hidden
}

xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) [xo-carousel-slide],
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) [xo-carousel-slide],
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) [xo-carousel-slide],
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) [xo-carousel-slide],
xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) [xo-carousel-slide],
xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) [xo-carousel-slide] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  visibility: hidden
}

xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  visibility: visible;
  z-index: 9
}

xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) [xo-carousel-slide],
xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) [xo-carousel-slide] {
  opacity: 0;
  transition: var(--xo-speed)
}

xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  opacity: 1
}

xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) [xo-carousel-slide],
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) [xo-carousel-slide],
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) [xo-carousel-slide] {
  transition: var(--xo-speed)
}

xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  opacity: 1
}

xo-carousel-thumbnail {
  display: block
}

xo-carousel-thumbnail xo-carousel-slide,
xo-carousel-thumbnail [xo-carousel-slide] {
  cursor: pointer
}

xo-carousel-list {
  display: flex;
  flex-direction: row;
  touch-action: pan-y;
  will-change: transform;
  justify-content: space-between;
}

xo-carousel xo-carousel-slide,
xo-carousel [xo-carousel-slide] {
  width: calc(100% / var(--xo-per-view) + var(--xo-gap) / var(--xo-per-view));
  padding-inline-end: var(--xo-gap);
  flex-shrink: 0
}

@keyframes xo-carousel-mask {
  0% {
    mask-position: 100% 0
  }

  to {
    mask-position: 0% 0
  }
}

[xo-type=nature][xo-mask-initialized] xo-carousel-slide[xo-visible]:not([xo-visible=false]),
[xo-type=nature][xo-mask-initialized] [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  mask-image: var(--xo-mask);
  mask-size: 2300% 100%;
  animation: xo-carousel-mask var(--xo-speed, .2s) steps(22) forwards
}

[xo-type=water][xo-mask-initialized] xo-carousel-slide[xo-visible]:not([xo-visible=false]),
[xo-type=water][xo-mask-initialized] [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  mask-image: var(--xo-mask);
  mask-size: 7100% 100%;
  animation: xo-carousel-mask var(--xo-speed, .2s) steps(70) forwards
}

[xo-type=urban][xo-mask-initialized] xo-carousel-slide[xo-visible]:not([xo-visible=false]),
[xo-type=urban][xo-mask-initialized] [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  mask-image: var(--xo-mask);
  mask-size: 3000% 100%;
  animation: xo-carousel-mask var(--xo-speed, .2s) steps(29) forwards
}

xo-carousel-thumbnail[xo-vertical] xo-carousel-slide,
xo-carousel-thumbnail[xo-vertical] [xo-carousel-slide],
xo-carousel[xo-vertical] xo-carousel-slide,
xo-carousel[xo-vertical] [xo-carousel-slide] {
  width: auto;
  height: calc(100% / var(--xo-per-view) + var(--xo-gap) / var(--xo-per-view));
  padding-bottom: var(--xo-gap);
  padding-inline-end: 0
}

xo-carousel-prev,
xo-carousel-next {
  display: inline-block;
  cursor: pointer;
  user-select: none
}

xo-carousel-prev[xo-hide],
xo-carousel-next[xo-hide] {
  display: none
}

xo-carousel-pagination {
  display: flex;
  align-items: center
}

xo-carousel-bullet {
  display: flex;
  cursor: pointer
}

xo-carousel-dynamic-bullets {
  display: block;
  overflow: hidden
}

xo-carousel-filter-effect {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  pointer-events: none;
  isolation: isolate;
  opacity: 0
}

xo-carousel-filter-effect[xo-type=wind] {
  width: 200%
}

xo-carousel-filter-effect[xo-type=wind][xo-effect=next] {
  animation: xo-carousel-filter-effect-next var(--xo-speed, .2s) forwards
}

@keyframes xo-carousel-filter-effect-next {
  0% {
    transform: translateZ(0);
    opacity: 0
  }

  30% {
    opacity: 1
  }

  to {
    transform: translate3d(-50%, 0, 0);
    opacity: 0
  }
}

xo-carousel-filter-effect[xo-type=wind][xo-effect=prev] {
  animation: xo-carousel-filter-effect-prev var(--xo-speed, .2s) forwards
}

@keyframes xo-carousel-filter-effect-prev {
  0% {
    transform: translate3d(-50%, 0, 0);
    opacity: 0
  }

  30% {
    opacity: 1
  }

  to {
    transform: translateZ(0);
    opacity: 0
  }
}

xo-carousel-pagination-progress {
  display: block
}

xo-range {
  position: relative;
  display: block;
  height: calc(var(--size) * 1px)
}

xo-range input[type=range] {
  display: block;
  margin: 0;
  padding: 0;
  appearance: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  pointer-events: none
}

xo-range input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: calc(var(--size) * 1px);
  height: calc(var(--size) * 1px);
  opacity: 0;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto
}

xo-range input[type=range]::-moz-range-thumb {
  width: calc(var(--size) * 1px);
  height: calc(var(--size) * 1px);
  opacity: 0;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  z-index: 2;
  pointer-events: auto
}

xo-range-track {
  display: block;
  background: #ddd;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: calc(var(--size) * 1px)
}

xo-range-progress {
  position: absolute;
  top: 0;
  height: 100%;
  background: #4caf82;
  left: calc(var(--size) / 2 * 1px);
  will-change: transform, width
}

xo-range-thumb {
  display: block;
  width: 20px;
  height: 20px;
  background: #4caf82;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform
}

xo-sticky {
  display: block
}

xo-sticky[xo-placement=bottom] {
  height: 0
}

xo-sticky-space {
  display: block;
  transition: all .3s
}

xo-filters-clear {
  display: none;
  width: fit-content;
  cursor: pointer
}

xo-filters-clear[xo-visible]:not([xo-visible=false]) {
  display: block
}

xo-filters-refine {
  display: flex;
  flex-wrap: wrap;
  align-items: center
}

xo-filters-refine xo-filters-clear {
  background: #e8e8e8;
  padding: 3px 8px;
  margin-right: 5px;
  margin-bottom: 5px
}

xo-filters-mobile,
xo-filters-sort-by-selected,
xo-filters-field {
  display: block
}

xo-filters-fallback {
  display: none
}

xo-filters-fallback[xo-visible]:not([xo-visible=false]) {
  display: block
}

xo-filters-refine-clear-icon {
  display: none
}

xo-gallery {
  display: block
}

xo-gallery-item {
  display: block
}

xo-gallery-item xo-modal-trigger {
  display: block;
  width: 100%;
  height: 100%
}

xo-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

xo-gallery-portal {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  z-index: 9999;
  color: inherit;
  background-color: transparent;
  overflow: visible;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  visibility: hidden;
  gap: 20px;
  background-color: var(--xo-backdrop-color)
}

xo-gallery-portal::backdrop {
  display: none
}

xo-gallery-portal:not([xo-type=scroll]) {
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory
}

xo-gallery-portal[xo-active]:not([xo-active=false]) {
  visibility: visible
}

xo-gallery-portal[xo-active]:not([xo-active=false]) xo-image-zoom-inner {
  display: block
}

xo-gallery-portal::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent
}

xo-gallery-portal xo-modal {
  position: relative;
  top: auto;
  left: auto;
  width: 100vw;
  flex-shrink: 0;
  scroll-snap-align: start
}

xo-gallery-portal[xo-type=scroll] xo-modal {
  height: auto
}

xo-gallery-portal[xo-type=scroll] xo-modal::part(content) {
  display: flex;
  justify-content: center;
  width: 100%
}

xo-gallery-portal[xo-type=scroll] img {
  width: 100%;
  height: auto
}

xo-gallery-portal xo-modal-pan {
  touch-action: pan-x
}

xo-gallery-portal xo-modal-trigger {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 34px
}

xo-gallery-portal xo-image-zoom-inner {
  display: none
}

xo-gallery-portal video {
  height: 100vh;
  width: 100vw
}

@-moz-document url-prefix() {
  xo-gallery-portal {
    scrollbar-color: transparent;
    scrollbar-width: none
  }
}

xo-gallery-prev,
xo-gallery-next {
  position: fixed;
  top: 50%;
  z-index: 999;
  width: 50px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  color: #fff;
  font-size: 30px
}

xo-gallery-prev {
  left: 0
}

xo-gallery-next {
  right: 0
}

xo-gallery-next svg {
  transform: rotate(180deg)
}

html[dir=rtl] xo-gallery-prev {
  left: auto;
  right: 0
}

html[dir=rtl] xo-gallery-prev svg {
  transform: rotate(180deg)
}

html[dir=rtl] xo-gallery-next {
  right: auto;
  left: 0
}

html[dir=rtl] xo-gallery-next svg {
  transform: rotate(0)
}

xo-gallery-counter {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff
}

xo-cart-quantity-minus,
xo-cart-quantity-plus {
  display: inline-block;
  cursor: pointer;
  user-select: none
}

xo-product-pickup-availability-empty,
xo-product-liquid-static,
xo-product-data {
  display: none !important
}

xo-product-property,
xo-product-properties,
xo-bundle-progress,
xo-bundle-properties,
xo-bundle-content,
xo-product-media,
xo-product-recommendations,
xo-product-recipient-form-error,
xo-product-recipient-form,
xo-product-quick-view,
xo-product-quick-view-trigger,
xo-cart-add-error,
xo-cart-scroll,
xo-cart-shipping-rates-field,
xo-cart-note,
xo-product,
xo-cart,
xo-cart-mini,
xo-cart-discount,
xo-cart-discount-item,
xo-cart-discount-remove,
xo-cart-discount-submit,
xo-product-variant,
xo-product-variants,
xo-product-will-change {
  display: block
}

xo-cart-add-error {
  visibility: hidden;
  overflow: hidden;
  height: 0
}

xo-cart-shipping-rates-field[xo-disabled] {
  display: none
}

xo-bundle-step,
xo-bundle-add,
xo-bundle-remove,
xo-bundle-placeholders,
xo-cart-note-button {
  display: inline-block
}

xo-cart-add-fallback,
xo-cart-change-fallback {
  display: none
}

xo-cart-add-fallback[xo-visible]:not([xo-visible=false]),
xo-cart-change-fallback[xo-visible]:not([xo-visible=false]) {
  display: block
}

xo-cart-add[xo-loading] xo-cart-add-fallback {
  display: block
}

.xo-cart-add-error,
.xo-cart-discount-error,
.xo-cart-change-error {
  background-color: #fa6e6e;
  color: #fff;
  font-size: 14px;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  width: 360px
}

.xo-cart-add-error xo-toast-close-button,
.xo-cart-discount-error xo-toast-close-button,
.xo-cart-change-error xo-toast-close-button {
  color: #fff
}

.xo-cart-add-error xo-toast-close-button svg,
.xo-cart-discount-error xo-toast-close-button svg,
.xo-cart-change-error xo-toast-close-button svg {
  fill: currentColor;
  width: 20px;
  height: 20px
}

xo-cart-fly {
  display: none;
  position: absolute;
  z-index: 9999
}

xo-product-media {
  position: relative
}

xo-product-media [xo-product-media-content] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  transition: .8s
}

xo-product-media [xo-product-media-content],
xo-product-media [xo-product-media-content] xo-carousel-inner,
xo-product-media [xo-product-media-content] xo-carousel-list,
xo-product-media [xo-product-media-content] xo-carousel-slide,
xo-product-media [xo-product-media-content] div,
xo-product-media [xo-product-media-content] img {
  width: 100% !important;
  height: 100% !important
}

xo-product-media [xo-product-media-content] img {
  object-fit: cover
}

xo-product-media [xo-hidden] {
  opacity: 0;
  visibility: hidden
}

xo-product-media [xo-product-media-content] xo-carousel-prev,
xo-product-media [xo-product-media-content] xo-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: .7s
}

xo-product-media [xo-product-media-content] xo-carousel-prev {
  left: 0
}

xo-product-media [xo-product-media-content] xo-carousel-next {
  right: 0
}

xo-product-media [xo-product-media-content] xo-carousel-pagination {
  position: absolute;
  bottom: 0;
  z-index: 10
}

xo-product-media[xo-rtl] [xo-product-media-content] xo-carousel-prev {
  right: 0
}

xo-product-media[xo-rtl] [xo-product-media-content] xo-carousel-next {
  left: 0
}

xo-bundle-price[xo-compare-at-price][xo-hidden] {
  display: none
}

xo-bundle-progress {
  --xo-x: -100%
}

:where(xo-animate:not([xo-item-used])) [xo-type=none],
xo-animate[xo-type=none] xo-animate-item,
[xo-animate=scroll] [xo-type=none] {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1
}

:where(xo-animate:not([xo-item-used])),
[xo-animate=scroll] {
  --xo-strength: 1
}

:where(xo-animate:not([xo-item-used])),
xo-animate-item,
[xo-animate=scroll] {
  display: block;
  opacity: 0;
  animation-duration: calc(var(--xo-duration) * 1ms);
  animation-timing-function: var(--xo-easing);
  animation-delay: calc(var(--xo-order) * var(--xo-constant) * 1ms);
  animation-fill-mode: both
}

:where(xo-animate:not([xo-item-used]))[xo-type=width-increment],
xo-animate-item[xo-type=width-increment],
[xo-animate=scroll][xo-type=width-increment] {
  opacity: 1 !important;
  overflow: hidden;
  animation: none !important;
  transition: all calc(var(--xo-duration) * 1ms) var(--xo-easing) calc((var(--xo-order) * var(--xo-constant) + var(--xo-wrap-duration, 0)) * 1ms)
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false]),
xo-animate-item[xo-visible]:not([xo-visible=false]),
[xo-animate=scroll][xo-visible]:not([xo-visible=false]) {
  backface-visibility: hidden;
  opacity: 1
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade] {
  animation-name: xo-fade
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-up] {
  animation-name: xo-fade-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-down],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-down],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-down] {
  animation-name: xo-fade-down
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-left],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-left],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-left] {
  animation-name: xo-fade-left
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-right],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-right],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-right] {
  animation-name: xo-fade-right
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=zoom-in],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=zoom-in],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=zoom-in] {
  animation-name: xo-zoom-in
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=zoom-out],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=zoom-out],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=zoom-out] {
  animation-name: xo-zoom-out
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=rotate-left-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=rotate-left-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=rotate-left-up] {
  transform-origin: 0 50%;
  animation-name: xo-rotate-left-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=rotate-right-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=rotate-right-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=rotate-right-up] {
  transform-origin: 100% 50%;
  animation-name: xo-rotate-right-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-left],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-left],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-left] {
  transform-origin: 100% 50%;
  animation-name: xo-snake-left
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-right],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-right],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-right] {
  transform-origin: 0 50%;
  animation-name: xo-snake-right
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-up] {
  transform-origin: 50% 0;
  animation-name: xo-snake-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-down],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-down],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-down] {
  transform-origin: 50% 100%;
  animation-name: xo-snake-down
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type="3d-up"],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type="3d-up"],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type="3d-up"] {
  transform-origin: 50% 0;
  animation-name: xo-3d-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=blur],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=blur],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=blur] {
  animation-name: xo-blur
}

@keyframes xo-fade {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes xo-fade-up {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--xo-strength) * 30%), 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-fade-down {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-fade-left {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--xo-strength) * 30%), 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-fade-right {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-zoom-in {
  0% {
    opacity: 0;
    transform: scale(.6)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-zoom-out {
  0% {
    opacity: 0;
    transform: scale(calc(var(--xo-strength) * 1.3))
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-rotate-left-up {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(10deg)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-rotate-right-up {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(-10deg)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-snake-up {
  0% {
    opacity: 0;
    transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * 30%), 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-snake-down {
  0% {
    opacity: 0;
    transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-snake-left {
  0% {
    opacity: 0;
    transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * 30%), 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-snake-right {
  0% {
    opacity: 0;
    transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-3d-up {
  0% {
    opacity: 0;
    transform: perspective(100rem) rotateX(-60deg)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes xo-blur {
  0% {
    opacity: 0;
    filter: blur(10px)
  }

  to {
    opacity: 1;
    filter: blur(0)
  }
}

[xo-animate=scroll][xo-opacity] {
  opacity: 0
}

xo-animate[xo-disabled],
xo-mega-menu [xo-animate=scroll] {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-toggle xo-animate-item,
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal xo-animate-item,
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item,
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item,
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-popover xo-animate-item,
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item,
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item,
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-tabs-pane xo-animate-item {
  opacity: 0;
  animation: none !important
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-toggle xo-animate-item[xo-type=fade-up],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-modal xo-animate-item[xo-type=fade-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=fade-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=fade-up],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-popover xo-animate-item[xo-type=fade-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-up],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-tabs-pane xo-animate-item[xo-type=fade-up] {
  transform: translate3d(0, calc(var(--xo-strength) * 30%), 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-toggle xo-animate-item[xo-type=fade-down],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-modal xo-animate-item[xo-type=fade-down],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=fade-down],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=fade-down],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-popover xo-animate-item[xo-type=fade-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-down],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-tabs-pane xo-animate-item[xo-type=fade-down] {
  transform: translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-toggle xo-animate-item[xo-type=fade-left],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-modal xo-animate-item[xo-type=fade-left],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=fade-left],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=fade-left],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-popover xo-animate-item[xo-type=fade-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-left],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-tabs-pane xo-animate-item[xo-type=fade-left] {
  transform: translate3d(calc(var(--xo-strength) * 30%), 0, 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-toggle xo-animate-item[xo-type=fade-right],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-modal xo-animate-item[xo-type=fade-right],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=fade-right],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=fade-right],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-popover xo-animate-item[xo-type=fade-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-right],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-tabs-pane xo-animate-item[xo-type=fade-right] {
  transform: translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-toggle xo-animate-item[xo-type=zoom-in],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-modal xo-animate-item[xo-type=zoom-in],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=zoom-in],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=zoom-in],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-popover xo-animate-item[xo-type=zoom-in],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-in],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-in],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-tabs-pane xo-animate-item[xo-type=zoom-in] {
  transform: scale(.6)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-toggle xo-animate-item[xo-type=zoom-out],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-modal xo-animate-item[xo-type=zoom-out],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=zoom-out],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=zoom-out],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-popover xo-animate-item[xo-type=zoom-out],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-out],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-out],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-tabs-pane xo-animate-item[xo-type=zoom-out] {
  transform: scale(calc(var(--xo-strength) * 1.3))
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-toggle xo-animate-item[xo-type=rotate-left-up],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-modal xo-animate-item[xo-type=rotate-left-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=rotate-left-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=rotate-left-up],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-popover xo-animate-item[xo-type=rotate-left-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-left-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-left-up],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-tabs-pane xo-animate-item[xo-type=rotate-left-up] {
  transform-origin: 0 50%;
  transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(10deg)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-toggle xo-animate-item[xo-type=rotate-right-up],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-modal xo-animate-item[xo-type=rotate-right-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=rotate-right-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=rotate-right-up],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-popover xo-animate-item[xo-type=rotate-right-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-right-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-right-up],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-tabs-pane xo-animate-item[xo-type=rotate-right-up] {
  transform-origin: 100% 50%;
  transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(-10deg)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-toggle xo-animate-item[xo-type=snake-left],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-modal xo-animate-item[xo-type=snake-left],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=snake-left],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=snake-left],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-popover xo-animate-item[xo-type=snake-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-left],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-tabs-pane xo-animate-item[xo-type=snake-left] {
  transform-origin: 100% 50%;
  transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * 30%), 0, 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-toggle xo-animate-item[xo-type=snake-right],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-modal xo-animate-item[xo-type=snake-right],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=snake-right],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=snake-right],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-popover xo-animate-item[xo-type=snake-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-right],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-tabs-pane xo-animate-item[xo-type=snake-right] {
  transform-origin: 0 50%;
  transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-toggle xo-animate-item[xo-type=snake-up],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-modal xo-animate-item[xo-type=snake-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=snake-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=snake-up],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-popover xo-animate-item[xo-type=snake-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-up],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-tabs-pane xo-animate-item[xo-type=snake-up] {
  transform-origin: 50% 0;
  transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * 30%), 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-toggle xo-animate-item[xo-type=snake-down],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-modal xo-animate-item[xo-type=snake-down],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=snake-down],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=snake-down],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-popover xo-animate-item[xo-type=snake-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-down],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-tabs-pane xo-animate-item[xo-type=snake-down] {
  transform-origin: 50% 100%;
  transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-toggle xo-animate-item[xo-type="3d-up"],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-modal xo-animate-item[xo-type="3d-up"],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type="3d-up"],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type="3d-up"],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-popover xo-animate-item[xo-type="3d-up"],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type="3d-up"],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type="3d-up"],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-tabs-pane xo-animate-item[xo-type="3d-up"] {
  transform-origin: 50% 0;
  transform: perspective(100rem) rotateX(-60deg)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-toggle xo-animate-item[xo-type=blur],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-modal xo-animate-item[xo-type=blur],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=blur],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=blur],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-popover xo-animate-item[xo-type=blur],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=blur],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=blur],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-tabs-pane xo-animate-item[xo-type=blur] {
  filter: blur(10px)
}

xo-toggle[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-toggle[xo-active]:not([xo-active=false]) xo-animate-item,
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-animate-item,
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-animate-item,
xo-popover[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-popover[xo-active]:not([xo-active=false]) xo-animate-item,
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item,
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item,
xo-tabs-pane[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-tabs-pane[xo-active]:not([xo-active=false]) xo-animate-item {
  opacity: 1;
  backface-visibility: hidden
}

xo-toggle[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-toggle[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-popover[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-popover[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item:not([xo-type=width-increment]),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item:not([xo-type=width-increment]),
xo-tabs-pane[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-tabs-pane[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]) {
  transform: none
}

@media (prefers-reduced-motion: reduce) {

  xo-animate,
  xo-animate-item,
  [xo-animate=scroll] {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important
  }
}

html.no-js xo-animate,
html.no-js xo-animate-item,
html.no-js [xo-animate=scroll] {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important
}

[xo-animate=svg-infinite]:not(.xo-animate-svg-none) [xo-next-stroke-dasharray],
[xo-animate=svg-infinite]:not(.xo-animate-svg-none) [xo-next-stroke-dashoffset] {
  animation: xo-svg-infinite calc(var(--xo-duration) * 2ms) ease infinite
}

@keyframes xo-svg-infinite {
  0% {
    opacity: 1;
    stroke-dasharray: var(--xo-stroke-dasharray);
    stroke-dashoffset: var(--xo-stroke-dashoffset)
  }

  50%,
  80% {
    opacity: 1;
    stroke-dasharray: var(--xo-next-stroke-dasharray);
    stroke-dashoffset: var(--xo-next-stroke-dashoffset)
  }

  90%,
  to {
    opacity: 0;
    stroke-dasharray: var(--xo-next-stroke-dasharray);
    stroke-dashoffset: var(--xo-next-stroke-dashoffset)
  }
}

:where(xo-animate:not([xo-item-used]))[xo-type^=xo-goo-],
[xo-animate=scroll][xo-type^=xo-goo-] {
  animation: none !important;
  transition: none !important
}

xo-image-zoom {
  position: relative;
  z-index: 9;
  display: block;
  cursor: none
}

xo-image-zoom img {
  width: 100% !important
}

xo-image-zoom[xo-active]:not([xo-active=false])[xo-zoom-full]:not([xo-zoom-full=false])>img {
  visibility: hidden
}

xo-image-zoom[xo-active]:not([xo-active=false]) xo-image-zoom-item {
  display: block !important
}

xo-image-zoom[xo-active]:not([xo-active=false]) xo-image-zoom-thumb {
  opacity: 1
}

xo-image-zoom[xo-placement=center] {
  cursor: zoom-in
}

xo-image-zoom[xo-placement=right] xo-image-zoom-inner {
  left: calc(100% + 10px)
}

xo-image-zoom[xo-placement=left] xo-image-zoom-inner {
  left: auto;
  right: calc(100% + 10px)
}

xo-image-zoom[xo-zoom-full]:not([xo-zoom-full=false]) xo-image-zoom-inner {
  pointer-events: auto
}

xo-image-zoom[xo-zoom-full]:not([xo-zoom-full=false]) xo-image-zoom-item {
  position: fixed !important
}

xo-image-zoom-thumb {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(255, 255, 255, .5);
  background-color: #ffffff1a;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease
}

xo-image-zoom-inner {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none
}

xo-image-zoom-item {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 9;
  background-color: var(--color-light-freeze);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform-origin: 0 0;
  display: none !important
}

xo-countdown {
  display: block
}

xo-video-cover {
  display: block;
  position: relative;
  overflow: hidden
}

xo-video-cover:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1
}

xo-video-cover-item {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  padding: 0
}

xo-video-cover-item iframe,
xo-video-cover-item video,
xo-video-cover-item embed,
xo-video-cover-item object {
  display: block;
  border: 0;
  width: 100%;
  height: 100%
}

xo-video-cover-button {
  display: inline-block
}

xo-typing:after {
  content: attr(xo-cursor-char);
  display: inline-block;
  margin-left: 2px;
  animation: xo-typing 1.2s
}

@keyframes xo-typing {

  0%,
  to {
    opacity: 0
  }

  50% {
    opacity: 1
  }
}

xo-typing-inner {
  display: inline-flex;
  overflow: hidden
}

xo-typing-content {
  position: relative;
  display: inline-flex;
  flex-direction: column
}

xo-typing-content span:nth-child(2) {
  position: absolute;
  left: 0;
  top: 100%
}

[xo-slide]>xo-typing-inner>xo-typing-content {
  animation: xo-typing-slide backwards calc(var(--xo-duration) * 1ms) ease
}

@keyframes xo-typing-slide {
  0% {
    transform: translateZ(0);
    width: var(--xo-width-0)
  }

  to {
    transform: translate3d(0, -100%, 0);
    width: var(--xo-width-1)
  }
}

[xo-goo]>xo-typing-inner>xo-typing-content {
  width: var(--xo-width-1)
}

[xo-goo]>xo-typing-inner>xo-typing-content span:nth-child(1) {
  top: 10%;
  animation: xo-typing-goo-span-1 calc(var(--xo-duration) * 1ms) ease
}

@keyframes xo-typing-goo-span-1 {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

[xo-goo]>xo-typing-inner>xo-typing-content span:nth-child(2) {
  top: 0;
  opacity: 0;
  animation: xo-typing-goo-span-2 calc(var(--xo-duration) * 1ms) ease
}

@keyframes xo-typing-goo-span-2 {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

xo-typing[xo-effect=goo] {
  position: relative
}

xo-typing[xo-effect=goo] span+span {
  position: absolute
}

xo-image-comparison {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none
}

xo-image-comparison-label {
  position: absolute;
  top: 0;
  z-index: 1;
  background-color: #000;
  color: #fff;
  padding: 5px 10px
}

xo-image-comparison-after {
  display: block
}

xo-image-comparison-after img {
  width: 100%;
  pointer-events: none
}

xo-image-comparison-after xo-image-comparison-label {
  right: 0
}

xo-image-comparison-before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  overflow: hidden;
  width: calc(var(--xo-value, 0) * 1%)
}

xo-image-comparison-before img {
  display: block;
  height: 100% !important;
  width: calc(100 / var(--xo-value, 0) * 100%) !important;
  max-width: none !important;
  object-fit: cover !important;
  pointer-events: none
}

xo-image-comparison-before xo-image-comparison-label {
  left: 0
}

xo-image-comparison-handle {
  display: block;
  position: absolute;
  top: 0;
  left: calc(var(--xo-value, 0) * 1%);
  z-index: 9;
  transform: translate(-50%);
  width: 2px;
  height: 100%;
  background-color: #fff;
  cursor: ew-resize
}

xo-image-comparison-handle-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  height: fit-content;
  border-radius: 50%;
  cursor: ew-resize
}

xo-masonry {
  display: block;
  position: relative
}

xo-masonry-item {
  display: block !important
}

xo-cursor-item {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  display: block;
  transition: transform .4s, opacity .4s;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0);
  pointer-events: none
}

xo-cursor-item[xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1)
}

:where([is=xo-cursor][xo-absolute]) {
  position: relative
}

[is=xo-cursor][xo-absolute] xo-cursor-item {
  position: absolute
}

xo-scroll-carousel {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  user-select: none;
  touch-action: pan-y
}

xo-scroll-carousel[xo-rtl]:not([xo-rtl=false]) {
  direction: rtl
}

xo-scroll-carousel>* {
  display: flex;
  flex-wrap: nowrap
}

xo-scroll-carousel>*>* {
  flex-shrink: 0;
  padding-inline-end: var(--xo-gap, 30px)
}

xo-scroll-carousel-next,
xo-scroll-carousel-prev {
  display: block;
  cursor: pointer
}

xo-magnetic,
xo-magnetic-content {
  display: inline-block;
  will-change: transform
}

xo-line-chart {
  position: relative;
  display: block;
  width: 100%;
  height: 100%
}

xo-line-chart svg {
  position: absolute;
  top: 0;
  left: 0
}

xo-scroll-scene {
  position: relative;
  display: block
}

xo-scroll-scene-inner {
  position: sticky;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 100vh
}

xo-scroll-scene-item {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden
}

xo-scroll-scene-item[xo-active]:not([xo-active=false]) {
  pointer-events: auto;
  visibility: visible
}

xo-collection-tabs,
xo-collection-tabs-trigger,
xo-collection-tabs-content {
  display: block
}

xo-intersection-video {
  display: block
}

xo-item {
  display: block
}

.xo-hidden {
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important
}