.reveal-overlay .reveal.video-promo {
    max-width: 95%;
    margin: 0 auto;
    min-height: 25rem;
    height: 25rem
}

@media print,
screen and (min-width: 40em) {
    .reveal-overlay .reveal.video-promo {
        width: 90%;
        height: 34.375rem
    }
}

@media screen and (min-width: 85.375em) {
    .reveal-overlay .reveal.video-promo {
        width: 70%;
        height: 37.5rem
    }
}

.reveal-overlay iframe {
    background: #000;
    border: none;
    max-width: 100%;
    width: 100%;
    height: 21.875rem
}

@media print,
screen and (min-width: 40em) {
    .reveal-overlay iframe {
        height: 31.25rem
    }
}

@media screen and (min-width: 85.375em) {
    .reveal-overlay iframe {
        height: 34.375rem
    }
}

.blog-section .video-promo {
    display: block;
    width: 100%;
    height: 37.5rem;
    position: relative;
    background-size: cover;
    background-position: center center;
    border-bottom: 1px solid #ffebd5
}

.blog-section .video-promo .play-button {
    height: 4.125rem;
    width: 4.125rem;
    border-radius: 50%;
    background: #ee7f00;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center
}

@media print,
screen and (min-width: 40em) {
    .blog-section .video-promo .play-button {
        height: 6.25rem;
        width: 6.25rem
    }
}

.blog-section .video-promo .play-button:hover,
.blog-section .video-promo .play-button:focus {
    background-color: #d57100;
    color: #e6e6e6
}

.blog-section .video-promo .play-button [class^=icon-],
.blog-section .video-promo .play-button [class*=" icon-"] {
    font-size: 1.875rem;
    line-height: 4.125rem;
    color: #fff;
    padding-left: .25rem
}

@media print,
screen and (min-width: 40em) {

    .blog-section .video-promo .play-button [class^=icon-],
    .blog-section .video-promo .play-button [class*=" icon-"] {
        line-height: 6.25rem;
        font-size: 2.5rem
    }
}

.blog-section .video-promo .info-card {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 3.125rem;
    min-height: 15.625rem;
    background: #fff;
    padding: 1.625rem 1.75rem 1.875rem 1.5rem;
    overflow: hidden
}

@media print,
screen and (min-width: 40em) {
    .blog-section .video-promo .info-card {
        padding: 1.625rem 1.875rem 1.875rem 2.5rem
    }
}

.blog-section .video-promo .info-card h3 {
    font-family: "NNNittiGrotesk-Heading";
    font-size: 2rem;
    color: #ee7f00;
    word-break: break-word
}

@media print,
screen and (min-width: 40em) {
    .blog-section .video-promo .info-card h3 {
        font-size: 3.125rem
    }
}

.blog-section .video-promo .info-card h3 p {
    line-height: 1.1
}

.blog-section.__mixed .video-promo {
    min-height: 40.625rem;
    height: 100%
}