.wa-htext{
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 20px;
      }
      #wa-close-okno{
        background-image: url(./close.svg);
        display: block;
        position: absolute;
        top: -15px;
        right: -8px;
        width: 60px;
        height: 60px;
      }
      #wa-link {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
      }
      #okno {
        width: 80%;
        text-align: center;
        padding: 15px;
        border: 3px solid #014C92;
        border-radius: 10px;
        color: #014C92;
        position: fixed;
        top: 10%;
        right: 0%;
        left: 0;
        margin: auto;
        background: #fff;
      }
      #wa-link:target {display: block;}

      .close-wa {
        display: inline-block; 
        margin-bottom: 20px;
        text-decoration: none !important;
        color: #000;
        padding: 10px;
        cursor:pointer;
        box-sizing: border-box;
        background: #FFA801;
        width: 100%;
      }

.wa-wa {
  position: fixed;
  right: -5px;
  bottom: -5px;
  visibility: visible;
  background-color: transparent;
  width: 130px;
  height: 130px;
  cursor: pointer;
  z-index: 200000 !important;
}

.wa-wa:hover {
  opacity: 1;
}


.wa-wa:hover .circle {
  border-color: DodgerBlue;
  opacity: .5;
}

.circle-fill {
  width: 120px;
  height: 120px;
  top: 0;
  left: 0;
  position: absolute;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  background-color: #298C1A;
  -webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;
  -moz-animation: circle-fill-anim 2.3s infinite ease-in-out;
  -ms-animation: circle-fill-anim 2.3s infinite ease-in-out;
  -o-animation: circle-fill-anim 2.3s infinite ease-in-out;
  animation: circle-fill-anim 2.3s infinite ease-in-out;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all 0.5s;
}

.wa-wa:hover .circle-fill {
  background-color: #29A71A;
  opacity: 0.75 !important;
}

.img-circle {
  width: 70px;
  height: 70px;
  top: 25px;
  left: 25px;
  background-size: 100% 100%;
  position: absolute;
  background-image: url(./wa.svg);
  background-color: #29A71A;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 1;
  -webkit-animation: circle-img-anim 1s infinite ease-in-out;
  -moz-animation: circle-img-anim 1s infinite ease-in-out;
  -ms-animation: circle-img-anim 1s infinite ease-in-out;
  -o-animation: circle-img-anim 1s infinite ease-in-out;
  animation: circle-img-anim 1s infinite ease-in-out;
}

.wa-wa:hover .img-circle {
  background-color: #298C1A;
}

.show-on-mobile { display: none; }
/* Smartphone Portrait and Landscape */
@media only screen
and (max-device-width : 767px){ .show-on-mobile { display: inline; }}

@-moz-keyframes circle-anim {
  0% {
    -moz-transform: rotate(0deg) scale(0.5) skew(1deg);
    opacity: .1;
    -moz-opacity: .1;
    -webkit-opacity: .1;
    -o-opacity: .1;
  }
  30% {
    -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .5;
    -moz-opacity: .5;
    -webkit-opacity: .5;
    -o-opacity: .5;
  }
  100% {
    -moz-transform: rotate(0deg) scale(1) skew(1deg);
    opacity: .6;
    -moz-opacity: .6;
    -webkit-opacity: .6;
    -o-opacity: .1;
  }
}
@-webkit-keyframes circle-anim {
  0% {
    -webkit-transform: rotate(0deg) scale(0.5) skew(1deg);
    -webkit-opacity: .1;
  }
  30% {
    -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
    -webkit-opacity: .5;
  }
  100% {
    -webkit-transform: rotate(0deg) scale(1) skew(1deg);
    -webkit-opacity: .1;
  }
}
@-o-keyframes circle-anim {
  0% {
    -o-transform: rotate(0deg) kscale(0.5) skew(1deg);
    -o-opacity: .1;
  }
  30% {
    -o-transform: rotate(0deg) scale(0.7) skew(1deg);
    -o-opacity: .5;
  }
  100% {
    -o-transform: rotate(0deg) scale(1) skew(1deg);
    -o-opacity: .1;
  }
}
@keyframes circle-anim {
  0% {
    transform: rotate(0deg) scale(0.5) skew(1deg);
    opacity: .1;
  }
  30% {
    transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .5;
  }
  100% {
    transform: rotate(0deg) scale(1) skew(1deg);
    opacity: .1;
  }
}
@-moz-keyframes circle-fill-anim {
  0% {
    -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .2;
  }
  50% {
    -moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);
    opacity: .2;
  }
  100% {
    -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .2;
  }
}
@-webkit-keyframes circle-fill-anim {
  0% {
    -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .2;
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1) skew(1deg);
    opacity: .2;
  }
  100% {
    -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .2;
  }
}
@-o-keyframes circle-fill-anim {
  0% {
    -o-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .2;
  }
  50% {
    -o-transform: rotate(0deg) scale(1) skew(1deg);
    opacity: .2;
  }
  100% {
    -o-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .2;
  }
}
@keyframes circle-fill-anim {
  0% {
    transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .2;
  }
  50% {
    transform: rotate(0deg) scale(1) skew(1deg);
    opacity: .2;
  }
  100% {
    transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: .2;
  }
}