@import url("/css/rtve.infografias/mapas/maps.css");


.map {background-image: url("/css/rtve.infografias/mapas/i/map-ebola.png");height: 52.2em;}
.map > h2{text-transform: uppercase;text-align: left;position: absolute;left: 0;top: 2%;font-size: 280%;color: #505050;font-family: RE65;line-height: 1;display: block;padding: 0.2% 2%;background: rgba(255, 255, 255, 0.50);box-sizing: border-box;-moz-boz-sizing: border-box; }

.map .points > li{width:2em;height:2em;border-radius: 0;}
.map .points > li.point1{background:url("/css/rtve.infografias/mapas/i/icono_08.png");height:2.6em; }
.map .points > li.point2{background:url("/css/rtve.infografias/mapas/i/icono_09.png"); }
.map .points > li.point3{background:url("/css/rtve.infografias/mapas/i/icono_10.png"); }
.map .points > li.point4{background:url("/css/rtve.infografias/mapas/i/icono_11.png"); }


.points > li > .nombre{background:white;top:0;margin:0;padding: 0;font-size: 220%;font-family: RE65;height: 0.909em;width: 0.909em;line-height: 1;}
.points > li > .nombre.right,.points > li > .nombre.left{margin:0;text-align: center;right: auto;left: 100%;}

.map .points > li.point1 >.nombre{display: none;}


.points > li > .right + div{left: 6em;}
.points > li > .right + .bottom{}
.points > li > .right + .top{}
.points > li > .left + div{left:auto;right:4em;}
.points > li > .left + .bottom{}
.points > li > .left + .top{}
.points > li > .info.bottom{top:-2em;}
.points > li > .info.top{top:auto;bottom: -2em;}

.map .points > li div:after{border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(0, 0, 0, 0);border-width: 10px;margin-left: 0;}
.map .points > li:hover div.top:after{top:auto;bottom:2em;}
.map .points > li:hover div.bottom:after{top:2em;bottom:auto;}

.map .points > li > .info{border:0;box-shadow: 1px 1px 12px #666;color:#555;}


.map .points > li:hover span.left + .info.top:after{border-left-color: #fff;left:100%;}
.map .points > li:hover span.right + .info.top:after{border-right-color: #fff;right: 100%;}

.map .points > li:hover span.left + .info.bottom:after{border-left-color:#fff;left:100%;}
.map .points > li:hover span.right + .info.bottom:after{border-right-color: #fff;right: 100%;}


.points > li > .info p {font-size: 180%;line-height: 1;font-family: RE45;letter-spacing: 0.02em;}
.points > li > .info p + p {padding-top: 0.5em;font-size: 150%;}
.points > li > .info strong{font-family: RE65;letter-spacing: 0.04em;text-align: left;padding: 0.5em 0;}