body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 20pt;
    margin-left: auto;
    margin-right: auto;
    display: none; /* hide body to prevent a FOUC */

    max-width: 1400px;
}
.body-dark {
    background-color: #3c3c3c;
    color: white;
}

/* Set standard header alignment properties */
h1, h2, h3 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* Stop video containers being misaligned by text-align: center */
h1 .video-container, h2 .video-container, h3 .video-container {
    text-align: left;
}
/* Set standard header widths */
h1 {
    width: 90%;
}
h2 {
    width: 75%;
}
h3 {
    width: 60%;
}
@media (max-width: 1000px) {
    h1 {
        width: 100%;
    }
    h2 {
        width: 85%;
    }
    h3 {
        width: 70%;
    }
}

p, ul {
    font-weight: 300;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: justify;
    line-height: 1.4;
}
p, ul {
    width: 95%;
    font-size: 16pt;
}
@media (min-width: 401px) {
    p, ul {
        width: 85%;
        font-size: 16pt;
    }
}
@media (min-width: 1001px) {
    p, ul {
        width: 85%;
        max-width: 850px;
        font-size: 18pt;
    }
}

/* Specific image embed sizes for standard <p> tags
   We need to define this explicitly so that portrait images don't domainate the screen.
   Don't need to redefine vieo stuff, as videos are usually widescreen
*/
p .image-container .image-embed {
    display: block;
    max-width: 100%;
    max-height: 350px; /* this might be too narrow for standard images - looks weird next to 100% video */
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Generic container for embedded images
   Will expand to the width of the container, rather that sizing based on the
   image dimensions.
   This is useful for hero images, where we want them to be the width of the page.
*/
.image-container {
    position: relative;
    width: 100%; /* expand to fill container */

    /* make the outlines of blurred images sharp - only affects H1 objects */
    overflow: hidden;
}
.image-container .image-embed {
    width: 100%;
}
.image-container .image-preview {
    filter: blur(8px);
}

/* Generic container for embedded videos
   Will expand to the width of the container - the height cannot be specified
   using this method.
   Therefore useful for hero images, but not for situations where the height needs
   to be managed.
*/
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
/* iframe container for video */
.video-container .video-embed {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Generic text overlay for images and video */
.media-overlay {
    position: absolute;
    width: 100%;

    font-size: 72pt;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.34);
    text-align: center;
    bottom: 14%; /* using bottom rather than top means that multi-line titles sit nicely */
    z-index: 1; /* unnecessary for images, used for video */
}
/* Size classes for main, lower, and upper overlay text */
.overlay-main {
    display: block;
    text-align: center;
    font-size: 72pt;

    /* Has max-width so it can overlow onto multiple lines */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
/* Not expecting these to overlow onto multiple lines */
.overlay-below {
    display: block;
    font-size: 30pt;
    margin-top: 16px;
}
.overlay-above {
    display: block;
    font-size: 22pt;
    text-transform: uppercase;
    margin-bottom: 16px;
}

@media (max-width: 1000px) {
.media-overlay {
    bottom: 10%;
}
.overlay-main {
    font-size: 9vw;
}
.overlay-below {
    font-size: 4vw;
    margin-top: 5px;
}
.overlay-above {
    margin-bottom: 0px;
    font-size: 4vw;
}
}

/* Layout for JavaScript-assisted image blocks */
.image-block {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1000px) {
    .image-block {
        width: 100%;
    }
}
.image-block-row {
    white-space: nowrap;
    overflow: hidden; /* note that this hides possible problems */
    margin-top: 2px;
}
.image-block-row .image-container, .image-block-row .video-container {
    display: inline;
    margin: 0 1px 0 1px;
}
@media (min-width: 401px) {
    .image-block-row {
        margin-top: 4px;
    }
    .image-block-row .image-container, .image-block-row .video-container {
        margin: 0 2px 0 2px;
    }
}
@media (min-width: 1001px) {
    .image-block-row {
        margin-top: 8px;
    }
    .image-block-row .image-container, .image-block-row .video-container {
        margin: 0 4px 0 4px;
    }
}

/* Normally we want absolute position on videos so we can overlay text, but not here */
.image-block-row .video-container .video-embed {
    position: relative;
}

hr {
    border-width: 1px;
    width: 50%;
    margin-top: 50px;
    margin-bottom: 50px;
    border-style: solid;
    color: #a7a7a7;
}

#width-widget {
    font-size: 25pt;
    background-color: #e2e2e2;
    border-width: 4px;
    border-style: solid;
    border-color: #353535;
    padding: 0 7px 0 7px;
    border-radius: 35px;
    display: none;
}
#width-widget-container {
    position: fixed;
    right: 1%;
    bottom: 2%;
    width: 64px; /* not sure why this is required */
}