@import url("/css/rtve.2019.television/rtve.series/TE_SHOVANO-hospital/TE_SHOVANO.basics.personajes.css");

.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:10rem solid #071623;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:25%;order:2;-webkit-order:2;}

.container.person .infoBox .list-pers li.pers1,.container.person .infoBox .list-pers li.pers2,.container.person .infoBox .list-pers li.pers3{padding:0;width:25%;margin:0;}
.container.person .infoBox .list-pers li.pers1{order:1;-webkit-order:1;}
.container.person .infoBox .list-pers li.pers2{order:0;-webkit-order:0;}


.container.person .infoBox .list-pers li.pers2,.container.person .infoBox .list-pers li.pers8{margin-left:12.5%;}
.container.person .infoBox .list-pers li.pers3,.container.person .infoBox .list-pers li.pers10{margin-right:12.5%;}

.container.person .infoBox .list-pers li.pers4,.container.person .infoBox .list-pers li.pers8,
.container.person .infoBox .list-pers li.pers11{clear:left;}


.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 .5s;cursor:pointer;}
.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:#071623;text-transform:none;font-family:'Mukta Vaani', sans-serif;font-size:2.1rem;font-weight:900;line-height:2.5rem;align-items:center;vertical-align:middle;display:flex;width:18rem;padding:0 1rem;height:5rem;background:rgba(230,194,80,.75);position:absolute;left:0;bottom:0;}
.container.person .list-pers [name="personajes"] ~ label .chipBox p:after{content:"";position:absolute;top:0;left:100%;border-width:2.5rem 1rem;border-style:solid;border-color:rgba(230,194,80,.75) transparent transparent rgba(230,194,80,.75);}

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

.container.person .list-pers .mainBox .infoBox {width:100%;max-width:106.2rem;max-height:65rem;background:#f6f6f6;border-bottom:2.2rem solid #e6c250;display:block;position:relative;overflow:auto;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.playz/i/btn_close.png") no-repeat;cursor:pointer;}

.container.person .list-pers .mainBox .mediaBox {width:100%;height:auto;padding:2% 37%;}
.container.person .list-pers .mainBox .mediaBox .ima{padding-top:100%;height:0;outline:0;}
.container.person .list-pers .mainBox .contentBox {width:100%;max-width:65rem;margin:0 auto;text-align:center;}
.container.person .list-pers .mainBox .contentBox .txtBox span strong{font-size:3rem;color:#071623;text-transform:none;}

.person .list-pers .mainBox .contentBox .txtBox{padding-bottom:2rem;}
.person .list-pers .mainBox .contentBox .txtBox span{font-size:2.5rem;font-weight:300;width:100%;text-transform:uppercase;display:block;color:#e6c250;}
.person .list-pers .mainBox .contentBox .txtBox span strong{display:block;}
.person .list-pers .mainBox .contentBox .auxBox{font-size:1.8rem;line-height:2.4rem;padding-bottom:3rem;font-weight:300;color:#404041;}
.person .list-pers .mainBox .contentBox .auxBox: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;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;}