.cancha {
    background: url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_general/depor/prod/seleccion-nacional-elige-tu-once-colombia-ecuador-nndd-xvisual/img/cancha.png) no-repeat 0 0;
    background-size: 100%;
    width: 70%;
    min-height: 730px;
    position: relative;
    margin: 20px auto 40px auto;
}
.cancha div { position: absolute; width: fit-content;}
/*-------ALINEACIONES----------*/
/*4-4-2*/
.cancha .n1 { top: 30px; left: 46%; }
.cancha .n2 { top: 30%; left: 10%; }
.cancha .n3 { top: 18%; left: 28%; }
.cancha .n4 { top: 18%; left: 63%; }
.cancha .n5 { top: 30%; left: 82%; }
.cancha .n6 { top: 65%; left: 10%; }
.cancha .n7 { top: 45%; left: 28%; }
.cancha .n8 { top: 62%; left: 45%; }
.cancha .n9 { top: 65%; left: 82%; }
.cancha .n10 { top: 45%; left: 63%;}
.cancha .n11, .cancha .n11 .img-jugador { top: 84%; left: 45%; }

.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{
  width: 64px;
  height: 64px;
}

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

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

  /*4-5-1*/
  .cancha .n1 { top: 0px; left: 50%; }
  .cancha .n2 { top: 30%; left: 7%; }
  .cancha .n3 { top: 18%; left: 28%; }
  .cancha .n4 { top: 18%; left: 61%; }
  .cancha .n5 { top: 30%; left: 82%; }
  .cancha .n6 { top: 70%; left: 7%; }
  .cancha .n7 { top: 45%; left: 28%; }
  .cancha .n8 { top: 62%; left: 45%;}
  .cancha .n9 { top: 70%; left: 82%; }
  .cancha .n10 { top: 45%; left: 61%;  }
  .cancha .n11, .cancha .n11 .img-jugador { top: 83%; left: 45%; }

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

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