body #main-content {
  padding-left: 0px;
  padding-right: 0px;
  margin: 0px;
}

/**
 *	This element is created inside your target element
 *	It is used so that your own element will not need to be altered
 **/
.time_circles {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
 *	This is all the elements used to house all text used
 * in time circles
 **/
.time_circles > div {
    position: absolute;
    text-align: center;
}

/**
 *	Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

/**
 *	Time numbers, ie: 12
 **/
.time_circles > div > span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 300%;
    margin-top: 0.4em;
    font-weight: bold;
}


#stopwatch {

	padding:0px;
	width:100%;
	height:auto;
}

.time_circles canvas
{

	width:100% !important;
	height:auto !important;

}

.textDiv_Minutes
{
width:50% !important;
top:30% !important;
}
.textDiv_Seconds
{
width:50% !important;
top:30% !important;
left:50% !important; 
}

.step1 {   
width: 100%;
height: 34px; 
position: relative; 
background: #ebf2fa; 
color: #ebf2fa;
padding-left: 0px;
margin-bottom:4px;
margin-right: 20px;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
} 

.step1 .qtext {
	color:#333333;
}


.step2 {   
width: 100%;
cursor:pointer;
height: 34px;  
position: relative; 
background: #e8fcbc; 
padding-left: 0px;
margin-bottom:4px;
margin-right: 2px;
} 

.step1:before { 
content: "";
position: absolute; 
right: -10px; 
bottom: 0; 
width: 0; 
height: 0; 
border-left: 10px solid #ebf2fa; 
border-top: 17px solid transparent; 
border-bottom: 17px solid transparent;
z-index:5;}


.step2:after { 
content: ""; 
position: absolute; 
left: 0; 
bottom: 0; 
width: 0; 
height: 0; 
border-left: 10px solid white; 
border-top: 17px solid transparent; 
border-bottom: 17px solid transparent; 
} 

.highlight {
	background: #1e8ae7; 
	color:#ffffff;
	z-index:5000;
	/*margin-bottom:20px;*/
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

.highlight .qtext {
	color:#ffffff;
}


.highlight:before {
	border-left: 10px solid #1e8ae7; 
}
.highlightgreen {
	background: #ee3134; 
	color:#ffffff;
	z-index:5000;
	/*margin-bottom:20px;*/
}

.highlightgreen:before {
	border-left: 10px solid #ee3134; 
}

.celltxts { 
	padding-left:10px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	line-height:16px;
	z-index:1000;
	font-size:12px;
	padding-right:5px;

}

.celltxtsr { 
	padding-left:20px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	line-height:16px;
	z-index:1000;
	font-size:12px;
	padding-right:5px;

}


.winner {
	background: #7fba00; 
	color:#ffffff;
	z-index:5000;
	margin-bottom:20px;
}
.winner:before {
	border-left: 10px solid #7fba00; 
}

#score, #myclock {
	font-size:18px;
	padding-bottom:20px;
}


.correct {
	display:none;
	position:absolute;
	left:0px;
	top:-30px;
	z-index:5000;
}

.wrong {
	display:none;
	position:absolute;
	left:0px;
	top:-30px;
	z-index:5000;
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}

@media (max-width: 709px) {
	.step1 {   
	width: 100%;
	height: 0px; 
	position: relative; 
	background: #ebf2fa; 
	color: #ebf2fa;
	padding-left: 0px;
	margin-bottom:4px;
	margin-right: 20px;
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	} 


	.highlight {
		height: 34px;
		background: #1e8ae7; 
		color:#ffffff;
		z-index:5000;
		/*margin-bottom:20px;*/
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}

}

@media (min-width: 710px) and (max-width: 939px) {


.textDiv_Minutes h1, .textDiv_Seconds h1 {
	line-height: 22px;
	font-size: 18px;
}


}

#quiz2, #quiz3
{
	display:none;
}