body {
	margin: 5px;
	padding: 0;
}

h1, h2, h3, p {
	margin: 0;
}
a {
	text-decoration: none;
	outline: 0;
}

h1 {
	color: #213B8F;
	font-family: "Noto Serif", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
}

h3 {
	color: #213B8F;
	font-family: "Noto Serif", sans-serif;
	font-size: 22px;
	font-weight: bold;
	line-height: 30px;
}

p {
	color: #585858;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	line-height: 16px;
}

iframe {
	width: 100%;
	margin-bottom: 25px;
}

header {
	width: 100%;
	height: 60px;
	position: fixed;
	background-color: #fff;
	box-shadow: 0px 0px 10px #888888;
	z-index: 100;
}
header .content {
	position: relative;
}
header .logo a {
	height: 40px;
	position: absolute;
	top: 10px;
	left: 10px;
}
header .share {
	position: absolute;
	right: 10px;
	top: 15px;
}
header .share li {
	display: inline-block;
}
header .share li a {
	width: 30px;
	height: 30px;
	display: block;
	margin-left: 10px;
	background-size: auto;
	background-repeat: no-repeat;
}

.share li a.facebook {
	background-image: url(../img/ui/share_facebook.svg);
}
.share li a.facebook {
	background-image: url(../img/ui/share_facebook.svg);
}
.share li a.twitter {
	background-image: url(../img/ui/share_twitter.svg);
}
.share li a.whatsapp {
	background-image: url(../img/ui/share_whatsapp.svg);
}

#header {
	height: 60px;
	width: 100%;
	background-color: #FFFFFF;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
	-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
	position: fixed;
}

.wrapper {
	padding: 70px 0;
	max-width: 1070px;
	width: 100%;
	margin: auto;
}

#main-section {
	float: left;
	width: 730px;
	margin-right: 10px;
	margin-top: 30px;
}

#rigth-column {
	float: left;
	margin-left: 10px;
	margin-top: 30px;
	width: 310px;
}

#rigth-column > section {
	margin-bottom: 30px;
}

#rigth-column > section:last-child {
	margin-bottom: 0;
}

#news, #newsLT, #newsEF {
	margin: 30px 0;
}

.more-btn {
	color: #213B8F;
	border: 1px solid #213B8F;
	border-radius: 5px;
	padding: 10px 30px;
	box-sizing: border-box;
	float: right;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	margin-top: 12px;
}

#candidatos, #segunda-ronda {
	box-shadow: 2px 2px 4px 2px rgba(157,157,157,0.5);
	height: auto;
	max-width: 1068px;
}

#candidatos {
	background-image: url('../img/cintillo.svg');
	background-repeat: no-repeat;
	background-position: top right;
}

#resultados {
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
	height: auto;
	max-width: 730px;
}

#segunda-ronda {
	height: auto;
	max-width: 1068px;
	background-color: #FFFFFF;
}

#segunda-ronda h1 {
	text-align: center;
}

.content {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 0;
}

.headers {
	float: left;
	height: 100%;
	padding: 0 30px;
	box-sizing: border-box;
	width: 370px;
}

.headers .en-vivo {
	display: block;
	margin-bottom: 20px;
}

.headers .logo {
	display: block;
	margin-bottom: 5px;
}

.headers .asamblea, .headers .partidos, .headers .votos-provincia, #votosxpartido .btn-asamblea {
	background-image: url('../img/asamblea.svg');
	background-repeat: no-repeat;
	background-position: 10px center;
	border: 1px solid #213B8F;
	border-radius: 5px;
	box-sizing: border-box;
	color: #213B8F;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size: 11px;
	line-height: 14px;
	padding: 5px 10px 5px 45px;
	width: 165px;
}

#votosxpartido .btn-asamblea {
	margin: auto auto 10px;
	display: block;
}

.headers .partidos {
	background-image: url('../img/bandera.svg');
	width: 131px;
	margin-left: 8px;
}

.headers .votos-provincia {
	background-image: url('../img/mapa_boton.svg');
}

#resultados .headers {
	margin: 0 66px 0 30px;
	width: 313px;
	padding: 0;
}

.candidatos {
	float: left;
	height: 100%;
	box-sizing: border-box;
}

.candidatos .candidato {
	float: left;
	width: 130px;
	text-align: center;
	margin: 0 15px;
}

.candidatos .candidato:first-child {
	margin-left: 0;
}
.candidatos .candidato:last-child {
	margin-right: 0;
}

.candidatos h1 {
	color: #213B8F;
	font-family: "Noto Serif", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}

.candidatos .candidato h2 {
	color: #585858;
	font-family: "Noto Serif";
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
}

.candidatos .candidato img {
	margin-top: 8px;
}

.candidatos .candidato .porcentaje {
	color: #9B9B9B;
	font-family: "Noto Serif";
	font-size: 42px;
	font-weight: bold;
	line-height: 46px;
}

.candidatos .candidato .votos {
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 16px;
}

.footer-info-mob {
	display: none;
}

.footer-info, .footer-info-mob {
	background-color: #F0F0F0;
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 14px;
	width: 100%;
	box-sizing: border-box;
	padding: 4px 5px;
	text-align: right;
	box-sizing: border-box;
}

.footer-info b, .footer-info-mob b {
	font-weight: 700;
}

.clearfix:after {
	display: table;
	content: "";
	clear: both;
}
.mapas {
	float: left;
	text-align: center;
	position: relative;
	width: 310px;
	height: 345px;
}

.controls {
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 14px;
	height: 33px;
	box-sizing: border-box;
	padding: 0 35px;
}
.controls p {
	float: left;
	padding: 10px;
}

.controls .btn-visualizacion {
	float: left;
	border: 1px solid #D8D8D8;
	width: 63px;
	height: 100%;
	cursor: pointer;
}

.controls .geografico {
	background-image: url('../img/mapa_geografico.svg');
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	width: 31px;
	border-right: 1px solid #D8D8D8;
	float: left;
}

.controls .densidad {
	background-image: url('../img/mapa_densidad.svg');
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	width: 31px;
	float: left;
}

.controls .geografico:hover, .controls .densidad:hover, .controls .geografico.select, .controls .densidad.select {
	background-color: #D8D8D8;
}

.mapa {
	position: relative;
	height: 310px;
}

#votosCantones, #cartografico {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.mapa-options {
	color: #585858;
	width: 125px;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	line-height: 14px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 250px;
	z-index: 50;
}

.mapa-options p {
	margin-bottom: 5px;
}

#partidoDominante {
	color: #585858;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	line-height: 14px;
	text-align: left;
	position: absolute;
	bottom: 5px;
	left: 15px;
}

#partidoDominante .actual {
	border: 1px solid #D8D8D8;
	box-sizing: border-box;
	padding: 4px;
	margin-left: 5px;
	min-width: 46px;
	min-height: 20px;
	display: inline-block;
}

#partidoDominante .actual .dot {
	border-radius: 5px;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 7px;
}

#votosxpartido {
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
	height: auto;
	width: 100%;
	box-sizing: border-box;
}

#votosxpartido .content {
	height: auto;
	width: 300px;
	margin: auto;
	box-sizing: border-box;
	padding: 0;
}

#votosxpartido .content .headers {
	padding: 0 30px;
	float: none;
	display: block;
	width: 100%;
}

.headers h1 {
	color: #213B8F;
	font-family: "Noto Serif";
	font-size: 24px;
	font-weight: bold;
	line-height: 20px;
	margin-bottom: 5px;
}

.headers h2 {
	color: #213B8F;
	font-family: "Noto Serif";
	font-size: 18px;
	line-height: 20px;
	margin-bottom: 26px;
}

.headers p {
	color: #585858;
	font-family: "Roboto";
	font-size: 14px;
	line-height: 16px;
	margin-bottom: 10px;
}

#resultados .headers p {
	margin-bottom: 24px;
}

#paleta {
	padding: 0 20px;
	margin-top: 15px;
}

#votosxpartido.content {
	padding: 19px 0 0;
}

#votosxpartido .partido {
	float: left;
	width: 65px;
	margin-bottom: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #B3B3B3;
}

#votosxpartido .partido .dot {
	background-color: #585858;
	width: 18px;
	height: 18px;
	border-radius: 10px;
	float: left;
	margin-right: 5px;
}

#votosxpartido .footer-info {
	background-color: #F0F0F0;
	padding: 15px 40px;
	height: auto;
	text-align: left;
	margin-top: 10px;
}

#votosxpartido .headers .en-vivo {
	margin-bottom: 12px;
}

#votosxpartido .headers h2 {
	margin-bottom: 16px;
}

.footer-copy {
	background-image: url('../img/logo.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 150px auto;
	border-top: 1px solid #B8C5F2;
	height: 46px;
	width: 100%;
}

#update {
	background-color: #F0F0F0;
	width: 100%;
	padding: 13px 14px;
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 14px;
	box-sizing: border-box;
}

#update p {
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 14px;
}

#votosxpartido .asamblea, #segunda-ronda .asamblea {
	text-align: center;
	position: relative;
	margin-top: 20px;
}

#segunda-ronda .asamblea {
	margin-top: 0;
	float: left;
}

#segunda-ronda .content-plenario {
	margin-top: 23px;
}

#diputado-partido {
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 14px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	margin: auto;
	width: 50px;
}

#votosxpartido .message, #segunda-ronda .message {
	background-image: url('../img/interactue.svg');
	background-repeat: no-repeat;
	background-position: center left;
	color: #585858;
	padding: 5px 5px 5px 25px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 16px;
	margin: 6px auto 30px;
	width: 160px;
}

#candidatos .mapa-asamblea {
	float: left;
	margin: 0 25px;
	text-align: center;
	position: relative;
}

.left-chain, .rigth-chain {
	float: left;
	width: 340px;
}

.left-chain {
	padding-right: 20px;
	border-right: 1px solid #DDDDDD;
}

.rigth-chain {
	padding-left: 20px;
}

.left-chain .nota:last-child, .rigth-chain .nota:last-child {
	border-bottom: 0;
}

.nota {
	padding-bottom: 18px;
	border-bottom: 1px solid #DDDDDD;
	margin-bottom: 17px;
}
.nota img {
	margin-bottom: 15px;
}

.nota h1 {
	color: #000000;
	font-family: "Noto Serif", sans-serif;
	font-size: 22px;
	font-weight: bold;
	line-height: 30px;
	margin-bottom: 15px;
}

.nota .author {
	color: #4A4A4A;
	margin-bottom: 18px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
}

.nota .author span {
	font-weight: bold;
}

.nota p {
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 18px;
}

.content-plenario {
	position: relative;
}

#header .ln-logo-ln, #header .ln-logo-lt, #header .ln-logo-ef {
	display: block;
	background-image: url('../svg/logo_sitios.svg');
	background-size: auto 100%;
	background-repeat: no-repeat;
	width: 58px;
	height: 42px;
	margin: 10px 0 0 10px;
	float: left;
}

#header .ln-logo-ln {
	background-position: 0 0;
	width: 56px;
}

#header .ln-logo-lt {
	background-position: -114px 0;
	margin-left: 2px;
}

#header .ln-logo-ef {
	background-position: -56px 0;
	margin-left: 2px;
}

#header .shares {
	float: right;
}

#enlaces {
	list-style-type: none;
	margin-right: 15px;
}

#enlaces li {
	float: left;
	margin-right: 10px;
}

#enlaces li:last-child {
	margin-right: 0;
}

#enlaces li a {
	display: block;
	height: 100%;
	width: 100%;
}

#header .shares .facebook {
	background-image: url('../svg/share_facebook.svg');
	background-repeat: no-repeat;
	background-size: 100%;
	height: 30px;
	width: 30px;
}

#header .shares .twitter {
	background-image: url('../svg/share_twitter.svg');
	background-repeat: no-repeat;
	background-size: 100%;
	height: 30px;
	width: 30px;
}

.separator {
	margin-top: 10px;
	border-bottom: 1px solid #DDDDDD;
	width: 100%;
	height: 1px;
}

#segunda-ronda .content {
	display: flex;
	height: 290px;
	padding: 0;
}

#segunda-ronda.presidente-electo .content {
	height: 310px;
}

#segunda-ronda .headers {
	padding: 20px 30px;
}
#segunda-ronda .headers h2 {
	color: #213B8F;
	font-family: "Noto Serif", sans-serif;
	font-size: 32px;
	font-weight: bold;
	line-height: 43px;
	margin-bottom: 10px;
}

#segunda-ronda .headers p {
	margin-bottom: 18px;
}

#segunda-ronda #votosxpartido .asamblea, #segunda-ronda .asamblea {
	text-align: left;
}
#segunda-ronda .content .candidatos {
	margin-left: 10px;
	padding: 20px 0;
}

#segunda-ronda .content .candidatos .candidato {
	width: auto;
	margin: 0 35px
}

#segunda-ronda .content .candidatos .candidato:first-child {
	margin-left: 0;
}

#segunda-ronda .content .candidatos .candidato:last-child {
	margin-right: 0;
}

.actualizado {
	float: left;
	border-left: 1px solid #DDDDDD;
	height: 100%;
	width: calc(100% - 790px);
	margin-left: 45px;
	color: #585858;
	font-family: Roboto;
	font-size: 12px;
	font-weight: 400;
	line-height: 25px;
	padding: 80px 15px;
	box-sizing: border-box;
}

.actualizado b {
	font-weight: bold;
}

.presidente {
	width: 405px;
	position: relative;
	margin-left: 0 !important;
}

#segunda-ronda .presidente.actualizado {
	margin-left: 25px;
	padding: 80px 15px 80px 40px;
	width: calc(100% - 775px);
}

.presidente .candidato {
	position: absolute;
	width: 150px;
	left: 0;
	right: 0;
	margin: auto;
	float: none;
}

.presidente .candidato .cr-flag-l, .presidente .candidato .cr-flag-r {
	margin: 0 20px 70px;
}

#landing {
	background-image: url('../img/cintillo.svg');
	background-repeat: no-repeat;
	background-position: top right;
	box-shadow: 2px 2px 4px 2px rgba(157,157,157,0.5);
	height: 193px;
	max-width: 1068px;
}

#landing h1 {
	margin-top: 2px;
	color: #213B8F;
	font-family: "Noto Serif";
	font-size: 32px;
	font-weight: bold;
	line-height: 32px;
	text-transform: uppercase;
}

#landing h3 {
	color: #213B8F;
	font-family: "Noto Serif";
	font-size: 24px;
	font-weight: bold;
	line-height: 33px;
	text-align: center;
}

#landing p {
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 19px;
	text-align: center;
	margin-top: 30px;
}

#landing p span {
	background-image: url('../svg/reloj.svg');
	background-repeat: no-repeat;
	background-position: 5px center;
	border: 1px solid #979797;
	border-radius: 8px;
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 19px;
	font-weight: 300;
	padding: 3px 8px 3px 28px;
	margin-left: 5px;
}

#landing .live {
	float: left;
	width: 400px;
	margin-top: 30px;
	margin-left: 140px;
}

#segmentBarChart {
	width: 727px;
	height: auto;
	padding: 0;
	box-shadow: 2px 2px 4px 2px rgba(157,157,157,0.5);
}

#segmentBarChart .content {
	padding: 16px 30px;
}

#segmentBarChart .headers {
	float: none;
	display: block;
	padding: 0;
	width: 100%;
}

#segmentBarChart .headers .form-provincia {
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 16px;
}

#segmentBarChart .headers .form-provincia select {
	margin: 0 5px;
	background-color: #FFFFFF;
	border: 1px solid #D8D8D8;
}

#segmentBarChart .content-chart {
	margin-top: 35px;
}

#segmentBarChart .chart-container {
	height: 110px;
	width: 314px;
	float: left;
}

#segmentBarChart .chart-container .item-percentage, #segmentBarChart .chart-container .item-title {
	bottom: -35px;
	left: 0;
	right: 0;
	margin: auto;
	width: 60px;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 21px;
	text-align: center;
}

#segmentBarChart .chart-container .item-title {
	bottom: -55px;
	font-size: 14px;
	line-height: 16px;
	font-weight: 300;
}

#segmentBarChart .simbologia {
	margin-left: 25px;
	padding: 8px 15px;
	border-left: 1px solid #B3B3B3;
	box-sizing: border-box;
	float: left;
}

#segmentBarChart .simbologia h1 {
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 21px;
}

#segmentBarChart .simbologia ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#segmentBarChart .simbologia ul li {
	display: block;
	margin-bottom: 10px;
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 16px;
	font-weight: 400;
}

#segmentBarChart .simbologia ul li:last-child {
	margin-bottom: 0;
}

#info {
	color: #585858;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 16px;
	visibility: hidden;
}

#info b {
	font-weight: 700;
}

/************************ Estilos para movil ************************************/

@media screen and (max-width: 1068px) {}
@media screen and (max-width: 1034px) {
	#candidatos, #segunda-ronda { background-image: none; }
	#candidatos .headers, #candidatos .candidatos { float: none; }
	#candidatos .candidatos { margin: 30px auto 0; max-width: 615px; }
}

@media screen and (max-width: 989px) {
	#segunda-ronda .content, #segunda-ronda.presidente-electo .content { display: block; height: auto; }
	#segunda-ronda .headers, #segunda-ronda .candidatos, #segunda-ronda .actualizado { float: none; width: 100%; }
	#segunda-ronda .actualizado { margin-left: 0; padding: 18px 15px 30px; border-top: 1px solid #DDDDDD; border-left: none; }
	#segunda-ronda .headers { margin-bottom: 0; }
	#segunda-ronda .content .candidatos { margin: auto auto 25px; padding-top: 8px; padding-bottom: 0; }
	#segunda-ronda .candidatos { width: 360px; }
	#segunda-ronda .presidente { width: 150px; margin-left: auto !important; }
	#segunda-ronda .presidente .candidato { position: relative; }
	#segunda-ronda .presidente.actualizado { width: 100%; margin-left: 0; padding: 30px 15px; }
	.presidente .candidato .cr-flag-l, .presidente .candidato .cr-flag-r { position: absolute; top: 0; bottom: 0; margin: auto; }
	.presidente .candidato .cr-flag-l { left: 0; }
	.presidente .candidato .cr-flag-r { right: 0; }
	#landing { height: auto; }
	#landing .live { margin-left: 70px; }
	#segunda-ronda .asamblea { float: none; height: 40px; }
}

@media screen and (max-width: 920px) {
	#landing { background-image: none; }
	#landing .content { padding: 16px; }
	#landing .headers { float: none; padding: 0; width: 100%; }
	#landing .live { float: none; margin: 30px auto auto; }
}

@media screen and (max-width: 729px) {
	#resultados { width: 100%; }
	#resultados .headers, #resultados .mapas { float: none; width: 90%; margin: auto; padding: 0; }
	#resultados .mapas { width: 310px; margin: 30px auto 0; }
	.footer-info { text-align: left; line-height: 20px; }
	#candidatos .footer-info { text-align: left; line-height: 20px; }
	#main-section { width: 100%; }
	.left-chain, .rigth-chain { width: auto; margin: auto; border: none; padding: 0 25px; }
	.separator { width: auto; margin: 10px 25px 0; }
	.logonws { margin: auto 25px; }
	.nota { width: 100%; }
	.nota img { width: 100%; }
	#rigth-column { width: 100%; margin-left: 0;  }

	#segmentBarChart { width: 100%;  }
}

@media screen and (max-width: 650px) {
	#candidatos .candidatos { max-width: 310px; }
	#candidatos .candidatos .candidato { margin-right: 0; margin-left: 0; margin-bottom: 35px; }
	#candidatos .candidatos .candidato:nth-child(2n) { margin-left: 20px; }
	#candidatos .headers { width: 100%; }
	#candidatos .footer-info { display: none; }
	#candidatos .footer-info-mob { display: block; text-align: left; line-height: 20px; }

	#segmentBarChart .chart-container, #segmentBarChart .simbologia { width: 100%; float: none; }
	#segmentBarChart .simbologia { margin-left: 0; margin-top: 10px; }
}

@media screen and (max-width: 400px) {
	#segunda-ronda .asamblea { float: none; height: 40px; }
	.headers .partidos { width: 165px; padding-right: 20px; height: 40px; }
}

@media screen and (max-width: 400px) {
	#segunda-ronda .candidatos { width: 290px; }
	#segunda-ronda .presidente { width: 150px; }
	#segunda-ronda .headers h2 { font-size: 29px; }
	#segunda-ronda .content .candidatos .candidato { margin: 10px; }
	.candidatos .candidato .porcentaje { font-size: 38px; }
	#landing .live { width: 100%;}
}

@media screen and (max-width: 380px) {
	#candidatos .logo, #segunda-ronda .logo { width: 100%; height: auto; }
	.headers .asamblea, .headers .partidos, .headers .votos-provincia { display: block; margin-bottom: 10px; }
	.headers .partidos { margin-left: 0px; margin-bottom: 0; }
}