@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.6.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes visualImage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes visualImage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes titleArea {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes titleArea {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.titleArea {
  -webkit-animation-name: titleArea;
  animation-name: titleArea;
}

@-webkit-keyframes visualCategory {
  0% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes visualCategory {
  0% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}

.visualCategory {
  -webkit-animation-name: visualCategory;
  animation-name: visualCategory;
}

@-webkit-keyframes visualText {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes visualText {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.visualText {
  -webkit-animation-name: visualText;
  animation-name: visualText;
}

@-webkit-keyframes visualProduct {
  0% {
    opacity: 0;
    /* filter: blur(100px); */
    transform: scale(1.15, 1.15);
    -webkit-transform: scale(1.15, 1.15);
  }
  15% {
    opacity: 1;
    /* filter: blur(0); */
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
}
@keyframes visualProduct {
  0% {
    opacity: 0;
    /* filter: blur(100px); */
    transform: scale(1.15, 1.15);
    -webkit-transform: scale(1.15, 1.15);
  }
  15% {
    opacity: 1;
    /* filter: blur(0); */
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
}
@media screen and (max-width: 834px) {
  @-webkit-keyframes visualProduct {
    0% {
      opacity: 0;
      /* filter: blur(100px); */
      transform: scale(1.15, 1.15);
      -webkit-transform: scale(1.15, 1.15);
    }
    15% {
      opacity: 1;
      /* filter: blur(0); */
      transform: scale(1.1, 1.1);
      -webkit-transform: scale(1.1, 1.1);
    }
    100% {
      opacity: 1;
      transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
    }
  }
  @keyframes visualProduct {
    0% {
      opacity: 0;
      /* filter: blur(100px); */
      transform: scale(1.15, 1.15);
      -webkit-transform: scale(1.15, 1.15);
    }
    15% {
      opacity: 1;
      /* filter: blur(0); */
      transform: scale(1.1, 1.1);
      -webkit-transform: scale(1.1, 1.1);
    }
    100% {
      opacity: 1;
      transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
    }
  }
}

@keyframes fadeInPic {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0 0 0);
  }
}

@keyframes fadeInProductPic {
  0% {
    opacity: 1;
    clip-path: inset(100% 0 0 0);
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
  20% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1.06, 1.06);
    -webkit-transform: scale(1.06, 1.06);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0 0 0);
    transform: scale(1.08, 1.08);
    -webkit-transform: scale(1.08, 1.08);
  }
}

@keyframes fadeInSectionPic {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
  }
  5% {
    opacity: 1;
    clip-path: inset(0% 0 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0 0 0);
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
}

@-webkit-keyframes ShowBtn {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes ShowBtn {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0);
  }
}

.ShowBtn {
  -webkit-animation-name: ShowBtn;
  animation-name: ShowBtn;
}
