
.infoBox {background:url("/infografias/favor-contra-brexit/material/fondo.png") no-repeat center top;float:left;width: 100%;padding-top: 57%;position: relative;background: #E5E1E2;padding-bottom: 5rem;}
.infoBox .list-pers li{opacity:0.2;}
.infoBox input {display:none;}
.infoBox label{position: absolute;font-size: 180%;cursor:pointer;}
.infoBox input[id="g1"]:checked ~ div li{opacity:1;}
.infoBox input[id="g2"]:checked ~ div .polit{opacity:1;}
.infoBox input[id="g3"]:checked ~ div .busin{opacity:1;}
.infoBox input[id="g4"]:checked ~ div .celeb{opacity:1;}


.infoBox label {position:absolute;bottom: 1.5rem;}
.infoBox label.all-p {left:15%;}
.infoBox label.polit {left:35.5%;}
.infoBox label.busin {left:55%;}
.infoBox label.celeb {left:74.5%;}



.infoBox input:checked + label:before {background-position:center top; }
.infoBox label:before {position:absolute;content:"";background: url("/css/rtve.2015.noticias/rtve.especiales/brexit/i/checkbox.png") no-repeat center bottom;width: 1.6rem;height: 1.6rem;margin-left: -2rem;}

.infoBox > div{position: absolute;top: 0;height: 100%;}

.infoBox > div.favor{width: 37.5%;}
.infoBox > div.neutr{width: 24.5%;margin-left: 37.5%;}
.infoBox > div.oppos {width: 38%;margin-left: 62%;}
.infoBox .list-pers li{display: inline-block;float: left;position:absolute;}
.infoBox .list-pers li.tam3{width: 15.5%;}
.infoBox .list-pers li.tam2{width: 22%;}
.infoBox .list-pers li.tam1{width: 30%;}
.infoBox .list-pers li .chipBox {} 
.infoBox .list-pers li .img{display:block;overflow:hidden;border-radius:10rem;}
.infoBox .list-pers p{display: none;}

.infoBox > div {border-color:#D0D1D3;border-style:dashed;border-width:0;margin-top: -50%;padding-bottom: 50%;position: relative;background: #EFEDEE;}
.infoBox > div h3 {float: left;margin-top: -4rem;text-align: center;display: block;width: 100%;position: relative;}
.infoBox > div h3 span{font-size: 200%;text-transform: uppercase;padding: 0.5rem 5rem;font-weight: 400;}

.infoBox > div.oppos h3 span {color: #fff;background: #5778BF;} 
.infoBox > div.favor h3 span {color: #fff;background: #F25560;} 
.infoBox > div.neutr h3 span {color: #333;background: #D0D1D3;} 

.infoBox > div:before{position:absolute;content:"";width: 100%;height: 100%;background: #efedee;top: -14%;border: 1px solid #efedee;}

.infoBox .neutr {border-left-width:1px;}
.infoBox .oppos {border-left-width:1px;}


.infoBox .oppos .list-pers li .img {border: 5px solid #5677BE;}
.infoBox .neutr .list-pers li .img {border:5px solid #D0D1D3;}
.infoBox .favor .list-pers li .img {border:5px solid #F25562;}


.infoBox > div.neutr .list-pers li.tam1{width:33%;}


.infoBox > .favor .pers1 {top: 41%;left: 30%;}
.infoBox > .favor .pers2 {top: 20%;left: 47%;}
.infoBox > .favor .pers3 {top: 4%;left: 64%;}
.infoBox > .favor .pers4 {top: 40%;left: 72%;}
.infoBox > .favor .pers5 {top: 74%;left: 45%;}
.infoBox > .favor .pers6 {top: 24%;left: 25%;}
.infoBox > .favor .pers7 {top: 8%;left: 43%;}
.infoBox > .favor .pers8 {top: 69%;left: 80%;}
.infoBox > .favor .pers9 {top: 23%;left: 81%;}
.infoBox > .favor .pers10{top: 57%;left: 58%;}
.infoBox > .favor .pers11{top: 5%;left: 17%;}
.infoBox > .favor .pers12{top: 36%;left: 6%;}
.infoBox > .favor .pers13{top: 20%;left: 6%;}
.infoBox > .favor .pers14{top: 66%;left: 26%;}
.infoBox > .favor .pers15{top: 58%;left: 7%;}
.infoBox > .favor .pers16{top: 80%;left: 65%;}


.infoBox > div.oppos .list-pers li.tam3{width: 14.5%;}
.infoBox > div.oppos .list-pers li.tam2{width: 21%;}
.infoBox > div.oppos .list-pers li.tam1{width: 29%;}


.infoBox > .neutr .pers1 {top: 32%;left: 52%;} 
.infoBox > .neutr .pers2 {top: 54%;left: 54%;}
.infoBox > .neutr .pers3 {top: 47%;left: 18%;}
.infoBox > .neutr .pers4 {top: 27%;left: 16%;}
.infoBox > .neutr .pers5 {top: 12%;left: 50%;}
.infoBox > .neutr .pers6 {top: 4%;left: 13%;}

.infoBox > .oppos .pers1 {top: 14%;left: 2%;}
.infoBox > .oppos .pers2 {top: 51%;left: 18%;}
.infoBox > .oppos .pers3 {top: 32%;left: 48%;}
.infoBox > .oppos .pers4 {top: 1%;left: 28%;}
.infoBox > .oppos .pers5 {top: 55%;left: 49%;}
.infoBox > .oppos .pers6 {top: 43%;left: 77%;}
.infoBox > .oppos .pers7 {top: 15%;left: 57%;}
.infoBox > .oppos .pers8 {top: 2%;left: 11%;}
.infoBox > .oppos .pers9 { top: 70%;left: 2%;}
.infoBox > .oppos .pers10 {top: 0%;left: 70%;}
.infoBox > .oppos .pers11 {top: 18%;left: 34%;}
.infoBox > .oppos .pers12 {top: 39%;left: 2%;}
.infoBox > .oppos .pers13 {top: 60%;left: 72%;}
.infoBox > .oppos .pers14 {top: 77%;left: 76%;}
.infoBox > .oppos .pers15 {top: 17%;left: 82%;}
.infoBox > .oppos .pers16 {top: 71%;left: 38%;}
.infoBox > .oppos .pers17 {top: 84%;left: 53%;}
.infoBox > .oppos .pers18 {top: 34%;left: 24%;}
.infoBox > .oppos .pers19 {top: 82%;left: 20%;}
.infoBox > .oppos .pers20 {top: 72%;left: 61%;}
.infoBox > .oppos .pers21 {top: 29%;left: 77%;}
.infoBox > .oppos .pers22 {top: 57%;left: 2%;}
.infoBox > .oppos .pers23 {top: 3%;left: 52%;}

.infoBox li{transition:all ease 1s;}