/* Footer and menu social icons: light up in brand colours on hover.
   The glyph (image element) sits above the 48px frame (shape element), so the
   glyph lets the pointer through and the frame takes the hover. */
.tn-elem[data-elem-type="image"]:has(> a.tn-atom[href*="linkedin.com/company/witisi"]),
.tn-elem[data-elem-type="image"]:has(> a.tn-atom[href*="instagram.com/witisi"]),
.tn-elem[data-elem-type="image"]:has(> a.tn-atom[href*="flickr.com/photos/witisi"]) {
  pointer-events: none;
}
.tn-elem[data-elem-type="shape"] > a.tn-atom[href*="linkedin.com/company/witisi"],
.tn-elem[data-elem-type="shape"] > a.tn-atom[href*="instagram.com/witisi"],
.tn-elem[data-elem-type="shape"] > a.tn-atom[href*="flickr.com/photos/witisi"] {
  transition: opacity .25s ease, background-color .25s ease, border-color .25s ease !important;
}
@media (hover: hover) {
  .tn-elem[data-elem-type="shape"] > a.tn-atom[href*="linkedin.com/company/witisi"]:hover {
    background: #0a66c2 !important; border-color: #0a66c2 !important; opacity: 1 !important;
  }
  .tn-elem[data-elem-type="shape"] > a.tn-atom[href*="instagram.com/witisi"]:hover {
    background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%) !important;
    border-color: #d62976 !important; opacity: 1 !important;
  }
  .tn-elem[data-elem-type="shape"] > a.tn-atom[href*="flickr.com/photos/witisi"]:hover {
    background: #0063dc !important; border-color: #0063dc !important; opacity: 1 !important;
  }
}