/********************************************/
/***********     VARIABLES     **************/
/********************************************/

:root {
    --SCREEN-WRAPPER: 85vh; 
	--GAME-CONTAINER: 400px;
	--GAME-CONTAINER-LEFT-MARGIN: -200px;
	--IMAGE-CANVAS-WIDTH:220px;
	--GAME-TITLE-FONT-SIZE:32px;
	--GAME-TITLE-LINE-HEIGHT:40px;
	--POPUP-WINDOWS-WIDTH:400px;
	--POPUP-WINDOWS-LEFT:50%;
	--POP-WINDOWS-MARGIN-LEFT:-200px;
}

/*******************************************/
/*********       MEDIA QUERIES     *********/
/*******************************************/

@media (max-width: 600px) {
	:root {
    --SCREEN-WRAPPER: 100%; 
	--GAME-CONTAINER: 95%;
	--GAME-CONTAINER-LEFT-MARGIN:2.5%;
	--IMAGE-CANVAS-WIDTH:60vw;
	--GAME-TITLE-FONT-SIZE:28px;
	--POPUP-WINDOWS-WIDTH:95%;
	--POPUP-WINDOWS-LEFT:0;
	--POP-WINDOWS-MARGIN-LEFT:2.5%;
	}
	
}

/**************************************/
/*********         BODY       *********/
/**************************************/

body {
	/*font-family: Arial, Helvetica, sans-serif;*/
	/*font-family: 'Gloria Hallelujah', cursive;
	font-family: 'Tajawal', sans-serif;*/
	font-family: 'Tajawal', sans-serif;
	background-image:url("../backgrounds/blue1.jpg");
	background-size:cover;
	background-repeat:no-repeat;
}

#screenWrapper {
	height:auto;
	min-height:var(--SCREEN-WRAPPER);
	overflow:auto;
	display:block;
}

#gameContainer{
	display:block;
	width:var(--GAME-CONTAINER);
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	background:#eeeeff;
	border:2px solid #dedeff;
	border-radius:15px;
}

#gameInsideContainer{
	display:none;
}

/**********************************************************/
/***********   TOP LAYER ANSWER FEEDBACK   ****************/
/**********************************************************/

#answerFeedback {
	position: fixed; 
	top: 30%;
	text-align:middle;
	width:100%;
	left:0;
	z-index:999;
	background: #ffffff; 
	opacity: 0.9;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display:none;
	font-size:10vw;
	font-weight:800;
}
/*******************************************/
/***********   LOGO LINE    ****************/
/*******************************************/

#logoLine {
	display:block;
	float:left;
	width:100%;
	text-align:center;
	margin-bottom:5px;
}

#userBadge {
	height:36px;
	width:auto;
	padding-top:5px;
	padding-left:5px;
	opacity:1;
	display:inline-block;
	float:left;
}

#userBadge:hover {
	opacity:0.7;
}

#gameTitle {
	font-family: 'Gloria Hallelujah', cursive;
	font-size:var(--GAME-TITLE-FONT-SIZE);
	font-weight:bold;
	color:#444444;
	display:inline-block;
	margin-top:0;
	margin-bottom:0;
	line-height:var(--GAME-TITLE-LINE-HEIGHT);
	text-align:center;
}

#settingsButton {
	height:30px;
	width:auto;
	padding-top:5px;
	padding-right:5px;
	opacity:0.7;
	display:inline-block;
	right:0;
	position:relative;
	float:right;
}

#settingsButton:hover {
	opacity:1;
}

/*************************************************/
/***********   BADGE ANIMATION    ****************/
/*************************************************/

#badgeEarnedAnimation {
	display:none;
	position:fixed;
	top:0;
	left:50%;
	margin-left:-50px;
	margin-top:50px;
	z-index:9998;
}

#badgeEarnedImage {
	width:100px;
	height:100px;
	position:relative;
	left:20%;
	top:10%;
	-webkit-animation: myOrbit 3s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 3s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 3s linear infinite; /* Opera 12+ */
            animation: myOrbit 3s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
}

@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}


/*******************************************/
/***********   TOP  LINE    ****************/
/*******************************************/

#topLine {
	display:block;
	max-width:95%;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:2.5%;
	margin-right:2.5%;
	border:1px solid #555555;
	border-radius:10px;
	clear:both;
	height:20px;
	background:yellow;
	padding:0;
	background:#FFFF66;
	color:black;
	font-weight:700;
	font-weight:bold;
	font-size:14px;
	vertical-align:middle;
}

#PointsFields {
	display:inline-block;
	width:30%;
	float:left;
	text-align:left;
	padding-left:0;
	line-height:20px;
	padding-top:2px;
}

#levelNameSpan {
	display:inline-block;
	width:35%;
	float:left;
	color:#000080;
	font-family: 'Gloria Hallelujah', cursive;
	background:#FFFFCC;
	height:18px;
	line-height:18px;
	padding-top:0px;
}

#LevelFields {
	display:inline-block;
	width:35%;
	float:left;
	text-align:right;
	padding-right:0px;
	background: linear-gradient(to right,#4FD165, #4FD165 0%, transparent 0%, transparent 100%); /* change the first % and the second one red X%, transparent Y% */
 	height:20px;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
	line-height:20px;
	padding-top:2px;
}

#PointsFieldsContent {
	float:left;
	padding-left:3px;
}

#superChallengeTopButton {
	height:20px;
	width:22px;
	opacity:0.2;
	display:inline-block;
	float:left;
	padding:0;
	margin:0;
	margin-top:-2px;
	padding-right:5px;
	background: url('../images/super_challenge_icon.png');
	background-repeat: no-repeat;
	background-size:contain;
	background-color:none;
	border:none;
	
}

#LevelFieldsContent {
	padding-right:10px;
}

#levelOutputLabel {
	float:left;
	padding-left:5px;
}

#levelOutput {
	float:right;
	padding-right:5px;
}

#IQmeterContainer {
	clear:both;
	display:block;
	width:100%;
}

/*************************************************/
/********LEVELS CHANGE EXPAND CLASS **************/
/*************************************************/

.expandClass {
	-webkit-animation:expand 0.5s linear infinite;
	-moz-animation:expand 0.5s linear infinite;
	animation:expand 0.5s linear infinite;
}	

@-webkit-keyframes expand {
	from { -webkit-transform: scale(3);    }
	to   { -webkit-transform: scale(0.3); }
  }
  
@keyframes expand {
	from {
	  -moz-transform: scale(3);
	  -ms-transform: scale(3);
	  transform: scale(3);
	}
	to {
	  -moz-transform: scale(0.3);
	  -ms-transform: scale(0.3);
	  transform: scale(0.3);
	}
}

/*********************************************/
/***  Super Challenge Button Animation   *****/
/*********************************************/

.superChallengeButtonAnimation {
	-webkit-animation:superChallengeButtonAnimation 2s linear infinite;
	-moz-animation:superChallengeButtonAnimation 2s linear infinite;
	animation:superChallengeButtonAnimation 2s linear infinite;
}	

@-webkit-keyframes superChallengeButtonAnimation {
	from { -webkit-transform: scale(1.2);    }
	to   { -webkit-transform: scale(0.8); }
  }
  
@keyframes superChallengeButtonAnimation {
	from {
	  -moz-transform: scale(1.2);
	  -ms-transform: scale(1.2);
	  transform: scale(1.2);
	}
	to {
	  -moz-transform: scale(0.8);
	  -ms-transform: scale(0.8);
	  transform: scale(0.8);
	}
}


/*******************************************/
/********      IQ METER       **************/
/*******************************************/

 .IQmeterGraph {
		width: 95%; /* width and height are arbitrary, just make sure the #bar styles are changed accordingly */
		margin-left:2.5%;
		margin-right:auto;
		height: 30px;
		border: 1px solid #888; 
		background: rgb(168,168,168);
		background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
		background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
		background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
		background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
		background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
		position: relative;
	}
	
#IQmeterBar {
	height: 29px; /* Not 30px because the 1px top-border brings it up to 30px to match #graph */
	background: rgb(255,197,120); 
	background: -moz-linear-gradient(top, rgba(255,197,120,1) 0%, rgba(244,128,38,1) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,197,120,1)), color-stop(100%,rgba(244,128,38,1))); 
	background: -webkit-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%); 
	background: -o-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%); 
	background: -ms-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%); 
	background: linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%); 
	border-top: 1px solid #fceabb;
	width:1%;
}
   
 #IQmeterText { 
	position: absolute; 
	text-align: center; 
	width: 100%; 
	margin: 0; 
	line-height: 30px; 
}

.animatesIQcolor {
  animation: coloranimation 0.2s 10;
}

@keyframes coloranimation {
  0% {
    background: #52D017;
  }
  	10% {
    background: #4CC417;
  }
  	20% {
    background: #6CC417;
  }
  	30% {
    background: #6CBB3C;
  }
  	40% {
    background: #3EA055;
  }
  	50% {
    background: #41A317;
  }
  	60% {
    background: #4AA02C;
  }
	70% {
    background: #6AA121;
  }
	80% {
    background: #4E9258;
  }
	90% {
    background: #348017;
  }
  100% {
    background: #FF4136;
  }
}
			
/***********************************************/
/********      TRIVIA SECTION     **************/
/***********************************************/

#triviaQuestionTheQuestion{
	font-size:30px;
	font-weight:bold;
	color:black;
	margin-top:15px;
	margin-bottom:5px;
	min-height:65px;
}
	
.choiceButton {
	height:40px;
	line-height:40px;
	width:30%;
	font-size:26px;
	font-weight:700;
	border:1px solid #444444;
	border-radius:10px;
	color:black;
	font-family: 'Tajawal', sans-serif;
	padding-top:4px;
}

.greenButton {
	background:#33FF8D;
}

.greenButton:hover {
	background:#006400;
	color:white;
}

.redButton {
	background:#FF9333;
}

.redButton:hover {
	background:#8B0000;
	color:white;
}

.blueButton {
	background:#5050FF;
	color:black;
}

.blueButton:hover {
	background:#00005F;
	color:white;
}

.greyButton {
	background:#dddddd;
}

.greyButton:hover {
	background:#444444;
	color:white;
}

.longButton {
	width:150px;
}

#imageCanvas {
	margin-top:10px;
	margin-bottom:10px;
	width:var(--IMAGE-CANVAS-WIDTH);
	height:var(--IMAGE-CANVAS-WIDTH);
	border-radius:10px;
	max-width:220px;
	max-height:220px;
}

#imageContainer {
	height:270px;
}

/***********************************************************/
/***********   FOOTER & BOTTOM STATEMENT    ****************/
/***********************************************************/
#footerLine {
	display:block;
	clear:both;
	width:var(--POPUP-WINDOWS-WIDTH);
	/*left:var(--POPUP-WINDOWS-LEFT);
	margin-left:var(--POP-WINDOWS-MARGIN-LEFT);
	*/
	margin-left:auto;
	margin-right:auto;
	height:40px;
	margin-top:10px;
	padding:4px 4px 4px 0px;
	text-align:center;
	font-size:14px;
	z-index:5;
	box-sizing:border-box;
	vertical-align:middle;
}

#footerLineLeft {
	display:inline-block;
	width:50%;
	float:left;
	text-align:left;
	background:rgba(255,255,255,0.5);
	height:22px;
	padding-top:4px;
	padding-left:10px;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	color:#000000;
	box-sizing:border-box;
}

#footerLineRight {
	display:inline-block;
	width:50%;
	float:right;
	background:rgba(255,255,255,0.5);
	height:22px;
	padding-top:4px;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
	color:#000000;
	box-sizing:border-box;
}

#hideLink , #privacyLink {
	cursor:pointer;
	text-decoration:underline;
	font-weight:bold;
	color:blue;
}

#speakerOnOffIcon {
	width:20px;
	height:auto;
	cursor:pointer;
	float:right;
	margin-right:10px;
	opacity:1;
	margin-top:-4px;
}

#speakerOnOffIcon:hover {
	transform: scale(1.1);
}

/************************************/
/*********   POPUP  WINDOW  *********/
/************************************/
#helpPopupWindow {
	display:block;
	position:absolute;
	width:var(--POPUP-WINDOWS-WIDTH);
	left:var(--POPUP-WINDOWS-LEFT);
	margin-left:var(--POP-WINDOWS-MARGIN-LEFT);
	height:600px;
	height:auto;
	min-height:var(--SCREEN-WRAPPER);
	top:80px;
	z-index:10;
	text-align:center;
	background:rgba(255,255,255,0.99);
	border:5px solid #999999;
	border-radius:5px;
	box-sizing: border-box;
}

#helpPopupWindowTop,#helpPopupWindowDetails {
	margin:5px 10px 10px 10px;
	display:inline-block;
	width:100%;
	float:left;
	font-family: 'Tajawal', sans-serif;
}

#helpPopupWindowTop {
	display:block;
	clear:both;
	width:95%;
	font-size:20px;
}	

#helpPopupWindowDetails {
	display:block;
	clear:both;
	width:95%;
	font-size:18px;
	font-weight:bold;	
}

#helpPopupWindowButtons {
	display:inline-block;
	width:100%;
	float:left;
	text-align:center;
}

.startGameButtons {
	display:inline-block;
	height:40px;
	width:45%;
	box-sizing: border-box;
	font-size:22px;
	line-height:40px;
	font-weight:700;
	border:1px solid #444444;
	border-radius:10px;
	color:black;
	font-family: 'Tajawal', sans-serif;
	margin-top:10px;
	margin-bottom:10px;
	margin-right:2%;
	margin-left:2%;
	padding-top:2px;
}

.tutorialNextButtons {
	display:block;
	clear:both;
	height:40px;
	width:180px;
	font-size:22px;
	line-height:40px;
	font-weight:700;
	border:1px solid #444444;
	border-radius:10px;
	color:black;
	font-family: 'Tajawal', sans-serif;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	padding-top:2px;
}

#visualCortexImage {
	width:200px;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
	clear:both;
}

.helpPupupWindowTutorial {
	display:none;
}

#helpPopupSampleRiddleContainer {
	background:#f0f0f0;
}

#helpPopupSampleRiddle {
	font-size:28px;
	font-weight:bold;
}

#helpPopupSampleImageImage {
	display:block;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	width:170px;
	height:170px;
}

#helpPopupSampleImage1 {
	display:block;
	text-align:center;
}

#helpPopuTutorialYesNoSample {
	width:250px;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	margin-bottom:15px;
	clear:both;
}

#helpPopuTutorialSuperChallengeIcon {
	width:120px;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
	clear:both;
}



/*********************************************/
/*********   SETTINGS  POPUP WINDOW  *********/
/*********************************************/
#settingsPopupWindow {
	display:block;
	position:absolute;
	width:var(--POPUP-WINDOWS-WIDTH);
	left:var(--POPUP-WINDOWS-LEFT);
	margin-left:var(--POP-WINDOWS-MARGIN-LEFT);
	min-height:500px;
	height:auto;
	max-height:80vh;
	top:80px;
	z-index:10;
	background:rgba(255,255,255,0.99);
	text-align:center;
	border:5px solid #999999;
	border-radius:5px;
	box-sizing: border-box;
	overflow-y:auto;
}

#settingsCloseLink {
	position:absolute;
	right:5px;
	top:5px;
	width:20px;
	height:20px;
	opacity:0.5;
	cursor:pointer;
}

#settingsWindowBadgesList {
	display:block;
	clear:both;
	width:90%;
	margin-left:5%;
	margin-right:5%;
}

.settingsWindowBadge {
	display:inline-block;
	float:left;
	width:80px;
	margin-left:6px;
	margin-right:6px;
}

/*********************************************/
/*********   HIDEAWAY  POPUP WINDOW  *********/
/*********************************************/
#hideawayWindow {
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0;
	border:5px solid #999999;
	border-radius:5px;
	box-sizing: border-box;
	background:#ffffff;
	background-image:url('../images/hideawayGraph.png');
	background-size:contain;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
	z-index:99999;
}

#hideawayCloseLink {
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
	height:40px;
	opacity:0.5;
	cursor:pointer;
}

/****************************************************/
/*********   NOT COMPATIBLE   POPUP WINDOW  *********/
/****************************************************/

#notCompatiblePopupWindow {
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0;
	border:5px solid #999999;
	border-radius:5px;
	box-sizing: border-box;
	background:#ffffff;
	z-index:30;
	color:black;
	padding:10% 10% 10% 10%;
	text-align:center;
}

/*********************************************/
/*********   PRIVACY   POPUP WINDOW  *********/
/*********************************************/
#privacyPopupWindow {
	display:block;
	position:absolute;
	width:var(--POPUP-WINDOWS-WIDTH);
	left:var(--POPUP-WINDOWS-LEFT);
	margin-left:var(--POP-WINDOWS-MARGIN-LEFT);
	min-height:500px;
	height:auto;
	max-height:80vh;
	top:80px;
	z-index:10;
	background:rgba(255,255,255,0.99);
	text-align:left;
	border:5px solid #999999;
	border-radius:5px;
	box-sizing: border-box;
	overflow-y:auto;
	padding:5px 5px 5px 5px;
}

#privacyCloseLink {
	position:absolute;
	right:5px;
	top:5px;
	width:20px;
	height:20px;
	opacity:0.5;
	cursor:pointer;
}

/*********************************************/
/*********  SUPER CHALLENGE WINDOW   *********/
/*********************************************/
#superChallengePopupWindow {
	display:block;
	position:absolute;
	width:var(--POPUP-WINDOWS-WIDTH);
	left:var(--POPUP-WINDOWS-LEFT);
	margin-left:var(--POP-WINDOWS-MARGIN-LEFT);
	height:120px;
	top:10px;
	z-index:10;
	background:rgba(0,0,0,1.0);
	text-align:left;
	border:5px solid #222222;
	border-radius:15px;
	box-sizing: border-box;
	overflow:hidden;
	opacity:1;
}


#superChallengeMainTitle {
	display:block;
	width:100%;
	color:yellow;
	text-align:center;
	font-size:24px;
	margin:0;
}

#superChallengeSmallTitle {
	display:block;
	width:100%;
	color:white;
	text-align:center;
	font-size:12px;
	margin:0;
}

#superChallengeMainContainer {
	display:block;
	width:100%;
	margin:0;
	padding:0;
	clear:both;
}

#superChallengeIconYellowContainer{
	display:inline-block;
	width:25%;
	float:left;
}

#superChallengeIconYellow {
	height:40px;
	margin-left:30px;
	margin-top:-15px;
}

#superChallengeCountdownClock {
	display:inline-block;
	width:35%;
	float:left;
	font-size:80px;
	color:white;
	font-weight:bold;
	margin:0;
	padding:0;
	margin-top:-28px;
	overflow:hidden;
}

#superChallengeHintButtonContainer {
	display:inline-block;
	width:40%;
	float:right;
	text-align:center;
}

#superChallengeHintButton {
	opacity:1.0;
}

#superChallengeHintButton:hover {
	opacity:0.8;
}
/********************************************************************/
/***************     SUPER CHALLENGE HINT     ***********************/
/********************************************************************/

#superChallengeHintWindow {
	display:block;
	position:fixed;
	width:var(--POPUP-WINDOWS-WIDTH);
	left:var(--POPUP-WINDOWS-LEFT);
	margin-left:var(--POP-WINDOWS-MARGIN-LEFT);
	height:78vh;
	top:10px;
	z-index:50;
	background:rgba(100,100,255,0.99);
	text-align:center;
	border:5px solid #999999;
	border-radius:5px;
	box-sizing: border-box;
	overflow-y:auto;
	padding:5px 5px 5px 5px;
}

.whiteBoldText {
	color:white;
	font-weight:bold;
}

.buyHintButton {
	height:40px;
	line-height:40px;
	width:90%;
	font-size:28px;
	font-weight:700;
	border:1px solid #444444;
	border-radius:10px;
	color:black;
	font-family: 'Tajawal', sans-serif;
	margin-bottom:30px;
}

.yellowButton {
	background:#FFFF00;
	color:black;
}

.yellowButton:hover {
	background:#FF0000;
	color:white;
}

.whiteButton {
	background:#ffffff;
	color:black;
}

.whiteButton:hover {
	background:#FF0000;
	color:white;
}

.blackButton {
	background:#000000;
	color:white;
}

.blackButton:hover {
	background:#FF0000;
}

.redBuyButton {
	background:#FF9333;
}

.redBuyButton:hover {
	background:#FF0000;
	color:white;
}

/********************************************************************/
/***********************     CANVAS     *****************************/
/********************************************************************/
#c {
  opacity:.8;
  z-index:-10;
  
}
canvas {
  position:relative;

}

@media (max-width: 600px) {
	.choiceButton , .startGameButtons ,.tutorialNextButtons {
		line-height:30px;
		font-size:18px;
	}
	
	#PointsFields , #LevelFields {
		line-height:24px;
	}
	
	#footerLine {
		line-height:24px;
	}
	
	#answerFeedback {
		padding-top:6px;
	}
	
	#visualCortexImage {
		width:150px;
	}
	
	.tutorialNextButtons {
		font-size:20px;
		padding-top:4px;
	}
	
	#helpPopupWindowDetails {
		font-size:14px;
	}
	
	#topLine {
		font-size:14px;
		line-height:20px;
	}
	
	#PointsFields {
		line-height:20px;
	}

	#levelNameSpan {
		line-height:18px;
	}

	#LevelFields {
		line-height:20px;
	}
	
	#superChallengeSmallTitle {
		font-size:8px;
	}
	
	#superChallengeHintButton {
		width:90%;
		margin-left:5%;
		margin-right:5%;
		margin-top:15px;
	}
	
	#superChallengeMainTitle {
		font-size:18px;
	}

	#superChallengeCountdownClock {
		font-size:64px;
		margin-top:0px;
	}
	
}

/************ force portrait mode *******************/
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
	width:100vh;
  }
  
  	:root {
    --SCREEN-WRAPPER: 100%; 
	--GAME-CONTAINER: 95%;
	--GAME-CONTAINER-LEFT-MARGIN:2.5%;
	--IMAGE-CANVAS-WIDTH:60vh; /*NOTE THIS IS VH NOT VW */
	--GAME-TITLE-FONT-SIZE:22px;
	--POPUP-WINDOWS-WIDTH:95%;
	--POPUP-WINDOWS-LEFT:0;
	--POP-WINDOWS-MARGIN-LEFT:2.5%;
	}
  
  .choiceButton , .startGameButtons ,.tutorialNextButtons {
		line-height:30px;
		font-size:18px;
	}
	
	#PointsFields , #LevelFields {
		line-height:24px;
	}
	
	#footerLine {
		line-height:24px;
	}
	
	#answerFeedback {
		padding-top:6px;
	}
	
	#visualCortexImage {
		width:150px;
	}
	
	.tutorialNextButtons {
		font-size:20px;
		padding-top:4px;
	}
	
	#helpPopupWindowDetails {
		font-size:14px;
	}
	
	#topLine {
		font-size:14px;
		line-height:20px;
	}
	
	#PointsFields {
		line-height:20px;
	}

	#levelNameSpan {
		line-height:18px;
	}

	#LevelFields {
		line-height:20px;
	}
	
	#superChallengeSmallTitle {
		font-size:8px;
	}
	
	#superChallengeHintButton {
		width:90%;
		margin-left:5%;
		margin-right:5%;
		margin-top:15px;
	}
	
	#superChallengeMainTitle {
		font-size:18px;
	}

	#superChallengeCountdownClock {
		font-size:64px;
		margin-top:0px;
	}
	
}