.tooltip,
[data-tooltip] {
	cursor: pointer;
	display: inline-block;
	position: relative;
}
.tooltip:before,
.tooltip:after,
[data-tooltip]:before,
[data-tooltip]:after {
	pointer-events: none;
	opacity: 0;
	position: absolute;
	transform: translate3d(0, 0, 0);
	transition:
		opacity .2s ease-in-out,
		visibility .2s ease-in-out,
		transform .2s cubic-bezier(.71, 1.7, .77, 1.24);
	visibility: hidden;
}
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
	opacity: 1;
	visibility: visible;
}
.tooltip:before,
[data-tooltip]:before {
	content: "";
	background: transparent;
	border: 6px solid transparent;
	z-index: 1001;
}
.tooltip:after,
[data-tooltip]:after {
	content: attr(data-tooltip);
	padding: 8px;
	color: #FEFEFE;
	font-size: 14px;
	line-height: 1.2;
	background-color: #010101;
	background-color: hsla(0, 0%, 20%, .9);
	/* width: 160px; */
	width: 85px;
	border-radius: 5px;
	z-index: 1000;
}



/* Directions */



/* Top */
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after,
[data-tooltip]:before,
[data-tooltip]:after {
	left: 50%;
	bottom: 100%;
}
.tooltip:before,
.tooltip-top:before,
[data-tooltip]:before {
	margin-left: -6px;
	margin-bottom: -12px;
	border-top-color: #010101;
	border-top-color: hsla(0, 0%, 20%, .9);
}
.tooltip:after,
.tooltip-top:after,
[data-tooltip]:after {
	/* margin-left: -80px; */
	margin-left: -50px;
}
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after,
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
	transform: translateY(-12px);
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
	left: auto;
	right: 100%;
	bottom: 50%;
}
.tooltip-left:before {
	margin-left: 0;
	margin-right: -12px;
	margin-bottom: 0;
	border-top-color: transparent;
	border-left-color: #010101;
	border-left-color: hsla(0, 0%, 20%, .9);
}
.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
	transform: translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
	top: 100%;
	left: 50%;
	bottom: auto;
}
.tooltip-bottom:before {
	margin-top: -12px;
	margin-bottom: 0;
	border-top-color: transparent;
	border-bottom-color: #010101;
	border-bottom-color: hsla(0, 0%, 20%, .9);
}
.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
	transform: translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
	left: 100%;
	bottom: 50%;
}
.tooltip-right:before {
	margin-left: -12px;
	margin-bottom: 0;
	border-top-color: transparent;
	border-right-color: #010101;
	border-right-color: hsla(0, 0%, 20%, .9);
}
.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
	transform: translateX(12px);
}

.tooltip-left:before,
.tooltip-right:before {
	top: 3px;
}
.tooltip-left:after,
.tooltip-right:after {
	margin-left: 0;
	margin-bottom: -16px;
}