@import url("/css/rtve.2019.television/rtve.series/la-otra-mirada-TE_STRMI3X/TE_STRMI3X.basics.personajes.css");

.person section.grid > .secBox {padding-top:4rem;}
/*Bloques*/
.person .infoBox .list-pers li{float:left;width:12.2%;margin-bottom:4rem;margin:1%;}
.person .infoBox .list-pers li.pers1 {clear:right;margin-left:22%;}
.person .infoBox .list-pers li.pers12 {margin-left:29%;}
.person .infoBox .list-pers li.pers5 {clear:left;}
.container.person .infoBox .list-pers li.pers12,
.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:14.28%;}

.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:left;width:45%;height:100%;padding:6rem 2rem 8rem 8rem;}
.container.person .list-pers .mainBox .contentBox {float:right;width:55%;height:100%;padding:4rem 8rem 4rem 2rem;}
.person .list-pers .mainBox .contentBox .auxBox p:empty {padding-bottom:0;}
.person .list-pers .mainBox .contentBox .txtBox strong {font-size:10rem;text-transform:uppercase;font-weight:300;display:block;}
.person .list-pers .mainBox .contentBox .txtBox{}
/***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;}