.tooltip, .arrow:after  { background: #e21f2a; text-align: center; border: solid 2px white }

.tooltip    { color: white; font-size: 10pt; font-family: avantgarde_bk_btdemi; font-style: normal; font-weight: normal; line-height: 100%; text-decoration: none; text-align: center; display: inline-block; margin-top: 20px; margin-left: 10px; padding: 10px 14px; position: absolute; z-index: 99999; width: 130px; border-radius: 20px; box-shadow: 0 0 7px #717171; opacity: 0; pointer-events: none   }
.arrow  { text-align: center; margin-left: -35px; position: absolute; bottom: -16px; left: 50%; width: 130px; height: 16px; overflow: hidden }
.arrow:after  { text-align: center; position: absolute; top: -20px; left: 20px; width: 25px; height: 25px; -moz-box-shadow: 6px 5px 9px -9px black,
                   5px 6px 9px -9px black; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-box-shadow: 6px 5px 9px -9px black,
                      5px 6px 9px -9px black; -webkit-transform: rotate(45deg); box-shadow: 6px 5px 9px -9px black,
              5px 6px 9px -9px black; content: "" }
.tooltip.active  { text-align: center; margin-top: 5px; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; opacity: 1 }
.tooltip.out  { text-align: center; margin-top: -20px; opacity: 0 }