@font-face {
  font-family: 'latoblack';
  src: url('../../fonts/lato-black-webfont.woff2') format('woff2'),
       url('../../fonts/lato-black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'latobold';
  src: url('../../fonts/lato-bold-webfont.woff2') format('woff2'),
       url('../../fonts/lato-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'latoheavy';
  src: url('../../fonts/lato-heavy-webfont.woff2') format('woff2'),
       url('../../fonts/lato-heavy-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'latolight';
  src: url('../../fonts/lato-light-webfont.woff2') format('woff2'),
       url('../../fonts/lato-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'latosemibold';
  src: url('../../fonts/lato-semibold-webfont.woff2') format('woff2'),
       url('../../fonts/lato-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'latoregular';
  src: url('../../fonts/lato-regular-webfont.eot');
  src: url('../../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/lato-regular-webfont.woff2') format('woff2'),
       url('../../fonts/lato-regular-webfont.woff') format('woff'),
       url('../../fonts/lato-regular-webfont.ttf') format('truetype'),
       url('../../fonts/lato-regular-webfont.svg#latoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.container{
  width:980px;
}
.content{
  font-family: latolight, Arial, Helvetica, sans-serif;
  line-height: 1.2;
  margin-bottom:20px;
}

.top-block{
  background: url(../../images/ai/internet_na_vse/top-bg.jpg) no-repeat center 80px #414042;
  height:730px;
  .main-heading{
    color:#fff;
    font-size: 0;
    padding-top: 130px;
    float: right;
    width: 435px;
    margin-bottom: 65px;
    .color-yellow{
      color:#ffc50a;
      font-size: 77px;
      font-family: latoblack, Arial, Helvetica, sans-serif;
      display: block;
      line-height: 77px;
    }
    .color-orange{
      font-family: latoheavy, Arial, Helvetica, sans-serif;
      font-size: 113px;
      line-height: 113px;
      color:#f48120;
      display: block;
    }
    .small{
      display: block;
      font-size: 16px;
      line-height: 38px;
      margin-top: -7px;
      margin-left: 4px;
      .big{
        font-family: latoheavy, Arial, Helvetica, sans-serif;
        font-size: 36px;
        line-height: 38px;
      }
    }
  }
  .options{
    float: right;
    width: 435px;
    padding-left: 10px;
    li{
      color: #fff;
      font-family: latobold, Arial, Helvetica, sans-serif;
      font-size: 35px;
      background: url(../../images/ai/internet_na_vse/ul-pointer.png) no-repeat left 3px;
      list-style: none;
      padding-left: 40px;
      line-height: 37px;
      margin-bottom: 23px;
      .note{
        display: block;
        font-family: latolight, Arial, Helvetica, sans-serif;
        font-size: 15px;
        line-height: 1;
      }
    }
  }
  
  .scroll-down{
    font-size: 12px;
    color: #d1d3d4;
    text-decoration: none;
    padding-bottom: 17px;
    float: right;
    margin-top: 25px;
    margin-right: 180px;
    background: url(../../images/ai/internet_na_vse/arrow-to-down.png) no-repeat center bottom;
  }
}

.logo-line{
  padding: 5px 0;
  margin: 0 auto;
  .container{
    max-width: 880px;
    .logo{
      width:100%;
      max-width: 419px;
      img{
        width:100%;
        height: auto;
      }
    }  
  }
}

.bottom-block{
  background: url(../../images/ai/internet_na_vse/bottom-bg.jpg) no-repeat center top #abb4b9;
  padding-bottom: 50px;
  padding-top: 70px;
  width:100%;
  .container{
    width: 880px;
  }
  .heading{
    font-size: 42px;
    color:#414042;
    font-family: latoblack, Arial, Helvetica, sans-serif;
    margin-bottom: 45px;
    line-height: 1.2;
    .note{
      font-family: latoregular, Arial, Helvetica, sans-serif;
      font-size: 15px;
      display: block;
    }
  }
  .advantages{
    width:100%;
    font-size: 0;
    //margin-bottom: 45px;
    min-height:550px;
    padding-bottom: 30px;
    /*&:before, &:after {
      content: "";  
      height: 62px;
      display: block;  
      position: relative;  
      top:162px;      
      margin-bottom: -62px;
    }
    &:before {  
      width: 43px;  
      margin-left: -43px;
      background: url(../../images/ai/internet_na_vse/shadow-left.png) no-repeat left top;
    }
    &:after {  
      width: 40px;  
      float:right;
      margin-right: -39px;
      background: url(../../images/ai/internet_na_vse/shadow-right.png) no-repeat left top;
    }*/
    .advantage-item{
      vertical-align: top;
      width:20%;
      display: inline-block;
      cursor: pointer;      
      position: relative;
      &:before {  
        content: "";  
        width: 100%;  
        height: 230px;
        margin-bottom:-230px;
        display: block;  
        position: relative;  
        z-index:-99;  
        box-shadow: 39px 16px 47px -35px rgba(90, 90, 90, 0.7);
      }
      .inner{
        position: relative;
        background-position: left top;
        background-repeat: no-repeat;
        padding-right: 22px;
        box-sizing: content-box;
        margin-right: -22px;
        display: block;  
        width: 100%;  
        padding-top: 26px;
      }
      .color-top{       
        height:114px;
        margin-bottom: 21px;
//        margin-top:26px;
        .counter{
          font-family: latobold, Arial, Helvetica, sans-serif;
          font-size: 45px;
          color: rgba(10,11,12,.5);
          display: block;
          text-align: center;
          line-height: 1;
        }
        .line{
          height: 1px;
          background: rgba(10,11,12,.5);
          box-shadow: 0 0 1px 0px rgba(10,11,12,1);
          display: block;
          margin: 0 auto;
          width:55%;
          margin-top: 3px;
          margin-bottom: 7px;
        }
        .label{
          font-family: latosemibold, Arial, Helvetica, sans-serif;
          font-size: 15px;
          color: rgba(10,11,12,.5);
          display: block;
          text-align: center;
          line-height: 17px;
        }
      }
      .advantage-content{
        padding-bottom: 20px;
        background: #fff;
        border-radius: 0 0 26px 26px;
        min-height: 100px;
        padding-top: 20px;
        //border: solid
        border-top:solid 1px rgba(120, 120, 120, 0.5);
        box-shadow: inset 16px 39px 47px -35px rgba(90, 90, 90, 0.6);
        .text{
          font-size: 12px;
          color:#000000;
          //min-height: 170px;
          padding: 10px 15px 20px;
          //max-height: 0;
          transition: max-height .2s ease-in-out;
          font-family: latoregular, Arial, Helvetica, sans-serif;
          overflow: hidden;
        }
        .icon{
          height: 59px;
          display: block;
          width: 100%;
          background-position: center bottom;
          background-repeat: no-repeat;
          transition: background-position .2s ease-in-out;
        }
      }
      &.active{
        .advantage-content{
          .icon{
            background-position: center top;
          }
          .text{
            //max-height: 200px;
          }
        }
      }
      &.item-1{
        z-index: 5;
        .inner{
          background-image: url(../../images/ai/internet_na_vse/advantage-bg-1.png);
        }
        .advantage-content{
          .icon{
            background-image: url(../../images/ai/internet_na_vse/advantage-ic-1.png);
            height: 48px;
          }
        }
      }

      &.item-2{
        z-index: 4;
        .inner{
          background-image: url(../../images/ai/internet_na_vse/advantage-bg-2.png);
        }
        .advantage-content{
          .icon{
            background-image: url(../../images/ai/internet_na_vse/advantage-ic-2.png);
          }
        }
      }

      &.item-3{
        z-index: 3;
        .inner{
          background-image: url(../../images/ai/internet_na_vse/advantage-bg-3.png);
        }
        .advantage-content{
          .icon{
            background-image: url(../../images/ai/internet_na_vse/advantage-ic-3.png);
          }
        }
      }

      &.item-4{
        z-index: 2;
        width: calc(~'20% - 1px');
        .inner{
          background-image: url(../../images/ai/internet_na_vse/advantage-bg-4.png);
        }
        .advantage-content{
          .icon{
            background-image: url(../../images/ai/internet_na_vse/advantage-ic-4.png);
          }
        }
      }

      &.item-5{
        z-index: 1;
        &:before {  
          box-shadow: none;
        }
        .inner{
          background-image: url(../../images/ai/internet_na_vse/advantage-bg-5.png);
          padding-right: 0;
        }
        .advantage-content{
          .icon{
            background-image: url(../../images/ai/internet_na_vse/advantage-ic-5.png);
          }
        }
      }
    }
  }

  .btn-block{
    font-size: 0;    
    .line{
      display: inline-block;
      width:50%;
      position: relative;
      top:-2px;
      .body{
        height: 1px;
        line-height: 1px;
        background: #67696c;
        box-shadow: 0 0 1px 1px #808386;
        display: inline-block;
        width:100%;
      }
      &:first-child{
        padding-right: 117px;
        margin-right:-117px;
      }
      &:last-child{
        padding-left: 117px;
        margin-left:-117px;
      }
    }
    .btn-grey{
      font-size: 15px;
      color: #fff;
      margin:  0 10px;
      background: #414042;
      text-decoration: none;
      border-radius: 6px;
      height:36px;
      display: inline-block;
      line-height: 36px;
      padding: 0 63px; 
      width:214px;
      border-left:solid 1px #84888b;
      border-right:solid 1px #84888b;
    }
  }
}

.offices {
  margin-left:0;
  padding-bottom: 25px;
  background: #fff; /* Old browsers */
  background: -moz-linear-gradient(top,  #ccd1d4 0%, #ffffff 60%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #ccd1d4 0%,#ffffff 60%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #ccd1d4 0%,#ffffff 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccd1d4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  h2{
    font-size:13px;
    font-family: latobold, Arial, Helvetica, sans-serif;
    color:#fff;
    background: #414042;
    border-top:solid 1px #999ea2;
    border-bottom:solid 1px #a9adaf;
    line-height:16px;
    padding: 5px 20px;
    text-align: center;
    margin-bottom:20px;
    margin-top: 0;
  }
  .office {
    height:auto;
    margin:17px auto 1px;
    width:300px;
    float: none;
    padding:0 15px;

    &.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/internet_na_vse/offices_ic_1.png') no-repeat left top;
      }
    }
    &.item2{
      .item-ic{
        background:url('../../images/ai/internet_na_vse/offices_ic_2.png') no-repeat left top;
      }
    }
    &.item3{
      .item-ic{
        background:url('../../images/ai/internet_na_vse/offices_ic_3.png') no-repeat left top;
      }
    }*/
    .item-h {
      font-family: latobold, Arial, Helvetica, sans-serif;
    }
    .item-h,.item-p{
      line-height: 14px;
      font-size:12.5px;
      color:#000;
      display: block;
    }
    .item-p{
      font-family: latolight, Arial, Helvetica, sans-serif;
      margin-top:11px;
    }
    .item-ic{
      display: block;
      float: left;
      clear: left;
      margin-right:25px;
      margin-left:0;
      text-align: center;
      padding-top: 5px;
      margin-bottom: 20px;

      img {
        width: 24px;
      }
    }
    &.item1,&.item2,&.item3{
      .item-ic{
        background-size: 43px;
        width:43px;
        height:53px;
      }
    }
  }
}

@media (max-width: 980px) {
  .container{   
    width:850px!important;
  }
  .top-block{
    background-position: 45% 80px;
    .options{
      width: auto;
      padding-left: 10px;
      li{
        color: #fff;
        font-family: latobold, Arial, Helvetica, sans-serif;
        font-size: 35px;
        background: url(../../images/ai/internet_na_vse/ul-pointer.png) no-repeat left 3px;
        list-style: none;
        padding-left: 40px;
        line-height: 37px;
        margin-bottom: 23px;
        .note{
          display: block;
          font-family: latolight, Arial, Helvetica, sans-serif;
          font-size: 15px;
          line-height: 1;
        }
      }
    }
  }
}

@media (max-width: 880px) {
  .container{
    width:100%!important;
  }
  .top-block{
    background-position: 40% 80px;
    .main-heading{
      padding-top: 50px;
      margin-bottom: 20px;
      text-align: center;
      width: 100%;
      float: none;
      .color-yellow{
        font-size: 55px;
        line-height: 55px;
      }
      .color-orange{
        font-size: 90px;
        line-height: 90px;
      }
    }
    .options{
      padding-right:12.5%;
      li{
        font-size: 25px;
        line-height: 25px;
        margin-bottom: 20px;
        background-image: url(../../images/ai/internet_na_vse/ul-pointer-mob.png);
        background-position: left 1px;
        padding-left: 30px;
        .note{
          font-size: 15px;
        }
      }
    }
    .scroll-down{
      margin-right: 50px;
      margin-top: -10px;
    }
  }
  .bottom-block{
    .advantages{
      .advantage-item{
        .inner{
          background-position: top right;
          border-radius: 26px;
          .color-top{
            .label{
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 767px) {
  .top-block{
    background-position: 30% 80px;
  }
  .bottom-block{
    padding: 35px 0 0 0;
    width: 100%;
    .heading{
      padding: 0 15px;
      margin-bottom:35px;
    }
    .container{
      padding: 0;
      width: 100%;
    }
    .advantages{
      padding: 0;
      width: 100%;
      margin-bottom: 30px;
      min-height: 0;
      box-shadow: 0px -0px 5px 2px rgba(135, 135, 135, .9);
      z-index: 9;
      position: relative;
      .advantage-item{
        height:auto;
        border-radius: 0;
        float: none;
        background: url('../../images/ai/internet_na_vse/mob_steps_bg.jpg') #fff repeat-x 0 0;
        padding-left: 0;
        transition:height .15s ease;
        width:100%;
        &:before{
          display: none;
        }
        .inner{
          padding-top: 9px;
          box-sizing: border-box;
          padding-right:0;
        }
        .color-top {
          margin-bottom: 0;
          height: 80px;
          .counter{
            padding-left:22px;
            width:120px;
            display: inline-block;
          }
          .line{
            display: none;
          } 
          .label{
            margin-left: 15px;
            display: inline-block;
            text-align: left;
            font-size: 12.5px;
            transition: color .15s ease;
          }
        }
        .advantage-content{
          border-radius: 0;
          font-size:13px;
          line-height: 15px;
          color:#6d6e71;
          overflow: hidden;
          padding: 0;
          min-height: 0;
          max-height: 0px;
          transition: .3s;
          padding: 0 50px;
          box-shadow: none;
          border-top:none;
          margin-top: -10px;
          .text{
            font-size: 12px;
            line-height: 12px;
            padding-top:0;
            padding-bottom: 15px;
          }
          .icon{
            margin-bottom: 15px;
          }
        }
        &.item-1{
          background: url('../../images/ai/internet_na_vse/mob_step_1_bg.jpg') repeat-x 0 0px #fff;
          .inner{
            background: url(../../images/ai/internet_na_vse/mob-1.jpg) no-repeat 20px 0px;
          }
          .advantage-content{
            .icon{
              background-size: 34px;
              height: 31px;
            }
          }
        }
        &.item-2{
          .inner{
            background: url(../../images/ai/internet_na_vse/mob-2.jpg) no-repeat 20px top;
          }
          .advantage-content{
            .icon{
              background-size: 27px;
              height: 36px;
            }
          }
        }
        &.item-3{
          .inner{
            background: url(../../images/ai/internet_na_vse/mob-3.jpg) no-repeat 20px top;
          }
          .advantage-content{
            .icon{
              background-size: 37px;
              height: 36px;
            }
          }
        }
        &.item-4{
          width: 100%;
          .inner{
            background: url(../../images/ai/internet_na_vse/mob-4.jpg) no-repeat 20px top;
          }
          .advantage-content{
            .icon{
              background-size: 41px;
              height: 41px;
            }
          }
        }
        &.item-5{
          .inner{
            background: url(../../images/ai/internet_na_vse/mob-5.jpg) no-repeat 20px top;
          }
          .advantage-content{
            .icon{
              background-size: 35px;
              height: 34px;
            }
          }
        }
        &.active{
          .advantage-content{
            max-height: 300px;
          }
          &.item-1{
            .color-top {
              .label{
                color:#f4811f;
              }
            }
          }
          &.item-2{
            .color-top {
              .label{
                color:#c74298;
              }
            }
          }
          &.item-3{
            .color-top {
              .label{
                color:#594b97;
              }
            }
          }
          &.item-4{
            .color-top {
              .label{
                color:#0ba0bf;
              }
            }
          }
          &.item-5{
            .color-top {
              .label{
                color:#72bf41;
              }
            }
          }
        }
      }
    }
    .btn-block{
      padding: 0 20px 30px; 
    }
  }
}

@media (max-width: 650px) {
  .top-block{
    background-position: 30% 80px;
    .scroll-down{
      margin-right: 10px;
    }
  }
}

@media (max-width: 500px) {
  .top-block{
    background-position: 29% bottom;
    background-size: auto 79%;
    height:534px;
    .main-heading{
      padding-top: 67px;
      margin-bottom: 30px;
      .color-yellow{
        font-size: 42px;
        line-height: 42px;
      }
      .color-orange{
        font-size: 62px;
        line-height: 62px;
      }
      .small{
        font-size: 9px;
        line-height: 25px;
        .big{
          font-size: 21px;
          line-height: 25px;
        }
      }
    }
    .options{
      float: none;
      margin-left:12.5%;
      padding-right: 0;
      li{
        font-size: 21px;
        line-height: 21px;
        margin-bottom: 15px;
        padding-left: 20px;
        .note{
          font-size: 9px;
        }
      }
    }
    .scroll-down{
     display: none;
    }
  }
  .bottom-block{
    padding-top: 20px;
    width:100%;
    .heading{
      font-size: 25px;
      margin-bottom: 20px;
      line-height: 1.2;
      text-align: center;
      .note{
        font-size: 12.5px;
      }
    }
  }
}

@media (max-width: 370px) {
  .top-block{
    background-image: url(../../images/ai/internet_na_vse/top-bg-mob.jpg);
    background-position: center top;
    background-size: auto;
  }
  .logo-line{
    padding: 2px 0;
    .container{
      text-align: center;
      .logo{
        width: 218px;
      }
    }
  }
  .bottom-block{
    background-image:url(../../images/ai/internet_na_vse/bottom-bg-mob.jpg);
    background-color: #b4bcc0;
    .advantages{
      margin-bottom: 0;
    }
    .btn-block{
      padding: 30px 10px;
      background:url(../../images/ai/internet_na_vse/bottom-bg-mob.jpg) top center;
    }
  }
}