@font-face {
    font-family: 'bebas_neue_regular';
    src: url('BebasNeue.eot');
    src: url('BebasNeue.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue.woff') format('woff'),
         url('BebasNeue.ttf') format('truetype'),
         url('BebasNeue.svg#bebas_neue_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
#errors {
    color: red;
}
html {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	height: 100%;
}

*, *:before, *:after {
 	box-sizing: inherit;
}

body {
	background-color: #13324b;
	height: 100%;
	line-height: 1;
}

a {
	font-family: 'Open Sans Condensed', sans-serif;
}

.wrap {
	width: 800px;
	text-align: center;
	margin: 0 auto;
}

.center-text {
	text-align: center;
}

header, .content, .random_images, .title, footer {
	width: 100%;
}

.content {
	clear:both;
}

header {
	padding-top: 20px;
	padding-bottom: 20px;
	position: relative;
	z-index: 500;
	margin-bottom: 40px;
}

.login {
	float:right;
	width:10%;
	position: relative;
}

.login_hidden {
	display:none;
	position: absolute;
	right: 0;
	top: 40px;
	background: #72afe4;
	color: white;
	padding: 10px 20px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
}

input[type="text"], input[type="password"] {
	font-size: 20px;
	padding:2px 10px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	margin-bottom:20px;
}

input.button {
	border: 0;
	color: #fff;
	background-color: #EE4266;
	color:white;
	font-family: 'bebas_neue_regular' , sans-serif;
	font-size: 37px;
	width: 100%;
	margin-top: 5px;
	cursor: pointer;	
	padding-top: 5px;
	margin-bottom: 10px;
}

label.remember {
	font-size: 18px;
	margin-left: 8px;
}

a.second {
	color:white;
	margin:10px 0;
	display: block;
	font-size: 18px;
}

.login > a {
	display: inline-block;
	float: right;
	padding: 10px 15px;
	background-color: #72afe4;
	color: #fff;
	text-decoration: none;
	margin-top: 2px;
	font-size: 18px;
	width: 100%;
}

.logo_box {
	display: block;
	float: left;
	max-width: 300px;
}

header img {
	max-width: 100%;
}

.random_images img {
	display: inline;
	text-align: center;
	margin: 5px;
	position: relative;
	opacity: 0.6;
}

.random_images img:hover {
	opacity: 1;
}

.title h2 {
	color: #fff;
	font-size: 57px;
	letter-spacing: 1px;
	padding-top: 17px;
	padding-bottom: 20px;
	font-family: 'bebas_neue_regular' , sans-serif;
}

.body_form {
	background-color: #e6e6e6;
	padding-top: 40px;
	padding-bottom: 40px;
	border-top: 3px solid #72afe4;
	border-bottom: 3px solid #72afe4;
	margin-bottom: 20px;
	overflow: hidden;
}

.left, .right {
	width: 50%;
	float: left;
}

.left > img {
	border: 3px solid #72afe4;
}

.right {
	width: 48%;
}

.right h2 {
	color: #27c8a0;
	font-family: 'bebas_neue_regular' , sans-serif;
	font-size: 40px;
	border-top: 2px solid #72afe4;
	border-bottom: 2px solid #72afe4;
	display: block;
	position: relative;
	top: 5px;
	padding-top: 10px;
}

.form {
	width: 90%;
	margin: 0 auto;
	margin-top: 20px;
	padding-right: 10px;
}

.input_holder {
	text-align: left;
}

.input_holder label, .input_holder select, .input_holder input {
	width: 100%;
	display: block;
	padding: 5px 0;
	border: 0;
	font-size: 21px;
	font-family: 'Open Sans Condensed', sans-serif;
	padding-left: 10px;
}

.input_holder label {
	margin-top: 5px;
	color: #72afe4;
}

.input_holder select, .input_holder input {
	box-shadow: 1px 1px 3px #a5a5a5;
}

.monthdayear .month {
	width: 35%;
	float: left;
	margin-right: 4%;
}

.monthdayear .day {
	width: 24%;
	float: left;
	margin-right: 4%;
}

.monthdayear .year {
	width: 33%;
	float: left;
}

.step_two p{
	font-size: 14px;
	padding-top: 20px;
	font-family: arial , sans-serif;
	color: #535353;
}

.submit_button input {
	border: 0;
	color: #fff;
	background-color: #72afe4;
	font-family: 'bebas_neue_regular' , sans-serif;
	font-size: 37px;
	width: 100%;
	margin-top: 20px;
	cursor: pointer;
	box-shadow: 1px 1px 3px #a5a5a5;
	padding-top: 5px;
}

footer {
	border-top: 3px solid #72afe4;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 20px;
}

footer p {
	font-size: 14px;
	color: #afafaf;
	line-height: 18px;
	font-family: arial , sans-serif;
}

footer a {color:#fff; font-size:16px;}

.links {
	text-align: center;
	padding-top: 40px;
	padding-bottom: 20px;
}

.input_holder select {
	display: inline-block;
}

select.day {
	width:50px;
}

select.month {
	width:195px;
}

select.year {
	width:80px;
}

@media (max-width: 900px){
	.wrap {width: 90%;}
	.random_images img {width: 17%; margin: 1%;}
	.title h2 {font-size: 47px;}
	.left img {width: 90%; max-width: 340px; height: auto;}
	.input_holder label,
	.input_holder select,
	.input_holder input {font-size: 18px;}
	.step_two p {font-size: 12px;}
	.random_images img {opacity: 1;}
	.right h2 {font-size: 35px;}
}
@media (max-width: 700px) {
	.random_images img {width: 18.5%; margin: 0;}
	.left,
	.right { width: 100%;float: none;}
	.title h2 {font-size: 37px;}
	.right {padding-top: 20px;}
	.right h2 {font-size: 30px;}
	.form {padding-right: 0;}
	footer p {font-size: 12px;}
	.login {
		width:100%;
		float:none;
	}
	
	.logo_box {
		width:100%;
		float:none;
	}
	
	.login > a {
		width:30%;
		margin:0 auto;
		float:none;
		margin-bottom: 20px;
	}
	
	.login_hidden {
		width: 100%;
		top:35px;
	}
	
	select.month {
		width:120px;
	}
}