*,*::after,*::before{
    box-sizing: border-box;
}

html{
    background-color: #D9DFEB;
    /*
    From the MIT licensed normalize.css file
    */
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;


}

footer{
    background-color: #2B2E41;
    color:white;
    padding:1rem;
}

/*Flexbox*/
body{
    font-family: 'Lato',sans-serif;
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.box{
    display:flex;
    flex-wrap:wrap;

    justify-content:left;
}

/*Header hero*/
.header-hero {
    position: relative;
    text-align: left;
    color: white;

}
.header-image{
    object-fit: cover; /*https://alligator.io/css/cropping-images-object-fit/ */
    height: 75vh;
    width: 100%;
}

.hero-text{
    display: inline-block;
    color: white;
    background: rgba(0, 31, 66, 0.4);
    padding: 1rem 1rem 3rem 1rem;
    margin: 0 2rem 2rem 2rem;
    font-style: normal;
    font-weight: normal;

    position: absolute;
    bottom: -5rem;
    left: 0;
    width: calc(100% - 4rem);
}

/*Info tabs*/
.box-item-1of2 figure{
    margin:0;
}

.box-item-1of2{
    flex:1 1 50%;
    padding:0px;

    position: relative;
}

.info-image{
    object-fit: cover;
    width:100%;
    height:35vh;
}

/*Sliding overlay without javascript from w3schools
https://www.w3schools.com/howto/howto_css_image_overlay_slide.asp
*/
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background:#000000B9;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
}
.overlay-text{
    margin:1rem;
    padding-left:1rem;
    color:white;
    font-style: normal;
    font-weight: normal;
}

.box-item-1of2:hover .overlay {
    height: 100%;
}
.box-item-1of2:hover figcaption {
    background:#00000000;
    transition: .5s ease;
}

.box-item-1of2 figcaption{
    display: inline-block;
    color:white;
    background:#000000B9;
    padding-left:2rem;

    position: absolute;
    bottom:0;
    left:0;
    width:100%;

    transition: .5s ease;
}



@media (max-width:900px){
	.box-item-1of2{
        flex-basis:100%;
        margin-top: 0;
	}
}


/*Line beak*/
.break{
    background-color: #D9DFEB;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top:5rem;
}

/*Bar thing*/
.color-bar{
    background-color:#2B2E41;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top:1rem;
    padding-bottom:1rem;
}

/*Index news page*/
.news-item-1of4{
    flex: 1 1 20%;
    background-color: white;
    margin:1rem;

}
.index-news-image{
    object-fit:cover;
    width:100%;
    height:25vh;

}
.index-news-text{
    padding-left:1rem;
    padding-right:1rem;
}

.news-bar a figcaption{
    text-decoration:none;
    margin:1rem;
}

@media (max-width:500px){
	.news-item-1of4{
        flex-basis:100%;
        margin-top: 0;
    }
    .index-news-image{
        object-fit:cover;
        width:100%;
        height:50vh;
    }

}
.news-item-1of4 a:active, a:hover, a:visited, a{
    text-decoration: none;
    color:black;
}
.news-item-1of4 h2{
    font-size:auto;
}

/*About page flex*/
.text-bar-2of3{
    flex: 1 1 60%;
    color:white;

    margin:1rem;
}
.text-bar-1of3{
    flex: 1 1 30%;

    margin:1rem;
}

.mission-image{
    width: 100%;
    height:auto;
    object-fit: cover;

    padding-top:1.75rem;
    padding-bottom:0.5rem;
}

/*Info pages*/

.text-bar-1of4{
	flex: 1 1 20%;
	margin: 1rem;
    align-self: flex-start;

    margin-bottom:2rem;
}

.text-bar-3of4{
	flex: 1 1 60%;
    margin: 1rem;

    color:white;

	align-self: flex-start;
}

.rcg-image{
    width: 100%;
    height:auto;
    object-fit: cover;

    padding-top:1.75rem;
    padding-bottom:0.5rem;
}
@media(max-width:900px){
    .rcg-image{
        padding-bottom:0rem;
        padding-top:0.5rem;
    }
}

.box-header{
    color:white;
    margin:1rem;
}

.step-item-1of3{
    flex: 1 1 20%;
    background-color: white;
    margin:1rem;

    margin-bottom:2rem;
}
.step-img{
    width: 100%;
    height: auto;

    object-fit: cover;
}

.info-text{
    padding-left: 1rem;
    padding-right: 1rem;
}

.hypothermia-description{
    color: white;
    padding-left: 1rem;
}

#recognize .color-bar{
    margin-bottom: 5rem;
}

/*News stuff*/
.news-item-1of2{
    flex: 1 1 45%;
    background-color: white;
    margin:1rem;

    margin-bottom:2rem;
}

/*media query for mobile ish dimensions*/
@media(max-width: 50em){
    .box{
        flex-flow: column;
    }

    .recent-news-item{
        max-width: 80%;
        align-self: center;
    }
}

.recent-news{
    background-color: #2B2E41;
    color: #FFFFFF;
}

.recent-news-title {
    color: #FFFFFF

}

.recent-news-item{
    background-color: #FFFFFF;
    text-decoration: none;
    margin-bottom: 3rem;
}

.article-text{
    padding-left: 1rem;
    padding-right: 1rem;
}

.news-article-text{
    padding-left: 3rem;
    padding-right: 3rem;
}

.news-thumbnail-image{
    object-fit: cover;
    width: 100%;
    height: 330px;
}

/*Individual news pages*/
.news-background{
    background-color:white;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top:1rem;
    padding-bottom:1rem;
}

.news-image{
    padding-left:10rem;
    padding-right:10rem;
    padding-top:1rem;
    padding-bottom:1rem;
    width:100%;
    height:75vh;
    object-fit: cover;
}
@media(max-width:900px){
    .news-image{
        padding-left:1rem;
        padding-right:1rem;
    }
}