* {
    box-sizing: border-box;
  }

  
  html,
  body {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: 'Montserrat', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    min-height: 1280px;
    background: #4D5855;
    color: #FFF;
    font-size: 1.1em;
  }
  
  p,
  h1,
  h2,
  h3,
  h4,
  a {
    font-family: 'Montserrat', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    font-weight: 400;
  }

  h1 {
    font-size: 4rem;
    font-weight: bold;
  }

  
  a,
  a:visited,
  a:hover {
    color: #FFF;
    text-decoration: underline;

  }

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

  .creditos {
    font-size: 10pt;
    text-align: center;
  }

  .logo-gc {
    position: fixed !important;
    top: 10px;
    left: 10px;
    width: 60px;
    z-index: 1000;
  }
  
  .main-title {
    font-size: 3em;
    text-shadow: 2px 2px #333;
  }

  .main-subtitle {
    font-size: 2.3em;
    text-shadow: 2px 2px #333;
  }

  .title {
    font-size: 2.5em;
  }

  .subtitle {
    font-size: 1.5em;
  }

  .article-body {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.8rem;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
    text-align: justify;
  }

  .article-body h1, h2, h3, h4 {
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: bold;
  }

  .article-body p {
    line-height: 1.5;
    display: block;
    padding-bottom: 15px;
  }

  .article-body a {
    color: #4aadad;
    text-decoration: underline;
  }

  .article-body .c3-tooltip td 
  {
    background-color: #555;
  }

  
  .ui.small.table
  {
    font-size: 0.9rem !important;
  }

  .table-container {
    width: 100%;
    overflow-x: auto;
  }


  .title-chart {
    text-align: center;
    font-weight: bold;
  }

  #metadata-layer-link a {
    color: #369;
  }
  

  .section__hed a {
    text-decoration: underline;
  }

  .title, .subtitle {
    text-shadow: 2px 2px #333;
  }
  
  nav {
    font-size: 0.75em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    padding-right: 5rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;

  }
  
  .nav__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 1rem;
  }
  
  .nav__items > * {
    margin-right: 0.5rem;
  }

  .sidebar a {
    display: block;
  }

  .main-menu {
    position: fixed;
    z-index: 10;
  }
  
  .menu-storymap {
    position: fixed;
    z-index: 10;
    top: 15px;
    right: 10px;
    color: rgba(255, 255, 255, .7) !important;
    display: flex;
    transition: color .1s ease;
    border-radius: .28571429rem;
    font-size: 9pt;
    text-decoration: auto;
    padding: 3px;
    cursor: pointer;
  }

  .menu-storymap:hover {
    background-color: rgba(50,50,50,0.5);
  }

  .tabla-fracciones {
    border: 1px solid #FFF;
  }

  .tabla-fracciones td {
    font-size: 0.8em;
    border-bottom: 1px solid #FFF;
  }


  .ui.menu {
    font-size: 0.8em;
    padding-right: 14px !important;
  }

  .ui.popup {
    max-width: 30% !important;
  }

  .img-main {
    max-width: calc(60% - 200px);
  }
  
  .intro__hed {
    color: #FFF;
    position: relative;
    max-width: 50%;
    top: 10%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  
  .text-main {
    font-weight: 600;
    text-align: justify;
  }


  
  .section__hed {
    color: #FFF;
    position: relative;
    max-width: 50%;
    top: 30%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .section__hed p {
    background-color: rgba(50, 50, 50, 0);
    color: #FFF;
    padding: 10px;
    text-align: justify;
    border-radius: 10px;
  }
  
  .obscuro
  {
    color: #222;
  }
  
  #outro {
    height: 640px;
    background-color: #EEE9DB;
  }


  main {
    height: 100%;
    /*background-image: url('../img/fondo1.jpg');*/
    background-color: #333;
  }

  #intro {
    text-align: center;
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url('../img/fondos/pexels-pixabay-236722.jpg');
    background-size: cover;
  }

  #intro2 {
    text-align: center;
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url('../img/fondos/pexels-grunzibaer-683535.jpg');
    background-size: cover;
  }


  #seccion-final {
    background-color: #000;
  }

  .titulo-seccion {
    height: 100%;
    text-align: center;
    line-height: 1.5;
  }
  
  
  .idea-fuerza {
    font-weight: 600;
  }

  .inicial {
    text-indent: 0;
    margin: 5px 2px 0px -8px;
    float: left;
    text-align: justify;
    font-size: 84px;
    line-height: 60px;
    font-family: 'Montserrat', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
  }

  .fuente {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 8pt;
    color: #c2c2c2;
    z-index: 100;
  }

  #seccion-gas-metano {
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */ 
        url('../img/fondos/michal-pech-er5UYZIjKFE-unsplash.jpg');
    background-size: cover;
  }

  .ref-popup {
    text-decoration: underline;
    color: #37bfac;
  }
  

  #seccion-origen-gas {
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */ 
        url('../img/fondos/selim-arda-eryilmaz-Grg6bwZuBMs-unsplash.jpg');
    background-size: cover;
  }

  #seccion-papel-gas {
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */ 
        url('../img/fondos/frantzou-fleurine-6IlRXQyVxOQ-unsplash.jpg');
    background-size: cover;
  }
  
  #seccion-uso-gas {
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */ 
        url('../img/fondos/pexels-pixabay-221012.jpg');
    background-size: cover;
  }

  #seccion-gasificacion-electrico {
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.5)
        ),
        /* bottom, image */ 
        url('../img/fondos/pexels-loic-manegarium-3855962.jpg');
    background-size: cover;
    background-position: bottom;
  }

  #seccion-circulo-dependencia {
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.5)
        ),
        /* bottom, image */ 
        url('../img/fondos/ries-bosch-RYcEnw4z37k-unsplash.jpg');
    background-size: cover;
    background-position: top;
  }

  #seccion-cfe {
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.5)
        ),
        /* bottom, image */ 
        url('../img/fondos/gasoductos_CFE_Fuente_GobiernodeMéxico.jpg');
    background-size: cover;
    background-position: top;
  }

  #seccion-plantas-gnl {
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.5)
        ),
        /* bottom, image */ 
        url('../img/fondos/40164925720_a90077f6a1_k.jpg');
    background-size: cover;
    background-position: top;
  }

  #seccion-mercado-mundial-gnl {
    background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.5)
        ),
        /* bottom, image */ 
        url('../img/fondos/LNG_Tanker_Energy_Progress_at_Wickham_Point_in_March_2016_\(25599950124\).jpg');
    background-size: cover;
    background-position: center;
  }
  
  #seccion-conclusiones {
    background-color: #358962;
    color: #FAFAFA;
    background-size: cover;
  }

  #seccion-conclusiones a {
    color: #ece054;
  }

  .section__grid {
    color: #FFF;
    position: relative;
    max-width: calc(100% - 100px);
    top: 20%;
    -ms-transform: translateY(-30%);
    transform: translateY(-30%);
    left: 50%;
    -ms-transform: translateX(-30%);
    transform: translateX(-30%);
  }

  .section__grid p {
    background-color: rgba(50,50,50,0.5);
    color: #FFF;
    padding: 10px;
  }

  #scrolly {
    position: relative;
    background-color: #f3f3f3;
  }

  article {
    position: relative;
    padding: 0;
    max-width: 20rem;
    margin: 0 auto;
  }

  .article2 {
    max-width: calc(30% - 10vw);
  }

  .step2 {
    background-color: none;
    text-align: justify;
  }

  .step2 p {
    background-color: none !important;
    text-align: justify !important;
  }

  
  figure {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    background-color: #8a8a8a;
    z-index: 0;
  }

  figure p {
    text-align: center;
    padding: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
  }

  
  #seccion-gas-metano {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }


  #seccion-origen-gas {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }

  #seccion-papel-gas {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }

  #seccion-uso-gas {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }
  
  #seccion-gasificacion-electrico {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }

  #seccion-circulo-dependencia {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }


  #seccion-despliegue-territorial {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }

  #seccion-plantas-gnl {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }



  #seccion-cfe {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }

  #seccion-mercado-mundial-gnl {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #666;
  }


  #map-1 {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #546170;
  }

  #map-1-data {
    position: absolute;
    bottom: 84px;
    right: 55px;
    font-size: 0.8em;
    z-index: 10;
  }

  #map-1-data a {
    color:rgba(255, 255, 255, 0.75);
  }

  #map-1-data a:hover { 
    color:rgba(255, 255, 255, 1);
    cursor: pointer;
  }

  #map-3 {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #546170;
  }

  #map-3-data {
    position: absolute;
    bottom: 84px;
    right: 55px;
    font-size: 0.8em;
    z-index: 10;
  }

  #map-3-data a {
    color:rgba(255, 255, 255, 0.75);
  }

  #map-3-data a:hover { 
    color:rgba(255, 255, 255, 1);
    cursor: pointer;
  }

  #map-2 {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    background-color: #546170;
  }
  
  #map-2-data {
    position: absolute;
    bottom: 84px;
    right: 55px;
    font-size: 0.8em;
    z-index: 10;
  }

  #map-2-data a {
    color:rgba(255, 255, 255, 0.75);
  }

  #map-2-data a:hover { 
    color:rgba(255, 255, 255, 1);
    cursor: pointer;
  }
  
  .step {
    margin: 0 auto 2rem auto;
    color: #aaa;
  }

  .map-story2 {
    background-color: #333;
  }

  #map-2-1 {
    position: -webkit-sticky;
    position: sticky;
    left: 30%;
    width: 70%;
    margin: 0;
    z-index: 0;
    background-color: #546170;
  }

  #overviewmap-2-1 {
    position: absolute;
    z-index: 100;
    bottom: 5px;
    left: 5px;
    width: 200px;
    height: 150px;
    background-color: #546170;
    border: 1px solid #000;
  }

  #map-2-2 {
    position: -webkit-sticky;
    position: sticky;
    left: 30%;
    width: 70%;
    margin: 0;
    z-index: 0;
    background-color: #6487af;
  }

  #map-2-3 {
    position: -webkit-sticky;
    position: sticky;
    left: 30%;
    width: 70%;
    margin: 0;
    z-index: 0;
    background-color: #6487af;
  }

  .step:last-child {
    margin-bottom: 0;
  }

  .step.is-active p {
    background-color: goldenrod;
    color: #fff;
  }

  .step.is-active h4 {
    color: #fff;
  }

  .step p {
    text-align: center;
    font-size: 1.1rem;
    background-color: rgba(30,30,30,0.5);
  }

  .step-fixed p {
    background-color: rgba(30,30,30,0) !important;
    text-align: justify;
  }

  .step2 p {
    padding: 0 !important;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    background-color: rgba(30,30,30,0) !important;
  }

  
  .lefty {
      width: 33vw;
      margin-left: 5vw;
  }

  #map1-detail
  {
    position: absolute;
    top: 120px;
    right: 40px;
    width: 400px;
    height: auto;
    padding: 10px;
    background-color: #999;
    color: #FFF;
    z-index: 100;
  }

  #graph-pais-map1
  {
    width: 380px;
  }

  #figura1 {
    height: 500px;
  }

  .c3 line, .c3 path {
    stroke: #FFF;
  }

  .c3 text
  {
    color: #FFF;
    fill: #fff;
    font-family: 'Montserrat', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .c3-tooltip td 
  {
    background-color: #555;
  }

  .detail-close-button
  {
    position: absolute; 
    top: 2px; 
    right: 2px;
  }

  #chart_import_prod_oferta {
    width: 100%;
    height: 600px;
  }

  #chart_prod_gas_cuencas_eeuu_export_mex {
    width: 100%;
    height: 600px;
  }

  #chart_por_export_gas_metano_pais {
    width: 100%;
    height: 600px;
  }

  #chart_prod_shale_cuenca_eeuu_mex {
    width: 100%;
    height: 600px;
  }

  #chart_gas_metano_matriz_energetica_pais {
    width: 100%;
    height: 600px;
  }

  #chart_gen_electr_gas_pais {
    width: 100%;
    height: 600px;
  }

  #chart_consumo_ener_prim_mx {
    width: 100%;
    height: 400px;
  }

  #chart_consumo_ener_sec_mx {
    width: 100%;
    height: 400px;
  }

  #chart_consumo_gas_mexico {
    width: 100%;
    height: 600px;
  }

  #chart_gen_electrica_energetico {
    width: 100%;
    height: 600px;
  }

  #chart_gen_electrica_tecno {
    width: 100%;
    height: 400px;
  }

  #chart_import_compromiso_compra_gas {
    width: 100%;
    height: 600px;
  }

  #chart_cap_export_opera_y_constr {
    width: 100%;
    height: 600px;
  }


  .menu-modal{
    padding: 20px;
  }

  .menu-modal p {
    margin-bottom: 15px;
  }

  .menu-about{
    padding: 20px;
    width: 600px;
    margin: auto;
    max-width: 90%;
  }

  .menu-about p {
    line-height: 1.5;
    display: block;
    padding-bottom: 15px;
  }

  .text-sec
  {
    font-size: 0.8em;
  }

  .text-sec-download
  {
    font-size: 0.8em;
    padding: 0 !important;
  }

  .ol-control button {
    background-color: #1C1C1C;
    color: #fbfbfb;
  }

  .ol-control button:hover {
    color: #fff;
  }

  .ol-control {
    background-color: #333;
    color: #fbfbfb !important;
  }

  .ol-zoom
  {
    pointer-events: auto;
    left: 20px;
    top: unset;
    top: 50px;
  }

  .ol-zoom-extent {
    top: 25px;
    left: 20px;
    text-align: center;
  }

  .ol-zoom-extent i {
    margin: 0 !important;
  }

  .ol-control.ol-legend 
  {
    background-color: #111;
    bottom: 0.5em;
    left: unset;
    right: 0.5em;
  }

  .ol-control.ol-legend:hover {
    background-color: rgba(10, 10, 10, .8);
  }

  .ol-control.ol-legend button.ol-closebox:before {
    color: #d8d6d6;
  }

  
  .ol-popup.ol-fixed {
    z-index: 1;
    top: 6em !important;
  }

  .ol-popup .ol-popup-content {
    background-color: #333;
    color: #fff;
    font-family: 'Montserrat';
  }

  .ol-popup .ol-popup-content h1 {
    font-size: 14px;
    color: #FFF;
    font-family: 'Montserrat';
  }

  .ol-popup .ol-popupfeature tr:nth-child(2n+1) {
    background-color: #555;
    
  }

  .ol-popup .ol-popupfeature .ol-zoombt {
    color: rgb(231 233 235 / 50%);
  }

  .ol-popup .ol-popupfeature .ol-prev, .ol-popup .ol-popupfeature .ol-next {
    color: rgb(231 233 235 / 50%);
  }

  .ol-popup .ol-popupfeature table td {
    align-content: start;
    font-size: 11px;
  }

  .ol-popup.anim.ol-popup-bottom.ol-popup-left > div {
    background-color: #444;
  }

  .ol-popup.anim.ol-popup-top.ol-popup-left > div {
    background-color: #444;
  }

  .ol-popup.anim.ol-popup-bottom.ol-popup-right > div {
    background-color: #444;
  }

  .ol-popup.anim.ol-popup-top.ol-popup-right > div {
    background-color: #444;
  }

  .ol-layerswitcher-image > button, .ol-layerswitcher > button {
    font-size: 1.2em;
  }

  .ol-control.ol-layerswitcher {
    top: 7em;
  }

  .ol-layerswitcher.ol-collapsed {
    min-width: unset;
  }
  .ol-layerswitcher,
  .ol-layerswitcher.ol-forceopen {
    min-width: 15em;
  }

  .ol-layerswitcher > ul.panel {
    overflow-y: auto;
    box-sizing: border-box;
  }

  .ol-layerswitcher li .li-content {
    width: calc(100% - 3em);
  }

  .ol-layerswitcher li .li-content label {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    margin: .6em 0;
  }

  .ol-control.ol-layerswitcher .panel-container {
    padding-right: 0;
    background-color: #444;
  }

  .ol-layerswitcher .panel li .layerswitcher-opacity {
    width: 20%;
    display: none;
    vertical-align: middle;
    box-sizing: border-box;
    vertical-align: middle;
    margin: 0;
  }
  .ol-layerswitcher .layerswitcher-opacity {
    border:0;
    background: none;
    height: 1em;
    box-shadow: none;
  }
  .ol-layerswitcher .layerswitcher-opacity:before {
    content: "";
    width: 100%;
    height: 3px;
    background: #333;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 1px solid #333;
    box-sizing: border-box;
  }
  .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor {
    width: auto;
    transform: translateY(-50%);
    height: 3px;
    right: 0;
    background: #666;
    border-radius: 0;
  }
  .ol-touch .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor,
  .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before {
    position: absolute;
    transform: translate(-50%,-50%);
    width: 6px;
    height: 16px;
    left: -1px;
    border-radius: 0;
    background: #333;
  }
  .ol-layerswitcher .layerswitcher-opacity-label {
    display: none;
    right: 20%;
    bottom: 70%;
    font-size: 0.6em;
    user-select: none;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }

  .ol-layerswitcher .layerup {
    width: 2em;
    background: none;
    position: absolute;
    right: .5em;
  }
  .ol-layerswitcher .layerup:after {
    content:none;
  }
  .ol-layerswitcher .layerup:before {
    color: #333;
    content: "\F0C9";
    font-family: FontAwesome;
    border: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1em;
    left: .5em;
  }

  .ol-layerswitcher [type=checkbox]+label:before, 
  .ol-layerswitcher [type=radio]+label:before {
    content: '';
    border: 2px solid #ccc;
    background-color: transparent;
  }
  .ol-layerswitcher [type=checkbox]:checked+label:before, 
  .ol-layerswitcher [type=radio]:checked+label:before {
    background: #333;
    border-color: #333;
  } 
  .ol-layerswitcher [type=checkbox]:checked+label:after{
    content: "\2713";
    color: #fff;
    position: absolute;
    top: -.15em;
    left: 0.4em;
    cursor: pointer;
    font-weight: 900;
    text-shadow: 1px 1px #fff;
    font-size: 0.8em;
    transform: none;
    border: 0;
    box-shadow: unset;
  }

  .ol-layerswitcher [type="radio"]:checked+label:after {
    content: none;
  }

  .ol-control.ol-layerswitcher {
    background: #333;
    right: 0;
    top: 50px;
    border-radius: 0;
  }
  .ol-layerswitcher button,
  .ol-layerswitcher button:focus,
  .ol-layerswitcher button:hover {
    background: #333;
    border: 0;
    user-select: none;
    outline: none;
  }
  .ol-layerswitcher button:before {
    background: #333;
    -webkit-box-shadow: 0.1em 0.1em #fff;
    box-shadow: 0.1em 0.1em #fff;
  }
  .ol-layerswitcher button:after {
    background: #fff;
    background-image: none;
  }

  .ol-layerswitcher .ol-layer-group {
    margin-top: 1em;
  }
  .ol-layerswitcher .ol-layer-group > .ol-layerswitcher-buttons .layerInfo {
    display: none;
  }
  .ol-layerswitcher .expend-layers:before, .ol-layerswitcher .collapse-layers:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -2px;
    height: 4px;
    width: 100%;
    background: #369;
  }
  .ol-layerswitcher .expend-layers, 
  .ol-layerswitcher .collapse-layers {
    top: -1em;
  }
  .ol-layerswitcher .expend-layers:before, 
  .ol-layerswitcher .expend-layers:after, 
  .ol-layerswitcher .collapse-layers:before, 
  .ol-layerswitcher .collapse-layers:after {
    background: #333;
  }
  .ol-layerswitcher .panel ul {
    overflow: visible;
  }
  .ol-layerswitcher .layerInfo {
    right: 0;
    background: #333;
  }

  .ol-control.ol-layerswitcher .ol-switchertopdiv, 
  .ol-control.ol-layerswitcher .ol-switcherbottomdiv {
    display: none!important;
  }


  .ol-layerswitcher .panel li label span {
    font-family: 'Montserrat', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 8pt;
    max-width: calc(100% - 10px);
  }

  /* hide */
  
  .hideOpacity .layerswitcher-opacity {
    display:none;
  }
  .hideOpacity .ol-layerswitcher .layerup {
    height: 1.5em;
  }
  .showPercent .layerSwitcher .ol-layerswitcher .layerswitcher-opacity-label {
    display: block;
  }

  
  .ol-control.ol-feature-list {
    left: unset;
    right: 0;
    width: 50%;
  }

  .ol-control.ol-feature-list.ol-collapsed {
    bottom: .5em;
    left: unset;
    right: 2.5em;
    width: auto;
  }

  .ol-feature-list .ol-content .ol-header button {
    background-color: #000;
  }

  .ol-feature-list table td {
    font-size: 8pt;
  }

  .ol-feature-list .ol-content .ol-header p {
    color: #333;
  }

  .ol-feature-list thead td p {
    color: #333;
    font-size: 9pt;
  }

  .ol-search {
      top: 7.5em;
      left: unset;
      right: 0.3em;
  }

  .ol-touch .ol-search {
      top: 9em;
      left: unset;
      right: 0.3em;
  }

  .ol-touch .ol-control.ol-select {
      top: 12em;
      left: unset;
      right: 0.3em;
  }
  

  .ol-control.ol-select {
    top: 6.5em;
    left: 1.3em;
    right: unset;
    color: #FFF;
    background-color: #333;
  }

  .ol-control.ol-select:hover {
    background-color: rgba(30,30,30,0.7);
  }

  .ol-ext-toggle-switch, .ol-ext-toggle-switch span {
    font-size: 10pt;
  }

  .ol-control.ol-select label.ol-ext-check {
    font-size: 10pt;
  }

  .ol-select-multi li>div.ol-control.ol-select, .ol-select-multi li>div:hover {
    font-size: 10pt;
  }

  .ol-ext-check span {
    background-color: #FFF;
  }

  .center.aligned.content {
    text-align: center;
  }

  .center.aligned.content {
    text-align: center;
  }

  .jsPanel-titlebar .jsPanel-title {
    font-family: 'Montserrat', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 9pt;
    font-variant: none;
  }

  .close-panelmenu {
    text-decoration: none !important;
  }

  .am5exporting-list {
      background: rgb(42 40 40) !important;
      padding: 5px 0px;
      border: 1px solid rgb(255, 255, 255);
      border-radius: 3px;
  }

  .am5exporting-icon {
    background-color: #FFF !important;
  }

  @media only screen and (min-width: 600px) and (max-width: 1200px) {
    
    
    .main-title {
      font-size: 2.5em;
    }

    .main-subtitle {
      font-size: 2em;
    }
    
    .title {
      font-size: 2.5em;
    }

    .subtitle {
      font-size: 2em;
    }

    .intro__hed {
      max-width: 70%;
    }

    .section__hed {
      top: 20%;
      max-width: 70%;
    }

    
    #chartExport1 {
      width: 100%;
      height: 500px;
    }
  }

  @media only screen and (max-width: 600px) {
    
    body {
      font-family: 'Montserrat', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      min-height: 1280px;
      color: #FAFAFA;
      font-size: 1em;
    }
    
    p,
    h1,
    h2,
    h3,
    h4,
    a {
      font-family: 'Montserrat', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      margin: 0;
      font-weight: 400;
    }

    h1 {
      font-size: 1.5rem;
      font-weight: bold;
    }

    h2 {
      font-size: 1.3rem;
      font-weight: bold;
    }

    h3 {
      font-size: 1.2rem;
      font-weight: bold;
    }

    h4 {
      font-size: 1rem;
      font-weight: bold;
    }

    .lefty {
        width: 40vw;
        margin-left: 5vw;
    }

    .step p {
      text-align: center;
      padding: 1rem;
      font-size: 0.9rem;
      background-color: rgba(30,30,30,0.5);
    }
    
    .step-fixed p {
      background-color: rgba(30,30,30,0) !important;
    }

    
    .article2 {
      max-width: calc(40% - 10vw);
    }

    #map-2-1 {
      left: 40%;
      width: 60%;
    }

    #map-2-2 {
      left: 40%;
      width: 60%;
    }

    #map-2-3 {
      left: 40%;
      width: 60%;
    }

    #overviewmap-2-1 { 
      display: none;
    }

    .img-main {
      max-width: calc(50%);
    }

    .main-title {
      font-size: 3em;
    }

    .main-subtitle {
      font-size: 1.5em;
    }

    .title {
      font-size: 1.5em;
    }

    .subtitle {
      font-size: 1.2em;
    }

    .text-main {
      font-size: 0.9em;
      font-weight: bold;
    }

    .article-table {
      font-size: 0.7rem !important;
    }


    .intro__hed {
      max-width: calc(100% - 50px);
    }

    .menu-modal{
      padding: 20px;
    }
  
    .menu-modal p {
      margin-bottom: 15px;
      font-size: 0.9rem;
    }

    .menu-modal a {
      font-size: 0.8rem;
    }

    #intro {
      overflow: auto;
    }

    #intro2 {
      overflow: auto;
    }

    
    #chart_import_prod_oferta {
      width: 100%;
      height: 350px;
    }
  
    #chart_prod_gas_cuencas_eeuu_export_mex {
      width: 100%;
      height: 350px;
    }
  
    #chart_por_export_gas_metano_pais {
      width: 100%;
      height: 350px;
    }
  
    #chart_prod_shale_cuenca_eeuu_mex {
      width: 100%;
      height: 350px;
    }
  
    #chart_gas_metano_matriz_energetica_pais {
      width: 100%;
      height: 350px;
    }
  
    #chart_gen_electr_gas_pais {
      width: 100%;
      height: 350px;
    }
  
    #chart_consumo_ener_prim_mx {
      width: 100%;
      height: 400px;
    }
  
    #chart_consumo_ener_sec_mx {
      width: 100%;
      height: 250px;
    }
  
    #chart_consumo_gas_mexico {
      width: 100%;
      height: 350px;
    }
  
    #chart_gen_electrica_energetico {
      width: 100%;
      height: 350px;
    }
  
    #chart_gen_electrica_tecno {
      width: 100%;
      height: 250px;
    }
  
    #chart_import_compromiso_compra_gas {
      width: 100%;
      height: 350px;
    }

    .section__hed {
      top: 100px;
      max-width: 80%;
    }

    .ui.small.table {
      font-size: 0.8rem !important;
      white-space: nowrap;
    }

    .ol-control.ol-legend {
      bottom: 0.5em;
    }

    

    .ol-touch .ol-control button {
      font-size: 1.2em;
    }

    .ol-touch .ol-layerswitcher-image > button, .ol-touch .ol-layerswitcher > button {
      font-size: 1.7em;
    }
    
  }