﻿.blogContentWrap {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    padding-bottom: 64px;
}
.blogContentWrap > div:first-child {
    flex: 0;
    max-width: 300px;
    min-width: 300px;
}
.blogContentWrap > div:last-child {
    padding-left: 48px;
    padding-right: 64px;
    max-width: 100%;
    overflow: hidden;
}
.blogLeftMenu {
    position: sticky;
    top: 111px;
    overflow-y: auto;
    max-height: calc(100vh - 111px);
    min-height: calc(100vh - 111px);
    padding-top: 32px;
    padding-bottom: 32px;
    padding-top: 64px;
    background: #f8f8f8;
    padding-left: 16px;
    padding-right: 16px;
}




    .blogContentWrap h1 {
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .officialWrap {
        background: #efefef;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        font-weight: 500;
        font-size: 1.2rem;
        margin-left: 8px;
        padding-right: 16px;
        margin-top: 32px;
        margin-bottom:20px;
    }

        .officialWrap img {
            margin: -4px;
            margin-left: -8px;
            margin-right: 10px;
        }

    .authorBar {
        display: flex;
        align-items: center;
        margin-top: 32px;
    }
.officialWrap + .authorBar {
    margin-top: 0;
}

.authorBar > div:first-child {
    flex: 0;
    min-width: 64px;
    max-width: 64px;
    display: flex;
    align-items: center;
}

        .authorBar > div:last-child {
            flex: 1;
            line-height: 120%;
            padding-left: 12px;
        }

        .authorBar a.author {
            display: block;
            font-weight: 500;
            font-size: 1.2rem;
        }

        .authorBar ul {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
        }

            .authorBar ul li {
                margin: 0;
                padding: 0;
                font-size: 1rem;
                margin-right: 8px;
            }

                .authorBar ul li:before {
                    content: '•';
                    margin-right: 8px;
                }

                .authorBar ul li:last-child {
                    margin-right: 0;
                }

                .authorBar ul li:first-child:before {
                    content: '';
                    margin-right: 0;
                }

        .authorBar .userAvatarWrapper {
            border-radius: 50%;
            border: 0 !important;
            padding: 0;
        }

            .authorBar .userAvatarWrapper img {
                border-radius: 50%;
                display: block;
            }

    .blogTxt {
        padding-top: 64px;
    }

    ul.inPageLink {
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 100%;
    }

        ul.inPageLink li {
            margin: 0;
            padding: 0;
            margin-bottom: 8px;
            line-height: 100%;
        }

            ul.inPageLink li:last-child {
                margin-bottom: 0;
            }

            ul.inPageLink li a {
                font-size: 1rem;
                font-weight: 500;
                line-height: 120%;
            }

    .blogLeftMenu h4 {
        margin: 0;
        padding: 0;
        font-size: 1.3rem;
    }

    .internalNavLink {
        position: relative;
        top: -132px;
    }

    h4.nextH4 {
        margin-top: 32px;
    }

    .blogLeftMenu p {
        margin: 0;
        padding: 0;
        font-size: 1rem;
        line-height: 130%;
    }

    .blogLeftMenu .socialShare {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

        .blogLeftMenu .socialShare img {
            display: block;
            width: 52px !important;
            height: 52px !important;
        }

        .blogLeftMenu .socialShare li {
            padding: 0 !important;
            margin: 0 !important;
        }

    .postH1Wrap {
        display: flex;
        align-items: center;
        padding-top: 64px;
    }

.postH1Wrap > div:first-child {
    flex: 1;
}

        .postH1Wrap > div:last-child {
            flex: 0;
            min-width: 64px;
            max-width: 64px;
            display: flex;
            justify-content: flex-end;
        }



    @media screen and (max-width: 1000px) {
        h1 {
            font-size: 2.4rem;
            line-height: 100% !important;
        }
    }


    .authorBar ul li .favouriteWrap {
        display: flex;
        align-items: center;
    }

        .authorBar ul li .favouriteWrap a {
            display: block;
            margin: 0 !important;
        }

        .authorBar ul li .favouriteWrap span.countWrapper {
            display: flex;
            align-items: center;
            color: #2B2B2B;
            font-size: 1rem;
            line-height: 1.8rem;
            padding-left: 5px;
            padding-top: 3px;
        }

    .authorBar li.fav {
        display: flex;
        align-items: center;
        line-height: 1.8rem;
    }

        .authorBar li.fav img {
            width: 24px;
            height: 24px;
            position: relative;
            top: -2px;
        }

    .commentsWrapper {
        padding-top: 64px;
    }

    .subscribeBlogWrap {
        background: #f8f8f8;
        border-radius: 3px;
        display: flex;
        align-items: center;
        line-height: 120%;
        padding: 16px;
    }

        .subscribeBlogWrap > div:first-child h4, .subscribeBlogWrap > div:first-child p {
            margin: 0;
            padding: 0;
            line-height: 120%;
        }

        .subscribeBlogWrap > div:first-child {
            flex: 1;
        }

        .subscribeBlogWrap > div:last-child {
            flex: 0;
        }

        .subscribeBlogWrap > div:first-child h4 {
            font-size: 1.3rem;
        }

        .subscribeBlogWrap > div:first-child p {
            font-size: 1.15rem;
        }

        .subscribeBlogWrap .followWrapper a {
            padding: 8px;
        }

    .publishPostWrap {
        display: flex;
        align-items: center;
        background: rgb(200, 255, 200);
        border-radius: 3px;
        line-height: 120%;
        margin-top: 16px;
        border-radius: 3px;
        padding: 16px;
    }

        .publishPostWrap > div:first-child {
            flex: 1;
        }

        .publishPostWrap > div:last-child {
            flex: 0;
            padding-left: 16px;
        }

        .publishPostWrap h4, .publishPostWrap p {
            line-height: 120%;
            margin: 0;
            padding: 0;
        }

        .publishPostWrap h4 {
            font-size: 1.3rem;
        }

        .publishPostWrap p {
            font-size: 1.15rem;
        }

    .articleRender .imageWrapper {
        border: 1px solid #f8f8f8;
        background: #fcfcfc !important;
        border-radius: 3px;
        padding: 16px !important;
        width: 100% !important;
    }

        .articleRender .imageWrapper span {
            background: transparent !important;
        }

            .articleRender .imageWrapper span.descrip {
                color: #2B2B2B;
                font-weight: 500;
                font-style: italic;
                display: block !important;
                text-align: left !important;
                padding-top: 16px !important;
            }


@media screen and (max-width: 850px) {
    .authorBar {
        align-items: flex-start;
    }
}

    @media screen and (max-width: 800px) {

        .blogContentWrap {
            flex-direction: column;
        }

            .blogContentWrap > div:first-child {
                order: 2;
                max-width: 100%;
                min-width: 100%;
            }

            .blogContentWrap > div:last-child {
                order: 1;
                padding-left: 48px;
                padding-right: 48px;
            }

        .blogLeftMenu {
            position: static;
            max-height: 100%;
            min-height: 0;
            display: block;
            background: #fff;
            padding: 48px;
        }

        .onPageWrap {
            display: none;
        }
    }

    @media screen and (max-width: 600px) {
        .subscribeBlogWrap {
            flex-direction: column;
        }

            .subscribeBlogWrap > div:last-child {
                padding-top: 8px;
            }

            .subscribeBlogWrap > div:first-child {
                text-align: center;
            }
    }

    @media screen and (max-width: 550px) {
        .blogContentWrap > div:last-child {
            order: 1;
            padding-left: 24px;
            padding-right: 24px;
        }

        .articleRender .imageWrapper {
            padding: 6px !important;
        }
        .authorBar {
            flex-direction: column;
        }
        .authorBar > div:first-child {
            text-align: center;
            max-width: 100%;
            min-width: 100%;
        }
        .authorBar > div:last-child {
            padding-left: 0;
        }
        .authorBar .userAvatarWrapper {
            margin: 0 auto;
        }
        .authorBar .author {
            text-align: center;
            margin-top: 8px;
            margin-bottom: 16px;
        }
    }

    @media screen and (max-width: 430px) {
        h2 {
            text-align: left !important;
        }
    }

    .articleRender .codeWrap {
        max-width: 100% !important;
        display: block;
        overflow: hidden;
    }

    .articleRender pre[class*="language-"] {
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    .articleRender .rw {
        max-width: 100% !important;
    }

    .articleRender ul {
        max-width: 750px;
    }
.breadCrumbNav {
    padding-top: 8px !important;
}

.blogLeftMenu .authorBar {
    margin-top: 16px;
}
.blogLeftMenu .authorBar img {
    max-width: 42px;
    max-height: 42px;
}
.blogLeftMenu .authorBar > div:first-child{
    max-width: 42px;
    min-width: 42px;
}

.blogPostMinimalRender .unread  {
    font-size: 0.75rem !important;
    margin-right: 0 !important;
    line-height: 100% !important;
}
.blogPostMinimalRender a.title {
    font-size: 1.15rem !important;
}
.blogPostMinimalRender + .blogPostMinimalRender {
    border-top: 1px solid #efefef;
    padding-top: 4px;
    margin-top: 4px;
}
.blogPostStats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.blogPostStats li {
    display: flex !important;
    align-items: center;
}
.blogPostStats .postAuthorWrap {
    font-size: 0.85rem !important;
}
.blogPostStats .postAuthorWrap img {
    margin-right: 5px !important;
}
.blogLeftMenu .followWrapper  > div {
    min-width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tiledPost {
    min-width: 100% !important;
}