/*

*/

.circlewrapper {
	position: relative;
	margin: 0 auto;
	width: 85%;
	max-width: 400px;
	aspect-ratio: 1 / 1;
	/* border: 1px solid red; */
	pointer-events: none;
	font-size: 17px;
	line-height: 17px;

	margin-bottom: 20px;
}

.circle {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	/* border: 1px solid blue; */
	animation: spin 90s linear infinite;
}

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

.circle .part {
	position: absolute;
	width: 50%;
	height: 50%;
	left: 50%;
	/* border: 1px solid yellow; */
	text-align: center;
}

.circle .part span {
	position: absolute;
	display: block;
	width: 100%;
	text-align: center;
	left: 15%;
	top: 46%;
	margin: 0 auto;
	color: #ffffff;
}

/* .circle .part1 span { transform: rotate(54deg); }
.circle .part2 span { transform: rotate(-126deg); }
.circle .part3 span { transform: rotate(-126deg); }
.circle .part4 span { transform: rotate(-126deg); }
.circle .part5 span { transform: rotate(54deg); } */

.circle .part1 span { transform: rotate(-126deg); }
.circle .part2 span { transform: rotate(-126deg); }
.circle .part3 span { transform: rotate(-126deg); }
.circle .part4 span { transform: rotate(-126deg); }
.circle .part5 span { transform: rotate(-126deg); }

.circle .part {
	transform-origin: bottom left;
}

.circle .part .innnerpart {
	width: 100%;
	height: 100%;
	border: 1px solid #ffffff;
	transform: skew(-18deg);
	transform-origin: bottom left;
	background-color: #00afaa;
	pointer-events: all;
	cursor: pointer;
}

.circle .part1 { transform: rotate(-18deg); }
.circle .part2 { transform: rotate(54deg); }
.circle .part3 { transform: rotate(126deg); }
.circle .part4 { transform: rotate(198deg); }
.circle .part5 { transform: rotate(270deg); }

.circle .part.active .innnerpart,
.circle .part:hover .innnerpart {
	background-color: #008d89;
	transition: all 0.2s;
}

.pentagon {
	position: absolute;
	top: 21.5%;
	left: 18%;
	width: 64%;
	height: 63%;
	/* overflow: hidden; */
	/* border: 1px solid yellow; */
	pointer-events: none;
	/* animation: spin2 90s linear infinite; */
}

@keyframes spin2 { 
	100% { transform: rotate(-360deg); } 
}

.pentagon-part span {
	display: block;
	width: 100%;
	text-align: center;
	margin: 8px auto;
	color: #000;
}

.pentagon-part {
	position: absolute;
	top: 0;
	left: 18%;
	width: 64%;
	height: auto;
	aspect-ratio: 1 / 0.6882;
	background: #ff5700;
	clip-path: polygon( 1% 1%, 99% 1%, 50% 98.5%);
	transform-origin: bottom center;
	border-top: 3px solid #ffffff;
	pointer-events: all;
	cursor: pointer;
	transition: all 0.2s;
}

.pentagon-part.active,
.pentagon-part:hover {
	background: #c04200;
	transition: all 0.2s;
	color: #ffffff;
	top: -1%;
	left: 17%;
	width: 66%;
}

.pentagon-part:hover span,
.pentagon-part.active span {
	color: #ffffff;
}

.pentagon .part1 { transform: rotate(0deg); }
.pentagon .part2 { transform: rotate(72deg); }
.pentagon .part3 { transform: rotate(144deg); }
.pentagon .part4 { transform: rotate(216deg); }
.pentagon .part5 { transform: rotate(288deg); }

.pentagon .part1 span { }
.pentagon .part2 span { }
.pentagon .part3 span { transform: rotate(180deg); }
.pentagon .part4 span { transform: rotate(180deg); }
.pentagon .part5 span { }

/* .pentagon .part1 span { transform: rotate(180deg); }
.pentagon .part2 span { transform: rotate(180deg); }
.pentagon .part3 span { transform: rotate(180deg); }
.pentagon .part4 span { transform: rotate(180deg); }
.pentagon .part5 span { transform: rotate(180deg); } */

.cas {
	position: absolute;
	width: 30%;
	height: 30%;
	border-radius: 50%;
	left: 35%;
	top: 35%;
	background-color: #ffffff;
	background-image: url('images/cas.svg');
	background-repeat: no-repeat;
	background-position: 58% center;
	background-size: 60% auto;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
}