/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 15/02/2024, 7:55:49 p. m.
    Author     : alexf
*/
/*
index.html
<div class='containerLoadingFirstTime containerLoadingFirstTime_index containerAnim'><div class='containerAnimInt'><div class='containerAnimLogo1'></div><div class='containerAnimLogo2'></div></div></div>
nwmaker-2.min.js
<div class='containerAnim'><div class='containerAnimInt'><div class='containerAnimLogo1'></div><div class='containerAnimLogo2'></div></div></div>
*/
.containerAnim{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #014dc4;
    z-index: 1000;
    background-image: url(../img/animacion_logo/fondo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.containerAnimInt{
    position: relative;
    top: 30%;
    /*left: 20%;*/

    width: 260px;
    margin: auto;
}
.containerAnimLogo1{
    position: absolute;
    /*background-image: url(../img/animacion_logo/logo1.png);*/
    background-image: url(../img/animacion_logo/logosimbolo.png);
    width: 80px;
    height: 80px;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
    left: 0px;
    top: 0;

    opacity: 0;
    animation-name: slidein;
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    z-index: 2;
}
.containerAnimLogo2{
    z-index: 1;
    position: absolute;
    /*background-image: url(../img/animacion_logo/logo2.png);*/
    background-image: url(../img/animacion_logo/saeplusslogannuevo.png);
    width: 180px;
    height: 102px;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
    /*left: 32px;*/
    left: 83px;
    top: 0;
    opacity: 0;
    animation-name: slidelogo2;
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-direction: alternate;
}


@keyframes slidein {
    0% {
        left: -1000px;
        opacity: 1;
    }
    20% {
        left: 0px;
        opacity: 1;
    }
    60% {
        left: 0px;
        opacity: 1;
    }
    70% {
        left: 40px;
        opacity: 0;
    }
    100% {
        left: 40px;
        opacity: 0;
    }
}

@keyframes slidelogo2 {
    0% {
        /*left: -1000px;*/
        left: -109px;
        opacity: 0;
    }
    20% {
        /*left: -1000px;*/
        left: -109px;
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    40% {
        left: 76px;
        opacity: 1;
    }
    60% {
        left: 76px;
        opacity: 1;
    }
    65% {
        opacity: 0;
    }
    70% {
        left: -40px;
        opacity: 0;
    }
    100% {
        left: -40px;
        opacity: 0;
    }
}