:root {
    --color-caribbean-current: #0C6872;
    --color-space-cadet: #1A2A4B;
    --color-black: #000000;
    --color-process-cyan: #2AB0E3;
    --color-moonstone: #11ACC6;
    --color-white: #fff;

    --gradient-top: linear-gradient(0deg, var(--color-caribbean-current), var(--color-space-cadet), var(--color-black), var(--color-process-cyan), var(--color-moonstone));
    --gradient-right: linear-gradient(90deg, var(--color-caribbean-current), var(--color-space-cadet), var(--color-black), var(--color-process-cyan), var(--color-moonstone));
    --gradient-bottom: linear-gradient(180deg, var(--color-caribbean-current), var(--color-space-cadet), var(--color-black), var(--color-process-cyan), var(--color-moonstone));
    --gradient-left: linear-gradient(270deg, var(--color-caribbean-current), var(--color-space-cadet), var(--color-black), var(--color-process-cyan), var(--color-moonstone));
    --gradient-top-right: linear-gradient(45deg, var(--color-caribbean-current), var(--color-space-cadet), var(--color-black), var(--color-process-cyan), var(--color-moonstone));
    --gradient-bottom-right: linear-gradient(135deg, var(--color-caribbean-current), var(--color-space-cadet), var(--color-black), var(--color-process-cyan), var(--color-moonstone));
    --gradient-top-left: linear-gradient(225deg, var(--color-caribbean-current), var(--color-space-cadet), var(--color-black), var(--color-process-cyan), var(--color-moonstone));
    --gradient-bottom-left: linear-gradient(315deg, var(--color-caribbean-current), var(--color-space-cadet), var(--color-black), var(--color-process-cyan), var(--color-moonstone));
    --gradient-radial: radial-gradient(var(--color-caribbean-current), var(--color-space-cadet), var(--color-black), var(--color-process-cyan), var(--color-moonstone));

    --color-caribbean-current-hsl: 186, 81%, 25%;
    --color-space-cadet-hsl: 220, 49%, 20%;
    --color-process-cyan-hsl: 197, 77%, 53%;
    --color-moonstone-hsl: 189, 84%, 42%;

    /* COMPONENTES COLORES ESPECIFICOS*/

    --buttonBackColor: var(--color-moonstone);
    --iconBackColor: var(--color-caribbean-current);

    /* MEDIDAS */

    --borderRadius: 10px;
}

.u-loading {
    width: auto;
    height: auto;
    display: block;
    margin: 48px;
}

.u-loading__symbol {
    background-color: none;
    padding: 8px;
    animation: loading 3s infinite;
    border-radius: 5px;
}

.u-loading__symbol img {
    display: block;
    height: 170px;
    object-fit: cover ;
    max-width: 100%;
    animation: loading-icon 3s infinite;
}

@keyframes loading {
    0% {
        transform: perspective(250px) rotateX(0deg) rotateY(0deg);
    }

    15% {
    }
    
    16% {
    }
    
    50% {
        transform: perspective(250px) rotateX(180deg) rotateY(0deg);
    }
    
    65% {
    }
    
    66% {
    }

    100% {
        transform: perspective(250px) rotateX(180deg) rotateY(-180deg);
    }
}

@keyframes loading-icon {
    0% {
        transform: perspective(250px) rotateX(0deg) rotateY(0deg);
    }

    15% {
        transform: perspective(250px) rotateX(0deg) rotateY(0deg);
    }

    16% {
        transform: perspective(250px) rotateX(180deg) rotateY(0deg);
    }

    50% {
        transform: perspective(250px) rotateX(180deg) rotateY(0deg);
    }

    65% {
        transform: perspective(250px) rotateX(180deg) rotateY(0deg);
    }

    66% {
        transform: perspective(250px) rotateX(180deg) rotateY(180deg);
    }

    100% {
        transform: perspective(250px) rotateX(180deg) rotateY(180deg);
    }
}


@media (max-width: 640px) {
    .u-loading {
        margin: 0;
    }
    .u-loading__symbol img {
        height: inherit;
    }
}