/**
* CSS for both Frontend+Backend.
*/

.tpgb-post-listing .post-loop-inner {
    position: relative
}

.tpgb-post-listing .post-loop-inner .post-meta-info a,.tpgb-post-listing .post-loop-inner .tpgb-post-title a {
    text-decoration: blink
}

.tpgb-post-listing .dynamic-list-content {
    position: relative;
    overflow: hidden;
    width: 100%
}

.tpgb-post-img {
    width: 100%
}

.tpgb-dynamic-tran,.tpgb-dynamic-tran a,.tpgb-dynamic-tran p {
    transition: all .3s ease-in-out
}

/*-----Post title----*/
.tpgb-post-listing .tpgb-post-title {
    font-size: 20px;
    line-height: 25px;
    margin: 0
}

.tpgb-post-listing .dynamic-list-content:hover .tpgb-post-title a {
    color: #6f14f1
}

.tpgb-post-excerpt {
    position: relative
}

.editor-styles-wrapper .tpgb-post-excerpt p,.tpgb-post-excerpt p {
    margin: 5px 0 0
}

/*-----Post title----*/
/*-----Post Meta Info----*/
.post-meta-info {
    position: relative;
    display: block;
    font-size: 14px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 10px
}

.post-meta-info>span,.post-meta-info>span>a {
    font-weight: 500
}

.post-info-style-3 .post-author-date {
    vertical-align: middle;
    display: inline-block;
    margin-left: 7px
}

.post-info-style-3 .post-author-date>a {
    display: block;
    line-height: 20px;
    text-transform: capitalize;
    text-align: left
}

.post-info-style-3 .post-author-detail {
    display: flex;
    align-items: center
}

.post-info-style-3 .post-author-avatar img {
    border-radius: 30px;
    max-width: 42px
}

.post-info-style-3 .post-author-date>.post-author-name {
    text-transform: uppercase;
    font-weight: 600
}

.tpgb-post-listing .post-meta-info .post-author-date>a,.tpgb-post-listing .post-meta-info>span,.tpgb-post-listing .post-meta-info>span>a {
    color: #676767
}
/*-----Post Meta Info----*/
.tpgb-post-featured-img {
    position: relative;
    overflow: hidden
}

.tpgb-post-featured-img>a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: 0 0;
    transition: all .3s ease-in-out;
    z-index: 1
}

.tpgb-post-listing .dynamic-list-content:hover .tpgb-post-featured-img.hover-image-style-1 img,.tpgb-post-listing.tpgb-metro .dynamic-list-content:hover .tpgb-post-featured-img.hover-image-style-1 .tpgb-blog-image-metro {
    transform: scale(1.1)
}

.tpgb-post-category {
    display: block;
    position: relative
}

.tpgb-post-category.cat-style-1>a,.tpgb-post-category.cat-style-2>a {
    display: inline-block;
    line-height: 18px;
    color: #212121;
    vertical-align: middle
}

.tpgb-post-category.cat-style-1>a {
    border: 1px solid #212121;
    padding: 4px 15px;
    font-size: 12px;
    margin: 0 8px 4px 0;
    border-radius: 30px
}

.tpgb-post-category.cat-style-2>a {
    position: relative;
    font-size: 15px;
    margin: 0 10px 10px 0
}

.tpgb-post-category.cat-style-2>a:before {
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: -3px;
    left: 0;
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    background: #ff124f;
    transition: transform .3s cubic-bezier(.52,.01,.16,1)
}

.tpgb-post-category.cat-style-2>a:hover:before {
    transform: scaleX(1)
}


.tpgb-no-posts-found {
    font-size: 14px;
    background: #8072fc;
    padding: 10px;
    text-align: center;
    line-height: 25px;
    border-radius: 3px;
    box-shadow: 0 5px 30px -5px #8072fc;
    color: #fff
}
.tpgb-wrap-fw {
    width: 100%;
}
@media (max-width:767px) {
    .tpgb-post-listing .tpgb-row {
        margin-left: 0;
        margin-right: 0
    }
}

@media (max-width:575px) {
    .dynamic-style-3.content-align-left-right .grid-item:nth-child(even) .post-content-image,.dynamic-style-3.content-align-left-right .grid-item:nth-child(odd) .post-content-image {
        -webkit-box-ordinal-group: 1;
        order: 0;
        padding: 0
    }

    .dynamic-style-3.content-align-right .post-content-image {
        -webkit-box-ordinal-group: 1;
        order: 0
    }

    .dynamic-style-3 .tpgb-content-bottom {
        margin-top: 15px
    }

    .dynamic-style-3.content-align-left-right .grid-item:nth-child(even) .tpgb-content-bottom,.dynamic-style-3.content-align-left-right .grid-item:nth-child(odd) .tpgb-content-bottom,.dynamic-style-3.content-align-right .post-content-image,.dynamic-style-3.content-align-right .tpgb-content-bottom {
        padding: 0 15px!important
    }
}

 /* skeleton Css  */
 @keyframes loading {
    to {
        transform: translateX(100%)
    }
}

.tpgb-skeleton {
    padding: 15px;
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    left: 0;
    overflow: hidden;
    background-position: center;
    background-size: cover
}

.loading::after,.tpgb-skeleton-img {
    display: block;
    width: 100%;
    height: 100%
}

.tpgb-skeleton-bottom {
    position: absolute;
    background: #3f404257;
    bottom: 0;
    width: 100%;
    height: 80px
}

.tpgb-skeleton-title {
    padding: 8px;
    font-size: 22px;
    font-weight: 700
}

.tpgb-skeleton-title.loading {
    height: 1rem;
    width: 50%;
    margin: 1rem;
    border-radius: 3px
}

.tpgb-skeleton-description {
    padding: 8px;
    font-size: 16px
}

.tpgb-skeleton-description.loading {
    height: 23px;
    margin: 1rem;
    width: 74%;
    border-radius: 3px
}

.loading {
    position: relative;
    background-color: #e2e2e2
}

.loading::after {
    content: "";
    position: absolute;
    top: 0;
    transform: translateX(-100%);
    background: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(rgba(255,255,255,.2)),to(transparent));
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    animation: loading .8s infinite
}

/* skeleton Css */

/* Twenty Twenty Three Theme Image Issue */
.theme-twentytwentythree .tpgb-post-listing:not(.dynamic-style-4) .post-loop-inner .tpgb-post-img , .wp-site-blocks .tpgb-post-listing:not(.dynamic-style-4) .post-loop-inner .tpgb-post-img{
    height: auto;
}