/*--------------------------------------------------
  IPD Map - Layer 1
--------------------------------------------------*/

.ipd-layer-1 {
  position: relative;

  /*--------------------------------------------------
    Map
  --------------------------------------------------*/

  .ipd-map {
    width: 100%;
  }

  .ipd-map.bakery_zoom-in {
    -webkit-animation: bakery 1000ms ease forwards 500ms;
    animation: bakery 1000ms ease forwards 500ms;
  }
  .ipd-map.beverage_zoom-in {
    -webkit-animation: beverage 1000ms ease forwards 500ms;
    animation: beverage 1000ms ease forwards 500ms;
  }
  .ipd-map.dairy_zoom-in {
    -webkit-animation: dairy 1000ms ease forwards 500ms;
    animation: dairy 1000ms ease forwards 500ms;
  }
  .ipd-map.deli_zoom-in {
    -webkit-animation: deli 1000ms ease forwards 500ms;
    animation: deli 1000ms ease forwards 500ms;
  }
  .ipd-map.floral_zoom-in {
    -webkit-animation: floral 1000ms ease forwards 500ms;
    animation: floral 1000ms ease forwards 500ms;
  }
  .ipd-map.frozen_zoom-in {
    -webkit-animation: frozen 1000ms ease forwards 500ms;
    animation: frozen 1000ms ease forwards 500ms;
  }
  .ipd-map.grab-n-go_zoom-in {
    -webkit-animation: grab-n-go 1000ms ease forwards 500ms;
    animation: grab-n-go 1000ms ease forwards 500ms;
  }
  .ipd-map.meat_zoom-in {
    -webkit-animation: meat 1000ms ease forwards 500ms;
    animation: meat 1000ms ease forwards 500ms;
  }
  .ipd-map.produce_zoom-in {
    -webkit-animation: produce 1000ms ease forwards 500ms;
    animation: produce 1000ms ease forwards 500ms;
  }
  .ipd-map.seafood_zoom-in {
    -webkit-animation: seafood 1000ms ease forwards 500ms;
    animation: seafood 1000ms ease forwards 500ms;
  }

  /*--------------------------------------------------
    Buttons - Layer 1
  --------------------------------------------------*/

  .ipd-btn_l1 {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.231vw;
    text-align: center;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 700;
    line-height: 137.5%;
    color: var(--white);
    background-color: var(--primary);
    width: 10.385%;
    max-width: 135px;
    height: 5.882%;
    max-height: 50px;
    border-left: 0.538vw solid var(--secondary);
    opacity: 1;
    -webkit-transition:
      background-color 200ms ease,
      opacity 500ms ease;
    -o-transition:
      background-color 200ms ease,
      opacity 500ms ease;
    transition:
      background-color 200ms ease,
      opacity 500ms ease;
    cursor: pointer;
  }

  #ipd-bakery-btn {
    top: 34%;
    right: 17.846%;
    border-color: var(--bakery);
  }
  #ipd-bakery-btn:hover {
    background-color: var(--bakery);
  }

  #ipd-beverage-btn {
    top: 58.235%;
    left: 15.923%;
    border-color: var(--beverage);
  }
  #ipd-beverage-btn:hover {
    background-color: var(--beverage);
  }

  #ipd-dairy-btn {
    top: 31.059%;
    left: 15.923%;
    border-color: var(--dairy);
  }
  #ipd-dairy-btn:hover {
    background-color: var(--dairy);
  }

  #ipd-deli-btn {
    top: 49.529%;
    left: 31.692%;
    border-color: var(--deli);
  }
  #ipd-deli-btn:hover {
    background-color: var(--deli);
  }

  #ipd-floral-btn {
    top: 49.529%;
    right: 32.154%;
    border-color: var(--floral);
  }
  #ipd-floral-btn:hover {
    background-color: var(--floral);
  }

  #ipd-frozen-btn {
    top: 10.235%;
    left: 15.923%;
    border-color: var(--frozen);
  }
  #ipd-frozen-btn:hover {
    background-color: var(--frozen);
  }

  #ipd-grab-n-go-btn {
    top: 38.235%;
    left: 47.692%;
    border-color: var(--grab-n-go);
  }
  #ipd-grab-n-go-btn:hover {
    background-color: var(--grab-n-go);
  }

  #ipd-meat-btn {
    top: 17.882%;
    left: 39.769%;
    border-color: var(--meat);
  }
  #ipd-meat-btn:hover {
    background-color: var(--meat);
  }

  #ipd-produce-btn {
    top: 67.412%;
    right: 17.846%;
    border-color: var(--produce);
  }
  #ipd-produce-btn:hover {
    background-color: var(--produce);
  }

  #ipd-seafood-btn {
    top: 17.882%;
    right: 32.154%;
    border-color: var(--seafood);
  }
  #ipd-seafood-btn:hover {
    background-color: var(--seafood);
  }
}

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

@media only screen and (min-width: 81.25em) {
  .ipd-layer-1 {
    .ipd-btn_l1 {
      font-size: 1rem;
      border-width: 7px;
    }
  }
}