/* (N) neave.com icon */

@-webkit-keyframes neave-anim {
	to {
		background-position: 0 400%;
	}
}

@-moz-keyframes neave-anim {
	to {
		background-position: 0 400%;
	}
}

@keyframes neave-anim {
	to {
		background-position: 0 400%;
	}
}

.neave {
	position: absolute;
	left: 15px;
	left: calc(15px + constant(safe-area-inset-left));
	left: calc(15px + env(safe-area-inset-left));
	top: 15px;
	top: calc(15px + constant(safe-area-inset-top));
	top: calc(15px + env(safe-area-inset-top));
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	will-change: opacity;
	opacity: 0.3;
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
	z-index: 100;
}

.neave a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	outline: none;
	background-image: url(/assets/images/neave-icon.svg);
	background-size: 100% 100%;
	border-radius: 50%;
}

.neave a span {
	display: none;
}

.neave:hover {
	opacity: 1;
	background-color: #9fc;
	background-image: -webkit-linear-gradient(
		top,
		#9fc 0%,
		#9cf 25%,
		#f9c 50%,
		#fc9 75%,
		#9fc 100%
	);
	background-image: -moz-linear-gradient(
		top,
		#9fc 0%,
		#9cf 25%,
		#f9c 50%,
		#fc9 75%,
		#9fc 100%
	);
	background-image: linear-gradient(
		to bottom,
		#9fc 0%,
		#9cf 25%,
		#f9c 50%,
		#fc9 75%,
		#9fc 100%
	);
	background-size: 100% 400%;
	-webkit-animation: neave-anim 8s infinite linear;
	-moz-animation: neave-anim 8s infinite linear;
	animation: neave-anim 8s infinite linear;
}

.neave:active {
	margin-top: 1px;
}

.neave:active a {
	box-shadow: inset 0 2px 16px rgba(0, 0, 0, 0.3);
}

@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
	.neave {
		border-width: 1px;
	}
}