/* banner img */
@keyframes zoomInImage {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100%{
    transform: scale(1);
  }
}

.zoomInImage {
  animation-name: zoomInImage;
}

@keyframes zoomOutImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
    transition: 1s;
  }
  to {
    transform: scale3d(1, 1, 1);
    transition: 1s;
  }
}

.zoomOutImage {
  animation-name: zoomOutImage;
  transition: 1s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
/* @keyframes plus-top{
  from{
    transform: translateY(6px);
    fill: #000;
    opacity: 0.5;
  }

  to{
    transform: translateY(2px);
    fill: #D01D41;
    opacity: 1;
  }
} */

/* slick arrow */
@keyframes stroke {
  52% {
    transform: rotate(-180deg);
    stroke-dashoffset: 0;
  }
  52.1% {
    transform: rotate(-360deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(-180deg);
    stroke-dashoffset: 126;
  }
}

@keyframes test1 {
  52% {
    transform: rotate(-180deg);
    stroke-dashoffset: 0;
  }
  52.1% {
    transform: rotate(-360deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(-180deg);
    stroke-dashoffset: 378;
  }
}


@keyframes arrow {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  23% {
    transform: translateX(17px);
    opacity: 1;
  }
  24%,
  80% {
    transform: translateX(-22px);
    opacity: 0;
  }
  81% {
    opacity: 1;
    transform: translateX(-22px);
  }
}

@keyframes arrowUp {
  0%,
  100% {
    transform: rotate(-40deg) scaleX(1);
  }
  20%,
  80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}

@keyframes arrowDown {
  0%,
  100% {
    transform: rotate(40deg) scaleX(1);
  }
  20%,
  80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}


@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}

.slide-top {
	-webkit-animation: slide-top 0.5s ease-in both;
  animation: slide-top 0.5s ease-in both;
}


@keyframes cp-fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-25px);
  }
  10% {
    transform: translateY(-25px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  35% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes cp-fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  10% {
    transform: translateY(25px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  35% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes cp-fadeIn {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.6;
  }
  35% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}



@-webkit-keyframes cycle-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes cycle-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes revealRTL {
  0% {
    width: 0;
    right: 0;
  }
  65% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
@keyframes revealLTR {
  0% {
    width: 0;
    left: 0;
  }
  65% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}

@keyframes line-path {
  to {
      stroke-dashoffset: 0;
  }
}