@import url("/css/rtve.2018.television/rtve.series/el-continental-TE_STAL6I7/TE_STAL6I7.basics.personajes.css");

.container.person .gridBox{position:relative;overflow:visible;}

/*Bloques*/
.container.person .infoBox .list-pers li{float:left;padding:1.5% .2%;width:16.666666%;}
.container.person .infoBox .list-pers li.pers1, .container.person .infoBox .list-pers li.pers2, .container.person .infoBox .list-pers li.pers3{width:50%;padding:.5% 12.5%;}
.container.person .infoBox .list-pers li.pers10, .container.person .infoBox .list-pers li.pers12{margin-left:8.33333%;}
.container.person .infoBox .list-pers li.pers11, .container.person .infoBox .list-pers li.pers13{margin-right:8.33333%;}
.container.person .infoBox .list-pers li.pers14{margin-left:50%;}
.container.person .infoBox .list-pers li.pers4, .container.person .infoBox .list-pers li.pers10, .container.person .infoBox .list-pers li.pers14{clear:left;}

.container.person .infoBox .list-pers{display:flex;flex-flow:row wrap;padding-bottom:4.5%;background:url("/css/rtve.2018.television/rtve.series/el-continental-TE_STAL6I7/i/TE_STAL6I7.bg.personajes.png") center center no-repeat;background-size:contain;}
.container.person .infoBox .list-pers li{order:1;}
.container.person .infoBox .list-pers li.pers3{order:2;margin-left:auto;margin-right:45%;margin-top:-23.7%;}

.container.person .list-pers [class*="pers"] .chipBox.hold{opacity:.4;}
.container.person .list-pers [class*="pers"] .chipBox{height:0;padding-top:133.33333%;position:relative;}
.container.person .list-pers [class*="pers"] .chipBox:not(.hold) .img img:hover{transform:scale(1.02);cursor:pointer;filter:drop-shadow(.5rem .5rem .9rem rgba(0,0,0,1)) brightness(1.1);}

.container.person .list-pers .pers1 [name="personajes"] ~ label .chipBox p,.container.person .list-pers .pers2 [name="personajes"] ~ label .chipBox p,.container.person .list-pers .pers3 [name="personajes"] ~ label .chipBox p{font-size:1.8rem;}
.container.person .list-pers .pers1 [name="personajes"] ~ label .chipBox p strong,.container.person .list-pers .pers2 [name="personajes"] ~ label .chipBox p strong,.container.person .list-pers .pers3 [name="personajes"] ~ label .chipBox p strong{font-size:2rem;}

/**ficha**/
.person .list-pers .mainBox .infoBox > .mediaBox{width:30%;float:right;padding-top:3rem;}
.person .list-pers .mainBox .infoBox > .mediaBox .ima{padding-top:133.33333%;}

.container.person .list-pers [name="personajes"]:checked ~ label .mainBox .infoBox:hover:after{opacity:.6;}

.person .list-pers .mainBox .contentBox {float:right;width:70%;height:100%;padding:2rem 2rem 4rem 2rem;}
.person .list-pers .mainBox .contentBox .txtBox span{font-size:2.4rem;width:100%;display:block;padding:4rem 0;}
.person .list-pers .mainBox .contentBox .txtBox span strong{font-size:3.6rem;}
.person .list-pers .mainBox .contentBox .auxBox p {font-size:2rem;line-height:3rem;padding-bottom:1rem;}

.person .list-pers .mainBox .relBox{padding:2rem;}
.person .list-pers .mainBox .relBox article{box-shadow:0 0 1rem 0rem rgba(0,0,0,.7);}

/***activar***/
/*cambiar posicion en pantalla*/
.person .list-pers [name="personajes"]{top:12.5%;}