/* General */
#page .container { width: 1200px; }
#page hr { height: 2px; background: #a8a8aa; width: 500px; max-width: 60%; margin: 50px auto; }
#page h2 { font-size: 17pt; text-transform: none; font-weight: 600; }

/* Introduction */
#intro { padding: 100px 89px; background: no-repeat url( '../images/bg/summary.jpg' ) left top; }
#intro > div { width: 490px; max-width: 100%; color: #4a4f55; }
#intro h1 { color: #32667c; font-size: 45pt; line-height: 1.1; }
#intro h1 b { font: inherit; font-weight: 900; font-size: 40pt; display: block; color: #fff; }
#intro section { font-size: 0; margin: 0 0 19px; }
#intro section div { display: inline-block; vertical-align: middle; font-size: 14pt; text-align: center; }
#intro section div:first-of-type { border-right: 6px solid #fff; padding: 0 6px 0 0; margin: 0 12px 0 0; }
#intro big { font-weight: 900; font-size: 80pt; letter-spacing: -6px; line-height: .85 }
#intro sup { text-transform: uppercase; font-weight: 600; font-size: 15pt; position: relative; top: -12px; }
#intro section div:first-of-type sup { font-size: 18pt; top: -31px; left: -5px; }
#intro section div:last-of-type sup:last-of-type { top: 7px; left: 3px; }
#intro small { display: block; font-weight: 400; font-size: 12pt; letter-spacing: .5px; }
#intro p { font-size: 16.2pt; width: 427px; max-width: 100%; line-height: 1.2; margin: 0 0 50px; }
#intro ul { font-weight: 400; font-size: 14pt; line-height: 1.5; }
#intro li:before, #intro li:after { content: ' '; height: 8px; width: 8px; border-radius: 50%; background: #ff9e1b; margin: 0 10px; display: inline-block; vertical-align: middle; }
#intro span { display: block; margin: 46px 0 22px; color: #fff; font-size: 16pt; font-weight: 500; line-height: 1.2; }
#intro button { border: 2px solid #ff9e1b; background: #ff9e1b; text-transform: uppercase; padding: 12px 24px; line-height: 1; color: #4a4f55; font-size: 14pt; }
#intro button:hover { color: #ff9e1b; background: 0; }

/* Description */
#description { text-align: center; padding: 70px 20px; }
#description p { width: 920px; margin: auto; max-width: 100%; font-size: 17pt; letter-spacing: .25px; line-height: 1.6; }
#description big { display: block; color: #00b4ac; font-size: 23pt; }

/* Banners */
.banner { box-sizing: border-box; background: no-repeat url( '../images/bg/defence-regulating-pre-treatment.jpg' ) center/cover; }
.banner.two { background-image: url( '../images/bg/balance-sebum-control-treatment.jpg' ); }
.banner.three { background-image: url( '../images/bg/oxyjet-therapy.jpg' ); }
.banner.four { background-image: url( '../images/bg/chromolight-therapy.jpg' ); }
.banner div { width: 50%; box-sizing: border-box; padding: 95px; background: rgba( 50, 102, 124, .85 ); color: #FFF; font-size: 15pt; font-weight: 400; }
.banner.right div { margin: 0 0 0 auto; }
.banner.two div { background: rgba( 0, 180, 172, .85 ); }
.banner.three div { background: rgba( 74, 79, 85, .8 ); }
.banner.four div { background: rgba( 168, 168, 170, .7 ); }
.banner b { display: block; text-transform: uppercase; color: #000; font-size: 13.4pt; font-weight: 600; margin: 30px 0 2px; }
.banner li { padding: 0 0 0 14px; position: relative; line-height: 1.5; }
.banner li:before { content: ' '; height: 7px; width: 7px; border-radius: 50%; background: #fff; position: absolute; top: 11px; left: 0; }
.banner span { display: block; color: #4a4f55; margin: 10px 0; font-weight: 600; }
.banner p { line-height: 1.3; }

/* Recommended for */
#recommended { background: #4a4f55; color: #fff; text-align: center; padding: 20px; font-weight: 400; font-size: 15pt; }

/* Consultation */
#consultation { background: #00b4ac; 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 { width: 210px; max-width: 100%; box-sizing: border-box; font-size: 11.4pt; font-weight: 100; letter-spacing: 2px; }
#consultation aside span { display: block; font-weight: 400; letter-spacing: 1px; }
#consultation h4 { color: #FFF; text-transform: uppercase; font-weight: 900; letter-spacing: -1px; font-size: 20pt; margin: 10px 0 14px; }
#consultation aside div { font-weight: 400; letter-spacing: 0; font-size: 13pt; }
#consultation form { width: 100%; max-width: 520px; }
#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; }
#disclaimer { font-size: 8.4pt; letter-spacing: 1px; line-height: 1.3; }
#disclaimer a { color: #FFF; font-weight: 700; text-decoration: underline; }

/* Safety measures */
#safety { background: #efefef; padding: 43px 0; }
#safety > .container { width: 992px; max-width: 96%; margin: auto; }
#safety h2 { margin: 0 0 25px 41px; background: url( '../images/icons/safe.png' ) left top no-repeat; color: #58595b; font-weight: 300; font-size: 25pt; letter-spacing: 11px; text-align: left; max-width: 100%; line-height: 1; padding: 20px 0 18px 145px; }
#safety h2 b { font-size: 35.4pt; font-weight: 900; letter-spacing: 6px; color: #35647e; display: block; line-height: 1; margin: 15px 0 0; }
#safety h2 span { color: #00afaa; }
#safety-tips { display: inline-flex; flex-flow: row wrap; justify-content: space-evenly; align-items: baseline; letter-spacing: 0; }
#safety-tips div { margin: 0 10px 30px; width: 190px; }
#safety-tips img { margin: 0 0 15px; display: block; }
#safety-tips b { font-weight: 900; text-transform: uppercase; }
#safety-tips span { font-weight: 600; }
#safety-tips p { color: #444; font-weight: 500; font-size: 11.6pt; line-height: 1.2; margin: 0; }

/* 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: 960px) {
	#description { padding: 43px 20px; }
	#description p { font-size: 15pt; line-height: 1.5; }
	#description br { display: none; }
	#description big { font-size: 20pt; }
}

@media (max-width: 900px) {
	.banner div { width: 100%; padding: 44px 70px; text-align: center; }
	.banner li { padding: 0; }
	.banner li:before { display: inline-block; vertical-align: middle; position: static; margin: -3px 10px 0 0; }
	
	#consultation { padding: 30px 15px; }
	#consultation aside { text-align: center; }
	#consultation h4 { margin: 6px 0; }
}

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

@media (max-width: 660px) {
	#intro { background: #00b4ab; padding: 34px 37px; }
	#intro > div { margin: auto; text-align: center; }
	#intro h1 b { font-size: 33pt; }
	#intro h1 { font-size: 35pt; }
	#intro p { margin: 0 auto 40px; }
	#intro span { margin: 31px 0 22px; }
}

@media (max-width: 600px) {
	#page hr { height: 1px; background: #e7e7e7; margin: 35px auto; }
	
	#description { padding: 24px 20px; }
	#description p { font-size: 14pt; line-height: 1.3; }
	#description big { font-size: 16pt; line-height: 1.2; }
}

@media (max-width: 460px) {
	#intro { padding: 34px 20px; }
	#intro h1 { font-size: 27pt; letter-spacing: -2px; margin: 0 0 9px; }
	#intro h1 b { font-size: 28pt; letter-spacing: 0; }
	#intro p { font-size: 14pt; }
	#intro section div { display: block; }
	#intro section div:first-of-type { padding: 0 0 10px; margin: 0 0 10px; border: 0; position: relative; }
	#intro section div:first-of-type:after{ content: ' '; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX( -50% ); width: 50%; height: 2px; background: #fff;  }
	#intro ul { font-size: 12pt; letter-spacing: -.25px; }
	#intro li:before, #intro li:after { margin: -2px 5px 0; width: 6px; height: 6px; }
	#intro span { font-size: 15pt; }
	
	.banner div { padding: 32px; font-size: 13pt; }
	
	#recommended { font-size: 14pt; }
}