/* ------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------!!! TOOLTIPS !!!--------------------------------------------------- */


    [data-tooltip]{position:relative}
    [data-tooltip]::before,[data-tooltip]::after{
      display:none;position:absolute;opacity:0;
      text-transform:none;font-size:.8em;line-height:1;letter-spacing:1px;
      background:#000;border:1px solid var(--accent)
    }

    [data-tooltip]::after{
      content:attr(data-tooltip);
      padding:6px 8px;width:18em;
      border-radius:3px;
      color:var(--link);text-align:center;white-space:normal;
      z-index:100
    }

    [data-tooltip]:hover::before,[data-tooltip]:hover::after{display:block}
    [data-tooltip='']::before,[data-tooltip='']::after{display:none !important}


  /* Positioning */
    [data-tooltip]:not([data-flow])::before,
    [data-tooltip][data-flow^="top"]::before {
      bottom:100%;
      border-bottom-width:0;border-top-color:var(--accent)
    }

    [data-tooltip]:not([data-flow])::after,[data-tooltip][data-flow^="top"]::after{bottom:calc(100% + 5px)}
    [data-tooltip][data-flow^="bottom"]::after {top:calc(100% + 5px)}

    [data-tooltip]:not([data-flow])::before,[data-tooltip]:not([data-flow])::after,
    [data-tooltip][data-flow^="top"]::before,[data-tooltip][data-flow^="top"]::after{left:50%;transform:translate(-50%, -0.4em)}
    [data-tooltip][data-flow^="bottom"]::before,[data-tooltip][data-flow^="bottom"]::after{left:50%;transform:translate(-50%, 0.4em)}

  /* Animation */
    @keyframes tooltip-vert{to {opacity:1;transform:translate(-50%, 0)}}
    [data-tooltip]:not([data-flow]):hover::before,[data-tooltip]:not([data-flow]):hover::after,
    [data-tooltip][data-flow^="top"]:hover::before,[data-tooltip][data-flow^="top"]:hover::after,
    [data-tooltip][data-flow^="bottom"]:hover::before,[data-tooltip][data-flow^="bottom"]:hover::after{animation:tooltip-vert .5s ease-out forwards}
    
    @media screen and (max-width:900px){@keyframes tooltip-vert{to {opacity:0}}}