html, body {
	  margin: 0;
	  padding: 0;
	  background-color: #FFF;
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	} 
	
/* Styles for fonts */

.noto{
	font-family: 'Noto Sans', sans-serif;
	font-weight: bold;
}

.noto-arabic{
	font-family: 'Noto Sans Arabic', sans-serif;
	font-weight: bold;
	direction: rtl;
}

.noto-ethiopic{
	font-family: 'Noto Serif Ethiopic', serif;
	font-weight: bold;
}

/* override bootstrap stuff */

.container{
	/*width: 100%;*/
}



	

#wrapper{
	position: relative;
}

#options{
	position: absolute;
	right: 1%;
	top: 1%;
}

[dir="rtl"] #options{
	left: 1%;
	right: auto;
}

/*#back-button{
	position: absolute;
	left: 1%;
	top: 1%;
	display:none;
}*/

[dir="rtl"] #back-button{
	right: 1%;
	left: auto;
}

[dir="rtl"] .navbar-nav{
	padding-right: 20px;
}

[dir="rtl"] #language{
	margin-left: .5rem !important;
}
	
/* Styles for Lottie Scripts Marker and Step */		
	
#animation-container{
	display: none;
	margin: auto;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
	
.ending-container{
	display:none;
	position: absolute;
	left: 37.5vw;
	top: 10vh;
	width: 25vw;
	height: 85vh;
	overflow-y: auto;
	overflow-x: hidden;
	font-weight: normal;
}

.continue-button{
	background-image: url("/img/button-foreward.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 25vw;
	height: 10vh;
	display: inline-block;
	//position: absolute;
	top: 70vh;
	margin-left: 7vw;
}

#choice-headline{
	margin-bottom: 2vh;
}

.choice-button{
	background-image: url("/img/button.png");
	background-repeat: round;
	background-size: cover;
	width: inherit;
	height: 14vh;
	display: inline-block;
	font-size: large;
	font-weight: bold;
	margin-top: 2vh;
}

.layout-container{
	position: absolute;
	left: 37.5vw;
	top: 10vh;
	width: 25vw;
	display: none;
	font-size: xx-large;
}

#title-container{
	top: 50.5%;
	font-size: x-large;
}

#nugget-headline{
	text-align: center;
}

#reflect-result-container{
	font-size: x-large;
}

#mirror-container{
	top: 15vh;
	pointer-events: none;
}

#barometer-container{
	position: absolute;
	display: none;
	bottom: 0;
	top: auto;
}

#barometer-container > img {
	position: absolute;
}

#barometer-headline{
	position: absolute;
	top: 5vh;
}

#pin{
	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

#indicator-container{
	position: absolute;
	bottom: 30vh;
	width: 10vw;
	display: none;
	pointer-events: none;
}

#click-indicator{
	opacity: 0;
}

#button-container{
	position: absolute;
	bottom: 3vh;
	display: none;
}

#button-container-image-stacks{
	position: absolute;
	bottom: 0vh;
	display: none;
}

#drag-area{
	width: 100vw;
	height: 40vh;
	position: absolute;
	bottom: 1vh;
}

#tap-area-choice{
	display: none;
}

.icon-choice-a{
	width: 50vw;
	height: 40vw;
	position: absolute;
	left: 1vw;
	bottom: 1vh;
}

.icon-choice-b{
	width: 50vw;
	height: 40vw;
	position: absolute;
	left: 51vw;
	bottom: 1vh;
}


#button-forward-stack{
	transform: scale(0.5);
	position: absolute;
	bottom: 2%;
	left: 46%;
}

#button-back{
	transform: scale(-0.5)translate(100%);
	position: absolute;
	bottom: 2%;
	left: 42%;
}

#emotion-name{
	text-align: center;
}
	
#current-step {
		color: #CCC;
	}	
	
.container-lottie {
		  /*display: flex;
		  margin: auto;*/
		  /*width: 50vh;*/
		  /*height: 50vh;*/
		  background-color:'#000000';
	}	

.invisible {
		  visibility: hidden;
		  display: none;
		}
		
	
/* Styles for Landing Page */	
	
.etalk-yellow {
		background-color: rgba(242, 255, 112, 1) !important;
	}
	
	
/* Styles for PlayStage Simple Test Scripts */	

	#etalk-ani {
	  width: 100%;
	  height: 100%;
	  display:inline-block;
	}

	.choice-container{
		display: none;
	}
	
.mask{
	pointer-events: none;
}

.frame{
	pointer-events: none;
}

.ignoreMouse{
	pointer-events: none;
}

/* Menu */
#nav-etalk{
	background-color: #ffb75d;
	//box-shadow: 0px 4px 0px lightgray;
}

#menu-img{
	margin-top: -14px;
	margin-left: -14px;
	margin-bottom: -11px;
}

.hide-on-game{
	visibility: visible;
}


/* Nugget selection */
.card-title{
	position: absolute;
	left: 50%;
	top: 15%;
	transform: translate(-50%, -50%);
	color: black;
	font-size: x-large;
	font-weight: bold;
}

.slider-button{
	position: relative;
}



.scrolling-wrapper{
	/*overflow-x: scroll;*/
	//overflow-y: hidden;
	/*height: 85vh;*/
	margin-top: 7vh;
	padding-bottom: 20px;
	
}

.swiper-button-prev {
	background-image: url("../img/arrow-selection_orange.png") !important;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	-webkit-transform:scale(2);
	-moz-transform:scale(2);
	-ms-transform:scale(2);
	-o-transform:scale(2);
	transform:scale(2);
}

[dir="rtl"] .swiper-button-prev {
	background-image: url("../img/arrow-selection_orange.png") !important;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	-webkit-transform:scale(-2,2);
	-moz-transform:scale(-2,2);
	-ms-transform:scale(-2,2);
	-o-transform:scale(-2,2);
	transform:scale(-2,2);
}

.swiper-button-prev::after {
  display: none;
}


.swiper-button-next {
	background-image: url("../img/arrow-selection_orange.png") !important;
	color: #ffb75d; 
	background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
	-webkit-transform:scale(-2,2);
	-moz-transform:scale(-2,2);
	-ms-transform:scale(-2,2);
	-o-transform:scale(-2,2);
	transform:scale(-2,2);
}

[dir="rtl"] .swiper-button-next {
	background-image: url("../img/arrow-selection_orange.png") !important;
	color: #ffb75d; 
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	-webkit-transform:scale(2);
	-moz-transform:scale(2);
	-ms-transform:scale(2);
	-o-transform:scale(2);
	transform:scale(2);
}

.swiper-button-next::after {
  display: none;
}

.swiper-pagination-bullet-active{
	background-color: #ffb75d; 
}

/* Footer */
#footer{
	background-color: #ffb75d;
	min-height: 100vh;
}


/* Info Texts */
.info-card{
	height: 80vh;
	text-align: inherit;
	padding-top: 3vh;
	overflow-y: auto;
	-webkit-backface-visibility: hidden;
	padding-left: 40px;
	padding-right: 50px;
}

.info-button{
	position: absolute;
	left: 13%;
	top: 8%;
}

.info-button > img {
	max-height: 4vh;
}

.read-time{
	position: absolute;
	right: 17%;
	top: 9%;
}

.read-time > img {
	max-height: 3vh;
	padding-right: 0.2vw;
}

.info-back-button{
	position: absolute;
	left: 41%;
}

.info-back-button > img {
	max-height: 4vh;
}


@media only screen and (min-width: 2200px) {
  /* For desktop: */
  .layout-container{
	  font-size: xxx-large
  }
  #title-container{
	  font-size: xx-large
  }
  #reflect-result-container{
	  font-size: xx-large;
  }
  .card-title{
	  font-size: xx-large;
  }
  .choice-button{
	  font-size: xx-large;
  }
}

@media only screen and (max-width: 400px) {
  /* For desktop: */
  .layout-container{
	  font-size: x-large
  }
}