/*------------------------------------------------------------------------------------------------*
| Shared Pin and Content Styles
\*------------------------------------------------------------------------------------------------*/
.pin {
  position: absolute;
  width: 41px;
  height: 56px;
  background-image: url("/images/icons/pin.png");
  cursor: pointer;
}
.pin:hover {
  background-image: url("/images/icons/pin-rollover.png");
}

.pin_content {
  font-family: open-sans, sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
}

.pin_content h5 {
  text-transform: uppercase;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 3px;
  font-weight: 600;
  color: white;
}

.pin_content strong {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 1px;
  font-weight: 600;
}

.pin_content a {
  color: white;
}



/*------------------------------------------------------------------------------------------------*
| Breakpoint: Extra Small (xs)
\*------------------------------------------------------------------------------------------------*/
@media (max-width: 575px) {
  .pin_content {
    margin: 3rem;
  }
  .pin_content h5 {
    font-size: 12px;
  }
}

/*------------------------------------------------------------------------------------------------*
| Breakpoint: Small (sm)
\*------------------------------------------------------------------------------------------------*/
@media (min-width: 576px) and (max-width: 767px) {
  .pin_content {
    margin: 3rem 4rem;
  }
  .pin_content h5 {
    font-size: 12px;
  }
}

/*------------------------------------------------------------------------------------------------*
| Breakpoint: Medium (md)
\*------------------------------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 991px) {
  #repair_center_map {
    width: 780px;
    height: 434px;
    background: url("/images/backgrounds/locate-repair-center-map-blank.png") center/contain no-repeat;
    margin-top: 3rem;
  }

  .pin_content {
    display: none;
    width: 240px;
    background-color: #232323;
    border-color: #999;
    border-radius: 10px;
    color: #adadad;
    padding: 1rem;
    position: absolute;
  }

  #us_pin { top: 125px; left: 130px; }
  #us_pincontent { top: 90px; left: 180px; }

  #ca_pin { top: 113px; left: 205px; }
  #ca_pincontent { top: 130px; left: 205px; }

  #uk_pin { top: 95px; left: 358px; }
  #uk_pincontent { top: 75px; left: 130px; }

  #ch_pin { top: 113px; left: 3795px; }
  #ch_pincontent { top: 150px; left: 285px; }

  #ru_pin { top: 85px; left: 435px; }
  #ru_pincontent { top: 85px; right: 55px; }

  #za_pin { bottom: 95px; left: 418px; }
  #za_pincontent { top: 190px; left: 190px; }

  #au_pin { bottom: 90px; right: 140px; }
  #au_pincontent { bottom: 30px; right: 105px; }

  #in_pin { top: 192px; left: 520px; }
  #in_pincontent { top: 180px; left: 280px; }
}

/*------------------------------------------------------------------------------------------------*
| Breakpoint: Large (lg)
\*------------------------------------------------------------------------------------------------*/
@media (min-width: 992px) and (max-width: 1199px) {
  #repair_center_map {
    width: 980px;
    height: 546px;
    background: url("/images/backgrounds/locate-repair-center-map-blank.png") center/contain no-repeat;
    margin-top: 3rem;
  }

  .pin_content {
    display: none;
    width: 240px;
    background-color: #232323;
    border-color: #999;
    border-radius: 10px;
    color: #adadad;
    padding: 1rem;
    position: absolute;
  }

  #us_pin { top: 165px; left: 170px; }
  #us_pincontent { top: 205px; left: 195px; }

  #ca_pin { top: 148px; left: 267px; }
  #ca_pincontent { top: 178px; left: 277px; }

  #uk_pin { top: 130px; left: 455px; }
  #uk_pincontent { top: 170px; left: 235px; }

  #ch_pin { top: 145px; left: 485px; }
  #ch_pincontent { top: 180px; left: 265px; }

  #ru_pin { top: 115px; left: 555px; }
  #ru_pincontent { top: 155px; right: 165px; }

  #za_pin { bottom: 130px; left: 535px; }
  #za_pincontent { top: 310px; left: 235px; }

  #au_pin { bottom: 125px; right: 175px; }
  #au_pincontent { bottom: 45px; right: 115px; }

  #in_pin { top: 236px; left: 664px; }
  #in_pincontent { top: 210px; left: 315px; }
}

/*------------------------------------------------------------------------------------------------*
| Breakpoint: Extra Large (xl)
\*------------------------------------------------------------------------------------------------*/
@media (min-width: 1200px) {
  #repair_center_map {
    width: 1137px;
    height: 634px;
    background: url("/images/backgrounds/locate-repair-center-map-blank.png") center/contain no-repeat;
    margin-top: 3rem;
  }

  .pin_content {
    display: none;
    width: 240px;
    background-color: #232323;
    border-color: #999;
    border-radius: 10px;
    color: #adadad;
    padding: 1rem;
    position: absolute;
  }

  #us_pin { top: 200px; left: 200px; }
  #us_pincontent { top: 225px; left: 225px; }

  #ca_pin { top: 180px; left: 310px; }
  #ca_pincontent { top: 190px; left: 310px; }

  #uk_pin { top: 155px; left: 535px; }
  #uk_pincontent { top: 195px; left: 315px; }

  #ch_pin { top: 175px; left: 570px; }
  #ch_pincontent { top: 205px; left: 355px; }

  #ru_pin { top: 140px; left: 650px; }
  #ru_pincontent { top: 175px; right: 225px; }

  #za_pin { bottom: 150px; left: 625px; }
  #za_pincontent { top: 285px; left: 395px; }

  #au_pin { bottom: 145px; right: 195px; }
  #au_pincontent { bottom: 85px; right: 135px; }

  #in_pin { top: 276px; left:770px; }
  #in_pincontent { top: 225px; left: 385px; }
}