#preloader { position: fixed; width: 100vw; height: 100vh; z-index: 500; left: 0; top: 0; overflow: hidden; }
#preloader.desactivar { animation: pantalla 2s linear; animation-fill-mode: forwards; }
#preloader .figura { width: 10vw; height: 10vw; position: absolute; left: 45%; top: 45%; transform-origin: center; border-radius: 50%;      
    background: #fff; z-index: 501; }
#preloader img { width: 10vw; position: absolute; left: 45%; top: 45%; z-index: 503; }
#preloader.desactivar .figura { animation: figura 2s ease-in; animation-fill-mode: forwards; }
@keyframes pantalla {
    0% { opacity: 1; background: var(--clr-main); z-index: 500; }
    50% { opacity: 1; background: var(--clr-main); }
    99% { opacity: 0; background: #eee; }
    100% { z-index: -100; }
}
@keyframes figura {
    0% { transform: scale(0); opacity: 0; border-radius: 5px; }
    10% { transform: scale(0.5); opacity: 1; border-radius: 15%; }
    25% { border-radius: 50%; }
    50% { transform: scale(2); opacity: 1; }
    99% { transform: scale(100); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

/* Tamaño Mediano */
@media screen and (max-width: 992px) {
    #preloader .figura { width: 15vw; height: 15vw; left: 42.5vw; top: 42.5%; }
    #preloader img { width: 15vw; left: 42.5vw; top: 42.5%; }
}

/* Tamaño pequeño */
@media screen and (max-width: 576px) {
    #preloader .figura { width: 25vw; height: 25vw; left: 37.5vw; top: 37.5%; }
    #preloader img { width: 25vw; left: 37.5vw; top: 37.5%; }
}