/* Para animações */
.div-animated1 {
  animation: myAnimBottom 2s ease 0s 1 normal forwards;
}

.div-animated2 {
  animation: myAnimBottom 2.5s ease 0s 1 normal forwards;
}

.div-animated3 {
  animation: myAnimBottom 3s ease 0s 1 normal forwards;
}

.div-animated4 {
  animation: myAnimLeft 2s ease 0s 1 normal forwards;
}

.div-animated5 {
  animation: myAnimRight 2s ease 0s 1 normal forwards;
}

.div-animated6 {
  animation: myAnimLeft 2s ease 0s 1 normal forwards;
}

.div-animated7 {
  animation: myAnimCenter 5s ease 0s 1 normal forwards;
}

.div-animated8 {
  animation: myAnimTop 1s ease 0s 1 normal forwards;
}

.div-animated9 {
  animation: myAnimLeft 1.5s ease 0s 1 normal forwards;
}

.div-animated10 {
  animation: myAnimRight 1.5s ease 0s 1 normal forwards;
}




@keyframes myAnimBottom {
  0% {
    opacity: 0;
    transform: translateY(250px);
  }

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

@keyframes myAnimLeft {
  0% {
    opacity: 0;
    transform: translateX(-250px);
  }

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

@keyframes myAnimRight {
  0% {
    opacity: 0;
    transform: translateX(250px);
  }

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

@keyframes myAnimCenter {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

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