@import './theme/variables.sass'
.wizrd-blog-preview
    position: relative
    border-radius: 30px
    //box-shadow: -4px 6px 2px 1px rgba(0, 0, 0, 0.25)
    max-width: 100%
    pointer-events: none
    @media (max-width: $ipad)
        max-width: 100%
        border-radius: 0
        box-shadow: none
    a,
    button,
    input
        pointer-events: none
    .wizrd-blog-theme
        border-radius: 30px
        .btn
            font-size: 14px
            letter-spacing: 0
            padding: 6px 25px
        .wizrd-form-wrapper
            .wizrd-newsletter
                width: 352px
                .form-group
                    .form-control
                        font-size: 14px
                        padding: 11px 10px
                        line-height: 1
                        height: auto
                        min-height: 0
                        @media (max-width: $mobile)
                            font-size: 8px
                            padding: 6px 8px 3px
                .btn
                    &.btn-primary
                        font-size: 14px
                        padding: 10px 20px
                        @media (max-width: $mobile)
                            font-size: 8px
                            padding: 4.5px 10px
        .wizrd-site-header
            border-top-left-radius: 30px
            border-top-right-radius: 30px
            @media (max-width: $ipad)
                border-top-left-radius: 0
                border-top-right-radius: 0
            .wizrd-main-header
                padding: 12px 20px
                @media (max-width: $mobile)
                    padding: 2px 10px 5px
                .wizrd-site-navigation
                    ul
                        li
                            &.wizrd-header-social-links
                                //display: none
                            a
                                font-size: 14px
                                padding: 10px 11px !important
                                @media (max-width: $mobile)
                                    font-size: 7px
                                    padding: 3px 3px !important
                            .btn.btn-primary
                                padding: 10px 33px !important
                                font-size: 14px
                                @media (max-width: $mobile)
                                    font-size: 7px
                                    padding: 3px 8px !important
                .wizrd-header-logo
                    text-align: left
                    max-width: 200px
                    &.longLogoText
                        a
                            font-size: 15px
                            font-weight: 700
                    a
                        font-size: 18px
                        @media (max-width: $mobile)
                            font-size: 9px
                            line-height: 1.2
                            font-weight: 700
                        &.wizrd-logo-img
                            font-size: 0
                            img
                                max-height: 25px
        .wizrd-site-main
            border-bottom-left-radius: 30px
            border-bottom-right-radius: 30px
            @media (max-width: $ipad)
                border-bottom-left-radius: 0
                border-bottom-right-radius: 0
            .wizrd-home-banner
                padding: 75px 0 80px
                @media (max-width: $mobile)
                    padding: 25px 0
                .container
                    max-width: 750px !important
                    @media (max-width: $mobile)
                        max-width: 90% !important
                .wizrd-banner-content
                    h1
                        font-size: 43px
                        @media (max-width: $mobile)
                            font-size: 15px
                        span
                            padding: 6px 10px
                    .wizrd-description
                        font-size: 14px
                        line-height: 1.4
                        margin: 28px 0 40px
                        background: transparent
                        display: inline-block
                        width: 530px
                        max-width: 90%
                        @media (max-width: $mobile)
                            font-size: 9px
                            margin: 4px 0 15px
            .wizrd-recent-blogs
                border-bottom-left-radius: 30px
                border-bottom-right-radius: 30px
                padding: 40px 0 20px
                @media (max-width: $mobile)
                    padding: 18px 0 10px
                @media (max-width: $ipad)
                    border-bottom-left-radius: 0
                    border-bottom-right-radius: 0
                .container
                    max-width: 888px !important
                .tabs
                    .nav-tabs
                        margin: 0 0 30px
                        padding: 6px
                        @media (max-width: $mobile)
                            padding: 2px 3px 3px
                            line-height: 0
                            margin: 0 0 5px
                        .nav-item
                            .nav-link
                                font-size: 14px
                                min-width: 150px
                                @media (max-width: $mobile)
                                    font-size: 9px
                                    min-width: 75px
                                    padding: 4px 5px
                .wizrd-blog-list
                    li
                        width: 100%
                        margin: 0
                        display: none
                        &:first-child
                            display: inline-block
                        a
                            padding: 0
                            .wizrd-blog-box
                                padding: 10px
                                .wizrd-blog-img
                                    width: 245px
                                    margin-right: 20px
                                    @media (max-width: $mobile)
                                        width: 125px
                                        margin-right: 10px
                                    img
                                        height: 150px
                                        @media (max-width: $mobile)
                                            height: 75px
                                    .wizrd-blog-category
                                        padding: 7px 15px
                                        min-width: 0
                                        @media (max-width: $mobile)
                                            font-size: 9px
                                            padding: 6px 10px
                                .wizrd-blog-detail
                                    width: calc(100% - 270px)
                                    @media (max-width: $mobile)
                                        width: calc(100% - 135px)
                                    h2
                                        font-size: 24px
                                        line-height: 1.3
                                        text-align: left
                                        @media (max-width: $mobile)
                                            font-size: 13px
                                            margin: 0
                                    .wizrd-blog-excerpt-detail
                                        .wizrd-blog-author
                                            .wizrd-blog-author-name
                                                font-size: 12px
                                                margin-bottom: -13px
                                                @media (max-width: $mobile)
                                                    font-size: 9px
                                                    margin-bottom: -30px
                                                    letter-spacing: 0
                                        .wizrd-blog-date
                                            font-size: 12px
                                            @media (max-width: $mobile)
                                                font-size: 9px
                                                letter-spacing: 0
                                        .wizrd-blog-view
                                            min-width: 140px
                                            @media (max-width: $mobile)
                                                font-size: 9px
                                                padding: 3px 10px
                                                min-width: 60px
    &.wizrd-inner-preview
        .wizrd-blog-theme
            border-radius: 10px
            .wizrd-form-wrapper
                .wizrd-newsletter
                    width: 210px
                    padding: 2px
                    .btn.btn-primary
                        font-size: 9px
                        padding: 4.5px 10px
                        width: auto
                        @media (max-width: $mobile)
                            font-size: 8px
                    .form-group
                        .form-control
                            padding: 6px 8px 3px
                            font-size: 9px
                            @media (max-width: $mobile)
                                font-size: 8px
            .wizrd-site-header
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                .wizrd-main-header
                    padding: 2px 10px 5px
                    .wizrd-header-logo
                        a
                            font-size: 12px
                            line-height: 1.2
                            @media (max-width: $mobile)
                                font-size: 9px
                                line-height: 1.2
                                font-weight: 700
                    .wizrd-site-navigation
                        ul
                            li
                                a
                                    font-size: 8px
                                    padding: 4px 5px !important
                                    @media (max-width: $mobile)
                                        font-size: 7px
                                        padding: 3px 3px !important
                                .btn.btn-primary
                                    font-size: 8px
                                    padding: 4px 13px !important
                                    @media (max-width: $mobile)
                                        font-size: 7px
                                        padding: 3px 8px !important
            .wizrd-site-main
                .wizrd-home-banner
                    padding: 31px 0 27px
                    @media (max-width: $mobile)
                        padding: 25px 0
                    .container
                        max-width: 90% !important
                    .wizrd-banner-content
                        h1
                            font-size: 20px
                            @media (max-width: $mobile)
                                font-size: 15px
                            span
                                width: 330px
                                max-width: 100%
                        .wizrd-description
                            font-size: 10px
                            line-height: 1.4
                            margin: 4px 0 15px
                            width: 365px
                            max-width: 90%
                            @media (max-width: $mobile)
                                font-size: 9px
                .wizrd-recent-blogs
                    padding: 18px 0 10px
                    .container
                        max-width: 458px !important
                    .tabs
                        .nav-tabs
                            padding: 2px 3px 3px
                            line-height: 0
                            margin: 0 0 5px
                            .nav-item
                                .nav-link
                                    font-size: 9px
                                    min-width: 75px
                                    padding: 4px 5px
                    .wizrd-blog-list
                        li
                            a
                                .wizrd-blog-box
                                    .wizrd-blog-img
                                        width: 125px
                                        margin-right: 10px
                                        img
                                            height: 75px
                                    .wizrd-blog-category
                                        font-size: 9px
                                        padding: 6px 10px
                                    .wizrd-blog-detail
                                        width: calc(100% - 135px)
                                        h2
                                            font-size: 13px
                                            margin: 0
                                        .wizrd-blog-excerpt-detail
                                            .wizrd-blog-author
                                                .wizrd-blog-author-name
                                                    font-size: 9px
                                                    margin-bottom: -30px
                                                    letter-spacing: 0
                                                .wizrd-blog-date
                                                    font-size: 9px
                                                    letter-spacing: 0
                                            .wizrd-blog-view
                                                font-size: 9px
                                                padding: 3px 10px
                                                min-width: 60px