/* #region ************ Popup Animations ************ */


/* #region Circles */


/*
    Spinner -   hace girar los círculos cuando está cargando. Usando un pequeño delay en alguno de ellos, se crea el efecto
                de que el círculo se hace más largo y más corto a medida que gira
*/

@-webkit-keyframes spinner {
    from {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    to {
        -webkit-transform: rotate(405deg);
        -moz-transform: rotate(405deg);
        -ms-transform: rotate(405deg);
        transform: rotate(405deg);
    }
}

@keyframes spinner {
    from {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    to {
        -webkit-transform: rotate(405deg);
        -moz-transform: rotate(405deg);
        -ms-transform: rotate(405deg);
        transform: rotate(405deg);
    }
}

/*
    Load complete main circle success -
            se utiliza para el círculo principal. Hace que se posicione en la parte inferior, con la abertura hacia arriba. Después, se cierra con el
            borde del color base y finalmente, cambia a color azul claro, indicando el fin satisfactorio de la operación.
*/

@-webkit-keyframes load-complete-main-circle-success
{
    10% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    69% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    70% {
        border-color: #0d8fcb;                                  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    100% {
        border-color: #00B5E2;                                  border-width: 6px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }
}

@keyframes load-complete-main-circle-success
{
    10% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    69% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    70% {
        border-color: #0d8fcb;                                  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    100% {
        border-color: #00B5E2;                                  border-width: 6px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }
}

/*
    Load complete main circle error -
            se utiliza para el círculo principal. Hace que se posicione en la parte inferior, con la abertura hacia arriba. Después, se cierra con el
            borde del color base y finalmente, cambia a color rojo, indicando el fin erróneo de la operación.
*/

@-webkit-keyframes load-complete-main-circle-error
{
    10% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    69% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    70% {
        border-color: #0d8fcb;                                  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    100% {
        border-color: #d93131;                                  border-width: 6px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }
}

@keyframes load-complete-main-circle-error
{
    10% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    69% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    70% {
        border-color: #0d8fcb;                                  border-width: 4px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }

    100% {
        border-color: #d93131;                                  border-width: 6px;                  -webkit-transform: rotate(45deg);
                                                                                                    -moz-transform: rotate(45deg);
                                                                                                    -ms-transform: rotate(45deg);
                                                                                                    transform: rotate(45deg);
    }
}


/*
    Load complete circle L -
            trata la animación de cierre del círculo, la parte izquierda. Al principio sigue al círculo principal para mentenerse oculto detrás de él,
            y hacia la mitad de la animación se revela hacia la izquierda y se junta con la otra parte justo en la parte más alta. En el último cuarto
            de la animación, éste círculo desaparece, dejando visible al principal.
*/

@-webkit-keyframes load-complete-circle-l
{
    0% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;
    }

    10% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(45deg);
                                                                                        transform: rotate(45deg);
    }
    
    25% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(45deg);
                                                                                        transform: rotate(45deg);
    }

    55% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(135deg);
                                                                                        transform: rotate(135deg);
    }

    70% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(135deg);
                                                                                        transform: rotate(135deg);
    }

    71% {
        border-color: transparent;                              border-width: 0;        -webkit-transform: rotate(135deg);
                                                                                        transform: rotate(135deg);
    }

    100% {
        border-color: transparent;                              border-width: 6px;      -webkit-transform: rotate(135deg);
                                                                                        transform: rotate(135deg);
    }
}

@keyframes load-complete-circle-l
{
    0% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;
    }

    10% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(45deg);
                                                                                        transform: rotate(45deg);
    }
    
    25% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(45deg);
                                                                                        transform: rotate(45deg);
    }

    50% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(135deg);
                                                                                        transform: rotate(135deg);
    }

    70% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(135deg);
                                                                                        transform: rotate(135deg);
    }

    71% {
        border-color: transparent;                              border-width: 0;        -webkit-transform: rotate(135deg);
                                                                                        transform: rotate(135deg);
    }

    100% {
        border-color: transparent;                              border-width: 6px;      -webkit-transform: rotate(135deg);
                                                                                        transform: rotate(135deg);
    }
}


/*
    Load complete circle R -
            trata la animación de cierre del círculo, la parte derecha. Al principio sigue al círculo principal para mentenerse oculto detrás de él,
            y hacia la mitad de la animación se revela hacia la derecha y se junta con la otra parte justo en la parte más alta. En el último cuarto
            de la animación, éste círculo desaparece, dejando visible al principal.
*/

@-webkit-keyframes load-complete-circle-r
{
    0% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;
    }

    10% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(45deg);
                                                                                        transform: rotate(45deg);
    }
    
    25% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(45deg);
                                                                                        transform: rotate(45deg);
    }

    55% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(-45deg);
                                                                                        transform: rotate(-45deg);
    }

    70% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(-45deg);
                                                                                        transform: rotate(-45deg);
    }

    71% {
        border-color: transparent;                              border-width: 0px;      -webkit-transform: rotate(-45deg);
                                                                                        transform: rotate(-45deg);
    }

    100% {
        border-color: transparent;                              border-width: 0px;      -webkit-transform: rotate(-45deg);
                                                                                        transform: rotate(-45deg);
    }
}

@keyframes load-complete-circle-r
{
    0% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;
    }

    10% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(45deg);
                                                                                        transform: rotate(45deg);
    }
    
    25% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(45deg);
                                                                                        transform: rotate(45deg);
    }

    50% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(-45deg);
                                                                                        transform: rotate(-45deg);
    }

    70% {
        border-color: transparent #0d8fcb #0d8fcb transparent;  border-width: 4px;      -webkit-transform: rotate(-45deg);
                                                                                        transform: rotate(-45deg);
    }

    71% {
        border-color: transparent;                              border-width: 0px;      -webkit-transform: rotate(-45deg);
                                                                                        transform: rotate(-45deg);
    }

    100% {
        border-color: transparent;                              border-width: 0px;      -webkit-transform: rotate(-45deg);
                                                                                        transform: rotate(-45deg);
    }
}

/* #endregion Circles */


/* #region Icon */

/*
    Zoom -  el icono de vithas lleva a cabo esta animación durante la carga, a la vez que la de spinner, en la que se estira y se 
            transparenta un poco, y vuelve a encoger, indefinidamente.
*/

@-webkit-keyframes zoom {
    from {
        opacity: 0.6;       -webkit-transform: scale(1.5);
                            -moz-transform: scale(1.5);
                            -ms-transform: scale(1.5);
                            transform: scale(1.5);
    }
    to {
        opacity: 1;         -webkit-transform: scale(1);
                            -moz-transform: scale(1);
                            -ms-transform: scale(1);
                            transform: scale(1);
    }
}

@keyframes zoom {
    from {
        opacity: 0.6;       -webkit-transform: scale(1.5);
                            -moz-transform: scale(1.5);
                            -ms-transform: scale(1.5);
                            transform: scale(1.5);
    }
    to {
        opacity: 1;         -webkit-transform: scale(1);
                            -moz-transform: scale(1);
                            -ms-transform: scale(1);
                            transform: scale(1);
    }
}

@-webkit-keyframes zoom-out {
    from {
        opacity: 1;         -webkit-transform: scale(1);
                            -moz-transform: scale(1);
                            -ms-transform: scale(1);
                            transform: scale(1);
    }
    to {
        opacity: 0.5;       -webkit-transform: scale(0);
                            -moz-transform: scale(0);
                            -ms-transform: scale(0);
                            transform: scale(0);
    }
}

@keyframes zoom-out {
    from {
        opacity: 1;         -webkit-transform: scale(1);
                            -moz-transform: scale(1);
                            -ms-transform: scale(1);
                            transform: scale(1);
    }
    to {
        opacity: 0.5;       -webkit-transform: scale(0);
                            -moz-transform: scale(0);
                            -ms-transform: scale(0);
                            transform: scale(0);
    }
}

@-webkit-keyframes zoom-in {
    0% {
        opacity: 0;         -webkit-transform: scale(0);
                            -moz-transform: scale(0);
                            -ms-transform: scale(0);
                            transform: scale(0);
    }
    25% {
        opacity: 0.5;       -webkit-transform: scale(0.2);
                            -moz-transform: scale(0.2);
                            -ms-transform: scale(0.2);
                            transform: scale(0.2);
    }
    90% {
        opacity: 1;       -webkit-transform: scale(1.15);
                            -moz-transform: scale(1.15);
                            -ms-transform: scale(1.15);
                            transform: scale(1.15);
    }
    100% {
        opacity: 1;         -webkit-transform: scale(1);
                            -moz-transform: scale(1);
                            -ms-transform: scale(1);
                            transform: scale(1);
    }
}

@keyframes zoom-in {
    0% {
        opacity: 0;         -webkit-transform: scale(0);
                            -moz-transform: scale(0);
                            -ms-transform: scale(0);
                            transform: scale(0);
    }
    25% {
        opacity: 0.5;       -webkit-transform: scale(0.2);
                            -moz-transform: scale(0.2);
                            -ms-transform: scale(0.2);
                            transform: scale(0.2);
    }
    90% {
        opacity: 1;       -webkit-transform: scale(1.1);
                            -moz-transform: scale(1.1);
                            -ms-transform: scale(1.1);
                            transform: scale(1.1);
    }
    100% {
        opacity: 1;         -webkit-transform: scale(1);
                            -moz-transform: scale(1);
                            -ms-transform: scale(1);
                            transform: scale(1);
    }
}
    
/* #endregion Icon */

/* #endregion ************ Popup Animations ************ */