/*! fonts */
@font-face {
	font-family: "Agenda";
	src: url("fonts/Agenda-Light.ttf") format("ttf"),
		url("fonts/Agenda-Light.svg") format("svg"),
		url("fonts/Agenda-Light.woff") format("woff"),
		url("fonts/Agenda-Light.eot") format("eot");
	font-weight: normal;
}
@font-face {
	font-family: "Agenda";
	src: url("fonts/Agenda-Medium.ttf") format("ttf"),
		url("fonts/Agenda-Medium.svg") format("svg"),
		url("fonts/Agenda-Medium.woff") format("woff"),
		url("fonts/Agenda-Medium.eot") format("eot");
	font-weight: bold;
}

/*! normalize */
/* font-base: 18px; */

html {
	background: url(img/splash.jpg) no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	color: #ffffff;
}

body {
	font-family: "Agenda", sans-serif;
	font-size: 18px;
	font-weight: normal;
	min-width: 280px;
	margin: 0;
	padding: 0;
}

/*! grids */
.container {
	margin-right: auto;
	margin-left: auto;
}

.container:before,
.container:after,
.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
}

.container:after,
.clearfix{
	clear: both;
}

@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1100px;
	}
}

.col {
	position: relative;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
}


/*! theme */


.splash h2 {
	font-weight: normal;
	margin-bottom: 15px;
}

.splash label {
	display: block;
	font-weight: normal;
	line-height: 22px;
	margin: 10px 0;
}

.splash .col {
	width: 400px;
	padding-top: 80px;
}

.splash .header-col {
	padding-bottom: 100px;
}

.splash .form-col {
	margin-left: 80px;
	padding-top: 80px;
	width: 400px;
}

.lead {
	border-top: 1px solid rgba(255, 255, 255, .25);
	font-size: 28px;
	line-height: 34px;
	padding: 20px 0 30px 0;
}

@media (max-width: 767px) {
	.container {
		padding: 10px 15px;
	}

	.error,
	.success {
		width: auto;
	}

	.splash .col,
	.splash .form-col {
		float: none;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}


}

@media (min-width: 768px) and (max-width: 991px) {
	.splash .col {
		width: 400px;
	}

	.splash .form-col {
		padding-top: 130px;
	}

	.lead {
		font-size: 24px;
		line-height: 30px;
	}

}

@media (min-width: 992px) and (max-width: 1199px) {
	.lead {
		font-size: 28px;
		line-height: 34px;
	}

}