html {
  font-size: 100%;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  cursor: default;
  background-color: black;
  color: white;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  text-align: center;
  /*font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; */
  line-height: 1.5;
  font-family: Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  touch-action: none;
}

.hidden { display: none!important; }

.mobile-only { display: none; }

a {
  text-decoration: none;
  color: white;
}
.clickable {
  cursor: pointer;
  z-index: 10;
}

.fullview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.middlescreen {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}

/* z-indexes: splash on top of everything, then UI, then pano */
#splash { z-index: 100; }
#wrap   { z-index: 10; }
#pano   { z-index: 1; }

/* let mouse events bubble down to the pano */
#wrap   { pointer-events: none; }
#wrap * { pointer-events: auto; }

header {
  position: absolute;
  top: 5vh;
  left: 5vh;
  height: 10vh;
}
header h1 { margin: 0; }
/*header img, header h1 { height: 100%; }*/
/*header img { opacity: 0.8; }*/

#social-wrap {
  position: absolute;
  bottom: 40vh;
  left: 0;
}
/*.social-btn:not(:first-of-type) { margin-top: 10px; }*/
.social-btn {
/*  width: 6vh;
  height: 6vh;*/
  width: 54px;
  height: 54px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#facebook { background-image: url("../images/facebook.png"); }
#twitter  { background-image: url("../images/twitter.png"); }
#linked-in  { background-image: url("../images/linked-in.png"); }

.pano-btn {
  width: 5vh;
  height: 8vh;
  border: 1px solid white;
  background-color: rgba(0, 86, 149, 0.8);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
}
.pano-btn:hover { background-color: rgba(0, 86, 149, 1.0); }
#prev-pano-btn {
  left: 0;
  border-left: 0;
  background-image: url("../images/prev-icon.png");
}
#next-pano-btn {
  right: 0;
  border-right: 0;
  background-image: url("../images/next-icon.png");
}

#version-switch {
  display: none;
}

#splash-btn-container p { font-size: 20px; }

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 84px;
  background-color: rgba(247,217,23, 0.8);
}
.round-btn {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;

  /*border: 2px white solid;
  border-radius: 50%;
  background-color: rgba(0, 86, 149, 0.0);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;*/
}
.round-btn:hover {
  background-position: 0 100%;
  /*background-color: rgba(0, 86, 149, 1.0);*/
}

#credits {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding-bottom: 4px;
  font-size: 10px;
}
#version-switch, #current-pano {
  position: absolute;
  bottom: 22px;
  height: 36px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
  color: black;
}
#current-pano:hover, #version-switch:hover {
  color: white;
}
#current-pano { left: 32px; }
#version-switch { right: 32px; }
#info-btn {
  height: 36px;
  width: 36px;
  background-color: rgba(0, 0, 0, 0.0);
  background-position: center;
  background-repeat: no-repeat;
}
#info-btn {
  margin-right: 12px;
  background-size: 50%;
}
#navigate-btn {
  margin-left: 12px;
  background-size: cover;
}
/*#info-btn     { background-image: url("../images/info-icon.png"); }
#navigate-btn { background-image: url("../images/thumbs-icon.png"); }*/
#controls-wrap {
  display: inline-flex;
  flex-wrap: wrap-reverse;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  width: 680px;
  height: 52px;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 1190px) {
  .audio #in, .audio #out { display: none; }
}
@media only screen and (max-width: 1080px) {
  #in, #out { display: none; }
  .audio #full, .audio #toggle-hotspots { display: none; }
}
@media only screen and (max-width: 960px) {
  #full, #toggle-hotspots { display: none; }
}

.control {
  height: 48px;
  width: 48px;
  margin-left: 5px;
  margin-right: 5px;
}
#left             { background-image: url("../images/left.png"); }
#right            { background-image: url("../images/right.png"); }
#up               { background-image: url("../images/up.png"); }
#down             { background-image: url("../images/down.png"); }
#in               { background-image: url("../images/in.png"); }
#out              { background-image: url("../images/out.png"); }
#full             { background-image: url("../images/go-fullscreen.png"); }
#toggle-hotspots  { background-image: url("../images/info.png");}

#play-pause, #play-pause-mobile {
  background-image: url("../images/pause-audio.png");
/*  background-size: 60%;*/
}
#rewind, #rewind-mobile {
  background-image: url("../images/restart-audio.png");
  /*background-size: 66%;
  background-position-y: 48%;*/
}
#hide-hotspots {
  height: 100%;
  background-image: url("../images/slash.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}

.popup {
  z-index: 100;
  position: absolute;
  bottom: 84px;
  left: 0;
  width: 100%;
  height: calc(100% - 84px);
  background-color: rgba(91, 97, 103, 0.8);
}
.popup-wrap {
  /*background-color: pink;*/
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.popup-content {
  width: 64vw;
  max-width: 800px;
  text-align: left;
  font-size: 20px;
  margin-bottom: 10%;
}
.popup-close-btn:hover {
  color: black;
}
.popup-close-btn {
  position: absolute;
  position: relative;
  left: calc(100% + 32px);
  top: -32px;
  font-size: 20px;
  /* width: 18px;
  height: 18px;
  background-image: url("../images/close-icon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
}
.popup-title { font-size: 23px; }

#hotspot-copy, #pano-info-copy, #intro-copy { font-size: 16px; }

#gallery .popup-content { max-width: 500px; }
#gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 6vh;
  grid-template-rows: repeat(2, 1fr);
  grid-row-gap: 2vh;
  text-align: center;
}
.popup-content figure {margin: 0; }
.popup-content figure img {
  display: block;
  width: 100%;
  transition: .2s ease;
}
.popup-content figure div { background-color: rgba(0, 86, 149, 1.0); }
.popup-content figure img:hover { opacity: 0.4; }
.popup-content figure figcaption { margin-top: 8px; }

#splash { background-color: rgba(91, 97, 103, 0.8); }
#splash h2 {
  margin-bottom: 3em;
  font-size: 23px;
  font-weight: normal;
}
#splash h2, #splash .popup-content { text-align: center; }
.version-select {
  width: 105px;
  height: 121px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100%;
}
.version-select:hover {
  background-position: 0 0;
}
.version-selectable:hover {
  color: black;
}
#splash-btn-container {
  display: inline-flex;
  width: 75%;
  justify-content: space-around;
}
#splash-btn-container div { display: inline-block; }
#text-btn   { background-image: url("../images/text-version-icon.png"); }
#audio-btn  { background-image: url("../images/audio-version-icon.png"); }