body { background-color: #fff; padding: 20px; }


@-ms-viewport{
  width: device-width;
  
}

#nursingHomeQuiz {
   font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight: 400;
   width: 660px; height: 700px;
   position: relative;
   overflow: hidden;
   color: #fff;
   border: 2px solid rgba(0,0,0,.5);
   border-radius: 6px;
background-color: #333;
}

#nursingHomeQuiz h1 {
	font-weight: 100; font-size:2em; text-transform: uppercase; margin: 0px;
	position: absolute; top: 25px; left: 36px;
}

#nursingHomeQuiz h1 span {
		display: block;
		font-weight: 200;
		font-size: 3.23em; line-height: 65px;
}

#nursingHomeQuiz .imggg {
	margin-left: 315px;
	margin-top: 32px;
}

#nursingHomeQuiz .cap { margin-left: 55px; }
#nursingHomeQuiz h2 { font-size: 2em; margin: 0px; font-weight: 100; }
#nursingHomeQuiz h3 { font-size: 2.4em; margin: 0px; font-weight: 100; }
#nursingHomeQuiz p { margin: 0px 0px 10px 0px; }
#nursingHomeQuiz .btn {
	display: inline-block;
	cursor: pointer;
	background-color: #2CA58D;
	color: #fff;
	text-decoration: none;
	padding: 5px 15px;
	border-radius: 6px;
}

#nursingHomeQuiz .progress {
	width: 550px;
	position: absolute;
	top: 165px;
	left: 40px;
}
#nursingHomeQuiz .progress div {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-right: 15px;
	border-radius: 10%;
	border-color: #000;
	background-color: rgba(255,255,255,.2);
	transition: background-color 1s;
	
}

#nursingHomeQuiz .progress div::after {
	content:''; display: block; position:absolute; top: -60px;
	left: 4px; width:50px; height: 30px; background: url(../images/icon_correct.svg) no-repeat 0px 0px;
	transition: opacity 1s, top 1s; opacity: 0;
}

#nursingHomeQuiz .progress div.on,
#nursingHomeQuiz .progress div.answered {
	background-color: #ffd700;
}

#nursingHomeQuiz .progress div.answered.incorrect::after {
	background: url(../images/icon_incorrect.svg) no-repeat 0px 0px;
	top:6px; opacity: 1;
}

#nursingHomeQuiz .progress div.correct::after {
	top:7px; opacity: 1;
}
 
#nursingHomeQuiz .intro { position: absolute; top: 220px; left: 660px; width: 550px; }
#nursingHomeQuiz .intro p { margin: 0px 0px 25px 0px; }

#nursingHomeQuiz .question {
	width: 550px;
	position: absolute;
	top: 220px;
	left: 660px;
}
#nursingHomeQuiz .question .txt {
	font-size: 1.6em;
	margin: 0px 0px 20px 0px;
}
#nursingHomeQuiz .question .ans {
	display: inline-block;
	font-size: 1.1em;
	width: 560px;
	border: 4px outset rgba(255,148,0,.7);
	border-radius: 6px;
	padding: 10px;
	margin: 0px 15px 15px 0px;
	position: relative;
}
#nursingHomeQuiz .question .ans.selected {
	border-color: #E00000;
	background-color: #E00000;
	border-style: solid;
}
#nursingHomeQuiz .question .ans.correct {
	border-color: #459a2e;
	background-color: rgba(69,154,46,1);
	border-style: solid;
}

#nursingHomeQuiz .question .ans::after {
	content:'';
	display:block;
	width: 20px; height: 20px;
	background: no-repeat 0px 0px;
	background-size: 20px 20px;
	position: absolute; top: 5px; right: 5px;
}

#nursingHomeQuiz .question.unanswered .ans {
	cursor: pointer;
}
#nursingHomeQuiz .question.unanswered .ans:hover {
	background-color: rgba(155,155,155,.5);
	border-style: inset;
}

#nursingHomeQuiz .question.answered .ans {
	cursor: default;
}
/*#nursingHomeQuiz .feedback .btn {
	display: inline-block;
	cursor: pointer;
	background-color: #c04b01;
	color: #fff;
	text-decoration: none;
	padding: 5px 15px;
	border-radius: 6px;
}*/
#nursingHomeQuiz .feedback {
	color: #fff;
	margin-top: -20px;
	transition: opacity 1s, margin-top 1s;
	visibility: hidden;
	opacity: 0;
}

#nursingHomeQuiz .feedback .btn {
	margin-top: 5px;
}

#nursingHomeQuiz .feedback strong {
	color: #fff;
}

#nursingHomeQuiz .answered .feedback {
	visibility: visible;
	opacity: 1;
	margin-top: 10px;
}

#nursingHomeQuiz .results {
	position: absolute; top: 220px;
	left: 660px; width: 550px;
}

#nursingHomeQuiz .results .share { margin-top: 40px; }

#nursingHomeQuiz .results .share a.btn {
	margin-right: 20px;
	padding: 9px 15px 8px 42px;
	background-repeat: no-repeat;
	background-position: 10px 5px;
	background-size: 25px 25px;
}

#nursingHomeQuiz .results .share a.btn.email {
	background-color: #f0a121; background-image: url(../images/icon_email.svg);
}

#nursingHomeQuiz .active, #nursingHomeQuiz .inactive { transition: left 1.5s ease-in-out; }

#nursingHomeQuiz .active { left: 40px; }
#nursingHomeQuiz .intro.inactive ,#nursingHomeQuiz .inactive.answered{ left: -1350px; }
#nursingHomeQuiz .CR { 
position: absolute; bottom: 0;
    right: 0; color: #fff; }



@media screen and (maxiwidth: 50px) {

	body { padding: 0px; margin: 0px;}

	#myQuiz { width: 320px; background-size: 320 px auto;}
	#myQuiz h1 { width: 300px; font-size: 1.3em; top: 25px; left: 25px;}
	#myQuiz h1 span { line-height: 43px;}
	#myQuiz h2 { margin: 0px; }
	#myQuiz h3 { font-size: 2.2em; margin-bottom: 15x;}

	#myQuiz .progress { width: 300px; top: 110px; left: 25px; }
	#myQuiz .progress div {width: 25px height 25px; margin-right: 20px;}
	#myQuiz .progress div::after { top -30px; width: 53px; heiht: 33px;
	#myQuiz .intro { width: 300px; top: 135px; left: 330px; }
	#myQuiz .question ( width: 300px; top: 135px; left: 330px; }
	#myQuiz .question .txt { font-sixe: 1.4em; margin-bottom: 15px; }
	#myQuiz .question .ans { font-size: em; padding: 5pxl 10px; margin-bottom: 10px; }
	#myQuiz .question .ans.image { min-height: 45px; background-size: auto 45px; }
	#myQuiz .question .ans.image::hover {background-color: #000 }

	#myQuiz .results {width: 260px; top: 150px; left: 330px; }
	#myQuiz .results a.btn {margin-bottom: 20px;}

	#myQuiz .active {margin-bottom: 20px;}
	#myQuiz .intro.inactive. #myQuiz .inactive.answered { left: -650px;}
 

}