* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

article {
  -webkit-font-smoothing: antialiased;
  color: var(--colour-header-body);
  background-color: var(--colour-header-background);
  transition: opacity 200ms ease-in-out;
}
article p {
  margin-top: 0;
  margin-bottom: 8pt;
}
article li {
  margin-bottom: 4pt;
}
article a {
  color: unset;
}
article ul {
  padding-inline-start: 20px;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}
article .ql-size-small {
  font-size: 0.75em;
}
article .ql-size-large {
  font-size: 1.3em;
}
article div.menuBackground {
  display: none;
  color: var(--colour-controls-body);
  background-color: var(--colour-controls-background);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 11;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}
article div.menuBackground.shown {
  opacity: 1;
}
article div.menuBackground i {
  position: absolute;
  top: 32px;
  right: 10px;
  width: 45px;
  text-align: center;
  font-size: 1.5em;
  cursor: pointer;
}
article div.menu {
  display: none;
  color: var(--colour-footer-body);
  background-color: var(--colour-footer-background);
  position: fixed;
  width: calc(100% - 66px);
  height: 100%;
  padding: 30px;
  z-index: 12;
  left: -100%;
  transition: left 300ms ease-in-out;
}
article div.menu.shown {
  left: 0;
}
article div.menu div {
  font-size: 1.2em;
  padding: 15px 0;
  cursor: pointer;
  transition: opacity 200ms ease-in-out;
}
article div.menu div:hover {
  opacity: 0.6;
}
article header {
  justify-content: center;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9;
  color: var(--colour-header-body);
  background-color: var(--colour-header-background);
  transition: height 300ms ease-in-out;
  height: 11em;
  display: flex;
}
article header.short {
  height: 6em;
}
article header div.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1670px;
  text-align: left;
  padding: 0 202px;
  position: relative;
}
article header div.container div.menu-icon {
  display: none;
  width: 42px;
  text-align: center;
  padding: 8px;
  cursor: pointer;
}
article header div.container div.menu-icon i {
  font-size: 1.3em;
  vertical-align: middle;
}
article header div.container div.logoBox {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
article header div.container div.logoBox img.logo {
  height: 80%;
  max-width: 300px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left;
     object-position: left;
}
article header div.container div.navigation {
  display: flex;
  flex-grow: 3;
  flex-wrap: wrap;
  padding: 0 16px;
  justify-content: flex-end;
}
article header div.container div.navigation div {
  padding: 4px 0;
  margin: 0 12px;
  text-align: right;
  cursor: pointer;
  transition: opacity 200ms ease-in-out;
}
article header div.container div.navigation div:hover {
  opacity: 0.6;
}
article header div.container div.contact {
  flex-shrink: 0;
  position: relative;
}
article header div.container div.contact a {
  text-decoration: none;
}
article header div.container div.contact div.nophone {
  display: none;
  width: 42px;
  height: 42px;
  line-height: 44px;
  font-size: 1.5em;
}
article header div.container div.contact div.shopping-list-background,
article header div.container div.contact div.shopping-list {
  visibility: hidden;
  opacity: 0;
  transition: all 200ms ease-in-out;
}
article header div.container div.contact div.shopping-list-background.shown,
article header div.container div.contact div.shopping-list.shown {
  visibility: visible !important;
  opacity: 1;
}
article header div.container div.contact div.shopping-list-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  overscroll-behavior: contain;
}
article header div.container div.contact div.shopping-list {
  position: absolute;
  top: -1em;
  left: -1em;
  width: calc(100% + 2em);
  height: calc(100% + 2em);
}
article header div.container div.contact div.shopping-list div.tab {
  width: 100%;
  height: 100%;
  color: #222;
  background-color: #fff;
  border-radius: 3px 3px 0 0;
}
article header div.container div.contact div.shopping-list div.content {
  position: absolute;
  right: 0;
  width: 97vw;
  padding: 1em 0 1em 1.3em;
  max-width: 420px;
  color: #222;
  background-color: #fff;
  border-radius: 3px 0 3px 3px;
}
article header div.container div.contact div.shopping-list div.content div.item {
  padding-right: 1em;
}
article a.anchor {
  display: block;
  position: absolute;
  top: -90px;
  visibility: hidden;
}
article a.anchor.low {
  top: 0;
}
article section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--colour-2-body);
  background-color: var(--colour-2-background);
}
article section:nth-child(odd) {
  color: var(--colour-1-body);
  background-color: var(--colour-1-background);
}
article section.hero {
  background-color: black;
  position: relative;
  color: #fff;
  height: 57em;
  flex-direction: column;
}
article section.hero div.full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
article section.hero div.darken {
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.3);
}
article section.hero div.container {
  z-index: 4;
}
article section.hero div.container div.base div.tagline {
  padding: 0 50px;
  margin-bottom: 30px;
  width: 100%;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
article section.hero div.container div.base div.intro {
  padding: 0 50px;
  width: 100%;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
article section div.container {
  width: 100%;
  max-width: 1670px;
  padding: 4em 185px;
}
article section div.container div.base {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
article section div.container div.base div.sectionTitle {
  flex-basis: 100%;
  margin-bottom: 0.8em;
}
article section div.container div.base div.sectionTitle.noBottomMargin {
  margin-bottom: 0;
}
article section div.container div.base div.sectionSubtitle {
  flex-basis: 100%;
  margin-top: -1em;
  margin-bottom: 2em;
}
article section div.container div.base div.sectionSubtitle.noTitle {
  margin-top: 1em;
}
article section div.container div.base div.sectionSubtitle.noBottomMargin {
  margin-bottom: 0;
}
article section div.container div.base div.post {
  display: inline-block;
  position: relative;
  padding: 17px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
article section div.container div.base div.post div.img {
  border-radius: 3px;
}
article section div.container div.base div.post div.content {
  overflow: hidden;
  position: relative;
}
article section div.container div.base div.post div.content.has-more {
  cursor: pointer;
}
article section div.container div.base div.post div.content div.more-fade {
  display: none;
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
}
article section div.container div.base div.read-more {
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
}
article section div.container div.base div.read-more:active {
  background-color: rgba(0, 0, 0, 0.1);
}
article section div.container div.base div.service {
  width: 33.3333%;
}
article section div.container div.base div.service div.img {
  width: 100%;
  padding-top: 67%;
  margin-bottom: 24px;
  position: relative;
  background-color: #000;
  color: #fff;
}
article section div.container div.base div.service div.img div.title {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 3;
  border-radius: 3px;
}
article section div.container div.base div.service div.content div.buy {
  justify-content: space-between;
}
article section div.container div.base div.service div.content div.detail {
  opacity: 0.7;
  overflow: hidden;
}
article section div.container div.base div.promotion {
  width: 100%;
}
article section div.container div.base div.promotion div.imgHolder {
  width: 25%;
  display: inline-block;
}
article section div.container div.base div.promotion div.imgHolder div.img {
  width: 100%;
  padding-top: 67%;
  position: relative;
}
article section div.container div.base div.promotion div.content {
  display: inline-block;
  width: 70%;
  vertical-align: top;
  padding-left: 17px;
}
article section div.container div.base div.promotion div.content.titleOnly {
  width: 100%;
}
article section div.container div.base div.promotion div.content div.title {
  width: 100%;
  margin-bottom: 12px;
}
article section div.container div.base div.promotion div.content div.detail {
  opacity: 0.7;
}
article section div.container div.base div.sliderContainer {
  width: 90%;
  position: relative;
}
article section div.container div.base div.sliderContainer div.slider {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  -ms-overflow-style: none;
  font-size: 0;
}
article section div.container div.base div.sliderContainer div.slider::-webkit-scrollbar {
  display: none;
}
article section div.container div.base div.sliderContainer div.slider.snap {
  scroll-snap-type: x mandatory;
  /* Chrome Canary */
  scroll-snap-type: mandatory;
  /* Firefox */
  -ms-scroll-snap-type: mandatory;
  /* IE/Edge */
  -webkit-scroll-snap-type: mandatory;
  /* Safari */
  -webkit-scroll-snap-destination: 0% 0%;
}
article section div.container div.base div.sliderContainer div.sliderArrow {
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  font-size: 1em;
  opacity: 0.7;
  cursor: pointer;
}
article section div.container div.base div.sliderContainer div.sliderArrow:active {
  background-color: rgba(0, 0, 0, 0.1);
}
article section div.container div.base div.sliderContainer div.sliderArrow.left {
  left: -50px;
}
article section div.container div.base div.sliderContainer div.sliderArrow.right {
  right: -50px;
}
article section div.container div.base div.sliderContainer div.sliderArrow.disabled {
  opacity: 0.1;
  cursor: default;
}
article section div.container div.base div.sliderContainer div.sliderArrow i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
article section div.container div.base div.testimonial {
  width: 33.3333%;
  white-space: normal;
  scroll-snap-align: start;
  /* latest (Chrome 69+) */
  scroll-snap-coordinate: 0% 0%;
  /* older (Firefox/IE) */
  -webkit-scroll-snap-coordinate: 0% 0%;
  /* older (Safari) */
}
article section div.container div.base div.testimonial div.img {
  width: 100%;
  padding-top: 67%;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
article section div.container div.base div.testimonial div.img div.title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 0 24px;
  text-align: center;
}
article section div.container div.base div.testimonial div.summary {
  margin-bottom: 12px;
}
article section div.container div.base div.testimonial div.detail {
  opacity: 0.7;
}
article section div.container div.base div.testimonial div.client {
  margin-top: 12px;
  opacity: 0.7;
}
article section div.container div.base div.profile {
  width: 100%;
}
article section div.container div.base div.profile div.imgHolder {
  width: 25%;
  display: inline-block;
}
article section div.container div.base div.profile div.imgHolder div.img {
  width: 100%;
  padding-top: 67%;
  position: relative;
}
article section div.container div.base div.profile div.content {
  display: inline-block;
  width: 70%;
  vertical-align: top;
  padding-left: 34px;
}
article section div.container div.base div.profile div.content.titleOnly {
  width: 100%;
}
article section div.container div.base div.profile div.content div.title {
  width: 100%;
  margin-bottom: 12px;
}
article section div.container div.base div.profile div.content div.detail {
  opacity: 0.7;
}
article section.certifications {
  color: var(--colour-header-body);
  background-color: var(--colour-header-background);
  margin: 20px 0;
  flex-wrap: wrap;
}
article section.certifications img {
  max-width: 100px;
  max-height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 8px;
  vertical-align: middle;
  filter: grayscale(100%) contrast(120%);
}
article section div.movement {
  opacity: 0;
  transform: scale(1.1);
  transition: transform 800ms ease-in-out, opacity 800ms ease-in-out;
}
article section div.movement.from-top {
  transform-origin: top center 34px;
  transform: scale(1.04);
}
article section div.movement.shown {
  opacity: 1;
  transform: none;
}
article div.multi-image img {
  opacity: 0;
  z-index: 1;
  transition: opacity 800ms ease-in-out;
}
article div.multi-image img.shown {
  opacity: 1;
  z-index: 2;
}
article img.item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
}
article div.dots {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 5%;
  width: 100%;
  z-index: 3;
}
article div.dots div {
  width: 6px;
  height: 6px;
  margin: 0 3px;
  border-radius: 100%;
  background-color: #fff;
  opacity: 0.2;
  transition: opacity 300ms ease-in-out;
}
article div.dots div.active {
  opacity: 0.7;
}
article div.dots.hidden {
  display: none;
}
article footer {
  padding: 60px 20px;
  position: relative;
  text-align: center;
  color: var(--colour-footer-body);
  background-color: var(--colour-footer-background);
}
article footer div.phoneBlock {
  margin-bottom: 32px;
}
article footer div.phoneBlock div.button {
  display: inline-block;
}
article footer div.contact {
  display: inline-block;
}
article footer div.contact div.orgName {
  margin-bottom: 10px;
}
article footer div.contact div.social {
  font-size: 2em;
}
article footer div.contact div.social i {
  padding: 8px;
  opacity: 0.6;
  transition: opacity 200ms ease-in-out;
}
article footer div.contact div.social i:hover {
  opacity: 1;
}
article footer div.contact div.details {
  opacity: 0.7;
  line-height: 1.4em;
  padding-top: 10px;
}
article footer div.contact div.details div {
  margin-bottom: 4px;
}
article footer div.contact div.details strong {
  margin-right: 4px;
}
article footer div.contact div.details span {
  text-decoration: underline;
}
article footer div.contact div.sponsor {
  line-height: 1.4em;
  padding-top: 4em;
  font-size: 0.9em;
}
article footer div.contact div.sponsor a {
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 200ms ease-in-out;
}
article footer div.contact div.sponsor a:hover {
  opacity: 0.7;
}
article footer div.contact div.sponsor a img {
  height: 1em;
  margin-bottom: -1px;
}
article div.closeButton {
  text-align: center;
  cursor: pointer;
  transition: opacity 200ms ease-in-out;
}
article div.closeButton:hover {
  opacity: 0.6;
}
article div.button {
  position: relative;
  padding: 0 10px;
  border-radius: 18px;
  height: 36px;
  line-height: 36px;
  letter-spacing: 0.5px;
  color: var(--colour-controls-title);
  background-color: var(--colour-controls-background);
}
article div.button i {
  font-size: 0.85em;
}
article div.button div.cart-count {
  display: none;
  position: absolute;
  top: -11px;
  right: 5px;
  transform: translateX(50%);
  line-height: normal;
  color: var(--colour-3-title);
  background-color: var(--colour-3-background);
  border: 2px solid var(--colour-header-background);
  font-size: x-small;
  padding: 2px 5px;
  border-radius: 5px;
  font-weight: bold;
  transition: border-color 200ms ease-in-out;
}
article div.button div.cart-count.on-white-background {
  border-color: #fff;
}
article div.button.animated {
  animation-name: cartAnimation;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}
article div.contactus {
  position: absolute;
  left: 50%;
  bottom: 20px;
}
article div.contactus div {
  display: inline-block;
  position: absolute;
  transform: translateX(-50%);
  padding: 0 20px;
  border-radius: 16px;
  height: 32px;
  line-height: 32px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  background-color: var(--colour-header-background);
  cursor: pointer;
}
article div.contactus div span {
  margin-left: 2px;
}
article div.buy {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}
article div.buy div.sku {
  margin-top: 0.25em;
}
article div.buy div.addToCart {
  padding: 3px 10px 4px 10px;
  border-radius: 15px;
  color: var(--colour-controls-title);
  background-color: var(--colour-controls-background);
  text-align: center;
  cursor: pointer;
  transition: opacity 200ms ease-in-out;
}
article div.buy div.addToCart:hover {
  filter: brightness(1.1);
}
article div.buy div.addToCart.disabled {
  opacity: 0.3;
  filter: unset;
  cursor: default;
}
article div.sku {
  font-size: 0.7em;
  opacity: 0.3;
  line-height: 1em;
}
article div.shopping-list div.no-items {
  padding: 1em;
  opacity: 0.6;
  text-align: center;
}
article div.shopping-list div.has-items div.list-container {
  position: relative;
}
article div.shopping-list div.has-items div.list-container div.list {
  overflow-y: auto;
  max-height: 308px;
}
article div.shopping-list div.has-items div.list-container div.list div.item {
  display: flex;
  margin: 1em 0;
  text-align: left;
  align-items: center;
  font-size: 0.9em;
}
article div.shopping-list div.has-items div.list-container div.list div.item img {
  width: 55px;
  height: 45px;
  flex-shrink: 0;
  margin-right: 1em;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.details {
  flex-grow: 1;
  margin-right: 1em;
  line-height: 1.25em;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.details div.price {
  padding: 1px 0;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.details p {
  margin: 0;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons {
  display: flex;
  align-items: center;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.num-select {
  display: flex;
  align-items: center;
  text-align: center;
  margin-right: 1em;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.num-select div.dec,
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.num-select div.inc {
  font-weight: bold;
  width: 1.6em;
  border: 1px solid #bbb;
  cursor: pointer;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.num-select div.dec.disabled,
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.num-select div.inc.disabled {
  color: #ddd;
  cursor: default;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.num-select div.dec {
  border-radius: 3px 0 0 3px;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.num-select div.inc {
  border-radius: 0 3px 3px 0;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.num-select div.num {
  width: 2.5em;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.no-stock {
  margin-right: 13px;
  color: #888;
  display: none;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.buttons div.remove {
  padding: 2px 0.5em;
  cursor: pointer;
}
article div.shopping-list div.has-items div.list-container div.list div.item div.subcount,
article div.shopping-list div.has-items div.list-container div.list div.item div.subtotal {
  white-space: nowrap;
  display: none;
}
article div.shopping-list div.has-items div.list-container div.list div.item.no-stock img,
article div.shopping-list div.has-items div.list-container div.list div.item.no-stock div.details,
article div.shopping-list div.has-items div.list-container div.list div.item.no-stock div.subtotal {
  opacity: 0.5;
}
article div.shopping-list div.has-items div.list-container div.list div.item.no-stock div.buttons div.num-select {
  display: none;
}
article div.shopping-list div.has-items div.list-container div.list div.item.no-stock div.buttons div.no-stock {
  display: block;
}
article div.shopping-list div.has-items div.list-container div.list-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
article div.shopping-list div.has-items div.list-container div.list-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1em;
  background-image: linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
article div.shopping-list div.totals {
  display: flex;
  justify-content: space-between;
  margin: 1em 1em 0 0;
  align-items: center;
}
article div.shopping-list div.totals div.items {
  padding: 5px;
  line-height: 1em;
}
article div.shopping-list div.totals div.price {
  padding: 5px;
  text-align: center;
}
article div.shopping-list div.totals div.price div.shipping {
  font-size: 0.8em;
  font-weight: lighter;
  line-height: 1.1em;
  opacity: 0.6;
}
article div.shopping-list div.checkout-button {
  padding: 5px 11px;
  border-radius: 17px;
  color: var(--colour-controls-title);
  background-color: var(--colour-controls-background);
  text-align: center;
  cursor: pointer;
}
article div.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overscroll-behavior: contain;
  background-color: rgba(0, 0, 0, 0.7);
  visibility: hidden;
  opacity: 0;
  transition: all 200ms ease-in-out;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 20;
}
article div.modal.inApp {
  position: absolute;
}
article div.modal.shown {
  visibility: visible !important;
  opacity: 1;
}
article div.modal.postModal {
  background-color: rgba(0, 0, 0, 0.9);
}
article div.modal.postModal div.content {
  background-color: transparent;
  color: #fff;
}
article div.modal div.content {
  display: inline-block;
  text-align: left;
  width: 90%;
  max-width: 750px;
  max-height: calc(100% - 20px);
  color: #333;
  background-color: #fff;
  border-radius: 3px;
  overflow-y: auto;
  overflow-wrap: break-word;
  -webkit-overflow-scrolling: touch;
}
article div.modal div.content div.header {
  position: sticky;
  top: 0;
  width: 100%;
  text-align: right;
  z-index: 22;
}
article div.modal div.content div.header div.closeButton {
  display: inline-block;
  width: 48px;
  height: 48px;
}
article div.modal div.content div.header div.closeButton i {
  line-height: 48px;
  font-size: 1.3em;
}
article div.modal div.content div.mainContent h1 {
  margin: -16px 40px 0.5em 40px;
  letter-spacing: 0.5px;
}
article div.modal div.content div.mainContent div.post div.images {
  position: relative;
  overflow: hidden;
}
article div.modal div.content div.mainContent div.post div.images.animated {
  transition: height 200ms ease-out;
}
article div.modal div.content div.mainContent div.post div.images div.slider {
  position: relative;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
article div.modal div.content div.mainContent div.post div.images div.slider.snap {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  -webkit-scroll-snap-type: mandatory;
  -webkit-scroll-snap-destination: 0% 0%;
}
article div.modal div.content div.mainContent div.post div.images div.slider::-webkit-scrollbar {
  display: none;
}
article div.modal div.content div.mainContent div.post div.images div.slider img {
  top: 0;
  width: 100%;
  padding: 0 40px;
  display: inline-block;
  vertical-align: top;
  scroll-snap-align: start;
  scroll-snap-coordinate: 0% 0%;
  -webkit-scroll-snap-coordinate: 0% 0%;
}
article div.modal div.content div.mainContent div.post div.images div.arrow {
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  cursor: pointer;
}
article div.modal div.content div.mainContent div.post div.images div.arrow:hover {
  opacity: 1;
}
article div.modal div.content div.mainContent div.post div.images div.arrow.left {
  left: 0;
}
article div.modal div.content div.mainContent div.post div.images div.arrow.right {
  right: 0;
}
article div.modal div.content div.mainContent div.post div.images div.arrow.disabled {
  opacity: 0.1 !important;
  cursor: default;
}
article div.modal div.content div.mainContent div.post div.images div.arrow.hidden {
  display: none;
}
article div.modal div.content div.mainContent div.post div.images div.arrow i {
  text-shadow: 0 0 2px #888;
}
article div.modal div.content div.mainContent div.post div.texts {
  padding: 20px 40px;
}
article div.modal div.content div.mainContent div.post div.texts > div {
  margin-bottom: 0.6em;
}
article div.modal div.content div.mainContent div.post div.texts div.detail {
  opacity: 0.7;
}
article div.modal div.content div.mainContent div.post.promotion {
  padding: 0 40px 40px 40px;
}
article div.modal div.content div.mainContent div.post.promotion div.imgHolder {
  width: 33.3333%;
  display: inline-block;
}
article div.modal div.content div.mainContent div.post.promotion div.imgHolder div.img {
  width: 100%;
  padding-top: 67%;
  position: relative;
}
article div.modal div.content div.mainContent div.post.promotion div.imgHolder div.img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
article div.modal div.content div.mainContent div.post.promotion div.detailContent {
  display: inline-block;
  width: calc(66.6666% - 17px);
  vertical-align: top;
  padding-left: 17px;
}
article div.modal div.content div.mainContent div.post.promotion div.detailContent.titleOnly {
  width: 100%;
}
article div.modal div.content div.mainContent div.post.promotion div.detailContent div.title {
  width: 100%;
  margin-bottom: 12px;
}
article div.modal div.content div.mainContent div.contactPanel {
  display: flex;
  padding: 10px 40px 40px 40px;
}
article div.modal div.content div.mainContent div.contactPanel div.message {
  flex-basis: 50%;
  padding: 0 5% 10px 0;
}
article div.modal div.content div.mainContent div.contactPanel div.message.full {
  flex-basis: unset;
}
article div.modal div.content div.mainContent div.contactPanel div.message a {
  text-decoration: none;
  color: #48f;
}
article div.modal div.content div.mainContent div.contactPanel form {
  flex-basis: 50%;
  flex-grow: 1;
}
article div.modal div.content div.mainContent div.contactPanel form label {
  display: block;
  font-size: smaller;
  opacity: 0.7;
}
article div.modal div.content div.mainContent div.contactPanel form label em {
  color: red;
}
article div.modal div.content div.mainContent div.contactPanel form input,
article div.modal div.content div.mainContent div.contactPanel form textarea {
  display: block;
  width: 100%;
  font-size: 1em;
  padding: 5px;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
article div.modal div.content div.mainContent div.contactPanel form input.error,
article div.modal div.content div.mainContent div.contactPanel form textarea.error {
  background-color: #faa;
}
article div.modal div.content div.mainContent div.contactPanel form textarea {
  resize: none;
}
article div.modal div.content div.mainContent div.contactPanel form button {
  font-size: 1em;
  padding: 8px 16px;
  margin: 10px 0 0 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #eee;
  color: #333;
}
article div.shopModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  transition: all 200ms ease-in-out;
}
article div.shopModal.shown {
  visibility: visible !important;
  opacity: 1;
}
article div.shopModal div.shopping-list {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #222;
  display: flex;
  border-radius: 3px;
}
article div.shopModal div.shopping-list .checkout-title {
  position: absolute;
  top: 0;
  left: 24px;
}
article div.shopModal div.shopping-list div.closeButton {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.3em;
  z-index: 1;
}
article div.shopModal div.shopping-list div.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  vertical-align: top;
}
article div.shopModal div.shopping-list div.panel.left {
  flex-grow: 1;
  min-height: 0;
  padding-top: 64px;
}
article div.shopModal div.shopping-list div.panel.left > * {
  padding: 0 24px;
}
article div.shopModal div.shopping-list div.panel.right {
  flex-shrink: 0;
  width: 280px;
  padding: 74px 24px 24px 24px;
  background-color: #f0f0f0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
article div.shopModal div.shopping-list div.panel div.scrollable {
  overflow-y: auto;
}
article div.shopModal div.shopping-list div.panel h3 {
  margin: 24px 0 12px 0;
}
article div.shopModal div.shopping-list div.panel form {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}
article div.shopModal div.shopping-list div.panel form.checkbox {
  flex-direction: row;
  align-items: center;
}
article div.shopModal div.shopping-list div.panel form label {
  font-size: 0.8em;
  color: #aaa;
  line-height: 1.1em;
}
article div.shopModal div.shopping-list div.panel form label em {
  color: #f00;
}
article div.shopModal div.shopping-list div.panel form label:not(:first-of-type) {
  margin-top: 1em;
}
article div.shopModal div.shopping-list div.panel form div.separated {
  margin-top: 0.5em;
}
article div.shopModal div.shopping-list div.panel form input,
article div.shopModal div.shopping-list div.panel form textarea {
  font-size: 1.1em;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  padding: 0.2em 0;
}
article div.shopModal div.shopping-list div.panel form input:focus,
article div.shopModal div.shopping-list div.panel form textarea:focus {
  outline: none;
}
article div.shopModal div.shopping-list div.panel form input:focus-visible,
article div.shopModal div.shopping-list div.panel form textarea:focus-visible {
  outline: none;
}
article div.shopModal div.shopping-list div.panel form input[type=checkbox] {
  margin: 0 0.5em 0 0;
  width: 1em;
  height: 1em;
  cursor: pointer;
}
article div.shopModal div.shopping-list div.panel form textarea {
  resize: none;
}
article div.shopModal div.shopping-list div.panel div.options {
  display: flex;
  font-size: 0.9em;
  margin: 2em 0;
}
article div.shopModal div.shopping-list div.panel div.options div.option {
  flex-basis: 50%;
  padding: 3px;
  border: 1px solid var(--colour-controls-background);
  text-align: center;
  color: #aaa;
  cursor: pointer;
}
article div.shopModal div.shopping-list div.panel div.options div.option.selected {
  background-color: var(--colour-controls-background);
  color: var(--colour-controls-title);
}
article div.shopModal div.shopping-list div.panel div.options div.option:first-of-type {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
article div.shopModal div.shopping-list div.panel div.options div.option:last-of-type {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
article div.shopModal div.shopping-list div.panel div.payment-details img {
  width: 100%;
}
article div.shopModal div.shopping-list div.panel div.summary {
  flex-grow: 1;
  font-size: 0.95em;
}
article div.shopModal div.shopping-list div.panel div.summary div.summary-line {
  margin-bottom: 0.25em;
}
article div.shopModal div.shopping-list div.panel div.summary div.summary-line.total-line {
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid #ccc;
}
article div.shopModal div.shopping-list div.panel div.summary div.summary-line div.line {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  align-items: flex-end;
}
article div.shopModal div.shopping-list div.panel div.summary div.summary-line div.line div:nth-child(2) {
  white-space: nowrap;
}
article div.shopModal div.shopping-list div.panel div.stage-buttons {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 0.5em;
}
article div.shopModal div.shopping-list div.panel div.stage-buttons div.no-fill {
  color: #777;
  background-color: unset;
}
article div.shopModal div.shopping-list div.finished {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2em 1em;
  overflow-y: auto;
}
article div.shopModal div.shopping-list div.finished div.has-items {
  max-width: 420px;
}
article div.shopModal div.shopping-list div.finished div.has-items h1,
article div.shopModal div.shopping-list div.finished div.has-items h2 {
  margin: 0.5em 0;
}
article div.shopModal div.shopping-list div.finished div.has-items div.list-container {
  padding-top: 1em;
}
article div.shopModal div.shopping-list div.finished div.has-items div.list-container div.list {
  overflow-y: unset;
  max-height: unset;
}
article div.shopModal div.shopping-list div.finished div.has-items div.list-container div.list div.item.thin {
  margin: 0.5em 0;
}
article div.shopModal div.shopping-list div.finished div.has-items div.list-container div.list div.item div.buttons {
  display: none;
}
article div.shopModal div.shopping-list div.finished div.has-items div.list-container div.list div.item div.subcount {
  display: block;
  margin-right: 0.5em;
}
article div.shopModal div.shopping-list div.finished div.has-items div.list-container div.list div.item div.subtotal {
  display: block;
  flex-basis: 82px;
  flex-shrink: 0;
  text-align: right;
}
article div.shopModal div.shopping-list div.finished div.has-items div.list-container div.total-line {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ccc;
  padding-top: 0.5em;
}
article div.shopWait {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 30;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
article div.shopWait.shown {
  visibility: visible;
  opacity: 1;
}
article div.shopWait div.content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 60px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
article .dim {
  opacity: 0.5;
}

@keyframes cartAnimation {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@media screen and (max-width: 1200px) {
  article header > div.container {
    padding: 0 62px;
  }
  article section > div.container {
    padding: 4em 45px;
  }
}
@media screen and (max-width: 960px) {
  article header > div.container {
    padding: 0 47px;
  }
  article section > div.container {
    padding: 4em 30px;
  }
}
@media screen and (max-width: 768px) {
  article header > div.container {
    padding: 0 37px;
  }
  article section > div.container {
    padding: 4em 20px;
  }
}
@media screen and (max-width: 640px) {
  article header {
    height: 7.33em;
  }
  article header.short {
    height: 5em;
  }
  article header.withContactForm {
    height: 7.8em;
    padding-bottom: 20px;
  }
  article header div.container {
    padding: 0 20px;
    text-align: center;
  }
  article header div.container div.menu-icon {
    display: block;
  }
  article header div.container div.logoBox img.logo {
    max-width: 100%;
    padding: 0 8px;
    cursor: pointer;
  }
  article header div.container div.navigation {
    display: none;
  }
  article header div.container div.contact div.button {
    border-radius: 21px;
    width: 42px;
    height: 42px;
    line-height: 44px;
  }
  article header div.container div.contact div.button i {
    font-size: 1.2em;
  }
  article header div.container div.contact div.button .desktop-only {
    display: none;
  }
  article header div.container div.contact div.nophone {
    display: block;
  }
  article section.hero {
    height: 28em;
  }
  article section.hero div.container div.base div.tagline {
    padding: 0;
  }
  article section.hero div.container div.base div.intro {
    padding: 0;
  }
  article section div.container {
    padding: 2.67em 20px;
  }
  article section div.container div.base div.sectionTitle {
    margin-bottom: 20px;
  }
  article section div.container div.base div.sectionSubtitle {
    margin-top: 0;
    margin-bottom: 1em;
  }
  article section div.container div.base div.post {
    margin: 20px 0;
  }
  article section div.container div.base div.service,
  article section div.container div.base div.promotion,
  article section div.container div.base div.testimonial,
  article section div.container div.base div.profile {
    width: 100%;
    padding: 0;
  }
  article section div.container div.base div.service div.img,
  article section div.container div.base div.service div.titleOnly,
  article section div.container div.base div.promotion div.img,
  article section div.container div.base div.promotion div.titleOnly,
  article section div.container div.base div.testimonial div.img,
  article section div.container div.base div.testimonial div.titleOnly,
  article section div.container div.base div.profile div.img,
  article section div.container div.base div.profile div.titleOnly {
    width: 100%;
    margin-bottom: 14px;
  }
  article section div.container div.base div.service div.imgHolder,
  article section div.container div.base div.service div.content,
  article section div.container div.base div.promotion div.imgHolder,
  article section div.container div.base div.promotion div.content,
  article section div.container div.base div.testimonial div.imgHolder,
  article section div.container div.base div.testimonial div.content,
  article section div.container div.base div.profile div.imgHolder,
  article section div.container div.base div.profile div.content {
    width: 100%;
    padding-left: 0;
  }
  article section div.container div.base div.service div.summary,
  article section div.container div.base div.promotion div.summary,
  article section div.container div.base div.testimonial div.summary,
  article section div.container div.base div.profile div.summary {
    margin-bottom: 10px;
  }
  article section div.container div.base div.service div.client,
  article section div.container div.base div.promotion div.client,
  article section div.container div.base div.testimonial div.client,
  article section div.container div.base div.profile div.client {
    margin-top: 10px;
  }
  article section div.container div.base div.sliderContainer div.slider {
    width: 100%;
  }
  article section div.container div.base div.sliderContainer div.sliderArrow {
    width: 30px;
  }
  article section div.container div.base div.sliderContainer div.sliderArrow.left {
    left: -30px;
  }
  article section div.container div.base div.sliderContainer div.sliderArrow.right {
    right: -30px;
  }
  article section div.container div.base div.testimonial {
    padding: 0 17px;
  }
  article div.buy {
    justify-content: space-between;
  }
  article footer {
    padding: 40px 20px;
  }
  article div.modal > div.content {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: unset;
  }
  article div.modal > div.content div.mainContent h1 {
    margin: -16px 10vw 0.5em 10vw;
  }
  article div.modal > div.content div.mainContent div.post div.imgHolder {
    width: 100% !important;
  }
  article div.modal > div.content div.mainContent div.post div.imgHolder div.img,
  article div.modal > div.content div.mainContent div.post div.imgHolder div.titleOnly {
    width: 100%;
    margin-bottom: 14px;
    border-radius: 3px;
  }
  article div.modal > div.content div.mainContent div.post div.detailContent {
    width: 100% !important;
    padding-left: 0 !important;
  }
  article div.modal > div.content div.mainContent div.contactPanel {
    display: block;
    padding: 10px 10vw;
  }
  article div.modal > div.content div.mainContent div.contactPanel div.message {
    padding-right: unset;
  }
  article div.modal.postModal > div.content > div.mainContent {
    padding: 0;
  }
  article div.modal.postModal > div.content > div.mainContent div.post {
    margin-bottom: 40px;
  }
  article div.modal.postModal > div.content > div.mainContent div.post div.images > div.slider > img {
    padding: 0;
  }
  article div.modal.postModal > div.content > div.mainContent div.post div.images > div.arrow {
    width: 10vw;
  }
  article div.modal.postModal > div.content > div.mainContent div.post div.texts {
    padding: 20px 10vw;
  }
  article div.shopModal > div.shopping-list {
    flex-direction: column;
    border-radius: unset;
  }
  article div.shopModal > div.shopping-list div.panel {
    height: unset;
  }
  article div.shopModal > div.shopping-list div.panel.right {
    width: unset;
    padding: 24px;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
  }
  article div.shopModal > div.shopping-list div.panel.right div.summary {
    padding-top: unset;
  }
}
@media screen and (max-width: 425px) {
  article div.shopping-list div.has-items div.list-container div.list div.item img {
    width: 20%;
  }
}
@media screen and (max-height: 480px) {
  article header > div.container > div.contact > div.shopping-list > div.content > div.has-items > div.list-container > div.list {
    max-height: calc(100vh - 180px);
  }
  article div.shopModal > div.shopping-list {
    width: 100%;
    max-width: unset;
    height: 100%;
    max-height: unset;
  }
}
@media screen and (min-width: 769px) and (min-height: 769px) {
  article div.shopModal > div.shopping-list {
    width: 768px;
    height: 768px;
  }
}/*# sourceMappingURL=style.css.map */