:root {
  --red: #CA2031;
  --darkgrey: #666666;
  --lightblue: #88C6E9;
  --darkblue: #001F5C;
  --black: #0A0A0A;
  --white: #FFFFFF;
  --lightgrey: #F2F2F2;
  --mediumgrey: #DDDDDD;
  --branddarkgrey: #333333;
  --pink:#E34E6D;
  --purple:#22135F;
}
html { 
	scroll-behavior: smooth;
	font-size:18px;
}

body {
	font-family:'ff-tisa-pro', sans-serif;
	font-weight:normal;
	color:var(--darkgrey);
}
h1, h2, h3, h4, h5, h6 {
	font-family:'Brandon-Grotesque-Bold', sans-serif;
	font-weight:normal;
	color:var(--darkgrey);
}
h1.Brandon-Grotesque-Black, h2.Brandon-Grotesque-Black, h3.Brandon-Grotesque-Black, h4.Brandon-Grotesque-Black, h5.Brandon-Grotesque-Black, h6.Brandon-Grotesque-Black {
	font-family:'Brandon-Grotesque-Black', sans-serif !important;
	font-weight:normal;
	color:var(--darkgrey);
}

h1.display-5 {
	line-height:1.1
}

.red, .text-red {
  color:var(--red) !important;	
}
.dark-grey, .text-dark-grey, .text-dark-grey a {
  color:var(--darkgrey) !important;	
}
.light-blue, .text-light-blue {
   color:var(--lightblue) !important;
}
.dark-blue, .text-dark-blue {
   color:var(--darkblue) !important;
}
.pink {
	color:var(--pink) !important;
}
.purple {
	color:var(--purple) !important;
}
.bg-red {
   background-color:var(--red);
}
.bg-pink {
   background-color:var(--pink);
}
.bg-purple {
   background-color:var(--purple);
}
.bg-light-blue {
   background-color:var(--lightblue);
}
.bg-light-grey {
   background-color:var(--lightgrey);
}
.border-red {
	border:1px solid var(--red) !important;
}
a {
	color:var(--red);
}
main a:hover {
	color:var(--darkgrey);
}
.nowrap {
  white-space: nowrap;
}

/* Header */

#headerwrapper {
	background-color:var(--white);
}
a.nav-link {
	font-family:'Brandon-Grotesque-Bold', sans-serif;
	font-weight:normal;
	color:var(--red);
	font-size:24px;
}
.navbar {
	padding:0;
}
.navbar-toggler {
	border:0 !important;
	outline:0 !important;
	box-shadow:none !important;
}
.navbar-expand-xl .navbar-nav .dropdown-menu {
    margin: 0;
    padding: 0;
    border: 0;
}
#dropdown-menu-content {
	background-color:var(--lightgrey);
	width:650px;
	color:var(--red);
	border:1px solid var(--mediumgrey);
	border-top:0;
	padding:20px;
}
#headernavbar .nav-item:hover, #headernavbar a.dropdown-toggle.show  {
	background-color:var(--lightgrey);
}
a.dropdown-row {
	text-decoration:none;
}
.dropdown-row:not(:last-child) {
	border-bottom:1px solid var(--mediumgrey);
}
.dropdown-row h4 {
	font-size:22px;
	color:var(--red);
}
.dropdown-row p {
	font-size:14px;
	color:var(--black);
}
.dropdown-row .bi-chevron-right {
	font-size:18px;
	color:var(--red);
	-webkit-text-stroke: 1px;
     text-stroke: 1px;
}
#headernavbar .utility-items a.nav-link i {
	color:var(--darkgrey);
}
#headernavbar .utility-items a.nav-link i:hover, #headernavbar .utility-items a.nav-link:hover i {
	color:var(--red);
}
#dropdown-menu-content .row:hover {
	background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
	color:var(--black);
	text-decoration:underline;
}
#Product-Tub-Used-Wrap a.btn {
	font-size:1rem;
}
/* END Header */


/* Carousel */

#HomePageCarousel {
	padding-top:80px;
	padding-bottom:80px;
}
.carousel-control-next, .carousel-control-prev {
	width:8%;
}
.carousel-indicators [data-bs-target] {
  width: 42px;
  height: 18px;
  border-radius: 20px;
  background-color: #fff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* END Carousel */


.Home-Banner-Image-Desktop {
	width:100%;
	height:auto;
	top:0px;
	left:0px;
}
#Home-Banner-Image-Mobile-Wrap {
	height:50vh;
}
/*
.top {
  animation-name: fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}
*/
.ImageFader {
  /*-webkit-animation: fade 24s infinite;
  animation: MultiFade 24s infinite;*/

	/*animation: MultiFade 12s infinite;*/
	opacity:1;
    -webkit-animation-name: MultiFade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: MultiFade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
	animation-fill-mode: backwards;

}

#fadeImage1{
	animation-delay: 0s;
}

#fadeImage2{
	animation-delay: -4s;
}

#fadeImage3{
	animation-delay: -2s;
}

@keyframes MultiFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  25%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}


@-webkit-keyframes MultiFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  25%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}




/*
@keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
*/
#Home-Landing-Introduction-Wrap {
   position: relative;
  margin-top: -90px; 
  display: inline-block;
  padding-top: 8px;
  padding-bottom:30px;
  padding-left:40px;
  padding-right:40px;  
  background: url("../images/oval-recipe-listing.svg") no-repeat;
  background-color: transparent; /* let the SVG define the shape */
  background-position-x:center;
  text-align: center;
}



/* Content */

main {
	padding-top:120px;
 }
#full-width-banner-image-wrap img, .product-section-banner-image-wrap img {
  height: 65vh;
  object-fit: cover;
  width: 100%;
}
.product-section-banner-image-wrap img {
  height: 65vh;	
}
.btn {
	transition:none;
}
a.btn, button.btn {
	background-color:var(--red);
	color:var(--white);
}
a.btn-white, button.btn-white {
	background-color:var(--white);
	color:var(--red);
}
a.btn-dark-blue, button.btn-dark-blue {
	background-color:var(--darkblue);
	color:var(--white);
}
a.btn:hover, button.btn:hover {
	background: radial-gradient(circle,rgba(242, 78, 78, 1) 0%, rgba(202, 32, 49, 1) 100%);
	color:var(--white);
}
a.btn-white:hover, button.btn-white:hover {
	background-color:var(--darkgrey);
	background:var(--darkgrey);
	color:var(--white) !important; 
	border:1px solid var(--darkgrey) !important;
}
a.btn-dark-blue:hover, button.btn-dark-blue:hover {
	background-color:var(--white);
	background:var(--white);
	color:var(--darkblue);
}
.btn:focus-visible {
	color:var(--red);
	background-color:var(--white);
	border:1px solid var(--black);
}
#Recipe-Grid-Wrap .Recipe-Title, #Product-Grid-Wrap .Product-Title {
	text-decoration:none;
	font-weight:bold;
	color:var(--red);
	line-height:1.2;
	margin-top:1rem;
}
.recipe-card {
  position: relative;
  overflow: hidden;
}
.product-page-recipe-grid .recipe-card, .recipe-page-recipe-grid .recipe-card {
  max-width:330px;
}
.product-page-product-grid .product-card {
  max-width:250px;
}
.Recipe-Title {
  font-size:1.15rem;
  text-align:center;
}
.recipe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7); /* semi-transparent dark overlay */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  opacity: 0;
  transition: opacity 0.3s ease;
  flex-direction:column;
}
.recipe-card:hover .recipe-overlay {
  opacity: 1;
}
#Recipe-Grid-Wrap .recipe-card:hover .Recipe-Title, #Product-Grid-Wrap .product-card:hover .Product-Title {
  color:var(--black);
}
.recipe-overlay ul {
  list-style: none;
  padding:0;
  margin: 0;
}
#Recipe-Landing-Introduction-Wrap {
   position: relative;
  margin-top: -116px; 
  display: inline-block;
  padding-top: 30px;
  padding-bottom:30px;
  padding-left:40px;
  padding-right:40px;  
  background: url("../images/oval-recipe-listing.svg") no-repeat;
  background-color: transparent; /* let the SVG define the shape */
  background-position-x:center;
  text-align: center;
}
#Recipe-Details-Introduction-Wrap {
   position: relative;
  margin-top: -200px; 
  display: inline-block;
  padding-top: 70px;
  padding-bottom:20px;
  padding-left:40px;
  padding-right:40px;  
  background: url("../images/oval-recipe-details.svg") no-repeat;
  background-color: transparent; /* let the SVG define the shape */
  background-position-x:center;
  text-align: center;
}
.product-section-intro-wrap {
  position: relative;
  margin-top: -170px; 
  padding-top: 60px;
  padding-bottom:20px;
  padding-left:40px;
  padding-right:40px;  
  background-image: url("../images/product-listing-oval.svg");
  background-color: transparent; /* let the SVG define the shape */
  background-position-x:center;
  text-align: center;
  background-size:cover;
}
.product-section-intro-wrap-Flavoured {
	background-image: url("../images/product-listing-oval.svg")  !important;
}
.product-section-intro-wrap-Fruit-On-The-Bottom {
	background-image: url("../images/product-listing-oval-Fruit-On-The-Bottom.svg") !important;
}
.product-section-intro-wrap-BioBest {
  background: url("../images/product-listing-oval-BioBest.svg") no-repeat;
    position: relative;
  margin-top: -170px; 
  padding-top: 60px;
  padding-bottom:20px;
  padding-left:40px;
  padding-right:40px;  
  background-color: transparent; /* let the SVG define the shape */
  background-position-x:center;
  text-align: center;
  background-size:cover;
}
.product-section-intro-wrap::after, .product-section-intro-wrap-BioBest::after, .product-section-intro-wrap-Flavoured::after, .product-section-intro-wrap-Fruit-On-The-Bottom::after {
   content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;       
  background: var(--red);
  z-index:-2;
}
.product-section-intro-wrap-BioBest::after {
	background: var(--lightblue);
}
.product-section-intro-wrap-Flavoured::after {
	background: var(--red);
}
.product-section-intro-wrap-Fruit-On-The-Bottom::after {
	background: var(--purple);
}
.product-section-outro-wrap {
  margin-top: -152px; 
  padding-top: 30px;
  padding-bottom:20px;
  padding-left:40px;
  padding-right:40px;  
  background: url("../images/product-listing-oval.svg") no-repeat;
   background-color: transparent; /* let the SVG define the shape */
  background-position-x:center;
  text-align: center;
  background-size:cover;
  height:288px
}
.product-section-outro-wrap-BioBest {
  background: url("../images/product-listing-oval-BioBest.svg") no-repeat;
  margin-top: -152px; 
  padding-top: 30px;
  padding-bottom:20px;
  padding-left:40px;
  padding-right:40px;  
   background-color: transparent; /* let the SVG define the shape */
  background-position-x:center;
  text-align: center;
  background-size:cover;
  height:288px
}
#Product-Locator-Search-Wrap, #Product-Details-Important-Info-Wrap {
	width:90%;
}
#Back-Social-Wrap a:hover {
	color:var(--black);
}
#Ingredients-List li::marker {
	color:var(--red);
}
#Ingredients-List li{
	margin-bottom:.75rem;
}
#Preparation-List li::marker {
  color:var(--red); 
  font-weight:bold;  
}
#Preparation-List li{
  margin-bottom:.75rem;
}
.Product-Category-Section .accordion-button::after {
	display:none;
	
}
.product-grid {
	margin-left:auto;
	margin-right:auto;
}
.product-grid div {
	margin-top:.75rem;
	margin-bottom:.75rem;
}
.product-grid img {
	width:max-content;
	height:auto;
}
.product-grid a {
	text-decoration:none;
}
.accordion-item button.collapsed .ViewCollapsed {
	display:inline;
}
.accordion-item button.collapsed .HideCollapsed {
	display:none;
}
.accordion-item button:not(.collapsed) .ViewCollapsed {
	display:none;
}
.accordion-item button:not(.collapsed) .HideCollapsed {
	display:inline;
}
#Also-Try-Wrap {
	border-top: 2px solid var(--darkgrey);
	border-bottom: 2px solid var(--darkgrey);
}
#Recipe-Search-Wrap .row, #Product-Locator-Search-Wrap .row, #Product-Details-Important-Info-Wrap .row {
	box-shadow: 0px 6px 5px -2px rgba(0, 0, 0, 0.29);
}
#Product-Tub-Used-Wrap .row {
	background: radial-gradient(circle, rgba(202, 32, 49, 1) 0%, rgba(92, 0, 0, 1) 100%);
}
#Back-Social-Wrap a:hover {
	color:var(--red) !important;
}
#Reusable-CTA-Heading {
	line-height:1.1;
}
#Product-Breadcrumbs a:hover{
	color:var(--red) !important;
}
#Important-Info-List-Wrap {
	width:90%;
	padding-left:10%;
	padding-right:10%;
	padding-top:20px;
	padding-bottom:20px;
}
#Important-Info-List {
	  column-count:2;
	  column-gap:70px;  
}
#Important-Info-List li{
	 padding-left:40px;
	 break-inside: avoid;
	 font-size:24px;
	 line-height:1.1;
	 color:#fff;
}
/*
#Important-Info-Background {
	padding-bottom:200px;
}
*/
/*
#Important-Info-Background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/images/flavour-category-image.jpg');
  background-size: cover; 
  opacity: 0.5; 
  z-index: -1; 
}
*/
.Bubble-Item {
	width:175px;
	height:175px;
	border-radius:50%;
	border: 2px;
	border-style: solid;
	border-color:#c0c0c0;
	background: var(--red);
	box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.18);
	transition: all .3s ease-in-out;
}
.Bubble-Item:hover   {
  transform: scale(1.1);
}
.Bubble-Text {
	font-size:34px;
	color:var(--white);
	margin-top:-10px;
}
.Daily-Value {
	font-size:16px;
	
}
#Nutrition-Facts-Wrap {
/* 
 position: relative;
  margin-top: -200px; 
  padding-top: 70px;
  padding-bottom:20px;
  padding-left:40px;
  padding-right:40px;  
  background: url("../images/oval-recipe-details.svg") no-repeat;
  background-color: transparent; 
  background-position-x:center; 
  */
  text-align: center;
}
.Certification-Logo {
   width:70px;
   height:auto;
}
#Mobile-Product-Of-Canada {
	top:70px !important;
}
/* END Content */



/* Forms */

#Recipe-Search-Wrap input, #Recipe-Search-Wrap select {
	color:var(--darkgrey);
}

/* END Forms */




/* Tooltips */


.tooltip-inner {
  background-color: var(--darkgrey); /* Dark background */
  color: #ffffff; /* White text */
  padding: 8px 12px;
  font-size: 0.9rem;
}

.tooltip .tooltip-arrow::before {
	border-bottom-color: var(--darkgrey) !important;
}

/* END Tooltips */


/* Badges */

	.Category-Badge {
		  display: flex;
		  justify-content: space-around;
		  align-items: center;
		  background-color: #dc1e4d;
		  top: 0;
		  position: absolute;
		  flex-direction: column;
		  z-index: 100;
		  right: 2rem;
		  border-bottom-right-radius: 50%;
		  border-bottom-left-radius: 50%;
		  box-shadow: 0px 5px 5px 0px #00000070;
		  padding: 1rem; 
		  color:#fff;
		  text-align:center;
		  width:130px;
		  height:120px;
		  line-height:1.1;
		}
		.Category-Badge a {
		  display: flex;
		  justify-content: space-around;
		  align-items: center;
		  flex-direction: column;
		  color:#fff;
		  text-align:center;
		  text-decoration:none;
		  color:#fff;
		}
		.Category-Badge span {
		  margin-bottom:7px;
		}
		.Category-Badge a:hover {
		  color:#fff !important;
		  text-decoration:underline;
		}
		#Plains-Badge {
			background-color: var(--red);
		}
		#Flavoured-Badge {
			background-color: var(--red);
		}
		#Fruit-On-The-Bottom-Badge {
			background-color: var(--purple);
		}
/* END Badges */


/* BEGIN Shared Callouts */

#Measuring-Cup-Wrap {
	top:25px; 
	right:30px;
}

/* END Shared Callouts */

/* Footer */

#footer-navigation {
	color:var(--white);
	padding-top:52px;
	padding-bottom:10px;
	background: radial-gradient(circle,rgba(202, 32, 49, 1) 0%, rgba(92, 0, 0, 1) 100%);
	position:relative;
}
#footer-navigation a.nav-link{
	font-family:'Brandon-Grotesque-Bold', sans-serif;
	font-weight:bold;
	font-size:20px;
}
#footer-navigation a {
	font-family:'Brandon-Grotesque-Bold', sans-serif;
	color:var(--white);
	font-size:18px;
}
#footer-navigation a:hover {
	text-decoration:underline;
}
#footer-navigation p {
	font-size:12px;
}
#back-to-top {
	border-radius:50%;
	width:50px;
	height:50px;
	background-color:var(--red);
	border:2px solid var(--white);
	text-align:center;
	font-size:22px;
	color:var(--white);
	position: absolute;
    top:-25px;
	left: 50%;
	margin-left:-25px;
}
#back-to-top:hover {
	background: radial-gradient(circle,rgba(242, 78, 78, 1) 0%, rgba(202, 32, 49, 1) 100%);
}
#back-to-top i {
	position: absolute;
	top: 5px;
	left: 12px;
	font-size:24px;
}

/* END Footer */



/* Less than XXL */
@media (max-width: 1399px) {
   .product-section-intro-wrap {
		margin-top: -134px;
	}
}


/* Greater than XL */
@media (min-width: 1199px) {
	.product-grid {
		width:80%;
	}
	#Recipe-Details-Introduction-Wrap {
		background-size:102%;
	}
	#Product-Locator-Search-Wrap select{
		width:280px;
	}
	#Nutrition-Facts-Image {
	  max-width: 300px;
	}
}


/* Less than XL */
@media (max-width: 1199px) {
  /* Adjustment for the less tall top navigation */
  main {
	padding-top:61px;
  }
   #Recipe-Details-Introduction-Wrap {
		padding-top: 50px;
	}
	#Product-Tub-Used-Wrap h3 {
		font-size:1.75rem !important;
	}
	/* #footer-navigation a.nav-link {
		text-align:center;
	} */
	#Home-FAQ-Panel .homeslidertextcontent {
		background-color:white;
		padding:20px;
		padding-bottom:70px;
	}
	#Measuring-Cup-Wrap {
		right:5px;
	}
	img.header-logo {
		margin-top: 4px;
	}
}


/* Greater than LG */
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 6rem !important;
	padding-bottom: 6rem !important;
  }
  .my-lg-6 {
    margin-top: 6rem !important;
	margin-bottom: 6rem !important;
  }
  #First-Homepage-Panel {
	padding-top:3rem !important;
  }
}


/*  Less than LG */
@media (max-width: 991px) {
   #HomePageCarousel {
	   padding-top:20px;
	   padding-bottom:20px;
   }
   #Recipe-Landing-Introduction-Wrap h2 {
		padding-top:20px;
	}
	#Important-Info-List-Wrap {
		width:100%;
		padding-left:5%;
		padding-right:5%;
	}
	#Important-Info-List {
	  column-count:1;
	}
}

/* Greater than MD */
@media (min-width: 767px) {

}

/* Less than MD */
@media (max-width: 767px) {
	#Recipe-Landing-Introduction-Wrap h2, .product-section-intro-wrap h2 {
		padding-top:0px;
	}
	#Recipe-Landing-Introduction-Wrap, #Recipe-Details-Introduction-Wrap, .product-section-intro-wrap {
		margin-top: -55px;
	}
	 #Recipe-Details-Introduction-Wrap, .product-section-intro-wrap {
		padding-top: 25px;
		padding-bottom: 0px;
	}
	.Category-Badge {
		right: 0rem;
	}
	.product-grid {
		margin-right: calc(-.5 * var(--bs-gutter-x));
		margin-left: calc(-.5 * var(--bs-gutter-x));
	}
	.product-grid .Product-Box-Image {
		width:108% !important;
	}
	#Mobile-Product-Of-Canada {
		width:80px !important;
		height:auto;
	}
	#Bubble-Wrap .Bubble-Item {
		width:130px;
		height:130px;
	}
}


/* Less than SM */
@media (max-width: 575px) {

}