/*==========================================================================================================================================
  Desarrollador: Angélica María Rodríguez Cabello
  Estilos para la sección QUIÉNES SOMOS
==========================================================================================================================================*/

/* Contenedor para el banner de la sección de QUIÉNES SOMOS */
.quienes-somos-banner-container {
  position: relative;
  text-align: center;
  color: white;
}

/* Imagen del banner de la sección QUIÉNES SOMOS */
#banner-quienes-somos {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* Texto que dirá QUIÉNES SOMOS */
.centered-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-bottom: 4px solid white;
  width: 500px;
}

/* Segunda línea que aparece debajo de QUIÉNES SOMOS */
.second-underline {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-bottom: 8px solid white;
  width: 160px;
}

/* Contenedor de quiénes somos, misión, visión y valores */
.info-general-implan {
  width: 1160px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 1160px;
  grid-template-columns: 1160px;
  height: 480px;
  margin: 0px auto;
  position: relative;
  border-bottom: 5px solid #01835F;
}

/* Pestañas que dicen Qué es el IMPLAN, misión, visión y valores */
#titulos-tabs { -ms-grid-row: 1; -ms-grid-column: 1; }
#que-es-implan, #mision, #vision, #valores{ -ms-grid-row: 2; -ms-grid-column: 1; }

/* Contenedor para el texto y contenedor para la imagen */
.container-left, .container-right {
  padding-top: 5px;
}

/* Contenedor donde irá el texto */
.container-left {
  width: 48%;
  float: left;
  padding-right: 5%;
}

/* Contenedor donde irá la imagen */
.container-right {
  width: 52%;
  float: right;
}

/* Contenedor para el valor y la imagen */
.container-left-50 {
  width: 45%;
  float: left;
}

/* Contenedor para el valor y la imagen */
.container-right-50 {
  width: 50%;
  float: right;
}

/* Agrandamos el contenedor */
.container-extended {
  width: 100%;
}

/* Tabs Quiénes somos, misión, visión y valores */
.tab {
  overflow: hidden;
}

/* Estilos del botón de cada tab */
.tab button {
  background-color: white;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Agregamos efecto al pasar el mouse por el tab */
.tab button:hover {
	border-bottom: 3px solid #01835F;
}

/* Asignamos color al seleccionar un tab */
.tab button.active {
  border-bottom: 3px solid #01835F;
}

/* Contenido de cada tab */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

/* Páginas de misión, visión, valores, qué es */
.tablinks {
  height: 40px;
}

/* Alineamos verticalmente */
.vertical-align {
  padding: 100px 0px;
}

/* Otro estilo de alineado vertical*/
.vertical-align-2 {
  padding: 30px 0px;
}

/* Imágenes de las tabs */
.imagen-tabs {
  width: 100%;
}

/* Contenido del valor */
.valores-c {
  height: 90px;
}

/* Container de la imagen del valor */
.imagen-valores-div {
  float: left;
  width: 15%;
}

/* Tamaño de la imagen del valor */
.imagen-valor {
  height: 60px;
  width: 60px;
}

/* Contenido del valor */
.texto-valores {
  float: right;
  width: 85%;
}

/* Cuadrícula de la junta de gobierno */
.junta-gobierno-instituto {
  width: 1160px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 1160px;
  grid-template-columns: 1160px;
  height: auto;
  margin: 0px auto;
  position: relative;
}

/* Posicionamos elementos de la junta de gobierno (imagen) */
#titulo-junta-gobierno { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1; }
#img-junta { -ms-grid-row: 2; -ms-grid-column: 1; grid-row: 2; grid-column: 1; }

/* Medidas de la imagen de la junta de gobierno */
#imagen-junta-gobierno {
  width: 1160px;
  height: 450px;
}

/* Cuadrícula de los integrantes de la junta de gobierno */
.integrantes {
  width: 1160px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 290px 290px 290px 290px;
  grid-template-columns: 290px 290px 290px 290px;
  height: auto;
  margin: 0px auto;
  position: relative;
}

/* Puesto de cada coordinador */
.puesto {
  width: 70%;
  margin: 0 auto;
}

/* Posicionamos cada integrante d ela junta de gobierno */
#titulo { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1 / span 4; -ms-grid-column-span: 4; height: 40px; }
#int1 { -ms-grid-row: 2; -ms-grid-column: 1; }
#int2 { -ms-grid-row: 2; -ms-grid-column: 2; }
#int3 { -ms-grid-row: 2; -ms-grid-column: 3; }
#int4 { -ms-grid-row: 2; -ms-grid-column: 4; }
#int5 { -ms-grid-row: 3; -ms-grid-column: 1; }
#int6 { -ms-grid-row: 3; -ms-grid-column: 2; }
#int7 { -ms-grid-row: 3; -ms-grid-column: 3; }
#int8 { -ms-grid-row: 3; -ms-grid-column: 4; }
#int9 { -ms-grid-row: 4; -ms-grid-column: 1; }
#int10 { -ms-grid-row: 4; -ms-grid-column: 2; }
#int11 { -ms-grid-row: 4; -ms-grid-column: 3; }
#int12 { -ms-grid-row: 4; -ms-grid-column: 4; }
#int13 { -ms-grid-row: 5; -ms-grid-column: 1; }
#int14 { -ms-grid-row: 5; -ms-grid-column: 2; }
#int15 { -ms-grid-row: 5; -ms-grid-column: 3; }
#int16 { -ms-grid-row: 5; -ms-grid-column: 4; }
#int17 { -ms-grid-row: 6; -ms-grid-column: 1; }
#int18 { -ms-grid-row: 6; -ms-grid-column: 2; }
#int19 { -ms-grid-row: 6; -ms-grid-column: 3; }
#int20 { -ms-grid-row: 6; -ms-grid-column: 4; }

/* Cuadrícula del director y los coordinadores */
.nuestro-equipo {
  width: 1160px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 387px 387px 386px;
  grid-template-columns: 387px 387px 386px;
  height: auto;
  margin: 0px auto;
  position: relative;
}

/* Posicionamos elementos de nuestro equipo */
.titulo-nuestro-equipo { -ms-grid-row: 1; -ms-grid-column: 1; grid-column: 1 / span 3; -ms-grid-column-span: 3; height: 80px; }
.imagen-director { -ms-grid-row: 2; -ms-grid-column: 1; padding-bottom: 20px; }
.director { -ms-grid-row: 2; -ms-grid-column: 2; grid-column: 2 / span 2; -ms-grid-column-span: 2; padding: 0px 60px; padding-bottom: 20px;}
.coordinador1 { -ms-grid-row: 3; -ms-grid-column: 1; padding: 10px 0px; }
.coordinador2 { -ms-grid-row: 3; -ms-grid-column: 2; padding: 10px 0px; }
.coordinador3 { -ms-grid-row: 3; -ms-grid-column: 3; padding: 10px 0px; }
.coordinador4 { -ms-grid-row: 4; -ms-grid-column: 1; padding: 10px 0px; }
.coordinador5 { -ms-grid-row: 4; -ms-grid-column: 2; padding: 10px 0px; }
.coordinador6 { -ms-grid-row: 4; -ms-grid-column: 3; padding: 10px 0px; }
.coordinador7 { -ms-grid-row: 5; -ms-grid-column: 2; padding: 10px 0px; }

  /* Tablets */
@media only screen and (max-width: 1200px) {
  /* Contenedor para el banner de la sección de QUIÉNES SOMOS e imagen */
  #banner-quienes-somos, .quienes-somos-banner-container {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  /* Centramos texto */
  .centered-text {
    top: 35%;
    width: 300px;
  }

  /* Segunda línea que aparece debajo de QUIÉNES SOMOS */
  .second-underline {
    top: 57%;
    width: 100px;
  }

  /* Contenedor de quiénes somos, misión, visión y valores */
  .info-general-implan {
    width: 582px;
    -ms-grid-columns: 582px;
    grid-template-columns: 582px;
    height: auto;
  }

  /* Contenedor para el texto y contenedor para la imagen */
  .container-left, .container-right, .container-left-50, .container-right-50   {
    width: 100%;
  }

  /* Cuadrícula de la junta de gobierno */
  .junta-gobierno-instituto {
    width: 582px;
    -ms-grid-columns: 582px;
    grid-template-columns: 582px;
  }

  /* Reasignamos medidas a la imagen de la junta de gobierno */
  #imagen-junta-gobierno {
    width: 100%;
    height: 230px;
  }

  /* Cuadrícula de director y coordinadores */
  .integrantes {
    width: 582px;
    -ms-grid-columns: 291px 291px;
    grid-template-columns: 291px 291px;
  }

  /* Posicionamos al director y los coordinadores */
  #titulo { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; height: 40px; }
  #int1 { -ms-grid-row: 2; -ms-grid-column: 1; }
  #int2 { -ms-grid-row: 2; -ms-grid-column: 2; }
  #int3 { -ms-grid-row: 3; -ms-grid-column: 1; }
  #int4 { -ms-grid-row: 3; -ms-grid-column: 2; }
  #int5 { -ms-grid-row: 4; -ms-grid-column: 1; }
  #int6 { -ms-grid-row: 4; -ms-grid-column: 2; }
  #int7 { -ms-grid-row: 5; -ms-grid-column: 1; }
  #int8 { -ms-grid-row: 5; -ms-grid-column: 2; }
  #int9 { -ms-grid-row: 6; -ms-grid-column: 1; }
  #int10 { -ms-grid-row: 6; -ms-grid-column: 2; }
  #int11 { -ms-grid-row: 7; -ms-grid-column: 1; }
  #int12 { -ms-grid-row: 7; -ms-grid-column: 2; }
  #int13 { -ms-grid-row: 8; -ms-grid-column: 1; }
  #int14 { -ms-grid-row: 8; -ms-grid-column: 2; }
  #int15 { -ms-grid-row: 9; -ms-grid-column: 1; }
  #int16 { -ms-grid-row: 9; -ms-grid-column: 2; }
  #int17 { -ms-grid-row: 10; -ms-grid-column: 1; }
  #int18 { -ms-grid-row: 10; -ms-grid-column: 2; }
  #int19 { -ms-grid-row: 11; -ms-grid-column: 1; }
  #int20 { -ms-grid-row: 11; -ms-grid-column: 2; }

  /* Cuadrícula de nuestro equipo */
  .nuestro-equipo {
    width: 582px;
    -ms-grid-columns: 582px;
    grid-template-columns: 582px;
  }

  /* Reasignamos medidas a la imagen del director */
  .imagen-director, .director {
    width: 100%;
    float: none;
  }

  /* Reposicionamos director y coordinadores */
  .titulo-nuestro-equipo { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; height: 80px; }
  .imagen-director { -ms-grid-row: 2; -ms-grid-column: 1; padding-bottom: 20px; text-align: center; }
  .director { -ms-grid-row: 3; -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; padding: 0px 60px; padding-bottom: 20px;}
  .coordinador1 { -ms-grid-row: 4; -ms-grid-column: 1; padding: 10px 0px; }
  .coordinador2 { -ms-grid-row: 5; -ms-grid-column: 1; padding: 10px 0px; }
  .coordinador3 { -ms-grid-row: 6; -ms-grid-column: 1; padding: 10px 0px; }
  .coordinador4 { -ms-grid-row: 7; -ms-grid-column: 1; padding: 10px 0px; }
  .coordinador5 { -ms-grid-row: 8; -ms-grid-column: 1; padding: 10px 0px; }
  .coordinador6 { -ms-grid-row: 9; -ms-grid-column: 1; padding: 10px 0px; }
  .coordinador7 { -ms-grid-row: 10; -ms-grid-column: 1; padding: 10px 0px; }
}

  /* Celulares */
@media only screen and (max-width: 615px) {

  /* Contenedor para el texto y contenedor para la imagen */
  .container-left, .container-right, .container-left-50, .container-right-50   {
    width: 100%;
  }

  /* Padding a la imagen del director */
  .director {
    padding: 0px 20px;
  }

  /* Contenedor para el banner de la sección de QUIÉNES SOMOS e imagen*/
  #banner-quienes-somos, .quienes-somos-banner-container {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  /* Cambiamos tamaño de letra */
  .bp-28px{
    font-size: 20px;
  }

  /* Centramos texto */
  .centered-text {
    top: 35%;
    width: 230px;
  }

  /* Segunda línea que aparece debajo de QUIÉNES SOMOS */
  .second-underline {
    top: 60%;
    width: 100px;
  }

  /* Contenedor de quiénes somos, misión, visión y valores */
  .info-general-implan {
    width: auto;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
  }

  /* Tabs Quiénes somos, misión, visión y valores */
  .tab {
    text-align: center;
    margin: 0 auto;
  }

  /* Estilos del botón de cada tab */
  .tab button{
    display: block;
    text-align: center;
    float: none;
    margin: 0 auto;
  }

  /* Container de la imagen del valor */
  .imagen-valores-div {
    width: 15%;
  }

  /* Tamaño de la imagen del valor */
  .imagen-valor {
    width: 100%;
    height: 100%;
  }

  /* Contenido del valor */
  .texto-valores {
    width: 85%;
    padding-left: 20px;
  }

  /* Cuadrícula de la junta de gobierno */
  .junta-gobierno-instituto {
    width: 95%;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
  }

  /* Contenido del valor */
  .valores-c {
    height: auto;
    padding-bottom: 10px;
  }

  /* Quitamos padding */
  #titulo-junta-gobierno, #img-junta {
    padding: 0px;
  }

  /* Reasignamos medidas a la imagen de la junta de gobierno */
  #imagen-junta-gobierno {
    width: 100%;
    height: 180px;
  }

  /* Reasignamos cuadrícula de los integrantes del IMPLAN */
  .integrantes {
    width: 290px;
    -ms-grid-columns: 290px;
    grid-template-columns: 290px;
  }

  /* Posicionamos elementos de la junta de gobierno */
  #titulo { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; height: 40px; }
  #int1 { -ms-grid-row: 2; -ms-grid-column: 1; }
  #int2 { -ms-grid-row: 3; -ms-grid-column: 1; }
  #int3 { -ms-grid-row: 4; -ms-grid-column: 1; }
  #int4 { -ms-grid-row: 5; -ms-grid-column: 1; }
  #int5 { -ms-grid-row: 6; -ms-grid-column: 1; }
  #int6 { -ms-grid-row: 7; -ms-grid-column: 1; }
  #int7 { -ms-grid-row: 8; -ms-grid-column: 1; }
  #int8 { -ms-grid-row: 9; -ms-grid-column: 1; }
  #int9 { -ms-grid-row: 10; -ms-grid-column: 1; }
  #int10 { -ms-grid-row: 11; -ms-grid-column: 1; }
  #int11 { -ms-grid-row: 12; -ms-grid-column: 1; }
  #int12 { -ms-grid-row: 13; -ms-grid-column: 1; }
  #int13 { -ms-grid-row: 14; -ms-grid-column: 1; }
  #int14 { -ms-grid-row: 15; -ms-grid-column: 1; }
  #int15 { -ms-grid-row: 16; -ms-grid-column: 1; }
  #int16 { -ms-grid-row: 17; -ms-grid-column: 1; }
  #int17 { -ms-grid-row: 18; -ms-grid-column: 1; }
  #int18 { -ms-grid-row: 19; -ms-grid-column: 1; }
  #int19 { -ms-grid-row: 20; -ms-grid-column: 1; }
  #int20 { -ms-grid-row: 21; -ms-grid-column: 1; }

  /* Contenedor de la sección de Nuestro Equipo */
  .nuestro-equipo {
    width: 100%;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
  }
}