//@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,latin-ext');
@import "../_partials/roboto";
//@import "jquery.fancybox-1.3.4.less";

body .content *{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.container{
  width:auto;
  max-width:980px;  

}
.content{
  width:100%;  
  background: #fff;
}

.fancybox-skin{
  padding:0!important;
}
.fancybox-outer{
  .fancybox-nav{
    display: none;
  }
}
.fancybox-wrap{
  width:auto!important;
}
.fancybox-inner{
  width:auto!important;
  height:auto!important;
  visibility: visible!important;
}

body .brown{
  color:#9a7b4c;
  font-weight: inherit;
}

.hor-line{
  display: inline-block;
  background-color: rgba(249, 182, 75, .9);
  border-top: solid 1px rgba(249, 182, 75, .5);
  border-bottom: solid 1px rgba(249, 182, 75, .5);
  height: 1px;
  position: relative;
}

.js-checkbox{
  cursor: pointer;
  user-select: none;
  background-position: left bottom;
  background-repeat: no-repeat;
  background-image:url(../../images/ai/imperial/ok-ic.png);
  padding-left:36px;
  line-height: 28px; 
  height: 28px;
  input{
    display: none;
  }
  &.checked{
    background-position: left top;
  }
}

.bg-top{
  background: url(../../images/ai/imperial/header.jpg) no-repeat top center;
  max-height:891px;
  height: 891px;
  overflow-y: hidden;
  border-bottom: solid 7px #9a7a4b;
  padding-left: 67px;
  .main-heading{
    font-size: 113px;
    font-weight: 300;
    color:#fab64c;
    line-height: 1;
    margin-top: 547px;
    margin-bottom: -5px;
  }
  .description{
    margin-left:10px;
    font-size: 20px;
    font-weight: 300;
    color:#fff;
    line-height: 1;
    .hor-line{
      width:60px;
      margin-right: 15px;
      top:-6px;
    }
  }
  .advantages{
    font-weight: 300;
    display: table;
    width: 100%;
    margin-top:65px;
    .advantage-item{
      display: table-cell;
      .number{
        font-size: 60px;
        color: #fab64c;
        font-weight: 300;
      }
      .unit{
        font-size: 20px;
        color: #fab64c;
        font-weight: 300;
      }
      .note{
        margin-top:5px;
        text-align: left;
        display: block;
        font-size: 16px;
        line-height: 18px;
        color: #fff;
        font-weight: 300;
        .hor-line{
          width:49px;
          margin-right: 8px;
          top:-8px;
          vertical-align: text-top;
          margin-left: -17px;
        }
        .text{
          display: inline-block;
          font-weight: 300;
        }
      }
      &.item-1{
        padding-left: 7px;
      }
      &.item-3{
        padding-left: 5%;
      }
    }
  }
}

.white-bg{
  background: #fff;
  .square-ic{
    background: url(../../images/ai/imperial/square-dark.png) no-repeat top center;
  }
  .counter{
    color:rgba(0, 0, 0, .3);
  }
  .left-part{
    .number{
      color: #9a7b4c;
    }
    .unit{
      color: #9a7b4c;
    }
    .note{
      color: #231f20;
      .hor-line{
        background-color: #9a7a4b;
        border-top: solid 1px rgba(255, 255, 255, .5);
        border-bottom: solid 1px rgba(255, 255, 255, .5);
      }
    }
  }
  .right-part{
    .heading{
      color:#9a7b4c;
    } 
    ul{
      li{
        color:#000000;
        background-image: url(../../images/ai/imperial/ul-black-ic.png);
        .question{
          background-position-y: top;
        }
      }
    }   
  }
}

.black-bg{
  background: #000;
  .square-ic{
    background: url(../../images/ai/imperial/square-light.png) no-repeat top center;
  }
  .counter{
    color:rgba(255, 255, 255, .3);
  }
  .left-part{
    .number{
      color: #fab64c;
    }
    .unit{
      color: #fab64c;
    }
    .note{
      color: #fff;
      .hor-line{
        border-top: solid 1px rgba(0, 0, 0, .5);
        border-bottom: solid 1px rgba(0, 0, 0, .5);
      }
    }
  }
  .right-part{
    .heading{
      color:#fab64c;
    } 
    ul{
      li{
        color:#fff;
        background-image: url(../../images/ai/imperial/ul-white-ic.png);
        .question{
          background-position-y: bottom;
        }
      }
    }   
  }
}

.white-bg,.black-bg{
  border-bottom: solid 7px #9a7a4b;
  .container{
    min-height: 305px;
    font-size: 0;
  }
  .square-ic{
    margin:-32px auto 0;
    width:56px;
    height: 56px;
    display: block;
    &#scroll-down{
      margin-top:-31px;
      cursor: pointer;
      background: url(../../images/ai/imperial/arrow-to-down.png) no-repeat top center;  
    }
  }
  .counter{
    font-weight: 500;
    font-size: 20px;
    margin-top: 13px;
    //text-orientation: 
    transform: rotate(270deg);
    transform-origin: left top 0;
    float: right;
  }
  .left-part{
    display: inline-block;
    width: 50%;
    vertical-align: top;
    padding-top:5px;
    padding-left: 40px;
    .number{
      font-size: 60px;
      font-weight: 300;
    }
    .unit{
      font-size: 20px;
      font-weight: 300;
    }
    .note{
      margin-top:-3px;
      text-align: left;
      display: block;
      font-size: 16px;
      line-height: 18px;
      .hor-line{
        width:49px;
        margin-right: 8px;
        top:9px;
        vertical-align: top;
        box-sizing: content-box;
        &.line-1{
          margin-left: -17px;
        }
        &.line-2{
          margin-left: 10px;
          width:150px;
        }
      }
      .text{
        display: inline-block;
        font-weight: 300;
        vertical-align: top;        
        span{
          font-weight: 300;
        }
      }
    }
    .icon{
      display: inline-block;
      width:50px;
      height: 46px;
      background-position: left center;
      background-repeat: no-repeat;
      margin-top: -14px;
    }
  }
  .right-part{
    display: inline-block;
    width: 50%;
    vertical-align: top;
    padding-left: 43px;
    padding-bottom: 10px;
    .heading{
      font-size: 14px;
      line-height: 17px;
      margin: 25px 0;
      padding-right: 60px;
    } 
    ul{
      list-style: none;
      padding-left: 0;
      padding-right: 15px;
      margin-top: 25px;
      li{
        font-size: 14px;
        line-height: 17px;
        margin-left: -25px;
        padding-left: 25px;
        font-weight: 300;
        margin-bottom: 15px;
        background-position: left 2px;
        background-repeat: no-repeat;
        .question{
          display: inline-block;
          background-position-x: center;
          background-repeat: no-repeat;
          background-image: url(../../images/ai/imperial/question-ic.png);
          width: 18px;
          height:18px;
          position: relative;
          top:0px;
          vertical-align: text-top;
          margin-left: 4px;
        }
      }
    }   
  }
}

.block-1{
  .container{
    background: url(../../images/ai/imperial/town-bg.png) no-repeat 35px bottom;
    min-height: 325px;
  }
  .left-part{
    .icon{
      background-image: url(../../images/ai/imperial/smartphone-ic.png);
    }
  }
}

.block-2{
  .container{
    background: url(../../images/ai/imperial/map-bg.png) no-repeat left 0px bottom 18px;
  }
  .left-part{
    .icon{
      background-image: url(../../images/ai/imperial/notebook-ic.png);
    }
  }
}

.block-3{
  .container{
    background: url(../../images/ai/imperial/heap-bg.png) no-repeat 53px bottom;
  }
  .left-part{
    .note{
      .hor-line{
        &.line-2{
          width:110px;
        }
      }
    }
    .icon{
      background-image: url(../../images/ai/imperial/sms-ic.png);
    }
  }
}

.block-4{
  .container{
    background: url(../../images/ai/imperial/icons-bg.png) no-repeat right 66px bottom 0;
  } 
  .left-part{
    .note{
      .hor-line{
        &.line-2{
          margin-left: -114px;
          width:184px;
        }
      }
    }
    .icon{
      background-image: url(../../images/ai/imperial/dialog-ic.png);
    }
  }
}

.block-5{
  .container{
    background: url(../../images/ai/imperial/numbers-bg.png) no-repeat 158px bottom;
  }
  .left-part{
    .icon{
      background-image: url(../../images/ai/imperial/crown-ic.png);
    }
  }
}

.block-6{
  .container{
    font-size: 0;
    h2.heading{
      font-size: 20px;
      font-weight: 300;
      color:#fff;
      padding-left:55px;
      margin-top:0;
      margin-bottom: 35px;
      max-width: 335px;
      .hor-line{
        display: block;
        margin-left:-12px;
        top: 9px;
      }
      .square-icon{
        width:13px;
        height: 14px;
        position: relative;
        top:1px;
        float: right;
        background: url(../../images/ai/imperial/ul-white-ic.png) no-repeat center;
      }
    }
    .thirds{
      text-align: center;
      width: 33.33%;
      vertical-align: top;
      display: inline-block;
      padding: 0 20px 20px;
      .icon{
        display: inline-block;
        width:100%;
        height: 46px;
        background-position: center;
        background-repeat: no-repeat;
      }
      .hor-line{
        width: 60px;
        top: -7px;
      }
      h3.heading{
        font-size: 14px;
        line-height: 1;
        margin-top: 0;
        margin-bottom:12px;
        color:#fab64c;
      }
      .description{
        font-weight: 300;
        font-size: 14px;
        color:#fff;
      }
      &.third-1{
        .icon{
          background-image: url(../../images/ai/imperial/tower-ic.png);
        }
      }
      &.third-2{
        .icon{
          background-image: url(../../images/ai/imperial/geo-ic.png);
        }
      }
      &.third-3{
        .icon{
          background-image: url(../../images/ai/imperial/bubbletone-ic.png);
        }
      }
    }
  }
}

.block-7{
  border-bottom: none;
  .container{
    background: url(../../images/ai/imperial/map-bottom.png) no-repeat 95px 21px;
    min-height: 358px;
  }
  #order-form{
    max-width: 440px;
    width: 100%;
    margin:0 auto;
    padding-bottom: 30px;
    .form-group{
      margin-bottom: 0;
    }
    .heading{
      display: block;
      font-size: 14px;
      color: #9a7b4c;
      line-height: 18px;
      margin-top: 45px;
      margin-bottom: 20px;
    }
    .input-wrap{
      display: block;
      background: url(../../images/ai/imperial/input-line.png) repeat-x bottom;
      margin: 10px 0;
      padding-bottom: 3px;
    }
    input[type="text"], input[type="tel"]{
      border:none;
      //border-bottom: solid 1px #9a7a4b;
      border-radius: 0;
      width: 100%;
      font-weight: 300;
      font-size: 13px;
      color: #939598;
      height: 30px;
      line-height: 20px;
      padding: 5px 5px 5px 29px;
      //margin-left: 2%;
    }
    .input-name{
      background: url(../../images/ai/imperial/name-ic.png) no-repeat left center;
    }
    .input-phone{
      background: url(../../images/ai/imperial/phone-ic.png) no-repeat left center;
    }    
    label{
      font-weight: 300;
      font-size: 13px;
      color: #231f20;
      margin-top: 5px;
      display: inline-block;
      .big{
        font-size: 18px;
        font-weight: 300;
        line-height: 1;
      }
      &.label-dop{
        margin-bottom: 10px;
      }
      &.label-confirm{
        font-size: 12px;
        margin-bottom: 30px;
      }
    }
    .input-send{
      font-weight: 300;
      font-size: 13px;
      line-height: 20px;
      padding:5px 0;
      text-align: center;
      background: #9a7a4b;
      border: none; 
      float: left;
      border-left: solid 1px rgba(230, 222,210, .5);
      border-right: solid 1px rgba(230, 222,210, .5);
      color: #fff;
      display: block;
      max-width: 214px;
      width: 51%;
      &.btn-disabled{
        opacity: .5;
        cursor: default;
      }
    }
    a{
      color: #9a7b4c;
      font-weight: 300;
      &.more{
        font-size: 14px;
        float: right;
        margin-top:7px;
      }
    }
  }
  .success,.error{
    display: block;
    border:solid 2px #9a7b4c;
    font-size: 16px;
    font-weight: 500;
    width: 274px;
    text-align: center;
    background: rgba(255,255,255,.7);
    line-height: 30px;
    padding:10px;
  }
  .success{
    color:#7b9a4c;
    margin:50px auto;
  }
  .error{
    color:#ff4c6b;
    margin: 15px auto -20px;
  }
}

#fancybox-title {
  display: none!important;
}
#fancybox-overlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1!important;
}
#fancybox-wrap {
  width: auto!important;
  padding-left: 0;
}
#fancybox-outer {
  border-radius: 0!important;
  background: none!important;
  box-shadow: none!important;
  -webkit-box-shadow: none!important;
  -moz-box-shadow: none!important;
}
#fancybox-content {
  border: 0!important;
  border-radius: 0!important;
  width: auto!important;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
#fancybox-left,
#fancybox-right {
  display: none!important;
}
.fancy-modal {
  background: url(../../images/ai/imperial/modal-bg.png) no-repeat right bottom #fff;
  box-shadow: inset 0 0 1px 1px #9d9c9c;
  max-width: 790px;
  width:100%;
  border-radius: 10px;
  min-height: 381px;
  padding-top: 100px;
  padding-left: 78px;
  box-sizing: border-box!important;
  .mod-heading {
    font-size: 14px;
    line-height: 16px;
    margin: 0;
    color: #231f20;
    text-transform: uppercase;
    margin-bottom: 30px;
    max-width: 450px;
    padding-right: 35px;
    .hor-line{
      display: block;
      margin-left:-26px;
      top: 20px;
      background: #9a7a4b;
    }
    .square-icon{
      width:13px;
      height: 14px;
      top:11px;
      left:3px;
      position: relative;
      float: right;
      background: url(../../images/ai/imperial/ul-black-ic.png) no-repeat center;
    }
  }
  .mod-content {
    color: #000;
    line-height: 24px;
    padding-right: 70px;
    padding-bottom: 125px;
    p {
      font-size: 14px;
      line-height: 16px;
      font-weight: 300;
      a {
        text-decoration: underline;
        color: #ec008c;
        &:hover {
          text-decoration: none;
        }
      }
    }
    h3{
      font-size: 14px;
      line-height: 16px;
      color: #9a7b4c;
      font-weight: 500;
      margin-bottom: 10px;
      margin-top: 20px;
    }
  }
}
#fancybox-close {
  background: transparent url(../../images/ai/imperial/modal-close.png) no-repeat center;
  width: 42px;
  height: 42px;
  top: 32px;
  right: 36px;
  opacity: .7;
  &:hover {
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .bg-top{
    padding-left: 20px;
  }
}

@media (max-width: 870px) {
  .bg-top{
    .main-heading{
      font-size: 44px;
    }
    .description{
      margin-left: 3px;
    }
    .advantages{
      .advantage-item{
        padding: 0 2%;
        .number{
          font-size: 28px;
          font-weight: 300;
        }
        .unit{
          font-weight: 300;
          font-size: 13px;
        }
        .note{
          .hor-line{
            width: 20px;
          }
          .text{
            font-weight: 300;
            font-size: 13px;
            width: 100%;
            padding-left: 30px;
            margin-left: -30px;
          }
        }
        &.item-1,&.item-3{
          padding: 0 2%;
        }
      }
    }
  }   
  .white-bg,.black-bg{
    .left-part{
      padding-left: 0;
      .note{
        .hor-line{
          &.line-2{
            width: 49px;
          }
        }
      }
    }
  }
  &.block-4{
    .left-part{
      .note{
        .hor-line{
          &.line-2{
            width: 110px;
          }
        }
      }
    }
  }   
}

@media (max-width: /*400*/768px) {
  .bg-top{
    padding-left: 0;
    background-position-x: 65%;
    background-size: cover;
    .container{
      padding: 0;
    }
    .main-heading{
      padding-left: 40px;
    }
    .description{
      margin-left: 43px;
      margin-top: 10px;
      .hor-line{
        margin-right: 6px;
      }
    }
    .advantages{
      margin: 14px 0;
      font-size: 0;
      display: block;
      .advantage-item{
        float:right;
        margin-bottom: 9px;
        width: 50%;
        //max-width: 300px;
        vertical-align: top;
        padding: 0!important;
        height: auto;
        .bg-wrap{
          padding-top: 12px;
          height: 60px;
          background: #9a7a4b;
          padding-left: 16px;
        }
        &:nth-child(odd) {
          float:left;
          clear:right;
          .bg-wrap{
            padding-top: 15px;
          }
          border-right:solid 4.5px transparent;
        }
        &:nth-child(even) {
          border-left:solid 4.5px transparent;
          /*text-align: right;         
          .note{
            text-align: right; 
            .text{
              width: auto;
            }
          }*/
        }
        &.item-3{
          .bg-wrap{
            background:linear-gradient(-45deg, transparent 13px, #9a7a4b 0);
          }
        }
        &.item-4{
          .bg-wrap{
            background:linear-gradient(45deg, transparent 13px, #9a7a4b 0);
          }
        }
        .number{
          margin-left: 8px;
          color:#fff;
        }
        .unit{
          font-size: 11px;
          color:#fff;
        }
        .note{
          margin-bottom: 15px;  
          margin-top: -3px;
          .hor-line{
            margin-left: 0;
            vertical-align: top;
            top:4px;
            background-color: #fff;
            height: 1px;
            border: none;
            box-shadow: 0 0 0px 1px rgba(205, 189, 165, .7);
          }
          .text{
            padding-left: 47px;
            margin-left: -54px;
            font-size: 9px;
            line-height: 9px;
            color:#231f20;
            vertical-align: top;
          }
        } 
      }
    } 
  }

  .white-bg,.black-bg{
    .container{
      padding-right: 5px;
      min-height: 390px;
    }
    .square-ic{
      background-size: 79%!important;
      margin-top: -30px;
      position: relative;
      left:-5px;
      &#scroll-down{
        margin-top:-26px;
      }
    }
    .counter{
      font-size: 14px;
      margin-top: 3px;
      margin-right: 12px;
    }
    .left-part{
      padding-top: 0;
      padding-left: 25px;
      .number{
        font-size: 28px;
        margin-right: 3px;
      }
      .unit{
        font-size: 12px;
      }
      .note{
        margin-top: -3px;
        .hor-line{
          top:5px;
          &.line-1{
            margin-left: -40px;
            margin-right: 3px;
          }
          &.line-2{
            margin-left: 3px;
            margin-right: 0;
            width:109px;
          }
        }
        .text{
          font-size: 11px;
          line-height: 11px;
        }
      }
      .icon{
        margin-top: -17px;
      }
    }
    .right-part{
      padding-left: 27px;
      .heading{
        padding-right: 15px;
        margin-top: 23px;
        margin-bottom: 15px;
        font-size: 12px;
        line-height: 14px;
      }
      ul{
        margin-top: 15px;
        li{
          font-size: 12px;
          line-height: 14px;
          margin-bottom: 10px;
          padding-left: 23px;
          padding-right: 15px;
        }
      }
    }
  }
  .block-3{
    .left-part{
      .note{
        .hor-line{
          &.line-2{
            width:69px;
          }
        }
      }
    }
  }
  .block-4{
    .left-part{
      .note{
        .hor-line{
          &.line-2{
            margin-left: -83px;
            width:143px;
          }
        }
      }
    }
  }   
  .block-7{
    .container{
      background: none;
    }
  }
}

@media (max-width: 670px) {
  .bg-top{
    height: auto;
    .main-heading{
      margin-top: 250px;
    }
    .description{
      font-size: 12.5px;
      margin-top: 5px;
      .hor-line{
        top:-3px;
        width: 22px;
      }
    }
  }
  .white-bg, .black-bg{
    .left-part,.right-part{
      width: 100%;
    }
  }
}

@media (max-width: 550px) {
  .block-1{
    .container{
      background-position-x: center;
      background-size: 87%;
    }
    .counter{
      margin-top: -3px;
    }
  }
  .block-2{
    .container{
      background-position: center 10%;
      background-size: 95%;
    }
  }
  .block-3{
    .container{
      background-position-x: center;
      background-size: 82%;
    }
  }
  .block-4{
    .container{
      background-position-x: center;
      background-size: 82%;
    }
    .left-part{
      .note{
        .hor-line{
          &.line-2{
            margin-left: -83px;
            width:129px;
          }
        }  
      }
    }
  }
  .block-5{
    .container{
      background-position-x: center;
      background-size: 50%;
    }
  }
  .block-6{
    .container{
      .thirds{
        width: 100%;
      }
    } 
  } 
}

@media (max-width: 400px) {
  .block-6{
    .container{
      padding-bottom: 20px;
      h2.heading{
        padding-left: 30px;
        max-width: 230px;
        font-size: 12px;
        line-height: 14px;
        .hor-line{
          margin-left: -45px;
          top:5px;
        }
        .square-icon{
          top:-3px;
        }
      }
      .thirds{
        text-align: left;
        padding: 0 5px;
        .icon{
          width:48px;
          float: left;
          margin-right: 9px;
        }
        .hor-line{
          display: none;
        }
        h3.heading{
          float: left;
          font-size: 12px;
          line-height: 14px;
          margin-bottom: 9px;
        }
        .description{
          float: left;
          width: 80%;
          font-size: 12px;
          line-height: 14px;
        }
      }
    }
  }
  .block-7{
    .container{
      background-position-x: center;
      background-position-y: 23px;
      background-size: 99%;
      min-height: 340px;
    }
    #order-form{
      min-width: 274px;
      width: 90%;
      .heading{
        width:85%;
        font-size: 12px;
        line-height: 14px;
        margin: 35px auto 10px;
      }
      input[type="text"],input[type="tel"]{
        line-height: 14px;
        padding-top: 10px;
        padding-left: 48px;
        background-position-x: 16px;
        height: 25px;
        vertical-align: bottom
      }
      label{
        font-size: 12px;
        line-height: 16px;
        width:210px;
        .big{
          font-size: 14px;
        }
      }
      .input-send{
        width: 204px;
        margin: 0 auto;
        display: block;
        padding: 9px 0;
        float:none;
      }
      a.more{
        text-align: center;
        float: none;
        display: block;
        font-size: 12px;
        margin-top: 15px;
      }
    }
  }
  .fancy-modal{
    padding-left: 25px;
    .mod-content{
      padding-right: 25px;
    }
  }
}

html {
  &:before {
    content:"";
    display: block;
    position:absolute;
    z-index:-1;
    width:100%;
    height:650px;
    background-color: #000;
  }
}
.header-menu {
  .iconed-menu-block .icon {
    background: url(../../images/ai/imperial/black/topmenu-cliparts.png) 50% 0 no-repeat;
    background-size: 100%;
    .desc {
      color: #fff;
    }
    &.icon-menu-lk:hover {
      //background-position-y: -356px;
      background-position-y: -355px;
    }
    &.icon-menu-office:hover {
      //background-position-y: -430px;
      background-position-y: -426px;
    }
    &.icon-menu-where-buy:hover {
      // background-position-y: -502px;
      background-position-y: -499px;
    }
    &.icon-menu-pay:hover {
      //background-position-y: -574px;
      background-position-y: -569px;
    }
    &.icon-menu-number:hover {
      // background-position-y: -648px;
      background-position-y: -639px;
    }
  }
  .contacts-block .contact-desc {
    color: #a9a9a9;
  }
  .contact-phone {
    color:#fff;
  }
}

.menu.main-menu-tabbed{
  .main-menu-header{
    .main-menu-header-title{
      color:#fff;
    }
  }
  .main-menu-nav > li > a{
    color:#fff;
    &:focus,&:hover{
      background-color: rgba(255,255,255,.2);
    }
  }
}  

.btn-collaps-menu{
  .btn-collaps-menu-hor-bar{
    background-color:#fff;
  }
}