.tooltip{position: relative;cursor: pointer;display:inline-block;_display:block;text-decoration: none;color: #222;outline: none;}
.tooltip span{
  visibility: hidden;
  position: absolute; 
  bottom: 25px;
  left: 60%;
  z-index: 999;
  width: 200px;
  margin-left: -120px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}
.tooltip:hover{border: 0; /* IE6 fix */}
.tooltip:hover span{visibility: visible;}
.tooltip span:before,
.tooltip span:after{content: "";position: absolute;z-index: 1000;bottom: -7px;left: 10%;margin-left: -8px;border-top: 8px solid #ddd;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 0;}

.tooltip span:before{border-top-color: #ccc;  bottom: -8px;}

/* Yellow */
.yellow-tooltip span{border-color: #e1ca82;background-color: #ffeaa6;}
.yellow-tooltip span:after{border-top-color: #ffeaa6;}
.yellow-tooltip span:before{border-top-color: #e1ca82;}

/* Navy */
.navy-tooltip span{border-color: #fff;text-shadow: 0 1px 0 #000;border-color: #161a1f;background-color: #1e2227;}
.navy-tooltip span:after{border-top-color: #1e2227;}
.navy-tooltip span:before{border-top-color: #161a1f;}

/* green */
.green-tooltip span {border-color: #95c64e;background-color: #e4ffc0;}
.green-tooltip span:after{border-top-color: #e4ffc0;}
.green-tooltip span:before{border-top-color: #95c64e;}

/* Pink */
.pink-tooltip span{border-color: #ce4378;background-color: #ea4c88;}
.pink-tooltip span:after{border-top-color: #ea4c88;}
.pink-tooltip span:before{border-top-color: #ce4378;}


/* Blue */
.blue-tooltip span{border-color: #fff;border-color: #161a1f;background-color: #f9fcff;}
.blue-tooltip span:after{border-top-color: #f9fcff;}
.blue-tooltip span:before{border-top-color: #161a1f;}

.tooltip span{display:block}
    @media all and (max-width: 1300px) {
    .tooltip span{display:none}
}