.circular-progress {
  position: relative;
  display: inline-block;
  z-index: 30;
}

.circular-progress-circle {
  position: relative;
  width: 40vw;
  height: 40vw;
  background: rgba(185,232,255,1);
  border-radius: 50%;
  overflow: hidden;
}

.circular-edge{
  position: absolute;
  width: 40vw;
  height: 40vw;
  background: rgba(255,255,255,0);
  border-radius: 50%;
  border: 10px solid black;
  overflow: hidden;
  z-index: 40;
}

.segment {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vw;
  background: blue;
  transform-origin: 0 0;
  animation: widthOut 5s ease-in;
}

.wheelText{
	height: auto; 
	width: 8%; 
	margin-top: 0%;
	font-weight: 600;
}

.wheelArrow{
	position: absolute;
    width: 15%;
    left: 42.5%;
    top: -5%;
    z-index: 50;
	transform: rotate(0deg);
}

@keyframes widthOut {
    from {
        width: 0vw;
    }
    to {
        width: 100vw;
    }
}

@media screen and (max-width: 768px) {
	.circular-progress-circle {
		width: 80vw;
		height: 80vw;
	}
	.circular-edge{
		width: 80vw;
		height: 80vw;
	}
}

@media screen and (max-width: 992px) {
	.wheelText{
		width: 3%; 
	}
}