@font-face {
    font-family: 'the_bold_fontbold';
    src: url('../fonts/theboldfont-webfont.woff2') format('woff2'),
         url('../fonts/theboldfont-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
h1, h2, h3, h4,
.headline-style-1 h1 {
    font-family: 'the_bold_fontbold', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* make section photos fill their container */
.photo-container { overflow: hidden; }
.photo-container .background-image-holder { height: 100%; top: 0; }
.photo-container .background-image-holder img.background-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* full-width photo bands — opt-in per section via .photo-band */
.photo-band .photo-container {
    position: relative;
    float: none;
    width: 100%;
    max-width: 100%;
    height: 480px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
}
.photo-band .photo-container .background-image-holder {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
.photo-band .row .columns {
    width: 100%;
    max-width: 100%;
    float: none;
}
@media only screen and (max-width: 640px) {
    .photo-band .photo-container { height: 260px; }
}

/* bands follow the photo's shape instead of a fixed height */
.photo-band .photo-container { height: auto; aspect-ratio: 16 / 9; }
@media only screen and (max-width: 640px) {
    .photo-band .photo-container { height: auto; aspect-ratio: 4 / 3; }
}

/* beat responsive.css line 64/69 */
.photo-band .photo-container,
.no-pad.photo-band .photo-container { width: 100% !important; display: block !important; }
.photo-band .photo-container.left-align { display: block !important; }
.no-pad.photo-band .medium-6 { width: 100% !important; }

/* force stacking, desktop and mobile */
.photo-band .photo-container {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
}
.photo-band .row { position: relative; clear: both; }
@media only screen and (max-width: 640px) {
    .photo-band .photo-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        display: block !important;
    }
    .photo-band .photo-container.left-align,
    .photo-band .photo-container.right-align { display: block !important; }
}
