article {margin-top: -50px;
 padding-top: 60px;
}
.dws {
 position: fixed;
 left: 38%;
 bottom: 1px;
 transform: translate(10%, -50%);
 z-index: 99;
}
.pulse, .bloc, .phones {
 position: absolute;
 width: 90px;
 height: 90px;
 color: #2565e5;
 /* color: white; */
 text-align: center;
 border-radius: 50%;
}
.bloc {
 cursor: pointer;
 z-index: 1;
 overflow: hidden;
}
.pulse {
 background: #ffce00;
 position: relative;
 transition: .5s;
 }
.phones {
 font-size: 50px;
 line-height: 94px;
 animation: phone .9s ease-in-out infinite;
}
.text {
 position: absolute;
 opacity: 0;
 text-transform: uppercase;
 font-weight: 700;
 top: 28px;
 color: white;
 font-size: 15px;
 transform: scaleX(-1);
 transition: .5s ease-in-out;
}
.phones i {
 transition: .5s ease-in-out;
 padding-top: 20px;
}
.pulse:hover {
 background: #3d7cfa;
 color: white;
}
.pulse:hover i {
 transition: .5s ease-in-out;
 transform: scale(0);
}
.pulse:hover .text {
 transform: scaleX(1);
 transition: .5s ease-in-out;
 opacity: 1;
}
.pulse:hover::before,
.pulse:hover::after {
 content: '';
 position: absolute;
 border: 1px solid #ffce00;
 left: -20px;
 right: -20px;
 top: -20px;
 bottom: -20px;
 border-radius: 50%;
 animation: pulse 1.8s linear infinite;
 opacity: 0;
}
.pulse:hover::after {
 animation-delay: .5s;
}

@keyframes phone {
 0%, 100% {
  transform: rotate(-20deg);
 }
 50% {
  transform: rotate(21deg);
 }
}
@keyframes pulse {
 0% {
  transform: scale(0.5);
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  transform: scale(1.2);
  opacity: 0;
 }
}