html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { position: relative; overflow-x: hidden; }

body { width: 100%; background-color: #fff; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 500; color: #535353; min-height: 100vh; }

a { transition: all 0.3s ease; color: #535353; text-decoration: none; }

a:hover { text-decoration: none; }

p { margin-bottom: 20px; }

h1, h2, h3 { color: #fff; margin-bottom: 20px; line-height: 1.2; }

h1 { font-size: 36px; }

h2 { font-size: 24px; }

h3 { font-size: 18px; }

img { max-width: 100%; }

caption { margin-bottom: 15px; }

button, .button { transition: all 0.3s ease; cursor: pointer; background: #465972; border: none; color: #fff; border-radius: 40px; position: relative; z-index: 1; text-align: center; font-weight: 700; font-family: 'Montserrat', sans-serif; padding: 12px 22px; }
button:hover, .button:hover { background: #035358; }

.button { display: inline-block; text-decoration: none; }
.button sup {
  position: relative;
  bottom: 3px;
}
.button-green { background: #058891; }

.button-big { padding: 30px 50px; }

:focus { outline: none; }

::-webkit-input-placeholder { color: #9d7f55; }

::-moz-placeholder { color: #9d7f55; }

:-moz-placeholder { color: #9d7f55; }

:-ms-input-placeholder { color: #9d7f55; }

.wrapper { max-width: 1440px; width: 100%; margin: 0 auto; position: relative; }

.flex { display: flex; flex-wrap: wrap; }

.flex-c { display: flex; align-items: center; flex-wrap: wrap; }

.flex-s { display: flex; justify-content: space-between; flex-wrap: wrap; }

.flex-s-c { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

.flex-c-c { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

.bright:hover { filter: brightness(120%); }

.topPanel { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 99; transition: 0.3s; }
.topPanel.topPanel-fixed {
  position: fixed;
  background: #6cc8f1;
}
.topPanel.topPanel-fixed .topPanel-wrapper{
  padding: 15px 76px;
}
.topPanel-wrapper { width: 100%; max-width: 1440px; position: relative; margin: 0 auto; padding: 25px 76px; transition: 0.3s; }

.topPanel.topPanel-top .topPanel-wrapper { background: #6F86A3; border-radius: 0px 0px 40px 40px; padding: 5px 76px; }

.topPanel-logo { max-height: 77px; margin-right: 50px; }

.topPanel-menu { display: flex; align-items: center; }

.header { min-height: 770px; padding-bottom: 40px; position: relative; background-image: url(../images/header-bg_2.webp); background-position: top center; background-repeat: no-repeat; background-size: cover; }
.header-title { z-index: 3; color: #FFFFFF; margin-bottom: 45px; }
.header-img { position: relative; z-index: 3; margin-bottom: 50px; }
.header-button { position: relative; z-index: 3; }

.headerInfo { padding-top: 190px; max-width: 750px; padding-left: 100px; }

.drops { position: absolute; width: 750px; left: 50%; margin-left: -375px; top: 320px; }

.drops_1 { background: url(../images/drops_1.png) no-repeat; width: 426px; height: 337px; position: absolute; left: 227px; top: -15px; z-index: 2; }

.drops_2 { background: url(../images/drops_2.png) no-repeat; width: 108px; height: 146px; position: absolute; right: 17px; top: 54px; z-index: 2; }

.drops_3 { background: url(../images/drops_3.png) no-repeat; width: 113px; height: 55px; position: absolute; left: 0px; top: 89px; z-index: 2; }

.topPanel-menu li { padding: 0px 5px; }
.topPanel-menu li a { color: #fff; display: block; padding: 10px 20px; border-radius: 20px; }
.topPanel-menu li a:hover { background-color: #465972; }
.topPnael-button {
  display: flex;
  align-items: center;
}
.topPnael-button a {
  margin-right: 10px;
}
.icon { display: inline-block; position: relative; }

.icon-arrow { background: url(../images/icon-arrow.png) no-repeat; width: 24px; height: 15px; top: 2px; margin-left: 2px; }

.topPanel-lang { padding-right: 20px; margin-left: 70px; }
.topPanel-lang a { color: #fff; }
.topPanel-lang a:hover { text-decoration: underline; }

#compound { background: url(../images/compound-bg.jpg) center top no-repeat; min-height: 740px; padding-top: 60px; padding-bottom: 60px; color: #fff; }

.section { position: relative; }

.title { font-size: 36px; line-height: 45px; font-weight: 700; position: relative; }

.compound-title { text-transform: uppercase; text-align: center; }

.compoundBlock { position: absolute; font-size: 14px; font-weight: 300; line-height: 17px; }
.compoundBlock-title { font-weight: bold; margin-bottom: 15px; position: relative; font-size: 18px; }
.compoundBlock-title:after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; right: -14px; top: 6px; }
.compoundBlock-title:before { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; right: -20px; top: 0px; }

.compoundBlock-left { top: 500px; left: 200px; width: 240px; text-align: right; }

.compoundBlock-right { top: 190px; right: 120px; width: 310px; }

.line-left { position: absolute; height: 1px; width: 160px; background: #fff; top: -42px; right: -163px; transform: rotate(-35deg); }

.line-right { position: absolute; height: 1px; width: 220px; background: #fff; top: 72px; left: -219px; transform: rotate(-35deg); }

.compoundBlock-right .compoundBlock-title:after { right: auto; left: -14px; }
.compoundBlock-right .compoundBlock-title:before { left: -20px; right: auto; }

#indication { height: 100%; padding: 50px 0px; }

.indication-left { min-height: 400px; width: 43%; }

.indication-right { width: 57%; padding: 65px 30px 30px 30px; }

.indication-img { background: url(../images/info-img-bg.png) no-repeat; width: 490px; height: 497px; padding-right: 50px; }

.indication-title { color: #058891; margin-bottom: 35px; }
.indication-title sup {
  position: relative;
  bottom: 10px;
}
.indication-text h2 { color: #058891; line-height: 32px; font-size: 24px; font-weight: 700; margin-bottom: 35px; }

.indication-list li { padding: 15px 0px; line-height: 30px; position: relative; font-size: 20px; }
.indication-list li:before { content: "-"; margin-right: 5px; }
.indication-list li span { font-size: 16px; }

#advantage { min-height: 890px; background: url(../images/bg.webp) center center no-repeat; padding: 100px 90px; }

.advantage-title { font-size: 48px; line-height: 60px; padding-bottom: 60px; color: #058891; }
.advantage-title sup {
  position: relative;
  bottom: 10px;
}
.advantage-left { width: 36%; }

.advantage-right { width: 64%; padding-left: 20px; }

.advantage-block { height: 245px; font-weight: 700; font-size: 21px; line-height: 30px; text-align: center; background: #fff; box-shadow: 0px 4px 4px rgba(20, 127, 172, 0.25); border-radius: 50px; display: flex; align-items: center; padding: 40px; }

.advantage-block-flex { padding: 20px; width: 50%; }

.advantage-button { text-align: center; padding-top: 40px; }

#video { padding-top: 90px; padding-bottom: 50px; text-align: center; margin-bottom: 150px;}
#video .container { width: 90%; margin: 0 auto; position: relative;}
video { width: 100%; margin: 0 auto; }

.self-medication { background: #fff; position: fixed; width: 100%; bottom: 0; left: 0; right: 0; padding: 10px; z-index: 10; }

.burger-button { transition: 0.3s; display: none; left: 20px; top: 15px; position: fixed; z-index: 21; }
.burger-button.active { left: 260px; }
.burger-button.active span:nth-child(1) { transform: rotate(45deg); top: 5px; }
.burger-button.active span:nth-child(2) { display: none; }
.burger-button.active span:nth-child(3) { transform: rotate(-45deg); bottom: 5px; }
.burger-button span { display: block; background: #fff; height: 5px; width: 40px; margin: 5px 0px; border-radius: 3px; transition: 0.3s; position: relative; }

.instruction { font-weight: 300; padding: 30px; line-height: 1.4; }

.instruction-title { font-weight: 500; margin-bottom: 20px; font-size: 20px; color: #465972; }

.self-medication-text { padding-bottom: 10px; font-size: 14px; }

.toTop { padding: 5px; position: fixed; bottom: 200px; /* отступ кнопки от нижнего края страницы*/ right: 20px; cursor: pointer; display: none; z-index: 10; display: none !important; }
@media (max-width: 1420px) { .topPanel-logo { margin-right: 30px; }
  .topPanel-lang { margin-left: 50px; }
  .topPanel-menu li a { padding: 0px 5px; }
  .line-right, .line-left { display: none; } 
  #video .container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 1200px) { .topPanel-wrapper { padding: 25px 15px; }
  .topPanel-lang { margin-left: 25px; }
  .topPanel-logo { margin-right: 10px; }
  .topPanel.topPanel-top .topPanel-wrapper { padding: 5px 15px; }
  .section { padding-left: 15px; padding-right: 15px; }
  .header { background-position: top right; }
  .headerInfo { padding-left: 0px; margin: auto; text-align: center; }
  .toTop { bottom: 150px; }
 }
@media (max-width: 993px) { .topPanel-left { display: block; position: fixed; width: 320px; height: 100%; left: -320px; top: 0; background: #6F86A3; padding: 30px; transition: 0.3s; z-index: 20; }
  .topPanel-left.active { left: 0; }
  .header-title { background: rgba(0, 0, 0, 0.2); padding: 20px; border-radius: 40px; }
  .burger-button { display: block; }
  .topPanel-wrapper { justify-content: flex-end; }
  .topPanel-logo { margin-bottom: 100px; }
  .topPanel-logo a { display: inline-block; }
  .topPanel-menu { display: block; }
  .topPanel-menu li { padding: 10px 0px; }
  .topPanel-menu li a { font-size: 24px; padding: 10px 10px; }
  .compoundBlock { position: relative; right: auto; left: auto; top: auto; margin: 0 auto; width: 310px; background: rgba(0, 0, 0, 0.2); padding: 40px; margin-bottom: 20px; border-radius: 40px; }
  .compound-title { margin-bottom: 60px; }
  .title { font-size: 30px; line-height: 40px; text-align: center; }
  .indication-left, .indication-right, .advantage-left, .advantage-right { width: 100%; min-height: auto; } }
@media (max-width: 770px) { #advantage { background-size: cover; padding: 50px 30px; }
  .advantage-block-flex, .footer-left, .footer-right { width: 100%; text-align: center; }
  .footer-left { margin-bottom: 40px; }
  .advantage-right { padding-left: 0px; }
  .footer { padding: 40px 20px; } }
@media (max-width: 525px) { .icon-arrow { display: none; }
  .header { padding-left: 10px; padding-right: 10px; }
  button, .button, .button { padding: 10px 30px; }
  .button-big { padding: 30px 50px; }
  .title { font-size: 22px; line-height: 34px; }
  .compoundBlock { width: 290px; }
  .indication-img { background: url(../images/info-img-bg.png) center no-repeat; padding-right: 0px; }
  .indication-text { font-size: 18px; }
  .indication-right { padding: 40px 10px 30px 10px; }
  .header { background-position: top center; }
  .topPanel.topPanel-fixed .topPanel-wrapper {
    padding: 15px 15px;
  }
  .topPnael-button .button {
    padding: 10px 10px;
    font-size: 14px;
  }
 }