/* ========================================================================== *\
TABLE OF CONTENTS
\* ==========================================================================

1. RESET
2. FONTS
3. GENERAL TAGS
4. STRUCTURE
	4.1 MOBILE MENU BUTTON
	4.2 MENU
5. HOME PAGE STYLES
6. PAGE STYLES
	6.1 PROFILE INTRO
	6.2 SEARCH RESULTS
	6.3 REVIEWS
		6.3.1 GOOGLE REVIEWS
	6.4 PROFILE
	6.5 OVERLAYS
	6.6 BROWSE
	6.7 PROFESSIONAL
	6.8 NEIGHBOURHOODS
	6.9 SPOTLIGHT
	6.10 PRODUCTS
		6.10.1 PRODUCT CATEGORIES
	6.11 SERVICES
	6.12 TEAM
	6.13 RESTAURANT
		6.13.1 RESTAURANT SEARCH
		6.13.2 GROCER
7. GENERAL CLASSES
8. FORM STYLES
9. NEW STYLES

*/

/* ========================================================================== *\
1. RESET
\* ========================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

/* Make HTML 5 elements display block-level for consistent styling */
main, article, section, aside, hgroup, nav, header, footer, figure, figcaption {
display: block;
}

/* ========================================================================== *\
2. FONTS
\* ========================================================================== */


/* ========================================================================== *\
3. GENERAL TAGS
\* ========================================================================== */

* {
box-sizing: border-box;
}

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

body {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
line-height: 28px;
color: #231F20;
}

p {
padding-bottom: 25px;
}

h1 {
font-size: 56px;
line-height: 60px;
font-weight: bold;
padding-bottom: 20px;
}

h1.small {
font-size: 44px;
line-height: 125%;
}

h1.alt {
font-size: 38px;
line-height: 42px;
}

h2 {
font-size: 38px;
line-height: 42px;
padding-bottom: 20px;
font-weight: bold;
}

h2.small {
font-size: 26px;
line-height: 150%;
}

h3 {
font-size: 22px;
line-height: 28px;
padding-bottom: 20px;
font-weight: bold;
}

h3.large {
font-size: 26px;
line-height: 125%;
}

h4 {
font-size: 16px;
line-height: 18px;
font-weight: bold;
text-transform: uppercase;
padding-bottom: 10px;
}

.noPadding {
padding-bottom: 0;
}

small {
font-size: 14px;
line-height: 18px;
}

a {
color: #0088F2;
text-decoration: none;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

a:hover {
color: #E20613;
}

a.alt {
color: #E20613;
text-decoration: underline;
}

a.alt:hover {
color: #0088F2;
text-decoration: none;
}

a:hover,
a:active {
outline: 0;
}

hr {

}

blockquote {
text-transform: uppercase;
font-size: 22px;
line-heigh: 34px;
text-align: center;
position: relative;
margin-bottom: 40px;
}

blockquote:before {
content: "“";
font-size: 90px;
line-heigh: 90px;
display: inline-block;
position: absolute;
top: 20px;
left: -40px;
}

blockquote:after {
content: "”";
font-size: 90px;
line-heigh: 90px;
display: inline-block;
position: absolute;
bottom: -30px;
right: -40px;
}

figure figcaption {
display: block;
font-size: 12px;
line-height: 18px;
padding: 2px 0 10px 0;
}

::selection {
background: #231F20;
color: #ffffff;
}

::-moz-selection {
background: #231F20;
color: #ffffff;
}

sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

table {
width: 100%;
}

table {
border: 1px solid #231F20;
margin: 0 0 40px;
}

table thead {
width: 100%;
}

table thead tr th {
background: #231F20;
color: #ffffff;
padding: 10px 20px;
font-weight: bold;
font-size: 18px;
}

table tbody {
width: 100%;
}

table tbody tr {
width: 100%;
}

table tbody tr td {
background: #ffffff;
color: #231F20;
font-size: 14px;
padding: 10px 20px;
}

table tbody tr:nth-child(even) td {
background: #eeeeee;
}

table td:last-child {
text-align: right;
}

/* ========================================================================== *\
4. STRUCTURE
\* ========================================================================== */

header {
display: block;
width: 100%;
height: 85px;
background: #ffffff;
padding: 15px 0;
}

header .content {
position: relative;
}

.logo {
display: block;
float: left;
width: 280px;
}

.navigationContainer {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}

/* ===================================== *\
4.1 MOBILE MENU BUTTON
\* ===================================== */

.cartBtn {
display: block;
position: relative;
width: 40px;
height: 40px;
background:url('images/cart.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 32px 33px;
cursor: pointer;
}

.cartBtn .number {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: -2px;
right: -2px;
border-radius: 100%;
color: #ffffff;
background: #E20613;
width: 20px;
height: 20px;
font-size: 12px;
line-height: 100%;
}

.c-hamburger {
display: block;
position: relative;
z-index: 100;
margin: 0;
padding: 0;
width: 30px;
height: 30px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background 0.3s;
}

.c-hamburger:hover {
background: transparent;
}

.c-hamburger:focus {
outline: none;
}

.c-hamburger span {
display: block;
position: absolute;
top: 10px;
left: 0px;
right: 0px;
height: 4px;
background: #1D1D1B;
border-radius: 2px;
}

.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
background-color: #1D1D1B;
border-radius: 2px;
content: "";
}

.c-hamburger span::before {
top: -10px;
}

.c-hamburger span::after {
bottom: -10px;
}

.c-hamburger--htx {
background:transparent;
}

.c-hamburger--htx span {
transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
transition-property: top, transform;
}

.c-hamburger--htx span::after {
transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
background: transparent;
}

.c-hamburger--htx.is-active span {
background: none !important;
}

.c-hamburger--htx.is-active span::before {
top: 0;
transform: rotate(45deg);
background: #1D1D1B;
}

.c-hamburger--htx.is-active span::after {
bottom: 0;
transform: rotate(-45deg);
background: #1D1D1B;
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
transition-delay: 0s, 0.3s;
}

/* ===================================== *\
4.2 MENU
\* ===================================== */

.menu {
display: block;
position: fixed;
top: 200%;
left: 0px;
z-index: 999999;
width: 100vw;
height: 100%;
background: rgba(0,0,0,1);
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}

.menu.openMenu {
top: 85px;
display: block;
}

.menu ul {
display: block;
padding: 50px 0 0 0;
max-width: 300px;
margin: 50px auto;
}

.menu ul li {
display: block;
float: none;
clear: both;
margin: 0px;
border-bottom: 1px solid rgba(255,255,255,0.3);
}

.menu ul li:first-child {
border-top: 1px solid rgba(255,255,255,0.3);
}

.menu ul li:last-child {
border-bottom: none;
}

.menu ul li a {
display: block !important;
font-size: 30px !important;
line-height: 30px !important;
color: #ffffff !important;
padding: 15px 0 !important;
width: 100%;
}

.menu ul li a:hover,
.menu ul li.current-page a {
color: #E00512 !important;
}

.hero {
display: block;
width: 100%;
padding: 60px 0;
position: relative;
}

footer {
display: block;
padding: 80px 0;
font-size: 16px;
line-height: 20px;
background: #444444;
color: #ffffff;
}

footer .columns .col:last-child {
text-align: right;
}

.footerLogo {
display: block;
max-width: 350px;
margin-bottom: 10px;
}

ul.footerlinks {
display: block;
}

ul.footerlinks li {
display: block;
margin-bottom: 10px;
}

ul.footerlinks li a {
color: #FFFFFF;
}

ul.footerlinks li a:hover {
opacity: 0.7;
}

.rightContainer ul.social,
.affiliates ul.social {
display: block;
}

.rightContainer ul.social li,
.affiliates ul.social li {
margin: 0 10px 0 0;
padding: 0;
box-shadow: none;
background: transparent;
display: inline-block;
}

.rightContainer ul.social li a,
.affiliates ul.social li a {
width: auto;
height: auto;
line-height: auto;
background: none;
border: none;
border-radius: 0;
}

.rightContainer ul.social li a:hover,
.affiliates ul.social li a:hover {
background: transparent;
transform: scale(1.1,1.1);
}

ul.social {
display: inline-block;
margin: 0px;
}

ul.social li {
display: inline-block;
margin-left: 10px;
}

ul.social li a {
display: block;
width: 50px;
height: 50px;
text-align: center;
color: #ffffff;
font-size: 25px;
line-height: 50px;
border: 1px solid #ffffff;
border-radius: 100%;
cursor: pointer;
background: transparent;
}

ul.social li a:hover {
color: #444444;
background-color: #ffffff;
}

main {
position: relative;
display: block;
padding: 60px 0;
}

main.alt {
padding: 0 0 60px 0;
}

/* ========================================================================== *\
5. HOME PAGE STYLES
\* ========================================================================== */

.hero.home {
background: url("images/home-hero.svg");
background-size: 943px 390px;
padding: 120px 0;
background-position: right bottom;
background-repeat: no-repeat;
background-color: #99CFF9;
}

ul.tags {
font-size: 12px;
line-height: 12px;
color: #444444;
}

ul.tags li {
display: inline-block;
margin-right: 10px;
}

ul.tags li a {
color: #444444;
border:1px solid #444444;
padding: 4px 8px;
border-radius: 10px;
}

ul.tags li a:hover {
background:#231F20;
color: #ffffff;
}

.highlights {
display: block;
width: 100%;
padding: 80px 0 100px 0;
background-image: linear-gradient(180deg, #EBEBEB 0%, #FFFFFF 44%, #E2E2E2 100%);
}

.highlights h2 {
display: block;
margin: 0 auto 60px auto;
text-align: center;
}

.highlights h2 strong {
font-weight: 900;
}

ul.highlight {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 60px;
}

ul.highlight li {
display: block;
max-width: 250px;
font-size: 	16px;
line-height: 22px;
text-align: center;
}

ul.highlight li img {
display: inline-block;
margin-bottom: 30px;
height: 180px !important;
}

.stickySearch {
display: none;
position: fixed;
top: 0px;
left: 0px;
z-index: 99999;
width: 100%;
padding: 10px 20px;
background: #ffffff;
box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
}

.stickySearch.active {
display: block;
}

.stickySearch form {
display: flex;
flex-direction: row;
max-width: 600px;
margin: 0 auto;
}

.stickySearch form input.service {
display: block;
width: 90%;
margin: 0px;
}

.stickySearch form input[type="submit"] {
width: 10%;
text-align: center;
padding: 10px 20px;
margin: 0px;
text-indent: -999999px;
overflow: hidden;
background: url('images/search-white-ico.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 24px 24px;
background-color: #E20613;
}

.stickySearch form input[type="submit"]:hover {
background: url('images/search-white-ico.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 24px 24px;
background-color: #111111;
}

/* ========================================================================== *\
6. PAGE STYLES
\* ========================================================================== */

.hero.general {
background: #F4F4F4;
padding: 60px 0 20px 0;
}

.hero.general .search {
margin: 0px 0px 20px 0;
max-width: 650px;
border: 6px solid #F4F4F4;
box-shadow: 0 2px 7px rgba(0,0,0.2);
}

.hero.general .search form input[type="text"]:nth-child(2) {
width: 35%;
border-left: 6px solid #F4F4F4;
}

.hero.profile {
font-size: 16px;
line-height: 30px;
padding: 60px 0;

background-position: center bottom !important;
background-repeat: no-repeat !important;
background-size: 1440px 260px !important;
background-color: #F4F4F4 !important;
}

.hero.profile.alt,
.hero.profile.short {
padding: 60px 0 0 0;
}

.hero.profile.extraShort {
padding: 60px 0 0 0;
}

.hero.profile.skinny {
padding: 40px 0;
}

ul.awards {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 40px;
row-gap: 20px;
margin: 20px 0;
}

ul.awards li {
display: block;
text-align: center;
}

ul.awards li img {
display: block;
margin: 0 auto;
margin-bottom: 10px;
}

ul.awards li p {
display: block;
font-size: 16px;
line-height: 24px;
padding-bottom: 0px;
}


/* ===

.heroCard {
display: block;
}

.heroCard .columns {
flex-flow: row nowrap !important;
justify-content: space-between;
}

.heroCard .columns .col {
display: block;
}

.heroCard .columns .col.first .columns {
justify-content: flex-start;
}

.heroCard .columns .col.first .columns .col {
width: auto !important;
}

*/

/* === HERO CARD === */

.heroCard {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.leftContainer,
.middleContainer,
.rightContainer {
display: block;
}

.middleContainer ul {
display: flex;
flex-direction: row;
gap: 8px;
margin: 0;
}

.middleContainer ul li {
display: block;
}

.heroCard h1 {
padding-bottom: 10px;
}

.heroCard h3 {
margin-bottom: 20px;
}

.callout .heroCard {
flex-wrap: wrap;
}

.callout .heroCard .rightContainer {
width: 100%;
}

/* === HERO CARD ALT === */

.morePhotoBtn {
display: block;
width: 56px;
height: 56px;
background: url('images/ico-more-photo.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 56px 56px;
position: absolute;
top: 4px;
left: 4px;
z-index: 10;
}

.heroCard.alt .profilePhoto {
width: 255px;
margin: 0 0 -120px 0;
z-index: 1000;
position: relative;
}

.heroCard.alt .profilePhoto img {
width: 255px;
}

.heroCard.alt .profilePhoto.multiple {
position: relative;
display: block;
}

.heroCard.alt .profilePhoto.multiple img {
position: relative;
display: block;
}

.heroCard.alt .profilePhoto.multiple:before {
content: "";
display: block;
position: absolute;
z-index: -1;
bottom: -5px;
left: 15px;
width: 255px;
height: 255px;
background: #cccccc;
border-radius: 100%;
}

.heroCard.alt .profilePhoto.multiple:after {
content: "";
display: block;
position: absolute;
z-index: -2;
bottom: -15px;
left: 25px;
width: 255px;
height: 255px;
background: #dddddd;
border-radius: 100%;
}

.heroCard.alt .columns .col:last-child {
padding: 0 0 0 40px;
}

/* === */

.heroTop {
padding-bottom: 30px;
}

.page {
display: block;
width: 100%;
padding: 60px 0;
background-color: #ffffff;
}

.page.alt {
padding: 0 0 60px 0;
}

.page.grey {
background-color: #F4F4F4;
color: #231f20;
}

.page ul.list,
.page ol.list {
display: block;
margin: 0 0 40px 20px;
}

.page ul.list li {
list-style-type: disc;
margin-bottom: 5px;
}

.page ol.list li {
list-style-type: disc;
margin-bottom: 5px;
}

/* ===================================== *\
6.1 PROFILE INTRO
\* ===================================== */

.profileIntro {
display: block;
}

.carousel .banner {
margin-bottom: 0px;
}

.banner {
display: block;
width: 100%;
height: 350px !important;
margin-bottom: 40px;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}

.banner.alt {
height: 450px !important;
}

.banner .inner {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 22px;
line-height: 34px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
color: #ffffff;
text-align: center;
border-bottom: none !important;
}

ul.quickLinks {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 20px 0 0 0;
}

ul.quickLinks li {
display: block;
width: 24%;
}

ul.quickLinks li .btn {
display: block;
text-align: center;
padding: 15px 10px;
}

/* ===================================== *\
6.2 SEARCH RESULTS
\* ===================================== */

.filterBtn {
display: none;
padding: 10px 20px;
border: 1px solid #111111;
text-align: center;
font-size: 18px;
color: #111111;
cursor: pointer;
margin-bottom: 20px;
}

.filterBtn:hover {
background: #111111;
color: #ffffff;
}

.filterBtn:hover:before {
color: #ffffff;
}

.filterBtn:before {
content: "\f1de";
font-size: 20px;
line-height: 20px;
font-family: fontAwesome;
display: inline-block;
margin-right: 10px;
color: #111111;
}

/* ==== */

.filterResultsMobile {
display: none;
position: fixed;
overflow-y: auto;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 9999999;
background: #eeeeee;
}

.filterResultsMobile.open {
display: block;
}

.filterResultsMobile .top {
padding: 40px 20px;
}

.filterResultsMobile select {
background-color: #ffffff;
}

.filterResultsMobile .bottom {
background: #ffffff;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 1000;
}

.filterResultsMobile .bottom .columns {
width: 100%;
justify-content: space-between;
padding: 20px;
}

.filterResultsMobile .bottom .columns .col {
width: 48%;
}

.filterResultsMobile .bottom .columns .col .btn {
width: 100%;
padding: 15px 10px;
}

.accordion {
display: block;
}

.accordion {
display: block;
margin-bottom: 10px;
}

.accordion.alt {
border: 1px solid #979797;
}

.accordion.alt .button,
.accordion.alt .button.open,
.accordion.alt .tab {
background-color: #F4F4F4;
}

.accordion .button {
display: inline-block;
cursor: pointer;
position: relative;
width: 100%;
padding: 15px 60px 15px 20px;
color: #231F20;
font-size: 16px;
line-height: 16px;
background: url('images/chevron-down.svg');
background-position: right 20px center;
background-repeat: no-repeat;
background-size: 12px 7px;
background-color: #ffffff;
}

.accordion .button.open {
background: url('images/chevron-up.svg');
background-position: right 20px center;
background-repeat: no-repeat;
background-size: 12px 7px;
background-color: #ffffff;
}

.accordion .tab {
display: none;
padding: 10px 20px 10px 20px;
background: #ffffff;
border: none !important;
}

.accordion .tab .checkboxes {
margin-bottom: 20px;
}

.accordion .tab .checkbox {
margin-bottom: 5px;
}

.checkbox.star .fa {
display: inline-block;
font-size: 20px;
line-height: 20px;
color: #E20613;
}

/* ===== */

.filterResults {
display: block;
width: 100%;
}

.filterResults ul {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 0 20px 0;
}

.filterResults ul li {
display: block;
cursor: pointer;
position: relative;
width: 31%;
padding: 15px 60px 15px 20px;
color: #231F20;
font-size: 16px;
line-height: 16px;
background: url('images/chevron-down.svg');
background-position: right 20px center;
background-repeat: no-repeat;
background-size: 12px 7px;
background-color: #ffffff;

box-shadow: 0px 2px 7px rgba(0,0,0,0.25) !important;
border: 6px solid #F4F4F4;
}

.filterResults ul li ul li {
box-shadow: none !important;
border: none;
}

.filterResults ul li:hover > ul {
display:block;
-webkit-animation: fadeIn 500ms;
animation: fadeIn 500ms;
}

.filterResults ul li ul {
display: none;
position: absolute;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
z-index: 999999;
top: 100%;
left: 0px;
margin: 0px;
background: #ffffff;
box-shadow: 0px 2px 8px rgba(0,0,0,0.2);
}

.filterResults ul li ul .checkboxes {
margin-bottom: 0px;
}

.filterResults ul li ul li {
cursor: auto;
padding: 15px 25px;
min-width: 340px;
background-image: none !important;
}

.filterResults ul li ul li.stars {
padding: 5px 20px;
}

.filterResults ul li ul li.stars:first-child {
padding: 15px 20px 5px 20px;
}

.filterResults ul li ul li.stars:last-child {
padding: 5px 20px 15px 20px;
}

.filterResults ul li ul li .fa-star {
display: inline-block;
font-size: 20px;
line-height: 20px;
color: #E20613;
}

.filterResultsMobile ul.searchTags li {
min-width: 0px;
margin: 0 10px 10px 0;
}

.filterSearch {
padding: 15px 20px 0 20px !important;
}

.filterSearch input[type="text"] {
margin-bottom: 0px;
border: 1px solid #999999;
padding: 15px 20px 15px 40px;
margin: 0px !important;
background: url('images/search-ico.svg');
background-position: left 10px center;
background-repeat: no-repeat;
background-size: 15px 15px;
}

ul.searchTags {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}

ul.searchTags li {
display: block;
margin: 0 10px 10px 0;
padding: 5px 10px 3px 10px;
color: #444444;
background: #ffffff;
border: 1px solid #444444;
font-size: 12px;
line-height: 12px;
}

ul.searchTags li:last-child {
background: transparent;
color: #0088F2;
cursor: pointer;
border: none;
padding: 5px 0 3px 0;
}

ul.searchTags li:last-child:hover {
color: #111111;
background: transparent;
}

ul.searchTags li .fa {
cursor: pointer;
color: #E20613;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

ul.searchTags li .fa:hover {
transform: scale(1.1,1.1);
}

.count {
font-size: 16px;
line-height: 24px;
}

/* == */

ul.results {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 40px;
row-gap: 40px;
margin-bottom: 40px;
}

ul.results li {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
}

ul.results li a {
display: block;
height: 100%;
width: 100%;
font-size: 14px;
line-height: 22px;
padding: 30px 40px;
color: #231F20;
box-shadow: 1px 1px 6px rgba(0,0,0,0.25);
}

ul.results li a:hover{
transform: scale(1.05,1.05);
box-shadow: 1px 1px 10px rgba(0,0,0,0.25);
}

ul.results li a img.shopLogo {
display: block !important;
height: 60px !important;
max-width: 100%;
margin: 0 0 30px 0;
}

.shopLogo {
display: block;
max-width: 150px;
margin: 0 20px 20px 0;
}

.shopLogo.alt {
width: 100%;
margin-bottom: 0px;
}

.shopLogo.large {
max-width: 250px;
}

.shopLogo.small {
max-width: 45px;
}

/* == */

.paginationContainer {
display: block;
text-align: right;
margin-bottom: 40px;
}

ul.pagination {
display: block;
}

ul.pagination li {
display: inline-block;
margin: 0 2px;
text-align: center;
font-size: 18px;
}

ul.pagination li.more {
display: inline-block;
padding: 10px;
}

ul.pagination li.active {
display: inline-block;
text-align: center;
padding: 10px 0;
width: 50px;
border: 2px solid #505050;
background: #505050;
color: #ffffff;
}

ul.pagination li a {
display: inline-block;
background: #ffffff;
color: #393030;
text-align: center;
padding: 10px 0;
width: 50px;
border: 2px solid #979797;
}

ul.pagination li.next a,
ul.pagination li.prev a {
width: auto;
padding: 10px 20px;
}

ul.pagination li a:hover {
border-color:#111111;
background: #111111;
color: #ffffff;
}

/* ===================================== *\
6.3 REVIEWS
\* ===================================== */

ul.reviews {
display: block;
}

ul.reviews li {
display: block;
padding-bottom: 20px;
margin-bottom: 40px;
border-bottom: 1px solid #DADADA;
}

ul.reviews li:last-child {
border-bottom: none;
margin-bottom: 0px;
}

ul.reviews li h3 {
padding-bottom: 10px;
}

ul.reviews li ul.rating {
margin-top: 20px;
}

ul.reviews li ul.rating li {
margin-bottom: 0px;
padding-bottom: 0px;
border-bottom: none;
}

#writeReview {
padding: 100px 0 0 0;
}

/* ======================= *\
6.3.1 GOOGLE REVIEWS
\* ======================= */

.googleReview {
display: block;
padding: 0 20px 20px 0px;
font-size: 14px;
line-height: 20px;
}

.googleReview .inner {
padding: 40px 60px !important;
border-bottom: none !important;
background: #ffffff;
box-shadow: 0 0px 10px 0 rgba(0,0,0,0.20);
}

.googleReview .author {
display: block;
font-weight: bold;
margin-bottom: 5px;
font-size: 16px;
line-height: 24px;
}

.googleReview ul.stars {
display: block;
margin: 0 0 10px 0 !important;
padding: 0px !important;
}

.googleReview ul.stars li {
display: inline-block;
margin-right: 1px;
width: 13px;
height: 12px;
background: url('images/star.svg');
background-size: 13px 12px;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
text-indent: -9999px;
}

.googleReview .reviewLogo {
display: block;
max-width: 100px;
}

/* ===================================== *\
6.4 PROFILE
\* ===================================== */

.subnav.alt.padding ul {
padding-left: 295px;
}

.subnav {
position: sticky;
top: 0px;
left: 0px;
z-index: 999;
display: block;
width: 100%;
background: #ffffff;
padding: 20px 0 0 0;
overflow: hidden;
}

.subnav.transparent {
background: transparent
}

.subnav.active,
main.alt .subnav {
background:#F4F4F4;
}

.subnav ul {
display: block;
max-width: 1140px;
margin: 0 auto;
overflow-x: auto;
white-space: nowrap;
}

.subnav ul:before {
content: "";
display: block;
width: 1140px;
height: 3px;
position: absolute;
bottom: 0px;
background: #F4F4F4;
}

.subnav ul li {
display: inline-block;
margin-right: 60px;
}

.subnav ul li:last-child {
margin-right: 0px;
}

.subnav ul li a {
color: #706D6E;
position: relative;
display: block;
font-size: 20px;
line-height: 30px;
padding-bottom: 20px;
}

.subnav ul li a.alt {
color: #E20613;
}

.subnav ul li.active a:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 3px;
bottom: 0px;
left: 0px;
background: #E20613;
}

.subnav ul li.active a,
.subnav ul li a:hover {
color: #231F20;
}

.intro {
display: block;
padding: 100px 0;
}

.tab {
display: block;
font-size: 16px;
line-height: 28px;
}

.tab .inner {
display: block;
width: 100%;
padding: 100px 0 50px 0;
border-bottom: 8px solid #eeeeee;
}

.tab .inner.noRule {
border-bottom: none;
}

.tab .inner.alt {
padding: 0 0 50px 0;
}

ul.profileActions {
display: block;
margin-bottom: 40px;
}

ul.profileActions li {
display: block;
margin-bottom: 10px;
}

ul.profileActions li a.btn {
display: block;
text-align: center;
width: 100%;
}

a.map,
a.hours,
a.moreDetails {
cursor: pointer;
}

a.map:before {
content: "\f041";
font-size: 16px;
margin-right: 5px;
display: inline-block;
font-family: fontAwesome;
color: #0088F2;
}

a.moreDetails:before {
content: "\2b";
font-size: 16px;
margin-right: 5px;
display: inline-block;
font-family: fontAwesome;
color: #0088F2;
}

a.phone:before {
content: "\f095";
font-size: 16px;
margin-right: 5px;
display: inline-block;
font-family: fontAwesome;
color: #0088F2;
}

a.email:before {
content: "\f0e0";
font-size: 16px;
margin-right: 5px;
display: inline-block;
font-family: fontAwesome;
color: #0088F2;
}

a.web:before {
content: "\f0ac";
font-size: 16px;
margin-right: 5px;
display: inline-block;
font-family: fontAwesome;
color: #0088F2;
}

a.hours {
margin-bottom: 20px;
}

a.hours:before {
content: "\f077";
font-size: 16px;
margin-right: 5px;
display: inline-block;
font-family: fontAwesome;
color: #0088F2;
}

.hoursContainer {
display: none;
}

a.hours.active:before {
content: "\f078";
font-size: 16px;
margin-right: 5px;
display: inline-block;
font-family: fontAwesome;
color: #0088F2;
}

ul.galleryCarousel {
margin: 20px -10px 40px -10px;
}

ul.galleryCarousel li {
margin: 0 10px;
}

ul.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 20px;
row-gap: 20px;
font-size: 16px;
line-height: 25px;
margin: 20px 0 40px 0;
}

ul.gallery li {
display: block;
margin: 0px;
}

ul.gallery li a img,
ul.galleryCarousel li a img {
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

ul.gallery li a:hover img,
ul.galleryCarousel li a:hover img {
opacity: 0.6;
}

ul.gallery li a img,
ul.galleryCarousel li a img {
display: block;
}

ul.products {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 40px;
row-gap: 20px;
font-size: 16px;
line-height: 24px;
margin: 40px 0 40px 0;
}

ul.products li {
display: block;
}

ul.products li a,
ul.productsGallery li a {
color: #231F20;
}

ul.products li a img,
ul.productsGallery li a img {
max-height: 200px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

ul.products li a:hover img,
ul.productsGallery li a:hover img {
opacity: 0.6;
}

ul.products li .image,
ul.productsGallery li .image {
display: block;
position: relative;
width: 100%;
min-height: 240px;
padding: 20px;
background: #ffffff;
border: 1px solid #cccccc;
}

ul.products li .image .promo,
ul.productsGallery li .image .promo {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
display: inline-block;
color: #ffffff;
background:#E20613;
border-radius: 10px;
padding: 5px 10px;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
}

ul.products li .image img,
ul.productsGallery li .image img {
display: block;
position: static;
z-index: 1;
max-width: 200px;
margin: 0 auto;
}

ul.products li .productDetails,
ul.productsGallery li .productDetails {
display: block;
width: 100%;
padding: 20px 0 0 0;
}

ul.products li .productDetails h3,
.ul.productsGallery li .productDetails h3 {
font-size: 14px;
line-height: 20px;
font-weight: 500;
padding-bottom: 5px;
}

.price {
display: block;
}

.price.sale {
font-weight: bold;
color: #E20613;
}

.price.previous {
color: #9F9F9F;
text-decoration: line-through;
}

.promoPrice {
display: block;
color: #E20613;
font-weight: bold;
font-size: 20px;
line-height: 20px;
padding-bottom: 40px;
}

.reviewThis {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 170px;
height: 25px;
margin-bottom: 40px;
}

.reviewThis .star {
display: block;
width: 25px;
height: 25px;
cursor: pointer;
}

.reviewThis .star.empty {
background: url('images/empty-star.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 25px 25px;
}

.reviewThis .star.fill {
background: url('images/full-star.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 25px 25px;
}

/* ===================================== *\
6.5 OVERLAY
\* ===================================== */

#overlay {
display: none;
width: 100%;
height: 100%;
position: fixed;
/* overflow-y: auto; */
top: 0px;
left: 0px;
z-index: 9999999;
opacity: 0;
transition: opacity 0.5s ease-in-out;
background: rgba(0,0,0,0.8);
}

#sendMessage {
display: none;
width: 600px;
font-size: 14px;
line-height: 22px;
transform: translate(-50%, -50%);
box-shadow: 0px 2px 20px rgba(0,0,0,0.4);
padding: 40px;
background: #ffffff;
}

#sendMessage .step {
display: none;
}

#sendMessage .step.show {
display: block;
}

#mapDirections {
display: none;
position: relative;
width: 600px;
box-shadow: 0px 2px 20px rgba(0,0,0,0.4);
padding: 120px 40px 40px 40px;
background: #ffffff;
font-size: 16px;
line-height: 28px;
}

#mapDirections.alt {
width: 960px;
}

#mapDirections.alt iframe {
width: 520px;
}

#mapDirections iframe {
display: block;
width: 100%;
min-height: 400px;
}

.closeBtn {
width: 32px;
height: 32px;
background: url('images/close-btn.svg');
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
text-indent: -999px;
overflow:hidden;
cursor: pointer;
position: absolute;
top: 40px;
right: 40px;
color: #000000;
}

.closeFilter {
width: 20px;
height: 20px;
background: url('images/close-btn.svg');
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center center;
text-indent: -999px;
overflow:hidden;
cursor: pointer;
position: absolute;
top: 45px;
right: 40px;
color: #000000;
}

#productDetails {
display: none;
width: 1140px;
background: #ffffff;
padding: 120px 40px 100px 40px;
position: absolute;
font-size: 16px;
line-height: 26px;
overflow-y: auto;
}

.productImage {
display: block;
position: relative;
z-index: 1;
width: 100%;
margin-bottom: 20px;
border: 1px solid #979797;
}

.productImage:before {
content: "";
display: block;
position: absolute;
cursor: pointer;
z-index: 5;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
background: url('images/zoom.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 30px 30px;
}

.productImage img {
display: block;
width: 100%;
}

ul.productImages {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 20px;
row-gap: 20px;
}

ul.productImages li {
display: block;
	border: 1px solid #979797;
}

ul.productImages li img {
display: block;
}

#productDetails .promo {
display: inline-block;
color: #ffffff;
margin-bottom: 10px;
background:#E20613;
border-radius: 10px;
padding: 5px 10px;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
}

#productDetails h3,
#productDetails .price {
font-size: 26px;
line-height: 30px;
padding-bottom: 10px;
}

ul.colours {
display: flex;
flex-flow: row wrap;
margin-bottom: 20px;
}

ul.colours li {
display: block;
width: 40px;
height: 40px;
margin: 0 20px 20px 0;
border-radius: 100%;
overflow: hidden;
text-indent: -999px;
}

/* ===================================== *\
6.6 BROWSE
\* ===================================== */

.browseByCategory {
display: block;
width: 100%;
padding: 60px 0;
}

.browse,
.browsePeople,
.browseDeals,
.browseRestaurant,
.browseProducts {
margin: 0 -15px 60px -15px;
}

.browse div a,
.browsePeople a,
.browseDeals a,
.browseRestaurant a,
.browseProducts .wrap {
display: block;
position: relative;
padding: 0 15px;
}

.browseRestaurant div a {
display: block;
font-size: 14px;
line-height: 150%;
color: #595959;
}

.browseRestaurant div a span {
display: block;
color: #000000;
font-size: 16px;
}

.browseRestaurant div a img {
display: block;
margin: 0 0 8px 0;
border-radius: 8px;
}

.browse div a span,
.browsePeople div a span,
.browseDeals div a span {
position: absolute;
z-index: 5;
top: 15px;
left: 0px;
padding: 0 30px;
font-size: 18px;
color: #ffffff;
text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
}

.browse div a p,
.browsePeople div a p,
.browseRestaurant div a p {
color: #231F20;
padding-top: 20px;
font-size: 16px;
line-height: 24px;
text-align: center;
}

.browseDeals div a p {
color: #231F20;
padding-top: 20px;
font-size: 16px;
line-height: 24px;
text-align: left;
}

.browse div a:hover img,
.browsePeople div a:hover img,
.browseDeals div a:hover img,
.browseRestaurant div a:hover img {
opacity: 0.8;
}

.browse div a img,
.browsePeople div a img {
display: block;
position: relative;
border-radius: 10px !important;
z-index: 1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

.browseDeals div a img {
display: block;
position: relative;
border-radius: 0px !important;
z-index: 1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
padding: 15px;
box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.25);
margin-top: 20px;
}

/* == */

.browse.alt div a {
position: static;
text-align: center;
}

.browse.alt div a span {
position: static;
display: block;
top: inherit;
left: inherit;
padding: 20px 0;
font-size: 16px;
color: #231F20;
text-shadow: none;
}

.browse.alt div a:hover img {
opacity: 0.8;
}

.browse.alt div a img {
display: block;
margin: 0 auto;
position: static;
border-radius: 0px !important;
}

/* == */

.browseFlow {
display: block;
width: 100%;
margin-bottom: 40px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}

.browseFlow.offset {
margin-left: -20px;
}

.browseFlow ul {
display: block;
overflow-y: hidden;
overflow-x: auto;
margin: 0px 0px 0px 0px;
padding: 0 0 20px 20px;
white-space: nowrap;
}

.browseFlow ul li {
display: inline-block;
vertical-align:top;
margin: 0 20px 0 0;
font-size: 14px;
line-height: 20px;
padding-top: 8px;
}

.browseFlow ul li a {
max-width: 250px !important;
display: inline-block;
position: relative;
}

.browseFlow.restaurant ul li a {
font-size: 12px;
color: #595959;
display: block;
max-width: 300px !important;
}

.browseFlow.restaurant ul li a span {
display: block;
color: #000;
font-size: 16px !important;
line-height: 125%;
position: static;
text-shadow: none;
padding: 0;
}

.browseFlow.restaurant ul li a img {
display: block;
border-radius: 8px;
margin-bottom: 8px;
}

.browseFlow ul li a span {
font-size: 6vw;
line-height: 7vw;
white-space: normal;
top: 25px;
padding: 0 20px;
position: absolute;
z-index: 5;
left: 0px;
color: #ffffff;
text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
}

.browseFlow ul li a p {
padding-top: 20px;
font-size: 4vw;
line-height: 6vw;
white-space: normal;
text-align: center;
color: #231F20;
}

.browseFlow ul li a:hover img {
opacity: 0.8;
}

.browseFlow ul li a img {
display: block;
position: relative;
border-radius: 10px;
z-index: 1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

/* == */

.browseFlow.reviews ul {
padding: 0px 20px 40px 20px;
display: flex;
flex-direction: row;
}

.browseFlow.reviews ul li {
display: block;
margin-right: 20px;
padding: 0px !important;
}

.browseFlow.reviews ul li ul.stars {
display: block !important;
}

.browseFlow.reviews ul.stars li {
display: inline-block !important;
margin-right: 1px;
}

/* == */

.browseFlow.alt ul li {
font-size: 16px;
line-height: 16px;
}

.browseFlow.alt ul li a {
max-width: 200px !important;
display: block;
margin: 0 auto;
position: static;
}

.browseFlow.alt ul li a span {
font-size: 16px;
line-height: 20px;
top: inherit;
padding: 20px 0;
display: block;
width: 100%;
text-align: center;
position: static;
left: inherit;
color: #231F20;
text-shadow: none;
}


.browseFlow.alt ul li a img {
display: block;
position: static;
z-index: inherit;
margin: 0 auto;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

.browseFlow.alt ul li a img.shadow {
padding: 15px;
margin-top: 20px;
box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.25);
border-radius: 0px;
}


.browseFlow.alt.left ul li a p {
text-align: left !important;
}

/* == */

.browseFlow.promo li,
.browseFlow.products li {
display: inline-block;
max-width: 250px;
white-space: normal !important;
}

.browseFlow.promo li p,
.browseFlow.promo li .promoPrice {
display: inline-block;
}

.browseFlow.products li a {
color: #231F20;
}

.browseFlow.products li a img {
max-height: 200px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

.browseFlow.products li a:hover img {
opacity: 0.6;
}

.browseFlow.products li .image {
display: block;
position: relative;
width: 100%;
min-height: 240px;
padding: 20px;
background: #ffffff;
border: 1px solid #cccccc;
}

.browseFlow.products li .image .promo {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
display: inline-block;
color: #ffffff;
background:#E20613;
border-radius: 10px;
padding: 5px 10px;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
}

.browseFlow.products li .image img {
display: block;
position: static;
z-index: 1;
max-width: 200px;
margin: 0 auto;
}

.browseFlow.products li .productDetails {
display: block;
width: 100%;
padding: 20px 0 0 0;
}

.browseFlow.products li .productDetails h3 {
font-size: 14px;
line-height: 20px;
font-weight: 500;
padding-bottom: 5px;
}


/* == */

ul.categories {
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 30px;
row-gap: 30px;
margin-bottom: 60px;
}

ul.categories.alt {
grid-template-columns: repeat(6, 1fr);
column-gap: 40px;
row-gap: 20px;
}

ul.categories li {
display: flex;
align-items: center;

min-width: 155px;
}

ul.categories li a {
display: block;
padding: 30px 20px;
width: 100%;
height: 100%;
border-radius: 5px;
color: #ffffff;
background: #0088F2;
text-align: center;
font-size: 16px;
line-height: 24px;
}

ul.categories li a img {
display: block;
margin: 0 auto 15px auto;
}

ul.categories li a:hover {
background: #231F20;
}

ul.categories li a:hover img {
transform: scale(1.05,1.05);
}

/* == */

.featuredShops {
display: block;
width: 100%;
position: relative;
background: rgb(68,68,68);
background: linear-gradient(180deg, rgba(68,68,68,1) 0%, rgba(68,68,68,1) 480px, rgba(255,255,255,1) 481px, rgba(255,255,255,1) 100%);
}

.featuredShops .inner {
display: block;
width: 100%;
height: 100%;
padding: 80px 0;
background: url('images/featured-shops.svg');
background-position: center top 20px;
background-repeat: no-repeat;
background-size: 1440px 460px;
}

.featuredShops h2 {
color: #ffffff;
}

.carousel {
width: 940px !important;
margin: 40px auto 60px auto;
}

.carousel.noMargin {
margin-bottom: 0px !important;
}

.carousel.dots ul.slick-dots {
display: block !important;
bottom: 20px;
}

.carousel.dots .slick-prev,
.carousel.dots .slick-next {
display: none !important;
}

.carousel .slick-dots {
display: none !important;
}

.carousel.alt {
width: 100% !important;
margin: 0px;
}

ul.highlightList {
column-gap: 0px;
margin-bottom: 0px;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 0px;
margin-bottom: 60px;
}

ul.highlightList li {
padding: 60px 20px 40px 20px;
background: #868686;
color: #ffffff;
border: none;

display: flex;
flex-flow: row wrap;
align-content: center;
font-size: 16px;
line-height: 24px;
text-align: center;
justify-content: center;
}

ul.highlightList li:nth-child(2n+2) {
background: #5F5F5F;
}

ul.highlightList li:nth-child(3n+3) {
background: #404040;
}

ul.highlightList li h3 {
font-size: 24px;
line-height: 28px;
color: #ffffff;
letter-spacing: 0px;

display: block;
width: 100%;
text-transform: uppercase;
letter-spacing: 1px;
padding-bottom: 10px;
}

ul.highlightList li p {
max-width: 360px;
}

.listingCarousel div {
padding: 0 2px;
}

.shop {
display: block;
background: #ffffff;
position: relative;
border: 8px solid #949494;
margin: 0 0 0 0;
}

.shop .columns {
height: 100%;
}

.featuredImage {
object-fit: cover;
width: 50%;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}

.details {
padding: 40px 80px;
width: 50%;
position: relative;
font-size: 16px;
line-height: 24px;
}

.details h3 {
font-size: 26px;
line-height: 28px;
padding-bottom: 10px;
}

.shopType {
display: block;
max-width: 200px;
margin-bottom: 20px;
}

ul.rating {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 140px;
margin-bottom: 16px;
}

ul.rating.noMargin {
margin-bottom: 0px;
}

ul.rating.large {
width: 235px;
max-width: 235px;
margin-bottom: 40px;
}

ul.rating.large li {
font-size: 26px;
line-height: 26px;
}

ul.rating.large li.full,
ul.rating.large li.empty {
width: 25px;
height: 25px;
background-size: 25px 25px;
}

ul.rating li {
display: block;
font-size: 16px;
line-height: 16px;
}

ul.rating li.full,
ul.rating li.empty {
width: 15px;
height: 15px;
text-indent: -999px;
overflow: hidden;
}

ul.rating li.full {
background: url('images/full-star.svg');
background-position: center center;
background-repeat: no-repeat;
}

ul.rating li.empty {
background: url('images/empty-star.svg');
background-position: center center;
background-repeat: no-repeat;

}

/* == */

.addYourShop {
display: block;
position: relative;
width: 100%;
padding: 80px 0;
font-size: 20px;
line-height: 28px;
background: #F4F4F4;
}

.addYourShop.alt {
background: #ffffff;
}

.addYourShop h2 {
font-size: 44px;
line-height: 60px;
padding: 0 0 20px 0;
}

/* == */

.featuredPeople {
display: block;
width: 100%;
padding: 80px 0 60px 0;
font-size: 20px;
line-height: 28px;
background-image: linear-gradient(180deg, #EBEBEB 0%, #FFFFFF 44%, #E2E2E2 100%);
background-color: #EBEBEB;
}

.featuredPeople h2 {
text-align: center;
padding-bottom: 60px;
}

/* == */

.featuredDeals {
display: block;
width: 100%;
padding: 80px 0 60px 0;
font-size: 20px;
line-height: 28px;
background-color: #ffffff;
}

.featuredDeals h2 {
text-align: center;
padding-bottom: 60px;
}

/* == */

ul.alphabetical {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 40px;
row-gap: 40px;
font-size: 16px;
line-height: 25px;
margin: 0px;
}

ul.alphabetical li {
font-weight: bold;
margin-bottom: 2px;
}

ul.alphabetical li a {
color: #231F20;
font-weight: normal;
}

ul.alphabetical li a:hover {
color: #E20613;
}

/* ===================================== *\
6.7 PROFESSIONAL
\* ===================================== */

.profilePhoto img {
display: block;
width: 110px;
height: 110px;
border-radius: 100%;
margin: 0 20px 20px 0;
}

.profilePhoto.alt img {
width: 100px;
}

ul.listings {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 40px;
row-gap: 30px;
margin-bottom: 60px;
}

ul.listings li {
display: block;
font-size: 16px;
line-height: 30px;
}

ul.listings li a {
color: #231F20;
}

ul.listings li h3 {
font-size: 16px;
line-height: 20px;
padding-bottom: 0px;
}

ul.listings li .image {
display: block;
position: relative;
z-index: 1;
}

ul.listings li .image .price {
position: absolute;
top: 0px;
left: 0px;
color: #ffffff;
background:#E20613;
font-size: 26px;
line-height: 30px;
padding: 10px 40px;
z-index: 5;
}

.listingStatus {
display: block;
position: absolute;
top: 0px;
right: 0px;
z-index: 6;
background-position: center center;
}

.listingStatus.forSale {
width: 149px;
height: 54px;
background: url('images/for-sale.svg');
background-size: 149px 54px;
background-repeat: no-repeat;
}

.listingStatus.sold {
width: 122px;
height: 54px;
background: url('images/sold.svg');
background-size: 122px 54px;
background-repeat: no-repeat;
}

.listingStatus.forLease {
width: 149px;
height: 54px;
background: url('images/for-lease.svg');
background-size: 149px 54px;
background-repeat: no-repeat;
}

.listingStatus.leased {
width: 131px;
height: 54px;
background: url('images/leased.svg');
background-size: 131px 54px;
background-repeat: no-repeat;
}

ul.listings li .image img {
display: block;
width: 100%;
z-index: 2;
}

.listingDetails {
display: block;
padding: 20px 0 0 0;
font-size: 16px;
line-height: 30px;
}

ul.specs {
display: flex;
flex-direction: row;
justify-content: space-between;
}

ul.specs li {
font-size: 16px;
line-height: 35px;
text-align: center;
font-weight: bold;
width: 70px !important;
}

ul.specs li span {
font-size: 14px;
line-height: 17px;
display: block;
font-weight: bold;
}

ul.specs li img {
display: inline-block;
}

.icon {
display: block;
margin-bottom: 10px;
}

.listingContainer {
display: block;
padding: 60px 0 0 0;
font-size: 16px;
line-height: 28px;
}

.columns .col.sidebar {
width: 35%;
}

.columns .col.sidebar .columns .col {
width: 48%;
}

.columns .col.body {
width: 60%;
}

.listingMap {
display: block;
width: 100%;
}

.statsBar {
display: block;
width: 100%;
padding: 40px 0;
background: #F4F4F4;
}

ul.stats {
max-width: 1140px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

ul.stats li {
display: block;
width: 32%;
height: 100%;
font-size: 16px;
line-height: 30px;
padding: 0 20px;
}

ul.stats li strong {
font-size: 22px;
}

ul.stats li p {
padding-bottom: 0px;
}

ul.stats li h3 {
font-size: 38px;
padding-bottom: 0px;
}

ul.stats li:first-child {
padding-left: 0px;
border-right: 1px solid #979797;
}

ul.stats li:last-child {
padding-right: 0px;
}

ul.stats li ul.specs {
}

ul.stats li ul.specs li {
border-right: none;
}

ul.stats li ul.specs li:last-child {
border-left: 1px solid #979797;
}

ul.affiliates {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 24px;
column-gap: 45px;
margin: 0 0 40px 0;
}

ul.affiliates li {
display: flex;
flex-direction: row;
gap: 31px;
margin: 0;
padding: 32px;
background: #FFF;
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.20);
}

ul.affiliates li .image {
display: block;
width: 130px;
height: auto;
}

ul.affiliates li .copy {
flex: 1;
font-size: 16px;
line-height: 150%;
}

ul.affiliates li .copy p {
padding-bottom: 8px;
}

ul.affiliates li .image img {
display: block;
}

ul.affiliates li h3 {
font-size: 20px;
line-height: 125%;
padding-bottom: 8px;
}

ul.affiliates li h3 span {
font-size: 14px;
line-height: 125%;
}

ul.affiliates li .columns {
width: 100%;
justify-content: space-between;
}

ul.affiliates li .btn {
font-size: 13px;
padding: 12px 24px;
}

ul.affiliates li .tag {
display: inline-block;
color: #ffffff;
background: #0088F2;
border-radius: 6px;
padding: 4px 8px;
font-size: 12px;
line-height: 12px;
}

ul.affiliates li .tag.green {
background: #00AC11;
}

ul.affiliates li .tag.green.sale {
padding: 6px 8px 6px 36px;
background: url('images/ico-sale.svg');
background-position: left 8px center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-color: #00AC11;
}

/* ===================================== *\
6.8 NEIGHBOURHOODS
\* ===================================== */

body.neighbourhoods .hero {
padding: 40px 0 20px 0;
background:#F4F4F4;
}

body.neighbourhoods main {
padding: 0px;
}

ul.neighbourhoodList {
display: block;
margin: 0px;
text-align: center;
}

ul.neighbourhoodList li {
display: inline-block;
margin: 0 10px 20px 10px;
}

ul.neighbourhoodList li a {
display: block;
color: #444444;
background: #ffffff;
border-radius: 20px;
padding: 10px 20px;
font-size: 16px;
line-height: 16px;
cursor: pointer;
}

ul.neighbourhoodList li.active a,
ul.neighbourhoodList li a:hover {
color: #ffffff;
background: #E20613;
}

ul.neighbourhoodListings {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 10px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}

ul.neighbourhoodListings li {
display: block;
box-shadow: 1px 1px 6px rgba(0,0,0,0.25);
position: relative;
}

ul.neighbourhoodListings li .inner {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: rgba(255,255,255,0.85);
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

ul.neighbourhoodListings li:hover > .inner {
opacity: 1;
}

ul.neighbourhoodListings li .inner .neighbourhoodTag {
display: block;
position: absolute;
top: 20px;
left: 20px;
background:#eeeeee;
color: #444444;
font-size: 16px;
line-height: 16px;
border-radius: 20px;
padding: 8px 15px;
}

ul.neighbourhoodListings li .inner .neighbourhoodTag:hover {
color: #ffffff;
background: #E20613;
}

ul.neighbourhoodListings li .inner .middle {
width: 100%;
padding: 50px 20px 0px 20px;
top:50%;
left:inherit;
transform:translate(0,-50%);
-ms-transform:translate(0,-50%)
}

ul.neighbourhoodListings li .inner ul.rating li {
box-shadow: none;
}

ul.neighbourhoodListings li .inner .galleryBtn {
display: inline-block;
width: 42px;
height: 42px;
margin: 0 auto;
}

ul.neighbourhoodListings li .inner h3 {
padding-bottom: 10px;
font-weight: normal;
}

ul.neighbourhoodListings li .inner p {
font-size: 14px;
line-height: 22px;
}

ul.neighbourhoodListings li img {
display: block;
width: 100%;
}

/* ===================================== *\
6.9 SPOTLIGHT
\* ===================================== */

body.spotlight .hero {
padding: 60px 0 20px 0;
border-top: 1px solid #cccccc;
}

body.spotlight .hero p {
font-weight: 400;
}

body.spotlight main {
padding: 0 0 60px 0;
}

body.spotlight .hero.profile {
padding: 60px 0 40px 0;
}

.byline {
font-size: 16px;
line-height: 20px;
}

.byline ul.share {
display: inline-block;
padding-bottom: 20px;
}

.byline ul.share li {
font-size: 25px;
line-height: 25px;
display: inline-block;
margin-left: 40px;
}

/* === */

ul.spotlightResults {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 10px;
margin: 0 0 60px 0;
}

ul.spotlightResults li {
display: block;
box-shadow: 1px 1px 6px rgba(0,0,0,0.25);
position: relative;
}

ul.spotlightResults li .inner {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
padding: 40px 20px;
background: rgba(255,255,255,0.85);
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

ul.spotlightResults li:hover > .inner {
opacity: 1;
}

ul.spotlightResults li .inner .spotlightTitleOverlay {
display: block;
font-size: 24px;
line-height: 30px;
margin-bottom: 20px;
}

ul.spotlightResults li .inner p {
font-size: 16px;
line-height: 24px;
max-width: 500px;
}

ul.spotlightResults li {
display: block;
position: relative;
box-shadow: 1px 1px 6px rgba(0,0,0,0.25);
}

ul.spotlightResults li img {
display: block;
width: 100%;
}

ul.spotlightResults li .spotlightTitle {
display: block;
width: 100%;
font-size: 24px;
line-height: 30px;
color: #ffffff;
padding: 40px 40px 80px 40px;
background-image: linear-gradient(180deg, #000000 16%, rgba(0,0,0,0.00) 100%);
text-shadow: 0 2px 4px rgba(0,0,0,0.5);

position: absolute;
top: 0px;
left: 0px;
}

ul.spotlightResults li:hover > .spotlightTitle {
opacity: 0;
}

ul.spotlightResults li .inner .btn {
cursor: pointer;
}

/* ==== ENTRY CONTENT ==== */

.entry-content > * {
margin: 0px auto;
max-width: 750px;
font-family: 'Esteban', serif;
}

.entry-content > .alignwide {
margin: 0 auto 40px auto;
max-width: 1140px;
}

.entry-content > .alignfull {
margin: 40px 0;
max-width: 100%;
}

.entry-content blockquote {
max-width: 880px;
margin: 20px auto 40px auto;
font-family: 'Montserrat', sans-serif;
}

.entry-content .videoContainer {
display: block;
width: 100%;
max-width: 940px;
margin: 40px auto;
position: relative;
overflow: hidden;
padding-bottom: 28%;
}

.entry-content .videoContainer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

.entry-content .columns {
max-width: 1140px;
margin: 20px auto 0 auto;
}

.entry-content .columns .col figure {
margin: 0px 0px 40px 0px;
}

.entry-content .columns .col.half {
width: 48.5%;
}

.entry-content figure figcaption,
.entry-content h2,
.entry-content h3 {
font-family: 'Montserrat', sans-serif;
}

/* ===================================== *\
6.10 PRODUCTS
\* ===================================== */

.filterBtnSlideOut {
display: inline-block;
padding: 10px 40px;
border: 1px solid #666666;
text-align: center;
font-size: 18px;
color: #000000;
cursor: pointer;
margin-bottom: 20px;
}

.filterBtnSlideOut:hover {
background: #000000;
border-color: #000000;
color: #ffffff;
}

.filterBtnSlideOut:hover:before {
color: #ffffff;
}

.filterBtnSlideOut:before {
content: "\f1de";
font-size: 20px;
line-height: 20px;
font-family: fontAwesome;
display: inline-block;
margin-right: 10px;
color: #000000;
}

/* ==== */

.filterResultsSlideout {
display: block;
min-width: 600px;
position: fixed;
top: 0px;
left: -640px;
bottom: 0px;
background: #ffffff;
padding: 0px;
z-index: 999999;
box-shadow: 10px 0px 20px rgba(0,0,0,0.4);
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}

.filterResultsSlideout.open {
left: 0px;
}

.filterResultsSlideout .top {
display: block;
height: 100%;
padding: 40px 40px 100px 40px;
overflow-y: auto;
position: relative;
}


.filterResultsSlideout .bottom {
position: absolute;
padding: 20px;
bottom: 0px;
left: 0px;
width: 100%;
height: 90px;
background: #ffffff;
box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
}

.filterResultsSlideout .bottom .columns .col {
width: 48%;
}

.filterResultsSlideout .bottom .columns .col .btn {
min-width: 0px;
width: 100%;
padding: 15px;
}

.filterResultsSlideout select {
border: 1px solid #979797;
}

.filterResultsSlideout .accordion .tab .checkbox {
margin-bottom: 0px;
}

/* ======================= *\
6.3.1 PRODYCT CATEGORIES
\* ======================= */

ul.largeProductCat {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 30px;
column-gap: 30px;
margin: 0px 0 30px 0 !important;
}

ul.largeProductCat li {
display: block;
margin: 0px !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}

ul.largeProductCat li a {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
width: 100%;
height: auto;
min-height: 330px;
background: rgba(0,0,0,0.6);
color: #ffffff;
text-decoration: none;
}

ul.largeProductCat li a:hover {
background: rgba(0,0,0,0.2);
}

ul.largeProductCat li a .subhead {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1.5px;
display: block;
padding-bottom: 5px;
font-size: 14px;
line-height: 24px;
}

ul.largeProductCat li a .cat {
font-size: 24px;
line-height: 32px;
}

<!-- -->

ul.smallProductCat {
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 30px;
column-gap: 30px;
margin: 0px 0 30px 0 !important;
}

ul.smallProductCat li {
display: block;
margin: 0px !important;
}

ul.smallProductCat li a {
display: block;
color: #231F20;
font-weight: bold;
}

ul.smallProductCat li a:hover img {
transform: scale(1.05,1.05)
}

ul.smallProductCat li a img {
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

ul.smallProductCat li a .cat {

}

/* ===================================== *\
6.11 SERVICES
\* ===================================== */

ul.services {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 40px;
row-gap: 40px;
margin: 20px 0 60px 0;
}

ul.services li {
display: block;
position: relative;
overflow: hidden;
}

ul.services li a {
color: #ffffff;
}

ul.services li a:hover img {
transform: scale(1.1,1.1);
}

ul.services li img {
display: block;
width: 100%;
height: auto;
margin-bottom: 20px;
overflow: hidden;

display: block;
width: 100%;
position: static;
z-index: 1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

ul.services li div {
display: block;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
padding: 30px 20px 60px 20px;
z-index: 5;
font-size: 20px;
line-height: 24px;
letter-spacing: 1px;
color: #ffffff;
text-shadow: 0px 2px 4px rgba(0,0,0,0.5);
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}

ul.services li .btn {
display: block;
text-align: center;
width: 100%;
}

/* ===================================== *\
6.12 TEAM
\* ===================================== */

ul.team {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 40px;
row-gap: 60px;
margin: 30px 0 20px 0;
}

ul.team li {
margin: 0px;
}

ul.team li .columns {
align-items: center;
}

ul.team li a {
color: #E20613;
}

ul.team li a:hover {
color: #0088F2;
}

/* ===================================== *\
6.13 RESTAURANT
\* ===================================== */

.restaurantLogo {
display: block;
max-width: 160px;
margin-right: 24px;
}

ul.restaurantDetails {
display: block;
margin: 0;
}

ul.restaurantDetails li {
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
padding-left: 30px;
background-size: 24px 24px !important;
background-repeat: no-repeat !important;
background-position: left top 2px !important;
}

ul.restaurantDetails li.location {
background: url('images/ico-location.svg');
}

ul.restaurantDetails li.call {
background: url('images/ico-call.svg');
}

ul.restaurantDetails li.time {
background: url('images/ico-hours.svg');
}

.toggleContainer {
display: flex;
align-items: center;
gap: 4px;
border: 3px solid #B8B8B8;
overflow: hidden;
border-radius: 8px;
background: #ECECEC;
padding: 4px;
margin-bottom: 16px;
}

.toggleContainer.short {
margin-bottom: 0;
}

.toggleContainer.short .toggleLabel {
padding: 2px 16px;
}

.toggleContainer .toggleLabel {
flex: 1;
display: block;
text-align: center;
padding: 12px 0px;
cursor: pointer;
background-color: transparent;
color: #4C4C4C;
font-size: 12px;
line-height: 100%;
font-weight: bold;
transition: background-color 0.3s;
border-radius: 6px;
text-transform: uppercase;
font-weight: bold !important;
margin: 0px;
}

.toggleContainer .toggleLabel:hover {
background-color: rgba(255,255,255,0.6);
}

.toggleContainer .toggleSubtext {
text-align: center;
display: block;
width: 100%;
font-size: 14px;
text-transform: none !important;
line-height: 125% !important;
display: block;
color: #4C4C4C;
font-weight: normal;
white-space: nowrap;
}

.toggleContainer input[type="radio"]:before,
.toggleContainer input[type="radio"] + label:before,
.toggleContainer input[type="radio"] + label:after {
display: none;
}

.toggleContainer input[type="radio"] {
display: none;
}

.toggleContainer input[type="radio"]:checked + label {
background-color: #ffffff;
color: #000000;
}

/* == */

.btn.ghost.scheduleBtn,
.btn.ghost.deliveryBtn {
background-color: #ffffff;
font-size: 12px;
font-weight: bold;
margin-bottom: 16px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

.btn.ghost.scheduleBtn:before {
content: "";
display: block;
width: 24px;
height: 24px;
margin-right: 4px;
background: url('images/ico-location-grey.svg');
background-size: 24px 24px;
background-repeat: no-repeat;
}

.btn.ghost.deliveryBtn:before {
content: "";
display: block;
width: 24px;
height: 24px;
margin-right: 4px;
background: url('images/ico-schedule-grey.svg');
background-size: 24px 24px;
background-repeat: no-repeat;
}

.btn.ghost.scheduleBtn:hover:before {
content: "";
display: block;
width: 24px;
height: 24px;
margin-right: 4px;
background: url('images/ico-schedule-white.svg');
background-size: 24px 24px;
background-repeat: no-repeat;
}

.btn.ghost.deliveryBtn:hover:before {
content: "";
display: block;
width: 24px;
height: 24px;
margin-right: 4px;
background: url('images/ico-location-white.svg');
background-size: 24px 24px;
background-repeat: no-repeat;
}

/* === */

ul.restaurantGrid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 24px;
margin: 0 0 48px 0;
padding-bottom: 48px;
border-bottom: 8px solid #F4F4F4;
}

ul.restaurantGrid li {
display: block;
margin: 0;
height: 100%;
}

.restaurantCard {
display: flex;
flex-direction: row;
gap: 32px;
width: 100%;
height: 100%;
padding: 32px;
background: #ffffff;
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.20);
}

.restaurantCard .btn {
display: block;
font-size: 12px;
line-height: 100%;
padding: 12px 24px;
font-weight: bold;
min-width: 0;
}

.restaurantImage {
display: block;
position: relative;
width: 28%;
}

.restaurantImage .btn {
display: none;
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
}

.restaurantImage img {
display: block;
width: 100%;
position: static;
z-index: 1;
}

.restaurantDetails {
display: block;
width: 100%;
font-size: 16px;
line-height: 26px;
font-weight: normal;
}

.restaurantDetails .title {
display: block;
font-size: 20px;
line-height: 30px;
padding-bottom: 12px;
}

.restaurantDetails p {
padding-bottom: 16px;
}

.restaurantDetails .promo {
color: #00AC11;
display: block;
margin-top: 8px;
}

.restaurantDetails .columns {

}

.restaurantDetails .price {
display: block;
font-size: 20px;
font-weight: 600;
}

/* Half */

ul.restaurantGrid.half {
grid-template-columns: repeat(2, 1fr);
}

ul.restaurantGrid.half {
grid-template-columns: repeat(2, 1fr);
}

ul.restaurantGrid.half .restaurantCard {
flex-flow: row-reverse;
}

ul.restaurantGrid.half .restaurantImage {
width: 50%;
}

ul.restaurantGrid.half .restaurantImage .btn {
position: static;
margin-top: 24px;
width: 100%;
text-align: center;
display: block;
}

ul.restaurantGrid.half .restaurantCard.hasImage .restaurantDetails .btn {
display: none;
}

/* Third */

ul.restaurantGrid.third {
grid-template-columns: repeat(3, 1fr);
}

ul.restaurantGrid.third .restaurantCard {
flex-direction: column;
gap: 16px;
}

ul.restaurantGrid.third .restaurantImage {
width: 100%;
}

ul.restaurantGrid.third .restaurantImage .btn {
display: block;
}

ul.restaurantGrid.third .restaurantDetails {
font-size: 14px;
line-height: 22px;
}

ul.restaurantGrid.third .restaurantDetails .title {
font-size: 16px;
line-height: 26px;
padding-bottom: 8px;
}

/* Third */

ul.restaurantGrid.fourth {
grid-template-columns: repeat(4, 1fr);
}

ul.restaurantGrid.fourth .restaurantCard {
flex-direction: column;
gap: 16px;
}

ul.restaurantGrid.fourth .restaurantImage {
width: 100%;
}

ul.restaurantGrid.fourth .restaurantImage .btn {
display: block;
}

ul.restaurantGrid.fourth .restaurantDetails {
font-size: 14px;
line-height: 22px;
}

ul.restaurantGrid.fourth .restaurantDetails .title {
font-size: 16px;
line-height: 26px;
padding-bottom: 8px;
}

ul.restaurantGrid.fourth .restaurantDetails .columns {
display: block;
}

ul.restaurantGrid.fourth .restaurantDetails .columns .btn {
display: inline-block;
width: auto;
margin-top: 16px;
}

/* ALT */

ul.restaurantGrid.alt {
margin-bottom: 0;
border-bottom: none;
}

/* ===== MENU CAROUSEL ==== */

.menuCarouselContainer {
overflow: hidden;
position: relative;
width: 100%;
}

.menuCarouselContainer::before {
content: "";
display: block;
width: 20px;
height: 100%;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
}

.menuCarouselContainer::after {
content: "";
display: block;
width: 20px;
height: 100%;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
position: absolute;
top: 0px;
right: 0px;
z-index: 100;
}

.fullMenuBtn {
display: block;
width: 40px;
height: 40px;
background: url('images/ico-restaurant-menu-btn.svg');
cursor: pointer;
text-indent: -999999px;
overflow: hidden;
background-size: 40px 40px;
background-position: center center;
background-repeat: no-repeat;
}

.flyOut {
display: none;
position: absolute;
top: -24px;
left: 48px;
z-index: 500;
width: 300px;
border-radius: 16px;
background: #ffffff;
padding: 24px;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.40);
}

.flyOut.open {
display: block;
}

.flyOut .close {
display: block;
width: 16px;
height: 16px;
background: url('images/close-btn.svg');
background-size: 16px 16px;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
overflow: hidden;
text-indent: -999px;
}

.flyOut .close:hover {
transform: scale(1.1,1.1);
}

.flyOut .title {
display: block;
font-size: 20px;
line-height: 30px;
color: #000000;
font-weight: bold;
padding-bottom: 4px;
}

.flyOut p {
display: block;
font-size: 14px;
line-height: 22px;
color: #595959;
padding-bottom: 16px;
}

.flyOut ul {
display: block;
padding: 16px 0 0 0;
border-top: 3px solid #F4F4F4;
margin: 0;
}

.flyOut ul li {
display: block;
margin: 0;
}

.flyOut ul li a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 14px;
line-height: 22px;
padding: 6px 0;
background: #ffffff;
color: #595959;
}

.flyOut ul li a span {
display: block;
}

.flyOut ul li a:hover {
background: #F4F4F4;
}

.flyOut ul li a:hover span {
color: #E20613;
}

.flyOut ul li a:hover span:last-child {
color: #595959;
}

.fullMenuBtn:hover {
transform: scale(1.1,1.1);
}

.carouselList {
display: flex;
gap: 48px;
transition: transform 0.5s ease-in-out;
}

.carouselItem {
box-sizing: border-box;
font-size: 20px;
line-height: 30px;
padding: 0 0 6px 0;
border-bottom: 3px solid transparent;
white-space: nowrap;
}

.carouselItem:first-child {
margin-left: 20px;
}

.carouselItem a {
color: #231F20;
opacity: 0.65
}

.carouselItem.active {
border-bottom: 3px solid #E20613;
}

.carouselItem.active a {
opacity: 1;
}

.carouselItem a:hover {
opacity: 1;
}

/* === */

.carouselList.alt {
gap: 16px;
margin-bottom: 32px;
}

.carouselList.alt .carouselItem {
font-size: 14px;
line-height: 24px;
color: #000000;
text-align: center;
border-bottom: none;
padding: 0;
width: 90px;
}

.carouselList.alt .carouselItem a {
color: #000000;
width: 90px;
opacity: 1;
}

.carouselList.alt .carouselItem a span {
display: block;
width: 90px;
}

.carouselList.alt .carouselItem img {
display: block;
width: 72px !important;
height: 72px !important;
margin: 0 auto 6px auto;
}

.carouselList.alt .carouselItem a:hover {
color: #E20613;
}

.carouselList.alt .carouselItem a:hover img {
opacity: 0.6;
}

/* === */

.arrow {
cursor: pointer;
text-indent: -999999px;
overflow: hidden;
display: block;
width: 12px;
height: 17px;
}

.arrow.alt {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #F4F4F4;
}

.arrow-left:hover {
transform: scale(1.1,1.1) translateX(-2px);
}

.arrow-right:hover {
transform: scale(1.1,1.1) translateX(2px);
}

.arrow-left {
background: url('images/ico-left-chevron.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 10px 17px;
}

.arrow-right {
right: 0px;
background: url('images/ico-right-chevron.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 10px 17px;
}

/* == MENU SLIDEOUT == */

@keyframes slideIn {
from {
	right: -540px;
}
to {
	right: 0;
}
}

.slideOut {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 540px;
height: 100%;
background: #F4F4F4;
position: absolute;
top: 0px;
right: -100%;
color: #595959;
padding-bottom: 0px;
}

.slideOut.open {
right: 0;
animation: slideIn 0.4s ease-in-out;
}

.slideOut .inner {
    display: block;
    background: #ffffff;
    padding: 24px 24px 32px 24px;
    overflow-y: auto;
}

.slideOut .title {
font-size: 24px;
line-height: 30px;
color: #000000;
font-weight: bold;
}

.slideOut .closeBtn {
display: block;
position: static;
width: 32px;
height: 32px;
background: url('images/close-btn.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 32px 32px;
overflow: hidden;
text-indent: -999999px;
cursor: pointer;
}

.slideOut .close:hover {
transform: scale(1.1,1.1);
}

.slideOut .delivery {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 16px;
align-items: center;
width: 100%;
padding: 16px;
background: #F4F4F4;
align-items: center;
font-size: 16px;
color: #000000;
margin: 0 0 24px 0;
}

.slideOut .delivery .columns {
justify-content: flex-start;
gap: 16px;
align-items: center;
}

.slideOut .delivery img {
display: block;
max-width: 64px;
}

.slideOut .delivery .small {
display: block;
font-size: 14px;
line-height: 22px;
color: #595959;
}

.slideOut .delivery .company {
font-size: 20px;
}

.slideOut ul {
display: block;
}

.slideOut ul li {
display: block;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 5px solid #F4F4F4;
}

.slideOut ul li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

.slideOut .cartProduct {
display: flex;
flex-direction: row;
gap: 16px;
}

.slideOut .cartProduct .image {
display: block;
max-width: 64px;
}

.slideOut .cartProduct .details {
display: block;
padding: 0 16px 0 0;
color: #595959;
font-size: 14px;
width: 100%;
}

.slideOut .cartProduct .details .title {
display: block;
color: #000000;
font-size: 16px;
line-height: 150%;
margin-bottom: 4px;
}

.slideOut .cartProductRight {
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: right;
}

.slideOut .cartProductRight .price {
color: #000000;
font-size: 20px;
padding-bottom: 12px;
}

.slideOut .topBar {
display: block;
width: 100%;
background: #ffffff;
padding: 16px 24px;
}

.slideOut .bottomBar {
display: block;
/*position: sticky;
bottom: 0;
left: 0;
z-index: 5;*/
width: 100%;
height: 100px;

background: #ffffff;
padding: 24px;
box-shadow: 0px -2px 16px 0px rgba(0, 0, 0, 0.25);
}

.slideOut .bottomBar.open {
/* right: 0px; */
}
.slideOut .bottomBar{
    position:absolute;bottom:0;
}
.slideOut .bottomBar .btn {
display: inline-block;
min-width: 0;
width: auto;
}

/* ===================================== *\
6.13.1 RESTAURANT SEARCH
\* ===================================== */

.hero.searchRestaurant {
background:
	linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 56.2%),
	url("images/restaurant-search-hero.jpg");
background-size:
	100% auto,
	cover !important;
background-position:
	bottom center,
	center center !important;
background-repeat: no-repeat !important;
background-color: #F4BB09 !important; 
padding: 120px 0;
text-align: center !important;
color: #000000 !important;
}

.hero.searchRestaurant h1 {
padding-bottom: 8px;
}

.search.simple {
box-shadow: none !important;
margin: 10px auto 20px auto;
border-radius: 0;
width: 720px;
border: none;
}

.search.simple form {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 24px;
}

.search.simple form input[type="text"] {
margin: 0px;
display: block;
width: 100%;
flex: 1;
border: 1px solid #DADADA;
background: url('images/search-ico.svg');
background-position: left 20px center;
background-repeat: no-repeat;
background-size: 24px 24px !important;
background-color: #ffffff;
padding-left: 60px;
}

.search.simple form input[type="submit"] {
display: block;
width: auto;
text-align: center;
border-radius: 6px !important;
}

.locationFlyOut {
display: block;
position: relative;
}

.locationFlyOut .label {
display: inline-block;
color: #0088F2;
font-size: 14px;
background:
	url('images/ico-pin.svg'),
	url('images/ico-down-chevron-blue.svg');
background-position:
	left center,
	right center;
background-repeat: no-repeat;
background-size:
	24px 24px,
	24px 24px;
display: block;
padding: 0 30px;
cursor: pointer;
}

.locationFlyOut .flyout {
display: none;
position: absolute;
top: -40px;
left: 30px;
z-index: 900;
width: 430px;
background: #ffffff;
border-radius: 8px;
padding: 32px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.locationFlyOut .flyout .close {
display: block;
position: absolute;
top: 32px;
right: 32px;
width: 16px;
height: 16px;
background: url('images/ico-close.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 16px 16px;
cursor: pointer;
overflow: hidden;
text-indent: -999999px;
}

.locationFlyOut .flyout .close:hover {
transform: scale(1.1,1.1);
}

.locationFlyOut .flyout .title {
font-size: 20px;
display: block;
padding-bottom: 10px;
}

.locationFlyOut .flyout .inputWrapper {
position: relative;
}

.locationFlyOut .flyout .inputWrapper .clear {
display: block;
position: absolute;
top: 50%;
right: 16px;
z-index: 2;
cursor: pointer;
width: 10px;
height: 10px;
background: url('images/ico-close-small.svg');
background-size: 10px 10px;
background-repeat: no-repeat;
overflow: hidden;
text-indent: -999px;
transform: translateY(-50%);
}

.locationFlyOut .flyout input[type="text"] {
display: block;
width: 100%;
border: 4px solid #DADADA;
background: url('images/ico-pin-grey.svg');
background-position: left 16px center;
background-repeat: no-repeat;
background-size: 24px 24px;
padding-left: 48px;
padding-right: 48px;
}

.locationFlyOut .flyout input[type="submit"] {
display: block;
width: 100%;
}

ul.filters {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 8px;
}

ul.filters li {
display: block;
font-size: 16px;
line-height: 100%;
}

ul.filters li a {
display: block;
font-size: 14px;
padding: 6px 12px;
border-radius: 8px;
color: #000000;
background: #F4F4F4;
border: 1px solid #595959;
}

ul.filters li.active a,
ul.filters li a:hover {
background: #595959;
color: #ffffff;
}

ul.filters li.disabled a {
cursor: auto;
opacity: 0.4;
}

ul.filters li.disabled a:hover {
cursor: auto;
opacity: 0.4;
color: #000000;
background: #F4F4F4;
}

ul.filters li a.clear {
border: none;
background: transparent;
padding: 0 8px;
border-radius: 0;
color: #E20613;
text-decoration: underline;
}

ul.filters li a.clear:hover {
text-decoration: none;
}

.restaurantItem {
display: block;
font-size: 14px;
font-weight: normal;
color: #595959;
}

ul.storeTags {
display: flex;
flex-direction: row;
gap: 6px;
justify-content: flex-start;
margin-top: 8px;
}

ul.storeTags li {
display: flex;
flex-direction: row;
align-items: center;
}

.restaurantCard ul.storeTags li,
.storeCategory ul.storeTags li {
padding: 6px 8px;
color: #000000;
background: #DADADA;
font-size: 12px;
line-height: 125%;
border-radius: 6px;
}

ul.storeTags li.discount {
background: url('images/ico-tag-white.svg');
background-position: left 8px center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-color: #00AC11;
color: #ffffff;
padding: 6px 8px 6px 36px;
}

ul.storeTags li.high-stock {
background-color: #0088F2;
color: #ffffff;
}

.restaurantItem img {
display: block;
border-radius: 8px;
margin-bottom: 8px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

.restaurantItem span {
display: block;
color: #000000;
display: block;
font-size: 16px;
}

.restaurantItem:hover img {
display: block;
opacity: 0.6;
}

ul.storeTags {
display: flex;
flex-flow: row wrap;
gap: 16px;
margin-bottom: 32px;
}

ul.storeTags li {
display: block;
}

ul.storeTags li a {
display: flex;
flex-direction: row;
gap: 6px;
padding: 4px 16px;
font-size: 14px;
color: #000000;
align-items: center;
border-radius: 16px;
border: 1px solid #DADADA;
background: linear-gradient(180deg, rgba(250, 250, 250, 0.60) 0%, #F1EEEE 97%);
}

ul.storeTags li a:hover {
background: linear-gradient(0deg, rgba(250, 250, 250, 0.60) 0%, #F1EEEE 97%);
}

.storeCategory {
display: flex;
flex-direction: column;
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.20);
border-radius: 8px;
background: #ffffff;
padding: 16px;
height: 100%;
font-size: 14px;
color: #595959;
font-weight: normal;
}

.storeCategory:hover {
transform: scale(1.1,1.1);
box-shadow: 0 1px 12px 0px rgba(0,0,0,0.2);
}

.storeCategory .storeTags {
margin-bottom: 0;
}

.storeCategory span {
color: #000000;
font-size: 16px;
display: block;
}

.layeredGrid {
display: block;
padding: 0 0 80px 0;
}

.layeredGrid .content {
display: block;
}

.layeredGrid .content .row {
display: flex;
flex-direction: row;
align-items: center;
margin-top: -52px;
}

.layeredGrid .content .row .copy {
display: block;
padding: 24px 24px 24px 96px;
font-size: 16px;
line-height: 150%;
width: 45%;
}

.layeredGrid .content .row .image {
display: block;
width: 55%;
}

.layeredGrid .content .row .image img {
display: block;
width: 100%;
}

.layeredGrid .content .row:first-child {
margin-top: 0;
}

.layeredGrid .content .row:nth-child(even) {
flex-direction: row-reverse;
}

.layeredGrid .content .row:nth-child(even) .copy {
padding: 24px 0px 24px 96px;
}

.layeredGrid .content .row:nth-child(even) .image {
box-shadow: 8px 6px 24px 0px rgba(0, 0, 0, 0.25);
}

/* ===================================== *\
6.13.2 GROCER
\* ===================================== */

.serviceType {
display: block;
background-color: #DADADA;
padding: 16px;
color: #000000;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
}

.serviceType.pickup {
padding: 8px 16px 8px 44px;
background: url('images/ico-pickup.svg');
background-position: left 16px center;
background-repeat: no-repeat;
background-size: 24px 24px;
background-color: #DADADA;
}

.serviceType.delivery {
padding: 8px 16px 8px 44px;
background: url('images/ico-delivery.svg');
background-position: left 16px center;
background-repeat: no-repeat;
background-size: 24px 24px;
background-color: #DADADA;
}

.browseProducts .slick-list {
padding: 10px 0;
}

.browseProducts .wrap {
display: block;
position: relative;
padding: 0 15px;
}

.restaurantCard.alt {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 450px;
}

.restaurantCard.alt .restaurantImage {
width: 100%;
}

.restaurantCard.alt .restaurantImage .btn {
display: block;
top: 0;
right: 0;
}

.restaurantDetails .title {
font-size: 16px;
padding-bottom: 0;
}

.restaurantDetails .title p {
font-size: 14px;
padding-bottom: 8px;
}

.restaurantDetails ul.storeTags,
.storeCategory ul.storeTags {
gap: 8px;
margin: 0 0 16px 0;
}

.restaurantDetails ul.storeTags li,
.storeCategory ul.storeTags {
margin: 0;
}

.restaurantDetails .price {
font-size: 20px;
}

.restaurantDetails .price.small {
font-size: 14px;
color: #595959;
}

/* ========================================================================== *\
7. GENERAL CLASSES
\* ========================================================================== */

.noscroll {
overflow: hidden;
}

.mobile,
.rule.mobile {
display: none;
}

.hidden {
display: none;
}

.relative {
position: relative;
}

.callout {
display: block;
background:#F4F4F4;
padding: 40px 30px;
}

.expand {
cursor: pointer;
}

.expandMore {
display: none;
}

.clear {
clear:both;
}

.clear.sm {
height: 20px;
}

.clear.md {
height: 40px;
}

.clear.lg {
height: 60px;
}

.clear.xl {
height: 80px;
}

.inline {
display: inline-block;
}

.stickyBtn {
display: none;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
z-index: 9999;
background: #ffffff;
padding: 10px 20px;
box-shadow: 0 -5px 20px rgba(0,0,0,0.4);
}

.stickyBtn .btn {
display: block;
text-align: center;
padding: 15px 20px;
}

.simpleBtn {
color: #000000;
font-weight: bold;
text-decoration: none;
display: inline-block;
padding: 8px 20px 8px 0;
background: url('images/ico-right-chevron.svg');
background-position: right center;
background-repeat: no-repeat;
background-size: auto 16px;
cursor: pointer;
}

.simpleBtn:hover {
background: url('images/ico-right-chevron.svg');
background-position: right 4px center;
background-repeat: no-repeat;
background-size: auto 16px;
}

.btn {
display: inline-block;
color: #ffffff;
font-size: 16px;
line-height: 16px;
min-width: 250px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
padding: 15px 40px;
background:#E20613;
border: 2px solid #E20613;
border-radius: 5px;
cursor: pointer;
}

.btn:hover {
background-color: #231F20;
border-color: #231F20;
color: #ffffff;
}

.btn.ghost {
background: transparent;
color: #231F20;
border-color: #231F20;
}

.btn.ghost:hover {
background: #231F20;
color: #ffffff;
}

.btn.ghost.alt {
border-color: #E20613;
color:#E20613;
}

.btn.ghost.alt:hover {
border-color: #E20613;
background: #E20613;
color: #ffffff;
}

.btn.small {
text-transform: none;
font-size: 16px;
line-height: 125%;
padding: 16px 32px;
}

.btn.xsmall {
font-size: 12px;
line-height: 100%;
padding: 6px 12px;
margin: 0 8px;
text-transform: none;
}

.rule {
display: block;
width: 100%;
clear: both;
margin-bottom: 40px;
height: 20px;
border-bottom: 1px solid #DADADA;
}

.rule.thick {
border-width: 8px;
margin-top: 20px;
border-color: #eeeeee;
}

.rule.thick.alt {
border-color: #ffffff;
}

.red {
color: #E20613;
}

.green {
color: #00AC11;
}

.grey {
color: #595959;
}

.middle {
width:75%;
transition:.5s ease;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%)
}

.center {
text-align: center;
}

.right {
text-align: right;
}

.content {
width: 1140px;
margin: 0px auto;
}

.narrow {
width: 720px;
margin: 0 auto;
}

.extraNarrow {
width: 640px;
margin: 0 auto;
}

.columns {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.columns .col {
display: block;
}

.columns.centerV {
align-items: center;
}

.columns.start {
justify-content: flex-start;
}

.columns.end {
justify-content: flex-end;
}

.columns.centerV .col h3 {
padding-bottom: 0px;
}

.columns.half .col {
width: 48% !important;
}

.col.twoThird {
width: 65%;
}

.col.oneThird {
width: 30%;
}

.one_half {
width: 48%;
}

.one_third {
width:30.66%;
}

.two_third {
width:65.33%;
}

.one_fourth {
width:22%;
}

.three_fourth{
width:74%;
}

.one_fifth {
width:16.8%;
}

.two_fifth{
width:37.6%;
}

.three_fifth {
width:58.4%;
}

.four_fifth {
width:79.2%;
}

.one_sixth {
width:13.33%;
}

.five_sixth {
width:82.67%;
}

.grid {
display: grid;
margin: 20px 0 40px 0;
grid-template-columns: repeat(3, 1fr);
column-gap: 40px;
row-gap: 40px;
font-weight: 600;
font-size: 16px;
line-height: 20px;
}

.grid.fourth {
grid-template-columns: repeat(4,1fr);
}

.grid.stack {
text-align: center;
}

.grid.stack img {
display: block;
margin: 0 auto 10px auto;
}

.grid li.flex {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

.grid li.flex p {
padding: 0px 0px 0px 10px;
}

/* ========================================================================== *\
8. FORM STYLES
\* ========================================================================== */

input {
-webkit-appearance: none;
border-radius: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
display: block;
width: 100%;
background-color: #ffffff;
padding: 15px 20px;
border:none;
color: #231F20;
font-size: 14px;
line-height: 16px;
margin-bottom: 20px;
border: 1px solid #D5D5D5;
}

input[type="text"].solid,
input[type="email"].solid,
input[type="tel"].solid,
input[type="password"].solid {
background: #F2F2F2;
border-color: #D5D5D5;
}

.select2 {
margin: 0 0 20px 0 !important;
}

.select2-container--default .select2-selection--single {
background-color: #F4F4F4 !important;
border: none !important;
border-radius: 0px !important;
}

select {
display: block;
font-size: 16px;
color: #231F20;
cursor: pointer;
line-height: 16px;
padding: 15px 40px 15px 20px;
width: 100%;
min-width: 260px;
max-width: 100%; /* useful when width is set to anything other than 100% */
margin: 0 0 20px 0;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: url('images/chevron-down.svg');
background-position: right 20px center;
background-size: 12px 7px;
background-repeat: no-repeat;
background-color: #F4F4F4;
border: none;
}

select.alt {
background-color: #ffffff;
}

textarea {
display: block;
width: 100%;
min-height: 115px;
font-family: 'Montserrat', sans-serif;
background-color: #ffffff;
padding: 15px 20px;
border:none;
color: #231F20;
font-size: 14px;
line-height: 16px;
margin-bottom: 20px;
border: 1px solid #D5D5D5;
}

input[type="submit"],
button {
display: inline-block;
padding: 12px 40px;
color: #ffffff;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.5px;
text-transform: uppercase;
border: none;
cursor: pointer;
margin: 0px;
border-radius: 4px;

background-color:#E20613;
border: 2px solid #E20613;

transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

input[type="submit"]:hover,
button:hover {
background-color: #231F20;
border-color: #231F20;
color: #ffffff;
}

input[type="submit"].block {
display: block;
width: 100%;
text-align: center;
}

button.alt {
background: transparent;
color: #231F20;
border: 2px solid #231F20;
}

button.alt:hover {
background: #231F20;
color: #FFFFFF;
}

input[type="submit"].small,
button.small {
padding: 8px 24px !important;
font-size: 12px;
line-height: 100%;
font-weight: bold;
letter-spacing: 1px;
}

.inlineSearch {
display: flex;
flex-direction: row;
gap: 24px;
}

.inlineSearch input[type="text"] {
margin-bottom: 0px;
}

.search {
box-shadow: 0px 2px 7px rgba(0,0,0,0.25) !important;
margin: 20px 0 30px 0;
border-radius: 0 12px 12px 0;
width: 840px;
border: 6px solid #99CFF9;
}

.search form {
display: flex;
flex-direction: row;
justify-content: flex-start;
}

.search form input[type="text"] {
margin: 0px;
display: block;
width: 33.33333%;
border: none;
}

.search form input[type="text"]:nth-child(2) {
width: 35%;
border-left: 6px solid #99CFF9;
}

.search form input[type="submit"] {
display: block;
width: 25%;
text-align: center;
border-radius: 0 6px 6px 0 !important;
}

input[type="text"].service {
background: url('images/search-ico.svg');
background-position: left 20px center;
background-repeat: no-repeat;
background-size: 24px 24px !important;
background-color: #ffffff;
padding-left: 60px;
}

input[type="text"].postalCode {
background: url('images/postal-code-ico.svg');
background-position: left 20px center;
background-repeat: no-repeat;
background-size: 18px 24px;
background-color: #ffffff;
padding-left: 50px;
border-left: 1px solid #979797;
}

.checkboxes {
display: block;
margin-bottom: 40px;
}

.checkboxes .checkbox {
display: block;
padding: 5px 0;
margin-bottom: 0px;
}

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 30px;
cursor: pointer;
font-weight: normal;
line-height: 30px;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 18px;
height: 18px;
border: 1px solid #999999;
background: #fff;
border-radius: 0px;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: 6px;
left: 2px;
font-size: 20px;
line-height: 20px;
color: #E20613;
transition: all .2s;
}

/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}

.radio {
display: block;
margin: 10px 0 20px 0;
}

.radio.divide {
border-bottom: 3px solid #F4F4F4;
padding-bottom: 24px;
}

/* Base for label styling */
[type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
left: -9999px;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
position: relative;
padding-left: 20px;
padding-right: 20px;
cursor: pointer;
font-weight: normal;
line-height: 30px;
}

/* checkbox aspect */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 4px;
width: 20px;
height: 20px;
border: 1px solid #999999;
background: #fff;
border-radius: 0px;
border-radius: 100%;
}
/* checked mark aspect */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
content: '';
width: 14px;
height: 14px;
background: #E20613;
border-radius: 100%;
position: absolute;
top: 8px;
left:4px;
transition: all .2s;
}

/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="radio"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="radio"]:disabled:checked + label:after {
color: #999;
}
[type="radio"]:disabled + label {
color: #aaa;
}

/* ========================================================================== *\
9. NEW STYLES
\* ========================================================================== */

p.small {
font-size: 16px;
line-height: 150%;
}

#overlay.open {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1;
transition: all 0.5s ease-in-out;
overflow: hidden;
}

.modal {
display: none;
background: #ffffff;
width: 810px;
padding: 80px 96px;
font-size: 16px;
line-height: 125%;
position: relative;
overflow-y: auto;
}

.modal .rule {
margin-bottom: 24px;
border-bottom: 6px solid #EAEAEA;
height: 32px;
}

.modal .closeBtn {
display: block;
position: absolute;
top: 32px;
right: 32px;
width: 32px !important;
height: 32px;
cursor: pointer;
}

.modal .closeBtn:hover {
transform: scale(1.1,1.1);
}

.modal .backBtn {
color: #E20613;
font-weight: normal;
font-size: 20px;
text-decoration: none;
display: inline-block;
padding: 8px 0 8px 28px;
background: url('images/ico-left-arrow-red.svg');
background-position: left center;
background-repeat: no-repeat;
background-size: 20px auto;
cursor: pointer;
position: absolute;
top: 32px;
left: 32px;
}

.modal .backBtn:hover {
color: #000000;
background: url('images/ico-left-arrow-red.svg');
background-position: left 4px center;
background-repeat: no-repeat;
background-size: 20px auto;
}

.modal .btn {
font-size: 16px;
}

.modalSearch {
gap: 16px;
}

.modalSearch input[type="submit"] {
max-height: 50px;
padding: 8px 32px;
}

.modalGalleryWrap {
display: flex;
flex-direction: row;
gap: 24px;
margin: 0 0 32px 0;
justify-content: center;
}

.modalGalleryWrap .image {
display: block;
margin: 0;
}

.modalGalleryWrap .image img {
display: block;
width: 278px;
border: 1px solid #DADADA;
}

ul.modalGallery {
display: flex;
flex-flow: column wrap;
align-content: center;
gap: 16px;
}

ul.modalGallery li {
display: block;
margin: 0;
border: 1px solid #DADADA;
max-width: 80px;
}

ul.modalGallery li img {
display: block;
}

.title {
display: block;
font-size: 26px;
line-height: 40px;
font-weight: bold;
}

.title.success {
padding-left: 56px;
background: url(images/ico-check.svg);
background-position: left center;
background-repeat: no-repeat;
background-size: 40px 40px;
}

.notice {
display: block;
margin-bottom: 16px;
font-size: 16px;
padding: 0 0 0 24px;
min-height: 20px;
}

.notice.success {
color: #00AC11;
background: url('images/ico-success.svg');
background-position: left top 2px;
background-repeat: no-repeat;
background-size: 16px 16px;
}

.notice.error {
color: #E20613;
background: url('images/ico-error.svg');
background-position: left top 2px;
background-repeat: no-repeat;
background-size: 16px 16px;
}

.btn.inline {
display: inline-block;
width: auto;
min-width: 0;
}

.btn.block {
display: block;
width: 100%;
text-align: center;
}

.back {
display: block;
color: #E20613;
font-size: 20px;
margin-top: 30px;
}

.back:hover {
color: #000000;
}

.back.alt {
color: #E20613;
font-weight: normal;
font-size: 20px;
text-decoration: none;
display: inline-block;
padding: 8px 0 8px 28px;
background: url('images/ico-left-arrow-red.svg');
background-position: left center;
background-repeat: no-repeat;
background-size: 20px auto;
cursor: pointer;
}

.back.alt:hover {
color: #000000;
background: url('images/ico-left-arrow-red.svg');
background-position: left 4px center;
background-repeat: no-repeat;
background-size: 20px auto;
}

.container {
display: block;
background: #F4F4F4;
padding: 64px 0;
}

label {
display: block;
color: #231F20;
font-size: 16px;
line-height: 150%;
margin-bottom: 5px;
}

label.large {
font-size: 24px;
line-height: 125%;
font-weight: bold;
}

.pill {
display: inline-block;
border-radius: 16px;
color: #000000;
background: #E3E3E3;
font-size: 12px;
line-height: 100%;
padding: 8px 16px;
}

.pill.red {
background: #E20613;
color: #ffffff;
}

/* ===================================== *\
9.1 NEW SHOPPING CART
\* ===================================== */

.cartItem {
display: block;
background: #ffffff;
border-radius: 0;
box-shadow: 0 2px 18px rgba(0,0,0,0.05);
margin-bottom: 24px;
border: 6px solid #E0E0E0;
font-size: 16px;
line-height: 150%;
}

.cartItem.alt .cartItemTop {
padding: 24px;
}

.cartItem.alt .cartItemBottom {
padding: 16px 24px;
}

.cartItem.alt .cartThumb img {
width: 150px !important;
}

.cartItem.alt .cartItemTop .columns {
gap: 32px;
}

.cartItem h2 {
font-size: 26px;
line-height: 150%;
}

.cartItem img {
display: block;
border: 1px solid #CECECE;
}

.cartItemTop {
display: block;
padding: 48px 56px 32px 56px;
}

.cartThumb img {
width: 265px !important;
display: block;
}

.cartItemTop .columns {
justify-content: flex-start;
gap: 54px;
}

.cartItemTop .columns .alignRight {
flex: 1;
}

.alignRight {
text-align: right;
}

.alignRight .btn,
.alignRight input[type="submit"],
.alignRight button {
margin: 0 0 20px 20px;
}

.previousPrice {
color: #979797;
text-decoration: line-through;
}

.small,
.xsmall,
p.small .xsmall {
font-size: 14px;
line-height: 150%;
}

.cartItemBottom {
display: block;
padding: 16px 64px;
border-top: 1px solid #F2F2F2;
}

.remove {
display: block;
background: url('images/ico-trash-can.svg');
background-position: left center;
background-repeat: no-repeat;
background-size: 14px 16px;
padding-left: 20px;
text-decoration: underline;
color: #E20613;
cursor: pointer;
}

.remove:hover {
text-decoration: none;
color: #000000;
}

.edit {
display: block;
background: url('images/ico-edit.svg');
background-position: left center;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-left: 20px;
text-decoration: underline;
color: #0088F2;
cursor: pointer;
}

.edit:hover {
text-decoration: none;
color: #000000;
}

.cartItem .stock {
display: block;
font-size: 14px;
}

.cartItem .stock.in-stock {
color: #018E00;
}

.cartItem .stock.out-of-stock {
color: #E20613;
}

.cartSummary {
display: block;
padding: 32px;
font-size: 14px;
line-height: 150%;
background: #ffffff;
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.20);
}

.cartSummary .rule.thick {
margin: 8px 0 24px 0;
}

/* here */

.cartSummary .link {
color: #E20613;
text-decoration: underline;
cursor: pointer;
}

.cartSummary .link:hover {
color: #000000;
}

.cartSummary.sticky {
position: sticky;
top: 24px;
}

.cartSummary input {
margin-bottom: 0px !important;
}
.cartSummary .columns {
margin-bottom: 8px;
}

.cartSummary .price {
font-weight: bold;
font-size: 24px;
}

.cartSummary .btn {
margin-bottom: 0px;
}

.expandProducts {
color: #E20613;
cursor: pointer;
padding-right: 20px;
background: url('images/ico-down-red-chevron.svg');
background-size: 12px auto;
background-position: right center;
background-repeat: no-repeat;
}

.expandProducts:hover {
color: #000000;
}

.expandProducts.active {
background: url('images/ico-up-red-chevron.svg');
background-size: 12px auto;
background-position: right center;
background-repeat: no-repeat;
}

.productSummary {
display: none;
border-bottom: 8px solid #eeeeee;
padding-bottom: 16px;
}

.productSummary.active {
display: block;
}

ul.progressBar {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 20px 0 40px 0;
overflow: visible;
}

ul.progressBar li {
display: block;
width: 32%;
height: 10px;
background: #dedede;
border-radius: 5px;
position: relative;
}

ul.progressBar.half li {
width: 48%;
}

ul.progressBar li span {
display: block;
font-size: 16px;
font-weight: normal;
text-transform: capitalize;
position: absolute;
top: -30px;
color: #747474;
}

ul.progressBar li.active {
background: #E20613;
}

ul.progressBar li.complete {
background: #2B2B2B;
}

ul.progressBar li.complete span {
background: url('images/ico-check-green.svg');
background-size: 16px 16px;
padding-left: 24px;
background-repeat: no-repeat;
background-position: left center;
}

ul.progressBar li.active span,
ul.progressBar li.complete span {
color: #000000;
}

.reviewContainer {
display: block;
padding: 24px;
background:#F2F2F2;
margin-bottom: 32px;
font-size: 16px;
line-height: 150%;
}

.reviewContainer p {
padding-bottom: 0px;
}

.reviewContainer a {
text-decoration: underline;
color: #E20613;
}

.reviewContainer a:hover {
color: #000000;
}

.price p {
font-size: 24px;
line-height: 125%;
padding-bottom: 0px;
}

.price.small {
font-size: 1.6rem;
}

.price.medium p {
font-size: 24px;
line-height: 150%;
}

.price.large p {
font-size: 38px;
line-height: 150%;
}

.price.large.alt p {
font-size: 30px;
line-height: 150%;
}

/* ===================================== *\
9.2 FORM ELEMENTS
\* ===================================== */

.postalCode {
display: flex;
justify-content: space-between;
gap: 16px;
}

.postalCode input[type="text"] {
text-align: center;
}

.quantity {
display: block;
width: 100%;
text-align: center;
margin-bottom: 16px;
}

.quantity.noMargin {
margin-bottom: 0;
}

.quantity.left .columns {
justify-content: flex-start;
}

.quantity .columns {
align-items: center;
justify-content: flex-end;
gap: 8px !important;
}

.quantity .button {
display: block;
width: 32px;
height: 32px;
background: #D5D5D5;
border: 2px solid #D5D5D5;
border-radius: 5px;
color: #ffffff;
font-size: 16px;
text-indent: -999px;
overflow: hidden;
line-height: 50px;
cursor: pointer;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

.quantity .dec.button {
background: url('images/ico-minus.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 5px 2px;
background-color: #D5D5D5;
}

.quantity .dec.button:hover {
background: url('images/ico-minus.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 5px 2px;
background-color: #9F9F9F;
border-color: #9F9F9F;
}

.quantity .inc.button {
background: url('images/ico-plus.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 8px 8px;
background-color: #D5D5D5;
}

.quantity .inc.button:hover {
background: url('images/ico-plus.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 8px 8px;
background-color: #9F9F9F;
border-color: #9F9F9F;
}

.quantity .button:hover {
background: #9F9F9F;
border-color: #9F9F9F;
}

.quantity input[type="text"],
.quantity input[type="number"] {
text-align: center;
height: 32px;
width: 32px;
padding: 5px;
line-height: 32px;
margin: 0 0 0 0;
border-radius: 5px;
}

.quantity label {
font-weight: normal;
font-size: 16px;
line-height: 150%;
color: #2B2B2B;
}

.radio {
display: block;
margin-bottom: 40px;
}

.radio label {
font-size: 16px;
align-items: center;
}

.radio p {
padding-bottom: 0px;
}

.radio small {
vertical-align: -8px;
}

.radio strong {
vertical-align: -4px;
}

.radio.button [type="radio"]:not(:checked) + label,
.radio.button [type="radio"]:checked + label {
display: inline-block;
background:#FFFFFF !important;
text-transform: none;
font-size: 18px;
line-height: 100%;
padding: 24px 32px 24px 56px;
margin-right: 16px;
border: 3px solid #C9C9C9;
}

.radio.button [type="radio"]:checked + label {
border: 3px solid #E20613;
}

.radio.button [type="radio"]:not(:checked) + label:after,
.radio.button [type="radio"]:checked + label:after {
top: 50%;
left: 35.2px;
transform: translateY(-50%);
}

.radio.button [type="radio"]:not(:checked) + label:before,
.radio.button [type="radio"]:checked + label:before {
top: 50%;
left: 32px;
width: 18px;
height: 18px;
transform: translateY(-50%);
}

.radio.button.full [type="radio"]:not(:checked) + label,
.radio.button.full [type="radio"]:checked + label {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
line-height: 150%;
padding: 16px 48px 16px 74px;
}

.radio.button.method [type="radio"]:not(:checked):first-child + label,
.radio.button.method [type="radio"]:checked:first-child + label {
display: inline-block;
background: url('images/ico-home-delivery.svg') !important;
background-repeat: no-repeat !important;
background-size: 40px auto !important;
background-position: left 64px center !important;
background-color:#FFFFFF !important;
text-transform: none;
font-size: 18px;
line-height: 100%;
padding: 24px 32px 24px 116px;
margin-right: 16px;
}

.radio.button.method [type="radio"]:not(:checked) + label,
.radio.button.method [type="radio"]:checked + label {
display: inline-block;
background: url('images/ico-in-store.svg') !important;
background-repeat: no-repeat !important;
background-size: 40px auto !important;
background-position: left 64px center !important;
background-color:#FFFFFF !important;
text-transform: none;
font-size: 18px;
line-height: 100%;
padding: 24px 48px 24px 116px;
margin-right: 16px;
}

.inlineForm {
margin-top: 24px;
}

.promoApplied {
display: none;
}

.inlineForm.promo {
display: none;
}

.inlineForm form {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
border: 5px solid #F4F4F4;
}

.inlineForm input[type="text"] {
display: block;
width: 100%;
background: #FFFFFF;
color: #000000;
font-size: 16px;
padding: 12px 16px 12px 16px;
border: none;
border-radius: 0px;
box-sizing: content-box;
margin: 0px;
}

.inlineForm input[type="submit"] {
display: block;
width: 48px !important;
width: 48px !important;
background: url('images/ico-right-arrow-white.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 20px auto;
background-color: #E20613;
border-radius: 0 5px 5px 0;
text-indent: -999999px;
overflow: hidden;
padding: 0px;
margin: 0px;
}

.inlineForm input[type="submit"]:hover {
background: url('images/ico-right-arrow-white.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 20px auto;
background-color: #000000;
border-color: #000000;
}

.inlineForm.error form {
border: solid 5px #E20613;
}

.inlineForm.error input[type="submit"] {
border-radius: 0;
}

.inlineForm.error input[type="text"],
label.error {
color: #E20613;
}

input[type="text"].error,
input[type="tel"].error,
input[type="email"].error,
input[type="number"].error {
color: #E20613;
background: #FFEDED;
border: 2px solid #E20613;
margin-bottom: 0px;
}

.errorText {
display: block;
font-size: 16px;
line-height: 150%;
color: #E20613;
padding-top: 8px;
margin-bottom: 8px;
}

.errorMessage {
display: block;
font-size: 16px;
line-height: 150%;
color: #E20613;
margin-bottom: 32px;
background: #FFEDED;
border: 2px solid #E20613;
padding: 16px 24px;
}

/* new */

.accountMenu {
display: block;
position: relative;
}

.accountMenu span {
display: block;
width: 110px;
padding: 32px 0 16px 0;
position: relative;
color: #000000;
font-size: 14px;
line-height: 100%;
font-weight: normal;
background:
	url('images/ico-down-chevron.svg'),
	url('images/profile.svg');
background-size:
	11px 7px,
	24px 24px;
background-position:
	right 4px top 36px,
	top 4px center;
background-repeat: no-repeat;
cursor: pointer;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

.accountMenu:hover span {
color: #E20613;
background:
	url('images/ico-up-chevron.svg'),
	url('images/profile.svg');
background-size:
	11px 7px,
	24px 24px;
background-position:
	right 4px top 36px,
	top 4px center;
background-repeat: no-repeat;
cursor: pointer;
}

.accountMenu:hover > .accountDropDown {
display: block;
}

.accountDropDown {
display: none;
position: absolute;
top: 95%;
width: 257px;
background: #ffffff;
right: -36px;
z-index: 5000 !important;
padding: 24px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
border-radius: 16px;
}

.accountDropDown.open {
display: block;
}

.accountDropDown:after {
content: "";
display: block;
width: 30px;
height: 15px;
background: url('images/triangle.png');
background-position: center center;
background-size: 30px 15px;
background-repeat: no-repeat;
position: absolute;
top: -15px;
right: 34px;
z-index: -1;
}

.accountDropDown .title {
display: block;
font-weight: bold;
font-size: 24px;
margin-bottom: 8px;
padding-bottom: 0px;
}

.accountDropDown p {
font-size: 14px;
line-height: 150%;
display: block;
padding-bottom: 16px;
}

.accountDropDown .btn {
display: block;
width: 100%;
min-width: 0;
text-align: center;
margin-bottom: 8px;
font-size: 12px;
font-weight: bold;
}

.searchBtn {
display: block;
width: 40px;
height: 40px;
background: url('images/ico-search-alt.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 40px 40px;
text-indent: -999999px;
overflow: hidden;
cursor: pointer;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

.searchBtn:hover {
background: url('images/ico-search-red.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 40px 40px;
}

.searchBtn.active {
background: url('images/ico-close-red.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 40px 40px;
}

.searchContainer {
display: block;
width: 100%;
padding: 80px 0;
background: rgba(0,0,0,0.9);
top: -100%;
left: 0;
position: absolute;
opacity: 0;
z-index: 9999999;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}

.searchContainer.open {
top: 85px;
opacity: 1;
}

.searchContainer p {
display: none;
color: #ffffff;
padding-bottom: 16px;
}

.searchContainer .closeSearchContainer {
display: none;
position: absolute;
top: 24px;
right: 16px;
width: 40px;
height: 40px;
background: url('images/ico-close-white.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 40px 40px;
text-indent: -999px;
overflow: hidden;
z-index: 999999;
cursor: pointer;
}

.searchContainer .closeSearchContainer:hover {
background: url('images/ico-close-red.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 40px 40px;
}

.searchContainer .columns {
gap: 16px;
justify-content: flex-start;
align-items: center;
}

.searchContainer input[type="text"].searchInput {
display: block;
width: 100%;
background: transparent;
font-size: 24px;
color: #DADADA;
font-weight: bold;
padding: 16px 0;
margin-bottom: 16px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 3px solid #ffffff;
}

.searchContainer input[type="text"].searchInput::-webkit-input-placeholder,
.searchContainer input[type="text"].searchInput::placeholder {
opacity: 1 !important;
color: #ffffff !important;
}

.searchContainer input[type="submit"].searchSubmit {
display: block;
width: 48px;
height: 64px;
background: url('images/ico-search-white.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 48px 48px;
overflow: hidden;
text-indent: -999px;
background-color: transparent;
border: none;
padding: 0;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}

.searchContainer input[type="submit"].searchSubmit:hover {
background: url('images/ico-search-red.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 48px 48px;
}

.menuSignIn {
display: none;
padding: 0 16px;
width: 100%;
}

.menuSignIn .title {
display: block;
font-size: 24px;
font-weight: bold;
color: #ffffff;
}

.menuSignIn p {
font-size: 14px;
color: #F4F4F4;
padding-bottom: 16px;
}

.menuSignIn .btn {
display: block;
width: 100%;
margin-bottom: 16px;
font-size: 14px;
}

.menuSignIn .btn:hover {
background: transparent;
color: #E20613;
border-color: #E20613;
}

.menuSignIn .btn.alt {
background-color: #ffffff;
border-color: #ffffff;
color: #000000;
}

.menuSignIn .btn.alt:hover {
background: transparent;
color: #ffffff;
}

.browseRestaurant div a img {
display: block;
margin: 0 0 8px 0;
border-radius: 8px;
max-height: 220px;
width: 100%;
object-fit: contain;
}
.heroImage {
display: none;
}
a.inverse.pname {
color: #231F20;
}
.leftContainer .back.alt{
padding:0px;
}
.hero.profile.short{
padding: 30px 0 0 0;
}
main.main.alt select.input.alt.solid.bprovince, select.input.alt.solid.sprovince {
background-color: #F2F2F2;
border: 1px solid #D5D5D5 !important;
}


/* ========================================================================== *\
   10. MY ACCOUNT
\* ========================================================================== */

ul.mptabs {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: linear-gradient(0deg, rgba(213,213,213,1) 0%, rgba(213,213,213,1) 4px, rgba(213,213,213,0) 4px, rgba(213,213,213,0) 100%);
}

ul.mptabs.alt {
	justify-content: flex-start;
	gap: 4.8rem;
}

ul.mptabs li {
	display: block;
	font-size: 1.0rem;
	font-weight: bold;
	padding: 1.0rem 0;
	cursor: pointer;
}

ul.mptabs li {
	border-bottom: 4px solid transparent;
}

ul.mptabs li.active,
ul.mptabs li:hover {
	border-color: #E20613;
}

.mptab {
	display: none;
}

.mptab.show {
	display: block;
}


.dataTable  {
	width: 100%;
	border-collapse: separate;
    border-spacing: 0;
	border: none !important;
}

.dataTable  thead th {
	color: #000000 !important;
	font-weight: bold;
	border-bottom: 4px solid #D5D5D5;
	background: #ffffff !important;
	font-size: 1.0rem !important;
}

.dataTable  td {
	text-align: left;
	padding: 1.0rem;
	vertical-align: top;
	font-size: 1.0rem !important;
}
.dataTable td:last-child {
    text-align: left !important;
}
.dataTable  td .btn {
	margin-bottom: 0px;
	padding: 0.8rem 1.6rem;
	font-size: 1.6rem;
}
#listOrderTable_filter { top: 80px; right: 0; position: absolute; }
div.dataTables_filter input { margin-top: 15px; }
th.sorting { color: 0088F2; cursor: pointer; }
th.sorting_asc, th.sorting_desc { color: #f9113c; cursor: pointer;  }
#listOrderTable_length { width: 15%; display: inline-table; }
#listOrderTable_length select{ margin-top: 15px }
#listOrderTable_paginate { float: right; display: inline-table; }

#gridSearch {
	display: inline-block; float: right;
    width: 40%;
    padding: 10px;
	margin-top: 14px;
    margin-bottom: 14px;
    color: #444444;
    font-size: 13px;
    line-height: 15px;
    background-color: #ffffff;
    border: 1px solid #666666;
    border-radius: 0px;
    -webkit-border-radius: 0px;
}
#listePartTable_filter { text-align: right; line-height: 38px; }

.dataTables_length { display:inline-block; }
.dataTables_info { display:none !important; }
.dataTables_paginate {
	display: inline-table;
    float: right;
    margin: 0;
}
.dataTables_paginate a { cursor: pointer;
	display: inline-block;
	padding: 10px 20px;
	margin: 2px;
	background-color: #F2F2F2;
	border: none;
	color: #231F20;
	text-decoration: none !important;
}
.dataTables_paginate a:hover {
	background: #000;
	border: none;
	color: #ffffff;	
}
.dataTables_paginate a.current {
	background: #646464;
	border: none;
	color: #ffffff;	
}
.dataTables_paginate a.previous, .dataTables_paginate a.next  {
	
	border: 1px solid #c5bcbc; 
	opacity: 0.6;
	font-weight: bolder; 
	width: 50px;
}
.dataTables_paginate a.previous:hover, .dataTables_paginate a.next:hover {
	opacity: 1;
}

.datatable tr th, .datatable tr td {
    background: none !important; padding: 1rem 0rem !important;
} 

.dateRange {
    display: flex;
    flex-direction: row;
    gap: 1.6rem;
    align-items: flex-end;
}
input.dtt{
  position:relative;
  overflow:hidden;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
input[type="time"] {
	background: url('images/time-ico.svg');
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-color: #ffffff;
}

input[type="date"] {
	background: url('images/date-ico.svg');
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size: 17.5px 20px;
	background-color: #ffffff;
	min-width: 160px;
}
.myaccount_btn { margin-bottom: 21px !important; padding: 12px 25px !important; }

.table td.text-right, .table th.text-right { text-align: right; }
.table td.text-center, .table th.text-center { text-align: center; }

.order-body li .order-info {
	color: #646464;
	min-width: 90px;
}
.order-body li .sale-info {
    color: #646464;
    min-width: 130px;
	float: left;
}
.order-body li .sale-num {
    float: right;
	right: 8px;
    position: relative;
}
.order-body li .sale-infoo {
	color: #1E1E1E !important;
	padding-left: 10px;
	font-weight: 600;
}


.tooltip .tooltiptext {
	visibility: hidden;
	width: 250px;
	background-color: #bfe1fc;
	border: 1px solid #0088f2;
	text-align: left;
	border-radius: 6px;
	padding: 10px;
	position: absolute;
	z-index: 1;
	right: 10px;
	top: 15px;
	font-size: 12px;
	line-height: 16px;
    font-weight: normal;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}


a.linktitle { margin-right: 30px; font-size: 16px; }
.tablinksbg { background: #e8e8e8; }
.tablinks {
    display: block;
    width: 100%;
    padding: 24px 0;
	text-align: right;
}
.tablinks a:last-child {
    margin-right: 0px;
}

#vehiclesForSale { padding: 100px 0 50px 0; }

.hiw-blocks .columns{ margin: 30px; }

.hiw-blocks .columns .col {
    display: block;
    flex-basis: 100%; padding: 15px;
}
.hiw-blocks i.stricon {
    font-size: 50px;
    color: #09F;
	margin: 25px auto;
}
.hiw-blocks .hiwhead { font-size: 16px;
    font-weight: bold;
    padding: 15px 0 0px 0; }
.hiw-blocks .hiwtext { 
    font-size: 14px;
    padding: 15px 0px; }
	
.customerReview {  
    display: block;
    padding: 0 20px 20px 20px;
    font-size: 18px;
    line-height: 30px;
}
.customerReview .inner {
    padding: 40px 60px !important;
    border-bottom: none !important;
    
}
.customerReview .author {
    display: block;
    font-weight: bold;
    margin-bottom: 70px;
    font-size: 16px;
    line-height: 24px;
	text-align: center;
}
.customerReview i.quote{ font-size: 48px;    line-height: 2px; top: 18px;    position: relative; }
.crnavdiv { position: relative; margin: 0 auto;     text-align: center;    margin-top: -100px; }
.crnav { padding: 10px 12px; border-radius: 50px; }
.crnav i{ font-size: 1.2em; }
.crnavleft { margin-right: 15px; }
.crnavright { margin-left: 15px; }

.ServSimpleList .columns .col {
	width: 48%;
}
.ServSimpleList h3 {
	text-transform:uppercase; font-size:22px; line-height:22px; border-left:5px solid #E20613; padding:0; padding-left:8px; margin: 40px auto 20px auto;
}
.ServSimpleList ul { margin-left:15px; 
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: none;
}
/*.ServSimpleList .columns .col:nth-child(2n+1) ul {
	border-right:5px solid #E20613;
}*/

.greybg { background: #494646;
    color: #fff;
    padding: 0px;
    overflow: hidden; }
.greybg img { height: 100%  !important; }

.flyerwithtext { position:relative; }
.textonflyer { position: absolute; text-align:center; 
    top: 0px; left: 0px; color:#fff; padding: 30px; }

.flyerwithtext-head { text-transform:uppercase; text-align:center; }
.flyerwithtext-text { color:#fff; margin: auto 60px; text-align:center; }

.faq-que { font-weight: 600; }



.tagstitle {
	font-size: 20px;
    font-weight: bold;
    padding: 15px 0 15px 0;
}
.tags {
    display: inline-table;
    border-radius: 20px !important;
    text-shadow: none !important;
    text-align: center;
    vertical-align: middle;
	margin-bottom: 20px;
}
.tags-text {
	background-color: #ecbc29;
    padding: 3px 15px;
    color: #000;
    font-size: 14px;
    line-height: 22px;
}


ul.portfolioImages {
	display: grid;
	column-gap: 15px;
	row-gap: 15px;
}
.pf_gtc1 { grid-template-columns: repeat(1, 1fr); }
.pf_gtc2 { grid-template-columns: repeat(2, 1fr); }
.pf_gtc3 { grid-template-columns: repeat(3, 1fr); }

ul.portfolioImages li {
	display: block;
	/*box-shadow: 1px 1px 6px rgba(0,0,0,0.25);*/
	position: relative;
	margin-bottom: 50px;
}
ul.portfolioImages li:hover {
	display: block;
	position: relative;
	/*box-shadow: 1px 1px 6px rgba(0,0,0,1);*/
}

ul.portfolioImages li img {
	display: block;
	width: auto;
    height: 100% !important;
	border-radius: 0px !important;
}
ul.portfolioImages li .title {
	display: block;
	width: 100%;
	font-size: 16px;
	color: #fff;
    font-weight: 600;
	font-weight: normal;
	line-height: 30px;
	padding: 6px 15px 6px 15px;
	background-color:rgba(88, 88, 88, 0.5);
	/*border: 1px solid #979797;
	background-image: linear-gradient(180deg, #000000 16%, rgba(0,0,0,0.00) 100%);
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);*/
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.mtb15 { margin-top: 15px; margin-bottom: 15px; }
.mt15 { margin-top: 15px; }
.mb15 { margin-bottom: 15px; }
.mt30 { margin-top: 30px; }
.mb30 { margin-bottom: 30px; }
.mt45 { margin-top: 45px; }
.mb45 { margin-bottom: 45px; }
.pt100 { padding-top: 100px; }
.pb100 { padding-bottom: 100px; }
.pt50 { padding-top: 50px; }
.pb50 { padding-bottom: 50px; }
.pt25 { padding-top: 25px; }
.pb25 { padding-bottom: 25px; }


.subnav ul {  overflow-y: auto; overflow:auto !important; }
.scrollx::-webkit-scrollbar { height: 6px;  }
.scrollx::-webkit-scrollbar-track {  background: #F4F4F4; }
.scrollx::-webkit-scrollbar-thumb {   background: #eee; }
.scrollx::-webkit-scrollbar-thumb:hover {   background: #e1e0de; }

body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track {  background: #F4F4F4; }
body::-webkit-scrollbar-thumb { height: 90px;   background: #ffba0c; }
body::-webkit-scrollbar-thumb:hover {   background: #e20613; }
main .tab.content {
padding: 0px;
}
section#overview .inner.noRule, .col.sidebar, 
.table table, .tab.editorClasses .inner, #products .inner{
padding: 0px !important;   
margin: 0px;
}
.tab.editorClasses p{
padding-bottom:10px;
}

.customerReview span{
margin-bottom: 0px !important;
}
.customerReview .inner {
border-bottom: none !important;
background: #ffffff;
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.20);
}
.custreviewCarousel.slick-initialized.slick-slider {
margin-top: 20px;
}
ul.galleryCarousel{
margin-bottom: 0px;
}
section#menu .inner {
padding: 0px;
}
.tab.editorClasses .inner {
padding-bottom: 20px !important;
}
.restaurantDetails p{
white-space: normal;	
}
aside.cartSummary img {
max-width: 100px;
}
.content {
font-size: 16px;
}
ul.filters .active {
background: #595959 !important;
color: #fff !important;
border: 1px solid #595959 !important;
}
input[type="checkbox"]:checked + img + span {
	color: #e3121f;
	font-weight: bold;
 }  
 .cartSummary {
	margin-top: 0px !important;
}
[type="radio"]:not(:checked) + label, [type="radio"]:checked + label,
[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label{
	padding-left: 24px;
}
.radio.button [type="radio"]:not(:checked) + label:after, .radio.button [type="radio"]:checked + label:after{
	left: 34.7px;
}
div#cartModal {
    background: #fff;
    padding: 30px;
	position: relative;
}
.common_details{
    margin:60px 0px;
}
.common_details.even {
    background: #f4f4f4;
     padding:60px 0px;
}
div#_products .inner{
	padding:60px 0px;
}
div#_products ul.products{
	margin: 5px 0 5px 0;
}
.menuCarouselContainer::after{
	display: none;
}
.hide{
	display: none;
}
aside.slideOut{
    display:none;
}
aside.slideOut.open{
    display:block;
    height:100%;
    background:#fff;
}
aside.slideOut .cartThumb img {
    max-width: 65px;
}
.slideOut .topBar{
    height:80px;
}
.slideOut .inner{
    height: calc(100vh - 180px);
}
input.myaccount_btn.mobile{
	display: none;
}
.mptab p{
	font-size: 16px;
	font-weight: 500;
}
.view2.clear, .view1.clear, .view3 {
    margin-top: 20px;
}
.callout.relative p{
	padding-bottom: 15px;
}
input.myaccount_btn.desktop{
	margin-bottom: 0px !important;
}
.mptab input.dtt {
    border: 1px solid #000;
    padding: 14px 10px;
    border-radius: 3px;
}
.last {
    margin-right: 0 !important;
    clear: right;
}
@media(max-width:767px){
	input.myaccount_btn.mobile{
		display: block;
	}
    main.alt.cartempty .columns{
        display: contents;
        width: 100%;
    }
    .col{
     width:100%;
    }
.browseFlow.restaurant ul li a img{
	height: 200px !important;
}
.col.four_fifth {
	width: 100%;
}
.inner{
	white-space: normal;
}
.content{
	padding:0px 15px !important;
}
.desktop {
	display: none !important;
}
.mobile {
	display: block !important;
}
input.btn.btnAllSearch {
	width: 88px;
	min-width: auto;
	font-size: 12px;
	padding: 0px !important;
}
main.main .columns.centerV h2, .columns.centerV p{
	padding: 0px;
}
.columns.centerV.collapse .btn.xsmall {
	font-size: 11px;
	line-height: 100%;
	padding: 6px 7px;
	margin: 0 5px;
	text-transform: none;
	align-items: center !important;
	display: flex;
}
section.hero.searchRestaurant .search.simple form {
	flex-flow: row wrap !important;
	gap: 16px !important;
}
.rule{
	margin-bottom: 0px;
}
.layeredGrid .content .row .copy {
	padding: 0px 0px 0 0 !important;
}
.layeredGrid .content .row .image {
	transform: translateX(-30px) !important;
}
.layeredGrid .content .row:nth-child(even) .image {
	transform: translateX(30px) translateY(-30px) !important; 
	margin-bottom: 10px;
}
ul.gallery, ul.team{
	margin: 0px !important;
}
.inner {
	padding-bottom: 0px !important;
}
.heroCard li, p.small{
	font-size:13px !important;
}
.btn.ghost.scheduleBtn, .btn.ghost.deliveryBtn{
	font-size: 12px;
}	
.tab .inner{
	padding: 0px 0 0px 0;
}
div#cust-reviews {
	padding-bottom: 0px;
}
.tablinks, .tab.alt{
	padding:0px 0px;
}
.menuCarouselContainer::before,
.menuCarouselContainer::after{
    box-shadow:none !important;
}
.tablinksbg{
    background:transparent !important;
}
.slick-track {
	transform: translate3d(0px, 0px, 0px) !important;
	padding: 0px !important;
	margin: 0px !important;
	width: 100% !important;
}
.browseFlow ul {
	margin-top: 20px !important;
	min-width: 100%;
}
.clear.md {
	display: none;
}
ul.restaurantGrid{
padding-bottom: 40px;
margin: 0 0 40px 0;
}
h3.large:empty {
	display: none;
}
section#menu .columns{
	justify-content: space-between;
	gap: 20px !important;
	flex-flow: unset;
}
.heroImage {
	display: block;
	margin: 48px auto 0 auto;
	}
.narrow{
	max-width: 100%;
}	
main.main {
	max-width: 100%;
	display: inline-block;
}
section.container.top-small .columns.centerV, section.banner {
	display: inline-block;
	margin: 0px auto;
	text-align: center;
}
.slick-dotted.slick-slider{
	margin-top:0px;
}
section.container.top-small .col.one_fifth {
	max-width: 120px;
	margin: 0 auto 10px;
}
section.banner .image {
	max-width: 100%;
	margin: 0 auto 30px;
	display: block;
	text-align: center;
}
section.hero.aboutus .content{
	padding: 40px 15px !important;
	background: transparent !important;
}
ul.slick-dots{
	bottom:-20px !important;
}
.subnav{
	padding-top:10px !important;
}
.subnav ul li a{
	padding-bottom: 10px;
	font-size: 16px;
	line-height: 22px;
}
section#reviews .browseFlow.mobile {
	margin-bottom: 0px !important;
}
ul.team .columns .col img{
	margin-bottom:0px !important;
}
ul.team p{
	padding-bottom: 10px !important;
}
label{
	line-height: 23px;   
	font-size: 15px;
}
div#faq {
	margin-bottom: 40px;
}
p {
	font-size: 16px;
}
.banner .inner, .container{
	padding: 40px 15px !important;
}
section#about{
	padding:20px;
}
.leftContainer .back.alt{
	padding:0px;
	margin: 0px;
}
.cartItem h2{
	padding-bottom: 0px;
}
.search form input[type="text"]:first-child {
	width: unset !important;
	border-bottom: navajowhite !important;
}
.search form{
	flex-flow: unset !important;
	display: flex;
}
input[type="text"].service{
	padding-left: 15px;
	background:none;
}
input.btn.btnAllSearch {
	max-width: 120px;
	min-width: auto;
	padding: 8px 13px;
	float: right;
}
form.head-search{
	justify-content: space-between;
	background: #fff;
}
.columns.centerV.collapse p{
	padding:0px;
}
.columns.centerV.collapse .btn.xsmall {
	font-size: 11px;
	line-height: 100%;
	padding: 6px 7px;
	margin: 0 5px;
	text-transform: none;
}
.heroCard {
	gap: 0px;
	width: 100%;
	display: block;
}
.cartItem {
    margin-top: 40px !important;
}
section.hero.profile.short .heroCard.centerV{
    display: inline-grid;
}
section.hero.profile.short .back.alt {
    padding: 0px;
}
main.main.alt .col.three_fifth {
    padding-top: 40px;
}
.rightContainer, .heroCard .rightContainer{
    text-align:left !important;
}
section.container .content{
padding:0px !important;
}
.cartItem {
    margin-top: 40px;
}
.col.three_fifth h2.small {
    margin-top: 30px;
}
select.input.alt.solid.bprovince {
    margin-bottom: 20px !important;
}
.columns.wrap.checkout-input {
    padding-top: 30px;
}
.columns.wrap.checkout-input .columns{
    gap:10px;
}
.columns.cartempty {
    min-width: 100%;
    display: block;
}
section#menu h3.large {
    margin-top: 15px !important;
}
.menuCarouselContainer::before{
    background:transparent !important;
}

}
@media(max-width:600px){
    aside.slideOut.open{
    display:block;
    }
    ul.restaurantGrid.half, ul.restaurantGrid.third, ul.restaurantGrid.fourth {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .slideOut .inner{
    height: calc(100vh - 200px);
    }
}
p.sub-total.sub-total1{
    font-size:18px;
}
div#clearToNewCartShow.open {
    z-index: 10000000000;
    position: fixed;
    display: block;
    margin: 0 auto;
    right: 0;
    left: 0;
    bottom: 0;
    vertical-align: baseline;
    height: 400px;
    top: calc(50% - 200px);
}
div#addItem {
    margin: 15px;
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
    left: 0;
    right: 0;
	z-index: 99999999;
    top: 0px;
	bottom:0px;
    position: fixed;
}
.commongrid .closed{
    pointer-events: none;
	position:relative;
}
.commongrid .closed a img:after{
	position: absolute;
	left:0px;
	right:0px;
	bottom:0px;
	top:0px;
	height: 100%;
	width:100%;
	content: "";
}
a.btn.block.alt.processing {
    color: #fff !important;
}

.img-open-close {
    position: relative;
}
.closediv {
    position: absolute;
    top: 0;
	z-index:1;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    height: 100%;
    background: #f2f2f2cf;
    padding-top: 96px;
    font-size: 16px;
}
.commongrid .closed{
	pointer-events: none;
}
li.restaurantItem.viewprofile.closed {
    pointer-events: none;
}