html, body {
  margin: 0;
  padding: 0;
  color: #303033;
  background-color: white; }

* {
  box-sizing: border-box; }

body {
  font-family: 'PT Sans', sans-serif;
  line-height: 1.5;
  font-size: 13pt; }

p {
  text-align: justify; }

form {
  margin-top: 2em; }

h1, h2, h3, h4, h5 {
  font-family: 'Antic Slab', serif;
  text-align: center;
  font-weight: 800;
  color: #526374; }

h1, h2, h3 {
  margin: 2em 0; }

h4, h5 {
  margin: 1em 0; }

h1 em, h2 em, h3 em, h4 em, h5 em {
  font-style: normal;
  font-weight: 800; }

h1 {
  font-size: 1.6em; }

h2 {
  font-size: 1.5em; }

h3 {
  font-size: 1.4em; }

h4 {
  font-size: 1.2em; }

h5 {
  font-size: 1.1em; }

section {
  margin: auto;
  max-width: 960px;
  padding: 0 4em; }

@media (max-width: 800px) {
  section {
    padding: 0 2em; }
  ul {
    padding-left: 1.5em; } }

@media (max-width: 400px) {
  section {
    padding: 0 1em; } }

img {
  image-orientation: from-image; }

section img {
  max-width: 100%;
  max-height: 24em;
  margin: auto;
  display: block; }

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

a:hover {
  color: #ff7788; }

.hidden {
  display: none; }

.hero {
  font-family: 'Pacifico', serif;
  font-size: 1.8em; }

.divider {
  width: 0.675em;
  height: 0.675em;
  display: block;
  position: relative;
  margin: 4em auto;
  background: #997788; }

.divider, .divider:after, .divider:before {
  border-radius: 0.675em; }

.divider:after, .divider:before {
  content: "";
  width: 0.675em;
  height: 0.675em;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.divider:after {
  margin-left: -1em;
  background: #ff7788; }

.divider:before {
  margin-left: 1em;
  background: #667788; }

nav {
  margin: auto;
  font-size: 13pt; }
  nav ul {
    display: flex;
    margin: auto;
    padding: 0;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin: 1em 0; }
    nav ul li {
      list-style: none;
      margin: 0.25em 1em;
      width: auto;
      font-family: 'Antic Slab', serif;
      font-weight: 800; }
      nav ul li.active a {
        border-top: solid 2px #cc7788;
        border-bottom: solid 2px #cc7788;
        padding: 4px 0;
        margin-top: -6px;
        margin-bottom: -6px; }

@media (min-width: 1280px) {
  .sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 50%;
    margin-right: calc(480px - 4em);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .sticky ul {
      display: flex;
      flex-direction: column;
      text-align: center;
      margin: 0; } }

ul.programmation {
  padding: 0; }

.programmation li {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: baseline; }

.programmation li + li {
  margin-top: 1em; }

.programmation li span {
  padding-right: 1em; }

.programmation li .time {
  font-weight: 800;
  font-family: 'Antic Slab', serif; }

.menu, .menu * {
  text-align: center; }

.meal {
  font-family: 'Antic Slab', serif; }

.indication {
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; }

.indication.vegan {
  background-image: url("/images/vegan.svg");
  width: 1.25em;
  height: 1.25em; }

.indication.gluten-free {
  background-image: url("/images/gluten.svg");
  width: 1.5em;
  height: 1.5em; }

.indication.love {
  background-image: url("/images/coeur.svg");
  width: 0.9em;
  height: 0.9em; }

.img-background {
  position: relative;
  height: 100vh; }

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

.img-background > .content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 1em; }

.img-background > .content > * {
  color: white;
  font-size: calc(0.5em + 0.5vw + 2vh);
  text-shadow: 0 -0.05em #997788, 0 0.05em #526374, 0 0.1em #526374, 0.025em 0 #526374, 0.025em 0.05em #526374, -0.025em 0 #526374, -0.025em 0.05em #526374; }

.thanks {
  text-align: center;
  font-size: 0.8em;
  margin-top: 2rem;
  margin-bottom: 2rem; }

input, textarea, button {
  font-family: 'PT Sans', sans-serif;
  font-size: 13pt;
  color: black; }

.field-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: -0.5em; }

.field-group + .field-group {
  margin-bottom: 0.75em; }

.field-group > .field {
  margin: 0.5em; }

.field.disabled {
  opacity: 0.3; }

.grow {
  flex-grow: 1; }

form > .field:not(:last-child), form > .field-group:not(:last-child) {
  margin-bottom: 1em; }

.field > label {
  display: block; }

.field > input, .field > textarea {
  display: block;
  width: 100%;
  border: none;
  background-color: #eee;
  border-radius: 0.25em;
  margin-top: 0.25em;
  padding: 0.25em 0.5em; }

.field > textarea {
  resize: vertical;
  min-height: 4.5em; }

.field.inline .radio-choice {
  display: inline-flex; }

.radio-choice {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding-top: 0.5em; }

input[type=radio], input[type=checkbox] {
  margin: 0 0.5em; }

.field.right {
  text-align: right; }

button, [type=button], [type=submit], .button {
  background-color: #eee;
  border: none;
  border-radius: 0.25em;
  padding: 0.5em 1em;
  cursor: pointer; }

button:hover,
[type=button]:hover,
[type=submit]:hover,
.button:hover {
  background-color: #e3e3e3; }

button:active,
[type=button]:active,
[type=submit]:active,
.button:active {
  background-color: #dadada; }

.success {
  color: green;
  text-align: center; }

.error {
  color: red;
  text-align: center; }

.error a {
  color: darkred; }

.required:after {
  color: red;
  content: "*"; }

.float.right {
  float: right; }

#timer span + span:before {
  content: ":"; }

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1em; }
  .grid:not(.x-padded):not(.padded) {
    margin-left: -2em;
    margin-right: -2em; }
  .grid:not(.y-padded):not(.padded) {
    margin-top: -2em;
    margin-bottom: -2em; }
  .grid > .cell {
    flex-grow: 1;
    margin: 1em;
    width: 16em;
    height: 12em;
    object-fit: cover; }

.thumbnail {
  transition: 0.3s;
  cursor: pointer;
  filter: grayscale(80%); }
  .thumbnail:hover {
    filter: grayscale(0%);
    transform: scale(1.025); }

#overlay {
  display: block;
  background: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none; }
  #overlay.show {
    background: rgba(0, 0, 0, 0.6);
    pointer-events: initial; }

#content.overlaid {
  filter: blur(0.25em);
  overflow: hidden; }

.overlay-btn {
  color: #ff7788;
  font-size: 2rem;
  padding: 1em;
  border-radius: 0;
  text-shadow: 0 -1px #cc7788, 0 1px #303033;
  background-color: transparent;
  position: absolute;
  top: 0;
  bottom: 0; }
  .overlay-btn:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  .overlay-btn.previous {
    left: 0; }
  .overlay-btn.next {
    right: 0; }

.img-container {
  cursor: pointer; }
  .img-container > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1em; }

.text-center {
  text-align: center; }
