@charset "utf-8";

/* Animation */

.fadein {
  -webkit-transition: all 5s;
  transition: all 5s;
  opacity: 0
}
.fadein.active {
  opacity: 1
}
.fadein.move-to-top {
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: translateY(50px);
  transform: translateY(50px)
}
.fadein.move-to-top.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.fadein.move-to-bottom {
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px)
}
.fadein.move-to-bottom.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.fadein.move-to-left {
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: translateX(100px);
  transform: translateX(100px)
}
.fadein.move-to-left.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}
.fadein.move-to-right {
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px)
}
.fadein.move-to-right.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}


.fadeout {
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 1
}
.fadeout.active {
  opacity: 0
}
.fadeout.move-to-top {
  -webkit-transform: translateY(50px);
  transform: translateY(50px)
}
.fadeout.move-to-top.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.fadeout.move-to-bottom {
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px)
}
.fadeout.move-to-bottom.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.fadeout.move-to-left {
  -webkit-transform: translateX(50px);
  transform: translateX(50px)
}
.fadeout.move-to-left.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}
.fadeout.move-to-right {
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px)
}
.fadeout.move-to-right.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}

.rotate {
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0
}
.rotate.active {
  -webkit-transform: rotate(0) scale(1, 1);
  transform: rotate(0) scale(1, 1);
  opacity: 1
}
.rotate.move-to-top {
  -webkit-transform: translateY(50px) rotate(-45deg) scale(0.5, 0.5);
  transform: translateY(50px) rotate(-45deg) scale(0.5, 0.5)
}
.rotate.move-to-top.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.rotate.move-to-bottom {
  -webkit-transform: translateY(-500px) rotate(-45deg) scale(0.5, 0.5);
  transform: translateY(-500px) rotate(-45deg) scale(0.5, 0.5)
}
.rotate.move-to-bottom.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.rotate.move-to-left {
  -webkit-transform: translateX(500px) rotate(45deg) scale(0.5, 0.5);
  transform: translateX(500px) rotate(45deg) scale(0.5, 0.5)
}
.rotate.move-to-left.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}
.rotate.move-to-right {
  -webkit-transform: translateX(-500px) rotate(-45deg) scale(0.5, 0.5);
  transform: translateX(-500px) rotate(-45deg) scale(0.5, 0.5)
}
.rotate.move-to-right.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}

@media screen and (max-width: 768px) {
	.fadein.move-to-right {
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px)
}
	.fadein.move-to-left {
  -webkit-transform: translateX(10px);
  transform: translateX(10px)
}
}