.wheel
{
	--deg: 21.15deg;

	position: relative;
	margin: -100px auto;
	width: 90vw;
	max-width: 1360px;
	aspect-ratio: 1;
	background-image: url("../img/sustentabilidad/un.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40%;
}

.wheel .arc
{
	transform: scale(1) rotate(var(--rotation)) !important;
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	transform-origin: 0% 100%;
	background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, red 35%, red 50%, transparent 50%, transparent);
	/* clip-path: polygon(0 0, 0 99%, 99% 0); */
	clip-path: polygon(0 0, 0 99%, 35% 0);
	transform: scale(0) rotate(var(--rotation));
}

.wheel .arc div
{
	display: none;
}

.wheel .arc img
{
	position: absolute;
	top: 45%;
	left: 15%;
	font-size: 2rem;
	transform: rotate(calc(var(--rotation) * -1));
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.3s;
}

.wheel .arc:nth-child(1) { --rotation: 0deg; }
.wheel .arc:nth-child(2) { --rotation: calc(var(--deg) * 1); }
.wheel .arc:nth-child(3) { --rotation: calc(var(--deg) * 2); }
.wheel .arc:nth-child(4) { --rotation: calc(var(--deg) * 3); }
.wheel .arc:nth-child(5) { --rotation: calc(var(--deg) * 4); }
.wheel .arc:nth-child(6) { --rotation: calc(var(--deg) * 5); }
.wheel .arc:nth-child(7) { --rotation: calc(var(--deg) * 6); }
.wheel .arc:nth-child(8) { --rotation: calc(var(--deg) * 7); }
.wheel .arc:nth-child(9) { --rotation: calc(var(--deg) * 8); }
.wheel .arc:nth-child(10) { --rotation: calc(var(--deg) * 9); }
.wheel .arc:nth-child(11) { --rotation: calc(var(--deg) * 10); }
.wheel .arc:nth-child(12) { --rotation: calc(var(--deg) * 11); }
.wheel .arc:nth-child(13) { --rotation: calc(var(--deg) * 12); }
.wheel .arc:nth-child(14) { --rotation: calc(var(--deg) * 13); }
.wheel .arc:nth-child(15) { --rotation: calc(var(--deg) * 14); }
.wheel .arc:nth-child(16) { --rotation: calc(var(--deg) * 15); }
.wheel .arc:nth-child(17) { --rotation: calc(var(--deg) * 16); }

.wheel .arc:nth-child(1) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #CDCECD 35%, #CDCECD 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(2) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #C89743 35%, #C89743 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(3) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #549035 35%, #549035 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(4) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #AD1C2B 35%, #AD1C2B 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(5) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #DD3828 35%, #DD3828 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(6) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #23A8C8 35%, #23A8C8 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(7) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #EFB413 35%, #EFB413 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(8) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #8E1F40 35%, #8E1F40 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(9) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #CDCECD 35%, #CDCECD 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(10) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #CDCECD 35%, #CDCECD 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(11) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #E88D2D 35%, #E88D2D 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(12) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #B3802F 35%, #B3802F 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(13) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #367D46 35%, #367D46 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(14) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #CDCECD 35%, #CDCECD 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(15) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #56B428 35%, #56B428 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(16) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #016892 35%, #016892 50%, transparent 50%, transparent);}
.wheel .arc:nth-child(17) {background-image: radial-gradient(circle at  0% 100%, transparent 0%, transparent 35%, #194869 35%, #194869 50%, transparent 50%, transparent);}

.wheel .arc::before {
	content: "";
	display: block;
	background-repeat: no-repeat;
	width: 15%;
	height: 15%;
	position: relative;
	left: 3%;
	top: 33%;
	transform: rotate(calc(var(--rotation) * -1));
	background-position: center;
	background-size: contain;
}

.wheel .arc:nth-child(1)::before {background-image: url("../img/sustentabilidad/wheel/1.svg")}
.wheel .arc:nth-child(2)::before {background-image: url("../img/sustentabilidad/wheel/2.svg")}
.wheel .arc:nth-child(3)::before {background-image: url("../img/sustentabilidad/wheel/3.svg")}
.wheel .arc:nth-child(4)::before {background-image: url("../img/sustentabilidad/wheel/4.svg")}
.wheel .arc:nth-child(5)::before {background-image: url("../img/sustentabilidad/wheel/5.svg")}
.wheel .arc:nth-child(6)::before {background-image: url("../img/sustentabilidad/wheel/6.svg")}
.wheel .arc:nth-child(7)::before {background-image: url("../img/sustentabilidad/wheel/7.svg")}
.wheel .arc:nth-child(8)::before {background-image: url("../img/sustentabilidad/wheel/8.svg")}
.wheel .arc:nth-child(9)::before {background-image: url("../img/sustentabilidad/wheel/9.svg")}
.wheel .arc:nth-child(10)::before {background-image: url("../img/sustentabilidad/wheel/10.svg")}
.wheel .arc:nth-child(11)::before {background-image: url("../img/sustentabilidad/wheel/11.svg")}
.wheel .arc:nth-child(12)::before {background-image: url("../img/sustentabilidad/wheel/12.svg")}
.wheel .arc:nth-child(13)::before {background-image: url("../img/sustentabilidad/wheel/13.svg")}
.wheel .arc:nth-child(14)::before {background-image: url("../img/sustentabilidad/wheel/14.svg")}
.wheel .arc:nth-child(15)::before {background-image: url("../img/sustentabilidad/wheel/15.svg")}
.wheel .arc:nth-child(16)::before {background-image: url("../img/sustentabilidad/wheel/16.svg")}
.wheel .arc:nth-child(17)::before {background-image: url("../img/sustentabilidad/wheel/17.svg")}

.wheel .arc .plus
{
	position: relative;
	top: 10%;
	transform: rotate(calc(var(--rotation) * -1));
}

@media (max-width: 1280px)
{
	.wheel
	{
		margin: -30px auto;
	}
}