#main-wrapper {
	background-color: #FFF;
}

#register-wrapper {
	background-color: #333;
	margin: 30px auto;
}

#side-bar {
	box-sizing: border-box;
	padding: 30px 6%;
}

#register-form {
	background-color: #F1F4F9;
	padding: 30px 6%;
	box-sizing: border-box;
}

#register-form .submit-button {
	margin-top: 20px;
	float: right;
}

#side-bar h1,
#side-bar p {
	color: #FFF;
}

#side-bar ul li {
	color: #FFF;
}

@media screen and (min-width: 770px) {
	#main-wrapper {
		padding-bottom: 30px;
	}

	#register-wrapper {
		margin: 50px auto;
		width: 88%;
	}

	#side-bar {
		float: right;
		width: 40%;
		padding: 30px;
	}

	#register-form {
		float: left;
		width: 60%;
		padding: 30px;
	}

	#register-form input[type=text],
	#register-form select {
		padding: 5px;
	}
}

@media screen and (min-width: 1200px) {
	#side-bar {
		width: 30%;
	}

	#register-form {
		width: 70%;
	}
}

@media screen and (min-width: 1600px) {
	#main-wrapper {
		padding-bottom: 50px;
	}

	#register-wrapper {
		width: 80%;
	}

	#side-bar {
		padding: 50px;
		width: 25%;
	}

	#register-form {
		padding: 50px;
		width: 75%;
	}

	#register-form div.form-left {
		float: left;
		width: 48%;
	}

	#register-form div.form-right {
		float: right;
		width: 48%;
	}
}

@media screen and (min-width: 2000px) {
	#register-wrapper {
		width: 60%;
	}
}