:root{
    --main-al-animation: caer 1s forwards;
    --main-al-animationTwo: MenuAnimation forwards;
}




/* Comienzo Animación */
.container{
    
    width: 900px;
    height: 478px;
    margin: auto;
    box-shadow:  0 0.375rem 1.5rem 0 rgb(140 152 164 / 13%);
    overflow: hidden;
    
    
}

/* Cominezo animación dashboard (1º pantalla) */


    .dashboard{
        position: absolute;
        z-index: 2;
        width: 900px;
        height: 480px;
        
        
    }
    #Rectangle3{
        animation: var(--main-al-animation);
    }
    .dashboard__svg{
        width: 900px;
        height: 480px;
        margin-bottom: 50px;
        
        
       
    }
    /* Bloques principales */

        #Saludo, #Procesos, #Equipo ,#Agenda, #add{
           opacity: 0%;
        }  
        #add{
            animation: aparecer 2s forwards 2.5s;
        }
        #Saludo{
            animation: aparecer 2s forwards 3s;
        }
        #Equipo{
            animation: aparecer 2s forwards 3.5s;
        }
        #Procesos{
            animation: aparecer 2s forwards 4s;
        }
        #Agenda{
            animation: aparecer 2s forwards 4.5s;
        }
        .Equipo{
            position: absolute;
            width: 135px;
            height: 150px;
            z-index: 3;
            left: 300px;
            top: 85px;
        }

  
    /* Fin de los bloques principales */

    /* Menú */


        
        #Facturacion{
            animation: MenuAnimation 2s forwards 0.5s;
            opacity: 0%;
        }
        #Contabilidad{
            animation: MenuAnimation 2s forwards 0.6s;
            opacity: 0%;
        }
        #Bancos{
            animation: MenuAnimation 2s forwards 0.7s;
            opacity: 0%;
        }
        #Nominas{
            animation: MenuAnimation 2s forwards 0.8s;
            opacity: 0%;

        }
        #RRHH{
            animation: MenuAnimation 2s forwards 0.9s;
            opacity: 0%;
        }
        #SitesMcD{
            animation: MenuAnimation 2s forwards 1s;
            opacity: 0%;
        }
        #Supervisor{
            animation: MenuAnimation 2s forwards 1.1s;
            opacity: 0%;
        }
        #Sistema{
            animation: MenuAnimation 2s forwards 1.2s;
            opacity: 0%;
        }


        #FA, #PasteIcon, #options,  #logo{
            animation: var(--main-al-animation);
        } 
      

    /* Fin del Menú */

    /* Cominezo elementos principales */
       

    /* FIN de los  elementos principales */

    /* Comienzo de la animación de Agenda */
    
    /* FIN de la animación de Agenda */
        .agenda{
            position: absolute;
            z-index: 1;
            opacity: 0%;
            animation: Agenda 0.5ms 7s forwards;
        }
        .agenda__svg{
            width: 900px;
            height: 480px;
            margin-bottom: 50px;
        }
        @keyframes Agenda {
            100%{
                opacity: 100%;
                z-index: 3;
            }
        }

        #Reunion1, #Reunion2, #Reunion3, #Reunion4, #Reunion,#Reunion5,
        #Agenda_2, #anadir, 
        #Menu3,
        #Mini,
        #ruta,
        #calendario{
            opacity: 0%;
        }

        #Agenda_2, #anadir{
            animation: aparecer forwards 2s 7.5s;
        }
        #Menu3{
            animation: aparecer forwards 2s 8s;
        }
        #calendario{
            animation: aparecer forwards 2s 8.5s;
        }
        #ruta2{
            animation: aparecer forwards 2s 9.5s;
        }
        #Mini{
            animation: aparecer forwards 2s 10s;
        }

        #Reunion1, #Reunion2, #Reunion3, #Reunion4, #Reunion,#Reunion5{
            animation: Reuniones forwards 2s 10s;
        }

        /* #Reunion1{
        } 
        #Reunion2{
            animation: Reuniones forwards 1s 10.5s;
        } 
        #Reunion5{
            animation: Reuniones forwards 1s 11s;
        }
        #Reunion{
            animation: Reuniones forwards 1s 11.5s;
        } 
        #Reunion3{
            animation: Reuniones forwards 1s 12s;
        } 
        #Reunion4{
            animation: Reuniones forwards 1s 12.5s;
        } 
         */
        



    /* Comienzo de la animación de Procesos */

       .Procesos{
            position: absolute;
            opacity: 0%;
            z-index: 1;
            animation: Calculos 0.5ms 14s forwards;
            
        }
        .Procesos svg{
            width: 900px;
            height: 480px;
            margin-bottom: 50px;
            
        }

        @keyframes Procesos {
            100%{
                opacity: 100%;
                z-index: 10;
            }
        }

        #Menu2, #Enfermedad, #NoLaboral, #Laboral, #Laboral2,
        #Observacion, #Embarazo, #Maternidad, #TiempoParcial,
        #Incapacidades, #ruta, #Ausencias, #Vacaciones, #Activos, #Line, #Buscar{
            opacity: 0%;
        }
        #Incapacidades, #ruta, #Ausencias, #Vacaciones, #Activos, #Line, #Buscar{
            animation: aparecer 2s 14.5s forwards;
        }
        
        #Menu2{
            
            animation: aparecer 2s 14.5s forwards;
            
        }
        #Incapacidad, #temporal{
            opacity: 0%;
            animation: aparecer 2s 14.5s forwards;
        }

        /* Animación todos a la vez */
        #Enfermedad, #NoLaboral, #Laboral, #Laboral2,
        #Observacion, #Embarazo, #Maternidad, #TiempoParcial{
            animation: aparecer 2s 15.5s forwards;
        }


        /* Animación 1 a 1 en zig zag */

        /* #Enfermedad{
           
            animation: deslizar 1s 15.5s forwards;
        }
        #NoLaboral{
            
            animation: deslizar 1s 16.5s forwards;
        }
        #Laboral{
            
            animation: deslizar 1s 17.5s forwards;
        }
        #Laboral2{
            
            animation: deslizar 1s 18.5s forwards;
        }

        #Observacion{
           
            animation: deslizar 1s 16s forwards;
        }
        #Embarazo{
            
            animation: deslizar 1s 17s forwards;
        }
        #Maternidad{
            
            animation: deslizar 1s 18s forwards;
        }
        #TiempoParcial{
            
            animation: deslizar 1s 19s forwards;
        }  */

        /* Animación de 2 bloques a la vez */
        
        /*         
        #Observacion{
           
            animation: deslizar 1.5s 7s forwards;
        }
        #Embarazo{
            
            animation: deslizar 1.5s 8s forwards;
        }
        #Maternidad{
            
            animation: deslizar 1.5s 9s forwards;
        }
        #TiempoParcial{
            
            animation: deslizar 1.5s 10s forwards;
        } 
        */
        /* Animación de 1 a 1 */
        /* 
        #Observacion{
           
            animation: deslizar 1.5s 11s forwards;
        }
        #Embarazo{
            
            animation: deslizar 1.5s 12s forwards;
        }
        #Maternidad{
            
            animation: deslizar 1.5s 13s forwards;
        }
        #TiempoParcial{
            
            animation: deslizar 1.5s 14s forwards;
        } */

        @keyframes deslizar {
            
                0%{
                    transform: translateX( 250px);
                }
                100%{
                    transform: translate(unset);
                    opacity: 100%;
                }
            
            
        }
       
    /* FIN de la animación de Procesos */

    #Paso1, #Paso2, #Paso3, #Paso4, #Paso5,
    #Rect1, #Rect2, #Rect3, #Rect4, #Rect5, #Empleado, #Titulo{
        opacity: 0%;
    }

    #Titulo{
        animation: Pasos 0.5s 18.2s forwards;
    }
    #Paso1,#Rect1{
        animation: Pasos 0.5s 18.5s forwards;
    } 
    #Paso2,#Rect2{
        animation: Pasos 0.5s 19.5s forwards;
    } 
    #Paso3,#Rect3{
        animation: Pasos 0.5s 20.5s forwards;
    } 
    #Paso4,#Rect4{
        animation: Pasos 0.5s 21.5s forwards;
    } 
    #Paso5,#Rect5{
        animation: Pasos 0.5s 22.5s forwards;
    } 
    #Empleado{
        animation: Pasos 0.5s 23.5s forwards;
    }

    /* #Paso1{
        animation: Pasos 0.5s 23.5s forwards;
        
    }
    #Rect1{
        animation: Pasos 0.5s 24.5s forwards;
    }

    #Paso2{
        animation: Pasos 0.5s 25.5s forwards;
    }
    #Rect2{
        animation: Pasos 0.5s 26.5s forwards;
    }

    #Paso3{
        animation: Pasos 0.5s 27.5s forwards;
    }
    #Rect3{
        animation: Pasos 0.5s 28.5s forwards;
    }

    #Paso4{
        animation: Pasos 0.5s 29.5s forwards;
    }
    #Rect4{
        animation: Pasos 0.5s 30.5s forwards;
    }

    #Paso5{
        animation: Pasos 0.5s 31.5s forwards;
    }
    #Rect5{
        animation: Pasos 0.5s 32.5s forwards;
    }

    #Empleado{
        animation: Pasos 0.5s 33.5s forwards;
    }
 */
  

    
    

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

    /* Comienzo de la animación de Cálculos */


    /* FIN de la animación de Cálculos */
        
        .Calculos{
            position: absolute;
            z-index: 1;
            opacity: 0%;
            animation: Calculos 0.4ms 18s forwards;
            
        }
        .Calculos__svg{
            width: 900px;
            height: 480px;
            margin-bottom: 50px;
            
        }

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

    /* Pointer animation */
      
    .pointer{
        position: absolute;
        z-index: 100;
        
        
        
    }

    .pointer__img{

        transform: translateY(250px) translateX(240px);
        width: 11px;
        height: 11px;
        animation: irAgenda 2s 5s forwards,
        agrandar 0.2s forwards 7s,
        irNominas 2s forwards 12s,
        agrandar 0.2s forwards 14s,
        irCalculos 1s forwards 17s,
        agrandar 0.2s forwards 18s;
       
        
     
    }
   
       @keyframes irAgenda {
             
           100%{
            transform: translateY(160px) translateX(550px);
           }
              
       }
       @keyframes irNominas {
           100%{
               transform: translateX(300px) translateY(20px);
           }
       }
      
      
    
       
       @keyframes agrandar{
           from{
            width: 7px;
            height: 7px;
           }
           to{
            width: 11px;
            height: 11px;
           }
       }

      @keyframes irCalculos {
           100%{
               transform: translateY(41px) translateX(267px);
           }
       } 
   
       
    

    /* Fin del pointer animation */

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

@keyframes caer {
    0%{
        transform: translateX( 250px);
    }
    100%{
        transform: translate(unset);
    }
}
@keyframes Reuniones {
    0%{
        transform: translateY( 250px);
    }
    100%{
        opacity: 100%;
        transform: translate(unset);
    }
}

@keyframes MenuAnimation {
    0%{
        transform: translateY(-150px);
        
    }
    100%{
        opacity: 100%;
        transform: translate(unset);
    }
}

/* Fin de la animación del dashboard */

/* Fin Animación */