*{
  margin:0;
  padding:0;
}
body {
    background-color: white;
    font-family: 'Open Sans', sans-serif;
  }

/* fonts */
h1{
  font-size: 1.5em;
  text-align: center;
  padding: 5px;
  margin-top: 40px;
}
h2{
  font-size: 0.7em;
  text-align: center;
  color: #023859;
}
h3{
  font-size: 0.6em;
  text-align: center;
  color:#F26E22;
}
h4{
  font-size: 0.5em;
  text-align: center;
}

.header{
  background-color: #023859;
}

#react-gallery{
  position: relative;
  bottom: 0;
}
/*container for basemap & panorama*/
.container{
  display: flex;
  overflow: hidden;
}

/*basemap*/
.basemap-container {
  padding:20px;
  flex: 15%;
  text-align: center;
  max-height: 100%;
}

/* panorama */
#pano-container {
  margin:0;
  padding: 0;
  flex: 70%;
  height: auto;
}

#panorama {
  text-align: right;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: auto;
}

/* gallery */
.gallery-row{
  background-color:#6D90A6;
  display:flex;
  text-align:center;
  margin: 0px;
  overflow-x: auto;
}
/* Style the images inside the grid */
.gallery-column img {
  opacity: 0.8; 
  cursor: pointer; 
  height: 50px;
  padding: 0.4em 0.4em;
  
}

.gallery-column img:hover {
  opacity: 1;
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

/* Overlay effect */
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
  text-align:center;
  vertical-align: middle;
}

#expandedImg{
  height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  margin:0;
  transform: translate(-50%, -50%);
}

/*this alters the original pannellum css for hotspot popup, remove if causing any issue*/
div.pnlm-tooltip span{
  max-width: 300px;
}
span.pnlm-pointer {
width:300px;
}

/*menu*/
.navigation{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  list-style: none;
  margin: 0; 
  text-align: center;
}
.navigation a{
  text-decoration: none;
  display: block;
  padding: 0.7em;
  color:white;
  z-index: 100;
  position: relative;
}
#logo{
  float:left;
  color:white;
  align-self: center;
  padding: 0.7em;
  z-index: 100;
  text-decoration: none;
}



.back-button{
  color:white;
  font-size: 2em;
  margin-left: auto;
  padding:0.4em;
  position: sticky;
  right:10px;
  bottom:30px;
}

/**
.pnlm-panorama-info {
  position:sticky;
  bottom:4px;
  left:5px;
  padding-right:20px;
}
*/