/*****************************************************
LESS compilation failed due a JavaScript error!

Input: /apps/atvi/crash/ctr/components/content/grandprix/grandprix-leaderboard/clientlibs/css/leaderboard.less
Error: FileError: 'utils.less' wasn't found in /apps/atvi/crash/ctr/components/content/grandprix/grandprix-leaderboard/clientlibs/css/leaderboard.less on line 1, column 1:
1 @import "/apps/atvi/activision-blizzard/ab-touchui/clientlibs/common/css/utils.less";
2 


(uncompiled LESS src is included below)
*****************************************************/
@import "/apps/atvi/activision-blizzard/ab-touchui/clientlibs/common/css/utils.less";

// Games List
.games-lists-container {
  background-color: @offblack;
  color: #fff;
  padding: 100px 0;

  .desktop {
    display: flex;
  }
  .mobile {
    display: none;
  }

  .cta-btn {
    border: 2px solid #fff;

    &:hover,
    &.active {
      background-color: #fff;

      .link{
        color: #000;
      }
    }

    .link {
      padding: 19px 0;
      .bebas-neue-bold();
      font-size: 22px;
      letter-spacing: 3px;
      cursor: pointer;
      .transition(all 0.5s);
    }
  }

  .description-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px;

    .sub-headline {
      width: 38%;
      .bebas-neue-reg();
      font-size: 28px;
      color: @grey;
      letter-spacing: 4px;
      margin-bottom: 50px;
    }
    .description {
      width: 60%;
      .source-sans-font();
      font-size: 20px;
      line-height: 1.3;
    }
  }

  .company-select-container {
    display: flex;
    position: relative;
    text-align: center;
    width: 80%;
    max-width: 1100px;

    .cta-btn {
      width: 25%;
    }

    .active-company{
      padding-top: 19px;
      padding-bottom: 19px;
      cursor: pointer;

      .link{
        position: relative;

        &:after{
          content:"";
          background: url(../../../../../../../../content/dam/atvi/activisionblizzard/ab-touchui/common/arrow-down-white.png);
          background-position: center center;
          background-repeat: no-repeat;
          background-size: contain;
          position: absolute;
          top: 21px;
          right: -30px;
          width: 18px;
          height: 18px;
        }
      }
    }
  }
  .cta-btn-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: -100%;
    left: 0;
    opacity: 0;
    padding: 0 30px;
    width: 100%;
    z-index: 2;
  }

  .games-list {
    margin-top: 70px;

    .game {
      display: none;
      margin-bottom: 30px;

      &.current {
        display: block;
      }
    }

    .callout-container {
      position: relative;
      cursor: pointer;

      span {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }

    .bg-container {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 40vh;
      min-height: 450px;
    }
  }
  .more-btn {
    margin: 100px auto 50px;
    text-align: center;
    max-width: 272px;
    .transition(all 0.5s);
  }

  @media screen and (max-width: 1024px) {
    .desktop {
      display: none;
    }
    .mobile {
      display: flex;
    }

    .header {
      .head {
        &:after {
          content: none;
        }
      }
    }
    .description-container {
      display: block;

      .sub-headline,
      .description {
        width: 100%;
      }
    }

    .company-select-container{
      flex-direction: column;
      width: 100%;

      &.activate{
        .active-company{
          .link{
            &:after{
              background: url(../../../../../../../../content/dam/atvi/activisionblizzard/ab-touchui/common/arrow-up-black.png);
              background-position: center center;
              background-repeat: no-repeat;
              background-size: contain;
            }
          }
        }
        .cta-btn-container{
          top: 68px;
          opacity: 1;
          border-top: 1px solid #000;
          z-index: 2;
        }
        .cta-btn{
          background-color: #fff;

          &.active{
            .link{
              color: @grey;
            }
          }

          .link{
            color: #000;
          }
        }
      }

      .cta-btn{
        justify-content: center;
        width: 100%;

        .link{
          font-size: 28px;
        }
      }
    }
  }
}

html:lang(pt-BR) .crash-leaderboards .crash-lb-row-header li,
html:lang(pt) .crash-leaderboards .crash-lb-row-header li {
  font-size: 24px;
}
@media screen and (max-width: 1024px) {
  html:lang(pt-BR) .crash-leaderboards .crash-lb-row-header li,
  html:lang(pt) .crash-leaderboards .crash-lb-row-header li {
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  html:lang(pt-BR) .crash-leaderboards .crash-lb-row-header li,
  html:lang(pt) .crash-leaderboards .crash-lb-row-header li {
    font-size: 10px;
  }
}