#turntable {
	background-image: url('/playlists/images/recordplayer/base.png');
	overflow: hidden;
	width: 290px;
	height: 236px;
	position: absolute;
	top: 71px;
	left: 72%;
	z-index: 1;
	cursor: pointer;
        background-size:100%;
		
}

	@-moz-keyframes fadeIn {
		0% { opacity: 0 }
		75% { opacity: 0 }
		100% { opacity: 1; }
	}
	
	@-o-keyframes fadeIn {
		0% { opacity: 0 }
		75% { opacity: 0 }
		100% { opacity: 1; }
	}
	
	@-webkit-keyframes fadeIn {
		0% { opacity: 0 }
		75% { opacity: 0 }
		100% { opacity: 1; }
	}
	
	@-ms-keyframes fadeIn {
		0% { opacity: 0 }
		75% { opacity: 0 }
		100% { opacity: 1; }
	}



#wheel {
	background-image: url('/playlists/images/recordplayer/wheel.png');
        background-size:100%;
	overflow: hidden;
	position: absolute;
	width: 189px;
	height: 189px;
	left: 24px;
	top: 23px;
	z-index: 2;
		-o-transition: all ease-in-out .25s;
		-moz-transition: all ease-in-out .25s;		
		-webkit-transition: all ease-in-out .25s;		
		-ms-transition: all ease-in-out .25s;				
}

	#turntable.on #wheel {
		-o-animation: turn 2s infinite linear;
		-moz-animation: turn 2s infinite linear;
		-webkit-animation: turn 2s infinite linear;
		-ms-animation: turn 2s infinite linear;

						
	}
	
	#turntable.off #wheel {

		-o-animation: stop 1s linear;
		-o-delay: 0;
		-moz-animation: stop 1s linear;
		-moz-delay: 0;		
		-webkit-animation: stop 1s linear;
		-webkit-delay: 0;		
		-ms-animation: stop 1s linear;
		-ms-delay: 0;		
	}
	
		
	
	@-o-keyframes turn {
    	0% { -o-transform: rotate(0deg); }
	    100% { -o-transform: rotate(360deg); }
    }
    
	@-moz-keyframes turn {
    	0% { -moz-transform: rotate(0deg); }
	    100% { -moz-transform: rotate(360deg); }
    } 
    
    @-webkit-keyframes turn {
    	0% { -webkit-transform: rotate(0deg); }
	    100% { -webkit-transform: rotate(360deg); }
    }   

	@-ms-keyframes turn {
    	0% { -ms-transform: rotate(0deg); }
	    100% { -ms-transform: rotate(360deg); }
    }
    
	@-o-keyframes stop {
    	0% { -o-transform: rotate(-180deg); }
	    100% { -o-transform: rotate(0deg); }
    }    
    
	@-moz-keyframes stop {
    	0% { -moz-transform: rotate(-180deg); }
	    100% { -moz-transform: rotate(0deg); }
    }    
    
	@-webkit-keyframes stop {
    	0% { -webkit-transform: rotate(-180deg); }
	    100% { -webkit-transform: rotate(0deg); }
    }      

	@-ms-keyframes stop {
    	0% { -ms-transform: rotate(-180deg); }
	    100% { -ms-transform: rotate(0deg); }
    }              
    

#label { 
width:101px; 
height:101px; 
margin:44px; 
z-index:5; 
border-radius:50%; 
display:none;


}

#hole { 
width:16px; 
height:16px; 
margin:42px; 
z-index:6; 
border-radius:50%; 
background: url('/playlists/images/recordplayer/hole.png'); 
display:inline-block;
box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.75);
}

#needle {
	background-image: url('/playlists/images/recordplayer/needle.png');
        background-size:100%;
	overflow: hidden;
	position: absolute;
	width: 32px;
	height: 142px;
	left: 234px;
	top: 26px;	
	z-index: 3;
		-o-transition: all ease-in-out 1s;
		-moz-transition: all ease-in-out 1s;		
		-webkit-transition: all ease-in-out 1s;		
		-ms-transition: all ease-in-out 1s;	
}

	#turntable.on #needle {
		-o-animation: play 1s linear;
		-o-transform-origin: 15px 2px;
	    -o-animation-fill-mode: forwards;	
		-moz-animation: play 1s linear;	    
		-moz-transform-origin: 15px 2px;
	    -moz-animation-fill-mode: forwards;
		-webkit-animation: play 1s linear;	    
		-webkit-transform-origin: 15px 2px;
	    -webkit-animation-fill-mode: forwards;	
		-ms-animation: play 1s linear;	    
		-ms-transform-origin: 15px 2px;
	    -moz-animation-fill-mode: forwards;
	}
	
	#turntable.off #needle {
		-o-animation: needlestop .8s linear;
		-o-transform-origin: 15px 2px;
		-o-animation-fill-mode: forwards;	
		-moz-animation: needlestop .8s linear;
		-moz-transform-origin: 15px 2px;
		-moz-animation-fill-mode: forwards;					
		-webkit-animation: needlestop .8s linear;	
		-webkit-transform-origin: 15px 2px;
		-webkit-animation-fill-mode: forwards;	
		-ms-animation: needlestop .8s linear;
		-ms-transform-origin: 15px 2px;
		-ms-animation-fill-mode: forwards;		
	}
	
	
	@-o-keyframes play {
		0% { -o-transform: rotate(0deg); }
		100% { -o-transform: rotate(30deg); }		
	}
	
	@-moz-keyframes play {
		0% { -moz-transform: rotate(0deg); }
		100% { -moz-transform: rotate(30deg); }		
	}	
	
	@-webkit-keyframes play {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(30deg); }		
	}	
	
	@-ms-keyframes play {
		0% { -ms-transform: rotate(0deg); }
		100% { -ms-transform: rotate(30deg); }		
	}	
	
	@-o-keyframes needlestop {
		0% { -o-transform: rotate(30deg); }
		100% { -o-transform: rotate(0deg); }		
	}	
		
	@-moz-keyframes needlestop {
		0% { -moz-transform: rotate(30deg); }
		100% { -moz-transform: rotate(0deg); }		
	}	
	
	@-webkit-keyframes needlestop {
		0% { -webkit-transform: rotate(30deg); }
		100% { -webkit-transform: rotate(0deg); }		
	}		
		
	@-ms-keyframes needlestop {
		0% { -ms-transform: rotate(30deg); }
		100% { -ms-transform: rotate(0deg); }		
	}


/* ----------- Breakpoints ----------- */

@media screen  and (max-width: 21.24em){
#turntable{ width: 130px; height: 106px; margin-top:10px; left: 59%;}
#wheel{width: 85px; height: 85px; left: 10.75px; top: 10.31px;}
#needle{width: 16px; height: 64px; left: 104px; top: 11px;}
#label { width:47px; height:47px; margin:19px; background-size:cover;}
#hole { width:8px; height:8px; margin:18.5px; background-size:cover;}

}

@media screen and (min-width: 21.25em) and (max-width: 25.93em){
#turntable{width: 145px; height: 118px; margin-top:0; left: 61%;}
#wheel{width: 94.5px; height: 94.5px; left: 12px; top: 11.5px;}
#needle{width: 18px; height: 76px; left: 115px; top: 13px;}
#label { width:51px; height:51px; margin:22px; background-size:cover;}
#hole { width:9px; height:9px; margin:21px; background-size:cover;}

}  


@media screen and (min-width: 25.94em) and (max-width: 32.87em){
#turntable{width: 165px; height: 134px; margin-top:0; left: 61%;}
#wheel{width: 108px; height: 108px; left: 15px; top: 13px;}
#needle{width: 20px; height: 86px; left: 132px; top: 14px;}
#label { width:58px; height:58px; margin:25px; background-size:cover;}
#hole { width:11px; height:11px; margin:24px; background-size:cover;}

}


@media screen and (min-width: 32.88em) and (max-width: 37.49em) {
#turntable{width: 200px; height: 163px; top: 70px;left: 60%;}
#wheel{width: 130px; height: 130px; left: 18px; top: 16px;}
#needle{ width: 22px; height: 97px; left: 162px; top: 20px;}
#label { width:70px; height:70px; margin:30px; background-size:cover;}
#hole { width:12px; height:12px; margin:29px; background-size:cover;}

}

@media screen and (min-width: 37.50em) and (max-width: 63.99em) {
#turntable{width: 240px; height: 195px; top: 101px;left: 58.5%;}
#wheel{width: 156px; height: 156px; left: 20px; top: 19px;}
#needle{ width: 27px; height: 117px; left: 192px; top: 21px;}
#label { width:83px; height:83px; margin:37px; background-size:cover;}
#hole { width:15px; height:15px; margin:34px; background-size:cover;}


}

@media screen and (min-width: 50em) and (max-width: 63.99em) {
#turntable{left: 66%;}

}

@media screen and (min-width: 64em) and (max-width: 78.37em){
#turntable {left: 69%; }

}