.socnav {
	position: fixed;
	display: flex;
	align-items: center;
	z-index: 100;
	right: 20px;
	bottom: 20px;
}
.socnav .socnav-btn {
	all: unset;
	cursor: pointer;
	border-radius: 50%;
	animation: pulse-shadow 2s infinite;
}
.socnav .socnav-btn:hover {
	animation-play-state: paused;
}
.socnav .socnav-btn svg {
	display: block;
	width: 70px;
	height: 70px;
}
.socnav .socnav-list {
	position: absolute;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: scale(0);
	transform-origin: bottom;
	transition: transform ease-out .25s, bottom ease-out .25s;
}
.socnav .socnav-link {
	text-decoration: none;
	transition: all ease-out .25s;
}
.socnav .socnav-link svg {
	display: block;
	width: 70px;
	height: 70px;
}
.socnav .socnav-link:hover {
	transform: scale(1.1);
}
.socnav.show .socnav-list {
	transform: scale(1);
	transform-origin: bottom;
	bottom: calc(100% + 20px);
}
	
@media (max-width: 767px) {
	.socnav .socnav-btn svg {
		width: 50px;
		height: 50px;
	}
	.socnav .socnav-link svg {
		width: 50px;
		height: 50px;
	}
}



@keyframes pulse-shadow {
	0% {
		box-shadow: 0 0 0 0 rgba(119, 179, 212, 0.67);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(119, 179, 212, 0.27);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(119, 179, 212, 0.17);
	}
}