@charset "UTF-8";

    @keyframes Bounce {
        0% {
            transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        3.4% {
            transform: matrix3d(.316, 0, 0, 0, 0, .407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        4.7% {
            transform: matrix3d(.45, 0, 0, 0, 0, .599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        6.81% {
            transform: matrix3d(.659, 0, 0, 0, 0, .893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        9.41% {
            transform: matrix3d(.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        10.21% {
            transform: matrix3d(.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        13.61% {
            transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        14.11% {
            transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        17.52% {
            transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        18.72% {
            transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        21.32% {
            transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        24.32% {
            transform: matrix3d(1.151, 0, 0, 0, 0, .96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        25.23% {
            transform: matrix3d(1.134, 0, 0, 0, 0, .938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        29.03% {
            transform: matrix3d(1.063, 0, 0, 0, 0, .897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        29.93% {
            transform: matrix3d(1.048, 0, 0, 0, 0, .899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        35.54% {
            transform: matrix3d(.979, 0, 0, 0, 0, .962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        36.74% {
            transform: matrix3d(.972, 0, 0, 0, 0, .979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        41.04% {
            transform: matrix3d(.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        44.44% {
            transform: matrix3d(.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        52.15% {
            transform: matrix3d(.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        59.86% {
            transform: matrix3d(1.006, 0, 0, 0, 0, .99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        63.26% {
            transform: matrix3d(1.007, 0, 0, 0, 0, .992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        75.28% {
            transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        85.49% {
            transform: matrix3d(.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        90.69% {
            transform: matrix3d(.999, 0, 0, 0, 0, .999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

        to {
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
    }

    blockquote,
    body,
    dd,
    dl,
    dt,
    fieldset,
    figure,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    html,
    iframe,
    legend,
    li,
    ol,
    p,
    pre,
    textarea,
    ul {
        padding: 0;
        margin: 0
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 100%;
        font-weight: 400
    }

    ul {
        list-style: none
    }

    button,
    input,
    select {
        margin: 0
    }

    html {
        box-sizing: border-box;
        font-size: 62.5%;
        -webkit-text-size-adjust: none;
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: "Angus", Arial, Helvetica, sans-serif;
        color: #000;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent
    }

    *,
    :after,
    :before {
        box-sizing: inherit
    }

    embed,
    iframe,
    img,
    object,
    video {
        height: auto;
        max-width: 100%
    }

    audio {
        max-width: 100%
    }

    iframe {
        border: 0
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    td,
    th {
        padding: 0;
        text-align: left
    }

    a {
        text-decoration: none
    }

    .show-tools .stats-node,
    img {
        display: block
    }

    img:not([alt]),
    img[alt=""] {
        border: 5px dashed red
    }

    button {
        padding: 0;
        background: 0 0;
        border: 0;
        outline: 0
    }

    canvas {
        vertical-align: middle
    }

    ::-ms-clear {
        display: none
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
        appearance: none
    }

    .stats-node {
        display: none;
        position: fixed;
        z-index: 10;
        right: 0;
        bottom: 0;
        padding: .75em;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        cursor: pointer
    }

    .stats-wrapper {
        width: 100px;
        text-align: left
    }

    .stats-text {
        margin-bottom: 4px;
        font-size: 1.1rem;
        color: #333
    }

    .stats-container {
        position: relative;
        width: 100%;
        height: 30px;
        background-color: #eee
    }

    .stats-bar {
        float: left;
        width: 1px;
        height: 30px;
        background-color: #333;
        transform: scaleY(0);
        transform-origin: bottom
    }

    .menu,
    body::before {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none
    }

    body::before {
        padding: .75em 1.25em;
        opacity: 0;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        font: small-caption;
        font-size: 1.2rem;
        color: #333;
        z-index: 50
    }

    body.show-tools::before {
        opacity: 1
    }

    .menu {
        z-index: 1;
        right: 0;
        bottom: 0;
        text-align: center
    }

    .menu__container {
        overflow: auto;
        height: 100%;
        transform: translateY(100%);
        transition: transform .5s cubic-bezier(.19, 1, .22, 1);
        -webkit-overflow-scrolling: touch
    }

    .menu-is-open .menu__container {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all
    }

    .menu__inner {
        position: relative;
        z-index: 2
    }

    .menu__text {
        margin-top: 1em;
        margin-bottom: 1.5em
    }

    .menu__text a {
        border-bottom: 1px solid #000;
        color: #000;
        transition: opacity .25s cubic-bezier(.19, 1, .22, 1);
        text-decoration: none
    }

    .menu__text a:hover {
        opacity: .6
    }

    .menu__text a,
    .menu__text span {
        font-weight: 900
    }

    .menu__overlay {
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        opacity: 0;
        background-color: rgba(0, 0, 0, .85);
        transition: opacity .15s cubic-bezier(.55, 0, .1, 1)
    }

    .menu-is-open .menu__overlay {
        opacity: 1
    }

    .rotate-device {
        display: none
    }

    .bonus-bubble {
        position: fixed;
        z-index: 1;
        top: -20px;
        left: -20px;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        font-size: .7em;
        font-weight: 900;
        line-height: 1;
        color: #fff;
        text-align: center;
        font-display: block
    }

    .bonus-bubble [data-stroke]::after {
        content: none
    }

    .button {
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        align-items: center;
        padding-top: .27em;
        padding-right: .27em;
        font-family: inherit;
        font-size: inherit;
        font-weight: 700;
        color: inherit;
        cursor: pointer;
        pointer-events: all
    }

    .button::after {
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;
        bottom: .27em;
        left: .27em;
        background-color: #fff;
        border: 2px solid #000;
        border-radius: 2em;
        content: ""
    }

    .button--back,
    .button--close,
    .button--open {
        transform: translateY(0);
        transition: transform .3s cubic-bezier(.18, .89, .34, 1.02) .3s
    }

    .view--hidden-left .button--back,
    .view--hidden-left .button--close,
    .view--hidden-left .button--open,
    .view--hidden-right .button--back,
    .view--hidden-right .button--close,
    .view--hidden-right .button--open {
        transform: translateY(-20vh);
        transition: transform .3s cubic-bezier(.18, .89, .34, 1.02)
    }

    .button--play,
    .button--restart,
    .button--submit {
        color: #fff;
        text-transform: uppercase
    }

    .button>:first-child {
        position: relative;
        z-index: 1;
        background-color: #fff;
        border: 2px solid #000;
        border-radius: 2em;
        transition: transform .4s cubic-bezier(0, 3, .79, .72)
    }

    .button:hover>:first-child {
        background-color: #009dff;
        color: #fff;
        transform: translate(.108em, -.108em);
        transition: transform .25s cubic-bezier(.2, .01, .2, 1)
    }

    .button.is-muted>:first-child,
    .button:active>:first-child {
        transform: translate(.27em, -.27em);
        transition: transform .25s cubic-bezier(.2, .01, .2, 1)
    }

    .button--opt-in>:first-child,
    .button--play>:first-child,
    .button--restart>:first-child,
    .button--submit>:first-child {
        background-color: #009dff
    }

    .button--facebook>:first-child {
        background-color: #3b5998
    }

    .button--facebook:hover>:first-child,
    .button--twitter:hover>:first-child {
        background-color: #fff
    }

    .button--facebook:hover svg {
        fill: #3b5998
    }

    .button--twitter>:first-child {
        background-color: #0099d6
    }

    .button--twitter:hover svg {
        fill: #0099d6
    }

    .button--cookies {
        padding: 0
    }

    .button--cookies::after {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #ff586a;
        transition: transform .25s cubic-bezier(.2, .01, .2, 1)
    }

    .button--cookies .button__icon {
        background: 0 0;
        border: 0
    }

    .button--cookies:hover::after {
        background-color: #ffb300
    }

    .button--cookies:hover>:first-child {
        background: 0 0;
        transform: none
    }

    .button--cookies:hover svg {
        transform: rotate(180deg);
        transition: transform .52s cubic-bezier(0, .75, .3, 1.3)
    }

    .button--cookies:active::after {
        transform: scale(1.1)
    }

    .button--cookies:active>:first-child {
        transform: none
    }

    .button--next:hover .button__icon svg {
        fill: #fff
    }

    .button--opt-in:hover>:first-child {
        background: 0 0;
        transform: translate(.27em, -.27em)
    }

    .button__text {
        display: block;
        padding: .6em 3em .8em
    }

    .button__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.7025em;
        height: 2.7025em;
        pointer-events: none
    }

    .button__icon svg {
        width: 50%;
        height: 50%;
        stroke: #000;
        stroke-width: 2px;
        fill: #fff
    }

    .button--open .button__icon svg {
        width: 45%;
        height: 45%;
        stroke-width: 2.5px
    }

    .button--close .button__icon svg {
        width: 45%;
        height: 45%
    }

    .button--back .button__icon svg {
        width: 45%;
        height: 45%;
        stroke-width: 2.5px
    }

    .button--next .button__icon svg {
        width: 35%;
        height: 35%;
        stroke: none;
        fill: #000
    }

    .button--opt-in .button__icon svg {
        fill: #fff;
        stroke: none
    }

    .button--plus .button__icon svg {
        width: 55%;
        height: 55%;
        stroke: none;
        fill: #000
    }

    .button--cookies .button__icon svg {
        width: 30%;
        height: 30%
    }

    .button--mute .button__icon svg {
        width: 65%;
        stroke: none
    }

    .button__label {
        display: none;
        top: 50%;
        left: 100%;
        padding-left: 1em;
        font-weight: 700;
        color: #fff;
        transform: translateY(-50%);
        text-transform: uppercase
    }

    .button__label,
    .button__label[data-stroke],
    .canvas canvas {
        position: absolute
    }

    .canvas {
        position: fixed;
        z-index: 0;
        top: 0;
        left: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        background: #fff;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent
    }

    .canvas canvas {
        top: 0;
        left: 0;
        transform: translateZ(0)
    }

    .canvas canvas:hover {
        cursor: pointer
    }

    .canvas__intro-mask-container {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        justify-content: center
    }

    .canvas__intro-mask {
        z-index: 1;
        pointer-events: none
    }

    .cookies {
        position: fixed;
        z-index: 11;
        bottom: -2px;
        background-color: #fff;
        border: 2px solid #000;
        border-top-left-radius: 1em;
        border-top-right-radius: 1em;
        transition: transform .3s, visibility 0s linear .3s
    }

    .cookies.is-hidden {
        visibility: hidden;
        transform: translateY(100%)
    }

    .cookies__text {
        text-align: center
    }

    .cookies__text a {
        border-bottom: 1px solid #000;
        color: inherit
    }

    .extra-jump,
    .extra-jump h2 {
        position: fixed;
        left: 0;
        pointer-events: none
    }

    .extra-jump {
        top: 0;
        overflow: hidden;
        height: 100%;
        color: #fff;
        text-transform: uppercase;
        width: 100%
    }

    .extra-jump h2 {
        z-index: 3;
        right: 0;
        bottom: calc(25vh - 1em);
        width: 400px;
        max-width: 100vw;
        margin: 0 auto;
        font-size: 3.5em;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        font-display: block
    }

    .extra-jump h2 [data-stroke]::after,
    .extra-jump h2 [data-stroke]::before {
        -webkit-text-stroke: .1em
    }

    .extra-jump h2:first-of-type {
        z-index: 3;
        bottom: calc(25vh);
        font-size: 5em
    }

    .extra-jump .bubble-wrapper {
        position: fixed;
        z-index: 1;
        top: -1.8em;
        left: -1.8em;
        width: 3.6em;
        height: 3.6em;
        background-image: linear-gradient(-65deg, #1e95cc 0%, #1ecc95 22%, #fff445 46%, #ffae45 69%, #ff6c45 85%, #ff458b 100%);
        border: 2px solid #000;
        border-radius: 100px;
        font-size: 1.8em;
        font-weight: 700;
        line-height: 3.6em;
        text-align: center
    }

    .extra-jump .bubble-wrapper:not(.wrapper--gl) {
        line-height: 3.2em
    }

    .extra-jump .bubble-wrapper.wrapper--gl:nth-of-type(3n+0) {
        background-image: linear-gradient(-65deg, #ffae45 0%, #ff458b 85%)
    }

    .extra-jump .bubble-wrapper.wrapper--gl:nth-of-type(3n+1) {
        background-image: linear-gradient(-65deg, #ffe539 0%, #ff6c45 85%)
    }

    .extra-jump .bubble-wrapper.wrapper--gl:nth-of-type(3n+2) {
        background-image: linear-gradient(-65deg, #1e95cc 0%, #1ecc95 85%)
    }

    .extra-jump .bubble--gl {
        display: inline-block;
        vertical-align: center;
        width: 2.8em;
        height: auto;
        margin-top: .95em
    }

    .extra-jump .bubble--score>span {
        color: #fff
    }

    .col,
    .row {
        box-sizing: border-box
    }

    .row {
        display: flex;
        flex: 0 1 auto;
        flex-direction: row;
        flex-wrap: wrap
    }

    .row.reverse {
        flex-direction: row-reverse
    }

    .row.natural-height {
        align-items: flex-start
    }

    .row.flex-column {
        flex-direction: column
    }

    .col {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
        padding: 0 10px
    }

    .col.reverse {
        flex-direction: column-reverse
    }

    .first {
        order: -1
    }

    .last {
        order: 1
    }

    .align-start {
        align-self: flex-start
    }

    .align-end {
        align-self: flex-end
    }

    .align-center {
        align-self: center
    }

    .align-baseline {
        align-self: baseline
    }

    .align-stretch {
        align-self: stretch
    }

    .col-xs,
    .col-xs-1 {
        box-sizing: border-box;
        padding: 0 10px
    }

    .col-xs {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }

    .col-xs-1 {
        flex-basis: 8.33333%;
        max-width: 8.33333%
    }

    .col-xs-offset-1 {
        margin-left: 8.33333%
    }

    .col-xs-2 {
        box-sizing: border-box;
        flex-basis: 16.66667%;
        max-width: 16.66667%;
        padding: 0 10px
    }

    .col-xs-offset-2 {
        margin-left: 16.66667%
    }

    .col-xs-3 {
        box-sizing: border-box;
        flex-basis: 25%;
        max-width: 25%;
        padding: 0 10px
    }

    .col-xs-offset-3 {
        margin-left: 25%
    }

    .col-xs-4 {
        box-sizing: border-box;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
        padding: 0 10px
    }

    .col-xs-offset-4 {
        margin-left: 33.33333%
    }

    .col-xs-5 {
        box-sizing: border-box;
        flex-basis: 41.66667%;
        max-width: 41.66667%;
        padding: 0 10px
    }

    .col-xs-offset-5 {
        margin-left: 41.66667%
    }

    .col-xs-6 {
        box-sizing: border-box;
        flex-basis: 50%;
        max-width: 50%;
        padding: 0 10px
    }

    .col-xs-offset-6 {
        margin-left: 50%
    }

    .col-xs-7 {
        box-sizing: border-box;
        flex-basis: 58.33333%;
        max-width: 58.33333%;
        padding: 0 10px
    }

    .col-xs-offset-7 {
        margin-left: 58.33333%
    }

    .col-xs-8 {
        box-sizing: border-box;
        flex-basis: 66.66667%;
        max-width: 66.66667%;
        padding: 0 10px
    }

    .col-xs-offset-8 {
        margin-left: 66.66667%
    }

    .col-xs-9 {
        box-sizing: border-box;
        flex-basis: 75%;
        max-width: 75%;
        padding: 0 10px
    }

    .col-xs-offset-9 {
        margin-left: 75%
    }

    .col-xs-10 {
        box-sizing: border-box;
        flex-basis: 83.33333%;
        max-width: 83.33333%;
        padding: 0 10px
    }

    .col-xs-offset-10 {
        margin-left: 83.33333%
    }

    .col-xs-11 {
        box-sizing: border-box;
        flex-basis: 91.66667%;
        max-width: 91.66667%;
        padding: 0 10px
    }

    .col-xs-offset-11 {
        margin-left: 91.66667%
    }

    .col-xs-12 {
        box-sizing: border-box;
        flex-basis: 100%;
        max-width: 100%;
        padding: 0 10px
    }

    .col-xs-offset-12 {
        margin-left: 100%
    }

    .row.start-xs {
        justify-content: flex-start
    }

    .row.center-xs {
        justify-content: center
    }

    .row.end-xs {
        justify-content: flex-end
    }

    .row.top-xs {
        align-items: flex-start
    }

    .row.middle-xs {
        align-items: center
    }

    .row.bottom-xs {
        align-items: flex-end
    }

    .row.around-xs {
        justify-content: space-around
    }

    .row.between-xs {
        justify-content: space-between
    }

    .first-xs {
        order: -1
    }

    .last-xs {
        order: 1
    }

    .col-gutter-lr {
        padding: 0 0 10px
    }

    .col-no-gutter {
        padding: 0
    }

    .show {
        display: block !important
    }

    .row.show,
    .row.show-xs {
        display: flex !important
    }

    .hide {
        display: none !important
    }

    .show-xs {
        display: block !important
    }

    .hide-xs {
        display: none !important
    }

    .row {
        width: auto;
        margin: 0 -10px
    }

    .col-auto {
        flex: 0 0 auto
    }

    .flex-grid {
        position: fixed;
        z-index: 5;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        pointer-events: none
    }

    .show-tools .flex-grid {
        opacity: 1
    }

    .flex-grid * {
        height: inherit
    }

    .flex-grid__item:not(:first-child) {
        border-left: 1px dashed rgba(128, 0, 128, .7)
    }

    .flex-grid__item::before {
        display: block;
        height: 100%;
        background-color: rgba(128, 0, 128, .25);
        content: ""
    }

    @font-face {
        font-family: "Angus";
        src: url(../../legacy/fonts/Angus-Regular.woff2) format("woff2"), url(../../legacy/fonts/Angus-Regular.woff) format("woff");
        font-style: normal;
        font-weight: 400;
        font-display: block
    }

    @font-face {
        font-family: "Angus";
        src: url(../../legacy/fonts/Angus-Bold.woff2) format("woff2"), url(../../legacy/fonts/Angus-Bold.woff) format("woff");
        font-style: normal;
        font-weight: 700;
        font-display: block
    }

    @font-face {
        font-family: "Angus";
        src: url(../../legacy/fonts/Angus-Extrabold.woff2) format("woff2"), url(../../legacy/fonts/Angus-Extrabold.woff) format("woff");
        font-style: normal;
        font-weight: 900;
        font-display: block
    }

    [data-stroke] {
        display: inline-block;
        position: relative;
        pointer-events: all
    }

    [data-stroke]::after,
    [data-stroke]::before {
        position: absolute;
        right: 0;
        left: 0;
        color: #000;
        -webkit-text-stroke: .16em #000;
        content: attr(data-stroke)
    }

    [data-stroke]::after {
        top: .1em
    }

    .view,
    [data-stroke] span {
        position: relative;
        z-index: 1
    }

    html * {
        -webkit-user-select: inherit;
        -moz-user-select: inherit;
        -ms-user-select: inherit;
        user-select: inherit
    }

    .presentation-mode body {
        cursor: none !important
    }

    .presentation-mode #root,
    .presentation-mode .canvas-ui {
        display: none
    }

    .view {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden
    }

    .game {
        pointer-events: none
    }

    .view__container,
    .view__inner {
        height: 100%
    }

    .view__container {
        transform-origin: 0 0;
        transition: transform .5s cubic-bezier(.18, .89, .34, 1.02)
    }

    .view--hidden-right .view__container {
        transform: translateX(100vw)
    }

    .view--hidden-left .view__container {
        transform: translateX(-100vw)
    }

    .view--hidden-right .view__inner>div {
        transform: translateX(10vw)
    }

    .view--hidden-left .view__inner>div {
        transform: translateX(-10vw)
    }

    body:not(.show-tools) .__datgui,
    body:not(.show-tools) .__stats {
        display: none
    }

    .grecaptcha-badge {
        display: none
    }

    .fill-black {
        fill: #000
    }

    .menu__content,
    .menu__gfg {
        border: 2px solid #000;
        border-radius: 2em;
        transform: translateY(15vh)
    }

    .menu__content {
        position: relative;
        margin-top: 3.7em;
        padding: 3em 1.5em 1.5em;
        background-color: #fff;
        transition: transform .5s cubic-bezier(.19, 1, .22, 1)
    }

    .menu-is-open .menu__content,
    .menu-is-open .menu__gfg {
        transform: translateY(0)
    }

    .menu__gfg {
        margin-top: .7em;
        padding: 1em 1.5em;
        background-color: #a3238e;
        transition: transform .5s cubic-bezier(.19, 1, .22, 1) .075s
    }

    .menu__gfg .menu__text {
        color: #fff
    }

    .menu__gfg .button__text {
        padding-right: 1.5em;
        padding-left: 1.5em
    }

    .menu__title {
        position: absolute;
        top: 0;
        left: 50%;
        overflow: hidden;
        width: 100%;
        max-width: 720px;
        transform: translate(-50%, -65%)
    }

    .menu__title .title {
        position: absolute;
        z-index: 1;
        top: .6em;
        left: 50%;
        width: 50em;
        height: 50em;
        margin-left: -25em;
        border-radius: 100%
    }

    .menu__title .title__letter {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1em;
        height: 50%;
        margin-left: -.5em;
        transform-origin: bottom center
    }

    .menu__title .title__letter:nth-child(1) {
        z-index: -1;
        transform: rotate(-7.89643deg)
    }

    .menu__title .title__letter:nth-child(2) {
        z-index: -2;
        transform: rotate(-6.59286deg)
    }

    .menu__title .title__letter:nth-child(3) {
        z-index: -3;
        transform: rotate(-5.28929deg)
    }

    .menu__title .title__letter:nth-child(4) {
        z-index: -4;
        transform: rotate(-3.98571deg)
    }

    .menu__title .title__letter:nth-child(5) {
        z-index: -5;
        transform: rotate(-2.68214deg)
    }

    .menu__title .title__letter:nth-child(6) {
        z-index: -6;
        transform: rotate(-1.37857deg)
    }

    .menu__title .title__letter:nth-child(7) {
        z-index: -7;
        transform: rotate(-.075deg)
    }

    .menu__title .title__letter:nth-child(8) {
        z-index: -8;
        transform: rotate(1.22857deg)
    }

    .menu__title .title__letter:nth-child(9) {
        z-index: -9;
        transform: rotate(2.53214deg)
    }

    .menu__title .title__letter:nth-child(10) {
        z-index: -10;
        transform: rotate(3.83571deg)
    }

    .menu__title .title__letter:nth-child(11) {
        z-index: -11;
        transform: rotate(5.13929deg)
    }

    .menu__title .title__letter:nth-child(12) {
        z-index: -12;
        transform: rotate(6.44286deg)
    }

    .menu__title .title__letter:nth-child(13) {
        z-index: -13;
        transform: rotate(7.74643deg)
    }

    .menu__title .title__letter:nth-child(14) {
        z-index: -14;
        transform: rotate(9.05deg)
    }

    .menu__title-bg {
        width: 20em;
        height: 6em;
        margin: 0 auto;
        background: no-repeat 50% 50%/contain
    }

    .play-button {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateY(15%);
        text-align: center
    }

    .view:not(.is-visible) .play-button {
        visibility: hidden
    }

    .preloader {
        display: flex;
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        justify-content: center;
        background: #fff;
        font-size: 3rem;
        color: #000;
        transition: opacity .2s;
        pointer-events: none;
        will-change: opacity
    }

    .preloader--hidden {
        opacity: 0
    }

    .preloader-content {
        position: relative;
        overflow: hidden;
        width: 40vw;
        max-width: 300px;
        height: 40vw;
        max-height: 300px
    }

    .preloader-content svg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        height: 100%;
        transform: translate(-50%, -50%)
    }

    .preloader-canvas {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0
    }

    .preloader-canvas.is-visible {
        opacity: 1
    }

    .preloader-fonts {
        position: fixed;
        top: 50vh;
        left: 50vw;
        overflow: hidden;
        width: 1px;
        height: 1px;
        opacity: .01;
        color: #fff;
        pointer-events: none
    }

    .preloader-fonts span:nth-child(0) {
        font-weight: 400
    }

    .preloader-fonts span:nth-child(1) {
        font-weight: 700
    }

    .preloader-fonts span:nth-child(2) {
        font-weight: 900
    }

    .routes {
        display: none;
        position: fixed;
        z-index: 1000;
        right: 0;
        bottom: 0;
        padding: 1em 1.25em;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        font: small-caption;
        font-size: 1.2rem;
        line-height: 1.5;
        text-align: right
    }

    .show-tools .routes {
        display: block
    }

    .routes__list-link {
        display: block;
        color: #333
    }

    .views .title {
        font-size: 1.6em;
        font-weight: 900;
        color: #fff;
        text-transform: uppercase;
        pointer-events: none
    }

    @media only screen and (min-width:320px) {
        body::before {
            content: "xs ≥ 320px"
        }

        .col-xs-auto {
            flex: 0 0 auto
        }
    }

    @media only screen and (min-width:320px) and (max-width:767px) {
        body {
            font-size: calc(1.11607vw + 9.42857px)
        }

        .container {
            padding: calc(2.23214vw + 2.85714px)
        }
    }

    @media only screen and (min-width:320px) and (max-width:517px) {
        .canvas__intro-mask {
            width: calc(71.9101vh - 7em*.7191);
            max-width: calc(100vw - 7em);
            height: calc(139.0625vw - 7em*1.390625);
            max-height: calc(100vh - 7em)
        }
    }

    @media only screen and (min-width:518px) and (max-width:767px) {
        .canvas__intro-mask {
            width: calc(71.9101vh - 8.5em*.7191);
            max-width: calc(100vw - 8.5em);
            height: calc(139.0625vw - 8.5em*1.390625);
            max-height: calc(100vh - 8.5em)
        }
    }

    @media only screen and (min-width:720px) and (max-width:991px) and (orientation:landscape) {
        .rotate-device__content {
            padding: 1em 2em;
            font-size: 1.5em
        }

        .rotate-device__picture {
            width: 10em;
            margin: 2em auto
        }
    }

    @media only screen and (min-width:768px) and (max-width:1199px) {
        .cookies .container {
            padding-top: .5em;
            padding-bottom: .5em
        }

        body {
            font-size: calc(1.62037vw + 5.55556px)
        }

        .container {
            padding: calc(3.47222vw - 1.66667px)
        }
    }

    @media only screen and (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (max-height:1099px) {

        .contest,
        .result {
            position: relative
        }
    }

    @media only screen and (min-width:768px) {
        body::before {
            content: "sm ≥ 768px"
        }

        .bonus-bubble {
            font-size: .7em
        }

        .button--cookies .button__icon,
        .button--cookies::after {
            width: 2.2em;
            height: 2.2em
        }

        .col-sm,
        .col-sm-1 {
            box-sizing: border-box;
            padding: 0 10px
        }

        .col-sm {
            flex-grow: 1;
            flex-basis: 0;
            max-width: 100%
        }

        .col-sm-1 {
            flex-basis: 8.33333%;
            max-width: 8.33333%
        }

        .col-sm-offset-1 {
            margin-left: 8.33333%
        }

        .col-sm-2 {
            box-sizing: border-box;
            flex-basis: 16.66667%;
            max-width: 16.66667%;
            padding: 0 10px
        }

        .col-sm-offset-2 {
            margin-left: 16.66667%
        }

        .col-sm-3 {
            box-sizing: border-box;
            flex-basis: 25%;
            max-width: 25%;
            padding: 0 10px
        }

        .col-sm-offset-3 {
            margin-left: 25%
        }

        .col-sm-4 {
            box-sizing: border-box;
            flex-basis: 33.33333%;
            max-width: 33.33333%;
            padding: 0 10px
        }

        .col-sm-offset-4 {
            margin-left: 33.33333%
        }

        .col-sm-5 {
            box-sizing: border-box;
            flex-basis: 41.66667%;
            max-width: 41.66667%;
            padding: 0 10px
        }

        .col-sm-offset-5 {
            margin-left: 41.66667%
        }

        .col-sm-6 {
            box-sizing: border-box;
            flex-basis: 50%;
            max-width: 50%;
            padding: 0 10px
        }

        .col-sm-offset-6 {
            margin-left: 50%
        }

        .col-sm-7 {
            box-sizing: border-box;
            flex-basis: 58.33333%;
            max-width: 58.33333%;
            padding: 0 10px
        }

        .col-sm-offset-7 {
            margin-left: 58.33333%
        }

        .col-sm-8 {
            box-sizing: border-box;
            flex-basis: 66.66667%;
            max-width: 66.66667%;
            padding: 0 10px
        }

        .col-sm-offset-8 {
            margin-left: 66.66667%
        }

        .col-sm-9 {
            box-sizing: border-box;
            flex-basis: 75%;
            max-width: 75%;
            padding: 0 10px
        }

        .col-sm-offset-9 {
            margin-left: 75%
        }

        .col-sm-10 {
            box-sizing: border-box;
            flex-basis: 83.33333%;
            max-width: 83.33333%;
            padding: 0 10px
        }

        .col-sm-offset-10 {
            margin-left: 83.33333%
        }

        .col-sm-11 {
            box-sizing: border-box;
            flex-basis: 91.66667%;
            max-width: 91.66667%;
            padding: 0 10px
        }

        .col-sm-offset-11 {
            margin-left: 91.66667%
        }

        .col-sm-12 {
            box-sizing: border-box;
            flex-basis: 100%;
            max-width: 100%;
            padding: 0 10px
        }

        .col-sm-offset-12 {
            margin-left: 100%
        }

        .row.start-sm {
            justify-content: flex-start
        }

        .row.center-sm {
            justify-content: center
        }

        .row.end-sm {
            justify-content: flex-end
        }

        .row.top-sm {
            align-items: flex-start
        }

        .row.middle-sm {
            align-items: center
        }

        .row.bottom-sm {
            align-items: flex-end
        }

        .row.around-sm {
            justify-content: space-around
        }

        .row.between-sm {
            justify-content: space-between
        }

        .first-sm {
            order: -1
        }

        .last-sm {
            order: 1
        }

        .show-sm {
            display: block !important
        }

        .row.show-sm {
            display: flex !important
        }

        .hide-sm {
            display: none !important
        }

        .col-sm-auto {
            flex: 0 0 auto
        }
    }

    @media only screen and (min-width:768px) and (max-width:991px) {
        .canvas__intro-mask {
            width: calc(71.9101vh - 14em*.7191);
            max-width: calc(100vw - 14em);
            height: calc(139.0625vw - 14em*1.390625);
            max-height: calc(100vh - 14em)
        }

        .cookies__text {
            font-size: .8em
        }

        .show-sm-only {
            display: block !important
        }

        .row.show-sm-only {
            display: flex !important
        }

        .hide-sm-only {
            display: none !important
        }
    }

    @media only screen and (min-width:992px) {
        body::before {
            content: "md ≥ 992px"
        }

        .menu .button--twitter {
            margin-right: .5em
        }

        .bonus-bubble {
            font-size: .7em
        }

        .canvas__intro-mask {
            width: calc(71.9101vh - 10em*.7191);
            max-width: calc(100vw - 10em);
            height: calc(139.0625vw - 10em*1.390625);
            max-height: calc(100vh - 10em)
        }

        .cookies {
            left: 50%;
            width: 100%;
            max-width: 70%;
            margin-left: -35%
        }

        .col-md,
        .col-md-1 {
            box-sizing: border-box;
            padding: 0 10px
        }

        .col-md {
            flex-grow: 1;
            flex-basis: 0;
            max-width: 100%
        }

        .col-md-1 {
            flex-basis: 8.33333%;
            max-width: 8.33333%
        }

        .col-md-offset-1 {
            margin-left: 8.33333%
        }

        .col-md-2 {
            box-sizing: border-box;
            flex-basis: 16.66667%;
            max-width: 16.66667%;
            padding: 0 10px
        }

        .col-md-offset-2 {
            margin-left: 16.66667%
        }

        .col-md-3 {
            box-sizing: border-box;
            flex-basis: 25%;
            max-width: 25%;
            padding: 0 10px
        }

        .col-md-offset-3 {
            margin-left: 25%
        }

        .col-md-4 {
            box-sizing: border-box;
            flex-basis: 33.33333%;
            max-width: 33.33333%;
            padding: 0 10px
        }

        .col-md-offset-4 {
            margin-left: 33.33333%
        }

        .col-md-5 {
            box-sizing: border-box;
            flex-basis: 41.66667%;
            max-width: 41.66667%;
            padding: 0 10px
        }

        .col-md-offset-5 {
            margin-left: 41.66667%
        }

        .col-md-6 {
            box-sizing: border-box;
            flex-basis: 50%;
            max-width: 50%;
            padding: 0 10px
        }

        .col-md-offset-6 {
            margin-left: 50%
        }

        .col-md-7 {
            box-sizing: border-box;
            flex-basis: 58.33333%;
            max-width: 58.33333%;
            padding: 0 10px
        }

        .col-md-offset-7 {
            margin-left: 58.33333%
        }

        .col-md-8 {
            box-sizing: border-box;
            flex-basis: 66.66667%;
            max-width: 66.66667%;
            padding: 0 10px
        }

        .col-md-offset-8 {
            margin-left: 66.66667%
        }

        .col-md-9 {
            box-sizing: border-box;
            flex-basis: 75%;
            max-width: 75%;
            padding: 0 10px
        }

        .col-md-offset-9 {
            margin-left: 75%
        }

        .col-md-10 {
            box-sizing: border-box;
            flex-basis: 83.33333%;
            max-width: 83.33333%;
            padding: 0 10px
        }

        .col-md-offset-10 {
            margin-left: 83.33333%
        }

        .col-md-11 {
            box-sizing: border-box;
            flex-basis: 91.66667%;
            max-width: 91.66667%;
            padding: 0 10px
        }

        .col-md-offset-11 {
            margin-left: 91.66667%
        }

        .col-md-12 {
            box-sizing: border-box;
            flex-basis: 100%;
            max-width: 100%;
            padding: 0 10px
        }

        .col-md-offset-12 {
            margin-left: 100%
        }

        .row.start-md {
            justify-content: flex-start
        }

        .row.center-md {
            justify-content: center
        }

        .row.end-md {
            justify-content: flex-end
        }

        .row.top-md {
            align-items: flex-start
        }

        .row.middle-md {
            align-items: center
        }

        .row.bottom-md {
            align-items: flex-end
        }

        .row.around-md {
            justify-content: space-around
        }

        .row.between-md {
            justify-content: space-between
        }

        .first-md {
            order: -1
        }

        .last-md {
            order: 1
        }

        .show-md {
            display: block !important
        }

        .row.show-md {
            display: flex !important
        }

        .hide-md {
            display: none !important
        }

        .col-md-auto {
            flex: 0 0 auto
        }

        .menu__content .button--text {
            margin-bottom: 1em
        }
    }

    @media only screen and (min-width:992px) and (max-width:1199px) {
        .cookies__text {
            font-size: .7em
        }

        .show-md-only {
            display: block !important
        }

        .row.show-md-only {
            display: flex !important
        }

        .hide-md-only {
            display: none !important
        }
    }

    @media only screen and (min-width:1200px) {
        body::before {
            content: "lg ≥ 1200px"
        }

        .col-lg,
        .col-lg-1 {
            box-sizing: border-box;
            padding: 0 10px
        }

        .col-lg {
            flex-grow: 1;
            flex-basis: 0;
            max-width: 100%
        }

        .col-lg-1 {
            flex-basis: 8.33333%;
            max-width: 8.33333%
        }

        .col-lg-offset-1 {
            margin-left: 8.33333%
        }

        .col-lg-2 {
            box-sizing: border-box;
            flex-basis: 16.66667%;
            max-width: 16.66667%;
            padding: 0 10px
        }

        .col-lg-offset-2 {
            margin-left: 16.66667%
        }

        .col-lg-3 {
            box-sizing: border-box;
            flex-basis: 25%;
            max-width: 25%;
            padding: 0 10px
        }

        .col-lg-offset-3 {
            margin-left: 25%
        }

        .col-lg-4 {
            box-sizing: border-box;
            flex-basis: 33.33333%;
            max-width: 33.33333%;
            padding: 0 10px
        }

        .col-lg-offset-4 {
            margin-left: 33.33333%
        }

        .col-lg-5 {
            box-sizing: border-box;
            flex-basis: 41.66667%;
            max-width: 41.66667%;
            padding: 0 10px
        }

        .col-lg-offset-5 {
            margin-left: 41.66667%
        }

        .col-lg-6 {
            box-sizing: border-box;
            flex-basis: 50%;
            max-width: 50%;
            padding: 0 10px
        }

        .col-lg-offset-6 {
            margin-left: 50%
        }

        .col-lg-7 {
            box-sizing: border-box;
            flex-basis: 58.33333%;
            max-width: 58.33333%;
            padding: 0 10px
        }

        .col-lg-offset-7 {
            margin-left: 58.33333%
        }

        .col-lg-8 {
            box-sizing: border-box;
            flex-basis: 66.66667%;
            max-width: 66.66667%;
            padding: 0 10px
        }

        .col-lg-offset-8 {
            margin-left: 66.66667%
        }

        .col-lg-9 {
            box-sizing: border-box;
            flex-basis: 75%;
            max-width: 75%;
            padding: 0 10px
        }

        .col-lg-offset-9 {
            margin-left: 75%
        }

        .col-lg-10 {
            box-sizing: border-box;
            flex-basis: 83.33333%;
            max-width: 83.33333%;
            padding: 0 10px
        }

        .col-lg-offset-10 {
            margin-left: 83.33333%
        }

        .col-lg-11 {
            box-sizing: border-box;
            flex-basis: 91.66667%;
            max-width: 91.66667%;
            padding: 0 10px
        }

        .col-lg-offset-11 {
            margin-left: 91.66667%
        }

        .col-lg-12 {
            box-sizing: border-box;
            flex-basis: 100%;
            max-width: 100%;
            padding: 0 10px
        }

        .col-lg-offset-12 {
            margin-left: 100%
        }

        .row.start-lg {
            justify-content: flex-start
        }

        .row.center-lg {
            justify-content: center
        }

        .row.end-lg {
            justify-content: flex-end
        }

        .row.top-lg {
            align-items: flex-start
        }

        .row.middle-lg {
            align-items: center
        }

        .row.bottom-lg {
            align-items: flex-end
        }

        .row.around-lg {
            justify-content: space-around
        }

        .row.between-lg {
            justify-content: space-between
        }

        .first-lg {
            order: -1
        }

        .last-lg {
            order: 1
        }

        .show-lg {
            display: block !important
        }

        .row.show-lg {
            display: flex !important
        }

        .hide-lg {
            display: none !important
        }

        .col-lg-auto {
            flex: 0 0 auto
        }

        .frame {
            position: fixed;
            z-index: 10;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            pointer-events: none
        }

        .frame__border {
            position: absolute;
            background-color: #fff
        }

        .frame__border--top {
            top: 0;
            right: 0;
            left: 0;
            height: .5em
        }

        .frame__border--top::before {
            top: 100%;
            right: .5em;
            left: .5em;
            height: 2px
        }

        .frame__border--top::after {
            background-image: linear-gradient(-65deg, #1e95cc 4%, #1ecc95 13%, #fff445 28%, #ffae45 50%, #ff6c45 74%, #ff458b 100%);
            transform: scaleX(1.3);
            transform-origin: left
        }

        .frame__border--right {
            top: 0;
            right: 0;
            bottom: 0;
            width: .5em
        }

        .frame__border--right::before {
            top: .5em;
            right: 100%;
            bottom: .5em;
            width: 2px
        }

        .frame__border--right::after {
            background-image: linear-gradient(0deg, #1e95cc 4%, #1ecc95 13%, #fff445 28%, #ffae45 50%, #ff6c45 74%, #ff458b 100%);
            transform: scaleY(4.2);
            transform-origin: bottom
        }

        .frame__border--bottom {
            right: 0;
            bottom: 0;
            left: 0;
            height: .5em
        }

        .frame__border--bottom::before {
            right: .5em;
            bottom: 100%;
            left: .5em;
            height: 2px
        }

        .frame__border--bottom::after {
            background-image: linear-gradient(-65deg, #1e95cc 4%, #1ecc95 13%, #fff445 28%, #ffae45 50%, #ff6c45 74%, #ff458b 100%);
            transform: scaleX(1.3);
            transform-origin: right
        }

        .frame__border--left {
            top: 0;
            bottom: 0;
            left: 0;
            width: .5em
        }

        .frame__border--left::before {
            top: .5em;
            bottom: .5em;
            left: 100%;
            width: 2px
        }

        .frame__border--left::after {
            background-image: linear-gradient(0deg, #1e95cc 4%, #1ecc95 13%, #fff445 28%, #ffae45 50%, #ff6c45 74%, #ff458b 100%);
            transform: scaleY(4);
            transform-origin: top
        }

        .frame__border::after,
        .frame__border::before {
            position: absolute;
            content: ""
        }

        .frame__border::before {
            background-color: #000
        }

        .frame__border::after {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0;
            transition: opacity .3s
        }

        [data-view=default] .frame__border::after {
            opacity: 1
        }
    }

    @media only screen and (min-width:1200px) and (orientation:landscape) and (max-height:649px) {
        .result {
            position: relative
        }
    }

    @media only screen and (min-width:1200px) and (max-width:1599px) {
        .cookies__text {
            font-size: .7em
        }

        .show-lg-only {
            display: block !important
        }

        .row.show-lg-only {
            display: flex !important
        }

        .hide-lg-only {
            display: none !important
        }
    }

    @media only screen and (min-width:1200px) and (orientation:landscape) and (max-height:799px) {
        .contest {
            position: relative
        }
    }

    @media only screen and (min-width:1200px) and (max-width:1919px) {
        .cookies .container {
            padding-top: .7em;
            padding-bottom: .7em
        }

        body {
            font-size: calc(.97222vw + 6.33333px)
        }

        .container {
            padding: calc(1.38889vw + 18.33333px)
        }
    }

    @media only screen and (min-width:1600px) {
        body::before {
            content: "xl ≥ 1600px"
        }

        .menu__inner {
            height: 100%
        }

        .cookies__text {
            font-size: .6em
        }

        .col-xl,
        .col-xl-1 {
            box-sizing: border-box;
            padding: 0 10px
        }

        .col-xl {
            flex-grow: 1;
            flex-basis: 0;
            max-width: 100%
        }

        .col-xl-1 {
            flex-basis: 8.33333%;
            max-width: 8.33333%
        }

        .col-xl-offset-1 {
            margin-left: 8.33333%
        }

        .col-xl-2 {
            box-sizing: border-box;
            flex-basis: 16.66667%;
            max-width: 16.66667%;
            padding: 0 10px
        }

        .col-xl-offset-2 {
            margin-left: 16.66667%
        }

        .col-xl-3 {
            box-sizing: border-box;
            flex-basis: 25%;
            max-width: 25%;
            padding: 0 10px
        }

        .col-xl-offset-3 {
            margin-left: 25%
        }

        .col-xl-4 {
            box-sizing: border-box;
            flex-basis: 33.33333%;
            max-width: 33.33333%;
            padding: 0 10px
        }

        .col-xl-offset-4 {
            margin-left: 33.33333%
        }

        .col-xl-5 {
            box-sizing: border-box;
            flex-basis: 41.66667%;
            max-width: 41.66667%;
            padding: 0 10px
        }

        .col-xl-offset-5 {
            margin-left: 41.66667%
        }

        .col-xl-6 {
            box-sizing: border-box;
            flex-basis: 50%;
            max-width: 50%;
            padding: 0 10px
        }

        .col-xl-offset-6 {
            margin-left: 50%
        }

        .col-xl-7 {
            box-sizing: border-box;
            flex-basis: 58.33333%;
            max-width: 58.33333%;
            padding: 0 10px
        }

        .col-xl-offset-7 {
            margin-left: 58.33333%
        }

        .col-xl-8 {
            box-sizing: border-box;
            flex-basis: 66.66667%;
            max-width: 66.66667%;
            padding: 0 10px
        }

        .col-xl-offset-8 {
            margin-left: 66.66667%
        }

        .col-xl-9 {
            box-sizing: border-box;
            flex-basis: 75%;
            max-width: 75%;
            padding: 0 10px
        }

        .col-xl-offset-9 {
            margin-left: 75%
        }

        .col-xl-10 {
            box-sizing: border-box;
            flex-basis: 83.33333%;
            max-width: 83.33333%;
            padding: 0 10px
        }

        .col-xl-offset-10 {
            margin-left: 83.33333%
        }

        .col-xl-11 {
            box-sizing: border-box;
            flex-basis: 91.66667%;
            max-width: 91.66667%;
            padding: 0 10px
        }

        .col-xl-offset-11 {
            margin-left: 91.66667%
        }

        .col-xl-12 {
            box-sizing: border-box;
            flex-basis: 100%;
            max-width: 100%;
            padding: 0 10px
        }

        .col-xl-offset-12 {
            margin-left: 100%
        }

        .row.start-xl {
            justify-content: flex-start
        }

        .row.center-xl {
            justify-content: center
        }

        .row.end-xl {
            justify-content: flex-end
        }

        .row.top-xl {
            align-items: flex-start
        }

        .row.middle-xl {
            align-items: center
        }

        .row.bottom-xl {
            align-items: flex-end
        }

        .row.around-xl {
            justify-content: space-around
        }

        .row.between-xl {
            justify-content: space-between
        }

        .first-xl {
            order: -1
        }

        .last-xl {
            order: 1
        }

        .show-xl {
            display: block !important
        }

        .row.show-xl {
            display: flex !important
        }

        .hide-xl {
            display: none !important
        }

        .col-xl-auto {
            flex: 0 0 auto
        }
    }

    @media only screen and (min-width:1920px) {
        body::before {
            content: "xxl ≥ 1920px"
        }

        .cookies .container {
            padding: .5em 1em
        }

        .cookies .button {
            margin-left: 1em
        }

        .col-xxl-auto {
            flex: 0 0 auto
        }

        body {
            font-size: 25px
        }

        .container {
            padding: 50px
        }

        .menu__content,
        .menu__gfg {
            max-width: 720px;
            margin-right: auto;
            margin-left: auto
        }

        .menu__gfg {
            padding: 1em 1.5em 1.5em
        }
    }

    @media only screen and (max-width:719px) and (orientation:landscape) {
        .rotate-device__content {
            padding: .75em 1.5em;
            font-size: 1.25em
        }

        .rotate-device__picture {
            width: 8em;
            margin: 1em auto
        }
    }

    @media only screen and (max-width:991px) and (orientation:landscape) {
        .rotate-device {
            display: block;
            position: fixed;
            z-index: 12;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: #e3e3e3 no-repeat 50% 50%/cover;
            font-size: .7em
        }

        .desktop .rotate-device {
            display: none
        }

        .rotate-device .row,
        .rotate-device__container {
            height: 100%
        }

        .rotate-device__inner {
            padding: 1em;
            background-color: #fff;
            border: 2px solid #000;
            border-radius: 1em
        }

        .rotate-device__content {
            position: relative;
            background-color: #ff644d;
            border: 2px solid #000;
            border-radius: 1em;
            font-weight: 700;
            line-height: 1.5;
            color: #fff;
            text-align: center;
            text-transform: uppercase
        }

        .rotate-device__picture div {
            padding-top: 81.57895%;
            background: no-repeat 50% 50%/contain
        }

        .rotate-device__text {
            display: inline-block;
            position: relative
        }

        .rotate-device__wording {
            position: relative;
            z-index: 1
        }

        .rotate-device__wording--shadow {
            position: absolute;
            z-index: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            color: #000;
            -webkit-text-stroke: .16em #000
        }
    }

    @media only screen and (max-width:991px) and (orientation:portrait) and (max-height:534px) {
        .result {
            position: relative;
            padding: 5vw 0
        }
    }

    @media only screen and (max-width:991px) {
        .menu .button--twitter {
            margin: 0 .5em
        }

        .cookies {
            right: -2px;
            left: -2px
        }
    }

    @media only screen and (max-width:767px) {
        .menu .button__text {
            padding: .55em 1.4em
        }

        .bonus-bubble {
            font-size: 16px
        }

        .cookies__text {
            font-size: .9em;
            text-align: left
        }

        .show-xs-only {
            display: block !important
        }

        .row.show-xs-only {
            display: flex !important
        }

        .hide-xs-only {
            display: none !important
        }

        .menu__content-button {
            padding: 0
        }

        .menu__content-button:nth-child(2) {
            padding: 0 .5em
        }
    }

    @media only screen and (max-width:991px) and (orientation:portrait) and (max-height:699px) {
        .contest {
            position: relative;
            padding: 25vw 0 5vw
        }
    }