html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  /* font-size: 66%; */
  font-family: Arial, sans-serif;
}

h1 {
  margin: 0;
  font-size: 1.4em;
  font-weight: bold;
}

#bg {
  width: 1024px;
  height: 578px;
  background-image: url("../img/bg.jpg");
  background-size: contain, cover;
  background-repeat: no-repeat;
  display: flex;
  position: relative;
  opacity: 0;
  animation-name: opacity_anim;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/*#region center panel*/

#screen {
  margin-top: 12.5%;
  margin-left: 27.4%;
  width: 40%;
  height: 36.5%;
}

@keyframes opacity_anim {
  from {opacity: 0;}
  to {opacity: 1;}
}

#screen_content {
  width: 100%;
  height: 100%;
  position: relative;
  animation-name: opacity_anim;
  animation-duration: 1.5s;  
}

#screen_title {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #D3A825;
}

#hexa_container
{
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.hexa1{
  width: 7.2em;
  height: 7.2em;
  background-image: url(../img/hexa.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.hexa1 p{
  font-size: 1.0em;
  text-align: center;
}

.hexa2{
  width: 7.2em;
  height: 7.2em;
  background-image: url(../img/hexa2.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.hexa2 p{
  font-size: 1.0em;
  text-align: center;
}


.hexa3{
  width: 7.2em;
  height: 7.2em;
  background-image: url(../img/hexa3.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.hexa3 p{
  font-size: 1.0em;
  text-align: center;
}

/*#region popup matterport*/

#matterport_popup {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.70);
  z-index: 1;
}

#matterport_container {
  width: 100%;
  height: 75%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

#matterport_title {
  width: 100%;
  height: 25%;
  background-color: rgba(242, 242, 242, 1);
  display: flex;
  flex-direction: row;

}

.title_block{
  /* width: 33.33%; */
  /* flex-grow: 1; */
  flex-basis: 37.5%;
}

.title_logo{
  flex-basis: 25%;
  background-image: url(../img/symrise_logo2.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.subtitle_container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
}

.subtitle_block {
  color: white;
  padding-right: 8em;
}

#area_name_title {
  display: flex;
  flex-direction: row;
  padding-right: 5em;
}

#area_name_title .arrow {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 1.4em;
  
}

#area_name_title .arrow.left {
  border-color: transparent rgb(242, 242, 242) transparent transparent ;
}

#area_name_title .arrow.right {
  border-color: transparent transparent transparent rgb(242, 242, 242);
}

#area_name_title h1 {
  background-color: rgb(0, 0, 0);
  height: 2em;
  line-height: 2em;
  padding: 0em 0.5em;
}

.popup_title h2 {
  font-size: 3.1em;
}

.popup_buttons {
  background-color: white;
  float: right;
  display: flex;
  margin: 2%;
  position: absolute;
  right: 4%;
  top: 0;
  cursor: pointer;
}

.popup_buttons div {
  color: black;
  text-decoration: none;
  margin: 0 3em;
  line-height: 1em;
}

#matterport_iframe_container {
  flex-grow: 10;
}

#matterport_iframe {
  /*position: absolute;
  top: 10px;*/
  -webkit-clip-path: inset(0 0 20px 0);
  clip-path: inset(0 0 20px 0);
  height: calc(100% + 20px);
}

#logo_player {
  width: 15% !important;
  position: absolute;
  right: 16%;
  top: 2%;
  padding: 0 !important;
  opacity: 0.8;
}

#overlay_loading {
  width: 100%;
  height: 105%;
  background-color: black;
  position: relative;
  bottom: calc(105% + 20px);
  display: none;
}

#intro_video {
  width: 100%;
  height: 100%;
  background-color: black;
  position: absolute;
  top: 0;
  display: none;
}

#intro_video button {
  position: absolute;
  right: 2%;
  bottom: 5%;
  font-size: 1em;
}

#matterport_list {
  background-color: black;
  flex-grow: 0.3;
  height: 100%;
  overflow-y: auto;
}

.matterport_list_item {
  position: relative;
  background-color: grey;
  width: 80%;
  aspect-ratio: 16/9;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.4vw;
  cursor: pointer;
  background-size: cover;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matterport_list_item::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.35);
}

.matterport_list_item h1 {
  position: relative;
  color: #ffffff;
  text-align: center;
}

.matterport_list_item.selected::before {
  background-color: rgba(0,0,0,0);
  border: 3px solid #ffffff;
}

.close {
  position: absolute;
  right: 1%;
  top: 3.7%;
  width: 3.5em;
  height: 3.5em;
  opacity: 1;
  cursor: pointer;
}
.close:hover {
  opacity: 0.7;
}
.close:before, .close:after {
  position: absolute;
  left: 1.75em;
  content: ' ';
  height: 3.5em;
  width: 0.15em;
  background-color: rgb(0, 0, 0);
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

#matterport_popupinfo {
  background-color: #ffffff;
  color: white;
  min-width: 30em;
  max-width: 75%;
  position: absolute;
  z-index: 300;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  display: none;
  border-radius: 0.5em;
  text-align: center;
  padding: 2.5em 2.3em 1em;
}

#matterport_popupinfo .content {
  color: #000000;
  text-align: justify;
  line-height:2em;
  height: 100%;
  margin-bottom: 1.5em;
}

#matterport_popupinfo button {
  color: #000000;
  font-size: 1em;
  line-height:1.5em;
  font-weight: bold;
  padding: 0.5em 1.5em;
}

#mentionslegales > .text, #popuphtml .text {
  padding: 1.5em;
  text-align: justify;
  line-height:2em;
  color: #000000;
}

.text img {
  max-width: 100%;
}

#popuphtml .content {
  width: 100%;
  height: 100%;
}

#popuphtml .content {
  position: absolute;
}

#matterport_popupinfo .content img {
  width: 100%;
  max-height: 45em;
  width: auto;
}

.closepopupinfo {
  position: absolute;
  z-index: 99999;
  right: -0.2em;
  top: 0.5em;
  width: 1.5em;
  height: 1.5em;
  opacity: 1;
  cursor: pointer;
}
.closepopupinfo:hover {
  opacity: 0.7;
}
.closepopupinfo:before, .closepopupinfo:after {
  position: absolute;
  left: 0;
  content: ' ';
  height: 1.5em;
  width: 0.15em;
  background-color: black;
}
.closepopupinfo:before {
  transform: rotate(45deg);
}
.closepopupinfo:after {
  transform: rotate(-45deg);
}

/*#endregion*/