/*----------- SPAWN Slide suaves -----------*/
.slide-down {
    animation: slide-down 0.4s ease;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-left {
    animation: slide-left 0.4s ease;
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {animation: slide-up 0.4s ease;}

@keyframes slide-up {
    0% {opacity: 0; transform: translateY(20px);}
    100% {opacity: 1; transform: translateY(0);}
}

.slide-right {
    animation: slide-right 0.4s ease;
}

@keyframes slide-right {
    0% {opacity: 0; transform: translateX(20px);}
    100% {opacity: 1; transform: translateY(0);}
}
/*----------- SPAWN Slide medias -----------*/

.slide-down-big {animation: slide-down-big 0.4s ease;}

@keyframes slide-down-big {
    0% {opacity: 0; transform: translateY(-200px);}
    100% {opacity: 1; transform: translateY(0);}
}

.slide-left-big {animation: slide-left-big 0.4s ease;}

@keyframes slide-left-big {
    0% {opacity: 0; transform: translateX(200px);}
    100% {opacity: 1; transform: translateY(0);}
}

.slide-up-big {animation: slide-up-big 0.4s ease;}

@keyframes slide-up-big {
    0% {opacity: 0; transform: translateY(200px);}
    100% {opacity: 1; transform: translateY(0);}
}

.slide-right-big {animation: slide-right-big 0.4s ease;}

@keyframes slide-right-big {
    0% {opacity: 0; transform: translateX(-200px);}
    100% {opacity: 1; transform: translateY(0);}
}

.rotate {animation: rotate 0.4s ease;}

@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(90deg);}
}

.rotate-inverse {animation: rotate-inverse 0.4s ease;}

@keyframes rotate-inverse {
    0% {transform: rotate(90deg);}
    100% {transform: rotate(0deg);}
}

.fadein {animation: fadein 0.4s ease forwards; opacity: 0;}

@keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.spawn {animation: spawn 0.4s ease;}


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


.spawn-big {animation: spawn-big 1s ease;}

@keyframes spawn-big {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


/*-------- ANIMACIONES PARA INDEX --------*/

.spawn-logo-index {animation: spawn-logo-index 2s ease;}

@keyframes spawn-logo-index {
    0% {opacity: 0; transform: rotate(-10deg) translateX(120px);}
    100% {opacity: 1; transform: rotate(0deg) translateX(0px);}
}

.spawn-links-index {
    animation: spawn-links-index 0.8s ease;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes spawn-links-index {
    0% {opacity: 0; transform: translateY(120px);}
    100% {opacity: 1; transform: translateY(0px);}
}

.IndexLinks p, .IndexLinks i {
    font-size: 28px;
    transition:0.4s;
}

.IndexLinks {
    /*transform: scale(1);*/
    transition: 0.4s;
}