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

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  color: #4d4d4d;
  font-optical-sizing: auto;
}

body, html {
  background: #F9FEF0;
  min-width: 380px;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
}

textarea:focus, input:focus{ outline: none; }
::-webkit-input-placeholder {color:#777;}
::-moz-placeholder          {color:#777;}
:-moz-placeholder           {color:#777;}
:-ms-input-placeholder      {color:#777;}

img { border: none; }
.nowrap { white-space: nowrap !important; }

.black-links a {
  color: #4d4d4d;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.color-green {
  color: #02954E;
}

a {
  color: #02954E;
  cursor: pointer;
  text-decoration: none;
}

button, a.button {
  cursor: pointer;
  background: #02954E;
  color: white;
  border-radius: 0.6em;
  border: 1px solid #02954E;
  box-shadow: 0px 0.45em 0.45em 0px rgba(34, 60, 80, 0.1);
  padding: 1.1em;
  font-size: 1em;
  margin: 1em 0;
  width: 100%;
  display: inline-block;
  text-align: center;
}

input[type=text] {
  padding: 0.5em 1em;
  font-size: 1em;
  margin: 1em 0;
}

select {
  font-size: 1em;
  margin: 1em 0.3em;
  padding: 0.5em 1em;
}

table {
  width: 100%;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #02954E;
}

h1, h2 {
  padding: 0 0 0.4em 0;
  margin: 0;
}

h1 {
  padding: 0;
  margin: 0 0 0.3em 0;
  font-size: 1.4em;
}

h2 {
  font-size: 1.4em;
}

p {
  margin-bottom: 0.5em;
}

#hero ul.circle {
  display: inline-block;
  margin: 1em auto 1em 1em;
}

table.hero {
  width: 100%;
}

table.hero td:first-child {
  width: 0;
  display: none;
}

table.hero td:last-child {
  text-align: center;
  width: 100%;
}

.pannel {
  margin: 0.6em;
  padding: 1em;
  font-size: 1em;
  text-align: center;
  background: #fff;
  border-radius: 1.4em;
  box-shadow: 0px 0px 0.45em 0px rgba(2, 149, 78, 0.16);
}

section {
  text-align: center;
}

section.no-pannel {
  padding-top: 1em;
}

.offer {
  padding: 0.5em 0 0.5em 0;
  font-size: 1.1em;
  font-weight: 600;
}

.why-me-items {
  margin: 0 auto;
}

.why-me-item-title {
  color: #02954E;
  margin-bottom: 0.5em;
}

.why-me-item {
  text-align: left;
}

#top-nav {
  text-align: right;
  font-size: 1em;
  white-space: nowrap;
}

#top-nav a {
  color: #4d4d4d;
  margin: 0 1em;
  white-space: nowrap;
  font-size: 1em;
}

#top-nav a:first-child {
  margin-left: 0;
}

#top-nav a.messenger {
  margin: 0 0.2em;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

#top-nav a.messenger img {
  width: 100%;
  max-width: 1.6em;
  margin: auto;
}

#top-nav button, #top-nav a.button {
  color: white;
  margin: 0;
  font-size: 0.8em;
  padding: 0.5em 1em;
  white-space: nowrap;
  width: auto;
}

#top-nav .phone-number {
  font-size: 0.9em;
  margin: 0 0.4em;
}

#burger img {
  width: 100%;
  max-width: 30px;
}

#about-me table {
  display: block;
}

#about-me table td {
  display: block;
  padding: 0 1em;
}

img.logo {
  width: 100%;
  max-width: 2em;
}

img.me {
  width: 100%;
  max-width: 240px;
  padding-bottom: 1em;
}

#about-me .fio, #hero .fio {
  font-size: 1.2em;
  color: #02954E;
  font-weight: 700;
  padding-bottom: 0.5em;
}

#results-container {
  display: block;
  width : 90%;
  margin: 0 auto;
  text-align: center;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #02954E;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background: #ddd;
}

.video-result {
  width: 100%;
  border-radius: 1.4em;
  font-size: 0.9em;
  margin: 1em auto;
}

.video-result img.avatar {
  width: 100%;
  max-width: 7em;
  border-radius: 50%;
  border: 1px solid #9BCD4C;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.video-result-title {
  margin-bottom: 1em;
}

.video-result-play-container {
  display: inline-block;
  margin: auto;
  cursor: pointer;
}

.video-result-play {
  display: flex;
  margin: 1em auto;
  vertical-align: middle;
}

.video-result-play-btn {
  width: 1.2em;
}
.video-result-play-text {
  padding: 0.1em 0 0 0.5em;
}

.video-result video {
  border-radius: 1.4em;
  width: 100%;
  height: 100%;
  max-height: 30em;
}

.documents-list {
  margin-top: 0.5em;
}

.documents-list img {
  width: 30%;
  padding: 0.2em;
  max-width: 12em;
}

ul.circle {
  text-align: left;
}

ul.circle li, ul.circle li a{
  font-size: 1em;
}

.help-with-section-title {
  color: #02954E;
  font-size: 1.2em;
}

.help-with-section-hdr {
  padding: 0.8em 0;
}

.help-with-section-content {
}

.help-with-section-content ul.circle {
  display: inline-block;
  max-width: 80%;
  margin: auto;
}

.help-with-section-content ul li.more-1, .help-with-section-content ul li.more-2 {
  display: none;
}

.help-with-section-content ul li.more-1.ctrl, .help-with-section-content ul li.more-2.ctrl {
  display: block;
}

ul.circle, ul.check {
  margin: 0 0 0 1.15em;
  padding: 0;
}

ul.circle li, ul.check li {
  list-style-type: none;
  position: relative;
  padding: 0.5em 0;
}

ul.circle li:before {
  content: '●';
  color: #9BCD4C;
  position: absolute;
  top: 0.1em;
  left: -0.8em;
  font-size: 1.4em;
}

ul.check li:before {
  content: '✓';
  color: #9BCD4C;
  position: absolute;
  top: 0.2em;
  left: -0.9em;
  font-size: 1.3em;
}

.callback-form {
  width: 100%;
  margin: auto;
  max-width: 700px;
}

.callback-form table {
  margin: 0;
  padding: 0;
  width: 100%;
}

.callback-form table td {
  margin: 0;
  padding: 0;
}

.callback-form table td:first-child {
  padding-right: 1em;
}

.callback-form input[type=text], .callback-form select.callback-form-date, .callback-form select.callback-form-time {
  padding: 1em 1.5em;
  margin: 0.5em 0;
  font-size: 1em;
  border: 1px solid #999;
  border-radius: 0.6em;
  width: 100%;
  background: white;
}

.callback-form input[type=text] {
}

.callback-form select.callback-form-date, .callback-form select.callback-form-time {
}

.callback-form select.callback-form-time {
  text-align: center;
}

.callback-form button {
  margin: 0.5em 0 0 0;
  width: 100%;
}

.messengers-btns .btn {
  display: inline-block;
  vertical-align: middle;
  color: white;
  border-radius: 0.4em;
  padding: 0.5em 1.4em;
  font-size: 0.9em;
}

.messengers-btns .btn img {
  vertical-align: middle;
  padding-right: 0.1em;
  width: 100%;
  max-width: 1.4em;
}

.messengers-btns .telegram {
  background: #208EF2;
}

.messengers-btns .whatsapp {
  background: #12B76A;
}

.messengers-btns-title {
  padding: 0.5em 0;
  display: inline-block;
}

.messengers-btns-buttons {
  white-space: nowrap;
}

.how-it-happens-item-num {
  font-weight: 700;
  text-align: center;
  font-size: 2.4em;
  color: #02954E;
}

table.pay-for-result {
  width: auto;
  margin: 0 auto 1em auto;
  text-align: left;
}

table.pay-for-result td {
  padding: 0.5em 0;
}

table.pay-for-result td:first-child{
  font-weight: 700;
  text-align: center;
  color: #02954E;
  width: 2em;
  vertical-align: top;
}

#confidentiality ul {
  display: inline-block;
  margin-left: 1em;
  margin-right: 1em;
}

p.confidentiality {
  text-align: left;
  margin: 0;
}

#price-list {
  text-align: center;
  margin: 0 auto;
}

.price {
  text-align: left;
}

.price-title {
  color: #02954E;
  font-size: 1.2em;
  font-weight: 700;
  padding-bottom: 0.5em;
}

.price-includes-title {
  padding: 0.5em 0;
}

table.price-includes {
  width: 100%;
}

table.price-includes img {
  width: 1.7em;
}


table.price-includes td {
  vertical-align: middle;
  padding: 0.5em;
}

table.price-includes td:first-child {
  width: 3%;
}

table.price-includes td:last-child {
  width: 97%;
  vertical-align: middle;
  padding-top: 0.1em;
}

.price-fit {
  padding: 0.5em 0;
}

.price-fit p {
  padding: 0.5em 0;
}

.price-cost {
  display: block;
  font-weight: 600;
  font-size: 1.7em;
  padding: 0.5em 0;
}

table.price {
  border-spacing: 0px;
  border-collapse: collapse;
  margin: 0.5em 0 0.5em 0;
}

table.price td, table.price th {
  padding: 0.5em 0.5em;
  text-align: center;
}

table.price th {
  border-right: 1px solid green;
  border-bottom: 1px solid green;
}

table.price td {
  border-right: 1px solid green;
  border-bottom: 1px solid green;
}

table.price th:last-child, table.price td:last-child {
  border-right: none;
}

table.price tr:last-child td {
  border-bottom: none;
}


.quiz-stage {
  display: none;
}

.quiz-stage.active {
  display: block;
}

footer {
  text-align: center;
  padding: 3em;
  font-size: 1em;
}

.footer__rights {
  text-align: justify;
  font-size: 0.8em;
  width: 100%;
  margin: 1em auto;
  text-indent: 2em;
}

.footer__rights p:last-child {
  margin-bottom: 0;
}

.footer__nav {
  margin-bottom: 1em;
}

.footer__nav a {
  color: #02954E;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9em;
  margin: 1em 0.5em;
  white-space: nowrap;
}

.footer__inn {
  padding-top: 0.3em;
}

.footer__nav a:hover {
  text-decoration: underline;
}

.privacy-policy {
  text-align: justify;
  font-size: 0.7em;
  line-height: 1.5em;
}

.p-container {
    text-align: left;
}

/* dialogs */

.dialog {
  display: none;
  height: 100%;
  width: 100%;
  background-color: #F9FEF0;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
}

.dialog-btn-close {
  float: right;
  padding: 0;
  margin-top: -10px;
  margin-right: -10px;
}

.dialog .section {
  height: auto;
}

.dialog-title {
  padding: 2em 0 1em 0;
}

.dialog-content {
  padding: 0 0 2em 0;
}

/* adaptive */
#top-nav a.nav {
    display: none;
}

.w300 { display: block; }
.w420 { display: none; }
.w600 { display: none; }
.w800 { display: none; }
.w1000 { display: none; }
.w1400 { display: none; }
.w1900 { display: none; }
.w2500 { display: none; }
.w3800 { display: none; }
.w7000 { display: none; }

@media (min-width: 300px) {
  .w300 { display: block; }
}

@media (min-width: 420px) {
  .w300 { display: none; }
  .w420 { display: block; }
}

@media (min-width: 600px) {
  .w420 { display: none; }
  .w600 { display: block; }

  button, a.button {
    width: auto;
    padding-right: 2em;
    padding-left: 2em;
  }
}

@media (min-width: 800px) {
  .w600 { display: none; }
  .w800 { display: block; }

  .price {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .p-container {
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }

  .p-container p {
    margin: 1em auto;
  }
}

@media (min-width: 1000px) {
  .w800 { display: none; }
  .w1000 { display: block; }

  body, html { font-size: 20px; }

  .price, .why-me-items {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  .video-results {
    display: table;
    border-collapse: separate;
    border-spacing: 1em;
    margin: 0;
  }

  .video-results-row {
    display: table-row;
  }

  .video-result {
    width: 50% !important;
    display: table-cell;
  }

  /*#confidentiality, #pay-for-result, #how-it-happens, #contacts, {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }*/
}

@media (min-width: 1200px) {
  body, html { font-size: 22px; }
  table.hero td:first-child {
    display: table-cell;
    vertical-align: top;
    text-align: right;
    padding-right: 2em;
    width: 45%;
  }

  table.hero td:last-child {
    vertical-align: top;
    text-align: left;
    width: 55%;
  }

  #about-me table {
    display: table;
    width: 100%;
    margin: auto;
  }

  #about-me table td {
    display: table-cell;
    vertical-align: top;
  }

  #about-me table td.content {
    padding-top: 0em;
  }

  #about-me img.me, img.me {
    width: 15em;
    max-width: none;
  }

  .p-container {
    width: 80%;
  }
}

@media (min-width: 1400px) {
  .w1000 { display: none; }
  .w1400 { display: block; }

  #top-nav a.nav {
    font-size: 0.8em;
    display: inline-block;
  }

  body, html { font-size: 22px; }
  body { padding: 0 2em; }
}

@media (min-width: 1700px) {
  body, html { font-size: 24px; }
}

@media (min-width: 1900px) {
  .w1400 { display: none; }
  .w1900 { display: block; }

  body, html { font-size: 32px; }
}

@media (min-width: 2500px) {
  .w1900 { display: none; }
  .w2500 { display: block; }

  body, html { font-size: 42px; }
  body { padding: 0 3em; }
}

@media (min-width: 3800px) {
  .w2500 { display: none; }
  .w3800 { display: block; }

  body, html { font-size: 64px; }
}

@media (min-width: 7000px) {
  .w3800 { display: none; }
  .w7000 { display: block; }

  body, html { font-size: 70px; }
}
