// out: style.css, compress: false, strictMath: true
/***************************/
/*Секция переменных и констант*/
@min_body_width: 1000px;
@min_body_height: 700px;
@min_body_middle_width : 700px;
@min_body_mobile_width : 320px;
@footer_height : 44px;
@half-opacity-white-color : rgba(255,255,255,0.5);
@error-message-color : #e95a5a;
@animation-time : 0.15s;
/*Секция переменных и констант*/

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  min-width: @min_body_width;
  min-height: @min_body_height;
  height: 100%;

  &.full {
    height: 100%;
  }
}

body > #wrap {
  position: relative;
  height: auto;
  min-height: 100%;
}
/*
#center {
//  padding-bottom: @footer_height;
}

#footer {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: @footer_height;
  margin-top: -@footer_height;
  height: @footer_height;
  clear: both;
}
*/

li {
  list-style: none;
}

a, a:link {
  color: inherit;
  //color: #FFF;
  text-decoration: none;
}

.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear,
  left bottom,
  left top,
  color-stop(0, @start),
  color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
  @start,
  @stop);
  background: -moz-linear-gradient(center bottom,
  @start 0%,
  @stop 100%);
  background: -o-linear-gradient(@stop,
  @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}

@font-face {
  font-family: HelveticaNeueLight;
  src: url('../fonts/HelveticaNeue-Light.ttf');
  font-weight: 300;
}

@font-face {
  font-family: HelveticaNeue;
  src: url('../fonts/HelveticaNeue.ttf');
  font-weight: 400;
}

@font-face {
  font-family: HelveticaNeueMedium;
  src: url('../fonts/HelveticaNeueCyr-Medium.ttf');
  font-weight: 500;
}

@font-face {
  font-family: BMWTypeV2Regular;
  src: url('../fonts/HelveticaNeue.ttf');
  font-weight: 400;
}

@font-face {
  font-family: fontello;
  src: url('../fonts/fontello.ttf');
  font-weight: normal;
}

.FONT(@font-family:Agora, @font-weight:normal, @font-size, @font-va, @line-height) {
  font-family: @font-family;
  font-weight: @font-weight;
  font-size: @font-size;
  letter-spacing: ceil((@font-size * @font-va / 1000));
  line-height: @line-height;
}

.UNSELECTABLE(@pref:none) {
  -moz-user-select: @pref;
  -khtml-user-select: @pref;
  -webkit-user-select: @pref;
  -ms-user-select: @pref;
  user-select: @pref;
}

.TRANSITION(@property:all, @duration:1s, @timing-function:ease-out, @transition-delay:0s) {
  -webkit-transition: @property @duration @timing-function @transition-delay;
  -khtml-transition: @property @duration @timing-function @transition-delay;
  -moz-transition: @property @duration @timing-function @transition-delay;
  -o-transition: @property @duration @timing-function @transition-delay;
  transition: @property @duration @timing-function @transition-delay;
}

.TRANSFORM(@function) {
  -moz-transform: @function;
  -ms-transform: @function;
  -webkit-transform: @function;
  -o-transform: @function;
  transform: @function;
}

.link {
  text-decoration: none !important;

  &:hover {
    text-decoration: underline !important;
    cursor: pointer !important;
  }
}

.invertedLink {
  text-decoration: underline !important;

  &:hover {
    text-decoration: none !important;
    cursor: pointer !important;
  }
}

.hoveropacity(@opacity:0.7, @cursor: pointer) {
//  cursor: @cursor;

  &:hover {
    opacity: @opacity;
  }
}

.caps {
  text-transform: uppercase;
}

.underline {
  &:hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
}

.bigunderline {
  padding-bottom: 3px;
  border-bottom: 2px solid #FFF;
  &:hover {
    border-color: transparent;
  }
}

.shrinkingline {
  display: inline-block;
  position: relative;
  padding-bottom: 0px;
//  border-bottom: 2px solid #FFF;

  &:before {
    content: '';
    position: absolute;
    bottom: 0px;//-6px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #FFF;
    .TRANSITION(width, @animation-time);
    -webkit-transition-property: width, left;
    -moz-transition-property: width, left;
    -ms-transition-property: width, left;
    -o-transition-property: width, left;
    transition-property: width, left;
  }
  &:hover {
    &:before {
      left: 50%;
      width: 0;
    }
  }
  &.active:before {
    display: none;
  }
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.fade {
  opacity: 0.6;
  background-color: #000;
}

.show {
  display: block !important;
}

.hide {
  display: none !important;
}

.hidden {
  visibility: hidden !important;
}

/*
.error {
  background-color: #fae2e2 !important;
  border-color: #f7caca !important;
  color: @error-message-color !important;
}
*/

.allSpace(@position:absolute) {
  position: @position;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

input, textarea {
  &:focus, &:active {
    outline: none;
  }
}

.helper {
  display: inline-block;
  height: 100%;
  width: 0px;
  vertical-align: middle;
}

body {

  .central {
    position: relative;
    width: @min_body_width;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .links-container {
    position: relative;
    float: right;
    right: 50%;
    //margin: 17px 0 30px 0;

    .links {
      position: relative;
      float: left;
      left: 50%;
      text-align: center;
      padding: 0 50px;

      a {
        margin: 0 11px;
        //padding-bottom: 5px;
        white-space: nowrap;
        .FONT(HelveticaNeue, 700, 12px, 0, 39px);
        font-family: HelveticaNeue, Arial;
        //.hoveropacity();

        &.bigunderline {
          margin: 0;
        }
      }
    }
  }
}

#header {
  position: absolute;
  z-index: 2000;//20;
  top: 0;
  left: 0;
  right: 0;

  nav {
    padding: 11px 0 11px 40px;
    .FONT(HelveticaNeueLight, 300, 14px, 20, 28px);
    font-family: HelveticaNeueLight, Arial;
    color: #ffffff;
    a {
      margin-right: 35px;

      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .logo {
    display: block;
    position: absolute;
    z-index: 50;
    top: 0;
    right: 40px;//7.9%;

    img, a {
      max-height: 105px;
      img {
        max-height: 105px;
      }
    }

    .big {
      display: none;
    }
  }
  a.logo {
    .hoveropacity();
  }
}

#callback, #download-popup {
  display: none;
  opacity: 0;
  .allSpace(fixed);
  z-index: 15;//200;
  min-width: @min_body_width;
  min-height: @min_body_height;
  background-color: rgba(0,0,0,0.9);//rgba(0,0,0,0.98);
  color: #FFF;

  a {
    .hoveropacity();
  }

  .close {
    vertical-align: top;
    position: relative;//absolute;
    top: -41px;//17.2%;
//    right: 18.7%;
    margin-left: 94px;

    img {
      max-width: 46px;
      max-height: 46px;
    }
  }

//  h1,
  .head, p, form, .note {
    position: absolute;
    left: 15.2%;
    right: 30%;
  }

//  h1
  .head {
    top: 24%;
    right: 5%;

    h1 {
      display: inline-block;
      .FONT(BMWTypeV2Regular, 400, 50px, 20, 60px);
      font-family: BMWTypeV2Regular, HelveticaNeueLight;
    }
  }

  p {
    top: 35.2%;
    .FONT(HelveticaNeueLight, 300, 17px, 20, 34px);
    font-family: HelveticaNeueLight, Arial;

    &.thanks {
      top: 42.5%;
    }
  }
  form {
    top: 51.8%;

    .phone {
      vertical-align: middle;
      width: 357px;
      height: 60px;
      padding: 0 22px;
      box-sizing: border-box;
      border: 2px solid #40404a;
      color: #FFF;
      background-color: transparent;
      .FONT(HelveticaNeueMedium, 500, 16px, 0, 20px);
      font-family: HelveticaNeueMedium, Arial;
    }
    .send {
      .FONT(HelveticaNeueMedium, 500, 16px, 0, 26px);
      font-family: HelveticaNeueMedium, Arial;
      vertical-align: middle;
      margin-left: 33px;
    }

    .error-text {
      display: none;
      margin-top: 26px;
      .FONT(HelveticaNeueLight, 300, 13px, 20, 17px);
      font-family: HelveticaNeueLight, Arial;
    }

    &.error {
      .phone {
        border-color: #FFF;
      }
      .error-text {
        display: block;
      }
    }
  }

  .note {
    top: 70.1%;
    .FONT(HelveticaNeueLight, 300, 13px, 20, 17px);
    font-family: HelveticaNeueLight, Arial;
    color: #8c8c8c;
  }

  .bigimage {
    vertical-align: top;
    max-width: 556px;
    max-height: 427px;
    margin: 175px 0 0 ~"calc(51.6% - 364px)";

    & + .close {
      vertical-align: top;
      top: 118px;
      margin-left: 59px;
    }
  }
  .down-wrap {
    margin: 25px 0 0 ~"calc(51.6% - 364px)";

    a {
      margin-right: 34px;
      .FONT(HelveticaNeue, 400, 14px, 300, 21px);
      font-family: HelveticaNeue, Arial;
      color: #ffffff;

      img {
        vertical-align: middle;
        width: 20px;
        height: 20px;
        margin-left: 13px;
        opacity: 0;
      }

      &:hover {
        img {
          opacity: 1;
        }
      }
    }

  }
}

#callback {
  z-index: 25;
}

#center {
  height: 100%;
  background-color: #101013;//#000;
  color: #ffffff;
  box-sizing: border-box;

  &.faq {
    height: auto;
    min-height: 100%;
    padding: 151px 0 222px 0;
    background-position: 50% 0;//50% 140px;
    background-repeat: no-repeat;

    .central {
      width: 694px;//700px;
    }

    a {
      .hoveropacity();
    }

    h1 {
      .FONT(BMWTypeV2Regular, 400, 50px, 20, 60px);
      font-family: BMWTypeV2Regular, HelveticaNeue;
    }

    p, ul {
      margin-top: 19px;
      .FONT(HelveticaNeueLight, 300, 13px, 20, 21px);
      font-family: HelveticaNeueLight, Arial;
    }

    ul {
      margin-top: 0;
      li {
        &:before {
          content: '-';
          padding-right: 6px;
        }
      }
    }

    .right {
      margin-left: 200px;
    }

    .left, .right {
      width: 500px;
      padding-top: 48px;//50px

      h2 {
        .FONT(HelveticaNeueLight, 300, 21px, 20, 26px);
        font-family: HelveticaNeueLight, Arial;
      }

      h2:after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        margin-top: 10px;
        background-color: rgba(255,255,255,0.2);
      }
    }

    h1 + .left, h1 + .right {
      padding-top: 40px;
    }
  }


  &.features, &.downloads {
    height: auto;
    min-height: 100%;
    padding: 152px 0 219px 0;
    background-position: 50% 0;//50% 165px;
    background-repeat: no-repeat;

    .central {
      width: ~"calc(90%)";
      min-width: 900px;
      max-width: 950px;
      margin: 0 auto 0 40px;
    }

    .left {
      display: inline-block;
      vertical-align: top;
      width: ~"calc( ( 100% - 900px ) + 200px )";
      min-width: 200px;
      max-width: 250px;
      padding-top: 13px;
/*
      a.section {
        &:hover {
          border-color: rgba(255,255,255,0.5);
          span {
            border-color: rgba(255,255,255,0.5);
          }
        }
      }
*/
      .section {
        display: block;
        width: 175px;
        height: 98px;
        margin-top: 25px;
        padding: 0 25px;//20px 25px 16px 25px;
        border: 1px solid transparent;
        box-sizing: border-box;
        .FONT(BMWTypeV2Light, 400, 19px, 50, 25px);//.FONT(BMWTypeV2Light, 400, 19px, 200, 25px);
        font-family: BMWTypeV2Light, HelveticaNeue;
        color: #ffffff;
        .TRANSITION(border-color, 2 * @animation-time);
        overflow: hidden;

        &:first-of-type {
          margin-top: 0;
        }
/*
        span {
          padding-bottom: 4px;
          border-bottom: 1px solid #ffffff;
        }
*/
        .shrinkingline {
          display: inline-block;
          vertical-align: middle;
          padding-bottom: 7px;
        }
        &:hover .shrinkingline {
          &:before {
            left: 50%;
            width: 0;
          }
        }

        &.active {
          border-color: #FFF !important;
          .shrinkingline {
//            border-color: transparent !important;
            &:before {
              display: none;
            }
          }
        }
      }
    }

    &.downloads {
      background-color: #101219;
      padding-bottom: 145px;
      .section {
        padding: 0 19px;
      }
    }

    .right {
      display: inline-block;
      vertical-align: top;
      width: 700px;
      color: #ffffff;

      h2 {
        .FONT(HelveticaNeueLight, 300, 50px, 20, 60px);
        font-family: HelveticaNeueLight, Arial;
      }

      .site {
        .FONT(BMWTypeV2Light, 400, 17px, 25, 30px);
        font-family: BMWTypeV2Light, HelveticaNeue;
        color: #215ed5;
        padding-bottom: 2px;
        border-bottom: 1px solid #215ed5;

        &:hover {
          border-color: transparent;
        }
      }

      h3 {
        padding-bottom: 8px;
        .FONT(BMWTypeV2Light, 400, 21px, 25, 30px);
        font-family: BMWTypeV2Light, HelveticaNeue;

        &:first-of-type {
          margin-top: 49px;
        }
      }

      .features-container {
        border-top: 1px solid rgba(255,255,255,0.2);
        padding: 15px 0 9px 0;//26 top

        .features-string {
          padding: 6px 0;
          .FONT(BMWTypeV2Light, 400, 13px, 25, 21px);
          font-family: BMWTypeV2Light, HelveticaNeue;

          .name {
            display: inline-block;
            vertical-align: top;
            width: 310px;
            margin-right: 35px;
            text-align: right;
            color: #b5b5b5;
          }

          .desc {
            display: inline-block;
            vertical-align: top;
            width: 350px;
          }
        }
      }

      .notes {
        margin-top: 92px;
        .FONT(BMWTypeV2Light, 400, 13px, 25, 21px);
        font-family: BMWTypeV2Light, HelveticaNeue;

        p {
          padding-top: 12px;

          &:first-of-type {
            padding-top: 0;
          }
        }
      }
    }

    .wallpapers-wrap {
      margin-top: 47px;

      .wallpaper {
        display: inline-block;
        vertical-align: top;
        width: 230px;
        margin-right: 4px;

        &:nth-child(3n) {
          margin-right: 0;
        }

        a {
          display: block;
          .hoveropacity();
        }

        img {
          display: block;
          width: 100%;
        }

        span {
          display: block;
          padding: 11px 80px 19px 20px;
          box-sizing: border-box;
          .FONT(BMWTypeV2Light, 400, 13px, 25, 21px);
          font-family: BMWTypeV2Light, HelveticaNeue;
        }
      }
    }
  }

  .leftpart, .centralpart, .rightpart {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;//33.3%;
    margin-bottom: -10px;
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
    overflow: hidden;

    .TRANSITION(padding, 2 * @animation-time);
    .dimmer {
      .allSpace();
      background-color: #000;
      opacity: 0.2;
      .TRANSITION(opacity, 2 * @animation-time);
    }
    &:hover, .hover {
      .dimmer {
        opacity: 0;
      }
    }
  }
  .leftpart {
    background-position: 0% 50%;
  }
  .centralpart {
    background-position: 50% 50%;
  }
  .rightpart {
    background-position: 100% 50%;
  }
  .lefttext, .centraltext, .righttext {
//    display: block;
    position: absolute;
    z-index: 10;
    top: 0;
    height: 100%;
    width: 33.33%;
    margin-bottom: -10px;
//    opacity: 0.9;
    color: #ffffff;
    .TRANSITION(opacity, 2 * @animation-time);
//    padding: 25% 8.1% 0 8.1%;
//    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;

    .text {
      position: absolute;
      top: 50%;
//      left: 35px;
//      right: 35px;
//      width: 100%;
      padding: 0 12.0%;//0% 8.1% 0 8.1%;
      padding: 0 ~"calc( 22.25% - 34px )";
//      padding: 0% ~"calc( 50% - 300px )";
//      box-sizing: border-box;
    }

    h1 {
      .FONT(BMWTypeV2Regular, 400, 50px, 200, 60px);
      font-family: BMWTypeV2Regular, HelveticaNeue;
    }

    p {
      opacity: 0;
      margin-top: 141px;
      .FONT(BMWTypeV2Regular, 400, 14px, 20, 23px);
      font-family: BMWTypeV2Regular, HelveticaNeue;
      .TRANSITION(opacity, 2 * @animation-time);
      -webkit-transition-property: opacity, margin;
      -moz-transition-property: opacity, margin;
      -ms-transition-property: opacity, margin;
      -o-transition-property: opacity, margin;
      transition-property: opacity, margin;
    }
  }
  .lefttext {
    left: 0;
  }
  .centraltext {
    left: 33.33%
  }
  .righttext {
    right: 0;
  }
  .leftpart:hover ~ .lefttext, .centralpart:hover ~ .centraltext, .rightpart:hover ~ .righttext,
  .leftpart.hover ~ .lefttext, .centralpart.hover ~ .centraltext, .rightpart.hover ~ .righttext {
    z-index: 9;
    .text p {
      opacity: 1;
      margin-top: 41px;
    }
  }

  &.browser, &.page404 {
    .leftpart, .centralpart, .rightpart {
      margin-bottom: -20px;

      .dimmer {
        opacity: 0.6;
      }
    }
  }

  .browser-wrap {
    .allSpace();
    min-width: @min_body_width;
    z-index: 5;
    color: #ffffff;
    padding: 154px 0 0 60px;
    box-sizing: border-box;

    h1 {
      .FONT(BMWTypeV2Regular, 400, 50px, 20, 60px);
      font-family: BMWTypeV2Regular, HelveticaNeue;
    }

    .desc {
      margin-top: 40px;
      .FONT(HelveticaNeue, 400, 14px, 75, 24px);
      font-family: HelveticaNeue, Arial;
      width: 320px;
    }

    .updates-wrap {
      margin-top: 60px;
      a {
        display: inline-block;
        margin-right: 62px;
        margin-bottom: 30px;
        .FONT(HelveticaNeueLight, 300, 13px, 20, 26px);
        font-family: HelveticaNeueLight, Arial;
        color: #ffffff;
        .hoveropacity();

        &:last-of-type {
          margin-right: 0;
        }

        img {
          margin-right: 21px;
          vertical-align: middle;
        }
      }
    }
  }

  .page404 {
    .allSpace();
    min-width: @min_body_width;
    z-index: 5;
    color: #ffffff;
    padding: 148px 0 0 60px;
    box-sizing: border-box;

    h1 {
      .FONT(BMWTypeV2Light, 400, 100px, 20, 100px);
      font-family: BMWTypeV2Light, HelveticaNeue;
    }

    .desc {
      margin-top: 36px;
      .FONT(HelveticaNeue, 400, 14px, 75, 24px);
      font-family: HelveticaNeue, Arial;
      width: 320px;
    }
  }
}

#footer {
  @bottom_padding : 22px;
//  position: absolute;
  position: relative;
  margin-top: -52px;
  z-index: 20;
//  bottom: 0;
//  left: 0;
//  right: 0;
  padding: @bottom_padding/2 40px @bottom_padding 40px;
  color: #FFF;

  a {
    .hoveropacity();
  }

  .copyright {
    .FONT(HelveticaNeueLight, 300, 13px, 20, 17px);
    font-family: HelveticaNeueLight, Arial;
    color: #ffffff;
  }

  .soc-wrap {
    display: inline-block;
    margin-left: 107px;

    .soc {
      margin-right: 37px;
      .FONT(HelveticaNeueLight, 300, 12px, 20, 16px);
      font-family: HelveticaNeueLight, Arial;
      color: #ffffff;

      &:last-of-type {
        margin-right: 0;
      }

      img {
        max-width: 17px;
        max-height: 17px;
        margin-right: 12px;
        display: inline-block;
        vertical-align: middle;
      }
    }
    .sharrre .buttons {
      display: none;
    }
  }

  .right {
    position: absolute;
    bottom: @bottom_padding;
    right: 40px;

    img.callback {
      max-width: 16px;
      max-height: 16px;
    }

    span, a, div {
      margin-left: 55px;
      .FONT(HelveticaNeueLight, 300, 12px, 20, 17px);
      font-family: HelveticaNeueLight, Arial;
      color: #ffffff;
    }

    .callback {
      margin-left: 18px;
      span {
        display: none;
        margin-right: 17px;
      }
      img {
        display: inline-block;
        vertical-align: middle;
        max-width: 16px;
        max-height: 16px;
      }
    }
  }
}

/* BIG DESKYOP VIEW */
@media screen and (min-width: 1280px ) {

  #header {
    .logo {
      img, a {
        max-height: 125px !important;
        img {
          max-height: 125px !important;
        }
      }

      .small {
        display: none !important;
      }

      .big {
        display: block !important;
      }
    }
  }

  #center {
    &.features, &.downloads {
      .central {
        margin: 0 auto 0 ~"calc( 50.04% - 593px )";//0 auto 0 ~"calc( 50% - 600px )";
      }
    }
    .browser-wrap, .page404 {
      padding-left: 60px !important;
      padding-left: ~"calc( 50% - 580px )" !important;
    }
    .lefttext, .centraltext, .righttext {
      .text {
        position: absolute;
        top: 50%;
        padding: 0 14.1%;
        padding: 0 ~"calc( 51.05% - 157px )";
      }
    }
  }

  #footer {
    .right {
      .callback {
        margin-left: 55px !important;
        span {
          display: inline !important;
        }
      }
    }
  }
}

/* BIG DESKYOP VIEW */
@media screen and (min-width: 1600px ) {
  #center {
    .browser-wrap, .page404 {
      padding-left: 220px !important;
    }
    .lefttext, .centraltext, .righttext {
      .text {
        position: absolute;
        top: 50%;
        padding: 0 21.6%;
        padding: 0 ~"calc( 50% - ( 303px / 2 ) )";
      }
    }
  }
}