.animToRight-animation {
  animation-name: toRight;
  animation-duration: 4s;
  /*--*/
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function:ease;
  animation-fill-mode: both;
  /*animation-play-state: running;*/
}

@keyframes toRight {
  0% {
    opacity: 0%;
    padding-right: 20px;
  }
  50% {
    opacity: 0%;
    padding-right: 20px;
  }
  100% {
    opacity: 100%;
    padding-right: 0px;
 }
}

.animToRightFast-animation {
  animation-name: toRightFast;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function:ease;
  animation-fill-mode: both;
}

@keyframes toRight {
  0% {
    opacity: 0%;
    padding-right: 20px;
  }
  100% {
    opacity: 100%;
    padding-right: 0px;
 }
}

.enterToLeft-animation {
  animation-name: enterToLeft;
  animation-duration: 2s;
  animation-delay: 0s;
}

@keyframes enterToLeft {
  0% {
    margin-right: -400px;
  }
  100% {
    margin-right: 0px;
 }
}

.enterToRight-animation {
  animation-name: enterToRight;
  animation-duration: 2s;
  animation-delay: 0s;
}

@keyframes enterToRight {
  0% {
    margin-left: -100px;
  }
  100% {
    margin-left: 0px;
 }
}

.animToLeft-animation {
  animation-name: toLeft;
  animation-duration: 4s;
  animation-delay: 0s;
}

.animToLeft-animation {
  animation-name: toLeft;
  animation-duration: 4s;
  animation-delay: 0s;
}

@keyframes toLeft {
  0% {
    opacity: 0%;
    padding-left: 20px;
  }
  50% {
    opacity: 0%;
    padding-left: 20px;
  }
  100% {
    opacity: 100%;
    padding-left: 0px;
 }
}

.animToLeftFast-animation {
  animation-name: toLeft;
  animation-duration: 2s;
  animation-delay: 0s;
}

@keyframes toLeft {
  0% {
    opacity: 0%;
    padding-left: 20px;
  }
  100% {
    opacity: 100%;
    padding-left: 0px;
 }
}

.animFontIn-animation {
  animation-name: fontIn;
  animation-duration: 1s;
  animation-timing-function:ease-in;
}

@keyframes fontIn {
  from {
      font-size: 4px;
  }
  to {
      font-size: var(--tfF-small);
  }
}

.animToUp-animation {
  animation-name: toUp;
  animation-duration: 2s;
  /* animation-timing-function:ease-in; */
}

@keyframes toUp {
  from {
    padding-top: 300px;
  }
  to {
    padding-top: 10px;
  }
}

.animFadeIn-animation {
  animation-name: fadeIn;
  animation-duration: 2s;
  /* animation-timing-function:ease-in; */
}

@keyframes fadeIn {
  from {
      opacity: 0%;
  }
  to {
      opacity: 100%;
  }
}

.animFadeIn0-animation {
  animation-name: fadeInDelayed;
  animation-duration: 1s;
  animation-timing-function:ease;
}
.animFadeIn1-animation {
  animation-name: fadeInDelayed;
  animation-duration: 2s;
  animation-timing-function:ease;
}
.animFadeIn1a-animation {
  animation-name: halfFadeInDelayed;
  animation-duration: 2s;
  animation-timing-function:ease;
}

.animFadeIn2-animation {
  animation-name: fadeInDelayed;
  animation-duration: 3s;
  animation-timing-function:ease;
}
.animFadeIn3-animation {
  animation-name: fadeInDelayed;
  animation-duration: 4s;
  animation-timing-function:ease;
}

@keyframes fadeInDelayed {
  0%, 50% {
      opacity: 0%;
  }
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@keyframes halfFadeInDelayed {
  from {
    opacity: 20%;
  }
  to {
    opacity: 100%;
  }
}

.animSwingX-animation {
  animation-name: swingX;
  /* animation-name: wiggle; */
  animation-duration: 1.0s;
  animation-delay: 1.5s;
}

.animSwingX2-animation {
  animation-name: swingX;
  animation-duration: 1.0s;
}

@keyframes swingX {
  0% {
      opacity: 0%;
  }
  12%, 67% {
    /* transform: rotateX(20deg); */
    transform: rotate3d(1,0,0.1,20deg); 
  }
  25%, 75% {
    /* transform: rotateX(0deg); */
    transform: rotate3d(0,0,0,0deg); 
    }
    50% {
        transform: rotate3d(0,0,0,0deg); 
        opacity: 50%;
    }
    37%, 87% {
    /* transform: rotateX(-20deg); */
    transform: rotate3d(1,0,0.1,-20deg);
  }
}  

@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}