/***********************************************************************************/
 /***************** arcos ***********************************************************/
.arcos .graphBox {width: 100%;padding-top: 40%;float: left;position: relative;overflow: hidden;}
.arcos.infoBox {font-size:0;}
.arcos .cell .infoBox > .cell,  .arcos.infoBox > .cell {width:50%;float: none;vertical-align:bottom;position:relative;}
.arcos .cell > .maintitle {font-size: 2.6rem;line-height: 1.2;font-weight: 400;color: #37363c;font-family: 'Roboto Slab';width: 100%;padding: 2rem 0 3rem 0;display:block;text-align: center;}
/** notis **/
.article .summary .infoBox li {border: 0;padding: 0;text-indent: unset;}
.article .summary .infoBox li:before {content: none;}

/* CSS Graficos circulares */
.semGraph {position:absolute;width: 80%;padding-top: 80%;display:inline-block;top:0;left: 10%;}
.semGraph ul, .semGraph [class*="hol"]:after {border-radius:100%;}
.semGraph ul, .semGraph [class*="hol"]:after, .semGraph > div {/* overflow:hidden; */}
.semGraph > *, .semGraph ul li > div,.semGraph .backQ, .semGraph ol li, .semGraph ol div > *, .semGraph .dataQ:before, .semGraph .dataQ, .semGraph ol div .ico {position:absolute;}
.semGraph ul, .semGraph ul li > div, .semGraph ol div .ico, .semGraph .dataQ:before, .semGraph > div {top:0;left:0;width:100%;height:100%;}
.semGraph ul, .semGraph ol, .semGraph ul li > div,.semGraph .backQ {height:100%;}
.semGraph > div + div {width: 30%;height: 30%;top: 35.22222%;left: 35.222%;}
.semGraph ul, .semGraph.cuadrante1 ul {transform: scale(1,1)translate(0%,0%);border-radius: 100%;/* overflow: hidden; */}

.semGraph ol {position: absolute;top: 28%;left: 18%;width: 64%;}
#chart-camara .semGraph ol {left: 5%;width: 90%;}
.semGraph ol li {text-align: center;width: 50%;display: block;}
.semGraph ol div span, .semGraph ol div strong {line-height: 1.22222222;font-family: 'Roboto',arial,sans-serif;font-weight: 400;font-style: normal;color:#513D30;text-align: center;display: block;position: relative;}
.semGraph ol div span {font-size:1.4rem;}
.semGraph ol div strong {font-size: 3.5rem;font-weight: 300;}
.semGraph ol div .ico + span {position:relative;display: block;}

.semGraph .dataQ:before, .semGraph [class*="hol"]:after {content:"";}
.semGraph .backQ {width:50%;left:50%;overflow:hidden;}
.semGraph .dataQ {width:200%;height:100%;display:inline-block;left:-100%;overflow: hidden;border-radius: 100%;}
.semGraph .dataQ:before {width:50%;left:0;}

/* Linea intermedio */
.semGraph > div:after {content:"";position: absolute;top: 0;left:50%;width: 0;height: 100%;border: 1px dashed #545454;}

/* Fecha de cada arco */
#chart-senado .semGraph ul > li:last-child:after,
#chart-camara .semGraph ul > li:last-child:after {content:"2020";position:absolute;bottom: 50%;left: 14%;color: #4F4E4E;z-index: 1;font-size: 1.2rem;}
#chart-senado .semGraph > div + div ul > li:last-child:after,
#chart-camara .semGraph > div + div ul > li:last-child:after {content:"2018";}

/* Definicion de los tipos de donuts */
	.semGraph [class*="hol"]:after {position:absolute;top:50%;left:50%;background: #fff;}
	.hol_75:after {width:75%;height:75%;margin-top:-37.5%;margin-left:-37.5%;}
	.hol_50:after {width:50%;height:50%;margin-top:-25%;margin-left:-25%;}
	.hol_25:after {width:25%;height:25%;margin-top:-12.5%;margin-left:-12.5%;}

/* Definicion grafica de colores*/
	.semGraph ul .dem .dataQ:before {background:#5575A4;}
	.semGraph ul .rep .dataQ:before {background:#C3283E;}
	.semGraph ul .dem_ac .dataQ:before  {background:#97b6dd;}
	.semGraph ul .rep_ac .dataQ:before {background:#d37e87;}
	.semGraph ul .ind .dataQ:before {background:#4F4E4E;}
	.semGraph ul .sin .dataQ:before {background:#d2d0d0;}
	.semGraph ul .vac .dataQ:before {background:#9FAF3C;}

	.semGraph ol .dem div strong {color:#5575A4;}
	.semGraph ol .rep div strong {color:#C3283E;}

/* Definicion del tamano de los quesitos */
	.semGraph ol li.ind {clip:rect(0,0,0,0);position:absolute;top:0;left:0;overflow:hidden;display:block;}

/* Posicionamiento de la informacion */
	.semGraph .data1 {left: 0;}
	.semGraph .data2:not(.sin):not(.ind),
	.semGraph .data3:not(.sin):not(.ind) {right: 0;}
	.semGraph li[class*="data"] strong em{display:none;}

.semGraph ol li.data3:not(.rep):not(.dem),
.semGraph ol li.data2:not(.rep):not(.dem) {display: none;}

.arcos .graphBox {padding-bottom:2rem;}
.arcos .graphBox + span.renovados {font-size: 1.4rem;display: block;line-height: 2rem;padding-left: 10%;padding: 0 0 0 10%;position: absolute;bottom: 0;}

.p_final .artBody .semGraph {width: 98%;padding-top: 98%;left: 1%;}
.p_final .artBody .arcos .graphBox + span.renovados {padding-left:1%}
.p_final .artBody #chart-senado .semGraph ol {left: 15%;width: 70%;}
.p_final .artBody #chart-camara .semGraph ol {left: 8%;width: 84%;}


@media (max-width:1399px) {
	.semGraph ol div span {font-size:1.2rem;}
	.semGraph ol div strong {font-size: 2.5rem;font-weight: 400;}
  .arcos .cell > .maintitle {font-size:2.2rem}
}


@media (max-width:1099px) {
	.semGraph ol div span {font-size:1.1rem;}
	/* .semGraph ol div strong {font-size: 3rem;} */

	.semGraph {width:90%;padding-top:90%;left:5%; }
	.arcos .graphBox {padding-top: 45%;}
}
@media (max-width:699px) {
	.arcos .cell > .cell,  .arcos .cell .infoBox > .cell,  .arcos.infoBox > .cell {width:100%;float: left;}
	.arcos .cell > .cell + .cell, .arcos.infoBox > .cell + .cell {padding-top: 4rem;}
	.semGraph ol div span {font-size:1.4rem;}
	.semGraph ol div strong {font-size: 4rem;}
	.arcos .cell {padding:0; }
	.semGraph {width:100%;padding-top:100%;left:0; }
	.arcos .graphBox {padding-top: 50%;}
}

@media (max-width:499px) {
	.semGraph ol div span {font-size:1.2rem;}
	.semGraph ol div strong {font-size:3rem;}
}