/* SVG */
.mapBox {position:relative;float: left;width: 100%;padding-top: 6rem;background: #e4ebf1;}
.mapBox:before {content:"Mapa medallero Rio 2016";position: absolute;top: 2rem;left: 1rem;font-size: 210%;font-weight: 700;color: #494847;}
.mapBox svg {background:#c5d5e2;overflow:hidden;width:100%;position:relative;float: left;} 
.mapBox svg path {fill: #fff;}
.mapBox svg .gold, .mapBox svg .silv, .mapBox svg .bron {cursor:pointer;} 
.mapBox svg path.selected {stroke: #6f7275;stroke-width: 1px;}
.mapBox svg path.part {fill:#f2f2f2;}
.mapBox svg path.gold {fill:#f8d56c;}
.mapBox svg path.silv {fill:#97b1c5 ;}
.mapBox svg path.bron {fill:#ceb085;}
.mapBox svg g{width:100%;position:absolute;}

.mapBox .controlBox {position: relative;display: block;width: 100%;background: #e4ebf1;float: left;} 
.mapBox .controlBox .ico {width:5rem;height:5rem;line-height:6em;}
.mapBox .controlBox .ico:hover {cursor:pointer;}
.mapBox .controlBox .ico img {opacity: 0.6;background-image:url(/css/rtve.2015/i/iconos/icons_40x40_000000.png); }
.mapBox .controlBox .zoomUp img {background-position: 50% 22%;}
.mapBox .controlBox .zoomDown img {background-position: 60% 22%;}

/* INFO */
.infoBox {position: absolute;display:block;float: left;width: 100%;}
.infoBox .header {padding: 1.6rem 18rem 1.6rem 2rem;background: #e4ebf1;}
.infoBox .header > * {display:inline-block;}
.infoBox .header .flag {padding-right:2rem; }
.infoBox .header img {width:4rem;height:auto;}
.infoBox .header p {font-size:1.8rem;line-height: 1;vertical-align: middle;font-family: Roboto Slab,arial,sans-serif;}

.infoBox li {clip:rect(0,0,0,0);position:absolute;overflow:hidden;}
.infoBox li.active {clip:auto;position: absolute;width: 100%;top: 0;}
.infoBox .content li {display:inline-block;padding: 0.8rem 0;border-radius: 100% 100%;background:#dfdfdf;color:#7c7c7c;margin: 1rem 0.3rem;border: 3px solid #fff;box-shadow: 0px 0px 1px #dad7d7;height: 4rem;width: 4rem;position: relative;}
.infoBox .content li strong{font-size: 1.8rem;display: inline-block;vertical-align: middle;}
.infoBox .content li:first-child {background:#f8d56c;color:#64461a;}
.infoBox .content li:last-child {background:#c4a16e;color:#64461a;}
.infoBox .content li:before {content:"";position:absolute;}
.infoBox .content ul {display:block;text-align:center;position: absolute;top: 0;right: 4rem;}
.infoBox .content ul span, .infoBox .content p {clip:rect(0,0,0,0);position:absolute;left:0;top:0;overflow:hidden;}
.infoBox .content > span {font-size:2.2rem;line-height:1;padding: 0.75rem;position: absolute;top: 1rem;right: 0;}

.infoBox .footer {clip:rect(0,0,0,0);position:absolute;overflow:hidden;top:0;left:0;}
.infoBox .footer .close {display: inline-block;background: #494847; padding: 0.3rem 2.5rem;cursor:pointer;transition:all ease 0.3s;}
.infoBox .footer .close:hover {color:#494847;background: #5f5e5e;}


/* ESTRUCTURA DE PAGINA */
.g3 .infoBox .header{padding:1.6rem 10rem 1.6rem 2rem;}

.map66med33 .mapBox {width:200%;}
.map66med33 .mapBox svg{max-height:25rem;}