@charset "UTF-8";
/*Santa Barbara colors
skyPeach #cab1ad
paler peach #dccbc9
medLime #86a400
brtLime #c1d800
electricBlue #44419c
less electric, more violet blue #44419c
deepBlue #33364b
charcoal #33364b
*/
html, body {height: 100%;}
* {box-sizing: border-box;}

/*********** BTF everything but big pic is below the fold / index ************/
#above {
	height: 100%;
	position: relative;
	text-align: center;
}
#above * {margin-bottom: 0; margin-top: 0;}
#above p {margin: 1.12em 0;}
/***** end of BTF / index *******/

/*********** ATF bottom content begins above fold, but footer is sticky if content is short / content pages ************/
#above-atf {
	min-height: 100%;
	position: relative;
	text-align: center;
}
#above-atf * {margin-bottom: 0; margin-top: 0;}
#above-atf {margin-bottom: -310px;} /* must match footer-bottom height */
#above-atf p {padding: .56em 0;}
#above-atf h1 {padding: 0 0 .67em 0;}
/*#above-atf footer {height: 310px;}*/ /* must match footer-bottom height */
#push {height: 310px;} /* must match footer-bottom height */
/***** end of ATF / content *******/

body {
	margin: 0;
	font-family: 'Ubuntu', sans-serif;
	font-size: 15px;
}
header {position: relative; min-height: 0;}

#brand {
	padding: 10px 10px 4px 10px;
	font-size: 1.5rem;
	font-weight: 700;
	vertical-align: middle;
}
#brand a {text-decoration: none; cursor: pointer; color: #fff;}
#brand img {width: 230px;}

#nav-link {
	position: absolute;
	top: 22px;
	right: 10px;
	cursor: pointer;
}

#top-nav-V {
	max-width: 1004px;
	max-height: 0px;
	background-color: #33364b;
	background: linear-gradient(to right, #33364b, #44419c, #33364b);
	transition: all .5s ease-in-out;
	position: relative;
	top: 0;
	right: 0;
	z-index: 108;
	overflow: hidden;
}
#top-nav-V a {
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 8px;
	line-height: 1.0;
	border-top: 1px solid #788781;
	white-space: nowrap;
}
#top-nav-V a:hover {text-decoration: underline;}
#top-nav-V a:first-child {display: none;}

#top-nav-H {
	max-width: 1004px;
	position: relative;
	top: 19px; /* changed */
	right: 0;
	z-index: 108;
	display: none;
	float: right;
}
#top-nav-H a {
	text-decoration: none;
	color: #fff;
	padding: 8px;
	line-height: 1.0;
	white-space: nowrap;
	vertical-align: middle;
}
#top-nav-H a:hover {text-decoration: underline;}
#top-nav-H a:first-child {display: none;}

#phone-box {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	z-index: 110;
}
#phone-box a {
	text-decoration: none;
	color: #fff;
	line-height: 1.2;
	border: none;
}
#phone-box a:hover {text-decoration: none; color: #fff;}

/******************** end of header ************************/

#above {
	background-image: url(../images/AdobeStock_209063839_900x700.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-shadow: 0px 2px 12px #000;
	position: relative;
}
#above #top-table {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}
#above #top-left {
	width: 80%;
	padding-top: 170px;
	font-size: 1.0rem;
	color: #fff;
	display: inline-block;
}
#above #top-left div.iblock {
	background-color: rgba(0,0,0,0.60);
	padding: 15px 15px 40px 15px;
}

#headline {font-size: 2.0rem; font-weight: normal; line-height: 1.0;}

#banner {
	position: absolute;
	top: 10px;
	left: -350px;
	color: #000;
	font-size: 13px;
	font-weight: 700;
	z-index: 98;
	background-color: rgba(255,255,255,0.9);
	padding: 6px 12px;
	text-shadow: none;
	max-width: 50%;
	transition: all 0.5s ease-in-out;
	transition-delay: 1s;
}
#banner a {
	text-decoration: none;
	color: #000;
	line-height: 1.2;
	border: none;
}
#banner a:hover {
	text-decoration: none;
	color: #000;
}

.button-big {
	border-radius: 8px;
	padding: 12px 20px 14px 20px;
	background-color: #86a400;
	border: 2px solid #c1d800;
	font-size: 2.0rem;
	font-weight: 700;
	cursor: pointer;
	color: #000;
}
.button-big:hover {background-color: #c1d800;}

#top-right {
	display: inline-block;
	width: 80%;
	position: relative;
}

main {
	background: #fff;
	margin: 0 auto;
}
.pad10 {padding: 10px 10px 50px 10px;}

.ground-none {background: none;}
.ground-white {
	width: 100%;
	padding: 20px 0;
	color: #333;
	background-color: #fff;
}
.ground-white a {color: #000; text-decoration: underline;}
.ground-white a:hover {text-decoration: underline;}

.ground-90 {background-color: rgba(255,255,255,0.9);}

.groundGreen {
	width: 100%;
	color: #fff;
	background: #003029;
	background: linear-gradient(to right, #003029, #33364b, #003029);
}
.ground-blue {
	width: 100%;
	color: #fff;
	background: #33364b;
	background: linear-gradient(to right, #33364b, #44419c, #33364b);
}
.ground-cream {
	width: 100%;
	color: #000;
	background: #F8EDD2;
}
.ground-peach {
	width: 100%;
	color: #000;
	background: #dccbc9;
}
.ground-leaf {
	width: 100%;
	color: #000;
	background: #9eb2c0;
}
.ground-00135e {background-color: #33364b;}
.ground-4351ac {background-color: #44419c;}

section {
	max-width: 1024px;
	margin: 0 auto;
	text-align: center;
	font-size: 1.0rem;
	position: relative;
}
section p, section h4 {text-align: left;}
section h2 {text-align: center;}
.iblock {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	text-align: center;
}
.single {
	max-width: 700px;
	margin: 0 auto;
	padding: 20px 20px 50px 20px;
	color: #333;
}
.half {width: 486px; margin: 0 10px;}/*not used, but useful*/
.third {max-width: 655px; margin: 0 20px;}
.fourth {width: 233px; margin: 0 6px;}
.full-width {width: 100%}
.display-inline {display: inline;}

#serious {color: #000; padding: 20px 0;}
#serious .iblock {text-align: left; border-top: 4px solid #fff;}
#serious .iblock:first-child {border: none;}
#serious h3 {text-align: center; font-size: 22px;}

#matchmaker {
	background-image: url(../images/matchmakerSil.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

/*********** home page testimonial slider stuff *************/
#test-window {
	max-width: 700px;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
}
#test-window img {width: 200px;}
#test-window a {text-decoration: none; color: #fff;}
#test-window a:hover {text-decoration: underline;}

#slider {
	width: 2860px;
	position: relative;
	transition: left .5s ease-in-out;
	left: 0;
}
#slider h2 {text-align: center;}

.testimonial {
	width: 695px;
	margin-right: 15px;
	text-align: left;
	display: inline-block;
	vertical-align: top;
	padding-left: 20px;
	padding-right: 400px;/*adjust at breakpoints*/
}
#test-buttons div {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	display: inline-block;
	margin: 6px;
	background-color: none;
	border: 1px solid #fff;
}
/************ end home page testimonial slider stuff **************/

/********* testimonial stuff ************/
.byLine {
	text-align: center;
	margin-top: 0;
}
.line {
	height: 1px;
	background: #CCC;
	margin: 0 auto;
	clear: both;
}
.attribution {
	font-style: normal;
	font-weight: bold;
}
/************** end testimonial stuff **************/

/************ content page stuff *****************/
#top-box {
	background-image: url(../images/AdobeStock_209063839_900x700.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	text-shadow: 0px 2px 12px #000;
	position: relative;
}
#top-table {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}
#top-left {
	width: 80%;
	padding-top: 100px;
	font-size: 1.0rem;
	color: #fff;
	display: inline-block;
	vertical-align: middle;
}
#top-left div.iblock {
	background-color: rgba(0,0,0,0.60);
	padding: 15px 15px 25px 15px;
	vertical-align: middle;
}

#headline {font-size: 2.0rem; font-weight: normal; line-height: 1.0;}

#top-right {
	display: inline-block;
	width: 80%;
	position: relative;
}
#top-quote {
	max-width: 700px;
	position: relative;
	text-align: center;
	color: #fff;
	z-index: 200;
	display: none;
}
#top-quote p {text-align: center;}

/************ end content page stuff *****************/

/************ form stuff *************/
#form-box {
	max-width: 600px;
	position: relative;
	margin: 0 auto;
	font-size: 1.4rem;
	text-align: center;
}
#form-box .small-print {color: #666;}
#form-box .small-print a {
	color: #666;
	text-decoration: none;
}
#form-box .small-print a:hover {
	color: #ccc;
	text-decoration: underline;
}
.instructions {
	padding: 10px;
	font-size: 1.5rem; font-weight: 700;
	line-height: 100%;
	color: #33364b;
}
.explanation {font-weight: 400; font-size: 1.2rem; color: #000;}
.black-normal {font-weight: 400; color: #000;}

.choose-one {
	font-style: italic;
	font-weight: 400;
	white-space: nowrap;
	color: #000;
}
#form-fields {
	min-width: 100%;
	border: 1px solid #33364b;
	background-color: rgba(255,255,255,0.9);
	padding: 15px 0px;
	text-align: center;
	border-radius: 8px;
}
.select-group a {
	width: 80%;
	margin: 16px auto !important;
	padding: 18px 20px 20px 20px;
	border-radius: 6px;
	display: block;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	color: #000;
	text-decoration: none;
	line-height: 100%;
	background-color: #86a400;
	border: 3px solid #c1d800;
}
.select-group a:hover {
	background-color: #c1d800;
	text-decoration: none;
	line-height: 100%;
}
.text-field {
	font-size: 2rem;
	width: 80%;
	margin: 8px auto !important;
	padding: 10px;
	border: 1px solid #ccc;
	text-align: left;
}
.select-box {
	width: 80%;
	height: 60px;
	font-size: 2rem;
	margin: 8px auto !important;
	padding: 4px auto 10px 20px;
	border: 1px solid #ccc;
	text-align: center;
}
.button-funnel {
	min-width: 200px;
	margin: 15px auto 4px auto !important;
	padding: 13px 20px 21px 20px;
	background-color: #86a400;
	border: 3px solid #c1d800;
	color: #000;
	border-radius: 8px;
	font-size: 2.0rem;
	font-weight: 700;
	cursor: pointer;
}
.button-funnel:hover {background: #c1d800;}

.triangle-arrow {
	position: relative;
	top: 8px;
	padding-left: 12px;
}

#progress-bar {
	height: 20px;
	width: 260px;
	position: relative;
	margin: 10px auto 20px auto;
}
#backlink {}
#backlink a {
	color: #666;
	text-decoration: none;
	font-size: .7rem;
	width: none;
	padding: 0;
	border: none;
	line-height: normal;
}
#backlink a:hover {
	color: #CCC;
	text-decoration: none;
	font-size: .7rem;
	background: none;
}
#siteseal {background: #1d3562; padding: 18px 0 10px 0; margin-top: 10px;}

#secure-box {position: relative;}
#secure-box img {width: 100px; cursor: pointer;}
#secure-tip {
	width: 110px;
	margin-left: 54px;
	padding: 10px;
	background-color: rgba(255,255,255,0.9);
	position: absolute;
	left: 50%;
	top: -50px;
	font-size: 12px;
	text-align: left;
	display: none;
}

/************ end of form stuff *************/


h1 {font-size: 2rem; margin: .67rem 0;}
h2 {text-align: center;}
.bold-type {font-weight: 700;}
.italic-type {font-style: italic;}
.small-print {font-size: 12px; line-height: 1.6}
.medium-print {font-size: 14px;}
.align-left {text-align: left;}
.align-right {text-align: right;}
.align-center {text-align: center;}
.dont-break {white-space: nowrap;}
.clearing {clear: both;}


/********************** survey stuff ********************/

.bold-blue {font-weight: 700; color: #44419c;}
.text-survey, .select-survey, .textarea-survey {
	width: 100%;
	height: 42px;
	margin: 6px auto;
	padding: 0 0 0 10px;
	font-size: 16px;
	line-height: 120%;
	border: 1px solid #CCC;
	border-radius: 0; /* defeating user agent stylesheet 5px */
}
.text-survey {padding: 10px;}
.textarea-survey {height: 140px;}
.select-survey {
	background-color: #fff;
	background-image: url(../images/downArrowBlue60x65.png);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	color: #333;
}
.check-choice, .radio-choice {display: block; line-height: 2.0;}

#survey input[type=checkbox], input[type=radio] {
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
	transform: scale(1.5);
  padding: 10px;
}
#survey input[type="checkbox"], #survey input[type="radio"] {position: relative; top: -2px; left: -2px;}

.button-quiet {
	padding: 8px 20px;
	border-radius: 8px;
	border: 1px solid #999;
	font-size: 16px;
}
/********************** end survey stuff ********************/


.footer-bottom {
	max-width: 994px;
	height: 310px; /* must match #push and #above/#above-atf */
	text-align: center;
	margin: 0 auto;
	padding: 20px 15px 30px 15px;
	/*color: #9eb2c0;*/color: #dccbc9;
	position: relative;
	z-index: 100;
}
.footer-bottom a {
	font-size: .8rem;
	line-height: 2.5;
	text-decoration: none;
	color: #dccbc9;
	border: 1px solid rgba(255,255,255,0.3);
	padding: 6px;
	white-space: nowrap;
}
.footer-bottom a:hover {
	text-decoration: none;
	color: #fff;
	background-color: rgba(255,255,255,0.3);
}

.footer-fixed {
	position: fixed;
	right: 0; bottom: 0; left: 0;
	text-align: center;
	font-size: .8rem;
	padding: 6px 15px 6px 15px;
	color: #D3D6B9;
}
.footer-fixed a {
	margin-left: 8px;
	font-size: .8rem;
	text-decoration: none;
	color: #D3D6B9;
	padding: 8px;
	white-space: nowrap;
}
.footer-fixed a:hover {
	text-decoration: none;
	color: #fff;
	background-color: rgba(255,255,255,0.3);
}
.footer-fixed a:last-child {border: none;}

@media screen and (min-width: 320px) {
	.testimonial {padding-right: 400px;}
}
@media screen and (min-width: 359px) {
	body {font-size: 16px;}
	#headline {font-size: 3.0rem;}
	#top-left {font-size: 1.2rem;}
	#banner {font-size: 15px;}
	#phone-box {font-size: 24px;}
}
@media screen and (min-width: 360px) {
	.testimonial {padding-right: 360px;}
}
@media screen and (min-width: 375px) {
	#top-left {padding-top: 200px;}
	.testimonial {padding-right: 345px;}
	#test-window img {width: 300px;}
}
@media screen and (min-width: 414px) {
	.testimonial {padding-right: 305px;}
}
@media screen and (min-width: 480px) {
	.testimonial {padding-right: 240px;}
}
@media screen and (min-width: 568px) {
	.testimonial {padding-right: 152px;}
}
@media screen and (min-width: 640px) {
	.testimonial {padding-right: 80px;}
	#serious .iblock {border: none;}
}
@media screen and (min-width: 667px) {
	.testimonial {padding-right: 53px;}
}
@media screen and (min-width: 736px) {
	.testimonial {padding-right: 20px;}
}


@media screen and (min-width: 790px) {
	header {min-height: 60px;}
	#brand {display: inline-block;}
	#brand img {width: 230px;}
	#nav-link, #top-nav-V {display: none;}
	#top-nav-H {display: inline-block;}

	#above {
		background-image: url(../images/AdobeStock_209063839_1660x1110.jpg);
		background-position: center top;
		background-size: cover;
	}

	#top-box {
		background-image: url(../images/AdobeStock_209063839_1660x1110.jpg);
	}
	#top-left {
		width: 40%;
		padding: 80px 10%;
		vertical-align: middle;
		display: table-cell;
		text-align: right;
	}
	#top-right {
		width: 40%;
		padding: 6% 10%;
		vertical-align: bottom;
		display: table-cell;
	}
	#phone-box {display: block;}
	#headline {font-size: 4.0rem;}
	/*.ground-white, .ground-blue {padding: 80px 0 100px 0;}*/
	.ground-white {padding: 80px 0 100px 0;}
	#serious {padding: 80px 0 100px 0;}
	section {font-size: 1.25rem;}

	#form-box {margin: 15% auto 0 auto;}
}
@media screen and (min-width: 970px) {
	.third {max-width: 280px;}
}
@media screen and (min-width: 1450px) {
	#above-atf {background-position: center -100px;}
}
@media screen and (min-width: 1900px) {
	#above-atf {background-position: center -200px;}
}
@media screen and (min-width: 2200px) {
	#above-atf {background-position: center -300px;}
}