/* ========================================================================
   Custom Media Queries                                Author: Mike Hopkins
 ========================================================================== */
/*
 * --- 1.0.0
 * --- Modified for UIKit Breakpoints
 * --- uk-hidden@s  - Only affects device widths of 640px and larger.
 * --- uk-hidden@m  - Only affects device widths of 960px and larger.
 * --- uk-hidden@l  - Only affects device widths of 1200px and larger.
 * --- uk-hidden@xl - Only affects device widths of 1600px and larger.
 */
/* ========================================================================
   Transition Mixin                                    Author: Mike Hopkins
 ========================================================================== */
/*
 * --- 1.0.0
 * --- Usage Example
 * --- .element { @include transition(background-color 0.2s ease); }
 */
body {
  background: #72e2e0;
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #72e2e0), color-stop(20%, #6ac9c8), color-stop(80%, #6ac9c8), color-stop(100%, #72e2e0));
  background: linear-gradient(to bottom, #72e2e0 0%, #6ac9c8 20%, #6ac9c8 80%, #72e2e0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#72E2E0", endColorstr="#72E2E0", GradientType=0 );
}

.heroInfoWrap {
  opacity: 0;
}

.heroWrap,
.productItem {
  z-index: 101;
  position: relative;
}

.hero-logo {
  width: 200px;
  height: 200px;
}
@media (max-width: 960px) {
  .hero-logo {
    width: 150px;
    height: 150px;
  }
}

.hero-strapline {
  width: 360px;
  height: 50px;
  padding: 25px;
}
@media (max-width: 960px) {
  .hero-strapline {
    max-width: 250px;
    height: 42px;
  }
}

.backgroundSquare,
.maskSquare {
  fill: #ffffff;
}

.accentSquare,
.leaf-group2-a,
.leaf-group2-b,
.leaf-group2-c,
.leaf-group3-a,
.leaf-group3-b,
.leaf-group3-c {
  fill: #FFE98E;
}

.leaf-complex,
.leaf-group1-a,
.leaf-group1-b {
  fill: #1A1818;
}

/*
.backgroundSquareWrap  {
    -webkit-filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.2));     
    filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.2));
}
*/
.hero-strapline,
.footer-strapline {
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.1));
}

.heading--shadow {
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.indredient-measure {
  text-align: right;
  width: 55px;
}

.logo-bg {
  fill: #1A1818;
}

.cls-2,
.logo-s,
.logo-l {
  fill: #ffffff;
}

.strapline-bg {
  fill: #FFE98E;
}

.strapline-txt {
  fill: #1A1818;
}

.strapline-leaf {
  fill: #6AC9C8;
}

.graphic-lines {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
}
.graphic-lines .grid-container {
  height: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: 75px 1fr 75px;
  grid-template-rows: 1fr;
  grid-template-areas: "left center right";
}
@media (max-width: 960px) {
  .grid-container {
    grid-template-columns: 25px 1fr 25px;
  }
}
@media (max-width: 640px) {
  .grid-container {
    grid-template-columns: 0px 1fr 0px;
  }
}

.left {
  grid-area: left;
}

.center {
  grid-area: center;
}

.center--lines {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 640px) {
  .center--lines {
    border-left: none;
    border-right: none;
  }
}

.right {
  grid-area: right;
}

.section-separator-svg {
  width: 25px;
  height: 65px;
}
.section-separator-svg svg {
  position: relative;
  left: 2px;
  vertical-align: middle;
  fill: rgba(255, 255, 255, 0.35);
}

.ingredient-button {
  padding: 0 30px 0 15px;
}
.ingredient-button .uk-icon {
  position: relative;
  top: -1px;
  margin: 0 5px 0 0;
}

@media (max-width: 960px) {
  .productAnimationWrap {
    width: 400px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  .productAnimationWrap {
    width: 100%;
    margin: 0 auto;
  }
}
.productAnimationWrap svg {
  transform-origin: 50% 50%;
}

.productInfoWrap {
  max-width: 440px;
}
@media (max-width: 960px) {
  .productInfoWrap {
    padding: 30px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  .productInfoWrap {
    padding: 30px;
  }
}

h1.uk-heading-line--custom {
  font-size: 50px !important;
}

.uk-button-group .uk-button:first-of-type {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.uk-button-group .uk-button:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

div.uk-button-group > a.uk-button:first-of-type {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

div.uk-button-group > a.uk-button:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}/*# sourceMappingURL=custom.css.map */