@charset "utf-8";



	
	body{
		height:100%;
		width:100%;
		border:0;
		padding:0;
		margin:0;
		background-color:#444;
	}
	
	
	
	.title{
		position:relative;
		margin-left:auto;
		margin-right:auto;
		margin-top:2.5em;
		padding:.5em;
		text-align:center;
		font-size:2em;
		font-family:calibri;
		font-weight:bold;
		color:#fff;
		
	}
	
	.tag{
		position:relative;
		width:auto;
		margin-left:auto;
		margin-right:auto;
		padding:1em;
		
	}
	
	.tagget{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	margin-bottom:2em;
	}
	
	.plate{
		position:relative;
		height:auto;
		width:600px;
		margin-left:auto;
		margin-right:auto;
		background-color:#333;
		border-radius:.5em;
		box-shadow:.5em .5em 2em .1em #000;
		margin-bottom:3em;
		margin-top:3em;
		padding:1em;
		
	}
	
	.fielder{
		position:relative;
		margin-left:auto;
		margin-right:auto;
		margin-top:2em;
		margin-bottom:2em;
		padding:2em;
		width:90%;
		height:auto;
		background-color:#444;
		border-radius:1em;
		box-shadow:.5em .5em 2em #000;
	}
	
	.card{
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:90%;
		margin-bottom:3em;
	}
	

	#selector{
	position:relative;
		width:80%;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		font-size:1em;
		border-radius:.1em;
		border-color:#999;
		border-width:.1em;
		background-color:#B70003;
		color:white;
		height:3em;
		line-height:2em;
		padding:0;
		font-size:1.5em;
		
		
	}
	
		#selector2{
		position:relative;
		width:80%;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		font-size:1em;
		border-radius:.1em;
		border-color:#999;
		border-width:.1em;
		background-color:#B70003;
		color:white;
		height:3em;
		line-height:2em;
		padding:0;
		font-size:1.5em;
		
		
	}
	
	#selector3{
	position:relative;
		width:80%;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		font-size:1em;
		border-radius:.1em;
		border-color:#999;
		border-width:.1em;
		background-color:#B70003;
		color:white;
		height:3em;
		line-height:2em;
		padding:0;
		font-size:1.5em;
		
	}
	
	#selector4{
	position:relative;
		width:80%;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		font-size:1em;
		border-radius:.1em;
		border-color:#999;
		border-width:.1em;
		background-color:#B70003;
		color:white;
		height:3em;
		line-height:2em;
		padding:0;
		font-size:1.5em;
		
	}
	
	
	
	input{
		width:97%;
		margin-bottom:2em;
		text-align:center;
		font-size:1.25em;
		border-width:.10em;
		border-radius:.1em;
		line-height:2em;
		font-size:2em;
		overflow:hidden;
		margin-left:auto;
		margin-right:auto;
	}
	
	fieldset{
		text-align:center;
		font-size: 1.25em;
		border:none;
   		border-radius: 1em;
		font-family: "Calibri";
		font-weight: bold;
		width:auto;
		min-width:450px;
		border:none;
		
	}
	
	.custom-select {
		position:relative;
  text-align: center;
  text-align-last: center;
		font-size:1em;
		
}
	
	.exp{
		width:100%;
		text-align:center;
		font-style: italic;
		font-family:calibri;
		font-size:1.25em;
		margin-top:1em;
		color:#666;
	}

	#percent{
		width:80%;
		position:relative;
		margin-left:auto;
		margin-right:auto;
	}
	
	
	#mix{
		width:80%;
		position:relative;
		margin-left:auto;
		margin-right:auto;
	}
	
	.ringer{
	position:relative;
	padding:1em;
	margin-bottom:3em;
	width:auto;
	border-bottom: 5px solid white;
	}
	
	#ringer1{
	position:relative;
	padding:1em;
	margin-bottom:3em;
	width:auto;
	display:none;
	border-bottom: 5px solid white;
	}
	
	#ringer2{
	position:relative;
	padding:1em;
	margin-bottom:3em;
	width:auto;
	display:none;
	border-bottom: 5px solid white;
	}
	
	#ringer3{
	position:relative;
	padding:1em;
	margin-bottom:3em;
	width:auto;
	display:none;
	border-bottom: 5px solid white;
	}
	
	#ringer4{
	position:relative;
	padding:1em;
	margin-bottom:3em;
	width:auto;
	display:none;
	border-bottom: 5px solid white;
	}
	
	.ttot{
	border-bottom: 5px solid white;
	margin-bottom:2em;
	}
	
	.glycoler{
	position:relative;
	width:100%;
	}
	
	.totalimg{
	position:relative;
	width:100%;
	margin-bottom:1em;
	}
	
	#box2{
	position:relative;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	}
	
	#box22{
	position:relative;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	}
	
	#box3{
	position:relative;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	}
	
	#box4{
	position:relative;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	}
	
	#result{
	position:relative;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	}
	
	#result2{
	position:relative;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	}
	
	#result3{
	position:relative;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	}
	
	#result4{
	position:relative;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	}
	
	#total{
	width:80%;
	}
	
	.diameter{
	position:relative;
	width:80%;
	margin-bottom:1em;
	}
	
	.adderimg{
	position:relative;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1em;
	}
	
	#adder{
	width:80%;
	}
	
	.bluto{
	position:relative;
	padding:1em;
	width:90%;
	margin-bottom:1.5em;
	}
	
	button{
	font-size:1.5em;
	padding:.5em;
	font-family:calibri;
	background-color:#B70003;
	border:0;
	color:white;
	width:2em;
	margin:.2em;
	box-shadow:2px 2px 2px #333;
	cursor:pointer;
	}
	
	button:focus{
			background-color:black;
		}
	
	.olive{
	width:100%;
	}
	
	input::placeholder{
	font-size:.5em;
	text-align:center;
	width:80%;
		position:relative;
		margin-left:auto;
		margin-right:auto;
	
  }
  
  label{
  color:white;
  margin-bottom:1.5em;
  }
  
  
	
	
	@media screen and (max-device-width: 480px) and (orientation: portrait){
	
			.plate{
		position:relative;
		height:auto;
		width:auto;
		margin-left:auto;
		margin-right:auto;
		background-color:#ccc;
		border-radius:.5em;
		box-shadow:.5em .5em 2em .1em #333;
		margin-bottom:3em;
		margin-top:3em;
		padding:1em;
		
	}
		
	}/* CSS Document */