@font-face {
	font-family: 'playericons';
	src: 	url("../cassette/fonts/playericons.eot");
	src: 	url("../cassette/fonts/playericons.eot?#iefix") format('embedded-opentype'), 
		url("../cassette/fonts/playericons.woff") format('woff'), 
		url("../cassette/fonts/playericons.ttf") format('truetype'), 
		url("../cassette/fonts/playericons.svg#playericons") format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Main container */
.vc-container{
	text-align: center;
	height: 500px;
	margin-bottom: 50px;
	position: relative;
}

/* Tape elements */
.vc-tape-wrapper{
    margin-left: 50%;
    //margin-right: auto;
    transform-origin: top left;
    width: 586px;
	-webkit-perspective: 800px;	
	-moz-perspective: 800px;
	-o-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
}
.vc-tape{
	width: 586px;
	height: 379px;
	margin: 30px auto 0;
	position: relative;
	-webkit-transition: all .4s ease-in-out;	
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.vc-tape-back{
	width: 100%;
	height: 100%;
	position: relative;
	background: transparent url(../cassette/images/cs_back.png) no-repeat center center;
}
.vc-tape-wheel{
	width: 125px;
	height: 125px;
	position: absolute;
	top: 110px;
	background: transparent;
	border-radius: 50%;
}
.vc-tape-wheel-left{
	left: 109px;
	box-shadow: 0 0 0 70px #000;
}
.vc-tape-wheel-right{
	right: 113px;
}

.vc-fast-forward {
    animation: rotateLeft 0.3s linear infinite forwards;
    
}
.vc-fast-backward {
    animation: rotateRight 0.3s linear infinite forwards;
    
}
.vc-normal-forward {
    animation: rotateLeft 2.5s linear infinite forwards;
    
}

@-webkit-keyframes rotateLeft {
	0% { -webkit-transform: rotate(0deg) translateZ(-1px); }
	100% { -webkit-transform: rotate(-360deg) translateZ(-1px); }
}
@-webkit-keyframes rotateRight {
	0% { -webkit-transform: rotate(0deg) translateZ(-1px); }
	100% { -webkit-transform: rotate(360deg) translateZ(-1px); }
}
@-moz-keyframes rotateLeft {
	0% { -moz-transform: rotate(0deg) translateZ(-1px); }
	100% { -moz-transform: rotate(-360deg) translateZ(-1px); }
}
@-moz-keyframes rotateRight {
	0% { -moz-transform: rotate(0deg) translateZ(-1px); }
	100% { -moz-transform: rotate(360deg) translateZ(-1px); }
}
@-o-keyframes rotateLeft {
	0% { -o-transform: rotate(0deg) translateZ(-1px); }
	100% { -o-transform: rotate(-360deg) translateZ(-1px); }
}
@-o-keyframes rotateRight {
	0% { -o-transform: rotate(0deg) translateZ(-1px); }
	100% { -o-transform: rotate(360deg) translateZ(-1px); }
}
@-ms-keyframes rotateLeft {
	0% { -ms-transform: rotate(0deg) translateZ(-1px); }
	100% { -ms-transform: rotate(-360deg) translateZ(-1px); }
}
@-ms-keyframes rotateRight {
	0% { -ms-transform: rotate(0deg) translateZ(-1px); }
	100% { -ms-transform: rotate(360deg) translateZ(-1px); }
}
@keyframes rotateLeft {
	0% { transform: rotate(0deg) translateZ(-1px); }
	100% { transform: rotate(-360deg) translateZ(-1px); }
}
@keyframes rotateRight {
	0% { transform: rotate(0deg) translateZ(-1px); }
	100% { transform: rotate(360deg) translateZ(-1px); }
}
.vc-tape-wheel div{
	width: 100%;
	height: 100%;
	background: transparent url(../cassette/images/cs_wheel.png) no-repeat center center;
}
.vc-tape-front{
	width: 100%;
	height: 100%;
	position: absolute;
	background: transparent url(../cassette/images/cs_front.png) no-repeat center center;
	top: 0px;
	left: 0px;
}
.vc-tape-side-a{
	display: none;
	-webkit-transform: rotate3d(0, 1, 0, 180deg);
	-moz-transform: rotate3d(0, 1, 0, 180deg);
	-o-transform: rotate3d(0, 1, 0, 180deg);
	-ms-transform: rotate3d(0, 1, 0, 180deg);
	transform: rotate3d(0, 1, 0, 180deg);
}

.vc-tape-front span{
	color: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 83px;
	left: 67px;
	font-family: Arial;
	font-weight: bold;
	font-size: 20px;
}

.vc-controls {
    display: block;
    width: 586px;
    text-align: center;
}

#vc-button-play:active,
#vc-button-rewind:active,
#vc-button-forward:active,
#vc-button-play.pressed,
#vc-button-rewind.pressed,
#vc-button-forward.pressed,
#vc-button-stop:active {
    
    color: #FFFFFF;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    background: #18e09c;
    box-shadow: 4px 4px 0px #01bd7d,
         4px 4px 12px rgba(0,0,0,0.6);
         
    transform: scale(0.95);
}

#vc-button-forward span:before,
#vc-button-rewind span:before,
#vc-button-stop span:before,
#vc-button-play span:before {
    
    font-size: 16px;
    text-align: center;
    font-family: 'playericons';
    width: 1em;
    margin-right: 0.2em;
    text-align: center;
}

#vc-button-forward span:before { content: '\23e9'; } 
#vc-button-rewind span:before { content: '\23ea'; } 
#vc-button-stop span:before { content: '\25aa'; } 
#vc-button-play span:before { content: '\70'; }