html {
  --chroma-offset: .1;
  --lightness: calc(1% + 98%);
  --chroma: calc(.1 + var(--chroma-offset));
  --hue: 0;
}

.navbar.is-transparent {
  opacity: 0;
  border-bottom: 1px solid #bbb;
}

div.logo {
  position: fixed;
  left: 1.5em;
  bottom: 1.5em;
}

.order-food {
  background-color: #070;
  color: #fff;
  text-decoration: none;
}

.order-food:hover {
  background-color: #080;
  color: #fff;
}

.order-food:visited {
  color: #fff;
}

h3 a, p a, ul li a {
  text-decoration: underline;
}

h3 a:hover, p a:hover, ul li a:hover {
  background-color: #efe;
  color: #090;
}

.breadcrumbs {
  margin-bottom: 0.9rem;
}

/* food menu ---------- */
span.item-code {
  font-size: 1.5em;
  padding: 0.2em 0.35em 0.25em 0.35em;
  background-color: #eee;
}

span.name {
  font-size: 1.5em;
  font-weight: bold;
}

span.description {
  font-size: 1.35em;
}

span.price {
  font-size: 1.25em;
}

a.register-button {
  font-size: 1.4rem;
}

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px) {
  footer a {
    display: block;
    margin-bottom: 2em;
  }
  a.register-button {
    font-size: 2rem;
    text-align: center;
    display: block;
    border: 2px solid #09c;
    border-radius: 5px;
    text-decoration: none;
    margin: 1rem 0 1rem 0;
  }
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px) {
  footer a {
    display: block;
    margin-bottom: 2em;
  }
  a.register-button {
    font-size: 2rem;
    text-align: center;
    display: block;
    border: 2px solid #09c;
    border-radius: 5px;
    text-decoration: none;
    margin: 1rem 0 1rem 0;
  }
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px) and (max-width: 767px) {
  div.title {
    position: fixed;
    left: 0.5em;
    bottom: 0.5em;
  } /* add another class name to logo text and remove use of title class name here */
  section.section.three-images {
    /*padding: 1.0em 1.0em 0 1.0em;*/
  }
  footer {
    /*img {
    	width: 50px;
    	height: 50px;
    }*/
  }
  footer a {
    display: block;
    margin-bottom: 2em;
  }
  footer .footer-space {
    /*background-color: #9c9;*/
    display: none;
  }
  a.register-button {
    font-size: 2rem;
    text-align: center;
    display: block;
    border: 2px solid #09c;
    border-radius: 5px;
    text-decoration: none;
    margin: 1rem 0 1rem 0;
  }
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  footer img {
    margin-right: 2em;
  }
  footer #badge-happycow {
    margin-right: 0;
  }
  footer .footer-space {
    display: block;
  }
}
/* Tablets, iPads (portrait) ---------- */
/* Tablets, iPads (landscape) ---------- */
/* Desktops and laptops ---------- */
/* Large screens ---------- */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fade-in 1s ease;
}

/* Cookbook ---------- */
ul {
  margin-left: 1rem;
  font-size: 1rem;
  color: #000;
}

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}

.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #39d;
  animation: prixClipFix 2s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}
/*h2 {
	font-size: 4.0em;
	text-align: center;
	margin: 0.4em 0 0.2em 0;
	line-height: 0.9em;
}*/
/*p {
	font-size: 1.4em;
	margin-top: 1.0em;
}

p.last {
	margin-bottom: 2.0em;
}*/
.hero.is-primary {
  background-color: #fff;
}

.hero.has-background {
  position: relative;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}

/*.title {
	bottom: 1.0em;
}*/
#may-kaidee-logo {
  width: 20%;
}

#may-kaidee-logo-2 {
  width: 15%;
}

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px) {
  #may-kaidee-logo {
    width: 50%;
  }
  #may-kaidee-logo-2 {
    width: 35%;
  }
}
/* Smartphones (portrait) ---------- */
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px) and (max-width: 767px) {
  #may-kaidee-logo {
    width: 50%;
  }
  #may-kaidee-logo-2 {
    width: 35%;
  }
  /*h2 {
  	font-size: 2.5em;
  }*/
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #may-kaidee-logo {
    width: 30%;
  }
  #may-kaidee-logo-2 {
    width: 35%;
  }
  /*h2 {
  	font-size: 3.0em;
  }*/
}
/* Tablets, iPads (portrait) ---------- */
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px) {
  #may-kaidee-logo {
    width: 30%;
  }
  #may-kaidee-logo-2 {
    width: 20%;
  }
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px) {
  #may-kaidee-logo {
    width: 20%;
  }
  #may-kaidee-logo-2 {
    width: 15%;
  }
}
/* Large screens ---------- */
@media screen and (min-width: 1824px) {
  #may-kaidee-logo {
    width: 20%;
  }
  #may-kaidee-logo-2 {
    width: 15%;
  }
}
footer {
  text-align: center;
  padding: 0em 9em 1em 9em;
  /*a {
  	font-size: 1.2em;
  	margin-right: 1.0em;
  }*/
}

.time-estimates {
  font-size: 1.2em;
  width: 100%;
}

.updated-indicator {
  animation: blinker 1.5s linear infinite;
  background-color: #9d9;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}