/* General */
#page .container { counter-reset: section; width: 1200px; }

/* Banner */
#banner { background: #eceaea url( '../images/bg/banner.jpg' ) no-repeat center top/cover; box-sizing: border-box; padding: 6vw 0; }
#banner > div { margin: 0 0 0 auto; width: 53.5vw; }
#banner form { margin: 0 120px 0 auto; color: #000; }
#desktop { display: block; margin: 0 0 26px; width: 100%; }
#responsive { display: none; cursor: pointer; }
#banner input, #banner select { color: #cacaca; background: #fff; float: left; font-size: 15pt; padding: 0 15px; width: 49%; box-sizing: border-box;border: 0; margin: 0 2% 2% 0; min-height: 30px; height: 3vw; }
#banner input:nth-of-type( 2n ), #banner select { margin-right: 0; }
#banner select { color: #000; }
#banner ::-webkit-input-placeholder { color: #cacaca; text-transform: uppercase; }
#banner :-moz-placeholder { color: #cacaca; text-transform: uppercase; opacity: 1; }
#banner ::-moz-placeholder { color: #cacaca; text-transform: uppercase; opacity: 1; }
#banner :-ms-input-placeholder { color: #cacaca; text-transform: uppercase; }
#banner [type="submit"], #success-stories > button { width: 49%; display: inline-block; vertical-align: top; background: linear-gradient( to right, #f3c963 0%, #f7806c 100% ); color: #fff; font-weight: 900; letter-spacing: -.5px; font-size: 20pt; padding: 13px 38px; }
#banner [type="submit"]:hover,  #success-stories > button:hover { background: #ffa719; }
#banner small { width: 82px; display: block; color: #8b9dd6; overflow: hidden; font-size: 9.9pt; width: 70%; letter-spacing: .5px; line-height: 1.3; margin: 23px 0 0; }
#banner a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Introduction */
#intro { width: 1000px; max-width: 90%; margin: 58px auto 74px; color: #63656a; }
h1 { display: block; width: 783px; max-width: 100%; color: #003153; letter-spacing: -4px; line-height: .9; font-size: 44pt; font-weight: 300; background: linear-gradient( 19deg, #749fe4 1%, #c5a3d2 66%, #e69cc5 100% ); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
#intro p { letter-spacing: 1px; font-weight: 100; font-size: 14pt; line-height: 1.3; }

/* Banners */
.effect { padding: 70px 0 80px; color: #fff; position: relative; box-sizing: border-box; }
.effect > div { width: 980px; margin: auto; max-width: 90%; }
.effect div div { position: relative; width: 434px; max-width: 100%; }
.effect.right div div { margin: 0 0 0 auto; }
.effect h2 { font-size: 44pt; letter-spacing: -4px; line-height: .85; margin: 0 0 57px; color: #fff; }
.effect p { font-size: 12.5pt; line-height: 1.3; color: #fff; }
.effect hr { position: absolute; top: 0; right: 0; background: url( '../images/icons/line-1.png' ) no-repeat bottom left; width: 680px; height: 152px; margin: 23px auto; }
.effect.one { background: url( '../images/bg/revolutionary.jpg' ) no-repeat right bottom; }
.effect.one:before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX( -50% ); display: block; border-left: 127px solid transparent; border-right: 127px solid transparent; border-top: 42px solid #fff; }
.effect.two { background: url( '../images/bg/exo-a.jpg' ) no-repeat left center; }
.effect.two div div { width: 474px; }
.effect.two h2 { background: linear-gradient( 19deg, #749fe4 1%, #c5a3d2 66%, #e69cc5 100% ); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } 
.effect.two p { color: #76777b; }
.effect.two hr { width: 683px; height: 55px; background: url( '../images/icons/line-2.png' ) no-repeat left top; right: auto; top: 103px; }
.effect.three { background: url( '../images/bg/unmatched-benefits.jpg' ) no-repeat right center; }
.effect.three div div { width: 442px; }
.effect.three hr { width: 596px; height: 45px; background: url( '../images/icons/line-3.png' ) no-repeat right top; top: 153px; }

/* CTA */
#cta { position: relative; background: url( '../images/bg/cta.jpg' ) no-repeat center/cover; padding: 65px 0; }
#cta:before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX( -50% ); display: block; background: url( '../images/icons/unmatched-benefits-after.png' ) no-repeat center top; width: 221px; height: 38px; }
#cta h2 { line-height: 1; background: #fff; font-size: 44pt; letter-spacing: -5px; text-align: center; padding: 12px 15px; margin: 0 0 25px; }
#cta span { display: inline-block; color: #000; background: linear-gradient( 90deg, #a4c0de 0%, #e1b6d2 80% ); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
#cta p { letter-spacing: .5px; line-height: 1.2; font-size: 12pt; color: #fff; text-align: center; width: 767px; max-width: 90%; margin: auto; }
#cta b { font: inherit; text-transform: uppercase; font-weight: 900; letter-spacing: -.5px; }

/* Consultation */
#consultation { background: #00afab; padding: 60px 0; font-size: 0; text-align: center; color: #FFF; }
#consultation aside, #consultation form { display: inline-block; vertical-align: top; text-align: left; margin: 0 40px; }
#consultation aside { width: 299px; max-width: 100%; font-size: 14pt; font-weight: 100; letter-spacing: 2px; }
#consultation h4 { color: #FFF; text-transform: uppercase; font-weight: 900; letter-spacing: -1px; font-size: 24pt; margin: 0 0 23px; }
#consultation form { width: 100%; max-width: 460px; }
#consultation .line { float: left; width: 43%; margin: 0 13% 0 0; }
#consultation .line:nth-of-type( even ) { margin: 0; }
#consultation label { text-align: left; color: #FFF; letter-spacing: 2px; font-size: 8pt; margin: 0 0 3px; }
#consultation [type="submit"] { padding: 8px 29px; margin: 7px 0 27px; }
#disclaimer { font-size: 8.4pt; letter-spacing: 1px; line-height: 1.3; }
#disclaimer a { color: #FFF; font-weight: 700; text-decoration: none; }

/* Sign up bar */
#fixed-bar { position: fixed; bottom: 0; padding: 10px 0; background: #00b2a9; width: 100%; left: 0; z-index: 7; color: #FFF; text-align: center; display: block; text-transform: uppercase; font-weight: 100; font-size: 12pt; cursor: pointer; transition: all 0.4s; line-height: 1em; }
#fixed-bar:hover { opacity: .8; }

@media (max-width: 1610px) {
	#banner { padding: 5.5vw 0; }
	#banner [type="submit"] { padding: 11px 23px; }
}

@media (max-width: 1460px) {
	#desktop { margin: 0 0 23px; }
	#banner small { font-size: 11pt; margin: 16px 0 0; }
}

@media (max-width: 1335px) {
	#banner input { font-size: 13pt; }
	#banner small { font-size: 8pt; margin: 12px 0 0; }
}

@media (max-width: 1130px) {
	#banner { background-position: center; padding: 50px 0; }
	#banner [type="submit"] { font-size: 16pt; }

	#intro { margin: 50px auto 30px; }
}

@media (max-width: 1070px) {
	.effect.two, .effect.three { padding: 40px 0; }
}

@media (max-width: 980px) {
	#intro { margin: 30px auto; }
	h1 { font-size: 34pt; letter-spacing: -3px; }
	h1 br { display: none; }

	.effect h2 { font-size: 40pt; }
	.effect hr { top: -12px; }
	.effect.two hr { top: 92px; }
	.effect.three hr { top: 137px; }
}

@media (max-width: 920px) {
	#banner > div { width: 67.5vw; }

	#consultation { padding: 30px 15px; }
	#consultation aside, #consultation form { display: block; margin: auto; }
	#consultation aside { margin: 0 auto 20px; padding: 0; text-align: center; }
	#consultation h4 { margin: 6px 0; }
}

@media (max-width: 850px) {
	#intro p { font-size: 13pt; letter-spacing: .5px; }
	#intro br, #headline br { display: none; }
	#intro > div, #intro > div:last-of-type { float: none; width: 100%; font-size: 13pt; display: inline; line-height: 1.2; }
	#intro > div:first-of-type p:last-of-type, #intro > div:last-of-type p:first-of-type { display: inline; }
	#intro > div:last-of-type p { display: block; margin: 22px 0 0; }

	.effect { text-align: center; }
	.effect h2 { font-size: 32pt; margin: 0; }
	.effect div div, .effect.right div div { margin: auto; }
	.effect p { letter-spacing: 0; }
	.effect h2 br, .effect p br { display: none; }
	.effect:nth-of-type( n ) hr { position: static; background: #fff; width: 100%; height: 4px; margin: 18px auto; }
	.effect.two hr, .effect.three hr { background: linear-gradient( 19deg, #749fe4 1%, #c5a3d2 66%, #e69cc5 100% ); }

	#cta h2 { font-size: 35pt; letter-spacing: -3px; }
}

@media (max-width: 780px) {
	#banner { background: #f6f6f7; padding: 0; }
	#desktop { display: none; }
	#responsive { display: block; width: 100%; }
	#banner > div { width: 480px; margin: auto; max-width: 90%; padding: 30px 0; }
	#banner form { margin: auto; }
	#banner input { width: 48%; font-size: 12pt; }
	#banner [type="submit"] { width: 48%; font-size: 13pt; padding: 10px 18px; }
	#banner small { width: 100%; }
}

@media (max-width: 700px) {
	h1 { font-size: 31pt; }

	.effect.one:before, #cta:before { display: none; }

	#cta { padding: 40px 0; }
	#cta h2 { font-size: 30pt; }
}

@media (max-width: 603px) {
	#banner .desktop { display: none; }
	#banner .responsive { display: block; }

	#consultation .line { float: none; width: 100%; margin: 0; }
	#consultation form { max-width: 270px; text-align: center; }
}

@media (max-width: 480px) {
	#banner input, #banner select, #banner [type="submit"] { font-size: 10pt; float: none; width: 100%; }
	#banner [type="submit"] { font-size: 12pt; }

	#intro p { font-size: 12pt; }

	.effect, .effect.one, .effect.two, .effect.three { padding: 30px 0; }
	.effect h2 { font-size: 25pt; letter-spacing: -2px; margin: 0 0 16px; }
	.effect p { font-size: 12pt; }

	#cta h2 { font-size: 24pt; }

	#consultation h4 { font-size: 20pt; }
}