@import url("TE_SDAKA21.basics.mapa.css");
@import url("https://font.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

/* Navegacion principal */
.mapBox .nav *{transition:all ease 0.3s;}
.mapBox .nav ul{margin-left:-2rem;display:block;height:5.6rem;}
.mapBox .nav li{position:relative;display:block;width:7.5%;float:left;} /* 12 etapas */

.mapBox .nav a{display:block;text-align:right;}
.mapBox .nav a:before{content:"";position:absolute;top:0.55rem;left:0;width:100%;height:0.3rem;background:#696768;}
.mapBox .nav li:first-child a:before{display:none;}
.mapBox .nav .ico{width:auto;height:auto;line-height:1;}
.mapBox .nav .ball{z-index:1;position:relative;}
.mapBox .nav .ball img{width:1.6rem;height:1.6rem;background:#696867;border-radius:100% 100%;}
.mapBox .controlBox{width:50%;position:absolute;left:50%;bottom:4rem;}
.mapBox .nav .arrow{position:absolute;bottom:2rem;}
.mapBox .nav .arrow img{background-image:url('/css/rtve.2015/i/iconos/icons_40x40_000000.png');opacity:0.6;display:inline-block;background-size:1000%;}
.mapBox .nav .maintitle{font-size:1.8rem;line-height:2;font-weight:700;color:#494847;text-align:center;width:200%;display:block;text-transform:uppercase;transform:scale(0);}
.mapBox .nav .arrow span{display:inline-block;font-size:2rem;line-height:2;color:#494847;}
.mapBox .nav .back_{left:0;}
.mapBox .nav .back_ img{float:left;}
.mapBox .nav .next_{right:2rem;}
.mapBox .nav .next_ img{float:right;}

.mapBox .nav li.active .ball img, .mapBox .nav .currentDay img{border:4px solid #696768;width:2.4rem;height:2.4rem;margin-top:-0.4rem;margin-right:-0.4rem;}
.mapBox .nav li.active .ball img{background:#fff;}
.mapBox .nav li.active .maintitle{transform:scale(1)}
.mapBox .nav .currentDay img, .mapBox .nav li.active.currentDay img{background:#fbc200;}
.mapBox .nav .currentDay ~ li.active .ball img{border-color:#b8b8b8;}

.mapBox .nav .currentDay ~ li a:before , .mapBox .nav .currentDay ~ li img{background:#b8b8b8;}

.mapBox [id*='et']{cursor:pointer;}
.mapBox .nav + svg, .infoBox{float:left;width:100%;height:auto;margin-top:2rem;}
.mapBox .infoBox{position:absolute;max-width:36%;top:26%;left:58%;background-color:#fff;padding:1.8rem;border: solid 10px rgba(79, 78, 78, 0.33);background-clip: padding-box;}

.mapBox .infoBox h4{font-family:'Roboto';font-size:2.2rem;color:#4f4e4e;font-weight:700;line-height: 2.6rem;}

.mapBox .infoBox h4+span.fecha{font-family:'Roboto';font-size:1.125rem;font-weight:300;color:#4f4e4e;}
.mapBox .infoBox h4+span.fecha:after{content: "\A";white-space:pre;}
.mapBox .infoBox h4+span.km{font-family:'Roboto';font-size:1.125rem;font-weight:700;color:#4f4e4e;}

.mapBox .infoBox strong{font-family:'Roboto', sans-serif;font-size:2.4rem;display:block;color:#be1522;font-weight:700;}
.mapBox .infoBox span.fecha {font-family:'Roboto', sans-serif;font-size:1.8rem;display:block;color:#4f4e4e;font-weight:300;line-height: 3rem;}
.mapBox .infoBox span.km {font-family:'Roboto', sans-serif;font-size:1.8rem;display:block;color:#4f4e4e;font-weight:700;}

.mapBox .infoBox li{display:none;}
.mapBox .infoBox .active{display:block;}

.mapBox .infoBox .auxBox{padding:1rem 0;}
.mapBox .infoBox .auxBox p{font-family:'Roboto', sans-serif;font-size:1.8rem;line-height:2rem;color:#4f4e4e;font-weight: 400;}
.mapBox .infoBox .auxBox p:last-child{padding:0;}

.mapBox .legendBox{width:100%;margin:0 auto;display:inline-block;text-align:center;}
.mapBox .legendBox li{display:inline-block;padding:1rem 2rem 0 1rem;}
.mapBox .legendBox li > *{vertical-align:middle;}
.mapBox .legendBox strong{font-size:1.4rem;padding-left:1rem;font-weight:400;}

.close_button {font-size: 2.4rem;color: #4f4e4e;position: relative;top: -6rem;float: right;cursor: pointer;}

.grid > .secBox span{color:#f07b1c;}

.bodier > .container.striplayer{background:#fff;}

/*Nuevo 2018*/
.infoBox ul li > div > a{color:#f07b1c;font-size:2rem;}
.mapBox .infoBox li > div > a > span, .mapBox .infoBox li > div > a > span strong{color:#494847;line-height:1.4;}

/*Nuevo 2020*/
.nav{display: none;}
.legendBox{display: none !important;}
.mapBox .infoBox.hidden{display:none;}