html {
    height: 100%;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

*, :after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body {
    margin: 0;
    color: #131312;
    background: #fff;
    min-width: 320px;
    font-family: 'Rubik', sans-serif
}

img {
    border-style: none;
    max-width: 100%
}

a {
    color: #000;
    -webkit-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    transition: all 100ms linear
}

a, a:hover {
    text-decoration: none
}

*, a {
    outline: 0
}

.logo a, header, nav, section {
    display: block
}

h2 {
    margin: 0 0 25px;
    color: #237331;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: inherit
}

h3 {
    color: #ba1837;
    margin: 0 0 21px;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px
}

#wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative
}

.hidden-x {
    overflow: hidden
}

.center {
    max-width: 990px;
    padding: 0 15px;
    margin: 0 auto
}

.center:after, .heading:after, .items.other:after, .list-symptoms .items:after, .list-symptoms:after {
    clear: both;
    display: block;
    content: ''
}

#header {
    position: fixed;
    height: 160px;
    background: url(../images/bg-header.png) no-repeat 50% 0;
    width: 100%;
    z-index: 11;
    -webkit-background-size: cover;
    background-size: cover
}

.logo {
    float: left;
    width: 99px;
    height: 30px;
    background: url(../images/logo.png) no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    margin: 21px 45px 0 10px;
    z-index: 5;
    position: relative
}

.logo a {
    height: 100%
}

#nav li, #nav ul, h2 {
    text-align: center
}

#nav ul {
    list-style: none;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0
}

#nav li {
    display: inline-block;
    vertical-align: top;
    position: relative
}

#nav li:after {
    top: 0;
    background: #b1b2b2;
    position: absolute;
    content: '';
    width: 1px
}

#nav li:nth-child(1) {
    width: 148px
}

#nav li:nth-child(1):after {
    right: 0;
    height: 70px
}

#nav li:nth-child(1):before {
    left: 0;
    height: 70px;
    top: 0;
    background: #b1b2b2;
    position: absolute;
    content: '';
    width: 1px
}

#nav li:nth-child(2) {
    width: 187px
}

#nav li:nth-child(2):after {
    right: 0;
    height: 80px
}

#nav li:nth-child(3) {
    width: 121px
}

#nav li:nth-child(3):after {
    right: 0;
    height: 88px
}

#nav li:nth-child(4), #nav li:nth-child(5) {
    width: 104px
}

#nav li:nth-child(4):after {
    right: 0;
    height: 98px
}

#nav li:nth-child(5):after {
    right: 0;
    height: 109px
}

#nav a {
    font-size: 12px;
    line-height: 12px;
    text-transform: uppercase;
    display: block;
    padding: 30px 0 40px;
    -webkit-transition: none;
    -o-transition: none;
    transition: none
}

#nav li > a:hover {
    color: #fff;
    background: url(../images/nav-active.png) no-repeat;
    background-position: 0 0
}

#nav li:nth-child(1) a {
    padding: 30px 0
}

#nav li:nth-child(2) a {
    padding: 30px 0 42px
}

#nav li:nth-child(3) a {
    padding: 30px 0 52px
}

#nav li:nth-child(4) a {
    padding: 30px 0 62px
}

#nav li:nth-child(5) a {
    padding: 30px 0 70px
}

#nav li:nth-child(1) a:hover {
    background-position: 1px -1px
}

#nav li:nth-child(2) a:hover {
    background-position: -160px 0
}

#nav li:nth-child(3) a:hover {
    background-position: -348px 0
}

#nav li:nth-child(4) a:hover {
    background-position: -460px 0
}

#nav li:nth-child(5) a:hover {
    background-position: -561px 0
}

#nav .btn-mob-menu {
    display: none;
    width: 46px;
    height: 37px;
    position: absolute;
    top: 34px;
    right: 15px;
    padding: 0;
    z-index: 5;
    background: 0 0
}

#nav .btn-mob-menu span {
    display: block;
    position: relative;
    width: 26px;
    height: 3px;
    background: #000;
    margin: 12px auto 0
}

#nav .btn-mob-menu span:after, #nav .btn-mob-menu span:before {
    content: '';
    position: absolute;
    width: 100%;
    background: #000;
    height: 3px;
    left: 0;
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear
}

#nav .btn-mob-menu span:before {
    top: -7px
}

#nav .btn-mob-menu span:after {
    top: 7px
}

#main {
    overflow: hidden
}

.main-screen {
    background: url(../images/img-bg-02.png) no-repeat 50% 100%;
    padding: 100px 0 173px;
    z-index: 1;
    -webkit-background-size: cover;
    background-size: cover
}

#main, .main-screen, .main-screen .center {
    position: relative
}

.picture {
    position: absolute;
    top: -205px;
    right: 40px;
    width: initial
}

.heading {
    margin: 160px 0 100px;
    color: #fff;
    z-index: 1;
    font-size: 0
}

.head-left, .head-right {
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: top
}

.head-left {
    position: relative;
    width: -webkit-calc(58.33333% - 10px);
    width: calc(58.33333% - 10px)
}

.head-right {
    width: -webkit-calc(41.66667% - 10px);
    width: calc(41.66667% - 10px);
    text-align: center
}

.head-left__text {
    color: #fff;
    font-size: 37px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .48px;
    max-width: 290px
}

.head-right__logo {
    font-size: 80px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1
}

.head-right__text {
    font-size: 25px;
    font-weight: 300
}

.head-right__text .upper {
    font-size: 30px
}

.upper {
    text-transform: uppercase
}

.main-screen .text {
    background: url(../images/icon-01.png) no-repeat 37px 15px;
    padding: 0 0 0 164px;
    font-size: 18px;
    line-height: 24px
}

.text p, blockquote p {
    margin: 0 0 10px
}

.text .desc {
    display: block;
    font-size: 12px;
    line-height: 16px
}

.text .name {
    color: #008856;
    text-transform: uppercase
}

.text .name strong {
    color: #333;
    font-weight: 400
}

.text .name em {
    color: #333;
    font-style: normal
}

.symptoms {
    background: url(../images/img-bg-03.jpg) no-repeat 50% 100%;
    -webkit-background-size: cover;
    background-size: cover;
    margin: -50px 0 0;
    padding: 60px 0 52px
}

.symptoms .center {
    position: relative
}

.symptoms h2 {
    text-align: center;
    margin: 0 0 36px;
    color: #fff
}

.list-symptoms {
    margin: 0 0 50px;
    width: 67%;
    float: left
}

.list-symptoms .items {
    margin: 0 0 23px;
    float: left;
    width: 50%
}

.items.other .icon, .list-symptoms .icon {
    float: left;
    margin: 0 10px 0 0
}

.items.other .title, .list-symptoms .title {
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    padding: 22px 0 0;
    display: block;
    font-weight: 700
}

.microbe {
    position: absolute;
    right: 34px;
    top: 171px
}

.symptoms .text {
    color: #fff;
    clear: both;
    position: relative;
    font-size: 15px;
    display: table;
    line-height: 21px;
    width: 100%
}

.list-desc li, .symptoms .text p {
    display: inline-block;
    vertical-align: top
}

.symptoms .text p {
    width: 33.3%;
    padding: 0 1.5%
}

.description, .symptoms .text:after {
    -webkit-background-size: 100%;
    background-size: 100%
}

.symptoms .text:after {
    content: '';
    left: 0;
    right: 0;
    height: 61px;
    background: url(../images/img-bg-04.png) no-repeat;
    top: -40px;
    position: absolute
}

.description {
    background: url(../images/img-bg-05.png) no-repeat;
    padding: 114px 0 90px;
    margin: -50px 0 0;
    position: relative;
    z-index: 1;
    text-align: center
}

.description:after {
    content: '';
    background: url(../images/img-bg-06.png) no-repeat;
    position: absolute;
    width: 100%;
    height: 79px;
    left: 0;
    -webkit-background-size: cover;
    background-size: cover;
    bottom: 35px
}

.block-1 {
    padding: 0 0 73px
}

.list-desc {
    list-style: none;
    margin: 20px -20px;
    padding: 0;
    font-size: 0
}

.list-desc li {
    padding: 0 20px;
    position: relative;
    width: -webkit-calc(100% / 6);
    width: calc(100% / 6)
}

.list-desc li:nth-child(2) img {
    right: -50px
}

.list-desc li:nth-child(3) img {
    right: -50px;
    bottom: -60px
}

.list-desc li:nth-child(4) img, .list-desc li:nth-child(5) img {
    right: -34px;
    bottom: -40px
}

.list-desc li:nth-child(6) img {
    left: -40px;
    bottom: 0
}

.block-2 .list-desc li, .block-5 .list-desc li {
    width: -webkit-calc(100% / 3);
    width: calc(100% / 3);
    vertical-align: bottom;
}

.block-2 .list-desc li .img-box:after, .block-5 .list-desc li .img-box:after {
    right: -35px
}

.block-5 .list-desc li:after {
    display: none;
}

.img-box__title {
    color: #237331;
    margin-top: 15px;
    font-size: 18px;
    font-weight: 500
}

.block-1 .list-desc li:after {
    top: 50px
}

.list-desc li:after {
    position: absolute;
    content: '';
    width: 24px;
    height: 24px;
    background: url(../images/icon-11.jpg) no-repeat;
    right: -15px;
    top: 50%
}

.list-desc li:nth-child(1):after {
    background: url(../images/icon-10.jpg) no-repeat
}

.list-desc li:last-child:after {
    display: none
}

.list-desc li span {
    color: #006d4d;
    font-size: 18px;
    line-height: 20px;
}

.description .text {
    font-size: 17px;
    text-align: left
}

.block-2 {
    border-top: 1px solid #04714a;
    position: relative;
    padding: 40px 0
}

.block-2__title {
    color: #008453;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    display: table;
    margin: -65px auto 35px;
    padding: 20px 20px 20px 60px;
    background: #fff;
    position: relative;
}

.block-2__title:before {
    content: '';
    background: url("../images/icon-16.png") center no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    width: 26px;
    height: 42px;
    position: absolute;
    top: 50%;
    left: 0;
    margin: -21px 0 0 20px;
}

.block-2 h2 {
    color: #008453;
    margin: 0 0 70px
}

.block-2 h2 .name {
    color: #bf0c1c
}

.block-2 .name strong, .block-3 .name strong, .block-4 .name strong {
    color: #333
}

.block-2 .name em, .block-3 .name em, .block-4 .name em {
    font-style: normal
}

.block-2 li:nth-child(2):after {
    margin-top: -5px;
    right: -27px;
    background: url(../images/icon-10.jpg) no-repeat
}

.block-2 h3 {
    margin: 65px 0 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 34px
}

.block-2 .text {
    font-size: 18px;
    line-height: 25px
}

.list-title {
    display: block;
    padding: 18px 0 0;
    margin: 0
}

.block-2 ol {
    counter-reset: item;
    margin: 0;
    padding: 0;
    text-align: left
}

.block-2 ol li, .block-2 ol li:before {
    margin: 0 0 8px 22px;
    display: inline-block;
    vertical-align: top;
    color: #007549
}

.block-2 ol li:before {
    margin: 0 4px 0 0;
    content: counter(item) ") ";
    counter-increment: item
}

.block-3 {
    padding: 0 0 35px
}

.block-3 h2 {
    padding: 0 140px;
    letter-spacing: .02em;
    margin: 0 0 56px
}

.description-block {
    position: relative
}

.left-inner, .list-block, .right-inner {
    -webkit-border-radius: 20px;
    border-radius: 20px;
    position: relative
}

.list-block {
    background: #016f48;
    background: -webkit-linear-gradient(top, #016f48 0%, #267330 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#016f48), to(#267330));
    background: -o-linear-gradient(top, #016f48 0%, #267330 100%);
    background: linear-gradient(to bottom, #016f48 0%, #267330 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#016f48', endColorstr='#267330', GradientType=0);
    z-index: 1;
    margin: 0 0 13px
}

.list-block:before {
    position: absolute;
    content: '';
    width: 82px;
    height: 92px;
    background: url(../images/icon-13.png) no-repeat;
    left: 50%;
    margin-left: -41px;
    bottom: -50px;
    z-index: -1
}

.description-box:after, .left-inner:after, .list-block:after, .right-inner:after {
    clear: both;
    display: block;
    content: ''
}

.list-block .left {
    float: left;
    width: 50%;
    max-width: 495px;
    padding: 10px;
    background: #dc2138;
    background: -webkit-linear-gradient(top, #dc2138 0%, #b11537 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#dc2138), to(#b11537));
    background: -o-linear-gradient(top, #dc2138 0%, #b11537 100%);
    background: linear-gradient(to bottom, #dc2138 0%, #b11537 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc2138', endColorstr='#b11537', GradientType=0)
}

.left-inner, .right-inner {
    padding: 10px
}

.left-inner {
    background: #b11537;
    background: -webkit-linear-gradient(top, #b11537 0%, #dc2138 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#b11537), to(#dc2138));
    background: -o-linear-gradient(top, #b11537 0%, #dc2138 100%);
    background: linear-gradient(to bottom, #b11537 0%, #dc2138 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b11537', endColorstr='#dc2138', GradientType=0)
}

.list-block .left, .list-block .right, .list-box li {
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.list-block .right {
    float: right;
    width: 50%;
    max-width: 495px;
    background: #016f48;
    background: -webkit-linear-gradient(top, #016f48 0%, #267330 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#016f48), to(#267330));
    background: -o-linear-gradient(top, #016f48 0%, #267330 100%);
    background: linear-gradient(to bottom, #016f48 0%, #267330 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#016f48', endColorstr='#267330', GradientType=0);
    padding: 10px
}

.right-inner {
    background: #267330;
    background: -webkit-linear-gradient(top, #267330 0%, #016f48 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#267330), to(#016f48));
    background: -o-linear-gradient(top, #267330 0%, #016f48 100%);
    background: linear-gradient(to bottom, #267330 0%, #016f48 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#267330', endColorstr='#016f48', GradientType=0)
}

.list-box {
    list-style: none;
    padding: 0;
    margin: 0
}

.list-box li {
    background: #f9f9f9;
    -webkit-box-shadow: 1px 1px 17px rgba(0, 0, 0, .45);
    box-shadow: 1px 1px 17px rgba(0, 0, 0, .45);
    text-align: left;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    padding: 15px 25px;
    margin: 0 0 10px;
    position: relative;
    font-weight: 500
}

.left-inner .list-box {
    float: right;
    padding: 15px 0 13px
}

.right-inner .list-box {
    float: left;
    padding: 10px 0 18px
}

.left-inner .list-box li {
    color: #d82038;
    max-width: 440px;
    z-index: 1;
    min-height: 66px;
    margin: 0 -30px 10px 0
}

.right-inner .list-box li {
    color: #207234;
    max-width: 460px;
    padding: 15px 25px 15px 55px;
    z-index: 0;
    margin: 35px 0 35px -43px;
    line-height: 24px
}

.picture-box {
    position: absolute;
    top: 0
}

.picture-box .picture {
    margin: 0 auto 28px;
    position: relative;
    top: auto;
    right: auto
}

.picture-box span {
    font-size: 12px;
    line-height: 14px;
    color: #fff;
    text-align: center;
    display: block;
    width: 126px;
    letter-spacing: .02em
}

.right-inner .picture-box {
    right: -73px;
    top: 62px
}

.left-inner .picture-box {
    left: -65px;
    top: 118px
}

.left-inner .picture-box span {
    float: right;
    margin: 0 25px
}

.description-box {
    text-align: left;
    position: relative;
    margin: 0 0 211px
}

.description-box span {
    font-size: 10px;
    line-height: 14px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.desc-1 {
    float: left;
    width: 400px;
    padding: 0 0 0 37px
}

.desc-2 {
    float: right;
    width: 360px;
    padding: 0 20px 0 0
}

.img-block {
    position: absolute;
    max-width: 274px;
    top: 36px;
    left: 50%;
    margin: 0 0 0 -147px
}

.img-block img {
    width: 100%;
    height: auto
}

.cystitis .img-box span, .img-block strong {
    position: absolute;
    font-size: 18px;
    line-height: 22px
}

.img-block strong {
    text-transform: uppercase;
    font-weight: 400;
    display: block;
    top: 69px;
    margin-top: 0;
    padding: 0;
    width: 130px;
    color: #1d7236
}

.img-block .desc-1 {
    left: -93px
}

.img-block .desc-2 {
    right: -121px
}

.block-3 .text p {
    margin: 0 0 30px
}

.block-4 {
    border-top: 1px solid #04714a;
    position: relative;
    padding: 65px 0 88px
}

.block-4:after, .cystitis:before {
    position: absolute;
    content: '';
    left: 50%
}

.block-4:after {
    margin-left: -191px;
    background: url(../images/icon-16.png) no-repeat 50%, #fff;
    width: 390px;
    height: 42px;
    top: -23px
}

.block-4 h2 {
    margin: 0 0 41px
}

.cystitis, .treatment h4 {
    position: relative;
    text-align: left;
    margin: 0 0 77px
}

.cystitis:before {
    width: 2px;
    height: 500px;
    background: url(../images/icon-14.png) no-repeat;
    top: 0;
    margin: 0 0 0 -1px;
    z-index: 1
}

.cystitis:after, .medicine-block:after {
    clear: both;
    display: block;
    content: ''
}

.remission, .treatment {
    float: left;
    width: 50%;
    max-width: 495px;
    padding: 25px 0 0
}

.remission {
    float: right;
    padding: 12px 0 0
}

.treatment h4 {
    padding: 0 204px;
    margin: 0 0 44px;
    text-align: center
}

.treatment h4:after, .treatment h4:before {
    position: absolute;
    content: '';
    top: 50%;
    margin-top: -7px;
    width: 184px;
    height: 14px
}

.treatment h4:after {
    right: 10px;
    background: url(../images/icon-15.png) no-repeat
}

.treatment h4:before {
    left: 10px;
    background: url(../images/icon-17.png) no-repeat
}

.remission h4 {
    position: relative;
    margin: 0 0 23px;
    padding: 0 94px
}

.remission h4:after, .remission h4:before {
    position: absolute;
    content: '';
    width: 85px;
    height: 14px;
    top: 50%;
    margin-top: -7px
}

.remission h4:after {
    right: 10px;
    background: url(../images/icon-19.png) no-repeat
}

.remission h4:before {
    left: 10px;
    background: url(../images/icon-18.png) no-repeat
}

.remission .text {
    padding: 0 30px 0 80px;
    margin: 0 0 42px
}

.remission .title {
    display: block
}

.remission .text p {
    line-height: 27px
}

.cystitis .img-box {
    position: relative;
    margin: 0 0 51px
}

.cystitis .img-box img {
    vertical-align: bottom;
    width: 100%
}

.cystitis .img-box span {
    text-align: center;
    color: #fff;
    width: 180px
}

.treatment .img-box span {
    left: 180px;
    bottom: 10px
}

.remission .img-box span {
    left: 82px;
    bottom: 21px
}

.medicine {
    margin-top: 50px
}

.treatment .medicine-block {
    padding: 0 30px 0 0;
    margin: 0 0 11px
}

.treatment .medicine-img {
    position: relative;
    float: right
}

.medicine-block .medicine-img img {
    vertical-align: top
}

.remission .medicine-block strong, .treatment .medicine-block strong {
    overflow: hidden;
    display: inline-block;
    font-size: 18px;
    line-height: 22px;
    margin: 44px 0 0;
    color: #016f48;
    font-weight: 400
}

.treatment .descr {
    padding: 0 0 0 175px;
    display: block;
    font-size: 16px;
    line-height: 22px
}

.remission .medicine-block {
    padding: 0 0 0 55px;
    margin: 0 0 11px
}

.remission .medicine-img {
    position: relative;
    float: left
}

.remission .medicine-img .num, .treatment .medicine-img .num {
    position: absolute;
    font-size: 24px;
    line-height: 29px;
    color: #fff;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #bf1937;
    top: -20px;
    left: -5px;
    text-align: center;
    padding: 6px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.remission .medicine-block strong {
    line-height: 32px;
    margin: 38px 0 0;
    position: relative
}

.remission .medicine-block strong:after {
    position: absolute;
    content: '';
    background: #ccc;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px
}

.remission .descr {
    padding: 0 0 0 75px;
    display: block;
    font-size: 16px;
    line-height: 22px
}

.block-5 h2 {
    /* max-width: 670px; */
    margin: 0 auto 60px;
}

.block-5 .name {
    color: #027e5a
}

.block-5 .name strong {
    color: #333
}

.block-5 .name em {
    font-style: normal;
    color: #333
}

.block-5 .text {
    margin: 0 0 37px;
    position: relative;
    z-index: 2;
}

.block-5 .list-desc {
    margin: 0 0 33px
}

.application {
    background: url(../images/img-bg-03.jpg) no-repeat 50% 0;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 60px 0 80px;
    margin: -70px 0 0
}

.application h2 {
    font-size: 24px;
    line-height: 29px;
    max-width: 410px;
    margin: 0 auto 33px;
    text-align: center;
    text-transform: uppercase;
    color: #fff
}

.application .list-desc {
    text-align: center;
    margin: 0
}

.application .list-desc li {
    width: auto;
    margin: 0 0 15px
}

.application .list-desc li:after {
    display: none
}

.application .list-desc li:nth-child(1) {
    padding: 0
}

.item-box {
    width: 227px;
    height: 230px;
    color: #fff;
    text-align: center;
    padding: 54px 60px 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto
}

.block-1 .img-box {
    width: 120px;
    height: 120px;
    border: 3px solid #9e0000;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.block-1 .img-box img {
    position: absolute;
    left: -30px;
    right: 0;
    top: 0;
    bottom: -40px;
    margin: auto
}

.block-1 .text {
    margin-top: 50px
}

.img-box {
    margin: 0 auto;
    position: relative
}

.item-box em {
    display: block;
    font-size: 80px;
    line-height: 80px;
    text-shadow: -1px -1px 0 #000;
    font-style: normal
}

.item-box strong {
    display: block;
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    margin: -3px 0 5px
}

.application .list-desc li:nth-child(1) .item-box {
    background: url(../images/img-18.png) no-repeat
}

.application .list-desc li:nth-child(2) .item-box {
    background: url(../images/img-19.png) no-repeat
}

.application .list-desc li:nth-child(3) .item-box {
    background: url(../images/img-20.png) no-repeat
}

.application .item-box span {
    display: block;
    font-size: 11px;
    line-height: 11px;
    font-weight: 400;
    color: #fff
}

.application .subtitle {
    display: block;
    font-size: 16px;
    line-height: 19px;
    color: #fff;
    letter-spacing: .02em
}

.application .text, blockquote {
    color: #fff;
    font-size: 16px;
    text-align: center
}

blockquote {
    max-width: 645px;
    margin: 0 auto 10px;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    padding: 19px 0;
    line-height: 19px
}

blockquote em {
    display: block;
    font-size: 12px;
    line-height: 14px
}

.application .text {
    padding: 0 70px;
    line-height: 21px
}

.application .text .name, .application .text .name strong {
    color: #fff;
    font-family: 'Vida21Pro', Arial, Helvetica, sans-serif
}

.application .text .name strong {
    color: #333
}

.application .text .name em {
    color: #fff
}

.doc {
    font-size: 0;
    margin: 70px 0
}

.doc__left, .doc__right {
    display: inline-block;
    vertical-align: top
}

.doc__left {
    width: -webkit-calc(100% - 550px);
    width: calc(100% - 550px)
}

.doc__right {
    width: 550px
}

.notebook {
    background: url(../images/notebook.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 30px 20px 40px 50px
}

.notebook__content {
    max-width: 420px;
    margin: 0 auto;
    text-align: left;
    font-size: 18px
}

.notebook__content__name {
    font-size: 20px;
    font-weight: 500
}

.notebook__content__position {
    color: #969696;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px
}

.painting-images {
    text-align: right
}

.section-reviews {
    background: url(../images/img-bg-05.png) no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100%;
    padding: 130px 0;
    margin: -90px 0 0;
    position: relative;
    z-index: 1
}

.section-reviews h2 {
    margin-bottom: 5px
}

.section-reviews:after {
    content: '';
    background: url(../images/img-bg-06.png) no-repeat;
    width: 100%;
    height: 79px;
    position: absolute;
    bottom: 30px;
    left: 0;
    -webkit-background-size: cover;
    background-size: cover
}

.section-reviews__title {
    color: #237331;
    font-size: 22px;
    font-weight: 500
}

.text-center {
    text-align: center
}

.reviews {
    margin: 50px 0
}

.review {
    padding: 0 30px;
    margin-bottom: 20px
}

.review__ava, .review__content {
    display: inline-block;
    vertical-align: bottom
}

.review__ava {
    width: 128px
}

.review__content {
    width: -webkit-calc(100% - 128px - 4px);
    width: calc(100% - 128px - 4px);
    padding-left: 40px
}

.review__content__text {
    background-color: #f0f0f0;
    padding: 20px;
    position: relative;
    line-height: 24px;
    margin-bottom: 5px
}

.review__content__text:before {
    content: '';
    position: absolute;
    border-bottom: 50px solid #f0f0f0;
    border-left: 30px solid transparent;
    left: -25px;
    bottom: 0
}

footer {
    background: url(../images/img-bg-03.jpg) no-repeat 50% 0;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 80px 0 40px;
    margin: -70px 0 0
}

.footer__logo {
    font-size: 80px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1;
    color: #fff
}

.footer__text {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    max-width: 380px;
    margin-bottom: 100px
}

.footer__left, .footer__right {
    display: inline-block;
    vertical-align: top;
    position: relative
}

.footer__left {
    width: -webkit-calc(100% - 320px - 5px);
    width: calc(100% - 320px - 5px)
}

.footer__right {
    width: 320px
}

.footer__right__stock {
    color: #fff;
    font-size: 30px;
    font-weight: 500
}

.price {
    font-size: 24px;
    color: #fff;
    margin-top: 20px
}

.price__old {
    margin-bottom: 10px
}

.js_old_price {
    text-decoration: line-through
}

.js_new_price {
    color: #9b2b38;
    font-weight: 700;
    font-size: 30px
}

.form {
    background: #e7e7e8;
    padding: 30px;
    margin-top: 50px
}

.input {
    height: 50px;
    -webkit-box-shadow: inset 0 0 38px rgba(0, 0, 0, .09);
    box-shadow: inset 0 0 38px rgba(0, 0, 0, .09);
    background: #fff;
    border: 0;
    display: block;
    margin-bottom: 10px;
    padding: 0 10px;
    color: #202020;
    width: 100%;
    font-size: 18px;
    font-weight: 400
}

.input_select {
    background: #fff url(../images/down-arrow.png) no-repeat;
    background-position: 95% 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.form-title {
    color: #202020;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 30px
}

.btn {
    -webkit-box-shadow: 7px 7px 11px 1px rgba(183, 23, 56, .25);
    box-shadow: 7px 7px 11px 1px rgba(183, 23, 56, .25);
    -webkit-border-radius: 33px;
    border-radius: 33px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b71738), to(#87132b));
    background-image: -webkit-linear-gradient(top, #b71738 0%, #87132b 100%);
    background-image: -o-linear-gradient(top, #b71738 0%, #87132b 100%);
    background-image: linear-gradient(to bottom, #b71738 0%, #87132b 100%);
    color: #fff;
    font-size: 26px;
    font-weight: 500;
    line-height: 40px;
    border: 0;
    width: 100%;
    padding: 11px 10px;
    cursor: pointer;
    margin-top: 30px;
    -webkit-transition: all .7s ease-out;
    -o-transition: all .7s ease-out;
    transition: all .7s ease-out
}

.btn:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

::-webkit-input-placeholder {
    font-size: 18px;
    font-weight: 400;
    color: #202020
}

::-moz-placeholder {
    font-size: 18px;
    font-weight: 400;
    color: #202020
}

:-ms-input-placeholder {
    font-size: 18px;
    font-weight: 400;
    color: #202020
}

:-moz-placeholder {
    font-size: 18px;
    font-weight: 400;
    color: #202020
}

.woman {
    position: absolute;
    bottom: -70px;
    right: -35px
}

.product-footer {
    position: relative;
    z-index: 2
}

.discount {
    background: url(../images/discount.png) no-repeat;
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 3;
    top: -50px;
    left: 10px
}

.discount__int {
    position: absolute;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .26px;
    left: 12px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    text-align: center;
}

.relative {
    position: relative
}

.hide-mobile {
    display: none
}

.show-mobile {
    display: block
}

.fw-500 {
    font-weight: 500
}

.color-green {
    color: #237331
}

.color-red {
    color: #be0d21
}

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
    color: #adb5bd
}

.svg-inline--fa:hover {
    color: #20b478
}

form {
    position: relative;
    z-index: 10;
}

.circle-subtext {
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 65px;
    height: 65px;
    text-align: center;
    background: #008254;
    color: #fff;
    border-radius: 50%;
    padding: 15px 0;
    margin: 0 70px 30px 0;
}

.circle-subtext b {
    font-size: 14px;
    font-weight: bold;
    display: block;
}

.circle-subtext_mod {
    padding: 7px 0;
}

@media screen and (min-width: 991px) {
    .hide-mobile {
        display: block
    }

    .show-mobile {
        display: none
    }
}

@media screen and (max-width: 991px) {
    .section-reviews:after {
        display: none
    }

    .block-1 .list-desc li {
        margin-bottom: 40px
    }

    .block-2__title {
        display: none;
    }

    #header {
        position: absolute
    }

    footer {
        padding: 40px 0
    }

    .notebook__content {
        font-size: 16px
    }

    .img-box__title {
        margin-top: 5px
    }

    .discount {
        position: absolute;
        top: inherit;
        bottom: 0;
        left: -25px
    }

    .description-block {
        max-width: 300px;
        margin: 0 auto
    }

    .woman {
        right: -300px;
        bottom: -40px;
        width: 350px
    }

    .footer__logo, .footer__text {
        font-size: 55px;
        text-align: center;
        margin-bottom: 20px
    }

    .footer__text {
        font-size: 20px
    }

    .footer__right {
        width: inherit;
        max-width: 300px;
        display: block;
        margin: 0 auto
    }

    .footer__right__stock {
        text-align: center;
        font-size: 21px
    }

    .price {
        font-size: 22px
    }

    .head-right__text .upper, .js_new_price {
        font-size: 25px
    }

    .form {
        position: relative;
        z-index: 2;
        margin-top: 15px;
        padding: 20px
    }

    .footer__left {
        width: inherit;
        display: block;
        max-width: 300px;
        margin: 0 auto
    }

    .product-footer {
        width: 100%
    }

    .form-title {
        margin-bottom: 10px
    }

    .btn {
        margin-top: 10px
    }

    h2 {
        font-size: 20px
    }

    .doc__right {
        width: inherit
    }

    .block-2 h3 {
        line-height: inherit;
        font-size: 18px;
        margin: 0
    }

    .notebook {
        background: #f0f0f0;
        padding: 20px
    }

    .doc {
        margin: 0 0 30px
    }

    #nav li:after, #nav li:before, .cystitis:before, .doc__left {
        display: none
    }

    .section-reviews {
        padding: 80px 0 0;
        -webkit-background-size: auto auto;
        background-size: auto
    }

    .head-right__logo {
        font-size: 65px
    }

    .head-right__text {
        font-size: 20px
    }

    #wrapper {
        padding: 0 0 108px
    }

    .list-block {
        background: 0 0
    }

    .list-block .left, .list-block .right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px
    }

    .left-inner .list-box, .right-inner .list-box {
        width: 100%
    }

    .left-inner .list-box li {
        margin: 0 0 10px;
        width: 100%;
        max-width: 100%
    }

    .right-inner .list-box li {
        margin: 10px 0 15px;
        width: 100%;
        max-width: 100%;
        padding: 15px 25px;
        line-height: inherit
    }

    .left-inner .picture-box {
        left: 0
    }

    .right-inner .picture-box {
        right: 0
    }

    .remission .medicine-block, .treatment .medicine-block {
        text-align: center;
        padding: 0
    }

    .remission .medicine-img, .treatment .medicine-img {
        float: none;
        max-width: 307px;
        margin: 0 auto
    }

    .remission .medicine-block strong, .treatment .medicine-block strong {
        margin: 20px 0 0
    }

    .remission .descr, .treatment .descr {
        padding: 0 20px;
        text-align: center
    }

    .application {
        padding: 60px 0 120px;
        margin: -40px 0 0
    }

    .block-3 h2 {
        padding: 0
    }

    .remission, .treatment {
        float: none;
        width: 100%;
        max-width: 100%
    }

    .treatment {
        padding: 0;
        margin: 0 auto 30px
    }

    .remission {
        margin: 0 auto
    }

    #nav ul, .remission h4 {
        text-align: center
    }

    .remission .img-box span, .treatment .img-box span {
        left: 50%;
        margin-left: -80px
    }

    .description {
        padding: 74px 0 30px
    }

    #nav .btn-mob-menu {
        display: block
    }

    #nav ul {
        position: absolute;
        top: 57px;
        left: 0;
        right: 0;
        background: #e6e6e7;
        z-index: 3;
        padding: 15px 0
    }

    #nav ul, .picture {
        display: none
    }

    .heading {
        margin: 72px auto 45px;
        max-width: 665px
    }

    .medicine {
        max-width: 420px;
        margin: 30px 60px 20px
    }

    .medicine img {
        width: 100%;
        height: auto
    }

    .list-symptoms {
        width: 100%;
        float: none;
        margin: 0
    }

    .items.other, .list-symptoms .items {
        width: 48%;
        margin: 0 2% 23px 0;
        float: left
    }

    .microbe {
        position: relative;
        float: right;
        top: auto;
        margin: 0 0 40px
    }

    .picture-box .picture {
        display: block
    }

    .desc-1, .desc-2 {
        padding: 0 40px 0 37px;
        width: 50%
    }

    .desc-2 {
        padding: 0 20px 0 40px
    }

    .head-left__text {
        padding-right: 0;
        font-size: 35px
    }

    .head-left, .head-right {
        width: -webkit-calc(50% - 10px);
        width: calc(50% - 10px);
        vertical-align: middle
    }

    .head-right {
        text-align: left
    }

    .list-desc li {
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3)
    }

    .list-desc li .img-box:after {
        right: -100px
    }

    .list-desc li:nth-child(3):after {
        left: 50%;
        right: 50%;
        bottom: -30px;
        top: inherit;
        margin: auto -20px auto auto
    }

    .list-desc li:nth-child(4) img, .list-desc li:nth-child(5) img {
        bottom: 0
    }
}

@media screen and (max-width: 800px) {
    .block-2 .list-desc li, .block-5 .list-desc li {
        width: inherit;
        display: table;
        margin: 0 auto 40px
    }

    .list-desc li:nth-child(1):after, .list-desc li:nth-child(2):after {
        bottom: -20px;
        left: 50%;
        margin-top: 0;
        margin-left: -12px;
        top: auto
    }

    .circle-subtext {
        margin-right: 40px;
    }

    .block-5 .list-desc li:nth-child(3) .circle-subtext {
        margin-right: 65px;
    }
}

@media screen and (max-width: 690px) {
    .list-block:before, .woman {
        display: none
    }

    #header {
        height: 120px
    }

    .review__content b {
        text-align: center;
        display: block
    }

    .main-screen .text {
        padding: 0;
        background: 0 0
    }

    .main-screen {
        padding: 100px 0 55px
    }

    .heading {
        width: 100%;
        margin: 0 auto 20px
    }

    .head-left__text {
        margin: 0 auto;
        max-width: 100%;
        font-size: 27px
    }

    .head-right__logo {
        font-size: 50px;
    }

    .head-right__text .upper {
        font-size: 23px
    }

    .head-left, .head-right {
        padding: 0;
        text-align: center;
        width: 100%
    }

    .head-left {
        float: none;
        border-right: none;
        margin: 0 auto 30px
    }

    .head-right {
        margin: 0 auto
    }

    .symptoms .text {
        margin: 0 0 30px
    }

    .symptoms .text p {
        width: 97%
    }

    .description h2 {
        padding: 0;
        margin: 0 0 20px
    }

    .description {
        margin: -50px 0 0;
        padding: 74px 0 40px
    }

    .description h3 {
        padding: 0;
        margin: 20px 0
    }

    .remission .text {
        padding: 0 30px;
        text-align: center
    }

    .description-box span {
        float: none;
        width: 100%;
        margin: 0 0 15px;
        padding: 0;
        display: block
    }

    .img-block {
        position: relative;
        top: auto;
        left: auto;
        margin: 0 auto
    }

    .description-box {
        margin: 0 0 30px
    }

    .left-inner .picture-box, .review__content__text:before, .right-inner .picture-box {
        display: none
    }

    .left-inner .list-box, .right-inner .list-box {
        width: 100%;
        max-width: 100%
    }

    .application {
        margin: -30px 0 0
    }

    .application .text {
        padding: 0 30px
    }

    .review__content__text {
        margin-bottom: 10px
    }

    .review {
        padding: 0;
        max-width: 300px;
        margin: 0 auto;
        display: table !important
    }

    .review__ava {
        display: block;
        margin: 0 auto 20px
    }

    .review__content {
        display: block;
        padding-left: 0;
        width: inherit;
        margin-bottom: 10px
    }
}

@media screen and (max-width: 520px) {
    .items.other, .list-symptoms .items, .microbe {
        width: 100%;
        margin: 0 0 23px;
        float: none
    }

    .microbe {
        margin: 0 auto 40px;
        right: auto;
        width: 260px
    }

    .block-2:after, .block-4:after {
        width: 310px;
        margin-left: -155px
    }

    .main-screen .text {
        background: 0 0;
        padding: 0
    }

    .block-2 h3, .description .text, .description h2 {
        padding: 0
    }

    .application {
        margin: -25px 0 0
    }

    #wrapper {
        padding: 0 0 88px
    }

    .img-block .desc-1, .img-block .desc-2 {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        text-align: center;
        margin: 0 0 15px
    }
}

@media screen and (max-width: 500px) {
    .list-desc li {
        text-align: center;
        width: inherit;
        padding: 0;
        display: table;
        margin: 20px auto 0
    }

    .block-1 .list-desc li:after {
        left: 50%;
        top: inherit !important;
        bottom: -33px !important;
        margin-left: -10px
    }

    .list-desc li .img-box:after {
        left: 48px;
        bottom: -65px;
        top: inherit
    }

    .img-box__title {
        margin-top: 10px
    }

    .application .list-desc li {
        margin: 20px auto 0 !important
    }

    .block-2 .list-desc li .img-box:after, .block-5 .list-desc li .img-box:after {
        bottom: -25px;
        right: 90px;
        left: inherit
    }

    .item-box {
        margin: 0 auto 12px
    }

    .block-5 .text {
        /* padding:0 30px */
        margin-bottom: 0;
    }
}

@media screen and (max-width: 480px) {
    .logo {
        margin: 21px 0 0
    }

    .description {
        margin: -30px 0 0
    }

    #nav .btn-mob-menu {
        top: 26px;
        right: 5px
    }

    .treatment h4 {
        padding: 0 100px
    }

    .treatment h4:after {
        width: 100px;
        background-position: 100% 0
    }

    .treatment h4:before {
        width: 100px;
        background-position: 0 0
    }

    .application {
        margin: -20px 0 0
    }
}

@media screen and (max-width: 380px) {
    .head-right img {
        width: 100%;
        height: auto
    }

    .medicine {
        margin: 0 auto 30px
    }

    .remission h4, .treatment h4 {
        padding: 0
    }

    .remission h4:after, .remission h4:before, .treatment h4:after, .treatment h4:before {
        display: none
    }

    .application {
        margin: -15px 0 0
    }
}

.list-desc li span.img-box__subtext {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: 0 0 55px 20px;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-weight: bold;
    color: #cc0000;
    line-height: 48px;
    border: 1px solid #007f5e;
}

.list-desc li span.img-box__subtext:before {
    content: '';
    width: 44px;
    height: 44px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 0 0 3px #007f5e;
    -moz-box-shadow: inset 0 0 0 3px #007f5e;
    box-shadow: inset 0 0 0 3px #007f5e;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -22px 0 0 -22px;
}

.circle-text {
    font-size: 18px;
    font-weight: bold;
    color: #007f5e;
}

.list-desc .circle-text span {
    color: #cc0000;
}