/* ESTILOS GENERICOS */

/*---- Separador sub sub cabecera----*/
.G_subheader{
   height:25px;
   text-transform:uppercase;
   text-align:center;
   font-size:12px;
   line-height:25px;
   background-color: @color02;
   color: @color02_type;
   clear:both;
   font-family:@baseFontFamily;
   position: relative;
}
.subHeader{
   .G_subheader;
}        
&.single .subHeader{
   .tipoIso(@color02);
   background-position: center right;
   background-repeat: no-repeat;
}   
/*---- Línea Divisoria ----*/
.G_divider{
   #gradient .vertical-three-colors( @bg, darken(@bg,20%), 70%, @bg);
   border-radius: 50%;
   content: "";
   height: 80%;
   left: -10px;
   position: absolute;
   top: 10%;
   width: 3px;
   z-index: 2;
}
/*---- Línea Divisoria ----*/
.G_divider_horizontal{
   #gradient .vertical-three-colors(@bg, @bg, 40%, darken(@bg,40%));
   height: 5px;
   width: 100%;
   border-top: 1px solid darken(@bg, 20%);
   border-bottom: 1px solid darken(@bg, 50%);
   content: "";
   position: absolute;
   top: -5px;
   left: 0;
}
/*---- Barras comparativas----*/
.G_bars(@color){
   background-image:url('../images/barra.png');
   background-position:top center;
   background-repeat:repeat-x;
   background-color:@color;
}
.G_comparisonBars{
   height:14px;
   border-width:1px;
   position:relative;
   .awayBar,.homeBar{
      position:absolute;
      top:0;
      height:100%;
   }
   .homeBar{
      left:0;
      .G_bars(@homeColor);
      color:@homeColor_type;
   }
   .awayBar{
      right:0;
      .G_bars(@awayColor);
      color:@awayColor_type;
   }
}
/*---- Titulo----*/
.GC_title {
   width: 100%;
   height:30px;
   #gradient .vertical-three-colors(@bg, @bg, 20%, darken(@bg,20%));
   text-transform:uppercase;
   font:18px @type_Special;
   line-height:30px;
   text-align:center;
   display:block;
   color:@bg_type;
   border-top: 1px solid darken(@bg,20%);
   @media only screen and (max-width: 320px) {
      font-size: 12px;
   }
}
/*---- caption----*/
.caption {
   &.nav {
      height: 26px;
      .awayBar,
      .homeBar{
         line-height: 26px;
         background-image: none;
         cursor: pointer;
      }
      .awayBar.on{
         box-shadow: 4px 3px 6px lighten(@bg,50%) inset;
      }
      .homeBar.on{
         box-shadow: 4px 3px 6px lighten(@bg,5%) inset;
      }

   }

   .G_comparisonBars;

   font-weight:bold;
   text-align:center;
   .awayBar,
   .homeBar {
      text-transform: uppercase;
      width: 50%;
      font-size: 12px;
      font-family:@baseFontFamily;
      line-height:14px;
   }
   .homeBar {
      color: @homeColor_type;
   }
   .awayBar {
      color: @awayColor_type;
   }
}
/*----10 Ranking----*/
.itemsRanking{
   font-family:@baseFontFamily;
   margin-left: 0;
   &:after{
      .G_divider;     
      left:-1px;
      height:90%;       
   }
   div.home, div.away {
   }
   span.title {
      line-height:20px;
      float:left;
      font-size: 12px;
      text-transform: uppercase;
      color: @bg_type;
      width: 80%;
      &.total{
         display: none;
      }
   }
   .G_ranking{
      float: left;
      height: 45px;
      width: 97%;
      margin-left: 3%;
      .player.title{
         text-transform: uppercase;
      }
      .num{
         color: @bg_dest_type;
         font-size: 20px;
         font-family:@type_Special;
         width: 15%;
         margin-left: 5%;
         text-align: left;
         line-height: 55px;
      }
   }
   .G_barsRanking{
      height:14px;
      border-width:1px;
      position:relative;
      float: left;
      width:80%;
      #gradient .vertical(darken(@bg,10%),@bg);
      .box-shadow-inset(0, 1px, 4px, 1px, darken(@bg,20%));
      .barraIn{
         position:absolute;
         top:0;
         height:100%;
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
      }
   }
   .home .G_barsRanking .barraIn{
      left:0;
      .G_bars(@homeColor);
   }
   .away .G_barsRanking .barraIn{
      left:0;
      .G_bars(@awayColor);
   }
   .top {
      margin-top: 15px;            
      span.title {
         font-size: 20px;
      }
      .G_barsRanking{
         height:20px;
      }
      span.title {
         line-height:30px;
      }
      &.G_ranking{
         height: 60px
      }
      .num{
         font-size: 35px;
         line-height: 70px;
      }
   }
}

/* Bubble description*/
.description {
   margin:0 auto 0;
   .title{
      background:@color01;
      width:95%;
      margin:0 auto;
      padding: 5px 22px;
      text-transform: uppercase;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      box-shadow: 0px 0px 3px lighten(@color02, 70%);
      font-weight: bold;
      margin-top: 36px;
   }
   .data{
      width: 95%;
      min-height:20px;
      background:@bg;
      margin:10px auto 0;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      box-shadow: 0px 0px 3px darken(@bg, 60%);
      position: relative;
      color: @bg_type;
      .arrow-left {
         border-bottom: 12px solid transparent;
         border-right: 20px solid darken(@bg, 60%);
         border-top: 12px solid transparent;
         position: absolute;
         top: 7px;
         left: -20px;
         width: 0;
         height: 0;
         &:after{
            content:"";
            width:0;
            height:0;
            border-bottom: 12px solid transparent;
            border-right: 20px solid @bg;
            border-top: 12px solid transparent;
            position:absolute;
            top: -12px;
            left: 0px;
         }
      }
      .arrow-right {
         border-top: 12px solid transparent;
         border-bottom: 12px solid transparent;
         border-left: 20px solid darken(@bg, 60%);
         position: absolute;
         top: 7px;
         right: -20px;
         width: 0;
         height: 0;
         &:after{
            content:"";
            width:0;
            height:0;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-left: 20px solid @bg;
            position:absolute;
            top: -12px;
            right: 0;
         }
      }
      .text span{
         padding:15px 60px 0 22px;
         display:block;
         font-weight: bold;
         font-size: 18px;
         word-wrap: break-word;
         &:nth-child(2){
            padding:0 84px 10px 12px;
            font-size: @baseFontSize;
            line-height: 16px;
         }
      }
      .social {
         display:none;
         border-top: 1px dotted @color01_type; 
      }
   } 
   @media (max-width: @xs) {
      .data{
         .arrow-right {
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 12px solid darken(@bg, 60%);
            right: -12px;
            &:after{
               border-top: 8px solid transparent;
               border-bottom: 8px solid transparent;
               border-left: 12px solid @bg;
               position:absolute;
               top: -8px;
            }
         }
         .arrow-left {
            border-bottom: 8px solid transparent;
            border-right: 12px solid darken(@bg, 60%);
            border-top: 8px solid transparent;
            left: -12px;
            top: 7px;
            &:after{
               border-bottom: 8px solid transparent;
               border-right: 12px solid @bg;
               border-top: 8px solid transparent;
               top: -8px;
            }
         }
      }

   }
}
/* Fin Bubble description */

/*Circle*/
.circle {
   display: block;
   width: 33px;
   height: 33px;
   -webkit-border-radius: 99em;
   -moz-border-radius: 99em;
   border-radius: 99em;
   box-shadow: 0px 0px 3px darken(@bg, 25%);
   background-color:#fff;
   font-size:18px;
   text-align: center;
   line-height: 34px;
   float:left;
   margin-right:18px;
   background: @refColor01;
   &.yellow{
      background:@refColor02;
   }
   &.orange{
      background:@refColor03;
   }
   &.red{
      background:@refColor04;
   }
   &.blue{
      background:@color01;
   }
   &.white{
      background:@bg;
   }
   &.black{
      background:@color02;
   }
   &.gray{
      background: darken(@bg,5%);
   }
   &:last-child{
      margin:0;
   }
   img{
      vertical-align: middle;
   }
   img.no-vertical{
      vertical-align:top;
   }
}
/* Fin Circle */

/* FIN ESTILOS GENERICOS*/

/* Esto no se donde ponerlo */
div.content div.scroll {
   width: inherit;
   position: relative;
   overflow: hidden;
   .headboard {
      width: 100%;
      position: absolute;
      z-index: 2;
      height: 30px;
      display:block;
      .browse {
         position: absolute;
         font:18px @type_Special;
         cursor: pointer;
         display: block;
         color: @color02_type;
         width: 50px;
         height: 0;
         border-top: 30px solid @color02;
         text-align: center;
      }
      .browse > span {
         position: absolute;
         top: -27px;
      }
      .left {
         border-right: 30px solid transparent;
         left:0;
         &.disabled{
            display:none;
         }
      }
      .right {
         border-left: 30px solid transparent;
         right:0;
         &.disabled{
            display:none;
         }
      }
      .browse:hover {
         border-top: 30px solid @color02_h;
         color: @color02_h_type;
      }
   }
   .items {
      width:100%;
      white-space: nowrap;
      position: absolute;
   }
}

div.content div.incidences.scroll {
   height: 90px;
   .comparing {
      clear: none !important;
      display: inline-block;
      width: inherit;
   }
}

.disabled {
   display: none;
}
/* Fin esto no se donde ponerlo */


/*Slide*/
.slide{
   .carousel-indicators{
      li{
         border: 2px solid @bg;
         background-color:@color02;
         width: 14px;
         height: 14px; 
      }
      .active{
         background-color:@color01; 
         width: 14px;
         height: 14px; 
         margin: 1px;
      }
   }
}
/*Fin Slide*/

.blockCards{
   .content{
      .colLeft, .colRight{
         margin: 10px 0;
         .position{
            img{
               float: left;
            }
            .circle{
               float: none;
               margin: 8px 0 0 40px;
            }
         }
      }
      .colRight{
         &:after{
            .G_divider;     
         }
      }
   }
   @media (max-width: @xs) {
      .content{
         .colRight {
            .position{
               margin: 0;
            }
         }
         .colLeft {
            .position{
               margin: 0;
            }
         }
      }
   }
}
.blockShots{
   position:relative;
   .content{
      .colLeft, .colRight{
         margin: 40px 0 60px;
         .arc{
            background:url('../images/arco.png') no-repeat scroll 0 0;
            height:71px;
            margin: 30px auto 20px;
            width:100%;
            .color-cards{
               padding: 18px 0 0 34%;
            }
         }
         .total{
            margin: 0 auto;
            float: right;
            position: relative;
            img{
               margin: 0 auto;
            }
            canvas{
               position: absolute;
               left: 0;
               right: 0;
               margin: 0 auto !important;
            }
            .tp-arc-top{
               top: 128px;
               padding-left: 0;
               .tooltip{
                  float: none;
                  margin: 0 auto;
               }
            }
         }
         .tp-arc-top{
            top:45px;
            width: 100%;
            position: relative;
            padding-left: 34%;
         }
      }

      .colRight{
         .total{
            float: left;
         }
         &:after{
            .G_divider;         
         }
      }
   }
   @media (max-width: @md) {
      .content{
         .colLeft, .colRight{
            .arc {
               background-position: center center;
            }
            .total {
               float: none;
               margin:10px auto;
               height: 135px;
            }
         }
      }
   }
   @media (max-width: @sm) {
      .content{
         .colLeft, .colRight{
            .arc {
               .color-cards{
                  padding-left: 20%;
               }
            }
            .tp-arc-top {
               padding-left: 20%;
            }
         }

      }
   }
   @media (max-width: @xs) {
      .content{
         position: relative;
         margin: 0;
         .colLeft, .colRight{
            margin: 10px 0;
            .arc{
               background-image: none;
               height: auto;
               .color-cards{
                  padding:0;
                  width:33px; 
                  margin:0 auto;
                  .circle{
                     margin-top: 10px;
                  }
               }
            }
            .total{
               width:100%;
               margin: 10px auto;
               img{
                  margin:0 auto;
               }
               &:after{
                  .G_divider;   
               }
            }
         }

         .colRight{
            &:after{
               .G_divider;  
               width: 0;    
            }
            .arc{
               margin-right:0;
            }
         }
         .colLeft{
            .arc{
               margin-left:0;
            }
         }
         .tp-arc{
            position:absolute; 
            left:0; 
            right:0; 
            margin:0 auto;
            top: 200px;
         }
      }
      .circle{
         margin: 0;
      }
      .tooltip-static{
         font-size: 9px;
      }
   }
   .tooltip-static{
      background:@color02;
      height:30px;
      color:@color01_type;
      text-align: center;
      line-height: 30px;
      margin-top: 13px;
      position:relative;
      &:after{
         content:"";
         position: absolute;
         width:0;
         height:0;
         border-top:8px solid transparent;
         border-bottom:8px solid transparent;
         border-left:20px solid @color02;
         right: -20px;
         top: 7px;
      }
      &:before {
         content:"";
         position: absolute;
         width: 0;
         height: 0;
         border-top: 8px solid transparent;
         border-right: 20px solid @color02;
         border-bottom: 8px solid transparent;
         left: -20px;
         top: 7px;
      }   
   }
   .tooltip{
      position:relative;
      width: 33px;
      float: left;
      margin-right: 18px;
      &:last-child{
         margin-right: 0;
      }
      .tooltip-inner{
         min-height: 22px;
         font-size: 9px;
         padding-left: 0;
         text-align: center;
         line-height: 22px;
      }
   }
}
.blockPasses{
   .content{
      .teamComparison{
         border-top: 1px solid darken(@bg,20%);
         .comparing{
            clear:none;
            height:80px;
            margin-left: 3%;
            .bar{
               width: 80%;
               .homeBar{
                  background-color: darken(@refColor01, 25%);
               }
               .awayBar{
                  background-color: darken(@refColor04, 15%);
               }
            }
            .num{
               margin-left: 3%;
               font-size: 24px;
               height: 40px;
            }
            .data{
               width:80%;
               .correct{
                  color:@refColor01_type;
                  .number{
                     font-size: 20px;
                     font-weight: bold;
                     float:left;
                     display:block;
                  }
                  .text{
                     font-size: 10px;
                     text-transform: uppercase;
                     line-height: 30px;
                     padding: 0 0 0 30px;
                     display: block;
                  }
               }
               .incorrect{
                  color:@refColor04_type;
                  text-align: right;
                  .number{
                     font-size: 20px;
                     font-weight: bold;
                     float:right;
                  }
                  .text{
                     font-size: 10px;
                     text-transform: uppercase;
                     line-height: 30px;
                     padding: 0 8px 0 0;
                  }
               }
            }
         }
      }
      .colRight{
         &:after{
            .G_divider;         
         }
      }
      .mobileTablet{
         .colLeft, .colRight{
            margin: 30px auto;
            .graphic{
               img{
                  margin: 0 auto;
               }
            }
            .data{
               .correct{
                  padding:15px 0 0 0;
                  .text{
                     color:@refColor01_type;
                     font-size:12px;
                     font-weight: bold;
                     line-height: 24px;
                  }
               }
               .incorrect {
                  padding:20px 0 0 0;
                  .text{
                     color:@refColor02_type;
                     font-size:12px;
                     font-weight: bold;
                     line-height: 24px;
                  }
               }
               .number{
                  color: @bg_dest_type;
                  font-size: 20px;
                  width: 30%;
                  display: block;
                  float: left;
                  margin-right: 5%;
                  text-align: right;
               }
            }
         }
         .colRight{
            &:after{
               .G_divider; 
               top: 25%;          
            }
         }
         .colLeft{
            .graphic{
               float: right;
            }
         }
      }
   }
   @media (max-width: @xs) {
      .content{
         .mobileTablet {
            .colLeft {
               .data {
                  .incorrect {
                     .text{
                        font-size: 9px;
                     }
                  }
                  .correct {
                     .text{
                        font-size: 9px;
                     }
                  }
               }
            }
            .colRight {
               .data {
                  .incorrect {
                     .text{
                        font-size: 9px;
                     }
                  }
                  .correct {
                     .text{
                        font-size: 9px;
                     }
                  }
               }
            }
         }
      }
   }
}
.blockPlayer{
   background:url('../images/border_comparativa.png') repeat-y scroll top center darken(@bg,5%);
   position: relative;
   margin: 0;
   .circle{
      img{
         margin: 4px;
      }
   }
   .data{
      span{
         display: block;
         color: @bg_dest_type;
         font-size: 16px;
         font-weight: bold;
         &:nth-child(2){
            color: @bg_type;
            text-transform: uppercase;
         }
      }
      .change{
         background: @color01;
         color: @color01_type;
         min-height: 30px;
         width: 30%;
         line-height: 30px;
         text-transform: uppercase;
         text-align: center;
         font-size: 12px;
         font-weight: bold;
         margin: 3px 0 0;
         cursor: pointer;
         float: right;
      }
   }
   .colLeft{
      padding: 25px 0 25px 2%;
   }
   .colRight{
      padding: 25px 2% 25px 0;
      .data{
         float: right;
         .text{
            float: right;
         }
         span{
            text-align: right;
         }
         .change{
            float: left;
         }
      }
      .position{
         float: right;
         .circle{
            float: right;
         }
      }
   }
   .colMiddle{
      padding: 25px 0;
      position: relative;
      min-height: 115px;
      .circle{
         float: none;
         margin: 0 auto 0;
         width: 50px;
         height: 50px;
         font-size: 20px;
         line-height: 50px;
         color: @color01_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;
         }
      }
      img{
         margin: 0 auto;
      }
   }
   @media (max-width: @sm){
      .colRight {
         .data {
            .change{
               float: right;
               width: 70%;
            }
            .text{
               float: none;
            }
         }
      }
      .colLeft {
         .data {
            .change{
               float: left;
               width: 70%;
            }
         }
      }
      .colMiddle{
         min-height: 128px;
      }
   }
   @media (max-width: 619px){
      .colMiddle{
         min-height: 150px;
      }
   }
   @media (max-width: @xs){
      .data{
         margin-top: 10px;
         span{
            font-size: 12px;
         }
      }
      .colRight {
         .data {
            .change{
               width: 90%;
               margin-top: 10px;
            }
         }
      }
      .colLeft {
         .data {
            .change{
               width: 90%;
               margin-top: 10px;
            }
         }
      }
      .colMiddle{
         min-height: 190px;
      }
   }
}
.closePlayer{
   background: @color01;
   color: @color01_type;
   font-weight: bold;
   position: absolute;
   right: 8px;
   cursor: pointer;
   text-align: center;
   width: 25px;
   &:before{
      border-radius: 50%;
      bottom: -30px;
      box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.65);
      content: "";
      height: 30px;
      left: 0;
      position: absolute;
      width: 100%;
   } 
}

.msgCtn{
   margin: 2px auto;
   background: @color01;
   color: @color01_type;
   font-size: 9px;
   border-radius: 4px;
   width: 20%;
   padding: 10px;
   margin: 0 auto;
   .title{
      font-size: 12px;
      font-weight: bold;
   }
   &.info{
      background: @refColor03;
   }
   &.error{
      background: @refColor04;
   }
   .preloader{
      height:15px;
      width:15px;
      margin:5px auto 0;
      position:relative;
      -webkit-animation: rotation .6s infinite linear;
      -moz-animation: rotation .6s infinite linear;
      -o-animation: rotation .6s infinite linear;
      animation: rotation .6s infinite linear;
      border-left:6px solid fadeout(@bg, 75%);
      border-right:6px solid fadeout(@bg, 75%);
      border-bottom:6px solid fadeout(@bg, 75%);
      border-top:6px solid @bg;
      border-radius:100%;
   }
}




/* FIELD 3D */

// Variables
@goalKeeper: 25deg;
@defender: 11.5deg;
@midFielder: 1.5deg;
@playMaker: -16.5deg;
@forward: -15.5deg;
// Styles
.generic-field3d {
   position:relative;

   .jsPlumbLine {
      z-index: 9;
   }
   ._jsPlumb_connector { z-index:4; }
   ._jsPlumb_endpoint { z-index:5; }
   ._jsPlumb_overlay { z-index:6; }

   div.positions {
      position: absolute; 
      z-index: 1000;
      top: 5%;
      left: 20%;
      height: 80%;
      width: 60%;

      > div {
         display: inline-block;
         float:left;
         height:100%;
         width:20%;
      }
      .goalkeeper {
         .skew(-@goalKeeper, 0);
         span.container-player {
            .skew(@goalKeeper, 0);
         }     
      }
      .defender {
         .skew(-@defender, 0);
         span.container-player {
            .skew(@defender, 0);
         }     
      }
      .midfielder {
         .skew(-@midFielder, 0);
         span.container-player {
            .skew(@midFielder, 0);
         }     
      }
      .playmaker {
         .skew(-@playMaker, 0);
         span.container-player {
            .skew(@playMaker, 0);
         }     
      }
      .forward {
         .skew(-@forward, 0);
         span.container-player {
            .skew(@forward, 0);
         }     
      }

      &.invertPositions > div {
         float:right;
         &.goalkeeper {
            .skew(@goalKeeper, 0);
            span.container-player {
               .skew(-@goalKeeper, 0);
            }     
         }
         &.defender {
            .skew(@defender, 0);
            span.container-player {
               .skew(-@defender, 0);
            }     
         }
         &.midfielder {
            .skew(@midFielder, 0);
            span.container-player {
               .skew(-@midFielder, 0);
            }     
         }
         &.playmaker {
            .skew(@playMaker, 0);
            span.container-player {
               .skew(-@playMaker, 0);
            }     
         }
         &.forward {
            .skew(@forward, 0);
            span.container-player {
               .skew(-@forward, 0);
            }     
         }
      }
   }
   &.homeTeam, &.awayTeam {
      span.container-player {
         display: block;
         clear: both;
         width: 100%;
         margin: 0 auto;
         span.player {
            display: block;
            margin: 0 auto 10px auto;
            font: 13px @type_Special;
            height: 43px;
            width: 43px;
            line-height: 43px;
            text-align: center;
            cursor: pointer;
            &.hover-player {
               #translucent .background(@color02, .5);
               .border-radius(60px);
            }
         }
      }
   }
   &.homeTeam {
      span.player {
         background: url('../images/camiseta_local.png') no-repeat;
         color: @homeColor_type;
      }
   }
   &.awayTeam {
      span.player {
         background: url('../images/camiseta_visitante.png') no-repeat;
         color: @awayColor_type;
      }
   }
}