html, body {
  font-size:16px;
  min-width:800px;
  /*border:1px blue solid;*/
}

.header{
	background-image:url(../Images/whiteBG.png);
	margin-bottom:10px;
}

.content2{
	width: 85%;
	height:83%;
}

.imageHolder{
	width:300px;
	margin:0px auto;
}

#submitBtn, #retakeBtn{
	font-size: 15px;
}

#results{
	font-size: 15px;
}

.choicesHolder{
	width:100%;
}



.popupHolder {
  height:350px;
  width:250px;
}



/*====================*/

.tableHolder{
	width:98%;
}

.inlineChoices{
  display: block;
  margin:5px 0px 5px 0px;
}

.images{
	width:250px;
}

.itemImg{
	width:250px;
}

.textfieldHolder{
	display:block;
}



.itemNum{
	padding:10px 5px 0px 0px;
}
.itemNum2{
	padding:0px 5px 0px 0px;
}

.marks{
	width:30px;
	height:30px;
}

@media screen and (max-width: 700px) {
  html, body {
    font-size: 17px; 
    min-width: 320px; 
  }

  .content2 {
    width: 90%; 
    height: auto; 
    padding: 15px;
    margin: 5px auto;
  }

  .textField {
    font-size: 18px;
    width: 35px; 
    
  }
  
  .marks {
    width: 25px;
    height: 25px;
  }
  .contentWrapper {
    height: auto;
    max-height: calc(100vh - 180px); 
  }
  body {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  @media screen and (max-width: 480px) {
    html, body {
      font-size: 17px;
    }

    .content2 {
      padding: 10px;
      margin: 2px auto;
    }

    .textField {
      font-size: 16px;
      width: 25px;
    }

    #submitBtn, #retakeBtn, #AnswerBtn {
      font-size: 14px;
      padding: 8px 20px;
    }
    .input-container {
        display: block;
        margin-top: 10px;
    }
    
    .time-inputs {
        display: block;
        margin-top: 5px;
    }
    
    .input-label {
        display: block;
        margin-bottom: 5px;
    }
    
  }
}