/** Shopify CDN: Minification failed

Line 557:65 Unexpected "{"
Line 702:26 The "+" operator only works if there is whitespace on both sides

**/
.hero-banner-section {
  padding: 64px 0;
}

@media only screen and (max-width: 768px) {
  .hero-banner-section {
    margin-top: -40px; /* Moving hero banner under nav on small devices*/
  }

  .hero-banner-section {
    padding-top: 104px; /* Compensating for the negative margin */
  }
}

.hero-banner-section--block {
  margin-top: 0;
  padding-top: 64px; 
}

.hero-banner {
  padding: 16px 12px;
  border-radius: calc(var(--roundness)*2);
  border: 2px solid var(--colorBody);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

@media only screen and (min-width: 769px) {
  .hero-banner {
    padding: 32px 16px 16px;
  }
}

/* MOVE THESE INTO ACTUAL COLOUR SCHEME */
.hero-banner__border--none {
    border: 2px solid;
  border-color: #fff;
  border-color: var(--colorBody)
}

.hero-banner__border--1 {
  border-color: #ffffff;
  border-color: var(--colorScheme1Bg)
}
.hero-banner__border--2 {
  border-color: #2B5FAC;
  border-color: var(--colorScheme2Bg)
}
.hero-banner__border--3 {
  border-color: #CCE9FA;
  border-color: var(--colorScheme3Bg)
}
.hero-banner__border--4 {
  border-color: #FBE69F;
  border-color: var(--colorScheme4Bg)
}
.hero-banner__border--5 {
  border-color: #EB5324;
  border-color: var(--colorScheme5Bg)
}
.hero-banner__border--6 {
  border-color: #DE7E25;
  border-color: var(--colorScheme6Bg)
}
.hero-banner__border--7 {
  border-color: #F5DFDF;
  border-color: var(--colorScheme7Bg)
}
.hero-banner__border--8 {
  border: 2px solid;
  border-color: #93C2A2;
  border-color: var(--colorScheme8Bg)
}

.hero-banner__badge {
  position: absolute;
  top: 0%;
  right: 0;
  width: 60px;
  height: 60px;
  transform: translate(25%, -40%);
}

@media only screen and (min-width: 769px) {
  .hero-banner__badge {
    width: 75px;
    height: 75px;
    transform: translate(30%, -40%);
  }
}

.hero_banner__body .rte {
  margin-bottom: 2rem;
}

.hero-banner__body--narrow {
  max-width: 400px;
}

.hero-banner__body--tiny {
  width: 80%;
}

@media only screen and (min-width: 769px) {
  .hero-banner__body--tiny {
    width: 70%;
  }
}

.hero_banner__buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero_banner__buttons .btn {
  margin-bottom: 12px;
}


/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF Education Accordion
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/
/* .education-slider-section {
  padding: 60px 0;
  padding: var(--indexSectionPadding) 0;
} */

/* DEFAULT CLOSED */
.education-slider__header .education-slider__btn-text::before {
  content: 'Read more';
}

.education-slider__header .education-slider__btn-text::after {
  content: " \002B";
}

/* ACTIVE */
.education-slider__header.active .education-slider__btn-text::before {
  content: 'Read less';
}

.education-slider__header.active .education-slider__btn-text::after {
  content: " \2212";
}

.education-slider__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.education-slider__body-content {
  padding: 0.6rem;
}

.topic-subheading.text--large {
  font-size: 1.1rem;
}



/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF PAGE BLOCKS & SECTIONS
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/


/* ------------------------------------------------------------------------------------------------------------------------
FF SIMPLE BANNER
------------------------------------------------------------------------------------------------------------------------*/


.simple-banner-wrapper {
  padding-top: 16px;
  padding-bottom: 16px;
}

.simple-banner__heading, .simple-banner__text {
  margin: 0;
}


/* ------------------------------------------------------------------------------------------------------------------------
FF IMAGE TEXT BANNER + TEXT BUBBLE BANNER + TEXT BANNER
------------------------------------------------------------------------------------------------------------------------*/

.ff-feature-row {
  align-items: unset;
  /* margin: var(--pageWidthPadding) 0; */
  padding: calc(var(--pageWidthPadding)/2) 0;
}

/* ROW ITEM */ 
@media only screen and (min-width: 769px) {
  .ff-feature-row__item {
    flex: 0 1 48%;
    order: 1;
  }
}

@media only screen and (min-width: 959px) {
  .ff-feature-row__item {
    max-height: 700px;
  }
}

/* TEXT BLOCK */ 
.ff-feature-row__text {
  border-radius: calc(var(--roundness)*2);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media only screen and (min-width: 769px) {
  .ff-feature-row__text {
    padding: 48px;
  }
}

/* IMAGE */
@media only screen and (max-width: 768px) {
  .ff-feature-row__image {
    margin-bottom: 16px;
  }
}

.ff-feature-row__image .image-wrap, .ff-feature-row__image .video-wrap {
  border-radius: calc(var(--roundness)*2);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.ff-feature-row__image .image-wrap img {
  height: 100%;
  object-fit: cover;
}

/* FULL WIDTH BANNER */
.ff-feature-row__text--full {
  flex: 0 0 100%;
}

.ff-feature-row__text--full-inner {
  max-width: 700px;
}

/* END FF IMAGE TEXT BANNER + TEXT BUBBLE BANNER + TEXT BANNER
------------------------------------------------------------------------------------------------------------------------*/

/* ------------------------------------------------------------------------------------------------------------------------
FF ICON SLIDER/ SCROLLABLE */

.ff-icon-slider-section {
  color: var(--colorScheme6Bg) !important;
  overflow: hidden;
  min-height: 0;
}

@media only screen and (max-width: 768px) {
  .ff-icon-slider-section {
    padding: 0 0 16px !important; /*override index-section padding on mobile*/
    color: var(--colorScheme6Bg) !important;
  }
}

.ff-icon-slide {
  border: 1px solid var(--colorScheme6Bg);
  border-radius: calc(var(--roundness)*2);
  padding: 20px;
  background: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ff-icon-slider__heading {
  margin-top: 24px;
}

@media only screen and (min-width: 769px) {
  .ff-icon-slider__heading {
    display: none;
  }
}

.ff-icon-slide__image-wrapper {
  width: 60%;
}

.ff-icon-slide__text p { 
  font-size: 1rem;
  font-family: 'Recife Display';
  text-align: center;
}

@media only screen and (min-width: 769px) {
  .ff-icon-slide__text p { 
    font-size: 1.25rem;
  }
}


/* END FF ICON SLIDER / SCROLLABLE
------------------------------------------------------------------------------------------------------------------------*/

/* ------------------------------------------------------------------------------------------------------------------------
FF WAYS TO EARN BANNER */

.ways-to-earn-grid__description p {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-weight: var(--typeHeaderWeight);
  letter-spacing: var(--typeHeaderSpacing);
  line-height: var(--typeHeaderLineHeight);
  font-size: calc(var(--typeHeaderSize)*0.7);
  color: var(--colorScheme9Text);
}

@media only screen and (min-width: 769px) {
  .ways-to-earn-grid__description p {
    font-size: calc(var(--typeHeaderSize)*0.8);
  }
}

.ways-to-earn-grid {
  margin-bottom: 40px;
}

@media only screen and (min-width: 589px) {
  .ways-to-earn-grid .flex-grid__item--33 {
    flex-basis: 50%;
  }
}

@media only screen and (min-width: 959px) {
  .ways-to-earn-grid .flex-grid__item--33 {
    flex-basis: 33%;
  }
}

.ways-to-earn-item__container {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ways-to-earn-item__image {
  width: 50%;
  max-width: 80px;
}

.ways-to-earn-item__content {
  text-align: center;
  width: 100%;
  padding: 24px 0 0;
}

/* END FF WAYS TO EARN BANNER
------------------------------------------------------------------------------------------------------------------------*/

/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF Product Page
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/

@media only screen and (max-width: 768px) {
  .ff-product-template {
    max-width: 625px;
    margin: 0 auto;    
  }
}

/* ------- Product Info -------- */

@media only screen and (min-width: 769px) {
  .ff-product-grid__container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative; /* Required to align outside thumbnails */
  }
}

.ff-product-grid__item  {
  position: relative;
}

/* ------- Product Images -------- */


.ff-product__photos-wrapper {
  height: 100%;
  padding-bottom: 16px;
}

@media only screen and (min-width: 769px) {
  .ff-product__photos-wrapper {
    padding: 0;
  }
}

.ff-product__photos {
  height: 100%;
  display: flex;
  width: 100%;
  flex-direction: column;
}

@media only screen and (min-width: 769px) {
  .ff-product__photos {
    display: block;
  }
}

.ff-product__photos .flickity-page-dots { 
  display: none;
}

.ff-product__thumbs {
  flex: 1 1 100px;
  margin: 16px 0;
}

@media only screen and (min-width: 576px) {
  .ff-product__thumbs {
    flex: 1 1 180px;
  }
}

@media only screen and (min-width: 769px) {
  .ff-product__thumbs {
    display: block;
    position: absolute;
    width: 80px;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate(-100%, 0);
    flex: unset;
    margin: 0;
  }
}

.ff-product__thumbs .product__thumbs--scroller {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  align-items: center;
}

.ff-product__thumbs .product__thumb-item {
  margin: 0 8px 0 0;
  flex: 0 0 20%;
}

@media only screen and (min-width: 769px) {
  .ff-product__thumbs .product__thumbs--scroller {
    display: block;
    overflow-y: scroll;
  } 

  .ff-product__thumbs .product__thumb-item {
    margin: 0 0 8px 0;
  }
}


.ff-product__thumb .image-wrap {
  border-radius: var(--roundness);
  background: white;
}

.ff-product__thumb .image-wrap img {
  border: 2px solid transparent;
  border-radius: var(--roundness);
}

.ff-product__thumb:hover .image-wrap img {
  border: 2px solid var(--colorBtnPrimary);
}

.ff-product-image-main .image-wrap {
  border-radius: 32px;
  margin: 0 2px;
}

.ff-product-image-main[data-size] img {
  object-fit: cover !important;
  border-radius: 32px;
  border: 2px solid var(--colorBtnPrimary);
}

/* @media only screen and (min-width: 769px) { 
  .ff-product-image-main[data-size] img {
    border: 2px solid var(--colorBtnPrimary);
  }
} */

/* ------- Product Meta -------- */

.ff-product-single__meta {
  border: 2px solid var(--colorBtnPrimary);
  border-radius: calc(var(--roundness)*2);
  background-color: white;
  padding: 16px;
  text-align: center;
  height: 100%;
  display: flex;
}

@media only screen and (min-width: 769px) {
  .ff-product-single__meta {
    /* max-width: 465px; */
    flex-grow: 1;
    padding: 16px 32px;
  }
}

/* CHANGE THE NAME OF THIS CLASS */
.add-to-cart--featured {
  color: #fff;
  color: var(--colorBody);
  background-color: #de7e25;
  background-color: var(--colorScheme5Bg);
}

.add-to-cart--featured:hover, .btn.add-to-cart--featured:focus,  {
  background-color: #2B5FAC;
  background-color: var(--colorBtnPrimary);
}

.ff-product-single__form select {
  background-color: var(--colorScheme7Bg);
  border-color: var(--colorScheme7Bg);
}

.ff-product-single__qty-wrapper {
  border-radius: var(--roundness) !important;
}

.ff-product-single__qty-wrapper input {
  border: 1px solid var(--colorScheme7Bg) !important;
  background-color: var(--colorScheme7Bg) !important;
}

.ff-product-single__description {
  padding: 0;
  margin-bottom: 16px;
}

.ff-variant-wrapper--size select.ff-variant__input {
  padding: 12px 40px 12px 20px;
}

.ff-variant-wrapper--flavor .ff-variant__input {
  width: 100%;
}

.ff-product-single__select .product__quantity--dropdown {
  display: inline-block;
  width: 40%;
  margin-bottom: 20px;
}

.ff-product-single__select .variant-wrapper {
  display: inline-block;
  width: 40%;
}

.ff-product-single__select .variant-wrapper:first-child {
  display: inline-block;
  width: 100%;
}

.ff-featured-content__title {
  margin-bottom: 0;
}

.ff-product-single__form.product-single__form {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ff-featured-product-single__meta .product-single__header, .ff-product-single__form .product-single__header {
  margin-bottom: 0px;
}

.product-single__header br {
  display: none !important;
}

.product-single__form-price {
  margin-bottom: 16px !important;
}

.ff-product-single__form .product__price {
  font-size: 18px;
}

.ff-product-single__form .product__price--compare {
  font-size: 15px;
}


/* STAMPED REVIEWS */

.stamped-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

.product-grid .stamped-badge, .search-grid .stamped-badge {
  justify-content: flex-start !important;
} 

.stamped-badge-starrating {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.stamped-badge-starrating .stamped-fa {
  font-size: 12px !important;
}

.stamped-badge-caption {
  font-family: var(--typeBasePrimary) !important;
  font-size: 12px !important;
}

#stamped-main-widget {
  margin: 30px auto !important;
  max-width: 1500px;
  padding: 0 calc(var(--pageWidthPadding)*2);
}

html {
  scroll-padding-top: 80px; /* height of sticky header */
}

@media only screen and (max-width: 768px) { 
  #stamped-main-widget {
    /* margin: 0 var(--pageWidthPadding) !important; */
    padding: 0 var(--pageWidthPadding);
  }
}

/* REVIEW FORM PRODUCT PAGE */
.new-review-form input::placeholder {
  color: #93c2a2 !important;
}




/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF Rewards Page
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/

@media only screen and (max-width: 768px) {
  .ff-rewards-section {
    margin-top: -40px; /* Moving hero banner under nav on small devices*/
  }

  .ff-rewards-section .hero-banner {
    padding-top: calc(40px+64px); /* Compensating for the negative margin */
  }
}

.ff-rewards-section .hero-banner {
  color: var(--colorBtnPrimary);
}

.ff-rewards-section .simple-banner-wrapper {
  margin: 12px 0;
}

#animated-banner-ff-page-rewards-schema .animated-banner-wrapper {
  border-radius: 0;
}



/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF FOOTER
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/

.footer__block {
  flex: 0 0 50% !important;
  max-width: 100%;;
}

.footer__block.menu {
  flex: 0 0 100% !important;
  display: flex;
}

@media only screen and (min-width: 959px) {
  .footer__block {
    flex: 0 0 12% !important;
  }

  .footer__block.menu {

    flex: 0 0 75% !important;
  }
}

.ff-footer-menu {
  width: 100%;
  padding: 12px 0;
  display: flex;
  flex-wrap: wrap;
}

@media only screen and (min-width: 959px) {
  .ff-footer-menu {
    flex-wrap: nowrap;
    border: 0;
    padding: 0 0 0 24px;
  }
}

.ff-footer-menu-list {
  list-style-type: none;
  flex: 0 0 50%;
  margin: 8px 0;
  padding-left: 16px;
}

@media only screen and (min-width: 959px) {
  .ff-footer-menu-list {
    flex: 0 0 16.66667%;
    margin: 0;
  }
}

.ff-footer-menu-list .h6 {
  margin: 0;
}

.ff-footer-menu-list .p {
  font-size: 14px;
  font-weight: 300px;
}

a.footer__title,  .footer__menu a {
  padding: 0 0 8px 0 !important;
  margin: 0;
  font-weight: 400;
}

.ff-footer-menu__divider {
  border: 0;
  border-bottom: 2px solid var(--colorFooterBorder);
  width: 100vw;
  margin-left: calc(var(--pageWidthPadding)* -1);
  margin-bottom: 16px;
}

@media only screen and (min-width: 959px) {
  .ff-footer-menu__divider {
    display: none;
  }
}

.footer-image-wrapper img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--roundness);
}

.footer-image-wrapper--ff-footer-logo img {
  width: 92px;
  height: 92px;
}

@media only screen and (min-width: 959px) {
  .footer-image-wrapper img {
    width: 95px;
    height: 95px;
  }

  .footer-image-wrapper--ff-footer-logo img {
    width: 75px;
    height: 75px;
  }
}


/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF Education Slider + Ingredients Slider
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/

.education-slider-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media only screen and (min-width: 769px) {
  .education-slider-container {
    flex-direction: row;
    align-items: flex-start;
  }
}

.grid__item--hidden-mobile {
  display: none;
}

@media only screen and (min-width: 769px) {
  .grid__item--hidden-mobile {
    display: block;
  }
}

.topic-list__link.isSelected {
  color: black;
  border-bottom: 1px solid black;
}

.topic-list__link:not(.is-selected) {
  color: grey;
}

.topic-list, .topic-slider {
  background: white;
  padding: 24px;
  border-radius: 40px;
  width: 100%;
  margin: auto;
  text-align: left; 
}

.topic-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.topic-slider { 
  padding: 24px 24px 48px;
}

.topic-list__button.is-selected  {
  text-decoration: underline;
  opacity: 1;
  color: #000;
}

@media only screen and (min-width: 769px) {
  .topic-list, .topic-slider {
    min-height: 400px;
  }

  .topic-slider {
    padding: 24px;
  }

  .topic-list__button {
    display: flex;
    align-items: center;
    opacity: 0.4;
    text-align: left !important;
  }

  .topic-list__button:last-child {
    margin-bottom: 0;
  }

  .topic-list__button:hover, .topic-list__button:active {
    text-decoration: underline;
    opacity: 1;
  }

  .topic-list__button h4 {
    margin: 10px 0 6px;
    font-size: 24px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 959px) {
  .topic-list__button { 
    font-size: 1.1rem;
  }
} 

.topic-image {
  width: 92px;
  background-color: transparent;
  margin: 0 auto;
}

.topic-image .image-wrap {
  background: unset;
}

.testimonials-slide.topic-slide, .ingredients-slide  {
  width: 100%;
  padding-bottom: 24px;
  padding-bottom: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (min-width: 769px) {
  .testimonials-slide.topic-slide  {
    max-height: unset;
  }
}

.education-slider-section .flickity-page-dots {
  bottom: 0;
  left: 0;
  padding-bottom: 16px;
}

.topic-slider .flickity-viewport {
  height: 100%;
}

.topic-information--desktop {
  display: none;
}

.topic-information--mobile {
  text-align: center;
  flex: 1; /* Grow to fit container */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (min-width: 769px) {
  .topic-image {
    /* width: 55px; */
    margin: 0;
  }

  .topic-heading {
    display: none;
  }

  .education-slider-section .flickity-page-dots {
    display: none;
  }

  .topic-information--desktop {
    display: block;
    flex: 1; /* Grow to fit container */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .topic-information--mobile {
    display: none;
  }

  .topic-description {
    flex: 1; /*grow to accomodate changing text*/
    /* max-height: 100px; */
    overflow-y: scroll;
  }
}

.education-slider-section .grid__image-ratio {
  background-color: transparent;
}

.education-slider-section .grid__image-ratio img {
   border-radius: var(--roundness);
   border: none;
}

.grid-article[data-style=compact] .grid-article__image .image-wrap {
  border-radius: var(--roundness);
}

@media only screen and (max-width: 768px) {
  .topic-blog__header {
    width: 60%; 
    margin: 0 auto 16px;
  }
}

/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF Ingredients Slider
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/

.ingredients-image-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
}

.ingredients-list__button {
  display: block;
  opacity: 1;
  padding: 0;
}

.ingredients-list__button:hover img {
  border: 2px solid var(--colorScheme8Bg);
}

.ingredient-list__image-wrap img {
  border-radius: 24px;
}

.ingredient-list__button.is-selected img {
  border: 2px solid var(--colorScheme8Bg);
}

.ingredients-slider {
  border: 2px solid var(--colorScheme8Bg);
  background: white;
  padding: 0;
  border-radius: 40px;
  width: 100%;
  margin: auto;
  color: var(--colorScheme8Bg);
}

.ingredients-slider__divider {      
  width: 100%;
  height: 2px;
  border: 1px solid var(--colorScheme8Bg);
  margin: 0;
}

.ingredients-slider .ingredient-information {
  padding: 16px; 
}

@media only screen and (min-width: 959px) {
  .ingredients-slider .ingredient-information {
    padding: 16px 32px;
  }
} 


.ingredient-information a, .topic-description a {
  color: var(--colorScheme6Bg);
  word-wrap: break-word;
}

/* DEFAULT CLOSED */
.ingredients-slider__header .ingredients-slider__btn-text::before {
  content: 'Research links';
  font-weight: 700;
  color: var(--colorScheme8Bg);
}

.ingredients-slider__header .ingredients-slider__btn-text::after {
  content: " \002B";
  font-weight: 700;
  color: var(--colorScheme8Bg);
}

/* ACTIVE */
.ingredients-slider__header.active .ingredients-slider__btn-text::after {
  content: " \2212";
  font-weight: 700;
  color: var(--colorScheme8Bg);
}

.ingredients-slider__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.ingredients-slider__body-content {
  padding: 0.6rem;
}

.ingredient-subheading {
  margin-bottom: 0;
}


/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF FLYOUT BANNER
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/

@media only screen and (max-width: 958px) {
  .ff-flyout {
    display: none;
  }
}

@media only screen and (min-width: 959px) {
  .ff-flyout {
    position: absolute!important;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    display: flex;
    justify-content: center;
    padding: 8px;
    align-items: center;
    height: 200px;
  }
}

.ff-flyout-body-content {
  white-space: nowrap;
  padding: 8px;
  padding-right: 24px;
}

.ff-flyout-body-content .text--large {
  padding-right: 24px;
}

.ff-flyout-link a {
  white-space: nowrap !important;
}

.ff-flyout-links {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.ff-flyout-link {
  flex: 0 0 50%;
  padding: 0 8px 8px 0;
}

#ff-flyout-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  width: 25px;
  height: 100%;
  cursor: pointer;
}

.ff-flyout-button {
  color: var(--colorBody);
  transform: rotate(90deg);
}

.ff-flyout-button .h6 {
  margin: 0;
}

.ff-flyout-button-text--close {
  display: none;
  text-decoration: underline;
}

#ff-flyout-button-container.active .ff-flyout-button-text { 
  display: none;
}

#ff-flyout-button-container.active .ff-flyout-button-text--close { 
  display: inline-block;
}

.ff-flyout-body {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.4s ease-out;
  transition: opacity 0.7s ease;
}


/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF WHITE BACKGROUND IMAGES
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/


.grid__image-ratio img {
  background: white !important;
  border: none;
}

.ff-product__thumb .image-wrap img {
  border-color: var(--colorBody);
}

.ff-product-image-main[data-size] img {
  background: white;
}


/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF VIDEO SECTIONS
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/

.ff-feature-row__image .image-wrap, .ff-feature-row__image .video-wrap {
  border-radius: calc(var(--roundness)*2);
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.ff-feature-row__image .video-wrap video {
  height: 100%;
  max-width: 200%;
  object-fit: cover;
  margin-bottom: -25px;
}



/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF Typeform Quiz Embed
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/


#ff-typeform-quiz {
  border: 2px solid var(--colorScheme5Bg);
  border-radius: 32px;
  overflow: hidden;
  height: 500px;
}

@media only screen and (min-width: 769px) {
  #ff-typeform-quiz {
    height: 650px;
    width: 80%;
    margin: 0 auto;
  }
}

/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF Search Page
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/

.search-grid .grid-article[data-style=small] {
  flex-wrap: nowrap;
  flex-direction: column;
}

.search-grid .grid-article[data-style=small] .grid-article__image {
  flex-shrink: 1;
}

.search-grid .grid-article[data-style=small] .ff-grid_article__meta--blog {
  flex-shrink: 1;
}

/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF Sticky add to cart
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/


.og-form-content {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
}

.ff-atc-button {
  margin: auto 0 0 0;
}


.ProductFormFooter {
  width: 100%;
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  margin-bottom: 0;
  z-index: 4; /* Zindex of cart drawer is 5 */
  opacity: 0;
  -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
}

.ProductFormFooter.active {
  opacity: 1;
  -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
        -o-transform: none;
          transform: none;
}

.ff-product-form-footer {
  margin-bottom: 16px;
  padding: 0 0 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 32px;
  border: 2px solid var(--colorScheme5Bg);
  background: #FFF;
  color: var(--colorScheme5Bg);
  position: relative;
}

@media only screen and (min-width: 960px) {
  .ff-product-form-footer--mobile {
    background: var(--colorBody);
  }
}

.ff-product-form-footer__select {
  display: flex;
  flex-direction: row;
  flex: 1 1;
  justify-content: space-evenly;
}

.ff-product-form-footer__header, .ff-product-form-footer__price {
  margin: 0 0 -6px 0;
  padding: 0 24px 0 0;
}

.ff-product-form-footer__price {
  padding: 0 24px;
}

.ff-product-form-footer .product__price {
  font-size: 18px;
  color: var(--colorScheme5Bg);
} 

.ff-product-form-footer .variant__label {
  display: none;
}

.ff-product-form-footer__select--desktop .variant-input-wrap {
  margin: 0 !important;
}

.ff-product-form-footer--desktop select.ff-variant__input {
  padding: 8px 40px 8px 20px;
}

.ff-product-form-footer .ff-variant-wrapper--size {
  width: unset;
}

.ff-product-form-footer .ff-variant-wrapper--dropdown {
  padding: 0 4px;
}

.ff-product-form-footer select {
  border-color: var(--colorScheme5Bg) !important;
  background-color: #FFF;
  background-image: url(//flightfud.com/cdn/shop/t/43/assets/dropdown-chevron-2.svg);
}

.ff-product-form-footer__qty {
  color: var(--colorScheme5Bg);
  border: 1px solid var(--colorScheme5Bg) !important;
  border-radius: var(--buttonRadius) !important;
  background-color: #FFF;
  display: flex;
  align-items: center;
}

.ff-product-form-footer .ff-product-form-footer__qty-label {
  padding: 0 0 0 12px;
  font-size: 1rem !important;
  margin-bottom: 0;
}

.js-qty__wrapper.ff-product-form-footer__qty-wrapper {
  border: none;
  color: var(--colorScheme5Bg);
  max-width: 70px;
}

.ff-product-form-footer__qty-wrapper .js-qty__num {
  border: none;
}

.ff-product-form-footer--desktop .ff-product-form-footer__qty-wrapper .js-qty__num {
  padding: 8px 22px !important;
}

.ff-product-form-footer__qty .js-qty__adjust {
  color: var(--colorScheme5Bg);
  fill: var(--colorScheme5Bg);
}

.ff-product-form-footer__btn {
  flex: 1 1 22%;
}

@media only screen and (min-width: 960px) {
  .ff-product-form-footer__btn {
    max-width: 300px;
  }
}

/***********************************************************************************************************************
------------------------------------------------------------------------------------------------------------------------
FF Sticky Add to Cart (Mobile Form) 
------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************************/

.ff-product-form-footer--desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.ff-product-form-footer__select--mobile {
  display: none;
}

.ff-product-form-footer__select--mobile.is-active {
  position: absolute;
  width: 95%;
  padding: 16px;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, -15%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFF;
  border-radius: 32px;
  border: 2px solid var(--colorScheme5Bg);
  color: var(--colorScheme5Bg);
  text-align: center;
  font-size: 1.2rem;
  flex-direction: column;
}

.js-qty__wrapper.ff-product-form-footer__qty-wrapper--mobile {
  color: var(--colorScheme5Bg);
  background-color: var(--colorBody) !important;
  border: 1px solid var(--colorScheme5Bg) !important;
  border-radius: var(--buttonRadius) !important;
  display: flex;
  align-items: center;
  margin: 0 0 20px;
}

.ff-product-form-footer__qty-wrapper--mobile .js-qty__num {
  border: none;
}

.ff-product-form-footer__qty-wrapper--mobile .js-qty__adjust {
  color: var(--colorScheme5Bg);
  fill: var(--colorScheme5Bg) !important;
}

.form-body--mobile .variant-wrapper:first-child {
  width: 100%;
}

.form-body--mobile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.ff-product-form-footer--mobile {
  display: block;
}

@media only screen and (min-width: 960px) {
  .ff-product-form-footer--mobile {
    display: none;
  }
}

.ff-product-form-footer .ff-product-form-footer__select--mobile .variant__label {
  display: block;
  color: black;
  font-weight: 700;
}

.ff-product-form-footer__select--mobile select {
  background-color: var(--colorBody);
  background-image: url(//flightfud.com/cdn/shop/t/43/assets/dropdown-chevron-2.svg);
}

.ff-product-form-footer__select--mobile .ff-product-form-footer__qty {
  background-color: var(--colorBody);
}

.ff-product-form-footer__options {
  flex: 0 0 15%;
  color: var(--colorScheme5Bg);
  margin-right: 32px;
}

.ff-product-form-footer__options span {
  font-size: 1rem;
  text-transform: uppercase;
}

.ff-product-form-footer__options:after {
  content: '+'
}


.ff-product-form-footer__options.is-active:after {
  content: '-'
}