/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-margin-after: 0px;
	-webkit-margin-before: 0px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, b { font-weight: bold; }
i { font-style: italic; }
* { -webkit-margin-before: 0; -webkit-margin-after: 0; }
.clear { clear: both; }
textarea, label, input, select { cursor: pointer; }
img { width: auto; height: auto; max-width: 100%; }
sup { vertical-align: super; font-size: smaller; }

/* Font */
@font-face {
	font-family: 'Geo Sans';
	src: url('../../fonts/GeosansLight.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

/* Content */
body { width:100%; height:100%; padding:0; font: 12px/1.4 'Open sans', 'Helvetica', 'Arial', sans-serif; background: #fffbf8; color: #000; zoom: 1; }
#wrapper { width: 980px; margin: auto; text-align: center; }
#wrapper > div { box-sizing: border-box; }
#wrapper [type="text"], #wrapper select { background: rgba(255, 255, 255, .9); width: 100%; max-width: 100%; margin: 0 0 10px; height: 27px; padding: 0 15px; font-size: 10pt; color: #09008d; font-weight: 400; border: 0; box-sizing: border-box; }
#wrapper select { margin-bottom: 0; }
#wrapper [type="submit"] { color: #FFF; font-weight: 400; transition: all 0.4s; letter-spacing: 1px; margin: auto; display: block; padding: 8px 21px; font-size: 11pt; border: 0; background: #12908c; }
#wrapper [type="submit"]:hover { background: #0c6562; }
#wrapper h1 { letter-spacing: .5px; font: 300 33pt/1 'Open Sans', 'Arial', sans-serif; margin: 0; max-width: 100%; color: #09008d; }
#wrapper h2 { letter-spacing: 0; font: 300 21pt/1 'Open Sans', 'Arial', sans-serif; margin: 0; text-transform: none; color: #09008d; }
#wrapper h3 { letter-spacing: 0; font: 600 13pt/1 'Open Sans', 'Arial', sans-serif; margin: 0; text-align: center; max-width: 100%; color: #09008d; text-transform: none; }
#logo { display: block; margin: 0 0 30px auto; text-align: right; }

#one { background: url( '../images/bg/bg-first.jpg' ) top center/cover no-repeat; height: 737px; color: #666666; }
#one > div { width: 569px; margin: 0 0 0 auto; padding: 38px 69px 0 0; box-sizing: border-box; max-width: 90%; text-align: center; }
#one p { font-size: 17.5pt; }
#one > div > span { font-size: 14.8pt; }
#promotion { background: url( '../images/bg/bg-promotion.png' ) no-repeat left top; width: 204px; height: 214px; font-size: 17pt; color: #09008d; font-weight: 700; padding: 48px 30px 0; line-height: 1.2; box-sizing: border-box; margin: 20px 78px 0 auto; }
#promotion span { line-height: 1; font-size: 13pt; font-weight: 500; }
#promotion span:last-of-type { display: block; }
#promotion b { font-size: 19pt; display: block; line-height: 1; }
#promotion sup { font-size: 9pt; }
#one form { width: 335px; margin: 0 5px 0 auto; max-width: 100%; }
#one [type="text"], #one select { margin: 0 0 10px; }
#one form p { font-size: 11pt; color: #09008d; margin: 10px 0 8px; text-align: center; }
#one ::-webkit-input-placeholder { color: #09008d; }
#one :-moz-placeholder { color: #09008d; opacity: 1; }
#one ::-moz-placeholder { color: #09008d; opacity: 1; }
#one :-ms-input-placeholder { color: #09008d; }

#two { background: #f1fffe; }
#two > div { width: 815px; max-width: 90%; margin: auto; color: #000; padding: 71px 0 58px; position: relative; }
#treatments, #process { font-size: 0; }
#treatments div { display: inline-block; vertical-align: top; background: url( '../images/bg/bg-diamond.png' ) top center no-repeat; height: 88px; color: #09008d; font-weight: 700; font-size: 13.5pt; line-height: 88px; margin: 0 20px; }
#two p { color: #4d4d4d; font-size: 11pt; text-align: justify; text-align-last: center; line-height: 1.4; margin: 20px 0 60px; letter-spacing: .5px; }
#two p:last-of-type { margin: 10px 0 35px; font-size: 10.5pt; }
#two > div > img { top: 272px; right: 0; position: absolute; }
#process div { display: inline-block; vertical-align: top; margin: 0 18px; color: #663230; font-size: 11.4pt; line-height: 1; }
#process div:first-of-type, #benefits div:first-of-type { margin-left: 0; }
#process div:last-of-type, #benefits div:last-of-type { margin-right: 0; }
#process img { display: block; margin: 0 auto 10px; }
#steps:after { content: ' '; clear: both; display: block; }
#steps { margin: 40px 0 0; counter-reset: steps; }
#steps div { background: url( '../images/bg/bg-square.png' ) no-repeat; width: 392px; height: 130px; float: left; position: relative; padding: 58px 60px 0 96px; box-sizing: border-box; counter-increment: steps; font-style: italic; text-align: left; font-size: 8.3pt; line-height: 1.2; max-width: 90%; font-weight: 600; color: #4d4d4d; }
#steps div:last-of-type { float: right; }
#steps div:before { content: '0'counter( steps ); font-weight: 700; font-size: 23pt; line-height: 1; color: #FFF; position: absolute; top: 44px; left: 28px; }
#steps div:after { content: 'STEP'; position: absolute; top: 21px; left: 32px; color: #f8f8f8; font-weight: 700; font-size: 9pt; line-height: 1; }
#steps div b { display: block; font-style: italic; font-size: 14pt; letter-spacing: -.5px; color: #09008d; line-height: 1; font-weight: 600; }
#steps hr { background: #bcbcbc; width: 226px; height: 1px; max-width: 100%; display: block; margin: 5px 0; border: 0; }

#three { background: url( '../images/bg/bg-third.jpg' ) top center/cover no-repeat; height: 506px; }
#three > div { width: 697px; max-width: 90%; padding: 45px 64px 0 0; margin: 0 0 0 auto; box-sizing: border-box; }
#three > div > p { font-size: 13pt; margin: 40px 0 0; line-height: 1.2; color: #008d88; }
#benefits { font-size: 0; background: url( '../images/bg/bg-wave.png' ) no-repeat top center; height: 187px; margin: 15px 0 25px; }
#benefits div { display: inline-block; vertical-align: top; background: url( '../images/bg/bg-circle.png' ) no-repeat; width: 111px; height: 120px; box-sizing: border-box; position: relative; margin: 12px 7px 30px; font-size: 9.4pt; line-height: 1.2; padding: 31px 17px; color: #12908b; }
#benefits .benefit-1 { padding-top: 23px; }
#wrapper #benefits .benefit-4 { padding-top: 37px; }
#benefits div:nth-of-type(even){ background-image: url( '../images/bg/bg-circle2.png' ); height: 123px; margin-top: 55px; padding-top: 42px; }
#three i { display: block; font-size: 10pt; color: #808080; }

#four { background: url( '../images/bg/bg-fourth.jpg' ) top center/cover no-repeat; }
#four div { max-width: 90%; padding: 50px 0 40px; margin: auto; }
#four img { display: block; margin: 18px auto 0; }

#five { background: #eaebeb; padding: 40px 20px 25px; color: #000; }
#five > p { font-size: 12.7pt; margin: 0px 0 40px; }
#five form { max-width: 640px; margin: auto }
#five [type="text"], #five select { max-width: 361px; color: #000; height: 40px; margin: 0 0 15px; font-size: 15pt; }
#five ::-webkit-input-placeholder { color: #000; }
#five :-moz-placeholder { color: #000; opacity: 1; }
#five ::-moz-placeholder { color: #000; opacity: 1; }
#five :-ms-input-placeholder { color: #8b4c53; }
#five form p { color: #77828e; text-align: left; font-size: 8.7pt; }
#five a { text-decoration: none; color: #950000; }
#five a:hover { text-decoration: underline; }
#five form div { text-align: left; margin: 50px 0 20px; }
#five form div > label:not( .label ) { font-size: 13pt; display: inline-block; vertical-align: middle; }
.label { font-size: 12.7pt; display: block; margin: 0 0 11px; }
#five [type="radio"] { display: none; }
#five form label:not( .label ) { padding: 0 35px 0 19px; position: relative; }
#five form label:not( .label ):last-of-type { padding: 0 0 0 19px; }
#five form label:not( .label ):before { margin: -3px 4px 0 0; content: ' '; background: #eef0f3; text-align: center; line-height: 13px; font-size: 15pt; display: block; position: absolute; left: 0; top: 8px; width: 13px; height: 13px; border: 1px solid #000; border-radius: 50%; }
#five [type="radio"]:checked + label:before { content: '\2022'; }
#five select { margin: 0; }
#five [type="submit"] { margin: 35px auto 0; width: 138px; }

/* Footer */
#address-block, #copyright { width: 92%; padding: 10px 4%; }
#address-block { background: #12908c; color: #FFF; }
#list { font: 14px/1.5 'Open sans', 'Arial', sans-serif; text-align: center; color: #FFF; }
#list a { font-weight: 700; text-decoration: none; color: #FFF; }
#address-block hr { margin: 4px 0; background: #FFF; height: 1px; border: 0; }
#address-block ul  { text-align: left; }
#address-block li { display: inline-block; vertical-align: middle; text-transform: uppercase; margin: 0 6%; font: 8pt 'Open Sans', 'Arial', sans-serif; letter-spacing: 8px; color: #FFF; }
#address-block li.bullet { margin: 0; }
#address-block li:first-child { margin-left: 0; }
#address-block li:last-child { margin-right: 0; }

/* Last line footer */
#copyright { background: #FFF; font-size: 6.6pt; padding-top: 3px; position: relative; }
#copy { text-align: left; width: 670px; }
#facebook-share { position: absolute; top: 0; right: 0; width: 260px; background: #d1d2d4; padding: 5px 0 5px 6px; color: #000; text-align: left; cursor: pointer; transition: all .4s; font: 700 7.6pt 'Open Sans', 'Arial', sans-serif; }
#facebook-share:hover { background: #000; color: #FFF; }
#facebook-share img { display: inline-block; vertical-align: middle; padding-right: 3px; }

@media (max-width: 1000px) {
	#wrapper { width: 100%; }
}

@media (max-width: 900px) {
	#one { height: auto; background: #b7ebe6; }
	#one > div, #three > div { padding: 40px 0; margin: auto;  }
	#logo { text-align: center; }
	#promotion, #one form { margin: 20px auto; }

	#two > div { padding: 60px 0; }
	#two > div > img { margin: 0 0 30px; position: static; }
	#wrapper #steps div { float: none; margin: 20px auto 0; text-align: center; }
	#process div, #process div:first-of-type, #process div:last-of-type { margin: 0 18px 20px; }

	#three { background: #bdeeeb; height: auto; }
	#three > div > p, #steps { margin: 20px 0 0; }

	#address-block ul { text-align: center; padding: 0; }
	#copy { width: 100%; text-align: center; }
	#facebook-share { display: block; margin: 5px auto 0 auto; position: static; width: 247px; }
}

@media (max-width: 678px) {
	#wrapper h1 { font-size: 23pt; }
	#wrapper h2 { font-size: 18pt; }
	#wrapper br { display: none; content: ' '; }

	#one p, #one > div > span { font-size: 13pt; }

	#two > div { padding: 60px 0 20px; }

	#treatments div { margin: 0 20px 20px; }
	#benefits { background: 0; height: auto; margin: 15px auto 0; }
	#wrapper #benefits div { margin: 0 7px 20px; }

	#steps { margin: 0; }
	#wrapper #steps div { background: 0; padding: 50px 0 0; margin: auto; }
	#steps hr { margin: 5px auto; }
	#steps div:after, #steps div:before { color: #09008d; top: 0; left: 0; right: 0; }
	#steps div:before { top: 10px; }

	#five [type="submit"] { margin: 20px auto; }
}

@media (max-width: 460px) {
	#address-block li { display: block; margin: 5px 0; }
	#address-block li.bullet { display: none; }
}