@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@700;900&display=swap');

/**, *:before {
    animation: none !important;
}

.first-text, .spacecraft, .helicopter, .container:before {
    display: none !important;
}

 .second-text, .f-nlo {
    display: none !important;
}

  .third-text, .s-nlo {
    display: none !important;
}*/

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.banner {
    position: relative;
    max-width: 1920px;
    min-width: 280px;
    width: 100%;
    height: 90px;
    margin: 0 auto;
    border: 1px solid #657cd4;
    padding: 0 147px 0 152px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #011357;
    overflow: hidden;
}

.logo {
    width: 252px;
}

.container {
    position: relative;
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
    height: 100%;
}

.img-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.wrapper-text {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.orange {
    color: #fa8900;
}

.yellow {
    color: #ffb426;
    font-weight: 900;
}

.cash, .def {
    font-size: 1.15em;
}

.number {
    font-size: 1.84em;
    letter-spacing: -2px;
}

.rub {
    font-size: 1.25em;
}

/*////////////First-slide/////////////*/
.first-text {
    position: absolute;
    width: 590px;
    height: 71px;
    left: 299px;
    top: 8px;
    line-height: 1;
    text-align: center;
    font-size: 26px;
    font-family: 'Roboto Condensed', sans-serif;
}

.f-line {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 1.53em;
    letter-spacing: -2px;
    text-shadow: 0 3px 3px #853900;
    animation: move-f-line 8.5s infinite;
}

.s-line {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.3px;
    animation: move-s-line 8.5s infinite;
}

.f-br {
    display: none;
}

.spacecraft {
    position: absolute;
    width: 280px;
    top: -21px;
    left: 53px;
    animation: move-spacecraft 8.5s infinite;
}

.helicopter {
    position: absolute;
    top: -54px;
    right: 32px;
    animation: move-helicopter 8.5s infinite;
}


/*////////////Second-slide////////////*/

.second-text {
    position: absolute;
    width: 65%;
    height: 100%;
    right: 0;
    font-size: 26px;
}

.second-text .cash {
    position: absolute;
    top: 29px;
    left: 104px;
    transform: rotate(-30deg);
    animation: cash 8.5s infinite;
}

.second-text .do {
    position: absolute;
    top: 5px;
    left: 255px;
    font-size: 1em;
    animation: f-do 8.5s infinite;
}

.second-text .number {
    position: absolute;
    top: 30px;
    left: 228px;
    transform: rotate(-7deg);
    animation: f-number 8.5s infinite;
}

.second-text .rub {
    position: absolute;
    transform: rotate(13deg);
    right: 203px;
    top: 19px;
    animation: f-rub 8.5s infinite;
}

.f-nlo {
    position: absolute;
    top: 2px;
    left: 204px;
    width: 200px;
    height: 100%;
    animation: move-f-nlo 8.5s infinite;
}

.first-nlo {
    position: absolute;
    width: 205px;
    z-index: 2;
}

.f-nlo-blink {
    position: absolute;
    left: 95px;
    width: 240px;
    top: 59px;
    z-index: 3;
    animation: appearance-f-blink 8.5s infinite;
}


/*///////////Third-slide///////////*/
.third-text {
    position: absolute;
    width: 65%;
    height: 100%;
    left: 0;
    font-size: 26px;
}

.third-text .def {
    position: absolute;
    top: 32px;
    left: 193px;
    transform: rotate(15deg);
    animation: def 8.5s infinite;
}

.third-text .do {
    position: absolute;
    top: 9px;
    left: 331px;
    transform: rotate(-10deg);
    font-size: 1em;
    animation: s-do 8.5s infinite;
}

.third-text .number {
    position: absolute;
    top: 13px;
    left: 375px;
    transform: rotate(-16deg);
    animation: s-number 8.5s infinite;
}

.third-text .rub {
    position: absolute;
    right: 106px;
    top: 49px;
    animation: s-rub 8.5s infinite;
}

.s-nlo {
    position: absolute;
    top: -10px;
    left: 694px;
    width: 200px;
    height: 100%;
    animation: move-s-nlo 8.5s infinite;
}

.second-nlo {
    position: absolute;
    width: 200px;
    z-index: 1;
}

.s-nlo-blink {
    position: absolute;
    width: 380px;
    top: -3px;
    right: 5px;
    z-index: 2;
    animation: appearance-s-blink 8.5s infinite;
}

/*//////////////Btn////////////////*/
.btn {
    position: relative;
    display: flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    width: 159px;
    height: 68px;
    background: #ff7800;
    border-radius: 11px;
    text-align: center;
    font-size: 21px;
    animation: btn 8.5s infinite;
}

.btn p {
    padding-top: 3px;
    width: 100%;
}

/*///////////Animations///////////////*/

@keyframes btn {
    from, 85.3% {
        background: #ff7800;
    }
    86.3% {
        background: #ffdb32;
    }
    87.3% {
        background: #ff7800;
    }
    88.3% {
        background: #ffdb32;
    }
    89.3% {
        background: #ff7800;
    }
    90.3% {
        background: #ffdb32;
    }
    91.3% {
        background: #ff7800;
    }

}

@keyframes move-spacecraft {
    from {
        transform: translate(-150%, 150%);
    }
    3.5%, 27% {
        transform: translate(0);
    }
    29.3%, to {
        transform: translate(150%, -150%);
    }
}

@keyframes move-spacecraft-1024 {
    from {
        transform: translate(-150%, 150%) rotate(-12deg);
    }
    3.5%, 27% {
        transform: translate(0) rotate(-12deg);
    }
    29.3%, to {
        transform: translate(150%, -150%) rotate(-12deg);
    }
}

@keyframes move-helicopter {
    from {
        transform: translate(-150%, -150%);
    }
    3.5%, 27% {
        transform: translate(0);
    }
    29.3%, to {
        transform: translate(150%, 150%);
    }
}

@keyframes move-f-line {
    from {
        transform: translateY(90px);
    }
    3.5%, 27% {
        transform: translateY(0);
    }
    29.3%, to {
        transform: translateY(-90px);
    }
}

@keyframes move-s-line {
    from {
        transform: translateY(90px);
    }
    4.5%, 27% {
        transform: translateY(0);
    }
    30.5%, to {
        transform: translateY(-90px);
    }
}

/*////////second-slide///////*/

@keyframes move-f-nlo {
    from, 31.6% {
        transform: translate(-150%, 150%);
    }
    35.1%, 58.5% {
        transform: translate(0);
    }
    62%, to {
        transform: translate(150%, -150%);
    }
}

@keyframes move-f-nlo-640 {
    from, 31.6% {
        transform: translate(-150%, 150%) rotate(-1deg);
    }
    35.1%, 58.5% {
        transform: translate(0) rotate(-1deg);
    }
    62%, to {
        transform: translate(150%, -150%) rotate(-1deg);
    }
}

@keyframes move-f-nlo-280 {
    from, 31.6% {
        transform: translate(-150%, 150%) rotate(25deg);
    }
    35.1%, 58.5% {
        transform: translate(0) rotate(25deg);
    }
    62%, to {
        transform: translate(150%, -150%) rotate(25deg);
    }
}

@keyframes appearance-f-blink {
    from, 35.1% {
        opacity: 0;
    }
    36%, 58.5% {
        opacity: 1;
    }
    62%, to {
        opacity: 0;
    }
}

@keyframes cash {
    from, 31.6% {
        opacity: 0;
        transform: translate(0) rotate(-30deg);
    }
    33%, 58.5% {
        opacity: 1;
        transform: translate(0) rotate(-30deg);
    }
    60%, to {
        opacity: 0;
        transform: translate(-50px, -150px) rotate(-30deg);
    }
}

@keyframes f-do {
    from, 32% {
        opacity: 0;
        transform: translate(0);
    }
    33.5%, 58.5% {
        opacity: 1;
        transform: translate(0);
    }
    60%, to {
        opacity: 1;
        transform: translate(-100px, -250px);
    }
}

@keyframes f-number {
    from, 32.5% {
        opacity: 0;
        transform: translate(0) rotate(-7deg);
    }
    34.5%, 60% {
        opacity: 1;
        transform: translate(0) rotate(-7deg);
    }
    61%, to {
        opacity: 1;
        transform: translate(-150px, -250px) rotate(-7deg);
    }
}

@keyframes f-rub {
    from, 32.5% {
        opacity: 0;
        transform: translate(0) rotate(13deg);
    }
    35.1%, 60.5% {
        opacity: 1;
        transform: translate(0) rotate(13deg);
    }
    62%, to {
        opacity: 1;
        transform: translate(-250px, -250px) rotate(13deg);
    }
}

@keyframes cash-1024 {
    from, 31.6% {
        opacity: 0;
        transform: translate(0) rotate(-30deg);
    }
    33%, 58.5% {
        opacity: 1;
        transform: translate(0) rotate(-30deg);
    }
    60%, to {
        opacity: 0;
        transform: translate(-50px, -150px) rotate(-30deg);
    }
}

@keyframes f-do-1024 {
    from, 32% {
        opacity: 0;
        transform: translate(0);
    }
    33.5%, 58.5% {
        opacity: 1;
        transform: translate(0);
    }
    60%, to {
        opacity: 1;
        transform: translate(-50px, -250px);
    }
}

@keyframes f-number-1024 {
    from, 32.5% {
        opacity: 0;
        transform: translate(0) rotate(-7deg);
    }
    34.5%, 60% {
        opacity: 1;
        transform: translate(0) rotate(-7deg);
    }
    61%, to {
        opacity: 1;
        transform: translate(-50px, -250px) rotate(-7deg);
    }
}

@keyframes f-rub-1024 {
    from, 32.5% {
        opacity: 0;
        transform: translate(0) rotate(13deg);
    }
    35.1%, 60% {
        opacity: 1;
        transform: translate(0) rotate(13deg);
    }
    62%, to {
        opacity: 1;
        transform: translate(-50px, -250px) rotate(13deg);
    }
}

@keyframes cash-640 {
    from, 31.6% {
        opacity: 0;
        transform: translate(0) rotate(-30deg);
    }
    33%, 58.5% {
        opacity: 1;
        transform: translate(0) rotate(-30deg);
    }
    60%, to {
        opacity: 0;
        transform: translate(-50px, -90px) rotate(-30deg);
    }
}

@keyframes f-do-640 {
    from, 32% {
        opacity: 0;
        transform: translate(0);
    }
    33.5%, 58.5% {
        opacity: 1;
        transform: translate(0);
    }
    60%, to {
        opacity: 1;
        transform: translate(-50px, -90px);
    }
}

@keyframes f-number-640 {
    from, 32.5% {
        opacity: 0;
        transform: translate(0) rotate(-7deg);
    }
    34.5%, 60% {
        opacity: 1;
        transform: translate(0) rotate(-7deg);
    }
    61%, to {
        opacity: 1;
        transform: translate(20px, -90px) rotate(-7deg);
    }
}

@keyframes f-rub-640 {
    from, 32.5% {
        opacity: 0;
        transform: translate(0) rotate(13deg);
    }
    35.1%, 60% {
        opacity: 1;
        transform: translate(0) rotate(13deg);
    }
    62%, to {
        opacity: 1;
        transform: translate(-90px, -90px) rotate(13deg);
    }
}

@keyframes cash-280 {
    from, 31.6% {
        opacity: 0;
        transform: translate(0) rotate(-30deg);
    }
    33%, 58.5% {
        opacity: 1;
        transform: translate(0) rotate(-30deg) scale(1);
    }
    60%, to {
        opacity: 0;
        transform: translate(90px, -90px) rotate(-30deg) scale(0.5);
    }
}

@keyframes f-do-280 {
    from, 32% {
        opacity: 0;
        transform: translate(0);
    }
    33.5%, 58.5% {
        opacity: 1;
        transform: translate(0) scale(1);
    }
    60%, to {
        opacity: 0;
        transform: translate(90px, -90px) scale(0.5);
    }
}

@keyframes f-number-280 {
    from, 32.5% {
        opacity: 0;
        transform: translate(0) rotate(-7deg);
    }
    34.5%, 59% {
        opacity: 1;
        transform: translate(0) rotate(-7deg);
    }
    60.5%, to {
        opacity: 0;
        transform: translate(90px, -90px) rotate(-7deg);
    }
}

@keyframes f-rub-280 {
    from, 32.5% {
        opacity: 0;
        transform: translate(0) rotate(12deg);
    }
    35.1%, 59% {
        opacity: 1;
        transform: translate(0) rotate(12deg) scale(1);
    }
    60.5%, to {
        opacity: 0;
        transform: translate(90px, -90px) rotate(12deg) scale(0.5);
    }
}

/*////////third-slide///////*/
@keyframes move-s-nlo {
    from, 64.3% {
        transform: translate(-150%, -170%);
    }
    67.8%, 94.6% {
        transform: translate(0);
    }
    98.1%, to {
        transform: translate(-150%, -170%);
    }
}

@keyframes move-s-nlo-640 {
    from, 64.3% {
        transform: translate(-150%, -150%) rotate(0);
    }
    67.8%, 94.6% {
        transform: translate(0) rotate(0);
    }
    to {
        transform: translate(-150%, -150%) rotate(0);
    }
}

@keyframes move-s-nlo-280 {
    from, 64.3% {
        transform: translate(-150%, -150%) rotate(-33deg);
    }
    67.8%, 94.6% {
        transform: translate(0) rotate(-33deg);
    }
    to {
        transform: translate(-150%, -150%) rotate(-33deg);
    }
}

@keyframes appearance-s-blink {
    from, 67.8% {
        opacity: 0;
    }
    68.8%, 94.6% {
        opacity: 1;
    }
    99%, to {
        opacity: 0;
    }
}

@keyframes def {
    from, 64.3% {
        opacity: 0;
        transform: translate(0) rotate(15deg);
    }
    65%, 96.6% {
        opacity: 1;
        transform: translate(0) rotate(15deg);
    }
    98.1%, to {
        opacity: 1;
        transform: translate(250px, -250px) rotate(15deg);
    }
}

@keyframes s-do {
    from, 65% {
        opacity: 0;
        transform: translate(0) rotate(-10deg);
    }
    66%, 95.6% {
        opacity: 1;
        transform: translate(0) rotate(-10deg);
    }
    97%, to {
        opacity: 1;
        transform: translate(150px, -250px) rotate(-10deg);
    }

}

@keyframes s-number {
    from, 66% {
        opacity: 0;
        transform: translate(0) rotate(-16deg);
    }
    67%, 94.6% {
        opacity: 1;
        transform: translate(0) rotate(-16deg);
    }
    96%, to {
        opacity: 1;
        transform: translate(100px, -250px) rotate(-16deg);
    }
}

@keyframes s-rub {
    from, 67% {
        opacity: 0;
        transform: translate(0);
    }
    68%, 94.6% {
        opacity: 1;
        transform: translate(0);
    }
    96%, to {
        opacity: 0;
        transform: translate(50px, -150px);
    }
}

@keyframes def-1024 {
    from, 64.3% {
        opacity: 0;
        transform: translate(0) rotate(15deg);
    }
    65%, 96.6% {
        opacity: 1;
        transform: translate(0) rotate(15deg);
    }
    98.1%, to {
        opacity: 1;
        transform: translate(250px, -250px) rotate(15deg);
    }
}

@keyframes s-do-1024 {
    from, 65% {
        opacity: 0;
        transform: translate(0) rotate(-10deg);
    }
    66%, 95.6% {
        opacity: 1;
        transform: translate(0) rotate(-10deg);
    }
    97%, to {
        opacity: 1;
        transform: translate(150px, -250px) rotate(-10deg);
    }

}

@keyframes s-number-1024 {
    from, 66% {
        opacity: 0;
        transform: translate(0) rotate(-16deg);
    }
    67%, 94.6% {
        opacity: 1;
        transform: translate(0) rotate(-16deg);
    }
    96%, to {
        opacity: 1;
        transform: translate(100px, -250px) rotate(-16deg);
    }
}

@keyframes s-rub-1024 {
    from, 67% {
        opacity: 0;
        transform: translate(0);
    }
    68%, 94.6% {
        opacity: 1;
        transform: translate(0);
    }
    96%, to {
        opacity: 0;
        transform: translate(50px, -150px);
    }
}

@keyframes def-640 {
    from, 64.3% {
        opacity: 0;
        transform: translate(0) rotate(15deg);
    }
    65%, 96.6% {
        opacity: 1;
        transform: translate(0) rotate(15deg);
    }
    98.1%, to {
        opacity: 0;
        transform: translate(75px, -90px) rotate(15deg);
    }
}

@keyframes s-do-640 {
    from, 65% {
        opacity: 0;
        transform: translate(0) rotate(-10deg);
    }
    66%, 95.6% {
        opacity: 1;
        transform: translate(0) rotate(-10deg);
    }
    97%, to {
        opacity: 1;
        transform: translate(70px, -90px) rotate(-10deg);
    }

}

@keyframes s-number-640 {
    from, 66% {
        opacity: 0;
        transform: translate(0) rotate(-16deg);
    }
    67%, 94.6% {
        opacity: 1;
        transform: translate(0) rotate(-16deg);
    }
    96%, to {
        opacity: 1;
        transform: translate(50px, -90px) rotate(-16deg);
    }
}

@keyframes s-rub-640 {
    from, 67% {
        opacity: 0;
        transform: translate(0);
    }
    68%, 94.6% {
        opacity: 1;
        transform: translate(0);
    }
    96%, to {
        opacity: 0;
        transform: translate(50px, -90px);
    }
}

@keyframes def-280 {
    from, 64.3% {
        opacity: 0;
        transform: translate(0) rotate(14deg);
    }
    65%, 96% {
        opacity: 1;
        transform: translate(0) rotate(14deg) scale(1);
    }
    97%, to {
        opacity: 0;
        transform: translate(-90px, -90px) rotate(14deg) scale(0.5);
    }
}

@keyframes s-do-280 {
    from, 65% {
        opacity: 0;
        transform: translate(0);
    }
    66%, 95.6% {
        opacity: 1;
        transform: translate(0) scale(1);
    }
    97%, to {
        opacity: 0;
        transform: translate(-60px, -90px) scale(0.5);
    }

}

@keyframes s-number-280 {
    from, 66% {
        opacity: 0;
        transform: translate(0) rotate(-16deg);
    }
    67%, 94.6% {
        opacity: 1;
        transform: translate(0) rotate(-16deg) scale(1);
    }
    96%, to {
        opacity: 0;
        transform: translate(-90px, -90px) rotate(-16deg) scale(0.5);
    }
}

@keyframes s-rub-280 {
    from, 67% {
        opacity: 0;
        transform: translate(0);
    }
    68%, 94.6% {
        opacity: 1;
        transform: translate(0) scale(1);
    }
    96%, to {
        opacity: 0;
        transform: translate(-90px, -90px) scale(0.5);
    }
}

@media (max-width: 1810px) {
    .banner {
        padding: 0 77px 0 78px;
    }

    .logo {
        width: 210px;
    }

    .btn {
        width: 130px;
        height: 56px;
        font-size: 17px;
    }

    .container {
        max-width: 700px;
    }

    .number {
        letter-spacing: -2px;
    }

    /*////////////First-slide/////////////*/
    .first-text {
        font-size: 23px;
        width: 380px;
        left: 202px;
        top: 13px;
        height: 66px;
    }

    .f-line {
        font-size: 1.52em;
    }

    .spacecraft {
        width: 280px;
        top: -20px;
        left: -9px;
    }

    .helicopter {
        top: -48px;
        right: -32px;
        width: 204px;
    }

    /*////////////Second-slide////////////*/
    .second-text, .third-text {
        font-size: 26px;
    }

    .second-text .cash {
        top: 29px;
        left: -38px;
    }

    .second-text .do {
        top: 5px;
        left: 112px;
    }

    .second-text .number {
        top: 29px;
        left: 85px;
    }

    .second-text .rub {
        right: 83px;
        top: 19px;
    }

    .f-nlo {
        top: 1px;
        left: 33px;
    }

    .first-nlo {
        width: 207px;
    }

    .f-nlo-blink {
        width: 303px;
        left: 91px;
        top: 55px;
    }

    /*///////////Third-slide///////////*/
    .third-text {

    }

    .third-text .def {
        top: 33px;
        left: 54px;
        font-size: 1.1em;
    }

    .third-text .do {
        top: 10px;
        left: 190px;
    }

    .third-text .number {
        top: 13px;
        left: 233px;
    }

    .third-text .rub {
        right: -9px;
        top: 49px;
        font-size: 1.15em;
    }

    .s-nlo {
        top: -9px;
        left: 445px;
    }

    .second-nlo {
        width: 195px;
    }

    .s-nlo-blink {
        width: 370px;
        top: -4px;
        right: 11px;
    }
}

@media (max-width: 1279px) {
    .banner {
        padding: 0 58px 0 47px;
    }

    .logo {
        width: 188px;
    }

    .btn {
        width: 132px;
        height: 57px;
        font-size: 18px;
        border-radius: 10px;
    }

    .container {
        max-width: 596px;
    }


    /*////////////First-slide/////////////*/
    .first-text {
        left: 160px;
        top: 15px;
        z-index: 1;
        font-size: 21px;
        height: 60px;
    }

    .f-line {
    }

    .spacecraft {
        top: -15px;
        left: -10px;
        width: 253px;
    }

    .helicopter {
        top: -41px;
        right: -65px;
        width: 190px;
    }

    /*////////////Second-slide////////////*/
    .second-text, .third-text {
        font-size: 24px;
    }

    .second-text .cash {
        top: 29px;
        left: -27px;
        animation-name: cash-1024;
    }

    .second-text .do {
        top: 11px;
        left: 109px;
        animation-name: f-do-1024;
    }

    .second-text .number {
        top: 36px;
        left: 84px;
        animation-name: f-number-1024;
    }

    .second-text .rub {
        right: 39px;
        top: 19px;
        font-size: 1.3em;
        animation-name: f-rub-1024;
    }

    .f-nlo {
        top: 6px;
        left: 25px;
    }

    .first-nlo {
        width: 187px;
    }

    .f-nlo-blink {
        width: 223px;
        left: 87px;
        top: 54px;
    }

    /*///////////Third-slide///////////*/
    .third-text {

    }

    .third-text .def {
        top: 33px;
        left: 42px;
    }

    .third-text .do {
        top: 12px;
        left: 167px;
    }

    .third-text .number {
        top: 16px;
        left: 207px;
    }

    .third-text .rub {
        right: -30px;
        top: 53px;
        font-size: 1.2em;
    }

    .s-nlo {
        top: -4px;
        left: 396px;
    }

    .second-nlo {
        width: 178px;
    }

    .s-nlo-blink {
        width: 344px;
        top: -4px;
        right: 25px;
    }
}

@media (max-width: 1023px) {
    .banner {
        padding: 0 16px;
    }

    .container {
        max-width: 390px;
    }

    .img-wrapper {
        right: 0;
        left: inherit;
    }

    .logo {
        width: 123px;
    }

    .btn {
        font-size: 12px;
        width: 87px;
        height: 38px;
        line-height: normal;
        border-radius: 6px;
    }

    .number {
        font-size: 1.7em;
        letter-spacing: -1px;
    }

    /*////////////First-slide/////////////*/
    .first-text {
        left: 26px;
        top: 24px;
        font-size: 14px;
        z-index: 1;
        width: 400px;
        height: 40px;
    }

    .f-br {
        display: none;
    }

    .f-line {
        font-size: 1.6em;
        letter-spacing: -1.8px;
    }

    .s-line {
        letter-spacing: -0.2px;
    }

    .spacecraft {
        transform: rotate(0deg);
        top: 4px;
        left: -13px;
        width: 170px;
    }

    .helicopter {
        top: -12px;
        right: -42px;
        width: 125px;
    }

    /*////////////Second-slide////////////*/
    .second-text, .third-text {
        font-size: 18px;
        z-index: 2;
    }

    .second-text .cash {
        top: 33px;
        left: -25px;
        font-size: 1.1em;
        animation-name: cash-640;
    }

    .second-text .do {
        top: 21px;
        left: 67px;
        animation-name: f-do-640;
    }

    .second-text .number {
        top: 36px;
        left: 47px;
        animation-name: f-number-640;
    }

    .second-text .rub {
        right: 25px;
        top: 26px;
        font-size: 1.2em;
        animation-name: f-rub-640;
    }

    .f-nlo {
        top: 18px;
        left: 12px;
        transform: rotate(-1deg);
        animation-name: move-f-nlo-640;
    }

    .first-nlo {
        width: 124px;
    }

    .f-nlo-blink {
        width: 174px;
        left: 56px;
        top: 34px;
    }

    /*///////////Third-slide///////////*/
    .third-text {
        font-size: 18px;
    }

    .third-text .def {
        top: 37px;
        left: 23px;
        font-size: 1em;
        animation-name: def-640;
    }

    .third-text .do {
        top: 21px;
        left: 103px;
        animation-name: s-do-640;
    }

    .third-text .number {
        top: 24px;
        left: 128px;
        animation-name: s-number-640;
    }

    .third-text .rub {
        right: -23px;
        top: 48px;
        font-size: 1.2em;
        animation-name: s-rub-640;
    }

    .s-nlo {
        top: 12px;
        left: 256px;
        transform: rotate(0deg);
        animation-name: move-s-nlo-640;
    }

    .second-nlo {
        width: 120px;
    }

    .s-nlo-blink {
        width: 228px;
        top: -2px;
        right: 81px;
    }
}

@media (max-width: 639px) {
    .banner {
        padding: 0 10px;
    }

    .container {
        max-width: 280px;
        left: -50px;
    }

    .img-wrapper {
        width: 100%;
        left: 0;
    }

    .wrapper-text {
    }

    .logo {
        width: 86px;
        z-index: 5;
    }

    .btn {
        text-align: center;
        z-index: 5;
        width: 65px;
        height: 28px;
        font-size: 9px;
        line-height: 1;
        border-radius: 4px;
        padding: 0;
    }

    .btn p {
        padding-top: 0.3px;
    }

    .number {
        font-size: 2em;
    }

    .cash, .def {
        font-size: 1.1em;
    }

    .number {
        font-size: 2em;
        letter-spacing: -1.1px;
    }

    .rub {
        font-size: 1.21em;
    }

    /*////////////First-slide/////////////*/
    .first-text {
        left: 85px;
        top: 47px;
        font-size: 10px;
        z-index: 2;
        width: 210px;
        height: 28px;
    }


    .f-line {
        font-size: 1.6em;
        letter-spacing: -1px;
    }

    .s-line {
        letter-spacing: -0.2px;
    }

    .spacecraft {
        top: -5px;
        left: 101px;
        width: 109px;
        z-index: 1;
    }

    .helicopter {
        top: -12px;
        right: -5px;
        width: 85px;
    }

    /*////////////Second-slide////////////*/
    .second-text, .third-text {
        font-size: 10px;
        width: 100%;
        z-index: 2;
    }

    .second-text .cash {
        top: 53px;
        left: 115px;
        font-size: 1.2em;
        animation-name: cash-280;
    }

    .second-text .do {
        top: 46px;
        left: 170px;
        animation-name: f-do-280;
    }

    .second-text .number {
        top: 54px;
        left: 158px;
        animation-name: f-number-280;
    }

    .second-text .rub {
        right: 14px;
        top: 50px;
        font-size: 1.2em;
        transform: rotate(12deg);
        animation-name: f-rub-280;
    }

    .f-nlo {
        top: 25px;
        left: 130px;
        transform: rotate(25deg);
        animation-name: move-f-nlo-280;
    }

    .first-nlo {
        width: 87px;
    }

    .f-nlo-blink {
        width: 114px;
        left: 39px;
        top: 25px;
    }

    /*///////////Third-slide///////////*/
    .third-text {
        left: inherit;
        right: 0;
    }

    .third-text .def {
        top: 54px;
        left: 112px;
        font-size: 1.2em;
        transform: rotate(14deg);
        animation-name: def-280;
    }

    .third-text .do {
        top: 45px;
        left: 166px;
        animation-name: s-do-280;
    }

    .third-text .number {
        top: 45px;
        left: 180px;
        animation-name: s-number-280;
    }

    .third-text .rub {
        right: 9px;
        top: 63px;
        font-size: 1.2em;
        animation-name: s-rub-280;
    }

    .s-nlo {
        top: -34px;
        left: 153px;
        transform: rotate(-33deg);
        animation-name: move-s-nlo-280;
    }

    .second-nlo {
        width: 85px;
    }

    .s-nlo-blink {
        width: 160px;
        top: -1px;
        right: 118px;
    }
}

@media (max-width: 450px) {
    .banner {
        padding: 0;
    }

    .container {
        left: inherit;
    }

    .logo {
        position: absolute;
        top: 20px;
        left: 13px;
    }

    .btn {
        position: absolute;
        bottom: 16px;
        left: 22px;
    }
}