/*fondo*/
.toplayer + .container.person {padding-top:15rem;}
.toplayer + .container.person .secBox {display:none;}

/*fonts*/
.person .list-pers .mainBox .contentBox .txtBox {font-size:3rem;font-weight:300;padding-top:2rem;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;}


/***personajes***/
.person .gridBox .infoBox .list-pers .mainBox .mediaBox .ima img, .person .gridBox .infoBox .list-pers .mainBox:hover .mediaBox .ima img{opacity:1;}
.person .gridBox .infoBox .list-pers .no-active .chipBox .img img {opacity:0.05}
.person .list-pers,.person li[class*="pers"]{width:100%;display:inline-block;float:left;}
.person .list-pers [name="personajes"] ~ label .chipBox p strong {font-size:2.5rem;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:1.8rem;line-height:1.3;padding:1rem;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-size:auto 100%;box-shadow:0 0 1rem 0.2rem rgba(0,0,0,0.3);z-index:2;}*/
.person .list-pers [name="personajes"], .person .list-pers [name="personajes"] ~ label .mainBox {position:absolute;top:auto;left:0;bottom:0;overflow:hidden;height:100%;width:100%;transform:scale(0,0);transition:.3s all ease-out;z-index:2;}
.person .list-pers [name="personajes"]:checked ~ label .mainBox{cursor:pointer;background-size:auto 100%;box-shadow:0 0 1rem 0.2rem rgba(0,0,0,0.3);transform:scale(1,1);}
.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 li:not(.no-active) .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 )}

/***size personajes***/
.person .list-pers.num_elem3 li[class*="pers"],
.person .list-pers.num_elem6 li[class*="pers"]{width:33.333333%;}
.person .list-pers.num_elem9 li[class*="pers"],
.person .list-pers.num_elem7 li[class*="pers"] {width:14.28571428571429%;}
.person .list-pers.num_elem8 li[class*="pers"] {width:20%;}
.person .list-pers.num_elem10 li[class*="pers"],
.person.num_elem10 .list-pers li[class*="pers"] {width:20%;}
.person .list-pers.num_elem11 li[class*="pers"],
.person .list-pers.num_elem12 li[class*="pers"] {width:16.666666666%;}

/*position*/
.person li:not(.no-active) .chipBox {cursor:pointer;}
.person .chipBox, .person .list-pers {position:relative}

/**ficha**/
.person .list-pers .mainBox .mediaBox {width:70.8%;position:static;}
.toplayer + .container.person .grid .cell .mainBox .mediaBox:after {height:0;}
.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:0;}
.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 {padding-bottom:4rem;}
.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);*/}

[data-cat="TE_PWEBCOL"] .person .list-pers .pers11 .mainBox .contentBox .txtBox strong,
[data-cat="TE_PWEBCOL"] .person .list-pers .pers12 .mainBox .contentBox .txtBox strong {font-size:8rem;}

/****1 fila de elementos****/
.person .list-pers.num_elem7  {height:40rem;}
.person .list-pers.num_elem7 [name="personajes"]:checked ~ label .mainBox,
.person .list-pers.num_elem9 [name="personajes"]:checked ~ label .mainBox {height:58.5rem;}
.person .list-pers.num_elem7 .mainBox .infoBox,
.person .list-pers.num_elem9 .mainBox .infoBox {height:40rem;position:relative;bottom:0;}
.person .list-pers.num_elem7 .mainBox .contentBox,
.person .list-pers.num_elem9 .mainBox .contentBox {height:100%;position:absolute;bottom:0px;padding:0 5rem 6rem 58rem;}
.person .list-pers.num_elem7 .mainBox .contentBox .txtBox,
.person .list-pers.num_elem9 .mainBox .contentBox .txtBox {font-size:2rem;padding-top:3rem;padding-bottom:2rem;}
.person .list-pers.num_elem7 .mainBox .contentBox .txtBox strong {font-size:8rem;}
.person .list-pers.num_elem9 .mainBox .mediaBox,
.person .list-pers.num_elem7 .mainBox .mediaBox{width:39.2%;height:40rem;}
.person .list-pers.num_elem9 .mainBox .mediaBox .ima,
.person .list-pers.num_elem7 .mainBox .mediaBox .ima {height:100%;}
.person .list-pers.num_elem7 .mainBox .mediaBox .ima img {top:0;}
.person .list-pers.num_elem7 [name="personajes"] ~ label .chipBox p {font-size:1.8rem;}
.person .list-pers.num_elem7 [name="personajes"] ~ label .chipBox p strong {font-size:2.5rem;}

.person .list-pers.num_elem9 .pers1 {margin-left:14.28571428571429%;}
.person .list-pers.num_elem9 .pers6 {margin-left:21.42857142857143%;}
.person .list-pers.num_elem9 .mainBox .mediaBox {height:58.5rem;}
.person .list-pers.num_elem9 .pers6 {clear:left;}

.person .list-pers.num_elem9 [name="personajes"]:checked ~ label .mainBox {top:50%;margin-top:-29.5rem;}

/*********cambiar color segun webserie*********/
[data-cat="TE_SIFUERA"] .person .list-pers [name="personajes"] ~ label .mainBox,
[data-cat="TE_SPLASFT"] .person .list-pers [name="personajes"] ~ label .mainBox {background:#f6edef;}
[data-cat="TE_PWEBCOL"] .person .list-pers [name="personajes"] ~ label .mainBox {background:url("/css/rtve.2018.playz/webseries/colegas/i/textura_ficha.png") no-repeat #ffcb4c;background-size:contain;}
[data-cat="TE_PWEBMAM"] .person .list-pers li:nth-child(odd) label .mainBox {background:#b5d5e4;}
[data-cat="TE_PWEBMAM"] .person .list-pers li:nth-child(even) label .mainBox {background:#f9d800;}
[data-cat="TE_PWEBDOR"] .person .list-pers [name="personajes"] ~ label .mainBox {background:#230100;}
[data-cat="TE_PWEBINH"] .person .list-pers [name="personajes"] ~ label .mainBox {background:url("/css/rtve.2018.playz/webseries/inhibidos/i/inhibidos_infografia-personajes_fondo-ficha.jpg") no-repeat #0d0a09;background-size:contain;}


/*dorien colores fonts*/
[data-cat="TE_PWEBDOR"] .person .list-pers .mainBox .contentBox .txtBox strong {color:#f36565;}
[data-cat="TE_PWEBDOR"] .person .list-pers .mainBox .contentBox .txtBox span {color:#a66765;}
[data-cat="TE_PWEBDOR"] .person .infoBox .list-pers [name="personajes"] ~ label .mainBox .contentBox .auxBox p {color:#fff;}
[data-cat="TE_PWEBDOR"] .person .infoBox .list-pers {background:#230100;}
[data-cat="TE_PWEBDOR"] .person .chipBox:after {content:none;}


/*inhibidos*/
[data-cat="TE_PWEBINH"] .person .infoBox .list-pers {background:#0d0a09;}
[data-cat="TE_PWEBINH"] .person .list-pers .mainBox .contentBox .txtBox strong,
[data-cat="TE_PWEBINH"] .person .list-pers .mainBox .contentBox .txtBox span,
[data-cat="TE_PWEBINH"] .person .list-pers .mainBox .contentBox .auxBox p {color:#c9c9c9;}
[data-cat="TE_PWEBINH"] .list-pers.num_elem8 li.pers1, [data-cat="TE_PWEBINH"] .list-pers.num_elem8 li.pers5 {margin-left:12.5%;}
[data-cat="TE_PWEBINH"] .person .list-pers .mainBox .mediaBox .ima img {top:0;}
[data-cat="TE_PWEBINH"] .person .chipBox:after {content:none;}


/*********cambiar color segun tube*********/
[data-cat="TE_PTUBCHA"] .person .list-pers[class*="num_elem"] [name="personajes"]:checked ~ label .mainBox{height:100%;background:url("/css/rtve.2018.playz/tube/challengers/i/personajes/fondo_ficha.png") no-repeat #eef2ff;background-size:cover;}
[data-cat="TE_PTUBCHA"] .person .list-pers[class*="num_elem"] .mainBox .mediaBox .ima{padding:0;}
[data-cat="TE_PTUBCHA"] .person .list-pers[class*="num_elem"] .mainBox .contentBox{padding-left:40rem;width:100%;}

/*challengers colores fonts*/
[data-cat="TE_PTUBCHA"] .person .list-pers .mainBox .contentBox .txtBox strong {color:#5384d5;font-size:6rem;}
[data-cat="TE_PTUBCHA"] .person .list-pers .mainBox .contentBox .txtBox span {color:#34a3c1;}
[data-cat="TE_PTUBCHA"] .person .infoBox .list-pers [name="personajes"] ~ label .mainBox .contentBox .auxBox p {color:#1b3560;}
[data-cat="TE_PTUBCHA"] .person .chipBox:after {
    background:-moz-linear-gradient(top, rgba(45,66,118,0) 0%, rgba(45,66,118,0.5) 35%, rgba(45,66,118,0.9) 65%, rgba(45,66,118,0.9) 100%);
	background:-webkit-linear-gradient(top, rgba(45,66,118,0) 0%,rgba(45,66,118,0.5) 35%,rgba(45,66,118,0.9) 65%,rgba(45,66,118,0.9) 100%);
	background:linear-gradient(to bottom, rgba(45,66,118,0) 0%,rgba(45,66,118,0.5) 35%,rgba(45,66,118,0.9) 65%,rgba(45,66,118,0.9) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#002d4276', endColorstr='#e62d4276',GradientType=0 )
}
[data-cat="TE_PTUBCHA"] .person .list-pers .contentBox .auxBox ul {padding-left:5rem;}
[data-cat="TE_PTUBCHA"] .person .gridBox .infoBox .list-pers .mainBox .mediaBox .ima img {left:-4rem;}
[data-cat="TE_PTUBCHA"] .person .list-pers .contentBox .auxBox ul a {font-weight:500;}
[data-cat="TE_PTUBCHA"] .person .list-pers .contentBox .auxBox ul a:hover {font-weight:700;}


/*********cambiar color segun doc*********/

/*generacion instantanea*/
[data-cat="TE_SST76WS"] .person .chipBox:after{display:none;}
[data-cat="TE_SST76WS"] .person .list-pers [name="personajes"] ~ label .chipBox p strong{font-size:4rem;line-height:4rem;padding-bottom:.5rem;}
[data-cat="TE_SST76WS"] .person .list-pers [name="personajes"] ~ label .chipBox p {background:#0b0b0b;font-size:2.2rem;width:66.66666%;bottom:2rem;}

[data-cat="TE_SST76WS"] .person .list-pers .mainBox .mediaBox img{left:12rem;}
[data-cat="TE_SST76WS"] .person .list-pers .mainBox .contentBox{padding-top:5rem;padding-right:13rem;}
[data-cat="TE_SST76WS"] .person .list-pers [name="personajes"] ~ label .mainBox{background:#fff;}

[data-cat="TE_SST76WS"] .person .list-pers .mainBox .contentBox .txtBox{background:#0b0b0b;padding:2rem 10rem 2rem 2rem;}
[data-cat="TE_SST76WS"] .person .list-pers .mainBox .contentBox .txtBox *{color:#fff;font-weight:700;}
[data-cat="TE_SST76WS"] .person .list-pers .mainBox .contentBox .txtBox span{font-size:3.5rem;}
[data-cat="TE_SST76WS"] .person .list-pers .mainBox .contentBox .txtBox strong{font-size:6.8rem;line-height:6.8rem;}

[data-cat="TE_SST76WS"] .person .list-pers .mainBox .contentBox .auxBox{padding:3rem 0;}
[data-cat="TE_SST76WS"] .person .list-pers .mainBox .contentBox .auxBox p{font-size:1.8rem;line-height:2.4rem;color:#0b0b0b;}
[data-cat="TE_SST76WS"] .person .list-pers [name="personajes"]:checked ~ label .mainBox:after{background-image:url("/css/rtve.2018.playz/docs/generacion-instantanea-TE_SST76WS/i/TE_SST76WS_cerrar.personajes.png");}

/*relBox*/
.relBox {position:relative;bottom:0rem;display:inline-block;}
.relBox ul {width:auto;height:4rem;display:inline-block;}
.relBox li {display:inline-block;}
.relBox li a {width:5rem;height:5rem;display:inline-block;filter:invert(0.2);}
.relBox li.fbook a {background-image:url("/css/rtve.2018.playz/webseries/inhibidos/i/facebook.png");background-size:100%;background-repeat:no-repeat;}
.relBox li.insta a {margin-left:1rem;background-image:url("/css/rtve.2018.playz/webseries/inhibidos/i/instagram.png");background-size:100%;background-repeat:no-repeat;}
.relBox li a:hover {filter:invert(0);}
.relBox li.btn_spotify {float:left;text-align:center;margin-top:4rem;width:100%;}
.relBox li.btn_spotify  a {float:left;width:100%;height:auto;filter:invert(0);}
.relBox li.btn_spotify   span {font-size:2rem;font-weight:300;background-color:#1db954;padding:1rem 2rem;border-radius:10rem;color:#fff;text-transform:uppercase;letter-spacing:0.3pt;}

@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;
 }