@import url('/css/rtve.2018.playz/modules/personajes.desktp.css');
@import url('https://fonts.googleapis.com/css?family=Anton');

.infoBox .list-pers li {width:20%;float:left;padding:0 .2rem;}
.infoBox .list-pers li .chipBox:after{display:none;}
.person .chipBox .img {display:flex;justify-content:center;overflow:hidden;}
.person .chipBox .img img {width:auto;height:auto;}

/*Bordes*/
.infoBox .list-pers li .chipBox:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(1,43,67,.3);border:1px solid rgb(0,255,255);
-webkit-box-shadow:inset 0 0 12.5px 2px rgba(0,255,255,1);
-moz-box-shadow:inset 0 0 12.5px 2px rgba(0,255,255,1);
box-shadow:inset 0 0 12.5px 2px rgba(0,255,255,1);}

/*Transition Effect*/
.person .list-pers [name="personajes"] ~ label .chipBox p {text-transform:uppercase;text-align:center;font-family:'Anton',sans-serif;font-size:5rem;color:#ff67ed;padding-bottom:4rem;letter-spacing:8;
	-webkit-transition:.8s ease-in-out;
    -moz-transition:.8s ease-in-out;
    -o-transition:.8s ease-in-out;
    transition:.8s ease-in-out;}
.person .list-pers [name="personajes"] ~ label .chipBox p strong {opacity:0;font-family:'Roboto',sans-serif;letter-spacing:4pt;color:#e8e8e8;font-size:1.4rem;text-shadow:none;position:absolute;bottom:-6rem;width:100%;left:0;
	-webkit-transition:.5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition:.5s ease-in-out;
    transition:.5s ease-in-out;}

/*Hover effect*/
.infoBox .list-pers li .chipBox:hover p{text-shadow:0px 0px 10px rgba(255,103,237,1);
	-ms-transform:translate(0,-150px);
    -webkit-transform:translate(0,-150px);
    transform:translate(0,-150px);}
.infoBox .list-pers li .chipBox:hover p strong {opacity:1;text-shadow:none;
	-ms-transform:translate(0,-50px);
    -webkit-transform:translate(0,-50px);
    transform:translate(0,-50px);}
.person .chipBox:hover .img img {opacity:1;}
.person .chipBox:hover .img:after {content:'';position:absolute;height:100%;width:100%;top:0;left:0;
	background:-moz-linear-gradient(top,rgba(0,255,255,0.20) 0%,rgba(0,255,255,0.5) 100%);
	background:-webkit-linear-gradient(top,rgba(0,255,255,0.20) 0%,rgba(0,255,255,0.5) 100%);
	background:linear-gradient(to bottom,rgba(0,255,255,0.20) 0%,rgba(0,255,255,0.5) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4000ffff',endColorstr='#8000ffff',GradientType=0 );}

/*FICHA*/
.infoBox .list-pers [name="personajes"] ~ label .mainBox .infoBox .mediaBox {width:100%;height:100%;}
.person .list-pers .mainBox .mediaBox .ima {padding-top:26.6666%;}
.person .list-pers .mainBox .mediaBox {background:#00314c;}
.person .list-pers .mainBox .mediaBox .ima img {left:auto;right:0;}
.person .list-pers .mainBox .contentBox {padding:2rem 45% 2rem 5rem;}
.person .list-pers .mainBox .contentBox .txtBox {padding-bottom:4rem;}
.person .list-pers .mainBox .contentBox .txtBox strong {font-family:'Anton',sans-serif;font-size:6rem;color:#ff67ed;padding-bottom:1rem;text-shadow:0px 0px 15px #ff67ed;letter-spacing:20;}
.person .list-pers .mainBox .contentBox .txtBox span {text-transform:uppercase;font-weight:900;letter-spacing:4pt;color:#e8e8e8;font-size:1.4rem;}
.person .list-pers .mainBox .contentBox .auxBox p{color:#e8e8e8;line-height:2.4rem;font-size:1.6rem;font-weight:300;}
.person .list-pers [name="personajes"]:checked ~ label .mainBox {-webkit-box-shadow:0 0 12.5px 2px rgba(0,255,255,1);-moz-box-shadow:0 0 12.5px 2px rgba(0,255,255,1);box-shadow: 0 0 12.5px 2px rgba(0,255,255,1);}
.person .list-pers [name="personajes"]:checked ~ label .mainBox:after {width:3.2rem;height:3.2rem;background:url('/css/rtve.2018.playz/webseries/bajo-red-TE_SBJR3R0/i/personajes/bajo-la-red_ficha-cerrar.png') no-repeat;}

.person .list-pers .mainBox .relBox > span {font-size:1.6rem;font-weight:300;letter-spacing: 1.2pt;text-transform:uppercase;color:#e8e8e8;}
.person .relBox {position:absolute;bottom:0;right:0;}
.person .relBox .ico.insta {width:0;height:0;border-left:4rem solid transparent;border-top: 4rem solid transparent;border-right: 4rem solid #00ffff;border-bottom: 4rem solid #00ffff;margin-right: -.1rem;}
.person .relBox .ico.insta img {filter: invert(1);}

.person .list-pers .mainBox .relBox > span {position:relative;bottom:1rem;}