/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  /* background-color: #333; */
  background-color: #9A9696;;
  text-align: center;
  padding: 1px;
  border: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  font-family: Vollkorn;
  color: black;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;

  width: 70px;
  top: 102%;
  left: 50%;
  margin-left: -35px; /* Use half of the width (120/2 = 60), to center the tooltip */

  transform: translateY(100%);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  transform: translateY(0);
}

.tooltiptext:hover {
  background-color: black;
  color: #7c7c7c;
  border-color:  #333;
}


#back-to-top-btn {
    display: none;
    position: fixed;
    /* bottom: 20px; */
    bottom: 2.7vh;
    right: 1.75vw;
    /* font-size: 36px; */
    font-size: 2.5vw;
    width: 60px;
    height: 60px;
    background-color: black;
    /* color: #333; */
    color: #9A9696;;
    cursor: pointer;
    outline: none;
    /* border: 1px solid #333; */
    border: 1.5px solid #9A9696;;
    border-radius: 50%;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-property: background-color, color;
    z-index: 1;
  }
  #back-to-top-btn:hover, #back-to-top-btn:focus {
    /* background-color: #333; */
    background-color: #9A9696;
    color: black;
    border-color: black;
    border-width: 1.5px;
  }

  #back-to-top-btn i {
    transform: translateY(-3px);
  }

  @media(max-width: 992px) {
    #back-to-top-btn { font-size: 33px; width: 40px; height: 40px; bottom: 15px; right: 15px; }
    #back-to-top-btn i { transform: translateY(-1px); }
  }
  @media(max-width:768px) {
    #back-to-top-btn { font-size: 27px; width: 32px; height: 32px; bottom: 6px; right: 6px; }
    #back-to-top-btn i { transform: translateY(-0.5px); }
  }

  /* Animations */
  .btnEntrance {
    animation: btnEntrance 0.5s both
  }

  /* fadeInUp */
  @keyframes btnEntrance {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .btnExit {
    animation: btnExit 0.25s both
  }

  /* fadeOutDown */
  @keyframes btnExit {
    from { opacity: 1; }
    to { 
      opacity: 0;
      transform: translateY(100%);
    }
  }