/* 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: '';
            display: block;
            font-size: 10px;
            width: 300px;
            height: 257px;
            margin-top: 0;
            margin-left: 0;
            background: url(https://storage.googleapis.com/funex-css/FUNEX_SEARCH_HOTEL_with_logo_text_.gif);
            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 screen and (min-width:1500px) and (max-width:2000px){
    .spin:not(:required):after {
        width: 450px;
        height: 386px;
    }
}

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