/* When a user hovers over a .hover-d element, the child .hover-d-show element will be visible and the child .hover-d-none element will not be visible */
.hover-d .hover-d-none{
    transition: transform 0.3s, opacity 0.3s;
    transform: scaleX(1);
    opacity: 1;
  }
  .hover-d .hover-d-show{
    position: absolute;
    width: 100%;
    text-align:center;
    top: 10%;
    left:0;
    transition: transform 0.3s, opacity 0.3s;
    transform: scaleX(0);
    opacity: 0;
  }
  .hover-d:hover .hover-d-none {
    transform: scaleX(0);
    opacity: 0;
  }
  
  .hover-d:hover .hover-d-show {
    transform: scaleX(1);
    opacity: 1;
  }
    
  .hover-d {
    position: inherit;
    cursor: pointer;
    color: black;
  }

.hover-d:hover {
  text-decoration: none;
}

.hover-d a:hover {
  text-decoration: none;
}

.hover-d .hover-d-show .modal {
  transform: unset;
  opacity: 1;
}