.wrapper { position: relative; z-index:999; display:none;}
.wrapper:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }
.wrapper .btn2 {
  width:24px; float:right;
  height:24px;
  position: relative;
  z-index: 3; padding-top:3.5%;
}

.wrapper .tooltip { text-align:center;
  width: 50px;
  height: auto;
  border-radius:10px;
  position: absolute;
  background: #fff;
  z-index:9;
  padding:15px;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  opacity: 0;
  top:50px; right:0;
  justify-content: space-around;
  -webkit-box-align: center;
          align-items: center;
  -webkit-transition: opacity .15s ease-in, top .15s ease-in, width .15s ease-in;
  transition: opacity .15s ease-in, top .15s ease-in, width .15s ease-in;
}
.wrapper input {
  height: 100%;
  width: 50%;
  border-radius: var(--border-radius);
  cursor: pointer;
  position: absolute;
  z-index: 5;
  opacity: 0; right:0;
}
.wrapper input:checked ~ .btn2 {
  -webkit-animation: plus-animation .5s ease-out forwards;
          animation: plus-animation .5s ease-out forwards;
}
.wrapper input:checked ~ .tooltip {
  width:70px;
  height: auto;
  -webkit-animation: stretch-animation 1s ease-out forwards .15s;
          animation: stretch-animation 1s ease-out forwards .15s;
   top:50px;
  opacity: 1;right:0;
}

.wrapper p{padding:5px 0; margin:5px 0;}
.wrapper p a:hover{color:#0049db; font-weight:bold;}
@keyframes stretch-animation {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  10% {
    -webkit-transform: scale(1.1, 0.9);
            transform: scale(1.1, 0.9);
  }
  30% {
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.05, 0.95);
            transform: scale(1.05, 0.95);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@media (max-width:880px){
.wrapper{display:block;}

	}