/* share buttons switch */
@media only screen and (max-width: 500px) {
  #share-button {
    display: block;
  }

  .share-buttons {
    display: none;
  }
}

/* all mobiles and tablets */
@media (-moz-touch-enabled), (pointer: coarse), (hover: none) {
  .mobile-only {
    display: inline-block;
  }
  .desktop-only {
    display: none !important;
  }
  input {
    -webkit-appearance: none;
  }

  .intro-button {
    width: 24vw;
  }

  .mobile-info-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .info-description, .info-title {
    max-width: 320px;
  }

  .info-content {
    width: 100%;
    height: 100%;
    top: 0;
  }

  .info-copy-container {
    padding-top: 8vh;
    padding-bottom: 6vh;
  }

  /*
  #hotspot-info-overlay-with-images .info-content {
    width: 100%;
    height: 100%;
    top: 0;
  }
*/
/*
  #hotspot-info-overlay-with-images .info-copy-container {
    padding-top: 8vh;
    padding-bottom: 6vh;
  }
*/

  #help-title, #help-description {
    max-width: 80%;
  }

  .help-list {
    height: 60vh;
    width: 80vw;
    margin: auto;
    overflow: auto;
  }

  .navigation-overlay .info-wrap {
    background-color: #009ce8;
  }

  .green .navigation-overlay .info-wrap {
    background-color: #00AA27;
  }

  .dark-gray .navigation-overlay .info-wrap {
    background-color: #333333;
  }

  .gallery {
    width: 66%;
    height: 72vh;
    max-width: 100%;
    overflow-y: scroll;
    /*background-color: chocolate;*/
  }

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

  figure { margin: 0; }
  figure 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; }

  .hotspot-info-figure {
    margin-top: 16vh;
    margin-left: auto;
    margin-right: auto;
  }
}

/* all mobiles and tablets */
@media (orientation: portrait) {
  .landscape-only { display: none; }
  .portrait-only { display: block; }

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

  .gallery-thumbs {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .info-overlay {
    overflow: auto;
  }

  .intro-button {
    width: 42vw;
  }

  .info-content {
    top: 0;
  }

  .left-info-wrap, .right-info-wrap {
    width: 100%;
    height: auto;
  }

  .left-info-wrap .info-content, .right-info-wrap .info-content {
    position: inherit;
    height: auto;
    width: 80%;
  }

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

  #navigation-intro-copy {
    width: 70%;
  }

  #hotspot-info-overlay-with-images .left-info-wrap,
  #hotspot-info-overlay-with-images .right-info-wrap {
    height: 50%;
  }
/*
  .hotspot-info-image-container {
    width: auto;
    height: 32vh!important;
  }
*/
  .portrait-image {
    margin: auto;
    height: 32vh;
  }

  #hotspot-info-overlay-with-images .info-content {
    width: 80vw;
  }

  .hotspot-info-figure {
    margin-top: 0;
  }
}

@media (orientation: landscape) {
  .landscape-only { display: block; }
  .portrait-only { display: none; }

  .gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

/* iPhone X */
@media only screen and (max-device-width: 850px) and (orientation: landscape) {
}

/* iphone 6 and friends */
@media only screen and (max-width: 760px) and (orientation: portrait) {
}