#pw-container { --pw-gap: 20px; }

#pw-container.pw-right .phone-button { right: var(--pw-gap)}
#pw-container.pw-left  .phone-button { left:  var(--pw-gap)}


#pw-container.only-mobile .phone-button { display: none; }
@media (max-width: 800px) {
  #pw-container.only-mobile .phone-button { display: block; bottom: 0px;}
}

#pw-container .phone-button:nth-child(1) { bottom: 0; }
#pw-container .phone-button:nth-child(2) { bottom: 65px; }
#pw-container .phone-button:nth-child(3) { bottom: 130px; }

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?ik48df');
  src:  url('fonts/icomoon.eot?ik48df#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?ik48df') format('truetype'),
    url('fonts/icomoon.woff?ik48df') format('woff'),
    url('fonts/icomoon.svg?ik48df#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
 /* line-height: 1;*/

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-phone:before {
  content: "\e900";
}
.icon-whatsapp:before {
  content: "\e901";
}
.icon-telegram:before {
  content: "\e902";
}
.phone-button {
    position: fixed;
    bottom: 10px;
    transform: translateY(-50%);
    background: #25D366;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    color: #fff;
    text-align: center;
    line-height: 55px;
    font-size: 30px;
    z-index: 9999;
	text-decoration: none;
}
.phone-button a {
    color: #fff;
}
.phone-button.is-animated:before,
.phone-button.is-animated:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #25D366;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
.phone-button.is-animated:after{
    animation-delay: .5s;
}
.phone-button i {
        color:#fff;
        transition:.3s;
}
.phone-button.is-animated i {
        animation: 1200ms ease 0s normal none 1 running shake;	//shake 1.2s infinite
        animation-iteration-count: infinite;
}
@keyframes animate{
	0% {transform: scale(0.5);opacity: 0;}
	50% {opacity: 1;}
	100% {transform: scale(1.2);opacity: 0;}
}
@keyframes shake {
	0% {transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);}
	10% {transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);-webkit-transform: rotateZ(-30deg);}
	20% {transform: rotateZ(15deg);-ms-transform: rotateZ(15deg);-webkit-transform: rotateZ(15deg);}
	30% {transform: rotateZ(-10deg);-ms-transform: rotateZ(-10deg);-webkit-transform: rotateZ(-10deg);}
	40% {transform: rotateZ(7.5deg);-ms-transform: rotateZ(7.5deg);-webkit-transform: rotateZ(7.5deg);}
	50% {transform: rotateZ(-6deg);-ms-transform: rotateZ(-6deg);-webkit-transform: rotateZ(-6deg);}
	60% {transform: rotateZ(5deg);-ms-transform: rotateZ(5deg);-webkit-transform: rotateZ(5deg);}
	70% {transform: rotateZ(-4.28571deg);-ms-transform: rotateZ(-4.28571deg);-webkit-transform: rotateZ(-4.28571deg);}
	80% {transform: rotateZ(3.75deg);-ms-transform: rotateZ(3.75deg);-webkit-transform: rotateZ(3.75deg);}
	90% {transform: rotateZ(-3.33333deg);-ms-transform: rotateZ(-3.33333deg);-webkit-transform: rotateZ(-3.33333deg);}
	100% {transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);}
}