$Karla-font: 'Karla', sans-serif
$color-highlight-one: #666666
$color-highlight-two: #999999
$color-highlight-three: #010101
$color-highlight-four: #e3e3e3
$color-highlight-five: #f9f9f9
$color-highlight-six: #f9f9f9
$color-highlight-seven: #f6f6f8
$color-highlight-eight: #cccccc
$color-white: #ffffff
$color-black: #000000
$color-orange: #ff4800
    
.main-blog-area.blog-list-page
    margin-top: 150px
.main-blog-area
    margin-top: 0px
    .blog-post-header-area
        margin-bottom: 30px
        margin-top: 30px
        h1
            color: $color-black
            font-family: $Karla-font
            font-size: 50px
            font-weight: 700
            line-height: 72px
            letter-spacing: -3px
            text-align: center
        p
            color: $color-orange
            font-family: $Karla-font
            font-size: 16px
            font-weight: 400
            line-height: 26px
            text-align: center
    .post-navigation
        width: 100%
        float: left
        height: auto
.blog-list-single-item, 
    width: 100%
    float: left
    height: auto
    padding-bottom: 20px
    margin-top: 0px
    box-shadow: 0px 0px 4px #00000014
    padding-left: 40px
    padding-right: 40px
    border-radius: 5px
    margin-bottom: 40px
    .blog-list-thub-area
        width: 100%
        a
            img
    .blog-list-content-area
        background: $color-white
        padding: 0px
        .blog-list-header
            margin-top: 20px
            float: left
            width: 100%
            height: auto
            .entry-header
                .entry-title
                    word-break: break-all
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 30px
                    font-weight: 700
                    letter-spacing: -0.84px
                    word-wrap: break-word
                    display: block
                    a
                        color: $color-black
                        font-family: $Karla-font
                        font-size: 30px
                        font-weight: 700
                        letter-spacing: -0.84px
                        word-wrap: break-word
                        display: block
                        &:hover
                            color: $color-orange
            .blog-meta-area
                margin-bottom: 0px
                margin-top: 25px
                display: flex
                justify-content: flex-start
                align-items: center
                flex-wrap: wrap
                pre
                    white-space: pre-wrap
                p, a
                    color: $color-highlight-two
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 400
                .cat-blgo
                    display: flex
                    padding-right: 15px
                    align-items: center
                    justify-content: flex-start
                    flex-wrap: wrap
                    margin: 5px 0
                    a
                        padding-left: 10px
                        color: $color-black
                        text-transform: capitalize
                        &:hover
                            color: $color-orange
                        &:first-child
                            padding-left: 0px
                .date-blog
                    margin: 5px 0
                    border-left: 1px solid $color-highlight-two
                    padding-right: 15px
                    padding-left: 15px
                    border-right: 1px solid $color-highlight-two
                    p
                .user-blog
                    margin: 5px 0
                    padding-left: 15px
                    a
                        padding-right: 0px
                        text-transform: capitalize
                        color: $color-black
                        &:hover
                            color: $color-orange
        .blog-list-footer
            .post-tag-list
                float: right
                a
                    display: inline-block
                    background: #f1f1f3
                    padding: 2px 15px
                    border-radius: 30px
                    text-transform: capitalize

.blog-pagination
    float: left
    width: 100%
    height: auto
    ul
        display: flex
        justify-content: flex-start
        align-items: center
        li
            .current
            .page-numbers
            a, span
                display: inline-block
                width: 45px
                height: 42px
                color: #222222
                border: 1px solid $color-white
                font-size: 12px
                line-height: 3.6
                font-weight: 600
                text-align: center
                box-shadow: 0px 1px 3px #ffe5db
                border-radius: 4px
                transition: all 0.2s linear
                margin: 0px 2px 
                &:hover
                    background: $color-orange
                    color: $color-white
            span
                background: $color-orange
                color: $color-white
.arado-page-pagination
    margin-top: 10px
    .post-page-numbers
        display: inline-block
        width: 35px
        height: 32px
        color: #222222
        border: 1px solid $color-white
        font-size: 12px
        line-height: 2.6
        font-weight: 600
        text-align: center
        box-shadow: 0px 1px 3px #ffe5db
        border-radius: 4px
        transition: all 0.2s linear
        margin: 0px 2px 
        &:hover
            background: $color-orange
            color: $color-white
        span
            span
                display: none
    .current
        background: $color-orange
        color: $color-white
// commnent css
.post-thumbnail
    margin-top: 50px
.logged-in
    .single-comment-post-area
        .comment-form
            p
                &:nth-child(1)
                    order: 1 !important
                &:nth-child(2)
                    order: 2 !important 
                &:nth-child(3)
                    order: 3 !important
.single-comment-post-area
    background-color: #f3f3f3
    padding-top: 110px
    padding-bottom: 95px
    margin-top: 0px
    float: left
    width: 100%
    height: auto
    .comment-title
        margin-bottom: 40px
        h2
            color: $color-black
            font-family: $Karla-font
            font-size: 22px
            font-weight: 700
            line-height: 26px
            letter-spacing: -0.33px
    
    .comment-respond
        float: left
        width: 100%
        height: auto
        .comment-reply-title
            color: $color-black
            font-family: $Karla-font
            font-size: 22px
            font-weight: 700
            line-height: 26px
            letter-spacing: -0.33px
            margin-bottom: 10px
            small
                font-size: 16px
                color: $color-orange
                a
        .comment-form
            display: flex
            flex-wrap: wrap
            margin-bottom: 20px
            p
                width: 100%
                &:nth-child(1)
                    order: 1
                &:nth-child(2)
                    order: 5
                &:nth-child(3)
                    order: 2
                &:nth-child(4)
                    order: 3
                &:nth-child(5)
                    order: 4
                &:nth-child(6)
                    order: 6
                &:nth-child(7)
                    order: 7
            .logged-in-as
                margin-bottom: 35px
                display: flex
                justify-content: space-between
                align-items: center
                a
                    &:last-child
                        color: $color-orange
            label
                font-size: 16px
                margin-bottom: 10px
                float: left
                color:  $color-black
                font-weight: 500
                .required
                    color: $color-orange
            textarea
                background-color: $color-white
                width: 100%
                border: 1px solid transparent
                color: $color-black
                font-family: $Karla-font
                font-size: 16px
                font-weight: 400
                padding: 15px 20px
                height: 261px
                margin-bottom: 20px
            input
                background-color: $color-white
                width: 100%
                border: 1px solid transparent
                color: $color-black
                font-family: $Karla-font
                font-size: 16px
                font-weight: 400
                padding: 15px 20px
                margin-bottom: 20px
            .comment-form-author
                width: 50% !important
                float: left
                padding-right: 15px
            .comment-form-email
                float: left
                width: 50% !important
                padding-left: 15px
            .form-submit
                .submit
                    @extend .button-bg-one
                    height: auto
                    padding: 18px
                    font-size: 15px
                    margin-bottom: 0
            .comment-notes
                margin-bottom: 40px
                .email-notes
                    color:  $color-highlight-two
                .required
                    color:  $color-orange
            .comment-form-comment
            .comment-form-cookies-consent
                margin-bottom: 10px
                display: flex
                justify-content: flex-start
                align-items: flex-start
                input
                    margin: 0
                    padding: 0
                    width: auto
                    margin-right: 5px
                    height: 18px
                label
                    width: 100%
                    color:  $color-highlight-two
                    font-size: 14px
    .arado-comment-area
        ol
            li
                ol
                    padding-left: 85px
                    li
                        ol
                            padding-left: 42.5px
                            li
        .comments-title
            margin-bottom: 40px
            color: $color-black
            font-family: $Karla-font
            font-size: 22px
            font-weight: 700
            line-height: 26px
            letter-spacing: -0.33px
        .comment-list
            list-style: outside none
            li 
                list-style: outside none
            .comment
                width: 100%
                float: left
                height: auto
        .comment-body
            max-width: 770px
            width: 100%
            margin-bottom: 35px
            float: left
            .comment
                padding-left: 85px
            .comment-meta
                display: flex
                justify-content: flex-start
                align-items: flex-start
                .comment-author
                    display: flex
                    img
                        margin-right: 15px
                        width: 70px
                        height: 70px
                    .fn
                        border-top: 1px solid #9999994f
                        width: 210px
                        padding-top: 20px
                        font-size: 15px
                        font-weight: 600
                        letter-spacing: 0.33px
                    .says
                        display: none
                .comment-awaiting-moderation
                    width: 100%
                    border-top: 1px solid #9999994f
                    margin-left: 15px
                    display: flex
                    justify-content: flex-start
                    align-items: flex-start
                    padding-top: 20px
                .comment-metadata    
                    width: 100%
                    border-top: 1px solid #9999994f
                    margin-left: 15px
                    display: flex
                    justify-content: flex-start
                    align-items: flex-start
                    padding-top: 20px
                    a 
                        color:  $color-highlight-two
                        font-size: 16px
                        font-weight: 400
                    .edit-link
                        a
                            margin-left: 10px
                            color: $color-orange
            .reply
                padding-left: 85px
                margin-top: 23px
                margin-bottom: 28px
                float: left
                width: 100%
                height: auto
                a
                    color: #0099cc
                    font-weight: 400
                    font-style: italic
                    letter-spacing: 0.4px
                    line-height: 18px
.blog-list-thub-area
    .post-thumbnail
        img
            display: block
.blog-list-content
    color: $color-highlight-one
    font-family: $Karla-font
    font-size: 16px
    font-weight: 400
    line-height: 30px
    margin-top: 20px
    float: left
    width: 100%
    height: auto
    h1, h2, h3, h4, h5, h6
        margin-bottom: 10px
    h1
        font-size: 46px
        line-height: 46px
    h2
        font-size: 40px
        line-height: 40px
    h3
        font-size: 36px
        line-height: 36px
    h4
        font-size: 32px
        line-height: 32px
    h5
        font-size: 28px
        line-height: 28px
    h6
        font-size: 24px
        line-height: 24px
    p
        line-height: 1.75
        strong
            font-weight: 700
            padding: 10px 0
            display: inline-block
    b, strong
        font-weight: 700
    dfn, cite, em, i
        font-style: italic
    q
        quotes: "“" "”" "‘" "’"
    sub
        bottom: -.25em
        position: relative
    sup
        top: -.5em
        position: relative
    del
        text-decoration: line-through
    mark, ins
        background: #9a9a9a
        text-decoration: none
        color: $color-white
        padding: 0px 5px
    pre
        white-space: pre-wrap
        background: #fff
        padding: 20px
        box-shadow: 0px 0px 1px #ff480038
    code
        color: $color-orange
        background:  #ff48001a
        padding: 0px 3px
    p
        margin-top: 12.5px
        margin-bottom: 12.5px
    a
        display: inline-block
    address 
        font-style: italic
    abbr[title]
        border-bottom: 1px #767676 dotted
    abbr, acronym 
        border-bottom: 1px dotted #666
        cursor: help
    acronym[title]
        text-decoration: underline dotted
    ul
        margin: 30px auto
        padding-left: 30px
        li
            list-style: unset !important
        ul
            margin: 5px auto
    ol
        margin: 5px auto !important
        padding-left: 30px !important
        li
            list-style: unset !important
        ul
            margin: 5px auto
    dl
        display: block
        margin-block-start: 1em
        margin-block-end: 1em
        margin-inline-start: 0px
        margin-inline-end: 0px
        dt
            font-weight: 700
        dd
            margin: 0 1.5em 1.5em
    .gallery
        overflow-x: hidden
    .gallery-columns-1
        display: flex
        flex-wrap: wrap
        margin-right: -15px
        margin-left: -15px
        figure.gallery-item
            -ms-flex: 0 0 100%
            flex: 0 0 100%
            max-width: 100%
            text-align: center
            padding-right: 15px
            padding-left: 15px
            figcaption
                margin-bottom: 20px
    .gallery-columns-2
        display: flex
        flex-wrap: wrap
        margin-right: -15px
        margin-left: -15px
        figure.gallery-item
            -ms-flex: 0 0 50%
            flex: 0 0 50%
            max-width: 50%
            text-align: center
            padding-right: 15px
            padding-left: 15px
            figcaption
                margin-bottom: 20px
    .gallery-columns-3
        display: flex
        flex-wrap: wrap
        margin-right: -15px
        margin-left: -15px
        figure.gallery-item
            -ms-flex: 0 0 33.333333%
            flex: 0 0 33.333333%
            max-width: 33.333333%
            text-align: center
            padding-right: 15px
            padding-left: 15px
            figcaption
                margin-bottom: 20px
    .gallery-columns-4
        display: flex
        flex-wrap: wrap
        margin-right: -15px
        margin-left: -15px
        figure.gallery-item
            -ms-flex: 0 0 25%
            flex: 0 0 25%
            max-width: 25%
            text-align: center
            padding-right: 15px
            padding-left: 15px
            figcaption
                margin-bottom: 20px
    .gallery-columns-5
        display: flex
        flex-wrap: wrap
        margin-right: -15px
        margin-left: -15px
        figure.gallery-item
            -ms-flex: 0 0 20%
            flex: 0 0 20%
            max-width: 20%
            text-align: center
            padding-right: 15px
            padding-left: 15px
            figcaption
                margin-bottom: 20px
    .gallery-columns-6
        display: flex
        flex-wrap: wrap
        margin-right: -15px
        margin-left: -15px
        figure.gallery-item
            -ms-flex: 0 0 16.666667%
            flex: 0 0 16.666667%
            max-width: 16.666667%
            text-align: center
            padding-right: 15px
            padding-left: 15px
            figcaption
                margin-bottom: 20px
    .gallery-columns-7
        display: flex
        flex-wrap: wrap
        margin-right: -15px
        margin-left: -15px
        figure.gallery-item
            -ms-flex: 0 0 14.2857143%
            flex: 0 0 14.2857143%
            max-width: 14.2857143%
            text-align: center
            padding-right: 5px
            padding-left: 5px
            figcaption
                margin-bottom: 20px
    .gallery-columns-8
        display: flex
        flex-wrap: wrap
        margin-right: -15px
        margin-left: -15px
        figure.gallery-item
            -ms-flex: 0 0 12.5%
            flex: 0 0 12.5%
            max-width: 12.5%
            text-align: center
            padding-right: 5px
            padding-left: 5px
            figcaption
                margin-bottom: 20px
    .gallery-columns-9
        display: flex
        flex-wrap: wrap
        margin-right: -15px
        margin-left: -15px
        figure.gallery-item
            -ms-flex: 0 0 11.1111111%
            flex: 0 0 11.1111111%
            max-width: 11.1111111%
            text-align: center
            padding-right: 5px
            padding-left: 5px
            figcaption
                margin-bottom: 20px
    .alignleft
        float: left
    .wp-block-button.alignright
        float: right
    .aligncenter
        clear: both
        display: block
        margin-left: auto
        margin-right: auto
        text-align: center
        figcaption
            display: block
    figure
        max-width: 100%
        img
            margin-top: 0
            margin-bottom: 0
    .wp-caption-text
        text-align: center
    .wp-caption.aligncenter
        padding-top: 20px
    .wp-caption.alignleft
        margin-right: 20px
    .wp-caption.alignright
        float: right
    img.aligncenter
        text-align: center
        display: block
        margin: 50px auto
    img.alignleft
        float: left
        margin-right: 20px
        margin-top: 0
        margin-bottom: 0
    img.alignright
        float: right
        margin-left: 20px
        margin-bottom: 0
        margin-top: 0
    img
        position: relative
        font-size: 1rem
        text-align: center
        text-transform: capitalize
        display: inline-block
        &:after
            content: ""
            position: absolute
            left: 0
            top: 0
            padding: 10px 10px
            border: 1px solid $color-orange
            background-repeat: no-repeat
            display: inherit
            width: 100%
            background: $color-white
            color: $color-orange
            content: "" attr(alt) "not found"
            z-index: 1
    table
        width: 100%
        border: 1px solid #00000015 !important
        border-collapse: collapse
        margin-bottom: 25px
        th, td
            border: 1px solid #00000015 !important
            border-collapse: collapse
            padding: 5px
            text-align: left
            vertical-align: middle
        tr
            &:nth-child(even)
                background-color: $color-white
            &:nth-child(odd)
                background-color: $color-white
        th
            color: $color-black
    .post-password-form
        input[name="post_password"]
            color: $color-black
            font-family: $Karla-font
            font-size: 16px
            max-width: 190px
            width: 100%
            font-weight: 400
            padding: 10px 20px 
            letter-spacing: -0.24px
            border: 1px solid #d9d9d9
            background-color: $color-white
            border-radius: 0
            border-right: 0
            border-top-left-radius: 2px
            border-bottom-left-radius: 2px
        input[name="Submit"]
            @extend .sinle-input-field
            background: $color-orange
            color: $color-white
            padding: 10px 15px
            border-radius: 0
            border-top-right-radius: 2px
            border-bottom-right-radius: 2px
            margin-left: -2px
            cursor: pointer
    .wp-block-media-text
        .wp-block-media-text__content
            padding-top: 20px
            padding-bottom: 20px
    .has-media-on-the-right
        .wp-block-media-text__media
            padding: 0px 8%
    .has-large-font-size
        line-height: 40px
    .wp-block-gallery
        padding-left: 0px
        .blocks-gallery-item
            figure
                img
                    margin: 0 auto
                figcaption
                    line-height: 18px
                    overflow-x: hidden
    .wp-block-quote[style="text-align:right"]
        p
            border-right: 4px solid #ff4800
            border-left: 0px solid #ff4800
            padding-right: 95px
            padding-left: 0px
        cite
            float: right
    .wp-block-gallery.alignleft
        margin: 0px
        margin-right: 15px
    .wp-block-quote.is-style-large
        cite
            padding-right: 40px
            &:after
    .wp-block-quote
        float: left
        width: 100%
        height: auto
        margin-top: 20px
        p
            border-left: 4px solid #ff4800
            padding-left: 95px
            font-size: 24px
            color: $color-black
            cite
                padding-left: 40px
                &:after
                    left: 0px
                a
                    color: $color-highlight-one
                    &:hover
                        color: $color-orange
        cite
            margin-top: 20px
            margin-bottom: 35px
            padding-left: 135px
            position: relative
            float: left
            font-size: 14px
            font-weight: 700
            letter-spacing: 0.35px
            text-transform: uppercase
            a
                color: $color-highlight-one
            &:after
                color: #cccccc
                text-transform: uppercase
                transform: rotate(180deg)
                margin-right: 15px
                line-height: 39px
                content: '\f1b2'
                display: inline-block
                font: normal normal normal 14px/1 'Material-Design-Iconic-Font'
                text-rendering: auto
                -webkit-font-smoothing: antialiased
                -moz-osx-font-smoothing: grayscale
                font-size: 30px
                position: absolute
                left: 99px
                top: 0
            br
                display: none
    blockquote
        @extend .wp-block-quote
    .wp-block-pullquote
        @extend .wp-block-quote
        blockquote
            text-align: left
    .wp-block-audio
        float: left
        width: 100%
        height: auto
        margin: 30px auto
    .wp-block-video
        float: left
        width: 100%
        height: auto
        margin: 30px auto
    .wp-block-archives-dropdown
        float: left
        width: 100%
        height: auto
        margin-bottom: 30px
        select
            color: $color-black
            font-family: $Karla-font
            font-size: 16px
            width: auto
            font-weight: 400
            padding: 15px 20px 
            letter-spacing: -0.24px
            border: 1px solid #d9d9d9
            background-color: $color-white
    .wp-block-latest-comments
        list-style: outside none
        float: left
        width: 100%
        height: auto
        li
            display: flex
            justify-content: flex-start
            align-items: flex-start
            float: left
            width: 100%
            height: auto
            img
                margin: 0
            article
                footer.wp-block-latest-comments__comment-meta
                    margin-left: 20px
                .wp-block-latest-comments__comment-excerpt
                    margin-left: 20px
            
    .is-style-solid-color
        cite
            margin-bottom: 0
    .more-link
        float: left
        width: 100%
        text-align: left
        margin: 15px auto
        text-transform: capitalize
        border-left: 2px solid $color-orange
        padding-left: 10px
    img
        margin-top: 50px
        margin-bottom: 50px
hr.wp-block-separator
    margin-top: 50px
    margin-bottom: 50px
    float: left
    width: 100%
.wp-block-button.alignleft
    margin-right: 20px
.wp-block-button.alignright
    margin-left: 20px
.sticky_post_icon
    float: left
    width: 100%
    height: auto
    i
        color: #ff4800
        margin-right: 10px
        font-size: 30px
.comment-body
    color: $color-highlight-one
    font-family: $Karla-font
    font-size: 16px
    font-weight: 400
    line-height: 30px
    height: auto
    a
        display: unset
    span.edit-link
        float: left
        width: 100%
.comment-content
    @extend .blog-list-content
    padding-left: 85px
    pre
        box-shadow: none
    table
        th
            color: $color-black
.widget
    margin-bottom: 50px
.new-pagination-blog
    .page-numbers
        display: inline-block
        width: 45px
        height: 42px
        color: #222222
        border: 1px solid $color-white
        font-size: 12px
        line-height: 3.6
        font-weight: 600
        text-align: center
        box-shadow: 0px 1px 3px #ffe5db
        border-radius: 4px
        transition: all 0.2s linear
        margin: 0px 2px 
        &:hover
            background: $color-orange
            color: $color-white
    .current
        background: $color-orange
        color: $color-white
.screen-reader-text
    border: 0
    clip: rect(1px, 1px, 1px, 1px)
    clip-path: inset(50%)
    height: 1px
    margin: -1px
    overflow: hidden
    padding: 0
    position: absolute !important
    width: 1px
    word-wrap: normal !important
.heade-not-fixed
    margin-bottom: 40px