.transform *{

	padding: 0;

	margin: 0;

	box-sizing:border-box;

	-moz-box-sizing:border-box; /* Firefox */

}



.transform{

	max-width: 694px;

	display:block;

	margin: 20px auto;

	position: relative;

	font-family: "Arial", sans;

	border: 1px solid #66CC00;

	-moz-border-radius: 7px;

	-webkit-border-radius: 7px;

	border-radius: 7px;

	overflow:hidden;

	background-clip:padding-box;

	-moz-background-clip:padding-box; /* Firefox */

	font-size: 16px;

}



.frame{

	display:block;

	width: 100%;

	padding-bottom: 2.57%;

	background: transparent url("/wp-content/interactive/rockcycle/images/frame-sprite.png") no-repeat;

	background-size: cover;

	position: absolute;

	z-index: 999;

}



#frame-top{

	top:0;

	left:0;

}



#frame-bottom{

	background-position: 0 100%;

	padding-bottom: 3%;

	bottom:0;

	left:0;

}



.audio-container{

	position:absolute;

}



/*stat container*/

.stat-container{

	border: 2px solid #66CC00;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

	background-color: #fff;

	display:none;

	text-align: center;

	font-size: 8px;

	font-weight:bold;

	text-transform: uppercase;

	padding: 2px;

	overflow: hidden;

	z-index: 300;

}



.score-container{

	display:inline-block;

}



.counter {

	display: inline-block;

	width: 40px;

	height: 26px;

	border: 1px solid #ccc;

	margin-left: 10px;

	color: #ff0000;

	border: 2px solid #66CC00;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

	border-radius: 10px;

	background-color: #CCFFCC;

	text-align: center;

	font-size: 13px;

}



.timer-container{

	vertical-align: middle;

	display:inline-block;

	margin-left: 10px;

}



.timer{

	display:inline-block;

	border: 1px solid #ccc;

	width: 83px;

}



.timer-bar{

	background-color: blue;

	height: 5px;

}



.title{

	margin-top: 20px;

	text-align:center;

	font-weight: bold;

	z-index: 100;

	position:relative;

}



.screen{

	padding: 10px;

	margin-bottom: 20px;

}



.collection-container{

	background: #ccffff;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

	border-radius: 10px;

	margin-bottom: 15px;

	padding: 10px;

	line-height: 40px;

	border: 2px solid #66CC00;

	font-size: 12px;

	font-weight: bold;

}



.collection{

	/*display:inline-block;*/

}



#screen3 .collection{

	width: auto;

	max-width: 310px;

	margin: auto;

}



.collection-title{

	text-align: center;

	color:#66CC33;

	text-transform: uppercase;

}



.collection-item{

	display:inline-block;

	margin-left: 10px;

	text-align: center;

	width: 90px;

	line-height: 18px;

}



.collection-item img{

	max-width: 100%;

}



.collection-item.new{

	display:block;

	width: auto;

}



.collection-item.new .collection-item-image{

	max-width: 157px;

	margin: auto;

	line-height: 14px;

}



.callout {

	color: #cc0000;

	font-weight: bold;

	margin-bottom: 15px;

}



.instructions {

	font-weight: bold;

	margin-bottom: 15px;

}



.stair-text{

	display:block;

	width: 35px;

	height: 50px;

	float: right;

}



#screen3 .instructions{

	color: #006600;

	font-weight: normal;

}



.transform-button-container{

	display:block;

	overflow: hidden;

}



.transform-button{

	display:block;

	width: auto;

	margin:auto;

	text-transform: uppercase;

	position:relative;

	border: 1px solid #ccc;

	background-color: #666;

	color: white;

	border: 2px solid #66CC00;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

	font-size: 28px;

	font-weight: normal;

	z-index: 100;

	background: rgb(153,255,0); /* Old browsers */

	background: -moz-linear-gradient(top,  rgba(153,255,0,1) 0%, rgba(51,153,102,1) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,255,0,1)), color-stop(100%,rgba(51,153,102,1))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* IE10+ */

	background: linear-gradient(to bottom,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ff00', endColorstr='#339966',GradientType=0 ); /* IE6-9 */

	-moz-box-shadow:    2px 2px 0px 0px rgba(0,0,0,0.3);

	-webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.3);

	box-shadow:         2px 2px 0px 0px rgba(0,0,0,0.3);

	cursor: pointer;

}



.transform-button:hover{

	background: rgb(149,196,245); /* Old browsers */

	background: -moz-linear-gradient(top,  rgba(149,196,245,1) 0%, rgba(0,51,102,1) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,196,245,1)), color-stop(100%,rgba(0,51,102,1))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* IE10+ */

	background: linear-gradient(to bottom,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95c4f5', endColorstr='#003366',GradientType=0 ); /* IE6-9 */

}



.quiz-instruction-container{

	overflow:hidden;

	margin-bottom: 10px;

}



.quiz-instructions{

	font-size: 12px;

	color: #006600;

	line-height: 14px;

}



.quiz-instructions .mobile{

	display:block;

}



.quiz-instructions .desktop{

	display:none;

}



.question{

	color: #cc0000;

	font-weight: bold;

	font-size: 16px;

	margin-bottom: 10px;

}



.formula-container{

	text-align: center;

	margin-bottom: 10px;

	float: left;

}



.formula-container *{

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

	border-radius: 10px;

}



.formula{

	display: inline-block;

	line-height: 10px;

	padding: 10px;

	background: rgb(153,255,0); /* Old browsers */

	background: -moz-linear-gradient(top,  rgba(153,255,0,1) 0%, rgba(51,153,102,1) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,255,0,1)), color-stop(100%,rgba(51,153,102,1))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* IE10+ */

	background: linear-gradient(to bottom,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ff00', endColorstr='#339966',GradientType=0 ); /* IE6-9 */

}



.formula, .formula-image-container{

	border: 2px solid #006600;

}



.formula-item{

	vertical-align: middle;

	margin-bottom: 10px;

}



.formula-image-container{

	display: inline-block;

	max-width: 50px;

	margin-bottom: 5px;

	background: rgb(255,204,51); /* Old browsers */

	background: -moz-linear-gradient(top,  rgba(255,204,51,1) 0%, rgba(177,130,77,1) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,204,51,1)), color-stop(100%,rgba(177,130,77,1))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  rgba(255,204,51,1) 0%,rgba(177,130,77,1) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  rgba(255,204,51,1) 0%,rgba(177,130,77,1) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  rgba(255,204,51,1) 0%,rgba(177,130,77,1) 100%); /* IE10+ */

	background: linear-gradient(to bottom,  rgba(255,204,51,1) 0%,rgba(177,130,77,1) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc33', endColorstr='#b1824d',GradientType=0 ); /* IE6-9 */

}



.formula-image{

	max-width: 100%;

}



.formula-image-container img{

	max-height: 100%;

	max-width: 100%;

}



.formula-label{

	background-color: #fff;

	padding: 0 10px 0 10px;

}



.formula-item-2  .formula-image-container, .formula-item-4  .formula-image-container{

	max-width: 25px;

	background: transparent;

	border: 0;

}



.formula-item-2  .formula-label, .formula-item-3  .formula-label, .formula-item-4  .formula-label{

	display: none;

}



.formula-item-3 .formula-image-container{

	height: 50px;

	width: 50px;

	background: #fff;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

	

}



.choice-container{

	

	overflow: hidden;

}



.choice{

	margin-bottom: 10px;

	cursor: pointer;

	/*background-color: #ccc;*/

	padding: 5px;

	overflow:hidden;

	position:relative;

	font-size: 11px;

}



.choice.disabled{

	display:none;

}



.choice-image-container{

	display:block;

	background: white;

	float: left;

	margin-right: 10px;

	line-height: 10px;

	max-height: 45px;

}



.choice-image-container img{

	border: 2px solid #66CC00;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

	max-height: 45px;

}



.popup-container{

	line-height: 400px;

	z-index: 100;

	position:relative;

	float: right;

}



.popup {

	background-color: #FFFFCC;

	z-index: 100;

	padding: 10px;

	border: 1px solid #CC0000;

	color: #009900;

	text-align: center;

	line-height: normal;

}



.popup-container.correct .popup{

	

	border: 1px solid #009900;

	font-size: 24px;

}



.blocker {

	position:absolute;

	top:0; right:0; bottom: 0; left:0;

	background: #333; background: rgba(0,0,0, .5);

	z-index: 1;

}



.feedback-container{

	text-align:center;

	color: #CC0000;

	line-height: 22px;

}



.feedback-container p{

	margin-bottom: 15px;

}



.feedback-container a{

	color:#CC0000;

	font-size: 16px;

}



@media only screen and (min-width: 441px){

	

	.quiz-instructions .mobile{

		display:none;

	}

	

	.quiz-instructions .desktop{

		display:block;

	}

	

	.formula-container{

		float: none;

		position:relative;

		padding-bottom: 20%;

	}

	

	.formula{

		display: block;

		position:absolute;

		width: 100%;

		height: 100%;

		vertical-align:middle;

	}

	

	.formula-item{

		display:inline-block;

		/*width: 20%;*/

		height: 100%;

		position:relative;

	}

	

	.formula-item img{

		max-height: 100%;

		vertical-align: middle;

	}

	

	.formula-item-1, .formula-item-5{

		width: 28%;

	}

	

	.formula-item-2, .formula-item-4{

		width: 9%;

		height: auto;

	}

	

	.formula-item-3{

		width: 17%;

		height: 100%;

	}

	

	.formula-item-3 .formula-image-container{

		min-width: 100%;

		min-height: 100%;

	}

	

	.formula-item-content{

		width: 100%;

		height: 100%;

		position:relative;

	}

	

	.formula-image-container{

		min-width: 100%;

		height: 100%;

	}

	

	.formula-label-container{

		position:absolute;

		width: 100%;

		bottom: 10px;

	}

	

	.choice-container{

		text-align: center;

		max-width: 360px;

		margin: auto;

	}

	

	.choice{

		display:inline-block;

		max-width: 170px;

		vertical-align: top;

		text-align: center;

		font-size: 12px;

	}

	

	.choice-image-container{

		margin:auto;float: none;

		min-height: 75px;

		min-width: 90px;

	}

	

	.choice-image-container img{

		display:block;

		margin:auto;

		max-height: 75px;

	}

	

	.popup-container{

		position: absolute;

		height: 100%;

		width: 100%;

		text-align: center;

		top:0;

		left:0;

		line-height: 400px;

	}

	

	.popup {

		background-color: #FFFFCC;

		z-index: 100;

		position:relative;

		vertical-align: middle;

		display:inline-block;

	}



	.popup-container.correct .popup{

		

		vertical-align:middle;

	}



	.popup-container {

		margin-top: 34%;



	}



}



@media only screen and (min-width: 640px){

	

	.transform {

		min-height: 400px;

	}

	

	.collection-item{

		max-width: 74px;

	}

	

	.stat-container{

		position:absolute;

		top:15px;

		left: 5px;

		width: 135px;

		text-align:left;

	}

	

	.quiz-instruction-container{

		text-align:center;

	}

	.quiz-instructions{

		max-width: 55%;

		margin: auto;

	}

	

	.quiz-container{

		max-width: 675px;

		

	}

	

	.question{

		margin-left: 25px;

	}

	

	.popup{

		max-width: 260px;

	}

	

	#screen3 .screen-content{

		padding: 0px 20px 0 20px;

		text-align: center;

	}

	

	#screen3 .new{

		max-width: 160px;

		height: 95px;

		position:absolute;

		right: 30px;

		top: 45px;

	}

	

	#screen3 .collection-container{

		position:relative;

		overflow:hidden;

		max-width: 630px;

		margin:auto;

		margin-bottom: 10px;

	}

	

	#screen3 .collection{

		max-width: 300px;

		margin-left: 40px;

	}

	

	#screen5{

		position:absolute;

		height: 100%;

		width: 100%;

		left: 0;

		top:0;

		background: transparent url('/wp-content/interactive/rockcycle/transformrock/images/transform-bg.png') no-repeat;

	}

	

	#screen5 .feedback-container{

		background: transparent url('/wp-content/interactive/rockcycle/transformrock/images/feedback-bubble.png') no-repeat;

		position:absolute;

		top: 100px;

		left: 170px;

		max-width: 336px;

		padding: 20px 55px 0 10px;

		min-height: 213px;

	}

	

	#screen5 .feedback-container:after{

		content: '';

		display:block;

		position:absolute;

		bottom:-80px;

		right: -220px;

		width: 279px;

		height: 232px;

		background: transparent url('/wp-content/interactive/rockcycle/transformrock/images/narrator.png') no-repeat;

	}

}



@media only screen and (min-width: 680px){



	/*.screen {

		position:absolute;

		height: 100%;

		width: 100%;

		top:0; left:0;

	}

	

	.screen-content {

		position:absolute;

		height: 100%;

		width: 100%;

		top:0; left:0;

	}*/

	

	#screen1 .collection-container {

		position:absolute;

		left: 10px; top: 50px;

		max-width: 203px;

		padding-bottom: 40px;

	}

	

	#screen1 .collection-title{

		position: absolute;

		left: 30px;

		bottom: 40px;

		z-index: 100;

	}

	

	#screen1 .instructions{

		position: absolute;

		font-size: 15px;

		left: 220px; top: 50px;

		width: 449px;

		min-height: 243px;

		background: #fff url('/wp-content/interactive/rockcycle/transformrock/images/intro-bubble.png') no-repeat;

		padding: 20px 90px 50px 20px;

	}

	

	#screen1 .instructions:after{

		display:block;

		content: '';

		width: 279px;

		height: 232px;

		background: transparent url('/wp-content/interactive/rockcycle/transformrock/images/narrator.png') no-repeat;

		right: -80px;

		bottom: -110px;

		position:absolute;

	}

	

	.transform-button-container{

		position: absolute;

		left: 0;

		width: 100%;

	}

	

	#screen1 .transform-button-container{

		bottom: 60px;

	}

	

	#screen3 .transform-button-container{

		bottom: 25px;

	}

	

	.transform-button{

		font-size: 20px;

		width: 120px

	}

	

	.choice-container{

		max-width: 100%;

	}

}