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

/* Banner */
#banner img { width: 100%; cursor: pointer; display: block; }

/* Introduction */
#intro { width: 1000px; max-width: 90%; margin: 65px auto; color: #646667; }
h1 { max-width: 100%; background: #0cb2bd; background: linear-gradient( to right, #0cb2bd 0%, #262ecc 50%, #d92177 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 9px 0 9px; color: #9a0626; width: max-content; width: -webkit-max-content; letter-spacing: -2px; line-height: 1; font-size: 35pt; font-weight: 500; margin: 0 0 23px; }
h1 b { font-weight: 900; font-size: 35.2pt; letter-spacing: -2px; display: block; }
#intro p { letter-spacing: 1px; font-weight: 100; font-size: 14.7pt; line-height: 1.2; }
#intro > div { word-break: keep-all; float: left; width: 48%; }
#intro > div:last-of-type { float: right; width: 47%; }
#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 small { display: block; font-style: italic; margin: 29px 0 0; letter-spacing: 1px; font-weight: 100; font-size: 11pt; line-height: 1.2; }

/* Banners */
.banner { padding: 71px 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: 33pt; letter-spacing: -2px; line-height: .95; margin: 0 0 22px; }
.banner p { letter-spacing: .5px; font-size: 11.8pt; line-height: 1.3; }
.banner b { font-weight: 900; }
.banner.one { background: url( '../images/bg/pre-regulating-therapy.jpg' ) no-repeat left top/cover; padding: 70px 0; }
.banner.one:before { content: ' '; display: block; position: absolute; top: 0; left: 50%; z-index: 1; transform: translateX( -50% ); border-top: 53px solid #FFF; border-left: 98px solid transparent; border-right: 98px solid transparent; width: 0; height: 0; }
.banner.two { background: url( '../images/bg/high-frequency.jpg' ) no-repeat center top/cover; padding: 82px 0; }
.banner.two > div { width: 1059px; }
.banner.two div div { width: 440px; }
.banner.three { background: url( '../images/bg/defence-hair-booster.jpg' ) no-repeat left top/cover; }
.banner.three div div { width: 435px; }
.banner.four { background: url( '../images/bg/cap-ls-therapy.jpg' ) no-repeat right top/cover; padding: 53px 0; }
.banner.four div div { width: 480px; }

/* Consultation */
#consultation { background: #00a199; 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: 245px; max-width: 100%; box-sizing: border-box; font-size: 11.4pt; 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 14px; }
#consultation sup { font-weight: 500; line-height: 0; position: relative; top: 3px; font-size: 15pt; }
#consultation small { display: block; font-weight: 300; letter-spacing: 0; font-size: 9pt; margin: 25px 0 0; font-style: italic; }
#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: 1130px) {
	#intro { margin: 30px auto; }
}

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

@media (max-width: 1060px) {
	.banner.right div div { margin: auto; }
	
	#safety { padding: 40px 0; }
	#safety h2 { background: 0; padding: 0; margin: 0 0 30px; text-align: center; letter-spacing: 0; }
	#safety h2 b { letter-spacing: 0; }
	#safety img { margin: 0 auto 15px; }
	#safety div { text-align: center; }
	#safety-tips div { width: 215px; }
}

@media (max-width: 900px) {
	#consultation { padding: 30px 15px; }
	#consultation aside { text-align: center; }
	#consultation h4 { margin: 6px 0; }
	#consultation small { margin: 14px 0 30px; }
}

@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%; margin: 0 0 20px; font-size: 13pt; }
	
	.banner { text-align: center; }
	.banner.one { padding: 84px 0 40px; }
	.banner div div, .banner.right div div { margin: auto; }
	.banner br { display: none; }
	
	#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: 670px) {	
	#intro { margin: 10px auto 30px; }
	h1, h1 b { font-size: 25pt; margin: 0 0 20px; padding: 0; }
	h1 { margin-top: 30px; }
	
	.banner h2 { font-size: 24pt; }
	
	#safety h2 { font-size: 22pt; }
	#safety h2 b { font-size: 29pt; letter-spacing: -1px; margin: 0; }
}

@media (max-width: 460px) {
	#safety h2 { font-size: 21pt; letter-spacing: -1px; }
	#safety h2 b { font-size: 25pt; }
}