//@import "jquery.fancybox-1.3.4.less";

@font-face {
  font-family: 'akrobatregular';
  src: url('../../fonts/akrobat-regular-webfont.eot');
  src: url('../../fonts/akrobat-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/akrobat-regular-webfont.woff2') format('woff2'),
  url('../../fonts/akrobat-regular-webfont.woff') format('woff'),
  url('../../fonts/akrobat-regular-webfont.ttf') format('truetype'),
  url('../../fonts/akrobat-regular-webfont.svg#akrobatregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.container{
  width:980px;
}
.content{
  background: url(../../images/ai/mnp_/bg.jpg) no-repeat top center;
  min-width:980px;
}
.marked,a.marked{
  color:#ec008c;
  text-decoration: none;
  &:hover{
    text-decoration:underline;
  }
}
.top-heading{
  height:142px;
  text-align: center;
  padding-top: 19px;
  img{
    width:100%;
    height: auto;
    max-width:482px;
  }
}
.steps{
  list-style: none;
  margin:0;
  padding:0;
  min-height:578px;
  margin-left:-5px;
  li{
    margin:0;
    padding:0;
    display:block;
    height:555px;
    float: left;
    /*background: url(../../images/ai/mnp_/step_shadow.png) no-repeat bottom left;*/
    .step-modal{
      display:block;
      height:555px;
      font-size: 16px;
      transition:margin .3s ease;
      text-align: center;
      color:#000;
      text-decoration: none;
      padding-top:370px;
      font-family: 'akrobatregular';
      padding-right:23px;
      line-height:19px;
      &:hover{
        margin-top:-20px;
      }
    }
    &.step1{
      width:162px;
      .step-modal{
        background: url(../../images/ai/mnp_/step-1.png) no-repeat top center;
      }
    }
    &.step2{
      width:163px;
      .step-modal{
        background: url(../../images/ai/mnp_/step-2.png) no-repeat top center;
      }
    }
    &.step3{
      width:164px;
      .step-modal{
        background: url(../../images/ai/mnp_/step-3.png) no-repeat top center;
      }
    }
    &.step4{
      width:163px;
      .step-modal{
        background: url(../../images/ai/mnp_/step-4.png) no-repeat top center;
      }
    }
    &.step5{
      width:162px;
      .step-modal{
        background: url(../../images/ai/mnp_/step-5.png) no-repeat top center;
      }
    }
    &.step6{
      width:141px;
      .step-modal{
        padding-right:0;
        background: url(../../images/ai/mnp_/step-6.png) no-repeat top center;
      }
    }
  }
}

.your-scope h1,
.offices h1,
.your-scope h2,
.offices h2 {
  font-size:22px;
  color:#ec008c;
  font-family: 'akrobatregular';
  text-align: center;
  margin-top:25px;
}
.your-scope{
  .half-width{
    width:50%;
  }
  .scope-item{
    font-family: 'akrobatregular';
    padding-left:135px;
    min-height:129px;
    float:left;
    .item-h{
      font-size:20px;
      color:#231f20;
      font-weight:bold;
      margin-top:10px;
      text-transform: uppercase;
    }
    .item-p{
      font-size:18px;
      line-height:18px;
      color:#000;
      margin-bottom:0;
    }
    &.item1{
      background:url('../../images/ai/mnp_/scope_ic_1.png') no-repeat 38px 25%;
    }
    &.item2{
      background:url('../../images/ai/mnp_/scope_ic_2.png') no-repeat 38px 25%;
    }
    &.item3{
      background:url('../../images/ai/mnp_/scope_ic_3.png') no-repeat 38px 25%;
    }
    &.item4{
      background:url('../../images/ai/mnp_/scope_ic_4.png') no-repeat 38px 25%;
    }
  }
}
.bottom-bg{
  background:url('../../images/ai/mnp_/bottom_bg.jpg') no-repeat top center;
  padding-top:2px;
  max-height:204px;
  margin-bottom:9px;
}
.offices{
  margin-left:-19px;
  font-family: 'akrobatregular';
  .office{
    width:306px;
    //height:105px;
    float:left;
    margin-left:17px;
    padding-top:17px;
    padding-right:13px;
    margin-bottom:28px;
    margin-top:10px;
    //background:url('../../images/ai/mnp_/offices_bg.png') no-repeat center;

    border: 2px solid white;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);

    &.item-lime{
      .item-ic{
        background:url('../../images/ai/mnp_/offices_ic_lime.png') no-repeat left top;
      }
    }
    &.item-pink {
      .item-ic {
        background:url('../../images/ai/mnp_/offices_ic_pink.png') no-repeat left top;
      }
    }
    /*&.item1{
      .item-ic{
        background:url('../../images/ai/mnp_/offices_ic_1.png') no-repeat left top;
      }
    }
    &.item2{
      .item-ic{
        background:url('../../images/ai/mnp_/offices_ic_2.png') no-repeat left top;
      }
    }
    &.item3{
      .item-ic{
        background:url('../../images/ai/mnp_/offices_ic_3.png') no-repeat left top;
      }
    }*/
    .item-ic{
      display: block;
      width: 65px;
      height:80px;
      float: left;
      clear: left;
      margin-left:19px;
      margin-right:13px;
      text-align: center;
      padding-top: 9px;
      margin-bottom: 20px;
    }
    .item-h{
      font-size: 16px;
      color:#000;
      display: block;
    }
    .item-p{
      display: block;
      margin-top:5px;
      font-size: 16px;
      color:#000;
      line-height: 19px;
    }
  }
}

#fancybox-wrap{
  width:auto!important;
}
#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;
}
#fancybox-left,#fancybox-right{display: none!important;}
.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;
}
.fancy-modal{
  font-family: 'akrobatregular';
  background: rgba(255,255,255,.85);
  /*box-shadow: inset 0 0 1px 1px #d6d6d6;*/
  width:850px;
  height: 445px;
  border-radius: 11px;
  .left-panel{
    width:88px;
    height: 325px;
    width:69px;
    float: left;
    margin-right:52px;
    margin-top:60px;
    box-shadow: 36px 0px 17px -32px rgba(50, 50, 50, 0.75);
  }
 .mod-heading{
    padding-top:80px;
    font-size:21px;
    line-height:25px;
  }
  .mod-content{
    font-size: 16px;
    color:#231f20;
    line-height: 18px;
    height:197px;
    padding-right:135px;
    margin-bottom:-45px;
    p{
      margin-top:15px;
    }
  }
  .link-back,.link-next{
    font-size: 21px;
    font-family: 'bebasNeue';
    .big{
      font-size: 75px;
    }
  }
  .link-back{
    color:#bcbec0;
    padding-left:40px;
    line-height: 80px;
    display: block;
    float:right;
    padding-right:10px;
    margin-top:17px;
    background: url('../../images/ai/mnp_/arrow_prev.png') no-repeat left 25px;
    &:hover{
      color:#000;
    }
  }
  .link-sep{
    line-height:57px;
    height:57px;
    border:solid 1px #bbbdc0;
    box-shadow: 0 0 1px 1px #e0e0e1;
    display: block;
    float:right;
    margin:28px 30px 0;
  }
  .link-next{
    width:133px;
    height:113px;
    display: block;
    float: right;
    padding-top:4px;
    .shadow{
      margin-top: -4px;
      box-shadow: -25px 0px 16px -24px rgba(50, 50, 50, 0.75);
      float: right;
      height:113px;
      width:58px;
    }
  }
  &#modal-step1{
    .mod-heading{
      color:#ee4036;
    }
    .left-panel{
      background: url('../../images/ai/mnp_/modal_left_1.png') no-repeat left center;
    }
    .link-next {
      color: #90278e;
      .shadow {
        background: url('../../images/ai/mnp_/modal_right_1.png') no-repeat right center;
      }
    }
  }
  &#modal-step2{
    .mod-heading{
      color:#90278e;
    }
    .left-panel{
      background: url('../../images/ai/mnp_/modal_left_2.png') no-repeat left center;
    }
    .link-next {
      color: #652d90;
      .shadow {
        background: url('../../images/ai/mnp_/modal_right_2.png') no-repeat right center;
      }
    }
  }
  &#modal-step3{
    .mod-heading{
      color:#652d90;
    }
    .left-panel{
      background: url('../../images/ai/mnp_/modal_left_3.png') no-repeat left center;
    }
    .link-next {
      color: #008595;
      .shadow {
        background: url('../../images/ai/mnp_/modal_right_3.png') no-repeat right center;
      }
    }
  }
  &#modal-step4{
    .mod-heading{
      color:#008595;
    }
    .left-panel{
      background: url('../../images/ai/mnp_/modal_left_4.png') no-repeat left center;
    }
    .link-next{
      color:#469a3b;
      .shadow{
        background: url('../../images/ai/mnp_/modal_right_4.png') no-repeat right center;
      }
    }
  }
  &#modal-step5{
    .mod-heading{
      color:#469a3b;
    }
    .left-panel{
      background: url('../../images/ai/mnp_/modal_left_5.png') no-repeat left center;
    }
    .link-next{
      color:#9c0756;
      .shadow{
        background: url('../../images/ai/mnp_/modal_right_5.png') no-repeat right center;
      }
    }
  }
  &#modal-step6{
    .mod-heading{
      color:#9c0756;
    }
    .left-panel{
      background: url('../../images/ai/mnp_/modal_left_6.png') no-repeat left center;
    }
    .link-next {
      color: #ec008c;
      width: 400px;
      .last{
        float: right;
        line-height: 25px;
        margin-top:30px;
        padding-right: 14px;
        text-align: right;
      }
      .shadow {
        background: url('../../images/ai/mnp_/modal_right_6.png') no-repeat right center;
        cursor:pointer;
      }
    }
  }
}


@media (max-width: 990px) {
  .container{
    width:auto;
  }
  .content{
    min-width:0;
    background: url(../../images/ai/mnp_/mob_top_bg.jpg) no-repeat top center;
  }
  .top-heading{
    padding:38px 5px 30px 10px;
    height:auto;
    max-height:116px;
    img{
      width:100%;
      height: auto;
      max-width:280px;
    }
  }
  .steps{
    margin:0 -15px;
    min-height: 0;
    box-shadow: 0px 0px 3px 3px rgba(190, 190, 190, 0.75);
    li{
      height:auto;
      float: none;
      background: url('../../images/ai/mnp_/mob_steps_bg.jpg') repeat-x 0 1px;
      padding-left: 35px;
      &.active a{
        color:#652d90;
      }
      transition:height .3s ease;
      .mod-content{
        display: none;
        padding:0 35px 2px 0px;
        font-size:13px;
        line-height: 15px;
        color:#6d6e71;
      }
      .step-modal{
        height:80px;
        font-size: 13px;
        color:#231f20;
        line-height:16px;
        text-align: left;
        padding-top:25px;
        padding-right:0;
        padding-left: 144px;
        margin-left:-35px;
        &:hover{
          margin-top:0;
        }
      }
      &.step1{
        width:100%;
        background: url('../../images/ai/mnp_/mob_step_1_bg.jpg') repeat-x 0 0px;
        .step-modal{
          background: url(../../images/ai/mnp_/mob_step_1.jpg) no-repeat 20px 0px;
        }
      }
      &.step2{
        width:100%;
        .step-modal{
          background: url(../../images/ai/mnp_/mob_step_2.jpg) no-repeat 20px top;
        }
      }
      &.step3{
        width:100%;
        .step-modal{
          background: url(../../images/ai/mnp_/mob_step_3.jpg) no-repeat 20px top;
        }
      }
      &.step4{
        width:100%;
        .step-modal{
          background: url(../../images/ai/mnp_/mob_step_4.jpg) no-repeat 20px top;
        }
      }
      &.step5{
        width:100%;
        .step-modal{
          background: url(../../images/ai/mnp_/mob_step_5.jpg) no-repeat 20px top;
        }
      }
      &.step6{
        width:100%;
        .step-modal{
          padding-right:0;
          background: url(../../images/ai/mnp_/mob_step_6.jpg) no-repeat 20px top;
        }
      }
    }
  }

  .your-scope h1,
  .offices h1 ,
  .your-scope h2,
  .offices h2 {
    font-size:13px;
    color:#fff;
    background: #eb008b;
    border-top:solid 1px #f57fc5;
    border-bottom:solid 1px #f57fc5;
    font-weight: bold;
    line-height:28px;
    margin:0 -15px;
  }

  .your-scope {
    h1, h2 {
      margin-bottom:21px;
    }
    .half-width {
      width: 100%;
    }
    .scope-item{
      padding-top:70px;
      padding-left:0;
      min-height:0;
      float:none;
      margin-bottom:20px;
      .item-h{
        text-align: center;
        font-size:13px;
        line-height:15px;
        font-weight:bold;
        margin-top:4px;
        margin-bottom:10px;
      }
      .item-p{
        text-align: center;
        font-size:14px;
        line-height:14px;
        margin-bottom:0;
      }
      &.item1{
        background:url('../../images/ai/mnp_/mob_scope_1.jpg') no-repeat center top;
      }
      &.item2{
        background:url('../../images/ai/mnp_/mob_scope_2.jpg') no-repeat center top;
      }
      &.item3{
        background:url('../../images/ai/mnp_/mob_scope_3.jpg') no-repeat center top;
      }
      &.item4{
        background:url('../../images/ai/mnp_/mob_scope_4.jpg') no-repeat center top;
      }
    }
  }

  .bottom-bg{
    background: url('../../images/ai/mnp_/mob_bottom_bg.jpg') no-repeat center 30px;
    padding-top:0;
    max-height:none;
  }
  .offices {
    margin-left:0;
    padding-bottom: 25px;
    .office {
      background: none;
      height:auto;
      margin:17px 0 1px 0;
      margin:17px auto 1px;
      width:100%;
      width:300px;
      float: none;
      padding:0 15px;
      border: none;
      border-radius: 0;

      .item-h {
        font-weight: bold;
      }
      .item-h,.item-p{
        line-height: 14px;
        font-size:13px;
        color:#000;
      }
      .item-p{
        margin-top:11px;
      }
      .item-ic{
        margin-right:20px;
        margin-left:0;
        padding-top: 5px;
        img {
          width: 24px;
        }
      }
      &.item1,&.item2,&.item3{
        .item-ic{
          background-size: 43px;
          width:43px;
          height:53px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .steps{
    li {
      .mod-content {
        font-size: 12px;
      }
    }
  }
  .your-scope{
    .scope-item{
      .item-p{
        font-size:13px;
      }
    }
  }
}