.pageloader {
    position: fixed;
    width: 100%;
    height: 100%;
    /*background: #59488b;*/
    background: #282828;
    z-index:99999;
}
    /*Typing square*/
    .pageloader .square {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -0.5rem;
        margin-left: -0.5rem;
        width: 1rem;
        height: 1rem;
        border: 0.1rem rgba(255,255,255,1) solid;
        -webkit-animation: fill_color 5s linear infinite;
        -moz-animation: fill_color 5s linear infinite;
        -o-animation: fill_color 5s linear infinite;
        animation: fill_color 5s linear infinite;
    }

        .pageloader .square:after {
            width: 0.2rem;
            height: 0.2rem;
            position: absolute;
            content: "";
            background-color: rgba(255,255,255,1);
            top: -0.4rem;
            left: 0px;
            -webkit-animation: square_check 1s ease-in-out infinite;
            -moz-animation: square_check 1s ease-in-out infinite;
            -o-animation: square_check 1s ease-in-out infinite;
            animation: square_check 1s ease-in-out infinite;
        }
    /*Typing Loader*/
    .pageloader .typing_loader {
        width: 0.3rem;
        height: 0.3rem;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -webkit-animation: typing 1s linear infinite alternate;
        -moz-animation: Typing 1s linear infinite alternate;
        -o-animation: typing 1s linear infinite alternate;
        animation: typing 1s linear infinite alternate;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -0.5rem;
        margin-left: -0.5rem;
    }

@-webkit-keyframes typing {
    0% {
        background-color: rgba(255,255,255, 1);
        -moz-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        -webkit-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
    }

    25% {
        background-color: rgba(255,255,255, 0.4);
        -moz-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        -webkit-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
    }

    75% {
        background-color: rgba(255,255,255, 0.4);
        -moz-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,1);
        -webkit-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,1);
        box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,1);
    }
}

@-moz-keyframes typing {
    0% {
        background-color: rgba(255,255,255, 1);
        -moz-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        -webkit-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
    }

    25% {
        background-color: rgba(255,255,255, 0.4);
        -moz-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        -webkit-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
    }

    75% {
        background-color: rgba(255,255,255, 0.4);
        -moz-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,1);
        -webkit-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,1);
        box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,1);
    }
}

@keyframes typing {
    0% {
        background-color: rgba(255,255,255, 1);
        -moz-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        -webkit-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
    }

    25% {
        background-color: rgba(255,255,255, 0.4);
        -moz-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        -webkit-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
        box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,2), 1.2rem 0px 0px 0px rgba(255,255,255,0.2);
    }

    75% {
        background-color: rgba(255,255,255, 0.4);
        -moz-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,1);
        -webkit-box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,1);
        box-shadow: 0.6rem 0px 0px 0px rgba(255,255,255,0.2), 1.2rem 0px 0px 0px rgba(255,255,255,1);
    }
}

@-webkit-keyframes square_check {
    25% {
        left: 1.1rem;
        top: -0.4rem;
    }

    50% {
        left: 1.1rem;
        top: 1.1rem;
    }

    75% {
        left: -0.45rem;
        top: 1.1rem;
    }

    100% {
        left: -0.45rem;
        top: -0.35rem;
    }
}

@-moz-keyframes square_check {
    25% {
        left: 1.1rem;
        top: -0.4rem;
    }

    50% {
        left: 1.1rem;
        top: 1.1rem;
    }

    75% {
        left: -0.45rem;
        top: 1.1rem;
    }

    100% {
        left: -0.45rem;
        top: -0.35rem;
    }
}

@-ms-keyframes square_check {
    25% {
        left: 1.1rem;
        top: -0.4rem;
    }

    50% {
        left: 1.1rem;
        top: 1.1rem;
    }

    75% {
        left: -0.45rem;
        top: 1.1rem;
    }

    100% {
        left: -0.45rem;
        top: -0.35rem;
    }
}

@keyframes square_check {
    25% {
        left: 1.1rem;
        top: -0.4rem;
    }

    50% {
        left: 1.1rem;
        top: 1.1rem;
    }

    75% {
        left: -0.45rem;
        top: 1.1rem;
    }

    100% {
        left: -0.45rem;
        top: -0.35rem;
    }
}

@-webkit-keyframes fill_color {
    0% {
        -moz-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);
        -webkit-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);
        box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);
    }

    100% {
        -moz-box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);
        -webkit-box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);
        box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);
    }
}

@-moz-keyframes fill_color {
    0% {
        -moz-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);
        -webkit-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);
        box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);
    }

    100% {
        -moz-box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);
        -webkit-box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);
        box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);
    }
}

@keyframes fill_color {
    0% {
        -moz-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);
        -webkit-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);
        box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);
    }

    100% {
        -moz-box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);
        -webkit-box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);
        box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);
    }
}