/*Jugadores*/
.teamCenter{
   .top{
      width: 100%;
      min-height:100px;
      #gradient .vertical-three-colors(@bg, @bg, 25%, darken(@bg,10%));
      display:block;
      border-bottom: 2px solid @color01;
   }
   .content{
      border-top: 1px solid darken(@bg,20%);
      border-bottom: 3px solid @color02;
      padding: 5% 0;
      .space{
         width: 12%;
         float: left;
         min-height: 1px;
      }
      .colLeft, .colRight{
         .data{
            padding:6% 0 0;
            span{
               display: block;
               color: @bg_dest_type;
               font-size: 16px;
               font-weight: bold;
               &:nth-child(2){
                  color: @bg_type;
                  text-transform: uppercase;
               }
            }
            div{
               background: @color01;
               color: @bg_type;
               min-height: 30px;
               width: 136px;
               line-height: 30px;
               text-transform: uppercase;
               text-align: center;
               font-size: 12px;
               font-weight: bold;
               margin: 5% 0 0;
               cursor: pointer;
            }
         }
         .positionCircle{
            .circle{
               margin: 50% auto 0;
               float: none;
            }
            img{
               margin: 42% auto 0;
            }
         }
      }
      .colRight{
         .data{
            text-align: right;
            div{
               float: right;
            }
         }
      }
      .colMiddle{
         .circle{
            float: none;
            margin: 20px auto 0;
            width: 90px;
            height: 90px;
            font-size: 40px;
            line-height: 90px;
            color: @bg_type;
            position: relative;
            &:after {
               content: "";
               display: block;
               position: absolute;
               z-index: 1;
               bottom: 1px;
               height: 2px;

               /* Shadow size */
               width: 1px; /* Add a 10th of the width you want (scaled up later) */
               left: 0; /* Half of the 10th of the width! */
               margin: 0 auto; /* Centers element before it's upscaled, don't change this */
               right: 0;
               bottom: -8px;

               /* Transform: rotateX to create depth, scale to 10x to make left/right more blurry than top/bottom */
               -moz-transform: rotateX(45deg) scale(10, .75);
               -ms-transform: rotateX(45deg) scale(10, .75);
               -o-transform: rotateX(45deg) scale(10, .75);
               -webkit-transform: rotateX(45deg) scale(10, .75);
               transform: rotateX(45deg) scale(10, .75);

               /* Apply shadow & background */
               background: lighten(@bg_type,50%);
               -moz-box-shadow: 0 0 1px @color02, 0 0 2px @color02, 0 0 3px @color02 0 0 5px @color02, 0 0 5px @color02, 0 0 5px @color02, 0 0 7px @color02, 0 0 12px @color02;
               -o-box-shadow: 0 0 1px @color02, 0 0 2px @color02, 0 0 3px @color02, 0 0 5px @color02, 0 0 5px @color02, 0 0 5px @color02, 0 0 7px @color02, 0 0 12px @color02;
               -webkit-box-shadow: 0 0 1px @color02, 0 0 2px @color02, 0 0 3px @color02, 0 0 5px @color02, 0 0 5px @color02, 0 0 5px @color02, 0 0 7px @color02, 0 0 12px @color02;
               -ms-box-shadow: 0 0 1px @color02, 0 0 2px @color02, 0 0 3px @color02, 0 0 5px @color02, 0 0 5px @color02, 0 0 5px @color02, 0 0 7px @color02, 0 0 12px @color02;
               box-shadow: 0 0 1px @color02, 0 0 2px @color02, 0 0 3px @color02, 0 0 5px @color02, 0 0 5px @color02, 0 0 5px @color02, 0 0 7px @color02, 0 0 12px @color02;

               /* Change opacity of entire element to tint shadow */
               -moz-opacity:.65;
               filter:alpha(opacity=65);
               opacity:.65;
            }
         }
      }
      @media (max-width: @md) {
         .space{
            width: 10%;
         }
         .colMiddle{
            .circle{
               width: 60px;
               height: 60px;
               font-size: 30px;
               line-height: 60px;
            }
         }
      }
      @media (max-width: @sm) {
         .space{
            width: 4%;
         }
         .colMiddle{
            .circle{
               width: 40px;
               height: 40px;
               font-size: 20px;
               line-height: 40px;
            }
         }
      }
      @media (max-width: @xs) {
         .space{
            width: 0%;
         }
         .colMiddle{
            .circle{
               margin-top: 5%;
            }
         }
      }
   }
   .dialog{
      width: 50%;
      min-height: 300px;
      background:@bg;
      display: none;
      position: absolute;
      top: 10%;
      left: 0;
      right: 0;
      margin: 0 auto;
      box-shadow: 0 0 8px 1px lighten(@color02,80%);
      border-radius: 5px;
      padding:5px;
      .caption{
         height: 30px;
         border:0;
         .homeBar{
            width: 100%;
            line-height: 30px;
         }
      }
      .lineUpFull{
         .team-name{
            border:0;
            position: relative;
            width: 48%;
            float: left;
            .starting{
               border:1px solid darken(@bg,15%);
               border-top:0;
            }
         }
         .container-substitutes{
            width: 48%;
            float: right;
            .substitutes-content{
               border:1px solid darken(@bg,15%);
               border-top:0;
               height: auto;
            }
         } 
      }   
      .footer{
         background: lighten(@color02, 80%);
         height: 30px;
         text-align: center;
         border-top: 1px solid lighten(@color02, 70%);
         span{
            line-height: 30px;
            color: @bg_type;
         }
      }
      @media (max-width: @md) {
         width: 70%;
         .lineUpFull{
            .container-substitutes{
               clear: none;
            } 
         }
      }
      @media (max-width: @sm) {
         .lineUpFull{
            height: 250px;
            overflow: auto;
            .team-name{
               width: 100%;
               float: none;
            }
            .container-substitutes{
               width: 100%;
               float: none;
            }
         }
      }
      @media (max-width: @xs) {

      }
   }
}
/*Fin Jugadores */