@charset "utf-8";
/* CSS Document */

.wrapper {
 text-transform: uppercase;
 color: #555;
 cursor: help;
 font-size: 22px;
 position: relative;
 text-align: center;
 -webkit-transform: translateZ(0); /* webkit flicker fix */
 -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
 background: #ce104e;
 bottom: 68%;
 color: #fff;
 display: block;
 left: -10px;

 margin-bottom: 15px;
 opacity: 0;
 padding: 3px;
 pointer-events: none;
 position: absolute;
 border-radius: 3px;
 -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 #ce104e 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;
}


.spce {
   
    margin-left: 6px;
  
}
.spces {
margin-left:30px;
}