/* Styles for the tooltips */

.title-tooltip {
  background: #333;
  border: 2px solid #333;
  border-radius: 1em;
    bottom: 2em;
  color: #fff;
  font-size: .7em;
    left: calc(50% - 8em);
  opacity: 0;
  padding: .25em .5em;
  position: absolute;
  text-align: center;
  -webkit-transform: translateY(-1em) rotateX(45deg);
          transform: translateY(-1em) rotateX(45deg);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transition: visibility 0s .5s,
              opacity .2s .1s ease-out,
              -webkit-transform .4s cubic-bezier(.68,-0.65,.29,1.59);
  transition: visibility 0s .5s,
              opacity .2s .1s ease-out,
              -webkit-transform .4s cubic-bezier(.68,-0.65,.29,1.59);
  transition: visibility 0s .5s,
              opacity .2s .1s ease-out,
              transform .4s cubic-bezier(.68,-0.65,.29,1.59);
  transition: visibility 0s .5s,
              opacity .2s .1s ease-out,
              transform .4s cubic-bezier(.68,-0.65,.29,1.59),
              -webkit-transform .4s cubic-bezier(.68,-0.65,.29,1.59);
  visibility: hidden;
  width: 16em;
  z-index: 10;
}

.title-tooltip::after {
  border-color: #333 transparent;
  border-radius: 0;
  border-style: solid;
  border-width: .2em .2em 0 .2em;
    bottom: -.2em;
  content: "";
    left: calc(50% - .2em);
  position: absolute;
  width: 0;
}

.anchor-tooltip:hover .title-tooltip {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  -webkit-transition: opacity .2s ease-out,
              -webkit-transform .4s cubic-bezier(0,1,.3,1);
  transition: opacity .2s ease-out,
              -webkit-transform .4s cubic-bezier(0,1,.3,1);
  transition: opacity .2s ease-out,
              transform .4s cubic-bezier(0,1,.3,1);
  transition: opacity .2s ease-out,
              transform .4s cubic-bezier(0,1,.3,1),
              -webkit-transform .4s cubic-bezier(0,1,.3,1);
  visibility: visible;
}