/* reaccionar */

.btn_reaccion {
    /* display: inline-flex; */
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
         -o-flex-wrap: wrap;
            flex-wrap: wrap;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 8px;
    cursor: pointer;
    border-radius: 1vh;
    border-color: unset;
    display: inline-block;
    padding-top: 4.3vh;
    background-image: url("../../iconos/share.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
      height: 33px;
      width: 33px;
  }
  
  .btn_reaccion > span {
    color: #fff;
  }
  .whatss{
    height: 3vh;
    width: 3vh;
    background-position: center;
  }
  .face{
    height: 3vh;
    width: 3vh;
    background-position: center;
  }
  
  .btn_reaccion .reacciones {
    display: flex;
    position: absolute;
    bottom: calc(100% + 10px);
    background-color: #0f0f0f;
    padding-top: 1vh;
    padding-left: 2vh;
    padding-right: 1.8vh;
    padding-bottom: 2vh;
    border-radius: 5rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 200ms ease-in;
         -o-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
    -webkit-transform: translateY(15px);
       -moz-transform: translateY(15px);
        -ms-transform: translateY(15px);
         -o-transform: translateY(15px);
            transform: translateY(15px);
  }
  .btn_reaccion:hover .reacciones {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
  .btn_reaccion .reacciones::before {
    content: '';
    display: block;
    border-style: solid;
    border-color: transparent;
    border-width: 12px 12px 12px 12px;
    border-top-color: #050505;
    position: absolute;
    bottom: -24px;
    left: calc(50% - 12px);
  }
  
  .btn_reaccion .reaccionW {
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-right: 2vh;
    /* padding-left: 2vh; */
    background-color: #c2cfc800;
    border-radius: 5rem;
    -webkit-transition: all 200ms ease-in;
         -o-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
  }
  .btn_reaccion .reaccionF {
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    /* padding-left: 2vh; */
    background-color: #c2cfc800;
    border-radius: 5rem;
    -webkit-transition: all 200ms ease-in;
         -o-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
  }
  .btn_reaccion .reaccion + .reaccion {
    margin-left: 5px;
  }
  .btn_reaccion .reaccion i {
    font-size: 1.3rem;
  }
  .btn_reaccion .reaccion > span {
    display: block;
    width: auto;
    font-size: .9em;
    position: absolute;
    top: -1.5rem;
    font-weight: bold;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    color: #333;
    -webkit-transition: all 200ms ease-in;
         -o-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
    -webkit-transform: translateY(15px);
       -moz-transform: translateY(15px);
        -ms-transform: translateY(15px);
         -o-transform: translateY(15px);
            transform: translateY(15px);
  }
  .btn_reaccion .reaccion:nth-child(1):hover > span,
  .btn_reaccion .reaccion:nth-child(2):hover > span,
  .btn_reaccion .reaccion:nth-child(3):hover > span,
  .btn_reaccion .reaccion:nth-child(4):hover > span,
  .btn_reaccion .reaccion:nth-child(5):hover > span {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
  .btn_reaccion .reaccionW:nth-child(1):hover {
    background-color: #05b856;
    color: #fff;
  }
  .btn_reaccion .reaccionF:nth-child(2):hover {
    background-color: #4E88FF;
    color: #fff;
  }
  .btn_reaccion .reaccion:nth-child(3):hover {
    background-color: #FF7D3D;
    color: #fff;
  }
  .btn_reaccion .reaccion:nth-child(4):hover {
    background-color: #A63DFF;
    color: #fff;
  }
  .btn_reaccion .reaccion:nth-child(5):hover {
    background-color: #FF3D3D;
    color: #fff;
  }
  
  /* animacion salto */
  .btn_reaccion .reaccionW:hover {
    -webkit-animation-duration: 500ms;
         -o-animation-duration: 500ms;
            animation-duration: 500ms;
    -webkit-animation-timing-function: ease-out;
         -o-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-name: saltar;
         -o-animation-name: saltar;
            animation-name: saltar;
  }
  .btn_reaccion .reaccionF:hover {
    -webkit-animation-duration: 500ms;
         -o-animation-duration: 500ms;
            animation-duration: 500ms;
    -webkit-animation-timing-function: ease-out;
         -o-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-name: saltar;
         -o-animation-name: saltar;
            animation-name: saltar;
  }
  @keyframes saltar {
    from {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    to {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
  }


  

.share-btn {
  display: inline-block;
  position: relative;
  font-size: 14px;
  line-height: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
}

.share-btn a {
  display: inline-block;
  padding: 5px 10px;
  margin-left: 10px;
  color: #333;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.share-btn a:hover {
  background-color: #eee;
}

@media only screen and (min-width: 390px) and (max-width: 439px){
  .btn_reaccion {
    padding-top: 3.3vh;
  }
}