/*!
	Built in the VVVOID
	VVVOID, London, U.K
	http://vvvoid.co.uk
	hello@vvvoid.co.uk
!*/


/* ---------- Fonts ---------- */

/*
@font-face {
	font-family:"Misproject";
	src: url("fonts/misproject-font/MISPROJECT.woff2") format("woff2"),
		url("fonts/misproject-font/MISPROJECT.woff") format("woff"),
		url("fonts/misproject-font/MISPROJECT.otf") format("opentype");
    font-style:normal;font-weight:400;
}
*/

/* ---------- Icons ---------- */

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

[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "icon";
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
}

.icon-btn-camera-round:before { content: '\e800'; } /* '' */
.icon-btn-camera:before { content: '\e801'; } /* '' */
.icon-btn-cart-round:before { content: '\e802'; } /* '' */
.icon-btn-cart:before { content: '\e803'; } /* '' */
.icon-btn-email-round:before { content: '\e804'; } /* '' */
.icon-btn-email:before { content: '\e805'; } /* '' */
.icon-btn-help-round:before { content: '\e806'; } /* '' */
.icon-btn-help:before { content: '\e807'; } /* '' */
.icon-btn-live-round:before { content: '\e808'; } /* '' */
.icon-btn-live:before { content: '\e809'; } /* '' */
.icon-btn-merch-round:before { content: '\e80a'; } /* '' */
.icon-btn-merch:before { content: '\e80b'; } /* '' */
.icon-music-fastforward:before { content: '\e80c'; } /* '' */
.icon-music-pause:before { content: '\e80d'; } /* '' */
.icon-music-play:before { content: '\e80e'; } /* '' */
.icon-music-rewind:before { content: '\e80f'; } /* '' */
.icon-music-volume-full:before { content: '\e810'; } /* '' */
.icon-music-volume-none:before { content: '\e811'; } /* '' */
.icon-music-volume:before { content: '\e812'; } /* '' */
.icon-nav-add-mark:before { content: '\e813'; } /* '' */
.icon-nav-arrow-down:before { content: '\e814'; } /* '' */
.icon-nav-arrow-left:before { content: '\e815'; } /* '' */
.icon-nav-arrow-right:before { content: '\e816'; } /* '' */
.icon-nav-arrow-up:before { content: '\e817'; } /* '' */
.icon-nav-close:before { content: '\e818'; } /* '' */
.icon-nav-download-mark:before { content: '\e819'; } /* '' */
.icon-nav-menu:before { content: '\e81a'; } /* '' */
.icon-nav-minus-mark:before { content: '\e81b'; } /* '' */
.icon-nav-refresh-mark:before { content: '\e81c'; } /* '' */
.icon-nav-tick-mark:before { content: '\e81d'; } /* '' */
.icon-social-apple-round:before { content: '\e81e'; } /* '' */
.icon-social-apple:before { content: '\e81f'; } /* '' */
.icon-social-deezer-round:before { content: '\e820'; } /* '' */
.icon-social-deezer:before { content: '\e821'; } /* '' */
.icon-social-facebook-round:before { content: '\e822'; } /* '' */
.icon-social-facebook:before { content: '\e823'; } /* '' */
.icon-social-instagram-round:before { content: '\e824'; } /* '' */
.icon-social-instagram:before { content: '\e825'; } /* '' */
.icon-social-itunes-round:before { content: '\e826'; } /* '' */
.icon-social-itunes:before { content: '\e827'; } /* '' */
.icon-social-songkick-round:before { content: '\e828'; } /* '' */
.icon-social-songkick:before { content: '\e829'; } /* '' */
.icon-social-soundcloud-round:before { content: '\e82a'; } /* '' */
.icon-social-soundcloud:before { content: '\e82b'; } /* '' */
.icon-social-spotify-round:before { content: '\e82c'; } /* '' */
.icon-social-spotify:before { content: '\e82d'; } /* '' */
.icon-social-twitter-round:before { content: '\e82e'; } /* '' */
.icon-social-twitter:before { content: '\e82f'; } /* '' */
.icon-social-vevo-round:before { content: '\e830'; } /* '' */
.icon-social-vevo:before { content: '\e831'; } /* '' */
.icon-social-youtube-round:before { content: '\e832'; } /* '' */
.icon-social-youtube:before { content: '\e833'; } /* '' */


/* ---------- Main ---------- */

html,
body,
#inxs_content_wrapper {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Oswald", "Helvertica", "Arial", "sans-serif";
	text-transform: uppercase;
	background-color: #000000;
	display: block;
	background-image: url(images/site/melamine-wood-004.png);
	background-repeat: repeat;
	background-position: center center;
	text-transform: uppercase;
	font-size: 1.2em;
	width: 100vw;
	height: auto;
}

#bg_gradients {
	background: linear-gradient( rgba(0,0,0,0.7) 0%,
                                 rgba(0,0,0,0.0) 30%,
                                 rgba(0,0,0,0) 70%,
                                 rgba(0,0,0,0.7) 100%);
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

#rotate_indicator {
	display: none;
	z-index: 1000;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	text-align: center;
}

#rotate_indicator:hover {
	transform: translate(-50%, -50%) !important;
}

a {
	text-decoration: none;
}

#inxs_content_wrapper .btn {
	background-color: #FF0000;
	/* background-image: url(images/site/crumpled-paper-transparent-tiled.png); */
	background-repeat: repeat;
	background-size: 600px;
	background-position: 10% 20%;
	width: auto;
	padding: 8px 14px 8px;
	color: #FFFFFF;
	transition: 0.3s;
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
	width: max-content;
	margin: 10px auto;
	transform: scale(1.0,1.0);
	/* text-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0); */
	text-shadow: none;
	cursor: pointer;
	display: inline-block;
	border-radius: 0;
	border: 0;
	font-size: 1rem;
}

#inxs_content_wrapper .btn:after {
	content: '';
	display: block !important;
}

#inxs_content_wrapper .btn:hover {
	transform: scale(1.1,1.1) rotate(0deg) !important;
	text-shadow: none;
	background-color: #FFFFFF;
	color: #000000;

}

.main_title {
	color: #FFFFFF;
	display: inline-block;
	padding: 10px 15px 8px;
	margin-top: -40px;
	margin-bottom: 10px;
	font-size: 40px;
	width: auto;
	max-width: 800px;
	transform: rotate(-2deg);
	background-color: #1c1c1c;
	background-image: url(images/site/crumpled-paper-tiled-white.png);
}

.fade_item {
	opacity: 0;
	transition: 0.5s;
	transform: scale(0.5, 0.5);
	pointer-events: none;
}

.fade_item_visible {
	opacity: 1 !important;
	margin-top: 0 !important;
	transform: scale(1, 1);
	pointer-events: auto !important;
}

.preload {
	opacity: 0;
	transition: 0.5s;
	transform: scale(0.8, 0.8);
}

.preload_visible {
	opacity: 1 !important;
	transform: scale(1, 1);
}

#inxs_content_wrapper #turntable_page_wrapper {
	transform: translateZ(0);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	position: absolute;
	background-color: none !important;

}

#inxs_content_wrapper #turntable_wrapper {
	height: auto;
	overflow: visible;
	z-index: 10;
	position: relative;
	height: 100%;
	background-color: none !important;
}

#inxs_content_wrapper .section {
	position: relative;
	width: 100vw;
	height: 100%;
	left: 0;
	/*
	transition: 0.3s;
	opacity: 1;
	pointer-events: none;
	*/
	box-sizing: border-box;
	overflow: visible;
}

#inxs_content_wrapper .section_inner {
	position: relative;
	width: 100%;
	height: 100%;
}

#inxs_content_wrapper .section_visible {
	pointer-events: auto !important;
	opacity: 1 !important;
	z-index: 1;
}

#inxs_content_wrapper .page_title {
	width: 100%;
	text-align: center;
	top: 50px;
	z-index: 100;
	position: absolute;
}

#inxs_content_wrapper .page_title_inner {
	width: auto;
	display: inline-block;
	padding: 8px 10px 8px;
	color: #FFFFFF;
	max-width: 800px;
	background-color: #1c1c1c;
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
	transform: rotate(-2deg);
	line-height: 100%;
}

#inxs_content_wrapper .page_footer {
	text-align: center;
	bottom: 5px;
	padding: 20px 0;
	position: absolute;
	z-index: 10;
	transform: translateX(-50%);
	left: 50%;
	pointer-events: none;
}

#inxs_content_wrapper .close_btn {
	position: absolute;
	color: #000000;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	line-height: 200%;
	transform: scale(1.0,1.0);
	transition: 0.3s;
	cursor: pointer;
	z-index: 100;
	font-size: 20px;
	background-color: #ffffff;
	background-image: url(images/site/crumpled-paper-transparent-tiled.png);
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
}

#inxs_content_wrapper .close_btn:hover {
	transform: scale(1.1,1.1);
}

#inxs_content_wrapper #main_loader {
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	width: auto;
}


/* ----- Background Elements ------- */

#inxs_content_wrapper #bg_elements {
	position: absolute;
	width: 150%;
	height: 100%;
	top: 0;
	left: 0;
	transform: translateX(0);
	transition: 0.7s;
}

.bg_elements_offscreen {
	transform: translateX(-50%) !important;
}

.bg_element {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#bg_element_01 {
	width: 30%;
	height: 95%;
	top: -3%;
	left: -7%;
	background-image: url(images/site/bg_element_01.png);
	transform: rotate(10deg);
}

#bg_element_02 {
	width: 20%;
	height: 15%;
	top: 60%;
	left: 50%;
	background-image: url(images/site/bg_element_02.png);
	transform: rotate(-5deg);
}

#bg_element_03 {
	width: 20%;
	height: 30%;
	top: 45%;
	right: -20%;
	background-image: url(images/site/bg_element_03.png);
	transform: rotate(-10deg);
}

#bg_element_04 {
	width: 80vh;
	height: 80vh;
	top: -20%;
	left: 40%;
	background-image: url(images/site/bg_element_04.png);
	transform: rotate(10deg);
}

#bg_element_05 {
	width: 25vw;
	height: 17vw;
	top: 60%;
	left: 0%;
	/* background-image: url(images/site/whodoyoutrust.jpg); */
	background-image: url(images/site/groupshot.jpg);
	transform: rotate(-10deg);
	box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.7);
	border: solid 8px #FFFFFF;
	background-color: #FFFFFF;
}

#bg_element_06 {
	width: 80vh;
	height: 80vh;
	top: -15%;
	right: -30%;
	background-image: url(images/site/bg_element_04.png);
	transform: rotate(180deg);
}

/*

#bg_element_poster_2 {
	width: 20%;
	height: 90%;
	top: 60%;
	left: 100%;
	background-image: url(images/site/bg_element_06_small.jpg);
	transform: rotate(5deg);
}

#bg_element_record {
	width: 30%;
	height: 80%;
	top: 80%;
	left: -10%;
	background-image: url(images/site/record_vinyl.png);
}

#bg_element_record_2 {
	width: 30%;
	height: 80%;
	top: -10%;
	left: -20%;
	background-image: url(images/site/record_vinyl.png);
}

#bg_element_record_3 {
	width: 30%;
	height: 80%;
	top: -60%;
	left: 90%;
	background-image: url(images/site/record_vinyl.png);
	transform: rotate(-180deg);
}

#bg_element_record_4 {
	width: 30%;
	height: 80%;
	top: -40%;
	left: 105%;
	background-image: url(images/site/record_vinyl.png);
	transform: rotate(10deg);
}

.bg_album {
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
	border: solid 1px #FFFFFF;
	width: 75vh;
	height: 75vh;
}
*/
#bg_element_album_01 {
	top: 80%;
	left: 0%;
	background-image: url(https://i.scdn.co/image/238f55ed16ff0933c7b634167cdbe5e25ed64eb9);
	transform: rotate(10deg);
}

#bg_element_album_02 {
	top: -20%;
	left: 45%;
	background-image: url(https://i.scdn.co/image/a9366091b298eb9a738ee0936616b5583bf3a398);
	transform: rotate(10deg);
}

#bg_element_album_03 {
	top: -40%;
	left: -5%;
	background-image: url(https://i.scdn.co/image/eed9e0b861c4ba0acd23429f5e91a6a8af627621);
	transform: rotate(-5deg);
}

#bg_element_album_04 {
	top: -5%;
	left: 100%;
	background-image: url(https://i.scdn.co/image/a9366091b298eb9a738ee0936616b5583bf3a398);
	transform: rotate(-5deg);
	background-color: #FFFFFF;
}


/* ---------- Header ---------- */


#inxs_content_wrapper #header {
	position: absolute;
	width: 100%;
	height: 50px;
	display: block;
	text-align: center;
	z-index: 100;
	top: 0;
	left: 0;
	pointer-events: none;
}

#inxs_content_wrapper #social_icons {
	padding: 0;
	margin: 10px;
	position: relative;
	width: auto;
	top: 0px;
	pointer-events: none;
}

#inxs_content_wrapper #social_icons a {
	font-size: 28px;
	transition: 0.3s;
	color: #000000;
	display: inline-block;
	background-color: #ffffff;
	background-image: url(images/site/crumpled-paper-transparent-tiled.png);
	background-repeat: repeat;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	line-height: 100%;
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
}

#inxs_content_wrapper #social_icons a:hover {
	transform: scale(1.1,1.1);
}

#inxs_content_wrapper #main_menu {
	position: relative;
	top: 0px;
	width: auto;
	list-style: none;
	display: inline-block;
	font-size: 14px;
}

#inxs_content_wrapper .menu-item {
	display: inline-block;
	margin: 0 10px;
}

#inxs_content_wrapper .menu-item a {
	color: #000000;
	transition: 0.3s;
}

#inxs_content_wrapper .menu-item a:hover {
	color: #999999;
}

#inxs_content_wrapper #mobile_menu {
	width: 25px;
	height: 25px;
	position: absolute;
	left: 0;
	top: 0;
	margin: 5px;
	display: none;
}

/* ---------- Home Screen --------- */

/*
#home_logo {
	background-image: url(images/site/ffdp_logo.png);
	position: relative;
	display: block;
	height: 25vh;
	width: 70%;
	background-position: center center;
	background-size: contain;
	margin: 4% auto 0;
}
*/

#home_record {
	background-image: url(images/site/record_vinyl.jpg);
	position: absolute;
	transform: translate(-50%, -50%) rotate(-3deg);
	left: 50%;
	top: 50%;
	border-radius: 50%;
	height: 90vh;
	width: 90vh;
	background-position: center center;
	background-size: cover;
}

#home_record_label {
	background-image: url(images/labels/00.png);
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	height: 40%;
	width: 40%;
	background-position: center center;
	background-size: cover;
	border-radius: 50%;
}

#home_record_label_user {
	position: absolute;
	transform: translate(-50%, -50%) scale(0.8, 0.8);
	transition: 0.5s;
	left: 49.8%;
	top: 49.7%;
	height: 66.5%;
	width: 66.5%;
	background-position: center center;
	background-size: cover;
	border-radius: 50%;
	opacity: 0;
}

.home_record_label_user_visible {
	transform: translate(-50%, -50%) scale(1.0, 1.0) !important;
	opacity: 1 !important;
}

#home_content {
	text-align: center;
	position: absolute;
	color: #FFFFFF;
	bottom: 15%;
	width: 100%;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
}

#home_title.btn {
	font-size: 2em;
	pointer-events: none !important;
	color: #FFFFFF;
	background-color: #1c1c1c;
	background-image: url(images/site/crumpled-paper-tiled-white.png);
}

#home_title.btn:hover {
	font-size: 2em;
	pointer-events: none !important;
}

#home_description {
	max-width: 500px;
	margin: 10px auto;
}

#login_button {
	font-size: 40px;
}

.login_button_disabled {
	pointer-events: none;
}

#logout_button {
	position: fixed;
	bottom: 20px;
	width: auto;
}

#user_expiry {
	display: none;
}


/* ---------- Select artist screen ---------- */

#user_search {
	color: #000000;
	display: block;
	clear: both;
	position: relative;
	top: 10vh;
	box-sizing: border-box;
	font-size: 30px;
	z-index: 10;
	transition: 0.5s;
	text-align: center;
	overflow: hidden;
	max-height: 80%;
	background-image: url(images/site/search.svg);
	background-repeat: no-repeat;
	background-position: 100% 17px;
	background-size: 28px;
	-webkit-overflow-scrolling: touch;
	width: 60%;
	margin: 10% auto;
}

#artist-input {
	font-family: "futura-pt",sans-serif;
	border: 0;
	text-align: center;
	padding: 10px 40px;
	align-self: center;
	min-width: 400px !important;
    max-width: 900px;
    transition: 0.3s;
    background-color: transparent;
    border-bottom: solid 1px #FFFFFF;
    color: #FFFFFF;
    text-transform: uppercase;
    overflow: hidden;
    border-radius: 0;
    line-height: normal;
    width: 100% !important;
}

#artist-input:focus {
    outline: none;
}

input::-webkit-input-placeholder { /* WebKit browsers */
	line-height: normal;
	color: #FFFFFF;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	line-height: normal;
	color: #FFFFFF;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
	line-height: normal;
	color: #FFFFFF;
}

input:-ms-input-placeholder { /* Internet Explorer 10+ */
	line-height: normal;
	color: #FFFFFF;
}

#search_button {
	position: absolute;
	display: block;
	width: 40px;
	height: 50px;
	top: 10px;
	right: 0;
	cursor: pointer;
}

.ui-autocomplete {
	position: relative;
	z-index: 10;
	list-style: none;
	padding: 0;
	width: 100%;
	top: 0 !important;
	margin-top: 10px;
	opacity: 0;
	display: none;
	transition: opacity 0.5s;
	pointer-events: none;
	left: auto !important;
	margin: auto;
	text-align: center;
	display: block !important;
}

.ui-menu-item {
	width:  23vh;
	height: 27vh;
	display: inline-block;
	clear: both;
	font-size: 14px;
	transition: 0.3s;
	cursor: pointer;
	vertical-align:top;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	opacity: 0;
}

.ui-menu-item_visible {
	opacity: 1 !important;
}

.ui-menu-item:hover {
	/*
	background-color: #000000;
	color: #FFFFFF;
	*/
	transform: scale(1.2,1.2) !important;
	z-index: 10;
}

.ui-autocomplete.opened {
    opacity: 1;
    pointer-events: auto;
}

.list_overlay_outer {
	background-image: url(images/site/polaroid-small.png);
	width: 100%;
	height: 100%;
	background-size: contain;
	z-index: 10;
	position: absolute;
	background-position: center center;
}

.list_img_outer {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: block;
	overflow: hidden;
	margin: 0 auto 10px;
	background-color: #000000;
}

.list_img {
	height: 75%;
	background-size: cover;
	background-position: center center;
	position: absolute;
	top: 5%;
	width: 90%;
	left: 5%;
	background-color: #000000;
}

.list_item_title {
	line-height: 100%;
	display: block;
	position: absolute;
	bottom: 10%;
	left: 15%;
	z-index: 20;
	text-align: left;
	font-size: 20px;
	transform: rotate(-3deg);
}

.list_item_title_inner {
	color: #FFFFFF;
	display: inline;
	padding: 4px 0 6px;
	background: #000000;
	box-shadow: 8px 0 0 #000000, -8px 0 0 #000000;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	line-height: 130%;
}


.ui-helper-hidden-accessible {
	display: none;
}

#search_results {
	display: block;
	position: relative;
	height: auto;
	width: 90%;
	margin: 0 auto;
}

.ui-autocomplete li:nth-child(2n) {
	transform: rotate(-4deg);
}

.ui-autocomplete li:nth-child(4n) {
	transform: rotate(4deg);
}

.ui-autocomplete li:nth-child(6n) {
	transform: rotate(2deg);
}


/* ---------- Browse albums screen ---------- */


/* ---------- Swiper ---------- */

#all_albums {
	width: 65vh;
	height: 100%;
	top: 0vh;
	overflow: visible;
	transform: translateX(-50%);
	left: 50%;
	position: absolute;
	transition: 1.0s;
	margin-left: -1px;
}

.all_albums_offscreen {
	transform: translateX(-200%) !important;
}

.swiper-wrapper {
	align-items: center;
}

.swiper-slide {
	height: 65vh;
	width: 65vh;
	box-sizing: border-box;
	/* transform: rotate(0deg) scale(0.9, 0.9); */
	transition: 0.3s;
	align-items: center;
}

.swiper-slide-active {
	/* transform: rotate(0deg) scale(1.0, 1.0) !important; */
	z-index: 10;
}

.swiper-button-prev,
.swiper-button-next {
	line-height: 250%;
	font-size: 16px;
}

.inner {
	width: 99%;
	height: 99%;
	margin: 1%;
	/* background-color: rgba(0, 0, 0, 0.5); */
	background-image: url(images/site/record-bag.png);
	background-size: contain;
	background-position: center center;
	text-align: center;
}

.inner img {
	width: 100%;
	height: auto;
	border: solid 10px #FFFFFF;
	box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.5);
	margin: 0 auto;
	transition: 0.3s;
}

.swiper-slide,
.swiper-slide inner,
.swiper-slide .inner img {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.swiper-lazy {
	opacity: 0;
	transition: 0.3s;
}

.swiper-lazy-loaded {
	opacity: 1 !important;
}

/*
.swiper-slide .inner {
	transform: rotate(-3deg) scale(0.8, 0.8) !important;
}

.swiper-slide-active .inner {
	transform: rotate(0deg) scale(1.0, 1.0) !important;
}
*/

#select_footer {
	pointer-events: auto;
}

#turntable_wrapper .swiper-pagination {
	bottom: 10px;
}

#turntable_wrapper .swiper-pagination-bullet {
	background-color: rgba(255, 255, 255, 1);
	opacity: 0.4;
	margin: 4px;
}

#turntable_wrapper .swiper-pagination-bullet-active {
	opacity: 1;
}

/* ---------- Play section ---------- */

#browse {
  display: flex;
  align-items: center;
}

#hide_tracks {
	display: none;
}

#album_tracks_wrapper {
	position: relative;
	z-index: 10;
	max-width: 300px;
	max-height: 70vh;
	height: auto;
	width: 50%;
	top: 48%;
	left: 2%;
	background-color: rgba(255, 255, 255, 1);
	color: #FFFFFF;
	font-size: 0.9rem;
	transform: translateX(-400px) translateY(-50%);
	transition: 0.3s;
	filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5));

	/*
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	*/
}

#album_tracks_wrapper_bg {
	position: fixed;
	opacity: 0.5;;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-image: url(images/site/crumpled-paper-transparent-tiled.png); */
	background-repeat: repeat;
	background-position: center center;
	background-size: 150%;

}

.album_tracks_wrapper_onscreen {
	transform: translateX(10px) translateY(-50%) rotate(00deg) !important;
}

#album_tracks_wrapper li {
	list-style: none;
}

#play_album_btn_wrapper {
	position: absolute;
	z-index: 100;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	font-size: 30px;
}

#play_album_btn.btn {
	font-size: 2rem;
}

#play_album_desc_wrapper {
	margin: 20px 20px 0;
}

#play_album_desc {
	color: #FFFFFF;
	display: inline;
	padding: 7px 0;
	background: #000000;
	box-shadow: 10px 0 0 #000000, -10px 0 0 #000000;
	box-decoration-break: clone;
	line-height: 150%;
}

#play_album_title_wrapper {
	width: 100%;
	font-size: 30px;
	padding: 20px;
	text-align: center;
	margin-top: -1%;
	transform: rotate(-1deg);
	display: none;
	position: absolute;
	z-index: 10;
	pointer-events: none;
}

.play_album_titles {
	display: inline-block;
	padding: 0px 10px 5px;
	color: #FFFFFF;
	box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
	background-color: #1c1c1c;
	/* background-image: url(images/site/crumpled-paper-tiled-white.png); */
}

#play_album_title {
	display: inline-block;
	padding: 0px 10px 5px;
	color: #FFFFFF;
	box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
	background-color: #1c1c1c;
	/* background-image: url(images/site/crumpled-paper-tiled-white.png); */
}

#album_tracks_list {
	padding-left: 5%;
	text-align: left;
}

.track_item {
	text-align: left;
	margin: 10px 0;
	max-width: 90%;
	padding-right: 30px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-bottom: solid 1px #000000;
	position: relative;
	margin-bottom: 10px;
	transition: 0.3s;
	color: #000000;
	background-color: rgba(255, 255, 255, 0.6);
	/* background-image: url(images/site/crumpled-paper-tiled-white.png); */
}

.track_item:hover {
	background-color: #FFFFFF;
	color: #FF0000 !important;
	border-bottom: solid 1px #FF0000;
}

/*
.track_item:nth-child(2n) {
	transform: rotate(3deg);
}

.track_item:nth-child(4n) {
	transform: rotate(1deg);
}
*/
.active_track {
	color: #ffffff !important;
	text-shadow: none;
}

.track_title {
	line-height: 100% !important;
	position: relative;
	display: block;
	cursor: pointer;
}

/*
.track_title:hover {
	color: #FFFFFF;
	background-color: #000000;
}
*/
.track_item.playing {
	color: #FF0000 !important;
	background-color: #FFFFFF;
	border-bottom: solid 1px #FF0000;
}
/*
.track_item.playing .track_title{
	color: #FFFFFF !important;
}
*/

span.track_title.icon-music-play:before,
span.track_title.icon-music-pause:before{
	font-size: 20px;
	margin-right: 2px;
	margin-top: -5px;
}

.user_playlist_add_track {
	font-size: 14px;
	width: 20px;
	height: 20px;
	background-color: #1db954;
	border-radius: 50%;
	line-height: 150%;
	text-align: center;
	position: absolute;
	display: none;
	transition: 0.3s;
	right: 5px;
	position: absolute;
	top: 50% !important;
	margin-top: -10px !important;
	cursor: pointer;

}

.user_playlist_add_track:hover {
	transform: scale(1.2, 1.2);
	background-color: #FFFFFF;
	color: #000000;
}

#select_album {
	/* display: none; */
}

#show_playlist {
	/* display: none; */
}

#buy_link_wrapper {
	position: absolute;
	right: 30px;
	bottom: 30px;
	z-index: 10;
}

.buy_link {
	display: table;
}


/* ---------- record player ---------- */

#record_player {
	height: 65vh;
	position: absolute;

	/* top: 10vh; */
	top: 50%;
	width: 120vh;
	background-image: url(images/site/record_player.png);
	background-size: contain;
	transform: translate(-50%, -50%);
	left: 50%;
	background-position: center center;
	transition: 1.0s;
	overflow: visible;
}

.record_player_onscreen {
	transform: translateX(-50%) !important;
}

#record,
#record_label {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#record_player img {
	width: auto;
	height: 100%;
	margin: 0 auto;
	position: relative;
	display: block;
}

#record_wrapper {
	position: absolute;
	height: 63vh;
	width:  63vh;
	left: 50%;
	top: 4.5%;
	z-index: 10;
	overflow: hidden;
	transition: 1.0s;
	transform: translateX(-50%) translateY(-134%);
}

.record_wrapper_playing {
	transform: translateX(-50%) translateY(0%) !important;
	/* transform: translateX(-50%) !important; */
}

#record {
	position: absolute;
	height: 100%;
	width:  100%;
	display: none;
	/*
	left: 50%;
	top:2.5%;
	z-index: 10;
	overflow: hidden;
	transition: 0.7s;
	border: solid 1px red;
	transform: translateX(-50%);
	*/
}

#record_vinyl {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

#record img {
	width: 100%;
	height: auto;
}

#record_label {
	position: absolute;
	width: 37%;
	height: 37%;
	top: 31.5%;
	left: 31.5%;
	display: block;
	overflow: hidden;
	border: 0;
	outline: 0;
	/*
	background-image: url(images/labels/00.png);
	background-position: center center;
	background-size: cover;
	*/
	border-radius: 50%;
	z-index: 10;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	background-color:  #ffffff;
}

#record_label_content {
	position: absolute;
	top: 60%;
	width: 90%;
	color: #000000;
}

#record_label_inner_overlay {
	background-image: url(images/site/noisy-texture-100x100-o7.000000000000001-d10-c-41a61f-t1.png);
	background-position: center center;
	background-repeat: repeat;
	background-size: 30%;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
}

#record_label_inner {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
	padding: 0%;
}

#record_label_inner_border {
	width: 92%;
	height: 92%;
	position: absolute;
	border-radius: 50%;
	border: solid 2px #000000;
	margin: 4% 0%;

}


#record_label_inner > div  {
	transform: translateX(-50%);
	left: 50%;
}

.label_album_logo {
	font-size: 5vh;
	margin-top: 15%;
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	color: #FFFFFF !important;
	background-size: contain;
}

#label_artist_logo {
	background-image: url(images/site/inxs_logo.svg);
	width: 25%;
	height: 30%;
	background-position: center top;
}

#label_label_logo {
	background-image: url(images/site/petrol_logo.svg);
	width: 100%;
	height: 100%;
	height: 3vh;
	position: relative;
	margin: 2% auto;
	background-position: center center;

}

#label_album_title {
	font-size: 1.5vh;
	line-height: 110%;
	width: 80%;
	top: 25%;
	position: absolute;
}

#label_album_artist {
	font-size: 1vh;
	margin-top: 3%;
}

#label_album_label {
	font-size: 0.8vh;
	margin-top: 3%;
}

#label_album_lc {
	font-size: 0.5vh;
	width: 100%;
}


.label_img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border: 0;
	outline: 0;
}

#spindle {
	width: 2%;
	height: 2%;
	left: 49%;
	top: 49%;
	position: absolute;
	z-index: 100;
	border-radius: 50%;
	background-size: contain;
	background-position: center center;
	background-color: #000000;
}

.spindle_visible {
	background-image: url(images/site/record_spindle.png);
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7);
}

.record_spin {
	position: absolute !important;
	/* top: 10% !important; */
	-webkit-animation: rotating 1.8s linear infinite;
	-moz-animation: rotating 1.8s linear infinite;
	-ms-animation: rotating 1.8s linear infinite;
	animation: rotating 1.8s linear infinite;
}

@-webkit-keyframes rotating {
	from {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	} to {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-moz-keyframes rotating {
	from {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	} to {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-ms-keyframes rotating {
	from {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	} to {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotating {
	from {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	} to {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

#record_arm {
	overflow: hidden;
	z-index: 100;
	position: absolute;
	left: 69.2%;
	height: 100%;
	width: 100%;
	top: 1.5%;
	background: url(images/site/record_arm.png);
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(0deg);
	transition: 0.3s all;
	transform-origin: 12% 22.5%;
}

.record_arm_active {
	transform: rotate(20deg);

}

#record_arm img {
	height: 100%;
	width: auto;
}

#create_footer .btn {
	display: table;
}

#playing_album_packshot {
	width: 65vh;
	height: auto;
	border: solid 6px #FFFFFF;
	box-sizing: border-box;
	transform: rotate(-3deg);
	position: absolute;
	right: -25%;
	top: 5%;
	background-color: #FFFFFF;
}

/* ------------ Audio Player ------------ */

#audio_player {
	height: 30px;
	font-size: 12px;
	position: fixed;
	bottom: 0;
	left: 0px;
	right: 0px;
	z-index: 100;
	display: block;
	overflow: hidden;
	color: #e03134;
	background-color: rgba(0, 0, 0, 0.8);
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7);
}

.audiojs {
	background-image: none !important;
}

.audiojs .audio_title {
	font-size: 0.8rem;
}

#album_tracks_list > li.track_item.btn.playing {
	color: #000000;
	text-shadow: none;
}

.audiojs .progress {
	background:#ff0000;
}


/* ---------- User playlist ---------- */

#user_playlist {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	color: #FFFFFF;
	text-align: center;
}

#user_playlist_inner {
	position: absolute;
	width: 80vw;
	max-width: 1000px;
	max-height: 70vh;
	height: auto;
	z-index: 100;
	color: #000000;

	background-color: rgba(0, 0, 0, 0.7);
	/* background-image: url(images/site/crumpled-paper-transparent-tiled.png); */

	/*
	background-color: #1c1c1c;
	background-image: url(images/site/crumpled-paper-tiled-white.png);
	*/
	background-repeat: repeat;

	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

#playlist_close_btn {
	right: -20px;
	top: -20px;
}

.playlist_half {
	display: inline-block;
	width: 45%;
	vertical-align: top;
	max-width: 40vh;
	height: 70%;
	overflow: auto;
	position: relative;
}

.playlist_left {
	overflow: visible;
}

.playlist_right {
	overflow: auto !important;
	max-height: 50vh;
}

.user_playlist_description {
	margin: 10px;
	color: #FFFFFF;
}

#user_playlist_browser_warning {
	font-size: 10px;
	line-height: 90%;
	display: block;
}

#playlist_scroller {
	max-height: 50vh;
	height: auto;
	width: 100%;
}

#user_playlist_tracks {
	width: 90%;
	margin: 0 auto;
	max-height: 100%;
	position: relative;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.playlist_track {
	background-color: #ffffff;
	display: block;
	margin: 5px 10px;
	position: relative;
	padding: 10px;
	background-image: url(images/site/crumpled-paper-transparent-tiled.png);
	vertical-align: top;
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
	vertical-align: top;
}

.drag_handle {
	top: 0;
	left: 0;
	position: relative;
	color: rgba(0, 0, 0, 1);
	float: left;
}

.drag_handle .icon-nav-arrow-up {
	margin-top: -10px;
}

.drag_handle .icon-nav-arrow-down {
	margin-top: -10px;
}

.playlist_track_title {
	white-space: nowrap;
	display: block;
	overflow: hidden;
	position: relative;
	text-overflow: ellipsis;
	vertical-align: top;
	position: relative;
	display: inline-block;
	max-width: 80%;
}

.playlist_track_btn {
	transition: 0.3s;
}

.playlist_track_btn:hover {
	color: #6e6e6e;
}

.playlist_remove_track {
	position: relative;
	right: 0px;
	cursor: pointer;
	float:right;
	z-index: 100;
}

#playlist_btns {
	display: none;
}

#user_playlist_description_drag {
	display: none;
}

.playlist_btn_wrapper {
	display: inline-block;
}

.playlist_btn {
	display: none;
}

#playlist_share_btns {
	display: none;
	margin-bottom: 10px;
}

#playlist_share_btns p {
	font-size: 20px;
	padding: 0 10px;
}

.playlist_share_btn {
	font-size: 40px;
	transition: 0.3s;
	cursor: pointer;
	color: #000000;
	padding: 0 5px;
	margin: 0 10px;
	display: inline-block;
	background-image: url(images/site/crumpled-paper-transparent-tiled.png);
	background-color: #FFFFFF;
	width: 50px;
	height: 50px;
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	line-height: 120%;
}

.playlist_share_btn:hover {
	color: #000000;
	transform: scale(1.1,1.1)
}

#playlist_main_link a {
	display: block;
}

#user_playlist #start_button {

}

#playlist_img_elements {
	display: none;
}

#playlist_img {
	width: 98%;
	display: block;
	overflow: hidden;
	margin: 5px auto;
	border: solid 2px white;
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
}

#playlist_img_btn {
	display: block;
}



/* ---------- Saved Playlist screen ---------- */

#shared_playlist {
	left: 10vw;
	top: 10vh;
	width: 80vw;
	height: 80vh;
	z-index: 10;
	color: #FFFFFF;
	pointer-events: none;
}


/* ---------- Error screen ---------- */

#error_screen {
	opacity: 0;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	width: 250px;
	pointer-events: none;
	z-index: -1;
	transition: 0.3s;
	background-color: rgba(0, 0, 0, 0.8);
	text-align: center;
	color: #FFFFFF;
	padding: 25px;
}

.error_screen_visible {
	opacity: 1 !important;
	z-index: 1000 !important;
}

#error_logo {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #FFFFFF;
	border-radius: 50%;
	margin: 20px auto;
	position: relative;
	color: #000000;
	font-size: 30px;
    line-height: 160%;
}


/* ---------- Footer ---------- */

#inxs_content_wrapper #footer {
	position: absolute;
	bottom: 5px;
	width: 100%;
	text-align: center;
	font-size: 14px;
}

#inxs_content_wrapper #policy {
	line-height: 120%;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	color: #FFFFFF;
}

#inxs_content_wrapper #policy a {
	margin: 0 4px;
	color: #FFFFFF;
}


/* ---------- Media Queries ---------- */

/* iPad portrait & less ---------- */
/*@media only screen
and (max-width : 768px) {
*/

/*
@media only screen and (max-device-width: 1024px) and (orientation:portrait) {

	#rotate_indicator {
		display: block;
	}

	#login_button {
		display: none !important;
	}
}

@media only screen
and (max-device-width: 1024px)
and (orientation:landscape) {

	#page_wrapper {
		left: 0%;
		top: 0%;
		width: 100vw;
		height: 72vh;
		overflow: visible;
		position: absolute;
	}

	#rotate_indicator {
		display: none;
	}

	.btn {
		font-size: 10px;
		padding: 8px 12px 6px
	}

	#home_description {
		font-size: 10px;
	}

	#home_logo {
		height: 15vh;
		margin-top: 12vh;
	}

	.page_title {
		font-size: 10px;
	}

	#play_album_btn_wrapper {
	}

	#footer {
		font-size: 8px;
	}

	#album_tracks_wrapper {
		font-size: 10px;
		width: 180px;
	}

	#buy_link_wrapper {
		font-size: 12px;
	}

	#play_album_title_wrapper {
		font-size: 16px;
	}

	.track_item {
		margin: 5px 0;
		padding-right: 30px;
		padding-top: 4px;
		padding-left: 12px;
		padding-bottom: 6px;
	}

	.track_title {
		line-height: 0;
	}

	#play_album_desc {
		line-height: 100%;
		color: #000000;
		background-color: transparent;
		box-shadow: none;
	}

	#buy_link {

	}

	.main_title {
		font-size: 16px;
	}

	.user_playlist_description {
		font-size: 12px;
		margin: 0;
	}

	.playlist_left {
		max-width: 30vh;
	}

	.playlist_right {
		max-width: 60vw;
	}

	.playlist_track_title {
		font-size: 12px;
		max-width: 70%;
	}

	.playlist_btn_wrapper .btn {
		margin: 0;
	}
}
*/

/* iPad portrait & less ---------- */
@media only screen
and (max-width : 768px) {

	#home_record {
		position: absolute;
		transform: translate(-50%, -50%) rotate(-3deg);
		left: 55%;
		top: 50%;
		height: 70vh;
		width: 70vh;
		background-position: center center;
		background-size: contain;
	}

	#home_content {
		bottom: 10%;
	}

	#home_description {
		font-size: 16px;
		width: 90%;
	}

	#home_title.btn {
		font-size: 30px;
	}

	#login_button {
		font-size: 30px;
	}

	.bg_element {
		display: none;;
	}

	.page_title {
		font-size: 20px;
		width: 80%;
	}

	.swiper-slide {
		width: 50vh;
		height: 50vh;
		margin: auto;
	}

	.inner img {
		border-width: 4px;
		width: auto;
		height: 100%;
		margin: 0 auto;
	}

	#record_player {
		height: 50vh;
		position: absolute;
		/* top: 30vh; */
		width: 100vh;
		background-size: contain;
		/* transform: translateX(30%); */
		left: 50%;
		background-position: center center;
		transition: 1.0s;
	}

	#record_wrapper {
		height: 50vh;
		width:  50vh;
		top: -25%;
	}

	.record_wrapper_playing {
		transform: translateX(-50%) translateY(25%) !important;
	}

	#playing_album_packshot {
		display: none;
	}

	#album_tracks_wrapper {
		max-width: 170px;
		font-size: 15px;
		max-height: 70vh;
	}

	#inxs_content_wrapper .btn {
		font-size: 20px;
	}

	#play_album_title_wrapper {
		/* margin-top: -40%; */
		font-size: 26px;
	}

	.track_item {
		padding: 5px;
		padding-right: 30px;
		margin: 5px;
	}

	#buy_link_wrapper {
		width: 100%;
		top: 10vh;
		z-index: 1;
		right: 0;
		text-align: center;
		pointer-events: none !important;
	}

	#buy_link_wrapper .btn {
		display: inline-block;
		font-size: 16px;
		margin: 0 10px;
		pointer-events: auto;
	}

	#play_album_desc_wrapper {
		margin-top: 10px;
	}

	#show_playlist.btn {
		display: none !important;
	}

	#play_album_desc {
		line-height: 100%;
		color: #000000;
		box-shadow: none;
		background-color: transparent;
		background-image: url(images/site/crumpled-paper-tiled-white.png);
	}

	#create_footer {
		bottom: 1%;
		width: 100%;
	}

	#create_footer .btn {
		display: inline-block;
		width: auto;
		font-size: 16px;
	}

	#bg_element_04 {
		display: block;
		width: 40vh;
		height: 40vh;
		top: -10%;
		left: auto;
		right: -30%;
		background-image: url(images/site/bg_element_04.png);
		transform: rotate(180deg);
	}

	#create_footer .btn:after {
		display: none !important;
	}

	#playlist_title {
		font-size: 20px;
	}

	.playlist_left {
		display: none;
	}

	.playlist_half {
		width: 100%;
		overflow: hidden;
		max-height: 40vh;
		overflow: auto;
	}

	.drag_handle {
		margin-top: 3px
	}

	.playlist_track {
		font-size: 18px;
	}

	.user_playlist_description {
		font-size: 16px;
		margin: 10px 5px 5px;
	}

	#user_playlist_inner {
		max-height: 80vh;
	}

	#hide_tracks {
		position: fixed;
		text-align: center;
		z-index: 10000;
		padding: 7px 5px 2px;
		transform: rotate(90deg) translateX(50%);
		transform-origin: 0% 100%;
		top: 90%;
		box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.4);
		transition: 0.3s;
		cursor: pointer;
		background-color: #ffffff;
		background-repeat: repeat;
		width: auto;
		color: #000000;
		font-size: 16px;
		line-height: 90%;
	}

	#hide_tracks:hover {
		/*
		color: #e03134;
		background-color: #f7f6ee;
		*/
	}

	#footer {
		font-size: 8px;
	}

	#social_icons {
		margin-top: 10px;
	}

	.footer_btn {
		margin: 0 4px;
	}

}


/* iPhone 8+ portrait & less ---------- */
@media only screen
and (max-width : 414px) {

}

/* iPhone 5 & less ---------- */
@media only screen
and (max-width : 320px) {

}

/* iPads (portrait and landscape) ---------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

}

/* iPads (landscape) ---------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

}

/* iPads (portrait) ---------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

}