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

/* Summary */
#summary { background: no-repeat url( '../images/bg/summary.webp' ) top right/cover; padding: 128px 62px 0 0; height: 822px; box-sizing: border-box; }
#summary > div { width: 500px; max-width: 92%; margin: 0 0 0 auto; }
h1 { color: #747579; font-size: 30pt; line-height: 1.2; font-weight: 600; text-align: left; text-transform: none; margin: 0 0 0 auto; width: 690px; max-width: 92%; }
h1 b { font-weight: 900; text-transform: uppercase; }
#summary img { display: block; margin: 35px 0 22px; }
#summary div div { font-size: 0; color: #4a4f55; font-weight: 900; }
#summary big { display: inline-block; vertical-align: middle; font-size: 105pt; line-height: 107px; padding: 0 17px 0 0; }
#summary span { display: inline-block; vertical-align: middle; font-size: 35pt; line-height: 35px; margin: -20px 10px 0 0; }
#summary small { display: inline-block; vertical-align: middle; border-left: 3px solid #4a4f55; font-size: 18.5pt; padding: 10px 0 10px 15px; }
#summary p { display: block; font-size: 21pt; margin: 9px 0 0; }
#summary button { transition: all .4s; text-transform: uppercase; border: 0; font: 500 16pt/1 'Museo Sans', 'Arial', sans-serif; width: 193px; padding: 14.5px 0; margin: 37px 0 0; color: #4a4f55; background: #fad126; background: linear-gradient( to right, #fad126 0%, #fc9838 100% ); }
#summary button:hover { background: #ff9300; }

/* Description */
#description { text-align: center; letter-spacing: 0; background: #FFF; color: #4a4f55; padding: 60px 99px; margin: 0; font-size: 20pt; line-height: 1.6; }
#description b { display: block; margin: 80px 0 0; }
#description hr { background: #b9b9ba; height: 4px; width: 565px; margin: 60px auto 0; max-width: 60%; }

/* Best sellers */
#best-sellers h2 { color: #177ba4; text-align: center; font-weight: 900; font-size: 49pt; margin: 0 0 45px; line-height: 1; }
#best-sellers section { counter-increment: bestseller; width: 94.5%; box-sizing: border-box; position: relative; margin: 0 0 58px; padding: 145px 131px 145px 522px; }
#best-sellers section:before { content: counter( bestseller ); color: #d9e9e8; position: absolute; z-index: 1; right: 5%; top: 50%; transform: translateY( -50% ); font: 600 300pt 'Open Sans', 'Arial', sans-serif; }
#best-sellers section:nth-of-type( even ) { margin-left: auto; padding: 145px 554px 145px 131px; text-align: right; }
#best-sellers section:nth-of-type( even ):before { left: 5%; right: auto; }
#best-sellers section:after { content: ' '; position: absolute; display: block; top: 0; right: 0; bottom: 0; width: 289px; background: #f1f1f1; border-top-right-radius: 500px; border-bottom-right-radius: 500px; }
#best-sellers section:nth-of-type( even ):after { right: auto; left: 0; border-radius: 0; border-top-left-radius: 500px; border-bottom-left-radius: 500px; }
#best-sellers .best-seller-1, #best-sellers section.best-seller-4 { padding-top: 55px; padding-bottom: 55px; }
#best-sellers aside { position: absolute; top: 0; bottom: 0; left: 0; right: 289px; background: no-repeat url( '../images/icons/anti-pollution-cleanser.jpg' ) #f1f1f1 47px center; }
#best-sellers section:nth-of-type( even ) aside { left: 289px; right: 0; background-position: calc( 100% - 47px ) center; }
#best-sellers .best-seller-2 aside { background-image: url( '../images/icons/high-frequency.jpg' ); }
#best-sellers .best-seller-3 aside { background-image: url( '../images/icons/oxyjet-therapy.jpg' ); }
#best-sellers .best-seller-4 aside { background-image: url( '../images/icons/rescue-dandruff-control.jpg' ); }
#best-sellers .best-seller-5 aside { background-image: url( '../images/icons/chromolight-therapy.jpg' ); }
#best-sellers section *:not( aside ) { position: relative; z-index: 1; }
#best-sellers h3 { margin: 0 0 6px; color: #f39b13; text-transform: none; font-weight: 500; font-size: 25pt; letter-spacing: .5px; line-height: 1.1; }
#best-sellers p, #best-sellers i, #best-sellers b { margin: 0 0 4px; display: block; letter-spacing: 1px; font-size: 15pt; line-height: 1.3; }
#best-sellers b:before { content: ' '; display: inline-block; background: #f39b1f; width: 9px; height: 9px; border-radius: 50%; margin: -4px 10px 0 0; vertical-align: middle; }

/* 1-liner */
#page > p { background: #f39b13; color: #4a4f55; text-align: center; font-size: 15pt; padding: 20px 10px; }

/* Consultation */
#consultation { background: #00afab; padding: 65px 0; color: #FFF; }
#consultation-holder { max-width: 870px; margin: auto; }
#form-header { float: left; width: 27%; 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) {
	#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; }
	h1 { text-align: center; margin: auto; font-size: 26pt; }
	#summary > div { margin: auto; text-align: center; }
	#summary img { margin: 20px auto; max-width: 325px; width: 80%; }
	
	#description { padding: 30px 15px; font-size: 16pt; line-height: 1.4; }
	#description b { margin: 20px 0 0; }
	#description hr { height: 1px; margin: 30px auto 0; }
	
	#best-sellers h2 { font-size: 41pt; }
	#best-sellers section, #best-sellers section:nth-of-type( 2n ), #best-sellers .best-seller-1, #best-sellers section.best-seller-4 { width: 100%; background: #f1f1f1; padding: 20px; text-align: center; }
	#best-sellers section:after { display: none; }
	#best-sellers aside, #best-sellers section:nth-of-type( 2n ) aside { position: relative; z-index: 1; top: auto; left: auto; right: auto; bottom: auto; width: 160px; height: 157px; border-radius: 50%; background-size: cover; background-position: center; margin: 0 auto 20px; }
	#best-sellers h3 { font-size: 20pt; }
	#best-sellers p, #best-sellers i, #best-sellers b { font-size: 14pt; letter-spacing: 0; }
}

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

@media (max-width: 670px) {
	h1 { letter-spacing: -1px; font-size: 24pt; }
	#summary big { font-size: 79pt; }
	#summary span { font-size: 30pt; }
	#summary small { font-size: 17pt; line-height: 1; }
	#summary p { font-size: 19pt; }
	#summary button { margin: 20px 0 0; }
	
	#best-sellers h2 { font-size: 32pt; }
	
	#safety h2 { font-size: 22pt; }
	#safety h2 b { font-size: 29pt; letter-spacing: -1px; margin: 0; }
}

@media (max-width: 600px) {
	#description { font-size: 14pt; padding: 20px 15px; }
	#description hr { margin: 20px auto 0; }
	
	#best-sellers section { margin: 0 0 30px; }
	#best-sellers section:before { font-size: 200pt; }
}

@media (max-width: 460px) {
	h1 { font-size: 22pt; }
	#summary big { display: block; font-size: 69pt; padding: 0; }
	#summary span { font-size: 27pt; }
	#summary small { display: block; border: 0; padding: 0; font-size: 15pt; }
	#summary button { font-size: 13pt; padding: 11px 13px; }
	
	#description { font-size: 12pt; }
	
	#best-sellers h2 { font-size: 22pt; margin: 0 0 25px; }
	#best-sellers aside, #best-sellers section:nth-of-type( 2n ) aside { width: 100px; height: 100px; margin: 0 auto 12px; }
	#best-sellers h3 { font-size: 18pt; }
	#best-sellers p, #best-sellers i, #best-sellers b { font-size: 13pt; }
	
	#page > p { font-size: 13pt; padding: 13px 10px; line-height: 1.2; }
	
	#consultation { padding: 30px 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%; }
}