@import url("https://ch-api.healthhub.sg/api/public/content/0ee497367b3d463c98f31fe21f1cfa94");

.hpb-container.nutrition .intro .masthead {
	background: url(https://ch-api.healthhub.sg/api/public/content/3a249f6e64144adeba258c94e3a5df73?v=66e75cf2) center center/cover no-repeat;
}

.hpb-container.nutrition .explore-my-healthy-plate .nav-tabs {
	position: relative;
	max-width: 564px;
	margin: auto;
	padding: 0;
	border: 0;
}

.hpb-container.nutrition .explore-my-healthy-plate .nav-tabs::before {
	content: "";
	display: block;
	padding-bottom: 91.135%;
}

.hpb-container.nutrition .explore-my-healthy-plate .nav-tabs li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.hpb-container.nutrition .explore-my-healthy-plate .nav-tabs li>img {
	opacity: 0;
	-webkit-transition: opacity 0.2s ease-in;
	-o-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}

.hpb-container.nutrition .explore-my-healthy-plate .nav-tabs li a {
	position: absolute;
	z-index: 1;
	background: transparent;
	cursor: pointer;
	border: 0;
}

.hpb-container.nutrition .explore-my-healthy-plate .nav-tabs li.active>img {
	opacity: 1;
}

.hpb-container.nutrition .explore-my-healthy-plate .nav-tabs li:nth-child(1) a {
	left: 19%;
	top: 19.75%;
	width: 31%;
	height: 33%;
	border-radius: 1000px 0 0 0;
}

.hpb-container.nutrition .explore-my-healthy-plate .nav-tabs li:nth-child(2) a {
	left: 19%;
	top: 52.5%;
	width: 31%;
	height: 33.75%;
	border-radius: 0 0 0 1000px;
}

.hpb-container.nutrition .explore-my-healthy-plate .nav-tabs li:nth-child(3) a {
	left: 50%;
	top: 19.75%;
	width: 30%;
	height: 66.5%;
	border-radius: 0 1000px 1000px 0;
}

.hpb-container.nutrition .healthier-and-delicious-recipes .slick-slider .slick-dots {
	bottom: -60px;
}

@media screen and (max-width: 767px) {
	.hpb-container.nutrition .healthier-and-delicious-recipes .slick-slider .slick-dots {
		bottom: 3.5vw;
	}

	.hpb-container.nutrition .healthier-and-delicious-recipes .slick-slider .slick-dots li.slick-active button {
		border: 1px solid #fff;
	}
}

@media (min-width: 768px) {
	.hpb-container.nutrition .what-makes-up-a-wholegrain .adjust-image {
		-webkit-transform: translate(11.8556701031%, 0);
		-ms-transform: translate(11.8556701031%, 0);
		transform: translate(11.8556701031%, 0);
	}
}

.hpb-container.nutrition .what-makes-up-a-wholegrain .number-circle {
	line-height: 3em;
	width: 3em;
	font-weight: bold;
	padding: 0;
}

@media (max-width: 767px) {
	.hpb-container.nutrition .how-do-i-start-eating-wholegrains .img-rice {
		width: 70px;
	}

	.hpb-container.nutrition .how-do-i-start-eating-wholegrains .img-arrow {
		width: 85px;
	}
}

.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips {
	border: 1px solid #707070;
	border-radius: 10px;
}

@media (max-width: 767px) {
	.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips {
		padding-bottom: 13vw;
	}
}

.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips .tip-wrapper {
	padding: 25px 15px 15px;
}

@media (min-width: 768px) {
	.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips .tip-wrapper {
		padding: 35px 60px 25px;
	}
}

@media (max-width: 767px) {
	.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips .tips-slider {
		margin-bottom: 0;
	}

	.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips .tips-slider .slick-arrow {
		top: 50%;
	}

	.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips .tips-slider .slick-arrow.slick-prev {
		left: 0;
	}

	.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips .tips-slider .slick-arrow.slick-next {
		right: 0;
	}
}

/* 2025.10.23 */
@media (min-width: 768px) {
	.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips .slick-slider .slick-arrow {
		top: calc(50% + 30px);
	}

	.hpb-container.nutrition .how-to-use-the-nutrition-information-panel-nip .cooking-oil-tips .tip-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 35px 60px 0;
	}
}