@import "https://use.typekit.net/mlt0kdw.css";

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-text-size-adjust: 100%;
    font-size: 14px
}

@media screen and (min-width:370px),
print {
    html {
        font-size: 16px
    }
}

@media screen and (min-width:1920px),
print {
    html {
        font-size: 20px
    }
}

@media screen and (min-width:2560px),
print {
    html {
        font-size: 30px
    }
}

html,
body {
    width: 100%;
    height: 100vh;
    touch-action: pan-x pan-y;
    margin: 0
}

body {
    color: #fff;
    background-color: #000;
    flex-direction: column;
    margin: 0;
    font-family: roboto, Arial;
    font-weight: 300;
    display: flex;
    overflow: hidden
}

a {
    color: #fff;
    text-decoration: none
}

h1.seo__title,
h2.seo__subtitle {
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    opacity: 0;
    pointer-events: none;
    position: absolute
}

a.hidden,
div.hidden,
input.hidden {
    pointer-events: none;
    display: none
}

div.before_exit {
    pointer-events: none
}

.reusable-elements {
    display: none
}

input:focus,
textarea:focus,
select:focus {
    outline: 0
}

::-webkit-scrollbar {
    width: 6px;
    height: 8px
}

::-webkit-scrollbar-track {
    background-color: #0000
}

::-webkit-scrollbar-thumb {
    background-color: #ffffff83
}

::placeholder {
    color: #99999a
}

:-ms-input-placeholder {
    color: #99999a
}

::-moz-placeholder {
    color: #99999a
}

.button {
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    cursor: pointer
}

.canvas-container {
    width: 100%;
    height: 100%;
    touch-action: none;
    justify-content: center;
    display: flex;
    position: absolute
}

.canvas-container canvas {
    width: 100%;
    height: 100%
}

.canvas-container.blur {
    filter: blur(5px)
}

.section {
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 100%;
    opacity: 0;
    will-change: opacity;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: absolute
}

.section.debug {
    pointer-events: none;
    opacity: 0 !important
}

.section.hidden {
    opacity: 0;
    display: none
}

.section__header {
    height: 5rem;
    align-items: flex-end;
    display: flex
}

@media screen and (min-width:820px),
print {
    .section__header {
        height: 7.5rem
    }
}

.section__body {
    width: 85%;
    height: calc(100% - 10rem);
    flex-direction: column;
    padding: 0 2rem;
    display: flex;
    overflow-x: hidden;
    overflow-y: scroll
}

.section--main .section__body {
    height: calc(100% - 5rem)
}

@media screen and (min-width:370px),
print {
    .section__body {
        height: calc(100% - 11.25rem)
    }

    .section--main .section__body {
        height: calc(100% - 6.25rem)
    }
}

@media screen and (min-width:820px),
print {
    .section__body {
        width: 70%;
        height: calc(100% - 15.625rem)
    }

    .section--main .section__body {
        height: calc(100% - 7.5rem)
    }
}

.section__title {
    color: #00b3e3;
    letter-spacing: .125rem;
    margin-bottom: 1.25rem;
    margin-right: 1.25rem;
    font-family: oscine, Arial;
    font-size: 1.875rem;
    font-weight: 700
}

@media screen and (min-width:820px),
print {
    .section__title {
        margin-bottom: 3.125rem;
        font-size: 2.5rem
    }
}

.section__description {
    max-width: 37.5rem;
    margin-bottom: 1.25rem;
    font-size: 1.125rem
}

@media screen and (min-width:820px),
print {
    .section__description {
        font-size: 1.25rem
    }
}

.section__description span {
    font-size: .75rem
}

@media screen and (min-width:820px),
print {
    .section__description span {
        font-size: .875rem
    }
}

.section__footer {
    height: 5rem
}

@media screen and (min-width:370px),
print {
    .section__footer {
        height: 6.25rem
    }
}

@media screen and (min-width:820px),
print {
    .section__footer {
        height: 8.125rem
    }
}

.section--main .section__footer {
    height: 0
}

.footer__navigation {
    grid-auto-flow: column;
    justify-content: space-between;
    display: grid
}

.section__button {
    color: #fff;
    letter-spacing: .125rem;
    background: #32323266;
    border: .125rem solid #ffffff2e;
    border-radius: 3.125rem;
    justify-content: center;
    align-items: center;
    padding: .625rem;
    font-family: roboto, Arial;
    font-size: 1.25rem;
    display: flex;
    box-shadow: 0 0 2rem #323232
}

.section__button--main {
    width: 1.5rem;
    height: 1.5rem;
    margin: .625rem
}

.section__button--main:first-child {
    margin-left: 0
}

.section__button--main:first-child svg {
    margin-left: -.125rem
}

.section__button--main:hover {
    background-color: #ffffff2e
}

.section__button:hover {
    -webkit-backdrop-filter: blur(.75rem);
    -webkit-backdrop-filter: blur(.75rem);
    backdrop-filter: blur(.75rem)
}

.section__link {
    color: #00b3e3;
    transition: opacity .2s
}

.section__link:hover {
    opacity: .7
}

.section__navigation-buttons {
    align-items: center;
    display: flex
}

.subsection {
    height: 100%;
    background-color: #0000002d;
    place-items: center
}

.subsection__header {
    width: 85%
}

.subsection__body {
    width: 90%;
    text-align: left
}

@media screen and (min-width:820px),
print {
    .subsection__body {
        width: 85%
    }
}

.subsection__title {
    color: #00b3e3;
    letter-spacing: .03125rem;
    font-family: oscine, Arial;
    font-size: 1.125rem
}

@media screen and (min-width:820px),
print {
    .subsection__title {
        font-size: 1.25rem
    }
}

.subsection__subtitle {
    color: #00b3e3;
    letter-spacing: .125rem;
    margin-bottom: 1.25rem;
    margin-right: 1.5625rem;
    font-family: oscine, Arial;
    font-size: 1.5625rem;
    font-weight: 700
}

@media screen and (min-width:820px),
print {
    .subsection__subtitle {
        margin-bottom: 3.125rem;
        font-size: 2.5rem
    }
}

.subsection__description {
    max-width: 35.625rem;
    margin-bottom: 1.25rem;
    margin-right: 2.1875rem;
    font-size: 1.125rem
}

@media screen and (min-width:370px),
print {
    .subsection__description {
        margin-bottom: 1.5625rem
    }
}

@media screen and (min-width:820px),
print {
    .subsection__description {
        margin-bottom: 2.5rem
    }
}

.subsection__description span {
    font-size: .75rem
}

@media screen and (min-width:820px),
print {
    .subsection__description span {
        font-size: .875rem
    }
}

.subsection__description a {
    color: #00b3e3;
    text-underline-offset: .125rem;
    font-weight: 700;
    text-decoration: underline
}

.subsection__description-line {
    flex-direction: column;
    margin-bottom: 1rem;
    display: flex
}

@media screen and (min-width:820px),
print {
    .subsection__description-line {
        flex-direction: row;
        align-items: flex-end;
        margin-bottom: .25rem
    }
}

.subsection__links-title {
    margin-bottom: .25rem
}

@media screen and (min-width:820px),
print {
    .subsection__links-title {
        margin-top: 2.5rem
    }
}

.subsection__links {
    width: 80%;
    margin-bottom: 1.25rem;
    display: block
}

.subsection__links--partners {
    grid-template-columns: 1fr 1fr;
    display: grid
}

@media screen and (min-width:568px),
print {
    .subsection__links--partners {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

@media screen and (min-width:820px),
print {
    .subsection__links--partners {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    }
}

@media screen and (min-width:960px),
print {
    .subsection__links {
        flex-wrap: wrap;
        display: flex
    }
}

.subsection__link {
    align-items: flex-end;
    margin-bottom: .5rem;
    margin-left: -1rem;
    padding: .5rem 1rem;
    display: flex
}

@media screen and (min-width:370px),
print {
    .subsection__link {
        margin-bottom: .625rem
    }
}

@media screen and (min-width:820px),
print {
    .subsection__link {
        margin-left: -1.25rem;
        margin-right: .625rem;
        padding: .625rem 1.25rem
    }
}

.subsection__description-line .subsection__link {
    margin: 0;
    padding: .25rem 0 0
}

@media screen and (min-width:820px),
print {
    .subsection__description-line .subsection__link {
        padding-top: 0;
        padding-left: .625rem
    }
}

.subsection__links--developer .subsection__link {
    margin-bottom: 0;
    margin-left: -1rem;
    padding: .375rem 1rem
}

.subsection__link--a {
    opacity: 1;
    filter: drop-shadow(0 0 .625rem #323232);
    transition: opacity .2s
}

.subsection__link--a:hover {
    opacity: .6
}

.subsection__link img {
    width: auto;
    height: 1.3125rem;
    object-fit: contain
}

.subsection__link-text {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-family: oscine, Arial;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex
}

@media screen and (min-width:820px),
print {
    .subsection__link-text {
        align-items: center
    }
}

.subsection__link-text span {
    margin-bottom: -1rem;
    font-size: .75rem
}

@media screen and (min-width:820px),
print {
    .subsection__link-text span {
        font-size: .875rem
    }
}

.subsection__footer {
    align-items: center;
    display: flex
}

.container {
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    z-index: 2;
    width: 100%;
    height: 100%;
    transition: filter .3s;
    position: fixed
}

.container.blur {
    filter: blur(50px)
}

.component {
    z-index: 1;
    will-change: opacity;
    display: grid;
    position: absolute
}

.label {
    pointer-events: none;
    will-change: transform;
    z-index: 9;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0
}

.label__text {
    pointer-events: auto;
    will-change: opacity;
    color: #d0f1f3;
    text-transform: uppercase;
    letter-spacing: .0625rem;
    text-align: center;
    padding: .625rem 1.5625rem;
    font-family: oscine, Arial;
    font-size: 1rem;
    line-height: 1
}

.galaxy.disabled .label__text {
    pointer-events: none
}

.label__text span {
    font-size: .6875rem
}

@media screen and (min-width:820px),
print {
    .label__text span {
        font-size: .875rem
    }
}

.label__text:before {
    content: "";
    width: calc(100% - 3.125rem);
    height: .1875rem;
    transform-origin: 0;
    opacity: 0;
    background-color: #fff;
    transition: opacity .3s, transform .4s;
    display: flex;
    position: absolute;
    bottom: 0;
    transform: scale(0)
}

@media screen and (min-width:820px),
print {
    .label__text:before {
        bottom: .625rem
    }
}

.label__text:hover:before {
    opacity: 1;
    transform: scale(1)
}

@media screen and (min-width:820px),
print {
    .label__text {
        padding: 1.25rem 1.5625rem;
        font-size: 1.25rem
    }
}

.collider {
    will-change: transform;
    z-index: 9;
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 0
}

.collider:hover+.label .label__text:before {
    opacity: 1;
    transform: scale(1)
}

.navigation__button {
    width: 3.75rem;
    height: 3.75rem;
    fill: #fff;
    background-color: #0003;
    border: .125rem solid #00b3e3;
    border-radius: 3.125rem;
    place-items: center;
    padding: 0;
    transition: box-shadow .2s;
    display: grid;
    box-shadow: 0 0 2rem #0085aa
}

.navigation__button--close svg {
    width: 1.125rem;
    height: 1.125rem
}

.navigation__button:hover {
    box-shadow: inset 0 0 3.125rem #00b3e3, 0 0 1.875rem #00b3e3
}

.background {
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: opacity;
    background-color: #0000002d;
    position: absolute
}

.loader {
    z-index: 999;
    opacity: 1;
    background-color: #000;
    place-items: center;
    top: 0
}

.loader__group {
    opacity: 1;
    flex-direction: column;
    align-items: center;
    transition: opacity 1s;
    display: flex;
    position: relative;
    overflow: hidden
}

.loader__group.hidden {
    pointer-events: none;
    opacity: 0;
    display: flex
}

.loader__animation {
    width: 34.75rem;
    margin-top: -1.125rem;
    margin-left: .8125rem;
    display: flex
}

.loader__animation svg {
    will-change: transform
}

.loader__description {
    transition: opacity 1s;
    position: absolute;
    bottom: 8rem
}

.loader__description.hidden {
    opacity: 0;
    display: block
}

.loader__progress-bar {
    width: 60%;
    max-width: 6.25rem;
    will-change: transform;
    background: #909090;
    border-radius: .375rem;
    transition: opacity .3s;
    position: absolute;
    bottom: 11.75rem;
    overflow: hidden
}

.loader__progress-bar.hidden {
    opacity: 0;
    display: block
}

.loader__progress-bar-fill {
    width: 100%;
    height: .5rem;
    transform-origin: 0;
    will-change: transform;
    background-color: #fff;
    border-radius: 1.25rem;
    position: relative;
    left: -100%
}

.partners .subsection__description {
    max-width: 41.875rem
}

.planet-modal {
    background-color: #0000005d;
    grid-template-rows: .1fr .8fr .2fr
}

.planet-modal__footer {
    align-items: center;
    display: flex
}

.planet-modal__logo {
    margin-bottom: 1.25rem
}

.planet-modal__link {
    letter-spacing: .03125rem;
    font-size: 1.125rem;
    font-weight: 700
}

.planet-modal__navigation-buttons {
    margin-top: 1.25rem
}

.planet-modal__navigation-buttons .section__button {
    background: #323232cc;
    border: .125rem solid #0000004d
}

.planet-modal__close {
    width: 1.25rem;
    background: #323232cc;
    border: .125rem solid #0000004d;
    padding: 1.25rem
}

.planet-modal__close svg {
    width: 100%;
    height: 100%;
    fill: #fff
}

.galaxy {
    background-color: #0000001d
}

@media screen and (min-width:568px),
print {
    .galaxy {
        background-color: #0000
    }
}

.galaxy.disabled {
    pointer-events: none
}

.galaxy__footer {
    z-index: 10;
    height: 4.375rem;
    justify-content: center;
    align-items: center;
    display: flex
}

@media screen and (min-width:370px),
print {
    .galaxy__footer {
        height: 5rem
    }
}

@media screen and (min-width:820px),
print {
    .galaxy__footer {
        height: 8.125rem
    }
}

.galaxy__button {
    box-shadow: none;
    font-size: 1rem
}

.galaxy__copyright {
    height: 2rem;
    letter-spacing: .0625rem;
    font-family: oscine, Arial;
    font-size: .9rem;
    display: flex;
    position: absolute;
    bottom: 0
}

.subscription {
    height: 100%;
    background-color: #0000002d
}

.subscription .section__title {
    margin-bottom: 1.875rem
}

.subscription input {
    color: #55565a;
    border: 0;
    border-radius: .3125rem;
    font-size: 1.125rem;
    font-weight: 700;
    width: 100% !important;
    height: 3rem !important;
    padding-left: .625rem !important
}

.subscription input.error {
    background-color: #ffd6d6;
    box-shadow: 0 0 0 .125rem #f006, 0 .25rem .375rem -.0625rem #ff0000a6, inset 0 .0625rem #ff000014
}

.subscription input.error::placeholder {
    color: #ff7e7e
}

.subscription input::placeholder {
    color: #55565a;
    opacity: 1;
    font-size: 1.125rem;
    font-weight: 700
}

.subscription__card {
    box-sizing: border-box;
    flex-direction: column;
    display: flex;
    color: #00b3e3 !important;
    width: 100% !important;
    font-size: 1.125rem !important
}

@media screen and (min-width:820px),
print {
    .subscription__card {
        width: 50% !important;
        font-size: 1.25rem !important
    }
}

.subscription__message {
    font-size: 2.5rem
}

.mktoFormRow {
    display: grid
}

.mktoButtonRow {
    flex-direction: column;
    align-items: center;
    display: flex !important
}

@media screen and (min-width:820px),
print {
    .mktoButtonRow {
        width: 25rem;
        flex-direction: row
    }
}

.subscription__discord-button-container {
    margin-top: 1.25rem !important
}

@media screen and (min-width:820px),
print {
    .subscription__discord-button-container {
        margin-top: 0 !important;
        margin-left: .625rem !important
    }
}

.subscription__discord-button {
    align-items: center;
    display: flex
}

.subscription__discord-button-icon {
    width: 1.875rem;
    height: 1.875rem;
    margin-right: .625rem;
    padding: 0 !important
}

@media screen and (min-width:820px),
print {
    .subscription__discord-button-icon {
        width: 2.5rem;
        height: 2.5rem
    }
}

.mktoButton {
    text-align: center;
    color: #fff;
    background-color: #00b3e3;
    border: 0;
    border-radius: 2em;
    font-size: 1.125rem;
    margin-right: 1.25rem !important;
    padding: .9375rem 1.875rem !important
}

.mktoButton:hover {
    background-color: #00b3e3b3
}

.mktoFieldDescriptor {
    margin-bottom: 1.25rem !important
}

@media screen and (min-width:568px),
print {
    .mktoFieldDescriptor {
        margin-bottom: 0 !important
    }
}

.mktoLabel {
    display: none
}

.mktoFieldWrap {
    float: initial !important
}

.mktoOffset {
    display: none
}

.mktoButtonWrap {
    margin: 0 !important
}

.subscription ul {
    color: #fff;
    margin: 1.875rem 0;
    padding: 0;
    font-size: 1.125rem;
    list-style: none
}

.subscription ul li {
    margin: 0 0 .625rem;
    padding: 0 !important
}

.subscription ul a {
    color: #00b3e3;
    transition: opacity .2s
}

.subscription ul a:hover {
    opacity: .6
}

.viverse-concept {
    height: 100%;
    background-color: #111820e6;
    grid-template-rows: .1fr .8fr .2fr;
    align-items: center
}

@media screen and (min-width:568px),
print {
    .viverse-concept__header {
        height: 4.375rem
    }
}

.viverse-concept__body {
    justify-content: center;
    align-items: center
}

@media screen and (min-width:568px),
print {
    .viverse-concept__body {
        height: calc(100% - 10.625rem)
    }
}

.viverse-concept__title {
    display: none
}

.viverse-concept__subtitle {
    margin-top: 1.25rem;
    margin-bottom: 0
}

@media screen and (min-width:568px),
print {
    .viverse-concept__subtitle {
        font-size: 1.25rem
    }
}

@media screen and (min-width:820px),
print {
    .viverse-concept__subtitle {
        margin-top: 2.5rem;
        margin-bottom: 0;
        font-size: 2.375rem
    }
}

.viverse-concept__video {
    width: calc(100% - .125rem);
    height: 100%;
    background-color: #000;
    border: .0625rem solid #00b3e3;
    justify-content: center;
    align-self: center;
    display: flex;
    position: relative;
    overflow: hidden
}

.viverse-concept__video:hover * path {
    fill: #01b2e3;
    transition: fill .4s
}

.viverse-concept__video-icon {
    align-self: flex-end;
    margin: .625rem;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0
}

.viverse-concept__video-icon svg {
    width: 3.125rem;
    height: 3.125rem
}

@media screen and (min-width:820px),
print {
    .viverse-concept__video-icon {
        margin: 1.25rem
    }

    .viverse-concept__video-icon svg {
        width: 5rem;
        height: 5rem
    }
}

.viverse-concept__video-icon * path {
    transition: fill .4s
}

.viverse-concept__video-iframe-container {
    width: 100%;
    position: relative
}

.viverse-concept__video-thumbnail {
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute
}

.viverse-concept__video-thumbnail img {
    width: auto;
    height: 100%;
    object-fit: contain
}

@media screen and (min-width:820px),
print {
    .viverse-concept__video-thumbnail img {
        width: 100%;
        height: auto
    }
}

.viverse-concept__video-iframe {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.viverse-concept__video-iframe iframe {
    width: 100%;
    height: 100%
}

.viverse-concept__description {
    max-width: 37.5rem;
    text-align: center;
    margin-bottom: 1.125rem;
    margin-right: 0
}

.what-we-build {
    background-color: #0000002d
}

.what-we-build__button {
    text-align: center;
    color: #fff;
    height: 2.5rem;
    background-color: #00b3e3;
    border: 0;
    border-radius: 2em;
    align-items: center;
    margin-left: .625rem;
    padding: .3125rem 1.25rem;
    font-size: 1.125rem;
    line-height: 1;
    display: flex
}

.what-we-build__button:hover {
    background-color: #00b3e3b3
}

.tokenomics,
.who-we-are {
    background-color: #0000002d
}

.password {
    color: #fff;
    opacity: 1;
    z-index: 999;
    background-color: #000;
    place-items: center
}

.password__body {
    justify-content: center;
    align-items: center
}

.password__label {
    margin-bottom: .625rem
}

.password__input {
    margin-bottom: .25rem;
    padding: .25rem .5rem;
    font-size: .875rem
}

.password__button {
    width: fit-content;
    border: .0625rem solid;
    padding: .3125rem .625rem
}

.password__version {
    margin-bottom: .625rem;
    font-size: .625rem
}

.home {
    grid-template-rows: .7fr .15fr .15fr;
    place-items: center
}

.home__body {
    flex-direction: column;
    align-items: center;
    display: flex
}

.home__button {
    box-sizing: border-box;
    background: #0009;
    border: 0 solid #0000;
    padding: .625rem 2.5rem;
    font-weight: 700;
    transition: box-shadow .5s;
    position: relative
}

.home__button:before {
    content: "";
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(45deg, #3a9bc1cc 0%, #a198adcc 100%);
    margin: -.3125rem;
    position: absolute;
    inset: 0
}

.home__button:hover {
    box-shadow: inset 0 0 3.125rem #00b3e3, 0 0 1.875rem #00b3e3, 0 0 3.75rem #00b3e3
}

.home__footer {
    height: 100%;
    display: flex
}

.home__link {
    letter-spacing: .0625rem;
    opacity: .8;
    margin-top: .625rem;
    transition: opacity .3s
}

.home__link:hover {
    opacity: .5
}

.footer {
    width: 100%;
    height: 5rem;
    pointer-events: none;
    grid-template-columns: 1fr 1fr 1fr;
    top: 3.75rem
}

@media screen and (min-width:820px),
print {
    .footer {
        top: auto;
        bottom: 0
    }
}

.footer__left {
    justify-content: flex-end;
    align-items: center;
    display: flex
}

@media screen and (min-width:820px),
print {
    .footer__left {
        justify-content: flex-start;
        padding: 0 .9375rem
    }
}

.footer__right {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    display: flex
}

@media screen and (min-width:820px),
print {
    .footer__right {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center
    }
}

.header {
    width: 100%;
    z-index: 2;
    pointer-events: none;
    grid-template-columns: 2fr 1fr;
    position: fixed
}

.header__left {
    align-items: center;
    display: flex
}

.header__logo {
    pointer-events: auto;
    display: flex
}

.header__logo-horizontal {
    width: 280px;
    height: 84px;
    box-sizing: border-box;
    padding: 0 22px
}

.header__logo-horizontal>svg {
    width: 100%;
    height: 100%
}

.header__logo-icon {
    width: 4.375rem
}

@media screen and (min-width:820px),
print {
    .header__logo-icon {
        width: 5rem
    }
}

.header__logo-icon img {
    width: 12.5rem
}

.header__logo-icon svg {
    width: 12.5rem;
    height: 100%
}

@media screen and (min-width:820px),
print {
    .header__logo-icon svg {
        width: 14.375rem
    }
}

.header__logo-icon svg .logo__letter {
    fill: #ffffffe6
}

.header__logo-name {
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    letter-spacing: .125rem;
    opacity: .8;
    width: 12.5rem;
    margin-left: -1.25rem;
    font-size: .875rem;
    font-weight: 700;
    transition: opacity .3s;
    display: flex
}

@media screen and (min-width:820px),
print {
    .header__logo-name {
        width: 13.75rem
    }
}

.header__logo-name:hover {
    opacity: 1
}

.header__logo-name.hidden {
    opacity: 0;
    display: flex
}

.header__logo-name img {
    width: 11.25rem;
    object-fit: contain
}

.header__logo-name svg {
    width: 12.5rem;
    height: 100%
}

@media screen and (min-width:820px),
print {
    .header__logo-name svg {
        width: 12.5rem
    }
}

.header__logo-name svg .logo__letter {
    fill: #ffffffe6
}

@media screen and (min-width:820px),
print {
    .header__logo-name {
        font-size: 1.375rem
    }
}

.header__desktop-buttons {
    pointer-events: auto;
    padding: 1.25rem;
    display: none
}

.header__desktop-buttons--left {
    padding-right: 0
}

.header__desktop-buttons--right {
    padding-left: 0
}

@media screen and (min-width:820px),
print {
    .header__desktop-buttons {
        align-items: center;
        display: flex
    }
}

.header__desktop-button,
.header__partner-button {
    text-align: center;
    letter-spacing: .03125rem;
    opacity: .9;
    align-items: center;
    margin-right: 1.25rem;
    font-family: oscine, Arial;
    font-size: 1rem;
    line-height: 1.25rem;
    transition: opacity .2s;
    display: flex
}

@media screen and (min-width:960px),
print {

    .header__desktop-button,
    .header__partner-button {
        font-size: 1.125rem
    }
}

@media screen and (min-width:1366px),
print {

    .header__desktop-button,
    .header__partner-button {
        font-size: 1.25rem
    }
}

.header__desktop-button:hover,
.header__partner-button:hover {
    opacity: .6
}

.header__partner-button {
    background-color: #000;
    border: 2px solid #fff;
    border-radius: .375rem;
    margin-right: 0;
    padding: .25rem .5rem 0;
    font-size: .875rem;
    line-height: 1.625rem
}

@media screen and (min-width:960px),
print {
    .header__partner-button {
        font-size: 1rem
    }
}

@media screen and (min-width:1366px),
print {
    .header__partner-button {
        font-size: 1.125rem
    }
}

.header__right {
    justify-content: flex-end;
    display: flex
}

.header__right-icons {
    pointer-events: auto;
    flex-direction: column;
    align-items: center;
    display: flex;
    position: absolute
}

.header__menu-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: .9375rem 1.25rem 0;
    display: flex
}

@media screen and (min-width:820px),
print {
    .header__menu-icon {
        width: 3.125rem;
        height: 3.125rem;
        display: none
    }
}

.header__menu-icon img {
    height: 1.25rem
}

.header__mute-icon {
    width: 2.5rem;
    height: 2.5rem;
    opacity: .9;
    pointer-events: auto;
    padding: .625rem 1.25rem;
    display: flex
}

@media screen and (min-width:820px),
print {
    .header__mute-icon {
        padding: 1.25rem 1.5625rem
    }
}

.header__mute-icon svg * path {
    fill: #fff;
    stroke: #fff
}

@media screen and (min-width:820px),
print {
    .header__mute-icon {
        width: 2.5rem;
        height: 2.5rem
    }
}

.menu {
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 1;
    background-color: #0000004f;
    align-items: center;
    position: fixed
}

.menu.hidden {
    pointer-events: none;
    opacity: 0;
    display: grid
}

.menu__container {
    height: 80%;
    max-height: 28.125rem;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: .75rem;
    display: flex
}

@media screen and (min-width:820px),
print {
    .menu__container {
        margin-left: 10%
    }
}

.menu__group {
    flex-direction: column;
    display: flex
}

.menu__item,
.menu__item-secondary {
    letter-spacing: .012em;
    text-transform: uppercase;
    color: #00b3e3;
    opacity: .8;
    margin-bottom: .25rem;
    padding-left: 1.25rem;
    font-family: oscine, Arial;
    font-size: 2.5rem;
    font-weight: 400;
    transition: opacity .3s
}

@media screen and (min-width:568px),
print {

    .menu__item,
    .menu__item-secondary {
        font-size: 1.875rem
    }
}

@media screen and (min-width:820px),
print {

    .menu__item,
    .menu__item-secondary {
        padding-left: 1.25rem;
        font-size: 3rem
    }
}

.menu__item:hover,
.menu__item-secondary:hover {
    opacity: 1
}

.menu__item.active,
.menu__item-secondary.active {
    letter-spacing: .125rem;
    opacity: 1;
    border-left: .3125rem solid #00b3e3;
    padding-left: .9375rem;
    font-weight: 600
}

@media screen and (min-width:820px),
print {

    .menu__item.active,
    .menu__item-secondary.active {
        margin-left: -.3125rem
    }
}

.menu__item-secondary {
    color: #fff;
    zoom: .9
}

.menu__item-secondary.active {
    border-left: .3125rem solid #fff
}