@-webkit-keyframes arc {
	0% {
		border-width: 30px;
	}
	25% {
		border-width: 15px;
	}
	50% {
		-webkit-transform: rotate(27deg);
		transform: rotate(27deg);
		border-width: 30px;
	}
	75% {
		border-width: 15px;
	}
	100% {
		border-width: 30px;
	}
}
@keyframes arc {
	0% {
		border-width: 30px;
	}
	25% {
		border-width: 15px;
	}
	50% {
		-webkit-transform: rotate(27deg);
		transform: rotate(27deg);
		border-width: 30px;
	}
	75% {
		border-width: 15px;
	}
	100% {
		border-width: 30px;
	}
}

.arcs .cube {
	position: absolute;
	bottom: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	margin-top: 0;
}

.arcs .cube-2d {
	background-color: #fff/*$color*/;
}
.arcs .arc {
	position: absolute;
	bottom: 50%;
	left: 50%;
	margin-left: -70px;
	width: 140px;
	height: 70px;
	overflow: hidden;
}

.arcs .arc-cube {
	position: absolute;
	bottom: -70px;
	left: 50%;
	margin-left: -70px;
	width: 140px;
	height: 140px;
	border-style: solid;
	border-top-color: transparent;
	border-right-color: #fff/*$color*/;
	border-left-color: transparent;
	border-bottom-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	-webkit-animation: arc 2s ease-in-out infinite;
	animation: arc 2s ease-in-out infinite;
	-webkit-transform: rotate(-200deg);
	-ms-transform: rotate(-200deg);
	transform: rotate(-200deg);
}