/* Base styles for the element that has a ttip */
[data-ttip],
.ttip {
  position: relative;
  cursor: pointer; }

/* Base styles for the entire ttip */
[data-ttip]:before,
[data-ttip]:after,
.ttip:before,
.ttip:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transform: translate3d(0, 0, 0);
  pointer-events: none; }

/* Show the entire ttip on hover and focus */
[data-ttip]:hover:before,
[data-ttip]:hover:after,
[data-ttip]:focus:before,
[data-ttip]:focus:after,
.ttip:hover:before,
.ttip:hover:after,
.ttip:focus:before,
.ttip:focus:after {
  visibility: visible;
  opacity: 1; }

/* Base styles for the ttip's directional arrow */
.ttip:before,
[data-ttip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: ""; }

/* Base styles for the ttip's content area */
.ttip:after,
[data-ttip]:after {
  text-align: center;
  z-index: 1000;
  padding: 8px;
  height: auto;
  background-color: #000;
  background-color: rgba(51, 51, 51, 0.9);
  color: #FFF;
  content: attr(data-ttip);
  font-size: 12px;
  line-height: 1.2;
  border-radius: 2px;
  white-space: pre;
  position: absolute; }

/* Directions */
/* Top (default) */
[data-ttip]:before,
[data-ttip]:after,
.ttip:before,
.ttip:after,
.ttip-top:before,
.ttip-top:after {
  bottom: 100%;
  left: 50%; }

[data-ttip]:before,
.ttip:before,
.ttip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #000;
  border-top-color: rgba(51, 51, 51, 0.9); }

/* Horizontally align top/bottom ttips */
[data-ttip]:after,
.ttip:after,
.ttip-top:after {
  transform: translate(-50%, 0px); }

[data-ttip]:hover:before,
[data-ttip]:hover:after,
[data-ttip]:focus:before,
[data-ttip]:focus:after,
.ttip:hover:before,
.ttip:hover:after,
.ttip:focus:before,
.ttip:focus:after,
.ttip-top:hover:before,
.ttip-top:hover:after,
.ttip-top:focus:before,
.ttip-top:focus:after {
  transform: translate(-50%, -12px); }

/* Left */
.ttip-left:before,
.ttip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto; }

.ttip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: rgba(51, 51, 51, 0.9); }

.ttip-left:hover:before,
.ttip-left:hover:after,
.ttip-left:focus:before,
.ttip-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform: translateX(-12px);
  transform: translateX(-12px); }

/* Bottom */
.ttip-bottom:before,
.ttip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%; }

.ttip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: rgba(51, 51, 51, 0.9); }

.ttip-bottom:hover:before,
.ttip-bottom:hover:after,
.ttip-bottom:focus:before,
.ttip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform: translateY(12px);
  transform: translateY(12px); }

/* Right */
.ttip-right:before,
.ttip-right:after {
  bottom: 50%;
  left: 100%; }

.ttip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: rgba(51, 51, 51, 0.9); }

.ttip-right:hover:before,
.ttip-right:hover:after,
.ttip-right:focus:before,
.ttip-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform: translateX(12px);
  transform: translateX(12px); }

/* Move directional arrows down a bit for left/right ttips */
.ttip-left:before,
.ttip-right:before {
  top: 3px; }

/* Vertically center ttip content for left/right ttips */
.ttip-left:after,
.ttip-right:after {
  margin-left: 0;
  margin-bottom: -16px; }