:root { --im-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; --im-color: #fff; --im-bg: #0b1016; --im-link-color: #5fb3fb; --im-link-hover-color: rgba(95, 178, 251, 0.682); --im-btn-color: #fff; --im-btn-bg: rgba(0, 102, 219, 0.84); --im-btn-hover-bg: rgba(9, 80, 161, 0.89); --im-btn-active-box-shadow: 0 0 0 .25em rgba(24, 104, 250, 0.24); --im-btn-s-color: var(--im-bg); --im-btn-s-bg: rgba(225, 239, 255, .8); --im-btn-s-hover-bg: rgba(225, 239, 255, .95); --im-btn-s-active-bg: rgba(225, 239, 255, .6); --im-overlay-bg: linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.118) 100%) } div[data-service], div[data-service] .cll, div[data-service] .cll a, div[data-service] .cll button { all: initial; visibility: unset; font-size: inherit; font-family: inherit; font-weight: inherit; box-sizing: border-box; } div[data-service] .cll span, div[data-service] .cll iframe, div[data-service] .cll ::after, div[data-service]::before{ all: unset; box-sizing: border-box; } div[data-service] .cll a, div[data-service] .cll button, div[data-service] .cll input{ font-family: inherit; font-size: 100%; line-height: normal; margin: 0; outline: revert; cursor: pointer; overflow: hidden; -webkit-appearance: none; appearance: none; display: revert; } div[data-service]{ font-family: var(--im-font-family); font-size: 16px; font-weight: 400; display: inline-block; max-width: 100%; min-height: 9.375rem; min-width: 18.75rem; position: relative; background-color: var(--im-bg); overflow: hidden; } div[data-service]::before{ padding-top: 56.25%; display: block; content: ''; } div[data-service] .cll .c-ld { bottom: 2em; right: 2.5em; opacity: 0; visibility: hidden; transform: translateY(1.4em); } div[data-service] .cll .c-ld, div[data-service] .cll .c-ld:after{ position: absolute; z-index: 1; border-radius: 100%; width: 1.25em; height: 1.25em; } div[data-service] .cll .c-ld::after{ content: ''; border: .25em solid white; border-top: .25em solid transparent; animation: spin 1s linear infinite; } div[data-service].c-h-n .cll .c-ld{ opacity: 1; visibility: visible; transform: translateY(0); } div[data-service].c-h-b .cll .c-ld{ opacity: 0; visibility: hidden; transform: translateY(0); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } div[data-autoscale]{ height: auto; width: 100%; } div[data-service] .cll .c-nt{ color: var(--im-color); max-width: 100%; height: 100%; width: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } div[data-service] .cll .c-bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .5; } div[data-service] .cll .c-bg::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: var(--im-overlay-bg); } div[data-service] .cll .c-bg-i{ background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; } div[data-service] .cll .c-bg-i.loaded{ opacity: 1; } div[data-service] .cll .c-tl{ display: block; margin-bottom: .6em; font-size: 1.2em; font-weight: 600; text-align: center; } div[data-service].c-h-n .cll .c-bg{ opacity: 1; transform: scale(1); } div[data-service] .cll .c-n-c{ display: flex; justify-content: center; align-items: center; height: 100%; position: relative; } div[data-service] .cll .c-n-t{ display: block; font-size: .87em; position: relative; z-index: 1; line-height: 1.4em; max-width: 32em; margin: 0 auto; } div[data-service] .cll .c-n-a{ margin-top: 1.25em; } div[data-service] .cll .c-n-t, div[data-service] .cll .c-n-a{ display: flex; align-items: center; justify-content: center; text-align: center; } div[data-service] .cll .c-n-a button + button { margin-left: .8em; } div[data-service] .cll .c-t-cn{ padding: 0 .75em; z-index: 1; } div[data-service] .cll .c-la-b, div[data-service] .cll .c-l-b{ display: flex; justify-content: space-evenly; align-items: center; align-self: stretch; position: relative; padding: .975em 1.1em; background: var(--im-btn-bg); border-radius: .3125em; font-size: .77em; color: var(--im-btn-color); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.19) 0 .25em .75em; } /* Play icon */ div[data-service] .cll .c-l-b::before{ content: ''; display: block; border-left: 1em solid var(--im-btn-color); border-top: 0.6em solid transparent; border-bottom: 0.6em solid transparent; background-position: center; background-repeat: no-repeat; background-size: contain; margin-right: .75em; } div[data-service] .cll .c-la-b{ background: var(--im-btn-s-bg); color: var(--im-btn-s-color); } div[data-service] .cll .c-la-b:hover{ background: var(--im-btn-s-hover-bg); } div[data-service] .cll .c-l-b:hover{ background: var(--im-btn-hover-bg); } div[data-service] .cll .c-la-b:active{ transition: none!important; background: var(--im-btn-s-active-bg); } div[data-service] .cll .c-l-b:active{ transition: none!important; box-shadow: var(--im-btn-active-box-shadow); } div[data-service].c-h-n .cll .c-t-cn{ opacity: 0; visibility: hidden; transform: translateY(-.7em); transition-duration: .2s; } div[data-service] .cll iframe{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; border: none; max-width: 100%; width: 100%; background: #fff; display: block; visibility: hidden; opacity: 0; z-index: 1; } div[data-service].c-h-b .cll iframe{ opacity: 1; visibility: visible; display: block!important; height: 100%!important; } div[data-service] .cll .c-n-t a { color: var(--im-link-color); text-decoration: none; border-bottom: 1px solid var(--im-link-color); } div[data-service] .cll .c-n-t a:hover{ --im-link-color: var(--im-link-hover-color); } div[data-service][data-ratio="1:1"]::before{ padding-top: 100%; } div[data-service][data-ratio="2:1"]::before{ padding-top: 50%; } div[data-service][data-ratio="3:2"]::before{ padding-top: 66.666666%; } div[data-service][data-ratio="5:2"]::before{ padding-top: 40%; } div[data-service][data-ratio="4:3"]::before{ padding-top: 75%; } div[data-service][data-ratio="16:9"]::before{ padding-top: 56.25%; } div[data-service][data-ratio="16:10"]::before{ padding-top: 62.5%; } div[data-service][data-ratio="20:9"]::before{ padding-top: 45%; } div[data-service][data-ratio="21:9"]::before{ padding-top: 42.857142%; } /** Vertical aspect ratios **/ div[data-service][data-ratio="9:16"]::before{ padding-top: 177.777777%; } div[data-service][data-ratio="9:20"]::before{ padding-top: 222.222222%; } div[data-widget]::before { display: none; } div[data-widget].c-h-b .cll .c-ld{ opacity: 0; visibility: hidden; } div[data-widget] .cll + *, div[data-widget] .cll > *:last-child{ margin: 0!important; height: 100%!important; } div[data-service] [data-placeholder] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; } @keyframes fadeIn { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } } div.c-an [data-placeholder]{ animation: none; } div[data-service] [data-placeholder][data-visible]{ display: flex; align-items: center; justify-content: center; color: var(--im-color); animation: fadeIn .2s forwards; animation-delay: .4s; } div[data-service].show-ph [data-placeholder]{ opacity: 1; visibility: visible; } div[data-service].show-ph .cll .c-ld{ opacity: 0; visibility: hidden; } div.c-an .cll .c-n-t, div.c-an .cll .c-bg, div.c-an .cll .c-bg::before, div.c-an .cll .c-ld, div.c-an .cll .c-t-cn{ transition: opacity .3s ease, visibility .3s ease, transform .4s ease; } div.c-an .cll .c-bg-i{ transition: opacity .5s ease, transform .5s ease; } div.c-an[data-widget]{ transition: opacity .3s ease, background-color .3s ease; } div.c-an .cll .c-la-b, div.c-an .cll .c-l-b{ transition: opacity .3s ease, transform .3s cubic-bezier(0.25, 1, 0.5, 1), visibility .3s ease, box-shadow .3s ease, background-color .3s ease; } div.c-an .cll .c-n-t a{ transition: color .2s ease, border-color .2s ease } div.c-an .cll iframe, div.c-an [data-placeholder]{ transition: opacity .3s ease, visibility .3s ease; transition-delay: .1s; }