form@charset "UTF-8";

/* CSS Document */
@font-face {
	font-family: 'PPHatton-UltralightItalic';
	src: url('/fonts/PHatton-UltralightItalic.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PPHatton-Mediumitalic';
	src: url('/fonts/PPHatton-MediumItalic.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'PPHatton-BoldItalic';
	src: url('/fonts/PPHatton-BoldItalic.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PPHatton-UltraLight';
	src: url('/fonts/PPHatton-Ultralight.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PPHatton-Medium';
	src: url('/fonts/PPHatton-Medium.woff2') format('woff2');
	font-style: normal;
	font-style: normal;
}

@font-face {
	font-family: "PPHatton-Bold";
	src: url('/fonts/PPHatton-Bold.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

.montserrat-<uniquifier> {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

body {
	text-decoration: none;
	font-size: 12px;
	margin: 0;
	color: black;
}

.mySlides {
	display: none;
}

#footer {
	background-color: white;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-weight: normal
}

ul {
	margin: 0;
	padding: 0 0 0 8%;
}

l1 {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#subscr_tab {
	display: none;
}

.cny-hold-text {
	position: relative;
	display: block;
	width: auto;
	height: auto;
	padding: 2vw 0;
	text-align: center;
	font-family: "Montserrat", sans-serif;
	font-size: 1vw;
	color: #3A1E39;
}

.grandp-wrapper {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin-top: 0;
	overflow: hidden;
}

.grandp-wrapper img {
	display: block;
	width: 100%;
}

/* MENU BANNER */
.grandp-menu-mobile {
	display: none;
}

.grandp-menu {
	display: block;
	position: fixed;
	top: 84px;
	padding: 0;
	box-sizing: border-box;
	width: 100%;
	height: 80px;
	text-align: center;
	background-color: #88D3C8;
	z-index: 9000;
	border-bottom: 0.5px solid white;
}

.grandp-menu-text {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: auto;
	height: auto;
	padding: 0 .9vw;
	align-items: center;
	font-family: "Montserrat", sans-serif;
	font-size: 1.15vw;
	line-height: 80px;
	color: #3A1E39;
}

.grandp-menu-text a:link {
	color: #3A1E39;
	text-decoration: none;
}

.grandp-menu-text a:visited {
	color: #3A1E39;
}

.grandp-menu-text a:hover {
	color: #E50882;
}

.grandp-menu-text a:active {
	color: #3A1E39;
}

#welcome,
#win-a-wish,
#video,
#meet-kee-kee,
#recipes,
#mix-match {
	top: -164px;
	position: absolute;
}

/*grandp-KV*/
.grandp-kv-mobile {
	display: none;
}

.grandp-kv {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 53vw;
	margin-top: 60px;
	overflow: hidden;
	background-color: #471E3A;
}

.grandp-kv img {
	display: block;
	width: 100%;
}

.grandp-frame {
	display: block;
	position: absolute;
	box-sizing: border-box;
	width: 83%;
	height: 45vw;
	top: 3vw;
	left: 9%;
	overflow: hidden;
	background-image: url("../../images/grandp/cny26-frame-desktop.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background: cover;
}

.grandp-kv img {
	display: block;
	width: 100%;
}

.grandp-kv-text-block {
	display: block;
	position: absolute;
	box-sizing: border-box;
	width: 35%;
	height: 10vw;
	top: 14vw;
	left: 8%;
}

.grandp-kv-text-header {
	display: block;
	position: relative;
	box-sizing: border-box;
	font-family: "PPHatton-Medium";
	font-weight: 700;
	font-size: 4.2vw;
	line-height: 5vw;
	color: #88D3C8;
}

.grandp-kv-text-2 {
	display: block;
	position: relative;
	box-sizing: border-box;
	font-family: "Montserrat";
	font-weight: 500;
	font-size: 1.05vw;
	line-height: 1.3vw;
	width: 89%;
	height: auto;
	margin: 1.2vw 0 0 0;
	color: #88D3C8;
}

.grandp-kv-button {
	display: block;
	position: relative;
	background-color: #E50882;
	margin: 1.5vw 0;
	padding: 1vw 2.5%;
	width: 55%;
	text-align: center;
	font-family: "Montserrat";
	font-weight: 700;
	font-size: 1.1vw;
	line-height: 1.2vw;
	color: #fff;
	height: auto;
}

.grandp-kv-button:hover {
	color: #fff;
	background-color: #A20949;
}

.grandp-kv-kee-kee {
	display: block;
	position: absolute;
	width: 20%;
	height: 10vw;
	top: 20vw;
	left: 41%;
	z-index: 100;
	animation: bounce .5s infinite;
}

.grandp-kv-kee-kee img {
	display: block;
	width: 100%;
}

@keyframes bounce {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	25% {
		transform: translate(5px, 5px) rotate(5deg);
	}

	50% {
		transform: translate(0, 0) rotate(0eg);
	}

	75% {
		transform: translate(-5px, 5px) rotate(-5deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

.grandp-kv-kee-kee-shadow {
	display: block;
	position: absolute;
	width: 20%;
	height: 10vw;
	top: 42vw;
	left: 41%;
	z-index: 99;
}

.grandp-kv-kee-kee-shadow img {
	display: block;
	width: 100%;
}

.grandp-kv-symbol {
	display: block;
	position: absolute;
	width: 13.5%;
	height: 10vw;
	top: 8.4vw;
	left: 43.8%;
}

.grandp-kv-symbol img {
	display: block;
	width: 100%;
}

.grandp-kv-wish-cards-header {
	display: block;
	position: absolute;
	font-family: "PPHatton-Medium";
	font-weight: 700;
	font-size: 1vw;
	height: 3vw;
	width: 19%;
	top: 16%;
	left: 64%;
	color: #88D3C8;
	text-align: center;
}

.grandp-kv-wish-cards {
	display: block;
	position: absolute;
	width: 19%;
	height: 26vw;
	top: 12vw;
	left: 64%;
}

.grandp-kv-wish-cards img {
	display: block;
	width: 100%;
}

.arrow-display-right {
	display: none;
	position: absolute;
	top: 0vw;
	right: -20%;
	width: 1vw;
	height: 1vw;
	cursor: pointer;
	background-color: transparent;
	padding: 0;
	border: none;
}

.arrow-display-right img {
	display: block;
	width: 100%;
}

.arrow-display-left {
	display: none;
	position: absolute;
	top: 0vw;
	left: -20%;
	width: 1vw;
	height: 1vw;
	;
	cursor: pointer;
	background-color: transparent;
	padding: 0;
	border: none;
}

.arrow-display-left img {
	display: block;
	width: 100%;
}


.iossliderR {
	position: absolute;
	top: 10vw;
	left: 9%;
	z-index: 9999;
}

.iossliderL {
	display: block;
	position: absolute;
	top: 12vw;
	left: -10%;
	width: 1vw;
	height: 1vw;
	;
	cursor: pointer;
	background-color: transparent;
	padding: 0;
	border: none;
}

.iossliderL img,
.iossliderR img {
	width: 500px;


}

.grandp-kv-flower1 {
	display: block;
	position: absolute;
	width: 5%;
	height: 5vw;
	top: 8vw;
	left: 2%;
	rotate: 0deg;
}

.recipe-entry {
	height: 26vw;
}

.grandp-kv-flower1 img {
	display: block;
	width: 100%;
}

.grandp-kv-flower2 {
	display: block;
	position: absolute;
	width: 13.5%;
	height: 10vw;
	top: 39vw;
	left: 86.5%;
	rotate: 0deg;
}

.grandp-kv-flower2 img {
	display: block;
	width: 100%;
}

/*WIN A PRIZE$*/

/*VIDEO*/
.grandp-video-block {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	padding: 5vw 0 6vw 0;
	height: 67vw;
	overflow: hidden;
	background-color: #88D3C8;
}

.grandp-video-text-block {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0 0 2vw 0;
	overflow: hidden;
	padding: 0;
	text-align: center;
}

.grandp-video-header {
	display: inline-block;
	margin: 0 0 1vw 0;
	font-family: "PPHatton-Medium";
	font-weight: 700;
	font-size: 4.5vw;
	line-height: 5vw;
	color: #3A1E39;
}

.grandp-video-text {
	display: inline-block;
	margin: 0 33%;
	box-sizing: border-box;
	font-family: "Montserrat";
	font-weight: 500;
	font-size: 1.05vw;
	line-height: 1.3vw;
	color: #3A1E39;
}

.grandp-video-flower1 {
	display: block;
	position: absolute;
	width: 11%;
	height: 8vw;
	top: 56vw;
	left: 7%;
	rotate: 0deg;
}

.grandp-video-flower1 img {
	display: block;
	width: 100%;
}

.grandp-video-flower2 {
	display: block;
	position: absolute;
	width: 10.5%;
	height: 6vw;
	top: 11vw;
	left: 86%;
	rotate: 0deg;
}

.grandp-video-flower2 img {
	display: block;
	width: 100%;
}

.video_container {
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	width: 72%;
	margin: 0 14%;
	clip-path: polygon(0 2vw, 2vw 2vw, 2vw 0, calc(100% - 2vw) 0, calc(100% - 2vw) 2vw, 100% 2vw, 100% calc(100% - 2vw), calc(100% - 2vw) calc(100% - 2vw), calc(100% - 2vw) 100%, 2vw 100%, 2vw calc(100% - 2vw), 0 calc(100% - 2vw));
}

.video_container::after {
	padding-top: 56.25%;
	display: block;
	content: '';
}

.video_container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*MEET KEE KEE*/
.grandp-kee-kee {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 55vw;
	overflow: hidden;
	background-color: #E50882;
	background-image: url("../../images/grandp/meet-kee-kee-background.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background: cover;
}

.grandp-kee-kee img {
	display: block;
	width: 100%;
}

.grandp-kee-kee-text-block {
	display: block;
	position: absolute;
	box-sizing: border-box;
	width: 32%;
	height: 10vw;
	top: 33vw;
	left: 15%;
	text-align: left;
}

.grandp-kee-kee-text-header {
	display: block;
	position: relative;
	box-sizing: border-box;
	font-family: "PPHatton-Medium";
	font-weight: 700;
	font-size: 3.7vw;
	line-height: 4vw;
	color: #471E3A;
}

.grandp-kee-kee-text-2 {
	display: block;
	position: relative;
	box-sizing: border-box;
	font-family: "Montserrat";
	font-weight: 500;
	font-size: 1.05vw;
	line-height: 1.3vw;
	margin: 1.5vw 0 0 0;
	color: #471E3A;
}

.grandp-kee-kee-image {
	display: block;
	position: absolute;
	width: 30%;
	height: 30vw;
	top: 13.5vw;
	left: 52.5%;
	z-index: 100;
}

.grandp-kee-kee-image:hover {
	animation: jump-shaking 2.25s infinite;
}

@keyframes jump-shaking {
	0% {
		transform: translateX(0)
	}

	25% {
		transform: translateY(-9px)
	}

	35% {
		transform: translateY(-9px) rotate(17deg)
	}

	55% {
		transform: translateY(-9px) rotate(-17deg)
	}

	65% {
		transform: translateY(-9px) rotate(17deg)
	}

	75% {
		transform: translateY(-9px) rotate(-17deg)
	}

	100% {
		transform: translateY(0) rotate(0)
	}
}

.grandp-kee-kee-image img {
	display: block;
	width: 100%;
}

.grandp-meet-kee-kee-shadow {
	display: block;
	position: absolute;
	width: 29%;
	height: 10vw;
	top: 45vw;
	left: 53%;
	z-index: 99;
}

.grandp-meet-kee-kee-shadow img {
	display: block;
	width: 100%;
}

/*RECIPES*/
.grandp-recipes {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 50vw;
	overflow: hidden;
	background-color: #471E3A;
	padding: 6.5vw 0 5vw 14.5%;
}

.grandp-recipes img {
	display: block;
	width: 100%;
}

.grandp-recipes-text-block {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0;
}

.grandp-recipes-text-header {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 32%;
	height: auto;
	font-family: "PPHatton-Medium";
	font-weight: 700;
	font-size: 3.7vw;
	line-height: 4vw;
	color: #88D3C8;
	float: left;
	margin: 0;
}

.grandp-recipes-text-2 {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 35%;
	height: auto;
	font-family: "Montserrat";
	font-weight: 500;
	font-size: 1.05vw;
	line-height: 1.3vw;
	color: #88D3C8;
}
.grandp-recipes-arrow {
	display: block;
	position: absolute;
	box-sizing: border-box;
	top: 26vw;
	left: 10%;
	width: 4%;
	height: 4vw;
	overflow: hidden;
}
.grandp-recipes-arrow img {
	display: block;
	width: 100%;
}
.grandp-recipes-outer {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 2vw 0 0 0;
}

.grandp-recipes-block-inner {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
}

.grandp-recipe-outer {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 20%;
	height: auto;
	overflow: hidden;
	padding: 1.5vw;
	background-color: #36182e;
	margin-left: 1vw;
}

.grandp-recipe-image {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	overflow: hidden;
	clip-path: polygon(0 1vw, 1vw 1vw, 1vw 0, calc(100% - 1vw) 0, calc(100% - 1vw) 1vw, 100% 1vw, 100% calc(100% - 1vw), calc(100% - 1vw) calc(100% - 1vw), calc(100% - 1vw) 100%, 1vw 100%, 1vw calc(100% - 1vw), 0 calc(100% - 1vw));
}

.grandp-recipe-image img {
	display: block;
	width: 100%;
}

.grandp-recipe-title {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 5vw;
	font-family: "Montserrat";
	font-weight: 700;
	font-size: 1vw;
	line-height: 1.5vw;
	color: #fff;
	padding: 1vw 0 1vw 0;
	white-space: wrap;
}

.grandp-recipe-spec {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	font-family: "Montserrat";
	font-weight: 400;
	font-size: 1.1vw;
	line-height: 1.5vw;
	color: #fff;
	padding: .6vw 0 .6vw 0;
	border-top: white .5px solid;
	border-bottom: white .5px solid;
}

.grandp-recipe-spec-text,
.grandp-recipe-spec-text2 {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 48%;
	height: auto;
	font-family: "Montserrat";
	font-weight: 400;
	font-size: .8vw;
	line-height: 1vw;
	text-align: center;
	color: #fff;
	padding: .2vw 0 .2vw 0;
	border-right: white .5px solid;
}

.grandp-recipe-spec-text2 {
	border-right: none;
}

.grandp-recipe-type {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	font-family: "Montserrat";
	font-weight: 400;
	font-size: 1.1vw;
	line-height: 1.5vw;
	color: #fff;
	padding: 1vw 0 1vw 0;
}

.grandp-recipe-type-text {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: auto;
	height: auto;
	font-family: "Montserrat";
	font-weight: 500;
	font-size: .75vw;
	line-height: .75vw;
	text-align: center;
	color: #fff;
	border-radius: 1vw;
	background-color: #E50882;
	padding: .7vw 1vw .7vw 1vw;
}

.grandp-recipe-button {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	font-family: "Montserrat";
	font-weight: 700;
	font-size: 1.1vw;
	line-height: 1.1vw;
	letter-spacing: .5px;
	text-align: center;
    text-transform: uppercase;
	color: #471E3A;
	background-color: #88D3C8;
	padding: 1vw 1vw 1vw 1vw;
}

.grandp-recipe-button:hover {
	color: #471E3A;
	background-color: #72b5a9;
}

.grandp-recipes-flower1 {
	display: block;
	position: absolute;
	width: 3.5%;
	height: 3vw;
	top: 6vw;
	left: 5%;
	rotate: 0deg;
}

.grandp-recipes-flower1 img {
	display: block;
	width: 100%;
}

.grandp-recipes-flower2 {
	display: block;
	position: absolute;
	width: 8%;
	height: 6vw;
	top: 10vw;
	left: 1%;
	rotate: 45deg;
}

.grandp-recipes-flower2 img {
	display: block;
	width: 100%;
}

/*BOOK*/
.grandp-book {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 50vw;
	overflow: hidden;
	background-color: #471E3A;
}

.grandp-book img {
	display: block;
	width: 100%;
}

.grandp-book-text-block {
	display: block;
	position: absolute;
	box-sizing: border-box;
	width: 35%;
	height: 10vw;
	top: 8vw;
	left: 15%;
}

.grandp-book-text-header {
	display: block;
	position: relative;
	box-sizing: border-box;
	font-family: "PPHatton-Medium";
	font-weight: 700;
	font-size: 3.7vw;
	line-height: 4vw;
	color: #88D3C8;
}

.grandp-book-text-2 {
	display: block;
	position: relative;
	box-sizing: border-box;
	font-family: "Montserrat";
	font-weight: 500;
	font-size: 1.05vw;
	line-height: 1.3vw;
	width: 89%;
	height: auto;
	margin: 1.5vw 0 0 0;
	color: #88D3C8;
}

.grandp-book-button {
	display: block;
	position: relative;
	background-color: #88D3C8;
	margin: 1.8vw 0;
	padding: 1vw 2.5%;
	width: 55%;
	text-align: center;
	font-family: "Montserrat";
	font-weight: 700;
	font-size: 1.1vw;
	line-height: 1.2vw;
	color: #471E3A;
	height: auto;
}

.grandp-book-button:hover {
	color: #471E3A;
	background-color: #72b5a9;
}

.grandp-book-symbol {
	display: block;
	position: absolute;
	width: 13.5%;
	height: 10vw;
	top: 26.5vw;
	left: 43%;
}

.grandp-book-symbol img {
	display: block;
	width: 100%;
}

.grandp-book-image {
	display: block;
	position: absolute;
	width: 33%;
	height: 20vw;
	top: 1vw;
	left: 55%;
}

.grandp-book-image img {
	display: block;
	width: 100%;
}

.grandp-book-flower1 {
	display: block;
	position: absolute;
	width: 10%;
	height: 8vw;
	top: 25.5vw;
	left: 6%;
	rotate: 0deg;
}

.grandp-book-flower1 img {
	display: block;
	width: 100%;
}

.grandp-book-flower2 {
	display: block;
	position: absolute;
	width: 10%;
	height: 6vw;
	top: 2vw;
	left: 84%;
	rotate: 0deg;
}

.grandp-book-flower2 img {
	display: block;
	width: 100%;
}

.grandp-book-flower3 {
	display: block;
	position: absolute;
	width: 6%;
	height: 2vw;
	top: 28vw;
	left: 83%;
	rotate: 0deg;
}

.grandp-book-flower3 img {
	display: block;
	width: 100%;
}

/*MIX & MATCH*/
.grandp-mix {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 50vw;
	overflow: hidden;
	background-color: #88D3C8;
}

.grandp-mix img {
	display: block;
	width: 100%;
}

.grandp-mix-text-block {
	display: block;
	position: absolute;
	box-sizing: border-box;
	width: 35%;
	height: 10vw;
	top: 7vw;
	left: 10%;
	text-align: left;
	z-index: 101;
}

.grandp-mix-text-header {
	display: block;
	position: relative;
	box-sizing: border-box;
	font-family: "PPHatton-Medium";
	font-weight: 700;
	font-size: 3.7vw;
	line-height: 4vw;
	color: #471E3A;
}

.grandp-mix-text-2 {
	display: block;
	position: relative;
	box-sizing: border-box;
	font-family: "Montserrat";
	font-weight: 500;
	font-size: 1.05vw;
	line-height: 1.3vw;
	width: 60%;
	height: auto;
	margin: 1.5vw 0 0 0;
	color: #471E3A;
}

.grandp-mix-button {
	display: block;
	position: relative;
	background-color: #471E3A;
	margin: 1.8vw 0;
	padding: 1vw 0;
	width: 65%;
	text-align: center;
	font-family: "Montserrat";
	font-weight: 700;
	font-size: 1.1vw;
	line-height: 1.2vw;
	color: #fff;
	height: auto;
}

.grandp-mix-button:hover {
	color: #FFF;
	background-color: #603c57;
}

.grandp-mix-symbol {
	display: block;
	position: absolute;
	width: 13.5%;
	height: 10vw;
	top: 32vw;
	left: 11%;
}

.grandp-mix-symbol img {
	display: block;
	width: 100%;
}

.grandp-mix-flower1 {
	display: block;
	position: absolute;
	width: 8%;
	height: 8vw;
	top: 37vw;
	left: 6%;
	rotate: 0deg;
}

.grandp-mix-flower1 img {
	display: block;
	width: 100%;
}

.grandp-mix-flower2 {
	display: block;
	position: absolute;
	width: 10%;
	height: 6vw;
	top: 8vw;
	left: 80%;
	rotate: 0deg;
}

.grandp-mix-flower2 img {
	display: block;
	width: 100%;
}

.grandp-mix-outer {
	display: block;
	position: absolute;
	box-sizing: border-box;
	width: 80%;
	height: 45vw;
	overflow: hidden;
	bottom: 0;
	right: 0;
}

.grandp-mix-outer img {
	display: block;
	width: 100%;
}

.grandp-mix-block-inner {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
}

.grandp-mix2-outer {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 17.5%;
	height: auto;
	overflow: hidden;
	padding: 0;
	margin: 1vw 1vw 0 1vw;
}

.grandp-mix-image {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	overflow: hidden;
	clip-path: polygon(0 1vw, 1vw 1vw, 1vw 0, calc(100% - 1vw) 0, calc(100% - 1vw) 1vw, 100% 1vw, 100% calc(100% - 1vw), calc(100% - 1vw) calc(100% - 1vw), calc(100% - 1vw) 100%, 1vw 100%, 1vw calc(100% - 1vw), 0 calc(100% - 1vw));
}

.grandp-mix-image img {
	display: block;
	width: 100%;
}

/*MOMENTS*/
.grandp-moments {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 55vw;
	overflow: hidden;
	background-color: #471E3A;
	background-image: url("../../images/grandp/moments-image.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background: cover;
}

.grandp-moments img {
	display: block;
	width: 100%;
}

.scrollmenu {
	width: 100%;
	height: fit-content;
	cursor: grab;
	/**used to scroll text*/
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
	/**keep scrolling when*finger or cursor scrolling*/
	-webkit-overflow-scrolling: touch;
}

.product-card {
	background-color: red;
	width: 100px;
	height: 100px;
	float: none;
	display: inline-block;
}

/*to hide the scrollbars*/
::-webkit-scrollbar {
	display: none;
}

@media only screen and (max-width: 1900px) {

	.grandp-recipes-text-header {
		font-size: 3.3vw;
		line-height: 4vw;
	}

	.grandp-recipes-text-2 {
		font-weight: 500;
		font-size: .95vw;
	}

	.grandp-recipe-title {
		height: 4.5vw;
		font-size: .9vw;
		line-height: 1.3vw;

	}

	.grandp-kv-text-header {
		display: block;
		position: relative;
		box-sizing: border-box;
		font-family: "PPHatton-Medium";
		font-weight: 700;
		font-size: 4.1vw;
		line-height: 5vw;
		color: #88D3C8;
	}

	@media only screen and (max-width: 1500px) {
		.grandp-win {
			height: 75vw;
		}
		.grandp-recipes-arrow {
	top: 26vw;
	left: 9%;
}
.grandp-recipes-arrow img {
	display: block;
	width: 80%;
}
	}

	@media only screen and (max-width: 1400px) {}

	@media only screen and (max-width: 1200px) {}

	@media only screen and (max-width: 1024px) {
		.grandp-win {
			display: block;
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 90vw;
			overflow: hidden;
			background-color: #F6E400;
		}
		.grandp-recipes-arrow {
	top: 26vw;
	left: 7%;
}
.grandp-recipes-arrow img {
	display: block;
	width: 70%;
}	
/* MENU BANNER */
.grandp-menu {
			padding: 1vw 0 0 0;
			top: 73px;
			width: 100%;
			height: 55px;
}
.grandp-menu-text {
			padding: 1.5vw 4vw;
			font-family: "Montserrat", sans-serif;
			font-size: 1.7vw;
			line-height: 2vw;
		}
.grandp-kv {
	height: 53vw;
	margin-top: 34px;
}
	}

	@media only screen and (max-width: 820px) {
		.grandp-win {
			display: block;
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 100vw;
			overflow: hidden;
			background-color: #F6E400;
		}

		.arrow-display-right {
			top: 12vw;
			right: -13%;
			width: 2vw;
			height: 2vw;

		}

		.arrow-display-left {
			top: 12vw;
			left: -13%;
			width: 2vw;
			height: 2vw;
			;
		}
	}

	@media only screen and (max-width: 461px) {

		/* MENU BANNER */
		.grandp-menu {
			padding: 3vw 0 0 0;
			top: 75px;
			width: 100%;
			height: 88px;
		}

		.grandp-menu-text {
			padding: 1vw 6vw;
			font-family: "Montserrat", sans-serif;
			font-size: 4.5vw;
			line-height: 5vw;
		}

		/* 2026 KV */
		.grandp-kv {
			width: 100%;
			height: 335vw;
			margin-top: 60px;
			background-color: #471E3A;
		}

		.grandp-kv img {
			display: block;
			width: 100%;
		}

		.grandp-kv-flower1 {
			display: none;
		}

		.grandp-frame {
			width: 90%;
			height: 260vw;
			top: 7vw;
			left: 5%;
			background-image: url("../../images/grandp/cny26-frame-mobile.svg");
		}

		.grandp-kv-text-block {
			width: 90%;
			height: 10vw;
			top: 52vw;
			left: 3%;
		}

		.grandp-kv-text-header {
			font-weight: 700;
			font-size: 11vw;
			line-height: 12vw;
		}

		.grandp-kv-text-2 {
			font-size: 4.5vw;
			line-height: 6vw;
			width: 88%;
			margin: 3vw 0 0 0;
			color: #88D3C8;
		}

		.grandp-kv-button {
			display: block;
			position: relative;
			background-color: #E50882;
			margin: 3vw 0 3vw 18%;
			padding: 6vw 4vw 6vw 4vw;
			width: 58%;
			font-size: 4vw;
			line-height: 4vw;
			letter-spacing: 1px;
			color: #fff;
			height: auto;

		}

		.grandp-kv-kee-kee {
			width: 70%;
			height: 50vw;
			top: 250vw;
			left: 15%;
		}

		.grandp-kv-kee-kee-shadow {
			width: 70%;
			height: 10vw;
			top: 330vw;
			left: 12%;
		}

		.grandp-kv-kee-kee-shadow img {
			display: block;
			width: 100%;
		}

		.grandp-kv-symbol {
			width: 38%;
			height: 10vw;
			top: 14vw;
			left: 31.5%;
		}

		.grandp-kv-wish-cards-header {
			display: block;
			position: absolute;
			font-family: "PPHatton-Medium";
			font-weight: 700;
			font-size: 5vw;
			height: 5vw;
			width: 100%;
			top: 135vw;
			left: 0;
			color: #88D3C8;
			text-align: center;
			z-index: 102;
		}

		.grandp-kv-wish-cards {
			display: block;
			position: absolute;
			width: 82%;
			height: 250vw;
			top: 145vw;
			left: 9%;
		}

		.grandp-kv-wish-cards img {
			display: block;
			width: 100%;
		}

		.wow-wrapper {
			display: block;
			position: relative;
			width: 100%;
			height: 250vw;

		}

		.arrow-display-right {
			top: 50vw;
			right: -10%;
			width: 5vw;
			height: 5vw;

		}

		.arrow-display-right img {
			display: block;
			width: 100%;
		}

		.arrow-display-left {
			top: 50vw;
			left: -10%;
			width: 5vw;
			height: 5vw;
		}

		.arrow-display-left img {
			display: block;
			width: 100%;
		}

		.slider {
			position: relative;
			width: 100%;
			height: 250vw;
			margin: 0 auto;
			padding: 0;

		}

		.recipe-entry {
			height: 120vw;
		}

		.grandp-kv-flower2 {
			display: none;
			width: 25%;
			height: 10vw;
			top: 270vw;
		}

		.recipe-scroll,
		.iosslider {
			position: relative;
			width: 100%;
			height: 250vw;
		}

		/*WIN*/
		.grandp-win {
			display: block;
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 260vw;
			overflow: hidden;
			background-color: #F6E400;
		}

		/*VIDEO*/
		.grandp-video-block {
			padding: 5vw 0 6vw 0;
			height: 200vw;
			overflow: hidden;
			background-color: #88D3C8;
		}

		.grandp-video-text-block {
			width: 100%;
			height: auto;
			margin: 40vw 0 2vw 0;
			padding: 0;
		}

  .grandp-video-header { 
 margin: 0 2vw 4vw 3vw; 
 font-size: 9vw; 
 line-height: 11vw; 
 }

		.grandp-video-text {
			margin: 0 5%;
			font-size: 4vw;
			line-height: 5vw;
		}

		.grandp-video-flower1 {
			width: 37%;
			height: 30vw;
			top: 160vw;
			left: 8%;
		}

		.grandp-video-flower2 {
			width: 32%;
			height: 6vw;
			top: 5vw;
			left: 57%;
		}

		.video_container {
			width: 96%;
			margin: 10vw 2% 0 2%;
			clip-path: polygon(0 6vw, 6vw 6vw, 6vw 0, calc(100% - 6vw) 0, calc(100% - 6vw) 6vw, 100% 6vw, 100% calc(100% - 6vw), calc(100% - 6vw) calc(100% - 6vw), calc(100% - 6vw) 100%, 6vw 100%, 6vw calc(100% - 6vw), 0 calc(100% - 6vw));
		}

		/*MEET KEE KEE*/
		.grandp-kee-kee {
			height: 250vw;
			background-image: url("../../images/grandp/meet-kee-kee-background-mob.jpg");
			background-size: 100%;
			background-repeat: no-repeat;
			background: cover;
		}

		.grandp-kee-kee-text-block {
			width: 90%;
			height: 10vw;
			top: 160vw;
			left: 5%;
			text-align: center;
		}

		.grandp-kee-kee-text-header {
			font-size: 11vw;
			line-height: 12vw;
		}

		.grandp-kee-kee-text-2 {
			font-size: 4.5vw;
			line-height: 6vw;
			margin: 4vw 5% 0 5%;

		}

		.grandp-kee-kee-image {
			width: 90%;
			height: 30vw;
			top: 40vw;
			left: 5%;
		}

		.grandp-meet-kee-kee-shadow {
			width: 84%;
			height: 10vw;
			top: 135vw;
			left: 8%;
		}

		.grandp-meet-kee-kee-shadow img {
			display: block;
			width: 100%;
		}

		/*RECIPES*/
		.grandp-recipes {
			height: 250vw;
			padding: 0 0 0 7%;
		}

		.grandp-recipes-text-block {
			margin: 60vw 0 0 0;
		}

		.grandp-recipes-text-header {
			width: 100%;
			font-size: 11vw;
			line-height: 12vw;
			margin: 0 0 7vw 0;
		}

		.grandp-recipes-text-2 {
			width: 84%;
			font-size: 4.5vw;
			line-height: 6vw;
		}
.grandp-recipes-arrow {
display: none;
}
		.grandp-recipes-outer {
			margin: 12vw 0 -10% 0;
		}

		.grandp-recipes-block-inner {}

		.grandp-recipe-outer {
			width: 80%;
			padding: 5vw;
			margin-left: 5vw;
		}

		.grandp-recipe-image {
			clip-path: polygon(0 4vw, 4vw 4vw, 4vw 0, calc(100% - 4vw) 0, calc(100% - 4vw) 4vw, 100% 4vw, 100% calc(100% - 4vw), calc(100% - 4vw) calc(100% - 4vw), calc(100% - 4vw) 100%, 4vw 100%, 4vw calc(100% - 4vw), 0 calc(100% - 4vw));
		}

		.grandp-recipe-title {
			width: 100%;
			height: 15vw;
			font-size: 4vw;
			line-height: 5vw;
			padding: 3vw 0 1vw 0;
		}

		.grandp-recipe-spec {
			width: 100%;
			font-size: 3vw;
			line-height: 3vw;
			color: #fff;
			padding: 2vw 0 2vw 0;
			border-top: white .5px solid;
			border-bottom: white .5px solid;
			text-align: center;
		}

		.grandp-recipe-spec-text,
		.grandp-recipe-spec-text2 {
			width: 48%;
			font-size: 3vw;
			line-height: 3vw;
			padding: 1vw 0 1vw 0;
			border-right: white .5px solid;
		}

		.grandp-recipe-spec-text2 {
			border-right: none;
		}

		.grandp-recipe-type {
			width: 100%;
			font-size: 1.1vw;
			line-height: 1.5vw;
			padding: 4vw 0 4vw 0;
		}

		.grandp-recipe-type-text {
			font-size: 2.5vw;
			line-height: 2.5vw;
			border-radius: 6vw;
			padding: 3vw 5vw 3vw 5vw;
		}

		.grandp-recipe-button {
			font-size: 3vw;
			line-height: 3vw;
			letter-spacing: 1px;
			color: #471E3A;
			background-color: #88D3C8;
			padding: 4vw 1vw 4vw 1vw;
		}

		.grandp-recipe-button a:link {
			color: #471E3A;
			background-color: #88D3C8;
			text-decoration: none;
		}

		.grandp-recipe-button a:visited {
			color: #471E3A;
		}

		.grandp-recipe-button a:hover {
			color: #88D3C8;
			background-color: #E50882;
		}

		.grandp-recipe-button a:active {
			color: #471E3A;
		}

		.grandp-recipes-flower1 {
			width: 12%;
			height: 12vw;
			top: 12vw;
			left: 18%;
			rotate: 0deg;
		}

		.grandp-recipes-flower2 {
			width: 27%;
			height: 12vw;
			top: 28vw;
			left: 12%;
			rotate: 45deg;
		}

		/*BOOK*/
		.grandp-book {
			height: 290vw;
		}

		.grandp-book-text-block {
			display: block;
			position: absolute;
			box-sizing: border-box;
			width: 90%;
			height: 10vw;
			top: 166vw;
			left: 7%;
		}

		.grandp-book-text-header {
			font-size: 11vw;
			line-height: 12vw;
		}

		.grandp-book-text-2 {
			font-size: 4.5vw;
			line-height: 6vw;
			width: 90%;
			margin: 5vw 0 10vw 0;
		}

		.grandp-book-button {
			display: block;
			position: relative;
			background-color: #88D3C8;
			margin: 1.8vw 0;
			padding: 6vw 6%;
			width: 85%;
			text-align: center;
			font-family: "Montserrat";
			font-weight: 700;
			font-size: 4vw;
			line-height: 4vw;
			color: #471E3A;
			height: auto;
		}

		.grandp-book-button a:link {
			color: #471E3A;
			background-color: #88D3C8;
			text-decoration: none;
		}

		.grandp-book-button a:visited {
			color: #153C2A;
		}

		.grandp-book-button a:hover {
			color: #88D3C8;
			background-color: #E50882;
		}

		.grandp-book-button a:active {
			color: #153C2A;
		}

		.grandp-book-symbol {
			display: none;
		}

		.grandp-book-image {
			width: 90%;
			height: 80vw;
			top: 50vw;
			left: 5%;
		}

		.grandp-book-image img {
			display: block;
			width: 100%;
		}

		.grandp-book-flower1 {
			width: 46%;
			height: 8vw;
			top: 12vw;
			left: 17%;
			rotate: 0deg;
		}

		.grandp-book-flower2 {
			display: none;
		}

		.grandp-book-flower3 {
			display: none;
		}

		/*MIX & MATCH*/
		.grandp-mix {
			height: 270vw;
		}

		.grandp-mix-text-block {
			width: 90%;
			height: 10vw;
			top: 20vw;
			left: 5%;
		}

		.grandp-mix-text-header {
			font-size: 11vw;
			line-height: 12vw;
		}

		.grandp-mix-text-2 {
			font-size: 4.5vw;
			line-height: 6vw;
			width: 86%;
			margin: 5vw 0 0 0;
		}

		.grandp-mix-button {
			position: absolute;
			display: block;
			top: 170vw;
			left: 0;
			padding: 6vw 5%;
			width: 90%;
			text-align: center;
			font-family: "Montserrat";
			font-weight: 700;
			font-size: 4vw;
			line-height: 4vw;
			color: #fff;
			height: auto;
			text-transfporm: uppercase;
		}

		.grandp-mix-button a:link {
			color: #fff;
			background-color: #471E3A;
			text-decoration: none;
		}

		.grandp-mix-button a:visited {
			color: #153C2A;
		}

		.grandp-mix-button a:hover {
			color: #88D3C8;
			background-color: #E50882;
		}

		.grandp-mix-button a:active {
			color: #153C2A;
		}

		.grandp-mix-symbol {
			display: block;
			position: absolute;
			width: 40%;
			height: 40vw;
			top: 80vw;
			left: 49%;
		}

		.grandp-mix-symbol img {
			display: block;
			width: 100%;
		}

		.grandp-mix-flower1 {
			display: block;
			position: absolute;
			width: 25%;
			height: 20vw;
			top: 220vw;
			left: 10%;
			rotate: 0deg;
		}

		.grandp-mix-flower2 {
			display: none;
		}

		.grandp-mix-outer {
			display: block;
			position: absolute;
			box-sizing: border-box;
			width: 120%;
			height: 60vw;
			overflow: hidden;
			top: 120vw;
			right: 0;
		}

		.grandp-mix-outer img {
			display: block;
			width: 100%;

		}

		.grandp-mix-block-inner {
			display: block;
			position: relative;
			box-sizing: border-box;
			width: 100%;
		}

		.grandp-mix2-outer {
			display: inline-block;
			position: relative;
			box-sizing: border-box;
			width: 80%;
			height: auto;
			overflow: hidden;
			padding: 0;
			margin: 1vw 0 0 1vw;
		}

		.grandp-mix-image {
			display: block;
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: auto;
			overflow: hidden;
			background-color: #fff;
			clip-path: polygon(0 4vw, 4vw 4vw, 4vw 0, calc(100% - 4vw) 0, calc(100% - 4vw) 4vw, 100% 4vw, 100% calc(100% - 4vw), calc(100% - 4vw) calc(100% - 4vw), calc(100% - 4vw) 100%, 4vw 100%, 4vw calc(100% - 4vw), 0 calc(100% - 4vw));
		}

		.grandp-mix-image img {
			display: block;
			width: 100%;
		}

		/*MOMENTS*/
		.grandp-moments {
			display: block;
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 175vw;
			overflow: hidden;
			background-color: #471E3A;
			background-image: url("../../images/grandp/moments-image-mob.jpg");
			background-size: 100%;
			background-repeat: no-repeat;
			background: cover;
		}

		.grandp-moments img {
			display: block;
			width: 100%;
		}
	}