@charset "UTF-8";

/* This file uses "CSS nesting", which is a relatively new feature, but industry standard (I checked the "caniuse" website). 
	We started implementing this on our PY26 changes. VS Code supports it, just not VS.
	So for now, if you see CSS "errors", check on VSCode to see if they are spurious. */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	appearance: textfield;
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
}

input[type="tel"]::placeholder {
	color: #828282;
	opacity: 1;
}

.hero {
	padding-top: 80px;
	padding-bottom: 80px;
	background: var(--white);
}

	.hero h1 {
		margin: 0;
		padding: 0;
		color: var(--dark-gray);
		font-family: "GilroyBold", sans-serif;
		font-size: 2em;
		font-weight: 700;
		font-style: normal;
		line-height: 36px;
		text-align: center;
		text-shadow: 2px 2px 0 rgba(255, 255, 255, .9);
	}

.zipContainerWrap {
	position: relative;
	padding: 0;
}

.zipContainer {
	display: block;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
	max-width: 512px;
}

.textfield {
	padding: 5px 12px;
	width: 512px;
	height: 60px;
	color: var(--dark-gray);
	font-size: 1em;
	line-height: 1.3333333;
	font-weight: 400;
	background: var(--white);
	border: 1px solid var(--light-gray);
	border-radius: 12px;
}

	.textfield:focus,
	.textfield:active {
		color: var(--medium-gray);
	}

.form-floating .form-select {
	padding-left: 12px;
	color: var(--medium-gray);
	padding-right: 12px;
	height: 60px;
	padding-top: 24px;
}

.form-floating .form-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 28 40'%3E%3Cpath fill='%232E2D2D' d='M13.3 5.3a1 1 0 0 1 1.4 0l6 6c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0L14 7.4l-5.3 5.3a1 1 0 0 1-1.4 0 1 1 0 0 1 0-1.4l6-6ZM13.3 34.7l-6-6a1 1 0 0 1 0-1.4 1 1 0 0 1 1.4 0l5.3 5.3 5.3-5.3a1 1 0 0 1 1.4 0c.4.4.4 1 0 1.4l-6 6a1 1 0 0 1-1.4 0Z'/%3E%3C/svg%3E");
	background-size: 28px;
	background-repeat: no-repeat;
}

	.form-floating .form-select.is-invalid:not([multiple]):not([size]) {
		border-width: 3px;
		padding-bottom: 5px;
		padding-top: 20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 49 40'%3E%3Cpath fill='%23828282' d='M7.3 5.3a1 1 0 0 1 1.4 0l6 6c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0L8 7.4l-5.3 5.3a1 1 0 0 1-1.4 0 1 1 0 0 1 0-1.4l6-6ZM7.3 34.7l-6-6a1 1 0 0 1 0-1.4 1 1 0 0 1 1.4 0L8 32.6l5.3-5.3a1 1 0 0 1 1.4 0c.4.4.4 1 0 1.4l-6 6a1 1 0 0 1-1.4 0Z'/%3E%3Cpath fill='%23B60F00' d='M38 30.5a10 10 0 0 1-8.7-5 10 10 0 0 1 17.3-10 10 10 0 0 1 0 10 10 10 0 0 1-8.6 5Zm0-15a1 1 0 0 0-1 1v4.3c0 .6.5 1 1 1s1-.4 1-1v-4.4c0-.5-.5-.9-1-.9Zm-1.3 8.8c0 .7.6 1.2 1.3 1.2.7 0 1.3-.5 1.3-1.3 0-.6-.6-1.2-1.3-1.2-.7 0-1.3.6-1.3 1.3Z'/%3E%3C/svg%3E");
		background-size: 48px;
	}

.form-control.is-invalid,
.was-validated .form-control:invalid {
	background-color: #FFEDED;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 19'%3E%3Cpath fill='%23ED3131' d='M10 18.3a9 9 0 0 1-7.8-4.6 9 9 0 0 1 15.6-9 9 9 0 0 1 0 9 9 9 0 0 1-7.8 4.6Zm0-13.6c-.5 0-.8.4-.8.9v4c0 .4.3.8.8.8s.8-.4.8-.9v-4c0-.4-.3-.8-.8-.8Zm-1.1 8c0 .6.5 1 1.1 1 .6 0 1.1-.4 1.1-1 0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.1Z'/%3E%3C/svg%3E");
	border-width: 2px;
}

.form-control.is-valid,
.was-validated .form-control:valid {
	background-image: url(../img/icon-blue-checkmark.svg);
	border-color: #3972C4;
	border-width: 2px;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
	border-color: #3972C4;
}

.form-floating>.form-control:not(:placeholder-shown).is-valid ~ label,
.form-floating>.form-select.is-valid ~ label {
	color: var(--primary-color);
	font-weight: 600;
}

.form-select.is-valid, 
.was-validated .form-select:valid,
.form-select.is-valid:not([multiple]):not([size]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 49 40'%3E%3Cpath fill='%23828282' d='M7.3 5.3a1 1 0 0 1 1.4 0l6 6c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0L8 7.4l-5.3 5.3a1 1 0 0 1-1.4 0 1 1 0 0 1 0-1.4l6-6ZM7.3 34.7l-6-6a1 1 0 0 1 0-1.4 1 1 0 0 1 1.4 0L8 32.6l5.3-5.3a1 1 0 0 1 1.4 0c.4.4.4 1 0 1.4l-6 6a1 1 0 0 1-1.4 0Z'/%3E%3Cpath fill='%230792DE' d='M38 30.5a10 10 0 0 1-8.7-5 10 10 0 0 1 17.3-10 10 10 0 0 1 0 10 10 10 0 0 1-8.6 5Zm4.4-11.8c.4-.4.4-1 0-1.4a1 1 0 0 0-1.3 0l-4.4 4.4L35 20c-.4-.4-1-.4-1.3 0-.4.3-.4 1 0 1.3l2.5 2.5c.3.4 1 .4 1.3 0l5-5Z'/%3E%3C/svg%3E");
	border-color: #3972C4;
	border-width: 2px;
	background-size: 47px;
}

.form-select.is-valid:not([multiple]):not([size]), 
.form-select.is-valid:not([multiple])[size="1"], 
.was-validated .form-select:valid:not([multiple]):not([size]), 
.was-validated .form-select:valid:not([multiple])[size="1"] {
	padding-left: 11px;
}

.form-select.is-invalid:not([multiple]):not([size]), 
.form-select.is-invalid:not([multiple])[size="1"], 
.was-validated .form-select:invalid:not([multiple]):not([size]), 
.was-validated .form-select:invalid:not([multiple])[size="1"] {
	padding-left: 11px;
}

.form-floating>.form-control.is-invalid:not(:placeholder-shown)~label::after,
.form-floating>.form-control.is-invalid:not(:placeholder-shown)~label span,
.form-floating>.form-control.is-invalid:focus~label::after,
.form-floating .form-select.is-invalid:not([multiple]):not([size])~label::after,
.form-floating .form-select.is-invalid:not([multiple]):not([size]) {
	background-color: #FFEDED;
}

.form-floating>.form-control:not(:placeholder-shown)~label::after {
	background-color: inherit;
}

#btn1 {
	width: 512px;
	height: 60px;
}

	#btn1:disabled,
	#btn1[disabled] {
		background-color: #D6D6D6;
		cursor: not-allowed;
		color: var(--medium-gray);
		border-color: #D6D6D6;
	}

input {
	vertical-align: middle;
}

.form-floating>label {
	width: -webkit-fill-available;
	padding-left: 14px;
	border: 0;
	color: var(--medium-gray);
}

.message {
	display: flex;
	margin: 0 auto;
	padding: 0;
	width: fit-content;
	color: var(--red);
	position: absolute;
	top: 16px;
	font-family: var(--primary-font);
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	background-color: #FFEDED;
}

#TrustedSiteBadge {
	display: none;
}

.content {
	padding-top: 20px;
	padding-bottom: 20px;
	background: #fff
}

	.content h5 {
		margin-bottom: 20px;
		color: var(--dark-gray);
		font-family: "GilroyBold", sans-serif;
		font-size: 20px;
		font-weight: 700;
		line-height: 24px;
	}

	.content p {
		color: var(--gray);
		font-family: var(--primary-font);
		font-size: 16px;
		line-height: 24px;
	}

@media (min-width:991px) and (max-width:1199px) {
}

@media screen and (max-width: 1024px) {
	.needHelp .lead {
		font-size: .875em;
	}

	.needHelp .phone {
		font-size: 1.5em;
	}

	.needHelp .hours {
		font-size: .875em;
	}
}

@media (min-width:768px) and (max-width:991px) {
	.hero {
		margin-bottom: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background: var(--white);
	}

		.hero h1 {
			font-size: 2em;
			line-height: 36px;
		}

		.hero h2 {
			font-size: 1.125em;
		}
}

@media (min-width:768px) and (max-width:939px) {
	.zipContainer {
		display: block;
		justify-content: center;
		padding: 0;
		width: 100%
	}
}

@media (min-width:280px) and (max-width:767px) {
	.hero {
		margin-bottom: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background: var(--white);
	}

		.hero h1 {
			margin-top: 20px;
			font-size: 2.25em;
			line-height: 40px;
			text-align: center;
		}

			.hero h1 span {
				display: inline;
			}

	.zipContainer {
		display: block;
		margin: 0 auto;
		padding: 0;
	}

	.btn-default {
		width: 100%;
		height: 48px;
	}

	.textfield, #btn1 {
		display: block;
		width: 100%;
	}

	.message {
		text-align: center;
	}

	#TrustedSiteBadge {
		display: block;
		margin: 35px auto 0 auto;
		padding-left: 0;
		padding-bottom: 0;
		text-align: center;
	}
}

@media (min-width:439px) and (max-width:639px) {
	.zipContainer {
		display: block;
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}
}

@media (min-width:320px) and (max-width:439px) {
	.hero h1 {
		padding-bottom: 15px;
		font-size: 1.75em;
		text-align: center
	}

	.zipContainer {
		display: block;
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}
}

@media screen and (max-width: 414px) {
	.hero h1 {
		padding-bottom: 15px;
		font-size: 1.75em;
		text-align: center;
	}
}

@media screen and (max-width: 390px) {
}

@media screen and (max-width: 375px) {
	.hero h1 {
		padding-bottom: 15px;
		font-size: 1.75em;
		text-align: center;
	}
}

@media screen and (max-width: 360px) {
	.mobile-menu li a {
		font-size: 13px;
	}

	.hero h1 {
		padding-bottom: 15px;
		font-size: 1.75em;
		text-align: center;
	}
}

@media screen and (max-width: 320px) {
	.hero h1 {
		padding-bottom: 15px;
		font-size: 1.5em;
		text-align: center;
	}

	.mobile-menu li a {
		font-size: 11px;
	}
}

@media screen and (max-width: 280px) {
	.hero h1 {
		font-size: 1.5em;
	}
}