body {
  margin: 0;
  background-color:white;
}
#tapToPlaceTextHolder {
  display: none;
  width       : 50%;
  height      : auto;
  display     : none;
  position    : absolute;
  left        : 25%;
  top         : 59%;
}
#tapToPlaceTextHolder h2{
  color: white;
  font-size: 14px;
}
#avataarIconContainerDiv {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
}
#avataarIcon {
	width: 100%;
	height: auto;
	transform: translate(0%, 50%);
	display: flex;
	justify-content: center;
}
#avataarIconImage {
	width: 50%;
	max-width: 228px;
	max-height: 200px;
	height: auto;
	transform: translateY(-50%);
}

#loadingIcon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -19.5px 0px 0px -70px;
  z-index: 999;
}


#introScreen {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -128px 0px 0px -128px;
  z-index: 999;
}

/*main*/
/*
#topMiddleMenuContainer {
  position: absolute;
  left: 20%;
  width: 60%;
  height: 70%;
  z-index: 999;
  top: 2%;
  display: flex;
  flex-direction: column;
  vertical-align: top;
  float: center;
}*/

/*
#topMiddleContainer {
  position: absolute;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  vertical-align: top;
  float: center;
}*/

#centeredFullScreenMenuContainer{
  height: 30%;
  max-height:400px;
  width: 50%;
  right: 25%;
  bottom: 100px; /* to ensure its above bottom menu */
  z-index: 1;
  display: flex;
  position: absolute;
  justify-content: center;
  margin: 0 auto;
}

.centeredDiv{
  height: 100%;
  width: auto;
  justify-content: center;
  display: flex;
  position:absolute;
}
.centeredImage{
  height: 100%;   
  max-height: 400px;
  width: auto;
  margin: 0 auto;
  display: flex; 
}

#topMiddleHeader{
  width: 50%;
  right: 25%;
  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;
}
#topMiddleMenuContainer {
 width: 75%;
 right: 12.5%;
 height: 70%;
 position: absolute;
 top: 64px;
 display: none;
 z-index: 998;
 justify-content: left;
 margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
 padding: 0px;
}
#topMiddleContainer{
  width: 50%; 
  left:0%; 
  height: 100%;
  position: relative;
  display: none;
  flex-direction: column;
  float:left;
  vertical-align: top;
  justify-content: left;
  z-index: 998;
  top: 0px;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
    display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: left;
  flex-flow: column;
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  overflow-y: auto;
  overflow-x: hidden;
}
#topMiddleContainerSubMenu {
  width: 50%; 
  height: 100%;
  display: flex;
  flex-direction: column;
  float:left;
  vertical-align: top;
  justify-content: left;
  z-index: 998;
  top: 0px;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
    position: relative;
  display: none;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: left;
  flex-flow: column;
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.topMiddleDivHeader{
  width: 100%;
  margin: 0px auto;
  padding: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  justify-content: center;
}
.topMiddleImageHeader{
  width: 100%;
  max-width: 200px;
  z-index: 998;
  display: block;
  vertical-align: top;
  float: center;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
}

.topMiddleDivMainMenu {
  width: 100%;
  display: block;
  justify-content:right;
  vertical-align: top;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
}

.topMiddleImageMainMenu {
  width: 100%;
  max-width: 200px;  
  z-index: 998;
  display: block;
  vertical-align: top;
  float: right;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
}
.topMiddleDiv {
  width: 100%;
  justify-content:left;
  vertical-align: top;
  float: left;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
}

.topMiddleImage {
  width: 100%;
  max-width: 200px;
  z-index: 998;
  display: block;
  vertical-align: top;
  float: left;
  margin: 0px auto;
  padding: 0px;
}

#interactiveTopLeftDivContainer{
  position: absolute;
  left: 2%;
  width: 14%;
  height: 10%;
  z-index: 12;
  top: 2%;
  display: flex;
  vertical-align: top;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
}
.topLeftDiv{
  width: 100%;
  vertical-align: top;
  float: left;
  margin: 0px auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
}
.topLeftImage{
  width: 100%;
  max-width: 59px;
  display: block;
  vertical-align: top;
  float: left;
  margin: 0px auto;
  padding: 0px;
}
#toggleContainer {
  position: absolute;
  width: 100%;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  top: 3%;
  display: block;
}
#toggle {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  z-index: 11;
  width: 100%;
}

#toggle img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 270px;
  cursor: pointer;
}

#interactiveSideDivContainer{
  position: absolute;
  right: 2%;
  width: 14%;
  height: 10%;
  z-index: 12;
  top: 30%;
  display: flex;
  flex-direction: column;
  float:right;
  justify-content:right;
}
.sideDiv{
 width: 100%;
 height: auto;
  justify-content:right;
  float:right;
}
.sideImage{
  width: 100%;
  height: auto;
  max-width: 59px;
  margin: 0 auto;
    float:right;
}
.sideImageSelected{
  width: 256px;
  height: auto;
  margin: 0 auto;
    float:right;
}

#interactiveBottomLeftDivContainer{
  position: absolute;
  left: 2%;
  width: 6%;
  z-index: 12;
  bottom: 30px;
  display: block;
}
.bottomLeftDiv{
  width: 100%;
  height:auto;
}
.bottomLeftImage{
  height: auto;
  width: 100%;
}


#interactiveDimensionDivContainer{
  position: absolute;
  right: 1%;
  width: 14%;
  z-index: 12;
  top: 20%;
  display: block;
}

.dimensionDiv{
  width: auto;
  height: 100%;
}
.dimensionImage{
  width: 100%;
  height: auto;
  max-width: 70px;
}




#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: 450px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0 auto;
  padding-top: 12px;
  column-gap: 10px;
  cursor: pointer;
}
.parentIconDivCss{
  width: 100%;
  max-width: 120px;
  height: auto;
  margin: 0 auto;
}

.parentIconCss{
  height: auto;
  width: 100%;
  margin: 0 auto;
}

#interactiveChildIconDivContainer{
  width: 100%;
  /*max-width: 410px;*/
  position: relative;
  display: flex;
  column-gap: 0px;
  overflow-y: hidden;
  margin: 0 auto;
  z-index:999;
  justify-content: center;
}

#interactiveChildIconDivContainerLeftAligned{
  width: 14%;
  left:0%;
  max-width: 60px;
  position: relative;
  display: inline-flex;
  justify-content: left;
  margin: 0 auto;
}

#interactiveChildIconDivContainerLeftAlignedDoubleSize{
  width: 30%;
  left:0%;
  max-width: 154px;
  position: relative;
  display: inline-flex;
  justify-content: left;
  margin: 0 auto;
}

.childIconDivCss{
  width: 100%;
  max-width: 50px;
  min-width: 50px;
  height: auto; 
}

.childIconCss{
  height: auto;
  width: 100%;
  margin: 0 auto;
}

.childIconDivCenterCss{
  width: 100%;
  max-width: 140px;
  height: auto; 
  margin: 0 auto;
}

.childIconDivCenterCssBigger{
  width: 100%;
  max-width: 210px;
  height: auto; 
  margin: 0 auto;
}

#interactiveCallOutDivDesktopContainer{
  width: 30%;
  height: auto;
  top: 20%;
  left: 1%;
  max-width: 270px;
  position: absolute;
  display: flex;
  justify-content: center;

}

#rightinteractiveCallOutDivDesktopContainer{
  width: 30%;
  height: auto;
  top: 20%;
  right: 1%;
  max-width: 270px;
  position: absolute;
  display: flex;
  justify-content: center;

}

#centerinteractiveCallOutDivDesktopContainer{
  width: auto;
  height: auto;
  top: 60%;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 270px;
  position: absolute;
  margin: auto;
  

}

#liciousOnLoad{
  width: auto;
  height: auto;
  position: absolute;
  top: 10%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.callOutDivDesktopCss{
  width: 100%;
  height: auto;
  display: block;
  justify-content: center;
  margin: 0 auto;
}

.callOutImgDesktopCss{
  height: auto;
  width: 96%;
  display: block;
  margin: 0 auto;
}
#interactiveCallOutDivContainer2{
  width: 100%;
  left: 0%;
  position: relative;
  display: flex;
  column-gap: 0px;
  justify-content: center;
}
.callOutImgCss2{
  height: auto;
  width: 100%;
  display: block;
  max-width: 200px;
  margin: 0 auto;
}
#interactiveCallOutDivContainer{
  width: 100%;
  left: 0%;
  position: relative;
  margin-bottom: 5px;
  display: flex;
  column-gap: 0px;
  justify-content: center;

}
.callOutDivCss{
  width: 100%;
  height: auto;
  display: block;
  justify-content: center;
  margin: 0 auto;
}

.callOutImgCss{
  height: auto;
  width: 100%;
  display: block;
  max-width: 550px;
  margin: 0 auto;
}
.callOutImgHalfCss{
  height: auto;
  width: 30%;
  left: 0%;
  display: block;
  max-width: 154px;
  margin: 0 auto;
  float: left;
}
#interactiveCenteredCallOutDivContainer{
  width: 40%;
  height: 40vh;
  top: 30%;
  left: 30%;
  position: absolute;
  display: flex;
  column-gap: 0px;
  justify-content: center;
  pointer-events: none;
}
.callOutCenteredDivCss{
  width: 100%;
  height: auto;
  display: block;
  justify-content: center;
  margin: 0 auto;
}

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

#interactiveFullScreenCallOutDivContainer{
  width: 100%;
  height: 100vh;
  top: 0%;
  left: 0%;
  position: absolute;
  display: none;
  column-gap: 0px;
  justify-content: center;
  pointer-events: none;
  background-color: white;
}
.callOutFullScreenDivCss{
  width: 100%;
  height: auto;
  display: block;
  justify-content: center;
  margin: 0 auto;
}

.callOutFullScreenImgCss{
  transform: translateY(-50%);
  width: 100%;
  z-index: 14;
  display: block;
  margin: 50vh 0 0 0;
}

#interactiveFullScreenClickableCallOutDivContainer{
  width: 100%;
  height: 100vh;
  top: 0%;
  left: 0%;
  z-index: 999;
  position: absolute;
  display: none;
  justify-content: center;
}
.callOutClickableFullScreenDivCss{
  width: 100%;
  max-height: 100%;
  display: block;
  justify-content: center;
  margin: 0 auto;
  z-index: 999;
}

.callOutClickableFullScreenImgCss{
  transform: translateY(-50%);
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  z-index: 999;
  display: block;
  margin: 50vh 0 0 0;
}


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

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

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

.desktop-hint{
  font-family: 'Nunito', sans-serif;
    font-size: 14pt;
    color: #fff;
    line-height: 2em;
    display: none;
    margin-top: 2vh;
    letter-spacing: .37;
}