:root {
	--color-whatsapp: #25d366;
	--color-telegram: #24A1DE;
	--color-max: #f8eaf4;
}

.social-fixed {
	position: fixed;
	bottom: 25px;
	right: 25px;
	z-index: 999;
	display: block;
}
@media (max-width: 600px) {
	.social-fixed {
		bottom: 10px;
		right: 10px;
	}
}

.social-fixed__show-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	animation: social_twitching 3s infinite;
	cursor: pointer;
}

.social-fixed__show-button-icon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	background: #AAAAAA;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(0deg);
}
.social-fixed__show-button-icon_whatsapp {
	background: var(--color-whatsapp);
	animation: show_hide1 9s infinite;
}
.social-fixed__show-button-icon_telegram {
	background: var(--color-telegram);
	animation: show_hide2 9s infinite;
}
.social-fixed__show-button-icon_max {
	background: var(--color-max);
	animation: show_hide3 9s infinite;
	
}

.social-fixed__show-button-icon svg {
	display: block;
	width: 60%;
	height: 60%;
}

.social-fixed__show-button-icon_telegram > svg {
	position: relative;
	top: 1px;
	right: 2px;
}

.social-fixed__container {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	transform-origin: bottom right;
	transform: scale(0);
	transition: all .2s ease;
	overflow: hidden;
}
.social-fixed__container.show {
	transform: scale(1);
}

.social-fixed__links-block {
	display: flex;
	flex-flow: row nowrap;
	gap: 16px;
	border-radius: 10px;
	border: 1px solid #CCC;
	background: #FFFFFF;
	padding: 20px;
}

.social-fixed__links-block a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	opacity: 1;
	transition: all .2s ease;
}
.social-fixed__links-block a:hover {
	opacity: .5;
}
.social-fixed__links-block a.whatsapp {
	background: var(--color-whatsapp);
}
.social-fixed__links-block a.telegram {
	background: var(--color-telegram);
}
.social-fixed__links-block a.max {
	background: var(--color-max);
}

.social-fixed__close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	display: block;
	padding: 6px;
	cursor: pointer;
}

.social-fixed__close svg {
	display: block;
	width: 12px;
	height: 12px;
}

.social-fixed__links-block svg {
	position: relative;
	display: block;
	width: 60%;
	height: 60%;
}
.social-fixed__links-block a.telegram svg {
	top: 1px;
	right: 2px;
}

.social-fixed__wrapper {
	transform: scale(1);
	transition: all .2s ease;
}
.social-fixed__wrapper.hide-button {
	transform: scale(0);
}

@keyframes social_twitching {
	0%		{ transform: rotate(0deg); }
	20%		{ transform: rotate(-30deg); }
	40%		{ transform: rotate(10deg); }
	60%		{ transform: rotate(0deg); }
	100%	{ transform: rotate(0deg); }
}
@keyframes show_hide {
	0%		{ opacity: 1; }
	20%		{ opacity: 0; }
	50%		{ opacity: 0; }
	70%		{ opacity: 1; }
	100%	{ opacity: 1; }
}
@keyframes show_hide1 {
	0%		{ opacity: 1; }
	20%		{ opacity: 1; }
	40%		{ opacity: 0; }
	60%		{ opacity: 0; }
	80%		{ opacity: 0; }
	100%	{ opacity: 0; }
}
@keyframes show_hide2 {
	0%		{ opacity: 0; }
	20%		{ opacity: 0; }
	40%		{ opacity: 1; }
	60%		{ opacity: 1; }
	80%		{ opacity: 0; }
	100%	{ opacity: 0; }
}
@keyframes show_hide3 {
	0%		{ opacity: 0; }
	20%		{ opacity: 0; }
	40%		{ opacity: 0; }
	60%		{ opacity: 0; }
	80%		{ opacity: 1; }
	100%	{ opacity: 1; }
}