.tcgelements-line-circles-animation{
  position: relative;
  .line{
    position: relative;
    background-color: #111;
  }
  .circle1{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #111;
    z-index: 2;
    animation-delay: -0.5s;
  }
  .circle2{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #111;
    border: 1px solid #111;
  }
  &.horizontal{
    width: 195px;
    height: 50px;
    max-width: 100%;
    display: flex;
    align-items: center;
    .line{
      width: 100%;
      height: 1px;
    }
    .circle1{
      right: 60px;
      top: 0;
      z-index: 2;
      animation: slide-right 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate both;
      animation-delay: -0.5s;
    }
    .circle2{
      right: 52px;
      top: 0;
      animation: slide-right 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate both;
    }
  }
  &.vertical{
    position: relative;
    width: 50px;
    height: 195px;
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .line{
      width: 1px;
      height: 100%;
    }
    .circle1{
      bottom: 60px;
      left: 0;
      z-index: 2;
      animation: slide-bottom 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate both;
      animation-delay: -0.5s;
    }
    .circle2{
      bottom: 52px;
      left: 0;
      animation: slide-bottom 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate both;
    }
  }
  @keyframes slide-right {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      -webkit-transform: translateX(40px);
      transform: translateX(40px);
    }
  }
  @keyframes slide-bottom {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      -webkit-transform: translateY(40px);
      transform: translateY(40px);
    }
  }
}