


html {
  	height: 100%;
  	width: 100%;
	overflow-x:  hidden;
	overflow-y:  hidden;
}


body {

	color: #000;
	padding: 0px;
	font-family: Helvetica, sans-serif;
	font-size:13px;
	text-align:center;
	background-color: #fff;
	margin: 0px;
	font-size: 20px;

	height: 100%;
  	overflow-x:  hidden;
  	overflow-y:  hidden;




  -webkit-overflow-scrolling: touch;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* Hide the number input */
/*.full-width-slider .ui-slider #slider {
    display: none;
}*/
.ui-slider{
	width: 100%;
	padding:0px;
}
.full-width-slider .ui-slider-track {
    /*margin-left: 15px;*/
	width: 100%;
	padding:0px;
}

#music-slider{
	position: fixed;
	bottom: 20px;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	height: 60px;
}

#shopping-overlay{

	position: fixed;
	background: #fff;
	width: 90vw;
	height: 90vh;
	z-index: 4;
	left: 5vw;
	top: 5vw;
	box-shadow: 0px 0px 10px #888888;

}

#shopping-overlay-x{
	width: 30px;
	height: 30px;
	right: 5vw;
	top: 5vw;
	position: fixed;
	margin-right: -15px;
	margin-top: -15px;
	z-index: 5;

}

#shopping-overlay-x img{
	width: 30px;
	height: 30px;
	cursor: pointer;

}

#shopping-overlay-buy-button{
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -55px;

}

#shopping-overlay-buy-button {
	-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
	box-shadow:inset 0px 1px 0px 0px #bee2f9;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf));
	background:-moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:-webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:-o-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:-ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf',GradientType=0);
	background-color:#63b8ee;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #3866a3;
	display:inline-block;
	cursor:pointer;
	color:#14396a;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #7cacde;
}
#shopping-overlay-buy-button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee));
	background:-moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:-webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:-o-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:-ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee',GradientType=0);
	background-color:#468ccf;
}
#shopping-overlay-buy-button:active {
	position:relative;
	top:1px;
}



#logo {
	position: fixed;
	z-index: 3;
	top: 20px;
	left: 20px;
	width: 300px;
	height: 300px;
}

#video-gif, #video {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
}

.cont{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}



#overlay{
	position: absolute; top: 20px; left: 20px; z-index: 3; width: 100vw; text-align: center;

}
#store-items-holder{
	position: relative;width: 767px;
	margin: 0px auto;
	letter-spacing: 5px;

}


#store-holder{
	position: absolute;
	z-index: 3;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-align: left;
	pointer-events: none;

}

#coming-soon{
	position: fixed;

	left: 38%;
	width: 200px;
	margin-left: -100px;
	color: black;
	text-align:center;
	height: 40px;
	margin-top: -20px;
	top: 50%;
	font-size: 30px;
	display: none;
}


#store-info{
	position: absolute;
	z-index: 2;
	top:25vh;
	width: 470px;
	right: 20px;
	background: #fff;
	border: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	pointer-events:auto;


}
.cents{
	position: absolute;
	display: inline-block;
	font-size: 10px;
	margin-top: 2px;
}
.store-title-holder{
	position: absolute;
	display: inline-block;
	margin-top: -30px;
}
.store-title-active, .store-title{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	position: relative;
	display: block;
	float: left;

	height: auto;
	cursor: pointer;
	padding:20px;
	padding-left: 10px; /*16px;*/
	padding-right:10px; /*16px;*/
	color: #d2d2d2;
	border-left: solid thin #000;

	/*color: rgba(210,210,210,0);*/
	/*
	color: rgba(0,0,0,0);
	-webkit-text-stroke-width: 1px;
   	-webkit-text-stroke-color: #d2d2d2;
	*/


}
.store-title-active:hover, .store-title:hover{

}
.store-title-active{
	color: #000;


}

.store-item{
	margin-top: -1px;
	padding: 20px;

	border-top: solid thin #000;
}

.store-model-code{
	font-size: 12px;
	color: #afafaf;
	letter-spacing: 2px;
	margin-bottom: 20px;
}
.store-price{
	letter-spacing: 2px;
	margin-bottom: 20px;
}
.store-desc{
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 20px;

}
.store-buy-info{
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 20px;
}
.store-option{
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

#store-item-hair{
	margin-left:60px;
}
#store-item-phone{
	margin-left: -110px;
}
.clear{
	clear: both;
}
#loader{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 6;
	background: #fff;
}
#loader-spinner-holder{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 50%;
	width: 100px;
	height: 100px;
	margin-left: -40px;
	margin-top: -40px;

}
#loader-spinner {
  border: 5px solid #ffffff;
  border-radius: 50%;
  border-top: 5px solid black;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.icon-holder{
	text-align: center;
	width: 24%;
	height: 60px;
	float: left;
	opacity: 1.0;

}

#me-store-item .icon-holder{
	width: 49%;

}

#music-store-item .icon-holder{

}

.pn{
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}
.icon-holder a img{
	height: 100%;
	width: auto;
}
.icon-holder:hover{
	/*filter: invert(100%);*/
	filter: blur(2px);

}
#hair-store-option{
	background: white;
	width: 100px;
	padding: 5px;
	font-size: 16px;
	line-height: 1;
	border: 1px solid black;
	border-radius: 0px;
	height: 34px;
	-webkit-appearance: none;
}

#black-store-option-box{
	display: inline-block;
	position: absolute;
	width: 34px;
	height: 34px;
	background-image: url(../../assets/icons/arrow.jpg);
	pointer-events: none;
	margin-left: 66px;
}






/*

playlist

*/






.music-container {
    font-family: arial, helvetica, sans-serif;
    font-size: 1em;
    margin: 0 auto;
    width: 400px;
    height: 800px;
    display: none;
    z-index: 2;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top:-400px;
    margin-left:-400px;

    padding-top:0px;
	padding-left:0px;
	padding-right:0px;


}
.music-player {
	height: 60px;
	margin: 0;
	position: absolute;
	display: block;
  	width: 100%;
}

.large-toggle-btn {

	float: left;
	font-size: 1.5em;
	width: 50px;
	height: 50px;
	margin: 0 10px 0 0;
	overflow: hidden;
	padding: 5px 0 0 0;
	position: relative;
	text-align: center;
	vertical-align: bottom;
	cursor: pointer;
	cursor: pointer;
	display: inline-block;
	position: relative;
	top: 0px;
}


.large-play-btn img, .large-pause-btn img{

	height: 50px;

	cursor: pointer;
}
.large-play-btn img{
	content: url(../../assets/icons/svg/playbtn.svg);
}
.large-pause-btn img{
	content: url(../../assets/icons/svg/pausebtn.svg);
}


.info-box {
	bottom: 10px;
	left: 65px;
	position: absolute;
	top: 15px;
}
.track-info-box {
	float: left;
	font-size: 12px;
	margin: 0 0 6px 0;
	visibility: hidden;
	width: 400px;
	text-align: left;
}
.track-title-text {
	color: #000;
	display: inline-block;
}
.audio-time {
	display: inline-block;
	padding: 0 0 0 5px;
	width: 80px;
}

.progress-box {
	float: left;
	min-width: 270px;
	position: relative;
}
.progress-cell {
	height: 12px;
	position: relative;
}
.progress {
	background: #000;
	height: 8px;
	position: relative;
	width: auto;
}
.progress-buffer {
	background: #000;
	height: 100%;
	width: 0;
}
.progress-indicator {
	background: #fff;
	border-radius: 0px;
	cursor: pointer;
	height: 10px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: -1px;
	width: 22px;
}

.controls-box {
	bottom: 10px;
	left: 350px;
	position: absolute;
}
.disabled {
  opacity: : 0.5;
  cursor: default;
}

.previous-track-btn {
	cursor: pointer;
	display: inline-block;
}
.next-track-btn {
	cursor: pointer;
	display: inline-block;
}

.next-track-btn img, .previous-track-btn img {

	height: 10px;

}

.next-track-btn img {

	content: url(../../assets/icons/svg/next.svg);
}

.previous-track-btn img{
	content: url(../../assets/icons/svg/prev.svg);

}

#music-player-track-img{
	width: 100%;
	display: block;
	text-align: center;
}

#music-player-track-img img{
	width: 70%;
	/*content:url(../../assets/playlistimgs/album.jpg);*/
}


.play-list {
	position: absolute;
	display: block;
	margin-left: 10px;
	width: 100%;
	margin-top:80px;
}
.play-list-row {
	display: block;
	margin: 10px 0;
	width: 100%;
	text-align: left;
}
.playlist-track {
	color: #000;
	text-decoration: none;
}
.playlist-track:hover {
	text-decoration: underline;
	color: #000;
}

.small-toggle-btn {

	cursor: pointer;
	display: inline-block;
	height: 20px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	text-align: center;
	vertical-align: middle;
	width: 20px;

}

.small-play-btn {
	display: inline-block;
}

.small-pause-btn {
	display: inline-block;
}


.small-play-btn img, .small-pause-btn img {
	width: 20px;
	height: 20px;
}

.small-play-btn img{
	content: url(../../assets/icons/svg/playbtn.svg);

}

.small-pause-btn img{
	content: url(../../assets/icons/svg/pausebtn.svg);

}


.track-number {
	display: inline-block;
}
.track-title {
	display: inline-block;
}
.playlist-track {
	text-decoration: none;
}
.playlist-track:hover {
	text-decoration: underline;
}
.track-title.active-track {
	font-weight: bold;
}

@media only screen and (max-height : 950px) {
	#music-player-track-img img{
		width: 20vh;
	}
	.music-container{
		margin-top: -45vh;
	}
}


@media only screen and (max-width : 1000px) {
	.music-container{
		left: 0%;
		margin-left: 20px;
	}
}

@media only screen and (max-width : 767px) {

	html{
		overflow-x:  hidden;
		overflow-y:  hidden;
	}

	body{
		overflow-x:  hidden;
		overflow-y:  hidden;
	}



	.music-container{
		width: 80%;
		top: 2%;
		left: 10%;
		margin-left: 0px;
		margin-top: 0px;

	}
	.progress-box {
		float: left;
		min-width: 150px;
		position: relative;
	}
	.controls-box {
		bottom: 21px;
		left: 220px;

	}
	.large-toggle-btn {
		width: 30px;
		height: 30px;
		margin: 5px 20px 0px 0px;
	}

	.large-play-btn img, .large-pause-btn img{
		height: 30px;
	}

	.info-box {
		left: 45px;
		top: 5px;

	}
	.play-list {
		font-size: 12px;
		margin-top:44px;
	}


	.small-toggle-btn {


		height: 15px;
		width: 15px;

	}

	.small-play-btn img, .small-pause-btn img {
		width: 11px;
		height: 11px;
	}

	.play-list-row {
		margin: 3px 0;

	}



	#music-player-track-img{
		width: 100%;
		display: block;
		text-align: center;
	}

	#music-player-track-img img{
		width: 50%;
		/* content:url(../../assets/playlistimgs/album.jpg); */
	}


  #store-title-holder-HOLD {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

	.store-title,.store-title-active{
		font-size:13px;
		padding:0px;
		padding-top:   8px;
		padding-bottom:8px;
		padding-left:  0;
		padding-right: 0;
		letter-spacing: 1px;
		margin: 0px;
		text-align: center;
	}
	#shopping-overlay{
		width:100vw;
		height:100vh;
		left:0vw;
		top:0vw;
	}
	#shopping-overlay-x{
		margin-right:0px;
		margin-top:0px;
	}
	#shopping-overlay-buy-button{
		bottom: 120px;
	}

	#hoodie-store-item-tab,
  #cd-store-item-tab{
		/*width: 23%; */
    width: 10%;
	}
	#phone-store-item-tab,
  #cassette-store-item-tab{
		width: 25%;
	}
  #phone-store-item-tab,
  #download-store-item-tab{
		width: 25%;
	}
	#hair-store-item-tab{
		width: 14%;
	}
	#music-store-item-tab{
		width: 14%;
	}
	#me-store-item-tab{
		width: 10%;
	}


	.custom-select {
  		position: relative;
  		width:150px;
	}

	#store-holder{
		top: 100vh;
		/*margin-top: -225px;*/
    margin-top: -200px;
		height: 200px;
		width: 100vw;

	}

	#store-info{
		padding-right: 0px;
		padding-left: 0px;

		top: 0%;
		width: 100vw;
		left: 0px;
		padding: 0px;
		border-bottom: none;
		border-left: none;
	}

	#store-items-holder{
		width: 100vw;
		left: 0px;
		margin:0px;
	}
	#coming-soon{
		left: 50%;
	}

	.icon-holder{
		text-align: center;
		width: 22vw;
		height: 60px;
		float: left;
		/*margin-right: 7vw;*/
	}

	#me-store-item .icon-holder{
		width: 40vw;
	}

	#music-store-item .icon-holder{
		/*margin-left: 6vw;*/
	}
	.icon-holder a img{
		height: 100%;
		width: auto;
	}
	#music-slider{
		position: fixed;
		top: 10px;
		left: 50%;
		margin-left: -100px;
		width: 200px;
	}

}


table.store-tabs {
	border-spacing: 0;
	border-top: none;
	width: 100%;x
}
table.store-tabs:nth-of-type(1) {
	border-bottom: solid thin #000;
}
table.store-tabs tr td {
	border-left: solid thin #000;
}
table.store-tabs tr td:nth-of-type(1) {
	border-left: none;
}
table.store-tabs tr td {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	color: #d2d2d2;
	padding: 20px 10px;
}
table.store-tabs tr td.active {
	color: #000;

}