.down-arrow:before {
	content: '';
	background: url('../../public/images/arrows/down-arrow.png') no-repeat bottom;
	position: absolute;
	bottom: 54px;
	left: 50%;
	margin-left: -10px;
	width: 20px;
	height: 20px;
	z-index: 1;
	cursor: default;
	filter: grayscale(100%) brightness(60%);
}

.down-arrow.medium-arrow:before {
	height: 91px;
}

.down-arrow.large-arrow:before {
	height: 163px;
}

.side-arrow:after {
	content: '';
	background: url('../../public/images/arrows/down-arrow.png') no-repeat bottom;
	position: absolute;
	bottom: 16px;
	left: -19px;
	width: 20px;
	height: 24px;
	transform: rotate(-90deg);
	filter: grayscale(100%) brightness(60%);
}

.corner-arrow:before {
	content: '';
	background: url('../../public/images/arrows/right-down-arrow.png') no-repeat right;
	position: absolute;
	bottom: 91px;
	left: -22px;
	width: 58px;
	height: 20px;
	cursor: default;
	filter: grayscale(100%) brightness(60%);
}

.corner-arrow:after {
	content: '';
	background: url('../../public/images/arrows/down-arrow.png') no-repeat bottom;
	position: absolute;
	bottom: 52px;
	left: 18px;
	width: 20px;
	z-index: 1;
	height: 41px;
	cursor: default;
	filter: grayscale(100%) brightness(60%);
}

.skill.is-enabled.side-arrow:after,
.skill.is-enabled.down-arrow:before,
.skill.is-enabled.corner-arrow:before,
.skill.is-enabled.corner-arrow:after {
	filter: grayscale(0%) brightness(100%);
}