:root{ --default-font: 'Montserrat', Helvetica, Arial, sans-serif; --highlight: #e70e0e; --highlight-hover: #ea3838; --background: #edeef0; --background-rgba-100: rgba(237, 238, 240, 1); --background-rgba-0: rgba(237, 238, 240, 0); --text-color: #3D4248; --text-color2: #8a8b8c; --hover-color: #3897f0; --border-color: #cbccce; --border-color2: #dcdddf; --border-rgba-100: rgba(220, 221, 223, 1); --border-rgba-0: rgba(220, 221, 223, 0); --box-title-background: #000; --box-background: #fff; --box-background-rgba-100: rgba(255, 255, 255, 1); --box-background-rgba-85: rgba(255, 255, 255, .85); --box-background-rgba-0: rgba(255 , 255, 255, 0); --invert-background-rgba-100: rgba(0, 0, 0, 1); --invert-background-rgba-85: rgba(0, 0, 0, .85); --invert-background-rgba-0: rgba(0 , 0, 0, 0); --bg-loader-gif: url('https://sportal.s3.amazonaws.com/media/web/bg-loader.gif'); --loader-gif: url('https://sportal.s3.amazonaws.com/media/web/loader.gif'); --app-hometop-bg: #000; --darkgrey: #6b6c6e; --darkgrey-hover: #7b7c7e; --mask-right: url("data:image/svg+xml;charset=utf-8,%3Csvg width='165' height='1047' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1047V0h165L0 1047Z' fill='%23000'/%3E%3C/svg%3E"); --mask-left: url("data:image/svg+xml;charset=utf-8,%3Csvg width='165' height='1047' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M165 0v1047H0L165 0Z' fill='%23000'/%3E%3C/svg%3E"); } body.dark{ --background: #0a0a0a; --background-rgba-100: rgba(10, 10, 10, 1); --background-rgba-0: rgba(10, 10, 10, 0); --text-color: #f3f6f8; --text-color2: #9EA0A3; --border-color: #3E4043; --border-color2: #2E3033; --border-rgba-100: rgba(62, 64, 67, 1); --border-rgba-0: rgba(62, 64, 67, 0); --box-title-background: #808183; --box-background: #1E2023; --box-background-rgba-100: rgba(30, 32, 35, 1); --box-background-rgba-85: rgba(30, 32, 35, .85); --box-background-rgba-0: rgba(30 , 32, 35, 0); --invert-background-rgba-100: rgba(255, 255, 255, 1); --invert-background-rgba-85: rgba(255, 255, 255, .85); --invert-background-rgba-0: rgba(255 , 255, 255, 0); --bg-loader-gif: url('https://sportal.s3.amazonaws.com/media/web/bg-loader-dark.gif'); --loader-gif: url('https://sportal.s3.amazonaws.com/media/web/loader-dark.gif'); --darkgrey: #3e4043; --darkgrey-hover: #4e5053; } *{ -webkit-tap-highlight-color: rgba(195, 30, 54, 0); box-sizing: border-box; -webkit-box-sizing: border-box; } .container ::-webkit-scrollbar, .container ::-webkit-scrollbar-track, .container ::-webkit-scrollbar-thumb, .container ::-webkit-scrollbar-thumb:hover{ border-radius: 8px; height: 5px; } .container ::-webkit-scrollbar-track{ background: rgb(228 231 236 / 20%); } .container ::-webkit-scrollbar-thumb{ background: rgb(228 231 236 / 70%); } .slider-row::-webkit-scrollbar, .slider-row::-webkit-scrollbar-track, .slider-row::-webkit-scrollbar-thumb, .slider-row::-webkit-scrollbar-thumb:hover{ height:0; } html{ height: 100%; touch-action: manipulation; } body{ font-family: var(--default-font); font-optical-sizing: auto; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 16px; margin: 0; padding: 0; position: relative; min-height: 100.1%; color: var(--text-color); background: var(--background); overflow-x: hidden; display: flex; flex-direction: column; } body.storyview{ max-height: 100vh; overflow: hidden; } .container{ flex: 1 1; display: grid; grid-template-columns: max-content 1fr; grid-auto-rows: max-content auto; position: relative; } .sidebar_backdrop{ position: fixed; z-index: 15; inset: 0; background-color: rgba(0, 0, 0, .66); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .sidebar_backdrop { transition-duration: .2s; } } body.sidebar-overlay .sidebar_backdrop{ opacity: 1; pointer-events: auto; } .sidebar_header{ --spacing-multiplier: -1; display: flex; align-items: center; justify-content: space-between; grid-column: 1 / span 2; grid-row: 1 / span 1; margin-bottom: 12px; padding-right: 12px; } @media (min-aspect-ratio: 0.8 / 1) and (min-width: 1000px) { .sidebar_header { --spacing-multiplier: 0; display: none; } } @media (max-width: 999px) { .sidebar_header{ margin-bottom: -12px; } } .sidebar { top: 0; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; background-color: #0a0a0a; z-index: 20; height: 100vh; height: 100dvh; } @media( max-width: 999px ){ .sidebar{ position: fixed; box-shadow: 10px 0 40px 0 rgba(0, 0, 0, .25); transform: translate3d(-100%, 0, 0); } } body.sidebar-overlay .sidebar{ transform: translateZ(0); } @media (prefers-reduced-motion: no-preference) { .sidebar { transition-duration: .2s; } } @media (min-aspect-ratio: 0.8 / 1) and (min-width: 1000px) { .sidebar { position: -webkit-sticky; position: sticky; } } .sidebar_logo img{ filter: grayscale(0); opacity: 1; transform: scale(1) translate(0, 0); transition: all 250ms ease; } .sidebar_head{ display: flex; align-items: center; padding-block: 8px; padding-inline: 16px; gap: 8px; } .sidebar_burger{ border-width: 0; background-color: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 50%; cursor: pointer; width: 36px; height: 36px; margin-left: -10px; } .sidebar_burger span { display: block; width: 16px; height: 2px; background-color: #fff; } @media (min-aspect-ratio: 0.8 / 1) and (min-width: 1000px) { .sidebar_burger { display: none; } } .sidebar_items{ padding-right: 16px; padding-bottom: 32px; overflow-y: scroll; height: 100%; scrollbar-width: none; } .sidebar_items::-webkit-scrollbar{ background-color: transparent; border-radius: 10px; width: 6px; } .sidebar_items ul { list-style-type: none; padding: 0; margin: 0; } .sidebar_items ul+ul { border-top: 1px solid #191b22; margin-top: 8px; padding-top: 8px; } .sidebar_items a { display: flex; align-items: center; font-size: 12px; font-weight: 600; border-radius: 8px; padding-block: 10px; padding-inline-start: 10px; margin: 2px 0 2px 10px; gap: 8px; cursor: pointer; color: #fff; text-decoration: none; transition: transform 200ms ease; } .sidebar_items a:hover{ transform: scale(1.05); } .sidebar_items a.active { background: #222; } main { grid-column: 2 / span 1; overflow-x: hidden; padding-bottom: 20px; } @media (min-aspect-ratio: 0.8 / 1) and (min-width: 1000px) { main { grid-row: 1 / span 2; } } @media (max-width: 999px) { main { grid-row: 2 / span 1; padding-top: 8px; } } .page{ --views-gap: 1.6rem; display: flex; flex-direction: column; padding-left: 6px; padding-right: 6px; gap: 0.6rem; } @media (min-width: 1000px) { .page { --views-gap: 2rem; padding-top: 10px; padding-left: 16px; padding-right: 16px; } } footer{ font-size: .875rem; background-color: #000; color: #f6f6f6; } .footer_inner { margin: auto; max-width: 1440px; padding: 1rem; } .footer_rule { margin-top: 2rem; margin-bottom: 2rem; opacity: 0.35; display: none; background-color: #f3f4f5; } .Footer_footerSocial{ display: flex; flex-direction: column; } .Footer_fss{ padding: 1.5rem 1rem; display: flex; } .Footer_fsl{ color: #f6f6f6; margin-right: 1.25rem; transition-duration: .1s; transition-timing-function: linear; transform: translateX(0) translateY(0); fill: currentColor; text-decoration: none; } .Footer_legal{ flex: 1 1; width: 100%; font-weight: 300; font-size: .75rem; line-height: 1.625; padding: 0 1rem; margin-bottom: 1rem; } .Footer_legalCopy{ margin-bottom: .5rem; font-weight: 700; } .Footer_legalList{ display: flex; flex-wrap: wrap; } footer ol, footer ul{ list-style: none; margin: 0; padding: 0; } .Footer_legalLink{ color: #f6f6f6; position: relative; text-decoration: none; } .Footer_divider:not(:last-child):after{ content: "|"; padding: 0 .5rem; } button.Footer_legalLink{ background-color: transparent !important; border-width: 0 !important; color: inherit !important; font: inherit !important; font-weight: inherit !important; padding: 0 !important; } .Footer_legalLink:hover { text-decoration: underline; } .Footer_legalLogo{ width: 6rem; margin-top: .95rem; } footer p { margin: 0; } @media (min-width: 1024px) { footer { font-size: .75rem; } .footer_inner { padding: 2rem; } .footer_rule { display: block; } .Footer_footerSocial{ flex-direction: row; } .Footer_fss { padding: 0; order: 2; } } .btn{ display: inline-block; background: var(--highlight); border-radius: 24px; padding: 5px 14px 4px 14px; font-weight: 600; cursor: pointer; } .btn:hover{ background: var(--highlight-hover); } .btn.red{ background-image: url(img/redplus_white.png); background-repeat: no-repeat; background-position: 11px 9px; background-size: 38px; padding-left: 53px; } .stories_slider_row{ position: relative; min-height: 280px; opacity: 0; animation-name: showSliderRow; animation-delay: 200ms; animation-duration: 150ms; animation-fill-mode: forwards; } @keyframes showSliderRow { 0% {opacity: 0;} 100% {opacity: 1;} } .stories_slider_row:before{ content: ' '; position: absolute; top: 0; bottom: 0; width: 10px; z-index: 1; } .stories_slider_row:before{ left: 0; background: -moz-linear-gradient(left, var(--background-rgba-100) 0%, var(--background-rgba-0) 100%); background: -webkit-linear-gradient(left, var(--background-rgba-100) 0%, var(--background-rgba-0) 100%); background: linear-gradient(to right, var(--background-rgba-100) 0%, var(--background-rgba-0) 100%); } .stories_slider_row:after{ right: 0; background: -moz-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 100%); background: -webkit-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 100%); background: linear-gradient(to right, var(--background-rgba-0) 0%, var(--background-rgba-100) 100%); } .stories_slider_header{ display: flex; align-items: baseline; gap: 8px; padding: 10px 10px 10px; } h2.slider_title{ flex: 1 1; text-transform: uppercase; font-size: 1.25rem; font-weight: 900; line-height: .8; margin-block: 20px 0px; padding: 0 10px; } @keyframes zuckSlideTime{0%{max-width:0}to{max-width:100%}}@keyframes zuckLoading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}#zuck-modal{outline:0!important;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100%;background:rgba(0,0,0,.75);z-index:100000;font-size:14px;font-family:inherit}#zuck-modal-content,#zuck-modal-content .story-viewer,#zuck-modal-content .story-viewer>.slides,#zuck-modal-content .story-viewer>.slides>*{width:100vw;height:100%;top:0;bottom:0;position:absolute;overflow:hidden}#zuck-modal *{user-select:none;outline:0}#zuck-modal.with-effects{transform:scale(.01);transform-origin:top left;transition:.25s}#zuck-modal.with-effects.animated{transform:scale(1);border-radius:0;margin-top:0!important;margin-left:0!important}#zuck-modal.with-effects.closed{transform:translateY(100%)}#zuck-modal .slider{width:300vw;left:-100vw}#zuck-modal .slider,#zuck-modal .slider>*{height:100%;top:0;bottom:0;position:absolute}#zuck-modal .slider>*{width:100vw}#zuck-modal .slider>.previous{left:0}#zuck-modal .slider>.viewing{left:100vw}#zuck-modal .slider>.next{left:200vw}#zuck-modal .slider.animated{-webkit-transition:-webkit-transform .25s linear;transition:-webkit-transform .25s linear;transition:transform .25s linear;transition:transform .25s linear,-webkit-transform .25s linear}#zuck-modal.with-cube #zuck-modal-content{perspective:1000vw;transform:scale(.95);perspective-origin:50% 50%;overflow:visible;transition:.3s}#zuck-modal.with-cube .slider{transform-style:preserve-3d;transform:rotateY(0deg)}#zuck-modal.with-cube .slider>.previous{backface-visibility:hidden;left:100vw;transform:rotateY(270deg) translateX(-50%);transform-origin:center left}#zuck-modal.with-cube .slider>.viewing{backface-visibility:hidden;left:100vw;transform:translateZ(50vw)}#zuck-modal.with-cube .slider>.next{backface-visibility:hidden;left:100vw;transform:rotateY(-270deg) translateX(50%);transform-origin:top right}#zuck-modal-content .story-viewer.paused.longPress .head,#zuck-modal-content .story-viewer.paused.longPress .slides-pointers,#zuck-modal-content .story-viewer.paused.longPress .tip{opacity:0}#zuck-modal-content .story-viewer.viewing:not(.paused):not(.stopped) .slides-pointers>*>.active>b{-webkit-animation-play-state:running;animation-play-state:running}#zuck-modal-content .story-viewer.next{z-index:10}#zuck-modal-content .story-viewer.viewing{z-index:5}#zuck-modal-content .story-viewer.previous{z-index:0}#zuck-modal-content .story-viewer.loading .head .loading,#zuck-modal-content .story-viewer.muted .tip.muted{display:block}#zuck-modal-content .story-viewer.loading .head .right .close,#zuck-modal-content .story-viewer.loading .head .right .time{display:none}#zuck-modal-content .story-viewer .slides-pagination span{position:absolute;top:50vh;font-size:48px;color:#fff;line-height:48px;width:48px;margin:6px;transform:translateY(-50%);z-index:1;text-align:center}#zuck-modal-content .story-viewer .slides-pagination .previous{left:0}#zuck-modal-content .story-viewer .slides-pagination .next{right:0}#zuck-modal-content .story-viewer .slides-pointers{display:table;table-layout:fixed;border-spacing:6px;border-collapse:separate;position:absolute;width:100vh;top:0;left:calc(50vw - 50vh);right:calc(50vw - 50vh);z-index:100020}#zuck-modal-content .story-viewer .slides-pointers>*{display:table-row}#zuck-modal-content .story-viewer .slides-pointers>*>*{display:table-cell;background:hsla(0,0%,100%,.5);border-radius:2px}#zuck-modal-content .story-viewer .slides-pointers>*>.seen{background:#fff}#zuck-modal-content .story-viewer .slides-pointers>*>*>b{background:#fff;width:auto;max-width:0;height:2px;display:block;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-play-state:paused;animation-play-state:paused;border-radius:2px}#zuck-modal-content .story-viewer .slides-pointers>*>.active>b{-webkit-animation-name:zuckSlideTime;animation-name:zuckSlideTime;-webkit-animation-timing-function:linear;animation-timing-function:linear}#zuck-modal-content .story-viewer .head{position:absolute;height:56px;left:0;right:0;line-height:56px;z-index:100010;color:#fff;font-size:14px;text-shadow:1px 1px 1px rgba(0,0,0,.35),1px 0 1px rgba(0,0,0,.35);padding:6px 12px}#zuck-modal-content .story-viewer .head .item-preview{overflow:hidden;vertical-align:top;background-size:cover;width:42px;height:42px;display:inline-block;margin-right:9px;border-radius:50%;vertical-align:middle;background-repeat:no-repeat;background-position:50%}#zuck-modal-content .story-viewer .head .item-preview img{display:block;box-sizing:border-box;height:100%;width:100%;background-size:cover;background-position:50%;object-fit:cover}#zuck-modal-content .story-viewer .head .time{opacity:.75;font-weight:500;font-size:13px}#zuck-modal-content .story-viewer .head .left{line-height:1!important;display:inline-block;margin:6px 0}#zuck-modal-content .story-viewer .head .left .info{display:inline-block;max-width:60vw;vertical-align:middle}#zuck-modal-content .story-viewer .head .left .info>*{width:100%;display:inline-block;line-height:21px}#zuck-modal-content .story-viewer .head .left .info .name{font-weight:500}#zuck-modal-content .story-viewer .head .right{float:right}#zuck-modal-content .story-viewer .head .back,#zuck-modal-content .story-viewer .head .right .close{font-size:42px;width:48px;height:48px;line-height:48px;cursor:pointer;text-align:center}#zuck-modal-content .story-viewer .head .left .back{display:none;width:24px;margin:-9px -6px 0}#zuck-modal-content .story-viewer .head .right .time{display:none}#zuck-modal-content .story-viewer .head .loading{display:none;border-radius:50%;width:30px;height:30px;margin:9px 0;box-sizing:border-box;border:4px solid hsla(0,0%,100%,.2);border-top-color:#fff;-webkit-animation:zuckLoading 1s linear infinite;animation:zuckLoading 1s linear infinite}#zuck-modal-content .story-viewer .head,#zuck-modal-content .story-viewer .slides-pointers,#zuck-modal-content .story-viewer .tip{-webkit-transition:opacity .5s;transition:opacity .5s}#zuck-modal-content .story-viewer .slides .item{display:none;overflow:hidden;background:#000}#zuck-modal-content .story-viewer .slides .item:before{z-index:1;background:transparent;content:"";position:absolute;left:0;right:0;bottom:0;top:0}.card.storydetail_box>.media,#zuck-modal-content .story-viewer .slides .item>.media{height:100%;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:auto}#zuck-modal-content .story-viewer .slides .item.active,#zuck-modal-content .story-viewer .slides .item.active .tip.link{display:block}#zuck-modal-content .story-viewer .tip{z-index:5;text-decoration:none;display:none;border-radius:24px;background:rgba(0,0,0,.75);font-size:16px;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;color:#fff;text-align:center;text-transform:uppercase;font-weight:500;padding:12px 24px}#zuck-modal.rtl{direction:rtl;left:auto;right:0}#zuck-modal.rtl.with-effects{transform-origin:top right}#zuck-modal.rtl.with-effects.animated{margin-left:auto!important;margin-right:0!important}#zuck-modal.rtl .slider{left:auto;right:-100vw}#zuck-modal.rtl .slider>.previous{left:auto;right:0;transform:rotateY(-270deg) translateX(50%)}#zuck-modal.rtl .slider>.viewing{left:auto;right:100vw}#zuck-modal.rtl .slider>.next{left:auto;right:200vw}#zuck-modal.rtl.with-cube .slider>.previous{left:auto;right:100vw;transform-origin:center right}#zuck-modal.rtl.with-cube .slider>.viewing{left:auto;right:100vw;transform:translateZ(50vw)}#zuck-modal.rtl.with-cube .slider>.next{left:auto;right:100vw;transform-origin:top left;transform:rotateY(270deg) translateX(-50%)}#zuck-modal.rtl #zuck-modal-content .story-viewer .slides-pagination .previous{left:auto;right:0}#zuck-modal.rtl #zuck-modal-content .story-viewer .slides-pagination .next{right:auto;left:0}#zuck-modal.rtl #zuck-modal-content .story-viewer .head .item-preview{margin-right:auto;margin-left:9px}#zuck-modal.rtl #zuck-modal-content .story-viewer .head .right{float:left}#zuck-modal.rtl #zuck-modal-content .story-viewer .tip{left:auto;right:50%;transform:translateX(50%)}@media (max-width:1024px){#zuck-modal-content .story-viewer .head{top:3px}#zuck-modal-content .story-viewer .head .loading{width:24px;height:24px;margin:6px 0}#zuck-modal-content .story-viewer .head .item-preview{width:30px;height:30px;margin-right:9px}#zuck-modal-content .story-viewer .head .left{font-size:15px;margin:15px 0}#zuck-modal-content .story-viewer .head .left>div{line-height:30px}#zuck-modal-content .story-viewer .head .right .time{display:block;white-space:nowrap;font-size:15px;margin:15px 0;line-height:30px}#zuck-modal-content .story-viewer .head .left>.back{display:none;background:transparent;z-index:20;visibility:visible;position:absolute;height:42px;width:24px;line-height:36px;text-align:left;vertical-align:top;text-shadow:none}#zuck-modal-content .story-viewer.with-back-button .head .left>.back{display:block}#zuck-modal-content .story-viewer.with-back-button .head .left .item-preview{margin-left:18px}#zuck-modal-content .story-viewer .slides-pointers{width:100vw;left:0;right:0}#zuck-modal-content .story-viewer .tip{font-size:14px;padding:6px 12px}#zuck-modal-content .story-viewer .head .left .time,#zuck-modal-content .story-viewer .head .right .close{display:none}#zuck-modal.rtl #zuck-modal-content .story-viewer .head .item-preview{margin-right:auto;margin-left:9px}#zuck-modal.rtl #zuck-modal-content .story-viewer .head .left>.back{text-align:right}#zuck-modal.rtl #zuck-modal-content .story-viewer.with-back-button .head .left .item-preview{margin-left:auto;margin-right:18px}}.stories.carousel{white-space:nowrap;overflow-y:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch}.stories.carousel .story{display:inline-block;width:18vw;max-width:90px;margin:10px 6px 0 6px;vertical-align:top}.stories.carousel .story:first-child{margin-left:0}.stories.carousel .story:last-child{margin-right:0}.stories.carousel .story>.item-link{text-align:center;display:block}.stories.carousel .story>.item-link:active>.item-preview{transform:scale(.9)}.stories.carousel .story>.item-link>.item-preview{display:block;box-sizing:border-box;font-size:0;max-height:90px;height:18vw;overflow:hidden;transition:transform .2s}.stories.carousel .story>.item-link>.item-preview img{display:block;box-sizing:border-box;height:100%;width:100%;background-size:cover;background-position:50%;object-fit:cover}.stories.carousel .story>.item-link>.info{display:inline-block;margin-top:.5em;line-height:1.2em;width:100%;overflow:hidden;text-overflow:ellipsis}.stories.carousel .story>.item-link>.info .name{font-weight:300}.stories.carousel .story>.item-link>.info .time,.stories.carousel .story>.items{display:none}.stories.list{white-space:nowrap;overflow:auto}.stories.list .story{display:block;width:auto;margin:6px;padding-bottom:6px}.stories.list .story>.item-link{text-align:left;display:block}.stories.list .story>.item-link>.item-preview{height:42px;width:42px;max-width:42px;margin-right:12px;vertical-align:top;display:inline-block;box-sizing:border-box;font-size:0;overflow:hidden}.stories.list .story>.item-link>.item-preview img{display:block;box-sizing:border-box;height:100%;width:100%;background-size:cover;background-position:50%}.stories.list .story>.item-link>.info{display:inline-block;line-height:1.6em;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.stories.list .story>.item-link>.info .name{font-weight:500;display:block}.stories.list .story>.item-link>.info .time{display:inline-block}.stories.list .story>.items{display:none}.stories.rtl{direction:rtl}.stories.rtl.carousel .story:first-child{margin-left:auto;margin-right:0}.stories.rtl.carousel .story:last-child{margin-right:auto;margin-left:0}.stories.rtl.list .story>.item-link{text-align:right}.stories.rtl.list .story>.item-link>.item-preview{margin-right:auto;margin-left:12px} .stories.snapgram .story > .item-link{text-decoration:none;color:#333}.stories.snapgram .story > .item-link>.item-preview{border-radius:50%;padding:2px;background:radial-gradient(ellipse at 70% 70%, var(--highlight) 8%, var(--highlight-hover) 42%, var(--highlight) 58%)}.stories.snapgram .story > .item-link>.item-preview>*{border-radius:50%;border:3px solid #fff;background:rgba(255,255,255,0.8)}.stories.snapgram .story.seen{opacity:.75}.stories.snapgram .story.seen>a>.item-preview{background:#999}.stories.snapgram .story.seen>a{color:#999!important} .stories.carousel .story>.item-link>.item-preview img{ transition: transform 1s cubic-bezier(0.19, 1, .22, 1); transform: rotate(0deg) scale(1.0); } .stories.carousel .story>.item-link:hover>.item-preview img{ transform: rotate(2deg) scale(1.045); } @media( min-height:480px ){ } body.storyhint #zuck-modal .stories_hint_bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5; background: var(--box-background); opacity: 0.6; } #zuck-modal .stories_hint{ position: absolute; height: 764px; z-index: 6; background: var(--box-background); padding: 4px 8px; opacity: 0.88; } #zuck-modal .stories_hint.done{ animation: stories_hint-fadeout 350ms ease-in-out forwards; } @keyframes stories_hint-fadeout{ 0% { opacity: 0.95; transform: scale(1); } 100% { opacity: 0; transform: scale(.0); } } #zuck-modal .stories_hint_header{ font-size: 17px; text-align: center; margin: 14% auto; } #zuck-modal .stories_hint_header h1{ font-size: 29px; } #zuck-modal .stories_hint_row{ font-size: 17px; clear: both; margin: 35px 5%; } #zuck-modal .stories_hint_row img{ float: left; margin: 0px 24px; width: 50px; } #zuck-modal .stories_hint_row b{ font-size: 23px; display: block; padding-top: 2px; padding-bottom: 1px; } #zuck-modal .stories_hint_footer{ font-size: 17px; text-align: center; margin-top: 20%; } #zuck-modal .stories_hint_footer .btn2{ padding: 7px 30px; height: 44px; font-size: 15px; } #zuck-modal-content .story-viewer .head:after{ content: ' '; position: absolute; width: 100%; height: 90px; left: 0; top: -10px; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); } #zuck-modal-content .story-viewer .head .left, #zuck-modal-content .story-viewer .head .right{ position: relative; z-index: 1; } .stories.carousel .story>.item-link>.info{ color: var(--text-color2); font-size: 12px; box-sizing: border-box; } .card.storydetail_box .tip, #zuck-modal-content .story-viewer .tip{ position: absolute; z-index: 1000; color: #fff; text-align: center; font-weight: 500; display: block; font-size: 22px; text-transform: none; text-decoration: none; transform: none; width: 100%; left: 0; bottom: 0; padding: 100px 5% 20px 5%; box-sizing: border-box; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 78%,rgba(0,0,0,0.9) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 78%,rgba(0,0,0,0.9) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 78%,rgba(0,0,0,0.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); border-radius: 0 0 20px 20px; } .card.storydetail_box .tip.link, #zuck-modal-content .story-viewer .tip.link{ padding-bottom: calc(70px + env(safe-area-inset-bottom)); } #zuck-modal-content .story-viewer .slides .item:NOT(.article) .tip:NOT(.muted){ min-height: 43%; } .card.storydetail_box a.tip.link:after, #zuck-modal-content .story-viewer a.tip.link:after, .storycta{ background: #fff; color: #000; border-radius: 10px; color: var(--box-background); cursor: pointer; padding: 0; line-height: 40px; height: 40px; width: calc(100% - 32px); position: absolute; text-align: center; padding: 0 6px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); content: 'Read More'; font-size: 12px; box-sizing: border-box; font-weight: 600; display: block; text-decoration: none; } .card.storydetail_box a.tip.link.red:after, #zuck-modal-content .story-viewer a.tip.link.red:after{ content: 'Watch on RED+'; } #zuck-modal-content .story-viewer .head .right .close{ display: block; margin-top: 5px; margin-right: 20px; background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><rect width="1.84" height="18.84" x="16.68" y="18" fill="%23fff" rx=".92" transform="rotate(-45 16.68 18)"/><rect width="1.84" height="18.84" x="30" y="16.7" fill="%23fff" rx=".92" transform="rotate(45 30 16.7)"/></svg>'); } #zuck-modal-content .story-viewer .muted{ position: absolute; top: 54px; right: 0; left: auto; bottom: auto; font-size: 42px; width: 48px; height: 48px; line-height: 48px; cursor: pointer; text-align: center; vertical-align: middle; background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path fill="%23fff" fill-rule="evenodd" d="M27.53 16.97a.95.95 0 0 1 1.1-.76c.75.13 2.28.7 3.63 1.9a7.71 7.71 0 0 1 2.62 5.95c0 1.86-.55 3.32-1.33 4.45l-1.38-1.37c.48-.8.8-1.81.8-3.08 0-2.16-.92-3.59-1.97-4.53a6.43 6.43 0 0 0-2.7-1.45.95.95 0 0 1-.77-1.1z" clip-rule="evenodd"/><path fill="%23fff" fill-rule="evenodd" d="M27.54 21.03a.95.95 0 0 1 1.14-.72c.7.16 2.5 1.19 2.5 3.71 0 .7-.15 1.28-.36 1.76l-1.56-1.52c.05-.6-.07-1.25-.48-1.71-.23-.26-.47-.36-.51-.38 0 0-.01 0 0 0a.95.95 0 0 1-.73-1.14z" clip-rule="evenodd"/><path fill="%23fff" d="M23.4 16.79v1.56l1.9 1.9v-4.27c0-.3-.12-.6-.29-.84a1.59 1.59 0 0 0-.7-.57c-.29-.11-.61-.16-.9-.1-.3.06-.61.21-.82.42l-1.31 1.34 1.33 1.34.8-.78z"/><path stroke="%23fff" stroke-linecap="round" stroke-width="1.9" d="m20.12 18.73-1.76 1.81h-2.59c-.94 0-1.7.76-1.7 1.7v3.45c0 .93.75 1.68 1.67 1.7l2.6.04 4.9 4.9a.65.65 0 0 0 1.1-.46v-9.1"/><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m17.13 15.36 17.2 17.19"/><path stroke="%23fff" stroke-linecap="round" stroke-width="1.9" d="M28.47 30.84A7.2 7.2 0 0 0 31 29.67"/></svg>'); display: none; z-index: 5; } @media (min-width: 1025px){ #zuck-modal-content .story-viewer .muted{ right: 30px; } } #zuck-modal-content .story-viewer .pause{ position: absolute; top: 90px; right: 0; left: auto; bottom: auto; font-size: 42px; width: 48px; height: 48px; line-height: 48px; cursor: pointer; text-align: center; vertical-align: middle; background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path stroke="%23fff" stroke-linecap="round" stroke-width="2.1" d="M20.33 16.86v15.4m7.34-15.4v15.4"/></svg>'); z-index: 5; pointer-events: none; } .stories.carousel .story{ width: 50vw; max-width: 180px; margin-left: 8px; } #stories.stories.carousel .story{ max-width: 100px; } .stories.carousel .story[data-id^=adstory], .stories.carousel .story.ad{ display: none; } .stories.snapgram .story>a.item-link>.item-preview{ max-height: 270px; height: 62vw; border-radius: 10px; padding: 0; background: transparent; } #stories.stories.snapgram .story>a.item-link>.item-preview{ max-height: 100px; height: 100px; border-radius: 100px; border: 2px solid #333; } #stories.stories.snapgram .story:not(.seen)>a.item-link>.item-preview{ border-color: var(--highlight); } .stories.carousel .story>.item-link:active>.item-preview{ transform: none; } .stories.carousel .story>.item-link:active{ transform: scale(0.95); } .stories.snapgram .story > .item-link>.item-preview>*{ border: none; border-radius: 8px 8px 0 0; } .stories.carousel .story>.item-link>.info{ position: absolute; bottom: 0; left: 0; padding: 100px 9px 10px 9px; color: #fff; background: linear-gradient(180deg,transparent 0,rgba(10,10,10,.92)); white-space: normal; font-size: 14px; text-align: left; margin: 0; border-radius: 0 0 8px 8px; min-height: 48px; } #stories.stories.carousel .story>.item-link>.info{ bottom: -14px; font-size: 12px; text-align: center; } .stories.carousel .story>.item-link>.info .name{ font-family: "Questrial"; font-weight: 700; font-style: normal; text-transform: uppercase; } .stories.carousel .story:after{ content: 'NEW'; position: absolute; top: 7px; left: 5px; background: var(--highlight); color: #fff; font-family: "Questrial"; font-size: 11px; font-weight: 600; letter-spacing: -.01em; padding: 3px 5px; border-radius: 10px; } #stories.stories.carousel .story:after{ top: 2px; left: 1px; font-size: 10px; } .stories.carousel .story.seen:after{ display: none; } #zuck-modal-content .story-viewer .slides .item>.bgblur{ position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-size: 320% 100%; background-position: center; background-repeat: no-repeat; filter: blur(640px) opacity(0.5); -webkit-filter: blur(50px) opacity(0.65); transition: background 1s linear; animation: bgblur-fadein 0.250s ease-in-out forwards; } @keyframes bgblur-fadein{ 0% { opacity: 0; transform: scale(.75); } 100% { opacity: 1; transform: scale(1); } } #zuck-modal,#zuck-modal.with-effects{ top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom); height: -webkit-fill-available; } .card.storydetail_box>.media, #zuck-modal-content .story-viewer .slides .item>.media{ z-index: 1; width: 100%; max-width: 430; max-height: 764; object-fit: cover; object-fit: contain; display: flex; align-items: center; justify-content: center; } @media (min-height: 776px){ #zuck-modal-content .story-viewer .slides .item>.media{ top: calc(50% - 366px); } } .card.storydetail_box>.media img, .card.storydetail_box>.media video, #zuck-modal-content .story-viewer .slides .item>.media img, #zuck-modal-content .story-viewer .slides .item>.media video{ width: 100%; height: 764px; max-height: 100%; border-radius: 20px; object-fit: cover; } .card.storydetail_box>.media img, #zuck-modal-content .story-viewer .slides .item>.media img{ object-fit: scale-down; background: rgba(0, 0, 0, 0.64); } @media( max-width:433px ){ .card.storydetail_box>.media img, .card.storydetail_box>.media video, .card.storydetail_box .tip, #zuck-modal-content .story-viewer .slides .item>.media img, #zuck-modal-content .story-viewer .slides .item>.media video, #zuck-modal-content .story-viewer .tip{ border-radius: 0; } } #zuck-modal-content .story-viewer .slides .item:NOT(.article)>.media{ width: 90%; height: 83%; object-fit: contain; } #zuck-modal-content .story-viewer .slides .item .videobg{ -webkit-filter: blur(10px) grayscale(50%); filter: blur(3px) grayscale(50%); opacity: 0.5; width: 100%; height: 100%; } @media( max-width:1024px ){ #zuck-modal-content .story-viewer.with-back-button .head .left>.back{ display: none; } #zuck-modal-content .story-viewer .head .left .time, #zuck-modal-content .story-viewer .head .right .close{ display: inline-block; margin-right: -12px; } #zuck-modal-content .story-viewer .head .left>div { line-height: 20px; } #zuck-modal-content .story-viewer.with-back-button .head .left .item-preview { margin-left: 6px; } } @media( max-width:1024px ) and ( min-height:480px ){ #zuck-modal-content .story-viewer .head .right .time{ display: none; } #zuck-modal-content .story-viewer .slides .item>video.media{ -webkit-transform: none; transform: none; } #zuck-modal-content .story-viewer .slides .item.quadrat>.media, #zuck-modal-content .story-viewer .slides .item.portrait>.media{ position: relative; top: 0; left: 0; height: initial; width: initial; max-width: 100%; position: relative; -webkit-transform: none; transform: none; margin: initial; } #zuck-modal-content .story-viewer .slides .item.quadrat>.media{ top: 15%; } } .stories.carousel{ padding: 0 10px; position: relative; touch-action: auto; overflow-x: auto; overflow-y: hidden; position: relative; scroll-behavior: smooth; } .stories.carousel::-webkit-scrollbar, html.can_touch .stories.carousel::-webkit-scrollbar { width: 0; height: 0; scrollbar-width: none; } .storiesWrapper.box .stories.carousel{ margin: -16px -13px 18px -13px; padding: 0 13px; } .storiesWrapper h2{ margin-top: 17px; } @media screen and (max-width:412px){ .storiesWrapper h2{ font-size: 21px; } } .storiesWrapper h2 .icon-dot-o{ margin: 0 2px 0 4px; font-size: 18px; } .stories.carousel .story{ animation: story-fadein 0.5s ease-in-out forwards; } @keyframes story-fadein{ 0% { opacity: 0; transform: scale(.5); } 50% { opacity: 0; transform: scale(.5); } 100% { opacity: 1; transform: scale(1); } } .scroller{ position: absolute; top: calc(50% - 18px); width: 40px; height: 40px; background: #000; background-image: url('data:image/svg+xml,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.75 1L15 6M15 6L9.75 11M15 6H1" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>'); background-repeat: no-repeat; background-position: center; border-radius: 40px; z-index: 10; opacity: 0; cursor: pointer; transition: opacity 250ms ease-in-out; } .scroll-left{ left: 10px; transform: rotate(180deg); } .scroll-right{ right: 10px; } .scroller.visible{ opacity: 1; } .storycta_box{ position: absolute; left: 16px; right: 16px; bottom: 0; } .tiktoks{ position: fixed; top: 0; left: 0; bottom: 100vh; right: 0; color: #fff; background-color: rgba(54,54,54,0.9); scroll-snap-type: y mandatory; overflow-y: auto; z-index: 100; opacity: 0; transition: all 250ms ease-in-out; } body.tiktok-on{ overflow-y: hidden; } body.tiktok-on .tiktoks{ bottom: 0; opacity: 1; } .tiktoks::-webkit-scrollbar { width: 0; height: 0; } .tiktok { display: flex; align-items: center; scroll-snap-align: center; scroll-snap-stop: always; position: relative; margin: 2vh auto; height: 90vh; width: 480px; max-width: 100%; box-shadow: 0 0 10px -5px #000; border-radius: 10px; background: #000; } .tiktok.muted:before{ content: '🔇'; position: absolute; top: 10px; right: 10px; } .tiktok video{ box-sizing: border-box; padding: 8px; margin: 0 auto; max-height: 100%; max-width: 100%; } .tiktok .caption { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 10px; } .backButton{ position: absolute; top: 12px; left: 2%; width: 32px; height: 32px; border: none; border-radius: 32px; z-index: 1; cursor: pointer; background: #fff; mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512" aria-hidden="true"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg>'); mask-repeat: no-repeat; mask-position: center; } .login_bg { display: flex; align-items: center; justify-content: center; height: 100vh; } .login_box { max-width: 50%; background: #545454; width: 250px; height: 250px; border-radius: 250px; text-align: center; padding-top: 42px } .login_box h2{ font-weight: 900; } .login_box input{ font-size: 20px; width: 130px; padding: 4px 7px; border: 0; } .login_box button{ font-size: 17px; width: 33px; padding: 7px 6px 5px 8px; border: 0; background: #0a0a0a; color: #fff; } .choose_lang{ cursor: pointer; } .choose_lang.active{ font-weight: bold; } .slider-row { position: relative; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap; opacity: 0; animation-name: showSliderRow; animation-delay: 200ms; animation-duration: 150ms; animation-fill-mode: forwards; scroll-behavior: smooth; padding: 12px 12px 0 12px; } .teams_slider { position: relative; margin: 10px -10px; } .teams_slider:before, .teams_slider:after{ content: ' '; position: absolute; top: 0; bottom: 0; width: 20px; z-index: 1; } .teams_slider:before { left: 0; background: -moz-linear-gradient(left, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); background: -webkit-linear-gradient(left, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); background: linear-gradient(to right, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); } .teams_slider:after { right: 0; background: -moz-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); background: -webkit-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); background: linear-gradient(to right, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); } .teams_slider_row { display: flex; width: 100%; padding: 12px 12px 0 12px; } .teams_slider .teambox { position: relative; display: inline-block; margin: 0 8px; flex: auto; min-width: 92px; max-width: 122px; text-align: center; border-radius: 8px; font-size: 16px; transition: transform 200ms ease-in-out; border: none; min-width: 100px; color: #fff; text-decoration: none; } .teams_slider .teambox img{ display: block; margin: 13px auto 8px auto; width: 72px; height: 72px; background: transparent; transition: transform 200ms ease-in-out; } .teams_slider .teambox .rank, .player_slider .playerbox .rank{ position: absolute; top: -22px; right: -4px; font-size: 40px; font-style: italic; font-weight: 800; text-shadow: 1px 1px 3px #000; } .teams_slider .teambox .meta{ background: linear-gradient(180deg, transparent 0, rgba(10, 10, 10, .33)); padding: 10px; } .player_slider .playerbox .meta{ background: linear-gradient(180deg, transparent 0, rgba(10, 10, 10, .55)); padding: 50px 10px 10px 10px; position: absolute; bottom: 0; width: 100%; overflow: hidden; } @media screen and (max-width: 400px) { .teams_slider:before, .teams_slider:after { bottom: 0; } .teams_slider_row { margin-bottom: 5px; } .teams_slider .teambox { min-width: 80px; } .teams_slider .teambox img { width: 48px; height: 48px; } } .teamtitle { margin: 10px 10px 0 10px; padding: 0 10px; flex: auto; border-radius: 8px; font-size: 16px; transition: transform 200ms ease-in-out; border: none; min-height: 96px; } .teamtitle img{ display: inline-block; vertical-align: middle; margin: 11px 10px 13px 10px; width: 72px; height: 72px; background: transparent; transition: transform 200ms ease-in-out; } .teamtitle h1{ display: inline-block; vertical-align: middle; position: relative; z-index: 1; } .teamtitle .teamname_bg { position: absolute; top: -50px; left: 33px; font-weight: bold; font-size: 180px; opacity: 0.065; white-space: nowrap; color: #000; pointer-events: none; } .player_slider { position: relative; margin: 10px -10px; } .player_slider:before, .player_slider:after{ content: ' '; position: absolute; top: 0; bottom: 0; width: 20px; z-index: 1; } .player_slider:before { left: 0; background: -moz-linear-gradient(left, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); background: -webkit-linear-gradient(left, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); background: linear-gradient(to right, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); } .player_slider:after { right: 0; background: -moz-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); background: -webkit-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); background: linear-gradient(to right, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); } .player_slider_row { display: flex; width: 100%; padding: 12px 12px 0 12px; } .player_slider .playerbox { position: relative; display: inline-block; margin: 0 8px; flex: auto; min-width: 92px; max-width: 122px; height: 132px; text-align: center; border-radius: 8px; font-size: 16px; transition: transform 200ms ease-in-out; border: none; min-width: 100px; color: #fff; text-decoration: none; background-image: url('/img/playerplaceholder.png'); background-position: -22px 3px; background-repeat: no-repeat; background-size: 142%; background-color: #222; cursor: pointer; } .player_slider .playerbox img{ display: block; margin: 13px auto 8px auto; width: 72px; height: 72px; background: transparent; transition: transform 200ms ease-in-out; } .player_slider .playerbox img.playerimage{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; border-radius: 8px; } .teams_slider .playerbox .rank{ position: absolute; top: -22px; right: -4px; font-size: 40px; font-style: italic; font-weight: 900; text-shadow: 1px 1px 3px #000; } .teams_slider .playerbox .meta{ background: linear-gradient(180deg, transparent 0, rgba(10, 10, 10, .33)); padding: 10px; } @media screen and (max-width: 400px) { .player_slider:before, .player_slider:after { bottom: 0; } .player_slider_row { margin-bottom: 5px; } .player_slider .playerbox { min-width: 80px; } .player_slider .playerbox img { width: 48px; height: 48px; } } .sponsors{ margin: 15px 0 5px 5px; } .sponsors > div{ display: inline-block; margin: 5px; background: #fff; padding: 10px 15px; border-radius: 6px; } .sponsors > div > div{ display: inline-block; height: 44px; width: calc(50vw - 50px); max-width: 180px; background-repeat: no-repeat; background-size: contain; background-position: center; } @media screen and (max-width: 640px) { .sponsors > div > div{ height: 40px; } } @media screen and (max-width: 400px) { .sponsors > div > div{ height: 33px; } } .match_slider{ position: relative; margin: 0 -10px; } .matchbox{ display: inline-block; margin: 8px; background: #222; padding: 5px; border-radius: 8px; cursor: pointer; } .matchbox .meta{ font-size: 14px; padding: 5px; } .matchbox table tr td:nth-child(1){ width: 20px; } .matchbox table tr td:nth-child(2){ font-weight: bold; width: 60px; padding-left: 5px; } .matchbox table tr td:nth-child(3){ background: #000; font-weight: bold; width: 30px; text-align: center; border-radius: 6px; } .match_slider:before, .match_slider:after { content: ' '; position: absolute; top: 0; bottom: 0; width: 20px; z-index: 3; } .match_slider:before { left: 0; background: -moz-linear-gradient(left, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); background: -webkit-linear-gradient(left, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); background: linear-gradient(to right, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); } .match_slider:after { right: 0; background: -moz-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); background: -webkit-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); background: linear-gradient(to right, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); } .nextmatch_slider{ position: relative; height: 208px; margin: 10px -10px; } .nextmatchbox{ position: relative; display: inline-block; width: 160px; margin: 8px; overflow: hidden; background: var(--box-background); border-radius: 8px; } .nextmatch_slider_row .text{ height: 60px; overflow: hidden; padding: 5px 9px; line-height: 24px; font-size: 13px; } .nextmatch_slider_row .text span{ vertical-align: middle; display: inline-block; font-size: 14px; margin-top: -7px; } .nextmatch_slider_row .text span.vs{ font-size: 15px; margin-top: -5px; } .nextmatch_slider_row .text b{ margin-left: 2px; } .nextmatch_slider_row .text b.team{ font-size: 14px; } .nextmatch_slider_row .result_dot{ position: absolute; top: 111px; right: 14px; width: 29px; height: 29px; font-weight: bold; font-size: 14px; line-height: 24px; color: var(--box-background); border: 3px solid var(--box-background); border-radius: 20px; text-align: center; z-index: 2; } .nextmatch_slider_row .result_dot.result_N{ background: #ca2020; } .nextmatch_slider_row .result_dot.result_U{ background: #d08c2f; } .nextmatch_slider_row .result_dot.result_S{ background: #159015; } .nextmatchbox .teamlogo{ width: 100%; height: 120px; text-align: center; display: inline-block; vertical-align: middle; position: relative; z-index: 2; } .nextmatchbox .teamlogo img{ width: 80px; margin-top: 18px; } .nextmatch_slider:before, .nextmatch_slider:after { content: ' '; position: absolute; top: 0; bottom: 0; width: 20px; z-index: 3; } .nextmatch_slider:before { left: 0; background: -moz-linear-gradient(left, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); background: -webkit-linear-gradient(left, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); background: linear-gradient(to right, var(--background-rgba-100) 50%, var(--background-rgba-0) 100%); } .nextmatch_slider:after { right: 0; background: -moz-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); background: -webkit-linear-gradient(left, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); background: linear-gradient(to right, var(--background-rgba-0) 0%, var(--background-rgba-100) 50%); } .card{ position: fixed; top: calc(50% - 366px); left: 50%; right: 0; width: 430; max-height: 100vh; opacity: 0; margin-left: -215px; background: var(--box-background); z-index: 23; border-radius: 20px; } .card.active{ height: 764px; opacity: 1; } @media screen and (max-width: 433px) { .card.active{ left: 0; width: 100%; margin: 0; border-radius: 0; } } @media screen and (max-height: 840px) { .card.active{ top: 55px; height: calc(100vh - 55px); } } .playerdetail_overlay{ position: fixed; top: 0; left: 0; right: 0; height: 0vh; background: rgba(0,0,0,0.92); z-index: 20; opacity: 0; transition: opacity 250ms ease-in-out; } .playerdetail_overlay.active{ height: 100vh; opacity: 1; } .playerdetail_overlay_bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.4; z-index: 21; } .playerdetail_overlay_bg:after{ content: ' '; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: -moz-linear-gradient(bottom, var(--background-rgba-0) -200%, var(--background-rgba-100) 60%); background: -webkit-linear-gradient(bottom, var(--background-rgba-0) -200%, var(--background-rgba-100) 60%); background: linear-gradient(to top, var(--background-rgba-0) -200%, var(--background-rgba-100) 60%); z-index: 22; } .playerdetail_box h2{ position: relative; margin: 0; padding: 12px 64px 10px 53px; margin-bottom: 22px; border-radius: 8px 8px 0 0; text-shadow: 0 0 16px rgba(0,0,0,0.25); background-color: #333; z-index: 1; } .playerdetail_box h2 i{ font-weight: 400; font-style: normal; } .playerdetail_box .portrait{ position: relative; margin: auto; width: 184px; height: 232px; background-size: cover; background-position: top center; border-radius: 6px; z-index: 4; } .teamlogo_bg{ position: absolute; top: 14px; bottom: 0px; left: 0; right: 0; background-repeat: no-repeat; background-size: 180%; background-position: 20% 0%; filter: blur(5px) grayscale(0.4); opacity: 0.05; border-radius: 0 0 8px 8px; z-index: 1; } .playerdetail_box .teamlogo{ position: absolute; top: 7px; left: 8px; width: 36px; z-index: 2; } .playerdetail_box .shirtnumber{ position: absolute; top: -15px; right: -17px; font-size: 42px; font-style: italic; padding-right: 6px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); background-color: #333; border-radius: 100px; width: 80px; height: 80px; line-height: 79px; text-align: center; z-index: 2; } .playerdetail_box .meta{ position: relative; padding-top: 16px; padding-bottom: 16px; width: 100%; border-radius: 0 0 8px 8px; z-index: 4; } .playerdetail_box .meta th{ text-align: right; font-weight: 400; padding: 2px 3px; width: 50%; font-size: 77%; } .playerdetail_box .meta td{ text-align: left; font-weight: 600; padding: 2px 3px; width: 50%; } .matchdetail_overlay{ position: fixed; top: 0; left: 0; right: 0; height: 0vh; background: rgba(0,0,0,0.92); z-index: 20; opacity: 0; transition: opacity 250ms ease-in-out; } .matchdetail_overlay.active{ height: 100vh; opacity: 1; } .matchdetail_overlay .close{ position: absolute; top: 14px; right: 0px; width: 48px; height: 48px; background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><rect width="1.84" height="18.84" x="16.68" y="18" fill="%23fff" rx=".92" transform="rotate(-45 16.68 18)"/><rect width="1.84" height="18.84" x="30" y="16.7" fill="%23fff" rx=".92" transform="rotate(45 30 16.7)"/></svg>'); cursor: pointer; z-index: 22; } @media (min-width: 1025px){ .matchdetail_overlay .close{ top: 12px; right: 32px; } } .matchdetail_overlay .prev{ position: absolute; top: 0; bottom: 0; left: 0; width: 50%; cursor: pointer; z-index: 22; } .matchdetail_overlay .next{ position: absolute; top: 0; bottom: 0; right: 0; width: 50%; cursor: pointer; z-index: 22; } .matchdetail_overlay_bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.4; z-index: 21; } .matchdetail_overlay_bg:after{ content: ' '; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: -moz-linear-gradient(bottom, var(--background-rgba-0) -200%, var(--background-rgba-100) 60%); background: -webkit-linear-gradient(bottom, var(--background-rgba-0) -200%, var(--background-rgba-100) 60%); background: linear-gradient(to top, var(--background-rgba-0) -200%, var(--background-rgba-100) 60%); z-index: 22; } .matchdetail_box .datetime{ position: absolute; top: 0; left: 0; right: 0; z-index: 4; font-size: 16px; text-align: center; background: var(--box-background-rgba-85); padding: 6px; border-radius: 8px 8px 0 0; } .matchdetail_box .datetime .live{ position: absolute; top: 8px; right: 9px; color: var(--highlight); font-weight: 600; font-size: 11px; } .matchdetail_box .matchresult{ position: absolute; top: 158px; left: 50%; width: 90px; margin-left: -45px; z-index: 5; font-size: 20px; font-weight: bold; text-align: center; background: var(--box-background-rgba-85); border-radius: 8px; padding: 3px 0; } .matchdetail_box .matchresult small{ vertical-align: text-top; margin: 4px; font-size: 18px; } .matchdetail_box .teams{ position: relative; overflow: hidden; height: 200px; border-radius: 8px 8px 0 0; } .matchdetail_box .teams:after{ position: absolute; content: 'vs'; top: 50%; left: 50%; margin-left: -20px; width: 40px; z-index: 3; font-size: 22px; text-align: center; } .matchdetail_box .team{ display: block; position: absolute; top: 0; bottom: 0; width: 70%; transform: skewX(-4.1deg); padding-top: 25px; font-size: 18px; z-index: 3; } .matchdetail_box .team.home{ padding-left: 20%; text-align: left; left: -19.85%; } .matchdetail_box .team.away{ padding-right: 20%; text-align: right; right: -19.85%; } .matchdetail_box .team .inner{ position: absolute; top: 30px; width: 70%; padding: 12px; transform: skewX(4.1deg); text-align: center; font-size: 17px; text-shadow: 0 0 30px rgba(0, 0, 0, 0.75); } .matchdetail_box .team.home .inner{ left: 30%; } .matchdetail_box .team.away .inner{ right: 30%; } .matchdetail_box .teamlogo{ width: 100px; height: 100px; margin: 10px; } .head2head{ width: 100%; margin: 12px auto 18px auto; } .head2head td{ position: relative; font-size: 14px; text-align: center; padding: 13px 6px; font-weight: bold; border-bottom: none; } .head2head .image{ margin: auto 6%; transform: skewX(-4.1deg); } .head2head .image img{ transform: skewX(4.1deg) scale(0.7); background: transparent; } .head2head tr{ position: relative; } .head2head .bar{ position: absolute; display: block; bottom: 1px; height: 9px; opacity: 0.85; background: #dab020; } .head2head .bar:first-child{ left: -51px; } .head2head .bar:last-child{ right: -51px; } .head2head .bar.green{ background: #049437; } .head2head .bar.red{ background: #c21515; } .head2head .label{ position: relative; z-index: 1; font-weight: normal; color: #a0a1a2; } .storydetail_box{ background: transparent; } .storydetail_overlay{ position: fixed; top: 0; left: 0; right: 0; height: 0vh; background: #000; z-index: 20; opacity: 0; transition: opacity 250ms ease-in-out; } .storydetail_overlay.active{ height: 100vh; opacity: 1; } .storydetail_overlay .close{ position: absolute; top: 14px; right: 0px; width: 48px; height: 48px; background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><rect width="1.84" height="18.84" x="16.68" y="18" fill="%23fff" rx=".92" transform="rotate(-45 16.68 18)"/><rect width="1.84" height="18.84" x="30" y="16.7" fill="%23fff" rx=".92" transform="rotate(45 30 16.7)"/></svg>'); cursor: pointer; z-index: 22; } @media (min-width: 1025px){ .storydetail_overlay .close{ top: 12px; right: 32px; } } .storydetail_overlay .title{ position: absolute; top: 26px; left: 12px; color: #fff; font-size: 14px; font-weight: 500; text-shadow: 1px 1px 1px rgba(0, 0, 0, .35), 1px 0 1px rgba(0, 0, 0, .35); z-index: 22; } @media (min-width: 1025px) { .storydetail_overlay .title { top: 15px; left: 26px; } } .storydetail_overlay .prev{ position: absolute; top: 0; bottom: 0; left: 0; width: 50%; cursor: pointer; z-index: 22; } .storydetail_overlay .next{ position: absolute; top: 0; bottom: 0; right: 0; width: 50%; cursor: pointer; z-index: 22; } .storydetail_overlay_bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-size: 320% 100%; background-position: center; background-repeat: no-repeat; filter: blur(640px) opacity(0.5); -webkit-filter: blur(50px) opacity(0.65); transition: background 1s linear; animation: bgblur-fadein 0.250s ease-in-out forwards; z-index: 21; } .storydetail_overlay_bg:after{ content: ' '; position: absolute; width: 100%; height: 90px; left: 0; top: -10px; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); } .standingdetail_overlay{ position: fixed; top: 0; left: 0; right: 0; height: 0vh; background: rgba(0,0,0,0.92); z-index: -1; opacity: 0; transition: opacity 250ms ease-in-out; } .standingdetail_overlay.active{ height: 100vh; opacity: 1; z-index: 20; } .standingdetail_overlay .title{ position: absolute; top: 26px; left: 12px; color: #fff; font-size: 14px; font-weight: 500; text-shadow: 1px 1px 1px rgba(0, 0, 0, .35), 1px 0 1px rgba(0, 0, 0, .35); } .standingdetail_overlay .close{ position: absolute; top: 14px; right: 0px; width: 48px; height: 48px; background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><rect width="1.84" height="18.84" x="16.68" y="18" fill="%23fff" rx=".92" transform="rotate(-45 16.68 18)"/><rect width="1.84" height="18.84" x="30" y="16.7" fill="%23fff" rx=".92" transform="rotate(45 30 16.7)"/></svg>'); cursor: pointer; z-index: 23; } @media (min-width: 1025px){ .standingdetail_overlay .title{ top: 15px; left: 26px; } .standingdetail_overlay .close{ top: 12px; right: 32px; } } .standingdetail_overlay .prev{ position: absolute; top: 0; bottom: 0; left: 0; width: 50%; cursor: pointer; z-index: 22; } .standingdetail_overlay .next{ position: absolute; top: 0; bottom: 0; right: 0; width: 50%; cursor: pointer; z-index: 22; } .standingdetail_overlay_bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.4; z-index: 21; } .standingdetail_overlay_bg:after{ content: ' '; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: -moz-linear-gradient(bottom, var(--background-rgba-0) -230%, var(--background-rgba-100) 140%); background: -webkit-linear-gradient(bottom, var(--background-rgba-0) -230%, var(--background-rgba-100) 140%); background: linear-gradient(to top, var(--background-rgba-0) -230%, var(--background-rgba-100) 140%); z-index: 22; } .standingdetail_box table{ width: 100%; border-collapse: collapse; border-spacing: 0; } .standingdetail_box th{ padding: 6px 3px; font-weight: normal; font-size: 12px; color: #a0a1a2; border-bottom: 2px solid #a0a1a2; } .standingdetail_box td{ position: relative; font-size: 17px; text-align: center; padding: 6px 6px 4px 6px; border-bottom: 1px solid var(--background); } .standingdetail_box td:first-child{ font-weight: 600; } .standingdetail_box tr:last-child td{ border-bottom: none; } .standingdetail_box td.logo{ width: 40px; } .standingdetail_box td.logo > div{ background-repeat: no-repeat; background-size: 30px; background-position: center; width: 40px; height: 40px; border-radius: 16px; } .standingdetail_box td.name{ text-align: left; } @media screen and (max-width: 433px) { .standingdetail_box th.large, .standingdetail_box td.large{ display: none; } } .resultsdetail_overlay{ position: fixed; top: 0; left: 0; right: 0; height: 0vh; background: rgba(0,0,0,0.92); z-index: -1; opacity: 0; transition: all 250ms ease-in-out; } .resultsdetail_overlay.active{ height: 100vh; opacity: 1; z-index: 20; } .resultsdetail_overlay_bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.4; z-index: 21; } .resultsdetail_overlay_bg:after{ content: ' '; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: -moz-linear-gradient(bottom, var(--background-rgba-0) -230%, var(--background-rgba-100) 140%); background: -webkit-linear-gradient(bottom, var(--background-rgba-0) -230%, var(--background-rgba-100) 140%); background: linear-gradient(to top, var(--background-rgba-0) -230%, var(--background-rgba-100) 140%); z-index: 22; } .resultsdetail_overlay .title{ position: absolute; top: 26px; left: 12px; color: #fff; font-size: 14px; font-weight: 500; text-shadow: 1px 1px 1px rgba(0, 0, 0, .35), 1px 0 1px rgba(0, 0, 0, .35); } .resultsdetail_overlay .close{ position: absolute; top: 14px; right: 0px; width: 48px; height: 48px; background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><rect width="1.84" height="18.84" x="16.68" y="18" fill="%23fff" rx=".92" transform="rotate(-45 16.68 18)"/><rect width="1.84" height="18.84" x="30" y="16.7" fill="%23fff" rx=".92" transform="rotate(45 30 16.7)"/></svg>'); cursor: pointer; } @media (min-width: 1025px){ .resultsdetail_overlay .title{ top: 15px; left: 26px; } .resultsdetail_overlay .close{ top: 12px; right: 32px; } } .resultsdetail_overlay .prev{ position: absolute; top: 0; bottom: 0; left: 0; width: 50%; cursor: pointer; z-index: 22; } .resultsdetail_overlay .next{ position: absolute; top: 0; bottom: 0; right: 0; width: 50%; cursor: pointer; z-index: 22; } .resultsdetail_box{ position: fixed; top: 10vh; left: 50%; right: 0; width: 640px; margin: 0 0 0 -320px; background: var(--box-background); z-index: 23; border-radius: 8px; overflow-y: scroll; height: 0vh; opacity: 0; transition: opacity 250ms ease-in-out; } .resultsdetail_box.active{ height: 80vh; opacity: 1; padding: 10px; } .resultsdetail_box::-webkit-scrollbar{ background-color: var(--border-color); border-radius: 0 8px 8px 0; width: 14px; } .resultsdetail_box::-webkit-scrollbar-thumb{ background-color: var(--box-background); border-radius: 8px; border: 3px solid var(--border-color);; } .resultsdetail_box .matchbox{ min-height: 94px; display: block; background-color: var(--border-color); } .resultsdetail_box .matchbox > div{ display: inline-block; vertical-align: middle; } .resultsdetail_box .matchbox .datetime{ width: 170px; } .resultsdetail_box .matchbox .date{ width: 88px; text-align: center; font-weight: bold; margin: auto; } .resultsdetail_box .matchbox .time { width: 80px; font-weight: normal; text-align: center; margin: auto; } .resultsdetail_box .matchbox .time.fin { font-size: 80%; margin: auto; } .resultsdetail_box .matchbox .team{ line-height: 40px; width: 250px; padding-left: 2px; white-space: nowrap; overflow: hidden; clear: both; } .resultsdetail_box .matchbox .team:first-child { margin-bottom: 7px; } .resultsdetail_box .matchbox .image { float: left; width: 40px; height: 40px; padding: 5px; margin: auto 7px; line-height: 1; border-radius: 14px; } .resultsdetail_box .matchbox .image img { width: 30px; } .resultsdetail_box .matchbox .result { font-size: 15px; display: inline-block; color: #fff; } .resultsdetail_box .matchbox .result:not(.time){ background: var(--box-background); width: 40px; height: 40px; font-weight: bold; line-height: 40px; text-align: center; margin-right: 8px; border-radius: 14px; } .resultsdetail_box .matchbox .result div{ } @media screen and (max-width: 640px) { .resultsdetail_box{ width: 360px; margin-left: -180px; } .resultsdetail_box .matchbox .datetime{ width: 100%; padding: 4px; border-bottom: 1px solid var(--box-background); margin-bottom: 10px; } .resultsdetail_box .matchbox .date{ display: none; } .resultsdetail_box .matchbox .time{ font-weight: bold; } .resultsdetail_box .matchbox .action { display: block; text-align: center; padding: 4px; border-top: 1px solid var(--box-background); margin-top: 10px; } } #stories .standing-story, #stories .results-story{ width: 100px; height: 100px; cursor: pointer; } #stories .standing-story>a.item-link>.item-preview, #stories .results-story>a.item-link>.item-preview{ border-color: #eee !important; overflow: hidden; position: relative; } #stories .standing-story>a.item-link>.item-preview:after, #stories .results-story>a.item-link>.item-preview:after{ content: ' '; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 100px; background-position: center bottom; background-repeat: no-repeat; background-size: contain; transform: scale(1); transition: transform 1s cubic-bezier(0.19, 1, .22, 1); } #stories .standing-story>a.item-link>.item-preview:after{ background-image: url(img/standings2.png); background-size: 90%; } #stories .results-story>a.item-link>.item-preview:after{ background-image: url(img/results2.png); background-size: 66%; } #stories .standing-story>a.item-link:hover>.item-preview:after, #stories .results-story>a.item-link:hover>.item-preview:after{ transform: scale(1.09); } #muted_toggle{ position: fixed; top: 12px; right: 70px; width: 48px; height: 48px; cursor: pointer; z-index: 100001; background-position: center; background-size: 26px; background-repeat: no-repeat; display: none; } @media screen and (max-width: 1024px) { #muted_toggle{ top: 14px; right: 40px; } } #muted_toggle[data-status="1"]{ background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="white"><path d="M21.29,1.29,17.86,4.73a2.52,2.52,0,0,0-3.8-1.3L8.7,7H5A1,1,0,0,0,4,8v8a1,1,0,0,0,1,1h.59l-4.3,4.29a1,1,0,0,0,1.42,1.42C9.05,16.36,8.29,17,8.7,17c5.7,3.8,5.73,4,6.76,4A2.54,2.54,0,0,0,18,18.46v-11l4.71-4.7A1,1,0,0,0,21.29,1.29Zm-6.12,3.8a.55.55,0,0,1,.83.45v1l-6,6V8.54ZM6,15V9H8C8,15.81,8.53,15,6,15Zm10,3.46a.55.55,0,0,1-.83.45L10,15.46c0-.1-.46.42,6-6.05Z"/></g></svg>'); } #muted_toggle[data-status="0"]{ background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="white"><path d="M11.46,3c-1,0-1,.13-6.76,4H1A1,1,0,0,0,0,8v8a1,1,0,0,0,1,1H4.7l5.36,3.57A2.54,2.54,0,0,0,14,18.46V5.54A2.54,2.54,0,0,0,11.46,3ZM2,9H4v6H2Zm10,9.46a.55.55,0,0,1-.83.45L6,15.46V8.54l5.17-3.45a.55.55,0,0,1,.83.45Z"/><path d="M16.83,9.17a1,1,0,0,0-1.42,1.42,2,2,0,0,1,0,2.82,1,1,0,0,0,.71,1.71C17.5,15.12,19.16,11.5,16.83,9.17Z"/><path d="M19,7.05a1,1,0,0,0-1.41,1.41,5,5,0,0,1,0,7.08,1,1,0,0,0,.7,1.7C19.9,17.24,23.09,11.19,19,7.05Z"/></g></svg>'); } body.storyview #muted_toggle{ display: block; } body.storyhint #muted_toggle{ display: none !important; } @media screen and (min-width: 560px) { .matchdetail_overlay:before, .matchdetail_overlay:after, .storydetail_overlay:after, .standingdetail_overlay:after, #zuck-modal-content .story-viewer .slides:before, #zuck-modal-content .story-viewer .slides:after{ position: absolute; content: ' '; top: 50%; width: 32px; height: 32px; margin-top: -16px; background-position: center; background-size: 32px; background-repeat: no-repeat; z-index: 21; } .matchdetail_overlay:before, #zuck-modal-content .story-viewer .slides:before{ left: 40px; background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-chevron-left" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" fill="white"/></svg>'); } .matchdetail_overlay:after, .storydetail_overlay:after, .standingdetail_overlay:after, #zuck-modal-content .story-viewer .slides:after{ right: 40px; background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-chevron-right" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" fill="white"/></svg>'); } body.storyhint #zuck-modal-content .story-viewer .slides:before, body.storyhint #zuck-modal-content .story-viewer .slides:after, #zuck-modal-content .story-viewer .slides[data-i="0"]:before{ display: none; } }