@import './theme/variables.sass'
body
    .mobile-responsive
        .wizrd-blog-theme
            .container
                @media (max-width: $mobile)
                    padding-left: 30px
                    padding-right: 30px
            .btn
                @media (max-width: $mobile)
                    font-size: 16px
                    padding: 7px 25px
                    letter-spacing: 0
            .wizrd-newsletter
                @media (max-width: $mobile)
                    width: 100%
                    padding: 0
                    background-color: transparent
                    flex-direction: column
                    align-items: center
                    height: auto
                    box-shadow: none
                .form-group
                    @media (max-width: $mobile)
                        width: 100%
                    .field_error
                        @media (max-width: $mobile)
                            bottom: 0
                    .form-control
                        @media (max-width: $mobile)
                            font-size: 14px
                            background-color: #fff !important
                            border-radius: 100px
                            margin: 0 0 20px
                            padding: 7px 25px
                            box-shadow: 0 0 10px 10px rgba(0,0,0,.02)
                .btn.btn-primary
                    @media (max-width: $mobile)
                        font-size: 14px
                        padding: 7px 25px
            .wizrd-site-header
                .wizrd-main-header
                    @media (max-width: $mobile)
                        padding: 12px 20px
                        a
                            &.wizrd-logo-img
                                @media (max-width: $ipad-pro)
                                    font-size: 0
                    .wizrd-header-logo
                        @media (max-width: $mobile)
                            max-width: 300px
                        a
                            @media (max-width: $mobile)
                                font-size: 18px
                                font-weight: 600
                                max-width: unset
                                width: 100%
                    .wizrd-site-navigation
                        &.wizrd-site-navigation-center
                            &.wizrd-site-navigation-extra
                                @media (max-width: $medium-desktop)
                                    position: relative
                                    left: auto
                                    transform: unset
                        ul
                            @media (max-width: $ipad-pro)
                                position: absolute
                                left: 0
                                right: 0
                                background-color: $white-color
                                top: 100%
                                padding: 10px 30px 30px
                                display: none
                                z-index: 11
                                border-top: 1px solid rgba(0,0,0,.1)
                                border-bottom: 1px solid rgba(0,0,0,.1)
                                text-align: left
                            li
                                @media (max-width: $ipad-pro)
                                    width: 100%
                                    text-align: left
                                    margin: 10px 0
                                .btn.btn-primary
                                    @media (max-width: $medium-desktop)
                                        margin-left: 8px
                                    @media (max-width: $ipad-pro)
                                        margin-left: 0
                                        // font-size: 16px
                                        // padding: 15px 25px
                                &.wizrd-mobile-nav
                                    @media (max-width: $ipad-pro)
                                        display: inline-block
                                a
                                    @media (max-width: $medium-desktop)
                                        padding: 9px 15px
                                    @media (max-width: $ipad-pro)
                                        font-size: 16px
                                    @media (max-width: $ipad-pro)
                                        padding: 0
                                        color: var(--black-color)
                                &.wizrd-header-social-links
                                    @media (max-width: $ipad-pro)
                                        width: auto
                                        display: inline-block
                                        margin: 15px 0
                                    a
                                        padding-left: 0
                                        padding-right: 20px
                                        @media (max-width: $small-desktop)
                                            padding-right: 10px
                                            padding-left: 0
                                        svg
                                            @media (max-width: $small-desktop)
                                                max-height: 18px
                                            path
                                                @media (max-width: $ipad-pro)
                                                    fill: $black-color
                                        &:hover,
                                        &:focus,
                                        &:active
                                            svg
                                                path
                                                    @media (max-width: $ipad)
                                                        fill: $black-color
                        .wizrd-mobile-icon
                            @media (max-width: $ipad-pro)
                                display: inline-block
            .wizrd-site-main
                .wizrd-home-banner
                    @media (max-width: $mobile)
                        padding: 32px 0
                    h1
                        @media (max-width: $ipad)
                            font-size: 45px
                        @media (max-width: $mobile)
                            font-size: 20px
                            letter-spacing: 0
                        span
                            @media (max-width: $mobile)
                                padding: 16px 8px
                    .wizrd-description
                        @media (max-width: $ipad)
                            font-size: 23px
                            line-height: 1.3
                        @media (max-width: $mobile)
                            font-size: 14px
                            letter-spacing: 0
                            padding: 0 15px
                            width: 270px
                            margin: 10px 0 15px
                .wizrd-recent-blogs
                    @media (max-width: $mobile)
                        padding: 20px 0 0
                    .container
                        @media (max-width: $mobile)
                            padding: 0
                    .wizrd-blog-list
                        @media (max-width: $mobile)
                            margin: 0 0 25px
                        li
                            a
                                .wizrd-blog-box
                                    @media (max-width: $mobile)
                                        padding: 0
                                        border: none !important
                                        flex-direction: column
                                    .wizrd-blog-img
                                        @media (max-width: $mobile)
                                            width: 100%
                                            margin: 0
                                        img
                                            @media (max-width: $mobile)
                                                height: 207px
                                            @media (max-width: 376px)
                                                height: 187.5px
                                            @media (max-width: 321px)
                                                height: 160px
                                    .wizrd-blog-detail
                                        @media (max-width: $mobile)
                                            padding: 20px 20px 0
                                            text-align: left
                                            width: 100%
                                        .wizrd-blog-excerpt-detail
                                            @media (max-width: $mobile)
                                                padding: 0
                                                align-items: center
                                            .wizrd-blog-view
                                                @media (max-width: $mobile)
                                                    background: transparent
                                                    border-radius: 0
                                                    padding: 0
                                                    min-width: 0
                                                .wizrd-blog-view-people
                                                    @media (max-width: $mobile)
                                                        display: none
                                            .wizrd-blog-author
                                                .wizrd-blog-author-name
                                                    @media (max-width: $mobile)
                                                        font-size: 12px
                                                        display: inline-block
                                                        vertical-align: middle
                                                        width: auto
                                                .wizrd-blog-date
                                                    @media (max-width: $mobile)
                                                        font-size: 12px
                                                        display: inline-block
                                                        vertical-align: middle
                                                        width: auto
                                                        margin-left: 15px
                                        h2
                                            @media (max-width: $mobile)
                                                font-size: 20px
                                                margin: 0 0 10px
                                        .wizrd-blog-author
                                            @media (max-width: $mobile)
                                                width: auto
                                                vertical-align: middle
                                        .wizrd-wizrd-blog-date
                                            @media (max-width: $mobile)
                                                width: auto
                                                vertical-align: middle
                                                margin: 0
                                                position: relative
                                                margin-left: 15px
                                                &::after
                                                    content: ''
                                                    width: 3px
                                                    height: 3px
                                                    background-color: #8C87A6
                                                    position: absolute
                                                    left: -8px
                                                    top: 8px
                                                    border-radius: 100%
                    .tabs
                        @media (max-width: $mobile)
                            text-align: center
                        .tab-content
                            p
                                @media (max-width: $mobile)
                                    font-size: 18px
                        .nav-tabs
                            @media (max-width: $mobile)
                                width: auto
                                margin: 0 5px 20px
                                padding: 5px
                            .nav-item
                                .nav-link
                                    @media (max-width: $mobile)
                                        font-size: 12px
                                        min-width: 115px
                                        line-height: 1.4
                                        padding: 8px 16px
                                    @media (max-width: 320px)
                                        min-width: 0

            .wizrd-site-footer
                @media (max-width: $mobile)
                    margin: 0 0 0
                    padding-bottom: 0
                .wizrd-top-footer
                    @media (max-width: $mobile)
                        padding: 32px 18px
                    .wizrd-footer-box
                        &:first-child
                            @media (max-width: $ipad-pro)
                                width: 100%
                                margin-right: 0
                                //margin-bottom: 40px
                        &:last-child
                            @media (max-width: $ipad-pro)
                                width: 100%
                        h2
                            @media (max-width: $mobile)
                                font-size: 20px
                                width: 100%
                                margin: 0 0 20px
                                br
                                    display: none
                        h3
                            @media (max-width: $ipad-pro)
                                text-align: center
                                font-size: 22px
                            @media (max-width: $mobile)
                                font-size: 18px
                        ul
                            &.social-media
                                @media (max-width: $mobile)
                                    text-align: center
                                    margin: 15px 0 0
                            li
                                &:first-child
                                    margin-left: 0
                                @media (max-width: $mobile)
                                    margin-left: 10px
                                img
                                    @media (max-width: $ipad-pro)
                                        max-width: 70px
                                    @media (max-width: $mobile)
                                        margin-bottom: 10px
                                        max-width: 65px
                                a
                                    @media (max-width: $mobile)
                                        font-size: 12px
                .wizrd-copyright
                    @media (max-width: $mobile)
                        padding: 20px 0
                    @media (max-width: $mobile)
                        font-size: 12px
.wizrd-blog-detail-wrapper
    @media (max-width: $mobile)
        flex-direction: column
        padding: 0
    .wizrd-blog-title
        @media (max-width: $mobile)
            padding: 0 15px
            margin-bottom: 25px
        h1
            @media (max-width: $mobile)
                font-size: 20px
                margin: 0 0 20px
        .span-user
            @media (max-width: $mobile)
                font-size: 14px !important
    .wizrd-blog-detail
        @media (max-width: $mobile)
            width: 100%
            margin: 0
        @media (max-width: $ipad)
            width: 100%
        .wizrd-blog-comments
            @media (max-width: $mobile)
                margin: 0 0 30px
        .wizrd-blog-detail-inner
            @media (max-width: $mobile)
                margin: 30px 0 0
                border: none
        .wizrd-blog-feature-img
            img
                @media (max-width: $mobile)
                    height: 207px
                @media (max-width: 376px)
                    height: 187.5px
                @media (max-width: 321px)
                    height: 160px
        .wizrd-blog-description
            @media (max-width: $ipad-pro)
                padding: 30px 15px
            h1
                @media (max-width: $ipad-pro)
                    font-size: 32px
                @media (max-width: $mobile)
                    font-size: 22px
            .wizrd-blog-author-detail
                @media (max-width: $mobile)
                    font-size: 16px
            .wizrd-blog-article
                @media (max-width: $ipad-pro)
                    margin: 30px 0 0
                @media (max-width: $mobile)
                    margin: 0 0 0
                p,
                ul,
                ol,
                li
                    @media (max-width: $mobile)
                        font-size: 16px
                h1
                    @media (max-width: $mobile)
                        font-size: 35px
                h2
                    @media (max-width: $mobile)
                        font-size: 30px
                h3
                    @media (max-width: $mobile)
                        font-size: 28px
                h4
                    @media (max-width: $mobile)
                        font-size: 22px
                h5
                    @media (max-width: $mobile)
                        font-size: 18px
                h6
                    @media (max-width: $mobile)
                        font-size: 14px
                p
                    @media (max-width: $ipad-pro)
                        margin: 0 0 15px
                h1,
                h2,
                h3,
                h4,
                h5,
                h6
                    @media (max-width: $mobile)
                        margin: 0 0 10px
                img
                    @media (max-width: $ipad-pro)
                        margin-bottom: 15px
    .blog-sidebar
        @media (max-width: $mobile)
            width: 100%
        .blog-widget
            @media (max-width: $mobile)
                border: none
                margin: 0 0 24px
    .like-share
        @media (max-width: $mobile)
            width: 100%
            position: fixed
            bottom: -1px
            z-index: 10
            background: #fff
            left: 0
            right: 0
            box-shadow: 1px 4px 4px 3px currentColor
        ul
            @media (max-width: $mobile)
                text-align: center
                width: 100%
                display: flex
                align-items: center
                justify-content: space-evenly
            li
                @media (max-width: $mobile)
                    width: auto
                    margin: 5px 0
                a
                    @media (max-width: $mobile)
                        font-size: 14px
                    img
                        @media (max-width: $mobile)
                            max-width: 40px
.sticky
    .wizrd-blog-detail-wrapper
        .wizrd-blog-detail
            @media (max-width: $mobile)
                margin-left: 0
        .like-share,
        .blog-sidebar
            @media (max-width: $mobile)
                position: relative
                top: auto
        .like-share
            @media (max-width: $mobile)
                width: 100%
                position: fixed
                bottom: 0
                z-index: 10
                background: #fff
                left: 0
                right: 0
        .blog-sidebar
            @media (max-width: $mobile)
                right: auto
.wizrd-flags
    @media (max-width: $ipad-pro)
        display: none
    //@media (max-width: $mobile)
        //display: block
        //.wizrd-top-flags
            //right: 30px !important
        //.wizrd-bottom-flags
            //left: 30px !important
.wizrd-recent-blogs
    @media (max-width: $mobile)
        padding: 0 0 40px
    h3
        @media (max-width: $mobile)
            font-size: 24px
            line-height: 1.3
            margin: 0 0 30px
    .card
        @media (max-width: $mobile)
            margin-bottom: 20px
    .row
        & > div
            &:last-child
                .card
                    @media (max-width: $mobile)
                        margin-bottom: 0
        .card-block
            h5
                @media (max-width: $mobile)
                    font-size: 18px

.social-follow-widget
    @media (max-width: $mobile)
        display: none
    @media (max-width: $ipad)
        display: none

.wizrd-author-box
    @media (max-width: $mobile)
        flex-direction: column
        padding: 0 15px
    .wizrd-blog-author-details
        @media (max-width: $mobile)
            max-width: 100%
            padding: 0 15px
            text-align: center
            min-width: 0
        @media (max-width: $mobile)
            margin-bottom: 18px
        @media (max-width: $mobile)
            margin-top: 18px
        .wizrd-author-bio
            @media (max-width: $mobile)
                text-align: center
.wizrd-blog-author-detail
    .wizrd-blog-view
        @media (max-width: $mobile)
            background: transparent
            border-radius: 0
            padding: 0
            min-width: 0
            .wizrd-blog-view-people
                @media (max-width: $mobile)
                    display: none
.pagination
    @media (max-width: $mobile)
        margin: 0 0 30px
    li
        a
            @media (max-width: $mobile)
                font-size: 14px
.wizrd-contact
    @media (max-width: $mobile)
        border-radius: 0
        padding: 20px
    label
        @media (max-width: $mobile)
            font-size: 15px
            margin: 0 0 5px
    .below_label
        @media (max-width: $mobile)
            font-size: 14px
    .wizrd-contact-action
        .wizrd-captcha
            & > div
                & > div
                    & > div
                        @media (max-width: $mobile)
                            width: 100% !important
                            margin-bottom: 20px
            iframe
                @media (max-width: $mobile)
                    width: 100% !important

