/*!*******************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-3.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[3]!./styles/entry/blockarticle.scss ***! \*******************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Layout */ /* Colours */ /* Autogen vars via build:palettes */ /* 1. Screen Sizes */ /* Topics */ /* Cards */ /* xs 320px small-mobile sm 576px mobile md 768px small-tablet lg 992px tablet xl 1200px small-desktop xxl 1400px desktop */ /* stylelint-disable function-no-unknown */ /* html-documentation

Inline

breaking


live


commercial


exclusive


revealed


premium

Over Image

breaking


live


commercial


exclusive


revealed


premium
*/ .mar-label { background-color: transparent; text-transform: uppercase; padding: 3px 10px 3px 10px; display: inline-block; /** Commenting this out for now as none on figma &__updated-label { &--over-image { } } **/ } .mar-label__text { font-family: var(--global-font); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); cursor: default; line-height: 120%; } .mar-label__dot { display: inline-block; width: 10px; height: 10px; border-radius: 100%; margin: 7px; margin-left: 3px; } .mar-label.mar-label--inline { display: inline; } .mar-label.mar-label--inline .mar-label__text { position: relative; } .mar-label.mar-label--inline .mar-label__text::after { content: ' | '; } .mar-label.mar-label--inline.mar-label__breaking-label { color: #9D0D13; } .mar-label.mar-label--inline.mar-label__breaking-label .mar-label__text::after { color: #9D0D13; } .mar-label.mar-label--inline.mar-label__live-label { color: #9D0D13; position: relative; margin-right: 5px; } .mar-label.mar-label--inline.mar-label__live-label .mar-label__text::after { content: none; } .mar-label.mar-label--inline.mar-label__live-label .mar-label__dot { background-color: #9D0D13; position: absolute; top: 50%; margin-top: -5px; } .mar-label.mar-label--inline.mar-label__sponsored-label { color: #2A652D; } .mar-label.mar-label--inline.mar-label__sponsored-label .mar-label__text::after { color: #2A652D; } .mar-label.mar-label--inline.mar-label__exclusive-label { color: #8E1D84; } .mar-label.mar-label--inline.mar-label__exclusive-label .mar-label__text::after { color: #8E1D84; } .mar-label.mar-label--inline.mar-label__custom-callout-label, .mar-label.mar-label--inline.mar-label__updated-label, .mar-label.mar-label--inline.mar-label__community-contribution-label { color: #000000; } .mar-label.mar-label--inline.mar-label__custom-callout-label .mar-label__text::after, .mar-label.mar-label--inline.mar-label__updated-label .mar-label__text::after, .mar-label.mar-label--inline.mar-label__community-contribution-label .mar-label__text::after { color: #000000; } .mar-label.mar-label--inline.mar-label__content-level-tagging-label { color: !important; } .mar-label.mar-label--over-image { text-decoration: none; height: 22px; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 5px; left: 0; padding: 3px 10px 3px 10px; font-size: var(--font-size-xs); } .mar-label.mar-label--over-image.mar-label__breaking-label { color: #FFFFFF; background-color: #9D0D13; } .mar-label.mar-label--over-image.mar-label__live-label { color: #FFFFFF; background-color: #9D0D13; padding: 3px 25px 3px 10px; } .mar-label.mar-label--over-image.mar-label__live-label .mar-label__text::after { content: none; } .mar-label.mar-label--over-image.mar-label__live-label .mar-label__dot { background-color: #FFFFFF; top: 50%; margin-top: -5px; right: 4px; } .mar-label.mar-label--over-image.mar-label__sponsored-label { color: #2A652D; background-color: #F2F2F3; } .mar-label.mar-label--over-image.mar-label__exclusive-label { color: #FFFFFF; background-color: #8E1D84; } .mar-label.mar-label--over-image.mar-label__custom-callout-label, .mar-label.mar-label--over-image.mar-label__updated-label, .mar-label.mar-label--over-image.mar-label__community-contribution-label { color: #FFFFFF; background-color: #595959; } .mar-label.mar-label--over-image.mar-label__content-level-tagging-label { color: #FFFFFF; } .social-bar { background: #FFFFFF; display: flex; align-items: center; justify-content: flex-end; gap: 10px 0; } .social-bar--centered { justify-content: center; } .social-bar__text { display: none; font-family: var(--global-font); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); color: #333333; cursor: default; } @media (min-width: 576px) { .social-bar__text { display: block; margin-right: 10px; } } .social-bar__button { background: no-repeat; outline: none; border: none; border-radius: 50%; font-size: 30px; padding: 0; margin-right: 10px; } .social-bar__button:focus { outline: none; } .social-bar__button--with-icon { width: 30px; height: 30px; font-size: 20px; } @media (min-width: 768px) { .social-bar__button.mobile-hide { display: none; } } .social-bar button, .social-bar a { cursor: pointer; } .social-bar__icon .comments-icon { margin: 0 0 5px 0; min-width: 20px; } .social-bar__whatsapp-link { display: inherit; } @media (min-width: 576px) { .social-bar__whatsapp-link { display: none; } } .social-bar__fb-messenger-link { display: inherit; } @media (min-width: 992px) { .social-bar__fb-messenger-link { display: none; } } .social-bar .bg-blue-sky { background: #1185FE; color: #FFFFFF; } .social-bar .bg-blue-sky a { color: #FFFFFF; } .social-bar .bg-blue-sky svg { margin-top: 5px; } .social-bar .bg-fb { background: transparent; bottom: 5px; color: #FFFFFF; font-size: 30px; position: relative; } .social-bar .bg-fb svg { margin-top: 5px; } .social-bar .bg-twitter { background: #000000; color: #FFFFFF; } .social-bar .bg-twitter svg { margin-top: 5px; } .social-bar .bg-whatsapp { background: #2FD64B; color: #FFFFFF; } .social-bar .bg-whatsapp svg { margin-top: 4px; } .social-bar .bg-googleplus { background: #DD4B39; color: #FFFFFF; } .social-bar .bg-googleplus svg { margin-top: 5px; } .social-bar .bg-fb-messenger { color: #55ACEE; height: 30px; display: inline-flex; } .social-bar .bg-linkedin { background: #2877B8; color: #FFFFFF; } .social-bar .bg-email { display: flex; align-items: center; justify-content: center; background: var(--main-colour); color: #FFFFFF; } .social-bar .bg-phone { background: var(--main-colour); color: #FFFFFF; } .social-bar .bg-tray { background: var(--main-colour); color: #FFFFFF; } .social-bar__share-tray .social-bar__tray-link { display: inline-block; } .social-bar__share-tray .social-bar__link { display: none; } @media (min-width: 576px) { .social-bar__share-tray .social-bar__tray-link { display: none; } .social-bar__share-tray .social-bar__link { display: inline-block; } } .author-details { display: flex; align-items: center; margin: 0; } .author-details__img { margin-right: 5px; } .author-details__img img { border-radius: 50%; min-width: 60px; min-height: 60px; height: 60px; width: 60px; object-fit: cover; } .author-details__name-container { display: flex; flex-flow: column wrap; align-items: flex-start; font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); font-family: var(--global-font); color: #333333; cursor: default; font-style: normal; } @media (min-width: 1400px) { .author-details__name-container { display: grid; margin-left: 15px; } } .author-details__name-container .author-name { font-family: var(--global-font); margin-right: 3px; } .author-details__name-container .twitter-button .twitter-link { font-size: var(--font-size-xxs); font-weight: var(--font-weight-regular); color: #000000; position: relative; padding: 0 0 2px; line-height: var(--standard-line-height); background: linear-gradient(to right, var(--accent-colour), var(--accent-colour)), linear-gradient(to right, #9DA0A4, #9DA0A4, #9DA0A4); background-size: 100% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 200ms; width: auto; } .author-details__name-container .twitter-button .twitter-link:hover, .author-details__name-container .twitter-button .twitter-link a:active, .author-details__name-container .twitter-button .twitter-link a:focus { background-size: 0 2px, 100% 2px; text-decoration: none; } .author-details__name-container .twitter-button .twitter-link:visited { color: #595959; } .author-details__name-container .job-title { font-weight: var(--font-weight-regular); font-size: var(--font-size-xxs); font-family: var(--global-font); color: #595959; } .author-details__name-container.author-no-image { margin-left: 0; } .author-details__timestamp { font-size: 11px; font-weight: var(--font-weight-semibold); font-family: var(--global-font); color: #333333; text-transform: uppercase; } /* html-documentation

Numbered List

  1. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.
  2. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.
  3. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.
  4. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.
  5. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.

Numbered List With Custom Numbers

  1. 14 Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.
  2. 16 Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.
  3. 19 Gelsasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.
  4. 21 Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.
  5. 22 Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more. Gelasio 16px: Regular, No min. This can be any length headline but less is more.

Vertical List Response

*/ .mar-list-numbered { list-style: none; counter-reset: list-number; padding: 0; margin: 20px; font-family: var(--header-font) !important; } .mar-list-numbered__item-custom-number { font-family: var(--body-font); font-weight: var(--font-weight-regular); font-size: var(--font-size-m); color: #333333; display: flex; align-items: flex-start; justify-content: flex-start; min-width: 255px; } .mar-list-numbered__item-custom-number a { color: #333333; } .mar-list-numbered__item-custom-number:not(:last-child) { margin-bottom: 10px; } .mar-list-numbered__item-custom-number::before { content: none !important; } .mar-list-numbered__item-custom-number .mar-list-numbered__custom-number { font-family: var(--body-font); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); color: var(--alt-colour); margin-right: 15px; padding-top: 5px; } .mar-list-numbered li, .mar-list-numbered__item { counter-increment: list-number; font-family: var(--header-font) !important; font-family: var(--body-font); font-weight: var(--font-weight-regular); font-size: var(--font-size-m); color: #333333; display: flex; align-items: flex-start; justify-content: flex-start; min-width: 255px; } .mar-list-numbered li a, .mar-list-numbered__item a { color: #333333; } .mar-list-numbered li:not(:last-child), .mar-list-numbered__item:not(:last-child) { margin-bottom: 10px; } .mar-list-numbered li::before, .mar-list-numbered__item::before { content: counter(list-number); font-family: var(--header-font) !important; font-family: var(--body-font); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); color: var(--alt-colour); margin-right: 15px; padding-top: 5px; } .mar-list-numbered li.hide-counter::before { content: none; } .mar-list-vertical-response { margin: 0; padding: 0; list-style: none; } .mar-list-vertical-response__item { margin-bottom: 25px; display: flex; justify-content: flex-start; align-items: flex-start; } .mar-list-vertical-response__item::before { padding-right: 0; content: none; } .mar-list-vertical-response__item h3 { margin: 0; } @media (min-width: 768px) { .mar-list-vertical-response__item { margin-bottom: 15px; } } .mar-list-vertical-response__item .mar-label { padding: 0; } .mar-list-vertical-response__item .mar-label:not(.mar-label__live-label.mar-label--inline) { padding-right: 2px; } .mar-list-vertical-response__item .mar-label .mar-label__dot { right: -5px; } .mar-list-vertical-response__item__img-icon { width: 14px; height: 14px; background: rgba(255, 255, 255, 0.9); border-radius: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; padding-right: 15px; } .mar-list-vertical-response__item__img-icon svg { font-size: var(--font-size-s); } .mar-list-vertical-response__item__img-icon path { color: #000000; } .mar-list-vertical-response__item__img-icon svg[data-icon='el:play'] { margin-left: 3px; } .mar-list-vertical-response__item:last-child { margin-bottom: 0; } @media (min-width: 768px) { .mar-list-vertical-response__item:last-child { margin-bottom: 15px; } } /* html-documentation
Loading...
*/ .loader, .loader::after, .loader::before { background: var(--main-colour); animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .loader { color: var(--main-colour); text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; transform: translateZ(0); animation-delay: -0.16s; } .loader.invert { color: var(--accent-colour); } .loader::after, .loader::before { position: absolute; top: 0; content: ''; } .loader::before { left: -1.5em; animation-delay: -0.32s; } .loader::after { left: 1.5em; } @keyframes load1 { 0%, 100%, 80% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } /* html-documentation

Tabs

Most Read Content

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Commented Content

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
*/ .mar-tab__headings { list-style: none; display: flex; justify-content: flex-start; align-items: center; padding: 0; width: -moz-fit-content; width: fit-content; position: relative; margin: 0 20px 24px 0; } .mar-tab__headings::after { content: ''; height: 1px; background-color: #9DA0A4; width: 100%; display: block; position: absolute; bottom: 1px; } .mar-tab__heading-line { display: block; width: 0; height: 4px; background: transparent; z-index: 1; } .mar-tab__heading-link { font-family: var(--body-font); font-size: var(--font-size-l); font-weight: var(--font-weight-bold); color: #000000; margin-top: 15px; text-decoration: none; opacity: 0.6; } .mar-tab__heading-link:hover { text-decoration: none; cursor: pointer; color: #000000; } .mar-tab__heading-real-link { font-family: var(--body-font); font-size: var(--font-size-l); font-weight: var(--font-weight-bold); color: #000000; margin-top: 15px; text-decoration: none; opacity: 0.6; } .mar-tab__heading-real-link:hover { text-decoration: none; cursor: pointer; color: #000000; } .mar-tab__heading-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .mar-tab__heading-item:not(:last-child) { margin-right: 30px; } .mar-tab__heading-item::before { content: none; } .mar-tab__heading-item.mar-tab--active .mar-tab__heading-line { width: 100%; background: var(--accent-colour); z-index: 1; } .mar-tab__heading-item.mar-tab--active .mar-tab__heading-link { color: #000000; opacity: 1; } .mar-tab__heading-item.mar-tab--active .mar-tab__heading-real-link { color: #000000; opacity: 1; } .mar-tab__heading-item h2 { margin-bottom: 0; } .mar-tab__body { display: none; margin: 20px; } .mar-tab__body.mar-tab--active { display: block; } .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-tabs { border-bottom: 1px solid #DEE2E6; } .nav-tabs .nav-item { margin-bottom: -1px; } .nav-tabs .nav-link { display: block; padding: 0.5rem 1rem; border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .nav-tabs .nav-link:hover { border-color: #E9ECEF #E9ECEF #DEE2E6; } .nav-tabs .nav-link.disabled { color: #6C757D; background-color: transparent; border-color: transparent; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #495057; background-color: #FFFFFF; border-color: #DEE2E6 #DEE2E6 #FFFFFF; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; flex-direction: column; align-items: flex-start; justify-content: center; } .admin-links-container { position: absolute; z-index: 8; min-width: 220px; bottom: 35px; right: 0; margin-right: 5px; background: #FFFFFF; min-height: 160px; font-size: var(--font-size-xxs); border-radius: 3px; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5); padding: 10px; display: none; grid-template-columns: 50% 50%; font-family: var(--global-font); } .admin-links-container__actions { float: left; } .admin-links-container__actions div { padding-bottom: 6px; } .admin-links-container__actions div a { color: #188AE2 !important; font-weight: var(--font-weight-bold); font-family: var(--global-font); } .admin-links-container__info { display: flex; flex-direction: column; color: #6C757D; letter-spacing: 0; line-height: 13px; float: right; } .admin-links-container__info div { display: flex; flex-direction: column; padding-bottom: 6px; } .admin-links-container__info div .link-label, .admin-links-container__info div .info-answer { font-family: var(--global-font); } .admin-links-container__info div .link-label { font-weight: var(--font-weight-bold); } .admin-links-container__info div .info-answer { text-transform: capitalize; } .admin-links-container.show { display: grid; gap: 5px; grid-gap: 5px; z-index: 9; } .admin-links-toggler { position: absolute; right: 0; bottom: 0; background-color: #E5F7D3; color: #212529; border-radius: 5px; display: block; padding: 3px 6px; height: 26px; font-size: var(--font-size-xs); margin-top: 1px; margin-right: 5px; cursor: pointer; font-family: var(--global-font); z-index: 3; } .admin-social-stats { display: flex; padding: 0; } .admin-social-stats__item { display: flex; align-items: center; list-style: none; margin: 0 5px; } .admin-social-stats__item svg { margin-right: 3px; } .comments-icon { position: relative; font-family: var(--global-font); font-size: 10px; color: #000000; font-weight: var(--font-weight-regular); margin-top: 4px; text-align: center; margin-left: 10px; float: right; z-index: 1; display: inline-block; background-color: #E6E6E9; border: 1px solid #CCCFD6; border-radius: 2px; padding: 0 5px; line-height: 16px; height: 18px; min-width: 15px; } .comments-icon .count { margin: 0; padding: 0; line-height: 17px; display: flex; justify-content: center; align-items: center; font-size: 10px; min-width: 15px; } .comments-icon::before, .comments-icon::after { position: absolute; border-width: 6px 0 0 10px; border-style: solid; width: 0; transform: rotate(270deg); } .comments-icon::before { content: ''; margin-top: -30px; padding-top: 0; bottom: -2px; left: -2px; border-color: #E6E6E9 transparent; display: block; z-index: 3; } .comments-icon::after { content: ''; border-color: #CCCFD6 transparent; bottom: -5px; left: -3px; z-index: 2; } .comments-icon:hover { text-decoration: none; color: #000000; } .mar-upvote { display: flex; justify-content: center; align-items: center; border: none; background: transparent; cursor: pointer; -webkit-user-select: auto; user-select: auto; } .mar-upvote__icon { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 22px; height: 22px; border-radius: 100%; background: #2EAA6D; } .mar-upvote__icon svg { width: 11px; height: 12px; fill: #FFFFFF; } .mar-upvote__icon svg path { fill: #FFFFFF; } .mar-upvote__count { margin-left: 5px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: #333333; } .mar-upvote:disabled { cursor: none; -webkit-user-select: none; user-select: none; pointer-events: none; } .mar-upvote:disabled .mar-upvote__icon { background: #9DA0A4; } .mar-upvote:disabled .mar-upvote__icon svg { fill: #FFFFFF; } .mar-upvote:disabled .mar-upvote__icon svg path { fill: #FFFFFF; } /* html-documentation

Blockquote

The Island of Dr Monroe

Blockquote class

The Island of Dr MonBlockFace
*/ .mar-blockquote-p, blockquote, .mar-blockquote, blockquote p, .mar-blockquote p { font-size: var(--font-size-m); color: #333333; font-weight: var(--font-weight-semibold); } blockquote, .mar-blockquote { position: relative; padding: 20px 0 20px 30px; } blockquote::before, .mar-blockquote::before { content: '\201C'; font-family: var(--header-font); font-size: 50px; line-height: 40px; color: var(--alt-colour); position: absolute; left: 5px; top: 25px; } blockquote.tiktok-embed::before, .mar-blockquote.tiktok-embed::before { content: ''; left: 0; top: 0; font-size: 0; line-height: 0; } blockquote::after, .mar-blockquote::after { content: ''; } blockquote p, .mar-blockquote p { margin-bottom: 0; } .mar-form-elements__title { margin-bottom: 10px; font-weight: var(--font-weight-bold); } .mar-form-elements__form-group { position: relative; display: block; margin-bottom: 15px; } .mar-form-elements__form-group--inline { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 15px; } .mar-form-elements__form-group:last-child { margin-bottom: 0; } .mar-form-elements__form-control { width: 100%; } .mar-form-elements__form-control:focus, .mar-form-elements__form-control:focus-within, .mar-form-elements__form-control:focus-visible { outline: none; border: 1px solid #188AE2; } .mar-form-elements__form-group-inline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .mar-form-elements__form-check-inline { display: flex; justify-content: flex-start; align-items: center; position: relative; cursor: pointer; padding-left: 25px; margin-right: 5px; white-space: nowrap; } .mar-form-elements__form-check-inline:hover input ~ .mar-form-elements__form-check-inline__form-check-toggle { background-color: #CCCCCC; } .mar-form-elements__form-check-inline:last-child { margin-right: 0; } .mar-form-elements__form-check-toggle { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: transparent; border: 1px solid #CCCFD6; border-radius: 50%; } .mar-form-elements__form-check-toggle::after { content: ''; position: absolute; display: none; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); } .mar-form-elements__form-checkmark-toggle { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: transparent; border: 1px solid #CCCFD6; border-radius: 3px; } .mar-form-elements__form-checkmark-toggle::after { content: ''; position: absolute; display: none; left: 6px; top: 1px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .mar-form-elements__form-group--error .mar-form-elements__form-error { font-family: var(--global-font); font-size: var(--font-size-xs); line-height: 17px; color: #9D0D13; display: block; margin-top: 7px; margin-left: 5px; } .mar-form-elements__form-group--error .mar-form-elements__form-control, .mar-form-elements__form-group--error .mar-form-elements__form-check-toggle, .mar-form-elements__form-group--error .mar-form-elements__form-checkmark-toggle { border: 1px solid #9D0D13; } .mar-form-elements__form-group--error-top { border: 1px solid #9D0D13; padding: 10px; width: 100%; } .mar-form-elements__form-group--error-top .mar-form-elements__form-error { margin-top: 0; margin-bottom: 5px; } .mar-form-elements__form-group--error-top .mar-form-elements__form-error:last-child { margin-bottom: 0; } .mar-form-elements__form-check-input { position: absolute; opacity: 0; cursor: pointer; } .mar-form-elements__form-check-input:checked ~ .mar-form-elements__form-check-toggle { background-color: #188AE2; border: 1px solid #188AE2; } .mar-form-elements__form-check-input:checked ~ .mar-form-elements__form-check-toggle::after { display: block; } .mar-form-elements__form-check-input:checked ~ .mar-form-elements__form-checkmark-toggle { background-color: #188AE2; border: 1px solid #188AE2; } .mar-form-elements__form-check-input:checked ~ .mar-form-elements__form-checkmark-toggle::after { display: block; } .mar-form-elements label, .mar-form-elements__form-check-label { display: block; font-family: var(--header-font); font-size: var(--font-size-s); color: #000000; line-height: 20px; margin-bottom: 5px; } .mar-form-elements__label-title { font-weight: var(--font-weight-bold); display: inline-block; } .mar-form-elements__form-upload-group { position: relative; } .mar-form-elements__form-upload-group input { opacity: 0; width: 0.1px; height: 0.1px; position: absolute; } .mar-form-elements__form-upload-group label { position: relative; padding: 8px 10px; background: #FFFFFF; border: 1px dashed var(--accent-colour); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #595959; font-size: var(--font-size-xs); line-height: 17px; cursor: pointer; transition: transform 0.2s ease-out; width: 100%; height: 85px; } .mar-form-elements__form-upload-group label .plus-icon { background: var(--accent-colour); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 100%; color: #000000; font-size: var(--font-size-m); z-index: 3; transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1); cursor: pointer; } .mar-form-elements__form-upload-group label .text { display: inline-block; z-index: 3; margin-top: 5px; padding: 4px 10px 3px; } .mar-form-elements__form-upload-group label img { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; } .mar-form-elements__form-upload-group.active label { border: 2px solid #2EAA6D; } .mar-form-elements__form-upload-group.dropped label .plus-icon { transform: rotate(135deg); } .mar-form-elements__form-upload-group.dropped label .text { background: rgba(255, 255, 255, 0.5); } .mar-form-elements__form-upload-group.dropped label .text:hover { background: white; } .mar-form-elements__form-upload-group.mar-form-elements__form-group--error label { border: 1px solid #9D0D13; } .mar-form-elements input { display: flex; flex-direction: row; align-items: center; padding: 8px 10px; background: #FFFFFF; border-radius: 2px; border: 1px solid #E6E6E9; box-sizing: border-box; font-family: var(--global-font); font-size: var(--font-size-xs); color: #333333; line-height: 20px; height: 36px; } .mar-form-elements input[type='checkbox'], .mar-form-elements input[type='radio'] { box-sizing: border-box; flex-basis: auto; margin: 0 10px 0 0; padding: 0; width: 22px; height: 22px; cursor: pointer; } .mar-form-elements select { -webkit-appearance: none; appearance: none; border: 1px solid #E6E6E9; width: 100%; padding: 8px 10px; margin: 0; font-family: var(--global-font); font-size: var(--font-size-xs); color: #000000; height: 36px; line-height: 20px; background: url("https://api.iconify.design/ph/caret-down.svg?color=333") no-repeat 98% center/contain; background-size: 16px 16px; } .mar-form-elements select::after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #333333; position: absolute; top: 40%; right: 5px; z-index: 5; } .mar-form-elements select:active { background: url("https://api.iconify.design/ph/caret-up.svg?color=333") no-repeat 98% center/contain; background-size: 16px 16px; } .mar-form-elements textarea { min-height: 85px; } .article-tags { font-size: 11px; font-weight: var(--font-weight-semibold); font-style: normal; line-height: 9.35px; margin-right: 10px; text-transform: uppercase; position: relative; order: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .article-tags::after { content: ''; height: 1px; background: var(--accent-colour); width: 100%; display: block; position: absolute; bottom: 0; } .article-tags a { font-family: var(--global-font); white-space: nowrap; color: #595959; } .article-tags a:hover { color: var(--alt-colour); } .mar-alert { position: relative; padding: 10px 15px; color: #FFFFFF; opacity: 0; transform: opacity 0.35s ease-in-out; } .mar-alert--active { opacity: 1; } .mar-alert--success { background: #2EAA6D; } .mar-alert--info { background: #188AE2; } .mar-alert--error { background: #9D0D13; } .mar-alert__message { color: #FFFFFF; } .mar-alert__close { position: absolute; top: 10px; right: 10px; cursor: pointer; } .stars-label { margin: -10px 0 25px; color: #595959; display: flex; align-items: center; } .stars-label .star-ratings-sprite { background: url("/resources/responsive-static/mds/images/star-sprite-empty.png") repeat-x; font-size: 0; height: 24px; line-height: 0; overflow: hidden; text-indent: -999em; width: 120px; margin: 0; background-size: 24px; background-position-y: 0; } .stars-label .star-ratings-sprite-rating { background: url("/resources/responsive-static/mds/images/star-sprite.png") repeat-x; float: left; height: 24px; display: block; background-size: 24px; } @media (min-width: 768px) { .stars-label .star-ratings-sprite { height: 26px; width: 130px; background-size: 26px; } .stars-label .star-ratings-sprite-rating { height: 26px; background-size: 26px; } } .stars-label__callout { position: absolute; top: 15px; left: 0; background: rgba(0, 0, 0, 0.7); padding: 2px; z-index: 1; } .stars-label__rating-text { padding-left: 5px; font-size: var(--font-size-xs); font-family: var(--global-font); display: none; } @media (min-width: 320px) { .stars-label__rating-text { display: inline; padding-left: 15px; } } @media (min-width: 768px) { .stars-label__rating-text { font-size: var(--font-size-s); } } .breaking-news-alert { position: fixed; bottom: 0; left: 0; background: #9D0D13; width: 100%; z-index: 9999999; padding: 10px 11px 12px; border-top: 1px solid #000000; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .breaking-news-alert:empty { display: none; } .breaking-news-alert--has-ad { bottom: 75px; z-index: 8; } @media (min-width: 768px) { .breaking-news-alert--has-ad { bottom: 0; } } .breaking-news-alert a { text-decoration: none; color: #FFFFFF; } .breaking-news-alert__headline { order: 3; margin-top: 6; grid-column: span 2 / span 2; } .breaking-news-alert__headline h2 { margin: 0; line-height: 20px; } .breaking-news-alert__headline a { font-family: var(--global-font); font-size: var(--font-size-s); font-weight: var(--font-weight-semibold); } .breaking-news-alert__label { text-transform: uppercase; margin: 0; align-self: center; order: 1; } .breaking-news-alert__label a { font-family: var(--global-font); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); } .breaking-news-alert__close { display: flex; justify-content: flex-end; align-items: center; order: 2; } .breaking-news-alert__close svg { font-size: var(--font-size-l); } .breaking-news-alert__close span { font-family: var(--global-font); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); display: block; padding-left: 10px; } @media (min-width: 992px) { .breaking-news-alert { display: flex; justify-content: flex-start; align-items: center; } .breaking-news-alert__headline { order: 2; grid-column: unset; margin-top: 0; } .breaking-news-alert__headline a { font-size: var(--font-size-m); } .breaking-news-alert__label { border-right: 1px solid #FFFFFF; margin-right: 10px; padding-right: 10px; order: 1; } .breaking-news-alert__close { order: 3; margin-left: auto; } } .mar-article .mar-label { padding-left: 10px; padding-right: 10px; } @media (min-width: 768px) { .mar-article .mar-label { padding-left: 0; padding-right: 0; } } .mar-article .mar-label__text { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); } .mar-article__headline { font-family: var(--article-page-headline-font); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: var(--standard-line-height); padding: 0 10px; } @media (min-width: 576px) { .mar-article__headline { font-size: var(--font-size-xxl); } } @media (min-width: 768px) { .mar-article__headline { padding: 0; } } @media (min-width: 992px) { .mar-article__headline { padding: 0; } } .mar-article__info-wrapper { display: flex; align-items: center; padding: 0 10px; margin-bottom: 15px; flex-flow: row wrap; grid-gap: 5px 20px; } @media (min-width: 768px) { .mar-article__info-wrapper { padding: 0; } } .mar-article__timestamp { white-space: nowrap; display: flex; justify-content: flex-start; } .mar-article__article-tags { display: flex; flex-wrap: wrap; gap: 10px; grid-gap: 10px; } @media (max-width: 575px) { .mar-article__article-tags div:nth-child(n+2) { display: none; } } .article-body p { font-family: var(--body-font); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); word-break: break-word; line-height: var(--standard-line-height); margin-bottom: 20px; } .article-body p b, .article-body p strong { font-weight: var(--font-weight-bold); } .article-body a { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: #000000; position: relative; padding: 0; line-height: var(--standard-line-height); background: linear-gradient(to right, var(--accent-colour), var(--accent-colour)), linear-gradient(to right, #9DA0A4, #9DA0A4, #9DA0A4); background-size: 100% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 200ms; } .article-body a:hover, .article-body a a:active, .article-body a a:focus { background-size: 0 2px, 100% 2px; text-decoration: none; } .article-body a:visited { color: #595959; } .article-body blockquote { font-family: var(--body-font); font-size: var(--font-size-s); font-style: italic; font-weight: var(--font-weight-regular); line-height: var(--standard-line-height); padding: 0; margin: 10px 20px 10px 40px; } .article-body blockquote::before { top: 0; left: -41px; } @media (min-width: 576px) { .article-body blockquote { margin: 10px 25px 10px 40px; } } @media (min-width: 768px) { .article-body blockquote { margin: 10px 25px 10px 40px; } } .article-body blockquote p { padding: 0; margin: 0; } .article-body blockquote a { font-weight: var(--font-weight-bold); } .article-body .pa-embed.pa-quote { /* Only targeting .pa-quotes */ margin: 25px 10px 65px; padding: 0; font-weight: bold; width: 100%; } .article-body .pa-embed.pa-quote::before { height: 0; } .article-body .pa-embed.pa-quote::after { height: 0; } .article-body .pa-embed.pa-quote blockquote p { padding: 0 20px 0 25px !important; } .article-body .pa-embed.pa-quote cite em { font-style: normal !important; } .article-body .pa-quote-wrapper::before { height: 0; } .article-body .pa-quote-wrapper::after { height: 0; } .article-body .pa-quote-wrapper p::before { font-size: 50px !important; } .article-body .pa-quote-wrapper p::after { font-size: 0 !important; } .article-body ul { list-style: none; padding: 0 20px 0 0; margin-bottom: 15px; } .article-body ul li { position: relative; font-size: var(--font-size-s); line-height: var(--standard-line-height); padding-left: 28px; margin-bottom: 5px; } .article-body ul li::before { content: '\2022'; position: absolute; display: inline-block; top: 1px; left: 10px; height: 25px; font-size: var(--font-size-xl); color: var(--alt-colour); } .article-body ol { list-style: none; counter-reset: list-number; padding: 0; margin: 20px; margin-left: 0; } .article-body ol li { font-family: var(--body-font); font-weight: var(--font-weight-regular); font-size: var(--font-size-m); color: #333333; display: flex; align-items: flex-start; justify-content: flex-start; min-width: 255px; font-size: var(--font-size-s); line-height: var(--standard-line-height); padding-left: 10px; counter-increment: list-number; margin-bottom: 5px !important; } .article-body ol li a { color: #333333; } .article-body ol li:not(:last-child) { margin-bottom: 10px; } .article-body ol li::before { font-family: var(--body-font); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); color: var(--alt-colour); margin-right: 15px; padding-top: 5px; font-size: var(--font-size-s); font-weight: var(--font-weight-bold); content: counter(list-number) "."; margin-right: 10px; padding-top: 0; } .article-body figure { margin-bottom: 25px; } .article-body .article-first-paragraph { font-family: var(--body-font); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--standard-line-height); margin-bottom: 15px; } .article-body .editor-image-wrapper { margin: 50px auto; width: -moz-fit-content; width: fit-content; overflow: hidden; } .article-body .editor-image-wrapper strong { display: block; font-size: var(--font-size-m); cursor: default; } .article-body .editor-image { margin: auto; width: 100%; object-fit: cover; } .article-body .inline-image-caption { display: block; text-align: left; color: #FFFFFF; font-size: var(--font-size-xs); font-family: var(--body-font); font-weight: var(--font-weight-semibold); margin-bottom: 20px; padding: 10px; background: var(--main-colour); cursor: default; } .article-body .editor-iframe-wrapper { margin: 40px 20px; } .article-body .twitter-tweet { margin: 40px auto !important; } .article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { font-family: var(--body-font); font-weight: var(--font-weight-bold); line-height: var(--standard-line-height); color: #000000; padding-left: 10px; padding-right: 10px; margin-bottom: 5px; } @media (min-width: 768px) { .article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { padding: 0; } } .article-body h1 a, .article-body h2 a, .article-body h3 a, .article-body h4 a, .article-body h5 a, .article-body h6 a { font-size: inherit; font-weight: inherit; font-family: inherit !important; } .article-body h1 { font-size: var(--font-size-l); } @media (min-width: 576px) { .article-body h1 { font-size: var(--font-size-xxl); } } .article-body h2 { font-size: var(--font-size-l); } .article-body h3 { font-size: var(--font-size-m); } .article-body h4 { font-size: var(--font-size-m); font-weight: var(--font-weight-semibold); } .article-body h5 { font-family: var(--body-font); font-size: var(--font-size-s); font-style: italic; margin-bottom: 10px; } @media (min-width: 768px) { .article-body h5 { margin-bottom: 0; } } .article-body hr { border: 1px solid #CCCFD6; text-align: center; position: relative; top: -6px; margin-bottom: 20px; } @media (min-width: 576px) { .article-body hr { top: 0; margin-bottom: 30px; } } .send-us-your-news-cta { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; background: var(--main-colour); padding: 20px 18px; margin-bottom: 30px; } .send-us-your-news-cta h2 { font-family: var(--header-font); font-size: 26px; font-weight: var(--font-weight-bold); color: #FFFFFF; text-align: center; margin-top: 0; } .send-us-your-news-cta h2 em, .send-us-your-news-cta h2 span { font-weight: var(--font-weight-regular); } .send-us-your-news-cta .mar-btn { white-space: nowrap; } .mar-article-image { position: relative; background-color: #000000; min-width: 100%; } .mar-article-image img { background: #CCCFD6; min-width: 100%; z-index: 1; } .mar-article-image__caption { width: 100%; z-index: 2; background: var(--main-colour); padding: 10px; font-size: var(--font-size-xs); font-family: var(--body-font); font-weight: var(--font-weight-semibold); line-height: 16.97px; color: #FFFFFF; } @media (min-width: 768px) { .mar-article-image__caption { padding-left: 10px; padding-right: 10px; } } .mar-article-image__camera-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px 20px; border-radius: 28px; background: rgba(255, 255, 255, 0.8); z-index: 2; cursor: pointer; display: flex; justify-content: center; align-items: center; } .mar-article-image__camera-icon svg { width: 40px; height: 40px; } .mar-article-image__camera-icon-count { margin-left: 5px; margin-top: 5px; font-family: var(--global-font); font-weight: var(--font-weight-bold); font-size: var(--font-size-s); color: #000000; } .mar-article-image .mar-label, .mar-article-image .stars-label { position: absolute; top: 0; left: 0; z-index: 2; } .mar-article-image-gallery { position: relative; } .mar-article-image-gallery__mobile-caption { display: none; position: absolute; bottom: 24px; background-color: rgba(0, 0, 0, 0.44); width: 100%; height: -moz-fit-content; height: fit-content; padding: 15px; overflow-y: hidden; max-height: 150px; z-index: 10; } .mar-article-image-gallery__mobile-caption > div { max-height: 100px; overflow: scroll; } @media (min-width: 768px) { .mar-article-image-gallery__mobile-caption > div { max-height: 150px; } } .mar-article-image-gallery__mobile-caption h2 { font-size: var(--font-size-m); } @media (min-width: 768px) { .mar-article-image-gallery__mobile-caption h2 { font-size: 24px; } } @media (min-width: 992px) { .mar-article-image-gallery__mobile-caption { display: none; height: 0; padding: 0; margin: 0; } } .mar-article-image-gallery__container { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--alt-colour); padding: 75px 0; z-index: 3000099; } @media (min-width: 768px) { .mar-article-image-gallery__container { padding: 75px; } } .mar-article-image-gallery__container .slick-next, .mar-article-image-gallery__container .slick-prev { position: fixed; background: none; border: 0; border-radius: 50%; width: -moz-fit-content; width: fit-content; height: 50px; margin: auto; top: 0; bottom: 0; font-size: var(--font-size-xxl); color: #FFFFFF; line-height: 50px; cursor: pointer; transition: all 0.5s ease; outline: none; display: flex; justify-content: center; align-items: center; z-index: 10; } .mar-article-image-gallery__container .slick-next svg, .mar-article-image-gallery__container .slick-prev svg { height: 50px; width: 66px; } .mar-article-image-gallery__container .slick-prev { left: 0; padding-right: 10px; padding-left: 10px; } @media (min-width: 576px) { .mar-article-image-gallery__container .slick-prev { left: 15px; } } .mar-article-image-gallery__container .slick-prev:focus, .mar-article-image-gallery__container .slick-prev:hover { background-color: transparent; } .mar-article-image-gallery__container .slick-next { right: 0; padding-left: 10px; padding-right: 10px; } @media (min-width: 576px) { .mar-article-image-gallery__container .slick-next { right: 15px; } } .mar-article-image-gallery__container .slick-next:focus, .mar-article-image-gallery__container .slick-next:hover { background-color: transparent; } .mar-article-image-gallery__container .slick-track { height: calc(100vh - 193px); } .mar-article-image-gallery__container .slick-slide img { max-width: 100%; max-height: 100%; margin: 0 auto; } .mar-article-image-gallery__container .slick-slide { text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mar-article-image-gallery__container .slick-slide > div { height: 100%; } .mar-article-image-gallery__container .slick-slide > div .main-image { height: 100%; } .mar-article-image-gallery__gallery-content { float: right; width: 400px; text-align: left; } .mar-article-image-gallery__caption { color: #FFFFFF; font-size: var(--font-size-l); margin-top: 40px; display: none; width: 350px; margin-left: 10px; line-height: 27px; } @media (min-width: 992px) { .mar-article-image-gallery__caption { display: block; } } .mar-article-image-gallery__item figure, .mar-article-image-gallery__item picture { height: 100%; display: flex; justify-content: center; align-items: center; position: relative; } @media (max-width: 1399px) { .mar-article-image-gallery__img { width: 642px; } } @media (max-width: 1199px) { .mar-article-image-gallery__img { width: 738px; } } @media (max-width: 991px) { .mar-article-image-gallery__img { width: 962px; } } @media (max-width: 767px) { .mar-article-image-gallery__img { width: 738px; } } @media (max-width: 575px) { .mar-article-image-gallery__img { width: 576px; } } @media (max-width: 319px) { .mar-article-image-gallery__img { width: 320px; } } .mar-article-image-gallery__nav { display: none; position: fixed; bottom: 10px; left: 0; right: 0; width: 100%; height: 78px; margin: auto; } .mar-article-image-gallery__nav .slick-list { max-height: 100%; overflow: hidden; justify-content: center; } .mar-article-image-gallery__nav .slick-track { height: 78px !important; display: flex; justify-content: center; } .mar-article-image-gallery__nav .slick-track.mar-article-image-gallery__nav--track-center { transform: none !important; } .mar-article-image-gallery__nav .slick-slide img { max-width: 100%; max-height: 100%; margin: 0 auto; } .mar-article-image-gallery__nav .slick-slide { text-align: center; background-color: #000000; border: solid 1px var(--main-colour); } .mar-article-image-gallery__nav .slick-slide.slick-current { border: solid 2px var(--accent-colour); } .mar-article-image-gallery__nav .slick-slide .slide { display: flex !important; justify-content: center; align-items: center; height: 100%; width: 100%; } @media (min-width: 992px) { .mar-article-image-gallery__nav { display: block; } } .mar-article-image-gallery__nav-gallery { margin: 0 25px; } .mar-article-image-gallery__slide-count-desktop { display: none; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 100%; text-align: center; color: #FFFFFF; } .mar-article-image-gallery__slide-count-desktop span { background-color: rgba(0, 0, 0, 0.8); padding: 0 5px; display: inline; font-size: var(--font-size-m); line-height: 24px; font-weight: var(--font-weight-regular); font-family: var(--global-font); } @media (min-width: 992px) { .mar-article-image-gallery__slide-count-desktop { display: block; } } .mar-article-image-gallery__interstitial { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--main-colour); z-index: 3000099; } .mar-article-image-gallery__interstitial-ad { text-align: center; margin-top: 100px; } .mar-article-image-gallery__interstitial-next-slide-container { width: 300px; margin: auto; position: relative; left: 100px; transform: translateX(-50%); } .mar-article-image-gallery__interstitial-next-slide-container--landscape { position: absolute; right: 15px; top: 3px; left: unset; transform: unset; } .mar-article-image-gallery__interstitial-next-slide { background-color: var(--accent-colour); color: #000000; padding: 10px; cursor: pointer; text-transform: uppercase; font-weight: 100; transition: background-color 200ms linear; position: absolute; right: 0; margin-top: 10px; } .mar-article-image-gallery__social-components { position: absolute; top: 25px; left: 25px; margin-right: 100px; } .mar-article-image-gallery__social-components .social-bar { background: inherit; } .mar-article-image-gallery__social-components .social-bar .bg-email { background: #000000; height: 34px; width: 34px; } .mar-article-image-gallery__social-components .social-bar .bg-fb { font-size: 30px !important; } .mar-article-image-gallery__social-components .social-bar .bg-fb-messenger { background: #FFFFFF; height: 29px; } @media (min-width: 992px) { .mar-article-image-gallery__social-components .social-bar .social-bar__button--with-icon { width: 45px; height: 45px; font-size: 25px; } .mar-article-image-gallery__social-components .social-bar .bg-email { height: 46px; width: 46px; font-size: 28px; } .mar-article-image-gallery__social-components .social-bar .bg-fb { font-size: 42px !important; } } .mar-article-image-gallery__slider { float: none; width: 100%; height: 100vh; } .mar-article-image-gallery__slider .slick-active { position: absolute !important; left: 0 !important; } @media (min-width: 992px) { .mar-article-image-gallery__slider { float: left; width: calc(100% - 415px); height: calc(100vh - 185px); } } .mar-article-image-gallery__close-btn { position: fixed; top: 15px; right: 35px; color: #FFFFFF; border-radius: 50%; width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: var(--font-size-xl); cursor: pointer; transition: all 0.5s ease; display: flex; justify-content: center; align-items: center; } .mar-article-image-gallery__close-btn:focus, .mar-article-image-gallery__close-btn:hover { background-color: #FFFFFF; color: #000000; } .mar-article-image-gallery__mobile-footer { display: block; position: absolute; bottom: 0; left: 0; width: 100%; color: #FFFFFF; } @media (min-width: 992px) { .mar-article-image-gallery__mobile-footer { display: none; } } .mar-article-image-gallery__slide-count { display: inline-block; position: absolute; background-color: rgba(0, 0, 0, 0.44); bottom: 0; left: 50%; text-align: center; width: auto; padding: 0 2px; } @media (min-width: 992px) { .mar-article-image-gallery__slide-count { bottom: 6px; left: 20px; width: 125px; text-align: left; } } .mar-article-image-gallery__slide-count span { font-family: var(--global-font); } .mar-article-image-gallery__show-caption-button { display: inline-block; position: absolute; cursor: pointer; background-color: rgba(0, 0, 0, 0.44); bottom: 0; right: 0; width: 110px; text-align: center; } @media (min-width: 992px) { .mar-article-image-gallery__show-caption-button { bottom: 6px; right: 20px; width: 125px; text-align: right; } } .article-comments { margin-bottom: 50px; margin-top: 20px; width: 100vw; padding: 0 10px; } @media (min-width: 1200px) { .article-comments { max-width: 700px; margin-left: auto; } } @media (min-width: 576px) { .article-comments { width: 100%; } } @media (min-width: 768px) { .article-comments { padding: 0; } } .article-comments textarea, .article-comments input { color: #000000; } .article-comments--inline { display: flex; align-items: center; flex-flow: wrap; gap: 15px; grid-gap: 15px; } @media (min-width: 768px) { .article-comments--inline { padding: 0; gap: 25px; grid-gap: 25px; } } .article-comments__text--inline { margin-right: 5px; display: inline-block; font-family: var(--global-font); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); height: 22px; cursor: pointer; white-space: nowrap; margin-left: 10px; background: linear-gradient(to right, var(--accent-colour), var(--accent-colour)), linear-gradient(to right, #9DA0A4, #9DA0A4, #9DA0A4); background-size: 100% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 200ms; } .article-comments__text--inline:hover, .article-comments__text--inline a:active, .article-comments__text--inline a:focus { background-size: 0 2px, 100% 2px; text-decoration: none; } .article-comments__text--inline:visited { color: #595959; } .article-comments__moderation-rules { margin-top: 50px; margin-bottom: 25px; background: #FFFFFF; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05); border-radius: 5px; } .article-comments__moderation-rules--disabled { background: transparent; padding-left: 0; padding-right: 0; } .article-comments__moderation-rules-title { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); margin: 0; padding: 15px 20px; color: #FFFFFF; background: var(--main-colour); text-transform: uppercase; border-top-left-radius: 5px; border-top-right-radius: 5px; } .article-comments__moderation-rules-body { padding: 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 1px solid #CCCFD6; } .article-comments__moderation-rules-text { font-size: var(--font-size-s); color: #333333; margin-top: 0; margin-bottom: 25px; } .article-comments__moderation-rules-text:last-child { margin-bottom: 0; } .article-comments__moderation-rules .mar-btn { max-width: 180px; margin-top: 0; margin-bottom: 0; } .article-comments__order-sort-header { position: relative; display: flex; justify-content: space-between; margin-bottom: 40px; } @media (max-width: 575px) { .article-comments__order-sort-header { flex-wrap: wrap; align-items: flex-start; margin-bottom: 25px; gap: 10px; grid-gap: 10px; } } .article-comments__order-sort-header .article-comments__order-sort-header-btn { display: flex; justify-content: center; align-items: center; height: 30px; white-space: nowrap; color: #FFFFFF; background: #188AE2; padding: 10px 15px; } .article-comments__order-sort-header .-sortby { margin-left: auto; } .article-comments__order-sort-header .-sortby .mar-form-elements__form-group---inline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; width: 230px; } .article-comments__order-sort-header .-sortby .mar-form-elements__form-group---inline label { width: 35%; margin-bottom: 0; margin-right: 5px; } .article-comments__order-sort-header .-sortby .mar-form-elements__form-group---inline select { width: 60%; background-color: #FFFFFF; } @media (max-width: 575px) { .article-comments__order-sort-header .-sortby { min-width: unset; margin: 0; } .article-comments__order-sort-header .-sortby .mar-form-elements__form-group > label { text-align: left; } } @media (max-width: 575px) { .article-comments__order-sort-header .-sortby { min-width: unset; margin: 0; } .article-comments__order-sort-header .-sortby .mar-form-elements__form-group > label { text-align: left; } } .article-comments .post-comment-container { margin-bottom: 25px; } .article-comments .post-comment-container .comment-status { position: relative; } .article-comments .post-comment-container .comment-status span { display: block; margin-bottom: 15px; } .article-comments .post-comment-container .verification-prompt-container .mar-btn { display: block; margin-left: auto; } .article-comments .post-comment-container .mar-alert { width: 100%; margin-bottom: 10px; opacity: 1; } .article-comments .post-comment-container .mar-alert a { color: white; border-bottom: 1px solid white; } .article-comments .post-comment-container .mar-form-elements { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .article-comments .post-comment-container .mar-form-elements__title { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); margin-top: 0; margin-bottom: 8px; } .article-comments .post-comment-container .mar-form-elements__title, .article-comments .post-comment-container .mar-form-elements .post-comment-form-textarea, .article-comments .post-comment-container .mar-form-elements .post-comment-form-checkbox, .article-comments .post-comment-container .mar-form-elements .post-comment-form-btn { flex-basis: 100%; } .article-comments .post-comment-container .mar-form-elements .post-comment-form-btn { text-align: right; margin-bottom: 20px; width: 100%; } @media (min-width: 768px) { .article-comments .post-comment-container .mar-form-elements .post-comment-form-checkbox, .article-comments .post-comment-container .mar-form-elements .post-comment-form-btn { flex-basis: 50%; } .article-comments .post-comment-container .mar-form-elements .post-comment-form-btn { max-width: 180px; text-align: right; margin-left: auto; } } .article-comments .comment-container { position: relative; } .article-comments .comment-container .comment { padding: 27px 0; border-bottom: 1px solid #CCCFD6; } .article-comments .comment-container .comment__header { display: flex; justify-content: flex-start; align-items: flex-end; } .article-comments .comment-container .comment__username { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); color: #000000; display: flex; align-items: center; } .article-comments .comment-container .comment__suspend-btn { font-size: var(--font-size-xs); font-family: var(--global-font); color: #9D0D13; background: transparent; border: none; margin-bottom: 2px; } .article-comments .comment-container .comment .admin-user { margin-left: 5px; display: none; position: relative; } @media (min-width: 576px) { .article-comments .comment-container .comment .admin-user { display: flex; justify-content: flex-start; align-items: center; } } .article-comments .comment-container .comment .admin-user [data-icon='bx:bxs-left-arrow'] { width: 26px; height: 26px; } .article-comments .comment-container .comment .admin-user [data-icon='bx:bxs-left-arrow'] path { fill: var(--alt-colour); } .article-comments .comment-container .comment .admin-user__text { display: flex; align-items: center; background: var(--alt-colour); height: 22px; text-transform: capitalize; padding-right: 13px; padding-left: 5px; position: relative; left: -6px; color: #FFFFFF; font-family: var(--body-font); font-weight: var(--font-weight-semibold); white-space: nowrap; } .article-comments .comment-container .comment .admin-user__text span { margin-top: 2px; } .article-comments .comment-container .comment .mobile-admin-user { display: block; } @media (min-width: 576px) { .article-comments .comment-container .comment .mobile-admin-user { display: none; } } .article-comments .comment-container .comment__posted, .article-comments .comment-container .comment__user-id, .article-comments .comment-container .comment__last-updated { font-size: var(--font-size-xxs); font-family: var(--global-font); color: #595959; } .article-comments .comment-container .comment__posted { margin-left: auto; } .article-comments .comment-container .comment__user-id { margin-top: 5px; } .article-comments .comment-container .comment__body { margin-bottom: 25px; } .article-comments .comment-container .comment__text { display: block; font-size: var(--font-size-s); color: #333333; margin: 10px 0; white-space: break-spaces; } .article-comments .comment-container .comment__text .user-alias { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 5px; } @media (min-width: 576px) { .article-comments .comment-container .comment__text .user-alias { align-items: center; flex-direction: row; } } .article-comments .comment-container .comment__text .user-alias .admin-user [data-icon='clarity:avatar-solid'] { height: 17px; width: 17px; margin-right: 5px; } .article-comments .comment-container .comment__text .user-alias .admin-user [data-icon='clarity:avatar-solid'] path:first-of-type { fill: #595959; } .article-comments .comment-container .comment__text .user-alias .admin-user [data-icon='clarity:avatar-solid'] path:nth-of-type(2n) { fill: none; } .article-comments .comment-container .comment__text blockquote { font-size: var(--font-size-s); font-weight: var(--font-weight-regular); } @media (min-width: 992px) { .article-comments .comment-container .comment__text blockquote { margin-right: 40px; } } .article-comments .comment-container .comment__actions { display: flex; justify-content: space-between; align-items: center; } .article-comments .comment-container .comment__actions--left { text-align: left; display: flex; } .article-comments .comment-container .comment__actions--left button { margin-right: 5px; } .article-comments .comment-container .comment__actions--right { text-align: right; display: flex; position: relative; } .article-comments .comment-container .comment__actions--right button { font-size: var(--font-size-xs); background: 0; border: none; margin-right: 10px; padding: 0; } .article-comments .comment-container .comment__actions--right .edit-comment { color: #2EAA6D; } .article-comments .comment-container .comment__actions--right .delete-comment { color: #9D0D13; } .article-comments .comment-container .comment__actions--right .comment-report { margin-right: 20px; color: #595959; } .article-comments .comment-container .comment__actions--right .comment-report:hover { color: #9D0D13; cursor: pointer; } .article-comments .comment-container .comment__actions--right .mar-upvote { margin-right: 0; } .article-comments .comment-container .comment--left button:last-child, .article-comments .comment-container .comment--right button:last-child { margin-right: 0; } .article-comments .comment-container .comment .comment { border-bottom: none; background: transparent; padding: 20px; padding-bottom: 0; margin: 25px 0 0; border-top: 1px solid #CCCFD6; } .article-comments .comment-container .comment .comment__text { color: #000000; white-space: pre-line; } .article-comments .comment-container .comment .comment__last-updated { color: #595959; } .article-comments .comment-container .comment .nested-comment { padding-left: 10px; padding-right: 0; } .article-comments .comment-container .comment .comment-quote { font-size: var(--font-size-s); font-weight: var(--font-weight-regular); padding: 10px 0 10px 10px; } .article-comments .comment-container .comment .comment-quote strong { display: block; font-weight: var(--font-weight-bold); padding-bottom: 5px; } .article-comments .comment-container .comment .removed-indentation { left: -30px; } .article-comments .report-container .mar-alert { margin-bottom: 20px; } .article-comments .report-container .report-form { position: relative; } .article-comments .report-container .report-form__header { font-size: var(--font-size-s); font-weight: var(--font-weight-bold); color: #000000; margin-top: 0; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } .article-comments .report-container .report-form__cancel { font-size: var(--font-size-xs); color: #333333; margin: 0; padding: 0; } .article-comments .report-container .report-form__submit { margin-left: auto; } .article-comments .reply-container .reply-form { position: relative; } .article-comments .reply-container .reply-form__header { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 15px; } .article-comments .reply-container .reply-form__username { width: 49%; font-size: var(--font-size-s); font-weight: var(--font-weight-bold); color: #000000; } .article-comments .reply-container .reply-form__quote { position: relative; } .article-comments .reply-container .reply-form__quote blockquote { margin-top: 0; margin-bottom: 0; color: #595959; } @media (min-width: 992px) { .article-comments .reply-container .reply-form__quote blockquote { margin-right: 40px; } } .article-comments .reply-container .reply-form__quote blockquote [data-icon='clarity:avatar-solid'] { height: 17px; width: 17px; margin-right: 5px; } .article-comments .reply-container .reply-form__quote blockquote .user-alias { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 5px; } @media (min-width: 576px) { .article-comments .reply-container .reply-form__quote blockquote .user-alias { align-items: center; flex-direction: row; } } .article-comments .reply-container .reply-form__quote strong { color: #595959; } .article-comments .reply-container .reply-form__quote-user { font-weight: var(--font-weight-semibold); margin-bottom: 15px; } .article-comments .reply-container .reply-form__quote-content { font-weight: var(--font-weight-regular); margin-bottom: 25px; } .article-comments .reply-container .reply-form__quote-user, .article-comments .reply-container .reply-form__quote-content { font-size: var(--font-size-s); color: #333333; } .article-comments .reply-container .reply-form__cancel { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: #333333; margin-left: auto; width: 49%; text-align: right; } .article-comments .reply-container .reply-form__reply-to { font-size: var(--font-size-xs); font-family: var(--global-font); margin-bottom: 5px; } .article-comments .reply-container .reply-form__submit { margin-left: auto; } .article-comments .edit-container .edit-form { position: relative; } .article-comments .edit-container .edit-form__header { display: flex; justify-content: flex-start; align-items: center; margin-top: 0; margin-bottom: 15px; } .article-comments .edit-container .edit-form__title { width: 49%; font-size: var(--font-size-s); font-weight: var(--font-weight-bold); color: #000000; } .article-comments .edit-container .edit-form__cancel { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: #333333; margin-left: auto; width: 49%; text-align: right; } .article-comments .edit-container .edit-form__textarea-label { font-size: var(--font-size-xxs); font-family: var(--global-font); margin-bottom: 10px; color: #595959; } .article-comments .edit-container .edit-form__submit { margin-left: auto; } .article-comments .delete-container .delete-alert { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; margin: 15px 0; } .article-comments .delete-container .delete-alert__actions { display: flex; justify-content: space-between; align-items: center; } .article-comments .delete-container .delete-alert__confirm { margin-right: 15px; } .article-comments .delete-container .delete-alert__cancel { color: #FFFFFF; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); } .article-comments .post-comment-container, .article-comments .report-container, .article-comments .reply-container, .article-comments .edit-container { background: #F2F2F3; padding: 20px; margin-top: 25px; } .article-comments .mar-btn:hover, .article-comments .article-comments__order-sort-header-btn:hover { text-decoration: none; } .comment-status a { font-weight: var(--font-weight-bold); } .live-article-content { margin: 0 10px; } @media (min-width: 576px) { .live-article-content { margin: 0 15px; } } @media (min-width: 576px) and (min-width: 992px) { .live-article-content { margin: 0; } } .live-article-content__article-details { margin-top: 25px; margin-bottom: 25px; } @media (max-width: 575px) { .live-article-content__article-details { margin-right: 15px; } } .live-article-content__livefeed-summary { margin-bottom: 50px; } .live-article-content__livefeed-summary ul { list-style: none; font-size: var(--font-size-sm); line-height: var(--standard-line-height); } @media (max-width: 575px) { .live-article-content__livefeed-summary ul { margin-right: 15px; } } .live-article-content__livefeed-summary ul li { font-size: var(--font-size-sm); } .live-article-content__livefeed-summary ul li::before { content: '•'; color: var(--alt-colour); display: inline-block; width: 31px; margin-left: -30px; } .live-article-content .livefeed-item { position: relative; padding-top: 15px; padding-bottom: 25px; border-top: 1px solid #9D0D13; } @media (max-width: 575px) { .live-article-content .livefeed-item { margin-right: 25px; } } .live-article-content .livefeed-item::before { content: ''; position: absolute; display: inline-block; inset: -5px 0 0; height: 9px; width: 9px; background-color: #9D0D13; border-radius: 50%; } .live-article-content .livefeed-item__timestamp { margin-bottom: 10px; } .live-article-content .livefeed-item__timestamp span { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); } .live-article-content .livefeed-item__timestamp span.time-of-day { font-size: var(--font-size-m); font-weight: var(--font-weight-regular); margin-left: 5px; } .live-article-content .livefeed-item__content-wrapper p { color: #333333; display: block; font-size: var(--font-size-sm); line-height: var(--standard-line-height); margin-bottom: 15px; word-break: break-word; } @media (min-width: 576px) { .live-article-content .livefeed-item__content-wrapper p { margin-bottom: 20px; font-size: var(--font-size-sm); } } .live-article-content .livefeed-item__content-wrapper p:last-child { margin-bottom: 0; } .live-article-content .livefeed-item__content-wrapper a { font-weight: var(--font-weight-bold); color: #000000; position: relative; padding: 0; text-decoration: none; background: linear-gradient(to right, var(--accent-colour), var(--accent-colour)), linear-gradient(to right, #9DA0A4, #9DA0A4, #9DA0A4); background-size: 100% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 200ms; } .live-article-content .livefeed-item__content-wrapper a:hover, .live-article-content .livefeed-item__content-wrapper a a:active, .live-article-content .livefeed-item__content-wrapper a a:focus { background-size: 0 2px, 100% 2px; } .live-article-content .livefeed-item__content-wrapper a:visited { color: #595959; } .live-article-content .livefeed-item__content-wrapper ul { list-style: none; } .live-article-content .livefeed-item__content-wrapper ul li { font-size: var(--font-size-m); } .live-article-content .livefeed-item__content-wrapper ul li::before { content: '•'; color: var(--alt-colour); display: inline-block; width: 31px; margin-left: -30px; } .live-article-content .livefeed-item__content-wrapper .editor-image { margin: auto; width: 100%; object-fit: cover; } .live-article-content .livefeed-item__content-wrapper .inline-image-caption { display: block; text-align: left; color: #FFFFFF; font-size: var(--font-size-xs); font-family: var(--body-font); font-weight: var(--font-weight-semibold); padding: 10px; background: var(--main-colour); cursor: default; } .live-article-content .livefeed-item__content-wrapper .liveComment { margin-left: 20px; background: #F2F2F3; padding: 20px; } .live-article-content .livefeed-item__content-wrapper .liveComment p { display: block; } .live-article-content .livefeed-item__content-wrapper .liveComment .genericDateTime { display: none; } .live-article-content .livefeed-item__content-wrapper .icon { display: inline-block; background-position: center top; background-repeat: no-repeat; background-size: cover; margin-right: 10px; } .live-article-content .livefeed-item__content-wrapper .icon.full-time { width: 31px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-full.png"); } .live-article-content .livefeed-item__content-wrapper .icon.half-time { width: 29px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-half-time.png"); } .live-article-content .livefeed-item__content-wrapper .icon.kick-off, .live-article-content .livefeed-item__content-wrapper .icon.close-of-play, .live-article-content .livefeed-item__content-wrapper .icon.tea, .live-article-content .livefeed-item__content-wrapper .icon.lunch { width: 29px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-start.png"); } .live-article-content .livefeed-item__content-wrapper .icon.red-card { width: 27px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-red-card.png"); } .live-article-content .livefeed-item__content-wrapper .icon.yellow-card { width: 27px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-yellow-card.png"); } .live-article-content .livefeed-item__content-wrapper .icon.try, .live-article-content .livefeed-item__content-wrapper .icon.penalty-kick, .live-article-content .livefeed-item__content-wrapper .icon.drop-goal, .live-article-content .livefeed-item__content-wrapper .icon.conversion { width: 36px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-rugby.png"); } .live-article-content .livefeed-item__content-wrapper .icon.goal, .live-article-content .livefeed-item__content-wrapper .icon.penalty { width: 36px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-goal.png"); } .live-article-content .livefeed-item__content-wrapper .icon.not-out { width: 64px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-not-out.png"); } .live-article-content .livefeed-item__content-wrapper .icon.out { width: 64px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-out.png"); } .live-article-content .livefeed-item__content-wrapper .icon.hundred { width: 60px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-hundred.png"); } .live-article-content .livefeed-item__content-wrapper .icon.fifty { width: 45px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-fifty.png"); } .live-article-content .livefeed-item__content-wrapper .icon.six { width: 27px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-six.png"); } .live-article-content .livefeed-item__content-wrapper .icon.four { width: 27px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-four.png"); } .live-article-content .livefeed-item__content-wrapper .icon.chequered-flag { width: 40px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-speedway.png"); } .live-article-content .livefeed-item__content-wrapper .icon.hit-the-post { width: 35px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-post.png"); } .live-article-content .livefeed-item__content-wrapper .icon.hit-the-bar { width: 35px; height: 26px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-bar.png"); } .live-article-content .livefeed-item__content-wrapper .icon.hockey-goal { width: 34px; height: 36px; background-image: url("/resources/responsive-static/mds/images/live-articles/live-hockey-goal.png"); } .live-article-content .article-comments { max-width: 100%; margin-left: unset; } .live-article-content .article-comments__order-sort-header-sortby { min-width: unset; } .young-reporter-disclaimer { background-color: #F2F2F3; padding: 20px; margin: 10px 0 20px; } /* Ballot styles */ .ballot-card { box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.19); border: 1px solid #CCCFD6; padding: 25px; margin-bottom: 40px; margin-top: 40px; } .ballot-card__poll-options li { border-bottom: solid 1px #E6E6E9; } .ballot-card__poll-options li:last-child { border-bottom: none; } .ballot-card__poll-results { background: #FFFFFF; } .ballot-card__poll-results--total { margin-left: auto; display: block; width: -moz-fit-content; width: fit-content; font-family: var(--global-font); font-size: var(--font-size-xs); } .ballot-card__list-item { list-style: none; padding: 15px 0 15px; font-family: var(--global-font); align-items: center; font-size: var(--font-size-s); } .ballot-card__list-item::before { content: '' !important; display: none !important; } .ballot-card__list-item input, .ballot-card__list-item label { cursor: pointer; margin: 0 0 0 5px; } .ballot-card__list-item label { font-size: var(--font-size-s); } .ballot-card__list-item--results { flex-direction: column; align-items: flex-start; padding: 15px 0 5px; } .ballot-card__list-item--results:last-child { padding: 15px 0 15px; } .ballot-card__list-item--results .results-text { display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: var(--font-size-s); } .ballot-card__list-item--results .results-text .vote-percentage { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); } .ballot-card__header { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; font-family: var(--header-font); position: relative; width: -moz-fit-content; width: fit-content; margin-top: 0; } .ballot-card__header::after { content: ''; height: 1px; width: 100%; background: #BC7A16; position: absolute; left: 0; bottom: 0; } .ballot-card__question { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); font-family: var(--header-font); margin: 15px 0 5px; } .ballot-card__question--multiple { font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); } .ballot-card__btn { margin-top: 10px; } .ballot-card__poll-closed { color: #9D0D13; font-size: var(--font-size-s); font-weight: var(--font-weight-bold); font-style: italic; } .ballot-card__progress { width: 100%; display: flex; height: 3px; overflow: hidden; background-color: #F2F2F3; border-radius: 29px; } .ballot-card__progress .progress-bar { display: flex; flex-direction: column; justify-content: center; color: #FFFFFF; text-align: center; white-space: nowrap; background-color: #9D0D13; transition: width 0.6s ease; } .ballot-card--error { box-shadow: none; padding: 10px 15px; color: #721C24; background-color: #F8D7DA; margin: 10px 0; border-color: #F5C6CB; border-radius: 3px; } .ballot-card--error .error-text { font-family: var(--global-font); font-size: var(--font-size-xs); } /* html-documentation

Use with gallery

breaking Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

Use with video

breaking Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

*/ .mar-small-card { position: relative; height: -moz-fit-content; height: fit-content; display: flex; } @media (min-width: 992px) { .mar-small-card { min-width: 290px; } } .mar-small-card__wrapper { width: 100%; } .mar-small-card__img-content { text-decoration: none; } .mar-small-card__img-icon-container { position: relative; margin-right: 10px; padding-top: 5px; width: 114px; min-width: 114px; height: -moz-fit-content; height: fit-content; } @media (min-width: 1200px) { .mar-small-card__img-icon-container { width: 128px; min-width: 128px; } } .mar-small-card__icon-container { position: absolute; display: flex; height: 30px; right: 0; bottom: 0; justify-content: space-between; align-items: center; gap: 0 5px; margin-bottom: 5px; margin-right: 5px; } .mar-small-card__comments-container { display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: nowrap; } .mar-small-card__comments-container--space-between { justify-content: space-between; } .mar-small-card__comments-container .article-topic { font-size: 11px; text-transform: uppercase; font-weight: var(--font-weight-regular); font-family: var(--global-font); cursor: pointer; } @media (min-width: 1200px) { .mar-small-card__comments-container .article-topic { left: 139px; } } .mar-small-card__img { height: 100%; width: 100%; background: #CCCFD6; overflow: hidden; position: relative; } .mar-small-card__img-icon { position: relative; width: 26px; height: 26px; background: var(--accent-colour); border-radius: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; } .mar-small-card__img-icon svg { font-size: var(--font-size-s); } .mar-small-card__img-icon path { color: #000000; } .mar-small-card__img-icon svg[data-icon='el:play'] { margin-left: 3px; } .mar-small-card__img-icon svg.icon-comments { font-size: var(--font-size-xs); margin-top: 2px; overflow: unset; } .mar-small-card__img-icon--comments { background: none; } .mar-small-card__img-icon--comments path { color: #CCCFD6; } .mar-small-card__img-icon--comments rect { color: #CCCFD6; } .mar-small-card__img-icon:hover { text-decoration: none; } .mar-small-card__total-comments { color: #000000; font-size: 11px; font-weight: var(--font-weight-regular); font-family: var(--global-font); margin-left: 5px; } .mar-small-card__text { font-family: var(--header-font); color: #333333; margin: 0; } .mar-small-card__text a { font-family: inherit; } .mar-small-card__text--with-para a { font-size: var(--font-size-s); font-weight: var(--font-weight-semibold); } .mar-small-card__text--with-para p { font-size: var(--font-size-xs); margin-top: 5px; font-weight: var(--font-weight-regular); } .mar-small-card .mar-label { padding-left: 0; text-decoration: none; } .mar-small-card .mar-label:not(.mar-label__live-label.mar-label--inline) { padding-right: 0; } .mar-small-card .mar-label .mar-label__dot { right: -5px; } .mar-small-card .mar-label__text { cursor: pointer; } .mar-small-card .firstpar { display: inline-block; } .mar-small-card__content { display: flex; align-items: flex-end; } .mar-small-card__timestamp { font-family: var(--global-font); font-size: var(--font-size-xxs); color: #595959; } .mar-small-card__timestamp span { font-family: inherit; } /* stylelint-disable value-no-vendor-prefix */ .mar-lead-story { margin-left: -10px; margin-right: -10px; position: relative; flex-direction: column; margin-bottom: 50px; } @media (min-width: 576px) { .mar-lead-story { margin-left: -15px; margin-right: -15px; } } @media (min-width: 768px) { .mar-lead-story { margin-left: unset; margin-right: unset; } } @media (min-width: 768px) { .mar-lead-story { flex-direction: row; margin-bottom: 25px; } } .mar-lead-story__label { position: absolute; z-index: 2; top: 10px; } .mar-lead-story__link { font-family: var(--article-page-headline-font); font-size: var(--font-size-lg); color: #333333; font-weight: var(--font-weight-semibold); } .mar-lead-story__link span { font-family: inherit; margin-right: 10px; } @media (min-width: 576px) { .mar-lead-story__link { font-size: var(--font-size-xl); } } .mar-lead-story__link:hover { color: #000000; text-decoration: none; } .mar-lead-story__headline { font-family: var(--article-page-headline-font); max-width: unset; margin: 0 10px 10px 10px; font-size: var(--font-size-l); font-weight: var(--font-weight-semibold); order: 1; } @media (min-width: 576px) { .mar-lead-story__headline { font-size: var(--font-size-xl); } } @media (min-width: 768px) { .mar-lead-story__headline { margin: 0; max-width: 100%; } } @media (min-width: 1200px) { .mar-lead-story__headline { font-size: var(--font-size-xxl); } } .mar-lead-story__first-par { display: none; font-family: var(--body-font); font-size: var(--font-size-s); color: #333333; font-weight: var(--font-weight-regular); line-height: 30px; margin-top: 25px; } @media (min-width: 992px) { .mar-lead-story__first-par { display: block; } } .mar-lead-story__timestamp { display: block; margin-top: 10px; } .mar-lead-story__timestamp span { color: #595959; font-family: var(--global-font); font-weight: var(--font-weight-regular); font-size: var(--font-size-xxs); } .mar-lead-story__image-content { position: relative; grid-column: span 2/span 2; order: 2; height: -moz-fit-content; height: fit-content; } .mar-lead-story__image-content .stars-label { top: 10px; } .mar-lead-story__img { background: #CCCFD6; position: relative; overflow: hidden; } @media (max-width: 1399px) { .mar-lead-story__img { width: 815px; } } @media (min-width: 1200px) { .mar-lead-story__img { width: 815px; } } @media (max-width: 991px) { .mar-lead-story__img { width: 773px; } } @media (max-width: 767px) { .mar-lead-story__img { width: 737px; } } @media (max-width: 575px) { .mar-lead-story__img { width: 576px; } } @media (max-width: 319px) { .mar-lead-story__img { width: 320px; } } .mar-lead-story__icon-container { position: absolute; display: flex; right: 0; bottom: 0; justify-content: space-between; align-items: center; gap: 0 10px; margin-bottom: 10px; margin-right: 10px; } .mar-lead-story__icon-container svg { font-size: 24px; } .mar-lead-story__icon-container path { color: #000000; } .mar-lead-story__icon-container svg[data-icon='el:play'] { margin-left: 3px; } .mar-lead-story__img-icon { position: relative; width: 40px; height: 40px; background: var(--accent-colour); border-radius: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; z-index: 3; } .mar-lead-story__img-icon svg { font-size: 24px; } .mar-lead-story__img-icon path { color: #000000; } .mar-lead-story__img-icon svg[data-icon='el:play'] { margin-left: 3px; } .mar-lead-story .mar-label { z-index: 2; } .mar-lead-story .mar-label--over-image { top: 0; } .mar-lead-story .comments-icon { float: unset; top: -8px; margin-left: 0; } .mar-lead-story--standard-lead .mar-lead-story__image-content { order: unset; } @media (min-width: 576px) { .mar-lead-story--standard-lead .mar-lead-story__image-content { order: 2; } } .mar-lead-story--standard-lead .mar-lead-story__img { max-width: 100%; } .mar-lead-story--headline-over-image { display: flex; flex-direction: column; } @media (min-width: 576px) { .mar-lead-story--headline-over-image { margin-bottom: 25px; overflow: hidden; max-height: 530px; } } @media (min-width: 576px) { .mar-lead-story--headline-over-image .headline-container { align-self: center; background-color: white; bottom: 0; flex-direction: column-reverse; padding: 20px 20px 5px 20px; position: absolute; width: 80%; z-index: 1; } .mar-lead-story--headline-over-image .headline-container .headline { order: unset; } } .mar-lead-story--headline-over-image .mar-lead-story__image-content { order: unset; } @media (min-width: 576px) { .mar-lead-story--headline-over-image .mar-lead-story__image-content { order: 2; width: 100%; grid-column: span 3 / span 3; } } .mar-lead-story--headline-over-image .mar-lead-story__image-content img { width: 100%; max-height: 500px; object-fit: cover; object-position: center; } .mar-lead-story--headline-over-image .mar-lead-story__img { padding-top: 42.25%; } .mar-lead-story--headline-over-image .mar-lead-story__headline .mar-lead-story__first-par { display: none; } .mar-lead-story--headline-over-image .mar-lead-story__link { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: 15px 0 0 #FFFFFF, -15px 0 0 #FFFFFF; background: #FFFFFF; } .mar-lead-story--headline-over-image .mar-lead-story__timestamp { display: unset; } .mar-lead-story--headline-over-image .mar-lead-story__timestamp span { display: block; background: #FFFFFF; box-shadow: 15px 0 0 #FFFFFF, -15px 0 0 #FFFFFF; width: -moz-fit-content; width: fit-content; padding: 0; margin: -3px 0; } @media (min-width: 576px) { .mar-lead-story--headline-over-image .mar-lead-story__timestamp span { margin: -6px 0; } } @media (max-width: 575px) { .mar-lead-story--small-on-mobile { flex-direction: row; margin: 0; margin-left: 0 !important; margin-right: 0 !important; } .mar-lead-story--small-on-mobile .mar-lead-story__image-content { margin-right: 10px; width: 128px; } .mar-lead-story--small-on-mobile .mar-lead-story__headline, .mar-lead-story--small-on-mobile .mar-lead-story__link { font-size: var(--font-size-s); font-weight: var(--font-weight-semibold); } .mar-lead-story--small-on-mobile .mar-lead-story__headline { padding: 0; } .mar-lead-story--small-on-mobile .comments-icon { float: right; top: unset; margin-left: 10px; } } .most-read { margin: 0; } .most-read .mar-tab--active.most-read__list { display: grid; margin-bottom: 0; grid-template-columns: repeat(1, minmax(245px, 1fr)); gap: 0 15px; grid-gap: 0 15px; } @media (min-width: 576px) { .most-read .mar-tab--active.most-read__list { gap: 0 20px; grid-gap: 0 20px; } } @media (min-width: 576px) { .most-read .mar-tab--active.most-read__list { grid-template-columns: repeat(2, 1fr); } } .most-read .mar-tab--active.most-read__list .most-read__list-item { min-width: unset; gap: 20px; grid-gap: 20px; } .most-read .mar-tab--active.most-read__list .most-read__list-item .headline { margin: 0; } .most-read .mar-tab--active.most-read__list .most-read__list-item a { color: #333333; font-family: var(--article-page-headline-font); } .most-read .mar-tab--active.most-read__list .most-read__list-item a:hover { color: #000000; text-decoration: none; } .most-read .mar-tab--active.most-read__list .most-read__list-item::before { padding-top: 0; font-size: 30px; min-width: 35px; text-align: center; line-height: 100%; margin: 0; } @media (min-width: 768px) { .most-read .mar-tab--active.most-read__list { column-count: 2; } } @media (min-width: 1200px) { .most-read .mar-tab--active.most-read__list { column-count: unset; margin-left: 0; margin-right: 0; } } .most-read .read-more-cta { margin-top: 0; font-family: var(--body-font); } .most-read__cta-container { text-align: center; margin-top: 5px; } .most-read--hide { display: none !important; } @media (min-width: 768px) { .most-read .most-read__body.most-read__body--one-column .mar-tab--active.most-read__list { display: grid; } .most-read .most-read__body.most-read__body--one-column .mar-tab--active.most-read__list .most-read__list-item a { max-width: 100%; } } @media (max-width: 768px) and (min-width: 575px) { .most-read .most-read__body.most-read__body--one-column .mar-tab--active.most-read__list { display: block; column-count: 2; } } .mar-standard-card { position: relative; height: -moz-fit-content; height: fit-content; } .mar-standard-card__img-content { position: relative; padding-top: 4px; text-decoration: none; float: left; margin-right: 10px; height: auto; width: 128px; } @media (min-width: 576px) { .mar-standard-card__img-content { padding-top: 5px; } } .mar-standard-card.living-standard-card .mar-standard-card__img-content { padding-top: 0; } @media (min-width: 576px) { .mar-standard-card.living-standard-card .mar-standard-card__img-content { padding-top: 0; } } .mar-standard-card__icon-container { position: absolute; display: flex; height: 30px; right: 0; bottom: 0; justify-content: space-around; gap: 0 5px; margin-right: 5px; } @media (min-width: 576px) { .mar-standard-card__icon-container { height: 50px; gap: 0 10px; margin-right: 10px; } } .mar-standard-card__img { background: #CCCFD6; overflow: hidden; position: relative; } @media (max-width: 1399px) { .mar-standard-card__img { width: 540px; } } @media (min-width: 1200px) { .mar-standard-card__img { width: 400px; } } @media (max-width: 991px) { .mar-standard-card__img { width: 471px; } } @media (max-width: 767px) { .mar-standard-card__img { width: 620px; } } @media (max-width: 575px) { .mar-standard-card__img { width: 128px; } } @media (max-width: 319px) { .mar-standard-card__img { width: 128px; } } .mar-standard-card__img-icon { position: absolute; bottom: 5px; right: 0; width: 25px; height: 25px; background: var(--accent-colour); border-radius: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; z-index: 3; } @media (min-width: 576px) { .mar-standard-card__img-icon { width: 40px; height: 40px; } } .mar-standard-card__img-icon:hover { text-decoration: none; } .mar-standard-card__img-icon:hover path { color: #000000; } .mar-standard-card__img-icon svg { display: block; font-size: var(--font-size-xs); } @media (min-width: 576px) { .mar-standard-card__img-icon svg { font-size: var(--font-size-l); } } .mar-standard-card__img-icon path { color: #000000; } .mar-standard-card__img-icon svg[data-icon='el:play'] { margin-left: 3px; } .mar-standard-card__total-comments { display: none; position: absolute; left: 50%; top: 50%; color: var(--accent-colour); font-size: 10px; font-weight: var(--font-weight-bold); font-family: var(--global-font); } @media (min-width: 576px) { .mar-standard-card__total-comments { display: block; font-size: 12px; transform: translate(-50%, -55%); } } .mar-standard-card__text { font-family: var(--header-font); color: #333333; margin: 0; } .mar-standard-card__text a { font-family: inherit; font-weight: inherit; } .mar-standard-card__content { display: flex; align-items: flex-end; position: relative; } .mar-standard-card__timestamp { font-family: var(--global-font); font-size: var(--font-size-xxs); color: #595959; margin-left: 10px; } @media (min-width: 576px) { .mar-standard-card__timestamp { margin-left: 0; } } .mar-standard-card__timestamp span { font-family: inherit; } .mar-standard-card__mar-label-above-mobile.mar-label.mar-label--over-image { display: none; } .mar-standard-card__mar-label-only-mobile.mar-label.mar-label--inline { display: inline; padding-left: 0; } .mar-standard-card__mar-label-only-mobile.mar-label.mar-label--inline:not(.mar-label__live-label.mar-label--inline) { padding-right: 0; } .mar-standard-card__mar-label-only-mobile.mar-label.mar-label--inline .mar-label__dot { right: -5px; } .mar-standard-card.mar-standard-card--7, .mar-standard-card.mar-standard-card--5 { margin-left: -10px; margin-right: -10px; margin-bottom: 25px; } @media (min-width: 576px) { .mar-standard-card.mar-standard-card--7, .mar-standard-card.mar-standard-card--5 { margin-left: -15px; margin-right: -15px; } } @media (min-width: 768px) { .mar-standard-card.mar-standard-card--7, .mar-standard-card.mar-standard-card--5 { margin-left: unset; margin-right: unset; } } .mar-standard-card.mar-standard-card--7 .mar-standard-card__img-content, .mar-standard-card.mar-standard-card--5 .mar-standard-card__img-content { position: relative; width: 100%; height: auto; float: unset; } .mar-standard-card.mar-standard-card--7 .mar-standard-card__img-content a, .mar-standard-card.mar-standard-card--5 .mar-standard-card__img-content a { display: flex; overflow: hidden; } .mar-standard-card.mar-standard-card--7 .mar-standard-card__label, .mar-standard-card.mar-standard-card--5 .mar-standard-card__label { position: absolute; top: 5; left: 0; z-index: 2; } .mar-standard-card.mar-standard-card--7 .mar-standard-card__img, .mar-standard-card.mar-standard-card--5 .mar-standard-card__img { position: relative; z-index: 1; background: #CCCFD6; } @media (max-width: 1399px) { .mar-standard-card.mar-standard-card--7 .mar-standard-card__img, .mar-standard-card.mar-standard-card--5 .mar-standard-card__img { width: 540px; } } @media (min-width: 1200px) { .mar-standard-card.mar-standard-card--7 .mar-standard-card__img, .mar-standard-card.mar-standard-card--5 .mar-standard-card__img { width: 400px; } } @media (max-width: 991px) { .mar-standard-card.mar-standard-card--7 .mar-standard-card__img, .mar-standard-card.mar-standard-card--5 .mar-standard-card__img { width: 471px; } } @media (max-width: 767px) { .mar-standard-card.mar-standard-card--7 .mar-standard-card__img, .mar-standard-card.mar-standard-card--5 .mar-standard-card__img { width: 739px; } } @media (max-width: 575px) { .mar-standard-card.mar-standard-card--7 .mar-standard-card__img, .mar-standard-card.mar-standard-card--5 .mar-standard-card__img { width: 414px; } } @media (max-width: 319px) { .mar-standard-card.mar-standard-card--7 .mar-standard-card__img, .mar-standard-card.mar-standard-card--5 .mar-standard-card__img { width: 128px; } } .mar-standard-card.mar-standard-card--7 .mar-standard-card__content, .mar-standard-card.mar-standard-card--5 .mar-standard-card__content { padding: 0 10px; } @media (max-width: 575px) { .mar-standard-card__text { font-size: var(--font-size-s); } } .mar-standard-card.mar-standard-card--5 .mar-standard-card__text { margin-top: 5px; } .mar-standard-card.mar-standard-card--7 .mar-standard-card__text { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); margin-top: 5px; } @media (min-width: 576px) { .mar-standard-card { padding-bottom: 0; } .mar-standard-card__mar-label-above-mobile.mar-label.mar-label--over-image { display: flex; z-index: 2; } .mar-standard-card__mar-label-only-mobile.mar-label.mar-label--inline { display: none; } .mar-standard-card__img-content { position: relative; width: 100%; height: auto; float: unset; } .mar-standard-card__img-content a { overflow: hidden; } .mar-standard-card__label { position: absolute; top: 0; left: 0; z-index: 2; } .mar-standard-card__img { position: relative; z-index: 1; min-height: 123px; background: #CCCFD6; } } @media (min-width: 576px) and (max-width: 1399px) { .mar-standard-card__img { width: 540px; } } @media (min-width: 576px) and (min-width: 1200px) { .mar-standard-card__img { width: 565px; } } @media (min-width: 576px) and (max-width: 991px) { .mar-standard-card__img { width: 471px; } } @media (min-width: 576px) and (max-width: 767px) { .mar-standard-card__img { width: 739px; } } @media (min-width: 576px) and (max-width: 575px) { .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) and (max-width: 319px) { .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) { .mar-standard-card__img img { width: 100%; } .mar-standard-card__text { margin: 5px 0 10px; margin-bottom: 0; } } @media (min-width: 576px) and (max-width: 1399px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--xs .mar-standard-card__img { width: 569px; } } @media (min-width: 576px) and (min-width: 1200px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--xs .mar-standard-card__img { width: 565px; } } @media (min-width: 576px) and (max-width: 991px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--xs .mar-standard-card__img { width: 471px; } } @media (min-width: 576px) and (max-width: 767px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--xs .mar-standard-card__img { width: 720px; } } @media (min-width: 576px) and (max-width: 575px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--xs .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) and (max-width: 319px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--xs .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--m { min-width: 300px; } } @media (min-width: 576px) and (max-width: 1399px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--m .mar-standard-card__img { width: 540px; } } @media (min-width: 576px) and (min-width: 1200px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--m .mar-standard-card__img { width: 396px; } } @media (min-width: 576px) and (max-width: 991px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--m .mar-standard-card__img { width: 471px; } } @media (min-width: 576px) and (max-width: 767px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--m .mar-standard-card__img { width: 359px; } } @media (min-width: 576px) and (max-width: 575px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--m .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) and (max-width: 319px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--m .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--m .mar-standard-card__img-icon svg { font-size: var(--font-size-m); } .mar-standard-card.mar-standard-card--3.mar-standard-card--m .mar-standard-card__img-icon svg.icon-comments { font-size: var(--font-size-l); } .mar-standard-card.mar-standard-card--3.mar-standard-card--l { min-width: 290px; } } @media (min-width: 576px) and (max-width: 1399px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img { width: 550px; } } @media (min-width: 576px) and (min-width: 1200px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img { width: 550px; } } @media (min-width: 576px) and (max-width: 991px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img { width: 471px; } } @media (min-width: 576px) and (max-width: 767px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img { width: 720px; } } @media (min-width: 576px) and (max-width: 575px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) and (max-width: 319px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img-icon svg { font-size: var(--font-size-m); } } @media (min-width: 576px) and (min-width: 576px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img-icon svg { font-size: var(--font-size-l); } } @media (min-width: 576px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img-icon svg.icon-comments { font-size: var(--font-size-xs); } } @media (min-width: 576px) and (min-width: 576px) { .mar-standard-card.mar-standard-card--3.mar-standard-card--l .mar-standard-card__img-icon svg.icon-comments { font-size: var(--font-size-l); } } @media (min-width: 576px) { .mar-standard-card.mar-standard-card--4.mar-standard-card--xs { min-width: 220px; } .mar-standard-card.mar-standard-card--4.mar-standard-card--xs .mar-standard-card__img { min-height: 123px; } .mar-standard-card.mar-standard-card--4.mar-standard-card--m { min-width: 363px; } .mar-standard-card.mar-standard-card--4.mar-standard-card--m .mar-standard-card__img { min-height: 204px; } .mar-standard-card.mar-standard-card--4.mar-standard-card--m .mar-standard-card__img-icon svg { font-size: var(--font-size-m); } .mar-standard-card.mar-standard-card--4.mar-standard-card--m .mar-standard-card__img-icon svg.icon-comments { font-size: var(--font-size-l); } .mar-standard-card.mar-standard-card--5.mar-standard-card--xs { min-width: 300px; } } @media (min-width: 576px) and (max-width: 1399px) { .mar-standard-card.mar-standard-card--5.mar-standard-card--xs .mar-standard-card__img { width: 550px; } } @media (min-width: 576px) and (min-width: 1200px) { .mar-standard-card.mar-standard-card--5.mar-standard-card--xs .mar-standard-card__img { width: 400px; } } @media (min-width: 576px) and (max-width: 991px) { .mar-standard-card.mar-standard-card--5.mar-standard-card--xs .mar-standard-card__img { width: 471px; } } @media (min-width: 576px) and (max-width: 767px) { .mar-standard-card.mar-standard-card--5.mar-standard-card--xs .mar-standard-card__img { width: 620px; } } @media (min-width: 576px) and (max-width: 575px) { .mar-standard-card.mar-standard-card--5.mar-standard-card--xs .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) and (max-width: 319px) { .mar-standard-card.mar-standard-card--5.mar-standard-card--xs .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) { .mar-standard-card.mar-standard-card--5.mar-standard-card--xs .mar-standard-card__img-icon svg { font-size: var(--font-size-m); } .mar-standard-card.mar-standard-card--5.mar-standard-card--xs .mar-standard-card__img-icon svg.icon-comments { font-size: var(--font-size-l); } .mar-standard-card.mar-standard-card--7 .mar-standard-card__text { font-size: var(--font-size-xl); } .mar-standard-card.mar-standard-card--7.mar-standard-card--m { min-width: 427px; } } @media (min-width: 576px) and (max-width: 1399px) { .mar-standard-card.mar-standard-card--7.mar-standard-card--m .mar-standard-card__img { width: 540px; } } @media (min-width: 576px) and (min-width: 1200px) { .mar-standard-card.mar-standard-card--7.mar-standard-card--m .mar-standard-card__img { width: 400px; } } @media (min-width: 576px) and (max-width: 991px) { .mar-standard-card.mar-standard-card--7.mar-standard-card--m .mar-standard-card__img { width: 471px; } } @media (min-width: 576px) and (max-width: 767px) { .mar-standard-card.mar-standard-card--7.mar-standard-card--m .mar-standard-card__img { width: 620px; } } @media (min-width: 576px) and (max-width: 575px) { .mar-standard-card.mar-standard-card--7.mar-standard-card--m .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) and (max-width: 319px) { .mar-standard-card.mar-standard-card--7.mar-standard-card--m .mar-standard-card__img { width: 128px; } } @media (min-width: 576px) { .mar-standard-card.mar-standard-card--7.mar-standard-card--m .mar-standard-card__img-icon svg { font-size: var(--font-size-m); } .mar-standard-card.mar-standard-card--7.mar-standard-card--m .mar-standard-card__img-icon svg.icon-comments { font-size: var(--font-size-l); } .mar-standard-card.mar-standard-card--7.mar-standard-card--l .mar-standard-card__img-icon svg { font-size: var(--font-size-m); } .mar-standard-card.mar-standard-card--7.mar-standard-card--l .mar-standard-card__img-icon svg.icon-comments { font-size: var(--font-size-l); } } @media (min-width: 768px) { .mar-standard-card.mar-standard-card--5 .mar-standard-card__content, .mar-standard-card.mar-standard-card--7 .mar-standard-card__content { padding: 0; } } @media (min-width: 1200px) { .mar-standard-card.mar-standard-card--7 .mar-standard-card__text { font-size: var(--font-size-xxl); } } .mar-topic-block { position: relative; height: -moz-fit-content; height: fit-content; min-width: 237px; margin-left: -10px; margin-right: -10px; } @media (min-width: 576px) { .mar-topic-block { margin-left: -15px; margin-right: -15px; } } @media (min-width: 768px) { .mar-topic-block { margin-left: unset; margin-right: unset; } } .mar-topic-block__header { display: flex; justify-content: space-between; align-items: center; background: var(--main-colour); padding: 10px; height: 40px; } .mar-topic-block__title { margin: 0; display: flex; justify-content: flex-start; align-items: center; } .mar-topic-block__title a { font-family: var(--article-page-headline-font); font-size: var(--font-size-m); font-weight: var(--font-weight-bold); color: #FFFFFF; text-decoration: none; } .mar-topic-block__img-content { position: relative; padding-top: 0; text-decoration: none; width: 100%; height: auto; } .mar-topic-block__img-content a { display: flex; overflow: hidden; } .mar-topic-block__img { position: relative; z-index: 1; background: #CCCFD6; overflow: hidden; padding-top: 56.25%; width: 100%; height: -moz-fit-content; height: fit-content; } .mar-topic-block__img img { position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: cover; } .mar-topic-block__icon-container { position: absolute; display: flex; right: 0; bottom: 0; justify-content: space-between; align-items: center; gap: 0 10px; margin-bottom: 10px; margin-right: 10px; } .mar-topic-block__img-icon { position: relative; width: 30px; height: 30px; background: var(--accent-colour); border-radius: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; z-index: 3; } @media (min-width: 576px) { .mar-topic-block__img-icon { width: 40px; height: 40px; } } .mar-topic-block__img-icon svg { font-size: 19px; } .mar-topic-block__img-icon path { color: #000000; } .mar-topic-block__img-icon svg[data-icon='el:play'] { margin-left: 3px; } .mar-topic-block__total-comments { font-size: 11px; font-family: var(--global-font); } .mar-topic-block__text { font-size: var(--font-size-m); color: #333333; font-family: var(--header-font); font-weight: var(--font-weight-semibold); margin: 5px 0 10px; overflow: hidden; margin-bottom: 0; } .mar-topic-block__content { display: flex; align-items: flex-end; margin-bottom: 10px; position: relative; padding: 0 10px; } .mar-topic-block__timestamp { font-family: var(--global-font); font-size: var(--font-size-xxs); color: #595959; } .mar-topic-block__timestamp span { font-family: inherit; } .mar-topic-block__mar-label { position: absolute !important; top: 0; left: 0; z-index: 2; } .mar-topic-block__mar-label .mar-label__dot { right: -5px; } .mar-topic-block .mar-label--over-image { top: 0; } @media (min-width: 320px) { .mar-topic-block.mar-topic-block--xs { min-width: 237px; } } @media (min-width: 576px) { .mar-topic-block { padding-bottom: 0; } .mar-topic-block__title a { font-size: var(--font-size-s); } } @media (min-width: 768px) { .mar-topic-block__content { padding: 0; } } @media (max-width: 992px) and (min-width: 767px) { .mar-topic-block__title a { font-size: var(--font-size-xs); } } .mar-topic-block__metadata-container { display: flex; justify-content: space-between; margin-top: 10px; padding: 5px 10px 5px; gap: 10px; grid-gap: 10px; } @media (min-width: 768px) { .mar-topic-block__metadata-container { padding: 0; } } .mar-topic-block__metadata-container .mar-topic-block__primary-tag { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; position: relative; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin: 0; overflow: hidden; } .mar-topic-block__metadata-container .mar-topic-block__primary-tag::after { content: ''; height: 1px; background: var(--accent-colour); width: 100%; display: block; position: absolute; bottom: 0; } .mar-topic-block__metadata-container .mar-topic-block__primary-tag a { font-family: var(--global-font); color: #595959; } .mar-topic-block__metadata-container .mar-topic-block__primary-tag a:hover { color: var(--alt-colour); } .mar-topic-block__comments-wrapper { display: flex; justify-content: center; align-items: center; line-height: 0; gap: 5px; grid-gap: 5px; } .mar-topic-block__comments-wrapper .icon-comments { position: relative; top: 1px; font-size: 13px; } .mar-topic-block__comments-wrapper .icon-comments path, .mar-topic-block__comments-wrapper .icon-comments rect { color: #CCCFD6; height: 14px; } #uber-ad-replacement-puzzles { position: relative; width: 100%; height: 600px; padding: 15px; border-top: 10px solid #34ADFF; border-bottom: 10px solid #3C3C3C; color: #FFFFFF; background-image: url("/resources/responsive-static/images/uber/man-with-tablet.png"); background-size: cover; } @media (max-width: 575px) { #uber-ad-replacement-puzzles { display: none; } } #uber-ad-replacement-puzzles::before { content: ''; position: absolute; inset: 0; background-color: rgba(60, 60, 60, 0.48); } #uber-ad-replacement-puzzles .included-with-sub { position: relative; font-size: var(--font-size-xxs); } #uber-ad-replacement-puzzles .layout-cols { position: relative; display: flex; height: calc(100% - 35px); } #uber-ad-replacement-puzzles .layout-cols .info-col { display: flex; flex-direction: column; justify-content: space-between; padding-right: 20px; } #uber-ad-replacement-puzzles .layout-cols .info-col .cta-section p { font-size: var(--font-size-s); margin-bottom: 30px; } #uber-ad-replacement-puzzles .layout-cols .info-col .cta-section a { display: flex; justify-content: center; align-items: center; height: 34px; width: 128px; background-color: #34ADFF; color: #222222; font-size: 18px; font-weight: var(--font-weight-bold); } #uber-ad-replacement-puzzles .layout-cols .info-col .cta-section a:hover { text-decoration: none; } #uber-ad-replacement-puzzles .layout-cols .info-col .main-content h5 { font-size: 27px; } #uber-ad-replacement-puzzles .layout-cols .info-col .main-content .sub-benefits { font-size: 14px; } #uber-ad-replacement-puzzles .layout-cols .info-col .main-content .puzzle-list > p { font-size: var(--font-size-xxs); margin-bottom: 3px; } #uber-ad-replacement-puzzles .layout-cols .graphic-col { min-width: 50px; height: 100%; background-image: url("/resources/responsive-static/images/uber/horizontal-puzzles.png"); background-size: cover; } #uber-ad-replacement-newsroom { position: relative; width: 100%; height: 250px; padding: 10px 21px; border-top: 10px solid #34ADFF; border-bottom: 10px solid #3C3C3C; color: #FFFFFF; background-image: url("/resources/responsive-static/images/uber/pointing-fingers.png"); background-size: cover; } @media (max-width: 575px) { #uber-ad-replacement-newsroom { display: none; } } #uber-ad-replacement-newsroom::before { content: ''; position: absolute; inset: 0; background-color: rgba(60, 60, 60, 0.48); } #uber-ad-replacement-newsroom .included-with-sub { position: relative; font-size: var(--font-size-xxs); margin-bottom: 10px; } #uber-ad-replacement-newsroom .main-content { position: relative; } #uber-ad-replacement-newsroom .main-content h5 { font-size: 26px; font-weight: var(--font-weight-bold); margin-bottom: 20px; } #uber-ad-replacement-newsroom .main-content p { font-size: 15px; } #uber-ad-replacement-newsroom .btn-cta { position: relative; display: flex; justify-content: center; align-items: center; height: 34px; width: 128px; background-color: #34ADFF; color: #222222; font-size: 18px; font-weight: var(--font-weight-bold); } #uber-ad-replacement-newsroom .btn-cta:hover { text-decoration: none; } #uber-ad-replacement-advertising { position: relative; width: 100%; height: 120px; padding: 10px; border-top: 10px solid #34ADFF; border-bottom: 10px solid #3C3C3C; color: #FFFFFF; background-image: url("/resources/responsive-static/images/uber/woman-with-guitar.png"); background-size: cover; } @media (max-width: 575px) { #uber-ad-replacement-advertising { display: none; } } #uber-ad-replacement-advertising::before { content: ''; position: absolute; inset: 0; background-color: rgba(60, 60, 60, 0.48); } #uber-ad-replacement-advertising .included-with-sub { position: relative; font-size: var(--font-size-xxs); line-height: 12px; } #uber-ad-replacement-advertising .main-content { position: relative; } #uber-ad-replacement-advertising .main-content h5 { font-size: 23px; font-weight: var(--font-weight-bold); margin-bottom: 0; margin-top: 4px; } #uber-ad-replacement-advertising .main-content p { font-size: 13px; margin-bottom: 0; line-height: 16px; } #uber-ad-replacement-rewards { position: relative; width: 100%; height: 250px; padding: 10px 5px 10px 20px; border-top: 10px solid #34ADFF; border-bottom: 10px solid #3C3C3C; color: #FFFFFF; background-image: url("/resources/responsive-static/images/uber/woman-with-phone.png"); background-size: cover; } @media (max-width: 575px) { #uber-ad-replacement-rewards { display: none; } } #uber-ad-replacement-rewards::before { content: ''; position: absolute; inset: 0; background-color: rgba(60, 60, 60, 0.5); } #uber-ad-replacement-rewards .included-with-sub { position: relative; font-size: var(--font-size-xxs); margin-bottom: 5px; } #uber-ad-replacement-rewards .main-content { position: relative; } #uber-ad-replacement-rewards .main-content h5 { font-size: 23px; font-weight: var(--font-weight-bold); padding-right: 40px; margin: 8px 0; } #uber-ad-replacement-rewards .main-content p { font-size: 14px; margin-bottom: 0; padding-right: 70px; line-height: 16px; } #uber-ad-replacement-rewards .main-content p a { color: #FFFFFF; text-decoration: underline; font-weight: var(--font-weight-bold); } #uber-ad-replacement-rewards .main-content .newsquest-rewards-img { height: 62px; width: 177px; float: right; background-image: url("/resources/responsive-static/images/uber/newsquest-rewards.png"); background-size: cover; } /* html-documentation * %element('chunks/ImageUploadList', id='{targetId}') * * %element('chunks/ImageUpload', id='{targetId}') */ .image-upload__uploaded-images { display: grid; position: relative; gap: 20px; grid-gap: 20px; } .image-upload__image-item { display: grid; gap: 15px; grid-gap: 15px; } @media (min-width: 768px) { .image-upload__image-item { grid-template-columns: 1fr 5fr; } } .image-upload__image-item img { width: 100%; max-width: 200px; } @media (min-width: 768px) { .image-upload__image-item img { width: auto; max-height: 150px; } } .image-upload__image-item .mandatory-question { color: #9D0D13; } .image-upload__image-item .magnify { cursor: pointer; } .image-upload__image-item .image-item__error { display: none; width: 100%; margin-top: 0.25rem; font-size: 80%; color: #9D0D13; } .image-upload__image-item .image-item__source { display: grid; gap: 20px; grid-gap: 20px; } @media (min-width: 768px) { .image-upload__image-item .image-item__source { grid-template-columns: repeat(2, 1fr); } } .image-upload__image-item .image-item__delete { text-align: right; } .image-upload__photos--input { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: 1; } .image-upload__photos--label { text-align: center; border: 1px dashed #9DA0A4; padding: 30px 50px; cursor: pointer; max-width: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; grid-gap: 5px; } .image-upload__photos--label svg { font-size: var(--font-size-xxl); } .image-upload__image { min-width: 200px; } .image-upload__image-wrapper { max-width: 650px; } .ccn-assignment-response { background: #FFFFFF; font-family: var(--global-font); } .ccn-assignment-response__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); } .ccn-assignment-response__desc { font-weight: var(--font-weight-regular); font-size: var(--font-size-s); font-family: var(--global-font); } .ccn-assignment-response label { font-weight: var(--font-weight-semibold); font-size: var(--font-size-s); font-family: var(--global-font); display: inline-block !important; } .ccn-assignment-response label.max-limit { font-weight: var(--font-weight-regular); } .ccn-assignment-response__question-list .mandatory-question, .ccn-assignment-response__system-list .mandatory-question, .ccn-assignment-response__photo-clone .mandatory-question { color: #9D0D13; } .ccn-assignment-response__question-list input, .ccn-assignment-response__question-list textarea, .ccn-assignment-response__system-list input, .ccn-assignment-response__system-list textarea, .ccn-assignment-response__photo-clone input, .ccn-assignment-response__photo-clone textarea { color: #333333; } .ccn-assignment-response__question-list .mar-form-elements__form-control, .ccn-assignment-response__system-list .mar-form-elements__form-control, .ccn-assignment-response__photo-clone .mar-form-elements__form-control { margin-top: 5px; } .ccn-assignment-response__photo-clone .img-upload-label { display: flex !important; text-align: center; border: 1px dashed #9DA0A4; padding: 30px 50px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; grid-gap: 5px; } .ccn-assignment-response__photo-clone .img-upload-label svg { font-size: var(--font-size-xxl); } .ccn-assignment-response__submit-container { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; grid-gap: 20px; } .ccn-assignment-response__submit-container a { color: #188AE2; } @media (min-width: 768px) { .ccn-assignment-response__submit-container button { width: 250px; } } @media (min-width: 576px) { .ccn-assignment-response__submit-container { flex-direction: row; gap: 50px; grid-gap: 50px; } } .ccn-assignment-response__contributor-terms { display: flex; justify-content: center; align-items: center; align-self: flex-start; gap: 4px; grid-gap: 4px; } .ccn-assignment-response__contributor-terms input, .ccn-assignment-response__contributor-terms label { cursor: pointer; margin: 0; } .ccn-assignment-response__contributor-terms button { width: 100%; } @media (min-width: 576px) { .ccn-assignment-response__contributor-terms button { width: unset; } } @media (min-width: 576px) { .ccn-assignment-response__contributor-terms { align-self: center; } } .ccn-assignment-response__image-magnify { cursor: default; margin: auto; } .ccn-assignment-response__image-magnify.magnify { cursor: pointer; } .ccn-assignment-response__modal .mar-modal__dialog { max-height: 90vh; } .ccn-assignment-response__success-btn-container a { color: #188AE2; } .ccn-assignment-response__success-btn { padding: 10px; display: block; width: 100%; margin: 25px auto; color: #000000; } @media (min-width: 768px) { .ccn-assignment-response__success-btn { width: 500px; } } .ccn-assignment-response__system-question-container .mar-alert a { color: #188AE2; } .ccn-assignment-response__system-question-container .credit-me, .ccn-assignment-response__system-question-container .credit-me-input { cursor: pointer; } .ccn-assignment-response__uploaded-images { display: flex; flex-direction: column; gap: 15px; grid-gap: 15px; } .ccn-assignment-response__uploaded-images .image-item { display: flex; flex-direction: column; gap: 20px; grid-gap: 20px; } @media (min-width: 576px) { .ccn-assignment-response__uploaded-images .image-item { flex-direction: row; } } .ccn-assignment-response__img-container { min-width: 200px; } .ccn-assignment-response__img-container img { max-width: 200px; } .ccn-assignment-response___image-section .img-upload-label { text-align: center; border: 1px dashed #E6E6E9; padding: 15px 20px; cursor: pointer; } .ccn-assignment-response__success-msg .site-masthead { font-size: 41px; line-height: 61px; margin-bottom: 10px; margin-top: 10px; display: flex; align-items: center; justify-content: center; } .ccn-assignment-response__success-msg .image-button-container { display: flex; justify-content: center; align-items: center; flex-direction: column; } @media (min-width: 768px) { .ccn-assignment-response__success-msg .image-button-container { flex-direction: row; } } .ccn-assignment-response__success-msg .image-button-container .msg-image-container { margin: auto; } .ccn-assignment-response .is-invalid { border-color: #9D0D13; } .ccn-assignment-response .is-valid { border-color: #E6E6E9; } /* CCN Assignment */ .ugcCollectionDisplay { background: var(--main-colour); color: #FFFFFF; padding: 25px; border-radius: 5px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.19); cursor: default; } .ugcCollectionDisplay .ugcCollectionHeading { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; position: relative; width: -moz-fit-content; width: fit-content; margin-bottom: 25px; } .ugcCollectionDisplay .ugcCollectionHeading::after { content: ''; position: absolute; width: 100%; height: 1px; background: #BC7A16; bottom: 0; left: 0; } .ugcCollectionDisplay .ugcCollectionTitle { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); margin-bottom: 10px; } .ugcCollectionDisplay .ugcCollectionDescription { font-size: var(--font-size-m); font-weight: var(--font-weight-regular); margin-bottom: 25px; } .ugcCollectionDisplay .ugc-description-copy { margin-bottom: 5px; font-size: var(--font-size-m); font-weight: var(--font-weight-bold); } /* CCN Responses */ .ugcCollectionResponses { background-color: #FFFFFF; margin-top: -5px; margin-bottom: 50px; padding: 0 25px 25px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: solid 1px #CCCFD6; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.19); cursor: default; } .ugcCollectionResponses .ugc-contibutor-names { font-size: var(--font-size-m); display: block; margin-bottom: 10px; margin-top: 50px; } .ugcCollectionResponses .ugc-contibutor-names .ugc-from { padding-right: 10px; } .ugcCollectionResponses .ugc-content-response p, .ugcCollectionResponses .ugc-content-response strong { font-size: var(--font-size-m); } .ugcCollectionResponses .ugc-content-response p { margin-bottom: 20px; } .ugcCollectionResponses .ugc-content-response strong { padding-right: 10px; } .ugcCollectionResponses .ugc-content-response .ugc-short-text { margin-bottom: 10px; } .ugcCollectionResponses .ugc-content-response .ugc-long-text span { display: block; margin-top: 5px; } .ugcCollectionResponses .ugc-content-response .ugc-photo { margin-bottom: 10px; } .ugcCollectionResponses .ugc-contribution-media { margin-bottom: 25px; } .ugcCollectionResponses .ugc-contribution-media .ugcContributionImageContainer img { width: 100%; } .ugcCollectionResponses .ugc-contribution-media .ugcContributionImageContainer .inline-image-caption, .ugcCollectionResponses .ugc-contribution-media .ugcContributionImageContainer .ugc-contribution { display: block; background: var(--main-colour); color: #FFFFFF; font-size: var(--font-size-xs); font-family: var(--body-font); font-weight: var(--font-weight-semibold); padding: 10px 10px 5px; } .ugcCollectionResponses .ugc-contribution-media .ugcContributionImageContainer .ugc-contribution { font-size: 10px; padding-top: 0; padding-bottom: 10px; } .feature-showcase__item { position: relative; } .feature-showcase__headline-container { padding: 15px; height: 100%; width: 100%; background: #F2F2F3; } .feature-showcase__headline-container .mar-label { padding: 0; } .feature-showcase__headline-container .mar-label__live-label { padding-right: 15px; } .feature-showcase__headline-container .timestamp { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: #595959; } .feature-showcase__headline-container .media-icon { background: #FFFFFF; border-radius: 50%; height: 15px; width: 15px; display: inline-flex; justify-content: center; align-items: center; } .feature-showcase__headline-container .media-icon svg { font-size: 10px; margin-left: 1px; } .feature-showcase__headline { font-size: var(--font-size-s); font-weight: var(--font-weight-semibold); } .feature-showcase__list-item { position: relative; padding: 0; flex: 1; list-style: none; border-left: 5px #F2F2F3 solid; border-top: none; cursor: pointer; } @media (min-width: 576px) { .feature-showcase__list-item { border-top: 5px transparent solid; border-left: none; } } .feature-showcase__list-item.active { border-left: 5px var(--accent-colour) solid; border-top: none; } @media (min-width: 576px) { .feature-showcase__list-item.active { border-top: 5px var(--accent-colour) solid; border-left: none; } } .feature-showcase__list-item.active .feature-showcase__headline-container { background: #FFFFFF; } .feature-showcase__list-item .admin-links-toggler { bottom: 5px; } .feature-showcase__image { position: relative; min-height: 200px; padding-top: 56.25%; } .feature-showcase__image h3 { margin: 0; } @media (min-width: 1200px) { .feature-showcase__image { min-height: 343px; } } .feature-showcase__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .feature-showcase__carousel { background: #FFFFFF; } .feature-showcase__carousel-controls { display: flex; flex-direction: column; margin-top: -6px; } @media (min-width: 576px) { .feature-showcase__carousel-controls { flex-direction: row; margin-top: -11px; } } @media (min-width: 768px) { .feature-showcase__carousel-controls { position: absolute; bottom: 23px; left: 20px; width: calc(100% - 40px); } } .feature-showcase__stars-label { margin: 0 0 10px; display: inline; height: 100px; margin-bottom: -10px; } .feature-showcase__stars-label .stars-label__rating-text { display: none; } .feature-showcase__stars-label .star-ratings-sprite { display: inline-block; margin-bottom: -8px; } .feature-showcase__icon-container { display: flex; justify-content: space-between; align-items: center; } .feature-showcase__primary-tag { color: var(--alt-colour); font-family: var(--global-font); font-size: 11px; } .feature-showcase__comments svg { background: none; vertical-align: -5px !important; width: 13px; } .feature-showcase__comments svg path { color: #CCCFD6; } .feature-showcase__comments svg rect { color: #CCCFD6; } .feature-showcase__comments span { font-family: var(--global-font); font-size: 11px; color: #333333; } body:not(.allow-skins) .article-grid-gap, body:not(.allow-skins) .allow-skins .container--enhanced .article-grid__uber, .allow-skins .container--enhanced body:not(.allow-skins) .article-grid__uber { display: grid; grid-gap: 40px 15px; gap: 40px 15px; } @media (min-width: 992px) { body:not(.allow-skins) .article-grid-gap, body:not(.allow-skins) .allow-skins .container--enhanced .article-grid__uber, .allow-skins .container--enhanced body:not(.allow-skins) .article-grid__uber { grid-gap: 40px 20px; gap: 40px 20px; } } body.allow-skins .article-grid-gap, body.allow-skins .container--enhanced .article-grid__uber { display: grid; grid-gap: 40px 15px; gap: 40px 15px; } @media (min-width: 992px) { body.allow-skins .article-grid-gap, body.allow-skins .container--enhanced .article-grid__uber { grid-gap: 40px 15px; gap: 40px 15px; } } /* stylelint-disable value-no-vendor-prefix */ /* ----- Global Omnicard styles (Non specific to individial Omnicard type) ----- */ .omnicard { display: flex; flex-direction: column; position: relative; height: -moz-fit-content; height: fit-content; gap: 10px; grid-gap: 10px; /* Iterates and checks each screensize, if screensize is XL then use 'min-width' otherwise use 'max width' in the @media breakpoint, this is to account for screen sizes widths above the values specified in omniCardScreenSizes, */ /* ----- Globally defined styles for each Omnicard type ----- */ /* ----- Screensize-specific styles for each Omnicard type ----- */ /* ----- Globally defined styles for each Omnicard type ----- */ /* ----- Screensize-specific styles for each Omnicard type ----- */ /* ----- Globally defined styles for each Omnicard type ----- */ /* ----- Screensize-specific styles for each Omnicard type ----- */ /* ----- Globally defined styles for each Omnicard type ----- */ /* ----- Screensize-specific styles for each Omnicard type ----- */ } .omnicard__headline-container { display: flex; flex-direction: column; overflow: hidden; gap: 5px; grid-gap: 5px; } .omnicard__headline-container .omnicard__headline { font-weight: var(--font-weight-semibold); font-family: var(--article-page-headline-font); color: #333333; margin: 0; } .omnicard__metadata-container { display: flex; justify-content: space-between; gap: 10px; grid-gap: 10px; } .omnicard__metadata-container .omnicard__primary-tag { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; position: relative; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin: 0; overflow: hidden; } .omnicard__metadata-container .omnicard__primary-tag::after { content: ''; height: 1px; background: var(--accent-colour); width: 100%; display: block; position: absolute; bottom: 0; } .omnicard__metadata-container .omnicard__primary-tag a { font-family: var(--global-font); color: #595959; } .omnicard__metadata-container .omnicard__primary-tag a:hover { color: var(--alt-colour); } .omnicard__image { position: relative; display: block; } .omnicard__image img { display: block; width: 100%; background: #CCCFD6; overflow: hidden; position: relative; } .omnicard__image .square { display: none; } .omnicard__image-placeholder { aspect-ratio: 16 / 9; } .omnicard__image-icons { position: absolute; bottom: 10px; right: 10px; display: flex; flex-direction: row; gap: 10px; grid-gap: 10px; } .omnicard__image-icons .image-icon { cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; background: var(--accent-colour); border-radius: 50%; } .omnicard__image-icons .image-icon.icon-camera svg { font-size: 26px; } .omnicard__image-icons .image-icon.icon-video svg { position: relative; left: 2px; font-size: 26px; } .omnicard [class^='image-label'] { position: absolute; place-items: center; top: 0; left: 0; height: 22px; font-family: var(--global-font); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; color: #FFFFFF; background: #8E1D84; padding: 0 10px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 90%; } .omnicard [class^='image-label'] .dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 100%; } .omnicard [class^='image-label'].image-label-live { background: #9D0D13; padding-right: 22px; } .omnicard [class^='image-label'].image-label-breaking-label { background: #9D0D13; } .omnicard [class^='image-label'].image-label-sponsored-label { color: #2A652D; background: #F2F2F3; } .omnicard [class^='image-label'].image-label-exclusive-label { background: #8E1D84; } .omnicard [class^='image-label'].image-label-custom-callout-label, .omnicard [class^='image-label'].image-label-updated-label, .omnicard [class^='image-label'].image-label-community-contribution-label { background: #595959; } .omnicard__stars-label { top: 10px; } .omnicard__comments-wrapper { display: flex; justify-content: center; align-items: center; line-height: 0; gap: 5px; grid-gap: 5px; } .omnicard__comments-wrapper .icon-comments { position: relative; top: 1px; font-size: 13px; } .omnicard__comments-wrapper .icon-comments path, .omnicard__comments-wrapper .icon-comments rect { color: #CCCFD6; height: 14px; } .omnicard__total-comments { font-family: var(--global-font); font-size: 11px; font-weight: var(--font-weight-semibold); color: #595959; margin-bottom: 1px; } .omnicard__total-comments:hover { color: var(--alt-colour); } .omnicard[class*='big-stack--'] { position: relative; } .omnicard[class*='stack--'] { position: relative; } .omnicard[class*='compact-stack--'] { position: relative; } .omnicard[class*='inline--'] { position: relative; } @media (min-width: 993px) { .omnicard.big-stack--xl .omnicard__primary-tag::after { display: none; } .omnicard.big-stack--xl .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.big-stack--xl .omnicard__image .rectangle { display: block; } .omnicard.big-stack--xl .omnicard__image .square { display: none; } } @media (min-width: 993px) { .omnicard.stack--xl .omnicard__headline { font-size: var(--font-size-m); line-height: var(--standard-line-height); } .omnicard.stack--xl .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.stack--xl .omnicard__image .rectangle { display: block; } .omnicard.stack--xl .omnicard__image .square { display: none; } } @media (min-width: 993px) { .omnicard.compact-stack--xl .omnicard__headline { font-size: var(--font-size-s); line-height: 20px; } .omnicard.compact-stack--xl .omnicard .image-label-custom-callout-label { display: none; } .omnicard.compact-stack--xl .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.compact-stack--xl .omnicard__image .rectangle { display: block; } .omnicard.compact-stack--xl .omnicard__image .square { display: none; } } @media (min-width: 993px) { .omnicard.inline--xl { display: grid; grid-template-columns: 90px 1fr; } .omnicard.inline--xl .omnicard__headline { line-height: var(--standard-line-height); font-weight: var(--font-weight-semibold); } .omnicard.inline--xl .omnicard__stars-label { display: none; } .omnicard.inline--xl .omnicard__image { display: flex; width: 90px; height: 90px; } .omnicard.inline--xl .omnicard__image img { object-fit: cover; object-position: center; } .omnicard.inline--xl .omnicard__image .rectangle { display: none; } .omnicard.inline--xl .omnicard__image .square { display: block; } .omnicard.inline--xl .omnicard__image .image-label { display: none; } .omnicard.inline--xl .omnicard__image-icons { bottom: 5px; right: 5px; gap: 5px; grid-gap: 5px; } .omnicard.inline--xl .omnicard__image-icons .image-icon.icon-video, .omnicard.inline--xl .omnicard__image-icons .image-icon.icon-camera { height: 30px; width: 30px; } .omnicard.inline--xl .omnicard__image-icons .image-icon.icon-video svg, .omnicard.inline--xl .omnicard__image-icons .image-icon.icon-camera svg { font-size: 18px; } .omnicard.inline--xl .omnicard__primary-tag { height: 12px; } .omnicard.inline--xl .omnicard__tag { line-height: 89%; } .omnicard.inline--xl .omnicard__comments-wrapper { display: none; } } @media (min-width: 992px) { .omnicard.big-stack--xl { display: flex; } .omnicard.big-stack--xl .omnicard__headline { font-size: var(--font-size-xl); line-height: 36px; } .omnicard.stack--xl { display: flex; } .omnicard.compact-stack--xl { display: flex; } .omnicard.inline--xl { display: grid; } .omnicard.inline--xl .omnicard__headline { font-size: var(--font-size-m); } } @media (max-width: 992px) { .omnicard.big-stack--lg .omnicard__primary-tag::after { display: none; } .omnicard.big-stack--lg .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.big-stack--lg .omnicard__image .rectangle { display: block; } .omnicard.big-stack--lg .omnicard__image .square { display: none; } } @media (max-width: 992px) { .omnicard.stack--lg .omnicard__headline { font-size: var(--font-size-m); line-height: var(--standard-line-height); } .omnicard.stack--lg .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.stack--lg .omnicard__image .rectangle { display: block; } .omnicard.stack--lg .omnicard__image .square { display: none; } } @media (max-width: 992px) { .omnicard.compact-stack--lg .omnicard__headline { font-size: var(--font-size-s); line-height: 20px; } .omnicard.compact-stack--lg .omnicard .image-label-custom-callout-label { display: none; } .omnicard.compact-stack--lg .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.compact-stack--lg .omnicard__image .rectangle { display: block; } .omnicard.compact-stack--lg .omnicard__image .square { display: none; } } @media (max-width: 992px) { .omnicard.inline--lg { display: grid; grid-template-columns: 90px 1fr; } .omnicard.inline--lg .omnicard__headline { line-height: var(--standard-line-height); font-weight: var(--font-weight-semibold); } .omnicard.inline--lg .omnicard__stars-label { display: none; } .omnicard.inline--lg .omnicard__image { display: flex; width: 90px; height: 90px; } .omnicard.inline--lg .omnicard__image img { object-fit: cover; object-position: center; } .omnicard.inline--lg .omnicard__image .rectangle { display: none; } .omnicard.inline--lg .omnicard__image .square { display: block; } .omnicard.inline--lg .omnicard__image .image-label { display: none; } .omnicard.inline--lg .omnicard__image-icons { bottom: 5px; right: 5px; gap: 5px; grid-gap: 5px; } .omnicard.inline--lg .omnicard__image-icons .image-icon.icon-video, .omnicard.inline--lg .omnicard__image-icons .image-icon.icon-camera { height: 30px; width: 30px; } .omnicard.inline--lg .omnicard__image-icons .image-icon.icon-video svg, .omnicard.inline--lg .omnicard__image-icons .image-icon.icon-camera svg { font-size: 18px; } .omnicard.inline--lg .omnicard__primary-tag { height: 12px; } .omnicard.inline--lg .omnicard__tag { line-height: 89%; } .omnicard.inline--lg .omnicard__comments-wrapper { display: none; } } @media (max-width: 991px) { .omnicard.big-stack--lg { display: flex; } .omnicard.big-stack--lg .omnicard__headline { font-size: var(--font-size-xl); line-height: 36px; } .omnicard.stack--lg { display: flex; } .omnicard.compact-stack--lg { display: flex; } .omnicard.inline--lg { display: grid; } .omnicard.inline--lg .omnicard__headline { font-size: var(--font-size-s); } } @media (max-width: 768px) { .omnicard.big-stack--md .omnicard__primary-tag::after { display: none; } .omnicard.big-stack--md .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.big-stack--md .omnicard__image .rectangle { display: block; } .omnicard.big-stack--md .omnicard__image .square { display: none; } } @media (max-width: 768px) { .omnicard.stack--md .omnicard__headline { font-size: var(--font-size-m); line-height: var(--standard-line-height); } .omnicard.stack--md .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.stack--md .omnicard__image .rectangle { display: block; } .omnicard.stack--md .omnicard__image .square { display: none; } } @media (max-width: 768px) { .omnicard.compact-stack--md .omnicard__headline { font-size: var(--font-size-s); line-height: 20px; } .omnicard.compact-stack--md .omnicard .image-label-custom-callout-label { display: none; } .omnicard.compact-stack--md .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.compact-stack--md .omnicard__image .rectangle { display: block; } .omnicard.compact-stack--md .omnicard__image .square { display: none; } } @media (max-width: 768px) { .omnicard.inline--md { display: grid; grid-template-columns: 90px 1fr; } .omnicard.inline--md .omnicard__headline { line-height: var(--standard-line-height); font-weight: var(--font-weight-semibold); } .omnicard.inline--md .omnicard__stars-label { display: none; } .omnicard.inline--md .omnicard__image { display: flex; width: 90px; height: 90px; } .omnicard.inline--md .omnicard__image img { object-fit: cover; object-position: center; } .omnicard.inline--md .omnicard__image .rectangle { display: none; } .omnicard.inline--md .omnicard__image .square { display: block; } .omnicard.inline--md .omnicard__image .image-label { display: none; } .omnicard.inline--md .omnicard__image-icons { bottom: 5px; right: 5px; gap: 5px; grid-gap: 5px; } .omnicard.inline--md .omnicard__image-icons .image-icon.icon-video, .omnicard.inline--md .omnicard__image-icons .image-icon.icon-camera { height: 30px; width: 30px; } .omnicard.inline--md .omnicard__image-icons .image-icon.icon-video svg, .omnicard.inline--md .omnicard__image-icons .image-icon.icon-camera svg { font-size: 18px; } .omnicard.inline--md .omnicard__primary-tag { height: 12px; } .omnicard.inline--md .omnicard__tag { line-height: 89%; } .omnicard.inline--md .omnicard__comments-wrapper { display: none; } } @media (max-width: 767px) { .omnicard.big-stack--md { display: flex; } .omnicard.big-stack--md .omnicard__headline { font-size: var(--font-size-xl); line-height: 28px; } .omnicard.stack--md { display: flex; } .omnicard.compact-stack--md { display: flex; } .omnicard.inline--md { display: grid; } .omnicard.inline--md .omnicard__headline { font-size: var(--font-size-m); } } @media (max-width: 576px) { .omnicard.big-stack--sm .omnicard__primary-tag::after { display: none; } .omnicard.big-stack--sm .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.big-stack--sm .omnicard__image .rectangle { display: block; } .omnicard.big-stack--sm .omnicard__image .square { display: none; } } @media (max-width: 576px) { .omnicard.stack--sm .omnicard__headline { font-size: var(--font-size-m); line-height: var(--standard-line-height); } .omnicard.stack--sm .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.stack--sm .omnicard__image .rectangle { display: block; } .omnicard.stack--sm .omnicard__image .square { display: none; } } @media (max-width: 576px) { .omnicard.compact-stack--sm .omnicard__headline { font-size: var(--font-size-s); line-height: 20px; } .omnicard.compact-stack--sm .omnicard .image-label-custom-callout-label { display: none; } .omnicard.compact-stack--sm .omnicard__image { display: block; width: 100%; height: 100%; } .omnicard.compact-stack--sm .omnicard__image .rectangle { display: block; } .omnicard.compact-stack--sm .omnicard__image .square { display: none; } } @media (max-width: 576px) { .omnicard.inline--sm { display: grid; grid-template-columns: 90px 1fr; } .omnicard.inline--sm .omnicard__headline { line-height: var(--standard-line-height); font-weight: var(--font-weight-semibold); } .omnicard.inline--sm .omnicard__stars-label { display: none; } .omnicard.inline--sm .omnicard__image { display: flex; width: 90px; height: 90px; } .omnicard.inline--sm .omnicard__image img { object-fit: cover; object-position: center; } .omnicard.inline--sm .omnicard__image .rectangle { display: none; } .omnicard.inline--sm .omnicard__image .square { display: block; } .omnicard.inline--sm .omnicard__image .image-label { display: none; } .omnicard.inline--sm .omnicard__image-icons { bottom: 5px; right: 5px; gap: 5px; grid-gap: 5px; } .omnicard.inline--sm .omnicard__image-icons .image-icon.icon-video, .omnicard.inline--sm .omnicard__image-icons .image-icon.icon-camera { height: 30px; width: 30px; } .omnicard.inline--sm .omnicard__image-icons .image-icon.icon-video svg, .omnicard.inline--sm .omnicard__image-icons .image-icon.icon-camera svg { font-size: 18px; } .omnicard.inline--sm .omnicard__primary-tag { height: 12px; } .omnicard.inline--sm .omnicard__tag { line-height: 89%; } .omnicard.inline--sm .omnicard__comments-wrapper { display: none; } } @media (max-width: 575px) { .omnicard.big-stack--sm { display: flex; } .omnicard.big-stack--sm .omnicard__headline { font-size: var(--font-size-l); line-height: 28px; } .omnicard.stack--sm { display: flex; } .omnicard.compact-stack--sm { display: flex; } .omnicard.compact-stack--sm .image-label, .omnicard.compact-stack--sm .omnicard__image-icons, .omnicard.compact-stack--sm .omnicard__stars-label { display: none; } .omnicard.inline--sm { display: grid; } .omnicard.inline--sm .omnicard__headline { font-size: var(--font-size-s); font-weight: var(--font-weight-semibold); } } @media (min-width: 992px) { .allow-skins .inline--xl .omnicard__headline { font-size: 15px; } } .hide-comments-taxonomy .omnicard__metadata-container, .hide-comments-taxonomy .omni-lead-story__metadata-container { display: none; } .hide-comments-taxonomy .block-article-lead__container .mar-lead-story__comment-icon, .hide-comments-taxonomy .block-article-disaster__container .mar-lead-story__comment-icon { display: none; } .hide-comments-taxonomy .block-article-bowie__container .commnent-icon { display: none; } /* stylelint-disable value-no-vendor-prefix */ .omni-lead-story { margin-left: -10px; margin-right: -10px; position: relative; flex-direction: column; margin-bottom: 50px; } @media (min-width: 576px) { .omni-lead-story { margin-left: -15px; margin-right: -15px; } } @media (min-width: 768px) { .omni-lead-story { margin-left: unset; margin-right: unset; } } @media (min-width: 768px) { .omni-lead-story { flex-direction: row; margin-bottom: 25px; } } .omni-lead-story__label { position: absolute; z-index: 2; top: 10px; } .omni-lead-story__link { color: #333333; font-family: var(--article-page-headline-font); font-size: var(--font-size-mll); font-weight: var(--font-weight-bold); line-height: var(--standard-line-height); } .omni-lead-story__link span { font-family: inherit; margin-right: 10px; } @media (min-width: 768px) { .omni-lead-story__link { font-size: var(--font-size-mll); } } @media (min-width: 1200px) { .omni-lead-story__link { font-size: var(--font-size-xxl); } } .omni-lead-story__link:hover { color: #000000; text-decoration: none; } .omni-lead-story__headline-container { display: flex; flex-direction: column; overflow: hidden; gap: 5px; grid-gap: 5px; } .omni-lead-story__headline-container .omni-lead-story__headline { font-family: var(--article-page-headline-font); max-width: unset; margin: 0 10px 10px 10px; font-size: var(--font-size-mll); font-weight: var(--font-weight-heading); line-height: var(--standard-line-height); order: 2; } @media (min-width: 768px) { .omni-lead-story__headline-container .omni-lead-story__headline { order: 1; margin: 0; max-width: 100%; font-size: var(--font-size-mll); } } @media (min-width: 1200px) { .omni-lead-story__headline-container .omni-lead-story__headline { font-size: var(--font-size-xxl); } } .omni-lead-story__metadata-container { display: flex; justify-content: space-between; order: 1; margin: 10px 10px 0 10px; gap: 10px; grid-gap: 10px; } .omni-lead-story__metadata-container .omni-lead-story__primary-tag { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; position: relative; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin: 0; overflow: hidden; } .omni-lead-story__metadata-container .omni-lead-story__primary-tag::after { content: ''; height: 1px; background: var(--accent-colour); width: 100%; display: block; position: absolute; bottom: 0; } .omni-lead-story__metadata-container .omni-lead-story__primary-tag a { font-family: var(--global-font); color: #595959; } .omni-lead-story__metadata-container .omni-lead-story__primary-tag a:hover { color: var(--alt-colour); } .omni-lead-story__comments-wrapper { display: flex; justify-content: center; align-items: center; line-height: 0; gap: 5px; grid-gap: 5px; } .omni-lead-story__comments-wrapper .icon-comments { position: relative; top: 1px; font-size: 13px; } .omni-lead-story__comments-wrapper .icon-comments path, .omni-lead-story__comments-wrapper .icon-comments rect { color: #CCCFD6; height: 14px; } .omni-lead-story__total-comments { font-family: var(--global-font); font-size: 11px; font-weight: var(--font-weight-semibold); color: #595959; margin-bottom: 1px; } .omni-lead-story__total-comments:hover { color: var(--alt-colour); } .omni-lead-story__first-par { display: none; font-family: var(--body-font); font-size: var(--font-size-s); color: #333333; font-weight: var(--font-weight-regular); line-height: 30px; margin-top: 25px; } @media (min-width: 992px) { .omni-lead-story__first-par { display: block; } } .omni-lead-story__timestamp { display: block; margin-top: 10px; } .omni-lead-story__timestamp span { color: #595959; font-family: var(--global-font); font-weight: var(--font-weight-regular); font-size: var(--font-size-xxs); } .omni-lead-story__image-content { position: relative; grid-column: span 2/span 2; order: 2; height: -moz-fit-content; height: fit-content; } .omni-lead-story__image-content .stars-label { top: 10px; } .omni-lead-story__image-content img { width: 100%; } .omni-lead-story__img { background: #CCCFD6; position: relative; overflow: hidden; } @media (max-width: 1399px) { .omni-lead-story__img { width: 815px; } } @media (min-width: 1200px) { .omni-lead-story__img { width: 815px; } } @media (max-width: 991px) { .omni-lead-story__img { width: 773px; } } @media (max-width: 767px) { .omni-lead-story__img { width: 737px; } } @media (max-width: 575px) { .omni-lead-story__img { width: 576px; } } @media (max-width: 319px) { .omni-lead-story__img { width: 320px; } } .omni-lead-story__icon-container { position: absolute; display: flex; right: 0; bottom: 0; justify-content: space-between; align-items: center; gap: 0 10px; margin-bottom: 10px; margin-right: 10px; } .omni-lead-story__icon-container svg { font-size: 24px; } .omni-lead-story__icon-container path { color: #000000; } .omni-lead-story__icon-container svg[data-icon='el:play'] { margin-left: 3px; } .omni-lead-story__img-icon { position: relative; width: 40px; height: 40px; background: var(--accent-colour); border-radius: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; z-index: 3; } .omni-lead-story__img-icon svg { font-size: 24px; } .omni-lead-story__img-icon path { color: #000000; } .omni-lead-story__img-icon svg[data-icon='el:play'] { margin-left: 3px; } .omni-lead-story .mar-label { z-index: 2; } .omni-lead-story .mar-label--over-image { top: 0; } .omni-lead-story .comments-icon { float: unset; top: -8px; margin-left: 0; } .omni-lead-story--headline-over-image { display: flex !important; flex-direction: column; } @media (min-width: 576px) { .omni-lead-story--headline-over-image { margin-bottom: 25px; overflow: hidden; max-height: 530px; } } @media (min-width: 576px) { .omni-lead-story--headline-over-image .omni-lead-story__headline-container { align-self: center; background-color: white; bottom: 0; flex-direction: column-reverse; padding: 20px 20px 5px 20px; position: absolute; width: 80%; z-index: 1; } .omni-lead-story--headline-over-image .omni-lead-story__headline-container .headline { order: unset; } } .omni-lead-story--headline-over-image .omni-lead-story__image-content { order: unset; } @media (min-width: 576px) { .omni-lead-story--headline-over-image .omni-lead-story__image-content { order: 2; width: 100%; grid-column: span 3 / span 3; } } .omni-lead-story--headline-over-image .omni-lead-story__image-content img { width: 100%; max-height: 500px; object-fit: cover; object-position: center; } .omni-lead-story--headline-over-image .omni-lead-story__img { padding-top: 42.25%; } .omni-lead-story--headline-over-image .omni-lead-story__headline .omni-lead-story__first-par { display: none; } .omni-lead-story--headline-over-image .omni-lead-story__link { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: 15px 0 0 #FFFFFF, -15px 0 0 #FFFFFF; background: #FFFFFF; } .omni-lead-story--headline-over-image .omni-lead-story__timestamp { display: unset; } .omni-lead-story--headline-over-image .omni-lead-story__timestamp span { display: block; background: #FFFFFF; box-shadow: 15px 0 0 #FFFFFF, -15px 0 0 #FFFFFF; width: -moz-fit-content; width: fit-content; padding: 0; margin: -3px 0; } @media (min-width: 576px) { .omni-lead-story--headline-over-image .omni-lead-story__timestamp span { margin: -6px 0; } } @media (min-width: 576px) { .omni-lead-story--headline-over-image .omni-lead-story__metadata-container { order: 2; margin: 0; } } @media (max-width: 768px) and (min-width: 575px) { .omni-lead-story--headline-over-image .omni-lead-story__metadata-container { order: 3; margin: 0 10px; } } .omni-lead-story--standard-lead .omni-lead-story__img { max-width: 100%; } @media (min-width: 768px) { .omni-lead-story--standard-lead .omni-lead-story__metadata-container { order: 2; margin: 0; } } .omni-lead-story--headline-beneath-image { display: flex; flex-direction: column; } .omni-lead-story--headline-beneath-image .omni-lead-story__image-content { order: unset; } .omni-lead-story--headline-beneath-image .omni-lead-story__headline { order: unset; } @media (max-width: 575px) { .omni-lead-story--small-on-mobile { flex-direction: row; margin: 0; margin-left: 0 !important; margin-right: 0 !important; } .omni-lead-story--small-on-mobile .omni-lead-story__image-content { margin-right: 10px; width: 128px; } .omni-lead-story--small-on-mobile .omni-lead-story__headline, .omni-lead-story--small-on-mobile .omni-lead-story__link { font-size: var(--font-size-s); font-weight: var(--font-weight-semibold); } .omni-lead-story--small-on-mobile .omni-lead-story__headline { padding: 0; } .omni-lead-story--small-on-mobile .comments-icon { float: right; top: unset; margin-left: 10px; } } .error-page { display: grid; width: 100%; min-height: 50vh; max-width: 940px; padding: 0 10px; margin-bottom: 40px; } .error-page .mar-card p { margin: 0 0 40px 0; } .error-page .mar-card form { display: flex; align-items: flex-end; justify-content: space-between; } .error-page .mar-card form .mar-form-elements__form-group { flex-grow: 1; margin-right: 20px; margin-bottom: 0; } .error-page .mar-card form .mar-form-elements__form-group label { font-weight: 600; } .error-page .mar-card form .mar-form-elements__form-group input { border: 1px solid #CCCFD6; font-size: 17px; } .error-page .mar-card form .mar-form-elements__form-group input::placeholder { font-size: 17px; } .error-page .mar-card form button { height: 44px; } .error-page__code { font-size: 18px; line-height: 130%; margin-bottom: 20px; display: inline-block; color: #9D0D13; } .block-article__container .mar-standard-card.mar-standard-card--3.mar-standard-card--l { min-width: unset; } .block-article__container .mar-standard-card.mar-standard-card--3 .mar-standard-card__img { min-height: unset; } @media (min-width: 768px) { .block-article__container { margin-bottom: 50px; } .block-article__container article { margin-bottom: unset; } } .block-article #DFP_standard_mpu_1:not(:empty), .block-article #DFP_standard_mpu_2:not(:empty) { margin-top: 50px; } @media (min-width: 768px) { .block-article #DFP_standard_mpu_1:not(:empty), .block-article #DFP_standard_mpu_2:not(:empty) { margin-top: unset; } } .block-article #DFP_standard_mpu_1:empty, .block-article #DFP_standard_mpu_2:empty { margin: 0; } #articleListPageWrapper { padding-left: 15px; padding-right: 15px; } @media (max-width: 575px) { #articleListPageWrapper { padding-left: 10px; padding-right: 10px; } } #articleListPageWrapper .most-read { margin-bottom: 50px; } .headline-container { display: flex; flex-direction: column; overflow: hidden; gap: 5px; grid-gap: 5px; } .headline-container .headline { font-family: var(--article-page-headline-font); max-width: unset; margin: 0 10px 10px 10px; font-size: var(--font-size-l); font-weight: var(--font-weight-semibold); order: 2; } @media (min-width: 768px) { .headline-container .headline { margin: 0; max-width: 100%; font-size: var(--font-size-xl); } } @media (min-width: 1200px) { .headline-container .headline { font-size: var(--font-size-xxl); } } .metadata-container { display: flex; justify-content: space-between; order: 1; margin: 10px 10px 0 10px; gap: 10px; grid-gap: 10px; } @media (min-width: 768px) { .metadata-container { order: 2; margin: 0; } } .metadata-container .primary-tag { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; position: relative; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin: 0; white-space: nowrap; } .metadata-container .primary-tag::after { content: ''; height: 1px; background: var(--accent-colour); width: 100%; display: block; position: absolute; bottom: 0; } .metadata-container .primary-tag a { font-family: var(--global-font); color: #595959; } .metadata-container .primary-tag a:hover { color: var(--alt-colour); } .metadata-container .comments-wrapper { display: flex; justify-content: center; align-items: center; line-height: 0; gap: 5px; grid-gap: 5px; } .metadata-container .comments-wrapper .icon-comments { position: relative; top: 1px; font-size: 13px; } .metadata-container .comments-wrapper .icon-comments path, .metadata-container .comments-wrapper .icon-comments rect { color: #CCCFD6; height: 14px; } .metadata-container .total-comments { font-family: var(--global-font); font-size: 11px; font-weight: var(--font-weight-semibold); color: #595959; margin-bottom: 1px; } .metadata-container .total-comments:hover { color: var(--alt-colour); } .block-article-4inarow__container article { padding-bottom: 0; } @media (min-width: 1200px) { .block-article-4inarow__container { margin-bottom: 35px; } } .block-article-article5__container .mar-list-vertical-response__item a { font-family: var(--header-font); } @media (max-width: 575px) { .block-article-article5__container .mar-standard-card__text { font-size: var(--font-size-m); } .block-article-article5__container .mar-list-vertical-response__item a { font-size: var(--font-size-s); } } @media (min-width: 768px) { .block-article-article5__container { grid-gap: 20px !important; } .block-article-article5__container article { margin-bottom: unset; } .block-article-article5__container .mar-list-vertical-response { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: span 2 / span 2; margin-top: 15px; gap: 10px; grid-gap: 10px; } } @media (min-width: 1200px) { .block-article-article5__container .mar-list-vertical-response { display: grid; grid-template-columns: auto; grid-template-rows: repeat(3, minmax(0, 90px)); grid-column: auto; margin-top: 0; } .block-article-article5__container ul.mar-list-vertical-response:not(:nth-of-type(1)) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; grid-column: span 3/span 3; gap: 10px; grid-gap: 10px; } } .block-article-article7__container article { margin-bottom: 0; padding-bottom: 0; } @media (min-width: 768px) { .block-article-article7__container { grid-auto-rows: minmax(77px, 85px); } .block-article-article7__container article:nth-of-type(1) { grid-row: span 4 / span 4; } } @media (min-width: 1200px) { .block-article-article7__container { grid-auto-rows: minmax(min-content, max-content); } } .block-article-disaster { margin-bottom: 25px; } @media (min-width: 576px) { .block-article-disaster { margin-bottom: 50px; } } .block-article-disaster__container .mar-lead-story { margin-left: -10px; margin-right: -10px; } @media (min-width: 576px) { .block-article-disaster__container .mar-lead-story { margin-left: -15px; margin-right: -15px; } } @media (min-width: 768px) { .block-article-disaster__container .mar-lead-story { margin-left: unset; margin-right: unset; } } @media (min-width: 576px) { .block-article-disaster__container .mar-lead-story { margin-bottom: 25px; } } @media (min-width: 768px) { .block-article-disaster__container .mar-lead-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; grid-gap: 20px; } } #BlockArticleContainer .most-read { display: block; } @media (min-width: 992px) { #BlockArticleContainer .most-read { display: block; } } #BlockArticleContainer .block-most-popular-right-column .most-read { display: block; } #po-overlay-articlegate-full-width-scroll-below { display: none; position: -webkit-sticky; position: sticky; top: 0; left: 0; bottom: -1000px; min-height: 254px; width: 100vw; align-self: start; margin-left: calc((-100vw + 100%)); margin-right: calc((-100vw + 100%)); z-index: 9999999; } @media (min-width: 1200px) { .block-article-display--standard #block-outbrain-inline-pull { max-width: 700px; margin-left: auto; } } .block-article-display--live #block-outbrain-inline-pull { max-width: 920px; } .block-article-display__wrapper { width: 100%; } @media (min-width: 768px) { .block-article-display__wrapper { margin: auto; max-width: 992px; } } @media (min-width: 1400px) { .block-article-display__wrapper { max-width: 1260px; } } .block-article-display__wrapper .most-read { margin: 0 10px; } @media (min-width: 992px) { .block-article-display__wrapper .most-read { margin: 0; } } .block-article-display__article-container { width: 100%; } @media (min-width: 768px) { .block-article-display__article-container { margin: auto; padding-right: 15px; padding-left: 15px; } } @media (min-width: 1400px) { .block-article-display__article-container { padding-right: 10px; padding-left: 10px; } } .block-article-display__article-container .mar-label__text::after { display: none; } .block-article-display .teads-inread { margin-bottom: 25px; } .block-article-display .article-row-container { display: flex; flex-direction: column; } @media (min-width: 992px) { .block-article-display .article-row-container { display: grid; grid-template-columns: 1fr 300px; gap: 20px; } } .block-article-display .article-row-container--right { display: none; margin: 0; } @media (min-width: 576px) { .block-article-display .article-row-container--right { display: grid; grid-template-columns: 345px 1fr; gap: 15px; height: 100%; align-content: baseline; position: relative; } } @media (min-width: 768px) { .block-article-display .article-row-container--right { grid-template-columns: 1fr; gap: 0; margin: 0; } } .block-article-display .article-row-container--right__article-display-page-only { display: none; margin: 0; } @media (min-width: 576px) { .block-article-display .article-row-container--right__article-display-page-only { display: grid; gap: 15px; height: 100%; align-content: baseline; position: relative; } } @media (min-width: 768px) { .block-article-display .article-row-container--right__article-display-page-only { grid-template-rows: auto auto 1fr !important; gap: 0; margin: 0; } } .block-article-display .article-row-container--right__article-display-page-only #DFP_on_scroll { position: -webkit-sticky; position: sticky; top: 80px; height: 200px; } .block-article-display .article-row-container--right__article-display-page-only .mar-tab__heading-link { font-size: var(--font-size-l); } @media (min-width: 992px) { .block-article-display .article-row-container--right__article-display-page-only .mar-tab__heading-link { font-size: 20px; } } .block-article-display .article-row-container--right .premium-mpu-container { margin-top: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .block-article-display .article-row-container--right .mar-tab__heading-link { font-size: var(--font-size-l); } @media (min-width: 992px) { .block-article-display .article-row-container--right .mar-tab__heading-link { font-size: var(--font-size-m); } } @media (min-width: 768px) { .block-article-display .article-row-container--left { min-width: 418px; } } .block-article-display .article-row-container__column { display: flex; flex-direction: column; } @media (min-width: 992px) { .block-article-display .article-row-container__column { justify-content: center; } } .block-article-display__ugc-cta { padding: 20px; background: var(--main-colour); color: #FFFFFF; } .block-article-display__ugc-cta a { color: #FFFFFF; text-decoration: underline; font-weight: var(--font-weight-bold); } @media (min-width: 576px) { .block-article-display__ugc-cta { padding: 20px 25px; } } @media (min-width: 1200px) { .block-article-display__ugc-cta { max-width: 700px; margin-left: auto; } } .block-article-display__ugc-cta-desc h1, .block-article-display__ugc-cta-desc p { color: #FFFFFF; } .block-article-display__ugc-cta-desc h1 { font-weight: var(--font-weight-bold); margin: 0 0 10px; } .block-article-display__ugc-cta-btn { color: #000000 !important; display: block; padding: 5px 10px; margin: 10px 0; font-size: var(--font-size-m); width: 100%; } @media (min-width: 576px) { .block-article-display__ugc-cta-btn { width: 300px; } } .block-article-display.gbl #article { display: flex; flex-direction: column; } .block-article-display.gbl .block-article-content { grid-template-columns: auto; gap: 0 !important; } .block-article-display.gbl .block-article-content .article-body p, .block-article-display.gbl .block-article-content .article-body a { line-height: var(--standard-line-height); } @media (min-width: 992px) { .block-article-display.gbl .block-article-content .article-body p, .block-article-display.gbl .block-article-content .article-body a { font-size: var(--font-size-m); } } .block-article-display.gbl .block-article-content .article-body .article-first-paragraph { font-weight: var(--font-weight-regular); } .block-article-display.gbl h2 { display: inline-block; font-family: var(--header-font); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: 1.28; padding: 11px 0 0; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; } @media (min-width: 576px) { .block-article-display.gbl h2 { margin-left: 0; margin-right: 0; } } .block-article-display.gbl h3 { font-family: var(--header-font); font-size: var(--font-size-l); font-weight: var(--font-weight-semibold); line-height: 1.6; margin: 15px 0 0; } .block-article-display.gbl .block-article-content__info-container { flex-direction: row !important; justify-content: space-between; width: 100%; position: relative; top: 0; margin-top: 0; margin-bottom: 15px; } @media (min-width: 576px) { .block-article-display.gbl .block-article-content__info-container { flex-direction: column; } } .block-article-display.gbl .block-article-content__socialbar { flex: unset; margin-left: 0; } .block-article-display.gbl .block-article-content__author { display: flex; align-items: center; } .block-article-display.gbl .block-article-content__bottom-tags-and-social { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0; } @media (min-width: 576px) { .block-article-display.gbl .block-article-content__bottom-tags-and-social { margin: 0; } } @media (min-width: 1200px) { .block-article-display.gbl .block-article-content__spacing { max-width: unset; } } .block-article-display.gbl .block-article-display__article-container { max-width: 835px; } .block-article-display.gbl .block-article-display__article-container .article-tags { font-family: var(--global-font); font-size: 11px; font-weight: var(--font-weight-semibold); background-color: transparent; padding: 0; border: none; border-bottom: 1px solid var(--accent-colour); border-radius: 0; } .block-article-display.gbl .block-article-display__article-container .social-bar.gbl .social-bar__button { display: grid; place-items: center; width: 36px; height: 36px; color: #000000; background: var(--accent-colour); } .block-article-display.gbl .mar-article__headline-container { display: flex; flex-direction: column; } .block-article-display.gbl .mar-article__headline-container .mar-article__headline { margin-top: 15px; } @media (max-width: 575px) { .block-article-display.gbl .mar-article__headline-container .mar-article__article-tags div:nth-child(2), .block-article-display.gbl .mar-article__headline-container .mar-article__article-tags div:nth-child(3) { display: block; } } @media (min-width: 576px) { .block-article-display.gbl .mar-article__headline-container { display: block; } } .block-article-display.gbl .article-hero { order: 2; } .block-article-display.gbl .article-hero .mar-article-image { margin-bottom: 20px; } .block-article-display.gbl .article-row-container { display: block; flex-direction: initial; order: 3; } @media (min-width: 992px) { .block-article-display.gbl .article-row-container { display: block; } } .block-article-display.gbl .mar-article__headline { margin-top: 0; } @media (min-width: 992px) { .block-article-display.gbl .mar-article__headline { font-size: 38px; } } .block-article-display.gbl .block-article-display__is-sponsored { display: none; font-size: var(--font-size-s); font-weight: var(--font-weight-bold); margin: 15px 10px; } @media (min-width: 576px) { .block-article-display.gbl .block-article-display__is-sponsored { display: block; } } @media (min-width: 768px) { .block-article-display.gbl .block-article-display__is-sponsored { margin-left: 0; margin-right: 0; } } .block-article-display.gbl .sponsored-content p { font-family: var(--body-font); font-weight: var(--font-weight-bold); } @media (min-width: 992px) { .block-article-display.gbl .sponsored-content p { font-size: var(--font-size-m); } } @media (min-width: 576px) { .block-article-display.gbl .sponsored-content { margin-left: 0; margin-right: 0; } } .block-article-display.gbl .author-details__name-container { font-size: var(--font-size-xxs); } .block-article-display.gbl .author-details__img { margin-right: 10px; } .block-article-display.young-reporter .young-reporter-author { max-width: 200px; line-height: 1.2; } .block-article-display.young-reporter .block-article-content__info-container { margin-bottom: 25px; } .block-article-display.young-reporter .young-reporter-callout { display: flex; flex-direction: column; align-items: center; background: #F2F2F3; padding: 10px; margin-bottom: 25px; text-align: center; order: 3; } .block-article-display.young-reporter .young-reporter-callout img { height: 90px; } .block-article-display.young-reporter .young-reporter-callout a { text-decoration: underline; } @media (min-width: 576px) { .block-article-display.young-reporter .young-reporter-callout { flex-direction: row; text-align: left; } } .block-article-display.cpa .mar-article__article-tags, .block-article-display.young-reporter .mar-article__article-tags { margin-bottom: 10px; } @media (min-width: 576px) { .block-article-display.cpa .mar-article__article-tags, .block-article-display.young-reporter .mar-article__article-tags { margin-top: 15px; margin-bottom: 5px; } } .block-article-display.cpa .mar-article__timestamp, .block-article-display.young-reporter .mar-article__timestamp { padding: 0 10px; margin-bottom: 15px; } @media (min-width: 768px) { .block-article-display.cpa .mar-article__timestamp, .block-article-display.young-reporter .mar-article__timestamp { padding: 0; margin-bottom: 25px; } } .block-article-display.cpa .responsive-margins, .block-article-display.young-reporter .responsive-margins { margin-bottom: 25px; } @media (min-width: 576px) { .block-article-display.cpa .responsive-margins, .block-article-display.young-reporter .responsive-margins { margin-bottom: 10px; } } #more-articles { padding: 0 10px; } @media (min-width: 576px) { #more-articles { padding: 0 15px; } } #more-articles .more-articles-heading { font-family: var(--body-font); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 39px; margin-bottom: 25px; text-align: left; } #more-articles .more-articles-grid-container { display: grid; grid-template-columns: 1fr; gap: 40px 20px; } @media (max-width: 575px) { #more-articles .more-articles-grid-container .omnicard { margin-bottom: 25px; } } @media (min-width: 576px) { #more-articles .more-articles-grid-container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { #more-articles .more-articles-grid-container { grid-template-columns: repeat(4, 1fr); } } .block-article-content { display: grid; grid-template-columns: auto; } @media (min-width: 1400px) { .block-article-content { grid-template-columns: 280px 620px; grid-gap: 0 20px; } } @media (min-width: 1400px) { .block-article-content .article-hero { margin-bottom: 25px; } } .block-article-content__info-container { display: flex; flex-direction: column; margin: 15px 0 25px; gap: 15px; order: 2; padding-left: 10px; padding-right: 10px; } @media (min-width: 576px) { .block-article-content__info-container { padding-left: 0; padding-right: 0; } } @media (min-width: 768px) { .block-article-content__info-container { flex-direction: row; gap: 0; } } @media (min-width: 1400px) { .block-article-content__info-container { position: -webkit-sticky; position: sticky; top: 20px; flex-direction: column; width: 280px; order: 0; margin: 0 0 25px 0; max-height: 200px; } } .block-article-content__author { flex: 1; margin-left: 0; } @media (min-width: 576px) { .block-article-content__author { margin-left: 10px; } } @media (min-width: 768px) { .block-article-content__author { margin-left: 0; } } @media (min-width: 1400px) { .block-article-content__author { flex: unset; } } .block-article-content__bottom-tags { display: flex; flex-wrap: wrap; margin-left: 10px; gap: 10px; grid-gap: 10px; } @media (max-width: 575px) { .block-article-content__bottom-tags div:nth-child(n+4) { display: none; } } @media (min-width: 768px) { .block-article-content__bottom-tags { margin-left: 0; } } .block-article-content__socialbar { flex: 1; display: flex; justify-content: flex-start; align-items: center; margin-left: 10px; } @media (min-width: 768px) { .block-article-content__socialbar { margin-left: 0; } .block-article-content__socialbar.flex-end { justify-content: flex-end; } } @media (min-width: 1400px) { .block-article-content__socialbar { margin-left: 0; flex: unset; } .block-article-content__socialbar.flex-end { justify-content: flex-start; margin-top: 20px; } } .block-article-content__spacing { order: 5; } @media (max-width: 575px) { .block-article-content__spacing { width: 100vw; } } .block-article-content__spacing p, .block-article-content__spacing ul, .block-article-content__spacing ol, .block-article-content__spacing .article-first-paragraph { padding-left: 10px; padding-right: 10px; } @media (max-width: 575px) { .block-article-content__spacing .article-first-paragraph { padding-top: 20px; } } .block-article-content__spacing .ob-feed-layout { margin: 0 !important; max-width: 100vw; } .block-article-content__spacing .mar-block-ad--in-article, .block-article-content__spacing .teads-inread { width: 100vw; } @media (min-width: 1200px) { .block-article-content__spacing { max-width: 700px; margin-left: auto; } } @media (min-width: 768px) { .block-article-content__spacing { margin-left: 0; margin-right: 0; } .block-article-content__spacing p, .block-article-content__spacing ul, .block-article-content__spacing ol, .block-article-content__spacing .article-first-paragraph { padding-left: 0; padding-right: 0; } .block-article-content__spacing .ob-feed-layout { margin: 0 !important; max-width: unset; } .block-article-content__spacing .mar-block-ad--in-article, .block-article-content__spacing .teads-inread { width: auto; } } @media (min-width: 1400px) { .block-article-content__spacing { max-width: unset; margin-left: 0; } } #block-outbrain-inline-pull .tbl-feed-header-text { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); color: #000000; padding-bottom: 10px; margin-bottom: 0; margin-top: 0; padding-top: 0; text-transform: uppercase; cursor: default; } @media (min-width: 1400px) { .allow-skins .block-article-content { display: grid; grid-template-columns: auto; } .allow-skins .block-article-content__info-container { order: 2; position: unset; width: 100%; flex-direction: row; } .allow-skins .block-article-content__author { flex: 1; padding-top: unset; margin-bottom: unset; border-top: unset; } .allow-skins .block-article-content__socialbar { flex: 1; display: flex; align-items: center; border-top: unset; padding-top: unset; } .allow-skins .block-article-content__socialbar.flex-end { justify-content: flex-start; } .allow-skins .block-article-content__video-player { order: 2; } } .live-article-content .block-article-content__info-container { order: 0; } .block-article-with-ad-articleads__container { display: grid; grid-template-columns: repeat(autofit, minmax(310px, 1fr)); margin-bottom: 50px; gap: 25px 20px; grid-gap: 25px 20px; } .block-article-with-ad-articleads__container .standard-mpu-container { grid-row: span 2 / span 2; } @media (min-width: 768px) { .block-article-with-ad-articleads__container { margin-bottom: 50px; } } .block-article-shoutout h4 { display: inline-block; cursor: default; font-size: var(--font-size-xs); } @media (min-width: 576px) { .block-article-shoutout h4 { font-size: var(--font-size-s); } } .block-article-shoutout img { display: inline; height: 15px; padding-right: 5px; vertical-align: middle; } @media (min-width: 768px) { .block-article-shoutout img { height: 18px; } } .block-article-shoutout img.block-article-shoutout__shoutout-icon--jubilee { width: 100%; height: unset; } @media (min-width: 992px) { .block-article-shoutout img.block-article-shoutout__shoutout-icon--jubilee { height: 75px; } } .block-article-shoutout__article { display: flex; flex-wrap: wrap; align-items: center; position: relative; min-height: 42px; padding: 10px 15px; } @media (min-width: 576px) { .block-article-shoutout__article { padding: 0 15px; } } .block-article-shoutout__headline { display: flex; align-items: center; min-height: 42px; } .block-article-shoutout__headline a { color: #333333; } .block-article-shoutout__headline a.comments-icon { margin-top: 0; } .block-article-shoutout__article-link { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } @media (min-width: 576px) { .block-article-shoutout__article-link { font-size: var(--font-size-s); } } .block-article-shoutout__block-label, .block-article-shoutout__label { display: inline-block; font-family: Libre Franklin, sans-serif; } .block-article-shoutout__block-label *, .block-article-shoutout__label * { font-family: Libre Franklin, sans-serif; } .block-article-shoutout__live { margin-right: 12px !important; line-height: var(--standard-line-height); } .block-article-shoutout__live span { color: #FFFFFF; font-size: var(--font-size-s); font-weight: 700; cursor: default; } .block-article-shoutout--subtle { background: #F2F2F3; } .block-article-shoutout--subtle .block-article-shoutout__live span { color: unset; } .block-article-shoutout--urgent { background: #9D0D13; color: #FFFFFF; } .block-article-shoutout--urgent .block-article-shoutout__article-link { color: #FFFFFF; } .block-article-shoutout--feature { background: #4B2B6A; color: #FFFFFF; } .block-article-shoutout--feature .block-article-shoutout__article-link { color: #FFFFFF; } .block-article-shoutout--dark { background: #000000; color: #FFFFFF; } .block-article-shoutout--dark .block-article-shoutout__article-link { color: #FFFFFF; } .block-article-shoutout__stars-label { margin: 0; } .block-article-shoutout__stars-label .stars-label__rating-text { display: none; } .block-article-shoutout .link-separator { padding: 0 7px; font-weight: 700; line-height: var(--font-size-m); } .block-article-shoutout .comments-icon { float: none; } .block-article-shoutout .timestamp span { font-size: var(--font-size-xs); } .block-article-shoutout .admin-links-toggler { bottom: 8px; } .block-article-bowie { padding-bottom: 25px; } .block-article-bowie .block-heading { font-size: var(--font-size-m); margin-left: 15px; margin-right: 15px; } @media (min-width: 576px) { .block-article-bowie .block-heading { font-size: var(--font-size-l); } } @media (min-width: 576px) and (min-width: 992px) { .block-article-bowie .block-heading { margin-left: 0; } } @media (min-width: 992px) { .block-article-bowie__container { display: grid; grid-template-columns: repeat(3, 33.33%); } } .block-article-bowie__container article { width: 100%; margin-bottom: 20px; overflow: hidden; } @media (min-width: 576px) { .block-article-bowie__container article { max-height: 432px; } } @media (min-width: 576px) and (min-width: 768px) { .block-article-bowie__container article { max-height: 349px; grid-column: 1 / 3; } } @media (min-width: 576px) and (min-width: 768px) and (min-width: 992px) { .block-article-bowie__container article { margin-bottom: 0; } } @media (min-width: 576px) and (min-width: 768px) and (min-width: 992px) and (min-width: 1200px) { .block-article-bowie__container article { max-height: 469px; } } .block-article-bowie__lead-image-link { display: block; position: relative; width: 100%; } .block-article-bowie__lead-image-link-img-icon { position: absolute; bottom: 10px; right: 10px; width: 40px; height: 40px; background: #E6E6E9; border-radius: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; z-index: 3; } .block-article-bowie__lead-image-link-img-icon svg { font-size: 19px; } .block-article-bowie__lead-image-link-img-icon path { color: #000000; } .block-article-bowie__lead-image-link-img-icon svg[data-icon='el:play'] { margin-left: 3px; } .block-article-bowie__lead-image { display: block; min-height: 1rem; width: 100%; object-fit: cover; } @media (min-width: 576px) { .block-article-bowie__lead-image { max-height: 432px; } } .block-article-bowie__bowie-info { padding: 0 10px; margin-bottom: 15px; } .block-article-bowie__bowie-info .metadata-container { margin: 10px 10px 0 0; } @media (min-width: 576px) { .block-article-bowie__bowie-info { padding: 0; } } @media (min-width: 992px) { .block-article-bowie__bowie-info { grid-column: 1 / 4; margin-left: 0; } } @media (min-width: 768px) { .block-article-bowie__bowie-info .metadata-container { padding: 0; width: 12%; } } .block-article-bowie__headline { margin: 5px 0 0 0; } @media (min-width: 576px) { .block-article-bowie__headline { margin: 10px 0 0 0; } } .block-article-bowie__headline a { color: #333333; font-weight: var(--font-weight-bold); font-size: var(--font-size-l); } @media (min-width: 576px) { .block-article-bowie__headline a { font-size: var(--font-size-xxl); } } .block-article-bowie__headline a:hover { color: #000000; text-decoration: none; } .block-article-bowie .comments-icon { float: unset; margin: 0 0 0 10px; top: -8px; } .block-article-bowie .block-article-bowie__bowie-info-meta-timestamp { color: #595959; font-size: var(--font-size-xs); padding-top: 10px; } .block-article-bowie__related-stories { padding: 0 10px; } @media (min-width: 576px) { .block-article-bowie__related-stories { padding: 0 15px; min-width: 300px; } } @media (min-width: 576px) and (min-width: 768px) { .block-article-bowie__related-stories { padding: 0 20px; } } .block-article-bowie__related-stories-list { display: flex; flex-direction: column; } .block-article-bowie__related-stories-list-link { display: flex; align-items: baseline; margin-bottom: 25px; color: #333333; } .block-article-bowie__related-stories-list-link:last-child { margin-bottom: 0; } .block-article-bowie__related-stories-list-link:hover { color: #000000; text-decoration: none; } .block-article-bowie__related-stories-list-link-headline { font-size: var(--font-size-s); font-weight: var(--font-weight-semibold); color: #333333; font-family: var(--header-font); } .block-article-bowie__related-stories-list-link .media-icon { display: inline-flex; justify-content: center; align-items: center; min-width: 16px; width: 16px; min-height: 16px; height: 16px; background: #E6E6E9; border-radius: 100%; text-decoration: none; cursor: pointer; font-size: 10px; margin-right: 5px; } @media (min-width: 576px) { .block-article-bowie__related-stories-list-link .media-icon { min-height: 12px; height: 12px; } } @media (min-width: 576px) and (min-width: 768px) { .block-article-bowie__related-stories-list-link .media-icon { min-height: 16px; height: 16px; } } .block-article-bowie__related-stories-list-link .media-icon svg[data-icon='el:play'] { font-size: 6px; } .block-article-bowie__extra-text { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); margin-top: 20px; margin-bottom: 10px; text-transform: uppercase; } @media (min-width: 576px) { .block-article-bowie__extra-text { margin-top: 0; } } .block-article-bowie__total-comments { font-family: var(--global-font); font-size: 11px; font-weight: var(--font-weight-semibold); color: #595959; margin-bottom: 1px; } .block-article-bowie__total-comments:hover { color: var(--alt-colour); } .block-article-bowie__labels-container { position: absolute; top: 0; left: 0; } .block-article-bowie__labels-container .mar-label.mar-label--over-image { top: 0; } .block-article-bowie__star-container { position: absolute; top: -5px; left: 0; } .block-article-bowie__icon-container { position: absolute; display: flex; right: 10px; bottom: 10px; justify-content: space-between; align-items: center; gap: 5px; } .block-article-bowie__img-icon { position: relative; width: 40px; height: 40px; background: var(--accent-colour); border-radius: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; right: 0; bottom: 0; z-index: 3; } .block-article-bowie__img-icon svg { font-size: 19px; } .block-article-bowie__img-icon path { color: #000000; } .block-article-bowie__img-icon svg[data-icon='el:play'] { margin-left: 3px; } .block-article-bowie__media-icons-container { display: inline-flex; justify-content: center; align-items: center; } .block { position: relative; } .block-heading { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); font-family: var(--header-font); color: #000000; text-transform: var(--text-transform-heading); margin-bottom: 25px; margin-top: 0; padding-top: 0; cursor: default; line-height: 120%; width: -moz-fit-content; width: fit-content; position: relative; } .block-heading.heading-double-underline { display: inline-block; text-align: center; font-size: var(--font-size-m); border-bottom: 4px double #9DA0A4; margin: auto; padding-bottom: 0; margin-bottom: 10px; } @media (min-width: 768px) { .block-heading { font-size: var(--font-size-xl); } } .block-heading::after { content: ''; height: 4px; background: var(--accent-colour); width: 100%; display: block; position: absolute; } .block-heading--sub { text-transform: capitalize; } @media (min-width: 576px) { .block-most-popular-right-column { display: none; } } @media (min-width: 768px) { .block-most-popular-right-column { display: block; } } .block-most-popular-right-column .mar-tab__headings { margin: 0 15px 24px 0; } @media (max-width: 575px) { .block-most-popular-right-column .mar-tab__headings { margin: 0; } } .block-most-popular-right-column .most-read__list-item a { max-width: 220px !important; } .block-most-popular-right-column .most-read__body.most-read__body--one-column .mar-tab--active.most-read__list { display: grid; grid-template-columns: repeat(1, minmax(245px, 1fr)); } .block-main-sport__lead-story h3 { font-size: var(--font-size-s); } @media (min-width: 992px) { .block-main-sport__lead-story h3 { font-size: var(--font-size-xxl); } } .block-main-sport .community-contributions { order: 9999; grid-column: auto; min-height: 70px; background: transparent; display: flex; justify-content: center; } .block-main-sport .newsletter { order: 9997; height: 85px; width: 100%; background: transparent; grid-column: auto; display: flex; justify-content: center; } .block-main-sport .high-vis-container > *:first-child { max-width: 300px; } .block-main-sport article { padding-bottom: 0; } @media (max-width: 575px) { .block-main-sport #desktop-teaser { padding: 0; grid-row: 6; grid-column: 1 / 13; } .block-main-sport .premium-mpu-container { grid-row: 2; grid-column: 1 / 13; } .block-main-sport .standard-mpu-container { grid-row: 7; grid-column: 1 / 13; } .block-main-sport .high-vis-container { grid-row: 13; grid-column: 1 / 13; } .block-main-sport #po-inline-blocksystem-legacylistandtopstories { grid-column: 1 / 13; grid-row: 12; } .block-main-sport #piano-newsletter-container { grid-column: 1 / 13; grid-row: 25; } } @media (max-width: 992px) and (min-width: 575px) { .block-main-sport .community-contributions { grid-column: span 2 / span 2; } .block-main-sport .newsletter { grid-column: span 2 / span 2; } .block-main-sport #desktop-teaser { grid-row: 5; grid-column: 1 / 13; } .block-main-sport .premium-mpu-container { grid-row: 1 / 4; grid-column: 7 / 13; } .block-main-sport .standard-mpu-container { grid-row: 4; grid-column: 7 / 13; } .block-main-sport .high-vis-container { grid-row: 9; grid-column: 1 / 13; } .block-main-sport #po-inline-blocksystem-legacylistandtopstories { grid-column: span 12; grid-row: 8; } .block-main-sport #piano-newsletter-container { grid-column: span 12; grid-row: 17; } } @media (min-width: 992px) { .block-main-sport .community-contributions { grid-column: span 3 / span 3; } .block-main-sport .newsletter { grid-column: span 3 / span 3; } .block-main-sport #desktop-teaser { grid-row: 3; grid-column: 1 / 13; } .block-main-sport .premium-mpu-container { grid-row: 1 / 3; grid-column: 9 / 13; } .block-main-sport .standard-mpu-container { grid-row: 5; grid-column: 5 / 9; } .block-main-sport .high-vis-container { grid-row: 7; grid-column: 1 / 5; } .block-main-sport #po-inline-blocksystem-legacylistandtopstories { grid-column: span 13; grid-row: 6; } .block-main-sport #piano-newsletter-container { grid-column: span 13; grid-row: 12; } } .block-main-sport--top-stories .standard-mpu-2-container { display: none; } @media (min-width: 768px) { .block-main-sport--top-stories .community-contributions { grid-column: span 2 / span 2; } .block-main-sport--top-stories .premium-mpu-container { grid-row: span 3 / span 3; grid-column-start: 2; } .block-main-sport--top-stories .newsletter { grid-column: span 2 / span 2; } .block-main-sport--top-stories #desktop-teaser { grid-column-start: 2; grid-row: span 5 / span 5; } .block-main-sport--top-stories .high-vis-container { grid-column-start: 2; grid-row: span 2 / span 2; } .block-main-sport--top-stories .standard-mpu-container { grid-column-start: 2; } } @media (min-width: 1200px) { .block-main-sport--top-stories .community-contributions { grid-column: span 3 / span 3; } .block-main-sport--top-stories .premium-mpu-container { grid-row: span 3 / span 3; grid-column-start: 3; } .block-main-sport--top-stories .newsletter { grid-column: span 3 / span 3; } .block-main-sport--top-stories #desktop-teaser { grid-row: span 5 / span 5; grid-column-start: 3; } .block-main-sport--top-stories .high-vis-container { grid-row: span 2 / span 2; grid-column-start: 3; max-height: unset; } .block-main-sport--top-stories .standard-mpu-container { grid-column-start: 3; } .block-main-sport--top-stories article:nth-of-type(1) { grid-column: span 2 / span 2; } } .block-main-sport--span { grid-row: span 5 / span 5 !important; } .block-main-news .community-contributions { order: 9999; grid-column: auto; min-height: 70px; background: #F2F2F3; display: flex; justify-content: center; } .block-main-news .newsletter { order: 9997; height: 85px; width: 100%; background: #F2F2F3; grid-column: auto; display: flex; justify-content: center; } .block-main-news .high-vis-container > *:first-child { max-width: 300px; } .block-main-news article { padding-bottom: 0; } .block-main-news .high-vis-container { max-height: 130px; } .block-main-news .standard-mpu-2-container { min-height: 310px; } .block-main-news .block-most-popular-right-column { display: block; grid-row: span 8; } .block-main-news #high_vis_container { align-self: center; } @media (min-width: 768px) { .block-main-news #standard_mpu_1_container { align-items: center; } .block-main-news .community-contributions { grid-column: span 2 / span 2; } .block-main-news .newsletter { grid-column: span 2 / span 2; } .block-main-news .high-vis-container { max-height: unset; } .block-main-news .standard-mpu-2-container { min-height: 310px; } } @media (min-width: 1200px) { .block-main-news .community-contributions { grid-column: span 3 / span 3; } .block-main-news .newsletter { grid-column: span 3 / span 3; } .block-main-news .high-vis-container { max-height: 130px; } .block-main-news .standard-mpu-2-container { min-height: 310px; } .block-main-news .standard-mpu-2-container:empty { margin-top: 0; min-height: 0; } .block-main-news article:nth-of-type(1) { grid-column: span 2 / span 2; } } .block-main-news--top-stories .standard-mpu-2-container { display: none; } @media (min-width: 1200px) { .block-main-news--top-stories .newsletter { grid-column: span 3 / span 3; } } .block-main-news .mar-lead-story .mar-lead-story__first-par { display: none; } .block-bam-legacy-list { background-color: #FFFFFF; } .block-bam-legacy-list .block-most-popular-right-column { display: block; grid-row: span 8; } @media (min-width: 768px) { .block-topic__container article { margin-bottom: unset; } } .outbrain-block .video-cta-button { font-family: var(--body-font) !important; font-weight: var(--font-weight-bold) !important; text-align: center; border-radius: 20px !important; background-color: var(--accent-colour) !important; border: none !important; } .outbrain-block .branding { font-family: var(--body-font) !important; font-size: var(--font-size-xs) !important; color: #595959 !important; font-weight: var(--font-weight-regular) !important; } .outbrain-block .video-title { font-family: var(--header-font) !important; font-size: var(--font-size-m) !important; } /* stylelint-disable value-no-vendor-prefix */ .uber-block-lead-story .omni-lead-story { margin-left: -10px; margin-right: -10px; } @media (min-width: 576px) { .uber-block-lead-story .omni-lead-story { margin-left: -15px; margin-right: -15px; } } @media (min-width: 768px) { .uber-block-lead-story .omni-lead-story { margin-left: unset; margin-right: unset; } } @media (min-width: 576px) { .uber-block-lead-story .omni-lead-story { margin-bottom: 40px; } } @media (min-width: 768px) { .uber-block-lead-story .omni-lead-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; grid-gap: 20px; } } .header { grid-area: header; } body.no-header-margin .header, body.has-relative-skin .header { margin-bottom: 0 !important; } #site-header { background-color: #FFFFFF; max-width: 100vw; } #site-header #secondary-nav { position: relative; display: flex; align-items: center; width: 100%; font-family: var(--header-font); background: #FFFFFF; overflow-x: auto; gap: 0; } @-moz-document url-prefix() { #site-header #secondary-nav { /* stylelint-disable-line */ padding-top: 0; } } #site-header #secondary-nav::-webkit-scrollbar { width: 0; } @media (min-width: 992px) { #site-header #secondary-nav { overflow: visible; padding-top: 0; height: 30px; } } #site-header #secondary-nav .prefix__text::first-letter { text-transform: uppercase; } #site-header #secondary-nav a { cursor: pointer; margin-left: 10px; text-decoration: none; color: #333333; font-size: var(--font-size-xs); white-space: nowrap; gap: 10px; } #site-header #secondary-nav a.secondary-nav-link-item { margin-left: 25px; } #site-header #secondary-nav a:first-of-type { margin-left: 10px; } @media (max-width: 991px) { #site-header #secondary-nav a { margin-right: 5px; } } #site-header #secondary-nav a.prefix { font-weight: var(--font-weight-bold); height: 30px; width: -moz-fit-content; width: fit-content; display: flex; justify-content: center; align-items: center; background: #F2F2F3; padding: 0 10px; margin-left: 0; cursor: default; gap: 5px; grid-gap: 5px; } @media (min-width: 1200px) { #site-header #secondary-nav a.prefix { margin-left: 10px; } } #site-header #secondary-nav a.prefix svg[data-icon='bi:star-fill'] { font-size: 12px; margin-bottom: 2px; } #site-header #secondary-nav a:last-of-type { padding-right: 10px; z-index: 1; } #site-header #secondary-nav a:not(.prefix):hover { text-decoration: underline; } /* stylelint-disable function-no-unknown */ .header-sticky-nav { position: fixed; top: -164px; background-color: #FFFFFF; width: 100%; height: 64px; border-bottom: solid 1px #F2F2F3; padding: 0 15px; z-index: 3000009; } .header-sticky-nav__wrapper { max-width: 1260px; display: flex; justify-content: space-between; background-color: #FFFFFF; height: 64px; width: 100%; border-bottom: solid 1px #F2F2F3; overflow: hidden; margin: auto; gap: 10px; grid-gap: 10px; } .header-sticky-nav__monogram { height: 100%; } .header-sticky-nav__monogram img { min-height: 64px; height: 100%; } .header-sticky-nav__article-headline { margin: auto; text-align: center; font-size: var(--font-size-m); font-weight: var(--font-weight-bold); font-family: var(--header-font); display: none; } @media (min-width: 1200px) { .header-sticky-nav__article-headline { display: block; } } .header-sticky-nav__right { display: flex; justify-content: center; align-items: center; } .header-sticky-nav .social-bar { flex-wrap: nowrap; } .header-sticky-articles { opacity: 0; background-color: #FFFFFF; position: fixed; left: 0; width: 100%; height: 80px; box-shadow: 0 2px 6px 0 rgba(51, 51, 51, 0.11); overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 15px; border-bottom: solid 1px #E6E6E9; z-index: 3000009; } .header-sticky-articles__wrapper { max-width: 1260px; width: 100%; margin: auto; position: relative; } .header-sticky-articles__close-button { position: absolute; top: 0; right: -11px; width: 25px; height: 25px; z-index: 5; cursor: pointer; font-size: var(--font-size-s); } @media (min-width: 576px) { .header-sticky-articles__close-button { right: 28px; } } .header-sticky-articles__carousel { width: 100%; margin: auto; } .header-sticky-articles.header-sticky-articles--pos-top { top: -80px; border-bottom: solid 1px #CCCFD6; } .header-sticky-articles.header-sticky-articles--pos-bottom { bottom: -80px; border-top: solid 1px #CCCFD6; } .header-sticky-articles .slick-next, .header-sticky-articles .slick-prev { background: none; border: 0; padding: 0; margin: 0; line-height: 50px; top: 0; position: absolute; cursor: pointer; outline: none; font-size: var(--font-size-xs); bottom: -30px; } .header-sticky-articles .slick-next:focus, .header-sticky-articles .slick-next:hover, .header-sticky-articles .slick-prev:focus, .header-sticky-articles .slick-prev:hover { color: #333333; } .header-sticky-articles .slick-next.slick-disabled, .header-sticky-articles .slick-prev.slick-disabled { opacity: 0.2; } .header-sticky-articles .slick-next.slick-disabled:focus, .header-sticky-articles .slick-next.slick-disabled:hover, .header-sticky-articles .slick-prev.slick-disabled:focus, .header-sticky-articles .slick-prev.slick-disabled:hover { color: #000000; } .header-sticky-articles .slick-prev { background: transparent; width: 57px; text-align: left; z-index: 1; position: absolute; right: 30px; } .header-sticky-articles .slick-next { background: transparent; width: 57px; text-align: right; z-index: 1; position: absolute; right: 0; } .header-sticky-articles .slick-list { margin-right: 40px; position: relative; padding: 0 20% 0 0; } @media (min-width: 576px) { .header-sticky-articles .slick-list { margin-right: 101px; padding: 0; } } .header-sticky-articles .slick-list::after { content: ''; position: absolute; min-width: 40px; height: 100%; width: 100px; background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF); top: 0; right: 0; } @media (min-width: 576px) { .header-sticky-articles .slick-list::after { display: none; } } .header-sticky-articles .slick-list .slick-slide { position: relative; margin-right: 10px; } .header-sticky-articles .slick-list .slick-slide > div { max-height: 30px; } .header-sticky-articles .slick-list .slick-slide img { max-height: 30px; } .header-sticky-articles .slick-list .slick-slide .header-sticky-articles__slide-label { height: -moz-fit-content; height: fit-content; font-weight: var(--font-weight-bold); text-transform: uppercase; font-size: var(--font-size-xs); line-height: 1; margin-bottom: 2px; } .header-sticky-articles .slick-list .slick-slide .header-sticky-articles__num { float: left; margin-top: 14px; position: absolute; left: 4px; font-weight: var(--font-weight-semibold); text-align: center; color: #000000; } .header-sticky-articles .slick-list .slick-slide .header-sticky-articles__slide-row { height: 30px; display: flex; max-height: 30px; } .header-sticky-articles .slick-list .slick-slide .header-sticky-articles__slide-row .header-sticky-articles__slide-left { width: -moz-fit-content; width: fit-content; } .header-sticky-articles .slick-list .slick-slide .header-sticky-articles__slide-row .header-sticky-articles__slide-right { width: 74%; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; } .header-sticky-articles .slick-list .slick-slide .header-sticky-articles__slide-row .header-sticky-articles__slide-right h3 { margin: 0 0 0 10px; max-height: 30px; overflow: hidden; } .header-sticky-articles .slick-list .slick-slide .header-sticky-articles__slide-row .header-sticky-articles__slide-right h3 a { font-size: var(--font-size-xs); color: #000000; padding: 0; display: block; line-height: 17px; font-weight: var(--font-weight-regular); } .header-sticky-articles .slick-list .slick-slide .header-sticky-articles__slide-row .header-sticky-articles__slide-right h3 a:focus, .header-sticky-articles .slick-list .slick-slide .header-sticky-articles__slide-row .header-sticky-articles__slide-right h3 a:hover { color: #333333; text-decoration: none; } #article-gbl-subheader { margin-bottom: 35px; padding: 0 15px; } @media (max-width: 575px) { #article-gbl-subheader { margin-bottom: 25px; } } #article-gbl-subheader .site-brand { padding-left: 0; padding-right: 0; margin-bottom: 8px; } @media (max-width: 575px) { #article-gbl-subheader .site-brand { margin-bottom: 28px; } } #article-gbl-subheader .site-brand .header-top-navigation__links--primary-links { justify-content: flex-end; } #article-gbl-subheader .site-brand .header-top-navigation__links--primary-links a:last-child { margin-right: 0; } @media (max-width: 575px) { #article-gbl-subheader .site-brand .header-top-navigation__links--primary-links { display: none; } } #article-gbl-subheader .site-brand__brand-image { max-width: 250px; } @media (min-width: 576px) { #article-gbl-subheader .site-brand__brand-image { max-height: unset; max-width: 300px; } } @media (max-width: 575px) { #article-gbl-subheader .newsletters-button { display: none; } } #article-gbl-subheader .publication-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1B1A0C; margin-bottom: 0; overflow-x: auto; } @media (max-width: 575px) { #article-gbl-subheader .publication-nav { border-bottom: none; } } #article-gbl-subheader .publication-nav a { font-family: var(--body-font); font-size: var(--font-size-m); font-weight: var(--font-weight-bold); white-space: nowrap; padding: 10px 0; border-bottom: 3px solid transparent; } #article-gbl-subheader .publication-nav a:not(:last-child) { margin-right: 20px; } #article-gbl-subheader .publication-sub-nav { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 40px; } #article-gbl-subheader .publication-sub-nav a { font-family: var(--body-font); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding-top: 10px; } #article-gbl-subheader .publication-sub-nav a:not(:last-child) { margin-right: 25px; }