@font-face {
	font-family: "Avgardd_bold";
	src: url(../fonts/Avgardd.ttf)
  }
  
  @font-face {
	font-family: "Avgardn";
	src: url(../fonts/Avgardn.ttf)
  }
  
  html, body {
	  margin:0;
	  padding:0; 
	height: 100%;
	font-size:25px;
	min-width:800px;
  }
  
  body{
	  margin:0px;
	  padding:0px;
	  
	  background-image:url(../Images/MathBG.jpg);
	  background-position: center;
	  background-repeat:no-repeat;
	  background-size:cover;
	  
  }
  
  *{
	  font-family: "Avgardn";
	  src: url(../fonts/Avgardn.ttf)
  }
  
  
  
  /* =============================== */
  
  div#load_screen{
	  background-color:#10e0f3;
	  opacity: 1;
	  position: fixed;
	  z-index:10;
	  top: 0px;
	  width: 100%;
	  height: 1600px;
  }
  div#load_screen > div#loading{
	  color:#ffffff;
	  width:120px;
	  height:24px;
	  margin: 300px auto;
	  
  }
  #loading{
	  font-family: "Avgardn";
	  -moz-animation-name: preloader;
	  -moz-animation-duration: 1s;
	  -moz-animation-timing-function: linear;
  
	  -moz-animation-iteration-count: infinite;
	  -moz-animation-play-state: running;
  
	  -webkit-animation-name: preloader;
  
	  -webkit-animation-duration: 1s;
	  -webkit-animation-timing-function: linear;
  
	  -webkit-animation-iteration-count: infinite;
	  -webkit-animation-play-state: running;
  
	  animation-name: preloader;
	  animation-duration: 1s;
  
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;
	  animation-play-state: running;
  }
  
  
  /* =============================== */
  
  a{
	  text-decoration:none;
	  color:#000000;
  }
  
  #bodyContent{
	  height:100%;
	  width:100%;
	  overflow: hidden;
	  position: fixed;
  }
  
  
  .header{
	  padding:10px 0px;
  }
  
  .indexHeader{
	  padding:20px 0px;
  }
  
  
  #activitySubject{
	  font-weight:bold;
	  font-family: "Avgardd_bold";
	  font-size: 80%;
	  margin-left: 20px;
  }
  
  .content2{
	  border:3px #F90 solid;
	  /*border:2px red solid;*/
	  -moz-border-radius: 20px;
	  -webkit-border-radius: 20px;
	  -khtml-border-radius: 20px;
	  border-radius: 20px;
	  z-index:3;
	  padding:20px;
	  position:relative;	
	  height:80%;
	  width:95%;
	  margin:0px auto;
	  background-image:url(../Images/whiteBG.png);
  }
  
  .contentWrapper{
  overflow-y:auto;
  padding-right:5px;
  height:100%;
  }
  
  
  .lessonObjectivesHolder{
	  text-align:center;
	  height:50%;
  }
  
  
  .lessonObjectives{
	  height:70%;
  }
  
  .lessonObjectives h1{
	  font-family: "Avgardd_bold";
	  vertical-align:middle;
  }
  
  .btnHolder{
	  position:inherit;
	  bottom:0px;
  }
  
  .instruction{
	  font-family: "Avgardd_bold";
  }
  
  
  .targetHolder{
	  text-align:center;
  }
  
  
  .inline{
	display: flex;
	align-items: top;
	flex-wrap: nowrap;
	margin:0px auto;
	text-align:center;
	
  }
  
  .inline>div.dropHolder{
	  margin: 0px auto;
	  white-space: nowrap;
	  text-align:left;
	  
	  width:30%;
	  min-width:220px;
	  height:300px;
	  
	  border-radius:20px;
  }
  
  
  #startBtn{
	  text-decoration:none;
	  font-family: "Avgardd_bold";
	  background-color:#67d31f;
	  border-radius:30px;
	  color:#ffffff;
	  padding:10px 50px;
  }
  
  #startBtn:hover{
	  background-color:#4faf0f;
  }
  
  .droppableName{
	  font-family: "Avgardd_bold";
	  text-align:center;
	  color:#ffffff;
	  padding:20px 0px;
	  display:block;
	  width:100%;
	  height:20px;
	  border-radius:20px 20px 0px 0px;
  }
  
  
  
  .choicesHolder{
	  width:80%;
	  margin:0px auto;
	  text-align:center;
  }
  
  ul.choices{
	  border:1px #333333 solid;
	  width:650px;
	  margin:50px auto;
	  border-radius:30px;
	  padding:20px;
	  text-align:center;
  }
  
  ul.choices li{
	  display:inline;
	  margin:0px auto;
  }
  
  ul.choices li img{
	  width:100px;
	  height:100px;
  }
  
  .popupBg{
	  position: absolute;
	  top:0;
	  height:100%;
	  width:100%;
	  background-image:url(../Images/blueBG.png);
	  z-index:8;
	  display:none;
  }
  
  .popupHolder {
	position: inherit;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border:2px #eb890a solid;
	background-color:#ffffff;
	border-radius:30px;
	height:400px;
	width:350px;
	padding:30px 20px;
	font-family: "Avgardn";
	text-align:center;
	background-color:#ffffff;
	z-index:9;
  }
  
  #feedBack{
	  font-family: "Avgardd_bold";
	  text-align:center;
  }
  
  .starHolder{
	  width:200px;
	  height:48px;
	  background-size:100%;
	  margin:0px auto;
  }
  
  .popupHolder table {
	  font-size:80%;
	  width:80%;
	  margin:0px auto;
  }
  
  #average{
	  font-size:90%;
  }
  
  
  table {
	 border-collapse: collapse;
	 margin:0;
  }
  
  table td, table td span{
	 font-family: "Avgardn";
  }
  
  table td.left{
	 text-align:left;
  }
  table td.right{
	 text-align:right;
  }
  
  a#retakeBtn{
	  margin:0px auto;
	  position:relative;
	  background-color:#f2eb22;
	  top:50px;
	  border-radius:25px;
	  padding:10px 20px;
	  font-family: "Avgardn";
  }
  
  a#retakeBtn:hover{
	  background-color:#e2db10;
	  cursor:pointer;
  }
  /*
  a#activityRetakeBtn{
	  margin:0px auto;
	  position:static;
	  background-color:#f2eb22;
	  top:80px;
	  border-radius:25px;
	  padding:10px 20px;
	  font-family: "Avgardn";
	  display:none;
  }
  a#activityRetakeBtn:hover{
	  background-color:#e2db10;
	  cursor:pointer;
  }
  
  
  a#reviewBtn{
	  position:absolute;
	  background-color:#a5d028;
	  color:#ffffff;
	  right:-10px;
	  top:-10px;
	  border-radius:25px;
	  line-height:30px;
	  padding:5px 15px;
	  font-family: "Avgardd_bold";
  }
  
  a#reviewBtn:hover{
	  background-color:#84a919;
	  cursor:pointer;
  }
  */
  
  a#reviewBtn{
	  margin:0px auto;
	  position:static;
	  background-color:#f2eb22;
	  top:100px;
	  border-radius:25px;
	  padding:10px 20px;
	  font-family: "Avgardn";
  }
  a#reviewBtn:hover{
	  background-color:#e2db10;
	  cursor:pointer;
  }
  .controller{
	  text-align:center;
	  vertical-align:middle;
	  margin-top:50px;
  }
  
  
  #submitBtn, #retakeBtn, #AnswerBtn{
	  margin:0px auto;
	  background-color:#f2eb22;
	  border-radius:25px;
	  padding:10px 50px;
	  font-family: "Avgardn";
	  font-size:20px;
	  cursor: pointer;
  }
  
  #submitBtn:hover, #retakeBtn:hover{
	  background-color:#e2db10;
	  cursor:pointer;
  }
  
  #retakeBtn{
	  margin-top:50px;
  }
  
  a#refbtn img{
	  width:40px;
	  margin-left:20px;
	  border:2px #000000 solid;
	  border-radius:27px;
  }
  
  #highscorefeedBack{
	  color:#1c46e0;
  }
  
  #recordedHighScoreHolder{
	  float:right;
	  font-family: "Avgardn";
	  font-size:80%;
	  color:#000000;
	  margin-right:20px;
	  margin-top:10px;
  }
  
  #backBtn{
	  background-image:url(../Images/arrowLeft2.png);
	  background-size:100%;
	  width:40px;
	  height:40px;
	  margin:0px 20px;
  }
  #backBtn:hover{
	  background-image:url(../Images/arrowLeft2.png);
	  cursor:pointer;
  }
  
  #scoreboardHolder{
	  float:right;
	  background-image:url(../Images/scoreBoardIcn.png);
	  background-size:100%;
	  width:40px;
	  height:40px;
  }
  
  #results{
	  font-family: "Avgardn";
	  text-align:center;
	  margin:20px auto;
  }
  
  #instruction_div{
	  font-family: "Avgardd_bold";
  }
  
  #scoreboardHolder:hover{
	  background-image:url(../Images/scoreBoardIcn2.png);
	  cursor:pointer;
  }
  
  #clearData{
	  display:none;
	  font-size:80%;
	  color:#f57212;
	  margin-top:20px;
  }
  
  #clearData:hover{
	  cursor:pointer;
  }
  
  .finalFeebackHolder{
	  width:95%;
	  margin:100px auto;
	  text-align:center;
	  position: absolute;
	  border:1px yellow solid;
  }
  
  .finalFeebackHolder table{
	  width:400px;
	  margin:10px auto;
	  text-align:center;
  }
  
  #finalFeedback{
	  text-align:center;
	  font-family: "Avgardd_bold";
	  margin-top:50px;
  }
  
  #finalscoreLabel, #wrongansLabel{
	  text-align:left;
	  font-size:80%;
  }
  #percentLabel{
	  text-align:left;
  }
  
  #finalscore, #wrongans{
	  text-align:right;
	  font-size:80%;
  }
  #percent{
	  text-align:right;
  }
  
  .correct{
	  border-radius:50px;
  }
  .wrong{
	  border-radius:50px;
  }
  /*===============================================*/
  
  @-moz-keyframes preloader {
	  0%   {
		   opacity: 1;
		  }
	  50%  {
		   opacity: 0.2;
		  }
	  100%  {
		  opacity: 1;
		  }
  }
  @-webkit-keyframes preloader {
		0%   {
		   opacity: 1;
		  }
	  50%  {
		   opacity: 0.2;
		  }
	  100%  {
		  opacity: 1;
		  }
  }
  
  /* Standard syntax */
  @keyframes preloader {
	   0%   {
		   opacity: 1;
		  }
	  50%  {
		   opacity: 0.2;
		  }
	  100%  {
		  opacity: 1;
		  }
  }
  
  #AnswerBtn{
	  display:none;
  }
  
  .marks{
	  display:none;
	  width:30px;
	  height:30px;
	  background-position: center;
	  background-repeat:no-repeat;
	  background-size:100% 100%;
	  text-align:center;
  }
  
  
  
  /*=====================================================================*/
  
  
  
  .tableLabel{
	  font-size:70%;
  }
  
  .imageHolder{
	  width:400px;
	  margin:0px auto;
  }
  .imageHolder img{
	  width:100%;
  }
  
  .inlineChoices{
	display: flex;
	align-items: top;
	flex-wrap: nowrap;
	margin: 10px 0px 10px 0px;
	text-align:left;
  }
  
  .inlineChoices>div.item{
	  margin: 0px 10px;
	  white-space: nowrap;
	  width:450px;
	  border:1px red solid;
  }
  
  
  .label{
	  font-size:80%;
  }
  
  .itemImges{
	  width:150px;
	  height:100px;
	  border-radius:15px;
	  background-size:100%;
	  border:2px #999999 solid;
	  background-position: center;
	  background-repeat:no-repeat;
	  background-size:100%;
	  text-align:center;
  }
  
  .selected{
	  background-color: #fda24c !important;
	  border-radius: 25px;
  }
  
  /*===============================================*/
  
  .tableHolder
  {
	  width: 90%;
	  margin: 70px auto 30px auto;
	  display: inline-table;
  }
  
  .choicesContainer
  {
	  width: 65%;
	  margin: 15px 0px 0px 65px;
	  display: flex;
	  flex-wrap: wrap;
	  align-items: stretch;
	  justify-content: space-between;
	  gap: 10px;
  }
  
  .choices
  {
	  flex: 0 1 20%;
	  align-content: center;
	  text-align: center;
	  border: 1px solid #bf00c5;
	  border-radius: 5px;
	  background-color: #ffebcc;
	  box-sizing: border-box;
	  padding: 5px;
	  font-size: 20px;
  }
  
  .choices:hover
  {
	  background-color: #fda24c;
	  cursor: pointer;
  }
  
  td.question-img
  {
	  padding-left: 10px;
  }
  
  td.question-img img
  {
	  border: 2px solid #ff8f27;
	  border-radius: 10px;
	  margin: auto;
	  width: 100px;
  }