/*
Theme Name: Backlot Diner
Author: Ben Holden
Author URI:  benholden.github.io
Description: Theme for Backlot Diner
Version: 1

*/


/*********************/
/******* Reset *******/
/*********************/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*********************/
/*** Custom Styles ***/
/*********************/
#wpadminbar {
  display: none;
}
.work-sans-normal {
  font-family: "Work Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.work-sans-bold {
  font-family: "Work Sans", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.anton-regular {
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
}


html {
  scroll-behavior: smooth;
}
body {

   /* Global custom properties */

  /* Font sizes: */
  --size-h0: 6.667rem; /*120px*/
  --size-h1: 4.375rem; /*70px*/
  --size-h2: 3.125rem; /*50px*/
  --size-h3: 2rem; /*32px*/
  --size-h4: 1.5rem; /*24px*/
  --size-base: 1.125rem; /*18px*/
  --size-border: 1.875rem; /*30px*/

  /* Colours */
  --primary: #1B1B1B;
  --background: #F3F5E8;
  --yellow: #F1C611;
  --orange: #F15A2A;
  --teal: #17A79D;
  --teal-dark: #0C6D80;
  --purple: #9D8EE4;
  --purple-dark: #5D46CF;
  --pink: #FEA1B3;
  --pink-dark: #E55661;



  color: var(--primary);
  background-color: var(--background);
  line-height: 1.5;
  font-family: "Work Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: var(--size-base);
}

::-moz-selection {
  color: var(--primary);
  background: var(--teal);
}

::selection {
  color: var(--primary);
  background: var(--teal);
}

.block--pink *::-moz-selection {
  color: var(--primary);
  background: var(--teal);
}

.block--pink *::selection {
  color: var(--primary);
  background: var(--teal);
}

h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection {
  color: var(--primary);
  background: var(--pink);
}

h1::selection,
h2::selection,
h3::selection {
  color: var(--primary);
  background: var(--pink);
}

/* Typography */

h1,
h2,
h3,
h4 {
  line-height: 1.1;
  text-transform: uppercase;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1.5rem;
}

.heading-xxl {
  line-height: 1.1;
  text-transform: uppercase;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1.5rem;
  font-size: var(--size-h0);
  text-decoration: none;
}
@media (max-width: 767px) {
  .heading-xxl {
    font-size: var(--size-h1);
  }
}

.heading-xl {
  line-height: 1.1;
  text-transform: uppercase;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1.5rem;
  font-size: var(--size-h1);
  text-decoration: none;
}
@media (max-width: 767px) {
  .heading-xl {
    font-size: var(--size-h2);
  }
}

.heading-l {
  line-height: 1.1;
  text-transform: uppercase;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1.5rem;
  font-size: var(--size-h2);
  text-decoration: none;
}
@media (max-width: 767px) {
  .heading-l {
    font-size: var(--size-h3);
  }
}

.heading-m {
  line-height: 1.1;
  text-transform: uppercase;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1.5rem;
  font-size: var(--size-h3);
}
@media (max-width: 767px) {
  .heading-m {
    font-size: var(--size-h4);
  }
}

.heading-s {
  line-height: 1.1;
  text-transform: uppercase;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1.5rem;
  font-size: var(--size-h4);
  text-decoration: none;
}
@media (max-width: 767px) {
  .heading-s {
    font-size: var(--size-base);
  }
}

.heading-xs {
  line-height: 1.1;
  text-transform: uppercase;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1.5rem;
  font-size: var(--size-base);
  text-decoration: none;
}
@media (max-width: 767px) {
  .heading-xs {
    font-size: var(--size-base);
  }
}


p {
  margin-bottom: var(--size-base);
}

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

p a {
  color: inherit;
  text-decoration: none;
  position: relative;
}

p a:after {
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  background-color: #00F1D3;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  z-index: -1;
}

p a:hover:after {
  height: calc(100% + 6px);
}

ul {
  padding-left: 19px;
  font-size: var(--size-base);
}

li::marker {
  color: var(--teal);
}

.block--git li::marker {
    color: white;
}

.block--envirofone li::marker {
  color: white;
}

/* Links / buttons */

.skip {
	position: absolute;
	left: -999em;
	width: 990em;
}

a.skip:active,
a.skip:focus {
	left: 0;
	top: 0;
	padding: 15px;
	border: 3px black solid;
	background-color: white;
	width: auto;
	z-index: 1;
	text-decoration: none;
}

.button {
  display: inline-block;
  color: var(--background);
  background-color: var(--orange);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--size-h4);
  position: relative;
  transition: all 0.2s ease;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  padding: 6px 20px;
  border-radius: 30px;
  transition: 0.25s ease;
}

.button:hover {
  transform: rotate(-6deg) scale(1.1);
}

.button--fancy::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(assets/img/star.svg);
  margin-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
}

.button--fancy::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(assets/img/star.svg);
  margin-left: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
}

.button--angle {
  transform: rotate(-6deg);
  margin-top: 10px;
}

.button--angle:hover {
  transform: rotate(0deg) scale(1.1);
}

/* Body  */

section {
  padding: 75px 50px;
  overflow: hidden;
}
@media (max-width: 949px) {
  section {
    padding: 50px 25px;
  }  
}

.page--teal .section-heading {
  color: var(--teale);
}

.page--pink .section-heading {
  color: var(--pink-dark);
}

.page--purple .section-heading {
  color: var(--purple);
}

.page--yellow .section-heading {
  color: var(--orange);
}

.page--xmas .section-heading {
  color: var(--pink-dark);
}

.container {
	width: 100%;
	/* padding: 0 20px; */
	max-width: 1140px;
	margin: 0 auto;
}

.container--narrow {
	max-width: 960px;
}

.grid {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
}
.grid--nowrap {
  flex-wrap: nowrap;
}
@media (max-width: 949px) {
  .grid {
    gap: 25px;

  }
}
@media (max-width: 767px) {
  .grid {
    flex-direction: column;
  }
}

.grid__item {
  width: calc(25% - 37.5px);
}
@media (max-width: 949px) {
  .grid__item {
    width: calc(25% - 18.75px);
  }
}

.grid__item--full {
  width: 100%;
}
.grid__item--third {
  width: calc(33% - 31px);
}
@media (max-width: 949px) {
.grid__item--third {
  width: calc(33% - 15px);
}
}
.grid__item--half {
  width: calc(50% - 1px);
}
@media (max-width: 767px) {
  .grid__item {
    width: 100%;
  }
}

.color-primary {color: var(--primary);}
.color-background {color: var(--background);}
.color-yellow {color: var(--yellow);}
.color-orange {color: var(--orange);}
.color-teal {color: var(--teal);}
.color-teal-dark {color: var(--teal-dark);}
.color-purple {color: var(--purple);}
.color-purple-dark {color: var(--purple-dark);}
.color-pink {color: var(--pink);}
.color-pink-dark {color: var(--pink-dark);}

.pattern {
  position: relative;
}
.pattern::before {
    content: "";
    position: absolute;
    width: 400vw;
    height: 400vh;
    top: -50vh;
    left: -100vw;
    background: url(assets/img/pattern.png) 0 0 repeat;
    transform: rotate(18deg);
    opacity: 0.8;
    transform-origin: center center;
}

.pattern .container {
  position: relative;
}

.page .pattern .section-heading {
  color: var(--background);
  text-shadow: 4px 4px 0px var(--background);
}

.page .blank .section-heading {
  color: var(--pink-dark);
}

.page .pattern--purple {
  background-color: var(--purple);
}

.page .pattern--purple .section-heading {
  text-shadow: 4px 4px 0px var(--purple-dark);
}

.page .pattern--pink {
  background-color: var(--pink);
}

.page .pattern--pink .section-heading {
  text-shadow: 4px 4px 0px var(--pink-dark);
}

.page .pattern--teal {
  background-color: var(--teal);
}

.page .pattern--teal .section-heading {
  text-shadow: 4px 4px 0px var(--teal-dark);
}

.page .pattern--yellow {
  background-color: var(--yellow);
}

.page .pattern--yellow .section-heading {
  text-shadow: 4px 4px 0px var(--orange);
}

.page .pattern--xmas {
  background-color: var(--pink);
}

.page .pattern--xmas .section-heading {
  text-shadow: 4px 4px 0px var(--pink-dark);
}

.pattern--xmas::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(assets/img/xmas.png) 0 0 repeat;
  transform: rotate(0deg);
  opacity: 0.8;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: darken;
}

.a11y {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  margin: -1px;
}

.panel {
  background: var(--background);
  padding: 50px 25px;
  border-radius: 50px;
  margin-bottom: 25px;
}
.pattern--teal .panel {
  box-shadow: 10px 10px 0px 0px var(--teal-dark);
}

.pattern--pink .panel {
  box-shadow: 10px 10px 0px 0px var(--pink-dark);
}

.pattern--purple .panel {
  box-shadow: 10px 10px 0px 0px var(--purple-dark);
}


.pattern--yellow .panel {
  box-shadow: 10px 10px 0px 0px var(--orange);
}

/* Header */

.site-header {
  width: 100%;
  background: var(--pink-dark);
  z-index: 100;
  position: absolute;
  margin-top: 30px;
  padding: 20px 50px;
  display: flex;
}
@media (max-width: 767px) {
  .site-header {
    height: 50px;
    justify-content: flex-end;
    align-items: center;
    padding: 25px;
 }
}

.site-header__content {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 20px 0;
}
.site-header__logo {
  display: block;
  width: 151px;
  height: 125px;
  background-image: url(assets/img/logox2.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -10000px;
  position: absolute;
  top: -25px;
  left: 50px;
}

@media (max-width: 767px) {
  .site-header__logo {
    width: 92px;
    height: 76px;
    top: -12px;
    left: 25px;
    z-index: 10000;
  }
}

.site-nav {
  display: none;
  width: 100%;
}
@media (min-width: 768px) {
  .site-nav {
    display: flex !important;
    justify-content: flex-end;
    position: static;
    background-color: transparent;
    width: auto;
    flex: 1;
 }
}
@media (max-width: 767px) {
  .site-nav {
    background: var(--background);
    padding: 0 20px 20px 20px;
    z-index: 100;
    position: absolute;
    top: 50px;
    left: 0;
 }
}
.site-nav.active {
  display: block;
}
.site-nav__sections {
  list-style: none;
  padding: 0 118px 0 150px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .site-nav__sections {
    display: block;
    text-align: center;
	    padding: 0;
 }
}
.site-nav__sections li {
  position: relative;
}
@media (min-width: 768px) {
  .site-nav__sections li {
    display: inline-flex;
    align-items: center;
    color: white;
 }
}

.site-nav__sections a {
  text-decoration: none;
  padding: 5px 15px;
  display: block;
  line-height: 1.1;
  text-transform: uppercase;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  color: var(--background);
  transition: 0.25s ease;
}
.site-nav__sections a:hover {
  color: var(--yellow);
}

@media (max-width: 767px) {
  .site-nav__sections a {
    display: block;
    margin-top: 20px;
    padding: 0;
    color: var(--pink-dark);
 }
}

.site-nav__sections li.nav-order {
    position: static;
    width: 0;
}
@media (max-width: 767px) {
.site-nav__sections li.nav-order {
    width: auto;
}
}

@media (max-width: 767px) {
  .nav-order {
    width: auto;
  }
}

.nav-order a {
    background-color: var(--teal);
    width: 110px;
    height: 110px;
    border-radius: 55px;
    position: absolute;
    top: calc(50% - 56px);
    right: 50px;
    transition: 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    color: white;
    line-height: 1.2;
}
@media (max-width: 767px) {
  .nav-order a {
    position: static;
    margin: 15px auto 0;
  }
}

.nav-order a:hover {
  transform: rotate(5deg) translate(0px, 0px) scale(1.1, 1.1);
  color: white;
  text-decoration: none;
}

.site-nav__sections a:hover span {
  text-decoration: underline;
}

.site-nav__sections .nav-order a:hover span {
  text-decoration: none;
}

.nav-toggle {
  transition: 0.5s ease-in-out;
  cursor: pointer;
  line-height: 1.1;
  text-transform: uppercase;
  font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
  color: var(--background);
}
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
 }
}
.nav-toggle span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  color: var(--background);
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
  border-radius: 3px;
}



/* Sections  */

/* Hero  */

.hero--home {
  background-size: cover;
  background-position: 50%;
  height: 650px;
  padding: 90px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero--home:before {
  content: "";
  display: block;
  background: black;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.2;
}

.hero--home .hero__text {
  width: 100%;
  max-width: 580px;
  text-align: center;
}

.hero--home .hero__text h1 {
  color: var(--background);
  font-size: var(--size-h0);
  text-shadow: 4px 4px 0px rgba(12,109,128,1);
  position: relative;
  margin: 0;
}

@media (max-width: 767px) {
  .hero--home .hero__text h1 {
    font-size: var(--size-h1);
    text-shadow: 4px 4px 0px rgba(12,109,128,1);
  }
}

.hero--home .hero__text h1 span {
  position: relative;
  z-index: 1;
}

.hero--home .hero__text-quote h1:before {
  content: "";
  width: 90px;
  height: 90px;
  display: inline-block;
  position: relative;
  top: -37px;
  left: 0px;
  background-image: url(assets/img/quote-orange.svg);
  z-index: 0;
  margin-right: -20px;
  background-size: 100%;
  margin-left: -60px;
}

.hero--home .hero__text-quote h1:after {
  content: "";
  width: 90px;
  height: 90px;
  display: inline-block;
  position: relative;
  top: -37px;
  left: 0px;
  background-image: url(assets/img/quote-orange.svg);
  z-index: 0;
  margin-right: -60px;
  background-size: 100%;
  margin-left: -20px;
  transform: scaleX(-1);
}
@media (max-width: 767px) {
  .hero--home .hero__text-quote h1:after {
    position: absolute;
    top: auto;
    bottom: 24px;
    left: auto;
  }
}

.hero--home .hero__text-quote > span {
  color: var(--background);
  font-weight: bold;
  font-style: italic;
  position: relative;
  display: block;
}

.hero--home .hero__text-quote > span:before {
  content: "- ";
}

.hero--home .hero__text .button {
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
}

.hero__text h1 {
  color: var(--background);
  font-size: var(--size-h1);
  text-shadow: 4px 4px 0px rgba(12,109,128,1);
  position: relative;
  margin: 0;
}

@media (max-width: 767px) {
  .hero__text h1 {
    font-size: var(--size-h2);
    text-shadow: 4px 4px 0px rgba(12,109,128,1);
  }
}

.hero--half {
  padding-top: 180px;
}

.background-video {
  position: absolute;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  top: 0;
}

.background-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1; /* Send the video behind content */
  transform: translate(-50%, -50%);
  object-fit: cover; /* Ensure video covers the container */
}

/* Book  */


@media (min-width: 768px) {
section.book {
    padding-bottom: 85px;
}
 }

.book .grid {
  align-items: center;
}

.book__widget {
  width: 370px;
  border-radius: 50px;
  padding: 50px 0;
  background-color: white;
  box-shadow: 10px 10px 0px 0px var(--pink-dark);
}

@media (max-width: 767px) {
  .book__widget {
    width: 100%;
  }
 }

.book__content {
  width: calc(100% - 420px)
}
@media (max-width: 767px) {
  .book__content {
    width: 100%;
  }
  }

.book__text {
    background: var(--background);
    padding: 40px 25px;
    border-radius: 50px;
    box-shadow: 10px 10px 0px 0px var(--pink-dark);
}

.pattern--teal .book__text {
    box-shadow: 10px 10px 0px 0px var(--teal-dark);
}


.pattern--pink .book__text {
    box-shadow: 10px 10px 0px 0px var(--pink-dark);
}


.pattern--purple .book__text {
    box-shadow: 10px 10px 0px 0px var(--purple-dark);
}


.pattern--yellow .book__text {
    box-shadow: 10px 10px 0px 0px var(--orange);
}



/* Menus  */

.menus .grid {
  align-items: center;
}


.menus__link {
  display: flex;
  padding: 20px;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1/1.5;
  color: white;
  text-shadow: 4px 4px 0px var(--pink-dark);
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .menus__link {
    aspect-ratio: 1.75/1;
  }
}

.menus__link-img {
  position: absolute;
  top: 0;
  left: 0;
  align-items: flex-end; 
  width: 100%;
  height: 100%;
  transition: 0.25s ease;
  background-size: cover;
  background-position: 50%;
}

.menus__link:hover .menus__link-img {
  transform: scale(1.2);
}

.menus__link-img:before {
  content: "";
  display: block;
  background: black;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.2;
  transition: 0.25s ease;
}

.menus__link:hover .menus__link-img:before {

  opacity: 0.3;
}

.menus__link span {
  position: relative;
}

/* Banner ad  */


img.banner-ad__img {
  display: block;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

@media (max-width: 767px) {
  img.banner-ad__img.banner-ad__img-dt {
    display: none;
  }
}

img.banner-ad__mobile-img {
  display: block;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  img.banner-ad__mobile-img {
    display: none;
  }
}

/* News  */

a.news__item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--pink-dark);
	background: var(--background);
	padding-bottom: 10px;
}

a.news__item .news__item-title {
  transition: 0.25s ease;
	padding: 0 10px;
}
.news__item-date {
	
	padding: 0 10px;
}

a.news__item:hover .news__item-title {
  text-decoration: underline;
}

span.news__item-title {
  margin: 0;
}

.news__item-img-wrap {
  overflow: hidden;
}

.news__item-img {
  aspect-ratio: 1/1;
  background-color: var(--pink);
  transition: 0.25s ease;
  background-size: cover;
  background-position: 50%;
}

.news__item:hover .news__item-img {
  transform: scale(1.2);
}

.pagination ul {
  display: flex;
  margin: 0;
  padding: 50px 0;
  list-style: none;
  justify-content: center;
}

.pagination a {
  display: block !important;
  width: 14px;
  height: 14px;
  border: 0;
  text-indent: -10000px;
  padding: 0;
  position: relative;
  border-radius: 7px;
  background: var(--pink);
}

.pagination ul {
  gap: 10px;
}

.pagination .active a {
  background: var(--pink-dark);
}

.pagination a:hover {
  background: var(--pink-dark);
}

.pagination__prev a {
  position: relative;
  background: transparent!important;
}

.pagination__prev a:before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 7px 12.1px 7px 0;
  border-color: transparent var(--pink) transparent transparent;
  transform: rotate(0deg);
  text-indent: 10000px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.pagination__prev a:hover:before {
  border-color: transparent var(--pink-dark) transparent transparent;
}

.pagination__next a {
  position: relative;
  background: transparent!important;
}

.pagination__next a:before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 7px 0 7px 12.1px;
  border-color: transparent transparent transparent var(--pink);
  transform: rotate(0deg);
  text-indent: 10000px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.pagination__next a:hover:before {
  border-color: transparent transparent transparent var(--pink-dark);
}


.main--yellow h1, .main--yellow h2, .main--yellow h3, .main--yellow h4 {color: var(--yellow);}
.main--orange h1, .main--orange h2, .main--orange h3, .main--orange h4 {color: var(--orange);}
.main--teal h1, .main--teal h2, .main--teal h3, .main--teal h4 {color: var(--teal);}
.main--purple h1, .main--purple h2, .main--purple h3, .main--purple h4 {color: var(--purple);}
.main--pink h1, .main--pink h2, .main--pink h3, .main--pink h4 {color: var(--pink-dark);}
.main--xmas h1, .main--xmas h2, .main--xmas h3, .main--xmas h4 {color: var(--pink-dark);}

.main__img {
  margin: 0 0 50px;
  width: 100%;
  aspect-ratio: 3/1;
  background-size: cover;
  background-position: 50%;
}
@media (max-width: 767px) {
  .main__img {
    margin: 0 0 25px;
  }
}

.main__img--top {
  margin: 100px 0 50px;
}
@media (max-width: 767px) {
  .main__img--top {
    margin: 75px 0 25px;
  }
}

.main__title {
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .main__title {
    margin-bottom: 25px;
  }
}

/* Text & image block  */

.text-image .grid {
  align-items: center;
}

.text-image__text {
  width: calc(50% - 25px);
}
@media (max-width: 767px) {
  .text-image__text {
    width: 100%;
  }
  }

.text-image__image {
  width: calc(50% - 25px);
  display: block;
}
@media (max-width: 767px) {
.text-image__image {
  width: 100%;
  display: block;
}
}

.text-image_content {
    background: var(--background);
    padding: 50px 25px;
    border-radius: 50px;
    margin-bottom: 25px;
}
.pattern--teal .text-image_content {
    box-shadow: 10px 10px 0px 0px var(--teal-dark);
}

.pattern--pink .text-image_content {
    box-shadow: 10px 10px 0px 0px var(--pink-dark);
}

.pattern--purple .text-image_content {
    box-shadow: 10px 10px 0px 0px var(--purple-dark);
}


.pattern--yellow .text-image_content {
    box-shadow: 10px 10px 0px 0px var(--orange);
}

/* Reviews  */

.reviews__title {
  width: 25%;
}

@media (max-width: 767px) {
  .reviews__title {
    width: 100%;
  }
  }

.reviews__content {
  width: 75%;
  position: relative;
}

@media (max-width: 767px) {
  .reviews__content {
    width: 100%;
  }
  }


.reviews__content:before {
  content: "";
  width: 70px;
  height: 70px;
  display: inline-block;
  position: relative;
  top: -37px;
  left: 0px;
  background-image: url(assets/img/quote-pink.svg);
  z-index: 0;
  margin-right: -20px;
  background-size: 100%;
  margin-left: -60px;
  position: absolute;
  top: -38px;
  left: 30px;
}

.review__quote.heading-l {
  display: block;
  margin-bottom: 15px;
  color: var(--pink-dark);
}

.review__author {
  display: block;
  font-weight: bold;
  font-style: italic;
  color: var(--pink-dark);
}
.pattern--teal .review__quote.heading-l,
.pattern--teal .review__author {
    color: black;
}


.pattern--pink .review__quote.heading-l,
.pattern--pink .review__author {
    color: black;
}


.pattern--purple .review__quote.heading-l,
.pattern--purple .review__author {
    color: white;
}


.pattern--yellow .review__quote.heading-l,
.pattern--yellow .review__author {
    color: black;
}

.reviews .slick-list {
  margin-bottom: 20px;
}

.reviews .slick-prev {
  display: block!important;
  width: 14px;
  height: 14px;
  border: 0;
  text-indent: -10000px;
  padding: 0;
  position: relative;
	background: transparent;
}

.reviews .slick-prev:before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 7px 12.1px 7px 0;
  border-color: transparent var(--pink)transparent transparent;
  transform: rotate(0deg);
  /* text-indent: 10000px; */
  display: block;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.pattern--teal.reviews .slick-prev:before {border-color: transparent white transparent transparent;opacity: 0.8} 
.pattern--pink.reviews .slick-prev:before {border-color: transparent white transparent transparent;opacity: 0.8} 
.pattern--purple.reviews .slick-prev:before {border-color: transparent white transparent transparent;opacity: 0.8} 
.pattern--yellow.reviews .slick-prev:before {border-color: transparent white transparent transparent;opacity: 0.8} 

.reviews .slick-next {
  display: block;
  width: 14px;
  height: 14px;
  border: 0;
  padding: 0;
  position: relative;
  text-indent: -10000px;
	background: transparent;
}

.reviews .slick-next:before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 7px 0 7px 12.1px;
  border-color: transparent transparent transparent var(--pink);
  transform: rotate(0deg);
  text-indent: 10000px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.pattern--teal.reviews .slick-next:before {border-color: transparent transparent transparent white;opacity: 0.8;} 
.pattern--pink.reviews .slick-next:before {border-color: transparent transparent transparent white;opacity: 0.8;} 
.pattern--purple.reviews .slick-next:before {border-color: transparent transparent transparent white;opacity: 0.8;} 
.pattern--yellow.reviews .slick-next:before {border-color: transparent transparent transparent white;opacity: 0.8;} 

.reviews .slick-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews ul.slick-dots {
  display: flex!important;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
}

.reviews .slick-dots button {
  display: block !important;
  width: 14px;
  height: 14px;
  border: 0;
  text-indent: -10000px;
  padding: 0;
  position: relative;
  border-radius: 7px;
  background: var(--pink);
}
.pattern--teal.reviews .slick-dots button {background: white;opacity: 0.8} 
.pattern--pink.reviews .slick-dots button {background: white;opacity: 0.8} 
.pattern--purple.reviews .slick-dots button {background: white;opacity: 0.8} 
.pattern--yellow.reviews .slick-dots button {background: white;opacity: 0.8} 


.reviews .slick-list {
  margin-bottom: 20px;
}

.reviews .slick-dots .slick-active button {
  background: var(--pink-dark);
}
.pattern--teal.reviews .slick-dots .slick-active button {background: white !important;;opacity: 1} 
.pattern--pink.reviews .slick-dots .slick-active button {background: white !important;;opacity: 1} 
.pattern--purple.reviews .slick-dots .slick-active button {background: white !important;;opacity: 1} 
.pattern--yellow.reviews .slick-dots .slick-active button {background: white !important;;opacity: 1} 

.reviews .slick-dots button:hover {
  background: var(--pink-dark) !important;
  cursor: pointer;
}
.pattern--teal.reviews .slick-dots button:hover {background: white !important;;opacity: 1} 
.pattern--pink.reviews .slick-dots button:hover {background: white !important;;opacity: 1} 
.pattern--purple.reviews .slick-dots button:hover {background: white !important;;opacity: 1} 
.pattern--yellow.reviews .slick-dots button:hover {background: white !important;;opacity: 1} 

.reviews .slick-arrow:hover {
  cursor: pointer;
}


.reviews .slick-prev:hover:before {
  cursor: pointer;
  border-color: transparent var(--pink-dark) transparent transparent;
}
.pattern--teal.reviews .slick-prev:hover:before {border-color: transparent white transparent transparent;opacity: 1} 
.pattern--pink.reviews .slick-prev:hover:before {border-color: transparent white transparent transparent;opacity: 1} 
.pattern--purple.reviews .slick-prev:hover:before {border-color: transparent white transparent transparent;opacity: 1} 
.pattern--yellow.reviews .slick-prev:hover:before {border-color: transparent white transparent transparent;opacity: 1} 

.reviews .slick-next:hover:before {
  border-color: transparent transparent transparent var(--pink-dark);
		opacity: 1;
}
.pattern--teal.reviews .slick-next:hover:before {border-color: transparent transparent transparent white;opacity: 1} 
.pattern--pink.reviews .slick-next:hover:before {border-color: transparent transparent transparent white;opacity: 1} 
.pattern--purple.reviews .slick-next:hover:before {border-color: transparent transparent transparent white;opacity: 1} 
.pattern--yellow.reviews .slick-next:hover:before {border-color: transparent transparent transparent white;opacity: 1} 

/* Gallery  */

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

.gallery__item {
  aspect-ratio: 4/3;
  padding: 0 25px;
}

img.gallery__item-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery button.slick-prev {
  width: 92px;
  height: 92px;
  background: var(--purple-dark);
  border: 0;
  border-radius: 46px;
  display: block;
  text-indent: -10000px;
  position: absolute;
  top: calc(50% - 46px);
  left: 55px;
  z-index: 10000;
  cursor: pointer;
}
@media (max-width: 767px) {
  .gallery button.slick-prev {
    left: 25px;
    width: 70px;
    height: 70px;
  }
}

.gallery button.slick-prev:before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 23px 39.8px 23px 0;
  border-color: transparent var(--pink) transparent transparent;
  transform: rotate(0deg);
  display: block;
  padding: 0;
  position: absolute;
  top: 23px;
  left: 18px;
  transition: 0.25s ease;
}

@media (max-width: 767px) {
  .gallery button.slick-prev:before {
    border-width: 15px 24.8px 15px 0;
    top: 20px;
    left: 19px;
  }
}

.gallery button.slick-prev:hover:before {
  transform: scale(1.2);
}

.gallery button.slick-next {
  width: 92px;
  height: 92px;
  background: var(--purple-dark);
  border: 0;
  border-radius: 46px;
  display: block;
  text-indent: -10000px;
  position: absolute;
  top: calc(50% - 46px);
  right: 55px;
  z-index: 10000;
  cursor: pointer;
}
@media (max-width: 767px) {
  .gallery button.slick-next {
    right: 25px;
    width: 70px;
    height: 70px;
  }
}

.gallery button.slick-next:before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 23px 0 23px 39.8px;
  border-color: transparent transparent transparent var(--pink);
  transform: rotate(0deg);
  display: block;
  padding: 0;
  position: absolute;
  top: 23px;
  left: 32px;
  transition: 0.25s ease;
}
@media (max-width: 767px) {
  .gallery button.slick-next:before {
    border-width: 15px 0 15px 24.8px;
    top: 20px;
    left: 26px;
  }
}

.gallery button.slick-next:hover:before {
  transform: scale(1.2);
}

.slick-lightbox {
  z-index: 10001!important;
}
.slick-lightbox .slick-prev,
.slick-lightbox .slick-next {
  display: none!important;
}
/* Forms  */
.gform_wrapper ul li.gfield {
  padding: 0!important;
  margin: 0!important;
  /* float: left; */
  width: 100%;
}

.gform_wrapper ul li.gfield.form-half {
  width: calc(50% - 25px);
  clear: none;
}

@media (max-width: 767px) {
  .gform_wrapper ul li.gfield.form-half {
    width: 100%;
  }
}

.gform_fields {
  display: flex!important;
  gap: 50px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .gform_fields {
    gap: 25px;
  }
  }

.gfield_label {
  color: var(--background);
}

.gform_wrapper textarea, .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
  border: 0;
  background: var(--background);
}

.gform_wrapper .button {
  font-size: var(--size-h4)!important;
  border: 0;
}

section.post-img {
  padding-top: 0;
}

section.post-img img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

section.post-vid {
  padding-top: 0;
}

section.post-vid iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.gform_legacy_markup_wrapper div.validation_error {
    background: red!important;
    border-color: red!important;
    color: white!important
}

.gform_legacy_markup_wrapper .gform_validation_errors>h2 {
    color: white!important;
}

.gform_legacy_markup_wrapper li.gfield.gfield_error, .gform_legacy_markup_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
    border: 0!important;
    background: transparent!important;
}

.gform_legacy_markup_wrapper .gfield_error .gfield_label {
    color: var(--background)!important;
}

.gform_legacy_markup_wrapper .validation_message {
    background: red!important;
    color: white!important;
    padding: 10px!important;
}

/* Menu page  */

section.menu-hero {
  padding-top: 200px;
  background-size: cover;
  background-position: 50%;
  position: relative;
}

@media (max-width: 767px) {
  section.menu-hero {
    padding-top: 140px;
  }
}

h1.menu-hero__title {
  color: var(--background);
  font-size: var(--size-h0);
  text-shadow: 4px 4px 0px rgba(12, 109, 128, 1);
  position: relative;
  margin: 0;
  text-align: center;
}

@media (max-width: 767px) {
  h1.menu-hero__title {
    font-size: var(--size-h1);
    text-shadow: 4px 4px 0px rgba(12,109,128,1);
  }
}

section.menu-hero:before {
  content: "";
  display: block;
  background: black;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.2;
}

.menus-sections {
  display: flex;
  flex-wrap: wrap;
}

.menus-section {
  width: 50%;
  padding: 50px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .menus-section {
    width: 100%;
    padding: 25px;
  }
}

.menus-section--full {
    width: 100%;
}

.menus-section h2 {
  position: relative;
}

.panel {
  position: relative;
}

ul.menus-items {
  list-style: none;
  margin: 0;
}

.menus-item__meta {
  display: flex;
  width: 100%;
  justify-content: space-between;
  color: red;
  font-weight: bold;
}

.pattern--teal .menus-item__meta  {
  color:  var(--teal-dark);
}

.pattern--pink .menus-item__meta  {
  color:  var(--pink-dark);
}

.pattern--purple .menus-item__meta  {
  color:  var(--purple-dark);
}


.pattern--yellow .menus-item__meta  {
  color:  var(--orange);
}


li.menus-item {
  margin-bottom: 20px;
}

/* Footer */
.site-footer {
  color: var(--background);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.site-footer__upper {
  padding: 75px 50px;
  background-color: var(--primary);
  width: 100%;
  display: flex;
  gap: 50px;
}

@media (max-width: 767px) {
  .site-footer__upper {
    padding: 50px 25px;
    flex-direction: column;
  }
  }

.site-footer__col {
  width: 25%;
}
@media (max-width: 767px) {
  .site-footer__col {
    width: 100%;
  }
  }

.site-footer__col-2 {
  width: 50%;
}
@media (max-width: 767px) {
  .site-footer__col-2 {
    width: 100%;
  }
  }

.site-footer__lower {
  padding: 75px 50px;
  border-top: 1px solid var(--teal-dark);
  padding: 25px 50px;
  background-color: black;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .site-footer__lower {
    flex-direction: column;
    gap: 20px;
    padding: 25px;
  }
  }

.opening {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
@media (max-width: 767px) {
  .opening {
    justify-content: space-between;
    width: 100%;
  }
  }

.site-footer__contact span {
  display: block;
}


.site-footer__social {
  display: flex;
  align-items: center;
}

.site-footer__social a {
  font-size: 30px;
  text-align: center;
  color: var(--background);
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  text-decoration: none;
  transition: 0.25s ease;
}

.site-footer__social a:hover {
  color: var(--orange);
}

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.site-footer .gform_confirmation_message {
  font-weight: bold;
}

/* LEGACY Blocks - TODO: remove */