.cancha { background: url('https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_general/depor/prod/seleccion-nacional-elige-tu-once-bicolor-del-torneo-local-nndd-xvisual/img/cancha.png') no-repeat 0 0; background-size: 100%; width: 70%;  min-height: 580px; position: relative; margin: 40px auto;}
.cancha div { position: absolute; width: fit-content;}
/*-------ALINEACIONES----------*/
/*4-4-2*/
.cancha .n1 { top: 0px; left: 46%; }
.cancha .n2 { top: 25%; left: 5%; }
.cancha .n3 { top: 15%; left: 28%; }
.cancha .n4 { top: 15%; left: 63%; }
.cancha .n5 { top: 25%; left: 86%; }
.cancha .n6 { top: 65%; left: 10%; }
.cancha .n7 { top: 55%; left: 28%; }
.cancha .n8 { top: 55%; left: 63%; }
.cancha .n9 { top: 65%; left: 82%; }
.cancha .n10 { top: 40%; left: 46%; }
.cancha .n11, .cancha .n11 .img-jugador { top: 78%; left: 46%; }

.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: 40px auto;
    width: 90%;
  }

  /*4-4-2*/
  .cancha .n1 { top: 0px; left: 50%; }
  .cancha .n2 { top: 25%; left: 5%; }
  .cancha .n3 { top: 15%; left: 28%; }
  .cancha .n4 { top: 15%; left: 61%; }
  .cancha .n5 { top: 25%; left: 85%; }
  .cancha .n6 { top: 63%; left: 5%; }
  .cancha .n7 { top: 50%; left: 28%; }
  .cancha .n8 { top: 50%; left: 61%; }
  .cancha .n9 { top: 63%; left: 85%; }
  .cancha .n10 { top: 35%; left: 45%; }
  .cancha .n11, .cancha .n11 .img-jugador { top: 70%; left: 45%; }

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

@media screen and (max-width: 640px)
{
    .cancha{
      min-height: 290px;
    }
    .cancha .n1 { top: 0px; left: 44.5%; }
    .img-jugador{
      width: 40px;
    }
}