@import url("/css/rtve.2019.television/rtve.series/monteperdido-TE_SCAZMON/TE_SCAZMON.basics.personajes.css");

.person section.grid > .secBox {padding-top:4rem}
/*Bloques*/
.person .infoBox .list-pers li{float:left;width:16.6667%;margin-bottom:4rem}
.person .infoBox .list-pers li:nth-child(-n+3){width:33.3334%}
.container.person .infoBox .list-pers li.pers10,
.container.person .infoBox .list-pers li.pers16,
.container.person .infoBox .list-pers li.pers20{clear:left;}
.container.person .infoBox .list-pers li.pers16,
.container.person .infoBox .list-pers li.pers20{margin-left:16.6667%;}

.container.person .list-pers [class*="pers"] .chipBox{-webkit-filter: grayscale(0);filter: grayscale(0);transition:all 1s ease;cursor:pointer;}
.container.person .list-pers [class*="pers"] .chipBox:hover{-webkit-filter: grayscale(70%);filter: grayscale(70%);}

/**ficha**/
.container.person .list-pers .mainBox .mediaBox {float:right;width:45%;height:100%;padding:6rem 10rem 10rem 8rem;}
.container.person .list-pers .mainBox .contentBox {float:left;width:55%;height:100%;padding: 4rem 4rem 4rem 14rem;}
.person .list-pers .mainBox .contentBox .auxBox p:empty {padding-bottom:0;}

/***activar***/
.container.person .list-pers [name="personajes"], .list-pers [name="personajes"] ~ label .mainBox{position:absolute;clip:rect(0,0,0,0);top:0;left:0;overflow:hidden;-webkit-transform: scale(0,0);transform:scale(0,0);}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox{width:100%;clip:auto;left:0;z-index:1;overflow:visible;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:all ease 0.5s;transition:all ease 0.5s;}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox:before{content:'';display:block;background:rgba(17, 33, 28, 0.5);position:absolute;top:-1000%;left:-100%;width:250%;height:1485%;z-index:-1;-webkit-transition:none;transition:none;}