@font-face {
  font-family: 'MontserratRegular';
  src: local("MontserratRegular"), local("MontserratRegular"), url("fonts/montserrat/MontserratRegular.ttf") format("truetype"); }

@font-face {
  font-family: 'MontserratBold';
  src: local("MontserratBold"), local("MontserratBold"), url("fonts/montserrat/MontserratBold.ttf") format("truetype"); }

@font-face {
  font-family: 'MontserratExtraBold';
  src: local("MontserratExtraBold"), local("MontserratExtraBold"), url("fonts/montserrat/MontserratExtraBold.ttf") format("truetype"); }

body {
  font-family: 'MontserratRegular'; }

h1 {
  font-size: 2rem; }
  @media screen and (min-width: 992px) {
    h1 {
      font-size: 2.3rem; } }

h2 {
  font-family: 'MontserratExtraBold'; }
  @media screen and (min-width: 992px) {
    h2 {
      font-size: 3rem; } }

/* utility */
.fs-12 {
  font-size: 12px; }

.fs-14 {
  font-size: 14px; }

.fs-16 {
  font-size: 16px; }

.fs-18 {
  font-size: 18px; }

.fs-20 {
  font-size: 20px; }

.fs-30 {
  font-size: 30px; }

.ff-mb {
  font-family: 'MontserratBold'; }

.ff-meb {
  font-family: 'MontserratExtraBold'; }

.color-white {
  color: #fff; }

.color-gray {
  color: #c8cbce; }

.color-brown {
  color: #bc996f; }

.color-red {
  color: #e25a32; }

.color-blue {
  color: #2e77b1; }

/* .utility */
/* components */
.title-lined {
  font-family: 'MontserratExtraBold';
  text-transform: uppercase;
  position: relative; }
  .title-lined::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -70px;
    width: 50px;
    border-bottom: 1px solid;
    border-color: inherit; }

/* .components */
.begin {
  background: left no-repeat;
  position: relative; }
  .begin-text {
    position: relative; }
  @media screen and (min-width: 992px) {
    .begin {
      background-position: left;
      min-height: 875px; }
      .begin-text {
        padding-top: 200px; } }

.client {
  padding: 30px 0;
  background-color: #5c373e;
  color: #fff; }
  .client-image {
    max-width: 100%; }
  @media screen and (min-width: 992px) {
    .client {
      padding: 70px 0; }
      .client-image {
        max-width: auto; } }

.smart-banners {
  padding: 40px 0; }
  .smart-banners-block {
    border-left: 3px solid #3170a3;
    padding-left: 20px;
    max-width: 730px;
    margin: auto; }
  @media screen and (min-width: 992px) {
    .smart-banners {
      padding: 80px 0; } }

.task-block {
  border: 20px solid #e1e6ea;
  padding: 30px; }

@media screen and (min-width: 992px) {
  .task-block {
    padding: 60px 100px; }
    .task-block__col {
      flex: 0 0 35%; }
    .task-block__line {
      border-left: 1px solid #e5e5e5; } }

.dates {
  padding: 40px 0; }
  .dates-period {
    display: inline-block;
    background: url("../images/dates_calendar.png") left top no-repeat;
    padding-left: 25px; }

.team {
  padding: 0 0 70px 0; }

.start, .reload {
  padding: 30px 0;
  background-color: #e8ebf0; }
  .start img, .reload img {
    box-shadow: -5px 5px 30px rgba(178, 178, 178, 0.6);
    max-width: 100%; }
  @media screen and (min-width: 992px) {
    .start, .reload {
      padding: 100px 0; } }

.problems {
  padding: 30px 0; }
  .problems-list {
    font-size: 14px; }
    .problems-list__item {
      position: relative;
      padding-left: 35px; }
      .problems-list__item::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 0;
        width: 20px;
        border-top: 2px solid #c9cdd4; }
  @media screen and (min-width: 992px) {
    .problems {
      padding: 100px 0; }
      .problems-list {
        max-width: 710px; }
        .problems-list__item {
          padding-left: 50px; }
          .problems-list__item::before {
            width: 30px; } }

.results {
  padding: 30px 0;
  background: url("../images/results_bg.jpg") center/cover no-repeat;
  color: #fff; }
  .results-block {
    border: 20px solid #fff;
    padding: 30px; }
  @media screen and (min-width: 992px) {
    .results {
      padding: 100px 0;
      background: url("../images/results_bg.jpg") center no-repeat; }
      .results-block {
        padding: 80px 100px 90px 100px; } }

.findings {
  padding: 40px 0; }
  .findings-double__right {
    border-left: 3px solid #3170a3;
    padding-left: 20px; }
  .findings-reasons__number {
    border-bottom: 2px solid #3170a3; }
  .findings img {
    box-shadow: -5px 5px 30px rgba(178, 178, 178, 0.6);
    max-width: 100%; }
  @media screen and (min-width: 992px) {
    .findings {
      padding: 100px 0; }
      .findings-double {
        line-height: 1.8; }
        .findings-double__left {
          margin-right: 210px; }
        .findings-double__right {
          flex: 0 0 350px; }
      .findings-reasons__right {
        flex: 0 0 420px; } }

.tips {
  padding: 30px 0;
  background-color: #e8ebf0; }
  .tips-block {
    box-shadow: -5px 5px 30px rgba(178, 178, 178, 0.6);
    background-color: #fff;
    padding: 40px;
    position: relative; }
  @media screen and (min-width: 992px) {
    .tips {
      height: 700px;
      padding: 100px 0 0 0; }
      .tips-block {
        padding: 90px 300px 90px 200px; } }

.end {
  padding: 30px 0; }
  @media screen and (min-width: 992px) {
    .end {
      padding: 100px 0 30px 0; } }

/* animations */
.animatable {
  visibility: hidden;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused; }

.animated {
  visibility: visible;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px); }
  100% {
    opacity: 1;
    -moz-transform: translateY(0); } }

@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(20px); }
  100% {
    opacity: 1;
    -o-transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.animated.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp; }

/* .animations */