.cancha { background: url('https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/psg-arma-tu-once-ideal-nndd-ecvisual-ecpm/img/cancha.png') no-repeat center 0; background-size: 102%; width: 56%;  min-height: 596px; position: relative; margin: 0 auto 10px auto;}
.cancha div { position: absolute; width: fit-content;}
/*-------ALINEACIONES----------*/
/*4-4-2*/
.cancha .n1 { top: 20px; left: 44%; }
.cancha .n1m { top: 20px; left: 41%; }
.cancha .n2 { top: 25%; left: 4%; }
.cancha .n3 { top: 13%; left: 27%; }
.cancha .n4 { top: 13%; left: 62%; }
.cancha .n5 { top: 25%; left: 84%; }
.cancha .n6 { top: 57%; left: 7%; }
.cancha .n7 { top: 40%; left: 27%; }
.cancha .n8 { top: 40%; left: 62%; }
.cancha .n9 { top: 57%; left: 80%; }
.cancha .n10 { top: 57%; left: 45%; } 
.cancha .n11, .cancha .n11 .img-jugador { top: 78%; left: 44%; }

.cancha div .jugador { display: inline-block; text-align: center; color: #fff; text-decoration: none; }
.cancha div .jugador span { background: #353535; background: -moz-linear-gradient(top, #353535 0%, #000000 100%); background: -webkit-linear-gradient(top, #353535 0%, #000000 100%); background: linear-gradient(to bottom, #353535 0%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#000000', GradientType=0 );
 display: block; text-transform: uppercase; margin-top: -15px; z-index: 10; position: relative; word-break: break-word; max-width: 100px; }
.cancha div a { display: inline-block; text-align: center; color: #fff; text-decoration: none; }
.cancha div a span { background: #353535; background: -moz-linear-gradient(top, #353535 0%, #000000 100%); background: -webkit-linear-gradient(top, #353535 0%, #000000 100%); background: linear-gradient(to bottom, #353535 0%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#000000', GradientType=0 );
 display: block; text-transform: uppercase; margin-top: -15px; z-index: 10; position: relative; word-break: break-word; max-width: 100px; }
/*elegir  jugador*/

.btn-jugador, .btn-jugador-elegido{
  width: 62px;
  height: 62px;
}

@media screen and (max-width: 768px)
{
  .cancha{
    margin: 0 auto 10px auto;
    width: 100%;
  }

  /*4-4-2*/
  .cancha .n1 { top: 10px; left: 45%; }
  .cancha .n2 { top: 25%; left: 4%; }
  .cancha .n3 { top: 19%; left: 26%; }
  .cancha .n4 { top: 19%; left: 59%; }
  .cancha .n5 { top: 25%; left: 81%; }
  .cancha .n6 { top: 58%; left: 4%; }
  .cancha .n7 { top: 40%; left: 25%; }
  .cancha .n8 { top: 40%; left: 58%; }
  .cancha .n9 { top: 58%; left: 81%; }
  .cancha .n10 { top: 58%; left: 43%; }
  .cancha .n11, .cancha .n11 .img-jugador { top: 80%; left: 42%; }

  .btn-jugador, .btn-jugador-elegido{
    width: 48px;
    height: 48px;
  }
  .btn-jugador, .btn-jugador:hover{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
}

@media screen and (max-width: 640px)
{
    .cancha{
      min-height: 375px;
    }
    .cancha .n1 { top: 10px; left: 43%; }
    .cancha .n1m { top: 10px; left: 39%; }
    .img-jugador{
        width: 40px;
    }
}