html,
body {
  position:relative;
  height:100%;
}
body {
  margin:0; padding:0;
  color:#46230F;
  font-size:16px;
  line-height:1.5;
  font-family:'interstate-light-condensed', sans-serif;;
}
img{
  display:block;
  width:100%; height:auto; 
  margin:0 auto;
}
p{
  margin:0;
}
@font-face{
	font-family:"antithesis-pro-bold";
	src:url("../font/antithesis-pro-bold.ttf") format("truetype"), url("../../font/antithesis-pro-bold.woff") format("woff");
  font-display:swap;
}
@font-face{
	font-family:"ff-din-condensed-black";
	src:url("../font/ff-din-condensed-black.ttf") format("truetype"), url("../../font/ff-din-condensed-black.woff") format("woff");
  font-display:swap;
}
@font-face{
	font-family:"interstate-light-condensed";
	src:url("../font/interstate-light-condensed.ttf") format("truetype"), url("../../font/interstate-light-condensed.woff") format("woff");
  font-display:swap;
}
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap; /* added line */
}
.antithesis{
  font-family:'antithesis-pro-bold', sans-serif;;
}
.ff-din{
  font-family:'ff-din-condensed-black', sans-serif;;
}
#back{
  position:fixed;
  height:100vh; width:100%;
  z-index:-1;
}
/*Logo + Select navigation*/
#header{
  position:relative;
  padding:1.875rem 5rem 4.25rem;
  z-index:99;
}
#header .logo img{
  width:80%; max-width:30rem;
}
#navigation{
  position:absolute;
  bottom:0; left: calc(50% - 104px);
}
#navigation .wrapper-nav{
  position:relative;
}
#navigation.fixed{
  position: fixed;
  top:2rem;
}
#navigation .btn{
  display:block;
  padding:.5rem 1rem; margin:0 auto; width:13rem;
  border-radius:.25rem;
  border:1px solid #ccc;
  background-color:#fff;
  font-size:1rem; font-weight:400; line-height:1.25;
  text-align:center;
   user-select: none;
  transition:all .2s ease-in-out;
}
#navigation .btn::after {
  display:inline-block;
  width:0; height:0;
  margin-left:.3rem;
  vertical-align:middle;
  border-top:.3em solid;
  border-right:.3em solid transparent;
  border-left:.3em solid transparent;
  transition:transform .3s ease-in-out;
  content:"";
}
#navigation .btn[aria-expanded="true"]::after {
  transform:rotate(-180deg);
}
#navigation .dropdown-menu{
  position:absolute;
  display:none;
  list-style:none;
  top:100%; left:calc(50% - 6.5rem); width:13rem;
  padding:.5rem 0; margin:.125rem 0 0;
  background-color: #fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:.25rem;
  font-size:1rem; text-align:left;
  z-index: 1000;
}
#navigation .dropdown-menu button{
  display:block;
  width:100%;
  padding:3px 1.5rem;
  font-weight:400; font-size:1rem;
  white-space:nowrap;
  background:transparent;
  border:0;
  text-align:left;
}

/*General item*/
#content{
  padding:0 0 3rem; max-width:31.25rem; margin:0 auto;
}
#content #happy-hour{
  display:flex;
  justify-content:flex-end;
  margin-right:4rem;
  text-align:center;
}
#content #happy-hour .hh{
  display:inline-block;
  padding:1px 4px;
  color:#fff; background-color:#EF4D3E;
  font-size:.75rem;
  border-radius:30%;
  text-transform:uppercase;
}
#content #happy-hour .happy-title,
#content #happy-hour .hour{
  font-size:1.25rem;
  color:#EF4D3E;
}
#content .item{
  position:relative;
  padding:1rem .875rem 0;
  margin-bottom:3rem;
}
#content .item h2{
  display:flex;
  justify-content:space-between; align-items:center;
  margin:0 0 1.875rem 0;
  font-size:1.875rem;
}
#content .item h2 .text-title{
  display:inline-block;
  margin-right:.625rem;
}
#content .item h2 .logo-price-wrapper{
  display:flex;
  align-items:center;
}
#content .item h2 .logo-half-price{
  display:block;
  margin-right:3rem;
  height:3.875rem; min-width:2.125rem;
  background-repeat:no-repeat; background-size:cover;
  background-image:url(../img/double-beer.png);
}
#content .item h2 .logo-price{
  display:none;
}
#content .item:first-child{
  border-top:none;
  padding-top:3.5rem;
  margin-bottom:3.5rem;
}
#content .header-item{
  margin-bottom:3rem;
}
#content .list-item{
  padding:0; margin:0;
  list-style:none;
}
#content .list-item li{
  display:flex;
  align-items:flex-start;
  margin-bottom:.625rem;
}
#content .list-item li .text{
  position:relative;
  margin-right:2.5rem; width:100%;
}
#content .list-item li .name,
#content .list-item li .price{
  font-size:1rem;
}
#content .list-item li.high-mesg{
  padding-left:1.25rem; margin:0;
  color:#f00;
}
#content .list-item li.high-mesg,
#content .list-item .high-name{
  font-size:1.25rem;
}
#content .list-item li .name{
  display:flex;
  text-transform:uppercase;
}
#content .list-item li .name sup {
  margin-left:.5rem;
  text-decoration:underline;
}
#content .list-item li .name.min{
  text-transform:none;
}
#content .list-item li .desc{
  font-size:.875rem;
}
#content .list-item li .hh{
  position: absolute;
  display:block;
  right:-1.875rem; top:.3125rem;
  padding:1px 4px;
  color:#fff; background-color:#EF4D3E;
  font-size:.75rem;
  border-radius:30%;
  text-transform:uppercase;
}
#content .list-item li .half-price{
  margin-left:auto;
}
#content .list-item li .price{
  margin-left:1rem;
}
#content .list-item li .half-price sup,
#content .list-item li .price sup{
  position:relative;
  top:.125rem;
  margin-right:2px;
}
#content #boissonschaudes .list-item li .price{
  margin-left:auto;
}

.item .background{
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background-position:50% 0;
  background-size:150%; background-repeat:no-repeat;
  z-index:-1;
  opacity:.1;
}
#content #bierespression{
  padding-top:1rem;
}
#bierespression .background{
  top:-5%;
  background-image:url(../img/skull-arbre.jpg);
}
#content #bierespression h2 .logo-half-price{
  margin-right:1.5rem;
  height:2.875rem; min-width:1.375rem;
  background-image:url(../img/simple-beer.png);
}
#content #bierespression h2 .logo-price{
  display:block;
  height:2.5rem; min-width:1.875rem;
  background-repeat:no-repeat; background-size:cover;
  background-image:url(../img/big-beer.png);
}
#bierestrappistes .background{
  background-image:url(../img/illuminati.jpg);
}
#bieresd-abbaye .background{
  background-image:url(../img/5-faces.jpg);
}
#ipa .background{
  background-image:url(../img/hibou.jpg);
}
#stouts .background{
  background-image:url(../img/castor-v.jpg);
}
#lambics .background{
  top:25%;
  background-image:url(../img/timber-character.jpg);
  background-position:0 0;
  background-size:100%; 
}
#fruitees .background{
  top:40%;
  background-image:url(../img/timber-character-1.jpg);
  background-position:0 0;
  background-size:100%; 
}
#paleale .background{
  top:60%;
  background-image:url(../img/skull-sur-le-dos.jpg);
}
#strongale .background{
  top:10%;
  background-image:url(../img/bear-lol.jpg);
}
#lagers .background{
  top:100%; height:140%;
  background-image:url(../img/skull-crazy-car.jpg);
}
#content #bieresapartager  h2 .logo-half-price{
  margin-right: 3.5rem;
  height:5.8125rem; min-width:1.875rem;
  background-image:url(../img/tall-beer.png);
}
#softs .background{
  height:150%;
  background-image:url(../img/sunny-face-cloudy-hat.jpg);
  background-position:0 0;
  background-size:100%; 
}
#content #softs h2 .logo-half-price,
#content #boissonschaudes h2 .logo-half-price,
#content #vinsauverre h2 .logo-half-price{
  display:none;
}
.dot {
  display: inline-block;
  height: .875rem;
  min-width: .875rem;
  margin:.25rem .25rem 0 0;
  border:2px solid #3E1C0A;  
  border-radius: 50%;
}
.dot.ambree{
  background-color: #F68C50;
}
.dot.blanche{
  background-color: #FFFBCC;
}
.dot.blonde{
  background-color: #FFDF68;
}
.dot.brune{
  background-color: #825241;
}
.dot.noire{
  background-color: #341C0A;
}
.dot.rouge{
  background-color: #EF4D3D;
}
.dot.rousse{
  background-color: #F68C50;
}
.dot.rubis{
  background-color: #EF4D3D;
}