/* ------------------------------ */
/* Variables */
/* ------------------------------ */

@wrapperWidth: 1160px;
@bodyFontSize: 14px;
@baseFontSize: 14;
@mtcBlue: #0f55c4;

@darkBackground: #0f55c4;
@primaryColor: #e84938;

@color1: #e84938; // Primary colour as seen in buttons etc
@color2: #c73f30; // Colour 2 as seen in topbar
@color3: #d9d9d9; // Light grey as seen on borders/dividers
@color4: lighten(@color3, 3%); // Slighty darker grey
@color5: #e0e0e0; // Menu border - light grey
@color6: #b8b8b8; // ButtonAlt color

@staticFlyoutBg: #f1f1f1;
@activeFlyoutBg: @color1;

@colorRemove: #E81736;
@colorAdd: #4EA719;

@fontColor: #666666; // base font color
@fontColorAlt: #fff; // used when text has coloured bg
@fontDark: #444; // Footer headings etc

@border_color: #e0e0e0;

/* ------------------------------ */
/* Media Query Breakpoints */
/* ------------------------------ */

@desktop :    ~"all and (min-width : 1160px)";
@tablet :     ~"all and (min-width : 640px) and (max-width : 1160px)";
@mobile :     ~"all and (max-width:780px)";

@desktopSmall: ~"only screen and (max-width:1160px)";
@tabletLarge: ~"only screen and (max-width:880px)";
@tabletMedium: ~"only screen and (max-width:780px)";
@tabletSmall: ~"only screen and (max-width:640px)";
@phoneLarge: ~"only screen and (max-width:480px)";
@phoneSmall: ~"only screen and (max-width:320px)";

/* ------------------------------ */
/* @import */
/* ------------------------------ */

@import (reference) 'mixins.less';
@import (reference) 'grid.less';
@import 'reset.less';
@import 'font.less';
@import 'checkout.less';
@import 'menu.less';
@import 'menu.style.less';
@import 'chosen.less';
@import 'perfectscroll.less';
@import 'responsive_tables.less';
@import 'zoom.less';
@import 'takeaway.less';
@import 'datepicker.less';
@import 'overlay.less';
@import 'sweetAlert.less';
@import 'alternate_styles.less';
@import 'plugins/SocialFeed/social_feed.less';

/* ------------------------------ */
/* Site Styles */
/* ------------------------------ */

.wrapper() {
    max-width: @wrapperWidth;
    margin: 0 auto;
    .clearfix();
}

.wrapper {
    .wrapper();

    @media @desktopSmall {
        width: 94%;
    }
}


/* ------------------------------ */
/* Helper Classes */
/* ------------------------------ */

.toggled() {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
    border-width: 0;
}

.slideToggle() {
    &.transition {
        max-height: 1000px;
        overflow: hidden;
        .transition(all 0.3s ease-in-out);
    }

    &.toggled {
        .toggled();
    }
}

.contentBox() {
    background: #fff;
    border: 1px solid @color5;
    padding: 1.5em;
    .border-radius(3px);
    .box-shadow(0 1px 1px fade(#000, 5%));
}


/* ------------------------------ */
/* Body Tag */
/* ------------------------------ */

body {
    font-size: @bodyFontSize;
    line-height: 1.462;
    font-family: @bodyFont;
    min-width: 300px;
    max-width: 100%;
    background: #ebebeb;
    color: @fontColor;

    &.alternateFont {
        font-family: @body_alternate_font;
        color: @alt_text_color;

        .orderSteps li, p, .button, .buttonAlt {
            font-family: @body_alternate_font;
        }
    }

    &.alternateBackground {
        background: #fff;

        .main {

            &.eventsPage {
                background: #fff;
            }
        }

        .pageBanner {

            &.iframe {
                margin-top: 0;
            }
        }
    }

}

#content {
    @media @desktop {
        min-height:400px;
    }
}

/* ------------------------------ */
/* Typography */
/* ------------------------------ */

a {
    text-decoration: none;
    color:#666666;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em 0;
    font-weight:normal;
    font-family:@primaryFont;
    line-height:120%;
    color: @fontDark;

     .alternateFont & {
        font-family: @body_alternate_font;
    }
}

h1 {
    .ems(32);
    font-weight: 700;
}

h2 {
    .ems(28);
    font-weight: 500;
}

h3 {
    .ems(22);
    color: @fontDark;
    font-weight: 500;
}

h4 {
    .ems(18);
    font-family: @primaryFont;
    font-weight: 300;
}

h5, h6 {
    .ems(18);
    font-family:@bodyFont;
}

html, button, input, select, textarea {
    color: @fontColor;
}

p {
    font-family:@bodyFont;
    color:@fontColor;
    line-height:1.5;
    margin-bottom:15px;
    .ems(14);
}


@media @tabletSmall {
   h1 {
        .ems(28);
    }

    h2 {
        .ems(24);
    }

    h3 {
        .ems(18);
    }

    h4, h5, h6 {
        .ems(16);
    }
}

/* ------------------------------ */
/* Form Styles */
/* ------------------------------ */

.row {
    position: relative;
    margin: 0 0 20px;

    input, select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    input[type=checkbox] {
        border: 1px solid #000;
    }

    label {
        font-family: @bodyFont;
        font-size: 1em;
        font-weight: 500;
        padding: 7px 0;
    }

    input[type="text"], input[type="tel"],
    input[type="email"], input[type="password"],
    input[type="search"], input[type="number"],
    textarea, select, .placeholder {
    	float: left;
    	position:relative;
    	width: 100%;
        border: 1px solid @color5;
        padding: 14px 1em;
        .ems(14);
        .border-radius(3px);

        &:focus {
            border-color: @color1;
        }

        .itemPopup & {
            .ems(12);
            padding: 8px 1em;
            .border-radius(0);
        }
    }

    &.half {
        .col(1,2);

        @media @tabletSmall {
            width: 100%;
        }
    }

    &.noLabel label {
        display: none;
    }

    .itemPopup & {
        margin: 0 0 10px;
    }

}


.formInline .row:not(.checkboxRow) label {
    padding-top: 7px;
}

#productFilter {
    label:before {
        top:-2px;
    }
}

button, input[type="submit"], button[type="submit"] {
    border: 0;
}


.formInline {

    .row:not(.checkboxRow) {
        input[type="text"], input[type="tel"],
        input[type="email"], input[type="password"],
        input[type="search"], input[type="number"],
        textarea, select, .placeholder, .form-error {
            width: 64%;


            @media @tabletSmall {
                width: 100%;
            }
        }

        & label {
            width: 40%;

             @media @tabletSmall {
                width: 100%;
            }
        }
    }

    .error {
        clear: none;
    }

    .form-error {
        float: right;
    }

    .button.right {
        margin-left: 0.5em;
    }
}

form.center {
    text-align: center;
}

form fieldset {
    width: 100%;
    margin-bottom: 2em;

    &:last-of-type {
        margin-bottom: 0;
    }
}

.form-error {
    .wrap();
    display: block;

    background: @colorRemove;
    color: #fff;
    .border-radius(6px);
    text-align: center;
    padding: 0.5em;
    position: relative;

    &:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        top: -7px;
        left: 0;
        right: 0;
        margin: 0 auto;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 7px solid @colorRemove;
    }

    &.top {
       margin-bottom: 10px;

        &:after {
            top: auto;
            bottom: -7px;
            border-bottom: 0;
            border-top: 7px solid @colorRemove;
        }
    }
}


#password_form {
    position: relative;
}
.strength-meter {
    position: absolute;
    right: 1em;
    top: 6px;
    background: none!important;
}


/* ------------------------------ */
/* Select Boxes Arrow */
/* ------------------------------ */

.row select {
    padding-right: 2em;
    background: url(../images/icons/angleDown.png);
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 20px;
    line-height: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    &::-ms-expand { // this remove the chevron in IE10
        display: none;
    }

    .ie9 &, .lt-ie9 & {
        background: none;
    }
}

/* ------------------------------ */
/* CSS3 Checkboxes  */
/* ------------------------------ */

#checkoutForm .row,
#paymentForm .row {
    input[type="checkbox"] + label,
    input[type="radio"] + label {
        float: none;
        position: relative;
        padding-left: 3.5em;
        cursor: pointer;
    }

    input[type="checkbox"] + label:before {
        width: 30px;
        height: 30px;
        left: 0;
        top: 0;
    }
}


.row.registerCheck {
    @media @phoneLarge {
        label {
            padding-top: 0;
        }
    }
}

.checkboxTick {
    input[type="checkbox"],
    input[type="radio"] {
        display: none;
    }


    input[type="checkbox"] + label,
    input[type="radio"] + label {
        float: none;
        position: relative;
        padding-left: 3em;
        cursor: pointer;
        display: inline-block;
        text-align: left;

        &:hover {
            text-decoration: underline;
        }
    }


    input[type="checkbox"] + label:before,
    input[type="radio"] + label:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        border: 1px solid @color5;
        left: 0;
        top: 0;
        cursor: pointer;
        .border-radius(0);
    }

    input[type="checkbox"] + label:after,
    input[type="radio"] + label:after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        background: #fff;
        left: 5px;
        top: 10px;
        display: none;
    }

    input[type="checkbox"]:checked + label:before,
    input[type="radio"]:checked + label:before {
        //background: @color1;
        background: url('/sites/default/images/icons/check.png') no-repeat !important;
        border-color: @color1;
    }

    input[type="radio"]:checked + label:before {
        background: @color1 !important;
    }
}

/* ------------------------------ */
/* Site Logo */
/* ------------------------------ */

.logo {
    float:left;
    padding:0;
    max-height: 196px;

    & img.replaced-svg {
      width: 126px;
      height: 50px;
    }

    img {
        max-height: 75px;
    }

    @media @desktopSmall {
        white-space: nowrap;
        max-width: 50%;
        height: 75px;
        margin-left: 3%;

        //vertical align using ghost element
        &:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            margin-right: -0.25em; /* Adjusts for spacing */
        }

        img {
            display: inline-block;
            vertical-align: middle;
        }
    }
}

/* ------------------------------ */
/* Main Menu */
/* ------------------------------ */

.flyoutWrap {
    float: right;
    height: 75px;
}

.mainMenu {
    .edgeNav();
    height: 100%;
    border-spacing: 0;
    border-collapse: collapse;

    li {
        padding: 0 20px;
        display: table-cell;
        vertical-align: middle;
        position: relative;

        &:after,
        &:hover:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 60%;
            height: 5px;
            background: @color1;
            opacity: 0;
            .transition(opacity 0.3s ease);
        }

        &.active:after,
        &:hover:after {
            opacity: 1;
        }
    }

    a {
        padding: 10px;
        color: @color1;
        .ems(16);
        font-family: @primaryFont;
        font-weight: 700;
    }

    @media @desktopSmall {
        li {
            padding: 0 10px;
        }
    }

    @media @tabletLarge {
        a {
            .ems(14);
            padding: 5px;
        }
    }

    //flyout styles
    @media @tabletMedium {
        li {
            display: block;
            text-align: left;
            border-bottom: 1px solid darken(@staticFlyoutBg, 10%);
            padding: 0;

            &.active:after,
            &:hover:after {
                opacity: 0;
            }

            &.active a {
                background: @color1;
                color: @fontColorAlt;
            }
        }

        li a {
            color: @fontColor;
            .ems(18);
            padding: 0.5em 1em;
            position: relative;

            &:after {
                position: absolute;
                content: "\f105";
                font-family: "fontAwesome";
                right: 1em;
            }
        }
    }
}

/* ------------------------------ */
/* Header */
/* ------------------------------ */

#header {
    .wrap();
    .clearfix();
    z-index:5000;
    background: #fff;

    .wrapper {
        position:relative;
    }

    .headerMain {
        .wrap();
    }

    @media @desktopSmall {
        position: relative;

        .wrapper {
            width: 100%;
        }

        .headerMain {
            min-height: 75px;
            margin-top: 46px;
        }

        &.alive .flyoutWrap {
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
        }

        .flyoutWrap {
            top: -46px;
        }
    }

}


.topBar {
    .wrap();
    background: @color2;
    height: 46px;

    .wrapper {
        position:relative;
    }

    .headerDetails {
        float: left;
        width: 100%;
    }

    .userLinks li {
        float: left;
        height: 46px;
        margin: 0 40px 0 0;
        display: table;

        a {
            display: table-cell;
            vertical-align: middle;
            color: @fontColorAlt;
            font-family: @primaryFont;
        }

        &:last-child {
            margin: 0;
        }
    }

    @media @desktopSmall {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 6000;
        .transition(all 0.3s ease);
        position: fixed;

        .wrapper {
            width: 100%;
            padding-left: 3%;
        }

        .userLinks {
            float: left;
        }

        .userLinks li {
            margin: 0 20px 0 0;

            a {
                .ems(13);
            }
        }
    }

    @media @phoneLarge {
        .userLinks .desktop {
            display: none;
        }
    }
}

/* ------------------------------ */
/* Header social */
/* ------------------------------ */

.headerSocial {
    float: right;
    color: #fff;
    font-family: @primaryFont;
    margin: 3px 18px 0 0;
    font-size: 14px;
    font-weight: 500;

    @media @mobile {
        display: none;
    }

    h3 {
        color: #fff;
        font-family: @primaryFont;
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        margin-right: 10px;
        line-height: 45px;
    }

    li {
        .clearfix();
        float: left;
        display: block;
        line-height: 45px;

        i {
            color: #fff;
            border-radius: 100%;
            display: inline-block;
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-align: center;
            margin-left: 2px;
            font-size: 17px;

            &.fa-facebook {
                background: #3a3e96;
            }

          &.fa-instagram {
            background: #2b2b2b;
          }
          &.fa-twitter {
            background: #1DA1F2;
          }

          &.fa-youtube-play {
                background: #eb2929;
            }

            &.iconTripadvisor {
                background: url('../images/icons/tripadvisor.png') center no-repeat;
                background-color: #6ba044;
                background-size: 22px;

                &:before {
                    content: " ";
                }

                @media all and (min-width: 640px) {
                    display: none;
                }
            }

            &:hover {
                opacity: .85;
            }
        }

        span {
            float: left;
        }

        .TA_socialButtonBubbles {
            float: left;
            margin-left: 10px;
            margin-top: 4px;

            @media all and (max-width: 640px) {
                margin: 0;
                display: none;
            }
        }

        &.tripadvisor {
            margin-left: 23px;

            .socialWidgetContainer {
                display: inline-block;
            }
        }

        @media all and (max-width: 640px) {
            h3, span {
                display: none;
            }

            .fa {
                display: block;
                float: left;
                margin-left: 5px;
                margin-top: 5px;
            }

            &.tripadvisor {
                margin-left: 2px;
            }
        }
    }
}

/* ------------------------------ */
/* Search */
/* ------------------------------ */

.mobileSearchWrap {
    display:none;

    @media @mobile {
        display:block;
    }
}

.searchForm {
    float:left;
    margin-right:20px;

    .row {
        position:relative;
    }

    label {
        display:none;
    }

    input[type="text"] {
        padding:6px;
    }

    button {
        border:0;
        background:0;
        position:absolute;
        top:6px;
        right:0;
    }
}

/* ------------------------------ */
/* Footer */
/* ------------------------------ */

.footerWrap {
    .wrap();
    background: #fff;
    border-top: 1px solid #ebebeb;
}

.appCTA {
    background: @color4;
    position: relative;

    h2 {
        float: left;
        .ems(28);
        color: #555555;
        margin: 10px 1em 10px 0;
        font-weight: 500;
    }

    .storeIcons {
        float: left;
    }

    a {
        float: left;
        margin-right: 10px;

        &:last-of-type {
            margin-right: 0;
        }
    }

    .wrapper {
        position: relative;
        padding: 26px 0;
        padding-right: 150px;
    }

    .iphone {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 140px;
        top: -30px;
        .rotate(8deg);
    }

    @media @tabletLarge {
        h2 {
          width: 80%;
        }
    }

    @media @tabletSmall {
        .wrapper {
            padding-right: 0;
            text-align: center;
        }

        .iphone {
            display: none;
        }


        h2 {
            .ems(24);
            margin-bottom: 1em;
            width: 100%;
        }

        .storeIcons {
            float: none;
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }

        .storeIcons a {
            float: none;
            display: inline-block;
            max-width: 49%;
            margin: 0 1% 1em 0;

            &:last-of-type {
                margin-right: 0;
            }
        }

    }
}

.footer {
    clear:both;
    position:relative;
    .clearfix();
    .wrapper();
    color: @fontColor;
    padding: 60px 0 0 0;
    background: #fff;


    a {
        color: @fontColor;
    }

    h3 {
        .rems(16);
        margin-bottom: 1em;
    }

    @media @tablet {
        padding:20px 0;
    }

    @media @mobile {
        padding:20px 0;
    }
}

.footerCols {
    .clearfix;
}

.footerCol {
    .col(1,3);
    font-size: 16px;

    ul.half {
        .col(1,2);
    }

    ul li {
        margin-bottom: 0.375em;
        list-style: none;
    }

    li {
        color: #555555;
        line-height: 1.4;
    }

    .footerMenu li {
        .col(1,2);
    }

    .openingHours .day {
        float: left;
        min-width: 30%;
    }

    .address {
        line-height: 1.8;
    }

    @media @tabletLarge {
        font-size: 14px;
    }

    @media @tabletMedium {
        .col(1,1);

        .footerColContent {
            padding: 1em 0;
            .slideToggle();
        }

        > h3 {
            cursor: pointer;
            border-bottom: 1px solid @color5;
            padding: 0.75em 0;
            margin: 0;
            position: relative;

            &:after {
                content: "\f107";
                font-family: "fontAwesome";
                position: absolute;
                right: 1em;
            }

            &.active {
                color: @color1;
            }

            &.active:after {
                .rotate(180deg);
            }
        }

        &:last-child  > h3 {
            border-bottom: 0;
        }

         ul.half {
            .col(1,1);
        }

        .footerMenu li {
            .col(1,1);
        }

        .footerNav li, .footerMenu li {
            border-bottom: 1px solid @color5;
        }

        .footerNav:last-child li:last-child, .footerMenu li:last-child {
           border-bottom: 0;
        }

        ul li a {
            display: block;
            padding: 0.75em 0;
        }
    }
}

.footerColContent .day {
    float: left;
    width: 100%;

    .title {
        display: block;
        margin-bottom: 0.5em;
        font-weight: 600;
        font-family: @primaryFont;

    }

    .openingHours {
        .ems(13);
    }
}

.footerBottom {
    .wrap();
    border-top: 1px solid @color3;
    margin: 60px 0 0 0;
    font-size: 14px;
    padding: 20px 0 20px 0;
    position:relative;
    float: none;

    #credits, .copyright {
        position:relative;
        display: inline-block;
        vertical-align: middle;

        @media @tablet {
            width: 50%;
            float:left;
        }
    }

    #credits {
        width: 250px;
        text-align: right;

        @media @tablet {
            text-align: left;
        }

        @media @mobile {
            float: none;
            width: 100%;
            text-align: center;
        }
    }

    .copyright {
        text-align: left;
        width: 400px;

        &.desktop {
            @media @mobile {
                display: none;
            }
        }

        &.mobile {
            display: none;

            @media @mobile {
                display: block;
            }
        }

        @media @mobile {
            float: none;
            width: 100%;
            text-align: center;
        }
    }

    .centerPush {
        float: none;
        width: ~"calc(100% - 658px)";
        display: inline-block;
        vertical-align: middle;
        left: 0;
        right: 0;
        text-align: center;

        @media @tablet {
            width: 50%;
            float: right;
            text-align: right;
        }

        @media @mobile {
            float: none;
            width: 100%;
            text-align: center;
            padding: 20px 0 10px;
        }

        .centerPull {
            display: inline-block;
            float: none;
            right: 0;
        }
    }

    #credits {

        a, span {
            display: inline-block;
            vertical-align: middle;
            line-height: initial;
            padding: 5px 0;
        }

        .creditsLogo {
            margin-left: 0.25em;

            img {
                width: auto;
                max-width: 80px;
                opacity: 0.7;
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);
                filter: gray; /* IE 7, 8, 9 */
                .transition(all 0.3s ease);
            }
        }

        &:hover .creditsLogo:not(.noHover) img {
            opacity: 1;
            -webkit-filter: grayscale(0);
            filter: grayscale(0);
            filter: none; /* IE 7, 8, 9 */
        }

         @media @desktopSmall {
             margin-top: 10px;
        }
    }
    @media @tabletLarge {
        .ems(12);
    }

    @media @tabletMedium {
        margin-top: 1em;

        > div {
            max-width: none;
            width: 100%;
            text-align: center;
            margin-right: 0;
        }
    }

}


/* ------------------------------ */
/* Slide Wrapper (both slideshows) */
/* ------------------------------ */

.slideWrapper {
    clear:both;
    .clearfix();
    width:100%;

}

/* ------------------------------ */
/* Sliders */
/* ------------------------------ */

.largeSlider,
.mobileSlider {
    width:100%;
    .clearfix();
    position:relative;
    max-height: 450px;
    overflow: hidden;

    .slide {
        max-height: 450px;
        height: 450px;
        white-space: nowrap;
        text-align: center;
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .slide > a {
        position: absolute;
        top: 0;
        left: 50%;
        width: 2000px;
        margin-left: -1000px;
        z-index: 1;

        img {
            height: 100%;
            max-width: none;
        }

        &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            //bottom: 0;
            right : 0;
            height: 100%;
            max-height: 450px;
            background: rgba(0,0,0,0.3);
            z-index: 2;
            .box-shadow(inset 0 0 50px 20px rgba(0,0,0,0.5));
        }
    }

    //center vertically using ghost element
    .slide:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -0.25em; /* Adjusts for spacing */
    }

    .slideContent {
        position: relative;
        z-index: 10;
        width: 100%;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
    }

    h2 {
        .ems(58);
        color: #fff;
        font-weight: 500;
        margin-bottom: 0;
        line-height: 1;
        .text-shadow(6px 6px 20px rgba(0,0,0,0.7));
    }

    p {
      .ems(28);
        color: #fff;
        font-weight: 500;
        font-family: @primaryFont;
        .text-shadow(3px 3px 15px rgba(0,0,0,0.7));
    }

    .button {
        margin-top: 1em;
    }

    .controls {
        display: none;
        text-align:center;

        .prev, .next {
            font-size:2em;
            margin:10px;
        }

    }

}

/* ------------------------------ */
/* Mobile Slider */
/* ------------------------------ */

.mobileSlider {
    max-height: 400px;

    .slide {
        max-height: 400px;
        height: 400px;
    }

    .controls {
        text-align:center;

        .prev, .next {
            font-size:2em;
            margin:10px;
        }

    }

    @media @phoneLarge {
        max-height: 380px;

        .slide {
            max-height: 380px;
            height: 380px;
        }

        h2 {
            .ems(36);
        }

        p {
          .ems(24);
        }
    }

     @media @phoneSmall {
        p {
          .ems(20);
        }
     }

}

/* ------------------------------ */
/* Common Page Styles */
/* ------------------------------ */

.main {
    width: 100%;
    .clearfix();
    padding: 2em 0 40px 0;

    &.home {
        background: #fff;
        padding: 0 0 40px 0;
    }

    @media @mobile {
        padding: 2em 0;

        &.menu {

            .wrapper {
                width: 100%;
                padding: 0;

                .menuItems {
                    padding-left: 0;
                    padding-right: 0;
                }
            }
        }
    }
}


.pageBanner {
    background: url('/sites/default/images/layout/default-banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    background-position: center;

    &.iframe {
        margin-top: 46px;
    }

    h1 {
        color: #fff;
        .ems(48);
        margin: 0;
        padding: 1em 0;
        font-weight: 500;
    }

    @media @tabletSmall {
        h1 {
            .ems(32);
        }
    }

}

/* ------------------------------ */
/* Homepage Styles */
/* ------------------------------ */

.intro {
    float: left;
    width: 33%;
    margin-right: 3%;
    padding: 2em 0;

    h1 {
        .ems(28);
    }

    @media @tabletLarge {
        width: 100%;
    }
}

.homeOffer {
    float: left;
    width: 64%;
    background: @color2;
    color: #fff;
    display: table;

    .offerContent {
        position: relative;
        width: 50%;
        padding: 30px 30px 0 30px;
        display: table-cell;

        h2 {
            position: relative;
            color: #fff;
            .ems(58);
            line-height: 1;
            padding-bottom: 20px;
            margin-bottom: 24px;
        }

        h2 span {
            display: block;
            .rems(24);
            width: 100%;
            font-weight: 700;
        }

        h2:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 5px;
            background: #fff;
        }

        p {
            color: #fff;
            font-weight: 700;
            letter-spacing: 1px;
            .ems(15);
            line-height: 1.2;
        }

        .offerCode {
            width: 100%;
            background: #fff;
            color: @color1;
            text-align: center;
            .ems(22);
            font-weight: 700;
            padding: 0.375em 1em;
            .border-radius(4px);
            margin-bottom: 20px;
        }

        &:after {
            left: 100%;
            top: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-left-color: @color2;
            border-width: 43px;
            margin-top: -43px;
            z-index: 10;
        }
    }

    .offerImage {
        width: 50%;
        overflow: hidden;
        position: relative;
        display: table-cell;
        min-height: 300px;

        img {
            max-width: none;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            min-height: 100%;
        }
    }


    @media @desktopSmall {

        .offerContent {
            h2 {
                .ems(48);
            }

            h2 span {
                .rems(20);
            }

            p {
              .ems(14);
            }
        }
    }

    @media @tabletLarge {
        width: 100%;
    }

    @media @tabletMedium {

        .offerContent {
            h2 {
                .ems(42);
            }

            h2 span {
                .rems(18);
            }

            p {
              .ems(13);
            }
        }
    }

    @media @phoneLarge {
        .offerContent {
            width: 100%;

            &:after {
                display: none;
            }
        }

        .offerImage {
            display: none;
        }
    }
}

/* ------------------------------ */
/* Google Map */
/* ------------------------------ */

.map {
    width: 100%;
    min-height: 360px;
}

/* ------------------------------ */
/* CSS3 Social icons*/
/* ------------------------------ */

.social {
    float:left;
    .clearfix();

    li {
        list-style-type:none;
        float:left;
        text-align:center;

        a {
            padding:0 10px;
            display:block;

            i {
                font-size:18px;
                vertical-align:middle;
            }
        }
    }
}

/* ------------------------------ */
/* Members */
/* ------------------------------ */

.members {

    .column {
        width: 49%;
        float: left;
        display:inline;
        margin-left: 2%;
    }

    .memberTable {
        .hide {
            display: none;
        }
    }

    .tile {
        float: left;
        background: #eee;
        text-align: center;
        width: 49%;
        margin-right: 2%;
        margin-bottom: 2%;

        a {
            display: block;

            &:before, &:after {
                display: block;
                content: '';
                padding-top: 25%;
            }
        }

        &.last {
            margin-right: 0%;

            &:after {
                clear: both;
                width: 100%;
                height: 0px;
            }
        }

        i {
            display: block;
            font-size: 4.5em;
            margin: 0 0 0.2em 0;

            @media @mobile {
                display: block;
                font-size: 2.5em;
                margin: 0 0 0.2em 0;
            }
        }
    }

    .tiles h4 {
        font-size: 1.6em;

        @media @mobile {
            font-size: 1em;
        }
    }
}

/* ------------------------------ */
/* Breadcrumb Styling */
/* ------------------------------ */

.breadcrumbWrap {
    .clearfix();
    clear:both;

    @media @tablet {
        padding:0 20px;
    }

    @media @mobile {
        padding:0 20px;
        margin-bottom:20px;
        background:#dedede;
        overflow:hidden;
    }

    .breadcrumbs {
        padding:0 0 20px;
        margin:0;
        .clearfix();
        clear:both;
        min-width:500px;

        li {
            float:left;
            font-family:@primaryFont;
            position:relative;
            padding:0px 10px;

            @media @mobile {
                font-size:12px;
                padding:0 6px;

                &:first-child {
                    display:none;
                }

                &:nth-child(2) {
                    padding-left:0;
                }
            }

            &:first-child {
                padding-left:0;
            }
        }
    }
}

/* ------------------------------ */
/* Pagination */
/* ------------------------------ */

.pagination, .paginationUl {
    .wrap();
    font-family:@primaryFont;
    font-size:14px;
    letter-spacing:1px;
    text-align: center;
    margin-top: 1.5em;

    li {
        display: inline-block;

        .paginationnumbers, &.next {
            display:none;
        }

        a {
            float: left;
            text-align: center;
            font-size: 12px;
            margin-right: 0.5em;
            cursor:pointer;
            display: block;
            color:#909090;
            outline:0;
            height: 30px;
            width: 30px;
            line-height: 30px;
            .border-radius(4px);

            &:hover {
                color:#000;
            }


            @media @tablet {
                background: @color3;
                color:#262626;
                height: 40px;
                width: 40px;
                line-height: 40px;
            }

            @media @mobile {
                background: @color3;
                color:#262626;
                height: 40px;
                width: 40px;
                line-height: 40px;
            }

        }

        &.active a {
            color: #fff;
            background: @color1;
        }

        &:last-child a {
            margin-right: 0;
        }

    }

    .dots, .paginationnumbers {
        display:block;
        @media @mobile {
            padding:5px 5px 5px 0;
        }
    }

}

.paginumberorder form {
    float: right;
    margin-left:10px;

    &.bottom {
        margin-bottom:40px;
        .clearfix();
    }
}

.pageOf {
    .wrap();
    text-align: center;
    .ems(12);
}

/* ------------------------------ */
/* Content Page Styles */
/* ------------------------------ */

.sidebar {
    .col(1,4);

    @media @tabletMedium {
        .col(1,1);
        margin-bottom: 1.5em;
    }
}

.sideTitle {
    float: left;
    width: 100%;

    .ems(18);
    position: relative;
    border-bottom: 0;
    padding: 10px 28px;
    color: @fontColorAlt;
    background: @color1;

    @media @tabletMedium {
        cursor: pointer;

        &:after {
            content: "\f107";
            font-family: "fontAwesome";
            position: absolute;
            right: 28px;
        }

        &.active {
            background: @color2;
        }

        &.active:after {
            .rotate(180deg);
        }
    }

    @media @phoneLarge {
        .ems(18);
    }
}

.sideNav {
    float: left;
    width: 100%;
    .contentBox();

    li a {
        display: block;
        padding: 0.25em 0;
    }
}

.contentBlock {
    float: right;
    margin: 0 auto;
    padding: 0 0 0 40px;
    width: ~"calc(100% - 240px)";
    .contentBox();
    .clearfix();

    @media @tabletLarge {
        width: 100%;
    }

    p {
        .ems(14);
    }

    &.reserve {
        max-width: 772px;
    }

    &.reserveWidget {
        max-width: 100%;

        p {
            max-width: 810px;
            margin: 0 auto;

            &:last-of-type {
                margin-bottom: 40px;
            }
        }
    }

    &.full {
         max-width: 915px;
    }

    &.center {
        text-align: center;
    }

    .half {
        .col(1,2);

        @media @tabletSmall {
            .col(1,1);
            margin-bottom: 30px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    &.centerBlock {
        float: none;
        marging-right: auto;
        margin-left: auto;
    }
}

.contentWithSub {

    font-family: @primaryFont;

    .contentBlock {
        width: ~"calc(80% - 20px)";
        max-width: 100%;
        float: right;
        padding: 33px 50px;

        @media @mobile {
            float: none;
            width: auto;
            margin: 0 auto;
        }

        h2, h3, h4 {
            color: @fontDark;
            font-weight: 700;
        }

        h2 {
            color: rgb(243, 4, 4);
        }

        p {
            font-family: @primaryFont;
            font-weight: 500;
            color: @fontColor;
        }

        ul {
            position: relative;
            margin-bottom: 25px;
            padding-left: 20px;
        }

        li {
            position: relative;
            color: @fontColor;
            font-weight: 500;
            margin-bottom: 5px;

            &:before {
                content: '\f111';
                font-family: 'FontAwesome';
                font-size: 6px;
                color: @fontColor;
                position: absolute;
                left: -14px;
                top: 6px;
            }
        }

        .galleryTitle {
            margin-top: 25px;
        }

        .galleryItem {
            width: 24.25%;
            margin-right: 1%;
            margin-bottom: 1%;

            &:nth-child(4n) {
                margin-right: 0;
            }

            @media all and (max-width: 640px) {
                width: 49.5%;

                &:nth-child(2n) {
                    margin-right: 0;
                }
            }
        }
    }

    .sideNav {
        float: left;
        width: 19.93%;
        margin-right: 1.57%;
        min-height: 100px;
        font-weight: 500;
        padding: 2em 1.5em;

        @media @mobile {
            float: none;
            width: auto;
            margin: 0 auto 30px;
        }

        .sidebarInner {
            transition: all 0.5s ease;
        }

        .sidebarList {

            li {
                width: 100%;
                margin-bottom: 3px;
                border-left: 2px solid #e4e4e4;
                .transition(border-color .3s ease-in);

                &:hover, &.current {
                    border-left: 2px solid rgb(243, 4, 4);
                }

                a {
                    position: relative;
                    display: block;
                    padding: 0.5em 0 0.5em 1em;
                    color: rgb(85, 85, 85);
                }
            }
        }
    }
}

.contentWrap {
    .col(1,1);
}

.contentImage {
    float: left;
    width: 100%;
    margin-bottom: 2em;
}

.pageNav {
    .wrap();
    text-align: center;
    margin-top: 1.5em;
}

.fileLink {
    float: left;
    width: 100%;
    position: relative;

    .content {
        float: left;
        width: 100%;
        background: fade(#000, 80%);
        padding: 1em;
        text-align: center;
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;

        h3 {
            margin: 0;
            color: #fff;
        }
    }
}

/* ------------------------------ */
/* Site Map Styling */
/* ------------------------------ */

.siteMapWrap {
    .wrapper();
    .clearfix();
    clear:both;
    padding:40px 0;

    .siteMapColumn {
        width:32%;
        margin-right:2%;
        margin-bottom:40px;
        float:left;

        ul {
            margin-bottom:20px;
        }

        &:nth-child(3n) {
            margin-right:0;
        }

        @media @mobile {
            width:100%;
            margin:0 0 20px;
        }
    }
}

/* ------------------------------ */
/* Contact Page Styling */
/* ------------------------------ */

.main.contact {
    padding-bottom: 0;
}

.contactWrap {
    .wrap();
    padding:40px 0 60px 0;

     @media @tabletMedium {
       padding:0 0 20px 0
    }
}

.contactDetails,
.contactFormWrap {
    .col(1,2);

    @media @tabletMedium {
        .col(1,1);
    }

    h2 {
        .ems(28);
        text-align: center;
        font-weight: 500;
        margin-bottom: 0.75em;
    }
}

.contactDetails {
   .contentBox();
    padding: 2em 0;
}


.contactFormWrap {
    position: relative;

    .innerText {
        float: left;
        .contentBox();
        padding: 2em;
    }

    @media @tabletMedium {
        text-align: center;
        margin-top: 20px;

        .button {
            width: 100%;
        }
    }
}

.contactForm {
    .answer {
        display:none;
    }

    textarea {
        min-height:150px;
    }
}

#map {
    float: left;
    width: 100%;
    height: 260px;
}


@media @tabletLarge {
    .noZoom {
        position: relative;

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 5000;
        }
    }

    .mapActive {
        border: 2px solid @color1;
    }

    .mapInfo {
        float: left;
        height: 30px;
        line-height: 30px;
        top: -30px;
        position: relative;
        color: #fff;
        background: @color2;
        z-index: 6000;
        padding: 0 1em;
    }
}


.stores {
    .wrap();
    padding: 2em 30px 0 30px;
}

.store {
    .col(1,2);

    h3, h4 {
        font-family: @bodyFont;
        .ems(16);
        font-weight: 700;
        margin-bottom: 0.75em;
    }

    li {
        .ems(14);
        line-height: 1.4;
    }

    .details {
        margin-bottom: 20px;
    }

    .details li {
        padding-left: 2em;
        position: relative;
        margin-bottom: 1em;
    }

    .details li:before {
        position: absolute;
        left: 0;
        font-family: "fontAwesome";
        color: fade(@fontDark, 50%);
        font-size: 18px;
    }

    .address:before {
        content: "\f041";
    }

    .phone:before {
        content: "\f095";
    }

    .openingTimes .days {
        float: left;
        width: 40%;
    }

    .openingTimes .times {
        float: left;
        width: 60%;
    }

    @media @tabletMedium {
        .col(1,1);

        .details,
        .openingTimes {
            float: left;
            width: 50%;
        }
    }


    @media @phoneLarge {
        margin-bottom: 2em;
        .details,
        .openingTimes {
            width: 100%;
        }

        &:last-of-type {
            margin-bottom: 0;
        }
    }


}


/* ------------------------------ */
/* Gallery Page */
/* ------------------------------ */

.galleries, .gallery {
    .wrap();
    padding-left: 0 !important;
}

.galleryItem {
    float: left;
    width: 15.5%;
    margin-right: 1.4%;
    margin-bottom: 1.4%;

    &:nth-child(6n) {
        margin-right: 0;
    }

    &:before {
        content: none !important;
    }

    .title {
        float: left;
        width: 100%;
        display: block;
        text-align: center;
        .ems(16);
    }

    .date {
        float: left;
        width: 100%;
        text-align: center;
        .ems(12);
        margin-bottom: 0.25em;
    }

    .galleryImage {
        float: left;
        width: 100%;
        padding: 5px;
        background: #fff;
        margin-bottom: 0.5em;

        .imageWrap {
            position: relative;
            overflow: hidden;
        }

        .overlay {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: fade(#000, 70%);
            color: #fff;
            text-align: center;
            white-space: nowrap;
            .transition(opacity 0.4s ease);

            &:before {
                content: '';
                display: inline-block;
                height: 100%;
                vertical-align: middle;
                margin-right: -0.25em; /* Adjusts for spacing */
            }

            &:hover {
                opacity: 1;
            }
        }

        .overlayContent {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
        }
    }

    @media @tabletMedium {
        &:nth-child(6n) {
            margin-right: @gutter;
        }

        .col(1,4);
        margin-bottom: @gutter;
    }

    @media @tabletSmall {
       .col(1,2);
    }
}

.galleryPrev,
.galleryNext {
    position: absolute;
    top: 48%;
    left: 10px;
    background: fade(darken(@color3, 60%), 80%);
    color: #fff;
    .ems(24);
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    .border-radius(50%);

    &:hover {
       background: darken(@color3, 60%);
    }

    @media @mobile {
         top: 50%;
        .border-radius(0);
        left: 0;
        height: auto;
        .transform(translateY(-50%));
    }

}

.galleryNext {
    right: 10px;
    left: auto;

    @media @mobile {
        right: 0;
    }
}

.galleryInfo {
    float: left;
    width: 100%;
    text-align: center;
    margin: 1.5em 0 1.5em 0;
    font-weight: 600;
}


/* ------------------------------ */
/* Faq page  */
/* ------------------------------ */

.questions {
    width: 100%;
}

.question {
    h3 {
        position: relative;
        cursor: pointer;
        background: lighten(@color5, 6%);
        padding: 0.5em 1em;

        &:after {
            content: "\f107";
            position: absolute;
            height: 30px;
            line-height: 30px;
            right: 1em;
            top: 0;
            bottom: 0;
            margin: auto 0;
            font-family: "fontAwesome";
        }

        &.active {
            color: @color1;
        }

        &.active:after {
            .rotate(180deg);
        }
    }
}

.answer {
    padding: 1em;
    margin-bottom: 1em;
}

/* ------------------------------ */
/* Reserve Page */
/* ------------------------------ */

.reserveForm {
    margin-top: 2em;
}

/* ------------------------------ */
/* Button Styling */
/* ------------------------------ */

.button {
    .button();
    font-size: 16px;
    padding: 0.75em 1.75em;
    background: @color1;
    color: #fff;
    font-family: @bodyFont;
    font-weight: 700;
    text-transform: uppercase;
    .border-radius(4px);
    .transition(background 0.3s ease);
    letter-spacing: 1px;
    line-height: 18px;

    &:hover {
        background: @color2;
    }

    &[disabled] {
        background: @color1;

        &:hover {
            background: @color1;
        }
    }

    &.forward {
        position: relative;
        padding-right: 3em;

        &:after {
            content: "\f105";
            font-family: "fontAwesome";
            position: absolute;
            right: 1em;
            top: 0.75em;
        }
    }

     &.back {
        position: relative;
        padding-left: 3em;

        &:after {
            content: "\f104";
            font-family: "fontAwesome";
            position: absolute;
            left: 1em;
        }
    }

    &#add_to_basket {
        position: relative;

        &.hideText {
            span {
                opacity: 0;
            }
        }

        i {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 22px;
            padding: 0;
            line-height: 0;
             -webkit-animation: fa-spin-icon 2s infinite linear;
             animation: fa-spin-icon 2s infinite linear;
        }
    }
}

@-webkit-keyframes fa-spin-icon {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
        transform: translateX(-50%) translateY(-50%) rotate(359deg);
    }
}
@keyframes fa-spin-icon {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
        transform: translateX(-50%) translateY(-50%) rotate(359deg);
    }
}

.buttonAlt {
    .button();
    font-size: 16px;
    padding: 0.75em 1.75em;
    background: @color6;
    color: #fff;
    font-family: @bodyFont;
    font-weight: 700;
    text-transform: uppercase;
    .border-radius(4px);
    .transition(background 0.3s ease);
    letter-spacing: 1px;

    &:hover {
        background: darken(@color6, 6%);
    }
}


.textLink {
    text-decoration: underline;
    margin-bottom: 0.5em;
    color: @fontColor;
}

/**
 * Menu lists
 */

.menuWrapper {
    .clearfix();
    .wrapper();

    @media @mobile, @tablet {
        padding: 0 20px;
    }
}

.menuWrap {
    .clearfix();
}

.menuTitle {
    float: left;
    width: 100%;

    h2 {
        float: left;
        display: inline-block;
    }

    p {
        clear: both;

        &:last-child {
            margin-bottom: 10px;
        }
    }

    .button {
        float: left;
        display: inline-block;
        margin-left: 30px;
        .ems(13);
        margin-top: -3px;
        margin-bottom: 1em;

        @media @tabletSmall {
            clear: left;
            margin: 0 0 1em 0;
        }

        @media @phoneLarge {
            width: 100%;
        }
    }
}

.menuList {
    .clearfix();
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;

    li {
        @media @desktop {
            width: 19.2%;
            margin-right: 1%;
            margin-bottom: 1%;
            float:left;

            &:nth-child(5n) {
                margin-right:0;
            }
        }

        @media @tablet {
            width: 32%;
            margin-right: 2%;
            margin-bottom: 2%;
            float:left;

            &:nth-child(3n) {
                margin-right:0;
            }
        }

        @media @tablet {
            width: 48%;
            margin-right: 4%;
            margin-bottom: 2%;
            float:left;

            &:nth-child(2n) {
                margin-right:0;
            }
        }

        @media @mobile {
            margin: 0 0 20px;
            width:100%;
            float:left;
        }

        .imageWrap {
            position:relative;

            h4 {
                position: absolute;
                bottom: 40px;
                right: 0;
                background: #E5121D;
                color: #fff;
                padding: 5px 10px;
                font-size: 20px;
                text-align: right;

                @media @desktop {
                    font-size: 14px;
                }

                @media @mobile {
                    font-size: 16px;
                }
            }
        }
    }
}

#loading_gif {

 display:none;
}

.overlayBox .storeoverlay {
    display: inline-block;
    position: relative;
    margin-left: 15px;
    color: #e84938;
    font-size: 16px;
    padding: 0.95em 1.75em 0.95em 2em;

    &:hover {
        teventsListext-decoration: underline;
    }

    &:before {
        content: '\f041';
        font-family: 'FontAwesome';
        position: absolute;
        left: 8px;
        top: 3px;
        font-size: 27px;
    }

    @media all and (max-width: 600px) {
        clear: both;
        margin-top: 20px;
    }
}

.overlayBox {
    margin-bottom: 20px;
}

.overlayBox .overlayAjax {

    .wrapper {

        @media @desktopSmall {
            width: 100%;
        }
    }
}

.storeSearch {
    margin-bottom: 0;
}

.storeList {
    padding-bottom: 0;

    @media @mobile {

        .wrapper {
            width: 100%;
        }
    }

    h4 {
        text-transform: uppercase;
        margin: 40px 0 20px;
    }

    .storeItem {
        display: inline-block;
        width: 100%;

        .storeImage {
            .col(3,12);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;

            @media @mobile {
                .col(4,12);
            }
        }

        .storeInfo {
            .col(8,12);
            text-align: left;
            margin-right: 0;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;

            @media @mobile {
                .col(12,12);
                margin-right: 0;
            }
        }

        .storeImage + .storeInfo {
            .col(5,12);
            margin-right: 0;

            @media @mobile {
                .col(8,12);
                margin-right: 0;
            }
        }

        .storeButton {
            .col(4,12);
            text-align: right;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;

            @media @mobile {
                .col(12,12);
                text-align: center;
            }

            .button {
                word-break: keep-all;
                white-space: nowrap;
                min-width: 210px;
            }
        }
    }
}

.cardAddress {
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}

.cardAddressLeft {
    float: left;
    padding-top: 12px;
    width: ~"calc(100% - 250px)";

    @media @mobile {
        width: ~"calc(100% - 130px)";
    }
}

.cardAddressRight {
    float: left;
    width: 250px;

    @media @mobile {
        width: 130px;
    }

    .button {

        @media @mobile {
            margin-top: 0.2rem;
            margin-bottom: 0.2rem;
            width: 100%;
        }
    }
}

.selectStore.all {
    padding: 0 20px;

    .storeList {

        > ul > li {
            margin: 0 0 10px;
            border-bottom: 1px solid rgb(224, 224, 224);

            &:last-child {
                padding-bottom: 0;
                margin-bottom: 0;
                border-bottom: none;
            }
        }
    }

    .storelist_cuisine_filter_dropdown {
        float: left;
        position: relative;
        width: 100%;
        border: 1px solid #e0e0e0;
        padding: 0 1em;
        font-size: 16px;
        border-radius: 4px;
        background-clip: padding-box;
        margin: 0;
        margin-bottom: 20px;
        height: 47px;
        line-height: 47px;
        background: none;
    }

    @media all and (max-width: 590px) {
        padding: 0;

        .storeList {

            .button {
                margin-top: 10px;
                width: 100%;
            }
        }
    }

    @media @mobile {
        padding: 0 10px;
    }
}

.eventsPage {
    background: #ebebeb;
}

.events {
    margin-bottom: 40px;
    .clearfix();
}

.eventsInfo {
    .contentBox();
    width: 60%;
    margin-right: 2.5%;
    float: left;
}

.eventsList {
    width: 37.5%;
    float: left;

    ul {
        padding-left: 20px;

        li {
            list-style-type: disc;
        }
    }
}

@media @tabletMedium {
    .eventsInfo, .eventsList {
        width: 100%;
        margin: 0 0 20px 0;
    }
}

.contentBasicBlock {
    width: 60%;
    margin-right: 2.5%;
    float: left;

    @media @tabletMedium {
        width: 100%;
        margin: 0 0 20px 0;
    }

    &.full {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}

.contentBasicGallery {
    width: 37.5%;
    float: right;

    @media @tabletMedium {
        width: 100%;
        margin: 0 0 20px 0;
    }

    .galleryItem {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 4%;

        &:nth-child(2n) {
            margin-right: 0;
        }

        .galleryImage {
            margin-bottom: 0;
        }
    }
}

.pageContent {

    ul {
        padding-left: 15px;
    }

    li {
        padding-left: 12px;
        position: relative;

        &:before {
            content: "\f111";
            font-family: "fontAwesome";
            display: inline-block;
            color: @color1;
            font-size: 5px;
            position: absolute;
            top: 6px;
            left: 0;
        }
    }
}

.reserveNotice {
    font-weight: bold;
    color: @color1;
}

.scriptWrapper {
    position: relative;
    display: block;
    text-align: center;
    clear: both;
    margin-bottom: 10px;

    @media @mobile, @tabletLarge {
         max-height: none;
    }

    @media @mobile {
        margin-bottom: 0;
    }

    &:nth-of-type(2n) {
        margin-top: 0;
    }

    &.open_table {
        height: 150px;

        .scriptDesktop, .scriptMobile {
            position: relative;
            z-index: 10;
        }

        @media @tabletLarge {
            height: 310px;
        }
    }

    &.quandoo {
        iframe {
            width: 100%;
            max-width: 808px;
            height: 320px;
            margin-top: 20px;
        }
    }
}

.reserveWidgetHeading {
    max-width: 796px;
    text-align: left;
    margin: 0 auto;

    @media @mobile {
        text-align: center;
        margin-top: 40px;

        &:nth-of-type(2n) {
            margin-top: 0;
        }
    }
}

.scriptDesktop {
    display: inline-block;

    @media @mobile, @tabletLarge {
        display: none;
    }
}

.scriptMobile {
    display: none;

    @media @mobile, @tabletLarge {
        display: inline-block;
    }
}



/*
 * Grid Menu
 */

.backButton {
    padding: 10px 20px;
    font-size: 13px;
    line-height: auto;

    @media @phoneLarge {
        width: 100%;
    }
}

.bottomButton {
    float: left;
    width: 100%;
    border-top: 1px solid @color5;
    padding: 20px 0 40px;

    i {
        margin-right: 10px;
    }
}

.lazyloader {
    width: 100%;
    clear: both;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.menuCategoryContent {
    position: relative;
}

.gridContainer {

    @media @mobile {
        padding-top: 0;

        .wrapper {
            width: 100%;
        }
    }
}

.grid {
    min-height: 702px;
    width: 68.706897%;

    .menuCategory {
        position: relative;


        .fa-spinner {
            position: fixed;
            top: 50%;
            .transform(~"translateY(-50%)");
            display: none;
        }

         @media @mobile {
             background-color: #ebebeb;
             border: none;
             border-radius: none;
             padding: 1em;
         }
    }

    .menuCategoryContent {
        .clearfix();
        clear: both;

        &.padding {
            padding-top: 55px;
        }
    }

    .titleHeader {

        &.fixed {
            position: fixed;
            width: 100%;
            z-index: 500;
            background: #fff;
            top: 0;
            padding-top: 60px;
            .transition(padding-top 0.2s);

            h2 {
                background: #fff;
                border-radius: 3px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                border: solid 1px #000;
                border-bottom: none;
                padding: 28px 28px 15px;
                position: relative;

                &:after {
                    content: '';
                    width: 100%;
                    height: 1px;
                    background: @color5;
                    display: block;
                    position: relative;
                    bottom: -15px;
                }
            }
        }

        @media @tabletMedium {

            h2 {
                span {
                    margin-bottom: 10px;
                }

                &:after {
                    display: none;
                }
            }
        }

        @media @mobile {
            margin-top: 15px;

            &.fixed {
                margin-top: 0;
                padding-top: 30px;

                h2 {
                    border-color: transparent;
                    border-bottom: solid 1px #000;

                    span {
                        margin: 0;
                    }

                    &:after {
                        display: none;
                    }
                }
            }
        }

        @media @phoneLarge {

            &.fixed {
                display: none;
            }
        }
    }

    h2 {
        line-height: 20px;

        span {
            display: inline-block;
            padding: 10px 0;
        }

        .button {
            float: right;

            i {
                margin-right: 10px;
            }
        }
    }

    .menuItem {
        min-height: 220px;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 15px;
        text-align: center;

        @media @desktop {
            .boxColumn(@amount:3);

            &:nth-child(3n+1) {
                clear: both;
            }
        }
        @media @tablet {
            .boxColumn(@amount:3);
        }
        @media @mobile {
            .boxColumn(@amount:2);
            width: 49%;
            margin: 0 2% 10px 0;
            background: #fff;

            &:nth-of-type(2n) {
                float: left;
            }
        }

        .imageWrap {
            border: none;
            margin: 0;
            width: 100%;
            max-width: none;
            overflow: hidden;
            position: relative;

            &:before {
                content: '';
                display: block;
                padding-bottom: 100%;
            }

            img {
                position: absolute;
                top: 50%;
                left: 50%;
                .transform(~"translateX(-50%) translateY(-50%)");
                max-width: 100%;
                max-height: 100%;
                width: auto;
            }

            &.noImage {
                background: #f4f4f4;
                position: relative;
                overflow: hidden;
                display: table;

                .cell {
                    display: table-cell;
                    vertical-align: middle;
                }
            }
        }

        .menu_quick_subtract, .menu_quick_add {
            display: inline-block;
            background: none;

            &.circleIcon {
                width: 25px;
                height: 25px;

                svg {
                    width: 20px;
                    height: 20px;
                }

                &.checked:after, &.loading:after {
                    width: 25px;
                    height: 25px;
                    line-height: 25px;
                    top: 0px;
                    left: 0px;
                }

                &.loading:after {
                    opacity: 1;
                    content: '\f110';
                }

                @media @tablet, @mobile {
                    width: 30px;
                    height: 30px;

                    &.checked:after, &.loading:after {
                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                        top: 0;
                        left: 0;
                    }
                }
            }
        }

        .itemName {
            float: left;
            width: 100%;
            margin: 10px 0 20px;
            color: #000;
            display: block;
            font-weight: 700;
            color: @color1;
            .ems(22);
            font-family: @primaryFont;

            @media @mobile {
                max-width: 100%;
                .ems(20);
                margin-bottom: 5px;
            }

            @media @phoneLarge {
                .ems(16);
            }
        }

        .itemPrice {
            display: inline-block;
            margin-bottom: 50px;
            color: #444;

            &.add {
                margin-bottom: 0;
            }

            @media @tablet {
                .ems(18);
            }

            @media @mobile {
                margin-bottom: 20px;
                .ems(16);
            }
        }

        .itemDesc {
            float: none;
            margin-top: 15px;
        }

        .itemQty {
            display: inline-block;
            margin: 0 5px;
            padding-bottom: 2px;

            @media @tablet, @mobile {
                .ems(16);
                margin: 0 10px;
            }
        }

        .itemOptions {
            .clearfix;
            position: relative;
            text-align: center;
            line-height: 27px;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 10px;
            top: inherit;

            .itemPrice {
                float: left;
                margin: 0 5px;
                .ems(16);
            }

            .options {
                display: inline-block;
                float: none;

                i.fa-spin {
                    display: none;
                }

                &.loading {
                    text-align: center;
                    position: relative;


                    a, span {
                        opacity: 0;
                        position: relative;
                    }

                    i.fa-spin {
                        display: block;
                        width: 100%;
                        font-size: 25px;
                        position: absolute;
                        left: 0;
                        top: 3px;
                        text-align: center;
                    }
                }

                svg.addIcon, svg.removeIcon {
                    width: 25px;
                    height: 25px;

                    @media @tablet, @mobile {
                        width: 30px;
                        height: 30px;
                    }
                }
            }
        }

        @media @mobile {
            padding: 7px;
        }
    }

    @media @desktopSmall {
        width: 100%;
    }
}

.is_stuck {
    top: 20px;
}

.selectStore {

    .appCTA {
        background: none;
        text-align: center;

        a {
            float: none;
        }

        h2 {
            margin: 0 0 20px;
            .ems(22);
            width: 100%;

            @media @mobile {
                .ems(18);
            }
        }

        .wrapper {
            padding: 0;
            width: 100%;
            margin-top: 20px;
        }

        .storeIcons {
            clear: both;
            .clearfix();
            text-align: center;
            width: 100%;
        }
    }

    .storeoverlay {
        display: inline-block;
        position: relative;
        margin-left: 15px;
        color: #e84938;
        font-size: 16px;
        padding: 0.95em 1.75em 0.95em 2em;

        &:before {
            content: '\f041';
            font-family: 'FontAwesome';
            position: absolute;
            left: 8px;
            top: 3px;
            font-size: 27px;
        }
    }
}

/*
 * takeaway phone order
 */
.phoneOrders {
    padding: 40px 0 20px;
    .clearfix;
}

.phoneOrderForm {
    .clearfix;
    border-bottom: 1px dashed #727272;
    margin-bottom: 26px;

    .row {
        @media @desktop, @tablet {
            width: ~"calc((100% / 2) - 5px)";
            float: left;
            margin-right: 10px;

            &:nth-of-type(2n) {
                margin-right: 0;
                float: right;
            }
        }

        input {
            @media @desktop {
                width: ~"calc((100% / 2) - 5px)";
                float: left;
                margin-right: 10px;
                margin-bottom: 10px;

                &:nth-of-type(2n) {
                    margin-right: 0;
                    float: right;
                }
            }
        }


        select {
            @media @desktop {
                width: ~"calc((100% / 2) - 5px)";
                float: left;
                margin-right: 10px;
                margin-bottom: 10px;
                background-color: #FFF;

                &:nth-of-type(2n) {
                    margin-right: 0;
                    float: right;
                }
            }
        }
    }
}

#customer_results {
    margin-bottom: 30px;

    @media @tablet, @mobile {
        overflow-x: scroll;
    }

    tr {
        border-bottom: 1px dashed #e0e0e0;
        background-color: #fff;

        &:first-of-type {
            border-bottom:none;
        }

        &:last-of-type {
            border-bottom:none;
        }

        th {
            background: #e84938;
            color: #fff;
            border-right: 1px solid #fff;
        }

        td {
            &:last-of-type {
                background-color: #4caf50;
                text-align: center;

                &:hover {
                    background-color: #339966;
                }

                a {
                    color: #fff;
                }
            }
        }
    }
}

.new_customer {
    display: block;
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 30px;
    color: #444;
    border-bottom: 1px dashed #727272;

    i {
        color: #4caf50;
    }
}

#new_customer_form {
    padding: 10px;

    div {
        .clearfix;
        margin-bottom: 5px;

        &:last-of-type {
            text-align: right;
        }
    }

    label, input {
        display: inline-block;
        vertical-align: middle;
        min-width: 200px;
    }

    label {
        min-width: 100px;
    }

    input {
        border: 1px solid #e0e0e0;
        padding: 14px 1em;
        font-size: 1em;
        border-radius: 3px;
        background-clip: padding-box;

        &[type="submit"] {
            background-color: #4caf50;
            color: #fff;

            &:hover {
                background-color: #339966;
            }
        }
    }
}

// select store link on checkout pages / menu sidebar when a store isn't selected
.selectStoreLink {
    text-decoration: underline;

    &:hover {
        text-decoration: none;
    }
}

.contentSidebar {
    float:left;
    width:20%;
    margin-right:2.5%;
    min-width:200px;
}

.memberSidebar {
    //clear: none;
    float: left;
    padding-right:2.5%;
    padding-bottom: 2rem;
    min-width: 210px;
    width: 240px;

    @media @tabletMedium {
        padding-left:2.5%;
        width: 100%;
    }

    @media @mobile {
        padding: 0 0 2rem;
    }

    .accountDetails {
        padding-bottom: 1rem;
        word-break: break-word;

        @media @mobile {
            position: relative;
            padding: 10px 15px;
            padding-right: 30px;
            cursor: pointer;
            border-bottom: 2px solid @primaryColor;


            &:after {
                content: "\f107";
                font-family: "fontAwesome";
                position: absolute;
                top: 50%;
                transform: translate(0,-50%);
                right: 15px;
                .rems(20);
                transition: all 0.3s linear;
            }

            &.active {

                &:after {
                    transform: translate(0,-50%) rotate(180deg);
                }
            }
        }
    }

    .sidebarMenu {
        .ems(18);
        font-family:@bodyFont;
        line-height: 120%;

        @media @mobile {
            background: @primaryColor;
            padding: 0 15px;
            max-height: 1000px;
            overflow: hidden;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;

            &.toggled {
                overflow: hidden;
                padding-top: 0;
                padding-bottom: 0;
                max-height: 0;
                border-width: 0;
            }
        }

        li + li {
            padding-top: 0.5rem;

            @media @mobile {
                padding: 0;
            }
        }

        li {

            @media @mobile {
                margin: 0;
                padding: 0;
            }

            a {

                @media @mobile {
                    color: #fff;
                    display: block;
                    padding: 15px 0;
                    padding-left: 1.5rem;
                    border-bottom: 1px solid fade(#fff, 70%);
                }
            }

            &:last-child {

                a {

                    @media @mobile {
                        border-bottom: 0;
                    }
                }
            }
        }
    }


    .msHome {
        .leftIcon(f015);
    }

    .msOrderHistory {
        .leftIcon(f017);
    }

    .msCard {
        .leftIcon(f09d);
    }

    .msAddresses {
        .leftIcon(f02d);
    }

    .msChangePassword {
        .leftIcon(f023);
    }

    .msLogout {
        .leftIcon(f08b);
    }
}

.addCard,
.cardList {
    @media @mobile {
        padding-top: 1rem;
    }
}

.memberContentBlock {
    width: ~"calc(100% - 240px)";
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 1.5em;
    border-radius: 3px;
    background-clip: padding-box;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    float: left;

    @media @tabletMedium {
        width: 100%;
    }
}

/*
.contentBlock {
    float:left;
}
*/

.membersBlock {
    float:left;
}


/* Add Card Form */


.expiry_row {
    label {
        clear:both;
        }
    }

    .expiry_fields {
        width:100%;
        float:left;


            select {
                float:none;
        }
        }



.row {

.expirydate {

width:45%;
}

}

.tableCardList {
    width: 100%;
}

.tableCardList tr {
    border-bottom: solid 1px #666666;
}


/* Card Select Payment Page */


@media all and (max-width: 479px) {

    .cardExpiryDateOnly {

    display:block;
    }

    .cardExpiry {
        display:none;
        }

 }

 @media all and (min-width: 480px) {

    .cardExpiryDateOnly {

    display:none;
    }

    .cardExpiry {
        display:block;
        }

    .order_button {

        }

 }

.paymentCardRow {
    border-bottom: solid 1px #666666;

    font-size:20px;

        .cardBrand {

            float:left;
            width:60px;
            padding:10px;
            }

        .cardNumber {

            float:left;
            width:120px;
            padding:10px;
            }

            .cardExpiryDateOnly {

                float:left;
                width:60px;
                padding:10px;
                }

            .cardExpiry {
                float:left;
                width:150px;
                padding:10px;
                }

        .cardSelect {

            float:right;
            width:50px;
            padding:10px;
            padding-right:0px;

            }

    .cv2_row {

            padding:10px;
            padding-top:0px;

            font-size:16px;


            label {
                padding-right:10px;
                }

            .cv2 {
                padding:10px;
                margin-right:10px;

                }

            input {
                 margin-top:15px;
                }
        }

    }


.recentOrdersWrapper, .orderOverviewHeader {
    float: left;
    width: ~"calc(100% - 370px)";
    border: 1px solid @border_color;
    border-radius: 4px;
    text-align: center;
    padding: 5px 0 0;
    position: relative;

    @media @desktopSmall {
        float: none;
        width: 100%;
        margin: 0;
    }

    @media @mobile {
        border: 0;
    }

    h3 {
        border-bottom: 1px solid @border_color;
        padding: 5px 20px;
        text-align: left;
        margin: 0;

        @media @mobile {
            padding: 0;
            .rems(24);
            font-weight: 700;
        }
    }

    > a {
        position: absolute;
        top: 15px;
        right: 20px;
    }

    table {

        td {
            border-bottom: 1px solid @border_color;
            padding: 20px 10px;

            &:first-child {
                padding-left: 20px;
            }

            &.cost {
                .rems(17);
                color: @color3;
                font-weight: 600;
            }

            &.status {
                color: #8bc86e;
                font-weight: 600;

                &.cancelled {
                    color: @primaryColor;
                }
            }
        }

        tr:last-of-type {
            td {
                border-bottom: 0;
            }
        }

        a {
            color: @primaryColor;
            .rems(16);
        }
    }
}

.memberEditWrapper {
    float: left;
    width: ~"calc(100% - 370px)";
    border: 1px solid @border_color;
    border-radius: 4px;
    text-align: center;
    padding: 5px 15px;
    position: relative;

    @media @desktopSmall, @desktop, @tablet {
        float: left;
        width: 100%;
        margin: 0;
    }

    @media @mobile {
        border: 0;
        padding: 0;
    }

    h3 {
        border-bottom: 1px solid @border_color;
        padding: 5px 20px;
        text-align: left;
        margin: 0;

        @media @mobile {
            padding: 0 0 10px;
            .rems(24);
            font-weight: 700;
        }
    }

    > a {
        position: absolute;
        top: 15px;
        right: 20px;
    }
}

.orderOverviewHeader {
    width: 100%;
    max-width: 800px;
    float: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    h3 {
        border-bottom: 0;
    }
}

.loyaltyWheelWrap {
    width: 330px;
    border: 1px solid @border_color;
    border-radius: 4px;
    text-align: center;
    padding: 5px 0;
    float: left;
    margin-right: 20px;

    @media @desktopSmall {
        width: 100%;
        float: none;
        margin-bottom: 20px;
        margin-right: 0;
    }

    @media @mobile {
        border: 0;
    }

    h3 {
        border-bottom: 1px solid @border_color;
        padding: 5px;

        @media @mobile {
            border: 0;
            font-size: 24px;
            font-weight: 700;
        }
    }

    p {
        line-height: 1.4;
    }

    .button, .buttonAlt {
        min-width: 210px;
        max-width: ~"calc(100% - 20px)";
        margin: 0 0 10px;
        font-weight: 600;

        @media @mobile {
            width: 100%;
            max-width: 210px;
        }

        &:not(.disabled) {
            background: #8bc86e;
            border-color: #8bc86e;

            &:hover {
                background: darken(#8bc86e, 6%);
            }
        }

        &.disabled {
            color: #fff;
            background: @color4;
            border-color: @color4;
            cursor: default;
        }
    }
}

.loyaltyWheel {
    width: 210px;
    height: 210px;
    position: relative;
    margin: 0 auto 25px;

    span {
        width: 45px;
        height: 45px;
        .rems(22);
        font-weight: 700;
        color: #fff;
        border-radius: 100%;
        background: @color4;
        display: block;
        overflow: hidden;
        text-align: center;
        padding: 11px;
        line-height: 1;
        position: absolute;

        &.larger {
            width: 65px;
            height: 65px;
        }

        &.received {
            background: #8bc86e;

            /* loop around the nth-child adding 0.3s to each animation */
            @from: 0;
            @to: 10;
            .loop(@index) when (@index =< @to) {

                @seconds: @index * 0.3s;

                &:nth-child(@{index}) {
                    animation: backgroundAndSizeChange .75s ease-in-out both @seconds;
                }

                .loop(@index + 1);
            }

            .loop(@from);

            /*&:nth-child(n+6) {
                background: @color1;
            }*/
        }

        &:nth-of-type(1) {
            top: 0;
            left: 40%;
        }

        &:nth-of-type(2) {
            top: 12px;
            right: 36px;
        }

        &:nth-of-type(3) {
            top: 50px;
            right: 10px;
        }

        &:nth-of-type(4) {
            bottom: 70px;
            right: 0;
        }

        &:nth-of-type(5) {
            bottom: 7px;
            right: 10px;
        }

        &:nth-of-type(6) {
            bottom: 0;
            left: 40%;
        }

        &:nth-of-type(7) {
            bottom: 12px;
            left: 36px;
        }

        &:nth-of-type(8) {
            bottom: 50px;
            left: 10px;
        }

        &:nth-of-type(9) {
            top: 70px;
            left: 0;
        }

        &:nth-of-type(10) {
            top: 7px;
            left: 10px;
        }
    }
}

#basket_loyalty_error {
    clear: both;
    display: block;
    line-height: 1.4;
    .rems(14);
}

.richContentWrap {
    max-width: 900px;
    margin: 0 auto;

    @media @mobile {
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
}

.richContentBox + .richContentBox {
    margin-top: 1rem;
}

.richContentImages {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: -1rem;
    margin-right: -1rem;

    @media @mobile {
        flex-wrap: wrap;
    }

    .richContentImage {
        align-self: center;
        padding: 1rem;
    }

    &.richContentImagesLarge {
        justify-content: space-around;

        .richContentImage {
            max-width: 100%;
        }
    }

    &.richContentImagesMedium {
        justify-content: space-around;

        .richContentImage {
            max-width: ~"calc(99.999% / 2)";
            width: 100%;

                @media @mobile {
                    max-width: 100%;
                }
        }
    }

    &.richContentImagesSmall {
        .richContentImage {
            max-width: ~"calc(99.999% / 3)";
            width: 100%;

                @media @mobile {
                    max-width: 100%;
                }
        }
    }
}

.loginFacebookButton {
    box-sizing: border-box;
    position: relative;
    margin: 0.2em;
    padding: 0.8em 3.7em;
    border: none;
    text-align: left;
    line-height: 46px;
    white-space: nowrap;
    border-radius: 0.2em;
    font-size: 16px;
    color: #FFF;
    background-color: #4C69BA;
    background-image: linear-gradient(#4C69BA, #3B55A0);
    font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;
    text-shadow: 0 -1px 0 #354C8C;

    @media @mobile {
        padding: 0.8em 2.75em;
    }
}

.loginFacebookButton:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 100%;
    border-right: #364e92 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 12px no-repeat;
}
.loginFacebookButton:focus {
    outline: none;
    background-color: #5B7BD5;
    background-image: linear-gradient(#5B7BD5, #4864B1);
}
.loginFacebookButton:active {
    box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}

.loginFacebookButton:hover{
    background-color: #5B7BD5;
    background-image: linear-gradient(#5B7BD5, #4864B1);
}

.findNewAddressButton {
    margin: 0.2em;
    padding: 0.8em 3em;
    @media @mobile {
        padding: 0.8em 2.45em;
    }
}

.mt1 {
    margin-top: 1rem;
}

.mt1 {
    margin-top: 1rem;
}

.stripeV3Border {
    border: 1px solid #DDD;
    padding: 20px;
}

.stripeV3Form {
    @media @mobile {
        width: 100%;
        margin: 0 auto;
    }

    @media @tablet {

        width: 80%;
        margin: 0 auto;
    }

    @media @desktop {
        width: 60%;
        margin: 0 auto;
    }

    .button {
        width: 100%;
        margin-bottom: 20px;
    }

    .alert {
        width: 100%;
        margin-top: 20px;
    }
}