.social{position:fixed; bottom:50px; right:65px; height:60px; display:flex; justify-content:center; align-items:center; z-index:1000; user-select:none}
.social__tooltip{position:absolute; right:70px; white-space:nowrap; background:#fff; padding:6px 9px; font-size:13px; border-radius:3px; transform:translateX(0%) translateY(-50%); top:50%; background:#292929; color:#fff; opacity:0; transition:all .1s linear; user-select:none}
.social__tooltip:after{content:""; position:absolute; width:0; height:0; border:solid transparent; border-width:10px; top:50%; right:-20px; transform:translateY(-50%); border-left-color:#292929}
.social__btn_label{position:relative; cursor:pointer; z-index:2; width:60px; height:60px; justify-content:center; align-items:center; border-radius:50%; transition:all .2s ease-in-out; box-shadow:0 0 20px 0 rgba(0,0,0,0.3); overflow:hidden; background:#43d854}
.social__btn_label:hover{box-shadow:0 0 20px 0 rgba(0,0,0,0.4)}
.social__btn_label:hover .social__tooltip{transform:translate(0,0); opacity:1}
.social__btn_label:hover + .social__tooltip{transform:translate(0,0); opacity:1}
.social__btn_label:hover + .social__tooltip:after{opacity:1}
.social__btn_input{display:none}
.social__btn_input:checked ~ a:nth-of-type(1){transition:all .2s ease-in-out; transform:translate(0,-135%)}
.social__btn_input:checked ~ a:nth-of-type(2){transition:all .225s ease-in-out; transform:translate(0,-255%)}
.social__btn_input:checked ~ a:nth-of-type(3){transition:all .25s ease-in-out; transform:translate(0,-375%)}
.social__btn_input:checked ~ a:nth-of-type(4){transition:all .275s ease-in-out; transform:translate(0,-495%)}
.social__btn_input:checked ~ a:nth-of-type(5){transition:all .3s ease-in-out; transform:translate(0,-615%)}
.social__btn_input:checked ~ a:nth-of-type(6){transition:all .325s ease-in-out; transform:translate(0,-735%)}
.social__btn_input:checked ~ a:nth-of-type(7){transition:all .325s ease-in-out; transform:translate(0,-855%)}
.social__btn_input:checked ~ a:nth-of-type(8){transition:all .35s ease-in-out; transform:translate(0,-975%)}
.social__btn_input:checked ~ a:nth-of-type(9){transition:all .375s ease-in-out; transform:translate(0,-1095%)}
.social__btn_input:checked ~ a:nth-of-type(10){transition:all .4s ease-in-out; transform:translate(0,-1215%)}
.social__btn_input:checked ~ a:nth-of-type(11){transition:all .425s ease-in-out; transform:translate(0,-1335%)}
.social__btn_input:checked ~ .social__animated-circle{display:none}
.social__btn_input:checked ~ .social__icon_link{opacity:1; visibility:visible}
.social__btn_input:checked + label{background:#fff!important; animation:none}
.social__btn_input:checked + label .social__bgimg{opacity:0; visibility:hidden}
.social__btn_input:checked + label .social__icon-write{opacity:0; visibility:hidden; transform:scale(0.1)}
.social__btn_input:checked + label .social__icon-close{opacity:1; visibility:visible; transform:scale(1)}
.social__btn:hover{box-shadow:0 0 20px 0 rgba(0,0,0,0.4)}
.social__bgimg{position:absolute; top:0; left:0; right:0; bottom:0; transition:all .2s linear;}
.social__icon{transition:all .3s ease-in-out; position:absolute; margin:auto; top:0; right:0; bottom:0; left:0}
.social__icon-close{opacity:0; visibility:hidden; transform:scale(0.1)}
.social__icon_tooltip{position:absolute; opacity:0; right:80px; white-space:nowrap; background:#fff; padding:9px 13px; font-size:15px; border-radius:3px; transform:translateX(0%) translateY(-50%); top:50%; background:#292929; color:#fff; transition:all .1s linear}
.social__icon_tooltip:after{content:""; position:absolute; width:0; height:0; border:solid transparent; border-width:10px; top:50%; right:-20px; transform:translateY(-50%); border-left-color:#292929}
.social__icon_link{border-radius:50%; box-shadow:0 0 20px 0 rgba(0,0,0,0.3); opacity:0; visibility:hidden; width:50px; height:50px}
.social__icon_link:hover{box-shadow:0 0 20px 0 rgba(0,0,0,0.4)}
.social__icon_link:hover .social__tooltip{opacity:.85}

/*Анимация пульсации*/

.pulse {
	border-radius: 50%;
	cursor: pointer;
	animation: pulse 2s infinite;
  }
.pulse:hover {
	animation: none;
}
  
  @keyframes pulse {
	0% {
	  box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
	}
	70% {
		box-shadow: 0 0 0 50px rgba(204,169,44, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(204,169,44, 0);
	}
  }

/*Конец анимации пульсации*/

/*Смена иконок*/

@keyframes fadeIm-1
{
	from		{ opacity: 0; }
	22.22%		{ opacity: 1; }
	33.33%		{ opacity: 0; }
	44.44%		{ opacity: 0; }
	55.55%		{ opacity: 0; }
	66.66%		{ opacity: 0; }
	77.77%		{ opacity: 0; }
	88.88%		{ opacity: 0; }
	to			{ opacity: 0; }
}
@keyframes fadeIm-2
{
	from		{ opacity: 0; }
	22.22%		{ opacity: 0; }
	33.33%		{ opacity: 0; }
	44.44%		{ opacity: 1; }
	55.55%		{ opacity: 0; }
	66.66%		{ opacity: 0; }
	77.77%		{ opacity: 0; }
	88.88%		{ opacity: 0; }
	to			{ opacity: 0; }
}
@keyframes fadeIm-3
{
	from		{ opacity: 0; }
	22.22%		{ opacity: 0; }
	33.33%		{ opacity: 0; }
	44.44%		{ opacity: 0; }
	55.55%		{ opacity: 0; }
	66.66%		{ opacity: 1; }
	77.77%		{ opacity: 0; }
	88.88%		{ opacity: 0; }
	to			{ opacity: 0; }
}
@keyframes fadeIm-4
{
	from		{ opacity: 0; }
	22.22%		{ opacity: 0; }
	33.33%		{ opacity: 0; }
	44.44%		{ opacity: 0; }
	55.55%		{ opacity: 0; }
	66.66%		{ opacity: 0; }
	77.77%		{ opacity: 0; }
	88.88%		{ opacity: 1; }
	to			{ opacity: 0; }
}
 
.im-1{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0px;
	animation-name: fadeIm-1;
	animation-duration: 14s;
	animation-iteration-count: infinite;

}
.im-2{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0px;
	animation-name: fadeIm-2;
	animation-duration: 14s;
	animation-iteration-count: infinite; 
}
.im-3{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0px;
	animation-name: fadeIm-3;
	animation-duration: 14s;
	animation-iteration-count: infinite; 
}
.im-4{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0px;
	animation-name: fadeIm-4;
	animation-duration: 14s;
	animation-iteration-count: infinite; 
}

.im-1:active {
	animation: none;
}
.im-2:active {
	animation: none;
}
.im-3:active {
	animation: none;
}
.im-4:active {
	animation: none;
}

/*Конец смены иконок*/