@keyframes liveStoryPostLoadingBar0 {
    0%,
    100%,
    5% {
        opacity: 0.1;
    }
    10%,
    80% {
        opacity: 0.2;
    }
}

@keyframes liveStoryPostLoadingBar1 {
    0%,
    100%,
    15% {
        opacity: 0.1;
    }
    20%,
    80% {
        opacity: 0.2;
    }
}

@keyframes liveStoryPostLoadingBar2 {
    0%,
    100%,
    25% {
        opacity: 0.1;
    }
    30%,
    80% {
        opacity: 0.2;
    }
}

@keyframes liveStoryPostLoadingBar3 {
    0%,
    100%,
    35% {
        opacity: 0.1;
    }
    40%,
    80% {
        opacity: 0.2;
    }
}

@keyframes liveStoryPostLoadingBar4 {
    0%,
    100%,
    45% {
        opacity: 0.1;
    }
    50%,
    80% {
        opacity: 0.2;
    }
}

.live-story-post {
    border-bottom: q(1) solid #e6e6e6;
}

.live-story-post__wrapper {
    padding: q(16);
}

.live-story-post__tags {
    border-top: q(1) solid #e6e6e6;
    padding: q(16);
}

.live-story-post--hidden,
.live-story-post--hidden + .ad-slot-wrapper,
.live-story-post--hidden-for-lazy-loading {
    display: none;
}

.live-story-post__timestamp {
    font-size: q(12);
    display: block;
    margin-bottom: q(8);
    line-height: 1.25;
    font-weight: 500;
    min-height: q(15);
}

.live-story-post__timestamp.active {
    color: var(--theme-primary);
}

.live-story-post__timestamp.stale {
    color: #6e6e6e;
}

.live-story-post__timestamp.placeholder {
    animation-name: liveStoryPostLoadingBar0;
    height: q(12);
    width: 32%;
}

.live-story-post__headline {
    font-size: q(24);
    margin: 0 0 q(8);
    line-height: q(36);
    font-weight: 700;
    color: #262626;
}

.live-story-post__headline.placeholder {
    animation-name: liveStoryPostLoadingBar1;
    height: q(24);
    width: 70%;
}

.live-story-post__byline {
    color: #8c8c8c;
    display: block;
    font-size: q(12);
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 q(16);
}

.live-story-post__byline.placeholder {
    animation-name: liveStoryPostLoadingBar2;
    height: q(12);
    width: 20%;
}

.live-story-post_placeholder {
    border: q(1) solid #e6e6e6;
    border-radius: q(4);
    margin-bottom: q(32);
    padding: q(16);
}

.live-story-post_placeholder .placeholder {
    margin-bottom: q(12);
    background: #6e6e6e;
    border-radius: q(2);
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-timing-function: linear;
}

.live-story-post__share-links-placeholder {
    animation-name: liveStoryPostLoadingBar4;
    width: 100%;
    height: q(20);
    margin-bottom: q(16);
}

.live-story-post__content-placeholder {
    animation-name: liveStoryPostLoadingBar3;
    width: 100%;
    height: 200px;
    margin-bottom: q(16);
}

.live-story-post .twitter-tweet,
.live-story-post .twitter__tweet {
    margin: q(30) auto;
}

.live-story-post .facebook .fb-post > span {
    display: block;
    margin: 0 auto;
}

.live-story-post .instagram iframe {
    display: block !important;
    margin: 0 auto !important;
}

.live-story-post .video-resource {
    width: 100%;
}

.live-story-post .video-resource .video-resource__cover {
    display: block;
}

.live-story-post .video-resource .video-resource__cover.hide {
    display: none;
}

.layout-live-story__top .video-resource_padded-description__credit {
    font-weight: 400;
}

@media screen and (min-width: 960px) {
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__content
        .video-resource {
        width: 100%;
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post {
        border: q(1) solid #e6e6e6;
        border-radius: q(4);
        margin-bottom: q(32);
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__tags,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__wrapper {
        padding: q(24);
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__headline {
        font-size: q(30);
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__headline.placeholder {
        height: q(30);
    }
}

@media screen and (max-width: 959px) {
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__content
        .video-resource {
        width: 100%;
    }
}

@media screen and (min-width: q(480)) and (max-width: 959px) {
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobil-app.kiln-edit-mode
        )
        .live-story-post__content
        > .video-resource
        .video-resource__playhead,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobil-app.kiln-edit-mode
        )
        .live-story-post__content
        > .video-resource
        .video-resource__playhead.spinner::before {
        width: 8Q (2);
        height: 8Q (2);
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobil-app.kiln-edit-mode
        )
        .live-story-post__content
        > .video-resource
        .video-resource__chyron {
        font-size: q(24);
        line-height: q(30);
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobil-app.kiln-edit-mode
        )
        .live-story-post__content
        > .video-resource
        .video-resource__runtime {
        font-size: q(14);
    }
}

@media screen and (max-width: 479px) {
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__content
        > .video-resource
        .video-resource__playhead,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__content
        > .video-resource
        .video-resource__playhead.spinner::before {
        width: q(64);
        height: q(64);
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__content
        > .video-resource
        .video-resource__chyron {
        font-size: q(16);
        font-weight: 700;
        line-height: q(20);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .live-story-post__content
        > .video-resource
        .video-resource__runtime {
        font-size: q(12);
        line-height: q(16);
    }
}

.underscored .article__content > .image,
.underscored .article__main > .image__lede .image {
    border-bottom: 0;
    padding-bottom: 0;
}

.underscored .article__content > .image .image__credit,
.underscored .article__main > .image__lede .image .image__credit {
    padding-bottom: 0;
}

.card:not(:only-child) .underscored:empty {
    min-height: q(24);
    margin: q(4) 0 0;
    padding: 0;
}

@media screen and (min-width: 960px) {
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .image__caption {
        margin-top: q(4);
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        ).underscored
        .article__content
        > .image--eq-large
        .image__container,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        ).underscored
        .article__content
        > .image--eq-large
        .image__dam-img,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        ).underscored
        .article__main
        > .image__lede
        .image--eq-large
        .image__container,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        ).underscored
        .article__main
        > .image__lede
        .image--eq-large
        .image__dam-img {
        border-radius: q(8);
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        ).underscored
        .article__content
        > .image--eq-small:not(.image--eq-large)
        .image__container,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        ).underscored
        .article__content
        > .image--eq-small:not(.image--eq-large)
        .image__dam-img,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        ).underscored
        .article__main
        > .image__lede
        .image--eq-small:not(.image--eq-large)
        .image__container,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        ).underscored
        .article__main
        > .image__lede
        .image--eq-small:not(.image--eq-large)
        .image__dam-img {
        border-radius: q(4);
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .underscored
        .card:not(:only-child)
        .image__credit:empty {
        min-height: q(24);
        margin-top: q(4);
        padding: 0;
    }
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .image__related-content.related-content__image
        .image {
        border: 0;
        margin: 0;
        padding: 0;
    }
}

@media screen and (min-width: q(480)) {
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .paragraph-elevate,
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .paragraph-elevate
        a {
        font-size: var(--theme-paragraph__font-size--from-small);
        line-height: var(--theme-paragraph__line-height--from-small);
    }
}
