/* NAVEGACION */
.inf-personajes h1 {text-align:center;}
 
.television .striplayer.inf-personajes .grid > h1 span{color:#A72D2E;}
.inf-personajes .mark {padding-bottom: 10rem;background:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/pj_ar_leyenda.png") no-repeat bottom center;background-size:100% auto;}
.inf-personajes .controlBox {position:absolute;top:78%;width:100%;z-index:1;}
.inf-personajes .grid.g1 .controlBox span{width:4.6em;height:3em;position:absolute;line-height:7.2em;top:0;border:0;}
.inf-personajes .controlBox img{background-repeat:no-repeat;background:0 0;}
.inf-personajes .controlBox span > img{width:100%;height:100%;top: -8.5em;cursor:pointer;}
.inf-personajes .controlBox .back_ img{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/flecha_izquierda.png");background-repeat:no-repeat;}
.inf-personajes .controlBox .next_ img{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/flecha_derecha.png");background-repeat:no-repeat;}
.inf-personajes .controlBox .next_{right:0;}

.inf-personajes .blindBox ul{width:104em;padding-top:72.843694%;position:relative;margin:0 auto;}
.inf-personajes .blindBox li {position:absolute;top:0;left:0;}
.inf-personajes nav.blindBox > ul > li > span {margin:0.25em;display:block;border-width:0.25em;border-style:solid;cursor:pointer;}
.inf-personajes nav.blindBox > ul > li.blocked > span{cursor:auto;}
.inf-personajes .blindBox li > span:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;}

.inf-personajes .blindBox li > span:hover:after, .inf-personajes nav.blindBox .active > span:after,.inf-personajes .blindBox li.blocked > span:after {opacity:0;}
.inf-personajes .blindBox .size1 img {width:15.6em;height:15.6em;margin:-2.2845em;margin:-2.8845em;}
.inf-personajes .blindBox .size2 img {width:24em;height:24em;margin:-3.5145em;margin:-4.0145em;}

.inf-personajes .navBox {padding-top:2em;position:relative;}
.inf-personajes .blindBox a {overflow:hidden;}
.inf-personajes .blindBox a > span,.inf-personajes .navBox > .ico {clip:rect(0,0,0,0);position:absolute;}
.inf-personajes .mediaBox > a:after{content:"Ver video";color:#fff;height:1.875em;background:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/play.png") no-repeat left top;line-height:1.875em;padding-left:2.5em;font-size:160%;margin-left:2.5em;display:block;top:50%;position:absolute;margin-top:-0.46875em;left:0;}

.inf-personajes .blindBox .p1 {top:9.5em;left:43.2em;}
.inf-personajes .blindBox .p2 {top:4.1em;left:33.6em;}
.inf-personajes .blindBox .p3 {top:4.1em;left:58.8em;}
.inf-personajes .blindBox .p4 {top:25.2em;left:37.8em;}
.inf-personajes .blindBox .p5 {top:25.2em;left:54.5em;} 
.inf-personajes .blindBox .p6 {top:13.7em;left:64em;} 
.inf-personajes .blindBox .p7 {top:0;left:71.2em;}
.inf-personajes .blindBox .p8 {top:8.3em;left:79.5em;}
.inf-personajes .blindBox .p9 {top:21.1em;left:83.7em;}
.inf-personajes .blindBox .p19 {top:29.2em;left:75.3em;}
.inf-personajes .blindBox .p11 {top:5.5em;left:13.8em;}
.inf-personajes .blindBox .p12 {top:21.1em;left:8.4em;}
.inf-personajes .blindBox .p13 {top:16.8em;left:29.4em;}
.inf-personajes .blindBox .p14 {top:25.2em;left:21.1em;}
.inf-personajes .blindBox .p17 {top:12.7em;left:0;}
.inf-personajes .blindBox .p16 {top:0;left:4.1em;}
.inf-personajes .blindBox .p18 {top:33.5em;left:46.3em;}
.inf-personajes .blindBox .p10 {top:0;left:88em;}
.inf-personajes .blindBox .p15 {top:12.7em;left:92em;}

.inf-personajes .blindBox li > span:after{opacity:0.5;}
.inf-personajes .controlBox .next_{right:3.5em;}
.inf-personajes .controlBox .back_{left:3.5em;}

/* CONTENTBOX */
.bodier > .container.striplayer.inf-personajes {background:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/pj_ar_fondo.png") center bottom no-repeat #111;background-size:auto 100%;}
.inf-personajes .contentBox li{clip:rect(0,0,0,0);position:absolute;top: 58rem;left:0;width:100%;padding: 0em 0.7em 0 0.7em;*//* Permalink - use to edit and share this gradient:http://colorzilla.com/gradient-editor/#111111+0,1c1c1c+50,111111+100 */background:#111111; /* Old browsers */background:-moz-linear-gradient(left,  #111111 0%, #1c1c1c 50%, #111111 100%); /* FF3.6-15 */background:-webkit-linear-gradient(left,  #111111 0%,#1c1c1c 50%,#111111 100%); /* Chrome10-25,Safari5.1-6 */background:linear-gradient(to right,  rgba(17,17,17,0.5) 0%,#050505 50%,rgba(17, 17, 17, 0.49) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#111111',GradientType=1 ); /* IE6-9 */}
.inf-personajes .contentBox .active{clip:auto;}
.inf-personajes .contentBox .cell {min-height:32em;position:relative;padding:0;width:100%;}
.inf-personajes .contentBox .cell:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;}
.inf-personajes li .mainBox:before{content:"";position:absolute;bottom:0;left:2em;width:50rem;height:41.7em;background:no-repeat left bottom;bottom: 0;}
.inf-personajes li:first-child .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/01_cuerpoentero_gonzalo.png");} 
.inf-personajes li:nth-child(2) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/02_cuerpoentero_satur.png"); } 
.inf-personajes li:nth-child(3) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/03_cuerpoentero_margarita.png"); } 
.inf-personajes li:nth-child(4) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/04_cuerpoentero_alonso.png"); } 
.inf-personajes li:nth-child(5) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/05_cuerpoentero_cipri.png"); } 
.inf-personajes li:nth-child(6) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/06_cuerpoentero_marquesa.png"); } 
.inf-personajes li:nth-child(7) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/07_cuerpoentero_comisario.png"); } 
.inf-personajes li:nth-child(8) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/08_cuerpoentero_soledad.png"); } 
.inf-personajes li:nth-child(9) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/09_cuerpoentero_irene.png"); } 
.inf-personajes li:nth-child(10) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/10_cuerpoentero_nunyo.png"); } 
.inf-personajes li:nth-child(11) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/11_cuerpoentero_cardenal.png"); } 
.inf-personajes li:nth-child(12) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/12_cuerpoentero_malasangre.png"); } 
.inf-personajes li:nth-child(13) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/13_cuerpoentero_reina.png"); } 
.inf-personajes li:nth-child(14) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/14_cuerpoentero_rey.png"); } 
.inf-personajes li:nth-child(17) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/15_cuerpoentero_flora.png"); } 
.inf-personajes li:nth-child(16) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/16_cuerpoentero_anais.png"); } 
.inf-personajes li:nth-child(15) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/17_cuerpoentero_trinidad.png"); } 
.inf-personajes li:nth-child(18) .mainBox:before{background-image:url("/css/rtve.2015.television/rtve.series/aguila-roja/i/2016/18_cuerpoentero_tio_emilio.png"); } 

.inf-personajes .mediaBox{max-width:19em;width:100%;}
.inf-personajes .txtBox {position:absolute;text-align:center;display:block;min-width:19em;left:48%;top: 2rem;}
.inf-personajes .txtBox .img {padding:0;display:inline-block;width:auto;height:auto;border-style:solid;border-width:0.2em;overflow:hidden;position:absolute;left:-2.5em;top:-0.25rem;display:none;}
.inf-personajes .txtBox img{width:5.5em;height:5.5em;margin:-0.896em;display:none;}
.inf-personajes .mainBox .pretitle{color:#fff;font-weight:400;background-color:#952714;padding:0.3em 0;display:block;text-align:center;}
.notory.g1 .gridBox > .cell:first-child .mainBox .pretitle{font-size: 320% !important;line-height:1.2;float:left;padding:0;text-transform:uppercase;font-family:Roboto Slab;background:none;}
.notory.g1 .gridBox > .cell:first-child .mainBox .auxBox p{font-size: 140% !important;margin-top:1.5em;word-spacing:normal;}
.inf-personajes .mainBox .txtBox h2 {display:inline-block;padding:0.5em 0;position:absolute;color:#fff;font-weight:400;font-size:140% !important;float:left;font-size: 190% !important;line-height:1.2;float:left;/* text-transform:uppercase; *//* display:none; */left:0;top:3rem;}
.inf-personajes .mainBox .auxBox {position:absolute;left:48%;width:45%;top:0;color:#fff;margin-top: 10em;}
.inf-personajes .mainBox .mediaBox {position:absolute;right:5em;top:50%;margin-top:-5em;}
.inf-personajes .mainBox dl{width:120%;}
.inf-personajes .mainBox dl > *{display:inline-block;vertical-align:middle;position:relative;margin-left:0.5em;}
.inf-personajes .mainBox dl > *:first-child{margin-left:0;}
.inf-personajes .contentBox .mainBox .auxBox dl .group span, .inf-personajes .contentBox .mainBox .auxBox dl .rel span{font-size:160% !important;}
.inf-personajes .auxBox dl .group + dd{border-radius:100%;overflow:hidden;border-width:0.2em;border-style:solid;}
.inf-personajes .auxBox .rel{padding-left:3em;}
.inf-personajes .auxBox dl .group + dd .img {width:4em;height:4em;display:inline-block;}
.inf-personajes .auxBox dl .group + dd img {width:5.5em;height:5.5em;margin:-0.70em;}
.inf-personajes .auxBox dl .rel + dd .img {position:relative;display:inline-block;border-width:0.2em;border-style:solid;overflow:hidden;margin-right:2em;}
.inf-personajes .auxBox dl .rel + dd img {width:4.4em;height:4.4em;margin:-0.6em;cursor:pointer;}
.inf-personajes .size3 span:first-child{margin-left:0.5em;}

/* ROTACIONES DE IMAGENES */
.inf-personajes nav.blindBox > ul > li > span, .inf-personajes .txtBox .img, .inf-personajes .size3 .img{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.inf-personajes nav.blindBox > ul > li > span > a > img, .inf-personajes .txtBox img, .inf-personajes .size3 img {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}

/* PERSONALIZACION DE COLORES POR GRUPOS */
.inf-personajes .g1 .auxBox dl .group + dd, .inf-personajes .g1 .txtBox .img, .p1 > span, .p2 > span, .p3 > span, .p4 > span, .p5 > span, .inf-personajes .size3 > .g1 {border-color:#952714;}
.inf-personajes .g2 .auxBox dl .group + dd, .inf-personajes .g2 .txtBox .img, .p6 > span, .p7 > span, .p8 > span, .p9 > span, .p10 > span, .inf-personajes .size3 > .g2 {border-color:#b8871e;}
.inf-personajes .g3 .auxBox dl .group + dd, .inf-personajes .g3 .txtBox .img, .p11 > span, .p12 > span, .p13 > span, .p14 > span, .inf-personajes .size3 > .g3 {border-color:#303030;}
.inf-personajes .g4 .auxBox dl .group + dd, .inf-personajes .g4 .txtBox .img, .p15 > span , .p16 > span, .p17 > span, .p18 > span, .p19 > span, .inf-personajes .size3 > .g4 {border-color:#685737;}
.inf-personajes .g2 .mainBox .pretitle {background-color:#b8871e;}
.inf-personajes .g3 .mainBox .pretitle {background-color:#303030;}
.inf-personajes .g4 .mainBox .pretitle{background-color:#685737;}
.inf-personajes .blindBox .p15 > span:after, .inf-personajes .blindBox .p16 > span:after, .inf-personajes .blindBox .p17 > span:after, 
.inf-personajes .blindBox li > .ico:after  {background:#111;}

/* FUEGOS ARTIFICIALES */
.inf-personajes li .mainBox:before, .inf-personajes .auxBox dl .rel + dd > span, .inf-personajes .auxBox dl .group + dd,
.inf-personajes li .mainBox .auxBox p{opacity:0;}
.inf-personajes li.active .mainBox:before{-webkit-transition:opacity 1s linear;transition:opacity 1s linear;}
.inf-personajes li.active .auxBox dl .rel + dd > span, .inf-personajes li.active .auxBox dl .group + dd,
 .inf-personajes li.active .mainBox .auxBox p, .inf-personajes li.active .mainBox:before {opacity:1;}
.inf-personajes li.active .auxBox dl .group + dd{-webkit-transition:opacity 0.25s linear;transition:opacity 0.25s linear;}
.inf-personajes li.active .auxBox dl .rel + dd > span:first-child{-webkit-transition:opacity 0.25s linear;-webkit-transition-delay:0.125s;transition:opacity 0.25s linear;transition-delay:0.125s;}
.inf-personajes li.active .auxBox dl .rel + dd > span:nth-child(2){-webkit-transition:opacity 0.25s linear;-webkit-transition-delay:0.25s;transition:opacity 0.25s linear;transition-delay:0.25s;}
.inf-personajes li.active .auxBox dl .rel + dd > span:nth-child(3){-webkit-transition:opacity 0.25s linear;-webkit-transition-delay:0.375s;transition:opacity 0.25s linear;transition-delay:0.375s;}
.inf-personajes li.active .auxBox dl .rel + dd > span:last-child{-webkit-transition:opacity 0.25s linear;-webkit-transition-delay:0.50s;transition:opacity 0.25s linear;transition-delay:0.50s;}
.inf-personajes li.active .mainBox .auxBox p {-webkit-transition:opacity 0.50s linear;-webkit-transition-delay:0.50s;transition:opacity 0.50s linear;transition-delay:0.50s;}
.inf-personajes li.active .mainBox .txtBox {-webkit-transition:opacity 0.50s linear;-webkit-transition-delay:0.50s;transition:opacity 0.50s linear;transition-delay:0.50s;}
.inf-personajes li .mediaBox{-webkit-transform:scale(0);transform:scale(0);}
.inf-personajes li.active .mediaBox{    -webkit-transition:opacity 0.7s, -webkit-transform 0.7s;transition:opacity 0.7s, transform 0.7s; -webkit-transform:scale(1);transform:scale(1);transition-delay:0.50s;}

/* NO JS */
.inf-personajes .no-js .contentBox li{clip:auto;position:relative;}
.inf-personajes .no-js li .mainBox:before, .inf-personajes .no-js .auxBox dl .rel + dd > span, .inf-personajes .no-js .auxBox dl .group + dd,
.inf-personajes .no-js li .mainBox .auxBox p{opacity:1;}
.inf-personajes .no-js li .mediaBox{-webkit-transform:scale(1);transform:scale(1);}

.inf-personajes .no-js .blindBox li > span:hover:after{display:none;}
.inf-personajes .no-js .contentBox .cell, .inf-personajes .no-js .contentBox li{min-height:46em;}
.inf-personajes .no-js .blindBox ul{padding-top:40%;}
.inf-personajes .no-js .controlBox{display:none;}
.inf-personajes .contentBox .mainBox .auxBox * {font-size:1rem !important;}

.inf-personajes .mainBox .mediaBox{display:none;}

@media all and (max-width:1440px){body {font-size:1em;}}