@import "mixins.less";
@import "vars.less";
@import "base.less";
@import "form.less";
@import "submit.less";
@import "contacts.less";
@import "navigation.less";
@import "banner.less";
@import "advantages.less";
@import "popup.less";

.header {
  .header-1 {
    background: @header-1-background;
    padding: 24px 0 20px;

    .container {
      .d-flex;
      .jc-between;
      .ai-center;
    }

    &__left {
      .d-flex;
      .ai-center;
    }

    &__right {
      .d-flex;
      .jc-end;
      .ai-center;
    }
  }

  .header-2 {
    background: @header-2-background;
    padding: 12px 0 9px;

    &.header-fixed {
      position: fixed;
      z-index: 9999;
      width: 100%;
      top: 0;
    }
  }

  .logo {
    width: 207px;
    height: 52px;
    margin-right: 19px;
  }

  .slogan {
    font-weight: 500;
    .px-to-rem(font-size, 12);
    .px-to-rem(line-height, 14);
    text-transform: uppercase;
    color: #A0A0A0;
  }
}


// for fixed header
#main-container {
  border: 0 solid @header-2-background;
}






.center {
  padding: 47px 0 29px;

  .flex-between-wrap {
    padding-bottom: 59px;
    margin-bottom: 71px;
    border-bottom: 1px solid #E0E0E0;

    &:last-of-type {
      border-bottom: none;
    }

    &--1 {
      .img-wrap {
        .img-wrap(337px);
        margin-left: 27px;
      }
    }

    &--2 {
      .img-wrap {
        .img-wrap(550px);
        margin-right: 74px;
      }
    }
  }
}





.title {
  position: relative;
  font-weight: 300;
  .px-to-rem(font-size, 37);
  .px-to-rem(line-height, 37);
  color: @title-color;
  padding: 0 0 15px;
  margin: 0 0 26px;

  &:after {
    content: '';
    display: block;
    width: 137px;
    height: 4px;
    background: @title-color-underline;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

.text {
  width: 100%;

  p {
    .px-to-rem(font-size, 15);
    .px-to-rem(line-height, 21);
    text-align: justify;
    color: @text-color;
    padding-bottom: 21px;

    &.text-big {
      .px-to-rem(font-size, 20);
      .px-to-rem(line-height, 23);
      padding-bottom: 18px;
    }

    &:last-of-type {
      padding-bottom: 0;
    }
  }

  ul {
    padding: 0 0 45px;

    li {
      .px-to-rem(font-size, 16);
      .px-to-rem(line-height, 18);
      color: @text-color;
      text-transform: uppercase;
      padding: 6px 0;
    }
  }
}







.footer {
  padding: 23px 0 21px;
  background-color: @footer-background;
}



@import "style-adaptive.less";