.boxmenu {
  .l-container-responsive(@max-width);

  &__header-inner {
    .l-container-responsive(@device-width-large);
  }

  // &__item-container-inner {
  //   display: flex;display:-ms-flexbox;
  //   flex-wrap: wrap;
  //   .l-container-responsive(@device-width-large);
  // }

  .timeline-container {
    position: relative;
    @media screen and (max-width: 850px) {
      padding-top: 250px;
    }
    .left-character {
      position: absolute;
      left: -200px;
      top: 50px;
      @media screen and (max-width: 850px) {
        left: 0;
        top: -150px;
        max-width: 110px;
      }
    }
    .text-container {
      p {
        margin: 0;
      }
      position: absolute;
      top: -80px;
      right: -80px;
      font-size: 1.5rem;
      width: 70px;
      color: #fdfdfd;
      text-transform: uppercase;
      font-weight: 700;
      @media screen and (max-width: 850px) {
        top: -62px;
        right: -64px;
        font-size: 1rem;
        width: 62px;
      }
    }

    .right-character {
      position: absolute;
      right: -100px;
      top: 15px;
      max-width: 100px;
      @media screen and (max-width: 850px) {
        right: -60px;
        top: 25px;
        max-width: 75px;
      }
    }

    .bottom-character {
      position: absolute;
      right: -100px;
      bottom: 0;
      max-width: 150px;
      @media screen and (max-width: 850px) {
        right: -42px;
        bottom: 0;
        max-width: 100px;
      }
    }
  }
  .progress-map {
    max-width: 160px;
    margin: auto;
    transform: scale(1.2);
    position: relative;
    .row {
      display: flex;display:-ms-flexbox;
      flex-wrap: nowrap;
      &:nth-child(2n) {
        flex-direction: column;
      }
      &.row {
        &.align-end {
          align-items: flex-end;
        }
        &.row-reverse {
          flex-direction: row-reverse;
        }
        &.left-col {
          margin-left: -33px;
          margin-top: -30px;
        }
        &.right-col {
          margin-right: -10px;
          margin-top: -21px;
        }
        &-3 {
          margin-top: -12px;
        }
        &-7 {
          margin-top: -17px;
          margin-left: -38px;
        }
        &-5 {
          transform: translate(-22px, -30px);
        }
        &-6 {
          margin-left: -50px !important;
          margin-top: -58px !important;
        }
      }

      .key {
        width: 40px;
        height: 40px;
        margin: 2px;
        padding: 12px;
        position: relative;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        &.key-1,
        &.key-2,
        &.key-3 {
          transform: scale(0.92);
          margin-top: 1px;
          margin-right: 0px;
          margin-left: 1px;
        }
        &.key-4 {
          transform: scale(1.09);
          margin-top: 5px;
          margin-left: 0px;
        }
        &.key-5 {
          transform: scale(1.28);
          margin-top: 5px;
          margin-left: 3px;
        }
        &.key-20,
        &.key-6 {
          margin-top: -8px;
          margin-left: -1px;
        }
        &.key-8 {
          margin-top: -3px;
          margin-left: -11px;
          transform: scale(1.35);
        }
        &.key-9 {
          margin-left: -1px;
          transform: scale(1.05);
        }
        &.key-10 {
          transform: scale(0.85);
          margin-left: -1px;
          margin-top: 1px;
        }
        &.key-11 {
          transform: scale(1.08);
          margin-top: 6px;
          margin-left: -1px;
        }
        &.key-13 {
          transform: translateX(3px);
          margin-top: 1px;
        }
        &.key-14 {
          transform: scale(1.15) translateX(-4px);
          margin-top: -10px;
        }
        &.key-15 {
          transform: scale(0.92);
          margin-top: 1px;
          margin-right: -1px;
        }
        &.key-16 {
          transform: scale(0.96) translateX(4px);
          margin-left: 0;
          margin-top: 4px;
        }
        &.key-17 {
          transform: scale(0.9) translateX(6px);
          margin-left: -1px;
          margin-top: 4px;
        }
        &.key-18 {
          transform: scale(1.16) translateX(2px);
          margin-top: 7px;
          margin-left: 3px;
        }
        &.key-19 {
          transform: scale(1.2);
          margin-top: 4px;
          margin-left: 4px;
        }
        &.key-21 {
          transform: scale(1.1);
          margin-top: 3px;
          margin-left: 0px;
        }
        &.key-22 {
          transform: scale(1.25);
        }
        &.key-23 {
          transform: scale(0.9);
          margin-top: 11px;
          margin-left: -2px;
        }
        &.key-24 {
          transform: scale(1.12);
          margin-top: 18px;
          margin-left: -4px;
        }
      }
    }
  }
}
.menu-item.is-complete + .menu-item .boxmenu-item__button span.icon.icon-padlock-locked:before{
  content: "";
  background-image: url(assets/icons/RR_EPL_menu_active.png);
  height: 20px;
  width: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.menu-item:first-child .menu-item__button-container.boxmenu-item__button-container button{
  // background: linear-gradient(180deg, #c8c7cc,#c8c7cc,#9b9b9b);
  color: #000 !important; 
}



.menu-item.is-complete + .menu-item .menu-item__button-container.boxmenu-item__button-container button{
  // background: linear-gradient(180deg, #c8c7cc,#c8c7cc,#9b9b9b);
  color: #000 !important;
}



.menu-item.is-complete  + .menu-item .boxmenu-item__button{
  pointer-events:all;
}