.image-info-box {
    font-size: inherit
}

.image-info-box .imageinfo-paragraph {
    font-family: new-atten,sans-serif;
    margin-bottom: 10px
}

.image-info-box div.imageinfo-image {
    float: none;
    margin: 0
}

.image-info-box.half-width-image {
    position: relative;
    text-align: left;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin: 80px 0 60px -50vw;
    min-height: 250px
}

@media (min-width: 901px) {
    .image-info-box.half-width-image {
        margin:80px 0 60px -60vw
    }
}

.image-info-box.half-width-image div.imageinfo-image {
    overflow: hidden;
    height: 380px
}

.image-info-box.half-width-image div.imageinfo-image img {
    top: 0;
    max-width: inherit;
    max-height: inherit;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.image-info-box.half-width-image .imageinfo-url {
    margin-bottom: 60px
}

.image-info-box.half-width-image .imageinfo-text {
    z-index: 1;
    position: relative;
    padding: 20px 30px 30px
}

.image-info-box.half-width-image .imageinfo-text:after {
    content: '';
    border-bottom: 1px solid #ccc;
    width: 60%;
    display: block
}

@media (min-width: 901px) {
    .image-info-box.half-width-image .imageinfo-text {
        padding:45px 30px 30px
    }

    .image-info-box.half-width-image .imageinfo-text:after {
        content: none
    }
}

@media (min-width: 641px) {
    .image-info-box.half-width-image div.imageinfo-image {
        height:300px
    }
}

@media (min-width: 901px) {
    .image-info-box.half-width-image .imageinfo-text {
        position:absolute;
        top: 50%;
        right: 20px;
        left: 67vw;
        transform: translate(0, -50%);
        max-width: 350px
    }

    .image-info-box.half-width-image div.imageinfo-image {
        width: 65vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        height: 640px
    }
}

@media (min-width: 1281px) {
    .image-info-box.half-width-image div.imageinfo-image {
        height:645px
    }

    .image-info-box.half-width-image .imageinfo-text {
        max-width: 580px
    }
}

@media (min-width: 2001px) {
    .image-info-box.half-width-image div.imageinfo-image {
        height:750px
    }
}

@media (min-width: 2401px) {
    .image-info-box.half-width-image div.imageinfo-image {
        height:800px
    }
}

@media (min-width: 3001px) {
    .image-info-box.half-width-image div.imageinfo-image {
        height:900px
    }
}

.image-info-box.half-width-image.light-blue,.image-info-box.half-width-image.dark-blue {
    background: #69B3E7;
    background-size: 900px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    margin: 0 0 0 -50vw;
    background-image: url(/packages/mississippi_college/themes/mississippi_college_v2022/images/diamond-background-grid-white.svg)
}

@media (min-width: 901px) {
    .image-info-box.half-width-image.light-blue,.image-info-box.half-width-image.dark-blue {
        background-position:50vw 100%
    }
}

@media (min-width: 901px) {
    .image-info-box.half-width-image.light-blue div.imageinfo-image,.image-info-box.half-width-image.dark-blue div.imageinfo-image {
        width:50vw
    }
}

.image-info-box.half-width-image.light-blue .imageinfo-text,.image-info-box.half-width-image.dark-blue .imageinfo-text {
    max-width: 100%;
    top: 0;
    left: 0;
    width: 100%
}

.image-info-box.half-width-image.light-blue .imageinfo-text:after,.image-info-box.half-width-image.dark-blue .imageinfo-text:after {
    content: none
}

@media (min-width: 901px) {
    .image-info-box.half-width-image.light-blue .imageinfo-text,.image-info-box.half-width-image.dark-blue .imageinfo-text {
        top:50%;
        left: 50vw;
        max-width: 50vw
    }
}

.image-info-box.half-width-image.light-blue .imageinfo-text h3,.image-info-box.half-width-image.light-blue .imageinfo-text p,.image-info-box.half-width-image.dark-blue .imageinfo-text h3,.image-info-box.half-width-image.dark-blue .imageinfo-text p {
    color: #0c2340
}

@media (min-width: 901px) {
    .image-info-box.half-width-image.light-blue .imageinfo-text,.image-info-box.half-width-image.dark-blue .imageinfo-text {
        padding:45px 60px 30px
    }

    .image-info-box.half-width-image.light-blue .imageinfo-text:after,.image-info-box.half-width-image.dark-blue .imageinfo-text:after {
        content: none
    }
}

@media (min-width: 1921px) {
    .image-info-box.half-width-image.light-blue .imageinfo-text,.image-info-box.half-width-image.dark-blue .imageinfo-text {
        max-width:40vw
    }
}

.image-info-box.half-width-image.dark-blue {
    background-color: #0c2340;
    background-image: url(/packages/mississippi_college/themes/mississippi_college_v2022/images/diamond-background-grid-blue.svg)
}

.image-info-box.half-width-image.dark-blue .imageinfo-text h3,.image-info-box.half-width-image.dark-blue .imageinfo-text p {
    color: #fff
}

section.news h2 {
    text-align: center;
    margin: 0 0 2rem
}

section.news .container {
    padding: 0 5%
}

@media only screen and (max-width: 900px) {
    section.news .container {
        padding:2em 10%
    }
}

section.news .articles {
    margin: 0 0 5em
}

@media (min-width: 901px) {
    section.news .articles {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr auto;
        gap: 2em 2em;
        grid-template-areas: "First-Article First-Article First-Article" ". . .";
        position: relative;
        text-align: left;
        width: 100vw;
        left: 50%;
        right: 50%;
        margin: 0 0 0 -50vw
    }

    section.news .articles .First-Article {
        grid-area: First-Article
    }

    section.news .articles .First-Article h3 a:hover {
        color: #fff
    }
}

@media only screen and (max-width: 900px) {
    section.news .articles {
        margin:0 0 1.5em
    }
}

section.news article {
    text-align: left
}

@media only screen and (max-width: 900px) {
    section.news article {
        float:none;
        clear: both;
        margin: 0 0 2.5em
    }
}

section.news article a {
    color: #0c2340;
    transition: all .2s
}

section.news article a:hover h3 {
    color: #c99700
}

section.news article a:hover .article-image img {
    transform: scale(1.05)
}

section.news h3 {
    color: #0c2340;
    font-size: 1.5rem;
    margin: 1rem 0 0 0;
    transition: all .2s
}

section.news h3 a {
    transition: all .3s
}

section.news h3 a:hover {
    color: #c99700
}

section.news .article-image {
    height: 250px;
    overflow: hidden
}

@media (min-width: 901px) {
    section.news .article-image {
        height:375px
    }
}

@media (min-width: 2001px) {
    section.news .article-image {
        height:440px
    }
}

section.news .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .2s
}

section.news .article-content {
    padding: 1rem;
    text-align: center
}

section.news .article-content span.date {
    padding-bottom: 0;
    border-bottom: 1px solid #c99700;
    display: inline-block;
    margin-bottom: 1.75rem
}

section.news h4,section.news p,section.news span.date {
    color: #4a4a4a;
    
    margin: 0 0 0.5em;
    font-weight: 400;

    letter-spacing: 0.1em;
    display: block;
    line-height: 1.5
}
section.news p {
    letter-spacing: 0;
}
section.news .image-info-box.half-width-image {
    margin: 40px 0 0 -50vw;
    width: 100vw;
    left: 50%;
    right: 50%;
    position: relative;
}

@media (max-width: 900px) {
    section.news .image-info-box.half-width-image.First-Article {
        margin-bottom:2rem
    }
}

section.news .image-info-box.half-width-image .imageinfo-text {
    max-width: 50vw
}

@media (max-width: 900px) {
    section.news .image-info-box.half-width-image .imageinfo-text {
        max-width:100%
    }
}

section.news .image-info-box.half-width-image div.imageinfo-image {
    height: 250px
}

@media (min-width: 901px) {
    section.news .image-info-box.half-width-image div.imageinfo-image {
        height:640px
    }
}

@media (min-width: 2001px) {
    section.news .image-info-box.half-width-image div.imageinfo-image {
        height:800px
    }
}

section.news .imageinfo-paragraph {
    text-align: center
}

section.news .imageinfo-paragraph h4,section.news .imageinfo-paragraph p,section.news .imageinfo-paragraph span.date {
    color: #0c2340;
    font-size: 1.325rem;
    padding-bottom: 1.5rem;
    
    display: inline-block;
    margin-bottom: 1.75rem
}
section.news .imageinfo-paragraph span.date {
border-bottom: 1px solid #fff;
text-transform: uppercase;
padding:0;
padding-bottom: 0;
}
@media (min-width: 901px) {
    section.news .imageinfo-paragraph:after {
       
    }
}