animation-el.less

@import 'gearbox';
@import 'linechart';
@import 'iphone';

.animated_blocks{
  margin-top: 50px;
  /*margin-right: 50px;
  margin-left: 50px;*/
  height: 260px;
  //border: 1px solid red;
}

.animated_blocks section{
  float: left;
  width: 33.33333%;
  position: relative;
  height: 260px;
  .feature-title{
    font-size: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    span{
      display: inline;
      position: relative;
      &:before{
        content: attr(data-item);
        position: absolute;
        left: -50px;
        width: 38px;
        height: 38px;
        font-size: 18px;
        line-height: 38px;
        text-align: center;
        background-color: #113c75;
        border-radius: 50%;
      }
    }
  }

  .gearbox,
  .linechart,
  .iphone{
    margin: 0 auto;
  }
  .linechart{
    top: 15px;
  }
}
@media (max-width: 700px){
  #two{
    height: auto!important;

  }
  .animated_blocks{
    margin: 0;
    height: auto;

    section .feature-title{
      opacity: 1;
      padding-left: 50px;
    }
  }
  .animated_blocks section{
    margin: 0 0 30px;
    padding-bottom: 70px;
    height: 230px;
    float: none;
    width: 100%;
    opacity: 1;
  }

  .linechart{
    .bar{
      width: 52px;
    }
    .bar-1{border-bottom-left-radius: 12px;}
    .bar-3{border-bottom-right-radius: 12px;}
    .dot{
      opacity: 1;
    }
    .dot-1{
      width: 14px;
      height: 14px;
      top: 35px;
      left: -7px;
    }
    .dot-2{
      width: 22px;
      height: 22px;
      top: 10px;
      left: 41px;
    }
    .dot-3{
      width: 12px;
      height: 12px;
      top: 52px;
      left: 97px;
    }
    .dot-4{
      width: 20px;
      height: 20px;
      top: -10px;
      left: 145px;
    }
    .magnifier{
      opacity: 1;
    }
  }
  .linecharts .feature-title{
    opacity: 1;
  }
  .iphone{
    opacity: 1;
    .star-1,
    .star-2,
    .star-3,
    .star-4,
    .star-5{
      top: 72px;
      opacity: 1;
    }
    .star-1{
      left: 9px;
    }
    .star-2{
      left: 27px;
    }
    .star-3{
      left: 45px;
    }
    .star-4{
      left: 63px;
    }
    .star-5{
      left: 81px;
    }
    .medal{
      width: 58px;
      height: 72px;
      opacity: 1;
    }
  }
}