@import url('https://fonts.googleapis.com/css?family=Italianno');
/***ajsutes fondo***/
/**fondo**/
.person .gridBox{overflow:visible;}
.person section > h1 {padding:2rem 0;}
.person section > h1 > span {font-size:3.2rem;font-weight:500;line-height:6rem;}
.person .grid{background:url('/css/rtve.2016.television/rtve.series/reinas/i/personajes/personajes-reinas-fondo.jpg') no-repeat;background-size:100% auto;background-position:center top;}
.person.bloody .gridBox{background:transparent;padding:0;float:left;}
/**fuentes**/
.subheader + .bodier .toplayer + .person .grid .secBox{text-align:center;padding-top:2rem;}
.person .grid .secBox span {font-size:3rem;font-family:'Roboto','arial',sans-serif;}
.person .list-pers .mainBox .contentBox .txtBox {font-size:2.2rem;font-weight:600;padding-top:4rem;padding-bottom:1.5rem;}
.person .infoBox .list-pers [name="personajes"] ~ label .mainBox .contentBox .auxBox p{font-size:1.7rem;font-weight:400;line-height:1.3;}
.person .list-pers .mainBox .contentBox .txtBox{color:#746754;}
.person .list-pers .mainBox .contentBox .txtBox strong{color:#eaeaea;}
.person .list-pers .mainBox .contentBox .auxBox p{color:#2f2f2f;}
.person .list-pers .mainBox .contentBox .txtBox strong{display:block;font-size:8rem;font-weight:400;line-height:10rem;font-family:Italianno;}

.person .chipBox {cursor:pointer;}
/***personajes***/
/**base**/
.person .list-pers,.person li[class*="pers"]{width:100%;display:inline-block;float:left;}
.person li[class*="pers"]{width:20%;}
.person li[class*="pers"]:first-child,.person li[class*="pers"]:nth-child(10){margin-left:10%;}
.person li[class*="pers"]:nth-child(4){margin-right:10%;}
.person .list-pers [name="personajes"], .person .list-pers [name="personajes"] ~ label .mainBox, .person .list-pers [name="personajes"] ~ label .chipBox p{position:absolute;clip:rect(0,0,0,0);top:0;left:0;overflow:hidden;}
.person .list-pers [name="personajes"]:checked ~ label .mainBox{height:100%;width:100%;clip:auto;top:auto;left:0;bottom:0;cursor:pointer;background:url('/css/rtve.2016.television/rtve.series/reinas/i/personajes/personajes-reinas-fondo-info.jpg') top left;background-size:auto 100%;box-shadow:0 0 1rem 0.2rem rgba(0,0,0,0.3);}
.person .list-pers [name="personajes"]:checked ~ label .mainBox:after{content:'';display:block;width:5rem;height:5rem;background:url('/css/rtve.2016.television/rtve.series/reinas/i/personajes/personajes-reinas-icono-cerrar.png') no-repeat calc(100% - 1.5rem) 1.5rem;position:absolute;top:0;right:0;}

/**color**/
.person .list-pers{margin:0 0 4rem 0;position:relative;}
/*cuadros*/
.person li[class*="pers"]{background:transparent;border-width:0.1rem;border-style:solid;border-color:transparent;}

/**ficha**/
.person .gridBox .list-pers .mainBox .infoBox{height:100%;}
.person .gridBox .list-pers .mainBox .mediaBox{width:38.89%;position:absolute;margin:0;bottom:0;right:0;}
.person .gridBox .list-pers .mainBox .mediaBox .ima{padding-top:116.5%;background:transparent;}
.person .gridBox .list-pers .mainBox .mediaBox .ima:before{display:none;}
.person .gridBox .list-pers .mainBox .mediaBox .ima img{width:auto;height:100%;right:0;left:auto;}
.person .gridBox .infoBox .list-pers .mainBox .mediaBox .ima img, .person .gridBox .infoBox .list-pers .mainBox:hover .mediaBox .ima img{opacity:1;}
.person .gridBox .list-pers .mainBox .contentBox{padding:2rem 38.89% 6rem 6rem;border-right:6rem solid transparent;position:relative;margin:0;height:100%;}
.person .gridBox .list-pers .mainBox .contentBox .auxBox{margin:0;display:block;overflow:auto;height:calc(100% - 18rem);}