html, body { height: 100%; margin: 0; font-family: "Overpass", "Helvetica Neue", "Lucida Grande", sans-serif; letter-spacing: 0em; font-size: 20px;line-height: 1.4; font-weight: 400; background-color: #222; color: #fff; }
body { display: flex; flex-direction: column; }

#container { flex: 1 0 auto; }

.imgset { padding: 2rem 4rem; border-bottom: 2px solid blue; width: 80%; }
/*.imgset:nth-child(odd) { background-color: #ede6e0; }*/
.title, .subtitle, .desc { font-weight: 700; font-size: 1.8rem; text-align: center; margin-bottom: 1rem; color: #fff; }
.subtitle { font-size: 1.5rem; font-weight: 400; margin-bottom: 1rem; }
.desc { color: #999; font-size: 1.2rem; font-weight: 400; margin-bottom: 2rem; }
.grey { color: #999; }
.imgset img { width: 100%; margin-bottom: 1rem }
.imgset img.square { width: 49%; }
.bold { font-weight: 700 }

a { text-decoration: none; }
a:hover { color: #fff}
a.active { text-decoration: underline; color: white; }
.blue { color: blue; }
.white { color: #fff; }
.grey { color: #999; }

.info { padding: 1rem 3rem; margin-bottom: 3rem; }
.header { padding: 1rem 3rem; }
.header li { display: inline-block; margin-right: 2rem;}
.header li:last-child { margin-right: 0rem; }
.block { display: flex; flex-wrap: nowrap;  flex-direction: row; padding-bottom: 0; padding: 0 2rem;  }
.imgblock {  position: relative; margin: 10px;  flex-grow:1; flex-basis: 0;  }
.imgblock:hover .img-overlay { display: flex; }
.imgblock img { display: block; width: 100%;}
.img-overlay { display: none; position: absolute; left: 0; top: 0; justify-content: center; align-items: center; font-size: 2rem; color: #222; background-color:rgba(70, 70, 70, 0.8);  }

.scrapbook { padding: 0 2rem; columns: 4 auto; -webkit-columns: 4 auto; column-gap: 1rem; -webkit-column-gap: 1rem;}
.scrapbook .item { width: 700px; background: #333; color: white; margin: 0 1rem 1rem 0; display: block; width: 100%; text-align: left; }
.scrapbook img { width: 100%; display: block;   }
.scrapbook .text { padding: 1rem; }

.single-block { padding: 0 3rem; margin-bottom: 2rem; display: flex; justify-content: center; align-items: flex-start; }
.single-block .item, .footer .item { flex: 1 0 0; padding: 0 2rem 0 0;}
.single-block .item:last-child, .footer .item:last-child { padding: 0 0 0 0; }
.single-block .item img {display: block}
.single-info span.credit { padding-right: 0.5rem; }

.sb-l { width: 100%}
.sb-m { width: 80%}
.sb-s { width: 50%}

.iframe-wrapper { position: relative; height: 0; }
.iframe-wrapper, iframe { width: 100%;}
iframe, .cover-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0;}

.info-text { font-size: 1.4rem; }

.footer { flex-shrink: 0; border-top: 1px solid white; padding: 1rem 3rem; margin-top: 4rem; }

.footer-container { display: flex;  }
.footer-container .item:last-child { text-align: right; }

@media only screen and (max-width: 900px){
    html, body {font-size: 16px;}
    .block { flex-wrap: wrap; flex-direction: column; }
    .single-block  { padding: 0 0rem; margin-bottom: 1rem; }
    .single-block .item { padding: 0 1rem 0 0; }
    .scrapbook {padding: 0 0; columns: 3 auto; -webkit-columns: 3 auto;}
    .sb-m { width: 90%}
    .sb-s { width: 60%}
}

@media only screen and (max-width: 500px){
    html, body {font-size: 13px;}
    .header { padding: 1rem 1rem; }
    .info { padding: 1rem 1rem; margin-bottom: 3rem; }
    .block { padding: 0 0;}
    .imgblock { margin: 0px 0px 10px 0;}
    .single-block  { padding: 0 0rem; flex-wrap: wrap; margin-bottom: 1rem;}
    .scrapbook {padding: 0 0; columns: 2 auto; -webkit-columns: 2 auto;}
    .single-block .item { padding: 0 0 1rem 0; flex: 1 1 auto; }
    .sb-m { width: 100%}
    .sb-s { width: 80%}
    .footer  { padding: 1rem 1rem; }
    .footer-container { display: block;  }
    .footer-container .item:last-child { text-align: left; }
}