
.tooltip { cursor:pointer; position:relative; }

.tooltip:before,.tooltip:after { position:absolute; visibility:hidden; opacity:0;
               -webkit-transition:all 0.3s ease-in-out;
                  -moz-transition:all 0.3s ease-in-out;
                       transition:all 0.3s ease-in-out; text-align:left;  
}
.tooltip:before { content:""; }

.tooltip:after { min-width:222px; height:40px; padding:13px 22px 10px 22px;
  background-color:rgba(232,150,96,0.85);
  color:#FFF; font-family:dosis; font-size:24px;
}
.tooltip:hover:before,.tooltip:hover:after { visibility:visible; opacity:1; }

.pdf0:after,.pdf1:after,.pdf2:after,.pdf3:after,.pdf4:after { top:35px; right:-203px; border-radius:0 15px 0px 15px; }
.pdf5:after,.pdf6:after,.pdf7:after,.pdf8:after,.pdf9:after { top:35px; left:-215px; text-align:right; border-radius:15px 0 15px 0px; }

.pdf0:after { content:"pdf > nos missions ..."; }
.pdf1:after { content:"pdf > formations edd"; }
.pdf2:after { content:"pdf > animations edd"; }
.pdf3:after { content:"pdf > collèges edd ..."; }
.pdf4:after { content:"pdf > lycées edd ..."; }

.pdf5:after { content:"pdf > démarches e3d"; }
.pdf6:after { content:"pdf > livret éducatif"; }
.pdf7:after { content:"pdf > les parcours"; }
.pdf8:after { content:"pdf > les abeilles"; }
.pdf9:after { content:"pdf > verger & rhône"; }

.bottom-center:after {
  right:-40px;
  bottom:45px;
  content:"Direction Down";
}
.bottom-center:before {
  right:0px;
  bottom:25px;
  height:0;
  width:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:20px solid white;
}

.center-left:after {
  top:-35px;
  right:-120px;
  content:"Direction center left";
}
.center-left:before {
  top:0;
  right:-20px;
  height:0;
  width:0;
  border-bottom:12.5px solid transparent;
  border-right:12.5px solid white;
  border-top:12.5px solid transparent;
}
