#progressPopup {
    display: none;
}

    #progressPopup.show {
        display: block;
        position: fixed;
        vertical-align: middle;
        text-align: center;
        z-index: 999999;
        opacity: 0.75;
        filter: alpha(opacity=90);
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: #000;
        background-repeat: no-repeat;
        background-position: center;
    }

#loader {
    position: relative;
    width: 5em;
    height: 5em;
    transform: rotate(165deg);
}

@media all and (max-width:479px) {
    #loader:before, #loader:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 64px;
        height: 64px;
        border-radius: 0.25em;
        transform: translate(0%, 0%);
    }

    #loader:before {
        background-image: url('../img/balls-spinner.gif');
        background-size: 64px 64px;
        background-repeat: no-repeat;
    }

    #loader:after {
        background-image: url('../img/balls-spinner.gif');
        background-size: 64px 64px;
        background-repeat: no-repeat;
    }
}

@media all and (min-width:480px) {
    #loader:before, #loader:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 5em;
        height: 5em;
        border-radius: 0.25em;
        transform: translate(-50%, -50%);
    }

    #loader:before {
        animation: before 1s infinite;
    }

    #loader:after {
        animation: after 1s infinite;
    }

    @keyframes before {
        0% {
            width: 0.5em;
            box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
        }

        35% {
            width: 2.5em;
            box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
        }

        70% {
            width: 0.5em;
            box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
        }

        100% {
            box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
        }
    }

    @keyframes after {
        0% {
            height: 0.5em;
            box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
        }

        35% {
            height: 2.5em;
            box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
        }

        70% {
            height: 0.5em;
            box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
        }

        100% {
            box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
        }
    }
}

#loader {
    position: absolute;
    top: calc(50% - 1.25em);
    left: calc(50% - 1.25em);
}