/* common */
* {box-sizing: border-box;}
body {
	margin: 0;
	padding: 0 0 20px 0;
	font-family: 'Ubuntu', sans-serif;
	text-align: center;
	font-size: 15px;
	font-weight: 300;
	background: radial-gradient(#4F4F4F, #1B1B1B);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#form-box-center {
	max-width: 400px;
	margin: 0 auto 20px auto;
	padding: 15px;
	display: block;
	position: relative;
	text-align: center;
	color: #fff;
	background-image: none;
	background-repeat: repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: cover;
}
@media screen and (min-width: 880px) {
	#form-box-center {min-width: 345px;}
}
@media screen and (min-width: 1040px) {
	#form-box-center {min-width: 400px;}
}

.instructions {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	padding: 20px 0 20px 0;
}
@media screen and (min-width: 768px) {
	.instructions {padding: 80px 0 20px 0;}
}
.dont-break {white-space: nowrap;}

/***for zip***/
.textField, .textArea, .selectBox, .selectGroup a {
	width: 100%;
	height: 50px;
	margin: 6px auto;
	font-size: 20px;
	text-align: center;
	border: none;
	border-radius: 4px;
}
.textField {
	padding: 10px;
}
.formButton {/********************** from styles-common */
	background: #208BB8;
	text-align: center;
	font-size: 2.0rem;
	color: #fff;
	border-radius: 4px;
	border: none;
	cursor: pointer;
}
.formButton:hover, .formButton:active {background: #27AAE1;}

.buttonArrow {position: relative; top: 4px; padding-left: 8px;}
.buttonArrow img {width: 12px !important;}

/********************** from styles-funnel */
.formButton {
	/*min-width: 260px;*/width: 100%;
	margin: 15px auto;
	padding: 10px 24px 13px 24px;
	font-size: 24px;
}
.buttonArrow {position: relative; top: 4px; padding-left: 8px;}
.buttonArrow img {width: 12px !important;}

/* for gender */
.textField, .textArea, .selectBox, .selectGroup a {
	width: 100%;
	height: 50px;
	margin: 6px auto;
	font-size: 20px;
	text-align: center;
	border: none;
	border-radius: 4px;
}
.selectGroup {margin: 10px auto 20px auto;}
.selectGroup a {
	margin: 12px auto;
	padding-top: 4px;
	background: #208BB8;
	display: block;
	vertical-align: middle;
	font-size: 20px;
	/*font-weight: 700;*/
	text-decoration: none;
	color: #fff;
	border: none;
	border-radius: 4px;
}
.selectGroup a:hover {
	background: #27AAE1;
	color: #fff;
	text-decoration: none;
}
.selectGroup a:before { /*** ghost element, centers text vertically ***/
	content: "";
	width: 2px;
	height: 44px;
	display: inline-block;
	vertical-align: middle;
}

#form-box-center .form-error {background-color: pink;}
.err {width: 100%; font-size: 11px; color: #ff0;}


