/* Este es el contenedor de la página principal */
.layout {
  width: 100%;
  height: 8300px;
  border: 0px solid black;
  display: flex;
  align-items: left;
  justify-content: space-between;
  flex-direction: column;
}

/* Este es el contenedor de la página principal, que va en la capa segunda o intermedia */
.principal {
  width: 100%;
  height: 8300px;
  border: 0px solid black;
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
/* Este es el header de la pagina principal */
#headerprimario {
  width: 100%;
  height: 14rem;
  border: 0px solid blue;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

#tituloportada {
  width: 80%;
  height: 50%;
  border: 0px solid orangered;
  text-align: center;
  margin-left: 7rem;
}
#titulo {
  font-family: "verdanabold";
  color: var(--color-principal);
  font-size: 4rem;
}
/* Marquesina de frases */
#marquesina {
  width: 65%;
  height: 0.5%;
  border: 0px solid orangered;
  position: absolute;
  margin-top: 12%;
  margin-left: 10%;
}
#titulofrases {
  font-family: "verdana";
  color: black;
  font-size: 2.2rem;
}

/* Contenedor con el resto de elementos de la pagina */
main {
  width: 100%;
  height: 93%;
  border: 0px solid blue;
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
/* Contenedor de los titulos y de la imagen de palabras */
section {
  width: 100%;
  height: 30%;
  border: 0px solid greenyellow;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 1%;
  margin-bottom: 1%;
}
/* Titulo de "QUIENES SOMOS" , de "SOCIOS Y ENTRENADORES" y de "ENTRENADORES Y COACHES" */
#quienessomos {
  width: 35%;
  height: 4%;
  margin-left: 12%;
  border: 0px solid orchid;
  text-align: center;
}

#tituloquienessomos {
  font-family: "verdanabold";
  font-size: 2.1rem;
  color: var(--color-principal);
  border: 0px solid red;
}

/* comtenedor de la imagen de palabras cruzadas */
#contenedorpalabras {
  width: 50%;
  height: 20%;
  border: 0px solid orangered;
  margin-left: 7%;
  margin-top: 1%;
}
#palabras {
  width: 100%;
}

/* contenedor de empresa */
#empresa {
  width: 80%;
  height: 80%;
  border: 0px solid blueviolet;
  margin-left: 15%;
  margin-top: 1.5rem;
}
#cajatituloempresa {
  width: 100%;
  height: 4rem;
  border: 0px solid black;
  text-align: center;
  line-height: 0.3;
}
#tituloempresa {
  font-family: "verdanabold";
  font-size: 2.5rem;
  color: var(--color-principal);
}
#cajatextoempresa {
  width: 97%;
  height: 93%;
  border: 0px solid olivedrab;
  text-align: justify;
  padding: 15px;
}
#textoempresa {
  font-family: "cambria";
  font-size: 1.3rem;
  line-height: 1.5;
}

#equipo {
  margin-left: 20%;
}
.fichas {
  width: 85%;
  height: 80%;
  border: 0px solid aqua;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  margin-left: 10%;
  margin-top: 1rem;
}
/* Ficha de las diferentes personas */
#fichavalen,
#fichaandres,
#fichacesar,
#fichaernesto,
#fichapaco,
#fichaibi {
  width: 100%;
  border: 0px solid violet;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
}
#fichavalen {
  height: 6%;
}
#fichaandres {
  height: 14%;
}
#fichacesar {
  height: 23%;
}
#fichaernesto {
  height: 10%;
}
#fichapaco {
  height: 18%;
}
#fichaibi {
  height: 13%;
}

/* Dimensiones de las fotos de la diferentes personas */
#fotovalen {
  border: 0px solid red;
  width: 28%;
  margin-top: 2rem;
}

#fotoandres {
  border: 0px solid red;
  height: 40%;
  margin-top: 2rem;
}
#fotocesar {
  border: 0px solid red;
  width: 20%;
  margin-left: 6%;
  margin-top: 2rem;
}
#fotoernesto {
  border: 0px solid red;
  width: 28%;
  margin-top: 2rem;
}
#fotopaco {
  border: 0px solid red;
  width: 27%;
  margin-top: 2rem;
}
#fotoibi {
  border: 0px solid red;
  width: 35%;
  margin-top: 2rem;
}

/* Contenedores de la información de las diferentes personas */
#infovalen,
#infoandres,
#infocesar,
#infoernesto,
#infopaco,
#infoibi {
  width: 70%;
  height: 100%;
  border: 0px solid black;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  margin-left: 5%;
}

/* Contenedor de los nombres de las diferentes personas */
#cajatitulonombre {
  width: 100%;
  height: 4rem;
  border: 0px solid rgb(29, 241, 29);
  text-align: center;
}
#titulonombre {
  font-family: "verdanabold";
  font-size: 1.7rem;
  color: var(--color-principal);
  line-height: 0.5;
}

/* Contenedor del texto de las diferentes personas */
#cajatextovalen,
#cajatextoandres,
#cajatextocesar,
#cajatextoernesto,
#cajatextopaco,
#cajatextoibi {
  width: 100%;
  height: 97%;
  border: 0px solid blueviolet;
  text-align: justify;
}

/* Texto de las diferentes personas */
#textoficha {
  font-family: "calibri";
  font-size: 1.3rem;
  line-height: 1.5;
}
li {
  margin-left: 0;
}
li::marker {
  color: var(--color-principal);
}
/* Titulo de "ENTRENADORES Y COACHES" */
#titulocoaches {
  font-family: "verdanabold";
  font-size: 2.2rem;
  color: var(--color-principal);
}

/* Para dispositivos de escritorio con resolución superior a 1451px de ancho 

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

	body{
		width:1900px;
		height:7150px;
	}
*/
/* Este es el contenedor de la página principal, que va en la capa segunda o intermedia 
	#principalquienessomos{
		width:1900px;
	}
*/
/* Este es el header de la pagina principal 	
	#headerprimario{
		width:1900px;
	}
*/
/* Contenedor con el resto de elementos de la pagina 			
	main{
		width: 1900px;
	}
*/
/* Footer que contiene: politicas, redes sociales y contacto
	footer{
		width:1900px;
	}
}
 */

/* PARA DISPOSITIVOS (IPAD) CON RESOLUCION HASTA 1024PX DE ANCHO  */
@media screen and (max-width: 1024px) {
  /* Este es el contenedor de la página principal, que va en la capa segunda o intermedia */
  .layout {
    width: 100%;
    height: 9500px;
  }
  .principal {
    width: 100%;
    height: 9500px;
  }
  header {
    height: 12rem;
  }
  #tituloportada {
    height: 30%;
  }
  #titulo {
    font-size: 3rem;
  }
  /* Marquesina de frases */
  #marquesina {
    margin-top: 16%;
  }
  #titulofrases {
    font-size: 1.8rem;
  }
  /* Contenedor con el resto de elementos de la pagina */
  main {
    width: 100%;
    height: 93%;
  }
  /* Contenedor de los titulos y de la imagen de palabras */
  section {
    width: 100%;
    height: 27%;
    margin-top: 0.5%;
  }
  /* Titulo de "QUIENES SOMOS" , de "SOCIOS Y ENTRENADORES" y de "ENTRENADORES Y COACHES" */
  #quienessomos {
    width: 50%;
    height: 2%;
    margin-left: 10%;
  }
  #tituloquienessomos {
    font-size: 1.8rem;
  }
  /* comtenedor de la imagen de palabras cruzadas */
  #contenedorpalabras {
    height: 10%;
  }
  #empresa {
    width: 75%;
    height: 80%;
    margin-left: 20%;
    margin-top: 1.5rem;
  }
  #cajatituloempresa {
    width: 100%;
    height: 4rem;
    line-height: 0.3;
  }
  /* contenedor de empresa */
  #tituloempresa {
    font-size: 2.2rem;
  }

  #textoempresa {
    font-size: 1.2rem;
    line-height: 1.5;
  }
  #equipo {
    margin-left: 15%;
  }
  .fichas {
    width: 80%;
    height: 72%;
    margin-left: 13%;
    margin-top: 2rem;
  }
  /* Ficha de las diferentes personas */
  #fichavalen {
    height: 5%;
  }
  #fichaandres {
    height: 17%;
  }
  #fichacesar {
    height: 25%;
  }
  #fichaernesto {
    height: 11%;
  }
  #fichapaco {
    height: 19%;
  }
  #fichaibi {
    height: 13%;
  }

  /* Dimensiones de las fotos de la diferentes personas */
  #fotovalen {
    width: 29%;
  }
  #fotoandres {
    height: 19%;
  }
  #fotocesar {
    width: 20%;
    margin-left: 6%;
  }
  #fotoernesto {
    width: 28%;
  }
  #fotopaco {
    width: 27%;
  }
  #fotoibi {
    width: 35%;
  }

  /* Contenedores de la información de las diferentes personas */
  #infovalen,
  #infoandres,
  #infocesar,
  #infoernesto,
  #infopaco,
  #infoibi {
    margin-left: 5%;
  }

  /* Contenedor de los nombres de las diferentes personas */
  #titulonombre {
    font-size: 1.5rem;
    line-height: 0.5;
  }

  /* Texto de las diferentes personas */
  #textoficha {
    font-size: 1.2rem;
    line-height: 1.5;
  }
  /* Titulo de "ENTRENADORES Y COACHES" */
  #titulocoaches {
    font-size: 2.2rem;
  }
}

/* PARA DISPOSITIVOS (IPAD) CON RESOLUCION HASTA  767PX DE ANCHO  */
@media screen and (max-width: 900px) {
  .layout {
    height: 10400px;
  }
  .principal {
    height: 10400px;
  }
  #titulo {
    font-size: 2.7rem;
  }
  #titulofrases {
    font-size: 1.6rem;
  }
  main {
    height: 96%;
  }
  section {
    height: 30%;
  }
  #tituloquienesomos {
    font-size: 0.7rem;
  }
  .fichas {
    height: 74%;
  }
  #fotoandres {
    height: 17%;
  }
  #fotoibi {
    width: 32%;
  }
  #textoficha {
    font-size: 1.15rem;
  }
}

/* PARA DISPOSITIVOS  MOVILES CON RESOLUCION HASTA  768PX DE ANCHO  */
@media screen and (max-width: 768px) {
  /* Este es el contenedor de la página principal, que va en la capa segunda o intermedia */
  .layout {
    height: 7000px;
  }
  .principal {
    height: 7000px;
    margin-top: 3.5rem;
  }

  /* Este es el header de la pagina principal */
  #headerprimario {
    height: 8rem;
  }

  #tituloportada {
    width: 100%;
    height: 40%;
    margin-left: 4%;
  }
  #titulo {
    font-size: 2rem;
  }
  /* Marquesina de frases */
  #marquesina {
    width: 70%;
    height: 0.3%;
    margin-top: 13%;
    margin-left: 5%;
  }
  #titulofrases {
    font-size: 1.2rem;
  }

  /* Contenedor con el resto de elementos de la pagina */
  main {
    height: 94%;
  }
  /* Contenedor de los titulos y de la imagen de palabras */
  section {
    height: 30%;
  }
  /* Titulo de "QUIENES SOMOS" , de "SOCIOS Y ENTRENADORES" y de "ENTRENADORES Y COACHES" */
  #quienessomos {
    width: 70%;
    height: 4%;
    margin-left: 4%;
  }

  #tituloquienessomos {
    font-size: 1.2rem;
  }

  /* contenedor de la imagen de palabras cruzadas */
  #contenedorpalabras {
    width: 60%;
    margin-left: 10%;
  }

  /* contenedor de empresa */
  #empresa {
    width: 90%;
    height: 75%;
    margin-left: 2%;
  }
  #cajatituloempresa {
    height: 3rem;
  }
  #tituloempresa {
    font-size: 1.1rem;
  }
  #cajatextoempresa {
    width: 98%;
    height: 95%;
    padding: 1.5%;
  }
  #textoempresa {
    font-size: 1rem;
    line-height: 1.5;
  }
  .fichas {
    width: 95%;
    height: 70%;
    margin-left: 0.3rem;
    margin-bottom: 2rem;
  }
  /* Ficha de las diferentes personas */
  #fichavalen,
  #fichaandres,
  #fichacesar,
  #fichaernesto,
  #fichapaco,
  #fichaibi {
    margin-left: 0;
  }
  #fichavalen {
    height: 5%;
  }
  #fichaandres {
    height: 16%;
  }
  #fichacesar {
    height: 23%;
  }
  #fichaernesto {
    height: 10%;
  }
  #fichapaco {
    height: 18%;
  }
  #fichaibi {
    height: 13%;
  }

  /* Dimensiones de las fotos de la diferentes personas */
  #fotovalen {
    width: 25%;
  }
  #fotoandres {
    height: 22%;
  }
  #fotocesar {
    width: 20%;
    margin-left: 0;
  }
  #fotoernesto {
    width: 25%;
  }
  #fotopaco {
    width: 22%;
  }
  #fotoibi {
    width: 25%;
  }

  /* Contenedores de la información de las diferentes personas */
  #infovalen,
  #infoandres,
  #infocesar,
  #infoernesto,
  #infopaco,
  #infoibi {
    width: 80%;
    margin-left: 0;
  }

  /* Contenedor de los nombres de las diferentes personas */
  #cajatitulonombre {
    height: 2rem;
    line-height: 0.5;
  }
  #titulonombre {
    font-size: 1rem;
  }

  /* Contenedor del texto de las diferentes personas */
  #cajatextovalen,
  #cajatextoandres,
  #cajatextocesar,
  #cajatextoernesto,
  #cajatextopaco,
  #cajatextoibi {
    height: calc(100% - 1.8rem);
  }

  /* Texto de las diferentes personas */
  #textoficha {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Titulo de "ENTRENADORES Y COACHES" */
  #titulocoaches {
    font-size: 1.3rem;
  }
}

/* PARA DISPOSITIVOS  MOVILES CON RESOLUCION HASTA  650PX DE ANCHO  */
@media screen and (max-width: 650px) {
  /* Este es el contenedor de la página principal, que va en la capa segunda o intermedia */
  .layout {
    height: 8700px;
  }
  .principal {
    height: 8700px;
    margin-top: 3.5rem;
  }
  #marquesina {
    margin-top: 17%;
  }
  section {
    height: 36%;
  }
  #quienessomos {
    height: 2.5%;
  }
  .fichas {
    height: 66%;
  }
  #fichaandres {
    height: 19%;
  }
  #fichacesar {
    height: 26%;
  }
  #fichaernesto {
    height: 11.5%;
  }
  #fichapaco {
    height: 21%;
  }
  #fotoandres {
    height: 9%;
  }
}

/* PARA DISPOSITIVOS  MOVILES CON RESOLUCION HASTA  560PX DE ANCHO  */

@media screen and (max-width: 560px) {
  /* Este es el contenedor de la página principal, que va en la capa segunda o intermedia */
  .layout {
    height: 8700px;
  }
  .principal {
    height: 8700px;
    margin-top: 3.5rem;
  }
  section {
    height: 33%;
  }
  #fichaandres {
    height: 20%;
  }
  #fichacesar {
    height: 27%;
  }
  #fichaernesto {
    height: 12%;
  }
  #fichapaco {
    height: 22%;
  }
}

/* PARA DISPOSITIVOS  MOVILES CON RESOLUCION HASTA  480PX DE ANCHO  */
@media screen and (max-width: 480px) {
  /* Este es el contenedor de la página principal, que va en la capa segunda o intermedia */
  .layout {
    height: 6500px;
  }
  .principal {
    height: 6500px;
    margin-top: 4rem;
  }
  /* Este es el header de la pagina principal */
  #headerprimario {
    height: 6rem;
  }
  #tituloportada {
    width: 70%;
    height: 20%;
    margin-left: 4%;
    line-height: 0.5;
  }
  #titulo {
    font-size: 1.1rem;
  }
  /* Marquesina de frases */
  #marquesina {
    width: 85%;
    height: 0.3%;
    margin-top: 14%;
    margin-left: 4%;
  }
  #titulofrases {
    font-size: 0.6rem;
  }
  /* Contenedor con el resto de elementos de la pagina */
  main {
    height: 95%;
  }
  /* Contenedor de los titulos y de la imagen de palabras */
  section {
    height: 30%;
    margin-top: 0.5%;
  }
  /* Titulo de "QUIENES SOMOS" , de "SOCIOS Y ENTRENADORES" y de "ENTRENADORES Y COACHES" */
  #quienessomos {
    width: 60%;
    height: 2%;
    margin-left: 10%;
  }
  #tituloquienessomos {
    font-size: 0.8rem;
  }
  /* comtenedor de la imagen de palabras cruzadas */
  #contenedorpalabras {
    width: 75%;
    height: 12%;
    margin-left: 5%;
  }
  /* contenedor de empresa */
  #empresa {
    width: 90%;
    height: 83%;
    margin-left: 2%;
  }
  #cajatituloempresa {
    width: 100%;
    height: 1.6rem;
  }
  #tituloempresa {
    font-size: 0.8rem;
  }
  #cajatextoempresa {
    width: 95%;
    height: 96%;
  }
  #textoempresa {
    font-size: 0.7rem;
    line-height: 1.1;
  }
  .fichas {
    width: 82%;
    height: calc(74% - 2rem);
    margin-left: 0.3rem;
    margin-bottom: 2rem;
  }
  #equipo {
    height: 0.6%;
  }
  /* Ficha de las diferentes personas */
  #fichavalen,
  #fichaandres,
  #fichacesar,
  #fichaernesto,
  #fichapaco,
  #fichaibi {
    margin-left: 1%;
  }
  #fichavalen {
    height: 4%;
  }
  #fichaandres {
    height: 18%;
  }
  #fichacesar {
    height: 28%;
  }
  #fichaernesto {
    height: 10%;
  }
  #fichapaco {
    height: 18%;
  }
  #fichaibi {
    height: 15%;
  }
  /* Dimensiones de las fotos de la diferentes personas */
  #fotovalen {
    width: 29%;
  }
  #fotoandres {
    height: 13%;
  }
  #fotocesar {
    width: 19%;
    margin-left: 2%;
  }
  #fotoernesto {
    width: 27%;
  }
  #fotopaco {
    width: 23%;
  }
  #fotoibi {
    width: 32%;
  }
  /* Contenedores de la información de las diferentes personas */
  #infovalen,
  #infoandres,
  #infocesar,
  #infoernesto,
  #infopaco,
  #infoibi {
    width: 80%;
    height: 100%;
    margin-left: 1%;
  }

  /* Contenedor de los nombres de las diferentes personas */
  #cajatitulonombre {
    height: 1.6rem;
  }
  #titulonombre {
    font-size: 0.7rem;
  }

  /* Contenedor del texto de las diferentes personas */
  #cajatextovalen,
  #cajatextoandres,
  #cajatextocesar,
  #cajatextoernesto,
  #cajatextopaco,
  #cajatextoibi {
    height: 97%;
  }
  /* Texto de las diferentes personas */
  #textoficha {
    font-size: 0.7rem;
    line-height: 1.5;
  }
  /* Titulo de "ENTRENADORES Y COACHES" */
  #titulocoaches {
    font-size: 1.1rem;
  }
}

/* PARA DISPOSITIVOS  MOVILES CON RESOLUCION HASTA  405PX DE ANCHO  */
@media screen and (max-width: 405px) {
  /* Este es el contenedor de la página principal, que va en la capa segunda o intermedia */
  .layout {
    height: 6000px;
  }
  .principal {
    height: 6000px;
    margin-top: 3.5rem;
  }
  #tituloportada {
    line-height: 0.5;
  }

  /* Contenedor de los titulos y de la imagen de palabras */
  section {
    height: 20%;
  }

  .fichas {
    height: calc(70% - 2rem);
  }
  #equipo {
    height: 0.6%;
  }

  #fichavalen {
    height: 4%;
  }
  #fichaandres {
    height: 16%;
  }
  #fichacesar {
    height: 28%;
  }
  #fichaernesto {
    height: 9%;
  }
  #fichapaco {
    height: 16%;
  }
  #fichaibi {
    height: 13%;
  }

  /* Contenedor de los nombres de las diferentes personas */
  #titulonombre {
    font-size: 0.7rem;
  }

  /* Texto de las diferentes personas */
  #textoficha {
    font-size: 0.6rem;
  }
}