.logo {
  /*position: absolute;*/
  padding-top: 280px;
  animation-name: logoanimado;
  animation-duration: 7s;
  animation-iteration-count:1;
  opacity: 0;}
@keyframes logoanimado{
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
    
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.instrucciones {
  position: relative;
  top: -310px;
  animation-name: instruanimado;
  animation-duration: 20s;
  animation-iteration-count:1;
  opacity: 1}
@keyframes instruanimado{
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.btn-transporte {
  animation-name: transanimado;
  animation-duration: 15s;
  animation-iteration-count:1;    
}
@keyframes transanimado{
      0% {
        opacity: 0;
      }
      75% {
        opacity: 0;
      }
      85% {
        opacity: 1;
      }
}

@media only screen and (max-width: 640px){

    .ctn-header-comercio{
        text-align: left;
    }
    .instrucciones {
          position: relative;
          top: -330px;
          animation-name: instruanimado;
          animation-duration: 20s;
          animation-iteration-count:1;
          opacity: 1;
    }

}