/********Indice********/
/*
1.-Box arc
2.-Box cards
3.-Box comparing and Box Points
4.-Box comparing player
5.-Box elements
6.-Box games
7.-Box numbers
8.-Box select & Box select players
9.-Box shots
10.-Box svg and logos
11.-Box total comparing and box canvas
12.-Box wrapper
13.-Colors
14.-Caption
15.-Disciplinary score
16.-Dividers
17.-Fields
18.-GC container (padding left and right)//
19.-Lines
20.-Players
21.-Tabs wrapper
22.-Title
23.-Time setting
24.-Texts
25.-Slide owl carousel
26.-Share
27.-Specific styles
28.-Sprites
29.-Styles for home and away elements
30.-Stats Center
31.-Video modal
32.-Share Tooltip
*/

//1.-Box arc//
  .boxArc{
      background-image: url('../images/arc.png');
      background-repeat: no-repeat;
      background-position: -90px;
      width:248px;
      height: 72px;
      margin: 22px auto 0;
      padding: 22px 0 0;
      &.right{
        background-position: 90px;
        .boxElements{
          float: right;
        }
        .hidden-xs {
          > div{
            float: right;
          }
        }
      }
      .tooltip{
         top:31px;
      }
   }
   .maxSize-767 {
      .boxArc{
        width: 350px;
        background-position: 0;
        padding-left: 75px;
      }
   }
   .maxSize-479 {
      .boxArc{
         background-image: none;
         padding: 0;
         height: auto;
         width: auto;
         position: relative;
         .boxElements{
            margin-top: 10px;
         }
      }
   }
//2.-Box cards//
   .boxCards{
      text-align: center;
      .boxElements{
         display: inline-block;
      }
   }
//3.-Box comparing and Box Points//
   .boxComparing{
      padding: 5px 10px;
      background: transparent;
      .bar{
         height: 18px;
         overflow: hidden;
         position: relative;
         .border-radius(10px);
         border-width: 1px;
				 border-style:solid;
				 border-color:@bg lighten(@bg,10%) lighten(@bg,10%) @bg;
         margin-top:5px;
         padding: 3px;
         box-shadow: 0 0 2px 0 darken(@bg,50%) inset;
         &:before{
           content: " ";
           background: darken(@bg,20%);
           .border-radius(10px);
           height: 100%;
           width: 100%;
           opacity:0.5;
           top: 0;
           left: 0;
           position: absolute;
         }
         .boxcont{
           .border-radius(10px);
           height: 100%;
           overflow: hidden;
           > div{
             float: left;
             display: block;
             height: 100%;
             z-index: 1;
             position: relative;
             &:after, &:before{
                 height: 100%;
                 width: 100%;
                 position: absolute;
                 z-index: 10;
                 top: 0;
                 left: 0;
                 content: "";
             }
             &:before{
                background: rgba(255,255,255,0.25);
                background: -moz-linear-gradient(top, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 0%, rgba(246,246,246,0.13) 47%, rgba(255,255,255,0) 100%);
                background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.25)), color-stop(0%, rgba(255,255,255,0.25)), color-stop(47%, rgba(246,246,246,0.13)), color-stop(100%, rgba(255,255,255,0)));
                background: -webkit-linear-gradient(top, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 0%, rgba(246,246,246,0.13) 47%, rgba(255,255,255,0) 100%);
                background: -o-linear-gradient(top, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 0%, rgba(246,246,246,0.13) 47%, rgba(255,255,255,0) 100%);
                background: -ms-linear-gradient(top, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 0%, rgba(246,246,246,0.13) 47%, rgba(255,255,255,0) 100%);
                background: linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 0%, rgba(246,246,246,0.13) 47%, rgba(255,255,255,0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
             }
             &:after{
                background: rgba(0,0,0,0);
                background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(246,246,246,0.12) 0%, rgba(0,0,0,0.25) 100%);
                background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(0%, rgba(246,246,246,0.12)), color-stop(100%, rgba(0,0,0,0.25)));
                background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(246,246,246,0.12) 0%, rgba(0,0,0,0.25) 100%);
                background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(246,246,246,0.12) 0%, rgba(0,0,0,0.25) 100%);
                background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(246,246,246,0.12) 0%, rgba(0,0,0,0.25) 100%);
                background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(246,246,246,0.12) 0%, rgba(0,0,0,0.25) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
             }
             &.boxColor01{
               background: @color01;
             }
             &.boxColor02{
               background: @color02;
             }
             &.correct{
               background: @positive;
             }
             &.incorrect{
               background: @negative;
             }
           }
         }
      }
      &.stats{
         .bar{
           .boxcont{
             > div{
               float: none;
               > div{
                 float: left;
                 display: block;
                 height: 100%;
                 z-index: 1;
                 position: relative;
                 &:after, &:before{
                   height: 100%;
                   width: 100%;
                   position: absolute;
                   z-index: 10;
                   top: 0;
                   left: 0;
                   content: "";
                   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                   background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.2)));
                   background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);
                   background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);
                   background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);
                   background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);
                   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
                 }
               }
               &:after, &:before{
                 display: none;
               }
             }
           }
         }
      }
      &.canvasSet{
         height: 100px;
         text-align: center;
         position: relative;
         margin: 0 auto;
         padding: 0;
         display: block;
         &.shadow{
           width: 80px;
           height: 80px;
           .border-radius(50%);
           &:before,&:after{
             content: " ";
             display: block;
             .border-radius(50%);
             position: absolute;
						 z-index:1;
           }
					 &:before{
             height: 45%;
             .box-shadow-inset(0, 0, 5px, 0, rgba(0, 0, 0, 0.25));
             width: 45%;
             top: 28%;
             left: 28%;
           }
					 &:after{
             height: 90%;
             .box-shadow(0 0 5px rgba(0, 0, 0, 0.25));
             width: 90%;
             top: 5%;
             left: 5%;
           }
         }
         canvas{
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 100px;
            width: 100px;
            &.small{
               width: 50px;
               height: 50px;
            }
         }
         .text{
            position: absolute;
            top: 39px;
            left: 0;
            right: 0;
            color: @bg_type;
            margin: 0 auto;
            font-size: 18px;
         }
         &.small{
            height: 50px;
            margin: 0 auto;
            .text{
               top: 15px;
            }
         }
         .tooltip{
            top: 110px;
         }
      }
      .boxStats{
         padding-top: 4px;
         div{
            text-align: center;
            &:first-child{
               text-align: left;
            }
            &:last-child{
               text-align: right;
            }
         }
      }
      .boxData{
         font-size: 10px;
         height: auto;
         text-align: center;
         line-height: 18px;
         > div{
            background:@bg;
            .border-radius(4px);
            .box-shadow(0 0 5px darken(@bg, 20%));
            margin: 0 10%;
         }
      }
   }
   .boxPoints{
     min-height: 238px;
     .boxResults{
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-end;
        align-items: flex-end;
        &.right{
          -webkit-align-items: flex-start;
          align-items: flex-start;
          .tooltip{
            right: inherit;
            left: 40px;
          }
        }
        >div{
          margin:0 0 5px;
        }
        .tooltip{
          margin-top: 4px;
          right: 40px;
          .tooltip-inner{
            min-height: 22px;
            text-transform: uppercase;
            font-family: @type_Special;
            font-size: 11px;
            padding-top: 4px;
            font-weight: 100;
          }
        }
        .boxElements{
          div:not(.tooltip){
            width: 30px;
            height: 30px;
            line-height: 30px;
            &.boxColor01{
              background:@referenceColor05;
              color:@referenceColor05_type;
            }
            &.boxColor02{
              background:@referenceColor06;
              color:@referenceColor06_type;
            }
            &.boxColor03{
              background:@referenceColor07;
              color:@referenceColor07_type;
            }
            &.boxColor04{
              background:@referenceColor08;
              color:@referenceColor08_type;
            }
            &.boxColor05{
              background:@referenceColor09;
              color:@referenceColor09_type;
            }
          }
        }
     }
     .boxComparing{
       margin-top: 32px;
       .tooltip{
          position: relative;
          margin: 0 auto;
          width: 55px;
          .tooltip-inner {
            min-height: 22px;
            font-size: 9px;
            padding: 0 3px;
            line-height: 22px;
            text-align: center;
          }
       }
     }
   }
   .maxSize-479 {
     .boxComparing{
       .bar{
         margin: 0;
       }
     }
     .boxPoints{
       min-height: 408px;
       .boxComparing{
         position: absolute;
         top: 0;
         margin: 0;
       }
       .colRight{
         .boxComparing{
           right: 0;
         }
       }
       .boxResults{
         position: absolute;
         top: 170px;
         left: 0;
         right: 0;
         margin: 0 auto;
         min-width: 60%;
         .tooltip{
           width: 56%;
           position: absolute;
           left: 0;
           right: 0;
           margin: 5px auto 0;
           &:before{
             border-right: 5px solid #000;
             left: 0;
             content: "";
             position: absolute;
             width: 0;
             height: 0;
             border-top: 5px solid transparent;
             border-bottom: 5px solid transparent;
             top: 6px;
           }
           .tooltip-inner{
             text-align: center;
           }
         }
         &.right{
           .tooltip{
             display: none;
           }
         }
       }
     }
   }
   .maxSize-310{
     .boxPoints{
       .boxResults{
         min-width: 80%;
       }
     }
   }
//4.-Box comparing player//
   .boxComparingPlayer{
      .firstPlayer, .secondPlayer{
         .boxElements{
            margin-top: 6%;
         }
         .boxData{
            margin-top: 6%;
         }
      }
      .secondPlayer{
         > div:not(.boxData) {
            float: right;
         }
         .boxData{
            text-align: right;
            .btn{
               float: right;
            }
         }
      }
      .boxMiddle{
         position: relative;
         padding: 12px 0 0;
         .boxElements{
            div{
               background: @color01;
               color: @color01_type;
               width: 100px;
               height: 100px;
               font-size: 50px;
               line-height: 100px;
            }
            &:after {
               content: "";
               display: block;
               position: absolute;
               z-index: 1;
               bottom: -8px;
               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;

               /* 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;
            }
         }
      }
   }
   .maxSize-767 {
      .boxComparingPlayer{
         .boxMiddle{
            padding: 68px 0 0;
            .boxElements{
               div{
                  width: 50px;
                  height: 50px;
                  font-size: 30px;
                  line-height: 50px;
               }
            }
         }
      }
   }
   .maxSize-479 {
      .boxComparingPlayer{
         padding: 5px;
         .firstPlayer, .secondPlayer{
            .boxElements{
               margin-top: 2%;
               div{
                  margin: 0;
               }
            }
            .boxData{
               margin-top: 2%;
            }
         }
         .secondPlayer{
            .boxElements {
               div{
                  float: right;
               }
            }
         }
         .boxMiddle{
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 36%;
            padding: 0;
            .boxElements{
               div{
                  width: 35px;
                  height: 35px;
                  font-size: 20px;
                  line-height: 35px;
               }
               &:after{
                  height: 0;
               }
            }
         }
      }
   }
//5.-Box elements//
   .boxElements{
      display: block;
      text-align: center;
      > div:not(.tooltip) {
         .border-radius(50%);
         width: 35px;
         height: 35px;
         line-height: 35px;
         margin:0 auto;
         font-size: 18px;
         font-family: @type_Special;
         position: relative;
         overflow:hidden;
         .box-shadow(0 0 3px darken(@bg, 25%));
         &.flag{
            line-height: normal;
            background-position: center center;
            background-repeat: no-repeat;
         }
         &.big{
            line-height: 50px;
            width: 50px;
            height: 50px;
         }
         &.small{
            width: 16px;
            height: 16px;
            line-height: 16px;
            font-size: 9px;
         }
         &.noResults{
            .box-shadow(0 0 0 transparent);
            border:1px dashed darken(@bg, 25%);
         }
      }
      .flag{
         background: #FFFFFF;
         line-height: 28px;
         &.m-homeColor-b, &.m-awayColor-b{
            line-height: 35px;
            width: 45px;
            height: 45px;
         }
         img{
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            position: relative;
            top: 50%;
            vertical-align: initial;
         }
      }
      .icon{
         background: #FFFFFF;
      }
      .data{
         background: @bg;
         color:@bg_type;
         .text{
            line-height: 38px;
         }
      }
      .images{
         width: 50px;
         height: 50px;
         img{
            vertical-align: top;
            width: 100%;
         }
      }
      .boxColor01{
         background: @color01;
         color:@color01_type;
         .text{
            color:@color01_type;
         }
      }
      .boxPositive{
         background: @positive;
         color:@positive_type;
      }
      .boxNeutral{
         background:@neutral;
         color:@neutral_type;
      }
      .boxNegative{
         background: @negative;
         color:@negative_type;
      }
      .boxShots01{
         background: @referenceColor01;
         color:@referenceColor01_type;
      }
      .boxShots02{
         background: @referenceColor02;
         color:@referenceColor02_type;
      }
      .boxShots03{
         background: @referenceColor03;
         color:@referenceColor03_type;
      }
      .boxShots04{
         background: @referenceColor04;
         color:@referenceColor04_type;
      }
      &.button{
         cursor: pointer;
         > div{
            width: 40px;
            height: 40px;
            line-height: 34px;
            &.active{
               line-height: 28px;
               border: 3px solid @color02;
            }
         }
         &:hover{
            > div{
               line-height: 28px;
               border: 3px solid @color02;
            }
         }
      }
   }
//6.-Box games//
   .boxGame{
      max-height: 235px;
      overflow-y: auto;
      .games{
         padding:10px;
         .dataBox{
            background:@bg;
            .border-radius(4px);
            .box-shadow(0 0 5px darken(@bg, 20%));
            position: relative;
            color: @bg_type;
            text-align: center;
            .box1{
               line-height: 12px;
               font-size: 12px;
               padding: 6px 0;
               span{
                  display: block;
                  color: @bg_type;
                  &:nth-child(2){
                     font-weight: bold;
                  }
               }
            }
            .box2{
               padding: 12px 0;
               font-size: 11px;
               text-transform: uppercase;
               font-weight: bold;
               line-height: 12px;
               border-left: 1px solid darken(@bg,20%);
               span{
                  font-size: 12px;
               }
               .won{
                  color: @positive;
               }
               .tied{
                  color: @neutral;
               }
               .suspended{
                  color:@bg_type;
               }
               .lost{
                  color: @negative;
               }
            }
         }
         .boxElements{
            > div{
               margin-top: 12px;
               text-shadow: 0 0 3px @color02;
               &.won{
                  background: @positive;
                  color: @positive_type;
               }
               &.tied{
                  background: @neutral;
                  color: @neutral_type;
               }
               &.suspended{
                  background: @bg_type;
                  color: @bg;
               }
               &.lost{
                  background: @negative;
                  color: @negative_type;
               }
               &.flag{
                  margin-top: 0;
               }
            }
         }
         &.mobileBox{
            min-height:55px;
            padding:10px;
            .resultsBox{
               height:40px;
               overflow-y:auto;
               .boxElements{
                  display: inline-block;
                  height: 40px;
                  > div{
                     cursor: pointer;
                     &.selected{
                        width: 25px;
                        height: 25px;
                        line-height: 25px;
                        margin: 6px auto;
                     }
                  }
               }
            }
            .dataBox{
               margin: 10px 0;
            }
         }
      }
   }
//7.-Box numbers//
   .boxNumber{
      font-size:8px;
      font-size: 8px;
      margin-left: 6px;
      padding: 2px 6px;
      text-align: center;
      .border-radius(4px);
      &.boxColor01{
         background: @color01;
         color:@color01_type;
      }
   }
//8.-Box select//
   .boxSelect{
      width: 50%;
      -moz-appearance: none;
      text-indent: 0.01px;
      text-overflow: '';
      background: url('../images/arrow_select.png') no-repeat scroll 96% center @color01;
      color: @color02_type;
      height: 30px;
      line-height: 23px;
      margin-bottom: 1px !important;
      padding-left: 10px !important;
      font-weight: bold;
      text-align: left;
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      text-transform: uppercase;
      cursor:pointer;
      font-weight: bold;
      padding-top: 5px !important;
      .border-radius(0);
      option{
         background: @bg;
         color:@bg_type;
         cursor:pointer;
      }
      &:focus{
         outline:none;
      }
   }
//9.-Box shots//
   .boxShots{
      .home{
         .boxComparing{
            float: right;
         }
      }
      .away{
         .boxComparing{
            float: left;
         }
      }
      .tooltip{
         position: relative;
         min-width: 55px;
         margin: 0 auto;
         width: 55px;
         .tooltip-inner{
            min-height: 22px;
            font-size: 9px;
            padding: 0 3px;
            line-height: 22px;
            text-align: center;
         }
      }
      .tooltipShotsMobile{
         position: absolute;
         left: 0;
         right: 0;
         margin: 0 auto;
         top: 182px;
         > div{
            background: @color02;
            min-height: 23px;
            color: @color02_type;
            text-align: center;
            line-height: 23px;
            margin-top: 23px;
            font-size: 9px;
            position: relative;
            &:before,&:after{
               content: "";
               position: absolute;
               width: 0;
               height: 0;
               border-top: 5px solid transparent;
               border-bottom: 5px solid transparent;
               top: 7px;
            }
            &:before{
               border-right: 5px solid @color02;
               left: -5px;
            }
            &:after{
               border-left: 5px solid @color02;
               right: -5px;
            }
         }
      }
   }
   .maxSize-991{
      .boxShots{
         .boxComparing{
            float: none;
            margin-bottom: 40px;
         }
      }
   }
//10.-Box svg and logos//
   .boxStuff{
      background-color: darken(@bg, 15%);
      background-size:cover;
      background-position:center top;
      background-repeat: no-repeat;
      height: 130px;
      width: 130px;
      position: relative;
      overflow: hidden;
      margin: 10px auto;
      .border-radius(50%);
      text-align: center;
      .box-shadow(0 0 5px darken(@bg, 20%));
      svg, canvas{
         height: 180px;
         position: absolute;
         left: -25px;
         width: 180px;
      }
      &.logos{
         height: 60px;
         width: 100%;
         .border-radius(4px);
         .box-shadow(0 0 0 transparent);
      }
      img{
         width: 100%;
      }
      title, h1, p{
         font-size: 10px;
      }
   }
   .boxImagesWin{
      position: relative;
      > div{
         height: 115px;
         width: 115px;
         position: relative;
         overflow: hidden;
         margin: 8px auto 0;
         .border-radius(50%);
         .box-shadow(0 0 5px darken(@bg, 20%));
         .boxStuff{
            margin: 0 auto;
            width:115px;
            height: 115px;
            svg, canvas{
               left:-20px;
            }
         }
         img{
            width: 100%;
         }
      }
      span{
         width: 150px;
         height: 132px;
         margin: 0 auto;
         display: block;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         svg, canvas{
            margin: -18px 0 0 -10px;
         }
      }
   }
   .maxSize-1199{
      .boxStuff{
         height: 110px;
         width: 110px;
         svg, canvas{
           height: 160px;
           width: 160px;
         }
         &.logos{
            height: 60px;
            width: 100%;
         }
      }
   }
   .maxSize-991{
      .boxImagesWin{
         > div{
            .boxStuff{
               svg, canvas{
                  left:-14px;
               }
            }
         }
      }
      .boxStuff{
         height: 100px;
         width: 100px;
         svg, canvas{
            height: 150px;
            width: 150px;
         }
      }
   }
   .maxSize-767{
      .boxStuff{
         height: 130px;
         width: 130px;
         svg, canvas{
           height: 180px;
           width: 180px;
         }
      }
      .boxImagesWin{
         > div{
            .boxStuff{
               svg, canvas{
                  left: -28px;
               }
            }
         }
      }
   }
   .maxSize-479{
      .boxStuff{
         height: 80px;
         width: 80px;
         svg, canvas{
            height: 120px;
            width: 130px;
         }
      }
      .boxImagesWin{
         > div{
            height: 50px;
            width: 50px;
            .boxStuff{
               width:50px;
               height: 50px;
               svg, canvas{
                  height: 78px;
                  width: 96px;
                  left: -10px;
               }
            }
         }
         span{
            background-size: 70px auto;
            height: 68px;
            width: 68px;
            svg, canvas{
               margin: -54px 0 0 -10px;
               width: 86px;
            }
         }
      }
   }
//11.-Box total comparing and box canvas//
   .boxTotalComparing{
      text-align: center;
      padding-top:30px;
      .text{
         font-size: 24px;
         text-transform: none;
         font-weight: bold;
         &.number{
            color:@bg_dest_type;
         }
      }
   }
   .boxCanvasText{
      padding-top: 20px;
      div{
         padding-top: 5px;
      }
   }
   .maxSize-767 {
      .boxCanvasText{
         padding-top: 5px;
         text-align: center;
      }
      .boxTotalComparing{
         text-align: center;
         padding:30px 0;
      }
   }
//12.-Box wrapper//
   .boxWrapper{
      margin: 0 auto 20px;
      position: relative;
      padding: 0;
      .boxContent{
         border: 1px solid darken(@bg,20%);
         border-top: 0;
         padding:15px;
         background: @bg;
         position: relative;
         .border-radius(4px);
         .box-shadow(0 0 5px darken(@bg, 20%));
         .captionBoxShadow(@bg);
         &.inside{
            #gradient .vertical-three-colors(darken(@bg,10%), @bg, 20%, @bg);
         }
         &.boxShots{
            padding-bottom: 45px;
         }
      }
      &.effect{
         .boxComparing{
            .bar{
               margin-top: 10px;
            }
         }
      }
      &.boxLastGames{
        .boxContent{
            min-height: 168px;
            .msjDatos{
              top:45%;
            }
        }
         .setBox{
            &.primary{
               .boxElements{
                  position: relative;
                  border-bottom: 1px solid darken(@bg, 10%);
                  padding-bottom: 10px;
                  &.conteinerLogoHome{
                      border-bottom:0;
                      &:before{
                         width: 0;
                         height: 0;
                      }
                  }
                  &:before{
                     content: " ";
                     width: 2px;
                     height: 10px;
                     background: darken(@bg, 10%);
                     display: block;
                     position: absolute;
                     right: 0;
                     bottom: -5px;
                  }
               }
            }
            .boxElements{
              .default{
                border: 1px dashed darken(@bg, 10%);
                background-color: transparent;
              }
            }
         }
      }
   }
   .maxSize-767 {
      .boxWrapper{
         .boxContent{
            &.boxShots{
               padding: 0 0 45px;
            }
         }
      }
   }
   .maxSize-479 {
      .boxWrapper{
         .boxContent{
            padding: 15px 2px 15px;
         }
      }
   }
//13.-Colors//
   .bg{
      background: @bg;
   }
   .bgType{
      color:@bg_type;
   }
   .bgDestType{
      color:@bg_dest_type;
   }
   .color01{
      background: @color01;
   }
   .color01Type{
      color:@color01_type;
   }
   .color02{
      background: @color02;
   }
   .color02Type{
      color:@color02_type;
   }
   .referenceColor01{
      background: @referenceColor01;
   }
   .referenceColor01_type{
      color:@referenceColor01_type;
   }
   .referenceColor02{
      background: @referenceColor02;
   }
   .referenceColor02_type{
      color:@referenceColor02_type;
   }
   .referenceColor03{
      background: @referenceColor03;
   }
   .referenceColor03_type{
      color:@referenceColor03_type;
   }
   .referenceColor04{
      background: @referenceColor04;
   }
   .referenceColor04_type{
      color:@referenceColor04_type;
   }
   .referenceColor05{
      background: @referenceColor05;
   }
   .referenceColor05_type{
      color:@referenceColor05_type;
   }
   .referenceColor06{
      background: @referenceColor06;
   }
   .referenceColor06_type{
      color:@referenceColor06_type;
   }
   .referenceColor07{
      background: @referenceColor07;
   }
   .referenceColor07_type{
      color:@referenceColor07_type;
   }
   .referenceColor08{
      background: @referenceColor08;
   }
   .referenceColor08_type{
      color:@referenceColor08_type;
   }
   .referenceColor09{
      background: @referenceColor09;
   }
   .referenceColor09_type{
      color:@referenceColor09_type;
   }
   .referenceColor10{
      background: @referenceColor10;
   }
   .referenceColor10_type{
      color:@referenceColor10_type;
   }
   .referenceColor11{
      background: @referenceColor11;
   }
   .referenceColor11_type{
      color:@referenceColor11_type;
   }
   .referenceColor12{
      background: @referenceColor12;
   }
   .referenceColor12_type{
      color:@referenceColor12_type;
   }
   .referenceColor13{
      background: @referenceColor13;
   }
   .referenceColor13_type{
      color:@referenceColor13_type;
   }
   .referenceColor14{
      background: @referenceColor14;
   }
   .referenceColor14_type{
      color:@referenceColor14_type;
   }
   .positive{
      background: @positive;
   }
   .positive2{
      color: @positive;
   }
   .positiveType{
      color:@positive_type;
   }
   .neutral{
      background: @neutral;
   }
   .neutralType{
      color:@neutral_type;
   }
   .negative{
      background: @negative;
   }
   .negative2{
      color: @negative;
   }
   .negativeType{
      color:@negative_type;
   }
   .homeColor{
      background: @homeColor;
   }
   .homeType{
      color:@homeColor_type;
   }
   .awayColor{
      background:@awayColor;
   }
   .awayType{
      color:@awayColor_type;
   }
//14.-Caption//
   .caption {
      position: relative;
      text-align: center;
      display: none;
      .captionBoxShadow(@bg);
      &.nav {
         background: @color02;
         height: 30px;
         .border-radius(4px);
         padding: 4px;
         margin: 10px 0;
         .awayBar,.homeBar{
            line-height: normal;
            cursor: pointer;
            font-family: @type_Special;
            float: left;
            width: 50%;
            text-transform: uppercase;
            .border-radius(4px);
            background: @color02;
            color:@color02_type;
            &.on{
               background: @color01;
               color:@color01_type;
            }
         }
      }
   }
   .captionTable{
      font-size: 10px;
      font-family: @baseFontFamily;
      text-transform: uppercase;
      color: @bg_type;
      margin-bottom: 10px;
      font-weight: 600;
   }
   .maxSize-479{
      .caption{
         &.nav{
            .awayBar,.homeBar{
               line-height: 22px;
               height: 100%;
               font-size: 12px;
            }
         }
      }
   }
   .maxSize-767{
      .captionTable{
        margin: 0 10px 10px 10px;
      }
   }
//15.-Disciplinary score//
  .tag{
    background-color: @color01;
    color:@color01_type;
    font-size: 11px;
    padding: 3px 10px;
    .border-radius(4px);
    font-weight: normal;
    margin: 0 auto;
    line-height: normal;
    display: inline;
    left: 0;
    right: 0;
    height: auto;
    z-index: 1;
    text-align: center;
    white-space: nowrap;
    &.secondary{
      background-color: @color02;
      color:@color02_type;
    }
  }
  .symbol{
    background-color: @positive;
    border-radius: 10px;
    font-size: 10px;
    text-transform: uppercase;
    color: @positive_type;
    padding: 0 4px;
    margin: 4px 0 0 4px;
    float: left;
    display: block;
    line-height: 14px;
    height: 14px;
  }
  .definicionTribunal{
    height: 20px;
    div{
      .tag;
      float: right;
      font-style: italic;
      margin: 14px 15px 0 0;
    }
  }
   .maxSize-479 {
      .definicionTribunal{
         div{
            margin: 10px 0;
            float: left;
         }
      }
   }
   
//16.-Dividers//
   .V_divider{
      &:after{
         .G_divider;
      }
   }
//17.-Fields//
   // Variables
      @goalKeeper: 25deg;
      @defender: 11.5deg;
      @midFielder: 1.5deg;
      @playMaker: -16.5deg;
      @forward: -15.5deg;
   // Field 3d
      .field3d {
         position:relative;
         margin: 10px 0;
         padding: 0 10px;
         .jsPlumbLine {
            z-index: 9;
         }
         ._jsPlumb_connector { z-index: 0; }
         ._jsPlumb_endpoint { z-index:5; }
         ._jsPlumb_overlay { z-index:6; }
         &.homeTeam, &.awayTeam {
            display: inline-block;
            height: 100%;
            margin-bottom: 30px;
            img.img-responsive{
               width: 100%;
            }
            .positions {
               position: absolute;
               top: 0;
               left: 20%;
               height: 80%;
               width: 60%;
               z-index: 9999;
               > div {
                  display: inline-block;
                  float:left;
                  height:100%;
                  width:20%;
                  &.goalkeeper {
                     .skew(-@goalKeeper, 0);
                     .wrapperPlayer {
                        .skew(@goalKeeper, 0);
                     }
                  }
                  &.defender {
                     .skew(-@defender, 0);
                     .wrapperPlayer {
                        .skew(@defender, 0);
                     }
                  }
                  &.midfielder {
                     .skew(-@midFielder, 0);
                     .wrapperPlayer {
                        .skew(@midFielder, 0);
                     }
                  }
                  &.playmaker {
                     .skew(-@playMaker, 0);
                     .wrapperPlayer {
                        .skew(@playMaker, 0);
                     }
                  }
                  &.forward {
                     .skew(-@forward, 0);
                     .wrapperPlayer {
                        .skew(@forward, 0);
                     }
                  }
                  .wrapperPlayer{
                     display: block;
                     width: 100%;
                     clear: both;
                     position: relative;
                     margin: 0 auto;
                     .containerPlayer{
                           height: 45px;
                           position: absolute;
                           left: 10px;
                           svg, canvas{
                              width: 45px;
                           }
                           span.player {
                              display: block;
                              font:bold 14px @type_Special;
                              line-height: 36px;
                              text-align: center;
                              cursor: pointer;
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              top: 0;
                              text-indent: -7px;
                              text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
                              color:#FFF;
                              /*margin: 0 auto 10px auto;*/
                              &.hoverPlayer {
                                 #translucent .background(@color02, .5);
                                 .border-radius(60px);
                              }
                           }
                     }
                  }
               }
               &.invertPositions {
                  > div {
                     float:right;
                     &.goalkeeper {
                        .skew(@goalKeeper, 0);
                        .wrapperPlayer {
                           .skew(-@goalKeeper, 0);
                        }
                     }
                     &.defender {
                        .skew(@defender, 0);
                        .wrapperPlayer{
                           .skew(-@defender, 0);
                        }
                     }
                     &.midfielder {
                        .skew(@midFielder, 0);
                        .wrapperPlayer{
                           .skew(-@midFielder, 0);
                        }
                     }
                     &.playmaker {
                        .skew(@playMaker, 0);
                        .wrapperPlayer {
                           .skew(-@playMaker, 0);
                        }
                     }
                     &.forward {
                        .skew(@forward, 0);
                        .wrapperPlayer {
                           .skew(-@forward, 0);
                        }
                     }
                  }
               }
            }
            .substitute{
               position: absolute;
               bottom:10px;
               left: 0;
               right: 0;
               margin: 0 auto;
               width: auto;
               z-index: 99999;
               text-align: center;
               height: 43px;
               .wrapperPlayer{
                  display: inline-block;
                  margin: 0 auto;
                  width: 45px;
                  .containerPlayer{
                       height: 45px;
                       position: absolute;
                        svg, canvas{
                           width: 45px;
                        }
                        span.player {
                           display: block;
                           font:bold 14px @type_Special;
                           line-height: 36px;
                           text-align: center;
                           cursor: pointer;
                           width: 100%;
                           height: 100%;
                           position: absolute;
                           top: 0;
                           text-indent: -7px;
                           text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
                           color:#FFF;
                           /*margin: 0 auto 10px auto;*/
                           &.hoverPlayer {
                              #translucent .background(@color02, .5);
                              .border-radius(60px);
                           }
                        }
                  }
               }
            }
            .tooltip{
               min-width: 70px;
               z-index: 9999;
            }
         }
      }
      .maxSize-479{
         .field3d {
            &.homeTeam, &.awayTeam {
               width: 100%;
               .positions{
								 top:-4%;
                  .wrapperPlayer{
                     .containerPlayer{
                        width: 32px;
                        svg, canvas{
                           width: 29px;
                        }
                        span.player {
                           font-size: 11px;
                           line-height:27px;
                           text-indent: -4px;
                           height: auto;
                           &.hoverPlayer {
                              #translucent .background(@color02, .5);
                              .border-radius(60px);
                           }
                        }
                     }
                  }
               }
               .substitute{
                  bottom: -3px;
                  .wrapperPlayer{
                     .containerPlayer{
                        width: 32px;
                        svg, canvas{
                           width: 29px;
                        }
                        span.player {
                           font-size: 11px;
                           line-height:27px;
                           text-indent: -4px;
                           height: auto;
                           &.hoverPlayer {
                              #translucent .background(@color02, .5);
                              .border-radius(60px);
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   // Field Game
      .fieldGame {
         img{
            width: 100%;
         }
         white-space: nowrap;
         position: relative;
         margin: 38px 20px;
         z-index: 0;
         .publishBanner{
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            opacity: .53;
            height: 100%;
         }
         .incidences {
            position: absolute;
            width: 55.5%;
            height: 82.8%;
            top: 5%;
            left: 22.5%;
            .point-home, .point-away{
               position: absolute;
               height:25px;
               width:20px;
               margin:-20px 0 0 -10px;
               -moz-transition: all 0.3s ease-out;
               -ms-transition: all 0.3s ease-out;
               -o-transition: all 0.3s ease-out;
               transition: all 0.3s ease-out;
               background-position: center top, center bottom;
               background-repeat: no-repeat;
                     .inc,.overInc{
                        width:12px;
                        height:12px;
                        top:2px;
                        left:4px;
                        position:absolute;
                        border-radius:50%;
                        -webkit-border-radius: 50%;
                        overflow: hidden;
                        .path{
                           z-index: 10;
                           &.diagRL{
                              background: @bg;
                              height: 100%;
                              left: 0;
                              position: absolute;
                              top: 0;
                          -moz-transform: rotate(45deg);
                          -webkit-transform: rotate(45deg);
                          -o-transform: rotate(45deg);
                          -ms-transform: rotate(45deg);
                          transform: rotate(45deg);
                              width: 33.3%;
                              right: 0;
                              margin: 0 auto;
                           }
                           &.diagLR{
                              background: @bg;
                              height: 100%;
                              left: 0;
                              position: absolute;
                              top: 0;
                            -moz-transform: rotate(-45deg);
                            -webkit-transform: rotate(-45deg);
                            -o-transform: rotate(-45deg);
                            -ms-transform: rotate(-45deg);
                            transform: rotate(-45deg);
                              width: 33.3%;
                              right: 0;
                              margin: 0 auto;
                           }
                           &.vert{
                              background: @bg;
                              height: 100%;
                              left:0;
                              position: absolute;
                              top: 0;
                              width: 33.3%;
                              right: 0;
                              margin: 0 auto;
                           }
                           &.horiz{
                              background: @bg;
                              height: 35%;
                              position: absolute;
                              top: 38%;
                              width: 100%;
                           }
                           &.circ{
                              background: @bg;
                              height:50%;
                              position: absolute;
                              top: 25%;
                              width: 50%;
                              border-radius: 50%;
                              left: 0;
                              right: 0;
                              margin: 0 auto;
                           }
                           &.rhombus{
                              background: @bg;
                              height:50%;
                              width: 50%;
                              left: 0;
                              position: absolute;
                            -moz-transform: rotate(45deg);
                            -webkit-transform: rotate(45deg);
                            -o-transform: rotate(45deg);
                            -ms-transform: rotate(45deg);
                            transform: rotate(45deg);
                              right: 0;
                              top: 25%;
                              margin: 0 auto;
                           }
                           &.vshapeL{
                              background: @bg;
                              height:33.3%;
                              width: 100%;
                              left: -65%;
                              position: absolute;
                              right: 0;
                              top: 25%;
                              margin: 0 auto;
                              -moz-transform: rotate(45deg) skewX(45deg);
                              -webkit-transform: rotate(45deg) skewX(45deg);
                              -o-transform: rotate(45deg) skewX(45deg);
                              -ms-transform: rotate(45deg) skewX(45deg);
                              transform: rotate(45deg) skewX(45deg);
                           }
                           &.vshapeR{
                              background: @bg;
                              height:33.3%;
                              width: 100%;
                              left: 0;
                              position: absolute;
                              right: -65%;
                              top: 25%;
                              margin: 0 auto;
                              -moz-transform: rotate(-45deg) skewX(-45deg);
                              -webkit-transform: rotate(-45deg) skewX(-45deg);
                              -o-transform: rotate(-45deg) skewX(-45deg);
                              -ms-transform: rotate(-45deg) skewX(-45deg);
                              transform: rotate(-45deg) skewX(-45deg);
                           }
                           &.half{
                              background: @bg;
                              height: 100%;
                              left:0;
                              position: absolute;
                              top: 0;
                              width: 50%;
                           }
                           &.square{
                              background: @bg;
                              height:50%;
                              width: 50%;
                              left: 0;
                              position: absolute;
                              right: 0;
                              top: 25%;
                              margin: 0 auto;
                           }
                        }
                     }
                     .overInc{
                        -webkit-box-shadow:inset 1px 1px 1px 0 rgba(0,0,0,0.4);
                        box-shadow:inset 1px 1px 1px 0 rgba(0,0,0,0.4);
                        z-index: 20px;
                     }
            }
            .point-home {
               background-image: url('../images/ico_disparos_loc.png'), url('../images/ico-shadow.png');
               &.goal{
                  background-image: url('../images/ico_disparos_loc.png'), url('../images/ico-mark-gol.png');

               }
            }
            .point-away {
               background-image: url('../images/ico_disparos_vis.png'), url('../images/ico-shadow.png');
               &.goal{
                  background-image: url('../images/ico_disparos_vis.png'), url('../images/ico-mark-gol.png');
               }
            }
            &.incHide .point-home, &.incHide .point-away, .point-home.newPoint, .point-away.newPoint{
               opacity: 0;
               pointer-events:none;
               height:65px;
               margin-top:-60px;
            }
         }
         &:after, &:before{
            content:"";
            position:absolute;
            z-index:-2;
            bottom:15px;
            left:10px;
            width:50%;
            height:7%;
            max-width:300px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);
            -moz-transform:rotate(-3deg);
            -ms-transform:rotate(-3deg);
            -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
         }
         &:after{
            right:10px;
            left:auto;
            -webkit-transform:rotate(3deg);
            -moz-transform:rotate(3deg);
            -ms-transform:rotate(3deg);
            -o-transform:rotate(3deg);
            transform:rotate(3deg);
         }
      }
      .maxSize-479 {
         .fieldGame {
            margin: 15px 5px;
            .incidences {
               .point-home,.point-away{
                  height:15px;
                  width:12px;
                  margin:-12px 0 0 -6px;
                         .inc,.overInc{
                              width:8px;
                              height:8px;
                              top:1px;
                              left:2px;
                           }
               }
               .point-home {
                  background-image: url('../images/ico_disparos_loc_p.png'), url('../images/ico-shadow-small.png');
                  &.goal{
                     background-image: url('../images/ico_disparos_loc_p.png'), url('../images/ico-mark-gol-small.png');
                  }
               }
               .point-away {
                  background-image: url('../images/ico_disparos_vis_p.png'), url('../images/ico-shadow-small.png');
                  &.goal{
                     background-image: url('../images/ico_disparos_vis_p.png'), url('../images/ico-mark-gol-small.png');
                  }
               }
               &.incHide .point-home, &.incHide .point-away{
                  height:30px;
                  margin-top:-27px;
               }
            }
         }
      }
      .ie9{
         .fieldGame {
            .incidences {
               &.incHide{
                  display: none;
                  .point-home,.point-away{
                     display: none;
                  }
               }
               .point-home.newPoint, .point-away.newPoint{
                  display: none;
               }


            }
         }
      }
      .ie8{
         .fieldGame {
            .incidences {
               .point-home {
                  background-image: url('../images/ico_ie8_loc.png');
                  &.goal{
                     background-image: url('../images/ico_ie8_loc_goal.png');
                  }
               }
               .point-away {
                  background-image: url('../images/ico_ie8_vis.png');
                  &.goal{
                     background-image: url('../images/ico_ie8_vis_goal.png');
                  }
               }
            }
         }
         &.maxSize-479 {
            .gameField {
               .incidences {
                  .point-home {
                     background-image: url('../images/ico_ie8_loc_small.png');
                     &.goal{
                        background-image: url('../images/ico_ie8_loc_goal_small.png');
                     }
                  }
                  .point-away {
                     background-image: url('../images/ico_ie8_vis_small.png');
                     &.goal{
                        background-image: url('../images/ico_ie8_vis_goal_small.png');
                     }
                  }
               }
            }
         }
      }
   // Field Lineal//
      .fieldLineal{
         .field {
            position:relative;
            white-space: nowrap;
            overflow: hidden;
            >.homeTeam, > .awayTeam {
               display: inline-block;
               width: 50%;
               > .gameField {
                  height: 257px;
                  background-image: url('../images/bg_canchita.jpg');
                  position: relative;
                  .positions {
                     position: relative;
                     height:100%;
                     > div {
                        position: absolute;
                        width: 48px;
                        top: 0;
                        height:100%;
                        .wrapperPlayer{
                           display: block;
                           width: 100%;
                           float: left;
                           position: relative;
                           .containerPlayer{
                                height: 45px;
                                position: absolute;
                                top: 50%;
                                margin-top: -25px;
                              svg, canvas{
                                 width: 45px;
                              }
                              span.player {
                                 display: block;
                                 font:bold 13px @type_Special;
                                 line-height: 36px;
                                 text-align: center;
                                 cursor: pointer;
                                 width: 100%;
                                 height: 100%;
                                 position: absolute;
                                 top: 0;
                                 text-indent: -6px;
                              	 text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
                                 color:#FFF;
                                 &.hoverPlayer {
                                    #translucent .background(@color02, .5);
                                    .border-radius(60px);
                                 }
                              }
                           }
                        }
                        .tooltip{
                           height:auto;
                           width: auto;
                           div{
                              height:auto;
                              position:relative;
                              width: 100%;
                              &.tooltip-arrow{
                                 position: inherit;
                                 top: 14px;
                                 width: 0px;
                                 margin-right: 0px
                              }
                              &.tooltip-inner{
                                 margin:0;
                                 width:100%;
                                 padding-right: 5px;
                                 line-height: 25px;
                              }
                           }
                        }
                     }
                  }
                  .areaHome, .areaAway{
                     .iconsheet();
                     position:absolute;
                     top: 43px;
                     display:block;
                     width:109px;
                     height: 173px;
                  }
                  .areaCenterAway, .areaCenterHome{
                     .iconsheet();
                     position:absolute;
                     top: 0px;
                     width:46px;
                     height: 283px;
                  }
               }
            }
            > .homeTeam {
               border-left: none;
               > .gameField{
                  .areaHome {
                     background-position: -10px -590px;
                     left:0px;
                  }
                  .areaCenterHome{
                     background-position: -804px -112px;
                     right:0px;
                  }
                  .positions {
                     div.goalkeeper {
                        left: 0;
                     }
                     div.defender {
                        left: 20%;
                     }
                     div.midfielder {
                        left: 45%;
                     }
                     div.playmaker {
                        left: 62.5%;
                     }
                     div.forward {
                        left: 80%;
                     }
                  }
               }
            }
            > .awayTeam {
               margin-left: -4px;
               z-index: 2;
               > .gameField{
                  .areaAway{
                     background-position: -128px -590px;
                     right:0px;
                  }
                  .areaCenterAway {
                     background-position: -863px -112px;
                     left:0px;
                  }
                  .positions {
                     div.goalkeeper {
                        right:0;
                     }
                     div.defender {
                        right: 20%;
                     }
                     div.midfielder {
                        right: 45%;
                     }
                     div.playmaker {
                        right: 62.5%;
                     }
                     div.forward {
                        right: 80%;
                     }
                  }
               }
            }
         }
      }
      .maxSize-479 {
         .fieldLineal{
            .field {
               >.homeTeam, > .awayTeam {
                  >.gameField {
                     height: 210px;
                     .positions {
                        > div {
                           width: 20%;
                           .wrapperPlayer{
                              .containerPlayer{
                                 margin-top: -15px;
                                 height: 24px;
                                 svg, canvas{
                                    width: 36px;
                                 }
                                 span.player {
                                    font-size: 11px;
                                    line-height:27px;
                                    text-indent: -4px;
                                    &.hoverPlayer {
                                       #translucent .background(@color02, .5);
                                       .border-radius(60px);
                                    }
                                 }
                              }
                           }
                        }
                     }
                     .areaHome, .areaAway{
                        width: 57px;
                        height: 91px;
                     }
                     .areaCenterHome, .areaCenterAway{
                        height: 210px;
                        width: 28px;
                     }
                     .shapes {
                        .center{
                           .border-radius(50px 0 0 50px);
                        }
                     }
                  }
               }
               .homeTeam{
                  > .gameField {
                     .areaHome {
                        background-position: -630px -112px;
                     }
                     .areaCenterHome {
                        background-position: -709px -146px;
                     }
                  }
               }
               .awayTeam{
                  > .gameField{
                     .areaAway {
                        background-position: -564px -112px;
                     }
                     .areaCenterAway{
                        background-position: -748px -146px;
                     }
                  }
               }
            }
         }
      }
      .ie8{
         .fieldLineal{
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
         }
         .maxSize-991{
            .fieldLineal{
               position: relative;
            }
         }
      }
//18.-GC container (padding left and right)//
   .GC_container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
      overflow: hidden;
      padding-top: 10px;
      .GC_row{
         margin-left: -30px;
         margin-right: -30px;
         > div[class*="col-"]{
            padding-left: 15px;
            padding-right: 15px;
         }
      }
      .GC_row_intern{
         margin-left: -10px;
         margin-right: -10px;
         > div[class*="col-"]{
            padding-left: 10px;
            padding-right: 10px;
         }
      }
   }
//19.-Lines//
   .G_divider{
      #gradient .vertical-three-colors(darken(@bg, 5%), darken(@bg,20%), 50%, darken(@bg, 5%));
      .border-radius(50%);
      content: "";
      height: 80%;
      left: -3px;
      position: absolute;
      top: 14%;
      width: 3px;
      z-index: 2;
   }
   .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;
   }
//20.-Players//
   .listWrapper{
      position: relative;
      .listContent{
         > .home, > .away {
            padding: 0 5px;
            .player{
               background:darken(@bg, 10%);
               font-family:@baseFontFamily;
               .border-radius(4px);
               font-weight: normal;
               text-transform:uppercase;
               padding: 0 0 0 5px;
               min-height: 34px;
               line-height: 30px;
               cursor:pointer;
               position: relative;
               margin-bottom: 4px;
               width: 100%;
               &:nth-child(odd) {
                  background: darken(@bg, 5%);
               }
               .number{
                  padding-left: 5px;
                  padding-right: 5px;
                  background-color: @color01;
                  margin-right: 5px;
                  line-height: 20px;
                  text-align: center;
                  min-width: 20px;
                  .border-radius(50%);
                  color:@color01_type;
                  display: inline-block;
                  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
                  vertical-align: baseline;
                  white-space: nowrap;
                  font-size: 10px;
               }
               .name{
                  font-size: 10px;
                  font-weight: normal;
                  color:@bg_type;
               }
               .captain{
                 background: @color01;
                 color: @color01_type;
                 font-size: 10px;
                 padding: 1px 5px;
                 text-transform: uppercase;
                 .box-shadow(0 0 4px #000);
                 line-height: normal;
                 display: none;
               }
               .scoreInc{
                  position: absolute;
                  .incidences {
                     margin-top: 6px;
                     div {
                        width: 15px;
                        height: 18px;
                        margin:0 1px;
                        .iconsheet();
                        display: inline-block;
                     }
                     .yellowCard {
                        background-position: -503px -22px;
                     }
                     .redCard {
                        background-position: -520px -22px;
                     }
                     .goal {
                        background-position: -205px -77px;
                     }
                     .goal.own {
                        background-position: -180px -77px;
                     }
                     .out {
                        background-position: -315px -22px;
                     }
                     .in {
                        background-position: -336px -22px;
                     }
                     .redByDoubleYellowCard {
                        background-position: -548px -22px;
                        width: 20px;
                     }
                  }
                  .score{
                     margin-top: 3px;
                     font-size: 9px;
                     color:@bg_type;
                     text-transform: capitalize;
                  }
               }

               &.coach{
                  background: @color01;
                  height: 30px;
                  cursor: default;
                  .name{
                     color: @color01_type;
                     .dt{
                        padding-left: 5px;
                        padding-right: 5px;
                        margin-right: 5px;
                        line-height: 35px;
                        font-size: 12px;
                     }
                  }
                  &:hover{
                     background: @color01;
                  }
               }
               &:hover, &.hoverName{
                  background: darken(@bg,15%);
               }
            }
         }
         > .home{
            .player{
               .scoreInc{
                  right: 0;
                  .incidences {
                     float: right;
                  }
                  .score {
                     float: right;
                     margin-right: 5px;
                  }
               }
            }
         }
         > .away {
            .player {
               text-align: right;
               .number{
                  float:right;
                  margin-top: 7px;
               }
               .name{
                  margin-right: 12px;
                  float:right;
                  margin-top: 2px;
                  .dt{
                    float: right;
                  }
               }
               &.coach{
                 float: none;
                 .name{
                   float: none;
                   margin-top: 0;
                 }
               }
               .captain{
                 margin-right: 12px;
               }
               .scoreInc{
                  left: 0;
                  .incidences {
                     float: left;
                  }
                  .score {
                     float: left;
                     margin-left: 5px;
                  }
               }
            }
         }
      }
      &.substitutesList{
         .listContent{
            overflow-x: hidden;
            height:170px;
         }
      }
   }
   .maxSize-991{
     .listWrapper{
       &.substitutesList{
          .listContent{
             height:auto;
          }
       }
     }
   }
   .maxSize-479 {
      .listWrapper{
         &.display{
            display: none;
         }
         .listContent{
            > .home, > .away{
               &.display{
                  display: none;
               }
            }
         }
         &.substitutesList{
            .listContent{
               overflow-x:visible;
               height:auto;
            }
         }
      }
   }
//21.-Tabs wrapper//
   .tabsWrapper{
      margin: 0 0 20px;
      &.noTabs{
        ul{
          display: none;
        }
      }
      > ul{
         margin:0;
         padding: 0;
         white-space: nowrap;
         > li{
            float: left;
            margin: 0 4px 0 0;
            position: relative;
            display:table-cell;
            white-space: nowrap;
            width: auto;
            .clearfixStyles();
            max-width:100%;
            min-width: 55px;
            will-change: width;
            a{
               will-change: width;
               display:table-cell;
               max-width:100%;
               padding: 0 15px;
               text-decoration: none;
               color: @bg_type;
               font-weight: bold;
               text-transform: uppercase;
               height: 30px;
               text-align: center;
               line-height: 34px;
               font-size: 14px;
               font-family: @type_Special;
               font-weight: 400;
               position: relative;
               width: auto;
               white-space: nowrap;
               word-break: normal;
               min-width: 50px;
               .border-radius(4px 4px 0 0);
               &:hover{
                  background: @bg;
                  .box-shadow(0 0 5px darken(@bg, 20%));
                  color: @bg_dest_type;
                  &:before{
                     background-color: @bg;
                     height: 10px;
                     content: " ";
                     position: absolute;
                     bottom: -5px;
                     width: 100%;
                     left: 0;
                  }
               }
               &.active{
                  background: @bg;
                  .box-shadow(0 0 5px darken(@bg, 20%));
                  color: @bg_dest_type;
                  &:before{
                     background-color: @bg;
                     height: 10px;
                     content: " ";
                     position: absolute;
                     bottom: -5px;
                     width: 100%;
                     left: 0;
                  }
               }
            }
         }
      }
      .tabContainer{
         background: @bg;
         .border-radius(4px);
         .box-shadow(0 0 5px darken(@bg, 20%));
         padding:15px;
         .captionBoxShadow(@bg);
         overflow: hidden;
         .lineUpFullBlock{
           .caption{
             display: none;
           }
         }
         .tabContent{
           .liveHome{
             .BG_title{
               display: none;
             }
             .coordinates{
               .caption{
                 display: none;
               }
             }
           }
         }
      }
      &.noBoxContent{
         .futbol{
            background: @bg;
            .boxWrapper{
               margin:0;
               .boxContent{
                 padding: 0;
                 border: 0;
                 border-radius: 0;
                 box-shadow: 0 0 0;
               }
            }
         }
      }
   }
   .maxSize-479{
      .tabsWrapper{
         > ul{
            > li{
               a{
                  font-size: 10px;
               }
            }
         }
         .tabContainer{
           .lineUpFullBlock{
             .caption{
               display: none;
               &.nav{
                 display: block;
               }
             }
           }
         }
      }
   }
//22.-Title//
   .GC_title {
      text-transform:uppercase;
      font:18px @type_Special;
      text-align:center;
      display:block;
      color:@bg_type;
      margin-bottom: 10px;
      &.small{
         width: 100%;
         height:auto;
         font-size: 14px;
         line-height:normal;
      }
   }
   .headerTitle{
      padding-top: 5px;
      .GC_title{
         text-align: left;
      }
      &.icon{
         border-bottom: 1px solid @bg_type;
         div{
            img{
               width: 100%;
            }
         }
      }
   }
   .BG_title{
      height:32px;
      text-transform:uppercase;
      font:20px @type_Special;
      line-height:32px;
      text-align:center;
      display:block;
      color:@color02_type;
      background: @color02;
      .border-radius(4px);
      font-weight: 200;
      margin: 0 0 20px;
   }
   .subHeader{
      .border-radius(4px);
      background: @color02;
      position: relative;
      color:@color02_type;
      > span{
         height:33px;
         text-transform:uppercase;
         font:20px @type_Special;
         line-height:33px;
         text-align:center;
         display:block;
         color:@color02_type;
      }
   }
   .maxSize-479 {
      .GC_title, .GC_title.small, .BG_title{
         font-size: 14px;
      }
      .subHeader{
         padding-left:10px;
         > span{
            font-size:11px;
            text-align: left;
         }
      }
   }
//23.-Time setting//
   .timeSetting{
      margin: 4px auto;
      width: 100%;
      .text{
         float: right;
         width: 80%;
         span{
            display: block;
            padding-right: 8px;
            color: @bg_type;
            font-size: 11px;
            display: block;
         }
      }
      .timeIcon{
         width: 25px;
         float: right;
         .btn{
            height: 25px;
            line-height: 25px;
            &:focus, &:hover, &:active{
               height: 23px;
               line-height: 23px;
               margin-top: 2px;
            }
         }
         svg, canvas{
            fill:@color01_type;
            margin: -3px auto 0;
            width: 80%;
         }
      }
      &.leftPosition{
         margin:0;
         padding: 4px 0;
         width: 100%;
         border-bottom: 1px solid darken(@bg, 10%);
         .text{
            float: left;
            width: 86%;
            span{
               padding-left: 8px;
               padding-right: 0;
            }
         }
         .timeIcon{
            float: left;
         }
      }
   }
//24.-Texts//
   .text{
      font-size: 12px;
      font-family: @baseFontFamily;
      text-transform: uppercase;
      color: @bg_type;
      &.small{
         font-size:9px;
      }
      &.bold{
         font-weight: 600;
      }
      &.position{
         color:@bg_dest_type;
         font-size: 15px;
         font-weight: 600;
         font-family: @type_Special;
      }
      &.name{
         color:@bg_type;
         font-size: 15px;
         font-weight: 400;
         font-family: @type_Special;
      }
      &.correct{
         color: @positive;
         text-align: center;
      }
      &.incorrect{
         color: @negative;
         text-align: center;
      }
      &.number{
         font:18px @type_Special;
         font-weight: 400;
         text-align: center;
         &.big{
            font-size: 26px;
         }
      }
   }
   .maxSize-767 {
      .text{
         &.name, &.position{
            font-size: 14px;
         }
      }
   }
   .maxSize-479 {
      .text{
         font-size: 12px;
         &.name, &.position{
            font-size: 12px;
         }
         &.small{
            font-size: 9px;
         }
      }
   }
//25.-Slide owl carousel//
   .owl-carousel{
      &.slider{
         .owl-controls{
            .owl-pagination{
               position: absolute;
               bottom: 20px;
               left: 0;
               right: 0;
               margin: 0 auto;
            }
         }
      }
   }
//26.-Share//
  .share{
    background-color: @bg;
    border-top: 1px solid darken(@bg, 20%);
    border-bottom: 1px solid darken(@bg, 20%);
    margin: 10px auto 5px auto;
    &.onStats{
      margin: 10px auto 5px auto;
    }
    &.share-statsHighlightsTeams, &.share-statsHighlightsPlayers{
      margin-top: -15px;
    }
    ul{
      .flex-display();
      .flex-direction();
      .flex-wrap();
      .justify-content(center);
      .align-items(center);
      padding:5px 0;
      li{
        .flex-grow(1);
        text-align: center;
        border-right: 1px solid darken(@bg, 20%);
        max-width: 200px;
        &:last-child{
          border-right: 0;
        }
        a{
          display: block;
        }
        svg, canvas{
          width: 17px;
          height: 17px;
          fill:mix(@bg, @bg_type, 80%);
        }
      } 
    }
  }
//27.-Specific styles//
  @keyframes hideShow {
    0{
      opacity: 1;
    }
    50%{
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .hide-show-animation{
    animation: hideShow 4s ease infinite;
  }
  .dfMc-GameCast{
    .scoreBoard{
      .main_header{
        display: none;
      }
    }
  }
  .tempus {
    .previousMatches {
      .boxWrapper{
        padding: 0;
      }
    }
  }
  #moduleLineUpFull{
    .lineUpFull{
      .caption{
        display: none;
      }
      &.maxSize-479 {
         .caption{
           &.nav{
             display: block;
           }
         }
      }
    }
  }
  #moduleLeaders{
    .leaders{
      &.maxSize-479 {
         .caption{
           &.nav{
             display: block;
           }
         }
      }
    }
  }
  #moduleTeamComparison,
  #moduleCoordinates,
  #moduleLeaders,
  #modulePreview,
  #modulePasses{
    .caption{
      display: none;
    }
  }
  #modulePasses{
    .passes{
      .caption{
        display: none;
      }
      &.maxSize-991 {
         .caption{
           &.nav{
             display: block;
           }
         }
      }
    }
  }
  #moduleHeatMap{
    .heatMap.maxSize-767.minSize-479 .barHeatMap {
        margin-top: 20px;
        top: 42%;
    }
    .heatMap .caption {
      display: none;
    }
    .heatMap.maxSize-479{
      .caption {
        display: none;
        &.nav{
          display: block;
        }
      }
    }
  }
  .setBox{
      margin: 10px 0;
      &.inside{
         #gradient .vertical-three-colors(darken(@bg,10%), @bg, 10%, @bg);
         padding-top: 12px;
      }
      .GC_title{
         margin: 10px 0 0;
      }
  }
  .disabled {
      display: none;
  }
  a{
      &:focus{
         outline: none;
      }
  }
  .msgCtn{
      background: @color01;
      color: @color01_type;
      font-size: 9px;
      .border-radius(4px);
      width: 50%;
      padding: 10px;
      margin: 10px auto;
      text-align: center;
      max-height: 120px;
      .title{
         font-size: 12px;
         font-weight: bold;
      }
      &.info{
         background: @referenceColor03;
         color: @referenceColor03_type;
      }
      &.error{
         background: @referenceColor04;
         color: @referenceColor04_type;
      }
      .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%);
      }
  }
   .tipoFondo (@a) when (lightness(@a) >= 75%) {
      box-shadow: 0px 0px 5px darken(@a,5%) inset;
   }
   .tipoFondo (@a) when (lightness(@a) < 75%) {
      box-shadow: 0px 0px 5px lighten(@a,5%) inset;
   }
   .captionBoxShadow(@a){
      .flag, .shield{
         .box-shadow(0 0 6px rgba(0, 0, 0, 0.25));
         &.m-homeColor-b, &.m-awayColor-b{
            box-shadow:0 0 6px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.5) inset;
         }
      }
   }
  .boxIncidences, .boxPlayers{
      .icons{
         float: right;
        height:25px;
         text-align: center;
         .iconPlayer,.iconTeam{
            .iconsheet(); 
            width: 20px;
            height: 17px;
            display: inline-block;
         }
         .iconPlayer{
            left:20%;
            background-position: -805px -75px; 
         }
         .iconTeam{
           left: 70%;
           background-position: -687px -75px; 
         }
      }
  }
   .msjDatos{
      left: 49%;
      margin-left: -116px;
      position: absolute;
      top: 36%;
      background-color: darken(@bg, 5%);;
      z-index: 999;
      border: none;
      text-align: center;
      line-height: 50px;
      .border-radius(4px);
      padding: 10px 30px;
      span{
         text-transform: uppercase;
         color: @bg_type;
         font-family: @type_Special;
         font-size: 18px;
         font-weight: 200;
      }
      &.small{
         left: 0;
         margin: 0 auto;
         right: 0;
         width: 50%;
         line-height: normal;
         padding: 15px 0;
         top: 45%;
         span{
            font-size: 12px;
         }
      }
   }
   .stylesClockStop (){
     animation:changeColor 0.5s ease-in-out 0s infinite alternate;
     -moz-animation:changeColor 0.5s ease-in-out 0s infinite alternate; /* Firefox */
     -webkit-animation:changeColor 0.5s ease-in-out 0s infinite alternate; /* Safari and Chrome */
     -o-animation:changeColor 0.5s ease-in-out 0s infinite alternate; /* Opera */
     opacity: 1;
   }
   .vs-{
     position: absolute;
     top: 0px;
     left: 43%;
     .translate(-50%, 0);
     z-index: 1;
     color: @bg_dest_type;
     line-height: normal;
     margin-top: 22px;
     display: block;
   }
   .object{
    .vs-;
   }
   .viewAll{
     float: none;
     margin: 5px auto;
     display: block;
   }
   .animationGoal{
     animation: animationFrames ease-out 8s;
     animation-iteration-count: 1;
     transform-origin: 50% 50%;
     -webkit-animation: animationFrames ease-out 8s;
     -webkit-animation-iteration-count: 1;
     -webkit-transform-origin: 50% 50%;
     -moz-animation: animationFrames ease-out 8s;
     -moz-animation-iteration-count: 1;
     -moz-transform-origin: 50% 50%;
     -o-animation: animationFrames ease-out 8s;
     -o-animation-iteration-count: 1;
     -o-transform-origin: 50% 50%;
     -ms-animation: animationFrames ease-out 8s;
     -ms-animation-iteration-count: 1;
     -ms-transform-origin: 50% 50%;
   }
   @keyframes animationFrames{
     0% {
       opacity:1;
       transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     13% {
       opacity:0;
       transform: translate(0,0) scaleX(0.10) scaleY(0.10) ;
     }
     18% {
       opacity:0;
       transform: translate(0,0) scaleX(2.50) scaleY(2.50) ;
     }
     31% {
       opacity:100;
       transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     38% {
       opacity:0;
       transform:translate(0,0) ;
     }
     44% {
       opacity:100;
       transform: translate(0,0) ;
     }
     50% {
       opacity:0;
       transform: translate(0,0) ;
     }
     56% {
       opacity:1;
       transform: translate(0,0) ;
     }
     63% {
       opacity:0;
       transform: translate(0,0);
     }
     69% {
       opacity:1;
       transform: translate(0,0);
     }
     75% {
       opacity:0;
       transform: translate(0,0);
     }
     81% {
       opacity:1;
       transform: translate(0,0);
     }
     88% {
       transform: translate(0,0);
     }
     94% {
       opacity:0;
       transform: translate(0,0);
     }
     100% {
       opacity:0;
       transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
   }
   @-moz-keyframes animationFrames{
     0% {
       opacity:1;
       -moz-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     13% {
       opacity:0;
       -moz-transform: translate(0,0) scaleX(0.10) scaleY(0.10) ;
     }
     18% {
       opacity:0;
       -moz-transform: translate(0,0) scaleX(2.50) scaleY(2.50) ;
     }
     31% {
       opacity:100;
       -moz-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     38% {
       opacity:0;
       -moz-transform:translate(0,0) ;
     }
     44% {
       opacity:100;
       -moz-transform: translate(0,0) ;
     }
     50% {
       opacity:0;
       -moz-transform: translate(0,0) ;
     }
     56% {
       opacity:1;
       -moz-transform: translate(0,0) ;
     }
     63% {
       opacity:0;
       -moz-transform: translate(0,0);
     }
     69% {
       opacity:1;
       -moz-transform: translate(0,0);
     }
     75% {
       opacity:0;
       -moz-transform: translate(0,0);
     }
     81% {
       opacity:1;
       -moz-transform: translate(0,0);
     }
     88% {
       -moz-transform: translate(0,0);
     }
     94% {
       opacity:0;
       -moz-transform: translate(0,0);
     }
     100% {
       opacity:0;
       -moz-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
   }
   @-webkit-keyframes animationFrames {
     0% {
       opacity:1;
       -webkit-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     13% {
       opacity:0;
       -webkit-transform: translate(0,0) scaleX(0.10) scaleY(0.10) ;
     }
     18% {
       opacity:0;
       -webkit-transform: translate(0,0) scaleX(2.50) scaleY(2.50) ;
     }
     31% {
       opacity:100;
       -webkit-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     38% {
       opacity:0;
       -webkit-transform:translate(0,0) ;
     }
     44% {
       opacity:100;
       -webkit-transform: translate(0,0) ;
     }
     50% {
       opacity:0;
       -webkit-transform: translate(0,0) ;
     }
     56% {
       opacity:1;
       -webkit-transform: translate(0,0) ;
     }
     63% {
       opacity:0;
       -webkit-transform: translate(0,0);
     }
     69% {
       opacity:1;
       -webkit-transform: translate(0,0);
     }
     75% {
       opacity:0;
       -webkit-transform: translate(0,0);
     }
     81% {
       opacity:1;
       -webkit-transform: translate(0,0);
     }
     88% {
       -webkit-transform: translate(0,0);
     }
     94% {
       opacity:0;
       -webkit-transform: translate(0,0);
     }
     100% {
       opacity:0;
       -webkit-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
   }
   @-o-keyframes animationFrames {
     0% {
       opacity:1;
       -o-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     13% {
       opacity:0;
       -o-transform: translate(0,0) scaleX(0.10) scaleY(0.10) ;
     }
     18% {
       opacity:0;
       -o-transform: translate(0,0) scaleX(2.50) scaleY(2.50) ;
     }
     31% {
       opacity:100;
       -o-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     38% {
       opacity:0;
       -o-transform:translate(0,0) ;
     }
     44% {
       opacity:100;
       -o-transform: translate(0,0) ;
     }
     50% {
       opacity:0;
       -o-transform: translate(0,0) ;
     }
     56% {
       opacity:1;
       -o-transform: translate(0,0) ;
     }
     63% {
       opacity:0;
       -o-transform: translate(0,0);
     }
     69% {
       opacity:1;
       -o-transform: translate(0,0);
     }
     75% {
       opacity:0;
       -o-transform: translate(0,0);
     }
     81% {
       opacity:1;
       -o-transform: translate(0,0);
     }
     88% {
       -o-transform: translate(0,0);
     }
     94% {
       opacity:0;
       -o-transform: translate(0,0);
     }
     100% {
       opacity:0;
       -o-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
   }
   @-ms-keyframes animationFrames {
     0% {
       opacity:1;
       -ms-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     13% {
       opacity:0;
       -ms-transform: translate(0,0) scaleX(0.10) scaleY(0.10) ;
     }
     18% {
       opacity:0;
       -ms-transform: translate(0,0) scaleX(2.50) scaleY(2.50) ;
     }
     31% {
       opacity:100;
       -ms-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
     38% {
       opacity:0;
       -ms-transform:translate(0,0) ;
     }
     44% {
       opacity:100;
       -ms-transform: translate(0,0) ;
     }
     50% {
       opacity:0;
       -ms-transform: translate(0,0) ;
     }
     56% {
       opacity:1;
       -ms-transform: translate(0,0) ;
     }
     63% {
       opacity:0;
       -ms-transform: translate(0,0);
     }
     69% {
       opacity:1;
       -ms-transform: translate(0,0);
     }
     75% {
       opacity:0;
       -ms-transform: translate(0,0);
     }
     81% {
       opacity:1;
       -ms-transform: translate(0,0);
     }
     88% {
       -ms-transform: translate(0,0);
     }
     94% {
       opacity:0;
       -ms-transform: translate(0,0);
     }
     100% {
       opacity:0;
       -ms-transform: translate(0,0) scaleX(1.00) scaleY(1.00) ;
     }
   }
   .boxDatagoals{
     margin: 20px 0 0;
     background: transparent;
     .content{
       background: darken(@bg, 10%);
         padding: 5px 10px;
         .border-radius(4px);
         margin: 0 0 5px;
         &.active{
           background: darken(@bg, 15%);
         }
         .goalVideoBtn{
           .btn{
             margin: 0;
             display: inline-block;
           }
           span{
             color: @bg_type;
             font-size: 12px;
           }
         }
     .btn{
         margin: 0 auto;
         width: 30px;
         height: 30px;
         &:after{
           margin: 8px 0 0 11px;
         }
         &:focus, &:hover, &:active, &.active{
            height: 28px;
            line-height: 28px;
            margin-top: 2px;
         }
     }
        &.secondary{
          text-align: center;
          .btn{
            display: inline-block;
            width: auto;
            padding:2px 20px 0 30px;
            position: relative;
            &:after{
              top: 0;
              left: 0;
            }
          }
        }
     }
     .text{
         font-family: @type_Special;
         &.number{
           font-size: 23px;
         }
     }
     
     .alignRight{
         text-align: right;
         .text{
           &.number{
               text-align: right;
           }
         }
     }
     .alignLeft{
         text-align: left;
         .text{
           &.number{
               text-align: left;
           }
         }
     }
   }
   .maxSize-479 {
      .msjDatos{
         left: 0;
         right: 0;
         margin: 0 auto;
         width: 80%;
         line-height: 35px;
         padding: 0;
         top: 42%;
         span{
            font-size: 9px;
         }
      }
      .setBox{
         .GC_title{
            font-size: 11px;
         }
      }
      .boxDatagoals{
        margin: 10px 0 0;
        .text{
          font-size: 10px;
          &.number{
            font-size: 18px;
          }
        }
      }
   }
   /*for IE10*/
  select::-ms-expand {
      display: none;
  }
//28.-Sprites//
   .iconsheet(){
      background-image: url(@iconsheet);
      display: block; 
   }
   .iRedCard{
      .iconsheet();
      background-position: -50px -12px;
      display: inline-block;
      width: 32px;
      height: 38px;
   }
   .iYellowCard{
      .iconsheet();
      background-position: -10px -12px;
      display: inline-block;
      width: 32px;
      height: 38px;
   }
   .iRedByDoubleYellowCard{
      .iconsheet();
      background-position: -92px -12px;
      display: inline-block;
      width: 32px;
      height: 38px;
   }
   .boxYellowCard, .boxRedCard, .boxTwoCard{
      .iconsheet();
      width: 58px;
      height: 118px;
      position: absolute;
      bottom: 0;
      right: 10px;
   }
   .boxYellowCard{
      background-position: -46px -346px;
   }
   .boxRedCard{
      background-position: -150px -346px;
   }
   .boxTwoCard{
      background-position: -228px -346px;
      width: 84px;
   }
//29.-Styles for home and away elements and svg//
   .m-homeColor,.home .m-color,.point-home .m-color{
      color:@homeColor_type;
      background:@homeColor;
      fill:@homeColor;
   }
   .m-awayColor,.away .m-color,.point-away .m-color{
      color:@awayColor_type;
      background:@awayColor;
      fill:@awayColor;
   }
   .m-homeSecondColor{
      background: @homeColor_type;
   }
   .m-awaySecondColor{
      background: @awayColor_type;
   }
   .m-homeColor-blc{
      border-left-color:@homeColor;
   }
   .m-awayColor-brc{
      border-right-color:@awayColor;
   }
   .m-homeColor-b{
      border:2px solid @homeColor;
   }
   .m-awayColor-b{
      border:2px solid @awayColor;
   }
   .m-svgColor{
      fill:@bg_type;
   }
   .m-svgStroke{
      stroke:@bg_type;
   }
//30.-Stats Center//
   .statsCenterPerTeam, .statsCenterPerPlayer{
      .boxColor05{
         background: @referenceColor05;
         color: @referenceColor05_type;
      }
      .boxColor06{
         background: @referenceColor06;
         color: @referenceColor06_type;
      }
      .boxColor07{
         background: @referenceColor07;
         color: @referenceColor07_type;
      }
      .boxColor08{
         background: @referenceColor08;
         color: @referenceColor08_type;
      }
      .boxColor09{
         background: @referenceColor09;
         color: @referenceColor09_type;
      }
      .boxColor10{
         background: @referenceColor10;
         color: @referenceColor10_type;
      }
      .boxColor11{
         background: @referenceColor11;
         color: @referenceColor11_type;
      }
      .boxColor12{
         background: @referenceColor12;
         color: @referenceColor11_type;
      }
      .boxColor13{
         background: @referenceColor13;
         color: @referenceColor11_type;
      }
      .boxColor14{
         background: @referenceColor14;
         color: @referenceColor11_type;
      }
   }
//31.-Video modal and box of image video//
   .boxModal{
      display:none;
      position:fixed;
      top:20%;
      z-index:999;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: transparent;
      width: 100%;
      max-width:700px;
      &.imageBoxModal{
         .item{
            background-color: #000;
            background-repeat:no-repeat;
            background-size:contain;
            background-position: center center;
            height: 300px;
         }
      }
      .boxContentDialog{
         width:100%;
         .border-radius(4px);
         .box-shadow(0 0 15px @color02);
         position:relative;
         margin:0 auto;
         background: @color02;
         .head{
            background: @color02;
            color: @color02_type;
            font-weight: bold;
            min-height: 35px;
            padding: 10px 10px 0;
            span{
               font-weight: bold;
            }
            small{

            }
         }
         .boxModalContent{
            iframe{
               width: 100%;
               height: 400px;
            }
            .owl-controls{
               .owl-buttons{
                  div{
                     display: block;
                     position: absolute;
                     top: 0;
                     cursor: pointer;
                     opacity: 1;
                     background: transparent;
                     padding: 0;
                     margin: 0;
                     top: 50%;
                     .translate(0, -50%);

                     &.disabled .btn,&.disabled .btn {
                        background-color: desaturate(@color01, 50%);
                        cursor: default;
                        pointer-events: none;
                        &.prev{
                           &:after{
                              border-right: 8px solid darken(@color01_type, 10%);
                           }
                        }
                        &.next{
                           &:after{
                              border-left: 8px solid darken(@color01_type, 10%);
                           }
                        }
                        &:focus, &:hover, &:active{
                           height: 25px;
                           margin-top: 0;
                        }
                     }
                  }

                  .owl-prev{
                     left: 15px;
                     .btn{
                        &:after{
                           margin: 0;
                           top: 50%;
                          -moz-transform: translateY(-50%) translateX(-50%);
                          -webkit-transform: translateY(-50%) translateX(-50%);
                          -o-transform: translateY(-50%) translateX(-50%);
                          -ms-transform: translateY(-50%) translateX(-50%);
                          transform: translateY(-50%) translateX(-50%);
                           position: relative;
                           left: 50%;
                        }
                     }
                  }
                  .owl-next {
                     right: 15px;
                  }
               }
            }
         }
      }
      &.maxSize-767{
         top: 10%;
         width: 80%;
         .boxContentDialog{
            .boxModalContent{
               iframe{
                  height: 300px;
               }
            }
         }
      }
      &.maxSize-479{
         top: 10%;
         width: 100%;
         .boxContentDialog{
            .head{
            }
            .boxModalContent{
               border: 8px solid @color02;
               background: #FFF;
               iframe{
                  height: 300px;
               }
            }
         }
      }
   }
   .boxImgOfVideo{
      text-align: center;
      position: relative;
      img{
         margin: 10px auto;
         cursor: pointer;
         width: 95%;
      }
      .circlePlay{
         background:#000;
         .box-shadow(0 0 26px -10px #fff);
         .border-radius(50%);
         width: 75px;
         height: 75px;
         position: absolute;
         top: 40%;
         left: 0;
         right: 0;
         margin: 0 auto;
         cursor: pointer;
         .play{
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
            border-left: 24px solid #FFF;
            width: 0;
            height: 0;
            content: " ";
            display: block;
            top: 24px;
            position: absolute;
            left: 7px;
            right: 0;
            margin: 0 auto;
         }
         .modulePreloader{
            width: 50px;
            height: 50px;
            border-width:10px;
            border-color:#333 #333 #333 #fff;
            margin:13px auto;
         }
      }
   }
  @-moz-keyframes mc-wave {
    0%,
    100% {
      -moz-transform: scaleY(1);
    }
    16.67% {
      -moz-transform: scaleY(3);
    }
    33.33% {
      -moz-transform: scaleY(1);
    }
    50% {
      -moz-transform: scaleY(3);
    }
    66.67% {
      -moz-transform: scaleY(1);
    }
    83.34% {
      -moz-transform: scaleY(3);
    }
  } 

  @-webkit-keyframes mc-wave {
    0%,
    100% {
      -webkit-transform: scaleY(1);
    }
    16.67% {
      -webkit-transform: scaleY(3);
    }
    33.33% {
      -webkit-transform: scaleY(1);
    }
    50% {
      -webkit-transform: scaleY(3);
    }
    66.67% {
      -webkit-transform: scaleY(1);
    }
    83.34% {
      -webkit-transform: scaleY(3);
    }
  } 

  @keyframes mc-wave {
    0%,
    100% {
      transform: scaleY(1);
    }
    16.67% {
      transform: scaleY(3);
    }
    33.33% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(3);
    }
    66.67% {
      transform: scaleY(1);
    }
    83.34% {
      transform: scaleY(3);
    }
  } 
   .boxVideoCom{
      text-align: center;
      iframe {
        width: 90%;
        height: 400px;
        margin: 10px auto 0;
      }
      .loader-container{
        display: none;
   }
      &.media-audio{
        width: 55%;
        height: 310px;
        margin: 0 auto;
        position: relative;
        background-color: #000;
        border-right: 1px solid #000;
        iframe {
          width: 100%;
          margin: 0;
          height: 70px;
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 0;
          background: transparent;
        }
        .loader-container{
          display: block;
          position: absolute;
          height: 40px;
          width: 160px;
          top: 35%;
          right: 0;
          left: 0;
          margin: 0 auto;
          > div {
            position: relative;
            display: inline-block;
            background: #fff;
            height: 100%;
            width: 10px;
            margin: 0;
            -webkit-animation: mc-wave 3s ease-in-out infinite;
            animation: mc-wave 3s ease-in-out infinite;
            &.rectangle-2 {
              -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
            }
            &.rectangle-3 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
            }
            &.rectangle-4 {
              -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
            }
            &.rectangle-5 {
              -webkit-animation-delay: 0.4s;
              animation-delay: 0.4s;
            }
            &.rectangle-6 {
              -webkit-animation-delay: 0.5s;
              animation-delay: 0.5s;
            }
          }
        }
      }
   }
   .maxSize-1199{
      .boxVideoCom{
         iframe {
           height: 350px;
         }
      }
   }
   .maxSize-991 {
      .boxVideoCom{
         iframe {
           height: 310px;
         }
      }
   }
   .maxSize-767 {
      .boxVideoCom{
         iframe {
           height: 240px;
         }
      }
      .boxImgOfVideo{
         img{
            width: 90%;
         }
         .circlePlay{
            width: 60px;
            height: 60px;
            top: 30%;
            .play{
               border-top-width: 10px;
               border-bottom-width: 10px;
               border-left-width: 20px;
               top:35%;
            }
            .modulePreloader{
               width: 40px;
               height: 40px;
               border-width:8px;
               margin:10px auto;
            }
         }
      }
   }
   .maxSize-479 {
      .boxVideoCom{
         iframe {
           height: 180px;
         }
      }
      .boxImgOfVideo{
         width: 100%;
         border-bottom: 1px dotted #000000;
         img{
            width:90%;
         }
         .circlePlay{
            width: 40px;
            height: 40px;
            top: 33%;
            .play{
               border-top-width: 8px;
               border-bottom-width: 8px;
               border-left-width: 14px;
               top:34%;
               left: 4px;
            }
            .modulePreloader{
               width: 25px;
               height: 25px;
               border-width:6px;
               margin:8px auto;
            }
         }
      }
   }
//32.-Share Tooltip//
    .badge.ico-share{
      width: 20px;
      height: 20px;
      padding: 5px;
      position: absolute;
      background: @color02;
      top: 50%;
      right: 15px;
      margin-top: -10px;
      svg, canvas{
        fill:@color02_type;
      }
    }
    .tooltip.top.ttp-share{
      width: 30px;
      height: 50px;
      display: block;
      padding: 0;
        .tooltip-inner{
          background:@bg;
          box-shadow: 0 0 2px 0 darken(@bg,50%) inset;
          padding: 5px;
        }
        .tooltip-arrow{
          border-top-color: @bg;
          &:before{
            content: " ";
            border-color: darken(@bg,20%);
            border-top-color: #000000;
            border-width: 5px 5px 0;
            position: absolute;
          }
        }
    }