/*--Motion CSS-The library of CSS3 animation-create by Petr Pavlyuk-http://pavlyukpetr.com--*/

.wow {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

#animation {
  visibility: hidden;
}

.animation {
  visibility: visible !important;
  animation-fill-mode: both !important;
  -webkit-animation-fill-mode: both !important;
}

.replay {
  -webkit-animation-iteration-count: infinite !important;
  animation-iteration-count: infinite !important;
}

/*fade-in*/

.fade-in {
  -webkit-animation: fade-in 1.2s;
  animation: fade-in 1.2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.fade-in-3s {
  -webkit-animation: fade-in 3s;
  animation: fade-in 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

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

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-4s {
  -webkit-animation: fade-in-4s 4s;
  animation: fade-in-4s 4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes fade-in-4s {
  0%,
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in-4s {
  0%,
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*fade-in right*/

.fade-in-right {
  -webkit-animation: fade-in-right 1s;
  animation: fade-in-right 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.selected .about-history-bg {
  -webkit-animation: fade-in-right 1s;
  animation: fade-in-right 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.selected .about-history-title {
  -webkit-animation: fade-in-right 1.5s;
  animation: fade-in-right 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.fade-in-right-half {
  -webkit-animation: fade-in-right-half .5s;
  animation: fade-in-right-half .5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.fade-right-in01 {
  -webkit-animation: fade-in-right 0.6s;
  animation: fade-in-right 0.6s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.fade-right-in02 {
  -webkit-animation: fade-in-right 0.9s;
  animation: fade-in-right 0.9s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.fade-right-in03 {
  -webkit-animation: fade-in-right 1.2s;
  animation: fade-in-right 1.2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.fade-right-in04 {
  -webkit-animation: fade-in-right 1.5s;
  animation: fade-in-right 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(-100%);

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

    opacity: 1;
  }
}

@keyframes fade-in-right {
  0% {
    transform: translateX(-100%);

    opacity: 0;
  }
  100% {
    transform: translateX(0%);

    opacity: 1;
  }
}

@-webkit-keyframes fade-in-right-half {
  0% {
    -webkit-transform: translateX(-50%);

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

    opacity: 1;
  }
}

@keyframes fade-in-right-half {
  0% {
    transform: translateX(-50%);

    opacity: 0;
  }
  100% {
    transform: translateX(0%);

    opacity: 1;
  }
}

/*fade-in left*/

.fade-in-left {
  -webkit-animation: fade-in-left 1s;
  animation: fade-in-left 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.fade-in-left-half {
  -webkit-animation: fade-in-left-half .5s;
  animation: fade-in-left-half .5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.fade-in-left-2nd {
  -webkit-animation: fade-in-left 1.5s;
  animation: fade-in-left 1.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.fade-in-left-3rd {
  -webkit-animation: fade-in-left 2s;
  animation: fade-in-left 2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.fade-in-left-02 {
  -webkit-animation: fade-in-left-02 1.5s;
  animation: fade-in-left-02 1.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.fade-in-left-slow {
  -webkit-animation: fade-in-left-02 2s;
  animation: fade-in-left-02 2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.selected .about-history-item {
  -webkit-animation: fade-in-left 1.5s;
  animation: fade-in-left 1.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(100%);

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

    opacity: 1;
  }
}

@keyframes fade-in-left {
  0% {
    transform: translateX(100%);

    opacity: 0;
  }
  100% {
    transform: translateX(0%);

    opacity: 1;
  }
}

@-webkit-keyframes fade-in-left-half {
  0% {
    -webkit-transform: translateX(50%);

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

    opacity: 1;
  }
}

@keyframes fade-in-left-half {
  0% {
    transform: translateX(50%);

    opacity: 0;
  }
  100% {
    transform: translateX(0%);

    opacity: 1;
  }
}

@-webkit-keyframes fade-in-left-02 {
  0%,
  50% {
    -webkit-transform: translateX(100%);

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

    opacity: 1;
  }
}

@keyframes fade-in-left-02 {
  0%,
  50% {
    transform: translateX(100%);

    opacity: 0;
  }
  100% {
    transform: translateX(0%);

    opacity: 1;
  }
}

/*fade-in up*/

.fade-in-up {
  -webkit-animation: fade-in-up 1s;
  animation: fade-in-up 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.fade-in-up-01 {
  -webkit-animation: fade-in-up 1.5s;
  animation: fade-in-up 1.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.fade-in-up-02 {
  -webkit-animation: fade-in-up 2s;
  animation: fade-in-up 2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.fade-in-up-03 {
  -webkit-animation: fade-in-up 2.5s;
  animation: fade-in-up 2.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(100%);

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

    opacity: 1;
  }
}

@keyframes fade-in-up {
  0% {
    transform: translateY(100%);

    opacity: 0;
  }
  100% {
    transform: translateY(0%);

    opacity: 1;
  }
}

.fade-in-up-2s {
  -webkit-animation: fade-in-up-2s 2s;
  animation: fade-in-up-2s 2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes fade-in-up-2s {
  0%,
  70% {
    -webkit-transform: translateY(100%);

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

    opacity: 1;
  }
}

@keyframes fade-in-up-2s {
  0%,
  70% {
    transform: translateY(100%);

    opacity: 0;
  }
  100% {
    transform: translateY(0%);

    opacity: 1;
  }
}

/*fade-in down*/

.fade-in-down {
  -webkit-animation: fade-in-down 1s;
  animation: fade-in-down 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes fade-in-down {
  0% {
    -webkit-transform: translateY(-100%);

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

    opacity: 1;
  }
}

@keyframes fade-in-down {
  0% {
    transform: translateY(-100%);

    opacity: 0;
  }
  100% {
    transform: translateY(0%);

    opacity: 1;
  }
}

@-webkit-keyframes fade-down {
  0% {
    -webkit-transform: translateY(-20px);

    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(20px);

    opacity: 0;
  }
}

@keyframes fade-down {
  0% {
    transform: translateY(-20px);

    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(20px);

    opacity: 0;
  }
}

/*slide-in right*/

.slide-in-right {
  -webkit-animation: slide-in-right 1.2s;
  animation: slide-in-right 1.2s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(-2000px);
  }
  100% {
    transform: translateX(0px);
  }
}

/*slide-in left*/

.slide-in-left {
  -webkit-animation: slide-in-left 1.2s;
  animation: slide-in-left 1.2s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(2000px);
  }
  100% {
    transform: translateX(0px);
  }
}

/*slide-in up*/

.slide-in-up {
  -webkit-animation: slide-in-up 1.2s;
  animation: slide-in-up 1.2s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

@-webkit-keyframes slide-in-up {
  0% {
    -webkit-transform: translateY(1000px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}

@keyframes slide-in-up {
  0% {
    transform: translateY(1000px);
  }
  100% {
    transform: translateY(0px);
  }
}

/*slide-in down*/

.slide-in-down {
  -webkit-animation: slide-in-down 1.2s;
  animation: slide-in-down 1.2s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

@-webkit-keyframes slide-in-down {
  0% {
    -webkit-transform: translateY(-1000px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}

@keyframes slide-in-down {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0px);
  }
}

/*bounce-in*/

.bounce-in {
  -webkit-animation: bounce-in 2s;
  animation: bounce-in 2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes bounce-in {
  0% {
    transform: scale(.9);

    opacity: 0;
  }
  25% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(.9);
  }
  70% {
    transform: scale(1.05);

    opacity: 1;
  }
  80% {
    transform: scale(.95);
  }
  90% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes bounce-in {
  0% {
    -webkit-transform: scale(.9);

    opacity: 0;
  }
  25% {
    -webkit-transform: scale(1.2);
  }
  40% {
    -webkit-transform: scale(.8);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  60% {
    -webkit-transform: scale(.9);
  }
  70% {
    -webkit-transform: scale(1.05);

    opacity: 1;
  }
  80% {
    -webkit-transform: scale(.95);
  }
  90% {
    -webkit-transform: scale(1.01);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

/*bounce-in-right*/

.bounce-in-right {
  -webkit-animation: bounce-in-right 1.2s;
  animation: bounce-in-right 1.2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes bounce-in-right {
  0% {
    transform: translateX(-2000px);
  }
  63% {
    transform: translateX(30px);
  }
  70%,
  80%,
  90%,
  100% {
    transform: translateX(0px);
  }
  75% {
    transform: translateX(14px);
  }
  85% {
    transform: translateX(8px);
  }
  95% {
    transform: translateX(4px);
  }
}

@-webkit-keyframes bounce-in-right {
  0% {
    -webkit-transform: translateX(-2000px);
  }
  63% {
    -webkit-transform: translateX(30px);
  }
  70%,
  80%,
  90%,
  100% {
    -webkit-transform: translateX(0px);
  }
  75% {
    -webkit-transform: translateX(14px);
  }
  85% {
    -webkit-transform: translateX(8px);
  }
  95% {
    -webkit-transform: translateX(4px);
  }
}

/*bounce-in left*/

.bounce-in-left {
  -webkit-animation: bounce-in-left 1.2s;
  animation: bounce-in-left 1.2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes bounce-in-left {
  0% {
    transform: translateX(2000px);
  }
  63% {
    transform: translateX(-30px);
  }
  70%,
  80%,
  90%,
  100% {
    transform: translateX(0px);
  }
  75% {
    transform: translateX(-14px);
  }
  85% {
    transform: translateX(-8px);
  }
  95% {
    transform: translateX(-4px);
  }
}

@-webkit-keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(2000px);
  }
  63% {
    -webkit-transform: translateX(-30px);
  }
  70%,
  80%,
  90%,
  100% {
    -webkit-transform: translateX(0px);
  }
  75% {
    -webkit-transform: translateX(-14px);
  }
  85% {
    -webkit-transform: translateX(-8px);
  }
  95% {
    -webkit-transform: translateX(-4px);
  }
}

/*bounce-in up*/

.bounce-in-up {
  -webkit-animation: bounce-in-up 1.2s;
  animation: bounce-in-up 1.2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes bounce-in-up {
  0% {
    transform: translateY(1000px);
  }
  25% {
    transform: translateY(50px);
  }
  30%,
  55%,
  70%,
  80%,
  90%,
  100% {
    transform: translateY(0px);
  }
  45% {
    transform: translateY(25px);
  }
  63% {
    transform: translateY(15px);
  }
  75% {
    transform: translateY(7px);
  }
  85% {
    transform: translateY(4px);
  }
  95% {
    transform: translateY(2px);
  }
}

@-webkit-keyframes bounce-in-up {
  0% {
    -webkit-transform: translateY(1000px);
  }
  25% {
    -webkit-transform: translateY(50px);
  }
  30%,
  55%,
  70%,
  80%,
  90%,
  100% {
    -webkit-transform: translateY(0px);
  }
  45% {
    -webkit-transform: translateY(25px);
  }
  63% {
    -webkit-transform: translateY(15px);
  }
  75% {
    -webkit-transform: translateY(7px);
  }
  85% {
    -webkit-transform: translateY(4px);
  }
  95% {
    -webkit-transform: translateY(2px);
  }
}

/*bounce-in down*/

.bounce-in-down {
  -webkit-animation: bounce-in-down 2s;
  animation: bounce-in-down 2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes bounce-in-down {
  0% {
    transform: translateY(-1000px);
  }
  25% {
    transform: translateY(-50px);
  }
  30%,
  55%,
  70%,
  80%,
  90%,
  100% {
    transform: translateY(0px);
  }
  45% {
    transform: translateY(-25px);
  }
  63% {
    transform: translateY(-15px);
  }
  75% {
    transform: translateY(-7px);
  }
  85% {
    transform: translateY(-4px);
  }
  95% {
    transform: translateY(-2px);
  }
}

@-webkit-keyframes bounce-in-down {
  0% {
    -webkit-transform: translateY(-1000px);
  }
  25% {
    -webkit-transform: translateY(-50px);
  }
  30%,
  55%,
  70%,
  80%,
  90%,
  100% {
    -webkit-transform: translateY(0px);
  }
  45% {
    -webkit-transform: translateY(-25px);
  }
  63% {
    -webkit-transform: translateY(-15px);
  }
  75% {
    -webkit-transform: translateY(-7px);
  }
  85% {
    -webkit-transform: translateY(-4px);
  }
  95% {
    -webkit-transform: translateY(-2px);
  }
}

.loading-rotate {
  -webkit-animation: loading-rotate 1s;
  animation: loading-rotate 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

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

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

/*roll-in-right*/

.roll-in-right {
  -webkit-animation: roll-in-right 1.2s;
  animation: roll-in-right 1.2s;
}

@keyframes roll-in-right {
  0% {
    transform: translateX(-100%) rotate(-130deg);

    opacity: 0;
  }
  100% {
    transform: translateX(0%) rotate(0deg);

    opacity: 1;
  }
}

@-webkit-keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(-100%) rotate(-130deg);

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

    opacity: 1;
  }
}

/*roll-in-left*/

.roll-in-left {
  -webkit-animation: roll-in-left 1.2s;
  animation: roll-in-left 1.2s;
}

@keyframes roll-in-left {
  0% {
    transform: translateX(100%) rotate(130deg);

    opacity: 0;
  }
  100% {
    transform: translateX(0%) rotate(0deg);

    opacity: 1;
  }
}

@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(100%) rotate(130deg);

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

    opacity: 1;
  }
}

/*flip*/

.flip {
  -webkit-animation: flip 1.3s;
  animation: flip 1.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes flip {
  0% {
    transform: rotateY(-360deg);
  }
  40% {
    transform: scale(1.6) rotateY(-190deg);
  }
  50% {
    transform: scale(1.6) rotateY(-150deg);
  }
  80% {
    transform: scale(.95);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(500px) rotateX(70deg);

    opacity: .2;
  }
  30% {
    -webkit-transform: perspective(500px) rotateX(-50deg);
  }
  45% {
    -webkit-transform: perspective(500px) rotateX(30deg);
  }
  65% {
    -webkit-transform: perspective(500px) rotateX(-20deg);
  }
  85% {
    -webkit-transform: perspective(500px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(500px) rotateX(0deg);
  }
}

/*flip-in-x*/

.flip-in-x {
  -webkit-animation: flip-in-x 1.2s;
  animation: flip-in-x 1.2s;
}

@keyframes flip-in-x {
  0% {
    transform: perspective(500px) rotateX(70deg);

    opacity: .2;
  }
  30% {
    transform: perspective(500px) rotateX(-50deg);
  }
  45% {
    transform: perspective(500px) rotateX(30deg);
  }
  65% {
    transform: perspective(500px) rotateX(-20deg);
  }
  85% {
    transform: perspective(500px) rotateX(10deg);
  }
  100% {
    transform: perspective(500px) rotateX(0deg);
  }
}

@-webkit-keyframes flip-in-x {
  0% {
    -webkit-transform: perspective(500px) rotateX(70deg);

    opacity: .2;
  }
  30% {
    -webkit-transform: perspective(500px) rotateX(-50deg);
  }
  45% {
    -webkit-transform: perspective(500px) rotateX(30deg);
  }
  65% {
    -webkit-transform: perspective(500px) rotateX(-20deg);
  }
  85% {
    -webkit-transform: perspective(500px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(500px) rotateX(0deg);
  }
}

/*flip-in-y*/

.flip-in-y {
  -webkit-animation: flip-in-y 1.2s;
  animation: flip-in-y 1.2s;
}

@keyframes flip-in-y {
  0% {
    transform: perspective(500px) rotateY(70deg);

    opacity: .2;
  }
  30% {
    transform: perspective(500px) rotateY(-50deg);
  }
  45% {
    transform: perspective(500px) rotateY(30deg);
  }
  65% {
    transform: perspective(500px) rotateY(-20deg);
  }
  85% {
    transform: perspective(500px) rotateY(10deg);
  }
  100% {
    transform: perspective(500px) rotateY(0deg);
  }
}

@-webkit-keyframes flip-in-y {
  0% {
    -webkit-transform: perspective(500px) rotateY(70deg);

    opacity: .2;
  }
  30% {
    -webkit-transform: perspective(500px) rotateY(-50deg);
  }
  45% {
    -webkit-transform: perspective(500px) rotateY(30deg);
  }
  65% {
    -webkit-transform: perspective(500px) rotateY(-20deg);
  }
  85% {
    -webkit-transform: perspective(500px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(500px) rotateY(0deg);
  }
}

/*rotate*/

.rotate {
  -webkit-animation: rotate 1s;
  animation: rotate 1s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

/*rotate-in*/

.rotate-in {
  -webkit-animation: rotate-in 1s;
  animation: rotate-in 1s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@keyframes rotate-in {
  0% {
    transform: rotate(-0deg);

    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate-in {
  0% {
    -webkit-transform: rotate(-0deg);

    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

/*rotate-in-x*/

.rotate-in-x {
  -webkit-animation: rotate-in-x 1s;
  animation: rotate-in-x 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes rotate-in-x {
  0% {
    transform: rotateX(180deg);

    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: rotateX(0deg);
  }
}

@-webkit-keyframes rotate-in-x {
  0% {
    -webkit-transform: rotateX(180deg);

    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(0deg);
  }
}

/*rotate-in-y*/

.rotate-in-y {
  -webkit-animation: rotate-in-y 1s;
  animation: rotate-in-y 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes rotate-in-y {
  0% {
    transform: rotateY(-180deg);

    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);

    opacity: 1;
  }
}

@-webkit-keyframes rotate-in-y {
  0% {
    -webkit-transform: rotateY(0deg);

    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(360deg);
  }
}

/*rotate-in-scale*/

.rotate-in-scale {
  -webkit-animation: rotate-in-scale 1s;
  animation: rotate-in-scale 1s;
  -webkit-animation-timing-function: easec;
  animation-timing-function: ease-in-out;
}

@keyframes rotate-in-scale {
  0% {
    transform: scale(0) rotate(-540deg);

    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@-webkit-keyframes rotate-in-scale {
  0% {
    -webkit-transform: scale(0) rotate(-540deg);

    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg);
  }
}

/*turn-in-x*/

.turn-in-x {
  -webkit-animation: turn-in-x 1s;
  animation: turn-in-x 1s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@keyframes turn-in-x {
  0% {
    transform: rotateX(360deg) scale(0);

    opacity: 0;
  }
  100% {
    transform: rotateX(0deg) scale(1);

    opacity: 1;
  }
}

@-webkit-keyframes turn-in-x {
  0% {
    -webkit-transform: rotateX(360deg) scale(0);

    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg) scale(1);

    opacity: 1;
  }
}

/*turn-in-y*/

.turn-in-y {
  -webkit-animation: turn-in-y 1s;
  animation: turn-in-y 1s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@keyframes turn-in-y {
  0% {
    transform: rotateY(0deg) scale(0);

    opacity: 0;
  }
  100% {
    transform: rotateY(360deg) scale(1);

    opacity: 1;
  }
}

@-webkit-keyframes turn-in-y {
  0% {
    -webkit-transform: rotateY(0deg) scale(0);

    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(360deg) scale(1);

    opacity: 1;
  }
}

/*Back*/


/*back in right*/

.back-in-right {
  -webkit-animation: back-in-right 1.5s;
  animation: back-in-right 1.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes back-in-right {
  0% {
    transform: translateX(-2000px) scale(.7);

    opacity: .7;
  }
  80% {
    transform: translateX(0px) scale(.7);

    opacity: .7;
  }
  100% {
    transform: scale(1);

    opacity: 1;
  }
}

@-webkit-keyframes back-in-right {
  0% {
    -webkit-transform: translateX(-2000px) scale(.7);

    opacity: .7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(.7);

    opacity: .7;
  }
  100% {
    -webkit-transform: scale(1);

    opacity: 1;
  }
}

/*back in left*/

.back-in-left {
  -webkit-animation: back-in-left 1.5s;
  animation: back-in-left 1.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes back-in-left {
  0% {
    transform: translateX(2000px) scale(.7);

    opacity: .7;
  }
  80% {
    transform: translateX(0px) scale(.7);

    opacity: .7;
  }
  100% {
    transform: scale(1);

    opacity: 1;
  }
}

@-webkit-keyframes back-in-left {
  0% {
    -webkit-transform: translateX(2000px) scale(.7);

    opacity: .7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(.7);

    opacity: .7;
  }
  100% {
    -webkit-transform: scale(1);

    opacity: 1;
  }
}

/*back in up*/

.back-in-up {
  -webkit-animation: back-in-up 1.5s;
  animation: back-in-up 1.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes back-in-up {
  0% {
    transform: translateY(1200px) scale(.7);

    opacity: .7;
  }
  80% {
    transform: translateY(0px) scale(.7);

    opacity: .7;
  }
  100% {
    transform: scale(1);

    opacity: 1;
  }
}

@-webkit-keyframes back-in-up {
  0% {
    -webkit-transform: translateY(1200px) scale(.7);

    opacity: .7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(.7);

    opacity: .7;
  }
  100% {
    -webkit-transform: scale(1);

    opacity: 1;
  }
}

/*back in down*/

.back-in-down {
  -webkit-animation: back-in-down 1.5s;
  animation: back-in-down 1.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes back-in-down {
  0% {
    transform: translateY(-1200px) scale(.7);

    opacity: .7;
  }
  80% {
    transform: translateY(0px) scale(.7);

    opacity: .7;
  }
  100% {
    transform: scale(1);

    opacity: 1;
  }
}

@-webkit-keyframes back-in-down {
  0% {
    -webkit-transform: translateY(-2000px) scale(.7);

    opacity: .7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(.7);

    opacity: .7;
  }
  100% {
    -webkit-transform: scale(1);

    opacity: 1;
  }
}

/*push-in-up*/

.push-in-up {
  transform-origin: 50% 100% 0;
  -webkit-animation: push-in-up 1s;
  animation: push-in-up 1s;

  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@keyframes push-in-up {
  0% {
    transform: rotateX(90deg);

    opacity: 0;
  }
  100% {
    transform: none;
  }
}

@-webkit-keyframes push-in-up {
  0% {
    -webkit-transform: rotateX(90deg);

    opacity: 0;
  }
  100% {
    -webkit-transform: none;
  }
}

/*push-in-down*/

.push-in-down {
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-animation: push-in-down 1s;
  animation: push-in-down 1s;

  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@keyframes push-in-down {
  0% {
    transform: rotateX(-90deg);

    opacity: 0;
  }
  100% {
    transform: none;
  }
}

@-webkit-keyframes push-in-down {
  0% {
    -webkit-transform: rotateX(-90deg);

    opacity: 0;
  }
  100% {
    -webkit-transform: none;
  }
}

/*push-in-right*/

.push-in-right {
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-animation: push-in-right 1s;
  animation: push-in-right 1s;

  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  transform-style: preserve-3d;
}

@keyframes push-in-right {
  0% {
    transform: rotateY(90deg);

    opacity: 0;
  }
  100% {
    transform: none;
  }
}

@-webkit-keyframes push-in-right {
  0% {
    -webkit-transform: rotateY(90deg);

    opacity: 0;
  }
  100% {
    -webkit-transform: none;
  }
}

/*push-in-left*/

.push-in-left {
  -webkit-transform-origin: 100% 50% 0;
  transform-origin: 100% 50% 0;
  -webkit-animation: push-in-left 1s;
  animation: push-in-left 1s;

  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  transform-style: preserve-3d;
}

@keyframes push-in-left {
  0% {
    transform: rotateY(-90deg);

    opacity: 0;
  }
  100% {
    transform: none;
  }
}

@-webkit-keyframes push-in-left {
  0% {
    -webkit-transform: rotateY(-90deg);

    opacity: 0;
  }
  100% {
    -webkit-transform: none;
  }
}

/* Clip */


/*clip-x-in*/

.clip-x-in {
  -webkit-animation: clip-x-in 1s;
  animation: clip-x-in 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes clip-x-in {
  0% {
    transform: scale(1, 0);
  }
  100% {
    transform: none;
  }
}

@-webkit-keyframes clip-x-in {
  0% {
    -webkit-transform: scale(1, 0);
  }
  100% {
    -webkit-transform: none;
  }
}

/*clip-y-in*/

.clip-y-in {
  -webkit-animation: clip-y-in 2s;
  animation: clip-y-in 2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes clip-y-in {
  0% {
    transform: scale(0, 1);
  }
  100% {
    transform: none;
  }
}

@-webkit-keyframes clip-y-in {
  0% {
    -webkit-transform: scale(0, 1);
  }
  100% {
    -webkit-transform: none;
  }
}

/*clip-xy-in*/

.clip-xy-in {
  -webkit-animation: clip-xy-in 1s;
  animation: clip-xy-in 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes clip-xy-in {
  0% {
    transform: scale(0, .5);
  }
  50% {
    transform: scale(1, .5);
  }
  100% {
    transform: none;
  }
}

@-webkit-keyframes clip-xy-in {
  0% {
    -webkit-transform: scale(0, .5);
  }
  50% {
    -webkit-transform: scale(1, .5);
  }
  100% {
    -webkit-transform: none;
  }
}

/*float*/

.float {
  -webkit-animation: float 1.6s;
  animation: float 1.6s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@-webkit-keyframes float {
  0%,
  100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-20px);
  }
}

/*orbit*/

.orbit {
  -webkit-animation: orbit 3s;
  animation: orbit 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(20px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(20px) rotate(-360deg);
  }
}

@-webkit-keyframes orbit {
  0% {
    -webkit-transform: rotate(0deg) translateX(20px) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg);
  }
}

/*scale-in*/

.scale-in {
  -webkit-animation: scale-in 1.5s;
  animation: scale-in 1.5s;
}

@keyframes scale-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes scale-in {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

/*自定義動畫*/


.loading-logo {
  -webkit-animation: fade-in 1s;
  animation: fade-in 1s;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
}

.banner-orbit {
  -webkit-animation: banner-orbit 60s;
  animation: banner-orbit 60s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes banner-orbit {
  0% {
    transform: rotate(0deg) translateX(10px) rotate(0deg) scale(1.1, 1.1);
  }
  50% {
    transform: rotate(360deg) translateX(20px) rotate(-370deg) scale(1.4, 1.4);
  }
  100% {
    transform: rotate(720deg) translateX(10px) rotate(-720deg) scale(1.1, 1.1);
  }
}

@-webkit-keyframes banner-orbit {
  0% {
    -webkit-transform: rotate(0deg) translateX(10px) rotate(0deg) scale(1.2, 1.2);
  }
  50% {
    -webkit-transform: rotate(360deg) translateX(20px) rotate(-370deg) scale(1.4, 1.4);
  }
  100% {
    -webkit-transform: rotate(720deg) translateX(10px) rotate(-720deg) scale(1.1, 1.1);
  }
}


.banner-float {
  -webkit-animation: banner-float 30s;
  animation: banner-float 30s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes banner-float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(20px, 50px) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@-webkit-keyframes banner-float {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(20px, 50px) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}