@charset "UTF-8";
/*!
 * THIS FILE COMPILED FROM SCSS !!! 
 * IF Your want change this file, use SCSS and 'gulp watch'
 */
/** PRODUCT **/
/**
 *
 *  Стили для одного класса должны отвечать только за один набор свойств:
 *      ${Позиционирование} - position, margin, etc
 *      ${Размеры} - height, width, etc
 *      ${Визуальные эффекты} - padding, color, font, ect..
 *  Так код будет более понятен и пполностью масштабируемым.
 *  При переносе классов в другой набор html-документа можно быть уверенным,
 *  что стили сработают так, как от них этого ожидается.
 **/
.technology {
  font-size: 18px;
  color: #212121;
  font-weight: bold;
  text-transform: uppercase; }

.material__menu {
  background-color: #303030;
  padding-top: 45px;
  position: relative;
  z-index: 1; }
  .material__menu-vertical {
    height: 420px; }

.material__menu__title {
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
  padding-left: 30px;
  color: #11aadb; }
  .material__menu__title-lifted-up {
    margin-bottom: 40px; }

.material__menu__item {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  padding-left: 30px;
  padding-top: 17px;
  padding-bottom: 17px;
  color: #FFFFFF;
  position: relative;
  z-index: 1; }
  .material__menu__item-lifted-up {
    margin-bottom: 40px; }

.material__menu__item:hover {
  background-color: #1b1b1b;
  cursor: pointer; }

.material__menu__item.active {
  background-color: #1b1b1b;
  cursor: pointer; }
  .material__menu__item.active .material__menu__item__triangle {
    visibility: visible;
    z-index: 1; }

.material__menu__item__triangle {
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  top: 0px;
  bottom: 0px;
  right: -1px;
  margin: auto;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #e3e3e3 transparent transparent;
  z-index: -1;
  visibility: hidden; }
  @media only screen and (max-width: 991px) {
    .material__menu__item__triangle {
      display: none; } }

.material__meaning {
  padding-top: 50px;
  padding-right: 0px;
  margin-bottom: 10px; }
  .material__meaning.material-alone {
    padding-top: 120px; }
    @media only screen and (max-width: 991px) {
      .material__meaning.material-alone {
        padding-top: 0px; } }
  @media only screen and (max-width: 991px) {
    .material__meaning {
      padding-top: 15px;
      padding-bottom: 15px; } }
  .material__meaning__header {
    display: block;
    background-color: #333333;
    -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.35);
       -moz-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.35);
            box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.35);
    position: relative;
    cursor: pointer; }
    .material__meaning__header-fixed-height {
      height: 40px; }
      @media only screen and (max-width: 991px) {
        .material__meaning__header-fixed-height {
          min-height: 40px;
          padding-bottom: 12px;
          padding-top: 12px;
          height: auto;
          padding-right: 32px; } }
    .material__meaning__header-fixed-style {
      display: block;
      background-color: inherit;
      position: relative; }
    .material__meaning__header__title {
      margin-bottom: 0px;
      padding-top: 0px;
      padding-left: 10px;
      font-weight: bold;
      font-size: 14px;
      line-height: 14px;
      margin-top: 2px;
      color: white;
      margin-top: 0px;
      display: inline-block;
      text-transform: uppercase; }
    .material__meaning__header .material__info__close {
      right: 10px; }

.material__meaning__item {
  font-size: 16px;
  color: #212121;
  font-weight: 400;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-left: 45px;
  margin-left: 30px;
  border-bottom: 2px solid #bcbcbc; }
  @media only screen and (max-width: 991px) {
    .material__meaning__item {
      margin-left: 0px;
      padding-left: 30px; } }

.material__text-important {
  font-size: 16px;
  font-weight: 600; }

.material__text-price {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: #007fa6; }

/**
 *  TODO: Нарушены следующие правила, имеются свойства всех трех групп:
 *      ${Позиционирование} - position, margin, etc
 *      ${Визуальные эффекты} - padding, color, font, ect..
 *  Надо распределить и поработать над именем класса
 **/
.container-btn-center {
  margin: auto;
  text-align: center; }

.container-btn-lifted-down {
  margin-top: 30px; }

.container-btn-block {
  display: block; }

.container-btn-inline-block {
  display: inline-block; }

.material__info__header {
  display: block;
  background-color: white;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
     -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  border: 1px solid #d4d4d4;
  position: relative;
  cursor: pointer;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none; }
  .material__info__header-fixed-height {
    height: 60px; }
    @media only screen and (max-width: 991px) {
      .material__info__header-fixed-height {
        min-height: 60px;
        padding-bottom: 18px;
        height: auto;
        padding-right: 62px; } }
  .material__info__header-fixed-style {
    display: block;
    background-color: inherit;
    position: relative; }
  .material__info__header .litie__text-title {
    padding-left: 10px;
    padding-top: 30px; }
    .material__info__header .litie__text-title.single {
      line-height: 100px;
      padding-top: 0px; }
  .material__info__header.active {
    background-color: #eeeeee; }
    .material__info__header.active .material__info__title {
      color: #007fa6; }

/**
 * TODO:
 *  Нарушены следующие правила, имеются свойства 2 групп:
 *      ${Позиционирование} - position, margin, etc
 *      ${Визуальные эффекты} - padding, color, font, ect..
 *  Надо распределить
 **/
.material__info__title {
  margin-bottom: 6px;
  padding-top: 18px;
  padding-left: 38px;
  padding-right: 42px;
  font-weight: bold;
  font-size: 16px;
  color: #212121;
  margin-top: 2px; }

.material__info__title:hover, .material__info__header .litie__text-title:hover {
  color: #007fa6; }

.alternative__title {
  margin-bottom: 6px;
  padding-left: 0px;
  font-weight: 500;
  font-size: 20px;
  color: #007fa6;
  margin-top: 32px; }

.alternative__subtitle {
  color: #212121;
  font-size: 16px;
  font-weight: 400;
  padding-left: 0px; }

.material__info__close {
  display: block;
  position: absolute;
  right: 30px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background-image: url("../images/icons/essential.svg");
  background-repeat: no-repeat;
  background-position: -93px -133px;
  -moz-background-size: 150px auto;
       background-size: 150px auto; }
  .material__info__close.active {
    background-position: -93px -167px; }

.material__info__close.litie {
  right: 5px; }

.material__info-lifted-up {
  margin-top: 30px; }

.material__info__collapse {
  color: #212121;
  font-size: 17px;
  padding-left: 10px;
  line-height: 18px;
  padding-bottom: 0px;
  font-weight: 400;
  overflow: hidden;
  clear: both; }
  @media only screen and (max-width: 991px) {
    .material__info__collapse {
      padding-left: 0px; } }

.material__info__block-text {
  margin-bottom: 15px;
  margin-top: 15px;
  color: #212121; }

.material__info__text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  text-indent: 0em; }

.material__info__list {
  margin-left: 30px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.material__info__subtitle, .material__info__text-important {
  font-size: 16px;
  font-weight: 600; }

.material__info__subtitle-main {
  padding-top: 18px;
  padding-left: 38px; }

.material__info__link {
  color: #212121;
  text-decoration: none;
  border-bottom: 1px solid #212121; }
  .material__info__link:hover, .material__info__link:active {
    text-decoration: none;
    border-bottom: none; }

.material__info__item {
  padding-top: 5px;
  padding-bottom: 5px;
  min-height: 320px;
  margin-bottom: 30px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .material__info__item:hover {
    text-decoration: none;
    -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
       -moz-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }

.material__info__text-color {
  color: #007fa6; }

/*** TECHNOLOGY TABLE **/
.table-technology__head__td, .table-technology__head__td-main, .table-technology__head__td-secondary {
  color: #FFFFFF;
  text-transform: uppercase;
  vertical-align: middle; }

.table-technology__head__td-main {
  padding-top: 23px;
  padding-bottom: 20px;
  font-size: 20px;
  background-color: #bababa;
  border: 1px solid #a2a2a2;
  padding-left: 25px !important; }

.table-technology__head__td-secondary {
  background-color: #009ab4;
  border: 1px solid #009ab4;
  font-size: 17px;
  text-align: center;
  border-right: 1px solid #FFFFFF; }

.table-technology__head__td-secondary:last-child {
  border-right: 1px solid #009ab4; }

.table-technology__key, .table-technology__value {
  border: 1px solid #a2a2a2; }

.table-technology__key {
  font-size: 17px;
  color: #212121;
  font-weight: 500;
  text-transform: uppercase;
  padding-left: 25px !important; }

.table-technology__value {
  font-size: 17px;
  color: #212121;
  text-transform: uppercase;
  font-weight: 400;
  text-align: center;
  padding-left: 0px !important;
  background-color: #ffffff; }

.table-technology__tr:nth-child(2n) .table-technology__key {
  background-color: #e9e9e9; }

.alternative__item {
  width: 100%;
  margin-bottom: 30px;
  margin-top: 30px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
     -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); }

.alternative__item__title {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase; }
  .alternative__item__title-lifted-vertical {
    margin-top: 24px;
    margin-bottom: 16px; }

.alternative__item__wrapper_btn {
  display: inline-block;
  width: 100%;
  margin: auto;
  text-align: center;
  padding-bottom: 30px;
  margin-top: 15px; }

.alternative__item__img {
  width: 100%; }

.alternative__item__hint {
  position: absolute;
  top: 30px;
  left: 15px;
  right: 15px;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  color: #FFFFFF;
  padding-top: 17px;
  padding-bottom: 16px;
  background-color: rgba(17, 17, 17, 0.6);
  text-decoration: none; }
  .alternative__item__hint:hover {
    background-color: #111111;
    text-decoration: none;
    color: white; }
  @media only screen and (max-width: 991px) {
    .alternative__item__hint {
      top: 0px; } }

.alternative__btn {
  padding: 13px 30px;
  font-size: 17px;
  cursor: pointer; }

.column-without-padding {
  padding-left: 0px;
  padding-right: 0px; }

@media only screen and (max-width: 991px) {
  .carousel {
    min-height: 0px; } }

.material-slider .item {
  height: 420px; }
  .material-slider .item.material-alone {
    height: 500px; }
    @media only screen and (max-width: 991px) {
      .material-slider .item.material-alone {
        height: auto; } }
  @media only screen and (max-width: 991px) {
    .material-slider .item {
      height: auto; } }

@media only screen and (max-width: 991px) {
  .mock-image {
    display: none; } }

@media only screen and (max-width: 991px) {
  .carousel-inner.material-slider > .item.active > img {
    position: relative; } }

.carousel-inner.material-slider > .item > img {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0px;
  margin: auto;
  width: auto;
  min-height: 100%; }
  @media only screen and (max-width: 991px) {
    .carousel-inner.material-slider > .item > img {
      min-height: auto; } }

.litie__header {
  background-color: #f5f5f5;
  padding-top: 30px;
  padding-bottom: 30px; }

#carousel-litie .item {
  background-color: #f5f5f5; }

#carousel-litie .left-carousel-control {
  display: block;
  width: 16px;
  height: 32px;
  position: absolute;
  left: -32px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  background-image: url("../images/layout/left-arrow.png");
  background-repeat: no-repeat;
  -moz-background-size: 100% auto;
       background-size: 100% auto;
  background-position: center center;
  cursor: pointer; }

#carousel-litie .right-carousel-control {
  display: block;
  width: 16px;
  height: 32px;
  position: absolute;
  right: -32px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  background-image: url("../images/layout/right-arrow.png");
  background-repeat: no-repeat;
  -moz-background-size: 100% auto;
       background-size: 100% auto;
  background-position: center center;
  cursor: pointer; }

.btn-material, .btn-material:visited {
  display: inline-block;
  margin-left: 0px;
  padding: 16px 30px;
  background-color: #e23a47;
  color: #FFFFFF;
  text-transform: uppercase;
  cursor: pointer;
  -moz-border-radius: 2px;
       border-radius: 2px;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none; }
  .btn-material:hover, .btn-material:focus, .btn-material:visited:hover, .btn-material:visited:focus {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #b52e39; }

@media (max-width: 991px) {
  .technology {
    position: relative;
    bottom: 0px;
    right: 0px;
    display: block;
    text-align: center;
    margin: auto; }
  .material__info__title {
    font-size: 15px; } }

@media (min-width: 992px) and (max-width: 1350px) {
  .material__menu__item {
    font-size: 14px; }
  .material-slider .item {
    height: auto; }
    .material-slider .item.material-alone {
      height: auto; }
  .mock-image {
    display: none; }
  .carousel-inner.material-slider > .item.active > img {
    position: relative;
    height: auto;
    min-height: 0px;
    width: 100%; }
  .material__menu-vertical {
    height: 380px; }
  .material__menu-mock {
    position: absolute;
    bottom: 0px;
    top: 0px;
    background-color: #303030;
    width: 25%;
    left: 41.666%; }
  .carousel-indicators {
    left: 0px;
    right: 0px;
    width: 100%;
    margin: auto; } }

@media (min-width: 1500px) {
  .material__menu__item {
    font-size: 14px; }
  .material-slider .item {
    height: 460px; }
  .material__menu-vertical {
    height: 460px; } }