/*
CONFIG
Import any configuration here
*/
/* Old - do not add to THESE WILL BE GETTING REMOVED */
/**
* NEW BRAND COLOURS
*/
/**
* PRIMARY BRAND COLOURS
*/
/**
* SECONDARY COLOURS - CHALLENGE BRIGHTS
*/
/**
* SECONDARY COLOURS - COMFORT NEUTRALS
*/
/**
* NEONS - ELECTIC POPS!!!
*/
/**
* Peri-o-meter colors
*/
/**
* Not sures
*/
/**
* Fonts *
*/
/**
* Nando's Hand font - Regular
*/
@font-face {
font-family: 'nandos';
src: url("../fonts/nandos-hand/nandos-hand-alt.eot");
src: url("../fonts/nandos-hand/nandos-hand-alt.eot?#iefix") format("embedded-opentype"), url("../fonts/nandos-hand/nandos-hand-alt.woff2") format("woff2"), url("../fonts/nandos-hand/nandos-hand-alt.woff") format("woff"), url("../fonts/nandos-hand/nandos-hand-alt.ttf") format("truetype"), url("../fonts/nandos-hand/nandos-hand-alt.svg#nandos") format("svg");
font-weight: normal;
font-style: normal; }
/**
* DIN NEXT
*/
@font-face {
font-family: 'Din Next W01';
src: url("../fonts/dinnext/DINNextW01Regular.eot");
src: url("../fonts/dinnext/DINNextW01Regular.eot?iefix") format("eot"), url("../fonts/dinnext/DINNextW01Regular.woff") format("woff"), url("../fonts/dinnext/DINNextW01Regular.ttf") format("truetype"), url("../fonts/dinnext/DINNextW01Regular.svg#webfontOkOndcij") format("svg");
font-weight: 400;
font-style: normal; }
@font-face {
font-family: 'Din Next W01';
src: url("../fonts/dinnext/DINNextW01Medium.eot");
src: url("../fonts/dinnext/DINNextW01Medium.eot?iefix") format("eot"), url("../fonts/dinnext/DINNextW01Medium.woff") format("woff"), url("../fonts/dinnext/DINNextW01Medium.ttf") format("truetype"), url("../fonts/dinnext/DINNextW01Medium.svg#webfontOkOndcij") format("svg");
font-weight: 600;
font-style: normal; }
@font-face {
font-family: 'Din Next W01';
src: url("../fonts/dinnext/DINNextW01Bold.eot");
src: url("../fonts/dinnext/DINNextW01Bold.eot?iefix") format("eot"), url("../fonts/dinnext/DINNextW01Bold.woff") format("woff"), url("../fonts/dinnext/DINNextW01Bold.ttf") format("truetype"), url("../fonts/dinnext/DINNextW01Bold.svg#webfontOkOndcij") format("svg");
font-weight: 900;
font-style: normal; }
/**
* Icomoon - Site icons
* Use Icomoon App to update
* @Note: selection.json file must be commited when the font is updated.
*/
@font-face {
font-family: 'icomoon';
src: url("../fonts/icomoon/icomoon.eot?canzz3");
src: url("../fonts/icomoon/icomoon.eot?#iefixcanzz3") format("embedded-opentype"), url("../fonts/icomoon/icomoon.woff2?canzz3") format("woff2"), url("../fonts/icomoon/icomoon.ttf?canzz3") format("truetype"), url("../fonts/icomoon/icomoon.woff?canzz3") format("woff"), url("../fonts/icomoon/icomoon.svg?canzz3#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
/**
* Font variables
*/
/**
* Helpers
* File will include functions, mixins, placeholders and anyother thing
* that helps.
*/
/**
* Font-size
* Wrapper for the rem function.
*/
/**
* From SASS Bootstrap!
* mixin that changes the color of placeholder text in an element
*/
/* Helper classes & Placeholders */
.clearfix,
.form-element,
.form-element--datefield,
.form-element--timefield,
.banner,
.banner__backgrounds,
.banner__content,
.main-content,
.footer,
.inner,
.layout,
.layout--full,
.blog-list__show-more,
.basic-page,
.navigation,
.navigation .mp-level,
.header,
.social-links-wrapper,
.form,
.search-results--listing,
.search-results--locations,
.social,
.map-panel__form,
.map-panel__form-inner,
.map-form__form-inner,
.list-bar,
.double-list-bar,
.blog-post,
.blog-post__header,
.social-timeline,
.restaurant-listing,
.restaurant-teaser,
.search-results--listing .restaurant-teaser__title,
.search-results--listing .restaurant-teaser__distance,
.search-results--listing .restaurant-teaser__address,
.search-results--listing .restaurant-teaser__telephone,
.search-results--listing .restaurant-teaser__time,
.search-results--listing .restaurant-teaser__icons-bar,
.search-results--listing .restaurant-teaser__takeaway,
.rm-item,
.rm-item__bottom,
.rm-item__prices-wrapper,
.rm-item-dietary,
.rm,
.rm-section,
.rm-section__content,
.product-section,
.product-listing,
.product-listing__content,
.product-sub-listing,
.product-sub-listing__content,
.rm-new-product,
.product-section-hiw,
.product-section-hiw__price,
.add-section,
.add-section__listing,
.calorie-counter__total,
.filter__submit,
.dietary-info__sauces,
.tabs,
.nandoscard-dashboard__inner,
.rewards-info,
.rewards-info__inner,
.the-app__content {
*zoom: 1; }
.clearfix:before, .clearfix:after,
.form-element:before,
.form-element--datefield:before,
.form-element--timefield:before,
.banner:before,
.banner__backgrounds:before,
.banner__content:before,
.main-content:before,
.footer:before,
.inner:before,
.layout:before,
.layout--full:before,
.blog-list__show-more:before,
.basic-page:before,
.navigation:before,
.navigation .mp-level:before,
.header:before,
.social-links-wrapper:before,
.form:before,
.search-results--listing:before,
.search-results--locations:before,
.social:before,
.map-panel__form:before,
.map-panel__form-inner:before,
.map-form__form-inner:before,
.list-bar:before,
.double-list-bar:before,
.blog-post:before,
.blog-post__header:before,
.social-timeline:before,
.restaurant-listing:before,
.restaurant-teaser:before,
.search-results--listing .restaurant-teaser__title:before,
.search-results--listing .restaurant-teaser__distance:before,
.search-results--listing .restaurant-teaser__address:before,
.search-results--listing .restaurant-teaser__telephone:before,
.search-results--listing .restaurant-teaser__time:before,
.search-results--listing .restaurant-teaser__icons-bar:before,
.search-results--listing .restaurant-teaser__takeaway:before,
.rm-item:before,
.rm-item__bottom:before,
.rm-item__prices-wrapper:before,
.rm-item-dietary:before,
.rm:before,
.rm-section:before,
.rm-section__content:before,
.product-section:before,
.product-listing:before,
.product-listing__content:before,
.product-sub-listing:before,
.product-sub-listing__content:before,
.rm-new-product:before,
.product-section-hiw:before,
.product-section-hiw__price:before,
.add-section:before,
.add-section__listing:before,
.calorie-counter__total:before,
.filter__submit:before,
.dietary-info__sauces:before,
.tabs:before,
.nandoscard-dashboard__inner:before,
.rewards-info:before,
.rewards-info__inner:before,
.the-app__content:before,
.form-element:after,
.form-element--datefield:after,
.form-element--timefield:after,
.banner:after,
.banner__backgrounds:after,
.banner__content:after,
.main-content:after,
.footer:after,
.inner:after,
.layout:after,
.layout--full:after,
.blog-list__show-more:after,
.basic-page:after,
.navigation:after,
.navigation .mp-level:after,
.header:after,
.social-links-wrapper:after,
.form:after,
.search-results--listing:after,
.search-results--locations:after,
.social:after,
.map-panel__form:after,
.map-panel__form-inner:after,
.map-form__form-inner:after,
.list-bar:after,
.double-list-bar:after,
.blog-post:after,
.blog-post__header:after,
.social-timeline:after,
.restaurant-listing:after,
.restaurant-teaser:after,
.search-results--listing .restaurant-teaser__title:after,
.search-results--listing .restaurant-teaser__distance:after,
.search-results--listing .restaurant-teaser__address:after,
.search-results--listing .restaurant-teaser__telephone:after,
.search-results--listing .restaurant-teaser__time:after,
.search-results--listing .restaurant-teaser__icons-bar:after,
.search-results--listing .restaurant-teaser__takeaway:after,
.rm-item:after,
.rm-item__bottom:after,
.rm-item__prices-wrapper:after,
.rm-item-dietary:after,
.rm:after,
.rm-section:after,
.rm-section__content:after,
.product-section:after,
.product-listing:after,
.product-listing__content:after,
.product-sub-listing:after,
.product-sub-listing__content:after,
.rm-new-product:after,
.product-section-hiw:after,
.product-section-hiw__price:after,
.add-section:after,
.add-section__listing:after,
.calorie-counter__total:after,
.filter__submit:after,
.dietary-info__sauces:after,
.tabs:after,
.nandoscard-dashboard__inner:after,
.rewards-info:after,
.rewards-info__inner:after,
.the-app__content:after {
content: " ";
display: table;
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1; }
.clearfix:after,
.form-element:after,
.form-element--datefield:after,
.form-element--timefield:after,
.banner:after,
.banner__backgrounds:after,
.banner__content:after,
.main-content:after,
.footer:after,
.inner:after,
.layout:after,
.layout--full:after,
.blog-list__show-more:after,
.basic-page:after,
.navigation:after,
.navigation .mp-level:after,
.header:after,
.social-links-wrapper:after,
.form:after,
.search-results--listing:after,
.search-results--locations:after,
.social:after,
.map-panel__form:after,
.map-panel__form-inner:after,
.map-form__form-inner:after,
.list-bar:after,
.double-list-bar:after,
.blog-post:after,
.blog-post__header:after,
.social-timeline:after,
.restaurant-listing:after,
.restaurant-teaser:after,
.search-results--listing .restaurant-teaser__title:after,
.search-results--listing .restaurant-teaser__distance:after,
.search-results--listing .restaurant-teaser__address:after,
.search-results--listing .restaurant-teaser__telephone:after,
.search-results--listing .restaurant-teaser__time:after,
.search-results--listing .restaurant-teaser__icons-bar:after,
.search-results--listing .restaurant-teaser__takeaway:after,
.rm-item:after,
.rm-item__bottom:after,
.rm-item__prices-wrapper:after,
.rm-item-dietary:after,
.rm:after,
.rm-section:after,
.rm-section__content:after,
.product-section:after,
.product-listing:after,
.product-listing__content:after,
.product-sub-listing:after,
.product-sub-listing__content:after,
.rm-new-product:after,
.product-section-hiw:after,
.product-section-hiw__price:after,
.add-section:after,
.add-section__listing:after,
.calorie-counter__total:after,
.filter__submit:after,
.dietary-info__sauces:after,
.tabs:after,
.nandoscard-dashboard__inner:after,
.rewards-info:after,
.rewards-info__inner:after,
.the-app__content:after {
clear: both; }
/**
* Add angled lines
* Will add lines and basic spacing.
* Spacing can be overridden at any point in the selector
*/
/**
* H5Boilerplate - Placeholders/Helpers
*/
/**
* Clearfix - can be found in thr helpers/mixin folder
*/
/**
* Hide content
*/
/**
* Link reset.
*/
/**
* Text Replacement Helper
*/
.txt-replacement,
.slick-dots > li a,
.logo {
overflow: hidden;
text-indent: 101%;
white-space: nowrap; }
/**
* Text align Center
*/
.txt-center {
text-align: center; }
/*
* Position center - horizontality
*/
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden; }
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
visibility: hidden; }
.slick-slider {
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0; }
.slick-list:focus {
outline: none; }
.slick-list.dragging {
cursor: pointer;
cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
.slick-track {
position: relative;
top: 0;
left: 0;
display: block; }
.slick-track:before,
.slick-track:after {
display: table;
content: ''; }
.slick-track:after {
clear: both; }
.slick-loading .slick-track {
visibility: hidden; }
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px; }
[dir='rtl'] .slick-slide {
float: right; }
.slick-slide img {
display: block; }
.slick-slide.slick-loading img {
display: none; }
.slick-slide.dragging img {
pointer-events: none; }
.slick-initialized .slick-slide {
display: block; }
.slick-loading .slick-slide {
visibility: hidden; }
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent; }
.slick-arrow.slick-hidden {
display: none; }
/**
* PARTIALS
* Import any partials here
*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, main, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html, body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
text-rendering: geometricPrecision; }
html {
-webkit-tap-highlight-color: transparent;
font-size: 16px;
height: 100%; }
body {
background: #dcdcdc;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 600;
line-height: 1.2;
overflow-x: hidden; }
hr {
border: 0 none;
border-top: 1px solid #000000;
clear: both;
margin: 0;
padding: 0; }
img {
display: block;
height: auto;
max-width: 100%;
width: auto;
vertical-align: middle; }
a {
text-decoration: none;
color: #ff2350; }
a:hover {
text-decoration: underline; }
small {
font-size: 85%; }
[role="button"] {
cursor: pointer; }
.accordion__location, .rm-item--new .rm-item__title-wrapper:after, .rm-new-product__title:before, .calorie-counter__close:before, .rm-features__link--filters, .rm-features__link--calorie,
.icon,
.blog-post__social-link > a:before,
.add-to-cal,
.show-information {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.icon--wifi:before {
content: "\e91d"; }
.icon--plus:before, .accordion__location:before {
content: "\e91c"; }
.icon--plus-selected:before, .accordion__location:hover:before, .accordion__location--active:before {
content: "\e91b"; }
.icon--contact-anything:before {
content: "\e917"; }
.icon--contact-call:before {
content: "\e918"; }
.icon--contact-chat:before {
content: "\e919"; }
.icon--contact-your-experience:before {
content: "\e91a"; }
.icon--card:before {
content: "\e912"; }
.icon--chilli2:before {
content: "\e913"; }
.icon--form:before {
content: "\e914"; }
.icon--knife-and-fork:before {
content: "\e915"; }
.icon--new:before, .rm-new-product__title:before {
content: "\e909"; }
.icon--tick:before {
content: "\e90a"; }
.icon--cross:before, .calorie-counter__close:before {
content: "\e90f"; }
.icon--select-arrows:before {
content: "\e90d"; }
.icon--chilli:before {
content: "\e911"; }
.icon--info:before, .show-information:before {
content: "\e90e";
color: #023e5f; }
.icon--info-selected:before, .show-information.js-show-information--active:before, .show-information.js-show-information--active:hover:before {
content: "\e910"; }
.icon--chevron-left2:before {
content: "\f053"; }
.icon--chevron-right2:before {
content: "\f054"; }
.icon--arrow-left:before {
content: "\f060"; }
.icon--arrow-right:before {
content: "\f061"; }
.icon--arrow-up:before {
content: "\f062"; }
.icon--arrow-down:before {
content: "\f063"; }
.icon--chevron-up:before {
content: "\f077"; }
.icon--chevron-down:before {
content: "\f079"; }
.icon--camera-retro:before, .icon--instagram:before {
content: "\f083"; }
.icon--twitter:before, .blog-post .twitter:before {
content: "\f099"; }
.icon--facebook:before, .blog-post .facebook:before {
content: "\f09a"; }
.icon--google-plus:before, .blog-post .pinterest:before, .blog-post .google:before {
content: "\f0d5"; }
.icon--youtube:before {
content: "\f16a"; }
.icon--chevron-left:before {
content: "\f0a4"; }
.icon--chevron-right:before {
content: "\f078"; }
.icon--search:before {
content: "\e900"; }
.icon--search-hovered:before, .utility-nav__item:hover .icon--search:before,
.utility-nav__item.active .icon--search:before {
content: "\e901"; }
.icon--lactose--active:before {
content: "\e622"; }
.icon--vegan:before {
content: "\e623"; }
.icon--vegan--active:before {
content: "\e624"; }
.icon--nut:before {
content: "\e625"; }
.icon--nut--active:before {
content: "\e626"; }
.icon--meat:before {
content: "\e627"; }
.icon--meat-active:before {
content: "\e628"; }
.icon--lactose:before {
content: "\e629"; }
.icon--gluten:before {
content: "\e62a"; }
.icon--gluten--active:before {
content: "\e62b"; }
.icon--View_List:before {
content: "\e620"; }
.icon--filter:before, .rm-features__link--filters:before {
content: "\e61c"; }
.icon--periometer:before {
content: "\e61d"; }
.icon--calendar-yes:before {
content: "\e609"; }
.icon--calendar-no:before {
content: "\e60a"; }
.icon--takeaway .path1:before {
content: "\e619";
color: black; }
.icon--takeaway .path2:before {
content: "\e61a";
margin-left: -1em;
color: white; }
.icon--gridview:before {
content: "\e601"; }
.icon--mappin:before {
content: "\e604"; }
.icon--location:before {
content: "\e605"; }
.icon--baby:before {
content: "\e606"; }
.icon--halal:before {
content: "\e602"; }
.icon--outdoor:before {
content: "\e600"; }
.icon--wheelchair:before {
content: "\e603"; }
.icon--information:before {
content: "\e621"; }
.icon--information-selected:before, .show-information:hover:before {
content: "\e916"; }
.icon--view--grid:before {
content: "\e61e"; }
.icon--add-cal:before, .add-to-cal:before {
content: "\e61f"; }
.icon--add-active:before, .touch .add-to-cal:active:before,
.no-touch .add-to-cal:hover:before {
content: "\e803"; }
.icon--cal-heart:before, .rm-features__link--calorie:before {
content: "\e61b"; }
.icon--cal-counter-active:before, .rm-features__link--calorie:hover:before, .rm-features__link--calorie.js--feature-active:before {
content: "\e800"; }
.icon--filter-active:before, .rm-features__link--filters:hover:before, .rm-features__link--filters.js--feature-active:before {
content: "\e801"; }
.icon--periometer-active:before {
content: "\e802"; }
.icon--spotify:before {
content: "\e908"; }
.icon--comment:before {
content: "\f075"; }
.icon--heart:before {
content: "\2665"; }
.icon--mail-reply:before {
content: "\f051"; }
.icon--star:before {
content: "\f02a"; }
.icon--retweet:before {
content: "\f07a"; }
.icon--help_icon:before {
content: "\e90a"; }
.icon--profile_icon:before {
content: "\e90b"; }
.icon--search_icon:before {
content: "\e90c"; }
.icon--user:before {
content: "\e902"; }
.icon--user-hovered:before, .utility-nav__item:hover .icon--user:before,
.utility-nav__item.active .icon--user:before {
content: "\e903"; }
.icon--help:before {
content: "\e904"; }
.icon--help-hovered:before, .utility-nav__item:hover .icon--help:before,
.utility-nav__item.active .icon--help:before {
content: "\e905"; }
.icon--left-arrow:before {
content: "\e90b"; }
.icon--right-arrow:before {
content: "\e90c"; }
/**
* Animations
* Add any animations that are being used in more than one place
*/
/**
* Heartbeat
* @usage menu-item add to call
* @usage bean
*/
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
/**
* Form elements
* All styling for baseline form elements and any helpers should live here.
*/
/**
* Button
* These styles can also be added to link tags
*/
button, .btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0 none;
-webkit-border-radius: 0;
border-radius: 0;
background: none;
display: inline-block;
cursor: pointer;
margin: 0;
padding: 0;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation; }
/**
* Cta classes can be added to buttons.
*/
button {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 600; }
/**
* Form Element
*/
form {
width: 100%;
margin: 0 auto; }
/**
* Form Elements
*/
select::-ms-expand {
display: none; }
.form-element select,
.form-element textarea,
.form-element input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .form-element__select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0 none;
-webkit-border-radius: 0;
border-radius: 0;
display: block;
width: 100%; }
.form-element select,
.form-element textarea,
.form-element input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
font-size: 18px;
font-size: 1.125rem;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
line-height: 2.4;
text-align: center; }
@media (min-width: 48rem) {
.form-element select,
.form-element textarea,
.form-element input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
font-size: 16px;
font-size: 1rem; } }
@media (min-width: 75rem) {
.form-element select,
.form-element textarea,
.form-element input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
font-size: 20px;
font-size: 1.25rem; } }
.form-element select:placeholder-shown, .form-element select:focus,
.form-element textarea:placeholder-shown,
.form-element textarea:focus,
.form-element input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):placeholder-shown,
.form-element input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus {
color: #000000; }
.form-element .required {
color: #731717; }
@media (min-width: 48rem) {
.form-element--half {
width: 50%;
float: left; } }
@media (min-width: 48rem) {
.form-element--one-third {
width: 33.3333%;
float: left; } }
@media (min-width: 48rem) {
.form-element--two-thirds {
width: 66.6666%;
float: left; } }
.form-element .cta {
margin-top: 16px;
margin-top: 1rem; }
.form-element__label {
color: #000000;
display: block;
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 16px;
margin-bottom: 1rem;
text-align: center; }
@media (min-width: 75rem) {
.form-element__label {
font-size: 22px;
font-size: 1.375rem; } }
.form-element__label:first-letter {
text-transform: uppercase; }
.form-element__input,
.form-element__email {
background-color: #FFFFFF;
color: #b2b2b2;
border: 1px solid #b2b2b2;
height: 40px;
font-size: 18px;
font-size: 1.125rem;
padding: 0 14px;
padding: 0 0.875rem; }
@media (min-width: 75rem) {
.form-element__input,
.form-element__email {
font-size: 16px;
font-size: 1rem; } }
.form-element__input::-webkit-input-placeholder, .form-element__input:-moz-placeholder, .form-element__input::-moz-placeholder, .form-element__input:-ms-input-placeholder,
.form-element__email::-webkit-input-placeholder,
.form-element__email:-moz-placeholder,
.form-element__email::-moz-placeholder,
.form-element__email:-ms-input-placeholder {
color: #b2b2b2; }
.form-element__input::-moz-placeholder,
.form-element__email::-moz-placeholder {
opacity: 1; }
@media (min-width: 48rem) {
.form-element__input,
.form-element__email {
height: 46px; } }
.form-element__select {
padding: 0 24px 0 14px;
padding: 0 1.5rem 0 0.875rem;
font-size: 20px;
font-size: 1.25rem;
height: 40px;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
line-height: 2.3;
color: #b2b2b2;
border: 1px solid #b2b2b2;
background: #FFFFFF url("../images/layout/select_arrow-double.png") center right no-repeat;
background-size: 28px 17px; }
@media (min-width: 48rem) {
.form-element__select {
padding: 0 40px 0 14px;
padding: 0 2.5rem 0 0.875rem;
height: 46px;
line-height: 2.3; } }
.form-element__select:focus {
cursor: pointer; }
/**f
* Form element checkbox
*/
input[type="checkbox"] {
display: none; }
input[type="checkbox"] + label {
padding-left: 35px;
padding-left: 2.1875rem;
font-size: 18px;
font-size: 1.125rem;
display: inline-block;
position: relative;
cursor: pointer; }
@media (min-width: 75rem) {
input[type="checkbox"] + label {
font-size: 22px;
font-size: 1.375rem; } }
input[type="checkbox"] + label:before {
display: inline-block;
content: '';
width: 20px;
height: 20px;
background: #FFFFFF;
border: none;
position: absolute;
top: 0;
left: 0; }
input[type="checkbox"]:checked + label:after {
font-family: 'icomoon';
font-size: 20px;
font-size: 1.25rem;
display: inline-block;
content: "\e90a";
width: 20px;
height: 20px;
background: none;
color: #ff2350;
border: none;
position: absolute;
top: -3px;
left: 0; }
/**
* Form element radio
*/
.form-element__radio label {
font-size: 18px;
font-size: 1.125rem; }
@media (min-width: 75rem) {
.form-element__radio label {
font-size: 22px;
font-size: 1.375rem; } }
.form-element__radio > label {
display: inline-block;
margin-right: 50px;
margin-right: 3.125rem; }
.form-radios {
display: inline-block;
font-size: 0; }
.form-type-radio {
display: inline-block;
margin-right: 35px;
margin-right: 2.1875rem; }
.form-type-radio:last-child {
margin-right: 0; }
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
clip: rect(0 0 0 0); }
input[type="radio"] + label span {
display: inline-block;
width: 25px;
height: 25px;
margin: -1px 12px 0 0;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #ff2350;
border: 5px solid transparent; }
input[type="radio"]:checked + label span {
background-color: #FFFFFF;
border: 7px solid #ff2350; }
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transition-property: background-color, border;
transition-property: background-color, border; }
/**
* Fieldset
*/
fieldset {
margin: 0 auto 35px;
margin: 0 auto 2.1875rem;
float: none;
clear: both; }
@media (min-width: 64rem) {
fieldset {
margin: 0 auto 64px;
margin: 0 auto 4rem; } }
.fieldset--password .form-element:last-child {
margin-right: 0;
margin-right: 0; }
/**
* Textarea
*/
textarea {
font-size: 16px;
font-size: 1rem;
border: 1px solid #b2b2b2;
resize: none;
padding: 14px;
padding: 0.875rem; }
.form-element--salutations {
float: left;
width: 30%;
margin: 0 10px 30px 0;
margin: 0 0.625rem 1.875rem 0; }
@media (min-width: 48rem) {
.form-element--salutations {
margin: 0 40px 0 0;
margin: 0 2.5rem 0 0;
width: 151px; }
.form-element--salutations select {
padding-left: 40px;
padding-left: 2.5rem; } }
.form-element--firstname {
float: left;
width: 155px;
width: -webkit-calc(70% - 10px);
width: calc(70% - 10px);
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; }
@media (min-width: 48rem) {
.form-element--firstname {
margin: 0 38px 0 0;
margin: 0 2.375rem 0 0;
width: 215px; } }
.form-element--lastname {
clear: both; }
@media (min-width: 48rem) {
.form-element--lastname {
clear: none;
float: left;
width: 273px; } }
.form-element--datefield {
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; }
@media (min-width: 48rem) {
.form-element--datefield {
display: inline-block;
width: 510px; }
.form-element--datefield select {
padding-left: 40px;
padding-left: 2.5rem; } }
.form-element--datefield .form-element__items-wrapper {
overflow: hidden; }
.form-element--datefield .form-element__wrapper {
float: left;
width: 80px;
width: -webkit-calc(33.3% - 7px);
width: calc(33.3% - 7px);
margin: 0 10px 0 0;
margin: 0 0.625rem 0 0; }
.form-element--datefield .form-element__wrapper:last-child {
margin: 0;
margin: 0; }
@media (min-width: 48rem) {
.form-element--datefield .form-element__wrapper {
width: 151px;
margin: 0 20px 0 0;
margin: 0 1.25rem 0 0; } }
.form-element--timefield {
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; }
@media (min-width: 48rem) {
.form-element--timefield {
display: inline-block;
width: 306px; } }
.form-element--timefield .form-element__wrapper {
float: left;
width: 112px;
width: -webkit-calc(50% - 5px);
width: calc(50% - 5px);
margin: 0 10px 0 0;
margin: 0 0.625rem 0 0; }
.form-element--timefield .form-element__wrapper:last-child {
margin: 0;
margin: 0; }
@media (min-width: 48rem) {
.form-element--timefield .form-element__wrapper {
width: 142px;
margin: 0 20px 0 0;
margin: 0 1.25rem 0 0; } }
.form-element--nandos-card {
margin: 0 auto; }
@media (min-width: 48rem) {
.form-element--nandos-card {
max-width: 300px; } }
.form-element--postcode {
width: 150px;
margin: 0 auto; }
@media (min-width: 48rem) {
.form-element--postcode {
width: 136px;
margin: 0 auto; } }
.form-element--email,
.form-element--tel,
.form-element--password,
.form-element--address,
.form-element--roi-checkbox {
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; }
@media (min-width: 48rem) {
.form-element--email,
.form-element--tel,
.form-element--password,
.form-element--address,
.form-element--roi-checkbox {
float: left;
max-width: 280px;
margin: 0 110px 0 0;
margin: 0 6.875rem 0 0;
width: 100%; } }
.form-element--tel {
margin-right: 0;
margin-right: 0; }
.form-element--restaurants {
padding: 30px 0 0 0;
padding: 1.875rem 0 0 0;
margin: 0;
clear: both;
width: 100%;
overflow: hidden; }
.form-element__fieldset--address {
max-width: 280px; }
.form-element__fieldset--address .form-element--address {
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; }
/*
* Submit button
*/
.form-element__submit-button {
text-align: center; }
/**
* Special Cases
*/
@media (min-width: 48rem) {
.form-element--email + .form-element--tel {
float: right; } }
/*
* element - do you have a nandos card
*/
.fieldset--show-more .form-element {
margin: 30px auto 0;
margin: 1.875rem auto 0; }
@media (min-width: 48rem) {
.fieldset--show-more .form-element {
width: 380px; } }
@media (min-width: 48rem) {
.form-element__fieldset--confirm-email {
max-width: 650px; }
.form-element__fieldset--confirm-email .form-element--email {
max-width: 300px; }
.form-element__fieldset--confirm-email .form-element--email:last-child {
float: right; } }
@media (min-width: 48rem) {
.fieldset--old-password {
max-width: 300px; }
.fieldset--old-password .form-element {
max-width: 300px; } }
@media (min-width: 48rem) {
.fieldset--password {
max-width: 670px; } }
.form-element__fieldset--receipt-code {
max-width: 280px; }
.form-element__fieldset--receipt-code legend {
margin-bottom: 30px;
margin-bottom: 1.875rem; }
.form-element__fieldset--receipt-code .form-element {
float: left;
display: block;
width: 80px;
padding: 0;
margin: 0 20px 0 0;
margin: 0 1.25rem 0 0; }
.form-element__fieldset--receipt-code .form-element:last-child {
margin: 0; }
.form-element__fieldset--single {
max-width: 280px; }
.form-element__fieldset-actions {
text-align: center; }
.form-element__fieldset--contact-no {
max-width: 280px; }
@media (min-width: 48rem) {
.form-element__fieldset--contact-no .form-element-tel:first-child {
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; } }
.form-element__fieldset--neat {
margin-bottom: 15px;
margin-bottom: 0.9375rem; }
.form-element__fieldset--neat-top legend {
margin-bottom: 15px;
margin-bottom: 0.9375rem; }
/**
* Form element - Fake submit
* All form submits will use the Fake submit technique
*/
.no-js .form-element__submit-handler .cta--fake {
display: none; }
.js .form-element__submit-handler .form-element {
display: none; }
h1, h2, h3, h4, h5, h6 {
font-family: nandos, Helvetica, Arial, Geneva, sans-serif;
font-weight: 400; }
h1 {
font-size: 40px;
font-size: 2.5rem; }
h2, .help-qa__title {
font-size: 38px;
font-size: 2.375rem;
line-height: 1.1; }
@media (min-width: 30rem) {
h2, .help-qa__title {
font-size: 54px;
font-size: 3.375rem; } }
@media (min-width: 75rem) {
h2, .help-qa__title {
font-size: 60px;
font-size: 3.75rem; } }
h3 {
font-size: 36px;
font-size: 2.25rem; }
h4 {
font-size: 24px;
font-size: 1.5rem; }
.pane__copy {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.2; }
@media (min-width: 30rem) {
.pane__copy {
font-size: 20px;
font-size: 1.25rem; } }
@media (min-width: 75rem) {
.pane__copy {
font-size: 22px;
font-size: 1.375rem; } }
/**
* Banner
*/
.banner {
-webkit-backface-visibility: visible;
backface-visibility: visible;
overflow: visible;
position: relative;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
z-index: 60;
height: auto; }
.banner__backgrounds {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: skewY(-3deg) translateZ(0);
transform: skewY(-3deg) translateZ(0);
-webkit-transform-origin: 50% 51%;
-ms-transform-origin: 50% 51%;
transform-origin: 50% 51%;
width: 100%; }
.banner__backgrounds.slick-slider {
height: 93%;
position: absolute;
top: -12px;
left: 0;
bottom: 0;
right: 0;
z-index: 10; }
.banner__backgrounds .background {
height: 100%;
border-bottom: 2px solid #000000; }
.banner__backgrounds .slick-list,
.banner__backgrounds .slick-track {
height: 100%; }
.banner__content {
position: relative;
height: 100%;
width: 100%;
z-index: 100; }
.full-banner {
height: 100%;
height: 100vh; }
@media (max-height: 600px) {
.full-banner {
height: 600px; } }
.full-banner .banner,
.full-banner .banner__content {
height: 100%;
height: 100vh; }
@media (max-height: 600px) {
.full-banner .banner,
.full-banner .banner__content {
height: 600px; } }
.full-banner .banner .slider,
.full-banner .banner .slick-list,
.full-banner .banner .slick-track,
.full-banner .banner__content .slider,
.full-banner .banner__content .slick-list,
.full-banner .banner__content .slick-track {
height: 100%;
height: 100vh; }
@media (max-height: 600px) {
.full-banner .banner .slider,
.full-banner .banner .slick-list,
.full-banner .banner .slick-track,
.full-banner .banner__content .slider,
.full-banner .banner__content .slick-list,
.full-banner .banner__content .slick-track {
height: 600px; } }
.full-banner .banner__backgrounds {
height: 100%;
height: 100vh; }
@media (max-height: 600px) {
.full-banner .banner__backgrounds {
height: 600px; } }
.full-banner .banner__backgrounds .slider,
.full-banner .banner__backgrounds .slick-list,
.full-banner .banner__backgrounds .slick-track {
height: 97%;
height: 97vh; }
@media (max-height: 600px) {
.full-banner .banner__backgrounds .slider,
.full-banner .banner__backgrounds .slick-list,
.full-banner .banner__backgrounds .slick-track {
height: 582px; } }
@media (min-width: 48rem) {
.full-banner .banner__backgrounds .slider,
.full-banner .banner__backgrounds .slick-list,
.full-banner .banner__backgrounds .slick-track {
height: 97.8%;
height: 97.8vh; } }
@media (min-width: 48rem) and (max-height: 600px) {
.full-banner .banner__backgrounds .slider,
.full-banner .banner__backgrounds .slick-list,
.full-banner .banner__backgrounds .slick-track {
height: 587px; } }
@media (min-width: 64rem) {
.full-banner .banner__backgrounds .slider,
.full-banner .banner__backgrounds .slick-list,
.full-banner .banner__backgrounds .slick-track {
height: 93.8%;
height: 93.8vh; } }
@media (min-width: 64rem) and (max-height: 600px) {
.full-banner .banner__backgrounds .slider,
.full-banner .banner__backgrounds .slick-list,
.full-banner .banner__backgrounds .slick-track {
height: 563px; } }
.content-wrapper {
position: relative;
z-index: 50;
margin: -65px 0 0 0;
margin: -4.0625rem 0 0 0; }
@media (min-width: 48rem) {
.content-wrapper {
margin: -65px 0 0 0;
margin: -4.0625rem 0 0 0; } }
@media (min-width: 56.2rem) {
.content-wrapper {
margin: -70px 0 0 0;
margin: -4.375rem 0 0 0; } }
@media (min-width: 64rem) {
.content-wrapper {
margin: -110px 0 0 0;
margin: -6.875rem 0 0 0; } }
@media (min-width: 75rem) {
.content-wrapper {
margin: -120px 0 0 0;
margin: -7.5rem 0 0 0; } }
@media (min-width: 90rem) {
.content-wrapper {
margin: -125px 0 0 0;
margin: -7.8125rem 0 0 0; } }
@media (min-width: 112.5rem) {
.content-wrapper {
margin: -130px 0 0 0;
margin: -8.125rem 0 0 0; } }
@media (min-width: 112.5625rem) {
.content-wrapper {
margin: -170px 0 0 0;
margin: -10.625rem 0 0 0; } }
.banner, .main-content, .footer {
clear: both; }
.inner {
margin: 0 auto;
width: 100%;
max-width: 1800px; }
.layout {
clear: both; }
.layout--full {
clear: both; }
@media (min-width: 75rem) {
.layout--half {
width: 50%;
float: left; } }
@media (min-width: 75rem) {
.layout--two-thirds {
width: 66.66667%;
float: left; } }
@media (min-width: 64rem) {
.layout--third {
width: 33.33333%;
float: left; } }
@media (min-width: 75rem) {
.layout--fourth {
width: 25%;
float: left; } }
@media (min-width: 75rem) {
.layout--fifth {
width: 20%;
float: left; } }
@media (min-width: 75rem) {
.main-content > .pane:last-child .pane__content {
padding-bottom: 254px;
padding-bottom: 15.875rem; } }
.main-content > .layout--full:first-child .pane__content {
padding-top: 110px;
padding-top: 6.875rem; }
@media (min-width: 75rem) {
.main-content > .layout--full:first-child .pane__content {
padding-top: 280px;
padding-top: 17.5rem; } }
@media (min-width: 90rem) {
.main-content > .layout--full:first-child .pane__content {
padding-top: 230px;
padding-top: 14.375rem; } }
.main-content > .layout--half:first-child .pane__content {
padding-top: 110px;
padding-top: 6.875rem; }
@media (min-width: 48rem) {
.main-content > .layout--half:first-child .pane__content {
padding-top: 225px;
padding-top: 14.0625rem; } }
@media (min-width: 75rem) {
.main-content > .layout--half:first-child .pane__content {
padding-top: 250px;
padding-top: 15.625rem; } }
@media (min-width: 90rem) {
.main-content > .layout--half:first-child .pane__content {
padding-top: 230px;
padding-top: 14.375rem; } }
@media (min-width: 112.5rem) {
.main-content > .layout--half:first-child .pane__content {
padding-top: 280px;
padding-top: 17.5rem; } }
@media (min-width: 75rem) {
.main-content > .layout--half:first-child + .layout--half .pane__content {
padding-top: 250px;
padding-top: 15.625rem; } }
@media (min-width: 90rem) {
.main-content > .layout--half:first-child + .layout--half .pane__content {
padding-top: 230px;
padding-top: 14.375rem; } }
@media (min-width: 112.5rem) {
.main-content > .layout--half:first-child + .layout--half .pane__content {
padding-top: 280px;
padding-top: 17.5rem; } }
@media (min-width: 75rem) {
.flexbox .main-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
@media (min-width: 75rem) {
.flexbox .main-content > .slider {
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
width: 100%; } }
@media (min-width: 75rem) {
.flexbox .main-content .the-app,
.flexbox .main-content .answer,
.flexbox .main-content .help-listing,
.flexbox .main-content > .content-form,
.flexbox .main-content > .pane {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
min-height: auto; } }
@media (min-width: 75rem) {
.flexbox .main-content .the-app.layout--full,
.flexbox .main-content .answer.layout--full,
.flexbox .main-content .help-listing.layout--full,
.flexbox .main-content > .content-form.layout--full,
.flexbox .main-content > .pane.layout--full {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%; } }
@media (min-width: 75rem) {
.flexbox .main-content .the-app.layout--half,
.flexbox .main-content .answer.layout--half,
.flexbox .main-content .help-listing.layout--half,
.flexbox .main-content > .content-form.layout--half,
.flexbox .main-content > .pane.layout--half {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%; } }
@media (min-width: 75rem) {
.flexbox .main-content .the-app.layout--third,
.flexbox .main-content .answer.layout--third,
.flexbox .main-content .help-listing.layout--third,
.flexbox .main-content > .content-form.layout--third,
.flexbox .main-content > .pane.layout--third {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.33%;
-ms-flex: 0 0 33.33%;
flex: 0 0 33.33%; } }
.flexbox .main-content .restaurant-details-wrapper,
.flexbox .main-content .search-results {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%; }
@media (min-width: 75rem) {
.flexbox .main-content .layout--fourth {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%; } }
.no-scroll {
height: 100%;
width: 100%;
overflow: hidden; }
.slick-slide {
outline: transparent; }
.slick-arrow {
position: absolute;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
z-index: 900;
text-decoration: none;
-webkit-animation: side-arrow-bounce 0.5s infinite alternate;
animation: side-arrow-bounce 0.5s infinite alternate; }
.slick-arrow span {
display: none; }
.slick-arrow.slick-next {
-webkit-animation: side-arrow-bounce 0.5s infinite alternate-reverse;
animation: side-arrow-bounce 0.5s infinite alternate-reverse; }
.slick-dots {
position: absolute;
bottom: 6%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
@media (min-width: 48rem) {
.slick-dots {
bottom: 17%; } }
.slick-dots > li {
display: inline-block;
margin-right: 3px;
margin-right: 0.1875rem; }
.slick-dots > li:last-child {
margin-right: 0;
margin-right: 0; }
.slick-dots > li a {
display: block;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 12px;
width: 12px;
border: 1px solid #FFFFFF;
background: transparent; }
.slick-dots .slick-active a {
background: #FFFFFF; }
.listing--swipe-to-grid .slick-arrow {
position: absolute;
top: auto;
bottom: -18px;
-webkit-transform: translate(0, 50%);
-ms-transform: translate(0, 50%);
transform: translate(0, 50%);
color: black; }
.listing--swipe-to-grid .slick-next {
right: 0;
content: " "; }
.listing--swipe-to-grid .slick-prev {
left: 0;
content: " "; }
.listing--swipe-to-grid .slick-dots {
bottom: -25px; }
.listing--swipe-to-grid .slick-dots a {
border: 1px solid black; }
.listing--swipe-to-grid li.slick-active a {
background: black;
cursor: pointer; }
@-webkit-keyframes side-arrow-bounce {
from {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%); }
to {
-webkit-transform: translate(2px, 50%);
transform: translate(2px, 50%); } }
@keyframes side-arrow-bounce {
from {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%); }
to {
-webkit-transform: translate(2px, 50%);
transform: translate(2px, 50%); } }
/**
*
*/
/* */
/* Animation based styles added by Steven */
/******************************************/
/* // END Animation based styles added by Steven \ */
/****************************************************/
/**
* Page - Restaurant menu
*/
.page--restaurant-menu .down-arrow {
display: none;
visibility: hidden; }
.pane--restaurant-details .background-inner {
background: transparent;
background: rgba(0, 0, 0, 0.35);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
@media (min-width: 75rem) {
.restaurant-details-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
.restaurant-details-wrapper .map {
width: 100%;
position: relative;
height: 555px;
height: 34.6875rem; }
@media (min-width: 48rem) {
.restaurant-details-wrapper .map {
height: 650px;
height: 40.625rem; } }
@media (min-width: 56.25rem) {
.restaurant-details-wrapper .map {
height: 860px;
height: 53.75rem;
width: 66%;
display: inline-block;
float: left; } }
@media (min-width: 75rem) {
.restaurant-details-wrapper .map {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: auto;
float: none; } }
.restaurant-details-wrapper #map {
height: 555px;
height: 34.6875rem; }
@media (min-width: 48rem) {
.restaurant-details-wrapper #map {
height: 650px;
height: 40.625rem; } }
@media (min-width: 56.25rem) {
.restaurant-details-wrapper #map {
height: 860px;
height: 53.75rem; } }
@media (min-width: 75rem) {
.restaurant-details-wrapper .timetable--collapsed .map {
width: -webkit-calc(100% - 500px);
width: calc(100% - 500px);
width: calc(100% - 500px); } }
@media (min-width: 85rem) {
.restaurant-details-wrapper .timetable--collapsed .map {
width: -webkit-calc(100% - 520px);
width: calc(100% - 520px);
width: calc(100% - 520px); } }
@media (min-width: 95rem) {
.restaurant-details-wrapper .timetable--collapsed .map {
width: -webkit-calc(100% - 540px);
width: calc(100% - 540px);
width: calc(100% - 540px); } }
@media (min-width: 64rem) {
.page--restaurants .restaurant-listing--just-hatched .restaurant-teaser__title {
font-size: 60px;
font-size: 3.75rem; } }
/**
* Help section
* Special content panes etc can live here.
*/
.back-to-the-top {
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 18px solid #ff2350;
position: fixed;
right: 20px;
bottom: 100px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 200;
opacity: 0; }
.back-to-the-top:hover {
-webkit-transition: all 0.3s;
transition: all 0.3s;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 24px solid #ff2350; }
.back-to-the-top.js--show {
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 1; }
.back-to-the-top span {
display: none; }
.pane--bucket .pane__copy a {
color: #ff2350; }
.pane--bucket .pane__copy a:hover {
text-decoration: underline; }
/**
* Gift Card Landing page
*/
@media (min-width: 75rem) {
.pane--giftcard.pane--promo .pane__title {
font-size: 76px;
font-size: 4.75rem;
line-height: 73px;
line-height: 4.5625rem; } }
@media (min-width: 75rem) {
.pane--giftcard.pane--promo .copy {
font-size: 28px;
font-size: 1.75rem;
line-height: 33px;
line-height: 2.0625rem; } }
.form--giftcard-login {
max-width: 280px; }
@media (min-width: 48rem) {
.form--giftcard-login {
max-width: 200px; } }
@media (min-width: 64rem) {
.form--giftcard-login {
max-width: 250px; } }
@media (min-width: 112.5rem) {
.form--giftcard-login {
max-width: 300px; } }
.form--giftcard-login .form-element {
margin-right: 0;
max-width: 100%; }
/**
* Gift Card logged in page.
*/
.pane--giftcard-logged-in .pane__copy {
font-size: 18px;
font-size: 1.125rem;
line-height: 33px;
line-height: 2.0625rem;
font-weight: 400; }
@media (min-width: 48rem) {
.pane--giftcard-logged-in .pane__copy {
line-height: 53px;
line-height: 3.3125rem; } }
@media (min-width: 48rem) {
.giftcard-balance-copy {
font-size: 28px;
font-size: 1.75rem; } }
.giftcard-balance {
display: block;
font-weight: 600;
font-size: 30px;
font-size: 1.875rem;
line-height: 1.2;
margin-bottom: 16px;
margin-bottom: 1rem; }
@media (min-width: 48rem) {
.giftcard-balance {
font-size: 60px;
font-size: 3.75rem;
margin-bottom: 33px;
margin-bottom: 2.0625rem; } }
@media (min-width: 48rem) {
.giftcard-as-of {
font-size: 22px;
font-size: 1.375rem; } }
.pane--blog-details,
.pane--blog-listing {
position: relative; }
@media (min-width: 30rem) {
.pane--blog-details .pane__inner,
.pane--blog-listing .pane__inner {
padding: 0 7%; } }
@media (min-width: 48rem) {
.pane--blog-details .pane__inner,
.pane--blog-listing .pane__inner {
padding: 0 10%; } }
@media (min-width: 56.25rem) {
.pane--blog-details .pane__inner,
.pane--blog-listing .pane__inner {
padding: 0 13%; } }
@media (min-width: 64rem) {
.pane--blog-details .pane__inner,
.pane--blog-listing .pane__inner {
padding: 0 16%; } }
@media (min-width: 75rem) {
.pane--blog-details .pane__inner,
.pane--blog-listing .pane__inner {
padding: 0 20%; } }
@media (min-width: 112.5rem) {
.pane--blog-details .pane__inner,
.pane--blog-listing .pane__inner {
padding: 0 30%; } }
.pane--blog-details .calendar,
.pane--blog-listing .calendar {
margin: 0 auto 20px auto;
margin: 0 auto 1.25rem auto; }
.pane--blog-listing .list-bar {
background: #FFFFFF; }
@media (min-width: 48rem) {
.pane--blog-listing .list-bar {
background: none; } }
.pane--blog-listing .list-bar__inner {
width: 100%;
font-size: 22px;
font-size: 1.375rem;
padding: 0 10px;
padding: 0 0.625rem; }
@media (min-width: 48rem) {
.pane--blog-listing .list-bar__inner {
padding: 0; } }
.pane--blog-listing .list-bar__categories {
margin-left: 0;
text-align: center; }
.pane--blog-listing .list-bar__category {
float: none;
display: inline-block;
margin: 0 10px 10px 0;
margin: 0 0.625rem 0.625rem 0; }
.pane--blog-listing .list-bar__category a:hover {
text-decoration: underline; }
.pane--blog-listing .list-bar__category a.active {
color: #ff00b4; }
.pane--blog-listing .list-bar__category a.active:hover {
text-decoration: none; }
.blog-list__show-more {
clear: both;
background-color: #ebe2c9;
text-align: center;
position: absolute;
left: 0;
bottom: 0;
height: 90px;
height: 5.625rem;
line-height: 90px;
line-height: 5.625rem; }
@media (min-width: 48rem) {
.blog-list__show-more {
height: 140px;
height: 8.75rem;
line-height: 140px;
line-height: 8.75rem; } }
@media (min-width: 64rem) {
.blog-list__show-more {
height: 200px;
height: 12.5rem;
line-height: 200px;
line-height: 12.5rem; } }
.pane--blog-post {
height: 270px;
height: 16.875rem;
color: #FFFFFF;
cursor: pointer;
min-height: 0; }
@media (min-width: 48rem) {
.pane--blog-post {
height: 410px;
height: 25.625rem; } }
@media (min-width: 56.25rem) {
.pane--blog-post {
height: 520px;
height: 32.5rem; } }
@media (min-width: 64rem) {
.pane--blog-post {
height: 630px;
height: 39.375rem; } }
@media (max-width: 47rem) {
.pane--blog-post:first-child {
height: 300px; } }
.pane--blog-post .pane__inner {
background-color: transparent;
display: block;
-webkit-transition: background-color 1s;
transition: background-color 1s; }
.pane--blog-post .pane__inner:hover {
background-color: #ff00b4; }
.pane--blog-post:nth-child(1) .pane__inner:hover {
background-color: #ff6900; }
.pane--blog-post .pane__content {
padding: 0;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.pane--blog-post:last-child .pane__content {
padding: 0 !important; }
.pane--blog-post .pane__title {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
margin: 0 0 20px 0;
margin: 0 0 1.25rem 0;
font-size: 21px;
font-size: 1.3125rem; }
@media (min-width: 64rem) {
.pane--blog-post .pane__title {
font-size: 28px;
font-size: 1.75rem; } }
.pane--blog-post .pane__title a {
color: #FFFFFF;
display: inline-block;
line-height: 1.5; }
.pane--blog-post .pane__copy {
display: none;
visibility: hidden; }
@media (min-width: 64rem) {
.pane--blog-post .pane__copy {
display: block;
visibility: visible; } }
@media (min-width: 75rem) {
.pane--blog-post .pane__copy {
margin: 0 10%; } }
.pane--blog-post .pane__categories {
margin: 20px 0 0 0;
margin: 1.25rem 0 0 0; }
.pane--blog-post .calendar {
margin: 0 auto 20px auto;
margin: 0 auto 1.25rem auto; }
.blog-recent {
width: 100%;
padding-bottom: 35px;
padding-bottom: 2.1875rem; }
@media (min-width: 30rem) {
.blog-recent {
padding-bottom: 30px;
padding-bottom: 1.875rem; } }
@media (min-width: 75rem) {
.blog-recent {
padding-bottom: 0px;
padding-bottom: 0rem; } }
.blog-recent .pane__title {
line-height: 25px;
line-height: 1.5625rem; }
.page--explore .main-content > .layout--half:first-child + .layout--half .pane__content {
padding: 0 !important; }
.page--explore .pane--app {
background-image: url(../images/fabric/explore/appetite_pane_background.png);
background-position: left 15px;
background-repeat: no-repeat;
background-size: auto 100%;
background-color: #dcdcdc;
height: 850px;
height: 53.125rem; }
@media (min-width: 48rem) {
.page--explore .pane--app {
height: 800px;
height: 50rem;
background-position: left 25px; } }
@media (min-width: 56.25rem) {
.page--explore .pane--app {
background-position: left 35px; } }
@media (min-width: 64rem) {
.page--explore .pane--app {
background-position: left 45px; } }
@media (min-width: 75rem) {
.page--explore .pane--app {
background-position: left 65px; } }
@media (min-width: 90rem) {
.page--explore .pane--app {
background-position: left 75px; } }
@media (min-width: 112.5rem) {
.page--explore .pane--app {
background-position: left 90px; } }
.page--explore .pane--app .pane__inner {
position: static;
top: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none; }
@media (min-width: 75rem) {
.page--explore .pane--app .pane__inner {
padding: 0; } }
.page--explore .pane--app p {
max-width: 500px;
max-width: 31.25rem;
margin: 0 auto 0 auto;
margin: 0 auto 0 auto; }
@media (min-width: 30rem) {
.page--explore .pane--app p {
font-size: 18px;
font-size: 1.125rem; } }
.page--explore .pane--app .pane__title {
margin: 0px auto 20px auto;
margin: 0rem auto 1.25rem auto;
max-width: none; }
@media (min-width: 30rem) {
.page--explore .pane--app .pane__title {
font-size: 38px;
font-size: 2.375rem; } }
@media (min-width: 48rem) {
.page--explore .pane--app .pane__title {
font-size: 54px;
font-size: 3.375rem; } }
@media (min-width: 87rem) {
.page--explore .pane--app .pane__title {
font-size: 46px;
font-size: 2.875rem; } }
@media (min-width: 112.5rem) {
.page--explore .pane--app .pane__title {
font-size: 60px;
font-size: 3.75rem; } }
@media (min-width: 112.5rem) {
.page--explore .main-content > .pane--app {
min-height: 1000px; } }
.page--explore .app-iphone {
max-width: 224px;
max-width: 14rem;
width: 60%;
position: absolute;
bottom: 0%;
right: 50%;
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0); }
@media (min-width: 30rem) {
.page--explore .app-iphone {
width: 60%; } }
@media (min-width: 48rem) {
.page--explore .app-iphone {
max-width: 230px;
max-width: 14.375rem;
right: 70%; } }
@media (min-width: 75rem) {
.page--explore .app-iphone {
max-width: 230px;
max-width: 14.375rem;
right: 70%; } }
@media (min-width: 90rem) {
.page--explore .app-iphone {
max-width: 288px;
max-width: 18rem;
right: 70%;
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0);
width: 45%; } }
.page--explore .app-download-links a {
display: block; }
@media (min-width: 48rem) {
.page--explore .app-download-links {
width: auto;
position: absolute;
right: 10%;
bottom: 10%; } }
@media (min-width: 56.25rem) {
.page--explore .app-download-links {
right: 15%; } }
@media (min-width: 64rem) {
.page--explore .app-download-links {
right: 20%; } }
@media (min-width: 75rem) {
.page--explore .app-download-links {
right: 5%; } }
@media (min-width: 90rem) {
.page--explore .app-download-links {
right: 8%; } }
@media (min-width: 112.5rem) {
.page--explore .app-download-links {
right: 20%; } }
.page--explore .app-store {
margin: 32px auto 0 auto;
margin: 2rem auto 0 auto;
background: url("../images/fabric/front/apple_badge.png") no-repeat top left;
width: 233px;
width: 14.5625rem;
height: 69px;
height: 4.3125rem; }
.page--explore .google-play {
margin: 20px auto 0 auto;
margin: 1.25rem auto 0 auto;
background: url("../images/fabric/front/google_badge_larger.png") no-repeat top left;
width: 233px;
width: 14.5625rem;
height: 81px;
height: 5.0625rem; }
.page--explore .app-store + .google-play {
margin: 20px auto 0 auto;
margin: 1.25rem auto 0 auto; }
@media (min-width: 87rem) {
.page--explore .pane__store-links {
position: absolute;
right: 23%;
top: 70%;
-webkit-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
transform: translate(50%, -50%); } }
@media (min-width: 112.5rem) {
.page--explore .pane__store-links {
right: auto;
left: 70%;
-webkit-transform: translate(-20%, -50%);
-ms-transform: translate(-20%, -50%);
transform: translate(-20%, -50%); } }
.canvas-container {
text-align: center; }
.canvas-container #canvas-step-lines-all {
position: absolute;
left: 0; }
.waypoints {
width: 35px;
height: 212px;
background-image: url(../images/fabric/nandoscard/waypoints_sprite.png);
background-repeat: no-repeat;
background-position: 0px 0px;
position: fixed;
left: 3em;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
z-index: 10000;
display: none; }
@media (min-width: 48rem) {
.waypoints {
display: block; } }
.waypoints__item {
display: block;
width: 35px;
height: 20px;
background-image: url(../images/fabric/nandoscard/waypoints_sprite.png);
background-repeat: no-repeat;
background-position: 0px 0px; }
.waypoints__item:nth-child(2) {
margin-top: 43px;
margin-top: 2.6875rem;
background-position: 0px -63px; }
.waypoints__item:nth-child(3) {
margin-top: 46px;
margin-top: 2.875rem;
background-position: 0px -129px; }
.waypoints__item:nth-child(4) {
margin-top: 43px;
margin-top: 2.6875rem;
background-position: 0px -192px; }
.waypoints__item.is_active:nth-child(1) {
background-position: -35px 0px; }
.waypoints__item.is_active:nth-child(2) {
background-position: -70px -63px; }
.waypoints__item.is_active:nth-child(3) {
background-position: -105px -129px; }
.waypoints__item.is_active:nth-child(4) {
background-position: -140px -192px; }
.waypoints__link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }
.step__number {
width: 60px;
width: 3.75rem;
height: 60px;
height: 3.75rem;
line-height: 60px;
line-height: 3.75rem;
-webkit-border-radius: 50% 50%;
border-radius: 50% 50%;
background: #c51221;
color: white;
text-align: center;
position: relative;
top: 0px;
display: inline-block; }
@media (min-width: 48rem) {
.step__number {
width: 80px;
width: 5rem;
height: 80px;
height: 5rem;
line-height: 80px;
line-height: 5rem; } }
.step__number h5 {
font-size: 30px;
font-size: 1.875rem;
line-height: 60px;
line-height: 3.75rem;
display: inline-block;
width: 100%;
height: 100%;
font-size: 0; }
@media (min-width: 48rem) {
.step__number h5 {
line-height: 80px;
line-height: 5rem; } }
.step__number h5::after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 30px;
font-size: 1.875rem;
font-family: "icomoon"; }
@media (min-width: 48rem) {
.step__number h5::after {
font-size: 35px;
font-size: 2.1875rem; } }
.pane--nandos-card-hiw-1 h5::after {
content: "\e912"; }
.pane--nandos-card-hiw-2 h5::after {
content: "\e914"; }
.pane--nandos-card-hiw-3 h5::after {
content: "\e913"; }
.pane--nandos-card-hiw-4 h5::after {
content: "\e915"; }
.pane--nandos-card-hiw .pane__content {
position: relative;
width: 100%;
max-width: 300px;
margin: 90px auto 0 auto;
margin: 5.625rem auto 0 auto;
padding: 0;
top: inherit;
-webkit-transform: none;
-ms-transform: none;
transform: none;
overflow: hidden;
clear: both;
z-index: 1000; }
@media (min-width: 30rem) {
.pane--nandos-card-hiw .pane__content {
max-width: 440px; } }
@media (min-width: 48rem) {
.pane--nandos-card-hiw .pane__content {
max-width: 600px; } }
@media (min-width: 75rem) {
.pane--nandos-card-hiw .pane__content {
max-width: 600px;
margin: 0 auto;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
.pane--nandos-card-hiw .pane__title, .pane--nandos-card-hiw .pane__copy {
width: 100%;
max-width: 220px;
margin: 0 auto 12px auto;
margin: 0 auto 0.75rem auto; }
@media (min-width: 30rem) {
.pane--nandos-card-hiw .pane__title, .pane--nandos-card-hiw .pane__copy {
max-width: 360px; } }
@media (min-width: 48rem) {
.pane--nandos-card-hiw .pane__title, .pane--nandos-card-hiw .pane__copy {
max-width: 460px; } }
@media (min-width: 48rem) {
.pane--nandos-card-hiw.pane--left .pane__content {
max-width: 600px; } }
@media (min-width: 64rem) {
.pane--nandos-card-hiw.pane--left .pane__content {
margin: 90px auto 0 auto;
margin: 5.625rem auto 0 auto; } }
@media (min-width: 75rem) {
.pane--nandos-card-hiw.pane--left .pane__content {
margin: 0;
left: 5%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
.pane--nandos-card-hiw.pane--left .step__number {
float: right; }
.pane--nandos-card-hiw.pane--left .pane__title, .pane--nandos-card-hiw.pane--left .pane__copy {
text-align: right;
float: left; }
@media (min-width: 75rem) {
.pane--nandos-card-hiw.pane--right .pane__content {
margin: 0;
left: -webkit-calc(95% - 600px);
left: calc(95% - 600px); } }
.pane--nandos-card-hiw.pane--right .step__number {
float: left; }
.pane--nandos-card-hiw.pane--right .pane__title, .pane--nandos-card-hiw.pane--right .pane__copy {
text-align: left;
float: right; }
.pane--nandos-card-hiw.pane--nandos-card-hiw-3 {
background-color: #000000; }
.pane--nandos-card-hiw.pane--nandos-card-hiw-3 .chilli-wheel {
position: relative;
top: 70px;
top: 4.375rem;
width: 300px;
height: 300px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%); }
@media (min-width: 30rem) {
.pane--nandos-card-hiw.pane--nandos-card-hiw-3 .chilli-wheel {
width: 400px;
height: 400px; } }
@media (min-width: 64rem) {
.pane--nandos-card-hiw.pane--nandos-card-hiw-3 .chilli-wheel {
width: 520px;
height: 520px; } }
@media (min-width: 75rem) {
.pane--nandos-card-hiw.pane--nandos-card-hiw-3 .chilli-wheel {
position: absolute;
left: inherit;
right: 10%;
top: 50%;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
width: 400px;
height: 400px; } }
@media (min-width: 112.5rem) {
.pane--nandos-card-hiw.pane--nandos-card-hiw-3 .chilli-wheel {
width: 520px;
height: 520px; } }
.pane--nandos-card-hiw.pane--nandos-card-hiw-3 .segment {
width: 13%;
margin-left: -6.5%; }
@media (min-width: 48rem) {
.pane--nandos-card-hiw.pane--nandos-card-hiw-3 .segment {
width: 14%;
margin-left: -7%; } }
.pane--nandos-card-hiw.pane--nandos-card-hiw-4 .step__number {
float: left; }
@media (min-width: 75rem) {
.pane--nandos-card-hiw.pane--nandos-card-hiw-4 .step__number {
float: none;
margin-bottom: 35px;
margin-bottom: 2.1875rem; } }
.pane--nandos-card-hiw.pane--nandos-card-hiw-4 .pane__title, .pane--nandos-card-hiw.pane--nandos-card-hiw-4 .pane__copy {
text-align: left;
float: right; }
@media (min-width: 75rem) {
.pane--nandos-card-hiw.pane--nandos-card-hiw-4 .pane__title, .pane--nandos-card-hiw.pane--nandos-card-hiw-4 .pane__copy {
max-width: 600px;
text-align: center;
float: none; } }
.pane--dashboard {
height: 723px;
min-height: 732px;
min-height: 80vh; }
.basic-page {
width: 100%;
background-color: #dcdcdc;
padding: 80px 0 100px 0;
position: relative; }
@media (min-width: 30rem) {
.basic-page {
padding: 80px 5% 100px; } }
@media (min-width: 48rem) {
.basic-page {
padding: 100px 10% 200px;
background-image: url(../images/basic-page/basic_page_left_bg.png), url(../images/basic-page/basic_page_right_bg.png);
background-position: left top, right top;
background-repeat: no-repeat, no-repeat;
background-size: 15% auto, 15% auto; } }
@media (min-width: 56.25rem) {
.basic-page {
padding: 130px 14% 150px; } }
@media (min-width: 64rem) {
.basic-page {
padding: 130px 18% 150px;
background-size: 115px auto, 120px auto; } }
@media (min-width: 75rem) {
.basic-page {
padding: 140px 22% 150px;
background-size: 115px auto, 130px auto; } }
@media (min-width: 90rem) {
.basic-page {
padding: 140px 22% 150px; } }
@media (min-width: 112.5rem) {
.basic-page {
padding: 200px 22% 150px;
background-size: 115px auto, 147px auto; } }
.basic-page:before {
content: '';
width: 100%;
height: 1px;
background: #000000;
display: block;
position: relative;
left: 0;
top: 0px;
margin-bottom: 35px;
margin-bottom: 2.1875rem; }
.basic-page h2 {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 700;
font-size: 24px;
font-size: 1.5rem;
margin: 0 27px 20px 27px;
margin: 0 1.6875rem 1.25rem 1.6875rem; }
@media (min-width: 30rem) {
.basic-page h2 {
font-size: 28px;
font-size: 1.75rem;
margin: 0 0 20px 0;
margin: 0 0 1.25rem 0; } }
.basic-page h3 {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 700;
font-size: 20px;
font-size: 1.25rem;
margin: 0 27px 0px 27px;
margin: 0 1.6875rem 0rem 1.6875rem; }
@media (min-width: 30rem) {
.basic-page h3 {
font-size: 22px;
font-size: 1.375rem;
margin: 0 0 0px 0;
margin: 0 0 0rem 0; } }
.basic-page h4 {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 700;
font-size: 18px;
font-size: 1.125rem;
margin: 0 27px 0px 27px;
margin: 0 1.6875rem 0rem 1.6875rem; }
@media (min-width: 30rem) {
.basic-page h4 {
font-size: 20px;
font-size: 1.25rem;
margin: 0 0 0px 0;
margin: 0 0 0rem 0; } }
.basic-page p {
margin: 0 27px 10px 27px;
margin: 0 1.6875rem 0.625rem 1.6875rem;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.5; }
@media (min-width: 30rem) {
.basic-page p {
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; } }
@media (min-width: 64rem) {
.basic-page p {
font-size: 20px;
font-size: 1.25rem; } }
.basic-page a {
color: #ff2350;
text-decoration: underline; }
.basic-page img {
margin-bottom: 20px;
margin-bottom: 1.25rem; }
@media (min-width: 30rem) {
.basic-page img {
margin-bottom: 30px;
margin-bottom: 1.875rem; } }
.basic-page ol {
list-style-type: decimal;
list-style-position: inside;
margin: 40px 40px 40px 40px;
margin: 2.5rem 2.5rem 2.5rem 2.5rem; }
.basic-page ol ol {
margin: 25px 60px 25px 20px;
margin: 1.5625rem 3.75rem 1.5625rem 1.25rem; }
@media (min-width: 75rem) {
.basic-page ol {
margin: 80px 40px 80px 40px;
margin: 5rem 2.5rem 5rem 2.5rem; } }
.basic-page ol li {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
font-size: 20px;
font-size: 1.25rem; }
.basic-page ol li:last-child {
margin-bottom: 0; }
.basic-page ol li li {
margin-bottom: 10px;
margin-bottom: 0.625rem;
font-size: 18px;
font-size: 1.125rem; }
.basic-page ul {
list-style-position: inside;
list-style-type: disc;
margin: 40px 40px 40px 40px;
margin: 2.5rem 2.5rem 2.5rem 2.5rem; }
@media (min-width: 75rem) {
.basic-page ul {
margin: 80px 40px 80px 40px;
margin: 5rem 2.5rem 5rem 2.5rem; } }
.basic-page ul ul {
margin: 25px 60px 25px 20px;
margin: 1.5625rem 3.75rem 1.5625rem 1.25rem; }
.basic-page ul li {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
font-size: 20px;
font-size: 1.25rem; }
.basic-page ul li:last-child {
margin-bottom: 0; }
.basic-page ul li li {
margin-bottom: 10px;
margin-bottom: 0.625rem;
font-size: 18px;
font-size: 1.125rem; }
.basic-page table {
width: 100%;
margin: 40px auto;
margin: 2.5rem auto;
border: 0;
border-collapse: collapse;
max-width: -webkit-calc(100% - 54px);
max-width: calc(100% - 54px); }
@media (min-width: 30rem) {
.basic-page table {
max-width: 100%;
margin: 40px 0px;
margin: 2.5rem 0rem; } }
.basic-page table th {
background: #ff2350;
font-size: 22px;
font-size: 1.375rem;
text-align: left;
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
@media (min-width: 48rem) {
.basic-page table th {
padding: 28px 20px 28px 20px;
padding: 1.75rem 1.25rem 1.75rem 1.25rem;
border-bottom: 10px solid #dcdcdc;
position: relative; } }
.basic-page table td {
font-size: 18px;
font-size: 1.125rem;
text-align: left;
display: block;
padding: 10px 10px 10px 10px;
padding: 0.625rem 0.625rem 0.625rem 0.625rem; }
@media (min-width: 48rem) {
.basic-page table td {
padding: 24px 20px 24px 20px;
padding: 1.5rem 1.25rem 1.5rem 1.25rem;
display: table-cell; } }
.basic-page table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 6.5em;
display: inline-block; }
@media (min-width: 48rem) {
.basic-page table td:before {
display: none; } }
/*
MODULES
Import any modules here
*/
/**
* Call to Actions
*/
.cta {
font-size: 18px;
font-size: 1.125rem;
padding: 0px 33px 10px;
padding: 0rem 2.0625rem 0.625rem;
margin-top: 30px;
margin-top: 1.875rem;
background: #01E2C2;
color: #000000;
display: inline-block;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
line-height: 1;
position: relative;
overflow: visible;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: auto; }
@media (min-width: 48rem) {
.cta {
font-size: 20px;
font-size: 1.25rem;
padding: 0px 34px 9px;
padding: 0rem 2.125rem 0.5625rem; } }
@media (min-width: 90rem) {
.cta {
font-size: 22px;
font-size: 1.375rem;
padding: 0px 42px 10px;
padding: 0rem 2.625rem 0.625rem; } }
.cta:hover {
text-decoration: none;
background-color: #95E8DB; }
.cta:hover:before {
background: url("data:image/svg+xml;utf8,") no-repeat 0 0;
background-size: contain; }
.cta:hover:after {
background-color: #95E8DB; }
.cta:hover span:before {
-webkit-animation: cta-bounce 0.5s infinite alternate;
animation: cta-bounce 0.5s infinite alternate; }
.cta:hover span:after {
opacity: 1; }
.cta:before {
content: '';
position: absolute;
width: 50px;
height: 19px;
top: -14px;
left: 0;
background: url("data:image/svg+xml;utf8,") no-repeat 0 0;
background-size: contain; }
@media (min-width: 48rem) {
.cta:before {
height: 15px;
width: 46px;
top: -13px; } }
@media (min-width: 112.5rem) {
.cta:before {
height: 16px;
width: 54px;
top: -15px; } }
.cta:after {
content: '';
position: absolute;
width: auto;
height: 19px;
top: -14px;
margin-right: auto;
left: 49px;
right: 0;
background: #01E2C2; }
@media (min-width: 48rem) {
.cta:after {
height: 15px;
top: -13px;
left: 46px; } }
@media (min-width: 112.5rem) {
.cta:after {
height: 16px;
top: -15px;
left: 52px; } }
.cta > span {
display: block;
position: relative;
top: 0;
width: 100%;
z-index: 9; }
.cta > span:before {
content: '';
position: absolute;
left: -17px;
top: -22px;
border: 16px solid #F701B5;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0; }
@media (min-width: 48rem) {
.cta > span:before {
left: -19px;
top: -20px;
border-width: 14px;
border-left-width: 7px;
border-right-width: 7px; } }
@media (min-width: 90rem) {
.cta > span:before {
left: -26px; } }
@media (min-width: 112.5rem) {
.cta > span:before {
left: -23px; } }
.cta--secondary {
background-color: #ffff00; }
.cta--secondary:before {
background: url("data:image/svg+xml;utf8,") no-repeat 0 0;
background-size: contain; }
.cta--secondary:after {
background-color: #ffff00; }
.cta--secondary:hover {
background-color: #ffff99; }
.cta--secondary:hover:before {
background: url("data:image/svg+xml;utf8,") no-repeat 0 0;
background-size: contain; }
.cta--secondary:hover:after {
background-color: #ffff99; }
.cta--tertiary {
background-color: #FF1C4A; }
.cta--tertiary:before {
background: url("data:image/svg+xml;utf8,") no-repeat 0 0;
background-size: contain; }
.cta--tertiary:after {
background-color: #FF1C4A; }
.cta--tertiary:hover {
background-color: #ff4f73; }
.cta--tertiary:hover:before {
background: url("data:image/svg+xml;utf8,") no-repeat 0 0;
background-size: contain; }
.cta--tertiary:hover:after {
background-color: #ff4f73; }
@-webkit-keyframes cta-bounce {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px); }
to {
-webkit-transform: translate3d(0px, -2px, 0px);
transform: translate3d(0px, -2px, 0px); } }
@keyframes cta-bounce {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px); }
to {
-webkit-transform: translate3d(0px, -2px, 0px);
transform: translate3d(0px, -2px, 0px); } }
.app-store {
display: inline-block;
text-indent: -9999px;
background: url("../images/fabric/front/apple_badge.png") no-repeat top left;
background-size: cover;
width: 233px;
width: 14.5625rem;
height: 69px;
height: 4.3125rem; }
.app-store + .google-play {
margin: 30px 40px;
margin: 1.875rem 2.5rem; }
.google-play {
display: inline-block;
text-indent: -9999px;
background: url("../images/fabric/front/google_badge.png") no-repeat top left;
background-size: cover;
width: 198px;
width: 12.375rem;
height: 69px;
height: 4.3125rem; }
.link {
color: #771612;
/**
* Modifier Block
* Makes link block and centers text.
*/
/**
* Modifier Spacey
* Adds extra space to the bottom of a link and clears it
*/
/**
* Modifier Extra Spacey
* Adds EVEN MORE space to the bottom of a link and clears it
*/
/**
* Modifier Arrow
* Adds an arrow as a link with no text, mainly used on table columns
*/
/**
* Modifier Arrow to the left
* Adds an arrow to the left of a text link, as per used on Blog details page (return to blogs)
*/ }
.link:hover {
color: #000000;
text-decoration: underline; }
.link--block {
display: block;
text-align: center;
margin: 0 0 2px 0;
margin: 0 0 0.125rem 0; }
.link--two-tone {
color: #000000;
text-decoration: none; }
.link--two-tone span {
color: #771612; }
.link--two-tone:hover span {
text-decoration: underline; }
.link--with-pipe {
color: #ce0a24;
display: block;
text-decoration: none;
margin-bottom: 19px;
margin-bottom: 1.1875rem; }
.link--with-pipe span {
text-decoration: underline; }
.link--with-pipe:hover {
color: #000000;
text-decoration: none; }
.link--with-pipe:hover::after {
color: #000000; }
@media (min-width: 48rem) {
.link--with-pipe {
margin: 0 15px 16px 0;
margin: 0 0.9375rem 1rem 0;
display: inline-block; }
.link--with-pipe::after {
color: #000000;
content: " | ";
margin-left: 15px;
margin-left: 0.9375rem; } }
.link--with-pipe:last-child {
margin-right: 0px;
margin-right: 0rem; }
.link--with-pipe:last-child::after {
display: none; }
.link--spacey {
display: block;
text-align: center;
margin: 0 0 15px 0;
margin: 0 0 0.9375rem 0; }
@media (min-width: 48rem) {
.link--spacey {
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; } }
.link--extra-spacey {
display: block;
text-align: center;
margin: 0 0 45px 0;
margin: 0 0 2.8125rem 0; }
@media (min-width: 48rem) {
.link--extra-spacey {
margin: 0 0 70px 0;
margin: 0 0 4.375rem 0; } }
.link--privacy {
color: #FFF; }
.link--privacy:hover {
text-decoration: none; }
.link--arrow {
display: inline-block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 18px;
border-color: transparent transparent transparent red; }
.link--with-left-arrow {
display: inline-block; }
.link--with-left-arrow:before {
display: inline-block;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 18px 10px 0px;
border-color: transparent #FFFF01 transparent transparent;
margin: 0px 16px 0 0;
margin: 0rem 1rem 0 0;
vertical-align: middle; }
/**
* Button Styles
*/
button, .btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0 none;
background: none;
display: block;
cursor: pointer;
width: 100%; }
@media (min-width: 48rem) {
button, .btn {
display: inline-block;
width: auto; } }
.btn--submit-arrow {
background: #ffff00;
padding: 11px 10px 11px 12px;
padding: 0.6875rem 0.625rem 0.6875rem 0.75rem; }
.btn--submit-arrow span:before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 18px solid #ff00b4; }
.featured {
color: #FFF;
background: #ff6900;
font-size: 20px;
font-size: 1.25rem;
width: 48px;
width: 3rem;
height: 48px;
height: 3rem;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
visibility: hidden; }
@media (min-width: 30rem) {
.featured {
visibility: visible; } }
@media (min-width: 75rem) {
.featured {
width: 150px;
width: 9.375rem; } }
.featured:before {
font-family: 'icomoon';
content: "\e906";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
@media (min-width: 75rem) {
.featured:before {
top: 50%;
left: 10%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); } }
.featured span {
width: 100px;
width: 6.25rem;
position: absolute;
top: 50%;
right: 35%;
-webkit-transform: translate3d(50%, -50%, 0);
transform: translate3d(50%, -50%, 0);
padding-right: 10px;
padding-right: 0.625rem;
visibility: hidden; }
@media (min-width: 75rem) {
.featured span {
visibility: visible; } }
.calendar {
background: #ffff00;
color: #000000;
margin: 0 auto 20px;
margin: 0 auto 1.25rem;
padding: 8px 0 0px 0;
padding: 0.5rem 0 0rem 0;
position: relative;
text-align: center;
width: 60px; }
.calendar:after {
background: #ffff00;
content: "";
display: block;
height: 20px;
position: absolute;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
transform: skewY(-3deg);
bottom: -3px;
width: 100%;
z-index: 1; }
.calendar__day {
position: relative;
z-index: 5;
font-size: 26px;
font-size: 1.625rem;
margin-top: 5px;
margin-top: 0.3125rem;
font-weight: bold;
line-height: 18px; }
.calendar__month {
text-transform: uppercase;
font-size: 18px;
font-size: 1.125rem;
position: relative;
z-index: 5; }
.tooltip {
display: inline;
position: relative; }
.tooltip:hover {
text-decoration: none; }
.tooltip:hover::after {
background: #000000;
bottom: 36px;
color: #FFFFFF;
content: attr(title);
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
padding: 10px;
padding: 0.625rem;
position: absolute;
z-index: 98;
width: 110px; }
.tooltip:hover::before {
border: solid;
border-color: #000000 transparent;
border-width: 6px 6px 0 6px;
bottom: 30px;
content: "";
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
position: absolute;
z-index: 99; }
.tooltip--chilli-jam .icon, .tooltip--chilli-jam .blog-post__social-link > a:before, .tooltip--chilli-jam .add-to-cal,
.tooltip--chilli-jam .show-information {
color: #ce0a24; }
.tooltip--chilli-jam .icon:before, .tooltip--chilli-jam .blog-post__social-link > a:before, .tooltip--chilli-jam .add-to-cal:before,
.tooltip--chilli-jam .show-information:before {
font-size: 20px;
font-size: 1.25rem; }
.tooltip--chilli-jam:hover::after {
width: 90px;
background: #ce0a24; }
.tooltip--chilli-jam:hover::before {
border-color: #ce0a24 transparent; }
.tooltip--mayonnaise span,
.tooltip--yogurt-mayo span {
display: block;
height: 20px;
width: 20px;
line-height: 22px;
color: #FFFFFF;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
-webkit-border-radius: 50%;
border-radius: 50%;
text-transform: uppercase; }
.tooltip--mayonnaise span {
background: #73B455; }
.tooltip--mayonnaise:hover::after {
background: #73B455; }
.tooltip--mayonnaise:hover::before {
border-color: #73B455 transparent; }
.tooltip--yogurt-mayo span {
background: #ff8200; }
.tooltip--yogurt-mayo:hover::after {
background: #ff8200; }
.tooltip--yogurt-mayo:hover::before {
border-color: #ff8200 transparent; }
.tooltip--plain-ish .icon, .tooltip--plain-ish .blog-post__social-link > a:before, .tooltip--plain-ish .add-to-cal,
.tooltip--plain-ish .show-information,
.tooltip--peri-tamer .icon,
.tooltip--peri-tamer .blog-post__social-link > a:before,
.tooltip--peri-tamer .add-to-cal,
.tooltip--peri-tamer .show-information {
color: #73B455; }
.tooltip--plain-ish .icon:before, .tooltip--plain-ish .blog-post__social-link > a:before, .tooltip--plain-ish .add-to-cal:before,
.tooltip--plain-ish .show-information:before,
.tooltip--peri-tamer .icon:before,
.tooltip--peri-tamer .blog-post__social-link > a:before,
.tooltip--peri-tamer .add-to-cal:before,
.tooltip--peri-tamer .show-information:before {
font-size: 20px;
font-size: 1.25rem; }
.tooltip--plain-ish:hover::after,
.tooltip--peri-tamer:hover::after {
width: 120px;
background: #73B455; }
.tooltip--plain-ish:hover::before,
.tooltip--peri-tamer:hover::before {
border-color: #73B455 transparent; }
.tooltip--peri-tamer .icon, .tooltip--peri-tamer .blog-post__social-link > a:before, .tooltip--peri-tamer .add-to-cal,
.tooltip--peri-tamer .show-information {
color: #ff8200; }
.tooltip--peri-tamer:hover::after {
background: #ff8200; }
.tooltip--peri-tamer:hover::before {
border-color: #ff8200 transparent; }
#hamburger {
display: none;
visibility: hidden; }
.hamburger {
color: #ce0a24;
cursor: pointer;
display: block;
width: 72px;
height: 60px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
position: relative;
z-index: 1002;
background-color: #FFFFFF;
padding: 23px 26px;
padding: 1.4375rem 1.625rem; }
@media (min-width: 48rem) {
.hamburger {
height: 80px;
width: 80px;
padding: 29px 25px 27px 30px;
padding: 1.8125rem 1.5625rem 1.6875rem 1.875rem; } }
.hamburger span {
background: #ce0a24;
display: block;
height: 4px;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
margin: 0 0 3px 0;
margin: 0 0 0.1875rem 0; }
@media (min-width: 48rem) {
.hamburger span {
height: 5px; } }
.hamburger span:last-child {
margin: 0; }
.hamburger:hover span {
color: #000000; }
.js-nav .hamburger {
background: #FFFFFF; }
.js-nav .hamburger > span {
position: relative;
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out;
margin: 0; }
.js-nav .hamburger > span:nth-child(1) {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 8px; }
.js-nav .hamburger > span:nth-child(2) {
opacity: 0;
width: 0; }
.js-nav .hamburger > span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 0px; }
@media (min-width: 48rem) {
.js-nav .hamburger > span:nth-child(3) {
top: -2px; } }
input[type="checkbox"]:checked + label.hamburger:after {
content: ""; }
.bean {
background: #FFFFFF;
font-size: 0px;
display: block;
height: 50px;
width: 50px;
position: fixed;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
z-index: 95;
bottom: 50px;
left: 8px; }
@media (min-width: 64rem) {
.bean {
top: 90%;
left: 30px; } }
.bean--hide {
z-index: 10; }
.bean > span {
height: 9px;
width: 9px;
margin: 50% 2px 0 0;
display: inline-block;
border: 2px solid #01E2C2;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
.bean > span.bean--2 {
border-color: #ff00b4; }
.bean > span.bean--3 {
border-color: #ff6900; }
.bean:hover {
-webkit-animation: heartBeat 2s infinite;
animation: heartBeat 2s infinite; }
.cal-count-viewer {
font-size: 20px;
font-size: 1.25rem;
padding: 10px 2px;
padding: 0.625rem 0.125rem;
display: block;
height: 45px;
width: 50px;
position: fixed;
background: #ff00b4;
color: #FFFFFF;
z-index: 97;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
text-align: center;
-webkit-animation: bounce 0.5s infinite alternate;
animation: bounce 0.5s infinite alternate;
left: 8px;
bottom: 110px; }
@media (min-width: 64rem) {
.cal-count-viewer {
bottom: 11%;
left: 30px; } }
.cal-count-viewer:before {
content: '';
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #ff00b4;
position: absolute;
bottom: -5px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
.active-filters {
font-size: 40px;
font-size: 2.5rem;
padding: 5px;
padding: 0.3125rem;
display: block;
position: fixed;
background: #01E2C2;
color: #FFFFFF;
left: 8px;
bottom: 110px;
z-index: 97;
opacity: 1;
text-align: center;
-webkit-transition: all 1s;
transition: all 1s;
-webkit-animation: bounce 0.5s infinite alternate;
animation: bounce 0.5s infinite alternate; }
@media (min-width: 64rem) {
.active-filters {
bottom: 11%;
left: 30px; } }
.active-filters span {
display: block;
margin: 5px 0;
margin: 0.3125rem 0; }
.active-filters:before {
content: '';
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #01E2C2;
position: absolute;
bottom: -5px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
.cal-count-viewer ~ .active-filters {
bottom: 160px; }
@media (min-width: 64rem) {
.cal-count-viewer ~ .active-filters {
bottom: -webkit-calc(11% + 50px);
bottom: calc(11% + 50px); } }
@-webkit-keyframes bounce {
from {
-webkit-transform: translateY(0);
transform: translateY(0); }
to {
-webkit-transform: translateY(2px);
transform: translateY(2px); } }
@keyframes bounce {
from {
-webkit-transform: translateY(0);
transform: translateY(0); }
to {
-webkit-transform: translateY(2px);
transform: translateY(2px); } }
table {
border-collapse: collapse;
margin-top: 150px;
width: 100%; }
table th {
font-size: 22px;
font-size: 1.375rem;
background: #ff2350;
text-align: left;
padding: 28px 0px 28px 40px;
padding: 1.75rem 0rem 1.75rem 2.5rem;
border-bottom: 10px solid #dcdcdc;
position: relative; }
table th.sort {
cursor: pointer; }
table th.sort::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 18px 9px 0 9px;
border-color: #FFFFFF transparent transparent transparent;
position: relative;
left: 10px;
display: inline-block; }
table th.sort.desc::after {
border-width: 18px 9px 0 9px;
border-color: #FFFFFF transparent transparent transparent;
-webkit-transition: border 0.2s linear;
transition: border 0.2s linear; }
table th.sort.asc::after {
border-width: 0 9px 18px 9px;
border-color: transparent transparent #FFFFFF transparent;
-webkit-transition: border 0.2s linear;
transition: border 0.2s linear; }
table tr {
background: #FFFFFF; }
table tr:nth-child(even) {
background: #eaeaea; }
table td {
font-size: 20px;
font-size: 1.25rem;
text-align: left;
padding: 24px 0px 24px 40px;
padding: 1.5rem 0rem 1.5rem 2.5rem;
position: relative; }
table td .link--arrow {
position: relative; }
.chilli-wheel {
position: relative;
border: 2px solid #313131;
padding: 0;
width: 520px;
height: 520px;
-webkit-border-radius: 50%;
border-radius: 50%;
list-style: none;
background-color: #1d1d1b; }
.chilli-wheel .segment {
position: absolute;
font-size: 1.5em;
width: 14%;
height: 50%;
left: 50%;
top: 0%;
margin-left: -7%;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%; }
.chilli-wheel .segment:nth-child(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg); }
.chilli-wheel .segment:nth-child(2) {
-webkit-transform: rotate(36deg);
-ms-transform: rotate(36deg);
transform: rotate(36deg); }
.chilli-wheel .segment:nth-child(3) {
-webkit-transform: rotate(72deg);
-ms-transform: rotate(72deg);
transform: rotate(72deg); }
.chilli-wheel .segment:nth-child(4) {
-webkit-transform: rotate(108deg);
-ms-transform: rotate(108deg);
transform: rotate(108deg); }
.chilli-wheel .segment:nth-child(5) {
-webkit-transform: rotate(144deg);
-ms-transform: rotate(144deg);
transform: rotate(144deg); }
.chilli-wheel .segment:nth-child(6) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.chilli-wheel .segment:nth-child(7) {
-webkit-transform: rotate(216deg);
-ms-transform: rotate(216deg);
transform: rotate(216deg); }
.chilli-wheel .segment:nth-child(8) {
-webkit-transform: rotate(252deg);
-ms-transform: rotate(252deg);
transform: rotate(252deg); }
.chilli-wheel .segment:nth-child(9) {
-webkit-transform: rotate(288deg);
-ms-transform: rotate(288deg);
transform: rotate(288deg); }
.chilli-wheel .segment:nth-child(10) {
-webkit-transform: rotate(324deg);
-ms-transform: rotate(324deg);
transform: rotate(324deg); }
.chilli-wheel .chilli {
display: block;
font-size: 1.18em;
height: auto;
width: 100%;
position: absolute;
top: 32px;
left: 0px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.chilli-wheel .segment:nth-child(1) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(2) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(3) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(4) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(5) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(6) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(7) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(8) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(9) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(10) .chilli {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.chilli-wheel .segment:nth-child(1) .chilli {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s; }
.chilli-wheel .segment:nth-child(2) .chilli {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s; }
.chilli-wheel .segment:nth-child(3) .chilli {
-webkit-transition-delay: 0.9s;
transition-delay: 0.9s; }
.chilli-wheel .segment:nth-child(4) .chilli {
-webkit-transition-delay: 1.8s;
transition-delay: 1.8s; }
.chilli-wheel .segment:nth-child(5) .chilli {
-webkit-transition-delay: 2.1s;
transition-delay: 2.1s; }
.chilli-wheel .segment:nth-child(6) .chilli {
-webkit-transition-delay: 2.4s;
transition-delay: 2.4s; }
.chilli-wheel .segment:nth-child(7) .chilli {
-webkit-transition-delay: 3.3s;
transition-delay: 3.3s; }
.chilli-wheel .segment:nth-child(8) .chilli {
-webkit-transition-delay: 3.6s;
transition-delay: 3.6s; }
.chilli-wheel .segment:nth-child(9) .chilli {
-webkit-transition-delay: 3.9s;
transition-delay: 3.9s; }
.chilli-wheel .segment:nth-child(10) .chilli {
-webkit-transition-delay: 4.2s;
transition-delay: 4.2s; }
.chilli-wheel.js-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.chilli-wheel.js-active .chilli {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.chilli-wheel .segments-tooltip {
display: inline-block;
color: #000000;
position: absolute;
padding: 5px;
padding: 0.3125rem;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
max-width: 120px;
font-size: 16px;
font-size: 1rem; }
.chilli-wheel .segments-tooltip::after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -10px; }
.chilli-wheel .segments-tooltip--green {
left: 180px;
top: 50px;
background-color: #73B455;
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s; }
@media (min-width: 30rem) {
.chilli-wheel .segments-tooltip--green {
left: 280px;
top: 80px; } }
@media (min-width: 64rem) {
.chilli-wheel .segments-tooltip--green {
left: 390px;
top: 125px; } }
@media (min-width: 75rem) {
.chilli-wheel .segments-tooltip--green {
left: 275px;
top: 80px; } }
@media (min-width: 112.5rem) {
.chilli-wheel .segments-tooltip--green {
left: 400px;
top: 125px; } }
.chilli-wheel .segments-tooltip--green::after {
border-width: 10px 10px 0 10px;
border-color: #73B455 transparent transparent transparent; }
.chilli-wheel .segments-tooltip--orange {
left: 85px;
top: 275px;
-webkit-transition-delay: 2.7s;
transition-delay: 2.7s;
background-color: #ff8200; }
@media (min-width: 30rem) {
.chilli-wheel .segments-tooltip--orange {
left: 130px;
top: 375px; } }
@media (min-width: 64rem) {
.chilli-wheel .segments-tooltip--orange {
left: 185px;
top: 500px; } }
@media (min-width: 75rem) {
.chilli-wheel .segments-tooltip--orange {
left: 130px;
top: 380px; } }
@media (min-width: 112.5rem) {
.chilli-wheel .segments-tooltip--orange {
left: 190px;
top: 500px; } }
.chilli-wheel .segments-tooltip--orange::after {
bottom: inherit;
top: -10px;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent #ff8200 transparent; }
.chilli-wheel .segments-tooltip--red {
left: 30px;
top: -10px;
background-color: #FF1C4A;
-webkit-transition-delay: 4.5s;
transition-delay: 4.5s; }
@media (min-width: 30rem) {
.chilli-wheel .segments-tooltip--red {
left: 50px;
top: -10px; } }
@media (min-width: 64rem) {
.chilli-wheel .segments-tooltip--red {
left: 85px;
top: 0px; } }
@media (min-width: 75rem) {
.chilli-wheel .segments-tooltip--red {
left: 50px;
top: -5px; } }
@media (min-width: 112.5rem) {
.chilli-wheel .segments-tooltip--red {
left: 85px;
top: 0px; } }
.chilli-wheel .segments-tooltip--red::after {
border-width: 10px 10px 0 10px;
border-color: #FF1C4A transparent transparent transparent; }
.chilli-wheel.js-active .segments-tooltip {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.cookie-bar {
background: #FF1C4A;
padding: 12px 20px;
padding: 0.75rem 1.25rem;
width: 100%;
color: #FFFFFF;
position: fixed;
left: 0;
z-index: 5000;
-webkit-transition: -webkit-transform 2s;
transition: transform 2s;
top: 0;
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%); }
.cookie-bar ~ .header {
-webkit-transition: top 2s, height 0.3s;
transition: top 2s, height 0.3s;
top: 0; }
.cookie-bar--active {
-webkit-transform: none;
-ms-transform: none;
transform: none; }
.cookie-bar--active ~ .header {
top: 45px; }
.cookie-bar p {
font-size: 16px;
font-size: 1rem;
color: #FFFFFF;
padding-right: 60px;
padding-right: 3.75rem; }
@media (min-width: 30rem) {
.cookie-bar p {
font-size: 18px;
font-size: 1.125rem; } }
.cookie-bar a {
color: #FFFFFF;
text-decoration: underline; }
.cookie-bar__inner {
width: 100%;
max-width: 790px;
margin: 0 auto;
position: relative; }
.cookie-bar .cookie-close-button {
width: 30px;
height: 30px;
line-height: 30px;
display: block;
text-decoration: none;
position: relative;
color: #FFFFFF;
border: 2px solid #FFFFFF;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
font-size: 18px;
font-size: 1.125rem;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
/**
* Component - Navigation
* Mobile/Desktop
*/
.navigation {
background-color: #FFFFFF; }
.navigation .mp-level .mp-level {
display: none; }
.navigation .mp-level .menu__arrow {
display: none;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000000;
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-transition: left 0.5s, border-color 0.5s;
transition: left 0.5s, border-color 0.5s; }
.navigation .mp-level .menu__arrow--red {
border-bottom: 10px solid #ce0a24; }
.navigation .menu__link {
text-decoration: none; }
.navigation .search-form,
.navigation .profile-form,
.navigation .help-nav {
height: -webkit-calc(100% - 60px);
height: calc(100% - 60px);
position: absolute;
top: 0;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.5s, top 0.3s;
transition: transform 0.5s, top 0.3s;
height: 100%;
width: 100%;
z-index: 0; }
@media (min-width: 75rem) {
.navigation .search-form,
.navigation .profile-form,
.navigation .help-nav {
top: 80px;
width: 300px; } }
@media (min-width: 90rem) {
.navigation .search-form,
.navigation .profile-form,
.navigation .help-nav {
top: 95px;
width: 350px; } }
@media (min-width: 112.5rem) {
.navigation .search-form,
.navigation .profile-form,
.navigation .help-nav {
top: 120px; } }
.navigation .search-form.display,
.navigation .profile-form.display,
.navigation .help-nav.display {
-webkit-transform: none;
-ms-transform: none;
transform: none;
z-index: 1; }
@media (min-width: 75rem) {
.navigation .search-form,
.navigation .profile-form,
.navigation .help-nav {
z-index: -2;
position: absolute;
right: 0;
height: auto; }
.navigation .search-form.display,
.navigation .profile-form.display,
.navigation .help-nav.display {
z-index: -1; } }
.navigation .search-form {
padding: 60px;
padding: 3.75rem;
background-color: #000000;
border: 4px solid #00A5C8;
border-top: 7px solid #00A5C8;
border-bottom: 7px solid #00A5C8;
line-height: 1.214; }
.navigation .search-form .form-element {
max-width: 280px;
margin: auto; }
.navigation .search-form .form-element--find {
margin-bottom: 30px;
margin-bottom: 1.875rem; }
@media (min-width: 75rem) {
.navigation .search-form .form-element--find {
margin-bottom: 10px;
margin-bottom: 0.625rem; } }
.navigation .search-form .form-element--find .form-element__input {
font-size: 23px;
padding: 14px;
padding: 0.875rem;
height: 45px; }
.navigation .search-form .form-element--find .form-element__label {
color: #FFFFFF;
font-size: 23px;
width: 90%;
margin-left: auto;
margin-right: auto; }
@media (min-width: 75rem) {
.navigation .search-form .form-element--find .form-element__label {
font-size: 21px; } }
@media (min-width: 90rem) {
.navigation .search-form .form-element--find .form-element__label {
font-size: 23px; } }
.navigation .search-form .cta {
width: 100%;
text-align: center;
max-width: 280px;
margin: auto; }
@media (min-width: 75rem) {
.navigation .search-form {
padding: 30px;
padding: 1.875rem; }
.navigation .search-form .form--find-a-nandos {
padding: 0; }
.navigation .search-form .form--find-a-nandos .form-element__wrapper {
margin: 30px auto;
margin: 1.875rem auto; }
.navigation .search-form .form--find-a-nandos .form-element__label {
position: static;
text-align: center;
width: 210px; }
.navigation .search-form .form--find-a-nandos .form-element--find {
width: 100%; }
.navigation .search-form .form--find-a-nandos .cta--submit {
margin-top: 10px; } }
.navigation .profile-form {
padding: 60px;
padding: 3.75rem;
background-color: #000000;
border: 4px solid #73B455;
border-top: 7px solid #73B455;
border-bottom: 7px solid #73B455;
color: #FFFFFF; }
.navigation .profile-form .link:hover {
color: #ff00b4; }
.navigation .profile-form .profile-form--heading {
max-width: 150px;
margin: auto;
font-size: 23px;
text-align: center; }
@media (min-width: 75rem) {
.navigation .profile-form .profile-form--heading {
font-size: 21px; } }
@media (min-width: 90rem) {
.navigation .profile-form .profile-form--heading {
font-size: 23px; } }
.navigation .profile-form .form-element__fieldset {
margin: 0; }
.navigation .profile-form .form-element {
float: none;
margin: auto;
margin: 28px 0 0 0;
margin: 1.75rem 0 0 0; }
.navigation .profile-form .cta--submit {
width: 100%;
text-align: center;
max-width: 280px;
margin: auto; }
.navigation .profile-form .link--log-in {
color: #FFFFFF;
text-decoration: underline;
margin: 15px auto 35px;
margin: 0.9375rem auto 2.1875rem;
display: block; }
.navigation .profile-form .form-element__input {
font-size: 23px;
padding: 14px;
padding: 0.875rem;
height: 45px;
margin: auto; }
.navigation .profile-form .form-element__label {
height: 0;
overflow: hidden;
margin: 0; }
@media (min-width: 75rem) {
.navigation .profile-form {
padding: 30px;
padding: 1.875rem; }
.navigation .profile-form .link--log-in {
text-align: right; } }
.navigation .help-nav {
background-color: #000000;
color: #FFFFFF;
border: 4px solid #FF1C4A;
border-top: 7px solid #FF1C4A;
border-bottom: 7px solid #FF1C4A;
overflow: hidden; }
.navigation .help-nav--heading {
text-align: center;
margin: 50px auto 0;
margin: 3.125rem auto 0;
font-size: 23px;
font-size: 1.4375rem;
font-weight: normal;
padding: 0 30px;
padding: 0 1.875rem; }
@media (min-width: 75rem) {
.navigation .help-nav--heading {
font-size: 21px;
font-size: 1.3125rem; } }
@media (min-width: 90rem) {
.navigation .help-nav--heading {
font-size: 23px;
font-size: 1.4375rem; } }
.navigation .help-nav .menu__item {
color: white; }
.navigation .help-nav .menu__item:hover {
color: #FF1C4A; }
.navigation .help-nav .menu__link {
text-transform: uppercase;
font-size: 20px;
font-size: 1.25rem;
color: inherit;
margin: 50px 0 0 30px;
margin: 3.125rem 0 0 1.875rem;
display: inline-block; }
@media (max-height: 550px) {
.navigation .help-nav .menu__link {
margin: 20px 0 0 30px;
margin: 1.25rem 0 0 1.875rem; } }
@media (max-height: 40.625rem) {
.navigation .help-nav .menu__link {
margin: 30px 0 0 30px;
margin: 1.875rem 0 0 1.875rem; } }
@media (min-width: 75rem) {
.navigation .help-nav .menu__link {
font-size: 18px;
font-size: 1.125rem; } }
@media (min-width: 90rem) {
.navigation .help-nav .menu__link {
font-size: 20px;
font-size: 1.25rem; } }
.navigation .help-nav .menu__link--heart {
font-size: 18px;
font-size: 1.125rem;
display: inline-block;
position: relative;
padding: 0px 20px 0px 26px;
padding: 0rem 1.25rem 0rem 1.625rem; }
@media (max-height: 600px) {
.navigation .help-nav .menu__link--heart {
margin: 20px 0 0 30px;
margin: 1.25rem 0 0 1.875rem; } }
@media (min-width: 75rem) {
.navigation .help-nav .menu__link--heart {
font-size: 16px;
font-size: 1rem; } }
@media (min-width: 90rem) {
.navigation .help-nav .menu__link--heart {
font-size: 18px;
font-size: 1.125rem; } }
.navigation .help-nav .menu__link--heart:before {
content: "\2665";
font-size: 14px;
font-size: 0.875rem;
vertical-align: middle;
position: absolute;
left: 10px;
top: 3px; }
.navigation .help-nav .menu__item:last-child .menu__link {
margin-top: 50px;
margin-top: 3.125rem; }
@media (max-height: 40.625rem) {
.navigation .help-nav .menu__item:last-child .menu__link {
margin-top: 30px;
margin-top: 1.875rem; } }
@media (min-width: 75rem) {
.navigation .help-nav .menu__item:last-child .menu__link {
margin-top: 0; } }
@media (min-width: 75rem) {
.navigation .help-nav {
padding: 30px;
padding: 1.875rem; }
.navigation .help-nav .help-nav--heading {
margin: auto; }
.navigation .help-nav .menu {
text-align: left; }
.navigation .help-nav .menu__item {
margin: 32px 0 0 0; }
.navigation .help-nav .menu__link {
margin: 0; } }
@media (min-width: 75rem) {
.navigation .help-nav .menu__item {
margin: 32px 0 0 0; } }
@media (min-width: 75rem) and (max-height: 550px) {
.navigation .help-nav .menu__item {
margin: 20px 0 0 30px;
margin: 1.25rem 0 0 1.875rem; } }
@media (min-width: 90rem) {
.navigation .help-nav .menu__item {
margin: 40px 0 0 0; } }
@media (min-width: 90rem) and (max-height: 550px) {
.navigation .help-nav .menu__item {
margin: 20px 0 0 30px;
margin: 1.25rem 0 0 1.875rem; } }
/**
* Mobile & Tablet Navigation
*/
.navigation--mobile {
position: static;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
height: -webkit-calc(100% - 60px);
height: calc(100% - 60px);
width: 100%;
background: #FFFFFF;
bottom: 0;
right: 0;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 10; }
@media (min-width: 48rem) {
.navigation--mobile {
height: -webkit-calc(100% - 80px);
height: calc(100% - 80px); } }
.navigation--mobile .menu__arrow {
display: none; }
.navigation--mobile .menu__link {
color: #000000; }
.navigation--mobile > .mp-level {
background: #FFFFFF; }
.navigation--mobile > .mp-level > .menu {
display: block;
height: 100%;
width: 100%;
position: relative; }
.navigation--mobile > .mp-level > .menu > .menu__item {
display: block; }
.navigation--mobile > .mp-level > .menu > .menu__item > .menu__link {
display: block;
text-transform: uppercase; }
.navigation--mobile > .mp-level > .menu > .menu__item > .menu__link .icon, .navigation--mobile > .mp-level > .menu > .menu__item > .menu__link .blog-post__social-link > a:before, .navigation--mobile > .mp-level > .menu > .menu__item > .menu__link .add-to-cal,
.navigation--mobile > .mp-level > .menu > .menu__item > .menu__link .show-information {
position: absolute;
left: -webkit-calc(100% - 35px);
left: calc(100% - 35px); }
.navigation--mobile .menu__item.menu__item--active.js--rendered .menu__item.expanded.menu__item--active {
background-color: #e3e3e3; }
.navigation--mobile > .mp-level .mp-level {
padding: 22px 23px 20px 31px;
padding: 1.375rem 1.4375rem 1.25rem 1.9375rem;
position: absolute;
display: block;
left: 200%;
height: 100%;
width: 100%;
z-index: 999; }
.navigation--mobile > .mp-level .mp-level .menu__link {
padding: 25px 0 25px 20px;
padding: 1.5625rem 0 1.5625rem 1.25rem;
color: #000000;
display: block; }
.navigation--mobile > .mp-level .mp-level .menu__link:hover {
background: #14E1C1;
color: #FFFFFF; }
.navigation--mobile .icon--right-arrow {
color: #14E1C1; }
@media (max-width: 75rem) {
.js-nav .navigation--mobile {
display: block;
position: fixed;
right: 100%;
z-index: 999; } }
.navigation--mobile .js--rendered {
padding: 0 25px 0 50px;
padding: 0 1.5625rem 0 3.125rem;
display: block;
position: absolute;
width: 100%; }
/**
* Desktop Navigation
*/
.navigation--desktop {
position: relative;
display: none;
height: 100%;
margin: 0 auto;
text-align: center; }
@media (min-width: 75rem) {
.navigation--desktop {
display: block; } }
.navigation--desktop > .mp-level {
width: 100%;
margin-top: 18px;
margin-top: 1.125rem; }
@media (min-width: 90rem) {
.navigation--desktop > .mp-level {
margin-top: 25px;
margin-top: 1.5625rem; } }
@media (min-width: 112.5rem) {
.navigation--desktop > .mp-level {
margin-top: 50px;
margin-top: 3.125rem; } }
.navigation--desktop > .mp-level > .menu {
text-align: center;
font-size: 0;
margin: auto;
width: auto; }
.navigation--desktop > .mp-level > .menu > .menu__item {
display: inline-block;
vertical-align: middle;
width: auto; }
.navigation--desktop > .mp-level > .menu > .menu__item > .menu__link {
display: block;
color: #000000;
position: relative;
text-transform: uppercase;
width: 100%;
font-size: 26px;
font-size: 1.625rem;
padding: 26px 47px;
padding: 1.625rem 2.9375rem; }
@media (min-width: 75rem) {
.navigation--desktop > .mp-level > .menu > .menu__item > .menu__link {
font-size: 20px;
font-size: 1.25rem;
padding: 19px 30px;
padding: 1.1875rem 1.875rem; } }
@media (min-width: 90rem) {
.navigation--desktop > .mp-level > .menu > .menu__item > .menu__link {
font-size: 24px;
font-size: 1.5rem;
padding: 21px 37px;
padding: 1.3125rem 2.3125rem; } }
.navigation--desktop > .mp-level > .menu > .menu__item--active .menu__link {
color: #ce0a24; }
.navigation--desktop > .mp-level > .menu > .menu__item--active > .mp-level {
display: block;
z-index: -1; }
.navigation--desktop > .mp-level > .menu > .menu__item--active > .mp-level .menu__item--active {
background-color: #ce0a24; }
.navigation--desktop > .mp-level > .menu > .menu__item--active > .mp-level .menu__item--active.menu__item--reset {
background-color: #000000; }
.navigation--desktop > .mp-level > .menu > .menu__item--active > .mp-level .menu__item--active.menu__item--reset:hover {
background-color: #ce0a24; }
.navigation--desktop > .mp-level > .menu > .menu__item:hover > .mp-level {
display: block; }
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level {
background: #1d1d1b;
position: fixed;
left: 0;
width: 100%;
height: 41px;
text-align: center;
-webkit-transition: top 0.3s;
transition: top 0.3s; }
@media (min-width: 75rem) {
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level {
height: auto;
top: 80px; } }
@media (min-width: 90rem) {
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level {
top: 95px; } }
@media (min-width: 112.5rem) {
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level {
top: 120px; } }
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level > .menu {
display: inline-block; }
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level > .menu > .menu__item {
display: block;
float: left; }
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level > .menu > .menu__item > .menu__link {
color: #FFFFFF;
display: block;
text-align: center;
-webkit-transition: all 0.5s;
transition: all 0.5s;
font-size: 13px;
font-size: 0.8125rem;
padding: 13px 24px;
padding: 0.8125rem 1.5rem; }
@media (min-width: 75rem) {
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level > .menu > .menu__item > .menu__link {
font-size: 18px;
font-size: 1.125rem; } }
@media (min-width: 90rem) {
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level > .menu > .menu__item > .menu__link {
font-size: 20px;
font-size: 1.25rem;
padding: 20px 63px 18px;
padding: 1.25rem 3.9375rem 1.125rem; } }
.navigation--desktop > .mp-level > .menu > .menu__item .mp-level > .menu > .menu__item > .menu__link.menu__link--active, .navigation--desktop > .mp-level > .menu > .menu__item .mp-level > .menu > .menu__item > .menu__link:hover {
background: #ce0a24;
color: #FFFFFF; }
@media (max-width: 75rem) {
.js-nav .navigation--mobile {
display: block;
overflow: hidden;
position: fixed;
right: 0;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
z-index: 999; } }
@media (max-width: 75rem) {
.js-nav .sub-menu,
.js-nav .banner,
.js-nav .main-content,
.js-nav .footer {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0); } }
.js-nav .utility-nav {
width: 100%; }
.js-nav .utility-nav__item--search {
right: -webkit-calc(100% - 100px);
right: calc(100% - 100px); }
.js-nav .utility-nav__item--profile {
right: -webkit-calc(100% - 150px);
right: calc(100% - 150px); }
.js-nav .utility-nav__item--help {
right: -webkit-calc(100% - 200px);
right: calc(100% - 200px); }
.js-nav .logo {
-webkit-transform: translate(-200%, -50%);
-ms-transform: translate(-200%, -50%);
transform: translate(-200%, -50%); }
.js .navigation--desktop .menu__arrow {
display: block; }
/**
* Restaurant Menu - Sub navigation
*/
.sub-menu {
display: none;
position: fixed;
z-index: 100;
width: 100%; }
.js-nav .sub-menu {
z-index: 0; }
.sub-menu .sub-menu__listing {
display: table;
width: 100%;
table-layout: fixed; }
.sub-menu__link {
text-align: center;
color: #dcdcdc; }
@media (min-width: 75rem) {
.sub-menu__link--active {
background: #ce0a24;
color: #FFFFFF; }
.sub-menu__link--active.sub-menu__link--reset {
background-color: #000000; }
.sub-menu__link--active.sub-menu__link--reset:hover {
background: #ce0a24; } }
.sub-menu--mobile {
display: none; }
@media (max-width: 74rem) {
.sub-menu--mobile {
display: block; } }
.sub-menu--mobile-open {
position: fixed;
bottom: 0;
width: 100%;
height: -webkit-calc(100% - 60px);
height: calc(100% - 60px);
max-height: 100%;
z-index: 100; }
@media (min-width: 48rem) {
.sub-menu--mobile-open {
height: -webkit-calc(100% - 80px);
height: calc(100% - 80px); } }
@media (max-width: 74rem) {
.sub-menu--mobile-open {
display: block; } }
.sub-menu--mobile-open .sub-menu__listing {
height: 100%; }
.sub-menu--mobile-open .sub-menu__item {
display: table-row;
height: auto; }
.sub-menu--mobile-open .sub-menu__item:hover {
cursor: pointer; }
.sub-menu--mobile-open .sub-menu__item:nth-child(odd) {
background: #1e2323; }
.sub-menu--mobile-open .sub-menu__item:nth-child(even) {
background: #252a2a; }
.sub-menu--mobile-open .sub-menu__link {
font-size: 18px;
font-size: 1.125rem;
display: table-cell;
vertical-align: middle; }
.sub-menu--mobile-open .sub-menu__link.js--opened:active {
background: #ce0a24; }
.sub-menu--desktop {
background: #2b2b28;
display: none;
left: 50%;
top: 165px;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
max-width: 88.28%;
-webkit-transition: top 0.3s;
transition: top 0.3s; }
@media (min-width: 75rem) {
.sub-menu--desktop {
display: block;
max-width: 68.28%; } }
@media (min-width: 90rem) {
.sub-menu--desktop {
top: 180px; } }
@media (min-width: 112.5rem) {
.sub-menu--desktop {
top: 215px; } }
.sub-menu--desktop .sub-menu__listing {
height: 40px;
-webkit-transition: height 0.3s;
transition: height 0.3s; }
.sub-menu--desktop .sub-menu__item {
display: table-cell;
vertical-align: middle;
text-align: center; }
.sub-menu--desktop .sub-menu__link {
font-size: 16px;
font-size: 1rem;
display: block;
height: 40px;
line-height: 40px;
-webkit-transition: height 0.3s, line-height 0.3s, font-size 0.3s;
transition: height 0.3s, line-height 0.3s, font-size 0.3s; }
.sub-menu--desktop .sub-menu__link:hover {
-webkit-transition: background 1s;
transition: background 1s;
background: #ce0a24;
text-decoration: none;
color: #FFFFFF; }
@media (min-width: 75rem) {
.sub-menu--desktop .sub-menu__link {
font-size: 17px;
font-size: 1.0625rem; } }
@media (min-width: 90rem) {
.sub-menu--desktop .sub-menu__link {
font-size: 19px;
font-size: 1.1875rem; } }
.sub-menu--desktop.sub-menu--small .sub-menu__listing {
height: 30px; }
.sub-menu--desktop.sub-menu--small .sub-menu__link {
font-size: 16px;
font-size: 1rem;
height: 30px;
line-height: 30px; }
.sub-menu--desktop.sub-menu--small:hover .sub-menu__listing {
height: 40px; }
.sub-menu--desktop.sub-menu--small:hover .sub-menu__link {
height: 40px;
line-height: 40px; }
@media (min-width: 75rem) {
.sub-menu--desktop.sub-menu--small:hover .sub-menu__link {
font-size: 17px;
font-size: 1.0625rem; } }
@media (min-width: 90rem) {
.sub-menu--desktop.sub-menu--small:hover .sub-menu__link {
font-size: 19px;
font-size: 1.1875rem; } }
@media (min-width: 90rem) {
.header--small ~ .sub-menu--desktop {
top: 165px; } }
@media (min-width: 112.5rem) {
.header--small ~ .sub-menu--desktop {
top: 185px; } }
/**
* HEADER
*/
.logo {
background: url("../images/layout/logo.png") top left no-repeat;
background-size: 113px 37px;
height: 37px;
width: 113px;
float: left;
margin: 0 0 0 26px;
margin: 0 0 0 1.625rem;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: 99; }
@media (min-width: 48rem) {
.logo {
background-size: 134px 43px;
height: 43px;
width: 134px; } }
@media (min-width: 75rem) {
.logo {
background-size: 127px 41px;
height: 41px;
width: 127px;
margin: 0 0 0 50px;
margin: 0 0 0 3.125rem; } }
@media (min-width: 90rem) {
.logo {
background-size: 153px 50px;
height: 50px;
width: 153px;
margin: 0 0 0 60px;
margin: 0 0 0 3.75rem; } }
@media (min-width: 112.5rem) {
.logo {
background-size: 191px 62px;
height: 62px;
width: 191px;
margin: 0 0 0 75px;
margin: 0 0 0 4.6875rem; } }
.header {
background: #FFFFFF;
color: #000000;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: height 0.3s;
transition: height 0.3s;
width: 100%; }
@media (min-width: 48rem) {
.header {
height: 80px; } }
@media (min-width: 90rem) {
.header {
height: 95px; } }
@media (min-width: 112.5rem) {
.header {
height: 120px; } }
.header .hamburger {
float: right;
padding-left: 22px;
padding-left: 1.375rem; }
@media (min-width: 75rem) {
.header .hamburger {
display: none;
visibility: hidden; } }
@media (min-width: 75rem) {
.header__inner {
height: 100%;
position: relative;
margin: 0 auto; } }
/**
* User/Utility Nav
*/
.utility-nav {
width: 100px;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: all 0.5s;
transition: all 0.5s; }
@media (min-width: 48rem) {
.utility-nav {
width: auto; } }
@media (min-width: 75rem) {
.utility-nav {
top: inherit;
bottom: 17px;
-webkit-transform: none;
-ms-transform: none;
transform: none; } }
@media (min-width: 90rem) {
.utility-nav {
bottom: 21px;
right: 40px; } }
@media (min-width: 112.5rem) {
.utility-nav {
bottom: 30px;
right: 55px; } }
.utility-nav__item {
margin-right: 15px;
margin-right: 0.9375rem;
display: inline-block;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: all 0.5s;
transition: all 0.5s; }
@media (min-width: 75rem) {
.utility-nav__item {
margin-right: 20px;
margin-right: 1.25rem;
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none; } }
@media (min-width: 48rem) {
.utility-nav__item--help {
display: inline-block;
visibility: visible; } }
.utility-nav__link {
display: block;
text-decoration: none;
font-size: 32px;
font-size: 2rem; }
@media (min-width: 75rem) {
.utility-nav__link {
font-size: 29px;
font-size: 1.8125rem; } }
@media (min-width: 90rem) {
.utility-nav__link {
font-size: 35px;
font-size: 2.1875rem; } }
@media (min-width: 112.5rem) {
.utility-nav__link {
font-size: 40px;
font-size: 2.5rem; } }
.utility-nav__link span {
display: none; }
.utility-nav__link span.icon, .utility-nav__link span.add-to-cal,
.utility-nav__link span.show-information {
display: block;
width: 40px;
height: 40px;
position: relative; }
@media (min-width: 75rem) {
.utility-nav__link span.icon, .utility-nav__link span.add-to-cal,
.utility-nav__link span.show-information {
height: 31px;
width: 31px; } }
@media (min-width: 90rem) {
.utility-nav__link span.icon, .utility-nav__link span.add-to-cal,
.utility-nav__link span.show-information {
height: 35px;
width: 35px; } }
@media (min-width: 112.5rem) {
.utility-nav__link span.icon, .utility-nav__link span.add-to-cal,
.utility-nav__link span.show-information {
width: 40px;
height: 40px; } }
.utility-nav__link span.icon:before, .utility-nav__link span.add-to-cal:before,
.utility-nav__link span.show-information:before {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.utility-nav .icon--search {
color: #00A5C8;
background-color: #FFFFFF; }
.utility-nav .icon--user {
color: #73B455;
background-color: #FFFFFF; }
.utility-nav .icon--help {
color: #FF1C4A;
background-color: #FFFFFF; }
a.utility-nav__link:hover {
text-decoration: none; }
.utility-nav__item.disabled .icon, .utility-nav__item.disabled .blog-post__social-link > a:before, .utility-nav__item.disabled .add-to-cal,
.utility-nav__item.disabled .show-information {
opacity: 0.5; }
.utility-nav__item:hover .icon, .utility-nav__item:hover .blog-post__social-link > a:before, .utility-nav__item:hover .add-to-cal,
.utility-nav__item:hover .show-information,
.utility-nav__item.active .icon,
.utility-nav__item.active .blog-post__social-link > a:before,
.utility-nav__item.active .add-to-cal,
.utility-nav__item.active .show-information {
font-size: 40px; }
/**
* Helpers
*/
.fixed {
position: fixed;
top: 0;
z-index: 999; }
/**
* Sticky header
*/
@media (min-width: 75rem) {
.header--small {
height: 80px; } }
@media (min-width: 75rem) {
.header--small .utility-nav {
bottom: 13px; } }
.header--small .utility-nav .utility-nav__link .icon, .header--small .utility-nav .utility-nav__link .blog-post__social-link > a:before, .header--small .utility-nav .utility-nav__link .add-to-cal,
.header--small .utility-nav .utility-nav__link .show-information {
font-size: 30px;
font-size: 1.875rem; }
@media (min-width: 75rem) {
.header--small .logo {
height: 40px;
width: 120px;
background-size: 120px 40px; } }
.header--small .navigation--desktop > .mp-level {
margin-top: 20px;
margin-top: 1.25rem; }
@media (min-width: 90rem) {
.header--small .navigation--desktop > .mp-level {
margin-top: 18px;
margin-top: 1.125rem; } }
.header--small .navigation--desktop > .mp-level > .menu > .menu__item .mp-level {
top: 80px; }
.header--small .navigation--desktop > .mp-level > .menu > .menu__item .mp-level > .menu > .menu__item > .menu__link {
font-size: 18px;
font-size: 1.125rem; }
@media (min-width: 75rem) {
.header--small .navigation--desktop > .mp-level > .menu > .menu__item .mp-level > .menu > .menu__item > .menu__link {
padding-top: 16px;
padding-top: 1rem;
padding-bottom: 14px;
padding-bottom: 0.875rem; } }
.header--small .navigation--desktop > .mp-level > .menu > .menu__item > .menu__link {
font-size: 20px;
font-size: 1.25rem;
-webkit-transition: font-size 0.5s;
transition: font-size 0.5s; }
@media (min-width: 75rem) {
.header--small .navigation--desktop > .mp-level > .menu > .menu__item > .menu__link {
padding-bottom: 17px;
padding-bottom: 1.0625rem; } }
.header--small .navigation--desktop .search-form,
.header--small .navigation--desktop .profile-form,
.header--small .navigation--desktop .help-nav {
top: 80px; }
/**
* Down arrow - Slider
*/
.down-arrow {
display: none; }
.js .down-arrow {
display: block;
position: absolute;
height: 0;
width: 0;
border: 18px solid #ffff00;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
z-index: 62; }
.js-nav .down-arrow {
z-index: -1; }
.js .front .down-arrow {
-webkit-animation: arrow-bounce 0.5s infinite alternate;
animation: arrow-bounce 0.5s infinite alternate; }
@-webkit-keyframes arrow-bounce {
from {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
to {
-webkit-transform: translate(-50%, -2px);
transform: translate(-50%, -2px); } }
@keyframes arrow-bounce {
from {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
to {
-webkit-transform: translate(-50%, -2px);
transform: translate(-50%, -2px); } }
/**
* Component - Footer
*/
.footer {
background: #000000;
color: #FFFFFF;
position: relative;
z-index: 70; }
.footer a:hover {
color: #ff00b4; }
.footer:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #000000;
content: "";
display: block;
height: 200px;
position: absolute;
top: 0px;
-webkit-transform: skewY(-3deg) translate(0, -25%);
-ms-transform: skewY(-3deg) translate(0, -25%);
transform: skewY(-3deg) translate(0, -25%);
width: 100%;
z-index: -1; }
@media (min-width: 48rem) {
.footer:before {
-webkit-transform: skewY(-3deg) translate(0, -30%);
-ms-transform: skewY(-3deg) translate(0, -30%);
transform: skewY(-3deg) translate(0, -30%); } }
@media (min-width: 75rem) {
.footer:before {
-webkit-transform: skewY(-3deg) translate(0, -100%);
-ms-transform: skewY(-3deg) translate(0, -100%);
transform: skewY(-3deg) translate(0, -100%);
top: 140px; } }
.footer > .inner {
position: relative;
z-index: 10; }
@media (min-width: 75rem) {
.footer > .inner {
font-size: 18px;
font-size: 1.125rem;
max-width: 76.083333%; } }
@media (min-width: 112.5rem) {
.footer > .inner {
max-width: 68.055556%; } }
.footer__copyright {
background: #1a1a1a;
color: #FFFFFF;
text-align: center;
padding: 10px 0 28px 0;
padding: 0.625rem 0 1.75rem 0; }
@media (min-width: 48rem) {
.footer__copyright {
padding: 30px 0 28px 0;
padding: 1.875rem 0 1.75rem 0; } }
.footer-nav {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 600;
overflow: hidden;
position: relative;
z-index: 10; }
@media (min-width: 48rem) {
.footer-nav {
padding: 46px 0 36px 0;
padding: 2.875rem 0 2.25rem 0; } }
@media (min-width: 75rem) {
.footer-nav {
padding: 54px 0 42px 0;
padding: 3.375rem 0 2.625rem 0; } }
@media (min-width: 112.5rem) {
.footer-nav {
padding: 90px 0 70px 0;
padding: 5.625rem 0 4.375rem 0; } }
.footer-nav > .footer-nav__item {
-webkit-transition: 0.75s background-color;
transition: 0.75s background-color;
border-bottom: 1px solid #181818;
padding: 0 34px 0px 34px;
padding: 0 2.125rem 0rem 2.125rem;
/**
* Sub footer-nav__item
*/ }
@media (min-width: 75rem) {
.footer-nav > .footer-nav__item {
border: 0 none;
float: left;
text-align: center;
width: 20%;
padding: 0; } }
@media (min-width: 75rem) {
.footer-nav > .footer-nav__item:nth-child(2) > .footer-nav__title:before {
-webkit-transform: translate(-50%, 0) rotate(183deg);
-ms-transform: translate(-50%, 0) rotate(183deg);
transform: translate(-50%, 0) rotate(183deg); }
.footer-nav > .footer-nav__item:nth-child(3) > .footer-nav__title:before {
-webkit-transform: translate(-50%, 0) rotate(178deg);
-ms-transform: translate(-50%, 0) rotate(178deg);
transform: translate(-50%, 0) rotate(178deg); }
.footer-nav > .footer-nav__item:nth-child(4) > .footer-nav__title:before {
-webkit-transform: translate(-50%, 0) rotate(187deg);
-ms-transform: translate(-50%, 0) rotate(187deg);
transform: translate(-50%, 0) rotate(187deg); }
.footer-nav > .footer-nav__item:nth-child(5) > .footer-nav__title:before {
-webkit-transform: translate(-50%, 0) rotate(185deg);
-ms-transform: translate(-50%, 0) rotate(185deg);
transform: translate(-50%, 0) rotate(185deg); } }
.footer-nav > .footer-nav__item > .footer-nav__title {
text-transform: uppercase;
height: 50px;
line-height: 50px; }
@media (min-width: 64rem) {
.footer-nav > .footer-nav__item > .footer-nav__title {
height: 70px;
line-height: 70px; } }
@media (min-width: 75rem) {
.footer-nav > .footer-nav__item > .footer-nav__title {
height: auto;
line-height: inherit; } }
@media (min-width: 75rem) {
.footer-nav > .footer-nav__item > .footer-nav__title:before {
content: "";
display: block;
background: url("../images/layout/line.png") top left no-repeat;
background-size: contain;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0) rotate(187deg);
-ms-transform: translate(-50%, 0) rotate(187deg);
transform: translate(-50%, 0) rotate(187deg);
height: 7px;
width: 52px;
top: 21px; } }
@media (min-width: 75rem) {
.footer-nav > .footer-nav__item > .footer-nav__title:before {
top: 36px; } }
@media (min-width: 90rem) {
.footer-nav > .footer-nav__item > .footer-nav__title:before {
top: 45px; } }
.footer-nav > .footer-nav__item:last-child {
border-bottom: 0 none; }
.footer-nav > .footer-nav__item .footer-nav__item {
padding: 0px 0px 15px 10px;
padding: 0rem 0rem 0.9375rem 0.625rem;
border: 0 none; }
@media (min-width: 75rem) {
.footer-nav > .footer-nav__item .footer-nav__item {
display: block;
width: 100%;
margin: 0 0 11px 0;
margin: 0 0 0.6875rem 0; }
.footer-nav > .footer-nav__item .footer-nav__item:last-child {
margin: 0; } }
@media (min-width: 75rem) {
.footer-nav > .footer-nav__item .footer-nav__item {
font-size: 18px;
font-size: 1.125rem;
margin: 0 0 9px 0;
margin: 0 0 0.5625rem 0;
padding: 0px;
padding: 0rem; } }
@media (min-width: 90rem) {
.footer-nav > .footer-nav__item .footer-nav__item {
font-size: 22px;
font-size: 1.375rem;
margin: 0 0 11px 0;
margin: 0 0 0.6875rem 0; } }
.footer-nav .footer-nav {
padding: 0 0 21px 0;
padding: 0 0 1.3125rem 0; }
.footer-nav__title {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 600;
position: relative;
font-size: 17px;
font-size: 1.0625rem; }
@media (min-width: 48rem) {
.footer-nav__title {
font-size: 18px;
font-size: 1.125rem; } }
@media (min-width: 75rem) {
.footer-nav__title {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 41px;
margin-bottom: 2.5625rem; }
.footer-nav__title:before {
content: "";
position: absolute; } }
@media (min-width: 90rem) {
.footer-nav__title {
font-size: 22px;
font-size: 1.375rem;
margin-bottom: 49px;
margin-bottom: 3.0625rem; } }
.footer-nav__title span {
color: #ff00b4;
display: block;
float: right; }
.footer-nav__link {
color: #FFFFFF;
font-size: 17px;
font-size: 1.0625rem;
text-decoration: none; }
@media (min-width: 48rem) {
.footer-nav__link {
font-size: 18px;
font-size: 1.125rem; } }
@media (min-width: 75rem) {
.footer-nav__link {
font-size: 18px;
font-size: 1.125rem; } }
@media (min-width: 90rem) {
.footer-nav__link {
font-size: 22px;
font-size: 1.375rem; } }
.footer-nav__link:first-letter {
text-transform: uppercase; }
.footer-nav__link:hover {
text-decoration: none;
color: #ff00b4; }
/**
* If javascript is turned on!
*/
.js .footer-nav__title {
cursor: pointer; }
@media (min-width: 64rem) {
.js .footer-nav__title {
cursor: default; } }
/**
* Social links
* @note - can be found at the bottom of the footer
*/
.social-links-wrapper {
background: #1a1a1a;
padding: 0 33px;
padding: 0 2.0625rem; }
@media (min-width: 48rem) {
.social-links-wrapper > .inner {
max-width: 600px; } }
.social-links {
display: table;
table-layout: fixed;
width: 100%; }
.social-links__item {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 0;
padding: 20px 0;
padding: 1.25rem 0; }
.social-link {
color: #FFFFFF;
text-decoration: none;
font-size: 25px;
font-size: 1.5625rem; }
@media (min-width: 64rem) {
.social-link {
font-size: 30px;
font-size: 1.875rem; } }
.social-link:hover {
color: #ff00b4;
text-decoration: none;
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease; }
.social-link .link__copy {
display: none; }
/* Want to have no colours decleations in components or do i??? */
.newsletter {
background: #1a1a1a url("../images/front/footer-border.jpg") top left repeat-x;
background-size: 320px 13px;
color: #FFFFFF;
padding: 38px 33px 0px;
padding: 2.375rem 2.0625rem 0rem;
text-align: center; }
@media (min-width: 48rem) {
.newsletter {
padding: 38px 33px 18px;
padding: 2.375rem 2.0625rem 1.125rem; } }
@media (min-width: 75rem) {
.newsletter {
padding: 70px 33px 20px;
padding: 4.375rem 2.0625rem 1.25rem; } }
@media (min-width: 112.5rem) {
.newsletter {
background: #1a1a1a url("../images/front/footer-border.jpg") top left repeat-x; } }
.newsletter__title {
color: #FFFFFF;
font-family: nandos, Helvetica, Arial, Geneva, sans-serif;
position: relative;
margin: 25px 0;
margin: 1.5625rem 0; }
.newsletter__title:after, .newsletter__title:before {
background: url("../images/layout/line.png") top left no-repeat;
background-size: contain;
height: 10px;
width: 80px;
/* 220 x 20 */
content: "";
display: block;
position: absolute;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
transform: skewY(-3deg);
top: -8px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
.newsletter__title:after {
content: "";
top: inherit;
bottom: -20px;
-webkit-transform: rotate(183deg) translate(-50%, 0);
-ms-transform: rotate(183deg) translate(-50%, 0);
transform: rotate(183deg) translate(-50%, 0);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0; }
.newsletter__title span {
display: block;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
transform: skewY(-3deg); }
.newsletter__title span:last-child {
margin: -12px 4px 0 0;
margin: -0.75rem 0.25rem 0 0; }
.form--newsletter-signup {
width: 100%;
position: relative;
padding: 84px 0 20px 0;
padding: 5.25rem 0 1.25rem 0; }
@media (min-width: 48rem) {
.form--newsletter-signup {
max-width: 530px; } }
@media (min-width: 112.5rem) {
.form--newsletter-signup {
padding: 91px 0 20px 0;
padding: 5.6875rem 0 1.25rem 0; } }
.form--newsletter-signup .form-element__label {
color: #FFFFFF;
display: block;
position: absolute;
top: 0px;
text-align: center;
width: 100%; }
@media (min-width: 48rem) {
.form--newsletter-signup .form-element__label {
top: 25px; } }
.form--newsletter-signup .form-element__input {
background: #FFFFFF;
height: 40px;
font-size: 17px !important;
text-align: center !important; }
.form--newsletter-signup .form-element--newsletter {
float: left;
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px); }
.form--newsletter-signup .form-element--submit {
float: left;
width: 40px; }
.form--newsletter-signup .form-element__wrapper,
.form--newsletter-signup .form-element--submit {
margin-top: 15px;
margin-top: 0.9375rem; }
/**
* Component - Form builder
* Add styles for your form structure here
*/
/**
* Form modifiers
*/
.form--center {
text-align: center; }
/**
* Form Panes
*/
@media (min-width: 48rem) {
.form--nandoscard-registration-stage-2 {
max-width: 675px; } }
/**
* Component - content-panes
* All pane styles and modifiers
*/
.pane {
position: relative;
text-align: center;
overflow: hidden;
/**
* Main modifiers
*/ }
.pane__inner {
width: 100%;
height: 100%; }
.pane__content {
width: 100%;
max-width: 268px;
margin: 0 auto 0;
padding: 105px 0 105px 0;
padding: 6.5625rem 0 6.5625rem 0; }
@media (min-width: 48rem) {
.pane__content {
padding: 200px 0 200px 0;
padding: 12.5rem 0 12.5rem 0;
max-width: 485px; } }
@media (min-width: 90rem) {
.pane__content {
padding: 230px 0 230px 0;
padding: 14.375rem 0 14.375rem 0;
max-width: 600px; } }
@media (min-width: 75rem) {
.pane__content .cta + .cta {
margin-left: 16px;
margin-left: 1rem; } }
@media (min-width: 75rem) {
.pane__content .cta + .cta + .cta {
margin-left: 16px;
margin-left: 1rem; } }
.pane--wide .pane__content {
margin: 0 auto;
max-width: 300px; }
@media (min-width: 48rem) {
.pane--wide .pane__content {
max-width: 672px; } }
@media (min-width: 75rem) {
.pane--wide .pane__content {
max-width: 600px; } }
@media (min-width: 90rem) {
.pane--wide .pane__content {
max-width: 680px; } }
@media (min-width: 112.5rem) {
.pane--wide .pane__content {
max-width: 820px; } }
@media (min-width: 64rem) {
.pane--left .pane__content {
max-width: 524px;
margin: 0 16.666667%; } }
@media (min-width: 56.25rem) {
.pane--right {
text-align: right; } }
@media (min-width: 56.25rem) {
.pane--right .pane__content {
margin: 0;
position: relative;
left: -webkit-calc(100% - 500px);
left: calc(100% - 500px); } }
@media (min-width: 64rem) {
.pane--right .pane__content {
left: -webkit-calc(100% - 600px);
left: calc(100% - 600px); } }
@media (min-width: 75rem) {
.pane--right .pane__content {
left: -webkit-calc(100% - 700px);
left: calc(100% - 700px); } }
.pane__title {
font-family: nandos, Helvetica, Arial, Geneva, sans-serif;
position: relative;
z-index: 10;
margin: 0 auto 20px auto;
margin: 0 auto 1.25rem auto; }
@media (min-width: 48rem) {
.pane__title {
margin: 0 auto 34px auto;
margin: 0 auto 2.125rem auto; } }
@media (min-width: 75rem) {
.pane__title {
margin: 0 auto 26px auto;
margin: 0 auto 1.625rem auto; } }
@media (min-width: 90rem) {
.pane__title {
margin: 0 auto 34px auto;
margin: 0 auto 2.125rem auto; } }
.pane__title span {
display: block;
text-align: center; }
.pane__tagline {
margin-bottom: 60px;
margin-bottom: 3.75rem; }
.pane__copy {
margin: 0 auto 0;
position: relative;
z-index: 10;
margin-bottom: 34px;
margin-bottom: 2.125rem; }
@media (min-width: 48rem) {
.pane__copy {
margin-bottom: 40px;
margin-bottom: 2.5rem; } }
@media (min-width: 75rem) {
.pane__copy {
margin-bottom: 40px;
margin-bottom: 2.5rem; } }
@media (min-width: 90rem) {
.pane__copy {
margin-bottom: 35px;
margin-bottom: 2.1875rem; } }
@media (min-width: 48rem) {
.pane__copy span {
display: block;
text-align: center; } }
/**
* Modifiers */
.pane--promo .pane__title {
font-size: 52px;
font-size: 3.25rem;
margin: 27px 0 50px 0;
margin: 1.6875rem 0 3.125rem 0;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg); }
@media (min-width: 48rem) {
.pane--promo .pane__title {
font-size: 68px;
font-size: 4.25rem;
margin: 40px 0 73px 0;
margin: 2.5rem 0 4.5625rem 0; } }
@media (min-width: 75rem) {
.pane--promo .pane__title {
font-size: 50px;
font-size: 3.125rem;
margin: 30px 0 50px 0;
margin: 1.875rem 0 3.125rem 0; } }
@media (min-width: 90rem) {
.pane--promo .pane__title {
font-size: 60px;
font-size: 3.75rem; } }
@media (min-width: 112.5rem) {
.pane--promo .pane__title {
font-size: 76px;
font-size: 4.75rem; } }
.pane--promo .pane__title span {
line-height: 0.95; }
.pane--promo .pane__title:after, .pane--promo .pane__title:before {
-webkit-backface-visibility: visible;
backface-visibility: visible;
background: url("../images/layout/line-black.png") top left no-repeat;
background-size: contain;
content: "";
display: block;
height: 10px;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 110px; }
@media (min-width: 48rem) {
.pane--promo .pane__title:after, .pane--promo .pane__title:before {
height: 14px;
width: 139px; } }
.pane--promo .pane__title:after {
bottom: -35px;
-webkit-transform: rotate(187deg) translate(-50%, 0);
-ms-transform: rotate(187deg) translate(-50%, 0);
transform: rotate(187deg) translate(-50%, 0);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0; }
.pane--promo .pane__title:before {
top: -19px; }
.pane--promo .pane__copy {
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-backface-visibility: visible;
backface-visibility: visible;
margin-bottom: 52px;
margin-bottom: 3.25rem; }
.pane--promo.pane--dark .pane__title:after, .pane--promo.pane--dark .pane__title:before {
background: url("../images/layout/line-black.png") top left no-repeat;
background-size: contain; }
.pane--promo.pane--light .pane__title:after, .pane--promo.pane--light .pane__title:before {
background: url("../images/layout/line.png") top left no-repeat;
background-size: contain; }
/**
* Modifier -- half pane
*/
/**
* Modifier -- light
*/
.pane--light {
color: #FFFFFF; }
.pane--light .pane__title,
.pane--light .pane__title a,
.pane--light .pane__copy,
.pane--light .pane__copy p {
color: #FFFFFF; }
/**
* Modifier -- dark
*/
.pane--dark {
color: #000000; }
.pane--dark .pane__title,
.pane--dark .pane__title a,
.pane--dark .pane__copy,
.pane--dark .pane__copy p {
color: #000000; }
/**
* Blog layout
*/
@media (min-width: 48rem) {
.layout--blog-teaser .pane--blog-teaser:nth-child(1) {
width: 100%; } }
@media (min-width: 48rem) {
.layout--blog-teaser .pane--blog-teaser:nth-child(2), .layout--blog-teaser .pane--blog-teaser:nth-child(3) {
width: 50%;
float: left; } }
.layout--blog-teaser .pane__content {
margin: 0 auto;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 62.5%; }
.layout--blog-teaser .pane__title {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-size: 21px;
font-size: 1.3125rem;
line-height: 1.1;
margin-bottom: 0; }
@media (min-width: 48rem) {
.layout--blog-teaser .pane__title {
font-size: 24px;
font-size: 1.5rem; } }
@media (min-width: 75rem) {
.layout--blog-teaser .pane__title {
font-size: 19px;
font-size: 1.1875rem; } }
@media (min-width: 90rem) {
.layout--blog-teaser .pane__title {
font-size: 22px;
font-size: 1.375rem; } }
@media (min-width: 112.5rem) {
.layout--blog-teaser .pane__title {
font-size: 28px;
font-size: 1.75rem; } }
.layout--blog-teaser .pane__title a:hover {
text-decoration: none; }
/**
* How it works panes
*/
.pane--nandos-card-hiw {
height: auto;
min-height: 750px;
clear: both;
width: 100%;
position: relative; }
@media (min-width: 48rem) {
.pane--nandos-card-hiw {
min-height: 800px; } }
@media (min-width: 64rem) {
.pane--nandos-card-hiw {
height: 800px;
height: 100vh; } }
@media (min-width: 75rem) {
.pane--nandos-card-hiw {
height: 900px;
height: 100vh; } }
@media (min-width: 112.5rem) {
.pane--nandos-card-hiw {
height: 1050px;
height: 100vh; } }
.content-form {
padding: 80px 20px 100px;
padding: 5rem 1.25rem 6.25rem;
/**
* --centered
* Will center content
*/ }
@media (min-width: 48rem) {
.content-form {
padding: 120px 0 105px;
padding: 7.5rem 0 6.5625rem; } }
@media (min-width: 75rem) {
.content-form {
padding: 120px 0 105px;
padding: 7.5rem 0 6.5625rem; } }
@media (min-width: 90rem) {
.content-form {
padding: 180px 0 135px;
padding: 11.25rem 0 8.4375rem; } }
@media (min-width: 112.5rem) {
.content-form {
padding: 230px 0 135px;
padding: 14.375rem 0 8.4375rem; } }
@media (min-width: 48rem) {
.content-form {
text-align: center; } }
.content-form__inner {
margin: 0 auto;
margin: 0 auto;
max-width: 720px; }
.content-form__title {
text-align: center; }
.content-form__mandatory {
display: block;
text-align: center; }
.content-form--centered .content-form__inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.content-form--login {
background: #dcdcdc;
color: #000000;
text-align: center; }
.content-form--login form {
margin: 0 auto;
max-width: 300px; }
@media (min-width: 64rem) and (max-width: 74rem) {
.content-form--login form {
max-width: 100%; } }
@media (min-width: 112.5rem) {
.content-form--login form {
max-width: 100%; } }
@media (min-width: 64rem) {
.content-form--login .pane__content {
max-width: 65.7%; } }
@media (min-width: 64rem) and (max-width: 74rem) {
.content-form--login .pane__content {
max-width: 670px; } }
@media (min-width: 112.5rem) {
.content-form--login .pane__content {
max-width: 670px; } }
.content-form--login .pane__tagline {
font-size: 18px;
font-size: 1.125rem;
margin: 0 0 40px 0;
margin: 0 0 2.5rem 0; }
@media (min-width: 64rem) and (max-width: 74rem) {
.content-form--login .pane__tagline {
font-size: 22px;
font-size: 1.375rem;
margin: 0 0 50px 0;
margin: 0 0 3.125rem 0; } }
.content-form--login .form-element__fieldset {
margin: 0 0 44px 0;
margin: 0 0 2.75rem 0; }
@media (min-width: 112.5rem) {
.content-form--login .form-element__fieldset {
margin: 0 0 56px 0;
margin: 0 0 3.5rem 0; } }
.content-form--login .form-element__fieldset--actions {
margin: 0 0 55px 0;
margin: 0 0 3.4375rem 0; }
@media (min-width: 64rem) {
.content-form--login .form-element__fieldset--actions .form-element {
max-width: 100%; } }
.content-form--login .form-element {
margin: 0 0 40px 0;
margin: 0 0 2.5rem 0; }
@media (min-width: 64rem) {
.content-form--login .form-element {
max-width: 300px;
margin: 0 70px 0 0;
margin: 0 4.375rem 0 0; } }
@media (min-width: 75rem) {
.content-form--login .form-element {
margin: 0 0 40px 0;
margin: 0 0 2.5rem 0; } }
@media (min-width: 112.5rem) {
.content-form--login .form-element {
margin: 0 70px 0 0;
margin: 0 4.375rem 0 0; } }
.content-form--login .form-element:last-child {
margin: 0 0 0 0;
margin: 0 0 0 0; }
.content-form--decoration-1 {
position: relative;
background-image: url("../images/layout/content-form-mobile-top.jpg"), url("../images/layout/content-form-mobile-bottom.jpg");
background-position: top right, bottom right;
background-repeat: no-repeat;
background-size: 320px auto, 230px auto; }
@media (min-width: 56.25rem) {
.content-form--decoration-1 {
background-image: url("../images/layout/content-form-top-left.png"), url("../images/layout/content-form-bottom-right.png");
background-position: left top, bottom right;
background-repeat: no-repeat; } }
@media (min-width: 64rem) {
.content-form--decoration-1 {
background-position: left 30px, bottom right; } }
@media (min-width: 75rem) {
.content-form--decoration-1 {
background-position: left 60px, bottom right; } }
@media (min-width: 112.5rem) {
.content-form--decoration-1 {
background-position: left 80px, bottom right; } }
@media (min-width: 56.25rem) {
.content-form--decoration-1:before {
display: block;
content: "";
position: absolute;
bottom: -94px;
left: 0;
z-index: 200;
width: 415px;
height: 353px;
background: url("../images/layout/content-form-bottom-left.png") no-repeat top left;
pointer-events: none; } }
@media (min-width: 56.25rem) {
.content-form--decoration-1:after {
display: block;
content: "";
position: absolute;
top: -40px;
right: 0;
z-index: 200;
width: 386px;
height: 420px;
background: url("../images/layout/content-form-top-right.png") no-repeat top left;
pointer-events: none; } }
.page-registration-stage-3 .content-form--nandoscard-registration .layout--full {
margin-bottom: 40px;
margin-bottom: 2.5rem; }
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half {
width: 100%; }
@media (min-width: 64rem) {
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:nth-child(1) {
width: 35%; }
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:nth-child(2) {
width: 65%; } }
@media (min-width: 75rem) {
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:nth-child(1) {
width: 40%; }
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:nth-child(2) {
width: 60%; } }
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:first-child {
min-height: 340px;
text-align: center; }
@media (min-width: 30rem) {
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:first-child {
min-height: 420px; } }
@media (min-width: 48rem) {
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:first-child {
min-height: 300px; } }
@media (min-width: 75rem) {
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:first-child {
min-height: 400px; } }
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:first-child img {
width: 100%;
max-width: 517px;
display: inline-block; }
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:last-child {
min-height: 460px; }
@media (min-width: 48rem) {
.page-registration-stage-3 .content-form--nandoscard-registration .layout--half:last-child {
min-height: 190px; } }
.page-registration-stage-3 .content-form--nandoscard-registration .content-form__complete-option {
padding: 0 0 40px;
padding: 0 0 2.5rem;
width: 100%;
background: #dcdcdc; }
@media (min-width: 48rem) {
.page-registration-stage-3 .content-form--nandoscard-registration .content-form__complete-option {
padding: 0 0 50px;
padding: 0 0 3.125rem; } }
.page-registration-stage-3 .content-form--nandoscard-registration .content-form__complete-option__title {
display: block;
width: 100%;
margin-bottom: 10px; }
/**================================================================**/
/**
* This lives in the paritals but needs to come after the content-pane file.
* content-pane = rules for panels
* special-panes = any special styling.
*/
/**
* Special panes
*/
.pane--404 {
position: relative; }
.full-banner .pane--404 {
height: 100vh; }
@media (min-width: 64rem) {
.pane--404 .pane__inner {
background-image: url(../images/page-404/Desktop-404-Pattern-BottomLeft.png), url(../images/page-404/Desktop-404-Pattern-TopRight.png);
background-repeat: no-repeat, no-repeat;
background-position: 0% 80%, 100% 50%;
background-size: 300px 247px, 600px 246px; } }
@media (min-width: 75rem) {
.pane--404 .pane__inner {
background-position: 0% 80%, 100% 50%;
background-size: 350px 288px, 700px 287px; } }
@media (min-width: 90rem) {
.pane--404 .pane__inner {
background-position: 0% 85%, 100% 55%; } }
@media (min-width: 112.5rem) {
.pane--404 .pane__inner {
background-position: 0% 90%, 100% 60%; } }
.full-banner .pane--404 .pane__content:first-child {
margin: 0;
padding: 0;
position: absolute;
left: 50%;
top: 150px;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
min-width: 300px; }
@media (min-width: 30rem) {
.full-banner .pane--404 .pane__content:first-child {
top: 180px;
min-width: 450px; } }
@media (min-width: 48rem) {
.full-banner .pane--404 .pane__content:first-child {
top: 170px;
max-width: 1000px; } }
@media (min-width: 56.25rem) {
.full-banner .pane--404 .pane__content:first-child {
top: inherit;
bottom: 10%;
max-width: 1000px; } }
@media (min-width: 64rem) {
.full-banner .pane--404 .pane__content:first-child {
top: inherit;
bottom: 10%;
max-width: 1000px; } }
.pane--404.pane--promo .pane__copy {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
margin-bottom: -10px;
margin-bottom: -0.625rem; }
@media (min-width: 30rem) {
.pane--404.pane--promo .pane__copy {
margin-bottom: 0px;
margin-bottom: 0rem; } }
@media (min-width: 48rem) {
.pane--404.pane--promo .pane__copy {
margin-bottom: 20px;
margin-bottom: 1.25rem; } }
.pane {
position: relative; }
.pane .hover-background-image {
opacity: 0;
-webkit-transition: opacity 0.75s;
transition: opacity 0.75s;
width: 110%;
height: auto;
max-width: none;
position: absolute;
top: 0;
left: 0; }
.pane .form {
z-index: 1; }
.pane:hover .hover-background-image {
-webkit-transition: opacity 0.75s;
transition: opacity 0.75s;
opacity: 1; }
.pane--takeaway .takeaway-right-image,
.pane--takeaway .takeaway-left-image {
position: absolute;
width: auto;
height: 95%; }
.pane--takeaway .takeaway-left-image {
top: 10%;
display: none; }
@media (min-width: 48rem) {
.pane--takeaway .takeaway-left-image {
display: block;
left: -10%; } }
@media (min-width: 56.25rem) {
.pane--takeaway .takeaway-left-image {
left: 0; } }
.pane--takeaway .takeaway-right-image {
top: 5%;
-webkit-animation: rotate 1.5s ease alternate infinite;
animation: rotate 1.5s ease alternate infinite;
display: none; }
@media (min-width: 48rem) {
.pane--takeaway .takeaway-right-image {
display: block;
right: -50%; } }
@media (min-width: 56.25rem) {
.pane--takeaway .takeaway-right-image {
right: -35%; } }
@media (min-width: 64rem) {
.pane--takeaway .takeaway-right-image {
right: -25%; } }
@media (min-width: 75rem) {
.pane--takeaway .takeaway-right-image {
right: -15%; } }
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg); } }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg); } }
.pane--blog-teaser {
cursor: pointer; }
.pane--blog-teaser .pane__inner {
background-color: transparent;
position: absolute;
display: block;
-webkit-transition: background-color 1s;
transition: background-color 1s; }
.pane--blog-teaser .pane__inner:hover {
background-color: #ff00b4; }
.pane--nandos-card-how .pane__inner {
background: url("/build/dist/images/fabric/nandoscard/banner-pattern.png") no-repeat;
background-position: top right;
background-size: contain; }
.pane--steps {
background-image: url(../images/fabric/nandoscard/stepper_background_left.png), url(../images/fabric/nandoscard/stepper_background_right.png);
background-position: left top, right bottom;
background-repeat: no-repeat;
background-size: 14% auto, 35% auto;
background-color: #000000; }
@media (min-width: 64rem) {
.pane--steps {
max-height: 1120px; } }
.pane--steps .pane__content {
max-width: 100%; }
.pane--steps .stepper {
width: 100%;
overflow: hidden;
margin: 0 0 0 0;
margin: 0 0 0 0; }
@media (min-width: 64rem) {
.pane--steps .stepper {
margin: 0 0 100px 0;
margin: 0 0 6.25rem 0; } }
.pane--steps .step {
display: block;
max-width: 260px;
margin: 0 auto;
min-height: 250px; }
@media (min-width: 64rem) {
.pane--steps .step {
width: 25%;
float: left;
max-width: inherit;
margin: 0;
min-height: 1px; } }
.pane--steps .step .step__number {
display: inline-block;
font-size: 0;
background: #c51221;
color: #FFFFFF;
width: 60px;
height: 60px;
line-height: 60px;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: 0 24px 128px 0;
margin: 0 1.5rem 8rem 0;
position: relative;
z-index: 10;
float: left;
clear: both; }
@media (min-width: 64rem) {
.pane--steps .step .step__number {
width: 100px;
height: 100px;
line-height: 100px;
margin: 0 0 20px 0;
margin: 0 0 1.25rem 0;
float: left; } }
.pane--steps .step .step__number::after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 30px;
font-size: 1.875rem;
font-family: "icomoon"; }
@media (min-width: 64rem) {
.pane--steps .step .step__number::after {
font-size: 40px;
font-size: 2.5rem; } }
@media (min-width: 64rem) {
.pane--steps .step .step__number {
float: none; } }
.pane--steps .step:nth-child(1) {
padding-top: 0px;
padding-top: 0rem; }
.pane--steps .step:nth-child(1) .step__number::after {
content: "\e912"; }
@media (min-width: 64rem) {
.pane--steps .step:nth-child(1) {
padding-top: 40px;
padding-top: 2.5rem; } }
.pane--steps .step:nth-child(2) {
padding-top: 0px;
padding-top: 0rem;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px); }
.pane--steps .step:nth-child(2) .step__number::after {
content: "\e914"; }
@media (min-width: 64rem) {
.pane--steps .step:nth-child(2) {
padding-top: 100px;
padding-top: 6.25rem; } }
.pane--steps .step:nth-child(3) {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px); }
.pane--steps .step:nth-child(3) .step__number::after {
content: "\e913"; }
.pane--steps .step:nth-child(4) {
padding-top: 0px;
padding-top: 0rem;
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px); }
.pane--steps .step:nth-child(4) .step__number::after {
content: "\e915"; }
@media (min-width: 64rem) {
.pane--steps .step:nth-child(4) {
padding-top: 115px;
padding-top: 7.1875rem; } }
.pane--steps .step__title {
margin: 0 0 20px 0;
margin: 0 0 1.25rem 0;
text-align: left; }
@media (min-width: 64rem) {
.pane--steps .step__title {
text-align: center; } }
.pane--steps .step__copy {
text-align: left;
max-width: 200px;
margin: 0 auto; }
@media (min-width: 64rem) {
.pane--steps .step__copy {
text-align: center; } }
.pane--steps .canvas-container-stepper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; }
@media (max-width: 48rem) {
.pane--app .pane__copy {
margin-bottom: 10px;
margin-bottom: 0.625rem; } }
/**==================================
* Help center panels
*==================================*/
.pane--survey .pane__title {
margin: 0 auto 30px;
margin: 0 auto 1.875rem;
background: url("../images/help-center/survey-title.png") no-repeat top left;
background-size: contain;
text-indent: -999em;
height: 219px;
width: 187px; }
.main-content .pane--bucket:nth-child(4n + 1), .main-content .pane--bucket:nth-child(4n + 4),
.main-content .pane--help-center:nth-child(4n + 1),
.main-content .pane--help-center:nth-child(4n + 4) {
background: #dcdcdc; }
.main-content .pane--bucket:nth-child(4n + 2), .main-content .pane--bucket:nth-child(4n + 3),
.main-content .pane--help-center:nth-child(4n + 2),
.main-content .pane--help-center:nth-child(4n + 3) {
background: #e6e6e6; }
.pane--experience .pane__title::before {
display: block;
position: relative;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-family: "icomoon";
content: "\e91a";
margin-bottom: 45px;
margin-bottom: 2.8125rem; }
.pane--anything-else .pane__title::before {
display: block;
position: relative;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-family: "icomoon";
content: "\e917";
margin-bottom: 45px;
margin-bottom: 2.8125rem; }
.pane--chat-online .pane__title::before {
display: block;
position: relative;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-family: "icomoon";
content: "\e919";
margin-bottom: 45px;
margin-bottom: 2.8125rem; }
.pane--call-us .pane__title::before {
display: block;
position: relative;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-family: "icomoon";
content: "\e918";
margin-bottom: 45px;
margin-bottom: 2.8125rem; }
.pane--call-us .pane__telephone {
color: #000000;
clear: both;
display: block;
font-size: 28px;
font-size: 1.75rem;
margin-top: 30px;
margin-top: 1.875rem; }
.pane--restaurant-details {
height: 100%; }
.pane--restaurant-details .pane__title:after {
bottom: -40px; }
.pane--restaurant-details .pane__copy {
-webkit-transform: none;
-ms-transform: none;
transform: none; }
.pane--restaurant-details .pane__copy p {
margin: 0; }
@media (min-width: 48rem) {
.pane--restaurant-details .pane__copy p {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.2; } }
.pane--restaurant-details .pane__telephone {
display: block;
color: #FFFFFF;
margin: 20px 0 0 0;
margin: 1.25rem 0 0 0;
font-size: 20px;
font-size: 1.25rem; }
.pane--restaurant-details .pane__telephone:hover {
text-decoration: none; }
@media (min-width: 30rem) {
.pane--restaurant-details .pane__telephone {
font-size: 24px;
font-size: 1.5rem;
margin: 30px 0 0 0;
margin: 1.875rem 0 0 0; } }
@media (min-width: 48rem) {
.pane--restaurant-details .pane__telephone {
font-size: 28px;
font-size: 1.75rem; } }
@media (min-width: 48rem) {
.pane--restaurant-details .cta--telephone {
display: none; } }
.front.full-banner .banner .pane.pane--promo .pane__title {
font-size: 60px;
font-size: 3.75rem; }
@media (min-width: 30rem) {
.front.full-banner .banner .pane.pane--promo .pane__title {
font-size: 76px;
font-size: 4.75rem; } }
@media (min-width: 48rem) {
.front.full-banner .banner .pane.pane--promo .pane__title {
font-size: 94px;
font-size: 5.875rem; } }
/**
* Banner styles
* these are overides that should only happen when a content pane placed in the banner
*/
.full-banner .banner .pane__content {
padding: 0;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.full-banner .banner .pane__copy {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.1; }
@media (min-width: 48rem) {
.full-banner .banner .pane__copy {
font-size: 22px;
font-size: 1.375rem; } }
@media (min-width: 90rem) {
.full-banner .banner .pane__copy {
font-size: 28px;
font-size: 1.75rem; } }
.full-banner .banner .pane.pane--promo .pane__title {
font-size: 40px;
font-size: 2.5rem;
line-height: 0.95;
margin: 50px 0 50px 0;
margin: 3.125rem 0 3.125rem 0; }
@media (min-height: 46.875rem) {
.full-banner .banner .pane.pane--promo .pane__title {
font-size: 60px;
font-size: 3.75rem;
margin: 40px 0 73px 0;
margin: 2.5rem 0 4.5625rem 0; } }
@media (min-width: 90rem) {
.full-banner .banner .pane.pane--promo .pane__title {
margin: 50px 0 50px 0;
margin: 3.125rem 0 3.125rem 0; } }
@media (min-width: 90rem) and (min-height: 46.875rem) {
.full-banner .banner .pane.pane--promo .pane__title {
font-size: 76px;
font-size: 4.75rem;
margin: 40px 0 73px 0;
margin: 2.5rem 0 4.5625rem 0; } }
.full-banner .banner .pane.pane--promo .pane__copy p {
font-size: 18px;
font-size: 1.125rem; }
@media (min-height: 35.5rem) {
.full-banner .banner .pane.pane--promo .pane__copy p {
font-size: 20px;
font-size: 1.25rem; } }
/**================================================================**/
/**
* Component - Slider/banner
* All base line styles for the slider/banner component
* @notes: .slider--hero is added to the slider/banner at the top of the page - this allows for control over it being full height or not
*/
.slick-slider {
position: relative; }
.slick-arrow {
display: block;
position: absolute;
top: 50%;
text-align: center;
text-decoration: none;
z-index: 900;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.slick-arrow span {
display: none; }
.slick-arrow.slick-disabled {
display: none !important; }
.slick-arrow:before {
display: block;
content: "";
height: 0;
width: 0; }
.slick-next {
right: 2.5%; }
@media (min-width: 48rem) {
.slick-next {
right: 3.333333%; } }
.slick-next::before {
margin-right: -2px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 18px solid #73ff1e;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.slick-next:hover::before {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5); }
.slick-prev {
left: 3.333333%; }
@media (min-width: 48rem) {
.slick-prev {
left: 2.5%; } }
.slick-prev:before {
margin-left: -2px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 18px solid #73ff1e;
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.slick-prev:hover:before {
margin-left: -7px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 26px solid #73ff1e; }
/**
* other sliders
*/
.slider--hatching-soon {
background: #074b3c;
color: #FFFFFF; }
.accordion {
padding: 0 10px;
padding: 0 0.625rem;
width: 100%; }
.accordion .link {
font-size: 22px;
font-size: 1.375rem;
padding-right: 14px;
padding-right: 0.875rem;
color: #ff2350;
text-transform: capitalize; }
.accordion__location {
font-size: 28px;
font-size: 1.75rem;
padding-left: 34px;
padding-left: 2.125rem;
color: #000000;
position: relative;
text-transform: capitalize; }
.accordion__location:before {
color: #ff2350;
-webkit-transform-origin: 50% 51%;
-ms-transform-origin: 50% 51%;
transform-origin: 50% 51%;
-webkit-transition: -webkit-transform 1s ease-out;
transition: transform 1s ease-out;
position: absolute;
left: 0;
top: 0; }
.accordion__location:hover {
text-decoration: none; }
.accordion__location:hover:before {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.accordion__location--active:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); }
.accordion__content {
margin-top: 25px;
margin-top: 1.5625rem;
overflow: hidden; }
.accordion__content--closed {
max-height: 0;
-webkit-transition: max-height 0.5s ease-out;
transition: max-height 0.5s ease-out; }
.accordion__content--open {
-webkit-transition: max-height 1s ease-in;
transition: max-height 1s ease-in;
max-height: 1000px;
height: auto; }
.accordion__inner {
background: #e3e3e3;
padding: 32px 34px 0;
padding: 2rem 2.125rem 0;
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; }
@media (min-width: 64rem) {
.accordion__inner {
margin: 0 0 30px 16px;
margin: 0 0 1.875rem 1rem;
padding: 32px 34px 0;
padding: 2rem 2.125rem 0; } }
.accordion-listing {
overflow: hidden; }
.accordion-listing__item {
margin-bottom: 25px;
margin-bottom: 1.5625rem; }
@media (min-width: 64rem) {
.accordion-listing__item {
float: left;
width: 33.33%; }
.accordion-listing__item:nth-child(3n + 1) {
clear: both; } }
.accordion--restaurant-listing {
margin: 40px auto 60px;
margin: 2.5rem auto 3.75rem; }
@media (min-width: 64rem) {
.accordion--restaurant-listing {
margin: 130px auto 130px;
margin: 8.125rem auto 8.125rem;
max-width: 976px; } }
@media (min-width: 90rem) {
.accordion--restaurant-listing {
margin: 220px auto 220px;
margin: 13.75rem auto 13.75rem; } }
/**
* Component - Steps
* Renders out a stepper - can either have content associated with step or not.
*/
.steps {
margin: 0 auto 80px;
margin: 0 auto 5rem;
display: block;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
text-align: center; }
.steps li {
position: relative;
display: inline-block;
vertical-align: middle; }
.steps li span {
font-size: 15px;
font-size: 0.9375rem;
padding-top: 4px;
padding-top: 0.25rem;
margin: 0 15px;
margin: 0 0.9375rem;
display: block;
position: relative;
z-index: 10;
width: 28px;
height: 28px;
color: #F701B5;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
text-align: center;
border: 2px solid #F701B5;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #FFFFFF;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out; }
@media (min-width: 48rem) {
.steps li span {
font-size: 22px;
font-size: 1.375rem;
padding-top: 7px;
padding-top: 0.4375rem;
width: 40px;
height: 40px; } }
.steps li:first-child:after, .steps.active-step:after {
display: block;
position: absolute;
top: 14px;
left: 50%;
z-index: 1;
content: "";
height: 0px;
width: 100%;
border-bottom: 2px solid #F701B5; }
@media (min-width: 48rem) {
.steps li:first-child:after, .steps.active-step:after {
top: 20px; } }
.steps li:last-child span, .steps.last-step span {
width: 28px;
height: 28px;
padding-top: 0px; }
@media (min-width: 48rem) {
.steps li:last-child span, .steps.last-step span {
width: 40px;
height: 40px; } }
.steps li:last-child span:after, .steps.last-step span:after {
font-size: 12px;
font-size: 0.75rem;
padding: 6px 0;
padding: 0.375rem 0;
display: block;
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
content: "\e90a";
font-family: "icomoon";
text-align: center;
color: #F701B5;
line-height: 1; }
@media (min-width: 48rem) {
.steps li:last-child span:after, .steps.last-step span:after {
font-size: 16px;
font-size: 1rem;
padding: 11px 0;
padding: 0.6875rem 0;
width: 36px;
height: 36px; } }
.steps li:last-child:after, .steps.last-step:after {
margin-left: -50%;
margin-left: -50%;
display: block;
position: absolute;
top: 14px;
left: 0;
content: "";
height: 0px;
width: 100%;
border-bottom: 2px solid #F701B5; }
@media (min-width: 48rem) {
.steps li:last-child:after, .steps.last-step:after {
top: 20px; } }
/*********
// Stage 1
*********/
.page-registration-stage-1 .steps li:first-child span {
color: #FFFFFF;
background: #F701B5; }
/*********
// Stage 2
*********/
.page-registration-stage-2 .steps li:first-child span {
color: #FFFFFF;
background: #F701B5; }
.page-registration-stage-2 .steps li:nth-child(2) span, .page-registration-stage-2 .steps.active-step span {
color: #FFFFFF;
background: #F701B5; }
/*********
// Stage 3
*********/
.page-registration-stage-3 .steps li:first-child span, .page-registration-stage-3 .steps li:nth-child(2) span {
color: #FFFFFF;
background: #F701B5; }
.page-registration-stage-3 .steps li:last-child span, .page-registration-stage-3 .steps.last-step span, .page-registration-stage-3 .steps.active-step span {
color: #FFFFFF;
background: #F701B5; }
.page-registration-stage-3 .steps li:last-child span:after, .page-registration-stage-3 .steps.last-step span:after, .page-registration-stage-3 .steps.active-step span:after {
color: #FFFFFF; }
.pane__inner {
z-index: 99; }
.canvas-container {
margin: 0 auto;
position: absolute;
top: 0px; }
@media (min-width: 48rem) {
.canvas-container {
display: block; } }
#canvas-step-lines-all {
z-index: 10; }
.step__number {
opacity: 1; }
.search-results--listing {
display: none;
visibility: hidden;
background-color: #dcdcdc;
padding: 132px 17px 132px 17px;
padding: 8.25rem 1.0625rem 8.25rem 1.0625rem; }
@media (min-width: 48rem) {
.search-results--listing {
padding-top: 190px;
padding-top: 11.875rem; } }
@media (min-width: 64rem) {
.search-results--listing {
padding: 190px 0 150px 0;
padding: 11.875rem 0 9.375rem 0; } }
@media (min-width: 90rem) {
.search-results--listing {
padding: 180px 0 150px 0;
padding: 11.25rem 0 9.375rem 0; } }
@media (min-width: 112.5rem) {
.search-results--listing {
padding: 320px 0 150px 0;
padding: 20rem 0 9.375rem 0; } }
@media (min-width: 64rem) {
.search-results--listing .restaurant-listing {
margin: 0 auto;
width: 964px;
width: 60.25rem; } }
@media (min-width: 75rem) {
.search-results--listing .restaurant-listing {
width: 90%; } }
@media (min-width: 112.5rem) {
.search-results--listing .restaurant-listing {
width: 80%; } }
.search-results--listing .layout--main {
margin-bottom: 35px;
margin-bottom: 2.1875rem; }
@media (min-width: 64rem) {
.search-results--listing .layout--main {
margin-bottom: 75px;
margin-bottom: 4.6875rem; } }
.search-results--listing .layout--main:before {
content: "";
width: 110%;
background-color: #dcdcdc;
height: 100px;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
transform: skewY(-3deg);
left: 0;
top: -55px; }
.search-results--listing .layout--one-third {
margin-bottom: 35px;
margin-bottom: 2.1875rem; }
@media (min-width: 64rem) {
.search-results--listing .layout--one-third {
width: 33.33333%;
float: left;
width: 30%;
margin-right: 5%; } }
@media (min-width: 64rem) {
.search-results--listing .layout--one-third:nth-child(3n - 2) {
margin-right: 0; } }
@media (min-width: 64rem) {
.search-results--listing .layout--one-third:nth-child(3n - 4) {
clear: both; } }
.search-results--locations {
display: none;
visibility: hidden;
width: 100%;
height: 650px;
height: 40.625rem; }
@media (min-width: 48rem) {
.search-results--locations {
height: 1400px;
height: 87.5rem; } }
.search-results--locations .map-panel__form-inner {
display: none; }
.touch .search-results--locations {
height: 450px;
height: 28.125rem; }
.search-results.active {
visibility: visible;
display: block; }
.view-switch {
font-size: 0;
overflow: hidden;
display: block;
position: absolute;
border: 2px solid #ff2350;
top: 70px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
width: -webkit-calc(100% - 34px);
width: calc(100% - 34px);
z-index: 2; }
@media (min-width: 48rem) {
.view-switch {
top: 3px;
width: 100px;
width: 6.25rem;
top: 105px;
top: 6.5625rem;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%); } }
@media (min-width: 90rem) {
.view-switch {
width: 108px;
width: 6.75rem;
top: 105px;
top: 6.5625rem; } }
@media (min-width: 112.5rem) {
.view-switch {
top: 236px;
top: 14.75rem; } }
.view-switch__listing, .view-switch__map {
width: 50%;
height: 48px;
height: 3rem;
font-size: 20px;
font-size: 1.25rem;
text-align: center;
display: block;
float: left;
cursor: pointer;
background-color: transparent; }
@media (min-width: 48rem) {
.view-switch__listing, .view-switch__map {
width: 48px;
width: 3rem; } }
@media (min-width: 90rem) {
.view-switch__listing, .view-switch__map {
height: 52px;
height: 3.25rem;
width: 52px;
width: 3.25rem; } }
.view-switch__listing a, .view-switch__map a {
display: block;
height: 100%;
width: 100%;
color: #ff2350;
text-decoration: none; }
.view-switch__listing a:before, .view-switch__map a:before {
font-size: 28px;
font-size: 1.75rem; }
@media (min-width: 48rem) {
.view-switch__listing a:before, .view-switch__map a:before {
font-size: 48px;
font-size: 3rem; } }
.active.view-switch__listing, .active.view-switch__map {
background-color: #ff2350; }
.active.view-switch__listing a, .active.view-switch__map a {
color: #FFFFFF; }
.view-switch__listing a:before, .view-switch__map a:before {
font-family: icomoon;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.view-switch__listing a:before {
content: "\e620";
font-size: 51px;
font-size: 3.1875rem; }
@media (min-width: 48rem) {
.view-switch__listing a:before {
background-color: #ff2350;
color: #dcdcdc;
content: "\e601"; } }
@media (min-width: 48rem) {
.view-switch__listing.active a:before {
background-color: #FFFFFF;
color: #ff2350; } }
.view-switch__map a:before {
content: "\e604"; }
@media (min-width: 48rem) {
.view-switch__map a:before {
font-size: 32px;
font-size: 2rem; } }
@media (min-width: 112.5rem) {
.view-switch__map a:before {
font-size: 36px;
font-size: 2.25rem; } }
.social {
text-align: center;
position: relative;
display: table;
color: #000000;
width: 100%;
height: 430px;
min-height: 430px; }
@media (min-width: 30rem) {
.social {
height: 410px;
min-height: 410px; } }
@media (min-width: 48rem) {
.social {
height: 450px;
min-height: 450px; } }
@media (min-width: 56.25rem) {
.social {
height: 520px;
min-height: 520px; } }
@media (min-width: 64rem) {
.social {
height: 550px;
min-height: 550px; } }
@media (min-width: 30rem) {
.social.social--image {
min-height: 420px;
min-height: 26.25rem; } }
@media (min-width: 48rem) {
.social.social--image {
min-height: 480px;
min-height: 30rem; } }
@media (min-width: 56.25rem) {
.social.social--image {
min-height: 550px;
min-height: 34.375rem; } }
@media (min-width: 64rem) {
.social.social--image {
min-height: 630px;
min-height: 39.375rem; } }
@media (min-width: 75rem) {
.social.social--image {
min-height: 700px;
min-height: 43.75rem; } }
.social__inner {
display: table-cell;
width: 100%;
vertical-align: middle; }
.social--image .social__inner, .social .social__overlay {
height: 305px;
height: 19.0625rem;
width: 305px;
width: 19.0625rem; }
@media (min-width: 30rem) {
.social--image .social__inner, .social .social__overlay {
height: 320px;
height: 20rem;
width: 320px;
width: 20rem; } }
@media (min-width: 48rem) {
.social--image .social__inner, .social .social__overlay {
height: 340px;
height: 21.25rem;
width: 340px;
width: 21.25rem; } }
@media (min-width: 56.25rem) {
.social--image .social__inner, .social .social__overlay {
height: 380px;
height: 23.75rem;
width: 380px;
width: 23.75rem; } }
@media (min-width: 64rem) {
.social--image .social__inner, .social .social__overlay {
height: 450px;
height: 28.125rem;
width: 450px;
width: 28.125rem; } }
.social__copy {
font-size: 20px;
font-size: 1.25rem;
margin: 0 auto;
width: 100%;
max-width: 80%; }
@media (min-width: 64rem) {
.social__copy {
max-width: 60%; } }
@media (min-width: 75rem) {
.social__copy {
max-width: 600px;
max-width: 37.5rem; } }
@media (min-width: 64rem) {
.social--image .social__copy {
max-width: 80%; } }
.social__icon {
font-size: 34px;
font-size: 2.125rem;
margin-top: 20px;
margin-top: 1.25rem;
font-weight: normal; }
.social__title {
font-size: 16px;
font-size: 1rem;
margin-top: 20px;
margin-top: 1.25rem;
font-weight: normal; }
@media (min-width: 48rem) {
.social__title {
font-size: 20px;
font-size: 1.25rem;
margin-top: 35px;
margin-top: 2.1875rem; } }
.social__description {
margin-top: 25px;
margin-top: 1.5625rem;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.4; }
@media (min-width: 48rem) {
.social__description {
font-size: 22px;
font-size: 1.375rem;
margin-top: 10px;
margin-top: 0.625rem;
line-height: 1.5; } }
.social__description a {
text-decoration: none; }
.social--instagram {
background: url("../images/layout/social-instagram-background-full.jpg") no-repeat center top;
background-size: cover;
color: #FFF;
height: 500px; }
@media (min-width: 48rem) {
.social--instagram {
height: 600px; } }
@media (min-width: 56.25rem) {
.social--instagram {
height: 751px; } }
@media (min-width: 48rem) {
.social--instagram .social__description {
font-size: 18px;
font-size: 1.125rem; } }
@media (min-width: 56.25rem) {
.social--instagram .social__description {
font-size: 22px;
font-size: 1.375rem; } }
.social--instagram .social__icon {
margin-top: 65px;
margin-top: 4.0625rem;
display: inline-block; }
@media (min-width: 64rem) {
.social--instagram .social__icon {
margin-top: 140px;
margin-top: 8.75rem; } }
.social--instagram .social__icon:after {
font-family: "icomoon";
content: "\f083"; }
.social--instagram a {
color: #FFF; }
.social--facebook {
background: url("../images/layout/social-facebook-background-mobile-left.jpg") no-repeat left top, url("../images/layout/social-facebook-background-mobile-bottom-left.jpg") no-repeat left bottom, url("../images/layout/social-facebook-background-mobile-bottom-right.jpg") no-repeat right bottom #dcdcdc;
background-size: 145px 75px, 125px 40px, 60px 77px; }
@media (min-width: 48rem) {
.social--facebook {
background: url("../images/layout/social-facebook-background-left.jpg") no-repeat left -150px top, url("../images/layout/social-facebook-background-right.jpg") no-repeat right -150px top #dcdcdc; } }
@media (min-width: 75rem) {
.social--facebook {
background: url("../images/layout/social-facebook-background-left.jpg") no-repeat left top, url("../images/layout/social-facebook-background-right.jpg") no-repeat right top #dcdcdc; } }
.social--facebook .social__icon:after {
color: #3b5998;
font-family: "icomoon";
content: "\f09a"; }
.social--facebook a {
color: #3b5998; }
.social--facebook .social__title a {
text-decoration: underline; }
.social--twitter .social__icon:after {
color: #55acee;
font-family: "icomoon";
content: "\f099"; }
.social--twitter a {
color: #55acee; }
.social__buttons {
font-size: 14px;
font-size: 0.875rem;
padding-top: 35px;
padding-top: 2.1875rem;
font-weight: bold;
vertical-align: middle; }
@media (min-width: 48rem) {
.social__buttons {
padding-top: 50px;
padding-top: 3.125rem; } }
.social__buttons .social__button {
margin: 0 5px;
margin: 0 0.3125rem; }
.social__buttons a {
font-size: 12px;
font-size: 0.75rem;
display: inline-block;
text-decoration: none; }
@media (min-width: 48rem) {
.social__buttons a {
font-size: 14px;
font-size: 0.875rem; } }
.social--facebook .social__buttons {
color: #3b5998; }
.social--facebook .social__button {
margin: 0 5px;
margin: 0 0.3125rem; }
@media (min-width: 30rem) {
.social--facebook .social__button {
margin: 0 20px;
margin: 0 1.25rem; } }
.social--twitter .social__buttons {
color: #55acee; }
.social__button {
height: 25px;
height: 1.5625rem; }
.social__button:before {
content: "";
margin-right: 5px;
display: inline-block;
vertical-align: middle; }
@media (min-width: 30rem) {
.social__button:before {
margin: 0 10px;
margin: 0 0.625rem; } }
.social__facebook-like:before {
width: 16px;
height: 17px;
background: url("../images/fabric/front/facebook-like.png") no-repeat center left; }
.social__facebook-comment:before {
width: 19px;
height: 17px;
background: url("../images/fabric/front/facebook-comment.png") no-repeat center left; }
.social__facebook-share:before {
width: 21px;
height: 19px;
background: url("../images/fabric/front/facebook-share.png") no-repeat center left; }
.social__twitter-reply:before {
width: 19px;
height: 11px;
background: url("../images/fabric/front/twitter-reply.png") no-repeat center left; }
.social__twitter-retweet:before {
width: 21px;
height: 11px;
background: url("../images/fabric/front/twitter-retweet.png") no-repeat center left; }
.social__twitter-star:before {
width: 18px;
height: 17px;
background: url("../images/fabric/front/twitter-star.png") no-repeat center left; }
.social--twitter {
background: url("../images/layout/social-instagram-background-full.jpg") no-repeat center top;
background-size: cover; }
.social--twitter .social-fix .social__inner {
background: none !important; }
.timetable {
position: relative;
-webkit-transition: 0.5s;
transition: 0.5s; }
@media (min-width: 56.25rem) {
.timetable {
height: 860px;
width: 34%;
float: left; } }
@media (min-width: 75rem) {
.timetable {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 50%;
max-width: 50%; } }
@media (min-width: 112.5rem) {
.timetable {
max-width: 890px; } }
@media (min-width: 75rem) {
.timetable.collapsed {
width: 500px;
max-width: 500px; } }
@media (min-width: 90rem) {
.timetable.collapsed {
width: 600px;
max-width: 600px; } }
@media (min-width: 112.5rem) {
.timetable.collapsed {
width: 600px;
max-width: 600px; } }
@media (min-width: 75rem) {
.timetable.collapsed .timetable__today {
width: 30%; } }
@media (min-width: 112.5rem) {
.timetable.collapsed .timetable__today {
width: 25%; } }
@media (min-width: 75rem) {
.timetable.collapsed .timetable__days {
width: 70%; } }
@media (min-width: 112.5rem) {
.timetable.collapsed .timetable__days {
width: 75%; } }
.timetable.collapsed .timetable__closing-hour {
margin: 30px auto;
margin: 1.875rem auto;
width: 130px;
height: 130px; }
.timetable.collapsed .timetable__closing-hour span {
font-size: 32px;
font-size: 2rem; }
.timetable.collapsed .timetable__arrow:before {
right: -22px;
border-left: 18px solid #F701B5;
border-right: 18px solid transparent; }
.timetable__content {
overflow: hidden;
position: relative;
width: 100%;
height: 100%; }
.timetable__title {
font-size: 24px;
font-size: 1.5rem;
padding: 65px 0 18px;
padding: 4.0625rem 0 1.125rem;
margin-bottom: 15px;
margin-bottom: 0.9375rem;
height: auto;
color: #FFFFFF;
line-height: 1;
text-align: center;
background-color: #96c31e; }
@media (min-width: 48rem) {
.timetable__title {
font-size: 32px;
font-size: 2rem;
padding: 45px 0 18px;
padding: 2.8125rem 0 1.125rem; } }
@media (min-width: 56.25rem) {
.timetable__title {
font-size: 38px;
font-size: 2.375rem;
padding: 0;
background-color: transparent; } }
@media (min-width: 85rem) {
.timetable__title {
font-size: 48px;
font-size: 3rem;
margin-bottom: 70px;
margin-bottom: 4.375rem; } }
.timetable__today {
font-size: 20px;
font-size: 1.25rem;
padding-top: 80px;
padding-top: 5rem;
position: absolute;
height: 100%;
width: 50%;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
color: #96c31e;
display: none;
text-align: center;
visibility: visible;
background-color: #FFFFFF; }
@media (min-width: 48rem) {
.timetable__today {
display: block; } }
@media (min-width: 56.25rem) {
.timetable__today {
font-size: 22px;
font-size: 1.375rem;
padding-top: 200px;
padding-top: 12.5rem;
display: none; } }
@media (min-width: 75rem) {
.timetable__today {
padding-top: 290px;
padding-top: 18.125rem;
display: block; } }
.timetable__closing-hour {
margin: 50px auto;
margin: 3.125rem auto;
padding-top: 95px;
padding-top: 5.9375rem;
position: relative;
width: 282px;
height: 282px;
border: 2px solid #96c31e;
-webkit-border-radius: 50%;
border-radius: 50%;
color: #96c31e; }
.timetable__closing-hour span {
font-size: 70px;
font-size: 4.375rem;
position: absolute;
top: 50%;
right: 50%;
-webkit-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
transform: translate(50%, -50%); }
.timetable__days {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 10px;
padding-bottom: 0.625rem;
background-color: #5f7373; }
@media (min-width: 48rem) {
.timetable__days {
width: 50%;
height: 100%;
float: right; } }
@media (min-width: 56.25rem) {
.timetable__days {
padding: 115px 0px;
padding: 7.1875rem 0rem;
width: 100%;
float: none; } }
@media (min-width: 75rem) {
.timetable__days {
width: 50%;
float: right;
padding: 125px 0px;
padding: 7.8125rem 0rem; } }
@media (min-width: 85rem) {
.timetable__days {
padding: 125px 0px;
padding: 7.8125rem 0rem; } }
@media (min-width: 95rem) {
.timetable__days {
padding: 155px 0;
padding: 9.6875rem 0; } }
.timetable__day {
padding: 15px 0;
padding: 0.9375rem 0;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
color: #FFFFFF;
text-align: center;
display: table;
width: 100%; }
@media (min-width: 56.25rem) {
.timetable__day {
padding: 20px 0;
padding: 1.25rem 0; } }
.timetable__day.active {
color: #96c31e;
background-color: #FFFFFF;
width: 101%;
font-weight: 900; }
@media (min-width: 95rem) {
.timetable__day.active {
padding: 24px 0;
padding: 1.5rem 0;
margin: 0; } }
.timetable__day span {
display: table-cell; }
.timetable__day span:first-child {
text-align: right;
width: 35%; }
@media (min-width: 30rem) {
.timetable__day span:first-child {
width: 40%; } }
@media (min-width: 56.25rem) {
.timetable__day span:first-child {
width: 35%; } }
@media (min-width: 112.5rem) {
.timetable__day span:first-child {
width: 40%; } }
.timetable__day span:last-child {
text-align: left;
padding-left: 20px;
padding-left: 1.25rem; }
@media (min-width: 30rem) {
.timetable__day span:last-child {
padding-left: 25px;
padding-left: 1.5625rem; } }
@media (min-width: 56.25rem) {
.timetable__day span:last-child {
padding-left: 20px;
padding-left: 1.25rem; } }
@media (min-width: 75rem) {
.timetable__day span:last-child {
padding-left: 16px;
padding-left: 1rem; } }
@media (min-width: 90rem) {
.timetable__day span:last-child {
padding-left: 20px;
padding-left: 1.25rem; } }
@media (min-width: 112.5rem) {
.timetable__day span:last-child {
padding-left: 25px;
padding-left: 1.5625rem; } }
.timetable__arrow {
right: -23px;
right: -1.4375rem;
height: 46px;
height: 2.875rem;
width: 46px;
width: 2.875rem;
position: absolute;
top: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
color: #F701B5;
text-align: center;
text-decoration: none;
background-color: #FFFF01;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
z-index: 901;
display: none; }
@media (min-width: 75rem) {
.timetable__arrow {
display: block; } }
.timetable__arrow:before {
font-size: 30px;
font-size: 1.875rem;
display: block;
content: "";
position: absolute;
top: 50%;
right: 0;
border: 18px solid #F701B5;
border-top: 10px solid transparent;
border-left: 18px solid transparent;
border-bottom: 10px solid transparent;
-webkit-transform: translate(-45%, -50%);
-ms-transform: translate(-45%, -50%);
transform: translate(-45%, -50%); }
.timetable--collapsed .timetable__arrow:before {
content: "\f078";
right: 47%; }
.no-js .timetable__arrow {
display: none; }
@media (min-width: 75rem) {
.timetable--collapsed .timetable {
max-width: 500px;
max-width: 31.25rem; } }
@media (min-width: 85rem) {
.timetable--collapsed .timetable {
max-width: 520px;
max-width: 32.5rem; } }
@media (min-width: 95rem) {
.timetable--collapsed .timetable {
max-width: 540px;
max-width: 33.75rem; } }
@media (min-width: 75rem) {
.timetable--collapsed .timetable__today {
width: 150px;
width: 9.375rem; } }
@media (min-width: 75rem) {
.timetable--collapsed .timetable__closing-hour {
margin: 37px auto;
margin: 2.3125rem auto;
padding-top: 71px;
padding-top: 4.4375rem;
width: 130px;
width: 8.125rem;
height: 130px;
height: 8.125rem; }
.timetable--collapsed .timetable__closing-hour span {
font-size: 30px;
font-size: 1.875rem; } }
@media (min-width: 75rem) {
.timetable--collapsed .timetable__days {
width: -webkit-calc(100% - 150px);
width: calc(100% - 150px);
width: calc(100% - 150px);
padding: 64px 30px;
padding: 4rem 1.875rem; } }
@media (min-width: 85rem) {
.timetable--collapsed .timetable__days {
padding: 64px 40px;
padding: 4rem 2.5rem; } }
.map {
position: relative;
width: 100%;
height: 100%;
overflow: hidden; }
.map__mobile-form {
padding: 25px;
padding: 1.5625rem;
display: block;
position: absolute;
left: 30px;
right: 30px;
bottom: 30px;
background-color: #000000;
background: rgba(0, 0, 0, 0.6); }
@media (min-width: 48rem) {
.map__mobile-form {
display: none;
visibility: hidden; } }
.map__mobile-form-label {
text-align: center; }
.map__mobile-form-search {
display: block;
text-align: center; }
.map__mobile-form-element-wrapper {
margin-bottom: 15px;
margin-bottom: 0.9375rem; }
#map {
width: 100%;
height: 100%; }
#map a[href^="http://maps.google.com/maps"] {
display: none !important; }
#map a[href*="https://maps.google.com/maps"] {
display: none !important; }
#map .gmnoprint a, #map .gmnoprint span, #map .gm-style-cc {
display: none; }
#map .gmnoprint div {
background: none !important; }
#map .gm-style {
font-size: inherit; }
.map-panel--restaurant-open:after, .map-panel--restaurant-closed:after {
display: inline-block;
width: 1em;
width: 1em;
height: 1em;
height: 1em;
margin-left: 0.3em;
margin-left: 0.3em;
margin-bottom: 0.1em;
margin-bottom: 0.1em;
-webkit-border-radius: 100%;
border-radius: 100%;
content: '';
vertical-align: middle; }
.map-panel {
width: 477px;
text-align: center;
visibility: hidden;
display: none; }
@media (min-width: 64rem) {
.map-panel {
padding-left: 26px;
padding-left: 1.625rem;
visibility: visible;
display: block; } }
.map-panel__restaurant {
position: relative;
height: auto;
color: #FFFFFF;
background-size: cover;
background-color: #000000 !important; }
.map-panel--overlay {
background-color: rgba(0, 0, 0, 0.65);
height: 100%; }
.map-panel__inner {
padding: 82px 44px 50px 44px;
padding: 5.125rem 2.75rem 3.125rem 2.75rem;
position: relative;
width: 100%; }
.map-panel__inner:before {
margin-top: -9px;
margin-top: -0.5625rem;
display: block;
content: "";
position: absolute;
left: -36px;
top: 52%;
border: 18px solid #000000;
border-top: 18px solid transparent;
border-left: 18px solid transparent;
border-bottom: 18px solid transparent; }
.map-panel__close-button {
position: absolute;
width: 50px;
width: 3.125rem;
height: 50px;
height: 3.125rem;
top: 15px;
top: 0.9375rem;
right: 15px;
right: 0.9375rem;
background-image: url("../images/fabric/front/close-button-gmap.png");
z-index: 900; }
.map-panel__title {
font-size: 40px;
font-size: 2.5rem;
margin: 0;
padding: 0;
line-height: 1; }
.map-panel__distance {
font-size: 20px;
font-size: 1.25rem;
margin: 20px 0 0 0;
margin: 1.25rem 0 0 0;
font-family: 'Din Next W01';
padding: 0; }
.map-panel__address {
font-size: 22px;
font-size: 1.375rem;
margin: 32px 0 0 0;
margin: 2rem 0 0 0;
font-family: 'Din Next W01';
padding: 0; }
.map-panel__telephone {
font-size: 20px;
font-size: 1.25rem;
margin: 32px 0 0 0;
margin: 2rem 0 0 0;
display: block;
font-family: 'Din Next W01';
padding: 0;
color: #FFFFFF; }
.map-panel__time {
font-size: 20px;
font-size: 1.25rem;
margin: 25px 0 0 0;
margin: 1.5625rem 0 0 0;
font-family: 'Din Next W01';
display: block;
padding: 0; }
.map-panel__icons-bar {
font-size: 30px;
font-size: 1.875rem;
margin: 35px 0 0 0;
margin: 2.1875rem 0 0 0;
padding: 0; }
.map-panel .cta {
margin: 70px 0 0 0;
margin: 4.375rem 0 0 0; }
.map-panel--restaurant-open:after {
background: #73ff1e; }
.map-panel--restaurant-closed:after {
background: red; }
.map-panel .icon, .map-panel .blog-post__social-link > a:before, .map-panel .add-to-cal,
.map-panel .show-information {
margin: 0 15px 0 15px;
margin: 0 0.9375rem 0 0.9375rem; }
.cssclippathpolygon .map-panel {
padding: 0;
clip: polygon(6% 4%, 100% 0%, 100% 100%, 6% 100%, 6% 52%, 2% 49%, 6% 46%);
-webkit-clip-path: polygon(6% 4%, 100% 0%, 100% 100%, 6% 100%, 6% 52%, 2% 49%, 6% 46%);
clip-path: polygon(6% 4%, 100% 0%, 100% 100%, 6% 100%, 6% 52%, 2% 49%, 6% 46%); }
.cssclippathpolygon .map-panel__inner {
padding: 82px 18px 50px 44px;
padding: 5.125rem 1.125rem 3.125rem 2.75rem; }
.cssclippathpolygon .map-panel__inner:before {
display: none; }
.cssclippathpolygon .map-panel__form {
margin-left: 26px;
margin-left: 1.625rem; }
.map-form {
position: absolute; }
@media (min-width: 64rem) {
.map-form {
visibility: hidden;
display: none; } }
.map-panel__form {
margin: -1px 0 0;
margin: -0.0625rem 0 0;
width: 451px;
width: 28.1875rem;
text-align: right; }
.map-panel__form-inner, .map-form__form-inner {
padding: 30px;
padding: 1.875rem;
background: rgba(0, 0, 0, 0.6); }
@media (min-width: 64rem) {
.map-panel__form-inner, .map-form__form-inner {
padding: 17px;
padding: 1.0625rem;
height: auto; } }
.map-form {
left: 0;
width: 100%; }
.map-panel__form, .map-form {
height: 183px;
height: 11.4375rem;
padding: 0 17px;
padding: 0 1.0625rem;
bottom: 30px;
bottom: 1.875rem; }
@media (min-width: 64rem) {
.map-panel__form, .map-form {
padding: 0;
height: auto; } }
.map-panel .form-element__input, .map-form .form-element__input {
border: 0;
font-size: 21px;
font-size: 1.3125rem;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif; }
.map-panel .btn--search, .map-form .btn--search {
font-size: 20px;
font-size: 1.25rem;
margin: 18px 0 0;
margin: 1.125rem 0 0;
padding: 16px 0 0;
padding: 1rem 0 0;
position: relative;
display: block;
width: 100%;
height: 50px;
background-color: #FFFF01;
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }
@media (min-width: 64rem) {
.map-panel .btn--search, .map-form .btn--search {
float: left;
margin: 0;
width: 50px;
width: 3.125rem; } }
.map-panel .btn--search:after, .map-form .btn--search:after {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: -10px;
width: 15px;
height: 18px;
border: 18px solid #F701B5;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent; }
@media (min-width: 64rem) {
.map-panel .form-element--find, .map-form .form-element--find {
width: 351px;
width: 21.9375rem;
padding: 0;
margin: 0 16px 0 0;
margin: 0 1rem 0 0;
float: left; } }
.map-panel .form-element--find input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .map-form .form-element--find input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
font-size: 20px;
font-size: 1.25rem; }
.map-panel .cta-map:before, .map-form .cta-map:before {
margin-right: -7px;
margin-right: -0.4375rem; }
.amenities {
padding: 0 10px;
padding: 0 0.625rem;
width: 100%;
height: 125px;
color: #FFFFFF;
clear: both;
text-align: center;
background-color: #eb5250;
position: relative; }
@media (min-width: 48rem) {
.amenities {
height: 172px; } }
.amenities li {
display: inline-block;
height: 100%;
position: relative; }
.amenities .description {
display: none; }
@media (min-width: 48rem) {
.amenities .description {
font-size: 20px;
font-size: 1.25rem;
padding: 0 10px;
padding: 0 0.625rem;
display: block;
line-height: 1; } }
@media (min-width: 64rem) {
.amenities .description {
font-size: 22px;
font-size: 1.375rem; } }
.amenities .icon, .amenities .blog-post__social-link > a:before, .amenities .add-to-cal,
.amenities .show-information {
display: block;
font-size: 28px;
font-size: 1.75rem;
margin-top: 50px;
margin-top: 3.125rem;
top: 12px; }
@media (min-width: 30rem) {
.amenities .icon, .amenities .blog-post__social-link > a:before, .amenities .add-to-cal,
.amenities .show-information {
margin-top: 44px;
margin-top: 2.75rem;
font-size: 32px;
font-size: 2rem; } }
@media (min-width: 48rem) {
.amenities .icon, .amenities .blog-post__social-link > a:before, .amenities .add-to-cal,
.amenities .show-information {
margin-top: 40px;
margin-top: 2.5rem;
font-size: 44px;
font-size: 2.75rem; } }
@media (min-width: 64rem) {
.amenities .icon, .amenities .blog-post__social-link > a:before, .amenities .add-to-cal,
.amenities .show-information {
margin-top: 50px;
margin-top: 3.125rem; } }
.amenities--1 .amenity,
.amenities--2 .amenity {
top: 50%;
width: 100%;
position: absolute;
vertical-align: middle;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.amenities--1 .icon, .amenities--1 .blog-post__social-link > a:before, .amenities--1 .add-to-cal,
.amenities--1 .show-information,
.amenities--2 .icon,
.amenities--2 .blog-post__social-link > a:before,
.amenities--2 .add-to-cal,
.amenities--2 .show-information {
margin: 0;
display: inline-block;
vertical-align: middle;
margin-right: 30px;
margin-right: 1.875rem; }
.amenities--1 .description,
.amenities--2 .description {
padding: 0;
display: inline-block;
vertical-align: middle; }
.amenities--1 li {
width: 100%; }
.amenities--2 li {
width: 50%;
float: left; }
.amenities--3 li,
.amenities--4 li,
.amenities--5 li,
.amenities--6 li,
.amenities--7 li,
.amenities--8 li {
float: left; }
.amenities--3 .icon, .amenities--3 .blog-post__social-link > a:before, .amenities--3 .add-to-cal,
.amenities--3 .show-information,
.amenities--4 .icon,
.amenities--4 .blog-post__social-link > a:before,
.amenities--4 .add-to-cal,
.amenities--4 .show-information,
.amenities--5 .icon,
.amenities--5 .blog-post__social-link > a:before,
.amenities--5 .add-to-cal,
.amenities--5 .show-information,
.amenities--6 .icon,
.amenities--6 .blog-post__social-link > a:before,
.amenities--6 .add-to-cal,
.amenities--6 .show-information,
.amenities--7 .icon,
.amenities--7 .blog-post__social-link > a:before,
.amenities--7 .add-to-cal,
.amenities--7 .show-information,
.amenities--8 .icon,
.amenities--8 .blog-post__social-link > a:before,
.amenities--8 .add-to-cal,
.amenities--8 .show-information {
margin-bottom: 20px;
margin-bottom: 1.25rem; }
.amenities--3 li {
width: -webkit-calc(100% / 3);
width: calc(100% / 3); }
@media (min-width: 64rem) {
.amenities--3 .amenity {
top: 50%;
width: 100%;
position: absolute;
vertical-align: middle;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
@media (min-width: 64rem) {
.amenities--3 .icon, .amenities--3 .blog-post__social-link > a:before, .amenities--3 .add-to-cal,
.amenities--3 .show-information {
margin: 0;
display: inline-block;
vertical-align: middle;
margin-right: 30px;
margin-right: 1.875rem; } }
@media (min-width: 64rem) {
.amenities--3 .description {
padding: 0;
display: inline-block;
vertical-align: middle; } }
.amenities--4 li {
width: 25%; }
@media (min-width: 75rem) {
.amenities--4 .amenity {
top: 50%;
width: 100%;
position: absolute;
vertical-align: middle;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
@media (min-width: 75rem) {
.amenities--4 .icon, .amenities--4 .blog-post__social-link > a:before, .amenities--4 .add-to-cal,
.amenities--4 .show-information {
margin: 0;
display: inline-block;
vertical-align: middle;
margin-right: 30px;
margin-right: 1.875rem; } }
@media (min-width: 75rem) {
.amenities--4 .description {
padding: 0;
display: inline-block;
vertical-align: middle; } }
.amenities--5 li {
width: 20%; }
@media (min-width: 85rem) {
.amenities--5 .amenity {
width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle; } }
@media (min-width: 85rem) {
.amenities--5 .icon, .amenities--5 .blog-post__social-link > a:before, .amenities--5 .add-to-cal,
.amenities--5 .show-information {
margin: 0;
display: inline-block;
vertical-align: middle;
margin-right: 30px;
margin-right: 1.875rem; } }
@media (min-width: 85rem) {
.amenities--5 .description {
padding: 0;
display: inline-block;
vertical-align: middle; } }
.amenities--6,
.amenities--7,
.amenities--8 {
position: relative;
height: 120px;
height: 7.5rem; }
@media (min-width: 48rem) {
.amenities--6,
.amenities--7,
.amenities--8 {
height: 350px;
height: 21.875rem; } }
.amenities--6 li,
.amenities--7 li,
.amenities--8 li {
height: -webkit-calc(100% / 3);
height: calc(100% / 3);
margin-top: 30px; }
@media (min-width: 48rem) {
.amenities--6 li,
.amenities--7 li,
.amenities--8 li {
margin-top: 0; } }
@media (min-width: 64rem) {
.amenities--6 li,
.amenities--7 li,
.amenities--8 li {
height: -webkit-calc(100% / 4);
height: calc(100% / 4); } }
.amenities--6 .icon, .amenities--6 .blog-post__social-link > a:before, .amenities--6 .add-to-cal,
.amenities--6 .show-information,
.amenities--7 .icon,
.amenities--7 .blog-post__social-link > a:before,
.amenities--7 .add-to-cal,
.amenities--7 .show-information,
.amenities--8 .icon,
.amenities--8 .blog-post__social-link > a:before,
.amenities--8 .add-to-cal,
.amenities--8 .show-information {
margin-top: 16px;
margin-top: 1rem; }
@media (min-width: 30rem) {
.amenities--6 .icon, .amenities--6 .blog-post__social-link > a:before, .amenities--6 .add-to-cal,
.amenities--6 .show-information,
.amenities--7 .icon,
.amenities--7 .blog-post__social-link > a:before,
.amenities--7 .add-to-cal,
.amenities--7 .show-information,
.amenities--8 .icon,
.amenities--8 .blog-post__social-link > a:before,
.amenities--8 .add-to-cal,
.amenities--8 .show-information {
margin-top: 14px;
margin-top: 0.875rem; } }
@media (min-width: 48rem) {
.amenities--6 .icon, .amenities--6 .blog-post__social-link > a:before, .amenities--6 .add-to-cal,
.amenities--6 .show-information,
.amenities--7 .icon,
.amenities--7 .blog-post__social-link > a:before,
.amenities--7 .add-to-cal,
.amenities--7 .show-information,
.amenities--8 .icon,
.amenities--8 .blog-post__social-link > a:before,
.amenities--8 .add-to-cal,
.amenities--8 .show-information {
margin-top: 16px;
margin-top: 1rem; } }
@media (min-width: 64rem) {
.amenities--6 {
height: 260px;
height: 16.25rem; } }
.amenities--6 li {
width: -webkit-calc(100% / 6);
width: calc(100% / 6); }
@media (min-width: 48rem) {
.amenities--6 li {
width: -webkit-calc(100% / 3);
width: calc(100% / 3); } }
@media (min-width: 48rem) {
.amenities--6 li:nth-of-type(-n + 3) {
margin-top: 40px; } }
@media (min-width: 64rem) {
.amenities--6 li:nth-of-type(-n + 3) {
margin-top: 60px; } }
@media (min-width: 48rem) {
.amenities--6 li:nth-of-type(n + 4) {
margin-top: 20px; } }
@media (min-width: 64rem) {
.amenities--6 .icon, .amenities--6 .blog-post__social-link > a:before, .amenities--6 .add-to-cal,
.amenities--6 .show-information {
margin: 0;
display: inline-block;
vertical-align: middle;
margin-right: 30px;
margin-right: 1.875rem; } }
@media (min-width: 64rem) {
.amenities--6 .amenity {
top: 50%;
width: 100%;
position: absolute;
vertical-align: middle;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
@media (min-width: 64rem) {
.amenities--6 .description {
padding: 0;
display: inline-block;
vertical-align: middle; } }
@media (min-width: 75rem) {
.amenities--7 {
height: 260px;
height: 16.25rem; } }
.amenities--7 li {
width: -webkit-calc(100% / 7);
width: calc(100% / 7);
margin-top: 30px; }
@media (min-width: 48rem) {
.amenities--7 li:nth-of-type(-n + 3) {
margin-top: 40px;
width: -webkit-calc(100% / 3);
width: calc(100% / 3); } }
@media (min-width: 75rem) {
.amenities--7 li:nth-of-type(-n + 3) {
margin-top: 60px; } }
@media (min-width: 64rem) {
.amenities--7 li:nth-of-type(-n + 3) .icon, .amenities--7 li:nth-of-type(-n + 3) .blog-post__social-link > a:before, .amenities--7 li:nth-of-type(-n + 3) .add-to-cal,
.amenities--7 li:nth-of-type(-n + 3) .show-information {
margin: 0;
display: inline-block;
vertical-align: middle;
margin-right: 30px;
margin-right: 1.875rem; } }
@media (min-width: 64rem) {
.amenities--7 li:nth-of-type(-n + 3) .amenity {
top: 50%;
width: 100%;
position: absolute;
vertical-align: middle;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
@media (min-width: 64rem) {
.amenities--7 li:nth-of-type(-n + 3) .description {
padding: 0;
display: inline-block;
vertical-align: middle; } }
@media (min-width: 48rem) {
.amenities--7 li:nth-of-type(n + 4) {
margin-top: 20px;
width: -webkit-calc(100% / 4);
width: calc(100% / 4); } }
@media (min-width: 75rem) {
.amenities--7 li:nth-of-type(n + 4) .icon, .amenities--7 li:nth-of-type(n + 4) .blog-post__social-link > a:before, .amenities--7 li:nth-of-type(n + 4) .add-to-cal,
.amenities--7 li:nth-of-type(n + 4) .show-information {
margin: 0;
display: inline-block;
vertical-align: middle;
margin-right: 30px;
margin-right: 1.875rem; } }
@media (min-width: 75rem) {
.amenities--7 li:nth-of-type(n + 4) .amenity {
top: 50%;
width: 100%;
position: absolute;
vertical-align: middle;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
@media (min-width: 75rem) {
.amenities--7 li:nth-of-type(n + 4) .description {
padding: 0;
display: inline-block;
vertical-align: middle; } }
@media (min-width: 75rem) {
.amenities--8 {
height: 260px;
height: 16.25rem; } }
.amenities--8 li {
width: -webkit-calc(100% / 8);
width: calc(100% / 8); }
@media (min-width: 48rem) {
.amenities--8 li {
width: -webkit-calc(100% / 4);
width: calc(100% / 4); } }
@media (min-width: 48rem) {
.amenities--8 li:nth-of-type(-n + 4) {
margin-top: 40px; } }
@media (min-width: 75rem) {
.amenities--8 li:nth-of-type(-n + 4) {
margin-top: 60px; } }
@media (min-width: 48rem) {
.amenities--8 li:nth-of-type(n + 5) {
margin-top: 20px; } }
@media (min-width: 75rem) {
.amenities--8 .icon, .amenities--8 .blog-post__social-link > a:before, .amenities--8 .add-to-cal,
.amenities--8 .show-information {
margin: 0;
display: inline-block;
vertical-align: middle;
margin-right: 30px;
margin-right: 1.875rem; } }
.amenities--8 .icon.icon--halal, .amenities--8 .blog-post__social-link > a.icon--halal:before, .amenities--8 .icon--halal.add-to-cal,
.amenities--8 .icon--halal.show-information,
.amenities--8 .icon.icon--outdoor,
.amenities--8 .blog-post__social-link > a.icon--outdoor:before,
.amenities--8 .icon--outdoor.add-to-cal,
.amenities--8 .icon--outdoor.show-information {
font-size: 24px; }
@media (min-width: 75rem) {
.amenities--8 .amenity {
top: 50%;
width: 100%;
position: absolute;
vertical-align: middle;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
@media (min-width: 75rem) {
.amenities--8 .description {
padding: 0;
display: inline-block;
vertical-align: middle; } }
.list-bar {
background: #ebe2c9;
position: relative; }
@media (min-width: 48rem) {
.list-bar {
padding: 40px 0;
padding: 2.5rem 0; } }
@media (min-width: 48rem) {
.list-bar .form-element {
visibility: hidden;
display: none; } }
.list-bar .form-element__select {
padding-left: 0;
color: #000;
background: url("../images/fabric/front/triangle-btn-nando-red.png") no-repeat 100% 50%; }
.list-bar select.form-element__select option:checked {
-webkit-box-shadow: 0 0 10px 100px #c51221 inset;
box-shadow: 0 0 10px 100px #c51221 inset; }
.list-bar__inner {
margin: 0 auto;
width: 90%; }
@media (min-width: 48rem) {
.list-bar__inner {
width: 85%; } }
@media (min-width: 64rem) {
.list-bar__inner {
width: 80%; } }
@media (min-width: 75rem) {
.list-bar__inner {
width: 75%; } }
@media (min-width: 112.5rem) {
.list-bar__inner {
width: 70%; } }
.list-bar__label {
display: none;
visibility: hidden; }
@media (min-width: 48rem) {
.list-bar__label {
visibility: visible;
display: inline-block;
float: left;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); } }
.list-bar__categories {
display: none; }
@media (min-width: 48rem) {
.list-bar__categories {
display: block;
margin-left: 95px;
margin-left: 5.9375rem; } }
@media (min-width: 48rem) {
.list-bar__category {
float: left; } }
.list-bar__category > a {
color: #c51221;
text-decoration: none;
padding: 6px;
padding: 0.375rem;
font-size: 20px;
font-size: 1.25rem; }
.list-bar__categories > li:first-child {
display: none; }
@media (min-width: 48rem) {
.double-list-bar {
background: #eee5d1;
padding: 20px 0;
padding: 1.25rem 0; } }
.double-list-bar .list-bar--softer {
background: #f1ead9; }
@media (min-width: 48rem) {
.double-list-bar .list-bar--softer {
background: #eee5d1; } }
.double-list-bar .list-bar--soft {
background: #eee5d1; }
.double-list-bar > li {
width: 50%;
display: inline-block;
float: left; }
@media (min-width: 48rem) {
.double-list-bar > li {
width: 100%;
display: block;
float: none; } }
@media (min-width: 48rem) {
.double-list-bar .list-bar {
padding: 5px 0;
padding: 0.3125rem 0; } }
.page--blog-details .double-list-bar {
display: block;
width: 100%;
background: #FFFFFF;
padding: 20px 27px;
padding: 1.25rem 1.6875rem; }
@media (min-width: 30rem) {
.page--blog-details .double-list-bar {
padding: 20px 5%; } }
@media (min-width: 48rem) {
.page--blog-details .double-list-bar {
padding: 20px 10%; } }
@media (min-width: 56.25rem) {
.page--blog-details .double-list-bar {
padding: 20px 14%; } }
@media (min-width: 64rem) {
.page--blog-details .double-list-bar {
padding: 20px 18%; } }
@media (min-width: 75rem) {
.page--blog-details .double-list-bar {
padding: 20px 22%; } }
.page--blog-details .double-list-bar .list-bar__inner {
width: 100%;
font-size: 20px;
font-size: 1.25rem; }
.page--blog-details .double-list-bar .list-bar--softer {
background: #FFFFFF; }
.page--blog-details .double-list-bar .list-bar--soft {
background: #FFFFFF; }
.page--blog-details .double-list-bar .list-bar__categories {
margin-left: 125px;
margin-left: 7.8125rem; }
.page--blog-details .double-list-bar > li {
width: 40%;
margin-right: 10%; }
@media (min-width: 48rem) {
.page--blog-details .double-list-bar > li {
width: 100%;
margin-right: 0; } }
/***
/* For when no panels just before the footer
/* Need to increase paddings on double list bar
***/
.no-panels .double-list-bar {
padding-bottom: 70px;
padding-bottom: 4.375rem; }
@media (min-width: 30rem) {
.no-panels .double-list-bar {
padding-bottom: 100px;
padding-bottom: 6.25rem; } }
@media (min-width: 48rem) {
.no-panels .double-list-bar {
padding-bottom: 100px;
padding-bottom: 6.25rem; } }
@media (min-width: 90rem) {
.no-panels .double-list-bar {
padding-bottom: 120px;
padding-bottom: 7.5rem; } }
.blog-post {
background-color: #dcdcdc;
background-image: url(../images/fabric/blog/blog-post_left_bg.png), url(../images/fabric/blog/blog-post_right_bg.png);
background-position: left top, right top;
background-repeat: no-repeat, no-repeat;
background-size: 20% auto, 20% auto;
padding-top: 35px; }
@media (min-width: 30rem) {
.blog-post {
padding: 25px 5% 0; } }
@media (min-width: 48rem) {
.blog-post {
padding: 40px 10% 0; } }
@media (min-width: 56.25rem) {
.blog-post {
padding: 45px 14% 0; } }
@media (min-width: 64rem) {
.blog-post {
padding: 60px 18% 0; } }
@media (min-width: 75rem) {
.blog-post {
padding: 70px 22% 0; } }
@media (min-width: 90rem) {
.blog-post {
padding: 80px 22% 0; } }
@media (min-width: 112.5rem) {
.blog-post {
padding: 130px 22% 0; } }
.blog-post__copy {
margin: 27px 0 40px 0;
margin: 1.6875rem 0 2.5rem 0; }
.blog-post__copy p {
margin: 0 27px 10px 27px;
margin: 0 1.6875rem 0.625rem 1.6875rem;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.5; }
@media (min-width: 30rem) {
.blog-post__copy p {
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; } }
@media (min-width: 64rem) {
.blog-post__copy p {
font-size: 20px;
font-size: 1.25rem; } }
.blog-post__copy p:nth-child(1) {
font-size: 24px;
font-size: 1.5rem; }
@media (min-width: 64rem) {
.blog-post__copy p:nth-child(1) {
font-size: 28px;
font-size: 1.75rem;
margin: 0 0 20px 0;
margin: 0 0 1.25rem 0; } }
.blog-post__copy .embedded-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 51%;
margin: 20px 0 30px 0;
margin: 1.25rem 0 1.875rem 0; }
.blog-post__copy .embedded-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.blog-post__comments {
display: block;
text-decoration: none;
color: #c51221;
text-align: center;
font-size: 20px;
font-size: 1.25rem;
margin: 30px auto 20px auto;
margin: 1.875rem auto 1.25rem auto; }
@media (min-width: 48rem) {
.blog-post__comments {
float: left;
text-align: left;
margin: 40px 0;
margin: 2.5rem 0; } }
.blog-post__header {
margin: 0;
margin: 0;
border-bottom: 1px solid #000000;
position: relative; }
.blog-post__header .link--with-left-arrow {
position: relative;
margin: 20px 0 20px 0;
margin: 1.25rem 0 1.25rem 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%); }
@media (min-width: 30rem) {
.blog-post__header .link--with-left-arrow {
margin: 40px 0 20px 0;
margin: 2.5rem 0 1.25rem 0; } }
@media (min-width: 48rem) {
.blog-post__header .link--with-left-arrow {
left: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none; } }
.blog-post__social-links {
text-align: center;
font-size: 0;
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; }
@media (min-width: 48rem) {
.blog-post__social-links {
float: right;
margin: 25px 0;
margin: 1.5625rem 0; } }
.blog-post__social-link {
display: inline-block;
position: relative; }
.blog-post__social-link > a {
height: 54px;
height: 3.375rem;
width: 54px;
width: 3.375rem;
color: #FFFFFF;
text-decoration: none;
text-align: center;
background-size: cover;
display: block;
font-size: 18px;
font-size: 1.125rem; }
.blog-post__social-link > a:before {
line-height: 54px;
line-height: 3.375rem;
position: absolute;
top: 50%;
right: 50%;
-webkit-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
transform: translate(50%, -50%); }
.blog-post .twitter {
background-color: #00abf0; }
.blog-post .facebook {
background-color: #39579a; }
.blog-post .pinterest {
background-color: #ce1d1f; }
.blog-post .google {
background-color: #e04a32; }
.blog-post .email {
background-color: #aaa; }
.blog-post .email:before {
content: "\f0d5"; }
.img1 {
width: 100%; }
@media (min-width: 30rem) {
.img1 {
display: none;
visibility: hidden; } }
.img2 {
width: 100%;
display: none;
visibility: hidden; }
@media (min-width: 30rem) {
.img2 {
display: block;
visibility: visible; } }
/**
* Component - Social Timeline
*/
.social-timeline {
min-height: 390px;
overflow: hidden;
padding: 50px 0 17px 0;
padding: 3.125rem 0 1.0625rem 0;
position: relative; }
@media (min-width: 75rem) {
.social-timeline {
min-height: 534px;
padding: 80px 0 80px 0;
padding: 5rem 0 5rem 0; } }
.social-timeline::before {
background: #dcdcdc url(../images/front/social-timeline-desktop.jpg) no-repeat top left/cover;
height: 50px;
width: 100%;
content: "";
display: block;
position: absolute;
top: 0;
z-index: 10; }
@media (min-width: 75rem) {
.social-timeline::before {
height: 80px; } }
.social-timeline::after {
background: #dcdcdc url(../images/front/social_timeline_border_bottom2.png) no-repeat 100% 0px/cover;
content: "";
display: block;
height: 100px;
width: 100%;
position: absolute;
z-index: 10;
bottom: -65px;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
transform: skewY(-3deg); }
@media (min-width: 48rem) {
.social-timeline::after {
background: #dcdcdc url(../images/front/social_timeline_border_bottom2.png) no-repeat 100% 0px/102%;
bottom: -50px; } }
@media (min-width: 64rem) {
.social-timeline::after {
background: #dcdcdc url(../images/front/social_timeline_border_bottom2.png) no-repeat 100% 0px/102%;
bottom: 10px; } }
@media (min-width: 75rem) {
.social-timeline::after {
background: #dcdcdc url(../images/front/social_timeline_border_bottom2.png) no-repeat 100% 0px/102%;
bottom: 30px; } }
@media (min-width: 112.5rem) {
.social-timeline::after {
background: #dcdcdc url(../images/front/social_timeline_border_bottom2.png) no-repeat 100% 0px/102%;
bottom: 50px; } }
.social-timeline__header {
margin-bottom: 22px;
margin-bottom: 1.375rem;
font-size: 20px;
font-size: 1.25rem;
font-weight: normal; }
@media (min-width: 48rem) {
.social-timeline__header {
margin-bottom: 18px;
margin-bottom: 1.125rem; } }
.social-timeline__slider {
position: relative;
z-index: 1; }
.social-timeline__slider .slick-slide img {
max-width: 640px; }
.social-timeline__slider .slick-arrow {
top: -webkit-calc(50% - 23px);
top: calc(50% - 23px);
-webkit-transform: none;
-ms-transform: none;
transform: none; }
@media (min-width: 48rem) {
.social-timeline__slider .slick-arrow {
top: -webkit-calc(50% - 35px);
top: calc(50% - 35px); } }
@media (min-width: 56.25rem) {
.social-timeline__slider .slick-arrow {
top: -webkit-calc(50% - 37px);
top: calc(50% - 37px); } }
@media (min-width: 64rem) {
.social-timeline__slider .slick-arrow {
top: -webkit-calc(50% - 70px);
top: calc(50% - 70px); } }
@media (min-width: 75rem) {
.social-timeline__slider .slick-arrow {
top: -webkit-calc(50% - 50px);
top: calc(50% - 50px); } }
@media (min-width: 112.5rem) {
.social-timeline__slider .slick-arrow {
top: -webkit-calc(50% - 72px);
top: calc(50% - 72px); } }
.social-timeline__item {
color: #FFFFFF;
padding: 60px 40px 20px 40px;
padding: 3.75rem 2.5rem 1.25rem 2.5rem;
position: relative;
font-size: 18px;
font-size: 1.125rem;
height: 385px; }
@media (min-width: 30rem) {
.social-timeline__item {
height: 430px; } }
.social-timeline__item .noactive-overlay {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMi8xMS8xNalFfcwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAFUlEQVQImWNkYGAwZkADTOgCVBAEABaVAD1SpvgVAAAAAElFTkSuQmCC");
background-position: left top;
background-repeat: repeat;
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s; }
.social-timeline__item.slick-current .noactive-overlay {
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0s ease-out 0.5s,opacity 1s ease-out;
transition: visibility 0s ease-out 0.5s,opacity 1s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
@media (min-width: 48rem) {
.social-timeline__item {
font-size: 22px;
font-size: 1.375rem; } }
@media (min-width: 75rem) {
.social-timeline__item {
padding: 80px 40px 20px 40px;
padding: 5rem 2.5rem 1.25rem 2.5rem;
font-size: 22px;
font-size: 1.375rem; } }
.social-timeline__item .social-timeline__overlay {
display: block;
position: absolute;
font-size: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
-webkit-transition: 0.5s;
transition: 0.5s; }
.social-timeline__item .social-timeline__overlay-inner {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%; }
@media (min-width: 64rem) {
.social-timeline__item .social-timeline__overlay-inner {
-webkit-transform: translate(-50%, -160%);
-ms-transform: translate(-50%, -160%);
transform: translate(-50%, -160%); } }
.social-timeline__item .social-timeline__overlay span {
display: inline-block;
font-size: 20px;
font-size: 1.25rem;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0s linear 0.5s,opacity 0.5s linear;
transition: visibility 0s linear 0.5s,opacity 0.5s linear; }
.social-timeline__item .social-timeline__overlay span:before {
margin-right: 10px;
margin-right: 0.625rem;
vertical-align: middle; }
.social-timeline__item .instagram__likes {
padding-right: 35px;
padding-right: 2.1875rem;
border: none;
background: none; }
.social-timeline__item .instagram__likes:before {
font-family: 'icomoon';
content: "\2665";
font-size: 25px;
font-size: 1.5625rem; }
.social-timeline__item .instagram__comments {
border: none;
background: none; }
.social-timeline__item .instagram__comments:before {
font-family: 'icomoon';
content: "\f075";
font-size: 25px;
font-size: 1.5625rem; }
.social-timeline__item:hover .social-timeline__overlay {
background-color: rgba(0, 0, 0, 0.75); }
.social-timeline__item:hover .social-timeline__overlay span {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s; }
.social-timeline__item--facebook,
.social-timeline__item--twitter {
max-width: 286px;
width: 100%;
text-align: center; }
.social-timeline__item--twitter {
background: #55acee; }
@media (min-width: 48rem) {
.social-timeline__item--twitter {
max-width: 540px; } }
.social-timeline__item--twitter .social-timeline__content {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 50px;
margin-bottom: 3.125rem; }
@media (min-width: 48rem) {
.social-timeline__item--twitter .social-timeline__content {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.2; } }
.social-timeline__item--twitter .social-timeline__content a {
text-decoration: underline;
color: #FFFFFF; }
.social-timeline__actions {
font-size: 0; }
.social-timeline__actions a {
display: inline-block;
text-decoration: none;
color: #FFFFFF;
font-size: 22px;
font-size: 1.375rem;
position: relative;
margin-right: 15px;
margin-right: 0.9375rem; }
.social-timeline__actions a:last-child {
margin-right: 0; }
.social-timeline__actions a:before {
font-family: 'icomoon';
opacity: 0.5; }
.social-timeline__actions .reply:before {
content: "\f051"; }
.social-timeline__actions .retweet:before {
content: "\f07a"; }
.social-timeline__actions .favourite:before {
content: "\f02a"; }
.social-timeline__item--facebook {
background: #3b5998; }
.social-timeline__item--facebook .social-timeline__content {
margin-bottom: 50px;
margin-bottom: 3.125rem; }
@media (min-width: 48rem) {
.social-timeline__item--facebook {
max-width: 438px; } }
@media (min-width: 75rem) {
.social-timeline__item--facebook .social-timeline__content {
line-height: 1.2; } }
.social-timeline__item--instagram {
padding: 0;
max-width: 286px;
overflow: hidden; }
@media (min-width: 30rem) {
.social-timeline__item--instagram {
max-width: 345px; } }
.social-timeline__item--instagram .social-timeline__image {
width: 100%; }
.pager {
text-align: center;
font-size: 0;
clear: both;
margin: 20px auto 90px auto;
margin: 1.25rem auto 5.625rem auto;
padding: 20px 40px 20px 40px;
padding: 1.25rem 2.5rem 1.25rem 2.5rem;
width: auto;
position: relative;
/*@include breakpoint($breakpoint-tablet) {
max-width: 550px;
}
@include breakpoint($breakpoint-desktop) {
max-width: 850px;
}*/
/*li:nth-child(2) {
position: absolute;
top: 15px;
left: 45px;
padding: 0;
margin: 0;
}
li:nth-last-child(2) {
position: absolute;
top: 15px;
right: 45px;
padding: 0;
margin: 0;
}*/ }
.pager li {
display: inline-block;
font-size: 22px;
font-size: 1.375rem;
width: 38px;
height: 38px;
line-height: 38px;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
vertical-align: middle;
margin: 0 15px;
margin: 0 0.9375rem;
color: #ff2350; }
.pager li:last-child {
margin-right: 0; }
.pager .pager-item {
background: #FFFFFF;
margin-bottom: 1rem; }
.pager .pager-item a {
display: inline-block;
color: #ff2350;
text-decoration: none;
position: absolute;
left: 50%;
top: -webkit-calc(50% + 2px);
top: calc(50% + 2px);
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0); }
.pager .pager-first,
.pager .pager-last {
width: auto;
margin-bottom: 1rem;
display: none; }
@media (min-width: 64rem) {
.pager .pager-first,
.pager .pager-last {
display: inline-block; } }
.pager .pager-current {
background: #ff2350;
color: #FFFFFF;
width: 42px;
height: 42px;
line-height: 42px;
margin-bottom: 1rem; }
.pager .pager-previous,
.pager .pager-next {
width: 18px;
margin-bottom: 1rem;
display: none; }
@media (min-width: 64rem) {
.pager .pager-previous,
.pager .pager-next {
display: inline-block; } }
.pager .pager-previous a,
.pager .pager-next a {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 0;
height: 0;
border-style: solid;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.pager li.pager-previous a {
border-width: 10px 18px 10px 0;
border-color: transparent #ff00b4 transparent transparent; }
.pager li.pager-next a {
border-width: 10px 0 10px 18px;
border-color: transparent transparent transparent #ff00b4; }
.pager li.pager-ellipsis {
width: auto;
display: none; }
/**
* Find a Nando's - Special Pane
*/
@media (min-width: 48rem) {
.banner .pane--find-nandos .form-element__label {
width: 360px; } }
@media (min-width: 48rem) {
.pane--find-nandos.layout--half .pane__content {
max-width: 520px; } }
@media (min-width: 48rem) {
.pane--find-nandos.layout--half .pane__copy {
margin-bottom: 36px;
margin-bottom: 2.25rem; } }
.pane--find-nandos .form--find-a-nandos {
padding: 26px 24px 30px;
padding: 1.625rem 1.5rem 1.875rem;
height: auto;
position: relative;
background: #000000;
background: rgba(0, 0, 0, 0.8);
width: 100%; }
@media (min-width: 48rem) {
.pane--find-nandos .form--find-a-nandos {
padding: 28px 24px 30px;
padding: 1.75rem 1.5rem 1.875rem; } }
@media (min-width: 90rem) {
.pane--find-nandos .form--find-a-nandos {
padding: 27px 22px 28px;
padding: 1.6875rem 1.375rem 1.75rem; } }
@media (min-width: 112.5rem) {
.pane--find-nandos .form--find-a-nandos {
padding: 33px 30px 34px 27px;
padding: 2.0625rem 1.875rem 2.125rem 1.6875rem; } }
@media (max-width: 74.9375em) {
.pane--find-nandos .form--find-a-nandos .cta {
display: block;
margin-bottom: 0;
text-align: center;
width: 100%; } }
@media (min-width: 48rem) {
.pane--find-nandos .form--find-a-nandos .cta {
text-align: center;
height: 28px;
padding: 0 34px;
width: 140px; }
.pane--find-nandos .form--find-a-nandos .cta > span {
top: -5px; } }
@media (min-width: 75rem) {
.pane--find-nandos .form--find-a-nandos .cta {
height: 21px;
padding: 0 24px;
width: 104px; }
.pane--find-nandos .form--find-a-nandos .cta > span {
top: -4px; }
.pane--find-nandos .form--find-a-nandos .cta > span:before {
left: -9px;
top: -17px; } }
@media (min-width: 90rem) {
.pane--find-nandos .form--find-a-nandos .cta {
width: 124px;
height: 24px; } }
@media (min-width: 112.5rem) {
.pane--find-nandos .form--find-a-nandos .cta {
width: 155px;
height: 34px; }
.pane--find-nandos .form--find-a-nandos .cta > span:before {
top: -23px;
left: -5px; } }
@media (min-width: 48rem) {
.pane--find-nandos .form--find-a-nandos .form-element {
padding-top: 40px;
padding-top: 2.5rem;
float: left; } }
@media (min-width: 90rem) {
.pane--find-nandos .form--find-a-nandos .form-element {
padding-top: 42px;
padding-top: 2.625rem; } }
.pane--find-nandos .form-element--find {
margin: 3px 0 29px 0;
margin: 0.1875rem 0 1.8125rem 0;
position: relative; }
@media (min-width: 48rem) {
.pane--find-nandos .form-element--find {
width: -webkit-calc(100% - 162px);
width: calc(100% - 162px);
height: 54px;
margin-right: 21px; } }
@media (min-width: 75rem) {
.pane--find-nandos .form-element--find {
width: -webkit-calc(100% - 118px);
width: calc(100% - 118px);
height: 32px;
margin-right: 14px; } }
@media (min-width: 90rem) {
.pane--find-nandos .form-element--find {
width: -webkit-calc(100% - 142px);
width: calc(100% - 142px);
height: 38px;
margin-right: 17px; } }
@media (min-width: 112.5rem) {
.pane--find-nandos .form-element--find {
width: -webkit-calc(100% - 177px);
width: calc(100% - 177px);
height: 46px;
margin-right: 21px; } }
.pane--find-nandos .form-element--find .form-element__label {
font-size: 18px;
font-size: 1.125rem;
margin: 0 0 20px 0;
margin: 0 0 1.25rem 0;
color: #FFFFFF;
font-weight: 400; }
@media (min-width: 48rem) {
.pane--find-nandos .form-element--find .form-element__label {
font-size: 19px;
font-size: 1.1875rem;
position: absolute;
top: 0px;
left: 0;
text-align: left; } }
@media (min-width: 75rem) {
.pane--find-nandos .form-element--find .form-element__label {
font-size: 20px;
font-size: 1.25rem;
width: 350px; } }
@media (min-width: 90rem) {
.pane--find-nandos .form-element--find .form-element__label {
font-size: 22px;
font-size: 1.375rem;
width: 370px; } }
.pane--find-nandos .form-element--find input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
text-align: left; }
@media (min-width: 48rem) {
.pane--find-nandos .form-element--find input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
height: 41px; } }
@media (min-width: 75rem) {
.pane--find-nandos .form-element--find input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
font-size: 15px;
font-size: 0.9375rem;
height: 32px;
line-height: 2; } }
@media (min-width: 90rem) {
.pane--find-nandos .form-element--find input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
font-size: 18px;
font-size: 1.125rem;
height: 36px; } }
@media (min-width: 112.5rem) {
.pane--find-nandos .form-element--find input[type]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
font-size: 22px;
font-size: 1.375rem;
height: 46px; } }
.pane--find-nandos .form-element--find .form-element__wrapper {
position: relative; }
.pane--find-nandos .form-element--find .form-element__wrapper:after {
font-size: 22px;
font-size: 1.375rem;
position: absolute;
top: 50%;
right: 12px;
font-family: 'icomoon';
font-weight: normal;
content: "\e605";
color: #ff00b4;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer; }
.restaurant-listing {
position: relative;
color: white; }
.restaurant-listing:before {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
top: 190px;
z-index: 1;
width: 200px;
width: 12.5rem;
padding: 5px 15px;
padding: 0.3125rem 0.9375rem;
font-size: 20px;
font-size: 1.25rem; }
@media (min-width: 48rem) {
.restaurant-listing:before {
top: 190px; } }
.restaurant-listing--just-hatched:before {
content: "Just hatched";
background-color: #ff8200;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif; }
.restaurant-listing--hatching-soon {
background-color: #00788c;
padding-top: 1px;
padding-top: 0.0625rem; }
.restaurant-listing--hatching-soon:before {
content: "Opening soon...";
border: 1px solid white;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif; }
.restaurant-teaser {
position: relative;
color: white;
outline: none; }
.restaurant-teaser:before {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
top: 100px;
z-index: 1;
padding: 5px 15px;
padding: 0.3125rem 0.9375rem;
font-size: 20px;
font-size: 1.25rem; }
@media (min-width: 48rem) {
.restaurant-teaser:before {
top: 130px; } }
.restaurant-teaser__inner {
padding-bottom: 50px;
padding-bottom: 3.125rem;
text-align: center; }
.restaurant-teaser__title {
margin-bottom: 40px;
margin-bottom: 2.5rem;
font-size: 38px;
font-size: 2.375rem;
padding: 0 42px;
padding: 0 2.625rem; }
.restaurant-teaser__address {
font-size: 20px;
font-size: 1.25rem;
padding: 0 65px;
padding: 0 4.0625rem;
margin-bottom: 40px;
margin-bottom: 2.5rem; }
@media (min-width: 48rem) {
.restaurant-teaser__address {
font-size: 25px;
font-size: 1.5625rem; } }
.restaurant-teaser__inner, .restaurant-teaser__address, .restaurant-teaser__takeaway, .restaurant-teaser__time, .restaurant-teaser__telephone, .restaurant-teaser__distance, .restaurant-teaser__status-bar {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif; }
.restaurant-listing--just-hatched .restaurant-teaser__inner {
padding: 280px 0 220px;
padding: 17.5rem 0 13.75rem;
margin: 0 auto;
width: 80%;
background-color: transparent; }
@media (min-width: 56.25rem) {
.restaurant-listing--just-hatched .restaurant-teaser__inner {
padding: 280px 0 220px;
padding: 17.5rem 0 13.75rem;
width: 60%; } }
.restaurant-listing--hatching-soon .restaurant-teaser__inner {
position: relative;
padding: 148px 0 220px;
padding: 9.25rem 0 13.75rem;
margin: 0 auto; }
@media (min-width: 48rem) {
.restaurant-listing--hatching-soon .restaurant-teaser__inner {
padding: 208px 0 220px;
padding: 13rem 0 13.75rem; } }
@media (min-width: 75rem) {
.restaurant-listing--hatching-soon .restaurant-teaser__inner {
min-height: 760px; } }
@media (min-width: 48rem) {
.restaurant-listing--hatching-soon .restaurant-teaser:nth-child(1n+2) {
display: block; } }
.restaurant-listing--hatching-soon .restaurant-teaser__address {
font-size: 20px;
font-size: 1.25rem;
padding: 0 17px;
padding: 0 1.0625rem; }
@media (min-width: 75rem) {
.restaurant-listing--hatching-soon .restaurant-teaser__address {
font-size: 20px;
font-size: 1.25rem;
max-width: 350px;
max-width: 21.875rem;
margin: 0 auto 40px auto;
margin: 0 auto 2.5rem auto; } }
.restaurant-listing--hatching-soon .restaurant-teaser__title {
padding: 0 17px;
padding: 0 1.0625rem; }
@media (min-width: 75rem) {
.restaurant-listing--hatching-soon .restaurant-teaser__title {
max-width: 350px;
max-width: 21.875rem;
margin: 0 auto 40px auto;
margin: 0 auto 2.5rem auto; } }
.restaurant-listing--hatching-soon .cta {
font-size: 17px;
font-size: 1.0625rem;
position: absolute;
left: 50%;
bottom: 120px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: auto;
min-width: 250px; }
.restaurant-listing--hatching-soon .cta span {
text-align: center; }
@media (min-width: 56.25rem) {
.restaurant-listing--hatching-soon .cta {
font-size: 20px;
font-size: 1.25rem; } }
@media (min-width: 48rem) {
.restaurant-listing--hatching-soon .slick-dots {
bottom: 6%; } }
.restaurant-listing--just-hatched .restaurant-teaser, .restaurant-listing--hatching-soon .restaurant-teaser {
position: relative; }
.restaurant-listing--just-hatched .restaurant-teaser__distance, .restaurant-listing--just-hatched .restaurant-teaser__telephone, .restaurant-listing--just-hatched .restaurant-teaser__takeaway, .restaurant-listing--just-hatched .restaurant-teaser__time, .restaurant-listing--just-hatched .restaurant-teaser__icons-bar, .restaurant-listing--hatching-soon .restaurant-teaser__distance, .restaurant-listing--hatching-soon .restaurant-teaser__telephone, .restaurant-listing--hatching-soon .restaurant-teaser__takeaway, .restaurant-listing--hatching-soon .restaurant-teaser__time, .restaurant-listing--hatching-soon .restaurant-teaser__icons-bar {
display: none;
visibility: hidden; }
.search-results--listing .restaurant-teaser--just-hatched:before, .search-results--listing .restaurant-teaser--hatching-soon:before, .search-results--listing .restaurant-teaser--refurbishment:before {
top: 0;
width: 100%;
left: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none; }
@media (min-width: 83em) {
.search-results--listing .restaurant-teaser--just-hatched:before, .search-results--listing .restaurant-teaser--hatching-soon:before, .search-results--listing .restaurant-teaser--refurbishment:before {
top: 45px;
width: auto; } }
.search-results--listing .restaurant-teaser--just-hatched .restaurant-teaser__title, .search-results--listing .restaurant-teaser--hatching-soon .restaurant-teaser__title, .search-results--listing .restaurant-teaser--refurbishment .restaurant-teaser__title {
padding-top: 110px; }
.search-results--listing .restaurant-teaser--restaurant-open:after, .search-results--listing .restaurant-teaser--restaurant-closed:after {
display: inline-block;
width: 1em;
width: 1em;
height: 1em;
height: 1em;
margin-left: 0.3em;
margin-left: 0.3em;
margin-bottom: 0.25em;
margin-bottom: 0.25em;
-webkit-border-radius: 100%;
border-radius: 100%;
content: '';
vertical-align: middle; }
.search-results--listing .restaurant-teaser--just-hatched:before {
content: "Just hatched";
background-color: #ff8200;
top: 0;
width: 100%; }
.search-results--listing .restaurant-teaser--hatching-soon:before {
content: "Opening soon";
background-color: #00788c;
top: 0;
width: 100%; }
.search-results--listing .restaurant-teaser--refurbishment:before {
content: "Closed for refurbishment";
background-color: #e6007d;
top: 0;
width: 100%; }
.search-results--listing .restaurant-teaser--restaurant-open:after {
background: #73ff1e; }
.search-results--listing .restaurant-teaser__inner {
padding-bottom: 60px;
padding-bottom: 3.75rem; }
@media (min-width: 75rem) {
.search-results--listing .restaurant-teaser__inner {
padding-bottom: 78px;
padding-bottom: 4.875rem; } }
.search-results--listing .restaurant-teaser__title {
padding-top: 86px;
margin: 0; }
@media (min-width: 75rem) {
.search-results--listing .restaurant-teaser__title {
padding-top: 148px; } }
.search-results--listing .restaurant-teaser__distance {
padding-top: 22px;
font-size: 18px;
font-size: 1.125rem; }
.search-results--listing .restaurant-teaser__address {
padding-top: 35px;
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 0; }
.search-results--listing .restaurant-teaser__telephone {
font-size: 20px;
font-size: 1.25rem;
display: block;
color: #FFFFFF;
padding-top: 25px; }
.search-results--listing .restaurant-teaser__telephone:hover {
text-decoration: none; }
.search-results--listing .restaurant-teaser__time {
padding-top: 40px;
display: block;
font-size: 18px;
font-size: 1.125rem; }
.search-results--listing .restaurant-teaser__icons-bar {
padding-top: 46px;
font-size: 36px;
font-size: 2.25rem; }
.search-results--listing .restaurant-teaser__takeaway {
padding-top: 40px;
margin-bottom: 50px;
font-size: 18px;
font-size: 1.125rem; }
.search-results--listing .restaurant-teaser__takeaway a {
color: white; }
.search-results--listing .restaurant-teaser__takeaway .icon, .search-results--listing .restaurant-teaser__takeaway .blog-post__social-link > a:before, .search-results--listing .restaurant-teaser__takeaway .add-to-cal,
.search-results--listing .restaurant-teaser__takeaway .show-information {
font-size: 36px;
font-size: 2.25rem;
vertical-align: middle; }
.search-results--listing .cta {
margin-top: 56px; }
.restaurant-listing--photos .restaurant-teaser__inner {
height: 200px;
margin: 125px 0;
margin: 7.8125rem 0; }
@media (min-width: 48rem) {
.restaurant-listing--photos .restaurant-teaser__inner {
margin: 310px 0;
margin: 19.375rem 0; } }
.restaurant-listing--photos .slick-dots {
visibility: hidden; }
.restaurant-listing .calendar {
margin: 140px auto 30px auto;
margin: 8.75rem auto 1.875rem auto; }
@media (min-width: 48rem) {
.restaurant-listing .calendar {
margin: 80px auto 30px auto;
margin: 5rem auto 1.875rem auto; } }
.restaurant-teaser--hatching-soon .restaurant-teaser__inner {
background-color: transparent; }
/**
* Product item
*/
.rm-item {
padding: 0 8px;
padding: 0 0.5rem;
margin-bottom: 38px;
margin-bottom: 2.375rem;
color: #000000;
position: relative;
text-align: center; }
@media (min-width: 48rem) {
.rm-item {
margin-bottom: 68px;
margin-bottom: 4.25rem; } }
@media (min-width: 75rem) {
.rm-item {
margin-bottom: 88px;
margin-bottom: 5.5rem; } }
.rm-item--new .rm-item__title-wrapper:after {
font-size: 25px;
font-size: 1.5625rem;
content: "\e909";
position: absolute;
color: #ff6900;
top: -20px;
left: 50px; }
@media (min-width: 48rem) {
.rm-item--new .rm-item__title-wrapper:after {
top: -24px;
left: -10px; } }
@media (min-width: 64rem) {
.rm-item--new .rm-item__title-wrapper:after {
top: -16px; } }
.rm-item--with-chicken .rm-item__prices-wrapper--one .rm-item__price:last-child {
display: none; }
.rm-item--hide {
-webkit-filter: blur(2px);
filter: blur(2px);
opacity: 0.25;
pointer-events: none; }
.rm-item__title-wrapper {
position: relative; }
@media (min-width: 48rem) {
.rm-item__title-wrapper {
display: inline-block; } }
.product-sub-listing__title,
.rm-item__title {
font-size: 23px;
font-size: 1.4375rem;
line-height: 31px;
line-height: 1.9375rem;
padding: 10px 0 15px 0;
padding: 0.625rem 0 0.9375rem 0;
font-family: nandos, Helvetica, Arial, Geneva, sans-serif;
position: relative; }
@media (min-width: 75rem) {
.product-sub-listing__title,
.rm-item__title {
font-size: 36px;
font-size: 2.25rem;
line-height: 42px;
line-height: 2.625rem;
padding: 18px 0 22px 0;
padding: 1.125rem 0 1.375rem 0; } }
/**
* Tooltip layouts
*/
.rm-item__title-wrapper .tooltip {
display: none; }
@media (min-width: 75rem) {
.rm-item__title-wrapper .tooltip {
display: inline-block;
position: absolute;
top: 0;
right: 0; } }
@media (min-width: 75rem) {
.rm-item__title + .tooltip {
right: -41px; } }
@media (min-width: 75rem) {
.rm-item__title + .tooltip + .tooltip {
right: -68px; } }
@media (min-width: 75rem) {
.rm-item__title + .tooltip + .tooltip + .tooltip {
right: -88px; } }
.product-sub-listing__description,
.rm-item__description {
font-size: 16px;
font-size: 1rem;
line-height: 24px;
line-height: 1.5rem;
margin-bottom: 34px;
margin-bottom: 2.125rem;
position: relative;
z-index: 2;
padding: 0px 20px;
padding: 0rem 1.25rem; }
@media (min-width: 48rem) {
.product-sub-listing__description,
.rm-item__description {
padding: 0; } }
@media (min-width: 75rem) {
.product-sub-listing__description,
.rm-item__description {
font-size: 22px;
font-size: 1.375rem;
line-height: 30px;
line-height: 1.875rem;
margin-bottom: 34px;
margin-bottom: 2.125rem; } }
.rm-item__prices-wrapper {
margin: 0 auto 34px;
margin: 0 auto 2.125rem; }
@media (min-width: 75rem) {
.rm-item__prices-wrapper {
margin-bottom: 34px;
margin-bottom: 2.125rem; } }
.rm-item__price {
float: left;
position: relative; }
.rm-item__price::after {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAsCAYAAACtzHIbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjI0Q0IzMDlBMTAzMTFFNUFBOEJENDcwRUYzQjlDQTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjI0Q0IzMEFBMTAzMTFFNUFBOEJENDcwRUYzQjlDQTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxNTM4MDkyQUEwQzUxMUU1QUE4QkQ0NzBFRjNCOUNBMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMjRDQjMwOEExMDMxMUU1QUE4QkQ0NzBFRjNCOUNBMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PthlYDsAAACmSURBVHjaYmJAAHEg/g/EP5mQBCWhNBs2QQZkQWlsghJEq5SC0p+xWXQAWVAGSr9jQjJGDMr+BRMECTBD2TeY0J0DBNdggoJIgldggvxIgv+wCcoSrfI9XkE+fCo/YTPzHXLQwbS/RxbkJ1oQQzsjEPOiC6I4HCYogE2QD5sgP9GCVNIODjZ0le+QUx1KYKBrf09QJVZBAfLNZEaS2A3EV0GCAAEGAEXiKl9juey0AAAAAElFTkSuQmCC") no-repeat top left;
content: '';
display: block;
width: 8px;
height: 32px;
position: absolute;
top: 2px; }
@media (min-width: 75rem) {
.rm-item__price::after {
width: 10px;
height: 62px; } }
.rm-item__price:first-child::after {
display: none; }
.rm-item__price span {
font-size: 13px;
font-size: 0.8125rem;
display: block; }
@media (min-width: 75rem) {
.rm-item__price span {
font-size: 17px;
font-size: 1.0625rem; } }
.rm-item__price span.type {
font-weight: 400;
padding-bottom: 5px;
padding-bottom: 0.3125rem; }
@media (min-width: 75rem) {
.rm-item__price span.type {
padding-bottom: 10px;
padding-bottom: 0.625rem; } }
.rm-item__price span.cost .currency::before {
content: "£"; }
@media (min-width: 75rem) {
.rm-item__price span.cost {
font-size: 20px;
font-size: 1.25rem; } }
.rm-item__prices-wrapper--one {
width: 38.10%; }
.rm-item__prices-wrapper--one .type {
display: none; }
.rm-item__prices-wrapper--one .rm-item__price {
width: 100%; }
.rm-item__prices-wrapper--two {
width: 74.63%; }
.rm-item__prices-wrapper--two .rm-item__price {
margin-right: 4%;
width: 48%; }
.rm-item__prices-wrapper--two .rm-item__price::after {
left: -7px; }
.rm-item__prices-wrapper--two .rm-item__price:last-child {
margin-right: 0; }
.rm-item__prices-wrapper--three-or-more .rm-item__price {
margin-right: 3.17%;
width: 27.78%; }
.rm-item__prices-wrapper--three-or-more .rm-item__price::after {
left: -7px; }
.rm-item__prices-wrapper--three-or-more .rm-item__price:nth-child(2) {
width: 38.10%; }
.rm-item__prices-wrapper--three-or-more .rm-item__price:last-child {
margin-right: 0; }
.rm-item__prices-wrapper--three-or-more .rm-item__price:last-child::after {
left: -12px; }
.rm-item__prices-wrapper--three-or-more.rm-item__prices--drinks .rm-item__price {
margin-right: 0;
width: 31%; }
.rm-item__prices-wrapper--three-or-more.rm-item__prices--drinks .rm-item__price:nth-child(2) {
width: 38%; }
.rm-item__prices-wrapper--three-or-more.rm-item__prices--drinks .rm-item__price:last-child {
margin-right: 0; }
.rm-item-dietary {
margin: 0 auto;
max-width: 40px; }
.rm-item-dietary--full {
padding: 0 8px 0 6px;
padding: 0 0.5rem 0 0.375rem;
max-width: 112px; }
@media (min-width: 75rem) {
.rm-item-dietary--full {
max-width: 80px; } }
.rm-item-dietary--full .rm-item-dietary__option:first-child {
float: left; }
.rm-item-dietary--full .rm-item-dietary__option:last-child {
float: right; }
/**
* Icons
*/
.add-to-cal,
.show-information {
display: block;
padding: 0;
overflow: visible;
text-decoration: none; }
.add-to-cal:hover,
.show-information:hover {
text-decoration: none; }
.add-to-cal.show-as-disabled,
.show-information.show-as-disabled {
pointer-events: none; }
.add-to-cal.show-as-disabled:before,
.show-information.show-as-disabled:before {
color: #8c8c8c; }
.add-to-cal.show-as-disabled:hover,
.show-information.show-as-disabled:hover {
-webkit-animation: none;
animation: none;
color: #8c8c8c; }
.add-to-cal {
font-size: 27px;
font-size: 1.6875rem;
color: #ff00b4; }
.touch .add-to-cal:active,
.no-touch .add-to-cal:hover {
-webkit-animation: heartBeat 2s infinite;
animation: heartBeat 2s infinite; }
.show-information {
font-size: 25px;
font-size: 1.5625rem;
margin: 1px;
margin: 0.0625rem;
color: #0564a3; }
.show-information:hover {
-webkit-animation: heartBeat 2s infinite;
animation: heartBeat 2s infinite; }
.rm-section {
color: #000000;
text-align: center; }
.rm-section__inner {
margin: 0 auto;
width: 83.75%; }
.rm-section:first-of-type .rm-section__header {
padding-top: 62px;
padding-top: 3.875rem; }
@media (min-width: 48rem) {
.rm-section:first-of-type .rm-section__header {
padding-top: 82px;
padding-top: 5.125rem; } }
@media (min-width: 64rem) {
.rm-section:first-of-type .rm-section__header {
padding-top: 138px;
padding-top: 8.625rem; } }
@media (min-width: 112.5rem) {
.rm-section:first-of-type .rm-section__header {
padding-top: 178px;
padding-top: 11.125rem; } }
.rm-section__header {
padding: 40px 0;
padding: 2.5rem 0;
background: #ff2350;
color: #FFFFFF;
position: relative; }
@media (min-width: 64rem) {
.rm-section__header {
padding: 61px 0 59px 0;
padding: 3.8125rem 0 3.6875rem 0; } }
@media (min-width: 75rem) {
.rm-section__header {
padding: 122px 0 118px 0;
padding: 7.625rem 0 7.375rem 0; } }
.rm-section__header::before {
content: "";
border: 10px solid #ff2350;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 0;
height: 0;
position: absolute;
bottom: -10px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
z-index: 200; }
@media (min-width: 75rem) {
.rm-section__header::before {
border-width: 20px;
bottom: -20px; } }
.rm-section--whats-new .rm-new-product:nth-of-type(2) .rm-new-product__title:before {
color: #ff00b4; }
/**
* Product Sections
*/
.product-section__content > .product-listing {
padding-top: 50px;
padding-top: 3.125rem; }
@media (min-width: 75rem) {
.product-section__content > .product-listing {
padding-top: 100px;
padding-top: 6.25rem; } }
.product-section__inner {
padding: 38px 0 33px 0;
padding: 2.375rem 0 2.0625rem 0;
max-width: 83.75%;
margin: 0 auto; }
@media (min-width: 48rem) {
.product-section__inner {
padding: 50px 0 47px 0;
padding: 3.125rem 0 2.9375rem 0; } }
@media (min-width: 75rem) {
.product-section__inner {
padding: 100px 0 95px 0;
padding: 6.25rem 0 5.9375rem 0; } }
.product-section__header {
background: #000000;
color: #FFFFFF;
position: relative; }
.product-section__header--appeteasers {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/appeteasers.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/appeteasers.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/appeteasers.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--appeteasers {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--appeteasers {
background-size: 110% 110%; } }
.product-section__header--frozen-yogurt {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/FrozenYogurt.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/FrozenYogurt.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/FrozenYogurt.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--frozen-yogurt {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--frozen-yogurt {
background-size: 110% 110%; } }
.product-section__header--gelado {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/Gelado.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Gelado.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Gelado.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--gelado {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--gelado {
background-size: 110% 110%; } }
.product-section__header--have-your-cake {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/cakes.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/cakes.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/cakes.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--have-your-cake {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--have-your-cake {
background-size: 110% 110%; } }
.product-section__header--beercider {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/beer.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/beer.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/beer.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--beercider {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--beercider {
background-size: 110% 110%; } }
.product-section__header--coffee {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/coffee.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/coffee.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/coffee.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--coffee {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--coffee {
background-size: 110% 110%; } }
.product-section__header--go-bottomless {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/GoBottomless.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/GoBottomless.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/GoBottomless.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--go-bottomless {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--go-bottomless {
background-size: 110% 110%; } }
.product-section__header--hot-drinks {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/HotDrinks.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/HotDrinks.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/HotDrinks.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--hot-drinks {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--hot-drinks {
background-size: 110% 110%; } }
.product-section__header--soft-drinks {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/SoftDrinks.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/SoftDrinks.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/SoftDrinks.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--soft-drinks {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--soft-drinks {
background-size: 110% 110%; } }
.product-section__header--wine {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/Wine.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Wine.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Wine.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--wine {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--wine {
background-size: 110% 110%; } }
.product-section__header--burgers-pittas-wraps {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/burgersPittasWraps.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/burgersPittasWraps.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/burgersPittasWraps.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--burgers-pittas-wraps {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--burgers-pittas-wraps {
background-size: 110% 110%; } }
.product-section__header--burgers-pittas-wraps .product-section__inner {
max-width: 78.75%; }
.product-section__header--peri-peri-chicken {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/PERiPERi-chicken.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/PERiPERi-chicken.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/PERiPERi-chicken.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--peri-peri-chicken {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--peri-peri-chicken {
background-size: 110% 110%; } }
.product-section__header--salads {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/Salads.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Salads.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Salads.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--salads {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--salads {
background-size: 110% 110%; } }
.product-section__header--sharing-platters {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/SharingPlatters.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/SharingPlatters.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/SharingPlatters.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--sharing-platters {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--sharing-platters {
background-size: 110% 110%; } }
.product-section__header--special-guests {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/SpecialGuests.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/SpecialGuests.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/SpecialGuests.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--special-guests {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--special-guests {
background-size: 110% 110%; } }
.product-section__header--nandinos {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/Nandinos.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Nandinos.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Nandinos.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--nandinos {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--nandinos {
background-size: 110% 110%; } }
.product-section__header--dino-desserts {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/DinoDesserts.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/DinoDesserts.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/DinoDesserts.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--dino-desserts {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--dino-desserts {
background-size: 110% 110%; } }
.product-section__header--dino-drinks {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/DinoDrinks.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/DinoDrinks.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/DinoDrinks.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--dino-drinks {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--dino-drinks {
background-size: 110% 110%; } }
.product-section__header--dino-mains {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/DinosMain.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/DinosMain.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/DinosMain.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--dino-mains {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--dino-mains {
background-size: 110% 110%; } }
.product-section__header--dino-sides {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/DinoSides.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/DinoSides.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/DinoSides.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--dino-sides {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--dino-sides {
background-size: 110% 110%; } }
.product-section__header--sides {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/Sides.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Sides.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/Sides.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--sides {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--sides {
background-size: 110% 110%; } }
.product-section__header--fino-sides {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url("../images/restaurant-menu/section-headers/FinoSides.jpg") no-repeat 50% 50%;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/FinoSides.jpg") no-repeat 50% 50%;
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/restaurant-menu/section-headers/FinoSides.jpg") no-repeat 50% 50%;
background-size: cover; }
@media (min-width: 64rem) {
.product-section__header--fino-sides {
background-size: 130% 120%; } }
@media (min-width: 112.5rem) {
.product-section__header--fino-sides {
background-size: 110% 110%; } }
.product-section__title {
font-size: 28px;
font-size: 1.75rem;
line-height: 33px;
line-height: 2.0625rem;
margin: 0 0 14px 0;
margin: 0 0 0.875rem 0; }
@media (min-width: 48rem) {
.product-section__title {
font-size: 32px;
font-size: 2rem;
line-height: 38px;
line-height: 2.375rem;
margin: 0 0 22px 0;
margin: 0 0 1.375rem 0; } }
@media (min-width: 75rem) {
.product-section__title {
font-size: 48px;
font-size: 3rem;
margin: 0 0 32px 0;
margin: 0 0 2rem 0;
line-height: 1; } }
.product-section__description {
font-size: 16px;
font-size: 1rem;
line-height: 21px;
line-height: 1.3125rem;
margin: 0 auto; }
@media (min-width: 75rem) {
.product-section__description {
font-size: 22px;
font-size: 1.375rem;
line-height: 30px;
line-height: 1.875rem;
max-width: 40%; } }
/**
* Product listing
*/
.product-listing:nth-child(odd):not(.add-section) {
background: #e3e3e3; }
.product-listing__content {
margin: 0 auto;
width: 83.75%; }
.product-listing__content .rm-item__title-wrapper {
position: relative;
z-index: 1;
padding: 10px 0 15px 0;
padding: 0.625rem 0 0.9375rem 0; }
.product-listing__content .rm-item__title-wrapper h5 {
position: relative;
display: inline;
padding: 0; }
.product-listing__content .rm-item:nth-of-type(3n + 1) .rm-item__title-wrapper h5::before {
background: url("../images/restaurant-menu/corner-green.png") no-repeat top left;
background-size: 53px 68px;
content: "";
display: block;
height: 70px;
width: 60px;
position: absolute;
left: -34px;
top: 0;
z-index: -1; }
.product-listing__content .rm-item:nth-of-type(3n + 2) .rm-item__title-wrapper h5::before {
background: url("../images/restaurant-menu/corner-blue.png") no-repeat top left;
background-size: 53px 68px;
content: "";
display: block;
height: 70px;
width: 60px;
position: absolute;
left: -34px;
top: 0;
z-index: -1; }
.product-listing__content .rm-item:nth-of-type(3n + 3) .rm-item__title-wrapper h5::before {
background: url("../images/restaurant-menu/corner-yellow.png") no-repeat top left;
background-size: 53px 68px;
content: "";
display: block;
height: 70px;
width: 60px;
position: absolute;
left: -34px;
top: 0;
z-index: -1; }
.product-listing__title {
padding: 14px 0;
padding: 0.875rem 0;
position: relative;
padding: 12px 0;
padding: 0.75rem 0;
margin: 0 auto 38px;
margin: 0 auto 2.375rem;
max-width: 83.75%; }
.product-listing__title:after, .product-listing__title:before {
-webkit-backface-visibility: visible;
backface-visibility: visible;
background: url("../images/layout/line-black.png") top left no-repeat;
background-size: contain;
content: "";
display: block;
height: 10px;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 110px; }
.product-listing__title:after {
bottom: -10px;
-webkit-transform: rotate(183deg) translate(-50%, 0);
-ms-transform: rotate(183deg) translate(-50%, 0);
transform: rotate(183deg) translate(-50%, 0);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0; }
.product-listing__title:before {
top: 0; }
@media (min-width: 75rem) {
.product-listing__title {
font-size: 40px;
font-size: 2.5rem;
margin-bottom: 80px;
margin-bottom: 5rem; } }
.product-listing__title::before {
width: 60px; }
.product-listing__title::after {
width: 60px; }
.product-sub-listing .rm-item__title-wrapper::before {
display: none; }
.product-sub-listing__title-wrapper {
display: inline-block;
position: relative; }
.product-sub-listing__title-wrapper--0::before {
background: url("../images/restaurant-menu/corner-green.png") no-repeat top left;
background-size: 53px 68px;
content: "";
display: block;
height: 70px;
width: 60px;
position: absolute;
left: 34px;
top: 0;
z-index: 0; }
@media (min-width: 48rem) {
.product-sub-listing__title-wrapper--0::before {
left: -34px; } }
.product-sub-listing__title-wrapper--1::before {
background: url("../images/restaurant-menu/corner-blue.png") no-repeat top left;
background-size: 53px 68px;
content: "";
display: block;
height: 70px;
width: 60px;
position: absolute;
left: 0px;
top: 0;
z-index: 0; }
@media (min-width: 48rem) {
.product-sub-listing__title-wrapper--1::before {
left: -34px; } }
.product-sub-listing__title-wrapper--2::before {
background: url("../images/restaurant-menu/corner-yellow.png") no-repeat top left;
background-size: 53px 68px;
content: "";
display: block;
height: 70px;
width: 60px;
position: absolute;
left: 0px;
top: 0;
z-index: 0; }
@media (min-width: 48rem) {
.product-sub-listing__title-wrapper--2::before {
left: -34px; } }
@media (min-width: 48rem) {
.product-sub-listing__header {
margin: 0 auto;
width: 60%; } }
@media (min-width: 64rem) {
.product-sub-listing__header {
width: 25.87%; } }
.product-sub-listing__content {
margin: 0 auto;
width: 83.75%; }
.product-sub-listing__content--three-or-more .rm-item--new .rm-item__title-wrapper:after {
display: none; }
.product-sub-listing__content--three-or-more .rm-item__title {
font-size: 18px;
font-size: 1.125rem;
line-height: 23px;
line-height: 1.4375rem;
padding: 0 0 20px 0;
padding: 0 0 1.25rem 0;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 600; }
@media (min-width: 112.5rem) {
.product-sub-listing__content--three-or-more .rm-item__title {
font-size: 28px;
font-size: 1.75rem;
line-height: 1;
line-height: 1;
padding: 0 0 40px 0;
padding: 0 0 2.5rem 0; } }
.product-sub-listing__content--three-or-more .rm-item__description {
display: none; }
.product-sub-listing__content--three-or-more .rm-item__prices-wrapper {
margin-bottom: 28px;
margin-bottom: 1.75rem; }
@media (min-width: 48rem) {
.product-sub-listing__content--three-or-more .rm-item__prices-wrapper--three-or-more .rm-item__price::after {
left: -5px;
width: 10px;
height: 56px; } }
@media (min-width: 48rem) {
.product-sub-listing__content--three-or-more .rm-item__prices-wrapper--three-or-more .rm-item__price:nth-child(2)::after {
left: -8px; } }
/** Layouts */
@media (min-width: 48rem) {
.product-listing__content--one > .rm-item, .product-sub-listing__content--one > .rm-item {
padding: 0 4.53%;
padding: 0 4.53%;
margin-left: auto;
margin-right: auto;
width: 60%; } }
@media (min-width: 64rem) {
.product-listing__content--one > .rm-item, .product-sub-listing__content--one > .rm-item {
width: 40%; } }
@media (min-width: 112.5rem) {
.product-listing__content--one > .rm-item .rm-item__prices-wrapper--three-or-more, .product-sub-listing__content--one > .rm-item .rm-item__prices-wrapper--three-or-more {
width: 83.56%; } }
@media (min-width: 48rem) {
.product-listing__content--two {
margin-left: auto;
margin-right: auto;
width: 66.67%; } }
@media (min-width: 48rem) {
.product-listing__content--two > .rm-item {
float: left;
padding: 0;
width: 50%; } }
@media (min-width: 64rem) {
.product-listing__content--two > .rm-item {
width: 31.33%; } }
@media (min-width: 64rem) {
.product-listing__content--two > .rm-item:nth-of-type(1) {
margin-right: 12.33%;
margin-left: 12.50%; } }
@media (min-width: 112.5rem) {
.product-listing__content--two .rm-item__prices-wrapper--three-or-more {
width: 100%; } }
.product-listing__content--three-or-more, .product-sub-listing__content--three-or-more {
margin: 0 auto;
width: 83.75%; }
@media (min-width: 48rem) {
.product-listing__content--three-or-more, .product-sub-listing__content--three-or-more {
width: 83.33%; } }
@media (min-width: 48rem) {
.product-listing__content--three-or-more .rm-item, .product-sub-listing__content--three-or-more .rm-item {
float: left; }
.product-listing__content--three-or-more .rm-item:nth-of-type(3n + 1), .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 1) {
clear: both; }
.product-listing__content--three-or-more .rm-item .rm-item__prices-wrapper--two, .product-sub-listing__content--three-or-more .rm-item .rm-item__prices-wrapper--two {
width: 100%; }
.product-listing__content--three-or-more .rm-item:nth-of-type(3n + 1), .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 1), .product-listing__content--three-or-more .rm-item:nth-of-type(3n + 3), .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 3) {
padding: 0 2%;
padding: 0 2%;
width: 30%; } }
@media (min-width: 48rem) and (min-width: 112.5rem) {
.product-listing__content--three-or-more .rm-item:nth-of-type(3n + 1) .rm-item__prices-wrapper--two, .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 1) .rm-item__prices-wrapper--two, .product-listing__content--three-or-more .rm-item:nth-of-type(3n + 3) .rm-item__prices-wrapper--two, .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 3) .rm-item__prices-wrapper--two {
width: 58.49%; } }
@media (min-width: 48rem) and (min-width: 112.5rem) {
.product-listing__content--three-or-more .rm-item:nth-of-type(3n + 1) .rm-item__prices-wrapper--three-or-more, .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 1) .rm-item__prices-wrapper--three-or-more, .product-listing__content--three-or-more .rm-item:nth-of-type(3n + 3) .rm-item__prices-wrapper--three-or-more, .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 3) .rm-item__prices-wrapper--three-or-more {
width: 100%; } }
@media (min-width: 48rem) {
.product-listing__content--three-or-more .rm-item:nth-of-type(3n + 2), .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 2) {
padding: 0 6.53%;
padding: 0 6.53%;
width: 40%; } }
@media (min-width: 48rem) and (min-width: 112.5rem) {
.product-listing__content--three-or-more .rm-item:nth-of-type(3n + 2) .rm-item__prices-wrapper--two, .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 2) .rm-item__prices-wrapper--two {
width: 56.445%; } }
@media (min-width: 48rem) and (min-width: 112.5rem) {
.product-listing__content--three-or-more .rm-item:nth-of-type(3n + 2) .rm-item__prices-wrapper--three-or-more, .product-sub-listing__content--three-or-more .rm-item:nth-of-type(3n + 2) .rm-item__prices-wrapper--three-or-more {
width: 95.97%; } }
@media (min-width: 48rem) {
.rm-section--whats-new {
display: table;
width: 100%; } }
.rm-new-product {
text-align: center; }
@media (min-width: 48rem) {
.rm-new-product {
display: table-row; } }
.rm-new-product:nth-child(2n + 2) .rm-new-product__image-wrapper {
display: none; }
@media (min-width: 48rem) {
.rm-new-product:nth-child(2n + 2) .rm-new-product__image-wrapper {
display: table-cell; } }
.rm-new-product:nth-child(2n + 2) .rm-new-product__image-wrapper--mobile {
display: block; }
@media (min-width: 48rem) {
.rm-new-product:nth-child(2n + 2) .rm-new-product__image-wrapper--mobile {
display: none; } }
@media (max-width: 48rem) {
.rm-new-product__image-wrapper {
padding-top: 75%; } }
.rm-new-product__content {
width: 83.75%;
margin: 0 auto;
padding: 98px 0 47px 0;
padding: 6.125rem 0 2.9375rem 0; }
@media (min-width: 48rem) {
.rm-new-product__content {
padding: 100px 0 54px 0;
padding: 6.25rem 0 3.375rem 0; } }
@media (min-width: 75rem) {
.rm-new-product__content {
padding: 200px 0 108px 0;
padding: 12.5rem 0 6.75rem 0; } }
@media (min-width: 48rem) {
.rm-new-product__content:last-child {
padding-bottom: 140px;
padding-bottom: 8.75rem; } }
@media (min-width: 75rem) {
.rm-new-product__content:last-child {
padding-bottom: 200px;
padding-bottom: 12.5rem; } }
@media (min-width: 48rem) {
.rm-new-product__image-wrapper, .rm-new-product__content {
display: table-cell;
width: 50%;
vertical-align: middle; } }
@media (min-width: 48rem) {
.rm-new-product__inner {
margin: 0 auto;
width: 66.67%; } }
.rm-new-product__title {
font-size: 23px;
font-size: 1.4375rem;
line-height: 30px;
line-height: 1.875rem;
position: relative;
margin: 0 0 18px 0;
margin: 0 0 1.125rem 0; }
@media (min-width: 75rem) {
.rm-new-product__title {
font-size: 40px;
font-size: 2.5rem;
line-height: 44px;
line-height: 2.75rem;
margin: 0 0 36px 0;
margin: 0 0 2.25rem 0; } }
.rm-new-product__title:before {
color: #ff6900;
position: absolute;
top: -27px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
@media (min-width: 75rem) {
.rm-new-product__title:before {
top: -73px; } }
.rm-new-product__copy {
line-height: 24px;
line-height: 1.5rem; }
@media (min-width: 75rem) {
.rm-new-product__copy {
font-size: 22px;
font-size: 1.375rem;
line-height: 30px;
line-height: 1.875rem; } }
.rm-new-product__copy strong {
display: block;
font-size: 18px;
font-size: 1.125rem;
margin: 0 0 18px 0;
margin: 0 0 1.125rem 0; }
@media (min-width: 75rem) {
.rm-new-product__copy strong {
font-size: 28px;
font-size: 1.75rem;
margin: 0 0 26px 0;
margin: 0 0 1.625rem 0; } }
.product-section-hiw {
counter-reset: section; }
.product-section-hiw__inner {
width: 100%; }
@media (min-width: 48rem) {
.product-section-hiw__inner {
display: table;
table-layout: fixed; } }
.product-section-hiw__content {
padding: 69px 0 35px 0;
padding: 4.3125rem 0 2.1875rem 0;
display: block;
max-width: 268px;
width: 100%;
margin: 0 auto; }
.product-section-hiw__panel {
counter-increment: section;
color: #000000;
position: relative;
text-align: center; }
.product-section-hiw__panel:before {
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #FFFFFF;
content: '';
display: block;
position: absolute;
left: 10px;
top: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
@media (min-width: 48rem) {
.product-section-hiw__panel {
padding: 138px 0 70px 0;
padding: 8.625rem 0 4.375rem 0;
display: table-cell;
vertical-align: top;
width: 25%; } }
.product-section-hiw__panel:nth-child(2n + 1) {
background: #f5f5f5; }
.product-section-hiw__panel:nth-child(2n + 2) {
background: #FFFFFF; }
.product-section-hiw__panel:nth-child(2n + 2):before {
border-left-color: #f5f5f5; }
.product-section-hiw__panel .choose {
font-size: 22px;
font-size: 1.375rem;
padding-top: 102px;
padding-top: 6.375rem;
margin-bottom: 10px;
margin-bottom: 0.625rem;
display: block;
position: relative; }
.product-section-hiw__panel .choose:first-letter {
text-transform: uppercase; }
.product-section-hiw__panel .choose:before {
font-size: 36px;
font-size: 2.25rem;
line-height: 62px;
line-height: 3.875rem;
background: #ff2350;
-webkit-border-radius: 50%;
border-radius: 50%;
content: counter(section);
color: #FFFFFF;
display: block;
font-family: nandos, Helvetica, Arial, Geneva, sans-serif;
height: 62px;
position: absolute;
top: 0;
left: 50%;
text-align: center;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 62px; }
.product-section-hiw__panel .choose-type {
font-size: 36px;
font-size: 2.25rem;
display: block;
font-family: nandos, Helvetica, Arial, Geneva, sans-serif;
margin: 0 auto;
max-width: 268px;
width: 100%;
text-transform: capitalize; }
.product-section-hiw__panel .choose-type .lower {
text-transform: none; }
.product-section-hiw__panel .heat-options {
padding-top: 48px;
padding-top: 3rem;
max-width: 150px;
margin: 0 auto; }
.product-section-hiw__panel .heat-options .tooltip:first-child {
margin: 0 94px 0 0;
margin: 0 5.875rem 0 0; }
.product-section-hiw__price {
font-size: 20px;
font-size: 1.25rem;
padding: 25px 10px;
padding: 1.5625rem 0.625rem;
background: #ff00b4;
color: #FFFFFF;
display: block;
width: 100%; }
.product-section-hiw__price > .copy {
display: block;
text-align: center; }
@media (min-width: 64rem) {
.product-section-hiw__price > .copy {
display: inline;
text-align: left; } }
.product-section-hiw__price > .price {
font-size: 36px;
font-size: 2.25rem;
display: block;
font-family: nandos, Helvetica, Arial, Geneva, sans-serif; }
@media (min-width: 64rem) {
.product-section-hiw__price > .price {
margin: -36px 0 0 25px;
margin: -2.25rem 0 0 1.5625rem;
display: inline-block;
position: relative;
top: 5px; } }
/**
* Styles for the add sections
* @found in the restaurant menu page.
*/
.add-section {
margin: 40px auto 47px;
margin: 2.5rem auto 2.9375rem;
max-width: 78.75%;
width: 100%; }
@media (min-width: 48rem) {
.add-section {
max-width: 90%; } }
@media (min-width: 56.25rem) {
.add-section {
max-width: 80%; } }
@media (min-width: 75rem) {
.add-section {
max-width: 50%; } }
.add-section__title {
margin-bottom: 30px;
margin-bottom: 1.875rem;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 600;
text-align: center; }
@media (min-width: 112.5rem) {
.add-section__title {
font-size: 28px;
font-size: 1.75rem;
margin-bottom: 32px;
margin-bottom: 2rem; } }
.add-section__title:first-letter {
text-transform: capitalize; }
.add-section__listing {
background: #e3e3e3;
border: 1px solid #beb9af;
width: 100%; }
@media (min-width: 48rem) {
.add-section__listing {
border-bottom: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
.add-section__item {
padding: 22px 26px 16px;
padding: 1.375rem 1.625rem 1rem;
border-bottom: 1px solid #beb9af; }
@media (min-width: 48rem) {
.add-section__item {
float: left;
width: 33.33%;
border-right: 1px solid #beb9af; } }
@media (min-width: 64rem) {
.add-section__item {
padding: 28px 4.44% 18px;
padding: 1.75rem 4.44% 1.125rem; } }
@media (min-width: 48rem) {
.add-section__item:nth-child(3n + 3) {
border-right: 0; } }
.add__title {
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: 600; }
.add-bottom-wrapper {
overflow: hidden; }
.add__price {
font-size: 17px;
font-size: 1.0625rem;
padding-top: 25px;
padding-top: 1.5625rem;
float: left;
font-weight: 600; }
.add__options {
float: right;
width: 50%;
padding-top: 21px;
padding-top: 1.3125rem; }
@media (min-width: 30rem) {
.add__options {
width: 36.39%; } }
@media (min-width: 48rem) {
.add__options {
width: 54.39%; } }
.add__options > .add__option {
float: left; }
.add__options > .add__option:first-child {
margin-right: 29.49%; }
.calorie-counter {
background: #ff00b4;
color: #000000;
display: none;
height: 100%;
position: relative;
width: 100%;
border-left: 10px solid #ff00b4; }
@media (min-width: 48rem) {
.calorie-counter {
width: 422px;
height: 100%;
max-height: 450px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -webkit-calc(-50% + 71px));
-ms-transform: translate(0, calc(-50% + 71px));
transform: translate(0, calc(-50% + 71px)); } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.calorie-counter {
max-height: 600px; } }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.calorie-counter {
max-height: 720px; } }
.calorie-counter__choices {
height: 80%;
height: -webkit-calc(100% - 94px);
height: calc(100% - 94px);
overflow: auto;
position: absolute;
bottom: 94px;
width: 100%; }
.calorie-counter__choice {
color: #000000;
position: relative;
font-size: 18px;
font-size: 1.125rem;
padding: 18px 30px 14px 15px;
padding: 1.125rem 1.875rem 0.875rem 0.9375rem;
overflow: hidden; }
@media (min-height: 62.5rem) {
.calorie-counter__choice {
padding: 32px 30px 26px 15px;
padding: 2rem 1.875rem 1.625rem 0.9375rem; } }
.calorie-counter__choice:nth-child(14n + 1) {
background: #ff4cca; }
.calorie-counter__choice:nth-child(14n + 2) {
background: #ff40c7; }
.calorie-counter__choice:nth-child(14n + 3) {
background: #ff33c3; }
.calorie-counter__choice:nth-child(14n + 4) {
background: #ff26bf; }
.calorie-counter__choice:nth-child(14n + 5) {
background: #ff19bb; }
.calorie-counter__choice:nth-child(14n + 6) {
background: #ff0db8; }
.calorie-counter__choice:nth-child(14n + 7) {
background: #ff00b4; }
.calorie-counter__choice:nth-child(14n + 8) {
background: #ff00b4; }
.calorie-counter__choice:nth-child(14n + 9) {
background: #ff0db8; }
.calorie-counter__choice:nth-child(14n + 10) {
background: #ff19bb; }
.calorie-counter__choice:nth-child(14n + 11) {
background: #ff26bf; }
.calorie-counter__choice:nth-child(14n + 12) {
background: #ff33c3; }
.calorie-counter__choice:nth-child(14n + 13) {
background: #ff40c7; }
.calorie-counter__choice:nth-child(14n + 14) {
background: #ff4cca; }
@media (min-width: 48rem) {
.calorie-counter__choice {
font-size: 18px;
font-size: 1.125rem;
padding: 14px 10px 10px 15px;
padding: 0.875rem 0.625rem 0.625rem 0.9375rem; } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.calorie-counter__choice {
padding: 18px 10px 14px 15px;
padding: 1.125rem 0.625rem 0.875rem 0.9375rem; } }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.calorie-counter__choice {
padding: 32px 10px 26px 15px;
padding: 2rem 0.625rem 1.625rem 0.9375rem; } }
.calorie-counter__copy,
.calorie-counter__choice-title {
display: block;
float: left;
width: 75%;
margin-right: 5%; }
.calorie-counter__value,
.calorie-counter__calories {
display: block;
float: left;
width: 20%; }
.calorie-counter__close {
display: inline-block;
height: 100%;
width: 50px;
vertical-align: middle;
color: transparent;
position: absolute;
top: 0px;
right: 0px;
text-decoration: none; }
.calorie-counter__close:before {
color: #FFFFFF;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
display: inline-block;
line-height: 21px;
width: 25px;
height: 25px;
border: 2px solid transparent;
-webkit-border-radius: 50%;
border-radius: 50%; }
.calorie-counter__close:hover:before {
border-color: #FFFFFF; }
.calorie-counter__total {
background: #FFFFFF;
color: #ff00b4;
padding: 40px 10px 35px 27px;
padding: 2.5rem 0.625rem 2.1875rem 1.6875rem;
position: absolute;
bottom: 0;
width: 100%;
font-size: 24px;
font-size: 1.5rem;
font-weight: bold; }
.calorie-counter__total .calorie-counter__copy {
width: 65%; }
@media (min-width: 30rem) {
.calorie-counter__total .calorie-counter__copy {
width: 75%; } }
@media (min-width: 48rem) {
.calorie-counter__total {
padding: 20px 10px 20px 27px;
padding: 1.25rem 0.625rem 1.25rem 1.6875rem; } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.calorie-counter__total {
padding: 30px 10px 30px 27px;
padding: 1.875rem 0.625rem 1.875rem 1.6875rem; } }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.calorie-counter__total {
padding: 40px 10px 40px 27px;
padding: 2.5rem 0.625rem 2.5rem 1.6875rem; } }
.filters {
background: #FFFFFF;
border-left: 8px solid #01E2C2;
display: none;
height: 100%;
width: 100%; }
@media (min-width: 48rem) {
.filters {
width: 361px;
height: 100%;
max-height: 450px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
margin-top: 40px; } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.filters {
max-height: 600px; } }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.filters {
max-height: 720px; } }
@media (min-width: 48rem) and (min-width: 75rem) {
.filters {
margin-top: 71px; } }
@media (min-width: 48rem) and (min-width: 112.5rem) {
.filters {
margin-top: 90px; } }
.filters .cta {
margin-top: 14px;
margin-top: 0.875rem; }
.filters__header {
font-size: 20px;
font-size: 1.25rem;
padding: 13px 25px 11px;
padding: 0.8125rem 1.5625rem 0.6875rem;
background: #FFFFFF;
border-bottom: 1px solid #01E2C2;
color: #000000; }
@media (min-width: 48rem) {
.filters__header {
font-size: 24px;
font-size: 1.5rem; } }
@media (min-width: 48rem) and (min-height: 35.5rem) {
.filters__header {
padding: 15px 25px 15px;
padding: 0.9375rem 1.5625rem 0.9375rem; } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.filters__header {
padding: 18px 25px 18px;
padding: 1.125rem 1.5625rem 1.125rem;
font-size: 22px;
font-size: 1.375rem; } }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.filters__header {
padding: 23px 25px 21px;
padding: 1.4375rem 1.5625rem 1.3125rem;
font-size: 24px;
font-size: 1.5rem; } }
.filter__options {
display: table;
table-layout: fixed;
height: 60%;
height: -webkit-calc(100% - 125px);
height: calc(100% - 125px);
width: 100%; }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.filter__options {
height: -webkit-calc(100% - 250px);
height: calc(100% - 250px); } }
.filter__option {
display: table-row;
height: 20%; }
.filter__link {
font-size: 16px;
font-size: 1rem;
padding: 0 34px 0 95px;
padding: 0 2.125rem 0 5.9375rem;
border-bottom: 1px solid #01E2C2;
color: #000000;
display: table-cell;
position: relative;
text-decoration: none;
vertical-align: middle; }
@media (min-width: 48rem) {
.filter__link {
font-size: 18px;
font-size: 1.125rem;
padding: 0 40px 0 140px;
padding: 0 2.5rem 0 8.75rem; } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.filter__link {
font-size: 20px;
font-size: 1.25rem; } }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.filter__link {
font-size: 22px;
font-size: 1.375rem; } }
.filter__link .icon, .filter__link .blog-post__social-link > a:before, .filter__link .add-to-cal,
.filter__link .show-information {
color: #01E2C2;
position: absolute;
left: 26px;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
@media (min-width: 48rem) {
.filter__link .icon, .filter__link .blog-post__social-link > a:before, .filter__link .add-to-cal,
.filter__link .show-information {
left: 46px; } }
.filter__link .icon:before, .filter__link .blog-post__social-link > a:before, .filter__link .add-to-cal:before,
.filter__link .show-information:before {
font-size: 42px;
font-size: 2.625rem; }
@media (min-height: 35.5rem) {
.filter__link .icon:before, .filter__link .blog-post__social-link > a:before, .filter__link .add-to-cal:before,
.filter__link .show-information:before {
font-size: 46px;
font-size: 2.875rem; } }
@media (min-width: 48rem) {
.filter__link .icon:before, .filter__link .blog-post__social-link > a:before, .filter__link .add-to-cal:before,
.filter__link .show-information:before {
font-size: 42px;
font-size: 2.625rem; } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.filter__link .icon:before, .filter__link .blog-post__social-link > a:before, .filter__link .add-to-cal:before,
.filter__link .show-information:before {
font-size: 52px;
font-size: 3.25rem; } }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.filter__link .icon:before, .filter__link .blog-post__social-link > a:before, .filter__link .add-to-cal:before,
.filter__link .show-information:before {
font-size: 66px;
font-size: 4.125rem; } }
.filter__link.filter__link--active {
text-decoration: none;
background: #01E2C2; }
.filter__link.filter__link--active .icon:before, .filter__link.filter__link--active .blog-post__social-link > a:before, .filter__link.filter__link--active .add-to-cal:before,
.filter__link.filter__link--active .show-information:before {
color: #FFFFFF; }
.no-touch .filter__link:hover {
text-decoration: none;
background: #01E2C2; }
.no-touch .filter__link:hover .icon:before, .no-touch .filter__link:hover .blog-post__social-link > a:before, .no-touch .filter__link:hover .add-to-cal:before,
.no-touch .filter__link:hover .show-information:before {
color: #FFFFFF; }
.filter__submit {
display: none;
padding: 16px 0 10px 0;
padding: 1rem 0 0.625rem 0; }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.filter__submit {
padding: 25px 0 21px 0;
padding: 1.5625rem 0 1.3125rem 0; } }
.filter__submit .cta {
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
.filter__terms {
font-size: 9px;
font-size: 0.5625rem;
padding: 10px 26px 8px 20px;
padding: 0.625rem 1.625rem 0.5rem 1.25rem;
position: absolute;
bottom: 0;
text-align: center; }
@media (min-width: 48rem) {
.filter__terms {
font-size: 13px;
font-size: 0.8125rem;
padding: 10px 25px 10px;
padding: 0.625rem 1.5625rem 0.625rem; } }
@media (min-width: 48rem) and (min-height: 62.5rem) {
.filter__terms {
padding: 18px 25px 15px;
padding: 1.125rem 1.5625rem 0.9375rem;
font-size: 14px;
font-size: 0.875rem; } }
.filter__terms a {
color: #01E2C2;
text-decoration: underline; }
.periometer {
display: none;
background: #FFFFFF;
height: 100%;
position: relative; }
@media (min-width: 48rem) {
.periometer {
width: 514px;
height: 100%;
max-height: 400px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -webkit-calc(-50% + 71px));
-ms-transform: translate(0, calc(-50% + 71px));
transform: translate(0, calc(-50% + 71px)); } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.periometer {
max-height: 468px; } }
@media (min-width: 56.25rem) {
.periometer {
width: 547px; }
.periometer:after {
background: transparent url("../images/restaurant-menu/peri-o-meter.png") top right no-repeat;
content: "";
display: block;
height: 476px;
width: 250px;
top: -61px;
right: -134px;
position: absolute;
Background-size: 100%; } }
@media (min-width: 56.25rem) and (min-height: 56.25rem) {
.periometer:after {
height: 569px;
width: 299px;
top: -92px;
right: -204px; } }
.periometer__table {
display: table;
height: 100%;
width: 100%;
table-layout: fixed; }
.periometer__tr {
display: table-row; }
.periometer__tr:last-child {
border-bottom: 0 none; }
.periometer__td {
padding: 0 10.74%;
padding: 0 10.74%;
display: table-cell;
vertical-align: middle;
border-left: 8px solid #452412;
border-bottom: 1px solid #452412; }
@media (min-width: 48rem) {
.periometer__td {
border-left-width: 12px;
padding: 0 23px;
padding: 0 1.4375rem; } }
@media (min-width: 56.25rem) {
.periometer__td {
padding: 0 89px 0 23px;
padding: 0 5.5625rem 0 1.4375rem; } }
@media (min-width: 56.25rem) and (min-height: 56.25rem) {
.periometer__td {
padding: 0 69px 0 23px;
padding: 0 4.3125rem 0 1.4375rem; } }
.periometer__title {
font-size: 20px;
font-size: 1.25rem;
line-height: 23px;
line-height: 1.4375rem;
margin-bottom: 10px;
margin-bottom: 0.625rem;
display: block;
font-family: nandos, Helvetica, Arial, Geneva, sans-serif; }
@media (min-width: 48rem) {
.periometer__title br {
display: none; } }
@media (min-width: 48rem) {
.periometer__title {
font-size: 20px;
font-size: 1.25rem;
line-height: 1; } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.periometer__title {
font-size: 24px;
font-size: 1.5rem; } }
.periometer__description {
font-size: 16px;
font-size: 1rem;
line-height: 20px;
line-height: 1.25rem; }
@media (min-width: 48rem) {
.periometer__description {
font-size: 18px;
font-size: 1.125rem;
line-height: 20px;
line-height: 1.25rem; } }
@media (min-width: 48rem) and (min-height: 56.25rem) {
.periometer__description {
font-size: 20px;
font-size: 1.25rem;
line-height: 22px;
line-height: 1.375rem; } }
.heat--extra-hot .periometer__title {
text-transform: capitalize; }
.heat--hot .periometer__td {
border-color: #cd0923; }
.heat--hot .periometer__title {
color: #cd0923;
text-transform: capitalize; }
.heat--medium .periometer__td {
border-color: #f9a51a; }
.heat--medium .periometer__title {
color: #f9a51a;
text-transform: capitalize; }
.heat--mango-lemon .periometer__td {
border-color: #95c23d; }
.heat--mango-lemon .periometer__title {
color: #000000;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif; }
.heat--mango-lemon .periometer__title span {
font-family: nandos, Helvetica, Arial, Geneva, sans-serif; }
.heat--mango-lemon .periometer__title span:nth-of-type(1) {
color: #95c23d; }
.heat--mango-lemon .periometer__title span:nth-of-type(2) {
color: #f9a51a; }
.heat--plain .periometer__td {
border-color: #5a642d; }
.heat--plain .periometer__title {
color: #5a642d;
text-transform: capitalize; }
/**
* Slide out filter/cal counter etc
*/
.rm-features {
display: none; }
.rm-features--filters .rm-features__item:nth-child(1):before {
display: block;
border-right: 9px solid #01E2C2; }
.rm-features--filters .rm-features__close .cross:before, .rm-features--filters .rm-features__close .cross:after {
background-color: #01E2C2; }
.rm-features--calorie .rm-features__item:nth-child(2):before {
display: block;
border-right: 9px solid #ff00b4; }
.rm-features--calorie .rm-features__close .cross:before, .rm-features--calorie .rm-features__close .cross:after {
background-color: #ff00b4; }
.rm-features--periometer .rm-features__item:nth-child(3):before {
display: block;
border-right: 9px solid #95c23d; }
@media (min-width: 48rem) {
.rm-features--periometer .rm-features__item:nth-child(3):before {
border-right: 9px solid #f9a51a; } }
.rm-features--periometer .rm-features__close .cross:before, .rm-features--periometer .rm-features__close .cross:after {
background-color: #f9a51a; }
.rm-features.js--show-features {
background: #000000;
background: rgba(0, 0, 0, 0.8);
display: block;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999; }
@media (min-width: 48rem) {
.rm-features.js--show-features {
z-index: 101; } }
.rm-features__options {
background: #FFFFFF;
position: relative;
width: 70px;
height: 100%;
z-index: 100; }
@media (min-width: 48rem) {
.rm-features__options {
padding: 0 16px;
padding: 0 1rem;
width: 113px; } }
.rm-features__list {
position: absolute;
top: 50%;
left: 8px;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
width: 100%;
overflow: visible;
padding: 0 18px 0 8px;
padding: 0 1.125rem 0 0.5rem; }
@media (min-width: 48rem) {
.rm-features__list {
left: 0;
padding: 0 20px;
padding: 0 1.25rem; } }
@media (min-width: 75rem) {
.rm-features__list {
margin-top: 64px;
margin-top: 4rem; } }
@media (min-width: 90rem) {
.rm-features__list {
margin-top: 80px;
margin-top: 5rem; } }
.rm-features__item {
margin-bottom: 18px;
margin-bottom: 1.125rem;
position: relative; }
@media (min-width: 48rem) {
.rm-features__item {
margin-bottom: 32px;
margin-bottom: 2rem; } }
.rm-features__item:last-child {
margin-bottom: 0; }
.rm-features__item:before {
display: none;
content: "";
height: 0;
width: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
position: absolute;
right: -20px;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
.rm-features__link {
display: block; }
.rm-features__link:hover {
text-decoration: none;
-webkit-animation: heartBeat 2s infinite;
animation: heartBeat 2s infinite; }
.rm-features__link.js--feature-active {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1); }
.rm-features__link::before {
font-size: 40px;
font-size: 2.5rem; }
@media (min-width: 48rem) {
.rm-features__link::before {
font-size: 72px;
font-size: 4.5rem; } }
.rm-features__link span {
display: none; }
.rm-features__link--filters:before {
color: #01E2C2; }
.rm-features__link--calorie:before {
color: #ff00b4; }
.rm-features__link--periometer {
background: url("../images/restaurant-menu/peri-icon.png") no-repeat top center;
background-size: contain;
height: 38px;
width: 38px; }
@media (min-width: 48rem) {
.rm-features__link--periometer {
height: 72px;
width: 72px; } }
.rm-features__link--periometer:hover, .rm-features__link--periometer.js--feature-active {
background: url("../images/restaurant-menu/peri-icon-active.png") no-repeat top center;
background-size: contain; }
.rm-feature {
padding-left: 70px;
padding-left: 4.375rem;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 80; }
@media (min-width: 48rem) {
.rm-feature {
padding-left: 113px;
padding-left: 7.0625rem; } }
.js--feature-active {
display: block; }
.rm-features__close {
position: absolute;
display: block;
bottom: 35px;
width: 100%;
left: 0; }
@media (min-width: 48rem) {
.rm-features__close {
bottom: 8%; } }
.rm-features__close .cross {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
.rm-features__close .cross:before, .rm-features__close .cross:after {
content: '';
position: absolute;
width: 18px;
height: 4px;
background-color: #ce0a24;
-webkit-border-radius: 2px;
border-radius: 2px;
top: 6px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease; }
.rm-features__close .cross:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
left: 0px; }
.rm-features__close .cross:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 2px; }
.rm-features__close .cross:hover:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 0px; }
.rm-features__close .cross:hover:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
right: 2px; }
/**
* Dietary Information Component.
*/
.dietary-info {
background: #FFFFFF;
border-top: 1px solid #0564a3;
color: #000000;
display: none;
position: absolute;
left: 0;
text-align: left;
width: 100%;
z-index: 900;
max-width: 950px; }
.dietary-info a:hover {
cursor: pointer;
text-decoration: none; }
.dietary-info::before {
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0564a3;
width: 0;
height: 0;
position: absolute;
top: -10px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
.dietary-info.add-section .dietary-info__sauces {
display: none; }
.dietary-info.js--show {
display: block; }
.dietary-info__sauces {
margin: 15px 10px;
margin: 0.9375rem 0.625rem;
display: none; }
.dietary-info__sauce {
display: inline-block;
width: 33.33333333333%;
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
min-width: 110px;
height: 45px;
line-height: 45px;
-webkit-box-shadow: 0 0 1px #e0e0e0;
box-shadow: 0 0 1px #e0e0e0;
text-align: center;
font-size: 16px;
font-size: 1rem;
font-family: nandos, Helvetica, Arial, Geneva, sans-serif;
font-weight: normal;
float: left; }
.dietary-info__sauce.plain {
color: #5A642D; }
.dietary-info__sauce.plain:hover {
background: #5A642D;
color: #FFFFFF; }
.dietary-info__sauce.mango {
color: #fab747; }
.dietary-info__sauce.mango:hover {
background: #fab747;
color: #FFFFFF; }
.dietary-info__sauce.lemon {
color: #96c31e; }
.dietary-info__sauce.lemon:hover {
background: #96c31e;
color: #FFFFFF; }
.dietary-info__sauce.medium {
color: #f9a51a; }
.dietary-info__sauce.medium:hover {
background: #f9a51a;
color: #FFFFFF; }
.dietary-info__sauce.hot {
color: #ce0a24; }
.dietary-info__sauce.hot:hover {
background: #ce0a24;
color: #FFFFFF; }
.dietary-info__sauce.extra-hot {
color: #452412; }
.dietary-info__sauce.extra-hot:hover {
background: #452412;
color: #FFFFFF; }
.dietary-info__extra-info {
color: white;
background-color: #0564a3;
width: 90%;
text-align: center;
position: relative;
margin-top: 10px;
margin-top: 0.625rem;
padding: 5px 10px;
padding: 0.3125rem 0.625rem; }
.dietary-info__extra-info:before {
content: "";
display: block;
border: solid;
border-color: #0564a3 transparent;
border-width: 0 6px 6px 6px;
position: absolute;
left: 5px;
top: -6px; }
.tabs {
margin: 15px 10px;
margin: 0.9375rem 0.625rem; }
.tab {
display: inline-block;
width: 50%;
height: 35px;
line-height: 35px;
text-align: center;
float: left;
font-size: 16px;
font-size: 1rem;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif; }
.tab a {
color: black;
width: 100%;
text-align: center;
display: block; }
.tab--active a {
color: #FFFFFF;
text-decoration: none; }
.tab__title {
font-size: 18px;
font-size: 1.125rem;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: bold; }
.tab-content__title {
font-size: 18px;
font-size: 1.125rem;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
font-weight: bold; }
.tab-content__panel {
display: none; }
.tab-content__panel--active {
display: block; }
.tab-content__panel .tab-content__panel.tab-content__panel--active {
padding: 25px;
padding: 1.5625rem; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing {
margin: 10px 0;
margin: 0.625rem 0;
display: inline-block;
width: -webkit-calc(50% - 2px);
width: calc(50% - 2px);
vertical-align: top; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing--wide {
width: 100%; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__copy {
display: inline-block;
width: -webkit-calc(100% - 25px);
width: calc(100% - 25px);
font-weight: normal; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item {
margin: 10px 0;
margin: 0.625rem 0; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .icon, .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .blog-post__social-link > a:before, .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .add-to-cal,
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .show-information {
width: 25px;
display: inline-block;
vertical-align: top; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .icon--info, .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .show-information {
color: #00788c; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .icon--info:hover:before, .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .show-information:hover:before {
content: "\e90e";
border: none;
bottom: auto;
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
left: auto; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .icon--info:hover:after, .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .show-information:hover:after {
content: none; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .icon--cross, .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .calorie-counter__close {
color: #FF1C4A; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .icon--tick {
color: #73B455; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .tooltip--info--open:before,
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .icon--info.tooltip--info--open:hover:before,
.tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .tooltip--info--open.show-information:hover:before {
content: "\e910"; }
.tab-content__panel .tab-content__panel.tab-content__panel--active .tab-content__panel--contains {
border-top: 1px solid #e0e0e0;
padding-top: 20px;
padding-top: 1.25rem; }
.tab-content__panel .tab-content__panel[data-tab="nutrition"] > .info-listing {
width: 100%; }
.tab-content__panel .tab-content__panel[data-tab="nutrition"] .info-listing__copy {
width: 50%; }
.dietary-info--with-chicken > .tabs {
width: 100%;
margin: 0;
border-bottom: 1px solid #0564a3; }
.dietary-info--with-chicken > .tabs .tab {
height: 45px;
line-height: 45px;
font-weight: bold;
border: none; }
.dietary-info--with-chicken > .tabs .tab--active {
background-color: #0564a3;
color: white; }
.dietary-info--plain .dietary-info__sauce.plain {
background-color: #5A642D;
color: white;
text-decoration: none; }
.dietary-info--plain .tab {
border: 1px solid #5A642D; }
.dietary-info--plain .tab--active {
background-color: #5A642D; }
@media (min-width: 950px) {
.dietary-info--plain .tab {
border: 2px solid #5A642D; }
.dietary-info--plain .dietary-info__sauces {
border-bottom: 2px solid #5A642D; } }
.dietary-info--mango .dietary-info__sauce.mango {
background-color: #fab747;
color: white;
text-decoration: none; }
.dietary-info--mango .tab {
border: 1px solid #fab747; }
.dietary-info--mango .tab--active {
background-color: #fab747; }
@media (min-width: 950px) {
.dietary-info--mango .tab {
border: 2px solid #fab747; }
.dietary-info--mango .dietary-info__sauces {
border-bottom: 2px solid #fab747; } }
.dietary-info--lemon .dietary-info__sauce.lemon {
background-color: #96c31e;
color: white;
text-decoration: none; }
.dietary-info--lemon .tab {
border: 1px solid #96c31e; }
.dietary-info--lemon .tab--active {
background-color: #96c31e; }
@media (min-width: 950px) {
.dietary-info--lemon .tab {
border: 2px solid #96c31e; }
.dietary-info--lemon .dietary-info__sauces {
border-bottom: 2px solid #96c31e; } }
.dietary-info--medium .dietary-info__sauce.medium {
background-color: #f9a51a;
color: white;
text-decoration: none; }
.dietary-info--medium .tab {
border: 1px solid #f9a51a; }
.dietary-info--medium .tab--active {
background-color: #f9a51a; }
@media (min-width: 950px) {
.dietary-info--medium .tab {
border: 2px solid #f9a51a; }
.dietary-info--medium .dietary-info__sauces {
border-bottom: 2px solid #f9a51a; } }
.dietary-info--hot .dietary-info__sauce.hot {
background-color: #ce0a24;
color: white;
text-decoration: none; }
.dietary-info--hot .tab {
border: 1px solid #ce0a24; }
.dietary-info--hot .tab--active {
background-color: #ce0a24; }
@media (min-width: 950px) {
.dietary-info--hot .tab {
border: 2px solid #ce0a24; }
.dietary-info--hot .dietary-info__sauces {
border-bottom: 2px solid #ce0a24; } }
.dietary-info--extra-hot .dietary-info__sauce.extra-hot {
background-color: #452412;
color: white;
text-decoration: none; }
.dietary-info--extra-hot .tab {
border: 1px solid #452412; }
.dietary-info--extra-hot .tab--active {
background-color: #452412; }
@media (min-width: 950px) {
.dietary-info--extra-hot .tab {
border: 2px solid #452412; }
.dietary-info--extra-hot .dietary-info__sauces {
border-bottom: 2px solid #452412; } }
@media (min-width: 950px) {
.dietary-info {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%); }
.dietary-info__sauces {
margin: 0; }
.dietary-info__sauce {
width: 158.3333px; }
.dietary-info .tabs {
margin: 30px 25px;
margin: 1.875rem 1.5625rem; }
.dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active {
padding: 0;
margin-bottom: 10px;
margin-bottom: 0.625rem; }
.dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .icon, .dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .blog-post__social-link > a:before, .dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .add-to-cal,
.dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__item .show-information {
width: 40px; }
.dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active .info-listing__copy {
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px); }
.dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active .tab-content__panel--suitable {
display: inline-block;
width: 33%;
padding-left: 35px;
padding-left: 2.1875rem; }
.dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active .tab-content__panel--contains {
display: inline-block;
width: 66%;
border-top: none;
border-left: 1px solid #e0e0e0;
padding-left: 50px;
padding-left: 3.125rem; }
.dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active[data-tab="nutrition"] {
padding: 35px;
padding: 2.1875rem; }
.dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active[data-tab="nutrition"] .info-listing__item {
width: 49%;
width: -webkit-calc(50% - 2px);
width: calc(50% - 2px);
display: inline-block; }
.dietary-info .tab-content__panel .tab-content__panel.tab-content__panel--active[data-tab="nutrition"] .info-listing__copy {
width: 50%; }
.dietary-info--with-chicken > .tabs {
width: 100%;
margin: 0;
border-bottom: 1px solid #0564a3; }
.dietary-info--with-chicken > .tabs .tab {
height: 70px;
line-height: 70px;
font-size: 22px;
font-size: 1.375rem;
font-weight: bold;
border: none; }
.dietary-info--with-chicken > .tabs .tab--active {
background-color: #0564a3;
color: white; } }
.info-listing-extra-info {
text-align: center; }
.js--show-sauces .dietary-info__sauces {
display: block; }
.help-listing {
text-align: center; }
.help-listing .anchor {
display: block;
margin-top: -280px;
padding-top: 260px; }
@media (min-width: 48rem) {
.help-listing .anchor {
margin-top: -350px;
padding-top: 300px; } }
@media (min-width: 64rem) {
.help-listing .anchor {
margin-top: -340px;
padding-top: 420px; } }
.help-listing .link {
color: #ff2350; }
.help-listing .link:hover {
text-decoration: underline; }
.help-listing__title:first-letter {
text-transform: uppercase; }
.help-listing__question {
margin-bottom: 12px;
margin-bottom: 0.75rem; }
@media (min-width: 64rem) {
.help-listing__question {
margin-bottom: 20px;
margin-bottom: 1.25rem; } }
.help-listing__question:last-child {
margin-bottom: 0; }
.help-listing--buckets {
padding: 70px 0 30px 0;
padding: 4.375rem 0 1.875rem 0;
margin: 0 auto;
max-width: 280px; }
@media (min-width: 48rem) {
.help-listing--buckets {
padding: 140px 0 60px 0;
padding: 8.75rem 0 3.75rem 0;
max-width: 480px; } }
@media (min-width: 64rem) {
.help-listing--buckets {
padding: 180px 0 120px 0;
padding: 11.25rem 0 7.5rem 0;
max-width: 580px; } }
@media (min-width: 75rem) {
.help-listing--buckets {
padding: 180px 0 120px 0;
padding: 11.25rem 0 7.5rem 0;
max-width: 620px; } }
@media (min-width: 112.5rem) {
.help-listing--buckets {
padding: 260px 0 120px 0;
padding: 16.25rem 0 7.5rem 0; } }
.help-listing--bucket {
margin-bottom: 30px;
margin-bottom: 1.875rem; }
@media (min-width: 48rem) {
.help-listing--bucket {
margin-bottom: 60px;
margin-bottom: 3.75rem; } }
@media (min-width: 64rem) {
.help-listing--bucket {
margin-bottom: 90px;
margin-bottom: 5.625rem; } }
.help-listing--bucket .help-listing__title {
margin-bottom: 16px;
margin-bottom: 1rem; }
@media (min-width: 48rem) {
.help-listing--bucket .help-listing__title {
margin-bottom: 22 px;
margin-bottom: 22 px; } }
@media (min-width: 64rem) {
.help-listing--bucket .help-listing__title {
margin-bottom: 30px;
margin-bottom: 1.875rem; } }
@media (min-width: 64rem) {
.help-qa:last-child .help-no-answer {
padding-bottom: 106px;
padding-bottom: 6.625rem; } }
.help-qa__title {
padding: 120px 0 114px 0;
padding: 7.5rem 0 7.125rem 0;
background: #00788c;
color: #FFFFFF;
position: relative; }
.help-qa__title:nth-child(4n + 1) {
background: #00788c url("../images/help-center/help-banner-1.jpg") no-repeat top center;
background-size: cover; }
.help-qa__title:nth-child(4n + 2) {
background: #00788c url("../images/help-center/help-banner-2.jpg") no-repeat top center;
background-size: cover; }
.help-qa__title:nth-child(4n + 3) {
background: #00788c url("../images/help-center/help-banner-3.jpg") no-repeat top center;
background-size: cover; }
.help-qa__title:nth-child(4n + 4) {
background: #00788c url("../images/help-center/help-banner-4.jpg") no-repeat top center;
background-size: cover; }
.help-qa__title:first-letter {
text-transform: uppercase; }
@media (min-width: 64rem) {
.help-qa__title {
padding: 120px 0 114px 0;
padding: 7.5rem 0 7.125rem 0; } }
.help-qa__title:before {
content: "";
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #00788c;
bottom: -20px; }
.help-qa__answers {
padding: 80px 0 53px 0;
padding: 5rem 0 3.3125rem 0;
margin: 0 auto;
max-width: 268px; }
@media (min-width: 48rem) {
.help-qa__answers {
max-width: 400px; } }
@media (min-width: 64rem) {
.help-qa__answers {
padding: 100px 0;
padding: 6.25rem 0;
max-width: 500px; } }
@media (min-width: 75rem) {
.help-qa__answers {
max-width: 600px; } }
.help-qa__answer {
margin: 0 0 30px 0;
margin: 0 0 1.875rem 0; }
@media (min-width: 48rem) {
.help-qa__answer {
margin: 0 0 48px 0;
margin: 0 0 3rem 0; } }
@media (min-width: 64rem) {
.help-qa__answer {
margin: 0 0 96px 0;
margin: 0 0 6rem 0; } }
.help-qa__answer:last-child {
margin-bottom: 0; }
.help-qa__question {
margin-bottom: 16px;
margin-bottom: 1rem; }
.help-qa__question:first-letter {
text-transform: uppercase; }
@media (min-width: 48rem) {
.help-qa__question {
font-size: 32px;
font-size: 2rem;
line-height: 42px;
line-height: 2.625rem;
margin-bottom: 16px;
margin-bottom: 1rem; } }
@media (min-width: 64rem) {
.help-qa__question {
font-size: 42px;
font-size: 2.625rem;
line-height: 52px;
line-height: 3.25rem;
margin-bottom: 22px;
margin-bottom: 1.375rem; } }
@media (min-width: 75rem) {
.help-qa__question {
font-size: 48px;
font-size: 3rem;
line-height: 58px;
line-height: 3.625rem;
margin-bottom: 28px;
margin-bottom: 1.75rem; } }
@media (min-width: 64rem) {
.help-qa__copy {
font-size: 22px;
font-size: 1.375rem;
line-height: 35px;
line-height: 2.1875rem; } }
.help-no-answer {
padding: 70px 0 76px 0;
padding: 4.375rem 0 4.75rem 0;
background: #e0e0e0; }
@media (min-width: 64rem) {
.help-no-answer {
padding: 70px 0 76px 0;
padding: 4.375rem 0 4.75rem 0; } }
@media (min-width: 64rem) {
.help-no-answer__copy {
font-size: 22px;
font-size: 1.375rem;
line-height: 35px;
line-height: 2.1875rem; } }
.help-no-answer__copy span {
display: block; }
.help-no-answer__copy a {
color: #ff2350; }
/**
* Single page
*/
.answer {
padding: 280px 0 0 0;
padding: 17.5rem 0 0 0;
text-align: center;
width: 100%; }
.answer__inner {
max-width: 280px;
margin: 0 auto 0; }
@media (min-width: 48rem) {
.answer__inner {
max-width: 420px; } }
@media (min-width: 64rem) {
.answer__inner {
max-width: 520px; } }
@media (min-width: 75rem) {
.answer__inner {
max-width: 620px; } }
.answer__title {
font-family: nandos, Helvetica, Arial, Geneva, sans-serif;
font-size: 48px;
font-size: 3rem;
line-height: 58px;
line-height: 3.625rem;
margin-bottom: 22px;
margin-bottom: 1.375rem; }
.answer__copy {
font-size: 22px;
font-size: 1.375rem;
line-height: 35px;
line-height: 2.1875rem;
margin-bottom: 112px;
margin-bottom: 7rem; }
.answer__copy p {
margin-bottom: 24px;
margin-bottom: 1.5rem; }
.answer a {
color: #ff2350; }
.answer-none {
padding: 120px 0 230px 0;
padding: 7.5rem 0 14.375rem 0;
background: #e0e0e0; }
.answer-none__copy {
font-size: 22px;
font-size: 1.375rem;
line-height: 35px;
line-height: 2.1875rem; }
.answer-none__copy span {
display: block; }
.nandoscard-dashboard {
width: 100%; }
.nandoscard-dashboard__inner {
padding: 0 10px;
padding: 0 0.625rem;
margin-bottom: 20px;
margin-bottom: 1.25rem; }
@media (min-width: 48rem) {
.nandoscard-dashboard__inner {
padding: 0 40px;
padding: 0 2.5rem;
margin-bottom: 40px;
margin-bottom: 2.5rem; } }
@media (min-width: 75rem) {
.nandoscard-dashboard__inner {
padding: 0 75px;
padding: 0 4.6875rem;
margin-bottom: 75px;
margin-bottom: 4.6875rem; } }
@media (min-width: 48rem) {
.nandoscard-dashboard__inner:last-child {
margin: 0; } }
.nandoscard-dashboard__row {
padding: 60px 0 40px;
padding: 3.75rem 0 2.5rem;
margin-bottom: 40px;
margin-bottom: 2.5rem;
color: #FFFFFF;
background-color: #000000; }
@media (min-width: 48rem) {
.nandoscard-dashboard__row {
padding: 60px 0;
padding: 3.75rem 0;
margin-bottom: 60px;
margin-bottom: 3.75rem; } }
.nandoscard-dashboard__row:first-child {
padding: 140px 0 0;
padding: 8.75rem 0 0; }
@media (min-width: 48rem) {
.nandoscard-dashboard__row:first-child {
padding: 100px 0 0;
padding: 6.25rem 0 0; } }
.nandoscard-dashboard__row:first-child:before {
content: "";
height: 100px;
width: 100%;
background-color: #dcdcdc;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
transform: skewY(-3deg);
position: absolute;
top: 0;
z-index: 10;
display: block; }
.nandoscard-dashboard__row--collapsed {
padding: 0; }
.nandoscard-dashboard__item {
padding: 40px 15px;
padding: 2.5rem 0.9375rem;
text-align: center; }
@media (min-width: 48rem) {
.nandoscard-dashboard__item {
padding: 60px 30px;
padding: 3.75rem 1.875rem; } }
@media (min-width: 112.5rem) {
.nandoscard-dashboard__item {
padding: 0 60px 80px;
padding: 0 3.75rem 5rem; } }
.nandoscard-dashboard__item:first-child, .nandoscard-dashboard__item.first {
padding-top: 0;
border-bottom: 1px solid #dcdcdc;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 48rem) {
.nandoscard-dashboard__item:first-child, .nandoscard-dashboard__item.first {
padding: 60px 30px;
padding: 3.75rem 1.875rem; } }
@media (min-width: 64rem) {
.nandoscard-dashboard__item:first-child, .nandoscard-dashboard__item.first {
border-bottom: 0;
border-right: 1px solid #dcdcdc;
border-right: 1px solid rgba(255, 255, 255, 0.1); } }
.nandoscard-dashboard__rewards {
padding: 40px 20px;
padding: 2.5rem 1.25rem; }
@media (min-width: 48rem) {
.nandoscard-dashboard__rewards {
padding: 60px 30px;
padding: 3.75rem 1.875rem; } }
@media (min-width: 112.5rem) {
.nandoscard-dashboard__rewards {
padding: 60px;
padding: 3.75rem; } }
.your-chillies .red {
color: #FF1C4A; }
.your-chillies .orange {
color: #ff8200; }
.your-chillies .green {
color: #73B455; }
.your-chillies__title {
font-size: 60px;
font-size: 3.75rem;
margin-bottom: 30px;
margin-bottom: 1.875rem;
line-height: 1; }
.your-chillies__copy {
font-size: 22px;
font-size: 1.375rem;
margin-bottom: 40px;
margin-bottom: 2.5rem; }
@media (min-width: 48rem) {
.your-chillies__copy {
margin-bottom: 70px;
margin-bottom: 4.375rem; } }
.your-chillies__wheel-wrapper {
padding: 4px 0;
padding: 0.25rem 0;
margin: 0 auto;
margin: 0 auto;
display: block;
width: 270px;
height: 270px;
border: 1px solid #dcdcdc;
border: 1px solid rgba(255, 255, 255, 0.1);
-webkit-border-radius: 100%;
border-radius: 100%;
position: relative; }
@media (min-width: 48rem) {
.your-chillies__wheel-wrapper {
width: 372px;
height: 372px; } }
.your-chillies__wheel-wrapper:after {
display: block;
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
background-color: transparent;
-webkit-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: 0px 25px 10px rgba(255, 255, 255, 0.05);
box-shadow: 0px 25px 10px rgba(255, 255, 255, 0.05); }
@media (min-width: 64rem) {
.your-chillies__wheel-wrapper:after {
-webkit-animation: shadow-bounce 0.8s infinite;
animation: shadow-bounce 0.8s infinite; } }
.your-chillies__wheel {
margin: 0 auto;
margin: 0 auto;
position: relative;
width: 266px;
height: 266px;
cursor: pointer;
background: url("../images/chilli-wheel/chilli-bg.png") no-repeat top center;
background-size: 244px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel {
width: 357px;
height: 357px;
background-size: 320px auto; } }
.your-chillies__wheel-item {
display: block;
position: absolute;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); }
.your-chillies__wheel-item--show {
-webkit-animation: chilliPop 0.2s 1 forwards;
animation: chilliPop 0.2s 1 forwards; }
.your-chillies__wheel-item--1 {
display: block;
top: 0px;
background: url("../images/chilli-wheel/chilli-1.png") no-repeat center center;
left: 114px;
width: 53px;
height: 102px;
background-size: 44px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--1 {
top: -8px;
left: 160px;
width: 62px;
height: 142px;
background-size: 58px auto; } }
.your-chillies__wheel-item--2 {
display: block;
top: 26px;
left: 153px;
width: 75px;
height: 85px;
background: url("../images/chilli-wheel/chilli-2.png") no-repeat center center;
background-size: 64px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--2 {
top: 39px;
left: 206px;
width: 95px;
height: 107px;
background-size: 85px auto; } }
.your-chillies__wheel-item--3 {
display: block;
top: 81px;
left: 162px;
width: 108px;
height: 56px;
background: url("../images/chilli-wheel/chilli-3.png") no-repeat center center;
background-size: 91px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--3 {
top: 110px;
left: 222px;
width: 125px;
height: 67px;
background-size: 115px auto; } }
.your-chillies__wheel-item--4 {
display: block;
top: 119px;
left: 167px;
width: 92px;
height: 59px;
background: url("../images/chilli-wheel/chilli-4.png") no-repeat center center;
background-size: 88px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--4 {
top: 165px;
left: 221px;
width: 120px;
height: 59px;
background-size: 110px auto; } }
.your-chillies__wheel-item--5 {
display: block;
top: 154px;
left: 151px;
width: 68px;
height: 85px;
background: url("../images/chilli-wheel/chilli-5.png") no-repeat center center;
background-size: 62px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--5 {
top: 199px;
left: 202px;
width: 86px;
height: 108px;
background-size: 78px auto; } }
.your-chillies__wheel-item--6 {
display: block;
top: 158px;
left: 115px;
width: 50px;
height: 110px;
background: url("../images/chilli-wheel/chilli-6.png") no-repeat center center;
background-size: 43px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--6 {
top: 204px;
left: 157px;
width: 64px;
height: 146px;
background-size: 58px auto; } }
.your-chillies__wheel-item--7 {
display: block;
top: 148px;
left: 45px;
width: 82px;
height: 94px;
background: url("../images/chilli-wheel/chilli-7.png") no-repeat center center;
background-size: 69px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--7 {
top: 198px;
left: 66px;
width: 101px;
height: 116px;
background-size: 92px auto; } }
.your-chillies__wheel-item--8 {
display: block;
top: 122px;
left: 4px;
width: 106px;
height: 64px;
background: url("../images/chilli-wheel/chilli-8.png") no-repeat center center;
background-size: 92px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--8 {
top: 163px;
left: 10px;
width: 135px;
height: 81px;
background-size: 126px auto; } }
.your-chillies__wheel-item--9 {
display: block;
top: 79px;
left: 13px;
width: 96px;
height: 52px;
background: url("../images/chilli-wheel/chilli-9.png") no-repeat center center;
background-size: 89px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--9 {
top: 109px;
left: 33px;
width: 116px;
height: 61px;
background-size: 106px auto; } }
.your-chillies__wheel-item--10 {
display: block;
top: 12px;
left: 49px;
width: 82px;
height: 94px;
background: url("../images/chilli-wheel/chilli-10.png") no-repeat center center;
background-size: 69px auto; }
@media (min-width: 48rem) {
.your-chillies__wheel-item--10 {
top: 23px;
left: 75px;
width: 99px;
height: 115px;
background-size: 89px auto; } }
.your-chillies__infopanel {
display: none;
position: absolute;
right: 0;
top: -10px;
bottom: 0;
left: 0;
margin: auto;
width: 256px;
height: 256px;
color: #FFFFFF;
text-align: center;
overflow: hidden;
-webkit-border-radius: 100%;
border-radius: 100%;
background: url("../images/chilli-wheel/chilli-info-panel.png") no-repeat center center #000000;
background: url("../images/chilli-wheel/chilli-info-panel.png") no-repeat center center rgba(0, 0, 0, 0.9);
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7); }
@media (min-width: 48rem) {
.your-chillies__infopanel {
right: -10%;
top: 0;
left: auto;
bottom: auto;
width: 260px;
height: 260px;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } }
@media (min-width: 75rem) {
.your-chillies__infopanel {
right: -22%; } }
@media (min-width: 90rem) {
.your-chillies__infopanel {
right: -40%; } }
@media (min-width: 112.5rem) {
.your-chillies__infopanel {
right: -45%; } }
.your-chillies__wheel:hover .your-chillies__infopanel.visible {
display: block; }
.your-chillies__infopanel-copy {
padding: 40px 0;
padding: 2.5rem 0;
position: absolute;
width: 234px;
height: 234px;
top: 11px;
left: 11px;
-webkit-border-radius: 100%;
border-radius: 100%; }
@media (min-width: 48rem) {
.your-chillies__infopanel-copy {
top: 10px;
left: 10px; } }
.your-chillies__infopanel-row {
margin-bottom: 10px;
margin-bottom: 0.625rem;
display: block; }
.your-chillies__info-panel-count {
font-size: 90px;
font-size: 5.625rem;
line-height: 0.8;
margin: 0; }
.your-chillies__info-panel-reward-type {
font-size: 22px;
font-size: 1.375rem;
text-transform: uppercase; }
@keyframes chilliPop {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes chilliPop {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
.your-lifetime-stats {
display: table;
width: 100%; }
.your-lifetime-stats__item {
padding: 20px;
padding: 1.25rem;
color: #FFFFFF;
text-align: center; }
@media (min-width: 56.25rem) {
.your-lifetime-stats__item {
display: table-cell;
height: 365px;
min-height: 365px;
width: 33.3%;
vertical-align: middle; } }
.your-lifetime-stats__item--chillies, .your-lifetime-stats__item--restaurants {
background: url("../images/layout/lifetime-stats-dark.jpg") no-repeat center bottom #000000; }
.your-lifetime-stats__item--chillies:hover, .your-lifetime-stats__item--restaurants:hover {
background: url("../images/dashboard/visited-bg-hover.jpg") no-repeat 0 0/cover; }
.your-lifetime-stats__item--wheels {
background: url("../images/layout/lifetime-stats-light.png") no-repeat center bottom #121212; }
.your-lifetime-stats__item--wheels:hover {
background: url("../images/dashboard/wheel-bg-hover.jpg") no-repeat 0 0/cover; }
.your-lifetime-stats__item-inner {
display: table;
max-width: 300px;
width: 100%;
margin: 0 auto; }
.your-lifetime-stats__count {
font-size: 94px;
font-size: 5.875rem;
padding-right: 5px;
padding-right: 0.3125rem;
display: table-cell;
vertical-align: middle;
color: #c51221; }
.your-lifetime-stats__content {
display: table-cell;
vertical-align: top; }
.your-lifetime-stats__title {
font-size: 18px;
font-size: 1.125rem;
text-align: left; }
.your-lifetime-stats__main-title {
font-size: 28px;
font-size: 1.75rem;
text-transform: uppercase;
text-align: left; }
.your-lifetime-stats__markers {
margin-bottom: 8px;
margin-bottom: 0.5rem;
display: block;
overflow: hidden; }
.your-lifetime-stats__markers:before, .your-lifetime-stats__markers:after {
display: table;
content: ""; }
.your-lifetime-stats__markers:after {
clear: both; }
.your-lifetime-stats__marker {
margin: 2px;
margin: 0.125rem;
display: inline-block;
float: left;
background: url("../images/layout/lifetime-stats-icon-sprite.png") no-repeat 0 0; }
@media (min-width: 64rem) {
.your-lifetime-stats__marker--split {
clear: left; } }
.your-lifetime-stats__marker--chillies {
width: 14px;
height: 16px;
background-position: 0 0;
background-size: auto 100%; }
.your-lifetime-stats__marker--wheels {
width: 17px;
height: 17px;
background-position: -18px 0;
background-size: auto 100%; }
.your-lifetime-stats__marker--restaurants {
margin: 1px;
margin: 0.0625rem;
width: 12px;
height: 10px;
background-position: -36px 0;
background-size: auto 160%; }
.your-rewards {
position: relative; }
.your-rewards__title {
font-size: 60px;
font-size: 3.75rem;
margin-bottom: 30px;
margin-bottom: 1.875rem;
line-height: 1; }
.your-rewards__copy {
font-size: 22px;
font-size: 1.375rem;
margin-bottom: 60px;
margin-bottom: 3.75rem; }
@media (min-width: 64rem) {
.your-rewards__copy {
margin-bottom: 125px;
margin-bottom: 7.8125rem; } }
.your-rewards__circle {
margin: 0 30px 60px;
margin: 0 1.875rem 3.75rem;
display: inline-block;
position: relative;
height: 100px;
width: 100px;
cursor: pointer; }
@media (min-width: 64rem) {
.your-rewards__circle {
margin: 0 30px;
margin: 0 1.875rem; } }
.your-rewards__circle:after {
display: block;
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
background-color: transparent;
-webkit-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: 0px 25px 10px rgba(255, 255, 255, 0.05);
box-shadow: 0px 25px 10px rgba(255, 255, 255, 0.05); }
@media (min-width: 64rem) {
.your-rewards__circle:after {
-webkit-animation: shadow-bounce 0.8s infinite;
animation: shadow-bounce 0.8s infinite; } }
.your-rewards__circle-inner {
padding: 12px 0;
padding: 0.75rem 0;
display: inline-block;
position: relative;
height: 100px;
width: 100px;
text-align: center;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 5px solid;
-webkit-transition: position 0.3s ease-in;
transition: position 0.3s ease-in; }
@media (min-width: 64rem) {
.your-rewards__circle--bounce {
-webkit-animation: reward-bounce 0.8s infinite;
animation: reward-bounce 0.8s infinite; } }
.your-rewards__circle-count {
font-size: 48px;
font-size: 3rem;
display: block;
line-height: 1; }
.your-rewards__circle-count-label {
text-transform: capitalize; }
.your-rewards__circle-label {
font-size: 15px;
font-size: 0.9375rem;
display: block;
text-transform: uppercase; }
.your-rewards__green {
border-color: #96c31e;
color: #96c31e; }
.your-rewards__green:hover .your-rewards__circle-inner, .your-rewards__green.circle-active .your-rewards__circle-inner {
color: #FFFFFF;
border-color: #96c31e;
background-color: #96c31e; }
.your-rewards__orange {
border-color: #ff6900;
color: #ff6900; }
@media (min-width: 64rem) {
.your-rewards__orange {
top: -40px; } }
@media (min-width: 112.5rem) {
.your-rewards__orange {
top: 80px; } }
.your-rewards__orange:hover .your-rewards__circle-inner, .your-rewards__orange.circle-active .your-rewards__circle-inner {
color: #FFFFFF;
border-color: #ff6900;
background-color: #ff6900; }
.your-rewards__orange .your-rewards__infopanel:after {
border-top-color: #ff6900; }
.your-rewards__red {
border-color: #c51221;
color: #c51221; }
@media (min-width: 64rem) {
.your-rewards__red {
top: 20px; } }
@media (min-width: 112.5rem) {
.your-rewards__red {
top: auto; } }
.your-rewards__red:hover .your-rewards__circle-inner, .your-rewards__red.circle-active .your-rewards__circle-inner {
color: #FFFFFF;
border-color: #c51221;
background-color: #c51221; }
.your-rewards__red .your-rewards__infopanel:after {
border-top-color: #c51221; }
.your-rewards__sizeL {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5); }
.your-rewards__sizeXL {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2); }
.your-rewards__infopanel {
margin-left: -110px;
margin-left: -6.875rem;
padding: 15px;
padding: 0.9375rem;
display: none;
position: absolute;
top: -110%;
left: 50%;
width: 220px;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
text-align: center;
z-index: 1000;
background-color: currentColor; }
.your-rewards__infopanel:after {
margin-left: -10px;
margin-left: -0.625rem;
display: block;
content: "";
position: absolute;
top: 98%;
left: 50%;
border: 10px solid currentColor;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent; }
.your-rewards__infopanel-title {
font-size: 22px;
font-size: 1.375rem;
margin-bottom: 5px;
margin-bottom: 0.3125rem;
font-family: Din Next W01, Helvetica, Geneva, Arial, sans-serif;
color: #FFFFFF;
line-height: 1;
text-transform: uppercase; }
.your-rewards__infopanel-copy {
font-size: 14px;
font-size: 0.875rem;
color: #FFFFFF;
line-height: 1.2; }
@media (min-width: 64rem) {
.your-rewards__circle:hover .your-rewards__infopanel, .your-rewards__circle.circle-active:hover .your-rewards__infopanel, .your-rewards__circle.circle-active .your-rewards__infopanel {
display: block; } }
@media (max-width: 64rem) {
.your-rewards__circle.tooltip-visible .your-rewards__infopanel, .your-rewards__circle.tooltip-visible.circle-active .your-rewards__infopanel {
display: block; } }
.your-rewards__circle--scale-1-2 + .your-rewards__infopanel {
top: -115%; }
.your-rewards__circle--scale-1-3 + .your-rewards__infopanel {
top: -120%; }
.your-rewards__circle--scale-1-4 + .your-rewards__infopanel {
top: -125%; }
.your-rewards__exclusions {
clear: both;
width: 100%;
padding-top: 10px;
padding-top: 0.625rem; }
@media (min-width: 64rem) {
.your-rewards__exclusions {
padding-top: 100px;
padding-top: 6.25rem; } }
@media (min-width: 75rem) {
.your-rewards__exclusions {
padding-top: 180px;
padding-top: 11.25rem; } }
.your-rewards__exclusion {
display: none; }
.your-rewards__exclusion--display {
display: block; }
@-webkit-keyframes reward-bounce {
0% {
margin-top: 0; }
50% {
margin-top: -2px; }
100% {
margin-top: 0; } }
@keyframes reward-bounce {
0% {
margin-top: 0; }
50% {
margin-top: -2px; }
100% {
margin-top: 0; } }
@-webkit-keyframes shadow-bounce {
0% {
-webkit-transform: translateY(0) scale(0.9);
transform: translateY(0) scale(0.9); }
50% {
-webkit-transform: translateY(2px) scale(0.8);
transform: translateY(2px) scale(0.8); }
100% {
-webkit-transform: translateY(0) scale(0.9);
transform: translateY(0) scale(0.9); } }
@keyframes shadow-bounce {
0% {
-webkit-transform: translateY(0) scale(0.9);
transform: translateY(0) scale(0.9); }
50% {
-webkit-transform: translateY(2px) scale(0.8);
transform: translateY(2px) scale(0.8); }
100% {
-webkit-transform: translateY(0) scale(0.9);
transform: translateY(0) scale(0.9); } }
.your-rewards__green:hover ~ .your-rewards__exclusions .your-rewards__exclusion--green,
.your-rewards__orange:hover ~ .your-rewards__exclusions .your-rewards__exclusion--orange,
.your-rewards__red:hover ~ .your-rewards__exclusions .your-rewards__exclusion--red {
display: block; }
.recent-visits {
padding: 125px 20px;
padding: 7.8125rem 1.25rem;
min-width: 280px;
text-align: center;
background: url("../images/dashboard/recent-visits-bg.jpg") no-repeat top center/cover; }
.recent-visits__title {
font-size: 60px;
font-size: 3.75rem;
margin-bottom: 60px;
margin-bottom: 3.75rem;
text-align: center; }
.recent-visits .orange {
color: #ff6900; }
.recent-visits .green {
color: #73ff1e; }
.recent-visits .red {
color: #ce0a24; }
.table--recent-visits {
display: none;
margin: 0 auto 60px;
margin: 0 auto 3.75rem;
width: 100%;
max-width: 900px; }
@media (min-width: 64rem) {
.table--recent-visits {
display: table; } }
.table--recent-visits th {
padding: 15px 40px;
padding: 0.9375rem 2.5rem;
border: 0;
background-color: #000000;
text-transform: capitalize; }
.table--recent-visits tr,
.table--recent-visits tr:nth-child(even) {
background-color: #1a1a1a; }
.table--recent-visits td {
vertical-align: middle;
font-size: 18px;
font-size: 1.125rem;
padding: 18px 20px 18px 40px;
padding: 1.125rem 1.25rem 1.125rem 2.5rem; }
.table--recent-visits .table__col-3 {
text-align: center;
padding: 18px 20px;
padding: 1.125rem 1.25rem;
background: url("../images/dashboard/chilli-bg.png") no-repeat center center;
background-position: 50% -webkit-calc(50% - 4px);
background-position: 50% calc(50% - 4px);
background-size: 22px; }
.table--recent-visits tr:first-child td {
padding-top: 36px;
padding-top: 2.25rem;
background-position: 50% -webkit-calc(50% + 4px);
background-position: 50% calc(50% + 4px); }
.table--recent-visits tr:last-child td {
padding-bottom: 36px;
padding-bottom: 2.25rem;
background-position: 50% -webkit-calc(50% - 12px);
background-position: 50% calc(50% - 12px); }
.recent-visits__mobile {
margin-bottom: 50px;
margin-bottom: 3.125rem; }
@media (min-width: 64rem) {
.recent-visits__mobile {
display: none; } }
.recent-visits__mobile__header {
margin-top: 2px;
margin-top: 0.125rem;
text-align: left;
background-color: #1a1a1a;
padding: 10px;
padding: 0.625rem; }
.recent-visits__mobile__header span {
float: right;
color: #F701B5; }
.recent-visits__mobile__body {
display: none;
padding: 20px;
padding: 1.25rem;
background: #1a1a1a; }
.recent-visits__mobile__body__row {
text-align: left; }
.recent-visits__mobile__body__row span {
height: 32px;
display: inline-block;
vertical-align: top; }
.recent-visits__mobile__body__row__label {
min-width: 75px;
width: 20%;
text-transform: capitalize; }
.recent-visits__mobile__body__row:nth-child(2) .recent-visits__mobile__body__row__value {
background: url("../images/dashboard/chilli-bg.png") no-repeat;
background-position: 0 0;
background-size: 19px;
width: 20px;
text-align: center;
margin-left: -6px; }
.recent-visits__mobile .recent-visits__mobile__header.active {
background-color: #000000; }
.recent-visits__mobile .recent-visits__mobile__body.active {
display: block; }
.rewards-info {
background: #0c0001;
color: #FFFFFF;
overflow: hidden;
width: 100%; }
.rewards-info__inner {
padding: 80px 0 10px 0;
padding: 5rem 0 0.625rem 0; }
@media (min-width: 64rem) {
.rewards-info__inner {
padding: 80px 0 74px 0;
padding: 5rem 0 4.625rem 0; } }
.rewards-info__wheel {
width: 133px;
width: 8.3125rem;
height: 133px;
height: 8.3125rem;
margin: 0 0 40px;
margin: 0 0 2.5rem;
display: inline-block;
background: url("../images/fabric/nandoscard/nandos-chilli-rewards.png") no-repeat;
background-position: 0 -1px; }
.rewards-info--smallprint {
padding: 38px 0;
padding: 2.375rem 0;
background: #1e2323;
clear: both;
color: white;
font-style: italic;
text-align: center;
width: 100%; }
.rewards-info .rewards-info__type {
color: #73B455;
font-size: 26px;
font-size: 1.625rem;
margin: 25px 0 18px;
margin: 1.5625rem 0 1.125rem; }
.rewards-info .rewards-info__description {
font-size: 18px;
font-size: 1.125rem;
padding: 0px 30px;
padding: 0rem 1.875rem; }
.rewards-info .layout--third {
text-align: center;
padding: 50px 10px;
padding: 3.125rem 0.625rem; }
.rewards-info .layout--third:nth-child(1) {
padding: 0 10px 50px;
padding: 0 0.625rem 3.125rem; }
.rewards-info .layout--third:nth-child(2) {
border: 1px solid;
border-color: #3d3334 transparent; }
@media (min-width: 64rem) {
.rewards-info .layout--third:nth-child(2) {
padding: 0;
padding: 0;
border: 1px solid;
border-color: transparent #3d3334; } }
.rewards-info .layout--third:nth-child(2) .rewards-info__wheel {
background-position: 0px -140px; }
.rewards-info .layout--third:nth-child(2) .rewards-info__type {
color: #ff6900; }
.rewards-info .layout--third:nth-child(3) .rewards-info__wheel {
background-position: 0px -279px; }
.rewards-info .layout--third:nth-child(3) .rewards-info__type {
color: #ce0a24; }
@media (min-width: 64rem) {
.rewards-info .layout--third:nth-child(1), .rewards-info .layout--third:nth-child(2), .rewards-info .layout--third:nth-child(3) {
padding: 0px 10px;
padding: 0rem 0.625rem; } }
.pane__inner {
z-index: 99; }
.canvas-container {
margin: 0 auto;
position: absolute;
top: 0px; }
@media (min-width: 48rem) {
.canvas-container {
display: block; } }
#canvas-step-lines-all {
z-index: 10; }
.step__number {
opacity: 1; }
.the-app {
padding: 100px 0 60px 0;
padding: 6.25rem 0 3.75rem 0;
position: relative;
text-align: center;
background-image: url("../images/fabric/app-etite/app_content_background.jpg");
background-position: center 12px;
background-repeat: no-repeat;
background-size: 100%; }
@media (min-width: 30rem) {
.the-app {
background-position: center 6px; } }
@media (min-width: 48rem) {
.the-app {
background-position: center 10px; } }
@media (min-width: 56.25rem) {
.the-app {
background-position: center 4px; } }
@media (min-width: 64rem) {
.the-app {
background-position: center 4px;
padding: 120px 0 60px 0;
padding: 7.5rem 0 3.75rem 0; } }
@media (min-width: 75rem) {
.the-app {
padding: 244px 0 135px 0;
padding: 15.25rem 0 8.4375rem 0;
background-position: center 10px; } }
@media (min-width: 90rem) {
.the-app {
background-position: center 5px; } }
@media (min-width: 112.5rem) {
.the-app {
padding: 306px 0 169px 0;
padding: 19.125rem 0 10.5625rem 0;
background-position: center 40px; } }
.the-app__title {
padding: 0 20px 50px 20px;
padding: 0 1.25rem 3.125rem 1.25rem;
margin: 0 auto;
max-width: 460px; }
.the-app__content {
padding: 0 0 0;
padding: 0 0 0;
margin: 0 auto;
margin: 0 auto; }
@media (min-width: 64rem) {
.the-app__content {
max-width: 950px; } }
@media (min-width: 75rem) {
.the-app__content {
max-width: 1150px; } }
@media (min-width: 90rem) {
.the-app__content {
max-width: 1350px; } }
@media (min-width: 112.5rem) {
.the-app__content {
max-width: 1600px; } }
.the-app .slick-dots {
bottom: 0;
left: 50%;
top: inherit;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%); }
@media (min-width: 64rem) {
.the-app .slick-dots {
bottom: inherit;
left: 8px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
.the-app .slick-dots > li {
display: inline-block;
margin: 0 22px 0 0;
margin: 0 1.375rem 0 0; }
@media (min-width: 64rem) {
.the-app .slick-dots > li {
margin: 0 0 22px 0;
margin: 0 0 1.375rem 0;
display: block; } }
.the-app .slick-dots > li:last-child {
margin-right: 0;
margin-right: 0; }
@media (min-width: 64rem) {
.the-app .slick-dots > li:last-child {
margin-bottom: 0;
margin-bottom: 0; } }
.the-app .slick-dots > li.slick-active a {
background: #ff00b4; }
.the-app .slick-dots > li a {
border: 1px solid #ff00b4; }
.the-app-content__slider {
padding: 0 0 0 0;
padding: 0 0 0 0;
margin: 0 auto 30px;
margin: 0 auto 1.875rem;
clear: both;
height: 230px;
overflow: hidden;
width: 97%; }
@media (min-width: 64rem) {
.the-app-content__slider {
margin-top: 170px;
margin-top: 10.625rem;
width: 50%;
float: left; } }
.the-app-content__slider .slick-arrow {
top: inherit;
right: inherit;
bottom: 12px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%); }
@media (min-width: 64rem) {
.the-app-content__slider .slick-arrow {
bottom: inherit;
top: 0px;
left: 5px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
display: inline-block; } }
.the-app-content__slider .slick-prev {
margin-left: -90px; }
.the-app-content__slider .slick-prev:before {
border-right-color: #ffff00; }
@media (min-width: 64rem) {
.the-app-content__slider .slick-prev {
margin-top: 0px;
margin-left: 0;
top: -13px; }
.the-app-content__slider .slick-prev:before {
border-top: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 18px solid #ffff00;
border-left: 9px solid transparent;
margin-left: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.the-app-content__slider .slick-prev:hover:before {
border-top: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 18px solid #ffff00;
border-left: 9px solid transparent;
margin-left: 0;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1); } }
.the-app-content__slider .slick-next {
margin-left: 70px; }
.the-app-content__slider .slick-next:before {
border-left-color: #ffff00; }
@media (min-width: 64rem) {
.the-app-content__slider .slick-next {
right: 0;
margin-top: 0px;
margin-left: 0;
top: 188px; }
.the-app-content__slider .slick-next:before {
border-top: 18px solid #ffff00;
border-right: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid transparent;
margin-right: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.the-app-content__slider .slick-next:hover:before {
border-top: 18px solid #ffff00;
border-right: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid transparent;
margin-right: 0;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1); } }
.pane--app-content {
margin: 0;
margin: 0;
height: 200px !important; }
.pane--app-content .pane__content {
padding: 0 0 0 0;
padding: 0 0 0 0;
max-width: 100%; }
@media (min-width: 64rem) {
.pane--app-content .pane__content {
margin: 0;
max-width: 420px;
margin: 0 0 0 70px;
margin: 0 0 0 4.375rem; } }
@media (min-width: 75rem) {
.pane--app-content .pane__content {
margin: 0;
max-width: 500px;
margin: 0 0 0 70px;
margin: 0 0 0 4.375rem; } }
@media (min-width: 90rem) {
.pane--app-content .pane__content {
margin: 0;
max-width: 550px;
margin: 0 0 0 100px;
margin: 0 0 0 6.25rem; } }
@media (min-width: 112.5rem) {
.pane--app-content .pane__content {
margin: 0;
max-width: 603px;
margin: 0 0 0 200px;
margin: 0 0 0 12.5rem; } }
.pane--app-content .pane__title {
margin-bottom: 17px;
margin-bottom: 1.0625rem; }
@media (min-width: 64rem) {
.pane--app-content .pane__title {
font-size: 40px;
font-size: 2.5rem;
text-align: left; } }
.pane--app-content .pane__copy {
padding: 0 20px 0 0;
padding: 0 1.25rem 0 0;
margin: 0 0 0 0;
margin: 0 0 0 0; }
@media (min-width: 64rem) {
.pane--app-content .pane__copy {
text-align: left; } }
.the-app-iphone {
background: url("../images/fabric/app-etite/phone.png") no-repeat top center;
background-size: cover;
height: 630px;
width: 100%;
margin: 0 auto;
max-width: 300px;
position: relative; }
@media (min-width: 64rem) {
.the-app-iphone {
float: right;
height: 799px;
overflow: hidden;
position: relative;
max-width: 50%;
background-size: contain; } }
@media (min-width: 90rem) {
.the-app-iphone {
float: right;
height: 799px;
overflow: hidden;
position: relative;
width: 596px; } }
.the-app-iphone__content {
height: 400px;
width: 238px !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: -32px;
margin-top: -2rem; }
@media (min-width: 64rem) {
.the-app-iphone__content {
height: 593px;
width: 276px !important;
margin-top: -8px;
margin-top: -0.5rem; } }
@media (min-width: 75rem) {
.the-app-iphone__content {
width: 302px !important;
height: 620px;
margin-top: 14px;
margin-top: 0.875rem; } }
/*
SHAME FILE
Sometimes we have to hack. It's just one of those things. We don't like to do it, but Browsers are fickle creatures.
This file can be used to include the ugly, the bad, and the hacks, but name and shame.
*/
/*
HACK DESCRIPTION, REASON AND **NAME OF AUTHOR**
*/
/**
* Override "fixed" position for header, as it sucks chode. Tommy.
*/
.parchment-preview header.fixed {
position: static !important; }
.navigation .form-element input {
line-height: 1.5 !important; }
form[action="/eat/gift-card/register"] .form-element--email {
margin: auto; }
form[action="/eat/gift-card/register"] .form-element--address {
margin-bottom: 64px;
margin-bottom: 4rem; }
.form-element__error {
margin-top: 10px;
margin-top: 0.625rem;
color: #FF1C4A;
clear: both;
display: block; }
@media (max-height: 750px) {
.page--app.full-banner {
height: 750px; } }
@media (max-height: 750px) {
.page--app.full-banner .banner,
.page--app.full-banner .banner__content {
height: 750px; } }
@media (max-height: 750px) {
.page--app.full-banner .banner .slider,
.page--app.full-banner .banner .slick-list,
.page--app.full-banner .banner .slick-track,
.page--app.full-banner .banner__content .slider,
.page--app.full-banner .banner__content .slick-list,
.page--app.full-banner .banner__content .slick-track {
height: 750px; } }
@media (max-height: 750px) {
.page--app.full-banner .banner__backgrounds {
height: 750px; } }
@media (max-height: 750px) {
.page--app.full-banner .banner__backgrounds .slider,
.page--app.full-banner .banner__backgrounds .slick-list,
.page--app.full-banner .banner__backgrounds .slick-track {
height: 728px; } }
@media (min-width: 48rem) and (max-height: 750px) {
.page--app.full-banner .banner__backgrounds .slider,
.page--app.full-banner .banner__backgrounds .slick-list,
.page--app.full-banner .banner__backgrounds .slick-track {
height: 734px; } }
@media (min-width: 64rem) and (max-height: 750px) {
.page--app.full-banner .banner__backgrounds .slider,
.page--app.full-banner .banner__backgrounds .slick-list,
.page--app.full-banner .banner__backgrounds .slick-track {
height: 704px; } }
.pane--restaurant-details .restaurant-teaser--just-hatched,
.pane--restaurant-details .restaurant-teaser--hatching-soon,
.pane--restaurant-details .restaurant-teaser--refurbishment {
position: absolute;
top: 60px;
left: 0px;
display: inline-block;
padding: 10px 60px;
width: 100%; }
.pane--restaurant-details .restaurant-teaser--just-hatched::first-letter,
.pane--restaurant-details .restaurant-teaser--hatching-soon::first-letter,
.pane--restaurant-details .restaurant-teaser--refurbishment::first-letter {
text-transform: uppercase; }
@media (min-width: 48rem) {
.pane--restaurant-details .restaurant-teaser--just-hatched,
.pane--restaurant-details .restaurant-teaser--hatching-soon,
.pane--restaurant-details .restaurant-teaser--refurbishment {
top: 80px; } }
@media (min-width: 75rem) {
.pane--restaurant-details .restaurant-teaser--just-hatched,
.pane--restaurant-details .restaurant-teaser--hatching-soon,
.pane--restaurant-details .restaurant-teaser--refurbishment {
top: 127px; } }
@media (min-width: 90rem) {
.pane--restaurant-details .restaurant-teaser--just-hatched,
.pane--restaurant-details .restaurant-teaser--hatching-soon,
.pane--restaurant-details .restaurant-teaser--refurbishment {
top: 157px; } }
@media (min-width: 112.5rem) {
.pane--restaurant-details .restaurant-teaser--just-hatched,
.pane--restaurant-details .restaurant-teaser--hatching-soon,
.pane--restaurant-details .restaurant-teaser--refurbishment {
top: 182px; } }
.pane--restaurant-details .restaurant-teaser--just-hatched {
background-color: #ff8200; }
.pane--restaurant-details .restaurant-teaser--hatching-soon {
background-color: #00788c; }
.pane--restaurant-details .restaurant-teaser--refurbishment {
background-color: #e6007d; }
.parchment-preview {
position: relative; }