@keyframes ocultaLoading {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes animaCapa {
  0% { left: 40%; }
  50% { left: 45%; }
  100% { left: 60%; }
}

@keyframes animaLogo {
  0% { width: 0px; opacity: 0; }
  100% { width: 250px; opacity: 1; }
}

#loading{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFF;
  z-index: 999999999;

  animation: ocultaLoading .5s forwards;
  animation-delay: 1.5s;

  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#loading img{
  margin: auto;
  position: relative;
  z-index: 2;
  animation: animaLogo .5s forwards;
  opacity: 0;
}

#loading .capa{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, .9);
  animation: animaCapa 2s forwards;
  animation-timing-function: ease-out;
}

@media (max-width: 900px){
  @keyframes animaCapa {
    0% { left: 0%; }
    100% { left: 100%; }
  }
}