.brand-listings{
	margin-top: 5rem;
	margin-bottom: 10rem;
}

.brand-category-section{
	padding-left: 8rem;
	padding-right: 8rem;
	margin-top: 10rem;
}

.category-header-container{
	padding-bottom: 3rem;
}

.category-header{
	font-size: 2.5rem;
	letter-spacing: 0.1rem;
	color: #535353;
	font-family: Anton;
	text-transform: uppercase;
}

.all-brand-summary-container{
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	flex: 1 1 0;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 2rem;
}

.brand-summary-container{
	margin-right: 1.5rem;
	height: 100%;
	box-shadow: 0 1.5rem 2rem -0.55rem grey;
	text-decoration: none !important;
	color: inherit;
	flex: 0 0 calc(32% - 2rem);
	box-sizing: border-box;
}

.brand-summary{
	padding: 3rem 1.5rem;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: calc(100% - 28rem);
}

.brand-top-img{
	height: 22rem;
	background-size: cover;
	background-position: center;
}

.brand-logo{
	height: 12rem;
	width: 100%;
	margin-bottom: 2rem;
}

.brand-logo-img{
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.brand-discover-button-container{
	display: flex;
	justify-content: center;
}

.brand-discover-button{
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: center;
	letter-spacing: 0.1rem;
	padding: 1rem 2.5rem;
	font-family: Anton;
	font-size: 1.375rem;
	color: rgba(248,249,249,0.97);
	background-color: #1e1e1e;
	text-transform: uppercase;
	transition: background-color ease 0.1s;
}

.brand-products-section {
	background-color: #f7f7f7;
	padding-top: 2rem;
	min-height: 15rem;
	position: relative;
	z-index: 100;
}

.attention-seeker {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	background-image: url(/wp-content/uploads/2025/08/oval_shape-61b92251cd73bdb638fd14e086f1107a25b6bdc50d15d62f4215b1750373c5d2.svg);
	height: 3.9375rem;
	transform: translateY(1px);
	background-size: contain;
	background-position: bottom;
	pointer-events: none;
	background-repeat: no-repeat;
}

.attention-seeker::after {
	content: '';
	display: block;
	width: 1.375rem;
	height: 2.25rem;
	position: absolute;
	top: 1.5rem;
	left: 50%;
	transform: translate(-50%, 0);
	background-image: url(/wp-content/uploads/2025/08/down_arrow-3cc66a0abf3007debbdf8f1cbdff578da52ebc8c22bf406a609c5485586fffa3.svg);
	background-size: contain;
	background-repeat: no-repeat;
	animation: arrow-bounce 2s infinite;
}

@keyframes arrow-bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translate(-50%, 0);
	}
	40% {
		transform: translate(-50%, -0.5rem);
	}
	60% {
		transform: translate(-50%, -0.25rem);
	}
}

.slider-title-delimiter {
	position: absolute;
	height: 0.1rem;
	background-color: #4a4a4a;
	margin: auto;
	width: 100%;
}

.heading--slider-brand{
	color: #4a4a4a;
	font-size: 1.375rem;
	letter-spacing: 0.094rem;
}

.heading--slider-brand > span{
	background-color: #f7f7f7;
}

.heading--slider-title{
	z-index: 1;
}

.heading--slider-title > span {
	padding: 0 2rem;
	position: relative;
	background-color: #f7f7f7;
}

.column--slider-title {
	text-align: center;
	position: relative;
	text-transform: uppercase;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.space-container{
	z-index:10;
}

.row--slider-title, .row--slider-description {
	padding: 0 10rem;
}

.column--slider-title {
	text-align: center;
	text-transform: uppercase;
}

.brand-description{
	text-align: center;
	padding: 0 10rem;
}

.brand-description-text{
	font-family: Karla;
	font-size: 1.375em;
	color: #4a4a4a;
	font-weight: normal;
}

.brand-description-title{
	font-family: Anton;
	text-transform: uppercase;
	font-size: 1.375rem;
	letter-spacing: 0.094rem;
	color: #2a2a2a;
	font-weight: normal;
	margin-top: 2em;
}

.splitter{
	width: 100%;
	height: 5rem;
	position: absolute;
	bottom: 0;
}

.product-slider{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 10rem;
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition-property: transform;
	box-sizing: content-box;
	padding-top: 2rem;
	padding-bottom: 3rem;
	overflow-x: hidden;
}

.brand-product-container{
	display: flex;
}

.brand-product-link{
	height: 20rem;
	width: 20rem;
	position: relative;
	outline: none;
}

.brand-product-link {
	text-decoration: none;
	height: 20rem;
	width: 20rem;
	position: relative;
	outline: none;
}

.brand-product-link:hover,
.brand-product-link--active {
	cursor: pointer;
}

.brand-product-link:hover .brand-product-texts,
.brand-product-link--active .brand-product-texts {
	opacity: 1;
}

.brand-product-link:hover .brand-product-image,
.brand-product-link--active .brand-product-image {
	transform: scale(1.1);
}

.brand-product-link:hover .brand-product-image-background,
.brand-product-link--active .brand-product-image-background {
	height: 19rem;
	width: 22rem;
}

.brand-product-image-container{
	position: absolute;
	width: 14rem;
	height: 14rem;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.brand-product-image{
	transition: all ease 0.35s;
	-o-object-fit: contain;
	object-fit: contain;
	height: 100%;
	width: 100%;
}

.brand-product-image-background{
	transition: all ease 0.35s;
	-o-object-fit: contain;
	object-fit: contain;
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 0;
	width: 0;
}

.brand-product-texts{
	transition: opacity ease 0.25s;
	opacity: 0;
	position: absolute;
	top: calc(100% - 1.75rem);
	width: 100%;
	font-family: Anton;
	text-transform: uppercase;
}

.heading--brand-product{
	text-align: center;
	font-size: 1rem;
	color: #7c4e2c;
	letter-spacing: 0.069rem;
	max-width: 22rem;
	line-height: 1.8;
}

.heading--brand-product > span{
	border-bottom: 2px solid rgba(124, 78, 44, 0.3);
}

.swiper-button-next,
.swiper-button-prev {
	width: 3rem;
	height: 3rem;
	opacity: 0.85;
	transition: opacity 0.25s ease, background-color 0.35s ease;
	position: absolute;
}

.swiper-button-next:not(.swiper-button-disabled):hover,
.swiper-button-prev:not(.swiper-button-disabled):hover {
	opacity: 1;
}

.swiper-button-prev {
	background: rgba(227, 227, 227, 0.5) url(/wp-content/uploads/2025/08/left_arrow-703ee3b123395593ca20f26b8b041fa2f390ff425169fa79653eea9ba2075160.svg) no-repeat center center;
	background-size: 35.7143% 51.7857%; /* 20/56 and 29/56 as percentages */
	left: 2rem;
}

.swiper-button-next {
	background: rgba(241, 241, 241, 0.5) url(/wp-content/uploads/2025/08/right_arrow-c50de841c391e456a990d43850d011e2eb9c6a8d83e7f5e2dfed28211b283985.svg) no-repeat center center;
	background-size: 42.8571% 51.7857%; /* 24/56 and 29/56 as percentages */
	right: 2rem;
}

.swiper-button-disabled {
	pointer-events: auto !important;
}

.swiper-button--block {
	margin: 0;
	padding: 0;
	position: initial;
}

.brand-content{
	background: radial-gradient(circle at center, #d47f00, #3e2122 25%, #3e2122);
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
}

.brand-header-img{
	height: 35rem;
	width: 45rem;
	-o-object-fit: contain;
	object-fit: contain;
	bottom: calc(50% - 24.25rem);
	position: absolute;
	left: calc(50% - 22rem);
	z-index: 2;
}

.celebration-mini-content{
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
	top: -4.5rem;
	margin-bottom: -4.5rem;
}

.celebration-mini-logo{
	height: 26rem;
	width: 50rem;
	top: 10rem;
	position: absolute;
	left: calc(50% - 24rem);
}

.celebration-mini-product-logo{
	height: 26rem;
	width: 50rem;
	top: 0rem;
	position: absolute;
	left: calc(50% - 24rem);
}

.celebration-mini-logo-img{
	position: absolute;
	width: 100%;
	bottom: 0;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.celebration-mini-logo-extension{
	height: 21rem;
	width: 34rem;
	left: calc(50% - 17rem);
	top: -10rem;
	position: absolute;
}

.celebration-mini-logo-extension-img{
	height: 21rem;
	width: 34rem;
	left: calc(50% - 17rem);
	top: 30rem;
	position: absolute;
}

.celebration-mini-header-img{
	width: 44rem;
	height: 26rem;
	bottom: -2rem;
	left: calc(50% - 20rem);
	position: absolute;
}

.celebration-mini-product-header-img{
	width: 30rem;
	height: 18rem;
	bottom: 0rem;
	left: calc(50% - 15rem);
	position: absolute;
}

.celebration-mini-stamp1{
	width: 12rem;
	height: 12rem;
	position: absolute;
	top: 39.875rem;
	right: 25.5%;
	z-index: 1;
}

.celebration-content{
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
	top: -4.5rem;
	margin-bottom: -4.5rem;
}

.celebration-logo{
	height: 16rem;
	width: 48rem;
	top: 10rem;
	position: absolute;
	left: calc(50% - 24rem);
}

.celebration-logo-img{
	position: absolute;
	width: 100%;
	bottom: 0;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.celebration-product-logo{
	height: 8rem;
	width: 45rem;
	position: absolute;
	top: 26.25rem;
	left: calc(50% - 22.5rem);
	transition: opacity ease 0.5s 0.5s, transform ease 0.5s 0.5s;
}

.celebration-product-logo-img{
	width: 100%;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.celebration-header-img{
	width: 60rem;
	height: 34rem;
	bottom: -2rem;
	left: calc(50% - 30rem);
	position: absolute;
}

.celebration-product-header-img{
	width: 38rem;
	height: 27rem;
	bottom: -2rem;
	left: calc(50% - 20rem);
	position: absolute;
}

.celebration-stamp1{
	width: 12rem;
	height: 12rem;
	position: absolute;
	top: 39.875rem;
	right: 25.5%;
	z-index: 1;
}

.tradition-content{
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
	top: -4.5rem;
	margin-bottom: -4.5rem;
}

.tradition-logo {
	height: 15rem;
	width: 40rem;
	top: 20rem;
	position: absolute;
	left: 15rem;
}

.tradition-logo-img {
	position: absolute;
	width: 100%;
	bottom: 0;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.tradition-product-logo{
	z-index: 1;
	bottom: 8rem;
	left: 40%;
	position: absolute;
	height: 10rem;
	width: 27rem;
}

.tradition-header-img{
	height: 35rem;
	width: 45rem;
	-o-object-fit: contain;
	object-fit: contain;
	top: 10rem;
	position: absolute;
	right: 9%;
	z-index: 2;
}

.tradition-stamp1{
	z-index: 1;
	top: 7rem;
	right: 2%;
	position: absolute;
	height: 16rem;
	width: 16rem;
}

.tradition-stamp2{
	z-index: 1;
	bottom: 8rem;
	left: 8rem;
	position: absolute;
	height: 11rem;
	width: 11rem;
}

.tradition-stamp3{
	z-index: 1;
	bottom: 8rem;
	left: 40%;
	position: absolute;
	height: 10rem;
	width: 27rem;
}

.praeventia-content{
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
	top: -4.5rem;
	margin-bottom: -4.5rem;
}

.praeventia-logo{
	height: 11.25rem;
	width: 42rem;
	top: 38.75rem;
	left: calc(50% - 21rem);
	position: absolute;
	z-index: 5;
}

.praeventia-logo-img{
	position: absolute;
	width: 100%;
	bottom: 4rem;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.praeventia-product-logo{
	height: 3.75rem;
	width: 29.5rem;
	top: 48rem;
	left: calc(50% - 18rem);
	position: absolute;
	z-index: 5;
}

.praeventia-product-logo-img{
	width: 35rem;
}

.praeventia-header-img{
	height: 27rem;
	width: 44rem;
	-o-object-fit: contain;
	object-fit: contain;
	top: 6.25rem;
	left: calc(50% - 22rem);
	position: absolute;
	z-index: 5;
}

@keyframes left-wheat-animation{
	0%{
		transform: scaleX(-1) rotate(-20deg);
	}
	25%{
		transform: scaleX(-1) rotate(-22deg);
	}
	75%{
		transform: scaleX(-1) rotate(-18deg);
	}
	100%{
		transform: scaleX(-1) rotate(-20deg);
	}
}

@keyframes right-wheat-animation{
	0%{
		transform: rotate(-15deg);
	}
	25%{
		transform: rotate(-16deg);
	}
	75%{
		transform: rotate(-14deg);
	}
	100%{
		transform: rotate(-15deg);
	}
}

.praeventia-wheat-img-right {
	transform: rotate(-15deg);
	top: 4rem;
	right: -10rem;
	height: 19rem;
	width: 52rem;
	-o-object-fit: contain;
	object-fit: contain;
	-webkit-animation: right-wheat-animation 20s infinite 2s;
	animation: right-wheat-animation 20s infinite 2s;
	transform-origin: 100% 0;
	position: absolute;
}

.praeventia-wheat-img-left {
	transform: scaleX(-1) rotate(-20deg);
	top: 20rem;
	left: -40rem;
	height: 10.75rem;
	width: 36rem;
	-o-object-fit: contain;
	object-fit: contain;
	-webkit-animation: left-wheat-animation 20s infinite;
	animation: left-wheat-animation 20s infinite;
	transform-origin: 100% 0;
	position: absolute;
}

.vital-content{
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
	top: -4.5rem;
	margin-bottom: -4.5rem;
	background-image: url(/wp-content/uploads/2025/08/vital_background-275036e68f56bc62c26107b394eabdbf030900f5ab2cc41dfc9099bbfe530e77.jpg);
}

.vital-logo{
	width: 100%;
	height: 11.75rem;
	padding-bottom: 2rem;
	text-align: center;
	transform: translateY(25%) scale(1.1);
	margin: 0;
	padding: 0;
	margin-top: 2rem;
}

.vital-brand-product-logo{
	width: 100%;
	height: 11.75rem;
	padding-bottom: 2rem;
	text-align: center;
	transform: translateY(25%) scale(1.1);
	margin: 0;
	padding: 0;
}

.vital-logo-img{
	/*position: absolute;
	width: 100%;
	bottom: 0;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;*/
	height: 100%;
	text-align: center;
}

.vital-product-logo{
	height: 5rem;
	margin-top: 5rem;
	width: 100%;
	text-align: center;
	transition: opacity ease 0.5s 0.5s, transform ease 0.5s 0.5s;
}

.vital-product-logo-img{
	height: 100%;
	width: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.vital-header-img{
	height: 33rem;
	width: 64rem;
	-o-object-fit: contain;
	object-fit: contain;
	position: absolute;
	bottom: 0;
	transform: translateY(35%);
	z-index: 1;
}

.vital-logo-backdrop{
	position: relative;
	height: 23.3rem;
	margin: 14rem 0;
	z-index: 2;
	justify-content: center;
	display: flex;
	box-sizing: border-box;
}

.vital-banner-wave--top {
	top: -0.3rem;
}

.vital-banner-wave {
	width: 100%;
	position: absolute;
	z-index: -1;
	height: 0.5rem;
	-webkit-mask-image: url(/wp-content/uploads/2025/08/border_bump-60dac62c6e3702cc8fb0cd7bb3e8be9dca342620312ba5f954b0c027bfc614d2.svg);
	mask-image: url(/wp-content/uploads/2025/08/border_bump-60dac62c6e3702cc8fb0cd7bb3e8be9dca342620312ba5f954b0c027bfc614d2.svg);
	-webkit-mask-size: 1rem 0.5rem;
	mask-size: 1rem 0.5rem;
	transition: background-color ease 0.75s;
}

.vital-banner-wave--bottom {
	bottom: -0.3rem;
	transform: rotate(180deg);
}

.nugabar-content{
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
	top: -4.5rem;
	margin-bottom: -4.5rem;
}

.nugabar-type-title{
	bottom: calc(50% - 10rem);
	left: -5rem;
	position: absolute;
	height: 10rem;
	width: 65rem;
	display: flex;
	justify-content: center;
}

.nugabar-logo {
	height: 19rem;
	width: 58rem;
	top: 6rem;
	position: absolute;
	left: calc(50% - 26.75rem);
}

.nugabar-logo-img {
	width: 100%;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.nugabar-header-img{
	height: 35rem;
	width: 45rem;
	-o-object-fit: contain;
	object-fit: contain;
	bottom: calc(50% - 24.25rem);
	position: absolute;
	left: calc(50% - 22rem);
	z-index: 2;
}

.nugabar-stamp1{
	z-index: 1;
	bottom: calc(50% - 11rem);
	right: calc(50% - 23rem);
	position: absolute;
	height: 13rem;
	width: 13rem;
}

.nugabar-stamp2{
	z-index: 2;
	bottom: 5rem;
	left: calc(40% - 17rem);
	position: absolute;
	height: 18rem;
	width: 18rem;
	-o-object-fit: cover;
	object-fit: cover;
}

.nugabar-stamp3{
	z-index: 3;
	/*bottom: calc(50% - 9.25rem);
	left: -5rem;
	position: absolute;
	width: 65rem;*/
	height: 8rem;
	align-self: center;
}

.gopure-content{
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
	padding-top: -4.5rem;
	margin-bottom: -4.5rem;
}

.gopure-logo{
	height: 35.5rem;
	width: 100%;
	position: absolute;
	top: 1.5rem;
}

.gopure-logo-img{
	position: absolute;
	width: 100%;
	bottom: 0;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.gopure-header-img{
	position: absolute;
	width: 50rem;
	height: 20rem;
	bottom: 1rem;
	left: calc(50% - 25rem);
}

.gopure-product-logo{
	height: 28.5rem;
	width: 100%;
	position: absolute;
	top: 4.5rem;
}

.gopure-product-logo-img{
	position: absolute;
	width: 100%;
	bottom: 0;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.gopure-product-header-img{
	width: 38rem;
	height: 16.5rem;
	position: absolute;
	bottom: 6rem;
	left: calc(50% - 19rem);
	-o-object-fit: contain;
	object-fit: contain;
}

.gopure-stamp1{
	width: 12rem;
	height: 12rem;
	position: absolute;
	top: 35rem;
	z-index: 4;
	left: 20rem;
}

.gopure-stamp2{
	width: 12rem;
	height: 12rem;
	position: absolute;
	top: 35rem;
	z-index: 4;
	right: 20rem;
}

.muffinmax-content{
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
	top: -4.5rem;
	font-size: 0.8333333333vw;
}

.muffinmax-background-img{
	height: 81.5%;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
	background-image: url(/wp-content/uploads/2025/08/bg-muffinmax-f60b31340e636b00498b242189eefccc1bd02140d9a2c99c0d3af2b52caf5fea.jpg);
}

.muffinmax-background{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 82%;
}

.muffinmax-logo-container{
	position: absolute;
	width: 100%;
	height: 100%;
	transform-origin: 115% 78%;
}

.muffinmax-logo{
	position: absolute;
	right: 13.5%;
	top: 11.5%;
	width: 45%;
	height: 40%;
}

.muffinmax-logo-img{

}

.muffinmax-logo-extension-img{
	position: absolute;
	top: 74%;
	right: 14%;
	height: 6rem;
	opacity: 1;
	transform: translateY(-50%);
}

.muffinmax-header-img{
	position: absolute;
	top: 51%;
	left: 0;
	width: 53%;
	opacity: 1;
}

.muffinmax-accent{
	position: absolute;
	-o-object-fit: contain;
	object-fit: contain;
	top: 73%;
	left: 40%;
	width: 32%;
	height: 30%;
	transition: all ease 0.5s;
}

.chocomax-content{
	overflow: hidden;
	height: 61.25rem;
	width: 100%;
	position: relative;
	min-height: 50rem;
	top: -4.5rem;
	font-size: 0.8333333333vw;
}

.chocomax-background-img{
	position: absolute;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
	height: 100%;
	width: 100%;
	background-image: url(/wp-content/uploads/2025/08/bg-chocolat-85c5a3dc7a76f6d7bb869c0380b4f9e198988ef18bb00810f881ae0a49086306.png);
}

.chocomax-background{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 82%;
}

.chocomax-logo-container{
	position: absolute;
	width: 100%;
	height: 100%;
	transform-origin: 115% 78%;
}

.chocomax-logo{
	position: absolute;
	right: 13.5%;
	top: 13.5%;
	width: 39%;
	margin: 0;
	padding: 0;
}

.chocomax-logo-img{
	width: 100%;
}

.chocomax-logo-extension-img{
	position: absolute;
	top: 74%;
	right: 13.25%;
	height: 2.5rem;
	opacity: 1;
	transform: translateY(-50%);
}

.chocomax-header-img{
	position: absolute;
	top: 33%;
	left: 0;
	width: 45%;
	opacity: 1;
}

.chocomax-accent-img{
	position: absolute;
	-o-object-fit: contain;
	object-fit: contain;
	transition: all ease 0.5s;
	top: 66%;
	left: 0;
	width: 26%;
	height: 30%;
}

.chocomax-accent{
	position: absolute;
	-o-object-fit: contain;
	object-fit: contain;
	top: 73%;
	left: 40%;
	width: 32%;
	height: 30%;
	transition: all ease 0.5s;
}

.chocomax-stamp1{
	width: 20rem;
	height: 20rem;
	position: absolute;
	top: 5rem;
	z-index: 4;
	left: 20rem;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

.animate-fade-in {
	animation: fadeIn 1s forwards;
}

.animate-fade-out {
	animation: fadeOut 1s forwards;
}

@keyframes logo-slide-in {
	to {
		opacity: 1;
		transform: translateY(-2.5vh) scale(1.25);
	}
}

@keyframes logo-slide-out {
	to {
		transform: translateY(100%);
		opacity: 0;
	}
}

.animate-logo-slide-in {
	animation: logo-slide-in 1s forwards;
	/*transition: transform cubic-bezier(0.805, 0.200, 0.930, 0.545) 0.75s 0.75s;*/
}

.animate-logo-slide-out {
	animation: logo-slide-out 1s forwards;
	/*transition: transform cubic-bezier(0.805, 0.200, 0.930, 0.545) 0.75s 0.75s;*/
}

@keyframes product-header-enter {
	to {
		opacity: 1;
		transform: translateY(-1.5rem);
	}
}

@keyframes product-header-leave {
	to {
		opacity: 0;
		transform: translateY(1.5rem);
	}
}

.animate-header-enter {
	opacity: 0;
	animation: product-header-enter 2s forwards;
	/*transition: opacity 0.5s 0.5s ease, transform 0.5s 0.5s ease;*/
}

.animate-header-leaving {
	animation: product-header-leave 1s forwards;
	/*transition: opacity 0.5s 0.5s ease, transform 0.5s 0.5s ease;*/
}

/* Define the transition variable manually, since CSS doesn't support SASS variables */
/*:root {
--accent-explosion-transition: opacity ease 0.5s 1.5s, transform cubic-bezier(0.095, 0.670, 0.245, 0.980) 2s 1.35s;
}*/

.right-accent img {
	/*transition: var(--accent-explosion-transition);*/
	z-index: 3;
}

.left-accent,
.right-accent {
	/*position: relative;*/
	height: 100vh;
	width: 100vw;
}

.left-accent img {
	/*transition: var(--accent-explosion-transition);*/
	z-index: 3;
}

/* LEFT ACCENT ANIMATIONS */
@keyframes explosion-left-1 {
	from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	to   { left: calc(2% - 3rem); top: 5%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-left-2 {
	from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	to   { left: 20%; top: 24%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-left-3 {
	from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	to   { left: 14%; top: 29%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-left-4 {
	from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	to   { left: 5%; top: 38%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-left-5 {
	from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	to   { left: 8%; top: 50%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-left-6 {
	from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	to   { left: 23%; top: 42%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-left-7 {
	from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	to   { left: 15%; top: 70%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-left-8 {
	from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	to   { left: 6%; top: 93%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-left-9 {
	from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	to   { left: 3%; top: 68%; transform: scale(1); opacity: 1; }
}

/* LEFT ACCENT IMAGES */
.left-accent > img {
	position: absolute;
	opacity: 0;
	/* Optionally add will-change for performance */
	will-change: left, top, transform, opacity;
}
.left-accent > img:nth-child(1) {
	height: 25%;
	animation: explosion-left-1 2s forwards;
}
.left-accent > img:nth-child(2) {
	height: 10%;
	animation: explosion-left-2 2s forwards;
}
.left-accent > img:nth-child(3) {
	height: 10%;
	animation: explosion-left-3 2s forwards;
}
.left-accent > img:nth-child(4) {
	height: 10%;
	animation: explosion-left-4 2s forwards;
}
.left-accent > img:nth-child(5) {
	height: 11%;
	animation: explosion-left-5 2s forwards;
}
.left-accent > img:nth-child(6) {
	height: 6%;
	animation: explosion-left-6 2s forwards;
}
.left-accent > img:nth-child(7) {
	height: 22%;
	animation: explosion-left-7 2s forwards;
}
.left-accent > img:nth-child(8) {
	height: 14%;
	animation: explosion-left-8 2s forwards;
}
.left-accent > img:nth-child(9) {
	height: 5%;
	animation: explosion-left-9 2s forwards;
}

/* RIGHT ACCENT ANIMATIONS */
@keyframes explosion-right-1 {
	from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
	to   { right: calc(2.5% - 4rem); top: 7%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-right-2 {
	from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
	to   { right: 16%; top: 22%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-right-3 {
	from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
	to   { right: 9%; top: 32%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-right-4 {
	from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
	to   { right: 3%; top: 36%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-right-5 {
	from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
	to   { right: 10%; top: 52%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-right-6 {
	from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
	to   { right: 22%; top: 46%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-right-7 {
	from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
	to   { right: 5%; top: 92%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-right-8 {
	from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
	to   { right: 15%; top: 74%; transform: scale(1); opacity: 1; }
}
@keyframes explosion-right-9 {
	from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
	to   { right: 10%; top: 72%; transform: scale(1); opacity: 1; }
}

/* RIGHT ACCENT IMAGES */
.right-accent > img {
	position: absolute;
	opacity: 0;
	will-change: right, top, transform, opacity;
}
.right-accent > img:nth-child(1) {
	height: 18%;
	animation: explosion-right-1 2s forwards;
}
.right-accent > img:nth-child(2) {
	height: 15%;
	animation: explosion-right-2 2s forwards;
}
.right-accent > img:nth-child(3) {
	height: 6%;
	animation: explosion-right-3 2s forwards;
}
.right-accent > img:nth-child(4) {
	height: 13%;
	animation: explosion-right-4 2s forwards;
}
.right-accent > img:nth-child(5) {
	height: 9%;
	animation: explosion-right-5 2s forwards;
}
.right-accent > img:nth-child(6) {
	height: 8%;
	animation: explosion-right-6 2s forwards;
}
.right-accent > img:nth-child(7) {
	height: 18%;
	animation: explosion-right-7 2s forwards;
}
.right-accent > img:nth-child(8) {
	height: 16%;
	animation: explosion-right-8 2s forwards;
}
.right-accent > img:nth-child(9) {
	height: 9%;
	animation: explosion-right-9 2s forwards;
}

.product-background{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
}

.box-and-nutrition-value-img-container{
	display: flex;
	flex-direction: row;
	padding-bottom: 11.25rem;
	position: relative;
	box-sizing: border-box;
}

.product-box{
	padding-top: 7.25rem;
	width: 40%;
	max-width: 40%;
}

.product-box-img-container{
	height: 29rem;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 3.5rem;
}

.product-box-img{
	height: 100%;
	max-width: 70%;
	-o-object-fit: contain;
	object-fit: contain;
	display: none;
}

.product-toggle{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.product-toggle button{
	outline: none;
	border: none;
	padding: 0.75rem;
	text-align: center;
	background-color: #f3f6f5;
	font-family: Anton;
	font-size: 1rem;
	letter-spacing: 0.06875rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.product-toggle-btn-box{
	display: flex;
	flex: 1 1 0;
	width: 16rem;
	justify-content: center;
}

.product-toggle-btn-box button{
	width: 100%;	
}

.front-btn{
	margin-right: 0.5rem;
}

.back-btn{
	margin-left: 0.5rem;
}

.product-toggle-btn-nutri-val{
	width: 16rem;
}

.product-summary{
	width: 50%;
	max-width: 50%;
	padding: 8rem 18.5rem 0 0;
}
.product-brand{
	font-family: Karla;
	font-size: 0.95rem;
	letter-spacing: 0.07rem;
	margin-bottom: 0.5rem;
	color: #b98058;
	text-transform: uppercase;
}
.product-title{
	width: 100%;
	font-family: Anton;
	font-size: 2rem;
	color: #535353;
	letter-spacing: 0.1375rem;
	text-transform: uppercase;
}
.product-splitter{
	width: 2.125rem;
	height: 1px;
	background-color: #a47969;
	margin: 2rem 0;
}
.product-ingredient-box{
	width: 100%;
	background-color: #f7f7f7;
	padding: 1rem 3rem;
	margin-bottom: 1rem;
}

.product-allergies{
	width: 100%;
	background-color: #f7f7f7;
	padding: 1rem 3rem;
}

.product-summary h3{
	width: 100%;
	font-family: Anton;
	font-size: 1.625rem;
	letter-spacing: 0.1rem;
	color: #535353;
	text-transform: uppercase;
}

.product-summary p{
	font-family: Karla;
	font-size: 0.875rem;
	line-height: 1.71;
	color: #6d6663;
	letter-spacing: 0.0625rem;
	width: 100%;
	white-space: pre-line;
}

@media only screen and (max-width: 720px) {
	.brand-category-section{
		padding-left: 2rem;
		padding-right: 2rem;
		margin-top: 0;
	}

	.category-header-container{
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.category-header{
		font-size: 2rem;
	}

	.brand-top-img{
		height: 10rem;
	}

	.brand-logo{
		height: 4rem;
		margin-bottom: 1.25rem;
	}

	.brand-discover-button{
		padding: 0.75rem 1.5rem;
		font-size: 1rem;
	}

	.all-brand-summary-container{
		flex-direction: column;
	}

	.attention-seeker{
		height: 1.5rem;
	}

	.attention-seeker::after{
		width: 0.6rem;
		height: 1rem;
		top: 1rem;
	}

	.row--slider-title, .row--slider-description{
		padding: 0 1rem;	
	}

	.heading--slider-brand{
		margin-bottom: 0;
		margin-top: 0;
	}

	.brand-summary-container{
		margin-right: 0;
	}

	.brand-description{
		padding: 0 1rem;
	}

	.brand-description-text{
		margin-top: 0.75rem;
		font-size: 0.9rem;
	}

	.brand-description-title{
		font-size: 0.9rem;
	}

	/* LEFT ACCENT ANIMATIONS */
	@keyframes explosion-left-1 {
		from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
		to   { left: calc(2% - 3rem); top: 5%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-left-2 {
		from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
		to   { left: 20%; top: 24%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-left-3 {
		from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
		to   { left: 14%; top: 29%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-left-4 {
		from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
		to   { left: 5%; top: 38%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-left-5 {
		from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
		to   { left: 8%; top: 50%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-left-6 {
		from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
		to   { left: 23%; top: 42%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-left-7 {
		from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
		to   { left: 15%; top: 70%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-left-8 {
		from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
		to   { left: 6%; top: 93%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-left-9 {
		from { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
		to   { left: 3%; top: 68%; transform: scale(0.3); opacity: 1; }
	}

	/* LEFT ACCENT IMAGES */
	.left-accent > img {
		position: absolute;
		opacity: 0;
		/* Optionally add will-change for performance */
		will-change: left, top, transform, opacity;
	}
	.left-accent > img:nth-child(1) {
		height: 25%;
		animation: explosion-left-1 2s forwards;
	}
	.left-accent > img:nth-child(2) {
		height: 10%;
		animation: explosion-left-2 2s forwards;
	}
	.left-accent > img:nth-child(3) {
		height: 10%;
		animation: explosion-left-3 2s forwards;
	}
	.left-accent > img:nth-child(4) {
		height: 10%;
		animation: explosion-left-4 2s forwards;
	}
	.left-accent > img:nth-child(5) {
		height: 11%;
		animation: explosion-left-5 2s forwards;
	}
	.left-accent > img:nth-child(6) {
		height: 6%;
		animation: explosion-left-6 2s forwards;
	}
	.left-accent > img:nth-child(7) {
		height: 22%;
		animation: explosion-left-7 2s forwards;
	}
	.left-accent > img:nth-child(8) {
		height: 14%;
		animation: explosion-left-8 2s forwards;
	}
	.left-accent > img:nth-child(9) {
		height: 5%;
		animation: explosion-left-9 2s forwards;
	}

	/* RIGHT ACCENT ANIMATIONS */
	@keyframes explosion-right-1 {
		from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
		to   { right: calc(2.5% - 4rem); top: 7%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-right-2 {
		from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
		to   { right: 16%; top: 22%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-right-3 {
		from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
		to   { right: 9%; top: 32%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-right-4 {
		from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
		to   { right: 3%; top: 36%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-right-5 {
		from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
		to   { right: 10%; top: 52%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-right-6 {
		from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
		to   { right: 22%; top: 46%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-right-7 {
		from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
		to   { right: 5%; top: 92%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-right-8 {
		from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
		to   { right: 15%; top: 74%; transform: scale(0.3); opacity: 1; }
	}
	@keyframes explosion-right-9 {
		from { right: 50%; top: 50%; transform: translate(50%, -50%) scale(0.1); opacity: 0; }
		to   { right: 10%; top: 72%; transform: scale(0.3); opacity: 1; }
	}

	/* RIGHT ACCENT IMAGES */
	.right-accent > img {
		position: absolute;
		opacity: 0;
		will-change: right, top, transform, opacity;
	}
	.right-accent > img:nth-child(1) {
		height: 18%;
		animation: explosion-right-1 2s forwards;
	}
	.right-accent > img:nth-child(2) {
		height: 15%;
		animation: explosion-right-2 2s forwards;
	}
	.right-accent > img:nth-child(3) {
		height: 6%;
		animation: explosion-right-3 2s forwards;
	}
	.right-accent > img:nth-child(4) {
		height: 13%;
		animation: explosion-right-4 2s forwards;
	}
	.right-accent > img:nth-child(5) {
		height: 9%;
		animation: explosion-right-5 2s forwards;
	}
	.right-accent > img:nth-child(6) {
		height: 8%;
		animation: explosion-right-6 2s forwards;
	}
	.right-accent > img:nth-child(7) {
		height: 18%;
		animation: explosion-right-7 2s forwards;
	}
	.right-accent > img:nth-child(8) {
		height: 16%;
		animation: explosion-right-8 2s forwards;
	}
	.right-accent > img:nth-child(9) {
		height: 9%;
		animation: explosion-right-9 2s forwards;
	}

	.gopure-content{
		height: 24rem;
		min-height: 20rem;
	}

	.gopure-header-img{
		height: 4rem;
		width: 8rem;
		bottom: 6rem;
		left: calc(50% - 4rem);
	}

	.gopure-logo{
		height: 12.5rem;
		width: 16rem;
		top: -0.5rem;
		left: calc(50% - 8rem);
	}

	.gopure-product-header-img{
		height: 4rem;
		width: 8rem;
		bottom: 4rem;
		left: calc(50% - 4rem);
	}

	.gopure-product-logo{
		height: 12.5rem;
		width: 16rem;
		top: -0.5rem;
		left: calc(50% - 8rem);
		display: flex;
		justify-content: center;
	}

	.gopure-product-logo-img{
		max-width: 13rem;
	}

	.gopure-stamp1{
		width: 4rem;
		height: 4rem;
		top: 14.75rem;
		left: 5%;
	}

	.gopure-stamp2{
		width: 4.5rem;
		height: 4.5rem;
		top: 14.25rem;
		right: 4%;
	}


	.celebration-content{
		overflow: hidden;
		height: 24rem;
		min-height: 20rem;
	}

	.celebration-logo{
		height: 7rem;
		width: 18rem;
		top: 6rem;
		left: calc(50% - 9rem);
	}

	.celebration-logo-img{
		position: absolute;
		width: 100%;
		bottom: 0;
		max-height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}

	.celebration-product-logo{
		height: 3rem;
		width: 16rem;
		top: 13.5rem;
		left: calc(50% - 8rem);
	}

	.celebration-product-logo-img{
		width: 100%;
		max-height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}

	.celebration-header-img{
		width: 15rem;
		height: 8.5rem;
		left: calc(50% - 7.5rem);
		bottom: 0;
	}

	.celebration-product-header-img{
		height: 6rem;
		width: 10rem;
		bottom: 0.5rem;
		left: calc(50% - 6rem);
	}

	.celebration-stamp1{
		width: 4rem;
		height: 4rem;
		top: 17.75rem;
		right: 9%;
	}

	.celebration-mini-content{
		overflow: hidden;
		height: 24rem;
		min-height: 20rem;
	}

	.celebration-mini-logo{
		height: 7rem;
		width: 18rem;
		top: 7rem;
		left: calc(50% - 9rem);
	}

	.celebration-mini-product-logo{
		height: 6rem;
		width: 16rem;
		top: 2rem;
		left: calc(50% - 8rem);
	}

	.celebration-mini-logo-img{
		position: absolute;
		width: 100%;
		bottom: 0;
		max-height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}

	.celebration-mini-logo-extension{
		height: 21rem;
		width: 34rem;
		left: calc(50% - 17rem);
		top: -10rem;
		position: absolute;
	}

	.celebration-mini-logo-extension-img{
		height: 6rem;
		width: 11rem;
		left: calc(50% - 6rem);
		top: 20rem;
	}

	.celebration-mini-header-img{
		width: 13rem;
		height: 7.5rem;
		left: calc(50% - 6.5rem);
		bottom: 0rem;
	}

	.celebration-mini-product-header-img{
		height: 6rem;
		width: 11rem;
		bottom: 0;
		left: calc(50% - 6rem);
	}

	.celebration-mini-stamp1{
		width: 4rem;
		height: 4rem;
		top: 17.75rem;
		right: 6%;
	}


	.tradition-content{
		overflow: hidden;
		height: 24rem;
		min-height: 20rem;
	}

	.tradition-logo {
		height: 4rem;
		width: 90%;
		top: 6rem;
		left: 5%;
	}

	.tradition-logo-img {
		position: absolute;
		width: 100%;
		bottom: 0;
		max-height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}

	.tradition-product-logo{
		height: 3.5rem;
		width: 10.5rem;
		bottom: 0;
		left: 5rem;
	}

	.tradition-header-img{
		height: 9rem;
		width: 12rem;
		top: 10.5rem;
		left: calc(50% - 6rem);
	}

	.tradition-stamp1{
		z-index: 1;
		left: auto;
		top: 10.5rem;
		right: 8%;
		height: 4rem;
		width: 4rem;
	}

	.tradition-stamp2{
		left: 1%;
		right: auto;
		height: 4rem;
		width: 4rem;
		bottom: 1.5rem;
	}

	.tradition-stamp3{
		height: 3.5rem;
		width: 10.5rem;
		bottom: 1.5rem;
		left: 5rem;
	}

	.praeventia-content{
		overflow: hidden;
		height: 24rem;
		min-height: 20rem;
	}

	.praeventia-logo{
		height: 4rem;
		width: 90%;
		top: 18rem;
		left: 5%;
	}

	.praeventia-logo-img{
		position: absolute;
		width: 100%;
		bottom: 4rem;
		max-height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}

	.praeventia-product-logo{
		height: 2.5rem;
		width: 15rem;
		top: 19rem;
		left: 12%;
	}

	.praeventia-product-logo-img{
		position: absolute;
		width: 100%;
		object-fit: contain;
	}

	.praeventia-header-img{
		height: 10rem;
		width: 14rem;
		top: 5
			rem;
		left: calc(50% - 7rem);
	}

	.praeventia-wheat-img-right {
		display: none;
	}

	.praeventia-wheat-img-left {
		display: none;
	}

	.vital-content{
		overflow: hidden;
		height: 24rem;
		min-height: 20rem;
	}

	.vital-logo{
		height: 6rem;
		padding-bottom: 0;
		display: flex;
		justify-content: center;
		margin-bottom: 1rem;
		margin-top: 1rem;
	}

	.vital-brand-product-logo{
		height: 6rem;
		padding-bottom: 0;
		display: flex;
		justify-content: center;
		margin-bottom: 1rem;
		margin-top: -0.5rem;
	}

	.vital-product-logo{
		height: 2.5rem;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 2.5rem;
		margin-bottom: 0;
	}

	.vital-product-logo-img{
		height: 100%;
		width: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}

	.vital-header-img{
		height: 8rem;
		width: 16rem;
		bottom: 1rem;
	}

	.vital-logo-backdrop{
		margin: 6rem 0;
		height: 11rem;
	}

	.nugabar-content{
		overflow: hidden;
		height: 24rem;
		min-height: 20rem;
	}

	.nugabar-type-title{
		height: 3rem;
		width: 12rem;
		bottom: calc(50% - 4.5rem);
		left: auto;
		display: flex;
		justify-content: flex-start;
	}

	.nugabar-logo {
		height: 5.5rem;
		width: 90%;
		top: 3.5rem;
		left: 5%;
	}

	.nugabar-logo-img {
		width: 100%;
		max-height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}

	.nugabar-header-img{
		height: 8rem;
		width: 12rem;
		top: 10.5rem;
		left: calc(50% - 5rem);
	}

	.nugabar-stamp1{
		height: 4rem;
		width: 4rem;
		bottom: calc(50% - 5.5rem);
		right: calc(50% - 8rem);
	}

	.nugabar-stamp2{
		height: 4rem;
		width: 7rem;
		bottom: calc(50% - 7.5rem);
		left: calc(50% - 7rem);
	}

	.nugabar-stamp3{
		height: 2rem;
		width: 4rem;
		bottom: calc(50% - 4rem);
		left: 2rem;
		margin-left: 2rem;
	}

	.splitter{
		height: 3rem;
	}


	.muffinmax-content{
		overflow: hidden;
		height: 24rem;
		min-height: 20rem;
		margin-bottom: -4.5rem;
	}

	.muffinmax-background-img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 82%;
		background-position: left 2.5rem;
		background-size: auto 100%;
	}

	.muffinmax-background{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 82%;
	}

	.muffinmax-logo-container{
		top: 20%;
		right: 4.5%;
		width: 60%;
	}

	.muffinmax-logo{
		position: absolute;
		right: 2%;
		top: 2%;
		width: 100%;
		height: 40%;
	}

	.muffinmax-logo-extension-img{
		top: 74%;
		right: 4.5%;
		height: 1.5rem;
	}

	.muffinmax-header-img{
		position: absolute;
		top: 64%;
		left: 0;
		width: 53%;
		opacity: 1;
	}

	.muffinmax-accent{
		top: 75.5%;
		left: 35%;
		width: 44.8%;
		height: 20%;
	}


	.chocomax-content{
		overflow: hidden;
		height: 24rem;
		min-height: 20rem;
		margin-bottom: -4.5rem;
	}

	.chocomax-background-img{
		position: absolute;
		top: 0;
		left: 0;
		height: 18rem;
		background-position: left;
		background-size: auto 100%;
	}

	.chocomax-background{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 82%;
	}

	.chocomax-logo-container{
		position: absolute;
		width: 100%;
		height: 100%;
		transform-origin: 115% 78%;
	}

	.chocomax-logo{
		top: 22%;
		right: 8.5%;
	}

	.chocomax-logo-img{
		width: 100%;
	}

	.chocomax-logo-extension-img{
		top: 74%;
		right: 8.5%;
		height: 1.25rem;
		z-index: 4;
	}

	.chocomax-header-img{
		top: 50%;
		width: 55%;
	}

	.chocomax-accent-img{
		top: 56%;
		left: 0;
		width: 32.5%;
		height: 37.5%;
	}

	.chocomax-accent{
		position: absolute;
		-o-object-fit: contain;
		object-fit: contain;
		top: 73%;
		left: 40%;
		width: 32%;
		height: 30%;
		transition: all ease 0.5s;
	}

	.chocomax-stamp1{
		top: -3rem;
		left: 8.5%;
		width: 7rem;
	}

}