/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@media (max-width:1440px) {
    .offers .block {    
        & .title {
            font-size: 24px;
            line-height: 32px;
        }
    
        & .price {
            font-size: 24px;
            line-height: 32px;
        }
    
        & .up {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            background-color: rgba(234, 242, 251, 1);
            padding: 16px;
            gap: 12px;
            border-radius: 30px 30px 0 0;
            height: 150px;
        }
    
        & .img {
            height: 222px;
            width: 40%;
            top: -100px;
        }
    }
    .fly .block {
        height: 258px;
    }
    .fly {
        width: 80%;
        border-radius: 40px;
        padding: 24px;
    }
    .fly.form {
        width: 80%;
    }
    * {
        font-size: 20px;
        line-height: 26px;
    }
    .product .imgs {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1.3fr 24px 0.7fr;
        grid-template-columns: 1.3fr 0.7fr;
        -ms-grid-rows: 193px 24px 193px;
        grid-template-rows: 193px 193px;
        gap: 24px;
    }
    .product .imgs > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    .product .imgs > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }
    .product .imgs > *:nth-child(3) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    .product .imgs > *:nth-child(4) {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
    }
    .product .imgs img {
        border-radius: 30px;
    }
    .product .inner {
        -ms-grid-columns: 0.8fr 1.2fr;
        grid-template-columns: 0.8fr 1.2fr;
    }
    .product.reverse .inner {
        -ms-grid-columns: 1.2fr 0.8fr;
        grid-template-columns: 1.2fr 0.8fr;
    }
    .h3, h3 {
        font-size: 24px;
        line-height: 32px;
    }
    .product .h3 {
        margin-bottom: 24px;
    }
    .product .desc {
        margin-bottom: 24px;
    }
    .how .video {
        height: 519px;
    }
    .gif .video {
        height: 633px;
    }
    .part .img {
        padding: 20px;
        height: 90px;
    }
    .history .inner {
        background-position: 80%;
        height: 2300px;
    }

    .history .block img {
        height: 191px;
        margin-bottom: 10px;
        -o-object-fit: contain;
           object-fit: contain;
    }
    .history .block[data-count='1'] {
        top: 90px;
    }
    
    .history .block[data-count='2'] {
        top: -200px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    
    .history .block[data-count='3'] {
        top: -200px;
    }
    
    .history .block[data-count='4'] {
        top: -500px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    
    .history .block[data-count='5'] {
        top: -500px;
    }
    
    .history .block[data-count='6'] {
        top: -900px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    
    .history .block[data-count='7'] {
        top: -800px;
    }
    
    .history .block[data-count='8'] {
        top: -1175px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }

    .history .block[data-count='9'] {
        top: -1100px;
    }
    
    .history .block[data-count='10'] {
        top: -1400px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
}

@media (max-width:1024px) {
    .offers .wrapper {
        grid-row-gap: 50px;
    }
    .offers .block .up {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        height: auto;
    }
    .offers .block .img {
        width: 80%;
        margin:  0 auto;
        top: -150px;
    }
    .offers .block .title {
        text-align: center;
        position: relative;
        top: -150px;
    }
    .offers .block .content {
        position: relative;
        top: -150px
    }
    .offers .specs {
        margin-bottom: 40px;
    }
    .offers h2 {
        margin-bottom: 150px;
    }
    .product video,
    .product img {
        border-radius: 30px;
    }
    .product .slider {
        width: 85%;
    }
    .fly {
        width: 90%;
        border-radius: 40px;
    }
    .fly.form {
        width: 90%;
    }
    .main .video {
        height: 600px;
    }
    .main {
        max-height: 600px;
    }
    .main .inner .text {
        font-size: 32px;
        line-height: 34px;
        width: 65%;
    }
    .main .inner {
        padding-top: 40px;
    }
    h1 {
        font-size: 48px;
        line-height: 48px;
    }
    .our img {
        width: 467px;
        height: 376px;
        margin: 0 auto;
        display: block;
        -o-object-fit: contain;
           object-fit: contain;
    }
    .our span {
        font-size: 20px;
        line-height: 26px;
    }
    .product .inner {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    .product.reverse .inner {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    .product .imgs {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: 289px 108px;
        grid-template-rows: 289px 108px;
    }
    .product .imgs > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    .product .imgs > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
    .product .imgs > *:nth-child(3) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
    .product .imgs > *:nth-child(4) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }
    .product .imgs .big {
        -ms-grid-row-span: 1;
        grid-row: span 1;
        -ms-grid-column-span: 2;
        grid-column: span 2;
    }
    .product .imgs img {
        border-radius: 20px;
    }
    .how .video {
        height: 436px;
    }
    .how h2:first-child {
        margin-bottom: 70px;
    }
    
    .how h2:last-child {
        margin-top: 70px;
    }
    .tz {
        height: 250px;
    }

    .tz h2 {
        font-size: 24px;
        line-height: 32px;
    }
    
    .history .inner {
        background-image: none;
    }
    .h2,
    h2 {
        font-size: 32px;
        line-height: 42px;
    }
    .gif .video {
        height: 533px;
    }
    .part .inner {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    }
    .history .block[data-count='1'] {
        top: 90px;
    }
    
    .history .block[data-count='2'] {
        top: -175px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    
    .history .block[data-count='3'] {
        top: -170px;
    }
    
    .history .block[data-count='4'] {
        top: -450px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    
    .history .block[data-count='5'] {
        top: -450px;
    }
    
    .history .block[data-count='6'] {
        top: -800px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    
    .history .block[data-count='7'] {
        top: -750px;
    }
    
    .history .block[data-count='8'] {
        top: -1075px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    .history .block[data-count='9'] {
        top: -1000px;
    }
    
    .history .block[data-count='10'] {
        top: -1300px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }

    .history .inner {
        height: 2100px;
    }
}

@media (max-width:768px) {
    .offers .block .title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 0;
    }
    .offers .block .white {
        padding: 9.5px 24px;
        font-size: 16px;
        line-height: 21px;
    }
    .offers .block .specs span {
        font-size: 16px;
        line-height: 21px;
    }
    .our {
        padding-top: 175px!important;
        padding-bottom: 245px!important;
    }
    .container {
        padding: 0 24px;
    }
    .product .arrows button {
        width: 40px;
        height: 40px;
    }
    .fly .block img {
        height: 100px;
        width: 100px;
    }
    .fly figure {
        height: 350px;
    }
    .fly .block {
        height: 221px;
    }
    header .block {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    header button {
        -ms-grid-column-span: 2;
        grid-column: span 2;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        margin-left: auto;
    }
    h3, .h3 {
        font-size: 20px;
        line-height: 26px;
    }
    * {
        font-size: 16px;
        line-height: 21px;
    }
    .product .imgs {
        -ms-grid-rows: 289px 76px;
        grid-template-rows: 289px 76px;
    }
    .product .imgs img {
        border-radius: 10px;
    }
    .how .video {
        height: 327px;
    }
    .tz {
        height: 230px;
    }
    .history p {
        font-size: 16px;
        line-height: 21px;
    }
    .history .block img {
        height: 173px;
    }
    .gif .video {
        height: 400px;
    }
    footer {
        height: 187px;
    }
    header .block a,
    footer .block a {
        font-size: 16px;
        line-height: 21px;
    }
    button.blue,
    a.blue {
        padding: 9.5px 24px;
        font-size: 16px;
        line-height: 21px;
    }
    header .block a::before,
    footer .block a::before {
        width: 18px;
        height: 18px;
    }
    .history .block[data-count='1'] {
        top: 90px;
    }
    
    .history .block[data-count='2'] {
        top: -100px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    
    .history .block[data-count='3'] {
        top: -150px;
    }
    
    .history .block[data-count='4'] {
        top: -350px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    
    .history .block[data-count='5'] {
        top: -400px;
    }
    
    .history .block[data-count='6'] {
        top: -650px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    
    .history .block[data-count='7'] {
        top: -600px;
    }
    
    .history .block[data-count='8'] {
        top: -850px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    .history .block[data-count='9'] {
        top: -900px;
    }
    
    .history .block[data-count='10'] {
        top: -1100px;
        left: 100%;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    .history .block {
        width: 330px;
    }
.history .inner {
	height: 1900px;
}
}

@media (max-width:640px) {
    .our span {
        font-size: 16px;
        line-height: 20px;
    }
    button.blue a.blue {
        font-size: 14px;
        line-height: 19px;
    }
    button.white a.white {
        font-size: 14px;
        line-height: 19px;
    }
    .offers .wrapper {
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    }
    .offers .block .img {
        height: 180px;
    }
    .offers .block .title {
        font-size: 16px;
        list-style: 21px;
    }
    .offer .block .specs span {
        font-size: 14px;
        line-height: 21px;
    }
    .offers .specs {
        margin-bottom: 20px;
    }
    .offers h2 {
        margin-bottom: 185px;
    }
    .fly.form .mobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .fly.form .logo {
        display: block;
    }
    .fly.form {
        width: 100%;
        height: 100%;
        border-radius: 0;
        top: 50%;
        background-color: rgba(234, 242, 251, 1);
    }
    .fly.form input {
        background-color:rgba(234, 242, 251, 1) ;
    }
    form label .phone .flag-btn {
        width: 35%;
    }
    form .slide {
        width: 45%;
    }
    form small {
        font-size: 12px;
        width: 90%;

        & span {
            font-size: 12px;
        }
    }
    form h3 {
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }
    .container {
        padding: 0 16px;
    }
    .product .slider {
        width: 80%;
    }
    .fly .block {
        height: 128px;
        border-radius: 20px;
    }
    .fly {
        width: 100%;
        top: 20%;
        overflow-x: scroll;
    }
    .fly.form {
        width: 100%;
    }
    .fly figure {
        height: 200px;
    }
    .fly .block img {
        height: 60px;
        width: 60px;
    }
    .fly .player {
        gap: 12px;
    }
    header .block .tel,
    header .block .call,
    header .block .mail {
        display: none;
    }
    header .mobile {
        display: block;
    }
    header .block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 16px;
    }
    header {    
        &::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.7)), to(rgba(158, 206, 228, 0.7)));
            background: -o-linear-gradient(top, rgba(158, 206, 228, 0.7) 0%, rgba(158, 206, 228, 0.7) 100%);
            background: linear-gradient(180deg, rgba(158, 206, 228, 0.7) 0%, rgba(158, 206, 228, 0.7) 100%);
            -webkit-filter: blur(100px);
                    filter: blur(100px);
            z-index: -1;
        }
    }
    .main .inner {    
        &::after {
            content: '';
            display: block;
            position: absolute;
            top: -20%;
            left: -30%;
            width: 100%;
            height: 100%;
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.7)), to(rgba(158, 206, 228, 0.7)));
            background: -o-linear-gradient(top, rgba(158, 206, 228, 0.7) 0%, rgba(158, 206, 228, 0.7) 100%);
            background: linear-gradient(180deg, rgba(158, 206, 228, 0.7) 0%, rgba(158, 206, 228, 0.7) 100%);
            -webkit-filter: blur(100px);
                    filter: blur(100px);
            z-index: -1;
    
        }
    }
    .main .inner .text{
        font-size: 24px;
        line-height: 24px;
        text-wrap: pretty;
    }
    .main .inner .text {
        width: 90%;
    }
    .main .inner h1 {
        width: 90%;
    }
    h1 {
        font-size: 32px;
        line-height: 32px;
    }
    .our img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        display: none;
        /* transform: translate(-50%, -50%); */
    }
    .our {
        padding-top: 100px!important;
        padding-bottom: 100px!important;
    }
    .our .img {
        height: auto;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 10px 1fr;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .our span {
        position: static;
        display: block;
        width: 100%;
        -webkit-transform: translate(0, 0)!important;
            -ms-transform: translate(0, 0)!important;
                transform: translate(0, 0)!important;

        &::after {
            display: none!important;
        }
    }
    .our h2 {
        position: static;
        -ms-grid-column-span: 2;
        grid-column: span 2;
        -webkit-transform: translate(0, 0)!important;
            -ms-transform: translate(0, 0)!important;
                transform: translate(0, 0)!important;
        text-align: center;
        margin-bottom: 30px;
    }
    .product .inner {
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
        height: 100%;
    }
    .product.reverse .inner {
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    }
    .product .h3 {
        text-align: center;
    }
    .product .imgs {
        -ms-grid-rows: 272px 111px;
        grid-template-rows: 272px 111px;
        height: auto;
    }
    .product .desc {
        text-align: center;
    }
    .how .video {
        height: 250px;
    }
    .play {
        width: 50px;
        height: 50px;
    }
    .play::after {
        width: 10px;
        height: 10px;
    }
    .history .block {
        position: relative;
        top: 0!important;
        left: 0!important;
        -webkit-transform: translateX(0)!important;
            -ms-transform: translateX(0)!important;
                transform: translateX(0)!important;
        margin-left: 5px;
        margin-right: 5px;
    }
    .history .inner {
        height: auto;
    }
    .history h2 {
        margin-bottom: 30px;
    }
    .gif .video {
        height: 181px;
    }
    .h2,
    h2 {
        font-size: 24px;
        line-height: 32px;
    }
    footer .container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    footer .block {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    footer {
        height: 329px;
    }
    .part {
        overflow: hidden;
    }
    .part .inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        height: 170px;
        gap: 16px;
        position: relative;
        left: 0;
        -webkit-transition: var(--transition);
        -o-transition: var(--transition);
        transition: var(--transition);
    }
    .part .img {
        height: 70px;
        padding: 10px;
        width: 120px;
    }
    .part .buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

@media (max-width:375px) {
    header img {
        width: 80px;
        height: auto;
    }
}