.st1 { fill: #FFFFFF; }
.st2 { fill: none; stroke: #808080; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.st0 { fill: #7b7b7b; }

.call_me {
  position:fixed;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  z-index: 100;
  font-size: 0;
}

.call_me img {
    max-width: 100%;
    height: auto;
    border-radius: 100%;
}

.call_bottom_left {
  left:40px;
}

.call_bottom_right {
  right:40px;
}

.call_bottom_center {
  left:0px;
  right:0px;
  margin:0 auto;
  width:auto!important;

}

.call_middle_center {

}

.call_bottom_center div,
.call_top_center div,
.call_top_left div,
.call_top_right div  {
  margin:0 5px;
}

.call_top_center {
  left:0px;
  right:0px;
  margin:0 auto;
  width:auto!important;
}

.call_top_left {
  width:auto!important;
  margin:0;
}

.call_top_right {
  margin:0 0 0 auto;
  width:auto!important;
}

.call_me svg {
  width:100%;
  height:100%;
}

.call_close {
    width: 55px;
    height: 55px;
    border-radius: 100%;
    margin: 5px 0;
    position: relative;
    cursor:pointer;
    z-index:1;
    text-align: left;
}

.call_button {
  display:none;
width: 100%;
    height: 100%;
    border-radius: 100%;
    margin: 5px 0;
    cursor: pointer;
    position: relative;
    z-index: 10;
}


.call_close span {
  opacity:0;
    position: absolute;
    width: 20px;
    height: 2px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.call_close span:after {
  content:'';
  position:absolute;
  width:20px;
  height:2px;
  background:#fff;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.call_close_active {
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform:rotate(360deg);
      -ms-transform:rotate(360deg);
          transform:rotate(360deg);
}


.call_close_hover {
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  -webkit-transition: 0.4s;
  transition: 0.4s;

}

@media screen and (min-width:1025px) {
  .display_desktope.call_active  {display:block;}
}
@media screen and (max-width:1024px) {
  .display_mobile.call_active  {display:block;}
}



.shake {
  -webkit-animation: shake 5s cubic-bezier(.36,.07,.19,.97) both infinite;
          animation: shake 5s cubic-bezier(.36,.07,.19,.97) both infinite;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}



@-webkit-keyframes shake {
  1%, 9% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
  }

  2%, 8% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0);
  }

  3%, 5%, 7% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0);
  }

  4%, 5% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0);
  }

  20%{
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}



@keyframes shake {
  1%, 9% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
  }

  2%, 8% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0);
  }

  3%, 5%, 7% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0);
  }

  4%, 5% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0);
  }

  20%{
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}


.circul {
  -webkit-animation: circul .9s ease-in-out infinite;
          animation: circul .9s ease-in-out infinite;
}


@-webkit-keyframes circul {
  0%, 100% {
    -webkit-transform:rotate(-20deg);
            transform:rotate(-20deg);
  }

  50% {
    -webkit-transform:rotate(21deg);
            transform:rotate(21deg);
  }
}


@keyframes circul {
  0%, 100% {
    -webkit-transform:rotate(-20deg);
            transform:rotate(-20deg);
  }

  50% {
    -webkit-transform:rotate(21deg);
            transform:rotate(21deg);
  }
}



.pulse::before,
.pulse::after {
 content: '';
 position: absolute;
 border: 1px solid #29AEE3;
 left: -20px;
 right: -20px;
 top: -20px;
 bottom: -20px;
 border-radius: 50%;
 -webkit-animation: pulse 6s linear infinite;
         animation: pulse 6s linear infinite;
 opacity: 0;
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
}
.pulse::after {
 -webkit-animation-delay: .5s;
         animation-delay: .5s;
}


@-webkit-keyframes pulse {
 0% {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
 }
 10% {
  opacity: 1;
 }
 20% {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  opacity: 0;
 }
}


@keyframes pulse {
 0% {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
 }
 10% {
  opacity: 1;
 }
 20% {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  opacity: 0;
 }
}

.call_close_active path {
  opacity:0;
  -webkit-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
}

.call_close_active span {
  opacity:1;
  -webkit-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
}

.call_close_hover path {
  opacity:0;
  -webkit-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
}

.call_close_hover span {
  opacity:1;
  -webkit-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
}
