@keyframes fade-in {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  @keyframes fade-in-out {
    0% {
      opacity: 0;
    }
  
    60% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }
  }
  @keyframes fade-out-in {
    0% {
      opacity: 1;
    }
  
    40% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-in--text {
    from {
      color: transparent;
    }
  
    to {
      color: #FFFEF2;
    }
  }
  @keyframes fade-out {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  @keyframes fade-out--delayed {
    50% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }
  }
  @keyframes fade-in--delayed {
    50% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  @keyframes scale-down {
    from {
      transform: scale(1.02, 1.02);
    }
  
    to {
      transform: scale(1, 1);
    }
  }
  @keyframes slide-in-left {
    from {
      transform: translate(15px, 0);
    }
  
    to {
      transform: translate(0, 0);
    }
  }
  @keyframes slide-in-right {
    from {
      transform: translate(-15px, 0);
    }
  
    to {
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden; /* Fixes text rendering bug after the animation runs. Adding this to the element directly doesn't work */
      transform: translate(0, 0);
    }
  }
  @keyframes slide-left--20 {
    from {
      transform: translate(0, 0);
    }
  
    to {
      transform: translate(-20%, 0);
    }
  }
  @keyframes slide-left--100 {
    from {
      transform: translate(0, 0);
    }
  
    to {
      transform: translate(-100%, 0);
    }
  }
  @keyframes slide-left--200 {
    from {
      transform: translate(0, 0);
    }
  
    to {
      transform: translate(-200%, 0);
    }
  }
  @keyframes slide-left--300 {
    from {
      transform: translate(0, 0);
    }
  
    to {
      transform: translate(-300%, 0);
    }
  }
  @keyframes slide-out-right {
    from {
      transform: translate(0, 0);
    }
  
    to {
      transform: translate(15px, 0);
    }
  }
  @keyframes slide-right--100 {
    from {
      transform: translate(-100%, 0);
    }
  
    to {
      transform: translate(0, 0);
    }
  }
  @keyframes slide-up--20px {
    from {
      transform: translate(0, 20px);
    }
  
    to {
      transform: translate(0, 0);
    }
  }
  @keyframes move-down-20 {
    from {
      transform: translateY(-20px);
    }
  
    to {
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      transform: translateY(0);
    }
  }
  @keyframes move-left-30 {
    from {
      transform: translateX(30px);
    }
  
    to {
      transform: translateX(0);
    }
  }
  @keyframes scale-up--80 {
    from {
      transform: scale(0.8);
    }
  
    to {
      transform: scale(1);
    }
  }
  @keyframes scale-up--delayed-80 {
    50% {
      transform: scale(0.8);
    }
  
    100% {
      transform: scale(1);
    }
  }
  @keyframes scale-down--80 {
    from {
      transform: scale(1);
    }
  
    to {
      transform: scale(0.8);
    }
  }
  @keyframes slide-down--100 {
    from {
      transform: translate(0, -100%);
    }
  
    to {
      transform: translate(0, 0);
    }
  }
  @keyframes slide-up--100 {
    from {
      transform: translate(0, 0);
    }
  
    to {
      transform: translate(0, -100%);
    }
  }
  @keyframes filter-enter-ml {
    from {
      max-height: 0;
    }
  
    to {
      max-height: 50vh;
    }
  }
  @keyframes filter-exit-ml {
    from {
      max-height: 50vh;
    }
  
    to {
      max-height: 0;
    }
  }
  @keyframes full-page-filter-enter-ml {
    from {
      max-height: 0;
    }
  
    to {
      max-height: 100vh;
    }
  }
  @keyframes full-page-filter-exit-ml {
    from {
      max-height: 100vh;
    }
  
    to {
      max-height: 0;
    }
  }
  @keyframes subcat-product-details-enter-md {
    from {
      max-height: 0;
      padding: 0 34px;
    }
  
    to {
      max-height: 170px;
      padding: 0 34px 30px;
    }
  }
  @keyframes subcat-product-details-enter-lg {
    from {
      max-height: 0;
      padding: 0 40px;
    }
  
    to {
      max-height: 170px;
      padding: 0 40px 30px;
    }
  }
  @keyframes subcat-product-enter {
    from {
      max-height: 0;
    }
  
    to {
      max-height: 550px;
    }
  }
  @keyframes cat-product-enter-md {
    from {
      max-height: 0;
    }
  
    to {
      max-height: 370px;
    }
  }
  @keyframes cat-product-exit-md {
    from {
      max-height: 370px;
    }
  
    to {
      max-height: 0;
    }
  }
  @keyframes cat-product-enter-lg {
    from {
      max-height: 0;
    }
  
    to {
      max-height: 530px;
    }
  }
  @keyframes cat-product-exit-lg {
    from {
      max-height: 530px;
    }
  
    to {
      max-height: 0;
    }
  }
  @keyframes pdp-add-label {
    25% {
      opacity: 0;
      transform: translateY(-100%);
    }
  
    75% {
      opacity: 0;
      transform: translateY(100%);
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes pdp-add-label--action {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
  
    25%,
    75% {
      opacity: 1;
      transform: translateY(-100%);
    }
  
    100% {
      opacity: 0;
      transform: translateY(-200%);
    }
  }
  @keyframes btn-label-animation {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
  
    100% {
      opacity: 0;
      transform: translateY(-100%);
    }
  }
  @keyframes inline-error-animate-in {
    from {
      max-height: 0;
      opacity: 0;
    }
  
    to {
      max-height: 40px;
      opacity: 1;
    }
  }
  @keyframes slide-bottom-in--100 {
    from {
      transform: translate(0, 100%);
    }
  
    to {
      transform: translate(0, 0);
    }
  }
  @keyframes slide-bottom-out--100 {
    from {
      transform: translate(0, 0);
    }
  
    to {
      transform: translate(0, 100%);
    }
  }
  @keyframes skin-types-button-on {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
  
    50% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes skin-types-button-off {
    from {
      opacity: 1;
      transform: none;
    }
  
    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }

.scrollAnimEffect.is-visible {
  opacity: 1;
}

.scrollAnimEffect {
  opacity: 0;
  /*transition: opacity 900ms 100ms cubic-bezier(0.645, 0.045, 0.355, 1);*/
  transition: opacity .5s  ease-out;
}