@import url('https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister');
@import url('/css/rtve.2018.playz/modules/personajes.desktp.css');

/*Fondo*/
.wrapper.bodier{background:#23262e;}

/*Personajes principal*/
.container.person .grid .gridBox .list-pers.num_elem7{height:auto;}

.container.person .grid .gridBox .list-pers li.pers1,
.container.person .grid .gridBox .list-pers li.pers2,
.container.person .grid .gridBox .list-pers li.pers3{width:33.3333%;}

.container.person .grid .gridBox .list-pers li{width:25%;}

.container.person .grid .gridBox .list-pers li .chipBox p{background:rgba(0,0,0,.25);font-family: 'Love Ya Like A Sister', cursive;}

/*Ficha personajes*/
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox{background:#23262e;top:20%;bottom:auto;}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox .infoBox{height:auto;}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox .infoBox .mediaBox{float:left;width:40%;height:auto;padding-right:2%;}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox .infoBox .mediaBox .ima{height:auto;width:100%;padding-top:0;}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox .infoBox .mediaBox .ima img{position:relative;width:100%;height:auto}
.container.person .list-pers [name="personajes"]:checked ~ label .mainBox .infoBox .contentBox{float:right;width:58%;position:relative;padding:0 5rem 0 0;height:auto;}

.container.person .list-pers .mainBox .contentBox *{color:#fff;}

.container.person .list-pers .mainBox .contentBox .txtBox span{font-size:4rem;margin-bottom:1.5rem;display:block;}

.container.person .list-pers .mainBox .contentBox .txtBox strong {font-size:8rem;font-family: 'Love Ya Like A Sister', cursive;}


.container.person .list-pers .mainBox .contentBox .auxBox p strong{display:block;font-weight:300;font-size:3rem;padding-bottom:2.5rem;}

.container.person .list-pers .mainBox .contentBox .auxBox p{font-weight:300;font-size:2rem;}

/*Aperece/Desaparece*/
.person p strong:empty:after {content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.person p:empty {position:static;}


/*/// glitch ///*/
.chipBox:hover .glitch{position:relative;display:block;width:40rem;margin:0 auto 0 auto;font:bold 3.2rem/3.2rem 'Love Ya Like A Sister', cursive;color:#fff;text-decoration:none;animation:tilt 1 linear 2s alternate-reverse;}
.chipBox:hover .glitch:after{content: attr(data-text);position:absolute;left:4px;top:0;color:#c1c1c1;background:rgba(0,0,0,.2);overflow:hidden;clip:rect(0,900px,0,0);animation:noise 1 linear 2s alternate-reverse;}
.chipBox:hover .glitch:before{content: attr(data-text);position:absolute;left:-4px;top:0;color:#cecece;background:rgba(0,0,0,.7);overflow:hidden;clip:rect(0,900px,0,0);animation:noise2 1 linear 3s alternate-reverse;}

@keyframes noise {0% {clip: rect(67px, 9999px, 60px, 0);}5% {clip: rect(96px, 9999px, 40px, 0);}10% {clip: rect(81px, 9999px, 67px, 0);}
15.0% {clip: rect(17px, 9999px, 57px, 0);}20% {clip: rect(78px, 9999px, 13px, 0);}25% {clip: rect(52px, 9999px, 64px, 0);text-shadow:2px 0 #ff0;}
30.0% {clip: rect(26px, 9999px, 10px, 0);}35% {clip: rect(73px, 9999px, 33px, 0);}40% {clip: rect(15px, 9999px, 28px, 0);}45% {clip: rect(31px, 9999px, 55px, 0);}
50% {clip: rect(42px, 9999px, 60px, 0);text-shadow:2px 0 #0f0;}55.0% {clip: rect(29px, 9999px, 77px, 0);}60.0% {clip: rect(91px, 9999px, 39px, 0);}
65% {clip: rect(12px, 9999px, 1px, 0);}70% {clip: rect(27px, 9999px, 55px, 0);}75% {clip: rect(37px, 9999px, 7px, 0);text-shadow:2px 0 #00f;}
80% {clip: rect(75px, 9999px, 70px, 0);}85.0% {clip: rect(60px, 9999px, 5px, 0);}90% {clip: rect(23px, 9999px, 92px, 0);}95% {clip: rect(10px, 9999px, 78px, 0);}
100% {clip: rect(33px, 9999px, 32px, 0);text-shadow:2px 0 #f00;}}
@keyframes noise2 {0% {clip: rect(50px, 9999px, 59px, 0);}5% {clip: rect(87px, 9999px, 56px, 0);}10% {clip: rect(50px, 9999px, 75px, 0);}
15.0% {clip: rect(100px, 9999px, 82px, 0);}20% {clip: rect(4px, 9999px, 85px, 0);}25% {clip: rect(100px, 9999px, 61px, 0);text-shadow:2px 0 #0f0;}
30.0% {clip: rect(16px, 9999px, 59px, 0);}35% {clip: rect(29px, 9999px, 100px, 0);}40% {clip: rect(100px, 9999px, 56px, 0);}45% {clip: rect(77px, 9999px, 3px, 0);}
50% {clip: rect(34px, 9999px, 50px, 0);text-shadow:2px 0 #f00;}55.0% {clip: rect(29px, 9999px, 10px, 0);}60.0% {clip: rect(82px, 9999px, 77px, 0);}
65% {clip: rect(68px, 9999px, 11px, 0);}70% {clip: rect(6px, 9999px, 70px, 0);}75% {clip: rect(7px, 9999px, 13px, 0);text-shadow:2px 0 #ff0;}
80% {clip: rect(46px, 9999px, 16px, 0);}85.0% {clip: rect(10px, 9999px, 12px, 0);}90% {clip: rect(20px, 9999px, 69px, 0);}95% {clip: rect(7px, 9999px, 6px, 0);}
100% {clip: rect(37px, 9999px, 70px, 0);text-shadow:2px 0 #00f;}}

.person .gridBox .infoBox .list-pers .no-active .chipBox .img img {opacity: 1;}