// Athlete2 Theme
// Copyright (c) 2021 Olegnax (http://www.olegnax.com/)
// https://www.olegnax.com/license

@ox_narrow_post_width: 830px;
.link-sidebar(){
    margin-left: -5px;
    margin-right: -5px;
    padding: 5px 8px 5px;
    display: inline-block;
    line-height:16px;

    &:hover {
        background-color: #000000;
        color:#ffffff;
        text-decoration: none;
    }
}
//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .page-layout-1column,
    .page-layout-1column-fullwidth {
        &.blog-page{
            .sidebar-additional{
                display:none;
            }
        }
    }
    .blog-page{
        .breadcrumbs,
        .page-title{
            padding: 0;
            margin-top:0;
            margin-bottom:0;
        }
    }
    .page-layout-1column-fullwidth {
        &.blog-page{
            .page-main{
                padding-left: 20px;
                padding-right:20px;
                padding-bottom: 40px;
                padding-top: 30px;
            }
        }
        &.blog-post-view{
            .page-main{
                padding: 40px 0 80px 0;
            }
            .post-header,
            .post-bottom,
            .post-description .post-tags,
            .breadcrumbs{
                padding-left: 20px;
                padding-right: 20px;
            }
        }
    }
   
    .blog-page .column.main{
        .post-view {
            &.narrow-post{
                .breadcrumbs{
                    max-width:@ox_narrow_post_width;
                    margin-left:auto;
                    margin-right:auto;
                }
            }
        }
    }
    .mfblog-autoloader{
        text-align: center;
        .action.primary{
                padding: 16px 30px;
                min-width: 200px;
                z-index: 1;
        }
        .posts-loader{
            display: none;
        }
    }
    .post-view {
        .post-gallery{            
            margin-bottom: 80px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .gallery-image-hld{
                margin: 0 14px 14px 0;
            }
        }

        .related{
            .post-list{
                justify-content: center;
                article{
                    margin-bottom: 40px;
                    .post-image-wrapper{
                        margin-bottom: 22px;
                    }
                    .post-title{
                        font-size: 24px;
                    }
                }
            }
        }
        .post-bottom{
            padding:0;
            .related{
                .products{
                    margin-bottom: 60px;
                }
            }
        }
        .blog-post-sticky-info{
            background: #fff;
            display:none;
            position: absolute;
            z-index: 5;
            width:50px;
            top: 0;
            //margin-left:-70px;
            &._static {
                position: absolute;
                bottom:0px;
                top:auto;
            }
            &._fixed {
                position: fixed;
            }
            .social-share__content{
                display: block;
                margin-top: 10px;
                margin-bottom:10px;
                a{
                    margin: 0 auto;
                }
            }
            .progress-container {
                width: 3px;
                height: 70px;
                display: block;
                background: #edebeb;
                margin: 20px auto;
            }
            .progress-counter{
                letter-spacing: 0;
                text-align: center;
                margin: 0;
                margin-bottom: 14px;
            }
            .progress-bar {
              font-size:14px;
              background-color: #000;
              width: 100%;
              display: block;
              height: 0;
            }
        }
        .post-meta{
            .social-share__content{
                display: flex;
                margin-top: 10px;
                margin-left: -7px;
            }
        }
        .social-share__content{
            a{
            margin: 0;
            display: flex;
            width: 36px;
            align-items: center;
            justify-content: center;
            height: 34px;
            font-size: 16px;
            background: transparent;
            color: #000;
            overflow: hidden;
                i{
                    animation: move-vertical-out 0.25s;
                    transition: color 0.3s;
                    color: #000;
                    font-size: 16px;
                    line-height: 1;
                }
                &:hover{
                    i{
                        animation: move-vertical-hover 0.25s;
                        color: @main-color;
                    }
                }
                .athlete2-icon-twitter{
                    font-size: 18px;
                }
                span{
                    display:none;
                }
            }
        }
        .image-caption{
            max-width: 65%;
            margin-left: auto;
            margin-right: auto;
            font-size: 14px;
            line-height: 1.4;
            opacity: 0.7;
            margin-top:20px;
        }
        .breadcrumbs{
            padding:0;
        }
        &.narrow-post{
            .post-tags,
            .post-bottom .block.comments,
            .post-bottom .post-nextprev-hld,
            .post-header{
                max-width:@ox_narrow_post_width;
                margin-left:auto;
                margin-right:auto;
            }
            .narrow-content{
                max-width:@ox_narrow_post_width;
                margin-left:auto;
                margin-right:auto;
            }
            &.narrow-post--p{
                .post-text-hld{
                    > p{
                        max-width:@ox_narrow_post_width;
                        margin-left:auto;
                        margin-right:auto;
                    }
                }
            }
            &.narrow-post--content{
                .post-text-hld{
                    max-width:@ox_narrow_post_width;
                    margin-left:auto;
                    margin-right:auto;
                }
            }
        }

        .breadcrumbs{
            margin-bottom:60px;
        }            
        .post-categories {
            display:block;
            margin-bottom:15px;
            a{
                padding: 7px 10px;
                font-size: 14px;
                font-weight: @font-weight__bold;
                line-height: 1;
                display: inline-block;
                margin-right: 4px;
                margin-bottom: 4px;
                text-transform: uppercase;
                background: @main-color;
                color: #000;
                &:hover{
                    background: #000;
                    color: #fff;
                }
            }
        }
        h1.page-title{
            margin-left: -2px;
            margin-bottom: 35px;
            line-height: 1;
        }
        .post-ftimg-hld{
            text-align: center;
            margin-bottom: 35px;
        }
        .post-content{
            position:relative;
        }
        .post-text-hld p,
        .post-text-hld{
            font-size: 16px;
            line-height: 1.8;
        }
        .post-meta{
            font-family: @tiny-font;
            margin-bottom:35px;
            margin-top:-10px;
            .addthis_toolbox{
                display: inline-block;
                vertical-align: middle;
                a{
                        margin-bottom: 0!important;
                }
            }
            a.item{
                line-height: 16px;
                padding: 2px 4px;
                &:hover{
                    background-color: #000000;
                    color: #ffffff;
                }
            }
            .item{
                margin-right: 8px;
                display: inline-block;
                a{                        
                    line-height: 14px;
                    padding: 2px 4px;
                    &:hover{
                        background-color: #000000;
                        color: #ffffff;
                    }
                }
            }
        }
        .post-description{
            margin-bottom: 80px;
        }
        .post-nextprev-hld{                
            margin-bottom: 80px;
            .prev-link + .next-link {
                margin-top:20px;
            }
            .nextprev-link{
                display:block;
                .h6{
                    font-size:14px;
                    display:block;
                    margin-bottom: 6px;
                }
                .h3{
                    display: inline;
                    font-size: 28px;
                    line-height: 1;
                    padding: 1px 8px;
                    margin-left: -8px;
                    box-decoration-break: clone;
                    -webkit-box-decoration-break: clone;
                    //box-shadow: 10px 0 0 rgba(0,0,0,0), -8px 0 0 rgba(0,0,0,0);
                    span{
                        position:relative;
                    }
                    .lib-css(transition, ~"all 600ms ease-in-out", @_prefix: 1);
                }
                &:hover{
                    .h3{
                        color: #fff;                        
                        //box-shadow: 10px 0 0 #000, -8px 0 0 #000;
                        background-color: #000;
                        .lib-css(transition, ~"all 10ms ease-in-out", @_prefix: 1);
                    }
                }
            }
        }
        .post-tags{
            text-align: center;
            font-family: @tiny-font;
            margin-top: 36px;
            display: block;
            a{
                line-height: 14px;
                padding: 7px 9px;
                font-size: 14px;
                display: inline-block;
                margin: 1px 5px 2px 0;
                background: #000;
                color: #fff;
                text-transform: capitalize;
                &:hover{
                    background-color: @main-color;
                    color: #000;
                }
            }
            .label{
                display:none;
            }
        }
        .block.comments{
            margin-bottom: 0;
            .fb-comments,
            .c-replyform form{
                padding: 40px;
                background: #f8f8f8;
                .c-btn-hld{
                    .input-box{
                        margin-top: 24px;
                    }
                }
                textarea,
                input {
                    & + div.mage-error{
                        position: relative;
                        top: -15px;
                    }
                }

            }
            .c-comment{
                border-top: 1px solid #e3e3e3;
                padding: 40px 0;
                &:last-child{
                    padding-bottom:0;
                }
               &:first-child{
                    border-top:none;
                }
                .c-replyform{
                    margin-top: 30px;
                    button[type="submit"] {
                        float:right;
                    }
                }
                .c-post{
                    padding: 0 0 0 30px;
                    border-left: 4px solid @main-color;
                }
                .p-name{
                    .lib-heading(h5);
                    margin-bottom: 20px;
                    font-size: @h5__font-size;
                    font-weight: @font-weight__black;
                    line-height: 1;
                    text-transform: uppercase;
                    letter-spacing: -0.02em;
                }
                .p-text{
                    margin-bottom: 20px;
                }
                .p-actions{
                    font-size: 13px;
                    color: #a2a2a2;
                    a{
                        font-weight: @font-weight__bold;
                        text-transform: uppercase;
                        padding: 2px 4px;
                        margin-left: -4px;
                        margin-right: 4px;
                        &:hover{
                            background: #000;
                            color: #fff;
                        }
                    }
                }
            }
            .c-count{
                .lib-heading(h3);
                margin-bottom: 20px;
                font-size: @h2__font-size;
                font-weight: @font-weight__black;
                line-height: 1;
                text-transform: uppercase;
                letter-spacing: -0.02em;
            }
            input,
            textarea{
                margin-bottom: 20px;
            }
            textarea{
                height: 120px;
            }
            button{
                margin-top: 10px;
                /*&.cancel{
                    float:right;
                }*/
            }
            button[type="submit"] {
                padding: 18px 27px;
                min-width: 200px;
            }
            .lr-hld{
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                margin-right: -15px;
                margin-left: -15px;
                .right-hld,
                .left-hld{
                    position: relative;
                    width: 100%;
                    padding-right: 15px;
                    padding-left: 15px;
                    -ms-flex: 0 0 50%;
                    flex: 0 0 50%;
                    max-width: 50%;
                }
            }
        }
    }
    .blog-page{    
        .sidebar,
        .sidebar-additional {
            .widget.block{
                &:not(:last-child){
                    margin-bottom: 15px;
                }
            }
        }
        /*
        .column.main {
            > .breadcrumbs{
                padding: 0;
                padding-bottom: 4px;
                margin-bottom: 40px;
            }
            > .breadcrumbs + .page-title-wrapper{
                margin-top: -40px;
            }
        }*/
    }
    .sidebar-additional {
        .block{
            .block-title{
                margin:0;
            }
            &.block-categories{
                .lib-css(color, #adadad);
                ul{                    
                    .lib-list-reset-styles();
                     padding-bottom: 20px;
                     ul{
                        padding: 0;
                        padding-left: 10px;
                     }
                }
                li a {
                    .link-sidebar();
                    margin-right: 1px;                   
                    text-transform: capitalize;
                }
            }
            &.blog-custom{
                padding: 22px 20px;
            }
            &.block-rss{
                .block-title{
                    padding: 26px 0 23px;
                }
            }
            &.block-tagclaud{
                a{
                    font-family: @tiny-font;
                    font-size: 13px;
                    line-height: 16px;
                    padding: 6px 9px 5px;
                    margin: 1px 0 2px;
                    display: inline-block;
                    background-color: #000000;
                    color:#fff;
                    &:hover{
                        background-color: @main-color;
                        color:#000;
                    }
                }
                .tagclaud-hld{
                    padding-bottom: 20px;
                }
            }
            &.block-recent-posts{
                .item {
                    > a{
                        .link-sidebar();
                        margin-bottom: 4px;
                        &.with-image{
                             margin-top:10px;
                        }
                    }
                    &.with-image{
                        margin-bottom: 20px;
                        &:last-child{
                            margin-bottom: 0;
                        }
                    }
                }

                .post-image{
                    a{
                        line-height: 0;
                        display: block;
                        margin-bottom: 5px;
                    }
                }
                .post-item-date{
                    font-size: 13px;
                    opacity: 0.7;
                    margin-left: 4px;
                }
            }
            &.block-archive{
                .item a{
                    .link-sidebar();
                }
            }
            &.blog-search{
                .block-content{
                    padding-top: 20px;
                    padding-bottom: 24px;
                    form{
                        position: relative;
                    }
                    .actions{
                        position: absolute;
                        top: 0;
                        right: 0;
                        button{
                            width: 38px;
                            height: 38px;
                            background: none;
                            padding:0;
                            &:after{
                                background: none;
                            }
                            &:before{
                                content: "\61";
                                font-family: "athlete2" !important;
                                font-style: normal !important;
                                font-weight: normal !important;
                                font-variant: normal !important;
                                text-transform: none !important;
                                speak: none;
                                line-height: 1;
                                -webkit-font-smoothing: antialiased;
                                -moz-osx-font-smoothing: grayscale;
                                color:#000;
                            }
                            span{
                                display: none;
                            }
                        }
                    }
                }
                .field.search{
                    .label{
                        display: none;
                    }
                }
            }
        }
    }
    .post-list{
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
        article{
            margin-bottom:40px;
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
        }
        margin-top:30px;
        .social-share__content{
            display: inline-block;
            vertical-align: middle;
            a{
                width: 24px;
                height: 24px;
                margin-right: 10px;
                display: inline-block;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                i{
                    transition: color 0.3s;
                    color: #c7c7c7;
                    font-size: 16px;
                    line-height: 1;
                }
                &:hover{
                    i{
                        color:#000;
                    }
                }
                .athlete2-icon-twitter{
                    font-size: 18px;
                    position: relative;
                    top: 1px;
                }
                span{
                    display:none;
                }
            }
        }
        &.blog-style-classic{
            .post-title{
                font-size: 24px;
                text-transform: uppercase;
                letter-spacing: -1px;
                line-height: 1;
                margin-left: -10px;
                margin-bottom:0;
                a{
                    display: inline-block;
                    padding: 7px 9px 7px;
                    text-decoration: none;
                }
            }
            .post-image-wrapper{
                position:relative;
                margin-bottom: 20px;
                .post-date{
                    position:absolute;
                    bottom:0;
                    left:0;
                    display:none;
                }
            }
            .post-content{
                margin-left: 97px;
            }
            .post-description{
                margin-top:14px;
                padding-left:1px;
            }
            .post-meta{
                margin-left:-3px;
                margin-top: 7px;
                a{                   
                    line-height: 16px;
                    text-transform: capitalize;
                }
                .item{
                    display: inline-block;
                }
            }
            .post-date{
                overflow: hidden;
                float: left;
                position: relative;
                margin-right: 13px;
                width: 74px;
                height: 74px;
                font-size: 14px;
                letter-spacing: 0;
                line-height: 1;
                text-transform: uppercase;
                font-weight: @font-weight__bold;
                text-align: center;
                .day{
                    padding-top: 12px;
                    margin-bottom: 1px;
                    display: block;
                    font-size: 34px;
                    letter-spacing: -1px;
                    font-weight: @font-weight__black;
                }
                .inner{
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background-color: #000;
                    color: #fff;
                    .lib-css(transition, ~"all 300ms cubic-bezier(0.250, 0.100, 0.250, 1.000)", @_prefix: 1);
                }
                .hover{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    z-index: 2;
                    top: -100%;
                    background-color: @main-color;
                    color: #000;
                    .lib-css(transition, ~"all 300ms cubic-bezier(0.250, 0.100, 0.250, 1.000)", @_prefix: 1);
                }
            }
            article{
                &:hover{
                    .post-date{
                        .inner{
                            top: 100%;
                        }
                        .hover{
                            top: 0;
                        }
                    }
                    .post-title{
                        a{
                            color: #fff;
                            background: #000;
                        }
                    }
                }
            }
        }
        &.blog-style-modern{            
            article{                
                .post-title{
                    font-size:28px;
                    margin-bottom: 16px;
                }
                &.date-above-image{
                    .post-meta{
                        .post-posed-date{
                            display:none;
                        }
                    }
                }
                .post-image-wrapper{
                    position: relative;
                    overflow:hidden;
                    .post-posed-date{
                        font-size: 14px;
                        background: #000;
                        color: #fff;
                        font-weight: @font-weight__semibold;
                        height: 36px;
                        padding: 0 12px;
                        position: absolute;
                        bottom: 0;
                        line-height: 36px;
                        left: 0;
                        letter-spacing: 0;
                        text-transform: uppercase;
                        z-index: 3;
                    }
                }
                .post-categories{
                    display:block;
                    margin-bottom:13px;
                    a{
                        padding: 5px 7px;
                        font-size: 14px;
                        font-weight: @font-weight__bold;
                        line-height: 1;
                        display: inline-block;
                        margin-right: 4px;
                        margin-bottom: 4px;
                        text-transform: uppercase;
                        background: @main-color;
                        color: #000;
                        &:hover{
                            background: #000;
                            color: #fff;
                        }
                    }
                }
                .post-links{
                    > .item{
                        margin-right: 20px;
                        font-size: 14px;
                        font-weight: @font-weight__bold;
                        line-height: 1;
                        display: inline-block;
                        text-transform: uppercase;
                        border-bottom: 2px solid transparent;
                        padding-bottom: 4px;
                        padding-top: 4px;
                        &:hover{
                            border-color: @main-color;
                        }
                    }
                }
                .post-meta{
                    margin-bottom:15px;
                    .item{
                        margin-right: 8px;
                        font-weight: @font-weight__semibold;
                    }
                }
                .post-description{
                    line-height: 1.7;
                }
            }
            &.white-style article.post-style--overlay,
            &.blog-list--overlay.white-style article,
            &.white-style article.post-style--above-image,
            &.blog-list--above-image.white-style article{
                    .social-share__content{
                        a{
                            i{
                                color:#fff;
                            }
                            &:hover{
                                i{
                                    color:#fff;
                                }                            
                            }
                        }
                    }
                    .post-title{
                        color:#fff;
                        a{
                            color:#fff;
                        }
                    }
                    .post-description{
                        color:#fff;
                        a{
                            color:#fff;
                        }
                    }
                    .post-links,
                    .post-meta{
                        color:#fff;
                        a{
                            color:#fff;
                        }
                    }
                
            }
            &.blog-list--image-top article,
            &.blog-list--overlay article,
            article.post-style--above-image,
            article.post-style--overlay{
                .ox-expand__inner:before{
                    background:none;
                }
            }
            article.post-style--above-image,
            &.blog-list--image-top article.post-style--above-image,
            &.blog-list--overlay article.post-style--above-image,
            &.blog-list--first-above-image article:first-child,
            &[class*="columns-"] article.post-style--above-image,
            &.blog-list--image-top[class*="columns-"] article.post-style--above-image,
            &.blog-list--overlay[class*="columns-"] article.post-style--above-image,
            &.blog-list--first-above-image[class*="columns-"] article:first-child {
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
                -ms-flex: ~"0 0 calc(100% - 30px)";
                flex: ~"0 0 calc(100% - 30px)";
                max-width: ~"calc(100% - 30px)";
                margin-left:auto;
                margin-right:auto;
                min-height: 630px;
            }
            article.post-style--overlay,
            &.blog-list--image-top article.post-style--overlay,
            &.blog-list--overlay article{
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
                -ms-flex: ~"0 0 calc(100% - 30px)";
                flex: ~"0 0 calc(100% - 30px)";
                max-width: ~"calc(100% - 30px)";
                margin-left:15px;
                margin-right:15px;
                min-height: 400px;
            }
            article.post-style--overlay,
            &.blog-list--image-top article.post-style--overlay,
            &.blog-list--overlay article,
            article.post-style--above-image,
            &.blog-list--image-top article.post-style--above-image,
            &.blog-list--first-above-image article:first-child,
            &.blog-list--above-image article{
                
                overflow: hidden;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: end;
                align-items: flex-end;
                padding:0;
                .post-content{
                    position:relative;
                    padding: 30px;
                    max-width: 100%;
                    z-index:3;
                }
                &.date-above-image{
                    .post-meta{
                        .post-posed-date{
                            display:inline;
                        }
                    }
                }
                .post-title{
                    margin-bottom: 21px;
                }
                .post-description{
                    margin-bottom: 22px;
                }
                .post-image-wrapper{
                    width: 100%;
                    height: 100%;
                    display: block;
                    position: absolute;
                    bottom: 0;
                    left:0;
                    z-index:0;
                    margin:0;
                    .bg-image-holder{
                        width: 100%;
                        height: 100%;
                        display: block;
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                }
            }

        }
        article{
            .gradient-overlay{
                background:  ~"-moz-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.8) 100%)";
                background:  ~"-webkit-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.8) 100%)"; 
                background: ~"linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.8) 100%)";
                z-index: 2;
                width: 100%;
                height: 100%;
                display: block;
                position: absolute;
                bottom: 0;
                left:0;
                transition: opacity 0.3s;
                opacity: 0.7;
            }
            &:hover{
                .gradient-overlay{
                    opacity: 1;
                }
            }
            margin-bottom:60px;
            .post-image-wrapper{
                line-height:0;
                display:block;
                margin-bottom: 34px;
            }
            .post-description{
                margin-bottom:19px;
                p{
                    &:last-child{
                        margin-bottom:0;
                    }
                }
            }
            .post-title{
                a{
                    color:inherit;
                }
            }
            .post-links{
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                > .item{
                    margin-right: 20px;
                }  
                .addthis_toolbox{
                    display: inline-block;
                    vertical-align: middle;
                }
            }

        }
    }
    .post-list.blog-style-modern{
        &.blog-list--above-image {
            article{
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
                -ms-flex: ~"0 0 calc(100% - 30px)";
                flex: ~"0 0 calc(100% - 30px)";
                max-width: ~"calc(100% - 30px)";
                margin-left:auto;
                margin-right:auto;
            }
           
        }
        &.blog-list--overlay {
            article{
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
                -ms-flex: ~"0 0 calc(100% - 30px)";
                flex: ~"0 0 calc(100% - 30px)";
                max-width: ~"calc(100% - 30px)";
                margin-left:15px;
                margin-right:15px;
                margin-bottom: 30px;
            }
        }
    }
    .blog-widget-recent{
        .post-list{
            margin-top: 0;
            article{
                margin-bottom: 40px;
            }
        }
        &.ox-blog-widget__titles-only{
            .post-list article{
                margin-bottom: 25px;
                .post-categories{
                    margin-bottom: 5px;
                }
                .post-title{
                    display: inline;
                    font-size: 28px;
                    line-height: 1;
                    padding: 4px 8px;
                    margin-left: -8px;
                    //box-shadow: 10px 0 0 rgba(0,0,0,0), -8px 0 0 rgba(0,0,0,0);
                    box-decoration-break: clone;
                    -webkit-box-decoration-break: clone;
                    a,
                    span{
                        position:relative;
                    }
                    .lib-css(transition, ~"all 600ms ease-in-out", @_prefix: 1);
                }
                &:hover{
                    .post-title{
                        a{
                            color: #fff;
                             .lib-css(transition, ~"all 10ms ease-in-out", @_prefix: 1);
                        }
                        color: #fff;                        
                        //box-shadow: 10px 0 0 #000, -8px 0 0 #000;
                        background-color: #000;
                        .lib-css(transition, ~"all 10ms ease-in-out", @_prefix: 1);
                    }
                }
            }
        }
        .blog-list--overlay{
            &.post-list article{
                min-height: 400px;
                margin-bottom: 30px;
            }
        }
        .blog-list--above-image{
            &.post-list article{
                min-height: 540px;
                margin-bottom: 30px;
            }
        }
        .post-list.blog-style-classic{
            article:not(.no-image) {
                .post-content{
                    margin-left: 10px;
                }
            }
            .post-image-wrapper{
                position:relative;
                .post-date{
                    position: absolute;
                    left:0;
                    bottom:0;
                    margin-right:0;
                    display:block;
                }
            }
        }
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .post-view .block.comments {
        .fb-comments,
        .c-replyform form{
            padding: 30px;
        }
        button,
        button[type="submit"]{
            min-width:unset;
            width:100%;
        }
        .c-comment {
            padding: 35px 0;
            .c-post{
                padding: 0 0 0 14px;
            } 
        }
    }
    .post-list{
        &.blog-style-classic {
                .post-content{
                    margin-left:10px;
                }
            .post-date{
                display:none;
            }
            .post-image-wrapper{
                .post-date{
                    display:block;
                }
            }
        }
        .post-image-wrapper{
            img{
                width:100%;
            }
        }
    }

}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
        .page-layout-1column-fullwidth {
            &.blog-page{
                .page-main{
                padding-left: 30px;
                padding-right:30px;
                }
            }
            &.blog-post-view{
                .page-main{
                    padding: 40px 0 80px 0;
                }
            }
        }
        .post-view {

                .post-nextprev-hld{
                    .nextprev-link{
                        max-width:50%;
                    }
                    .prev-link {
                        padding-right:15px;
                    }
                    .prev-link + .next-link{
                        padding-left:15px;
                    }
                }
            
            .post-nextprev-hld{
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
               .next-link{
                    text-align:left;
                }
                .prev-link + .next-link{
                    text-align:right;
                    margin-right:0;
                    margin-top:0;
                }
                .nextprev-link{
                    max-width:80%;
                    -ms-flex-preferred-size: 0;
                    flex-basis: 0;
                    -ms-flex-positive: 1;
                    flex-grow: 1;
                }
            }
        }
        .data.item.content{
            .related{
                > .post-list{
                    margin-top: 10px;
                }
            }
        }
    .post-list{
        &.columns-4,
        &.columns-3,
        &.columns-2{
            article.post-style--image-top{
                -ms-flex: 0 0 50%;
                flex: 0 0 50%;
                max-width: 50%;
            }
        }
        &.blog-list--image-top{
            &.columns-4,
            &.columns-3,
            &.columns-2{                
                article{
                    -ms-flex: 0 0 50%;
                    flex: 0 0 50%;
                    max-width: 50%;
                }
            }
        }
        &.-list-view{
            article{
                margin-bottom: 25px;
                display: flex;
                flex-wrap: wrap;
                .post-image-wrapper,
                .post-content{
                    justify-content: center;
                    display: flex;
                    flex-flow: column;
                    position: relative;
                    width: 100%;
                }
                .post-content{
                    flex: 0 0 65%;
                    max-width: 65%;
                    padding-left: 30px;
                }
                .post-title{
                     margin-bottom: 0;
                }
                .post-image-wrapper{
                    flex: 0 0 35%;
                    max-width: 35%;
                    .post-posed-date{
                        right: 0;
                        left: auto;
                    }
                    img{
                        display: block;
                        margin-left: auto;
                        height: 100%;
                        object-fit: cover;
                    }
                    margin-bottom: 0;
                }
            }
        }
        
        &.blog-style-modern{
            article.post-style--image-left,
            &.blog-list--image-left article{
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                .post-image-wrapper,
                .post-content{
                    -ms-flex-pack: center;
                    justify-content: center;
                    display: -ms-flexbox;
                    display: flex;
                    flex-flow: column;
                    -ms-flex-direction: column;
                    -ms-flex: 0 0 50%;
                    flex: 0 0 50%;
                    max-width: 50%;
                    position: relative;
                    width: 100%;
                }
                .post-content{
                    padding-left: 60px;
                }
                .post-image-wrapper{
                    .post-posed-date{
                        right: 0;
                        left: auto;
                    }
                    img{
                        display: block;
                        margin-left: auto;
                    }
                    margin-bottom: 0;
                }
            }
            &.blog-list--image-left{
                article.post-style--image-top{
                    display:block;
                    .post-content{
                        -ms-flex: 0 0 100%;
                        flex: 0 0 100%;
                        max-width: 100%;
                        padding-left: 0;
                    }
                    .post-image-wrapper {
                        -ms-flex: 0 0 100%;
                        flex: 0 0 100%;
                        max-width: 100%;
                        margin-bottom: 34px;
                        img{
                            margin-left:0;
                        }
                    }
                }
                article.post-style--overlay,
                article.post-style--above-image{
                    .post-image-wrapper{
                        -ms-flex: 0 0 100%;
                        flex: 0 0 100%;
                        max-width: 100%;
                        position: absolute;
                    }
                }
            }
        
            article.post-style--overlay,
            &.blog-list--image-top article.post-style--overlay,
            &.blog-list--overlay article,
            article.post-style--above-image,
            &.blog-list--image-top article.post-style--above-image,
            &.blog-list--first-above-image article:first-child,
            &.blog-list--above-image article{
                .post-content{
                    padding: 50px;
                    -ms-flex: 0 0 100%;
                    flex: 0 0 100%;
                    max-width: 100%;
                }
            }                
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__sm) {
    .post-list.blog-style-modern{
        &.columns-3,
        &.columns-2{
            &.blog-list--overlay {
                article{
                    -ms-flex: ~"0 0 calc(50% - 30px)";
                    flex: ~"0 0 calc(50% - 30px)";
                    max-width: ~"calc(50% - 30px)";
                }
            }
            article{
                &.post-style--overlay{
                    -ms-flex: ~"0 0 calc(50% - 30px)";
                    flex: ~"0 0 calc(50% - 30px)";
                    max-width: ~"calc(50% - 30px)";
                }
            }
        }
    }
    .post-view{
        &.sticky-share-only{
            .post-meta{
                .social-share__content{
                    display:none;
                }
            }
        }
    }
    .blog-short-post{
        .post-view{
            &.sticky-share-only{
                .post-meta{
                    .social-share__content{
                        display:flex;
                    }
                }
            }
        }
    }
    .page-layout-1column-fullwidth {
        &.blog-page{
            .page-main{
                padding-left: 40px;
                padding-right:40px;
            }
        }
        &.blog-post-view{
            .page-main{
                padding: 40px 0 80px 0;
            }
        }
    }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .blog-page{
        .sidebar-additional{
            margin-top:80px;
        }
    }
    .post-list{
        &.columns-2,
        &.columns-3{
            &.blog-style-classic {
                .post-date{
                    display:none;
                }
                .post-content{
                    margin-left:10px;
                }
                .post-image-wrapper{
                    .post-date{
                        display:block;
                    }
                }
            }
        }
    }
}
//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-layout-1column-fullwidth {
        &.blog-page{
            .page-main{
                padding-bottom: 80px;
                padding-top: 40px;
            }
        }
    }
    .post-list.blog-style-modern{
        &.blog-list--overlay {
            &.columns-3{
                article{
                    -ms-flex: ~"0 0 calc(33.333333% - 30px)";
                    flex: ~"0 0 calc(33.333333% - 30px)";
                    max-width: ~"calc(33.333333% - 30px)";
                }
            }
        }
    }
    .post-list{
        margin-top:30px;
        &.columns-3{
            article.post-style--overlay{
                -ms-flex: ~"0 0 calc(33.333333% - 30px)";
                flex: ~"0 0 calc(33.333333% - 30px)";
                max-width: ~"calc(33.333333% - 30px)";
            }
            article.post-style--image-top{
                -ms-flex: 0 0 33.333333%;
                flex: 0 0 33.333333%;
                max-width: 33.333333%;
            }
        }
        &.blog-list--overlay{
            &.columns-3{
                article,
                article.post-style--overlay{
                    -ms-flex: ~"0 0 calc(33.333333% - 30px)";
                    flex: ~"0 0 calc(33.333333% - 30px)";
                    max-width: ~"calc(33.333333% - 30px)";
                }
            }
        }
        &.blog-list--image-top{
            &.columns-3{
                article.post-style--image-top,
                article{
                    -ms-flex: 0 0 33.333333%;
                    flex: 0 0 33.333333%;
                    max-width: 33.333333%;
                }                
            }
        } 
        article{
            margin-bottom:60px;
        }
        &.blog-style-modern{
            article{
                .post-image-wrapper{
                    .post-posed-date{
                        opacity: 0;
                        transform: translateY(10px);
                        transition: all 0.3s ease;
                        font-size: 16px;
                        height: 52px;
                        padding: 0 19px;
                        line-height: 52px;
                        will-change:transform;
                    }
                }
                &:hover{
                    .post-image-wrapper{
                        .post-posed-date{
                            opacity:1;
                            transform: translateY(0);
                        }
                    }
                }
            }           
            article.post-style--above-image,
            &.blog-list--image-top article.post-style--above-image,
            &.blog-list--first-above-image article:first-child,
            &.blog-list--above-image article{
                .post-content{
                    padding: 70px;
                }
                .post-title{
                    font-size: 48px;
                }
            }
            article.post-style--overlay,
            &.blog-list--image-top article.post-style--overlay,
            &.blog-list--overlay article{
                .post-content{
                    padding: 60px;
                }
            } 
            &.columns-3{
                article.post-style--overlay,
                &.blog-list--image-top article.post-style--overlay,
                &.blog-list--overlay article{
                    .post-content{
                        padding: 35px;
                    }
                }
            }
        }
    } 
    .post-view {
        &.narrow-post,
        &.narrow-post.narrow-post--content,
        &.narrow-post.narrow-post--p,
        &.narrow-post .narrow-content{
            .wide-content,
            .wide{
                margin-left:-80px;
                margin-right:-80px;
            }
        }
    }

    .post-list{
        margin-top:40px;
        &.columns-4{
            article.post-style--image-top{
                -ms-flex: 0 0 25%;
                flex: 0 0 25%;
                max-width: 25%;
            }
        }
        &.blog-list--image-top{
            &.columns-4{               
                article{
                    -ms-flex: 0 0 25%;
                    flex: 0 0 25%;
                    max-width: 25%;
                }                
            }
        } 
        article{
            margin-bottom:80px;
        }  
        &.blog-style-modern{ 
            article.post-style--overlay,
            &.blog-list--image-top article.post-style--overlay,
            &.blog-list--overlay article,
            article.post-style--above-image,
            &.blog-list--image-top article.post-style--above-image,
            &.blog-list--first-above-image article:first-child,
            &.blog-list--above-image article{
                .post-content{
                    transform: translateY(52px);
                    transition: transform 0.3s;
                    will-change:transform;
                }
                .social-share__content{
                    a{
                        opacity: 0;
                        transform: translateY(20px);
                        transition: all 0.3s;
                        will-change:transform;
                    }
                }
                .post-links{
                    height:30px;
                    opacity: 0;
                    transition: opacity 0.3s;
                }
                &:hover{
                    .social-share__content{
                        a{
                            opacity: 1;
                            transform: translateY(0);
                            &:nth-child(1){
                                transition-delay:50ms;
                            }
                            &:nth-child(2){
                                transition-delay:100ms;
                            }
                        }
                    }
                    .post-content{
                        transform: translateY(0);
                    }
                    .post-links{
                        opacity: 1;
                    }
                }
            }      
            article.post-style--overlay,
            &.blog-list--image-top article.post-style--overlay,
            &.blog-list--overlay article{
                .post-content{
                    max-width: 100%;
                }
            }
            article.post-style--above-image,
            &.blog-list--image-top article.post-style--above-image,
            &.blog-list--first-above-image article:first-child,
            &.blog-list--above-image article{
                .post-content{
                    max-width: 60%;
                }
            }
        }
    }
    .blog-widget-recent .post-list.blog-style-modern{
        &.blog-list--above-image {
            article .post-content{
                max-width: 80%;
            }
        }
        &.blog-list--overlay {
            article .post-content{
                max-width: 100%;
            }
        }
    }

    .page-layout-2columns-left,
    .page-layout-2columns-right{
        .post-list{
            &.blog-style-modern{
                article.post-style--above-image,
                &.blog-list--image-top article.post-style--above-image,
                &.blog-list--first-above-image article:first-child,
                &.blog-list--above-image article{
                    .post-content{
                        -ms-flex: 0 0 100%;
                        flex: 0 0 100%;
                        max-width: 100%;
                    }
                }                
            }
        }  
    }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .post-list.blog-style-modern{
        &.columns-3{
            article.post-style--overlay,
            &.blog-list--image-top article.post-style--overlay,
            &.blog-list--overlay article{
                .post-content{
                    padding: 60px;
                }
            }
        }
    }
    .post-view {
        &.narrow-post,
        &.narrow-post.narrow-post--content,
        &.narrow-post.narrow-post--p,
        &.narrow-post .narrow-content{
            .wide-content,
            .wide{
                margin-left:-200px;
                margin-right:-200px;
            }
        }
    }
    .page-layout-2columns-left,
    .page-layout-2columns-right{
        .post-list{
            &.blog-style-modern{
                article.post-style--above-image,
                &.blog-list--image-top article.post-style--above-image,
                &.blog-list--first-above-image article:first-child,
                &.blog-list--above-image article{
                    .post-content{
                        max-width: 70%;
                    }
                }
                &.blog-list--image-left{
                    article.post-style--above-image{
                        .post-content{
                            -ms-flex: 0 0 70%;
                            flex: 0 0 70%;
                            max-width: 70%
                        }
                    }
                }
            }
        }  
    }
}