@font-face {
    font-family: TT-Supermolot-Neue-CondensedBold-Italic;
    src: url(../fonts/supermolot/supermolot-condensed-bold-italic.woff) format("woff");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: TT-Supermolot-Neue-CondensedBold;
    src: url(../fonts/supermolot/supermolot-bold.woff) format("woff");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: TT-Supermolot-Neue-ExpandedExtraBold-Italic;
    src: url(../fonts/supermolot/supermolot-expanded-extrabold-italic.woff) format("woff");
    font-weight: 800;
    font-style: italic
}

@font-face {
    font-family: TT-Supermolot-Neue-DemiBold;
    src: url(../fonts/supermolot/supermolot-demibold.woff) format("woff");
    font-weight: 600;
    font-style: normal
}

html {
    height: 100%
}

body {
    margin: 0;
    height: 100%
}

a {
    text-decoration: none
}

ul {
    list-style: none
}

h1,
h2,
h3,
li,
p,
ul {
    padding: 0;
    margin: 0
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.event button {
    all: unset;
    cursor: pointer
}

.hide {
    display: none !important
}

body {
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    background: #061014
}

body img {
    max-width: 100%;
    height: auto
}

body>* {
    font-family: inherit
}

.event {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100dvh;
    background: #081720;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden
}

.event::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    background-image: url(../img/323f9d17-c488-4105-a960-aeb0fdf1b795.png)
}

@media screen and (max-width:600px) and (orientation:portrait) {
    .event::before {
        background: url(../img/7db124ef-cc87-4adc-926f-a619e840fb4f.png) no-repeat 50% 0/cover
    }
}

@media (max-width:950px) and (orientation:landscape) and (max-height:500px) {
    .event::before {
        background: url(../img/teams-bg/mexico-africa/bg-mexico-africa-desk.jpg) no-repeat 50% 50%/cover
    }
}

.logo {
    position: relative;
    z-index: 1;
    padding-top: 58px
}

.logo img {
    /* width: 217px;
    height: 50px; */
    -o-object-fit: contain;
    object-fit: contain
}

.wrapper {
    margin-top: auto;
    position: relative;
    z-index: 1;
    padding-bottom: 92px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%
}

.scoreboard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.scoreboard__time {
    font-size: 40px;
    font-weight: 700;
    color: #09090c;
    padding: 0 0 16px 0;
    font-family: TT-Supermolot-Neue-DemiBold, sans-serif
}

.scoreboard__odds {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.scoreboard__odds-item,
.scoreboard__odds-main {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.scoreboard__odds-item {
    z-index: 1;
    width: 126px;
    height: 70px
}

.scoreboard__odds-item span {
    color: #fff;
    font-family: TT-Supermolot-Neue-CondensedBold-Italic, sans-serif;
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
    line-height: 40px
}

.scoreboard__odds-item--left {
    margin-right: -28px;
    background-image: url(../img/scoreboard-koef-left.png)
}

.scoreboard__odds-item--right {
    margin-left: -28px;
    background-image: url(../img/scoreboard-koef-right.png)
}

.scoreboard__odds-main {
    width: 234px;
    height: 86px;
    background-image: url(../img/scoreboard-koef-orange.png)
}

.scoreboard__odds-main span {
    color: #081720;
    font-family: TT-Supermolot-Neue-ExpandedExtraBold-Italic, sans-serif;
    font-size: 48px;
    font-style: italic;
    font-weight: 800;
    line-height: 48px
}

.teams {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 48px;
    padding: 48px 0 116px 0
}

.teams__vs {
    font-family: TT-Supermolot-Neue-ExpandedExtraBold-Italic, sans-serif;
    font-size: 64px;
    line-height: 64px;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    color: #fff
}

.teams__side {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.teams__side--left {
    width: 300px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.teams__side--right {
    width: 300px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.teams__name {
    padding: 0 12px;
    position: relative;
    height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #101018;
    z-index: 1
}

.teams__name::after,
.teams__name::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.teams__name span {
    font-family: TT-Supermolot-Neue-ExpandedExtraBold-Italic, sans-serif;
    font-size: 64px;
    line-height: 64px;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap
}

.teams__name--left::before {
    left: -30px;
    background-image: url(../img/team-left-bracket-left.png)
}

.teams__name--left::after {
    right: -30px;
    background-image: url(../img/team-left-bracket-right.png)
}

.teams__name--right::before {
    left: -30px;
    background-image: url(../img/team-right-bracket-left.png)
}

.teams__name--right::after {
    right: -30px;
    background-image: url(../img/team-right-bracket-right.png)
}

.cta-button {
    height: 80px;
    min-height: 80px;
    padding: 0 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #F9D330;
    color: #09090c;
    font-family: TT-Supermolot-Neue-CondensedBold, sans-serif;
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.cta-button:hover {
    opacity: .8
}

.footer {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 16px 0;
    background: #1a1a23;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.footer__bonus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px
}

.footer__bonus-text {
    font-family: TT-Supermolot-Neue-DemiBold, sans-serif;
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
    text-transform: uppercase;
    color: #f3f3f3
}

.footer__payments {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.footer__payment-item {
    width: 120px;
    height: 64px;
    border: 1px solid rgba(161, 170, 195, .48);
    border-radius: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.footer__payment-item img {
    width: 93px;
    height: 44px;
    -o-object-fit: contain;
    object-fit: contain
}

.debug-panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    font-family: monospace
}

.debug-panel__toggle {
    background: #1a1a2e;
    color: #0f0;
    border: 1px solid #0f0;
    padding: 4px 10px;
    font-size: 11px;
    font-family: monospace;
    cursor: pointer;
    border-radius: 0 0 4px 0;
    -webkit-transition: background .15s, color .15s;
    transition: background .15s, color .15s
}

.debug-panel__toggle:hover {
    background: #0f0;
    color: #1a1a2e
}

.debug-panel__menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    background: rgba(26, 26, 46, .95);
    border: 1px solid #0f0;
    border-top: none;
    border-radius: 0 0 4px 0;
    min-width: 280px
}

.debug-panel__input {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #2a2a3e;
    color: #fff;
    border: 1px solid #555;
    padding: 6px 8px;
    font-size: 11px;
    font-family: monospace;
    border-radius: 2px
}

.debug-panel__input--error {
    border-color: #f44
}

.debug-panel__btn {
    background: #2a2a3e;
    color: #ccc;
    border: 1px solid #555;
    padding: 4px 12px;
    font-size: 11px;
    font-family: monospace;
    cursor: pointer;
    text-align: left;
    border-radius: 2px;
    -webkit-transition: background .15s, color .15s, border-color .15s;
    transition: background .15s, color .15s, border-color .15s
}

.debug-panel__btn:hover {
    background: #3a3a4e;
    color: #fff
}

.debug-panel__section-title {
    font-size: 10px;
    color: #0f0;
    opacity: .6;
    padding: 2px 4px;
    font-family: monospace
}

.debug-panel .hide {
    display: none !important
}

@media screen and (min-width:2400px) {
    .logo {
        zoom: 1.3
    }

    .wrapper {
        zoom: 1.3
    }

    .footer__bonus-text {
        font-size: 44px;
        line-height: 44px
    }

    .footer__payments {
        gap: 16px
    }

    .footer__payment-item {
        width: 180px;
        height: 100px
    }

    .footer__payment-item img {
        width: 140px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain
    }
}

@media screen and (max-width:2400px) and (min-width:2000px) {
    .logo {
        zoom: 1.1
    }

    .wrapper {
        zoom: 1.1
    }

    .footer__bonus-text {
        font-size: 36px;
        line-height: 36px
    }

    .footer__payments {
        gap: 16px
    }

    .footer__payment-item {
        width: 150px;
        height: 80px
    }

    .footer__payment-item img {
        width: 120px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain
    }
}

@media screen and (max-width:2400px) and (min-width:2000px) and (max-height:1000px) {
    .logo {
        zoom: 1
    }

    .wrapper {
        zoom: 1;
        padding: 0 0 40px 0
    }

    .teams {
        padding: 40px 0 50px 0
    }

    .footer__bonus-text {
        font-size: 36px;
        line-height: 36px
    }

    .footer__payments {
        gap: 16px
    }

    .footer__payment-item {
        width: 150px;
        height: 80px
    }

    .footer__payment-item img {
        width: 120px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain
    }
}

@media screen and (max-width:1920px) and (max-height:1000px) {
    .logo {
        zoom: .9
    }

    .wrapper {
        zoom: .9;
        padding: 0 0 80px 0
    }

    .teams {
        padding: 40px 0 60px 0
    }
}

@media screen and (max-width:1900px) {
    .logo {
        zoom: .9
    }

    .wrapper {
        zoom: .9;
        padding: 0 0 80px 0
    }

    .teams {
        padding: 40px 0 90px 0
    }
}

@media screen and (max-width:1900px) and (max-height:900px) {
    .logo {
        zoom: .8
    }

    .wrapper {
        zoom: .8;
        padding: 0 0 60px 0
    }
}

@media screen and (max-width:1900px) and (max-height:840px) {
    .wrapper {
        padding: 0 0 40px 0
    }

    .teams {
        padding: 40px 0 40px 0
    }
}

@media screen and (max-width:1900px) and (max-height:790px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .7;
        padding: 0 0 40px 0
    }
}

@media screen and (max-width:1710px) and (min-width:1700px) and (min-height:1200px) {
    .logo {
        zoom: 1
    }

    .wrapper {
        zoom: 1;
        padding: 0 0 190px 0
    }

    .teams {
        padding: 40px 0 90px 0
    }
}

@media screen and (max-width:1700px) {
    .wrapper {
        padding: 0 0 100px 0
    }

    .teams {
        padding: 48px 0 120px 0
    }
}

@media screen and (max-width:1700px) and (max-height:920px) {
    .wrapper {
        padding: 0 0 70px 0
    }

    .teams {
        padding: 48px 0 80px 0
    }
}

@media screen and (max-width:1620px) {
    .wrapper {
        padding: 0 0 70px 0
    }

    .teams {
        padding: 48px 0 100px 0
    }
}

@media screen and (max-width:1620px) and (max-height:820px) {
    .wrapper {
        padding: 0 0 50px 0
    }

    .teams {
        padding: 48px 0 60px 0
    }
}

@media screen and (max-width:1520px) and (max-height:710px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .7;
        padding: 0 0 32px 0
    }

    .teams {
        padding: 48px 0 48px 0
    }
}

@media screen and (max-width:1480px) {
    .logo {
        zoom: .75
    }

    .wrapper {
        zoom: .75
    }
}

@media screen and (max-width:1480px) and (max-height:690px) {
    .logo {
        zoom: .6
    }

    .wrapper {
        zoom: .6
    }
}

@media screen and (max-width:1465px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .7;
        padding: 0 0 70px 0
    }

    .teams {
        padding: 48px 0 70px 0
    }

    .footer__bonus-text {
        font-size: 24px;
        line-height: 24px
    }

    .footer__payment-item {
        width: 100px;
        height: 50px
    }

    .footer__payment-item img {
        width: 80px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain
    }
}

@media screen and (max-width:1440px) {
    .logo {
        zoom: .8
    }

    .wrapper {
        zoom: .8;
        padding: 0 0 100px 0
    }

    .teams {
        padding: 48px 0 120px 0
    }
}

@media screen and (max-width:1440px) and (max-height:800px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .7;
        padding: 0 0 80px 0
    }

    .teams {
        padding: 48px 0 80px 0
    }
}

@media screen and (max-width:1400px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .7;
        padding: 0 0 70px 0
    }

    .teams {
        padding: 48px 0 48px 0
    }
}

@media screen and (max-width:1380px) and (max-height:670px) {
    .logo {
        zoom: .65
    }

    .wrapper {
        zoom: .65;
        padding: 0 0 40px 0
    }

    .teams {
        padding: 32px 0 32px 0
    }
}

@media screen and (max-width:1380px) and (min-height:900px) {
    .logo {
        zoom: .8
    }

    .wrapper {
        zoom: .8;
        padding: 0 0 150px 0
    }

    .teams {
        padding: 64px 0 64px 0
    }
}

@media screen and (max-width:1280px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .7;
        padding: 0 0 100px 0
    }

    .teams {
        padding: 64px 0 64px 0
    }
}

@media screen and (max-width:1280px) and (max-height:690px) {
    .wrapper {
        padding: 0 0 80px 0
    }

    .teams {
        padding: 48px 0 48px 0
    }
}

@media screen and (max-width:1280px) and (max-height:640px) {
    .wrapper {
        padding: 0 0 40px 0
    }

    .teams {
        padding: 32px 0 32px 0
    }
}

@media screen and (max-width:1280px) and (max-height:610px) {
    .logo {
        zoom: .6
    }

    .wrapper {
        zoom: .6;
        padding: 0 0 32px 0
    }

    .teams {
        padding: 24px 0 24px 0
    }
}

@media screen and (max-width:1260px) and (min-height:1000px) {
    .logo {
        padding-top: 130px;
        zoom: .75
    }

    .wrapper {
        zoom: .75;
        padding: 0 0 170px 0
    }

    .teams {
        padding: 90px 0 90px 0
    }
}

@media screen and (max-width:1210px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .7;
        padding: 0 0 64px 0
    }

    .teams {
        padding: 64px 0 64px 0
    }
}

@media screen and (max-width:1210px) and (max-height:650px) {
    .logo {
        zoom: .6
    }

    .wrapper {
        zoom: .6;
        padding: 0 0 32px 0
    }

    .teams {
        padding: 64px 0 64px 0
    }
}

@media screen and (max-width:1140px) and (max-height:630px) {
    .logo {
        zoom: .6
    }

    .wrapper {
        zoom: .6;
        padding: 0 0 64px 0
    }

    .teams {
        padding: 64px 0 64px 0
    }
}

@media screen and (max-width:1120px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .7;
        padding: 0 0 120px 0
    }

    .teams {
        padding: 64px 0 64px 0
    }
}

@media screen and (max-width:1080px) {
    .logo {
        zoom: .6
    }

    .wrapper {
        zoom: .6;
        padding: 0 0 64px 0
    }

    .teams {
        padding: 64px 0 64px 0
    }
}

@media screen and (max-width:1040px) {
    .logo {
        zoom: .6
    }

    .wrapper {
        zoom: .6;
        padding: 0 0 128px 0
    }

    .teams {
        padding: 96px 0 96px 0
    }
}

@media screen and (max-width:1040px) and (max-height:630px) {
    .logo {
        zoom: .55
    }

    .wrapper {
        zoom: .55;
        padding: 0 0 64px 0
    }

    .teams {
        padding: 96px 0 96px 0
    }
}

@media screen and (max-width:1040px) and (min-height:1240px) {
    .logo {
        padding-top: 32px;
        zoom: .9
    }

    .wrapper {
        zoom: .9;
        padding: 0 0 64px 0
    }

    .teams {
        padding: 38px 0 74px 0;
        gap: 8px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .teams__side--left {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .teams__side--right {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .footer {
        background: 0 0;
        padding: 24px 0
    }

    .footer__bonus {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24px
    }

    .footer__bonus-text {
        font-size: 32px;
        line-height: 32px
    }

    .footer__payments {
        gap: 8px
    }

    .footer__payment-item {
        width: 120px;
        height: 64px
    }

    .footer__payment-item img {
        width: 93px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain
    }
}

@media screen and (max-width:1300px) and (min-width:1200px) and (min-height:1700px) {
    .logo {
        padding-top: 32px;
        zoom: 1.4
    }

    .wrapper {
        zoom: 1.4;
        padding: 0 0 90px 0
    }

    .teams {
        padding: 38px 0 74px 0;
        gap: 8px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .teams__side--left {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .teams__side--right {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .footer {
        background: 0 0;
        padding: 24px 0
    }

    .footer__bonus {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24px
    }

    .footer__bonus-text {
        font-size: 48px;
        line-height: 48px
    }

    .footer__payments {
        gap: 8px
    }

    .footer__payment-item {
        width: 200px;
        height: 100px
    }

    .footer__payment-item img {
        width: 140px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain
    }
}

@media screen and (max-width:1000px) {
    .logo {
        padding-top: 32px;
        zoom: .9
    }

    .wrapper {
        zoom: .9;
        padding: 0 0 64px 0
    }

    .cta-button {
        zoom: 1.35
    }

    .teams {
        padding: 38px 0 74px 0;
        gap: 8px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .teams__side--left {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .teams__side--right {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .footer {
        background: 0 0;
        padding: 24px 0
    }

    .footer__bonus {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24px
    }

    .footer__bonus-text {
        font-size: 32px;
        line-height: 32px
    }

    .footer__payments {
        gap: 8px
    }

    .footer__payment-item {
        width: 120px;
        height: 64px
    }

    .footer__payment-item img {
        width: 93px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain
    }
}

@media screen and (max-width:840px) {
    .logo {
        zoom: .8
    }

    .wrapper {
        zoom: .8
    }
}

@media screen and (max-width:840px) and (max-height:800px) and (orientation:landscape) {
    .logo {
        zoom: .5
    }

    .wrapper {
        zoom: .52;
        padding: 0 0 30px 0
    }

    .teams {
        padding: 24px 0 24px 0
    }

    .footer {
        padding: 12px 0
    }

    .footer__bonus {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 18px
    }

    .footer__bonus-text {
        font-size: 20px;
        line-height: 20px
    }

    .footer__payments {
        gap: 6px
    }

    .footer__payment-item {
        width: 80px;
        height: 44px
    }

    .footer__payment-item img {
        width: 93px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain
    }
}

@media screen and (max-width:840px) and (max-height:700px) and (orientation:landscape) {
    .logo {
        zoom: .55
    }

    .wrapper {
        zoom: .55;
        padding: 0 0 120px 0
    }
}

@media screen and (max-width:820px) and (max-height:1040px) {
    .logo {
        zoom: .75
    }

    .wrapper {
        zoom: .75;
        padding: 0 0 32px 0
    }
}

@media screen and (max-width:780px) and (max-height:940px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .65;
        padding: 0 0 32px 0
    }
}

@media screen and (max-width:780px) and (max-height:840px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .56;
        padding: 0 0 64px 0
    }

    .footer__bonus-text {
        font-size: 24px;
        line-height: 24px
    }

    .footer__payment-item {
        width: 110px;
        height: 60px
    }

    .footer__payment-item img {
        width: 80px
    }
}

@media screen and (max-width:780px) and (max-height:700px) {
    .logo {
        zoom: .7
    }

    .wrapper {
        zoom: .56;
        padding: 0 0 64px 0
    }

    .footer__bonus-text {
        font-size: 16px;
        line-height: 16px
    }

    .footer__payment-item {
        width: 80px;
        height: 40px
    }

    .footer__payment-item img {
        width: 60px
    }
}

@media screen and (max-width:1000px) and (max-height:480px) and (orientation:landscape) {
    .event::before {
        background-position: center -20px
    }

    .logo {
        padding-top: 32px;
        zoom: .55
    }

    .wrapper {
        zoom: .55;
        padding: 0 0 24px 0
    }

    .teams {
        padding: 38px 0 48px 0;
        gap: 32px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .teams__side--left {
        width: 300px;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    .teams__side--right {
        width: 300px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .cta-button {
        zoom: 1.2
    }

    .footer {
        background: #1a1a23;
        padding: 6px 0
    }

    .footer__bonus {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 8px
    }

    .footer__bonus-text {
        font-size: 16px;
        line-height: 16px
    }

    .footer__payments {
        gap: 8px
    }

    .footer__payment-item {
        width: 70px;
        height: 34px
    }

    .footer__payment-item img {
        width: 52px
    }
}

@media screen and (max-width:1000px) and (max-height:420px) and (orientation:landscape) {
    .logo {
        zoom: .5
    }

    .wrapper {
        zoom: .5;
        padding: 0 0 24px 0
    }
}

@media screen and (max-width:1000px) and (max-height:380px) and (orientation:landscape) {
    .logo {
        zoom: .4
    }

    .wrapper {
        zoom: .4;
        padding: 0 0 24px 0
    }

    .teams {
        padding: 24px 0 24px 0;
        gap: 32px
    }
}

@media screen and (max-width:1000px) and (max-height:320px) and (orientation:landscape) {
    .event::before {
        background-position: center -40px
    }

    .event .wrapper {
        zoom: .35
    }
}

@media screen and (max-width:700px) and (max-height:480px) and (orientation:landscape) {
    .event::before {
        background-position: center 0
    }
}

@media screen and (max-width:600px) and (orientation:portrait) {
    .logo {
        zoom: .5
    }

    .wrapper {
        zoom: .5;
        padding: 0 0 42px 0
    }

    .teams {
        padding: 0 0 72px 0;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    .scoreboard {
        padding: 0 0 96px 0;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }

    .scoreboard__time {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        padding: 16px 0 0 0;
        color: #fff
    }

    .scoreboard__odds {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    .scoreboard__odds-item--left {
        margin-right: -28px;
        background-image: url(../img/scoreboard-koef-left-mob.png)
    }

    .scoreboard__odds-item--right {
        margin-left: -28px;
        background-image: url(../img/scoreboard-koef-right-mob.png)
    }

    .cta-button {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        zoom: 1.5
    }

    .footer {
        padding: 32px 0
    }

    .footer__bonus {
        gap: 18px
    }

    .footer__bonus-text {
        font-size: 18px;
        line-height: 18px
    }

    .footer__payments {
        gap: 6px
    }

    .footer__payment-item {
        width: 64px;
        height: 34px
    }

    .footer__payment-item img {
        width: 50px
    }
}

@media screen and (max-width:600px) and (max-height:800px) {
    .logo {
        zoom: .5
    }

    .wrapper {
        zoom: .45
    }
}

@media screen and (max-width:600px) and (max-height:720px) {
    .logo {
        zoom: .45
    }

    .wrapper {
        zoom: .43
    }
}

@media screen and (max-width:600px) and (max-height:680px) {
    .logo {
        zoom: .45
    }

    .wrapper {
        zoom: .4
    }

    .footer {
        padding: 16px 0
    }
}

@media screen and (max-width:600px) and (max-height:600px) {
    .logo {
        zoom: .45
    }

    .wrapper {
        zoom: .35
    }

    .scoreboard {
        padding: 0 0 44px 0
    }

    .teams {
        padding: 0 0 44px 0
    }

    .footer {
        padding: 12px 0
    }
}

@media screen and (max-width:350px) {
    .footer {
        padding: 16px 0
    }

    .footer__bonus {
        gap: 8px
    }

    .footer__bonus-text {
        font-size: 16px;
        line-height: 16px
    }

    .footer__payments {
        gap: 4px
    }

    .footer__payment-item {
        width: 56px;
        height: 30px
    }
}

@media screen and (max-width:350px) and (min-height:800px) {
    .logo {
        zoom: .45
    }

    .wrapper {
        padding: 0 0 180px 0;
        zoom: .45
    }

    .scoreboard {
        padding: 0 0 64px 0
    }

    .teams {
        padding: 0 0 64px 0
    }
}

@media screen and (max-width:1030px) and (min-width:800px) and (max-height:1240px) and (min-height:1000px) and (orientation:portrait) {
    .event {
        height: 100%
    }

    .logo {
        zoom: 1;
        -webkit-transform: scale(.75);
        -ms-transform: scale(.75);
        transform: scale(.75);
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center
    }

    .wrapper {
        zoom: 1;
        -webkit-transform: scale(.85);
        -ms-transform: scale(.85);
        transform: scale(.85);
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center;
        padding: 0 0 10px 0;
        -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        transform-origin: bottom center
    }

    .cta-button {
        zoom: 1
    }

    .footer__bonus-text {
        margin-bottom: 8px
    }

    .footer__bonus {
        gap: 0
    }

    .footer__payment-item:not(:last-child) {
        margin-right: 8px
    }

    .footer__payments {
        gap: 0
    }
}

@media screen and (max-width:1030px) and (min-width:800px) and (max-height:1380px) and (min-height:1241px) and (orientation:portrait) {
    .event {
        height: 100%
    }

    .logo {
        zoom: 1;
        -webkit-transform: scale(.75);
        -ms-transform: scale(.75);
        transform: scale(.75);
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center
    }

    .wrapper {
        zoom: 1;
        -webkit-transform: scale(.95);
        -ms-transform: scale(.95);
        transform: scale(.95);
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center;
        padding: 0 0 40px 0;
        -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        transform-origin: bottom center
    }

    .cta-button {
        zoom: 1
    }

    .footer__bonus-text {
        margin-bottom: 8px
    }

    .footer__bonus {
        gap: 0
    }

    .footer__payments {
        gap: 0
    }

    .footer__payment-item:not(:last-child) {
        margin-right: 8px
    }
}

@media screen and (max-width:1380px) and (min-width:1000px) and (max-height:1030px) and (min-height:730px) and (orientation:landscape) {
    .event {
        height: 100%
    }

    .logo {
        zoom: 1;
        -webkit-transform: scale(.75);
        -ms-transform: scale(.75);
        transform: scale(.75);
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center
    }

    .wrapper {
        zoom: 1;
        -webkit-transform: scale(.75);
        -ms-transform: scale(.75);
        transform: scale(.75);
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        transform-origin: bottom center;
        padding: 0 0 80px 0
    }

    .cta-button {
        zoom: 1
    }

    .teams {
        gap: 0
    }

    .teams__side--left {
        margin-right: 24px
    }

    .teams__side--right {
        margin-left: 24px
    }

    .footer__bonus-text {
        margin-right: 8px
    }

    .footer__bonus {
        gap: 0
    }

    .footer__payments {
        gap: 0
    }

    .footer__payment-item:not(:last-child) {
        margin-right: 8px
    }
}