.blog-listing-area-one
    padding: 120px 0
    .blog-listing
.kitbug-sticky-post-area
    box-shadow: inset 0px 0px 7px 3px $shadowColor
.blog-listing-single-item-one
    background: $colorLightThree
    border-radius: 5px
    margin-bottom: 30px
    overflow: hidden
    &:last-child
        margin-bottom: 0
    .blog-listing-single-item-thumbnail
        position: relative
        display: grid
        a
            display: grid
        .post-date
            @extend .flex-start-center
            position: absolute
            left: 30px
            top: 30px
            background: $colorWhite
            border-radius: 50px
            padding: 5px 25px
            svg
                fill: $colorDark
                width: 17px
            p
                margin: 0
                margin-left: 10px
                time
                    font-family: $titleFont
                    color: $colorDark
                    font-size: 16px
    .blog-listing-single-item-content
        padding: 25px
        .sticky-post-icon
            position: absolute
            right: 39px
            top: 27px
            svg
                width: 25px
                fill: $colorDark
        .blog-listing-single-item-title
            font-family: $titleFont
            font-size: 30px
            line-height: 40px
            font-weight: 600
            margin-bottom: 5px
            a 
                font-family: $titleFont
                font-size: 30px
                line-height: 40px
                font-weight: 600
                display: block
        .blog-listing-single-item-info
            @extend .ul-reset
            @extend .flex-start-center
            flex-wrap: wrap
            li
                a
                    font-weight: 500
                span    
                    font-weight: 500
                margin-right: 25px
                position: relative
                &::after
                    content: ""
                    position: absolute
                    right: -14px
                    top: 10px
                    height: 15px
                    width: 1px
                    background: $colorDark
                &:last-child
                    &::after
                        display: none
                    
            .post-on-one
                a
                    color: $colorDark
                &:hover
                    a
                        color: $colorHighlight
            .post-comment-one
            .post-by-one
                span
                    color: $colorDark
                a
                    color: $colorHighlight
    .blog-listing-single-item-excerpt
        margin: 15px 0
        margin-bottom: 0
        p
            margin-bottom: 0
    .blog-listing-single-item-read-more
        overflow: hidden
        clear: both
        margin-top: 13px
        a
            font-family: $titleFont
            font-weight: 700
            color: $colorDark
            font-size: 17px
            &:focus
                outline: -webkit-focus-ring-color auto 1px
            @extend .flex-start-center
            i
                margin-left: 10px
                font-size: 15px
            svg
                fill: $colorDark
                position: relative
                top: 2px
                width: 20px 
                &:nth-child(1)
                &:nth-child(3)
                    margin-left: -16px
                    width: 25px
                    margin-top: 3px
                &:nth-child(4)
                    margin-left: -20px
                    width: 30px
                &:nth-child(5)
                    margin-left: -19px

.blog-listing-single-item-page-links
    display: flex
    justify-content: flex-start
    align-items: flex-start
    overflow: hidden
    margin-top: 12px
    margin-bottom: 15px
    float: left
    width: 100%
    a,
    .current
        position: relative
        display: block
        line-height: 30px
        font-size: 16px
        height: 44px
        min-width: 44px
        padding: 6px 5px
        text-align: center
        color: $colorDark
        font-weight: 400
        text-align: center
        background: $colorWhite
        border-radius: 3px
        border: 1px solid $colorLightTwo
        text-transform: capitalize
        transition: all 500ms ease
        margin-right: 7px
        margin-bottom: 0px
        &:hover
            border-color: $colorHighlight
    .current
        border-color: $colorHighlight
.pagination-box
    .nav-links
        display: flex
        justify-content: flex-start
        align-items: flex-start
        overflow: hidden
        margin-top: 30px
        margin-bottom: 0px
        float: left
        width: 100%
        flex-wrap: wrap
        .page-numbers
            position: relative
            display: block
            line-height: 30px
            font-size: 16px
            height: 44px
            min-width: 44px
            padding: 6px 10px
            text-align: center
            color: $colorDark
            font-weight: 400
            text-align: center
            background: $colorWhite
            border-radius: 3px
            border: 1px solid $colorLightTwo
            text-transform: capitalize
            transition: all 500ms ease
            margin-right: 7px
            margin-bottom: 5px
            &:hover
                border-color: $colorHighlight
        .current
            border-color: $colorHighlight
        .next,
        .prev
            font-weight: 600