@media screen and (max-width: 768px) {

    .is_mobile {
        display: block;
    }
    .is_desktop {
        display: none;
    }

    .container {
        width: 100%;
        padding: 0 16px;
        overflow: hidden;
    }

    header {
        position: relative;
        background: linear-gradient(105deg, #FECB36 20.07%, #FFED00 112.49%);
    }
    header .container {
        display: flex;
        align-items: center;
        padding: 16px 16px;
        justify-content: space-between;
    }
    header .logo img {
        height: 31px;
    }
    header .menu {
        display: none;
        position: absolute;
        top: 100%;
        z-index: 999;
        width: calc(100% - 16px * 2);
        background: #fff;
        left: 16px;
        border-radius: 10px;
        padding: 65px 16px;
    }
    header .menu ul {
        flex-direction: column;
        text-align: center;
    }
    header .menu ul li {

    }
    header .menu ul li a {
        color: #3D3D3D;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    header .menu a.close {
        position: absolute;
        top: 16px;
        right: 25px;
    }

     .hero .container:after {
        content: '';
        position: relative;
        top: auto;
        right: auto;
        left: 0;
        background: url(/assets/images/hero_bg_mobile.png?v=4) no-repeat center center;
        background-size: 100%;
        width: 100%;
        height: auto;
        aspect-ratio: 360 / 492;
        z-index: 4;
        display: block;
        order: 4;
        margin: -100px 0 -425px 0;
    }
    .hero h1 {
        margin: 0 0 8px 0;
        color: #4F3229;
        text-align: center;
        font-family: "Gotham Pro";
        font-size: 28.32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        order: 1;
    }
    .hero h1 span {
        color: #329901;
        font-family: PravdaC;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        font-size: 33.469px;
    }
    .hero .hero__subtitle {
        color: #4F3229;
        font-family: "Gotham Pro";
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0 0 28px 0;
        font-size: 25.943px;
        text-align: center;
        order: 2;
    }
    .hero .hero__description {
        color: #4F3229;
        font-family: "Gotham Pro";
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0 0 40px 0;
        font-size: 21.212px;
        text-align: center;
        order: 3;
    }
    .hero .container {
        position: relative;
        padding: 20px 0 0 0;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .hero .hero__buttons {
        position: relative;
        z-index: 5;
        width: calc(100% - 16px * 2);
        margin: 220px auto 0 auto;
        border-radius: 25px;
        background: linear-gradient(105deg, #FECB36 20.07%, #FFED00 112.49%), #FEC502;
        box-shadow: 0 -30px 84px 0 rgba(0, 0, 0, 0.35);
        overflow: hidden;
        order: 5;
    }
    .hero .hero__buttons:after {
        display: none;
    }
    .hero .hero__buttons .buttons__title {
        background: #4F3229;
        color: #FEC502;
        font-family: "Gotham Pro";
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        text-align: center;
        padding: 16px 0;
    }
    .hero .hero__buttons .buttons__list ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        flex-direction: column;
    }
    .hero .hero__buttons .buttons__list ul li {
        width: calc(100% - 25px * 2);
    }
    .hero .hero__buttons .buttons__list ul li a {
        width: 100%;
    }
    .hero .hero__buttons .buttons__list ul li a.btn_check {
        position: relative;
        width: 100%;
    }
    .hero .hero__buttons .buttons__list ul li a.btn_check:after {
        content: '';
        position: absolute;
        top: -26px;
        left: -7px;
        background: url(/assets/images/btn_check.png) no-repeat center center;
        width: 90px;
        height: 101px;
    }
    .steps {
        position: relative;
        background: linear-gradient(0deg, #329801 0%, #329801 100%), linear-gradient(0deg, #4B2F27 0%, #4B2F27 100%), #FFF;
        padding: 50px 0 70px 0;
    }
    .steps:after {
        content: '';
        display: block;
        height: 44px;
        width: 100%;
        background: url(/assets/images/yellow_waves.svg) repeat-x center center;
        background-size: 600px auto;
        z-index: 3;
        position: absolute;
        bottom: -2px;
        left: 0;
    }
    .steps .steps__title {
        color: #FFF;
        text-align: center;
        font-family: PravdaC;
        font-size: 34px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        margin: 0 0 32px 0;
    }
    .steps .container {
        padding: 0;
    }
    .steps .steps__map {
        margin: 0;
        white-space: nowrap;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding: 0 0 0 16px;
    }
    .steps .steps__map img {
        max-width: unset;
        width: auto;
    }
    .prizes .prizes__text {
        display: none;
    }
    .prizes {
        padding: 0px 0 72px 0;
    }
    .prizes .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .prizes .prizes__list ul li .prize__image img {
        display: block;
        max-width: 85%;
        /* transform: scale(1.5); */
    }
    .how {
        position: relative;
        z-index: 3;
    }
    .how .container {
        display: flex;
        flex-direction: column;
        gap: 60px;
        border-bottom: none;
        padding: 86px 0 8px 0;
        overflow: visible;
    }
    .how .how__image {
        width: 100%;
        margin: -150px 0 0 0;
        padding: 0 16px;
    }
    .how .how__text {
        width: 100%;
        padding: 0 16px;
    }
    .how .how__text .text__title {
        margin: 0 0 20px 0;
        color: #329801;
        text-align: center;
        font-family: PravdaC;
        font-size: 34px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
    }
    .how .how__text .text__button {
        text-align: center;
    }
    .dates {
        position: relative;
        padding: 105px 0 0 0;
        /*background: #329901;*/
    }
    .dates .container {
        padding: 0;
        overflow: visible;
    }
    .dates:after {
        display: none;
    }
    .dates .dates__title {
        position: relative;
        margin: 0;
        color: #329801;
        text-align: center;
        font-family: PravdaC;
        font-size: 34px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        padding: 0 0 70px 0;
    }
    .dates .dates__title:after {
        content: '';
        display: block;
        height: 44px;
        width: 100%;
        background: url(/assets/images/green_waves.svg) repeat-x center center;
        background-size: 600px auto;
        z-index: 3;
        position: absolute;
        bottom: -2px;
        left: 0;
    }
    .dates ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        background: #329901;
        flex-direction: column;
        gap: 10px;
        padding: 0 16px;
    }
    .dates ul li {
        width: 100%;
        height: auto;
        display: flex;
        padding: 25px 33px;
        flex-direction: row;
        align-items: center;
        gap: 11.163px;
        border-radius: 20px;
        background: #FFD029;
        justify-content: space-between;
    }
    .dates ul li.final {
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 24px;
        position: relative;
        padding: 27.395px 14px 27.395px 14px;
        width: 100%;
        height: auto;
        border-radius: 27px;
        background: linear-gradient(105deg, #FECB36 20.07%, #FFED00 112.49%), #F1BB02;
        z-index: 4;
        margin: 90px 0 0 0;
    }
    .dates ul li.final:after {
        content: '';
        position: absolute;
        top: -76px;
        left: calc(50% - 82px / 2);
        background: url(/assets/images/corona_mobile.svg) no-repeat center center;
        width: 82px;
        height: 66px;
    }
    .dates ul li.final .date__text {
        color: #4B2F27;
        text-align: center;
        font-family: "Gotham Pro";
        font-size: 19.649px;
        font-style: normal;
        font-weight: 800;
        line-height: 130%;
        text-transform: uppercase;
    }
    .dates ul li.final .date__date {
        background: #329901;
        color: #FFF;
        text-align: center;
        font-family: PravdaC;
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        left: -10px;
        position: relative;
        display: flex;
        width: 275.232px;
        height: 55.819px;
        transform: rotate(-6.756deg);
        padding: 10.506px 10.506px 7.354px 10.506px;
        justify-content: center;
        align-items: center;
        gap: 10.506px;
    }
    .shops {
        padding: 90px 0 60px 0;
        background: #329901;
    }
    .shops .shops__title {
        margin: 0 0 30px 0;
        color: #FFF;
        text-align: center;
        font-family: PravdaC;
        font-size: 34px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
    }
    .shops .shops__text {
        color: #FFF;
        text-align: center;
        font-family: "Gotham Pro";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        letter-spacing: -0.16px;
    }
    .products {
        position: relative;
        padding: 60px 0 110px 0;
        background: #329901;
    }
    .products:after {
        content: '';
        display: block;
        z-index: 3;
        position: absolute;
        bottom: -2px;
        left: 0;
        height: 44px;
        width: 100%;
        background: url(/assets/images/white_waves.svg) repeat-x center center;
        background-size: 600px auto;
    }
    .products .products__title span {
        color: #FFF;
        text-align: center;
        font-family: PravdaC;
        font-size: 34px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        order: 1;
    }
    .products .products__title {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        margin: 0 0 30px 0;
        flex-direction: column;
        gap: 32px;
    }
    .products .products__title .btn {
        order: 2;
        background: linear-gradient(105deg, #FECB36 20.07%, #FFED00 112.49%), #FEC502;
        color: #4B2F27;
        padding: 10px 30px;
    }













    .register {
        background: #fff;
        padding: 20px 0 40px 0;
        overflow: hidden;
    }
    .register form h4 {
        font-size: 25px;
        margin: 0 0 40px 0;
    }
    .register form {
        width: 100%;
        margin: 0 auto;
    }
    .register form .field {
        margin: 0 0 17px 0;
    }
    .register form .field.half {
        display: flex;
        flex-direction: column;
        gap: 17px;
    }
    .register form .field input[type=text],
    .register form .field input[type=number] {
        text-align: center;
    }
    .register form .field.half input[type=text],
    .register form .field.half input[type=number],
    .register form .field.half select {
        width: 100%;
        text-align: center;
    }
    .register form .field.half input[type=text],
    .register form .field.half input[type=number] {
        width: 100%;
    }
    .register form .field input[name=shop_name] {
        flex-basis: auto;
        margin: 0;
    }
    .register form .field .qr a {
        font-size: 14px;
        padding: 0 0 0 46px;
        height: 35px;
        background-size: auto 100%;
    }
    .register form .field .file label {
        display: block;
        width: 100%;
        position: relative;
        z-index: 1;
        color: #000;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding: 0 0 0 46px;
        cursor: pointer;
    }
    .register form .field .file_wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 0 0 0 0;
        justify-content: center;
    }
    .register form .checkboxes {
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        margin: 30px 0 50px 0;
    }
    .register form .checkboxes .checkbox {
        margin: 0;
    }
    .register form .checkboxes > .checkbox:not(:last-child) {
        margin: 0;
    }
    .register form .alert span {
        color: #2F2E2E;
        text-align: center;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
    }
    .register form .alert {
        text-align: center;
        margin: 0 0 20px 0;
    }
    .register form .submit input {
        width: 100%;
    }
    .register form .field .qr span.hint {
        color: #E4032E;
        font-family: Montserrat;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 130%;
        width: 240px;
    }















}