@keyframes slideInLeft {
    0% {
        transform: translateX(-500px);
    }

    100% {
        transform: translateX(0);
    }
}
@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-500px);
        transform: translateX(-500px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
  
@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-500px);
    }
}
@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-500px);
        transform: translateX(-500px);
    }
}


@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}
@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@-webkit-keyframes slide-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-500px);
              transform: translateX(-500px);
    }
  }
  @keyframes slide-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-500px);
              transform: translateX(-500px);
    }
  }

  @keyframes createBox {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }

  @keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }

  @-webkit-keyframes background {
    0% { background-color: var(--color-disenio); }
    10% { background-color: var(--color-local); }  
    20% { background-color: var(--color-versatilidad); }
    30% { background-color: var(--color-humano); }
    40% { background-color: var(--color-innovacion); }  
    50% { background-color: var(--color-calidad); }  
    60% { background-color: var(--color-confianza); }  
    70% { background-color: var(--color-tendencia); }  
    80% { background-color: var(--color-inteligente); }  
    90% { background-color: var(--color-actualizacion); }  
    100% { background-color: var(--color-disenio); }
  }
  
  @keyframes background {
    0% { background-color: var(--color-disenio); }
    10% { background-color: var(--color-local); }  
    20% { background-color: var(--color-versatilidad); }
    30% { background-color: var(--color-humano); }
    40% { background-color: var(--color-innovacion); }  
    50% { background-color: var(--color-calidad); }  
    60% { background-color: var(--color-confianza); }  
    70% { background-color: var(--color-tendencia); }  
    80% { background-color: var(--color-inteligente); }  
    90% { background-color: var(--color-actualizacion); }  
    100% { background-color: var(--color-disenio); }
  }