﻿#divProcessando {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#agrupaAnimacaoTexto {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#mensagens_divAGUARDE_TEXTO {
    float: left;
    font-size: 30px;
    margin-top: 25px;
}

.LoadingTextoAzul {
    color: #c3d2df;
    text-shadow: 0 0 0.2em #428bca, -1px 0px 0px #428bca, 0px 1px 0px #428bca, 0px -1px 0px #428bca;
}

.LoadingTextoAmarelo {
    color: #e9d8c1;
    text-shadow: 0 0 0.2em #ee8a01, -1px 0px 0px #ee8a01, 0px 1px 0px #ee8a01, 0px -1px 0px #ee8a01;
}

.LoadingTextoVermelho {
    color: #e4cbd2;
    text-shadow: 0 0 0.2em #8d0126, -1px 0px 0px #8d0126, 0px 1px 0px #8d0126, 0px -1px 0px #8d0126;
}

.LoadingTextoVerde {
    color: #bbdbd0;
    text-shadow: 0 0 0.2em #056444, -1px 0px 0px #056444, 0px 1px 0px #056444, 0px -1px 0px #056444;
}

#animacao_aguarde {
    width: 80px;
    height: 80px;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    float: left;
    margin-right: 40px;
}



    #animacao_aguarde .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

        #animacao_aguarde .sk-cube:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -webkit-animation: sk-foldCubeAngle 1.5s infinite linear both;
            animation: sk-foldCubeAngle 1.5s infinite linear both;
            -webkit-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
        }

    #animacao_aguarde .sk-cube1:before {
        background-color: #428bca;
    }

    #animacao_aguarde .sk-cube2:before {
        background-color: #ee8a01;
    }

    #animacao_aguarde .sk-cube3:before {
        background-color: #8d0126;
    }

    #animacao_aguarde .sk-cube4:before {
        background-color: #056444;
    }


    #animacao_aguarde .sk-cube2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
    }

    #animacao_aguarde .sk-cube3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
    }

    #animacao_aguarde .sk-cube4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
    }

    #animacao_aguarde .sk-cube2:before {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    #animacao_aguarde .sk-cube3:before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    #animacao_aguarde .sk-cube4:before {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }

@-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}





@media screen and (max-width: 640px) {
    #mensagens_divAGUARDE_TEXTO {
        font-size: 14px;
    }

    #animacao_aguarde {
        width: 40px;
        height: 40px;
    }
}
