.wrapper {
  display: flex;
  justify-content: end;
  margin-right: 20px;
  margin-bottom: 5px;

  .openbutton {
    display: inline-block;
    height: 60px;
    width: 60px;
    overflow: hidden;
    background: #fff;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-out;

    &:hover {
      width: 170px;

      .icon {
        background: white;

        i {
          color: #fff;
        }
      }
    }

    .openicon {
      display: inline-block;
      height: 60px;
      width: 60px;
      text-align: center;
      border-radius: 50px;
      box-sizing: border-box;
      line-height: 60px;
      transition: all 0.3s ease-out;

      i {
        font-size: 25px;
        line-height: 60px;
        transition: all 0.3s ease-out;
      }
    }

    .openspan {
      font-size: 20px;
      font-weight: 400;
      line-height: 60px;
      text-align: center;
      transition: all 0.3s ease-out;
      font-family: Yantramanav;
      color: black;
    }
  }

  .closebutton {
    display: inline-block;
    height: 40px;
    width: 40px;
    overflow: hidden;
    background: #fff;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-out;

    &:hover {
      width: 100px;

      .closeicon {
        background: white;

        i {
          color: #fff;
        }
      }
    }

    .closecontent {
      margin-top: -11px;

      .closeicon {
        display: inline-block;
        height: 40px;
        width: 40px;
        text-align: center;
        border-radius: 50px;
        box-sizing: border-box;
        line-height: 60px;
        transition: all 0.3s ease-out;

        i {
          font-size: 25px;
          line-height: 60px;
          transition: all 0.3s ease-out;
        }
      }

      .closespan {
        font-size: 20px;
        font-weight: 400;
        line-height: 60px;
        text-align: center;
        transition: all 0.3s ease-out;
        font-family: Yantramanav;
        color: black;
        margin-left: -5px;
      }
    }
  }

  @media screen and (max-width: 480px) {
    display: block !important;
    float: right !important;
  }
}