/* messagers fixed buttons */
.messagers-block{
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 50px;
  right: 30px;
  z-index: 1000;
}
.messagers-block-main-btn{
  background: url(../images/widget/feedbackbutton.svg) 50% 50% no-repeat #26C24A;
  border: 2px solid #26C24A;
  background-size: 80%;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  cursor: pointer;
  animation: btnpulse 2s infinite;
  position: relative;
  z-index: 10;
}

@-webkit-keyframes btnpulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(38,194,74, 0.9);
  }
  70% {
    -webkit-box-shadow: 0 0 0 20px rgba(38,194,74, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(38,194,74, 0);
  }
}
@keyframes btnpulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(38,194,74, 0.9);
    box-shadow: 0 0 0 0 rgba(38,194,74, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 20px rgba(38,194,74, 0);
    box-shadow: 0 0 0 20px rgba(38,194,74, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(38,194,74, 0);
    box-shadow: 0 0 0 0 rgba(38,194,74, 0);
  }
}
.messagers-block-main-btn:hover {
  animation: none;
}
.messagers-block.active .messagers-block-main-btn{
  background: url(../images/widget/feedbackbutton-active.svg) 50% 50% no-repeat #fff;
  animation: none;
}
.messagers-block-buttons{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.messagers-block-buttons > a, .messagers-block-buttons.development a{
  position: absolute;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  z-index: 5;
  display: block;
  width: 40px;
  height: 40px;
  margin: auto;
  cursor: pointer;
  border-radius: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

.messagers-block-buttons > a:hover, .development a:hover{
  -webkit-filter: brightness(114%);
  filter: brightness(114%);
}
.messagers-block-buttons > a.telegram-btn, .development a.telegram-btn{
  background: #2ca8dd url(../images/widget/telegram.svg) 50% no-repeat;
  background-size: 80%;
}
.messagers-block-buttons > a.whatsap-btn{
  background: #2AC54D url(../images/widget/whatsapp.svg) 50% no-repeat;
  background-size: 60%;
}
.messagers-block-buttons > a.viber-btn{
  background: #7360F2 url(../images/widget/viber.svg) 50% no-repeat;
  background-size: 60%;
}
.messagers-block-buttons > a.phone-btn{
  background: #2e79f2 url(../images/widget/messagers-btns-phone.svg) 50% no-repeat;
  background-size: 50%;
}
.messagers-block-buttons > a.max-btn{
  background: #2e79f2 url(../images/widget/max.svg) 50% no-repeat;
  background-size: 50%;
}

.messagers-block.active .messagers-block-buttons > a:nth-of-type(4){
  -webkit-transform: translate( 0, -190px);
  transform: translate( 0, -190px);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}

.messagers-block.active .messagers-block-buttons > a:nth-of-type(1) {
  -webkit-transform: translate( 0, -55px);
  transform: translate( 0, -55px);
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}
.messagers-block.active .messagers-block-buttons > a:nth-of-type(2){
  -webkit-transform: translate( 0, -100px);
  transform: translate( 0, -100px);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}
.messagers-block.active .messagers-block-buttons > a:nth-of-type(3){
  -webkit-transform: translate( 0, -145px);
  transform: translate( 0, -145px);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.messagers-block.active .messagers-block-buttons > a, .development a{
  visibility: visible;
  opacity: 1;
}

/* /. messagers fixed buttons */