/*fondo*/
.toplayer + .container.person {background-color:transparent;}
.person section > h1 {padding:2rem 0;}
.person section > h1 > span {font-size:3.2rem;font-weight:500;line-height:6rem;}
.person .secBox {background-image:url('./i/fondo_cabecera.jpg');}
.person .secBox > span {text-transform:none;}
.person.bloody .gridBox {background:transparent;padding:0;float:left;}
.bodier .person.container:not(.falseStriplayer):not(.striplayer):not([class*='separador']) {padding-top:0;}

/*fonts*/
.toplayer + .container.person .grid .secBox span {clip: rect(0,0,0,0);position:absolute;top:-100%;left:-100%;}
.person .list-pers .mainBox .contentBox .txtBox {font-size:3rem;font-weight:300;padding-top:7rem;padding-bottom:5.5rem;}
.person .list-pers .contentBox .auxBox p {font-size:1.8rem;font-weight:400;line-height:1.3;}
.person .list-pers .mainBox .contentBox * {color:#363942;}
.person .list-pers .mainBox .contentBox .txtBox strong {display:block;font-size:12rem;font-weight:100;}

.person .chipBox {cursor:pointer;position:relative}

/***personajes***/
.person .gridBox .infoBox .list-pers .mainBox .mediaBox .ima img, .person .gridBox .infoBox .list-pers .mainBox:hover .mediaBox .ima img{opacity:1;}
.person .list-pers,.person li[class*="pers"]{width:100%;display:inline-block;float:left;}
.person li[class*="pers"]{width:20%;}
.person .list-pers [name="personajes"] ~ label .chipBox p strong {font-size:3.2rem;display:block;}
.person .list-pers [name="personajes"] ~ label .chipBox p {position:absolute;width:100%;bottom:0;top:auto;color:#fff;font-weight:300;font-size:2.2rem;line-height:1.3;padding:0 2rem 1rem 2rem;z-index:1;}
.person .list-pers [name="personajes"], .person .list-pers [name="personajes"] ~ label .mainBox {position:absolute;clip:rect(0,0,0,0);top:17rem;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:#f6edef;background-size:auto 100%;box-shadow:0 0 1rem 0.2rem rgba(0,0,0,0.3);z-index:2;}
.person .list-pers [name="personajes"]:checked ~ label .mainBox:after{content:'';display:block;width:2.3rem;height:2.3rem;background:url('./i/btn_close.png') no-repeat;position:absolute;top:0;right:0;border: 1.5rem solid transparent;}
.person .chipBox:after {content:"";height:35%;position:absolute;bottom:0;display:block;width:100%;
    background: -moz-linear-gradient(top, rgba(26,26,26,0.01) 55%, rgba(26,26,26,0.32) 69%, rgba(26,26,26,1) 100%);
    background: -webkit-linear-gradient(top, rgba(26,26,26,0.01) 55%,rgba(26,26,26,0.32) 69%,rgba(26,26,26,1) 100%);
    background: linear-gradient(to bottom, rgba(26,26,26,0.01) 0,rgba(26,26,26,0.32) 63%,rgba(26,26,26,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#031a1a1a', endColorstr='#1a1a1a',GradientType=0 )}

/*color*/
.person .list-pers {position:relative;}

/**ficha**/
.person .list-pers .mainBox .mediaBox {width:70.3%;position:static;}   
.person .list-pers .mainBox .mediaBox .ima {padding-top:100%;}
.person .list-pers .mainBox .mediaBox .ima img{width:auto;height:100%;right:auto;bottom:0;left:0;opacity:1;top:2%;}
.person .list-pers .mainBox .contentBox {height:100%;padding:4rem 11rem 6rem 58rem;position:absolute;top:0;}
.person .list-pers .mainBox .infoBox {height:100%;}
.person .list-pers .mainBox .auxBox p {padding-bottom:1rem;}
.person .list-pers .mainBox .auxBox p:empty {padding-bottom:0;}
.person .list-pers .mainBox .contentBox .auxBox {margin:0;display:block;overflow: auto;height:calc(100% - 14rem);}

@media (max-width:1060px) {
	.person .list-pers .mainBox .contentBox {padding:0 6rem 3rem 50%;}
	.person .list-pers .mainBox .contentBox .txtBox {padding-bottom:5rem;}
	.person .list-pers .mainBox .contentBox .txtBox strong {font-size:9rem;}
	.person .list-pers [name="personajes"] ~ label .chipBox p strong {font-size:2.8rem;}
	.person .list-pers [name="personajes"] ~ label .chipBox p {font-size:1.9rem;}
}

/*hover*/
.person .chipBox:hover .img img {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity:0.7;
 }
