.circular{
			  height:100px;
			  width: 100px;
			  position: relative;  
			  
			  float: right;
			  margin-right: 46.5%;
			}
			.circular .inner{
			  position: absolute;
			  z-index: 6;
			  top: 50%;
			  left: 50%;
			  height: 80px;
			  width: 80px;
			  margin: -40px 0 0 -40px;
			  background: #929292;
			  /*origin --> background: red;*/
			  border-radius: 100%;
			}
			.circular .number{
			  position: absolute;
			  top:50%;
			  left:50%;
			  transform: translate(-50%, -50%);
			  z-index:10;
			  font-size:18px;
			  font-weight:1000;
			  color:white;
			  /*color:#5DBCD2;*/
			  ./*origin --> color:#4158d0;*/
			}
			.circular .bar{
			  position: absolute;
			  height: 100%;
			  width: 100%;
			  background: #fff;
			  -webkit-border-radius: 100%;
			  clip: rect(0px, 100px, 100px, 50px);
			}
			.circle .bar .progress{
			  position: absolute;
			  height: 100%;
			  width: 100%;
			  -webkit-border-radius: 100%;
			  clip: rect(0px, 50px, 100px, 0px);
			  background: #5DBCD2
			  /*origin --> background: #4158d0;*/
			}
			.circle .left .progress{
			  z-index:1;
			  animation: left 120s linear both;
			}
			@keyframes left{
			  100%{
				transform: rotate(180deg);
			  }
			}
			.circle .right {
			  transform: rotate(180deg);
			  z-index:3;
			 
			}
			.circle .right .progress{
			  animation: right 120s linear both;
			  animation-delay:120s;
			}
			@keyframes right{
			  100%{
				transform: rotate(180deg);
			  }
			}