body,
html {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  background: black;
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  -webkit-overflow-scrolling: touch;
}

.container {
  width: 100%;
  height: 100%;
  border: 0px;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

img {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: fill;
}

.img-container {
  border: 0;
  margin: 0 auto;
  padding: 0;
  cursor: ew-resize;
}

.navigator {
  border: 0;
  margin: 0;
  padding: 0;
  /* max-height: 100%; */
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  /* grid-auto-rows: 300px; */
  grid-auto-rows: max-content;
  grid-gap: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: space-evenly;
}

.navigator div {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  /* height: 100%; */
  position: relative;
}

.navigator div img {
  border: 0;
  margin: 0;
  padding: 0;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  /* vertical-align: middle; */
}

@media only screen and (orientation: landscape) {
  .img-container {
    height: 100%;
    max-width: 80%;
    float: left;
    overflow: hidden;
  }

  .img360 {
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  .navigator {
    height: 100%;
    min-width: 20%;
    max-width: 20%;
    float: right;
    grid-template-columns: 1fr;
  }
}

@media only screen and (orientation: portrait) {
  .container {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .img-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    cursor: ew-resize;
  }

  .img360 {
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  .navigator {
    width: 100%;
    padding-top: 4px;
    /* min-height: 20%;
    max-height: 55%; */
    padding-top: 4px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.invisible {
  display: none;
}

#preload-imgs {
  display: none;
}

#status {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 20px;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-size: 50pt;
  color: white;
  text-align: center;
}