div#Root-Frame{
    max-width: 900px;

}

div#Masthead-Frame{
    padding:10px;
}

/* #Content-Frame */

div#Content-Frame{
    display: flex; 
    flex-direction: row;
    column-gap: 10px;
    padding:10px
}

div#Left-Column{
    
    
    flex-basis: 55%;
    flex-grow: 1; 
}

div#Right-Column{
    /*border: 1px solid black;
    
    background-color: #E0F0E0;*/
    border-left: 1px solid black;
    
    padding-left: 10px;
    flex-basis: 45%;
    flex-grow: 1; 
}


div.content-column div.article img{
    width: 100%;
}

/* Special Layouts */

div.article-pair{
    display: flex; 
    flex-direction: row;
    column-gap: 10px;
    
}



div.article-pair > div.article {
    flex-basis: 50%;
    flex-grow: 1; 
    
}

div.article-pair > div.article + div.article {
    border-top: none;
    margin-top: 0px;
    padding-top: 0px;
    border-left: 1px solid black;
    padding-left: 10px;
}

div.article-pair > div.article > img.landscape-image {
    height: 200px;
    object-fit: cover;
}



div.article-pair > div.article > img.logo-image {
    object-fit: contain;
}


div.article-pair > div.article > h1.headline {
    font-size: 18pt;
}


/* Articles */

div.article + div.article,
div.article + div.content-block,
div.content-block + div.article
{
    border-top: 3px solid black;
    margin-top: 10px;
    padding-top: 40px;
}

div.article > img {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    max-width: 300px;
}


div#Right-Column > div.article > img {
    max-height: 400px;
    object-fit: cover;
}

a.section-link {
    font-size: 14pt;
    font-family: sans-serif;
    font-weight: normal;
    text-decoration: none;
    margin-bottom: -3px;
    
    display: block;
}
a.section-link:hover{
    text-decoration: none;
}

div.section-link-frame{
    border-bottom: 1px solid #aa0000;
    margin-bottom: 12px;
    display: inline-block;
}

div.section-link-frame:hover{
    border-bottom: 3px solid #aa0000;
    margin-bottom: 10px;
}

div.article > img:first-child,
div.article > div.section-link-frame + img,
div.article > img.feature-image {
    float:none;
    max-width: unset;
    width: 100%;
    margin-bottom: 0px;
}

div.article > img.logo-image {
    max-width: 150px;
    max-height: 150px;
    float:none;
    margin-left:auto;
    margin-right:auto;
    display: block;
}





/* ====================== Social Media Widget =========================*/
div.social-media-container{
    /*padding: 10px;*/
    margin-bottom: 40px;
}

div.social-media-box {
    display: grid;
    grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
    grid-template-rows: auto;
    background-color: #F0F0F4;
    border: 1px solid black;
    
}

div.social-header h1{
    font-size: 22pt;
}

div.social-header{
    grid-column-start: 1; 
    grid-column-end: 7;
    text-align: center;
}
img.social-icon{
    max-width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
div.social-row{
    grid-column-start: 1; 
    grid-column-end: 7;
    text-align: left;
}

div.social-info ol{
    list-style-type:none;
    width: 50%;
    margin: 0;
    margin-bottom: 10px;
    display: block;
    float:left;
    padding-left:10px;
    padding-right:0px;
    font-size: 95%;
}

div.social-media-box a.big-red-button {
    border-radius: 7px;
}

div.article h1.headline {
    margin-top: 10px;
}

/* ========================== Mobile only elements =============================== */



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

    /* =======================================
     * Layout changes to content
     * ======================================== */
    
    
    div#Content-Frame{
        flex-direction: column;
    }
    
    div#Right-Column{
        border-left: none;
        padding-left: 0px;
        border-top: 3px solid black;
        margin-top: 10px;
        padding-top: 40px;
    }
    
    

    /* ====================== Article Layout Changes ====================*/
    
    
    /* Biggest change is to make the article a flex-column layout so that 
    we can use the 'order' css property to make the image the second element 
    after the section-link-frame */
    div.article {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    div.article > * {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    div.article > p + p {
        margin-top: 0.5rem;
    }

    /* originally had this  h1 + p, problem is this broke on when the img tag
    was between the headline and the paragraph. */
    div.article > p:first-of-type {
        margin-top: 0.7rem;
    }

    div.article > P:last-of-type {
        margin-bottom: 0.5rem;
    }

    div.article > div.section-link-frame{
        order: -2;
    }

    /* first of type so we don't grab other images in the layout*/
    div.article > img:first-of-type{
        order:-1;
    }


    /* ======================================================= Article Content Changes ========= */
    div.article h1.headline {
        font-size: 1.5rem;
    }

    /* unfloat article images*/
    h1.headline + img {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /*  Article Pair */
    div.article-pair{
        display: flex; 
        flex-direction: column;
        justify-content: space-between;
    }

    div.article-pair > div.article {
        flex-basis: 100%;
        flex-grow: 1; 
        
    }
    div.article-pair > div.article > img.landscape-image {
        height: unset;
    }
    
    div.article-pair > div.article + div.article {
        border-top: 3px solid black;
        margin-top: 10px;
        padding-top: 40px;
        border-left: none;
        padding-left: 0px;
    }
    /* ==================================== Section links before each article ========== */
    /*div.section-link-frame a.section-link{
        font-size: 14pt;
    }*/

    /*div.section-link-frame.float-over-image{
        
        position: absolute;
        background: rgba(255,255,255,0.6);
        padding: 8px;
        right: 18px;
        z-index: 0;
        max-width:calc(100% - 18px);
        text-align: right;
    }*/
    /*========================================================= Social Media Box*/

    div.social-info ol {
        width: 100%;
        margin-bottom: 0px;
    }
    div.social-info ol br {
        display: none;
    }
    div.social-media-box h1 {
        font-size: 2rem;
    }
}