/** Shopify CDN: Minification failed

Line 88:0 Expected percentage but found "."
Line 205:0 Expected "}" to go with "{"

**/
/* KEYFRAMES */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeInfadeOut {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes cartFill {
  0% {
    color: var(--color-main);
  }

  50% {
    color: var(--color-white);
  }

  100% {
    color: var(--color-main);
  }
}

@keyframes fadeOutVh {
  0% {
    opacity: 1;
    height: 100%;
  }

  100% {
    opacity: 0;
    height: 0;
  }
}

@keyframes blurIn {
  0% {
    filter: blur(10px);
  }

  100% {
    filter:  blur(0);
  }
}

@keyframes slideIn {
  0% {
    transform: translate(-50%, 100%);
  }

  100% {
    transform: translate(-50%, 0);
}

.animate--fadeIn {
  opacity: 0;
  animation: fadeIn 800ms ease-in-out forwards;
}

.animate--fadeOut {
  opacity: 1;
  animation: fadeOut 800ms ease-in-out forwards;
}

.animate--fadeOut--fast {
  opacity: 1;
  animation: fadeOut 320ms ease-in-out forwards;
}

.animate--fadeOut--vh {
  opacity: 0;
  animation: fadeOutVh 800ms ease-in-out forwards;
}

.animate--fadeIn--fast {
  opacity: 0;
  animation: fadeIn 320ms ease-in-out forwards;
}

.animate--fadeIn-slow {
  opacity: 0;
  animation: fadeIn 1600ms ease-in-out forwards;
}

.animate--fadeIn--delay {
  opacity: 0;
  animation: fadeIn 800ms ease-in-out forwards;
  animation-delay: 800ms;
}

.animate--fadeIn--first {
  opacity: 0;
  animation: fadeIn 800ms ease-in-out forwards;
}

.animate--fadeIn--second {
  opacity: 0;
  animation: fadeIn 800ms ease-in-out forwards;
  animation-delay: 800ms;
}

.animate--fadeIn--third {
  opacity: 0;
  animation: fadeIn 800ms ease-in-out forwards;
  animation-delay: 1600ms;
}

.animate--fadeIn--fourth {
  opacity: 0;
  animation: fadeIn 800ms ease-in-out forwards;
  animation-delay: 2400ms;
}



/* .template-blog main,
  .template-page main,
  .template-collection main,
  .template-product main,
  .template-article main {
    opacity: 0;
    animation: fadeIn 800ms ease-in-out forwards;
  } */

@media (prefers-reduced-motion: no-preference) {
  .observed {
    opacity: 0;
  }

  .observed.in-view {
    animation: fadeIn 800ms ease-in-out forwards;
  }

  .observed.out-of-view {
    animation: fadeOut 1600ms ease-in-out forwards;
  }

  .observed .banner__content__heading {
    opacity: 0;
    animation: fadeIn 600ms ease-in-out forwards;
  }

  .observed .banner__content__body  {
    opacity: 0;
    animation: fadeIn 800ms ease-in-out forwards;
    animation-delay: 600ms;
  }

  .observed .banner__content__cta {
    opacity: 0;
    animation: fadeIn 800ms ease-in-out forwards;
    animation-delay: 1400ms;
  }

  .observed.values {
    opacity: 1;
  }
  .observed .card-values {
    animation: blurIn 420ms ease-in-out forwards;

    &:nth-child(1) { 
      animation-delay: 200ms;
    }

    &:nth-child(2) {
      animation-delay: 400ms;
    }

  }

}