.rotate-90-left-cw {
  -webkit-animation: rotate-90-left-cw 4s ease-in-out infinite alternate both;
  animation: rotate-90-left-cw 4s ease-in-out infinite alternate both;
}

@-webkit-keyframes rotate-90-left-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}
@keyframes rotate-90-left-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

.tree3deg {
  -webkit-animation: rotate-90-bottom-cw 6s ease-in-out infinite alternate both;
  animation: rotate-90-bottom-cw 6s ease-in-out infinite alternate both;
}

@-webkit-keyframes rotate-90-bottom-cw {
  0% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}
@keyframes rotate-90-bottom-cw {
  0% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}

.tree2deg {
  -webkit-animation: rotate-90-bottom-cw 6s ease-in-out infinite alternate both;
  animation: rotate-90-bottom-cw 6s ease-in-out infinite alternate both;
}

@-webkit-keyframes rotate-90-bottom-cw {
  0% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}
@keyframes rotate-90-bottom-cw {
  0% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}

.tree2deg-rot-1 {
  -webkit-animation: tree2deg-rot 6s ease-in-out infinite alternate both;
  animation: tree2deg-rot 6s ease-in-out infinite alternate both;
}

@-webkit-keyframes tree2deg-rot {
  0% {
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}
@keyframes tree2deg-rot {
  0% {
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}

.tree2deg-rot-2 {
  -webkit-animation: tree2deg-rot-2 6s ease-in-out infinite alternate both;
  animation: tree2deg-rot-2 6s ease-in-out infinite alternate both;
}

@-webkit-keyframes tree2deg-rot-2 {
  0% {
    -webkit-transform: rotate(50deg) scaleY(-1);
    transform: rotate(50deg) scaleY(-1);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotate(45deg) scaleY(-1);
    transform: rotate(45deg) scaleY(-1);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}
@keyframes tree2deg-rot-2 {
  0% {
    -webkit-transform: rotate(50deg) scaleY(-1);
    transform: rotate(50deg) scaleY(-1);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotate(45deg) scaleY(-1);
    transform: rotate(45deg) scaleY(-1);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}

.ani-ring {
  -webkit-animation: slide-fwd-top 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate both;
  animation: slide-fwd-top 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate both;
}

@-webkit-keyframes slide-fwd-top {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
  }
  100% {
    -webkit-transform: translateZ(10px) translateY(-10px);
    transform: translateZ(10px) translateY(-10px);
  }
}
@keyframes slide-fwd-top {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
  }
  100% {
    -webkit-transform: translateZ(10px) translateY(-10px);
    transform: translateZ(10px) translateY(-10px);
  }
}

.ani-hati {
  -webkit-animation: scale-up-center 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite alternate both;
  animation: scale-up-center 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite alternate both;
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.ani-leaf-center-top {
  -webkit-animation: rotate-90-top-cw 2s ease-in-out infinite alternate forwards;
  animation: rotate-90-top-cw 2s ease-in-out infinite alternate forwards;
}

@-webkit-keyframes rotate-90-top-cw {
  0% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@keyframes rotate-90-top-cw {
  0% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}

.ani-hand-bye {
  -webkit-animation: rotate-90-br-ccw 1s ease-in-out infinite alternate both;
  animation: rotate-90-br-ccw 1s ease-in-out infinite alternate both;
}

@-webkit-keyframes rotate-90-br-ccw {
  0% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
}
@keyframes rotate-90-br-ccw {
  0% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
}

.slide-right {
  -webkit-animation: slide-right 3s ease-in-out both;
  animation: slide-right 3s ease-in-out both;
}

@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(5%);
    transform: translateX(5%);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(5%);
    transform: translateX(5%);
  }
}

.slide-left {
  -webkit-animation: slide-left 3s ease-in-out both;
  animation: slide-left 3s ease-in-out both;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(5%);
    transform: translateX(5%);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(5%);
    transform: translateX(5%);
  }
}

.slide-top {
  -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}
