.test-container {
	width: 50%;
	height: auto;
	margin: 0 auto;
	font-size: 1.3em;
}

#qnumber {
	width: 95%;
	height: 20%;
	margin: 0 auto;
	color: #4B0082;
	background-color: #F5F5DC;
	font-style: italic;
	font-weight: bold;
	padding: 1%;
	line-height: 1.5;
}

#qnumber video {
	max-width: 100%;
}

div[id ^='ansnumber'] {
	width: 90%;
	height: auto;
	margin: 0 auto;
	color: #2471a3;
	cursor: pointer;
	padding: 1%;
}

.answerItem:hover {
	box-shadow: inset 0 0 0 3px #ebedef;
	-webkit-transform: scale(1.01);
	-ms-transform: scale(1.01);
	transform: scale(1.01);
}

.start-button {
	text-align: center;
}

/*.test-img {
  border: 1px solid #ddd;
  padding: 2px;
}*/


.test-img {
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 2px;
  width: 75%;
  margin: 0 auto;
  display: block;
}


.test-img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.responsive {
  width: 100%;
  height: auto;
}

strong {
	color: red;
}

@media only screen and (max-width: 530px) {
  .test-container {
	width: 90%;
	font-size: 1em;
	}
	.test-img {
	  width: 100%;
	}
}

@media only screen (min-width: 535px) and (max-width: 1024px) {
  .test-container {
	width: 80%;
	font-size: 1.1em;
	}
	.test-img {
	  width: 90%;
	}
}


@media screen and (min-width: 1024px) {
  .test-container {
	width: 50%;
	font-size: 1.3em;
	}
	.test-img {
	  width: 75%;
	}
}