body:lang(ru) {
  font-family: 'Ubuntu', sans-serif;
}

body:lang(uk) {
  font-family: 'Ubuntu', sans-serif;
}

body:lang(en) {
  font-family: 'Quicksand', sans-serif;
}

.anchor-link::before {
  content: '';
  display: block;
  height:      75px;
  margin-top: -75px;
  visibility: hidden;
}

.page-title-text-text:lang(en), .slider-title:lang(en), .card-title:lang(en), .map-padding:lang(en), .wide-menu:lang(en), .product-information-button:lang(en), .faq-accordion-heading:lang(en), h2:lang(en), .footer-white-link:lang(en) {
  font-weight: 400;
}

.map-padding {
  padding-bottom: 20px
}

.map-button-margin {
  margin-bottom: 60px;
}

button.gm-ui-hover-effect {
  min-width: 0;
  margin: 10px!important;
}

.recipe_heading {
  color: white;
  font-weight: 400;
  line-height: 3;
}

@media screen and (min-height: 950px) {
  .slider-container {
    display: none;
  }
}

@media screen and (min-width: 1200px) {
  /* different colours bg and shadow depending on item */

  #green-tea-tiramisu:hover #green-tea-tiramisu-pic {
    background: #E6FCA4;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(230,252,164,0.35);
    box-shadow: 0px 0px 8px 8px rgba(230,252,164,0.35);
    transition: 0.5s;
  }

  #caramel-pudding:hover #caramel-pudding-pic {
    background: #DCB467;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(220,180,103,0.35);
    box-shadow: 0px 0px 8px 8px rgba(220,180,103,0.35);
    transition: 0.5s;
  }

  #raspberry:hover #raspberry-pic {
    background: #EEAAAC;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    transition: 0.5s;
  }

  #double-mango:hover #double-mango-pic {
    background: #F2BF88;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,191,136,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,191,136,0.35);
    transition: 0.5s;
  }

  #sakura:hover #sakura-pic {
    background: #FBEFEF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(251,239,239,0.35);
    box-shadow: 0px 0px 8px 8px rgba(251,239,239,0.35);
    transition: 0.5s;
  }

  #green-tea:hover #green-tea-pic {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #blueberry:hover #blueberry-pic {
    background: #E0C1DF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,193,223,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,193,223,0.35);
    transition: 0.5s;
  }

  #chocolate-mousse:hover #chocolate-mousse-pic {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #strawberry:hover #strawberry-pic {
    background: #E76B6B;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(231,107,107,0.35);
    box-shadow: 0px 0px 8px 8px rgba(231,107,107,0.35);
    transition: 0.5s;
  }

  #melon:hover #melon-pic {
    background: #F2BE85;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,190,133,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,190,133,0.35);
    transition: 0.5s;
  }

  #kyohogrape:hover #kyohogrape-pic {
    background: #E296A2;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(226,150,162,0.35);
    box-shadow: 0px 0px 8px 8px rgba(226,150,162,0.35);
    transition: 0.5s;
  }

  #cookies-and-cream:hover #cookies-and-cream-pic {
    background: #C08A6F;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(192,138,111,0.35);
    box-shadow: 0px 0px 8px 8px rgba(192,138,111,0.35);
    transition: 0.5s;
  }

  #chestnut:hover #chestnut-pic {
    background: #C2A67F;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(194,166,127,0.35);
    box-shadow: 0px 0px 8px 8px rgba(194,166,127,0.35);
    transition: 0.5s;
  }

  #banana-chocolate:hover #banana-chocolate-pic {
    background: #F8EA75;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(248,234,117,0.35);
    box-shadow: 0px 0px 8px 8px rgba(248,234,117,0.35);
    transition: 0.5s;
  }

  #green-tea-latte:hover #green-tea-latte-pic {
    background: #A2BD76;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(162,189,118,0.35);
    box-shadow: 0px 0px 8px 8px rgba(162,189,118,0.35);
    transition: 0.5s;
  }

  #lemon:hover #lemon-pic {
    background: #F4EFB6;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(244,239,182,0.35);
    box-shadow: 0px 0px 8px 8px rgba(244,239,182,0.35);
    transition: 0.5s;
  }

  #macadamia:hover #macadamia-pic {
    background: #F4D4C1;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(244,212,193,0.35);
    box-shadow: 0px 0px 8px 8px rgba(244,212,193,0.35);
    transition: 0.5s;
  }

  #mango-coconut:hover #mango-coconut-pic {
    background: #F2BF73;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,191,115,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,191,115,0.35);
    transition: 0.5s;
  }

  #tiramisu:hover #tiramisu-pic {
    background: #CA7A4B;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(202,122,75,0.35);
    box-shadow: 0px 0px 8px 8px rgba(202,122,75,0.35);
    transition: 0.5s;
  }

  #whitepeach:hover #whitepeach-pic {
    background: #F9F7F4;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(249,247,244,0.35);
    box-shadow: 0px 0px 8px 8px rgba(249,247,244,0.35);
    transition: 0.5s;
  }

  #muscat:hover #muscat-pic {
    background: #DDD9CE;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(221,217,206,0.35);
    box-shadow: 0px 0px 8px 8px rgba(221,217,206,0.35);
    transition: 0.5s;
  }

  #yuzu:hover #yuzu-pic {
    background: #F5E8B9;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(245,232,185,0.35);
    box-shadow: 0px 0px 8px 8px rgba(245,232,185,0.35);
    transition: 0.5s;
  }

  #dango-caramel:hover #dango-caramel-pic {
    background: #DCB467;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(220,180,103,0.35);
    box-shadow: 0px 0px 8px 8px rgba(220,180,103,0.35);
    transition: 0.5s;
  }

  #dango-nori:hover #dango-nori-pic {
    background: #52B749;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(82,183,73,0.35);
    box-shadow: 0px 0px 8px 8px rgba(82,183,73,0.35);
    transition: 0.5s;
  }

  #dango-sesame:hover #dango-sesame-pic {
    background: #AAAAAA;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(170,170,170,0.35);
    box-shadow: 0px 0px 8px 8px rgba(170,170,170,0.35);
    transition: 0.5s;
  }

  #chia-coconut-mango:hover #chia-coconut-mango-pic {
    background: #F2BF73;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,191,115,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,191,115,0.35);
    transition: 0.5s;
  }

  #matcha-mango:hover #matcha-mango-pic {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #almond-mango:hover #almond-mango-pic {
    background: #F9F7F4;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(249,247,244,0.35);
    box-shadow: 0px 0px 8px 8px rgba(249,247,244,0.35);
    transition: 0.5s;
  }

  #chocolate-mango:hover #chocolate-mango-pic {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #mango-premium:hover #mango-premium-pic {
    background: #F2BF88;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,191,136,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,191,136,0.35);
    transition: 0.5s;
  }

  #matcha-premium:hover #matcha-premium-pic {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #hot-green-tea:hover #hot-green-tea-pic {
    background: #99EA84;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    transition: 0.5s;
  }

  #hot-black-tea:hover #hot-black-tea-pic {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #hot-blue-tea:hover #hot-blue-tea-pic {
    background: #B6E6F5;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(182,230,245,0.35);
    box-shadow: 0px 0px 8px 8px rgba(182,230,245,0.35);
    transition: 0.5s;
  }

  #hot-pink-tea:hover #hot-pink-tea-pic {
    background: #EEAAAC;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    transition: 0.5s;
  }

  #blacktea50g:hover #blacktea50g-pic {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #greentea40g:hover #greentea40g-pic {
    background: #E6FCA4;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(230,252,164,0.35);
    box-shadow: 0px 0px 8px 8px rgba(230,252,164,0.35);
    transition: 0.5s;
  }

  #rose20g:hover #rose20g-pic {
    background: #EEAAAC;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    transition: 0.5s;
  }

  #bluetea25g:hover #bluetea25g-pic {
    background: #E0F9FF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    transition: 0.5s;
  }

  #calpis-bottle:hover #calpis-bottle-pic {
    background: #E0F9FF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    transition: 0.5s;
  }


  #hot-drinks-coffee + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #cold-drinks-coffee + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #hot-drinks-cocoa + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #cold-drinks-cocoa + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #hot-drinks-matcha + div div:hover  > .product-image-container {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #cold-drinks-matcha + div div:hover  > .product-image-container {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #hot-drinks-calpis + div div:hover  > .product-image-container {
    background: #E0F9FF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    transition: 0.5s;
  }

  #cold-drinks-calpis + div div:hover  > .product-image-container {
    background: #E0F9FF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    transition: 0.5s;
  }

  #cold-drinks-smoothie + div div:hover  > .product-image-container {
    background: #F5E8B9;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(245,232,185,0.35);
    box-shadow: 0px 0px 8px 8px rgba(245,232,185,0.35);
    transition: 0.5s;
  }

  #packaged-desserts + div div:hover  > .product-image-container {
    background: #D7D7D7;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(215,215,215,0.35);
    box-shadow: 0px 0px 8px 8px rgba(215,215,215,0.35);
    transition: 0.5s;
  }

  #packaged-coffee + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #packaged-cocoa + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #packaged-matcha + div div:hover  > .product-image-container {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  /* #dango + div div:hover  > .product-image-container {
    background: #FFB672;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(255,182,114,0.35);
    box-shadow: 0px 0px 8px 8px rgba(255,182,114,0.35);
    transition: 0.5s;
  } */

  /* #puddings-all + div div:hover  > .product-image-container {
    background: #99EA84;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    transition: 0.5s;
  } */

  /* #hot-drinks-tea + div div:hover  > .product-image-container {
    background: #99EA84;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    transition: 0.5s;
  } */


  /* different colours end here */

  .mobile-banner-delivery + .page-title-text-text {
    margin-top: 17%;
  }

  .gm-style-iw.gm-style-iw-c {
    max-width: 300px!important;
    min-width: 300px!important;
  }

  .footer_logo {
    width: 90px;
  }
  /* The navigation menu links */
  .sidenav a {
    /* padding: 8px 8px 15px 15px; */
    text-decoration: none;
    font-size: 20px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
    font-weight: 300;
    padding: 5% 0% 1% 10%;
  }

  .delivery-cards-container {
    margin-top: 22%;
  }

  .slider-container {
    height: 75vh;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 0;
  }

  .rights {
    color: #777777;
    font-size: 12px;
    padding-left: 15px;
    margin-bottom: 40px;
  }

  .foodculture{
    color: #c3c3c3;
    font-size: 14px;
    font-weight: 400;
    padding-left: 20px;
  }

  .homepageCard img {
    display: none;
  }

  .header-logo {
    width: 115px;
  }

  .header-height {
    z-index: 3000;
    height:76px;
    /* background-color:white; */
  }

  #section10 {
    width: 100%;
    position: absolute;
    filter: opacity(1);
    transition: 0.6s;
    bottom: 0;
  }

  #section10 a {
  padding-top: 60px;
  }
  #section10 a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 1px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
  }
  #section10 a span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sdb10 2s infinite;
    animation: sdb10 2s infinite;
    box-sizing: border-box;
  }
  @-webkit-keyframes sdb10 {
    0% {
      -webkit-transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    80% {
      -webkit-transform: translate(0, 20px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes sdb10 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    80% {
      transform: translate(0, 20px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }





  .appdownload-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 55%;
    grid-column-gap: 10px;
    margin-top: 40px;
  }

  .appdownload-button {
    width: 100%;
  }

  .map-tooltip-container {
    margin-top: 100px;
  }

  .map-relocator-buttons-container {
    text-align: center;
    display: none;
  }

  .map-button-selector-relocator {
    height: 70px;
    background: green;
    color: white;
    font-size: 22px;
  }

  .map-buttons-container {
    justify-items: end;
  }

  .map-tooltip-title {
    color: #ababab;
    font-size: 20px;
    text-align: center;
  }

  .map-button-selector {
    height: 100px;
    background: green;
    color: white;
    font-size: 26px;
    width: 70%;
  }

  .slider-mobile {
    display: none;
  }

  .menu-title-mobile {
    display: none;
  }

  .caret-margin-left {
    margin-left: 10px;
  }

  .mobile-banner-covid {
    display: none;
  }

  .careers-modal-content-form {
    display: block;
    width: 100%;
    padding: 20px 100px 60px 100px;
    /* padding: 20px 20px 30px 20px; */
  }

  .business-modal-content-form {
    display: block;
    width: 100%;
    padding: 20px 100px 60px 100px;
  }

  .business-modal-container {
    max-width: 75%;
    color: white;
  }

  .business-modal-content {
    background: #1d1d1d;
    border-radius: 40px;
  }

  .products-modal-container {
    max-width: 70%;
    color: white;
    margin-left: 30%;
    margin-top: 5%;
  }

  .products-modal-content {
    background: #000000;
    padding-right: 17%;
  }

  .products-modal-close {
    /* padding-right: 20px;
    position: absolute;
    right: 0; */
    height: 70px;
  }

  .modal-form-label {
    color: white;
  }

  .close {
    float: right;
    min-width: 0;
    transition: 0.6s;
    margin: 20px;
    opacity: 1;
  }

  .close-modal-button {
    width: 25px;
  }

  .close:hover {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .close:active {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .nutritional-table-type {
    width: 60%;
  }

  .nutritional-table-100g {
    width: 20%;
  }

  .nutritional-table-portion {
    width: 20%;
  }

  .delivery-scroll {
    top: 37%!important;
  }


  [data-ca3_icon]::before {
      font-weight: normal;
      content: attr(data-ca3_icon);
  }

  .ca3-scroll-down-arrow {
  	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
  	background-size: contain;
  	background-repeat: no-repeat;
  }

  .ca3-scroll-down-link {
    cursor:pointer;
  	height: 60px;
  	width: 80px;
  	margin: 0px 0 0 -40px;
  	line-height: 60px;
  	position: absolute;
  	left: 50%;
  	/* bottom: 0px; */
    top: 23%;
  	color: #FFF;
  	text-align: center;
  	font-size: 70px;
  	z-index: 100;
  	text-decoration: none;
  	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);

  	-webkit-animation: ca3_fade_move_down 2s ease-in-out infinite;
  	-moz-animation:    ca3_fade_move_down 2s ease-in-out infinite;
  	animation:         ca3_fade_move_down 2s ease-in-out infinite;
  }


  /*animated scroll arrow animation*/
  @-webkit-keyframes ca3_fade_move_down {
    0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -webkit-transform:translate(0,20px); opacity: 0; }
  }
  @-moz-keyframes ca3_fade_move_down {
    0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -moz-transform:translate(0,20px); opacity: 0; }
  }
  @keyframes ca3_fade_move_down {
    0%   { transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { transform:translate(0,20px); opacity: 0; }
  }

  .scroll-animation-products {
    top: 15%!important;
  }

  .scroll-animation-itiscard {
    top: 24%;
  }

  .scroll-animation-menu {
    top: 48%;
  }

  .scroll-animation-business {
    top: 35%!important;
  }

  .scroll-animation-careers {
    top: 40%!important;
  }

  .mobile-menu-button-container{
    display: none;
  }

  .full-width-mobile {
    display: none;
  }

  .navbar-bg {
    background: #000000e0;
  }

  .loyalty-bg > .navbar-bg {
    background: #000000fa;
    z-index: 10000;
  }

  .card-title {
    font-size: 30px;
  }

  .card-text {
    font-weight: 100;
    padding-top: 10px;
    color: #969696;
  }

  .modal-main-title {
    font-size: 40px;
    margin-bottom: 50px;
  }

  .modal-header-custom {
    font-size: 30px;
    margin-bottom: 20px;
  }

  .modal-subheader-custom {
    color: #525252;
    font-size: 26px;
    margin-bottom: 50px;
    font-weight: 300;
  }

  .modal-career-heading {
    margin-bottom: 0;
    line-height: 0.9;
  }

  .modal-career-subheading {
    font-size: 26px;
    font-weight: 400;
    margin-top: 60px;
  }

  .modal-button-margin {
    margin-top: 30px;
  }

  .desktop-image-covid {
    width: 120%;
  }

  .mobile-image {
    display: none;
  }

  .business-tile {
    background-image: url(/images/business-tile.png);
    background-position: right center;
    background-size: cover;
  }

  .full-width {
	left: 111%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
  }

  .full-width-menu {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
  margin-bottom: 7%;
  }

  .menu-main {
    color: white;
    margin-top: 25px;
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
  }

  .about-us-cards {
    margin-top: 10%;
  }

  .stores-map-container {
    height: 80vh;
    background: grey;
    border-radius: 40px;
  }

  .covid-cards {
    margin-top: 50px;
  }

  .covid-card {
    border-radius: 40px;
    color: white;
    display: grid;
    margin-bottom: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    grid-template-columns: 60% 40%;
  }

  .covid-list {
    line-height: 2;
    /* padding-left: 0!important; */
  }

  .covid-card-left {
    /* width: 54%; */
    padding: 40px;
  }

  .covid-card-right {
    /* width: 54%; */
    height: 280px;
  }

  .first-image {
    background: url(/images/itis1.jpg);
    background-position: right center;
    background-size: cover;
  }

  .second-image {
    background: url(/images/itis2.jpg);
    background-position: right center;
    background-size: cover;
  }

  .third-image {
    background: url(/images/itis-1226.JPG);
    background-position: right center;
    background-size: cover;
  }

  .about-us-card {
    /* height: 530px; */
    /* background: url(/images/about-us-1.png);
    background-position: right bottom; */
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    border-radius: 40px;
    color: white;
    padding: 40px;
    margin-bottom: 100px;
    position: relative;
  }

  .about-us-card-container {
    /* width: 54%; */
  }

  .about-us-card-image {
    /* position: absolute; */
    right: 0;
    bottom: 0;
    width: 100%;
  }

  .about-us-card-text {
    /* width: 50%; */
    color: #969696;
    font-weight: 300;
  }

  .about-us-header {
    margin-bottom: 30px;
    font-size: 30px;
  }

  .about-us-subtitle {
    font-size: 22px;
    font-weight: 300;
    /* width: 80%; */
    padding-bottom: 30px;
  }

  .about-us-strapline {
    font-size: 22px;
    font-weight: 300;
    width: 80%;
    color: white;;
    padding-top: 30px;
  }

  .final-subtitle {
    padding-bottom: 0;
  }

  .large {
    font-size: 30px;
    padding-top: 0;
  }

  .careers-header {
    margin-bottom: 25px;
    font-size: 30px;
  }

  .careers-subtitle {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 0;
    line-height: 1.4;
  }

  .careers-title {
    color: white;
    margin-bottom: 10px;
    padding-top: 15px;
    font-size: 36px;
  }

  .faq-title {
    color: white;
    margin-bottom: 40px;
    padding-top: 15px;
    font-size: 36px;
  }

  .faq-container {
    margin-bottom: 50px;
  }

  .products-main {
    margin-top: 50px;
    color: white;
    margin-bottom: 2%;
  }

  .products-container {
    margin-top: 70px;
  }

  .product-banner {
    height: 600px;
    background-position: bottom center;
    border-radius: 40px;
    background-size: cover;
    /* border: 1px solid red; */
  }

  .product-mochi-mobile, .product-matcha-mobile, .product-calpis-mobile, .product-yuzu-mobile {
    display: none;
  }

  .product-matcha {
    background-image: url('/images/matcha-products.png');
  }

  .product-mochi {
    background-image: url('/images/mochi-products.png');
  }

  .product-calpis {
    background-image: url('/images/calpis-products.png');
  }

  .product-yuzu {
    background-image: url('/images/yuzu-products.png');
  }

  .product-heading {
    padding-top: 40px;
    padding-left: 40px;
    font-size: 46px;
    color: white;
  }

  .product-subheading {
    padding: 40px;
    width: 50%;
    font-size: 16px;
    color: #8c8c8c;
    font-weight: 200;
  }

  .loyalty-card-text {
    font-size: 16px;
    color: #8c8c8c;
    font-weight: 200;
  }

  .product-caret {
    transform: scaleX(1.5);
    padding-left: 10px;
  }

  .product-information {
    background: #0c0c0c;
    border-radius: 40px;
    /* display: grid; */
    height: 100%;
    transition: 0.6s;
    cursor: pointer;
  }

  .product-information-button {
    color: white;
    align-self: center;
    font-weight: 300;
    font-size: 16px;
    /* background: #232323; */
  }

  .product-characteristic-title {
    font-size: 18px;
    font-weight: 300;
    padding-bottom: 10px;
    color: white;
  }

  .collapse-body-main {
    padding: 20px;
    padding-top: 0;
  }

  .product-characteristic-list {
    font-weight: 300;
    font-size: 16px;
    color: #afafaf;
    padding-top: 15px;
    margin-bottom: 30px;
  }

  /* .collapsed {
    background: #191919cc;
  } */

  /* .product-information-button:hover {
    transform: none;
    background: #232323;
  }

  .product-information-button:active {
    transform: none;
    background: #232323;
  } */

  .active-product-collapse {
    background: #171717;
    border-radius: 40px;
    transition: 0.6s;
  }

  .product-information-card {
    background: #232323;
    border: none;
    color: white;
    border-radius: 20px;
    text-align: left;
  }

  .product-accordion-card {
    /* margin-top: 10px; */
    margin-bottom: 10px;
    /* background: #232323; */
    border: none;
    color: white;
  }

  .product-accordion-card-main {
    display: grid;
    transition: 0.6s;
    border-radius: 40px;
  }

  .product-accordion-card-main-heading {
    width: 100%;
    height: 47px;
    display: grid;
    text-align: center;
    transition: 0.6s
  }

  .product-accordion-card-main:hover {
    background: #171717;
    transition: 0.6s;
  }

  .product-accordion-card-main-content {
    align-self: center;
  }

  .faq-accordion-card {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #1b1b1b;
    border: none;
    color: white;
    min-height: 50px;
    padding: 15px 30px;
    border-radius: 40px;
    transition: 0.6s;
    cursor: pointer;
  }

  .faq-accordion-card:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .faq-accordion-card[aria-expanded=true] {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .faq-accordion-heading {
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
  }

  .product-accordion-heading {
    color: green;
    text-decoration: underline;
    /* background: #232323; */
    cursor: pointer;
    font-size: 18px;
    font-weight: 300;
    padding-bottom: 10px;
  }

  .faq-accordion-card-body {
    padding-top: 15px;
    padding-bottom: 10px;
    font-weight: 300;
  }

  .card-body-internal {
    padding-left: 20px;
    padding-top: 0;
    margin-bottom: 0;
  }

  .product-button-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 100px;
  }

  .mobile-banner {
    display: none;
  }

  .main-content-background {
    /* background-color: rgb(247, 247, 247); */
    padding-left: 12%;
    padding-right: 12%;
  }

  .main-page-banner {
    /* height: 600px; */
    /* background-image: url('/images/home-page.png'); */
    display: grid;
    grid-template-columns: 45% 55%;
    /* margin-bottom: 30px; */
    align-items: center;
    margin-top: 5%;
    margin-bottom: 5%;
  }

  .covid-banner {
    height: 500px;
    /* background-image: url(/images/home-page.png); */
    display: grid;
    grid-template-columns: 45% 55%;
    /* margin-bottom: 30px; */
    align-items: flex-start;
    margin-top: 5%;
    margin-bottom: 1%;
    padding-top: 5%;
  }

  .about-us-banner {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
  }

  .careers-banner {
    height: 550px;
    /* background-image: url('/images/home-page.png'); */
    display: grid;
    grid-template-columns: 45% 55%;
    margin-bottom: 30px;
    align-items: center;
    margin-top: 30px;
  }

  .right-side-image-relative {
    position: relative;
    text-align: center;
  }

  .loyalty-image {
    position: relative;
    top: 30px;
    right: 0px;
    width: 65%;
    align-self: center;
  }

  .loyalty-icon {
    width: 50px;
  }

  .menu-icon {
    width: 60px;
  }

  .larger-icon {
    width: 75px;
  }

  .loyalty-banner {
    height: 500px;
    display: grid;
    grid-template-columns: 55% 45%;
    margin-bottom: 30px;
    align-items: flex-start;
    margin-top: 30px;
  }

  .loyalty-left-side {
    /* width: 45%; */
    color: white;
    margin-top: 15%;
    z-index: 1;
  }

  .business-banner {
    height: 500px;
    /* background-image: url('/images/home-page.png'); */
    display: grid;
    grid-template-columns: 45% 55%;
    margin-bottom: 30px;
    align-items: center;
    margin-top: 30px;
  }

  .left-side-text-banner {
    /* width: 45%; */
    color: white;
    /* align-self: center; */
    z-index: 1;
  }

  .right-side-image {
    /* align-self: center; */
  }

  .banner-image {
    width: 100%;
    align-self: center;
  }

  .right-side-image-careers {
    text-align: center;
  }

  .banner-image-careers {
    width: 64%;
    margin-top: 5%;
  }

  .swiper-container {
    height: 350px;
    border-radius: 40px;
    margin-bottom: 20px;
  }

  .swiper-slide {
    /* background: rgba(0, 0, 0, 0.65); */
    padding: 45px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    display: grid;
    grid-template-columns: 60% 40%;
  }

  .slider-image-right {
    position: absolute;
    width: 350px;
    right: 0;
    bottom: 0;
  }

  .first-slide {
    width: 431px;
    right: 0;
    bottom: -133px;
  }

  .second-slide {
    width: 463px;
    right: 0;
    bottom: -195px;
  }

  .third-slide {
    width: 445px;
    right: 0;
    bottom: -195px;
  }

  .delivery-grid-image {
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 0;
  }

  .delivery-grid-image-mobile {
    display: none;
  }

  .delivery-banner-image {
    position: absolute;
    width: 60%;
    right: 0;
    top: -2%;
  }

  .slider-title {
    color: white;
    padding-bottom: 50px;
    font-size: 32px;
  }

  .slider-subtitle {
    color: #9c694b;
    font-size: 46px;
    padding-bottom: 30px;
  }

  .slider-text {
    color: #ababab;
    font-size: 14px;
  }

  .slider-image {
    width: 100%;
  }

  .slide-1 {
    background-image: url('/images/slider-1.png');
    background-position: right center;
    background-size: cover;
  }

  .slide-2 {
    background-image: url('/images/slider-2.png');
    background-position: right center;
    background-size: cover;
  }

  .slide-3 {
    background-image: url('/images/slider-3.png');
    background-position: right center;
    background-size: cover;
  }

  .image-block {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    height: 100vH;
    /* background-image: url(images/homepageimage.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
    padding:0;
  }

  .homepageCard {
    height: 500px;
    cursor: pointer;
  }

  .deliverypageCard {
    height: 600px;
    cursor: pointer;
  }

  .careersCard {
    padding: 40px;
    height: 300px;
    background: #333333;
    cursor: pointer;
    color: white;
    border-radius: 40px;
  }

  .loyaltyCard {
    padding: 40px;
    min-height: 300px;
    cursor: pointer;
    color: white;
    border-radius: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    text-align: center;
  }

  .loyaltyCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .menuCard {
    height: 100px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .menuCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }


  .cards-container-main {
    margin-bottom: 140px;
    /* margin-top: 50px; */
  }

  .site-fixed-menu {
    position: fixed;
    color: white;
    width: 18%;
    /* left: 15%; */
    padding-top: 30px;
    z-index: 10000;
  }

  .highlighted-accordion {
    background: grey;
  }

  .accordion-extension {
    transition: 0.5s;
  }

  .accordion-extension[aria-expanded=true] {
    color: #fff;
    background-color: #1b1b1b;
    transition: 0.5s;
    border-radius: 20px;
    box-shadow: 1px solid brown;
    -webkit-box-shadow: 0px 0px 0px 17px #1b1b1b;
    box-shadow: 0px 0px 0px 17px #1b1b1b;
    margin-bottom: 30px;
    margin-top: 30px;
    color: green;
  }

  .accordion-extension[aria-expanded=false] {
    background: none;
  }

  .accordion-extension[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-information-button[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-accordion-card-main-heading[aria-expanded=true] .product-accordion-card-main-content .product-information-button .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .site-fixed-menu-accordion {
    padding-top: 30px;
    width: 90%;
  }

  .site-fixed-menu-heading {
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
  }

  .site-fixed-menu-subheadings {
    list-style: none;
    font-weight: 300;
    line-height: 2;
    color: white;
  }

  .site-fixed-menu-caret {
    opacity: 0.7;
    /* padding-right: 20px; */
    margin-right: 10px;
    width: 14px;
    color: white;
    transition: 0.5s;
  }

  .product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40% 60%;
    gap: 0px 0px;
    grid-template-areas:
        "image name"
        "image caption";
  }

  .product-name-detail {

  }

  .product-name-detail-title {
    font-size: 24px;
    font-weight: 400;
    grid-area: name;
    align-self: center;
  }

  .product-name-detail-subtitle {
    font-size: 16px;
    font-weight: 300;
    grid-area: caption;
  }

  .product-allergens-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-allergens-subtitle {

  }

  .product-instructions {
    padding-top: 30px;
  }

  .product-instructions-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-instructions-subtitle {

  }

  .product-nutritional {
    padding-top: 30px;
    /* padding-bottom: 30px; */
  }

  .product-nutritional-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-button-container {
    text-align: center;
  }

  .table {
    color: white;
  }

  td {
    border-bottom:none!important;
    border-top:none!important;
  }

  th {
    border-top:none!important;
    border-bottom:none!important;
  }

  /* // Set border-radius on the top-left and bottom-left of the first table data on the table row */
  .table tr:nth-child(odd) td:first-child {
    border-radius: 40px 0 0 40px;
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(2) {
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(3) {
    border-radius: 0 40px 40px 0;
    background: #151515;
  }

  .product-section-title {
    color: #525252;
    font-size: 26px;
    margin-bottom: 30px;
    font-weight: 300;
  }

  .product-section-subtitle {
    font-size: 22px;
  }

  .product-list {
    color: white;
    padding-left: 25%;
    padding-top: 30px;
    margin-bottom: 15%;
  }

  .product-list-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    margin-bottom: 12%;
  }

  .product {
    height: 260px;
    /* background: #4e4e4e; */
    /* width: 250px; */
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  .product-image-container {
    /* height: 250px; */
    display: grid;
    /* width: 250px; */
    border-radius: 40px;
    margin-bottom: 15px;
  }

  .product-pic {
    width: 100%;
    transition: 0.5s;
    border-radius: 40px;
    align-self: center;
    grid-area: image;
  }

  .product-name {
    text-align: center;
    align-self: end;
  }

  .map-container {
    height: 100vH;
    background: grey;
  }

  .menu-card-header {
    padding-left: 40px;
    margin-bottom: 0;
    line-height: 1.2;
  }

  .loyalty-card-icon {
    text-align: center;
  }

  .loyalty-card-caption {
    padding-top: 30px;
  }

  .businessCard {
    padding: 40px;
    height: 370px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .businessCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .businessCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .careersCard {
    padding: 40px;
    height: 300px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .careersCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .careersCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .businessCard-button {
    position: absolute;
    bottom: 10%;
  }

  .more-margin-bottom {
    margin-bottom: 80px!important;
  }

  .top-half {
    height: 75%;
    border-radius: 40px;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    position: relative;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .top-half:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .swiper-container:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .top-half:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .home-page-grid-1 {
    background: url(/images/home-page-grid-1.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-2 {
    background: url(/images/home-page-grid-2.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-3 {
    background: url(/images/home-page-grid-3.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-4 {
    background: url(/images/home-page-grid-4.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .delivery-page-grid-1 {
    background: url(/images/delivery-page-grid-1.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .delivery-page-grid-2 {
    background: url(/images/delivery-page-grid-2.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .grid-image {
    position: absolute;
    width: 400px;
    bottom: 0;
    right: 0;
  }

  .bottom-half {
    text-align: center;
    padding-top: 30px;
  }

  .left-half {
    padding-left: 45px;
    padding-top: 45px;
    color: white;
    width: 60%;
  }

  .delivery-left-half {
    padding-left: 45px;
    padding-right: 45px;
    padding-top: 45px;
    color: white;
    width: 100%;
  }

  .business-left-half {
    padding-left: 45px;
    padding-top: 45px;
    color: white;
    width: 80%;
  }

  .business-card-title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .business-card-subtitle {
    font-size: 18px;
    color: #969696;
    padding-bottom: 20px;
    font-weight: 300;
  }

  .tile-button {
    border: 2px solid green;
    border-radius: 40px;
    background: none;
    min-width: 190px;
    min-height: 50px;
    color: white;
  }

  .first-tile {
    background-image: url(/images/grid-1.png);
    background-position: right center;
    background-size: cover;
  }

  .second-tile {
    background-image: url(/images/grid-2.png);
    background-position: right center;
    background-size: cover;
  }

  .third-tile {
    background-image: url(/images/grid-3.png);
    background-position: right center;
    background-size: cover;
  }

  .fourth-tile {
    background-image: url(/images/grid-4.png);
    background-position: right center;
    background-size: cover;
  }

  .map-container {
    background-image: url(/images/map-desktop.png);
    height: 350px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 40px;
    /* margin-bottom: 30px; */
    color: white;
    display: grid;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    cursor: pointer;
  }

  .map-container:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .map-container:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .map-content {
    justify-self: center;
    text-align: center;
    align-self: center;
  }

  .image-home-page-banner {
    width:100%;
    object-fit: contain;
  }

  .wide-menu {
    font-weight: 300;
    padding-left: 25px;
    color: white;
  }

  .centered-links {
    width: 100%;
    justify-content: center;
  }

  .wide-menu-item {

  }

  .footer-social {
    width:30px;
  }

  .footer-social:hover {
    filter: invert(14%) sepia(32%) saturate(1868%) hue-rotate(83deg) brightness(104%) contrast(96%);
  }

  .footer-white-link {
    color: white;
  }

  .wide-menu-link {
    padding-left: 17px!important;
    padding-right: 17px!important;
  }

  .wide-menu-link:hover {
    color: green!important;
  }

  .wide-menu-link:active {
    color: green!important;
    /* border-bottom: 0.5px green solid; */
    padding-bottom: 0;
  }

  .active {
    color: green!important;
    /* border-bottom: 0.5px green solid; */
    padding-bottom: 0;
  }

  .on-top {
    z-index: 10000;
    max-width:100%;
    background-color:black;
  }

  .title-container {
    padding-left: 40px;
    padding-bottom: 20px;
  }

  .business-bg {
    background: url(/images/color-background.png);
    background-position: top center;
    background-size: cover;
  }

  .loyalty-bg {
    background: url(/images/loyalty-background.png);
    background-position: top center;
    background-size: cover;
  }

  .modal-backdrop.show {
    opacity: 0.5;
  }

  .covid-bg {
    background: url(/images/covid-background.png);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .image-block-small {
    /* border-left: 60px solid transparent;
    border-right: 60px solid transparent; */
    padding-left: 60px;
    padding-right: 60px;
  }

  .delivery-image {
    background-image: url(images/deliverypage.png);
  }

  .products-image {
    background-image: url(images/riviera.png);
  }

  .aboutus-image {
    background-image: url(images/about-1.png);
  }

  .business-image {
    background-image: url(images/business-title.png);
  }

  .careers-image {
    background-image: url(images/careers-bg.png);
  }

  .careers-job-image {
    background-image: url(images/black-banner-logo.png);
  }

  .responsibility {
    background-image: url(images/responsibility.png);
  }

  .covid {
    background-image: url(images/black-banner-logo.png);
  }

  .loyalty-image {
    /* background-image: url(images/loyaltypic.png); */
  }

  .bg-itisshop {
    background-image: url(images/itisshop-fullscreen.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
  }

  .itiscard {
    height: 250px;
    float: left;
    margin: 10px;
  }

  .banner-container {
    /* position: absolute; */
    bottom: 50px;
    left: 0px;
    /* color: white; */
    padding-left: 110px;
    padding-right: 60px;
  }

  .img-container {
    width: 100%;
  }

  .button-banner {
    margin-top: 16px!important;
  }

  .page-title-text-title {
    font-weight: 300;
    font-size: 24px;
    line-height: 1.2;
    padding-top: 30px;
  }

  .page-title-text-text {
    font-weight: 300;
    font-size: 40px;
    line-height: 1.2;
    padding-top: 15px;
  }

  .green-text {
    color:green;
  }

  .page-text {
    font-weight: 300;
    font-size: 16px;
    padding-top: 30px;
    margin-bottom: 0;
  }



  .more-padding-top {
    padding-top: 60px;
  }

  .more-margin-top {
    margin-top: 60px;
  }

  .page-faq-title {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 30px;
  }

  .page-faq-subtitle {
    font-weight: 700;
    font-size: 16px;
  }

  .recipes-subtitle {
    font-weight: 300;
    font-size: 16px;
  }

  .benefits-subtitle {
    font-weight: 700;
    font-size: 16px;
    margin-top: 30px;
  }

  .page-faq-text {
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 35px;
  }

  .qualities-points {
    font-weight: 300;
    font-size: 16px;
  }

  .right-column-container {
    padding-left: 45px;
    padding-right: 45px;
  }

  p {
    font-family: inherit;
  }

  h1 {
    font-family: inherit;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 42px;
    align-items: center;
  }

  h2 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 35px;
    align-items: center;
  }

  h3 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 27px;
    line-height: 32px;
    margin-bottom:0;
  }

  h4 {
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    font-size: 25px;
    line-height: 29px;
    align-items: center;
  }

  .back-button-div {
    width: 50px;
    height: 50px;
    background: #92929273;
    position: absolute;
    bottom: 85px;
    left: 35px;
    border-radius: 50px;
  }

  .back-button-div:hover {
    background: green!important;
  }

  .back-button-div:active {
    background: red!important;
  }

  .back-button {
    position: absolute;
    bottom: -4px;
    left: -1px;
    color: white;
  }

  .cards-container {
    display: grid;
    /* grid-gap: 15px; */
    grid-column-gap: 15px;
    grid-template-columns: 1fr 1fr;
  }


  .cards-container-loyalty {
    display: grid;
    grid-column-gap: 40px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 20px;
  }

  .business-cards-container {
    display: grid;
    grid-column-gap: 50px;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
  }

  .card-column {
    padding: 0;
    margin-bottom: 20px;
  }

  .loyalty-pic {
    width: 55.125px;
    margin-left: 50px;
    margin-top: 15px;
  }

  .nopadding-left-right {
    padding-left:0;
    padding-right:0;
  }

  .language-toggler {
    border: 1px solid green;
    border-radius: 40px;
    padding: 3px 25px;
  }

  button {
    min-width: 300px;
    min-height: 50px;
    border-radius: 40px;
    border: none;
    /* margin-top: 40px; */
    transform: scale(1);
    transition: 0.6s;
  }

  .locator-button {
    width: 180px;
    min-width: 0;
    margin-left: 15px;
  }

  button:focus {
    outline: none;
  }

  button:hover {
    transform: scale(1.05);
    transition: 0.6s;
  }

  button:hover .button-span {
    transform: scale(0.95);
    transition: 0.6s;
  }

  /* .tile-button {
    min-width: 180px;
    margin-top: 20px;
  } */

  .mainbanner-button {
    margin-top: 10%;
  }

  .loyalty-banner-button {
    margin-top: 50px;
  }

  .loyalty-header {
    color: white;
    padding-bottom: 30px;
    padding-top: 50px;
    font-size: 34px;
  }

  .loyalty-manual-container {
    height: 500px;
    background: #252525;
    border-radius: 40px;
  }

  .green-button {
    background: #00bd00;
  }

  .green-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .inverse-button {
    background: #000000;
  }

  .inverse-button:hover {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .business-button:hover {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .inverse-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .swiper-pagination {
    text-align: left!important;
    padding-left: 5%;
    padding-bottom: 2%;
  }

  .swiper-pagination-bullet {
    background: white!important;
    opacity: 0.8!important;
    width: 10px!important;
    height: 10px!important;
  }


  .swiper-pagination-bullet-active {
    background: #35bd00!important;
  }


}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  /* different colours bg and shadow depending on item */

  #green-tea-tiramisu:hover #green-tea-tiramisu-pic {
    background: #E6FCA4;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(230,252,164,0.35);
    box-shadow: 0px 0px 8px 8px rgba(230,252,164,0.35);
    transition: 0.5s;
  }

  #caramel-pudding:hover #caramel-pudding-pic {
    background: #DCB467;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(220,180,103,0.35);
    box-shadow: 0px 0px 8px 8px rgba(220,180,103,0.35);
    transition: 0.5s;
  }

  #raspberry:hover #raspberry-pic {
    background: #EEAAAC;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    transition: 0.5s;
  }

  #double-mango:hover #double-mango-pic {
    background: #F2BF88;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,191,136,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,191,136,0.35);
    transition: 0.5s;
  }

  #sakura:hover #sakura-pic {
    background: #FBEFEF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(251,239,239,0.35);
    box-shadow: 0px 0px 8px 8px rgba(251,239,239,0.35);
    transition: 0.5s;
  }

  #green-tea:hover #green-tea-pic {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #blueberry:hover #blueberry-pic {
    background: #E0C1DF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,193,223,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,193,223,0.35);
    transition: 0.5s;
  }

  #chocolate-mousse:hover #chocolate-mousse-pic {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #strawberry:hover #strawberry-pic {
    background: #E76B6B;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(231,107,107,0.35);
    box-shadow: 0px 0px 8px 8px rgba(231,107,107,0.35);
    transition: 0.5s;
  }

  #melon:hover #melon-pic {
    background: #F2BE85;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,190,133,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,190,133,0.35);
    transition: 0.5s;
  }

  #kyohogrape:hover #kyohogrape-pic {
    background: #E296A2;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(226,150,162,0.35);
    box-shadow: 0px 0px 8px 8px rgba(226,150,162,0.35);
    transition: 0.5s;
  }

  #cookies-and-cream:hover #cookies-and-cream-pic {
    background: #C08A6F;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(192,138,111,0.35);
    box-shadow: 0px 0px 8px 8px rgba(192,138,111,0.35);
    transition: 0.5s;
  }

  #chestnut:hover #chestnut-pic {
    background: #C2A67F;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(194,166,127,0.35);
    box-shadow: 0px 0px 8px 8px rgba(194,166,127,0.35);
    transition: 0.5s;
  }

  #banana-chocolate:hover #banana-chocolate-pic {
    background: #F8EA75;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(248,234,117,0.35);
    box-shadow: 0px 0px 8px 8px rgba(248,234,117,0.35);
    transition: 0.5s;
  }

  #green-tea-latte:hover #green-tea-latte-pic {
    background: #A2BD76;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(162,189,118,0.35);
    box-shadow: 0px 0px 8px 8px rgba(162,189,118,0.35);
    transition: 0.5s;
  }

  #lemon:hover #lemon-pic {
    background: #F4EFB6;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(244,239,182,0.35);
    box-shadow: 0px 0px 8px 8px rgba(244,239,182,0.35);
    transition: 0.5s;
  }

  #macadamia:hover #macadamia-pic {
    background: #F4D4C1;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(244,212,193,0.35);
    box-shadow: 0px 0px 8px 8px rgba(244,212,193,0.35);
    transition: 0.5s;
  }

  #mango-coconut:hover #mango-coconut-pic {
    background: #F2BF73;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,191,115,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,191,115,0.35);
    transition: 0.5s;
  }

  #tiramisu:hover #tiramisu-pic {
    background: #CA7A4B;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(202,122,75,0.35);
    box-shadow: 0px 0px 8px 8px rgba(202,122,75,0.35);
    transition: 0.5s;
  }

  #whitepeach:hover #whitepeach-pic {
    background: #F9F7F4;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(249,247,244,0.35);
    box-shadow: 0px 0px 8px 8px rgba(249,247,244,0.35);
    transition: 0.5s;
  }

  #muscat:hover #muscat-pic {
    background: #DDD9CE;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(221,217,206,0.35);
    box-shadow: 0px 0px 8px 8px rgba(221,217,206,0.35);
    transition: 0.5s;
  }

  #yuzu:hover #yuzu-pic {
    background: #F5E8B9;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(245,232,185,0.35);
    box-shadow: 0px 0px 8px 8px rgba(245,232,185,0.35);
    transition: 0.5s;
  }

  #dango-caramel:hover #dango-caramel-pic {
    background: #DCB467;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(220,180,103,0.35);
    box-shadow: 0px 0px 8px 8px rgba(220,180,103,0.35);
    transition: 0.5s;
  }

  #dango-nori:hover #dango-nori-pic {
    background: #52B749;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(82,183,73,0.35);
    box-shadow: 0px 0px 8px 8px rgba(82,183,73,0.35);
    transition: 0.5s;
  }

  #dango-sesame:hover #dango-sesame-pic {
    background: #AAAAAA;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(170,170,170,0.35);
    box-shadow: 0px 0px 8px 8px rgba(170,170,170,0.35);
    transition: 0.5s;
  }

  #chia-coconut-mango:hover #chia-coconut-mango-pic {
    background: #F2BF73;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,191,115,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,191,115,0.35);
    transition: 0.5s;
  }

  #matcha-mango:hover #matcha-mango-pic {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #almond-mango:hover #almond-mango-pic {
    background: #F9F7F4;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(249,247,244,0.35);
    box-shadow: 0px 0px 8px 8px rgba(249,247,244,0.35);
    transition: 0.5s;
  }

  #chocolate-mango:hover #chocolate-mango-pic {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #mango-premium:hover #mango-premium-pic {
    background: #F2BF88;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(242,191,136,0.35);
    box-shadow: 0px 0px 8px 8px rgba(242,191,136,0.35);
    transition: 0.5s;
  }

  #matcha-premium:hover #matcha-premium-pic {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #hot-green-tea:hover #hot-green-tea-pic {
    background: #99EA84;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    transition: 0.5s;
  }

  #hot-black-tea:hover #hot-black-tea-pic {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #hot-blue-tea:hover #hot-blue-tea-pic {
    background: #B6E6F5;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(182,230,245,0.35);
    box-shadow: 0px 0px 8px 8px rgba(182,230,245,0.35);
    transition: 0.5s;
  }

  #hot-pink-tea:hover #hot-pink-tea-pic {
    background: #EEAAAC;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    transition: 0.5s;
  }

  #blacktea50g:hover #blacktea50g-pic {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #greentea40g:hover #greentea40g-pic {
    background: #E6FCA4;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(230,252,164,0.35);
    box-shadow: 0px 0px 8px 8px rgba(230,252,164,0.35);
    transition: 0.5s;
  }

  #rose20g:hover #rose20g-pic {
    background: #EEAAAC;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    box-shadow: 0px 0px 8px 8px rgba(238,170,172,0.35);
    transition: 0.5s;
  }

  #bluetea25g:hover #bluetea25g-pic {
    background: #E0F9FF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    transition: 0.5s;
  }

  #calpis-bottle:hover #calpis-bottle-pic {
    background: #E0F9FF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    transition: 0.5s;
  }


  #hot-drinks-coffee + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #cold-drinks-coffee + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #hot-drinks-cocoa + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #cold-drinks-cocoa + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #hot-drinks-matcha + div div:hover  > .product-image-container {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #cold-drinks-matcha + div div:hover  > .product-image-container {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  #hot-drinks-calpis + div div:hover  > .product-image-container {
    background: #E0F9FF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    transition: 0.5s;
  }

  #cold-drinks-calpis + div div:hover  > .product-image-container {
    background: #E0F9FF;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    box-shadow: 0px 0px 8px 8px rgba(224,249,255,0.35);
    transition: 0.5s;
  }

  #cold-drinks-smoothie + div div:hover  > .product-image-container {
    background: #F5E8B9;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(245,232,185,0.35);
    box-shadow: 0px 0px 8px 8px rgba(245,232,185,0.35);
    transition: 0.5s;
  }

  #packaged-desserts + div div:hover  > .product-image-container {
    background: #D7D7D7;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(215,215,215,0.35);
    box-shadow: 0px 0px 8px 8px rgba(215,215,215,0.35);
    transition: 0.5s;
  }

  #packaged-coffee + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #packaged-cocoa + div div:hover  > .product-image-container {
    background: #8C553C;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    box-shadow: 0px 0px 8px 8px rgba(140,85,60,0.35);
    transition: 0.5s;
  }

  #packaged-matcha + div div:hover  > .product-image-container {
    background: #9FC166;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    box-shadow: 0px 0px 8px 8px rgba(159,193,102,0.35);
    transition: 0.5s;
  }

  /* #dango + div div:hover  > .product-image-container {
    background: #FFB672;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(255,182,114,0.35);
    box-shadow: 0px 0px 8px 8px rgba(255,182,114,0.35);
    transition: 0.5s;
  } */

  /* #puddings-all + div div:hover  > .product-image-container {
    background: #99EA84;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    transition: 0.5s;
  } */

  /* #hot-drinks-tea + div div:hover  > .product-image-container {
    background: #99EA84;
    -webkit-box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    box-shadow: 0px 0px 8px 8px rgba(153,234,132,0.35);
    transition: 0.5s;
  } */


  /* different colours end here */

  .products-modal-container {
    max-width: 70%;
    color: white;
    margin-left: 30%;
    margin-top: 5%;
  }

  .products-modal-content {
    background: #000000;
    padding-right: 8%;
  }

  .products-modal-close {
    /* padding-right: 20px;
    position: absolute;
    right: 0; */
    height: 70px;
  }

  .gm-style-iw.gm-style-iw-c {
    max-width: 300px!important;
    min-width: 300px!important;
  }

  .footer_logo {
    width: 90px;
  }
  /* The navigation menu links */
  .sidenav a {
    /* padding: 8px 8px 15px 15px; */
    text-decoration: none;
    font-size: 20px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
    font-weight: 300;
    padding: 5% 0% 1% 10%;
  }

  .delivery-cards-container {
    margin-top: 8%;
  }



  .rights {
    color: #777777;
    font-size: 12px;
    padding-left: 15px;
    margin-bottom: 40px;
  }

  .foodculture{
    color: #c3c3c3;
    font-size: 14px;
    font-weight: 400;
    padding-left: 20px;
  }

  .homepageCard img {
    display: none;
  }

  .header-logo {
    width: 115px;
  }

  .header-height {
    z-index: 3000;
    height:76px;
    /* background-color:white; */
  }




  .appdownload-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 55%;
    grid-column-gap: 10px;
    margin-top: 40px;
  }

  .appdownload-button {
    width: 100%;
  }

  .map-tooltip-container {
    margin-top: 100px;
  }

  .map-relocator-buttons-container {
    text-align: center;
    display: none;
  }

  .map-button-selector-relocator {
    height: 70px;
    background: green;
    color: white;
    font-size: 22px;
  }

  .map-buttons-container {
    justify-items: end;
  }

  .map-tooltip-title {
    color: #ababab;
    font-size: 20px;
    text-align: center;
  }

  .map-button-selector {
    height: 100px;
    background: green;
    color: white;
    font-size: 26px;
    width: 70%;
  }

  .slider-mobile {
    display: none;
  }

  .menu-title-mobile {
    display: none;
  }

  .caret-margin-left {
    margin-left: 10px;
  }

  .mobile-banner-covid {
    display: none;
  }

  .careers-modal-content-form {
    display: block;
    width: 100%;
    padding: 20px 100px 60px 100px;
    /* padding: 20px 20px 30px 20px; */
  }

  .business-modal-content-form {
    display: block;
    width: 100%;
    padding: 20px 100px 60px 100px;
  }

  .business-modal-container {
    max-width: 85%;
    color: white;
  }

  .business-modal-content {
    background: #1d1d1d;
    border-radius: 40px;
  }

  .modal-form-label {
    color: white;
  }

  .close {
    float: right;
    min-width: 0;
    transition: 0.6s;
    margin: 20px;
    opacity: 1;
  }

  .close-modal-button {
    width: 25px;
  }

  .close:hover {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .close:active {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .nutritional-table-type {
    width: 60%;
  }

  .nutritional-table-100g {
    width: 20%;
  }

  .nutritional-table-portion {
    width: 20%;
  }

  .delivery-scroll {
    top: 37%!important;
  }


  [data-ca3_icon]::before {
      font-weight: normal;
      content: attr(data-ca3_icon);
  }

  .ca3-scroll-down-arrow {
  	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
  	background-size: contain;
  	background-repeat: no-repeat;
  }

  .ca3-scroll-down-link {
    cursor:pointer;
  	height: 60px;
  	width: 80px;
  	margin: 0px 0 0 -40px;
  	line-height: 60px;
  	position: absolute;
  	left: 50%;
  	/* bottom: 0px; */
    top: 23%;
  	color: #FFF;
  	text-align: center;
  	font-size: 70px;
  	z-index: 100;
  	text-decoration: none;
  	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);

  	-webkit-animation: ca3_fade_move_down 2s ease-in-out infinite;
  	-moz-animation:    ca3_fade_move_down 2s ease-in-out infinite;
  	animation:         ca3_fade_move_down 2s ease-in-out infinite;
  }


  /*animated scroll arrow animation*/
  @-webkit-keyframes ca3_fade_move_down {
    0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -webkit-transform:translate(0,20px); opacity: 0; }
  }
  @-moz-keyframes ca3_fade_move_down {
    0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -moz-transform:translate(0,20px); opacity: 0; }
  }
  @keyframes ca3_fade_move_down {
    0%   { transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { transform:translate(0,20px); opacity: 0; }
  }

  .scroll-animation-products {
    top: 15%!important;
  }

  .scroll-animation-itiscard {
    top: 24%;
  }

  .scroll-animation-menu {
    top: 48%;
  }

  .scroll-animation-business {
    top: 35%!important;
  }

  .scroll-animation-careers {
    top: 40%!important;
  }

  .mobile-menu-button-container{
    display: none;
  }

  .full-width-mobile {
    display: none;
  }

  .navbar-bg {
    background: #000000e0;
  }

  .card-title {
    font-size: 30px;
  }

  .card-text {
    font-weight: 100;
    padding-top: 10px;
    color: #969696;
  }

  .modal-main-title {
    font-size: 40px;
    margin-bottom: 50px;
  }

  .modal-header-custom {
    font-size: 30px;
    margin-bottom: 20px;
  }

  .modal-subheader-custom {
    color: #525252;
    font-size: 26px;
    margin-bottom: 50px;
    font-weight: 300;
  }

  .modal-career-heading {
    margin-bottom: 0;
    line-height: 0.9;
  }

  .modal-career-subheading {
    font-size: 26px;
    font-weight: 400;
    margin-top: 60px;
  }

  .modal-button-margin {
    margin-top: 30px;
  }

  .desktop-image-covid {
    width: 120%;
  }

  .mobile-image {
    display: none;
  }

  .business-tile {
    background-image: url(/images/business-tile.png);
    background-position: right center;
    background-size: cover;
  }

  .full-width {
	left: 111%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
  }

  .full-width-menu {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
  margin-bottom: 7%;
  }

  .menu-main {
    color: white;
    margin-top: 50px;
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
  }

  .about-us-cards {
    margin-top: 10%;
  }

  .stores-map-container {
    height: 80vh;
    background: grey;
    border-radius: 40px;
  }

  .covid-cards {
    margin-top: 50px;
  }

  .covid-card {
    border-radius: 40px;
    color: white;
    display: grid;
    margin-bottom: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    grid-template-columns: 60% 40%;
  }

  .covid-list {
    line-height: 2;
    /* padding-left: 0!important; */
  }

  .covid-card-left {
    /* width: 54%; */
    padding: 40px;
  }

  .covid-card-right {
    /* width: 54%; */
    height: 280px;
  }

  .first-image {
    background: url(/images/itis1.jpg);
    background-position: right center;
    background-size: cover;
  }

  .second-image {
    background: url(/images/itis2.jpg);
    background-position: right center;
    background-size: cover;
  }

  .third-image {
    background: url(/images/itis-1226.JPG);
    background-position: right center;
    background-size: cover;
  }

  .about-us-card {
    /* height: 530px; */
    /* background: url(/images/about-us-1.png);
    background-position: right bottom; */
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    border-radius: 40px;
    color: white;
    padding: 40px;
    margin-bottom: 100px;
    position: relative;
  }

  .about-us-card-container {
    /* width: 54%; */
  }

  .about-us-card-image {
    /* position: absolute; */
    right: 0;
    bottom: 0;
    width: 100%;
  }

  .about-us-card-text {
    /* width: 50%; */
    color: #969696;
    font-weight: 300;
  }

  .about-us-header {
    margin-bottom: 30px;
    font-size: 30px;
  }

  .about-us-subtitle {
    font-size: 22px;
    font-weight: 300;
    /* width: 80%; */
    padding-bottom: 30px;
  }

  .about-us-strapline {
    font-size: 22px;
    font-weight: 300;
    width: 80%;
    color: white;;
    padding-top: 30px;
  }

  .final-subtitle {
    padding-bottom: 0;
  }

  .large {
    font-size: 30px;
    padding-top: 0;
  }

  .careers-header {
    margin-bottom: 25px;
    font-size: 30px;
  }

  .careers-subtitle {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 0;
    line-height: 1.4;
  }

  .careers-title {
    color: white;
    margin-bottom: 10px;
    padding-top: 15px;
    font-size: 36px;
  }

  .faq-title {
    color: white;
    margin-bottom: 40px;
    padding-top: 15px;
    font-size: 36px;
  }

  .faq-container {
    margin-bottom: 50px;
  }

  .products-main {
    margin-top: 50px;
    color: white;
    margin-bottom: 2%;
  }

  .products-container {
    margin-top: 70px;
  }

  .product-banner {
    height: 600px;
    background-position: bottom center;
    border-radius: 40px;
    background-size: cover;
    /* border: 1px solid red; */
  }

  .product-mochi-mobile, .product-matcha-mobile, .product-calpis-mobile, .product-yuzu-mobile {
    display: none;
  }

  .product-matcha {
    background-image: url('/images/matcha-products.png');
  }

  .product-mochi {
    background-image: url('/images/mochi-products.png');
  }

  .product-calpis {
    background-image: url('/images/calpis-products.png');
  }

  .product-yuzu {
    background-image: url('/images/yuzu-products.png');
  }

  .product-heading {
    padding-top: 40px;
    padding-left: 40px;
    font-size: 46px;
    color: white;
  }

  .product-subheading {
    padding: 40px;
    width: 50%;
    font-size: 16px;
    color: #8c8c8c;
    font-weight: 200;
  }

  .loyalty-card-text {
    font-size: 16px;
    color: #8c8c8c;
    font-weight: 200;
  }

  .product-caret {
    transform: scaleX(1.5);
    padding-left: 10px;
  }

  .product-information {
    background: #0c0c0c;
    border-radius: 40px;
    /* display: grid; */
    height: 100%;
    transition: 0.6s;
    cursor: pointer;
  }

  .product-information-button {
    color: white;
    align-self: center;
    font-weight: 300;
    font-size: 16px;
    /* background: #232323; */
  }

  .product-characteristic-title {
    font-size: 18px;
    font-weight: 300;
    padding-bottom: 10px;
    color: white;
  }

  .collapse-body-main {
    padding: 20px;
    padding-top: 0;
  }

  .product-characteristic-list {
    font-weight: 300;
    font-size: 16px;
    color: #afafaf;
    padding-top: 15px;
    margin-bottom: 30px;
  }

  /* .collapsed {
    background: #191919cc;
  } */

  /* .product-information-button:hover {
    transform: none;
    background: #232323;
  }

  .product-information-button:active {
    transform: none;
    background: #232323;
  } */

  .active-product-collapse {
    background: #171717;
    border-radius: 40px;
    transition: 0.6s;
  }

  .product-information-card {
    background: #232323;
    border: none;
    color: white;
    border-radius: 20px;
    text-align: left;
  }

  .product-accordion-card {
    /* margin-top: 10px; */
    margin-bottom: 10px;
    /* background: #232323; */
    border: none;
    color: white;
  }

  .product-accordion-card-main {
    display: grid;
    transition: 0.6s;
    border-radius: 40px;
  }

  .product-accordion-card-main-heading {
    width: 100%;
    height: 47px;
    display: grid;
    text-align: center;
    transition: 0.6s
  }

  .product-accordion-card-main:hover {
    background: #171717;
    transition: 0.6s;
  }

  .product-accordion-card-main-content {
    align-self: center;
  }

  .faq-accordion-card {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #1b1b1b;
    border: none;
    color: white;
    min-height: 50px;
    padding: 15px 30px;
    border-radius: 40px;
    transition: 0.6s;
    cursor: pointer;
  }

  .faq-accordion-card:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .faq-accordion-card[aria-expanded=true] {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .faq-accordion-heading {
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
  }

  .product-accordion-heading {
    color: green;
    text-decoration: underline;
    /* background: #232323; */
    cursor: pointer;
    font-size: 18px;
    font-weight: 300;
    padding-bottom: 10px;
  }

  .faq-accordion-card-body {
    padding-top: 15px;
    padding-bottom: 10px;
    font-weight: 300;
  }

  .card-body-internal {
    padding-left: 20px;
    padding-top: 0;
    margin-bottom: 0;
  }

  .product-button-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 100px;
  }

  .mobile-banner {
    display: none;
  }

  .main-content-background {
    /* background-color: rgb(247, 247, 247); */
    padding-left: 6%;
    padding-right: 6%;
  }

  .main-page-banner {
    /* height: 600px; */
    /* background-image: url('/images/home-page.png'); */
    display: grid;
    grid-template-columns: 45% 55%;
    /* margin-bottom: 30px; */
    align-items: center;
    margin-top: 5%;
    margin-bottom: 5%;
  }

  .covid-banner {
    height: 500px;
    /* background-image: url(/images/home-page.png); */
    display: grid;
    grid-template-columns: 45% 55%;
    /* margin-bottom: 30px; */
    align-items: flex-start;
    /* margin-top: 5%; */
    margin-bottom: 1%;
    padding-top: 5%;
  }

  .about-us-banner {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
  }

  .careers-banner {
    height: 550px;
    /* background-image: url('/images/home-page.png'); */
    display: grid;
    grid-template-columns: 45% 55%;
    margin-bottom: 30px;
    align-items: center;
    margin-top: 30px;
  }

  .right-side-image-relative {
    position: relative;
    text-align: center;
  }

  .loyalty-image {
    position: relative;
    top: 20px;
    right: 0px;
    width: 65%;
    align-self: center;
  }

  .loyalty-icon {
    width: 50px;
  }

  .menu-icon {
    width: 60px;
  }

  .larger-icon {
    width: 75px;
  }

  .loyalty-banner {
    height: 500px;
    display: grid;
    grid-template-columns: 55% 45%;
    /* margin-bottom: 30px; */
    align-items: flex-start;
    margin-top: 30px;
  }

  .loyalty-left-side {
    /* width: 45%; */
    color: white;
    margin-top: 15%;
    z-index: 1;
  }

  .business-banner {
    height: 500px;
    /* background-image: url('/images/home-page.png'); */
    display: grid;
    grid-template-columns: 45% 55%;
    margin-bottom: 30px;
    align-items: center;
    margin-top: 30px;
  }

  .left-side-text-banner {
    /* width: 45%; */
    color: white;
    /* align-self: center; */
    z-index: 1;
  }

  .right-side-image {
    /* align-self: center; */
  }

  .banner-image {
    width: 100%;
    align-self: center;
  }

  .right-side-image-careers {
    text-align: center;
  }

  .banner-image-careers {
    width: 64%;
  }

  .swiper-container {
    height: 350px;
    border-radius: 40px;
    margin-bottom: 20px;
  }

  .swiper-slide {
    /* background: rgba(0, 0, 0, 0.65); */
    padding: 45px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    display: grid;
    grid-template-columns: 60% 40%;
  }

  .slider-image-right {
    position: absolute;
    width: 350px;
    right: 0;
    bottom: 0;
  }

  .first-slide {
    width: 370px;
    right: 0;
    bottom: -74px;
  }

  .second-slide {
    width: 393px;
    right: 0;
    bottom: -145px;
  }

  .third-slide {
    width: 405px;
    right: 0;
    bottom: -165px;
  }

  .delivery-grid-image {
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 0;
  }

  .delivery-grid-image-mobile {
    display: none;
  }

  .delivery-banner-image {
    position: absolute;
    width: 60%;
    right: 0;
    top: 0%;
  }

  .slider-title {
    color: white;
    padding-bottom: 50px;
    font-size: 30px;
  }

  .slider-subtitle {
    color: #9c694b;
    font-size: 42px;
    padding-bottom: 30px;
  }

  .slider-text {
    color: #ababab;
    font-size: 14px;
  }

  .slider-image {
    width: 100%;
  }

  .slide-1 {
    background-image: url('/images/slider-1.png');
    background-position: right center;
    background-size: cover;
  }

  .slide-2 {
    background-image: url('/images/slider-2.png');
    background-position: right center;
    background-size: cover;
  }

  .slide-3 {
    background-image: url('/images/slider-3.png');
    background-position: right center;
    background-size: cover;
  }

  .image-block {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    height: 100vH;
    /* background-image: url(images/homepageimage.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
    padding:0;
  }

  .homepageCard {
    height: 500px;
    cursor: pointer;
  }

  .deliverypageCard {
    height: 600px;
    cursor: pointer;
  }

  .careersCard {
    padding: 40px;
    height: 300px;
    background: #333333;
    cursor: pointer;
    color: white;
    border-radius: 40px;
  }

  .loyaltyCard {
    padding: 40px;
    min-height: 300px;
    cursor: pointer;
    color: white;
    border-radius: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    text-align: center;
  }

  .loyaltyCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .menuCard {
    height: 100px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .menuCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }


  .cards-container-main {
    margin-bottom: 140px;
    /* margin-top: 50px; */
  }

  .site-fixed-menu {
    position: fixed;
    color: white;
    width: 18%;
    /* left: 15%; */
    padding-top: 30px;
  }

  .highlighted-accordion {
    background: grey;
  }

  .accordion-extension {
    transition: 0.5s;
  }

  .accordion-extension[aria-expanded=true] {
    color: #fff;
    background-color: #1b1b1b;
    transition: 0.5s;
    border-radius: 20px;
    box-shadow: 1px solid brown;
    -webkit-box-shadow: 0px 0px 0px 17px #1b1b1b;
    box-shadow: 0px 0px 0px 17px #1b1b1b;
    margin-bottom: 30px;
    margin-top: 30px;
    color: green;
  }

  .accordion-extension[aria-expanded=false] {
    background: none;
  }

  .accordion-extension[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-information-button[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-accordion-card-main-heading[aria-expanded=true] .product-accordion-card-main-content .product-information-button .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .site-fixed-menu-accordion {
    padding-top: 30px;
    width: 90%;
  }

  .site-fixed-menu-heading {
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
  }

  .site-fixed-menu-subheadings {
    list-style: none;
    font-weight: 300;
    line-height: 2;
    color: white;
  }

  .site-fixed-menu-caret {
    opacity: 0.7;
    /* padding-right: 20px; */
    margin-right: 10px;
    width: 14px;
    color: white;
    transition: 0.5s;
  }

  .product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40% 60%;
    gap: 0px 0px;
    grid-template-areas:
        "image name"
        "image caption";
  }

  .product-name-detail {

  }

  .product-name-detail-title {
    font-size: 24px;
    font-weight: 400;
    grid-area: name;
    align-self: center;
  }

  .product-name-detail-subtitle {
    font-size: 16px;
    font-weight: 300;
    grid-area: caption;
  }

  .product-allergens-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-allergens-subtitle {

  }

  .product-instructions {
    padding-top: 30px;
  }

  .product-instructions-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-instructions-subtitle {

  }

  .product-nutritional {
    padding-top: 30px;
    /* padding-bottom: 30px; */
  }

  .product-nutritional-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-button-container {
    text-align: center;
  }

  .table {
    color: white;
  }

  td {
    border-bottom:none!important;
    border-top:none!important;
  }

  th {
    border-top:none!important;
    border-bottom:none!important;
  }

  /* // Set border-radius on the top-left and bottom-left of the first table data on the table row */
  .table tr:nth-child(odd) td:first-child {
    border-radius: 40px 0 0 40px;
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(2) {
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(3) {
    border-radius: 0 40px 40px 0;
    background: #151515;
  }

  .product-section-title {
    color: #525252;
    font-size: 26px;
    margin-bottom: 30px;
    font-weight: 300;
  }

  .product-section-subtitle {
    font-size: 22px;
  }

  .product-list {
    color: white;
    padding-left: 25%;
    padding-top: 30px;
  }

  .product-list-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    margin-bottom: 50px;
  }

  .product {
    height: 260px;
    /* background: #4e4e4e; */
    /* width: 250px; */
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  .product-image-container {
    /* height: 250px; */
    display: grid;
    /* width: 250px; */
    border-radius: 40px;
    margin-bottom: 15px;
  }

  .product-pic {
    width: 100%;
    transition: 0.5s;
    border-radius: 40px;
    align-self: center;
    grid-area: image;
  }

  /* different colours bg and shadow depending on item */

  #classic-tiramisu:hover #classic-tiramisu-pic {
    background: green;
    -webkit-box-shadow: 0px 0px 10px 4px rgba(17,255,0,0.85);
    box-shadow: 0px 0px 10px 4px rgba(17,255,0,0.85);
    transition: 0.5s;
  }

  #classic-mango:hover #classic-mango-pic {
    background: yellow;
    -webkit-box-shadow: 0px 0px 10px 4px yellow;
    box-shadow: 0px 0px 10px 4px rgba(17,255,0,0.85);
    transition: 0.5s;
  }



  /* different colours end here */


  .product-name {
    text-align: center;
    align-self: end;
  }

  .map-container {
    height: 100vH;
    background: grey;
  }

  .menu-card-header {
    padding-left: 40px;
    margin-bottom: 0;
    line-height: 1.2;
  }

  .loyalty-card-icon {
    text-align: center;
  }

  .loyalty-card-caption {
    padding-top: 30px;
  }

  .businessCard {
    padding: 40px;
    height: 400px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .businessCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .businessCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .careersCard {
    padding: 40px;
    height: 300px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .careersCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .careersCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .businessCard-button {
    position: absolute;
    bottom: 10%;
  }

  .more-margin-bottom {
    margin-bottom: 80px!important;
  }

  .top-half {
    height: 75%;
    border-radius: 40px;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    position: relative;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .top-half:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .swiper-container:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .top-half:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .home-page-grid-1 {
    background: url(/images/home-page-grid-1.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-2 {
    background: url(/images/home-page-grid-2.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-3 {
    background: url(/images/home-page-grid-3.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-4 {
    background: url(/images/home-page-grid-4.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .delivery-page-grid-1 {
    background: url(/images/delivery-page-grid-1.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .delivery-page-grid-2 {
    background: url(/images/delivery-page-grid-2.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .grid-image {
    position: absolute;
    width: 400px;
    bottom: 0;
    right: 0;
  }

  .bottom-half {
    text-align: center;
    padding-top: 30px;
  }

  .left-half {
    padding-left: 45px;
    padding-top: 45px;
    color: white;
    width: 60%;
  }

  .delivery-left-half {
    padding-left: 45px;
    padding-right: 45px;
    padding-top: 45px;
    color: white;
    width: 100%;
  }

  .business-left-half {
    padding-left: 45px;
    padding-top: 45px;
    color: white;
    width: 80%;
  }

  .business-card-title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .business-card-subtitle {
    font-size: 18px;
    color: #969696;
    padding-bottom: 20px;
    font-weight: 300;
  }

  .tile-button {
    border: 2px solid green;
    border-radius: 40px;
    background: none;
    min-width: 190px;
    min-height: 50px;
    color: white;
  }

  .first-tile {
    background-image: url(/images/grid-1.png);
    background-position: right center;
    background-size: cover;
  }

  .second-tile {
    background-image: url(/images/grid-2.png);
    background-position: right center;
    background-size: cover;
  }

  .third-tile {
    background-image: url(/images/grid-3.png);
    background-position: right center;
    background-size: cover;
  }

  .fourth-tile {
    background-image: url(/images/grid-4.png);
    background-position: right center;
    background-size: cover;
  }

  .map-container {
    background-image: url(/images/map-desktop.png);
    height: 350px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 40px;
    /* margin-bottom: 30px; */
    color: white;
    display: grid;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    cursor: pointer;
  }

  .map-container:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .map-container:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .map-content {
    justify-self: center;
    text-align: center;
    align-self: center;
  }

  .image-home-page-banner {
    width:100%;
    object-fit: contain;
  }

  .wide-menu {
    font-weight: 300;
    padding-left: 25px;
    color: white;
  }

  .centered-links {
    width: 100%;
    justify-content: center;
  }

  .wide-menu-item {

  }

  .footer-social {
    width:30px;
  }

  .footer-social:hover {
    filter: invert(14%) sepia(32%) saturate(1868%) hue-rotate(83deg) brightness(104%) contrast(96%);
  }

  .footer-white-link {
    color: white;
  }

  .wide-menu-link {
    padding-left: 17px!important;
    padding-right: 17px!important;
  }

  .wide-menu-link:hover {
    color: green!important;
  }

  .wide-menu-link:active {
    color: green!important;
    /* border-bottom: 0.5px green solid; */
    padding-bottom: 0;
  }

  .active {
    color: green!important;
    /* border-bottom: 0.5px green solid; */
    padding-bottom: 0;
  }

  .on-top {
    z-index: 10000;
    max-width:100%;
    background-color:black;
  }

  .title-container {
    padding-left: 40px;
    padding-bottom: 20px;
  }

  .business-bg {
    background: url(/images/color-background.png);
    background-position: top center;
    background-size: cover;
  }

  .loyalty-bg {
    background: url(/images/loyalty-background.png);
    background-position: top center;
    background-size: cover;
  }

  .modal-backdrop.show {
    opacity: 0.5;
  }

  .covid-bg {
    background: url(/images/covid-background-md.png);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .image-block-small {
    /* border-left: 60px solid transparent;
    border-right: 60px solid transparent; */
    padding-left: 60px;
    padding-right: 60px;
  }

  .delivery-image {
    background-image: url(images/deliverypage.png);
  }

  .products-image {
    background-image: url(images/riviera.png);
  }

  .aboutus-image {
    background-image: url(images/about-1.png);
  }

  .business-image {
    background-image: url(images/business-title.png);
  }

  .careers-image {
    background-image: url(images/careers-bg.png);
  }

  .careers-job-image {
    background-image: url(images/black-banner-logo.png);
  }

  .responsibility {
    background-image: url(images/responsibility.png);
  }

  .covid {
    background-image: url(images/black-banner-logo.png);
  }

  .loyalty-image {
    /* background-image: url(images/loyaltypic.png); */
  }

  .bg-itisshop {
    background-image: url(images/itisshop-fullscreen.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
  }

  .itiscard {
    height: 250px;
    float: left;
    margin: 10px;
  }

  .banner-container {
    /* position: absolute; */
    bottom: 50px;
    left: 0px;
    /* color: white; */
    padding-left: 110px;
    padding-right: 60px;
  }

  .img-container {
    width: 100%;
  }

  .button-banner {
    margin-top: 16px!important;
  }

  .page-title-text-title {
    font-weight: 300;
    font-size: 24px;
    line-height: 1.2;
    padding-top: 30px;
  }

  .page-title-text-text {
    font-weight: 300;
    font-size: 40px;
    line-height: 1.2;
    padding-top: 15px;
  }

  .green-text {
    color:green;
  }

  .page-text {
    font-weight: 300;
    font-size: 16px;
    padding-top: 30px;
    margin-bottom: 0;
  }



  .more-padding-top {
    padding-top: 60px;
  }

  .more-margin-top {
    margin-top: 60px;
  }

  .page-faq-title {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 30px;
  }

  .page-faq-subtitle {
    font-weight: 700;
    font-size: 16px;
  }

  .recipes-subtitle {
    font-weight: 300;
    font-size: 16px;
  }

  .benefits-subtitle {
    font-weight: 700;
    font-size: 16px;
    margin-top: 30px;
  }

  .page-faq-text {
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 35px;
  }

  .qualities-points {
    font-weight: 300;
    font-size: 16px;
  }

  .right-column-container {
    padding-left: 45px;
    padding-right: 45px;
  }

  p {
    font-family: inherit;
  }

  h1 {
    font-family: inherit;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 42px;
    align-items: center;
  }

  h2 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 35px;
    align-items: center;
  }

  h3 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 27px;
    line-height: 32px;
    margin-bottom:0;
  }

  h4 {
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    font-size: 25px;
    line-height: 29px;
    align-items: center;
  }

  .back-button-div {
    width: 50px;
    height: 50px;
    background: #92929273;
    position: absolute;
    bottom: 85px;
    left: 35px;
    border-radius: 50px;
  }

  .back-button-div:hover {
    background: green!important;
  }

  .back-button-div:active {
    background: red!important;
  }

  .back-button {
    position: absolute;
    bottom: -4px;
    left: -1px;
    color: white;
  }

  .cards-container {
    display: grid;
    /* grid-gap: 15px; */
    grid-column-gap: 15px;
    grid-template-columns: 1fr 1fr;
  }


  .cards-container-loyalty {
    display: grid;
    grid-column-gap: 40px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 20px;
  }

  .business-cards-container {
    display: grid;
    grid-column-gap: 50px;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
  }

  .card-column {
    padding: 0;
    margin-bottom: 20px;
  }

  .loyalty-pic {
    width: 55.125px;
    margin-left: 50px;
    margin-top: 15px;
  }

  .nopadding-left-right {
    padding-left:0;
    padding-right:0;
  }

  .language-toggler {
    border: 1px solid green;
    border-radius: 40px;
    padding: 3px 25px;
  }

  button {
    min-width: 300px;
    min-height: 50px;
    border-radius: 40px;
    border: none;
    /* margin-top: 40px; */
    transform: scale(1);
    transition: 0.6s;
  }

  .locator-button {
    width: 165px;
    min-width: 0;
    margin-left: 15px;
  }

  button:focus {
    outline: none;
  }

  button:hover {
    transform: scale(1.05);
    transition: 0.6s;
  }

  button:hover .button-span {
    transform: scale(0.95);
    transition: 0.6s;
  }

  /* .tile-button {
    min-width: 180px;
    margin-top: 20px;
  } */

  .mainbanner-button {
    margin-top: 10%;
  }

  .loyalty-banner-button {
    margin-top: 50px;
  }

  .loyalty-header {
    color: white;
    padding-bottom: 30px;
    padding-top: 50px;
    font-size: 34px;
  }

  .loyalty-manual-container {
    height: 500px;
    background: #252525;
    border-radius: 40px;
  }

  .green-button {
    background: #00bd00;
  }

  .green-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .inverse-button {
    background: #000000;
  }

  .inverse-button:hover {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .business-button:hover {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .inverse-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .swiper-pagination {
    text-align: left!important;
    padding-left: 5%;
    padding-bottom: 2%;
  }

  .swiper-pagination-bullet {
    background: white!important;
    opacity: 0.8!important;
    width: 10px!important;
    height: 10px!important;
  }


  .swiper-pagination-bullet-active {
    background: #35bd00!important;
  }


}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .products-modal-container {
    max-width: 100%;
    color: white;
    margin-left: 5%;
    margin-top: 7%;
    margin-right: 5%;
  }

  .products-modal-content {
    background: #000000;
    /* padding-right: 8%; */
  }

  .products-modal-close {
    /* padding-right: 20px;
    position: absolute;
    right: 0; */
    height: 40px;
  }

  .product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40% 60%;
    gap: 0px 0px;
    grid-template-areas:
        "image name"
        "image caption";
  }

  .business-bg {
    background: url(/images/color-background-mobile.png);
    background-position: top center;
    background-size: cover;
  }

  .loyalty-bg {
    background: url(/images/color-background-mobile.png);
    background-position: top center;
    background-size: cover;
  }

  .gm-style-iw.gm-style-iw-c {
    max-width: 300px!important;
    min-width: 300px!important;
  }

  .gm-style-iw-d h2 {
    font-size: 24px;
    font-family: inherit;
  }

  .mobile-image {
    display: none;
  }

  .full-width {
  	left: 50%;
  	margin-left: -50vw;
  	margin-right: -50vw;
  	max-width: 100vw;
  	position: relative;
  	right: 50%;
  	width: 100vw;
  }

  .footer_logo {
    width: 115px;
  }
  /* The navigation menu links */
  .sidenav a {
    /* padding: 8px 8px 15px 15px; */
    text-decoration: none;
    font-size: 26px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
    font-weight: 300;
    padding: 5% 0% 1% 10%;
  }

  .cards-container {
    display: grid;
    /* grid-gap: 15px; */
    grid-column-gap: 15px;
    grid-template-columns: 1fr 1fr;
  }

  .locator-button {
    width: 45%;
    height: 40px;
    font-size: 14px;
    min-width: 0;
    min-height: 0;
    max-width: 150px;
    margin: 5px;
  }

  .rights {
    text-align: center;
    margin-bottom: 40px;
    color: #6b6b6b;
    font-size: 14px;
  }

  .foodculture {
    font-size: 16px;
    color: white;
  }

  .navbar-brand {
    display: grid;
  }

  .navbar-bottom-margin {
    /* margin-bottom: 40px; */
    padding: 0;
  }

  .business-card-subtitle {
    font-size: 2vw;
    color: #969696;
    font-weight: 300;
  }

  .header-logo {
    width: 16.5vw;
  }

  .header-height {
    z-index: 3000;
    /* height:76px; */
    height: 10.5vw;
    /* background-color:white; */
  }

  .product-accordion-card-main-heading[aria-expanded=true] .product-accordion-card-main-content .product-information-button .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .close {
    float: right;
    min-width: 0;
    transition: 0.6s;
    margin: 20px;
    opacity: 1;
  }

  .close-modal-button {
    width: 25px;
  }

  .close:hover {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .close:active {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .appdownload-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .appdownload-buttons-container a:first-child {
    text-align: right;
  }

  .appdownload-button {
    width: 60%;
  }

  .map-buttons-container {
    justify-items: end;
    margin-top: 20px;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }

  .map-button-selector {
    height: 100px;
    background: green;
    color: white;
    font-size: 26px;
    width: 70%;
  }

  .slider-desk {
    display: none;
  }

  /* .first-slide {
    bottom: -11%!important;
  } */

  .active-product-collapse {
    background: #171717;
    border-radius: 40px;
    transition: 0.6s;
  }

  .loyalty-card-caption {
    margin-top: 15px;
  }

  .caret-margin-left {
    margin-left: 10px;
  }

  .covid-cards {
    /* margin-top: 150px; */
  }

  .covid-card {
    border-radius: 40px;
    color: white;
    display: grid;
    margin-bottom: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    grid-template-columns: 100%;
    /* grid-template-rows: 1fr 1fr; */
  }

  .covid-list {
    line-height: 2;
    padding-left: 5%!important;
  }

  .covid-list li {
    line-height: 1.5;
  }

  .covid-card-left {
    /* width: 54%; */
    padding: 30px;
    padding-bottom: 0;
  }

  .covid-card-right {
    /* width: 54%; */

  }
  .careers-subtitle {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 0;
    line-height: 1.4;
  }

  .careers-title {
    color: white;
    margin-bottom: 20px;
    padding-top: 15px;
    font-size: 26px;
  }

  .modal-main-title {
    font-size: 5vw;
    margin-bottom: 40px;
    line-height: 1.1;
  }

  .modal-header-custom {
    font-size: 4vw;
    margin-bottom: 20px;
  }

  .modal-subheader-custom {
    color: #525252;
    font-size: 3.5vw;
    margin-bottom: 50px;
    font-weight: 300;
    line-height: 1.3;
  }

  .modal-career-heading {
    margin-bottom: 0;
    line-height: 0.9;
  }

  .modal-career-subheading {
    font-size: 3.5vw;
    font-weight: 400;
    margin-top: 60px;
  }

  .modal-button-margin {
    margin-top: 30px;
  }

  .business-modal-container {
    color: white;
    max-width: 90%;
  }

  .business-modal-content {
    background: #1d1d1d;
    border-radius: 40px;
  }

  .business-modal-content-form {
    display: block;
    width: 100%;
    padding: 20px 50px 60px 50px;
  }

  .careers-modal-content-form {
    display: block;
    width: 100%;
    padding: 20px 50px 60px 50px;
  }

  .modal-form-label {
    color: white;
  }

  .banner-image-careers {
    display: none;
  }

  .close {
    float: right;
    /* font-size: 3rem; */
    /* font-family: sans-serif; */
    /* font-weight: 300; */
    /* line-height: 1.4; */
    /* color: white; */
    /* text-shadow: 0 1px 0 #fff; */
    /* opacity: 1; */
    min-width: 0;
    transition: 0.6s;
    margin: 5%;
  }

  .business-cards-container {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
  }

  .businessCard {
    padding: 40px;
    height: 350px;
    /* min-height: 310px; */
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .businessCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .businessCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .careersCard {
    padding: 40px;
    height: 300px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .careersCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .careersCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .businessCard-button {
    bottom: 10%;
    margin-top: 20px;
    position: absolute;
  }

  .about-us-cards {
    /* margin-top: 10%; */
  }

  .about-us-card {
    /* height: 530px; */
    /* background: url(/images/about-us-1.png);
    background-position: right bottom; */
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    border-radius: 40px;
    color: white;
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
  }

  .about-us-card-container {
    /* width: 54%; */
  }

  .large {
    font-size: 24px!important;
    padding-top: 0;
  }

  .about-us-card-image {
    position: relative;
    right: 0;
    bottom: 0;
    width: 100%;
  }

  .about-us-card-text {
    /* width: 100%; */
    color: #969696;
    font-weight: 300;
  }

  .about-us-header {
    margin-bottom: 20px;
    font-size: 4vw;
  }

  .about-us-subtitle {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 30px;
    line-height: 1.4;
  }

  .about-us-strapline {
    font-size: 18px;
    font-weight: 300;
    /* width: 80%; */
    color: white;;
    margin-top: 30px;
    line-height: 1.3;
  }

  .final-subtitle {
    padding-bottom: 0;
  }

  .home-page-grid-1 {
    /* background: url(/images/home-page-grid-1-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important; */
  }

  .home-page-grid-2 {
    /* background: url(/images/home-page-grid-2-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important; */
  }

  .home-page-grid-3 {
    background: url(/images/home-page-grid-3-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
  }

  .home-page-grid-4 {
    /* background: url(/images/home-page-grid-4-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important; */
  }

  .loyalty-manual-container {
    height: 500px;
    background: #252525;
    border-radius: 40px;
    margin-top: 30px;
    margin-bottom: 50px;
  }

  .loyalty-mobile-accordion {
    margin-top: 30px;
  }

  .cards-container-loyalty {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 20px;
  }

  .loyalty-banner {
    padding-bottom: 50px;
  }

  .loyaltyCard {
    padding: 20px;
    min-height: 220px;
    cursor: pointer;
    color: white;
    border-radius: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    text-align: center;
  }

  .loyaltyCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .card-text {
    font-weight: 300;
    color: #969696;
  }

  .delivery-banner-image {
    display: none;
  }

  .delivery-grid-image {
    display: none;
  }

  .delivery-grid-image-mobile {
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 0;
  }

  .nutritional-table-type {
    width: 33%;
  }

  .nutritional-table-100g {
    width: 33%;
  }

  .nutritional-table-portion {
    width: 33%;
  }

  .ca3-scroll-down-link {
    display: none;
  }

  .menu-title {
    width: 34%;
  }

  .menu-title-mobile {
    margin-bottom: 20px;
  }

  .side-menu-close {
    width: 20%;
    float: right;
    font-size: 20px;
  }

  .mobile-menu-button-container {
    position: sticky;
    /* bottom: 20px; */
    text-align: center;
    margin-bottom: 30px;
    z-index: 0;
  }

  .cards-container-main {
    margin-bottom: 100px;
  }

  .site-fixed-menu {
    position: fixed;
    color: white;
    width: 18%;
    left: 15%;
    padding-top: 30px;
  }

  .highlighted-accordion {
    background: grey;
  }

  .accordion-extension {
    transition: 0.5s;
  }

  .accordion-extension[aria-expanded=true] {
    color: #fff;
    background-color: #1b1b1b;
    transition: 0.5s;
    border-radius: 20px;
    box-shadow: 1px solid brown;
    -webkit-box-shadow: 0px 0px 0px 17px #1b1b1b;
    box-shadow: 0px 0px 0px 17px #1b1b1b;
    margin-bottom: 30px;
    margin-top: 30px;
    color: green;
  }

  .accordion-extension[aria-expanded=false] {
    background: none;
  }

  .site-fixed-menu {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000f5;
    overflow-x: hidden;
    padding-top: 30px;
    transition: 0.4s;
    transform: translateX(-97%);
    text-align: center;
    /* padding-left: 15%; */
    z-index: 2000;
  }

  .site-fixed-menu-accordion {
    text-align: left;
    padding-left: 10%;
    padding-right: 10%;
  }

  .site-fixed-menu-heading {
    font-weight: 400;
    font-size: 16px;
    line-height: 2.3;
  }

  .site-fixed-menu-subheadings {
    list-style: none;
    font-weight: 300;
    line-height: 2;
    color: white;
  }

  .site-fixed-menu-caret {
    opacity: 0.7;
    /* padding-right: 20px; */
    margin-right: 10px;
    width: 14px;
    color: white;
    transition: 0.5s;
  }

  .accordion-extension[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-information-button[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-detail {
    display: grid;
  }

  .product-caret {
    transform: scaleX(1.5);
    padding-left: 10px;
  }

  .product-information {
    background: #0c0c0c;
    border-radius: 40px;
    /* display: grid; */
    height: 100%;
    transition: 0.6s;
    cursor: pointer;
  }

  .product-information-button {
    color: white;
    align-self: center;
    font-weight: 300;
    font-size: 2.5vw;
    /* background: #232323; */
  }

  .product-name-detail {

  }

  .product-name-detail-title {
    font-size: 24px;
    font-weight: 400;
    align-self: center;
    order: 1;
  }

  .product-name-detail-subtitle {
    font-size: 16px;
    font-weight: 300;
    order: 3;
    margin-bottom: 30px;
  }

  .product-allergens-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-allergens-subtitle {

  }

  .product-instructions {
    padding-top: 30px;
  }

  .product-instructions-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-instructions-subtitle {

  }

  .product-nutritional {
    /* padding-top: 30px; */
    /* padding-bottom: 30px; */
  }

  .product-nutritional-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-button-container {
    text-align: center;
  }

  .table {
    color: white;
    text-align: center;
    margin-top: 30px;
  }

  td {
    border-bottom:none!important;
    border-top:none!important;
    font-weight: 300;
  }

  th {
    border-top:none!important;
    border-bottom:none!important;
    font-weight: 400;
  }

  .table td:first-child {
    text-align: left;
  }

  .table tr:nth-child(odd) td:first-child {
    border-radius: 40px 0 0 40px;
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(2) {
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(3) {
    border-radius: 0 40px 40px 0;
    background: #151515;
  }

  .product-section-title {
    color: #525252;
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 300;
  }

  .product-section-subtitle {
    font-size: 22px;
  }

  .product-list {
    color: white;
    padding-top: 20px;
  }

  .product-list-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    margin-bottom: 15%;
    align-items: center;
    justify-items: center;
  }

  .product {
    height: 250px;
    /* background: #4e4e4e; */
    width: 250px;
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  .product-image-container {
    height: 100%;
    display: grid;
    width: 100%;
    border-radius: 40px;
    margin-bottom: 15px;
  }

  .product-pic {
    width: 100%;
    transition: 0.5s;
    border-radius: 40px;
    align-self: center;
    grid-area: image;
  }

  /* different colours bg and shadow depending on item */

  #classic-tiramisu:hover #classic-tiramisu-pic {
    background: green;
    -webkit-box-shadow: 0px 0px 10px 4px rgba(17,255,0,0.85);
    box-shadow: 0px 0px 10px 4px rgba(17,255,0,0.85);
    transition: 0.5s;
  }

  #classic-mango:hover #classic-mango-pic {
    background: yellow;
    -webkit-box-shadow: 0px 0px 10px 4px yellow;
    box-shadow: 0px 0px 10px 4px rgba(17,255,0,0.85);
    transition: 0.5s;
  }



  /* different colours end here */


  .product-name {
    text-align: center;
    align-self: end;
    font-size: 14px;
  }

  .menuCard {
    height: 75px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .menuCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }


  .cards-container-main {
    margin-bottom: 100px;
  }

  .loyalty-icon {
    width: 20%;
  }

  .menu-icon {
    width: 40%;
  }

  .loyalty-card-title {
    font-size: 20px;
    line-height: 1.2;
  }

  .loyalty-card-text {
    font-weight: 300;
    font-size: 16px;
    color: #8c8c8c;
    line-height: 1.3;
  }

  .loyalty-card-icon {
    text-align: center;
    /* padding-bottom: 20px; */
  }

  .menu-card-header {
    padding-left: 40px;
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1.2;
  }

  .no-bottom-margin {
    margin-bottom: 0!important;
  }

  .home-page-grid-1 {
    background: url(/images/home-page-grid-1-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-2 {
    background: url(/images/home-page-grid-2-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-3 {
    background: url(/images/home-page-grid-3-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-4 {
    background: url(/images/home-page-grid-4-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .full-width-mobile {
  	left: 50%;
  	margin-left: -50vw;
  	margin-right: -50vw;
  	max-width: 100vw;
  	position: relative;
  	right: 50%;
  	width: 100vw;
  }

  .desktop-image-covid {
    display: none;
  }

  .desktop-image {
    /* display: none; */
  }

  .first-card {
    height: 880px;
    background: url(/images/about-us-1-mobile.png);
    background-position: right bottom;
    background-size: cover;
    border-radius: 40px;
    color: white;
    padding: 40px;
    margin-bottom: 100px;
  }

  .second-card {
    height: 952px;
    background: url(/images/about-us-2-mobile.png);
    background-position: right bottom;
    background-size: cover;
    border-radius: 40px;
    color: white;
    padding: 40px;
    margin-bottom: 100px;
  }

  /* .about-us-header {
    margin-bottom: 25px;
  } */

  .cards-container-mobile {
    /* padding-top: 30%; */
  }

  .faq-title {
    color: white;
    margin-bottom: 30px;
    padding-top: 15px;
    font-size: 24px;
  }

  .faq-container {
    margin-bottom: 50px;
  }

  .faq-accordion-card {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #232323;
    border: none;
    color: white;
    min-height: 50px;
    padding: 15px 30px;
    border-radius: 40px;
    transition: 0.6s;
  }

  .faq-accordion-card:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .faq-accordion-card[aria-expanded=true] {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }



  .faq-accordion-heading {
    font-size: 18px;
    cursor: pointer;
    font-weight: 300;
  }

  .faq-accordion-card-body {
    padding-top: 15px;
    font-weight: 300;
  }

  .product-banner {
    height: 500px;
    position: relative;
    border-radius: 40px;
    color: white;
    padding: 30px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .products-container {
    margin-top: 50px;
  }

  .product-heading {
    margin-bottom: 20px;
    font-size: 5.5vw;
  }

  .product-subheading {
    font-size: 16px;
    color: #8c8c8c;
    font-weight: 300;
    width: 75%;
  }

  /* .product-information-button {
    color: white;
    width: 100%;
    align-self: center;
    background: #232323d6;
    font-weight: 300;
  } */

  .product-characteristic-title {
    font-size: 2.5vw;
    font-weight: 300;
    padding-bottom: 10px;
    color: white;
  }


  .product-caret {
    padding-left: 15px;
  }

  .vacancies-list {
    padding-left: 15px;
  }

  /* .collapsed {
    background: #191919cc;
  } */

  /* .product-information-button:hover {
    transform: none;
    background: #232323d6;
  }

  .product-information-button:active {
    transform: none;
    background: #232323d6;
  } */

  .product-information-card {
    background: #232323;
    border: none;
    color: white;
    border-radius: 20px;
    text-align: left;
  }

  .product-accordion-card {
    /* margin-top: 10px; */
    margin-bottom: 10px;
    /* background: #232323; */
    border: none;
    color: white;
  }

  .product-accordion-card-main {
    display: grid;
    transition: 0.6s;
    border-radius: 40px;
  }

  .product-accordion-card-main-heading {
    width: 100%;
    height: 47px;
    display: grid;
    text-align: center;
    transition: 0.6s
  }

  /* .product-accordion-card-main:hover {
    background: #171717;
    transition: 0.6s;
  } */

  .product-accordion-card-main-content {
    align-self: center;
  }

  .collapse-body-main {
    padding: 20px;
    /* padding-top: 0; */
  }

  .no-padding-above {
    padding-top: 0;
  }

  .product-characteristic-list {
    font-weight: 300;
    font-size: 16px;
    color: #afafaf;
    padding: 1.25rem;
  }

  /* .product-accordion-card {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #232323;
    border: none;
    color: white;
  } */

  .product-accordion-heading {
    color: green;
    text-decoration: underline;
    font-size: 20px;
    font-weight: 300;
  }

  .card-body-internal {
    padding-left: 0;
  }

  .product-button-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 15px;
  }

  .product-mochi {
    background: url(/images/mochi-products-tablet.png);
    background-size: cover;
    background-position: bottom center;
  }

  .product-matcha {
    background: url(/images/matcha-products-tablet.png);
    background-size: cover;
    background-position: bottom center;
  }

  .product-calpis {
    background: url(/images/calpis-products-tablet.png);
    background-size: cover;
    background-position: bottom center;
  }

  .product-yuzu {
    background: url(/images/yuzu-products-tablet.png);
    background-size: cover;
    background-position: bottom center;
  }

  .product-mochi-mobile {
    display: none;
  }

  .product-matcha-mobile {
    display: none;
  }

  .product-calpis-mobile {
    display: none;
  }

  .product-yuzu-mobile {
    display: none;
  }

  /* .product-mochi {
    background-image: url('/images/mochi-products-mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  } */

  /* .product-matcha {
    background-image: url('/images/matcha-products-mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  }

  .product-calpis {
    background-image: url('/images/calpis-products-mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  } */

  .footer-social {
    width:30px;
  }

  .footer-social:hover {
    filter: invert(14%) sepia(32%) saturate(1868%) hue-rotate(83deg) brightness(104%) contrast(96%);
  }

  #navbarText {
    text-align: right;
    margin-bottom: 30px;
  }

  .social-inline {
    display: inline-block;
  }

  a {
    color:white;
  }

  #logo-mobile {
    transition: 0.3s;
  }

  .homepageCard {
    height: 530px;
    /* background: black; */
    cursor: pointer;
  }

  .deliverypageCard {
    height: 620px;
    /* background: black; */
    cursor: pointer;
  }

  .card-column {
    padding: 0;
    margin-bottom: 20px;
  }

  .banner-image {
    display: none;
  }


  .top-half {
    height: 75%;
    border-radius: 40px;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    position: relative;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .top-half:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .top-half:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .bottom-half {
    text-align: center;
    padding-top: 30px;
  }

  .left-half {
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    color: white;
    /* width: 60%; */
  }

  .delivery-left-half {
    padding: 30px;
    color: white;
    /* width: 70%; */
  }

  .tile-button {
    border: 2px solid green;
    border-radius: 40px;
    background: none;
    min-width: 190px;
    min-height: 50px;
    color: white;
  }

  .first-tile {
    background-image: url(/images/grid-1-mobile.png);
    background-position: bottom center;
  }

  .second-tile {
    background-image: url(/images/grid-2-mobile.png);
    background-position: bottom center;
  }

  .third-tile {
    background-image: url(/images/grid-3-mobile.png);
    background-position: bottom center;
  }

  .fourth-tile {
    background-image: url(/images/grid-4-mobile.png);
    background-position: bottom center;
  }

  .map-container {
    background: url(/images/home-page-map-mobile.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    height: 400px;
    border-radius: 40px;
    /* margin-bottom: 30px; */
    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
    transition: 0.6s;
    transform: scale(1);
    padding: 20px;
  }

  .map-container:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .map-container:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .full-width-menu {
    display: none;
  }

  .full-width-menu-mobile {

  }

  .mobile-button-container {
    text-align: center;
  }

  button {
    min-width: 250px;
    min-height: 50px;
    border-radius: 40px;
    border: none;
    /* margin-top: 40px; */
    transform: scale(1);
    transition: 0.6s;
  }

  button:focus {
    outline: none;
  }

  button:hover {
    transform: scale(1.05);
    transition: 0.6s;
  }

  button:hover .button-span {
    transform: scale(0.95);
    transition: 0.6s;
  }

  .sidenav-button {
    min-width: 150px;
    margin-top: 23px;
    font-size: 14px;
    min-height: 40px;
    border: 2px solid green;
    border-radius: 40px;
    color: white;
  }

  /* .tile-button {
    min-width: 180px;
    margin-top: 20px;
  } */

  .mainbanner-button {
    /* margin-top: 100px; */
  }

  .green-button {
    background: #00bd00;
  }

  .green-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .inverse-button {
    background: #000000;
  }

  .inverse-button:hover {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .inverse-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .swiper-pagination {
    text-align: left!important;
    padding-left: 5%;
    padding-bottom: 2%;
  }

  .swiper-pagination-bullet {
    background: white!important;
    opacity: 0.8!important;
    width: 10px!important;
    height: 10px!important;
  }


  .swiper-pagination-bullet-active {
    background: #35bd00!important;
  }

  .image-block {
    /* background-image: url(images/homepageimage.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
    /* height: 534px; */
    padding: 0;
  }

  .left-side-text-banner {
    /* width: 45%; */
    /* color: white; */
    /* align-self: center; */
    /* margin-top: 20px; */
  }

  .swiper-container {
    height: 400px;
    border-radius: 40px;
    margin-bottom: 20px;
  }

  .slider-left-side {
    width: 60%;
  }

  .swiper-slide {
    /* background: rgba(0, 0, 0, 0.65); */
    padding: 30px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .slider-title {
    color: white;
    line-height: 1;
    padding-bottom: 10%;
    font-size: 3vw;
  }

  .slider-subtitle {
    color: #9c694b;
    font-size: 34px;
    padding-bottom: 15px;
  }

  .slider-text {
    color: #ababab;
    font-size: 16px;
    padding-top: 5%;
  }

  .slider-image-right {
    position: absolute;
    width: 325px;
    right: 0;
    bottom: 0;
  }

  .card-title {
    font-size: 3vw;
  }

  .first-card-image {
    position: absolute;
    bottom: 0;
    right: 6%;
    padding-right: 30px;
    width: 80%;
  }

  .second-card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    /* padding-right: 30px; */
    width: 63%;
  }

  /* .third-card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
  } */

  .fourth-card-image {
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 20vw;
  }


  /* .slide-1 {
    background-image: url('/images/slider-1-mobile.png');
    background-position: center right;
  }

  .slide-2 {
    background-image: url('/images/slider-2-mobile.png');
    background-position: center right;
  }

  .slide-3 {
    background-image: url('/images/slider-3-mobile.png');
    background-position: center right;
  } */

  .mobile-banner {
    padding-top: 8vw;
    margin-bottom: 10px;
    width: 100%;
  }

  .mobile-banner-delivery {
    margin-bottom: 10px;
  }

  .mobile-banner-itiscard {
    padding-top: 0;
  }

  .mobile-banner-covid {
    /* padding-top: 30px; */
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    margin-bottom: 10px;
    width: 100%;
  }

  .main-page-banner {
    /* height: 400px; */
    /* background-image: url('/images/home-page-mobile.png');
    background-position: center;
    background-size: cover; */
    /* display: grid; */
    margin-bottom: 60px;
  }

  .image-home-page-banner {
    width:100%;
    object-fit: contain;
    /* display: block;
    height: auto; */
  }

  .image-block-small {
    /* border: 15px solid transparent; */
  }

  .delivery-image {
    background-image: url(images/deliverypage.png);
  }

  .products-image {
    background-image: url(images/riviera.png);
  }

  .aboutus-image {
    background-image: url(images/about-1.png);
  }

  .business-image {
    background-image: url(images/business-title.png);
  }

  .careers-image {
    background-image: url(images/careers-bg.png);
  }

  .careers-job-image {
    background-image: url(images/black-banner-logo.png);
  }

  .responsibility {
    background-image: url(images/responsibility.png);
  }

  .covid {
    background-image: url(images/black-banner-logo.png);
  }

  .loyalty-image {
    display: none;
  }

  .on-top {
    /* z-index: 10000; */
    max-width:100%;
    background-color:black;
    padding-left: 5%;
    padding-right: 5%;
  }

  .bg-itisshop {
    background-image: url(images/onlineshop.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 238px;
  }

  .itiscard {
    height: 150px;
    margin: 10px;
  }

  .banner-container {
    position: absolute;
    bottom: 50px;
    left: 0px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
  }

  .img-container {
    width: 100%;
  }

  .button-banner {
    margin-top: 16px!important;
  }

  .page-title-text-title {
    font-weight: 300;
    font-size: 22px;
    color: #8c8c8c;
    margin-bottom: 4vw;
    line-height: 1.5;
    padding-top: 20px;
  }

  .page-title-text-text {
    font-weight: 300;
    font-size: 4vw;
    /* padding-top: 15px; */
    margin-bottom: 0;
    color: white;
    line-height: 1.3;
  }

  .green-text {
    color:green!important;
  }

  .page-text {
    font-weight: 300;
    font-size: 16px;
    padding-top: 30px;
    margin-bottom: 0;
  }



  .more-padding-top {
    padding-top: 60px;
  }

  .more-margin-top {
    margin-top: 60px;
  }

  .page-faq-title {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 30px;
  }

  .page-faq-subtitle {
    font-weight: 700;
    font-size: 16px;
  }

  .recipes-subtitle {
    font-weight: 300;
    font-size: 16px;
  }

  .benefits-subtitle {
    font-weight: 700;
    font-size: 16px;
    margin-top: 30px;
  }

  .page-faq-text {
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 35px;
  }

  .qualities-points {
    font-weight: 300;
    font-size: 16px;
  }

  p {
    font-family: inherit;
  }

  h1 {
    font-family: inherit;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 42px;
    align-items: center;
  }

  h2 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    align-items: center;
  }

  h3 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 27px;
    line-height: 32px;
    margin-bottom:0;
  }

  h4 {
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    font-size: 25px;
    line-height: 29px;
    align-items: center;
  }

  .back-button-div {
    width: 50px;
    height: 50px;
    background: #92929273;
    position: absolute;
    bottom: 85px;
    left: 35px;
    border-radius: 50px;
  }

  .back-button-div:hover {
    background: green!important;
  }

  .back-button-div:active {
    background: red!important;
  }

  .back-button {
    position: absolute;
    bottom: -4px;
    left: -1px;
    color: white;
  }

  .loyalty-pic {
    width: 60%;
    margin-left: 25px;
    margin-top: 15px;
  }

  .nopadding-left-right {
    padding: 0;
  }

}

@media screen and (min-width: 431px) and (max-width: 767px) {
  .products-modal-container {
    /* max-width: 70%; */
    color: white;
    margin-left: 3%;
    margin-top: 15%;
  }

  .products-modal-content {
    background: #000000;
    /* padding-right: 8%; */
  }

  .products-modal-close {
    /* padding-right: 20px;
    position: absolute;
    right: 0; */
    height: 40px;
  }

  .business-bg {
    background: url(/images/color-background-mobile.png);
    background-position: top center;
    background-size: cover;
  }

  .loyalty-bg {
    background: url(/images/color-background-mobile.png);
    background-position: top center;
    background-size: cover;
  }

  .gm-style-iw-d h2 {
    font-size: 24px;
    line-height: 1.1;
    font-family: inherit;
  }

  .gm-style-iw.gm-style-iw-c {
    max-width: 220px!important;
    min-width: 250px!important;
  }

  .mobile-image {
    display: none;
  }

  .full-width {
  	left: 50%;
  	margin-left: -50vw;
  	margin-right: -50vw;
  	max-width: 100vw;
  	position: relative;
  	right: 50%;
  	width: 100vw;
  }

  .footer_logo {
    width: 115px;
  }
  /* The navigation menu links */
  .sidenav a {
    /* padding: 8px 8px 15px 15px; */
    text-decoration: none;
    font-size: 26px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
    font-weight: 300;
    padding: 5% 0% 1% 10%;
  }

  .cards-container {
    display: grid;
    /* grid-gap: 15px; */
    grid-column-gap: 15px;
    grid-template-columns: 1fr 1fr;
  }

  .locator-button {
    width: 45%;
    height: 40px;
    font-size: 14px;
    min-width: 0;
    min-height: 0;
    max-width: 150px;
    margin: 5px;
  }

  .rights {
    text-align: center;
    margin-bottom: 40px;
    color: #6b6b6b;
    font-size: 14px;
  }

  .foodculture {
    font-size: 16px;
    color: white;
  }

  .navbar-brand {
    display: grid;
  }

  .navbar-bottom-margin {
    /* margin-bottom: 40px; */
    padding: 0;
  }


  .business-card-subtitle {
    font-size: 3vw;
    color: #969696;
    font-weight: 300;
  }

  .header-logo {
    width: 16.5vw;
  }

  .header-height {
    z-index: 3000;
    /* height:76px; */
    height: 10.5vw;
    /* background-color:white; */
  }

  .product-accordion-card-main-heading[aria-expanded=true] .product-accordion-card-main-content .product-information-button .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .close {
    float: right;
    min-width: 0;
    transition: 0.6s;
    margin: 20px;
    opacity: 1;
  }

  .close-modal-button {
    width: 25px;
  }

  .close:hover {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .close:active {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .appdownload-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .appdownload-buttons-container a:first-child {
    text-align: right;
  }

  .appdownload-button {
    width: 60%;
  }

  .map-buttons-container {
    justify-items: end;
    margin-top: 20px;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }

  .map-button-selector {
    height: 100px;
    background: green;
    color: white;
    font-size: 26px;
    width: 70%;
  }

  .slider-desk {
    display: none;
  }

  /* .first-slide {
    bottom: -11%!important;
  } */

  .active-product-collapse {
    background: #171717;
    border-radius: 40px;
    transition: 0.6s;
  }

  .loyalty-card-caption {
    margin-top: 15px;
  }

  .caret-margin-left {
    margin-left: 10px;
  }

  .covid-cards {
    /* margin-top: 150px; */
  }

  .covid-card {
    border-radius: 40px;
    color: white;
    display: grid;
    margin-bottom: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    grid-template-columns: 100%;
    /* grid-template-rows: 1fr 1fr; */
  }

  .covid-list {
    line-height: 2;
    padding-left: 5%!important;
  }

  .covid-list li {
    line-height: 1.5;
  }

  .covid-card-left {
    /* width: 54%; */
    padding: 30px;
    padding-bottom: 0;
  }

  .covid-card-right {
    /* width: 54%; */

  }
  .careers-subtitle {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 0;
    line-height: 1.4;
    color: grey;
  }

  .careers-title {
    color: white;
    margin-bottom: 20px;
    padding-top: 15px;
    font-size: 26px;
  }

  .modal-main-title {
    font-size: 5vw;
    margin-bottom: 40px;
    line-height: 1.1;
  }

  .modal-header-custom {
    font-size: 4vw;
    margin-bottom: 20px;
  }

  .modal-subheader-custom {
    color: #525252;
    font-size: 3.5vw;
    margin-bottom: 50px;
    font-weight: 300;
    line-height: 1.3;
  }

  .modal-career-heading {
    margin-bottom: 0;
    line-height: 0.9;
  }

  .modal-career-subheading {
    font-size: 3.5vw;
    font-weight: 400;
    margin-top: 60px;
  }

  .modal-button-margin {
    margin-top: 30px;
  }

  .business-modal-container {
    color: white;
    max-width: 90%;
  }

  .business-modal-content {
    background: #1d1d1d;
    border-radius: 40px;
  }

  .business-modal-content-form {
    display: block;
    width: 100%;
    padding: 20px 50px 60px 50px;
  }

  .careers-modal-content-form {
    display: block;
    width: 100%;
    padding: 20px 50px 60px 50px;
  }

  .modal-form-label {
    color: white;
  }

  .banner-image-careers {
    display: none;
  }

  .close {
    float: right;
    /* font-size: 3rem; */
    /* font-family: sans-serif; */
    /* font-weight: 300; */
    /* line-height: 1.4; */
    /* color: white; */
    /* text-shadow: 0 1px 0 #fff; */
    /* opacity: 1; */
    min-width: 0;
    transition: 0.6s;
    margin: 5%;
  }

  .business-cards-container {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
  }

  .businessCard {
    padding: 40px;
    /* height: 350px; */
    min-height: 310px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .businessCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .businessCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .careersCard {
    padding: 40px;
    height: 300px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .careersCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .careersCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .businessCard-button {
    bottom: 10%;
    margin-top: 20px;
    min-width: 145px!important;
    min-height: 45px!important;
    font-size: 14px;
  }

  .careers-header {
    font-size: 24px;
    line-height: 1.2;
  }

  .about-us-cards {
    /* margin-top: 10%; */
  }

  .about-us-card {
    /* height: 530px; */
    /* background: url(/images/about-us-1.png);
    background-position: right bottom; */
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    border-radius: 40px;
    color: white;
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
  }

  .about-us-card-container {
    /* width: 54%; */
  }

  .large {
    font-size: 24px!important;
    padding-top: 0;
  }

  .about-us-card-image {
    position: relative;
    right: 0;
    bottom: 0;
    width: 100%;
  }

  .about-us-card-text {
    /* width: 100%; */
    color: #969696;
    font-weight: 300;
  }

  .about-us-header {
    margin-bottom: 20px;
    font-size: 4vw;
  }

  .about-us-subtitle {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 30px;
    line-height: 1.4;
  }

  .about-us-strapline {
    font-size: 18px;
    font-weight: 300;
    /* width: 80%; */
    color: white;;
    margin-top: 30px;
    line-height: 1.3;
  }

  .final-subtitle {
    padding-bottom: 0;
  }

  .home-page-grid-1 {
    /* background: url(/images/home-page-grid-1-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important; */
  }

  .home-page-grid-2 {
    /* background: url(/images/home-page-grid-2-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important; */
  }

  .home-page-grid-3 {
    background: url(/images/home-page-grid-3-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
  }

  .home-page-grid-4 {
    /* background: url(/images/home-page-grid-4-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important; */
  }

  .loyalty-manual-container {
    height: 500px;
    background: #252525;
    border-radius: 40px;
    margin-top: 30px;
    margin-bottom: 50px;
  }

  .loyalty-mobile-accordion {
    margin-top: 30px;
  }

  .cards-container-loyalty {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr;
    padding-top: 20px;
  }

  .business-card-title {
    font-size: 22px;
    line-height: 1.2;
  }

  .loyalty-banner {
    padding-bottom: 50px;
  }

  .loyaltyCard {
    padding: 20px;
    min-height: 220px;
    cursor: pointer;
    color: white;
    border-radius: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    text-align: center;
  }

  .loyaltyCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .card-text {
    font-weight: 300;
    color: #969696;
  }

  .delivery-banner-image {
    display: none;
  }

  .delivery-grid-image {
    display: none;
  }

  .delivery-grid-image-mobile {
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 0;
  }

  .nutritional-table-type {
    width: 33%;
  }

  .nutritional-table-100g {
    width: 33%;
  }

  .nutritional-table-portion {
    width: 33%;
  }

  .ca3-scroll-down-link {
    display: none;
  }

  .menu-title {
    width: 34%;
  }

  .menu-title-mobile {
    margin-bottom: 20px;
  }

  .side-menu-close {
    width: 20%;
    float: right;
    font-size: 20px;
  }

  .mobile-menu-button-container {
    position: sticky;
    /* bottom: 20px; */
    text-align: center;
    margin-bottom: 30px;
    z-index: 0;
  }

  .cards-container-main {
    margin-bottom: 100px;
  }

  .site-fixed-menu {
    position: fixed;
    color: white;
    width: 18%;
    left: 15%;
    padding-top: 30px;
  }

  .highlighted-accordion {
    background: grey;
  }

  .accordion-extension {
    transition: 0.5s;
  }

  .accordion-extension[aria-expanded=true] {
    color: #fff;
    background-color: #1b1b1b;
    transition: 0.5s;
    border-radius: 20px;
    box-shadow: 1px solid brown;
    -webkit-box-shadow: 0px 0px 0px 17px #1b1b1b;
    box-shadow: 0px 0px 0px 17px #1b1b1b;
    margin-bottom: 30px;
    margin-top: 30px;
    color: green;
  }

  .accordion-extension[aria-expanded=false] {
    background: none;
  }

  .site-fixed-menu {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000f5;
    overflow-x: hidden;
    padding-top: 30px;
    transition: 0.4s;
    transform: translateX(-97%);
    text-align: center;
    /* padding-left: 15%; */
    z-index: 2000;
  }

  .site-fixed-menu-accordion {
    text-align: left;
    padding-left: 10%;
    padding-right: 10%;
  }

  .site-fixed-menu-heading {
    font-weight: 400;
    font-size: 16px;
    line-height: 2.3;
  }

  .site-fixed-menu-subheadings {
    list-style: none;
    font-weight: 300;
    line-height: 2;
    color: white;
  }

  .site-fixed-menu-caret {
    opacity: 0.7;
    /* padding-right: 20px; */
    margin-right: 10px;
    width: 14px;
    color: white;
    transition: 0.5s;
  }

  .accordion-extension[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-information-button[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-detail {
    display: grid;
  }

  .product-caret {
    transform: scaleX(1.5);
    padding-left: 10px;
  }

  .product-information {
    background: #0c0c0c;
    border-radius: 40px;
    /* display: grid; */
    height: 100%;
    transition: 0.6s;
    cursor: pointer;
  }

  .product-information-button {
    color: white;
    align-self: center;
    font-weight: 300;
    font-size: 3vw;
    /* background: #232323; */
  }

  .products-main {
    padding-top: 5%;
  }

  .product-name-detail {

  }

  .product-name-detail-title {
    font-size: 24px;
    font-weight: 400;
    align-self: center;
    order: 1;
  }

  .product-name-detail-subtitle {
    font-size: 16px;
    font-weight: 300;
    order: 3;
    margin-bottom: 30px;
  }

  .product-allergens-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-allergens-subtitle {

  }

  .product-instructions {
    padding-top: 30px;
  }

  .product-instructions-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-instructions-subtitle {

  }

  .product-nutritional {
    /* padding-top: 30px; */
    /* padding-bottom: 30px; */
  }

  .product-nutritional-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-button-container {
    text-align: center;
  }

  .table {
    color: white;
    text-align: center;
    margin-top: 30px;
  }

  td {
    border-bottom:none!important;
    border-top:none!important;
    font-weight: 300;
  }

  th {
    border-top:none!important;
    border-bottom:none!important;
    font-weight: 400;
  }

  .table td:first-child {
    text-align: left;
  }

  .table tr:nth-child(odd) td:first-child {
    border-radius: 40px 0 0 40px;
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(2) {
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(3) {
    border-radius: 0 40px 40px 0;
    background: #151515;
  }

  .product-section-title {
    color: #525252;
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 300;
  }

  .product-section-subtitle {
    font-size: 22px;
  }

  .product-list {
    color: white;
    padding-top: 20px;
  }

  .product-list-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    margin-bottom: 20%;
    align-items: center;
    justify-items: center;
  }

  .product {
    height: 150px;
    /* background: #4e4e4e; */
    width: 150px;
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  .product-image-container {
    height: 100%;
    display: grid;
    width: 100%;
    border-radius: 40px;
    margin-bottom: 15px;
  }

  .product-pic {
    width: 100%;
    transition: 0.5s;
    border-radius: 40px;
    align-self: center;
    order: 2;
  }

  /* different colours bg and shadow depending on item */

  #classic-tiramisu:hover #classic-tiramisu-pic {
    background: green;
    -webkit-box-shadow: 0px 0px 10px 4px rgba(17,255,0,0.85);
    box-shadow: 0px 0px 10px 4px rgba(17,255,0,0.85);
    transition: 0.5s;
  }

  #classic-mango:hover #classic-mango-pic {
    background: yellow;
    -webkit-box-shadow: 0px 0px 10px 4px yellow;
    box-shadow: 0px 0px 10px 4px rgba(17,255,0,0.85);
    transition: 0.5s;
  }



  /* different colours end here */


  .product-name {
    text-align: center;
    align-self: end;
    font-size: 14px;
  }

  .menuCard {
    height: 75px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .menuCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }


  .cards-container-main {
    margin-bottom: 100px;
  }

  .loyalty-icon {
    width: 20%;
  }

  .menu-icon {
    width: 40%;
  }

  .loyalty-card-title {
    font-size: 20px;
    line-height: 1.2;
  }

  .loyalty-card-text {
    font-weight: 300;
    font-size: 14px;
    color: #8c8c8c;
    line-height: 1.3;
  }

  .loyalty-card-icon {
    text-align: center;
    /* padding-bottom: 20px; */
  }

  .menu-card-header {
    padding-left: 40px;
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1.2;
  }

  .no-bottom-margin {
    margin-bottom: 0!important;
  }

  .home-page-grid-1 {
    background: url(/images/home-page-grid-1-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-2 {
    background: url(/images/home-page-grid-2-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-3 {
    background: url(/images/home-page-grid-3-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-4 {
    background: url(/images/home-page-grid-4-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .full-width-mobile {
  	left: 50%;
  	margin-left: -50vw;
  	margin-right: -50vw;
  	max-width: 100vw;
  	position: relative;
  	right: 50%;
  	width: 100vw;
    top: -56px;
  }

  .desktop-image-covid {
    display: none;
  }

  .desktop-image {
    /* display: none; */
  }

  .first-card {
    height: 880px;
    background: url(/images/about-us-1-mobile.png);
    background-position: right bottom;
    background-size: cover;
    border-radius: 40px;
    color: white;
    padding: 40px;
    margin-bottom: 100px;
  }

  .second-card {
    height: 952px;
    background: url(/images/about-us-2-mobile.png);
    background-position: right bottom;
    background-size: cover;
    border-radius: 40px;
    color: white;
    padding: 40px;
    margin-bottom: 100px;
  }

  /* .about-us-header {
    margin-bottom: 25px;
  } */

  .cards-container-mobile {
    /* padding-top: 30%; */
  }

  .faq-title {
    color: white;
    margin-bottom: 30px;
    padding-top: 15px;
    font-size: 24px;
  }

  .faq-container {
    margin-bottom: 50px;
  }

  .faq-accordion-card {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #232323;
    border: none;
    color: white;
    min-height: 50px;
    padding: 15px 30px;
    border-radius: 40px;
    transition: 0.6s;
  }

  .faq-accordion-card:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .faq-accordion-card[aria-expanded=true] {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }



  .faq-accordion-heading {
    font-size: 18px;
    cursor: pointer;
    font-weight: 300;
  }

  .faq-accordion-card-body {
    padding-top: 15px;
    font-weight: 300;
  }

  .product-banner {
    height: 500px;
    position: relative;
    border-radius: 40px;
    color: white;
    padding: 30px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .products-container {
    margin-top: 50px;
  }

  .product-heading {
    margin-bottom: 20px;
    font-size: 5.5vw;
  }

  .product-subheading {
    font-size: 16px;
    color: #8c8c8c;
    font-weight: 300;
    width: 100%;
  }



  /* .product-information-button {
    color: white;
    width: 100%;
    align-self: center;
    background: #232323d6;
    font-weight: 300;
  } */

  .product-characteristic-title {
    font-size: 2.5vw;
    font-weight: 300;
    padding-bottom: 10px;
    color: white;
  }


  .product-caret {
    padding-left: 15px;
  }

  .vacancies-list {
    padding-left: 15px;
  }

  /* .collapsed {
    background: #191919cc;
  } */

  /* .product-information-button:hover {
    transform: none;
    background: #232323d6;
  }

  .product-information-button:active {
    transform: none;
    background: #232323d6;
  } */

  .product-information-card {
    background: #232323;
    border: none;
    color: white;
    border-radius: 20px;
    text-align: left;
  }

  .product-accordion-card {
    /* margin-top: 10px; */
    margin-bottom: 10px;
    /* background: #232323; */
    border: none;
    color: white;
  }

  .product-accordion-card-main {
    display: grid;
    transition: 0.6s;
    border-radius: 40px;
  }

  .product-accordion-card-main-heading {
    width: 100%;
    height: 47px;
    display: grid;
    text-align: center;
    transition: 0.6s
  }

  /* .product-accordion-card-main:hover {
    background: #171717;
    transition: 0.6s;
  } */

  .product-accordion-card-main-content {
    align-self: center;
  }

  .collapse-body-main {
    padding: 20px;
    /* padding-top: 0; */
  }

  .no-padding-above {
    padding-top: 0;
  }

  .product-characteristic-list {
    font-weight: 300;
    font-size: 16px;
    color: #afafaf;
    padding: 1.25rem;
  }

  /* .product-accordion-card {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #232323;
    border: none;
    color: white;
  } */

  .product-accordion-heading {
    color: green;
    text-decoration: underline;
    font-size: 20px;
    font-weight: 300;
  }

  .card-body-internal {
    padding-left: 0;
  }

  .product-button-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 15px;
  }

  .product-matcha-mobile {
    /* display: none; */
    width: 70%;
    position: absolute;
    bottom: 0;
    right: 15%;
  }

  .product-mochi-mobile {
    width: 70%;
    position: absolute;
    bottom: 0;
    right: 15%;
  }

  .product-calpis-mobile {
    width: 60%;
    position: absolute;
    bottom: 0;
    right: 21%;
  }

  .product-yuzu-mobile {
    width: 70%;
    position: absolute;
    bottom: 0;
    right: 15%;
  }

  /* .product-mochi {
    background-image: url('/images/mochi-products-mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  } */

  /* .product-matcha {
    background-image: url('/images/matcha-products-mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  }

  .product-calpis {
    background-image: url('/images/calpis-products-mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  } */

  .footer-social {
    width:30px;
  }

  .footer-social:hover {
    filter: invert(14%) sepia(32%) saturate(1868%) hue-rotate(83deg) brightness(104%) contrast(96%);
  }

  #navbarText {
    text-align: right;
    margin-bottom: 30px;
  }

  .social-inline {
    display: inline-block;
  }

  a {
    color:white;
  }

  #logo-mobile {
    transition: 0.3s;
  }

  .homepageCard {
    height: 450px;
    background: black;
    cursor: pointer;
  }

  .deliverypageCard {
    height: 700px;
    background: black;
    cursor: pointer;
  }

  .card-column {
    padding: 0;
    margin-bottom: 20px;
  }

  .banner-image {
    display: none;
  }


  .top-half {
    height: 75%;
    border-radius: 40px;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    position: relative;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .top-half:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .top-half:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .bottom-half {
    text-align: center;
    padding-top: 30px;
  }

  .left-half {
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    color: white;
    /* width: 60%; */
  }

  .delivery-left-half {
    padding: 30px;
    color: white;
    /* width: 70%; */
  }

  .tile-button {
    border: 2px solid green;
    border-radius: 40px;
    background: none;
    min-width: 190px;
    min-height: 50px;
    color: white;
  }

  .first-tile {
    background-image: url(/images/grid-1-mobile.png);
    background-position: bottom center;
  }

  .second-tile {
    background-image: url(/images/grid-2-mobile.png);
    background-position: bottom center;
  }

  .third-tile {
    background-image: url(/images/grid-3-mobile.png);
    background-position: bottom center;
  }

  .fourth-tile {
    background-image: url(/images/grid-4-mobile.png);
    background-position: bottom center;
  }

  .map-container {
    background: url(/images/home-page-map-mobile.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    height: 400px;
    border-radius: 40px;
    /* margin-bottom: 30px; */
    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
    transition: 0.6s;
    transform: scale(1);
    padding: 20px;
  }

  .map-container:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .map-container:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .full-width-menu {
    display: none;
  }

  .full-width-menu-mobile {

  }

  .mobile-button-container {
    text-align: center;
  }

  button {
    min-width: 250px;
    min-height: 50px;
    border-radius: 40px;
    border: none;
    /* margin-top: 40px; */
    transform: scale(1);
    transition: 0.6s;
  }

  button:focus {
    outline: none;
  }

  button:hover {
    transform: scale(1.05);
    transition: 0.6s;
  }

  button:hover .button-span {
    transform: scale(0.95);
    transition: 0.6s;
  }

  .sidenav-button {
    min-width: 150px;
    margin-top: 23px;
    font-size: 14px;
    min-height: 40px;
    border: 2px solid green;
    border-radius: 40px;
    color: white;
  }

  /* .tile-button {
    min-width: 180px;
    margin-top: 20px;
  } */

  .mainbanner-button {
    /* margin-top: 100px; */
  }

  .green-button {
    background: #00bd00;
  }

  .green-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .inverse-button {
    background: #000000;
  }

  .inverse-button:hover {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .inverse-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .swiper-pagination {
    text-align: left!important;
    padding-left: 5%;
    padding-bottom: 2%;
  }

  .swiper-pagination-bullet {
    background: white!important;
    opacity: 0.8!important;
    width: 10px!important;
    height: 10px!important;
  }


  .swiper-pagination-bullet-active {
    background: #35bd00!important;
  }

  .image-block {
    /* background-image: url(images/homepageimage.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
    /* height: 534px; */
    padding: 0;
  }

  .left-side-text-banner {
    /* width: 45%; */
    /* color: white; */
    /* align-self: center; */
    /* margin-top: 20px; */
  }

  .swiper-container {
    height: 440px;
    border-radius: 40px;
    margin-bottom: 20px;
  }

  .slider-left-side {
    width: 87%;
  }

  .swiper-slide {
    /* background: rgba(0, 0, 0, 0.65); */
    padding: 30px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .slider-title {
    color: white;
    line-height: 1;
    padding-bottom: 10%;
    font-size: 4vw;
  }

  .slider-subtitle {
    color: #9c694b;
    font-size: 30px;
    padding-bottom: 15px;
  }

  .slider-text {
    color: #ababab;
    font-size: 16px;
    padding-top: 5%;
    width: 80%;
  }

  .slider-image-right {
    position: absolute;
    width: 225px;
    right: 0;
    bottom: 0;
  }

  .sidenav {
    padding-top: 65px!important;
  }

  .card-title {
    font-size: 4vw;
    line-height: 1.2;
  }

  .first-card-image {
    position: absolute;
    bottom: 0;
    right: 6%;
    padding-right: 30px;
    width: 80%;
  }

  .second-card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    /* padding-right: 30px; */
    width: 63%;
  }

  /* .third-card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
  } */

  .fourth-card-image {
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 20vw;
  }


  /* .slide-1 {
    background-image: url('/images/slider-1-mobile.png');
    background-position: center right;
  }

  .slide-2 {
    background-image: url('/images/slider-2-mobile.png');
    background-position: center right;
  }

  .slide-3 {
    background-image: url('/images/slider-3-mobile.png');
    background-position: center right;
  } */

  .mobile-banner {
    padding-top: 8vw;
    margin-bottom: 10px;
    width: 100%;
  }

  .mobile-banner-delivery {
    margin-bottom: 10px;
  }

  .mobile-banner-itiscard {
    padding-top: 0;
  }

  .mobile-banner-covid {
    /* padding-top: 30px; */
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    margin-bottom: 10px;
    width: 100%;
  }

  .main-page-banner {
    /* height: 400px; */
    /* background-image: url('/images/home-page-mobile.png');
    background-position: center;
    background-size: cover; */
    /* display: grid; */
    margin-bottom: 60px;
  }

  .image-home-page-banner {
    width:100%;
    object-fit: contain;
    /* display: block;
    height: auto; */
  }

  .image-block-small {
    /* border: 15px solid transparent; */
  }

  .delivery-image {
    background-image: url(images/deliverypage.png);
  }

  .products-image {
    background-image: url(images/riviera.png);
  }

  .aboutus-image {
    background-image: url(images/about-1.png);
  }

  .business-image {
    background-image: url(images/business-title.png);
  }

  .careers-image {
    background-image: url(images/careers-bg.png);
  }

  .careers-job-image {
    background-image: url(images/black-banner-logo.png);
  }

  .responsibility {
    background-image: url(images/responsibility.png);
  }

  .covid {
    background-image: url(images/black-banner-logo.png);
  }

  .loyalty-image {
    display: none;
  }

  .on-top {
    /* z-index: 10000; */
    max-width:100%;
    background-color:black;
    padding-left: 5%;
    padding-right: 5%;
  }

  .bg-itisshop {
    background-image: url(images/onlineshop.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 238px;
  }

  .itiscard {
    height: 150px;
    margin: 10px;
  }

  .banner-container {
    position: absolute;
    bottom: 50px;
    left: 0px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
  }

  .img-container {
    width: 100%;
  }

  .button-banner {
    margin-top: 16px!important;
  }

  .page-title-text-title {
    font-weight: 300;
    font-size: 22px;
    color: #8c8c8c;
    margin-bottom: 4vw;
    line-height: 1.5;
    padding-top: 20px;
  }

  .page-title-text-text {
    font-weight: 300;
    font-size: 4vw;
    /* padding-top: 15px; */
    margin-bottom: 0;
    color: white;
    line-height: 1.3;
  }

  .green-text {
    color:green!important;
  }

  .page-text {
    font-weight: 300;
    font-size: 16px;
    padding-top: 30px;
    margin-bottom: 0;
  }



  .more-padding-top {
    padding-top: 60px;
  }

  .more-margin-top {
    margin-top: 60px;
  }

  .page-faq-title {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 30px;
  }

  .page-faq-subtitle {
    font-weight: 700;
    font-size: 16px;
  }

  .recipes-subtitle {
    font-weight: 300;
    font-size: 16px;
  }

  .benefits-subtitle {
    font-weight: 700;
    font-size: 16px;
    margin-top: 30px;
  }

  .page-faq-text {
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 35px;
  }

  .qualities-points {
    font-weight: 300;
    font-size: 16px;
  }

  p {
    font-family: inherit;
  }

  h1 {
    font-family: inherit;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 42px;
    align-items: center;
  }

  h2 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    align-items: center;
  }

  h3 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 27px;
    line-height: 32px;
    margin-bottom:0;
  }

  h4 {
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    font-size: 25px;
    line-height: 29px;
    align-items: center;
  }

  .back-button-div {
    width: 50px;
    height: 50px;
    background: #92929273;
    position: absolute;
    bottom: 85px;
    left: 35px;
    border-radius: 50px;
  }

  .back-button-div:hover {
    background: green!important;
  }

  .back-button-div:active {
    background: red!important;
  }

  .back-button {
    position: absolute;
    bottom: -4px;
    left: -1px;
    color: white;
  }

  .loyalty-pic {
    width: 60%;
    margin-left: 25px;
    margin-top: 15px;
  }

  .nopadding-left-right {
    padding: 0;
  }

}

@media screen and (max-width: 430px) {
  .products-modal-container {
    /* max-width: 70%; */
    color: white;
    margin-left: 3%;
    margin-top: 15%;
  }

  .products-modal-content {
    background: #000000;
    /* padding-right: 8%; */
  }

  .products-modal-close {
    /* padding-right: 20px;
    position: absolute;
    right: 0; */
    height: 40px;
  }

  .business-card-title {
    font-size: 7.5vw;
  }

  .business-bg {
    background: url(/images/color-background-mobile.png);
    background-position: top center;
    background-size: cover;
  }

  .loyalty-bg {
    background: url(/images/color-background-mobile.png);
    background-position: top center;
    background-size: cover;
  }

  .gm-style-iw-d h2 {
    font-size: 24px;
    line-height: 1.1;
    font-family: inherit!important;
  }

  .gm-style-iw.gm-style-iw-c {
    max-width: 220px!important;
    min-width: 250px!important;
  }

  .footer_logo {
    width: 90px;
  }

  /* The navigation menu links */
  .sidenav a {
    /* padding: 8px 8px 15px 15px; */
    text-decoration: none;
    font-size: 20px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
    font-weight: 300;
    padding: 5% 0% 1% 10%;
  }

  .locator-button {
    width: 45%;
    height: 40px;
    font-size: 14px;
    margin: 5px;
    min-width: 0;
    min-height: 0;
    max-width: 155px;
  }

  .rights {
    text-align: center;
    margin-bottom: 40px;
    color: #6b6b6b;
    font-size: 14px;
  }

  .foodculture {
    font-size: 13px;
    color: darkgrey;
  }

  .navbar-brand {
    display: grid;
  }

  .navbar-bottom-margin {
    /* margin-bottom: 40px; */
  }

  .business-card-subtitle {
    /* font-size: 5vw; */
    color: #969696;
    font-weight: 300;
  }

  .header-logo {
    width: 30.5vw;
  }

  .header-height {
    z-index: 3000;
    /* height:76px; */
    height: 20.5vw;
    /* background-color:white; */
  }

  .product-accordion-card-main-heading[aria-expanded=true] .product-accordion-card-main-content .product-information-button .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .close {
    float: right;
    min-width: 0;
    transition: 0.6s;
    margin: 20px;
    opacity: 1;
  }

  .close-modal-button {
    width: 25px;
  }

  .close:hover {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .close:active {
    color: white;
    opacity: 1;
    transition: 0.6s;
  }

  .appdownload-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .appdownload-button {
    width: 100%;
  }

  .map-buttons-container {
    justify-items: end;
    margin-top: 20px;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }

  .map-button-selector {
    height: 100px;
    background: green;
    color: white;
    font-size: 26px;
    width: 70%;
  }

  .slider-desk {
    display: none;
  }

  /* .first-slide {
    bottom: -11%!important;
  } */

  .active-product-collapse {
    background: #171717;
    border-radius: 40px;
    transition: 0.6s;
  }

  .loyalty-card-caption {
    margin-top: 15px;
  }

  .caret-margin-left {
    margin-left: 10px;
  }

  .covid-cards {
    /* margin-top: 150px; */
  }

  .covid-card {
    border-radius: 40px;
    color: white;
    display: grid;
    margin-bottom: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    grid-template-columns: 100%;
    /* grid-template-rows: 1fr 1fr; */
  }

  .covid-list {
    line-height: 2;
    padding-left: 5%!important;
  }

  .covid-list li {
    line-height: 1.5;
  }

  .covid-card-left {
    /* width: 54%; */
    padding: 30px;
    padding-bottom: 0;
  }

  .covid-card-right {
    /* width: 54%; */

  }
  .careers-subtitle {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 0;
    line-height: 1.4;
  }

  .careers-title {
    color: white;
    margin-bottom: 20px;
    padding-top: 15px;
    font-size: 26px;
  }

  .modal-main-title {
    font-size: 8vw;
    margin-bottom: 20px;
    line-height: 1.1;
  }

  .modal-header-custom {
    font-size: 6.5vw;
    margin-bottom: 20px;
  }

  .modal-subheader-custom {
    color: #525252;
    font-size: 5.5vw;
    margin-bottom: 50px;
    font-weight: 300;
    line-height: 1.3;
  }

  .modal-career-heading {
    margin-bottom: 0;
    line-height: 0.9;
  }

  .modal-career-subheading {
    font-size: 7vw;
    font-weight: 400;
    margin-top: 60px;
  }

  .modal-button-margin {
    margin-top: 30px;
  }

  .business-modal-container {
    color: white;
  }

  .business-modal-content {
    background: #1d1d1d;
    border-radius: 40px;
  }

  .business-modal-content-form {
    display: block;
    width: 100%;
    /* padding: 20px 100px 60px 100px; */
    padding: 20px 20px 30px 20px;
  }

  .careers-modal-content-form {
    display: block;
    width: 100%;
    /* padding: 20px 100px 60px 100px; */
    padding: 20px 20px 30px 20px;
  }

  .modal-form-label {
    color: white;
  }

  .banner-image-careers {
    display: none;
  }

  .close {
    float: right;
    /* font-size: 3rem; */
    /* font-family: sans-serif; */
    /* font-weight: 300; */
    /* line-height: 1.4; */
    /* color: white; */
    /* text-shadow: 0 1px 0 #fff; */
    /* opacity: 1; */
    min-width: 0;
    transition: 0.6s;
    margin: 5%;
  }

  .business-cards-container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
  }

  .businessCard {
    padding: 40px;
    /* height: 350px; */
    min-height: 310px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .businessCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .businessCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .careersCard {
    padding: 40px;
    height: 300px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    position: relative;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .careersCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .careersCard:hover .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .businessCard-button {
    bottom: 10%;
    margin-top: 20px;
  }

  .about-us-cards {
    /* margin-top: 10%; */
  }

  .about-us-card {
    /* height: 530px; */
    /* background: url(/images/about-us-1.png);
    background-position: right bottom; */
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    border-radius: 40px;
    color: white;
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
  }

  .about-us-card-container {
    /* width: 54%; */
  }

  .large {
    font-size: 24px!important;
    padding-top: 0;
  }

  .about-us-card-image {
    position: relative;
    right: 0;
    bottom: 0;
    width: 100%;
  }

  .about-us-card-text {
    /* width: 100%; */
    color: #969696;
    font-weight: 300;
  }

  .about-us-header {
    margin-bottom: 20px;
    font-size: 6vw;
  }

  .about-us-subtitle {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 30px;
    line-height: 1.4;
  }

  .about-us-strapline {
    font-size: 18px;
    font-weight: 300;
    /* width: 80%; */
    color: white;;
    margin-top: 30px;
    line-height: 1.3;
  }

  .final-subtitle {
    padding-bottom: 0;
  }

  .home-page-grid-1 {
    /* background: url(/images/home-page-grid-1-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important; */
  }

  .home-page-grid-2 {
    /* background: url(/images/home-page-grid-2-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important; */
  }

  .home-page-grid-3 {
    background: url(/images/home-page-grid-3-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
  }

  .home-page-grid-4 {
    /* background: url(/images/home-page-grid-4-mobile.png)!important;
    background-position: bottom right!important;
    background-size: cover!important;
    background-repeat: no-repeat!important; */
  }

  .loyalty-manual-container {
    height: 500px;
    background: #252525;
    border-radius: 40px;
    margin-top: 30px;
    margin-bottom: 50px;
  }

  .loyalty-mobile-accordion {
    margin-top: 30px;
  }

  .cards-container-loyalty {
    display: grid;
    /* grid-gap: 40px; */
    grid-template-columns: 1fr;
    padding-top: 20px;
    padding-bottom: 40px;
  }

  .loyalty-banner {
    padding-bottom: 50px;
  }

  .loyaltyCard {
    padding: 20px;
    min-height: 220px;
    cursor: pointer;
    color: white;
    border-radius: 40px;
    background: rgb(19,19,19);
    background: linear-gradient(180deg, rgba(19,19,19,1) 0%, rgba(15,15,15,1) 52%, rgba(0,0,0,1) 100%);
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    text-align: center;
  }

  .loyaltyCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .card-text {
    font-weight: 300;
    color: #969696;
  }

  .delivery-banner-image {
    display: none;
  }

  .delivery-grid-image {
    display: none;
  }

  .delivery-grid-image-mobile {
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 0;
  }

  .nutritional-table-type {
    width: 33%;
  }

  .nutritional-table-100g {
    width: 33%;
  }

  .nutritional-table-portion {
    width: 33%;
  }

  .ca3-scroll-down-link {
    display: none;
  }

  .menu-title {
    width: 34%;
  }

  .menu-title-mobile {
    margin-bottom: 20px;
  }

  .side-menu-close {
    width: 20%;
    float: right;
    font-size: 20px;
  }

  .mobile-menu-button-container {
    position: sticky;
    /* bottom: 20px; */
    text-align: center;
    margin-bottom: 30px;
    z-index: 0;
  }

  .cards-container-main {
    margin-bottom: 100px;
  }

  .site-fixed-menu {
    position: fixed;
    color: white;
    width: 18%;
    left: 15%;
    padding-top: 30px;
  }

  .highlighted-accordion {
    background: grey;
  }

  .accordion-extension {
    transition: 0.5s;
  }

  .accordion-extension[aria-expanded=true] {
    color: #fff;
    background-color: #1b1b1b;
    transition: 0.5s;
    border-radius: 20px;
    box-shadow: 1px solid brown;
    -webkit-box-shadow: 0px 0px 0px 17px #1b1b1b;
    box-shadow: 0px 0px 0px 17px #1b1b1b;
    margin-bottom: 30px;
    margin-top: 30px;
    color: green;
  }

  .accordion-extension[aria-expanded=false] {
    background: none;
  }

  .site-fixed-menu {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000f5;
    overflow-x: hidden;
    padding-top: 30px;
    transition: 0.4s;
    transform: translateX(-97%);
    text-align: center;
    /* padding-left: 15%; */
    z-index: 2000;
  }

  .site-fixed-menu-accordion {
    text-align: left;
    padding-left: 10%;
    padding-right: 10%;
  }

  .site-fixed-menu-heading {
    font-weight: 400;
    font-size: 16px;
    line-height: 2.3;
  }

  .site-fixed-menu-subheadings {
    list-style: none;
    font-weight: 300;
    line-height: 2;
    color: white;
  }

  .site-fixed-menu-caret {
    opacity: 0.7;
    /* padding-right: 20px; */
    margin-right: 10px;
    width: 14px;
    color: white;
    transition: 0.5s;
  }

  .accordion-extension[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-information-button[aria-expanded=true] .site-fixed-menu-caret {
    transform: rotateX(180deg);
    transition: 0.5s;
  }

  .product-detail {
    display: grid;
  }

  .product-caret {
    transform: scaleX(1.5);
    padding-left: 10px;
  }

  .product-information {
    background: #0c0c0c;
    border-radius: 40px;
    /* display: grid; */
    height: 100%;
    transition: 0.6s;
    cursor: pointer;
  }

  .product-information-button {
    color: white;
    align-self: center;
    font-weight: 300;
    font-size: 4.5vw;
    /* background: #232323; */
  }

  .product-name-detail {

  }

  .product-name-detail-title {
    font-size: 24px;
    font-weight: 400;
    align-self: center;
    order: 1;
  }

  .product-name-detail-subtitle {
    font-size: 16px;
    font-weight: 300;
    order: 3;
    margin-bottom: 30px;
  }

  .product-allergens-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-allergens-subtitle {

  }

  .product-instructions {
    padding-top: 30px;
  }

  .product-instructions-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-instructions-subtitle {

  }

  .product-nutritional {
    /* padding-top: 30px; */
    /* padding-bottom: 30px; */
  }

  .product-nutritional-title {
    font-size: 22px;
    font-weight: 400;
  }

  .product-button-container {
    text-align: center;
  }

  .table {
    color: white;
    text-align: center;
    margin-top: 30px;
  }

  td {
    border-bottom:none!important;
    border-top:none!important;
    font-weight: 300;
  }

  th {
    border-top:none!important;
    border-bottom:none!important;
    font-weight: 400;
  }

  .table td:first-child {
    text-align: left;
  }

  .table tr:nth-child(odd) td:first-child {
    border-radius: 40px 0 0 40px;
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(2) {
    background: #151515;
  }

  .table tr:nth-child(odd) td:nth-child(3) {
    border-radius: 0 40px 40px 0;
    background: #151515;
  }

  .product-section-title {
    color: #525252;
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 300;
  }

  .product-section-subtitle {
    font-size: 22px;
  }

  .product-list {
    color: white;
    padding-top: 20px;
  }

  .product-list-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 12px;
    grid-row-gap: 40px;
    margin-bottom: 30%;
    align-items: center;
    justify-items: center;
  }

  .product {
    height: 150px;
    /* background: #4e4e4e; */
    width: 140px;
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  .product-image-container {
    height: 90%;
    display: grid;
    width: 100%;
    border-radius: 40px;
  }

  .product-pic {
    width: 100%;
    transition: 0.5s;
    border-radius: 40px;
    align-self: center;
    order: 2;
  }


  .product-name {
    text-align: center;
    align-self: end;
    font-size: 14px;
    line-height: 1.3;
  }

  .menuCard {
    height: 75px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
    cursor: pointer;
    color: white;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
  }

  .menuCard:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }


  .cards-container-main {
    margin-bottom: 100px;
  }

  .loyalty-icon {
    width: 20%;
  }

  .menu-icon {
    width: 40%;
  }

  .loyalty-card-title {
    font-size: 20px;
    line-height: 1.2;
  }

  .loyalty-card-text {
    font-weight: 300;
    font-size: 16px;
    color: #8c8c8c;
    line-height: 1.3;
  }

  .loyalty-card-icon {
    text-align: center;
    /* padding-bottom: 20px; */
  }

  .menu-card-header {
    padding-left: 40px;
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1.2;
  }

  .no-bottom-margin {
    margin-bottom: 0!important;
  }

  .home-page-grid-1 {
    background: url(/images/home-page-grid-1-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-2 {
    background: url(/images/home-page-grid-2-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-3 {
    background: url(/images/home-page-grid-3-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home-page-grid-4 {
    background: url(/images/home-page-grid-4-mobile.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .full-width-mobile {
  	left: 50%;
  	margin-left: -50vw;
  	margin-right: -50vw;
  	max-width: 100vw;
  	position: relative;
  	right: 50%;
  	width: 100vw;
  }

  .desktop-image-covid {
    display: none;
  }

  .desktop-image {
    display: none;
  }

  .first-card {
    height: 880px;
    background: url(/images/about-us-1-mobile.png);
    background-position: right bottom;
    background-size: cover;
    border-radius: 40px;
    color: white;
    padding: 40px;
    margin-bottom: 100px;
  }

  .second-card {
    height: 952px;
    background: url(/images/about-us-2-mobile.png);
    background-position: right bottom;
    background-size: cover;
    border-radius: 40px;
    color: white;
    padding: 40px;
    margin-bottom: 100px;
  }

  /* .about-us-header {
    margin-bottom: 25px;
  } */

  .cards-container-mobile {
    /* padding-top: 30%; */
  }

  .faq-title {
    color: white;
    margin-bottom: 30px;
    padding-top: 15px;
    font-size: 24px;
  }

  .faq-container {
    margin-bottom: 50px;
  }

  .faq-accordion-card {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #232323;
    border: none;
    color: white;
    min-height: 50px;
    padding: 15px 30px;
    border-radius: 40px;
    transition: 0.6s;
  }

  .faq-accordion-card:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .faq-accordion-card[aria-expanded=true] {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }



  .faq-accordion-heading {
    font-size: 18px;
    cursor: pointer;
    font-weight: 300;
  }

  .faq-accordion-card-body {
    padding-top: 15px;
    font-weight: 300;
  }

  .product-banner {
    height: 500px;
    position: relative;
    border-radius: 40px;
    color: white;
    padding: 30px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .products-container {
    margin-top: 50px;
  }

  .product-heading {
    margin-bottom: 20px;
    font-size: 8.5vw;
  }

  .product-subheading {
    font-size: 14px;
    color: #8c8c8c;
    font-weight: 300;
  }

  /* .product-information-button {
    color: white;
    width: 100%;
    align-self: center;
    background: #232323d6;
    font-weight: 300;
  } */

  .product-characteristic-title {
    font-size: 5vw;
    font-weight: 300;
    padding-bottom: 10px;
    color: white;
  }


  .product-caret {
    padding-left: 15px;
  }

  .vacancies-list {
    padding-left: 15px;
  }

  /* .collapsed {
    background: #191919cc;
  } */

  /* .product-information-button:hover {
    transform: none;
    background: #232323d6;
  }

  .product-information-button:active {
    transform: none;
    background: #232323d6;
  } */

  .product-information-card {
    background: #232323;
    border: none;
    color: white;
    border-radius: 20px;
    text-align: left;
  }

  .product-accordion-card {
    /* margin-top: 10px; */
    margin-bottom: 10px;
    /* background: #232323; */
    border: none;
    color: white;
  }

  .product-accordion-card-main {
    display: grid;
    transition: 0.6s;
    border-radius: 40px;
  }

  .product-accordion-card-main-heading {
    width: 100%;
    height: 47px;
    display: grid;
    text-align: center;
    transition: 0.6s
  }

  /* .product-accordion-card-main:hover {
    background: #171717;
    transition: 0.6s;
  } */

  .product-accordion-card-main-content {
    align-self: center;
  }

  .collapse-body-main {
    padding: 20px;
    /* padding-top: 0; */
  }

  .no-padding-above {
    padding-top: 0;
  }

  .product-characteristic-list {
    font-weight: 300;
    font-size: 16px;
    color: #afafaf;
    padding: 1.25rem;
  }

  /* .product-accordion-card {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #232323;
    border: none;
    color: white;
  } */

  .product-accordion-heading {
    color: green;
    text-decoration: underline;
    font-size: 20px;
    font-weight: 300;
  }

  .card-body-internal {
    padding-left: 0;
  }

  .product-button-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 15px;
  }

  .product-mochi-mobile {
    position: absolute;
    bottom: 0;
    width: 80%;
    text-align: center;
  }

  .product-matcha-mobile {
    position: absolute;
    bottom: 0;
    width: 80%;
    text-align: center;
  }

  .product-calpis-mobile {
    position: absolute;
    bottom: 0;
    width: 80%;
    text-align: center;
  }

  .product-yuzu-mobile {
    position: absolute;
    bottom: 0;
    width: 80%;
    text-align: center;
  }

  /* .product-mochi {
    background-image: url('/images/mochi-products-mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  } */

  /* .product-matcha {
    background-image: url('/images/matcha-products-mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  }

  .product-calpis {
    background-image: url('/images/calpis-products-mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  } */

  .footer-social {
    width:30px;
  }

  .footer-social:hover {
    filter: invert(14%) sepia(32%) saturate(1868%) hue-rotate(83deg) brightness(104%) contrast(96%);
  }

  #navbarText {
    text-align: right;
    margin-bottom: 30px;
  }

  .social-inline {
    display: inline-block;
  }

  a {
    color:white;
  }

  #logo-mobile {
    transition: 0.3s;
  }

  .homepageCard {
    height: 530px;
    /* background: black; */
    cursor: pointer;
  }

  .deliverypageCard {
    height: 650px;
    /* background: black; */
    cursor: pointer;
  }

  .card-column {
    padding: 0;
    margin-bottom: 20px;
  }

  .banner-image {
    display: none;
  }


  .top-half {
    height: 75%;
    border-radius: 40px;
    box-shadow: none;
    transition: 0.6s;
    transform: scale(1);
    position: relative;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .top-half:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .top-half:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .bottom-half {
    text-align: center;
    padding-top: 30px;
  }

  .left-half {
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    color: white;
    /* width: 60%; */
  }

  .delivery-left-half {
    padding: 30px;
    color: white;
    /* width: 70%; */
  }

  .tile-button {
    border: 2px solid green;
    border-radius: 40px;
    background: none;
    min-width: 190px;
    min-height: 50px;
    color: white;
  }

  .first-tile {
    background-image: url(/images/grid-1-mobile.png);
    background-position: bottom center;
  }

  .second-tile {
    background-image: url(/images/grid-2-mobile.png);
    background-position: bottom center;
  }

  .third-tile {
    background-image: url(/images/grid-3-mobile.png);
    background-position: bottom center;
  }

  .fourth-tile {
    background-image: url(/images/grid-4-mobile.png);
    background-position: bottom center;
  }

  .map-container {
    background: url(/images/home-page-map-mobile.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    height: 400px;
    border-radius: 40px;
    /* margin-bottom: 30px; */
    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
    transition: 0.6s;
    transform: scale(1);
    padding: 20px;
  }

  .map-container:hover {
    box-shadow: 0px 0px 11px 4px #0C7200;
    transform: scale(1.01);
    transition: 0.6s;
  }

  .map-container:hover + .bottom-half .inverse-button {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .full-width-menu {
    display: none;
  }

  .full-width-menu-mobile {

  }

  .mobile-button-container {
    text-align: center;
  }

  button {
    min-width: 250px;
    min-height: 50px;
    border-radius: 40px;
    border: none;
    /* margin-top: 40px; */
    transform: scale(1);
    transition: 0.6s;
  }

  button:focus {
    outline: none;
  }

  button:hover {
    transform: scale(1.05);
    transition: 0.6s;
  }

  button:hover .button-span {
    transform: scale(0.95);
    transition: 0.6s;
  }

  .sidenav-button {
    min-width: 150px;
    margin-top: 23px;
    font-size: 14px;
    min-height: 40px;
    border: 2px solid green;
    border-radius: 40px;
    color: white;
  }

  /* .tile-button {
    min-width: 180px;
    margin-top: 20px;
  } */

  .mainbanner-button {
    /* margin-top: 100px; */
  }

  .green-button {
    background: #00bd00;
  }

  .green-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .inverse-button {
    background: #000000;
  }

  .inverse-button:hover {
    background: #00bd00;
    border: none;
    transition: 0.6s;
  }

  .inverse-button div {
    color: white;
    font-weight: 500;
    transform: scale(1);
    transition: 0.6s;
  }

  .swiper-pagination {
    text-align: left!important;
    padding-left: 5%;
    padding-bottom: 2%;
  }

  .swiper-pagination-bullet {
    background: white!important;
    opacity: 0.8!important;
    width: 10px!important;
    height: 10px!important;
  }


  .swiper-pagination-bullet-active {
    background: #35bd00!important;
  }

  .image-block {
    /* background-image: url(images/homepageimage.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
    /* height: 534px; */
    padding: 0;
  }

  .left-side-text-banner {
    /* width: 45%; */
    /* color: white; */
    /* align-self: center; */
    /* margin-top: 20px; */
  }

  .swiper-container {
    height: 550px;
    border-radius: 40px;
    margin-bottom: 20px;
    /* margin-top: 55%; */
  }

  .swiper-slide {
    /* background: rgba(0, 0, 0, 0.65); */
    padding: 30px;
    background: rgb(40,40,40);
    background: linear-gradient(169deg, rgba(40,40,40,1) 0%, rgba(19,19,19,1) 52%, rgba(0,0,0,1) 100%);
  }

  .slider-title {
    color: white;
    line-height: 1;
    padding-bottom: 10%;
    font-size: 7.5vw;
  }

  .slider-subtitle {
    color: #9c694b;
    font-size: 34px;
    padding-bottom: 15px;
  }
  .slider-text {
    color: #ababab;
    font-size: 12px;
    padding-top: 5%;
  }

  .slider-image-right {
    position: absolute;
    width: 275px;
    right: 0;
    bottom: 0;
  }

  .card-title {
    font-size: 7.5vw;
  }

  .first-card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: 15%;
    width: 85%;
  }

  .second-card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    /* padding-right: 30px; */
    width: 60%;
  }

  /* .third-card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
  } */

  .fourth-card-image {
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 42vw;
  }


  /* .slide-1 {
    background-image: url('/images/slider-1-mobile.png');
    background-position: center right;
  }

  .slide-2 {
    background-image: url('/images/slider-2-mobile.png');
    background-position: center right;
  }

  .slide-3 {
    background-image: url('/images/slider-3-mobile.png');
    background-position: center right;
  } */

  .mobile-banner {
    padding-top: 8vw;
    margin-bottom: 10px;
    width: 100%;
  }

  .mobile-banner-delivery {
    margin-bottom: 10px;
  }

  .mobile-banner-itiscard {
    padding-top: 0;
  }

  .mobile-banner-covid {
    /* padding-top: 30px; */
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    margin-bottom: 10px;
    width: 100%;
  }

  .main-page-banner {
    /* height: 400px; */
    /* background-image: url('/images/home-page-mobile.png');
    background-position: center;
    background-size: cover; */
    /* display: grid; */
    margin-bottom: 30px;
  }

  .image-home-page-banner {
    width:100%;
    object-fit: contain;
    /* display: block;
    height: auto; */
  }

  .image-block-small {
    /* border: 15px solid transparent; */
  }

  .delivery-image {
    background-image: url(images/deliverypage.png);
  }

  .products-image {
    background-image: url(images/riviera.png);
  }

  .aboutus-image {
    background-image: url(images/about-1.png);
  }

  .business-image {
    background-image: url(images/business-title.png);
  }

  .careers-image {
    background-image: url(images/careers-bg.png);
  }

  .careers-job-image {
    background-image: url(images/black-banner-logo.png);
  }

  .responsibility {
    background-image: url(images/responsibility.png);
  }

  .covid {
    background-image: url(images/black-banner-logo.png);
  }

  .loyalty-image {
    display: none;
  }

  .on-top {
    /* z-index: 10000; */
    max-width:100%;
    background-color:black;
  }

  .bg-itisshop {
    background-image: url(images/onlineshop.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 238px;
  }

  .itiscard {
    height: 150px;
    margin: 10px;
  }

  .banner-container {
    position: absolute;
    bottom: 50px;
    left: 0px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
  }

  .img-container {
    width: 100%;
  }

  .button-banner {
    margin-top: 16px!important;
  }

  .page-title-text-title {
    font-weight: 300;
    font-size: 16px;
    color: #8c8c8c;
    margin-bottom: 8vw;
    line-height: 1.5;
    padding-top: 20px;
  }

  .page-title-text-text {
    font-weight: 300;
    font-size: 7.5vw;
    /* padding-top: 15px; */
    margin-bottom: 0;
    color: white;
    line-height: 1.3;
  }

  .green-text {
    color:green!important;
  }

  .page-text {
    font-weight: 300;
    font-size: 16px;
    padding-top: 30px;
    margin-bottom: 0;
  }



  .more-padding-top {
    padding-top: 60px;
  }

  .more-margin-top {
    margin-top: 60px;
  }

  .page-faq-title {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 30px;
  }

  .page-faq-subtitle {
    font-weight: 700;
    font-size: 16px;
  }

  .recipes-subtitle {
    font-weight: 300;
    font-size: 16px;
  }

  .benefits-subtitle {
    font-weight: 700;
    font-size: 16px;
    margin-top: 30px;
  }

  .page-faq-text {
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 35px;
  }

  .qualities-points {
    font-weight: 300;
    font-size: 16px;
  }

  p {
    font-family: inherit;
  }

  h1 {
    font-family: inherit;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 42px;
    align-items: center;
  }

  h2 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    align-items: center;
  }

  h3 {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 27px;
    line-height: 32px;
    margin-bottom:0;
  }

  h4 {
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    font-size: 25px;
    line-height: 29px;
    align-items: center;
  }

  .back-button-div {
    width: 50px;
    height: 50px;
    background: #92929273;
    position: absolute;
    bottom: 85px;
    left: 35px;
    border-radius: 50px;
  }

  .back-button-div:hover {
    background: green!important;
  }

  .back-button-div:active {
    background: red!important;
  }

  .back-button {
    position: absolute;
    bottom: -4px;
    left: -1px;
    color: white;
  }

  .loyalty-pic {
    width: 60%;
    margin-left: 25px;
    margin-top: 15px;
  }

  .nopadding-left-right {
    padding: 0;
  }

}

@media screen and (max-height: 450px) and (min-width: 700px) {
  .sidenav a {
    font-size: 20px!important;
    padding: 2% 0% 1% 10%!important;
  }

  #map {
    height: 84vh!important;
  }
  .menu-main {
    color: white;
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
  }

  .loyalty-banner {
    margin-top: 20px!important;
  }

  .products-main {
    padding-top: 0!important;
  }

  .product-calpis-mobile {
    width: 50%;
    right: 27%;
  }

  .slider-title {
    padding-bottom: 5%!important;
  }
  .swiper-container {
    height: 330px!important;
  }

  .sticky-top {
    height: 70px;
  }

  .main-page-banner {
    grid-template-columns: 50% 50%!important;
    margin-top: 0!important;
  }

  .mobile-banner-delivery + p {
    margin-top: 9%;
  }

  .delivery-banner-image {
    width: 50%!important;
    right: -3.2%!important;
  }

  .about-us-banner .full-width {
    top: -15px;
  }

  .about-us-cards {
    margin-top: 5%!important;
  }

  .loyalty-image {
    top: -1%!important;
    width: 22%!important;
  }

  .loyalty-banner {
    grid-template-columns: 60% 40%!important;
  }

  .appdownload-buttons-container {
    width: 70%!important;
  }

  .banner-image-careers {
    width: 30%!important;
  }

}

@media screen and (max-height: 450px) {
  .product-pic {
    width: 100%;
    transition: 0.5s;
    border-radius: 40px;
    align-self: center;
    grid-area: image;
}

  .products-modal-container {
    max-width: 100%;
    color: white;
    margin-left: 5%;
    margin-top: 7%;
    margin-right: 5%;
  }

  .products-modal-content {
    background: #000000;
    /* padding-right: 8%; */
  }

  .products-modal-close {
    /* padding-right: 20px;
    position: absolute;
    right: 0; */
    height: 40px;
  }

  .product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40% 60%;
    gap: 0px 0px;
    grid-template-areas:
        "image name"
        "image caption";
  }

  #map {
    height: 75vh!important;
  }
  .menu-main {
    color: white;
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
  }

  .products-main .page-title-text-text {
    z-index: 100;
    position: absolute;
  }
  .swiper-container {
    height: 410px;
  }

  .cards-container-mobile {
    padding-top: 5%;
  }

  .deliverypageCard {
    background: none;
  }

  /* .products-main .full-width-mobile {
    top: -2px;
  } */

  .careers-banner {
    display: grid;
    grid-template-columns: 45% 55%;
    margin-bottom: 30px;
    align-items: center;
    margin-top: 70px;
  }

  .right-side-image-careers {
    text-align: center;
  }

  .banner-image-careers {
    width: 37%;
    display: block;
    position: absolute;
    right: 30px;
    top: -6%;
  }

  .careers-banner .left-side-text-banner img {
    display: none;
  }

  .loyalty-banner {
    display: grid;
    grid-template-columns: 55% 45%;
    /* margin-bottom: 30px; */
    align-items: flex-start;
    margin-top: 30px;
  }

  .loyalty-image {
    position: absolute;
    top: 1%;
    right: 10%;
    width: 27%;
    align-self: center;
    display: block;
  }

  .appdownload-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 85%;
    grid-column-gap: 10px;
    margin-top: 20px;
    margin-bottom: 15px;
  }

  .appdownload-button {
    width: 100%;
  }

  .title-container {
    margin-top: 15%;
  }

  .about-us-cards {
    margin-top: 12%;
  }

  .business-banner {
    margin-top: 20px;
  }

  .businessCard {
    padding: 30px;
    min-height: 310px;
  }

  .businessCard-button {
    position: absolute;
    bottom: 10%;
  }

  .businessCard p {
    line-height: 1.4;
    font-size: 2.5vw;
  }

  .product-characteristic-title {
    font-size: 16px;
  }

  .mobile-banner {
    display: none;
  }

  .mobile-banner-delivery {
    display: none;
  }

  .delivery-banner-image {
    position: absolute;
    width: 60%;
    right: -2%;
    top: 0%;
    display: block;
  }

  .main-page-banner {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    margin-top: 5%;
    margin-bottom: 5%;
  }

  .banner-image {
    width: 100%;
    align-self: center;
    display: block;
  }

  .left-side-text-banner p {
    font-size: 3.5vw;
  }

  .left-side-text-banner h1 {
    font-size: 15px;
  }

  .left-side-text-banner .mobile-button-container {
    text-align: left;
  }

  .loyalty-left-side .mobile-button-container {
    text-align: left;
  }

  .mobile-button-container button {
    min-width: 180px;
    min-height: 40px;
    font-size: 14px;
  }

  .covid-banner {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: flex-start;
    margin-bottom: 1%;
    padding-top: 5%;
  }

  .row.covid-bg {
    margin-right: -5%;
    margin-left: -5%;
  }

  .row.covid-bg .col-lg {
    margin-left: 15px;
    margin-right: 15px;
  }

  .covid-cards {
    margin-top: 15%;
  }

  .covid-banner img {
    display: none;
  }

  .covid-bg {
    background: url(/images/covid-background-md.png);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
  }

}


.menu-section {
  text-align: center;
  padding-top: 40px;
}

.location-link {
  padding: 10px;
}

.smaller-burger {
  /* transform: scale(0.8); */
  /* z-index: 2; */
  min-width: 0px;
  min-height: 0px;
  border-radius: 40px;
  border: none;
  /* margin-top: 40px; */
  transition: 0s;
  background: #00bd00;
  transform: scale(0.9);
}

.green-border-button {
  border-radius: 30px;
  background: none;
  margin-top: 40px;
}

.green-background-border-button {
  border-radius: 30px;
  background: green;
  margin-top: 30px;
  border: none;
}

.no-margin-top {
  margin-top:0;
}

.green-background-border-burger-button {
  border-radius: 30px;
  background: green;
  border: none;
  margin-left: 13px;
  width:116px;
  font-size: 12px;
}

.white-background-border-burger-button {
  border-radius: 30px;
  background: white;
  border: none;
  margin-left: 13px;
  width:116px;
  font-size: 12px;
}

.less-padding-top {
  padding-top: 30px;
}

.additional-padding-top {
  padding-top: 40px;
}

.additional-padding-bottom {
  padding-bottom: 30px;
}

.no-margin-bottom {
  margin-bottom:0;
}

.form-margin-bottom {
  margin-bottom: 35px;
}

.checkbox-margins {
  margin-top:15px;
  margin-bottom:15px;
}

.btn-width {
  width: auto;
  min-width: 150px;
  min-height: 40px;
  margin-left: 0;
  margin-right: 0;
  font-size: 16px;
}


.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

#map {
  height: 55vh;
  border-radius: 20px;
  margin-bottom: 40px;
  background: url(/images/map-desktop.png);
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  display: grid;
  align-items: center;
  justify-items: center;
}


/* Styling for Autocomplete search bar */
    #pac-card {
      background-color: #4e4e4e6e;
      border-radius: 2px 0 0 2px;
      box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
      box-sizing: border-box;
      font-family: 'Ubuntu';
      margin: 10px 10px 0 0;
      -moz-box-sizing: border-box;
      outline: none;
    }

    #pac-container {
      /* padding-top: 12px; */
      padding-bottom: 12px;
      margin-right: 12px;
    }

    #pac-input {
      background-color: #4e4e4e;
      font-family: 'Ubuntu';
      color: white;
      font-size: 15px;
      font-weight: 300;
      margin-left: 12px;
      /* padding: 0 11px 0 13px; */
      text-overflow: ellipsis;
      border: none;
      width: 400px;
    }

    #pac-input:focus {
      border-color: #4d90fe;
    }

    #title {
      color: #fff;
      /* background-color: #acbcc9; */
      font-size: 18px;
      font-weight: 400;
      padding: 6px 12px;
    }

    .hidden {
      display: none;
    }

    /* Styling for an info pane that slides out from the left.
     * Hidden by default. */
    #panel {
      height: 100%;
      width: null;
      background-color: white;
      position: fixed;
      z-index: 1;
      overflow-x: hidden;
      transition: all .2s ease-out;
    }

    .open {
      width: 250px;
    }

    .place {
      font-family: 'open sans', arial, sans-serif;
      font-size: 1.2em;
      font-weight: 500;
      margin-block-end: 0px;
      padding-left: 18px;
      padding-right: 18px;
    }

    .distanceText {
      color: silver;
      font-family: 'open sans', arial, sans-serif;
      font-size: 1em;
      font-weight: 400;
      margin-block-start: 0.25em;
      padding-left: 18px;
      padding-right: 18px;
    }

    .storeRow {
      padding-bottom: 30px;
      position: relative;
    }

    .infoButton {
      position: absolute;
      right: 0;
      top: 20px;
      border: none;
      background: none;
    }

    .nearbyTitle {
      font-weight: 700;
      font-size: 0.9rem;
      /* margin-block-end: 0px; */
      padding-bottom: 20px;
    }

    .mobile-navbar {
      z-index: 1;
      /* background: black; */
    }

    /* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 100%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  /* z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #000000f5; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 100px; /* Place content 60px from the top */
  transition: 0.4s; /* 0.5 second transition effect to slide in the sidenav */
  transform: translateX(100%);
  text-align: right;
  padding-right: 70px;
}



/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: green;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  /* .sidenav {padding-top: 15px;} */
  .sidenav a {font-size: 18px;}
}

hr.burger {
  border-top: 1px solid black;
  border-radius: 50px;
  width:80%;
  margin-bottom: 25px;
  margin-top: 10px;
}

.homepageCard-image {
  height:240px;
  margin-bottom: 2.2rem;
}

.homepageCard-image-width{
  width: 100%;
  height:100%;
}

.homepageCard-description {
  padding: 0 24px 24px;
  display:block;
}

.homepageCard-title {
  font-weight: 200;
  font-size: 30px;
}

.homepageCard-text {
  font-weight: 300;
  font-size: 16px;
  margin-top: 10px;
}

.footer-menu {
  color:#000000;
  padding-left:15px;
  padding-bottom: 0px;
  font-size: 1.4rem;
  line-height: 4.0rem;
  font-weight: 300;
}

.footer-submenu {
  font-size: 0.9rem;
  line-height: 2.3;
  color: #bbb3b3;
}

/* a {
  color:black;
} */

a:active {
  color:green;
}

.drop-arrow {
  float: right;
  padding-right:45px;
  transition: 0.5s;
}

.drop-arrow-notmenu {
  /* padding-right:45px; */
  transition: 0.5s;
  /* padding-top: 10px;
  padding-bottom: 10px; */
}

.rotate {
  transform: rotateX(180deg);
}

.page-title-text {
  position: absolute;
  width: 100%;
  color: white;
  padding: 200px 20px 20px 20px;
}

.page-careers-title {
  font-weight: 500;
  font-size: 1.6rem;
  color:white;
}

.page-careers-text {
  font-weight: 300;
  font-size: 1rem;
  margin-bottom: 2rem;
  color:white;
}

.vacancyCard {
  border: 1px solid #eaeaead6;
  width: 100%;
  border-radius: 8px;
  /* box-shadow: 0 8px 15px 0 rgba(34,50,84,.06), inset 0 0 0 0px rgba(112,123,140,.15); */
  box-shadow: 0 0.2rem 0.8rem 0.1rem hsla(0,0%,42.4%,.11), 0 0.1rem 0.1rem 0 #ccc;
  margin-bottom:30px;
}

.vacancyCard-container {
  padding: 25px 25px 20px 25px;
}

.vacancyCard-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0px;
  line-height: 1;
}

.vacancyCard-subtitle {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0px;
  color: grey;
}

.vacancyCard-city {
  font-weight: 300;
  font-size: 1rem;
  margin-bottom: 0px;
  color: grey;
}

.vacancy-title {
  font-size: 2.5rem;
  padding-bottom: 20px;
}

.vacancy-subtitle {
  width: 100%;
  font-size: 20px;
  font-weight: 300;
}

a.nostyle:link, a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

.page-about-picture-container {
  height: 450px;
  background-color: black;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.store-modal-h3 {
  font-weight: 500;
  padding-top: 25px;
}

.store-modal-time {
  padding-top: 10px;
  font-weight: 300;
  font-size: 16px;
}

.store-modal-address-block {
  padding-top: 30px;
  line-height: 0.5;
  font-size: 16px;
  font-weight: 300;
}

.store-modal-phone-no {
  padding-top: 20px;
  font-size: 16px;
  font-weight: 400;
}

.store-modal-hours-block {
  padding-top: 40px;
}

.store-modal-hours-title {
  color: grey;
  border-bottom-color: #dad9d9;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.nobg-noborder {
  background: none;
  border: none;
}



.store-locator-link {
  color: white;
  /* padding-top: 40px; */
}

.store-locator-link-text {
  font-size: 20px;
}

.store-locator-link-pin {
  height:25px;
}

.black {
  color: black;
}

.extra-footer-menu {
  padding-bottom: 35px!important;
  color:black;
  background: #FFFFFF;
  padding-bottom: 5px;
  font-weight: 400;
  line-height:1.8;
  /* padding-left: 15px;
  padding-right: 15px; */
}

.social-media-banner {
  text-align: left;
  background-color:white;
  height:75px;
  padding-top:13px;
}

.margin-social-media-icon {
  margin: 8px;
}

.careers-city {
  margin-top: 60px;
  margin-bottom:30px
}

.no-padding {
  padding:0;
}

.padding-top-loyalty {
  padding-top:20px;
}

.margin-bot-button {
  margin-bottom: 50px;
}

.homepageCard-lineheight {
  line-height: 1.2;
}

.relative-img {
  position: relative;
}

.content-unwrapper {
  padding-left: 0;
  text-decoration: underline;
}

.card-bg {
  border:none;
  background:none;
}

.products-button {
  margin-right: 55%;
}

.covid-italics {
  padding-top: 30px;
  color: #656464;
  font-size: 1.3rem;
  font-style: italic;
}

.covid-block-padding {
  padding-bottom: 100px;
}

.nav-link:hover {
  color: green;
}

.vacancies-subtitle {
  font-weight: 700;
  font-size: 16px;
  margin-top: 40px;
}

.modal {
  /* text-align: center;
  padding: 0!important; */
  /* display: block; */
  overflow-y: auto;
  transition: 0.5s;
}

.modal-close {
  padding-right: 20px;
}

.faded-out {
  filter: opacity(0);
  transition: 0.5s;
}






.footer-menu-background {
  background-color: #FFFFFF;
}

.height-social-media-icon {
  height: 40px;
}

.careers-modal {
  font-size:26px;
  margin-top: 20px;
}

.modal-header-noborder {
  border-bottom: none;
}

.modal-close-button {
  position: absolute;
    right: 14px;
    background: #808080;
    border: none;
    font-size: 25px;
    border-radius: 20px;
    width: 40px;
    color: white;
    z-index: 1000;
}

.footer-separator {
    margin-bottom: 1rem;
    border: 0;
    border-top: 2px solid rgba(204,204,204,0.8);
    margin-top: 0;
}

.loyalty-separator {
  border: 0;
  border-top: 2px solid rgba(204,204,204,0.8);
  margin: 0;
  margin-top: 40px;
}

.delivery-button-margin {
  margin-bottom: 40px;
}

.loyalty-title {
  font-weight: 400;
  font-size: 20px;
}

.input-styled {
  border: none;
  border-bottom: 1px solid #80808066;
  border-radius: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: white;
}

::placeholder {
  color:#565656!important;
  font-weight: 400;
}

.modal-z {
  z-index: 3001;
}

.language-selector {
  list-style: none;
  font-size: 14px;
}

.language-selector-menu {
  min-width: 0;
  left: -15px;
  background: transparent;
  color: white;
}

.language-selector-link {
  font-weight: 300;
  font-size: 14px;
  cursor: pointer;
  color: white;
}

.language-selector-link:hover {
  background: transparent;
  color: green!important;
}

.burger-secondary-language {
  font-size: 18px!important;
}

input:focus {
  background-color: #1e1e1e!important;
  color: #066c0a!important;
  border-bottom: 1px solid #066c0a!important;
}

textarea:focus {
  background-color: #1e1e1e!important;
  color: #066c0a!important;
  border-bottom: 1px solid #066c0a!important;
}