@font-face { font-family: proxima-reg;src: url("../fonts/proxima-nova/ProximaNova-Regular.otf") }
@font-face { font-family: proxima-bold;src: url("../fonts/proxima-nova/Proxima-Nova-Bold.otf") }
@font-face { font-family: proxima-extra-bold;src: url("../fonts/proxima-nova/Proxima-Nova-Extrabold.otf") }
@font-face { font-family: proxima-black;src: url("../fonts/proxima-nova/Proxima-Nova-Black.otf") }

html, body {
  /*background-color: #333;*/
  margin-bottom: 50px;
  padding: 0;
  overflow-x: hidden;
  font-family: proxima-reg, sans-serif;
}

a { color: #000 }
a:hover { text-decoration: unset; color: #000 ; }

.bg-yellow { background-color: #F2C941 }

.proxima-bold { font-family: proxima-bold; }
.proxima-black { font-family: proxima-black; }
.proxima-extra-bold { font-family: proxima-extra-bold; }

.full-page {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

.header-layout {
  height: 15vh;
  height: calc(var(--vh, 1vh) * 15);
}

.body-layout {
  height: 85vh;
  height: calc(var(--vh, 1vh) * 85);
}

#navbar-bottom .container {
  background: #ffffff;
  box-shadow: 0px 10px 5px #ded7d7, 0px 3px 11px 0px #929292
}

.sticky {
  position: fixed;
  display: inline-block;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #F2C941
}
.menu-sticky {
  position: fixed;
  display: inline-block;
  z-index: 2;
  top: 60px;
  left: 0;
  background-color: #fff;
}

.banner {
  height: 85vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 85);
}
  /*.banner img { height: 100% }*/

.bottom-bar {
  height: 15vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 15);
  background-color: #F2C918;
}
  #nav-category { cursor: pointer; }

@keyframes slideUp {
  0% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateY(0);
  }
}

/* CATEGORY */
#category {
  animation: 0.8s ease-out 0s 1 slideUp;
}
  .img-category { width: 200px }


/* MENU */
.btn-add-cart {
  background-color: #F2C941;
  color: #000
}
#cover-menu { box-shadow: -1px 2px 8px 2px #ceb8b8; }
#cover-menu h4 { 
  position: absolute;
  top: 20px;
  left: 10px; 
}
#cover-menu img {
  width: 250px;
  position: absolute;
  right: -30px;
  bottom: -20px
}
.menu-desc { font-size: 12px;padding-right: 20px }
    .menu-price { font-size: 14px }
.btn-number { font-size: 9.5px }
.qty-minus, .qty-plus {
  font-size: 8px;
  /*min-width: 25px;*/
  width: auto;
  padding: 5px 8px;
  border: none;
  transition: all 300ms ease;
}
  .qty-minus { background-color: #dc3545;color: #ffffff }
  .qty-plus { background-color: #28a745;color: #ffffff }
.qty-field { 
  width: 40px;
  margin: 0 5px;
  border: 1px solid #eeeeee;
  text-align: center;
}

.img-menu-thumb {
  max-width: 80px;
  margin-left: 30px;
}
  .img-menu-thumb img {
    object-fit: contain;
    height: 80px;
  }

.payment { background:#f6f9fc; }
.payment-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 25px;
  overflow: hidden;
}
  .btn-payment {
    position: relative;
    height: 50px;
    margin-bottom: .8rem;
    padding: 0 0 0 50px;
    font-size: 14px;
    line-height: 48px;
    border-bottom: 1px solid #bbb;
    background: #fafafa;
    cursor: pointer;
  }
  .btn-payment:hover {
    background: #f5f5f5;
  }
  .btn-payment:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 18px;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #bbb, inset 0 0 0 7px #fff;
    background: #fff;
  }
  .btn-payment:hover:after {
    background: #bbb;
  }
  .btn-payment.active:after {
    background: #555;
  }

input[name=payment_method] { visibility: hidden;position: absolute; top: 0 }


.payment-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 25px;
  overflow: hidden;
}
  .payment-container img { width: 50px }
  .btn-payment {
    float: left;
    width: 100%;
    margin-right: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    border: 0;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #bbb;
  }
  .btn-payment:last-child {
    margin-right: 0;
  }
  .btn-payment:after {
    top: 1;
    left: 40px;
  }
  .title-payment-container { 
    padding-left: 30px;
    padding-right: 20px;
    height: 100%;
  }

.info-payment {
  display: none;
}
.info-payment.show-info-payment {
  display: block;
  border: 1px solid #bbb;
  margin-bottom: 1.2rem;
}
  .show-info-payment { font-size: 12px }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /*main { max-width: 400px;margin: 0 auto; }*/
  /*body { background-color: #feca15 }
  .banner { max-width: 400px;margin: 0 auto; }*/
}

.btn-upload-proof { 
  width: 150px; 
  background-color: #F2C941;
  color: #333;
  margin: 10px 0;
  padding: 5px 10px;
  text-align: center;
  border: 0;
  border-radius: .25rem;
}