@charset "utf-8";

/*------------------------------------------------------------------
[Table of contents]

1. Small desktop
2. Tablet landskape
3. Tablet Portrait
4. Phone
5. Small Phone
6. Max Height 768
-------------------------------------------------------------------*/


/* ==============================
   Small desktop
   ============================== */

@media only screen and (max-width: 1366px) {
	
	
}  

@media only screen and (max-width: 1200px) {
	
    
}

@media only screen and (max-width: 1199px) {
    
    
}

/* ==============================
   Tablet landskape
   ============================== */

@media only screen and (max-width: 1024px) {
	
	
}
  
@media only screen and (max-width: 992px) {
    /* Shopping cart dropdown */
    .shopping-cart-dropdown {
      width:400px;
      min-height:100px;
      padding:0.8%;
      background: rgb(255,233,206);
      position:absolute;
      z-index:9999;
      top:28%;
      right:100px;
      overflow:hidden;
    }

    .shopping-cart-dropdown-container {
      border: 0.2em solid black;
    }

    .shopping-cart-dropdown-container .row {
      margin-top: 1%;
      margin-bottom: 1%;
      margin-left: -2.5%;
    }

    .shopping-cart-dropdown-item-name {
      position:absolute;
      left:5%;
      top:0.4em;
      font-family: Sabon;
      font-size:1.25em;
      color:black;
    }

    .shopping-cart-dropdown-item-qty {
      font-family: SabonDisplay;
      font-size:1.25em;
      color:black;
      position: absolute;
      top:1.9em;
      left:5%;
    }

    .shopping-cart-dropdown-item-price {
      font-family: Sabon;
      font-size:1.25em;
      color:black;
      position: absolute;
      top:0.4em;
      right:30%;
    }

    .shopping-cart-dropdown-total {
      font-family: Sabon;
      font-size:1.25em;
      color:black;
    }

    .shopping-cart-dropdown-add {
      font-family: ParisineCl;
      font-size: 0.88em;
      color:rgb(255,233,206);
      background:black;
      border:none;
      padding:0.4em;
    }

    .shopping-cart-dropdown-add:hover {
      color:rgba(255,233,206,.71);
    }

    .arrow-up {
      width: 0; 
      height: 0; 
      right:210px;
      top:27%;
      position:absolute;
      border-left: 0.5em solid transparent;
      border-right: 0.5em solid transparent;
      border-bottom: 0.5em solid rgb(255,233,206);
    }

	
}
  
  
/* ==============================
   Tablet Portrait
   ============================== */
  
@media only screen and (max-width: 768px) {
  /* ALL */
    ol, ul {
      padding-left: 0;
    }

    h1 {
      font-size: 1.4em;
    }

    h3 {
      font-size: 1em;
    }

    .title {
          margin-top:10px;
          margin-bottom: 20px;
          margin-left: auto;
          margin-right: auto;
          width:100%;
          text-align: center;
      }

    ul.topnav li {display: none;}
    ul.topnav li.icon {
        float: right;
        display: block;
        position:absolute;
        top:100px;
        right:10px;
    }
    ul.topnav li.event-icon {
        float: right;
        display: block;
        position:absolute;
        top:100px;
        right:10px;
    }

    ul.topnav.responsive {}

    ul.topnav.responsive li.icon {
        position: absolute;
        top: 100px;
        right: 10px;
        float:right;
    }
    ul.topnav.responsive li.event-icon {
        position: absolute;
        top: 100px;
        right: 10px;
        float:right;
    }

    ul.topnav.responsive li {
        float: none;
        display: inline;
        text-align: center;
    }

    ul.topnav.responsive li a {
        display: block;
        text-align: left;
        text-align: center;
    }

    ul.topnav.responsive li a.shopping-cart-modal {
        display:none;
        pointer-events: none;
        cursor: default;
    }

    p {
      font-size:11px;
    }

    .radio {
      height:20px !important;
    }

    .collection-method {
      font-size:9px;
    }

    .clear {
      margin-bottom: 135px;
    }

  /* Shopping cart */

    .shopping-cart-dropdown {
      width:70%;
      min-height:100px;
      padding:0.8%;
      background: rgb(255,233,206);
      position:absolute;
      z-index:9999;
      top:35%;
      right:2%;
    }

    .shopping-cart-dropdown-container {
      border: 0.2em solid black;
    }

    .shopping-cart-dropdown-container .row {
      margin-top: 1%;
      margin-bottom: 1%;
      margin-left: -2.5%;
    }

    .shopping-cart-dropdown-item-name {
      position:absolute;
      left:20%;
      top:-2.6em;
      font-family: Sabon;
      font-size:1.25em;
      color:black;
      width:200px;
      overflow: hidden;
    }

    .shopping-cart-dropdown-item-qty {
      font-family: SabonDisplay;
      font-size:1.25em;
      color:black;
      position: absolute;
      top:-1.3em;
      left:20%;
    }

    .shopping-cart-dropdown-item-price {
      font-family: Sabon;
      font-size:1.25em;
      color:black;
      position: absolute;
      top:-2.6em;
      right:10%;
    }

    .shopping-cart-dropdown-total {
      font-family: Sabon;
      font-size:1.25em;
      color:black;
      position: absolute;
      top:-1.4em;
      right:6%;
    }

    .shopping-cart-dropdown-add {
      font-family: ParisineCl;
      font-size: 0.88em;
      color:rgb(255,233,206);
      background:black;
      border:none;
      padding:0.4em;
    }

    .arrow-up {
      width: 0; 
      height: 0; 
      right:10%;
      margin-top:-15px;
      position:absolute;
      border-left: 0.5em solid transparent;
      border-right: 0.5em solid transparent;
      border-bottom: 0.5em solid rgb(255,233,206);
    }  



  /* TEAM PAGE */
    .page-introduction p {
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .page-introduction:after {
        content: "...........................";
    }

    .team-member1 {
        margin-top: 30px !important;
        margin-bottom: 50px !important;
        cursor: pointer;
    }

    .team-member2 {
        margin-bottom: 50px !important;
        cursor: pointer;
    }

    .team-member3 {
        margin-bottom: 50px !important;
        cursor: pointer;
    }

    .team-member-detail1 {
      display:block;
      opacity: 0;
      background:rgba(255,233,206,.91);
      position:absolute;
      top:0;
      left:40%;
      text-align: center;
      width:150px;
      height:200px;
      margin-top: 30px;
      padding:10px;
    }

    .team-member-detail2 {
      display:block;
      opacity: 0;
      background:rgba(255,233,206,.91);
      position:absolute;
      top:0;
      left:40%;
      text-align: center;
      width:150px;
      height:200px;
      padding:10px;
    }

    .team-member-detail3 {
      display:block;
      opacity: 0;
      background:rgba(255,233,206,.91);
      position:absolute;
      top:0;
      left:40%;
      text-align: center;
      width:150px;
      height:200px;
      padding:10px;
    }

    .team-member:hover .team-member-detail1 {
      opacity:1;
    }

    .team-member:hover .team-member-detail2 {
      opacity:1;
    }

    .team-member:hover .team-member-detail3 {
      opacity:1;
    }

    .team-member:active .team-member-detail1 {
      opacity:1;
    }

    .team-member:active .team-member-detail2 {
      opacity:1;
    }

    .team-member:active .team-member-detail3 {
      opacity:1;
    }

  /* ESTORE PAGE */
    .filter {
        width:100%;
        font-size: 12px;
        margin-left: auto;
        margin-right: auto;
    }

    .search {
        width:100%;
        margin-left: auto;
        margin-right: auto;
    }

    .search::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      background-image: url(../img/icons/search.png);
      background-size: 10px;
      background-position: 2% 60%;
      background-repeat: no-repeat; 
    }

    .modal-product-image {
      margin-left:0;
    }

    .modal-product-details {
      margin-left:0;
      max-width:100%;
    }

    .item-popup .container .row {
      /*padding-right:20px;*/
    }

    .hover-bg .hover-text {
      min-width:150px;
    }

    /*#m-product-img {
      max-height:300px;
      width:auto;
      margin-left:auto;
      margin-right:auto;
    }*/

    #res-container {
      top:5%;
      max-height:620px;
      overflow-y:auto;
    }
    
  /* EVENTS PAGE */
    .subtitle {
        top:50px;
        left:10px;
    }

  /* WHATS NEW PAGE */
    .promo-img-res {
        width:50%;
        height:auto;
        margin-left:auto;
        margin-right: auto;
        padding-left: 15px;
        margin-bottom: 15px;
    }

    .promotion-container-res {

    }

    .promo-title-res {
        margin-bottom:6px;
        margin-left:auto;
        margin-right: auto;
        width:100%;
        text-align: center !important;
    }

    .promo-details-res {
        margin-left:auto;
        margin-right: auto;
        width:100%;
        text-align: center !important;
    }

    .read-more-res {
        margin-left:auto;
        margin-right: auto;
        width:100%;
        text-align: center !important;
    }

  /* CONTACT PAGE */
    .contact-form {
        width:80%;
        margin-left: auto;
        margin-right: auto;
    }

    .desktop-social-media {
        display:none;
    }

    .mobile-social-media {
        display:block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .mobile-social-media img {
        margin:10px;
        margin-top: 50px;
        margin-bottom: -10px;
    }

    .sm-header {
        font-family: SabonDisplay;
        color: rgb(255,233,206);
        font-size:14px;
        margin-top: 25px;
        text-align: left !important;
    }

    .mobile-contacts {
        font-family: Parisine;
        font-size:9px;
        color: rgb(255,233,206);
        text-align: left;
    }

    .contact-form input, textarea {
        border-radius: 0px !important;
    }

    .branch-info {
      margin-top:20px;
      padding-left:75px;
    }

    .branch-group {
      margin-top:0px;
    }

    .ops-header {
      text-decoration: underline;
      font-family: Parinsine;
    }

    .ops-time {
      font-family: Parinsine;
    }

    .branch-address {
      font-family: Parinsine;
    }

    .branch-detail {
      margin-bottom:30px;
    }

  /* Order sumamry */
    .line-top {
      width:80%;
      margin-left: 15%;
      margin-right: auto;
    }

    .checkout-header {
      font-size: 8px;
    }

    .checkout-item {
      font-size:9px;
    }

    .delivery-notice {
      font-size: 9px !important;
    }

    .delivery-header {
      font-size: 12px;
    }

  /* Checkout */
    .co-remarks {
      margin-top:0;
    }

    .co-footnote {
      font-size: 11px;
      text-align: center;
    }

    .place-order-btn {
      width:100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }

    .place-order-btn:hover {
      width:100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }

    .co-img {
      left: 125px;
    }

    .co-item-details {
      margin-top:15px;
    }

    .bee3D--slide__active {
      opacity: 1;
      z-index: 10;
    }

    .bee3D--nav__prev {
      margin-top: 150px;
    }

    .bee3D--nav__next {
      margin-top: 150px;
    }      

}

@media only screen and (max-width: 767px) {

}


/* ==============================
   Phone
   ============================== */
  
@media only screen and (max-width: 480px) {    
    /* ALL */
    .container {
      width:450px;
    }

    h1 {
      font-size: 1.2em;
    }

    .wn h1 {
      font-size: 16px !important;
    }

    h3 {
      font-size: 0.88em;
    }

    .logo_nav {
        position:relative;
    }

    .title {
        margin-top:10px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        width:100%;
        text-align: center;
    }

    p {
      font-size:10px;
    }

    .radio {
      height:10px !important;
    }

    .collection-method {
      font-size:10px;
    }

    .clear {
      margin-bottom: 129px;
    }

    ul.topnav li {display: none;}
    ul.topnav li.icon {
        float: right;
        display: block;
        position:absolute;
        top:100px;
        right:-100px;
    }
    ul.topnav li.event-icon {
        float: right;
        display: block;
        position:absolute;
        top:100px;
        right:0px;
    }

    ul.topnav.responsive {}

    ul.topnav.responsive li.icon {
        position: absolute;
        top: 100px;
        right: -100px;
        float:right;
    }
    ul.topnav.responsive li.event-icon {
        position: absolute;
        top: 100px;
        right: 0px;
        float:right;
    }

    ul.topnav.responsive li {
        float: none;
        display: inline;
        text-align: center;
    }

    ul.topnav.responsive li a {
        display: block;
        text-align: left;
        text-align: center;
    }

    ul.topnav.responsive li a.shopping-cart-modal {
        display:none;
        pointer-events: none;
        cursor: default;
    }

    .footer {
        width:140%;
        font-size: 8px;
        overflow-x:hidden;
    }

    .footer .container {
      border-top: 0.1em solid rgba(255,233,206,.71);
    }

    .footer-padding {
        border-left:none;
    }

    .footer-padding-right {
      border-right:none;
    }

    .footer-middle {
        border-left: 0.1em solid rgba(255,233,206,.71);
        border-right: 0.1em solid rgba(255,233,206,.71);
    }

    /* Shopping cart */

    .shopping-cart-dropdown {
      width:120%;
      min-height:100px;
      padding:0.8%;
      background: rgb(255,233,206);
      position:absolute;
      z-index:9999;
      top:35%;
      right:-32%;
      overflow:hidden;
    }

    .shopping-cart-dropdown-item-remove {
      top:-1.3em;
      right:10%;
    }

    .shopping-cart-dropdown-container {
      border: 0.2em solid black;
    }

    .shopping-cart-dropdown-container .row {
      margin-top: 1%;
      margin-bottom: 1%;
      margin-left: -2.5%;
    }

    .shopping-cart-dropdown-item-name {
      position:absolute;
      left:20%;
      top:-2.6em;
      font-family: Sabon;
      font-size:1.25em;
      color:black;
      width:200px;
      overflow: hidden;
    }

    .shopping-cart-dropdown-item-qty {
      font-family: SabonDisplay;
      font-size:1.25em;
      color:black;
      position: absolute;
      top:-1.3em;
      left:20%;
    }

    .shopping-cart-dropdown-item-price {
      font-family: Sabon;
      font-size:1.25em;
      color:black;
      position: absolute;
      top:-2.6em;
      right:10%;
    }

    .shopping-cart-dropdown-total {
      font-family: Sabon;
      font-size:1.25em;
      color:black;
      position: absolute;
      top:-1.4em;
      right:6%;
    }

    .shopping-cart-dropdown-add {
      font-family: ParisineCl;
      font-size: 0.88em;
      color:rgb(255,233,206);
      background:black;
      border:none;
      padding:0.4em;
    }

    .arrow-up {
      width: 0; 
      height: 0; 
      right:-6.5%;
      top:35.2%;
      position:absolute;
      border-left: 0.5em solid transparent;
      border-right: 0.5em solid transparent;
      border-bottom: 0.5em solid rgb(255,233,206);
    }

    /* TEAM PAGE */
    .page-introduction p {
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .page-introduction:after {
        content: "...........................";
    }

    .team-member1 {
        margin-top: 30px !important;
        margin-bottom: 50px !important;
        cursor: pointer;
    }

    .team-member2 {
        margin-bottom: 50px !important;
        cursor: pointer;
    }

    .team-member3 {
        margin-bottom: 50px !important;
        cursor: pointer;
    }

    .team-member-detail1 {
      display:none;
      background:rgba(255,233,206,.91);
      position:absolute;
      top:0;
      left:33.33333%;
      text-align: center;
      width:150px;
      height:200px;
      margin-top: 30px;
      padding:10px;
    }

    .team-member-detail2 {
      display:none;
      background:rgba(255,233,206,.91);
      position:absolute;
      top:0;
      left:33.33333%;
      text-align: center;
      width:150px;
      height:200px;
      padding:10px;
    }

    .team-member-detail3 {
      display:none;
      background:rgba(255,233,206,.91);
      position:absolute;
      top:0;
      left:33.33333%;
      text-align: center;
      width:150px;
      height:200px;
      padding:10px;
    }

    .team-member:hover .team-member-detail1 {
      display:block;
    }

    .team-member:hover .team-member-detail2 {
      display:block;
    }

    .team-member:hover .team-member-detail3 {
      display:block;
    }

    /* ESTORE PAGE */
    .filter {
        width:100%;
        font-size: 8px;
        margin-left: auto;
        margin-right: auto;
    }

    .search {
        width:100%;
        margin-left: auto;
        margin-right: auto;
    }

    .search::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      background-image: url(../img/icons/search.png);
      background-size: 10px;
      background-position: 2% 60%;
      background-repeat: no-repeat; 
    }

    .modal-product-image {
      margin-left:0;
    }

    .modal-product-details {
      margin-left:0;
      max-width: 100%;
    }

    .img-responsive {
      /*max-width: 83%;*/
    }

    /*#m-product-img {
      max-height:300px;
      width:auto;
      margin-left:auto;
      margin-right:auto;
    }*/

    #res-container {
      top:5%;
      max-height:620px;
      overflow-y:auto;
    }

    .close {
      top:0px;
      right:0px;
      position:absolute;
    }
    
    .hover-bg .hover-text {
      min-width:150px;
    }

    /* EVENTS PAGE */
    .subtitle {
        top:10px;
        left:10px;
    }

    /* WHATS NEW PAGE */
    .promo-img-res {
        width:50%;
        height:auto;
        margin-left:auto;
        margin-right: auto;
        padding-left: 15px;
        margin-bottom: 15px;
    }

    .promotion-container-res {

    }

    .promo-title-res {
        margin-bottom:6px;
        margin-left:auto;
        margin-right: auto;
        width:100%;
        text-align: center !important;
    }

    .promo-details-res {
        margin-left:auto;
        margin-right: auto;
        width:100%;
        text-align: center !important;
    }

    .read-more-res {
        margin-left:auto;
        margin-right: auto;
        width:100%;
        text-align: center !important;
    }

    /* CONTACT PAGE */
    .contact-form {
        width:80%;
        margin-left: auto;
        margin-right: auto;
    }

    .desktop-social-media {
        display:none;
    }

    .mobile-social-media {
        display:block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .mobile-social-media img {
        margin:10px;
        margin-top: 50px;
        margin-bottom: -10px;
    }

    .sm-header {
        font-family: SabonDisplay;
        color: rgb(255,233,206);
        font-size:14px;
        margin-top: 25px;
    }

    .mobile-contacts {
        font-family: Parisine;
        font-size:9px;
        color: rgb(255,233,206);
        text-align: left;
    }

    .contact-form input, textarea {
        border-radius: 0px !important;
    }

    .branch-info {
      margin-top:20px;
      padding-left: 75px;
    }

    .branch-group {
      margin-top:0px;
    }

    .ops-header {
      text-decoration: underline;
      font-family: Parinsine;
    }

    .ops-time {
      font-family: Parinsine;
    }

    .branch-address {
      font-family: Parinsine;
    }

    .branch-detail {
      margin-bottom:30px;
    }

  /* Order sumamry */
    .line-top {
      width:80%;
      margin-left: 15%;
      margin-right: auto;
    }

    .checkout-header {
      font-size: 8px;
    }

    .checkout-item {
      font-size:9px;
    }

    .delivery-notice {
      font-size: 9px;
    }

    .delivery-header {
      font-size: 12px;
    }

  /* Checkout */
    .co-remarks {
      margin-top:0;
    }

    .co-footnote {
      font-size: 11px;
      text-align: center;
    }

    .place-order-btn {
      width:100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }

    .place-order-btn:hover {
      width:100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }

    .co-img {
      left: 75px;
    }

    .co-item-details {
      margin-top:15px;
    }

    .event-img {
      width: 380px;
      height: auto;
    }

    .bee3D--slide__active {
      opacity: 1;
      z-index: 10;
    }

    .bee3D--nav__prev {
      margin-top: 150px;
    }

    .bee3D--nav__next {
      margin-top: 150px;
    }

}


/* ==============================
   Small Phone (uncommon)
   ============================== */
  
@media only screen and (max-width: 319px) {
	
  
}


/* ==============================
   Max Height 768 (uncommon)
   ============================== */

@media only screen and (max-height: 767px) {

    
}

/* ==============================
   bee3d slider
   ============================== */
@media (min-width: 1051px) {
  .bee3D--parent {
    -webkit-perspective:600px;
    perspective:600px;
    margin-top:200px;
  }

  .bee3D--slide__active {
    opacity: 1;
    z-index: 10;
  }

  .item-popup .e-container {
    background:rgb(255,233,206);
    top: -190px;
    position:absolute;
    max-height: none;
  }
}

@media (max-width: 1050px) {
  .bee3D--parent {
    -webkit-perspective:600px;
    perspective:600px;
    margin-top:200px;
  }

  .bee3D--slide__active {
    opacity: 1;
    z-index: 10;
  }

  .item-popup .e-container {
    background:rgb(255,233,206);
    top: -190px;
    position:absolute;
    max-height: none;
  }
}

@media (max-width: 920px) {
  .bee3D--parent {
    -webkit-perspective:600px;
    perspective:600px;
    margin-top:200px;
  }

  .bee3D--slide__active {
    opacity: 1;
    z-index: 10;
  }

  .event_close {
    top:15px;
    right:15px;
    position:absolute;
    z-index: 999;
  }

  .item-popup .e-container {
    background:rgb(255,233,206);
    top: -190px;
    position:absolute;
    max-height: none;
  }
}

@media (max-width: 720px) {
  .bee3D--parent {
    -webkit-perspective:600px;
    perspective:600px;
    margin-top:200px;
    /*zoom: 0.6;*/
  }

  .bee3D--slide__active {
    opacity: 1;
    z-index: 10;
  }

  .event_close {
    top:15px;
    right:40px;
    position:absolute;
    z-index: 999;
  }

  .item-popup .e-container {
    background:rgb(255,233,206);
    top: -120px;
    position:absolute;
    max-height: none;
  }
}