html { height: 100%; padding: 0px; margin: 0px }
body {
	height: 100%; padding: 0px; margin: 0px;
  font-family: 'Zilla Slab', serif;
  font-size: 20px;
}
.mur {
	background: URL(mur.png);
}
a { text-decoration: none; color: black }
h1 { display: none }
h2 { font-size: 45px; margin: 0px }
.page { height: 100% }
.w100 { width: 100% }
.h100 { height: 100% }
.max50 { max-width: 50% }
.mw { max-width: 1088px }
.ma { margin: auto }
.pr { position: relative }
.alContent { position: absolute; top: 0px; left: 0px; width: 100%; height: 100% }
.fixTop { position: fixed; width: 100%; z-index: 1 }
.top { height: 70px; margin: auto; padding-bottom: 10px; }
.top a { text-decoration: none; color: black }
.top a:hover { color: greenyellow; text-shadow: 0 0 20px green, 0 0 40px yellow }
.content { padding-top: 90px  }
.fl { display: flex }
.fv { display: flex; flex-direction: column }
.fw { display: flex; flex-flow: wrap }
.fill { flex: 1 }
.sa { place-content: space-around }
.ci { align-items: center }
.m5 { margin: 5px }
.p5 { padding: 5px }
.p15 { padding: 15px }
.p20 { padding: 20px }
.pb0 { padding-bottom: 0px }
.r5 { border-radius: 5px }
.tc { text-align: center }
.f1 { font-family: Damion; font-size: 20px }
.f2 { font-family: 'Zilla Slab', serif; font-size: 25px; font-weight: bold }
.f3 { font-family: 'Zilla Slab', serif; font-size: 15px; font-weight: bold }
.f4 { font-family: 'Zilla Slab', serif; font-size: 20px }
.f4a { font-family: 'Zilla Slab', serif; font-size: 16px }
.f5 { font-family: Damion; font-size: 28px; padding: 5px }
.f6 { font-family: Damion; font-size: 40px }
.f7 { font-family: Damion; font-size: 28px }
.bold { font-weight: bold }
.logo { background: URL(logo.png); width: 206px; height: 69px }
.panier { background: URL(panier.png); width: 44px; height: 44px; cursor: pointer }
#counter {
  background-color: #d0282b;
  color: white;
  width: 15px; height: 15px;
  border-radius: 50%;
  text-align: center;
  font-size: 11px;
  position: relative;
  top: 30px;
  left: 40px;
  padding: 2px;
  font-weight: normal;
  display: none;
}
.panel { flex: 1; padding: 10px; display: flex; text-align: center; font-size: 16px }
.border { border: 3px solid black; padding: 10px; display: flex; flex-direction: column; place-content: space-evenly }
.panel p { font-style: italic }
.button { padding: 20px 40px; margin: 5px auto; border-radius: 8px; font-weight: bold; cursor: pointer; text-decoration: none; color: black; transition: all .10s }
.submit { margin: 15px 5px; padding: 10px 0px; border-radius: 8px; font-weight: bold; cursor: pointer }
.submit:hover { margin: 0px; padding: 20px 5px }
.error { background-color: orange }
.button:hover { margin: 0px auto; padding: 25px 45px }
.color1 { background-color: #ef6e7d }
.color2 { background-color: #ffbc0d }
.color3 { background-color: #90ae32 }
.color4 { background-color: #83bdd5 }
.color5 { background-color: #15bfc3 }
.trame1 { background-color: #fef7e5 }
.trame2 { background-color: #f0e5da }
.trame3 { background-color: white }
.bottom { max-width: 1088px; padding-bottom: 20px; margin: auto }
.bottom span { padding: 5px }
.menus { text-align: center } 
.menusback { background: URL(menus.png); background-size: cover }
.burgersback { background: URL(burgers.png); background-size: cover }
.menu { margin: 8px; border: 3px solid black; display: inline-block; flex-direction: column }
.burgers .menu { max-width: 300px }
.burgers .menu .f4a { height: 80px }
.menu2 { width: 100%; margin: 8px; border: 3px solid black; display: flex; flex-direction: column }
.mini { display: inline-block; width: 534px; height: 261px }
div.bw { position: relative }
div.bw div { position: absolute; width: 100%; height: 100%; box-sizing: border-box; padding: 10px; top: 0px; left: 0px  } 
div.bw span { border: 3px solid white; width: 100%; height: 100%; display: inline-block; box-sizing: border-box }
.solo  { padding: 10px; display: inline-block }
.menu_page h2 { padding-top: 40px  }
.menu_page h2 span, #riz, #bottom { position: relative; left: 0px; top: -257px /*-147px*/ }
.menu_page .button { padding: 10px 40px }
.menu_page .button:hover {  margin: 5px auto; padding: 10px 50px }
.menuImg { width: 518px; height: 200px; object-fit: cover;}
.boissons { display: flex; flex-flow: wrap } 
.boissons img { object-fit: none }
.choix { display: flex; flex-direction: column }
.choix>* { margin: 5px; padding: 0px }
.choix span { font-weight: bold }
.choix label { font-weight: normal }
.choix label + label { border-top: 1px solid silver; padding-top: 10px }
.odd { background-color: #fbf7f0}
.cpt { text-align: center; user-select: none }
.cpt span {background-color:#f0e5da}
.cpt * { display: inline-block; width: 20px; margin: 5px; padding: 10px }
.cpt .btn { border: none; color: white; background-color: black; cursor: pointer }
.tarif .button { padding: 10px 40px; margin: 4px 20px }
.tarif .button:hover { padding: 10px 50px; margin: 4px 10px }
.comp1 {
  border: 2px solid #ffbc0d;
  margin: 20px;
  padding: 10px;
  text-align: center;
}
#shadow { 
  position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; 
  background-color: #0000007f; 
  z-index: 2; 
  display: none; 
  overflow-y: auto;
  align-items: center;
  justify-content: center; 
 }
#miniForm { width: 600px }
section { background-color: white; border: 1px solid black; display: none }
header { display: flex; align-items: center; padding: 5px }
.close { font-family: Arial; font-size: 30px; cursor: pointer }
.plus { 
  background-color: #71a400; color: white; 
  width: 15px; height: 15px;
  border-radius: 50%;
  text-align: center;
  position: fixed;
  padding: 25px;
}
#cart {
  min-width: 500px;
  background-color: white;
  height: 100%;
  margin-right: 0px;
  margin-left: auto;  
  display: none;
  flex-direction: column;
}
.red { color: #d0282b; }
.white { color: white }
.green { border: none; background-color: #90aa32 }
.detail { flex: 1; border-top: 4px solid #e4ecd0; border-bottom: 4px solid #e4ecd0; overflow-y: auto }
.content .detail { max-height: 60% }
.detail>div { display: flex; align-items: flex-start; cursor: pointer }
.detail>div:hover { background-color: #fbf7f0 }
.detail>div>span:first-child { margin: 6px 10px; padding: 5px; width: 20px; text-align: center; border: 1px solid black }
.detail>div>div{ flex: 1; display: flex; flex-direction: column; padding: 10px }
.detail>div>div>div { font-weight: bold }
.detail>div>span:last-child { padding: 10px }
.detail .close { visibility: hidden }
.detail>div:hover .close { visibility: visible }
#cart .title {
  display: flex;
  align-items: baseline;
  text-align: center;
}
#cart .title div { flex: 1; font-size: 24px }
#cart .title span { font-size: 40px; padding: 10px }
#cart hr { border: none; height: 4px; background-color: #e4ecd0}
#cart .valider { background-color: silver; cursor: pointer; padding: 10px; width: 100%; border: none; }
.info input { padding: 5px; margin: 5px; }
.info div>div { margin: 5px }
#spinner {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	background-color: rgba(255,255,255,.25);
}
#spinner:before {
	content: ' ';
	display: block;
	position: absolute;
	width: 110px;
	height: 110px;
	background: URL(payplug.png) no-repeat center;
	background-color: white;
	border-radius: 100%;
}
#spinner:after {
	content: ' ';
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	border: 5px solid #cbcbca;
	border-top-color: #2380be;
	border-radius: 100%;
	animation: rotation .7s linear infinite;
}
@keyframes rotation {
	0% { transform: rotate(0deg) }
	to  { transform: rotate(359deg) }
}
.tabset { border-bottom: 1px solid gray }
.tab { padding: 0px 10px; border: 1px solid gray; background-color: #eee; cursor: pointer; }
.tab.active { padding: 0px 10px; border-bottom-color: white; background-color: white }
.livraison .retrait,
.retrait .livraison { display: none }
#pub { 
  position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; 
  background-color: #0000007f; 
  z-index: 2; 
  overflow-y: auto;
  align-items: center;
  justify-content: center; 
  display: flex;
 }
 #pub img {  max-block-size: 90%; }
#promo {
  background: URL(promo.jpg) no-repeat center;
  margin: auto;
  width: 756px;
  height: 756px;
}
#pub_livraison {
  background: URL(livraison.png) no-repeat center;
  height: 147px;
}