@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');

.sec-person h1{border:0;}
.sec-person h1 span{color:#fd6e66;text-transform:uppercase;text-align: center;display: block;padding: 2rem;font-size: 300%;font-family: Roboto Slab;font-weight: 400;}
.sec-person section {background: #f1f1f1;}
.sec-person .mainBox, .sec-person .chipBox p, .sec-person .list-pers input{clip:rect(0,0,0,0);position:absolute;overflow:hidden;}
.sec-person input:checked + label > .mainBox{clip:auto;}

.sec-person ul{padding:0 4rem;position: relative;overflow: hidden;background:url("/css/rtve.2015.television/rtve.series/el-caso/i/personajes/fondo.jpg") center top;}
.sec-person li{display: inline-block;width:25%;margin:-2px;}
.sec-person .chipBox{width:100%;display: inline-block;padding:2rem;padding-bottom: 7.4rem;position: relative;}
.sec-person .chipBox img{width:100%;height:auto;position:relative;box-shadow:0.4em 0.4em 1em rgba(0, 0, 0, .5);cursor:pointer;}

.sec-person .pers1 .chipBox:after, .sec-person .pers5 .chipBox:after, .sec-person .pers9 .chipBox:after, .sec-person .pers13 .chipBox:after{content:"";position:absolute;width: 415.6862%;height: 14.8em;background: url("/css/rtve.2015.television/rtve.series/el-caso/i/personajes/estante.png") center bottom;background-size:100% auto;bottom:0;z-index: 1;margin-left: -23rem;}

.sec-person .chipBox img {-ms-transform: rotate(1deg);-webkit-transform: rotate(1deg);transform: rotate(1deg);}
.sec-person .pers1 .chipBox img {-ms-transform: rotate(-1deg);-webkit-transform: rotate(-1deg);transform: rotate(-1deg);bottom: 0;}
.sec-person .pers2 .chipBox img {-ms-transform: rotate(1.5deg);-webkit-transform: rotate(1.5deg);transform: rotate(1.5deg);}
.sec-person .pers3 .chipBox img {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
.sec-person .pers4 .chipBox img {-ms-transform: rotate(-1deg);-webkit-transform: rotate(-1deg);transform: rotate(-1deg);}
.sec-person .pers5 .chipBox img {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
.sec-person .pers6 .chipBox img {-ms-transform: rotate(-1deg);-webkit-transform: rotate(-1deg);transform: rotate(-1deg);}
.sec-person .pers7 .chipBox img {-ms-transform: rotate(4deg);-webkit-transform: rotate(4deg);transform: rotate(4deg);}
.sec-person .pers8 .chipBox img {-ms-transform: rotate(-1deg);-webkit-transform: rotate(-1deg);transform: rotate(-1deg);}
.sec-person .pers9 .chipBox img {-ms-transform: rotate(0.3deg);-webkit-transform: rotate(0.3deg);transform: rotate(0.3deg);}
.sec-person .pers10 .chipBox img {-ms-transform: rotate(-1deg);-webkit-transform: rotate(-1deg);transform: rotate(-1deg);}
.sec-person .pers11 .chipBox img {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
.sec-person .pers12 .chipBox img {-ms-transform: rotate(1deg);-webkit-transform: rotate(1deg);transform: rotate(1deg);}
.sec-person .pers13 .chipBox img {-ms-transform: rotate(3deg);-webkit-transform: rotate(3deg);transform: rotate(3deg);}
.sec-person .pers14 .chipBox img {-ms-transform: rotate(-2.5deg);-webkit-transform: rotate(-2.5deg);transform: rotate(-2.5deg);}
.sec-person .pers15 .chipBox img {-ms-transform: rotate(-0.5deg);-webkit-transform: rotate(-0.5deg);transform: rotate(-0.5deg);}
.sec-person .pers16 .chipBox img {-ms-transform: rotate(2deg);-webkit-transform: rotate(2deg);transform: rotate(2deg);}

 
.sec-person .mainBox {z-index:2;opacity:1;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.5);padding:2rem;}
.sec-person .mainBox > div {background: url('/css/rtve.2015.television/rtve.series/el-caso/i/personajes/textura_personajes.png') #f8f0e3;position: relative;border: 1px solid #C6C6C6;padding: 2rem;width: 80%;left: 10%;top: 5%;}
.sec-person .mainBox > div > * {display:inline-block;}
.sec-person .mainBox .mediaBox {width:37%;padding: 5% 2rem 22% 0;text-align: center;vertical-align: top;position: relative;min-width: 25rem;}
.sec-person .mainBox .mediaBox:after{content:"";position:absolute;width:100%;height:100%;background: url("/css/rtve.2015.television/rtve.series/el-caso/i/personajes/background_sello.png") no-repeat center 100%;left: 0;top: 0;}
.sec-person .mainBox .mediaBox .ima{padding-top: 0;max-width: 25rem;float: none;background-color:transparent; }
.sec-person .mainBox .mediaBox img {position: relative;}
.sec-person .mainBox .contentBox {width: 63%;margin-left: -3px;padding: 2rem 2rem 2rem 2rem;}
.sec-person .mainBox .contentBox:before{content:"";position:absolute;right: 2rem;top: 2rem;width:3rem;height:3rem;background: url("/css/rtve.2015.television/rtve.series/el-caso/i/personajes/close.png") no-repeat right top;cursor: pointer;}
.sec-person .mainBox .contentBox span, .sec-person .mainBox .contentBox p {font-family: 'Inconsolata','Roboto','arial',sans-serif;font-weight:400;color:#222;}
.sec-person .mainBox .contentBox .txtBox {padding-top: 15%;padding-bottom: 2rem;background: url("/css/rtve.2015.television/rtve.series/el-caso/i/personajes/info_personaje_el_caso_logo.png") no-repeat right 30%;}
.sec-person .mainBox .contentBox .txtBox span {display:block;font-size:260%;}
.sec-person .notory.g1 .gridBox > .cell:first-child .mainBox .auxBox p {font-size:180%;color:#222;}
.sec-person .mainBox .contentBox .boton {display:block;text-align:center;position: absolute;width: 63%;bottom: 4rem;padding: 0 2rem;left: 37%;}
.sec-person .mainBox .contentBox .boton a {padding: 0.5rem 4.5rem;background:#FE6E66;display: inline-block;}
.sec-person .mainBox .contentBox .boton a strong {font-family: 'Inconsolata','Roboto','arial',sans-serif;font-weight: 400;}

.sec-person .pers5 .mainBox > div, .sec-person .pers6 .mainBox > div, .sec-person .pers7 .mainBox > div, .sec-person .pers8 .mainBox > div{ top:25%;}
.sec-person .pers9 .mainBox > div, .sec-person .pers10 .mainBox > div, .sec-person .pers11 .mainBox > div, .sec-person .pers12 .mainBox > div {top:50%;}
.sec-person .pers13 .mainBox > div, .sec-person .pers14 .mainBox > div, .sec-person .pers15 .mainBox > div, .sec-person .pers16 .mainBox > div {top:60%;}

@media (max-width: 700px) {

}

/* Fuegos artificiales */
.sec-person input ~ label > .mainBox > div{
    opacity: 0;
	transition:all ease 1s;
}

.sec-person input:checked ~ label > .mainBox > div{
    opacity: 1;
     -webkit-animation: batman-newspaper 2s 1 ease-out;  /* Safari 4+ */
  -moz-animation:    batman-newspaper 2s 1 ease-out;  /* Fx 5+ */
  -o-animation:      batman-newspaper 2s 1 ease-out;  /* Opera 12+ */
  animation:         batman-newspaper 2s 1 ease-out; /* IE 10+, Fx 29+ */
}



.sec-person .chipBox img{
    -webkit-transform: scale(1);-moz-transform: scale(1);transform:scale(1);bottom: 0;
    -webkit-transition: all .20s ease;
    -moz-transition: all .20s ease;
    transition: all .20s ease;
}

.sec-person .chipBox img:hover {
    -webkit-transform: scale(1.05);-moz-transform: scale(1.05);transform:scale(1.05);bottom: 1rem;
    -webkit-transition: all .20s ease;
    -moz-transition: all .20s ease;
    transition: all .20s ease;
}


@-webkit-keyframes batman-newspaper {
  0%   { opacity: 0.5; -webkit-transform: scale(0) rotate(0);}
  50%  { opacity:0.95;-webkit-transform: scale(0.99) rotate(1080deg);}
  100% { opacity: 1;-webkit-transform: scale(1) rotate(1080deg);}
}
@-moz-keyframes batman-newspaper {
  0%   { opacity: 0.5; -moz-transform: scale(0) rotate(0);}
  50%  { opacity:0.95;-moz-transform: scale(0.99) rotate(1080deg);}
  100% { opacity: 1;-moz-transform: scale(1) rotate(1080deg);}
}
@-o-keyframes batman-newspaper {
  0%   { opacity: 0.5; -o-transform: scale(0) rotate(0);}
  50%  { opacity:0.95;-o-transform: scale(0.99) rotate(1080deg);}
  100% { opacity: 1;-o-transform: scale(1) rotate(1080deg);}
}
@keyframes batman-newspaper {
  0%   { opacity: 0.5; transform: scale(0) rotate(0);}
  50%  { opacity: 0.95; transform: scale(0.99) rotate(1800deg);}
  100% { opacity: 1; transform: scale(1) rotate(1800deg);}
}