/* CSS TRANSITION */ 
.hidden-t1 {
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 2.2s ease-in-out;
    transform: translateX(-20%);
}

.hidden-t2 {
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 2.2s ease-in-out;
    transform: translateX(20%);
}

.hidden-r {
    opacity: 0;
    transition: opacity 1s ease-in-out, rotate 2.2s ease-in-out;
    rotate: 90deg;
}

.hidden-rd {
    opacity: 0;
    transition: opacity 1s ease-in-out, rotate 2.2s ease-in-out;
    rotate: -90deg;
}

.hidden {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.hidden-2 {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.hidden-blur {
    filter: blur(10px);
    transition: filter 2s ease-in-out;
}

.visible {
    opacity: 1;
    transform: translateX(0%);
    filter: blur(0px);
    rotate: 0deg;
}