@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Special+Gothic+Condensed+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Fredoka:wght@300..700&family=Noto+Sans+JP:wght@100..900&family=Shrikhand&display=swap");

:root {
  --primary: rgba(255, 229, 16, 1);
  --secondary: rgba(255, 135, 45, 1);
  --text: #333
}

.modal-content {
  border: none !important;
}
.jqicontainer {
  width: 500px !important;
  box-shadow: 0px 4px 10px rgb(255 229 16 / 28%);
}
.jqimessage div{
  width: 95%;
}

div.jqi .jqimessage{;
  background-color: white;
}
div.jqi .jqiclose{
  right: -90px;
}
div.jqi .jqibuttons{
  background-color: black
}
div.jqi button.jqidefaultbutton{
  background-color: var(--primary);
  color: black;
}

.modal-header,
.modal-header .item-icons-container,
.modal-header .item-icons,
.modal-title {
  background-color: #fff !important;
}

.modal-title {
  font-weight: 700 !important;
}
.input-group-label {
  color: var(--text);
}

.input-group-label:hover {
  background-color: var(--secondary) !important;
  color: #fff;
}

.modal-footer input,
input:checked + .input-group-label,
.modal-deals .modal-header button,
.modal-deals .modal-footer button,
.modal-deals .modal-body .auto-deal-selection button,
.modal-deals .modal-body .deal-modal-body-selection-list button {
  background-color: var(--primary) !important;
}

.btn-primary {
  border-color: var(--primary) !important;
  background: linear-gradient(
    90deg,
    rgba(255, 229, 16, 1) 57%,
    rgba(255, 135, 45, 1) 100%
  );
  color: #333 !important;
 font-size: 18px !important;
}
    #float-box #promo-code .input-group #promtional-code {
        font-size: 18px;
        height: auto;
    }

#float-box{
  background-color:#000000e8;
  box-shadow: 0 10px 15px rgb(255 135 45 / 45%);

  #pickup-only-txt{
    color:#fff !important;
    font-weight:700
  }
  .basket-your-orders, #empty-basket-txt{
    color:#c3c3c3 !important;
  }
  
  #mybasket-ul{
    background-color:#000000e8 !important;
    color:#fff;

    li{
      background-color:#000 !important;  
      border-bottom: 2px dashed #fff !important;
    }
    
    li .item-label{
          background: linear-gradient(
      90deg,
      rgba(255, 229, 16, 1) 20%,
      rgba(255, 135, 45, 1) 100%
    );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-weight:900;
    }

    .glyphicon{
        filter: brightness(0%) invert(100) !important;
    }
  }
  
  #view-basket .item-price-total{
    background-color:#000 !important;  
    color:  #fff;
  }

  #promo-code{
    background-color:#000 !important;  
    color:  #fff;

    .input-group label{
      color: var(--secondary) !important;
    }
  }

  @media only screen and (max-width: 1024px) {
        position: fixed;
        background: #000000 !important;
        top: 0;
        font-size: 22px;
        text-align: center;
        font-weight: bold;
        color: #51585e !important;
    

      #menu-title{
        background-color:#000 !important;
        color:var(--secondary) !important;

        .glyphicon {
            filter: brightness(0%) invert(100) !important;
        }
      }
    
      #pickup-only-txt{
        background-color:#000;
      }

      #view-basket .basket-your-orders{
        background-color:#000 !important;
        color:#c3c3c3 !important;
      }
  }
  
}
.modal-content{
  border-radius: 15px !important;
}
.modal-header{
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
}

.office-info {
background: rgba(36, 45, 45, 0.6); !important;
}
.office-info .desk-top-title {
  font-family: "Dancing Script", cursive;
  font-size: 100px;
  font-weight: bold;
  letter-spacing: 1px;
  background: linear-gradient(270deg, yellow, orange, yellow);
  background-size: 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(5px 3px 15px black);
  animation: glowShift 4s ease-in-out infinite;
}

@keyframes glowShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.office-info .logo img {
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  filter: drop-shadow(5px 3px 20px #f89526);
  border-radius: 40px !important;
  padding: 10px;
}
.office-info .logo {
  display: none;
  border: 2px solid;
}
.img-responsive-title {
  width: 400px !important;
  filter: drop-shadow(5px 3px 15px #f89526);
  animation: glowShift 4s ease-in-out infinite;
}

@keyframes glowShift {
  0% {
    filter: drop-shadow(5px 3px 15px #f89526);
  }
  50% {
    filter: drop-shadow(5px 3px 25px #ffbb5c);
  }
  100% {
    filter: drop-shadow(5px 3px 15px #f89526);
  }
}

.office-info .desk-top-title {
  padding: 10px;
}

.office-info p {
 font-family: "Fredoka", sans-serif !important;
  font-size: 14px;
  color: white;
  text-align: center;
  /* margin-right: 10%; */
  letter-spacing: 2px;
}
.store-info strong {
  font-weight: lighter !important;
  border-bottom: 4px solid yellow !important;
}

.office-wrapper {
  /* padding: 0px; */
  /* display: flex; */
  justify-content: center;
  width: 100%;
  margin-left: 0% !important;
  text-align: center;
  position: relative;
  top: 80px !important;

  @media (max-width: 1024px) {
    top: 0 !important;
  }
}

.storeinfo {
  /* transform: translate(35%, 0%); */
  color: white;
  /* position: inherit; */
  /* left: 9.7%; */
  /* bottom: px; */
  /* border: 2px solid white; */
  flex: 1;
  
  #bs-navbar {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    right: 410px;
    bottom: 30%;
    line-height: 1.5;
    transition: all 0.4s ease;
    
    p {
      font-size: 18px;
    }
 
    @media (min-width: 2150px) {
        right: 750px !important;
    }
    
    @media (min-width: 1650px) {
        right: 530px;
    }
 
    @media (max-width: 1300px) {
      width:70%;
    }
  }

    @media (max-width: 1024px) {
      padding:6rem;

        #bs-navbar {
          right: 0;
          bottom: 0;
          position: relative;
          width:100%;
        }
    }
}
 
/* MENU HEADER*/
#menu {
  -webkit-transition: ease 0.4s;
  transition: ease 0.4s;
  background-color: #000;
  padding-right: 50px;
  padding-left: 50px;
  width: 100%;
}
#menu-cont > #menu > #menu-ul > li > a.menu-active {
  border-bottom: none !important;
  color: black !important;
  background: yellow !important;
}
#menu ul li:hover > a {
  color: black !important;
  background: yellow !important;
  transition: background-color 0.3s ease, border-color 0.7s ease !important;
}

#menu ul {
  width: 100%;
  overflow-x: visible;
  white-space: nowrap;
  list-style-type: none;
  text-align: center;

  @media (max-width: 768px) {
    border-inline: 2px solid #f89526;
  }
}
@media (max-width: 768px) {
  #menu ul li a {
    color: #fff !important;
    border-radius: 5px;
    background-color: transparent;
    padding: 5px 15px !important;
    font-size: 13px;
  }
}

.pn-Advancer {
  background: none !important;
}

.pn-Advancer_Icon {
  fill: #fff !important;
}

#menu-items .menu-item {
  width: auto;
  background: white;
  
  
  
  

  h1 {
    color: black !important;
    font-family: "Fredoka", sans-serif !important;
    font-weight: 900 !important;
    /*z-index: 9;*/
    padding: 1rem;
    background: #000;
    text-align: center;
    background-color: transparent !important;
  }

  #menu-desc-header {
    color: #fff;
    text-align: center;
    font-size: 15px;
  }
}
#menu-items ul li.single div.item-price,
#menu-items ul li.group div.item-price {
  --f: 15px;
  --r: 10px;
  --t: 10px;
  position: absolute;
  inset: var(--t) calc(-1 * var(--f)) auto auto;
  padding: 10px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--f)),
    calc(100% - var(--f)) 100%,
    calc(100% - var(--f)) calc(100% - var(--f)),
    0 calc(100% - var(--f)),
    var(--r) calc(50% - var(--f) / 2)
  );
  background: linear-gradient(
      90deg,
      rgba(255, 229, 16, 1) 57%,
      rgba(255, 135, 45, 1) 100%
    );
  box-shadow: 0 calc(-1 * var(--f)) 0 inset #0005;
  color: black;
  font-size: 14px;
  text-align: center;
  width: 101px !important;
  height: 55px;
}

#menu-items ul li.group,
#menu-items ul li.single {
  color: #fff;
  transition: all 0.3s ease;
  border-radius: 4px !important;

  & .item-title {
    font-family: "Fredoka", sans-serif !important;
    font-size: 18px;
    background: black;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 75% !important;
  }

  & .item-description {
    color: black;
    width: 70%;
  }

  & .item-icons-container .item-icons img {
    filter: brightness(0%) invert(100) !important;
  }
  & .item-description::after {
    display:none;
  }
  @media (max-width: 768px) {
    
    border: 1px solid;
    margin: 1.5rem;
    
  }
}
#menu-items > .item-icons-container{
  padding-bottom: 5rem !important;
}

#menu-items ul li.group:hover,
#menu-items ul li.single:hover {
  background-color: #F5F5F5;
  border: 1px solid #fff;
  box-shadow: 0 10px 20px black;
  /* transform: scale(1.1); */

  & .item-price {
    color: black;
    background: linear-gradient(
      90deg,
      rgba(255, 229, 16, 1) 57%,
      rgba(255, 135, 45, 1) 100%
    );
  }
}
    #menu ul li a {
       font-family: "Fredoka", sans-serif !important;
        font-size: 20px;
        color: #fff;
        padding: 20px 25px;
        text-decoration: none;
        font-weight: normal;
      letter-spacing: 1px;
    }
#estimated-time,
#est-time,
#time-mins {
  font-family: "Fredoka", sans-serif !important;
  color: yellow;
  filter: drop-shadow(10px 4px 15px black);
  letter-spacing: 3px
}

@media (max-width:480px){
 
  #menu ul{
    box-shadow: 0;
  }
  #menu ul li{
      overflow:visible;
      padding: 1rem;
      margin-top:0.5rem;
    a{
      border-radius:10px;
    }
  }
}

@media (max-width:1024px){
  #menu-items ul li.group, #menu-items ul li.single{
    border: 1px solid BLACK;

  }
  .store-frame{
    text-align: center;
    padding-bottom: 0 !important;
    padding-top: 10px;
    background-color: black;
  }
  #menu-items{
    background-color: white !important;
  }
  
     #left-nav.active {
      -webkit-transform: translatex(0);
      transform: translatex(0);
      background-color: black;
      
    }
    center {
      display: block;
      text-align: -webkit-center;
      unicode-bidi: isolate;
      color: white;
  }
    #left-nav #store-nav {
      width: 100%;
      padding: 10px;
      background: #000;
  }
}

  #left-nav ul li:hover {
    z-index: 10;
    background-color: white !important;
}
  #left-nav ul li {
    position: relative;
    min-height: 40px;
    line-height: 40px;
    padding-left: 10px;
    background-color: black;
    -webkit-transition: ease .4s;
    transition: ease .4s;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    list-style: none;
}
     #left-nav ul li a {
       font-size: 18px;
       font-weight: bold;
    text-decoration: none;
    width: 100%;
    display: inline-block;
    background: linear-gradient(90deg, rgba(255, 229, 16, 1) 57%, rgba(255, 135, 45, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media only screen and (max-width: 600px) and (min-width: 200px) {
  #menu-items ul li.single div.item-price,
  #menu-items ul li.group div.item-price {
    color: #000;
    font-size: 12px;
    width: 80px !important;
    height: 50px;
    margin-right: 16px;
    inset: var(--t) calc(-1 * var(--f)) auto auto;
    padding: 10px;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--f)),
      calc(100% - var(--f)) 70%,
      calc(100% - var(--f)) calc(100% - var(--f)),
      0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f) / 2)
    );
    /* background: #e0e0e; */
    box-shadow: 0 calc(-1 * var(--f)) 0 inset #0005;
  }
}

/* CHECKOUT */
#bt-checkout {
  background-color: var(--primary) !important;
  color: var(--text) !important;
  @media (max-width:1024px){
    width:100%;
  }
}

#bt-checkout:hover{
  background-color: var(--secondary);
}

.cart-collapse{
  background-color: #000!important;
  z-index: 99 !important;
  button {
    background-color: var(--primary) !important;
    color: var(--text) !important;

    .item-table-counter{
      border:2px solid var(--text);
    }
    #cartTotal{
          color: var(--text) !important;
    }
  }
}
.store-frame{      
  background-color: black !important;
}
#login{
  font-size:14px !important;
}
#order-type-card h4:before{
  content:'Jersey Burgers' !important;
  height:100%;
  display:block;
  width:100%;
}

#order-type-card h4{
  padding:1rem
}
#order-type-card h4 img{
  display:none !important;
}

#validate{
  font-size: 14px !important;
}

#float-box #view-basket ul#mybasket-ul li span.order-item-basket {
  padding:1rem !important;
}

#mybasket-ul .parent-item{
    background-color:#fff !important;

}

.card #view-basket #mybasket-ul li{
  background-color: #fbfbfb !important;
}

.right #float-box {
  box-shadow:none !important;
  
    & #mybasket-ul {
      li{
        border-bottom: none !important;
      }
        li .item-label {
            background: linear-gradient(90deg, var(--text) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
        }
    }
}
@media (max-width: 940px){
.jqicontainer {
  width: 100% !important;
}
  div.jqi .jqiclose{
    right: 0px !important;
}
  
}

#h-address a::before {
  content:'';
  position:absolute;
  color: transparent;
  background-image: url(./uploads/fb_icon.png) !important;
  background-size:cover;
  width:22px;
  height:22px;
  left:-31px;
  top:-3px;
}

#h-address a {
    position:relative;
  left:30px;
    color:var(--primary) !important;
}

#h-phone{
  display:none;
}