#topImage {
  position: absolute;
  left: 10%;
  width: 80%;
  margin: auto;
  opacity: 0;
}

#bottomImage {
  position: absolute;
  left: 10%;
  width: 80%;
  margin: auto;
  opacity: 0;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modalImage {
  position: relative;
  margin: auto;
  display: block;
  max-width: 80%;
  border-radius: 10px;
  border-bottom: 5%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

.caption {
  margin: auto;
  margin-bottom: 50px;
  display: block;
  width: 80%;
  text-align: center;
  padding: 5px;
  font-size:36pt;
  color:#b89c04;
  font-weight:bold;
  font-family:Harrington, Papyrus, Helvetica, sans-serif;
  -webkit-text-stroke: 1px #800000;
}

.caption:after {
  content: "";
  float: left;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  margin-top: 5px;
  box-shadow: 0 0 0 2px #800000;
  background:#b89c04;
}


.close {
  position: absolute;
  top: 1%;
  right: 2%;
  width: 32px;
  height: 32px;
  background-repeat:no-repeat;
  background-image: url(main_images/close_button-0c9d1dc4ede30b148755cc41d3c8b386d1da2278316a10ccdd0ee89e3a2f9dc7.png);
  transition: top 0.1s step-start;
}
.close:hover,
.close:focus {
  background-image: url(main_images/close_button_hover-329fee25fd0828f4dbbb112ca4875ed2843d4973ef2d88185a73af443f598fb7.png);
  cursor: pointer;
}

.PreviousImage {
  position: absolute;
  top: 50%;
  left: 3%;
  height: 48px;
  width: 48px;
  background-repeat:no-repeat;
  background-image: url(main_images/previous_button-c51d03a97cb0f891563b8933a2d48fa44a3f34c14f73ab94daeeb42c0e06e83c.png);
  transition: top 0.1s step-start;
}

.PreviousImage:hover,
.PreviousImage:focus {
  background-image: url(main_images/previous_button_hover-09b81622a14371b5cf24f03c54b01778beb6b9926c432ecbc5c8a8b75f9edf59.png);
  cursor: pointer;
}

.NextImage {
  position: absolute;
  top: 50%;
  right: 3%;
  height: 48px;
  width: 48px;
  background-repeat:no-repeat;
  background-image: url(main_images/next_button-537d2608a404d1ae68cce491a6e4ab6bf3dd7d8d16d82b827e0719b0d59a1849.png);
  transition: top 0.1s step-start;
}

.NextImage:hover,
.NextImage:focus {
  background-image: url(main_images/next_button_hover-0b543a1ceecd21ff7654b6012070cbda9831423533418600eebab03275568959.png);
  cursor: pointer;
}