body {
  margin: 0;
  background-color:black;
}
#tapToPlaceTextHolder {
  display: none;
  width       : 50%;
  height      : auto;
  display     : none;
  position    : absolute;
  left        : 25%;
  top         : 59%;
}
#tapToPlaceTextHolder h2{
  color: white;
  font-size: 14px;
}
#loadingIcon {
  display: block;
  position: absolute;
   width: 140px;
   height: 39px;
   left: 50%;
   top: 90%; 
   margin-left: -70px;
   z-index:999;
}

#introScreen {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -160px 0px 0px -160px;
  z-index:999;
}
#topMiddleHeader{
  width: 25%;
  right: 37.5%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 998;
  top: 2%;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
}

.topMiddleDivHeader{
  width: 100%;
  margin: 0px auto;
  padding: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  justify-content: center;
}
.topMiddleImageHeader{
  width: 100%;
  max-width: 90px;
  z-index: 998;
  display: block;
  vertical-align: top;
  float: center;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
}

/*main*/
#dimContainer {
 width: 25%;
 right:5%;
 position: absolute;
 top: 1%;
 z-index: 998;
 display: block;
 float:right;
}

#interactiveDimensionDivContainer{
  position: absolute;
  width: 100%;
  right:5%;
  z-index: 12;
  display: block;
  float:right;
}

#interactiveDimensionChildDivContainer{
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  float:right;
  z-index: 12;
  top: 100px;
}

.dimensionChildDiv{
  width: 100%;
  height: auto;
  float:right;
}
.dimensionChildImage{
  width: 100%;
  height: auto;
  max-width: 140px;
  float:right;
}

.ambientChildDiv{
  width: 100%;
  height: auto;
  float:right;
}
.ambientChildImage{
  width: 100%;
  height: auto;
  max-width: 70px;
  float:right;
  /*transition: all 0.3s ease-in-out;*/
}
/*
.ambientChildImage:hover{
  box-shadow: 0px 0px 5px #000000;
  transform: scale(1.0, 1.0);
}

.ambientChildImage:hover::after {
  opacity: 1;
}*/
.dimensionDiv{
  width: 100%;
  height: auto;
  float:right;
}
.dimensionImage{
  width: 100%;
  height: auto;
  max-width: 90px;
  float:right;
}

#toggleContainer {
  position: absolute;
  left: 5%;
  width: 25%;
  z-index: 12;
  top: 1%;
  display: block;
}
#toggle {
  width: 100%;
  height:auto;
}

#toggle img {
  width: 100%;
  height: auto;
  max-width: 90px;
}

#creativeVisualization {
  width: 25%;
  left: 73%;
  height:auto;
  justify-content: left
}

#creativeVisualizationImage{
  width: 100%;
  height: auto;
  max-width: 110px;
}
#btn_container {
 width: 100%;
 position: absolute;
 top: 65vh;
 z-index: 999;
 display: flex;
 justify-content:center;
}

#InteractiveContainer {
 width: 96%;
 right:2%;
 position: absolute;
 bottom: 2%;
 z-index: 998;
 display: block;
 justify-content:center;
 margin: 0 auto;
}

#interactiveIconDivContainer{
  width: 100%;
  max-width: 400px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0 auto;
}

.parentIconDivCss{
  margin: 0 auto;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-wrap: nowrap;
}

.parentIconCss{
  width: 100%;
  max-width: 59px;
  height: auto;
  margin: 0 auto;
/*  transition: all 0.3s ease-in-out;*/
}
/*
.parentIconCss:hover{
  box-shadow: 0px 0px 5px #000000;
  transform: scale(1.4, 1.4);
}

.parentIconCss:hover::after {
  opacity: 1;
}*/

#interactiveChildIconDivContainer{
  width: 75%;
  max-width: 400px;
  position: relative;
  display: flex;
  column-gap: 20px;
  justify-content: center;
  margin: 0 auto;
  z-index:999;
}

.childIconDivCss{
  width: 100%;
  max-width: 49px;
  height: auto; 
  margin: 0 auto;
}

.childIconCss{
  height: auto;
  width: 100%;
  margin: 0 auto;
  /*transition: all 0.3s ease-in-out;*/
}
/*
.childIconCss:hover{
  box-shadow: 0px 0px 5px #000000;
  transform: scale(1.4, 1.4);
}

.childIconCss:hover::after {
  opacity: 1;
}*/

#interactiveCallOutDivContainer{
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}
.callOutDivCss{
  width: 100%;
  height: auto;
  display: block;
  justify-content: center;
  margin: 0 auto;
}

.callOutImgCss{
  height: auto;
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 0 auto;
}

#instruction {
  display: none;
  width: 100%;
  position: absolute;
  z-index: 10;
  height: 100%;
  top: -180px;
  /* bottom: 33px; */
}

#instruction>img {
  display: block;
  margin: 0 auto;
  width: 90%;
  left:5%;
  max-width: 550px;
}

#tapToContinue {
  display: none;
  position: absolute;
   width: 50%;
   max-width: 350px;
   height: auto;
   right: 25%;
   top: 10%; 
   z-index: 999;
}

#topMiddleHeader{
  width: 25%;
  right: 37.5%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 998;
  top: 2%;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
}
  @media only screen and (max-width: 1023px) {
   /*for mobile ; for desktop use 'landscape' */ 
   @media (orientation: portrait) { 
    #topMiddleHeader{
      width: 25%;
      right: 37.5%;
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 998;
      top: 1%;
      margin: 0px auto;
      margin-bottom: 0px;
      margin-top: 0px;
      padding: 0px;
    }
    }
  
  @media (orientation: landscape) { 
      }
}