Created
January 28, 2017 09:29
-
-
Save hoanglamhuynh/ac9844bf8665cf20654c37c73239aa12 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family: "SofiaPro"; | |
| src: url("../fonts/sofia-pro.eot") format("eot"), url("../fonts/sofia-pro.woff") format("woff"), url("../fonts/sofia-pro.ttf") format("ttf") | |
| } | |
| @font-face { | |
| font-family: "SofiaProLight"; | |
| src: url("../fonts/sofia-pro-light.eot") format("eot"), url("../fonts/sofia-pro-light.woff") format("woff"), url("../fonts/sofia-pro-light.ttf") format("ttf") | |
| } | |
| @font-face { | |
| font-family: "SofiaProSemiBold"; | |
| src: url("../fonts/sofia-pro-semi-bold.eot") format("eot"), url("../fonts/sofia-pro-semi-bold.woff") format("woff"), url("../fonts/sofia-pro-semi-bold.ttf") format("ttf") | |
| } | |
| 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 | |
| } | |
| .text--white { | |
| color: #fff | |
| } | |
| .text--gray { | |
| color: #8B898D | |
| } | |
| .text--dark { | |
| color: #535353 | |
| } | |
| .text--black { | |
| color: #000 | |
| } | |
| .text--blue { | |
| color: #00ACC6 | |
| } | |
| .text--green { | |
| color: #2ECE6A | |
| } | |
| .text--red { | |
| color: #ff5a5f | |
| } | |
| .text--orange { | |
| color: #ffa400 | |
| } | |
| .text--bold { | |
| font-weight: bold | |
| } | |
| .text--bolder { | |
| font-family: SofiaProSemiBold | |
| } | |
| .text--right { | |
| text-align: right | |
| } | |
| .text--center { | |
| text-align: center | |
| } | |
| .text--left { | |
| text-align: left | |
| } | |
| .lh--125 { | |
| line-height: 125% | |
| } | |
| .lh--150 { | |
| line-height: 150% | |
| } | |
| .fs--small { | |
| font-size: 8px | |
| } | |
| .fs--small-medium { | |
| font-size: 14px | |
| } | |
| .fs--medium { | |
| font-size: 16px | |
| } | |
| .fs--medium-large { | |
| font-size: 24px | |
| } | |
| .fs--large { | |
| font-size: 32px | |
| } | |
| .fs--largest { | |
| font-size: 64px | |
| } | |
| .display--inline-block { | |
| display: inline-block | |
| } | |
| .display--flex { | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .display--inline-flex { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex | |
| } | |
| .display--table { | |
| display: table | |
| } | |
| .display--table-cell { | |
| display: table-cell | |
| } | |
| .position--relative { | |
| position: relative | |
| } | |
| .flex-1 { | |
| -ms-flex: 1 0 auto; | |
| flex: 1 0 auto | |
| } | |
| .flex-shrink-1 { | |
| -ms-flex-negative: 1; | |
| flex-shrink: 1 | |
| } | |
| .flex-none { | |
| -ms-flex: none; | |
| flex: none | |
| } | |
| .flex-align-items-center { | |
| -ms-flex-align: center; | |
| align-items: center | |
| } | |
| .flex-wrap { | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap | |
| } | |
| .float-right { | |
| float: right | |
| } | |
| .float-left { | |
| float: left | |
| } | |
| .hide { | |
| display: none | |
| } | |
| .show { | |
| display: block | |
| } | |
| .width--150 { | |
| width: 150% | |
| } | |
| .width--100 { | |
| width: 100% | |
| } | |
| .width--75 { | |
| width: 75% | |
| } | |
| .width--50 { | |
| width: 50% | |
| } | |
| .width--33 { | |
| width: 33% | |
| } | |
| .width--25 { | |
| width: 25% | |
| } | |
| .width--100px { | |
| width: 100px | |
| } | |
| .white-space--pre { | |
| white-space: pre | |
| } | |
| .border-box { | |
| box-sizing: border-box | |
| } | |
| .cursor-pointer { | |
| cursor: pointer | |
| } | |
| .link-no-underline { | |
| text-decoration: none | |
| } | |
| .iconmoon-icon { | |
| width: 1em; | |
| height: 1em; | |
| stroke: currentColor; | |
| fill: currentColor; | |
| display: inline-block; | |
| stroke-width: 0 | |
| } | |
| .clearfix::after { | |
| clear: both | |
| } | |
| .clearfix::before { | |
| display: table; | |
| content: '' | |
| } | |
| .dmk-link { | |
| font-weight: bold; | |
| text-decoration: none; | |
| color: #00ACC6 | |
| } | |
| @media (min-width: 300px) and (max-width: 650px) { | |
| .hide--if-small { | |
| display: none | |
| } | |
| .show--if-small { | |
| display: block | |
| } | |
| .m0--if-small { | |
| margin: 0px 0px 0px 0px !important | |
| } | |
| .p0--if-small { | |
| padding: 0px 0px 0px 0px !important | |
| } | |
| } | |
| @media (min-width: 651px) { | |
| .hide--if-large { | |
| display: none | |
| } | |
| .show--if-large { | |
| display: block | |
| } | |
| } | |
| * { | |
| box-sizing: border-box | |
| } | |
| body { | |
| overflow-x: hidden | |
| } | |
| body, h1, h2, h3, p, input { | |
| font-family: SofiaProLight | |
| } | |
| button { | |
| outline: none; | |
| cursor: pointer; | |
| font-family: SofiaPro | |
| } | |
| button>span { | |
| font-family: SofiaPro | |
| } | |
| h1 { | |
| font-size: 32px | |
| } | |
| h2 { | |
| font-size: 16px | |
| } | |
| .IIV::-webkit-media-controls-play-button, video::-webkit-media-controls-start-playback-button { | |
| opacity: 0; | |
| pointer-events: none; | |
| width: 5px | |
| } | |
| label { | |
| line-height: 150%; | |
| font-size: 14px | |
| } | |
| strong { | |
| font-family: SofiaProSemiBold | |
| } | |
| hr { | |
| border: none; | |
| border-bottom: 1px solid #cdcdcd | |
| } | |
| @-ms-viewport { | |
| width: device-width | |
| } | |
| .container:after, .container:before, .row:after, .row:before { | |
| content: " "; | |
| display: table | |
| } | |
| .container:after, .row:after { | |
| clear: both | |
| } | |
| .container { | |
| margin-right: auto; | |
| margin-left: auto; | |
| padding-left: 15px; | |
| padding-right: 15px | |
| } | |
| @media (min-width: 768px) { | |
| .container { | |
| width: 750px | |
| } | |
| } | |
| @media (min-width: 992px) { | |
| .container { | |
| width: 970px | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .container { | |
| width: 1170px | |
| } | |
| } | |
| .row { | |
| margin-left: -15px; | |
| margin-right: -15px | |
| } | |
| .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { | |
| position: relative; | |
| min-height: 1px; | |
| padding-left: 15px; | |
| padding-right: 15px | |
| } | |
| .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { | |
| float: left | |
| } | |
| .col-xs-12 { | |
| width: 100% | |
| } | |
| .col-xs-11 { | |
| width: 91.66666667% | |
| } | |
| .col-xs-10 { | |
| width: 83.33333333% | |
| } | |
| .col-xs-9 { | |
| width: 75% | |
| } | |
| .col-xs-8 { | |
| width: 66.66666667% | |
| } | |
| .col-xs-7 { | |
| width: 58.33333333% | |
| } | |
| .col-xs-6 { | |
| width: 50% | |
| } | |
| .col-xs-5 { | |
| width: 41.66666667% | |
| } | |
| .col-xs-4 { | |
| width: 33.33333333% | |
| } | |
| .col-xs-3 { | |
| width: 25% | |
| } | |
| .col-xs-2 { | |
| width: 16.66666667% | |
| } | |
| .col-xs-1 { | |
| width: 8.33333333% | |
| } | |
| @media (min-width: 768px) { | |
| .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { | |
| float: left | |
| } | |
| .col-sm-12 { | |
| width: 100% | |
| } | |
| .col-sm-11 { | |
| width: 91.66666667% | |
| } | |
| .col-sm-10 { | |
| width: 83.33333333% | |
| } | |
| .col-sm-9 { | |
| width: 75% | |
| } | |
| .col-sm-8 { | |
| width: 66.66666667% | |
| } | |
| .col-sm-7 { | |
| width: 58.33333333% | |
| } | |
| .col-sm-6 { | |
| width: 50% | |
| } | |
| .col-sm-5 { | |
| width: 41.66666667% | |
| } | |
| .col-sm-4 { | |
| width: 33.33333333% | |
| } | |
| .col-sm-3 { | |
| width: 25% | |
| } | |
| .col-sm-2 { | |
| width: 16.66666667% | |
| } | |
| .col-sm-1 { | |
| width: 8.33333333% | |
| } | |
| } | |
| @media (min-width: 992px) { | |
| .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { | |
| float: left | |
| } | |
| .col-md-12 { | |
| width: 100% | |
| } | |
| .col-md-11 { | |
| width: 91.66666667% | |
| } | |
| .col-md-10 { | |
| width: 83.33333333% | |
| } | |
| .col-md-9 { | |
| width: 75% | |
| } | |
| .col-md-8 { | |
| width: 66.66666667% | |
| } | |
| .col-md-7 { | |
| width: 58.33333333% | |
| } | |
| .col-md-6 { | |
| width: 50% | |
| } | |
| .col-md-5 { | |
| width: 41.66666667% | |
| } | |
| .col-md-4 { | |
| width: 33.33333333% | |
| } | |
| .col-md-3 { | |
| width: 25% | |
| } | |
| .col-md-2 { | |
| width: 16.66666667% | |
| } | |
| .col-md-1 { | |
| width: 8.33333333% | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { | |
| float: left | |
| } | |
| .col-lg-12 { | |
| width: 100% | |
| } | |
| .col-lg-11 { | |
| width: 91.66666667% | |
| } | |
| .col-lg-10 { | |
| width: 83.33333333% | |
| } | |
| .col-lg-9 { | |
| width: 75% | |
| } | |
| .col-lg-8 { | |
| width: 66.66666667% | |
| } | |
| .col-lg-7 { | |
| width: 58.33333333% | |
| } | |
| .col-lg-6 { | |
| width: 50% | |
| } | |
| .col-lg-5 { | |
| width: 41.66666667% | |
| } | |
| .col-lg-4 { | |
| width: 33.33333333% | |
| } | |
| .col-lg-3 { | |
| width: 25% | |
| } | |
| .col-lg-2 { | |
| width: 16.66666667% | |
| } | |
| .col-lg-1 { | |
| width: 8.33333333% | |
| } | |
| } | |
| .pa { | |
| padding: auto | |
| } | |
| .pxl { | |
| padding: 64px | |
| } | |
| .pl { | |
| padding: 32px | |
| } | |
| .pm { | |
| padding: 16px | |
| } | |
| .ps { | |
| padding: 8px | |
| } | |
| .pxs { | |
| padding: 4px | |
| } | |
| .p0 { | |
| padding: 0px | |
| } | |
| .ptxl { | |
| padding-top: 64px | |
| } | |
| .ptl { | |
| padding-top: 32px | |
| } | |
| .ptm { | |
| padding-top: 16px | |
| } | |
| .pts { | |
| padding-top: 8px | |
| } | |
| .ptxs { | |
| padding-top: 4px | |
| } | |
| .pt0 { | |
| padding-top: 0px | |
| } | |
| .pbxl { | |
| padding-bottom: 64px | |
| } | |
| .pbl { | |
| padding-bottom: 32px | |
| } | |
| .pbm { | |
| padding-bottom: 16px | |
| } | |
| .pbs { | |
| padding-bottom: 8px | |
| } | |
| .pbxs { | |
| padding-bottom: 4px | |
| } | |
| .pb0 { | |
| padding-bottom: 0px | |
| } | |
| .plxl { | |
| padding-left: 64px | |
| } | |
| .pll { | |
| padding-left: 32px | |
| } | |
| .plm { | |
| padding-left: 16px | |
| } | |
| .pls { | |
| padding-left: 8px | |
| } | |
| .plxs { | |
| padding-left: 4px | |
| } | |
| .pl0 { | |
| padding-left: 0px | |
| } | |
| .prxl { | |
| padding-right: 64px | |
| } | |
| .prl { | |
| padding-right: 32px | |
| } | |
| .prm { | |
| padding-right: 16px | |
| } | |
| .prs { | |
| padding-right: 8px | |
| } | |
| .prxs { | |
| padding-right: 4px | |
| } | |
| .pr0 { | |
| padding-right: 0px | |
| } | |
| .ma { | |
| margin: auto | |
| } | |
| .m0a { | |
| margin: 0 auto | |
| } | |
| .mxl { | |
| margin: 64px | |
| } | |
| .ml { | |
| margin: 32px | |
| } | |
| .mm { | |
| margin: 16px | |
| } | |
| .ms { | |
| margin: 8px | |
| } | |
| .mxs { | |
| margin: 4px | |
| } | |
| .m0 { | |
| margin: 0px | |
| } | |
| .mtxl { | |
| margin-top: 64px | |
| } | |
| .mtl { | |
| margin-top: 32px | |
| } | |
| .mtm { | |
| margin-top: 16px | |
| } | |
| .mts { | |
| margin-top: 8px | |
| } | |
| .mtxs { | |
| margin-top: 4px | |
| } | |
| .mt0 { | |
| margin-top: 0px | |
| } | |
| .mbxl { | |
| margin-bottom: 64px | |
| } | |
| .mbl { | |
| margin-bottom: 32px | |
| } | |
| .mbm { | |
| margin-bottom: 16px | |
| } | |
| .mbs { | |
| margin-bottom: 8px | |
| } | |
| .mbxs { | |
| margin-bottom: 4px | |
| } | |
| .mb0 { | |
| margin-bottom: 0px | |
| } | |
| .mlxl { | |
| margin-left: 64px | |
| } | |
| .mll { | |
| margin-left: 32px | |
| } | |
| .mlm { | |
| margin-left: 16px | |
| } | |
| .mls { | |
| margin-left: 8px | |
| } | |
| .mlxs { | |
| margin-left: 4px | |
| } | |
| .ml0 { | |
| margin-left: 0px | |
| } | |
| .mrxl { | |
| margin-right: 64px | |
| } | |
| .mrl { | |
| margin-right: 32px | |
| } | |
| .mrm { | |
| margin-right: 16px | |
| } | |
| .mrs { | |
| margin-right: 8px | |
| } | |
| .mrxs { | |
| margin-right: 4px | |
| } | |
| .mr0 { | |
| margin-right: 0px | |
| } | |
| @keyframes busy { | |
| 0% { | |
| background-position: 0 0 | |
| } | |
| 100% { | |
| background-position: 400px 400px | |
| } | |
| } | |
| .button { | |
| border: none; | |
| min-height: 36px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| padding-top: 4px; | |
| line-height: 150%; | |
| color: #fff; | |
| background-color: #cdcdcd; | |
| font-size: 14px | |
| } | |
| .button--busy { | |
| pointer-events: none; | |
| background-color: #d0d0d0 !important; | |
| overflow: hidden; | |
| position: relative | |
| } | |
| .button--busy::after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| left: -10px; | |
| bottom: 0px; | |
| width: calc(100% + 10px); | |
| box-sizing: border-box; | |
| background-size: 400px 400px; | |
| background-image: -webkit-linear-gradient(-45deg, #00ACC6 25%, transparent 25%, transparent 50%, #00ACC6 50%, #00ACC6 75%, transparent 75%, transparent); | |
| height: 2px; | |
| animation: busy 2s linear infinite | |
| } | |
| .button:hover { | |
| background-color: #dadada | |
| } | |
| .button--medium { | |
| font-size: 12.8px; | |
| height: 32px | |
| } | |
| .button--small { | |
| font-size: 12px; | |
| height: 28px | |
| } | |
| .button--danger { | |
| background-color: #ff5a5f | |
| } | |
| .button--danger:hover { | |
| background-color: #ff7478 | |
| } | |
| .button--success { | |
| background-color: #2ECE6A | |
| } | |
| .button--success:hover { | |
| background-color: #41d578 | |
| } | |
| .button--dark { | |
| background-color: #535353 | |
| } | |
| .button--dark:hover { | |
| background-color: #797979 | |
| } | |
| .button--outline { | |
| background-color: transparent; | |
| color: #000; | |
| border: 1px solid #cdcdcd | |
| } | |
| .button--outline:hover { | |
| background-color: #f3f3f3 | |
| } | |
| .button--facebook { | |
| background-color: #2d4386 | |
| } | |
| .footer { | |
| background-color: #1a1a1a; | |
| color: #fff; | |
| padding: 30px 20px 15px 20px; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .footer__left { | |
| -ms-flex: 1; | |
| flex: 1 | |
| } | |
| .footer__dahmakan { | |
| width: 200px; | |
| fill: #fff | |
| } | |
| .footer__leaf { | |
| width: 10px | |
| } | |
| .footer__social { | |
| width: 45px; | |
| height: 45px | |
| } | |
| .header { | |
| width: 100%; | |
| height: 50px; | |
| position: fixed; | |
| top: 0px; | |
| left: 0px; | |
| z-index: 1; | |
| background-color: #fff; | |
| transform-origin: top | |
| } | |
| .header--show { | |
| transform: scaleY(1); | |
| transition: transform 0.2s ease | |
| } | |
| .header--hide { | |
| transform: scaleY(0); | |
| transition: transform 0.15s ease | |
| } | |
| .header__logo { | |
| margin-top: 10px; | |
| height: 40px | |
| } | |
| .header__dahmakan { | |
| fill: #000; | |
| width: 150px | |
| } | |
| .input { | |
| border: 1px solid #cdcdcd; | |
| padding: 9px; | |
| box-sizing: border-box; | |
| color: #333; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| font-size: 14px | |
| } | |
| .input.input--center-ph::-webkit-input-placeholder { | |
| text-align: center | |
| } | |
| .input.input--center-ph:-moz-placeholder { | |
| text-align: center | |
| } | |
| .input.input--center-ph::-moz-placeholder { | |
| text-align: center | |
| } | |
| .input.input--center-ph:-ms-input-placeholder { | |
| text-align: center | |
| } | |
| .input--error { | |
| border: 1px solid #ff5a5f | |
| } | |
| .logo { | |
| position: relative | |
| } | |
| .logo__text { | |
| margin-right: 3px; | |
| margin-bottom: -1px; | |
| fill: #fff | |
| } | |
| .logo__text--default-black { | |
| width: 150px; | |
| fill: #000 | |
| } | |
| .logo--green path { | |
| fill: #2ECE6A | |
| } | |
| .logo--blue path { | |
| fill: #00ACC6 | |
| } | |
| .logo--red path { | |
| fill: #ff5a5f | |
| } | |
| .logo--orange path { | |
| fill: #ffa400 | |
| } | |
| .logo--purple path { | |
| fill: #8B199B | |
| } | |
| .modal { | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 0; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease | |
| } | |
| .modal--open { | |
| z-index: 100; | |
| pointer-events: all; | |
| opacity: 1 | |
| } | |
| .modal__content { | |
| z-index: 1; | |
| background-color: #fff; | |
| color: #000; | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) | |
| } | |
| .modal__backdrop { | |
| position: fixed; | |
| background-color: rgba(0, 0, 0, 0.3); | |
| top: 0px; | |
| left: 0px; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0 | |
| } | |
| .modal__close { | |
| right: 20px; | |
| top: 20px; | |
| position: absolute | |
| } | |
| .modal__close-icon { | |
| width: 20px; | |
| height: 20px; | |
| cursor: pointer | |
| } | |
| .well { | |
| background-color: #fff; | |
| padding: 20px; | |
| margin-bottom: 20px | |
| } | |
| .prime-header { | |
| padding-top: 15px; | |
| padding-bottom: 10px; | |
| position: relative; | |
| background-color: white; | |
| z-index: 1 | |
| } | |
| .prime-header--transparent { | |
| background-color: trasparent | |
| } | |
| .prime-header__prime-logo { | |
| width: 100px | |
| } | |
| .prime-header__back, .prime-header__next { | |
| position: absolute; | |
| color: #000; | |
| top: calc(50% - 10px) | |
| } | |
| .prime-header__back-icon { | |
| position: relative; | |
| margin-right: 5px; | |
| top: 4px | |
| } | |
| .prime-header__next-icon { | |
| position: relative; | |
| margin-left: 5px; | |
| top: 4px | |
| } | |
| .prime-header__next { | |
| right: 0px | |
| } | |
| .payment-provider { | |
| width: 40px; | |
| height: 25px; | |
| display: inline-block; | |
| background-size: 100% | |
| } | |
| .payment-provider--paypal { | |
| background-image: url("/images/static/paypal.png") | |
| } | |
| .payment-provider--visacard { | |
| background-image: url("/images/static/visacard.png") | |
| } | |
| .payment-provider--mastercard { | |
| background-image: url("/images/static/mastercard.png") | |
| } | |
| .payment-provider--molpay { | |
| background-image: url("/images/static/molpay.png") | |
| } | |
| .collapsible { | |
| background-color: #fff | |
| } | |
| .collapsible__toggle { | |
| border: none; | |
| background: none | |
| } | |
| .collapsible__collapse { | |
| width: 1.5em; | |
| height: 1.5em | |
| } | |
| .collapsible__content { | |
| overflow: hidden | |
| } | |
| .collapsible__content--collapsed { | |
| max-height: 0px | |
| } | |
| @keyframes busy { | |
| 0% { | |
| background-position: 0 0 | |
| } | |
| 100% { | |
| background-position: 400px 400px | |
| } | |
| } | |
| .loading--candy-strip::after { | |
| content: ''; | |
| display: block; | |
| width: 100%; | |
| box-sizing: border-box; | |
| background-size: 400px 400px; | |
| background-image: -webkit-linear-gradient(-45deg, #00ACC6 25%, transparent 25%, transparent 50%, #00ACC6 50%, #00ACC6 75%, transparent 75%, transparent); | |
| height: 2px; | |
| animation: busy 2s linear infinite | |
| } | |
| .banner { | |
| width: 100%; | |
| margin-bottom: 15px; | |
| position: relative; | |
| display: none; | |
| overflow: hidden | |
| } | |
| .banner--show { | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .banner__content { | |
| -ms-flex: 1; | |
| flex: 1; | |
| width: 100%; | |
| text-align: center; | |
| margin: auto; | |
| padding: 7px 30px; | |
| font-size: 13px | |
| } | |
| .banner--error { | |
| color: #fff; | |
| background-color: #ff5a5f | |
| } | |
| .banner--error .banner__close-button { | |
| background-color: #ff8d90 | |
| } | |
| .banner--success { | |
| color: #fff; | |
| background-color: #2ECE6A | |
| } | |
| .banner--success .banner__close-button { | |
| background-color: #56d987 | |
| } | |
| .banner--info { | |
| color: #fff; | |
| background-color: #00ACC6 | |
| } | |
| .banner--info .banner__close-button { | |
| background-color: #00d8f9 | |
| } | |
| .banner--warning { | |
| color: #fff; | |
| background-color: #ffa400 | |
| } | |
| .banner--warning .banner__close-button { | |
| background-color: #ffb633 | |
| } | |
| .banner__close-button { | |
| right: 0; | |
| border: none; | |
| padding: 4px; | |
| -ms-flex: none; | |
| flex: none | |
| } | |
| .banner__cross-icon { | |
| width: 2.5em; | |
| height: 2.5em; | |
| fill: #fff | |
| } | |
| .landing { | |
| font-size: 18px | |
| } | |
| .landing__title { | |
| font-size: 36px; | |
| padding-top: 45px | |
| } | |
| .landing__hero { | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| z-index: 0; | |
| filter: brightness(70%); | |
| width: 100% | |
| } | |
| .landing__overlay { | |
| position: relative; | |
| width: 100%; | |
| height: 100% | |
| } | |
| .landing__section-title { | |
| font-size: 32px; | |
| font-family: SofiaPro; | |
| line-height: 40px | |
| } | |
| .landing__paragraph { | |
| max-width: 80%; | |
| line-height: 120%; | |
| margin-left: auto; | |
| margin-right: auto | |
| } | |
| .prime__section { | |
| padding-top: 40px; | |
| padding-bottom: 40px | |
| } | |
| .prime__section-title { | |
| font-family: SofiaPro; | |
| font-weight: bold; | |
| margin-bottom: 30px | |
| } | |
| .prime__section-hero { | |
| background-size: cover; | |
| padding-top: 45px | |
| } | |
| .prime__section-hero-title { | |
| font-size: 32px; | |
| margin-bottom: 12px | |
| } | |
| .prime__section-hero-subtitle { | |
| font-size: 20px; | |
| margin-bottom: 24px | |
| } | |
| .prime__section-savings { | |
| padding-bottom: 0px | |
| } | |
| .prime__section-savings-icon-1, .prime__section-savings-icon-2, .prime__section-savings-icon-3 { | |
| display: inline-block; | |
| background: url("/images/static/prime-savings.png") no-repeat; | |
| overflow: hidden; | |
| text-indent: -9999px; | |
| text-align: left; | |
| transform: scale(0.65) | |
| } | |
| .prime__section-savings-icon-1 { | |
| background-position: -0px -158px; | |
| width: 156px; | |
| height: 156px | |
| } | |
| .prime__section-savings-icon-2 { | |
| background-position: -0px -314px; | |
| width: 156px; | |
| height: 156px | |
| } | |
| .prime__section-savings-icon-3 { | |
| background-position: -0px -0px; | |
| width: 158px; | |
| height: 158px | |
| } | |
| .prime__section-faq { | |
| background-color: #efefef | |
| } | |
| .prime__savings-item { | |
| padding-left: 50px; | |
| padding-right: 50px | |
| } | |
| .prime__savings-item-title { | |
| color: #00ACC6; | |
| font-size: 18px; | |
| font-weight: bold | |
| } | |
| .prime__benefit-wrapper { | |
| padding: 20px; | |
| padding-top: 0px; | |
| margin: 0 auto | |
| } | |
| .prime__benefit-wrapper-item--prominent { | |
| -ms-flex: 1; | |
| flex: 1 | |
| } | |
| .prime__benefit-wrapper-item--non-prominent { | |
| -ms-flex: 1; | |
| flex: 1; | |
| margin-top: 30px | |
| } | |
| .prime__faq-wrapper { | |
| background-color: #fff | |
| } | |
| .prime__faq-item-wrapper { | |
| box-sizing: border-box; | |
| padding: 10px; | |
| padding-bottom: 0px; | |
| vertical-align: top; | |
| border: 10px solid #efefef | |
| } | |
| .login { | |
| background-color: #efefef | |
| } | |
| .login .prime-header { | |
| background-color: transparent | |
| } | |
| .checkout { | |
| background-color: #efefef | |
| } | |
| .checkout .prime-header { | |
| background-color: transparent | |
| } | |
| .download-app { | |
| max-width: 200px | |
| } | |
| .download-app--small { | |
| max-width: 180px | |
| } | |
| .food-type__image { | |
| width: 20vw; | |
| height: 20vw; | |
| max-width: 180px; | |
| max-height: 180px | |
| } | |
| .food-type__caption { | |
| font-size: 17px; | |
| font-weight: bold | |
| } | |
| .food-type__logo-container { | |
| margin-top: 16px; | |
| margin-bottom: 16px | |
| } | |
| @keyframes scroll-indicator-anim { | |
| 0%, 100% { | |
| transform: translateY(0px) | |
| } | |
| 50% { | |
| transform: translateY(-20px) | |
| } | |
| } | |
| .section-hero { | |
| height: 620px; | |
| background-image: url("/images/static/hero.jpg"); | |
| width: 100%; | |
| background-size: cover; | |
| background-position: center center; | |
| transform-origin: bottom | |
| } | |
| .section-hero--with-video { | |
| background-image: none; | |
| overflow: hidden; | |
| height: 100vh; | |
| width: 100vw | |
| } | |
| .section-hero__video { | |
| position: absolute; | |
| z-index: -1; | |
| left: 0; | |
| top: 0; | |
| width: 100vw | |
| } | |
| .section-hero__logo { | |
| padding-top: 35px | |
| } | |
| .section-hero__logo-text { | |
| width: 190px | |
| } | |
| .section-hero__intro { | |
| margin-top: 160px | |
| } | |
| .section-hero__intro-text { | |
| font-size: 56px; | |
| font-family: SofiaProSemiBold | |
| } | |
| .section-hero__btn { | |
| width: 216px; | |
| font-size: 16px; | |
| height: 40px | |
| } | |
| .section-hero__download { | |
| width: 100%; | |
| position: absolute; | |
| bottom: 40px | |
| } | |
| .section-hero__download-ios { | |
| margin-right: 32px | |
| } | |
| .section-hero__hero-overlay { | |
| background: rgba(0, 0, 0, 0.3) | |
| } | |
| .section-hero__hero-overlay--with-video { | |
| background: rgba(0, 0, 0, 0.2) | |
| } | |
| .section-hero__subtitle, .section-hero__mobile-subtitle { | |
| font-size: 20px | |
| } | |
| .section-hero__subtitle { | |
| line-height: 130% | |
| } | |
| .section-hero__scroll-indicator-wrap { | |
| position: absolute; | |
| right: 30px; | |
| bottom: -30px; | |
| z-index: 1 | |
| } | |
| .section-hero__scroll-indicator { | |
| width: 60px; | |
| animation: scroll-indicator-anim 2000ms infinite | |
| } | |
| .section-hero--onboarding { | |
| background-position: center 80% | |
| } | |
| .section-hero--delicious-lunch-colleagues-v11 { | |
| background-image: url("/images/static/hero-delicious-lunch-colleagues-v1.1.jpg") | |
| } | |
| .section-hero--delicious-lunch-colleagues-v12 { | |
| background-image: url("/images/static/hero-delicious-lunch-colleagues-v1.2.jpg"); | |
| background-position-y: -1750px; | |
| background-size: 1910px | |
| } | |
| .section-hero--delicious-lunch-colleagues-v13 { | |
| background-image: url("/images/static/hero-delicious-lunch-colleagues-v1.3.jpg"); | |
| background-position-y: 60% | |
| } | |
| .section-hero--delicious-lunch-colleagues-v14 { | |
| background-image: url("/images/static/hero-delicious-lunch-colleagues-v1.4.jpg") | |
| } | |
| .section-hero--delicious-dinner-friends-v11 { | |
| background-image: url("/images/static/hero-delicious-dinner-friends-v1.1.jpg") | |
| } | |
| .section-hero--delicious-dinner-friends-v12 { | |
| background-image: url("/images/static/hero-delicious-dinner-friends-v1.2.jpg") | |
| } | |
| .section-hero--delicious-dinner-friends-v12 .landing__hero__intro { | |
| margin-top: 90px | |
| } | |
| .section-hero--delicious-dinner-at-home-v11 { | |
| background-image: url("/images/static/hero-delicious-dinner-at-home-v1.1.jpg"); | |
| background-position: center 20% | |
| } | |
| .section-hero--delicious-dinner-at-home-v12 { | |
| background-image: url("/images/static/hero-delicious-dinner-at-home-v1.2.jpg") | |
| } | |
| .section-hero--delicious-packages-v11 { | |
| background-image: url("/images/static/hero-delicious-packages-v1.1.jpg") | |
| } | |
| .section-hero--delicious-packages-v12 { | |
| background-image: url("/images/static/hero-delicious-packages-v1.2.jpg") | |
| } | |
| .section-dishes { | |
| padding-top: 100px; | |
| padding-bottom: 55px | |
| } | |
| .section-dishes__paragraph { | |
| font-size: 120%; | |
| line-height: 120%; | |
| padding-left: 50px; | |
| padding-right: 50px | |
| } | |
| .section-dishes__title { | |
| width: 515px; | |
| margin: 0 auto | |
| } | |
| .section-app { | |
| background-color: #edebec; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .section-app__content { | |
| -ms-flex: 1; | |
| flex: 1; | |
| padding-left: 30px; | |
| max-width: 50% | |
| } | |
| .section-app__background-wrapper { | |
| -ms-flex: 1; | |
| flex: 1 | |
| } | |
| .section-app__background { | |
| max-width: 620px; | |
| min-width: 300px; | |
| width: 100%; | |
| float: right | |
| } | |
| .section-app__padder { | |
| max-height: 155px; | |
| height: 10vw | |
| } | |
| .section-app__small-padder { | |
| max-height: 64px; | |
| height: 5vw | |
| } | |
| .section-delivered { | |
| height: 619px; | |
| background-image: url("/images/static/blue-section.jpg"); | |
| display: -ms-flexbox; | |
| display: flex; | |
| background-size: cover; | |
| background-position: center center | |
| } | |
| .section-delivered__background { | |
| width: 100%; | |
| position: absolute; | |
| z-index: 0; | |
| margin: auto | |
| } | |
| .section-delivered__btn { | |
| width: 180px | |
| } | |
| .section-corporate { | |
| height: 500px; | |
| padding-top: 135px; | |
| background-image: url("/images/static/lunchbox.jpg"); | |
| display: -ms-flexbox; | |
| display: flex; | |
| background-size: cover; | |
| background-position: center center | |
| } | |
| .section-corporate__title { | |
| width: 70% | |
| } | |
| .section-corporate__background { | |
| width: 100%; | |
| position: absolute; | |
| z-index: 0; | |
| margin: auto | |
| } | |
| .section-corporate__btn { | |
| width: 180px; | |
| font-family: SofiaPro | |
| } | |
| .section-footer { | |
| padding-top: 115px | |
| } | |
| .section-footer__background { | |
| background-image: url("/images/static/kl-skyline.png"); | |
| background-size: cover; | |
| background-position: center bottom; | |
| height: 430px; | |
| margin-bottom: -10px | |
| } | |
| .section-footer__btn { | |
| width: 180px; | |
| font-family: SofiaPro | |
| } | |
| .section__testimonials { | |
| padding-top: 90px; | |
| padding-bottom: 60px; | |
| text-align: center | |
| } | |
| .section__testimonials__nav-btn { | |
| border: none; | |
| background: none; | |
| cursor: pointer; | |
| outline: none | |
| } | |
| .section__testimonials__nav-btn--prev { | |
| width: 25px; | |
| margin-left: -60px | |
| } | |
| .section__testimonials__nav-btn--next { | |
| width: 25px; | |
| margin-right: -60px | |
| } | |
| .section__testimonials__content { | |
| -ms-flex: 1; | |
| flex: 1; | |
| overflow: hidden | |
| } | |
| .section__testimonials__title { | |
| font-weight: bold; | |
| margin-bottom: 50px | |
| } | |
| .section__testimonials__page { | |
| background-color: #fff; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .section__testimonials__page .slider { | |
| margin: 0 auto | |
| } | |
| .section__testimonials .slider { | |
| margin: 0 auto | |
| } | |
| .section__testimonials .slider-frame { | |
| min-height: 290px | |
| } | |
| .section__testimonials-item { | |
| -ms-flex: 1; | |
| flex: 1; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| padding: 20px | |
| } | |
| .section__testimonials-item__leaf { | |
| margin-bottom: 10px; | |
| width: 35px | |
| } | |
| .section__testimonials-item__text { | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid #ababab; | |
| -ms-flex: 1; | |
| flex: 1 | |
| } | |
| .section__testimonials-item__info { | |
| padding: 8px | |
| } | |
| .section__testimonials-item__footer { | |
| display: -ms-flexbox; | |
| display: flex; | |
| padding-top: 30px; | |
| margin: 0 auto | |
| } | |
| .section__testimonials-item__name { | |
| font-weight: bold; | |
| font-family: SofiaPro | |
| } | |
| .section__testimonials-item__date { | |
| font-size: 80%; | |
| color: #ababab | |
| } | |
| .section__testimonials-item__avatar--alberto-ayala, .section__testimonials-item__avatar--alvin-george, .section__testimonials-item__avatar--ariel-silt, .section__testimonials-item__avatar--catherine, .section__testimonials-item__avatar--claire-horn, .section__testimonials-item__avatar--danielle { | |
| display: inline-block; | |
| background: url("/images/static/testimonials.png") no-repeat; | |
| overflow: hidden; | |
| text-indent: -9999px; | |
| text-align: left | |
| } | |
| .section__testimonials-item__avatar--alberto-ayala { | |
| background-position: -0px -0px; | |
| width: 43px; | |
| height: 43px | |
| } | |
| .section__testimonials-item__avatar--alvin-george { | |
| background-position: -43px -0px; | |
| width: 43px; | |
| height: 43px | |
| } | |
| .section__testimonials-item__avatar--ariel-silt { | |
| background-position: -0px -43px; | |
| width: 43px; | |
| height: 43px | |
| } | |
| .section__testimonials-item__avatar--catherine { | |
| background-position: -43px -43px; | |
| width: 43px; | |
| height: 43px | |
| } | |
| .section__testimonials-item__avatar--claire-horn { | |
| background-position: -0px -86px; | |
| width: 43px; | |
| height: 43px | |
| } | |
| .section__testimonials-item__avatar--danielle { | |
| background-position: -43px -86px; | |
| width: 43px; | |
| height: 43px | |
| } | |
| .section__badges { | |
| padding: 70px 100px | |
| } | |
| .section__badges__title { | |
| font-size: 32px; | |
| font-family: SofiaPro; | |
| margin-bottom: 30px | |
| } | |
| .section__badges__content { | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin: 0 auto | |
| } | |
| .section__badges__icon { | |
| display: inline-block; | |
| background: url("/images/static/badges.png") no-repeat; | |
| overflow: hidden; | |
| text-indent: -9999px; | |
| text-align: left | |
| } | |
| .section__badges__icon--daily { | |
| background-position: -0px -0px; | |
| width: 150px; | |
| height: 150px | |
| } | |
| .section__badges__icon--delivered { | |
| background-position: -0px -150px; | |
| width: 150px; | |
| height: 150px | |
| } | |
| .section__badges__icon--delivery { | |
| background-position: -0px -300px; | |
| width: 150px; | |
| height: 150px | |
| } | |
| .section__badges__text { | |
| margin-top: 16px | |
| } | |
| .prime-benefit { | |
| padding: 20px; | |
| background-color: #fff; | |
| color: #8B898D; | |
| border-top: 6px solid #00ACC6; | |
| font-size: 15px; | |
| max-width: 300px | |
| } | |
| .prime-benefit:hover { | |
| box-shadow: 5px 5px 5px rgba(45, 45, 45, 0.3) | |
| } | |
| .prime-benefit--prominent { | |
| padding-top: 50px; | |
| padding-bottom: 50px | |
| } | |
| .prime-benefit__title { | |
| font-size: 60px; | |
| font-family: SofiaProSemiBold | |
| } | |
| .prime-benefit__price { | |
| font-family: SofiaProSemiBold; | |
| font-size: 24px | |
| } | |
| .prime-benefit__saving { | |
| color: #00ACC6 | |
| } | |
| .prime-benefit__descriptions { | |
| min-height: 110px | |
| } | |
| .prime-benefit__button { | |
| border: 1px solid #8B898D; | |
| padding: 15px; | |
| padding-top: 12px; | |
| padding-bottom: 12px; | |
| background-color: #fff; | |
| border-radius: 3px; | |
| font-size: 16px; | |
| width: 170px | |
| } | |
| .prime-benefit__button--prominent { | |
| background-color: #00ACC6; | |
| color: #fff; | |
| border: 1px solid transparent | |
| } | |
| .help-popup { | |
| position: relative; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| text-align: center | |
| } | |
| .help-popup--as-modal .help-popup__content { | |
| bottom: auto; | |
| position: fixed; | |
| left: 50%; | |
| transform: translate(-50%, -50%) | |
| } | |
| .help-popup--as-modal .help-popup__backdrop { | |
| opacity: 0.2; | |
| background-color: #000 | |
| } | |
| .help-popup__content { | |
| position: absolute; | |
| bottom: 20px; | |
| transform: translateX(-46%); | |
| margin: auto; | |
| transition: opacity 0.25s; | |
| z-index: 3 | |
| } | |
| .help-popup__content--hide { | |
| opacity: 0; | |
| pointer-events: none | |
| } | |
| .help-popup__content--show { | |
| opacity: 1; | |
| pointer-events: all | |
| } | |
| .help-popup__trigger { | |
| cursor: pointer | |
| } | |
| .help-popup__backdrop { | |
| position: fixed; | |
| z-index: 2; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0 | |
| } | |
| .faq-item { | |
| background-color: #fff; | |
| padding: 30px | |
| } | |
| .faq-item__question { | |
| font-family: SofiaProSemiBold; | |
| margin-bottom: 10px | |
| } | |
| .prime-footer { | |
| background-color: #000; | |
| padding: 20px; | |
| color: #fff; | |
| position: relative | |
| } | |
| .prime-footer__apps { | |
| float: left | |
| } | |
| .prime-footer__app-button { | |
| width: 120px | |
| } | |
| .prime-footer__logo-wrapper { | |
| text-align: center; | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| top: 15px | |
| } | |
| .prime-footer__logo { | |
| width: 100px | |
| } | |
| .prime-footer__socials { | |
| float: right | |
| } | |
| .prime-footer__social-icon { | |
| width: 1.5em; | |
| height: 1.5em; | |
| color: #fff | |
| } | |
| .auth-panel { | |
| padding: 20px; | |
| padding-top: 0px; | |
| font-size: 20px; | |
| width: 530px; | |
| margin: 0 auto; | |
| margin-top: 20px; | |
| background-color: #fff; | |
| border-top: 6px solid #00ACC6 | |
| } | |
| .auth-panel__tab-header { | |
| background: none; | |
| padding: 10px; | |
| border: none; | |
| font-size: 15px; | |
| border-bottom: 1px solid #d6d6d6; | |
| width: 50%; | |
| color: #8B898D; | |
| outline: none | |
| } | |
| .auth-panel__tab-header--active { | |
| border-bottom: none; | |
| border-left: 1px solid #d6d6d6; | |
| border-right: 1px solid #d6d6d6; | |
| border-top: 1px solid #d6d6d6; | |
| color: #000; | |
| font-family: SofiaProSemiBold | |
| } | |
| .auth-panel__login, .auth-panel__register { | |
| width: 80%; | |
| margin: 0 auto | |
| } | |
| .auth-panel__title { | |
| font-family: SofiaProSemiBold | |
| } | |
| .auth-panel__errors { | |
| background-color: #ffeaeb; | |
| margin-top: 20px; | |
| font-size: small; | |
| padding: 10px | |
| } | |
| .auth-panel__error-icon { | |
| margin-right: 10px; | |
| position: relative; | |
| top: 1px | |
| } | |
| .auth-panel__notice-board { | |
| padding: 30px; | |
| font-size: small | |
| } | |
| .auth-panel__separator { | |
| display: block; | |
| font-weight: bold | |
| } | |
| .auth-panel__separator-text { | |
| position: relative; | |
| background-color: #fff; | |
| display: inline; | |
| z-index: 1 | |
| } | |
| .auth-panel__separator::after { | |
| content: ''; | |
| display: block; | |
| margin: auto; | |
| margin-top: -12px; | |
| position: relative; | |
| width: 90%; | |
| border-bottom: 1px solid #cdcdcd | |
| } | |
| .discount-code-form__cancel-button { | |
| width: 150px; | |
| margin-top: 4px | |
| } | |
| .payment-method-item { | |
| padding-top: 5px; | |
| padding-bottom: 5px | |
| } | |
| .payment-method-item__button { | |
| width: 20px; | |
| height: 20px | |
| } | |
| .payment-method-picker { | |
| margin-bottom: 10px | |
| } | |
| .payment-method-picker>li:last-child { | |
| border-bottom: 1px solid #d8d7d8 | |
| } | |
| .payment-method-picker__card { | |
| -ms-flex-align: center; | |
| align-items: center; | |
| border-top: 1px solid #d8d7d8 | |
| } | |
| .payment-method-picker__button { | |
| border: none; | |
| background: none | |
| } | |
| .payment-method-picker__button-icon { | |
| width: 2em; | |
| height: 2em | |
| } | |
| .add-payment-method__button { | |
| height: auto; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| width: 300px | |
| } | |
| .add-payment-method__icon { | |
| transform: scale(0.9) | |
| } | |
| .add-payment-method__button-text { | |
| color: #8B898D | |
| } | |
| .prime-payment-confirm { | |
| width: 50%; | |
| min-width: 500px; | |
| margin: auto; | |
| text-align: center; | |
| font-size: 14px; | |
| background-color: #fff; | |
| color: #8B898D | |
| } | |
| .prime-payment-confirm__header { | |
| background: #00ACC6; | |
| color: #fff; | |
| padding: 30px | |
| } | |
| .prime-payment-confirm__item-description { | |
| width: 100% | |
| } | |
| .prime-payment-confirm__item-description thead tr { | |
| border-bottom: 1px solid #cdcdcd | |
| } | |
| .prime-payment-confirm__item-description tr { | |
| line-height: 190% | |
| } | |
| .prime-payment-confirm__order-summary { | |
| width: 50%; | |
| float: right; | |
| color: #535353 | |
| } | |
| .prime-payment-confirm__order-summary tr { | |
| line-height: 175% | |
| } | |
| .prime-payment-confirm__order-summary td { | |
| text-align: right | |
| } | |
| .prime-payment-confirm__smart-reload { | |
| background-color: #efefef; | |
| padding: 13px; | |
| margin-top: 5px; | |
| margin-bottom: 20px | |
| } | |
| .prime-payment-confirm__apps { | |
| background-color: #efefef | |
| } | |
| .prime-payment-confirm__app-button { | |
| width: 150px | |
| } | |
| .cart__gray { | |
| background-color: #efefef | |
| } | |
| .cart__image { | |
| max-width: 200px | |
| } | |
| .cart--empty { | |
| background-color: #fff; | |
| text-align: center; | |
| padding: 50px; | |
| width: 50%; | |
| margin: auto; | |
| margin-top: 50px | |
| } | |
| .cart__help { | |
| width: 0.75em; | |
| height: 0.75em; | |
| margin-right: 10px | |
| } | |
| .cart__smart-reload-tooltip { | |
| width: 300px; | |
| background-color: #535353; | |
| color: #fff; | |
| padding: 15px; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| line-height: 120% | |
| } | |
| .cart .order-summary { | |
| padding: 0px | |
| } | |
| .hosted-field { | |
| height: 35px; | |
| box-sizing: border-box; | |
| width: 100%; | |
| padding: 10px; | |
| display: inline-block; | |
| font-size: 14px; | |
| border: 1px solid #cdcdcd; | |
| line-height: 20px | |
| } | |
| .braintree-hosted-fields-invalid { | |
| border-color: #ff5a5f | |
| } | |
| .braintree-hosted-fields-valid { | |
| border-color: #2ECE6A | |
| } | |
| .add-credit-card__form--busy { | |
| display: none | |
| } | |
| .order-summary { | |
| background-color: transparent | |
| } | |
| .show-payment-method__change { | |
| width: 100%; | |
| max-width: 140px; | |
| margin-top: 10px | |
| } | |
| .list-payment-methods__cancel { | |
| width: 100px | |
| } | |
| .list-payment-methods__add { | |
| width: 230px | |
| } | |
| @media (min-width: 1368px) { | |
| .section-hero__logo { | |
| padding-top: 65px | |
| } | |
| .section-hero--onboarding .section-hero__intro { | |
| margin-top: 25vh | |
| } | |
| .section-hero__download { | |
| bottom: 80px | |
| } | |
| } | |
| @media (min-width: 651px) and (max-width: 900px) and (max-width: 769px) { | |
| .checkout__container { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column | |
| } | |
| .checkout__user-info { | |
| -ms-flex-order: 2; | |
| order: 2 | |
| } | |
| } | |
| @media (min-width: 651px) and (max-width: 900px) { | |
| .section-hero { | |
| background-position: center bottom | |
| } | |
| .section-hero--delicious-lunch-colleagues-v12 { | |
| background-size: 1550px | |
| } | |
| .section-hero--delicious-lunch-colleagues-v13 { | |
| background-size: 1120px | |
| } | |
| .section__testimonials__content { | |
| height: auto | |
| } | |
| .section__testimonials__page { | |
| display: block; | |
| padding-left: 20px; | |
| padding-right: 20px | |
| } | |
| .section__testimonials__title { | |
| margin-bottom: 20px | |
| } | |
| .section__testimonials .slider-list { | |
| min-height: 550px !important | |
| } | |
| .section__testimonials-item__footer { | |
| padding-top: 10px | |
| } | |
| .prime-payment-confirm { | |
| width: 75% | |
| } | |
| .prime-benefit { | |
| padding-left: 20px; | |
| padding-right: 20px | |
| } | |
| .prime-benefit__descriptions { | |
| min-height: 150px | |
| } | |
| } | |
| @media (min-width: 651px) and (max-width: 900px) and (orientation: landscape) { | |
| .section-hero { | |
| height: auto | |
| } | |
| .section-hero__logo-text { | |
| width: 120px | |
| } | |
| .section-hero__logo { | |
| padding-top: 20px | |
| } | |
| .section-hero__intro { | |
| margin-top: 40px | |
| } | |
| .section-hero__intro-text { | |
| font-size: 40px | |
| } | |
| .section-hero__subtitle, .section-hero__mobile-subtitle { | |
| font-size: 18px | |
| } | |
| .section-hero__download { | |
| margin-top: 30px; | |
| margin-bottom: 30px; | |
| position: static | |
| } | |
| } | |
| @media (min-width: 300px) and (max-width: 650px) { | |
| .button { | |
| min-height: 32px; | |
| font-size: 13px | |
| } | |
| .button--bigger-on-mobile { | |
| padding-top: 16px; | |
| padding-bottom: 16px; | |
| height: auto; | |
| font-weight: bold | |
| } | |
| .footer { | |
| padding: 10px; | |
| padding-bottom: 5px; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center | |
| } | |
| .footer__left { | |
| -ms-flex: 1; | |
| flex: 1 | |
| } | |
| .footer__dahmakan { | |
| width: 100px | |
| } | |
| .footer__leaf { | |
| width: 5px | |
| } | |
| .footer__social { | |
| width: 30px; | |
| height: 30px | |
| } | |
| .header { | |
| height: 40px | |
| } | |
| .header__logo { | |
| margin-top: 10px | |
| } | |
| .header__dahmakan { | |
| width: 120px | |
| } | |
| .prime-header { | |
| background-color: #fff; | |
| border-bottom: 2px solid #e7e7e7; | |
| box-shadow: 0px 0px 3px #8B898D; | |
| padding-bottom: 10px | |
| } | |
| .prime-header__prime-logo { | |
| width: 80px | |
| } | |
| .prime-header__back-icon, .prime-header__next-icon { | |
| top: -2px; | |
| width: 1.5em; | |
| height: 1.5em | |
| } | |
| .prime-header__back-text, .prime-header__next-text { | |
| display: none | |
| } | |
| .prime-header__next { | |
| right: 15px | |
| } | |
| .banner { | |
| margin-bottom: 0px | |
| } | |
| .modal__content { | |
| transform: translate(-50%, -50%) | |
| } | |
| .landing { | |
| overflow-x: hidden | |
| } | |
| .landing__title { | |
| font-size: 20px; | |
| padding-top: 42px; | |
| font-family: SofiaProLight | |
| } | |
| .landing__text-primary { | |
| font-size: 28px; | |
| line-height: 34px; | |
| width: 220px; | |
| margin: 0 auto | |
| } | |
| .landing__section-title { | |
| font-size: 21px; | |
| line-height: 26px | |
| } | |
| .landing__paragraph { | |
| font-size: 15px | |
| } | |
| .checkout__container { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column | |
| } | |
| .checkout__user-info { | |
| -ms-flex-order: 2; | |
| order: 2 | |
| } | |
| .checkout .prime-header { | |
| background-color: #fff | |
| } | |
| .prime__section { | |
| width: 100%; | |
| padding-top: 30px; | |
| padding-bottom: 30px | |
| } | |
| .prime__section-hero { | |
| background-position: 75% | |
| } | |
| .prime__section-title { | |
| font-size: 1.5em; | |
| line-height: 120%; | |
| padding-left: 16px; | |
| padding-right: 16px | |
| } | |
| .prime__section-faq { | |
| padding-top: 32px; | |
| padding-bottom: 16px | |
| } | |
| .prime__benefit-wrapper { | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| margin: 10px auto; | |
| padding: 0px; | |
| display: block; | |
| width: 100%; | |
| padding: 0px 24px | |
| } | |
| .prime__section-savings { | |
| background-color: #fff | |
| } | |
| .prime__section-savings-wrapper { | |
| margin-top: 0px; | |
| margin-bottom: 0px | |
| } | |
| .prime__faq-item-wrapper { | |
| width: 100%; | |
| display: block | |
| } | |
| .login .prime-header { | |
| background-color: #fff | |
| } | |
| .download-app { | |
| max-width: 140px; | |
| border: 1px solid #fff; | |
| border-radius: 8px | |
| } | |
| .download-app--small { | |
| max-width: 140px | |
| } | |
| .download-app--black { | |
| border: none | |
| } | |
| .food-type { | |
| width: 150px; | |
| margin-bottom: 30px | |
| } | |
| .food-type__image { | |
| width: 120px; | |
| height: 120px | |
| } | |
| .food-type__caption { | |
| font-size: 13px; | |
| font-weight: bold | |
| } | |
| .food-type__logo-container { | |
| margin-top: 0px; | |
| margin-bottom: 0px | |
| } | |
| .food-type__dahmakan-logo { | |
| transform: scale(0.7) | |
| } | |
| .section-hero { | |
| height: 652px; | |
| background-position: 46.5% center | |
| } | |
| .section-hero--with-video { | |
| height: 100vh; | |
| width: 100vw | |
| } | |
| .section-hero__video { | |
| margin-left: -90%; | |
| height: 100%; | |
| width: auto | |
| } | |
| .section-hero__intro { | |
| margin-top: 95px; | |
| line-height: 260% | |
| } | |
| .section-hero__intro-text { | |
| font-size: 36px; | |
| text-align: center | |
| } | |
| .section-hero__btn { | |
| width: 250px; | |
| height: 35px; | |
| font-size: 18px | |
| } | |
| .section-hero__hero-overlay { | |
| background: rgba(0, 0, 0, 0.25) | |
| } | |
| .section-hero__download { | |
| bottom: 80px | |
| } | |
| .section-hero__download-ios { | |
| margin-right: 8px | |
| } | |
| .section-hero__logo-text { | |
| width: 120px | |
| } | |
| .section-hero__mobile-subtitle { | |
| line-height: 130%; | |
| font-size: 18px | |
| } | |
| .section-hero__scroll-indicator-wrap { | |
| display: none | |
| } | |
| .section-hero--delicious-lunch-colleagues-v12 { | |
| background-position: center bottom; | |
| background-size: 1700px | |
| } | |
| .section-hero--delicious-dinner-friends-v12 { | |
| background-position-x: 70% | |
| } | |
| .section-hero--delicious-dinner-friends-v12 .landing__hero__intro { | |
| margin-top: 145px | |
| } | |
| .section-hero--delicious-dinner-at-home-v11 .landing__hero__intro-text { | |
| font-size: 8vw; | |
| line-height: 115% | |
| } | |
| .section-hero--delicious-dinner-at-home-v12 { | |
| background-position-x: 30% | |
| } | |
| .section-hero--delicious-packages-v11 { | |
| background-position-x: 50% | |
| } | |
| .section-dishes { | |
| padding-top: 50px; | |
| padding-bottom: 30px | |
| } | |
| .section-dishes__title { | |
| width: 360px | |
| } | |
| .section-dishes__food-list { | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| padding-top: 45px | |
| } | |
| .section-app { | |
| display: block | |
| } | |
| .section-app__title { | |
| margin-bottom: 8px | |
| } | |
| .section-app__content { | |
| padding-top: 75px; | |
| padding-left: 0px; | |
| padding-bottom: 50px; | |
| max-width: 100% | |
| } | |
| .section-app__phone { | |
| height: 330px; | |
| margin-bottom: 10px | |
| } | |
| .section-delivered { | |
| height: 650px; | |
| background-image: url("/images/static/blue-mobile.jpg"); | |
| display: -ms-flexbox; | |
| display: flex; | |
| background-position: center bottom; | |
| position: relative | |
| } | |
| .section-delivered__btn { | |
| width: 160px | |
| } | |
| .section-delivered__paragraph { | |
| max-width: 100% | |
| } | |
| .section-delivered__wrapper { | |
| margin-bottom: 75vw; | |
| transform: translateY(20px) | |
| } | |
| .section-corporate { | |
| background-size: 1080px; | |
| background-position: center bottom; | |
| padding: 35px 0px 95px 0px; | |
| height: 385px | |
| } | |
| .section-corporate__content { | |
| margin-top: 5% | |
| } | |
| .section-corporate__title { | |
| width: 70% | |
| } | |
| .section-corporate__paragraph { | |
| font-size: 15px; | |
| line-height: 120%; | |
| max-width: 380px | |
| } | |
| .section-corporate__btn { | |
| width: 160px; | |
| margin-top: 0px | |
| } | |
| .section-footer { | |
| padding-top: 95px | |
| } | |
| .section-footer__title { | |
| width: 290px | |
| } | |
| .section-footer__paragraph { | |
| font-size: 15px; | |
| width: 240px | |
| } | |
| .section-footer__background { | |
| height: 260px | |
| } | |
| .section__testimonials { | |
| padding-top: 50px; | |
| padding-bottom: 50px | |
| } | |
| .section__testimonials__title { | |
| font-family: SofiaPro; | |
| font-size: 35px; | |
| width: 70%; | |
| margin: 0 auto | |
| } | |
| .section__testimonials__content { | |
| height: auto | |
| } | |
| .section__testimonials__page { | |
| display: block; | |
| padding-left: 20px; | |
| padding-right: 20px | |
| } | |
| .section__testimonials__nav-btn--next { | |
| margin-right: -10px | |
| } | |
| .section__testimonials__nav-btn--prev { | |
| margin-left: -10px | |
| } | |
| .section__testimonials .slider-list { | |
| min-height: 95vh !important | |
| } | |
| .section__testimonials-item__footer { | |
| padding-top: 10px | |
| } | |
| .section__badges { | |
| padding: 70px 70px | |
| } | |
| .section__badges__title { | |
| font-size: 32px; | |
| font-family: SofiaPro; | |
| margin-bottom: 30px | |
| } | |
| .section__badges__content { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| margin: 0 auto | |
| } | |
| .section__badges__text { | |
| margin-top: 10px; | |
| margin-bottom: 30px | |
| } | |
| .prime-payment-confirm { | |
| width: 100%; | |
| min-width: auto; | |
| background-color: transparent; | |
| margin-top: -20px | |
| } | |
| .prime-payment-confirm__details { | |
| padding: 16px; | |
| padding-top: 32px | |
| } | |
| .prime-payment-confirm__order-number { | |
| font-size: 120%; | |
| margin-top: 10px | |
| } | |
| .prime-payment-confirm__item-description td { | |
| padding-top: 5px; | |
| padding-bottom: 5px | |
| } | |
| .prime-payment-confirm__smart-reload { | |
| margin: 0px; | |
| margin-bottom: 20px; | |
| background-color: #e2e2e2 | |
| } | |
| .prime-payment-confirm__payment-method { | |
| margin-top: 14px | |
| } | |
| .prime-payment-confirm__start-ordering { | |
| padding-top: 16px; | |
| padding-bottom: 16px; | |
| height: auto; | |
| font-weight: bold | |
| } | |
| .prime-payment-confirm__apps { | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .prime-payment-confirm__app-button { | |
| width: 100% | |
| } | |
| .discount-code-form { | |
| margin-bottom: 14px; | |
| padding-bottom: 14px | |
| } | |
| .discount-code-form__label { | |
| font-weight: bold; | |
| margin-bottom: 8px | |
| } | |
| .cart { | |
| margin-bottom: 14px; | |
| margin-top: 14px | |
| } | |
| .cart__smart-reload-desc { | |
| margin-bottom: 0px | |
| } | |
| .cart--empty { | |
| padding: 0px; | |
| background-color: transparent; | |
| width: 100% | |
| } | |
| .user-info { | |
| margin-bottom: 14px | |
| } | |
| .payment { | |
| margin-bottom: 0px | |
| } | |
| .order-summary { | |
| margin-bottom: 14px; | |
| padding-top: 15px; | |
| padding-bottom: 5px | |
| } | |
| .show-payment-method__change { | |
| margin-top: 10px; | |
| width: 140px | |
| } | |
| .place-order-button { | |
| width: calc(100% - 32px); | |
| padding-top: 16px; | |
| padding-bottom: 16px; | |
| height: auto; | |
| font-weight: bold | |
| } | |
| .payment-method-picker__card { | |
| height: 70px | |
| } | |
| .add-payment-method__list { | |
| margin-top: 20px | |
| } | |
| .add-payment-method__button { | |
| width: 100%; | |
| height: 40px | |
| } | |
| .add-payment-method__button-text { | |
| width: 100%; | |
| color: #8B898D; | |
| font-size: 115% | |
| } | |
| .add-credit-card__form { | |
| margin-top: 10px | |
| } | |
| .molpay-warning { | |
| padding: 20px; | |
| width: 90vw | |
| } | |
| .molpay-warning__content { | |
| line-height: 120% | |
| } | |
| .auth-panel { | |
| margin: 0px; | |
| padding: 0px; | |
| width: 100%; | |
| margin-top: 0px; | |
| border: none | |
| } | |
| .auth-panel__notice-board { | |
| background-color: #efefef; | |
| font-size: 0.75em; | |
| color: #8B898D | |
| } | |
| .auth-panel__tab-strip { | |
| padding-top: 24px | |
| } | |
| .auth-panel__tab-header { | |
| height: 50px | |
| } | |
| .auth-panel__errors { | |
| padding-top: 20px; | |
| font-size: 0.75em; | |
| padding-bottom: 20px | |
| } | |
| .auth-panel__login, .auth-panel__register { | |
| padding: 16px; | |
| margin: 0px; | |
| width: 100%; | |
| padding-bottom: 16px | |
| } | |
| .auth-panel__login .input, .auth-panel__register .input { | |
| height: 40px; | |
| margin-bottom: 8px | |
| } | |
| .prime-benefit { | |
| max-width: 100%; | |
| width: 100%; | |
| margin-bottom: 24px; | |
| padding: 20px | |
| } | |
| .prime-benefit__descriptions { | |
| margin-bottom: 24px; | |
| min-height: auto | |
| } | |
| .prime-benefit__button { | |
| width: 100% | |
| } | |
| .prime-footer__container { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column | |
| } | |
| .prime-footer__apps { | |
| display: inline-block; | |
| width: 100%; | |
| float: none; | |
| text-align: center; | |
| -ms-flex-order: 2; | |
| order: 2; | |
| margin-top: 10px; | |
| margin-bottom: 10px | |
| } | |
| .prime-footer__logo-wrapper { | |
| position: static; | |
| left: 0px; | |
| transform: none; | |
| -ms-flex-order: 1; | |
| order: 1 | |
| } | |
| .prime-footer__socials { | |
| float: none; | |
| display: inline-block; | |
| width: 100%; | |
| text-align: center; | |
| -ms-flex-order: 3; | |
| order: 3 | |
| } | |
| } | |
| @media (min-width: 300px) and (max-width: 650px) and (orientation: landscape) { | |
| .section-hero { | |
| height: auto | |
| } | |
| .section-hero__logo-text { | |
| width: 120px | |
| } | |
| .section-hero__logo { | |
| padding-top: 20px | |
| } | |
| .section-hero__intro { | |
| margin-top: 40px | |
| } | |
| .section-hero__intro-text { | |
| font-size: 40px | |
| } | |
| .section-hero__subtitle, .section-hero__mobile-subtitle { | |
| font-size: 18px | |
| } | |
| .section-hero__download { | |
| margin-top: 30px; | |
| margin-bottom: 30px; | |
| position: static | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment