@font-face {
    font-family: 'Unify Serif';
    src: url('https://www.gannett-cdn.com/ads/fonts/unify-serif-semibold-italic/UnifySerif_SBdIt.woff') format('woff'),
        url('https://www.gannett-cdn.com/ads/fonts/unify-serif-semibold-italic/UnifySerif_SBdIt.woff2') format('woff2');
    font-style: italic;
    font-weight: normal;
    font-display: fallback;
}

/* Add ad specific styles below */
.paramount-bleed,
.paramount-bleed * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.paramount-bleed {
    background: rgb(247,246,241);
}

.paramount-safe {
    z-index: -2;
}

img {
    border: 0;
}

.click-cover {
    display: block;
    height: 100%;
    left: 0;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 100%;
    z-index: 9;
}

/* mobile-check-pixel ========================================================= */
.mobile-check-pixel {
    bottom: 0;
    display: none;
    height: 1px;
    position: absolute;
    top: 0;
    width: 1px;
}

.device-phone .mobile-check-pixel {
    display: block;
}

/* Outer Container ============================================================ */
.outer-container {
    bottom: 0;
    color: rgb(64,64,64);
    font-family: 'Unify Serif', serif;
    font-size: 10px;
    font-style: italic;
    height: 100%;
    left: 0;
    line-height: 1.2;
    margin: auto;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 10;
}

.overlay {
    bottom: auto;
    display: block;
    height: auto;
    left: 0;
    margin: 0 auto;
    max-width: 646px;
    min-width: 250px;
    position: absolute;
    top: 5%;
    width: 20%;
    z-index: 11;
}

/* Fallback Background ================================================================ */
.fallback-background {
    background-image: url(https://www.gannett-cdn.com/ads/adsolutions/2022/05/marketing_paramount/images/fallback_landscape.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: 0;
    display: block;
    height: auto;
    left: 0;
    margin: auto;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.4s;
    width: 100%;
}

.device-phone .fallback-background {
    background-image: url(https://www.gannett-cdn.com/ads/adsolutions/2022/05/marketing_paramount/images/fallback_portrait.jpg);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Video ================================================================ */
.video-player-container {
    bottom: 0;
    display: block;
    height: 100%;
    left: 0;
    margin: auto;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 10;
}
.native-article_link .video-player-container {
    height: 90%;
    width: 93%;
}

.video-player {
    background: rgb(0247,246,241);
    display: block;
    height: 100%;
    left: -0.5%;
    overflow: hidden;
    position: absolute !important;
    top: 0;
    width: 101%;
    z-index: 1;
}
.device-phone .video-player {
    height: 100.5%;
}

.video-poster {
    display: block;
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    transition: opacity 0.4s;
    width: 100%;
    z-index: 9;
}

.video-click-cover {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

/* Logo Container ================================================================ */
.logo-container {
    align-items: center;
    display: flex;
    height: 15%;
    justify-content: flex-start;
    left: 11%;
    margin: 0;
    opacity: 0;
    position: absolute;
    right: auto;
    top: 82%;
    white-space: nowrap;
    width: 48%;
    z-index: 20;
}
.native-article_link .logo-container {
    left: 13.4%;
    top: 79%;
}
.device-phone .logo-container {
    height: 5%;
    justify-content: center;
    left: auto;
    top: 91.4%;
    width: 100%;
}

.logo-container.default-version {
    justify-content: flex-end;
    margin-right: 2%;
}
.device-phone .logo-container.default-version {
    justify-content: center;
    margin-right: 0;
}

/* Publisher Logo Container ======================= */
.publisher-logo-container {
    bottom: 0;
    display: inline-block;
    height: 28%;
    left: 0;
    margin: auto 0;
    max-width: 50% !important;
    min-width: 10%;
    position: relative;
    top: 0;
    width: auto;
}
.device-phone .publisher-logo-container {
    height: 100%;
    width: 100%;
}
.default-version .publisher-logo-container,
.device-phone .default-version .publisher-logo-container {
    display: none;
}

.usatoday .publisher-logo-container {
    height: 45%;
    min-width: 14%;
}
.device-phone .usatoday .publisher-logo-container {
    height: 100%;
    min-width: 14%;
}

/* Publisher Logo ======================= */
.publisher-logo {
    display: inline-block;
    height: 100%;
    min-width: 10%;
    max-width: 100%;
    transition: all 0.2s;
    width: auto;
}
.device-phone .publisher-logo {
    bottom: 0;
    height: 57%;
    left: 0;
    margin: auto 0;
    max-width: 100%;
    position: absolute;
    top: 0;
}
.device-phone .usatoday .publisher-logo {
    height: 90%;
}

.publisher-logo-endorsement {
    display: none;
}

/* Divider ======================= */
.divider {
    border-right: 1px solid rgb(64,64,64);
    display: inline-block;
    height: 40%;
    opacity: 0.4;
    margin: 0 3%;
    vertical-align: middle;
    width: 1px;
    z-index: 10;
}
.device-phone .divider {
    height: 100%;
}

/* Campaign Logo ======================= */
.campaign-logo {
    background-image: url(https://www.gannett-cdn.com/ads/adsolutions/2022/05/marketing_paramount_act_phase1/images/campaign-logo-2.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    display: inline-block;
    height: 45%;
    left: 0;
    margin: auto 0;
    position: relative;
    top: 0;
    width: 44%;
}
.device-phone .campaign-logo {
    height: 100%;
    width: 34%;
}

/* Headline ================================================================ */
.headline {
    align-items: center;
    color: rgb(64,64,64);
    display: flex;
    height: 23%;
    font-size: 2.6em;
    justify-content: flex-start;
    left: 13%;
    opacity: 0;
    position: absolute;
    top: 57%;
    width: 47%;
    z-index: 20;
}
.native-article_link .headline {
    height: 20%;
    font-size: 2.4em;
    left: 15%;
    width: 45%;
}
.headline.long-text {
    left: 12%;
    font-size: 2em;
    width: 49.8%;
}
.native-article_link .headline.long-text {
    font-size: 1.9em;
}

.device-phone .headline {
    height: 15%;
    font-size: 1.5em;
    left: 11%;
    text-align: center;
    top: 48.4%;
    width: 77%;
}
.device-phone .headline.long-text {
    font-size: 1.3em;
}

/* Common ================================================================ */
#play {
    opacity: 0;
}

#mute,
#unmute {
    opacity: 0;
}

.fade-out {
    opacity: 0;
}
.device-phone .fade-out {
    opacity: 0;
}

.fade-in {
    transition: opacity 0.6s;
    opacity: 1;
}
.device-phone .fade-in {
    transition: opacity 0.6s;
    opacity: 1;
}

.hide,
.device-phone .hide {
    opacity: 0;
}