@font-face {
  font-family: 'SourceSansPro';
  src: url('../fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf');
}

@font-face {
  font-family: 'SourceSansProBold';
  src: url('../fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf');
}

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: 'SourceSansPro', sans-serif;
  font-weight: normal;
  font-style: normal;
  touch-action: none;
}

::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #009ce8;
  /*border-radius: 10px;*/
  background-color: #ffffff;
  color: #009ce8;
}

.green ::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #00AA27;
  color: #00AA27;
}

.dark-gray ::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #333333;
  color: #333333;
}

::-webkit-scrollbar
{
  width: 12px;
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb
{
  /*border-radius: 10px;*/
  -webkit-box-shadow: inset 0 0 6px #009ce8;
  background-color: #009ce8;
  border: solid white 1px;
}

.green ::-webkit-scrollbar-thumb
{
  -webkit-box-shadow: inset 0 0 6px #00AA27;
  background-color: #00AA27;
}

.dark-gray ::-webkit-scrollbar-thumb
{
  -webkit-box-shadow: inset 0 0 6px #333333;
  background-color: #333333;
}

button {
  font-family: 'Montserrat', sans-serif;
}

.mobile-only { display: none; }

a, a:hover {
  color: white;
  text-decoration: underline;
  font-weight: bold;
}

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

/* z-indexes: splash on top of everything, then UI, then pano */
.overlay { 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; }

#pano {
  transition: filter 1s ease;
  -webkit-filter: filter 1s ease;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

.clickable {
  cursor: pointer;
  z-index: 10;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pano-info-overlay, #hotspot-info-overlay {
  width: 33%;
  background-color: rgba(0, 0, 0, 0);
}

#audio-transcript-overlay {
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
}

.intro-logo {
  background-image: url('../images/NHC-logo-and-instructions-desktop.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 50vw;
  height: 50vh;
  margin-bottom: 8vh;
}

.intro-button {
  height: 6vh;
  width: 22vw;
  min-width: 150px;
  min-height: 40px;
  font-size: 16px;
  background-color: transparent;
  color: white;
  font-weight: 500;
  border-width: 2px;
  border-color: white;
  border-style: solid;
}

.info-overlay {
  display: none;
}

.info-wrap, .left-info-wrap, .right-info-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  z-index: 1;
}

.info-wrap {
  width: 100%;
  background-color: #009ce8;
}

.green .info-wrap {
  width: 100%;
  background-color: #00AA27;
}

.dark-gray .info-wrap {
  width: 100%;
  background-color: #333333;
}

.left-info-wrap, .right-info-wrap {
  width: 50%;
}

.left-info-wrap {
  float: left;
  background-color: #009ce8;
}

.green .left-info-wrap {
  float: left;
  background-color: #00AA27;
}

.dark-gray .left-info-wrap {
  float: left;
  background-color: #333333;
}

.right-info-wrap {
  float: right;
  background-color: rgba(0, 0, 0, 0);
  color:#009ce8;
}

.green .right-info-wrap {
  float: right;
  background-color: rgba(0, 0, 0, 0);
  color:#00AA27;
}

.dark-gray .right-info-wrap {
  float: right;
  background-color: rgba(0, 0, 0, 0);
  color:#333333;
}

.info-content {
  display: block;
  position: absolute;
  top: 25%;
}

.info-title {
  font-family: 'SourceSansProBold', serif;
  text-transform: uppercase;
  margin-bottom: 3vh;
  font-size: 28px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.info-description {
  margin-left: auto;
  margin-right: auto;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  text-align: left;
}

.info-description p {
  text-align: left;
}

.info-description img {
  max-width: 100%;
  max-height: 50vh;
  text-align: center;
}

.info-close-container {
  text-align: -webkit-right;
  text-align: -moz-right;
  position: absolute;
  top: 3vh;
  right: 2vw;
  z-index: 10;
}

/*
.info-copy-container {
  padding-left: 8vw;
  padding-right: 8vw;
  padding-bottom: 8vh;
  padding-top: 2vh;
}
*/

.info-close, .info-close-blue {
  width: 4vh;
  height: 4vh;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url('../images/close-cross-white.svg');
}

.info-close-blue {
  background-image: url('../images/close-cross-blue.svg');
}

.info-close-green {
  background-image: url('../images/close-cross-green.svg');
}

.info-close:hover, .info-close-blue:hover {
  background-position: 0 100%;
}

.right-info-wrap .info-content {
  /*background-color: midnightblue;*/
  display: flex;
  flex-direction: column;
}
/*
.hotspot-info-image-container {
  width: 32vw;
  height: 36vh;
  background-color: white;
}
*/
/*
.hotspot-info-figure {
  background-color: lime;
}
.hotspot-info-image-container {
  background-color: magenta;
}
.hotspot-info-image-caption {
  background-color: salmon;
}
*/

.hotspot-info-figure div {
  background-color: white;
}

#hotspot-info-overlay-with-images .info-content {
  /*background-color: teal;*/
  width: 36vw;
}

.landscape-image {
  width: 100%;
  height: auto;
}

.portrait-image {
  height: 40vh;
  width: auto;
}

.image-select-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4vh;
}

.image-select {
  width: 12px;
  height: 12px;
  border: 1px solid #009ce8;
  border-radius: 50%;
  background-color: white;
  margin: 6px;
}

.green .image-select {
  border: 1px solid #00aa27;
}

.dark-gray .image-select {
  border: 1px solid #333333;
}

.image-select.selected {
  background-color: #009ce8;
}

.green .image-select.selected {
  background-color: #00aa27;
}

.dark-gray .image-select.selected {
  background-color: #333333;
}

#share-description {
  overflow-y: hidden;
}

.share-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4vh;
}
.share-icons div {
  margin-left: 2vh;
  margin-right: 2vh;
}

/*
.help-list {
  margin-top: 2vh;
  height: 40vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
*/

.help-list {
  margin-top: 2vh;
}

.help-list-content {
  list-style-type: none;
  text-align: left;
  padding-left: 0;
}

.help-list-item {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-bottom: 1vh;
}

.help-list-item-text {
  margin-left: 2vw;
}

hr {
  opacity: 0;
}

.link-button-container a {
  border: 2px solid white;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 2vw;
  padding-right: 2vw;
  margin: 8px;
}

.link-button-container {
  width: 100%;
  text-align: center!important;
  margin-top: 32px;
  margin-bottom: 32px;
}

.navigation-overlay {
 display: none;
}

.navigation-overlay .info-content {
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 4vh;
  padding-bottom: 2vh;
  position: inherit;
  display: block;
}

#navigation-intro-copy {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  text-align: left;
}

.gallery {
  width: 80vw;
  max-width: 1000px;
  height: 86vh;
  padding-left: 15vw;
  padding-right: 15vw;
  /*background-color: chocolate;*/
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
}

.gallery-thumbs {
  display: grid;
  grid-column-gap: 3.5vh;
  grid-row-gap: 2vh;
  text-align: center;
  width: 100%;
}

figure { margin: 0; }
.thumb-content img {
  display: block;
  width: 100%;
  transition: .2s ease;
}
figure div { background-color: #009ce8; }
.green figure div { background-color: #00aa27; }
.dark-gray figure div { background-color: #333333; }
figure figcaption { margin-top: 8px; }

.img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #009ce8;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity:0;
}

.green .img-overlay {
  background-color: #00aa27;
}

.dark-gray .img-overlay {
  background-color: #333333;
}

.thumb-content:hover .img-overlay {
  opacity: 0.6;
}

.thumb-content {
  position: relative;
  border: solid white 3px;
}

/* icons */
.controls-separator {
  width: 5vw;
}

.button-icon-placeholder,
.controls-container {
  pointer-events: none;
}

.button-icon-placeholder,
.button-icon,
.prev-pano-button,
.next-pano-button {
  width: 50px;
  height: 50px;
}

.button-icon, .prev-pano-button, .next-pano-button {
  cursor: pointer;
  z-index: 10;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: 100%
}

.audio-control-interface {
  display: none;
}

.button-icon:hover, .prev-pano-container:hover div, .next-pano-container:hover div {
  background-position: 0 100%;
}

.zoom-in-button {
  background-image: url('../images/in.svg');
}

.green .zoom-in-button {
  background-image: url('../images/in-green.svg');
}

.dark-gray .zoom-in-button {
  background-image: url('../images/in-dark-gray.svg');
}

.zoom-out-button {
  background-image: url('../images/out.svg');
}

.green .zoom-out-button {
  background-image: url('../images/out-green.svg');
}

.dark-gray .zoom-out-button {
  background-image: url('../images/out-dark-gray.svg');
}

.fullscreen-button {
  background-image: url('../images/fullscreen-open.svg');
}

.fullscreen-button-close {
  background-image: url('../images/fullscreen-close.svg');
}

.green .fullscreen-button {
  background-image: url('../images/fullscreen-open-green.svg');
}

.dark-gray .fullscreen-button {
  background-image: url('../images/fullscreen-open-dark-gray.svg');
}

.green .fullscreen-button-close {
  background-image: url('../images/fullscreen-close-green.svg');
}

.dark-gray .fullscreen-button-close {
  background-image: url('../images/fullscreen-close-dark-gray.svg');
}

.toggle-hotspot-button {
  background-image: url('../images/hotspots-hide.svg');
}

.green .toggle-hotspot-button {
  background-image: url('../images/hotspots-hide-green.svg');
}

.dark-gray .toggle-hotspot-button {
  background-image: url('../images/hotspots-hide-dark-gray.svg');
}

.toggle-hotspot-button-show {
  background-image: url('../images/hotspots-show.svg');
}

.green .toggle-hotspot-button-show {
  background-image: url('../images/hotspots-show-green.svg');
}

.dark-gray .toggle-hotspot-button-show {
  background-image: url('../images/hotspots-show-dark-gray.svg');
}

.help-button {
  background-image: url('../images/help-screen.svg');
}

.green .help-button {
  background-image: url('../images/help-screen-green.svg');
}

.dark-gray .help-button {
  background-image: url('../images/help-screen-dark-gray.svg');
}

.navigation-button {
  background-image: url('../images/navigation-icon.svg');
}

.green .navigation-button {
  background-image: url('../images/navigation-icon-green.svg');
}

.dark-gray .navigation-button {
  background-image: url('../images/navigation-icon-dark-gray.svg');
}

.share-button {
  background-image: url('../images/share.svg');
}

.green .share-button {
  background-image: url('../images/share-green.svg');
}

.dark-gray .share-button {
  background-image: url('../images/share-dark-gray.svg');
}

.pano-info-button {
  background-image: url('../images/hotspots-show.svg');
}

.green .pano-info-button {
  background-image: url('../images/hotspots-show-green.svg');
}

.dark-gray .pano-info-button {
  background-image: url('../images/hotspots-show-dark-gray.svg');
}

.instagram-button {
  background-image: url('../images/instagram.svg');
}

.green .instagram-button {
  background-image: url('../images/instagram-green.svg');
}

.dark-gray .instagram-button {
  background-image: url('../images/instagram-dark-gray.svg');
}

.linkedin-button {
  background-image: url('../images/linkedin.svg');
}

.green .linkedin-button {
  background-image: url('../images/linkedin-green.svg');
}

.dark-gray .linkedin-button {
  background-image: url('../images/linkedin-dark-gray.svg');
}

.facebook-button {
  background-image: url('../images/facebook.svg');
}

.green .facebook-button {
  background-image: url('../images/facebook-green.svg');
}

.dark-gray .facebook-button {
  background-image: url('../images/facebook-dark-gray.svg');
}

.twitter-button {
  background-image: url('../images/twitter.svg');
}

.green .twitter-button {
  background-image: url('../images/twitter-green.svg');
}

.dark-gray .twitter-button {
  background-image: url('../images/twitter-dark-gray.svg');
}

/* buttons position */
.prev-pano-container, .next-pano-container {
  position: absolute;
  top: 48%;
  display: flex;
  align-items: center;
}

.prev-pano-container {
  left: 0;
}

.next-pano-container {
  right: 0;
}

footer {
  width: 100%;
  height: 10%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.navigation-button-container,
.share-container,
.credits,
.pano-info-container,
.controls-container {
  position: absolute;
}

.credits a {
  font-weight: normal;
  text-decoration: none;
}

.navigation-button-container {
  left: 2vw;
  top: 2vh;
}

.share-container {
  right: 2vw;
  top: 2vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 50%;
}
.share-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.share-buttons div {
  margin-left: 1vh;
}
#share-button {
  display: none;
}

.credits {
  right: 2vw;
  bottom: 2vh;
}

.pano-info-container {
  left: 2vw;
  bottom: 2vh;
}

#room-spec-content {
  position: inherit;
}

#room-specifications {
  max-height: 80vh;
  overflow-y: auto;
  padding-left: 10vw;
  padding-right: 10vw;
}

.controls-container {
  left: 0;
  bottom: 2vh;
}

/* buttons content */

.navigation-button-container,
.pano-info-container,
.credits,
.controls-container {
  display: flex;
  align-items: center;
}

.navigation-button-container, .pano-info-container {
  text-align: left;
  justify-content: left;
}

.credits {
  height: 50px;
  text-align: right;
  justify-content: right;
}

.credits-list-left, .credits-list-right {
  width: 45%;
  display: table-cell;
  text-align: left;
}
/*
.credits-list-right {
  margin-left: 2vw; 
}
*/
.navigation-button-container div, .pano-info-container div {
  margin: 0;
  margin-right: 8px;
}

.controls-container {
  min-width: 100%;
  justify-content: center;
  /*background-color: palegreen*/
}
.controls-container div {
  margin-left: 2px;
  margin-right: 2px;
}