/* Header */
.header-coverage {
  background: url(../png/iir-banner-contact.png)
    no-repeat top center;
  background-color: #011935;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 230px;
  border-bottom: 2px solid #5d7fac;
  width: 100%;
}

.contact-header {
  display: flex;
  align-items: center;
}

.contact-title {
  color: #6ff;
  font-family: 'carto', Arial, sans-serif;
  font-size: 2.5rem !important;
  font-weight: 400 !important;
  text-shadow: 1px 1px 20px black;
  margin: 4rem 4rem !important;
}

.bootstrap .row > * {
  padding-right: 0;
  padding-left: 0;
}

.bootstrap h4 {
  font-size: 1.4rem;
}

.bootstrap h5 {
  font-size: 1.75rem;
}

.bootstrap small {
  font-size: 0.75rem;
}

.lazyload,
.lazyloading {
  opacity: 0;
  visibility: hidden;
}

.lazyloaded {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms;
}

/* Card */

main#spacing {
  margin-top: -4rem !important;
}

.contact-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 0.35rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  overflow: hidden;
  margin-top: -4.75rem;
}

.title-container {
  height: 4rem;
}

.mobile-text {
  color: #333;
  font-size: 0.9rem;
}

.bg-dark-grey {
  background-color: #41484e;
}
#primary-btn-lg {
  color: #6ff;
  background-color: #00263d;
}

#primary-btn-lg:hover {
  color: #00263d;
  background-color: #6ff;
}

/* Custom utility classes */
/* Corrections for primary-btn class and Bootstrap conflicts */

.bootstrap a {
  text-decoration: none;
}

.bootstrap a.primary-btn {
  color: #66ffff;
}

.bootstrap a.primary-btn:hover {
  color: #00263d;
}

/* Remove foundation influence within Bootstrap container */

div.bootstrap .row {
  width: auto;
  max-width: none;
}

/* Map Section */

.map-wrapper {
  margin-right: 0;
}

.map-bg,
.map-image,
.map-container {
  background: linear-gradient(
    90deg,
    rgb(1, 35, 55) 0%,
    rgb(0, 36, 58) 54%,
    rgb(1, 64, 104) 100%
  );
}

.map-image {
  position: relative;
}

.map-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Form Section */

.global-numbers {
  height: 3rem;
}

.form-wrap {
  width: 100%;
  height: 38rem;
  padding: 1.5rem;
}

.hubspot-recaptcha {
  font-size: 0.75rem;
}

/* Tooltip */

.tooltip-container {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.tooltip-content {
  position: absolute;
  background-color: rgb(240, 248, 255);
  box-shadow: 0px 0px 20px #00000020;
  padding: 1.6rem;
  border-radius: 8px;
  width: 90vw;
  max-width: 18.75rem;
  padding: 0;
  pointer-events: none;
  z-index: 2;
  /* fade in tooltip */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.pin {
  position: absolute;
  content: '';
  top: 50%;
  left: 80%;
  height: 25px;
  width: 25px;
  background-color: rgba(255, 255, 255, 0.795);
  border-radius: 50%;
  cursor: pointer;
}

.pin:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  animation: pulse-effect 3s ease infinite;
}

#iir-tooltip .tooltip-content .content {
  padding: 0.95rem;
}

#iir-tooltip .tooltip-content .content h6 {
  font-size: 0.8rem;
  width: 14.4rem;
}

#iir-tooltip .tooltip-content .title {
  width: 24ch;
}

#iir-tooltip #iir-header {
  margin: 0 0 0.85rem 0 !important;
}

#iir-tooltip .tooltip-content .title-one {
  font-size: 1.08rem !important;
  width: 33ch;
}

#iir-tooltip .tooltip-content .content .flag {
  width: 2rem;
  margin-right: 0.3rem;
}

#iir-tooltip .tooltip-content .content p {
  font-size: 0.75rem;
  color: #00263d;
}

#iir-tooltip .tooltip-content .content p .tooltip-icon {
  margin-right: 0.3rem;
  width: 1rem;
  height: 1rem;
}

.office-info {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
}

.office-info p {
  margin-bottom: 0.2rem !important;
}

.tooltip-icon {
  width: 1rem;
  height: 1rem;
}

.loc-icon {
  width: 2rem;
  height: 2rem;
}

/* Pulse Effect For Pins */

@keyframes pulse-effect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Marker Placement */

#iir-tooltip .marker_sl,
#iir-tooltip .marker_kp,
#iir-tooltip .marker_nc,
#iir-tooltip .marker_dc,
#iir-tooltip .marker_la,
#iir-tooltip .marker_eu,
#iir-tooltip .marker_me,
#iir-tooltip .marker_in,
#iir-tooltip .marker_ch,
#iir-tooltip .marker_ch2,
#iir-tooltip .marker_ph,
#iir-tooltip .marker_kr,
#iir-tooltip .marker_jp1,
#iir-tooltip .marker_jp2,
#iir-tooltip .marker_oc,
#iir-tooltip .marker_oc2 {
  height: 0.9rem;
  width: 0.9rem;
  background-color: rgb(255, 255, 255);
  background-size: 20%;
}

#iir-tooltip .marker_sl {
  top: 29.1%;
  left: 12.6%;
}

#iir-tooltip .marker_kp {
  top: 27.1%;
  left: 15.6%;
}

#iir-tooltip .marker_nc {
  top: 24.1%;
  left: 20.6%;
}

#iir-tooltip .marker_dc {
  top: 20%;
  left: 24.5%;
}

#iir-tooltip .marker_la {
  top: 73.2%;
  left: 22.8%;
}

#iir-tooltip .marker_eu {
  top: 14.9%;
  left: 41.7%;
}

#iir-tooltip .marker_me {
  top: 35.5%;
  left: 61%;
}

#iir-tooltip .marker_in {
  top: 36%;
  left: 67.9%;
}

#iir-tooltip .marker_ch {
  top: 20.9%;
  left: 79.3%;
}

#iir-tooltip .marker_ph {
  top: 42.2%;
  left: 82.5%;
}

#iir-tooltip .marker_kr {
  top: 25%;
  left: 81.8%;
}

#iir-tooltip .marker_jp1 {
  top: 28%;
  left: 84.3%;
}

#iir-tooltip .marker_jp2 {
  top: 27%;
  left: 86.5%;
}

#iir-tooltip .marker_oc {
  top: 75%;
  left: 79.5%;
}

#iir-tooltip .marker_oc2 {
  top: 77.4%;
  left: 87.2%;
}

/* Tooltip Content Position */

#iir-tooltip .tooltip-content.active {
  cursor: pointer;
  display: block;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

#iir-tooltip .tc_sl {
  right: 40%;
}

#iir-tooltip .tc_kp {
  right: 37%;
}

#iir-tooltip .tc_nc {
  right: 32%;
}
#iir-tooltip .tc_dc {
  right: 29%;
}

#iir-tooltip .tc_la {
  top: 5%;
  right: 49%;
}

#iir-tooltip .tc_eu {
  right: 12%;
}

#iir-tooltip .tc_me {
  right: 40%;
}

#iir-tooltip .tc_in {
  right: 34%;
}

#iir-tooltip .tc_ch {
  right: 24%;
}

#iir-tooltip .tc_kr {
  right: 15%;
  top: -16%;
}

#iir-tooltip .tc_ph {
  right: 18%;
  top: -3%;
}

#iir-tooltip .tc_jp1 {
  right: 15.7%;
  top: -16%;
}

#iir-tooltip .tc_jp2 {
  right: 15.7%;
  top: -16%;
}

#iir-tooltip .tc_oc {
  right: 7%;
  top: 14%;
}

#iir-tooltip .tc_oc2 {
  right: 1%;
  top: 16%;
}

/* Location Buttons */

.locations-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button.loc-item {
  background-color: transparent !important;
  padding: 0;
  border:0;
}

.loc-item .contact-item {
  flex-shrink: 0;
  font-size: 0.78rem;
  background-color: rgba(248, 249, 250, 0.88);
  border-radius: 0.35rem;
  width: 9.5rem;
}

.loc-item .contact-item:hover {
  opacity: 0.5;
}

/* Media Queries */

/* Small only */
@media screen and (max-width: 39.9375em) {
  .bootstrap h1 {
    font-size: calc(2.175rem);
  }
  .clk {
    text-align: center;
    padding-top: 64px;
  }
  .bootstrap h4 {
    font-size: 0.95rem;
  }
  .header-coverage {
    background-position: right 30%;
  }
  .map-container {
    display: none;
  }
  .form-wrap {
    height: auto;
  }
  .contact-container {
    margin-left: 0.7rem;
    margin-right: 0.7rem;
  }
  .contact-title {
    color: #fff;
  }
  .map-bg {
    background: transparent;
  }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .clk {
    text-align: center;
    padding-top: 80px;
  }
  .mobile-locations {
    display: none;
  }
  .header-coverage {
    background-position: right 30%;
  }
  .map-container {
    height: 35.1rem;
  }
  .header-coverage {
    background-position: right 30%;
  }
}

@media screen and (min-width: 62.0625em) and (max-width: 87.3125em) {
  .header-coverage {
    background-position: right 30%;
  }
  .locations-wrapper {
    padding: 1rem !important;
  }
}

@media screen and (min-width: 62em) and (max-width: 74.9375em) {
  .header-coverage {
    background-position: right 30%;
  }
  .loc-item .contact-item {
    width: 8.5rem;
  }
  .form-wrap {
    max-height: 36.2rem;
  }
  #phone-container {
    width: 100%;
    max-width: 100%;
  }
}
@media only screen and (min-width: 61.875em) {
  .mobile-locations {
    display: none;
  }
}