@charset "utf-8";
/*** GRAFICO VOTOS ********************/
/*****************************************************/

.graphBox.layerBox:before {width:0;height:75%;content:'';border-right:0.2rem dotted #fff;z-index:2;position:absolute;top:5%;left: 50%;}
.dataLabel {position:absolute;z-index:6;line-height:2.5rem;width:10rem;font-size:2rem;font-weight:300;text-align:center;}
.Q_01 .dataLabel {font-size:1.4rem;}
.Q_01 + .dataLabel {width: 10rem;left: 50%;margin-left: -5rem;top:31%;}
.Q_02 + .dataLabel {width:12rem;left:50%;margin-left:-6rem; }
.Q_01 + .dataLabel::after {content:' 315 ESCAÑOS ';display:block;font-size:1.4rem;line-height:1;letter-spacing: -0.25pt;}
.Q_02 + .dataLabel::after {content:' 630 ESCAÑOS ';display:block;font-size:1.4rem;line-height:1;letter-spacing: -0.25pt;}

/* leyenda */
.graphBox + .legendBox {padding:1rem 2rem;width:200%;display:inline-block;}
.graphBox + .legendBox p,.graphBox + .legendBox li {line-height:1.6rem;font-size:1.4rem;}
.graphBox + .legendBox p {width:100%;border-top:0.1rem solid #939495;text-align:right;padding:0.8rem 0;}
.graphBox + .legendBox .legend {padding:2rem 0;width:100%;text-align:center;}
.graphBox + .legendBox li {display:inline-block;padding:0 0.8rem;font-weight:400;}
.graphBox + .legendBox li .backQ {width:1.6rem;height:1.6rem;display:inline-block;float:left;margin-right:0.8rem;}

/*asomando los datos sobre el grafico*/
.cheesGraph [class*="Qdata"] .labelBox .ico > strong {display:inline-block;font-size:1.4rem;font-weight:700;line-height:2rem;width:6rem;text-align:center;color:#fff;position:absolute;}
.cheesGraph [class*="Qdata"] .movimiento .ico > strong {color:#000;}
.cheesGraph [class*="Qdata"] .labelBox {border:0.4rem solid transparent;}

/* clases partido */
.centro-izq .backQ {background:#c02e26;}
.centro-der .backQ {background:#125973;}
.movimiento .backQ {background:#e5be31;}
.libres-iguales .backQ {background:#731518;}
.otros .backQ {background:#7c7a7a;}

.cheesGraph.archType [class*="Q"] {border: 0;}
.cheesGraph .Qdata_02 .labelBox .ico > strong {position: absolute;left: -4rem;top: -2rem;}
.cheesGraph .Qdata_01 .labelBox .ico > strong {opacity:0;position: absolute;left: -3.5rem;top: -1.5rem;}
.cheesGraph .Qdata_01 .labelBox .ico > strong:hover {opacity:1;}

/*home elecciones*/
.eleccionesItaliaBox .cell {border-width:0 4rem;}
.cheesGraph.archType.item_02 {width: 80%;left: 10%;margin-top:4%;padding-top: 40%;}
.cheesGraph.archType.item_02 .donutType.w40 > ul:after {width:55%;height:55%;margin:-27.5%;}
.cheesGraph.archType.item_01 {width:40%;left: 30%;margin-top:-20%;padding-top:20%;}
.cheesGraph.archType.item_01 .donutType.w30 > ul:after {width:60%;height:60%;margin:-30%;}
.eleccionesItaliaBox .Q_01 + .dataLabel {top:30%;}
.cheesGraph.archType .Q_02 + .dataLabel {top:0;margin-top:-5rem;}


/* .eleccionesItaliaBox .graphBox.layerBox:before {left:40%;} */
.eleccionesItaliaBox .graphBox + .legendBox {display: none;}

/*** GRAFICO VOTOS ********************/
/*** END *********************************************/

.cheesGraph.archType.item_02 {overflow:visible;}
.cheesGraph.archType.item_02 {margin-top:16%}
.graphBox.layerBox {overflow:hidden;}
.resultBox .secBox span {text-align:center;font-size:2.4rem;}

@media (max-width: 700px) {
.graphBox + .legendBox  li {padding-bottom:0.6rem;}
.graphBox.layerBox{padding-top:2rem;}
/* .graphBox.layerBox:before {height:50%; top:15%;} */
.graphBox + .legendBox {width:100%;}
.graphBox + .legendBox .legend {padding:0;text-align:left;}
.graphBox + .legendBox li {display:block; width:50%;float:left;}
.cheesGraph.archType .Q_02 + .dataLabel {margin-top:-3rem;}
.cheesGraph .Qdata_02 .labelBox .ico > strong {left: -3rem;}
}

@media (max-width: 1024px){
.graphBox.layerBox{padding-top:2rem;}
.Q_01 + .dataLabel {top:30%;}
.cheesGraph.archType .Q_02 + .dataLabel {margin-top:-4rem;}
.dataLabel {line-height:1.7rem;width:10rem;font-size:1.7rem;}
.cheesGraph.archType.item_02 {width: 90%;left: 5%;margin-top:8%;padding-top: 45%;}
.cheesGraph.archType.item_01 .donutType.w30 > ul:after {width:65%;height:65%;margin:-32.5%;}
}
