.wrapper {
  width: 100%;
  position: relative;
}
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
.demo{
  max-width: 960px;
  height: auto;
  /* position: absolute;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  text-align: center;
}
#img_container {
  width:  100%;
  position: relative
}
#img_container img{
  width: 100%;
  height: 100%; 
}
.datos {
    position: absolute;  
   

}

    .datos:hover, .datos:focus {
        background: yellow;             
        opacity: .3;
    }


/*________cara-A______*/

/*
.cara-A #dato1 {
    top: 2.3%;
    height: 2.5% ;
    width:11%;
    right: 32.6%;
    display: block;
}
*/

.cara-A #dato1 {
    top: 3.5%;
    height: 2.5% ;
    width:9%;
    right: 34.6%;
    display: block;

    

}



/*
.cara-A #dato2 {
    top: 11.4%;
    height: 3.4%;
    width:6.8%;
    right: 36.8%;
    display: block;
}
*/

.cara-A #dato2 {
    top: 12.4%;
    height: 3.4%;
    width:6.8%;
    right: 36.8%;
    display: block;
}
/*
.cara-A #dato3 {
    top: 11.4%;
    height: 3.4%;
    width:8.3%;
    right: 25.3%;
    display: block;
}*/

.cara-A #dato3 {
    top: 12.4%;
    height: 3.4%;
    width:8.3%;
    right: 25.3%;
    display: block;
}
/*.cara-A #dato4 {
    top: 11.4%;
    height: 3.4%;
    width:8%;*
    right: 4.8%;
    display: block;
}*/
.cara-A #dato4 {
    top: 12.4%;
    height: 3.4%;
    width:8%;
    right: 4.8%;
    display: block;
}

/*
.cara-A #dato4-1 {
    top: 11.4%;
    height: 3.4%;
    width:8%;
    right: 13.8%;
    display: block;
  }
*/
.cara-A #dato4-1 {
    top: 12.4%;
    height: 3.4%;
    width:8%;
    right: 13.8%;
    display: block;
  }
/*
.cara-A #dato5 {
    top: 21%;
    height: 6%;
    width:21.5%;
    right: 22%;
    display: block;
}*/

.cara-A #dato5 {
    top: 20%;
    height: 6%;
    width:21.5%;
    right: 22%;
    display: block;
}
/*
.cara-A #dato6 {
    top: 24.7%;
    height: 1.4%;
    width:24%;
    right: 72%;
    display: block;
}
*/
.cara-A #dato6 {
    top: 25.7%;
    height: 1.4%;
    width:24%;
    right: 72%;
    display: block;
}
/*
.cara-A #dato6-1 {
    top: 26.3%;
    height: 3.9%;
    width:24%;
    right: 72%;
    display: block;
}
*/

.cara-A #dato6-1 {
    top: 28.0%;
    height: 3.9%;
    width:24%;
    right: 72%;
    display: block;
}
/*
.cara-A #dato7 {
    top: 38.1%;
    height: 1.3%;
    width:42.5%;
    right: 52%;
    display: block;
  }
    */
.cara-A #dato7 {
    top: 39.5%;
    height: 1.3%;
    width: 42.5%;
    right: 52%;
    display: block;
}
/*
.cara-A #dato8 {
    top: 39.5%;
    height: 1.3%;
    width:42.5%;
    right: 52%;
    display: block;
  }
*/
.cara-A #dato8 {
    top: 41%;
    height: 1.3%;
    width: 42.5%;
    right: 52%;
    display: block;
}

/*
.cara-A #dato9 {
    top: 40.8%;
    height: 1.3%;
    width:42.5%;
    right: 52%;
    display: block;
  }
    */
.cara-A #dato9 {
    top: 42.3%;
    height: 1.3%;
    width: 42.5%;
    right: 52%;
    display: block;
}

/*

.cara-A #dato10 {
    top: 42.3%;
    height: 1.3%;
    width:42.5%;
    right: 52%;
    display: block;
  }

*/

.cara-A #dato10 {
    top: 43.5%;
    height: 1.3%;
    width:42.5%;
    right: 52%;
    display: block;
  }
/*
.cara-A #dato12 {
    top: 40.7%;
    height: 3%;
    width:36%;
    right: 6.5%;
    display: block;
  }
*/
.cara-A #dato12 {
    top: 42.3%;
    height: 3%;
    width:40%;
    right: 6.5%;
    display: block;
  }
/*.cara-A #dato14{
    top: 84.7%;
    height: 3%;
    width:34%;
    right: 62.3%;
    display: block;
  }
*/
.cara-A #dato14{
    top: 83.2%;
    height: 3%;
    width:32%;
    right: 60%;
    display: block;
  }



/*______cara-B_______*/

.cara-B #dato2 {
    top: 12.9%;
    height: 2.6%;
    width:44%;
    right: 53.2%;
    display: block;
}
/*.cara-B #dato3 {
    top: 15.6%;
    height: 1.4%;
    width:44%;
    right: 53.2%;
    display: block;
}
*/
.cara-B #dato3 {
    top: 15.6%;
    height: 1.6%;
    width:44%;
    right: 53.2%;
    display: block;
}
/*
.cara-B #dato4 {
  top: 18.1%;
    height: 1.4%;
    width:44%;
    right: 53.2%;
    display: block;
}*/

.cara-B #dato4 {
  top: 18.5%;
    height: 1.6%;
    width:44%;
    right: 53.2%;
    display: block;
}
/*
.cara-B #dato5 {
    top: 19.5%;
    height: 1.4%;
    width:44%;
    right: 53.2%;
    display: block;
}*/
.cara-B #dato5 {
    top: 20.4%;
    height: 1.4%;
    width:44%;
    right: 53.2%;
    display: block;
}
/*.cara-B #dato9 {
    top: 27.5%;
    height: 1.6%;
    width:45%;
    right: 52%;
    display: block;
  }

*/
.cara-B #dato9 {
    top: 27%;
    height: 1.6%;
    width:45%;
    right: 52%;
    display: block;
  }
/*
.cara-B #dato10 {
    top: 29.5%;
    height: 1.5%;
    width:45%;
    right: 52%;
    display: block;
  }
*/
.cara-B #dato10 {
    top: 29%;
    height: 2%;
    width:45%;
    right: 52%;
    display: block;
  }

  /*
.cara-B #dato11 {
    top: 31.8%;
    height: 1.4%;
    width:45%;
    right: 52%;
    display: block;
  }
*/


.cara-B #dato11 {
    top: 32.4%;
    height: 1.4%;
    width:45%;
    right: 52%;
    display: block;
  }

.cara-B #dato13 {
    top: 36.7%;
   height: 1.6%;
    width:46%;
    right: 51%;
    display: block;
  }
/*
cara-B #dato14{
    top: 38.7%;
    height: 2%;
    width:46%;
    right: 51%;
    display: block;
  }
*/
.cara-B #dato14{
    top: 38.7%;
    height: 1.5%;
    width:46%;
    right: 51%;
    display: block;
  }
/*
.cara-B #dato15{
    top: 41%;
    height: 1.5%;
    width:46%;
    right: 51%;
    display: block;
  }
*/
.cara-B #dato15{
    top: 42.5%;
    height: 1.5%;
    width:46%;
    right: 51%;
    display: block;
  }
/*
.cara-B #dato17{
    top: 46.3%;
    height: 3.2%;
    width:46%;
    right: 51%;
    display: block;
  }
*/
.cara-B #dato17{
    top: 47.5%;
    height: 3.2%;
    width:46%;
    right: 51%;
    display: block;
  }

/*_____estilo tooltip______*/



  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid #3e3e3e;
  }
  .ui-tooltip {
    padding: 4px;
    color:  #3e3e3e;
    max-width: 50%;
    width: auto;
    
    background-color:gold !important;
    border:5px solid gold !important;
    border-radius: 0px;
    font: bold 10px "Helvetica Neue", Sans-Serif;

    box-shadow: 0 0 7px black;
  }
  
  
  @media screen and (min-width: 768px) {

.ui-tooltip {
   
    font: bold 16px "Helvetica Neue", Sans-Serif;
max-width: 260px;
  }

}
  
  
  .arrow {
    width: 70px;
    height: 21px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -26px;
  }
  .arrow.top {
    top: -26px;
    bottom: auto;
  }
  .arrow.left {
    left: -16px;
    position: absolute;
    top: 45%;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
    transform: rotate(90deg);
  }
  .arrow.right-top {
    width: 70px;
    height: 21px;
    overflow: hidden;
    position: absolute;
    left: 90%;
    margin-left: -35px;
    top: -26px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);  
    transform: rotate(180deg);
  }
  
    .arrow.right-top:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -15px;
    width: 18px;
    height: 18px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background:#3e3e3e; 
    border-color: transparent;
  }

  .arrow.bottom-left {
    width: 70px;
    height: 21px;
    overflow: hidden;
    position: absolute;
    left: 10%;
    margin-left: -35px;
    bottom: -26px;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);  
    transform: rotate(360deg);
  }
  
    .arrow.bottom-left:after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: -15px;
    width: 18px;
    height: 18px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background:#3e3e3e; 
    border-color: transparent;
  }

    .arrow.bottom-right {
    width: 70px;
    height: 21px;
    overflow: hidden;
    position: absolute;
    left: 90%;
    margin-left: -35px;
    bottom: -26px;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);  
    transform: rotate(360deg);
  }
  
    .arrow.bottom-right:after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: -15px;
    width: 18px;
    height: 18px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background:#3e3e3e; 
    border-color: transparent;
  }

  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -15px;
    width: 18px;
    height: 18px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background:#3e3e3e; 
    border-color: transparent;
  }

  .arrow.top:after {
    bottom: -15px;
    top: auto;
    width: 18px;
    height: 18px;
    border-color: #3e3e3e;
  } 

 .arrow.right {
    width: 70px;
    height: 21px;
    overflow: hidden;
    position: absolute;
    left: 100%;
    margin-left: -20px;
    bottom: 40%;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);  
    transform: rotate(270deg);
  }
  
    .arrow.right:after {
    content: "";
    position: absolute;
    right: 0px;
    bottom: -15px;
    width: 18px;
    height: 18px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  background:#3e3e3e; 
  border-color: transparent;
  }