

/* animate */
@-webkit-keyframes rotate {
    from{-webkit-transform: rotate(0);transform: rotate(0)}
    to{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
}
@keyframes rotate {
    from{-webkit-transform: rotate(0);transform: rotate(0)}
    to{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
}
@-webkit-keyframes myscale {
    0%,100%{-webkit-transform: scale(1);transform: scale(1);}
    50%{-webkit-transform: scale(1.3);transform: scale(1.3)}
}
@keyframes myscale {
    0%,100%{-webkit-transform: scale(1);transform: scale(1);}
    50%{-webkit-transform: scale(1.3);transform: scale(1.3)}
}
@-webkit-keyframes move {
    0%,100%{-webkit-transform: translateX(0);transform: translateX(0);}
    50%{-webkit-transform: translateX(0.15rem);transform: translateX(0.15rem);}
}
@keyframes move {
    0%,100%{-webkit-transform: translateX(0);transform: translateX(0);}
    50%{-webkit-transform: translateX(0.15rem);transform: translateX(0.15rem);}
}
@-webkit-keyframes bounceInLeft {
  0% {
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);

    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);

    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);

    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);

    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes bounceInRight {
  0% {
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);

    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);

    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);

    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);

    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

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

@-webkit-keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

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

@-webkit-keyframes fadeInUpBig {
  0% {
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

@keyframes fadeInUpBig {
  0% {
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);

    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);

    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);

    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);

    opacity: 1;
  }
}

.flipInX {
  -webkit-animation-name: flipInX;
  animation-name: flipInX;

  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);

    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);

    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);

    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);

    opacity: 1;
  }
}

.flipInY {
  -webkit-animation-name: flipInY;
  animation-name: flipInY;

  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
@-webkit-keyframes tikako {
    from{-webkit-transform: translate(0,0);transform: translate(0,0);}
    to{-webkit-transform: scale(0.6) translate(0.6rem,-0.4rem);transform: scale(0.6) translate(0.6rem,-0.4rem);opacity: 0;}
}
@keyframes tikako {
    from{-webkit-transform: translate(0,0);transform: translate(0,0);}
    to{-webkit-transform: scale(0.6) translate(0.6rem,-0.4rem);transform: scale(0.6) translate(0.6rem,-0.4rem);opacity: 0;}
}
@-webkit-keyframes animatedBackground {
    0%,50%,100%{background-position-y: 0}
    25%,75%{background-position-y:0.4rem}
    from { background-position-x: 0; }
    to { background-position-x: -6.58rem; }
}
@keyframes animatedBackground {
    0%,50%,100%{background-position-y: 0}
    25%,75%{background-position-y:0.4rem}
    from { background-position-x: 0; }
    to { background-position-x: -6.58rem; }
}
