.parpadea {
    
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  }
  
  @-moz-keyframes parpadeo{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
  }
  
  @-webkit-keyframes parpadeo {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
     100% { opacity: 1.0; }
  }
  
  @keyframes parpadeo {  
    0% { opacity: 1.0; }
     50% { opacity: 0.0; }
    100% { opacity: 1.0; }
  }

  .float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:20px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
font-size:30px;
    box-shadow: 2px 2px 3px #999;
z-index:100;
}

.floatPhone{
    position:fixed;
    width:60px;
    height:60px;
    bottom:125px;
    right:20px;
    background-color:red;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
}

.my-float{
    margin-top:16px;
}

@media (max-width: 800px) {
  .onlyweb {
      display: none;
  }            
  div.avatar {
      /* cambia estos dos valores para definir el tamaño de tu círculo */
      height: 100px;
      width: 100px;
      /* los siguientes valores son independientes del tamaño del círculo */
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 50%;
      background-size: 110% auto;
  }
}
@media (min-width: 800px) {
  .onlymovile {
      display: none;
  }
  div.avatar {
  /* cambia estos dos valores para definir el tamaño de tu círculo */
  height: 200px;
  width: 200px;
  /* los siguientes valores son independientes del tamaño del círculo */
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 50%;
  background-size: 110% auto;
}
}