*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: rgb(14,14,14);
}


.col-2 .ring img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 160%;
    max-height: 100%;
    z-index: -100;
}

#circle-ring{
 margin-left: 500px;
 margin-top: 160px;
}
.col-2 .ring{
    position: relative;
    width: 400px ;
    height: 400px;
    background:transparent;
    border: 3px solid #3c3c3c;
    border-radius: 50%;
    box-shadow: 0 0 20px #fff;
    z-index: -1;
    overflow: hidden;
}
.col-2 .ring:before{
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top: 3px solid #fff12e;
border-right: 3px solid #fff12e;
border-radius: 50%;
z-index: -1;
animation: returnCircle 10s linear infinite;

}

.col-2 .ring .circle{
    display: block;
    position: absolute;
    top:50%;
    left: 50%;
    width:50% ;
    height: 3px;
    background:transparent;
    transform-origin:left;
    animation: return 10s linear infinite;
}

.col-2 .ring .circle:before{
    content: "";
    position: absolute;
    top: -6px;
    right: -9px;
    width: 16px;
    height: 16px;
    background: #fff12e;
    border-radius: 50%;
    box-shadow: 0 0 20px #fff;
    z-index: -1;
}



.col-2 .ring-two{
    position: absolute;
    top: 14.5%;
    left: 29.25%;
    width: 500px;
    height: 500px;
    background: transparent;
    border: 3px solid #fff;
    border-radius:50% ;
    box-shadow: 0 0 20px #fff;

}

.col-2 .ring-two:before{
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
    border-bottom: 3px solid #fff12e;
    border-left: 3px solid #fff12e;
    border-radius:50% ;
    animation: returnCircle2 10s linear infinite;
}

.col-2 .ring-two .circle-two{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 4px;
    background: transparent;
    transform-origin: left;
    animation: return2 10s linear infinite;
}

.col-2 .ring-two .circle-two:before{
    content: "";
    position: absolute;
    top:-6px;
    right: -8px;
    width: 16px;
    height: 16px;
    background: #fff12e;
    border-radius: 50%;
    box-shadow: 0 0 20px #fff;
}




@keyframes returnCircle{
  0%{
    transform: rotate(0deg);
  }
  100%{
   transform: rotate(360deg);
  }
}


@keyframes return{
    0%{
      transform: rotate(45deg);
    }
    100%{
     transform: rotate(405deg);
    }
  }



  @keyframes returnCircle2{
    0%{
      transform: rotate(-45deg);
    }
    100%{
     transform: rotate(-405deg);
    }
  }
  
  
  @keyframes return2{
      0%{
        transform: rotate(0deg);
      }
      100%{
       transform: rotate(-360deg);
      }
    }