.tooltip, .arrow:after {
  	background: black;
 	border: 2px solid white;
	}

.tooltip {
  	pointer-events: none;
  	opacity: 0;
  	display: inline-block;
  	position: absolute;
  	padding: 10px 20px;
  	color: white;
  	border-radius: 20px;
  	margin-top: 20px;
  	text-align: center;
  	font: bold 14px "Helvetica Neue", Sans-Serif;
  	font-stretch: condensed;
  	text-decoration: none;
  	text-transform: uppercase;
  	box-shadow: 0 0 7px black;
	}

.tooltip-background {
	display: inline-block;
	text-align:center;
	font-size:11px;
	font-weight: 900;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	background-color:#FFF;
	vertical-align: super;
	}

.arrow {
  	width: 70px;
  	height: 16px;
  	overflow: hidden;
  	position: absolute;
  	left: 50%;
  	margin-left: -35px;
  	bottom: -16px;
	}

.arrow:after {
  	content: "";
  	position: absolute;
  	left: 20px;
  	top: -20px;
  	width: 25px;
  	height: 25px;
  	-webkit-box-shadow: 6px 5px 9px -9px black,
                      	5px 6px 9px -9px black;
  	-moz-box-shadow: 6px 5px 9px -9px black,
                   	5px 6px 9px -9px black;
  	box-shadow: 6px 5px 9px -9px black,
              	5px 6px 9px -9px black;
  	-webkit-transform: rotate(45deg);
  	-moz-transform:    rotate(45deg);
  	-ms-transform:     rotate(45deg);
  	-o-transform:      rotate(45deg);
	}

.tooltip.active {
  	opacity: 1;
 	margin-top: 5px;
  	-webkit-transition: all 0.2s ease;
  	-moz-transition:    all 0.2s ease;
  	-ms-transition:     all 0.2s ease;
  	-o-transition:      all 0.2s ease;
	}

.tooltip.out {
  	opacity: 0;
  	margin-top: -20px;
	}