@import url("/css/rtve.2018.television/rtve.series/fugitiva-TE_SFGV4ZZ/TE_SFGV4ZZ.basics.personajes.css");

/*Bloques*/
.container.person .infoBox .list-pers li{float:left;padding:1%;width:20%;}
.container.person .infoBox .list-pers li.pers1,
.container.person .infoBox .list-pers li.pers2,
.container.person .infoBox .list-pers li.pers3,
.container.person .infoBox .list-pers li.pers4{width:25%;}

.container.person .infoBox .list-pers li.pers5{margin-left:20%;clear:left;}
.container.person .infoBox .list-pers li.pers7{margin-right:20%;}
.container.person .infoBox .list-pers li.pers8{margin-left:20%;clear:left;}
.container.person .infoBox .list-pers li.pers10{margin-right:20%;}
.container.person .infoBox .list-pers li.pers11{margin-left:10%;clear:left;}

.container.person .list-pers [class*="pers"] .chipBox{-webkit-filter: grayscale(50%);filter: grayscale(50%);}
.container.person .list-pers [class*="pers"] .chipBox:hover{-webkit-filter:grayscale(0);filter:grayscale(0);transition:all .5s;cursor:pointer;}
.container.person .list-pers [name="personajes"] ~ label .chipBox p strong{padding-top:.5rem;color:#fff;display:block;font-size:2.5rem;text-transform:uppercase;}
.container.person .list-pers [name="personajes"] ~ label .chipBox p{color:#fff;text-transform:none;font-family: 'Roboto', sans-serif;font-size:2rem;display:block;}


/**ficha**/
.person .list-pers .mainBox .mediaBox .ima img{width:auto;height:100%;}

.container.person .list-pers .mainBox .infoBox {height: 100%;width:100%;background: #fff;display:inline-block;z-index:0;}
.container:not(.inside) .gridBox .mediaBox {margin-bottom:0rem;}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox:after{content:'';display:block;width:2.3rem;height:2.3rem;position:absolute;top:0;right:0;border:1.5rem solid transparent;background:url("/css/rtve.2018.television/rtve.series/fugitiva-TE_SFGV4ZZ/i/close.png") no-repeat;cursor:pointer;}

.container.person .list-pers .mainBox .mediaBox {width:45%;height:100%;padding:1%;}
.container.person .list-pers .mainBox .contentBox {float:right;width:55%;height:100%;padding: 8em 10rem 8em 0rem;}
.container.person .list-pers .mainBox .contentBox .txtBox span strong{font-size:9rem;}

.person .list-pers .mainBox .contentBox .txtBox span{font-size:2.6rem;font-weight:300;width:100%;display:block;padding-bottom:4rem;}
.person .list-pers .mainBox .contentBox .txtBox span strong{padding-bottom:1rem;display:block;}
.person .list-pers .mainBox .contentBox .auxBox p {font-size:1.6rem;line-height:2rem;padding-bottom:1rem;color:#454545;}
.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:15%;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(8,46,108,.5);position:absolute;top:-1000%;left:-100%;width:250%;height:1485%;z-index:-1;-webkit-transition:none;transition:none;}