/* Refining 101 styles */

/* Infograpgic Styles */
/**/

body.noscroll {
  overflow:hidden;
}

#modalMap {
  position:relative;
}

.modal-image {
  position: static;
  z-index: 1;
}

.modal-link {
  position: absolute;
  background: rgba(0,0,0,0);
  display: block;
  z-index: 9999;
}

#modalLink1-1 { /*Safety, Health & Environment*/
  height: 15%;
  left: 50%;
  top: 37%;
  width: 50%;
}

#modalLink1-2 { /*Integrity*/
  height: 15%;
  left: 0%;
  top: 49%;
  width: 50%;
}

#modalLink2 { /*Trust and Respect*/
  height: 15%;
  left: 50%;
  top: 57%;
  width: 50%;
}

#modalLink3 { /*Striving for Excellence*/
  height: 15%;
  left: 0;
  top: 67%;
  width: 50%;
}

#modalLink4 { /*Humility*/
  height: 15%;
  left: 50%;
  top: 75%;
  width: 50%;
}

.modal-container {
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  bottom: 0;
  display: none;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
}

.modal-window {
  background: #fff none repeat scroll 0 0;
  border-radius: 15px;
  border:5px solid #265604;
  box-shadow: 0 0 6px #555;
  box-sizing: border-box;
  left: 42%;
  margin: 0 0 0 -300px;
  overflow: auto;
  padding: 20px;
  position: absolute;
  top: 50px;
  width: 800px;
}

.modal-window .fa-close {
cursor:pointer;
  position:absolute;
  right:10px;
  top:10px;
}


.modal-window h3,
.modal-window h4{text-align:center;}

.modal-window img {
  display:block;
  margin:0 auto;
  max-width:95%;
}

.modal-window img.full-width {
  max-width:100%;
}

@media only screen and (max-width: 768px) {
  .modal-window {
    top:2%;
    left:2%;
    right:2%;
    bottom:2%;
    width:auto;
    margin:0;
    padding:10px;
  }
  
  .modal-window img {
    max-width:100%;
  }
}