.boxRanking {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 40px   150px   50px  50px  50px  20px  50px  50px  50px  20px  50px    1fr;
    grid-template-areas: " .   orden  nombre  Pgan  Pper  Pemp  .     Gfav  Gcon  Gdif  .     puntos  .";
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    justify-items: right;
    align-items: center;
}
.orden {
    grid-area: orden;
    color:#999;
    justify-self:left;
}
.nombre {
    grid-area: nombre;
    display: grid;
    font-size: 25px;
    justify-self:left;
    letter-spacing: 1px;
}
.Pgan {
    grid-area: Pgan;
    color:#006;
}
.Pper {
    grid-area: Pper;
    color:#600;
}
.Pemp {
    grid-area: Pemp;
    color:#666;
}
.Gfav {
    grid-area: Gfav;
    justify-items: right;
    color:#036;
}
.Gcon {
    grid-area: Gcon;
    color:#900;
}
.Gdif {
    grid-area: Gdif;
}
.puntos {
    grid-area: puntos;
    font-weight:bold;
}
/*--------------------------------------- Leyenda */
.boxRankingT {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 40px    150px    50px   50px   50px   20px  50px   50px   50px   20px  50px     1fr;
    grid-template-areas: " .   ordenT  nombreT  PganT  PperT  PempT  .     GfavT  GconT  GdifT  .     puntosT  .";
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18px;
    justify-items: right;
    align-items: center;
    color:#999;
}
.ordenT {
    grid-area: ordenT;
    justify-self: left;
}
.nombreT {
    grid-area: nombreT;
    justify-self: left;
}
.GfavT {
    grid-area: GfavT;
}
.GconT {
    grid-area: GconT;
}
.GdifT {
    grid-area: GdifT;
}
.PganT {
    grid-area: PganT;
}
.PperT {
    grid-area: PperT;
}
.PempT {
    grid-area: PempT;
}
.puntosT {
    grid-area: puntosT;
}
@media screen and (max-width: 430px) {
    .boxRankingT {
        grid-template-columns: 1fr 18px    100px     27px   27px   27px  8px  27px   27px   27px   8px   27px     1fr;
        grid-template-areas: " .   ordenT  nombreT  PganT  PperT  PempT  .    GfavT  GconT  GdifT  .     puntosT  .";
        font-size: 15px;
    }
    .boxRanking {
        grid-template-columns: 1fr 18px   100px   27px  27px  27px  8px  27px  27px  27px  8px   27px    1fr;
        grid-template-areas: " .   orden  nombre  Pgan  Pper  Pemp  .    Gfav  Gcon  Gdif  .     puntos  .";
        font-size: 17px;
    }
    .orden {
        font-size: 15px;
    }
    .nombre {
        font-size: 19px;
        letter-spacing: 0px;
    }
    .puntos {
        font-size: 19px;
    }
}