/**** View: Acces ****/

.access .container-wrap{
    opacity: 0;
    animation: 8s opacity_in 1s ease-in-out forwards;
}
.access .container-wrap .personajes > *{
    transform-origin: bottom;
    transform: scale(0.7);
    animation-duration: 8s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
.access .container-wrap .personajes .personaje_centro{
    z-index: 1203;
    transform: scale(0.95);
    animation-name: personaje;
}
.access .container-wrap .personajes .dcha1{
    transform: scale(0.95) translateX(15%);
    animation-name: personaje_right;
}
.access .container-wrap .personajes .dcha2{
    transform: scale(0.90) translateX(5%);
    animation-name: personaje_right_2;
}
.access .container-wrap .personajes .izda1{
    transform: scale(0.95) translateX(-21%);
    animation-name: personaje_left;
}
.access .container-wrap .personajes .izda2{
    transform: scale(0.90) translateX(-5%);
    animation-name: personaje_left_2;
}
.access .container-wrap .personajes .background{
    transform: scale(1);
    animation: 20s background_in 1s ease-out forwards;
}
.access .container-wrap .personajes .particulas{
    opacity: 1;
    transform: scale(1) translateX(-50%);
    animation: 140s particulas_left 0s ease-out forwards;
}
#img_titulo{
    opacity: 0;
    transform: scale(0.9);
    animation: 4s title_in 4s ease-in-out forwards;
}
.access .container-wrap .container .btn{
    opacity: 0;
    animation:1s opacity_in 6s ease-out forwards;
}

@keyframes title_in{
    0%{
        opacity: 0;
        transform: scale(0.9);
    }
    70%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes opacity_in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes background_in{

    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }

}
@keyframes particulas_left{

    0%{
        transform: scale(1) translateX(-50%);
        opacity: 1;
    }
    100%{
        opacity: 1;
        transform: scale(1.5) translateX(50%);
    }

}
@keyframes personaje{

    0%{
        transform: scale(0.95);
    }
    100%{
        transform: scale(1);
    }

}
@keyframes personaje_right{

    0%{
        transform: scale(0.95) translateX(15%);
    }
    100%{
        transform: scale(1) translateX(20%);
    }

}
@keyframes personaje_right_2{

    0%{
        transform: scale(0.90) translateX(5%);
    }
    100%{
        transform: scale(1) translateX(0px);
    }

}
@keyframes personaje_left{

    0%{
        transform: scale(0.95) translateX(-21%);
    }
    100%{
        transform: scale(1) translateX(-24%);
    }

}
@keyframes personaje_left_2{

    0%{
        transform: scale(0.90) translateX(-5%);
    }
    100%{
        transform: scale(1) translateX(0px);
    }

}