


.whatsapp-button {
   position: fixed;
   right: 90px;
   bottom: 10px;
   transform: translate(-15%, -15%);
   background: #25D366; /*цвет кнопки*/
   border-radius: 50%;
   width: 55px; /*ширина кнопки*/
   height: 55px; /*высота кнопки*/
   color: #fff;
   text-align: center;
   line-height: 53px; /*центровка иконки в кнопке*/
   font-size: 35px; /*размер иконки*/
   z-index: 9999;
}
.whatsapp-button a {
   color: #fff; text-decoration:none; display:inline-block; position:relative; z-index:10;
}
.whatsapp-button:before,
.whatsapp-button:after {
   content: " ";
   display: block;
   position: absolute;
   border: 50%;
   border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/
   left: -5px;
   right: -5px;
   top: -5px;
   bottom: -5px;
   border-radius: 50%;
   animation: animate 1.5s linear infinite;
   opacity: 0;
   backface-visibility: hidden; 
   z-index:0;
}

.whatsapp-button:after{
   animation-delay: .5s;
}

@keyframes animate
{
   0%
   {
       transform: scale(0.5);
       opacity: 0;
   }
   50%
   {
       opacity: 1;
   }
   100%
   {
       transform: scale(1.2);
       opacity: 0;
   }
}


@media (max-width : 768px) {
.whatsapp-button {   
   //bottom: 20px; /*отступ кнопки снизу от экрана*/
   //right: 5px; /*отступ кнопки слева от экрана(right - справа)*/
 }
}



.phone-button {
   position: fixed;
   right: 10px;
   bottom: 10px;
   transform: translate(-15%, -15%);
   background: #5bc0de; /*цвет кнопки*/
   border-radius: 50%;
   width: 55px; /*ширина кнопки*/
   height: 55px; /*высота кнопки*/
   color: #fff;
   text-align: center;
   line-height: 53px; /*центровка иконки в кнопке*/
   font-size: 30px; /*размер иконки*/
   z-index: 9999;
}
.phone-button a {
   color: #fff; text-decoration:none; display:inline-block; position:relative; z-index:10;
}
.phone-button:before,
.phone-button:after {
   content: " ";
   display: block;
   position: absolute;
   border: 50%;
   border: 1px solid #5bc0de; /*цвет анимированных волн от кнопки*/
   left: -5px;
   right: -5px;
   top: -5px;
   bottom: -5px;
   border-radius: 50%;
   animation: animate 1.5s linear infinite;
   opacity: 0;
   backface-visibility: hidden; 
   z-index:0;
}

.phone-button:after{
   animation-delay: .5s;
}

@keyframes animate
{
   0%
   {
       transform: scale(0.5);
       opacity: 0;
   }
   50%
   {
       opacity: 1;
   }
   100%
   {
       transform: scale(1.2);
       opacity: 0;
   }
}

@media (max-width : 768px) {  
.phone-button {   
   //bottom: 70px; /*отступ кнопки снизу от экрана*/
   //right: 5px; /*отступ кнопки слева от экрана(right - справа)*/
 }
}

