@import (css) "./normalize.css";

@main_color: #ea5e20;
@main_color_light: lighten(@main_color,20%);


@gray-lighten: #e7e7e7;
@gray-light: #bcbcbc;
@gray: #636363;
@gray-dark: #353233;
@blue: #428bca;
@blue-light: lighten(@blue, 10%);
@blue-dark: darken(@blue, 10%);
@white: #ffffff;
@black: #000000;
@red: #cc3333;
@green: #33cc33;

@btn-radius: 4px;
@btn-color: @main_color;
@main-font-color: #222222;

@fa-font-path: "../fonts";

// black header
@header-link-color: #09c;
// @header-link-color:#09c;
// @header-text-color:#fff;
@header-text-color: #000;
// @header-bg-color: #000;
@header-bg-color: #fff;



@mini: ~"only screen and (max-width: 400px)";
@mobile: ~"only screen and (max-width: 767px)";
@tablet: ~"only screen and (min-width: 768px) and (max-width: 949px)";
@desktop: ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl: ~"only screen and (min-width: 1129px)";

// mixins >>>
.transition(@arguments) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}

.color-btn(@bg;
@color: #fff;
@bgHover: darken(@bg, 20%);

@colorHover: @color) {
  color: @color;
  background: @bg;

  &:hover {
    color: @colorHover;
    background: @bgHover;
  }
}

// mixins <<<

* {
  box-sizing: border-box;
}

.small {
  font-size: 12px;
}

.big {
  font-size: 24px;
}

.hidden-xs {
  display: block;

  @media @mobile {
    display: none !important;
  }
}

.visible-xs {
  display: none;

  @media @mobile {
    display: block;
  }
}

.shadow() {
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4);
}

.shadowBig() {
  box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.4);
}

.shadow {
  .shadow();
}

.hidden {
  display: none !important;
}

.close {
  cursor: pointer;
  font-size: 40px;
  color: @gray;
  position: absolute;
  right: 20px;
  top: 10px;
}

@media @mobile {

  h1,
  h2 {
    width: initial;
    text-align: center;
  }
}

h1 {
  font-weight: 400;
}

h2,
.h2 {
  font-size: 22px;
  margin: 0.83em 0;
}

h3 {
  font-size: 18px;
  margin: 0.83em 0;
}

p {
  margin: 0.6em 0;
  line-height: 1.4em;
}

#overlay {
  .transition(opacity 0.5s, z-index 0.5s;
  );
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  z-index: -10;
  opacity: 0;

  &.open {
    z-index: 8;
    opacity: 0.5
  }
}

body,
html {
  font-family: 'Roboto', sans-serif;
  position: relative;
  min-width: 1000px;
  width: 100%;
  // font-family: Arial;
  color: @main-font-color;
  font-size: 16px;
  margin: 0;
  padding: 0;

  // background-color: @gray-bg;
  @media @mobile {
    width: 100%;
    min-width: 320px;
    overflow-x: hidden;
  }
}

body {
  @media @mobile {
    padding-top: 100px;
  }
}

body>footer,
body>header {
  position: relative;
  min-width: 1000px;
  width: 100%;
  margin: 0 auto;

  @media @mobile {
    min-width: 320px;
  }
}

a {
  color: @blue;
  text-decoration: none;

  &:hover {
    color: @blue-dark;
  }
}

ul {
  padding: 0;
  margin: 0;
}

table {
  width: 100%;
  margin: 15px 0;
  font-size: 14px;

  tr {}

  td {
    padding: 5px;
  }
}


.btn {
  cursor: pointer;
  outline: none;
  .transition(background 0.5s ease-in-out);
  text-align: center;
  border: 0;
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  width: initial;
  padding: 0 15px;
  text-decoration: none;
  height: auto;
  line-height: 2rem;
  border-radius: @btn-radius;
  // text-transform: uppercase;
  .color-btn(@btn-color);

  &:hover {
    text-decoration: none;
  }

  i,
  img {
    margin-left: -10px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
  }

  &.green {
    .color-btn(#339933);
  }

  &.red {
    .color-btn(#cc3333);
  }

  &.dark-gray {
    .color-btn(#333, #fff, #707070);
  }
}

a {
  cursor: pointer;
  color: #428bca;
  text-decoration: none;

  &:hover,
  &:focus {
    color: #2a6496;
    text-decoration: underline;
  }
}

.container {
  width: 100%;
  margin: 0 auto;
  max-width: 980px;
  // position: relative;
  height: 100%;

  >h2,
  >.h2 {
    text-align: center;
    font-weight: 400;
    font-size: 30px;
    margin: 0 0 20px 0;
    // margin: .0.83em 0;

  }

  @media @mobile {
    // min-width: 320px;
    width: 100%;
  }
}

section,
.section {
  width: 100%;
  margin: 20px 0;
  background: none;

  >.container {
    padding: 20px 0;
    // padding: 20px 15px;
  }

  @media @mobile {
    margin: 10px 0;

    .container {
      padding: 15px 10px;
    }
  }
}

#menu-icon {
  display: none;
  position: absolute;
  top: 5px;
  right: 0;
    flex-direction: column;
    justify-content: center;
    span {
        display: block;
        background: @main_color;
        width: 33px;
        height: 5px;
        margin: 3px 15px;
        border-radius: 5px;
    }
	@media @mobile{
		display:flex;
	}
}

.cities-list {
  width: 100%;
  display: flex;
  padding: 15px;

  h1 {
    font-size: 3rem;
  }

  a {
    color: @gray;
    text-decoration: none !important;
  }

  .block {
    flex: 1 1 auto;
  }

  h3 {
    font-weight: bold;
  }

  ul {
    list-style: none;

    li {
      margin: 10px 0;
      display: inline-block;
      width: 100%;

      &:hover,
      &.active {
        color: @main_color;

        a,
        span {
          border-bottom: 2px dotted @main_color;
          cursor: pointer;
        }
      }
    }
  }

  .popular {
    padding: 0;
    margin: 0;
    font-weight: bold;
  }

  .alfa-body {
    column-count: 2;
  }

  .alfa {
    padding-left: 25px;
    position: relative;

    .alfa-key {
      font-size: 22px;
      font-weight: bold;
      position: absolute;
      top: 9px;
      left: 0;
    }

  }

  @media @mobile {
    flex-direction: column;
    padding: 0 10px;
  }
}

#main-header {
  z-index: 10;
  background: @white;
  padding-top: 50px;
  position: relative;
  display: flex;
  flex-direction: column;

  .logo {
    max-width: 270px;
    flex: 1 0 auto;
    background: @white;

    img {
      max-width: 100%;
      display: block;
      margin-bottom: 5px;
      max-height: 70px;
    }

    span {
      font-weight: bold;
      font-size: 15px;
    }
  }

  a {
    color: inherit;
    text-decoration: none !important;
  }

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: inherit;
  }

  header {
    font-size: 14px;
    height: 50px;
    background: @gray-dark;
    color: @white;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 11;

    i {
      font-size: 30px;
      color: @main_color;
      margin: 0 7px 0 0;
    }

    a {
      border-bottom: 3px dotted @white;
    }

    .header-city {
      cursor: pointer;

      span {
        border-bottom: 3px dotted @white;
        margin-bottom: 3px;
        padding-bottom: 2px;
        display: inline-block;
      }
    }

    .slash {
      height: 70%;
      width: 1px;
      margin: 0 5px;
      background: @white;
    }

    .city,
    .phone {
      * {
        vertical-align: middle;
      }
    }

    .hours,
    .other-cities,
    .phone {
      font-weight: bold;
    }

    .other-cities {
      a {
        margin-bottom: 3px;
        padding-bottom: 2px;
        display: inline-block;
      }
    }

    .phone {
      white-space: nowrap;

      a {
        font-size: 22px;
        border: none;
      }
    }
    .city{
        text-align: right;
        .gl-current-city{
            color: #fff !important;
            white-space: nowrap;
            font-size: 15px;
            font-weight: 600;
            border-bottom: 1px solid #8d8b8c;
        }
        .gl-current-select{
            color: @main_color;
            cursor: pointer;
        }
        @media @mobile{
            padding-top: 30px;
            padding-right: 10px;
            // text-align: right;
            .gl-current-city{
                padding-right: 0 !important;
                color: #000 !important;
                
            }
        }
    }
  }

  .other-cities-phones {
    .transition(opacity 0.5s, top 0.5s;
    );
    .shadow();
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: -500%;
    background: @white;
    z-index: 10;

    &.open {
      opacity: 1;
      top: 50px;
    }

    .container {
      flex-direction: column;
    }

    .alfa-key {
      top: 5px;
    }

    .cities-list {
      // padding: 15px;
    }
  }

  .top-nav,
  .bottom-nav {
    background: @white;

    ul {
      height: inherit;
      padding: 0;
      margin: 0;
      list-style: none;
      align-items: center;
      justify-content: stretch;
      display: flex;
      width: 100%;

      li {
        flex: 1 1 auto;
        text-align: center;

        a {
          display: block;
          width: 100%;
          height: 100%;
          padding: 15px;
          white-space: nowrap;
        }
      }
    }
  }

  .top-nav {
    height: 125px;

    ul {
      margin-left: 15px;

      li {
        .transition(background 0.5s, color 0.5s;
        );

        &:hover {
          color: @main_color;
        }

        a {
          padding: 15px 0;
          text-align: right;
          font-weight: bold;
        }
      }
    }
  }

  .bottom-nav {
    .shadowBig();
    height: 65px;
    color: @gray;

    ul {

      li {
        .transition(background 0.5s, color 0.5s;
        );
        border-right: 1px solid @gray-light;
        height: 100%;

        &:hover {
          background: @main_color;
          color: @white;
        }

        &:last-child {
          border: none;
        }

        a {
          padding: 0 10px;
          vertical-align: middle;
          height: 100%;
          line-height: 65px;

          i {
            font-size: 20px !important;
            vertical-align: middle;
          }
        }

        &.drop-nav-toggle {
          background: @gray-dark;
          color: @white;
          position: relative;
          cursor: pointer;

          flex: 0;

          &:hover {
            background: @main_color;
            color: @white;

            .drop-nav {
              top: 66px;
              opacity: 1;
            }
          }

          >a {
            width: 120px;
          }

          i {
            margin: 0 0 0 5px;
            font-size: 13px;
          }

          .drop-nav {
            .transition(opacity 0.5s ease-in-out, top 0.5s;
            );
            z-index: -1;
            position: absolute;
            right: 0;
            height: initial;
            width: initial;
            display: flex;
            flex-direction: column;
            color: @white;
            background: @gray-dark;
            align-items: stretch;
            opacity: 0;
            top: -800px;


            li {
              border-right: 0;
              border-bottom: 1px solid @gray-light;

              &:hover {
                background: @main_color;
                color: @white;
              }

              // &:last-child {
              //   border: none;
              // }
              a{
                  line-height: 40px;
              }
            }
          }
        }
      }
    }
  }



  @media @mobile {
    .shadowBig();
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    flex-direction: row-reverse;

    .logo {
      z-index: 11;

      span {
        font-size: 13px;
      }
    }

    header {
      position: relative;
      height: initial;
      flex: 1 0 auto;
      background: @white;
      color: @gray-dark;
      max-width: 210px;
      width: initial;

      .container {
        flex-direction: column;
        align-items: normal;

        .header-city {
          font-size: 18px;
          text-align: right;
          padding-right: 40px;
          span{
            text-decoration: underline;
          }
        }

        .hours,
        .slash,
        .other-cities {
          display: none;
        }

        .phone,
        .city {
          margin: 10px 0;

          a {
            text-decoration: underline !important;
            font-size: 20px;
          }

          i {
            margin: 0;
            display: none;
          }
        }

        .phone {
          margin-right: 10px;
          text-align: right;
        }
      }
    }

    .other-cities-phones {
      

      &.open {
        top: 0;
        z-index: 13;
      }

      .popular {
        li {
          width: 49%;
          padding-left: 25px;

          &:nth-child(even) {
            padding-left: 35px;
          }
        }
      }
    }

    .top-nav {
      height: initial;
      flex: 1 1 auto;
      padding: 5px;

      .container {
        flex-direction: column;
        align-items: end;
        // position: relative;


        ul {
          margin: 0;
          .transition(opacity 0.5s, top 0.5s;
          );
          .shadow();
          padding-top: 45px;
          flex-direction: column;
          position: absolute;
          width: 100%;
          left: 0;
          right: 0;
          top: -400px;
          background: @white;
          opacity: 0;
          z-index: 13;
          font-weight: bold;

          &.open {
            top: 0;
            opacity: 1;
          }

          li {
            width: 100%;

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

    .bottom-nav {
      display: none;
    }
  }
}

  nav.mobile-nav {
    .transition(top 0.5s);
    top: -1000px;
    position: absolute;
    z-index: 13;
    background: @white;
    width: 100%;
    
    ul{
      list-style: none;
      padding: 0;
      li{
        width: initial;
        border-bottom: 1px solid @gray;
        a{
          .transition(color 0.5s);
          display: block;
          padding: 10px 20px;
          color: @black;
          text-decoration: none;
          &:hover{
            color: @main_color;
          }
        }
        &.title{
          font-weight: bold;
          font-size:18px;
          padding: 10px 20px;
          color: @white;
          background: @black;
        }
      }
    }
    &.open{
      top: 0;
      .close{
        top: 0;
        // color: @white;
        position: fixed;
      }
    }
  }

//page-content
.page-content {
  .container {
    background-color: @white;
  }

  h1 {
    font-size: 3rem;
    font-weight: bold;
    // color: @gray;
    padding-left: 15px;
  }
}

.content {

  p,
  ul {
    // font-size: 14px;
    // margin: 1em 0;
  }

  p,
  li {
    line-height: 1.5em;
  }
  li{
    list-style-position: inside;
  }
}

/* section .advantages >>>  */
.advantages {
  background-color: @white;
  text-align: center;

  h2,
  .h2 {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    margin: 0.83em 0;
  }

  .boxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    .box {
      flex: 0 0 30%;
      margin: 1.5%;
      padding: 1.5%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      height: auto;
      box-sizing: border-box;

      img {
        width: 120px;
        margin-bottom: 15px;
      }

      h3 {
        text-transform: uppercase;
        font-size: 16px;
      }

      p {
        font-size: 14px;
        line-height: 1.5em;
      }

      @media @mobile {
        h3 {
          font-size: 14px;
        }

        p {
          display: none;
        }
      }
    }
  }
}

/* <<< section .advantages */

/* price-table >>> */
.price-block {
  background: #fff;

  hr {
    width: initial;
    height: 0;
    border: 0;
    border-bottom: 1px solid #eee;
    margin: 12px 0 0;
  }

  .container {}

  .price-box-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .cards {
      span {
        display: none;
      }
    }

    @media @mobile {
      flex-direction: column-reverse;
    }
  }

  .price-box-list {
    ul {
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      justify-content: center;
      align-items: stretch;

      li {
        // flex: 1 1 auto;
        flex: 1 1 200px;
        margin: 5px;
        text-align: center;

        a {
          color: @black;
          font-weight: bold;
          border-radius: @btn-radius;
          background: @gray-lighten;
          display: block;
          // height: 30px;
          // line-height: 30px;
          padding: 15px;
          text-decoration: none;
          transition: all 0.5s ease-in-out;
          font-size: 13px;

          &:hover,
          &:active,
          &.active {
            background: @main_color;
            color: #fff;
          }
        }
      }
    }

    .arrow {
      margin-left: 550px;
    }
  }

  .slide-price {
    .slide-price-item {}
  }

  .price-title {}

  .price-table {
    font-size: 14px;
    border-collapse: collapse;
    border-spacing: 1px;

    thead {
      td {
        background: #333;
        color: #fff;
        border-color: #333;
        border-right-color: @white;

        &:first-child {
          border-left-color: #333;
        }

        &:last-child {
          border-right-color: #333;
        }
      }
    }

    tbody {}

    td {
      background: #f7f7f7;
      border: 1px solid #fff;
      padding: 9px 13px;

      &.table-btn {
        padding: 0;
        width: 120px;

        @media @mobile {
          display: none;
        }

        a {
          .transition(background 0.5s);
          height: 36px;
          line-height: 36px;
          text-align: center;
          text-decoration: none;
          display: block;
          .color-btn(@btn-color);
        }
      }

      @media @mobile {
        padding: 5px 8px;
      }
    }
  }
}

/* <<< price-table */

.not-find-feedback {
  text-align: center;
  font-size: 18px;
  background: #fff;

  p {
    margin: 0.5em;
    font-weight: bold;

    a {
      color: #000;
      font-size: 24px;
      font-weight: bold;
      display: block;
      margin: 4px 0;
    }
  }

  .btn {
    width: 250px;
    text-transform: uppercase;
    line-height: 3rem;
    font-size: 16px;
  }
}

// modal >>>
.modal {
  .transition(z-index 0.5s);
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -100;
  overflow: auto;
  pointer-events: none;

  .modal-overlay {
    .transition(opacity 0.5s);
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: 0;
    cursor: pointer;
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }

  .modal-center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    .transition(top 0.5s);
    background: #fff;
    z-index: 1;
    position: relative;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    top: -100%;
    pointer-events: all;

    .close {
      position: absolute;
      right: 0.1em;
      top: 0;
      line-height: 0.8em;
      font-size: 50px;
      color: #e5e7e7;
      cursor: pointer;
    }

    .text {
      flex: 1 1 auto;
    }

    .image {}
  }

  &.open {
    z-index: 1000;

    .modal-overlay {
      opacity: 0.5;
    }

    .modal-content {
      top: 0;
    }
  }

  @media @mobile {
    .modal-content {
      padding: 10px;
    }
  }
}

// modal <<<

// form >>>
.feedback-form {
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 940px;
  max-height: 800px;
  margin: auto;
  padding: 25px;

  h2 {
    font-size: 27px;
    text-transform: uppercase;
  }

  .form-block {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .form-group {
      width: 100%;
      max-width: 350px;
      margin: 10px auto;

      input,
      textarea {
        width: 100%;
        border-radius: @btn-radius;
        background: #333;
        border: 1px solid #333;
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
        outline: none;

        &::placeholder {
          color: #fff;
        }
      }
    }

    .btn {
      width: 100%;
      line-height: 2.5rem;
    }

    .count-block {
      display: flex;
      justify-content: center;
      align-items: center;

      .btn {
        flex: 1 0 50%;
      }

      .count-text {
        flex: 1 0 50%;
        font-size: 14px;
        vertical-align: middle;
        margin: 9px 0;

        .counts {
          color: @main_color;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }

    .form-note {
      font-size: 12px;
      margin-top: 13px;
    }
  }

  .success-response {
    display: none;
  }

  @media @mobile {
    padding: 0;

    .image {
      display: none;
    }
  }
}

//form <<<
// top block >>>
.top-slider {
  background: linear-gradient(to bottom, #fbfbfb 0%, #fff 15%, #fff 85%, #fbfbfb 100%);
  // padding: 70px 0;

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    // align-items: stretch;

    .text {
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 520px;
      padding: 25px 0;
      margin-right: 40px;
      // padding: 25px;
    }

    .image {
      text-align: right;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
      padding: 25px 0;
      // padding: 25px;
    }

    img {
      max-width: 100%;
      // max-height: 100%;
      max-height: 400px;
      width: auto;
      height: auto;
    }

    h1,
    h2 {
      font-size: 40px;
      font-weight: 100;
      margin: 0.5em 0;
    }

    ul {
      padding: 0;

      li {

        list-style-position: inside;
        list-style-type: none;
        font-size: 20px;
        line-height: 1.5em;
        margin: 0.5em 0;

        &:before {
          content: "\2014\a0";
        }
      }
    }

    p {
      font-size: 20px;
      line-height: 1.5em;
      margin: 0.9em 0;
      margin-bottom: 70px;
    }

    .btn-block {
      // max-width: 400px;
    }

    .btn {
      line-height: 3.5rem;
      margin: 10px 0;
      width: 100%;
    }
  }

  .icons-block {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 30px 0;

    .item {
      flex: 1 0 33%;
      display: flex;
      justify-content: center;
      align-items: center;

      i {
        font-size: 30px;
        margin-right: 10px;
        color: @main_color;
      }
    }
  }

  @media @mobile {
    width: initial;
    padding: 0;
    text-align: center;

    .container {
      flex-direction: column;

      .text {
        max-width: 100%;
        margin: 0;
      }

      .icons-block {
        flex-wrap: wrap;
        font-size: 11px;

        .item {
          margin: 0px;

          i {
            font-size: 20px;
            margin-right: 10px;
          }
        }
      }

      .left {
        width: 100%;
        padding: 0;
      }
    }
  }
}

// top block <<<
// how-we-working >>>
.how-we-working {
  background-color: #fff;

  .h-w-h {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;

    li {
      text-align: center;
      display: inline-block;
      width: 200px;
      vertical-align: top;
      padding: 13px 0;
      // opacity: 0;
      -webkit-transition: opacity 0.5s;
      -moz-transition: opacity 0.5s;
      -ms-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      transition: opacity 0.5s;

      &.arrow-box {
        width: initial;

        .arrow {
          vertical-align: middle;
          margin: 50px 2px;
        }
      }

      .num {
        font-size: 24px;
        color: #09c;
        font-weight: bold;
        margin-top: 11px;
      }

      img {
        max-width: 140px;
        .transition(box-shadow 0.5s);
        border-radius: 50%;
      }

      p {
        margin: 4px 0;
        font-size: 14px;
        line-height: 1.3em;
      }

      &:last-child {
        text-align: left;
        width: 430px;
        padding: 28px 0;

        .image {
          float: left;
          width: 200px;
          text-align: center;

          img {
            max-width: 188px;
          }
        }

        .num {
          width: 200px;
          float: right;
          font-size: 48px;
          margin-top: 25px;
        }

        p {
          font-size: 18px;
          width: 200px;
          line-height: 1.4em;
          float: right;
        }
      }

      &:hover {
        img {
          .shadow();
        }

        &.arrow-box {
          img {
            box-shadow: none;
          }
        }
      }
    }

  }



  @media @mobile {
    .h-w-h {
      li {
        display: block;
        width: 100%;

        &.arrow-box {
          height: 50px;

          .arrow {
            margin: auto;
            transform: rotate(90deg);
          }
        }

        &:last-child {
          display: block;
          width: 100%;
          text-align: center;

          .image {
            float: none;
            margin: auto;
          }

          .num {
            margin: auto;
            float: none;
          }

          p {
            float: none;
            width: initial;
            padding: 0 15px;
          }
        }
      }
    }
  }
}

// how-we-working <<<

.categories {
  text-align: center;

  .container {
    padding: 20px 15px 0;
  }
}

// card >>>
.cards-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  
  .card-items {
    .transition(box-shadow 0.5s);
    .shadow();
    // flex: 1 1 21%;
    flex: 0 0 22%;
    margin: 1.50%;
    min-width: 130px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 0 3px 5px @gray-light;

    a {
      text-decoration: none;
      display: block;
      width: 100%;
      height: 100%;
      padding: 4% 2%;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
    .info-popup {
      left: 0;
      top: 100%;
    }
    .cardd-img {
      height: 80px;
      display: flex;
      justify-content: center;
      // margin-top: -8px;

      img {
        max-width: 70%;
        max-height: 70%;
        height: auto;
        width: auto;
      }
    }

    .card-names {
      margin: 5px 0;
      font-weight: bold;
    }

    .price {
      font-size: 20px;
      font-weight: bold;
      // padding-left: 32px;
      padding-bottom: 1px;
    }
    
    .info-popup {
      font-weight: normal;
      font-size: 14px;
      text-align: left;
    } 

    .intro {
      color: #000;
      font-size: 12px;
      flex: 1 1 auto;
      margin: 5px 0;
    }

    .btn {
      // font-size: 12px;
      font-size: 15px;
      padding: 5px 35px;
      margin-bottom: 15px;
      margin-top: -10px;
    }

    &:hover {
      .shadowBig();

      .btn {
        background: darken(@btn-color, 20%);
      }
    }

    @media @mobile {
      .btn {
        width: 100%;
        padding: 5px;
      }
    }
  }
}  
// card <<<

// cards >>>
.cards-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  
  .card-item {
    .transition(box-shadow 0.5s);
    .shadow();
    // flex: 1 1 20%;
    flex: 0 0 23%;
    margin: 1%;
    min-width: 135px;
    padding: 10px;
    text-align: center;

    a {
      text-decoration: none;
      display: block;
      width: 100%;
      height: 100%;
      padding: 4% 2%;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    .card-img {
      height: 170px;
      padding-top: 2px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
      }
    }

    .card-name {
      margin: 5px 0;
      font-weight: bold;
    }

    .price {
      font-size: 20px;
      font-weight: bold;
      padding-left: 32px;
      padding-bottom: 1px;
    }

    .intro {
      color: #000;
      font-size: 12px;
      flex: 1 1 auto;
      margin: 5px 0;
    }

    .btn {
      // font-size: 12px;
      font-size: 15px;
      padding: 5px 35px;
    }

    &:hover {
      .shadowBig();

      .btn {
        background: darken(@btn-color, 20%);
      }
    }

    @media @mobile {
      .btn {
        width: 100%;
        padding: 5px;
      }
    }
  }
}  
// cards <<<

// foter >>>
footer {
  .shadow();
  background: #000;
  color: #fff;
  font-size: 14px;

  h2 {
    font-size: 18px;
  }

  .container {
    padding: 20px 15px;
  }

  .top-footer {
    display: flex;

    >* {
      flex: 1 0 50%;
    }

    .skidka {}

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

    .cards {
      img {
        height: 32px;
        margin-left: 6px;
        width: auto;
      }
    }
  }

  .center-footer {
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    .column {
      flex: 1 1 auto;
      max-width: 600px;
    }

    .contacts-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      h2 {
        flex: 1 1 100%;
      }

      .contact-list-item {
        flex: 0 0 auto;
        display: flex;
        justify-content: space-between;
        width: 270px;
        margin-bottom: 1em;
      }
    }
  }

  .bottom-footer {
    margin-top: 30px;
    color: #6d6d6d;
  }

  .blog-link {
    text-align: center;
    width: 100%;
    font-size: 25px;
  }

  @media @mobile {
    .center-footer {

      .contacts-list {

        .contact-list-item {
          width: 100%;
        }
      }
    }

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

// footer <<<

// slider reciews >>>
.reviews-slider {
  background: transparent;

  .container {
    padding: 20px 15px;
  }

  .slider_box {
    margin: 0 -15px;
    overflow: hidden;
    position: relative;

    ul {
      .transition(margin 0.5s ease-in-out);
      padding: 0;
      list-style: none;
      display: flex;
      align-items: flex-start;

      li {
        display: flex;
        flex-wrap: wrap;
        max-width: 320px;
        min-width: 320px;
        margin: 6px;

        img {
          border-radius: 50%;
          width: 100px;
          height: 100px;
          flex: 0;
          margin-right: 10px;
        }

        h3 {
          flex: 0;
          height: 70px;
        }

        .comment {
          flex: 1 1 100%;
          background: #fff;
          border: 1px solid #d3d3d3;
          border-radius: 15px;
          margin-top: 20px;
          padding: 0 15px;
          position: relative;

          &:before {
            content: "";
            position: absolute;
            top: -16px;
            left: 35px;
            border-top: 1px red;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 16px solid #d3d3d3;
          }

          &:after {
            content: "";
            position: absolute;
            top: -14px;
            left: 35px;
            border-top: 1px red;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 15px solid #fff;
          }

          .date {
            font-size: 12px;
            font-style: italic;
            color: #888;
            text-align: right;
          }
        }
      }
    }
  }

  .slider-nav {
    text-align: center;

    .prew-nav,
    .next-nav {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #4e4e4e;
      cursor: pointer;
      opacity: 0.8;
      z-index: 3;
      outline: none;
      font-size: 15px;
      line-height: 28px;

      &:hover {
        opacity: 1;
      }

      &:active {
        color: #09c;
        border-color: #09c;
      }
    }

    .nav-pos {
      display: inline-block;
      line-height: 28px;
      position: relative;

      .control-slide {
        margin: 12px 6px;
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #000;
        border-radius: 50%;
        vertical-align: bottom;

        &.active {
          background: #09c;
        }
      }

      .active-slide {
        .transition(left 0.5s ease-in-out);
        background: #09c;
        width: 44px;
        height: 6px;
        border-radius: 3px;
        top: 6px;
        margin: 6px;
        left: -1px;
        position: absolute;
      }
    }
  }
}

// slider reviews <<<
.contacts-list-block {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  ul {
    list-style: none;
    padding: 0;

    li {
      margin: 1em 0;
    }
  }

  img {
    max-width: 600px;
    height: auto;
  }
}

section#model-list {
  background: #fff;
  padding: 20px 0;

  h2 {
    text-align: center;
    font-weight: 500;
    font-size: 30px;
    margin: 0;
  }

  ul.list {
    padding: 0;
    text-align: center;
    margin: 50px 0;

    li {
      display: inline-block;
      width: 30%;
      text-align: center;
      min-width: 300px;
      font-size: 25px;
      line-height: 2em;

      a {
        color: #616161;
        white-space: nowrap;
      }
    }
  }
}

.half-blocks {
  .container {
    padding: 0;
    display: flex;
    justify-content: space-between;
  }

  .half {
    flex: 0 0 50%;
    max-width: 500px;
    padding: 0;

    &:nth-child(odd) {
      padding-right: 10px;
    }

    &:nth-child(even) {
      padding-left: 10px;
    }
  }

  @media @mobile {
    .container {
      flex-direction: column;

      .half {
        flex: 0 0 50%;
        max-width: 500px;
        padding: 0;

        &:nth-child(odd) {
          padding-bottom: 5px;
        }

        &:nth-child(even) {
          padding-top: 5px;
        }
      }
    }
  }
}

.contacts-top-block {
  .container {
    background: #fff;
  }

  .text {
    height: 100%;
    padding: 15px;
    background: #fff;
  }

  .map-title {
    line-height: 2em;
    text-transform: uppercase;
    margin: 0px 0;
    margin: 0.67em 0;
    font-weight: bold;
    font-size: 20px;
  }

  .yamapcos {
    background: #fff;
    // update
    height: 100%;
    max-height: 400px;

    >ymaps {
      height: 100% !important;
    }
  }

  .image {
    height: 100%;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media @mobile {
    .yamapcos {
      height: 300px;
    }
  }
}

.video-block {
  background: #f8f8f8;

  @media @mobile {
    display: none;
  }
}

.how-to-walked,
.photos {
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .image {
      flex: 0 0 32%;

      img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        display: block;
      }
    }

    @media @mobile {
      flex-direction: column;
    }
  }
}

.image-scale {
  img {
    cursor: zoom-in;
  }

  @media @mobile {
    pointer-events: none;
  }
}

.popup-image {
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  cursor: zoom-out;

  @media @mobile {
    cursor: unset;
  }
}

.map-block {
  text-align: center;

  .container {
    background: #fff;
  }

  .top {
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: bold;

    a {
      color: inherit;
    }
  }

  p {
    margin: 15px;
  }

  .map-box {
    margin: 0 -15px;


  }

  @media @mobile {
    .map-box {
      margin: -15px -10px;
      height: 300px;

      >ymaps {
        height: 300px !important;
      }
    }
  }
}

.courier-block {
  line-height: 1.5em;

  .container {}

  .text,
  .image {
    background: #fff;
    height: 100%;
    padding: 20px;

    img {
      max-width: 100%;
    }

    h3 {
      text-transform: uppercase;
      font-size: 16px;
      margin: 14px 0;
    }

    .btn {
      line-height: 3rem;
      width: 100%;
      margin: 14px 0;
    }

    ol {
      margin: 22px 0;
      padding: 0;
      list-style: none;

      li {
        position: relative;
        counter-increment: step-counter;
        margin-bottom: 40px;
        padding: 6px 0 6px 80px;

        &:before {
          content: counter(step-counter);
          font-size: 30px;
          background: transparent;
          display: block;
          border: 8px solid #f1f1f1;
          border-radius: 50%;
          width: 44px;
          height: 44px;
          margin: 0 10px 24px 0;
          font-weight: 900;
          color: @main_color;
          text-align: center;
          line-height: 44px;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
  }
}

.blog-page-header {
  text-align: center;

  .container {
    background: #fff;

    h1 {
      margin: 0;
    }

    .title {
      font-size: 2em;
      font-weight: 400;
    }

    a {
      text-decoration: none;
    }
  }
}

.blog-article-preview {
  .container {
    background: #fff;
  }
}

.paging {
  text-align: center;

  ul {
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin: 5px 10px;
      height: 25px;
      min-width: 25px;

      a {
        .transition(box-shadow 0.5s ease-in-out, backgraund 0.5s ease-in-out;
        );
        background: #fff;
        color: #000;
        .shadow();
        display: block;
        padding: 5px;
        width: 100%;
        height: 100%;
        font-size: 14px;
        text-decoration: none;
        border-radius: @btn-radius;

        &:hover {
          .shadowBig();
        }

        &.active {
          border-radius: 1em;
          .shadowBig();
        }
      }
    }
  }
}

.blog-page {
  .container {
    background: #fff;

    img {
      max-width: 100%;
      height: auto;
    }
  }

  h1 {
    text-align: center;
  }

  object,
  iframe {
    display: block;
    margin: auto;
    max-width: 100%;
  }
}

.like-block {
  font-weight: bold;
  font-size: 20px;

  .container {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .form {
    text-align: right;
  }

  .btn {
    margin: 10px 0;
  }
}

.author-block {
  .container {
    background: #fff;
    display: flex;
    align-items: center;

    p {
      margin: 5px 0;
    }

    .author-about {
      margin: 0px 15px;
    }
  }
}

.tags-block {
  .container {
    padding: 0;

    &:before {
      content: "#";
      top: 0;
      bottom: 0;
      margin: auto 0;
      color: #909090;
      font-size: 20px;
    }

    a {
      .transition(box-shadow 0.5s ease-in-out);
      display: inline-block;
      padding: 10px 20px;
      color: #909090;
      background: #fff;
      border-radius: 20px;
      margin: 0 5px;
      text-decoration: none;
      .shadow();

      &:hover {
        .shadowBig();
      }
    }
  }
}

.comments {
  .container {
    background: #fff;
  }

  h3 {
    text-align: center;
    font-weight: 400;
    font-size: 22px;
  }

  form {
    .quip-add-comment {
      .form-group {
        margin: 10px 0;

        input,
        textarea {
          width: 100%;
          border-radius: @btn-radius;
          background: #333;
          border: 1px solid #333;
          color: #fff;
          padding: 10px;
          box-sizing: border-box;
          outline: none;

          &::placeholder {
            color: #fff;
          }
        }

        .checkbox {
          text-align: right;
          display: block;

          input {
            width: auto;
            margin-right: 10px;
            vertical-align: middle;
          }
        }
      }

      .quip-fld {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        label {
          text-align: right;
          flex: 1 0 30%;
          padding: 10px;
        }

        input {
          flex: 1 1 70%;
        }

        span {
          text-align: center;
          flex: 1 1 100%;
        }

      }
    }
  }

  .quip {
    margin: 0 -15px;
  }

  .quip-comment-list {
    .quip-avatar {
      border-radius: 50%;
    }

    .quip-comment {
      border-bottom: 1px solid #ccc;

      .quip-comment-body {
        padding: 25px;
      }

      .quip-comment-alt {
        background-color: #fff;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

#modal-offer {
  .modal-content {
    max-width: 600px;
  }

  h2 {
    font-weight: 400;
    font-size: 36px;
  }

  .text {
    font-size: 20px;

  }

  .btn {
    width: initial;
    margin: 15px auto;
    line-height: 2.5em;
  }
}

.info-popup-toggle {
  display: inline-block;
  vertical-align: middle;
  position: relative;

  .info-popup {
    position: absolute;
    background: #fff;
    border: 2px solid #f2f2f2;
    border-radius: 4px;
    padding: 15px;
    width: 300px;
    left: 100%;
    top: 0;
    height: inherit;
    margin: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s;
    z-index: 1;
    font-weight: normal;
    font-size: 1em;
  }

  &:hover {
    .info-popup {
      opacity: 1;
      visibility: visible;

    }
  }
}

.info-s-toggle {
  .info-s-title {
    cursor: pointer;
    padding: 2px 0;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px dotted;
  }

  .info-s {
    p {
      display: none;
    }
  }
}

.check-consent {
  color: #858585;
  text-align: left;

  a {
    color: inherit;
    text-decoration: underline;
  }

  span {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-left: 20px;

    &:before {
      position: absolute;
      content: "";
      display: block;
      width: 10px;
      height: 10px;
      left: 0px;
      line-height: 10px;
      top: 0;
      bottom: 0;
      margin: auto 0;
      border: 1px solid #858585;
      font-size: 12px;
    }
  }

  input {
    vertical-align: middle;
    visibility: hidden;
    display: none;
    width: 0;
    height: 0;

    &:checked+span {
      &:before {
        content: '\2713';
      }
    }
  }
}

.btn {
  &:disabled {
    background: #ccc !important;
    cursor: not-allowed;
  }
}

.page-header {
  height: initial;

  .container {
    z-index: 0;
    overflow: hidden;
    position: relative;
  }

  .main-bg {
    position: absolute;
    z-index: -1;
    right: 0;
    top: 0;
    width: 1000px;
    height: 100%;
    object-fit: cover;
  }

  .generator {
    .container {
      background-color: @gray-dark;
    }
  }

  .content {
    position: relative;
    min-height: 290px;
    z-index: 2;
    *zoom: none;

    h1 {
      font-size: 42px;
      text-align: left;
      padding-left: 40px;
      margin: 0.3em 0;

    }

    p {
      padding-left: 40px;
    }

    ul {
      font-size: 16px;
      font-weight: 700;
      line-height: 30px;
      text-align: left;

      li {
        list-style: none;
        background: url('/assets/img/icons/check.png') no-repeat center left;
        text-indent: 33px;
        margin-bottom: 5px;
      }
    }

    .btn-block {
      margin-left: 40px;
      margin-top: 40px;
    }

    .btn {
      cursor: pointer;
      outline: none;
      line-height: 3.5rem;
      margin: 10px 0;
    }

  }

  @media @mobile {
    .content {
      ul {
        padding: 0;

        li {
          background: none;
          margin: 10px 0;
        }
      }

      .btn-block {
        margin: 0;
      }

      .btn {
        width: 100%;
      }
    }
  }
}

.attention {
  background: @gray-dark;
  width: 100%;
  max-width: 980px;
  margin: 30px auto 20px;
  // height: 115px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;



  .exclam {
    position: relative;
    width: 90px;
    height: 90px;
    font-size: 60px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    border-style: solid;
    border-width: 8px;
    border-color: #484848;
    color: #484848;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0);
    text-align: center;
    line-height: 76px;
    border-radius: 50%;
    margin: 27px 0;

    &:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 20px solid @gray-dark;
      top: -48px;
      left: 23px;
    }
  }

  p {
    color: @white;
    max-width: 720px;
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    line-height: 24px;
    position: relative;
    height: 100%;
    padding: 25px 0;
  }

  @media @mobile {
    .exclam {
      position: absolute;
      top: 0;
    }
  }
}

.btn-plus-price-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  flex-direction: row;

  .header-price {
    font-size: 24px;
    color: #000;
    line-height: 50px;
  }

  .btn {
    margin: 0 !important;
  }

  @media @mobile {
    flex-direction: column;
  }
}

.block-with-icons {
  position: relative;
  padding-left: 40px;
  margin: 20px 0;

  i,
  img {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 30px;
    width: 30px;
    text-align: center;
    color: @main_color;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

.qa-section {

  margin-top: 40px;
  background: @white;

  .container {
    position: relative;
    padding-top: 0;

    >p {
      text-align: center;
    }
  }

  h2 {
    padding-left: 100px;
    margin: 0.5em 0;
    position: relative;
  }

  .fa-stack {
    position: absolute;
    left: 270px;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 22px;
    display: inline-block;
    height: 64px;
    width: 64px;
    color: @main_color;

    .fa-stack-2x {
      font-size: 4rem;
    }

    .fa-stack-1x {
      left: -7px;
      top: 5px;
    }
  }

  .accordion-wrapper {
    .accordion-item {
      padding-left: 50px;
      position: relative;
      margin: 20px 0;

      .accordion-title {
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;

        .icon {
          .transition(transform 0.5s);
          left: 0;
          top: 0;
          display: block;
          color: @white;
          background: @main_color;
          position: absolute;
          width: 40px;
          height: 40px;
          border-radius: 50%;

          &:before,
          &:after {
            .transition(opacity 0.5s);
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
            content: '';
            display: block;
            width: 20px;
            height: 4px;
            background: @white;
            border-radius: 0px;
          }

          &:after {
            transform: rotate(90deg);
          }

        }
      }

      .accordion-body {
        .transition(max-height 0.5s);

        padding-left: 20px;
        font-style: italic;
        overflow: hidden;
        max-height: 0px;
      }

      &.showed {
        .accordion-title {
          .icon {

            transform: rotate(720deg);

            &:after {
              opacity: 0;
            }
          }
        }

        .accordion-body {
          max-height: 120px;
        }
      }
    }
  }

  @media @mobile {
    h2 {
      padding-left: 70px;
    }

    .fa-stack {
      left: 0;
    }

    .accordion-wrapper {

      .accordion-item {
        .accordion-title {
          height: initial;
        }

        &.showed {
          .accordion-body {
            max-height: 330px;
          }
        }
      }
    }
  }
}

.we-have-done-slider {
  margin-top: 40px;
  margin-bottom: 0;
  background: @white;

  .container {
    position: relative;
    padding-bottom: 0;
  }

  .slider_box {
    width: 100%;
    height: 150px;

    ul {
      position: relative;
      width: 100%;
      height: 100%;
      list-style: none;

      li {
        .transition(opacity 0.5s);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: 130px;
        margin: auto;
        position: absolute;
        background: #fff;
        opacity: 0;

        &.active {
          opacity: 1;

          .done-graph {
            max-width: 400px;
          }
        }
      }
    }

    .done-item {
      width: 870px;
      font-size: 18px;
      font-weight: bold;
      margin: 15px auto;

      * {
        display: inline-block;
        vertical-align: middle;
      }

      .done-title {
        text-align: right;
        width: 320px;
      }

      .done-graph {
        .transition(max-width 0.5s ease-in-out 0.2s);
        height: 20px;
        max-width: 0;
      }

      &:nth-child(1) {
        .done-graph {
          background: #bdf1b1;
        }
      }

      &:nth-child(2) {
        .done-graph {
          background: #aed1ef;
        }
      }

      &:nth-child(3) {
        .done-graph {
          background: #e25e27;
        }
      }

    }
  }

  .prew-nav,
  .next-nav {
    .shadow();
    .transition(box-shadow 0.5s);
    cursor: pointer;
    position: absolute;
    top: 45px;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 25px;

    &:hover {
      color: @main_color;
      .shadowBig();
    }
  }

  .next-nav {
    right: 10px;
  }

  .prew-nav {
    left: 10px;
  }
}

.main-price-block {
  margin-bottom: 0;

  .container {
    padding-bottom: 0;

    .not-find-feedback {
      margin: 0;
    }
  }
}

.title.info-popup-toggle {
    display: block;
}
// quarantine BEGIN
.quarantine-container{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    .close{
        cursor: pointer;
    }
    .overlay{
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        background: #000;
        opacity: 0.3;
        width: 100%;
        height: 100%;
    }
    .popup-container{
        position: relative;
        z-index: 150;
        max-width: 500px;
        padding: 30px;
        background: #fff;
        border-radius: 4px;
        .title{
            font-size: 30px;
        }
        .close{
            top: 0;
            right: 10px;
            position: absolute;
            font-size: 26px;
        }
        .btn{
            position: relative;
            right: 0;
            font-size: 18px;
        }
    }
}
// quarantine END

    .cities-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      // padding: 15px;
      padding: 0;
      box-sizing: border-box;

      h1, .h1 {
        font-size: 3rem;
      }

      a {
        color: #636363;
        text-decoration: none !important;
      }
      
      
      .search-form {
        .form-control {
          font-size: 16px;
          box-sizing: border-box;
          width: 100%;
          border-radius: 4px;
          border: 1px solid #ccc;
          display: inline-block;
          margin: auto;
          padding: 5px;
        }
      }

      .block {
        flex: 1 1 auto;
        min-width: 200px;
        &.search-form {
          flex: 1 1 100%;
        }
        &.popular-list {
          flex: 0 0 auto;
        }
      }

      h3, .h3 {
        font-weight: bold;
      }

      ul {
        list-style: none;
        margin: 0 !important;

        li {
          margin: 10px 0;
          display: inline-block;
          width: 100%;

          &:hover,
          &.active {
            color: @main_color;

            a,
            span {
              border-bottom: 2px dotted @main_color;
              cursor: pointer;
            }
          }
        }
      }

      .popular {
        padding: 0;
        margin: 0;
        font-weight: bold;
        width: 200px;
      }

      .alfa-body {
        column-count: 3;
      }

      .alfa {
        padding-left: 25px;
        position: relative;
        max-width: 200px;

        .alfa-key {
          font-size: 22px;
          font-weight: bold;
          position: absolute;
          top: 9px;
          left: 0;
        }

      }
      
      .hidden{
          display: none !important;
      }

      @media @mobile {
        flex-direction: column;
        padding: 0 10px;
        
        .popular {
            width: 100%;
            column-count: 2;
        }
        .alfa-body {
            column-count: 2;
          }
      }
    }

// footer-contacts-bayan BEGIN
@media @mobile {

  footer {
    .contact-list {
      transition: max-height 0.5s;
      max-width: 500px;
      margin: 10px auto;
      border: 1px solid #666666;
      border-radius: 6px;
      overflow: hidden;
      height: 42px;
      background: #2E2E2E;
      position: relative;
      z-index: 1;

      .h2,
      h2 {
        font-size: 20px;
        line-height: 1em !important;
        margin: 0 !important;
        padding: 10px 20px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #666666;
        cursor: pointer;
        border-bottom: 1px solid #666;

        &:after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          margin-left: 60px;

          border: 10px solid transparent;
          border-top-color: #666;
          position: relative;
          top: 5px;
        }
      }

      .contact-list-item {
        width: 100% !important;
        max-width: unset !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;

        &:nth-child(even) {
          background: #212121;
        }
      }

      a {
        color: #727272;
        font-size: 16px;
        padding: 10px 20px;
        display: block;
      }

      &.active {

        .h2,
        h2 {
          &:after {
            border: 10px solid transparent;
            border-bottom-color: #666;
            top: -5px;
          }
        }
      }
    }

    .info-box {
      .contact-list {
        .contact-list-item {
          margin: 0 !important;
        }
      }
    }
  }
}

// footer-contacts-bayan END


// footer-advantages-fix BEGIN
@media @mobile {

  footer {
    .center-footer {
      flex-direction: column;
      text-align: center;
    }
  }
}
// footer-advantages-fix END
            
// attention-block-mobile-fix BEGIN
@media @mobile {
  .attention {
    padding: 10px;
    box-sizing: border-box;

    .exclam {
      display: none;
    }  
  }
}
// attention-block-mobile-fix END
            
// icons-block-mobile-fix BEGIN
@media @mobile {
  .icons-block {
    gap: 10px;
    .item {
      flex: 1 0 30% !important; 
    
      span {
        flex: 1;
        text-align: start;
      }
    }
  }
}
// icons-block-mobile-fix END


.cities-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  // padding: 15px;
  padding: 0;
  box-sizing: border-box;
  gap: 30px;
  
  h1,
  .h1 {
    font-size: 3rem;
  }

  a {
    color: #636363;
    text-decoration: none !important;
  }


  .search-form {
    .form-control {
      font-size: 16px;
      box-sizing: border-box;
      width: 100%;
      border-radius: 4px;
      border: 1px solid #ccc;
      display: inline-block;
      margin: auto;
      padding: 5px;
    }
  }

  .block {
    flex: 1 1 auto;
    min-width: 200px;

    &.search-form {
      flex: 1 1 100%;
    }

    &.popular-list {
      flex: 0 0 auto;
    }
  }

  h3,
  .h3 {
    font-weight: bold;
  }

  ul {
    list-style: none;
    margin: 0 !important;

    li {
      margin: 10px 0;
      display: inline-block;
      width: 100%;

      &:hover,
      &.active {
        color: @main_color;

        a,
        span {
          border-bottom: 2px dotted @main_color;
          cursor: pointer;
        }
      }
    }
  }

  .popular {
    padding: 0;
    margin: 0;
    font-weight: bold;
    width: 200px;
  }

  .alfa-body {
    column-count: 3;
  }

  .alfa {
    padding-left: 25px;
    position: relative;
    max-width: 200px;

    .alfa-key {
      font-size: 22px;
      font-weight: bold;
      position: absolute;
      top: 9px;
      left: 0;
    }

  }

  .hidden {
    display: none !important;
  }

  @media @mobile {
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0 10px;

    .popular {
      width: 100%;
      column-count: 2;
      li {
          width: 100% !important;
          padding: 0 !important;
      }
    }

    .alfa-body {
      column-count: 2;
    }
  }
}
#main-header {
  .other-cities-phones {
    .cities-list{
      max-height: 80vh;
      overflow-y: auto;
    }
  }
}






.review-contact-section {
  background: #F2F2F2;
  color: #000000;
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }
  
  .container {
    padding: 150px 0;  
    // display: flex;
    // flex-wrap: wrap;
    position: relative;
  }
  h2 {
    font-size: 36px;
    font-weight: 500;
    text-align: start;
    margin: 0;
    line-height: 1;
    flex: 1 1 50%;
  }
  .review-container {
    // overflow: hidden;
    // flex: 1 1 auto;
  }
  .grid {
    position: relative;
    margin: 80px 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    width: auto;
    user-select: none;
  }
  
  .item {
    transition: opacity 0.3s;
    padding: 20px; 
    flex: ~"0 0 calc((100% - (40px*2)) / 3)";
    border: none;
    border-radius: 10px;
    // width: 30%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #FFFFFF;
    cursor: grab;
    box-shadow: 6px 6px 50px 30px rgba(222, 215, 215, 0.3);

    
    pointer-events: none;
    opacity: 0;
    
    &.active {
      opacity: 1;
      pointer-events: unset;
    }
    
    .rating {
      display: flex;
      gap: 4px;
      .star {
        display: block;
        width: 16px;
        height: 16px;
        background-image: url("/assets/img/icons/comment_star.webp");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
    
    .name {
      font-size: 16px;
      font-weight: 500;
      flex: 0 0;
    }
    .cat-name {
      font-size: 16px;
      font-weight: 500;
      color: #006699;
    }
    
    .text {
      font-size: 15px;
      color: #443F3F;
      flex: 1 1 auto;
      text-align: start;
      p {
        line-height: 1.2;
      }
    }
    
    .date {
      font-size: 14px;
      color: #999;
    }
  }
  
  .controller {
    flex: 1 1 50%;
    display: flex;
    gap: 20px;
    justify-content: end;
    .next, .prev {
      transition: opacity 0.3s;
      display: block;
      width: 61px;
      height: 55px;
      border-radius: 50%;
      border: none;
      background: #FFFFFF;
      
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      
      display: flex;
      align-items: center;
      justify-content: center;
      
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      
      z-index: 1;
      
      &.show {
        opacity: 1;
        pointer-events: unset;
      }
      
      &:before {
        content: "";
        width: 18px;
        height: 18px;
      
        background-image: url("/assets/img/icons/comment_arrow.webp");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
      }
      
      &:hover {
        &:before {
          -webkit-mask: url(/assets/img/icons/comment_arrow.webp) no-repeat center;
          mask: url(/assets/img/icons/comment_arrow.webp) no-repeat center;
          mask-size: 18px 18px;
          background-color: @main_color;
        }
      }
    }
    .next {
      right: -72px;
    }
    .prev {
      left: -72px;
      transform: rotate(180deg);
    }
  }
  
  @media @mobile {
    .container {
      padding: 50px 40px;
    }
    
    h2 {
      font-size: 22px;
      flex: 1 1 auto;
    }
    
    .controller {
      flex: 1 1 auto;
      gap: 10px;
      .next, .prev {
        width: 30px;
        height: 30px;
        background: none;
        
        &:before {
          // width: 12px;
          // height: 12px;
        }
      }
      .next {
        right: 5px;
      }
      .prev {
        left: 5px;
      }
    }
    
    .grid {
      gap: 30px;
      margin: 30px 0;
    }
    
    .item {
      // opacity: 1 !important;
      .cat-name {
        font-size: 14px;
      }
      .text {
        font-size: 13px
      }
      .date {
        font-size: 13px;
      }
    }
  }
}





.history-section {
  box-sizing: border-box;
  margin-top: 0;
  background: #F2F2F2;
  
  padding: 110px 0;
  
  *{
    box-sizing: border-box;
  }
  
  .container {
    padding: 10px;
  }
  
  h2 {
    font-size: 36px;
    text-align: center;
    margin: 0;
  }
  
  .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 35px 18px;
    margin-top: 60px;
  }
  
  .history-item {
    background: #fff;
    border-radius: 10px;
    padding: 35px 25px;
    color: #4D4747;
    font-size: 16px;
    font-weight: 300;
    position: relative;
    flex: 1 1 30%;
    box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    
    .idx {
      position: absolute;
      background: #F2F2F2;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
      z-index: 0;
      padding: 10px;
      
      top: -30px;
      left: 0;
      right: 0;
      margin: 0 auto;
      
      span {
        z-index: 2;
      }
      
      &:before {
        content: "";
        position: absolute;
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        z-index: 1;
        background: @main_color;
      }
    }
    
    .title {
      font-size: 22px;
      font-weight: 500;
      // text-transform: uppercase;
      margin: 3px 0 14px;
      text-align: center;
    }
    
    .date {
        font-weight:600;
        margin-top: 10px;
    }
  }
  .controller {
    display: none;
  }
  
  @media @mobile {
    padding: 30px 0;
    h2 {
      font-size: 20px;
      max-width: 220px;
      margin: 0 auto;
    }
    .grid {
      margin-top: 30px;
      flex-wrap: nowrap;
      gap: 15px;
      width: auto;
      user-select: none;
      position: relative;
    } 
    .history-item {
      transition: opacity .3s;
      font-size: 13px;
      padding: 20px;
      
      .idx {
        width: 40px;
        height: 40px;
        top: -20px;
        
        &:before {
          width: 35px;
          height: 35px;
        }
      }
      
      .title {
        font-size: 14px;
        text-transform: uppercase;
      }
    }
    
    .controller {
        margin-top: 20px;
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        
        .prev, .next {
          opacity: 0;
          cursor: pointer;
          pointer-events: none;
          width: 31px;
          height: 28px;
          border: 1px solid @main_color;
          border-radius: 50%;
          
          display: flex;
          
          &:before {
            content: "";
            display: block;
            
            width: 7px;
            height: 7px;
            border-bottom: 1px solid @main_color;
            border-left: 1px solid @main_color;
            
            margin: auto;
          }
          
          &.show {
            opacity: 1;
            pointer-events: unset;
          }
        }
        
        .prev {
          padding-left: 4px;
          &:before {
            transform: rotate(45deg);
          }
        }
        .next {
          padding-right: 4px;
          &:before {
            transform: rotate(-135deg);
          }
        }
        
      }
  }
}



//sldier BEGIN
.slider {
  position: relative;
  z-index: 0;

  .slider-container {
    position: relative;
    margin: auto;
    // pointer-events: none;
    z-index: 2;
  }

  .slider-item {
    transition: opacity 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;

    img {
      max-height: 100%;
      max-width: 100%;
    }

    &.active {
      opacity: 1;
    }
  }

  .slider-controller {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    .next,
    .prev {
      transition: background 0.5s;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: @main_color;
      cursor: pointer;
      display: flex;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;

      &:before {
        content: "";
        margin: auto;
        width: 8px;
        height: 8px;
        border-bottom: 1px solid #fff;
        border-left: 1px solid #fff;
        position: relative;
      }


      &:hover {
        background: @main_color_light;
      }
    }

    .next {
      right: 10px;

      &:before {
        right: 2px;
        transform: rotate(-135deg);
      }
    }

    .prev {
      left: 10px;

      &:before {
        left: 2px;
        transform: rotate(45deg);
      }
    }
  }

  @media @mobile {
    .slider-controller {

      .next,
      .prev {
        height: 80px;
        border-radius: 30px;
      }
    }
  }
}

//sldier END
.our-works-slider {
  overflow: hidden;
  .slider {
    height: 540px;


    .slider-container {
      height: 100%;
      width: ~"calc(100% - 90px)";
    }

    .slider-item {
      opacity: 1;

      // gap: 20px;
      font-size: 16px;

      overflow: hidden;

      pointer-events: none;


      &.more-info {
        .backside {
          top: 0;
        }
      }

      &.active {
        pointer-events: unset;
      }
    }

  }



  .frontside {
    width: 100%;
  }


  .backside {
    width: 100%;
    transition: top 0.5s;
    position: absolute;
    top: -200%;
    height: 100%;
    background: #eeeeee;
    overflow-y: auto;
    padding: 10px 20px;


    .close-backside {
      font-size: 30px;
      line-height: 30px;
      transform: rotate(45deg);
      position: absolute;
      right: 20px;
      top: 10px;
      cursor: pointer;
    }
  }

  .slide-header,
  .slide-body,
  .slide-footer {
    padding: 10px;
  }

  .slide-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;

    >* {
      flex: 1 1 0;
    }
    
    h3 {
        flex: 1 1 100%;
        margin: 0;
    }

    b {
      display: block;
    }
  }

  .slide-body {
    flex: 1;
    overflow: hidden;

    position: relative;
    height: 100%;

    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "image time"
      "image price"
      "image text"
    ;

    gap: 20px;




    b {
      display: block;
    }

    .image {
      grid-area: image;
      position: relative;
      width: 300px;
      height: 300px;
      border-radius: 15px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      span {
        position: absolute;
        display: block;
        background: rgba(255, 255, 255, 0.4);
        padding: 10px 30px;
        border-radius: 10px;
        left: 0;
        right: 0;
        top: 10px;
        margin: auto;
        width: 120px;
        height: 40px;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
      }
    }

    .time {
      grid-area: time;
    }

    .price {
      grid-area: price;
    }

    .text {
      grid-area: text;

      .more {
        color: @main_color;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }

  .slide-footer {
    // background: green;
    display: flex;
    flex-direction: column;

    .btn {
      margin-top: 20px;
      margin-left: auto;
    }
  }

  @media @mobile {

    .slider {
      height: 650px;
    }

    .slide-header,
    .slide-body,
    .slide-footer {
      padding: 5px;
    }

    .slide-header {
      flex-direction: column;
      gap: 10px;
    }

    .slide-body {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas:
        "image time"
        "image price"
        "text text"
        "text text";
      gap: 10px;

      .image {
        width: 140px;
        height: 140px;
      }
    }

    .slide-footer {
      .btn {
        margin-top: 10px;
        margin-right: auto;
      }
    }

  }

  @media @mini {
    // display: none;


    .slider {
      height: 800px;
    }

    .slide-header,
    .slide-body,
    .slide-footer {
      padding: 3px;
    }

    .slide-header {
      gap: 6px;
    }

    .slide-body {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas:
        "image"
        "time"
        "price"
        "text";
      gap: 6px;

      .image {
        width: 100%;
        height: 150px;
      }
    }

    .slide-footer {
      .btn {
        margin-top: 6px;
      }
    }
  }
}


// new-yamap BEGIN
.addresses-page {
    .addresses-list {
        
        .addresses-list-item {
            padding: 10px;
            transition: background 0.3s;
            cursor: pointer;
            
            &:hover {
                background-color: #eee;
            }
        }
    }
}
// new-yamap END


// countries BEGIN
.countries {
  .countries-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    
    .countries-list-item {
      flex: 1 1 auto;
      text-align: center;
        
      a {
        transition: box-shadow 0.3s;
        font-size: 18px;
        background: #fff;
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #000;
        
        &:hover {
          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .15);
        }
      }
    }
  }
}
// countries END



// our-works-section BEGIN
.our-works-section {
  padding: 15px;
  box-sizing: border-box;
    
  * {
    box-sizing: border-box;
  }
  
  .slider-wrapper {
    position: relative;
  }
  
  .slider-container {
    height: auto;  
    overflow: hidden;
  }
  
  .slider-container-inner {
    transition: left 0.3s;
    left: 0;
    display: flex;
    gap: 20px;
    position: relative;
  }
  
  .slider-item {
    flex: 1 0 100%;
    opacity: 1;
    height: auto;
    z-index: 1;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: #EFFBFF;
    
    padding: 21px;
    display: grid;
    
    gap: 35px 20px;
    grid-template-columns: 200px auto;
    grid-template-rows: auto auto auto; 
    grid-template-areas: 
      "image headers"  
      "text text"
      "buttons buttons"
    ;

    &.active {
      opacity: 1;
    }
    
    &.showed-fulltext {
      .close-fulltext {
        display: block;
      }
      .fulltext {
        opacity: 1;
        pointer-events: unset;
      }
    }
  }
  
  .image {
    grid-area: image;
    border-radius: 16px;
    overflow: hidden;
    display: block;
    height: 200px;
    width: 200px;
    align-self: start;
    
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .headers {
    grid-area: headers;
    align-self: start;
    
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-items: start;
    gap: 5px;
    
    > * {
      margin: 0;
    }
    
    h3 {
      margin-bottom: 10px;
    }
  }
  
  .text {
    grid-area: text;
    
    &.hidden-more {
      .show-fulltext {
        display: none;
      }    
    }
  }
  
  .show-fulltext {
    color: @main_color;
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: darken(@main_color, 20%);
    }
  }
  
  .buttons {
    grid-area: buttons;
  }
  
  .btn {
    border-radius: 11px;
    background: @main_color;
    text-transform: uppercase;
    color: #fff;
    height: 58px;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .close-fulltext {
    z-index: 3;
    display: none;
    width: 60px;
    height: 60px;
    padding: 20px;
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 0px;
    line-height: 1em;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    
  }
  
  .fulltext {
    transition: opacity 0.3s;
    z-index: 2;
    position: absolute;
    background: #F8F8F8;
    padding: 32px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
  }
  
  .slider-controller {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
    
    &.show {
      display: block;  
    }
    
    .next,
    .prev {
    z-index: 3;
      transition: background 0.5s;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: @main_color;
      cursor: pointer;
      display: flex;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;

      &:before {
        content: "";
        margin: auto;
        width: 8px;
        height: 8px;
        border-bottom: 1px solid #fff;
        border-left: 1px solid #fff;
        position: relative;
      }


      &:hover {
        background: @main_color_light;
      }
    }

    .next {
      right: -20px;

      &:before {
        right: 2px;
        transform: rotate(-135deg);
      }
    }

    .prev {
      left: -20px;

      &:before {
        left: 2px;
        transform: rotate(45deg);
      }
    }
  }
  
  @media @mobile {
    .slider-item {
      grid-template-columns: auto;
      grid-template-rows: auto;
      grid-template-areas: 
        "image"
        "headers"
        "text"
        "buttons"
      ;
    }
    
    .image {
      width: 100%;
    }
  }
}
// our-works-section END

.social-likes,.social-likes__widget{display:inline-block;padding:0;vertical-align:middle !important;word-spacing:0 !important;text-indent:0 !important;list-style:none !important}.social-likes{opacity:0}.social-likes_visible{opacity:1;transition:opacity .1s ease-in}.social-likes>*{display:inline-block;visibility:hidden}.social-likes_vertical>*{display:block}.social-likes_visible>*{visibility:inherit}.social-likes__widget{display:inline-block;position:relative;white-space:nowrap}.social-likes__widget:before,.social-likes__widget:after{display:none !important}.social-likes_vertical .social-likes__widget{display:block;float:left;clear:left}.social-likes__button,.social-likes__icon,.social-likes__counter{text-decoration:none;text-rendering:optimizeLegibility}.social-likes__button,.social-likes__counter{display:inline-block;margin:0;outline:0}.social-likes__button{position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.social-likes__button:before{content:"";display:inline-block}.social-likes__icon{position:absolute;top:0;left:0}.social-likes__counter{display:none;position:relative}.social-likes_ready .social-likes__counter,.social-likes__counter_single{display:inline-block}.social-likes_ready .social-likes__counter_empty{display:none}.social-likes_vertical .social-likes__widget{display:block}.social-likes_notext .social-likes__button{padding-left:0}.social-likes_single-w{position:relative;display:inline-block}.social-likes_single{position:absolute;text-align:left;z-index:99999;visibility:hidden;opacity:0;transition:visibility 0s .11s,opacity .1s ease-in;-webkit-backface-visibility:hidden;backface-visibility:hidden}.social-likes_single.social-likes_opened{visibility:visible;opacity:1;transition:opacity .15s ease-out}.social-likes__button_single{position:relative}.social-likes,.social-likes__widget{border:0;font-size:14px}.social-likes__widget{line-height:20px}.social-likes{min-height:28px;margin:-3px}.social-likes,.social-likes_single-w{line-height:20px}.social-likes__widget{margin:3px}.social-likes__button,.social-likes__counter{font-family:"Trebuchet MS","Helvetica Neue",Tahoma,sans-serif;font-size:14px;line-height:18px;border-width:1px;border-style:solid;border-radius:3px}.social-likes__button{padding:1px 4px 1px 20px;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.6);box-shadow:0 1px 1px rgba(0,0,0,.05);transition:border .1s ease-in-out,color .2s ease-in-out}.social-likes__icon{width:20px;height:20px;background-repeat:no-repeat}.social-likes__counter{margin-left:7px;padding:1px 4px;font-weight:400;color:#666;color:rgba(0,0,0,.5);cursor:default}.social-likes__counter:before,.social-likes__counter:after{content:"";position:absolute;width:0;height:0}.social-likes__counter:before{top:4px;left:-6px;border:6px inset transparent;border-left:0;border-right:6px solid;border-right-color:inherit;opacity:.7}.social-likes__counter:after{top:5px;left:-4px;border:5px inset transparent;border-left:0;border-right:5px solid}.social-likes_vertical{margin:-6px -4px}.social-likes_vertical .social-likes__widget{margin:6px 4px}.social-likes_notext .social-likes__widget{margin:3px 2px}.social-likes_notext .social-likes__button{width:16px}.social-likes_single{margin-top:-16px;padding:6px 6px 4px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.25)}.social-likes__widget_single{margin:0}.social-likes__button_single{padding-left:19px;background:#e2e2e2;background:linear-gradient(to bottom,#f7f7f7,#e2e2e2);color:#444;border-color:#ccc;border-color:rgba(179,179,179,.8);border-bottom-color:rgba(153,153,153,.8)}.social-likes__button_single:hover,.social-likes__widget_active .social-likes__button_single{background:#f4f4f4;background:linear-gradient(to bottom,#f0f0f0,#cfcfcf);color:#222;border-color:#bbb;border-bottom-color:#9f9f9f}.social-likes__icon_single{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAACmUlEQVR42kySX0hTYRjGn/O3nQ3FTduc1gwsQA1VCgK9iYmBDIjwxvDGO70qVIRUKUTwbiKI6rWgGEOhFAhCJMYIQxiSjIgybIi2tuHcOTv/z9fZCaIH3psPfu/3Pg8PRQiho9vRlxk989SAEaBAWbqlQzd1lMUxHDiaAwGhWbC/A3zg9eiT0VdMmkuPade1MY1oNzRKcxGWCN4Kr+Cr9An+Kr8gWZKQU3MCGLgsyvIV6eLd7bfbHOu55emTVMlng2A5Fn1tfei+3Y3/tfdtD7upXYiyCFqlfcJNIcJeqpfNJmuC4ihMh6fRWN2Is8IZEj8TDtQV6nIWpTIpxE/icFNuqJraxJa0EsnLeUw8mnCgnS87WPy4CEmTHHDjaANttW1I/Uo5XlVDBdEJYUO+kLUaWUWNpwZZKYv5+DzqKuuwEFkAAUE0HkXiNAE350ZRK8JODpzBEZqhGVKGyto/2UdGymD4wTCa/c1o8bdg8N4gSkYJXsGLpkCTMzzLgz08PaR6V3tB8RTs1ODm3SjIhX/BFJUiLq4uMBOeQc+dHudt6s2UxSqGAkVWQFs07O8dD3Mf5pCVsyCEYPlgGbUVtQg3hmGYBmLHMaRzabCmaRKO4mARCwwYTD6cxFpyDePvxp3t5ZOXIkuwLWE9uY6RrREE+aADAgYg6iIG7g+gv7XfmeR5EhQotAfbnQWbR5uYfT+LhqoGWIplg4b5HSZ8AitgK7kFWZUx1DmEjmCHA6QLaawkVhD7HIOH9oCYBKZu/qBCj0PPqjurX9hwkDAEdiGcfta4/yadLWWd3nqveQGCss7zn/ILTOvz1oPccU6neTpADMK4iOuKMRmxJJVEpaSIvMWLLsslWpolm4r5VT6TV+o766N/BBgAW0s6t4L8o7kAAAAASUVORK5CYII=");background-position:2px 3px}.social-likes__counter_single{background:#f6f6f6;border-color:#ddd}.social-likes__counter_single:after{border-right-color:#f6f6f6}.social-likes__button_facebook{padding-left:19px;background:#eceef5;background:linear-gradient(to bottom,#fff,#d8def4);color:#3b5998;border-color:#cad4e7;border-color:rgba(202,212,231,.8);border-bottom-color:rgba(189,194,203,.8)}.social-likes__button_facebook:hover{background:#c0cdf3;background:linear-gradient(to bottom,#f2f3f7,#c0cdf3);color:#253860;border-color:#b4bfd4;border-bottom-color:#b3b7bf}.social-likes__icon_facebook{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOBAMAAADtZjDiAAAAFVBMVEVheaw7WZhgeKvr7vT///9FYp5thLQcmmHvAAAAMklEQVQI12NgFAQBAQZBCADTyi4Q2gRKuwii0C4uEHFjF2Os8mA6LC0tzSUtFU5D7QEASU4NS6TAlaUAAAAASUVORK5CYII=");background-position:3px 3px}.social-likes__counter_facebook{background:#f2f3f7;border-color:#cad4e7}.social-likes__counter_facebook:after{border-right-color:#f2f3f7}.social-likes__button_twitter{padding-left:19px;background:#d5e6ef;background:linear-gradient(to bottom,#fff,#d5e6ef);color:#186487;border-color:#a4cce5;border-color:rgba(164,204,229,.8);border-bottom-color:rgba(158,186,204,.8)}.social-likes__button_twitter:hover{background:#bfdfed;background:linear-gradient(to bottom,#f2f8fc,#bfdfed);color:#0b3752;border-color:#9cbbcf;border-bottom-color:#68a0c4}.social-likes__icon_twitter{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAMAAAB4W0xQAAAA3lBMVEX///////8AgJ8AgK/////m9fr///8Afa8GgrEAfq8Afa0AgrQAfa2MyuJ7yOUBiL0AhLUAhroCg7YRiLUmncub1+8AgLUWnc////+03u8MqeYChbgmreBpx+oMreuAy+mHzOcksecmseX///////+54/NBvesmtOsKmdAAgLAAib1Pwe0amMjA5fJtxehtyextzO+N1fLW8PkAq+0Ao+EAq+wAod8AkckAjMIApeUApuYAmNIAm9cApOMAqOgAouAAqusAntoAnNgAod4Alc4AjsQAp+cApeQArO4AqenIkFDnAAAAM3RSTlMADBAQd6EkYLOAcJ9garnwn7/hZ+DLMNE8pPvR89n7wYjx80gwruvz+Z/v55/B39/f18d/Bxu1AAAAhUlEQVQIHR3BBQLCMBAEwE0Nd9fi7iFQrFAI5fj/h0iYAQxoZjyWhGEA0QiUxvvo5fIFoOglTJTl/nN4TlJAOpCZ7OLFiYclB6iczsHlGhLRrQqgVufC9wURb0JxWm36+7rQOl1BCu/1oQ2GI0HExzYUczqT9weJuc2gMGu5Wm+2O4tB+QHGhxMRTbwDjQAAAABJRU5ErkJggg==");background-position:3px 5px}.social-likes__counter_twitter{background:#f2f8fc;border-color:#a4cce5}.social-likes__counter_twitter:after{border-right-color:#f2f8fc}.social-likes__button_plusone{padding-left:12px;background:#e4e4e4;background:linear-gradient(to bottom,#f5f5f5,#e4e4e4);color:#da573b;border-color:#bbb;border-color:rgba(204,204,204,.8);border-bottom-color:rgba(179,179,179,.8)}.social-likes__button_plusone:hover{background:#f4f4f4;background:linear-gradient(to bottom,#f9f9f9,#f0f0f0);color:#cd4427;border-color:#ddd;border-bottom-color:#ccc}.social-likes__icon_plusone{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAMAAADqIa48AAAA1VBMVEX////w8PDaVzv6+vr29vbijXveaU/s5uXcalHmqp3p5eTfeGLnoJH77erw6ujcYUX39PTlinfhiHXfbVPxysLaWT3u6urbWz/t6enx6efggm78/PzutKfdZUvecVjq4d/kraHcYUb02NLjgWvcZ03gkH7fiXbcYkf33df4+Pj44dzxxLrebVXmu7Lw8PDgdFzgfGbo4+LssqXccVnl1tPcmozdemTcdFznlILaWTzcaE/kzsrik4L48fDsq53219Hhd2DdclvaVzr57Orj09Dqp5jl2daL4EW+AAAAAnRSTlMA+MX1txYAAAB3SURBVAgdLcEDFsMAEEDB341q27ZtbHH/IzV96QzBQDIkLiuKP2yUylKJGBCLAwkpAilcaclkIZcHCiIO6ARw5A5otQb1RhNoabvT7fVxDYajsV7xTGc6X+BZqq7WwGa7s/YHPZ7gfDFM82brA3z8PG198ffWzxcvuAx4n4cZ9wAAAABJRU5ErkJggg==");background-position:0 6px}.social-likes__counter_plusone{background:#f9f9f9;border-color:#d2d2d2}.social-likes__counter_plusone:after{border-right-color:#f9f9f9}.social-likes__button_mailru{padding-left:18px;background:#004584;background:linear-gradient(to bottom,#5d90ba,#004584);color:#fff;color:rgba(255,255,255,.95);border-color:#1e65a5;border-color:rgba(11,84,153,.8);border-bottom-color:rgba(3,27,48,.8);text-shadow:0 -1px 0 rgba(0,0,0,.3)}.social-likes__button_mailru:hover{background:#001e5d;background:linear-gradient(to bottom,#618cae,#001e5d);color:#fff;color:rgba(255,255,255,.99);border-color:#094984;border-bottom-color:#031b30}.social-likes__icon_mailru{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAACXUlEQVR42nyTbUhTYRiGLzU1WxgqfqK5pSkaliASRb8qwLIIIaAQQ4qsAJLof4ghUkhQlJlihq6gyiTBqFQrmuIS0TDNUSubqS3bVHNzW7r1nJgxE3zh4pzD8/G+9/2cF1ZZiz1sXC3u919yCFAoFAmZPiGDcEe4HpDN3IpiKdR4PDzz8yPF+A1D9wDmySnsCdGEZqYSlRRPssRHJZ4rDQYA/L2F4W43L23zxBaWoM0u4Mp3C43pGrpedFObksel4goezMyhUvKWybF3Ur3wlsX8fVRqL7JfgsOCx4dblg7azxymak6HXXj4T6dLj1N3m/cn88j4reen4TGGrDRuAOUFuTT8eoNFafK6huP3ymhTNlJOu8Yyw9aIDQQNGmm7XMxu0RR2opTy3g/UAtMNLajVsfiVnCLf4STw6wRNkrNHZG33/zJOKkBwIH0/rOyYtWHT9VOjFAIAI64F6gEAYiIYBhg1s9l/yIgDIFXN2o8mpkNVqORIbt8RipzopXdxPhLANIHTv66ZPocLpyaOgxVamuwOHItutNJgvdeT9PgoKpaKI8PIFcc9jR30AgS2XKVLMWT8OQdydnJtsh2T1+W/Rr2qRm/rxGFu5alirny/A9YBIIYdMjYzLi7Oy/NscBDnjuZQX3qa+7syqQLylA0Ulz89YTRNwzHfPywgI5nzd8so2rKJJMAkU9CZrVgTY4hQhRC37QiVY5NkTc0yAtQJjgAAwCNO9998hNU6i9PjxhUVjjoxlr02B2GDn7H1DHFBxtkK6IWFFRfDu1IEjZDgxSKMCU3Csin8EWAAcfkVu4j5tGUAAAAASUVORK5CYII=");background-position:1px 2px}.social-likes__counter_mailru{background:#fff1c2;border-color:#ffc70d}.social-likes__counter_mailru:after{border-right-color:#fff1c2}.social-likes_notext .social-likes__icon_mailru{background-position:2px 2px}.social-likes__button_vkontakte{background:#436f96;background:linear-gradient(to bottom,#8faecf,#436f96);color:#fff;color:rgba(255,255,255,.95);border-color:#4d84c1;border-color:rgba(78,131,193,.8);border-bottom-color:rgba(52,88,127,.8);text-shadow:0 -1px 0 rgba(0,0,0,.3)}.social-likes__button_vkontakte:hover{background:#4e80ab;background:linear-gradient(to bottom,#a2c0df,#4e80ab);color:#fff;color:rgba(255,255,255,.99);border-color:#5788be;border-bottom-color:#3b6798}.social-likes__icon_vkontakte{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAACFUlEQVR42mL5//8/g4JbDgsDA4MgEMsCsTAQswExIwN28BuI3wPxUyB+DcS/WIAGgBSLBzqbJqWHuWYoSImKcLCzsuEwgOHP33//Hr94+3rzgTPb+xZubQcK3WOQd83m9M3ujPz6/eeP/yQAoFn/KvqXNQL1CzEBTeJ1tdLz4uJgY2cgATAxMjJaG6p7g4IBFBYcPFwcYsgK3n/6+sUwpLwXyLwGxNxAzBLsam5XmujrLSEiIAhTB7SYE0hxggxh/P/vPxMWy44baym9i/Ozy7x+78n1Gav2zGZiYuTqLo4JQlPHyITPxbISwvL+TiaJAc5m0aAYE+DlxuplFjyG/Dtz9d6dqokr6s9cuXvH1lhTODPc1Q6rbXgMYRQW4OHUUZXVAbrG8fDZ6y8Ta6b3f/vx6ycpLmGSFBVUifKyDgVxPnz+dn72mr3Hb95/+txQU1GBaO8A087TExdvn/3w+eun9XtP3WRnY5WTFhcSwO4SRsb/WAzRAXrhOhBPBQWqorSo1aTKxFgxIX50Q/6DDPn5+8+fT8iivNycXIcWNpTD+MCw4eHm5OBAt+Xnrz9/QHkHFLCfj1+4tReUJ+DOY2ZikpMUEYFhbAaAwPV7T0+AgotZQNns74Nnr9+xsjKL6KrKqbOyMLMQSvJ//vz9s27PqcPNM9e1ALmPGKFFASjXSgCxPBDz4SkGYOArED+B4u8AAQYACBLgM8J5VXgAAAAASUVORK5CYII=");background-position:1px 2px}.social-likes__counter_vkontakte{background:#eaeef3;border-color:#afc1d4}.social-likes__counter_vkontakte:after{border-right-color:#eaeef3}.social-likes__button_odnoklassniki{padding-left:17px;background:#f6900b;background:linear-gradient(to bottom,#f6bb6d,#f6900b);color:#fff;color:rgba(255,255,255,.95);border-color:#d99c27;border-color:rgba(217,154,38,.8);border-bottom-color:rgba(197,137,7,.8);text-shadow:0 -1px 0 rgba(0,0,0,.12)}.social-likes__button_odnoklassniki:hover{background:#f69a21;background:linear-gradient(to bottom,#fbcc5a,#f69a21);color:#fff;color:rgba(255,255,255,.99);border-color:#f0b22c;border-bottom-color:#c59121}.social-likes__icon_odnoklassniki{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAPCAQAAACcwS2GAAAA4ElEQVQYGQXBMUsCYQCA4Zc75yS3BoWQSHCK1oaGpjYLAgd3IZwkcOuHNBREEGQI/QFpy/GqranBkNCw8pKD83t7HgCMbXhmwxgAsORIVX22BMDqSvP59CGf6+oagPCtt0dsXBxqWAKw+tGPPZgeaFgC8Hmvzr0LXzodANCtpYmqpkm3Bhhnx52dYfvlfNju7WYnxthSf7NBepn1/VNb3GwtRqqqmib9GhQoP56q6lOXCgXAzTBWcw0TtwGLYazpa28/TTRMLPK2ls/SpFmn0KwvRvnsfR0iqlSIgIgyVaJ/7Q6fqBoqPZcAAAAASUVORK5CYII=");background-position:4px 3px}.social-likes__counter_odnoklassniki{background:#ffe9be;border-color:#d9ab53}.social-likes__counter_odnoklassniki:after{border-right-color:#ffe9be}.social-likes_notext .social-likes__icon_odnoklassniki{background-position:5px 3px}.social-likes__button_pinterest{padding-left:20px;background:#eee;background:linear-gradient(to bottom,#fefefe,#d3d3d3);color:#c71a28;border-color:#bbb;border-color:rgba(186,186,186,.8);border-bottom-color:rgba(153,153,153,.8)}.social-likes__button_pinterest:hover{background:#efefef;background:linear-gradient(to bottom,#fff,#d9d9d9);color:#c11524;border-color:rgba(186,186,186,.6);border-bottom-color:rgba(153,153,153,.6)}.social-likes__icon_pinterest{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAMAAADjcdz2AAABYlBMVEX////CByTCByXCByS+BSC2ACTCBiS/ABXBByXBBiTCBiQAAAC/ACC5ABe0AB7BBiTBCCTBBCPBByW/AADCByTBCCXBCCXCAB/BBiTCBSTBByTBByTBByTBByW6AB3DByTBBiTBBiPCByTCBiW/BiDBBiTCBiO/BiPBBiS/BCK+BSHBByTBCCTBCCW5ACO8ABvCCCTBBiTBBiPCBiOZAAC/ACDCByPABSTCBiTCBiPCBiXBBiTCByTBByTBByLCBiTDCCTCCCTBByTBByXBByXBByXBBiXBByXBBiXCByTBCCWzABq/BiSAAADCBCTBBiXBBiXBByXBByXBByPBBiTCCCTBBiPCBiTBBiPBBSO4ABy/BSLBByXAByTAByW8BiG/BCTBByPCACS/BCPABCTACCOqAADCByLBCCTCCCTCBiTCBiTBByLBBiPCCCTBBiTCCCS+CCLCCCXCByTDCCXCByVy9s/zAAAAcnRSTlMA6ryWNwf9DObPswEQCxHspTqZBI3s6xn8Mo+csesass3a2fooW9Essjwv2+LmFhPpodOnBQjEaarZ2J3UzZR5qqqT1pH7Wq3s1eQKVAJH9Mnf3tuwgbBPe14SNG9NRS5AlxVIOYIGS8aiq6Mly8XXo0OXLlv1AAAA3ElEQVQYGQXBA4IDUAxAwVd763Zt27Zt22byc/+dAQAAAACAsvKIp6p52g8ABHINpmqiQV8CIFCpouvemtpS57whIKey1zQItLSaVUB7UMerzzN19bONDJikWXRLbSUd2mnW1d3Ta3302zfzlh4adjbCqIyRtAkmpyBqMkNG8yRtjt2FWNwjssyKrLLmwhubnq1tsZ1idt8O8JkeHh1zYnbKmViKCxG1S7JX19yETW7hzon476MPj095kRSQ8Irn+cVU1NxrHCD0Fom9m5qTjxIA4LP4VSj8/P4B/APnbDloW0CFhAAAAABJRU5ErkJggg==");background-position:2px 1px}.social-likes__counter_pinterest{background:#fff5f6;border-color:#f0a8ae}.social-likes__counter_pinterest:after{border-right-color:#fff5f6}