/*******************************************************/
/******************** ## Blog Area ********************/
/*******************************************************/
.blog-meta
    line-height: 1
    flex-wrap: wrap
    +flexcenter(center)
    text-transform: uppercase
    font-family: $heading-font
    background: $primary-color
    li
        font-size: 18px
        margin: 3px 15px
        +res-bl(xs)
            font-size: 16px
            +gapLR(margin, 8px)
        a
            color: white
            
.blog-meta-two
    line-height: 1
    flex-wrap: wrap
    +flexcenter(start)
    text-transform: uppercase
    font-family: $heading-font
    li
        font-size: 18px
        margin-right: 30px
        margin-bottom: 5px
        +res-bl(xs)
            font-size: 16px
            margin-right: 16px
        i
            margin-right: 5px
        a:hover
            color: $primary-color
    &.style-two
        font-family: $base-font
        text-transform: capitalize
        li
            font-size: 16px
        
.blog-item
    margin-bottom: 30px
    .image
        position: relative
        margin-bottom: 35px
        img
            width: 100%
    .blog-meta
        +poLB(0)
        width: 100%
        padding-top: 15px
        padding-bottom: 10px
    .content
        h4
            margin-bottom: 15px
            +res-bl(xs)
                font-size: 22px
                
    &.style-two
        .blog-meta-two
            margin-bottom: 13px
        .read-more
            color: $base-color
            text-decoration: none
            &:hover
                color: $heading-color
        .content
            h3
                max-width: 650px
                +res-ab(md)
                    font-size: 35px
                +res-bl(ms)
                    font-size: 25px
                    line-height: 1.4
            .theme-btn
                color: white
                font-size: 16px
                padding: 7px 30px
                background: $heading-color
                i
                    font-size: 12px
        &.image-left
            +res-ab(md)
                display: flex
            .image
                +res-ab(md)
                    flex: none
                    width: 300px
                    margin-right: 50px
                    margin-bottom: 0
    &.style-three
        +res-ab(md)
            display: flex
        .image
            flex: none
            margin-bottom: 0
            align-self: center
            +res-ab(md)
                width: 46%
        .content
            padding: 50px
            display: flex
            transition: 0.5s
            flex-direction: column
            border: 1px solid $border-color
            +res-bl(ms)
                +gapLR(padding, 25px)
            .blog-meta-two
                margin-bottom: 15px
                li a:hover
                    color: $secondary-color
            p
                margin-top: auto
                margin-bottom: 25px
            .read-more
                line-height: 1.2
        &:hover
            .content
                background: #F4F1EA
                border-color: #F4F1EA
        &.black-bg
            background: #0D0D0D
            .content
                border: none
                background: transparent
                .blog-meta-two
                    li a
                        color: #ACACAC
                        &:hover
                            color: $secondary-color
                h4 a
                    color: white
                p
                    color: #ACACAC
            
.blog-two-wrap
    max-width: 750px
    
.blog-item-two
    margin-bottom: 30px
    .image
        position: relative
        margin-bottom: 27px
        img
            width: 100%
        .date
            +poRT(10px)
            max-width: 55px
            color: white
            padding: 12px 13px
            line-height: 1.2
            border-radius: 7px
            background: $primary-color
    .content
        .tag
            margin-bottom: 10px
            display: inline-block
            i
                color: $primary-color
                margin-right: 6px
        h4
            margin-bottom: 14px
    
/* Blog Standard */
.blog-details-wrap,
.blog-standard-wrap
    max-width: 800px
    .blog-item.style-two
        margin-bottom: 50px

/* Blog Details */
.blog-details-wrap
    h3
        margin-bottom: 20px
    img
        width: 100%
                
blockquote
    @extend %h3
    position: relative
    padding: 30px 60px 40px
    background: $lighter-color
    +res-bl(md)
        font-size: 25px
        line-height: 1.4
        padding-left: 35px
        padding-right: 15px
    +res-bl(xs)
        font-size: 22px
        line-height: 1.4
        padding-right: 10px
    .text
        span
            line-height: 1
            font-size: 1.7em
    .blockquote-footer
        display: block
        margin-bottom: 0
        margin-top: 26px
        font-size: 0.7em
        font-family: $base-font
        &:before
            content: '———'
            margin-right: 20px
            letter-spacing: -4px               

.tag-share
    flex-wrap: wrap
    +flexcenter(space-between)
    .item
        display: flex
        align-items: center
        margin-bottom: 15px
        h6
            margin-top: 10px
            margin-right: 25px
        .tags
            a
                &:not(:last-child):after
                    content: ','
        .social-style-one
            a
                &:not(:hover)
                    background: $lighter-color
                +res-bl(xs)
                    +size(35px)
                    line-height: 35px
                
/* Next Prev Blog */
.next-prev-blog
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    .item
        display: flex
        max-width: 322px
        align-items: center
        margin-bottom: 20px
        .image
            flex: none
            max-width: 80px
            margin-right: 30px
        h6
            font-size: 18px
            margin-bottom: 0
            line-height: 1.5

/* Comments */
.comment-body
    margin-bottom: 35px
    +res-ab(ms)
        display: flex
    .author-thumb
        flex: none
        max-width: 80px
        margin-right: 40px
        margin-bottom: 20px
        +res-bl(sm)
            margin-right: 25px
        img
            border-radius: 50%
    .content
        .comment-header
            display: flex
            flex-wrap: wrap
            margin-bottom: 2px
            align-items: center
            li
                margin-bottom: 5px
                &:not(:last-child)
                    margin-right: 15px
                h6
                    margin-bottom: 0
                    +res-ab(sm)
                        font-size: 22px
        p
            margin-bottom: 5px
        .read-more
            color: $base-color
            text-decoration: none
    &.comment-child
        margin-left: 60px
        +res-bl(md)
            margin-left: 30px
        +res-bl(xs)
            margin-left: 20px
            
.comment-title
    +res-ab(md)
        font-size: 35px
            
.comments.rattings
    .comment-body
        margin-bottom: 30px
        padding-bottom: 10px
        border-bottom: 1px solid $border-color
        .author-thumb
            max-width: 135px
            margin-right: 30px
        .content
            .ratting
                margin-bottom: 12px
                i
                    margin: 0 8px 0 0
                    color: $primary-color
            
.admin-comment
    .comment-body
        max-width: none
        margin-bottom: 0
        padding: 30px 40px
        align-items: center
        +res-bl(md)
            +gapLR(padding, 25px)
        .author-thumb
            +res-ab(xl)
                max-width: 160px
            +res-ab(sm)
                margin-bottom: 0
                margin-right: 40px
        .content
            h4
                margin-bottom: 0
            .author
                display: block
                margin-bottom: 15px
            .social-icons
                margin-top: 10px
                a
                    margin-right: 20px
                    &:hover
                        color: $primary-color
                
/* Comment Form */
.review-form,
.comment-form
    .form-group
        +res-ab(lg)
            margin-bottom: 30px
    .form-control
        font-size: 16px
        font-weight: 400
        font-family: $base-font
        background: $lighter-color
        border-color: $lighter-color
        &:focus
            border-color: $heading-color
    .ratting
        b
            margin-right: 20px
        i
            color: $base-color