body, header, div, p, h1, h2, h3, h4 {
   margin: 0;
    padding: 0;
    font-family: "Open Sans", "Arial", sans-serif;
}
h1, h2, h3, h4 {
    font-family: 'Merriweather', "Times New Roman", serif;
}
header h1, header h2 {
    color: white;
}
header h1 {
    font-size: 48px;
}
header h2 {
    font-size: 36px;
    margin-bottom: 30px;
}
header span {
    text-align: center;
    margin-top: 10px;
    font-size: 24px;
    width: 160px;
    
    padding: 9px;
    border: solid 1px white;
}
header span a:link, header span a:visited {
    color: white;
}
     

.banner {    
   width: 100%;          
   -webkit-filter: brightness(30%) grayscale(90%);
    filter: brightness(30%) grayscale(90%);
}
.banner--title {
    text-align: center;
    position: absolute;
    left:20%;
    top: 20%;

}

article {
   margin-left: 200px; 
    postion: relative;
}
article h2 {
     border-bottom: solid 1px black;
    width: 1170px;
    margin-bottom: 12px;
}

.highlights {
     margin-top: 40px;   
    
}

.highlights--container {
    float: left;
    width: 580px;
    margin-right: 10px;
}

.highlights--media {
     float: left;
    width: 285px;
    margin-right: 10px;
}

.highlights--button {
     background-color:   #FF9800;
    float:right;
    display: block;
    padding: 4px;
    margin-top: 10px;
}
a.highlights--button:link {
     text-decoration: none;
    color: white;
}


.mosaic {
    
    position: relative;
    top: 230px;
}

.mosaic-item {
     position: absolute;   
}

.mosaic--a {
    width: 580px;
    left: 0;
    top: 0;
}
.mosaic--b {
    width: 285px;
    left: 590px;
    top: 0;
}
.mosaic--c {
    width: 285px;
    left: 590px;
    top: 200px;
}
.mosaic--d {
    width: 285px;
    left: 885px;
    top: 0px;
}

.mosaic--e {
    width: 285px;
    left: 0;
    top: 400px;
}
.mosaic--f {
    width: 285px;
    left: 295px;
    top: 400px;
}
.mosaic--g {
    width: 285px;
    left: 590px;
    top: 400px;
}
.mosaic--h {
    width: 285px;
    left: 885px;
    top: 400px;
}
.mosaic--i {
    width: 285px;
    left: 0px;
    top: 800px;
}
.mosaic--j {
    width: 580px;
    left: 295px;
    top: 600px;
}
.mosaic--k {
    width: 285px;
    left: 885px;
    top: 800px;
}