.container *{

	padding: 0;

	margin: 0;

	box-sizing:border-box;

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

}



.rock-collection{

	max-width: 698px;

	padding-bottom: 58%;

	/*min-height: 400px;*/

	display:block;

	position:absolute;

	margin: 0 auto 10px auto;

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

	background-size: 100%;

	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 */

}



.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;

}



.rock-collection .title-container{

	position: relative;

	width: 100%;

	text-align: center;

	font-weight: bold;

	font-size: 18px;

	margin-bottom: 10px;

}



.rock-collection-banner{

	display:block;

	position: absolute;

	text-align:center;

	width: 100%;

	top: -120px;

	font-size: 18px;

	font-weight:bold;

	color: #fff;

	vertical-align: middle;

}



.rock-collection-banner span{

	display:inline-block;

	max-width: 324px;

	min-height: 95px;

	padding: 32px 35px 0px 35px;

	margin:auto;

	background: transparent url('/wp-content/interactive/rockcycle/startrock/images/rock-collection-title-bg.png') no-repeat;

	background-size: 100%;

}



.screen{

	display:block;

	position: absolute;

	text-align:center;

}



.screen-content{

	display:inline-block;

	/* vertical-align: middle; */

	width: 100%;

	margin: auto auto;

	text-align: left;

	

}



.rock-collection-button{

	display:block;

	width: 123px;

	margin:auto;

	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: 24px;

	font-weight: bold;

	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,.3);

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

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

}





.rock-collection-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 */

}



#intro-screen{

	

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

	background-size: 100%;

	padding-bottom: 57.63%;

	top:auto; left: auto;

	width: 100%;

}



#intro-screen .screen-content{

	/* margin: 22% auto 0 auto; */

	position: absolute;

	display:block;

	text-align:center;

	overflow: hidden;

}



.screen-message{

	position: relative;

	min-height: 70px;

	padding: 5px;

	max-width: 493px;

	text-align:center;

	font-weight: bold;

	border: 2px solid #66CC00;

	background-color: #fff;

	/* position: relative; */

	margin: auto;

	-moz-border-radius: 20px;

	-webkit-border-radius: 20px;

	border-radius: 20px;

	-moz-box-shadow:    8px 8px 0px 0px rgba(0,0,0,.3);

	-webkit-box-shadow: 8px 8px 0px 0px rgba(0,0,0,.3);

	box-shadow:         8px 8px 0px 0px rgba(0,0,0,.3);

	margin-top: 125px;

}



#intro-button{

	

	top:-20px;

}



.rock-collection #collection-screen{

	width: 100%;

	height: 100%;

}



.rock-collection #collection-screen .title-container{

	position: absolute;

	top: 20px;

	z-index: 300;

}



.rock-collection .popup{

	position:absolute;

	/*top: 25px;

	left: 100px;*/

	width: 100%;

	max-width: 485px;

	background-color: #fff;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

	border-radius: 10px;

	border: 2px solid #66CC00;

	padding: 10px;

	z-index: 200;

}



.rock-collection .popup-title{

	margin-bottom: 5px;

}



.rock-collection .popup-content{

	position:relative;

}



.rock-collection .popup-text{

	background: #ccc;

	max-width: 220px;

	min-height: 260px;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

	border-radius: 10px;

	text-align: left;

	font-size: 12px;

	padding: 10px;

	float:left;

	position:relative;

	line-height: 18px;

	background: rgb(149,193,239); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(149,193,239,1) 0%, rgba(100,130,172,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,193,239,1)), color-stop(100%,rgba(100,130,172,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(149,193,239,1) 0%,rgba(100,130,172,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(149,193,239,1) 0%,rgba(100,130,172,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(149,193,239,1) 0%,rgba(100,130,172,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(149,193,239,1) 0%,rgba(100,130,172,1) 100%); /* W3C */

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



}



.rock-collection .popup-text a{

	color: #000;

}



.rock-collection .credits{

	position: absolute;

	bottom: 5px;

	left: 0px;

	padding:3px;

	text-align: center;

	font-size: 10px;

	line-height: 12px;

}



.rock-collection .credits a{

	font-size: 10px;

}



.rock-collection .popup-image{

	background-color: #000;

	border: 2px solid #66CC00;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

	border-radius: 10px;

	min-width: 225px;

	min-height: 175px;

	float: right;

}



.rock-collection .add-button{

	min-width: 225px;

	font-weight: normal;

	font-size: 16px;

	float: right;

	margin-top: 10px;

	height: 50px;

	-moz-border-radius: 15px;

	-webkit-border-radius: 15px;

	border-radius: 15px;

}



.rock-collection .add-button:hover{

	border: 3px solid #405989;

	background: rgb(236,168,230); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(236,168,230,1) 0%, rgba(172,94,166,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,168,230,1)), color-stop(100%,rgba(172,94,166,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(236,168,230,1) 0%,rgba(172,94,166,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(236,168,230,1) 0%,rgba(172,94,166,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(236,168,230,1) 0%,rgba(172,94,166,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(236,168,230,1) 0%,rgba(172,94,166,1) 100%); /* W3C */

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



}



.rock-collection .collection-container{

	display:block;

	position:relative;

	background-color: #fff; background-color: rgba(255,255,255, .5);

	min-height: 80px;

	max-width: 515px;

	margin: 40px auto;

	padding: 5px;

	z-index: 100;

	text-align: left;

}



.rock-collection .collected-item{

	display:inline-block;

	width: 75px;

	font-size: 9px;

	font-weight: bold;

	text-align: center;

	margin-right: 10px;

}



.rock-collection .collected-item.last{

	margin-right: 0;

}



.rock-collection .collected-item-title{

	margin-top: 3px;

}



.rock-collection .collected-item .collected-item-image, .rock-collection .feedback-item-image{

	width: 100%;

	border: 1px solid #66CC00;

	-moz-border-radius: 3px;

	-webkit-border-radius: 3px;

	border-radius: 3px;

	background-color: blue;

	background: rgb(60,94,139); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(60,94,139,1) 0%, rgba(0,40,80,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(60,94,139,1)), color-stop(100%,rgba(0,40,80,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(60,94,139,1) 0%,rgba(0,40,80,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(60,94,139,1) 0%,rgba(0,40,80,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(60,94,139,1) 0%,rgba(0,40,80,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(60,94,139,1) 0%,rgba(0,40,80,1) 100%); /* W3C */

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

}



.rock-collection .collected-item .collected-item-image{

	

	min-height: 60px;

}





.rock-collection .collected-item-image.active:hover{

	background:#94C3F4;

	cursor: pointer;

	border-color: #DEA2DE;

}





.rock-collection .collected-item .collected-item-image img{

	max-width: 100%;

	height:auto;

}



.rock-collection .item-container{

	height: 100%;

	width: 100%;

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

	position:absolute;

	background-size: 100%;

	top:0; left: 0;

}



.rock-collection .item{

	position:absolute;

	width: 88px;

	height: 99px;

	overflow:hidden;

}



.rock-collection .item-label-container{

	cursor: pointer;

	height: 100%;

	width: 100%;

	position:relative;

}



.rock-collection .icon{

	position:absolute;

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

	margin:auto;

}



.rock-collection .item.disabled{

	display:none;

}



.rock-collection .item:hover{

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

}



.rock-collection .item-label{

	display:none;

	color:#fff;

}



.rock-collection #item1{/*left:396px; top:313px;*/ left:57.22%; top:78.25%;}

.rock-collection #item2{/*left:475px; top:178px;*/ left:68.64%; top:44.5%;}

.rock-collection #item3{/*left:424px; top:98px;*/  left:61.27%; top:24.5%;}

.rock-collection #item4{/*left:100px; top:209px;*/ left:14.45%; top:52.25%;}

.rock-collection #item5{/*left:492px; top:98px;*/  left:71.09%; top:24.5%;}

.rock-collection #item6{/*left:305px; top:126px;*/ left:44.07%; top:31.5%;}



.rock-collection .item .popup{

	display:none;

}



.rock-collection #feedback-screen{

	background:white none;

	height: 100%;

	width: 100%;

}



.rock-collection #feedback-screen .screen-content{

	text-align: center;

	margin-top: 35px;

	margin-bottom: 20px;

}



.rock-collection .feedback-column-container{

	display:inline-block;

	margin: auto;

	width: auto;

	overflow: hidden;

}



.rock-collection .feedback-column{

	float: left;

	background-color: #ccffcc;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

	text-align: center;

	margin-right: 10px;

	padding: 5px 10px;

}



.rock-collection .feedback-column.last{

	margin-right: 0;

}



.rock-collection .feedback-column-title{

	display:block;

	color:#33b233;

	margin-bottom: 5px;

}



.rock-collection .feedback-item{

	margin-bottom: 10px;

}



.rock-collection .feedback-item.last{

	margin-bottom: 0;

}



.rock-collection .feedback-item-image{

	max-width: 116px;

}



.rock-collection .feedback-item-image img{

	max-width: 100%;

}



.rock-collection .feedback-item-label{

	font-weight: bold;

}



@media only screen

and (max-width: 640px){

	

	.rock-collection{

		overflow:hidden;

		padding-bottom: 0;

		background: #fff none;

	}

	

	.rock-collection .screen{

		position: relative;

	}

	

	.rock-collection #collection-screen .title-container{

		position:relative;

		top: auto;

		left:auto;

		margin:15px auto 0 auto;

	}

	

	.rock-collection .collection-container{

		position:relative;

		width: 100%;

		margin:auto;

	}

	

	.rock-collection .item-container{

		position:relative;

		top:auto;

		left: auto;

		padding-bottom: 57.63%;

		margin-bottom: 15px;

		

	}

}





@media only screen

and (max-width: 512px){

	.rock-collection .collection-container{

		max-width: 265px;

	}

}





@media only screen

and (max-width: 500px){

	



	.rock-collection{

		background: transparent none;

		width: auto;

		height: auto;

	}

	

	.rock-collection *{

		border: none;

		-moz-border-radius: 0;

		-webkit-border-radius: 0;

		border-radius: 0;

		-moz-box-shadow:    none;

		-webkit-box-shadow: none;

		box-shadow:         none;

	}

	

	.rock-collection-title{

		position:relative;

	}

	

	.rock-collection-button{

		display:block;

		width: 100%;

		position: relative;

		top:auto;

		left: auto;

		bottom: auto;

		margin-top:10px;

	}

	

	.screen{

		margin: 20px auto 20px auto;

		height: auto;

	}

	

	.screen-content{

		position: relative;

		height: auto;

	}

	

	#intro-screen{

		background: transparent none;

		padding-bottom: 0;

		position: relative;

	}

	

	#intro-screen .screen-content{

		position: relative;

		margin-top: 0;

	}

	

	#intro-button{

		top: auto;

	}

	

	.rock-collection #collection-screen{

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

	background-size: cover;

	}

	

	.rock-collection .item-container{

		position:relative;

		top:auto;

		left: auto;

		padding-bottom: 0;

		background: transparent none;

		margin-top: 20px;

		

	}

	

	.rock-collection .item{

		display:block;

		width: auto;

		height: auto;

		position: relative;

		top: auto !important;

		left: auto !important;

		background-color: #333;

		background-color: rgba(51,51,51, .3);

		margin-bottom: 5px;

		line-height: 24px;

		padding: 10px;

		overflow: hidden;

		border:  1px solid #fff;

		border:  1px solid rgba(255, 255, 255, .5);

	}

	

	.rock-collection .popup{

		position: relative;

		width: auto;

		top:auto !important;

		left: auto !important;

		overflow: hidden;

		margin-top: 10px;

	}

	

	.rock-collection .popup-text{

		width: auto;

		height: auto;

		min-height: 0;

		max-width: 100%;

		float: none;

		margin-bottom: 10px;

	}

	

	.rock-collection .credits{

		position: relative;

		margin-top: 20px;

	}

	

	.rock-collection .popup-image{

		float: none;

		margin: auto;

		min-height: 0;

		min-width: 0;

		position; relative;

	}

	

	.rock-collection .item.disabled{

		display:block;

		background-color: #ccc;

	}

	

	.rock-collection .item.selected{

		background-color: #333;

	}

	

	.rock-collection .item-label-container{

		height: auto;

		width: auto;

	}



	.rock-collection .item.disabled .item-label{

		color: #999;

	}

	

	.rock-collection .item.selected .item-label{

		color: #fff;

	}

	

	.rock-collection .icon{

		max-height: 18px;

		position:relative;

		top:auto; left:auto; right:auto; bottom:auto;

		margin:auto;

	}

	

	.rock-collection .item:hover{

		background: #999 none;

		background: rgba(153,153,153,.3) none;

	}

	

	.rock-collection .item.selected:hover{

		background: #333 none;

	}

	

	.rock-collection .item-label{

		display:inline;

		margin-left: 20px;

	}

}



@media only screen

and (max-width: 430px){



	.rock-collection .feedback-column-container{

		display:block;

	}

	

	.rock-collection .feedback-column{

		float: none;

		max-width: 100%;

		display:block;

		margin-bottom: 10px;

		margin-right:0;

	}

	

	.rock-collection .feedback-item-image{

		margin:auto;

	}

	

	.rock-collection .feedback-column-title{

		display:block;

		width:auto;

	}

}





@media only screen

and (max-width: 305px){

	.rock-collection-banner{

		font-size: 16px;

	}

}



@media only screen

and (max-width: 266px){

	.rock-collection .collection-container{

		max-width: 180px;

	}

}