.menu-bottom-bar {
  background-color: rgba(0,0,0,.65);
  width: 100%;
  height: 44px;
  position: absolute;
  top: 52px;
  z-index: 901;
  text-align: right;
}
@media (max-width: 768px) {
  .menu-bottom-bar {
    top: -10px;
  }
}

.menu-bottom-bar--content {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 15px;
  margin-top: 3px;
}

@media (max-width: 352px) {
  .menu-bottom-bar--content {
    padding: 0 10px;
    text-align: center;
  }
}

.menu-bottom-bar--content a {
  -webkit-background-size: cover;
  background-size: cover;
  display: inline-block;
}

.menu-bottom-bar--content img {
  height: 36px;
  width: auto;
}

.menu-bottom-bar--content .or-text {
  color: #ffc734;
  margin: 10px;
  font-size: 18px;
}

/*mobile intro block*/
.menu-bottom-bar--mobile-intro {
  margin: 0 auto;
  width: 100%;
  z-index: 901;
  background: rgba(0,0,0,.90);
  position: absolute;
  top: 46px;

  text-align: center;
  padding: 50px 0px;
  display: none;
}
.menu-bottom-bar--mobile-intro img {
  height: auto;
  width: 100%;
}
.menu-bottom-bar--mobile-intro a {
  display: inline-block;
  width: 30%;
}
.menu-bottom-bar--mobile-intro .or-text {
  color: #ffc734;
  font-size: 4.5rem;
}

@media (max-width: 768px) {
  .hideOnMobile {
    display: none;
  }

}
@media (min-width: 768px) {
  .hideOnDesktop {
    display: none;
  }
  .menu-bottom-bar {
    height: 51px;
    top: 53px!important;
  }
  .menu-bottom-bar--content img {
    height: 40px;
  }
}


/* Mobile block animation */

@-webkit-keyframes slidetotop{
  from {top: 46px}
  to {top: -580px;}
}
@keyframes slidetotop {
  from {top: 46px}
  to {top: -580px;}
}
.slidetotop-animation {
  -webkit-animation-name: slidetotop;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-name: slidetotop;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


@-webkit-keyframes slidetobottom{
  from {top: -10px;
    display: none;}
  to {top: 46px;
    display: block;}
}
@keyframes slidetobottom {
  from {top: -10px;
    display: none;}
  to {top: 46px;
    display: block;}
}
.slidetobottom-animation {
  -webkit-animation-name: slidetobottom;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-name: slidetobottom;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}



/* Overrides for existing CSS. Will only apply to pages that have the menubar*/

#main-nav {
  background-color: rgba(0,0,0,1);
}
/*bring content down if menu-bottom-bar is active on the page*/
#content-container {
  margin-top: 46px;
}
.mcdeliverytab-wrapper {
  display: none;
}
.promo-image {
  background: #000;
}
@media (min-width: 768px) {
  #content-container {
    margin-top: 50px;
  }
}
/*needed for some odd reason*/
#wrapper {
  border-top: .1px solid black;
}

/* find a restaurant mobile */
.openMapPanel #map-right-panel {
  /*top: 200px;*/
}