@import url("https://fonts.googleapis.com/css?family=Alfa+Slab+One|Cousine:400,400i,700|Lily+Script+One&display=swap");
/**
 * ----------------------------------------
 * arrow bounce
 * ----------------------------------------
 */
.arrowBounce {
  -webkit-animation: bounce 3s infinite;
          animation: bounce 3s infinite;
  color: #5778F3;
  font-size: 22px;
  position: relative;
}

.kenburns-top {
  -webkit-animation: kenburns-top 5s ease-out both;
  animation: kenburns-top 5s ease-out both;
}

.text-shadow-pop-br {
  -webkit-animation: text-shadow-pop-br 1s both;
  animation: text-shadow-pop-br 1s both;
}

.remove-overlay {
  -webkit-transform: translate(9999px) !important;
      -ms-transform: translate(9999px) !important;
          transform: translate(9999px) !important;
  opacity: 0 !important;
}

.hover-ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  bottom: 50%;
  border: 5px #fafafa solid;
  border-radius: 50%;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.hover-ripple:hover::before {
  -webkit-animation-name: hover-ripple;
          animation-name: hover-ripple;
}

.heartbeat {
  -webkit-animation: heartbeat 1.5s ease-in-out both;
  animation: heartbeat 1.5s ease-in-out both;
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes hover-ripple {
  100% {
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    opacity: 0;
  }
}
@keyframes hover-ripple {
  100% {
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    opacity: 0;
  }
}
@-webkit-keyframes roadRunnerIn {
  0% {
    -webkit-transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
            transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
  }
  70% {
    -webkit-transform: translateX(30px) skewX(0deg) scaleX(0.9);
            transform: translateX(30px) skewX(0deg) scaleX(0.9);
  }
  100% {
    -webkit-transform: translateX(0px) skewX(0deg) scaleX(1);
            transform: translateX(0px) skewX(0deg) scaleX(1);
  }
}
@keyframes roadRunnerIn {
  0% {
    -webkit-transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
            transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
  }
  70% {
    -webkit-transform: translateX(30px) skewX(0deg) scaleX(0.9);
            transform: translateX(30px) skewX(0deg) scaleX(0.9);
  }
  100% {
    -webkit-transform: translateX(0px) skewX(0deg) scaleX(1);
            transform: translateX(0px) skewX(0deg) scaleX(1);
  }
}
@-webkit-keyframes roadRunnerOut {
  0% {
    -webkit-transform: translateX(0px) skewX(0deg) scaleX(1);
            transform: translateX(0px) skewX(0deg) scaleX(1);
  }
  30% {
    -webkit-transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
            transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
  }
  100% {
    -webkit-transform: translateX(1500px) skewX(30deg) scaleX(1.3);
            transform: translateX(1500px) skewX(30deg) scaleX(1.3);
  }
}
@keyframes roadRunnerOut {
  0% {
    -webkit-transform: translateX(0px) skewX(0deg) scaleX(1);
            transform: translateX(0px) skewX(0deg) scaleX(1);
  }
  30% {
    -webkit-transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
            transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
  }
  100% {
    -webkit-transform: translateX(1500px) skewX(30deg) scaleX(1.3);
            transform: translateX(1500px) skewX(30deg) scaleX(1.3);
  }
}
@-webkit-keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}
@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}
@-webkit-keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}
@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}
@-webkit-keyframes quickScaleDown {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  99.9% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@keyframes quickScaleDown {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  99.9% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@-webkit-keyframes text-shadow-pop-br {
  0% {
    text-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    text-shadow: 1px 1px #fff, 2px 2px #fff;
    -webkit-transform: translateX(-8px) translateY(-8px);
    transform: translateX(-8px) translateY(-8px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-shadow-pop-br {
  0% {
    text-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    text-shadow: 1px 1px #fff, 2px 2px #fff;
    -webkit-transform: translateX(-8px) translateY(-8px) skew(-20deg) rotate(-5deg);
    transform: translateX(-8px) translateY(-8px) skew(-20deg) rotate(-5deg);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.1) translateY(-15px);
    transform: scale(1.1) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.1) translateY(-15px);
    transform: scale(1.1) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}
.hero-container {
  min-height: 900px;
  height: 120vh;
  width: 100vw;
  position: relative;
}
.hero-container .bg-hero {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  background-color: rgba(255, 255, 255, 0.3);
}
.hero-container .hero-overlay {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("../img/pizza-bg.jpg");
  background-position: center;
  background-size: cover;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
.hero-container .hero-content {
  min-height: 600px;
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.hero-container #logo {
  max-width: 200px;
  height: auto;
  margin-top: 20px;
}
@media (max-width: 599px) {
  .hero-container #logo {
    display: none;
  }
}
.hero-container h1 {
  font-family: "Lily Script One", sans-serif;
  font-size: 100px;
  color: #020968;
  text-shadow: 2px 2px 0 #fff;
  text-align: center;
  font-weight: 400;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transform: skew(-20deg) rotate(-5deg);
      -ms-transform: skew(-20deg) rotate(-5deg);
          transform: skew(-20deg) rotate(-5deg);
  margin: 20px 0 0 0;
}
@media (max-width: 599px) {
  .hero-container h1 {
    font-size: 46px;
    margin: 120px 0 30px 0;
  }
}
.hero-container .btn-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}
.hero-container .btn-wrapper .hero-btns {
  padding: 0;
  list-style-type: none;
}
.hero-container .btn-wrapper .hero-btns li {
  border: 3px solid #fafafa;
  font-weight: 700;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 15em;
  height: 3em;
  font-size: 20px;
  border-radius: 0.5em;
  margin: 0.5em;
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
  color: #fafafa;
  line-height: 3em;
  letter-spacing: 3px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
@media (max-width: 599px) {
  .hero-container .btn-wrapper .hero-btns li {
    width: 10em;
    height: 3em;
  }
}
.hero-container .btn-wrapper .hero-btns li:nth-child(odd) {
  background-color: #00B917;
  -webkit-box-shadow: -3px 3px 0 0 #00B917;
          box-shadow: -3px 3px 0 0 #00B917;
  text-align: left;
  padding-left: 10%;
  -webkit-transform: perspective(500px) rotateY(45deg);
          transform: perspective(500px) rotateY(45deg);
}
.hero-container .btn-wrapper .hero-btns li:nth-child(even) {
  background: #F50000;
  -webkit-box-shadow: 3px 3px 0 0 #F50000;
          box-shadow: 3px 3px 0 0 #F50000;
  text-align: right;
  padding-right: 10%;
  -webkit-transform: perspective(500px) rotateY(-45deg);
          transform: perspective(500px) rotateY(-45deg);
}
.hero-container .btn-wrapper .hero-btns li:nth-child(odd):hover {
  -webkit-transform: perspective(200px) rotateY(45deg);
          transform: perspective(200px) rotateY(45deg);
  padding-left: 5%;
}
.hero-container .btn-wrapper .hero-btns li:nth-child(even):hover {
  -webkit-transform: perspective(200px) rotateY(-45deg);
          transform: perspective(200px) rotateY(-45deg);
  padding-right: 5%;
}
.hero-container .scroll-to {
  z-index: 99;
  position: absolute;
  bottom: 100px;
  width: 64px;
  height: 32px;
  background-image: url("../img/down-arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.hero-container .skew {
  width: 100%;
  height: 200px;
  position: absolute;
  z-index: 2;
  bottom: -120px;
  left: 0;
  background-image: url(/img/bg-ingredients-50.png);
  /* The image used */
  background-position: center center;
  background-repeat: repeat;
  background-color: #fff;
  -ms-transform: skewY(-4deg);
  /* IE 9 */
  -webkit-transform: skewY(-4deg);
  /* Safari 3-8 */
  transform: skewY(-4deg);
  border-top: 3px solid #F6E9D0;
}

#menu {
  position: relative;
  width: 100%;
  color: black;
  z-index: 9;
  padding-bottom: 100px;
  background-image: url(/img/bg-ingredients-50.png);
  /* The image used */
  background-color: #FBF5EA;
  /* Used if the image is unavailable */
  height: auto;
  background-position: left top;
  background-repeat: repeat;
  /* Do not repeat the image */
  /* set panel with according to scree-size */
  /* These settings has to be consistant with 'mansonrySettings' in JS file */
}
#menu .menu-header {
  font-family: "Lily Script One", sans-serif;
  font-size: 120px;
  text-shadow: 3px 3px 0 #222;
  color: #F50000;
  text-align: center;
  font-weight: 400;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transform: skew(-20deg);
      -ms-transform: skew(-20deg);
          transform: skew(-20deg);
  -webkit-transform: skew(-20deg) rotate(-5deg);
      -ms-transform: skew(-20deg) rotate(-5deg);
          transform: skew(-20deg) rotate(-5deg);
  margin: 0 0 100px 0;
}
@media (max-width: 599px) {
  #menu .menu-header {
    font-size: 80px;
    margin: 0 0 50px 0;
  }
}
#menu #masonry {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  max-width: 1400px;
  width: 100%;
}
#menu .masonry-panel {
  width: 50%;
  /*will not wrap if use max-width*/
  -webkit-box-flex: 2;
      -ms-flex: 2 0 auto;
          flex: 2 0 auto;
  padding: 25px;
  min-width: 100px;
}
#menu .masonry-panel:nth-child(2) {
  margin-top: 0;
}
@media (min-width: 600px) {
  #menu .masonry-panel:nth-child(2) {
    margin-top: 0;
  }
}
@media (min-width: 900px) {
  #menu .masonry-panel:nth-child(2) {
    margin-top: -50px;
  }
}
#menu .masonry-content {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 20px;
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  overflow: hidden;
  background-color: rgba(246, 233, 208, 0.5);
}
@media screen and (min-width: 769px) and (max-width: 992px) {
  #menu .masonry-panel {
    width: 100%;
  }
}
@media screen and (min-width: 430px) and (max-width: 768px) {
  #menu .masonry-panel {
    width: 100%;
  }
}
@media screen and (max-width: 430px) {
  #menu .masonry-panel {
    width: 100%;
  }
}

.menu-heading {
  font-family: "Lily Script One", sans-serif;
  font-size: 80px;
  color: #00B917;
  text-shadow: 2px 2px 0 #222;
  text-align: center;
  font-weight: 400;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transform: skew(-20deg);
      -ms-transform: skew(-20deg);
          transform: skew(-20deg);
  -webkit-transform: skew(-20deg) rotate(-5deg);
      -ms-transform: skew(-20deg) rotate(-5deg);
          transform: skew(-20deg) rotate(-5deg);
  margin: 20px 0 40px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  margin: 0;
}
@media (max-width: 599px) {
  .menu-heading {
    font-size: 60px;
  }
}

.food-wrapper {
  width: 75%;
}
@media (max-width: 599px) {
  .food-wrapper {
    width: 90%;
  }
}

.food-wrapper-oneCol {
  width: 75%;
}
@media (max-width: 599px) {
  .food-wrapper-oneCol {
    width: 90%;
  }
}

.food-wrapper-twoCol {
  width: 50%;
}
@media (max-width: 599px) {
  .food-wrapper-twoCol {
    width: 90%;
  }
}

.sizes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  text-align: center;
}

.size {
  padding: 0 20px;
}
.size p {
  margin: 0;
}
.size .food-size {
  font-size: 12px;
  font-weight: 700;
}

.food-item {
  text-align: center;
  padding: 20px 20px;
}

h3.food-title {
  display: block;
  text-transform: Uppercase;
  margin: 10px 0px;
}

.food-desc {
  border-bottom: 2px dashed rgba(0, 0, 0, 0.4);
  font-size: 12px;
}

.underline-dotted {
  border-top: 2px dashed rgba(0, 0, 0, 0.4);
  padding-top: 10px;
}

.map-container {
  position: relative;
  overflow: hidden;
}
.map-container iframe {
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
}
.map-container .map-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5;
  cursor: pointer;
  -webkit-transition: opacity 0.2s linear, background-color 0.3s ease-in-out, -webkit-transform 0.1s 0.2s;
  transition: opacity 0.2s linear, background-color 0.3s ease-in-out, -webkit-transform 0.1s 0.2s;
  -o-transition: opacity 0.2s linear, transform 0.1s 0.2s, background-color 0.3s ease-in-out;
  transition: opacity 0.2s linear, transform 0.1s 0.2s, background-color 0.3s ease-in-out;
  transition: opacity 0.2s linear, transform 0.1s 0.2s, background-color 0.3s ease-in-out, -webkit-transform 0.1s 0.2s;
  -webkit-transform: translate(0);
      -ms-transform: translate(0);
          transform: translate(0);
  opacity: 1;
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
}
.map-container .map-overlay:hover {
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 50px;
}
.map-container .map-overlay:hover > p {
  font-size: 50px;
}
.map-container .map-overlay p {
  text-align: center;
  font-size: 40px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: font-size 0.2s ease-in-out;
  -o-transition: font-size 0.2s ease-in-out;
  transition: font-size 0.2s ease-in-out;
}
@media (max-width: 599px) {
  .map-container .map-overlay p {
    font-size: 32px;
  }
}
.map-container .skew-footer {
  width: 100%;
  height: 100px;
  position: absolute;
  z-index: 9;
}
.map-container .skew-top {
  background-image: url(/img/bg-ingredients-50.png);
  /* The image used */
  background-position: center center;
  background-repeat: repeat;
  background-color: #fff;
  -ms-transform: skewY(-2deg);
  /* IE 9 */
  -webkit-transform: skewY(-2deg);
  /* Safari 3-8 */
  transform: skewY(-2deg);
  top: -50px;
  left: 0;
  border-bottom: 3px solid #F6E9D0;
}

footer {
  min-height: 300px;
  color: #fafafa;
  position: relative;
  padding-bottom: 40px;
  background-color: #222;
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23040404' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23070707' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%230b0b0b' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%230e0e0e' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23111111' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23151515' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23181818' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%231b1b1b' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%231f1f1f' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23222222' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}
footer a {
  color: #FBF5EA !important;
}
footer .contact-container {
  margin-top: 80px;
}
@media (max-width: 599px) {
  footer .contact-container {
    width: 100%;
    font-size: 12px;
  }
}
@media (min-width: 600px) {
  footer .contact-container {
    width: 90%;
    font-size: 12px;
  }
}
@media (min-width: 600px) {
  footer .contact-container {
    width: 80%;
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  footer .contact-container {
    width: 70%;
    font-size: 20px;
  }
}

label .menu {
  position: fixed;
  right: -100px;
  top: -100px;
  z-index: 999;
  width: 200px;
  height: 200px;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
label .hamburger {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 50px;
  height: 50px;
  display: block;
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  background-image: url("../img/menu.svg");
  background-position: center;
  background-size: cover;
  cursor: pointer;
  border: 1px solid #222;
  border-radius: 50%;
  -webkit-box-shadow: 0 8px 6px -6px #222;
          box-shadow: 0 8px 6px -6px #222;
}
label input {
  display: none;
}
label input:checked + .menu {
  -webkit-box-shadow: 0 0 0 150vw #222, 0 0 0 150vh #222;
          box-shadow: 0 0 0 150vw #222, 0 0 0 150vh #222;
  border-radius: 0;
  background-color: #222;
}
label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
label input:checked + .menu + ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 1;
  width: 100vw;
  height: 100vh;
}
label ul {
  position: fixed;
  display: none;
  z-index: 9999;
  padding: 70px 0 0 0;
  margin: 0;
  opacity: 0;
  -webkit-transition: 0.25s 0s ease-in-out;
  -o-transition: 0.25s 0s ease-in-out;
  transition: 0.25s 0s ease-in-out;
}
label li {
  text-align: center;
  list-style-type: none;
  font-size: 32px;
  width: 50%;
  -webkit-box-flex: 2;
      -ms-flex: 2 0 auto;
          flex: 2 0 auto;
  margin: 0;
  padding: 0;
  height: 8vh;
  -webkit-transition: 0.25s 0s ease-in-out;
  -o-transition: 0.25s 0s ease-in-out;
  transition: 0.25s 0s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
label li:nth-child(odd):hover {
  background-color: #00B917;
}
label li:nth-child(even):hover {
  background-color: #F50000;
}
@media (min-width: 1200px) {
  label li {
    width: 70%;
    font-size: 40px;
  }
}
label li a {
  text-align: center;
  position: relative;
  display: block;
  color: #fafafa;
  text-decoration: none;
  width: 100%;
  height: 100%;
  top: 10%;
}

html.modal-active,
body.modal-active {
  overflow-y: hidden;
}

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  z-index: 1100;
  overflow-y: hidden;
}
#modal-container.five {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
#modal-container.five .modal-background {
  background: rgba(0, 0, 0, 0);
  -webkit-animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five .modal-background .modal {
  -webkit-transform: translateX(-1500px);
      -ms-transform: translateX(-1500px);
          transform: translateX(-1500px);
  -webkit-animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five.out {
  -webkit-animation: quickScaleDown 0s 0.5s linear forwards;
          animation: quickScaleDown 0s 0.5s linear forwards;
}
#modal-container.five.out .modal-background {
  -webkit-animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five.out .modal-background .modal {
  -webkit-animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
  z-index: 900;
}
#modal-container .modal-background .modal {
  background: white;
  padding: 20px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 300;
  position: relative;
  z-index: 1000;
  background-image: url(/img/bg-ingredients-50.png);
  /* The image used */
  background-position: center center;
  background-repeat: repeat;
  border: 3px solid #F6E9D0;
}
#modal-container .modal-background .modal .contact-container {
  width: auto;
}
#modal-container .modal-background .modal .contact-container h2 {
  color: #F50000;
  text-shadow: 3px 3px 0 #222;
  text-align: center;
  margin: 10px 0 0 0;
  padding: 0;
  left: 0;
}
@media (max-width: 599px) {
  #modal-container .modal-background .modal .contact-container .contact-content {
    margin: 0;
  }
}
#modal-container .modal-background .modal .contact-container .contact-content .contact-desc, #modal-container .modal-background .modal .contact-container .contact-content .opening-times {
  width: 50%;
  line-height: 2.2;
}
@media (max-width: 599px) {
  #modal-container .modal-background .modal .contact-container .contact-content .contact-desc, #modal-container .modal-background .modal .contact-container .contact-content .opening-times {
    width: 100%;
    font-size: 12px;
  }
}
@media (min-width: 600px) {
  #modal-container .modal-background .modal .contact-container .contact-content .contact-desc, #modal-container .modal-background .modal .contact-container .contact-content .opening-times {
    font-size: 12px;
  }
}
@media (min-width: 900px) {
  #modal-container .modal-background .modal .contact-container .contact-content .contact-desc, #modal-container .modal-background .modal .contact-container .contact-content .opening-times {
    font-size: 12px;
  }
}
@media (min-width: 1200px) {
  #modal-container .modal-background .modal .contact-container .contact-content .contact-desc, #modal-container .modal-background .modal .contact-container .contact-content .opening-times {
    font-size: 20px;
  }
}
#modal-container .modal-background .modal .contact-container p {
  margin: 10px 0;
}
#modal-container .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  display: none;
}
#modal-container .modal-background .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}

.contact-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  margin: 10px;
  z-index: 10;
  text-align: left;
}
.contact-container h2.f-banner {
  font-family: "Lily Script One", sans-serif;
  font-size: 40px;
  text-shadow: 3px 3px 0 #fafafa;
  color: #00B917;
  font-weight: 400;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transform: skew(-20deg);
      -ms-transform: skew(-20deg);
          transform: skew(-20deg);
  -webkit-transform: skew(-20deg) rotate(-5deg);
      -ms-transform: skew(-20deg) rotate(-5deg);
          transform: skew(-20deg) rotate(-5deg);
  margin: 0 0 20px 0;
  position: relative;
  top: -20px;
  left: 40px;
}
@media (max-width: 599px) {
  .contact-container h2.f-banner {
    font-size: 32px;
  }
}
@media (min-width: 600px) {
  .contact-container h2.f-banner {
    font-size: 32px;
  }
}
@media (min-width: 1200px) {
  .contact-container h2.f-banner {
    font-size: 40px;
  }
}
.contact-container .contact-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 10px 20px;
}
@media (max-width: 599px) {
  .contact-container .contact-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (min-width: 600px) {
  .contact-container .contact-content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
@media (max-width: 599px) {
  .contact-container .contact-content .contact-desc {
    line-height: 2;
    font-size: 12px;
  }
}
.contact-container .contact-content .contact-desc a {
  position: relative;
  text-decoration: none;
  color: #020968;
  font-weight: 700;
}
.contact-container .contact-content .contact-desc a::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 70%;
  left: -0.1px;
  right: -0.1px;
  bottom: 0;
  -webkit-transition: top 0.1s ease-in-out;
  -o-transition: top 0.1s ease-in-out;
  transition: top 0.1s ease-in-out;
  background-color: rgba(87, 120, 243, 0.5);
}
.contact-container .contact-content .contact-desc a:hover::after {
  top: 0;
}
.contact-container .contact-content .contact-desc a.no-hl::after {
  display: none !important;
}
.contact-container .contact-content .contact-desc img {
  width: 30px;
  height: 30px;
}
@media (max-width: 599px) {
  .contact-container .contact-content .contact-desc img {
    width: 15px;
    height: 15px;
  }
}
.contact-container .contact-content .contact-desc img:hover {
  -webkit-animation: heartbeat 1.5s ease-in-out both;
  animation: heartbeat 1.5s ease-in-out both;
}
.contact-container .contact-content .opening-times {
  line-height: 2.5;
}
@media (max-width: 599px) {
  .contact-container .contact-content .opening-times {
    line-height: 2;
    font-size: 12px;
  }
}

.highlight-ul {
  position: relative;
  font-weight: 700;
  margin: 10px 0;
}
.highlight-ul::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 70%;
  left: -0.1px;
  right: -0.1px;
  bottom: 0;
  -webkit-transition: top 0.1s ease-in-out;
  -o-transition: top 0.1s ease-in-out;
  transition: top 0.1s ease-in-out;
  background-color: rgba(87, 120, 243, 0.5);
}
.highlight-ul:hover::after {
  top: 0;
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #020968;
  font-size: 1em;
  line-height: 1.4;
  font-family: "Cousine", monospace, sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-color: #FBF5EA;
}

html,
body {
  overflow-x: hidden;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
a {
  text-decoration: none;
}

.overflowY-none {
  overflow-y: hidden !important;
}

div.progress {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #F50000;
}

.btn {
  border: 3px solid #FFFFFF;
  padding: 5px 20px;
  cursor: pointer;
  -webkit-box-shadow: 5px 5px 0 0 #020968;
          box-shadow: 5px 5px 0 0 #020968;
}

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.logo-sml {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 15px;
  width: 50px;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  -webkit-box-shadow: 0 8px 6px -6px #222;
          box-shadow: 0 8px 6px -6px #222;
}

.logo-visible {
  opacity: 1 !important;
  top: 15px !important;
}

.logo-phone {
  position: fixed;
  z-index: 999;
  top: 15px;
  right: 100px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: 1px solid #222;
  border-radius: 50%;
  -webkit-box-shadow: 0 8px 6px -6px #222;
          box-shadow: 0 8px 6px -6px #222;
}
@media (max-width: 599px) {
  .logo-phone {
    right: 80px;
  }
}

.logo-upArrow {
  position: fixed;
  z-index: 999;
  bottom: 0;
  right: 15px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: 1px solid #222;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0 8px 6px -6px #222;
          box-shadow: 0 8px 6px -6px #222;
}

.arrow-visible {
  opacity: 0.5 !important;
  bottom: 15px !important;
}
.arrow-visible:hover {
  opacity: 1 !important;
}