.knob {
	margin:60px 0 30px 0;
	display: flex;
	justify-content: space-between;
}
.knob-item {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.knob-item:first-child {
	margin-left:0;
}
.knob-item-title {
	font-size:18px;
	margin-bottom: 1.5rem;
	line-height: 16px;
	height: 48px;
	display: flex;
	align-items: flex-end;
	text-align: center;
	font-weight: 300;
}
.knob-item-counter {
	width:73px;
	height:73px;
	display: flex;
	border:3px solid var(--color-gray-400);
	border-radius:50px;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	letter-spacing:-.5px;
	font-weight: 300;
	animation: 2s ease-out turn_in reverse; 
	background: conic-gradient(var(--color-primary) var(--progress), var(--color-gray-400) 0deg);
	text-align:center;
}
.knob-item-counter::after {
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	margin: 10px;
	border-radius: 50%;
	background: var(--color-gray-400);
	font-size: 1rem;
	text-align: center;
}
.knob-item-counter-value {
	width:61px;
	height:61px;
	display: flex;
	border-radius: 50px;
	background:#fff;
	align-items: center;
	justify-content: center;
}

@media (min-width: 992px) {
	.knob-item-counter {
		width:103px;
		height:103px;
		font-size: 48px;
	}
	.knob-item-counter-value {
		width:91px;
		height:91px;
	}
	.knob-item-title {
		font-size:24px;
		line-height: 24px;
	}
}

@keyframes turn_in {
  5% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .95), var(--color-gray-400) 0deg);
  }
  10% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .9), var(--color-gray-400) 0deg);
  }
  15% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .85), var(--color-gray-400) 0deg);
  }
  20% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .8), var(--color-gray-400) 0deg);
  }
  25% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .75), var(--color-gray-400) 0deg);
  }
  30% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .7), var(--color-gray-400) 0deg);
  }
  35% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .65), var(--color-gray-400) 0deg);
  }
  40% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .6), var(--color-gray-400) 0deg);
  }
  45% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .55), var(--color-gray-400) 0deg);
  }
  50% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .5), var(--color-gray-400) 0deg);
  }
  55% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .45), var(--color-gray-400) 0deg);
  }
  60% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .4), var(--color-gray-400) 0deg);
  }
  65% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .35), var(--color-gray-400) 0deg);
  }
  70% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * 0.3), var(--color-gray-400) 0deg);
  }
  75% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * 0.25), var(--color-gray-400) 0deg);
  }
  80% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .2), var(--color-gray-400) 0deg);
    }
  85% {
    background: conic-gradient(var(--color-primary) calc(var(--progress) * .15), var(--color-gray-400) 0deg);
    }
  90% {
      background: conic-gradient(var(--color-primary) calc(var(--progress) * .1), var(--color-gray-400) 0deg);
    }
  95% {
      background: conic-gradient(var(--color-primary) calc(var(--progress) * .05), var(--color-gray-400) 0deg);
    }
100% {
    background: conic-gradient(var(--color-gray-400) 0deg);
  }
}