#CircleMenu1 {
	position: relative;
	width: 270px;
	height: 270px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#CircleMenu1 .circle {
	position: absolute;
	width: 75px;
	height: 75px;
	background: #fff;
	border-radius: 50%;
	transition: 0.5s;
}
#CircleMenu1.active .circle {
	width: 212px;
	height: 212px;
}
#CircleMenu1 .toggle {
	position: absolute;
	width: 75px;
	height: 75px;
	background: #fff;
	color: #222327;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3em;
	cursor: pointer;
	transition: 0.5s;
}
#CircleMenu1 .toggle.active {
	transform: rotate(315deg);
	background: #222327;
	color: #fff;
}
#CircleMenu1 li {
	position: absolute;
	list-style: none;
	left: -5px;
	transform: rotate(calc(360deg / 8 * var(--i)))
	translateX(40px);
	transform-origin: 140px;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s;
	z-index: 10;
}
#CircleMenu1.active li {
	visibility: visible;
	opacity: 1;
}
#CircleMenu1 li a {
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 55px;
	height: 55px;
	font-size: 1.75em;
	color: #222327;
	transform: rotate(calc(360deg / -8 * var(--i)));
	border-radius: 50%;
}
#CircleMenu1.active li.active {
	transform: rotate(calc(360deg / 8 * var(--i))) translateX(12px);
}
#CircleMenu1 .indicator {
	position: absolute;
	left: calc(50% + 2.5px);
	transform-origin: right;
	width: 101px;
	height: 1px;
	background: transparent;
	pointer-events: none;
	transition: 0.5s;
}
#CircleMenu1 .indicator::before {
	content: '';
	position: absolute;
	top: -27.5px;
	left: 72px;
	width: 55px;
	height: 55px;
	background: #222327;
	box-shadow: 0 0 0 6px #29fd53;
	border-radius: 50%;
	transition: 0.5s;
	opacity: 0;
}
#CircleMenu1.active .indicator::before {
	opacity: 1;
	top: -27.5px;
	left: -27.5px;
	background: #29fd53;
	box-shadow: 0 0 0 6px #222327;
}
#CircleMenu1 li:nth-of-type(1).active ~ .indicator {
	transform: translateX(-103px) rotate(0deg);
}
#CircleMenu1 li:nth-of-type(2).active ~ .indicator {
	transform: translateX(-103px) rotate(45deg);
}
#CircleMenu1 li:nth-of-type(3).active ~ .indicator {
	transform: translateX(-103px) rotate(90deg);
}
#CircleMenu1 li:nth-of-type(4).active ~ .indicator {
	transform: translateX(-103px) rotate(135deg);
}
#CircleMenu1 li:nth-of-type(5).active ~ .indicator {
	transform: translateX(-103px) rotate(180deg);
}
#CircleMenu1 li:nth-of-type(6).active ~ .indicator {
	transform: translateX(-103px) rotate(225deg);
}
#CircleMenu1 li:nth-of-type(7).active ~ .indicator {
	transform: translateX(-103px) rotate(270deg);
}
#CircleMenu1 li:nth-of-type(8).active ~ .indicator {
	transform: translateX(-103px) rotate(315deg);
}