@charset "UTF-8";
/*---------------------------------------VARIABLES---------------------------------------*/
/*sombra y bordes para textos en blanco*/
/*sombra y bordes para textos en negro*/
/*color bordo de la bandera de Qatar*/
/*---------------------------------------CSS NAVBAR---------------------------------------*/
/*logo de la copa del mundo*/
@import url("https://fonts.cdnfonts.com/css/qatar2022");
.logo {
  margin: 0%;
  padding: 0%; }

/*container del titulo y el logo en el nav*/
.title-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Qatar2022" ,Arial,Helvetica;
  margin: 0%; }

/*estilo del navbar*/
.navbar {
  display: flex;
  width: 100vw;
  position: relative;
  justify-content: space-between;
  align-items: center;
  background-image: url(../assets/bgs/bg_nav.webp);
  background-size: cover;
  font-family: "Qatar2022" ,Arial,Helvetica;
  color: white;
  text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 3px 3px 4px #000000; }

/*estilo del texto del titulo*/
.brand-title {
  margin: .2rem;
  padding: 0px;
  font-size: 2.5vmax; }

/*estilo de los links del navbar*/
.navbar-links {
  height: 100%;
  /*estilo de la lista no ordenada de las paginas del navbar*/
  /*estilo de los elementos de la lista*/ }
  .navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0; }
  .navbar-links li {
    list-style: none;
    height: 100%;
    /*estilo de los links dentro de los elementos de la lista*/ }
    .navbar-links li a {
      display: block;
      text-decoration: none;
      font-family: "Qatar2022" ,Arial,Helvetica;
      color: white;
      font-size: 1.5vmax;
      font-family: 'Qatar2022', Arial, Helvetica, sans-serif;
      padding: 6px; }

/*transicion cuando pasa el cursor sobre una opcion del navbar*/
.navbar-links li a:hover {
  color: gray; }

/*estilo de la lista no ordenada de las paginas del navbar*/
.toggle-button {
  position: absolute;
  top: 20px;
  right: 10px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 19px; }

/*estilo de las 3 barras del menu hamburguesa*/
.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 5px; }

/*media query para vista mobile del navbar*/
@media (max-width: 900px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start; }
  .toggle-button {
    display: flex; }
  .navbar-links {
    display: none;
    width: 100%; }
    .navbar-links ul {
      width: 100%;
      flex-direction: column; }
      .navbar-links ul li {
        text-align: center; }
        .navbar-links ul li a {
          padding: .5rem 1rem;
          font-size: 2vmax; }
  .navbar-links.active {
    display: flex; } }

/*---------------------------------------CSS COUNTDOWN---------------------------------------*/
/*estilo del contador, incluye los nombres de las selecciones*/
.countdown {
  text-align: center;
  font-family: "Qatar2022" ,Arial,Helvetica;
  background-image: url("../assets/bgs/bg_countdown.webp");
  background-position-y: center;
  background-size: cover;
  display: grid;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 4px #000000;
  /*estilo de las banderas dentro del countdown*/ }
  .countdown img {
    width: 15vw;
    height: 10vw;
    max-width: 210px;
    max-height: 140px;
    min-width: 75px;
    min-height: 50px;
    justify-content: center;
    box-shadow: 2px 2px 4px #000000; }

/*estilo del titulo del contador*/
.countdown__title {
  text-align: center;
  font-size: 2.5vmax;
  font-family: "Qatar2022" ,Arial,Helvetica;
  margin: 0;
  margin-top: 10px; }

/*estilo del texto del contador*/
#demo {
  margin-top: 1%;
  color: black;
  font-size: 1.7vmax;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 4px #000000; }

/*estilo del contenedor de las banderas del contador*/
.countdown__banderas {
  display: flex;
  justify-content: center; }

/*estilo del contenedor de los nombres de los paises debajo de las banderas*/
.countdown__teams {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 1%; }

.nombre__paises {
  font-size: 1.7vmax; }

/*estilo de las lineas separadoras*/
hr.solid {
  border: 0.75vmin solid #8A1538;
  background-color: #8A1538;
  opacity: 1;
  margin: 0%; }

/*---------------------------------------CSS INDEX---------------------------------------*/
/*estilo del contenedor del titulo "grupos"*/
.index__titulo__grupos {
  display: flex;
  justify-content: center;
  place-items: center; }

/*estilo de las decoraciones al costado de donde dice grupos*/
.titulo__decoration {
  width: 10vmax; }

/*estilo del titulo que dice Grupos*/
.grupos {
  font-family: "Qatar2022" ,Arial,Helvetica;
  color: #5d0f26;
  font-size: 32px;
  text-align: center;
  margin: 10px;
  margin-left: 4%;
  margin-right: 4%; }

/*estilo del fondo detras de las tablas de posiciones*/
#tablas {
  background-image: url(../assets/bgs/bg_grupos.webp);
  background-size: cover;
  text-align: center;
  margin: 0px; }

/*estilo de los textos de los grupos A-H que estan encima de las tablas*/
.table__caption, .table__caption__historia {
  font-family: "Qatar2022" ,Arial,Helvetica;
  color: white;
  margin: 10px;
  font-size: 20px;
  text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 3px 3px 4px #000000; }

/*estilo que separa las tablas con los grupos en 2 grupos de 4*/
.faseGrupos {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap; }

/*estilo de las tablas de posiciones*/
.tabla {
  background-color: white;
  border: 2px solid #5d0f26;
  font-family: "Qatar2022" ,Arial,Helvetica;
  text-align: center;
  border-collapse: collapse;
  font-size: 16px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  max-width: 300px;
  width: 80vw;
  box-shadow: 2px 2px 4px #000000;
  /*estilo de la las celdas de la tabla*/ }
  .tabla td {
    border: black 1px solid; }

/*estilo que separa las tablas con los grupos en 2 grupos de 4*/
.index__thead {
  background-color: #5d0f26;
  color: white;
  border: black 1px solid; }

/*estilo de los bordes internos de las tablas*/
td {
  padding: 0%; }

/*estilo de la celda contenedora del nombre del pais y la bandera*/
.td__teamNflag {
  display: flex;
  justify-content: left;
  align-items: center;
  margin: 0px; }

/*estilo de las banderas dentro de las tablas*/
.flag {
  width: 20%;
  margin-right: 5%; }

/*estilo del texto acompañando a la bandera dentro de la celda*/
.team {
  padding: 0%;
  margin: 0%; }

/*estilo que agrega el verde a los 2 primeros de cada grupo*/
.clasificados {
  background-color: #5cd138;
  width: 75%; }

/*estilo del texto aclaracion debajo de las tablas de grupos*/
.aclaracion {
  padding-left: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0px;
  font-size: 16px;
  font-family: "Qatar2022" ,Arial,Helvetica;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 4px #000000; }

/*---------------------------------------CSS CALENDARIO---------------------------------------*/
/*estilo de la tabla de los partidos con horarios en calendario*/
.horarios {
  background-color: white;
  border-color: #8A1538;
  font-family: "Qatar2022",Arial,Helvetica;
  text-align: center;
  width: 85vw;
  margin-left: 7.5%;
  border-collapse: collapse;
  min-width: 200px;
  margin-top: 2%;
  margin-bottom: 2%;
  box-shadow: 2px 2px 4px #000000; }

/*estilo de la lista no ordenada de las paginas del navbar*/
.calendarios {
  font-family: "Qatar2022" ,Arial,Helvetica;
  color: #5d0f26;
  font-size: 2.5vmax;
  text-align: center;
  margin: 10px;
  margin-left: 4%;
  margin-right: 4%;
  background-color: white; }

.td__calendario {
  width: 42.5%; }

/*estilo de las decoraciones en el titulo "calendario"*/
.titulo__decoration__calendario {
  width: 9vmax;
  margin: 0%; }

/*estilo de la seccion que contiene todas las tablas*/
.calendario__table {
  background-image: url(../assets/bgs/bg_grupos.webp);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center; }

/*estilo las fechas encima de la tabla con los partidos*/
.table__caption__calendario {
  text-align: center;
  font-size: 2vmax;
  padding-top: 3%;
  font-family: 'Qatar2022', Arial, Helvetica, sans-serif;
  color: black;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 4px #000000; }

/*estilo para el texto de fecha encima de las tablas indicando la fecha en calendario*/
.fechaPartido {
  background-color: black;
  color: white;
  font-size: 2vmax; }

/*estilo de las celdas que contienen los horarios de los partidos en calendario*/
.horario {
  background-color: #5d0f26;
  color: white;
  font-size: 1.5vmax; }

/*estilo de las tablas, cambia el color ya que si es completamente blanco, 
a veces ciertas banderas con blanco se ven mal*/
.horarios {
  background-color: #f1f1f1;
  /*estilo de las celdas dentro de las tabla*/ }
  .horarios td {
    border: black 1px solid; }

/*estilo del contenedor en las celdas que contienen los equipo a la izquierda*/
.calendario__td__local {
  display: flex;
  justify-content: right;
  align-items: center; }

/*estilo del contenedor en las celdas que contienen los equipo a la derecha*/
.calendario__td__visitante {
  display: flex;
  flex-direction: row-reverse;
  justify-content: left;
  align-items: center; }

/*estilo de una celda para que el largo de todas las tablas sea consistente, independientemente
del contenido*/
.td__local {
  width: 40%;
  height: 3vmax; }

/*estilo de la bandera en la celda del equipo a la izquierda*/
.calendario__flag__local {
  width: 20%;
  padding: 0%; }

/*estilo de la bandera en la celda del equipo a la derecha*/
.calendario__flag__visitante {
  width: 20%;
  padding: 0%; }

/*estilo del texto en la celda del equipo a la izquierda*/
.calendario__team__local {
  margin: 0;
  padding-right: 2%;
  font-size: 1.5vmax; }

/*estilo del texto en la celda del equipo a la derecha*/
.calendario__team__visitante {
  margin: 0;
  padding-left: 2%;
  font-size: 1.5vmax; }

/*estilo de las celdas entre equipo y equipo que indican el resultado del partido*/
.calendario__resultado {
  width: 5%;
  min-width: 20px; }

/*---------------------------------------CSS HISTORIA---------------------------------------*/
/*estilo del body de la pagina*/
.body__historia {
  background-image: url(../assets/bgs/bg_grupos.webp);
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center; }

/*estilo del container con la tabla y el carousel*/
.tabla__imagen__historia {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center; }

.td__historia {
  width: 70%; }

/*estilo del titulo encima de la tabla*/
.titulo__historia {
  display: flex;
  justify-content: center;
  align-items: center; }

/*estilo de las decoraciones al costado de donde dice grupos*/
.titulo__decoration__historia {
  width: 8vmax; }

/*estilo de las celdas cabecera de la tabla*/
.tablaHistoria thead {
  background-color: #5d0f26;
  color: white;
  border: black solid 2px; }

/*estilo del titulo de cada tabla*/
.table__caption__historia {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 20px; }

/*estilo del container con la tabla y el carousel*/
.tablaHistoria {
  background-color: white;
  border: 2px solid #5d0f26;
  font-family: "Qatar2022" ,Arial,Helvetica;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  font-size: 18px;
  min-width: 220px;
  width: 80vw;
  margin-bottom: 3%;
  box-shadow: 2px 2px 4px #000000;
  /*estilo de las celdas de las tablas*/ }
  .tablaHistoria td {
    border: 1px solid black; }

/*---------------------------------------CSS R2WC---------------------------------------*/
/*estilo para las tablas en r2wc e historia*/
.tablaEliminatorias, .tablaEliminatoriasEuropa, .tablaEliminatoriasAfrica {
  background-color: white;
  border: 2px solid #5d0f26;
  font-family: "Qatar2022" ,Arial,Helvetica;
  text-align: center;
  border-collapse: collapse;
  font-size: 1.5vmax;
  min-width: 200px;
  width: 30vw;
  margin-bottom: 3%;
  min-height: 260px;
  box-shadow: 2px 2px 4px #000000;
  /*estilo de las celdas cabeceras de las tablas*/
  /*estilo de las celdas de las tablas*/ }
  .tablaEliminatorias th, .tablaEliminatoriasEuropa th, .tablaEliminatoriasAfrica th {
    font-size: 14px;
    background-color: #5d0f26;
    color: white;
    border: 2px solid black; }
  .tablaEliminatorias td, .tablaEliminatoriasEuropa td, .tablaEliminatoriasAfrica td {
    border: 1px solid black; }

/*estilo del titulo "camino al mundial"*/
.camino__mundial {
  font-family: "Qatar2022" ,Arial,Helvetica;
  color: #5d0f26;
  font-size: 2.5vmax;
  margin: 10px;
  text-align: center;
  margin-left: 4%;
  margin-right: 4%;
  background-color: white; }

/*estilo de las decoraciones a los costados de camino al mundial*/
.titulo__decoration__r2wc {
  width: 7vmax; }

/*estilo de la seccion con los links a las distintas eliminatorias*/
#section__list__eliminatorias {
  background-image: url(../assets/bgs/bg_flags.webp);
  background-position-y: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  max-width: 100vw; }

/*estilo de la seccion con las tablas de las distintas eliminatorias*/
.eliminatoria__tablas {
  background-image: url(../assets/bgs/bg_grupos.webp);
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center; }

/*estilo del titulo de cada eliminatoria*/
.eliminatoria__tabla__titulo {
  margin-top: 5%;
  margin-bottom: 5%;
  font-family: "Qatar2022" ,Arial,Helvetica;
  color: white;
  font-size: 2vmax;
  text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 3px 3px 4px #000000; }

/*estilo de la tabla sudamericana*/
#elimAmerica {
  width: 50vw;
  box-shadow: 2px 2px 4px #000000;
  /*estilo de las celdas de la tabla sudamericana*/
  /*estilo de las celdas cabecera de la tabla sudamericana*/ }
  #elimAmerica td {
    padding: 1%; }
  #elimAmerica th {
    padding: 1%; }

/*estilo de las tablas europeas*/
.tablaEliminatoriasEuropa {
  width: 19vw;
  min-height: 200px; }

/*estilo de las tablas africanas*/
.tablaEliminatoriasAfrica {
  min-width: 200px;
  width: 19vw;
  min-height: 160px;
  font-size: 15px; }

/*estilo que hace que todas las tablas tengan la misma distribucion independientemente del titulo
se que el nombre implica que solo se usa en las tablas europeas, pero se usa en la mayoria de las tablas*/
.seleccionEuropa {
  width: 70%; }

/*estilo los titulos encima de las tablas de posiciones de cada continente en r2wc*/
.titulosEliminatorias {
  font-size: 2vmax;
  padding-bottom: 0.5%;
  padding-top: 0.5%;
  color: #5d0f26;
  font-family: "Qatar2022" ,Arial,Helvetica;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 4px #000000; }

/*estilo de las tablas con partidos*/
.partidos__r2wc {
  background-color: #f1f1f1;
  border-color: #8A1538;
  font-family: "Qatar2022",Arial,Helvetica;
  text-align: center;
  width: 85vw;
  margin-left: 7,5vw;
  border-collapse: collapse;
  min-width: 200px;
  margin-top: 2%;
  margin-bottom: 2%;
  min-height: 40px;
  box-shadow: 2px 2px 4px #000000;
  /*estilo de las celdas de las tablas*/
  /*estilo de las celdas cabecera de las tablas*/ }
  .partidos__r2wc td {
    font-size: 1.2vmax;
    border: 1px solid black; }
  .partidos__r2wc th {
    background-color: black;
    color: white;
    font-size: 1.2vmax; }

/*estilo de la celda con el estado del partido postergado*/
.postergado {
  background-color: green;
  color: black; }

/*estilo de la celda con el estado del partido finalizado*/
.finalizado {
  background-color: gray;
  color: black; }

/*estilo de la celda con el estado del partido suspendido*/
.suspendido {
  background-color: red;
  color: white; }

/*estilo para marcar a los equipos que debieron jugar repechaje en*/
.repechaje {
  background-color: #d5ff04; }

/*estilo para los textos explicando como funciona cada eliminatoria debajo de las tablas*/
.r2wc__aclaracion {
  font-family: 'Qatar2022',Arial, Helvetica, sans-serif;
  font-size: 1.5vmax;
  max-width: 100%;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 4px #000000; }

/*estilo para el contenedor de aquellas eliminatorias con mas de una tabla en ellas*/
.r2wc__multiplesGrupos {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap; }

/*---------------------------------------CSS FOOTER---------------------------------------*/
/*estilo general del footer*/
footer {
  font-family: 'Qatar2022', Arial, Helvetica, sans-serif;
  font-size: 1.5vmax;
  /*estilo de los iconos del footer*/ }
  footer img {
    width: 40px;
    margin-bottom: 0; }
  footer strong {
    font-size: 18px; }

/*---------------------------------------CSS CONTACTOS---------------------------------------*/
/*estilo para la seccion contenedora del cuestionario*/
.main__contactos {
  background-size: cover;
  background-image: url(../assets/bgs/bg_grupos.webp);
  display: grid;
  justify-content: center; }

/*estilo del formulario en Contacto*/
.formulario {
  display: flex;
  max-width: 90%;
  flex-direction: column;
  align-items: center;
  font-family: "Qatar2022" ,Arial,Helvetica;
  min-width: 250px;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 4px #000000; }

/*estilo para el titulo del fieldset*/
legend {
  font-size: 2em; }

/*estilo del texto encima del formulario*/
.formulario__h2 {
  font-family: "Qatar2022" ,Arial,Helvetica;
  margin-top: 2%;
  text-align: left;
  margin-bottom: 2%;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 4px #000000; }

/*estilo para el fieldset contenedor de los inputs*/
fieldset {
  border-radius: 20px;
  border: white 4px solid; }

/*estilo para el contenedor del texto y las opciones para elegir */
.form__sexo {
  display: flex;
  align-items: baseline; }

/*estilo para las opciones al elegir sexo*/
.form__sexo__input {
  font-family: "Qatar2022",Arial, Helvetica, sans-serif; }

/*estilo para los botones de enviar e eliminar dastos*/
.contactos__form__button {
  margin-left: 5px;
  margin-right: 5px;
  width: 20%;
  height: 40px;
  font-size: 1.2vmax;
  font-family: "Qatar2022",Arial, Helvetica, sans-serif; }

/*estilo para el texbox para el mensaje en consultas*/
#mensaje {
  width: 40%;
  min-width: 200px;
  height: 200px;
  overflow: auto;
  text-align: left; }

/*---------------------------------------CSS GENERALES---------------------------------------*/
* {
  box-sizing: border-box;
  margin: 0%; }

body {
  flex-direction: column;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */ }

body::-webkit-scrollbar {
  display: none; }