/* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126 | License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
		display: block;
}

body {
		line-height: 1;
}

ol, ul {
		list-style: none;
}

blockquote, q {
		quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
		content: "";
		content: none;
}

table {
		border-collapse: collapse;
		border-spacing: 0;
}

/* CUSTOM CSS */
html {
		height: 100%;
}

body {
		background-color: #FFF;
		min-height: 100%;
		font-family: "Gloria Hallelujah", sans-serif;
		font-size: 100%;
		line-height: 1.4;
		color: white;
		min-width: 320px;
		overflow-x: hidden;
}

main {
		position: relative;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 540px;
		max-width: 100%;
		padding: 1em;
		margin: 0 auto;
		text-align: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		min-height: 100vh;
}

h1 {
		position: relative;
		z-index: 99;
		font-size: 5em;
		margin: 0 auto;
		padding: 20px 0 15px;
}

h1 img {
		max-width: 100%;
}

.flex {
		position: relative;
		z-index: 99;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		margin: 0 auto;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
		list-style: none;
		max-width: 500px;
}
.flex li {
		text-align: left;
		font-size: 2em;
		padding: 10px;
}

/* RESPONSIVE */
@media screen and (max-width: 470px) {
		.flex {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				margin: 2em auto;
				max-width: 250px;
				-webkit-box-pack: end;
				    -ms-flex-pack: end;
				        justify-content: flex-end;
		}
		.flex li {
				width: 100%;
				text-align: right;
		}
		.flex li img {
				height: 120px;
		}
}
/* RECORD ANIMATION */
.record-wrapper {
		margin-top: -60px;
		margin-bottom: -20px;
		display: block;
		position: relative;
		padding-top: 200px;
		padding-bottom: 200px;
		background-image: radial-gradient(#B0AFAF 11%, #E1DEDE 20%, #FFF 70%, #FFF 100%);
}

.record_case {
		-webkit-perspective: 1800px;
		perspective: 1800px;
		position: relative;
		top: 50%;
		margin: 0 auto;
		margin-top: -134px;
		width: 269px;
}

.record {
		position: absolute;
		width: 100%;
		height: 269px;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transition: -webkit-transform 0.4s;
		transition: -webkit-transform 0.4s;
		transition: transform 0.4s;
		transition: transform 0.4s, -webkit-transform 0.4s;
		animation: spin 3s linear alternate-reverse;
		-webkit-animation: spin 3s linear alternate-reverse;
		-moz-animation: spin 3s linear alternate-reverse;
		-o-animation: spin 3s linear alternate-reverse;
		-webkit-transform: rotateY(-20deg);
		        transform: rotateY(-20deg);
}

@keyframes spin {
		from {
				-webkit-transform: rotateY(-20deg);
				        transform: rotateY(-20deg);
		}
		to {
				-webkit-transform: rotateY(20deg);
				        transform: rotateY(20deg);
		}
}
@-webkit-keyframes spin {
		from {
				-webkit-transform: rotateY(-20deg);
		}
		to {
				-webkit-transform: rotateY(20deg);
		}
}
.record > div,
.front > div {
		display: block;
		position: absolute;
}

.front {
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transition: -webkit-transform 0.5s;
		transition: -webkit-transform 0.5s;
		transition: transform 0.5s;
		transition: transform 0.5s, -webkit-transform 0.5s;
		-webkit-transform: translate3d(0, 0, 5px);
		transform: translate3d(0, 0, 5px);
		z-index: 10;
}

.front > div {
		position: absolute;
		top: 0;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
}

.front, .back, .front > div {
		width: 269px;
		height: 269px;
}

.left, .right {
		width: 10px;
		left: -5px;
}

.top, .bottom {
		width: 269px;
		height: 10px;
		top: -5px;
}

.back {
		-webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 5px);
		transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 5px);
		-webkit-box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
		        box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
		border-radius: 3px 0 0 3px;
}

.right {
		height: 269px;
		-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 269px);
		transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 269px);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
}

.left {
		height: 269px;
		-webkit-transform: rotate3d(0, 1, 0, -90deg);
		transform: rotate3d(0, 1, 0, -90deg);
}

.top {
		-webkit-transform: rotate3d(1, 0, 0, 90deg);
		transform: rotate3d(1, 0, 0, 90deg);
}

.bottom {
		-webkit-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 269px);
		transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 269px);
}

.back {
		z-index: 10;
}

.front, .back, .right, .left, .top, .bottom {
		/*background-color: #f30342;*/
		background-color: #B7B7B7;
}

.viewback {
		-webkit-transform-origin: center center;
		-webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 0px);
		transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 0px);
}

.vinyl {
		height: 260px;
		width: 260px;
		background: black;
		border-radius: 50%;
		position: relative;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transition: left 1s;
		-moz-transition: left 1s;
		-o-transition: left 1s;
}

.vinyl:before {
		display: block;
		content: "";
		height: 5px;
		width: 5px;
		background: black;
		border-radius: 50%;
		position: absolute;
		left: 136px;
		top: 136px;
		z-index: 2;
}

.vinyl:after {
		display: block;
		content: "";
		height: 80px;
		width: 80px;
		background: #F0EAD6;
		border-radius: 50%;
		position: relative;
		left: 90px;
		top: 90px;
		-webkit-box-shadow: 0 0 0 5px black, 0 0 0 6px #3F3F3F, 0 0 0 11px black, 0 0 0 12px #3F3F3F, 0 0 0 17px black, 0 0 0 18px #3F3F3F, 0 0 0 23px black, 0 0 0 24px #3F3F3F, 0 0 0 29px black, 0 0 0 30px #3F3F3F, 0 0 0 35px black, 0 0 0 36px #3F3F3F, 0 0 0 41px black, 0 0 0 42px #3F3F3F, 0 0 0 47px black, 0 0 0 48px #3F3F3F, 0 0 0 53px black, 0 0 0 54px #3F3F3F, 0 0 0 59px black, 0 0 0 60px #3F3F3F, 0 0 0 65px black, 0 0 0 66px #3F3F3F, 0 0 0 71px black, 0 0 0 72px #3F3F3F, 0 0 0 77px black, 0 0 0 78px #3F3F3F, 0 0 0 83px black, 0 0 0 84px #3F3F3F;
		        box-shadow: 0 0 0 5px black, 0 0 0 6px #3F3F3F, 0 0 0 11px black, 0 0 0 12px #3F3F3F, 0 0 0 17px black, 0 0 0 18px #3F3F3F, 0 0 0 23px black, 0 0 0 24px #3F3F3F, 0 0 0 29px black, 0 0 0 30px #3F3F3F, 0 0 0 35px black, 0 0 0 36px #3F3F3F, 0 0 0 41px black, 0 0 0 42px #3F3F3F, 0 0 0 47px black, 0 0 0 48px #3F3F3F, 0 0 0 53px black, 0 0 0 54px #3F3F3F, 0 0 0 59px black, 0 0 0 60px #3F3F3F, 0 0 0 65px black, 0 0 0 66px #3F3F3F, 0 0 0 71px black, 0 0 0 72px #3F3F3F, 0 0 0 77px black, 0 0 0 78px #3F3F3F, 0 0 0 83px black, 0 0 0 84px #3F3F3F;
}

.record:hover .vinyl {
		left: 120px;
}

.record:hover .right {
		display: none;
}
/*# sourceMappingURL=index_v3.css.map */