.gkaranking{
  width:100%;
  /*padding-left:10px;
  padding-right:10px;
  margin-left:10px;
  margin-right:10px;*/
}

.gkaktitle{
  background-color:#F2EFEB;
  color: #000;
  padding:0.8em;
  text-align:center;
  line-height: 20px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  font-family: 'CatamaranExtraBold';
}

.gkaktitle::after {
  content: "";
  display: table;
  clear: both;
}

.gkatxtfullrank > a{
  color:#000;
  text-align:left;
  text-decoration:none;
  font-family: 'OpenSansRegular';
  font-weight: 400;

}
.gkarankingtitle{
  width:100%;
  background-color:#efa300;
  color:white;
  text-align:center;
  line-height:40px;
  font-weight:700;
  font-size:1.25rem;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  text-rendering: optimizeLegibility;
}
.centrado {
  padding-top:15px;
  padding-bottom:15px;
  display: flex;
  flex-wrap: nowrap;
  align-items:center;
  background-color:#F2EFEB;
}

.gkaposition {
  width: 50px; 
  text-align: center;
  font-size:22px;
  font-weight:700;
  margin-right: 10px; 
  font-family: 'Roboto Condensed',sans-serif;
  margin-left: 10px;
}

.gkaflagcontainer, .gkaphotocontainer {
  display: flex;
  align-items: center;
  margin-right: 10px; 
}

.gkaflagimg {
  width: 24px;
  height: 18px;
  background-size: cover;
  text-align:center;
  border-radius: 3px;
}

.gkaphoto {
  width: 4.125rem;
  height: 4.125rem;
  border-radius: 3.135rem;
  background-position:50% 50%;
  background-size: cover;
}

.gkanamecontainer {
  flex-grow: 1; 
  margin: 10px; 
  
}

.gkaname{
  font-weight:700;
  font-size:20px;
  font-family: 'Roboto Condensed',sans-serif;
  word-wrap: break-word;
}

.gkasponsor{
  color:black;
}

.pointscontainer {
  display: flex;
  align-items: center;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
  margin-right:20px;
  width:30%;
}

.gkapointshead{
  background-color:#ddd;
  text-align:center;
  color:#222;
  padding:5px;
  font-family:'Roboto Condensed',sans-serif;
  font-size:14px;
}

.gkapoints{
  background-color:#fff;
  color:#333;
  font-size:2em;
  font-weight:700;
  font-family: 'Roboto Condensed',sans-serif;
}

.gkaWinner{
  background-color:#f5bc40;
}
div.centrado.gkaWinner > div.gkanamecontainer.textowhite > div.gkaname > a{
  color:white;
}
.textowhite{
  color:#fff;
}
.backgroundWinner{
  background-color:#ddd;
}

.gkaSecond{
  background-color:#F2EFEB;
}
.gkatextosecond{
  color:#8eb1b7;
}
.backgroundSecond{
  background-color:#8eb1b7;
}
div.centrado.gkaSecond > div.gkanamecontainer.gkatextosecond > div.gkaname > a{
  color:#8eb1b7;
}

.gkaThird{
  background-color:#F2EFEB;
}
.backgrondthird{
  background-color:#d49b7a;
}
.gkatextothird{
  color:#d49b7a;
}
div.centrado.gkaThird > div.gkanamecontainer.gkatextothird > div.gkaname > a{
  color:#d49b7a;
}

.gkaktitle-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pdf-link {
  margin-right: 20px;
}


/* Media query para pantallas pequeñas */
@media (max-width: 768px) { /* Este valor de 768px es típico para tablets, pero ajústalo según tus necesidades */

  .gkaposition, 
  .gkaflagcontainer, 
  .gkaphotocontainer {
    width: 100%; /* Ocupará el 100% del ancho */
    text-align: center; /* Centrará el contenido */
  }

  .gkanamecontainer .gkaname, 
  .gkanamecontainer div, 
  .pointscontainer {
    width: 100%; /* Ocupará el 100% del ancho */
  }

  .gkaname{
    text-align: center;
  }

  .centrado{
    flex-wrap:wrap;
    justify-content: flex-start;
  }

  .gkaposition, 
    .gkaflagcontainer, 
    .gkaphotocontainer {
        width: auto; /* Permitir que estos elementos tomen solo el espacio necesario */
        text-align: center;
        flex-shrink: 0; /* Evitar que estos elementos se reduzcan */
        justify-content: center;

    }

    .gkanamecontainer {
        flex-grow: 1; /* Permitir que este contenedor crezca y ocupe el espacio restante */
        text-align: left;
    }

    .pointscontainer {
        width: auto;
        text-align: center;
        flex-shrink: 0; /* Evitar que estos elementos se reduzcan */
        margin-left: 10px; /* Agregar un pequeño margen a la izquierda */
        min-width:30%;
    }


  /* Puedes agregar más estilos específicos aquí si lo necesitas */
}


@media (max-width: 480px) { 
  .gkaposition, 
  .gkaname,
  .gkasponsor,
  .gkaflagcontainer, 
  .gkaphotocontainer {
    width: 100%; /* Ocupará el 100% del ancho */
    text-align: center; /* Centrará el contenido */
    margin-right:0px;
    margin-left:0px;
    justify-content: center;
  }

  .gkaflagimg{
    margin:auto;
  }

  .gkaphoto{
    margin:auto;
    margin-top:5px;
  }

  .centrado {
      flex-wrap: wrap;
      justify-content: center;
  }

  .pointscontainer{
    margin-right:0px;
  }

  .gkapointshead{
    align-self:center;
    min-width:90%;
    min-width:300px;
  }

  .gkapoints{
    align-self:center;
    min-width:90%;
    min-width:300px;
  }

}