#pixar{
display:block;
color: black;
width:25%;
height:100px;
background:#e6e7e8;
text-align:center;
line-height:100px;
font-size:20px;
text-decoration: none;
font-family:'Oswald', serif;
float:left;
cursor:pointer;

	}


#pixuv{
display:block;
color: black;
width:25%;
height:100px;
background:#e6e7e8;
text-align:center;
line-height:100px;
font-size:20px;
text-decoration: none;
font-family:'Oswald', serif;
float:left;
cursor:pointer;

	}
	
	#pixdrive{
display:block;
color: black;
width:25%;
height:100px;
background:#e6e7e8;
text-align:center;
line-height:100px;
font-size:20px;
text-decoration: none;
font-family:'Oswald', serif;
float:left;
cursor:pointer;

	}
	#pixar img{
	width:70%;
height:auto;
	}
#pixuv img{
	width:70%;
	height:auto;
	}
	#pixblu img{
		width:70%;
	height:auto;
		}
		#pixdrive img{
		width:70%;
	height:auto;
		}
#pixblu{
display:block;
color: black;
width:25%;
height:100px;
background:#e6e7e8;
text-align:center;
line-height:100px;
font-size:20px;
text-decoration: none;
font-family:'Oswald', serif;
float:left;
cursor:pointer;

	}
.prologo{
display:block;
color: black;
width: 9.09%;
height:75px;
background:#e6e7e8;
text-align:center;
line-height:75px;
font-size:20px;
text-decoration: none;
font-family:'Oswald', serif;
float:left;
cursor:pointer;
	}
.prologo:hover{
	background:#CCC
	}
.prologo img{
	width:75%;
	height:auto
	}
#prohimg{
	width:20%;
	height:auto
	}
#pixar:hover{
	background:#D4E05A;

	}

#pixuv:hover{
	background:#BCD75E;

	}
#pixblu:hover{
	background:#75BEE9;

	}
	
	#pixdrive:hover{
	background:#D2A3CB;

	}

#pixarcont{
	visibility:visible;
	margin-top:50px;
	height:auto

	}

#blurg{
	float:left;
	width:100px;
	height:auto;
	padding:10px;		
	cursor:pointer;
	text-align:center;
	
	}
#waterg{
	float:left;
	width:100px;
	height:auto;
	padding:10px;		
	cursor:pointer;
	text-align:center;
	margin-left:10px;
	
	}
#sctg{
	float:left;
	width:100px;
	height:auto;
	padding:10px;		
	cursor:pointer;
	text-align:center;
	margin-left:10px;
	}
#dustg{
	float:left;
	width:100px;
	height:auto;
	padding:10px;		
	cursor:pointer;
	text-align:center;
	margin-left:10px;
	}
#uvg{
	float:left;
	width:100px;
	height:auto;
	padding:10px;		
	cursor:pointer;
	text-align:center;
	margin-left:10px;
	}
#blug{
	float:left;
	width:100px;
	height:auto;
    padding:10px;		
	cursor:pointer;
	text-align:center;
    margin-left:10px;
	
	}

	
#boxeffect{
	width:300px;
	height:15px;
	background:#09F;
	
	}
#button1, #button2, #button3, #button4 {
	width:auto;
	height:50px;
	background:#e6e7e8;
	float:left;
	margin-left:20px;
	line-height:10px;
	text-align:center;
	padding:10px;
	cursor:pointer
	}
#vals{
	background:black;
	color:white;
	width:100px;
	height:30px;
	text-align:center;
	padding:0px 20px
	}
#vals option{
		background:black;
	color:white;
	width:100px;
	height:100px;
	padding:20px
	}

.top{
	width: 200px;
    height: 100px; /* as the half of the width */
    background-color: #09F;
    border-top-left-radius: 100px;  /* 100px of height + 10px of border */
    border-top-right-radius: 100px; /* 100px of height + 10px of border */
    border: 0px solid #09F;
	border-top:50px solid white;
	margin-left:0px;
	float:left;	

}
.rangeslider{
	-webkit-appearance: none;
  width: 25%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  float:left
	}
.rangeslider:hover {
  opacity: 1;
}
.rangeslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}
.rangeslider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}
.rangecontainer{
	width:100%;
	height:auto;
	}
#rangeres{
	float:left;
	width:200px;
	height:auto;
	margin-left:20px
	}
#rangeval{
	float:left;
	width:50px;
	height:auto;
	margin-left:20px
	}

#shape{
	width:100px;
	height:400px;
	background:#06F;
	margin-top:-25px

	}
#shapeC{
	width:300px;
	height:470px;
	background:white;
	border-radius:100%;
	position:relative;
	left:22px;
	top:-32px;

	}
#shapeval{
	position:relative;
	z-index:999;
	background:black;
	color:white;
	width:100px;
	height:40px;
	padding:0px 20px;
	left:20px;
	top:20px
	}
#vales{
	background:black;
	color:white;
	width:100px;
	height:40px;
	padding:0px 20px;
	}
.clock{
	width:300px;
	height:300px;
	position:relative;
	}

.clock img{
	position:absolute

	}
#hour{

	}

.mainstep{
	width:25%;
	height:auto;
	background:red

	}
.mainimg{
	margin-left:5%;
	float:left;
	margin-top:20px
	}
.opt{
	width:25%;
	height: auto;
	cursor:pointer;
	float:left;

		
	}
	table tr td {
 border:1px solid black; 
 width:5%;
 padding:20px;
}
	
.standard{
	width:25%;
	height: auto;
	cursor:pointer;
	float:left;

	}
.imgarrow{
	width:35%;
	height: auto;
	float:left;
	margin-left:25px;
	
	}
.maindiv{
	width:96%;
	height:auto;

	
	}

	

	.optdiv{
	width:32%;
	height:auto;
	float:left
	}