/***ajsutes fondo***/
/**fondo**/
.person .grid{background:url(/css/rtve.2015.television/rtve.programas/ot-el-reencuentro/i/infografia/infografia_fondo.png) no-repeat;background-size:100% 100%;background-position:center top;}
.person.bloody .gridBox{background:transparent;padding:0;float:left;}
/**fuentes**/
.subheader + .bodier .toplayer + .person .grid .secBox{text-align:center;padding-top:2rem;}
.person .grid .secBox span{font-size:3rem;font-weight:500;font-family:'Roboto','arial',sans-serif;}
.person .list-pers .mainBox .contentBox .txtBox{font-size:5rem;font-weight:500;text-transform:uppercase;}
.person .infoBox .list-pers [name="personajes"] ~ label .mainBox .contentBox .auxBox p{font-size:2rem;font-weight:300;}
.person .grid .secBox span,
.person .list-pers .mainBox .contentBox .txtBox,
.person .list-pers .mainBox .contentBox .auxBox p{color:#fff;}

/***personajes***/
/**base**/
.person .list-pers{width:100%;display:inline-block;float:left;margin:8rem 0;}
.person li[class*="pers"]{width:12.5%;display:block;float:left;}
.person .list-pers [name="personajes"],
.person .list-pers [name="personajes"] ~ label .mainBox,
.person .list-pers .mainBox .contentBox .txtBox strong,
.person .list-pers [name="personajes"] ~ label .chipBox p{position:absolute;clip:rect(0,0,0,0);top:-100%;left:-100%;overflow:hidden;}
.person .list-pers [name="personajes"]:checked ~ label .mainBox{height:100%;width:100%;clip:auto;top:auto;left:0;bottom:0;background:url("/css/rtve.2015.television/rtve.programas/ot-el-reencuentro/i/infografia/cerrar.png") no-repeat calc(100% - 1rem) 1rem,
            url("/css/rtve.2015.television/rtve.programas/ot-el-reencuentro/i/infografia/fondo_ficha.png")no-repeat top left;
background-size:auto auto, 100% 100%;}
.person .list-pers [name="personajes"]:checked ~ label .mainBox .infoBox:after{content:"";height:100%;width:100%;display:block;background:url("/css/rtve.2015.television/rtve.programas/ot-el-reencuentro/i/infografia/degradado.png") no-repeat;background-position:0 100%;position:absolute;top:0;}
.person .list-pers [name="personajes"]:checked ~ label .mainBox .infoBox{padding-top:2rem;}
/**color**/
.person .list-pers{box-shadow:0 0 10rem -2rem #fff;}
/*cuadros claros*/
.person li[class*="pers"]:first-child,   .person li[class*="pers"]:nth-child(3),
.person li[class*="pers"]:nth-child(5),  .person li[class*="pers"]:nth-child(7),
.person li[class*="pers"]:nth-child(10), .person li[class*="pers"]:nth-child(12),
.person li[class*="pers"]:nth-child(14), .person li[class*="pers"]:last-child{background:rgba(0,56,104,0.3);}
/*cuadros oscuros*/
.person li[class*="pers"]:nth-child(2),  .person li[class*="pers"]:nth-child(4),
.person li[class*="pers"]:nth-child(6),  .person li[class*="pers"]:nth-child(8),
.person li[class*="pers"]:nth-child(9),  .person li[class*="pers"]:nth-child(11),
.person li[class*="pers"]:nth-child(13), .person li[class*="pers"]:nth-child(15){background:rgba(0,14,30,0.3);}

/**ficha**/
.person .list-pers .mainBox .mediaBox{width:33.3333%;position:absolute;margin:0;bottom:0;}
.person .list-pers .mainBox .mediaBox .ima{padding-top:110%;background:transparent;}
.person .list-pers .mainBox .mediaBox .ima img{width:auto;height:100%;right:0;left:auto;}
.person .list-pers .mainBox .contentBox{padding:0rem 6rem 0 33.3333%;border-left:2rem solid transparent;position:relative;margin:0;}
.person .list-pers .mainBox .contentBox .auxBox{padding:3rem 0;margin:0;display:block;overflow:auto;max-height:31rem;}

/**duetos**/
.relBox{height:12rem;width:66.6666%;display:inline-block;padding-left:2rem;padding-bottom:2rem;position:absolute;left:0;bottom:0;margin-left:33.3333%;overflow:auto;overflow-y:hidden;}
.relBox *{display:block;float:left;}
.relBox ul{height:12rem;max-width:62.5rem;width:100%;position:absolute;margin-left:14rem;overflow:hidden;}
.relBox span:not(.ima){color:#fff;}
.relBox > span:not(.ima){font-size:2.6rem;line-height:6rem;background:url("/css/rtve.2015.television/rtve.programas/ot-el-reencuentro/i/infografia/micro.png") no-repeat calc(100% - 3rem) center;padding-right:7rem;}
.relBox li{width:15.6rem;padding-right:2rem;}
.relBox li .ima{width:6.8rem;padding-top:6rem;border-left:0.4rem solid transparent;border-right:0.4rem solid transparent;}
.relBox li .ima img{background:url("/css/rtve.2015.television/rtve.programas/ot-el-reencuentro/i/infografia/fondo_pj.png") no-repeat;background-size:100% auto;}
.relBox li span:not(.ima){font-size:1.4rem;padding:0.75rem 0 0 2.75rem;min-height:2.95rem;width:14.5rem;background:url("/css/rtve.2015.television/rtve.programas/ot-el-reencuentro/i/infografia/nota.png") left 0.75rem no-repeat;}