﻿.root-multi-post-horizontal {
    display: flex;
    flex: 0 1 auto;
    font-family: "Roboto", "Open Sans", sans-serif !important;
}

    .root-multi-post-horizontal .featured-title-bar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .root-multi-post-horizontal .featured-title-bar h2 {
            font-size: 2.1rem;
            color: #000000;
            font-weight: 300;
        }

    .root-multi-post-horizontal .all-news-link {
        display: flex;
        align-self: flex-end;
        align-self: center;
        color: #0066CC;
        font-weight: 600;
        font-size: 1.25rem;
        text-transform: uppercase;
    }

        .root-multi-post-horizontal .all-news-link:hover {
            text-decoration: underline;
        }

    .root-multi-post-horizontal .main-story .card {
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 0;
        border: 2px solid white;
        background-color: #EFF5F0;
    }

    .root-multi-post-horizontal .all-news-link:hover {
        text-decoration: underline;
    }

    .root-multi-post-horizontal .main-story .card-body {
        padding: 1.5rem;
    }

    

        .root-multi-post-horizontal .main-story .card-body a:hover {
            text-decoration: underline !important;
            text-decoration-color: #0066CC !important;
        }

        .root-multi-post-horizontal .main-story .card-body a.card-title {
            float: left;
        }

            .root-multi-post-horizontal .main-story .card-body a.card-title h2 {
                color: #0066CC;
                font-size: 2.1rem;
                font-weight: 600;
            }

            .root-multi-post-horizontal .main-story .card-body a.card-title :hover {
                text-decoration: underline;
            }

    .root-multi-post-horizontal a:hover h4 {
        text-decoration: underline !important;
        text-decoration-color: #0066CC !important;
    }

    .root-multi-post-horizontal .main-story .card .card-body p {
        background-color: #EFF5F0 !important;
        color: #000000;
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .root-multi-post-horizontal .main-post-date, .root-multi-post-horizontal .post-date {
        color: #000000;
        font-size: 1.1rem;
        font-weight: 400;
    }

    .root-multi-post-horizontal .main-story a.btn-link,
    .root-multi-post-horizontal .main-story-no-img a.btn-link {
        padding-right: 0 !important;
    }

    .root-multi-post-horizontal .sub-story-container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

        .root-multi-post-horizontal .sub-story-container .story-block {
            display: flex;
            flex-direction: row;
            border: 2px solid white;
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

            .root-multi-post-horizontal .sub-story-container .story-block a {
                height: 100%;
                border-radius: 0;
                background-color: #EFF5F0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border: none;
                padding: 1.5rem;
            }

            .root-multi-post-horizontal .sub-story-container .story-block .post-date {
                display: flex;
                margin-bottom: 1.25rem;
            }

            .root-multi-post-horizontal .sub-story-container .story-block h4 {
                font-size: 1.5rem;
                color: #0066CC;
                font-weight: 600;
                margin-bottom: 1.25rem;
            }

.text-white-shadow {
    color: white !important;
    text-shadow: 0px 0px 4px #000000;
}

    .text-white-shadow .btn {
        text-shadow: none;
    }

a.main-story-img-link {
    display: flex;
    flex-grow: 1;
    align-self: flex-end;
}

div.main-story-img-container {
    flex: 1 1 auto;
    padding: 2rem;
}
@media screen and (min-width:768px) {
    .root-multi-post-horizontal div.main-story-img-container {
        padding-left: 0;
    }
}
