.player-container{

	position: relative;

	border: 1px solid #cccccc;

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;

	border-radius: 3px;

	width:350px;

	height: 384px;

	overflow: hidden;

	margin-left: 20px;

	font-family: 'Helvetica', 'Arial', sans;



}



	.player-container, .player-container *{

		-webkit-box-sizing: border-box;

		-moz-box-sizing: border-box;

		box-sizing: border-box;

	}



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

	}



	.animation-player{

		display: table;

		position: relative;

		width: 100%;

		height: 100%;

	}

	

		.player-title, .player-description{

			position: absolute;

		}



		.player-title, .player-description, .animation-description{

			width: 100%;

			text-align: center;

			font-weight: bold;

			padding: 0 20px;

		}



		.player-title{

			top: 20px;

			font-size: 18px;

			color: red;

		}



		.player-description{

			top: 100px;

		}



		.player-description, .animation-description{

			

			color: green;

			font-size: 16px;

		}



			.screen{

				text-align: center;

				display: table-cell;

				vertical-align: middle;

			}



				.animation-container{

					display: table;

					width: 100%;

				}



				.button-container{

					text-align: center;

					width: 100%;

				}

					.animation-description{

						margin-bottom: 20px;

					}



					.animation-button{

						display:block;

						min-width: 80%;

						margin: 0 auto 10px auto;

						padding: 5px;

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

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

					}



@media all and (max-width: 480px){

	.player-container{

		float: none;

		margin: auto;

	}

}