:root{
  --whatsapp: #25D366;
  --whatsapp-hover: #21bd5c;
}


#wpp-fix{
  position: fixed;
  bottom: 40px;
  right: 15px;
  z-index: 10;
}
#wpp-fix a{
  background: var(--whatsapp);
  display: flex;
  z-index: 1;
  position: relative;
  padding: 15px;
  border-radius: 50%;
  /* box-shadow: 0px 3px 10px rgba(#25D366, .56); */
  transform: scale(1);
}
#wpp-fix a:hover{
  transform: scale(1.05);
  /* background: darken(#25D366, 5%); */
}
#wpp-fix a.hide-this{
  opacity: 0;
  visibility: hidden;
  transform: scale(.5);
}
#wpp-fix a.hide-this+.form-wpp{
  width: 300px;
  visibility: visible;
  opacity: 1;
}
#wpp-fix a.hide-this +.form-wpp.mask{
  opacity: 1;
  visibility: visible;
}
#wpp-fix a.hide-this+.form-wpp .wpcf7{
  visibility: visible;
} 
#wpp-fix a +.form-wpp{
  transition: all .3s ease;
  position: absolute;
  box-shadow: 0 0 20px 0 rgba(0,0,0 , .12);
  border-radius: 3px;
  bottom: 0;
  right: 0px;
  width: 60px;
  opacity: 0;
  overflow: hidden;
}
#wpp-fix a +.form-wpp .mask{
  transition: all .3s ease;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0, .8);
  opacity: 0;
  visibility: hidden;
}
#wpp-fix a +.form-wpp .wpcf7{
  transition: all .3s ease;
  background: #FFF;
  padding: 15px;
  float: left;
  position: relative;
  width: 100%;
  visibility: hidden;
}
#wpp-fix a +.form-wpp form{
  width: calc(300px - 30px);
  transition: all .3s ease;
}
#wpp-fix a +.form-wpp form label{
  margin-bottom: 2px;
}
#wpp-fix a +.form-wpp form .campo{
  margin-bottom: 15px;
}
#wpp-fix a +.form-wpp form .wpcf7-response-output{
  font-size: .9rem;
  line-height: 1.2;
}

#wpp-fix a +.form-wpp form.sent{
  height: 130px;
}
#wpp-fix a +.form-wpp form.sent .wpcf7-response-output{
  position: absolute;
  width: 100%;
  height: calc(100% + 15px);
  background: #FFF;
  border: none;
  left: 0;
  font-size: 1.4rem;
  text-align: center;
}

#wpp-fix a +.form-wpp .head-wpp{
  width: 300px;
  padding: 12px 8px;
  background: var(--whatsapp-hover);
  position: relative;
}
#wpp-fix a +.form-wpp .head-wpp h3{
  word-break: keep-all;
  padding-right: 30px;
  font-size: 1.1rem;
  color: #FFF;
  margin: 0;
}

#wpp-fix a +.form-wpp i{
  color: #FFF;
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 5px;
  padding: 7px 8px;
}

#wpp-fix a svg{
  width: initial;
  display: block;
  height: 30px;
}
#wpp-fix a svg path{
  fill: #FFF;
}
#wpp-fix.left{
  left: 15px;
  right: initial;
}
#wpp-fix.left a + .form-wpp{
  left: 0;
  right: initial;
}

#wpp-fix.shake a{
  -webkit-animation: 1s wiggle ease infinite;
  -moz-animation:    1s wiggle ease infinite;
  -o-animation:      1s wiggle ease infinite;
  animation:         1s wiggle ease infinite;
}
#wpp-fix.shake a::before{
  transition: all .3s ease;
  background: rgba(37,211,102, .6);
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  top: 0px;
  right: 0;
  -webkit-animation: pulse 2s infinite;
  -moz-animation:    pulse 2s infinite;
  -o-animation:      pulse 2s infinite;
  animation:         pulse 2s infinite;
}


@media (max-width: 767px) {
  #wpp-fix{
    bottom: 15px;
  }
  #wpp-fix svg{
    height: 30px;
  }  
  #wpp-fix a{
    padding: 10px;
  }
  #wpp-fix a + .form-wpp .head-wpp{
    width: 290px;
  }
  #wpp-fix a + .form-wpp form{
    width: calc(300px - 40px);
  }             
  #wpp-fix a + .form-wpp input[type="text"],
  #wpp-fix a + .form-wpp input[type="email"]{
    padding: 8px;
  }
  #wpp-fix a.hide-this +.form-wpp{
    width: 290px;
  }
}


@-webkit-keyframes wiggle {
  0% {
    transform: rotate(-3deg);
  }
  20% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes wiggle {
  0% {
    transform: rotate(-3deg);
  }
  20% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes wiggle {
  0% {
    transform: rotate(-3deg);
  }
  20% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes wiggle {
  0% {
    transform: rotate(-3deg);
  }
  20% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0);
  }
}


@-webkit-keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@-moz-keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@-o-keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}