.animated {
  animation-duration: 1.3s;
  animation-fill-mode: both;
}
@keyframes fadeinup{
  1% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeinup {
  animation-name: fadeinup;
}

@keyframes fadeinright{
  1% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeinright {
  animation-name: fadeinright;
}

@keyframes fadeinleft{
  1% {
    opacity: 0;
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeinleft {
  animation-name: fadeinleft;
}

@keyframes fadeindown{
  1% {
    opacity: 0;
    transform: translateY(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeindown {
  animation-name: fadeindown;
}

@keyframes fadein {
  1% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadein {
  animation-name: fadein;
}
@keyframes moveTR{
  1%{
    opacity: 0;
    transform: translate(0, 0);
  }
  100%{
    opacity: 1;
    transform: translate(10px, -10px);
  }
}
.moveTR{
  animation-name: moveTR;
}

@keyframes change{
  1%{
    
  }
  50%{

  }
  100%{

  }
}