/*
 *  Blog Common
 *
 *  => Content
 *  Normal Grid - 2 - Blog
 *  Normal Grid - 3 - Blog
 *  Normal Grid - 4 - Blog
 */

//  add mixins
@import "mixins";


.ast-page-builder-template .ast-article-post {
    margin-bottom: 2.5em;
}

.ast-featured-post {
    float: none;
}

.ast-separate-container .ast-separate-posts.ast-article-post{
    margin-bottom: 2em;
}

/**
 * Normal Blog
 */

.ast-animate-hidden {
    visibility: hidden;
    opacity: 0;
}

.ast-animate-display {
    visibility: visible;
    opacity: 1;
}


.ast-no-thumb .ast-date-meta .posted-on {
    margin-bottom: 1.5em;
}


.ast-date-meta.circle .posted-on {
    border-radius: 50%;
    overflow: hidden;
}

.has-post-thumbnail .ast-date-meta.circle .posted-on {
    margin: 1em;
}

.ast-single-post .entry-header.ast-no-title.ast-no-thumbnail {
    margin-bottom: 2em;
}

.ast-separate-container{

    @media (min-width: $col-md) {
        &.ast-blog-grid-2,
        &.ast-blog-grid-3,
        &.ast-blog-grid-4{
            .ast-archive-description{
                margin-bottom: 1.33333em;
            }
        }
    }

    .ast-grid-1{
        .blog-layout-1{
            padding:0;
        }
        .blog-layout-2,
        .blog-layout-3{
            padding:0;
            border-bottom: 0;
        }
    }
    .ast-grid-2,
    .ast-grid-3,
    .ast-grid-4 {
        .ast-article-post{
            background: transparent;
            &.ast-separate-posts{
                @media (min-width: $col-md) {
                    border-bottom: 0;
                }
            
            }
            @media (max-width: $mx-col-md) {
                width: 100%;
            }
            .blog-layout-2,
            .blog-layout-3{
                    border-bottom: 0;
            }
        }
    }
    .blog-layout-1,
    .blog-layout-2,
    .blog-layout-3{
        padding: 2.66666em;
        background:#ffffff;
    }
    @media (max-width: $mx-col-md) {
        .blog-layout-1,
        .blog-layout-3{
            display: block;
        }
    }
    .ast-grid-2,
    .ast-grid-3,
    .ast-grid-4 {
        .blog-layout-1,
        .blog-layout-2,
        .blog-layout-3{
            padding: 1.5em;
        }

    }

    @media (max-width: $mx-col-xl) {
        .ast-grid-2,
        .ast-grid-3,
        .ast-grid-4 {
            .ast-article-post{
                &:nth-child(2n+0),
                &:nth-child(2n+1){
                    padding:0;
                }
            }
        }
        .blog-layout-1,
        .blog-layout-2,
        .blog-layout-3{
            padding: 1.5em;
        }
    }

    @media (max-width: $mx-col-sm) {
        .ast-grid-2{
            .ast-article-post{
                .blog-layout-1,
                .blog-layout-2,
                .blog-layout-3{
                    padding: 1.33333em 1em 1.33333em;
                }
            }
        }
        .ast-grid-3,
        .ast-grid-4{
            .ast-article-post{
                .blog-layout-1{
                    padding: 1.33333em 1em 1.33333em;
                }
            }
        }
    }
}

.ast-plain-container,
.ast-page-builder-template{
    .ast-grid-2,
    .ast-grid-3,
    .ast-grid-4 {
        .ast-article-post{
            @media (max-width: $mx-col-md) {
                width: 100%;
            }
        }
    }
}

@media (min-width: $col-md) {
    // padding of the content
    .ast-separate-container{
        .ast-grid-2,
        .ast-grid-3,
        .ast-grid-4{
            >.site-main > .ast-row{
                margin-left: -1em;
                margin-right: -1em;
                display: flex;
                flex-flow: row wrap;
                align-items: stretch;
                &:before,
                &:after{
                    flex-basis: 0;
                    width: 0;
                }
            }
            .ast-article-post{
                display: flex;
                padding: 0;
                
                &.ast-separate-posts{
                    &:nth-child(2n+0),
                    &:nth-child(2n+1) {
                        padding: 0 1em 0;
                    }
                }
            }
        }
    }

    .ast-plain-container,
    .ast-page-builder-template{
        .ast-grid-2,
        .ast-grid-3,
        .ast-grid-4{
            >.site-main > .ast-row{
                margin-left: -1em;
                margin-right: -1em;
                display: flex;
                flex-flow: row wrap;
                align-items: stretch;
                &:before,
                &:after{
                    flex-basis: 0;
                    width: 0;
                }
            }
            
            .ast-article-post{
                display: flex;
            }
            
            .ast-article-post:last-child {
                margin-bottom: 2.5em;
            }
        }
        
    }
}

/* Full Width Content Stretch */
.ast-page-builder-template .ast-article-post .entry-header {
    margin: auto auto 1em auto;
    padding: 0;
}

.ast-article-post .ast-post-format-audio.ast-embeded-audio .ast-date-meta .posted-on {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}

.ast-page-builder-template.single .post-navigation {
    margin-top: 2em;
}


hr.post-divider {
    height: 0;
    margin: 0;
}

hr.ast-single-previous-hr {
    height: 0;
    margin-top: 2em;
}

.ast-show-comments-data {
    & {
        padding: 2em 6.67em;
    }
    .ast-show-comments {
        cursor: pointer;
    }

    .ast-show-comments-count,
    .ast-show-comments {
        max-width: 640px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .ast-show-comments-count {
        margin-bottom: 2em;
    }
}

.ast-pagination-square,
.ast-pagination-circle {
    .ast-pagination .page-numbers {
        border-style: solid;
        border-width: 1px;
        line-height: 2.33333em;
    }
}


.ast-pagination-circle {
    
    .ast-pagination .page-numbers {
        border-radius: 50%;
    }
    
    .ast-pagination .prev.page-numbers,
    .ast-pagination .next.page-numbers {
        border-radius: 30px;
    }
}

#content {
	&:before { 
		content: "768";
		position: absolute;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
	}
}

@media all and ( max-width: 768px ) {
   #content {
		&:before {
			content: "";
		}
	}
}