/* General */
#page .container { width: 1200px; }

/* Banner */
#banner section { background: #000 url( '../images/bg/banner.jpg' ) no-repeat center top/cover; height: 40vw; box-sizing: border-box; padding: 4vw 0; }
#banner .male { background: #FFF url( '../images/bg/banner-male.jpg' ) no-repeat center top/cover; }
#banner form { margin: 0 69px 0 auto; width: 53.5vw; color: #fff; }
#banner .male form { margin: 0 69px 0 auto; width: 53.5vw; color: #707070; }
.headline { display: block; margin: 0 0 26px; width: 96%; }
#banner [type="text"], #banner [type="date"] { color: #000; background: #f1f1f1; float: left; font-size: 15pt; padding: 0 15px; width: 49%; box-sizing: border-box;border: 0; margin: 0 0 2%; min-height: 30px; height: 3vw; }
#banner [type="text"]:nth-of-type( 2n ), #banner [type="date"] { float: right; }
#banner ::-webkit-input-placeholder { color: #000; text-transform: uppercase; }
#banner :-moz-placeholder { color: #000; text-transform: uppercase; opacity: 1; }
#banner ::-moz-placeholder { color: #000; text-transform: uppercase; opacity: 1; }
#banner :-ms-input-placeholder { color: #000; text-transform: uppercase; }
#banner [name="preferred_date"] { color: #000; line-height: 30px; }
#banner [type="submit"] { display: inline-block; vertical-align: top; background: linear-gradient( 25deg, #ff9f1a 0%, #ffc40f 100% ); color: #fff; font-weight: 900; letter-spacing: -.5px; font-size: 20pt; padding: 13px 38px; }
#banner [type="submit"]:hover { background: #e2c815; }
.free-10ml-lotion { display: block; margin: 15px 0 0; }
#banner small { display: block; font-size: 13pt; letter-spacing: .5px; font-weight: 500; line-height: 1.3; margin: 23px 0 0; }
#banner a { color: #fff; font-weight: 600; text-decoration: underline; }
#banner .male a { color: #707070; font-weight: 600; text-decoration: underline; }

/* Introduction */
#intro { width: 1000px; max-width: 90%; margin: 65px auto; color: #646667; }
h1 { letter-spacing: -2px; line-height: .9; font-size: 35pt; margin: 0 0 32px; color: #5f605f; width: 720px; }
h1 b { letter-spacing: -2px; display: block; font-weight: 400; background: linear-gradient( 90deg, #4ae1f5 0%, #112895 45%, #611365 60%, #c90669 90% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#intro p { letter-spacing: .5px; font-size: 16pt; line-height: 1.2; }
#intro p b { color: #a00b60; font-weight: 800; text-transform: uppercase; letter-spacing: -1px; }
#intro sup { position: relative; top: 4px; }
#intro > div { word-break: keep-all; float: left; width: 48%; }
#intro > div:last-of-type { float: right; width: 46%; }
#intro > div p:first-of-type { margin: 0 0 22px; display: block; }
#intro > div p:last-of-type { margin: 0; }
#intro span { display: block; }
#intro section { font-size: 0; margin: 56px -20px 70px; text-align: center; }
#intro section div { background: url( '../images/bg/stimulating.png' ) no-repeat center top; font-size: 19pt; font-weight: 400; letter-spacing: -1px; margin: 0 20px; display: inline-block; vertical-align: top; padding: 200px 0 0; width: calc( ( 100% - 200px ) / 5 ); }
#intro section div:nth-of-type( 1 ) { background-position-y: 8px; }
#intro section div:nth-of-type( 2 ) { background-image: url( '../images/bg/increasing.png' ); }
#intro section div:nth-of-type( 3 ) { background-image: url( '../images/bg/promoting.png' ); background-position-y: 24px; }
#intro section div:nth-of-type( 4 ) { background-image: url( '../images/bg/preventing.png' ); }
#intro section div:nth-of-type( 5 ) { background-image: url( '../images/bg/protecting.png' ); background-position-y: 10px; }
#intro section h2 { font-weight: 900; margin: 0; letter-spacing: -1px; color: #36a7d9; line-height: 1; }
#intro section div:nth-of-type( 2 ) h2 { color: #1c409f; }
#intro section div:nth-of-type( 3 ) h2 { color: #3c1472; }
#intro section div:nth-of-type( 4 ) h2 { color: #781266; }
#intro section div:nth-of-type( 5 ) h2 { color: #b70867; }

/* Banners */
.banner { padding: 81px 0; color: #FFF; position: relative; box-sizing: border-box; }
.banner > div { width: 980px; margin: auto; max-width: 90%; }
.banner div div { width: 420px; max-width: 100%; }
.banner.right div div { margin: 0 0 0 auto; }
.banner h2 { font-size: 47pt; letter-spacing: -3px; line-height: .85; margin: 0 0 22px; font-weight: 100; }
.banner span { display: block; color: #34c7e4; }
.banner p { letter-spacing: .5px; font-size: 12pt; line-height: 1.3; margin: 0 0 20px; }
.banner p:last-of-type { margin: 0; }
.banner b { font-weight: 600; text-transform: uppercase; color: #44d1ed; letter-spacing: -.5px; }
.banner h3 { color: #34c7e4; margin: 0; font-size: 19pt; text-transform: none; font-weight: 400; }
.banner.one { background: url( '../images/bg/scientifically-proven.jpg' ) no-repeat right top/cover; padding: 70px 0 80px; }
.banner.one:before { content: ' '; display: block; position: absolute; top: 0; left: 50%; transform: translateX( -50% ); z-index: 1; border-style: solid; border-width: 50px 110px 0; border-color: #fff transparent transparent; }
.banner.one div div { width: 500px; }
.banner.one h2 { font-size: 39pt; }
.banner.one h2 sup { font-size: 28pt; line-height: 1; position: relative; top: 7px; left: 3px; }
.banner.one img { display: block; float: left; margin: 0 30px 10px 0; }
.banner.two { background: url( '../images/bg/potent-key-actives.jpg' ) no-repeat left top/cover; padding: 89px 0 110px; }
.banner.two > div { width: 1059px; }
.banner.two div div { width: 400px; }

/* Free recharge */
.container > img { display: block; }

/* Consultation */
#consultation { background: url( '../images/bg/complimentary-consultation.jpg' ) no-repeat center/cover; padding: 70px 0; font-size: 0; text-align: center; color: #FFF; }
#consultation aside, #consultation form { display: inline-block; vertical-align: top; text-align: left; margin: 0 25px; }
#consultation aside { text-transform: uppercase; width: 275px; max-width: 100%; box-sizing: border-box; font-size: 12.6pt; font-weight: 100; letter-spacing: 2px; }
#consultation h4 { color: #FFF; text-transform: uppercase; font-weight: 900; letter-spacing: -1px; font-size: 23pt; margin: 10px 0 9px; }
#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: 6px 12px; margin: 7px 0 25px; background: #fc902c; background: linear-gradient( 35deg, #fc902c 0%, #fdbb2b 100% ); }
#consultation [type="text"] { background: #fff; border: none; opacity: 50%; color: #000; }
#disclaimer { font-size: 8.4pt; letter-spacing: 1px; line-height: 1.3; }
#disclaimer a { color: #FFF; font-weight: 700; text-decoration: underline; }

/* History */
#history { color: #FFF; background: no-repeat url( '../images/bg/our-history.jpg' ) center center/cover; }
#history div { background: rgba( 0, 0, 0, .6 ); padding: 98px 98px 83px 112px; width: 585px; box-sizing: border-box; }
#history h3 { font-size: 34pt; letter-spacing: -.5px; font-weight: 100; }
#history p { margin: 0 0 15px; font-size: 13pt; line-height: 1.2; }

/* 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: 1760px) {
	#banner [type="submit"] { font-size: 18pt; padding: 13px 28px; }
}

@media (max-width: 1610px) {
	#banner section { padding: 3.5vw 0; }
	#banner [type="submit"] { font-size: 15pt; padding: 11px 23px; }
}

@media (max-width: 1460px) {
	.headline { margin: 0 0 23px; }
	#banner [type="text"], #banner [type="date"] { font-size: 12pt; }
	#banner small { font-size: 11pt; margin: 16px 0 0; }
}

@media (max-width: 1335px) {
	#banner [type="submit"] { font-size: 13pt; }
	#banner small { font-size: 9pt; margin: 12px 0 0; }
}

@media (max-width: 1215px) {
	#banner section { padding: 3vw 0; }
	#banner [type="submit"] { font-size: 11pt; padding: 9px 17px; }
}

@media (max-width: 1130px) {
	#intro { margin: 30px auto; }
	
	#history div { padding: 40px; width: 50%; }
	#history h3 { font-size: 27pt; }
}

@media (max-width: 1070px) {
	#banner section { background-position: left top; height: auto; padding: 25px 0; }
	
	.banner, .banner.one, .banner.two { padding: 40px 0; }
	.banner.one { padding-top: 80px; }
}

@media (max-width: 1000px) {
	#intro section { margin: 56px -20px 30px; }
	#intro section div { width: calc( ( 100% - 120px ) / 3 ); margin: 0 20px 40px; }
}

@media (max-width: 900px) {
	h1 { width: auto; }

	#consultation { padding: 48px 15px; }
	#consultation h4 { margin: 6px 0; }
}

@media (max-width: 864px) {
	#consultation { padding: 30px 15px; }
	#consultation aside, #consultation form { display: block; margin: auto; }
	#consultation aside { margin: 0 auto 23px; padding: 0; text-align: center; }
	#consultation .line { float: none; width: 100%; margin: 0; }
	#consultation form { max-width: 270px; text-align: center; }
}

@media (max-width: 840px) {
	h1 b { display: inline; }
	#intro p { font-size: 13pt; letter-spacing: .5px; }
	#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:last-of-type { display: block; margin: 22px 0 0; }
	#intro br { display: none; }
	
	.banner { text-align: center; }
	.banner div div, .banner.right div div { margin: auto; }
}

@media (max-width: 780px) {
	#banner section { background: #000; }
	#banner .male { background: #fff; }
	#banner form, #banner .male form { width: 480px; margin: auto; max-width: 90%; }
	#banner [type="submit"] { font-size: 13pt; padding: 10px 18px; }
	#banner p { font-size: 11pt; }
	#banner small { font-size: 9pt; }
}

@media (max-width: 700px) {	
	#intro { margin: 10px auto 30px; }
	h1, h1 b { font-size: 23pt; margin: 0 0 20px; padding: 0; }

	.banner h2, .banner.one h2 { font-size: 32pt; }
	
	#history { background: 0; }
	#history div { width: 100%; padding: 30px 20px; background: #000; }
}

@media (max-width: 620px) {
	#intro section div { width: 125px; line-height: 1; font-size: 15pt; background-size: auto 110px; padding: 130px 0 0; }
	#intro section div:nth-of-type( 3 ) { background-size: 83px; }
	#intro section h2 { font-size: 14pt; }
}

@media (max-width: 460px) {
	#banner [type="text"], #banner [type="date"], #banner [type="text"]:nth-of-type( 2n ) { font-size: 10pt; float: none; width: 100%; }
	#banner [type="submit"] { font-size: 10pt; }
	
	#intro section { margin: 24px 0 30px; }
	#intro section div { margin: 0 8px 40px; }
	
	.banner h2, .banner.one h2 { font-size: 27pt; }
}