/* Absolute Center Spinner */
.spin {
    position: fixed;
    z-index: 9999;
    height: 2em;
    width: 2em;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

    /* Transparent Overlay */
    .spin:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* :not(:required) hides these rules from IE9 and below */
    .spin:not(:required) {
        /* hide "loading..." text */
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
    }

        .spin:not(:required):after {
            content: '';
            background: url(https://storage.googleapis.com/funex-css/GWP_with_logo_text_1.gif);
            display: block;
            font-size: 10px;
            width: 300px;
            height: 308px;
            margin-top: 0;
            margin-left: 0;
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

    .spin:before {
        background: #ffffff;
    }


/*@media (max-width: 3000px) and (min-width: 2000px) {
    .spin:not(:required):after {
        content: '';
        display: block;
        font-size: 10px;
        width: 600px;
        height: 650px;
        margin-top:-300px;
        margin-left: -400px;
        background: url(https://storage.googleapis.com/funex-css/GWP_with_logo_text_1.gif);
        background-size: 600px 650px;
        background-position: center;
        background-repeat: no-repeat;
    }
}


@media (max-width: 1999px) and (min-width: 1511px) {
    .spin:not(:required):after {
        content: '';
        display: block;
        font-size: 10px;
        width: 500px;
        height: 550px;
        margin-top: -140px;
        margin-left: -340px;
        background: url(https://storage.googleapis.com/funex-css/GWP_with_logo_text_1.gif);
        background-size: 500px 550px;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media (max-width: 1520px) and (min-width: 768px) {
    .spin:not(:required):after {
        content: '';
        display: block;
        font-size: 10px;
        width: 300px;
        height: 350px;
        margin-top: -45px;
        margin-left: -300px;
        background: url(https://storage.googleapis.com/funex-css/GWP_with_logo_text_1.gif);
        background-size: 300px 350px;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media (max-width: 765px) and (min-width: 320px) {
    .spin:not(:required):after {
        content: '';
        display: block;
        font-size: 10px;
        width: 300px;
        height: 350px;
        margin-top: 15px;
        margin-left: -150px;
        background: url(https://storage.googleapis.com/funex-css/GWP_with_logo_text_1.gif);
        background-size: 200px 250px;
        background-position: center;
        background-repeat: no-repeat;
    }
}*/


@media screen and (min-width:1500px) and (max-width:2000px) {
    .spin:not(:required):after {
        width: 450px;
        height: 463px;
    }
}

@media screen and (min-width:1300px) and (max-width:1500px) {
    .spin:not(:required):after {
        width: 400px;
        height: 411px;
    }
}