/*--------------------------------------------------
  IPD Blueprint - Layer 2
--------------------------------------------------*/

.ipd-layer-2.hidden {
  opacity: 0;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

.ipd-layer-2 {
  opacity: 1;
  -webkit-transition: opacity 500ms ease 1500ms;
  -o-transition: opacity 500ms ease 1500ms;
  transition: opacity 500ms ease 1500ms;

  .ipd-bg-img {
    width: 100%;
  }

  .ipd-btn_l2 {
    position: absolute;
    -webkit-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    cursor: pointer;
    z-index: 1;
    width: 3.385vw;
    max-width: 44px;
    height: 3.385vw;
    max-height: 44px;

    img {
      width: 100%;
    }
  }

  .ipd-btn_l2:hover {
    opacity: 0.8;
  }

  /*--------------------------------------------------
    Layer 2 Back Button
  --------------------------------------------------*/

  .back-btn {
    position: absolute;
    bottom: 4.7%;
    left: 3%;
    width: 100%;
    width: 14.385%;
    max-width: 187px;
    height: 5.882%;
    max-height: 50px;

    .btn {
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-size: 1.231vw;
      padding: 0;
      padding-left: 22.22%;
      border-width: 0.538vw;

      svg {
        position: absolute;
        top: 50%;
        left: 11.765%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        width: 4.278%;
        max-width: 100%;
        height: auto;
      }
    }
  }

  /*--------------------------------------------------
    1. Bakery Buttons
  --------------------------------------------------*/

  #BLF-CR_bakery-btn {
    bottom: 23.529%;
    left: 26.538%;
  }
  #BMD_bakery-btn {
    bottom: 36.941%;
    left: 51.692%;
  }
  #PF_bakery-btn {
    top: 42.118%;
    right: 29.231%;
  }
  #BWU-D_bakery-btn {
    top: 26.824%;
    right: 18.846%;
  }

  /*--------------------------------------------------
    2. Beverages Buttons
  --------------------------------------------------*/

  #QCD_beverage-btn {
    top: 50.941%;
    left: 23.615%;
  }
  #QC_beverage-btn {
    top: 42.588%;
    left: 50.846%;
  }
  #O5DMH_beverage-btn {
    top: 32.706%;
    right: 18.538%;
  }

  /*--------------------------------------------------
    3. Dairy Buttons
  --------------------------------------------------*/

  #ORBR_dairy-btn {
    top: 38%;
    left: 19.846%;
  }
  #ORBH_dairy-btn {
    top: 47.412%;
    left: 44.923%;
  }
  #VNRBH_dairy-btn {
    top: 55.412%;
    right: 26.692%;
  }

  /*--------------------------------------------------
    4. Deli Buttons ???
  --------------------------------------------------*/

  #DLPC_deli-btn {
    bottom: 38%;
    left: 39.385%;
  }
  #DLPF_deli-btn {
    bottom: 43.529%;
    right: 32.077%;
  }
  #PTD_deli-btn {
    top: 40.118%;
    right: 37.538%;
  }
  #SMD_deli-btn {
    top: 43.882%;
    left: 43.308%;
  }
  #MBI_deli-btn {
    top: 41.294%;
    left: 22.308%;
  }
  #PFH_deli-btn {
    top: 36.118%;
    right: 22.846%;
  }
  #HTPT_deli-btn {
    top: 38.353%;
    right: 11.769%;
  }

  /*--------------------------------------------------
    5. Floral Buttons
  --------------------------------------------------*/

  #FT_floral-btn {
    bottom: 32.588%;
    left: 32.692%;
  }
  #CWC_floral-btn {
    bottom: 24.706%;
    right: 36.846%;
  }
  #NFO_floral-btn {
    top: 42.588%;
    right: 36.231%;
  }
  #NFD_floral-btn {
    top: 37.882%;
    right: 21.692%;
  }

  /*--------------------------------------------------
    6. Frozen Buttons
  --------------------------------------------------*/

  #VNRZH_frozen-btn {
    top: 37.059%;
    left: 27.154%;
  }
  #ONRZH_frozen-btn {
    top: 35.294%;
    left: 53.308%;
  }
  #JNRZH_frozen-btn {
    top: 54.118%;
    right: 18.077%;
  }
  #ONIZV_frozen-btn {
    bottom: 32.235%;
    left: 22.769%;
  }

  /*--------------------------------------------------
    7. Grab N Go Buttons
  --------------------------------------------------*/

  #CF-Tall_grab-n-go-btn {
    top: 35.294%;
    left: 11%;
  }
  #QC-TM_grab-n-go-btn {
    top: 36.235%;
    left: 25.692%;
  }
  #QC_grab-n-go-btn {
    top: 30.235%;
    left: 35.538%;
  }
  #CF_grab-n-go-btn {
    top: 52%;
    right: 39.462%;
  }
  #HS_grab-n-go-btn {
    bottom: 32.118%;
    right: 16.692%;
  }

  /*--------------------------------------------------
    8. Meat Buttons
  --------------------------------------------------*/

  #ONRM_meat-btn {
    top: 45.882%;
    left: 20.769%;
  }
  #DLPF_meat-btn {
    top: 42.941%;
    left: 39.615%;
  }
  #GMD-RGC_meat-btn {
    top: 37.765%;
    right: 37.692%;
  }
  #I2I_meat-btn {
    top: 50%;
    right: 16.308%;
  }

  /*--------------------------------------------------
    9. Produce Buttons
  --------------------------------------------------*/

  #OHP_produce-btn {
    top: 40%;
    left: 19.231%;
  }
  #produce_6DMLH-btn {
    top: 37.059%;
    left: 47.077%;
  }

  #produce_6RBLH-btn {
    top: 42.353%;
    right: 31.692%;
  }
  #O5DM_produce-btn {
    top: 47.765%;
    right: 16.538%;
  }
  #OB_produce-btn {
    bottom: 37.176%;
    left: 41%;
  }

  /*--------------------------------------------------
    10. Seafood Buttons
  --------------------------------------------------*/

  #BSD-SW_seafood-btn {
    top: 50%;
    left: 21.154%;
  }
  #PT_seafood-btn {
    top: 44.706%;
    left: 38.462%;
  }
  #JNRZHSA_seafood-btn {
    top: 34.118%;
    right: 40.385%;
  }
  #OWIZV_seafood-btn {
    bottom: 32.706%;
    right: 40%;
  }
  #OWEZV_seafood-btn {
    bottom: 35.294%;
    right: 18.615%;
  }
}

/*--------------------------------------------------
  min-width: 1300px
--------------------------------------------------*/

@media only screen and (min-width: 81.25em) {
  .ipd-layer-2 {
    .back-btn {
      .btn {
        font-size: 1rem;
        border-width: 7px;
        padding-left: 40px;
        height: 55px;

        svg {
          width: 8px;
        }
      }
    }
  }
}
