@font-face {
  font-family: "Barlow-Bold";
  src: url("../fonts/Barlow-Bold.ttf.woff") format("woff"),
    url("../fonts/Barlow-Bold.ttf.svg#Barlow-Bold") format("svg"),
    url("../fonts/Barlow-Bold.ttf.eot"),
    url("../fonts/Barlow-Bold.ttf.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Barlow-Light";
  src: url("../fonts/Barlow-Light.ttf.woff") format("woff"),
    url("../fonts/Barlow-Light.ttf.svg#Barlow-Light") format("svg"),
    url("../fonts/Barlow-Light.ttf.eot"),
    url("../fonts/Barlow-Light.ttf.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Barlow-Medium";
  src: url("../fonts/Barlow-Medium.ttf.woff") format("woff"),
    url("../fonts/Barlow-Medium.ttf.svg#Barlow-Medium") format("svg"),
    url("../fonts/Barlow-Medium.ttf.eot"),
    url("../fonts/Barlow-Medium.ttf.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
.clearfix {
  clear: both;
  float: none;
}
.thumbnail_ico {
  float: right;
  display: block;
  width: 25px;
  height: 25px;
  margin: 10px;
  padding: 0px;
}
.alignIcono {
  padding: 0px;
  /*Espacio entre cada elemento*/
  margin: 12px;
}

.formato1 {
  font-family: "Barlow-Light";
  font-size: 39.34pt;
}

.formato2 {
  font-family: "Barlow-Bold";
  /* font-weight: 700; */
  font-size: 23px;
  font-size: 34.8pt;
  font-size: 23pt;
}

.barraColores {
  background-image: url("../img/CI/barra_colores.png");
  width: auto;
  height: 25px;
  padding-bottom: 10px;
  background-size: contain;
  /* position: relative; */
}

.intro_resci2020 {
  background-image: url("../img/CI/fondo_cuadrado.png");
  width: auto;
  height: 770px;

  background-size: cover;
}

.cuadro_intro_resci2020 {
  /* border: 5px solid black; */
  background-color: #eeeee4;
  width: 850px;
  height: 620px;

  margin-left: 100px;
  margin-right: 100px;
  margin-top: 70px;
  position: absolute;
}


.intro_resci2021 {
  background-image: url("../img/CI/fondo_cuadrado.png");
  width: auto;
  height:1100px;
  background-size: cover;
}
.cuadro_intro_resci2021 {
  /* border: 5px solid black; */
  background-color: #eeeee4;
  width: 850px;
  height: 1000px;

  margin-left: 100px;
  margin-right: 100px;
  margin-top: 70px;
  position: absolute;
}

.texto1_cuadro2021 {
  font-family: "Barlow-Medium";
  font-size: 21pt;
  font-size: medium;

  text-align: justify;
  margin-left: 40px;
  margin-right: 40px;
  /* line-height: 112%; */
  line-height: 120%;
  margin-top: 50px;
}
.resobtenidos_ci2021 {
  background-image: url("../img/CI/fondo_cuadrado.png");
  width: auto;
  /* background-size: cover; */
  height: 1200px;
  background-size: contain;
}



.titulo_cuadro {
  font-family: "Barlow-Light";
  font-size: 40pt;
  margin-top: 50px;
}

.texto1_cuadro {
  font-family: "Barlow-Medium";
  font-size: 21pt;
  font-size: medium;

  text-align: justify;
  margin-left: 40px;
  margin-right: 40px;
  /* line-height: 112%; */
  line-height: 120%;
  margin-top: 50px;
}
.cuadro_verde {
  border: 2px solid rgb(33, 204, 18);
  background-color: white;
  text-align: justify;
  /* line-height: 120%; */
  margin-left: 60px;
  margin-right: 60px;
  margin-top: 80px;
}

.cuadro_verde p {
  font-family: "Barlow-Medium";
  font-size: 21px;
  font-size: medium;

  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.barra_moradaverde {
  background-image: url("../img/CI/barra_moradaverde.png");
  width: auto;
  padding-bottom: 10px;
  background-size: contain;
}

.componentes_ci {
  border: 1px solid black;
  background-color: white;
  width: auto;
  height: 950px;
  height: auto;
}
.titulo_componenteci {
  font-family: "Barlow-Light";
  font-size: 35pt;
  text-align: center;
  margin-top: 40px;
}

/* Contenedor de componentes ITEM */
.componenteci_item {
  /* border: 5px solid red; */
  height: 250px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "imagen_componenteci numero_componenteci titulo_componenteci_item ."
    "imagen_componenteci numero_componenteci texto_componenteci ."
    ". . . .";
}
.imagen_componenteci {
  /* border: 1px solid black; */
  grid-area: imagen_componenteci;
  width: 100px;
  height: 100px;
  margin-top: 50px;
  margin-left: 120px;
}
.imagen_componenteci img {
  width: 100px;
  height: 120px;
}

.numero_componenteci {
  grid-area: numero_componenteci;
  width: 100px;
  height: 100px;
  margin-top: 50px;
  margin-left: -60px;
}
.numero_componenteci img {
  margin-top: 25px;
  width: 20px;
  height: 70px;
}
.titulo_componenteci_item {
  grid-area: titulo_componenteci_item;
  margin-left: -330px;
  text-align: left;
  margin-top: 50px;
  font-family: "Barlow-Light";
}
.texto_componenteci {
  grid-area: texto_componenteci;
  margin-left: -330px;
  text-align: justify;
  margin-right: 20px;
  height: 80px;
  font-family: "Barlow-Light";
  font-size: medium;
}
.resobtenidos_ci2020 {
  background-image: url("../img/CI/fondo_cuadrado.png");
  width: auto;
  /* background-size: cover; */
  height: 2900px;
  background-size: contain;
}
.imagen_encabezado_resci {
  background-image: url("../img/CI/linea_azulverde.png");
  width: auto;
  padding-bottom: 180px;
  background-size: cover;
}
.contenedor_encabezado_resci_gen {
  position: absolute;
  /* padding-left: 280px; */
  margin-top: -172px;
  margin-left: 233px;
  margin-left: 227px;
}
.contenedor_encabezado_resci {
  /* Fondo en forma de trapecio */
  width: 550px;
  width: 613px;
  height: 0px;
  border-right: 60px solid transparent;
  border-right: 57px solid transparent;
  border-left: 60px solid transparent;
  border-left: 57px solid transparent;
  /* border-top: 100px solid gainsboro; */
  border-top: 80px solid #e5e7e9;
}
.titulo_encabezado_resci {
  /* text-align: center; */
  font-family: "Barlow-Light";
  margin-top: -80px;
  margin-top: -60px;
  font-size: x-large;
}
.dependecias {
  width: auto;
  height: 70px;
  border: 1px solid black;
  background-color: #e5e7e9;
  text-align: center;
  font-family: "Barlow-Light";
  font-size: medium;
  font-size: 30pt;
  margin-left: 70px;
  margin-right: -10px;
}
.entidades {
  width: auto;
  height: 70px;
  border: 1px solid black;
  background-color: #e5e7e9;
  text-align: center;
  font-family: "Barlow-Light";
  font-size: medium;
  margin-left: -10px;
  margin-right: 70px;
}
.depencia_item {
  margin-top: 10px;
  width: auto;
  margin-left: 70px;
  margin-right: -10px;
}
.entidad_item {
  margin-top: 10px;
  width: auto;
  margin-left: -10px;
  margin-right: 70px;
}
.ubicacion {
  width: auto;
  height: 50px;
  /* border: 1px solid black; */
}
.ubicacion_imagen {
  margin-left: 80px;
  float: left;
}
.ubicacion_titulo {
  font-family: "Barlow-Light";
  font-size: medium;
  margin-left: 120px;
  margin-top: 20px;
}
.ubicacion_texto {
  font-family: "Barlow-Light";
  font-size: medium;
  float: right;
  margin-right: 60px;
  margin-top: -40px;
  font-weight: 700;
}
.correo {
  width: auto;
  height: 80px;
}
.correo_imagen {
  margin-left: 80px;
  float: left;
}
.correo_titulo {
  font-family: "Barlow-Light";
  font-size: medium;
  margin-left: 110px;
  margin-top: 10px;
}
.correo_texto {
  font-family: "Barlow-Light";
  font-size: medium;
  margin-left: 110px;
  margin-top: -20px;
  font-weight: 700;
}
.telefono {
  width: auto;
  height: 80px;
}
.telefono_imagen {
  margin-left: 80px;
  float: right;
}
.telefono_titulo {
  float: right;
  margin-top: 10px;
  margin-right: -60px;
}
.telefono_texto {
  font-family: "Barlow-Light";
  float: right;
  margin-top: 30px;
  margin-right: -150px;
  
}