/* Set the style of the floating menu icon on small screens */
    .float {
      display: none;
      position: fixed;
      background-color: #ff0000;
      color: #FFF;
      border-radius: 50px;
      text-align: center;
      /* box-shadow: 2px 2px 3px #999; */
      z-index: 100;
      cursor: pointer;
      width: 50px;
      height: 50px;
      bottom: 180px;
      right: 15px;
      opacity: 0.99;
    }

    .float i {
      margin-top: 12px;
      font-size: 1.5em;
    }

    .float-icons {
      position: fixed;
      bottom: 240px;
      right: 10px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease-in-out;
    }

    .float:hover .float-icons {
      opacity: 1;
      visibility: visible;
    }

    .float-icons a {
      display: block;
      border-radius: 50%;
      text-align: center;
      background: #25d366;
      color: #ffffff;
      /* box-shadow: 1px 1px 2px #999; */
      transition: all 0.3s ease-in-out;
      margin: 8px;
      width: 40px;
      height: 40px;
      line-height: 32px;
    }

    .float-icons a:nth-of-type(2) {
      background: #1800cc;
    }

    .float-icons a:nth-of-type(3) {
      background: #0088cc;
    }

    .float-icons a:nth-of-type(4) {
      background: #9b1dd5;
    }

    .float-icons a:nth-of-type(5) {
      background: #ffc107;
    }


    /* .float-icons a:hover {
        background: #555;
        color: #FFF;
        box-shadow: 2px 2px 3px #999;
      } */

    .icon-circle i {
      margin-top: 8px;
    }

    @media (max-width: 642.9px) {
      .float {
        display: block;
      }
    }