.liveBtn {
  font-size: 5px;
}

.live{
width:10px;
background:transparent;
display:flex;
justify-content:center;
align-items:center;
position:relative;
z-index:10;
margin: 5px;
overflow:visible;
float: left;
}

.live-1, .live-2, .live-3, .live-4{
width:10px;
height:10px;
background:red;
border-radius:50%;
color:red;
display:flex;
justify-content:center;
align-items:center;
font-size:10px;
cursor: pointer;
}
.live-1{
background-image: radial-gradient(live, #00de91, #03c672, #04af54, #049837, #008116);
transform:rotate(90deg);
position:relative;
animation: animationIconPhone 1s infinite linear;
}
.live-2{
background-image: radial-gradient(live, #f0e955, #d7d244, #beba33, #a6a421, #8e8e0b);
animation: animationIconAll 1s infinite linear;
}
.live-3{
background-image: radial-gradient(live, #ff6969, #fd4f4f, #fd3131, #ff0f0f, #ff0000);
animation: animationIconAll 1s infinite linear;
}
.live-4{
background-image: radial-gradient(live, #8534ee, #7727ca, #681aa8, #580f88, #470569);
animation: animationIconAll 1s infinite linear;
}
.scale-shadow{
position:absolute;
color:#fd0000;
width:12px;
height:12px;
}
.scale-shadow:before{
position:absolute;
content:'';
width:100%;
height:100%;
border-radius:50%;
z-index:-1;
transform:scale(1.3);

}
.scale-shadow:after{
position:absolute;
content:'';
width:100%;
height:100%;
border-radius:50%;
z-index:-1;
transform:scale(1.5);
}

#shadow-3:before{
 background:radial-gradient(live, rgba(255, 26, 26,.3), rgba(255, 26, 26,.1));
animation:animationShadow1 3s infinite linear;
}

#shadow-3:after{
border:.5px solid #ff0000;
animation: animationShadow2 1.5s infinite;
}

@keyframes animationIconPhone{
0%{transform: rotate(100deg);}
10%{transform: rotate(70deg);}
20%{transform: rotate(100deg);}
30%{transform: rotate(70deg);}
40%{transform: rotate(100deg);}
50%{transform: rotate(70deg);}
60%{transform: rotate(100deg);}
100%{transform: rotate(100deg);}
}
@keyframes animationIconAll{
0%{transform: rotate(0deg);}
10%{transform: rotate(15deg);}
20%{transform: rotate(-15deg);}
30%{transform: rotate(15deg);}
40%{transform: rotate(-15deg);}
50%{transform: rotate(15deg);}
60%{transform: rotate(-15deg);}
100%{transform: rotate(0deg);}
}

@keyframes animationShadow1{
0%{
  opacity:0;
  transform:scale(1.2);
}
25%{
  opacity:1;
  transform:scale(1.5);
}
50%{
  opacity:1;
  transform:scale(1.2);
}
75%{
  opacity:1;
  transform:scale(1.5);
}
100%{
  opacity:0;
  transform:scale(1.2);
}
}
@keyframes animationShadow2{
0%{
  opacity:0;
  transform:scale(1.3);
}
25%{
  opacity:1;
  transform:scale(1.7);
}
50%{
  opacity:1;
  transform:scale(1.7);
}
100%{
  opacity:0;
  transform:scale(2);
}
}