@font-face {
    font-family: 'bellfortroughdemo';
    src: url('../fonts/bellfortroughdemo-webfont.woff2') format('woff2'),
         url('../fonts/bellfortroughdemo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--brand-color: #424b51;
	--light-background: #ffefcf;
	--accent-color: #cb7e2a;
	--icon-color-1: #bad7df;
	--icon-color-2: #bad1b3;
	--icon-color-3: #dee1de;
	--ornament-color: #fdd175;
	--font-05x: clamp(10px, 1vw, 13px);
	--font-08x: clamp(12px, 1.2vw, 16px);
	--font-1x: clamp(15px, 1.55vw, 20px);
	--font-2x: clamp(20px, 2.19vw, 35px);
	--font-3x: clamp(30px, 3.28vw, 50px);
	--font-4x: clamp(40px, 4.6vw, 60px);
	--font-5x: clamp(50px, 7vw, 90px);
	scroll-behavior: smooth;
}
body {
	font-family: "Montserrat", sans-serif;
	overflow-x: hidden;
	font-size: var(--font-1x);
	line-height: 1.5;
}
section {
	padding: 10.95vw 5.47vw 0;
}
section#description {
	padding: 0 3.65vw 0 5.47vw;
	margin-top: 10.95vw;
}
section.product-ingredients {
	padding: 4vw 5.47vw;
	margin-top: 10.95vw;
	background: var(--hero-background);
}
img {
	max-width: 100%;
}
h2 {
	font-size: 1.5rem;
}
.columns {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
.columns > * {
	flex-basis: 95%;
	flex-grow: 1;
}
@media (min-width: 769px) {
	.ratio-50-50 > * {
		flex-basis: 45%;
	}
	.ratio-40-60 > *:nth-child(1) {
		flex-basis: 35%;
	}
	.ratio-40-60 > *:nth-child(2) {
		flex-basis: 55%;
	}
	.ratio-30-70 > *:nth-child(1) {
		flex-basis: 25%;
	}
	.ratio-30-70 > *:nth-child(2) {
		flex-basis: 65%;
	}
	.ratio-30-30-30 > * {
		flex-basis: 25%;
	}
}
.align-center {
	align-items: center;
}
.mainHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(10px,.1vw,20px) clamp(15px,.25vw,50px);
	position: fixed;
	width: 100%;
	z-index: 1000;
	transition: padding .3s ease .3s, height .3s ease .3s;
	height: 80px;
	top: 0;
}
.mainHeader.sticky {
	height: 50px;
	background: rgba(255,255,255,.9);
	border-bottom: 1px solid var(--accent-color);
	backdrop-filter: blur(3px);
}
.mainHeader .logo img {
	width: clamp(100px, 12.41vw, 170px);
	transition: width .3s ease-in-out;
}
.mainHeader.sticky .logo img {
	width: clamp(70px, 9.41vw, 130px);
}
.mainHeader .nav-links li {
	font-size: var(--font-1x);
	transition: font-size .3s ease-in-out;
}
.mainHeader.sticky .nav-links li {
	font-size: 1rem;
}
.mainHeader.sticky .header-social-links > * {
	width: 20px;
}
.nav-links {
	display: flex;
	align-items: center;
	list-style: none;
	gap: 10px;
}
.nav-links a {
	padding: 10px 10px;
	text-decoration: none;
	color: var(--brand-color);
	text-transform: uppercase;
	font-weight: 500;
	transition: all 0.3s ease;
}
.nav-links a:hover {
	color: var(--accent-color);
}
.header-social-links {
	display: flex;
	align-items: center;
	gap: 10px;
}
.header-social-links > * {
	width: clamp(20px,2vw,30px);
	fill: var(--brand-color);
	transition: width .3s ease-in-out;
}
.header-social-links a svg {
	transition: fill .3s ease-in-out;
}
.header-social-links a:hover svg {
	fill: var(--accent-color);
}
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  background-color: var(--brand-color);
  height: 3px;
  width: 25px;
  margin: 3px;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
	.nav {
		order: 2;
	}
  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: var(--light-background);
    padding: 10px;
	left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
	transform: translateX(100%);
	transition: transform .3s;
  }
  .nav-links.active {
	transform: translateX(0);
  }

  .nav-links li {
    margin: 10px 0;
  }

  .hamburger {
    display: flex;
  }
	.hamburger.active {
		position: relative;
	}
	.hamburger.active span:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}
	.hamburger.active span:nth-child(2) {
		opacity: 0;
	}
	.hamburger.active span:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}
  .nav.active .nav-links {
    display: flex;
  }
}
.slider {
	background-color: var(--light-background);
	height: calc((var(--header-height, 0px) * 2) + 68vw);
	position: relative;
	padding: 0;
	overflow: hidden;
}
.slider h1 {
	font-family: "Montserrat", sans-serif;
	font-size: 50px;
	font-weight: 700;
	font-size: 6vw;
	line-height: .9;
	width: 55vw;
	text-transform: uppercase;
}
.slide {
	--slider-img-offset: 14.6vw;
	--slider-header-offset: 10.95vw;
}
.slide .content > * {
	position: absolute;
}
.slideBackgroundImage {
	top: calc(var(--header-height, 0px) + 5vw);
    right: 0;
    width: 65.77vw;
	opacity: 0;
	animation: reveal 2s forwards;
}
.slideMainImage {
	bottom: calc(var(--header-height, 0px) + 4vw);
    right: var(--slider-img-offset);
	transform: translateX(calc(100% + var(--slider-img-offset)));
	animation: flash 1s ease-in-out 1.5s, slideIn 1s forwards 1s;
	width: 32vw;
	filter: blur(.6px);
}
.slideHeaderText {
	top: calc(var(--header-height, 0px) + 13vw);
	left: var(--slider-header-offset);
	transform: translateX(calc(-100% - var(--slider-header-offset)));
	animation: slideIn 1s forwards 2s;
}
.slideProductImage {
	top: calc(var(--header-height, 0px) + 33.5vw);
	width: 20.44vw;
	left: var(--slider-header-offset);
	transform: translateY(100%);
	opacity: 0;
	animation: fadeIn 1s ease-in-out forwards 2s, slideIn 1s forwards 2s;
	filter: blur(.6px);
}
.slideLinkButton {
	top: calc(var(--header-height, 0px) + 58vw);
	left: var(--slider-header-offset);
	clip-path: inset(0 100% 0 0);
	animation: clipPathAnim .5s ease-in-out forwards 3s;
}
@media (min-width: 769px) {
	.slide .content > * {
		--header-height: 0px;
	}
}
.cta-button {
	border: 2px solid var(--accent-color);
	padding: 10px 60px 10px 10px;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	color: var(--brand-color);
	text-decoration: none;
	text-transform: uppercase;
	transition: color .3s ease-in-out;
}
.cta-button:hover {
	color: #fff;
}
.cta-button::after {
	content: '>';
	background: var(--accent-color);
	position: absolute;
	height: 100%;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 1.5em;
	color: #fff;
	width: 40px;
	transition: width .3s ease-in-out;
	padding-right: 12px;
	z-index: -1;
}
.cta-button:hover::after {
	width: 100%;
}
.about-section-body p {
	font-size: var(--font-2x);
	width: 90%;
}
.about-section-products {
	width: 100%;
	aspect-ratio: 1/.65;
	position: relative;
}
.about-section-products > * {
	position: absolute;
	width: auto;
}
.about-section-products {
	transition: scale .3s ease-in-out;
}
.about-section-products img {
	width: 100%;
	transition: scale .3s ease-in-out;
}
.about-section-products .about-section-product:nth-child(1) {
	width: 26.2%;
	transition: scale 0.3s ease-in-out;
}
.about-section-products .about-section-product:nth-child(2) {
	width: 25%;
	transition: scale 0.3s ease-in-out;
}
.about-section-products .about-section-product:nth-child(3) {
	width: 33.01%;
	transition: scale 0.3s ease-in-out;
}
.about-section-products .about-section-product.fade-out {
	scale: .9;
}
.about-section-products .about-section-product:hover {
	scale: 1.1;
	z-index: 10;
}
.about-section-products .about-section-product:nth-child(1) {
	top: 17%;
	left: 8%;
}
.about-section-products .about-section-product:nth-child(2) {
	top: 18%;
	left: 33.63%;
	z-index: 1;
}
.about-section-products .about-section-product:nth-child(2) {
	clip-path: polygon(0% 0%, 70% 0%, 70% 83%, 100% 83%, 100% 100%, 0% 100%);
	clip-path: unset;
}
.about-section-products .about-section-product:nth-child(2) img {
	clip-path: polygon(0% 0%, 70% 0%, 70% 83%, 100% 83%, 100% 100%, 0% 100%);
	clip-path: unset;
}
.about-section-products .about-section-product:nth-child(3) {
	left: 54.89%;
	top: 23%;
}
.advantage {
	display: flex;
	align-items: center;
	border-radius: 20px;
	padding: 2.5% 5%;
	margin: 2% 0;
	gap: 2rem;
}
.advantage:nth-child(1) {
	background: var(--icon-color-1);
}
.advantage:nth-child(2) {
	background: var(--icon-color-2);
}
.advantage:nth-child(3) {
	background: var(--icon-color-3);
}
.advantage.scroll-animate:nth-child(odd) {
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	transition: clip-path .3s ease-in-out;
}
.advantage.scroll-animate:nth-child(even) {
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	transition: clip-path .3s ease-in-out;
}
.advantage.scroll-animate.visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.section-header {
    position: relative;
    text-align: center;
}
.section-header img {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.section-header h2 {
    font-family: 'Montserrat';
    font-size: var(--font-2x);
    margin-bottom: 3rem;
    text-transform: uppercase;
    font-weight: 700;
}
.advantage-icon img {
	width: clamp(200px, 24.45vw, 335px);
}
.products-container {
	display: flex;
	gap: 1rem;
	text-align: center;
	flex-wrap: wrap;
}
.products-info {
	margin: 3rem 0;
	padding: 0 3rem;
}
.product {
	flex-basis: 90%;
	flex-grow: 1;
	margin-bottom: 2rem;
}
.product-image {
	margin-bottom: 1rem;
}
.products-container img {
	width: 50vw;
}
@media (min-width: 650px) {
	.product {
		flex-basis: 40%;
	}
	.products-container img {
		width: 35vw;
	}
}
@media (min-width: 1000px) {
	.product {
		flex-basis: 30%;
	}
	.products-container img {
		width: 20vw;
	}
}
.description-container {
	display: flex;
	position: relative;
}
.description-container > div:nth-child(1) {
	flex-basis: 60%;
}
.description-container > div:nth-child(2) {
	flex-basis: 40%;
}
.description-text {
	padding: 2rem 2rem 2rem 0;
}
.description-text p {
	margin: 1rem 0;
}
.description-image {
	font-size: 0;
}
.description-image img {
	position: absolute;
	width: 36.79vw;
	top: -2.19vw;
}
.product-flexus-shots {
	--hero-background: linear-gradient(180deg, #c7e1ef, #a7d2ec);
	--ratings-background: #13282d;
	--ratings-text: #fff;
}
.product-flexus {
	--hero-background: linear-gradient(180deg, #f0f1a3, #d6cf62);
	--ratings-background: #062f3c;
	--ratings-text: #fff;
}
.product-flexus {
	--hero-background: linear-gradient(180deg, #c7e1ef, #a7d2ec);
	--ratings-background: #13282d;
	--ratings-text: #fff;
}
.product-flexus-booster {
	--hero-background: linear-gradient(180deg, #c49f75, #9e6538);
	--hero-background: linear-gradient(180deg, #e2d0bb, #cd9870);
	--ratings-background: #d2d0ce;
	--ratings-text: #000;
}
.product-flexus-fluid {
	--hero-background: linear-gradient(180deg, #d0dfe1, #6e8f91);
	--ratings-background: #092426;
	--ratings-text: #fff;
}
.product-flexus-fluid {
	--hero-background: linear-gradient(180deg, #c7e1ef, #a7d2ec);
	--ratings-background: #13282d;
	--ratings-text: #fff;
}

.product-flexus-fluid-one {
	--hero-background: linear-gradient(180deg, #b18b3f, #976136);
	--ratings-background: #edd7b5;
	--ratings-text: #000;
}
.product-flexus-fluid-one {
	--hero-background: linear-gradient(180deg, #c49f75, #9e6538);
	--hero-background: linear-gradient(180deg, #e2d0bb, #cd9870);
	--ratings-background: #d2d0ce;
	--ratings-text: #000;
}
section.product-hero {
	display: flex;
	align-items: center;
	gap: 2rem;
	background: var(--hero-background, #fff);
	padding-bottom: 10.95vw;
	flex-wrap: wrap;
}
.product-hero-image {
	position: relative;
	text-align: right;
}
.product-hero > *{
	flex-basis: 95%;
	flex-grow: 1;
}
.product-hero-buttons {
	display: flex;
	align-items: center;
	margin-top: 1em;
	gap: 1em;
}
.product-hero .cta-button {
	font-size: var(--font-08x);
	margin-left: 0;
	background: none;
	color: var(--accent-color);
	fill: var(--accent-color);
	padding: 0.5em 1em;
}
.product-hero .cta-button-alt {
	background: var(--accent-color);
	color: #ffffff;
	fill: #ffffff;
}
.product-hero .cta-button svg {
	width: clamp(15px,1.89vw,20px);
	position: relative;
    top: 0.2em;
}
@media (min-width: 769px) {
	.product-hero > *{
		flex-basis: 45%;
	}
}
.product-hero-headline, .info-page-header-headline {
	font-size: var(--font-1x);
	font-weight: 700;
	text-transform: uppercase;
	line-height: .9;
	margin-bottom: 0;
}
.product-hero-name, .info-page-header-name {
	font-family: 'Montserrat', sans-serif;
	font-size: var(--font-4x);
	font-weight: 700;
	line-height: .7;
	margin-left: -0.3rem;
	margin-bottom: 2rem;
	text-transform: uppercase;
}
.product-hero-name span {
	font-size: var(--font-5x);
	display: block;
	line-height: 1;
}
.product-ratings {
	padding-top: 0;
}
.product-ratings-container {
	background: var(--ratings-background);
	color: var(--ratings-text);
	transform: translateY(-50%);
	display: flex;
	border-radius: 20px;
	padding: 1rem 2rem;
	align-items: center;
	gap: 1rem;
	flex-direction: column-reverse;
}
.product-ratings-container > * {
	flex-basis: 95%;
	flex-grow: 1;
}
.product-ratings-container > *:first-child {
	text-align: center;
}
@media (min-width: 800px) {
	.product-ratings-container {
		background: var(--ratings-background);
		color: var(--ratings-text);
		transform: translateY(-50%);
		display: flex;
		border-radius: 20px;
		padding: 1rem 2rem;
		align-items: center;
		gap: 1rem;
		flex-direction: row;
	}
	.product-ratings-container > * {
		flex-basis: 45%;
		flex-grow: 1;
	}
	.product-ratings-container > *:first-child {
		text-align: left;
	}
}
.product-ratings-rating {
	text-align: center;
}
.product-ratings-number {
	font-size: 1.5rem;
    font-weight: 700;
}
.product-ratings-count {
	font-size: .8rem;
    margin-top: 0.3rem;
}
.product-ratings-stars-container {
	position: relative;
	margin: 0 auto;
    width: fit-content;
}
.product-ratings-stars {
	display: flex;
	stroke-width: 1rem;
	width: fit-content;
}
.product-ratings-stars svg {
	width: 1rem;
	height: 1rem;
}
.stars-empty {
	fill: none;
	stroke: var(--accent-color);
}
.stars-full {
	--percent: calc((var(--rating) / 5) * 100%);
	fill: var(--accent-color);
	stroke: var(--accent-color);
	clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
	position: absolute;
	top: 0;
	left: 0;
	transition: clip-path .5s ease-in-out;
}
.stars-full.visible {
	clip-path: polygon(0% 0%, var(--percent) 0%, var(--percent) 100%, 0% 100%);
}
.product-who {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
#product-who-video {
	max-width: 100%;
	aspect-ratio: 1;
}
.product-who > * {
	flex-basis: 95%;
	flex-grow: 1;
}
.product-who .image-container, .product-who .video-container {
	text-align: center;
}
@media (min-width: 769px) {
	.product-who .image-container, .product-who .video-container {
		text-align: right;
	}
}
.product-who ul {
	list-style: none;
	width: 100%;
}
.product-who li, .collagen-list-functions li {
	display: flex;
	align-items: center;
	background: var(--ratings-background);
	border-radius: 10px;
	margin: 1rem 0rem;
	padding: 0.5rem 1rem 0.5rem 0;
	color: var(--ratings-text);
	fill: var(--accent-color);
	font-size: 1rem;
}
.product-who li > svg, .collagen-list-functions li > svg {
	flex-basis: 15vw;
	flex-grow: 0;
	flex-shrink: 0;
}
.product-advantages {
	align-items: center;
}
.product-advantages ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin-left: 0%;
	gap: 1rem;
}
.product-advantages li {
	flex-basis: 45%;
	flex-grow: 1;
	border: 2px solid var(--ratings-background);
	border-radius: 10px;
	padding: 1rem;
	text-align: center;
	display: flex;
	align-items: center;
	font-size: 1rem;
	background: var(--ratings-background);
	color: var(--ratings-text);
	flex-direction: column;
}
.product-advantages li span {
	font-weight: 700;
	margin-bottom: .5em;
}
.product-medical-info-container, .product-medical-info-container .text-container, a.cta-button-alt {
	display: flex;
	align-items: center;
	gap: 1em;
}
.product-medical-info-container {
	border: 2px solid var(--ratings-background);
	border-radius: 10px;
	padding: 1em;
	flex-direction: column;
}
.product-medical-info-container > * {
	flex-basis: 45%;
	flex-grow: 1;
}
a.cta-button-alt {
	width: fit-content;
	margin-left: auto;
	padding: .5em 1em;
	background: var(--accent-color);
	color: var(--ratings-text);
	fill: var(--ratings-text);
}
a.cta-button-alt::after {
	content: none;
}
.product-medical-info-container .text-container svg {
	width: clamp(40px,3.65vw,50px);
}
a.cta-button-alt svg {
	width: clamp(20px,2.19vw,30px);
	position: relative;
	top: .2em;
}
.product-medical-info-container .text-container span {
	font-weight: 700;
}
.product-ingredients-container {
	width: 80%;
    margin: 0 auto;
}
.product-ingredients-container .product-image {
	margin-bottom: 0;
	padding-right: 3rem;
}
.product-ingredients-list {
	border-top: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
	padding: 2rem 0;
	margin-top: 2rem;
	display: flex;
	gap: 3rem;
	align-items: center;
	flex-wrap: wrap;
}
@media (min-width: 769px) {
	.product-who > * {
		flex-basis: 45%;
	}
	.product-who ul {
		width: 80%;
	}
	.product-who li > svg, .collagen-list-functions li > svg {
		flex-basis: 5vw;
	}
	.product-advantages ul {
		margin-left: 10%;
	}
	.product-ingredients-list > * {
		flex-basis: 45%;
		flex-grow: 1;
	}
	.product-medical-info-container {
		flex-direction: row;
	}
}

.product-ingredients-list ul {
	list-style: none;
}
.product-ingredients-list li {
	margin-bottom: .8rem;
	font-size: 1rem;
	line-height: 1;
	position: relative;
}
.product-ingredients-list li strong {
	display: block;
	font-size: 1.2rem;
	line-height: 1.2;
}
.product-ingredients-list li span {
	padding: 0.5em 0;
	height: 100%;
	display: block;
	color: var(--accent-color);
	font-weight: 700;
	text-align: left;
	border-bottom: 1px solid;
}
.product-ingredients-list li:last-child span {
	border-bottom: none;
}
@media (min-width: 1440px) {
	.product-ingredients-list ul {
		max-width: 650px;
	}
	.product-ingredients-list li {
		padding-right: 6em;
	}
	.product-ingredients-list li span {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
		margin-left: 1em;
		background: var(--accent-color);
		padding: 0.5em;
		display: inline-flex;
		align-items: center;
		border-radius: 5px;
		color: #fff;
		height: fit-content;
	}
}
.product-testimonials h2 {
	margin-bottom: 1rem;
}
.product-testimonial-body {
	background: var(--ratings-background);
	color: var(--ratings-text);
	border-radius: 10px;
	padding: 1rem;
	font-size: 1rem;
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.product-testimonial-body .product-ratings-stars-container {
	margin: 0;
	margin-top: 1rem;
}
.product-testimonial-text {
	font-style: italic;
}
.product-testimonial-author {
	margin-top: 1rem;
}
.products-list-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.products-list-container a {
	text-decoration: none;
	color: #000;
	transition: color .3s ease-in-out;
}
.products-list-container a:hover {
	color: #fff;
}
.products-list-container > * {
	flex-basis: 25%;
	flex-grow: 1;
}
.product-item {
	position: relative;
	padding: 2rem;
	background: var(--icon-color-3);
	display: flex;
	border-radius: 20px;
	overflow: hidden;
	transition: background .3s ease-in-out;
	padding-right: 4rem;
}
.product-item:hover {
	background: var(--accent-color);;
}
.product-item > h3 {
	font-size: calc(var(--font-2x) * .7);
	line-height: 1;
	text-transform: uppercase;
}
.product-item > h3 span {
	display: block;
	font-size: var(--font-2x);
}
.product-item > img {
	margin-left: auto;
	display: block;
	width: 60%;
	transition: transform .3s ease-in-out;
}
.product-item:hover > img {
	transform: scale(1.2);
}
.info-page-header-headline, .info-page-header-name {
	line-height: 1;
	margin-bottom: 0;
}
.info-page-header-name {
	font-size: var(--font-3x);
}
.collagen-list {
	padding-top: 2rem;
}
.collagen-list-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.collagen-list-container > div {
	flex-basis: 90%;
	flex-grow: 1;
}
.collagen-item {
	--ratings-background: var(--icon-color-2);
}
.collagen-item h3 {
	border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
	position: relative;
	transition: background .3s ease-in-out, color .3s ease-in-out;
}
.collagen-item:nth-child(even) h3 {
    background: var(--icon-color-1);
}
.collagen-item:nth-child(odd) h3 {
    background: var(--icon-color-2);
}
.collagen-item:not(.is-open):hover h3 {
	background: var(--accent-color);
	color: #fff;
}
.collagen-item.is-open h3 {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background: var(--accent-color);
	color: #fff;
}
.collagen-item button {
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	font-weight: 400;
	text-transform: uppercase;
	cursor: pointer;
}
.collagen-item button::before, .collagen-item button::after {
	position: absolute;
	right: 1em;
	content: "";
	display: block;
	width: 1em;
	height: 3px;
	background: currentcolor;
	transition: transform 500ms;
	top: 50%;
	transform: translateY(-50%);
}
.collagen-item button::after {
	rotate: 90deg;
	translate: -0.05em -0.08em;
}
.collagen-item ul {
	list-style: none;
}
.collagen-item-details {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s;
	border: 2px solid transparent;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.collagen-item.is-open .collagen-item-details {
	border: 2px solid var(--icon-color-1);
	border: 2px solid var(--accent-color);
	grid-template-rows: 1fr;
}
.collagen-item-details > div {
	overflow: hidden;
	align-items: center;
}
.collagen-item-description, .collagen-item-list-container {
	padding: 1rem;
}
.collagen-item.is-open button::before,
.collagen-item.is-open button::after {
  transform: rotate(45deg);
}
.collagen-item.is-open button::after {
  translate: 0 -0.01em;
}
.collagen-info-container {
	align-items: center;
}
.collagen-info-container {
	margin-bottom: 5vw;
}
.collagen-info-container:last-child {
	margin-bottom: 0vw;
}
.collagen-info-container:first-child .text-container p, .collagen-info-container:first-child .text-container h2 {
	margin-bottom: .5em;
}
.collagen-info-container .image-container {
	text-align: left;
	order: 2;
	
}
.collagen-info-container ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	list-style: none;
}
.collagen-info-container li {
	flex-basis: 95%;
	flex-grow: 1;
	background: var(--accent-color);
	padding:1em;
	border-radius: 10px;
	font-size: .8em;
	color: #fff;
	text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.collagen-info-container li span {
	font-weight: 700;
	margin-bottom: .5em;
}
.collagen-info-background {
	background: url(/images/collagen/collagen_01.webp);
    background-size: cover;
    background-repeat: no-repeat;
	background-attachment: fixed;
}
.collagen-info-background .text-container {
	padding: 2em;
    text-align: center;
}
.collagen-info-background .text-container p {
	width: 95%;
    margin: 0 auto;
    background: #fff;
    padding: 1em;
    border-radius: 10px;
}
@media (min-width: 500px) {
	.collagen-info-container li {
		flex-basis: 45%;
	}
}
@media (min-width: 1024px) {
	.collagen-info-container li {
		flex-basis: 20%;
	}
}
@media (min-width: 769px) {
	.collagen-info-container:first-child .text-container p, .collagen-info-container:first-child .text-container h2 {
		width: 80%;
	}
	.collagen-info-background .text-container p {
		width: 50%;
	}
	.collagen-info-container .image-container {
		text-align: right;
		order: 1;
		
	}
}
#description {
	display: flex;
    align-items: center;
	background: var(--ornament-color);
}
@keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(3);
  }
  50% {
    filter: brightness(1);
  }
  70% {
    filter: brightness(4);
  }
  100% {
    filter: brightness(1);
  }
}
@keyframes slideIn {
	100% {
		transform: translate(0,0);
	}
}
@keyframes fadeIn {
	100% {
		opacity: 1;
	}
}
@keyframes horizontalMove {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(150px);
  }
  75% {
    transform: translateX(-50px);
  }
}
@keyframes clipPathAnim {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0% 0 0);
  }
}

.info-page-header {
	position: relative;
	padding-bottom: 3rem;
	background: var(--page-main-color);
	padding-top: clamp(200px, 15vw, 300px);
}
.page-products {
	--page-main-color: var(--icon-color-3);
}
.page-joints {
	--page-main-color: var(--icon-color-2);
	--page-secondary-color: var(--icon-color-3);
}
.page-collagen {
	--page-main-color: var(--icon-color-1);
}
.page-contact {
	--page-main-color: var(--light-background);
}
.first-page-section {
	padding-top: 10vw;
	position: relative;
}
.first-page-section > svg {
	position: absolute;
    width: 100%;
    top: -1px;
    left: 0;
    fill: var(--page-main-color);
}
.collagen-info.collagen-info-reverse .text-container, .reverse .text-container {
	order: 2;
}
.collagen-info.collagen-info-reverse .image-container {
	text-align: left;
}
.joints-why {
	align-items: center;
}
.joints-why ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0%;
    gap: 1rem;
	margin-bottom: 2rem;
}
.joints-why li {
    flex-basis: 95%;
    flex-grow: 1;
    border: 2px solid var(--ornament-color);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    font-size: 1rem;
    color: var(--ratings-text);
	gap: 1em;
	font-size: var(--font-05x);
	align-items: center;
}
.joints-why li > .text-container span:nth-child(1) {
	font-weight: 700;
	display: block;
	margin-bottom: .5em;
}
.joints-why li > *:nth-child(1) {
	flex-basis: 20%;
	border-radius: 10px;
	background: var(--icon-color-1);
}
.joints-why li > *:nth-child(2) {
	flex-basis: 80%;
}
.joints-why li img {
	width: 100%;
	max-width: 150px;
	display: block;
	margin: 0 auto;
}
.joints-what-to-do-list {
	padding: 1rem 0;
}
.joints-what-to-do-list ul {
	list-style: none;
	display: flex;
	gap: 1rem;
	margin: 1rem 0;
	flex-wrap: wrap;
}
.joints-what-to-do-list li {
	flex-basis: 20%;
	flex-grow: 1;
	display: flex;
	gap: .5rem;
	flex-direction: column;
	padding: 2rem;
	border-radius: 20px;
	background: var(--icon-color-1);
	font-size: 1rem;
}
.joints-what-to-do-list svg {
	fill: var(--brand-color);
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto;
}
.joints-what-to-do-list p {
	text-align: center;
}
.joints-what-to-do-list .list-header {
	font-weight: 700;
	color: var(--brand-color);
	font-size: 1.1rem;
}
.joints-what-to-do .section-footer {
	width: 90%;
	margin: 0 auto;
}
@media (min-width: 769px) {
	.joints-why ul {
		margin-left: 10%;
		margin-bottom: 0;
	}
	.joints-what-to-do .section-footer {
		width: 50%;
	}
}
.joints-what-to-do-products {
	position: relative;
	background: var(--page-main-color);
	margin-top: 2rem;
	padding-top: 10vw;
	padding-bottom: 3rem;
}
.joints-what-to-do-products > svg {
	position: absolute;
	top: 0;
	left: 0;
	fill: #fff;
}
.joints-what-to-do-products h3 {
	font-size: var(--font-1x);
	text-transform: uppercase;
}
.joints-what-to-do-products img {
	width: 60%;
	filter: blur(.6px);
}
.joints-what-to-do-products-list {
	margin-top: 2rem;
}
.joints-what-to-do-products-list a {
	text-decoration: none;
	color: #000;
	text-align: center;
}
.joints-what-to-do-products-list h6 {
	text-transform: uppercase;
	font-weight: 700;
}
.page-footer {
	margin-top: 5rem;
	background: rgba(0,0,0);
	color: var(--icon-color-3);
	font-size: .9rem;
	padding-bottom: 3rem;
}
.footer_container {
	padding: 3rem 5.47vw;
}
.footer_container > * {
	flex-basis: 90%;
	flex-grow: 1;
	text-align: center;
	margin-bottom: 1.5rem;
}
.footer_container > *:first-child {
	flex-basis: 90%;
	flex-grow: 1;
	text-align: center;
}
@media (min-width: 500px) {
	.footer_container > * {
		flex-basis: 45%;
		flex-grow: 1;
	}
	.footer_container > *:first-child {
		flex-basis: 90%;
		flex-grow: 1;
		text-align: center;
	}
}
@media (min-width: 800px) {
	.footer_container > * {
		flex-basis: 30%;
		flex-grow: 1;
		text-align: left;
	}
	.footer_container > *:first-child {
		flex-basis: 90%;
		flex-grow: 1;
		text-align: center;
	}
}
@media (min-width: 1100px) {
	.footer_container > * {
		flex-basis: 23%;
		flex-grow: 1;
		text-align: left;
	}
	.footer_container > *:first-child {
		flex-basis: 23%;
		flex-grow: 1;
		text-align: left;
	}
}
.footer_info_header p {
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: .5rem;
}
.footer_container a {
	color: #fff;
	transition: color .3s ease-in-out;
}
.footer_container a:hover {
	color: var(--accent-color);
}
.page-footer > p {
	text-align: center;
}
.footer-disclaimers {
	display: grid;
	gap: 1rem;
	padding: 0 5.47vw;
	margin-top: .5rem;
}
.footer-disclaimer-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(219, 158, 24, 0.45);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	color: #fff;
}
.footer-disclaimer-card p {
	margin: 0;
	line-height: 1.5;
	font-size: .88rem;
}
.footer-disclaimer-card strong {
	color: var(--accent-color);
	text-transform: uppercase;
}
@media (min-width: 900px) {
	.footer-disclaimers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
	}
}
.footer_legal_links {
	margin: 1.5rem 0 .5rem;
}
.footer_legal_links .footer_info_body p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1rem;
}
.footer_legal_links .footer_info_body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.legal-page {
	background: #f5f5f5;
}
.legal-page-main {
	padding: 120px 5.47vw 4rem;
}
.legal-page-card {
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
	border-radius: 14px;
	padding: 1.5rem 1.25rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.legal-page-card h1 {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	margin-bottom: 1rem;
}
.legal-page-card h2 {
	margin-top: 1.3rem;
	margin-bottom: .55rem;
	font-size: 1.15rem;
}
.legal-page-card p,
.legal-page-card li {
	line-height: 1.6;
}
.legal-page-card ul {
	padding-left: 1.1rem;
}
.legal-page-card .meta {
	color: #555;
	font-size: .92rem;
}
@media (min-width: 900px) {
	.legal-page-card {
		padding: 2rem;
	}
}
.contact-info-container {
	margin-bottom: 3rem;
	gap: 2em;
	align-items: center;
}
.contact-info-container ul {
	list-style: none;
}
.contact-info-container li {
	background: var(--icon-color-3);
	width: fit-content;
	padding: .5rem 1rem;
	border-radius: 10px;
	margin-bottom: 1rem;
	transition: background .3s ease-in-out;
}
.contact-info-container li:hover {
	background: var(--accent-color);
}
.contact-info-container li .contact-info {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.contact-info-container a {
	color: #000;
	text-decoration: none;
	transition: color .3s ease-in-out;
}
.contact-info-container li:hover a {
	color: #fff;
}
.contact-info-container li svg {
	fill: #000;
	transition: fill .3s ease-in-out;
}
.contact-info-container li:hover svg {
	fill: #fff;
}
.contact-info-container p {
	margin-top: 3rem;
	margin-bottom: 1rem;
	font-weight: 700;
	text-transform: uppercase;
}
@media screen and (min-width: 1024px) {
	.collagen-list-container > div {
		flex-basis: 30%;
	}
	.collagen-item-details > div > * {
		flex-basis: 95%;
	}
	.collagen-item-list-container {
		padding-top: 0;
	}
	.collagen-item-description {
		padding-top: 2rem;
	}
	.collagen-list-functions li:first-child {
		margin-top: 0;
	}
}


.cookieBannerWrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: rgba(0,0,0,.8);
	font-family: Montserrat;
	font-size: 13px;
	line-height: 1.3;
	position: fixed;
	z-index: 9999999999;
	width: 100%;
	top: 0;
	display: none;
	color: var(--brand-color);
}
.cookieBannerContainer {
	width: clamp(320px, 80vw, 700px);
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	transition: .5s;
	max-height: 90vh;
	overflow-y: auto;
}
.cookieBannerContainer > p {
	margin-bottom: .8rem;
	font-size: 13px;
	line-height: 1.3;
}
p.cookieBannerHeader {
	font-weight: bold;
	font-size: 15px;
}
.cookieBannerQuestion {
	font-weight: bold;
}
.cookieBannerCheckboxesContainer, .cookieBannerButtonsContainer {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin:1.5rem 0;
	flex-wrap: wrap;
}
.cookieBannerCheckboxesContainer {
	margin-top: 1rem;
}
.cookieBannerCheckbox {
	display: flex;
	align-items: center;
}
.cookieBannerCheckbox label {
	position: relative;
	width: 45px;
	height: 20px;
	display: inline-block;
	cursor: pointer;
	margin-right: .8rem;
}
.cookieBannerCheckbox label input {
	position: relative;
	z-index: -1;
	appearance: none;
	opacity: 0;
}
.cookieBannerCheckbox p {
	font-size: 13px;
}
.cookieBannerCheckbox label span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--brand-color);
	border-radius: 20px;
	transition: .5s;
}
.cookieBannerCheckbox label span i {
	position: absolute;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	top: 2px;
	left: 2px;
	transition: .5s;
}
.cookieBannerCheckbox label input:checked ~ span {
	background: var(--accent-color);
}
.cookieBannerCheckbox label input:checked ~ span i {
	left: 27px;
}
.cookieBannerCheckbox label input:disabled ~ span {
	background: #ddd;
}
.cookieBannerButtonsContainer button {
	display: inline-block;
	margin: 10px 10px 0 10px;
	width: 250px;
	background-color: var(--accent-color);
	color: #fff;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 400;
	padding: 6px 20px;
	transition: all .5s;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background-color 500ms, color 500ms;
}
#cookieBannerCustomiseOptions {
	background: none;
	text-decoration: underline;
	color: var(--icon-color-2);
}
#cookieBannerAllowSelectedButton {
	background: none;
	border: 1px solid var(--accent-color);
	color: var(--brand-color);
}
.cookieBannerButtonsContainer button:hover {
	background-color: var(--brand-color);
	border: none;
	color: #fff;
}
#cookieBannerCustomiseOptions:hover {
	background-color: var(--brand-color);
	border: none;
	color: #fff;
}
#cookieBannerAllowSelectedButton:hover {
	background-color: var(--brand-color);
	border: 1px solid var(--brand-color);
	color: #fff;
}
.cookieBannerContainer a {
	color: #000;
	font-weight: bold;
}
.cookieBannerOptionsContainer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 500ms;
}
.cookieBannerOptionsContainer.cookieBannerOptionsActive {
	grid-template-rows: 1fr;
}
.cookieBannerOptionsContainer > div {
	overflow: hidden;
}
@media screen and (max-width: 600px) {
	.cookieBannerCheckboxesContainer {
		flex-direction: column;
		align-items: flex-start;
	}
	.cookieBannerCheckboxesContainer > div {
		margin-bottom: .8rem;
	}
}