Skip to content

Instantly share code, notes, and snippets.

@hoanglamhuynh
Created January 28, 2017 09:29
Show Gist options
  • Save hoanglamhuynh/ac9844bf8665cf20654c37c73239aa12 to your computer and use it in GitHub Desktop.
Save hoanglamhuynh/ac9844bf8665cf20654c37c73239aa12 to your computer and use it in GitHub Desktop.
@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