/* FONTS */

@font-face {
    font-family: 'Northwell';
    src: url('../fonts/Northwell.woff2') format('woff2'),
        url('../fonts/Northwell.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Northwell';
    src: url('../fonts/Northwell.woff2') format('woff2'),
        url('../fonts/Northwell.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Northwell';
    src: url('../fonts/Northwell-Alt.woff2') format('woff2'),
        url('../fonts/Northwell-Alt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Northwell Alt';
    src: url('../fonts/Northwell-Alt.woff2') format('woff2'),
        url('../fonts/Northwell-Alt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Northwell';
    src: url('../fonts/Northwell-Swash.woff2') format('woff2'),
        url('../fonts/Northwell-Swash.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Northwell Swash';
    src: url('../fonts/Northwell-Swash.woff2') format('woff2'),
        url('../fonts/Northwell-Swash.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.figtree-300 {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}



.raleway-400 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.dm-serif-display-regular {
  font-family: "Northwell Alt", serif;
  font-weight: 400;
  font-style: normal;
}

.dm-serif-display-regular-italic {
  font-family: "Northwell", serif;
  font-weight: 400;
  font-style: italic;
}


.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* SET UP */

:root {
	--lightYellow: #fff;
	--darkYellow: #f1f1f1;
	--blue: #02354a;
	--darkBlue: #0d1522;
	--green: #168226;
	--white: #ffffff;
	--red: #c82424;
	--mainText: #645640;
	--orange: #c89024;
	--lightGrey: #f1f1f1;
	--darkGrey: #c1c1c1;
	--darkerGrey: #a0a0a0;
}

body {font-size: 1rem; color: var(--blue); font-weight: 300; letter-spacing: 0.05rem; font-family: "Figtree";}
h1 {font-size: 3rem;}
h2 {font-size: 2rem; line-height: normal; margin-bottom: 0; font-weight: 300;}
h3 {font-size: 1.6rem; line-height: 2; margin-bottom: 0; font-weight: 300;}
h4 {font-size: 1.2rem; line-height: 1.2; margin-bottom: 0; font-weight: 300;}
h5 {font-size: 1rem; line-height: 1.2; margin-bottom: 0; font-weight: 300;}

b, strong {font-weight: 700;}
.textLogo {font-size: 3rem;}
section {overflow-x: hidden; position: relative;}
.hoverMe:hover {cursor: pointer;}
.bigRadio {transform: scale(1.2);}

.menuSplit {width:30%; height:1px; background: var(--blue); margin: 15px auto; opacity:0.2;}
#ten-countdown {
    color: #fff;
    position: fixed;
    right: 134px;
    top: 125px;
    z-index: 100000;
    background: var(--red);
	padding: 8px 10px;
	line-height: 1;
	display: none;
	font-weight: 400;
}

.blueGradientBg {
    background: radial-gradient(var(--blue), var(--darkBlue));
    background-repeat: no-repeat;
    height: 100%;
}


.jellieHolder {width: 93%;}

#pageCoverFull {position: fixed; width: 100%; height: 100%; z-index: 10000; background: rgba(0,0,0,0.8); backdrop-filter: blur(6px); display: none;}
#paymentMade, #sendBooking, #timedOut {position: fixed; width: 90%; padding: 30px; background: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10001; display: none;}

.mainText {color: var(--mainText);}
.whiteText {color: var(--white);}
.lightYellowText {color: var(--lightYellow);}
.darkYellowText {color: var(--darkYellow);}
.blueText {color: var(--blue);}
.redText {color: var(--red);}
.darkerGreyText {color: var(--darkerGrey);}

.blueBg {background: var(--blue);}
.darkBlueBg {background: var(--darkBlue);}
.lightYellowBg {background: var(--lightYellow);}
.darkYellowBg {background: var(--darkYellow);}
.whiteBg {background: var(--white);}
.greenBg {background: var(--green);}
.redBg {background: var(--red);}
.orangeBg {background: var(--orange);}

.lightGreyBg {background: var(--lightGrey);}
.darkGreyBg {background: var(--darkGrey);}

.darkYellowBorder {border: 1px solid var(--darkYellow);}
.greyBorder {border: 1px solid rgba(0,0,0,0.08) !important;}

.jelliePinkText {color: #8a1b79;}
.jellieBlueText {color: #0173b7;}

.panelDark {background: var(--blue);}
.panelLight {background: var(--lightYellow);}
.paddingTopBottom200 {padding-top: 70px; padding-bottom: 70px;}
.paddingTopBottom40 {padding-top: 60px; padding-bottom: 60px;}
.paddingTopBottom90 {padding-top: 90px; padding-bottom: 90px;}
.paddingTop90 {padding-top: 180px;}
.paddingBottom90 {padding-bottom: 90px;}

.imageCover {position: absolute; width: 100%; height: 100%; top: 0; z-index: 2; background: #000; opacity: 0.4;}
.chefsponslogo {mix-blend-mode: multiply; -webkit-mix-blend-mode: multiply;}

.shortDash {width: 140px; height: 2px;}
.longDash {width: 100%; height: 2px;}
.longDashThin {width: 100%; height: 1px;}
.borderBottomGold {border-bottom: 1px solid var(--blue);}
.borderBottomWhite {border-bottom: 1px solid var(--white);}
.borderTopGold {border-top: 1px solid var(--darkGrey);}
.borderGold {border: 1px solid var(--darkGrey) !important;}

.buttons {position: relative; width: 118px; height: 50px;}
.buttonsCenter {margin: 0 auto;}

.button {border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; border: none; padding: 10px 15px; margin-bottom: 20px; transition: all .4s;}

.checkOutButton:hover {background: var(--blue);}

.buttons svg {position: absolute; left: 0; width: 38px; stroke: var(--lightGold); fill:none; stroke-width: 2px;}
.buttonText {position: absolute; left: 15px; top: 10px;}
.buttonsOff .buttonText {color: var(--gold) !important;}
.buttonsOff svg {stroke: var(--gold);}

.buttonsBlueText svg {stroke: var(--blue);}



.bookingButton {padding: 20px 16px 22px 16px; width: auto; display: inline-block; font-size: 1rem; font-weight: 400; border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); transition: all .4s;}

.bookATableHolder {display: inline-block; padding: 10px 10px 12px 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.2); transition: all .4s;}
.bookATableText {margin-top: -2px;}

/* VIDEO IFRAME */
.videoIframe {padding:56.25% 0 0 0; position:relative; height: 600px}
.videoIframe iframe {position:absolute; top:0; left:-86%; width:275%; height:100%;}

.videoIframeSmall {padding:56.25% 0 0 0; position:relative; height: 240px}
.videoIframeSmall iframe {position:absolute; top:0; left:-88%; width:276%; height:100%;}

/* ANIMATIONS */
.fadeMeInLeft, .fadeMeInRight, .fadeMeInScale { opacity: 0;}
.rotate {animation: rotation 30s infinite linear;}
.glassPanel {overflow-y: hidden;}
.theLinePanel, .theFoodLine, .theDrinksLine, .theVenueLine {overflow-y: hidden;}

.glassPanel svg {position: absolute; margin: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; fill: none; stroke: var(--lightYellow);	stroke-width: 1; opacity: 0.4}

.theLinePanel svg {position: absolute; top: -0%; left: -120%; right: 0; bottom: 0; width: 600%; fill: none; stroke: var(--lightGold); stroke-width: 0.2; transform: rotate(0deg); opacity: 0.2;}

.theFoodLine svg, .theDrinksLine svg, .theVenueLine svg {position: absolute; top: -27%; left: -144%; right: 0; bottom: 0; width: 250%; fill: none; stroke: var(--lightGold); stroke-width: 0.3; transform: rotate(28deg); opacity: 0.2;}


@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.logo-panel {display: none !important;}
.mobileSubSubLogo {position: relative; left: 30px; top: -25px; font-size: 1.3rem;}
.foodFestival {position: relative; left: 40px; top: -25px; font-size: 1.1rem;}
.mac .foodFestival {top: -30px;}
.w-50 {width: 80% !important;}
.bookingTitle {padding: 0; font-size: 1.2rem;}
.navOpenBook {position: relative !important; margin: 0 auto; top: 0 !important; left: 0 !important; transform: translateX(0) !important}

#bookingPanel {position: absolute; bottom: 0; padding: 20px; width: 100%; height: 200px; z-index: 4;}

/* HEADER */

.logo {width: 200px; transition: all 1s; margin-top: 12px;}
#header .container {padding: 17px 20px 17px 20px;}
#header .container, .navText {transition: all 1s;}
.headerScroll {background: var(--darkBlue);}
.headerScroll .container {width: 100%; }
#header {position: fixed; width: 100%; top: 0; z-index: 1003;  transition: all 0.5s; height: 110px;}
.headerScroll .borderBottomWhite {border-bottom: none;}

.headerHolder {height: 640px;}
.headerText, .hoverHeader {height: calc(550px/3);}
.headerTextPush {margin-top: 45px;}

.headerTextBorder {border: 1px solid rgba(255,255,255,0); width: 90%; height: 60%; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.5); backdrop-filter: blur(3px);  -webkit-backdrop-filter: blur(3px);}
.headerTextBorderOn {border: 1px solid var(--darkYellow);}

.headerHolder {position: relative; width: 100%;}
.headerText {position: absolute; width: 100%; z-index: 3;}
.hoverHeader {position: relative;}
.headerTextInner {position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.headerImage {position: absolute; width: 100%; height: 100%; z-index: 1; overflow: hidden;}
.headerImageImage {position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center;}
.headerImage img {position: absolute; height: 100%; object-fit: cover; object-position: center;}
.headerImagesHide {display: none;}
.panelActive, .panelActive .darkYellowText {color: var(--white) !important;}
.michelinStar {position: absolute; width: 270px; z-index: 2; top: -41%; transform: translateY(-50%); opacity: 0.09;}
.michelinStar svg, .michelinStarSmall svg {width: 100%; height: 100%; fill: #fff;}

.michelinStarSmall {width: 30px; height: 30px; z-index: 2; margin: 0 auto; text-align: center;}
.michelinStarSmall img {width: 100%; height: 100%; object-fit: contain;}
.introPush {height: 115px; width: 100%;}


#pastEventsPopOut {
    position: fixed;
    top: 198px;
    z-index: 1001;
    left: 375px;
    width: 200px;
    transition: all 0.5s;
	opacity: 0;
	font-size: 1rem;
	border-left: 1px solid var(--darkBlue);
}

.pastEventsPopOutOn {opacity: 1 !important;}
.mobileNavArrow {width: 20px; transition: all .5s; transform: rotate(270deg);}
.subNavLink {padding: 12px 20px 12px 20px; transition: all .5s; }


.navHolder {position: fixed; top: -110px; z-index: 1002; left: 19px; display: none; width: 261px; height: 316px; transition: all 0.5s; border-radius: 0px 0px 15px 15px }
.navLinkOuter {display: none; padding: 10px 20px 10px 20px; }



.innerArrow {
    position: relative;
    top: -15px;
    width: auto !important;
    height: auto !important;
    background: none !important;
}

.innerArrow img {transform: rotate(-45deg);}


/* FRYING PAN */
#bouncingArrow {position: absolute; bottom: 75px; left: 52%; transform: translateX(-50%) scale(0.7); z-index: 4; }
#bouncingArrow img {width: 100px; animation: bounce 1s cubic-bezier(0.68, 0.35, 0.29, 0.54) infinite;}


@keyframes bounce {
	60% {transform: translateY(80px); }
	70% {transform: translateY(80px) scale(1.1, 0.95); }
}


/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
  }
}
/* Animation */
@keyframes drop-1 {
	from {animation-timing-function: steps(1, end); transform: translate(0, 0); visibility: hidden;}
	30% {animation-timing-function: linear; transform: translate(0, 0); visibility: visible;}
	50%, to {transform: translate(-6px, 0);}
}
@keyframes drop-1-inner {
	from, 30% {fill: #abafba; transform: translate(0, 0);}
	50%, to {fill: rgba(171, 175, 186, 0); transform: translate(0, -27px);}
}
@keyframes drop-2 {
	from {animation-timing-function: steps(1, end); transform: translate(0, 0); visibility: hidden;}
	30% {animation-timing-function: linear; transform: translate(0, 0); visibility: visible;}
	50%, to {transform: translate(-8px, 0);}
}
@keyframes drop-2-inner {
	from, 30% {fill: #abafba; transform: translate(0, 0);}
	50%, to {fill: rgba(171, 175, 186, 0); transform: translate(0, -9px);}
}
@keyframes drop-3 {
	from {animation-timing-function: steps(1, end); transform: translate(0, 0); visibility: hidden;}
	78% {animation-timing-function: linear; transform: translate(0, 0); visibility: visible;}
	98%, to {transform: translate(-24px, 0);}
}
@keyframes drop-3-inner {
	from, 78% {fill: #abafba; transform: translate(0, 0);}
	98%, to {fill: rgba(171, 175, 186, 0); transform: translate(0, -28px);}
}
@keyframes drop-4 {
	from {animation-timing-function: steps(1, end); transform: translate(0, 0); visibility: hidden;}
	78% {animation-timing-function: linear; transform: translate(0, 0); visibility: visible;}
	98%, to {transform: translate(-8px, 0);}
}
@keyframes drop-4-inner {
	from, 78% {fill: #abafba; transform: translate(0, 0);}
	98%, to {fill: rgba(171, 175, 186, 0); transform: translate(0, -36px);}
}
@keyframes drop-5 {
	from {animation-timing-function: steps(1, end); transform: translate(0, 0); visibility: hidden;}
	78% {animation-timing-function: linear; transform: translate(0, 0); visibility: visible;}
	98%, to {transform: translate(8px, 0);}
}
@keyframes drop-5-inner {
	from, 78% {fill: #abafba; transform: translate(0, 0);}
	98%, to {fill: rgba(171, 175, 186, 0); transform: translate(0, -32px);}
}
@keyframes flip-ring {
	from, 27% {animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84); stroke-dashoffset: 20; stroke-width: 4px;}
	53.5% {animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16); stroke-dashoffset: -100; stroke-width: 10px;}
	80%, to {stroke-dashoffset: -220; stroke-width: 4px;}
}
@keyframes pan {
	from, 88%, to {transform: translate(0, 0) rotate(0);}
	20% {animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16); transform: translate(-5px, 0) rotate(-30deg);}
	30% {animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84); transform: translate(0, 0) rotate(20deg);}
	60%, 78% {animation-timing-function: linear; transform: translate(0, 0) rotate(0);}
	81.33% {animation-timing-function: linear; transform: translate(0, 4px) rotate(0);}
	84.67% {animation-timing-function: linear; transform: translate(0, -2px) rotate(0);}
}
@keyframes pan-shadow {
	from, 88%, to {fill: rgba(115, 122, 140, 0.2); transform: scaleX(1);}
	20% {animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16); fill: rgba(115, 122, 140, 0.2); transform: scaleX(0.77);}
	30% {animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84); fill: rgba(115, 122, 140, 0.2); transform: scaleX(1);}
	60%, 78% {animation-timing-function: linear; fill: rgba(115, 122, 140, 0.2); transform: scaleX(1);}
	81.33% {animation-timing-function: linear; fill: rgba(115, 122, 140, 0.25); transform: scaleX(0.87);}
	84.67% {animation-timing-function: linear; fill: rgba(115, 122, 140, 0.225); transform: scaleX(1.065);}
}


/* PAGE COVER */
#pageCover {position: fixed; width: 100%; height: 100%; z-index: 1001; display: none; overflow-y: auto; overflow-x: hidden; top: 0; backdrop-filter: blur(15px); background: rgba(0,0,0,0.5);}
#pageCover .bookingButton {width: 100%; text-align: center;}
.navOuter {padding-top: 148px; width: 100%; padding-left: 10px; overflow-x: hidden; position: relative; transition: all .4s;}
.navOuterClosed {margin-left: -100%;}

#videoHolder {overflow: hidden;}
.videoTextHolder {position: absolute; width: 90%; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; line-height: 1;}
.videoText {width: 100%; font-size: 2rem; font-weight: 200; line-height: 1.5; position: relative; z-index: 3;}
.videoFont {font-size: 3rem; line-height: 0.5;}

.videoHolderSmall .videoTextHolder {display: none;}


.videoOutline {
    border: 2px solid var(--white);
    width: 96%;
    height: calc(90% - 114px);
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.3);
}

.bigLogo {position: absolute; bottom: -170px; z-index: 3; width: 100%; opacity: 0.2; mix-blend-mode: overlay;}
.bigLogo img {width: 100%; height: 100%; object-fit: contain;}

.charityPresentPastImageMain {background-size: cover; width: 100%; height: 400px;}
.charityPresentPastImageRight {background-size: cover; width: 100%; height: 400px; background-position: center;}
.newHeaderTextOuter {position: relative; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
}
/*.newHeaderTextInner {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(13, 21, 34, 0.8); padding: 20px; color: #fff; width: 80%; text-align: center;}*/
.newHeaderTextOuter h2 {font-size: 4rem; position: absolute; top: 80%; width:100%; text-align: center; transform: translateY(-50%); color: #fff; line-height: 1;}

/* VERTICAL LINE */

.scrollContainer {position: absolute; z-index: 1000; bottom: 114px; left: 50%; transform: translateX(-50%);}
.scrollGuide {position: absolute; height: 75px;}
.scrollGuide i {display: block; width: 3px; height: 75px; margin-top: 18px; background-color: rgba(255, 255, 255, 0.3); overflow: hidden; position: relative;}
.scrollGuide i:before {display: block; content: ""; width: 100%; height: 100%; background-color: #fafafa; position: absolute; top: 0; left: 0; animation: scrollGuide-animation 4s infinite normal;}

@keyframes scrollGuide-animation {
  0% {transform: translate3d(0, -100%, 0);}
  100% {transform: translate3d(0, 110%, 0);}
}

/* NAVIGATION */

.navButtonCircle {border-radius: 50%; border: 1px solid var(--white); padding: 11px 6px 8px 6px; width: 30px; height: 30px;}
.navButtonCircle div {width: 100%; height: 1px; background: var(--white); margin-bottom: 4px;}
.navButtonClose div:first-child {transform: rotate(-45deg); margin-top: 3px;}
.navButtonClose div:nth-child(2) {transform: rotate(45deg); margin-top: -5px;}
.calendarIcon {width: 30px; height: 30px;}
.calendarIcon {fill: var(--white);}

.navMap .mapSpecialsText {display: none;}
.navSlider img {width: 100%; height: 240px; object-fit: cover; object-position: center;}
.navSlider .swiper-wrapper {margin-bottom: 0 !important}


.navArrows {border-radius: 50%; width: 40px; height: 40px; border: 2px solid var(--darkYellow); margin-top: -4px; opacity: 0; transition: .4s all; transform: rotate(-180deg)}
.navArrows img {width: 80%; margin-top: -3px; margin-left: 3px;}
.mac .navArrows img {margin-top: 5px;}
.chefNav {width: 50%; position: absolute; right: 25%; bottom: 5%; z-index: 2; mix-blend-mode: overlay; opacity: 0.4; text-align: right}
.chefNav svg {fill: none; stroke: var(--lightYellow); width: 500px; max-height: 500px;}

.sigTitle {font-size: 4.5rem;}

/* SWIPER */
.swiper-pagination-bullet-active {background: var(--lightGold);}
.swiper {width: 100%; height: 100%;}
.menuSwiperHolder .swiper-slide {display: flex; }
.swiper-slide {width: 80%;}    

.testimonialsSwiper .theTestimonial {width: 100%; margin: 0 auto;}    
.testimonialsSwiper .swiper-slide {width: 100%;}

.swiper-wrapper {margin-bottom: 90px;}
.swiper-scrollbar-drag {border-radius: 0; background: var(--darkYellow)}
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {width: 80%; left: 50%; transform: translateX(-50%); height: 6px; background: url("../images/sliderTile.png?123");}

.sliderImage {width: 100%; height: 400px; position: relative; z-index: 1; object-fit: cover; object-position: center;}
.sliderText {width: 100%;}
.goldBurger {width: 115px;}

.sliderArrows {border-radius: 50%; border: 2px solid var(--darkYellow); width: 100px; height: 100px; position: fixed; padding: 20px; top: 50%; transform: translateY(-50%); z-index: 10; opacity: 0; transition: all .4s; }
.sliderArrowPrev {left: 50px; transform: scaleX(-1) translateY(-50%);}
.sliderArrowNext {right: 50px; }

.sponsorsSlider .swiper-wrapper {margin: 40px 0px 60px 0px;}
.sponsorsSlider .swiper-slide {text-align: center;}
.sponsorsSlider .swiper-slide img {max-width: 100%;}
.sponsorsSlider .swiper-pagination-bullet {background: var(--darkBlue); opacity: .5;}
.sponsorsSlider .swiper-pagination-bullet-active {opacity: .25;}
.sponsoesSlider .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 16px;}

/* CHEF SLIDER */
.chefSwiperHolder .swiper-wrapper {margin-bottom: 0;}
.chefSwiperHolder .chefArrows {width: 40px;}
.chefSwiperHolder .chefArrows img {width: 100%;}
.chefSwiperHolder .prevArrow img {transform: rotate(90deg)}
.chefSwiperHolder .nextArrow img {transform: rotate(-90deg)}
.chefSwiper {width: 100%;}
.chefSwiper .swiper-slide {background-position: center; background-size: cover;	width: 100%;/* height: 700px;*/}
.chefImageHolder img {display: block; width: 100%;	height: 300px; object-fit: cover; object-position: top;}
.chefTextHolder {width: 100%; height: 100%; padding: 40px 0px 40px 0px; position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-content: center;}
.chefBg {position: absolute; z-index: 1; opacity: 0.1; width: 65%; bottom: -20px; height: 100%; right: -95px; overflow: hidden;}
.chefBg img {width: 100%; height: 100%; object-fit: contain; object-position: center;}
.chefSocials svg {width: 24px; fill: var(--blue);}

.chefImages img {width: 100%;}
.chefTitle {font-size: 3rem;}
.chefContainer {width: 90%;}

/* TWO COL IMAGE */
.twoColImageHolder {position: relative; width: 100%; height: 400px; overflow: hidden;}
.twoColImageHolder:hover .twoColImage {transform: scale(1);}
.twoColImageText {position: absolute; width: 80%; z-index: 3; bottom: 10%; left: 10%;}
.twoColImage {position: absolute; width: 100%; height: 100%; z-index: 1; transition: all .4s; transform: scale(1.05)}
.twoColImage img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

/* MAP SPECIALS */
.mapSpecials {position: relative; width: 100%; height: 550px;}
.mapSpecialsText {position: absolute; width: 93%; z-index: 3; top: 7%; left: 7%;}
.mapSpecialsImage {position: absolute; width: 100%; height: 100%; z-index: 1; overflow: hidden;}
.mapSpecialsImage img {width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(); -webkit-filter: grayscale();}
.mapSpecialsImage .tm-bg {opacity: 0.03; right: -30%; position: relative; width: 110%}

/* CARD FLIP */
.flip-card {background-color: transparent; width: 100%; height: 500px; perspective: 1000px; position: relative; z-index: 1;}
.flip-card-inner {position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d;}
.flip-card-flip {transform: rotateY(180deg);}
.flip-card:hover {z-index: 1000;}
.flip-card-front, .flip-card-back {position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.flip-card-front {/*background-color: #bbb; color: black;*/}
.flip-card-back {background-color: var(--lightGrey); color: var(--blue); transform: rotateY(180deg); z-index: 5;}
.flip-card-front img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

.flipImage, .flipCover, .flipBorder, .flipText, .flipTextBack, .flipBorderBack {position: absolute; width: 100%; height: 100%;}
.flipImage {z-index: 1;}
.flipCover {z-index: 2; background: rgba(0,0,0,0.4);}
.flipBorder {z-index: 3; border: 1px solid var(--darkYellow);}
.flipBorderBack {z-index: 3; border: 1px solid var(--lightYellow);}
.flipText {z-index: 4; height: auto; bottom: 10%;}
.flipBorder, .flipBorderBack {width: 90%; height: 90%; top: 5%; left: 5%;}
.flipTextTitle {font-size: 1.8rem;}
.flipIcon {position: absolute; width: 40px; height: 40px; z-index: 4; top: 7%; right: 7%;}
.flipIcon svg {stroke: none; fill: white;}
.flip-card-back .flipIcon svg {stroke: none; fill: var(--blue);}
.flipTextBack {z-index: 4; height: auto; top: 50%; transform: translateY(-50%); padding: 40px;}

.theDash {width: 80%; height: 1px; margin: 0 auto;}

/* INNER PAGES */

.menuHolder {width: 100%; height: 100%;}

.imageLarge {height: 300px; width: 100%; object-fit: cover; object-position: center;}
.imageMedium {height: 300px; width: 100%; object-fit: cover; object-position: center;}
.imageSmall {height: 300px; width: 100%; object-fit: cover; object-position: center;}
.imageFocusLeft {object-position: left;}
.imageFocusRight {object-position: right;}

.detailIcons svg {fill: #fff; width: 24px;}
.detailIconsBlue svg {fill: var(--blue); width: 24px;}

.innerHeader {width: 100%; height: 300px; position: relative;}
.innerHeaderTitle {position: relative; z-index: 3; bottom: 40px;}
.innerHeaderImage {width: 100%; height: 100%; top: 0; position: absolute; z-index: 1;}
.innerHeaderImage img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

.townhouseBg {position: absolute; mix-blend-mode: multiply; opacity: 0.085; top: 50%; transform: translateY(-50%); right: -90px;}
.townhouseBg img {object-fit: cover; object-position: center; width: 100%; height: 100%;}

.foodSwiper {height: 600px;}
.foodSwiper img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

.peopleSwiper {height: 860px; padding: 110px 0px}
.peopleSwiper img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

.subTitleBack {position: absolute; top: -20px; opacity: 0.2; left: 160px; font-size: 4rem;}

.galleryImages {width: 100%; height: 100%; overflow: hidden;}
.gallerySmall {height: 400px !important;}
.galleryLarge {height: 400px !important;}
.galleryLargeSquare {height: 600px !important;}
.gallerySmaller {height: 400px !important;}
.galleryHalfSquare {height: 600px !important;}
.galleryFullSquare {height: 600px !important;}

.galleryImages img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

/* MAIL CHIMP */
#mc_embed_signup_scroll {width: 93%;}
.mc-field-group {width: 100%; margin-bottom: 20px; height: 60px;}
.mc-field-group label {width: 170px; color: var(--lightGold);}
.mc-field-group input {background: #f1f1f1; border: 0; border-radius: 30px; padding: 8px 20px 5px 20px; color: #000; width: 100%;}

#mc_embed_signup div.mce_inline_error {margin: 4px 0px 0px 0px !important; padding: 2px 10px 2px 10px !important; width: 95% !important; font-size: 0;}
.mc-field-group input:focus-visible {outline:0;}
#mc-embedded-subscribe {background: var(--blue); border: none; border-radius: 20px; color: var(--white); padding: 14px 20px 13px 20px; line-height: 1; margin-right: 16px; transition: .4s all;}
/*#mc-embedded-subscribe:hover {background: var(--lightYellow); color: var(--darkYellow);}*/

#mce-success-response {color: #000}


/* TIMELINE */

.timeLine {width: 96%; padding: 50px 0; margin: 50px auto; position: relative; overflow: hidden;}
.timeLine:before {content: ''; position: absolute; top: 0; left: 50%; margin-left: -1px; width: 3px; height: 100%; background: var(--darkYellow); z-index: 1}
.timeline-block {width: calc(50% + 11px); display: flex; justify-content: space-between; clear: both;}

.timeline-block-right {float: right;}
.timeline-block-left {float: left; direction: rtl}
.marker {width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--lightYellow); background: var(--blue); margin-top: 3px; z-index: 9999}
.timeline-content {width: 94%; padding: 0 15px 44px 15px; color: #666}
.timeline-content h3 {margin-bottom: 10px; line-height: 1;}
.timeline-content p {line-height: 1.5em; word-spacing: 1px;}

.timeLineSwiper {width: 100%; }
.timeLineSwiper .swiper-slide img {width: 100%; object-fit: cover; object-position: top;}
.timeLineSwiper, .timeLineSwiper .swiper-slide img {height: 300px; padding-bottom: 20px;}
.timeLineSwiper .swiper-horizontal>.swiper-scrollbar, .timeLineSwiper .swiper-scrollbar.swiper-scrollbar-horizontal {width: 100%;}

.sliderButton {bottom: 4%; left: 3%;}

/* BOOKING */
.checkBoxWidth {width: 40px;}
#stripeContainer {padding-top: 30px;}
.scrollPush {scroll-margin-top: 140px;}
.bookingTableHolder {width: 96%;}
.buttonHolders {width: 100%; position: relative;}
.checkButton {padding: 8px 15px 5px 15px !important; border-radius: 16px !important; font-size: 1rem; width: 230px; height: 41px; text-align: center; overflow: hidden; display: block; transition: none;}
.buttonCover {width: 100%; height: 40px; position: absolute; display: none; z-index: 3;}
.selects {padding: 10px 12px 10px 6px; border-radius: 15px; border: none; font-size: 0.9rem;}
tr .selects {width: 135px;}
.addToBasket, .removeFromBasket, .addToWaitList {display: none;}
.checkAvailDisabled, .checkOutDisabled {opacity: 0.3;}
.checkAvailDisabled:hover, .checkOutDisabled:hover {cursor: not-allowed;}



table {border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed;}
table th:nth-child(1) {width: 25%;}
table th:nth-child(2) {width: 25%;}
table th:nth-child(3) {width: 15%;}
table th:nth-child(4) {width: 15%;}
table th:nth-child(5) {width: 200px;}
.trBg {background: rgba(0,0,0,0.04);}
table th,table td { padding: 0.5rem 1rem;}
table th {font-weight: 300;}

.loader {top: 1px;  width: 22px; height: 22px; border: 2px solid #FFF; border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; animation: rotation 1s linear infinite; display: none; z-index: 2;}
.loader::after {content: ''; box-sizing: border-box; position: absolute; left: 50%; top: 0; background: var(--lightYellow); width: 2px; height: 10px; transform: translateX(-50%);}
    
.checkOutButton {font-weight: 600;}
.scaleCheckout {animation: scaleMeUp .6s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
#allergyCheck, .bigRadio {transform: scale(1.5); margin-right: 10px; margin-left: 5px;}
.detailsLabel {width: 100%;}
.detailsTitle {width: 30%; padding-top: 5px;}
.detailsInput {width: 70%; border: none; border-radius: 10px; padding: 5px 10px;}
.redStar {font-size: 2rem; line-height: 0; color: var(--red); position: relative; top: 6px;}



/* VERIFY */
#confirmUser {width: 400px;}

@keyframes scaleMeUp {
	0% {transform: scale(1);}
	50% {transform: scale(1.1);}
	100% {transform: scale(1);}
} 

@keyframes rotation {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
} 

/* FOOTER */
#footer {font-size: 0.9rem;}
#footerSmall {font-size: 0.7rem;}
.socialIcons svg {width: 24px; height: 24px; fill:#fff;}
.chesterLogo {width: 110px;}
.headerTextLogo {width: 90px;}

@media screen and (max-width: 600px) {

		table {border: 0;}
		table caption {font-size: 1.3em;}
		table thead {border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
		table tr {border-bottom: 1px solid rgba(255,255,255,0.3); display: block;}
		table td {border-bottom: 1px solid rgba(255,255,255,0.3); display: block; text-align: right; position: relative;}
		table td::before {content: attr(data-label); float: left;}
		table td:last-child {border-bottom: 0;}
	
}

/* MEDIA QUERIES */
@media (max-width: 767px) {
	
	#pastEventsPopOutMobile {display: none;}
	.mobileNavArrow {transform: rotate(0deg);}
	.mobileNavArrowRotate {transform: rotate(180deg);}
	#pastEventsPopOutMobile .subNavLink {padding: 10px 0px 8px 0px;}
	#pastEventsPopOut {display: none;}
	.slideDownHeightToggle {height: 442px;}
	
	
}


@media screen and (max-width: 768px) {
	
	
   .timeLine:before {left: 11px; width: 3px;}
   .timeline-block {width: 100%; margin-bottom: 30px;}
   .timeline-block-right {float: none;}
   .timeline-block-left {float: none; direction: ltr;}
	
	.mobileLogo {margin-left: -35px;}
	
}


@media (min-width: 768px) {
	
	#paymentMade, #sendBooking, #timedOut {width: 50%;}
	
	#paymentForm table tr {height: 66px;}
	
	.newHeaderTextOuter h2 {font-size: 5.5rem;}

	
	#pastEventsPopOutMobile {display: none;}
	#pastEventsPopOut {display: block;}
	
	.paddingTopBottom200 {padding-top: 140px; padding-bottom: 140px;}
	
	
	#pastEventsPopOut {left: 300px}
	
	.navHolder {left: 39px; height: 317px;}
	
	.newHeaderTextInner {padding: 20px; width: 50%;}
	.navOuter {padding-top: 125px; width: 414px; padding-left: 40px; padding-right: 40px;}
	
	.bioScroll2 {max-height: 278px; overflow-y: auto; padding-right: 25px;}
	
	.headerTextBorder {height: 66%;}
	.headerTextLogo {width: 120px;}
	.mc-field-group {height: 90px;}

	
	.navSlider img {height: 440px;}
	.videoHolderSmall .videoTextHolder {display: block;}
	.videoFont {font-size: 4rem; line-height: 0.5;}
	
	.bookATableHolder {padding: 10px 15px 12px 16px; border-radius: 20px;}
	.bookATableText {margin-top: 0px;}

	
	.logo {width: 290px; margin-top: 8px;}
	.bookingButton {padding: 20px 30px 22px 30px; font-size: 0.9rem;}
	.michelinStar {width: 410px; top: -44%;}
	.w-50 {width: 50% !important;}
	
	.videoText {width: 90%; font-size: 2.8rem;}
	.videoHolderSmall .videoText {font-size: 2rem;}

	.chefImageHolder img {height: 500px;}

	.galleryLarge {height: 600px !important;}

	.headerTextInner {width: 85%;}
	.headerTextPush {margin-top: 0px;}
	
	
	.stampHolder {width: 160px; height: 160px; right: 0; top: -80px;}
	
	.mapSpecialsImage .tm-bg {width: 100%;}

	.theLinePanel svg {top: 0%; left: -100%; width: 500%; stroke-width: 0.1;}
	
	.sliderImage {height: 600px;}
	.galleryHalfSquare {height: 500px !important;}
	.galleryFullSquare {height: 1000px !important;}
	
	.theFoodLine svg, .theDrinksLine svg, .theVenueLine svg {top: -18%; left: -24%; width: 128%; stroke-width: 0.25; transform: rotate(-4deg);}
	.bookingTitle {padding: 16px 0px 0px 20px;}
	.innerBooking {top: 107px !important;}
	.navOpenBook {top: 0 !important;}
	
	.mc-field-group {width: 50%;}
	.mc-field-group input {width: 95%;}
	#mc-embedded-subscribe {margin-right: 8px;}
	.mapSpecials {height: 450px;}
	
	.timeLine {width: 80%;}
	.marker {margin-top: 12px;}
	.timeLineSwiper, .timeLineSwiper .swiper-slide img {height: 400px;}
	
	.imageLarge {height: 500px;}
	.imageMedium1 {height: 600px;}
	.imageSmall {height: 250px;}
	.imageMedium {height: 400px;}

	



	
}

@media (min-width: 820px) {
	
	.theLinePanel svg {top: 0%; left: -60%;  width: 316%;}
	.timeLine {width: 70%;}

	
}


@media (max-width: 1024px) {
	
	.headerImage .headerImageImage {animation: imagePan 120s linear infinite;}
	
	.navText {display: none;}
	.navTextHidden {display: none;}
	
	@keyframes imagePan {
		0%   {background-position: 0% 50%;}
		50%  {background-position: 100% 50%;}
		100% {background-position: 0% 50%;}
	}


}


@media (min-width: 1024px) {
	
	h2 {font-size: 2rem;}
	h3 {font-size: 1.5rem;}
	h4 {font-size: 1.3rem;}
	h5 {font-size: 1.1rem;}

	.theLinePanel svg {top: -1%; left: -20%;  width: 130%; stroke-width: 0.2;}
	.swiper-slide {width: 90%;} 
	.sliderImage {height: 600px;}
	#pageCover .bookingButton {width: 50%; margin: 0 auto; text-align: center; display: block;}
	.headerHolder, .headerText, .hoverHeader {height: 700px;}
	.headerTextBorder {height: 30%;}
	
	.chefTextHolder {padding: 0px 40px;}
	.chefContainer {width: 93%;}
	
	

}

@media (min-width: 1180px) {
	
	/*.headerText, .hoverHeader {height: calc(750px/3);}*/
	
	.swiper-slide:hover .sliderArrowNext, .swiper-slide:hover .sliderArrowPrev {opacity: 1;}
	.navLink:hover .navArrows {opacity: 1; transform: rotate(0deg)}
	
	.videoIframe, .videoIframeSmall {height: 600px}
	.videoIframe iframe, .videoIframeSmall iframe {left:0; width:100%; }
	
	.container, .container-lg, .container-md, .container-sm {max-width: 1100px;}
	
	

	

}


@media (min-width: 1265px) {
	
	
	.videoText {width: 75%; font-size: 3rem;}
	
	
	.chefImageHolder img {height: 700px;}

	.container, .container-lg, .container-md, .container-sm {max-width: 1210px;}
	
	.paddingTopBottom90 {padding-top: 90px; padding-bottom: 90px;}

	
	.sliderImage {height: 800px;}
	.sliderText {width: 60%;}
	
	.twoColImageHolder {position: relative; width: 100%; height: 800px;}
	.twoColImageText {width: 100%;}
	
	.testimonialsSwiper .theTestimonial {width: 60%;}  
	
	.theLinePanel svg {top: -16%; left: 0%; right: 0; width: 102%; stroke-width: 0.4; transform: rotate(-11deg);}
	
	.headerStamp {top: 523px; width: 160px; height: 160px;}
	
	.flip-card:hover .flipBack {transform: rotateY(180deg);}
	.subNavLink:hover {background: var(--darkerGrey);}
	.subNavLink:hover .navLinkText {color: var(--darkBlue) !important;}
	.navLinkOuter:hover {background: var(--blue);}
	

	.headerHolder, .headerText, .hoverHeader {height: 900px;}
	.charityPresentPastImageMain {height: 825px;}
	
	#paymentMade, #sendBooking, #timedOut {width: 30%;}


}


@media (min-width: 1366px) {
	
	
	
	#pastEventsPopOut {left: 330px;}
	
	.innerHeader {height: 400px;}
	
	.swiper-slide {width: 90%;}   
	.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {width: 90%;}
	.twoColImageHolder {height: 600px;}
	
	.theLinePanel svg {top: -16%; left: -52%; width: 152%; stroke-width: 0.2; transform: rotate(16deg);}

	.theFoodLine svg, .theDrinksLine svg, .theVenueLine svg {top: -29%;}
	
	.navSlider img {height: 440px;}
	.videoText {width: 75%;}
	
	.navOuter {padding-left: 74px; padding-right: 74px;}

	.imageLarge {height: 800px;}
	
		/*.paddingTopBottom200 {padding-top: 200px; padding-bottom: 200px;}*/
	.chefContainer {width: 88%;}
	
	.navHolder {left: 69px;}
	
	.bioScroll2 {max-height: 278px; overflow-y: auto; padding-right: 25px;}

	.bioScroll2::-webkit-scrollbar {
		-webkit-appearance: none;
		background-color: rgba(255, 255, 255, 0.5);
		width: 7px;
	}

	.bioScroll2::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: rgba(0, 0, 0, .15);
		box-shadow: 0 0 1px rgba(255, 255, 255, 1);
	}
	

	
}

@media (min-width: 1400px) {

	.navOuter {padding-left: 74px; padding-right: 0px;}
	.timeLineSwiper, .timeLineSwiper .swiper-slide img {height: 500px;}
	.headerTextLogo {width: 170px;}
	
	.paddingTopBottom200 {padding-top: 100px; padding-bottom: 100px;}
	
	.charityPresentPastImageMain {height: 624px;}
	.charityPresentPastImageRight {height: 300px;}
	.textLogo {font-size: 3rem;}

		.navHolder {left: 114px;}
	
	#pastEventsPopOut {left: 375px; top: 198px;}
	.navHolder {height: 320px;}
	
}


@media (min-width: 1600px) {
	
	/*.button:hover, .bookATableHolder:hover, .bookingButton:hover {background: var(--blue);}*/
	
	h1 {font-size: 4rem;}
	h2 {font-size: 3rem;}
	h3 {font-size: 2rem;}
	h4 {font-size: 1.5rem;}
	h5 {font-size: 1rem;}
	
	.navHolder {height: 350px;}
	#pastEventsPopOut {top: 208px;}
	.flip-card {height: 600px;}

	.bioScroll2 {max-height: 515px; }
	.chefContainer {width: 70%;}
	
	.bookingTableHolder {width: 60%;}

	.flipTextTitle {font-size: 2.5rem;}
	.bookATableText {margin-top: -2px;}
	
	.imageLarge {height: 1000px;}
	.imageMedium {height: 700px;}
	.imageSmall {height: 400px;}
	
	.charityPresentPastImageMain {height: 1028px;}
	.charityPresentPastImageRight {height: 500px;}

	
	.theFoodLine svg, .theDrinksLine svg, .theVenueLine svg {top: -96%; left: -11%; width: 128%; stroke-width: 0.25; transform: rotate(-12deg);}
		
	.galleryLarge {height: 1100px !important;}
	.gallerySmall {height: 550px !important;}
	.galleryLargeSquare {height: 1000px !important;}
	.galleryHalfSquare {height: 700px !important;}
	.galleryFullSquare {height: 1400px !important;}
	
	h2 {font-size: 2.8rem;}
	h3 {font-size: 2.5rem;}
	h4 {font-size: 1.4rem;}
	h5 {font-size: 1.2rem;}
	
	.jellieHolder {width: 75%;}
	
	body {font-size: 1.2rem;}

	.container {max-width: 1520px;}
	.swiper-slide {width: 80%;}   
	
	.videoText {width:50%; font-size: 3rem; line-height: 1.5; position: relative; z-index: 3;}
	.videoFont {font-size: 6rem; line-height: 0.5;}

	
	.theLinePanel svg {top: -16%; left: 0%; right: 0; width: 102%; stroke-width: 0.4; transform: rotate(-11deg);}
	.timeLineSwiper, .timeLineSwiper .swiper-slide img {height: 600px;}
	
}

@media (min-width: 1800px) {

	.container {max-width: 90%;}
	
}