@import url("/css/rtve.2018.television/rtve.series/derecho-a-sonar-TE_SDRH188/TE_SDRH188.basics.personajes.css");
/*colores*/
.toplayer + .person{padding-top:6rem;}
.wrapper .toplayer + .person .grid{box-shadow:none;}
.wrapper.bodier .container.person section{max-width:118rem;margin:0 auto;display:block;}
.wrapper.bodier .container.person{border-bottom:8rem solid #bdad9b;margin:0;}
.wrapper.bodier .container.person ~ .botlayer{display:none;}

/*Bloques*/
.container.person .infoBox .list-pers{display:flex;flex-wrap:wrap;}
.container.person .infoBox .list-pers li{float:left;padding:1.5%;width:20%;}
.container.person .infoBox .list-pers li.pers2,.container.person .infoBox .list-pers li.pers1{padding:0;width:20%;margin:0;}
.container.person .infoBox .list-pers li.pers1{margin-left:20%;margin-right:10%;}
.container.person .infoBox .list-pers li.pers2{margin-right:20%;margin-left:10%;}
.container.person .infoBox .list-pers li.pers8 {margin-left:10%;}
.container.person .infoBox .list-pers li.pers3,.container.person .infoBox .list-pers li.pers8,
.container.person .infoBox .list-pers li.pers1{clear:left;}
.container.person .list-pers [class*="pers"] .chipBox img {width:100%;border:.4rem solid #506273;border-radius:100%;}

/*balanza*/
.container.person .infoBox .list-pers li.pers5{margin-bottom:4rem;}
.container.person .infoBox .list-pers li.pers4:after,.container.person .infoBox .list-pers li.pers6:after {width:33%;content:"";display:inline-block;height:.4rem;background:#506273;position:absolute;left:10%;margin:2rem;margin-top:3.8rem;}
.container.person .infoBox .list-pers li.pers6:after {left:53%;}
.container.person .infoBox .list-pers li.pers5:after {margin-top:2rem;height:5rem;width:5rem;background:url('/css/rtve.2018.television/rtve.series/derecho-a-sonar-TE_SDRH188/i/TE_SDRH188.balanza.png');content:"";display:inline-block;position:absolute;left:50%;margin-left:-2.5rem;background-size:contain;}
.container.person .list-pers [class*="pers"] .chipBox{-webkit-filter:grayscale(50%);filter:grayscale(50%);position:relative;}
.container.person .list-pers [class*="pers"] .chipBox:hover{-webkit-filter:grayscale(0);filter:grayscale(0);transition:all .3s;cursor:pointer;}
.container.person .list-pers [class*="pers"] .chipBox:hover p{font-weight: 600;}
.container.person .list-pers [class*="pers"] .chipBox img{width:100%;}
.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:#506273;text-transform:none;font-family:'Noto Serif',serif;font-size:2.4rem;text-align: center;}

/**ficha**/
.person .list-pers .mainBox .mediaBox .ima img{width:auto;height:100%;}
.container.person .list-pers .mainBox .infoBox {width:100%;max-width:106.2rem;max-height:65rem;background:#f6f6f6;display:block;position:relative;overflow:visible;z-index:0;}
.container:not(.inside) .gridBox .mediaBox {margin-bottom:0rem;}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox .infoBox: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/el-continental-TE_STAL6I7/i/TE_STAL6I7.close.personajes.png') no-repeat;cursor:pointer;}

.container.person .list-pers .mainBox .mediaBox {width:100%;height:auto;padding:2% 37%;background: #506273;}
.container.person .list-pers .mainBox .mediaBox .ima{padding-top:100%;height:0;outline:0;border-radius:100%;border: .4rem solid #506273;background:#f2e5d7;position:absolute;width: 25rem;height: 25rem;padding:0;z-index:1;left: 64%;top: -64%;}
.container.person .list-pers .mainBox .contentBox {width:100%;margin:0 auto;text-align:left;}
.container.person .list-pers .mainBox .contentBox .txtBox span strong{font-size:3.6rem;color:#fff;text-transform:none;font-family:'Noto Serif', serif;}

.person .list-pers .mainBox .contentBox .txtBox{padding-bottom:2rem;background:#506273;padding-left: 4rem;}
.person .list-pers .mainBox .contentBox .txtBox span{line-height: 1.4;font-size:2rem;font-weight:300;width:100%;color:#fff;font-family: 'Noto Serif', serif;position:relative;top: -1.4rem;}
.person .list-pers .mainBox .contentBox .txtBox span strong{display:block;}
.person .list-pers .mainBox .contentBox .auxBox{font-size: 2rem;line-height: 1.4;padding: 4rem 0rem 6rem 4rem;font-weight:300;color:#506273;font-family:'Noto Serif',serif;width: 60%;}
.person .list-pers .mainBox .contentBox .auxBox:empty {padding-bottom:0;}

/***balanza***/
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox .contentBox:after {content: "";display: block;height: .4rem;width: 92%;background: #506273;position: absolute;top: 92%;left: 3.5%;}
.container.person .list-pers .mainBox:after {content: "";display: inline-block;height: 5rem;width: 5rem;background: url('/css/rtve.2018.television/rtve.series/derecho-a-sonar-TE_SDRH188/i/TE_SDRH188.balanza.png') #f6f6f6;z-index: 2;position: relative;left:24%;top:-7rem;background-repeat: no-repeat;background-size:contain;padding: 0rem 2rem;background-position: center;}

/***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;transform-origin:center;-webkit-transform:scale(0,0);transform:scale(0,0);}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox{width:100%;height:100%;clip:auto;display:flex;flex-direction:column;flex-wrap:wrap;justify-items:center;align-items:center;top:0;left:0;border:2rem solid transparent;z-index:1;overflow:visible;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:transform ease .5s;transition:transform ease .5s;}