.whatsapp{
    width:55px;
    height:55px;
    background:url('icons/whatsapp1.png');
    background-size:cover;
    position:fixed;
    bottom:20px;
    left:20px;
    border-radius:50%;
    z-index: 1;
    opacity:0.75;
    transition: all 0.3s;
    display:none;
    animation-name: icondisplay;
    animation-duration: 1.15s;
  }

  @media(hover:hover)
  {
    .whatsapp:hover{
      background:url('icons/whatsapp2.png');
      background-size:cover; 
      opacity:1;
      cursor:pointer;
    }
  }
 
  
  @keyframes icondisplay{
    from{
      opacity:0;
    }
    to{
       opacity:1;
    }
  }


  .scrolltop{
    width:30px;
    height:30px;
    font-size: x-large;
    font-weight: bold;
    border-radius: 50%;
    background: url('icons/goup.png');
    background-repeat: no-repeat;
    background-size: cover; 
    background-color: transparent;
    position: fixed;
    right: 20px;
    bottom: -40px;
    border: none;
    z-index: 1; 
    transition: all 1s;
    opacity:0.5;
  }
  
  @media(hover:hover)
  {
    .scrolltop:hover{
      cursor:pointer;
      opacity:1;
    }
  }


  /* .mail{
    width:55px;
    height:55px;
    background:url('mail1.png'), #ffffff;
    background-size:cover;
    position:fixed;
    bottom:135px;
    right:10px;
    border-radius:50%;
    z-index: 1;
    cursor: pointer;
    opacity:0.75;
    transition: all 0.3s;
    display:none;
    animation-name: display;
    animation-duration: 1.15s;
  }
  .mail:hover{
    background:url('mail2.png'), #ffffff; 
    background-size:cover;
    opacity:1;
    transition: all 0.3s;
  } */