/* 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; }

/* Content */
body { width:100%; height:100%; padding: 0; font: 12px/1.4 'Open Sans', 'Helvetica', 'Arial', sans-serif; background: #06002b; color: #000; zoom: 1; }
#wrapper { width: 980px; margin: auto; }
#promo-main { background: url('../images/bg/bg-main.jpg') no-repeat top left #FFF; height: 1148px; position: relative; text-align: center; }

/* Logo */
#logo-holder { margin: 0 57px 0 0; float: right; }

/* Headline */
#headline { display: block; float: left; margin: 82px 0 0 57px; }

/* Right col */
#col-right { float: right; width: 365px; margin: 0 57px 0 0; }
#col-right > p { text-align: right; font-size: 11.4pt; line-height: 1.6; color: #FFF; }

/* Left col */
#col-left { float: left; margin: 700px 0 0 57px; }
[class^="list-"] { padding: 0 0 0 46px; margin: 9px 0; background: url( '../images/icons/long-lasting-results.png' ) no-repeat; text-align: left; height: 29px; line-height: 29px; font-size: 13pt; }
.list-2 { background-image: url( '../images/icons/anti-acne.png' ); height: 34px; line-height: 34px; }
.list-3 { background-image: url( '../images/icons/anti-ageing.png' ); height: 27px; line-height: 27px; }
.list-4 { background-image: url( '../images/icons/zero-downtime.png' ); }

/* Form */
#form1 { margin: 27px auto 0; text-align: justify; }
#promo-main [type="text"], #promo-main select { box-sizing: border-box; background: rgba( 255, 255, 255, 0.5 ); padding: 0 2%; color: #000; font-size: 8pt; border: 0; border-radius: 25px; width: 100%; margin: 0 0 3px; height: 25px; }
.submit-holder { text-align: center; }
.submit-holder.loading { font-size: 11pt; padding-top: 10px; line-height: 11pt; }
#submit { display: block; margin: auto; background: url( '../images/bg/bg-submit.png' ) no-repeat; width: 142px; height: 40px; border: 0; }
label { font-family: 'Arial', sans-serif; display: inline-block; font-style: italic; text-align: left; color: #FFF; }
::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder  { color: #000; opacity: 1; }
#disclaimer { padding: 15px; color: #FFF; font-size: 8pt; line-height: 1.3; }
#disclaimer a { color: #FFF; }

/* Promotion */
#promotion { font-size: 23pt; line-height: 1.3; background: url( '../images/bg/bg-promotion.png' ) no-repeat; width: 244px; height: 244px; margin: 53px 0 29px auto; color: #FFF; font-weight: 700; padding: 28px 38px 0; box-sizing: border-box; }
#promotion b { display: block; color: #ffc90a; font-size: 41pt; line-height: 1.2; }
#promotion sup { text-transform: uppercase; font-size: 24pt; }
#promotion span { display: block; font-weight: 300; font-size: 20pt; }

/* Promo description */
#benefits { background: #06002b; color: #FFF; padding: 23px 87px 18px; }
#list { font-size: 0; text-align: center; padding: 0 0 25px; }
[class^="block-"] { position: relative; z-index: 1; box-sizing: border-box; display: inline-block; vertical-align: top; width: 97px; margin: 0 30px; font-size: 13pt; line-height: 1.5; }
.block-1 { margin-left: 0; width: 150px; }
.block-3 { width: 110px; }
.block-5 { margin-right: 0; }
[class^="block-"]:after { font-size: 30pt; display: block; position: absolute; z-index: 2; content: '+'; color: #ffc907; font-weight: 900; right: -43px; top: 28px; }
.block-5:after { display: none; }
[class^="block-"] b { display: block; color: #ffc907; }
#benefits hr { margin: 0 0 20px; height: 1px; border: 0; background: #dcf1fd; background: -webkit-linear-gradient( left, #dcf1fd 0%, #0077a3 50%, #dcf1fd 100% ); background: linear-gradient( to right, #dcf1fd 0%, #0077a3 50%, #dcf1fd 100% ); }

/* First line footer */
#content { text-align: center; font: 400 17pt/1 'Open Sans', 'Arial', sans-serif; color: #8ed2ff; } 
#content a { font-size: 20pt; color: #8ed2ff; text-decoration: none; font-weight: 700; }

/* Footer */
footer { font-family: 'Open Sans', sans-serif; color: #000; }
#copyright { background: #FFF; font-size: 6.2pt; padding: 3px 0 18px 6%; position: relative; }
#copy { text-align: left; width: 635px; max-width: 90%; }
#facebook-share { display: block; text-decoration: none; position: absolute; top: 0; right: 0; width: 230px; background: #a7a8aa; padding: 5px 0 5px 6px; color: #FFF; text-align: left; cursor: pointer; font: bold 7.6pt 'Open Sans', 'Arial', sans-serif; }
#facebook-share img { display: inline-block; vertical-align: middle; padding-right: 3px; }

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

	#copyright { padding: 3px 0 18px; }
	#copy { width: 100%; text-align: center; margin: auto }
	#facebook-share { position: static; margin: 13px auto 0; }
}

@media (max-width: 967px) {
	[class^="block-"] { display: block; margin: 0 auto 27px; width: 100%; max-width: 290px; }
	.block-5 { margin: auto; }
	[class^="block-"]:after { top: auto; bottom: -23px; right: 0; left: 0; line-height: 20px; }
}

@media (max-width: 945px) {
	#logo-holder { float: none; margin: 0 auto 30px; }
	#headline { float: none; margin: 32px auto 0; max-width: 90%; }
	
	#promo-main { background: #b9b9b9; height: auto; }
	
	#promotion { margin: 45px auto 29px; }
	#col-right > p { text-align: center; font-size: 13pt; }
	#col-right > p br { display: none; }
	
	#col-right { float: none; margin: 0 auto 30px; }
	
	#col-left { float: none; margin: auto; width: 220px; padding: 0 0 23px; }
}

@media (max-width: 656px) {
	#benefits { padding: 23px 0 18px; }
}

@media (max-width: 410px) {
	#col-right { width: 90%; }
}