*{
	margin:0;
	padding:0;
}
		body {
			color: #eee;
			font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
			text-align: center;
			font-size: 14px;
			overflow: hidden;

		}
		#page{
			width: 100%;
			height: 100%;
			position: absolute;
			top:0;
			left: 0;
			background-image:url("mockuper.jpg");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center bottom;
		}
		#banner{
		width: 100%;
			height: 18vh;
			position: absolute;
			top:0;
			left: 0;	
			font-size: 3em;
			background-color: rgba(49,49,49,0.48)
		}
		h1 {
    margin: .3em;
    font-size: 1.5em;
		
		}
		.box{
			position: absolute;
			left: 0;
			right: 0;
		width: 90%;
		max-width: 400px;
		border-radius: 5px;	
		box-shadow: 1px 1px 5px #333;
		background-color: #fff9;
		color: #333;
		margin: 22vh auto 0;
		z-index: 10;	
		}
		h2 {
text-align: center;	
	padding: 10px 0 6px;
}
		#content {
			padding: 5px 5px 5px 15px;
			font-size: 14px;
		}
		input, textarea{
	padding: 5px 0;
	margin: 6px 0;	 
	text-align:center;
	width: 90%;
	font-size: 14px;
}
		#fields{
			padding: 0 0 10px;
		}
		
		
		@media (min-width: 600px) {
.box {
	float:right;
	margin-right: 100px;
			}

		}
				@media (min-width: 900px) {
#page{
			background-position: right bottom;
		}
		}
		

#badges{
position: absolute;
    bottom: 1%;
    right: 0;
    width: 60vw;
    max-width: 400px;
    margin: 0 5vw;
}