/*Estilos para los tamaños de los textos.*/

/*  Fuentes a 8 px*/

.texto8pxLight {
  font-size: 8px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto8pxRegular {
  font-size: 8px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto8pxMedium {
  font-size: 8px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto8pxBold {
  font-size: 8px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*  Fuentes a 9 px*/

.texto9pxLight {
  font-size: 9px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto9pxRegular {
  font-size: 9px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto9pxMedium {
  font-size: 9px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto9pxBold {
  font-size: 9px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*  Fuentes a 10 px*/

.texto10pxLight {
  font-size: 10px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto10pxRegular {
  font-size: 10px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto10pxMedium {
  font-size: 10px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto10pxBold {
  font-size: 10px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*  Fuentes a 11 px*/

.texto11pxLight {
  font-size: 11px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto11pxRegular {
  font-size: 11px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto11pxMedium {
  font-size: 11px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto11pxBold {
  font-size: 11px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*  Fuentes a 12 px*/

.texto12pxLight {
  font-size: 12px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto12pxRegular {
  font-size: 12px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto12pxMedium {
  font-size: 12px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto12pxBold {
  font-size: 12px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*  Fuentes a 13 px*/

.texto13pxLight {
  font-size: 13px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto13pxRegular {
  font-size: 13px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto13pxMedium {
  font-size: 13px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto13pxBold {
  font-size: 13px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 14 px*/

.texto14pxLight {
  font-size: 14px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto14pxRegular {
  font-size: 14px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto14pxMedium {
  font-size: 14px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto14pxBold {
  font-size: 14px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 15 px*/

.texto15pxLight {
  font-size: 15px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto15pxRegular {
  font-size: 15px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto15pxMedium {
  font-size: 15px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto15pxBold {
  font-size: 15px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 16 px*/

.texto16pxLight {
  font-size: 16px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto16pxRegular {
  font-size: 16px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto16pxMedium {
  font-size: 16px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto16pxBold {
  font-size: 16px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*fuentes a 17 pixeles*/

.texto17pxLight {
  font-size: 17px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto17pxRegular {
  font-size: 17px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto17pxMedium {
  font-size: 17px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

/*Fuentes a 18 px*/

.texto18pxLight {
  font-size: 18px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto18pxRegular {
  font-size: 18px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto18pxMedium {
  font-size: 18px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto18pxBold {
  font-size: 18px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 19 px*/

.texto19pxLight {
  font-size: 19px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto19pxRegular {
  font-size: 19px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto19pxMedium {
  font-size: 19px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto19pxBold {
  font-size: 19px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 20 pixeles*/

.texto20pxLight {
  font-size: 20px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto20pxRegular {
  font-size: 20px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto20pxMedium {
  font-size: 20px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto20pxBold {
  font-size: 20px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 21 pixeles*/

.texto21pxLight {
  font-size: 21px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto21pxRegular {
  font-size: 21px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto21pxMedium {
  font-size: 21px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto21pxBold {
  font-size: 21px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 22 pixeles*/

.texto22pxLight {
  font-size: 22px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto22pxRegular {
  font-size: 22px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto22pxMedium {
  font-size: 22px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto22pxBold {
  font-size: 22px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 23 pixeles*/

.texto23pxLight {
  font-size: 23px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto23pxRegular {
  font-size: 23px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto23pxMedium {
  font-size: 23px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto23pxBold {
  font-size: 23px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 24 px*/

.texto24pxLight {
  font-size: 24px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto24pxRegular {
  font-size: 24px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto24pxMedium {
  font-size: 24px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto24pxBold {
  font-size: 24px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 25 px*/

.texto25pxLight {
  font-size: 25px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto25pxRegular {
  font-size: 25px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto25pxMedium {
  font-size: 25px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto25pxBold {
  font-size: 25px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 25 px*/

.texto26pxLight {
  font-size: 26px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto26pxRegular {
  font-size: 26px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto26pxMedium {
  font-size: 26px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto26pxBold {
  font-size: 26px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 27 px*/

.texto27pxLight {
  font-size: 27px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto27pxRegular {
  font-size: 27px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto27pxMedium {
  font-size: 27px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto27pxBold {
  font-size: 27px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 28 px*/

.texto28pxLight {
  font-size: 28px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto28pxRegular {
  font-size: 28px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto28pxMedium {
  font-size: 28px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto28pxBold {
  font-size: 28px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 30 px*/

.texto30pxLight {
  font-size: 30px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300;
}

.texto30pxRegular {
  font-size: 30px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400;
}

.texto30pxMedium {
  font-size: 30px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}

.texto30pxBold {
  font-size: 30px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/*Fuentes a 30 px*/

.texto48pxMedium {
  font-size: 48px;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500;
}
/*Fuente de color rosa claro*/

.textoColorRosa {
  color: #D5007f;
}

/*Fuente de color rosa fuerte*/

.textoColorRosaFuerte {
  color: #950054;
}

/*Fuente de color morado*/

.textoColorMorado {
  color: #7f4583;
}

/*Fuente de color blanco*/

.textoColorBlanco {
  color: white;
}

/*Fuente de color verde*/

.textoColorVerde {
  color: #585756;
}

.textoColorGrisClaro {
  color: #6F6F6F;
}


.pink-border-right {
	border-right: 2px solid #ea348c
}

.grey-border {
	position: relative;
	border-right: 1px solid;
	display: inline-block;
	height: 24px;
	left: 2px;
	bottom: -4px
}

.fix-gobernatura {
	margin: 30px 0 0!important
}


.ficha {
	height: 150px;
	margin: 10px 0;
	box-shadow: 1px 1px 2px 0 #c5c5c5;
	position: relative;
	cursor: pointer;
	background-color: #FFF
}

.ficha .ficha-hover {
	background-color: #F5F5F5;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity .5s linear
}

.ficha .ficha-hover .equal {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 15px;
	height: 37px;
	font-size: 25px
}

.ficha .ficha-hover .lft-hover,
.ficha .ficha-hover .rght-hover {
	display: inline-block;
	height: 100%;
	width: 49%;
	vertical-align: top
}

.ficha .ficha-hover .lft-hover {
	font-size: 14px
}

.ficha .ficha-hover .lft-hover .img-cont {
	color: #838185;
	text-align: center
}

.ficha .ficha-hover .lft-hover .img-cont img {
	height: 30px;
	max-width: 90px
}

.ficha .ficha-hover .lft-hover .plus-sign {
	text-align: center;
	margin: 0;
	top: -12px;
	color: #000
}

.ficha .ficha-hover .rght-hover {
	padding-left: 20px;
	padding-top: 30px
}

.ficha .ficha-hover .rght-hover p {
	font-size: 12px
}

.ficha .ficha-hover .rght-hover p span {
	font-size: 16px;
	color: #838185
}

.ficha:hover .ficha-hover {
	visibility: visible;
	opacity: 1;
	overflow: scroll;
	padding: 5px
}

.ficha .lft,
.ficha .rght {
	display: inline-block;
	height: 150px
}

.ficha .lft {
	width: 100px;
	padding-top: 34px
}

.ficha .lft .image_container {
	margin: 0 auto;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 74px;
	height: 74px
}

.ficha .rght {
	width: calc(100% - 107px);
	vertical-align: top
}

.ficha .rght .nombres {
	font-size: 16px;
	font-weight: lighter;
	margin-top: 7px;
	line-height: 1.1
}

.ficha .rght .imagenes img {
	height: 30px;
}

.ficha .rght .porcentaje {
	margin: 15px 0 0;
	font-size: 24px;
	font-weight: lighter
}

.ficha .rght .porcentaje.win {
	font-family: RobotoBold;
	color: #EB368C
}


.gray-text {
	color: #706f6f
}

.mid-purple-text {
	color: #7F4582
}

.purple-text {
	color: #766ab0!important
}

.black-text {
	color: #000
}

.pink-text {
	color: #ee3990
}

table img {
	width: auto
}

.strong-text {
	font-weight: 700!important;
	font-family: RobotoBold
}

@-moz-document url-prefix() {
	.strong-text,
	b,
	strong {
		font-family: Roboto
	}
}
@media (min-width:768px) and (max-width:1199px) {
	.ficha .lft {
		width: 70px
	}
	.ficha .lft .image_container {
		width: 64px;
		height: 64px
	}
	.ficha .rght {
		width: calc(100% - 78px)
	}
	.ficha .rght .nombres {
		font-size: 15px
	}
	.ficha .rght .imagenes img {
		height: 25px
	}
	.ficha .rght .porcentaje {
		font-size: 22px
	}
}

.mobile-fichas .ficha-row .rght-row,
.mobile-fichas.winner .ficha-row .center-row,
.total-container .first,
.total-container .second div span,
.total-container .third p span {
	font-family: RobotoMedium
}


.mobile-fichas {
	background-color: #F6F6F6;
	padding-left:0;
	padding-right:0;
	
}

.mobile-fichas .ficha-row {
	width: 100%;
	padding: 8px 0;
	display: inline-flex
}

.mobile-fichas .ficha-row .lft-row {
	width: 80px;
	padding: 5px;
	display: inline-block;
	height: 45px
}

.mobile-fichas .ficha-row .lft-row .image_container {
	margin: 0 auto;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 35px;
	height: 35px
}

.mobile-fichas .ficha-row .center-row {
	flex: 1;
	display: inline-block;
	height: 45px;
	vertical-align: top;
	padding-top: 5px;
	font-size: 13px
}

.mobile-fichas .ficha-row .center-row p {
	margin-bottom: 3px
}

.mobile-fichas .ficha-row .center-row .pgrs-container {
	width: 100%;
	background-color: #C6C6C5;
	height: 10px;
	border-radius: 10px
}

.mobile-fichas .ficha-row .center-row .pgrs-container .pgrs-item {
	background-color: #766BB2;
	height: 10px;
	border-radius: 10px
}

.mobile-fichas .ficha-row .rght-row {
	display: inline-block;
	width: 70px;
	padding-left: 10px;
	height: 45px;
	vertical-align: top;
	font-size: 14px;
	color: #808180;
	position: relative;
	padding-top: 23px
}

.mobile-fichas.winner {
	box-shadow: 10px 0 3px 3px #ccc;
	z-index: 10
}

.mobile-fichas.winner .ficha-row .pgrs-container .pgrs-item {
	background-color: #EF5AA1
}

.mobile-fichas.winner .ficha-row .rght-row {
	color: #EF5AA1;
	font-size: 16px
}

.mobile-fichas:nth-child(odd) {
	background-color: #fff
}

.small-text-fichas p {
	text-align: left;
	font-size: 13px
}

.small-text-fichas p span {
	font-size: 11px
}



.separator-line {
	border-bottom: 2px solid #D50480;
	width: 100%;
	margin-top: 10px
}

.separator-line.mobile {
	border-bottom: 1px solid;
	border-color: #766BB2
}

.separator.s-10 {
	margin-bottom: 10px
}

.separator.s-20 {
	margin-bottom: 20px
}

.separator.s-30 {
	margin-bottom: 30px
}

.separator.s-40 {
	margin-bottom: 40px
}

.separator.s-50 {
	margin-bottom: 50px
}

.separator.s-60 {
	margin-bottom: 60px
}
.table-separator,
table img {
	height: 30px
}

.header-resumen-movil {
	padding: 8px 0;
	font-size: 16px;
	text-align: center;
	font-family: RobotoBold;
	display: inline-flex;
	width: 100%;
	margin-bottom:-20px;
}

.btn-detalle-container .btn-detalle {
	border-radius: 5px;
	background-color: #766BB2;
	color: #fff;
	font-size: 12px;
	padding: 3px 5px
}

.consulta-results-row,
.header-resumen-movil,
.table-grafica-movil tbody tr.winner {
	background-color: #fdf4f6
}


.table-grafica-movil tbody tr.winner .pnk {
	color: #ea348c
}

.table-grafica-movil tbody tr td p {
	margin: 0
}

.table-grafica-movil tbody tr td:nth-child(1) {
	text-align: left;
	font-weight: 600
}

.table-grafica-movil .container-gubernatura {
	font-size: 10px;
	color: #808180;
	display: inline-block;
	width: 100%
}

.table-grafica-movil .container-gubernatura p {
	flex: 1;
	display: inline-block;
	margin: 0 4px
}


.grafica-movil {
	width: 80px;
	height: 10px;
	background-color: #d6d9db;
	border-radius: 25px;
	display: block
}

.grafica-movil .porcentaje-movil {
	background-color: #ea348c;
	display: block;
	height: 100%;
	border-radius: 25px
}

.mobile-participacion-title {
	color: #582d5b;
	font-size: 16px
}

.showImportant{
	display:block;
}

.hideImportant{
	display:none;
}

@media (max-width:767px) {
	.showImportant{
		display:block !important;
	}

	.hideImportant{
		display:none !important;
	}
}