.wrapper {text-transform: uppercase; color: #555; cursor: help; 
padding: 20px; position: relative; text-align: center; width: 250px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */}
.wrapper .mas{background: #215b9b; border-radius: 50%; width: 50px; color: #fff; padding-top: 10px; height: 40px;
	margin: 0 auto; display: block; font-size: 50px; font-weight: 300;}
.wrapper span{font-weight: 700; display: block;}
.wrapper .tooltip {background: #215b9b; bottom: 100%; color: #fff; display: block; left: -20px; margin-bottom: 15px; font-size: 17px;
opacity: 0; padding: 20px; pointer-events: none; position: absolute; text-transform: none; width: 100%;
-webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
   -o-transform: translateY(10px);
    transform: translateY(10px);
-webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
bottom: -20px; content: " "; display: block; height: 20px; left: 0; position: absolute; width: 100%;}
/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #215b9b 10px;
bottom: -10px; content: " "; height: 0; left: 50%; margin-left: -13px; position: absolute; width: 0;}
.wrapper:hover .tooltip {
opacity: 1; pointer-events: auto;
-webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
    transform: translateY(0px);}
/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
display: none;}
.lte8 .wrapper:hover .tooltip {
display: block;}

.wrapper2{padding-top: 0;}
.wrapper2 .mas{padding-top: 5px; height: 45px;}
.wrapper2 .mas img{width: 24px; }
.wrapper2 .tooltip{ padding: 10px 20px;}
.wrapper2 .tooltip img{width: 100%;}