/*Relato*/
.commentary{
   background: darken(@bg,5%);
   .lines{
      background: url('../images/linea-punteada.png') 10.8% 0 repeat-y,
         url('../images/linea-punteada.png') 89% repeat-y;
      display:block;
      margin:0 auto;
   }
   .teams{
      width: 78.7%;
      position: relative;
      margin: 10px auto;
      img{
         padding: 4px 5px;
         vertical-align: top;
      }
      .local{
         float:left;
         background-repeat: no-repeat !important;
         background-position: center !important;
      }
      .away{
         float:right;
         background-repeat: no-repeat !important;
         background-position: center !important;
      }
   }

   .position-circle{
      width:36px;
      display:block;
      margin:0 auto;
      position:relative;
   }
   .icons .circle{
      margin:15px 0 0;
      &.teams{
         width:36px;
         height:36px;
      }
      .goal{
         background: url('../images/ico_gol_afavor.png') no-repeat center center;
         display:block;
         width:16px;
         height:16px;
         padding: 17px;
         &.own{
            background: url('../images/ico_gol_encontra.png') no-repeat center center;
            display:block;
            width:16px;
            height:16px;
            padding: 17px;
         }
      }
      .change{
         background: url('../images/ico_cambios.png') no-repeat center center;
         display:block;
         width:23px;
         height:18px;
         padding: 17px;
      }
      .cornerKick{
         background: url('../images/ico_corner.png') no-repeat center center;
         display:block;
         width:24px;
         height:30px;
         padding: 17px;
      }
      .offside{
         background: url('../images/ico_offside.png') no-repeat center center;
         display:block;
         width:19px;
         height:23px;
         padding: 17px;
      }
      .yellowCard{
         background: url('../images/ico_t_amarilla.png') no-repeat center center;
         display:block;
         width:15px;
         height:18px;
         padding: 17px;
      }
      .redCard{
         background: url('../images/ico_t_roja.png') no-repeat center center;
         display:block;
         width:19px;
         height:22px;
         padding: 17px;
      }
      .redByDoubleYellowCard{
         background: url('../images/ico_t_roja_x2amarillas.png') no-repeat center center;
         display:block;
         width:23px;
         height:18px;
         padding: 17px;
      }
   }

   .time {
      position: relative;
      .data-small{
         width: 100%;
         min-height:45px;
         background:@bg;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         box-shadow: 0px 0px 3px darken(@bg, 60%);
         position: relative;
         margin-top: 10px;
         color: @bg_type;
         span{
            font-size: 22px;
            font-weight: bold;
            display:block;
            padding: 8px 10px 0px 20px;
            line-height: 16px;
            font-family: @type_Special;
            &:nth-child(2){
               padding: 2px 10px 0px 20px;
               font-size: 18px;
            }
         }
         .arrow-right {
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 14px solid darken(@bg, 60%);
            position: absolute;
            top: 14px;
            right: -14px;
            width: 13px;
            height: 14px;
            &:after{
               content:"";
               width:0;
               height:0;
               border-top: 8px solid transparent;
               border-bottom: 8px solid transparent;
               border-left: 14px solid @bg;
               position:absolute;
               top: -8px;
               right: 0px;
            }
         }
         .arrow-left {
            border-bottom: 8px solid transparent;
            border-right: 14px solid darken(@bg, 60%);
            border-top: 8px solid transparent;
            position: absolute;
            top: 14px;
            left: -14px;
            width: 13px;
            height: 14px;
            &:after{
               content:"";
               width:0;
               height:0;
               border-bottom: 8px solid transparent;
               border-right: 14px solid @bg;
               border-top: 8px solid transparent;
               position:absolute;
               top: -8px;
               left: 0px;
            }
         }
         &.left{
            position:absolute;
            right:0;
         }
         &.rigth{
            position:absolute;
            left:0;
         }
      }
   }

   .commentaryItem{
      &.hasMinHeight {
         .description {
            .data {
               background:@color02;
               color:@color02_type;
            }
         }
      }
      &.outstanding {
         .description {
            .data{
               background:@color01;
               margin:10px auto 0;
               box-shadow: 0px 0px 3px lighten(@color02, 70%);
               .arrow-right {
                  border-left: 20px solid lighten(@color02, 70%);
                  &:after{
                     border-left: 20px solid  @bg_dest_type;
                  }
               }
               .arrow-left {
                  border-right: 20px solid lighten(@color02, 70%);
                  &:after{
                     border-right: 20px solid  @bg_dest_type;
                  }
               }
            }
         }
      }
   }

   .twitter{
      width: 63%;
      min-height:20px;
      background:@color01;
      margin:10px auto;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      margin:10px auto;
      box-shadow: 0px 0px 3px lighten(@color02, 70%);
      padding:20px;
      word-wrap: break-word;
      .picture{
         width:50px;
         height:50px;
         display:block;
         background:@bg;
         float:left;
      }
      .data{
         color:@color01_type;
         padding-left: 14px;
         line-height: 16px;
         span{
            display:block;
         }
      }
   }
   .circle.incTypeIcon{
      width:12px;
      height:12px;
      margin: 24px 0 0 12px !important;
   }
   .maxSize-1199 {
      .description .data{
         width:90%;
      }
      .time{
         .data-small{
            &.left{
               width: 90%;
               left: 0;
            }
            &.right{
               width: 90%;
               right: 0;
               position: absolute;
            }
            span{
               font-size: 16px;
               padding: 8px 0 0;
               text-align: center;
               &:nth-child(2) {
                  font-size: 14px;
                  padding: 2px 0 0;
               }
            }
         }
      }
   }
   .maxSize-991 {
      .time{
         .data-small{
            &.left{
               width: 80%;
               left: 0;
            }
            &.right{
               width: 80%;
               right: 0;
               position: absolute;
            }
            span{
               font-size: 16px;
               padding: 8px 0 0;
               text-align: center;
               &:nth-child(2) {
                  font-size: 14px;
                  padding: 2px 0 0;
               }
            }
         }
      }
      .description{
         .data{
            .text{
               span{
                  &:nth-child(2){
                     padding:0 12px 10px 12px;
                  }
               }
            }
         }
      }
   }
   @media (max-width: @sm) {
      .lines{
         background-position: 19.5% 0,
            80.55% 0;
      }
      .teams{
         width: 61.85%;
      }
      .description .data{
         width:80%;
      }
   }
   @media (max-width: @xs) {
      .lines{
         background-position: 0%  0,
            96% 0;
      }
      .teams{
         width: 97%;
         margin: 10px 0;
      }
      .time .data-small {
         width: 36px;
         margin: 18px auto 0;
         position: absolute;
         min-height: 48px;
         right: 0;
         .arrow-top{
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 14px solid darken(@bg, 60%);
            position: absolute;
            top: -14px;
            left: 0;
            width: 13px;
            height: 14px;
            margin: 0 auto;
            right: 0;
            &:after{
               content:"";
               width:0;
               height:0;
               border-left: 8px solid transparent;
               border-right: 8px solid transparent;
               border-bottom: 14px solid @bg;
               position:absolute;
               top: 1px;
               left: -8px;
            }
         }
         span {
            padding: 10px 0 0;
            &:nth-child(2){
               padding: 2px 0 0;
            }
         }
      }
      .description {
         .data{
            width: 90%;
            min-height: 100px;
            .text{
               span{
                  &:nth-child(2){
                     font-size: 12px;
                  }
               }
            }
         }
         &.expand-right{
            width:78%;
            float: right;
            .data{
               width: 83%;
               float: right;
               right: 38px;
            }
         }
         &.expand-left{
            width:78%;
            float: left;
            .data{
               width: 83%;
               float: left;
               left:5px;
            }
         }
      }
      .commentaryItem.hasMinHeight .description .data {
         min-height: 20px;
      }
      .commentaryItems:nth-child(odd) .description .data {
         width: 80%;
      }
      .icons.right{
         .position-circle{
            width:30px;
            right: -11px;
            .icons{
               .incTypeIcon{
                  margin-left: 8px !important;
               }
            }
         }
      }
      .twitter{
         width: 73%;
      }
   }

   @media (max-width: 390px) {
      .lines{
         background-position: 0%  0,
            97% 0;
      }
      .teams{
         width: 97%;
      }
      .icons.right{
         .position-circle{
            right: -5px;
         }
      }
   }
   @media (max-width: 290px) {
      .lines{
         background-position: 0%  0,
            100% 0;
      }
      .teams{
         width: 100%;
      }
      .description {
         &.expand-right{
            width:80%;
            .data{
               right: 28px;
            }
         }
         &.expand-left{
            width:80%;
         }
      }
      .icons.right{
         .position-circle{
            right: 2px;
         }
      }
   }
   @media (max-width: 270px) {
      .description {
         &.expand-right{
            width:76%;
            .data{
               right: 31px;
            }
         }
         &.expand-left{
            width:76%;
            .data{
               width: 74%;
               left:11px;
            }
         }
      }
      .commentary{
         .icons{
            &.right{
               .position-circle{
                  width: auto;
               }
            }
         }
      }
   }
   @media (max-width: 250px) {
      .commentary{
         .icons{
            &.right{
               .position-circle{
                  width: auto;
               }
            }
         }
      }
      .icons.right{
         .position-circle{
            right: -2px;
         }
      }
   }

}
/*Fin Relato*/