:root {
    --accent-blue: #3F67F2;
    --accent-pink: #D8C6FF;
    --not-black: #1F1F1F;
    --h-gradient: linear-gradient(114.58deg, #2067EF 0%, #7466F5 100%);
    --stroke-gray: #BDBCDB;
    --txt-disabled: #C5C0DB;
    --input-bg: #F7F7FD;
    --white: #ffffff;
    --purple: #605DEC;
    --purple-gray: #E3E4EF;
    --border-gray: #DBDBDB;
    --main-bg: #F1F2F6;
}


@font-face {
    font-family: 'Nunito';
    src: url("/static/fonts/Nunito-Bold.woff2") format("woff2"), url("/static/fonts/Nunito-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap; }

@font-face {
    font-family: 'Nunito';
    src: url("/static/fonts/Nunito-Regular.woff2") format("woff2"), url("/static/fonts/Nunito-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap; }

@font-face {
    font-family: 'Nunito';
    src: url("/static/fonts/Nunito-Light.woff2") format("woff2"), url("/static/fonts/Nunito-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap; }

@font-face {
    font-family: 'Nunito';
    src: url("/static/fonts/Nunito-SemiBold.woff2") format("woff2"), url("/static/fonts/Nunito-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap; }

body {
    margin-bottom: 70px;
}

@font-face {
    font-family: "Benzin";
    src: url("/static/fonts/Benzin-Semibold.woff2") format("woff2"), url("/static/fonts/Benzin-Semibold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/*html {*/
/*font-size : 10px;*/
/*} */

.banner-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}



._wrapper section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

._wrapper img {
    height: auto;
}

._wrapper .title {
    font-weight: bold;
}

._section {
    margin: 120px 0;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

._flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

._d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

._centered {
    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;
}

.bold {
    font-weight: bold;
}

.discountBanner ._f-14 {
    font-size: 14px;
    line-height: 110%;
}

.discountBanner ._f-18 {
    font-size: 18px;
    line-height: 110%;
}

.discountBanner ._f-20 {
    font-size: 20px;
    line-height: 110%;
}

.discountBanner ._f-27 {
    font-size: 27px;
    line-height: 110%;
}

.discountBanner ._f-38 {
    font-size: 38px;
    line-height: 110%;
}

.discountBanner ._f-56 {
    font-size: 56px;
    line-height: 110%;
}

.discountBanner ._container-lg {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1150px;
}

.discountBanner ._container-xl {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1346px;
}

.discountBanner ._input {
    display: block;
    width: 100%;
    height: 56px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 16px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 150%;
    color: var(--not-black);
    outline: none;
}

.discountBanner ._input::-webkit-input-placeholder {
    opacity: 0.6;
}

.discountBanner ._input::-moz-placeholder {
    opacity: 0.6;
}

.discountBanner ._input:-ms-input-placeholder {
    opacity: 0.6;
}

.discountBanner ._input::-ms-input-placeholder {
    opacity: 0.6;
}

.discountBanner ._input::placeholder {
    opacity: 0.6;
}

.discountBanner ._btn {
    width: 100%;
    height: 56px;
    -webkit-box-shadow: 0px 4px 0px #000000;
    box-shadow: 0px 4px 0px #000000;
    border-radius: 16px;
    font-size: 14px;
    border: none;
    padding: 0;
    -webkit-transition: .2s linear;
    -o-transition: .2s linear;
    transition: .2s linear;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
}

.discountBanner ._btn-no-shadow {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.discountBanner ._btn:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.discountBanner ._btn:not([disabled]) {
    cursor: pointer;
}

._button {
    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;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 18px 32px;
    background: var(--purple);
    border-radius: 16px;
    border: none;
    font-size: 16px;
    line-height: 20px;
    color: var(--white);
    cursor: pointer;

}

.discountBanner ._outline-border {
    position: relative;
}

.discountBanner ._outline-border::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-gray);
    pointer-events: none;
}

.discountBanner ._rounded {
    border-radius: 34px;
}

@media (max-width: 1400px) {
    .discountBanner ._container-xl {
        max-width: 1146px;
    }
}

@media (max-width: 1200px) {
    .discountBanner  ._container-xl {
        max-width: 946px;
    }
}

@media (max-width: 1024px) {
    .discountBanner  ._container-lg, ._container-xl {
        max-width: 642px;
    }

    .discountBanner  .title {
        font-size: 48px;
    }

    .discountBanner  ._section {
        margin: 60px 0;
    }

    .discountBanner  ._f-20 {
        font-size: 18px;
    }

    .discountBanner ._f-27 {
        font-size: 24px;
    }

    .discountBanner ._f-38 {
        font-size: 32px;
    }

    .discountBanner ._f-56 {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    ._container-lg, ._container-xl {
        max-width: 364px;
    }

    .discountBanner .title {
        font-size: 28px;
    }

    .discountBanner ._section {
        margin: 50px 0;
    }

    .discountBanner ._f-20 {
        font-size: 16px;
    }

    .discountBanner ._f-27 {
        font-size: 20px;
    }

    .discountBanner ._f-38 {
        font-size: 28px;
    }

    .discountBanner ._f-56 {
        font-size: 32px;
    }

    .discountBanner ._input {
        font-size: 14px;
    }
}

.discountBanner {
    position: fixed;
    /*  top: 0; */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    margin-left: auto;
    margin-right: auto;
    /*   max-width: 1600px; */
    height: 70px;
    /*background: #FF5775;*/
    background: #1F1F1F;
    color: #1F1F1F;
}

.discountBanner::before, .discountBanner::after {
    position: absolute;
    top: 0;
    width: 174px;
    height: 92px;
    content: "";
}

.discountBanner::before {
    left: 0;
    background: url(/images/banner/helloween/left_pic.svg) 0 0 no-repeat;
    background-size: contain;
}

.discountBanner::after {
    right: 0;
    background: url(/images/banner/helloween/right_pic.svg) 0 0 no-repeat;
    background-size: contain;
}

.discountBanner__content {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 3;
}

.discountBanner__content-discounts {
    margin-left: 30px;
    margin-right: 30px;
}

.discountBanner__content-btn {
    margin-left: 30px;
}

.discountBanner-title {
    font-family: "Benzin";
    font-size: 27px;
    line-height: 140%;
}

.discountBanner-timer {
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: #B7FF9E;
}

.discountBanner-btn {
    font-weight: bold;
    font-size: 14px;
    padding: 10px 40px;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    background: white;
    color: #1F1F1F;
    white-space: nowrap;
}

.discountBanner-btn:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.discountBanner-discounts__item {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

.discountBanner-discounts__item:last-child {
    margin-right: 0;
}

.discountBanner-discounts__txt {
    width: 54px;
    height: 54px;
    background: -o-radial-gradient(2.99% 15.05%, 85.39% 85.39%, #FFEC40 0%, #FFCE40 100%);
    /*background: radial-gradient(85.39% 85.39% at 2.99% 15.05%, #FFEC40 0%, #FFCE40 100%);*/
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    color: #1F1F1F;
}

.discountBanner-discounts__txt-1 {
    background: url(/images/banner/helloween/d_50.svg) center / contain no-repeat;
    -webkit-transform: rotate(-8.23deg);
    -ms-transform: rotate(-8.23deg);
    transform: rotate(-8.23deg);
}

.discountBanner-discounts__txt-2 {
    background: url(/images/banner/helloween/d_60.svg) center / contain no-repeat;
    -webkit-transform: rotate(9.18deg);
    -ms-transform: rotate(9.18deg);
    transform: rotate(9.18deg);
}

.discountBanner-discounts__txt-3 {
    background: url(/images/banner/helloween/d_70.svg) center / contain no-repeat;
    -webkit-transform: rotate(-3.84deg);
    -ms-transform: rotate(-3.84deg);
    transform: rotate(-3.84deg);
}

@media (max-width: 1200px) {
    .discountBanner::before {
        left: -50px;
    }

    .discountBanner::after {
        right: -32px;
    }

    .discountBanner__content-discounts {
        margin-left: 28px;
        margin-right: 28px;
    }

    .discountBanner__content-btn {
        margin-left: 28px;
    }

    .discountBanner-title {
        font-size: 27px;
    }

    .discountBanner-timer {
        font-size: 18px;
    }

    .discountBanner-btn {
        padding: 10px 32px;
    }

    .discountBanner-discounts__item {
        width: 54px;
        height: 54px;
    }

    .discountBanner-discounts__txt {
        width: 54px;
        height: 54px;
        font-size: 13px;
        border-radius: 8px;

    }
}

@media (max-width: 1024px) {
    .discountBanner::before, .discountBanner::after {
        width: 154px;
    }

    .discountBanner::before {
        left: 0;
        /*background: url(/images/banner/general/left_pic-m.png) 0 0 no-repeat;*/
        background: url(/images/banner/helloween/left_pic_m.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .discountBanner::after {
        background: url(/images/banner/helloween/right_pic_m.svg) 0 0 no-repeat;
    }

    .discountBanner__content {
        max-width: 602px;
        margin-left: auto;
        margin-right: auto;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding-top: 10px;
    }

    .discountBanner__content-timer {
        position: absolute;
        left: 0;
        bottom: 10px;
    }

    .discountBanner__content-btn {
        margin-left: 24px;
        padding-top: 8px;
    }

    .discountBanner__content-discounts {
        margin-left: auto;
        margin-right: 0;
        padding-top: 0px;
    }

    .discountBanner-title {
        font-size: 24px;
    }

    .discountBanner-timer {
        font-weight: 400;
        font-size: 12px;
    }

    .discountBanner-btn {
        font-size: 14px;
        line-height: 20px;
        padding: 10px 20px;
        font-family: 'Nunito Sans', Helvetica, sans-serif;
    }

    .discountBanner-discounts__item {
        width: 54px;
        height: 54px;
    }

    .discountBanner-discounts__txt {
        width: 54px;
        height: 54px;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .discountBanner::before {
        background: url(/images/banner/helloween/left_pic_m.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .discountBanner__content {
        /*max-width: 250px;*/
        max-width: 270px;
        padding-top: 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .discountBanner__content-btn {
        display: none;
    }

    .discountBanner__content-timer {
        display: none;
    }

    .discountBanner__content-discounts {
        padding-top: 0;
        margin-left: 16px;
    }

    .discountBanner-discounts__item {
        width: 60px;
        height: 60px;
    }

    .discountBanner-discounts__item:not(:last-child) {
        display: none;
    }

    .discountBanner-discounts__txt {
        width: 48px;
        height: 48px;
        font-size: 16px;
        border-radius: 13px;
    }

    .discountBanner-title {
        font-size: 18px;
    }

    .discountBanner-discounts__txt-3 {
        height: 48px;
        width: 48px;
        background: url(/images/banner/helloween/d_70_m.svg) center / contain no-repeat;
    }
}


@media (max-width: 1024px) {
    .discountBanner__content-title img {
        max-height: 30px;
        position: absolute;
        top: 11px;
    }
}

@media (max-width: 767px) {
    .discountBanner__content-title img {
        max-height: 30px;
        position: relative;
        top: auto;
    }
}

.discountBanner__content-title {
    display: flex;
    align-items: center;
}
