#preloader-2{
    background: #1B0141; 
    position: absolute;
    z-index: 10003;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
}
.cerrar-preloader{
    animation-name : cerrar-preloader;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-iteration-count: 1;

}
@keyframes cerrar-preloader{
    0%{
        opacity: 1;
    }
    10%{
        opacity: 0.9;
    }
    20%{
        opacity: 0.8;
    }
    30%{
        opacity: 0.7;
    }
    40%{
        opacity: 0.6;
    }
    50%{
        opacity: 0.5;
    }
    60%{
        opacity: 0.4;
    }
    70%{
        opacity: 0.3;
    }
    80%{
        opacity: 0.2;
    }
    90%{
        opacity: 0.1;
    }
    100%{
        opacity: 0;
    }
}

.loader{
    width: 58px;
    height: 58px;
    margin: 100px auto;
    position: relative;
}
.loader div{
    display: block;
    width: 12px;
    height: 12px;
    background: #dafe44;
    opacity: 0;
    position: absolute;
    -webkit-animation: loading-1 3.5s ease-in-out infinite;
    animation: loading-1 3.5s ease-in-out infinite;
}
.loader .box-1{
    top: 0;
    left: 0;
    animation-delay: 1.06s;
}
.loader .box-2{
    top: 0;
    left: 16px;
    animation-delay: 0.97s;
}
.loader .box-3{
    top: 0;
    left: 31px;
    animation-delay: 0.87s;
}
.loader .box-4{
    top: 0;
    left: 47px;
    animation-delay: 0.78s;
}
.loader .box-5{
    top: 16px;
    left: 0;
    animation-delay: 0.69s;
}
.loader .box-6{
    top: 16px;
    left: 16px;
    animation-delay: 0.6s;
}
.loader .box-7{
    top: 16px;
    left: 31px;
    animation-delay: 0.51s;
}
.loader .box-8{
    top: 16px;
    left: 47px;
    animation-delay: 0.41s;
}
.loader .box-9{
    top: 31px;
    left: 0;
    animation-delay: 0.32s;
}
.loader .box-10{
    top: 31px;
    left: 16px;
    animation-delay: 0.23s;
}
.loader .box-11{
    top: 31px;
    left: 31px;
    animation-delay: 0.14s;
}
.loader .box-12{
    top: 31px;
    left: 47px;
    animation-delay: 0.05s;
}
.loader .box-13{
    top: 47px;
    left: 0;
    animation-delay: -0.05s;
}
.loader .box-14{
    top: 47px;
    left: 16px;
    animation-delay: -0.14s;
}
.loader .box-15{
    top: 47px;
    left: 31px;
    animation-delay: -0.23s;
}
.loader .box-16{
    top: 47px;
    left: 47px;
    animation-delay: -0.32s;
}
@-webkit-keyframes loading-1{
    0%{
        opacity: 0;
        -webkit-transform: translateY(-97px);
    }
    15%{
        opacity: 0;
        -webkit-transform: translateY(-97px);
    }
    30%{
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    70%{
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    85%{
        opacity: 0;
        -webkit-transform: translateY(97px);
    }
    100%{
        opacity: 0;
        -webkit-transform: translateY(97px);
    }
}
@keyframes loading-1{
    0%{
        opacity: 0;
        transform: translateY(-97px);
    }
    15%{
        opacity: 0;
        transform: translateY(-97px);
    }
    30%{
        opacity: 1;
        transform: translateY(0);
    }
    70%{
        opacity: 1;
        transform: translateY(0);
    }
    85%{
        opacity: 0;
        transform: translateY(97px);
    }
    100%{
        opacity: 0;
        transform: translateY(97px);
    }
}