/* defines the animation */

@-webkit-keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translate3d(0, 100%, 0);

  }

  to {

    opacity: 1;

    transform: none;

  }

}

@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translate3d(0, 100%, 0);

  }

  to {

    opacity: 1;

    transform: none;

  }

}

p {

  opacity: 0;

  -webkit-animation: fadeInUp 1s ease-in-out 0s forwards;

          animation: fadeInUp 1s ease-in-out 0s forwards;

}

p.first {

  -webkit-animation-delay: 1s;

          animation-delay: 1s;

}

p.second {

  -webkit-animation-delay: 3s;

          animation-delay: 3s;

}

p.third {

  -webkit-animation-delay: 5s;

          animation-delay: 5s;

}

p.fourth {

  -webkit-animation-delay: 7s;

          animation-delay: 7s;

}

p.fifth {

  -webkit-animation-delay: 9s;

          animation-delay: 9s;

}

p.sixth {

  -webkit-animation-delay: 11s;

          animation-delay: 11s;

}

/* now add general css for page */

body {

  text-align: center;

  font-size: 34px;

  color: #424243;

  font-family: 'Roboto Condensed', sans-serif;

  font-weight: 300;

}

p {

  margin: 10px 0;

  display: inline-block;

  font-weight: 300;

}

.emphasis {

  color: #fb6e67;

}





img {

  opacity: 0;

  -webkit-animation: fadeInUp 1s ease-in-out 0s forwards;

          animation: fadeInUp 1s ease-in-out 0s forwards;

}



.bloqueefecto {

  opacity: 0;

  -webkit-animation: fadeInUp 1s ease-in-out 0s forwards;

          animation: fadeInUp 1s ease-in-out 0s forwards;

}

.bloqueefecto.primero {

  -webkit-animation-delay: 1s;

          animation-delay: 1s;

}

.bloqueefecto.segundo {

  -webkit-animation-delay: 2s;

          animation-delay: 2s;

}

.bloqueefecto.tercero {

  -webkit-animation-delay: 3s;

          animation-delay: 3s;

}

.bloqueefecto.cuarto {

  -webkit-animation-delay: 4s;

          animation-delay: 4s;

}

.bloqueefecto.quinto {

  -webkit-animation-delay: 5s;

          animation-delay: 5s;

}

.bloqueefecto.sexto {

  -webkit-animation-delay: 6s;

          animation-delay: 6s;

}

.bloqueefecto.septimo {

  -webkit-animation-delay: 7s;

          animation-delay: 7s;

}

.bloqueefecto.octavo {

  -webkit-animation-delay: 8s;

          animation-delay: 8s;

}

.bloqueefecto.noveno {

  -webkit-animation-delay: 9s;

          animation-delay: 9s;

}