/***********************************************************************************/
 /***************** arcos ***********************************************************/
 .arcos .graphBox {width: 100%;padding-top: 40%;float: left;position: relative;overflow: hidden;}
 .arcos .cell > .cell {width:50%;float: left;}

 /* 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-camara .semGraph ul > li:last-child:after {content:"2016";position:absolute;bottom: 50%;left: 14%;color: #494847;z-index: 1;font-size: 1.2rem;}
	#chart-camara .semGraph > div + div ul > li:last-child:after {content:"2014";}

	/* 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:#9FAF3C;}
		.semGraph ul .sin .dataQ:before {background:#ddd;}

		.semGraph ol .data1 div strong {color:#5575A4;}
		.semGraph ol .data2 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 {right: 0;}
		.semGraph li[class*="data"] strong em{display:none;}

.semGraph ol li.data3 {display: none;}

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


@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 {width:100%;}
	.arcos .cell > .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;}			
}