/* grid-contenedor-body */

@supports(display: grid ) {

  .grid-contenedor-body {
    display: grid;
    min-height: 100%;
    grid-template-columns: 1fr;
    grid-template-areas: "header"
                         "contenido";
  }

  .header {
    grid-area: header;
  }

  .contenido {
    grid-area: contenido;
  }
}

/* -> grid-contenedor-body */


/* grid-contenedor-header */ /**/

@supports(display: grid ) {

  .grid-contenedor-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-gov-co-header"
                         "franja-logos-institucionales"
                         "franja-menu-institucional"
                         "franja-migas";
  }

  .franja-gov-co-header {
    grid-area: franja-gov-co-header;
  }

  .franja-logos-institucionales {
    grid-area: franja-logos-institucionales;
  }

  .franja-menu-institucional {
    grid-area: franja-menu-institucional;
  }

  .franja-migas {
    grid-area: franja-migas;
  }
}

/* -> grid-contenedor-header */


/* grid-contenedor-franja-logos-institucionales */ /**/

@supports(display: grid ) {

  .grid-contenedor-franja-logos-institucionales {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-franja-logos-institucionales contenido-franja-logos-institucionales right-panel-franja-logos-institucionales";
  }

  @media screen and (min-width: 1340px) {
    .grid-contenedor-franja-logos-institucionales {
      grid-template-columns: 1fr 1340px 1fr;
    }
  }

  .contenido-franja-logos-institucionales {
    grid-area: contenido-franja-logos-institucionales;
  }

  .left-panel-franja-logos-institucionales {
    grid-area: left-panel-franja-logos-institucionales;
  }

  .right-panel-franja-logos-institucionales {
    grid-area: right-panel-franja-logos-institucionales;
  }
}

/* -> grid-contenedor-franja-logos-institucionales */


/* grid-contenedor-logos-institucionales */ /**/

@supports(display: grid ) {

  .grid-contenedor-logos-institucionales {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "logo-colpensiones"
                         "titulo-compilacion"
                         "boton-buscar-header";
  }

  @media screen and (min-width: 576px) {
    .grid-contenedor-logos-institucionales {
      grid-template-columns: 1fr;
      grid-template-areas: "logo-colpensiones"
                           "boton-buscar-header"
						   "titulo-compilacion";
                           grid-gap: 10px;
    }

  }

  @media screen and (min-width: 992px) {
    .grid-contenedor-logos-institucionales {
      margin: 0 auto;
      grid-template-columns: auto auto 1fr;
      grid-template-areas: "logo-colpensiones titulo-compilacion boton-buscar-header";
    }
  }

  .logo-gobierno {
    grid-area: logo-gobierno;
  }

  .logo-colpensiones {
    grid-area: logo-colpensiones;
  }

  .titulo-compilacion {
    grid-area: titulo-compilacion;
  }

  .boton-buscar-header {
    grid-area: boton-buscar-header;
  }
}

/* -> grid-contenedor-logos-institucionales */


/* grid-contenedor-franja-menu-institucional */ /**/

@supports(display: grid ) {

  .grid-contenedor-franja-menu-institucional {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-franja-menu-institucional contenido-franja-menu-institucional right-panel-franja-menu-institucional";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-franja-menu-institucional {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-franja-menu-institucional {
    grid-area: contenido-franja-menu-institucional;
  }

  .left-panel-franja-menu-institucional {
    grid-area: left-panel-franja-menu-institucional;
  }

  .right-panel-franja-menu-institucional {
    grid-area: right-panel-franja-menu-institucional;
  }
}

/* -> grid-contenedor-franja-menu-institucional */


/* grid-contenedor-menu-institucional */

@supports(display: grid ) {

  .grid-contenedor-menu-institucional {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "icon-menu-franja-menu-institucional"
                         "menu-vertical-franja-menu-institucional";
    grid-column-gap: 10px;
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-menu-institucional {
      grid-template-columns: 1fr;
      grid-template-areas: "menu-horizontal-franja-menu-institucional";
    }
  }

  .menu-horizontal-franja-menu-institucional {
    grid-area: menu-horizontal-franja-menu-institucional;
  }

  .icon-menu-franja-menu-institucional {
    grid-area: icon-menu-franja-menu-institucional;
  }

  .menu-vertical-franja-menu-institucional {
    grid-area: menu-vertical-franja-menu-institucional;
  }

}

/* -> grid-contenedor-menu-institucional */


/* grid-contenedor-franja-migas */ /**/

@supports(display: grid ) {

  .grid-contenedor-franja-migas {
    display: grid;
    grid-template-columns: 0 12fr 0;
    grid-template-areas: "left-panel-migas contenido-migas right-panel-migas";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-franja-migas {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-migas {
    grid-area: contenido-migas;
  }

  .left-panel-migas {
    grid-area: left-panel-migas;
  }

  .right-panel-migas {
    grid-area: right-panel-migas;
  }
}

/* -> grid-contenedor-franja-migas */


/* grid-contenedor-icon-menu-contextual-migas */

@supports(display: grid ) {

  .grid-contenedor-icon-menu-contextual-migas {
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-template-areas: "side-menu contenedor-migas";
    grid-column-gap: 10px;
  }

  @media screen and (min-width: 1120px) {
    .grid-contenedor-icon-menu-contextual-migas {
      grid-template-columns: 40px 1fr;
    }
  }

  .side-menu {
    grid-area: side-menu;
  }

  .contenedor-migas {
    grid-area: contenedor-migas;
  }

}

/* -> grid-contenedor-icon-menu-contextual-migas */


/* grid-contenedor-footer */

@supports(display: grid ) {

  .grid-contenedor-footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-AJ"
                         "franja-canales-contacto"
                         "franja-mas-informacion-colpensiones"
                         "franja-colpensiones"
                         "franja-gov-co-footer";
  }

  .franja-AJ {
    grid-area: franja-AJ;
  }

  .franja-canales-contacto {
    grid-area: franja-canales-contacto;
  }

  .franja-mas-informacion-colpensiones {
    grid-area: franja-mas-informacion-colpensiones;
  }

  .franja-colpensiones {
    grid-area: franja-colpensiones;
  }

  .franja-gov-co-footer {
    grid-area: franja-gov-co-footer;
  }
}

/* -> grid-contenedor-footer */


/* grid-contenedor-franja-AJ */

@supports(display: grid ) {

  .grid-contenedor-franja-AJ {
    display: grid;
    grid-template-columns: 0 12fr 0;
    grid-template-areas: "left-panel-franja-AJ contenido-franja-AJ right-panel-franja-AJ";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-franja-AJ {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-franja-AJ {
    grid-area: contenido-franja-AJ;
  }

  .left-panel-franja-AJ {
    grid-area: left-panel-franja-AJ;
  }

  .right-panel-franja-AJ {
    grid-area: right-panel-franja-AJ;
  }
}

/* -> grid-contenedor-franja-AJ */


/* grid-contenedor-data-obra */

@supports(display: grid ) {

  .grid-contenedor-data-obra {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: auto;
    grid-template-areas: "entidad"
                         "logo-aj-visible"
                         "nombre-obra"
                         "issn"
                         "actualizacion"
                         "control-versiones"
                         "creditos"
  }

  @media screen and (min-width: 992px) {
    .grid-contenedor-data-obra {
      display: grid;
      grid-row-gap: 10px;
      grid-column-gap: 1rem;
      grid-column-gap: 2rem;
      grid-template-columns: 2fr 2fr;
      grid-template-areas: "logo-aj-visible ."
                           "nombre-obra actualizacion"
                           "issn control-versiones"
                           "creditos entidad";
    }
  }

  .logo-aj-visible {
    grid-area: logo-aj-visible;
  }

  .nombre-obra {
    grid-area: nombre-obra;
  }

  .actualizacion {
    grid-area: actualizacion;
  }

  .issn {
    grid-area: issn;
  }

  .control-versiones {
    grid-area: control-versiones;
  }

  .creditos {
    grid-area: creditos;
  }

  .entidad {
    grid-area: entidad;
  }
}

/* -> grid-contenedor-data-obra */


/* grid-contenedor-franja-canales-contacto */

@supports(display: grid ) {

  .grid-contenedor-franja-canales-contacto {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-franja-canales-contacto contenido-franja-canales-contacto right-panel-franja-canales-contacto";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-franja-canales-contacto {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-franja-canales-contacto {
    grid-area: contenido-franja-canales-contacto;
  }

  .left-panel-franja-canales-contacto {
    grid-area: left-panel-franja-canales-contacto;
  }

  .right-panel-franja-canales-contacto {
    grid-area: right-panel-franja-canales-contacto;
  }
}

/* -> grid-contenedor-franja-canales-contacto */


/* grid-contenedor-navegacion-modulos-contactos */

@supports(display: grid ) {

  .grid-contenedor-navegacion-modulos-contactos {
    display: grid;
    grid-template-columns: 190px;
    grid-gap: 40px;
    grid-auto-flow: row;
  }

  @media screen and (min-width: 576px) {

    .grid-contenedor-navegacion-modulos-contactos {
      grid-template-columns: repeat(2, 190px);
    }
  }

  @media screen and (min-width: 768px) {

    .grid-contenedor-navegacion-modulos-contactos {
      grid-template-columns: repeat(3, 190px);
    }
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-navegacion-modulos-contactos {
      grid-template-columns: repeat(4, 190px);
    }
  }

/* -> grid-contenedor-navegacion-modulos-contactos */


/* grid-contenedor-modulo-contactos */

@supports(display: grid ) {

  .grid-contenedor-modulo-contactos {
    display: grid;
    grid-row-gap: 15px;
    grid-template-columns: 1fr;
    grid-template-areas: "imagen-modulo-contactos"
                         "titulo-modulo-contactos"
                         "ver-mas-modulo-contactos";
  }

  .imagen-modulo-contactos {
    grid-area: imagen-modulo-contactos;
  }

  .titulo-modulo-contactos {
    grid-area: titulo-modulo-contactos;
  }

  .ver-mas-modulo-contactos {
    grid-area: ver-mas-modulo-contactos;
  }

}

/* -> grid-contenedor-modulo-contactos */


/* grid-contenedor-franja-mas-informacion-colpensiones */

@supports(display: grid ) {

  .grid-contenedor-franja-mas-informacion-colpensiones {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-franja-mas-informacion-colpensiones contenido-franja-mas-informacion-colpensiones right-panel-franja-mas-informacion-colpensiones";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-franja-mas-informacion-colpensiones {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-franja-mas-informacion-colpensiones {
    grid-area: contenido-franja-mas-informacion-colpensiones;
  }

  .left-panel-franja-mas-informacion-colpensiones {
    grid-area: left-panel-franja-mas-informacion-colpensiones;
  }

  .right-panel-franja-mas-informacion-colpensiones {
    grid-area: right-panel-franja-mas-informacion-colpensiones;
  }
}

/* -> grid-contenedor-franja-mas-informacion-colpensiones */


/* grid-contenedor-navegacion-modulos-mas-informacion-colpensiones-desktop */

@supports(display: grid ) {

  .grid-contenedor-navegacion-modulos-mas-informacion-colpensiones-desktop {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 333px));
    grid-gap: 40px;
    grid-auto-flow: row;
  }

}

/* -> grid-contenedor-navegacion-modulos-mas-informacion-colpensiones-desktop */


/* grid-contenedor-franja-colpensiones */

@supports(display: grid ) {

  .grid-contenedor-franja-colpensiones {
    display: grid;
    grid-template-columns: 35px 1fr 35px;
    grid-template-areas: "left-panel-franja-colpensiones contenido-franja-colpensiones right-panel-franja-colpensiones";
  }

  @media screen and (min-width: 1210px) { /* 1140px + 35px + 35px */
    .grid-contenedor-franja-colpensiones {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-franja-colpensiones {
    grid-area: contenido-franja-colpensiones;
  }

  .left-panel-franja-colpensiones {
    grid-area: left-panel-franja-colpensiones;
  }

  .right-panel-franja-colpensiones {
    grid-area: right-panel-franja-colpensiones;
  }
}

/* -> grid-contenedor-franja-colpensiones */


/* grid-contenedor-contactos-colpensiones */

@supports(display: grid ) {

  .grid-contenedor-contactos-colpensiones {
    display: grid;
    grid-row-gap: 15px;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-contactos-colpensiones"
                         "contactos-colpensiones"
                         "puntos-atencion-contactos-colpensiones"
                         "copyright-contactos-colpensiones"
                         "logo-ministerio-contactos-colpensiones"
                         "redes-sociales-contactos-colpensiones"
                         "mapa-contactos-colpensiones"
                         "certificacion-contactos-colpensiones";
  }

  @media screen and (min-width: 1200px) {
    .grid-contenedor-contactos-colpensiones {
      display: grid;
      grid-row-gap: 15px;
      grid-template-columns: 7fr 3fr;
      grid-template-areas: "titulo-contactos-colpensiones logo-ministerio-contactos-colpensiones"
                           "contactos-colpensiones ."
                           "puntos-atencion-contactos-colpensiones ."
                           "copyright-contactos-colpensiones ."
                           "redes-sociales-contactos-colpensiones redes-sociales-contactos-colpensiones"
                           "mapa-contactos-colpensiones mapa-contactos-colpensiones"
                           "certificacion-contactos-colpensiones .";
    }
  }

  .titulo-contactos-colpensiones {
    grid-area: titulo-contactos-colpensiones;
  }

  .contactos-colpensiones {
    grid-area: contactos-colpensiones;
  }

  .logo-ministerio-contactos-colpensiones {
    grid-area: logo-ministerio-contactos-colpensiones;
  }

  .puntos-atencion-contactos-colpensiones {
    grid-area: puntos-atencion-contactos-colpensiones;
  }

  .copyright-contactos-colpensiones {
    grid-area: copyright-contactos-colpensiones;
  }

  .redes-sociales-contactos-colpensiones {
    grid-area: redes-sociales-contactos-colpensiones;
  }

  .mapa-contactos-colpensiones {
    grid-area: mapa-contactos-colpensiones;
  }

  .certificacion-contactos-colpensiones {
    grid-area: certificacion-contactos-colpensiones;
  }

}

/* -> grid-contenedor-contactos-colpensiones */


/* grid-contenedor-franja-gov-co-footer */

@supports(display: grid ) {

  .grid-contenedor-franja-gov-co-footer {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-franja-gov-co-footer contenido-franja-gov-co-footer right-panel-franja-gov-co-footer";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-franja-gov-co-footer {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-franja-gov-co-footer {
    grid-area: contenido-franja-gov-co-footer;
  }

  .left-panel-franja-gov-co-footer {
    grid-area: left-panel-franja-gov-co-footer;
  }

  .right-panel-franja-gov-co-footer {
    grid-area: right-panel-franja-gov-co-footer;
  }
}

/* -> grid-contenedor-franja-gov-co-footer */


/* grid-contenedor-contenido-franja-gov-co-footer */

@supports(display: grid ) {

  .grid-contenedor-contenido-franja-gov-co-footer {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "logo-colombia logo-gov-co"
                         "texto-gov-co texto-gov-co";
  }

  @media screen and (min-width: 576px) {
    .grid-contenedor-contenido-franja-gov-co-footer {
      grid-template-columns: auto 1fr 1fr;
      grid-template-areas: "logo-colombia logo-gov-co texto-gov-co";
    }
  }

  .logo-colombia {
    grid-area: logo-colombia;
  }

  .logo-gov-co {
    grid-area: logo-gov-co;
  }

  .texto-gov-co {
    grid-area: texto-gov-co;
  }
}

/* -> grid-contenedor-contenido-franja-gov-co-footer */