/* https://codepen.io/jasperlachance/pen/yOJdRr */
.radial-icons-item {
	border-radius: 100%;
	height: 60px;
	position: absolute;
	width: 60px;
}

a {
	outline: none;
}

.radial-icons-open {
	display: none;
}

.radial-icons {
	bottom: 0;
	height: 60px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 60px;
}

.radial-icons-item > div {
	align-items: center;
	border-radius: 100%;
	display: flex;
	height: 60px;
	justify-content: center;
}

.radial-icons,
.radial-icons-item * {
	transition: all 0.4s ease-in-out;
}

.radial-icons-item {
	opacity: 0;
}
.radial-icons-item.show {
	opacity: 1;
}

/* color, before show */
.radial-icons-item:nth-child(2) {
	background-color: #58585a;
}

.radial-icons-item:nth-child(3) {
	background-color: #d91b5c;
}

.radial-icons-item:nth-child(4) {
	background-color: #dd5828;
}

.radial-icons-item:nth-child(5) {
	background-color: #f36f21;
}

.radial-icons-item:nth-child(6) {
	background-color: #faa61a;
}

.radial-icons-item:nth-child(7) {
	background-color: #ffcb08;
}

.radial-icons-item:nth-child(8) {
	background-color: #d7df21;
}

/* box-shadow */
.radial-icons-item.active:nth-child(2),
.radial-icons-item.active:nth-child(2) > div {
	box-shadow: 0px 0px 75px #58585a;
}
.radial-icons-item.active:nth-child(3),
.radial-icons-item.active:nth-child(3) > div {
	box-shadow: 0px 0px 75px #d91b5c;
}
.radial-icons-item.active:nth-child(4),
.radial-icons-item.active:nth-child(4) > div {
	box-shadow: 0px 0px 75px #dd5828;
}
.radial-icons-item.active:nth-child(5),
.radial-icons-item.active:nth-child(5) > div {
	box-shadow: 0px 0px 75px #f36f21;
}
.radial-icons-item.active:nth-child(6),
.radial-icons-item.active:nth-child(6) > div {
	box-shadow: 0px 0px 75px #faa61a;
}
.radial-icons-item.active:nth-child(7),
.radial-icons-item.active:nth-child(7) > div {
	box-shadow: 0px 0px 75px #ffcb08;
}
.radial-icons-item.active:nth-child(8),
.radial-icons-item.active:nth-child(8) > div {
	box-shadow: 0px 0px 75px #d7df21;
}

@-moz-document url-prefix() {
	.radial-icons-item.active:nth-child(2) {
		box-shadow: 0px 0px 25px #58585a;
	}
	.radial-icons-item.active:nth-child(3) {
		box-shadow: 0px 0px 25px #d91b5c;
	}
	.radial-icons-item.active:nth-child(4) {
		box-shadow: 0px 0px 25px #dd5828;
	}
	.radial-icons-item.active:nth-child(5) {
		box-shadow: 0px 0px 25px #f36f21;
	}
	.radial-icons-item.active:nth-child(6) {
		box-shadow: 0px 0px 25px #faa61a;
	}
	.radial-icons-item.active:nth-child(7) {
		box-shadow: 0px 0px 25px #ffcb08;
	}
	.radial-icons-item.active:nth-child(8) {
		box-shadow: 0px 0px 25px #d7df21;
	}

	.radial-icons-item.active > div {
		box-shadow: none;
	}
}