.animate-section {
  @include xlii-screen {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  &__el {
    display: none;
    z-index: -1;
    @include xlii-screen {
      display: block;
    }
    &-is {
      @include xlii-screen {
        position: absolute;
        z-index: -1;
      }
    }
  }

  &--about {
    &-1 {
      @include xlii-screen {
        top: 200px;
        animation: topRight 20s linear infinite;
      }
    }
    &-2 {
      @include xlii-screen {
        top: 150px;
        right: 200px;
        animation: topLeft 20s linear infinite;
      }
    }
    &-3 {
      @include xlii-screen {
        top: 350px;
        right: 200px;
        animation: circlerotate 15s linear infinite;
      }
    }
  }
  &--calculate {
    &-1 {
      @include xlii-screen {
        top: 115px;
        left: -180px;
      }
    }
  }
  &--feature {
    &-1 {
      @include xlii-screen {
        top: 200px;
        left: 67px;
        animation: rotates 25s linear infinite;
      }
    }
    &-2 {
      @include xlii-screen {
        bottom: 30px;
        left: -40px;
        
      }
    }
    &-3 {
      @include xlii-screen {
        top: 80px;
        left: 200px;
        animation: circlerotate 15s linear infinite;
      }
    }
    &-4 {
      @include xlii-screen {
        top: 216px;
        right: 200px;
        animation: rotates 15s linear infinite;
      }
    }
    &-5 {
      @include xlii-screen {
        top: 150px;
        right: 100px;
        animation: topRight 15s linear infinite;
      }
    }
    &-6 {
      @include xlii-screen {
        bottom: 85px;
        right: 100px;
        animation: topLeft 15s linear infinite;
      }
    }
  }
}
