body {
  overflow: scroll;
  margin: 0;
  padding: 0;
}
.map-container {
  max-width: 1200px;
  width: 100%;
  max-height: 550px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
.map {
  max-width: 1200px;
  width: 100%;
  max-height: 550px;
  height: 100%;
}
.icons-analytic-grayscale > img,
.icons-research-grayscale > img,
.icons-clinical-grayscale > img,
.icons-analytic > img,
.icons-research > img,
.icons-clinical > img {
  position: absolute;
  width: 1.92%;
  height: 4.36%;
  z-index: 2;
}
/* .responsive {
  width: 100%;
  height: auto;
} */
.hotspot {
  top: 90%;
  left: 10%;
  cursor: pointer;
  position: absolute;
  background-color: rgba(0, 0, 0, 0);
  z-index: 999;
  height: 3%;
}
.hotspot#analytic {
  left: 25%;
  width: 22.25%;
  color: #b50000;
}
.hotspot#research {
  left: 50%;
  width: 22.25%;
  color: #272660;
}
.hotspot#clinical {
  left: 75%;
  width: 22.25%;
  color: #006200;
}
.hotspot-text {
  /* cursor: pointer; */
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  padding: 2px 2px 2px 4px;
  margin: 0;
  left: 70%;
}
.hotspot-text:focus {
  border-radius: 4px;
  transition: .06s;
}
.icon-text {
  /* display: none; */  
  font-size: 14px;
  position: absolute;
  z-index: 2;
  margin: 0 5px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s linear; 
}
.icons-analytic > .icon-text,
.information-box.analytic {
  color: #b50000;
}
.icons-research > .icon-text,
.information-box.research {
  color: #272660;
}
.icons-clinical > .icon-text,
.information-box.infrastrucure {
  color: #006200;
}
#analytic > .hotspot-text:focus {
  outline: #b50000 solid 2px;
}
#research > .hotspot-text:focus {
  outline: #272660 solid 2px;
}
#clinical > .hotspot-text:focus {
  outline: #006200 solid 2px;
}
.zoom {
  transition: transform 0.2s;
}
.zoom:hover {
  transform: scale(1.5);
  cursor: pointer;
}
.zoom-text {
  visibility: visible;
  opacity: 1;
}
.zoom-from-text {
  transform: scale(1.5);
}
.permanent {
  visibility: visible;
  opacity: 1;
}
.icons-passive {
  opacity: 0.15;
}
.information-box-container {
  max-width: 60%;
  min-height: 0;
  margin: 0 auto;
}
.information-box {
  display: none;
  max-width: 1200px;
  width: 75%;
  height: auto;
  margin: 0 auto;
  border: solid 2px;
  border-radius: 10px;
  padding: 0 20px;
}
.information-box h1,
.information-box p {
  color: #333;
  margin: 16px 0;
}
.information-box h1 {
  font-size: 20px;
  margin: 16px 0;
}
.information-box p {
  font-size: 12px;
  margin-top: 0;
}
/* draws a line from the UNC location by displaying the bottom border of a div */
.line {
  border-bottom: 2px solid rgba(51, 51, 51, 1);
  position: absolute;
}
.line-passive {
  border-bottom-color: rgba(51, 51, 51, 0.25);
}
.line-passive > p {
  opacity: 0.15;
}
#unc.line {
  width: 6.75%;
  height: 2.5%;
  transform: rotate(15deg);
  top:62%;
  left:72%;
}
#chicago.line {
  width: 9%;
  height: 3%;
  transform: rotate(-70deg);
  top:37%;
  left:57.5%;
}
#boston.line {
  width: 6.25%;
  height: 2.5%;
  transform: rotate(-15deg);
  top:37.25%;
  left:77.17%;
}
#los-angeles.line {
  width: 7.25%;
  height: 2.5%;
  transform: rotate(-15deg);
  top:63%;
  left:21.75%;
}
#davis.line {
  width: 6.25%;
  height: 2.5%;
  transform: rotate(15deg);
  top:48%;
  left:21.75%;
}
.unc-text,
.chicago-text,
.boston-text,
.los-angeles-text,
.davis-text {
  font-size: 12px;
  margin-top: -4px;
  margin-left: auto;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s linear; 
}
.display-line-text {
  visibility: visible;
  opacity: 1;
}
#instructions p {
  font-size: 12px;
  line-height: 12px;
  /* font-weight: normal; */
}
.list-of-centers {
  max-width: 1200px;
  width: 95%;
  margin: 0 auto;
}
.list-of-centers ul {
  list-style-type: none;
  padding-left: 0;
}
.list-of-centers ul li{
  margin-bottom: 5px;
  line-height: 18px;
  font-size: 12px;
}
.list-of-centers p {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
}
.list-of-centers #analytic p:hover,
.list-of-centers #research p:hover,
.list-of-centers #clinical p:hover,
.list-of-centers li:hover {
  cursor: pointer;
  text-decoration: underline;
}
#heading-analytic {
  color: #b50000;
}
#heading-research{
  color: #272660;
}
#heading-clinical{
  color: #006200;
}
#heading-analytic > img,
#heading-research > img,
#heading-clinical > img {
  width: 4.8%;
  height: 10.9%;
  margin-left: 5px;
}
#closebutton {
  text-align: right;
  text-decoration: underline;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 0;
  padding-left: 10px;
  width: auto;
}
#closebutton:hover {
  cursor: pointer;
}
  
@media screen and (max-width:1215px){
  .icon-text {
    font-size: 1.25vw;
  }
  #clinical2-text,
  #clinical3-text {
    left: 10% !important;
    width: 8% !important;
  }
  #clinical4-text {
    width: 5% !important;
    left: 50% !important;
  }
  #unc.line > p,
  #chicago.line > p,
  #boston.line > p,
  #los-angeles.line > p {
    font-size: 1vw !important;
  }
  .information-box {
    width: 100%;
  }
  .information-box h1 {
    font-size: 18px;
  }
}
@media screen and (max-width:700px){
  #closebutton {
    font-size: 10px; 
  }
  .information-box-container {
    max-width: 95%;
  }
}
@media screen and (max-width:500px){
  .icon-text {
    display: none !important;
  }
}
@media screen and (min-width: 200px) {
  .col-sm-8 {
      -ms-flex: 0 0 66.666667%;
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
}