/* Forms */

form
{
	margin: 0;
	padding: 0;
}

form.filters
{
	margin-bottom: 10px;
	border-bottom: 1px solid #C6D0D3;
}

form .fields,
form .thanks,
form .server-error
{
	position: relative;
	z-index: 25;
}

.form-server-error,
.form-submitted
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 5rem 6rem;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	filter: alpha(opacity=0);
	will-change: opacity, visibility;
	-webkit-transition: visibility 0s, opacity 0.3s ease-in-out;
	-moz-transition: visibility 0s, opacity 0.3s ease-in-out;
	-ms-transition: visibility 0s, opacity 0.3s ease-in-out;
	-o-transition: visibility 0s, opacity 0.3s ease-in-out;
	transition: visibility 0s, opacity 0.3s ease-in-out;
}

.is-submitted .form-content,
.server-error .form-content
{
	display: none;
}

.is-submitted .form-submitted,
.server-error .form-server-error
{
	opacity: 1;
	filter: none;
	visibility: visible;
}

form .fields
{
	position: relative;
	z-index: 50;
}

form .thanks,
form .server-error
{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

form.submitted .fields,
form.is-submitted .fields,
form.server-error .fields
{
	opacity: 0;
}

form.submitted .thanks,
form.is-submitted .thanks
{
	opacity: 1;
}

form.server-error .server-error
{
	opacity: 1;
}

.fields h2
{

}

.checklist
{
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.checklist li
{
	list-style: none;
	margin: 0 0 0.2rem;
	padding: 0;
}

.checklist li label.inline
{
	text-indent: -3rem;
	padding-left: 3.1rem;
}

.fieldset
{
	position: relative;
}

.fieldset .field
{
	position: relative;
	margin: 0 0 2rem;
	padding-right: 5%;
}

.fieldset .field.inline
{
	display: inline-block;
	width: 240px;
	padding-right: 20px;
}

.filters .fieldset .field.inline
{
	width: 200px;
}

label
{
	display: block;
}

label span,
label input,
label select,
label textarea
{
	display: block;
	width: 100%;
}

label span
{
	font-size: 1.4rem;
	font-weight: 300px;
}

label.inline
{
	display: inline-block;
	padding-right: 2rem;
	white-space: nowrap;
}

label.inline.wide
{
	width: 100%;
}

label.inline span
{
	display: inline;
	white-space: normal;
}

label.inline input,
label.inline select
{
	display: inline-block;
	width: auto;
}

input,
select
{
	background-color: transparent;
	border: none;
	border-radius: 0;

	outline: 0 none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
select,
textarea
{
	width: 100%;
	height: 4.2rem;
	padding: 0.9rem 1.2rem 0.9rem;
	color: #454C4D;
	font-size: 1.6rem;
	font-weight: 300;

	background: #FFF;
	border: 1px solid #EAEEEF;
	border-radius: 1px;
	box-shadow: inset 0 0 0.4rem rgba(0,0,0,0.08);

	will-change: border-color;
	-webkit-transition: border-color 0.1s ease-in-out;
	-moz-transition: border-color 0.1s ease-in-out;
	-ms-transition: border-color 0.1s ease-in-out;
	-o-transition: border-color 0.1s ease-in-out;
	transition: border-color 0.1s ease-in-out;
}

textarea
{
	height: auto;
}

select
{
	position: relative;
	padding: 0.6rem 1.2rem 0.9rem;
	color: #617D85;
	border-radius: 0;
	background: #FFF url('../images/svg/ui-dropdown-arrow.svg') 95% 50% no-repeat;
	background-size: 1.6rem;
}

select:after
{
	content: '';
	position: absolute;
	top: 1.9rem;
	right: 1.8rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.5rem 0.45rem 0 0.45rem;
	border-color: transparent;
	border-top-color: #5da9ba;
	pointer-events: none;
}

input[type="text"]:hover, input[type="text"]:focus,
input[type="email"]:hover, input[type="email"]:focus,
input[type="url"]:hover, input[type="url"]:focus,
input[type="tel"]:hover, input[type="tel"]:focus,
select:hover, select:focus,
textarea:hover, textarea:focus
{
	border-color: #5DA9BA;
}

select:focus
{
	color: #454C4D;
}

input[type="checkbox"], form label.inline input[type="checkbox"],
input[type="radio"], form label.inline input[type="radio"]
{
	cursor: pointer;
	width: 1.6rem;
	height: 1.6rem;
	margin-right: 1rem;
	vertical-align: middle;
	background: #fff;
	border: 1px solid #c0c7c8;

	will-change: background-color, border-color;
	-webkit-transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
	-moz-transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
	-ms-transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
	-o-transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
	transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

input[type="radio"], form label.inline input[type="radio"]
{
	border-radius: 50%;
}

input[type="checkbox"]:checked, form label.inline input[type="checkbox"]:checked,
input[type="radio"]:checked, form label.inline input[type="radio"]:checked
{
	background-color: #5DA9BA;
	background-image: url('../images/svg/ui-checkmark-white.svg');
	background-size: 1rem;
	background-position: center;
	background-repeat: no-repeat;
	border-color: #5DA9BA;
}

input[type="radio"]:checked, form label.inline input[type="radio"]:checked
{
	background-image: none;
	box-shadow: inset 0 0 0 1px #FFF;
}

input[type="checkbox"]:focus, form label.inline input[type="checkbox"]:focus
{
	box-shadow: 0 0 5px #5DA9BA;
}

input[type="radio"]:focus, form label.inline input[type="radio"]:focus
{
	box-shadow: inset 0 0 0 1px #FFF, 0 0 5px #5DA9BA;
}

.field.error > span.error
{
	color: #A55;
	font-size: 1.2rem;
	position: absolute;
	top: 100%;
}

.field.error > label
{
	color: #A55;
}

.field.error input[type="text"],
.field.error input[type="email"],
.field.error input[type="password"],
.field.error input[type="url"],
.field.error input[type="tel"],
.field.error select,
.field.error textarea
{
	border-color: #A55;
}

.buttonset
{

}

.buttonset.right
{
	float: right;
	padding-right: 10%;
}

/* Search Form */
.search .field
{
	padding-right: 0;
}

.search label
{
	position: relative;
}

.search label input[type="text"]
{
	padding-right: 3rem;
}

.search label span
{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 1.6rem;
	color: #5DA9BA;
	font-size: 2rem;
}

.search label span:hover
{
	color: #EE7933;
}

.global-search .fieldset .field
{
	margin: 0;
}

.global-search label input[type="text"]
{
	height: auto;
	padding: 3px 2px;
	font-size: 1.3rem;
	background: none;
	border: none;
	border-bottom: 1px solid #7F8E8F;
	box-shadow: none;
}

.global-search label span
{
	top: 5px;
	right: 2px;
	width: 1.6rem;
	color: #7F8E8F;
	font-size: 1.2rem;
}

.resources form.search
{
	float: right;
	display: inline-block;
	width: 50%;
	max-width: 400px;
	margin: 3.5rem 0 0 10rem;
}

#hero.resources form.search
{
	width: 40%;
	margin: 3.5rem 0 3.5rem 2rem;
}

/* Footer Form */
footer.page form .fields,
footer.page form .thanks,
footer.page form .server-error
{
	width: 100%;
	padding: 20px 0 20px 10%;
	color: #FFF;
	overflow: hidden;
}

footer.page .fields h2
{
	margin: 0 0 1.2rem;
	color: #FFF;
	font-size: 3rem;
	font-weight: 200;
}

footer.page .field
{
	margin: 0 0 1rem;
	padding-right: 10%;
}

footer.page label input
{
	height: auto;
	padding: 0.6rem 0.8rem;
	color: #CAFDED;
	font-size: 1.6rem;
	font-weight: 300;
	background: transparent;
	border: none;
	border-bottom: 1px solid #FFF;
	box-shadow: none;

}

footer.page label input:hover
{
	border: none;
	border-bottom: 1px solid #FFF;
}

footer.page label input:focus
{
	background-color: rgba(53,59,70,0.4);
	border: none;
	border-bottom: 1px solid #FFF;
}

footer.page label span
{
	margin: 0.5rem 0;
	font-size: 1.3rem;
	font-weight: 300;
}

footer.page .field.error > label span
{
	color: #F99;
}

footer.page .field.error > label span.error
{
	display: block;
	font-size: 0.9rem;
	line-height: 1;
}

footer.page .field.error input[type="text"],
footer.page .field.error input[type="email"],
footer.page .field.error input[type="password"],
footer.page .field.error input[type="url"],
footer.page .field.error input[type="tel"],
footer.page .field.error select,
footer.page .field.error textarea
{
	border-color: #F99;
}

footer.page form .buttonset
{
	margin: 1rem 0;
}

/* Large Screens Only */
@media screen and (min-width: 801px)
{
	#hero.resources form.search
	{
		width: 50%;
		margin: 3.5rem 0 3.5rem 3.5rem;
	}

	footer.page form .fields,
	footer.page form .thanks,
	footer.page form .server-error
	{
		position: absolute;
		top: 49.5%;
		/*max-width: 40rem;*/
		padding: 0 0 0 10%;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: translateY(-49.5%);
		-moz-transform: translateY(-49.5%);
		-ms-transform: translateY(-49.5%);
		-o-transform: translateY(-49.5%);
		transform: translateY(-49.5%);
	}
}


@media screen and (max-width: 600px)
{
	.filters .fieldset .field.inline
	{
		width: 100%;
	}s
}

@media screen and (max-width: 550px)
{
	#hero.resources form.search
	{
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 5px 24px 0;
		background: #9ac1b5;
	}
}


@media screen and (max-width: 500px)
{
	.fieldset .field { padding-right: 0; }

	.buttonset.right { float: none; }

	#hero.resources form.search { margin: 0; width: 100%; max-width: 100%; }

}