body {
	width: 320px;
	height: auto;
	font-size: 12px;
	margin: auto;
	display: block;
	white-space: nowrap;
}
.nav {
	text-align: center;
	border-radius: 0 0 15px 15px;
	opacity: 1.0;
	margin: 0px auto 0 auto;
	font-family: sans-serif;
	font-size: 20px;
	font-weight: 700;
	padding: 3px;
	z-index: 950;
	left: auto;
	right: auto;
	position: fixed;
	width: 320px;
}
.nav > h4{
	margin: 5px;
	letter-spacing: 3px;
	font-weight: 700;
	font-family: sans-serif;
}
.container {
	margin: 50px auto 5px auto;
	border-radius: 15px;
	border: 3px double #f0f0f0;
	clear: both;
}
.opacity, .slider {	
	-webkit-appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 5px;   	
	background-color: #d3d3d3;	
	outline: none;	
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}
.opacity::-webkit-slider-thumb, .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%; 
	cursor: pointer;
	margin: -5px;
	opacity: 0.7;
}
.opacity::-miz-range-thumb, .slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	cursor: pointer;
}
.slider:nth-child(1)::-webkit-slider-thumb{
	background-color: #ef4646;
}
.slider:nth-child(2)::-webkit-slider-thumb{
	background-color: #46ef46;
}
.slider:nth-child(3)::-webkit-slider-thumb{
	background-color: #5b9afa;
}
.opacity::-webkit-slider-runnable-track,
.slider::-webkit-slider-runnable-track {
	outline: none;
	height: 15px;
	margin: auto;
	opacity: 0.7;
	width: 100%;
}
.slidecontainer > * {
	display: block;
	margin: 20px 0 20px 0;
}
#generate {
	width: 90%;
	letter-spacing: 4px;
	font-weight: 700;
	margin: 0 5% 0 5%;
}

/**Inputs**/
.hex, .decimal, #opacity-input{
	width: 50px;
	font-size: 15px;
	text-transform: uppercase;
	border-radius: 7px;
	text-align: center;
	border: 1px solid #e1e1e1;
}

.scolor {
	width: 50px;
	text-align: center;
	float: right;
	margin: auto 10px auto 0;;
	font-weight: 500;
	font-family: monospace;
	border-radius: 4px;
	letter-spacing: 2px;
}


/****Bar Graph*****/

#main-bar {
	width: 98%;
	margin: auto;
	height: 13px;
	z-index: 99;
	border-radius: 15px;
}
#sub-bar {
	width: 100%;
	height: 100%;
	z-index: -9;
	overflow: hidden;
	border-radius: 15px;
	display: flex;
	font-size: 0;
	background: #f0f0f0;
}
#sub-bar > span {
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	display: inline-block;
}
#sub-bar > span:nth-child(1){
	background-color: rgba(205, 0, 0, 0.7);
}
#sub-bar > span:nth-child(2){
	background-color: rgba(0, 205, 0, 0.7);
}
#sub-bar > span:nth-child(3){
	background-color: rgba(0, 0, 205, 0.7);
}