@import url("/css/rtve.2017.television/rtve.series/traicion/traicion.basics.personajes.css");

.personajes .infoBox .list-pers{background:url("/css/rtve.2017.television/rtve.series/traicion/i/personajes/traicion_fondo.jpg") no-repeat;background-size:contain;padding-top:5rem;padding-bottom:48rem;float:left;}

/*tamanos arbol*/
.personajes .list-pers [class*="pers"]{width:14.2857143%;padding:1.6rem;float:left;}
.personajes .list-pers .pers1,.personajes  .list-pers .pers2{width:20%;padding:.5rem;}

/*posicionamiento arbol*/
.personajes .list-pers [class*="pers"]{margin-top:11%;}
.personajes .list-pers [class*="pers1"]{margin-top:15%;}
.personajes .list-pers .pers1,.personajes  .list-pers .pers2{margin-left:20%;margin-top:0;}
.personajes .list-pers .pers3{clear:both;}
.personajes .list-pers .pers10{margin-left:14.2857143%;margin-right:14.2857143%;}

/*hover*/
.personajes .infoBox .list-pers [class*="pers"] .chipBox{cursor:pointer;}
.personajes .list-pers [class*="pers"]:hover{padding:1rem;}
.personajes .list-pers .pers1:hover,.personajes .list-pers .pers2:hover{padding:0;}
.personajes .list-pers [class*="pers"]:not(.pers1):not(.pers2):hover .chipBox p{padding-left:.6rem;padding-right:.6rem;}
.personajes .list-pers [class*="pers"]:hover .chipBox p strong{padding-top:3.4rem;}
.personajes .list-pers .pers1:hover [name="personajes"] ~ label .chipBox p strong, .personajes .list-pers .pers2:hover [name="personajes"] ~ label .chipBox p strong{padding-top:1.5rem;}

.personajes .list-pers [class*="pers"],
.personajes .list-pers [class*="pers"] .chipBox p,.personajes .list-pers [class*="pers"] .chipBox p strong,
.personajes .list-pers .pers1 .chipBox p strong, .personajes .list-pers .pers2 .chipBox p strong{
	-webkit-transition:ease-in .1s all;
	-moz-transition:ease-in .1s all;
	transition:ease-in .1s all;}

/**ficha**/
.personajes .list-pers .mainBox .infoBox {height:100%;width:100%;background:#303128;display:inline-block;z-index:0;}

/*contenido*/
.personajes .list-pers .mainBox .mediaBox {width:40%;}
.personajes .list-pers .mainBox .contentBox {padding:10% 8rem 6rem 4rem;float:right;width:60%;height:100%;}

/***activar***/
.personajes .list-pers [name="personajes"], .list-pers [name="personajes"] ~ label .mainBox{position:absolute;clip:rect(0,0,0,0);top:0;left:0;overflow:hidden;}
.personajes .list-pers [name="personajes"]:checked ~ label .mainBox{width:100%;clip:auto;top:50%;left:0;margin-top:-23%;z-index:1;overflow:visible;}

.personajes .list-pers .pers1 [name="personajes"]:checked ~ label .mainBox,
.personajes .list-pers .pers2 [name="personajes"]:checked ~ label .mainBox{margin-top:-60%;}