/******************
 * fadein
 */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/******************
 * fadein and move up 
 */
@-webkit-keyframes moveUpfadeIn {
  from {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1; } }
@keyframes moveUpfadeIn {
  from {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1; } }

/******************
 * fadein and move down
 */
@-webkit-keyframes moveUpfadeDown {
  from {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1; } }
@keyframes moveUpfadeDown {
  from {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1; } }

/******************
 * fadein and move up for centering element
 * adjust the translate interference
 */
@-webkit-keyframes moveUpfadeInForCentering {
  from {
    -webkit-transform: translate(-50%, calc(-50% + 30px));
    transform: translate(-50%, calc(-50% + 30px));
    opacity: 0; }
  to {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1; } }
@keyframes moveUpfadeInForCentering {
  from {
    -webkit-transform: translate(-50%, calc(-50% + 30px));
    transform: translate(-50%, calc(-50% + 30px));
    opacity: 0; }
  to {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1; } }

/******************
 * scale up
 */
@-webkit-keyframes scaleUp {
  from {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
@keyframes scaleUp {
  from {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

/******************
 * wiggle
 */
@-webkit-keyframes wiggle {
  0% {
    opacity: 0;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg); }
  25% {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg); }
  50% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg); }
  75% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }
@keyframes wiggle {
  0% {
    opacity: 0;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg); }
  25% {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg); }
  50% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg); }
  75% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

/******************
 * slide right
 */
@-webkit-keyframes slideRight {
  0% {
    opacity: 0;
    right: 200px; }
  100% {
    opacity: 1;
    right: 170px; } }
@keyframes slideRight {
  0% {
    opacity: 0;
    right: 200px; }
  100% {
    opacity: 1;
    right: 170px; } }

@-webkit-keyframes slideRight_sp {
  0% {
    opacity: 0;
    right: 100px; }
  100% {
    opacity: 1;
    right: 0px; } }

@keyframes slideRight_sp {
  0% {
    opacity: 0;
    right: 100px; }
  100% {
    opacity: 1;
    right: 0px; } }

/******************
 * slide left
 */
@-webkit-keyframes slideLeft {
  0% {
    opacity: 0;
    left: 100px; }
  100% {
    opacity: 1;
    left: 20px; } }
@keyframes slideLeft {
  0% {
    opacity: 0;
    left: 100px; }
  100% {
    opacity: 1;
    left: 20px; } }

/******************
 *
 * delays
 * 
 */
.delay-03 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }

.delay-06 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s; }

.delay-09 {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s; }

.delay-12 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s; }

/******************
 *
 * class names to invoke
 * 
 */
.fadein {
  opacity: 0;
  will-change: opacity; }
  .fadein.showup {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

.moveup-fadein {
  opacity: 0;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  will-change: opacity transform; }
  .moveup-fadein.showup {
    -webkit-animation-name: moveUpfadeIn;
    animation-name: moveUpfadeIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

.movedown-fadein {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  will-change: opacity transform; }
  .movedown-fadein.showup {
    -webkit-animation-name: moveUpfadeDown;
    animation-name: moveUpfadeDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

.wiggle {
  opacity: 0; }
  .wiggle.showup {
    -webkit-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

.scaleup.showup {
  -webkit-animation-name: scaleUp;
  animation-name: scaleUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.slide-right {
  right: 200px;
  opacity: 0; }
  .slide-right.showup {
    -webkit-animation-name: slideRight;
    animation-name: slideRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }
    @media screen and (max-width: 600px) {
      .slide-right.showup {
        -webkit-animation-name: slideRight_sp;
        animation-name: slideRight_sp; } }

.slide-left {
  left: 100px;
  opacity: 0; }
  .slide-left.showup {
    -webkit-animation-name: slideLeft;
    animation-name: slideLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

@media screen and (max-width: 600px) {
  .animation_sp {
    opacity: 1 !important; } }