@font-face {
    font-display: swap;
    font-family: "Supercell Text";
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/SupercellText-Regular.6f8ad7b.eot), url(/fonts/SupercellText-Regular.58e15e1.woff2) format("woff2"), url(/fonts/SupercellText-Regular.d06ca08.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "Supercell Text";
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/SupercellText-Medium.179b128.eot), url(/fonts/SupercellText-Medium.1919815.woff2) format("woff2"), url(/fonts/SupercellText-Medium.0d3b52c.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "Supercell Text";
    font-stretch: normal;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/SupercellText-Bold.c336396.eot), url(/fonts/SupercellText-Bold.3e131b7.woff2) format("woff2"), url(/fonts/SupercellText-Bold.fb20f59.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "Supercell Headline";
    font-stretch: normal;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/SupercellHeadline-Bold.29111d4.eot), url(/fonts/SupercellHeadline-Bold.2bbb07c.woff2) format("woff2"), url(/fonts/SupercellHeadline-Bold.9b0ebea.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "Supercell Headline";
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    src: url(/fonts/SupercellHeadline-Heavy.e4432e4.eot), url(/fonts/SupercellHeadline-Heavy.054dfff.woff2) format("woff2"), url(/fonts/SupercellHeadline-Heavy.3529c6a.woff) format("woff")
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    height: 100vh;
    text-rendering: optimizeLegibility
}

*,
:after,
:before {
    box-sizing: inherit;
    outline: 0;
    -webkit-text-decoration: none;
    text-decoration: none
}

#__layout,
#__nuxt,
body {
    height: 100%
}

body {
    color: #1c1c1c;
    font-family: "Supercell Text", sans-serif;
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    position: relative
}

html.ios body {
    overscroll-behavior-y: unset
}

body:before {
    content: "mobile";
    position: fixed;
    visibility: hidden
}

@media(min-width:30em) {
    body:before {
        content: "phablet"
    }
}

@media(min-width:48em) {
    body:before {
        content: "tablet"
    }
}

@media(min-width:64em) {
    body:before {
        content: "laptop"
    }
}

@media(min-width:90em) {
    body:before {
        content: "desktop"
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: #000;
    margin: 0
}

h2 {
    font-size: 22px
}

@media(min-width:48em) {
    h2 {
        font-size: 26px
    }
}

p {
    font-size: 14px
}

@media(min-width:48em) {
    p {
        font-size: 16px
    }
}

select {
    font-family: "Supercell Text", sans-serif
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f3f3f3
}

bold {
    font-weight: 700
}

.error-page {
    align-items: center;
    height: 100%;
    justify-content: center
}

.error-page,
.heroModule {
    display: flex;
    flex-direction: column
}

.heroModule {
    justify-content: space-between;
    min-height: 70vh;
    padding: 40px;
    position: relative;
    width: 100%
}

@media(min-width:48em) {
    .heroModule {
        padding: 80px
    }
}

.heroModule__image,
.heroModule__video {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.heroModule__header {
    margin-bottom: 40px
}

.heroModule__header,
.heroModule__info {
    align-items: center;
    display: flex;
    justify-content: center
}

.heroModule__info {
    flex-direction: column
}

.heroModule__info img {
    margin-bottom: 40px;
    max-width: 260px
}

.heroModule__tagline {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center
}

@media(min-width:48em) {
    .heroModule__tagline {
        font-size: 24px;
        font-weight: inherit;
        max-width: 600px
    }
}

.heroModule__appButtonsWrapper,
.heroModule__signupButton {
    margin-top: 24px
}

@media(min-width:48em) {

    .heroModule__appButtonsWrapper,
    .heroModule__signupButton {
        margin-top: 40px
    }
}

.heroModule__socialIconsWrapper {
    display: flex;
    gap: 16px;
    grid-area: socials
}

@media(max-width:47.99em) {
    .heroModule__socialIconsWrapper {
        justify-content: center
    }
}

.heroModule__socialIcon {
    display: inline-block;
    /* height: 24px; */
    /* width: 24px */
}

.heroModule__socialIcon img {
    max-width: 32px;
}

.heroModule__socialIcon--logo {
    display: inline-block;
    height: 38px;
    margin-right: 8px;
    width: 47px
}

@media(min-width:48em) {
    .heroModule__socialIcon--logo {
        margin-right: 0
    }
}

.heroModule__socialIcon--last {
    margin-right: 0
}

.heroModule__headerLogoWrapper {
    width: 160px
}

@media(min-width:48em) {
    .heroModule__headerLogoWrapper {
        width: 240px
    }
}

.heroModule__headerLogoWrapper img {
    width: 100%
}

@media(max-width:47.99em) {
    .heroModule__localeSelectorWrapper {
        justify-content: center
    }
}

.parallaxHeroModule {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 70vh;
    padding: 40px;
    position: relative;
    width: 100%;
    z-index: 0
}

@media(min-width:48em) {
    .parallaxHeroModule {
        padding: 80px
    }
}

.parallaxHeroModule__image,
.parallaxHeroModule__video {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.parallaxHeroModule__header {
    margin-bottom: 40px
}

.parallaxHeroModule__header,
.parallaxHeroModule__info {
    align-items: center;
    display: flex;
    justify-content: center
}

.parallaxHeroModule__info {
    flex-direction: column
}

.parallaxHeroModule__info img {
    margin-bottom: 40px;
    max-width: 260px
}

.parallaxHeroModule__tagline {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center
}

@media(min-width:48em) {
    .parallaxHeroModule__tagline {
        font-size: 24px;
        font-weight: inherit;
        max-width: 600px
    }
}

.parallaxHeroModule__appButtonsWrapper,
.parallaxHeroModule__signupButton {
    margin-top: 24px
}

@media(min-width:48em) {

    .parallaxHeroModule__appButtonsWrapper,
    .parallaxHeroModule__signupButton {
        margin-top: 40px
    }
}

.parallaxHeroModule__socialIconsWrapper {
    display: flex;
    gap: 16px;
    grid-area: socials
}

@media(max-width:47.99em) {
    .parallaxHeroModule__socialIconsWrapper {
        justify-content: center
    }
}

.parallaxHeroModule__socialIcon {
    display: inline-block;
    height: 24px;
    width: 24px
}

.parallaxHeroModule__socialIcon--logo {
    display: inline-block;
    height: 38px;
    margin-right: 8px;
    width: 47px
}

@media(min-width:48em) {
    .parallaxHeroModule__socialIcon--logo {
        margin-right: 0
    }
}

.parallaxHeroModule__socialIcon--last {
    margin-right: 0
}

.parallaxHeroModule__headerLogoWrapper {
    width: 160px
}

@media(min-width:48em) {
    .parallaxHeroModule__headerLogoWrapper {
        width: 240px
    }
}

.parallaxHeroModule__headerLogoWrapper img {
    width: 100%
}

@media(max-width:47.99em) {
    .parallaxHeroModule__localeSelectorWrapper {
        justify-content: center
    }
}

.textModule {
    position: relative
}

.textModule__box {
    padding: 96px 0;
    text-align: center
}

.textModule__footNote {
    margin-top: 24px;
    opacity: .6
}

.textModule__backgroundColor,
.textModule__backgroundImage {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.textModule__backgroundColor {
    background: #fff;
    z-index: -2
}

.youtubeModule {
    padding: 96px 40px;
    position: relative;
    width: 100%
}

@media(min-width:48em) {
    .youtubeModule {
        padding: 112px 80px
    }
}

.youtubeGalleryModule {
    overflow: hidden;
    padding: 80px 20px;
    position: relative;
    z-index: 1
}

@media(min-width:48em) {
    .youtubeGalleryModule {
        padding: 100px 100px 180px
    }
}

.youtubeGalleryModule .block {
    padding: 0
}

.youtubeGalleryModule .block__main {
    gap: 40px
}

.youtubeGalleryModule .block__main,
.youtubeGalleryModule__text {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.youtubeGalleryModule__text {
    gap: 32px;
    max-width: 540px;
    padding: 0 20px;
    text-align: center
}

.youtubeGalleryModule__text--titles {
    --tagline-size: 65px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media(min-width:48em) {
    .youtubeGalleryModule__text--titles {
        --tagline-size: 80px
    }
}

.youtubeGalleryModule__title {
    text-wrap: nowrap;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: var(--tagline-size);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-3.75deg);
    word-break: keep-all
}

body.tr .youtubeGalleryModule__title {
    text-transform: none
}

body.cn .youtubeGalleryModule__title,
body.jp .youtubeGalleryModule__title,
body.kr .youtubeGalleryModule__title,
body.zh-cn .youtubeGalleryModule__title {
    letter-spacing: .02em;
    line-height: 110%
}

.youtubeGalleryModule__title--0 {
    font-size: calc(var(--tagline-size)*.65);
    line-height: 110%
}

.youtubeGalleryModule__title :last-child {
    margin-bottom: 20px
}

.youtubeGalleryModule__gallery {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center
}

.youtubeGalleryModule__card {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: hsla(0, 0%, 100%, .2);
    border-radius: 8px;
    box-shadow: 0 14.3px 23.4px 0 rgba(3, 0, 9, .25);
    flex-shrink: 0;
    height: -moz-fit-content;
    height: fit-content;
    outline: 2px solid rgba(0, 0, 0, .2);
    outline-offset: -2px;
    overflow: hidden;
    width: 100%
}

@media(min-width:48em) {
    .youtubeGalleryModule__card {
        width: calc(50% - 10px)
    }
}

@media(min-width:90em) {
    .youtubeGalleryModule__card {
        width: 500px
    }
}

.youtubeGalleryModule__card--video-player {
    box-shadow: 0 13.106px 28.397px 0 rgba(0, 0, 0, .35)
}

.youtubeGalleryModule__card--body {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: center;
    justify-content: space-between;
    padding: 16px
}

@media(min-width:64em) {
    .youtubeGalleryModule__card--body {
        gap: 60px;
        padding: 20px
    }
}

.youtubeGalleryModule__card--body--titles {
    align-self: flex-start;
    display: flex;
    flex-direction: column-reverse;
    gap: 4px
}

.youtubeGalleryModule__card--body--titles h4 {
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase
}

body.tr .youtubeGalleryModule__card--body--titles h4 {
    text-transform: none
}

@media(min-width:64em) {
    .youtubeGalleryModule__card--body--titles h4 {
        font-size: 24px
    }
}

.youtubeGalleryModule__card--body--titles h6 {
    color: var(--clr-white);
    color: var(--clr-white-60);
    font-family: Squad, sans-serif;
    font-size: 14px;
    font-weight: 900;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 100%;
    line-height: 120%
}

@media(min-width:64em) {
    .youtubeGalleryModule__card--body--titles h6 {
        font-size: 16px
    }
}

.youtubeGalleryModule__card--body--youtube {
    background: url(/img/youtube.36a60c8.png) no-repeat 50%;
    background-size: contain;
    flex-shrink: 0;
    height: 19px;
    transform: scale(1);
    transition: transform .2s cubic-bezier(.455, .03, .515, .955);
    width: 86px
}

@media(min-width:64em) {
    .youtubeGalleryModule__card--body--youtube {
        height: 25px;
        width: 112px
    }
}

.youtubeGalleryModule__card--body--youtube:hover {
    transform: scale(1.1)
}

.youtubeGalleryModule__card--body--youtube:active {
    transform: scale(.9)
}

.youtubeGalleryModule__bottomVault,
.youtubeGalleryModule__topVault {
    height: calc(50% + 52px);
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 100
}

.youtubeGalleryModule__bottomVault:before,
.youtubeGalleryModule__topVault:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1440' height='41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M471.337 31.438 1569 .017V47H-128V33.587l620.55-17.49-21.213 15.34Z' fill='%23000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1440px 41px;
    content: "";
    height: 52px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1
}

.youtubeGalleryModule__topVault {
    background: linear-gradient(180deg, #000 0, #000 calc(100% - 52px), transparent calc(100% - 50px), transparent);
    top: 0
}

.youtubeGalleryModule__topVault:before {
    background-position-x: 33%;
    background-position-y: bottom;
    bottom: 0;
    transform: rotate(180deg)
}

@media(min-width:1440px) {
    .youtubeGalleryModule__topVault:before {
        background-position-x: center;
        background-size: cover
    }
}

.youtubeGalleryModule__bottomVault {
    background: linear-gradient(0deg, #000 0, #000 calc(100% - 52px), transparent calc(100% - 50px), transparent);
    bottom: 0
}

.youtubeGalleryModule__bottomVault:before {
    background-position-x: 33%;
    background-position-y: bottom;
    top: 0
}

@media(min-width:1440px) {
    .youtubeGalleryModule__bottomVault:before {
        background-position-x: center;
        background-size: cover
    }
}

.youtubeGalleryModule__backgroundColor {
    background: linear-gradient(0deg, #06f, #003d99);
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    z-index: -3
}

.youtubeGalleryModule__backgroundFade {
    background: linear-gradient(180deg, #041ea8, rgba(28, 84, 228, 0) 25%);
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1
}

.youtubeGalleryModule__backgroundFade:after {
    background: linear-gradient(0deg, #051fa8 12%, rgba(28, 84, 228, 0));
    bottom: 0;
    content: "";
    height: 30%;
    left: 0;
    position: absolute;
    width: 100%
}

.youtubeVideo {
    background: #000;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%
}

.youtubeVideo__videoInner {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.youtubeVideo__videoInner--ready {
    opacity: 1
}

.youtubeVideo__cover {
    cursor: pointer;
    display: flex;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.youtubeVideo__cover--image {
    z-index: -1;
    z-index: 0
}

.youtubeVideo__cover--fade,
.youtubeVideo__cover--image {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%
}

.youtubeVideo__cover--fade {
    background: #000;
    opacity: .3;
    transition: opacity .2s cubic-bezier(.455, .03, .515, .955);
    z-index: -1;
    z-index: 1
}

.youtubeVideo__cover:hover .youtubeVideo__cover--fade {
    opacity: 0
}

.youtubeVideo__play {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxMSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMS41NDM4NEMwIDAuODc2NjYyIDAuNzM3ODE0IDAuNDczNDYzIDEuMjk5MzIgMC44MzM3OUwxMC42Mjg3IDYuODIwNTZDMTAuODYwMSA2Ljk2OTA0IDExIDcuMjI1MDcgMTEgNy41QzExIDcuNzc0OTMgMTAuODYwMSA4LjAzMDk2IDEwLjYyODcgOC4xNzk0NEwxLjI5OTMyIDE0LjE2NjJDMC43Mzc4MTUgMTQuNTI2NSAwIDE0LjEyMzMgMCAxMy40NTYyVjEuNTQzODRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K) no-repeat 53%;
    border-radius: 50%;
    height: 72px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .4s;
    width: 72px;
    z-index: 2
}

.youtubeVideo__cover:hover .youtubeVideo__play {
    transform: translate(-50%, -50%) scale(1.1)
}

.validationModal {
    display: none
}

.validationModal--isOpen {
    display: block
}

.validationModal__closeArea {
    align-items: center;
    background: rgba(0, 0, 0, .639);
    display: flex;
    height: 0;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 0;
    z-index: 1200
}

.validationModal__closeArea--isOpen {
    height: 100vh;
    height: var(--available-height, 100vh);
    width: 100vw
}

.validationModal__closeButton {
    align-items: center;
    border: 1px solid #f9f9f9;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    display: flex;
    height: 44px;
    justify-content: center;
    margin: 0 auto;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 44px
}

@media(min-width:48em) {
    .validationModal__closeButton {
        height: 40px;
        width: 40px
    }
}

.validationModal__main {
    background: #fff;
    border-radius: 16px;
    display: block;
    height: 0;
    max-height: calc(100vh - 64px);
    max-height: calc(var(--available-height, 100vh) - 64px);
    max-width: calc(100vw - 64px);
    opacity: 0;
    overflow: auto;
    padding: 32px;
    position: relative;
    text-align: center;
    width: 0;
    z-index: 1201
}

@media(min-width:48em) {
    .validationModal__main {
        aspect-ratio: 16/9;
        max-width: 1600px;
        padding: 64px 32px
    }
}

.validationModal__main--isOpen {
    height: 100%;
    opacity: 1;
    width: 100%
}

@media(min-width:48em) {
    .validationModal__main--isOpen {
        aspect-ratio: 4/5;
        height: 50%;
        width: auto
    }
}

.validationModal__main .validationModal__background {
    bottom: 0;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1
}

.validationModal__image {
    max-width: 50%
}

@media(min-width:48em) {
    .validationModal__image {
        max-width: none
    }
}

.validationModal__subTitle {
    margin-top: 32px
}

.validationModal__youtube {
    margin: 64px auto 32px;
    width: 100%
}

.validationModal__twitter--text {
    margin-top: 32px
}

@media(min-width:48em) {
    .validationModal__twitter--text {
        margin-top: 64px
    }
}

.qrModal {
    align-items: center;
    background: rgba(0, 0, 0, .7);
    bottom: 0;
    display: flex;
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: all;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 100000
}

.qrModal--isOpen {
    display: flex
}

.qrModal__main {
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: hsla(0, 0%, 100%, .5);
    border: 3px solid hsla(0, 0%, 100%, .5);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    min-width: 260px;
    padding: 40px 12px;
    pointer-events: all;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 10
}

.qrModal__qrCode {
    border-radius: 6px;
    height: 200px;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 200px
}

.qrModal__label {
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 80%;
    pointer-events: none;
    text-transform: uppercase
}

body.tr .qrModal__label {
    text-transform: none
}

.qrModal__close {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 16px;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 16px;
    transition: transform .2s;
    width: 16px
}

.qrModal__close:hover {
    transform: scale(1.1)
}

.qrModal__close:active {
    transform: scale(.9)
}

.qrModal__close:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='17' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.305 3.275 14.409 14.38M14.414 3.275 3.31 14.38' stroke='%23fff' stroke-opacity='.6' stroke-width='2'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10
}

.loader {
    display: flex
}

.loader__svg {
    animation: loaderSpinAnimation 1.25s cubic-bezier(.445, .05, .55, .95) infinite;
    height: auto;
    max-height: 36px;
    max-width: 36px;
    width: 100%
}

.loader--small .loader__svg {
    max-height: 24px;
    max-width: 24px
}

.loader--skinny .loader__svg {
    animation: loaderSpinOpacityAnimation 1.25s cubic-bezier(.445, .05, .55, .95) infinite;
    max-height: 30px;
    max-width: 30px
}

.loader--skinny .loader__svg circle {
    stroke-width: 2
}

.loader__circle {
    stroke-dasharray: 87.3977661133;
    stroke-dashoffset: 87.3977661133;
    animation: loaderShapeAnimation 1.25s cubic-bezier(.445, .05, .55, .95) infinite
}

@keyframes loaderSpinOpacityAnimation {
    0% {
        opacity: .1;
        transform: scaleX(-1) rotate(270deg)
    }

    to {
        opacity: 1;
        transform: scaleX(-1) rotate(-90deg)
    }
}

@keyframes loaderSpinAnimation {
    0% {
        transform: scaleX(-1) rotate(270deg)
    }

    to {
        transform: scaleX(-1) rotate(-90deg)
    }
}

@keyframes loaderShapeAnimation {
    0% {
        stroke-dashoffset: 87.3977661133
    }

    to {
        stroke-dashoffset: 262.1932983398
    }
}

.recaptcha {
    align-items: center;
    background: #f9f9f9;
    display: flex;
    justify-content: center;
    max-width: 400px;
    padding: 16px
}

.recaptcha__text {
    font-size: 12px;
    text-align: left
}

.recaptcha__logo {
    aspect-ratio: 1;
    height: 45px
}

.mediaModule {
    padding: 96px 0 0;
    position: relative;
    width: 100%
}

@media(min-width:48em) {
    .mediaModule {
        padding-bottom: 0
    }
}

.mediaModule__imageWrapper {
    text-align: left
}

@media(min-width:48em) {
    .mediaModule__imageWrapper {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 40px;
        justify-content: center
    }

    .mediaModule__imageWrapper--left {
        flex-direction: row
    }

    .mediaModule__imageWrapper--right {
        flex-direction: row-reverse
    }
}

.mediaModule__text {
    padding-top: 40px
}

@media(min-width:48em) {
    .mediaModule__text {
        align-items: center;
        justify-content: center;
        padding: 0;
        width: 50%
    }

    .mediaModule__text--cover {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        position: absolute;
        top: 0;
        z-index: 1
    }

    .mediaModule__text--textright {
        left: 50%
    }

    .mediaModule__text--textleft {
        left: 0
    }
}

.mediaModule__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

@media(min-width:48em) {
    .mediaModule__image {
        aspect-ratio: unset;
        height: 100%;
        z-index: 0
    }

    .mediaModule__image--left,
    .mediaModule__image--right {
        width: 50%
    }
}

.mediaModule--isLast {
    margin-bottom: 96px
}

@media(min-width:48em) {
    .mediaModule--isLast {
        margin-bottom: 96px
    }
}

.imagesModule {
    position: relative
}

.imagesModule__images,
.imagesModule__titleContainer {
    align-items: center;
    display: flex;
    justify-content: center
}

.imagesModule__images {
    flex-direction: column
}

@media(min-width:64em) {
    .imagesModule__images {
        flex-direction: row
    }
}

.imagesModule__image__titleContainer {
    align-items: center;
    display: flex;
    justify-content: center
}

.localeSelect {
    margin: auto;
    width: -moz-fit-content;
    width: fit-content
}

.localeSelect--footer ::v-deep select {
    font-size: 13px;
    font-weight: 500
}

@media(min-width:64em) {
    .localeSelect--footer {
        margin-left: -21px
    }
}

.localeSelect ::v-deep select {
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(71, 69, 156, .1)
}

.footerModule {
    background: #000;
    font-size: 0;
    height: 485px
}

@media(min-width:48em) {
    .footerModule {
        height: 495px
    }
}

.footerModule__main {
    padding-top: 22px
}

@media(min-width:48em) {
    .footerModule__main {
        display: flex;
        flex-direction: column;
        height: 495px;
        padding-top: 36px
    }
}

.footerModule__top {
    padding-bottom: 0
}

@media(min-width:48em) {
    .footerModule__top {
        padding-bottom: 33px
    }

    .footerModule__topLeft,
    .footerModule__topRight {
        display: inline-block;
        font-size: 0;
        width: 50%
    }
}

.footerModule__topRight {
    margin-top: 4px
}

@media(min-width:48em) {
    .footerModule__topRight {
        text-align: right;
        vertical-align: top
    }
}

.footerModule__linksWrapper {
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0
}

@media(min-width:48em) {
    .footerModule__linksWrapper {
        margin-bottom: 34px;
        margin-top: 34px
    }
}

.footerModule__appButton {
    display: inline-block;
    font-size: 0
}

.footerModule__appButton--apple {
    margin-right: 10px;
    width: 125px
}

@media(min-width:48em) {
    .footerModule__appButton--apple {
        margin-right: 16px;
        width: 147px
    }
}

.footerModule__appButton--google {
    width: 141px
}

@media(min-width:48em) {
    .footerModule__appButton--google {
        width: 166px
    }
}

.footerModule__appButtonImage {
    width: 100%
}

.footerModule__link {
    margin-bottom: 9px;
    margin-right: 20px;
    margin-top: 9px
}

@media(min-width:48em) {
    .footerModule__link {
        display: inline-block;
        margin-bottom: 0;
        margin-top: 0
    }
}

.footerModule__divider {
    background-color: #333;
    height: 1px;
    margin-bottom: 22px;
    margin-top: 22px
}

@media(min-width:48em) {
    .footerModule__divider--first {
        display: none
    }

    .footerModule__divider {
        margin-bottom: 0;
        margin-top: 0
    }
}

.footerModule__legal {
    align-items: center;
    display: flex;
    justify-content: space-between
}

@media(min-width:48em) {
    .footerModule__legal {
        display: none
    }
}

.footerModule__appTitle,
.footerModule__socialTitle {
    color: #fff;
    font-family: "Supercell Text", sans-serif;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 11px
}

@media(min-width:48em) {

    .footerModule__appTitle,
    .footerModule__socialTitle {
        font-size: 13px;
        margin-bottom: 18px
    }

    .footerModule__appTitle {
        display: none
    }
}

.footerModule__socialIconsWrapper {
    display: flex;
    gap: 16px;
    grid-area: socials
}

.footerModule__socialIcon {
    display: inline-block;
    height: 24px;
    width: 24px
}

.footerModule__socialIcon--logo {
    display: inline-block;
    height: 38px;
    margin-right: 8px;
    width: 47px
}

@media(min-width:48em) {
    .footerModule__socialIcon--logo {
        margin-right: 0
    }
}

.footerModule__socialIcon--last {
    margin-right: 0
}

.footerModule__end {
    display: flex;
    justify-content: space-between;
    margin-top: 25px
}

.footerModule__supercellLogoWrapper {
    align-self: flex-end
}

.footerModule__supercellLogo {
    margin-bottom: 5px;
    width: 60px
}

.footerModule__address {
    color: #666;
    font-family: "Supercell Text", sans-serif;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 2px
}

@media(min-width:48em) {
    .footerModule__address {
        font-size: 13px
    }
}

.dividerModule {
    display: flex;
    height: auto;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 10
}

.dividerModule--isBottom {
    transform: translateY(calc(-100% + 1px))
}

.dividerModule--isTop {
    transform: rotate(180deg) translateY(1px)
}

.dividerModule--scale .dividerModule__image {
    width: 100%
}

.defaultFooter {
    background: #000;
    font-size: 0;
    position: relative
}

@media(min-width:64em) {
    .defaultFooter__main {
        display: flex;
        flex-direction: column
    }
}

.defaultFooter__innerSection {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 35px 0
}

@media(min-width:64em) {
    .defaultFooter__innerSection {
        flex-direction: row;
        padding: 40px 0
    }

    .defaultFooter__innerSection--withAppDisclaimer {
        align-items: flex-start
    }
}

.defaultFooter__left {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 8px
}

@media(min-width:64em) {
    .defaultFooter__left {
        flex-direction: row
    }
}

.defaultFooter__linksWrapper {
    padding: 0;
    text-align: center
}

@media(min-width:64em) {
    .defaultFooter__linksWrapper {
        margin-bottom: 0;
        text-align: left
    }

    .defaultFooter__linksWrapper--lower {
        padding-left: 12px
    }
}

.defaultFooter__link {
    display: inline-flex;
    margin: 0 12px;
    text-align: center;
    transition: opacity .25s
}

.defaultFooter__link--dimmed,
.defaultFooter__link--sub {
    opacity: .5
}

.defaultFooter__link--sub.defaultFooter__link--dimmed {
    opacity: .25
}

.defaultFooter__link:hover {
    opacity: 1
}

.defaultFooter__link--sub:hover {
    opacity: .5
}

.defaultFooter__appButtonsWrapperWithDisclaimer {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 12px
}

@media(min-width:22.5em) {
    .defaultFooter__appButtonsWrapperWithDisclaimer {
        flex-direction: row;
        row-gap: normal
    }
}

.defaultFooter__appButtonsWrapper {
    margin-top: 35px
}

@media(min-width:64em) {
    .defaultFooter__appButtonsWrapper {
        margin-top: 0
    }
}

.defaultFooter__appDisclaimerImage {
    height: 40px;
    width: auto
}

@media(min-width:48em) {
    .defaultFooter__appDisclaimerImage {
        height: 50px
    }
}

.defaultFooter__appDisclaimer {
    display: inline-flex;
    font-size: 12px;
    white-space: pre-line
}

.defaultFooter__divider {
    background-color: #333;
    height: 1px
}

.defaultFooter__socialIconsWrapper {
    display: flex;
    gap: 16px;
    grid-area: socials;
    justify-content: center;
    margin-top: 35px
}

@media(min-width:64em) {
    .defaultFooter__socialIconsWrapper {
        margin-top: 0
    }
}

.defaultFooter__socialIcon {
    display: inline-block;
    height: 24px;
    margin: 0 10px;
    opacity: .25;
    transition: opacity .25s;
    width: 24px
}

.defaultFooter__socialIcon--logo {
    display: inline-block;
    height: 38px;
    margin-right: 8px;
    width: 47px
}

@media(min-width:48em) {
    .defaultFooter__socialIcon--logo {
        margin-right: 0
    }
}

.defaultFooter__socialIcon--last {
    margin-right: 0
}

.defaultFooter__socialIcon--dimmed {
    opacity: .15
}

.defaultFooter__socialIcon:hover {
    opacity: .5
}

.block {
    padding: 0 16px
}

@media(min-width:30em) {
    .block {
        padding: 0 16px
    }
}

@media(min-width:48em) {
    .block {
        padding: 0 48px
    }
}

@media(min-width:64em) {
    .block {
        padding: 0 136px
    }
}

@media(min-width:90em) {
    .block {
        padding: 0 136px
    }
}

.block--fullBleed {
    padding-left: 0;
    padding-right: 0;
    width: 100%
}

.block--flexCenter {
    align-items: center;
    display: flex;
    justify-content: center
}

.block--whiteMobile {
    background-color: #fff;
    padding: 32px 16px 0
}

@media(min-width:48em) {
    .block--whiteMobile {
        background-color: #fff
    }
}

.block--fullBleed.block--darkTheme {
    background: gradient(ash)
}

.block--hiddenOverflow {
    overflow: hidden
}

.block--customMargin {
    margin-top: var(--customMargin)
}

.block--smallMarginTop {
    margin-top: 32px
}

@media(min-width:64em) {
    .block--smallMarginTop {
        margin-top: 32px
    }
}

.block--smallMarginBottom {
    margin-bottom: 32px
}

@media(min-width:64em) {
    .block--smallMarginBottom {
        margin-bottom: 32px
    }
}

.block--mediumMarginTop {
    margin-top: 40px
}

@media(min-width:64em) {
    .block--mediumMarginTop {
        margin-top: 80px
    }
}

.block--mediumMarginBottom {
    margin-bottom: 40px
}

@media(min-width:64em) {
    .block--mediumMarginBottom {
        margin-bottom: 80px
    }
}

.block--largeMarginTop {
    margin-top: 48px
}

@media(min-width:64em) {
    .block--largeMarginTop {
        margin-top: 88px
    }
}

.block--largeMarginBottom {
    margin-bottom: 48px
}

@media(min-width:48em) {
    .block--largeMarginBottom {
        margin-bottom: 96px
    }
}

@media(min-width:64em) {
    .block--largeMarginBottom {
        margin-bottom: 120px
    }
}

.block--xlargeMarginTop {
    margin-top: 80px
}

@media(min-width:64em) {
    .block--xlargeMarginTop {
        margin-top: 160px
    }
}

.block--xlargeMarginBottom {
    margin-bottom: 80px
}

@media(min-width:64em) {
    .block--xlargeMarginBottom {
        margin-bottom: 160px
    }
}

.block__main {
    margin: 0 auto;
    position: relative
}

.block--fullBleed.block--flexCenter .block__main {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: initial;
    width: 100%
}

.block:not(.block--fullBleed):not(.block--maxWidthMedium) .block__main {
    max-width: var(--maxWidth)
}

@media(min-width:48em) {
    .block--boxOutline .block__main {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(71, 69, 156, .1);
        padding: 24px 24px 40px;
        width: 100%
    }
}

@media(min-width:90em) {
    .block--boxOutline .block__main {
        left: auto;
        transform: none;
        width: 100%
    }
}

.block--maxWidthMedium .block__main {
    max-width: 864px
}

.block--boxOutline.block--darkTheme .block__main {
    background: gradient(ash)
}

.socialsModule {
    position: relative
}

.socialsModule__decoration {
    display: none
}

@media(min-width:48em) {
    .socialsModule__decoration {
        bottom: -100px;
        display: block;
        pointer-events: none;
        position: absolute;
        right: -100px
    }
}

.socialsModule__decoration ::v-deep img {
    width: 300px
}

.socialsModule__outer-decoration-container {
    height: 100%;
    left: 50%;
    max-width: 1600px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2
}

.socialsModule__outer-decoration {
    display: none;
    left: 0;
    position: absolute;
    top: 0
}

@media(min-width:64em) {
    .socialsModule__outer-decoration {
        display: block
    }
}

.socialsModule__backgroundColor,
.socialsModule__backgroundImage,
.socialsModule__backgroundImageWrapper {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.socialsModule__backgroundColor {
    background: #fff;
    z-index: -2
}

.error-page {
    position: relative
}

.error-page__backgroundColor,
.error-page__backgroundImage {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.error-page__backgroundColor {
    background: #fff;
    z-index: -2
}

.formModule {
    position: relative
}

.formModule__main {
    margin: auto;
    padding: 40px 16px;
    text-align: center
}

@media(min-width:48em) {
    .formModule__main {
        padding: 96px 16px
    }
}

.formModule__textWrapper {
    padding: 0 0 24px
}

@media(min-width:48em) {
    .formModule__textWrapper {
        padding: 0 0 40px
    }
}

.formModule__deviceWrapper {
    max-width: 600px;
    width: 100%
}

.formModule__deviceLabel {
    margin-bottom: 8px
}

@media(min-width:48em) {
    .formModule__deviceLabel {
        margin-bottom: 16px
    }
}

.formModule__description--availableGame {
    margin-top: 24px
}

@media(min-width:48em) {
    .formModule__description--availableGame {
        margin-top: 40px
    }
}

.formModule__locationWrapper {
    align-items: center;
    -moz-column-gap: 8px;
    column-gap: 8px;
    display: flex;
    justify-content: center;
    margin: auto;
    position: relative;
    width: -moz-fit-content;
    width: fit-content
}

.formModule__locationSelectWrapper {
    position: absolute
}

.formModule__locationSelectWrapper ::v-deep select {
    opacity: 0
}

.formModule__country {
    color: #1d8bff
}

.formModule__inputWrapper {
    flex-direction: column;
    row-gap: 24px
}

.formModule__error,
.formModule__inputWrapper,
.formModule__submitWrapper {
    align-items: center;
    display: flex;
    justify-content: center
}

.formModule__error {
    color: #f44545
}

.formModule__twitterWrapper {
    grid-row-gap: 24px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.formModule__twitterText {
    font-size: 24px
}

.formModule__twitterText--only {
    font-size: 36px
}

.formModule__title {
    margin-bottom: 8px
}

@media(min-width:48em) {
    .formModule__title {
        margin-bottom: 16px
    }
}

.formModule__orWrapper {
    align-items: center;
    -moz-column-gap: 8px;
    column-gap: 8px;
    display: flex
}

.formModule__orLine {
    background: #7c7b7b;
    height: 1px;
    width: 64px
}

.formModule__orLabel {
    color: #7c7b7b;
    margin: 0
}

.formModule__preregButton {
    font-size: 0
}

.formModule__preregButton--apple {
    margin-right: 10px
}

.formModule__preregButtonImage {
    height: 74px
}

.formModule__decoration {
    display: none
}

@media(min-width:48em) {
    .formModule__decoration {
        bottom: -100px;
        display: block;
        pointer-events: none;
        position: absolute;
        right: -100px
    }
}

.formModule__decoration ::v-deep img {
    width: 300px
}

.formModule__outer-decoration-container {
    height: 100%;
    left: 50%;
    max-width: 1600px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2
}

.formModule__outer-decoration {
    display: none;
    left: 0;
    position: absolute;
    top: 0
}

@media(min-width:64em) {
    .formModule__outer-decoration {
        display: block
    }
}

.formModule__backgroundColor,
.formModule__backgroundImage,
.formModule__backgroundImageWrapper {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.formModule__backgroundColor {
    background: #fff;
    z-index: -2
}

.defaultCheckbox {
    align-items: center;
    display: flex;
    justify-content: center
}

.defaultCheckbox__check {
    cursor: pointer;
    height: 22px;
    margin-right: 8px;
    width: 22px
}

.defaultCheckbox__label {
    color: #000;
    cursor: pointer;
    font-size: 14px
}

@media(min-width:48em) {
    .defaultCheckbox__label {
        font-size: 16px
    }
}

.defaultCheckbox__label a {
    color: #000;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.defaultInput {
    max-width: 600px;
    width: 100%
}

.defaultInput--withPreIcon input {
    padding-left: 56px
}

.defaultInput__wrapper {
    position: relative
}

.defaultInput__input {
    border: 1px solid #000;
    border-radius: 8px;
    cursor: text;
    height: 48px;
    padding: 0 16px;
    width: 100%
}

@media(min-width:48em) {
    .defaultInput__input {
        padding: 0 24px
    }
}

.defaultInput__input--error {
    border-color: #f44545;
    color: #f44545
}

.defaultInput__input--success {
    border-color: green;
    color: green
}

.defaultInput__preIcon,
.defaultInput__preSelect,
.defaultInput__statusIcon {
    align-items: center;
    display: flex;
    height: 100%;
    left: 24px;
    opacity: 1;
    position: absolute;
    top: 0
}

.defaultInput__preSelect {
    width: auto
}

.defaultInput__statusIcon {
    left: auto;
    right: 24px
}

.defaultInput__errorLabel {
    color: #f44545;
    margin: 8px 0
}

.defaultSelect {
    cursor: pointer;
    display: flex;
    position: relative
}

.defaultSelect__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    height: 32px;
    max-width: 100%;
    padding: 0 32px;
    width: 100%
}

@media(min-width:48em) {
    .defaultSelect__select {
        pointer-events: none
    }
}

.defaultSelect__select--white {
    background: 0 0;
    color: #fff
}

.defaultSelect__select--globe {
    padding-left: 32px
}

.defaultSelect__select p.defaultSelect__value {
    text-align: left
}

.defaultSelect__chevron {
    right: 10px;
    top: 10px
}

.defaultSelect__chevron,
.defaultSelect__globe {
    cursor: pointer;
    pointer-events: none;
    position: absolute;
    z-index: 10
}

.defaultSelect__globe {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    top: 0;
    width: 36px
}

.defaultSelect__globe img {
    height: 16px;
    width: 16px
}

.deviceSelect {
    cursor: pointer;
    display: flex;
    position: relative
}

.deviceSelect__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    height: 32px;
    max-width: 100%;
    padding: 0 32px 0 16px;
    width: 100%
}

@media(min-width:48em) {
    .deviceSelect__select {
        pointer-events: none
    }
}

.deviceSelect__select--white {
    background: 0 0;
    color: #fff
}

.deviceSelect__select--globe {
    padding-left: 32px
}

.deviceSelect__chevron {
    right: 10px;
    top: 10px
}

.deviceSelect__chevron,
.deviceSelect__globe {
    cursor: pointer;
    pointer-events: none;
    position: absolute;
    z-index: 10
}

.deviceSelect__globe {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    top: 0;
    width: 36px
}

.deviceSelect__globe img {
    height: 16px;
    width: 16px
}

.deviceSelect__desktopOptions {
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(71, 69, 156, .1);
    left: 0;
    max-height: 269px;
    overflow-y: auto;
    position: absolute;
    top: 40px;
    width: 160px;
    z-index: 400
}

.deviceSelect--alignedRight .deviceSelect__desktopOptions {
    left: auto;
    right: 0
}

.deviceSelect--alignedBottom .deviceSelect__desktopOptions {
    bottom: 40px;
    top: auto
}

.deviceSelect__desktopOption {
    align-items: center;
    border-bottom: 1px solid #f9f9f9;
    color: gray;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 16px;
    text-align: left;
    transition: color .2s;
    width: 100%
}

.deviceSelect__desktopOption:last-child {
    border-bottom: 0
}

.deviceSelect__desktopOption--active,
.deviceSelect__desktopOption:hover:not(.deviceSelect__desktopOption--active) {
    color: #1c1c1c
}

.deviceSelect__desktopLabel {
    color: inherit;
    pointer-events: none
}

.customSelectOptions {
    --option-height: 68px;
    background: #fff;
    border-radius: 8px;
    bottom: -4px;
    box-shadow: 0 34px 34px 0 rgba(0, 0, 0, .25);
    height: 0;
    max-width: 200px;
    opacity: 1;
    padding: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 50vw;
    z-index: 1000
}

.customSelectOptions,
.customSelectOptions--scrollable {
    overflow-y: scroll;
    overscroll-behavior-y: contain
}

.customSelectOptions--top {
    bottom: 40px
}

.customSelectOptions__optionsWrapper {
    align-items: flex-start;
    display: flex;
    flex-direction: column
}

.customSelectOptions__option {
    align-items: center;
    border-bottom: 1px solid;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 68px;
    justify-content: center;
    justify-content: space-between;
    padding: 0 32px;
    width: 100%
}

.customSelectOptions__option:last-child {
    border-bottom: 0
}

.customSelectOptions__optionLabel {
    color: #000;
    cursor: pointer;
    opacity: .6;
    text-align: left;
    transition: opacity .2s cubic-bezier(.455, .03, .515, .955)
}

.customSelectOptions__option--active .customSelectOptions__optionLabel,
.customSelectOptions__option:hover .customSelectOptions__optionLabel {
    opacity: 1
}

.customSelectOptions__backdrop {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1
}

.baseButton {
    display: inline-block;
    position: relative
}

.baseButton--freeWidth {
    width: 100%
}

.baseButton--fixedWidth {
    width: 160px
}

.baseButton__routerLink {
    display: inline-block;
    position: relative;
    text-align: center
}

.baseButton__link,
.baseButton__routerLink {
    -webkit-text-decoration: none;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

.baseButton__link {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0
}

.defaultButton {
    -moz-appearance: button;
    appearance: button;
    -webkit-appearance: button;
    background: 0 0;
    border: 0;
    display: inline-block;
    font-size: 0;
    height: 48px;
    overflow: visible;
    position: relative;
    text-transform: none
}

.defaultButton:not(.defaultButton--disabled) {
    cursor: pointer
}

.defaultButton--lg {
    height: 55px
}

.defaultButton--loading {
    pointer-events: none
}

.defaultButton__main {
    border-radius: 36px;
    height: 100%;
    min-width: var(--minWidth);
    position: relative;
    transition: transform .2s cubic-bezier(.455, .03, .515, .955), box-shadow .2s cubic-bezier(.455, .03, .515, .955)
}

.defaultButton__bg {
    background: #f3f3f3;
    border-radius: 36px;
    height: 100%;
    position: absolute;
    text-align: center;
    transition: background-color .2s;
    width: 100%;
    z-index: 0
}

.defaultButton--reddit .defaultButton__bg {
    background: #ff4500
}

.defaultButton--inverted .defaultButton__bg {
    background: #fff
}

.defaultButton--warning .defaultButton__bg {
    background: #1c1c1c
}

.defaultButton--secondary .defaultButton__bg {
    background: #fff
}

.defaultButton--secondary.defaultButton--emphasis .defaultButton__bg {
    border-color: #ddd
}

.defaultButton--tertiary .defaultButton__bg {
    background: #fff;
    border: 4px solid #f9f9f9
}

.defaultButton--slush .defaultButton__bg {
    background: gradient(slush)
}

.defaultButton--twitter .defaultButton__bg {
    background: #5da8dc
}

.defaultButton--tertiary.defaultButton--transparent .defaultButton__bg {
    background: 0 0;
    border: 2px solid #fff
}

.defaultButton--disabled .defaultButton__bg,
.defaultButton--loading .defaultButton__bg {
    background: #f3f3f3
}

.defaultButton--secondary.defaultButton--bordered .defaultButton__bg {
    background: #fff;
    border: 2px solid #ddd
}

.defaultButton__link {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0 24px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

.defaultButton--lg .defaultButton__link {
    padding: 0 30px
}

.defaultButton__label {
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 48px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    vertical-align: top;
    white-space: nowrap
}

@media(min-width:48em) {
    .defaultButton__label {
        font-size: 16px
    }
}

.defaultButton--lg .defaultButton__label {
    font-size: 16px;
    line-height: 55px
}

.defaultButton--noUppercase .defaultButton__label {
    font-weight: 500;
    text-transform: none
}

.defaultButton--secondary .defaultButton__label {
    color: #1c1c1c
}

.defaultButton--tertiary .defaultButton__label {
    color: #ddd
}

.defaultButton--tertiary.defaultButton--transparent .defaultButton__label {
    color: #fff
}

.defaultButton--loading .defaultButton__label {
    visibility: hidden
}

.defaultButton--labelDivine .defaultButton__label,
.defaultButton--secondary.defaultButton--bordered .defaultButton__label {
    color: gray
}

.defaultButton__loader {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.defaultButton__preIcon {
    align-items: center;
    display: flex;
    height: 100%;
    left: 24px;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 32px
}

.socialButton {
    border: 2px solid #f9f9f9;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    transition: transform .2s cubic-bezier(.455, .03, .515, .955), box-shadow .2s cubic-bezier(.455, .03, .515, .955);
    width: 100%
}

.socialButton--over {
    transform: translateY(-2px)
}

.socialButton--darkOutline {
    border-color: #ddd
}

.socialButton--inverted {
    background: 0 0;
    border: 0;
    border-radius: 0
}

.socialButton--borderless {
    border: 0
}

.socialButton--hasLabel {
    background: #f9f9f9;
    border: none;
    border-radius: var(--btn-height);
    height: var(--btn-height);
    width: auto
}

.socialButton--creation {
    background-color: #f9f9f9
}

@media(min-width:48em) {
    .socialButton--standalone {
        box-shadow: 0 4px 16px rgba(71, 69, 156, .1)
    }
}

.socialButton__link {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
    color: yellow;
    font-size: 24px;
}

.socialButton__label {
    color: gray;
    font-family: "Supercell Text", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 140%;
    margin: 0 16px 0 4px
}

.socialButton__icon {
    height: 100%;
    width: 100%
}

.socialButton--hasLabel .socialButton__icon {
    border: 5px solid #f9f9f9;
    border-radius: 50%;
    height: var(--btn-height);
    width: var(--btn-height)
}

.socialButton--clipboard .socialButton__icon,
.socialButton--link .socialButton__icon {
    background: #fff url(/img/icon-social-link-black.c0b8721.svg) 50% no-repeat;
    background-size: 22px 22px
}

.socialButton--clipboard.socialButton--inverted .socialButton__icon,
.socialButton--link.socialButton--inverted .socialButton__icon {
    background: url(/img/icon-social-link-white.f6159fb.svg) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--clipboard.socialButton--hasLabel .socialButton__icon,
.socialButton--link.socialButton--hasLabel .socialButton__icon {
    background: gray url(/img/icon-social-link-white.f6159fb.svg) 50% no-repeat;
    background-size: 50%
}

.socialButton--x .socialButton__icon {
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M17.76 14.31 25.77 5h-1.898l-6.955 8.084L11.362 5H4.955l8.4 12.225-8.4 9.764h1.898l7.345-8.538 5.866 8.538h6.407L17.759 14.31h.001Zm-2.6 3.023-.85-1.218L7.536 6.43h2.916l5.465 7.817.85 1.217 7.105 10.162h-2.916l-5.797-8.292Z' fill='%23AAE7ED'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(4.955 5)' d='M0 0h21.516v22H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") 50% no-repeat;
    background-size: 22px 22px
}

.socialButton--x.socialButton--inverted .socialButton__icon {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M17.76 14.31 25.77 5h-1.898l-6.955 8.084L11.362 5H4.955l8.4 12.225-8.4 9.764h1.898l7.345-8.538 5.866 8.538h6.407L17.759 14.31h.001Zm-2.6 3.023-.85-1.218L7.536 6.43h2.916l5.465 7.817.85 1.217 7.105 10.162h-2.916l-5.797-8.292Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(4.955 5)' d='M0 0h21.516v22H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--x.socialButton--hasLabel .socialButton__icon {
    background: #5da8dc url(/img/icon-form-tw-white.8b717ec.svg) 50% no-repeat;
    background-size: 50%
}

.socialButton--twitter .socialButton__icon {
    background: #fff url(/img/icon-social-twitter-black.dfc5604.svg) 50% no-repeat;
    background-size: 22px 22px
}

.socialButton--twitter.socialButton--inverted .socialButton__icon {
    background: url(/img/icon-social-twitter-white.7c06d78.svg) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--twitter.socialButton--hasLabel .socialButton__icon {
    background: #5da8dc url(/img/icon-form-tw-white.8b717ec.svg) 50% no-repeat;
    background-size: 50%
}

.socialButton--facebook .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDIxLjczMDZDMjMgMjIuNDMxNiAyMi40MzE3IDIzIDIxLjczMDcgMjNMMTUuNDkxIDIyLjk5OTlWMTMuODc3MUgxOC40MzkzTDE4Ljg4MDcgMTAuMzIxN0gxNS40OTA5VjguMDUxN0MxNS40OTA5IDcuMDIyMzMgMTUuNzY2MSA2LjMyMDg3IDE3LjE4NzQgNi4zMjA4N0wxOSA2LjMxOTk5VjMuMTQwMDhDMTguNjg2NSAzLjA5NjgzIDE3LjYxMDQgMyAxNi4zNTg3IDNDMTMuNzQ1MSAzIDExLjk1NTkgNC42NTY4NiAxMS45NTU5IDcuNjk5NjlWMTAuMzIxN0g5VjEzLjg3NzFIMTEuOTU1OVYyMi45OTk5TDEuMjY5MzkgMjIuOTk5OUMwLjU2ODE2NCAyMi45OTk5IDAgMjIuNDMxNiAwIDIxLjczMDVWMS4yNjkzOEMwIDAuNTY4MjQ2IDAuNTY4MTY0IDAgMS4yNjkzOSAwSDIxLjczMDdDMjIuNDMxNiAwIDIzIDAuNTY4MTYgMjMgMS4yNjkzOFYyMS43MzA2WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==) 50% no-repeat;
    background-size: 22px 22px
}

.socialButton--facebook.socialButton--inverted .socialButton__icon {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDIxLjczMDZDMjMgMjIuNDMxNiAyMi40MzE3IDIzIDIxLjczMDcgMjNMMTUuNDkxIDIyLjk5OTlWMTMuODc3MUgxOC40MzkzTDE4Ljg4MDcgMTAuMzIxN0gxNS40OTA5VjguMDUxN0MxNS40OTA5IDcuMDIyMzMgMTUuNzY2MSA2LjMyMDg3IDE3LjE4NzQgNi4zMjA4N0wxOSA2LjMxOTk5VjMuMTQwMDhDMTguNjg2NSAzLjA5NjgzIDE3LjYxMDQgMyAxNi4zNTg3IDNDMTMuNzQ1MSAzIDExLjk1NTkgNC42NTY4NiAxMS45NTU5IDcuNjk5NjlWMTAuMzIxN0g5VjEzLjg3NzFIMTEuOTU1OVYyMi45OTk5TDEuMjY5MzkgMjIuOTk5OUMwLjU2ODE2NCAyMi45OTk5IDAgMjIuNDMxNiAwIDIxLjczMDVWMS4yNjkzOEMwIDAuNTY4MjQ2IDAuNTY4MTY0IDAgMS4yNjkzOSAwSDIxLjczMDdDMjIuNDMxNiAwIDIzIDAuNTY4MTYgMjMgMS4yNjkzOFYyMS43MzA2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--facebook.socialButton--hasLabel .socialButton__icon {
    background: #485a96 url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNSAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjE3MjIgMTdDMTQuNjI5MyAxNyAxNSAxNi41Nzk5IDE1IDE2LjA2MThWMC45MzgyMzRDMTUgMC40MTk5NDQgMTQuNjI5MyAwIDE0LjE3MjIgMEgwLjgyNzg2QzAuMzcwNTQyIDAgMCAwLjQyMDAwOCAwIDAuOTM4MjM0VjE2LjA2MTdDMCAxNi41Nzk5IDAuMzcwNTQyIDE2Ljk5OTkgMC44Mjc4NiAxNi45OTk5SDE0LjE3MjJWMTdaIiBmaWxsPSIjNDg1QTk2Ii8+CjxwYXRoIGQ9Ik04Ljc5OTYyIDE2Ljk5OThWOS4yNTQ3OEgxMS4zOTkzTDExLjc4ODUgNi4yMzYzNkg4Ljc5OTU1VjQuMzA5MjRDOC43OTk1NSAzLjQzNTMzIDkuMDQyMTkgMi44Mzk4MiAxMC4yOTU0IDIuODM5ODJMMTEuODkzNyAyLjgzOTA3VjAuMTM5NDMxQzExLjYxNzMgMC4xMDI3MTIgMTAuNjY4NCAwLjAyMDUwNzggOS41NjQ3MiAwLjAyMDUwNzhDNy4yNjAyMSAwLjAyMDUwNzggNS42ODI1MSAxLjQyNzEzIDUuNjgyNTEgNC4wMTAzOVY2LjIzNjM2SDMuMDc2MTdWOS4yNTQ3OEg1LjY4MjUxVjE2Ljk5OThIOC43OTk2MlYxNi45OTk4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==) 50% no-repeat;
    background-size: 50%
}

.socialButton--twitch .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNTMzMzMgMEwwIDQuNVYyMUg2LjEzMzMzVjI0SDkuMkwxMi4yNjY3IDIxSDE2Ljg2NjdMMjMgMTQuNjFWMEgxLjUzMzMzWk0yMS40NjY3IDEzLjVMMTcuMTczMyAxOEgxMS43MzYxTDguNDMzMzMgMjAuMzUwNVYxOEgzLjA2NjY3VjEuNUgyMS40NjY3VjEzLjVaIiBmaWxsPSIjMUMxQzFDIi8+CjxwYXRoIGQ9Ik0xMi4yNjY3IDZIMTAuNzMzM1YxMkgxMi4yNjY3VjZaIiBmaWxsPSIjMUMxQzFDIi8+CjxwYXRoIGQ9Ik0xNi44NjY3IDZIMTUuMzMzM1YxMkgxNi44NjY3VjZaIiBmaWxsPSIjMUMxQzFDIi8+Cjwvc3ZnPgo=) 50% no-repeat;
    background-size: 22px 22px
}

.socialButton--twitch.socialButton--inverted .socialButton__icon {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNTMzMzMgMEwwIDQuNVYyMUg2LjEzMzMzVjI0SDkuMkwxMi4yNjY3IDIxSDE2Ljg2NjdMMjMgMTQuNjFWMEgxLjUzMzMzWk0yMS40NjY3IDEzLjVMMTcuMTczMyAxOEgxMS43MzYxTDguNDMzMzMgMjAuMzUwNVYxOEgzLjA2NjY3VjEuNUgyMS40NjY3VjEzLjVaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTIuMjY2NyA2SDEwLjczMzNWMTJIMTIuMjY2N1Y2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTE2Ljg2NjcgNkgxNS4zMzMzVjEySDE2Ljg2NjdWNloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--twitch.socialButton--hasLabel .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNTMzMzMgMEwwIDQuNVYyMUg2LjEzMzMzVjI0SDkuMkwxMi4yNjY3IDIxSDE2Ljg2NjdMMjMgMTQuNjFWMEgxLjUzMzMzWk0yMS40NjY3IDEzLjVMMTcuMTczMyAxOEgxMS43MzYxTDguNDMzMzMgMjAuMzUwNVYxOEgzLjA2NjY3VjEuNUgyMS40NjY3VjEzLjVaIiBmaWxsPSIjMUMxQzFDIi8+CjxwYXRoIGQ9Ik0xMi4yNjY3IDZIMTAuNzMzM1YxMkgxMi4yNjY3VjZaIiBmaWxsPSIjMUMxQzFDIi8+CjxwYXRoIGQ9Ik0xNi44NjY3IDZIMTUuMzMzM1YxMkgxNi44NjY3VjZaIiBmaWxsPSIjMUMxQzFDIi8+Cjwvc3ZnPgo=) 50% no-repeat;
    background-size: 50%
}

.socialButton--reddit .socialButton__icon {
    background: #fff url(/img/icon-social-reddit-black.f243ac8.svg) 50% no-repeat;
    background-size: 22px 22px
}

.socialButton--reddit.socialButton--inverted .socialButton__icon {
    background: url(/img/icon-social-reddit-white.420d92c.svg) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--reddit.socialButton--hasLabel .socialButton__icon {
    background: #ff4500 url(/img/icon-social-reddit-white.420d92c.svg) 50% no-repeat;
    background-size: 50%
}

.socialButton--share.socialButton--hasLabel .socialButton__icon {
    background: url(/img/icon-share-white.66b106e.svg) 50% no-repeat;
    background-size: 50%
}

.socialButton--tiktok .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxOCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjEwNDggMEMxMy40NTA0IDMuMTI4MzcgMTUuMTA5IDQuOTg4NDggMTggNS4xODE3M1Y4LjY5NjYyQzE2LjMyOTkgOC44NjU3MiAxNC44NTU2IDguMjg1OTQgMTMuMTUwOSA3LjIxMDk0VjEzLjc2OTZDMTMuMTUwOSAyMi4xMTYgNC40Nzc4MyAyNC43MjUgMC45ODc4NjUgMTguNzQ2Qy0xLjI1ODE1IDE0LjkwNSAwLjExMjQ5NSA4LjE0MSA3LjMxMTI2IDcuODc1MjdWMTEuNTgzNEM2Ljc1ODQgMTEuNjggNi4xODI1IDExLjgyNSA1LjY0MTE1IDEyLjAwNjJDNC4wNDAxNCAxMi41NzM5IDMuMTQxNzQgMTMuNjM2OCAzLjM5NTEzIDE1LjUwOUMzLjg3ODg5IDE5LjA5NjMgMTAuMTY3NyAyMC4xNTkyIDkuNjM3OTEgMTMuMTQxNlYwSDEzLjEwNDhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K) 50% no-repeat;
    background-size: 18px auto
}

.socialButton--tiktok.socialButton--inverted .socialButton__icon {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxOCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjEwNDggMEMxMy40NTA0IDMuMTI4MzcgMTUuMTA5IDQuOTg4NDggMTggNS4xODE3M1Y4LjY5NjYyQzE2LjMyOTkgOC44NjU3MiAxNC44NTU2IDguMjg1OTQgMTMuMTUwOSA3LjIxMDk0VjEzLjc2OTZDMTMuMTUwOSAyMi4xMTYgNC40Nzc4MyAyNC43MjUgMC45ODc4NjUgMTguNzQ2Qy0xLjI1ODE1IDE0LjkwNSAwLjExMjQ5NSA4LjE0MSA3LjMxMTI2IDcuODc1MjdWMTEuNTgzNEM2Ljc1ODQgMTEuNjggNi4xODI1IDExLjgyNSA1LjY0MTE1IDEyLjAwNjJDNC4wNDAxNCAxMi41NzM5IDMuMTQxNzQgMTMuNjM2OCAzLjM5NTEzIDE1LjUwOUMzLjg3ODg5IDE5LjA5NjMgMTAuMTY3NyAyMC4xNTkyIDkuNjM3OTEgMTMuMTQxNlYwSDEzLjEwNDhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K) 50% no-repeat;
    background-size: 18px auto
}

.socialButton--tiktok.socialButton--hasLabel .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxOCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjEwNDggMEMxMy40NTA0IDMuMTI4MzcgMTUuMTA5IDQuOTg4NDggMTggNS4xODE3M1Y4LjY5NjYyQzE2LjMyOTkgOC44NjU3MiAxNC44NTU2IDguMjg1OTQgMTMuMTUwOSA3LjIxMDk0VjEzLjc2OTZDMTMuMTUwOSAyMi4xMTYgNC40Nzc4MyAyNC43MjUgMC45ODc4NjUgMTguNzQ2Qy0xLjI1ODE1IDE0LjkwNSAwLjExMjQ5NSA4LjE0MSA3LjMxMTI2IDcuODc1MjdWMTEuNTgzNEM2Ljc1ODQgMTEuNjggNi4xODI1IDExLjgyNSA1LjY0MTE1IDEyLjAwNjJDNC4wNDAxNCAxMi41NzM5IDMuMTQxNzQgMTMuNjM2OCAzLjM5NTEzIDE1LjUwOUMzLjg3ODg5IDE5LjA5NjMgMTAuMTY3NyAyMC4xNTkyIDkuNjM3OTEgMTMuMTQxNlYwSDEzLjEwNDhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K) 50% no-repeat;
    background-size: 50%
}

.socialButton--youtube .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAzMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIzMTEgMjIuOTY5OUwxMC40NjA4IDIyLjg0NTFDOC4yNjg2OSAyMi44MDE2IDYuMDcxMTYgMjIuODg4NCAzLjkyMjA2IDIyLjQzOEMwLjY1Mjc4NiAyMS43NjUxIDAuNDIxMTc5IDE4LjQ2NTYgMC4xNzg4MjcgMTUuNjk3OUMtMC4xNTUxMSAxMS44MDY5IC0wLjAyNTgzMjggNy44NDUzNCAwLjYwNDM0OSAzLjk4Njg0QzAuOTYwMTA3IDEuODIxODIgMi4zNjAxNiAwLjUyOTkzNCA0LjUyNTMgMC4zODkzNTJDMTEuODM0MiAtMC4xMjA4MzkgMTkuMTkxNyAtMC4wNjAzNzYzIDI2LjQ4NDUgMC4xNzc2NDZDMjcuMjU0NyAwLjE5OTQ2NyAyOC4wMzAyIDAuMzE4NzI4IDI4Ljc4OTYgMC40NTQ0NzlDMzIuNTM4NSAxLjExNjU4IDMyLjYyOTkgNC44NTU2NSAzMi44NzI5IDguMDAzMjVDMzMuMTE1MiAxMS4xODMzIDMzLjAxMjkgMTQuMzc5NyAzMi41NDk3IDE3LjUzODJDMzIuMTc4MSAyMC4xNTMyIDMxLjQ2NzEgMjIuMzQ2MiAyOC40NjY0IDIyLjU1NzlDMjQuNzA2OCAyMi44MzQ4IDIxLjAzMzUgMjMuMDU3NiAxNy4yNjMzIDIyLjk4NjdDMTcuMjYzNSAyMi45Njk5IDE3LjI0MTggMjIuOTY5OSAxNy4yMzExIDIyLjk2OTlaTTEzLjI1MDggMTYuMzQ5MkMxNi4wODQgMTQuNzEwMiAxOC44NjMxIDEzLjA5ODUgMjEuNjgwMSAxMS40NzA1QzE4Ljg0MTYgOS44MzE0OCAxNi4wNjc4IDguMjE5NzggMTMuMjUwOCA2LjU5MTc3VjE2LjM0OTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K) 50% no-repeat;
    background-size: 24px auto
}

.socialButton--youtube.socialButton--inverted .socialButton__icon {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAzMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIzMTEgMjIuOTY5OUwxMC40NjA4IDIyLjg0NTFDOC4yNjg2OSAyMi44MDE2IDYuMDcxMTYgMjIuODg4NCAzLjkyMjA2IDIyLjQzOEMwLjY1Mjc4NiAyMS43NjUxIDAuNDIxMTc5IDE4LjQ2NTYgMC4xNzg4MjcgMTUuNjk3OUMtMC4xNTUxMSAxMS44MDY5IC0wLjAyNTgzMjggNy44NDUzNCAwLjYwNDM0OSAzLjk4Njg0QzAuOTYwMTA3IDEuODIxODIgMi4zNjAxNiAwLjUyOTkzNCA0LjUyNTMgMC4zODkzNTJDMTEuODM0MiAtMC4xMjA4MzkgMTkuMTkxNyAtMC4wNjAzNzYzIDI2LjQ4NDUgMC4xNzc2NDZDMjcuMjU0NyAwLjE5OTQ2NyAyOC4wMzAyIDAuMzE4NzI4IDI4Ljc4OTYgMC40NTQ0NzlDMzIuNTM4NSAxLjExNjU4IDMyLjYyOTkgNC44NTU2NSAzMi44NzI5IDguMDAzMjVDMzMuMTE1MiAxMS4xODMzIDMzLjAxMjkgMTQuMzc5NyAzMi41NDk3IDE3LjUzODJDMzIuMTc4MSAyMC4xNTMyIDMxLjQ2NzEgMjIuMzQ2MiAyOC40NjY0IDIyLjU1NzlDMjQuNzA2OCAyMi44MzQ4IDIxLjAzMzUgMjMuMDU3NiAxNy4yNjMzIDIyLjk4NjdDMTcuMjYzNSAyMi45Njk5IDE3LjI0MTggMjIuOTY5OSAxNy4yMzExIDIyLjk2OTlaTTEzLjI1MDggMTYuMzQ5MkMxNi4wODQgMTQuNzEwMiAxOC44NjMxIDEzLjA5ODUgMjEuNjgwMSAxMS40NzA1QzE4Ljg0MTYgOS44MzE0OCAxNi4wNjc4IDguMjE5NzggMTMuMjUwOCA2LjU5MTc3VjE2LjM0OTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K) 50% no-repeat;
    background-size: 24px auto
}

.socialButton--youtube.socialButton--hasLabel .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAzMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIzMTEgMjIuOTY5OUwxMC40NjA4IDIyLjg0NTFDOC4yNjg2OSAyMi44MDE2IDYuMDcxMTYgMjIuODg4NCAzLjkyMjA2IDIyLjQzOEMwLjY1Mjc4NiAyMS43NjUxIDAuNDIxMTc5IDE4LjQ2NTYgMC4xNzg4MjcgMTUuNjk3OUMtMC4xNTUxMSAxMS44MDY5IC0wLjAyNTgzMjggNy44NDUzNCAwLjYwNDM0OSAzLjk4Njg0QzAuOTYwMTA3IDEuODIxODIgMi4zNjAxNiAwLjUyOTkzNCA0LjUyNTMgMC4zODkzNTJDMTEuODM0MiAtMC4xMjA4MzkgMTkuMTkxNyAtMC4wNjAzNzYzIDI2LjQ4NDUgMC4xNzc2NDZDMjcuMjU0NyAwLjE5OTQ2NyAyOC4wMzAyIDAuMzE4NzI4IDI4Ljc4OTYgMC40NTQ0NzlDMzIuNTM4NSAxLjExNjU4IDMyLjYyOTkgNC44NTU2NSAzMi44NzI5IDguMDAzMjVDMzMuMTE1MiAxMS4xODMzIDMzLjAxMjkgMTQuMzc5NyAzMi41NDk3IDE3LjUzODJDMzIuMTc4MSAyMC4xNTMyIDMxLjQ2NzEgMjIuMzQ2MiAyOC40NjY0IDIyLjU1NzlDMjQuNzA2OCAyMi44MzQ4IDIxLjAzMzUgMjMuMDU3NiAxNy4yNjMzIDIyLjk4NjdDMTcuMjYzNSAyMi45Njk5IDE3LjI0MTggMjIuOTY5OSAxNy4yMzExIDIyLjk2OTlaTTEzLjI1MDggMTYuMzQ5MkMxNi4wODQgMTQuNzEwMiAxOC44NjMxIDEzLjA5ODUgMjEuNjgwMSAxMS40NzA1QzE4Ljg0MTYgOS44MzE0OCAxNi4wNjc4IDguMjE5NzggMTMuMjUwOCA2LjU5MTc3VjE2LjM0OTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K) 50% no-repeat;
    background-size: 50%
}

.socialButton--instagram .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIKICAgIGQ9Ik0xIDhDMSA0LjEzNDAxIDQuMTM0MDEgMSA4IDFIMTZDMTkuODY2IDEgMjMgNC4xMzQwMSAyMyA4VjE2QzIzIDE5Ljg2NiAxOS44NjYgMjMgMTYgMjNIOEM0LjEzNDAxIDIzIDEgMTkuODY2IDEgMTZWOFpNMTIgMTUuNUMxMy45MzMgMTUuNSAxNS41IDEzLjkzMyAxNS41IDEyQzE1LjUgMTAuMDY3IDEzLjkzMyA4LjUgMTIgOC41QzEwLjA2NyA4LjUgOC41IDEwLjA2NyA4LjUgMTJDOC41IDEzLjkzMyAxMC4wNjcgMTUuNSAxMiAxNS41Wk0xMiAxNy41QzE1LjAzNzYgMTcuNSAxNy41IDE1LjAzNzYgMTcuNSAxMkMxNy41IDguOTYyNDMgMTUuMDM3NiA2LjUgMTIgNi41QzguOTYyNDMgNi41IDYuNSA4Ljk2MjQzIDYuNSAxMkM2LjUgMTUuMDM3NiA4Ljk2MjQzIDE3LjUgMTIgMTcuNVpNMTcuOTU5IDcuNDE2OTlDMTguNzE4NCA3LjQxNjk5IDE5LjMzNCA2LjgwMTM4IDE5LjMzNCA2LjA0MTk5QzE5LjMzNCA1LjI4MjYgMTguNzE4NCA0LjY2Njk5IDE3Ljk1OSA0LjY2Njk5QzE3LjE5OTYgNC42NjY5OSAxNi41ODQgNS4yODI2IDE2LjU4NCA2LjA0MTk5QzE2LjU4NCA2LjgwMTM4IDE3LjE5OTYgNy40MTY5OSAxNy45NTkgNy40MTY5OVoiCiAgICBmaWxsPSJibGFjayIgLz4KPC9zdmc+CiAg) 50% no-repeat;
    background-size: 22px 22px
}

.socialButton--instagram.socialButton--inverted .socialButton__icon {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIKICAgIGQ9Ik0xIDhDMSA0LjEzNDAxIDQuMTM0MDEgMSA4IDFIMTZDMTkuODY2IDEgMjMgNC4xMzQwMSAyMyA4VjE2QzIzIDE5Ljg2NiAxOS44NjYgMjMgMTYgMjNIOEM0LjEzNDAxIDIzIDEgMTkuODY2IDEgMTZWOFpNMTIgMTUuNUMxMy45MzMgMTUuNSAxNS41IDEzLjkzMyAxNS41IDEyQzE1LjUgMTAuMDY3IDEzLjkzMyA4LjUgMTIgOC41QzEwLjA2NyA4LjUgOC41IDEwLjA2NyA4LjUgMTJDOC41IDEzLjkzMyAxMC4wNjcgMTUuNSAxMiAxNS41Wk0xMiAxNy41QzE1LjAzNzYgMTcuNSAxNy41IDE1LjAzNzYgMTcuNSAxMkMxNy41IDguOTYyNDMgMTUuMDM3NiA2LjUgMTIgNi41QzguOTYyNDMgNi41IDYuNSA4Ljk2MjQzIDYuNSAxMkM2LjUgMTUuMDM3NiA4Ljk2MjQzIDE3LjUgMTIgMTcuNVpNMTcuOTU5IDcuNDE2OTlDMTguNzE4NCA3LjQxNjk5IDE5LjMzNCA2LjgwMTM4IDE5LjMzNCA2LjA0MTk5QzE5LjMzNCA1LjI4MjYgMTguNzE4NCA0LjY2Njk5IDE3Ljk1OSA0LjY2Njk5QzE3LjE5OTYgNC42NjY5OSAxNi41ODQgNS4yODI2IDE2LjU4NCA2LjA0MTk5QzE2LjU4NCA2LjgwMTM4IDE3LjE5OTYgNy40MTY5OSAxNy45NTkgNy40MTY5OVoiCiAgICBmaWxsPSJ3aGl0ZSIgLz4KPC9zdmc+CiAg) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--instagram.socialButton--hasLabel .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIKICAgIGQ9Ik0xIDhDMSA0LjEzNDAxIDQuMTM0MDEgMSA4IDFIMTZDMTkuODY2IDEgMjMgNC4xMzQwMSAyMyA4VjE2QzIzIDE5Ljg2NiAxOS44NjYgMjMgMTYgMjNIOEM0LjEzNDAxIDIzIDEgMTkuODY2IDEgMTZWOFpNMTIgMTUuNUMxMy45MzMgMTUuNSAxNS41IDEzLjkzMyAxNS41IDEyQzE1LjUgMTAuMDY3IDEzLjkzMyA4LjUgMTIgOC41QzEwLjA2NyA4LjUgOC41IDEwLjA2NyA4LjUgMTJDOC41IDEzLjkzMyAxMC4wNjcgMTUuNSAxMiAxNS41Wk0xMiAxNy41QzE1LjAzNzYgMTcuNSAxNy41IDE1LjAzNzYgMTcuNSAxMkMxNy41IDguOTYyNDMgMTUuMDM3NiA2LjUgMTIgNi41QzguOTYyNDMgNi41IDYuNSA4Ljk2MjQzIDYuNSAxMkM2LjUgMTUuMDM3NiA4Ljk2MjQzIDE3LjUgMTIgMTcuNVpNMTcuOTU5IDcuNDE2OTlDMTguNzE4NCA3LjQxNjk5IDE5LjMzNCA2LjgwMTM4IDE5LjMzNCA2LjA0MTk5QzE5LjMzNCA1LjI4MjYgMTguNzE4NCA0LjY2Njk5IDE3Ljk1OSA0LjY2Njk5QzE3LjE5OTYgNC42NjY5OSAxNi41ODQgNS4yODI2IDE2LjU4NCA2LjA0MTk5QzE2LjU4NCA2LjgwMTM4IDE3LjE5OTYgNy40MTY5OSAxNy45NTkgNy40MTY5OVoiCiAgICBmaWxsPSJibGFjayIgLz4KPC9zdmc+CiAg) 50% no-repeat;
    background-size: 50%
}

.socialButton--linkedin .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjY5OTkyIDBDMC43NjEzMjEgMCAwIDAuNzM4MTMxIDAgMS42NDc2VjIxLjM1M0MwIDIyLjI2MjUgMC43NjEzMjEgMjMgMS42OTk5MiAyM0gyMS4zMDAxQzIyLjIzOSAyMyAyMyAyMi4yNjI1IDIzIDIxLjM1MjdWMS42NDc2QzIzIDAuNzM4MTMxIDIyLjIzOSAwIDIxLjMwMDEgMEgxLjY5OTkyWk02Ljg1OTE5IDguODc4NzlWMTguOTk5N0gzLjIxNDk1VjguODc4NzlINi44NTkxOVpNNy4wOTkzIDUuNzQ4NzVDNy4wOTkzIDYuNzE5OTggNi4zMDgyOSA3LjQ5NzIgNS4wMzc3MSA3LjQ5NzJINS4wMTM4MkMzLjc5MDY5IDcuNDk3MiAzIDYuNzE5OTggMyA1Ljc0ODc1QzMgNC43NTU0NyAzLjgxNDU3IDQgNS4wNjE5MSA0QzYuMzA4MjkgNCA3LjA3NTQyIDQuNzU1NDcgNy4wOTkzIDUuNzQ4NzVaTTEyLjUyMDEgMTguOTk5N0g4Ljg3NjJDOC44NzY1MSAxOC45NDAxIDguOTIzODEgOS44MjU0NiA4Ljg3NjUyIDguODc5MDlIMTIuNTIwNFYxMC4zMTE5QzEzLjAwNDggOS42MjIzMyAxMy44NzE3IDguNjQxNTcgMTUuODA0OCA4LjY0MTU3QzE4LjIwMjQgOC42NDE1NyAyMCAxMC4wODgxIDIwIDEzLjE5NjdWMTguOTk5N0gxNi4zNTYxVjEzLjU4NTlDMTYuMzU2MSAxMi4yMjUyIDE1LjgyODQgMTEuMjk3MiAxNC41MTAxIDExLjI5NzJDMTMuNTAzMiAxMS4yOTcyIDEyLjkwMzUgMTEuOTIzIDEyLjY0MDIgMTIuNTI3N0MxMi41NDQgMTIuNzQzNCAxMi41MjAxIDEzLjA0NjIgMTIuNTIwMSAxMy4zNDg0VjE4Ljk5OTdaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K) 50% no-repeat;
    background-size: 22px 22px
}

.socialButton--linkedin.socialButton--inverted .socialButton__icon {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjY5OTkyIDBDMC43NjEzMjEgMCAwIDAuNzM4MTMxIDAgMS42NDc2VjIxLjM1M0MwIDIyLjI2MjUgMC43NjEzMjEgMjMgMS42OTk5MiAyM0gyMS4zMDAxQzIyLjIzOSAyMyAyMyAyMi4yNjI1IDIzIDIxLjM1MjdWMS42NDc2QzIzIDAuNzM4MTMxIDIyLjIzOSAwIDIxLjMwMDEgMEgxLjY5OTkyWk02Ljg1OTE5IDguODc4NzlWMTguOTk5N0gzLjIxNDk1VjguODc4NzlINi44NTkxOVpNNy4wOTkzIDUuNzQ4NzVDNy4wOTkzIDYuNzE5OTggNi4zMDgyOSA3LjQ5NzIgNS4wMzc3MSA3LjQ5NzJINS4wMTM4MkMzLjc5MDY5IDcuNDk3MiAzIDYuNzE5OTggMyA1Ljc0ODc1QzMgNC43NTU0NyAzLjgxNDU3IDQgNS4wNjE5MSA0QzYuMzA4MjkgNCA3LjA3NTQyIDQuNzU1NDcgNy4wOTkzIDUuNzQ4NzVaTTEyLjUyMDEgMTguOTk5N0g4Ljg3NjJDOC44NzY1MSAxOC45NDAxIDguOTIzODEgOS44MjU0NiA4Ljg3NjUyIDguODc5MDlIMTIuNTIwNFYxMC4zMTE5QzEzLjAwNDggOS42MjIzMyAxMy44NzE3IDguNjQxNTcgMTUuODA0OCA4LjY0MTU3QzE4LjIwMjQgOC42NDE1NyAyMCAxMC4wODgxIDIwIDEzLjE5NjdWMTguOTk5N0gxNi4zNTYxVjEzLjU4NTlDMTYuMzU2MSAxMi4yMjUyIDE1LjgyODQgMTEuMjk3MiAxNC41MTAxIDExLjI5NzJDMTMuNTAzMiAxMS4yOTcyIDEyLjkwMzUgMTEuOTIzIDEyLjY0MDIgMTIuNTI3N0MxMi41NDQgMTIuNzQzNCAxMi41MjAxIDEzLjA0NjIgMTIuNTIwMSAxMy4zNDg0VjE4Ljk5OTdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--glassdoor .socialButton__icon {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAxNiAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjU3MTQgMEMxLjYzNzM2IDAgMCAxLjc1Mjc2IDAgMy45MTQ4OVYxNi4xNDg5SDMuNjU3MTRWMy40MjU1M0gxNS45NzE3QzE1Ljc0NjcgMS40OTQzNiAxNC4yMDc4IDAgMTIuMzQyOSAwSDMuNjU3MTRaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTYgNi44NTEwNkgxMi4zNDI5VjE5LjU3NDVIMC4wMjgyOTQzQzAuMjUzMjUzIDIxLjUwNTYgMS43OTIxNyAyMyAzLjY1NzE0IDIzSDEyLjM0MjlDMTQuMzYyNiAyMyAxNiAyMS4yNDcyIDE2IDE5LjA4NTFWNi44NTEwNloiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=) 50% no-repeat;
    background-size: 22px 22px
}

.socialButton--glassdoor.socialButton--inverted .socialButton__icon {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAxNiAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjU3MTQgMEMxLjYzNzM2IDAgMCAxLjc1Mjc2IDAgMy45MTQ4OVYxNi4xNDg5SDMuNjU3MTRWMy40MjU1M0gxNS45NzE3QzE1Ljc0NjcgMS40OTQzNiAxNC4yMDc4IDAgMTIuMzQyOSAwSDMuNjU3MTRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTYgNi44NTEwNkgxMi4zNDI5VjE5LjU3NDVIMC4wMjgyOTQzQzAuMjUzMjUzIDIxLjUwNTYgMS43OTIxNyAyMyAzLjY1NzE0IDIzSDEyLjM0MjlDMTQuMzYyNiAyMyAxNiAyMS4yNDcyIDE2IDE5LjA4NTFWNi44NTEwNloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--discord .socialButton__icon {
    background: #fff url(/img/icon-social-discord.bee450f.svg) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton--discord.socialButton--inverted .socialButton__icon {
    background: url(/img/icon-social-discord-white.efaa212.svg) 50% no-repeat;
    background-size: 100% 100%
}

.socialButton__routerLink {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

.textButton {
    display: inline-block;
    font-size: 0
}

.textButton__main {
    align-items: center;
    display: flex;
    justify-content: center;
    -webkit-text-decoration: none;
    text-decoration: none
}

.textButton__label {
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    text-align: center;
    transition: color .2s;
    white-space: nowrap
}

@media(min-width:48em) {
    .textButton__label {
        font-size: 16px
    }
}

.textButton__label:hover {
    color: #fff
}

.textButton--underlined .textButton__label {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.textButton--uppercase .textButton__label {
    text-transform: uppercase
}

.textButton--small .textButton__label {
    font-size: 14px
}

.textButton--big .textButton__label {
    font-size: 20px
}

.textButton--footer .textButton__label {
    font-family: "Supercell Text", sans-serif;
    font-size: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 34px
}

@media(min-width:48em) {
    .textButton--footer .textButton__label {
        font-size: 13px
    }
}

@font-face {
    font-display: swap;
    font-family: Squad;
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/SquadLatin-Regular.f6521ef.woff2) format("woff2"), url(/fonts/SquadLatin-Regular.cc9f766.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Squad;
    font-stretch: normal;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/SquadLatin-Bold.b5f8bf0.woff2) format("woff2"), url(/fonts/SquadLatin-Bold.dfe16f4.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Squad;
    font-stretch: normal;
    font-style: normal;
    font-weight: 850;
    src: url(/fonts/SquadLatin-ExtraBold.625c006.woff2) format("woff2"), url(/fonts/SquadLatin-ExtraBold.e1a3f8c.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Squad;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    src: url(/fonts/SquadLatin-Black.08fcc61.woff2) format("woff2"), url(/fonts/SquadLatin-Black.b88484e.woff) format("woff")
}

:root {
    --clr-black: #000;
    --clr-black-80: rgba(0, 0, 0, .8);
    --clr-black-hover: #1a1a1a;
    --clr-primary: #3f88e3;
    --clr-primary-hover: #397acc;
    --clr-white: #fff;
    --clr-white-80: hsla(0, 0%, 100%, .8);
    --clr-white-60: hsla(0, 0%, 100%, .6);
    --clr-gradient-purple: linear-gradient(180deg, #7900ea, #ca56f2);
    --clr-gradient-blue: linear-gradient(180deg, #003d99, #06f);
    --clr-gradient-pink: linear-gradient(180deg, #d700ea, #ca56f2);
    --clr-gradient-yellow: linear-gradient(180deg, #ffd77a, #ffba00);
    --clr-neutral-1: #c1cacf;
    --clr-neutral-2: #656c72;
    --clr-pink: #ff3cf7;
    --box-shadow-50: 0px 4px rgba(0, 0, 0, .502);
    --box-shadow-15: 0px 4px rgba(0, 0, 0, .149);
    --indent: 16px;
    --indent-half: calc(var(--indent)/2)
}

@media(min-width:30em) {
    :root {
        --indent: 26px
    }
}

@media(min-width:48em) {
    :root {
        --indent: 35px
    }
}

@media(min-width:64em) {
    :root {
        --indent: 50px
    }
}

a {
    display: inline-flex
}

body {
    background-color: #ff3cf7;
    background-color: var(--clr-pink);
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 110%
}

@media(min-width:30em) {
    body {
        font-size: 18px
    }
}

@media(min-width:90em) {
    body {
        font-size: 20px
    }
}

body h1 {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 60px;
    font-weight: 900;
    line-height: 100%
}

@media(min-width:30em) {
    body h1 {
        font-size: 80px
    }
}

@media(min-width:48em) {
    body h1 {
        font-size: 88px
    }
}

@media(min-width:64em) {
    body h1 {
        font-size: 94px
    }
}

@media(min-width:90em) {
    body h1 {
        font-size: 108px
    }
}

body h2 {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 100%
}

@media(min-width:30em) {
    body h2 {
        font-size: 44px
    }
}

@media(min-width:48em) {
    body h2 {
        font-size: 48px
    }
}

@media(min-width:64em) {
    body h2 {
        font-size: 52px
    }
}

@media(min-width:90em) {
    body h2 {
        font-size: 56px
    }
}

body h3 {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 28px;
    font-weight: 900;
    line-height: 100%;
    line-height: 130%
}

@media(min-width:30em) {
    body h3 {
        font-size: 32px
    }
}

@media(min-width:48em) {
    body h3 {
        font-size: 36px
    }
}

@media(min-width:64em) {
    body h3 {
        font-size: 40px
    }
}

body h4 {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 24px;
    font-weight: 900;
    font-weight: 850;
    line-height: 100%;
    line-height: 130%
}

@media(min-width:64em) {
    body h4 {
        font-size: 28px
    }
}

@media(min-width:90em) {
    body h4 {
        font-size: 30px
    }
}

body p {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 110%
}

@media(min-width:30em) {
    body p {
        font-size: 18px
    }
}

@media(min-width:90em) {
    body p {
        font-size: 20px
    }
}

body input {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 18px
}

body input,
body label {
    font-family: Squad, sans-serif
}

body label {
    color: #fff;
    color: var(--clr-white);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 110%
}

@media(min-width:30em) {
    body label {
        font-size: 16px
    }
}

body label a {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 110%
}

@media(min-width:30em) {
    body label a {
        font-size: 16px
    }
}

body option {
    font-size: 16px
}

body .defaultSelect__desktopOptions p {
    color: #000;
    color: var(--clr-black);
    font-family: Squad, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 150%
}

@media(min-width:30em) {
    body .defaultSelect__desktopOptions p {
        font-size: 14px
    }
}

@media(min-width:90em) {
    body .defaultSelect__desktopOptions p {
        font-size: 16px
    }
}

body .defaultInput__errorLabel {
    font-family: Squad, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 150%
}

@media(min-width:30em) {
    body .defaultInput__errorLabel {
        font-size: 14px
    }
}

@media(min-width:90em) {
    body .defaultInput__errorLabel {
        font-size: 16px
    }
}

@supports(-webkit-touch-callout:none) {
    body .wrapper {
        bottom: 0;
        height: 100vh;
        height: 100svh;
        left: 0;
        overflow: scroll;
        overscroll-behavior-y: none;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1
    }
}

.progressTrackerModule {
    align-items: center;
    display: flex;
    height: 500px;
    justify-content: center
}

.heroModule {
    margin-bottom: 50vh;
    max-height: 100vh;
    max-height: 100svh;
    min-height: auto;
    min-height: 90vh;
    min-height: 90svh;
    overflow: hidden;
    padding: 16px;
    padding: var(--indent);
    padding-bottom: 64px;
    position: relative
}

@media(min-width:48em) {
    .heroModule {
        padding: 40px
    }
}

@media(orientation:landscape) {
    .heroModule {
        height: auto;
        max-height: none;
        min-height: 100vh
    }
}

.heroModule__lottieBackground {
    background: 0 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1
}

.heroModule__lottieBackground--blur {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0
}

.heroModule__lottieBackground--blur--center {
    height: 100vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw
}

@media(min-width:64em) {
    .heroModule__lottieBackground--blur--center {
        height: 50vw;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50vw
    }
}

.heroModule__lottieBackground--blur--bottom {
    bottom: -30vw;
    height: 100vw;
    left: -100vw;
    mix-blend-mode: hard-light;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: top;
    object-position: top;
    opacity: .75;
    position: absolute;
    width: 300vw
}

@media(min-width:64em) {
    .heroModule__lottieBackground--blur--bottom {
        bottom: -15vw;
        height: 46vw;
        left: -20vw;
        width: 140vw
    }
}

.heroModule__backgroundColor {
    background: #ff3cf7;
    background: var(--clr-pink);
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -2
}

.heroModule__appButtonsWrapper,
.heroModule__downloadButton,
.heroModule__signupButton {
    margin-top: 0
}

.heroModule__appButtonsWrapper {
    width: 100%
}

.heroModule__info {
    flex-grow: 1;
    gap: 24px;
    height: 100%;
    justify-content: space-between;
    margin-bottom: 24px;
    opacity: 0;
    padding-top: max(200px, min(36svh, 300px));
    z-index: 1
}

@media(min-height:900px) {
    .heroModule__info {
        justify-content: flex-end
    }
}

@media(max-height:600px) {
    .heroModule__info {
        padding-top: max(150px, min(36svh, 180px))
    }
}

@media(min-width:48em) {
    .heroModule__info {
        align-items: center;
        gap: 16px;
        justify-content: center;
        margin-top: -64px;
        width: 100%
    }
}

@media(min-width:64em) {
    .heroModule__info {
        margin-bottom: 100px
    }
}

@media(orientation:landscape) {
    .heroModule__info {
        margin-bottom: 0;
        padding-top: 0
    }
}

@media screen and (max-device-width:920px)and (max-device-height:420px)and (orientation:landscape) {
    .heroModule__info {
        gap: 12px;
        justify-content: center
    }
}

.heroModule__info img {
    margin-bottom: 0;
    max-width: none
}

.heroModule__ctaAndHints {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    justify-content: flex-end;
    opacity: 0
}

@media(min-width:90em) {
    .heroModule__ctaAndHints {
        bottom: 120px;
        right: 40px
    }
}

@media(min-width:100em) {
    .heroModule__ctaAndHints {
        bottom: 150px;
        right: 40px
    }
}

@keyframes bop {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(8px)
    }
}

.heroModule__scrollHint {
    display: none;
    opacity: 0
}

@media(min-width:64em) {
    .heroModule__scrollHint {
        align-items: center;
        bottom: -100px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: absolute
    }
}

@media(min-width:64em)and (orientation:landscape) {
    .heroModule__scrollHint {
        bottom: 32px
    }
}

@media(min-width:64em)and (max-height:700px) {
    .heroModule__scrollHint {
        display: none
    }
}

.heroModule__scrollHint:after {
    animation: bop 1s ease-in-out infinite alternate;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2.5 11 8.5 9 8.5-9M2.5 2l8.5 9 8.5-9' stroke='%23fff' stroke-width='4'/%3E%3C/svg%3E");
    content: "";
    height: 24px;
    width: 22px
}

.heroModule__downloadHint {
    max-width: 300px;
    padding: 8px 24px;
    position: relative
}

.heroModule__downloadHint p {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 110%
}

@media(min-width:30em) {
    .heroModule__downloadHint p {
        font-size: 16px
    }
}

@media(min-width:48em) {
    .heroModule__downloadHint {
        max-width: 400px;
        padding: 16px 48px
    }
}

.heroModule__downloadHint:before {
    background: #000;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(-12deg);
    z-index: -1
}

.heroModule__downloadHint:after {
    border: 12px solid transparent;
    border-top-color: #000;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 0
}

.heroModule__header {
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-end;
    opacity: 0;
    position: relative;
    z-index: 10
}

@media screen and (max-device-width:920px)and (max-device-height:420px)and (orientation:landscape) {
    .heroModule__header {
        margin-bottom: 12px
    }
}

.heroModule__supercellLogoWrapper {
    margin-right: auto;
    order: -1
}

.heroModule__supercellLogoWrapper img {
    width: 30px
}

.heroModule__supercellLogoWrapper--link {
    cursor: pointer;
    transform: scale(1);
    transition: transform .2s cubic-bezier(.455, .03, .515, .955)
}

.heroModule__supercellLogoWrapper--link:hover {
    transform: scale(1.1)
}

.heroModule__supercellLogoWrapper--link:active {
    transform: scale(.9)
}

@media(min-width:48em) {
    .heroModule__supercellLogoWrapper {
        margin-right: auto;
        order: -1
    }

    .heroModule__supercellLogoWrapper img {
        width: 54px
    }
}

.heroModule__headerLogoWrapper {
    left: 50%;
    order: -1;
    position: absolute;
    right: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 170px
}

@media screen and (max-device-width:920px)and (max-device-height:420px)and (orientation:landscape) {
    .heroModule__headerLogoWrapper {
        width: 70px
    }
}

@media(min-width:64em) {
    .heroModule__headerLogoWrapper {
        width: 260px
    }
}

.heroModule__taglineContainer {
    --tagline-size: 50vh;
    color: #fff;
    color: var(--clr-white);
    display: flex;
    flex-direction: column;
    font-family: Squad, sans-serif;
    font-style: italic;
    font-weight: 900;
    gap: 8px;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    margin: 4% 0 8px;
    max-width: 90vw;
    max-width: 85vw;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-3.75deg) translateX(-2%)
}

body.tr .heroModule__taglineContainer {
    text-transform: none
}

body.cn .heroModule__taglineContainer,
body.jp .heroModule__taglineContainer,
body.kr .heroModule__taglineContainer,
body.zh-cn .heroModule__taglineContainer {
    letter-spacing: .02em;
    line-height: 110%
}

.heroModule__taglineContainer--reverse {
    flex-direction: column-reverse
}

@media(min-width:48em) {
    .heroModule__taglineContainer {
        --tagline-size: 25vh;
        margin: 16px 0
    }
}

@media(orientation:landscape) {
    .heroModule__taglineContainer {
        max-width: min(85vw, 1600px)
    }
}

.heroModule__decoration {
    opacity: 0;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-min-content;
    width: min-content;
    z-index: 2
}

.heroModule__decoration img {
    width: 100%
}

.heroModule__decoration--0 {
    aspect-ratio: 375/347;
    height: 30vh;
    height: 30svh;
    max-height: 250px;
    right: 50%;
    top: 56%;
    transform: translateY(-130%) translateX(10%);
    z-index: 10
}

@media(orientation:landscape) {
    .heroModule__decoration--0 {
        bottom: 10%;
        height: 50vh;
        left: 2%;
        max-height: 500px;
        top: auto;
        transform: translateY(0) translateX(-15%)
    }
}

@media screen and (max-device-width:920px)and (max-device-height:420px)and (orientation:landscape) {
    .heroModule__decoration--0 {
        left: 10%
    }
}

.heroModule__decoration--1 {
    aspect-ratio: 1/1;
    height: 30vh;
    height: 30svh;
    left: 50%;
    max-height: 250px;
    top: 50%;
    transform: scaleX(-1) translateY(-105%) translateX(10%)
}

@media(orientation:landscape) {
    .heroModule__decoration--1 {
        bottom: 7%;
        height: 60vh;
        left: auto;
        max-height: 600px;
        right: 0;
        top: auto;
        transform: scaleX(-1) translateY(8%) translateX(-30%)
    }
}

@media screen and (max-device-width:920px)and (max-device-height:420px)and (orientation:landscape) {
    .heroModule__decoration--1 {
        right: 10%
    }
}

.heroModule__tagline {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 25vh;
    font-size: var(--tagline-size, 25vh);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    margin: 0 auto;
    max-width: 85vw;
    position: relative;
    text-transform: uppercase;
    width: -moz-min-content;
    width: min-content
}

body.tr .heroModule__tagline {
    text-transform: none
}

body.cn .heroModule__tagline,
body.jp .heroModule__tagline,
body.kr .heroModule__tagline,
body.zh-cn .heroModule__tagline {
    letter-spacing: .02em;
    line-height: 110%
}

@media(orientation:landscape) {
    .heroModule__tagline {
        text-wrap: nowrap
    }
}

@media(min-width:48em) {
    .heroModule__tagline {
        text-wrap: nowrap
    }
}

body.cn .heroModule__tagline,
body.jp .heroModule__tagline,
body.kr .heroModule__tagline,
body.zh-cn .heroModule__tagline {
    text-wrap: nowrap;
    width: auto
}

body.cn .heroModule__tagline span,
body.jp .heroModule__tagline span,
body.kr .heroModule__tagline span,
body.pt .heroModule__tagline span,
body.zh-cn .heroModule__tagline span {
    line-height: 100%
}

.heroModule__subTitle {
    color: var(--clr-white);
    color: #fff;
    font-family: Squad, sans-serif;
    font-size: calc(var(--tagline-size)/2);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    position: relative;
    text-transform: uppercase;
    z-index: 1
}

body.tr .heroModule__subTitle {
    text-transform: none
}

body.cn .heroModule__subTitle,
body.jp .heroModule__subTitle,
body.kr .heroModule__subTitle,
body.zh-cn .heroModule__subTitle {
    letter-spacing: .02em;
    line-height: 110%
}

@media(orientation:landscape) {
    .heroModule__subTitle {
        font-size: calc(var(--tagline-size)/3)
    }
}

@media(orientation:landscape)and (max-width:63.99em) {
    .heroModule__subTitle {
        font-size: calc(var(--tagline-size)/3)
    }
}

.heroModule__signupButton {
    margin-top: 0
}

.heroModule__socialIconsWrapper {
    justify-content: center;
    opacity: 0
}

@media(min-width:48em) {
    .heroModule__socialIconsWrapper {
        margin-right: 16px;
        margin-top: 6px;
        opacity: 1
    }
}

.heroModule .defaultSelect {
    display: none
}

@media(min-width:48em) {
    .heroModule .defaultSelect {
        display: block
    }
}

.heroModule .defaultSelect__select {
    border: none;
    border-radius: 100px;
    height: 40px;
    padding-bottom: 2px
}

.heroModule .defaultSelect__chevron {
    top: 13px
}

.youtubeModule {
    background-color: #000;
    background-color: var(--clr-black);
    overflow: hidden;
    padding: 24px 0;
    position: relative
}

@media(min-width:48em) {
    .youtubeModule {
        padding: 42px 0
    }
}

.youtubeModule .block {
    padding: 0
}

.youtubeModule__bottomVault,
.youtubeModule__topVault {
    height: calc(50% + 52px);
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 100
}

.youtubeModule__bottomVault:before,
.youtubeModule__topVault:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1440' height='41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M471.337 31.438 1569 .017V47H-128V33.587l620.55-17.49-21.213 15.34Z' fill='%23000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1440px 41px;
    content: "";
    height: 52px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1
}

.youtubeModule__topVault {
    background: linear-gradient(180deg, #000 0, #000 calc(100% - 52px), transparent calc(100% - 50px), transparent);
    top: 0
}

.youtubeModule__topVault:before {
    background-position-x: 33%;
    background-position-y: bottom;
    bottom: 0;
    transform: rotate(180deg)
}

@media(min-width:1440px) {
    .youtubeModule__topVault:before {
        background-position-x: center;
        background-size: cover
    }
}

.youtubeModule__bottomVault {
    background: linear-gradient(0deg, #000 0, #000 calc(100% - 52px), transparent calc(100% - 50px), transparent);
    bottom: 0
}

.youtubeModule__bottomVault:before {
    background-position-x: 33%;
    background-position-y: bottom;
    top: 0
}

@media(min-width:1440px) {
    .youtubeModule__bottomVault:before {
        background-position-x: center;
        background-size: cover
    }
}

.youtubeGalleryModule {
    overflow: hidden;
    padding: 80px 20px;
    position: relative;
    z-index: 1
}

@media(min-width:48em) {
    .youtubeGalleryModule {
        padding: 100px 100px 180px
    }
}

.youtubeGalleryModule .block {
    padding: 0
}

.youtubeGalleryModule .block__main {
    gap: 40px
}

.youtubeGalleryModule .block__main,
.youtubeGalleryModule__text {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.youtubeGalleryModule__text {
    gap: 32px;
    max-width: 540px;
    padding: 0 20px;
    text-align: center
}

.youtubeGalleryModule__text--titles {
    --tagline-size: 65px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    max-width: 85vw
}

@media(min-width:48em) {
    .youtubeGalleryModule__text--titles {
        --tagline-size: 80px
    }
}

.youtubeGalleryModule__title {
    text-wrap: wrap;
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: var(--tagline-size);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-3.75deg);
    word-break: keep-all
}

body.tr .youtubeGalleryModule__title {
    text-transform: none
}

body.cn .youtubeGalleryModule__title,
body.jp .youtubeGalleryModule__title,
body.kr .youtubeGalleryModule__title,
body.zh-cn .youtubeGalleryModule__title {
    letter-spacing: .02em;
    line-height: 110%
}

.youtubeGalleryModule__title--0 {
    font-size: calc(var(--tagline-size)*.65);
    line-height: 110%
}

body.cn .youtubeGalleryModule__title--1,
body.kr .youtubeGalleryModule__title--1,
body.zh-cn .youtubeGalleryModule__title--1 {
    font-size: calc(var(--tagline-size)*.75)
}

body.jp .youtubeGalleryModule__title--1 {
    font-size: calc(var(--tagline-size)*.6)
}

.youtubeGalleryModule__title :last-child {
    margin-bottom: 10px
}

.youtubeGalleryModule__gallery {
    grid-gap: 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 950px;
    width: 100%
}

@media(min-width:48em) {
    .youtubeGalleryModule__gallery {
        grid-template-columns: repeat(2, 1fr)
    }
}

.youtubeGalleryModule__gallery>div {
    height: 100%
}

.youtubeGalleryModule__gallery>div[data-is-featured=true] {
    grid-column: 1/-1
}

.youtubeGalleryModule__card {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: hsla(0, 0%, 100%, .2);
    border-radius: 8px;
    box-shadow: 0 14.3px 23.4px 0 rgba(3, 0, 9, .25);
    flex-shrink: 0;
    height: 100%;
    outline: 2px solid rgba(0, 0, 0, .2);
    outline-offset: -2px;
    overflow: hidden;
    width: 100%
}

.youtubeGalleryModule__card--video-player {
    box-shadow: 0 13.106px 28.397px 0 rgba(0, 0, 0, .35)
}

.youtubeGalleryModule__card--body {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: center;
    justify-content: space-between;
    padding: 16px
}

@media(min-width:64em) {
    .youtubeGalleryModule__card--body {
        gap: 60px;
        padding: 20px
    }
}

.youtubeGalleryModule__card--body--titles {
    align-self: flex-start;
    display: flex;
    flex-direction: column-reverse;
    gap: 4px
}

.youtubeGalleryModule__card--body--titles h4 {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase
}

body.tr .youtubeGalleryModule__card--body--titles h4 {
    text-transform: none
}

@media(min-width:64em) {
    .youtubeGalleryModule__card--body--titles h4 {
        font-size: 24px
    }
}

.youtubeGalleryModule__card--body--titles h6 {
    color: #fff;
    color: var(--clr-white);
    color: hsla(0, 0%, 100%, .6);
    color: var(--clr-white-60);
    font-family: Squad, sans-serif;
    font-size: 14px;
    font-weight: 900;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 100%;
    line-height: 120%
}

@media(min-width:64em) {
    .youtubeGalleryModule__card--body--titles h6 {
        font-size: 16px
    }
}

.youtubeGalleryModule__card--body--youtube {
    background: url(/img/youtube.36a60c8.png) no-repeat 50%;
    background-size: contain;
    flex-shrink: 0;
    height: 19px;
    transform: scale(1);
    transition: transform .2s cubic-bezier(.455, .03, .515, .955);
    width: 86px
}

@media(min-width:64em) {
    .youtubeGalleryModule__card--body--youtube {
        height: 25px;
        width: 112px
    }
}

.youtubeGalleryModule__card--body--youtube:hover {
    transform: scale(1.1)
}

.youtubeGalleryModule__card--body--youtube:active {
    transform: scale(.9)
}

.youtubeGalleryModule__bottomVault,
.youtubeGalleryModule__topVault {
    height: calc(50% + 52px);
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 100
}

.youtubeGalleryModule__bottomVault:before,
.youtubeGalleryModule__topVault:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1440' height='41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M471.337 31.438 1569 .017V47H-128V33.587l620.55-17.49-21.213 15.34Z' fill='%23000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1440px 41px;
    content: "";
    height: 52px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1
}

.youtubeGalleryModule__topVault {
    background: linear-gradient(180deg, #000 0, #000 calc(100% - 52px), transparent calc(100% - 50px), transparent);
    top: 0
}

.youtubeGalleryModule__topVault:before {
    background-position-x: 33%;
    background-position-y: bottom;
    bottom: 0;
    transform: rotate(180deg)
}

@media(min-width:1440px) {
    .youtubeGalleryModule__topVault:before {
        background-position-x: center;
        background-size: cover
    }
}

.youtubeGalleryModule__bottomVault {
    background: linear-gradient(0deg, #000 0, #000 calc(100% - 52px), transparent calc(100% - 50px), transparent);
    bottom: 0
}

.youtubeGalleryModule__bottomVault:before {
    background-position-x: 33%;
    background-position-y: bottom;
    top: 0
}

@media(min-width:1440px) {
    .youtubeGalleryModule__bottomVault:before {
        background-position-x: center;
        background-size: cover
    }
}

.youtubeGalleryModule__backgroundColor {
    background: linear-gradient(0deg, #06f, #003d99);
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    z-index: -3
}

.youtubeGalleryModule__backgroundFade {
    background: linear-gradient(180deg, #041ea8, rgba(28, 84, 228, 0) 25%);
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1
}

.youtubeGalleryModule__backgroundFade:after {
    background: linear-gradient(0deg, #051fa8 12%, rgba(28, 84, 228, 0));
    bottom: 0;
    content: "";
    height: 30%;
    left: 0;
    position: absolute;
    width: 100%
}

.youtubeVideo {
    padding-bottom: 56.25%
}

.youtubeVideo__cover {
    height: calc(100% + 2px);
    top: -1px
}

.youtubeVideo__play {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iNjYiIHZpZXdCb3g9IjAgMCA2NSA2NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMzIuNTk1MyIgY3k9IjMyLjk5OTYiIHI9IjMyLjQiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNMjYuNzEwOSAyNC4zNDEyQzI2LjcxMDkgMjMuNDAyMiAyNy43Mzg0IDIyLjgyNDkgMjguNTQwNCAyMy4zMTMzTDQyLjg1OTMgMzIuMDMzNUM0My4xOTYyIDMyLjIzODcgNDMuNDAxOCAzMi42MDQ3IDQzLjQwMTggMzIuOTk5MlYzMi45OTkyQzQzLjQwMTggMzMuMzkzNyA0My4xOTYyIDMzLjc1OTcgNDIuODU5MyAzMy45NjVMMjguNTQwNCA0Mi42ODUxQzI3LjczODQgNDMuMTczNSAyNi43MTA5IDQyLjU5NjIgMjYuNzEwOSA0MS42NTcyVjI0LjM0MTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    box-shadow: none;
    height: 50px;
    opacity: .9;
    width: 50px
}

@media(min-width:48em) {
    .youtubeVideo__play {
        height: 65px;
        width: 65px
    }
}

@media(min-width:64em) {
    .youtubeVideo__play {
        height: 70px;
        width: 70px
    }
}

.formModule {
    z-index: 1
}

.formModule,
.formModule__backgroundImageWrapper {
    overflow: hidden
}

.formModule__backgroundImage {
    opacity: .07;
    transform: scale(1.2)
}

.formModule__backgroundColor {
    background: linear-gradient(180deg, #003d99, #06f);
    background: var(--clr-gradient-blue);
    z-index: -3
}

.formModule__backgroundFade {
    background: linear-gradient(180deg, #041ea8 4%, rgba(10, 43, 182, .77) 10.75%, rgba(28, 84, 228, 0) 25%);
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1
}

.formModule__backgroundFade:after {
    background: linear-gradient(0deg, #0268ff 40.61%, rgba(28, 84, 228, 0));
    bottom: 0;
    content: "";
    height: 30%;
    left: 0;
    position: absolute;
    width: 100%
}

.formModule .block {
    position: relative
}

.formModule__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 700px;
    min-height: 770px;
    padding: 120px 0
}

@media(min-width:48em) {
    .formModule__main {
        padding: 135px 0
    }
}

@media(min-width:64em) {
    .formModule__main {
        max-width: 40vw;
        padding: 155px 0
    }
}

@media(min-width:90em) {
    .formModule__main {
        max-width: 600px;
        padding: 180px 0
    }
}

@media(min-width:112.5em) {
    .formModule__main {
        padding: 10vw 0
    }
}

.formModule__outer-decoration {
    display: none
}

@media(min-width:64em) {
    .formModule__outer-decoration {
        display: block
    }
}

.formModule__outer-decoration[data-nth="0"] {
    bottom: auto;
    left: 0;
    right: auto;
    top: 100%;
    transform: translateX(-35%) translateY(-60%)
}

.formModule__outer-decoration[data-nth="0"] img {
    width: 425px
}

@media(min-width:64em) {
    .formModule__outer-decoration[data-nth="0"] img {
        width: 525px
    }
}

.formModule__outer-decoration[data-nth="1"] {
    bottom: auto;
    left: auto;
    right: 0;
    top: 0;
    transform: translateX(25%) translateY(-15%)
}

.formModule__outer-decoration[data-nth="1"] img {
    width: 400px
}

@media(min-width:90em) {
    .formModule__outer-decoration[data-nth="1"] img {
        width: 475px
    }
}

.formModule__textWrapper,
.formModule__title {
    margin-bottom: 16px;
    padding-bottom: 0
}

@media(min-width:48em) {

    .formModule__textWrapper,
    .formModule__title {
        margin-bottom: 24px
    }
}

.formModule__inputWrapper {
    row-gap: 16px
}

@media(min-width:48em) {
    .formModule__inputWrapper {
        row-gap: 24px
    }
}

.formModule__country {
    color: #fff;
    color: var(--clr-white)
}

.formModule__locationWrapper path {
    fill: #fff;
    fill: var(--clr-white)
}

.formModule--isModal {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-bottom: 40px;
    padding-top: 260px
}

.formModule--isModal .block {
    width: 100%
}

@media(min-width:48em) {
    .formModule--isModal {
        padding-bottom: 60px;
        padding-top: 150px
    }
}

.formModule__titlesWrapper {
    max-width: 400px
}

.formModule__modalSection {
    --tagline-size: 140px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative
}

@media(min-width:48em) {
    .formModule__modalSection {
        --tagline-size: 220px
    }
}

@media(min-width:64em) {
    .formModule__modalSection {
        --tagline-size: 250px
    }
}

.formModule__modalSection--titles {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    justify-content: center;
    margin-bottom: 230px;
    padding-right: 6%;
    position: relative;
    transform: rotate(-3.75deg)
}

body.kr .formModule__modalSection--titles {
    gap: 20px
}

@media(min-width:48em) {
    body.kr .formModule__modalSection--titles {
        gap: 60px
    }
}

@media(max-height:700px) {
    .formModule__modalSection--titles {
        margin-bottom: 250px
    }
}

.formModule__modalSection--titles--reverse {
    display: flex;
    flex-direction: column;
    padding-bottom: 50px
}

@media(min-width:48em) {
    .formModule__modalSection--titles {
        margin-bottom: 60px
    }
}

.formModule__modalSection--titles h2 {
    text-wrap: nowrap;
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: var(--tagline-size);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    text-align: center;
    text-transform: uppercase
}

body.tr .formModule__modalSection--titles h2 {
    text-transform: none
}

body.cn .formModule__modalSection--titles h2,
body.jp .formModule__modalSection--titles h2,
body.kr .formModule__modalSection--titles h2,
body.zh-cn .formModule__modalSection--titles h2 {
    letter-spacing: .02em;
    line-height: 110%
}

.formModule__modalSection--titles h4 {
    text-wrap: nowrap;
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: calc(var(--tagline-size)/3.3);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    margin-left: 10%;
    text-align: center;
    text-transform: uppercase;
    width: 110%
}

body.tr .formModule__modalSection--titles h4 {
    text-transform: none
}

body.cn .formModule__modalSection--titles h4,
body.jp .formModule__modalSection--titles h4,
body.kr .formModule__modalSection--titles h4,
body.zh-cn .formModule__modalSection--titles h4 {
    letter-spacing: .02em;
    line-height: 110%
}

body.kr .formModule__modalSection--titles h4 {
    font-size: calc(var(--tagline-size))
}

body.es .formModule__modalSection--titles h4,
body.it .formModule__modalSection--titles h4,
body.pt .formModule__modalSection--titles h4,
body.ru .formModule__modalSection--titles h4 {
    font-size: calc(var(--tagline-size)/2)
}

.formModule__modalSection--titles--decoration {
    aspect-ratio: 1/1;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-min-content;
    width: min-content
}

.formModule__modalSection--titles--decoration img {
    margin-bottom: 0;
    max-width: none;
    width: 100%
}

.formModule__modalSection--titles--decoration--0 {
    bottom: 0;
    left: 0;
    transform: scaleX(-1) translateY(95%) translateX(26%);
    width: 220px;
    z-index: 10
}

@media(max-height:700px) {
    .formModule__modalSection--titles--decoration--0 {
        transform: scaleX(-1) translateY(106%) translateX(26%)
    }
}

@media(min-width:48em) {
    .formModule__modalSection--titles--decoration--0 {
        transform: scaleX(-1) translateY(80%) translateX(50%)
    }
}

@media(min-width:64em) {
    .formModule__modalSection--titles--decoration--0 {
        transform: scaleX(-1) translateY(90%) translateX(50%);
        width: 260px
    }
}

.formModule__modalSection--titles--decoration--0:after {
    aspect-ratio: 265/59;
    background: url(/img/shadow.3a52cf4.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    height: auto;
    left: 25%;
    position: absolute;
    transform: translateY(30%) rotate(4deg);
    transform: translateY(0) rotate(-2deg);
    width: 50%
}

.formModule__modalSection--titles--decoration--1 {
    bottom: 0;
    right: 0;
    transform: translateY(85%) translateX(20%);
    width: 250px;
    z-index: 12
}

@media(max-height:700px) {
    .formModule__modalSection--titles--decoration--1 {
        transform: translateY(95%) translateX(20%)
    }
}

@media(min-width:48em) {
    .formModule__modalSection--titles--decoration--1 {
        transform: translateY(80%) translateX(40%)
    }
}

@media(min-width:64em) {
    .formModule__modalSection--titles--decoration--1 {
        width: 350px
    }
}

.formModule__modalSection--titles--decoration--1:after {
    aspect-ratio: 265/59;
    background: url(/img/shadow.3a52cf4.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    height: auto;
    left: 25%;
    position: absolute;
    transform: translateY(30%) rotate(4deg);
    width: 50%
}

.formModule__modalSection--titles--decoration--2 {
    right: 0;
    top: 0;
    transform: translateY(-85%) translateX(33%);
    width: 276px;
    z-index: 11
}

@media(min-width:30em) {
    .formModule__modalSection--titles--decoration--2 {
        transform: translateY(-75%) translateX(60%)
    }
}

@media(min-width:48em) {
    .formModule__modalSection--titles--decoration--2 {
        transform: translateY(0) translateX(69%)
    }
}

@media(min-width:64em) {
    .formModule__modalSection--titles--decoration--2 {
        width: 330px
    }
}

.formModule__modalSection--ctas {
    margin-bottom: 20px;
    z-index: 10
}

@media(min-width:48em) {
    .formModule__modalSection--ctas {
        margin-bottom: 100px;
        position: relative
    }
}

.formModule__modalSection--ctas .formModule__calendarButton {
    cursor: pointer;
    height: 60px;
    left: 0;
    position: absolute;
    top: -220px;
    width: 60px
}

@media(min-width:48em) {
    .formModule__modalSection--ctas .formModule__calendarButton {
        height: var(--btn-height);
        left: auto;
        right: 0;
        top: 0;
        transform: translateX(calc(8px + 100%));
        width: var(--btn-height)
    }
}

.formModule__modalSection--ctas .formModule__calendarButton:hover:after {
    transform: scale(1.1)
}

.formModule__modalSection--ctas .formModule__calendarButton:active:after {
    transform: scale(.9)
}

.formModule__modalSection--ctas .formModule__calendarButton:after {
    background: url(/img/calendar.383219a.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: transform .2s cubic-bezier(.455, .03, .515, .955)
}

.formModule__modalSection:before {
    background: #b5e6fa;
    border-radius: 100%;
    bottom: 0;
    content: "";
    filter: blur(60px);
    height: 30%;
    left: 0;
    mix-blend-mode: overlay;
    position: absolute;
    width: 100%;
    z-index: -1
}

@media(min-width:90em) {
    .formModule__modalSection:before {
        left: 12.5%;
        width: 75%
    }
}

.formModule__social {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center
}

@media(min-width:48em) {
    .formModule__social {
        gap: 16px
    }
}

.formModule__social--label {
    color: hsla(0, 0%, 100%, .8);
    color: var(--clr-white-80);
    text-align: center;
    text-transform: uppercase
}

.formModule__social--icons {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: center
}

.formModule__socialIcon {
    display: inline-block;
    height: 24px;
    width: 24px
}

.formModule__socialIcon--logo {
    display: inline-block;
    height: 38px;
    margin-right: 8px;
    width: 47px
}

@media(min-width:48em) {
    .formModule__socialIcon--logo {
        margin-right: 0
    }
}

.formModule__socialIcon--last {
    margin-right: 0
}

.socialsModule {
    z-index: 1
}

.socialsModule,
.socialsModule__backgroundImageWrapper {
    overflow: hidden
}

.socialsModule__backgroundImage {
    opacity: .07;
    transform: scale(1.2)
}

.socialsModule__backgroundColor {
    background: linear-gradient(180deg, #003d99, #06f);
    background: var(--clr-gradient-blue);
    z-index: -3
}

.socialsModule__backgroundFade {
    background: linear-gradient(180deg, #041ea8 4%, rgba(10, 43, 182, .77) 10.75%, rgba(28, 84, 228, 0) 25%);
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1
}

.socialsModule__backgroundFade:after {
    background: linear-gradient(0deg, #0268ff 40.61%, rgba(28, 84, 228, 0));
    bottom: 0;
    content: "";
    height: 30%;
    left: 0;
    position: absolute;
    width: 100%
}

.socialsModule .block {
    position: relative
}

.socialsModule__titlesWrapper {
    max-width: 400px
}

.socialsModule__modalSection {
    --tagline-size: 140px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 48px;
    position: relative
}

@media(min-width:48em) {
    .socialsModule__modalSection {
        --tagline-size: 220px;
        min-height: 100vh;
        min-height: 100svh
    }
}

@media(min-width:64em) {
    .socialsModule__modalSection {
        --tagline-size: 250px
    }
}

.socialsModule__modalSection--titles {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    margin-bottom: 230px;
    padding-right: 6%;
    position: relative;
    transform: rotate(-3.75deg)
}

@media(max-width:47.99em) {
    .socialsModule__modalSection--titles {
        margin-bottom: 300px;
        margin-top: 300px
    }
}

.socialsModule__modalSection--titles>div {
    align-items: center;
    display: flex;
    justify-content: center
}

@media(max-height:700px) {
    .socialsModule__modalSection--titles {
        margin-bottom: 250px
    }
}

.socialsModule__modalSection--titles--reverse {
    display: flex;
    flex-direction: column;
    padding-bottom: 50px
}

@media(min-width:48em) {
    .socialsModule__modalSection--titles {
        gap: 20px;
        margin-bottom: 60px
    }
}

body.id .socialsModule__modalSection--titles span,
body.pt .socialsModule__modalSection--titles span,
body.ru .socialsModule__modalSection--titles span {
    line-height: 100%
}

body.cn .socialsModule__modalSection--titles span,
body.jp .socialsModule__modalSection--titles span,
body.kr .socialsModule__modalSection--titles span,
body.zh-cn .socialsModule__modalSection--titles span {
    line-height: 110%
}

.socialsModule__modalSection--titles h2 {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: var(--tagline-size);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase
}

body.tr .socialsModule__modalSection--titles h2 {
    text-transform: none
}

body.cn .socialsModule__modalSection--titles h2,
body.jp .socialsModule__modalSection--titles h2,
body.kr .socialsModule__modalSection--titles h2,
body.zh-cn .socialsModule__modalSection--titles h2 {
    letter-spacing: .02em;
    line-height: 110%
}

.socialsModule__modalSection--titles h4 {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: calc(var(--tagline-size)/3.3);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    width: 110%
}

body.tr .socialsModule__modalSection--titles h4 {
    text-transform: none
}

body.cn .socialsModule__modalSection--titles h4,
body.jp .socialsModule__modalSection--titles h4,
body.kr .socialsModule__modalSection--titles h4,
body.zh-cn .socialsModule__modalSection--titles h4 {
    letter-spacing: .02em;
    line-height: 110%
}

body.pl .socialsModule__modalSection--titles h4 {
    font-size: calc(var(--tagline-size))
}

body.es .socialsModule__modalSection--titles h4,
body.pt .socialsModule__modalSection--titles h4,
body.ru .socialsModule__modalSection--titles h4,
body.tr .socialsModule__modalSection--titles h4 {
    font-size: calc(var(--tagline-size)/2)
}

body.fr .socialsModule__modalSection--titles h4 {
    position: relative;
    z-index: 5
}

.socialsModule__modalSection--titles--decoration {
    aspect-ratio: 1/1;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-min-content;
    width: min-content
}

.socialsModule__modalSection--titles--decoration img {
    margin-bottom: 0;
    max-width: none;
    width: 100%
}

.socialsModule__modalSection--titles--decoration--0 {
    bottom: 0;
    left: 0;
    transform: scaleX(-1) translateY(95%) translateX(26%);
    width: 220px;
    z-index: 10
}

@media(max-height:700px) {
    .socialsModule__modalSection--titles--decoration--0 {
        transform: scaleX(-1) translateY(106%) translateX(26%)
    }
}

@media(min-width:48em) {
    .socialsModule__modalSection--titles--decoration--0 {
        transform: scaleX(-1) translateY(80%) translateX(50%)
    }
}

@media(min-width:64em) {
    .socialsModule__modalSection--titles--decoration--0 {
        transform: scaleX(-1) translateY(90%) translateX(55%);
        width: 260px
    }
}

.socialsModule__modalSection--titles--decoration--0:after {
    aspect-ratio: 265/59;
    background: url(/img/shadow.3a52cf4.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    height: auto;
    left: 25%;
    position: absolute;
    transform: translateY(30%) rotate(4deg);
    transform: translateY(0) rotate(-2deg);
    width: 50%
}

.socialsModule__modalSection--titles--decoration--1 {
    bottom: 0;
    right: 0;
    transform: translateY(105%) translateX(20%);
    width: 250px;
    z-index: 12
}

@media(max-height:700px) {
    .socialsModule__modalSection--titles--decoration--1 {
        transform: translateY(95%) translateX(20%)
    }
}

@media(min-width:48em) {
    .socialsModule__modalSection--titles--decoration--1 {
        transform: translateY(90%) translateX(70%)
    }
}

@media(min-width:64em) {
    .socialsModule__modalSection--titles--decoration--1 {
        width: 350px
    }
}

@media(min-width:90em) {
    .socialsModule__modalSection--titles--decoration--1 {
        transform: translateY(90%) translateX(60%)
    }
}

.socialsModule__modalSection--titles--decoration--1:after {
    aspect-ratio: 265/59;
    background: url(/img/shadow.3a52cf4.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    height: auto;
    left: 25%;
    position: absolute;
    transform: translateY(30%) rotate(4deg);
    width: 50%
}

.socialsModule__modalSection--titles--decoration--2 {
    right: 0;
    top: 0;
    transform: translateY(-95%) translateX(33%);
    width: 276px;
    z-index: 11
}

@media(min-width:48em) {
    .socialsModule__modalSection--titles--decoration--2 {
        transform: translateY(-25%) translateX(85%)
    }
}

@media(min-width:64em) {
    .socialsModule__modalSection--titles--decoration--2 {
        width: 330px
    }
}

@media(min-width:90em) {
    .socialsModule__modalSection--titles--decoration--2 {
        transform: translateY(-15%) translateX(85%)
    }
}

.socialsModule__modalSection:before {
    background: #b5e6fa;
    border-radius: 100%;
    bottom: 0;
    content: "";
    filter: blur(60px);
    height: 30%;
    left: 0;
    mix-blend-mode: overlay;
    position: absolute;
    width: 100%;
    z-index: -1
}

@media(min-width:90em) {
    .socialsModule__modalSection:before {
        left: 12.5%;
        width: 75%
    }
}

.socialsModule__social {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    z-index: 1
}

@media(min-width:48em) {
    .socialsModule__social {
        gap: 16px
    }
}

.socialsModule__social--label {
    color: hsla(0, 0%, 100%, .8);
    color: var(--clr-white-80);
    text-align: center;
    text-transform: uppercase
}

.socialsModule__social--icons {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center
}

@media(min-width:48em) {
    .socialsModule__social--icons {
        gap: 34px
    }
}

.socialsModule__socialButton {
    --btn-height: 56px;
    --btn-border: 3px;
    --btn-radius: 50%;
    border: none;
    display: inline-block;
    height: 56px;
    height: var(--btn-height);
    position: relative;
    width: 56px;
    width: var(--btn-height)
}

@media(min-width:64em) {
    .socialsModule__socialButton {
        --btn-border: 3px;
        --btn-height: 72px
    }
}

.socialsModule__socialButton__bg,
.socialsModule__socialButton__main {
    border-radius: 10px;
    border-radius: var(--btn-radius, 10px)
}

.socialsModule__socialButton__main {
    align-items: center;
    box-shadow: 0 2px 0 #000;
    display: flex;
    height: 40px;
    height: var(--btn-height, 40px);
    justify-content: center;
    padding: 0
}

@media(min-width:48em) {
    .socialsModule__socialButton__main {
        height: 50px;
        height: var(--btn-height, 50px)
    }
}

@media(min-width:64em) {
    .socialsModule__socialButton__main {
        box-shadow: 0 3px 0 #000;
        height: 64px;
        height: var(--btn-height, 64px)
    }
}

.socialsModule--disabled .socialsModule__socialButton__main,
.socialsModule--loading .socialsModule__socialButton__main,
.socialsModule__socialButton__main:active {
    box-shadow: none !important;
    transform: translateY(2px);
    transform: translateY(var(--btn-border, 2px))
}

.socialsModule__socialButton__main:after {
    background: 0 0;
    border-radius: calc(var(--btn-radius)*.9);
    bottom: var(--btn-border);
    content: "";
    left: var(--btn-border);
    position: absolute;
    right: var(--btn-border);
    top: var(--btn-border);
    transition: background-color .2s cubic-bezier(.455, .03, .515, .955);
    z-index: -1
}

.socialsModule__socialButton__main[disabled]:after {
    background: rgba(0, 0, 0, .2);
    z-index: 2
}

.socialsModule__socialButton__main:hover:not([disabled]):after {
    background: hsla(0, 0%, 100%, .2)
}

.socialsModule__socialButton__bg {
    background: #f56bff;
    border-color: #000;
    border-width: var(--btn-border);
    box-shadow: 0 calc(0px - var(--btn-border)) 0 rgba(102, 32, 149, .7) inset, 0 var(--btn-border) 0 hsla(0, 0%, 100%, .4) inset;
    height: 100%;
    overflow: hidden;
    position: absolute;
    transition: background-color .2s;
    width: 100%;
    z-index: -1
}

.socialsModule__socialButton__icon {
    height: 34px;
    width: 34px
}

.socialsModule__socialButton--over {
    box-shadow: none
}

.socialsModule__socialButton--instagram .socialsModule__socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.75 8a7 7 0 0 1 7-7h8a7 7 0 0 1 7 7v8a7 7 0 0 1-7 7h-8a7 7 0 0 1-7-7V8Zm11 7.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0 2a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm5.959-10.083a1.375 1.375 0 1 0 0-2.75 1.375 1.375 0 0 0 0 2.75Z' fill='%23000'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.socialsModule__socialButton--x .socialsModule__socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzgwMl8zNzYiIHN0eWxlPSJtYXNrLXR5cGU6bHVtaW5hbmNlIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPgo8cGF0aCBkPSJNMjEuMzgyMiAwSDAuMDI5Mjk2OVYyMkgyMS4zODIyVjBaIiBmaWxsPSJ3aGl0ZSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfODAyXzM3NikiPgo8cGF0aCBkPSJNMTIuNzM3OSA5LjMxMUwyMC42ODY1IDBIMTguODAyMUwxMS44OTk4IDguMDg0Nkw2LjM4NzE0IDBIMC4wMjkyOTY5TDguMzY1ODQgMTIuMjI0NkwwLjAyOTI5NjkgMjEuOTg5MkgxLjkxMzdMOS4yMDIxNyAxMy40NTFMMTUuMDI0NCAyMS45ODkySDIxLjM4MjJMMTIuNzM3OSA5LjMxMVpNMTAuMTU3NyAxMi4zMzIyTDkuMzEyNDkgMTEuMTE0OEwyLjU5MTY1IDEuNDI5MDFINS40ODQ5N0wxMC45MDg2IDkuMjQ2NDZMMTEuNzUzOSAxMC40NjM5TDE4LjgwMzkgMjAuNjI0OEgxNS45MTA2TDEwLjE1NzcgMTIuMzMyMloiIGZpbGw9ImJsYWNrIi8+CjwvZz4KPC9zdmc+Cg==);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.socialsModule__socialButton--tiktok .socialsModule__socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxOCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjEwNDggMEMxMy40NTA0IDMuMTI4MzcgMTUuMTA5IDQuOTg4NDggMTggNS4xODE3M1Y4LjY5NjYyQzE2LjMyOTkgOC44NjU3MiAxNC44NTU2IDguMjg1OTQgMTMuMTUwOSA3LjIxMDk0VjEzLjc2OTZDMTMuMTUwOSAyMi4xMTYgNC40Nzc4MyAyNC43MjUgMC45ODc4NjUgMTguNzQ2Qy0xLjI1ODE1IDE0LjkwNSAwLjExMjQ5NSA4LjE0MSA3LjMxMTI2IDcuODc1MjdWMTEuNTgzNEM2Ljc1ODQgMTEuNjggNi4xODI1IDExLjgyNSA1LjY0MTE1IDEyLjAwNjJDNC4wNDAxNCAxMi41NzM5IDMuMTQxNzQgMTMuNjM2OCAzLjM5NTEzIDE1LjUwOUMzLjg3ODg5IDE5LjA5NjMgMTAuMTY3NyAyMC4xNTkyIDkuNjM3OTEgMTMuMTQxNlYwSDEzLjEwNDhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.socialsModule__socialButton--youtube .socialsModule__socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAzMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIzMTEgMjIuOTY5OUwxMC40NjA4IDIyLjg0NTFDOC4yNjg2OSAyMi44MDE2IDYuMDcxMTYgMjIuODg4NCAzLjkyMjA2IDIyLjQzOEMwLjY1Mjc4NiAyMS43NjUxIDAuNDIxMTc5IDE4LjQ2NTYgMC4xNzg4MjcgMTUuNjk3OUMtMC4xNTUxMSAxMS44MDY5IC0wLjAyNTgzMjggNy44NDUzNCAwLjYwNDM0OSAzLjk4Njg0QzAuOTYwMTA3IDEuODIxODIgMi4zNjAxNiAwLjUyOTkzNCA0LjUyNTMgMC4zODkzNTJDMTEuODM0MiAtMC4xMjA4MzkgMTkuMTkxNyAtMC4wNjAzNzYzIDI2LjQ4NDUgMC4xNzc2NDZDMjcuMjU0NyAwLjE5OTQ2NyAyOC4wMzAyIDAuMzE4NzI4IDI4Ljc4OTYgMC40NTQ0NzlDMzIuNTM4NSAxLjExNjU4IDMyLjYyOTkgNC44NTU2NSAzMi44NzI5IDguMDAzMjVDMzMuMTE1MiAxMS4xODMzIDMzLjAxMjkgMTQuMzc5NyAzMi41NDk3IDE3LjUzODJDMzIuMTc4MSAyMC4xNTMyIDMxLjQ2NzEgMjIuMzQ2MiAyOC40NjY0IDIyLjU1NzlDMjQuNzA2OCAyMi44MzQ4IDIxLjAzMzUgMjMuMDU3NiAxNy4yNjMzIDIyLjk4NjdDMTcuMjYzNSAyMi45Njk5IDE3LjI0MTggMjIuOTY5OSAxNy4yMzExIDIyLjk2OTlaTTEzLjI1MDggMTYuMzQ5MkMxNi4wODQgMTQuNzEwMiAxOC44NjMxIDEzLjA5ODUgMjEuNjgwMSAxMS40NzA1QzE4Ljg0MTYgOS44MzE0OCAxNi4wNjc4IDguMjE5NzggMTMuMjUwOCA2LjU5MTc3VjE2LjM0OTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.validationModal__closeArea {
    background: rgba(0, 0, 0, .7);
    width: 100%
}

.validationModal__closeArea:after {
    background: radial-gradient(transparent, rgba(0, 0, 0, .9));
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media(min-width:48em) {
    .validationModal__closeArea:before {
        aspect-ratio: 1/1;
        background-color: #3687ff;
        border-radius: 50%;
        content: "";
        filter: blur(250px);
        left: 50%;
        opacity: .8;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 660px
    }
}

.validationModal__closeArea:not(.validationModal__closeArea--isOpen):after,
.validationModal__closeArea:not(.validationModal__closeArea--isOpen):before {
    content: none
}

.validationModal__main {
    aspect-ratio: unset;
    background: linear-gradient(180deg, #003d99, #06f);
    background: var(--clr-gradient-blue);
    border: 8px solid #000;
    border: 8px solid var(--clr-black);
    box-shadow: inset 0 5px rgba(0, 0, 0, .25), 0 4px #000;
    height: auto;
    margin: 16px;
    margin: var(--indent);
    max-width: none;
    overflow: visible;
    overflow: initial;
    padding: 60px 26px 40px;
    position: relative
}

@media(min-width:48em) {
    .validationModal__main {
        max-width: 600px;
        padding: 80px 3% 65px
    }
}

@media(min-width:64em) {
    .validationModal__main {
        max-width: 640px;
        padding: 90px 3% 75px
    }
}

@media(min-width:90em) {
    .validationModal__main {
        max-width: 660px;
        padding: 100px 3% 90px
    }
}

.validationModal__main:before {
    background-image: url(/squad/bg-pattern.svg);
    background-position: 50%;
    bottom: 0;
    content: "";
    left: 0;
    opacity: .05;
    position: absolute;
    right: 0;
    top: 0
}

.validationModal__image {
    left: 50%;
    max-width: none;
    position: absolute;
    top: 0;
    transform: translate(-50%, calc(-50% + 10px));
    width: 160px
}

@media(min-width:48em) {
    .validationModal__image {
        width: 180px
    }
}

@media(min-width:64em) {
    .validationModal__image {
        width: 194px
    }
}

.validationModal__closeButton {
    border: initial;
    height: 24px;
    right: 25px;
    top: 25px;
    width: 24px
}

.validationModal__closeButton svg {
    fill: #fff
}

.validationModal__description {
    margin-top: 8px
}

@media(min-width:48em) {
    .validationModal__description {
        margin-top: 12px
    }
}

.formModal {
    align-items: center;
    background: rgba(0, 0, 0, .7);
    bottom: 0;
    display: flex;
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    max-height: 100vh;
    max-height: 100svh;
    pointer-events: all;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 100000
}

.formModal--isOpen {
    display: flex
}

.formModal__main {
    background: linear-gradient(180deg, #003d99, #06f);
    background: var(--clr-gradient-blue);
    border: 3px solid #4d95ea;
    border-radius: 16px;
    overflow: hidden;
    padding: 50px 20px 20px;
    pointer-events: all;
    position: relative;
    width: 100%;
    z-index: 10
}

@media(min-width:48em) {
    .formModal__main {
        padding: 70px 40px 40px;
        width: -moz-fit-content;
        width: fit-content
    }
}

.formModal__main .formModule__main,
.formModal__main .validationModal__main {
    min-height: 0;
    min-height: auto;
    padding: initial
}

.formModal__main .formModule__title,
.formModal__main .validationModal__title {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 42px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    text-transform: uppercase
}

body.tr .formModal__main .formModule__title,
body.tr .formModal__main .validationModal__title {
    text-transform: none
}

body.cn .formModal__main .formModule__title,
body.cn .formModal__main .validationModal__title,
body.jp .formModal__main .formModule__title,
body.jp .formModal__main .validationModal__title,
body.kr .formModal__main .formModule__title,
body.kr .formModal__main .validationModal__title,
body.zh-cn .formModal__main .formModule__title,
body.zh-cn .formModal__main .validationModal__title {
    letter-spacing: .02em;
    line-height: 110%
}

@media(min-width:48em) {

    .formModal__main .formModule__title,
    .formModal__main .validationModal__title {
        font-size: 56px
    }
}

.formModal__main .formModule__description,
.formModal__main .validationModal__description {
    max-width: 400px
}

.formModal__main .validationContent {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 400px;
    text-align: center
}

.formModal__main:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='537' height='335' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:overlay' filter='url(%23a)'%3E%3Cellipse cx='115.5' cy='256' rx='676.5' ry='112' fill='%23B5E6FA'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' x='-705' y='0' width='1641' height='512' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='72' result='effect1_foregroundBlur_1624_92742'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    filter: blur(85px);
    height: 25%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1
}

.formModal__main:after {
    background-image: url(/squad/bg-pattern.svg);
    background-position: -100% -100%;
    background-size: 400%;
    bottom: 0;
    content: "";
    left: 0;
    opacity: .05;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -2
}

.formModal__closeButton {
    background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.77344 2.77539L13.8779 13.8799' stroke='white' stroke-opacity='0.6' stroke-width='2'/%3E%3Cpath d='M13.8828 2.77539L2.77833 13.8799' stroke='white' stroke-opacity='0.6' stroke-width='2'/%3E%3C/svg%3E%0A");
    content: "";
    cursor: pointer;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 20px;
    transition: transform .2s cubic-bezier(.455, .03, .515, .955);
    width: 16px
}

.formModal__closeButton:hover {
    transform: scale(1.1)
}

.formModal__closeButton:active {
    transform: scale(1)
}

.qrModal {
    align-items: center;
    background: rgba(0, 0, 0, .7);
    bottom: 0;
    display: flex;
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: all;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 100000
}

.qrModal--isOpen {
    display: flex
}

.qrModal__main {
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(225, 47, 240, .6);
    border: 3px solid #d04cff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    min-width: 260px;
    padding: 40px 12px;
    pointer-events: all;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 10
}

.qrModal__qrCode {
    border-radius: 6px;
    height: 200px;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 200px
}

.qrModal__label {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 80%;
    pointer-events: none;
    text-transform: uppercase
}

body.tr .qrModal__label {
    text-transform: none
}

.qrModal__close {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 16px;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 16px;
    transition: transform .2s;
    width: 16px
}

.qrModal__close:hover {
    transform: scale(1.1)
}

.qrModal__close:active {
    transform: scale(.9)
}

.qrModal__close:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='17' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.305 3.275 14.409 14.38M14.414 3.275 3.31 14.38' stroke='%23fff' stroke-opacity='.6' stroke-width='2'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10
}

.textModule {
    overflow: hidden;
    padding: 150px 16px;
    padding: 150px var(--indent);
    position: relative
}

@media(min-width:64em) {
    .textModule {
        overflow: visible
    }
}

@media(min-width:48em) {
    .textModule {
        padding: 180px 16px;
        padding: 180px var(--indent)
    }
}

@media(min-width:64em) {
    .textModule {
        padding: 225px 16px;
        padding: 225px var(--indent)
    }
}

@media(min-width:90em) {
    .textModule {
        padding: 225px 16px;
        padding: 225px var(--indent)
    }
}

@media(min-width:112.5em) {
    .textModule {
        padding: 12vw 16px;
        padding: 12vw var(--indent)
    }
}

.textModule__decoration {
    display: none
}

@media(min-width:64em) {
    .textModule__decoration {
        display: block;
        position: absolute;
        z-index: 100
    }
}

.textModule__decoration--0 {
    bottom: auto;
    left: 0;
    right: auto;
    top: 100%;
    transform: translateX(-35%) translateY(-15%)
}

.textModule__decoration--0 img {
    width: 425px
}

@media(min-width:64em) {
    .textModule__decoration--0 img {
        width: 525px
    }
}

.textModule__decoration--1 {
    bottom: auto;
    left: auto;
    right: 0;
    top: 0;
    transform: translateX(25%) translateY(-65%)
}

.textModule__decoration--1 img {
    width: 400px
}

@media(min-width:90em) {
    .textModule__decoration--1 img {
        width: 475px
    }
}

.textModule__backgroundColor {
    background: linear-gradient(180deg, #7900ea, #ca56f2);
    background: var(--clr-gradient-purple)
}

.textModule .block {
    padding: 0
}

.textModule__background {
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

.textModule__backgroundImage {
    bottom: 0;
    left: 0;
    opacity: .07;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

@media(min-width:64em) {
    .textModule__backgroundImage {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
        height: 120%;
        transform: none;
        width: 120%
    }
}

.textModule__box {
    --top-size: 37px;
    background-color: rgba(0, 0, 0, .7);
    border: 2px solid #000;
    border: 2px solid var(--clr-black);
    border-radius: 16px;
    margin: auto;
    max-width: 920px;
    padding: 87px 20px 40px;
    position: relative
}

@media(min-width:48em) {
    .textModule__box {
        padding: 107px 10% 70px
    }
}

.textModule__box:before {
    background-color: #000;
    background-color: var(--clr-black);
    border-radius: 16px 16px 0 0;
    content: "";
    height: var(--top-size);
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.textModule__image {
    left: 50%;
    position: absolute;
    top: 0;
    transform: translate(-50%, calc(-50% + var(--top-size)/ 2));
    width: 88px
}

@media(min-width:48em) {
    .textModule__image {
        width: 120px
    }
}

.textModule__headline {
    -webkit-text-stroke: unset;
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 24px;
    font-weight: 900;
    font-weight: 850;
    line-height: 100%;
    line-height: 130%;
    margin-bottom: 10px;
    text-shadow: inherit
}

@media(min-width:64em) {
    .textModule__headline {
        font-size: 28px
    }
}

@media(min-width:90em) {
    .textModule__headline {
        font-size: 30px
    }
}

.textModule__footNote {
    font-family: Squad, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 150%
}

@media(min-width:30em) {
    .textModule__footNote {
        font-size: 14px
    }
}

@media(min-width:90em) {
    .textModule__footNote {
        font-size: 16px
    }
}

.recaptcha {
    border-radius: 8px;
    color: #fff;
    color: var(--clr-white);
    transform: scale(.8)
}

.recaptcha a {
    color: #334cb1
}

.recaptcha__text {
    color: #fff;
    color: var(--clr-white);
    color: #000;
    color: var(--clr-black);
    font-family: Squad, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 110%
}

@media(min-width:30em) {
    .recaptcha__text {
        font-size: 16px;
        font-size: 15px
    }
}

.error-page {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 10px
}

.error-page h1 {
    color: #fff;
    color: var(--clr-white, #fff);
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 25vw;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    line-height: 80%;
    text-shadow: -.08em -.08em 0 #000, .08em -.08em 0 #000, -.08em .08em 0 #000, .08em .08em 0 #000;
    text-shadow: -.08em -.08em 0 var(--clr-black, #000), .08em -.08em 0 var(--clr-black, #000), -.08em .08em 0 var(--clr-black, #000), .08em .08em 0 var(--clr-black, #000);
    text-transform: uppercase
}

@supports((-webkit-text-stroke-color:var(--clr-black, black)) and (-webkit-text-fill-color:white)) or ((-moz-text-stroke-color:var(--clr-black, black)) and (-moz-text-fill-color:white)) {
    .error-page h1 {
        -moz-text-fill-color: #fff;
        -moz-text-fill-color: var(--clr-white, #fff);
        -webkit-text-fill-color: #fff;
        -webkit-text-fill-color: var(--clr-white, #fff);
        -moz-text-stroke-color: #000;
        -moz-text-stroke-color: var(--clr-black, #000);
        -webkit-text-stroke-color: #000;
        -webkit-text-stroke-color: var(--clr-black, #000);
        -moz-text-stroke-width: .04em;
        -webkit-text-stroke-width: .04em;
        color: inherit;
        text-shadow: inherit;
        text-shadow: -.01716em .0375em 0 #000, .00759em .0375em 0 #000;
        text-shadow: -.01716em .0375em 0 var(--clr-black, #000), .00759em .0375em 0 var(--clr-black, #000)
    }
}

@supports(-webkit-appearance:none) and (stroke-color:transparent) {
    .error-page h1 {
        text-shadow: -.01em .03em 0 #000;
        text-shadow: -.01em .03em 0 var(--clr-black, #000)
    }
}

@supports(text-shadow:0 0 0.08em var(--clr-black, black)) and (paint-order:stroke fill) and (-webkit-text-stroke:0.08em var(--clr-black, black)) {
    body:not(.no-stroke-support) .error-page h1 {
        -webkit-text-stroke: .08em #000;
        -webkit-text-stroke: .08em var(--clr-black, #000);
        -moz-text-stroke-width: .08em;
        -webkit-text-stroke-width: .08em;
        paint-order: stroke fill;
        text-shadow: -.056em .08em 0 #000, .023em .08em 0 #000;
        text-shadow: -.056em .08em 0 var(--clr-black, #000), .023em .08em 0 var(--clr-black, #000)
    }
}

@supports(-webkit-appearance:none) and (stroke-color:transparent) {
    body:not(.no-stroke-support) .error-page h1 {
        text-shadow: -.01em .03em 0 #000;
        text-shadow: -.01em .03em 0 var(--clr-black, #000)
    }
}

body.tr .error-page h1 {
    text-transform: none
}

body.cn .error-page h1,
body.jp .error-page h1,
body.kr .error-page h1,
body.zh-cn .error-page h1 {
    letter-spacing: .02em;
    line-height: 110%
}

@media(min-width:90em) {
    .error-page h1 {
        font-size: 280px
    }
}

.error-page h5 {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 150%;
    text-align: center
}

@media(min-width:30em) {
    .error-page h5 {
        font-size: 14px
    }
}

@media(min-width:90em) {
    .error-page h5 {
        font-size: 16px
    }
}

.error-page__backgroundImage {
    opacity: .07
}

.error-page__backgroundColor {
    background: linear-gradient(180deg, #003d99, #06f);
    background: var(--clr-gradient-blue)
}

.error-page .defaultButton {
    margin-top: 32px
}

.tooltip {
    display: block !important;
    z-index: 10000
}

.tooltip .tooltip-inner {
    background: #4e0262;
    border-radius: 16px;
    color: hsla(0, 0%, 100%, .8);
    color: var(--clr-white-80, #fff);
    font-size: 12px;
    line-height: 110%;
    padding: 8px 16px;
    text-transform: uppercase
}

body.tr .tooltip .tooltip-inner {
    text-transform: none
}

.tooltip .tooltip-arrow {
    border-color: #4e0262;
    border-style: solid;
    height: 0;
    margin: 5px;
    position: absolute;
    width: 0;
    z-index: 1
}

.tooltip[x-placement^=top] {
    margin-bottom: 5px
}

.tooltip[x-placement^=top] .tooltip-arrow {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-width: 5px 5px 0;
    bottom: -5px;
    margin-bottom: 0;
    margin-top: 0;
    right: 20px
}

.tooltip[x-placement^=bottom] {
    margin-top: 5px
}

.tooltip[x-placement^=bottom] .tooltip-arrow {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    border-width: 0 5px 5px;
    margin-bottom: 0;
    margin-top: 0;
    right: 20px;
    top: -5px
}

.tooltip[x-placement^=right] {
    margin-left: 5px
}

.tooltip[x-placement^=right] .tooltip-arrow {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-width: 5px 5px 5px 0;
    left: -5px;
    margin-left: 0;
    margin-right: 0;
    top: 20px
}

.tooltip[x-placement^=left] {
    margin-right: 5px
}

.tooltip[x-placement^=left] .tooltip-arrow {
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    border-width: 5px 0 5px 5px;
    margin-left: 0;
    margin-right: 0;
    right: -5px;
    top: 20px
}

.tooltip.popover .popover-inner {
    background: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
    color: #000;
    padding: 24px
}

.tooltip.popover .popover-arrow {
    border-color: #f9f9f9
}

.tooltip[aria-hidden=true] {
    opacity: 0;
    transition: opacity .15s, visibility .15s;
    visibility: hidden
}

.tooltip[aria-hidden=false] {
    opacity: 1;
    transition: opacity .15s;
    visibility: visible
}

.outlined-text {
    --outline-size: 0.1em;
    color: #fff;
    color: var(--clr-white);
    display: block;
    font-family: Squad, sans-serif;
    font-weight: 900;
    line-height: 100%;
    position: relative;
    text-transform: uppercase
}

body.tr .outlined-text {
    text-transform: none
}

body:not(.no-stroke-support) .outlined-text {
    -webkit-text-stroke: var(--outline-size) #000;
    -webkit-text-stroke: var(--outline-size) var(--outline-color, var(--clr-black));
    -moz-text-stroke-width: var(--outline-size);
    -webkit-text-stroke-width: var(--outline-size);
    color: #fff;
    color: var(--text-color, var(--clr-white));
    line-height: 80%;
    paint-order: stroke fill
}

body.no-stroke-support .outlined-text {
    color: #fff;
    color: var(--text-color, var(--clr-white));
    line-height: 75%;
    text-shadow: -var(--outline-size) -var(--outline-size) 0 #000, var(--outline-size) -var(--outline-size) 0 #000, -var(--outline-size) var(--outline-size) 0 #000, var(--outline-size) var(--outline-size) 0 #000;
    text-shadow: -var(--outline-size) -var(--outline-size) 0 var(--outline-color, var(--clr-black)), var(--outline-size) -var(--outline-size) 0 var(--outline-color, var(--clr-black)), -var(--outline-size) var(--outline-size) 0 var(--outline-color, var(--clr-black)), var(--outline-size) var(--outline-size) 0 var(--outline-color, var(--clr-black))
}

@supports((-webkit-text-stroke-color:var(--outline-color, var(--clr-black))) and (-webkit-text-fill-color:white)) or ((-moz-text-stroke-color:var(--outline-color, var(--clr-black))) and (-moz-text-fill-color:white)) {
    body.no-stroke-support .outlined-text {
        -moz-text-fill-color: #fff;
        -moz-text-fill-color: var(--text-color, var(--clr-white));
        -webkit-text-fill-color: #fff;
        -webkit-text-fill-color: var(--text-color, var(--clr-white));
        -moz-text-stroke-color: #000;
        -moz-text-stroke-color: var(--outline-color, var(--clr-black));
        -webkit-text-stroke-color: #000;
        -webkit-text-stroke-color: var(--outline-color, var(--clr-black));
        -moz-text-stroke-width: calc(var(--outline-size)*.5);
        -webkit-text-stroke-width: calc(var(--outline-size)*.5);
        color: inherit;
        text-shadow: inherit;
        text-shadow: calc(var(--outline-size)*-.65*.33) calc(var(--outline-size)*.625*.75) 0 #000, calc(var(--outline-size)*.2875*.33) calc(var(--outline-size)*.625*.75) 0 #000;
        text-shadow: calc(var(--outline-size)*-.65*.33) calc(var(--outline-size)*.625*.75) 0 var(--outline-color, var(--clr-black)), calc(var(--outline-size)*.2875*.33) calc(var(--outline-size)*.625*.75) 0 var(--outline-color, var(--clr-black))
    }
}

@supports(-webkit-appearance:none) and (stroke-color:transparent) {
    body.no-stroke-support .outlined-text {
        text-shadow: calc(var(--outline-size)*-.125) calc(var(--outline-size)*.375) 0 #000;
        text-shadow: calc(var(--outline-size)*-.125) calc(var(--outline-size)*.375) 0 var(--outline-color, var(--clr-black))
    }
}

@supports(text-shadow:0 0 var(--outline-size) var(--outline-color, var(--clr-black))) and (paint-order:stroke fill) and (-webkit-text-stroke:var(--outline-size) var(--outline-color, var(--clr-black))) {
    body:not(.no-stroke-support) body.no-stroke-support .outlined-text {
        -webkit-text-stroke: var(--outline-size) #000;
        -webkit-text-stroke: var(--outline-size) var(--outline-color, var(--clr-black));
        -moz-text-stroke-width: var(--outline-size);
        -webkit-text-stroke-width: var(--outline-size);
        paint-order: stroke fill;
        text-shadow: calc(var(--outline-size)*-.7) calc(var(--outline-size)*1) 0 #000, calc(var(--outline-size)*.2875) calc(var(--outline-size)*1) 0 #000;
        text-shadow: calc(var(--outline-size)*-.7) calc(var(--outline-size)*1) 0 var(--outline-color, var(--clr-black)), calc(var(--outline-size)*.2875) calc(var(--outline-size)*1) 0 var(--outline-color, var(--clr-black))
    }
}

@supports(-webkit-appearance:none) and (stroke-color:transparent) {
    body:not(.no-stroke-support) body.no-stroke-support .outlined-text {
        text-shadow: calc(var(--outline-size)*-.125) calc(var(--outline-size)*.375) 0 #000;
        text-shadow: calc(var(--outline-size)*-.125) calc(var(--outline-size)*.375) 0 var(--outline-color, var(--clr-black))
    }
}

body.cn .outlined-text,
body.jp .outlined-text,
body.ko .outlined-text,
body.zh-cn .outlined-text {
    line-height: 110%
}

.outlined-text__text {
    display: block;
    height: 100%;
    position: relative;
    width: 100%
}

.outlined-text__copy,
.outlined-text__copy--2 {
    display: block;
    height: 100%;
    left: auto;
    position: absolute;
    right: calc(var(--outline-size)*.1);
    top: calc(var(--outline-size)*.4);
    width: 100%;
    z-index: -1
}

body.no-stroke-support .outlined-text__copy,
body.no-stroke-support .outlined-text__copy--2 {
    display: none
}

.outlined-text__copy--2 {
    right: calc(var(--outline-size)*.15);
    top: calc(var(--outline-size)*.6);
    z-index: -2
}

body.de .outlined-text span,
body.es .outlined-text span,
body.fr .outlined-text span,
body.it .outlined-text span {
    line-height: 90%
}

body.cn .outlined-text span,
body.jp .outlined-text span,
body.kr .outlined-text span,
body.zh-cn .outlined-text span {
    line-height: 110%
}

.rewardTrackerModule {
    overflow: hidden;
    padding-bottom: 80px;
    padding-top: 60px;
    position: relative;
    z-index: 1
}

@media(min-width:64em) {
    .rewardTrackerModule {
        overflow: visible
    }
}

@media(min-width:90em) {
    .rewardTrackerModule {
        padding-bottom: 100px;
        padding-top: 80px
    }
}

.rewardTrackerModule__backgroundColor {
    background: linear-gradient(180deg, #7900ea, #ca56f2);
    background: var(--clr-gradient-purple);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -3
}

.rewardTrackerModule__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1
}

.rewardTrackerModule__text {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 540px;
    padding: 0 20px;
    text-align: center
}

.rewardTrackerModule__text--titles {
    --tagline-size: 65px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media(min-width:48em) {
    .rewardTrackerModule__text--titles {
        --tagline-size: 80px
    }
}

.rewardTrackerModule__title {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: var(--tagline-size);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-3.75deg)
}

body.tr .rewardTrackerModule__title {
    text-transform: none
}

body.cn .rewardTrackerModule__title,
body.jp .rewardTrackerModule__title,
body.kr .rewardTrackerModule__title,
body.zh-cn .rewardTrackerModule__title {
    letter-spacing: .02em;
    line-height: 110%
}

.rewardTrackerModule__title--0 {
    font-size: calc(var(--tagline-size)*.65);
    line-height: 110%
}

.rewardTrackerModule__title :last-child {
    margin-bottom: 20px
}

.rewardTrackerModule__rewards {
    -ms-overflow-style: none;
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 100%;
    overflow-x: scroll;
    padding: 40px 60px 100px 40px;
    position: relative;
    scroll-snap-align: center;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%
}

.rewardTrackerModule__rewards::-webkit-scrollbar {
    display: none
}

@media(min-width:48em) {
    .rewardTrackerModule__rewards {
        padding-left: 80px;
        padding-right: 80px
    }
}

.rewardTrackerModule__rewards--withSecret {
    padding-right: 40px
}

.rewardTrackerModule__reward {
    --reward-width: 180px;
    aspect-ratio: 180/250;
    background-image: linear-gradient(180deg, #d700ea, #ca56f2);
    background-image: var(--clr-gradient-pink);
    border: solid #4e0262;
    border-radius: 12px;
    border-width: 3px 3px 5px;
    box-shadow: 0 20px 18px rgba(0, 0, 0, .35);
    color: #fff;
    color: var(--clr-white);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-family: Squad, sans-serif;
    font-weight: 900;
    justify-content: space-between;
    line-height: 100%;
    padding: 12px;
    position: relative;
    text-transform: uppercase;
    width: 180px;
    width: var(--reward-width)
}

body.tr .rewardTrackerModule__reward {
    text-transform: none
}

@media(min-width:48em) {
    .rewardTrackerModule__reward {
        --reward-width: 200px;
        padding: 16px
    }
}

.rewardTrackerModule__reward--focused {
    background: linear-gradient(180deg, #ffd77a, #ffba00);
    background: var(--clr-gradient-yellow);
    border-color: #e28d0c
}

.rewardTrackerModule__reward--unlocked {
    background: linear-gradient(180deg, #7900ea, #ca56f2);
    background: var(--clr-gradient-purple);
    border-color: #4e0262
}

.rewardTrackerModule__reward:before {
    background: url(/squad/rewards/reward-shine.png);
    bottom: 0;
    content: "";
    left: 0;
    mix-blend-mode: overlay;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.rewardTrackerModule__reward:after {
    background: url(/squad/rewards/reward-pattern.png);
    bottom: 0;
    content: "";
    left: 0;
    mix-blend-mode: plus-lighter;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0
}

.rewardTrackerModule__rewardHeader {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    z-index: 10
}

.rewardTrackerModule__rewardHeader--unlock {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 100%;
    text-shadow: -.14em -.14em 0 #000, .14em -.14em 0 #000, -.14em .14em 0 #000, .14em .14em 0 #000;
    text-shadow: -.14em -.14em 0 var(--clr-black), .14em -.14em 0 var(--clr-black), -.14em .14em 0 var(--clr-black), .14em .14em 0 var(--clr-black);
    text-transform: uppercase
}

body.tr .rewardTrackerModule__rewardHeader--unlock {
    text-transform: none
}

@supports((-webkit-text-stroke-color:var(--clr-black)) and (-webkit-text-fill-color:white)) or ((-moz-text-stroke-color:var(--clr-black)) and (-moz-text-fill-color:white)) {
    .rewardTrackerModule__rewardHeader--unlock {
        -moz-text-fill-color: #fff;
        -moz-text-fill-color: var(--clr-white);
        -webkit-text-fill-color: #fff;
        -webkit-text-fill-color: var(--clr-white);
        -moz-text-stroke-color: #000;
        -moz-text-stroke-color: var(--clr-black);
        -webkit-text-stroke-color: #000;
        -webkit-text-stroke-color: var(--clr-black);
        -moz-text-stroke-width: .07em;
        -webkit-text-stroke-width: .07em;
        color: inherit;
        text-shadow: inherit;
        text-shadow: -.03003em .065625em 0 #000, .0132825em .065625em 0 #000;
        text-shadow: -.03003em .065625em 0 var(--clr-black), .0132825em .065625em 0 var(--clr-black)
    }
}

@supports(-webkit-appearance:none) and (stroke-color:transparent) {
    .rewardTrackerModule__rewardHeader--unlock {
        text-shadow: -.0175em .0525em 0 #000;
        text-shadow: -.0175em .0525em 0 var(--clr-black)
    }
}

@supports(text-shadow:0 0 0.14em var(--clr-black)) and (paint-order:stroke fill) and (-webkit-text-stroke:0.14em var(--clr-black)) {
    body:not(.no-stroke-support) .rewardTrackerModule__rewardHeader--unlock {
        -webkit-text-stroke: .14em #000;
        -webkit-text-stroke: .14em var(--clr-black);
        -moz-text-stroke-width: .14em;
        -webkit-text-stroke-width: .14em;
        paint-order: stroke fill;
        text-shadow: -.098em .14em 0 #000, .04025em .14em 0 #000;
        text-shadow: -.098em .14em 0 var(--clr-black), .04025em .14em 0 var(--clr-black)
    }
}

@supports(-webkit-appearance:none) and (stroke-color:transparent) {
    body:not(.no-stroke-support) .rewardTrackerModule__rewardHeader--unlock {
        text-shadow: -.0175em .0525em 0 #000;
        text-shadow: -.0175em .0525em 0 var(--clr-black)
    }
}

@media(min-width:48em) {
    .rewardTrackerModule__rewardHeader--unlock {
        font-size: 41px
    }
}

.rewardTrackerModule__rewardHeader--icon--image {
    height: 100%;
    width: 100%
}

.rewardTrackerModule__rewardHeader--icon--image--lock {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACIklEQVR4Ae2WAYQUURjHbxeAahZYcgxYLccOWMgxlHSBDQqwA4DWLgWBnQsF1g4C0BYAaQ4UxCzACQMoiYm0ylZP3Z263PTvfc98Ysw7vWk3h/3zd8y4/X3f//veeGsnXSu50qF0kjmS9qStZQGtDALLsuB5nrLruqBnWRHOMsAxAcbjMfJKkgS2bRNcSNuLhHp5aBRFCMOQoAxXSVAqCwFyvBQpy/d9jld1KoTIPf+3yIcMpB+kDkkEYSg7CALump95ZaE0J/T7fegUx7GKejAYYDKZIBODo7Kz9qVVBwaiNKhYnnVS5ohFjuOgpGgs3LlvChadTgc60czpDB+XyPnNTeMNt3hhikTzrFQqqFarKtIipekvXLy8xXEbfRJVXEWigug9welvkQ4OD9Hc2KD3sfFi0aLo5lev11Gr1TAcDlGkt+9nPOMdE3B43GL1ej202200m03tjHeePiu1XPGlrSv4eXRU+E1uNBoK3Gq1tODtu/cY7JqAkwtyMd58nKtZ5c/pdDrFaDRCt9vV7sHVa9cZbBmBT50+g+e7L/By9kE5mX/Cuy8Cn/cPVDFpmkKn+bd9XiyxZqhAGmfX1/Ho8ROGs/PFSNAe9r7/UJ6Jr/Tuz2fTUHZWLdjnZAcU/+3tO6qY3VevtQXduHmL/48aMJaTHX7ozMUQ6P6Dh2SerdliaeRmRyLkG8hfOljGvYuKGWiKEVTo/755Onx8VlrpN2XklRQG2Vy8AAAAAElFTkSuQmCC);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.rewardTrackerModule__rewardHeader--icon--image--calendar {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABiUlEQVR4AWMgAowCByDeD8Tvgfg8EAfQw9IEDm6e/3bhif9Te+f+98ut/A/igx1DI6AAxP1AfB9kWWzzxP8CYhL/Y5smgh0BEofKK1Db4vv6jp5gS0oXbwX7VlxR9X/ujJX/S4B8kDhQHuIACoEBNB7vQ/H/HKAlNesO4sJgR4DUIenZDzaHRHA+WVn2/yprIzAmwWK4HpB+kOUkB+0qG6P/j/2dwJiPlfW/T1YZKE5xYmDcA9WxwPTAHHyfIov7DLX+a/Pz/pfl4sCL63VUqWYxqZhyi+eY6VHD4vOkWjxBBhh0liKCZGOQfpA55GSp9ZFxCf+nzJlHMvbyDwBZeoDcvLxgypz5/9/++oeBD54+97+8th5EY5MHywH1z6e2xSBfgfMsUH6EWLxp9z6QwSCavhafv33vf0ZuPogeZkHd1tsPMghncN979Y4mFk+Qk1cAW3D90TOi8bb9h/5LScuACw9K6uT/YuIS/3X1DYjG3JCm0H9KWyMB0PL2Pwl4P7gNNuLAKBgFAO83IH2xiKcAAAAAAElFTkSuQmCC);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.rewardTrackerModule__rewardHeader--icon--image--link {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAA3UlEQVR42u3UPY3EMBRF4QvBEALBEAwhEB6EMFhDGAaBsBACIRAM4UE4u4pkKyPlx6mmmXuaNF/cWNZ3BwualFv2DM/iraSTDVrkYlfRmqgrCNkZLYGJ3DKE6MPzQGG/ZcMBw2+xG+DMrZ8N119eY3I9rdZowR7iRp1IwBi78KhBSR4aFa3xDidJJbACvFNX6MFEHLCKKp96sItYqWlJAAjlHmz7s57gWfm/daNl+y5deEWH3eKR65ULXMSL8znx4pJkISLppICQazjGQau4yXQx06+Wk16K31f5c/sDCq+9Zve1gQUAAAAASUVORK5CYII=);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.rewardTrackerModule__rewardImage {
    bottom: 50%;
    height: var(--reward-width);
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: var(--reward-width);
    z-index: 10;
    z-index: 0
}

.rewardTrackerModule__rewardImage--image {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.rewardTrackerModule__rewardText {
    text-transform: uppercase;
    z-index: 10
}

.rewardTrackerModule__rewardText>* {
    font-weight: 900
}

.rewardTrackerModule__rewardText--qty {
    font-size: 13px;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 120%;
    word-break: break-word
}

@media(min-width:48em) {
    .rewardTrackerModule__rewardText--qty {
        font-size: 15px
    }
}

.rewardTrackerModule__rewardText--name {
    font-size: 22px;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 86%;
    word-break: break-word
}

@media(min-width:48em) {
    .rewardTrackerModule__rewardText--name {
        font-size: 26px
    }
}

.rewardTrackerModule__progressBar {
    border: 3px solid #4e0262;
    border-radius: 6px;
    bottom: 40px;
    height: 26px;
    position: absolute;
    width: 780px
}

@media(min-width:48em) {
    .rewardTrackerModule__progressBar {
        width: 860px
    }
}

.rewardTrackerModule__progressBar--progress {
    background: #eb51f6;
    border-radius: 3px;
    box-shadow: inset 0 2px 0 #f8a1fe, 0 2.5px 0 #e022ee;
    height: calc(100% - 6px);
    left: 2px;
    position: absolute;
    top: 2px
}

.rewardTrackerModule__progressBar--milestone {
    position: absolute;
    top: 0;
    transform: rotate(-4deg) translate(-50%, -40%)
}

.rewardTrackerModule__progressBar--milestone h4 {
    text-wrap: nowrap;
    font-size: 55px;
    word-break: keep-all
}

@media(min-width:48em) {
    .rewardTrackerModule__progressBar--milestone h4 {
        font-size: 64px
    }
}

.rewardTrackerModule__progressBar--milestone--unlocked h4 {
    -webkit-text-fill-color: #eb51f6;
    color: #eb51f6
}

.rewardTrackerModule__filters {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    padding: 10px 0
}

.rewardTrackerModule__filters--label {
    color: hsla(0, 0%, 100%, .8);
    color: var(--clr-white-80);
    text-align: center
}

.rewardTrackerModule__filters--icons {
    background: hsla(0, 0%, 100%, .3);
    border-radius: 28px;
    display: flex;
    gap: 6px;
    height: 56px;
    padding: 3px
}

.rewardTrackerModule__filters--icon {
    align-items: center;
    background: #ee79e1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 50px;
    justify-content: center;
    overflow: visible;
    position: relative;
    transition: opacity .2s cubic-bezier(.455, .03, .515, .955);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 50px
}

.rewardTrackerModule__filters--icon--image {
    height: 100%;
    -o-object-position: center;
    object-position: center;
    position: relative;
    width: 100%;
    z-index: 10
}

.rewardTrackerModule__filters--icon--brawl {
    background: #932ef4
}

.rewardTrackerModule__filters--icon--coc {
    background: #a40505
}

.rewardTrackerModule__filters--icon--cr {
    background: #132f57
}

.rewardTrackerModule__filters--icon--bb {
    background: #202022
}

.rewardTrackerModule__filters--icon--hay {
    background: #4b3919
}

.rewardTrackerModule__filters--icon--inactive:before {
    background: 0 0;
    border: 3px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.rewardTrackerModule__filters--icon--disabled {
    cursor: default;
    opacity: .75;
    pointer-events: none
}

.rewardTrackerModule__ctas {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 32px
}

@media(min-width:48em) {
    .rewardTrackerModule__ctas {
        margin-top: 16px
    }
}

.rewardTrackerModule__ctas .downloadButtons__appButtonsWrapper {
    align-items: center;
    display: flex;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content
}

.rewardTrackerModule__ctas .downloadButtons__appButtonsWrapper .downloadButtons__appButtonImage {
    height: 40px;
    height: calc(var(--btn-height, 40px))
}

.rewardTrackerModule__background {
    z-index: -3
}

.rewardTrackerModule__background,
.rewardTrackerModule__backgroundFade {
    bottom: -2px;
    height: 100%;
    left: -2px;
    overflow: hidden;
    position: absolute;
    right: -2px;
    top: -2px;
    width: 100%
}

.rewardTrackerModule__backgroundFade {
    background: linear-gradient(180deg, #5a04a8, rgba(147, 74, 197, 0) 25%, transparent 25.001%, transparent);
    z-index: -1
}

.rewardTrackerModule__backgroundFade:after {
    background: linear-gradient(0deg, #7d04a8, #9317bf 25%, rgba(147, 74, 197, 0) 99%);
    bottom: 0;
    content: "";
    height: 40%;
    left: 0;
    position: absolute;
    width: 100%
}

.rewardTrackerModule__backgroundImage {
    bottom: 0;
    left: 0;
    opacity: .07;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

@media(min-width:64em) {
    .rewardTrackerModule__backgroundImage {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
        height: 120%;
        transform: none;
        width: 120%
    }
}

.progress-circle {
    transform: scaleX(-1) rotate(-55deg)
}

.progress-circle__percent {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.progress-circle__container {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2
}

.progress-circle #ProgressBar {
    overflow: hidden
}

.progress-circle #circle {
    stroke: rgba(0, 0, 0, .2)
}

.progress-circle #progress {
    stroke: #fff;
    stroke: var(--clr-white)
}

.rewardDeck {
    flex-shrink: 0;
    height: 250px;
    height: var(--reward-height, 250px);
    perspective: 100px;
    position: relative;
    width: 180px;
    width: var(--reward-width, 180px)
}

.rewardDeck__cardContainer {
    align-items: center;
    bottom: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    width: 100%
}

.rewardDeck__cardContainer:first-child {
    bottom: 0;
    left: 0;
    opacity: 1;
    z-index: 5
}

.rewardDeck__cardContainer:nth-child(2) {
    bottom: 10px;
    left: 10px;
    opacity: 1;
    z-index: 4
}

.rewardDeck__cardContainer:nth-child(3) {
    bottom: 20px;
    left: 20px;
    opacity: 1;
    z-index: 3
}

.rewardDeck__cardContainer:nth-child(4) {
    bottom: 20px;
    left: 20px;
    opacity: 1;
    z-index: 2
}

.rewardDeck__cardContainer:nth-child(n+5) {
    bottom: 20px;
    left: 20px;
    opacity: 0;
    z-index: 0
}

body {
    --reward-width: 180px;
    --reward-height: 250px
}

@media(min-width:48em) {
    body {
        --reward-width: 200px;
        --reward-height: 278px
    }
}

.rewardCard {
    background-image: linear-gradient(180deg, #d700ea, #ca56f2);
    background-image: var(--clr-gradient-pink);
    border: solid #4e0262;
    border-radius: 12px;
    border-width: 3px 3px 5px;
    box-shadow: 0 20px 18px rgba(0, 0, 0, .35);
    color: #fff;
    color: var(--clr-white);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-family: Squad, sans-serif;
    font-weight: 900;
    height: var(--reward-height);
    justify-content: space-between;
    line-height: 100%;
    padding: 12px;
    position: relative;
    text-transform: uppercase;
    width: var(--reward-width)
}

body.tr .rewardCard {
    text-transform: none
}

@media(min-width:48em) {
    .rewardCard {
        padding: 16px
    }
}

.rewardCard--focused {
    background: linear-gradient(180deg, #ffd77a, #ffba00);
    background: var(--clr-gradient-yellow);
    border-color: #e28d0c
}

.rewardCard--unlocked {
    background: linear-gradient(180deg, #7900ea, #ca56f2);
    background: var(--clr-gradient-purple);
    border-color: #4e0262
}

.rewardCard:before {
    background: url(/squad/rewards/reward-shine.png);
    mix-blend-mode: overlay;
    z-index: 1
}

.rewardCard:after,
.rewardCard:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.rewardCard:after {
    background: url(/squad/rewards/reward-pattern.png);
    mix-blend-mode: plus-lighter;
    z-index: 0
}

.rewardCard--secret {
    background: linear-gradient(180deg, #6500bb 56.65%, #9a30f5);
    box-shadow: 0 2px 0 0 #44047b, 0 14.44px 31.286px 0 rgba(0, 0, 0, .35)
}

.rewardCard--secret:before {
    display: none
}

.rewardCard--secret:after {
    background: url(/squad/rewards/secret-pattern.png);
    mix-blend-mode: normal
}

.rewardCard--secret .rewardCard__text {
    color: #350260
}

.rewardCard__header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    z-index: 10
}

.rewardCard__header--milestone {
    font-size: 36px
}

@media(min-width:48em) {
    .rewardCard__header--milestone {
        font-size: 41px
    }
}

.rewardCard__header--icon--image {
    height: 100%;
    width: 100%
}

.rewardCard__header--icon--image--lock {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACIklEQVR4Ae2WAYQUURjHbxeAahZYcgxYLccOWMgxlHSBDQqwA4DWLgWBnQsF1g4C0BYAaQ4UxCzACQMoiYm0ylZP3Z263PTvfc98Ysw7vWk3h/3zd8y4/X3f//veeGsnXSu50qF0kjmS9qStZQGtDALLsuB5nrLruqBnWRHOMsAxAcbjMfJKkgS2bRNcSNuLhHp5aBRFCMOQoAxXSVAqCwFyvBQpy/d9jld1KoTIPf+3yIcMpB+kDkkEYSg7CALump95ZaE0J/T7fegUx7GKejAYYDKZIBODo7Kz9qVVBwaiNKhYnnVS5ohFjuOgpGgs3LlvChadTgc60czpDB+XyPnNTeMNt3hhikTzrFQqqFarKtIipekvXLy8xXEbfRJVXEWigug9welvkQ4OD9Hc2KD3sfFi0aLo5lev11Gr1TAcDlGkt+9nPOMdE3B43GL1ej202200m03tjHeePiu1XPGlrSv4eXRU+E1uNBoK3Gq1tODtu/cY7JqAkwtyMd58nKtZ5c/pdDrFaDRCt9vV7sHVa9cZbBmBT50+g+e7L/By9kE5mX/Cuy8Cn/cPVDFpmkKn+bd9XiyxZqhAGmfX1/Ho8ROGs/PFSNAe9r7/UJ6Jr/Tuz2fTUHZWLdjnZAcU/+3tO6qY3VevtQXduHmL/48aMJaTHX7ozMUQ6P6Dh2SerdliaeRmRyLkG8hfOljGvYuKGWiKEVTo/755Onx8VlrpN2XklRQG2Vy8AAAAAElFTkSuQmCC);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.rewardCard__header--icon--image--calendar {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABiUlEQVR4AWMgAowCByDeD8Tvgfg8EAfQw9IEDm6e/3bhif9Te+f+98ut/A/igx1DI6AAxP1AfB9kWWzzxP8CYhL/Y5smgh0BEofKK1Db4vv6jp5gS0oXbwX7VlxR9X/ujJX/S4B8kDhQHuIACoEBNB7vQ/H/HKAlNesO4sJgR4DUIenZDzaHRHA+WVn2/yprIzAmwWK4HpB+kOUkB+0qG6P/j/2dwJiPlfW/T1YZKE5xYmDcA9WxwPTAHHyfIov7DLX+a/Pz/pfl4sCL63VUqWYxqZhyi+eY6VHD4vOkWjxBBhh0liKCZGOQfpA55GSp9ZFxCf+nzJlHMvbyDwBZeoDcvLxgypz5/9/++oeBD54+97+8th5EY5MHywH1z6e2xSBfgfMsUH6EWLxp9z6QwSCavhafv33vf0ZuPogeZkHd1tsPMghncN979Y4mFk+Qk1cAW3D90TOi8bb9h/5LScuACw9K6uT/YuIS/3X1DYjG3JCm0H9KWyMB0PL2Pwl4P7gNNuLAKBgFAO83IH2xiKcAAAAAAElFTkSuQmCC);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.rewardCard__header--icon--image--link {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAA3UlEQVR42u3UPY3EMBRF4QvBEALBEAwhEB6EMFhDGAaBsBACIRAM4UE4u4pkKyPlx6mmmXuaNF/cWNZ3BwualFv2DM/iraSTDVrkYlfRmqgrCNkZLYGJ3DKE6MPzQGG/ZcMBw2+xG+DMrZ8N119eY3I9rdZowR7iRp1IwBi78KhBSR4aFa3xDidJJbACvFNX6MFEHLCKKp96sItYqWlJAAjlHmz7s57gWfm/daNl+y5deEWH3eKR65ULXMSL8znx4pJkISLppICQazjGQau4yXQx06+Wk16K31f5c/sDCq+9Zve1gQUAAAAASUVORK5CYII=);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.rewardCard__image {
    bottom: 50%;
    height: var(--reward-width);
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: var(--reward-width);
    z-index: 9
}

.rewardCard__image--image {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.rewardCard__text {
    text-transform: uppercase;
    z-index: 10
}

.rewardCard__text>* {
    font-weight: 900
}

.rewardCard__text--qty {
    color: inherit;
    font-size: 13px;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 120%;
    word-break: break-word
}

@media(min-width:48em) {
    .rewardCard__text--qty {
        font-size: 15px
    }
}

.rewardCard__text--name {
    color: inherit;
    font-size: 22px;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 86%;
    word-break: break-word
}

@media(min-width:48em) {
    .rewardCard__text--name {
        font-size: 26px
    }
}

body.it .rewardCard__text--name,
body.ru .rewardCard__text--name,
body.tr .rewardCard__text--name {
    font-size: 20px
}

@media(min-width:48em) {

    body.it .rewardCard__text--name,
    body.ru .rewardCard__text--name,
    body.tr .rewardCard__text--name {
        font-size: 20px
    }
}

.defaultInput {
    max-width: 400px
}

.defaultInput--withPreIcon input {
    padding-left: 56px
}

.defaultInput__input {
    background: hsla(0, 0%, 100%, .3);
    border-color: #fff;
    border-color: var(--clr-white);
    border-width: 2px;
    box-shadow: none;
    color: #fff;
    color: var(--clr-white);
    max-width: 400px
}

.defaultInput__input::-moz-placeholder {
    color: #fff;
    color: var(--clr-white);
    opacity: .8
}

.defaultInput__input::placeholder {
    color: #fff;
    color: var(--clr-white);
    opacity: .8
}

.defaultInput .defaultInput__preIcon {
    z-index: 10
}

.defaultInput .defaultInput__preIcon path,
.defaultInput .defaultInput__preIcon rect {
    stroke: #fff;
    stroke: var(--clr-white);
    opacity: .8;
    transition: opacity .2s cubic-bezier(.455, .03, .515, .955)
}

.defaultInput--filled .defaultInput__preIcon path,
.defaultInput--filled .defaultInput__preIcon rect,
.defaultInput:hover .defaultInput__preIcon path,
.defaultInput:hover .defaultInput__preIcon rect {
    opacity: 1
}

.defaultInput--filled input {
    border-color: #fff;
    border-color: var(--clr-white)
}

.defaultInput__preIcon {
    pointer-events: none
}

.defaultInput__preIcon path {
    opacity: .8;
    transition: stroke .2s cubic-bezier(.455, .03, .515, .955), opacity .2s cubic-bezier(.455, .03, .515, .955)
}

.defaultCheckbox {
    max-width: 400px
}

.defaultCheckbox__label {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 110%;
    text-align: left
}

@media(min-width:30em) {
    .defaultCheckbox__label {
        font-size: 16px
    }
}

.defaultCheckbox__label a {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 110%;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

@media(min-width:30em) {
    .defaultCheckbox__label a {
        font-size: 16px
    }
}

.defaultCheckbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 2px solid hsla(0, 0%, 100%, .6);
    border-radius: 2px;
    flex-shrink: 0;
    position: relative;
    transition: border-color .1s ease
}

.defaultCheckbox input:checked,
.defaultCheckbox input:hover {
    border: 2px solid #fff
}

.defaultCheckbox input:checked:after {
    transform: scale(.6)
}

.defaultCheckbox input:after {
    background: #fff;
    background: var(--clr-white);
    border-radius: 2px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: transform .2s;
    width: 100%
}

.defaultSelect__select {
    font-family: Squad
}

.socialButton {
    border: none
}

.socialButton__icon {
    height: 24px;
    width: 24px
}

.socialButton--over {
    box-shadow: none
}

.socialButton--instagram .socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.75 8a7 7 0 0 1 7-7h8a7 7 0 0 1 7 7v8a7 7 0 0 1-7 7h-8a7 7 0 0 1-7-7V8Zm11 7.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0 2a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm5.959-10.083a1.375 1.375 0 1 0 0-2.75 1.375 1.375 0 0 0 0 2.75Z' fill='%23000'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.socialButton--instagram.socialButton--inverted .socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.75 8a7 7 0 0 1 7-7h8a7 7 0 0 1 7 7v8a7 7 0 0 1-7 7h-8a7 7 0 0 1-7-7V8Zm11 7.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0 2a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm5.959-10.083a1.375 1.375 0 1 0 0-2.75 1.375 1.375 0 0 0 0 2.75Z' fill='%23fff'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.socialButton--x .socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='25' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M17.76 14.31 25.77 5h-1.898l-6.955 8.084L11.362 5H4.955l8.4 12.225-8.4 9.764h1.898l7.345-8.538 5.866 8.538h6.407L17.759 14.31h.001Zm-2.6 3.023-.85-1.218L7.536 6.43h2.916l5.465 7.817.85 1.217 7.105 10.162h-2.916l-5.797-8.292Z' fill='%23AAE7ED'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(4.955 5)' d='M0 0h21.516v22H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.socialButton--x.socialButton--inverted .socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='25' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M17.76 14.31 25.77 5h-1.898l-6.955 8.084L11.362 5H4.955l8.4 12.225-8.4 9.764h1.898l7.345-8.538 5.866 8.538h6.407L17.759 14.31h.001Zm-2.6 3.023-.85-1.218L7.536 6.43h2.916l5.465 7.817.85 1.217 7.105 10.162h-2.916l-5.797-8.292Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(4.955 5)' d='M0 0h21.516v22H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.socialButton--youtube .socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.83 16.503c-.001-.123-.037-.25-.081-.366-.06-.15-.187-.226-.346-.241-.187-.02-.337.058-.472.18-.055.05-.08.121-.08.121l.003 3.895v.096l.038.05c.11.123.239.22.403.254.271.057.462-.059.515-.315a.96.96 0 0 0 .021-.197c.002-1.16.004-2.319-.002-3.477Zm0 0c-.001-.123-.037-.25-.081-.366-.06-.15-.187-.226-.346-.241-.187-.02-.337.058-.472.18-.055.05-.08.121-.08.121l.003 3.895v.096l.038.05c.11.123.239.22.403.254.271.057.462-.059.515-.315a.96.96 0 0 0 .021-.197c.002-1.16.004-2.319-.002-3.477Zm4.266-5.874c-4.51-.099-9.02-.099-13.53 0C4 10.663 2.75 11.97 2.75 13.57v7.2c0 1.6 1.251 2.908 2.815 2.942 4.51.099 9.021.099 13.53 0 1.566-.034 2.817-1.341 2.817-2.942v-7.2c0-1.6-1.251-2.907-2.816-2.941ZM6.89 21.426h-1.3V13.91H4.242v-1.257H8.24v1.254h-1.35v7.518Zm4.654-3.12v3.12h-1.152v-.712l-.087.095c-.247.285-.528.524-.887.65a1.055 1.055 0 0 1-.54.05c-.25-.043-.42-.19-.521-.425a1.68 1.68 0 0 1-.12-.679c-.002-.858 0-5.404 0-5.448h1.148c.002.04.006 3.303.007 4.894 0 .087 0 .175.018.26.042.213.202.305.403.23.232-.087.408-.25.557-.445.022-.028.022-.079.022-.12V14.95l1.152-.003v3.36Zm4.38 2.497c-.153.473-.492.714-.98.71-.396-.004-.717-.165-.982-.459l-.111-.121v.492h-1.154v-8.772h1.154v2.887s.065-.132.124-.2c.179-.205.396-.363.665-.432.442-.114.953.026 1.195.555.144.313.184.646.184.985.002 1.226.002 2.453 0 3.679 0 .23-.023.456-.095.676Zm4.261-.247c-.2.598-.613.93-1.218 1.021-.376.057-.748.049-1.1-.114-.483-.223-.756-.625-.873-1.136a3.508 3.508 0 0 1-.084-.733c-.01-.96-.005-1.922-.003-2.882 0-.502.118-.966.455-1.35.384-.44.875-.604 1.436-.567.17.011.341.04.502.093.545.184.837.601.951 1.156.044.213.06.435.064.654.01.512-.004 1.641-.004 1.641h-2.209v1.619c0 .29.23.526.515.526a.52.52 0 0 0 .514-.526v-.832h1.187s.017.982-.133 1.43Zm-1.054-4.13a.52.52 0 0 0-.514-.525.52.52 0 0 0-.515.526v.908h1.029v-.908Zm-4.382-.289c-.06-.15-.187-.225-.346-.241-.187-.02-.337.058-.472.18-.055.05-.08.121-.08.121l.003 3.895v.096l.038.05c.11.123.239.22.403.254.271.057.462-.058.515-.315a.959.959 0 0 0 .021-.197c.002-1.16.004-2.318-.002-3.477 0-.123-.036-.25-.08-.366ZM17.696 2.305v6.512h-1.18v-.7c-.13.132-.241.255-.364.365a1.583 1.583 0 0 1-.75.399c-.442.088-.818-.055-.958-.522a1.754 1.754 0 0 1-.077-.486V2.305h1.172V7.27c0 .066.005.133.016.197.036.205.184.301.377.233.235-.083.414-.25.566-.446.022-.028.018-.08.018-.12v-4.83h1.18ZM7.933 3.435C7.677 2.331 7.14 0 7.14 0H5.797S6.829 3.5 7.29 5.06a.635.635 0 0 1 .024.177v3.578h1.238V5.237c0-.06.007-.12.024-.177L10.07 0H8.727s-.537 2.331-.793 3.435ZM11.69 2.14c-.933 0-1.69.774-1.69 1.729V7.25c0 .955.757 1.728 1.69 1.728.934 0 1.69-.773 1.69-1.728V3.87c0-.955-.756-1.728-1.69-1.728Zm.488 5.179a.494.494 0 0 1-.488.498.494.494 0 0 1-.487-.498V3.8c0-.275.219-.498.488-.498.268 0 .487.223.487.498V7.32Z' fill='%23000'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.socialButton--youtube.socialButton--inverted .socialButton__icon {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.83 16.503c-.001-.123-.037-.25-.081-.366-.06-.15-.187-.226-.346-.241-.187-.02-.337.058-.472.18-.055.05-.08.121-.08.121l.003 3.895v.096l.038.05c.11.123.239.22.403.254.271.057.462-.059.515-.315a.96.96 0 0 0 .021-.197c.002-1.16.004-2.319-.002-3.477Zm0 0c-.001-.123-.037-.25-.081-.366-.06-.15-.187-.226-.346-.241-.187-.02-.337.058-.472.18-.055.05-.08.121-.08.121l.003 3.895v.096l.038.05c.11.123.239.22.403.254.271.057.462-.059.515-.315a.96.96 0 0 0 .021-.197c.002-1.16.004-2.319-.002-3.477Zm4.266-5.874c-4.51-.099-9.02-.099-13.53 0C4 10.663 2.75 11.97 2.75 13.57v7.2c0 1.6 1.251 2.908 2.815 2.942 4.51.099 9.021.099 13.53 0 1.566-.034 2.817-1.341 2.817-2.942v-7.2c0-1.6-1.251-2.907-2.816-2.941ZM6.89 21.426h-1.3V13.91H4.242v-1.257H8.24v1.254h-1.35v7.518Zm4.654-3.12v3.12h-1.152v-.712l-.087.095c-.247.285-.528.524-.887.65a1.055 1.055 0 0 1-.54.05c-.25-.043-.42-.19-.521-.425a1.68 1.68 0 0 1-.12-.679c-.002-.858 0-5.404 0-5.448h1.148c.002.04.006 3.303.007 4.894 0 .087 0 .175.018.26.042.213.202.305.403.23.232-.087.408-.25.557-.445.022-.028.022-.079.022-.12V14.95l1.152-.003v3.36Zm4.38 2.497c-.153.473-.492.714-.98.71-.396-.004-.717-.165-.982-.459l-.111-.121v.492h-1.154v-8.772h1.154v2.887s.065-.132.124-.2c.179-.205.396-.363.665-.432.442-.114.953.026 1.195.555.144.313.184.646.184.985.002 1.226.002 2.453 0 3.679 0 .23-.023.456-.095.676Zm4.261-.247c-.2.598-.613.93-1.218 1.021-.376.057-.748.049-1.1-.114-.483-.223-.756-.625-.873-1.136a3.508 3.508 0 0 1-.084-.733c-.01-.96-.005-1.922-.003-2.882 0-.502.118-.966.455-1.35.384-.44.875-.604 1.436-.567.17.011.341.04.502.093.545.184.837.601.951 1.156.044.213.06.435.064.654.01.512-.004 1.641-.004 1.641h-2.209v1.619c0 .29.23.526.515.526a.52.52 0 0 0 .514-.526v-.832h1.187s.017.982-.133 1.43Zm-1.054-4.13a.52.52 0 0 0-.514-.525.52.52 0 0 0-.515.526v.908h1.029v-.908Zm-4.382-.289c-.06-.15-.187-.225-.346-.241-.187-.02-.337.058-.472.18-.055.05-.08.121-.08.121l.003 3.895v.096l.038.05c.11.123.239.22.403.254.271.057.462-.058.515-.315a.959.959 0 0 0 .021-.197c.002-1.16.004-2.318-.002-3.477 0-.123-.036-.25-.08-.366ZM17.696 2.305v6.512h-1.18v-.7c-.13.132-.241.255-.364.365a1.583 1.583 0 0 1-.75.399c-.442.088-.818-.055-.958-.522a1.754 1.754 0 0 1-.077-.486V2.305h1.172V7.27c0 .066.005.133.016.197.036.205.184.301.377.233.235-.083.414-.25.566-.446.022-.028.018-.08.018-.12v-4.83h1.18ZM7.933 3.435C7.677 2.331 7.14 0 7.14 0H5.797S6.829 3.5 7.29 5.06a.635.635 0 0 1 .024.177v3.578h1.238V5.237c0-.06.007-.12.024-.177L10.07 0H8.727s-.537 2.331-.793 3.435ZM11.69 2.14c-.933 0-1.69.774-1.69 1.729V7.25c0 .955.757 1.728 1.69 1.728.934 0 1.69-.773 1.69-1.728V3.87c0-.955-.756-1.728-1.69-1.728Zm.488 5.179a.494.494 0 0 1-.488.498.494.494 0 0 1-.487-.498V3.8c0-.275.219-.498.488-.498.268 0 .487.223.487.498V7.32Z' fill='%23fff'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

body {
    --btn-height: 56px;
    --btn-border: 3px;
    --btn-radius: 8px
}

@media(min-width:64em) {
    body {
        --btn-border: 3px;
        --btn-height: 72px;
        --btn-radius: 10px
    }
}

.defaultButton {
    height: -moz-fit-content;
    height: fit-content;
    padding: 0
}

.defaultButton__label {
    font-size: 18px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 18px;
    margin-bottom: -2%;
    text-transform: capitalize
}

.defaultButton__bg,
.defaultButton__main {
    border-radius: 10px;
    border-radius: var(--btn-radius, 10px)
}

.defaultButton__main {
    box-shadow: 0 2px 0 #000;
    height: 40px;
    height: var(--btn-height, 40px);
    padding: 0
}

@media(min-width:48em) {
    .defaultButton__main {
        height: 50px;
        height: var(--btn-height, 50px)
    }
}

@media(min-width:64em) {
    .defaultButton__main {
        box-shadow: 0 3px 0 #000;
        height: 64px;
        height: var(--btn-height, 64px)
    }
}

.defaultButton--disabled .defaultButton__main,
.defaultButton--loading .defaultButton__main,
.defaultButton__main:active {
    box-shadow: none !important;
    transform: translateY(2px);
    transform: translateY(var(--btn-border, 2px))
}

.defaultButton__main:after {
    background: 0 0;
    border-radius: calc(var(--btn-radius)*.9);
    bottom: var(--btn-border);
    content: "";
    left: var(--btn-border);
    position: absolute;
    right: var(--btn-border);
    top: var(--btn-border);
    transition: background-color .2s cubic-bezier(.455, .03, .515, .955);
    z-index: -1
}

.defaultButton__main[disabled]:after {
    background: rgba(0, 0, 0, .2);
    z-index: 2
}

.defaultButton__main:hover:not([disabled]):after {
    background: hsla(0, 0%, 100%, .2)
}

.defaultButton--disabled .defaultButton__bg,
.defaultButton--loading .defaultButton__bg,
.defaultButton__bg {
    background: #f6ca45;
    border: 2px solid #000;
    border-width: var(--btn-border);
    box-shadow: 0 calc(0px - var(--btn-border)) 0 #d38612 inset, 0 var(--btn-border) 0 rgba(255, 255, 221, .733) inset;
    overflow: hidden;
    z-index: -1
}

.defaultButton__label {
    color: #fff;
    color: var(--clr-white);
    color: #000;
    color: var(--clr-black);
    font-family: Squad, sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 100%;
    text-transform: uppercase
}

body.tr .defaultButton__label {
    text-transform: none
}

@media(min-width:48em) {
    .defaultButton__label {
        font-size: 19px
    }
}

@media(min-width:64em) {
    .defaultButton__label {
        font-size: 24px
    }
}

.defaultButton__link {
    padding: 0 24px
}

@media(min-width:48em) {
    .defaultButton__link {
        padding: 0 28px
    }
}

@media(min-width:64em) {
    .defaultButton__link {
        padding: 0 32px
    }
}

.defaultButton__link--share {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: center
}

@media(min-width:64em) {
    .defaultButton__link--share {
        gap: 6px
    }
}

.defaultButton__share {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA6CAQAAAC+TAkTAAABSklEQVR42u2YYa3DIBSFPwlIQMIkIKEOhoQ6WB1sDpiDJwEJk4AEJPCSZglpeLyS7ZakCd/52aYH2tzDvWUwGJwWxYwnkHjxg+VQDIG0UUBzEFcSpSIXkEeTKgooxPGkqpYee8uKKESZSf/KIMpjx84iylPITv5lypd3KSVn5Uk7coigK1ZfBJnBEQi8cExkFHfSRjXr6bPV55UqbkS2VhqwlBFtaORC/DMh7oWVIS9w5vW+zzOjaEQTmr6LQQS3axWZEULvWi0oxJj6htKyY7ec2s72iKWMaiiBG7pP75Hl2Foqbnjiu8wtzVxIjXIYWDHEMga+PTIflNnosVwr919pZCoeG7GsFJYifViO3ERgQVWOVuGy0ajqlafA/gRP9fP3mY8T9ZnyI4k4vlOgl41Un4HZ9hqW67OCR3MoFk9Y5TDjz89gMOjDL2CorgjLF8phAAAAAElFTkSuQmCC) no-repeat 50%;
    background-size: cover;
    height: 20px;
    width: 20px
}

@media(min-width:64em) {
    .defaultButton__share {
        height: 26px;
        width: 26px
    }
}

.defaultButton--secondary .defaultButton__bg {
    background: #f56bff;
    border-color: #000;
    box-shadow: 0 calc(0px - var(--btn-border)) 0 rgba(102, 32, 149, .7) inset, 0 var(--btn-border) 0 hsla(0, 0%, 100%, .4) inset
}

.defaultButton--secondary .defaultButton__label {
    color: #000;
    color: var(--clr-black)
}

.defaultButton--tertiary .defaultButton__bg {
    background: #ad30e8;
    border-color: #000;
    border-width: var(--btn-border);
    box-shadow: 0 calc(0px - var(--btn-border)) 0 #6e02a0 inset, 0 var(--btn-border) 0 #d988ff inset
}

.defaultButton--tertiary .defaultButton__label {
    color: #000;
    color: var(--clr-black)
}

.downloadButtons__appButtonsWrapper {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%
}

@media(min-width:48em) {
    .downloadButtons__appButtonsWrapper {
        gap: 12px
    }
}

.downloadButtons__appButtonsWrapper--both .downloadButtons__appButton {
    width: 50%
}

.downloadButtons__appButtonsWrapper--both .downloadButtons__appButton:first-child {
    justify-content: flex-end
}

.downloadButtons__appButtonImage {
    height: 40px;
    width: auto !important
}

@media(min-width:48em) {
    .downloadButtons__appButtonImage {
        height: 50px;
        width: auto !important
    }
}

.rewardIconButton__button {
    --bg: radial-gradient(50% 50% at 50% 50%, #d925f0 0%, #e95afb 100%);
    align-items: center;
    background: radial-gradient(50% 50% at 50% 50%, #d925f0 0, #e95afb 100%);
    background: var(--bg);
    border: 3px solid #4e0262;
    border-radius: 100%;
    display: flex;
    height: 30px;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    transition: all .2s;
    width: 30px
}

.rewardIconButton__button:not(.rewardIconButton__button--disabled) {
    box-shadow: inset 0 4.563px 0 0 hsla(0, 0%, 100%, 0), 0 2px 0 0 #4e0262;
    cursor: pointer
}

.rewardIconButton__button:active:not(.rewardIconButton__button--disabled) {
    background: linear-gradient(0deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 100%), var(--bg);
    box-shadow: inset 0 4.563px 0 0 hsla(0, 0%, 100%, 0);
    transform: translateY(2px)
}

.rewardIconButton__button--secondary {
    --bg: radial-gradient(50% 50% at 50% 50%, #ffa503 0%, #ffe294 100%);
    border: 3px solid #e28d0c
}

.rewardIconButton__button--secondary:not(.rewardIconButton__button--disabled) {
    box-shadow: inset 0 4.563px 0 0 hsla(0, 0%, 100%, 0), 0 2px 0 0 #e28d0c
}

.rewardIconButton__button--tertiary {
    --bg: radial-gradient(50% 50% at 50% 50%, #8e11ed 0%, #b059f2 100%)
}

.blogLayout {
    --eclipse-gradient: linear-gradient(180deg, #003d99, #06f 79.5%, #2eb4ff 94.5%);
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    height: 100svh;
    overflow-y: scroll;
    width: 100vw;
    width: 100svw
}

@supports(-webkit-touch-callout:none) {
    .blogLayout {
        bottom: 0;
        height: 100vh;
        height: 100svh;
        left: 0;
        overflow: scroll;
        overscroll-behavior-y: none;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1
    }
}

.blogLayout__background {
    background: #003d99;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
    z-index: -2
}

.blogHeader {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 40px;
    position: relative;
    width: 100%;
    z-index: 11
}

@media(min-width:48em) {
    .blogHeader {
        padding: 40px
    }
}

.blogHeader__headerLogoWrapper {
    cursor: pointer;
    left: 50%;
    order: -1;
    position: absolute;
    right: 50%;
    top: 40px;
    transform: translateX(-50%);
    transition: transform .2s cubic-bezier(.455, .03, .515, .955);
    width: 110px
}

.blogHeader__headerLogoWrapper img {
    width: 100%
}

.blogHeader__headerLogoWrapper:hover {
    transform: translateX(-50%) scale(1.1)
}

.blogHeader__headerLogoWrapper:active {
    transform: translateX(-50%) scale(.9)
}

.blogHeader__supercellLogoWrapper {
    display: none
}

@media(min-width:48em) {
    .blogHeader__supercellLogoWrapper {
        display: block;
        margin-right: auto;
        order: -1
    }

    .blogHeader__supercellLogoWrapper img {
        width: 54px
    }
}

.blogHeader__supercellLogoWrapper--link {
    cursor: pointer;
    transform: scale(1);
    transition: transform .2s cubic-bezier(.455, .03, .515, .955)
}

.blogHeader__supercellLogoWrapper--link:hover {
    transform: scale(1.1)
}

.blogHeader__supercellLogoWrapper--link:active {
    transform: scale(.9)
}

.blogHeader__socialIconsWrapper {
    display: flex;
    gap: 16px;
    grid-area: socials
}

@media(max-width:47.99em) {
    .blogHeader__socialIconsWrapper {
        justify-content: center
    }
}

.blogHeader__socialIconsWrapper {
    justify-content: center;
    opacity: 0
}

@media(min-width:48em) {
    .blogHeader__socialIconsWrapper {
        margin-right: 16px;
        margin-top: 6px;
        opacity: 1
    }
}

.blogHeader__socialIcon {
    display: inline-block;
    height: 24px;
    width: 24px
}

.blogHeader__socialIcon--logo {
    display: inline-block;
    height: 38px;
    margin-right: 8px;
    width: 47px
}

@media(min-width:48em) {
    .blogHeader__socialIcon--logo {
        margin-right: 0
    }
}

.blogHeader__socialIcon--last {
    margin-right: 0
}

@media(max-width:47.99em) {
    .blogHeader__localeSelectorWrapper {
        justify-content: center
    }
}

.blogHeader .defaultSelect {
    display: none
}

@media(min-width:48em) {
    .blogHeader .defaultSelect {
        display: block
    }
}

.blogHeader .defaultSelect__select {
    border: none;
    border-radius: 100px;
    height: 40px;
    padding-bottom: 2px
}

.blogHeader .defaultSelect__chevron {
    top: 13px
}

.blogPreviewModule {
    align-items: center;
    background: linear-gradient(180deg, #066afe, #0f4494);
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1
}

.blogPreviewModule .block {
    width: 100%
}

.blogPreviewModule .block__main {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
    padding: 40px 0
}

.blogPreviewModule__title {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-weight: 900;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase
}

body.tr .blogPreviewModule__title {
    text-transform: none
}

.blogPreviewModule__posts {
    flex-wrap: wrap;
    gap: 20px
}

.blogPreviewModule__post,
.blogPreviewModule__posts {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%
}

.blogPreviewModule__post {
    background: hsla(0, 0%, 100%, .2);
    border: 2px solid hsla(0, 0%, 100%, .4);
    border-radius: 6px;
    flex-direction: column;
    gap: 16px;
    height: -moz-fit-content;
    height: fit-content;
    justify-content: flex-start;
    min-height: 160px;
    padding: 8px;
    transform: scale(1);
    transition: transform .2s cubic-bezier(.455, .03, .515, .955)
}

.blogPreviewModule__post:hover {
    transform: scale(1.05)
}

.blogPreviewModule__post:active {
    transform: scale(.95)
}

@media(min-width:48em) {
    .blogPreviewModule__post {
        width: calc(50% - 10px)
    }
}

@media(min-width:90em) {
    .blogPreviewModule__post {
        width: 500px
    }
}

.blogPreviewModule__post--image {
    border-radius: 4px;
    flex-shrink: 0;
    height: auto;
    overflow: hidden;
    position: relative;
    width: 100%
}

.blogPreviewModule__post--image img {
    aspect-ratio: 16/9;
    display: block;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

.blogPreviewModule__post--titles {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.blogPreviewModule__post--content {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 16px;
    padding-top: 0
}

.blogPreviewModule__post--category {
    color: hsla(0, 0%, 100%, .5);
    color: hsla(0, 0%, 100%, .6);
    font-size: 14px;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase
}

body.tr .blogPreviewModule__post--category {
    text-transform: none
}

.blogPreviewModule__post--title {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    text-transform: uppercase
}

body.tr .blogPreviewModule__post--title {
    text-transform: none
}

.blogPreviewModule__post--date,
.blogPreviewModule__post--intro {
    color: hsla(0, 0%, 100%, .5);
    font-size: 14px;
    font-weight: 700;
    line-height: 120%
}

.blogPreviewModule__post--intro {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    width: 100%
}

.blogPreviewModule__readMore a {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 16px;
    font-weight: 900;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 100%;
    line-height: 120%;
    line-height: 150%;
    opacity: .6;
    text-transform: uppercase;
    transition: opacity .2s cubic-bezier(.455, .03, .515, .955)
}

body.tr .blogPreviewModule__readMore a {
    text-transform: none
}

.blogPreviewModule__readMore a:hover {
    opacity: 1
}

.blogPreviewModule__readMore a.forward-icon {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center
}

.blogPreviewModule__readMore a.forward-icon span {
    margin-bottom: -2px
}

.blogPreviewModule__readMore a.forward-icon:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.766 13-6-5 6-5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
    content: "";
    display: block;
    height: 16px;
    transform: rotate(180deg);
    width: 16px
}

.blogPage {
    --blog-post-width: 730px;
    --content-gap: 20px;
    --post-gap: 10px;
    align-items: center;
    background: var(--eclipse-gradient);
    display: flex;
    flex-direction: column;
    gap: 20px;
    gap: var(--content-gap);
    justify-content: center;
    justify-content: flex-start;
    padding: 40px 20px
}

@media(min-width:48em) {
    .blogPage {
        --content-gap: 40px;
        padding: 60px 80px 80px
    }
}

.blogPage__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    max-width: 1100px;
    max-width: var(--blog-post-width);
    width: 100%
}

.blogPage__link {
    align-self: flex-start;
    color: #fff;
    color: var(--clr-white);
    color: hsla(0, 0%, 100%, .4);
    font-family: Squad, sans-serif;
    font-size: 16px;
    font-weight: 900;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 100%;
    line-height: 120%;
    text-transform: uppercase;
    transition: color .2s cubic-bezier(.455, .03, .515, .955)
}

body.tr .blogPage__link {
    text-transform: none
}

.blogPage__link span {
    margin-bottom: -2px
}

.blogPage__link:after,
.blogPage__link:before {
    display: none;
    opacity: .4
}

.blogPage__link:not(.disabled) {
    color: hsla(0, 0%, 100%, .8);
    cursor: pointer
}

.blogPage__link:not(.disabled):after,
.blogPage__link:not(.disabled):before {
    opacity: .8
}

.blogPage__link:hover:not(.disabled) {
    color: #fff
}

.blogPage__link:hover:not(.disabled):after,
.blogPage__link:hover:not(.disabled):before {
    opacity: 1
}

.blogPage__link.back-icon {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center
}

.blogPage__link.back-icon:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.766 13-6-5 6-5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
    content: "";
    display: block;
    height: 16px;
    transition: opacity .2s cubic-bezier(.455, .03, .515, .955);
    width: 16px
}

.blogPage__posts {
    display: flex;
    flex-direction: column;
    gap: var(--post-gap)
}

.blogPage__empty {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center
}

.blogPage__empty--label {
    color: #fff;
    color: var(--clr-white);
    color: hsla(0, 0%, 100%, .6);
    font-family: Squad, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 110%
}

@media(min-width:30em) {
    .blogPage__empty--label {
        font-size: 18px
    }
}

@media(min-width:90em) {
    .blogPage__empty--label {
        font-size: 20px
    }
}

.blogPage__title {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 60px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 100%;
    line-height: 75%;
    text-transform: uppercase
}

@media(min-width:30em) {
    .blogPage__title {
        font-size: 80px
    }
}

@media(min-width:48em) {
    .blogPage__title {
        font-size: 88px
    }
}

@media(min-width:64em) {
    .blogPage__title {
        font-size: 94px
    }
}

@media(min-width:90em) {
    .blogPage__title {
        font-size: 108px
    }
}

body.cn .blogPage__title,
body.jp .blogPage__title,
body.kr .blogPage__title,
body.zh-cn .blogPage__title {
    letter-spacing: .02em;
    line-height: 110%
}

body.tr .blogPage__title {
    text-transform: none
}

.blogPage__row {
    display: flex;
    flex-direction: column;
    gap: var(--post-gap);
    max-width: 1100px;
    width: 100%
}

@media(min-width:48em) {
    .blogPage__row {
        display: grid;
        grid-template-areas: "horizontal-1 horizontal-1" "horizontal-2 horizontal-2" "vertical-1 vertical-2";
        grid-template-columns: 1fr 1fr
    }

    .blogPage__row--1-full {
        grid-template-areas: "full-1 full-1" "horizontal-1 horizontal-1" "horizontal-2 horizontal-2" "vertical-1 vertical-2";
        grid-template-columns: 1fr
    }

    .blogPage__row--2-full {
        grid-template-areas: "full-1 full-1" "full-2 full-2" "horizontal-1 horizontal-1" "horizontal-2 horizontal-2";
        grid-template-columns: 1fr
    }
}

@media(min-width:64em) {
    .blogPage__row {
        grid-template-areas: "horizontal-1 vertical-1" "horizontal-2 vertical-1";
        grid-template-columns: 2fr 1fr
    }

    .blogPage__row--1-full {
        grid-template-areas: "full-1 full-1" "horizontal-1 vertical-1" "horizontal-2 vertical-1";
        grid-template-columns: 1fr
    }

    .blogPage__row--2-full {
        grid-template-areas: "full-1 full-1" "full-2 full-2" "horizontal-1 vertical-1";
        grid-template-columns: 1fr
    }
}

.blogPage__postContainer--horizontal-1 {
    grid-area: horizontal-1
}

.blogPage__postContainer--horizontal-2 {
    grid-area: horizontal-2
}

.blogPage__postContainer--vertical-1 {
    grid-area: vertical-1
}

.blogPage__postContainer--vertical-2 {
    grid-area: vertical-2
}

.blogPage__postContainer--full:first-child {
    grid-area: full-1
}

.blogPage__postContainer--full:nth-child(2) {
    grid-area: full-2
}

.blogPostPage {
    --blog-post-width: 730px;
    background: var(--eclipse-gradient)
}

.blogPostPage,
.blogPostPage__main {
    align-items: center;
    display: flex;
    justify-content: center
}

.blogPostPage__main {
    flex-direction: column;
    gap: 16px;
    max-width: var(--blog-post-width);
    padding: 20px;
    width: 100%
}

@media(min-width:48em) {
    .blogPostPage__main {
        padding: 40px 0
    }
}

.blogPostPage__link {
    align-self: flex-start;
    color: #fff;
    color: var(--clr-white);
    color: hsla(0, 0%, 100%, .4);
    font-family: Squad, sans-serif;
    font-size: 16px;
    font-weight: 900;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 100%;
    line-height: 120%;
    text-transform: uppercase;
    transition: color .2s cubic-bezier(.455, .03, .515, .955)
}

body.tr .blogPostPage__link {
    text-transform: none
}

.blogPostPage__link span {
    margin-bottom: -2px
}

.blogPostPage__link.disabled {
    opacity: 0;
    pointer-events: none
}

.blogPostPage__link:after,
.blogPostPage__link:before {
    display: none;
    opacity: .4
}

.blogPostPage__link:not(.disabled) {
    color: hsla(0, 0%, 100%, .8);
    cursor: pointer
}

.blogPostPage__link:not(.disabled):after,
.blogPostPage__link:not(.disabled):before {
    opacity: .8
}

.blogPostPage__link:hover:not(.disabled) {
    color: #fff
}

.blogPostPage__link:hover:not(.disabled):after,
.blogPostPage__link:hover:not(.disabled):before {
    opacity: 1
}

.blogPostPage__link.back-icon {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center
}

.blogPostPage__link.back-icon span {
    margin-bottom: -4px
}

.blogPostPage__link.back-icon:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.766 13-6-5 6-5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
    content: "";
    display: block;
    height: 16px;
    transition: opacity .2s cubic-bezier(.455, .03, .515, .955);
    width: 16px
}

.blogPostPage__link.back-icon,
.blogPostPage__link.next-icon,
.blogPostPage__link.prev-icon {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center
}

.blogPostPage__link.back-icon:after,
.blogPostPage__link.back-icon:before,
.blogPostPage__link.next-icon:after,
.blogPostPage__link.next-icon:before,
.blogPostPage__link.prev-icon:after,
.blogPostPage__link.prev-icon:before {
    content: "";
    height: 14px;
    transition: opacity .2s cubic-bezier(.455, .03, .515, .955);
    width: 15px
}

.blogPostPage__link.next-icon:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 13 6-6m0 0L7 1m6 6H.5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
    display: block
}

.blogPostPage__link.prev-icon:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13 2 7m0 0 6-6M2 7h12.5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
    display: block
}

.blogPostPage__pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%
}

.blogPost {
    background: #fff;
    background: var(--clr-white);
    max-width: 730px;
    max-width: var(--blog-post-width, 730px);
    z-index: 10
}

.blogPost,
.blogPostHero {
    border-radius: 16px;
    overflow: hidden;
    width: 100%
}

.blogPostHero {
    background: linear-gradient(180deg, #7900ea, #ca56f2);
    background: var(--clr-gradient-purple);
    display: flex;
    flex-direction: column-reverse
}

.blogPostHero--yellow {
    background: linear-gradient(180deg, #ffd77a, #ffba00);
    background: var(--clr-gradient-yellow)
}

.blogPostHero--blue {
    background: linear-gradient(180deg, #003d99, #06f);
    background: var(--clr-gradient-blue)
}

.blogPostHero--vertical {
    aspect-ratio: 360/658;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    width: auto
}

.blogPostHero--vertical .blogPostHero__content {
    height: 50%
}

.blogPostHero--vertical .blogPostHero__image {
    aspect-ratio: unset;
    height: 50%;
    width: 100%
}

@media(min-width:48em) {
    .blogPostHero--vertical {
        display: flex;
        flex-direction: column
    }

    .blogPostHero--vertical .blogPostHero__image {
        aspect-ratio: unset;
        height: 50%;
        width: 100%
    }
}

.blogPostHero--link {
    box-shadow: 0 4px 34px 0 rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: box-shadow .2s cubic-bezier(.455, .03, .515, .955)
}

.blogPostHero--link:hover {
    box-shadow: 0 4px 34px 0 rgba(0, 0, 0, .5)
}

.blogPostHero--link:hover .blogPostHero__icon {
    transform: scale(1.1)
}

.blogPostHero--link:active {
    box-shadow: 0 4px 34px 0 transparent
}

.blogPostHero--link:active .blogPostHero__icon {
    transform: scale(.9)
}

.blogPostHero__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    justify-content: space-between;
    padding: 32px
}

.blogPostPage .blogPostHero__content {
    padding-bottom: 48px
}

@media(min-width:48em) {
    .blogPostHero__content {
        padding: 40px
    }

    .blogPostPage .blogPostHero__content {
        padding-bottom: 56px
    }
}

.blogPostHero__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center
}

.blogPostHero__icon {
    align-items: center;
    background: #fff;
    background: var(--clr-white);
    border-radius: 100%;
    color: #000;
    color: var(--clr-black);
    display: flex;
    height: 40px;
    justify-content: center;
    transition: transform .2s cubic-bezier(.455, .03, .515, .955);
    width: 40px
}

.blogPostHero__icon:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='17' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.5 2 6 6m0 0-6 6m6-6H2' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
    background-position: 50%;
    background-size: contain;
    content: "";
    display: block;
    height: 16px;
    position: relative;
    width: 17px
}

.blogPostHero__subjectAndDate {
    color: #fff;
    color: var(--clr-white);
    color: hsla(0, 0%, 100%, .6);
    font-family: Squad, sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase
}

body.tr .blogPostHero__subjectAndDate {
    text-transform: none
}

.blogPostHero__title {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase
}

body.tr .blogPostHero__title {
    text-transform: none
}

.blogPostHero__image {
    aspect-ratio: 16/10;
    flex-shrink: 0;
    height: auto;
    width: 100%
}

.blogPostHero__image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.blogPostContent {
    --gap: 32px;
    background: #fff;
    background: var(--clr-white);
    display: flex;
    flex-direction: column;
    gap: 32px;
    gap: var(--gap);
    padding: 40px 20px 20px
}

@media(min-width:64em) {
    .blogPostContent {
        padding: 40px 60px 50px
    }
}

.blogPostContent__section,
.blogPostContent__section>div {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap)/2)
}

.blogPostContent,
.blogPostContent p {
    color: #fff;
    color: var(--clr-white);
    color: rgba(0, 0, 0, .8);
    color: var(--clr-black-80);
    font-family: Squad, sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 110%;
    white-space: pre-wrap
}

@media(min-width:30em) {

    .blogPostContent,
    .blogPostContent p {
        font-size: 18px
    }
}

@media(min-width:90em) {

    .blogPostContent,
    .blogPostContent p {
        font-size: 20px
    }
}

.blogPostContent h2 {
    color: #000;
    color: var(--clr-black)
}

.blogPostContent h3,
.blogPostContent h4,
.blogPostContent h5,
.blogPostContent h6 {
    color: rgba(0, 0, 0, .8);
    color: var(--clr-black-80)
}

.blogPostContent h3 {
    font-size: 20px;
    line-height: 120%
}

@media(min-width:64em) {
    .blogPostContent h3 {
        font-size: 24px
    }
}

.blogPostContent img {
    height: auto;
    width: 100%
}

.blogPostContent ul {
    margin: 0
}

.blogPostContent__section>.blogPostContent__feature {
    display: flex;
    flex-direction: row
}

.blogPostContent__section>.blogPostContent__feature .blogPostContent__featureImage {
    height: auto;
    width: 40%
}

.blogPostContent__section>.blogPostContent__feature .blogPostContent__featureText {
    align-items: center;
    display: flex;
    width: 60%
}

.blogPostContent__section>.blogPostContent__feature .blogPostContent__featureText--withTitle {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: calc(var(--gap)/2)
}

.blogPostContent__video img {
    height: 100%;
    width: 100%
}

.blogPostContent__videoTitle {
    background: #000;
    background: var(--clr-black);
    margin-top: calc(0px - var(--gap)/ 2);
    padding: 16px;
    position: relative
}

.blogPostContent__videoTitle p {
    color: #fff;
    color: var(--clr-white);
    font-family: Squad, sans-serif;
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase;
    text-transform: none
}

body.tr .blogPostContent__videoTitle p {
    text-transform: none
}

.nuxt-progress {
    background-color: #000;
    height: 2px;
    left: 0;
    opacity: 1;
    position: fixed;
    right: 0;
    top: 0;
    transition: width .1s, opacity .4s;
    width: 0;
    z-index: 999999
}

.nuxt-progress.nuxt-progress-notransition {
    transition: none
}

.nuxt-progress-failed {
    background-color: red
}

.wrapper {
    height: 100%;
    width: 100%
}

.analyticsModule[data-v-2cf9a51a] {
    background-color: #fff;
    display: flex;
    flex-direction: row;
    left: 0;
    opacity: .75;
    padding: 4px;
    pointer-events: none;
    position: fixed;
    top: 0;
    z-index: 1000
}

.analyticsModule__body[data-v-2cf9a51a] {
    color: #000;
    font-size: 12px;
    line-height: 1;
    white-space: pre-wrap
}

.icon[data-v-0c161787],
.icon__svg[data-v-0c161787] {
    display: flex
}

.icon__svg[data-v-0c161787] {
    height: 100%;
    max-height: var(--max-height);
    max-width: var(--max-width);
    width: 100%
}

.icon[data-v-6d08a90f] {
    display: flex;
    transition: transform .2s cubic-bezier(.455, .03, .515, .955)
}

.icon--up[data-v-6d08a90f] {
    transform: rotate(180deg)
}

.icon--right[data-v-6d08a90f] {
    transform: rotate(-90deg)
}

.icon--down[data-v-6d08a90f] {
    transform: none
}

.icon--left[data-v-6d08a90f] {
    transform: rotate(-90deg)
}

.icon__svg[data-v-6d08a90f] {
    display: flex;
    height: 100%;
    max-height: var(--max-height);
    max-width: var(--max-width);
    width: 100%
}

@keyframes float-77f24de9 {
    0% {
        transform: translateY(0) rotate(5deg)
    }

    to {
        transform: translateY(30px) rotate(-6deg)
    }
}

@keyframes float-reverse-77f24de9 {
    0% {
        transform: translateY(40px) rotate(-5deg)
    }

    to {
        transform: translateY(0) rotate(5deg)
    }
}

.rewardTrackerModule__backgroundFade[data-v-77f24de9] {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0
}

.rewardTrackerModule__backgroundFade[data-v-77f24de9]:after {
    opacity: .8
}

.featureScrollerModule[data-v-77f24de9] {
    --fade-mask-z-index: 5;
    --above-fade-mask-z-index: 6;
    --below-fade-mask-z-index: 4;
    background-color: var(--clr-pink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
    position: relative;
    width: 100%
}

.featureScrollerModule__stickyContainer[data-v-77f24de9] {
    height: 100vh;
    height: 100svh;
    left: 0;
    position: sticky;
    top: 0;
    width: 100%
}

.featureScrollerModule__backgroundBlur[data-v-77f24de9] {
    background-image: url(/squad/feature-scroller-highlight.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    height: 40vh;
    left: 0;
    mix-blend-mode: overlay;
    position: absolute;
    width: 100%
}

@keyframes bop-77f24de9 {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(16px)
    }
}

.featureScrollerModule__scrollHint[data-v-77f24de9] {
    align-items: center;
    bottom: 64px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 11
}

@media(min-width:48em) {
    .featureScrollerModule__scrollHint[data-v-77f24de9] {
        bottom: 80px
    }
}

@media screen and (max-device-width:920px)and (max-device-height:420px)and (orientation:landscape) {
    .featureScrollerModule__scrollHint[data-v-77f24de9] {
        bottom: 40px
    }
}

.featureScrollerModule__scrollHint[data-v-77f24de9]:after {
    animation: bop-77f24de9 1s ease-in-out infinite alternate;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2.5 11 8.5 9 8.5-9M2.5 2l8.5 9 8.5-9' stroke='%23fff' stroke-width='4'/%3E%3C/svg%3E");
    content: "";
    height: 24px;
    width: 22px
}

h1[data-v-77f24de9] {
    text-transform: uppercase
}

.screen[data-v-77f24de9] {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    width: 100%
}

.screen__content[data-v-77f24de9] {
    bottom: 40%;
    opacity: 0;
    position: absolute;
    transition: opacity .3s ease-out;
    z-index: var(--above-fade-mask-z-index)
}

@media screen and (max-device-width:920px)and (max-device-height:420px)and (orientation:landscape) {
    .screen__content[data-v-77f24de9] {
        bottom: 33%
    }
}

.screen[data-id=squad-up] .screen__content[data-v-77f24de9] {
    bottom: auto;
    position: relative
}

@media(min-width:48em) {
    .screen__content[data-v-77f24de9] {
        bottom: auto;
        position: relative
    }
}

.screen[data-is-active=false] .screen__content[data-v-77f24de9] {
    opacity: 0;
    transition: opacity .1s ease-out
}

.screen[data-is-active=true] .screen__content[data-v-77f24de9] {
    opacity: 1;
    transition-delay: .1s
}

.screen__content>*+[data-v-77f24de9] {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem
}

.screen__titles[data-v-77f24de9] {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.screen__subTitle[data-v-77f24de9] {
    position: relative;
    z-index: 10
}

.screen__tagline[data-v-77f24de9] {
    text-wrap: wrap
}

@media(max-width:47.99em) {
    body.jp .screen[data-id=evolve] .screen__subTitle span[data-v-77f24de9] {
        font-size: calc(var(--tagline-size)*.3)
    }
}

.screen__description[data-v-77f24de9] {
    text-wrap: balance;
    display: block;
    margin-top: 2rem;
    max-width: min(85vw, 600px);
    text-align: center;
    z-index: var(--above-fade-mask-z-index)
}

body.tr .screen__description[data-v-77f24de9] {
    margin-top: 3.5rem
}

@media screen and (max-device-width:920px)and (max-device-height:420px)and (orientation:landscape) {
    .screen__description[data-v-77f24de9] {
        margin-top: 1rem;
        max-width: min(60vw, 400px)
    }
}

.screen__decoration[data-v-77f24de9] {
    opacity: 0;
    position: absolute;
    transition: opacity .3s ease-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-min-content;
    width: min-content;
    will-change: transform, opacity;
    z-index: var(--above-fade-mask-z-index)
}

.screen[data-is-active=false] .screen__decoration[data-v-77f24de9] {
    opacity: 0;
    transition: opacity .1s ease-out
}

.screen[data-is-active=true] .screen__decoration[data-v-77f24de9] {
    opacity: 1;
    transition-delay: .1s
}

.screen__decoration[data-v-77f24de9] img {
    width: 100%
}

.screen__decoration__image[data-float=true][data-v-77f24de9] {
    animation: float-77f24de9 2s infinite alternate-reverse;
    animation: float-77f24de9 var(--animation-duration, 2s) alternate-reverse infinite;
    animation-delay: 0;
    animation-delay: var(--animation-delay, 0);
    animation-timing-function: ease-in-out;
    display: block;
    will-change: transform
}

.screen__decoration__image[data-float=true][data-float-reverse=true][data-v-77f24de9] {
    animation-name: float-reverse-77f24de9
}

.screen[data-id=action] .screen__decoration[data-v-77f24de9]>:after {
    aspect-ratio: 326/59;
    background: url(/img/shadow-pink.dc2738e.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    height: auto;
    left: 15%;
    position: absolute;
    transform: translateY(30%);
    width: 80%;
    z-index: -1
}

.screen[data-id=action] .screen__decoration[data-v-77f24de9]:first-child {
    aspect-ratio: 1;
    bottom: 10%;
    height: 25vh;
    height: 25svh;
    max-height: 250px;
    right: 50%;
    transform: translateX(10%);
    z-index: 10
}

@media(orientation:landscape) {
    .screen[data-id=action] .screen__decoration[data-v-77f24de9]:first-child {
        aspect-ratio: 1/1;
        bottom: 10%;
        height: 50vh;
        left: 5%;
        max-height: min(25vw, 500px);
        top: auto;
        transform: translateY(0) translateX(-15%)
    }
}

.screen[data-id=action] .screen__decoration[data-v-77f24de9]:nth-child(2) {
    aspect-ratio: 1/1;
    bottom: 10%;
    height: 25vh;
    height: 25svh;
    left: 50%;
    max-height: 250px;
    transform: scaleX(-1) translateX(10%);
    z-index: 11
}

@media(orientation:landscape) {
    .screen[data-id=action] .screen__decoration[data-v-77f24de9]:nth-child(2) {
        aspect-ratio: 1/1;
        bottom: 10%;
        height: 50vh;
        left: auto;
        max-height: min(25vw, 500px);
        right: 0;
        top: auto;
        transform: scaleX(-1) translateY(3%)
    }
}

.screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:first-child {
    display: none
}

@media(orientation:landscape) {
    .screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:first-child {
        aspect-ratio: 1/1;
        bottom: 55%;
        display: block;
        height: 40vh;
        right: 75%
    }
}

.screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(2) {
    display: none;
    z-index: var(--below-fade-mask-z-index)
}

@media(orientation:landscape) {
    .screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(2) {
        aspect-ratio: 1/1;
        bottom: auto;
        display: block;
        height: 30vh;
        height: 30svh;
        max-height: 300px;
        right: 48%;
        top: 0;
        transform: translateY(-40%)
    }
}

.screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(3) {
    aspect-ratio: 1/1;
    height: 20vh;
    height: 20svh;
    max-height: 300px;
    right: 50%;
    top: 0
}

@media(orientation:landscape) {
    .screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(3) {
        height: 30vh;
        left: 75%;
        max-height: 300px;
        right: auto;
        transform: translateY(-10%)
    }
}

.screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(4) {
    aspect-ratio: 1/1;
    height: 25vh;
    height: 25svh;
    left: 50%;
    max-height: 250px;
    top: 2%;
    transform: translateX(-25%);
    z-index: var(--below-fade-mask-z-index)
}

@media(orientation:landscape) {
    .screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(4) {
        bottom: 0;
        height: 35vh;
        left: auto;
        max-height: 300px;
        right: 70%;
        top: auto;
        transform: translateY(25%);
        z-index: var(--above-fade-mask-z-index)
    }
}

.screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(5) {
    aspect-ratio: 1/1;
    bottom: -10%;
    height: 25vh;
    height: 25svh;
    max-height: 200px;
    right: 45%;
    z-index: var(--below-fade-mask-z-index)
}

@media(orientation:landscape) {
    .screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(5) {
        bottom: 0;
        height: 35vh;
        max-height: 300px;
        right: 50%;
        top: auto;
        transform: translateY(50%) translateX(50%)
    }
}

.screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(6) {
    aspect-ratio: 1/1;
    bottom: 5%;
    height: 25vh;
    height: 25svh;
    max-height: 250px;
    right: 0;
    transform: translateX(15%)
}

@media(orientation:landscape) {
    .screen[data-id=squad-up] .screen__decoration[data-v-77f24de9]:nth-child(6) {
        bottom: 10%;
        height: 35vh;
        left: 70%;
        max-height: 300px;
        right: auto;
        top: auto
    }
}

.screen[data-id=evolve] .screen__decoration[data-v-77f24de9]:first-child {
    aspect-ratio: 1;
    bottom: 10%;
    height: 25vh;
    height: 25svh;
    max-height: 250px;
    right: 50%;
    transform: translateX(80%);
    z-index: 10
}

@media(orientation:landscape) {
    .screen[data-id=evolve] .screen__decoration[data-v-77f24de9]:first-child {
        bottom: 10%;
        height: 50vh;
        left: 5%;
        max-height: min(25vw, 500px);
        top: auto;
        transform: translateY(0) translateX(-25%)
    }
}

.screen[data-id=evolve] .screen__decoration[data-v-77f24de9]:first-child:after {
    aspect-ratio: 326/59;
    background: url(/img/shadow-pink.dc2738e.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    height: auto;
    left: 15%;
    position: absolute;
    transform: translateY(30%);
    transform: translate(-25%, 50%);
    width: 80%;
    z-index: -1
}

.screen[data-id=evolve] .screen__decoration[data-v-77f24de9]:nth-child(2) {
    aspect-ratio: 1/1;
    bottom: 10%;
    height: 30vh;
    height: 30svh;
    left: 50%;
    max-height: 250px;
    transform: scaleX(-1) translateX(80%);
    z-index: 11
}

@media(orientation:landscape) {
    .screen[data-id=evolve] .screen__decoration[data-v-77f24de9]:nth-child(2) {
        bottom: 15%;
        height: 50vh;
        left: auto;
        max-height: min(25vw, 500px);
        right: 0;
        top: auto;
        transform: scaleX(-1) translateY(8%) translateX(-20%)
    }
}

.screen[data-id=evolve] .screen__decoration[data-v-77f24de9]:nth-child(2):after {
    aspect-ratio: 326/59;
    background: url(/img/shadow-pink.dc2738e.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    height: auto;
    left: 15%;
    position: absolute;
    transform: translateY(30%);
    transform: translateY(50%);
    width: 80%;
    z-index: -1
}

.tracker-container[data-v-77f24de9] {
    margin-bottom: 50vh;
    margin-top: -75vh;
    pointer-events: none
}

.tracker-container li[data-v-77f24de9] {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    justify-content: center;
    opacity: 0;
    position: relative;
    width: 100%;
    z-index: 0
}

.patternBackground[data-v-61aed750] {
    align-items: center;
    bottom: 0;
    display: flex;
    gap: 60px;
    height: 100%;
    justify-content: center;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -2
}

.patternBackground__column[data-v-61aed750] {
    --col-width: 100px;
    height: 100%;
    width: 100px;
    width: var(--col-width)
}

.patternBackground__column--0[data-v-61aed750] {
    background-image: url(/img/col-1.dacbfaa.png)
}

.patternBackground__column--0[data-v-61aed750],
.patternBackground__column--1[data-v-61aed750] {
    aspect-ratio: 161/952;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    flex-shrink: 0;
    height: auto;
    opacity: .1;
    width: var(--col-width)
}

.patternBackground__column--1[data-v-61aed750] {
    background-image: url(/img/col-2.dad996d.png)
}


.resize-observer[data-v-8859cc6c] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    pointer-events: none;
    display: block;
    overflow: hidden;
    opacity: 0
}

.resize-observer[data-v-8859cc6c] object {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1
}


.icon[data-v-068b56dd],
.icon__svg[data-v-068b56dd] {
    display: flex
}

.icon__svg[data-v-068b56dd] {
    height: 100%;
    max-height: var(--max-height);
    max-width: var(--max-width);
    width: 100%
}


.icon[data-v-49c9b605] {
    display: flex
}

.icon--clickable[data-v-49c9b605] {
    cursor: pointer
}

.icon--isMoco[data-v-49c9b605] {
    transition: opacity .2s cubic-bezier(.455, .03, .515, .955), transform .2s cubic-bezier(.455, .03, .515, .955)
}

.icon--isMoco[data-v-49c9b605]:hover {
    opacity: .8
}

.icon--isMoco[data-v-49c9b605]:active,
.icon--isMoco[data-v-49c9b605]:focus,
.icon--isMoco[data-v-49c9b605]:focus-within {
    opacity: .6;
    transform: scaleX(1.2)
}

.icon__svg[data-v-49c9b605] {
    display: flex;
    height: 100%;
    max-height: var(--max-height);
    max-width: var(--max-width);
    width: 100%
}


.icon[data-v-3bb8dd22],
.icon__svg[data-v-3bb8dd22] {
    display: flex
}

.icon__svg[data-v-3bb8dd22] {
    height: 100%;
    max-height: var(--max-height);
    max-width: var(--max-width);
    width: 100%
}


.icon[data-v-763ea0fe],
.icon__svg[data-v-763ea0fe] {
    display: flex
}

.icon__svg[data-v-763ea0fe] {
    height: 100%;
    max-height: var(--max-height);
    max-width: var(--max-width);
    width: 100%
}


.icon[data-v-cb29ce64],
.icon__svg[data-v-cb29ce64] {
    display: flex
}

.icon__svg[data-v-cb29ce64] {
    height: 100%;
    max-height: var(--max-height);
    max-width: var(--max-width);
    width: 100%
}


.container[data-v-0d7c86d4] {
    --rotation: 0deg;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    row-gap: var(--gap);
    transform: rotate(0deg);
    transform: rotate(var(--rotation))
}

.container .content[data-v-0d7c86d4] {
    animation: slide-0d7c86d4 20s linear infinite;
    height: auto;
    width: 100%
}

@keyframes slide-0d7c86d4 {
    0% {
        transform: translateY(0) translateX(0)
    }

    to {
        transform: translateY(calc(var(--content-height) + var(--gap)))
    }
}


.wrapper {
    height: 100%;
    width: 100%
}

canvas {
    animation: bgAnimate 1s infinite;
}

@keyframes bgAnimate {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}