2763 lines
48 KiB
CSS
2763 lines
48 KiB
CSS
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;
|
||
}
|
||
body {
|
||
line-height: 1;
|
||
font-size: 10px;
|
||
color: #312f38;
|
||
-webkit-transition: font-size 0.2s;
|
||
-moz-transition: font-size 0.2s;
|
||
-ms-transition: font-size 0.2s;
|
||
-o-transition: font-size 0.2s;
|
||
transition: font-size 0.2s;
|
||
letter-spacing: .03em;
|
||
}
|
||
body, input, textarea, button {
|
||
font-family: "Open Sans", "Droid Sans", "Helvetica", "Arial", sans-serif;
|
||
}
|
||
body, .bg {
|
||
background: #fffef8;
|
||
}
|
||
ol, ul {
|
||
list-style: none;
|
||
}
|
||
b {
|
||
font-weight: bold;
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
a {
|
||
color: #d74924;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
input[type="text"], input[type="tel"], input[type="password"], textarea, select {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
::selection {
|
||
background: rgba(47,154,211,.5);
|
||
color: #fff;
|
||
text-shadow: none;
|
||
}
|
||
::-moz-selection {
|
||
background: rgba(47,154,211,.5);
|
||
color: #fff;
|
||
text-shadow: none;
|
||
}
|
||
|
||
|
||
input[type="submit"]:focus, input[type="button"]:focus, input[type="text"]:focus, button, :focus {
|
||
outline : none;
|
||
}
|
||
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, button::-moz-focus-inner {
|
||
border : 0;
|
||
}
|
||
|
||
html {
|
||
-webkit-text-size-adjust: none;
|
||
-moz-text-size-adjust: none;
|
||
-ms-text-size-adjust: none;
|
||
-o-text-size-adjust: none;
|
||
text-size-adjust: none;
|
||
}
|
||
|
||
* {
|
||
-webkit-tap-highlight-color: rgba(205,69,29,.5);
|
||
}
|
||
|
||
|
||
|
||
.content, .footer .content-padding {
|
||
max-width: 767px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@media screen and (min-width: 769px) {
|
||
.content-padding {
|
||
padding: 10px 0 10px 0;
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.content-padding {
|
||
padding: 10px;
|
||
}
|
||
*:not(input):not(textarea) {
|
||
-webkit-touch-callout: none;
|
||
-webkit-user-select: none;
|
||
-khtml-user-select: none;
|
||
-moz-user-select: -moz-none;
|
||
-ms-user-select: none;
|
||
-o-user-select: none;
|
||
user-select: none;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.logo {
|
||
background: url(../images/micro/crunchbutton-logo.svg) no-repeat;
|
||
width: 254px;
|
||
height: 50px;
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.menu {
|
||
background: url(../images/micro/menu.svg) center center no-repeat;
|
||
background-size: 100%;
|
||
width: 44px;
|
||
height: 28px;
|
||
float: left;
|
||
margin: 8px 0 0 10px;
|
||
cursor: pointer;
|
||
-webkit-transform:translate3d(0,0,0);
|
||
-webkit-transition: opacity 0.2s;
|
||
-moz-transition: opacity 0.2s;
|
||
-ms-transition: opacity 0.2s;
|
||
-o-transition: opacity 0.2s;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.menu:active {
|
||
opacity: .4;
|
||
}
|
||
|
||
.nav-back {
|
||
position:absolute;
|
||
z-index : 0;
|
||
cursor: pointer;
|
||
margin: 8px 0 0 6px;
|
||
background: url(../images/micro/back.svg) center center no-repeat;
|
||
background-size: 100%;
|
||
width: 50px;
|
||
height: 28px;
|
||
float: left;
|
||
|
||
-webkit-transform:translate3d(0,0,0);
|
||
-webkit-transition: opacity 0.2s;
|
||
-moz-transition: opacity 0.2s;
|
||
-ms-transition: opacity 0.2s;
|
||
-o-transition: opacity 0.2s;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.nav-back:active {
|
||
opacity: .4;
|
||
}
|
||
|
||
::-webkit-input-placeholder {
|
||
color: #858585;
|
||
}
|
||
:-moz-placeholder {
|
||
color: #858585;
|
||
}
|
||
::-moz-placeholder {
|
||
color: #858585;
|
||
}
|
||
:-ms-input-placeholder {
|
||
color: #858585;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* home location header */
|
||
.home-location {
|
||
width: 100%;
|
||
}
|
||
.home-location td {
|
||
vertical-align: top;
|
||
}
|
||
.location-address {
|
||
border: 2px solid #003f35;
|
||
border-right: 0;
|
||
border-top-left-radius: 6px;
|
||
border-bottom-left-radius: 6px;
|
||
font-size: 15px;
|
||
padding: .5em 0 .5em .6em;
|
||
margin: 0 0 15px 0;
|
||
height: 40px;
|
||
width: 103%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.location-detect {
|
||
background: #00bd9e;
|
||
border-radius: 0;
|
||
border-top-right-radius:6px;
|
||
border-bottom-right-radius:6px;
|
||
border: 2px solid #003f35;
|
||
font-size: 22px;
|
||
color: #fff;
|
||
margin: 0 0 15px 0;
|
||
width: 40px;
|
||
height: 40px;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
|
||
-webkit-transition: all linear 0.08s;
|
||
-moz-transition: all linear 0.08s;
|
||
-ms-transition: all linear 0.08s;
|
||
-o-transition: all linear 0.08s;
|
||
transition: all linear 0.08s;
|
||
}
|
||
/* wierd issue with height only on mobile safari */
|
||
@media screen and (max-device-width: 480px) {
|
||
.location-detect {
|
||
height: 38px;
|
||
}
|
||
}
|
||
|
||
.location-detect:active {
|
||
background: #00a88c;
|
||
color: #e1f1ee;
|
||
}
|
||
.home-top {
|
||
background: #90562f url(../images/micro/bg-sandwich.jpg);
|
||
background-position: top right;
|
||
background-size: cover;
|
||
padding: 0 0 60px 0;
|
||
}
|
||
.home-inputs h4 {
|
||
color: #fff;
|
||
text-transform: uppercase;
|
||
margin-bottom: .5em;
|
||
}
|
||
.home-inputs {
|
||
width: 30em;
|
||
margin: 0 auto;
|
||
margin-bottom: 5em;
|
||
margin-top: 4em;
|
||
}
|
||
.logo-finger {
|
||
background: url(../images/micro/logo-finger.svg) center center no-repeat;
|
||
background-size: 100%;
|
||
width: 7.8em;
|
||
height: 8.8em;
|
||
margin: 0 auto;
|
||
padding-top: 100px;
|
||
}
|
||
.logo-finger-blue {
|
||
background: url(../images/micro/logo-finger-blue.svg) center center no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
.pushabutton {
|
||
background: url(../images/micro/push-a-button.svg) no-repeat;
|
||
background-position: center center;
|
||
width: 16em;
|
||
height: 16em;
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
padding-top: 50px;
|
||
-webkit-transition: all 0.2s;
|
||
}
|
||
@media (min-width: 321px) and (max-height: 350px) {
|
||
.pushabutton {
|
||
display: none;
|
||
}
|
||
}
|
||
@media (max-height: 390px) {
|
||
.pushabutton {
|
||
background-size: 100%;
|
||
height: 12.5em;
|
||
width: 12.5em;
|
||
}
|
||
}
|
||
|
||
|
||
.divider-circle {
|
||
background: url(../images/micro/fork-knife-orange.svg) center center no-repeat;
|
||
width: 6.5em;
|
||
height: 6.5em;
|
||
background-size: 100%;
|
||
margin-top: -3.2em;
|
||
margin-left:-3.2em;
|
||
left: 50%;
|
||
position: absolute;
|
||
}
|
||
h4 {
|
||
font-weight: bold;
|
||
font-size: 1.3em;
|
||
line-height: 1.9em;
|
||
}
|
||
p {
|
||
font-size: 1.2em;
|
||
line-height: 1.6em;
|
||
}
|
||
.home-join-us {
|
||
background: url(../images/micro/home-join-us.svg) no-repeat;
|
||
width: 25em;
|
||
height: 20em;
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
|
||
/* MAPS */
|
||
.map-venice {
|
||
background: url(../images/micro/map-venice.svg) no-repeat;
|
||
width: 5.6em;
|
||
height: 7.4em;
|
||
}
|
||
.map-new-haven {
|
||
background: url(../images/micro/map-new-haven.svg) no-repeat;
|
||
width: 7.2em;
|
||
height: 6.9em;
|
||
}
|
||
.map-providence {
|
||
background: url(../images/micro/map-providence.svg) no-repeat;
|
||
width: 6.0em;
|
||
height: 7.4em;
|
||
}
|
||
.map-dc {
|
||
background: url(../images/micro/map-dc.svg) no-repeat;
|
||
width: 5.7em;
|
||
height: 6.8em;
|
||
}
|
||
.popular-locations .map {
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
display: table-cell;
|
||
|
||
}
|
||
.popular-locations {
|
||
font-size: 1.15em;
|
||
width: 25em;
|
||
margin: 0 auto;
|
||
display: table;
|
||
border-spacing:.8em;
|
||
}
|
||
|
||
|
||
|
||
/* BUTTONS */
|
||
.button {
|
||
border: 0;
|
||
padding: .5em 0 .5em 0;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
text-transform: uppercase;
|
||
font-size: 1.3em;
|
||
width: 100%;
|
||
|
||
-webkit-transition: background linear 0.08s;
|
||
-moz-transition: background linear 0.08s;
|
||
-ms-transition: background linear 0.08s;
|
||
-o-transition: background linear 0.08s;
|
||
transition: background linear 0.08s;
|
||
}
|
||
.button.ani-all {
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
|
||
-webkit-transition: all linear 0.08s;
|
||
-moz-transition: all linear 0.08s;
|
||
-ms-transition: all linear 0.08s;
|
||
-o-transition: all linear 0.08s;
|
||
transition: all linear 0.08s;
|
||
}
|
||
|
||
/* colors */
|
||
.button.orange {
|
||
background: #df4a32;
|
||
}
|
||
.button.lightorange {
|
||
background: #fe9872;
|
||
font-weight: bold;
|
||
}
|
||
.button.facebook {
|
||
background: #385ca2;
|
||
font-weight: bold;
|
||
}
|
||
.button.green {
|
||
background: #00bea0;
|
||
font-weight: bold;
|
||
}
|
||
.button.find-restaurants {
|
||
font-size: 1.9em;
|
||
max-width: 30em;
|
||
padding: .9em 0 .9em 0;
|
||
border-radius: 6px;
|
||
letter-spacing: 0;
|
||
}
|
||
.button.get-food {
|
||
display: block;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
width: 300px;
|
||
margin: 0 auto;
|
||
padding: .39em 0 .39em 0;
|
||
letter-spacing:1px;
|
||
margin-top: 7px;
|
||
background: #e24538;
|
||
box-shadow: 0 3px 0 #980c08;
|
||
}
|
||
.button.download {
|
||
font-size: 1.9em;
|
||
margin: 0 auto;
|
||
padding: .8em 0 .8em 0;
|
||
background: #e53f3c;
|
||
box-shadow: 0 3px 0 #9a000d;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* active colors */
|
||
.button.orange:active {
|
||
background: #ce412a;
|
||
}
|
||
.button.download:active {
|
||
background: #d13b39;
|
||
}
|
||
.button.lightorange:active {
|
||
background: #e78d62;
|
||
}
|
||
.button.green:active {
|
||
background: #00b195;
|
||
}
|
||
.button.facebook:active {
|
||
background: #2f4f8d;
|
||
}
|
||
|
||
/* pushable border colors */
|
||
.button-pushable .button.orange {
|
||
box-shadow: 0 3px 0 #961500;
|
||
}
|
||
.button-pushable .button.lightorange {
|
||
box-shadow: 0 2px 0 #de7e5b;
|
||
}
|
||
.button-pushable .button.green {
|
||
box-shadow: 0 2px 0 #00927b;
|
||
}
|
||
.button-pushable .button.facebook {
|
||
box-shadow: 0 2px 0 #203d74;
|
||
}
|
||
|
||
/* pushable states */
|
||
.button-pushable {
|
||
margin-top: 0;
|
||
margin-bottom: 3px;
|
||
height: 4em;
|
||
}
|
||
.button-pushable .button:active {
|
||
box-shadow: none;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* pushable margins */
|
||
.button-pushable .button.get-food:active{
|
||
margin-top: 10px;
|
||
}
|
||
.button-pushable .button.find-restaurants:active {
|
||
margin-top: 5px;
|
||
}
|
||
.button-pushable.find-restaurants {
|
||
height: 6em;
|
||
}
|
||
.button-pushable .button.download:active {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* nav */
|
||
.nav-cart .fa {
|
||
margin-left: -4px;
|
||
}
|
||
|
||
.nav-cart:active {
|
||
opacity: .4;
|
||
}
|
||
|
||
.nav-cart {
|
||
background-color: #f56b3b;
|
||
height:28px;
|
||
width: 44px;
|
||
padding: 0;
|
||
z-index : 0;
|
||
border-radius: 5px;
|
||
font-size : 23px;
|
||
display : block;
|
||
text-align:center;
|
||
color:#fff;
|
||
line-height : 28px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
float: right;
|
||
margin: 8px 10px 0 0;
|
||
|
||
-webkit-transition: all opacity 0.2s;
|
||
-moz-transition: all opacity 0.2s;
|
||
-ms-transition: all opacity 0.2s;
|
||
-o-transition: all opacity 0.2s;
|
||
transition: all opacity 0.2s;
|
||
}
|
||
|
||
.nav-cart-count {
|
||
font-size: 10px;
|
||
border-radius: 8px;
|
||
background: #ef3b24;
|
||
display: block;
|
||
cursor: pointer;
|
||
width: 14px;
|
||
height: 14px;
|
||
line-height: 1.3em;
|
||
margin: -30px 0 0 25px;
|
||
position: absolute;
|
||
}
|
||
|
||
|
||
|
||
/* GLOBAL */
|
||
@media(min-width:769px) {
|
||
.menu.drop {
|
||
display: block;
|
||
}
|
||
.menu.side {
|
||
display: none;
|
||
}
|
||
}
|
||
@media(max-width: 768px) {
|
||
.menu.drop {
|
||
display: none;
|
||
}
|
||
.menu.side {
|
||
display: block;
|
||
}
|
||
}
|
||
@media(min-width:500px) {
|
||
body {
|
||
font-size: 12px;
|
||
}
|
||
.top-pad {
|
||
height: 90px;
|
||
}
|
||
.restaurant-pad {
|
||
height: 66px;
|
||
}
|
||
.restaurant-pic {
|
||
height: 10em;
|
||
}
|
||
}
|
||
@media(max-width:499px) {
|
||
.logo {
|
||
width: 170px;
|
||
height: 35px;
|
||
}
|
||
.menu {
|
||
margin: 3px 0 0 10px;
|
||
}
|
||
.nav-back {
|
||
margin: 3px 0 0 6px;
|
||
}
|
||
.nav-cart {
|
||
margin: 3px 10px 0 0;
|
||
}
|
||
.top-pad {
|
||
height: 65px;
|
||
}
|
||
.restaurant-pad {
|
||
height: 51px;
|
||
}
|
||
.restaurant-pic {
|
||
height: 12em;
|
||
}
|
||
}
|
||
.divider {
|
||
clear: both;
|
||
}
|
||
.divider.dots {
|
||
border-top: 1px solid #eeede7;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* DROPDOWNS */
|
||
.dropdown {
|
||
position: absolute;
|
||
z-index: 9999999;
|
||
font-size: 1em;
|
||
margin-top: 45px;
|
||
margin-left: 15px;
|
||
}
|
||
.dropdown .dropdown-menu{
|
||
min-width: 160px;
|
||
max-width: 360px;
|
||
list-style: none;
|
||
background: #FFF;
|
||
border: solid 1px #DDD;
|
||
border: solid 1px rgba(0, 0, 0, .2);
|
||
border-radius: 6px;
|
||
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||
overflow: visible;
|
||
padding: 4px 0;
|
||
margin: 0;
|
||
}
|
||
.dropdown.dropdown-tip:before {
|
||
position: absolute;
|
||
top: -6px;
|
||
left: 9px;
|
||
content: '';
|
||
border-left: 7px solid transparent;
|
||
border-right: 7px solid transparent;
|
||
border-bottom: 7px solid #CCC;
|
||
/* border-bottom-color: rgba(0, 0, 0, 0.2);*/
|
||
display: inline-block;
|
||
}
|
||
|
||
.dropdown.dropdown-tip:after {
|
||
position: absolute;
|
||
top: -5px;
|
||
left: 10px;
|
||
content: '';
|
||
border-left: 6px solid transparent;
|
||
border-right: 6px solid transparent;
|
||
border-bottom: 6px solid #FFF;
|
||
display: inline-block;
|
||
}
|
||
|
||
.dropdown .dropdown-menu LI {
|
||
list-style: none;
|
||
padding: 0 0;
|
||
margin: 0;
|
||
line-height: 18px;
|
||
}
|
||
.dropdown .dropdown-menu LI > A {
|
||
display: block;
|
||
color: #555;
|
||
text-decoration: none;
|
||
line-height: 18px;
|
||
padding: 3px 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dropdown .dropdown-menu LI > A:hover {
|
||
background-color: #08C;
|
||
color: #FFF;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.dropdown .dropdown-menu .dropdown-divider {
|
||
font-size: 1px;
|
||
border-top: solid 1px #E5E5E5;
|
||
padding: 0;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.dropdown .fa {
|
||
width: 12px;
|
||
text-align: center;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
|
||
/* FAQ */
|
||
.faq-tomato {
|
||
background: url(../images/micro/faq-tomato.svg) no-repeat;
|
||
width: 7.1em;
|
||
height: 11.8em;
|
||
background-size: 100%;
|
||
float: left;
|
||
margin-left: 4em;
|
||
}
|
||
.bubble-tailless {
|
||
width: 14.6em;
|
||
height: 5.7em;
|
||
background-size: 100% !important;
|
||
float: left;
|
||
margin-top: 2em;
|
||
}
|
||
.bubble-tailless-green {
|
||
background: url(../images/micro/bubble-tailless-green.svg) no-repeat;
|
||
}
|
||
.bubble-tailless-beige {
|
||
background: url(../images/micro/bubble-tailless-beige.svg) no-repeat;
|
||
}
|
||
.bubble-tailless .text {
|
||
display: block;
|
||
margin-left: 1.3em;
|
||
color: #fff;
|
||
font-size: 1.2em;
|
||
line-height: 1.4em;
|
||
padding-top: .9em;
|
||
}
|
||
.faq-bubble-wrap {
|
||
width: 26em;
|
||
margin: 0 auto;
|
||
}
|
||
.faq-sun {
|
||
background: url(../images/micro/faq-sun.svg) no-repeat;
|
||
width: 26.4em;
|
||
height: 10.6em;
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
.faq-heart {
|
||
color: #ff6b82;
|
||
font-size: 8.5em;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* SNAPS */
|
||
@media(min-width:769px) {
|
||
.snap-drawers {
|
||
display:none;
|
||
}
|
||
}
|
||
|
||
@media(max-width:768px) {
|
||
.dropdown {
|
||
display: none !important;
|
||
}
|
||
body {
|
||
overflow: hidden;
|
||
}
|
||
.footer {
|
||
display: none;
|
||
}
|
||
.snap-content-inner {
|
||
position:absolute;
|
||
top:0;
|
||
right:0;
|
||
bottom:0;
|
||
left:0;
|
||
width:auto;
|
||
height:auto;
|
||
z-index:3;
|
||
overflow:auto;
|
||
overflow-x:hidden;
|
||
-webkit-overflow-scrolling: touch;
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
}
|
||
.snap-content {
|
||
position:absolute;
|
||
top:0;
|
||
right:0;
|
||
bottom:0;
|
||
left:0;
|
||
width:auto;
|
||
height:auto;
|
||
z-index:2;
|
||
overflow: hidden;
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
}
|
||
.snap-drawer {
|
||
position:absolute;
|
||
top:0;
|
||
right:auto;
|
||
bottom:0;
|
||
left:auto;
|
||
width:265px;
|
||
height:auto;
|
||
overflow:auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
-webkit-transition: width 0.3s ease;
|
||
-moz-transition: width 0.3s ease;
|
||
-ms-transition: width 0.3s ease;
|
||
-o-transition: width 0.3s ease;
|
||
transition: width 0.3s ease;
|
||
|
||
}
|
||
.snap-drawers {
|
||
background:#3d3731;
|
||
color:#eee;
|
||
font-family:Helvetica,Arial,sans-serif;
|
||
position:absolute;
|
||
top:0;
|
||
right:0;
|
||
bottom:0;
|
||
left:0;
|
||
width:auto;
|
||
height:auto;
|
||
overflow:hidden;
|
||
}
|
||
.snap-drawer-left {
|
||
left:0;
|
||
z-index:1;
|
||
}
|
||
.snapjs-expand-left .snap-drawer-left {
|
||
width:100%;
|
||
}
|
||
.snap-drawer ul {
|
||
padding:0;
|
||
margin:0;
|
||
list-style-type:none;
|
||
}
|
||
.snap-drawer li:first-child {
|
||
border-top:1px solid rgba(0,0,0,0.1);
|
||
}
|
||
.snap-drawer li {
|
||
display:block;
|
||
border-bottom:1px solid rgba(0,0,0,0.1);
|
||
padding:8px 0 2px 0;
|
||
font-weight:bold;
|
||
text-decoration:none;
|
||
color:#fff;
|
||
text-indent:20px;
|
||
}
|
||
.snap-drawer p {
|
||
opacity:0.5;
|
||
padding:15px;
|
||
font-size:12px;
|
||
}
|
||
@-moz-document url-prefix() {
|
||
.snap-content {
|
||
transform:none;
|
||
}
|
||
}
|
||
.snap-drawer .fa {
|
||
font-size:25px;
|
||
}
|
||
.side-menu-wrap {
|
||
height: 28px;
|
||
}
|
||
.side-menu-wrap {
|
||
margin-left: -20px;
|
||
}
|
||
.side-menu-label {
|
||
margin-top: -10px;
|
||
vertical-align: top;
|
||
line-height: 1.6em;
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* static viewport. no fixed position nac header */
|
||
/*
|
||
.static-nav-viewport .navs {
|
||
width:auto;
|
||
top: auto;
|
||
left: auto;
|
||
right:auto;
|
||
position: relative;
|
||
background: #fff;
|
||
}
|
||
.static-nav-viewport .snap-content-inner {
|
||
margin-top: 51px;
|
||
}
|
||
.static-nav-viewport .snap-content-inner .content {
|
||
margin-top: -51px;
|
||
}
|
||
|
||
.page-splash .static-nav-viewport .snap-content-inner {
|
||
margin-top: 0;
|
||
}
|
||
*/
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.button-bottom-wrapper {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 102;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background: #2b2937;
|
||
height: 54px;
|
||
|
||
-webkit-transition:all 0.3s ease-out;
|
||
-moz-transition:all 0.3s ease-out;
|
||
-ms-transition:all 0.3s ease-out;
|
||
-o-transition:all 0.3s ease-out;
|
||
transition:all 0.3s ease-out;
|
||
|
||
-webkit-transform-origin: left bottom;
|
||
-moz-transform-origin: left bottom;
|
||
-moz-transform-origin: left bottom;
|
||
-ms-transform-origin: left bottom;
|
||
-o-transform-origin: left bottom;
|
||
transform-origin: left bottom;
|
||
|
||
-webkit-transform: translate3d(0,67px,0);
|
||
-moz-transform: translate3d(0,67px,0);
|
||
-ms-transform: translate3d(0,67px,0);
|
||
-o-transform: translate3d(0,67px,0);
|
||
transform: translate3d(0,67px,0);
|
||
}
|
||
|
||
.button-bottom-show {
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
}
|
||
|
||
|
||
.navs {
|
||
width:auto;
|
||
top:0;
|
||
left:0;
|
||
right:0;
|
||
position:fixed;
|
||
z-index:100;
|
||
}
|
||
.nav-top {
|
||
/*
|
||
background: #f97e5c;
|
||
background: rgba(241,126,92,.97);
|
||
*/
|
||
background: #f78155;
|
||
background: rgba(247, 125, 79,.97);
|
||
padding-top: 15px;
|
||
border-bottom: 1px solid rgba(233, 114, 69, .97);
|
||
}
|
||
|
||
|
||
|
||
|
||
.page-location .nav-top {
|
||
-webkit-transition: background 0.2s ease, border 0.2s ease;
|
||
-moz-transition: background 0.2s ease, border 0.2s ease;
|
||
-ms-transition: background 0.2s ease, border 0.2s ease;
|
||
-o-transition: background 0.2s ease, border 0.2s ease;
|
||
transition: background 0.2s ease, border 0.2s ease;
|
||
}
|
||
|
||
.page-location .nav-top.at-top {
|
||
background: none;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.page-location .nav-top.at-top .menu {
|
||
background: url(../images/micro/menu-location.svg) center center no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.page-location .nav-top.at-top .nav-cart {
|
||
background: rgba(0,0,0,.14);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* DIALOGS */
|
||
.dialog {
|
||
background:#fffef8;
|
||
width: 29em;
|
||
margin: 4em auto;
|
||
position:relative;
|
||
border-radius:6px;
|
||
}
|
||
@media screen and (min-width: 769px) {
|
||
.dialog {
|
||
width: 35em;
|
||
}
|
||
}
|
||
.dialog {
|
||
line-height:2em;
|
||
}
|
||
.dialog h1 {
|
||
color: #eb592a;
|
||
font-size: 1.6em;
|
||
font-weight: 600;
|
||
margin-bottom: .7em;
|
||
}
|
||
.dialog p.dialog-hours {
|
||
font-size: 1em;
|
||
}
|
||
.dialog p {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.mfp-bg {
|
||
background-color: #1c0f0e !important;
|
||
}
|
||
.mfp-close {
|
||
display: none !important;
|
||
}
|
||
.dialog-egg {
|
||
background: url(../images/micro/dialog-egg.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 6.8em;
|
||
height: 11.2em;
|
||
background-size: 100%;
|
||
float: right;
|
||
margin-top: -.5em;
|
||
margin-left: 1.5em;
|
||
}
|
||
|
||
.dialog-divider {
|
||
border-top: 1px solid #e3e2df;
|
||
}
|
||
|
||
.dialog-padding {
|
||
padding: 1.4em;
|
||
}
|
||
|
||
.dialog-bottom-buttons .button {
|
||
border-radius: 4px;
|
||
font-size: 1.4em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dialog-bottom-buttons {
|
||
height: 3.4em;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
/* RESTAURANTS LIST */
|
||
.restaurants-items {
|
||
text-align: center;
|
||
}
|
||
|
||
.restaurants-item .restaurants-open {
|
||
border: 1px solid #c1c1c1;
|
||
background: #fff;
|
||
width: 29em;
|
||
height: 12em;
|
||
border-radius: 4px;
|
||
padding: 2px;
|
||
display: inline-block;
|
||
|
||
margin-bottom: 2px;
|
||
margin-top: 0;
|
||
|
||
-webkit-transition: border 0.2s ease;
|
||
-moz-transition: border 0.2s ease;
|
||
-ms-transition: border 0.2s ease;
|
||
-o-transition: border 0.2s ease;
|
||
transition: border 0.2s ease;
|
||
}
|
||
|
||
.restaurants-item .restaurants-open:hover {
|
||
border: 1px solid #f78256;
|
||
}
|
||
.restaurants-item .restaurants-open:active {
|
||
margin-bottom: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.restaurants-item {
|
||
margin: 0 5px 10px 5px;
|
||
display: inline-block;
|
||
width: auto;
|
||
text-align: left;
|
||
}
|
||
.restaurants-pic {
|
||
height: 8em;
|
||
border-top-left-radius:1px;
|
||
border-top-right-radius:1px;
|
||
overflow:hidden;
|
||
background-size:cover !important;
|
||
background-position: center center !important;
|
||
box-shadow: inset rgba(0,0,0,0.3) 0 0 40px;
|
||
}
|
||
.restaurants-item-content {
|
||
|
||
}
|
||
.restaurants-closed, .restaurants-open {
|
||
cursor: pointer;
|
||
}
|
||
.restaurants-open .restaurants-name {
|
||
padding: .6em 0 0 .4em;
|
||
font-size: 1.4em;
|
||
color: #424242;
|
||
font-weight: 700;
|
||
}
|
||
.restaurants-open .restaurants-description {
|
||
padding: .2em 0 0 .5em;
|
||
font-size: 1.1em;
|
||
color: #535353;
|
||
}
|
||
|
||
.restaurants-closed .restaurants-name {
|
||
color: #fff;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-bottom: .2em;
|
||
}
|
||
|
||
.restaurants-closed .restaurants-opensin {
|
||
color: #fff;
|
||
font-size: 10px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.restaurants-closed {
|
||
border: 1px solid #ed4f41;
|
||
background: #ed4f41;
|
||
border-radius: 4px;
|
||
padding: 1em 1.2em 1em 1.2em;
|
||
width: 27em;
|
||
clear: both;
|
||
}
|
||
|
||
.meal-item-tag {
|
||
background: #00bd9e;
|
||
box-shadow: 0 2px 0 #018872;
|
||
margin-right: -7px;
|
||
border-radius: 3px;
|
||
margin-top: -11.7em;
|
||
float: right;
|
||
color: #fff;
|
||
font-size: .9em;
|
||
font-weight: 600;
|
||
padding: .6em .8em .6em .8em;
|
||
z-index: 6;
|
||
position: relative;
|
||
}
|
||
|
||
.meal-item-tag-bottom {
|
||
margin-top: -8.9em;
|
||
margin-right: -11px;
|
||
float: right;
|
||
border-color: transparent transparent transparent #018872;
|
||
border-style: solid;
|
||
border-width: 4px;
|
||
width: 0;
|
||
height: 0;
|
||
content: " ";
|
||
z-index: 5;
|
||
position: relative;
|
||
}
|
||
|
||
.restaurants-orange {
|
||
background: url(../images/micro/restaurants-orange.svg) no-repeat;
|
||
width: 7.9em;
|
||
height: 10.3em;
|
||
background-size: 100%;
|
||
float: right;
|
||
margin-top: 2.2em;
|
||
}
|
||
.bubble-tail {
|
||
width: 18.2em;
|
||
height: 7.4em;
|
||
background-size: 100% !important;
|
||
float: left;
|
||
margin-top: 1.5em;
|
||
margin-right: 1.5em;
|
||
}
|
||
.bubble-tail-spacer {
|
||
height: 7.4em;
|
||
}
|
||
.bubble-tail-green {
|
||
background: url(../images/micro/bubble-tail-green.svg) no-repeat;
|
||
}
|
||
.bubble-tail-beige {
|
||
background: url(../images/micro/bubble-tail-beige.svg) no-repeat;
|
||
}
|
||
.bubble-tail .text {
|
||
display: block;
|
||
margin-left: 1.2em;
|
||
margin-right: 2em;
|
||
color: #fff;
|
||
font-size: 1.45em;
|
||
line-height: 1.3em;
|
||
padding-top: .6em;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
.bubble-tail .text .small {
|
||
font-size: .8em;
|
||
line-height: 1.2em;
|
||
margin-top: .1em;
|
||
display: block;
|
||
}
|
||
.bubble-tail .text .single-line {
|
||
line-height: 2.6em;
|
||
}
|
||
.restaurants-bubble-wrap {
|
||
width: 29em;
|
||
margin: 0 auto;
|
||
margin-top: -10px;
|
||
}
|
||
.restaurants-tagline {
|
||
margin-top: -1.1em;
|
||
margin-bottom: 3em;
|
||
}
|
||
.restaurants-tagline h1 {
|
||
font-size: 1.2em;
|
||
margin-bottom: .8em;
|
||
}
|
||
.restaurants-tagline h2 {
|
||
font-size: 1.2em;
|
||
text-transform: uppercase;
|
||
font-weight: bold;
|
||
letter-spacing: -.02em;
|
||
}
|
||
|
||
|
||
.facebook {
|
||
display: none !important;
|
||
}
|
||
|
||
.footer .social {
|
||
float: right;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.footer .social .fa {
|
||
font-size: 25px;
|
||
padding-right: 10px;
|
||
color: #4b4855;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
|
||
-webkit-transition: color 0.2s ease;
|
||
-moz-transition: color 0.2s ease;
|
||
-ms-transition: color 0.2s ease;
|
||
-o-transition: color 0.2s ease;
|
||
transition: color 0.2s ease;
|
||
}
|
||
.footer .social .fa:hover, .footer .social .fa:active {
|
||
color: #00bea0;
|
||
}
|
||
|
||
.footer {
|
||
margin-top: 50px;
|
||
text-align: center;
|
||
}
|
||
|
||
.divider.line {
|
||
background: #c7c7c7;
|
||
height: 1px;
|
||
}
|
||
|
||
.fb-like-box {
|
||
float: left;
|
||
}
|
||
|
||
.copyright {
|
||
font-size: 10px;
|
||
color: #6c6976;
|
||
}
|
||
|
||
|
||
|
||
/* ORDERS PAGE */
|
||
.order-item-wrap {
|
||
background: #00bea0;
|
||
color: #fff;
|
||
padding: 7px 6px 4px 4px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin-bottom: .8em;
|
||
}
|
||
.order-item {
|
||
display: table-row;
|
||
width: 100%;
|
||
}
|
||
|
||
.orders-oranges {
|
||
background: url(../images/micro/orders-oranges.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 12.9em;
|
||
height: 3.5em;
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
margin-top: 7em;
|
||
margin-bottom: 3em;
|
||
}
|
||
|
||
.order-month {
|
||
font-size: 1.2em;
|
||
text-align:center;
|
||
}
|
||
|
||
.order-day {
|
||
font-size: 2.5em;
|
||
font-weight: bold;
|
||
text-align:center;
|
||
}
|
||
|
||
.order-name {
|
||
text-decoration: underline;
|
||
font-weight: bold;
|
||
font-size: 1.2em;
|
||
margin-bottom: .5em;
|
||
margin-top: .3em;
|
||
float: left;
|
||
}
|
||
|
||
.order-summary {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
height: 1em;
|
||
display: inline-block;
|
||
}
|
||
|
||
.order-link {
|
||
font-size: 3.64em;
|
||
}
|
||
|
||
.order-date {
|
||
padding-right: 1.4em;
|
||
}
|
||
|
||
.order-details {
|
||
width: 100%;
|
||
}
|
||
|
||
.order-date, .order-details, .order-link {
|
||
display: table-cell;
|
||
vertical-align: top;
|
||
}
|
||
|
||
|
||
/**
|
||
* restaurant page
|
||
*/
|
||
.restaurant-pic-overlay {
|
||
height: 100%;
|
||
width: 100%;
|
||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 54%, rgba(0,0,0,0.25) 76%, rgba(0,0,0,0.45) 100%); /* FF3.6+ */
|
||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(54%,rgba(0,0,0,0.15)), color-stop(76%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
|
||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 54%,rgba(0,0,0,0.25) 76%,rgba(0,0,0,0.45) 100%); /* Chrome10+,Safari5.1+ */
|
||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 54%,rgba(0,0,0,0.25) 76%,rgba(0,0,0,0.45) 100%); /* Opera 11.10+ */
|
||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 54%,rgba(0,0,0,0.25) 76%,rgba(0,0,0,0.45) 100%); /* IE10+ */
|
||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 54%,rgba(0,0,0,0.25) 76%,rgba(0,0,0,0.45) 100%); /* W3C */
|
||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#73000000',GradientType=0 ); /* IE6-9 */
|
||
}
|
||
.restaurant-pic {
|
||
overflow:hidden;
|
||
background-size:cover !important;
|
||
background-position: center center !important;
|
||
margin-bottom: 2px;
|
||
|
||
-webkit-filter: brightness(0.95) contrast(135%);
|
||
-moz-filter: brightness(0.95) contrast(135%);
|
||
-ms-filter: brightness(0.95) contrast(135%);
|
||
-o-filter: brightness(0.95) contrast(135%);
|
||
filter: brightness(0.95) contrast(135%);
|
||
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
}
|
||
.restaurant-comment {
|
||
margin-top: -11em;
|
||
position: absolute;
|
||
background: rgba(0,0,0,.5);
|
||
border-radius: 4px;
|
||
padding: .5em .6em .5em .6em;
|
||
margin-left: .8em;
|
||
margin-right: .8em;
|
||
}
|
||
.restaurant-comment-wrap {
|
||
display: table-row;
|
||
}
|
||
|
||
.restaurant-comment-image {
|
||
display: table-cell;
|
||
vertical-align: top;
|
||
}
|
||
.restaurant-comment-image-img {
|
||
background-size: 100% !important;
|
||
height: 3.6em;
|
||
width: 3.6em;
|
||
}
|
||
.restaurant-comment-content {
|
||
font-size: .8em;
|
||
display: table-cell;
|
||
color: #fff;
|
||
padding-left: 1em;
|
||
vertical-align: top;
|
||
}
|
||
.restaurant-comment-content h4 {
|
||
margin-top: -.3em;
|
||
text-transform: uppercase;
|
||
line-height: 1.5em;
|
||
}
|
||
.restaurant-comment-content p {
|
||
line-height: 1.3em;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.restaurant-name {
|
||
color: #fff;
|
||
text-shadow: 1px 1px 0 rgba(0,0,0,.6);
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
margin-top: -6em;
|
||
padding: 1.2em;
|
||
z-index: 90;
|
||
}
|
||
.restaurant-name h1 {
|
||
font-size: 2em;
|
||
font-weight: 600;
|
||
}
|
||
.restaurant-name h2 {
|
||
margin-top: .4em;
|
||
font-size: 1.2em;
|
||
}
|
||
.restaurant-title {
|
||
font-size: 1.3em;
|
||
color: #312f38;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
}
|
||
.restaurant-category {
|
||
padding-top: 1em;
|
||
}
|
||
|
||
|
||
/* restaurant box messages */
|
||
.restaurant-box {
|
||
background: #f45e46;
|
||
border-radius: 6px;
|
||
color: #fff;
|
||
padding: 1em .7em 1em .7em;
|
||
}
|
||
.restaurant-box-inner {
|
||
display: table-row;
|
||
}
|
||
.restaurant-box-icon {
|
||
font-size: 2.5em;
|
||
padding: .1em .5em 0 .2em;
|
||
}
|
||
.restaurant-box-icon, .restaurant-box-content {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
}
|
||
.restaurant-box-align-top {
|
||
vertical-align: top;
|
||
}
|
||
.restaurant-box-title {
|
||
font-weight: bold;
|
||
font-size: 1.2em;
|
||
line-height: 1.4em;
|
||
}
|
||
.restaurant-box-subtitle {
|
||
font-size: 1.2em;
|
||
line-height: 1.4em;
|
||
}
|
||
.restaurant-box-text {
|
||
margin-top: .5em;
|
||
font-size: 1em;
|
||
line-height: 1.4em;
|
||
}
|
||
|
||
|
||
|
||
|
||
.cart-item {
|
||
background: #f77748;
|
||
border-radius: 5px;
|
||
color: #fff;
|
||
padding: .6em .9em .5em .9em;
|
||
margin-top: .6em;
|
||
height: 3.3em;
|
||
}
|
||
.cart-button {
|
||
float: left;
|
||
font-size: 2.8em;
|
||
margin-top: .06em;
|
||
}
|
||
.cart-item-text {
|
||
margin-top: .2em;
|
||
margin-left: 1em;
|
||
float: left;
|
||
line-height: 1.5em;
|
||
}
|
||
.cart-item-name {
|
||
font-size: 1.2em;
|
||
font-weight: bold;
|
||
}
|
||
.cart-item-description {
|
||
font-size: 1em;
|
||
}
|
||
.cart-item-config {
|
||
margin-top: .3em;
|
||
margin-right: .2em;
|
||
font-size: 1.2em;
|
||
text-decoration: underline;
|
||
color: #fff;
|
||
float: right;
|
||
cursor: pointer;
|
||
}
|
||
.cart-customize-options {
|
||
margin-left: 1em;
|
||
margin-top: 1em;
|
||
}
|
||
.cart-item-customize-name, .cart-item-customize-price {
|
||
color: #454545;
|
||
cursor: pointer;
|
||
}
|
||
.cart-item-customize-name {
|
||
font-size: 1.2em;
|
||
padding: .6em;
|
||
}
|
||
.cart-item-customize-price {
|
||
float: right;
|
||
font-size: 1em;
|
||
padding: .6em .6em 0 0;
|
||
}
|
||
|
||
|
||
.restaurant-items {
|
||
margin-top: 1em;
|
||
}
|
||
.restaurant-items-toggle {
|
||
margin-top: 1em;
|
||
}
|
||
|
||
.dish-item {
|
||
background: #fffaf8;
|
||
border: 2px solid #e46436;
|
||
border-radius: 4px;
|
||
color: #d9462f;
|
||
padding: .7em .8em .6em .8em;
|
||
margin-top: .6em;
|
||
cursor: pointer;
|
||
|
||
line-height: 1.5em;
|
||
height: 3em;
|
||
}
|
||
.dish-item-name {
|
||
font-weight: bold;
|
||
font-size: 1.2em;
|
||
}
|
||
.dish-item-price {
|
||
font-size: 1.1em;
|
||
float: right;
|
||
}
|
||
.dish-item-description {
|
||
color: #e7806c;
|
||
font-size: 1.0em;
|
||
}
|
||
|
||
|
||
/* restaurant payment form */
|
||
.payment-form-toggle {
|
||
border: 2px solid #00bea0;
|
||
background: #fff;
|
||
color: #00bea0;
|
||
cursor: pointer;
|
||
font-size: 1.4em;
|
||
text-transform: uppercase;
|
||
padding: .3em .8em .3em .8em;
|
||
border-radius: 4px;
|
||
font-weight: bold;
|
||
}
|
||
.payment-form-toggle.toggle-active {
|
||
background: #00bea0;
|
||
border: 2px solid #00bea0;
|
||
color: #fff;
|
||
}
|
||
|
||
.spacer-half {
|
||
margin-top: .5em;
|
||
}
|
||
|
||
.spacer-one-onehalf {
|
||
margin-top: 1em;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
|
||
.spacer-one-one {
|
||
margin-top: 1em;
|
||
margin-bottom: 1em;
|
||
}
|
||
.spacer-one-two {
|
||
margin-top: 1em;
|
||
margin-bottom: 2em;
|
||
}
|
||
.spacer-two-two {
|
||
margin-top: 2em;
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
.spacer-two-one {
|
||
margin-top: 2em;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
/* global form styles */
|
||
.form-input {
|
||
font-size: 1.3em;
|
||
border-radius: 3px;
|
||
border: 2px solid #00957f;
|
||
padding: .3em .6em .3em .6em;
|
||
color: #174e46;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.form-icon {
|
||
color: #00957f;
|
||
font-size: 1.8em;
|
||
width: 1.1em;
|
||
text-align: center;
|
||
padding-right: .5em;
|
||
}
|
||
.form-group {
|
||
display: table;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
white-space:nowrap;
|
||
}
|
||
.form-field, .form-field.fa {
|
||
vertical-align: top;
|
||
padding-top: .4em;
|
||
display: table-cell;
|
||
}
|
||
.form-select {
|
||
background: #fff;
|
||
}
|
||
.form-input::-webkit-input-placeholder {
|
||
color: #afc6c2;
|
||
}
|
||
.form-input:-moz-placeholder {
|
||
color: #afc6c2;
|
||
}
|
||
.form-input::-moz-placeholder {
|
||
color: #afc6c2;
|
||
}
|
||
.form-input:-ms-input-placeholder {
|
||
color: #afc6c2;
|
||
}
|
||
|
||
.bottom-spacer {
|
||
height: 100px;
|
||
}
|
||
|
||
|
||
|
||
.restaurant-payment-item {
|
||
display: block;
|
||
}
|
||
.restaurant-banana {
|
||
background: url(../images/micro/restaurant-banana.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 73px;
|
||
height: 171px;
|
||
background-size: 100%;
|
||
float: left;
|
||
margin-left: 2em;
|
||
margin-top: -1em;
|
||
}
|
||
.payment-total {
|
||
|
||
}
|
||
|
||
|
||
.default-order-check {
|
||
margin-top: .4em;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.delivery-minimum-error {
|
||
margin-bottom: .2em;
|
||
}
|
||
|
||
/* optional title bar styles */
|
||
.restaurant-title-wrap {
|
||
display: table-row;
|
||
width: 100%;
|
||
}
|
||
.restaurant-title {
|
||
display: table-cell;
|
||
white-space:nowrap;
|
||
}
|
||
.restaurant-title-bar {
|
||
display: table-cell;
|
||
width: 100%;
|
||
padding-left: 1em;
|
||
vertical-align: middle;
|
||
}
|
||
.restaurant-title-bar-inner {
|
||
background: #d5c2bf;
|
||
width: 100%;
|
||
font-size: .1em;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* appended by autosize directive */
|
||
.autosize {
|
||
margin-bottom: .5em;
|
||
-webkit-transition: height 0.2s;
|
||
-moz-transition: height 0.2s;
|
||
-ms-transition: height 0.2s;
|
||
-o-transition: height 0.2s;
|
||
transition: height 0.2s;
|
||
}
|
||
|
||
|
||
|
||
/* about page */
|
||
.about-pear {
|
||
background: url(../images/micro/about-pear.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 75px;
|
||
height: 129px;
|
||
background-size: 100%;
|
||
float: right;
|
||
}
|
||
.about-bubble-wrap {
|
||
width: 28em;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.dialog-message {
|
||
color: #fff;
|
||
margin-bottom: 1em;
|
||
border-radius: 4px;
|
||
font-size: 1.2em;
|
||
line-height: 1.4em;
|
||
padding: .7em .9em .5em .9em;
|
||
}
|
||
|
||
.dialog-message-error {
|
||
background: #e1574c;
|
||
}
|
||
|
||
.dialog-message-success {
|
||
background: #77c675;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* owners page */
|
||
.owner-icon {
|
||
border-radius: 1.6em;
|
||
font-size: 2.1em;
|
||
padding: .43em;
|
||
background: #fe9872;
|
||
color: #fffef9;
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
text-align: center;
|
||
line-height: 1em;
|
||
float: left;
|
||
margin: .2em 1em 0 0;
|
||
clear: left;
|
||
display: table-cell;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.owner-content p {
|
||
margin-bottom: 1.3em;
|
||
}
|
||
|
||
.owner-text {
|
||
display: table-cell;
|
||
vertical-align: top;
|
||
}
|
||
.owner-block {
|
||
display: table-row;
|
||
}
|
||
|
||
.owner-brocoli {
|
||
background: url(../images/micro/owner-brocoli.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 7.6em;
|
||
height: 13.1em;
|
||
background-size: 100%;
|
||
float: right;
|
||
margin-top: .3em;
|
||
}
|
||
.owners-bubble-wrap {
|
||
width: 26em;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.owners-bubble-wrap .bubble-tail {
|
||
float: left;
|
||
font-size: .9em;
|
||
}
|
||
|
||
|
||
.giftcard-badge-text {
|
||
margin-top: 1em;
|
||
}
|
||
.giftcard-badge-value {
|
||
width: 3.1em;
|
||
text-align: center;
|
||
font-size: 1.3em;
|
||
margin-top: -2.3em;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
sup {
|
||
font-size: .8em;
|
||
vertical-align: top;
|
||
margin-top: -.2em;
|
||
display: inline-block;
|
||
}
|
||
.giftcard-badge .fa {
|
||
font-size: 4.9em;
|
||
color: #00bd9e;
|
||
}
|
||
|
||
.giftcard-badge {
|
||
margin-right: .1em;
|
||
border-radius: 3px;
|
||
margin-top: -13.3em;
|
||
float: right;
|
||
color: #fff;
|
||
font-size: .9em;
|
||
font-weight: 600;
|
||
padding: .6em .8em .6em .8em;
|
||
z-index: 6;
|
||
position: relative;
|
||
}
|
||
|
||
.restaurants-more {
|
||
margin: 0 auto;
|
||
width: 22.71em;
|
||
}
|
||
|
||
.restaurants-items {
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
.button.facebook .fa {
|
||
margin-right: .4em;
|
||
|
||
}
|
||
|
||
|
||
/* order page */
|
||
.icon-support {
|
||
background: url(../images/micro/icon-support.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 2.4em;
|
||
height: 2.8em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-chef {
|
||
background: url(../images/micro/icon-chef.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 2.0em;
|
||
height: 2.6em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-user {
|
||
background: url(../images/micro/icon-user.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 1.9em;
|
||
height: 2.4em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-delivery {
|
||
background: url(../images/micro/icon-delivery.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 2.2em;
|
||
height: 1.6em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-card {
|
||
background: url(../images/micro/icon-card.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 2.3em;
|
||
height: 1.6em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-clock {
|
||
background: url(../images/micro/icon-clock.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 1.6em;
|
||
height: 1.9em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-timer {
|
||
background: url(../images/micro/icon-timer.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 1.6em;
|
||
height: 1.9em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-map-home {
|
||
background: url(../images/micro/icon-map-home.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 1.6em;
|
||
height: 2.4em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-map-restaurant {
|
||
background: url(../images/micro/icon-map-restaurant.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 1.6em;
|
||
height: 2.4em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-cash {
|
||
background: url(../images/micro/icon-cash.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 2.1em;
|
||
height: 1.6em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-takeout {
|
||
background: url(../images/micro/icon-takeout.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 1.5em;
|
||
height: 2.0em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-phone {
|
||
background: url(../images/micro/icon-phone.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 1.4em;
|
||
height: 1.4em;
|
||
background-size: 100%;
|
||
margin-top: .2em;
|
||
}
|
||
|
||
.icon-notes {
|
||
background: url(../images/micro/icon-notes.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 1.9em;
|
||
height: 1.6em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.icon-credit {
|
||
background: url(../images/micro/icon-credit.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 2.5em;
|
||
height: 1.9em;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.order-map {
|
||
width: 100%;
|
||
height: 15em;
|
||
background-size:cover !important;
|
||
|
||
}
|
||
|
||
.order-info a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.order-content p {
|
||
line-height: 1.5em;
|
||
}
|
||
|
||
.order-icon div {
|
||
display: inline-block;
|
||
}
|
||
.order-icon, .order-info {
|
||
float: left;
|
||
}
|
||
|
||
.order-info-oneline {
|
||
min-height: 2.2em;
|
||
margin-top: .4em;
|
||
}
|
||
|
||
.order-icon {
|
||
margin: .4em 1.8em 0 1em;
|
||
width: 2em;
|
||
text-align: center;
|
||
}
|
||
|
||
.order-info-address {
|
||
font-size: 1.1em;
|
||
line-height: .4em;
|
||
}
|
||
|
||
.order-info-address a {
|
||
color: #312f38;
|
||
}
|
||
|
||
.order-comment-arrow {
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 7px solid transparent;
|
||
border-right: 7px solid transparent;
|
||
border-bottom: 7px solid #00957f;
|
||
margin-left: 1.2em;
|
||
}
|
||
|
||
.order-comment {
|
||
background: #00957f;
|
||
color: #fff;
|
||
padding: .7em .9em .5em 1em;
|
||
border-radius: 4px;
|
||
margin-bottom: .8em;
|
||
}
|
||
|
||
.side-menu-icon {
|
||
width: 70px;
|
||
}
|
||
|
||
.side-menu-icon .fa.fa-lightbulb-o {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.side-menu-icon .fa.fa-map-marker {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.side-menu-icon .fa.fa-cutlery {
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.side-menu-icon .fa.fa-sign-in {
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.side-menu li {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.restaurant-info-address {
|
||
margin-top: .2em;
|
||
font-size: 1.1em;
|
||
line-height: 1.4em;
|
||
}
|
||
|
||
.no-init .hide-before-init {
|
||
display: none !important;
|
||
}
|
||
|
||
/*
|
||
.ani-elip-one {
|
||
opacity: 0;
|
||
-webkit-animation: ani-elip-dot 1.3s infinite;
|
||
-webkit-animation-delay: 0.0s;
|
||
}
|
||
|
||
.ani-elip-two {
|
||
opacity: 0;
|
||
-webkit-animation: ani-elip-dot 1.3s infinite;
|
||
-webkit-animation-delay: 0.2s;
|
||
}
|
||
|
||
.ani-elip-three {
|
||
opacity: 0;
|
||
-webkit-animation: ani-elip-dot 1.3s infinite;
|
||
-webkit-animation-delay: 0.3s;
|
||
}
|
||
|
||
@-webkit-keyframes ani-elip-dot {
|
||
0% { opacity: 0; }
|
||
50% { opacity: 0; }
|
||
100% { opacity: 1; }
|
||
}
|
||
*/
|
||
|
||
|
||
.payment-wrap {
|
||
overflow: hidden;
|
||
width: 18em;
|
||
height: 15em;
|
||
margin-right: -1em;
|
||
float: right;
|
||
}
|
||
|
||
.payment-ribbon-content {
|
||
font-size: 1.1em;
|
||
color: #fff;
|
||
line-height: 1.2em;
|
||
padding: .8em 0 .8em 7em;
|
||
}
|
||
|
||
.payment-ribbon {
|
||
background: url(../images/micro/payment-ribbon.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 29.8em;
|
||
height: auto;
|
||
background-size: auto 100%;
|
||
float: right;
|
||
margin-top: 2em;
|
||
margin-right: -10.4em;
|
||
|
||
-webkit-backface-visibility: hidden;
|
||
-moz-backface-visibility: hidden;
|
||
-ms-backface-visibility: hidden;
|
||
-o-backface-visibility: hidden;
|
||
backface-visibility: hidden;
|
||
|
||
-webkit-transform: rotate(-5deg);
|
||
-moz-transform: rotate(-5deg);
|
||
-ms-transform: rotate(-5deg);
|
||
-o-transform: rotate(-5deg);
|
||
transform: rotate(-5deg);
|
||
}
|
||
|
||
|
||
.account-container .account-title-link {
|
||
font-size: 1.2em;
|
||
text-transform: uppercase;
|
||
font-weight: bold;
|
||
letter-spacing: -.02em;
|
||
margin-right: 3em;
|
||
}
|
||
.account-container .account-title-link.link {
|
||
color: #e95d1a;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.button.account-go {
|
||
width: 8em;
|
||
float: right;
|
||
}
|
||
|
||
.account-login-help {
|
||
cursor: pointer;
|
||
color: #312f38;
|
||
|
||
margin-top: .4em;
|
||
margin-left: .5em;
|
||
display: block;
|
||
float: left;
|
||
}
|
||
|
||
.staff-judd {
|
||
background: url(../images/micro/staff-judd.png) no-repeat;
|
||
}
|
||
.staff-devin {
|
||
background: url(../images/micro/staff-devin.png) no-repeat;
|
||
}
|
||
.staff-nick {
|
||
background: url(../images/micro/staff-nick.png) no-repeat;
|
||
}
|
||
.staff-david {
|
||
background: url(../images/micro/staff-david.png) no-repeat;
|
||
}
|
||
.staff-daniel {
|
||
background: url(../images/micro/staff-daniel.png) no-repeat;
|
||
}
|
||
|
||
.staff-image {
|
||
width: 9em;
|
||
height: 9em;
|
||
background-size: 100%;
|
||
float: left;
|
||
margin: 0 1em 1em 0;
|
||
}
|
||
|
||
.staff h1 {
|
||
font-size: 1.5em;
|
||
font-weight: bold;
|
||
margin-bottom: .4em;
|
||
padding-top: .44em;
|
||
}
|
||
.staff h2 {
|
||
font-size: 1.4em;
|
||
margin-bottom: .6em;
|
||
}
|
||
|
||
.staff .staff-favorite {
|
||
font-size: 1.1em;
|
||
line-height: 1.55em;
|
||
}
|
||
|
||
.staff .staff-content {
|
||
clear: both;
|
||
}
|
||
|
||
.staff {
|
||
margin-bottom: 3em;
|
||
}
|
||
|
||
@media screen and (max-width: 400px) {
|
||
.staff-orite {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.about-green-orange {
|
||
background: url(../images/micro/about-green-orange.svg) no-repeat;
|
||
background-position: top center;
|
||
width: 7.7em;
|
||
height: 10.1em;
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
margin-top: -4.8em;
|
||
}
|
||
|
||
.splash-bubble-wrap {
|
||
margin: 0 auto;
|
||
width: 17.7em;
|
||
}
|
||
|
||
.about-join-bubble-wrap {
|
||
margin: 0 auto;
|
||
width: 17.7em;
|
||
margin-top: 7em;
|
||
}
|
||
.bubble-curved {
|
||
background-position: top center !important;
|
||
background-size: 100% !important;
|
||
width: 17.7em;
|
||
height: 11.5em;
|
||
margin-left: -2em;
|
||
}
|
||
.bubble-curved-green {
|
||
background: url(../images/micro/bubble-curved-green.svg) no-repeat;
|
||
}
|
||
|
||
.bubble-curved-white {
|
||
background: url(../images/micro/bubble-curved-white.svg) no-repeat;
|
||
}
|
||
|
||
.bubble-curved .text {
|
||
display: block;
|
||
font-size: 1.45em;
|
||
line-height: 1.3em;
|
||
padding: .7em 2.1em 0 .7em;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.bubble-curved-white .text {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bubble-curved-green .text {
|
||
color: #fff;
|
||
}
|
||
.bubble-curved-white .text {
|
||
padding-left:0;
|
||
padding-right: 1em;
|
||
}
|
||
|
||
.bubble-curved .text .small {
|
||
font-size: .7em;
|
||
line-height: 1.3em;
|
||
margin-top: .4em;
|
||
display: inline-block;
|
||
font-weight: bold;
|
||
padding-left: .5em;
|
||
padding-right: .5em;
|
||
}
|
||
.bubble-curved .text .single-line {
|
||
line-height: 2.2em;
|
||
font-size: 1.05em;
|
||
}
|
||
|
||
.connection-error {
|
||
top: 0;
|
||
bottom:0;
|
||
left:0;
|
||
right:0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index:1000;
|
||
position: fixed;
|
||
text-align: center;
|
||
display: none;
|
||
background: #fff9ea;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.connection-error-image {
|
||
background: url(../images/micro/connection-error.svg) no-repeat;
|
||
width: 26.7em;
|
||
height: 38.6em;
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
margin-top: 9em;
|
||
}
|
||
|
||
.connection-error-image .text {
|
||
color: #fff9eb;
|
||
font-size: 1.2em;
|
||
line-height: 1.4em;
|
||
padding-top: 1.7em;
|
||
padding-left: .7em;
|
||
}
|
||
|
||
.splash-top p {
|
||
color: #fff;
|
||
}
|
||
|
||
.page-splash .navs {
|
||
display: none;
|
||
}
|
||
|
||
.splash-continue {
|
||
color: #ffddb8;
|
||
text-transform: uppercase;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
letter-spacing: -.02em;
|
||
}
|
||
.splash-top p {
|
||
text-align: center;
|
||
}
|
||
.splash-tagline {
|
||
text-shadow: 0 0 20px rgba(0,0,0,.6);
|
||
font-weight: 600;
|
||
}
|
||
.splash-top {
|
||
top: 0;
|
||
bottom:0;
|
||
left:0;
|
||
right:0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index:1000;
|
||
position: fixed;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
}
|
||
.splash-inputs {
|
||
display: inline-block;
|
||
width: 30em;
|
||
}
|
||
.splash-inputs .button.facebook {
|
||
padding-top: 1em;
|
||
padding-bottom: 1em;
|
||
}
|
||
.splash-inputs .button-pushable {
|
||
height: 5em;
|
||
}
|
||
.splash-inputs .button-pushable .button:active {
|
||
margin-top: 4px;
|
||
}
|
||
@media screen and (min-height: 600px) {
|
||
.splash-bottom {
|
||
margin-top: 6em;
|
||
}
|
||
}
|
||
@media screen and (max-height: 599px) {
|
||
.splash-bottom {
|
||
position: fixed;
|
||
bottom: 2em;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.bubble-curved-spacer {
|
||
height: 11.5em;
|
||
}
|
||
|
||
.bubble-animated {
|
||
|
||
-webkit-animation-duration: 2.5s;
|
||
-webkit-animation-name: bubble-hover;
|
||
-webkit-animation-iteration-count: infinite;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
|
||
-moz-animation-duration: 2.5s;
|
||
-moz-animation-name: bubble-hover;
|
||
-moz-animation-iteration-count: infinite;
|
||
-moz-animation-timing-function: ease-in-out;
|
||
|
||
-ms-animation-duration: 2.5s;
|
||
-ms-animation-name: bubble-hover;
|
||
-ms-animation-iteration-count: infinite;
|
||
-ms-animation-timing-function: ease-in-out;
|
||
|
||
-o-animation-duration: 2.5s;
|
||
-o-animation-name: bubble-hover;
|
||
-o-animation-iteration-count: infinite;
|
||
-o-animation-timing-function: ease-in-out;
|
||
|
||
animation-duration: 2.5s;
|
||
animation-name: bubble-hover;
|
||
animation-iteration-count: infinite;
|
||
animation-timing-function: ease-in-out;
|
||
|
||
position: absolute;
|
||
z-index: 10;
|
||
pointer-events:none;
|
||
}
|
||
|
||
@-webkit-keyframes bubble-hover {
|
||
0% { -webkit-transform:translateY(0); }
|
||
45% { -webkit-transform:translateY(-.5em); }
|
||
100% { -webkit-transform:translateY(0); }
|
||
}
|
||
|
||
@-moz-keyframes bubble-hover {
|
||
0% { -moz-transform:translateY(0); }
|
||
45% { -moz-transform:translateY(-.5em); }
|
||
100% { -moz-transform:translateY(0); }
|
||
}
|
||
|
||
@-ms-keyframes bubble-hover {
|
||
0% { -ms-transform:translateY(0); }
|
||
45% { -ms-transform:translateY(-.5em); }
|
||
100% { -ms-transform:translateY(0); }
|
||
}
|
||
|
||
@-o-keyframes bubble-hover {
|
||
0% { -o-transform:translateY(0); }
|
||
45% { -o-transform:translateY(-.5em); }
|
||
100% { -o-transform:translateY(0); }
|
||
}
|
||
|
||
@keyframes bubble-hover {
|
||
0% { transform:translateY(0); }
|
||
45% { transform:translateY(-.5em); }
|
||
100% { transform:translateY(0); }
|
||
}
|
||
|
||
|
||
.splash-tagline {
|
||
margin-bottom: 2em;
|
||
}
|
||
.splash-continue {
|
||
margin-top: 1em;
|
||
display: block;
|
||
}
|
||
|
||
@media screen and (min-height: 530px) {
|
||
.splash-spacer-one {
|
||
height: 5em;
|
||
}
|
||
.splash-spacer-two {
|
||
height: 6em;
|
||
}
|
||
.splash-bottom {
|
||
bottom: 7.7em;
|
||
}
|
||
}
|
||
@media screen and (max-height: 529px) {
|
||
.splash-spacer-one {
|
||
height: 4em;
|
||
}
|
||
.splash-spacer-two {
|
||
height: 5em;
|
||
}
|
||
.splash-bottom {
|
||
bottom: 6em;
|
||
}
|
||
}
|
||
@media screen and (max-height: 499px) {
|
||
.splash-spacer-one {
|
||
height: 3em;
|
||
}
|
||
.splash-spacer-two {
|
||
height: 4em;
|
||
}
|
||
.splash-bottom {
|
||
bottom: 4em;
|
||
}
|
||
}
|
||
|
||
|
||
@media screen and (max-height: 469px) {
|
||
.splash-top .logo {
|
||
display: none;
|
||
}
|
||
.splash-spacer-two {
|
||
height: 2em;
|
||
}
|
||
.splash-spacer-one {
|
||
height: 4em;
|
||
}
|
||
.splash-inputs .button.facebook {
|
||
padding-top: .5em;
|
||
padding-bottom: .5em;
|
||
}
|
||
.splash-inputs .button-pushable {
|
||
height: 4em;
|
||
}
|
||
.splash-bottom {
|
||
bottom: 2.2em;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-height: 379px) {
|
||
.splash-spacer-two {
|
||
height: 0;
|
||
}
|
||
.splash-spacer-one {
|
||
height: 2em;
|
||
}
|
||
.splash-tagline {
|
||
margin-bottom: .4em;
|
||
}
|
||
.splash-bottom {
|
||
bottom: 1.2em;
|
||
}
|
||
}
|
||
|
||
.animated-resize {
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
|
||
-webkit-transition: all 0.2s;
|
||
-moz-transition: all 0.2s;
|
||
-ms-transition: all 0.2s;
|
||
-o-transition: all 0.2s;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
|
||
.download-phone {
|
||
background: url(../images/micro/download-phone.png) no-repeat;
|
||
width: 195px;
|
||
height: 408px;
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.download-top {
|
||
text-align: center;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.download-top h1 {
|
||
font-size: 3em;
|
||
margin-bottom: .4em;
|
||
}
|
||
|
||
.download-top h2 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
.page-download .navs {
|
||
display: none;
|
||
}
|
||
|
||
.download-top {
|
||
max-width: 27em;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.download-top p {
|
||
margin-top: 2.4em;
|
||
}
|
||
|
||
.download-top .button-pushable {
|
||
margin-top: 3em;
|
||
|
||
}
|
||
|
||
.page-download .splash-spacer-two {
|
||
min-height: 1em;
|
||
}
|
||
|
||
@media screen and (min-height: 700px) {
|
||
.download-bottom {
|
||
margin-top: 5em;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-height: 699px) {
|
||
.download-bottom {
|
||
position: fixed;
|
||
bottom: -100px;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-height: 599px) {
|
||
.download-bottom {
|
||
position: fixed;
|
||
bottom: -200px;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-height: 349px) {
|
||
.download-bottom {
|
||
position: fixed;
|
||
bottom: -280px;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-height: 249px) {
|
||
.download-bottom {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-height: 444px) {
|
||
.button.download {
|
||
padding-top: .5em;
|
||
padding-bottom: .5em;
|
||
font-size: 1.5em;
|
||
}
|
||
.download-top .button-pushable {
|
||
margin-top: 1.7em;
|
||
}
|
||
.download-top h1 {
|
||
font-size: 2.5em;
|
||
margin-bottom: .4em;
|
||
}
|
||
.download-top h2 {
|
||
font-size: 1.5em;
|
||
}
|
||
.download-top p {
|
||
margin-top: .8em;
|
||
}
|
||
}
|
||
|
||
|
||
.image-animated {
|
||
-webkit-animation-duration: 5s;
|
||
-webkit-animation-name: image-hover;
|
||
-webkit-animation-iteration-count: infinite;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
-webkit-animation-delay: 2s;
|
||
}
|
||
|
||
@-webkit-keyframes image-hover {
|
||
0% { -webkit-transform:translateY(0); }
|
||
22.5% { -webkit-transform:translateY(-.5em); }
|
||
50% { -webkit-transform:translateY(0); }
|
||
100% { -webkit-transform:translateY(0); }
|
||
}
|
||
|
||
.animate-cart-add {
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-webkit-transition: all 0.3s ease-in;
|
||
|
||
position: absolute;
|
||
background: #f56b3b;
|
||
z-index: 9999;
|
||
height: 30px;
|
||
width: 280px;
|
||
left: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
/* places auto complete */
|
||
.pac-container:after {
|
||
margin-top: 2px;
|
||
background-image: url(../images/micro/powered-by-google-on-non-white2_hdpi.png) !important;
|
||
}
|
||
.pac-container {
|
||
color: #312f38;
|
||
background: #003f35;
|
||
border: 2px solid #003f35;
|
||
border-radius: 4px;
|
||
margin-top: -2px;
|
||
border-bottom: none;
|
||
width: 30em !important;
|
||
|
||
}
|
||
|
||
.pac-item {
|
||
font-size: 12px;
|
||
color: #d9d9d9;
|
||
background: #fff;
|
||
font-family: "Open Sans", "Droid Sans", "Helvetica", "Arial", sans-serif;
|
||
padding: 2px 4px 2px 4px;
|
||
cursor: pointer;
|
||
}
|
||
.pac-item:first-child {
|
||
border-top-left-radius: 2px;
|
||
border-top-right-radius: 2px;
|
||
}
|
||
.pac-item:last-child {
|
||
border-bottom-left-radius: 2px;
|
||
border-bottom-right-radius: 2px;
|
||
}
|
||
|
||
.pac-icon-marker {
|
||
background-image: url(../images/micro/autocomplete-icons_hdpi.png) !important;
|
||
}
|