body {
	text-align: left;
	color: #FFF;
	background-image: linear-gradient(to bottom, #4D4D4D, #333333 4%);	
	background-attachment: fixed;
	overflow:hidden;
	margin:auto;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}
.img{

}
.listk{
	position:absolute;
	padding-right:4px;
	border: #400080 1px solid; 
	width: 52px;
	color:#FFFFFF;
	right:175px;
	top:0px;
	z-index:-999;
	text-align:right;
	font-size:12px;
	margin-top:2px;
	padding-top:1px;
}
.upload_bt{
	position:absolute;
	padding-left:3px;
}

img.banner{
	position:absolute;
	margin-top:-7px;
	z-index:-999;
	left:65px;
}
img.prv{
	margin-top:-10px;
	z-index:-999;
	height:28px;
	width:28px;
}
img.rnd{
	margin-top:-15px;
	z-index:-999;
	height:38px;
	width:50px;	
}
img.nxt{
	margin-top:-10px;
	z-index:-999;
	height:28px;
	width:28px;	
}
.info{	
	text-align:center;
	position:relative;
	margin-top:-28px;
	z-index:-999;
	}
.pla{
	float: right;
	padding-right:5px;
	}
	img.pause{
		padding-right:7px;
	}

hr.offset{
	margin-top:15px;
	border: 1px solid #400080;
}
#styling_sh{
	text-align:center;
	padding:5px;
	width:250px; 
}
#styling{
 	padding:5px;
	width: 200px;
}
.upload{
	background-image: url("infobox.png");
    color: #333;
    border:2px solid #400080;
	background-attachment: fixed;
	position:absolute;
	margin-top:2px;
	margin-left:55px;
	border: 0px solid #400080;
	width: 200px;
}
.upload_text{
	 color: #FFF;
	background-attachment: fixed;
	position:absolute;
	margin-top:10px;
	margin-left:55px;
	z-index:-998;
}
.close{

	float: right;
	margin-right:1px;
	border: 1px solid #400080;
	margin-top:-2px;
	margin-right:8px;
	margin-bottom: 2px;
}


.slider_hold {
	float: right;
	right:325px;
	position: absolute;
}

#slider {
	width: 200px;
	height: 27px;
	position: absolute;
	margin: 20px;

}

#slider .bar {
	width: 188px;
	height: 5px;
	background: #333;
	position: relative;
	top: 3px;
	left: 5px;	
	background: #333333;
	background: -moz-linear-gradient(left, #333333 0%, #666666 50%, #4D4D4D 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#666666), color-stop(50%,#666666), color-stop(100%,#4D4D4D));
	background: -webkit-linear-gradient(left, #333333 0%,#666666 50%,#4D4D4D 100%);
	background: -o-linear-gradient(left, #333333 0%,#666666 50%,#4D4D4D 100%);
	background: -ms-linear-gradient(left, #333333 0%,#666666 50%,#4D4D4D 100%);
	background: linear-gradient(left, #333333 0%,#666666 50%,#4D4D4D 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#4D4D4D',GradientType=1 );	
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}

#label_ds2{
font-style:italic;
	font-size:12.5px;
	color:#CCCCCC; 
	}
#label_ds{
	font-size:9.5px;
	color:#CCCCCC; 
	}
#label{
	font-size:9.5px;
	color:#FFFFFF; 
	}	
#slider .highlight {
	height: 2px;
	position: absolute;
	width: 188px;
	top: 16px;
	left: 7px;		
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	background: rgba(255, 255, 255, 0.25);
}

input[type="range"] {
	-webkit-appearance: none;
	background-color: black;
	height: 2px;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	position: relative;
	top: 0px;
	z-index: 1;
	width: 11px;
	height: 11px;
	cursor: pointer;
	-webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
	box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(50%,#4D4D4D), color-stop(51%,#666666), color-stop(100%,#333333));
}

input[type="range"]:hover ~ #rangevalue,input[type="range"]:active ~ #rangevalue {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	top: -75px;
}

/* Tool Tip */
#rangevalue {
	color: white;
	font-size: 10px;
	text-align: center;
	font-family:  Arial, sans-serif;
	display: block;
	color: #fff;
	margin: 50px 0;
	position: relative;
	left: 100%;
	padding: 6px 12px;
	border: 1px solid black;

	-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
	box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222931), color-stop(100%,#181D21));

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	width: 18px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	top: -95px;
}

img.pframe{
	width:100%;
	height:100%;
	object-fit:  contain;	
}

.picbox{
	border:1 px solid;
	height: 92%;
	width: 100%;
	margin-top:5px;
	top:0;
	left:0;
}

.box2{	
	width:100%; 
	height:35px;	
	float:center;
	padding-top:10px;
	z-index:99;
}
	.box3{
		background-color: #666666;
		color:#FFFFFF;
		position: fixed;
		bottom: 0;
		width:100%; 
		margin-left:0;
		height:25px;
		border: 1px #400080 solid;
		padding-bottom:20px;
		padding-top:10px;
		text-align:center;	
		width:100%; 
		opacity: 0.2;
		filter: alpha(opacity=20);
		transition: opacity 0.2s ease-in-out;
	}
	.show{
		opacity: 1; 
		filter: alpha(opacity=100);
		pointer-events: all;
	}
	.parent{
		width: 100%;
		height: 100vh;
	}

a.welcome{
	position: fixed;
	bottom:0;
	padding-left:3px;
	padding-bottom:2px;
	float:center;
	text-align:center;
	z-index:100;
}

a:link{
	color:#FFFFFF;
	text-decoration:none;
	text-align:right;
}
a:visited{
	color:#FFFFFF;
	text-decoration:none;
}
a:hover{
	color:#CCC;
	text-decoration:none;
}
a:click{
	color:#CCC;
	text-decoration:none;
}

/* scrol bars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  border: 3px outset #FFFFFF;
  border-radius: 0.2em;

}
::-webkit-scrollbar-thumb:hover {
  background: #745BCA;
}
::-webkit-scrollbar-thumb:active {
  background: #745BCA;
}
::-webkit-scrollbar-track {
  background: #FFFFFF;
  border: 0px none #ffffff;
  border-radius: 0.2em;

}
::-webkit-scrollbar-track:hover {
  background: #FFFFFF;
}
::-webkit-scrollbar-track:active {
  background: #FFFFFF;
}
::-webkit-scrollbar-corner {
  background: transparent;
}	
/* Mobile */
@media only screen and (max-width: 1080px) {
	body{overflow-y:scroll;font-size:32px;width:100%;margin:0;padding-bottom:15px;background-size: 100% auto;}
	
	.box3{
		position:fixed;
		bottom:0px;
		left:0px;
		width:290px;
		height:59px;
		z-index:999;
		opacity: 0.7;
		filter: alpha(opacity=70);
		pointer-events: all;
	}

	.show{
		opacity: 1; 
		filter: alpha(opacity=100);
		pointer-events: all;
	}
	img.nxt{
		height:55px;
		width:auto;
	}
	img.rnd{
		height:55px;
		width:auto;
	}
	img.prv{
		height:55px;
		width:auto;
	}
	
	.info{
		position:absolute;
		top:80px;
		right:101px;
		text-align:center;
	}

	img.pause{
		padding-top:5px;
		height:75px;
		width:75px;
	}

	img.play{	
		padding-top:5px;	
		height:75px;
		width:75px;
	}

	.upload_bt{
		display:none;
	}
	a.welcome{
		font-size:12px;
		position:fixed;
		padding:3px;
		right:8px;
		text-align:right;
		width:100%;
	}	
	.box2{
		position:absolute;
		display:block;
		top:20px;
	}
	
	
	#slider{
		width:230px;
		text-align:left;
		height:55px;
		margin-top:3px;		
	}
	#label_ds{font-size:12px;}
	#label_ds2{font-size:12px;}
	#label{font-size:12px;}	
	#slider .bar {
		width: 200px;
		height: 10px;
		background: #333;
		position: relative;
		top: 12px;
		left: 5px;	
		background: #333333;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );	
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		border-radius: 40px;
	}	
	#slider .highlight {
	width: 200px;	
	top:32px;
	}
	input[type="range"]::-webkit-slider-thumb {
		width:30px;
		height:20px;
		-webkit-appearance: none;
		-webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
		-moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
		box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		border-radius: 40px;
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(50%,#4D4D4D), color-stop(51%,#666666), color-stop(100%,#333333));
	}	

	.listk{
		display:block;
		position:fixed;
		border:0px;
		left:2;
		font-size:24px;
		width:25%;
		z-index:1;
	}

	img.pframe{
		width:100%;
		height:100%;
		object-fit:  contain;	
	}

	.picbox{
		border:1 px solid;
		height: 92%;
		width: 100%;
		margin-top:-10px;
		top:0;
		left:0;
	}


	.dicefix{
		margin-top:5px;
	}	
}