@import "variables.less";
@import "../customization/less/customVariables.less";

.pronosticador{
  font-family: 'Roboto Condensed', sans-serif;
  background-color: @bgcolor;
  .row{
    margin-right: 0px;
    margin-left: 0px;
  }
  .container-fluid{
    padding-right: 5px;
    padding-left: 5px;
  }
  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
    padding-right: 2px !important;
    padding-left: 2px !important;
  }
  .btn{
    &.btn-sorteo{
      background-color: @btn1;
      color: @labelbtn;
      border-radius: 100px;
      height: 36px;
      padding: 5px 12px;
      text-transform: uppercase;
    }
    &:hover, &:active, &:focus, &:focus:hover{
      color: @labelbtn;
      background: @btnhover;
    }  
  }
  .share{
    width: 36px;
    height: 36px;
    display: inline-block;
    margin: 0 5px;
    svg{
      height: 36px;
      fill: @btndisable;
      &:hover, &:active, &:focus, &:focus:hover{
        fill: @btnhover;
      }
    }
    &.active{
      svg{
        fill: @btn1;        
      }
    }
  }


  .footer{
    float: left;
    margin-top: 10px;
    border-radius: 0px 0px 5px 5px;
    width: 100%;
    padding: 10px;
    background-color: @font-footer;
  }

  .seccion{
    .btn-absolute{
      position: absolute;
      margin-top: 42px;
      z-index: 9;
      width: 100%;
    } 
  }

  .pronosticador-ow {
    .owl-item{
      padding: 0px;
    } 
  }

}

.seccion-box{
  cursor: pointer;
  .row{
    margin-right: -8px;
    margin-left: -8px;
  }
}

.seccion{
  background: @bgcolor2;
  padding-top: 10px;
  float: left;
  width: 100%;
  padding-bottom: 10px;
  .btndisable{
    background-color: @btndisable;
  }
  .btndisable:hover{
    background-color: @btndisable;
  }
  .btndisable:active{
    color: @labelbtn;
    background: @btndisable;
  }
  .btndisable:focus{
    color: @labelbtn;
    background: @btndisable;
  }
  .btndisable:focus:hover{
    color: @labelbtn;
    background: @btndisable;
  }
}

.header{
  padding: 12px 10px;
  text-transform: uppercase;
  border-radius: 5px 5px 0px 0px;
}

.htop{
  font-size: 24px;
  background: @header1;
  color: @label1;
  font-weight: bold;
}

.hsub{
  font-size: 16px;
  background: @header2;
  color: @label2;
  border-radius: 5px 5px 5px 5px;
}

.panel-banner1 {
  text-align: center;
  height: 140px;
  padding: 10px;
  background-color: @bannerback;
}
.panel-banner1 iframe {
  width: 1px;
  min-width: 100%;
  border: none;
  overflow: hidden;
}

.hgrupos{
  font-size: 18px;
  background: @headerteam1;
  color: @labelteam;
}
.box-team{
  float: left;
  margin-top: 5px;
  background: #f2eae0;
  border-radius: 5px;
  font-weight: bold;
  line-height: 11px;
  font-size: 12px;
  width: 100%;
  padding: 10px;
}
.box-team:hover{
  background: @boxactive;
}
.panel-box{
  margin-bottom: 5px;
}

.flag-team{
  height: 32px;
  width: 49px;
}

.box-active{
  background: @boxactive;
}
.box-inactive{
  background: @boxinactive;
}
.box-active::before{
  background: @item-activo;
  position: absolute;
  padding: 4px 6px;
  color: #fff;
  left: 4px;
  border-radius: 5px;
  top: 7px;
} 
.firts::before{content: "1";}
.secon::before{content: "2";}

.logo-df:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/logodf.svg) no-repeat center 40%;
  background-size: 84%;
}

.logo-df {
  background: linear-gradient(to bottom, #ffffff 1%,#e4e4e4 100%);
  width: 110px;
  height: 30px;
  float: left;
  position: relative;
}
.bottom-footer{
  background: @btn1;
  color: @labelbtn;
  padding: 5px 10px;
  float: left;
}
.container-footer{
  margin: 0px auto;
  width: 352px;
}

.list-group-item .pull-right .cont-cxs{
  margin-left: 0px;
}


/*PRONOSTICADOR RONDAS*/

.customNavigation{
  width: 100%;
  float: left;
  height: 45px;
  background: #f2eae0;
  position: absolute;
  right: 0px;

  .owl-theme{
    background-color: @back-nav;
    text-align: center;
    padding: 10px 0px;
    border-radius: 5px;
  }

  .prev{
    left: 10px;
  }
  .next{
    right:  10px;
  }
  .circo{
    position: absolute;
    background: @btn1;
    z-index: 999;
    top: 7px;
    padding-left: 7px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 15px;
    color: @labelbtn;
    border-radius: 50%;
  }


}


.pronosticador-ow{
  margin-top: -33px;
  .item{
    padding: 0px 1px;
  }
  .team-line::before{
    width: 6px;
    height: 3px;
    z-index: 9;
    top: 68px;
    right: -4px;
    background: #cb1816;
    content: "";
    position: absolute;
  }
  .list-group-item:first-child{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }

  .team-line-2::after{
    width: 10px;
    height: 3px;
    z-index: 9;
    top: 68px;
    left: -8px;
    background: #cb1816;
    content: "";
    position: absolute;
  }
  .team-line-final::after{
    width: 11px;
    height: 3px;
    z-index: 9;
    top: 70px;
    left: -15px;
    background: @linecolor;
    content: "";
    position: absolute;
  }
  .llave-octavo::before{
    width: 3px;
    height: 126px;
    z-index: 9;
    top: 68px;
    right: -1px;
    background: @linecolor;
    content: "";
    position: absolute;
  }

  .list-group-item {
    background-color: @boxinactive;
  }
  .activeli {
    background-color: @headerowlabel;
  }
  .list-group-item.activecampeon {
    background-color: @activechampion;
    color: @headerowlabel;
    .linespace{
      font-size: 20px;
    }
  }

  .linespace{
    line-height: 32px;
    text-transform: uppercase;
  }

  .item.finalteam {
    padding: 0px 7px;
  }

  .list-group-item{ 
    cursor: pointer; 
  }
  .list-group-item:hover{ 
    background: @boxactive; 
    color: @labelsli;
  }

  .list-group-item {
    padding: 5px 7px;
    color: @labelsli;
    .donw{
      top: 6px;
    }
    .up{
      top: -23px;
    }
    .cont-circle{
      float: right;
      margin-left: 12px;
      position: relative;
    }
  }

  .first-resul{
    position: absolute;
    top: -22px;
    left: 8px;
    color: @labelsli;
  }
  .secum-resul{
    position: absolute;
    top: 22px;
    left: 8px;
    color: @labelsli;
  }

  .GC_title{
    text-align: center;
    margin-bottom: 80px;
    font-family: Roboto;
    font-size: 18px;
    font-weight: bold;
    color: #484343;
    margin-top: 12px;
    text-transform: uppercase;
  }

  .owl-carousel{  
    .owl-item img {
      width: auto;
      height: 32px;
    }
  }

  .owl-carousel{
    .owl-item {
      .flag-campeon{
        .img-responsive{
          margin-top: 12px;
          max-height: 140px;
        }
      }
      .img-responsive {
        margin: 0px auto;
        max-height: 303px;
        bottom: 0px;
        height: auto;
      } 
    } 
  }

  .owl-item{ 
    .list-group{
      margin-bottom: 10px;
    } 
  }


}

.titulo-owl{
  font-family: Roboto;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  color: @titulosowl;
  text-transform: uppercase;
}
.header-owl{
  padding: 3px 10px;
  text-transform: uppercase;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: @headerowlabel;
  font-size: 14px;
  background-color: @headerowl;
}

.team-owl{
  font-weight: bold;
  margin-left: 5px;
}

.llave-cuartos:before{
  width: 3px;
  height: 268px;
  z-index: 9;
  top: 68px;
  right: 0px;
  background: @linecolor;
  content: "";
  position: absolute;
}

.llave-cuartos.otro:before{
  width: 3px;
  height: 127px;
  z-index: 9;
  top: 68px;
  right: 0px;
  background: @linecolor;
  content: "";
  position: absolute;
}

.margin-octavos{
  margin-top: 0px;
}
.margin-semifinal{
  margin-top: 404px;
}

.llave-octavo{
  position: relative;
  margin-bottom: 19px;
}
.llave-cuartos{
  position: relative;
  margin-top: 138px;
}

.llave-semifinal{
  position: relative;
  margin-bottom: 15px;
  margin-top: 279px;
}

.llave-final{
  position: relative;
  margin-bottom: 15px;
  margin-top: 543px;
}


.margin-cuartos{
  margin-top: 142px;
}

.nav-owl .next.off {
  background: @nav-off;
  cursor: auto;
}
.nav-owl .next.off:hover {
  background: @nav-off;
  cursor: auto;
}

.llave-semifinal:before {
  width: 3px;
  height: 530px;
  z-index: 9;
  top: 68px;
  right: 0px;
  background: @linecolor;
  content: "";
  position: absolute;
}
.llave-semifinal.otro:before {
  width: 3px;
  height: 307px;
  z-index: 9;
  top: 68px;
  right: 0px;
  background: @linecolor;
  content: "";
  position: absolute;
}

.back-final{
  background: @teamfinal;
  min-height: 500px;
  width: 100%;
  border-radius: 5px;
  bottom: 3px;
  position: absolute;
}

.img-panel{
  width: 100%;
  bottom: 143px;
  padding: 10px;
  position: absolute;
}

.img-inactiva{    
  background: @img-inac;
  width: 48px;
  border-radius: 5px;
}

.desc-partidos{  
  position: absolute;
  z-index: 9;
  background: @descpartido;
  right: 10px;
  font-size: 12px;
  top: 60px;
  color: @labelsli;
  padding: 0px 15px;
  border-radius: 12px;
}

.pgandos {
  height: 13px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  float: left;
  position: relative;
}

.green {
  background: @green;
  color: @labelteam;
}

.pempatados {
  height: 13px;
  float: left;
  position: relative;
}

.griss {
  background: @griss;
  color: @labelsli;
}
.pperdidos {
  height: 13px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  float: left;
  position: relative;
}
.reds {
  background: @reds;
  color: @labelteam;
}
.blanck{
  border: solid 1px #979797;
}
.number-team {
  position: absolute;
  font-size: 12px;
  color: @labelsli;
  left: 50%;
  transform: translate(-50%);
}

.circle-team{
  height: 12px;
  width: 12px;
  float: left;
  border-radius: 50%;
}
.num-circledown{
  position: absolute;
  left: 2px;
  top: 4px;
}
.num-circletop{
  position: absolute;
  left: 2px;top: -24px;
}

.top-list{
  margin-top: 14px;
}
.down-list{
  margin-top: 4px;
}
.historicos{
  padding-right: 90px;
}
.cont-historicos{
  position: absolute;
  right: 15px;
  width: 88px;
  height: 23px;
  top: 57px;
  z-index: 999;
}
.circle-big{
  float: right;
  position: relative;
  height: 23px;
  margin-left: 5px;
  line-height: 24px;
  padding-left: 7px;
  font-size: 12px;
  border-radius: 50%;
  width: 23px;
}

.cuartos576{
  margin-top: 65px;
}
.cuartos-margin576{
  margin-top: 1px;
}
.semifinal576{ 
  margin-top: 140px;
}
.semifinal-margin576 {
  margin-top: 125px;
}

.teamName{    
  display: block;
  margin-top: 10px;
  height: 20px;
}

.teamPosition{
  background: #cb1816;
  position: absolute;
  padding: 4px 6px;
  color: #fff;
  left: 4px;
  border-radius: 5px;
  top: 7px;
  display: none;
}

/* RESPONSIVE MEDIA QUERYS */

/* BANNERS */
.bannerDf{
  background: transparent url(../customization/img/banner1.jpg) center center no-repeat;
  height: 90px;
  overflow: hidden;
}
@media only screen and (max-width: 1280px){ 
  .panel-banner1 {
    height: 110px;
  }
}


@media screen and (max-width:600px){

  .flag-team {
    width: 42px;
    height: 30px;
  }
  .pronosticador-ow{
    .list-group{
      .cont-historicos{
        right: 5px;
      } 
      .desc-partidos{
        right: 4px;
      }
      .list-group-item {
        padding: 5px 0px;
      } 
    }
    .item{
      .team-line-final::after{
        top: 70px;
      } 
      .llave-final {
        margin-top: 400px;
      }
      .img-panel{
        bottom: 150px;
      }
    }

  }

  .container-fluid{ 
    .panel-box{
      width: 50%;
    } 
  }
  .share svg{
    width: 30px;
    height: 30px;
    margin-top: 10px;
  }
}
@media screen and (max-width:400px){

  .box-team {
    font-size: 11px;
    padding: 10px 2px;
  }
  .pronosticador-ow{
    .item{
      .llave-semifinal::before{
        height: 382px;
      } 
      .llave-cuartos::before{
        height: 126px;
      }
      .llave-cuartos{
        margin-top: 64px;
        margin-bottom: 17px;
      }
      .margin-cuartos{
        margin-top: 0px;
      }
      .llave-semifinal{
        margin-top: 64px;
      }
      .margin-semifinal{
        margin-top: 0px;
      }
      .llave-octavo{
        margin-bottom: 17px
      }
    } 
    .desc-partidos {
      right: 6px;
    }
    .cont-historicos {
      right: 6px;
    }
  }

  .pronosticador{

    .pronosticador-ow{
      margin-top: -15px;

      .list-group{
        .list-group-item {
          padding: 5px 1px;
        } 
      }
    }
    .header{
      border-radius: 5px 5px 0px 0px;
    }
    .seccion {
      padding-top: 5px;
      padding-bottom: 5px;
    }
    .footer {
      margin-top: 0px;
    }

    .xs-seccion {
      padding-bottom: 17px;
      padding-top: 0;
      margin-top: 8px;
    }
    .panel-banner1 {
      height: 90px;
      padding: 0px;
    }

    .seccion{
      .text-center.btn-absolute {
        margin-top: 55px;
      }
    }

  }

  .container-fluid{
    .panel-box{
      width: 100%;
    } 
  }
  .container-footer{
    width: 273px;
  }

  .logo-df{
    width: 104px;
  }

  .bottom-footer{
    width: 165px;
    font-weight: 100;
    padding: 7px 3px;
    font-size: 11px;
  }
  .box-active:before {
    left: 4px;
    top: 8px;
  }

  .seccion-box{
    .col-xs-6{
      width: 25%;
    } 
  }
  .hgrupos {
    padding: 10px;
  }

  .htop {
    font-size: 18px;
  }
  .share svg{
    width: 24px;
    height: 24px;
    margin-top: 10px;
  }
}
@media screen and (min-width:870px){
  .social{
    text-align: center;
  }
}