/* ========= COMMON ========= */

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #121314;
	background: url(http://i47.tinypic.com/33nw5fb.jpg);
	background-size: cover;
}

.centered {
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}

.round {
	border-radius: 50%;
}			


/* ========= RECORD ELEMENTS ========= */

.outer {
  overflow-y: hidden;
}

.layer,
#record,
.outer {
	height: 900px;
}

.layer,
#record {
	display: block;
	width: 900px;
	position: absolute;
}

#record {
	background-color: #070707;
	-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5);
	box-shadow:         0px 0px 8px 4px rgba(0, 0, 0, 0.5);
}

#sheen {
	display: block;
	width: 100%;
	height: 0px;
	-webkit-box-shadow: 0px 0px 250px 100px rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 0px 0px 250px 100px rgba(255, 255, 255, 0.2);
	box-shadow:         0px 0px 250px 100px rgba(255, 255, 255, 0.2);
	-webkit-transform: rotate(45deg) translateX(-50%);
	-webkit-transform-origin: 0;
	-moz-transform: rotate(45deg) translateX(-50%);
	-moz-transform-origin: 0;
	transform: rotate(45deg) translateX(-50%);
	transform-origin: 0;
	position: absolute;
	overflow: hidden;
}

#label {
	display: block;
	width: 33%;
	height: 33%;
	background-color: #CCC;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:    0px 0px 8px 4px rgba(0, 0, 0, 0.2);
	box-shadow:         0px 0px 8px 4px rgba(0, 0, 0, 0.2);
}

#hole {
	display: block;
	width: 10%;
	height: 10%;
	background-color: #121314;
	-webkit-box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:    inset 0px 0px 8px 8px rgba(0, 0, 0, 0.5);
	box-shadow:         inset 0px 0px 8px 8px rgba(0, 0, 0, 0.5);
}


/* ========= GROOVES ========= */

.groove {
	display: block;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.12);
	position: absolute !important;
}

.trackGroove {
	border: 2px solid rgba(255, 255, 255, 0.18);
}


/* ========= ANIMATION ========= */

.turning .rotating {
	-webkit-animation: rotate 2s linear infinite;
	-moz-animation: rotate 2s linear infinite;
	animation: rotate 2s linear infinite;
	will-change: transform;
}

.turning .backnforth {
	-webkit-animation: backnforth 1s linear infinite;
	-moz-animation: backnforth 1s linear infinite;
	animation: backnforth 1s linear infinite;
}

.turning .wobble {
	-webkit-animation: wobble 20s infinite;
	-moz-animation: wobble 20s infinite;
	animation: wobble 20s infinite;
}

@-webkit-keyframes rotate     { from { -webkit-transform: rotate(0deg);  } to  { -webkit-transform: rotate(360deg);  } }
@-webkit-keyframes backnforth { 33%  { -webkit-transform: rotate(-1deg); } 66% { -webkit-transform: rotate(1deg);    } }
@-webkit-keyframes wobble     { 33%  { -webkit-transform: rotate(0.1deg); } 66% { -webkit-transform: rotate(-0.1deg); } }

@-moz-keyframes rotate     { from { -moz-transform: rotate(0deg);  } to  { -moz-transform: rotate(360deg);  } }
@-moz-keyframes backnforth { 33%  { -moz-transform: rotate(-1deg); } 66% { -moz-transform: rotate(1deg);    } }
@-moz-keyframes wobble     { 33%  { -moz-transform: rotate(0.1deg); } 66% { -moz-transform: rotate(-0.1deg); } }

@keyframes rotate     { from { transform: rotate(0deg);  } to  { transform: rotate(360deg);  } }
@keyframes backnforth { 33%  { transform: rotate(-1deg); } 66% { transform: rotate(1deg);    } }
@keyframes wobble     { 33%  { transform: rotate(0.1deg); } 66% { transform: rotate(-0.1deg); } }