/*
  VARIABLES
*/

:root {
  --democratas: #00BFFF;
  --republicanos: #FF4141;
  --democratas5: rgba(0,191,255,0.5);
  --democratas50: rgba(0,191,255,0.5);
  --republicanos5: rgba(255,65,65,0.5);
  --republicanos50: rgba(255,65,65,0.5);
  --independientes: #FFB841;
}

@font-face { font-family: 'Benton Sans'; src: url('/fonts/v2.x/v2.0/benton/bentonsans-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal;font-display: swap;}
@font-face { font-family: 'Benton Sans'; src: url('/fonts/v2.x/v2.0/benton/bentonsans-regularitalic-webfont.woff') format('woff'); font-weight: normal; font-style: italic;font-display: swap;}
@font-face { font-family: 'Benton Sans'; src: url('/fonts/v2.x/v2.0/benton/bentonsans-light-webfont.woff') format('woff'); font-weight: 200; font-style: normal;font-display: swap;}
@font-face { font-family: 'Benton Sans'; src: url('/fonts/v2.x/v2.0/benton/bentonsans-book-webfont.woff') format('woff'); font-weight: 100; font-style: normal;font-display: swap;}
@font-face { font-family: 'Benton Sans'; src: url('/fonts/v2.x/v2.0/benton/bentonsans-medium-webfont.woff') format('woff'); font-weight: 500; font-style: normal;font-display: swap;}
@font-face { font-family: 'Benton Sans'; src: url('/fonts/v2.x/v2.0/benton/bentonsans-bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal;font-display: swap;}
@font-face { font-family: 'Benton Sans'; src: url('/fonts/v2.x/v2.0/benton/bentonsans-bolditalic-webfont.woff') format('woff'); font-weight: 700; font-style: italic;font-display: swap;}
@font-face { font-family: 'Benton Sans'; src: url('/fonts/v2.x/v2.0/benton/bentonsans-black-webfont.woff') format('woff'); font-weight: 900; font-style: normal;font-display: swap;}
@font-face { font-family: 'Majrit Headline'; src: url('/fonts/v2.x/v2.2/majrit/Majrit-Headline/Majrit-Headline-Light.woff2') format('woff2'); font-weight: 100; font-style: normal;}
@font-face { font-family: 'Majrit Headline'; src: url('/fonts/v2.x/v2.2/majrit/Majrit-Headline/Majrit-Headline-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal;}
@font-face { font-family: 'Majrit Headline'; src: url('/fonts/v2.x/v2.2/majrit/Majrit-Headline/Majrit-Headline-Black.woff2') format('woff2'); font-weight: 900; font-style: normal;}
@font-face { font-family: 'Marcin Ant B'; src: url('/fonts/v2.x/v2.2/marcinAntB/marcinantb-extralight-webfont.woff') format('woff'); font-weight: 100; font-style: normal;}
@font-face { font-family: 'Marcin Ant B'; src: url('/fonts/v2.x/v2.2/marcinAntB/marcinantb-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Marcin Ant B'; src: url('/fonts/v2.x/v2.2/marcinAntB/marcinantb-heavy-webfont.woff2') format('woff'); font-weight: 800;font-style: normal;}


/******  Estilos Pieza   ******/

h3.font_secondary{font-family: 'Marcin Ant B'; }
.a_b .phototext{ background: #F0F0F0; padding: 2rem;}
.a_b .phototext div { font-size: 1.4rem !important;  line-height: 2rem !important;}
.a_b .phototext h3 { font-size: 1.5rem !important; margin-bottom: 0 !important;}
.lead_art{ max-width: 900px !important; margin: 0 auto 3rem !important;  width: 100% !important}
.a_hg.especial { margin-bottom: 2rem !important; }
.initial_letter:first-letter {  font-size: 1.8rem; line-height: 2.8rem; font-weight: bold; margin-bottom: 1.8rem; float: none; padding-right: 0;} 
.global-header .header_bottom-bar .section-bar_wrapper .section-bar {justify-content: left;}
 


/******  Predicción General - Apertura   ******/

.containter-opening{ text-align: center; }
.containter-opening .fecha-actualizacion-sondeos{position: relative; font-size: 12px; color:#ff4141; font-weight: 600; font-family: 'Benton Sans'; text-align: center; text-transform: uppercase; margin-bottom: 3rem;}
.containter-opening .fecha-actualizacion-sondeos:before{ content: ''; display: block; width: 100%;  height: 0.0625rem; background: #FF4141; position: absolute; top: 50%; left: 50%; transform: translate(-50%); max-width: 50rem;}
.containter-opening .fecha-actualizacion-sondeos span{ background: #FFF; padding: 0 10px; position: relative; }
.containter-opening h3{ font-family: 'Marcin Ant B';  font-weight: 800; font-size: 26px; line-height: 120%;}
.containter-opening h3 .candidate{ display: block; }
.candidate { font-weight: 600;}
.c-joe-biden { color: var(--democratas);}
.c-trump { color: var(--republicanos);}
.forecast-opening{ margin: 20px 0; font-family: 'Benton Sans'; font-size: 18px;}
.candidates-opening{ width: 100%; text-align: center; position: relative; margin-top: 30px;}
.candidates-opening:before{ content:''; display: block; width: 0px; height: 100%; border-left: 1px dotted #999; position: absolute; top: 0; left: 50%; }
.candidates-opening .data-candidate{ display: inline-block; text-align: center; }
.candidates-opening .data-candidate img{ border-radius: 100%; width: 120px; height: 120px;}
.candidates-opening .data-candidate figcaption{ max-width: 100px; margin: 20px auto; font-family: 'Marcin Ant B';  font-weight: 800; font-size: 22px; line-height: 115%;}
.candidates-opening .data-candidate figcaption strong{ display: block; }
.candidates-opening .data-candidate figcaption span{ position: relative; background: #EEEEEE; border-radius: 3px; font-family: 'Majrit Headline'; font-weight: 700; font-size: 25px; line-height: 135%; color: #FFF; display: block; padding: 3px 5px; margin-top: 16px; text-align: center;}
.candidates-opening .data-candidate figcaption span:before{ content: ''; display: block; width: 0; height: 0; border-bottom: 5px solid #EEEEEE; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);}
.candidates-opening .data-candidate figcaption span:after{content: 'Probabilidad'; display: block; width: auto; position: absolute; top: 35px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: 'Benton Sans'; font-size: 12px; text-transform: uppercase; color: #222; font-weight: 400; width: 100%;}
.candidates-opening .data-candidate.democrata figcaption span{ background: var(--democratas);}
.candidates-opening .data-candidate.democrata figcaption span:before{ border-bottom: 5px solid var(--democratas);}
.candidates-opening .data-candidate.republicano figcaption span{ background: var(--republicanos);}
.candidates-opening .data-candidate.republicano figcaption span:before{ border-bottom: 5px solid var(--republicanos);}
.candidates-opening .data-candidate.republicano img{ background: var(--republicanos);}
.candidates-opening .data-candidate.democrata img{ background: var(--democratas);}

.candidates-opening .data-candidate.winning img{transform:scale(1.2);}
.candidates-opening .data-candidate.leading img{transform:scale(1.1);}


/******  Tabla Predicciones   ******/

.tabla-predicciones{ width:100%; max-width: 643px; margin: 0 auto; font-family: 'Benton Sans'; font-size: 15px; /*border-bottom: 1px solid #E0E0E0;*/} 
.prediccion{ display: block; }
.titulo-prediccion{ display: block; background-color:#FFF; color:#333; text-align: center; padding: 15px 0 10px; }
.titulo-prediccion strong{font-family: 'Marcin Ant B';}
.titulo-prediccion span{ display: block;  font-size: 13px; }
.datos-prediccion{ position: relative; display: block; padding: 20px 0; }
.datos-prediccion:before{ content:''; display: block; width: 0px; height: 100%; border-left: 1px dotted #999; position: absolute; top: 0; left: 50%; }
.dato-prediccion{ width: 50px; display: inline-block; margin: 0; padding: 0; font-weight: 600;}
.dato-prediccion.dato-democrata{ text-align: left; color: var(--democratas);}
.dato-prediccion.dato-republicano{ text-align: right; color: var(--republicanos);}
.grafico-prediccion{ width: calc(100% - 110px); display: inline-block;  position: relative;  background-color: var(--republicanos); height: 10px; margin: 0; padding: 0;}
.linea-democrata{ position: absolute;top: 0; left: 0; background-color: var(--democratas); height: 10px; }


/********** Gráficos de lineas **********/

#g-graphic, .cont-graphic{ text-align: center; border-bottom: 1px dotted #CCC; padding-bottom: 10px;}
.filter-buttons{ display: inline-block; text-align: center; padding: 10px 0;}
.filter-buttons div{display: inline-block; background: #F0F0F0; border-radius: 4px; margin: 3px; font-weight: 600; font-size: 11px; color: #666; line-height: 32px; padding: 0 8px; transition: all 0.5s; cursor: pointer;}
.filter-buttons div p{ font-size: 12px; line-height: 28px; font-weight: 600;}
.filter-buttons div:hover{background: #DDD; color: #000;}
.filter-buttons div.active{ color: #FFF; background: #0250BD; text-decoration: none; cursor: initial;}


/********** Gráficos de lineas **********/

.mapa-sondeos{ text-align: center; }

.barras-mapa-sondeos{position: relative;border-top: 1px dotted #CCC; padding: 10px 0; margin: 20px 0 30px;}
.barras-mapa-sondeos .candidato { margin: 20px auto; font-family: 'Marcin Ant B'; font-weight: 800; font-size: 18px; width: 50%; text-align: left;line-height: 145%;margin: 0;}
.barras-mapa-sondeos .candidato.biden{ color: var(--democratas); float: left;} 
.barras-mapa-sondeos .candidato.trump{ color: var(--republicanos); float: right; text-align: right;} 
.grafico-barras-sondeos{ width: 100%; height:30px; background: #FFF; box-sizing: border-box; display: block; clear: both; position: relative; text-align: center;}
.grafico-barras-sondeos:before{content:''; display: block; width: 0px; height: calc(100% + 10px); border-left: 1px dotted #999; position: absolute; top: -5px; left: 50%;z-index: 1 }
.grafico-barras-sondeos:after{content:'MAYORÍA 270 DE 538 VOTOS ELECTORALES'; display: block; width: auto; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: 'Benton Sans'; font-size: 12px; text-transform: uppercase; color: #222; font-weight: 600; width: 100%;}
.grafico-barras-sondeos span{ display: inline-block; text-align: center; height: 30px; line-height: 30px; box-sizing: border-box; font-family: 'Majrit Headline'; color: #000; font-weight: 600; font-size: 18px;}
.grafico-barras-sondeos span.seguro-biden{background: var(--democratas);}
.grafico-barras-sondeos span.lidera-biden{background: var(--democratas5);}
.grafico-barras-sondeos span.empate{ background: #DDD; }
.grafico-barras-sondeos span.lidera-trump{background: var(--republicanos5);}
.grafico-barras-sondeos span.seguro-trump{background: var(--republicanos);}

.leyenda-mapa-sondeos{ border-top: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 0; margin: 0;}
.leyenda-mapa-sondeos ul{ display: block;text-align: center; list-style: none; font-family: 'Benton Sans'; font-size: 12px; padding: 0;}
.leyenda-mapa-sondeos ul li{ display: inline-block; padding: 0 20px 0 17px; text-align:left; position: relative; }
.leyenda-mapa-sondeos ul li:before{content: ''; position: absolute;  top:0; left: 0; display: inline-block; width: 13px; height: 13px; border-radius: 100%; background: #DDD; margin-right: 5px;}
.leyenda-mapa-sondeos ul li.seguro-biden:before{background: var(--democratas); }
.leyenda-mapa-sondeos ul li.lidera-biden:before{background: var(--democratas5); }
.leyenda-mapa-sondeos ul li.lidera-trump:before{background: var(--republicanos5);}
.leyenda-mapa-sondeos ul li.seguro-trump:before{background: var(--republicanos);}

/********** Fuentes **********/
.fuente-sondeos{ font-family: 'Benton Sans'; font-size: 12px; padding: 10px; text-align: left; background: #F5F5F5;  display: block; margin: 1px 0 6rem;}

@media (max-width:767px) {
  .leyenda-mapa-sondeos ul{ text-align: left; }
  .leyenda-mapa-sondeos ul li{ display: block; margin-bottom: 10px; text-align: left;}
  .grafico-barras-sondeos span {font-size: 16px;}
  .barras-mapa-sondeos .candidato{font-size: 16px;}

  #g-graphic .filter-buttons{width: 100%; max-width: 300px;}
  
  #g-graphic .filter-buttons div {margin: 0 1%; padding: 0; width: 23%;}
  #g-graphic .filter-buttons div p{ font-size: 11px; line-height: 28px; font-weight: 300;}

  #g-graphic .filter-buttons div:first-of-type{ width: 98%; display: block; margin:0 auto 10px; border-bottom: 1px solid #E0E0E0; position: relative;}
  #g-graphic .filter-buttons div:first-of-type:after{content:''; display: block; width: 100%; height: 0; border-bottom: 1px dotted #999; position: absolute; bottom: -6px; left: 0;z-index: 1 }

  .titulo-prediccion span { font-size: 12px;}

}

@media (min-width:1000px) {
  .global-header .header_bottom-bar .section-bar_wrapper .section-bar {  justify-content: center; }
  .a_b .raw_html { width: calc(100% + 350px); margin-left: -175px;  margin-right: -175px;}
}