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

/* Summary */
#summary { background: no-repeat url( '../images/bg/summary.jpg' ) top right/cover; padding: 96px 66px 0 0; height: 869px; box-sizing: border-box; }
#summary > div { width: 500px; max-width: 92%; margin: 0 0 0 auto; text-align: center; }
h1 { color: #32667c; text-transform: uppercase; font-size: 48pt; line-height: 1.05; font-weight: 300; }
h1 b { font-weight: 900; display: block; }
h1 span { color: #00b4ac; }
#summary p { color: #000; font-weight: 500; font-size: 15pt; margin: 0; }
#summary img { display: block; margin: 45px auto; }
#summary big { color: #32667c; font-weight: 900; text-transform: uppercase; display: block; font-size: 16pt; }
#summary sup { width: 40px; text-align: right; text-transform: none; display: inline-block; font-size: 19pt; line-height: 1; position: relative; top: -14px; }
#summary big b { font-weight: 900; letter-spacing: -6px; font-size: 93pt; line-height: 91px; }
#summary small { color: #4a4f55; display: block; font-size: 16pt; font-weight: 500; line-height: 1; margin: 15px 0 37px; }
#summary small b { font-weight: 900; font-size: 17pt; }
#summary button { transition: all .4s; text-transform: uppercase; border: 0; font: 100 14pt 'Museo Sans', 'Arial', sans-serif; width: 175px; padding: 16.5px 0; margin: auto; color: #4a4f55; background: #ff9e1b; }
#summary button:hover { background: #ff9300; }

/* Description */
#description { text-align: center; letter-spacing: 0; background: #FFF; color: #4a4f55; padding: 70px 99px; margin: 0; font-size: 17.4pt; line-height: 1.6; }

/* Headline */
[id^='headline-'] { line-height: 1; text-align: center; letter-spacing: 0; background: #4a4f55; color: #FFF; padding: 24px 15px; font-size: 17pt; margin: 0; font-weight: 500; }
#headline-2 { font-weight: 700; font-size: 20pt; letter-spacing: .5px; }

/* Effets */
[class^="effect-"] { background: #32667c; }
[class^="effect-"] .container { background: no-repeat url( '../images/bg/corrective-deep-cleansing.jpg' ) #32667c top left; padding: 54px 0; letter-spacing: 0; }
[class^="effect-"] .container > div { width: 495px; color: #FFF; padding: 0 0 0 417px; box-sizing: content-box; font-size: 17.4pt; font-weight: 100; line-height: 1.2; }
[class^="effect-"] h2 { text-align: left; color: #FFF; max-width: 100%; font-weight: 100; font-size: 26pt; text-transform: none; }
[class^="effect-"] div div div { text-transform: uppercase; font-size: 15pt; font-weight: 500; }
[class^="effect-"] p { margin: 0 0 27px; }
[class^="effect-"] b { display: block; text-transform: uppercase; margin: 0 0 11px; }
[class^="effect-"] ul { list-style: none; padding: 6px 0 12px; margin: 0; }
[class^="effect-"] li { padding: 0 0 0 31px; position: relative; }
[class^="effect-"] li:before { content: '\2022'; display: block; position: absolute; top: 0; left: 0; }
.effect-two { background: #00b4ac; }
.effect-two .container { background: no-repeat url( '../images/bg/high-frequency.jpg' ) #00b4ac top right; padding: 122px 0; }
.effect-two .container > div { width: 465px; }
.effect-two h2 { margin: 0 0 41px; }
.effect-two p, .effect-four p { margin: 0; }
.effect-three { background: #4a4f55; }
.effect-three .container { background: no-repeat url( '../images/bg/balance-sebum-control-treatment.jpg' ) #4a4f55 top left; padding: 85px 0; }
.effect-three .container > div { width: 580px; }
.effect-three li { max-width: 425px; }
.effect-four { background: #32667c; }
.effect-four .container { background: no-repeat url( '../images/bg/chromolight-therapy.jpg' ) #32667c top right; padding: 95px 0; }
.effect-four .container > div { width: 387px; }

/* Consultation */
#consultation { background: #00afab; padding: 65px 0; color: #FFF; }
#consultation-holder { max-width: 870px; margin: auto; }
#form-header { float: left; width: 25%; font-size: 12pt; line-height: 1.3; letter-spacing: 1px; font-weight: 500; }
#form-header div { font-weight: 900; font-size: 18.9pt; color: #FFF; line-height: 1; margin: 4px 0 15px; letter-spacing: 0; }
#consultation-holder form { width: 60%; float: right; }
.input-holder { margin: 0 16% 0 0; float: left; width: 42%; }
.input-holder.no-margin { margin-right: 0; }
#consultation label { color: #FFF; }
#consultation [type="text"], #consultation select { background: #63c5c1; border-color: #63c5c1; color: #FFF; cursor: pointer; }
#consultation ::-webkit-input-placeholder { color: #FFF; }
#consultation :-moz-placeholder { color: #FFF; opacity: 1; }
#consultation ::-moz-placeholder { color: #FFF; opacity: 1; }
#consultation :-ms-input-placeholder { color: #FFF; }
.input-holder.submit-holder { margin: 6px 0 27px; }
#consultation [type="submit"] { padding: 10px 15px; }
#consultation [type="submit"]:hover { opacity: 0.8; }
#disclaimer { color: #FFF; font-size: 8.4pt; letter-spacing: 1px; line-height: 1.3; width: 91%; }
#disclaimer a { color: #FFF; text-decoration: underline; font-weight: 600; }

/* 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: 1056px) {
	[class^="effect-"] { background: #32667c; padding: 54px 0; }
	[class^="effect-"] .container > div { padding: 0; margin: auto; width: 500px; max-width: 92%; }
	.effect-two { background: #00b4ac; }
	.effect-two h2 { margin: 0 0 20px; }
	.effect-three { background: #4a4f55; }
	.effect-four { background: #32667c; }
	
	#consultation { padding: 40px 0; }
	#form-header { float: none; margin: 0 auto 20px; width: 96%; text-align: center; }
	#form-header > div { width: 500px; margin:6px auto; max-width: 90%; }
	#consultation-holder form { float: none; margin: auto; }
	.input-holder.submit-holder { margin: 0 auto 30px; float: none; }
	#disclaimer { text-align: center; width: 100%; }
	#consultation [type="submit"] { margin: auto; display: block; }
	
	#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: 960px) {
	#summary { height: auto; padding: 40px 0; }
	#summary > div { margin: auto; }
	
	#description { padding: 40px 20px; font-size: 15pt; }
	#description br { display: none; }
	
	[id^='headline-'] { font-size: 17pt; }
	#headline-2 { padding: 19px 15px; font-size: 15pt; line-height: 1.2; }
}

@media (max-width: 750px) {
	#consultation-holder form { width: 100%; max-width: 300px; }
	.input-holder { width: 100%; float: none; }
}

@media (max-width: 670px) {
	h1 { font-size: 39pt; }
	#summary p { font-size: 14pt; line-height: 1.2; }
	
	[class^="effect-"] { padding: 30px 0; }
	[class^="effect-"] .container > div { font-size: 15pt; }
	[class^="effect-"] h2 { font-size: 21pt; }
	[class^="effect-"] div div div { font-size: 14pt; }
	
	#safety h2 { font-size: 22pt; }
	#safety h2 b { font-size: 29pt; letter-spacing: -1px; margin: 0; }
}

@media (max-width: 460px) {
	h1 { font-size: 30pt; letter-spacing: -2px; }
	#summary p { font-size: 13pt; }
	#summary img { max-width: 75%; }
	#summary big { font-size: 13pt; }
	#summary big b { font-size: 76pt; }
	#summary sup { font-size: 16pt; }
	#summary small, #summary small b { font-size: 14pt; }
	
	#description { padding: 30px 15px; font-size: 13pt; line-height: 1.4; }
	
	[id^='headline-'] { font-size: 15pt; }
	#headline-2 { padding: 15px; font-size: 14pt; }
	
	[class^="effect-"] { padding: 20px 0; }
	[class^="effect-"] .container > div, [class^="effect-"] div div div { font-size: 13pt; }
	[class^="effect-"] h2 { font-size: 17pt; }
	
	#consultation { padding: 40px 20px; }
		
	#safety h2 { font-size: 21pt; letter-spacing: -1px; }
	#safety h2 b { font-size: 25pt; }
}

@media (max-width: 390px) {
	#form-header div:first-of-type { font-size: 20pt; }
	#consultation-holder form { width: 90%; }
}