html, body, #primaryArea, #primaryR1, #videoplayeriframe { height: 100%; width: 100%; overflow: hidden } .m-video-player.full-width { padding-left: 0; padding-right: 0 } .m-video-player.expand-preview-image .x-sfa-video img { width: 100%; display: inline-block } .x-sfa-video { display: flex; height: 100%; overflow: hidden; width: 100% } .x-sfa-video img { height: 100%; margin: auto; display: block } .x-sfa-video .f-video-trigger section div button { background: rgba(0, 0, 0, 0.6) !important } .x-sfa-video:focus { outline: 3px solid #FFF } .c-video-player { cursor: pointer } a.x-sfa-video .c-video-player { position: relative; padding-bottom: 56.25% !important; padding-top: 30px !important; height: 0; overflow: hidden; min-width: 320px } a.x-sfa-video .f-core-player { position: absolute; top: 0; left: 0; width: 100%; height: 100% } @media screen and (-ms-high-contrast: active) { .c-video-player .f-video-trigger section { background: rgba(255, 255, 255, 0) } } @media screen and (-ms-high-contrast: black-on-white) { .c-video-player .f-video-trigger section { background: rgba(255, 255, 255, 0) } } .c-video-player { display: inline-block; margin: 0; height: 100%; width: 100%; min-width: 320px; direction: ltr; position: relative; overflow: hidden; box-sizing: border-box !important } .c-video-player.m-ambient-video { min-width: 0px } .c-video-player.m-ambient-video video::-webkit-media-controls-panel, .c-video-player.m-ambient-video video::-webkit-media-controls-play-button, .c-video-player.m-ambient-video video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none } .c-video-player .f-core-player, .c-video-player .f-video-player { height: 100%; width: 100% } .c-video-player .f-core-player video, .c-video-player .f-core-player object { display: block; min-width: 100%; width: 100%; max-height: 100%; height: 100%; background: #000 } .c-video-player .f-core-player video[aria-hidden="true"], .c-video-player .f-core-player object[aria-hidden="true"] { display: block !important } .c-video-player .f-core-player video::-webkit-media-text-track-display { top: 5px !important } .c-video-player .f-core-player .f-video-player div { display: none } .c-video-player .f-core-player .f-video-player .vjs-player { display: block; height: 100%; width: 100% } .c-video-player .f-core-player .f-video-player .vjs-player div.amp-content-title { display: none !important } .c-video-player .f-core-player .f-video-player .vjs-player button { display: none } .c-video-player .f-core-player .f-video-player .vjs-player div:first-child { display: block; height: 100%; width: 100% } .c-video-player .f-core-player .f-video-player .vjs-player div:first-child video { display: block; height: 100%; width: 100% } .c-video-player .f-core-player .f-play-pause-hide { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px } .c-video-player .f-core-player .f-play-pause-hide:focus { clip: auto; width: auto; height: auto; overflow: auto } .c-video-player .f-core-player .f-play-pause-show { position: absolute; clip: auto; width: auto; height: auto } .c-video-player .f-core-player .f-play-pause-show:focus { clip: auto; width: auto; height: auto } .c-video-player .f-core-player .f-video-cc-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 56 } .c-video-player .f-core-player .f-video-cc-overlay.f-overlay-slidein { bottom: 44px } .c-video-player .f-core-player .f-screen-reader { position: absolute; left: -99999px; height: 1px; width: 1px; overflow: hidden } .c-video-player .f-core-player .f-interactive-back-button { background-color: #8E8E8E; border: 2px solid transparent; display: inline-block; position: absolute; bottom: -64px; left: 34px; height: 48px; width: 48px; line-height: 44px; border-radius: 50%; text-align: center; overflow: hidden; top: 34px; font-size: 20px; z-index: 2 } .c-video-player .f-core-player .f-interactive-back-button[aria-hidden="true"] { display: none } .c-video-player .f-core-player .f-interactive-back-button:hover { background-color: #404040 } .c-video-player .f-core-player .f-interactive-back-button:focus { border: 2px solid #FFF } .c-video-player .f-core-player .f-interactive-back-button:active { background-color: #4B4B4B } .c-video-player .f-core-player .f-interactive-overlay { background-size: cover; color: #FFF; overflow: hidden; padding: 10px; position: absolute } .c-video-player .f-core-player .f-interactive-overlay div { position: relative; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50% } .c-video-player .f-core-player .f-interactive-overlay .f-overlay-info { float: left; left: 25%; width: 50% } .c-video-player .f-core-player .f-interactive-overlay .f-overlay-info .c-headline { font-size: 24px; font-weight: 400; padding: 0; margin: 0 } @media (max-width: 767px) { .c-video-player .f-core-player .f-interactive-overlay .f-overlay-info .c-headline { font-size: 20px } } .c-video-player .f-core-player .f-interactive-overlay .f-overlay-info p { font-size: 13px; padding: 0; margin: 5px 0; font-weight: 400 } .c-video-player .f-core-player .f-interactive-overlay .f-overlay-link { float: right; width: 25% } .c-video-player .f-core-player .f-interactive-overlay .f-overlay-link .c-action-trigger { left: 50%; margin: 0; position: absolute; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .c-video-player .f-core-player .f-interactive-overlay .f-overlay-link .c-action-trigger:hover { text-decoration: none; background: rgba(255, 255, 255, 0.1) } .c-video-player .f-core-player .f-interactive-overlay .f-overlay-link .c-action-trigger:focus { border: 2px dashed #FFF } .c-video-player .f-core-player .f-interactive-overlay .f-overlay-link .c-action-trigger:active { text-decoration: none; background: rgba(255, 255, 255, 0.2); border: 0 } .c-video-player .f-core-player .f-interactive-overlay-customhtml { padding: 0 } .c-video-player .f-core-player .f-overlay-minimizeMaximize { background-color: rgba(255, 255, 255, 0.6); border: 2px solid transparent; position: absolute; border-radius: 50%; height: 32px; width: 32px; font-size: 9px; overflow: hidden; display: inline-block; z-index: 2 } .c-video-player .f-core-player .f-overlay-minimizeMaximize:hover { text-decoration: none; background: rgba(255, 255, 255, 0.1) } .c-video-player .f-core-player .f-overlay-minimizeMaximize:focus { border: 2px dashed #FFF; outline: 2px dashed #FFF } .c-video-player .f-core-player .f-overlay-minimizeMaximize:active { background: rgba(255, 255, 255, 0.2) } .c-video-player .f-core-player .f-overlay-minimize-upperthird { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); bottom: 10px; right: 10px } .c-video-player .f-core-player .f-overlay-minimize-lowerthird { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); right: 10px } .c-video-player .f-core-player .f-overlay-maximize-upperthird { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); top: 40px; right: 10px } .c-video-player .f-core-player .f-overlay-maximize-lowerthird { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); bottom: 80px; right: 10px } .c-video-player .f-core-player .interactive-graphic { pointer-events: none } .c-video-player .f-core-player .interactive-fullscreen { height: 100%; width: 100%; max-height: 1080px; padding: 0; top: 0; left: 0 } .c-video-player .f-core-player .interactive-upper { top: 0; height: 20%; max-height: 200px; width: 100% } .c-video-player .f-core-player .interactive-lower { bottom: 0; height: 20%; max-height: 200px; width: 100% } .c-video-player .f-core-player .interactive-right { right: 0; height: 100%; width: 20%; max-width: 200px } .c-video-player .f-core-player .interactive-left { left: 0; height: 100%; width: 20%; max-width: 200px } @keyframes interactive-overlay-slidein-upper { from { top: -20% } to { top: 0 } } @keyframes interactive-overlay-slideout-upper { from { top: 0 } to { top: -20% } } @keyframes interactive-overlay-slidein-right { from { right: -20% } to { right: 0 } } @keyframes interactive-overlay-slideout-right { from { right: 0 } to { right: -20% } } @keyframes interactive-overlay-slidein-left { from { left: -20% } to { left: 0 } } @keyframes interactive-overlay-slideout-left { from { left: 0 } to { left: -20% } } .c-video-player .f-core-player .interactive-upper.f-interactive-overlay-slidein { animation: 0.5s forwards interactive-overlay-slidein-upper } .c-video-player .f-core-player .interactive-right.f-interactive-overlay-slidein { animation: 0.5s forwards interactive-overlay-slidein-right } .c-video-player .f-core-player .interactive-left.f-interactive-overlay-slidein { animation: 0.5s forwards interactive-overlay-slidein-left } .c-video-player .f-core-player .interactive-upper.f-interactive-overlay-slideout { animation: 0.5s forwards interactive-overlay-slideout-upper } .c-video-player .f-core-player .interactive-right.f-interactive-overlay-slideout { animation: 0.5s forwards interactive-overlay-slideout-right } .c-video-player .f-core-player .interactive-left.f-interactive-overlay-slideout { animation: 0.5s forwards interactive-overlay-slideout-left } .c-video-player .f-core-player .f-age-gate-dialogue { background: #000000; min-height: 400px; z-index: 71 } .c-video-player .f-core-player .f-age-gate-dialogue>div { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .c-video-player .f-core-player .f-age-gate-dialogue [class^="c-heading"] { padding-top: 0; padding-bottom: 12px; display: block !important } .c-video-player .f-core-player .f-age-gate-dialogue [class^="c-heading"] [class^="c-subheading"] { padding-bottom: 12px } .c-video-player .f-core-player .f-age-gate-dialogue .c-button { min-height: 38px } .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu>a, .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu>button { margin-right: -8px; min-width: 125px } .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu>a+ul, .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu>button+ul { max-width: 125px } .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu:first-of-type>a, .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu:first-of-type>button { min-width: 250px } .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu:first-of-type>a+ul, .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu:first-of-type>button+ul { max-width: 250px } .c-video-player .f-core-player .f-age-gate-dialogue .c-update-dark-theme { background: #000000 } .c-video-player .f-core-player .f-age-gate-dialogue .c-hide-menu-item { display: none } .c-video-player .f-core-player .f-age-gate-dialogue .c-font-weight-override { font-weight: 200 } .c-video-player .f-core-player .f-age-gate-dialogue form .c-select-menu, .c-video-player .f-core-player .f-age-gate-dialogue fieldset .c-select-menu { margin-top: 4px; margin-right: 8px } @media only screen and (max-width: 539px) { .c-video-player .f-core-player .f-age-gate-dialogue { padding: 0 } .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu { display: block } .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu:first-of-type>a { min-width: 200px } .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu:first-of-type>a+ul { max-width: 200px } .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu>a { width: 200px } .c-video-player .f-core-player .f-age-gate-dialogue .c-select-menu>a+ul { max-width: 200px } .c-video-player .f-core-player .f-age-gate-dialogue .c-button { display: block } } .c-video-player .f-core-player .f-progress { direction: ltr; width: 100%; width: calc(100% - 288px); display: inline-block; margin-bottom: 5px } .c-video-player .f-core-player .f-progress div { background: rgba(255, 255, 255, 0.4) } .c-video-player .f-core-player .f-progress div button:hover, .c-video-player .f-core-player .f-progress div button:active { background: #FFF } .c-video-player .f-core-player .f-progress div button:hover span, .c-video-player .f-core-player .f-progress div button:active span { display: block } .c-video-player .f-core-player .f-progress div button:focus { outline: 2px dashed #FFF; outline-offset: 2px } .c-video-player .f-core-player .f-progress div button { background: #0067B8 } .c-video-player .f-core-player .f-progress div button span { font-size: 13px; width: auto; top: -48px; background: #000; color: #FFF } @media (max-width: 767px) { .c-video-player .f-core-player .f-progress div button span { font-size: 12px } } .c-video-player .f-core-player .f-video-controls { font-size: 24px; width: 100%; height: 44px; background: #000; position: absolute; bottom: 0; left: 0; display: inline-block; z-index: 61; text-align: left } @media (max-width: 767px) { .c-video-player .f-core-player .f-video-controls { font-size: 20px } } .c-video-player .f-core-player .f-video-controls span { font-size: 13px } @media (max-width: 767px) { .c-video-player .f-core-player .f-video-controls span { font-size: 12px } } .c-video-player .f-core-player .f-video-controls button:not([role="slider"]) { color: #FFF; background: transparent; border: 0 } .c-video-player .f-core-player .f-video-controls .f-seek-bar { display: none } .c-video-player .f-core-player .f-video-controls button.c-glyph { width: 38px; height: 38px; vertical-align: middle; top: 2px } .c-video-player .f-core-player .f-video-controls button.c-glyph:hover, .c-video-player .f-core-player .f-video-controls button.c-glyph:focus { color: #FFF } .c-video-player .f-core-player .f-video-controls button.c-glyph:focus { outline: 2px dashed #FFF } .c-video-player .f-core-player .f-video-controls button.c-glyph:active { color: rgba(255, 255, 255, 0.4) } .c-video-player .f-core-player .f-video-controls button.c-glyph.f-live { width: auto } .c-video-player .f-core-player .f-video-controls .f-time { font-size: 13px; color: rgba(255, 255, 255, 0.6); padding-right: 12px; position: relative; top: -3px } @media (max-width: 767px) { .c-video-player .f-core-player .f-video-controls .f-time { font-size: 12px } } .c-video-player .f-core-player .f-video-controls .f-time .f-current-time, .c-video-player .f-core-player .f-video-controls .f-time .f-duration { color: #FFF } .c-video-player .f-core-player .f-play-pause[aria-hidden="false"], .c-video-player .f-core-player .f-live[aria-hidden="false"], .c-video-player .f-core-player .f-options[aria-hidden="false"], .c-video-player .f-core-player .f-full-screen[aria-hidden="false"], .c-video-player .f-core-player .f-reactive[aria-hidden="false"] { display: inline-block } .c-video-player .f-core-player .f-play-pause span, .c-video-player .f-core-player .f-live span, .c-video-player .f-core-player .f-options span, .c-video-player .f-core-player .f-full-screen span, .c-video-player .f-core-player .f-reactive span { font-size: 13px; border: 1px solid transparent; color: #FFF; position: absolute; min-height: 36px; min-width: 44px; text-align: left; background: #000; padding: 8px } @media (max-width: 767px) { .c-video-player .f-core-player .f-play-pause span, .c-video-player .f-core-player .f-live span, .c-video-player .f-core-player .f-options span, .c-video-player .f-core-player .f-full-screen span, .c-video-player .f-core-player .f-reactive span { font-size: 12px } } .c-video-player .f-core-player .f-play-pause span[aria-hidden="false"], .c-video-player .f-core-player .f-live span[aria-hidden="false"], .c-video-player .f-core-player .f-options span[aria-hidden="false"], .c-video-player .f-core-player .f-full-screen span[aria-hidden="false"], .c-video-player .f-core-player .f-reactive span[aria-hidden="false"] { display: block; bottom: 49px } .c-video-player .f-core-player .f-play-pause { margin-left: 3px; margin-top: 3px; padding-top: 1px } .c-video-player .f-core-player .f-live { padding-left: 8px; padding-right: 8px; font-weight: 400; font-size: 15px } .c-video-player .f-core-player .f-live:before { font-family: "MWF-MDL2"; content: "" } .c-video-player .f-core-player .f-live-current:before { font-weight: 600; color: #E81123 } .c-video-player .f-core-player .f-live-current:hover:before, .c-video-player .f-core-player .f-live-current:focus:before { color: rgba(232, 17, 35, 0.6) } .c-video-player .f-core-player .f-live-current:active:before { color: rgba(232, 17, 35, 0.4) } .c-video-player .f-core-player .f-full-screen { display: inline-block; position: absolute; top: 1px; right: 2px } .c-video-player .f-core-player .f-full-screen span { right: 0 } .c-video-player .f-core-player .f-reactive { position: absolute; right: 90px; margin: 1px 0 } .c-video-player .f-core-player .f-volume-button { display: inline-block; position: absolute; right: 46px } .c-video-player .f-core-player .f-volume-slider { position: absolute; width: 44px; min-height: 120px; bottom: 46px; right: 46px; background: #000; border: 2px solid rgba(255, 255, 255, 0.6); z-index: 66 } .c-video-player .f-core-player .f-volume-slider:after { display: block; height: 11px; background: transparent; position: absolute; content: ""; bottom: -12px; width: 100% } .c-video-player .f-core-player .f-volume-slider[data-show="false"] { position: absolute !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; width: 1px !important; height: 1px !important; border: 0 !important; padding: 0 !important; margin: 0 !important; display: block !important } .c-video-player .f-core-player .f-volume-slider .c-slider { width: 92px; height: 92px } .c-video-player .f-core-player .f-volume-slider .c-slider .f-volume-bar { display: none } .c-video-player .f-core-player .f-volume-slider .c-slider div { background: rgba(255, 255, 255, 0.4); left: -25px; top: 45px; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } .c-video-player .f-core-player .f-volume-slider .c-slider div button:hover, .c-video-player .f-core-player .f-volume-slider .c-slider div button:active { background: #FFF } .c-video-player .f-core-player .f-volume-slider .c-slider div>span { background: #0067B8 } .c-video-player .f-core-player .f-volume-slider .c-slider div button { background: #0067B8; z-index: 66 } .c-video-player .f-core-player .f-volume-slider .c-slider div button span { font-size: 13px; width: auto; min-width: 40px; min-height: 32px; top: 38px; left: -16px; background: #000; color: #FFF; border: 2px solid rgba(255, 255, 255, 0.6); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg) } @media (max-width: 767px) { .c-video-player .f-core-player .f-volume-slider .c-slider div button span { font-size: 12px } } .c-video-player .f-core-player .f-volume-slider .c-slider div button:focus { outline: 2px dashed #FFF; outline-offset: 2px } .c-video-player .f-core-player .f-options { position: absolute; top: 1px; right: 90px; margin: 1px 0px 1px 12px } .c-video-player .f-core-player .f-options span { left: 0 } .c-video-player .f-core-player .f-player-context-menu { position: absolute; min-width: 160px; background: #000; border: 1px solid rgba(255, 255, 255, 0.6); overflow-x: hidden; overflow-y: hidden; direction: ltr; outline: 0 solid transparent; z-index: 66 } .c-video-player .f-core-player .f-player-context-menu .c-list { margin: 0; min-width: 160px; list-style: none } .c-video-player .f-core-player .f-player-context-menu .c-list li { height: 40px; margin-top: 0; margin-left: 0; padding: 0; display: block; border-top: 2px solid rgba(255, 255, 255, 0.6) } .c-video-player .f-core-player .f-player-context-menu .c-list li:first-child { border-top: 0 } .c-video-player .f-core-player .f-player-context-menu .c-list li:focus { border: 2px dashed #FFF } .c-video-player .f-core-player .f-player-context-menu .c-list li button { font-size: 13px; color: #FFF; display: block; height: 100%; padding: 0px 12px; text-align: left; width: 100%; margin: 0px } @media (max-width: 767px) { .c-video-player .f-core-player .f-player-context-menu .c-list li button { font-size: 12px } } .c-video-player .f-core-player .f-player-context-menu .c-list li button:focus { border: 2px dashed #FFF } .c-video-player .f-core-player .f-player-context-menu .c-list li button:hover { text-decoration: none; background: rgba(255, 255, 255, 0.1) } .c-video-player .f-core-player .f-player-menu { position: absolute; bottom: 46px; right: 90px; min-width: 160px; background: #000; border: 1px solid rgba(255, 255, 255, 0.6); overflow-x: hidden; overflow-y: auto; direction: ltr; outline: 0 solid transparent; z-index: 66 } .c-video-player .f-core-player .f-player-menu .c-list { margin: 0; min-width: 160px; list-style: none } .c-video-player .f-core-player .f-player-menu .c-list li { display: block; height: 40px; margin-top: 0; margin-left: 0; padding: 0; border-top: 2px solid rgba(255, 255, 255, 0.6) } .c-video-player .f-core-player .f-player-menu .c-list li:first-child { border-top: 0 } .c-video-player .f-core-player .f-player-menu .c-list li ul { display: none; left: 160px } .c-video-player .f-core-player .f-player-menu .c-list li ul li { position: relative } .c-video-player .f-core-player .f-player-menu .c-list li button { font-size: 13px; color: #FFF; display: block; height: 100%; padding: 8px 12px; text-align: left; width: 100% } @media (max-width: 767px) { .c-video-player .f-core-player .f-player-menu .c-list li button { font-size: 12px } } .c-video-player .f-core-player .f-player-menu .c-list li button .c-image { padding-right: 12px; display: inline-block; width: 28px } .c-video-player .f-core-player .f-player-menu .c-list li button.c-action-trigger { margin-top: 0 } .c-video-player .f-core-player .f-player-menu .c-list li button.c-action-trigger:before { margin-left: 1px; margin-bottom: 5px } @media screen and (-ms-high-contrast: active) { .c-video-player .f-core-player .f-player-menu .c-list li button.c-action-trigger { outline: 1px solid; outline-color: #FFF } } @media screen and (-ms-high-contrast: black-on-white) { .c-video-player .f-core-player .f-player-menu .c-list li button.c-action-trigger { outline: 1px solid; outline-color: #000 } } @media screen and (-ms-high-contrast: white-on-black) { .c-video-player .f-core-player .f-player-menu .c-list li button.c-action-trigger { outline: 1px solid; outline-color: #FFF } } .c-video-player .f-core-player .f-player-menu .c-list li button.c-glyph[data-video-selectable] { color: rgba(255, 255, 255, 0.8) } .c-video-player .f-core-player .f-player-menu .c-list li button.glyph-check-mark[data-video-selectable] { color: #FFF } .c-video-player .f-core-player .f-player-menu .c-list li button.glyph-check-mark[data-video-selectable]:before { float: right; margin-right: 0 } .c-video-player .f-core-player .f-player-menu .c-list li button.glyph-chevron-right { color: #FFF } .c-video-player .f-core-player .f-player-menu .c-list li button.glyph-chevron-right:before { float: right; margin-right: 0 } .c-video-player .f-core-player .f-player-menu .c-list li button:hover { text-decoration: none; background: rgba(255, 255, 255, 0.1) } .c-video-player .f-core-player .f-player-menu .c-list li button:focus { border: 2px dashed #FFF } .c-video-player .f-core-player .f-player-menu .c-list li button:active { text-decoration: none; background: rgba(255, 255, 255, 0.2); border: 0 } .c-video-player .f-core-player .f-player-menu[aria-hidden="true"] { visibility: hidden } .c-video-player .f-core-player .f-player-menu[aria-hidden="false"] { visibility: visible } .c-video-player .f-core-player .c-progress { left: 50%; margin: 0; position: absolute; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .c-video-player .f-core-player .f-error-message { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.6); color: #FFF; text-align: center } .c-video-player .f-core-player .f-error-message .c-heading, .c-video-player .f-core-player .f-error-message .c-paragraph { font-size: 15px } .c-video-player .f-core-player .f-error-message .c-heading { font-weight: 600 } .c-video-player .f-core-player .f-error-message .c-heading:before { font-size: 34px; font-family: "MWF-MDL2"; content: ""; display: block; margin-bottom: 20px; font-weight: 400 } .c-video-player .f-core-player .f-error-message>div { position: absolute; top: calc(50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 48px; width: 100% } @media only screen and (min-width: 1400px) { .c-video-player .f-core-player .f-error-message>div { padding: 56px } } @keyframes slidein { from { bottom: -44px } to { bottom: 0 } } @keyframes slideout { from { bottom: 0 } to { bottom: -44px } } .c-video-player .f-core-player .f-slidein { animation: 0.5s forwards slidein } .c-video-player .f-core-player .f-slideout { animation: 0.5s forwards slideout } .c-video-player .f-external-player { height: 100%; width: 100% } .c-video-player .f-play-pause-trigger { left: 50%; margin: -24px 0 0 -24px; position: absolute; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } @media only screen and (max-width: 768px) { .c-video-player .f-play-pause-trigger { top: 15% } } .c-video-player .f-play-pause-trigger span { left: 0px; top: -38px; font-size: 13px; border: 1px solid transparent; color: #FFF; position: absolute; min-height: 36px; min-width: 44px; text-align: left; background: #000; padding: 8px } .d_xbox .c-video-player .f-play-pause-trigger span { display: none } @media (max-width: 767px) { .c-video-player .f-play-pause-trigger span { font-size: 12px } } .c-video-player .f-play-pause-trigger button { background: rgba(0, 0, 0, 0.6); border-radius: 50%; color: #FFF; margin: 0; padding: 0 } .c-video-player .f-play-pause-trigger button.c-action-trigger.c-glyph[aria-label] { font-size: 24px; font-family: "MWF-MDL2"; content: ""; margin: 0; padding-right: 0; line-height: 13px; height: 48px; width: 48px; color: #FFF; overflow: hidden } @media (max-width: 767px) { .c-video-player .f-play-pause-trigger button.c-action-trigger.c-glyph[aria-label] { font-size: 20px } } .c-video-player .f-play-pause-trigger button.c-action-trigger.c-glyph[aria-label]:hover { color: rgba(255, 255, 255, 0.8) } .c-video-player .f-play-pause-trigger button.c-action-trigger.c-glyph[aria-label]:focus { background: rgba(0, 0, 0, 0.6) } .c-video-player .f-end-poster-image { border: solid 1px transparent; margin: 0; position: absolute; top: 0; left: 0; height: auto; width: 100% } .c-video-player .f-video-trigger { margin: 0; position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100% } .c-video-player .f-video-trigger .f-mask-20 { background-color: rgba(0, 0, 0, 0.2) } @media screen and (-ms-high-contrast: active) { .c-video-player .f-video-trigger .f-mask-20 { background-color: transparent } } .c-video-player .f-video-trigger .f-mask-40 { background-color: rgba(0, 0, 0, 0.4) } @media screen and (-ms-high-contrast: active) { .c-video-player .f-video-trigger .f-mask-40 { background-color: transparent } } .c-video-player .f-video-trigger div { text-align: center; position: absolute; z-index: 1; height: 100%; width: 100%; color: #FFF; background-color: rgba(0, 0, 0, 0.2) } .c-video-player .f-video-trigger div:hover { background-color: rgba(0, 0, 0, 0.4) } .c-video-player .f-video-trigger div span { top: calc(50% - 62px); left: calc(50% - 24px); font-size: 13px; border: 1px solid transparent; color: #FFF; position: absolute; min-height: 36px; min-width: 44px; text-align: left; background: #000; padding: 8px } @media (max-width: 767px) { .c-video-player .f-video-trigger div span { font-size: 12px } } .c-video-player .f-video-trigger div .c-heading { font-size: 24px; margin-bottom: 12px; font-weight: 600; padding: 0; margin: 0 auto; max-width: 60% } @media (max-width: 767px) { .c-video-player .f-video-trigger div .c-heading { font-size: 20px } } .c-video-player .f-video-trigger div p { font-size: 13px; padding: 0; max-width: 33.33333%; margin: 0 auto } .c-video-player .f-video-trigger div a, .c-video-player .f-video-trigger div button { background: rgba(0, 0, 0, 0.6); border-radius: 50%; color: #FFF; margin: 0; padding: 0; position: relative } @media (-ms-high-contrast: active) { .c-video-player .f-video-trigger div a, .c-video-player .f-video-trigger div button { background-color: ButtonFace !important; color: ButtonText !important } } .c-video-player .f-video-trigger div a.c-action-trigger.c-glyph[aria-label], .c-video-player .f-video-trigger div button.c-action-trigger.c-glyph[aria-label] { font-size: 24px; font-family: "MWF-MDL2"; content: ""; margin: 0 auto; padding-right: 0; line-height: 13px; height: 48px; width: 48px; color: #FFF; outline: none; top: calc(50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 0; right: 0 } @media (max-width: 767px) { .c-video-player .f-video-trigger div a.c-action-trigger.c-glyph[aria-label], .c-video-player .f-video-trigger div button.c-action-trigger.c-glyph[aria-label] { font-size: 20px } } @media (-ms-high-contrast: active) { .c-video-player .f-video-trigger div a.c-action-trigger.c-glyph[aria-label], .c-video-player .f-video-trigger div button.c-action-trigger.c-glyph[aria-label] { border-color: ButtonText !important } } .c-video-player .f-video-trigger div a.c-action-trigger.c-glyph[aria-label]:hover, .c-video-player .f-video-trigger div button.c-action-trigger.c-glyph[aria-label]:hover { color: rgba(255, 255, 255, 0.8) } @media (-ms-high-contrast: active) { .c-video-player .f-video-trigger div a.c-action-trigger.c-glyph[aria-label]:hover, .c-video-player .f-video-trigger div button.c-action-trigger.c-glyph[aria-label]:hover { border-color: Highlight !important; color: Highlight !important } } .c-video-player .f-video-trigger div a.c-action-trigger.c-glyph[aria-label]:focus, .c-video-player .f-video-trigger div button.c-action-trigger.c-glyph[aria-label]:focus { background: rgba(0, 0, 0, 0.6); outline: 2px dashed #FFF } @media (-ms-high-contrast: active) { .c-video-player .f-video-trigger div a.c-action-trigger.c-glyph[aria-label]:focus, .c-video-player .f-video-trigger div button.c-action-trigger.c-glyph[aria-label]:focus { background: ButtonFace; outline: 2px solid ButtonText; outline-offset: 0 } } .c-video-player .f-video-trigger[class*="f-mask"].theme-light>section { background: #FFF } .c-video-player .f-video-trigger[class*="f-mask"].theme-dark>section { background: #000 } .c-video-player .f-video-background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: black } .c-video-player+.m-media-gallery { padding: 24px 0 0 } .c-video-player [aria-hidden="true"] { display: none !important } .m-ambient-video video { background: 0 0 !important } .c-dialog.x-lightbox-video { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 800 } .c-dialog.x-lightbox-video .glyph-cancel+div { background: none } .c-dialog.x-lightbox-video div[role="dialog"] { position: relative; left: 0%; top: 0%; -ms-transform: none; -webkit-transform: none; transform: none; -webkit-transform: none; -ms-transform: none; max-width: 100%; height: 100% !important; width: 100%; margin: 0; max-height: 100%; background: transparent; overflow: visible !important } .c-dialog.x-lightbox-video div[role="dialog"]>button { font-size: 34px; top: 36px !important; right: 36px !important; display: block; z-index: 10000 } .c-dialog.x-lightbox-video div[role="dialog"]>button:before { margin: 0px !important; vertical-align: top !important } .c-dialog.x-lightbox-video div[role="dialog"] .player_wrapper { overflow: hidden; position: fixed; display: block; left: 50%; top: 50%; max-height: 760px; min-width: 296px; width: 100%; margin: 0 auto; max-width: 1066px; padding: 0; height: auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform: translate(-50%, calc(-50% - calc(1px/2))) } .c-dialog.x-lightbox-video div[role="dialog"] .player_wrapper[aria-hidden="true"] { display: block } @media only screen and (max-width: 1226px) and (min-width: 768px) { .x-lightbox-video>div>div>div { position: relative; padding-bottom: 47.25%; height: 0 } }