/* styles */
body {
    min-width: 320px;
    background: #fff;
    font-family: 'AvenirNextCyr', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5em;
    color: #000000;
    cursor: default;
}

header, section, footer {
    margin: 0 auto;
    max-width: 1920px;
}

.wrapper {
    margin: 0 auto;
    padding: 0 10px;
    width: 960px;
    position: relative;
}

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

b {
    font-weight: 700;
}


/*form*/
.main_form input{
    border: none;
    background: #ebebeb;
    width: 100%;
    height: 54px;
    font-size: 16px;
    font-family: 'AvenirNextCyr', Arial, Helvetica, sans-serif;
    color: #464747;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
    padding: 0 20px;
}
.main_form ::-webkit-input-placeholder {
    color: #464747;
}
.main_form ::-moz-placeholder {
    color: #464747;
}
.main_form :-moz-placeholder {
    color: #464747;
}
.main_form :-ms-input-placeholder {
    color: #464747;
}
.main_form :focus::-webkit-input-placeholder {
    color: transparent;
}
.main_form :focus::-moz-placeholder {
    color: transparent;
}
.main_form :focus:-moz-placeholder {
    color: transparent;
}
.main_form :focus:-ms-input-placeholder {
    color: transparent;
}
.main_form .button{
    width: 100%;
}


/* button */
.button {
    border: none;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: block;
    margin: 0 auto;
    width: 300px;
    height: 74px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: linear-gradient(to bottom, #fd800a 0%,#fb3100 100%);
    font-family: 'AvenirNextCyr', Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 1px rgba(0,0,0,0.2);
    font-size: 22px;
    line-height: 70px;
    border-bottom: 5px solid #e22c00;
    text-transform: uppercase;
    text-align: center;
}
.button:active{
    background: linear-gradient(to bottom, #fb3100 0%,#fd800a 100%);
    top: 2px;
}

.button.rounded{
    border-radius: 30px;
}

.button.green{
    background: linear-gradient(to bottom,  #3fcc5e 0%,#30b24c 100%);
    border-color: #1e8a35;
}
.button.green:active{
    background: linear-gradient(to bottom,  #30b24c 0%,#3fcc5e 100%);
}




/* titles */
h2.title {
    font-weight: 700;
    font-size: 44px;
    line-height: 1.2em;
    text-align: center;
    margin-bottom: 40px;
}
h2.title span{
    color: #349e98;
}
h2.title.white{
    color: #fff;
}

h2.title.small{
    font-size: 30px;
    line-height: 1.3em;
}


section{
    padding: 50px 0;
}

.color_theme{
    background: #329b97 url(../img/pat.png) 0% 0% repeat;
}
.color_theme h2.title{
    color: #fff;
}


/*top_line*/
.top_line{
    padding: 15px 0;
}
.top_line .wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top_line .wrapper .left{
    display: flex;
    align-items: center;
    max-width: 570px;
    font-size: 15px;
    line-height: 1.4em;
}
.top_line .wrapper .left>img{
    display: block;
    margin: 0 10px 0 0;
}
.top_line .button{
    max-width: 260px;
    text-transform: none;
    margin: 0;
}




/*offer*/
.offer{
    background: #fdfaf1 url(../img/main_bg.jpg) 50% 0% no-repeat;
}

.offer_title{
    background: #fff;
    border-radius: 20px 0 20px 0;
    line-height: 80px;
    display: flex;
    font-size: 30px;
    letter-spacing: 1.8px;
}
.offer_title span{
    background: linear-gradient(to bottom,  rgba(44,206,197,1) 0%,rgba(52,159,153,1) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 42px;
    border-radius: 20px 0 20px 0;
    padding: 0 35px;
    margin-right: 20px;
    letter-spacing: normal;
}

.offer .content{
    display: flex;
    margin-top: 20px;
}
.offer_bull{
    padding-top: 20px;
}
.offer_bull li{
    display: flex;
    align-items: center;
    max-width: 280px;
    margin-bottom: 40px;
}
.offer_bull li .icon{
    width: 99px;
    height: 79px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px 0 31px;
    margin-right: 15px;
    flex-shrink: 0;
}
.offer_bull li .icon:before{
    content: '';
    width: 99px;
    height: 79px;
    background: url(../img/ofr_bull.png);
    position: absolute;
    top: 0;
    left: 0;
}
.offer_bull li .icon>img{
    position: relative;
    z-index: 2;
}
.offer .content .right{
    margin-left: 60px;
}

.offer_bull li:nth-child(1){
    margin-left: -70px;
}
.offer_bull li:nth-child(1) .icon{
    padding: 0px 10px 10px 26px;
}
.offer_bull li:nth-child(1) .icon:before{
    transform: rotate(-40deg);
}

.price{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1.3em;
    color: #333;
}
.price .new{
    width: 152px;
    height: 73px;
    background: url(../img/price.png);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 0 0 35px;
}
.price .num{
    font-size: 30px;
    line-height: 1.1em;
}
.price .new .num{
    font-weight: 700;
}
.price .old{
    text-align: right;
    margin-right: 10px;
}
.price small{
    font-size: 0.8em;
}
.price .old span{
    text-decoration: line-through;
}

.btn_container{
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_container .button{
    margin: 0;
}
.btn_container>p{
    max-width: 310px;
    text-align: right;
    margin-right: 40px;
}

.sale{
    width: 111px;
    height: 111px;
    background: url(../img/sale.png) 50% 50% no-repeat;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 12px;
    line-height: 1.1em;
    text-transform: uppercase;
    position: absolute;
    left: 220px;
    top: 420px;
    transform: rotate(-15deg);
}
.sale span{
    display: block;
    font-size: 36px;
    line-height: 1.1em;
    font-weight: 700;
}


/*sect1*/
.sect1 .subtitle{
    text-align: center;
    font-size: 20px;
    line-height: 1.3em;
    margin-bottom: 30px;
}
.sect1 h2.title span{
    color: #f91131;
}

.benef1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    padding-bottom: 35px;
}
.benef1>li img{
    border-radius: 12px;
    border: 4px solid #f5f5f5;
    margin-bottom: 10px;
}
.benef1>li{
    text-align: center;
}
.benef1>li h4{
    margin-bottom: 10px;
}

.alert{
    background: #349e98;
    padding: 20px;
    border-radius: 10px 10px 12px 12px;
    position: relative;
    margin-top: 25px;
    display: flex;
    align-items: center;
    color: #fff;
}
.alert:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 460px 25px 460px;
    border-color: transparent transparent #349e98 transparent;
    position: absolute;
    top: -25px;
    left: 10px;
}
.alert .left{
    margin-right: 20px;
}



/*sect2*/
.sect2{
    background: #f9f9f9;
    overflow: hidden;
    padding: 90px 0 50px;
}
.sect2 .title{
    text-align: left;
}
.sect2 .left{
    padding-right: 360px;
}
.sect2 .left>p{
    margin-bottom: 30px;
}
.sect2 .left>p:last-child{
    margin-bottom: 0;
}
.sect2 .product{
    position: absolute;
    top: -40px;
    right: 0;
}
.sect2 .product:before{
    content: '';
    width: 590px;
    height: 590px;
    background: url(../img/prod_ellipse.png) 50% 50% no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.sect2 .product img{
    position: relative;
    z-index: 3;
    display: block;
    margin: 0 auto;
}
.sect2 .button{
    margin-top: 50px;
}

.alert2{
    background: #349e98;
    margin-top: 80px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;
}
.alert2 .before_after{
    position: relative;
    flex-shrink: 0;
}
.alert2 .before_after>img{
    display: block;
}
.alert2 .before_after .before,
.alert2 .before_after .after{
    position: absolute;
    font-size: 18px;
    line-height: 46px;
    padding: 0 14px;
    color: #fff;
}
.alert2 .before_after .before{
    top: 0;
    left: 0;
    border-radius: 0 0 10px 0;
    background: #fc5d06;
}
.alert2 .before_after .after{
    bottom: 0;
    right: 0;
    border-radius: 10px 0 0 0;
    background: #2c8883;
}
.alert2 .right{
    color: #fff;
    font-size: 32px;
    line-height: 1.2em;
    padding: 30px;
}



/*sect3*/
.sect3{
    background: url(../img/sect3_bg.jpg) 50% -200px no-repeat;
    padding-bottom: 90px;
}

.benef2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.benef2>li>img{
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    border: 6px solid #f5f5f5;
}
.benef2>li>p{
    font-weight: 700;
    text-align: center;
}
.benef2>li>p:before{
    content: '';
    width: 26px;
    height: 26px;
    background: url(../img/check.png);
    position: relative;
    display: block;
    z-index: 2;
    margin: -16px auto 10px;
}

.sect3 .button{
    margin-top: 50px;
}


/*sect4*/
.sect4{
    background: url(../img/s4_bg_top.png) 50% 0% no-repeat, url(../img/pat.png) 0% 0% repeat, #329b97;
    color: #fff;
    padding: 80px 0 1px;
    overflow: hidden;
}
.sect4 .benef3{
    padding-top: 30px;
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.benef3 li{
    display: flex;
    align-items: center;
    max-width: 380px;
    margin-bottom: 120px;
}
.benef3 li .text{
    padding: 0 0 0 10px;
}
.benef3 li .text span{
    display: block;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;
}
.benef3 li:nth-child(1) img,
.benef3 li:nth-child(3) img{
    order: 2;
}
.benef3 li:nth-child(1) .text,
.benef3 li:nth-child(3) .text{
    text-align: right;
    padding: 0 10px 0 0;
}

.sect4 .product{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.sect4 .product>img{
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.sect4 .product:before{
    content: '';
    width: 469px;
    height: 469px;
    background: url(../img/s4_prod_bg.png);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


/*sect5*/
.sect5{
    background: url(../img/s5_bg.jpg) 50% 0% no-repeat;
    overflow: hidden;
}
.spec_block{
    max-width: 640px;
    padding: 25px 20px;
    border-radius: 12px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    background: #fff;
}
.spec_block .author{
    color: #929090;
    font-size: 15px;
    line-height: 1.3em;
    margin-bottom: 15px;
}
.spec_block .author>p:not(:last-child){
    margin-bottom: 5px;
}
.spec_block>p{
    font-style: italic;
}
.spec_block>p:not(:last-child){
    margin-bottom: 15px;
}
.spec_block:after{
    content: '';
    width: 90%;
    height: 38px;
    background: url(../img/signature.png) 100% 0% no-repeat;
    display: block;
    margin-top: 20px;
}
.sect5 .spec_img{
    position: absolute;
    bottom: -50px;
    right: -100px;
}


/*sect6*/
.rev_item{
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    max-width: 300px;
    margin: 0 auto;
}
.rev_item .rev_author{
    padding: 15px;
    display: flex;
    align-items: center;
    padding-right: 30px;
    background: url(../img/rev_q.png) 95% 50% no-repeat;
    color: #a9a9a9;
}
.rev_author>img{
    border-radius: 50%;
    margin-right: 10px;
}
.rev_author p b{
    display: block;
    font-size: 15px;
    line-height: 1.3em;
}
.rev_item .text{
    padding: 0 20px 20px;
    text-align: center;
}
.rev_item>img{
    display: block;
    margin: 0 auto;
}
.owl-carousel .owl-item img{
    width: auto;
}

.sect6 .button{
    margin-top: 30px;
}

.owl-nav{
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.owl-nav .owl-prev,
.owl-nav .owl-next{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url(../img/rev-block-v1-button.png) 100% 50% no-repeat;
}
.owl-nav .owl-prev{
    margin-right: 20px;
    background-position: 0% 50%;
}



/*sect7*/
.sect7{
    background: url(../img/order_bg.jpg) 50% 130px no-repeat;
}
.benef_list{
    max-width: 500px;
}
.benef_list>li{
    display: flex;
    align-items: center;
    padding: 35px 0;
    border-bottom: dashed 1px #e0e1e1;
}
.benef_list .num{
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid #ebf4f6;
    box-shadow: -2px 2px 8px 0 rgba(0,0,0,0.4);
    color: #349e98;
    font-weight: 700;
    font-size: 46px;
    line-height: 96px;
    text-align: center;
}
.benef_list>li p{
    padding-left: 20px;
    font-weight: 700;
}
.benef_list>li:nth-child(1){
    padding-top: 0;
}
.benef_list>li:last-child{
    border-bottom: none;
}

.sect7 .product{
    position: absolute;
    right: 40px;
}


/*bottom*/
.formbox{
    background: #fff;
    border-radius: 8px;
    padding: 20px 20px 15px;
    max-width: 340px;
}

.price2{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.price2 .num{
    font-size: 36px;
    line-height: 1.1em;
}
.price2 .old{
    margin-right: 15px;
}
.price2 .new{
    color: #fc4f04;
}
.price2 .new .num{
    font-weight: 700;
}
.price2 .old span{
    text-decoration: line-through;
}

.bottom .product{
    margin-left: 30px;
}

.action_text{
    text-align: center;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.3em;
}
.action_text>span{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2em;
    display: block;
    margin-bottom: 5px;
}
.formbox .uslov{
    font-size: 15px;
    line-height: 1.3em;
    margin-top: 12px;
    text-align: center;
}



.cpu{
    padding: 20px 0;
    text-align: center;
    background: #222;
    color: #fff;
}
.cpu img{
    display: block;
    margin: 0 auto 10px;
}
.cpu a{
    display: inline-block;
    margin: 0 5px;
    vertical-align: top;
    color: #fff;
    font-size: 14px;
    line-height: 1.1em;
    text-decoration: none;
}
.cpu a:hover{
    text-decoration: underline;
}






@media screen and (max-width: 959px) {
    .wrapper{
        width: 660px;
        padding: 0 10px;
    }
    h2.title{
        font-size: 40px;
    }
    section,
    .sect2{
        padding: 35px 0;
    }

    /*top_line*/
    .top_line .wrapper .left{
        max-width: 320px;
    }
    /*offer*/
    .offer{
        background-image: url(../img/main_bg_tablet.jpg);
    }
    .offer_title span{
        font-size: 27px;
        line-height: 52px;
        padding: 0 18px;
    }
    .offer_title{
        font-size: 22px;
        letter-spacing: 1px;
        line-height: 52px;
    }
    .offer_bull li:nth-child(2){
        margin-left: -30px;
    }
    /*sect1*/
    .benef1{
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .alert{
        display: block;
        text-align: center;
    }
    .alert:before{
        border-width: 0 310px 25px 310px;
    }
    .alert .left{
        margin-bottom: 20px;
    }
    /*sect2*/
    .sect2 .left{
        padding: 0;
    }
    .sect2 .product{
        position: relative;
        top: auto;
        right: auto;
        margin-bottom: 30px;
    }
    .alert2{
        max-width: 460px;
        display: block;
        margin: 50px auto 0;
    }
    /*sect4*/
    .sect4{
        padding-bottom: 20px;
    }
    .sect4 .title{
        font-size: 36px;
    }
    .sect4 .product{
        left: 0;
        transform: none;
    }
    .benef3 li:nth-child(1) img, 
    .benef3 li:nth-child(3) img{
        order: 0;
    }
    .benef3 li:nth-child(1) .text, 
    .benef3 li:nth-child(3) .text {
        text-align: left;
        padding: 0 0 0 10px;
    }
    .benef3 li{
        margin-bottom: 20px;
    }
    .sect4 .benef3{
        display: block;
        padding-left: 220px;
        padding-top: 0;
    }
    /*sect5*/
    .sect5{
        background: #f9f9f9;
    }
    .sect5 .spec_img{
        position: static;
        display: block;
        margin: 0 auto;
    }
    /*sect7*/
    .sect7{
        background: #fff;
    }
    .benef_list{
        max-width: 400px;
    }
    .sect7 .product{
        right: 0;
    }
    /*bottom*/
    .bottom .product{
        margin: 0;
    }
}


@media screen and (max-width: 659px) {
    .wrapper{
        width: 320px;
    }
    h2.title,
    .sect4 .title{
        font-size: 24px;
        line-height: 1.3em;
        margin-bottom: 30px;
    }

    /*top_line*/
    .top_line .wrapper .left{
        max-width: 100%;
        font-size: 14px;
    }
    .top_line .button{
        display: none;
    }
    /*offer*/
    .offer{
        background-image: url(../img/main_bg_mob.jpg);
    }
    .offer .product{
        max-width: 230px;
    }
    .offer_title{
        display: block;
        font-size: 28px;
        line-height: 1.3em;
        text-align: center;
        padding-bottom: 10px;
    }
    .offer_title span{
        display: block;
        margin: 0 0 10px;
        font-size: 32px;
    }
    .offer .content{
        margin-top: 30px;
    }
    .offer .content{
        display: block;
    }
    .offer .content .right{
        margin-left: 0;
    }
    .offer_bull li:nth-child(1),
    .offer_bull li:nth-child(2){
        margin-left: 0;
    }
    .offer_bull li:nth-child(1) .icon:before{
        transform: rotate(0);
    }
    .offer_bull li:nth-child(1) .icon{
        padding: 0 10px 0 31px;
    }
    .offer_bull li{
        margin-bottom: 20px;
    }
    .btn_container{
        display: block;
    }
    .btn_container>p{
        margin-right: 0;
        text-align: center;
        margin-bottom: 20px;
    }
    .sale{
        left: 170px;
        top: 420px;
    }
    /*sect1*/
    .benef1{
        grid-template-columns: 1fr;
    }
    .alert{
        padding: 10px;
    }
    .alert:before {
        border-width: 0 140px 25px 140px;
    }
    .alert .button{
        width: 100%;
    }
    /*sect2*/
    .alert2 .right{
        font-size: 22px;
        line-height: 1.3em;
        padding: 20px;
    }
    /*sect3*/
    .sect3{
        background: #fdfdfd;
        padding-bottom: 40px;
    }
    .benef2{
        grid-template-columns: 1fr;
    }
    /*sect4*/
    .sect4 .product{
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 20px;
    }
    .sect4 .benef3{
        padding: 0;
    }
    .benef3 li{
        display: block;
    }
    .benef3 li .text{
        text-align: center !important;
    }
    .benef3 li img{
        display: block;
        margin: 0 auto 20px;
    }
    /*sect5*/
    .sect5 .spec_img{
        max-width: 260px;
    }
    /*sect7*/
    .sect7 .product{
        display: none;
    }
    .benef_list .num{
        width: 70px;
        height: 70px;
        line-height: 66px;
        font-size: 40px;
    }
    .benef_list>li{
        padding: 15px 0;
    }
    /*bottom*/
    .offer .content{
        display: flex;
        flex-wrap: wrap;
    }
    .bottom .formbox{
        order: 2;
    }
    .formbox{
        width: 100%;
        padding: 15px 10px;
    }
}