/* 
Theme Name:		 Monegraph
Theme URI:		 https://ombredigital.co/
Description:	 Monegraph is a child theme of Astra, created by ChildTheme-Generator.com
Author:			 Higher Intelligence
Author URI:		 https://ombredigital.co/
Template:		 astra
Version:		 1.0.0
Text Domain:	 monegraph
*/


/*
    Add your custom styles here
*/


/* -----------------------------------

POST PAGES

----------------------------------- */

.ast-blog-container {
    margin: 0px auto;
}

.ast-blog-container section:first-child {
    background-color: #070C20;
}

.mgh-featured-container, .mgh-primary-posts {
    margin: 0px auto;
    max-width: 1440px;
    padding: 70px 0px 100px;
}

/*STYLING FEATURED POST*/

.mgh-feature-post {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.mgh-feature-image, .feature-row.post-meta {
    flex-basis: auto;
}

.mgh-feature-image img {
    max-width: 648px;
}

.feature-row.post-meta {
    margin-left: 5.56%;
    max-width: 36%;
}

.feature-row.post-meta h4, .feature-row.post-meta p {
    margin-top: 16px;
}

.feature-row.post-meta h2 a {
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 64px;
    letter-spacing: 0.1em;
} 

.feature-row.post-meta h4 a {
    color: #FFFFFF;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.feature-row.post-meta p {
    color: #EFF2F7; 
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.05em;
    text-align: left;
}

/*STYLING PRIMARY POST*/

.mgh-primary-posts {
    padding: 90px 0px;    
}

.posts-row {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.row-single-post {
    margin: 0px 2.62% 5em 0px;
    max-width: 373px;
    height:395px;
}

/*.row-single-post:nth-of-type(3) {
    margin-right: 0px;
}*/

.row-single-post div:nth-child(2) {
    box-shadow: 0px 2px 10px 0px #00000040;
}

/*.row-single-post:last-child {
    margin-right: 0px;
}*/

.mgh-primary-image h4 {
    background-color: #7C0064;
    border: 1px solid #ffffff;
    border-radius: 5px;
    color: #ffffff;
    float: right;    
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: 0.05em;
    margin-right: 6%;
    margin-bottom: -33.09px;
    padding: 6px 12px;
    position: relative; 
    text-align: center;
    top: 194px;
}

.primary-post.post-meta {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.mgh-title {
    padding: 12px 66px 42px 22px;
}

.mgh-author {
    margin: 6px 0px 6px 22px;
}

.mgh-title a{
    color: #000000;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.05em;
}

.mgh-author a {
    color: #000000;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.1em;
}

.mgh-date {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0em;
    margin: 6px 12px 6px 0px;
}

/* STYLING PAGINATION */

.navigation.pagination {
    text-align: center;
}

.nav-links .page-numbers {
    background: rgba(255,255,255,0.12);
    border: 2px solid #00070D;
    border-radius: 4px;
    color: #7C0064;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 0px 6px;
}

/* RESPONSIVE POSTS PAGE */

/* Mobile Hhone Displays - iPhone and Android */

@media only screen and (max-width: 544px) {
    
    .mgh-featured-container {
        padding-bottom: 50px;
    }
    
    .mgh-primary-posts {
        padding:60px 0px;
    }
    
    .mgh-feature-image {
        text-align: center; 
    }
    
    .mgh-feature-image img {
        max-width: 90%;
    }
    
    .feature-row.post-meta {
        margin: 0px auto;
        margin-top: 50px;
        max-width: 90%;
    }
    
    .feature-row.post-meta h2 a {
        font-size: 32px;
        line-height: 48.76px;
    }
    
    .row-single-post {
        margin:0px auto;
        width: 90%;
    }
    
    .row-single-post:nth-of-type(3), .row-single-post:last-child {
        margin-right: auto;
    }
    
    .mgh-primary-image h4 {
        top: 174px;
    }
}

/* Tablet Displays - iPhone and Android */

@media only screen and (max-width: 1080px) {

    .mgh-featured-container {
        padding-bottom: 60px;
    }
    
    .mgh-primary-posts {
        padding:60px 0px;
    }    
    
    .mgh-feature-image {
        text-align: center; 
    }
    
    .mgh-feature-image img {
        max-width: 90%;
    }

    .feature-row.post-meta {
        margin: 0px auto;
        margin-top: 50px;
        max-width: 90%;
    }    
        
    .row-single-post:nth-of-type(3), .row-single-post:last-child {
        margin-right: 2.62%;
    }
    
}


/* STYLING SINGLE POSTS */

.blog-container .ast-separate-container, .blog-container.ast-article-post, 
.blog-container .ast-separate-container, .blog-container .ast-article-single {
    background-color: transparent;
    padding:0px;
    margin: 0px auto;
}

.blog-container article {
    margin:0px auto;
    max-width:942px;
}

.blog-container article .clear {
    clear: both;
}

#mgh-primary {
    margin: 60px auto 180px;
}

.feature-image-container {
    float: left;
}

.feature-image-container img {
    max-width: 847.5px;
}


#mgh-single-meta {
    background-color: #070C20;
    float: right;
    margin-top:-79px;
    max-width: 776px;
    padding: 51px 52px 51px 76px;    
}

#mgh-single-meta h1 {
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 64px;
    letter-spacing: 0.1em;   
}

#mgh-single-meta p {
    color: #ffffff;    
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.05em;
}

#mgh-content {
    margin-top: 40px;
}

#mgh-content h1, #mgh-content h2, #mgh-content h3,
#mgh-content h4, #mgh-content h5, #mgh-content h6, 
#mgh-content p, #mgh-content blockquote, #mgh-content figcaption {
    font-family: Open Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.05em;
}

#mgh-content p {
    font-size: 16px;
    font-weight: 400;
}

#mgh-content a {
    color: #070C20;
} 

#mgh-content blockquote {
    border-left: 5px solid rgba(124,0,100,.5);    
    font-weight: bold;
}

/* RESPONSIVE SINGLE PAGE */

/* Mobile Hhone Displays - iPhone and Android */

@media only screen and (max-width: 544px) {
    
    #mgh-primary {
        margin-top: .5px;
    }
    
    #mgh-single-meta h1 {
        font-size: 32px;
        line-height: 48.76px;
    }
    
    .feature-image-container img {
        width: 100%;
    }
    
    #mgh-single-meta {
        margin: 0px auto;
        padding: 50px 7.5% 5%;
    }
    
    #mgh-single-meta p {
        font-size: 16px;
        line-height: 24.88px;
    }
    
    #mgh-content {
        width: 85%;
        margin: 30px auto 0px;
    }
}

/* Tablet Displays - iPhone and Android */

@media only screen and (max-width: 1080px) {
    
    #mgh-primary {
        margin-top: 40px;
    }
    
    #mgh-content {
        margin: 40px auto;
        width: 90%;
    }
    
}