/* Contenedores de las animaciones */
.AnimationPrincipalContainer{
    padding: 10px;
	padding-top: 0px;
    z-index: 5;
    opacity: 100%;
    margin-left: 5px;
    animation: Indice0 forwards 0.5s 3.8s;
}

.reinicioClass{
    display: none;
}

.SecondPartAnimationEntrada{
    padding: 10px;
    position: absolute;
    top: 15px; 
    left: 0;
    right: 0;
    height: 500px;
    width: 500px;
    overflow: hidden;
    border-radius: 25px;
    margin-left: 5px;
    opacity: 0;
    z-index: 0;
    animation: SegundaParteAnimation forwards 0.5s 4.3s, 
    Indice0 forwards 0.5s 8.7s;
    padding-bottom: 10px;
}

.ThirdPartAnimationEntrada{
    position: absolute;
    top: 15px;
    left: 25px;
    right: 0;
    height: 480px;
    width: 480px;
    overflow: hidden;
    border-radius: 25px;
    padding: 10px;
    z-index: 0;
    opacity: 0;
    animation: forwards TerceraParteAnimation 0.5s 8.7s,
    Indice0 forwards 0.5s 13s ; 
    
    
}
.EntradaC{
    /*background-color: #F7FAFF;*/
    /*box-shadow: 20px 20px rgb(140 152 164 / 13%);*/
    height: 495px;
    width: 480px;
    overflow: hidden;
    border-radius: 25px;
    border-top-left-radius: 0px;
	border-top-right-radius: 0px;
    
}

/*  FIN de los contenedores */
.EntradaAnimationPrincipal{
    
    height: 495px;
    width: 480px;
    overflow: hidden;
    
    border-radius: 25px;
  
    

   
}

@keyframes reinicio {
    0%{
        display: none;
    }
    100%{
        display: none;
    
    }
}
@keyframes ApareceNuevo {
    0%{
        display: block;
    }
    100%{
        display: block;
        z-index: 10;
    }
}
#ulAnimacionEntrada{
    padding-left: 0;
	margin-top: 0px;
}
#ulAnimacionEntrada2{
    padding-left: 0;
}
#ulAnimacionEntrada3{
    padding-left: 0;
}
.ulAnimacionEntrada{
    list-style-type: none;
    width: 100%;
    height: 100%;


}

#ulAnimacionEntrada > li{
    list-style-type: none;
    width: 100%;
}
#ulAnimacionEntrada2 > li{
   list-style-type: none;
    width: 100%;
}
#ulAnimacionEntrada3 > li{
   list-style-type: none;
    width: 100%;
}

.MsgBajas{
    float: left;
}

.liMsg{
    opacity: 100%; 
    transform: translateY(100px);
    animation:forwards aparecer 0.5s 0.1s,
    Muevete forwards 0.4s ease-out 0.1s,
    finalAnimation 1s forwards 3.5s;  
    margin-right: 5px;
  

}
.liBajas{
    opacity: 0;
    transform: translateY(100px);
    animation: forwards aparecer 0.5s 0.2s,
    Muevete forwards 0.4s ease-out 0.2s,
    finalAnimation 1s forwards 3.5s;  
    margin-right: 5px;
}

.liIncidencias {
    opacity: 0;
    transform: translateY(100px);
    animation: forwards aparecer 0.1s,
    Muevete forwards 0.4s  ease-out 0.1s,
    
    finalAnimation 1s forwards 3.5s; 
    margin-right: 5px;
}
.Ventas__div{
    opacity: 0;
    transform: translateY(100px);
    animation: forwards aparecer 0.5s 0.3s,
    Muevete forwards 0.4s  ease-out 0.3s,
    finalAnimation 1s forwards 3.5s; 
    margin-right: 5px;
} 
.Reuniones__div{
    opacity: 0;
    transform: translateY(100px);
    animation: forwards aparecer 0.5s 0.4s,
    Muevete forwards 0.4s  ease-out  0.4s,
     
    finalAnimation 1s forwards 3.5s; 
    margin-right: 5px;
}
.GraficoContenedor{
  
    opacity: 0;
    transform: translateY(100px);
    animation: forwards aparecer 0.5s 0.5s,
    Muevete forwards 0.4s  ease-out 0.5s,
    
    finalAnimation 1s forwards 3.5s; 
    margin-right: 5px;

}

/*Animacion corazón */
#CPequeno{
    transform-origin: center center;
    animation: corazon2 1s infinite;
    
}

#CGrande{
    opacity: 0%;
    animation: corazon 0.8s infinite;
}

@keyframes corazon2 {
    25%{
       transform: scale(1.1); 
    }
    50%{
        transform: scale(1); 
    }
    75%{
        transform: scale(1.1); 
       
    }
} 
/*FIN de corazón */
/* Animacion flechas */
#Fprincipal{
    animation: flechasUp 1s 1s  infinite;
}

#FPrincipal{
    animation: flechasUp 1s 1s  infinite;

}
@keyframes flechasUp {
    100%{
       transform: translateY(-4px);
    }
}
/*FIN de Animacion Flechas */

.VentasReuniones{
    display: flex;
}
/* Animación Campana */
#Campana{

    animation: CampanaRotation 140ms infinite ease-in;
    transform-box: fill-box;
    transform-origin: center center;
 
}
@keyframes CampanaRotation {
    0%{
        transform: rotate(10deg);
    }
    50%{
        transform: rotate(-10deg);
    }
    100%{
        transform: rotate(10deg);
    }
    
}
/*FIN Animación Campana */
#Grafico1{
    animation: goUp 1s 2;
    
}


#Ellipse7{
    transform-origin: center center;
    animation: mail 0.3s forwards 0.3s;
    transform-box: fill-box;
    transform: scale(0); 
}
#cinco{
    transform: scale(0); 
    animation: mail 0.5s forwards 0.3s;
    transform-origin: center center;
    transform-box: fill-box;
}
@keyframes mail {
    
    100%{
        transform: scale(1);
        
    }
}

@keyframes MoverMail {

    0%{
        transform: translateX(-80px) rotate(0);
      
    }
    100%{
        transform: translateX(0px) rotate(360deg);
        opacity: 100%;
        
    }
}

#Vector{

    animation: MoverMail 0.5s forwards ease-in-out;
    transform-origin: center center;
    transform-box: fill-box;
}


@keyframes aparecer{
    100%{
        opacity: 100%;
    }
}

@keyframes desaparecer{
    100%{
        opacity: 0%;
    }
}


/* Animación circulos y líneas del gráfico */


#C1{
   animation: puntoCreciente 0.3s 0.9s forwards; 
    transform-origin: center center;
    transform-box: fill-box;
    opacity: 0;
} 
#L1{
    opacity: 0;
    animation: aparecer 0.5s 1s forwards; 
    
} 
#C2{

    animation: puntoCreciente 0.3s 1.1s forwards;
    transform-origin: center center;
    transform-box: fill-box;
    opacity: 0;
    
} 
#L2{
    opacity: 0;
    animation: aparecer 0.5s 1.2s forwards;
}
#C3{
   animation: puntoCreciente 0.3s 1.3s forwards; 
    transform-origin: center center;
    transform-box: fill-box;
    opacity: 0;
} 
#L3{
    opacity: 0;
    animation: aparecer 0.5s 1.4s forwards; 
} 
#C4{
    animation: puntoCreciente 0.3s 1.5s forwards ; 
    transform-origin: center center;
    transform-box: fill-box;
    opacity: 0;
} 
#L4{
    opacity: 0;
    animation: aparecer 0.5s 1.6s forwards; 
} 
#C5{
    animation: puntoCreciente 0.5s 1.7s forwards ; 
    transform-origin: center center;
    transform-box: fill-box;
    opacity: 0;
} 
#L5{
    opacity: 0;
    animation: aparecer 0.5s 1.8s forwards; 
}
#C6{
    animation: puntoCreciente 0.5s  1.9s forwards; 
    transform-origin: center center;
    transform-box: fill-box;
    opacity: 0;
}

#L6{
    opacity: 0;
    animation: aparecer 1s 2s forwards; 
} 


@keyframes puntoCreciente {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1.2);
        opacity: 100%;
    }
}

/* FIN Animación circulos y líneas del gráfico */

.BandejaEntrada{
    font-size: 40px;
    text-align: center;
    font-family: 'nunito';
    animation: forwards BE 1s 1.5s;
   display: block;
  
   
}

.BandejaEntrada p{
    color: #377dff;
    
}

@keyframes BE {
    100%{
        transform: translateY(-200px);
        
        
    }
}

.PrimeraPortada{
    position: absolute;
    overflow: hidden;

}
#BEntrada{
    transform: translateY(-170px);
    animation: MueveteDown forwards 1s 2s, 
    MueveteUp forwards 1s 4s;
    
} 

/*---------------------------------FIN primera animación--------------------------------*/

/*--------------------------------------------------------------------------------------*/

/*---------------------------------COMIENZO segunda animación---------------------------*/

.EntradaIT__divContainer{
    display: flex;
}
.LineaConexionEquipo{
    margin-bottom: 25px;
}
.ulSecondAnimation{
    list-style-type: none;
    animation:  finalAnimation forwards 0.8s 7.8s;
   
}
.EntradaIT__divContainer div{
    margin-bottom: 12px;
}


/* COMIENZO de la Animación de Equipo */

.EquipoSegundaAnimacion__div{
    transform: translateY(50px);
    animation: Muevete 1s forwards 3.8s,
    aparecer 0.5s forwards 3.8s;
}

#EntradaPrimerEquipo{
    animation: OpcionSeleccionada 0.5s 5.4s forwards;
    transform-box: fill-box;
    transform-origin: center center;
   
}

#EntradaSegundoEquipo{
    opacity: 0;
    animation: OpcionSeleccionada 0.2s 5.4s forwards,
    aparecer 0.2s 5.4s forwards ;
    transform-box: fill-box;
    transform-origin: center center;
}
#LineaConexionAnimation{
    opacity: 0;
    
}

.FEAP{
     opacity: 0;
    animation: DeslizarFondo 0.5s forwards 1.9s;
}

/* Trabajadores */

#PersonalNP{
    opacity: 0;
    animation: DeslizarWorkers forwards 0.5s 6.5s;
    
}
#PersonalPF{
    opacity: 0;
    animation: DeslizarWorkers forwards 0.5s  6.4s;

}
#PersonalCR{
    opacity: 0;
    animation: DeslizarWorkers forwards 0.5s 6.3s;
}
#PersonalMR{
    opacity: 0;
    animation: DeslizarWorkers forwards 0.5s 6.2s;
}


/* Búsqueda */
#FondoEquipoAnimationPersonal{
    opacity: 0;
    animation: DeslizarFondoBusqueda2 forwards 0.5s 6s;
}
#BuscadorFondoAnimation{
    opacity: 0;
    animation: DeslizarFondoBusqueda forwards 0.5s 5.6s;
}
#EmpresaBusqueda{
    opacity: 0;
    animation: DeslizarWorkers forwards 0.5s 5.7s;
}
#activosBusqueda{
    opacity: 0;
    
    animation: DeslizarWorkers forwards 0.5s 5.75s
}
#BusquedaAnimation{
    opacity: 0;
    animation: DeslizarWorkers forwards 0.5s 5.8s;
}
#ReChargeAnimation{
    opacity: 0;
    animation: MoverMail 0.5s forwards 5.9s;
    transform-box: fill-box;
    transform-origin: center center;
}
#SnowDropAnimation{
    transform: translateX(50px);
    opacity: 0;
    animation: MoverMail 0.5s forwards 5.95s;
    transform-box: fill-box;
    transform-origin: center center;
}

#PlusBusquedaAnimation{

    opacity: 0;
    animation: MoverMail 0.5s forwards 5.99s;
    transform-box: fill-box;
    transform-origin: center center;

}


/* FIN de la animación de equipo */

.EntradaIT__div{
    opacity: 0;
    transform: translateY(200px);
    animation: Muevete 0.8s forwards 4.35s,
    aparecer 0.5s forwards 4.35s;
}
.NewNomina__Div{
    opacity: 0;
    transform: translateY(50px);
    animation: Muevete 0.8s forwards 4.45s,
    aparecer 0.5s forwards 4.45s;
}

.flechaEquipo__div{
    opacity: 0;
    position: absolute;
    left: 80px;
    animation: aparecer forwards 0.5s 5.59s;

   
}



/*----------------------------FIN Segunda Animación --------------------------*/
/*----------------------------------------------------------------------------*/
/*--------------------------COMIENZO Tercera Animación -----------------------*/



.usuarioAnimationEntrada{
    width: 100%;
    text-align: center;

    
}

.CalendarioCentroAnimation{
    width: 100%;
    text-align: center;
    margin-top: 20px;
   margin-left: 10px;
}

.ulAnimationEntrada3{
    background-color: #fff;
    height: 450px;
    width: 450px;
    padding-left: 0px;
    border-radius: 15px;
    margin-top: 0px;
    animation: finalAnimation 0.5s 13s;
}

  
.usuarioAnimationEntrada{
    display: flex;
  
}
.BarritasInfoUsuario3{
    margin-left: 90px;
    display: flex;
    margin-top: 15px;
}


.IconoUsu3{

    position: absolute;
    transform-box: fill-box;
    transform-origin: center center;
    animation: MueveteUsu 0.8s forwards 8.7s;
    top: 10px;
    margin-left: 10px;
   
    
}
.lista4{
    margin-top: 5px;
}
.lista3{
    text-align: center;
}
.lista8{
    text-align: center;
    margin-top: 14px;
}
.InfoBarras{
    margin-top: 2px;
    margin-right: 8px;
}

#CalendarioPrincipalAnimation{

    transform: translateY(180px);
    animation: MueveteUpCalendar 0.5s 9s forwards;
}
#CalendarioFdrch{
    transform: translateY(-150px);
    animation: forwards MueveteDrch 0.5s 9s,
    MueveteForever infinite 0.8s 9.1s;
}
#CalendarioFizq{
    opacity: 0;
    
} 
.DTRectangulo, .AusenciasRectangulo, .BajasRectanguloA ,.VacacionesrectanguloA, .HorasRectanguloA{
    opacity: 0;
    transform: translateY(100px);
}

.DTRectangulo{
    animation: CalendarioDias 0.8s forwards 9.5s;
}
.AusenciasRectangulo{
    animation: CalendarioDias 0.8s forwards 9.7s;
}
.BajasRectanguloA{
    animation: CalendarioDias 0.8s forwards 9.9s;
}
.VacacionesrectanguloA{
    animation: CalendarioDias 0.8s forwards 10.1s;
}
.HorasRectanguloA{
    animation: CalendarioDias 0.8s forwards 10.3s;

}

#DTrabajadosAnimation{
    transform: translateX(150px);
    animation: leyenda 0.8s 9.5s forwards;
}
#BajasAnimationCalendario{
    transform: translateX(150px);
    animation: leyenda 0.8s 9.7s forwards;
}
#AusenciasCalendarioAnimation{
    transform: translateX(150px);
    animation: leyenda 0.8s 9.9s forwards;
}
#VacacionesAnimationCalendario{
    transform: translateX(150px);
    animation: leyenda 0.8s 10.1s forwards;
}
#HorasAnimationCalendario{
    transform: translateX(150px);
    animation: leyenda 0.8s 10.3s forwards;
}
@keyframes leyenda {
    100%{
        transform: unset;
    }
}
.Barrita{
    opacity: 0;
    transform: translateY(-100px);
    animation: CalendarioDias 0.7s forwards 8.8s;
}


.NoteDown{
    opacity: 0;
    transform: translateX(100px);
    animation: CalendarioDias 0.7s forwards 8.9s;
    margin-top: 7px;
    
}

#xGraficoLeyenda, #xyEje{
    transform: translateY(155px);
    animation: leyenda 0.5s 10.3s forwards;
}


/*  P1: leyenda deslizar  */

#GraficoAAE{
    opacity: 0;
    animation: aparecer 0.7s forwards 10.4s;
}

.circle1, .circle2, .circle3, .circle4, .circle5, .lineaG1, .lineaG2, .lineaG3,.lineaG4{
    opacity: 0;
    transform-origin: center center;
    transform-box: fill-box;
    
}

@keyframes puntoCreciente2{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
        opacity: 100%;
    }
}

@keyframes circuloGrafico {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1.3);
        opacity: 100%;
    }
}
.circle1{
    animation: circuloGrafico 0.5s forwards 10.4s;
}
.lineaG1{
    animation: puntoCreciente2 0.5s forwards 10.5s;
}
.circle2{
    animation: circuloGrafico 0.5s forwards 10.7s;

} 
.lineaG2{
    animation: puntoCreciente2 0.5s forwards 10.8s;
}
.circle3{
    animation: circuloGrafico 0.5s forwards 11s;

} 
.lineaG3{
    animation: puntoCreciente2 0.5s forwards 11.1s;
}
.circle4{
    animation: circuloGrafico 0.5s forwards 11.3s;

}
.lineaG4{

    animation: puntoCreciente 0.5s forwards 11.4s;

}
.circrcle5{
    animation: circuloGrafico 0.5s forwards 11.1s;

}
/*----------------------------------------------------------------------------*/

/*---------------------------COMIENZO KEYFRAMES---------------------------*/

/*----------------------------------------------------------------------------*/



@keyframes Muevete {
    100%{
        transform: unset;
        z-index: 99;
    }
}


/* Secuencia de divs contenedores de las 3 partes de la animación */

@keyframes Indice0 {
    100%{
        z-index: 0;
        opacity: 0;
    }
}

@keyframes SegundaParteAnimation {
    100%{
        z-index: 4;
        opacity: 100%;
    }
}
@keyframes TerceraParteAnimation {
    100%{
        z-index: 4;
        opacity: 100%;
    }
}


/* Final Animation */

@keyframes finalAnimation {
    100%{
        transform: translateY(-200px);
        opacity: 0;
    }
}

/*  Animaciones de la PRIMERA parte */
@keyframes MueveteDown {
    100%{
        transform: translateY(-30px);
    }
}
@keyframes MueveteUp {
    100%{
        transform: translateY(-170px);
    }
}

/* Animaciones de la SEGUNDA parte */ 

@keyframes OpcionSeleccionada {
    0%{
        transform: scale(0.7);
    }
    100%{
        transform: scale(1);
        
    }

}
@keyframes DeslizarWorkers {
    0%{
        transform: translateX(50px);
    }
    100%{
            transform: unset;
            opacity: 100%;
    }
}
@keyframes DeslizarFondo {
    0%{
        transform: translatex(50px);
    }
    100%{
            transform: unset;
            opacity: 100%;
    }
}

@keyframes DeslizarFondoBusqueda {
    0%{
        transform: translatex(-50px);
    }
    100%{
            transform: unset;
            opacity: 100%;
    }
}
@keyframes DeslizarFondoBusqueda2 {
    0%{
        transform: translatex(50px);
    }
    100%{
            transform: unset;
            opacity: 100%;
    }
}
@keyframes DeslizarCirculos {
    0%{
       transform: rotate(360deg);
        opacity: 100%;

    }50%{
        transform: rotate(360deg);
    }
    100%{
            transform: unset;
            opacity: 100%;
            
    }
}


/* Animaciones de la TERCERA parte */


@keyframes RotateUsu {
    0%{
        transform: rotate(0);
    }
   100%{
        transform: rotate(360deg);
   }
}
@keyframes MueveteUsu {

    0%{
        transform: translateX(300px) rotate(0);
    }
    100%{
        transform: translateX(-70px) rotate(360deg);
    }
} 
@keyframes MueveteUpCalendar {
    100%{
        transform: unset;
        
    }
}
@keyframes MueveteDrch {
    100%{
        transform: unset;
    }
}

@keyframes CalendarioDias {
    100%{
        transform: unset;
        opacity: 100%;
    }
}
@keyframes MueveteForever {
    0%{
        transform: translateX(10px);
    }
    50%{
        transform: translateX(15px);
    }
    100%{
        transform: translateX(10px);
    }
}
@keyframes MueveteForeverIzq {
    0%{
        transform: translateX(-2px);
    }
    50%{
        transform: translateX(-3px);
    }
    100%{
        transform: translateX(-2px);
    }
}



@media screen and (min-width: 768px) and (max-width: 1024px){
.SecondPartAnimationEntrada {
	left: 112px;	
}

.ThirdPartAnimationEntrada {
    left: 120px;
}
}