/* 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: 700; }
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; }
/* General */
body { background: #bba494; width: 100%; height: 100%; padding:0; font: 400 12px/1.2 'Open sans', 'Arial', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Muli', 'Arial', sans-serif; text-transform: uppercase; }
#page { width: 1000px; max-width: 100%; margin: 36px auto 4%; margin: auto; color: #666; text-align: center; }
#page > div { box-sizing: border-box; }
h1 { font: 300 50pt/.9 'Muli', 'Arial', sans-serif; max-width: 100%; text-transform: none; color: #7d0140; letter-spacing: -1px; }
#page [type="text"], #page [type="tel"], #page [type="email"], #page select { box-sizing: border-box; background: #cccccc59; width: 100%; max-width: 100%; margin: 0 0 14px; height: 30px; padding: 0 14px; font: 13pt 'Open Sans', 'Arial', sans-serif; color: #6f1947; outline: none; text-transform: none; border: 0; }
#page [type="text"]:active, #page [type="text"]:focus { outline: none; }
#page button { transition: all .4s; font: 400 16pt 'Open Sans', 'Arial', sans-serif; background: #5a012c; color: #FFF; border: 0; letter-spacing: 2px; text-align: center; padding: 9px 48px; cursor: pointer; margin: 1px auto 0; }
#page button:hover { background: #929292; color: #fff; }
hr { border: 0; width: 86px; height: 9px; background: #76848f; margin: 27px auto 40px; }
/* Link to main website */
#page > a { display: block; width: -webkit-max-content; width: max-content; margin: 20px 0; }
#page > a img { display: block; }
/* Summary */
#summary { background: #dde9ec url( '../images/bg/summary.jpg' ) no-repeat; padding: 42px 63px 6px; height: 894px; border-top: 25px solid #7d0140; }
#summary div { width: 395px; max-width: 90%; }
#summary form { padding: 16px 15px 20px; background: #fff; margin: 47px 0 0; max-width: 100%; box-shadow: 0px 0px 15.96px 5.04px #00000038; }
#summary form h2 { color: #7d0140; font-weight: 900; letter-spacing: .5px; font-size: 20pt; line-height: 1; text-transform: capitalize; text-align: center; margin: 0 0 10px; }
.price { display: inline-block; vertical-align: middle; color: #7d0140; font: 800 69pt/.8 'Muli', 'Arial', sans-serif; margin: 0 0 23px; letter-spacing: -2px; }
.price span { display: inline-block; font-size: 33pt; font-weight: inherit; line-height: inherit; }
.price sup { display: inline-block; vertical-align: top; font-size: 28pt; font-weight: inherit; }
#summary ::-webkit-input-placeholder { color: #7d0140; }
#summary :-moz-placeholder { color: #7d0140; opacity: 1; }
#summary ::-moz-placeholder { color: #7d0140; opacity: 1; }
#summary :-ms-input-placeholder { color: #7d0140; }
#summary [type="submit"] { transition: all .4s; font-size: 15pt; background: #6f1947; color: #FFF; border: 0; letter-spacing: 5px; text-align: center; width: 100%; padding: 4px 10px; cursor: pointer; }
#summary form small { display: block; padding: 12px 0 0; text-align: justify; font-size: 9pt; color: #444343; line-height: 1.1; }
#summary small a { border: 0; padding: 0; text-decoration: underline; color: #6f1947; }
#summary div > small { color: #565e64; text-align: left; display: block; font-weight: 600; letter-spacing: 1.5px; font-size: 8pt; margin: 9px 0 0; }
/* Description */
#description { background: #7d0140 url( '../images/bg/description.jpg' ) no-repeat right; height: 685px; padding: 0 20px 0 0; }
#description section { display: flex; height: 100%; align-items: center; column-gap: 90px; }
#description h2 { display: block; width: 342px; background: #fff; color: #464646; font-size: 25pt; text-transform: none; font-weight: 300; line-height: 1.27; letter-spacing: .5px; padding: 38px 34px; box-sizing: border-box; }
#description span { color: #7d0140; letter-spacing: .5px; }
#description div { width: 493px; max-width: 100%; text-align: left; }
#description hr { width: 54px; height: 10px; background: #fff; margin: 26px 0 33px 5px; }
#description p { font-size: 16pt; color: #fff; line-height: 1.3; }
#description b { font-weight: 900; }
/* Face */
#face { background: url( '../images/bg/face.jpg' ) no-repeat; height: 1380px; padding: 84px 0 0 65px; }
#face section:after { content: ''; display: block; clear: both; }
.benefit h2 { display: block; max-width: 100%; color: #7d0140; font-size: 42pt; text-align: left; font-weight: 400; letter-spacing: -1px; line-height: 1; margin: 0 0 30px; }
.benefit h2 b { display: block; font: inherit; font-weight: 800; font-size: 35pt; letter-spacing: 1px; text-transform: none; }
.benefit p { color: #7d0140; font: 16pt/1.5 'Muli', 'Arial', sans-serif; text-align: left; max-width: 320px; margin: 0 0 0 82px; }
.benefit div:first-of-type { width: calc( 100% - 527px ); float: left; margin: 0 70px 0 0; }
.benefit div:last-of-type { width: 457px; float: right; }
.benefit h3 { text-align: left; max-width: 100%; background: #7d0140; color: #fff; letter-spacing: 8px; font-size: 20pt; padding: 7px 0 7px 61px; margin: 0 0 20px; }
.benefit ul { counter-reset: face; text-align: left; padding: 0 66px 10px 0; }
.benefit li { position: relative; font: 700 17pt/1.2 'Muli', 'Arial', sans-serif; padding: 0 0 0 62px; margin: 0 0 17px; color: #7d0140; }
.benefit li:before { content: counter(face); counter-increment: face; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: #b3b3b3; color: #7d0140; border-radius: 50%; font-size: 22pt; font-weight: 900; }
.benefit li:last-child { margin: 23px 0 0 0; }
.benefit li:last-child:before { top: 50%; transform: translateY(-50%); }
.target { height: 100%; max-height: 500px; }
.target h3 { display: flex; align-items: center; justify-content: center; font-size: 24pt; font-weight: 900; color: #7d0140; background: #b3b3b3; width: 193px; height: 193px; border-radius: 50%; margin: 0; }
.target ul { position: relative; height: 100%; }
.target li { position: absolute; left: 12px; top: 85px; display: flex; align-items: center; width: max-content; text-align: left; font: 900 21pt 'Muli', 'Arial', sans-serif; color: #7d0140; text-shadow: -4px -4px #cdcbcb, 4px 4px #cdcbcb, -2px 4px #cdcbcb, -4px -4px #cdcbcb, -4px 0 #cdcbcb, 4px 0 #cdcbcb, 0 4px #cdcbcb, 4px -4.5px #cdcbcb; }
.target li:before, .target li:first-of-type:after, .target li:nth-of-type( 2 ):after { content: ''; display: block; width: 21px; height: 21px; background: #cdcbcb; border-radius: 50%; margin: 0 12px; box-shadow: 0 0 11px 6px #fbfafa; }
.target li:first-of-type:before, .target li:nth-of-type( 2 ):before { display: none; }
.target li:nth-of-type( 2 ) { left: 29px; top: 165px; align-items: baseline; text-align: right; }
.target li:nth-of-type( 3 ) { left: 560px; top: 158px; }
.target li:nth-of-type( 4 ) { left: 516px; top: 225px; }
.target li:nth-of-type( 5 ) { left: 564px; top: 329px; }
.target li:nth-of-type( 6 ) { left: 482px; top: 400px; }
.target li:nth-of-type( 7 ) { left: 586px; top: 464px; }
/* Body */
#body { background: url( '../images/bg/body.jpg' ) no-repeat; height: 1502px; padding: 80px 0 0 77px; }
#body h2 { color: #464646; }
#body p { color: #464646; background: 0; }
#body section:after { content: ''; display: block; clear: both; }
#body .benefit { float: right; max-width: 432px; margin: 0 0 0 auto; }
#body .benefit > div { float: none; width: 100%; margin: 0; padding: 0 0 0 80px; box-sizing: border-box; }
#body .benefit p { margin: 0; max-width: 284px; margin: 0 55px 63px 0; }
#body .benefit ul { padding: 0 32px 10px 0; }
#body .target { position: relative; float: left; max-height: 875px; }
#body .target h3 { background: #7d0140; color: #fff; margin: 15px 0 0; }
#body .target li { left: 0; top: 55px; text-shadow: -4px -4px #fff, 4px 4px #fff, -4px 4px #fff, -4px -4px #fff, -4px 0 #fff, 4px 0 #fff, 0 4px #fff, 4px -4.5px #fff; }
#body .target li:before { display: none; background: #fff; box-shadow: none; }
#body .target li:after { content: ''; display: block; width: 21px; height: 21px; background: #fff; border-radius: 50%; margin: 0 12px; }
#body .target li:nth-of-type( 2 ) { left: 10px; top: 365px; }
#body .target li:nth-of-type( 3 ) { left: 240px; top: 437px; }
#body .target li:nth-of-type( 4 ) { left: 30px; top: 652px; }
#body .target li:nth-of-type( 5 ) { left: 50px; top: 877px; }
/* Works */
#works { background: url( '../images/bg/works.jpg' ) no-repeat center top/cover; padding: 51px 0; }
#works h2 { letter-spacing: 6px; font-weight: 900; font-size: 20pt; color: #fff; background: #7d0140; padding: 22px; margin: 0 0 58px; }
#works h3 { font-weight: 900; color: #7d0140; font-size: 15pt; text-transform: capitalize; text-align: left; max-width: 100%; margin: 0 0 6px; }
#works p { font: 14pt 'Muli', 'Arial', sans-serif; color: #27292a; text-align: left; line-height: 1.2; }
#works ul { counter-reset: works; margin: auto; padding: 0 52px 0 60px; }
#works li { text-align: left; margin: 0 0 44px; box-sizing: border-box; }
#works li:after { content: ''; display: block; clear: both; }
#works div { position: relative; width: 100%; max-width: 420px; float: left; margin: 0 30px 0 0; padding: 0 0 0 60px; }
#works div:before { content: counter( works ); counter-increment: works; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; color: #7d014080; font-size: 52pt; font-weight: 700; height: 54px; }
#works div:after { content: ''; position: absolute; top: 70px; left: 0; display: block; width: 42px; height: 4px; background: #7d014080; }
#works img { float: left; }
/* FAQ */
#faq { background: #e7eaed url( '../images/bg/faq.jpg' ) no-repeat center/cover; height: auto; padding: 148px 20px 45px; }
#faq section { max-width: 879px; margin: auto; box-sizing: border-box; }
#faq h2 { color: #7d0140; font-weight: 900; font-size: 18pt; letter-spacing: 6px; text-transform: none; margin: 0 0 15px; text-shadow: 0px 2px 9px #03030399; }
#faq p { color: #6a3233; font-size: 14pt; line-height: 1.6; letter-spacing: .5px; }
#faq p:first-of-type { margin: 0 0 40px; }
/* Promotion */
#promotion { background: #7d0140; padding: 32px 20px 40px; }
#promotion h2 { line-height: 1.3; max-width: 100%; font-size: 27.5pt; font-weight: 300; letter-spacing: 6px; color: #fff; margin: 0 0 25px; }
#promotion h2 b { display: block; font-weight: 700; letter-spacing: 7px; }
#promotion .price { color: #fff; font-size: 81pt; margin: 0 0 6px; }
#promotion small { color: #fff; font: 7pt 'Muli', 'Arial', sans-serif; display: block; letter-spacing: 4px; margin: 5px 0 0; }
/* Sign-up form */
#sign-up { position: relative; background: #fff; padding: 48px 20px; color: #484e6a; }
#sign-up h2 { color: #6f1947; letter-spacing: 4px; font-size: 24pt; line-height: 1.4; font-weight: 900; }
#sign-up > p { font-size: 15pt; color: #6f1947; font-weight: 300; }
#sign-up form { max-width: 636px; margin: 28px auto 0; }
#sign-up [type="text"], #sign-up [type="tel"], #sign-up [type="email"], #sign-up select { max-width: 395px; background: 0; padding: 0 23px; width: 100%; margin: 0 0 16px; height: 49px; color: #6f1947; font-size: 14pt; border: 2px solid #6f1947; box-sizing: border-box; }
#sign-up ::-webkit-input-placeholder { color: #653231; }
#sign-up :-moz-placeholder { color: #653231; opacity: 1; }
#sign-up ::-moz-placeholder { color: #653231; opacity: 1; }
#sign-up :-ms-input-placeholder { color: #653231; }
#sign-up form p { color: #77838f; text-align: center; font-size: 9pt; font-weight: 600; line-height: 1.6; }
#sign-up a { color: #77838f; text-decoration: underline; font-weight: 600; }
#sign-up form div { width: 395px; max-width: 100%; font-size: 0; font-weight: 600; text-align: left; margin: 20px auto 10px; color: #6f1947; }
#sign-up form div > label:not( .label ) { font-size: 12pt; display: inline-block; vertical-align: middle; margin: 0 0 14px; }
.label { font-size: 12pt; display: block; margin: 0 0 15px; }
#sign-up [type="radio"] { display: none; }
#sign-up form label:not( .label ) { padding: 0 24px; position: relative; }
#sign-up form label:not( .label ):last-of-type { padding: 0 0 0 24px; }
#sign-up form label:not( .label ):before { margin: -3px 4px 0 0; content: ' '; background: 0; text-align: center; line-height: 16px; font-size: 10pt; font-weight: 600; display: block; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border: 2px solid #999; border-radius: 50%; }
#sign-up [type="radio"]:checked + label:before { content: '\2713'; color: #FFF; background: #653231; }
#sign-up select:last-of-type { margin: 0; }
#sign-up [type="submit"] { text-transform: uppercase; background: #6f1947; font-size: 19pt; letter-spacing: 1px; margin: 48px auto 0; padding: 9px 49px; font-weight: 700; border-radius: 0; }
@media (max-width: 1050px) {
#page > a { margin: 20px auto; }
}
@media ( max-width: 1028px ) {
#works img { height: 140px; }
}
@media ( max-width: 960px ) {
#face { background: linear-gradient( 180deg, #c7d0d6, #dee3e7 ); padding: 60px 20px; height: auto; }
#face div { width: 100%; max-width: 500px; margin: 0 auto 30px; float: none; }
#face li br { display: none; }
.benefit h2 { text-align: center; }
.benefit h3 { text-align: center; padding: 7px 0; }
.benefit p { margin: 0; max-width: 100%; }
.target h3 { margin: 30px auto; }
.target ul { margin: auto; max-width: 500px; }
#page .target li, #page #body .target li { position: relative; text-align: center; margin: 0 auto 10px; top: 0; left: 0; }
.target li:nth-of-type( n ):before { display: block; }
.target li:nth-of-type( n ):after { display: none; }
.target li:before, .target li:first-of-type:after, .target li:nth-of-type( 2 ):after { position: absolute; top: 7px; left: -43px; margin: 0; }
#body { background: linear-gradient( 180deg, #cdafb1, #ede0e0, #ddc9cb ); height: auto; padding: 60px 20px; }
#body .target, #body .benefit { float: none; width: 100%; max-width: 500px; margin: auto; }
#body .benefit { margin: 0 auto 30px; }
#body .benefit div { padding: 0; }
#body .target h3 { position: relative; transform: translateY( 0 ); margin: 0 auto 30px; }
#body .target li:nth-of-type( n ) { text-align: left; }
#body .target li:nth-of-type( n ):before { display: block; }
#body .target li:nth-of-type( n ):after, #body .target li br { display: none; }
#body .benefit p { float: none; max-width: 100%; margin: 0 0 30px; }
#body .benefit p br { display: none; }
#body .benefit > div div { float: none; width: 100%; }
}
@media ( max-width: 953px ) {
#works { text-align: center; }
#works h3 { text-align: center; }
#works p { text-align: center; }
#works div, #works img { float: none; }
#works div { margin: 0; padding: 0; }
#works div:before { position: static; margin: 0 0 30px; }
#works div:after { left: 50%; transform: translateX( -50% ); }
#works img { width: max-content; margin: 20px 0 0; }
#works li { display: flex; flex-direction: column; align-items: center; }
#works li:last-of-type { margin: 0; }
}
@media (max-width: 890px) {
#description { background-size: cover; height: auto; padding: 50px 20px; }
#description section { flex-direction: column; width: 493px; max-width: 100%; margin: auto; }
#description h2 { width: 100%; padding: 23px 34px; font-size: 24pt; margin: 0 0 20px; }
#promotion h2 { font-size: 26pt; }
}
@media ( max-width: 847px ) {
#faq { padding: 20px; }
#faq p:first-of-type { margin: 0 0 20px; }
#faq p br { display: none; }
}
@media ( max-width: 768px ) {
#page em { font-size: 50pt; }
#description p, .benefit p, .benefit li { font-size: 14pt; }
.target h3 { font-size: 20pt; width: 153px; height: 153px; }
.target li, .benefit h3 { font-size: 18pt; }
.benefit h2 { font-size: 38pt; }
.benefit h2 b { font-size: 32.5pt; }
.benefit li:nth-of-type( n ):before { width: 40px; height: 40px; font-size: 18pt; top: 50%; transform: translateY( -50% ); }
#body .benefit li:last-child { margin: 30px 0 0; }
#body .benefit p { margin: 0 0 30px; }
#faq h2 { font-size: 18pt; margin: 0 0 18px; }
#faq p { font-size: 13pt; }
#promotion { padding: 33px 18px; }
#promotion h2 { letter-spacing: 3px; font-size: 24pt; }
#promotion h2 b { letter-spacing: inherit; }
#promotion br { display: none; }
#promotion .price { font-size: 67pt; }
#promotion span { font-size: 35pt; }
}
@media (max-width: 675px) {
#page [type="text"], #page [type="tel"], #sign-up [type="email"], #page select { font-size: 12pt; }
#summary { background: #d1dadf; height: auto; padding: 20px 0 20px; text-align: center; border-width: 15px; }
#summary div { margin: auto; }
h1 { font-size: 35pt; line-height: 1.1; }
#summary > div small { text-align: center; line-height: 1.2; }
#sign-up h2 { letter-spacing: 0; font-size: 22pt; }
#sign-up > p { font-size: 14pt; }
}
@media (max-width: 600px) {
h1 { font-size: 32pt; }
#summary [type="submit"] { font-size: 13pt; letter-spacing: 2px; }
#description h2, #description div { width: 100%; }
.benefit ul, .id #body .benefit ul { padding: 0; }
.benefit br { display: none; }
}
@media (max-width: 574px) {
#sign-up [type="submit"] { margin: 25px auto; }
}
@media (max-width: 500px) {
#body, #face { padding: 40px 20px; }
.benefit h2 { font-size: 32pt; }
.benefit h2 b { font-size: 26pt; }
.target h3 { font-size: 18pt; width: 133px; height: 133px; }
#works h2 { font-size: 19pt; letter-spacing: 2px; }
#works ul { padding: 0 20px; }
#works h3 { font-size: 14pt; }
#works p { font-size: 12pt; }
#faq h2 { letter-spacing: 2px; font-size: 16pt; }
#promotion h2 { font-size: 24pt; letter-spacing: 2px; }
}
@media (max-width: 490px) {
#page > a { width: 220px; }
#sign-up { padding: 30px 20px; }
#sign-up > p { font-size: 12pt; }
#sign-up form div { margin: 20px auto 12px; }
#sign-up [type="text"], #sign-up [type="tel"], #sign-up [type="email"], #sign-up select { font-size: 12pt; margin: 0 0 12px; padding: 0 14px; }
.label, #sign-up form div > label:not( .label ) { font-size: 11pt; margin: 0 0 9px; }
#sign-up form p { line-height: 1.4; }
#sign-up small { position: initial; margin: 15px 0 0; display: block; }
#sign-up [type="submit"] { font-size: 16pt; }
}
@media (max-width: 460px) {
#description h2 { font-size: 20pt; }
#promotion h2, .id #promotion h2 { font-size: 21pt; letter-spacing: 0; }
}
@media (max-width: 420px) {
h1 { font-size: 26pt; margin: 0; }
#summary form { margin: 27px 0 0; }
#summary form h2 { letter-spacing: 0; font-size: 17pt; }
.price { font-size: 52pt; }
#summary > div small { font-size: 8.5pt; }
#summary [type="submit"] { font-size: 12pt; }
#sign-up [type="submit"] { font-size: 14pt; }
}
@media (max-width: 370px) {
.target li { font-size: 16pt; }
.target li:before, .target li:first-of-type:after, .target li:nth-of-type( 2 ):after { width: 16px; height: 16px; left: -25px; }
}