/*************************************************************
****	Headings
*************************************************************/

h1 {
	margin-bottom: 30px;
	font-weight: bold;
	font-size: 24px;
	color: #003A69;
}



/*************************************************************
****	Styles        
*************************************************************/

main {
	width: 100%;
	height: 100%;
	background-image: linear-gradient(340deg, rgba(76, 76, 76,0.02) 0%, rgba(76, 76, 76,0.02) 34%,transparent 34%, transparent 67%,rgba(142, 142, 142,0.02) 67%, rgba(142, 142, 142,0.02) 73%,rgba(151, 151, 151,0.02) 73%, rgba(151, 151, 151,0.02) 100%),linear-gradient(320deg, rgba(145, 145, 145,0.02) 0%, rgba(145, 145, 145,0.02) 10%,transparent 10%, transparent 72%,rgba(35, 35, 35,0.02) 72%, rgba(35, 35, 35,0.02) 76%,rgba(69, 69, 69,0.02) 76%, rgba(69, 69, 69,0.02) 100%),linear-gradient(268deg, rgba(128, 128, 128,0.02) 0%, rgba(128, 128, 128,0.02) 5%,transparent 5%, transparent 76%,rgba(78, 78, 78,0.02) 76%, rgba(78, 78, 78,0.02) 83%,rgba(224, 224, 224,0.02) 83%, rgba(224, 224, 224,0.02) 100%),linear-gradient(198deg, rgba(25, 25, 25,0.02) 0%, rgba(25, 25, 25,0.02) 36%,transparent 36%, transparent 85%,rgba(180, 180, 180,0.02) 85%, rgba(180, 180, 180,0.02) 99%,rgba(123, 123, 123,0.02) 99%, rgba(123, 123, 123,0.02) 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
	padding-bottom: 60px;
	display: block;
}

#banner {
	height: 250px;
	background-image: linear-gradient(-45deg, rgba(152, 193, 217, .4), rgba(224, 251, 252, .4));
	display: flex;
	align-items: center;
}

#banner h1 {
	font-weight: 400;
	font-size: 40px;
	color: #003A69;
}

#bannerBlock {
	margin-left: 175px;
}

#bannerBlock p {
	margin-top: 40px;
	font-size: 20px;
	line-height: 30px;
		color: #003A69;
}

#contentCard {
	max-width: 1610px;
	margin: 60px auto 0px auto;
	padding: 60px 0px 60px 0px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 6px 16px rgba(0, 0, 0, .1);
}

#contentCard h1,
#contentCard p {
	text-align: center;
}

#contentCard p {
	max-width: 670px;
	margin: 0px auto 50px auto;
	font-size: 12px;
	color: #8D8F92;
	line-height: 30px;
}

#contentCard form {
	margin-left: 100px;
	margin-right: 100px;
}

#personalSection .formElementContainer {
	margin-top: 0px;
}

	#personalSection .formElementContainer .textbox,
	#personalSection .formElementContainer .spinedit,
	#personalSection .formElementContainer .combobox {
		width: 400px;
	}

#personalSection .personalInputs {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#stateCityWrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

#stateCityWrapper .formElementContainer .textbox {
	margin-right: 10px;
	width: 295px;
}

#stateCityWrapper .formElementContainer .combobox {
	width: 95px;
}

#hear {
	width: 400px;
}

#renderedSection {
	margin-top: 50px;
	margin-bottom: 50px;
}

#preSubmitContainer {
	max-width: 560px;
	margin: 0px auto 60px auto;
}

#preSubmitContainer .preSubmit {
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

#preSubmitContainer .preSubmit p {
	margin: 0px 0px 0px 20px;
	text-align: left;
	display: flex;
	align-items: center;
}

#preSubmitContainer .preSubmit p img {
	margin-right: 20px;
}

#preSubmitContainer .preSubmit .formbutton {
	padding-left: 0px;
	padding-right: 0px;
	width: 180px;
}

	#preSubmitContainer .preSubmit .browsebutton {
		padding: 0;
		border: none;
		background: none;
	}

		#preSubmitContainer .preSubmit .browsebutton a {
			padding: 15px 0px;
			width: 180px;
			font: 12px 'Lato', 'Segoe UI', Arial, Helvetica, sans-serif; 
			color: #fff;
			background-color: #003A69;
			border-radius: 5px;
			box-shadow: 0px 6px 16px rgba(0, 0, 0, .1);
			display: block;
			text-align: center;
		}

/* Needed in this one instance to override for popup */
#preSubmitContainer .preSubmit .popupText p {
	margin: 0px;
	display: block;
	max-width: initial;
	font-size: 14px;
	color: #5D5D5D;
	line-height: 24px;
}

#barContainer {
	margin-left: 20px;
	display: flex;
	align-items: center;
	position: relative;
}

#progress {
	width: 310px;
	height: 20px;
	margin-right: 20px;
	background-color: #E0FBFC;
	border: 1px solid #98C1D9;
	border-radius: 10px;
	box-sizing: border-box;
	position: relative;
	opacity: 0;
	transition: opacity ease-out .3s;
}

#progressBar {
	width: 20px; /* Just to get it started */
	height: 20px;
	background-color: #3D5A80;
	border: 1px solid #3D5A80;
	border-radius: 10px;
	display: block;
	box-sizing: border-box;
	position: absolute;
	top: -1px;
	left: -1px;
}

#noFile {
	position: absolute;
	left: 0px;
}

#uploadComplete {
	opacity: 0;
	transition: opacity ease-out .3s;
}

#trapHolder {
	position: absolute;
	top: -999px;
	left: 0px;
}

/*************************************************************
****	Media Queries          
*************************************************************/

@media (max-width: 721px) {
	main {
		padding-bottom: 20px;
	}

	#banner {
		height: 200px;
	}

	#bannerBlock {
		margin-left: 25px;
	}

	#bannerBlock h1 {
		font-size: 30px;
	}

	#bannerBlock p {
		margin-top: 30px;
		font-size: 18px;
		line-height: 24px;
		color: #003A69;
	}

	#contentCard {
		margin-top: 20px;
	}
}


@media (max-width: 575px) {
	#contentCard form {
		margin-left: 50px;
		margin-right: 50px;
	}

	#barContainer,
	#preSubmitContainer .preSubmit p {
		margin-left: 0px;
	}
}


@media (max-width: 495px) {
	#contentCard form {
		margin-left: 10px;
		margin-right: 10px;
	}
}


@media (max-width: 420px) {
	#personalSection .formElementContainer .textbox,
	#personalSection .formElementContainer .spinedit,
	#personalSection .formElementContainer .combobox,
	#hear {
		width: 275px;
	}
}


@media (max-width: 375px) {
	#barContainer {
		margin-top: 5px;
		flex-wrap: wrap;
	}
}