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, b, 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
}

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
}

html {
    box-sizing: border-box
}

*, *:before, *:after {
    box-sizing: inherit
}

@font-face {
    font-family: 'Proxima Nova';
    src: url("../fonts/proximanova-light-webfont.woff2") format('woff2'), url("../fonts/proximanova-light-webfont.woff") format('woff'), url("../fonts/proximanova-light-webfont.ttf") format('truetype');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'Proxima Nova';
    src: url("../fonts/proximanova-bold-webfont.woff2") format('woff2'), url("../fonts/proximanova-bold-webfont.woff") format('woff'), url("../fonts/proximanova-bold-webfont.ttf") format('truetype');
    font-weight: 700;
    font-style: normal
}

.l-page {
    min-width: 640px
}

.l-container.style--1 {
    position: relative;
    overflow: hidden;
    background-color: #251622;
    padding-top: 145px;
}

.l-container.style--1:before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: -120px;
    margin-left: -492px;
    width: 985px;
    height: 985px;
    opacity: .8;
    background-image: radial-gradient(circle 493px at 493px, #fc2e55 0%, #261622 100%)
}


.l-container.mod--1 {
    min-height: 1096px
}

.container {
    position: relative;
    width: 640px;
    margin: 0 auto;
    padding: 0 20px
}

.logo-top {
     background: url("../../img/mobile/logo.png") no-repeat;
    margin-left: -208px;

    //background: url("../../img/mobile/chocoapp_324x192.png") no-repeat;
    //margin-left: -180px;
    width: 324px;
    height: 192px;
    left: 50%;
    position: relative;
    margin-bottom: 32px
}

.logo-title {
    background: url("../../img/mobile/chocolate.png") no-repeat;
    width: 390px;
    height: 92px;
    margin: 0 auto 45px auto
}

.top-title {
    text-align: center;
    color: #ff92ac;
    font-family: "Proxima Nova";
    font-size: 41px;
    font-weight: 300;
    line-height: 49px;
    margin-bottom: 102px
}

.top-arrow {
    background: url("../../img/mobile/arrow.png");
    width: 28px;
    height: 45px;
    margin: 0 auto
}

.l-container.style--2 {
    padding-top: 1px;
    background-color: #ad2542;
    background-image: linear-gradient(to right, #cf294a 0%, #741f35 100%)
}

.l-container.mod--1 {
    min-height: 980px
}

.l-container.mod--2 {
    padding-top: 66px;
    padding-bottom: 1px
}

.phone {
    background: url("../../img/mobile/phone.png") no-repeat;
    width: 413px;
    height: 804px;
    margin: -210px auto 34px auto
}

.download {
    padding-bottom: 70px;
    text-align: center
}

.download__title {
    color: #fff;
    font-family: "Proxima Nova";
    font-size: 48px;
    font-weight: 700;
    line-height: 72px;
    margin-bottom: 50px
}

.download__link {
    text-decoration: none;
    white-space: nowrap;
    text-indent: -9999px;
    width: 261px;
    height: 80px;
    display: block;
    margin: 40px auto 0 auto;
}

.download__link:first-child {
    margin-top: 0
}

.download__link.style--apple {
    background: url("../../img/mobile/btn-appstore.png") no-repeat
}

.download__link.style--google {
    background: url("../../img/mobile/btn-google.png") no-repeat
}

.l-container.style--3 {
    background-color: #f7f7ff;
}

.l-container.style--3 .container {
    padding-top: 90px;
    padding-bottom: 170px
}

.ico-plus {
    width: 54px;
    height: 54px;
    background: url("../../img/mobile/plus.png") 0 0 no-repeat;
    margin: 0 auto 36px auto
}

.text-box3 {
    text-align: center;
    margin: 0 auto 98px auto;
    width: 480px
}

.text-box3__title {
    color: #ff4064;
    font-family: "Proxima Nova";
    font-size: 36px;
    font-weight: 700;
    line-height: 72px;
    margin-bottom: 24px
}

.text-box3__note {
    color: #333844;
    font-family: "Proxima Nova";
    font-size: 24px;
    font-weight: 300;
    line-height: 30px
}

.images-box3 {
    display: block;
    margin: 0 auto
}

.l-container.style--4 {
    background-color: #e7e7ef;
}

.l-container.style--4 .container {
    padding-top: 90px;
    padding-bottom: 210px
}

.ico-map {
    background: url("../../img/mobile/location.png") 0 0 no-repeat;
    width: 42px;
    height: 60px;
    margin: 0 auto 36px auto
}

.notes-box {
    width: 530px;
    margin: 0 auto;
    color: #fff;
    font-family: "Proxima Nova";
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
    text-align: center;
    padding-bottom: 130px
}

.copy {
    text-align: center;
    opacity: .3;
    color: #fff;
    font-family: "Proxima Nova";
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    position: relative;
    margin-top: -30px;
    padding-bottom: 30px
}


.secret .l-container.style--2 {
    padding-top: 70px;
    background-color: #000000;
    background-image: none;
}

.secret .l-container.style--1 {
    background-color: #000000;
}
.secret .l-container.style--1:before {
    background-image: radial-gradient(circle 493px at 493px, #000029 0%, #000000 100%)
}

.secret .logo-top {
    background: url("../../img/mobile/secret_icon.png") no-repeat;
    margin-left: -155px;
    height: 320px;
}

.secret .top-title {
    color: #FF384C;
    margin-bottom: 70px;
}

.secret .phone {
    background: url("../../img/mobile/search.png") no-repeat;
    width: 531px;
    height: 804px;
    margin: -280px auto 34px auto
}

.secret .images-box3{
    width: 510px;
}

.secret .notes-box{
    text-align: left;
}