#c27-explore-listings .loader-bg {
    margin-top: 20px;
    margin-bottom: 70px;
	height: 100%;
}
@media only screen and (max-width: 768px) {
	#c27-explore-listings .loader-bg {
    margin-top: 15px;
}
}
.listing-skeleton {
    width: 100%;
    height: 670px;
    margin-bottom: 20px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #e3e3e3;
}
@media screen and (min-width: 769px) {
    .skeleton-loader.wide .listing-skeleton {
        height: 283px;
    }
}
.listing-skeleton:empty::after {
    content:"";
    display:block;
    width: 100%;
    height: 100%;
    border-radius:3px;
    background-image:
            linear-gradient(90deg, rgba(255,255,255,0) 0, #fff 50%, rgba(255,255,255,0) 100%), /*Animation Blur*/
            url("/wp-content/themes/my-listing/assets/images/car_silhouette_skeleton.svg"), /* Car */
            linear-gradient(#e3e3e3 32px, transparent 0), /*Title*/
            linear-gradient(#e3e3e3 32px, transparent 0), /*Badge*/
            linear-gradient(#e3e3e3 16px, transparent 0), /* Subtitle */
            linear-gradient(#e3e3e3 60px, transparent 0), /* Box 1 */
            linear-gradient(#e3e3e3 60px, transparent 0), /* Box 2 */
            linear-gradient(#e3e3e3 60px, transparent 0), /* Box 3 */
            linear-gradient(#e3e3e3 60px, transparent 0), /* Box 4 */
            radial-gradient(circle 16px at center, #e3e3e3 99%, transparent 0), /*Fav*/
            linear-gradient(#fff 620px, transparent 0); /* Background */

    background-size:
            200px 500px, /*Animation Blur*/
            220px 119px, /* Car */
            70% 32px, /*Title*/
            100px 32px, /*Badge*/
            60% 16px, /* Subtitle */
            calc(50% - 27px) 60px, /* Box 1 */
            calc(50% - 27px) 60px, /* Box 2 */
            calc(50% - 27px) 60px, /* Box 3 */
            calc(50% - 27px) 60px, /* Box 4 */
            32px 32px, /*Fav*/
            100% 100% /* Background */
;

    background-position:
            -150% 0, /*Animation Blur*/
            50% 80px, /* Car */
            18px 240px, /*Title*/
            18px 18px, /*Badge*/
            18px 284px, /* Subtitle */
            18px 340px, /* Box 1 */
            calc(100% - 18px) 340px, /* Box 2 */
            18px 418px, /* Box 3 */
            calc(100% - 18px) 418px, /* Box 4 */
            calc(100% - 18px) 18px, /*Fav*/
            0 0 /* Background */
;

    background-repeat: no-repeat;
    animation: loading 2s infinite;
}

@keyframes loading {
    to {
        background-position:
                350% 0,
                50% 80px, /* Car */
                18px 240px, /*Title*/
                18px 18px, /*Badge*/
                18px 284px, /* Subtitle */
                18px 340px, /* Box 1 */
                calc(100% - 18px) 340px, /* Box 2 */
                18px 418px, /* Box 3 */
                calc(100% - 18px) 418px, /* Box 4 */
                calc(100% - 18px) 18px, /*Fav*/
                0 0 /* Background */
    ;
    }
}

@media only screen and (max-width: 768px) {
    .skeleton-loader .col-md-6 {
        width: 50%;
    }
}
@media only screen and (max-width: 660px) {
    .skeleton-loader .col-md-6 {
        width: 100%;
    }
}